Channel Title: Learn With Jason Channel Description: Learn web dev with your friend Jason! Live pair programming with expert web devs, career advice, and coding tutorials. Get better at HTML, CSS, JavaScript, and the tools and frameworks built on top of them — join the LWJ community to find your people and learn, build, and grow together! <video> Using tests for cleaner code with constant refactoring Description: Tests can help us clear the clutter out of our thinking — and our code — if we look at them a little differently. Cory Speisman teaches us how TDD can be a thinking tool. Upcoming episodes: https://lwj.dev/schedule Links & Resources: - https://www.linkedin.com/in/corey-speisman-20088017/ - https://www.thecheesecakefactory.com/menu - https://www.learnwithjason.dev/schedule/ Watch future episodes live at https://lwj.dev/live This episode was sponsored by: - Netlify(https://lwj.dev/netlify) - Tuple(https://lwj.dev/tuple) Live transcription by White Coat Captioning (https://whitecoatcaptioning.com/) </video> <video> Recreate a Cool Shuffling Effect in Pure CSS Description: When Chris Coyier saw Toni Lijic’s hobbies widget, he wanted to figure out how it works and build his own version. He shows us how he reverse engineers CSS in this episode. Upcoming episodes: https://lwj.dev/schedule Links & Resources: - https://css-tricks.com/ - https://codepen.io/ - https://chriscoyier.net/ - https://codepen.io/your-work - https://www.toni.li/about - https://lwj.dev/uses - https://codepen.io/jlengstorf/pen/EaYbjxM - https://www.learnwithjason.dev/schedule/ Watch future episodes live at https://lwj.dev/live This episode was sponsored by: - Tuple(https://lwj.dev/tuple) Live transcription by White Coat Captioning (https://whitecoatcaptioning.com/) 00:00 Welcome 01:09 Introducing Chris Coyier 02:44 Exploring CodePen 09:07 Building an Interactive Widget 48:48 Creating a Working Slider with Web Components 51:24 Setting Up the Grid Layout 01:01:06 Animating Elements with CSS 01:12:03 Final Touches and Conclusion </video> <video> Code / Career Q&A Description: What's a Tuesday morning without getting a little philosophical? Join Jason to chat code, health careers, growth, and a whole lot more. </video> <video> Building a State Machine Powered Game Show App Description: Live from the Boop Factory, join Jason Lengstorf to have a little fun with coding, talk about career dev, and ask questions! </video> <video> SQLite and Turso Description: It’s hard to beat SQLite for quickly setting up a database on a project — but can it handle “real” projects? Glauber Costa teaches us how it works in production. </video> <video> 4 devs. 4 apps. 4 hours to build the whole thing. What could you create? #web #dev #challenge Description: </video> <video> 4 hours to build an e-commerce app — Web Dev Challenge S1E9 Description: Sponsored by Intuit Mailchimp — What could you create if you had 30 minutes to plan and 4 hours to build? Bree Hall, Anthony D. Mays, Ximena Vila Ferral, and Robbie Wagner took on the Web Dev Challenge to find out. Thanks to RenderATL for coordinating the location and on-site hackathon. Get a ticket for RenderATL 2025 here: https://lwj.dev/renderatl *THE CHALLENGE* _Come up with ways to connect people’s behavior to e-commerce incentives._ Creating brand loyalty is everything to an e-commerce store. Our friends at Blvck Spades have a great product, and they need help coming up with ways to incentivize users to interact with their brand. Your challenge is to build software that connects a user’s activity to incentives. Beyond an e-commerce store, many businesses might have an app, partnerships, or physical locations or events — our job is to connect a user’s activity in these other places to incentives in the e-commerce store using the Mailchimp users as the source of truth. For example, something like “play 10 rounds of our game and get 10% off your order in the store”, or “show up to a local meetup and earn an exclusive, limited edition t-shirt”. *IMPORTANT:* You do _not_ have to build the full e-commerce store part of this! In fact, it’s probably not possible given the time constraint. Instead, focus on building the fun interaction thing and making the note in Mailchimp that the user has done the thing that earns the incentive. *THE TOOLS* Apps must use Intuit Mailchimp (https://lwj.dev/mailchimp), an email and marketing automation platform. Specifically, devs are encouraged to use the Members API for managing a given user's accomplishments, coupon codes, or other details. #spades #community #webdevelopment #challenge #javascript #reactjs #typescript *THE DEVS* Bree Hall (@bytesofbree) https://www.bytesofbree.com/ Anthony D. Mays (@AnthonyDMays) https://anthonydmays.com/ Ximena Vila Ferral (@ximenavf92) https://ximenavf.com/ Robbie Wagner (@RobbieTheWagner) https://robbiethewagner.dev/ *THE ADVISORS* Jordan Morris https://www.linkedin.com/in/jordan-a-morris/ Jason Lengstorf (@learnwithjason) https://jason.energy/links *THE APPS* - Ximena's digital conference badge: https://github.com/ximenavf92/intuit-mailchimp-api-challenge-lwj - Bree's Culture Quest: https://github.com/breehall/web-dev-challenge - Robbie's exclusive deck unlocker: https://github.com/RobbieTheWagner/webdevchallenge - Anthony's "not exactly spades" card game: https://github.com/anthonydmays/blvckspades *THE GEAR* The workstations in this series are made possible through sponsorships from these wonderful companies: - BenQ RD280U monitors: https://benqurl.biz/46nNUaT - Keychron K8 Pro keyboards: https://www.keychron.com/products/keychron-k8-pro-qmk-via-wireless-mechanical-keyboard?ref=MKT&variant=39755425382489 - Anglepoise desk lamps: https://www.anglepoise.com/usa/ - Ugmonk desk accessories: https://ugmonk.com/ See the full desk setup here: https://lwj.dev/uses ---------------------------------------------------------------------- Get early access to new videos, exclusive bonus content and other perks, and join me in building a happier, healthier, friendlier web dev community! https://www.youtube.com/@learnwithjason/join ---------------------------------------------------------------------- Chapters: 0:00 In this episode... </video> <video> New Year, No Goals (So what do we set instead?) Description: This year, Jason isn't setting any New Year's Resolutions or big goals. Let's talk about what he's doing instead, and what you want 2025 to bring! </video> <video> DevTools showcase: Warp, Graphite, and Reflex Description: How do you make sure your dev environment is helping you get work done? Elvis Kahoro will give us a tour of a few of his favorite dev tools. Upcoming episodes: https://lwj.dev/schedule Links & Resources: - https://github.com/orgs/community/discussions/38693 - https://www.linkedin.com/in/elviskahoro/ - https://www.warp.dev/d - https://graphite.dev/ - https://reflex.dev/ - https://chalk.ai/ - https://github.com/dandavison/delta - https://github.com/elviskahoro/elviskahoro/blob/cb6181a9a1a4815593928f996688331dff308d18/.gitconfig#L143 - https://www.linkedin.com/in/elviskahoro/ [8:00 AM] - https://www.learnwithjason.dev/ Watch future episodes live at https://lwj.dev/live This episode was sponsored by: - Tuple(https://lwj.dev/tuple) Live transcription by White Coat Captioning (https://whitecoatcaptioning.com/) 00:00 Welcome 00:53 Introduction of Elvis Kahoro 06:54 Showcasing Favorite Dev Tools 08:53 Warp Terminal 15:26 Advanced Warp Terminal Capabilities 32:25 AI Integration in Warp 42:07 Collaborative Features in Warp 45:02 Muscle Memory and Frustration in Dev Tools 48:10 Managing Stacked Diffs with Graphite 49:13 Graphite's Advanced Branch Management 51:39 Graphite Demo and Commands 01:15:02 Graphite's AI-Driven PR Submissions 01:18:59 Introduction to Reflex </video> <video> Pilot: A Game Show for Web Developers — Leet Heat S1E1 Description: Sponsored by JetBrains — Get ready for a gameshow made for developers. Contestants need to bring the dev knowledge... or face the heat! 🔥🌶️ Use WebStorm free on non-commercial projects: https://jb.gg/GetFreeWebStorm Host @marktechson asks contestants a rapid-fire series of questions that span across the full stack of modern web development. If they get the answers right, they earn points. But if they're wrong? The spice level goes up. Can they keep their cool as they eat progressively hotter sauces? Watch and find out! ---------------------------------------------------------------------- Get early access to new videos, exclusive bonus content and other perks, and join me in building a happier, healthier, friendlier web dev community! https://www.youtube.com/@learnwithjason/join ---------------------------------------------------------------------- Chapters: 0:00 Opening 0:28 Rules 00:45 Round 1 6:55 "Commercial" break 1 11:16 "Commercial" break 2 11:43 Round 2 20:35 "Commercial" break 3 </video> <video> More state machines! Description: I'm working on finishing a state machine powered game show app. Come join me for casual building, Q&A, and more! </video> <video> A Game Show For Developers — bring web dev knowledge or face the heat! #spicy #webdevelopment Description: </video> <video> Let’s Learn Rspack Description: How does Rspack, a Rust-based web bundler, make devs’ lives easier? Core team member Zack Jackson shows us how it works. </video> <video> Building Web Demos + Q&A Description: Live from the Boop Factory, join Jason Lengstorf to have a little fun with coding, talk about career dev, and ask questions! </video> <video> 4 Hours to Save Santa's Workshop — Web Dev Challenge S1E10 Description: Sponsored by Sanity — What could you create if you had 30 minutes to plan and 4 hours to build? Aaron Francis, Charlie Gerard, Kent C. Dodds, and Domitrius Clark took on the Web Dev Challenge to find out. *THE CHALLENGE* _The holidays are upon us and Santa’s elves are behind schedule! Build an app to get the holiday back on track._ Santa’s workshop is in chaos. The drop on the 25th is getting closer by every hour, every day. You’ve been brought in as a consultant to help get things back in order. Your job: decide what the cause of the chaos is — then plan and build an app to solve the problem. The team at Sanity will provide us with a starter dataset and schema giving us some information about Santa’s workshop and content for all the kids in the world (the good, bad, young and old ones) — things like the staff, the inventory, services, etc. — and you can extend or modify that schema as you see fit (or, if you prefer, ignore it entirely and do something else). *THE TOOLS* Apps must use Sanity ( https://lwj.dev/sanity ), a modern content operations platform. #santa #community #webdevelopment #challenge #javascript #reactjs #typescript *THE DEVS* Aaron Francis (@aarondfrancis) https://aaronfrancis.com/ Charlie Gerard (@CharlieGerard) https://charliegerard.dev/ Kent C. Dodds (@KentCDodds-vids) https://kentcdodds.com/clubs Domitrius Clark (@domitriusclark) https://github.com/domitriusclark *THE ADVISORS* Simeon Griggs (@simeonGriggs) https://www.simeongriggs.dev/ Jason Lengstorf (@learnwithjason) https://jason.energy/links *THE APPS* - Aaron's Elo toy ranking: https://github.com/aarondfrancis/elo - Kent's Santa Codes: https://github.com/kentcdodds/santa-codes - Dom's Naughty or Nice app: https://github.com/domitriusclark/lwj-santas-secret-project - Charlie's letters to Santa app: https://github.com/charliegerard/webdev-challenge *THE GEAR* The workstations in this series are made possible through sponsorships from these wonderful companies: - BenQ RD280U monitors: https://benqurl.biz/46nNUaT - Keychron K8 Pro keyboards: https://www.keychron.com/products/keychron-k8-pro-qmk-via-wireless-mechanical-keyboard?ref=MKT&variant=39755425382489 - Anglepoise desk lamps: https://www.anglepoise.com/usa/ - Ugmonk desk accessories: https://ugmonk.com/ See the full desk setup here: https://lwj.dev/uses ---------------------------------------------------------------------- Get early access to new videos, exclusive bonus content and other perks, and join me in building a happier, healthier, friendlier web dev community! https://www.youtube.com/@learnwithjason/join ---------------------------------------------------------------------- Chapters: 0:00 In this episode... 0:42 The Challenge 0:57 Meet your advisor + what is Sanity? 1:57 Planning phase starts 2:26 Meet Aaron Francis + his app idea 3:02 Meet Charlie Gerard + her app idea 4:48 Meet Domitrius Clark + his app idea 6:10 Meet Kent C. Dodds + his app idea 7:07 Build phase starts 9:50 Progress check ins 13:55 Late stage check ins 17:49 Join the Web Dev Challenge hackathon! 18:00 Aaron's web app demo 22:01 Kent's web app demo 24:51 Dom's web app demo 26:55 Charlie's web app demo 29:38 Closing thoughts </video>

Contacts and Links

Description

Learn web dev with your friend Jason! Live pair programming with expert web devs, career advice, and coding tutorials. Get better at HTML, CSS, JavaScript, and the tools and frameworks built on top of them — join the LWJ community to find your people and learn, build, and grow together!

Videos from channel