- 60
- 36 042
SebikoStudio
Приєднався 27 тра 2020
Hi! I’m Seb 👋, a Polish Product Designer with over 10 years of experience in building and shipping digital products. I specialize in design systems. Previously, I was a Senior Product Designer at Miro, the Core Product Experience Team.
I worked in Berlin for 7 years and now live in Taiwan.
I created this channel to share my knowledge and experiences in design and development.
Subscribe for practical design and development tips, insights, and updates on my ongoing projects. I've also started mentoring in product design, design systems, and accessibility on ADPList, so feel free to book a session with me. Link below!
I worked in Berlin for 7 years and now live in Taiwan.
I created this channel to share my knowledge and experiences in design and development.
Subscribe for practical design and development tips, insights, and updates on my ongoing projects. I've also started mentoring in product design, design systems, and accessibility on ADPList, so feel free to book a session with me. Link below!
Pricing App: Cost Calculator Builder for WordPress | React and JSON | No Coding Needed
Hey everyone! Today, I’ll show you a simple React-based pricing calculator that you can easily embed in WordPress.
In this video, we’ll cover:
👉 Setting up a dynamic pricing calculator using JSON modules
👉 Embedding it as a shortcode on your WordPress site
👉 Easily updating prices, sliders, and options without needing code
Perfect for quick pricing updates or A/B tests!
Like, comment, and subscribe if you find this interesting.
Thanks for watching!
#react #pricingcalculator #wordpress #json #webdevelopment
------------------------------
🎵 Track Info:
Title: Purple LoFi Chill Beats - Reverse [lofi hip hop/chill beats] (No Copyright)(Royalty Free)
Purple LoFi Chill Beats is a French author and composer of royalty-free Lo-Fi music.
/ lofiwavemusic
---
In this video, we’ll cover:
👉 Setting up a dynamic pricing calculator using JSON modules
👉 Embedding it as a shortcode on your WordPress site
👉 Easily updating prices, sliders, and options without needing code
Perfect for quick pricing updates or A/B tests!
Like, comment, and subscribe if you find this interesting.
Thanks for watching!
#react #pricingcalculator #wordpress #json #webdevelopment
------------------------------
🎵 Track Info:
Title: Purple LoFi Chill Beats - Reverse [lofi hip hop/chill beats] (No Copyright)(Royalty Free)
Purple LoFi Chill Beats is a French author and composer of royalty-free Lo-Fi music.
/ lofiwavemusic
---
Переглядів: 82
Відео
FabricJs 6 and React Tutorial | Control Layers with zIndex | Layer Management System - Part 7
Переглядів 669Місяць тому
In this video, we’ll explore how to build a layer management system in a Fabric.js canvas app using React. Learn how to manage layers, assign unique IDs, and control the Z-index to reorder objects on your canvas, just like in professional design tools. 🔧 What you'll learn: 👉 Managing canvas layers with Fabric.js. 👉 Assigning unique IDs to canvas objects. 👉 Adding custom Z-index in Fabric.js. By...
Build a Single-Page CMS with Netlify, GitHub, and React | ReactJs CMS with Serverless Functions
Переглядів 301Місяць тому
In this video, I’ll show you how to build a custom single-page website CMS using React, GitHub, and Netlify. With serverless functions, you can easily manage image uploads and trigger automatic builds every time you commit changes. Ideal for small businesses looking for a fast, scalable solution without the complexity of platforms like WordPress, WIX, or Webflow. Watch the full breakdown to see...
FabricJs 6 and React Tutorial | Cropping and Exporting Canvas to PNG - Part 6
Переглядів 609Місяць тому
In this video, we’re diving into how to add cropping functionality to your Fabric.js canvas in a React app. Learn step-by-step how to create crop frames, manage them, and export specific areas of your canvas as PNG files. 🔧 What you'll learn: 👉 Creating crop frames using Fabric.js. 👉 Managing frames and selecting specific areas for cropping. 👉 Exporting the selected area as a PNG image. By the ...
FabricJs 6 and React Tutorial | Object Snapping in HTML Canvas - Part 5
Переглядів 6202 місяці тому
In this video, we will improve our Fabric.js canvas with snapping functionality, allowing users to align objects to the edges and center. Learn how to create snapping helper functions, manage guidelines, and integrate this feature into your React app. 🔧 What you'll learn: 👉 Creating snapping helper functions. 👉 Snapping objects to canvas edges and center. 👉 Integrating snapping logic into your ...
FabricJs 6 and React Tutorial | Change Canvas Size - Adjust Height and Width of Canvas HTML - Part 4
Переглядів 5572 місяці тому
In this video, we dive deeper into building dynamic canvas applications with Fabric.js 6 and React. Today, we're creating a settings panel that allows real-time adjustments to your canvas dimensions, like width and height. Perfect for making your Fabric.js projects more flexible and user-friendly! 🔧 What you'll learn: 👉 Setting up the CanvasSettings component. 👉 Updating canvas dimensions in re...
GrapesJS Development - Build React Pages with Class/Style Editor & Automate Content with CSV!
Переглядів 6742 місяці тому
In this video, I will show you how to enhance the GrapesJS drag-and-drop editor in React with two powerful features: a real-time style editor and CSV file integration. Learn how to customize classes, manage content, and streamline your workflow without any coding required. Perfect for building landing pages or single-page applications quickly. Watch now to see how you can transform GrapesJS int...
FabricJs 6 and React Tutorial | Add, Control, and Export Videos in Canvas HTML - Part 3
Переглядів 8862 місяці тому
Welcome to part 3 after a short break! This video required more effort, and I hope to make future videos less complex. As a product designer exploring the Canvas API, I know there might be better ways to implement video recording and playback within Fabric.js 6, but I hope the logic I’ve structured here will give you a solid foundation to kickstart your own app. Let me know in the comments what...
FabricJs 6 and React Tutorial | Building a Dynamic Settings Panel - Part 2
Переглядів 1,5 тис.2 місяці тому
Welcome back to the Fabric.js series! In this second part, we’re taking your canvas application to the next level by building a dynamic settings panel in React. Learn how to create a user-friendly interface that lets you customize objects on your canvas, including changing dimensions, and background colors. In this video, I’ll walk you through: 👉 Setting up a settings panel component in React 👉...
FabricJs 6 and React Tutorial | Adding Shapes to Canvas - Part 1
Переглядів 2,6 тис.2 місяці тому
Welcome to the first part of the Fabric.js series! In this video, we're diving into the basics of using Fabric.js version 6 with React. Fabric.js is a powerful open-source JavaScript library that makes creating HTML canvas applications easy and fun. Whether you're building a graphic design editor or just experimenting with Canvas, this series will guide you through everything you need to know. ...
Create a Drag and Drop Editor for WordPress using GrapesJS: Part 3 | Dynamic Icon Library
Переглядів 6423 місяці тому
Learn how to dynamically load and update SVG icons in GrapesJS with this quick and easy tutorial! Whether you're adding new icons or ensuring existing ones stay up to date, this method will keep your icons consistent in the GrapesJS editor. Follow along as I show you how to fetch icons from a JSON file, automatically update them, and seamlessly integrate them into your projects. Plus, I'll shar...
Create a Drag and Drop Editor in React using GrapesJS: Part 2 | Dynamic Components | Web Design
Переглядів 3,8 тис.3 місяці тому
Are you tired of your drag-and-drop editors getting messed up by inexperienced users? In this video, I'll show you how to create dynamic blocks in GrapesJS that eliminate human error and enhance your web layout. We'll dive into creating a MenuCard block with a fixed layout, dynamically updating list items from a JSON file, and ensuring a scalable and centralized data management approach. In thi...
New Figma UI3 - First Impressions, Review, and Accessibility Concerns | ex Miro Sr. Product Designer
Переглядів 8883 місяці тому
Let's take a look at the new Figma UI3! In this video, I share my first impressions and detailed review from the perspective of an ex-Miro Senior Product Designer, Core Product Experience. Explore the major updates, like the Bottom Toolbar and floating panels, and understand the accessibility challenges these changes may bring. Is the redesign a game-changer or a step back? Watch now to find ou...
Create a Drag and Drop Editor in React using GrapesJS | Save & Restore Content
Переглядів 7 тис.3 місяці тому
Learn how to integrate the GrapesJS drag-and-drop editor into your React application. This basic guide covers saving and restoring content and rendering GrapesJS blocks with React components, making it an ideal choice for a headless CMS solution. Perfect for enhancing your web design workflow! In this video, you'll discover: 👉 Step-by-step integration of GrapesJS into a React app 👉 How to save ...
How to Create a Shortcode in WordPress | Speed Video 2024
Переглядів 473 місяці тому
Quick overview of WordPress shortcodes! Learn how to create a basic shortcode with attributes and even more complex ones like a Swiper carousel shortcode fetching posts from different categories or tags. If you're interested in more details on how to maximize the use of shortcodes, let me know in the comments section below, and I'll make a more detailed tutorial. #wordpressdevelopment #wordpres...
Best Drag-and-Drop Web Page Builder for your Wordpress Website | GrapesJS & WordPress ❤️
Переглядів 1,1 тис.3 місяці тому
Best Drag-and-Drop Web Page Builder for your Wordpress Website | GrapesJS & WordPress ❤️
Create Gaming Cards with Google Sheets & Canvas App built with FabricJS | ReactJS
Переглядів 1963 місяці тому
Create Gaming Cards with Google Sheets & Canvas App built with FabricJS | ReactJS
Learn How to Create Accessible Pixel-Perfect Icons in Figma! Design to Development [ARIAs]
Переглядів 1993 місяці тому
Learn How to Create Accessible Pixel-Perfect Icons in Figma! Design to Development [ARIAs]
Export Figma Icons to React with Gradients and Variable Strokes! | Figma to React 🚀
Переглядів 844 місяці тому
Export Figma Icons to React with Gradients and Variable Strokes! | Figma to React 🚀
First Impressions of Figma Slides: A Comparison with Miro! | Ex-Miro Product Designer
Переглядів 1 тис.4 місяці тому
First Impressions of Figma Slides: A Comparison with Miro! | Ex-Miro Product Designer
AI-Powered Travel Assistant | Itinerary Planner App | OpenAI and React App
Переглядів 784 місяці тому
AI-Powered Travel Assistant | Itinerary Planner App | OpenAI and React App
FabricJS with ChatGPT integration! Create Presentations in One Click with AI-Powered Canvas Tool 🚀
Переглядів 424 місяці тому
FabricJS with ChatGPT integration! Create Presentations in One Click with AI-Powered Canvas Tool 🚀
Create LinkedIn Carousel Banners in One Click with AI Design! AI-Powered Canvas Tool 🚀
Переглядів 824 місяці тому
Create LinkedIn Carousel Banners in One Click with AI Design! AI-Powered Canvas Tool 🚀
Canvas to Google Slides! Export your canvas design to PPT | Design Software built with Fabric Js 🚀
Переглядів 914 місяці тому
Canvas to Google Slides! Export your canvas design to PPT | Design Software built with Fabric Js 🚀
Export Canvas design to HTML! | Canvas tool built with Fabric Js and React.
Переглядів 1444 місяці тому
Export Canvas design to HTML! | Canvas tool built with Fabric Js and React.
Create custom Business Card with QR code FOR FREE! | AutoLayouts in Canvas App built with Fabric Js!
Переглядів 324 місяці тому
Create custom Business Card with QR code FOR FREE! | AutoLayouts in Canvas App built with Fabric Js!
Auto Layout in FabricJs Canvas! Bulk Create Banners with Google Sheet Integration! 🚀
Переглядів 3304 місяці тому
Auto Layout in FabricJs Canvas! Bulk Create Banners with Google Sheet Integration! 🚀
Rapid prototyping with React and React QR code reader
Переглядів 4834 місяці тому
Rapid prototyping with React and React QR code reader
Design tool built with FabricJS | Jump-start your creativity with Inspire Me feature!
Переглядів 685 місяців тому
Design tool built with FabricJS | Jump-start your creativity with Inspire Me feature!
Dynamic Layouts with Auto Constraints, Photo mode and Histograms in HTML Canvas | FabricJS and React
Переглядів 305 місяців тому
Dynamic Layouts with Auto Constraints, Photo mode and Histograms in HTML Canvas | FabricJS and React
Thanks for the awesome work. When the second part?
Hey! Sorry for the delay! I got caught up in the middle of some extra work. I have the material ready, just need to put it together and publish it! Hopefully this weekend!
Awesome work bro! When the next part?
Thank you! Most likely this weekend or next Monday!
I am a FE dev as well and This is sooo cool, genius.I want to create something like this, Could you please share how all this layout, interactions is being handled. all the css did you write custom or found some open source layout. And apart from GrapeJS did you use any other library? Again, this is so impressive!!
Thank you for the comment! This project was built with grapejs, amberjs and ghost cms to handle permissions. Recently, I launched my own project with grapesjs, react and nodejs - check this video: ua-cam.com/video/XTgZB4S9Pns/v-deo.html You can find link to repo with the project, feel free to fork it.
@ beautiful will check it out thank you.
Bro, Can we create drag & drop page builder like elementor using Vue js ??
Yeah, sure. You can try using libraries like sortable.js. Lots pf fun in defining all edge cases.
@sebikostudio Bro, Would you create video about this, pls.
Really good video. Is there a github repo for this?
Hey! Yes, I shared the access to repo in the following video: ua-cam.com/video/XTgZB4S9Pns/v-deo.html
Your videos are very helpful so far, but sometimes it can be pretty infuriating when you make a change but don't properly mention it, or when you cut a section of the video when you make a change. It's a bit disheartening to keep getting errors when it turns out I just missed something from the video because I didn't notice that something was added in because it happened too fast to be caught unless I'm really paying attention to the screen, which is a bit tough because sometimes I'm coding along as the video is playing. I really appreciate the videos that you make though, so I hope that you can improve on this point in the future. Also, maybe if there's a code section you think the viewer could handle on their own so you didn't include it in the video, maybe just mention that? Because at least then the viewer can just try to figure it out on their own without thinking that they missed something crucial. Thanks for making these series btw, it's really helping me out with my current project.
Appreciate your feedback! Still testing different formats, so I hope to keep improving the content in the upcoming videos.
Kindly explain every line ...you are running.type and explain the video please..
Superb !! Simply superb !! THANK YOU SO VERY MUCH !!
Absolutely loved this video! The content was super helpful, and the presentation was clear and engaging. Keep up the great work! Looking forward to more videos like this. 👍👏
Your video is very good. Thank you very much. One question: I saw a video with the title "Print on demand(POD) POC using fabric.js, three.js and shopify api", watching this series of videos do you intend to do something similar to what appears in the edit and appear video the final result on the shirt? Thanks.
Hey, thank you for the comment. I looked into three.js a few years ago and might experiment with fabric.js + three.js soon. I will post a video as soon as I develop something meaningful.
@@sebikostudio I have a project that already has fabrijs and threejs working together. It remains to be refined, do you want me to send it to you sequentially?
Figma is going down. Sad.
Amazing
Krep up the good work
How to create a cloth in html css
Can you please do something that load an complex svg and filling up the spaces with colors. Like an annotation.
Make a tutorial fabric.js with redux toolkit
Thankx for such amazing content
Please share the complete code of the project 😢
The presented code in the video is the whole code needed to run the function. If you mean like ready-to-copy and paste version, I am going to share once my UA-cam Channel hits over 700 subscribers! Stay tune for more!
@@sebikostudio 😞
Thanks for your tutorial. But I can't not find one that allow adding an image to the canvas. Do you plan to make it in the future? Anyway, very well done from you.
I will make one soon.
That's a really good idea ! Can you show us the code behind in a next video ?
Yeah, sure. I am thinking about adding pages and menu management to the app - I will show the code in the next video.
Great
great video. I am not able to hide the complete panel UI though. I passed panels: { defaults: []} but its only hiding the buttons. But the topnav and the right sidebar is still visible. How can I remove that as well? Couldnt find anything online. Please suggest.
Hey. Have you specified id: "panel-devices", and el: ".panel__devices"? This will remove the default HTML element: .gjs-pn-panels
man you deserve to have thousands of subscribers seriously. You are awesome!
Hi Is it possible to add export as svg ?
Yes, you can stringify canvas to SVG. Check: app.sebikostudio.com/
your series is really great. can you please also share the source code? it'll be great
yes i agree
Yes. I will share the source code once I hit 500 subscribers. Stay tuned for more.
@@sebikostudio Great. I hope you get more subs ✌️
Thanks
Hi its awesome tutorial i like to know about the binding csv with the grapes js content could show that or any repository or resource to get reference for that
Thank you. It's a custom solution I came up with. Unfortunately, I don't have any resources but I might make a video explaining the process.
Waiting for new videos
100 likes goal achieved. Sharing the GrapesJs React Integration code here: github.com/sebastiangrochocki/grapesjs-react-demo Make sure to check the readme. 1000 likes goal: I will deploy fully function Class / Style Editor as an independent App.
waiting for part 6
coming this week.
Hello, can you give link to github for full code of example app
Yes. I plan to publish a public repo once the full course is finished and if the course meets with enough interest.
@@sebikostudio i so excited to find out your course. I want to see full code to know how it works your editor when you showed it in first video. I am so interested.
Is it possible to make canvas text not that blurry ?
Yes, you can use the window.devicePixelRatio to return the correct CSS pixel ratio of the Physical Device (retina, non-retina, and so on), this can sharpen texts in your canvas application. Secondly, you can add pixel snapping making sure texts and shapes are always snapped to the pixel grid instead of values like 1.455px.. It will give you crisp edges.
@@sebikostudio Thank you very much😇
awesome! thanks
You're a live saver. I was looking for an easy tutorial for this library since the docs is easy to learn from. ❤❤❤
You're a live saver. I was looking for an easy tutorial for this library since the docs is easy to learn from. ❤❤❤
You're a live saver. I was looking for an easy tutorial for this library since the docs is easy to learn from. ❤❤❤
You're a live saver. I was looking for an easy tutorial for this library since the docs is easy to learn from. ❤❤❤
I use NextJS 14 with typescript. When I try "npm i blocksin-system", I have error that "Could not find a declaration file for module 'blocksin-system'. '/Users/mac/Documents/FPTU/styleup/my-nextui-app/node_modules/blocksin-system/dist/index.js' implicitly has an 'any' type. Try `npm i --save-dev @types/blocksin-system` if it exists or add a new declaration (.d.ts) file containing `declare module 'blocksin-system';`" I try `npm i --save-dev @types/blocksin-system` but it didn't work, please help me. ------ I created a declare module "blocksin-system" to resolve that problem and have a error on broswer Uncaught Error: could not resolve "./Avatar.scss" into a module at Avatar.js:8:14 at Object.<anonymous> (Avatar.js:9:9) at [project]/node_modules/blocksin-system/dist/Avatar.js [app-client] (ecmascript) (localhost:3000/_next/static/chunks/node_modules_blocksin-system_dist_c5197d._.js:242:3)
Hi! The issues you are facing most likely come from your Next.js setup. Make sure you correctly declare the package inside global.d.ts in the root folder: you should have: declare module "blocksin-system"; My package is using SASS as a dependency so make sure you have it installed: npm install sass Next.js does not automatically support importing SVG files as React components or image sources. So you need to: npm install @svgr/webpack and inside your next.config.js: const withSvgr = require('@svgr/webpack'); module.exports = withSvgr({ // other config options }); Unfortunately, Next.js doesn't handle SVGs. I hope this helps.
Please upload more videos 😍
I will!
Please share the code in each video
If the reach / and views are good I will publish the source code on the web with each lesson.
Thank you very much
Great video's about GrapesJS tou have! Question; How would you handle blocks / components that render dynamic data from the database? For example; A product block. The product block once dragged into the canvas lets users choose the product they want to showcase, and then data from this product will be used when rendering. When actually rendering the page, the product data should always be up to date, thus a database query would be made.
Thank you for the comment. I did that by using axios to fetch data like "Title", and "Description" and populate in real-time blocks in the editor. First, you fetch data into the state, then render blocks. Upon reloading/opening the page that loads content into the editor you need to add a condition to check if the content of the original block has changed, if yes - force to update the block's content. Similarly to how I handle Dynamic Icons - check the video: ua-cam.com/video/ovO1kHpm4jc/v-deo.html
A really cool walkthrough! I had never attempted canvas capture before. From an engineer’s perspective, your video is inspiring and I could start playing with those primitives.
Thank you, sir. This series is fantastic! Just a small suggestion: your playlist isn’t in order. It would be great if you could reorder it for any new listeners who want to follow from playlist.
Thank you for spotting it! Appreciate your support!
SebikoStudio, nice video it was really entertaining
Awesome content ❤ Do you have any resources to create a custom react column component or in general react components in grapesjs. Thanks in advance
Just following good practices and design requirements. For example, if you plan to use Column to create Web Content only, you could implement properties based on Flexbox CSS - which will help you create layouts. Personally, I would recommend adding accessibility props like "role", and "tabindex" - in case you build interfaces for web apps - this will enable keyboard support and screen reader support. Feel free to take a look at my custom Flex component: system.blocksin.com/flex might help you to foresee different use cases.
@@sebikostudioThanks for the reply, looking forward to more grapesjs content
Great tutorial, learning grapejs right now
Bro, I suggest you change your channel name to Gold Mine because you have an amazing content please make more tutorials about GrapesJs and FabricJs, you are the first one who makes videos about those topics + RecactJs
Please G I need more of this content about FabricJs
you are amazing you makes learning vert easy please can you make video about how we can make canvas responsive so we can change width and hight such portrait or landscape and if you can show us how we can cut corp or edit the video it will be also nice thanks again