Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

Potluck — VSCode × Vercel vs Netlify × Models × Mutations × Multi-Vendor Platforms × Websites vs Web Apps × More!

Syntax - Tasty Web Development Treats

Full Stack Developers Wes Bos and Scott Tolinski dive deep into web development topics, explaining how they work and talking about their own experiences. They cover from JavaScript frameworks like React, to the latest advancements in CSS to simplifying web tooling.

<p class="has-line-data" data-line-start="7" data-line-end="8">It’s another potluck! In this episode, Scott and Wes answer your questions about VSCode, Vercel vs Netlify, staying up to date with dev concepts, models and mutations, websites vs seb apps, adaptive vs responsive design, and more!</p> <h2 class="code-line" data-line-start="9" data-line-end="10"><a id= "Freshbooks__Sponsor_9" name="Freshbooks__Sponsor_9"></a>Freshbooks - Sponsor</h2> <p class="has-line-data" data-line-start="10" data-line-end="11"> Get a 30 day free trial of Freshbooks at <a href= "https://freshbooks.com/syntax">freshbooks.com/syntax</a> and put SYNTAX in the “How did you hear about us?” section.</p> <h2 class="code-line" data-line-start="12" data-line-end="13"> <a id="Sentry__Sponsor_12" name="Sentry__Sponsor_12"></a>Sentry - Sponsor</h2> <p class="has-line-data" data-line-start="13" data-line-end="14">If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting <a href= "https://sentry.io/" target="_blank" rel= "noopener noreferrer">Sentry.io</a> and using the coupon code TASTYTREAT during sign up.</p> <h2 class="code-line" data-line-start="15" data-line-end="16"> <a id="Vonage__Sponsor_15" name="Vonage__Sponsor_15"></a>Vonage - Sponsor</h2> <p class="has-line-data" data-line-start="16" data-line-end="17"> Vonage is a Cloud Communications platform that allows developers to integrate voice, video and messaging into their applications using their communication APIs. Whether you’re wanting to build video calls into your app, create a Facebook bot, or build applications on top of programmable phone numbers, you’ll have all the tools you need. Use promo code SYNTAX10 for €10 of free credit when signing up at <a href= "https://vonage.dev/syntax">vonage.dev/syntax</a>.</p> <h2 class="code-line" data-line-start="18" data-line-end="19"> <a id="Show_Notes_18" name="Show_Notes_18"></a>Show Notes</h2> <p class="has-line-data" data-line-start="22" data-line-end="23"> 02:10 - Sometimes in <a href= "https://code.visualstudio.com/">VSCode</a> when intellisense tells us the <a href= "https://www.typescriptlang.org/">TypeScript</a> type of a variable, it just gives the name of the type rather than how the type is defined. This is annoying for objects as I want to know what fields it contains! How do you handle this? Is there some VSCode magic to make it show the full type definition or is there some way to bring up the definition in the .d.ts file?</p> <p class="has-line-data" data-line-start="24" data-line-end="25"> 04:55 - What techniques do you guys use to keep different tech stack requirements fresh between projects?</p> <p class="has-line-data" data-line-start="26" data-line-end="27"> 10:35 - How do you feel about <a href= "https://vercel.com/">Vercel</a> vs. <a href= "https://www.netlify.com/">Netlify</a>? Pros/cons? Thanks!</p> <p class="has-line-data" data-line-start="28" data-line-end="29"> 18:32 - Should a model name be singular or plural?</p> <p class="has-line-data" data-line-start="30" data-line-end="31"> 22:57 - I’ve just listened to the <a href= "https://syntax.fm/show/319/hasty-treat-css-typography-and-systems"> CSS Typography and Systems Hasty Treat</a>, and realized that we often try to apply website design to web apps (me at least). Can you elaborate on the differences in designing for a website and for a web app?</p> <p class="has-line-data" data-line-start="32" data-line-end="33"> 25:46 - What’s the difference between adaptive and responsive design?</p> <p class="has-line-data" data-line-start="34" data-line-end="35"> 32:40 - Multi-vendor platforms? Have you done it before? A partner and I, are planning to build a peer-2-peer platform (similar to Etsy and Amazon, where users can register as a merchant or a buyer). What is the easiest way to make payment transactions (Stripe or PayPal)? Do you know any frameworks that will make my life easier?</p> <p class="has-line-data" data-line-start="36" data-line-end="37"> 36:16 - Is there a golden rule for mutations? I’ve been using GraphQL for last couple of months, and everything is great as long as I’m just fetching data. When I need to write mutations, the story gets murky. Looking around internet, there are not too many best practices to be found - most of the articles and blogs focus on data fetching.</p> <p class="has-line-data" data-line-start="38" data-line-end="39"> 42:19 - What do you think about the future of <a href= "https://svelte.dev/">Svelte</a>? I know they are replacing <a href= "https://sapper.svelte.dev/">Sapper</a> with <a href= "https://github.com/sveltekit">SvelteKit</a>, which uses <a href="https://www.snowpack.dev/">Snowpack</a>. What direction do you think Svelte will go in?</p> <p class="has-line-data" data-line-start="40" data-line-end="41"> 45:32 - How can I get back into a habit of learning new things and stop heavily relying on video tutorials all the time? I really struggle to sit down and read for long periods of time. Also have you guys came across the Genesis framework, and if so, could you recommend any learning material? Thanks.</p> <p class="has-line-data" data-line-start="42" data-line-end="43"> 48:54 - My team uses <a href= "https://handlebarsjs.com/">handlebars</a> templates for generating newsletters. The content is coming from a CMS for generating final HTML. I’m fairly new to handlebars and <a href= "https://mustache.github.io/">mustache</a> syntax, so instead of learning handlebars I’m thinking about using <a href= "https://reactjs.org/">React</a> to generate the html on server side. I see some great potential here as the entire team is well-versed with React. What is your opinion about this?</p> <h2 class="code-line" data-line-start="44" data-line-end="45"> <a id="Links_44" name="Links_44"></a>Links</h2> <ul> <li class="has-line-data" data-line-start="45" data-line-end="46"> <a href= "https://code.visualstudio.com/docs/editor/editingevolved#_peek">VSCode Peek Definition</a></li> <li class="has-line-data" data-line-start="46" data-line-end="47"> <a href="https://obsidian.md/">Obsidian</a></li> <li class="has-line-data" data-line-start="47" data-line-end="48"> <a href="https://render.com/">Render</a></li> <li class="has-line-data" data-line-start="48" data-line-end="49"> <a href="https://adamwathan.me/">Adam Wathan</a></li> <li class="has-line-data" data-line-start="49" data-line-end="50"> <a href="https://gumroad.com/">Gumroad</a></li> <li class="has-line-data" data-line-start="50" data-line-end="51"> <a href="https://www.braintreepayments.com/">Braintree</a></li> <li class="has-line-data" data-line-start="51" data-line-end="52"> <a href="https://mjml.io/">MJML</a></li> <li class="has-line-data" data-line-start="52" data-line-end="53"> <a href= "https://github.com/unlayer/react-email-editor">https://github.com/unlayer/react-email-editor</a></li> <li class="has-line-data" data-line-start="53" data-line-end="55"> <a href="https://www.redwingshoes.com/">Redwings shoes</a></li> </ul> <h2 class="code-line" data-line-start="55" data-line-end="56"> <a id="_SIIIIICK__PIIIICKS__55" name= "_SIIIIICK__PIIIICKS__55"></a>××× SIIIIICK ××× PIIIICKS ×××</h2> <ul> <li class="has-line-data" data-line-start="56" data-line-end="57"> Scott: <a href="https://amzn.to/3tDFcRZ">Tosowoong Enyme Powder Wash</a></li> <li class="has-line-data" data-line-start="57" data-line-end="59"> Wes: <a href="https://amzn.to/2N5n16T">Carhartt Gloves</a></li> </ul> <h2 class="code-line" data-line-start="59" data-line-end="60"> <a id="Shameless_Plugs_59" name="Shameless_Plugs_59"></a>Shameless Plugs</h2> <ul> <li class="has-line-data" data-line-start="60" data-line-end="61"> Scott: <a href="https://www.leveluptutorials.com/pro">Testing with Cypress</a> - Sign up for the year and save 25%!</li> <li class="has-line-data" data-line-start="61" data-line-end="63"> Wes: <a href="https://advancedreact.com/">Advanced React Course</a> - Use the coupon code ‘Syntax’ for $10 off!</li> </ul> <h2 class="code-line" data-line-start="63" data-line-end="64"> <a id="Tweet_us_your_tasty_treats_63" name= "Tweet_us_your_tasty_treats_63"></a>Tweet us your tasty treats!</h2> <ul> <li class="has-line-data" data-line-start="64" data-line-end="65"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="65" data-line-end="66"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="66" data-line-end="67"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="67" data-line-end="68"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="68" data-line-end="69"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="69" data-line-end="70"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="70" data-line-end="71"> Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets</li> </ul>

It’s another potluck! In this episode, Scott and Wes answer your questions about VSCode, Vercel vs Netlify, staying up to date with dev concepts, models and mutations, websites vs seb apps, adaptive vs responsive design, and more!
 Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
 Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
 Vonage - Sponsor Vonage is a Cloud Communications platform that allows developers to integrate voice, video and messaging into their applications using their communication APIs. Whether you’re wanting to build video calls into your app, create a Facebook bot, or build applications on top of programmable phone numbers, you’ll have all the tools you need. Use promo code SYNTAX10 for €10 of free credit when signing up at vonage.dev/syntax.
 Show Notes 02:10 - Sometimes in VSCode when intellisense tells us the TypeScript type of a variable, it just gives the name of the type rather than how the type is defined. This is annoying for objects as I want to know what fields it contains! How do you handle this? Is there some VSCode magic to make it show the full type definition or is there some way to bring up the definition in the.d.ts file?
 04:55 - What techniques do you guys use to keep different tech stack requirements fresh between projects?
 10:35 - How do you feel about Vercel vs. Netlify? Pros/cons? Thanks!
 18:32 - Should a model name be singular or plural?
 22:57 - I’ve just listened to the CSS Typography and Systems Hasty Treat, and realized that we often try to apply website design to web apps (me at least). Can you elaborate on the differences in designing for a website and for a web app?
 25:46 - What’s the difference between adaptive and responsive design?
 32:40 - Multi-vendor platforms? Have you done it before? A partner and I, are planning to build a peer-2-peer platform (similar to Etsy and Amazon, where users can register as a merchant or a buyer). What is the easiest way to make payment transactions (Stripe or PayPal)? Do you know any frameworks that will make my life easier?
 36:16 - Is there a golden rule for mutations? I’ve been using GraphQL for last couple of months, and everything is great as long as I’m just fetching data. When I need to write mutations, the story gets murky. Looking around internet, there are not too many best practices to be found - most of the articles and blogs focus on data fetching.
 42:19 - What do you think about the future of Svelte? I know they are replacing Sapper with SvelteKit, which uses Snowpack. What direction do you think Svelte will go in?
 45:32 - How can I get back into a habit of learning new things and stop heavily relying on video tutorials all the time? I really struggle to sit down and read for long periods of time. Also have you guys came across the Genesis framework, and if so, could you recommend any learning material? Thanks.
 48:54 - My team uses handlebars templates for generating newsletters. The content is coming from a CMS for generating final HTML. I’m fairly new to handlebars and mustache syntax, so instead of learning handlebars I’m thinking about using React to generate the html on server side. I see some great potential here as the entire team is well-versed with React. What is your opinion about this?
 Links  VSCode Peek Definition

 Obsidian

 Render

 Adam Wathan

 Gumroad

 Braintree

 MJML

 https://github.com/unlayer/react-email-editor

 Redwings shoes

  ××× SIIIIICK ××× PIIIICKS ×××  Scott: Tosowoong Enyme Powder Wash

 Wes: Carhartt Gloves

  Shameless Plugs  Scott: Testing with Cypress - Sign up for the year and save 25%!
 Wes: Advanced React Course - 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

Aplikace Youradio Talk

Potluck — VSCode × Vercel vs Netlify × Models × Mutations × Multi-Vendor Platforms × Websites vs Web Apps × More!

Poslechněte si podcast