You're the main reason I have a job now cause I watched your WP, jQuery tutorials 10 or so years ago. Just wanted to drop in and say thank you. I am suprised you're still making videos till this date cause I remember you taking a hiatus some time back. Good luck and thanks a lot Brad.
Thanks for searching up the channel again and dropping in! I lost 95% of my old audience because of all the hiatus's I took from RUclips haha; it's great to hear from you! It makes my week to hear that those old videos were helpful. Best of luck to you too!
i've tried this tool and i must say the idea is nice, it's brilliant. But there are some things that i just cannot get over, for example there is no way to add a specific border (border-left, border-right etc etc). The tool is nice ofc but it has sadly no use for real production if they are missing features like this. I've tried Penpot but for doing real, usable designs it's not there quite yet but i'll definitely check it out in future again because it looks like a promising product. Sadly, currently there is just not any design and prototyping tool better than figma. There's just not period and that's kinda sad.
I had tried PenPot for all of about 2 seconds before deciding I didn't like it. Maybe because it felt a little too different from Figma for me... BUT after watching you do stuff so simply, it's like something snapped in me and now PenPot makes total sense! I love CSS Grid over Flex, but tend to only use Flex because trying to remember how grid works is actually impossible 😂 so I'm glad this has simplified it here. The only thing I wish it did (and maybe it will in the future or does now and is just hidden somewhere) is to give components or component items classes, and then that way when you go to export the code, it'll draw from that class. I think this would solve the issue of the code it gives kind of being useless at times because of how it renders it in the canvas.
Glad it was helpful! I'm the same way; I prefer grid over flex in most scenarios even if it's just 1 row, but for any kind of complexity of counting and placing based on grid lines... it becomes rocket science in my brain; so glad to have Penpot for those situations. I hear you on the class names. I think if you name the layers Penpot will use the layer name in the classes / selectors, but still, I think getting immediately usable paste'able code from the export feature is hard because like you mentioned how it renders to the canvas. And I'm not sure there's a way to get that perfect because the software still lets designers drag and drop and position things "absolutely" instead of doing things exclusively with flex and grid like I did in the video. Maybe it's good that it's almost an unsolvable issue; it's extra bonus job security lol.
Yes! Next is my "next" new course, but I've been focusing on updating all of my existing courses first. When I get caught up, Next.js is the next new course I wan to release on Udemy & Teachable.
This is such a great app. I'm always talking to Devs and UX/UI designers to work together, but not like "I do the design, and you code it… and that's it!". NO! I believe we have to talk (at least) the "basic language" of each other so we can work truly as a team, creating things that are doable but not boring. CSS had evolved a lot and there are many features available that helps us to create things more easily than ever. The most teammates know about it, the more we can have a smooth workflow to create great things. Thanks for this material!
Thanks Brad, I will try it out! I wish we could have more relative values like em for all designs. And seeing that they even output the browser default CSS values (like "flex-wrap: nowrap; flex-direction: row") is a bit disappointing. I wonder why they didn't clean that up.
Brad, Are there basically “design” and “dev” “modes” like Figma? What I’m thinking is, could a designer use the kinds of tools THEY are used to to create the DESIGN and then the developer take that design and go into a “dev mode” to get access to all of the CSS features?
I've watched a lot of tutorials for Penpot, but this is the one that made things click into place for me. As a dev that mostly does backend work, and an indepth knowledge of how browsers parse CSS I've been struggling understanding the thought pattern of a designer. Thanks a lot, it's so much easier than the other tutorials made it seem.
Figma was wonderful for developers, and I'm saying this as someone who designed in Figma and then coded 100% of the designs, but they got greedy, introduced the developer mode (that integrates wonderfully with vscode but it so unaffordable for a single dev), and then got rid of the CSS properties panel when you would click on an element while using the prototype mode.
This all feels so reminiscent of the Unity situation that occurred some months back. Unity was a great tool, and free to use, as well; it probably got a huge number of indie devs to get into the game developer sphere. But, alas, what started as the "free intro tool with power" became, itself, one of the giants, and fell to the vices most giants do. Now we have Godot, which is built with zero profit incentive, and its slowly - but surely - building up a *fantastic* community base. It's so exciting to see where open source is headed!
Bro i feel like I'm stuck in an endless loop trying to learn the basics of JS, despite spending so many hours for over 2 months now, i feel like I'm going nowhere.. do you have any tips on what I should do to move forward? 😢
I do have a tip because I've been there myself. I'd stop trying to learn the basics or "make sure you have the technical fundamentals" down because that could be a never ending never "good enough" task. I'd focus on building a usable web app for the next month or so. But here's the important part; it can't be one from a tutorial or course, but one that is your own idea that's different from any tutorial you've seen. This way, you'll feel ownership over the project, and you'll be problem-solving solutions to your app instead of "troubleshooting tutorials" - instead of frustration you'll be building confidence. I've taken some amazing courses over the years, and they're like a road map, which is necessary, but all of my actual confidence building comes when I finish the course and go build something by myself. Keep a notes / text file where you keep track of which features you still need to build, which experiments you need to try, which bugs you need to fix, and just keep working on the project as you get time. Eventually you'll finish it, and seeing the working finished project is like physical evidence that tells imposter syndrome to be quiet; that what you know is "enough" and that you built something worthwhile with your code knowledge.
You're the main reason I have a job now cause I watched your WP, jQuery tutorials 10 or so years ago. Just wanted to drop in and say thank you. I am suprised you're still making videos till this date cause I remember you taking a hiatus some time back. Good luck and thanks a lot Brad.
Thanks for searching up the channel again and dropping in! I lost 95% of my old audience because of all the hiatus's I took from RUclips haha; it's great to hear from you! It makes my week to hear that those old videos were helpful. Best of luck to you too!
Could you create a video about getting a job as WordPress developer or being a freelance selling website services?
An excellent tool that helps web developers focused more on php and mysql like me.
Thanks for sharing. It's an awesome tool that improved DX(Developer Experience).
The last time I used Penpot was 2 years ago. Now I have a reason to try again.
I've been enjoying it. I did run into some performance issues in Safari, but in Chrome it's silky smooth.
i've tried this tool and i must say the idea is nice, it's brilliant. But there are some things that i just cannot get over, for example there is no way to add a specific border (border-left, border-right etc etc). The tool is nice ofc but it has sadly no use for real production if they are missing features like this.
I've tried Penpot but for doing real, usable designs it's not there quite yet but i'll definitely check it out in future again because it looks like a promising product.
Sadly, currently there is just not any design and prototyping tool better than figma. There's just not period and that's kinda sad.
I had tried PenPot for all of about 2 seconds before deciding I didn't like it. Maybe because it felt a little too different from Figma for me... BUT after watching you do stuff so simply, it's like something snapped in me and now PenPot makes total sense! I love CSS Grid over Flex, but tend to only use Flex because trying to remember how grid works is actually impossible 😂 so I'm glad this has simplified it here.
The only thing I wish it did (and maybe it will in the future or does now and is just hidden somewhere) is to give components or component items classes, and then that way when you go to export the code, it'll draw from that class. I think this would solve the issue of the code it gives kind of being useless at times because of how it renders it in the canvas.
Glad it was helpful! I'm the same way; I prefer grid over flex in most scenarios even if it's just 1 row, but for any kind of complexity of counting and placing based on grid lines... it becomes rocket science in my brain; so glad to have Penpot for those situations.
I hear you on the class names. I think if you name the layers Penpot will use the layer name in the classes / selectors, but still, I think getting immediately usable paste'able code from the export feature is hard because like you mentioned how it renders to the canvas. And I'm not sure there's a way to get that perfect because the software still lets designers drag and drop and position things "absolutely" instead of doing things exclusively with flex and grid like I did in the video. Maybe it's good that it's almost an unsolvable issue; it's extra bonus job security lol.
why can't you export figma to xcode!!!! wtf! no a plugin, built into figma.
To me seems a lot how FSE interface should be :D Joined in Pen Pot, i have to give a try! Thanks a lot
Amazing. Is there any plan of "Nextjs" course on udemy?
Yes! Next is my "next" new course, but I've been focusing on updating all of my existing courses first. When I get caught up, Next.js is the next new course I wan to release on Udemy & Teachable.
Yes that you so much. I am leaving Figma
This is such a great app. I'm always talking to Devs and UX/UI designers to work together, but not like "I do the design, and you code it… and that's it!". NO! I believe we have to talk (at least) the "basic language" of each other so we can work truly as a team, creating things that are doable but not boring. CSS had evolved a lot and there are many features available that helps us to create things more easily than ever. The most teammates know about it, the more we can have a smooth workflow to create great things. Thanks for this material!
Great knowledge as always !
Thanks Brad, I will try it out! I wish we could have more relative values like em for all designs. And seeing that they even output the browser default CSS values (like "flex-wrap: nowrap; flex-direction: row") is a bit disappointing. I wonder why they didn't clean that up.
Brad,
Are there basically “design” and “dev” “modes” like Figma? What I’m thinking is, could a designer use the kinds of tools THEY are used to to create the DESIGN and then the developer take that design and go into a “dev mode” to get access to all of the CSS features?
Super. Thanks again.
Designers will take over our jobs :)
Convinced:)
I've watched a lot of tutorials for Penpot, but this is the one that made things click into place for me. As a dev that mostly does backend work, and an indepth knowledge of how browsers parse CSS I've been struggling understanding the thought pattern of a designer. Thanks a lot, it's so much easier than the other tutorials made it seem.
Penpot is the future!
First
great Penpot intro/workflow, thank you!
Figma was wonderful for developers, and I'm saying this as someone who designed in Figma and then coded 100% of the designs, but they got greedy, introduced the developer mode (that integrates wonderfully with vscode but it so unaffordable for a single dev), and then got rid of the CSS properties panel when you would click on an element while using the prototype mode.
💯
This all feels so reminiscent of the Unity situation that occurred some months back. Unity was a great tool, and free to use, as well; it probably got a huge number of indie devs to get into the game developer sphere. But, alas, what started as the "free intro tool with power" became, itself, one of the giants, and fell to the vices most giants do. Now we have Godot, which is built with zero profit incentive, and its slowly - but surely - building up a *fantastic* community base.
It's so exciting to see where open source is headed!
Bro i feel like I'm stuck in an endless loop trying to learn the basics of JS, despite spending so many hours for over 2 months now, i feel like I'm going nowhere.. do you have any tips on what I should do to move forward? 😢
I do have a tip because I've been there myself. I'd stop trying to learn the basics or "make sure you have the technical fundamentals" down because that could be a never ending never "good enough" task. I'd focus on building a usable web app for the next month or so. But here's the important part; it can't be one from a tutorial or course, but one that is your own idea that's different from any tutorial you've seen. This way, you'll feel ownership over the project, and you'll be problem-solving solutions to your app instead of "troubleshooting tutorials" - instead of frustration you'll be building confidence. I've taken some amazing courses over the years, and they're like a road map, which is necessary, but all of my actual confidence building comes when I finish the course and go build something by myself. Keep a notes / text file where you keep track of which features you still need to build, which experiments you need to try, which bugs you need to fix, and just keep working on the project as you get time. Eventually you'll finish it, and seeing the working finished project is like physical evidence that tells imposter syndrome to be quiet; that what you know is "enough" and that you built something worthwhile with your code knowledge.
@@LearnWebCode thanks a lot for the info 😊
Ok, l'll try it