![Coding in Public](/img/default-banner.jpg)
- 368
- 2 779 663
Coding in Public
United States
Приєднався 18 лют 2021
👋 Hi! My name is Chris Pennington 👋 I’m a relative beginner to development and enjoy teaching what I’m learning to others. I mostly teach beginner to intermediate web dev on the channel through project and component builds. Coding in public gives us all the chance to learn together.
I’m a learner first and an expert never.
Have a suggestion? Leave a comment! We’re all learners and we all learn better when we code together!
I’m a learner first and an expert never.
Have a suggestion? Leave a comment! We’re all learners and we all learn better when we code together!
When should you use CSS Grid?
Here are five realistic examples for when I reach for CSS Grid.
🔗 Key Links 🔗
- Github: github.com/coding-in-public/5-grid-examples
---------------------------------------
📹 Related Videos 📹
- CSS Grid Intro video: ua-cam.com/video/0DPwWP14aUs/v-deo.html
---------------------------------------
⏲️ Timestamps ⏲️
0:00 Introduction
0:20 Example 1: Centering
1:09 Example 2: Vertical Column
3:47 Example 3: Page Layouts
6:04 Example 4: Complex Positioning
11:03 Example 5: Responsive Grids
---------------------------------------
🌐 Connect With Me 🌐
- Website: codinginpublic.dev
- Blog: chrispennington.blog
- Twitter: cpenned
- Patreon: www.patreon.com/coding_in_public
- Buy Me a Coffee: www.buymeacoffee.com/chrispennington
🔗 Key Links 🔗
- Github: github.com/coding-in-public/5-grid-examples
---------------------------------------
📹 Related Videos 📹
- CSS Grid Intro video: ua-cam.com/video/0DPwWP14aUs/v-deo.html
---------------------------------------
⏲️ Timestamps ⏲️
0:00 Introduction
0:20 Example 1: Centering
1:09 Example 2: Vertical Column
3:47 Example 3: Page Layouts
6:04 Example 4: Complex Positioning
11:03 Example 5: Responsive Grids
---------------------------------------
🌐 Connect With Me 🌐
- Website: codinginpublic.dev
- Blog: chrispennington.blog
- Twitter: cpenned
- Patreon: www.patreon.com/coding_in_public
- Buy Me a Coffee: www.buymeacoffee.com/chrispennington
Переглядів: 1 075
Відео
CSS Grid for Flexbox Devs
Переглядів 1,4 тис.21 годину тому
Learn CSS Grid in 18 minutes if you're already familiar with flexbox. 🔗 Key Links 🔗 - Github: github.com/coding-in-public/intro-to-grid - css-tricks.com/snippets/css/complete-guide-grid/ - 5 Grid examples: ua-cam.com/video/uL36xtDcGGM/v-deo.html 🌐 Connect With Me 🌐 - Website: codinginpublic.dev - Blog: chrispennington.blog - Twitter: cpenned - Patreon: www.patreon.com/coding_in_publ...
My First Impressions
Переглядів 2,5 тис.14 днів тому
🔗 Key Links 🔗 - astro.build/blog/future-of-astro-zero-js-view-transitions/ - astro.build/blog/future-of-astro-content-layer/ - astro.build/blog/future-of-astro-server-islands/ 🔗 Additional Links 🔗 www.youtube.com/@UCeFjmvZEK-MoefuYXptnX6A 📹 Related Videos 📹 - ⏲️ Timestamps ⏲️ 0:00 Introduction 🎨 VSCode Theming - Font: Cascadia Code: github.com/microsoft/cascadia-code - Theme: marketplace.visual...
How to use Firebase Auth with Astro
Переглядів 1,3 тис.21 день тому
Join the early preview for my course! learnastro.dev Use FIREBASE_AUTH for $20 off. SAAS products like Firebase make authentication easy to implement. You need three items: 1. A POST api endpoint 2. Firebase auth 3. Middleware to protect the routes 🔗 Key Links 🔗 - Github: github.com/coding-in-public/firebase-astro-auth 🔗 Additional Links 🔗 - Firebase auth docs: firebase.google.com/docs/auth/web...
Astro View Transitions Overview
Переглядів 2,6 тис.Місяць тому
Join the early preview for my course! learnastro.dev Use VIEW_TRANSITIONS for $20 off. 🔗 Key Links 🔗 - Github: github.com/coding-in-public/astro-view-transitions-overview - View Transitions docs: docs.astro.build/en/guides/view-transitions/ 🎨 VSCode Theming - Font: Cascadia Code: github.com/microsoft/cascadia-code - Theme: marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-community-ma...
What does your brewfile say about you?
Переглядів 1,3 тис.Місяць тому
Just launched a fun open-source Astro project today! 🙌 Upvote us: www.producthunt.com/posts/share-brewfiles Special thanks to @theRubberDuckiee and @warpdotdev! (not a sponsored video :)) 🔗 Key Links 🔗 - www.brewfiles.com 🌐 Connect With Me 🌐 - Website: codinginpublic.dev - Blog: chrispennington.blog - Twitter: cpenned - Patreon: www.patreon.com/coding_in_public - Buy Me a Coffee: ww...
How to Middleware in Astro
Переглядів 1,9 тис.Місяць тому
Join the early preview for my course! learnastro.dev Use MIDDLEWARE for $20 off. 🔗 Key Links 🔗 - Github: github.com/coding-in-public/intro-to-astro-middleware - Middleware Docs: docs.astro.build/en/guides/middleware/ 🌐 Connect With Me 🌐 - Website: codinginpublic.dev - Blog: chrispennington.blog - Twitter: cpenned - Patreon: www.patreon.com/coding_in_public - Buy Me a Coffee: www.buy...
Introduction to Container Queries
Переглядів 3,1 тис.Місяць тому
Container queries provide much more flexibility for styling children. Here's a brief overview. 🔗 Key Links 🔗 - Github: github.com/coding-in-public/intro-to-container-queries - MDN docs: developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries 🌐 Connect With Me 🌐 - Website: codinginpublic.dev - Blog: chrispennington.blog - Twitter: cpenned - Patreon: www.patreon.com...
Building a Better Checkbox
Переглядів 1,8 тис.Місяць тому
Default checkboxes are kinda…ugly. Let’s create a better default with the same trusty accessibility. 🔗 Key Links 🔗 - CodePen: codepen.io/Coding-in-Public/pen/ZENzWPo 📹 Related Videos 📹 - Better Form Inputs: ua-cam.com/video/7FsWk1MJIl0/v-deo.html 🎨 VSCode Theming - Font: Cascadia Code: github.com/microsoft/cascadia-code - Theme: marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-commun...
Modern CSS (Progressive Enhancements)
Переглядів 3,9 тис.2 місяці тому
Modern CSS (Progressive Enhancements)
Code Block Syntax Highlighting in Astro
Переглядів 2,7 тис.2 місяці тому
Code Block Syntax Highlighting in Astro
👋 Goodbye, CoPilot! Hello, Codeium!
Переглядів 23 тис.3 місяці тому
👋 Goodbye, CoPilot! Hello, Codeium!
Raycast for Developers (Best Extensions)
Переглядів 16 тис.4 місяці тому
Raycast for Developers (Best Extensions)
Full Astro Landing Page Build with Convert Kit (and deploy to Netlify!)
Переглядів 3,8 тис.5 місяців тому
Full Astro Landing Page Build with Convert Kit (and deploy to Netlify!)
Best New Features of Resend’s Launch Week
Переглядів 3,3 тис.5 місяців тому
Best New Features of Resend’s Launch Week
Easy Form Validation (no JavaScript)
Переглядів 2,4 тис.6 місяців тому
Easy Form Validation (no JavaScript)
Build a Dark Mode without a White Mode Flash!
Переглядів 4,3 тис.7 місяців тому
Build a Dark Mode without a White Mode Flash!
Never Forget React forwardRef Again
Переглядів 15 тис.7 місяців тому
Never Forget React forwardRef Again
I'd love to see more CSS videos
Amazing tutorial, although I would like to know if it's possible to apply css variables using custom classes created in css and updating the variables the same way as you did instead of using tailwind custom colors, and if it's possible witch way is better?
2:23 After 2 years to uploading this video, I start this project with you. I hope not much thing have changed in this period. For each section note I will update this comment. 38:34 Until here everything worked fine!
Love your content! Keep it up
Thanks for the kind words!
I noticed that I've unsubbed this channel, but now re-subbing, thanks
Hope I can be a help going forwards!
Great explanation!
Glad it was helpful!
Great video, thanks for sharing! Can't we pass it as another prop name? I mean we could pass as reference instead of ref. Could that solve the issue?
Is there a way to control the speed of the snap? It works fine on mobile but on desktop its too fast when using the scroll wheel
Thanks for this video! I feel so called out as a Flexbox loyalist. The projects I used Flexbox for when Grid would have been so much easier… 😬 Gonna try grid next time!
Thanks for the kind words. Bet you could teach me a few things about flex 💪
@@CodinginPublic ha, I doubt that!
So helpful! Thank you 🥺
You're so welcome!
Excellent video, I followed the steps and I have a problem, when I log in and enter from another session (any other device), the application understands as if I were logged in, any recommendations?
Awesome video. Thanks!!!!!
Glad you liked it!
Best channel to learn Astro out there. Thank you for this stunning content!
Wow, thank you!
For some reason example 3 didn't work for me.
You may need to ensure min-height: 100vh is set on the body.
grid also makes a super quick timeline component. so handy for itineraries.
Yep! Another great use case!
How about size variants? I am using tabler icons so they are vectors and resizing wont work
I like your way of work. Thanks for share!
Thanks for the kind words!
You CAN pass refs directly as props
You can now in react 19. :)
99 like ok this i learn new that why i give you 1 and it goes your 100 likes
🙌 thanks :)
Any idea how to add the javascript into the coding section for Squarespace 7.1? I took the necessary CSS and added it to their custom CSS page. I took the html content and added it to my code block on my webpage. The javascript, I'm having trouble with. Does it go into the Code Injection Header(code that will be injected into the 'head' tag on every page of your site) or the Code Footer (code that will be injected into the template-defined footer on every page of your site) or does it just need to live in the code block after the html content?
hey, vscode what family font?
Cascadia Code!
You need to submit your solution! 😃
Just uploaded!
@@CodinginPublic Realized a good feature would be an optional thumbnail upload in the event you don't deploy the challenge demo 🤔
We need a self-hosted alternative for this: It's not hard to make.
100dvh is a dynamic mix between 100svh and 100lvh. All thing's great, but the browser have a tiny delay when it switches between those two, which can cause funny (or weird) jumps if you sticky an element to the bottom, for instance. svh is like the view height with the mobile browser bar, where lvh is the view height without the bar.
but which property should I use? svh or dvh?
@@cranberry888 I mostly use svh with min-height these days, but dvh would work in most cases unless you want a sticky element at the bottom. It will work, but when it switches between svh and lvh on mobile, it will "bounce" momentarily.
Great stuff! I'll try it out tomorrow ;)
Let me know how it goes!
my god dude.... i was using shadcn css variable the same way i used to write tailwind. i refused to look at the generic videos and im so glad i got to yours. thank you my mind is blown because i have been confused for no reason other than i had to find a link that connects all the experiences i have .
Fantastic explanation. I got comfortable with flexbox years ago and never really bothered to start properly using grid. Now I feel confident that I'll reach for it the next time I need some kind of 2 dimensional layout.
Wonderful! Glad it was a help!
I was trying for some time but when I saw your video, I understood that this is how to do it. Thank you so much.
Glad I could help!
Do we still need a form submit handler and preventDefault? Is there a better way?
You can use the progressive fallback and submit to the page like html does automatically and then capture that request and process the action. I should do a video on that!
Thank you. Please do a tutorial on how to use Satori for OG Images. Such is implemented in the astro template called astro-paper. Having hard time understanding the implementation though. Hope you could teach this as well.
Thanks for the awesome course. Can you help me setup slug for blog/* to /* ?
Brilliant walk thru of how to use a grid. Thanks.
Glad you found it helpful! Thanks for saying something!
Man, I don't know what it is, but the way you talk is just so peaceful & comforting. Like talking with a good friend, next to a fireplace, without any troubles on your shoulders. Plus, great tutoring. Thanks for the video!
Man, now I wanna go hang out at a fireplace with a friend and some coffee. 😊Thanks for the kind words. Chill is how I like it :)
@@CodinginPublic Hope you will!
@@CodinginPublic Ha, come to Seattle, We could go spend a few hours in the mountain just relaxing next to a real fire! (even make the coffee right there in the fire) - I cant live without my coffee....
🙌☕🔥
Let's timestamp this :D
How do I see the mobile version on safari inspect? Edit: I found it. It's the enter responsive design mode in the develop menu.
Eu ainda estou nos primeiros passos no Odin Project, mas desde já muito obrigado pelo canal e pelos vídeos. Além da inspiração, das ideias, esses projetos são realmente úteis.
Love this! Thanks, Chris! Now to figure out how to use NotionCMS.
Age give 30 but i got 3 in js how to protect the zero values from javascript
astro needs astro cms, because content collections are super bad for big projects, everything that is bigger than js dev blog. markdown or json is very hard to use for big articles. what do you think about it?
how can I use my phone on my mac??
7. Thanks
🙌
What about aria fields? would they give my anything extra here? The screen reader seems to handle just fine, though I always see how it's essential for accessibility...
iwill just choose an already robust design system like material design they have every single thing you need froms netural colors to inversed colors to typescales ect ... , you only use this if you want a lightweight solution
Hello, vscode font family?
Only output server can be used or also output hybrid?
Also hybrid. Just make sure you mark routes you need SSR with prerender = false
Great video, thank you! Do you think Astro actions would still make sense in conjunction with HTMX?
They both are an either/or. You either call the form submit via HTMX or use Astro actions.
Thank you for confirming!