Potluck - MDX × Portfolio Projects × Code Commenting × CSS Properties × Reusable Components × More!
Syntax - Tasty Web Development Treats26 Aug 2020

Potluck - MDX × Portfolio Projects × Code Commenting × CSS Properties × Reusable Components × More!

It’s another potluck! In this episode, Scott and Wes answer your questions about MDX, portfolio projects for junior devs, code commenting, CSS property order, and more! Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax. Netlify - Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up netlify.com/syntax for more info. Show Notes 02:18 - I’m curious to know what you guys think of MDX. I’d love to learn more about pros and cons, if you guys had a chance to use it. 08:49 - Where would you put business logic in Vue.js middle- or large-scale applications? I try to put business logic in store but it makes hard to maintain such store, even with splitting to actions/getters/mutations files. I ended up using vanilla JavaScript files, where each file is a class singleton. I was wondering: is it a good solution or do you have better alternatives in mind? 12:07 - I commonly find myself engineering complex programs and left flabbergasted on how to express these ideas to other people when the need arises that I need to explain them and remember why I did them a certain way. How can I get better at conceptualizing intricate design patterns or functions as well as have better memory recall for these abstractions? 18:02 - Can I get recommendations for a junior dev portfolio? What five projects you would recommend to build that will significantly help in getting a job as a front-end web dev and why? 21:13 - I am now working on building a minesweeper game with React. You know how on a computer you right click to flag and disable a cell? I am thinking of doing a press and hold on a mobile device instead. I am not sure how to do either (the right click logic or the press and hold). How can you listen for these events in React? Can you help with some guidance or resources? :) 30:00 - What are your thoughts on SailsJS as a Rails-equivalent framework in Javascript? They recently released version 1.0 and I’m wondering if I should start using it in projects or if I should wait to see if it pans out. 34:35 - How do you go about creating reusable React components (reusable from project to project)? Do you create packages and publish them to NPM? Or do you have another method for storing code for components that you will likely need to use again? 38:33 - Thoughts on shadow dom / custom elements? Would you use them in your own projects? 40:49 - How do you organize CSS properties within a rule and why? Random, alphabetical, logical groupings, etc. 46:04 - Have u ever used the 2nd parameter of JSON.stringify for anything useful? 48:00 - Getting my first dev job at an actual software company a year ago opened my eyes to the vast difference between educational repos and the absolute jungle that can be enterprise code bases. I’ve also learned the importance of writing code that will be readable later - ensuring any hacky workaround is replaced with a pattern seen elsewhere in the code base, etc. My question is - are there resources on these sorts of topics for folks trying to break into the industry? A lot of tech topics revolve around how to get your code to run, which feels to me like only half the battle. Where can juniors find resources on robustness? Links https://github.com/jxnblk/mdx-deck https://mdsvex.com/ Spectacle MDsveX Vue.js Redux VueX Better Comments Kap Redwood.js Blitz.js GraphQL https://github.com/ryanmcdermott/clean-code-javascript ××× SIIIIICK ××× PIIIICKS ××× Scott: Easy Snippet Wes: WOW Pool Noodles Shameless Plugs Scott: All Courses - Sign up for the year and save 25%! Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off! Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

Avsnitt(959)

903: Fork Yeah! Microsoft open sourcing Copilot

903: Fork Yeah! Microsoft open sourcing Copilot

Scott and Wes are joined by Erich Gamma, creator of VS Code, and Kai Maetzel, Copilot Lead, to share some big news about the future of VS Code and Copilot. They discuss what it means for developers, how AI is shaping the future of coding, and why staying open to the community is key. Show Notes 00:00 Welcome to Syntax! 01:00 The inception of VS Code. 02:49 VS Code adoption. 04:31 Brought to you by Sentry.io. 04:55 Syntax Denver Meetup! 05:19 The big announcement. 06:25 The current state of Copilot and VS Code. 08:31 The challenges with LLMs running outside of the codebase. 09:31 How to make a business case for AI. 10:47 The maturing of the AI landscape. 13:01 The limitations of extensions. 14:06 Open source vs closed source. 14:49 Copilot’s context is public. 19:23 Is context language-specific? 21:23 How does this affect paid Copilot features? 23:27 Secrets of Copilot’s server-side. 28:36 What will be open and what will not? 29:03 Is Copilot’s UI influenced by VS Code forks? 31:31 Maintaining VS Code identity in forks. 33:07 What does open-sourcing GitHub Copilot mean for Cursor and Windsurf? 38:42 Were you surprised to see VS Code forks? 40:03 Are other extensions able to tap into the AI offerings? 43:20 There’s work to be done. 44:13 The timeline. 45:39 Simulation Tests (S Tests). 48:07 How to test LLMs. 49:10 The future of software development with AI. 52:47 What’s your favorite model? Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

19 Maj 57min

902: Fullstack Cloudflare with React and Vite (Redwood SDK)

902: Fullstack Cloudflare with React and Vite (Redwood SDK)

Wes talks with Peter Pistorius about RedwoodSDK, a new React framework built natively for Cloudflare. They dive into real-time React, server components, zero-cost infrastructure, and why RedwoodSDK empowers developers to ship faster with fewer tradeoffs and more control. Show Notes 00:00 Welcome to Syntax! 00:52 What is RedwoodSDK? 04:49 Choosing openness over abstraction 08:46 More setup, more control 12:20 Why RedwoodSDK only runs on Cloudflare 14:25 What the database setup looks like 16:15 Durable Objects explained – Ep 879: Fullstack Cloudflare 18:14 Middleware and request flow 23:14 No built-in client-side router? 24:07 Integrating routers with defineApp 26:04 React Server Components and real-time updates 29:53 What happened to RedwoodJS? 31:14 Why do opinionated frameworks struggle to catch on? 34:35 The problem with Lambdas 36:16 Cloudflare’s JavaScript runtime compatibility 40:04 Brought to you by Sentry.io 41:44 The vision behind RedwoodSDK Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

14 Maj 46min

901: JS News: New React & Svelte APIs, RSC Updates, Redwood and Storybook

901: JS News: New React & Svelte APIs, RSC Updates, Redwood and Storybook

Scott and Wes break down the latest in JavaScript news, including new async patterns in Svelte, React Server Component tooling with Parcel, and Redwood’s push into Cloudflare with its new SDK. They also cover what’s new in Storybook 9 Beta, from visual testing to a sleeker, lighter build. Show Notes 00:00 Welcome to Syntax! 02:50 Brought to you by Sentry.io. 03:37 Syntax Meetup! 04:09 React View Transitions. 08:58 addTransitionType. 11:18 Activity API. Offscreen Renamed to Activity. 14:22 Maintaining state in search queries. 16:29 Asynchronous Svelte. Playground. 19:04 Svelte Boundary. 25:13 Parcel RSC. 27:15 Redwood SDK. 30:55 Storybook 9 Beta. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

12 Maj 38min

900: 13 New CSS Features You Can Start Using Today

900: 13 New CSS Features You Can Start Using Today

7 Maj 57min

899: GSAP: Killer Web Animations With Cassie Evans

899: GSAP: Killer Web Animations With Cassie Evans

Scott and Wes sit down with Cassie Evans of GSAP to talk all things animation—from SVGs and scroll timelines to GSAP’s new rebrand and exciting features. They also dig into performance, plugins, and what makes GSAP such a powerful tool for web developers. Show Notes 00:00 Welcome to Syntax! 00:59 What is GSAP? Cassie Codes. 01:53 GSAP Rebranding. 04:44 GSAP under the hood. 05:29 The big announcement! 07:19 GSAP Showcase. 11:01 Brought to you by Sentry.io. 11:26 Why is GSAP easier for animations? GSAP Docs. 12:38 Animating with SVGs. 13:33 The love of SVG. 14:55 GSAP is performant. 16:06 Gotchas to watch out for. 18:12 Does GSAP work with canvas? 19:02 What GSAP projects are you most proud of? 20:30 Does it play nice with web frameworks? GSAP with React. 22:32 What are you excited about in CSS right now? Scroll Timeline. 24:27 Will any of these make their way into GSAP? 26:31 Timelines. 29:24 Building animations with timelines. 34:55 What are the best GSAP plugins? Split Text spanran-wrap. Physics 2D Plugin. 38:44 GSAP docs and philosophy. 39:50 Scrubbing animations by frame. 41:09 GSAP Video Exporter. 41:45 Animating with JavaScript. 45:19 JavaScript in unconventional applications. 47:56 Is there anything missing in web tech? 50:53 What about AI in GSAP? 52:40 Sick Picks + Shameless Plugs. Sick Picks Cassie: Eyesy Video Synthesis. Shameless Plugs Cassie: Smashing Conf. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

5 Maj 57min

898: Every Developer Needs a 3D Printer

898: Every Developer Needs a 3D Printer

Wes and Scott talk all things 3D printing—from fixing every day items to organizing tools, printing gadgets, and even teaching their kids entrepreneurship. Show Notes 00:00 Welcome to Syntax! 03:34 Brought to you by Sentry.io 05:03 Practical uses of 3D printing 07:34 Creating tools for organization Gridfinity 10:33 Improving and adapting everyday items Underware 14:34 The benefits of printing something vs buying it 15:32 Choosing the right 3D printer Bamboo Lab Elegoo Prusa Flashorge 25:26 Projects and ideas Multiboard 31:33 Filament types and their uses 40:05 Finding affordable filament Deal Forager 46:07 Where to find 3D models Maker World yeggi Printables Thangs Thingverse 48:08 Creating your own 3D models Fusion Shapr3D Onshape 53:00 Modifying existing 3D models 54:30 Coding in 3D printing Bento shards ManifoldCAD Hunyuan3D-2mv-Turbo Mecagent 01:01:25 Sick Picks + Shameless Plugs Sick Picks Scott: Alaska Bear Organic Silk Sleep Mask Wes: BLV - AMS Riser Shameless Plugs Syntax YouTube Channel Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

30 Apr 1h 5min

897: Making Your App Feel Faster Than It Really Is

897: Making Your App Feel Faster Than It Really Is

Scott and Wes break down the tricks and techniques for making your app feel blazing fast—even when it’s not. From optimistic UI to preload-on-hover, it’s all about perception, not just performance. Show Notes 00:00 Welcome to Syntax! 01:12 Brought to you by Sentry.io. 02:34 Mousedown or pointerdown events. 06:00 UI animations should be fast. 08:00 Animations should not block interaction. 08:20 Animations should be cancellable / reversible. 10:50 Optimistic UI. 12:37 Local Data. 13:36 Delay loading indicators. 14:40 Page loading indicators. 15:47 Preload on hover. 17:13 Calculate mouse trajectory. 18:51 Full page spinner on every change. 20:04 Pixelated spinners. 20:23 Skeleton loaders. 23:43 Photo frames. 25:52 Search on input instead of search on click. 26:46 Progress loaders than move in between steps. 27:31 Community submissions. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

28 Apr 35min

896: Do I Still Need To Know JS/CSS/HTML with AI? × How To Sell An App × Is React Context Bad? × More

896: Do I Still Need To Know JS/CSS/HTML with AI? × How To Sell An App × Is React Context Bad? × More

23 Apr 53min

Populärt inom Politik & nyheter

aftonbladet-krim
svenska-fall
motiv
p3-krim
fordomspodden
rss-krimstad
blenda-2
flashback-forever
rss-viva-fotboll
rss-sanning-konsekvens
aftonbladet-daily
rss-vad-fan-hande
rss-krimreportrarna
grans
rss-frandfors-horna
dagens-eko
sydsvenskan-dok
rss-flodet
olyckan-inifran
krimmagasinet