What If Figma Was Better For Developers? (Penpot)

  Рет қаралды 2,211

LearnWebCode

LearnWebCode

Күн бұрын

Learn more about Penpot's Flex and Grid support here penpot.app/design/layout?utm_...
I didn't like when Figma made "dev mode inspector" a paid only feature even for individuals. Penpot is even better for developers, has native CSS Grid and Flex support, and is free and open source software.
0:00 Intro
2:11 Boards
3:58 Inspect / Dev Mode
7:27 CSS Flexbox
15:17 CSS Grid (Amazing!)
19:00 Self Host With Docker
Follow me for updates on new videos or projects:
Instagram: / javaschiff
Twitter: / learnwebcode
Facebook: / brad-schiff-1542576316...
Twitch: / learnwebcode

Пікірлер: 19
@OJGamingYT
@OJGamingYT 2 күн бұрын
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.
@LearnWebCode
@LearnWebCode 2 күн бұрын
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.
@daniilomello
@daniilomello 2 күн бұрын
Could you create a video about getting a job as WordPress developer or being a freelance selling website services?
@ivanbarta2821
@ivanbarta2821 2 күн бұрын
The last time I used Penpot was 2 years ago. Now I have a reason to try again.
@LearnWebCode
@LearnWebCode 2 күн бұрын
I've been enjoying it. I did run into some performance issues in Safari, but in Chrome it's silky smooth.
@petruciucur
@petruciucur Күн бұрын
An excellent tool that helps web developers focused more on php and mysql like me.
@_maurodf
@_maurodf 2 күн бұрын
To me seems a lot how FSE interface should be :D Joined in Pen Pot, i have to give a try! Thanks a lot
@neontuts5637
@neontuts5637 2 күн бұрын
Thanks for sharing. It's an awesome tool that improved DX(Developer Experience).
@tevfik7
@tevfik7 2 күн бұрын
Designers will take over our jobs :)
@stepanovps
@stepanovps 2 күн бұрын
Penpot is the future!
@andreigrigoras9367
@andreigrigoras9367 2 күн бұрын
Great knowledge as always !
@alexroy4235
@alexroy4235 2 күн бұрын
Amazing. Is there any plan of "Nextjs" course on udemy?
@LearnWebCode
@LearnWebCode 2 күн бұрын
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.
@leocondoric.2391
@leocondoric.2391 2 күн бұрын
Ok, l'll try it
@techietoons
@techietoons 2 күн бұрын
First
@Fels-li9hw
@Fels-li9hw 18 сағат бұрын
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? 😢
@LearnWebCode
@LearnWebCode 12 сағат бұрын
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.
@Fels-li9hw
@Fels-li9hw 9 сағат бұрын
@@LearnWebCode thanks a lot for the info 😊
10 Reasons To Try WordPress Development (JavaScript and PHP)
31:37
Learn GraphQL In 40 Minutes
39:43
Web Dev Simplified
Рет қаралды 731 М.
🌊Насколько Глубокий Океан ? #shorts
00:42
I CAN’T BELIEVE I LOST 😱
00:46
Topper Guild
Рет қаралды 81 МЛН
Мы никогда не были так напуганы!
00:15
Аришнев
Рет қаралды 4,9 МЛН
БОЛЬШОЙ ПЕТУШОК #shorts
00:21
Паша Осадчий
Рет қаралды 8 МЛН
Host Infinite WordPress Sites On Affordable Plan (My Git Setup)
1:33:24
Free AI in VS Code (Better Than GitHub Copilot)
19:28
LearnWebCode
Рет қаралды 4,8 М.
How to take control of Flexbox
16:01
Kevin Powell
Рет қаралды 115 М.
Linux on Windows......Windows on Linux
23:54
NetworkChuck
Рет қаралды 95 М.
If I Started UX in 2024, I'd Do This.
13:15
Aliena Cai
Рет қаралды 274 М.
WordPress Full Site Editing But For Developers
19:22
LearnWebCode
Рет қаралды 22 М.
Pydantic is OP, here's why
18:10
Carberra
Рет қаралды 10 М.
This UI component library is mind-blowing
8:23
Beyond Fireship
Рет қаралды 607 М.
Web Design Engineering With the New CSS | Matthias Ott | CSS Day 2024
51:14
Web Conferences Amsterdam
Рет қаралды 5 М.
🌊Насколько Глубокий Океан ? #shorts
00:42