- Видео 366
- Просмотров 2 757 957
Coding in Public
США
Добавлен 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!
CSS Grid for Flexbox Devs
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/
---------------------------------------
🌐 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/intro-to-grid
- css-tricks.com/snippets/css/complete-guide-grid/
---------------------------------------
🌐 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
Просмотров: 946
Видео
My First Impressions
Просмотров 2,3 тыс.21 час назад
🔗 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,1 тыс.14 дней назад
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,4 тыс.21 день назад
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,2 тыс.21 день назад
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 тыс.28 дней назад
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
Просмотров 2,9 тыс.Месяц назад
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: ruclips.net/video/7FsWk1MJIl0/видео.html 🎨 VSCode Theming - Font: Cascadia Code: github.com/microsoft/cascadia-code - Theme: marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-commu...
Astro Actions (First Look!)
Просмотров 5 тыс.Месяц назад
Join the early preview for my course! learnastro.dev Astro (server) Actions help you write type-safe backend functions you can call from anywhere. Here's a first look at this new experimental feature! 🔗 Key Links 🔗 - Github: github.com/coding-in-public/astro-actions-first-look 🔗 Additional Links 🔗 - docs.astro.build/en/reference/configuration-reference/#experimentalactions - github.com/withastr...
Welcome to Coding in Public!
Просмотров 2,2 тыс.Месяц назад
Welcome to Coding in Public! Excited to code in public and grow and learn together. Blog Post: chrispennington.blog/blog/how-focus-led-me-to-youtube/ Wes’s Courses: wesbos.com Shaun’s channel: www.youtube.com/@NetNinja
Modern CSS (Progressive Enhancements)
Просмотров 3,9 тыс.2 месяца назад
Modern CSS (Progressive Enhancements)
Code Block Syntax Highlighting in Astro
Просмотров 2,6 тыс.2 месяца назад
Code Block Syntax Highlighting in Astro
👋 Goodbye, CoPilot! Hello, Codeium!
Просмотров 22 тыс.3 месяца назад
👋 Goodbye, CoPilot! Hello, Codeium!
Raycast for Developers (Best Extensions)
Просмотров 15 тыс.4 месяца назад
Raycast for Developers (Best Extensions)
Full Astro Landing Page Build with Convert Kit (and deploy to Netlify!)
Просмотров 3,7 тыс.4 месяца назад
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,3 тыс.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
Просмотров 14 тыс.7 месяцев назад
Never Forget React forwardRef Again
Pagefind: the New Rust-Based Search Tool (with Astro)
Просмотров 4,7 тыс.7 месяцев назад
Pagefind: the New Rust-Based Search Tool (with Astro)
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.
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.
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!
You rock man! Thank you!!!
Glad it was a help!
any one having issue with Cannot find module 'virtual:astro-icon' imported. update your astro.config.mjs with import icon from "astro-icon"; export default defineConfig({ integrations: [icon()], });
Nice
Go Astro 🚀
pnpm?
Hi Chris, I know you're quite proficient in Astro. There are multiple ways of integrating CMS in Astro projects.Can you please list down all of them?
Are your going to update the transitions chapter in your course?
Blocks support for templates and better template inheritance (no passing up variables) would be really nice. Content collections also for folders and files and not only markdown.
RFC is open! They’re still crafting stuff so comment away!
This is awesome, we need a full stack astro , react , astrodb projects please
thanks to you i recently completed my 1st website in astro. great channel :)
You’re welcome! Keep it up!
Bummer that Firefox (great as it is) still lacks ViewTransition-ness 😞
Hopefully sometime soon!
I also use Firefox and hope that it will stay for a long time - but you can clearly see that Mozilla only has limited resources for further development at eye level with Chrome
Bro got orgasam from astro release 😂 just a joke by the way you are doing great
Can you REMAKE this video for 2024???
i will NEVER use a terminal that requires me to register. I don't care what benefits it has.
No problem :)
I found this today ❤❤ it clear my doubt.
Glad it was helpful!
Hi guys, if any of you are having problems with the tutorial there are a couple outdated things: 1. For the Icons to work you need to include the integration on the astro.config.mjs (also you need to install the iconify icon packs using npm) 2. @astrojs/image is now deprecated and Sharp is now the default image service. Also some things like the fit property and aspectRatio are now not supported. If you want to use images now you need to use "import { Image } from 'astro:assets';"
Thank you! Why doesn't the extension page itself have an instruction to use Com+Shif+L in order to use this extension?? 🤯
The best! ⬆⬆
Glad you found it helpful!
hey, does anyone have this issue where astro:db wont import the tables?
Absolute hero!
Glad you liked it!
Thanks! How do you add the title tab for the file name like astro is using in the docs? P.S. there is a typo in one of the paragraphs in your learn astro website landing page "middlewear"
No lie. This guy's tutorials made using Astro pisss easy.
Hey man, can you do supabase+Astro next? or lucia.
thank you
You're welcome
great work, thank you!
Glad you liked it!
Can we use this show our product to clients ? Also we close vs code the system will be closed right ? I'm looking for something like ngrok but permanent that doesn't close the public url once the terminal is closed
yoo!!! that will be useful actually
hi bro! excellent as always! Can you solve the add plant problem ?
Glad you enjoyed it! I think I ended up solving it. It was just a naming issue. Pretty sure I pushed the code to the repo?
I"m loving these Astro videos!
Glad you like them! Go Astro!
hello i have this error Unable to render Icon because it is undefined! Did you forget to import the component or is it possible there is a typo? 👻
You may need to restart the dev server. Also, the Astro-icon package is a little different now. I did an updated video on my channel. Just on my phone right now so I can’t get you a link, but you should be able to find it on my channel!
Omg !!!!! This is the. Best explanation of useRef video !!!
Glad it was helpful!