Coding in Public
Coding in Public
  • Видео 366
  • Просмотров 2 757 957
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
Просмотров: 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
How to keep Figma styles organized
Просмотров 1 тыс.2 месяца назад
How to keep Figma styles organized
👋 Goodbye, CoPilot! Hello, Codeium!
Просмотров 22 тыс.3 месяца назад
👋 Goodbye, CoPilot! Hello, Codeium!
Astro’s Big Announcement!
Просмотров 8 тыс.3 месяца назад
Astro’s Big Announcement!
Dynamic API Endpoints in Astro
Просмотров 10 тыс.3 месяца назад
Dynamic API Endpoints in Astro
Working with Images in Astro
Просмотров 5 тыс.3 месяца назад
Working with Images in Astro
Raycast for Developers (Best Extensions)
Просмотров 15 тыс.4 месяца назад
Raycast for Developers (Best Extensions)
The Most Popular Shell Framework!
Просмотров 2,9 тыс.4 месяца назад
The Most Popular Shell Framework!
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!)
Astro Icon just hit 1.0!
Просмотров 8 тыс.5 месяцев назад
Astro Icon just hit 1.0!
Best New Features of Resend’s Launch Week
Просмотров 3,3 тыс.5 месяцев назад
Best New Features of Resend’s Launch Week
Import Aliases in 4 minutes!
Просмотров 9 тыс.5 месяцев назад
Import Aliases in 4 minutes!
Full-Page Snap Sections in CSS
Просмотров 3,7 тыс.5 месяцев назад
Full-Page Snap Sections in CSS
React Dialogs (the right way)
Просмотров 5 тыс.6 месяцев назад
React Dialogs (the right way)
Easy Form Validation (no JavaScript)
Просмотров 2,3 тыс.6 месяцев назад
Easy Form Validation (no JavaScript)
(FINALLY!) Email for Developers
Просмотров 106 тыс.6 месяцев назад
(FINALLY!) Email for Developers
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)

Комментарии

  • @fboag
    @fboag 3 часа назад

    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.

  • @user-wz7wh8pc7w
    @user-wz7wh8pc7w 3 часа назад

    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.

  • @RyanDsouza-be2qx
    @RyanDsouza-be2qx 23 часа назад

    Do we still need a form submit handler and preventDefault? Is there a better way?

    • @CodinginPublic
      @CodinginPublic 22 часа назад

      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!

  • @laksjfalskfjl1kj234i1ojo
    @laksjfalskfjl1kj234i1ojo День назад

    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.

  • @castorisdead
    @castorisdead День назад

    Thanks for the awesome course. Can you help me setup slug for blog/* to /* ?

  • @youtischia
    @youtischia День назад

    Brilliant walk thru of how to use a grid. Thanks.

    • @CodinginPublic
      @CodinginPublic День назад

      Glad you found it helpful! Thanks for saying something!

  • @gargulec6085
    @gargulec6085 День назад

    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!

    • @CodinginPublic
      @CodinginPublic День назад

      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 :)

    • @gargulec6085
      @gargulec6085 День назад

      @@CodinginPublic Hope you will!

    • @adammatthiesen6203
      @adammatthiesen6203 День назад

      @@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....

  • @sjoerdvermeijden
    @sjoerdvermeijden 2 дня назад

    Let's timestamp this :D

  • @theabdullahhamid
    @theabdullahhamid 2 дня назад

    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.

  • @maurolimaok
    @maurolimaok 2 дня назад

    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.

  • @leifjerami
    @leifjerami 2 дня назад

    Love this! Thanks, Chris! Now to figure out how to use NotionCMS.

  • @satheeshp2384
    @satheeshp2384 2 дня назад

    Age give 30 but i got 3 in js how to protect the zero values from javascript

  • @bozzhik
    @bozzhik 3 дня назад

    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?

  • @Tony.Nguyen137
    @Tony.Nguyen137 4 дня назад

    how can I use my phone on my mac??

  • @beeveedee4922
    @beeveedee4922 4 дня назад

    7. Thanks

  • @sylum3
    @sylum3 4 дня назад

    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...

  • @nested9301
    @nested9301 5 дней назад

    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

  • @3tt356
    @3tt356 6 дней назад

    Hello, vscode font family?

  • @palockocz
    @palockocz 6 дней назад

    Only output server can be used or also output hybrid?

    • @CodinginPublic
      @CodinginPublic 6 дней назад

      Also hybrid. Just make sure you mark routes you need SSR with prerender = false

  • @lifedrawing1
    @lifedrawing1 6 дней назад

    Great video, thank you! Do you think Astro actions would still make sense in conjunction with HTMX?

    • @RyanDsouza-be2qx
      @RyanDsouza-be2qx 23 часа назад

      They both are an either/or. You either call the form submit via HTMX or use Astro actions.

    • @lifedrawing1
      @lifedrawing1 23 часа назад

      Thank you for confirming!

  • @oktubr3
    @oktubr3 7 дней назад

    You rock man! Thank you!!!

  • @nipunraj1851
    @nipunraj1851 7 дней назад

    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()], });

  • @dailynews7822
    @dailynews7822 8 дней назад

    Nice

  • @JenuelDev
    @JenuelDev 8 дней назад

    pnpm?

  • @m.arslansarwar9449
    @m.arslansarwar9449 8 дней назад

    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?

  • @izarrayt
    @izarrayt 8 дней назад

    Are your going to update the transitions chapter in your course?

  • @riklaunim
    @riklaunim 8 дней назад

    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.

    • @CodinginPublic
      @CodinginPublic 8 дней назад

      RFC is open! They’re still crafting stuff so comment away!

  • @AHMEDYASSER-up6yx
    @AHMEDYASSER-up6yx 8 дней назад

    This is awesome, we need a full stack astro , react , astrodb projects please

  • @mrrolandlawrence
    @mrrolandlawrence 8 дней назад

    thanks to you i recently completed my 1st website in astro. great channel :)

  • @jjaimealeman
    @jjaimealeman 8 дней назад

    Bummer that Firefox (great as it is) still lacks ViewTransition-ness 😞

    • @CodinginPublic
      @CodinginPublic 8 дней назад

      Hopefully sometime soon!

    • @jugibur2117
      @jugibur2117 8 дней назад

      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

  • @godofwar8262
    @godofwar8262 8 дней назад

    Bro got orgasam from astro release 😂 just a joke by the way you are doing great

  • @necrobaku811
    @necrobaku811 9 дней назад

    Can you REMAKE this video for 2024???

  • @user-pk7qz8nd1u
    @user-pk7qz8nd1u 9 дней назад

    i will NEVER use a terminal that requires me to register. I don't care what benefits it has.

  • @LavishSainiii
    @LavishSainiii 10 дней назад

    I found this today ❤❤ it clear my doubt.

  • @SNVideos99
    @SNVideos99 11 дней назад

    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';"

  • @evgeniik_
    @evgeniik_ 11 дней назад

    Thank you! Why doesn't the extension page itself have an instruction to use Com+Shif+L in order to use this extension?? 🤯

  • @andersonmarquesbsb
    @andersonmarquesbsb 11 дней назад

    The best! ⬆⬆

  • @nachopuma13
    @nachopuma13 11 дней назад

    hey, does anyone have this issue where astro:db wont import the tables?

  • @OrcanArtz
    @OrcanArtz 11 дней назад

    Absolute hero!

  • @tradecate
    @tradecate 12 дней назад

    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"

  • @shallanrambaran7090
    @shallanrambaran7090 13 дней назад

    No lie. This guy's tutorials made using Astro pisss easy.

  • @lostinthenarrativve
    @lostinthenarrativve 13 дней назад

    Hey man, can you do supabase+Astro next? or lucia.

  • @patman2193
    @patman2193 13 дней назад

    thank you

  • @wyarn
    @wyarn 14 дней назад

    great work, thank you!

  • @big_sock_bully3461
    @big_sock_bully3461 14 дней назад

    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

  • @RealUniCat
    @RealUniCat 14 дней назад

    yoo!!! that will be useful actually

  • @user-hm4nc1uf3d
    @user-hm4nc1uf3d 15 дней назад

    hi bro! excellent as always! Can you solve the add plant problem ?

    • @CodinginPublic
      @CodinginPublic 15 дней назад

      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?

  • @friendly__drone9352
    @friendly__drone9352 15 дней назад

    I"m loving these Astro videos!

  • @abdellbouzekri5116
    @abdellbouzekri5116 15 дней назад

    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? 👻

    • @CodinginPublic
      @CodinginPublic 15 дней назад

      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!

  • @yutsacarm8021
    @yutsacarm8021 16 дней назад

    Omg !!!!! This is the. Best explanation of useRef video !!!