Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

Potluck - Sass × Houdini × No JS? × Solid Project × First Dev Job Tips × Bartering × DRM × Dev Laptops × Databases × Frontity × 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 Sass, Houdini, JS requirements, tips for your first dev job, dev laptops, databases, Frontity, and more!</p> <h2 class="code-line" data-line-start="9" data-line-end="10"><a id= "Linode__Sponsor_9" name="Linode__Sponsor_9"></a>Linode - Sponsor</h2> <p class="has-line-data" data-line-start="10" data-line-end="11"> Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at <a href= "https://linode.com/syntax">linode.com/syntax</a>. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit <a href= "https://linode.com/syntax">linode.com/syntax</a> and click on the “Create Free Account” button to get started.</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/">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="Auth0__Sponsor_15" name="Auth0__Sponsor_15"></a>Auth0 - Sponsor</h2> <p class="has-line-data" data-line-start="16" data-line-end="17"> Auth0 is the easiest way for developers to add authentication and secure their applications. They provide features like user management, multi-factor authentication, and you can even enable users to login with device biometrics with something like their fingerprint. Not to mention, Auth0 has SDKs for your favorite frameworks like React, Next.js, and Node/Express. Make sure to sign up for a free account and give Auth0 a try with the link below. <a href="https://a0.to/syntax">https://a0.to/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="19" data-line-end="20"> 02:35 - What are the use cases of SASS/SCSS in 2021? Would you still choose it over CSS (or something else?) in a new project?</p> <p class="has-line-data" data-line-start="21" data-line-end="22"> 05:26 - What ever happened to CSS Houdini?</p> <p class="has-line-data" data-line-start="23" data-line-end="24"> 08:49 - With all these JS being transferred, have you ever tried to challenge yourself to build a project that doesn’t involve any JS (in the front end alone); (e.g. just HTML+CSS)? I find it funny how I can pretty much use <a href= "http://amazon.com/">amazon.com</a> with JS disabled, but I literally cannot view the angular docs if I disable it.</p> <p class="has-line-data" data-line-start="25" data-line-end="26"> 11:40 - As we all know, Tim Berners-Lee made the web. Apparently, after seeing everyone’s data getting harvested by tech companies, he decided to make a project called Solid (<a href= "https://solidproject.org/">https://solidproject.org/</a>) that allows people to own their data and control all permissions to it. So if a user logs into your app with Solid, rather than storing their info on your server, you’d store it in <em>their</em> Solid Pod. Do you think this could save both Web developers’ conscience and disk space in the cloud?</p> <p class="has-line-data" data-line-start="27" data-line-end="28"> 15:47 - I am about to start my first developer job. What practices can I start to really get off on the right foot and lay down a foundation for a successful career?</p> <p class="has-line-data" data-line-start="29" data-line-end="30"> 18:57 - Have you guys ever used your dev skills to trade for other goods or services? For instance, helping out an auto mechanic with their website in exchange for brake service on your car or creating a site for a barbershop traded for free haircuts for a year. If so, how do you go about starting that conversation?</p> <p class="has-line-data" data-line-start="31" data-line-end="32"> 22:14 - What’s your take on DRM? Have you implemented/integrated something like Widevine in any of your platforms/projects? How does one go about doing such a thing? I can’t seem to find any good docs on that. I personally can relate as to why it’s there, but end up hating it anyways. I recently found out that Prime Video only allows SD(sub HD) content on Linux and it had something to do with the Widevine DRM they employ. I got outraged and eventually canceled my subscription!</p> <p class="has-line-data" data-line-start="33" data-line-end="34"> 29:35 - Have you seen the Framework laptop and, if so, what are your thoughts for web development? I’m a lifelong Mac user but the idea of a higher repairable laptop running Linux (I personally can’t do Windows) sounds like an amazing step forward for consumers.</p> <p class="has-line-data" data-line-start="35" data-line-end="36"> 32:53 - I know that you both like MongoDB and so do I. But sometimes all these queries to database, especially aggregations gets messy, aren’t they? Prisma has now support for MongoDB. What do you think? Is it a tool that will make requesting MongoDB much easier?</p> <p class="has-line-data" data-line-start="37" data-line-end="38"> 37:02 - Hey guys, been diving into Svelte a bit recently and had a question about using it with GraphQL. As I recall Scott once deemed React Typescript GraphQL CodeGen “the promised land” and since then I tried it out and have found it awesome. However, I’ve been debating moving a larger personal project from React to Svelte. I see that there is plugin for graphql-codegen-svelte-apollo but with my limited knowledge of Svelte find it hard to decipher if the development experience would be as streamlined. I am wondering if you could shed some light on the developer experience of working with GraphQL in Svelte in Typescript.</p> <p class="has-line-data" data-line-start="39" data-line-end="40"> 40:58 - Do y’all have any thoughts about Frontity for WordPress? I swear I’m not a plant for Frontity, but I stumbled upon it today and I’m trying to evaluate it vs. other solutions like Next.js for use in a headless WordPress setup. Would love your thoughts if you have any!</p> <p class="has-line-data" data-line-start="41" data-line-end="42"> 43:40 - Call me weird, but I kind of like fiddling around with webpack configs. I just like the level of control I have here. That being said, is webpack going to die now that the “better” tools out there mature? Or do you think we might see a webpack v6 with esbuild under the hood that makes it compete with Parcel, Vite, Snowpack in terms of speed?</p> <h2 class="code-line" data-line-start="43" data-line-end="44"> <a id="Links_43" name="Links_43"></a>Links</h2> <ul> <li class="has-line-data" data-line-start="44" data-line-end="45"> <a href="https://sass-lang.com/">https://sass-lang.com/</a></li> <li class="has-line-data" data-line-start="45" data-line-end="46"> <a href="https://postcss.org/">https://postcss.org/</a></li> <li class="has-line-data" data-line-start="46" data-line-end="47"> <a href= "https://ishoudinireadyyet.com/">https://ishoudinireadyyet.com/</a></li> <li class="has-line-data" data-line-start="47" data-line-end="48"> <a href="https://astro.build/">https://astro.build/</a></li> <li class="has-line-data" data-line-start="48" data-line-end="49"> <a href="https://kit.svelte.dev/">https://kit.svelte.dev/</a></li> <li class="has-line-data" data-line-start="49" data-line-end="50"> <a href= "https://www.widevine.com/">https://www.widevine.com/</a></li> <li class="has-line-data" data-line-start="50" data-line-end="51"> <a href="https://frame.work/">https://frame.work/</a></li> <li class="has-line-data" data-line-start="51" data-line-end="52"> <a href="https://www.prisma.io/">https://www.prisma.io/</a></li> <li class="has-line-data" data-line-start="52" data-line-end="53"> <a href= "https://www.mongodb.com/">https://www.mongodb.com/</a></li> <li class="has-line-data" data-line-start="53" data-line-end="54"> <a href= "https://www.postgresql.org/">https://www.postgresql.org/</a></li> <li class="has-line-data" data-line-start="54" data-line-end="55"> <a href="https://mongoosejs.com/">https://mongoosejs.com/</a></li> <li class="has-line-data" data-line-start="55" data-line-end="56"> <a href="https://keystonejs.com/">https://keystonejs.com/</a></li> <li class="has-line-data" data-line-start="56" data-line-end="57"> <a href="https://frontity.org/">https://frontity.org/</a></li> <li class="has-line-data" data-line-start="57" data-line-end="59"> <a href="https://webpack.js.org/">https://webpack.js.org/</a></li> </ul> <h2 class="code-line" data-line-start="59" data-line-end="60"> <a id="_SIIIIICK__PIIIICKS__59" name= "_SIIIIICK__PIIIICKS__59"></a>××× SIIIIICK ××× PIIIICKS ×××</h2> <ul> <li class="has-line-data" data-line-start="60" data-line-end="61"> Scott: <a href="https://github.com/macmade/Hot">Hot App</a></li> <li class="has-line-data" data-line-start="61" data-line-end="63"> Wes: <a href="https://amzn.to/3ljDQdr">Pet Food Mat</a></li> </ul> <h2 class="code-line" data-line-start="63" data-line-end="64"> <a id="Shameless_Plugs_63" name="Shameless_Plugs_63"></a>Shameless Plugs</h2> <ul> <li class="has-line-data" data-line-start="64" data-line-end="65"> Scott: <a href="https://www.leveluptutorials.com/pro">Web Components Course</a> - Sign up for the year and save 25%!</li> <li class="has-line-data" data-line-start="65" data-line-end="67"> Wes: <a href="https://wesbos.com/courses/">All Courses</a> - Use the coupon code ‘Syntax’ for $10 off!</li> </ul> <h2 class="code-line" data-line-start="67" data-line-end="68"> <a id="Tweet_us_your_tasty_treats_67" name= "Tweet_us_your_tasty_treats_67"></a>Tweet us your tasty treats!</h2> <ul> <li class="has-line-data" data-line-start="68" data-line-end="69"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="69" data-line-end="70"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="70" data-line-end="71"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="71" data-line-end="72"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="72" data-line-end="73"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="73" data-line-end="74"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="74" data-line-end="75"> 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 Sass, Houdini, JS requirements, tips for your first dev job, dev laptops, databases, Frontity, and more!
 Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started.
 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.
 Auth0 - Sponsor Auth0 is the easiest way for developers to add authentication and secure their applications. They provide features like user management, multi-factor authentication, and you can even enable users to login with device biometrics with something like their fingerprint. Not to mention, Auth0 has SDKs for your favorite frameworks like React, Next.js, and Node/Express. Make sure to sign up for a free account and give Auth0 a try with the link below. https://a0.to/syntax
 Show Notes 02:35 - What are the use cases of SASS/SCSS in 2021? Would you still choose it over CSS (or something else?) in a new project?
 05:26 - What ever happened to CSS Houdini?
 08:49 - With all these JS being transferred, have you ever tried to challenge yourself to build a project that doesn’t involve any JS (in the front end alone); (e.g. just HTML+CSS)? I find it funny how I can pretty much use amazon.com with JS disabled, but I literally cannot view the angular docs if I disable it.
 11:40 - As we all know, Tim Berners-Lee made the web. Apparently, after seeing everyone’s data getting harvested by tech companies, he decided to make a project called Solid (https://solidproject.org/) that allows people to own their data and control all permissions to it. So if a user logs into your app with Solid, rather than storing their info on your server, you’d store it in their Solid Pod. Do you think this could save both Web developers’ conscience and disk space in the cloud?
 15:47 - I am about to start my first developer job. What practices can I start to really get off on the right foot and lay down a foundation for a successful career?
 18:57 - Have you guys ever used your dev skills to trade for other goods or services? For instance, helping out an auto mechanic with their website in exchange for brake service on your car or creating a site for a barbershop traded for free haircuts for a year. If so, how do you go about starting that conversation?
 22:14 - What’s your take on DRM? Have you implemented/integrated something like Widevine in any of your platforms/projects? How does one go about doing such a thing? I can’t seem to find any good docs on that. I personally can relate as to why it’s there, but end up hating it anyways. I recently found out that Prime Video only allows SD(sub HD) content on Linux and it had something to do with the Widevine DRM they employ. I got outraged and eventually canceled my subscription!
 29:35 - Have you seen the Framework laptop and, if so, what are your thoughts for web development? I’m a lifelong Mac user but the idea of a higher repairable laptop running Linux (I personally can’t do Windows) sounds like an amazing step forward for consumers.
 32:53 - I know that you both like MongoDB and so do I. But sometimes all these queries to database, especially aggregations gets messy, aren’t they? Prisma has now support for MongoDB. What do you think? Is it a tool that will make requesting MongoDB much easier?
 37:02 - Hey guys, been diving into Svelte a bit recently and had a question about using it with GraphQL. As I recall Scott once deemed React Typescript GraphQL CodeGen “the promised land” and since then I tried it out and have found it awesome. However, I’ve been debating moving a larger personal project from React to Svelte. I see that there is plugin for graphql-codegen-svelte-apollo but with my limited knowledge of Svelte find it hard to decipher if the development experience would be as streamlined. I am wondering if you could shed some light on the developer experience of working with GraphQL in Svelte in Typescript.
 40:58 - Do y’all have any thoughts about Frontity for WordPress? I swear I’m not a plant for Frontity, but I stumbled upon it today and I’m trying to evaluate it vs. other solutions like Next.js for use in a headless WordPress setup. Would love your thoughts if you have any!
 43:40 - Call me weird, but I kind of like fiddling around with webpack configs. I just like the level of control I have here. That being said, is webpack going to die now that the “better” tools out there mature? Or do you think we might see a webpack v6 with esbuild under the hood that makes it compete with Parcel, Vite, Snowpack in terms of speed?
 Links  https://sass-lang.com/

 https://postcss.org/

 https://ishoudinireadyyet.com/

 https://astro.build/

 https://kit.svelte.dev/

 https://www.widevine.com/

 https://frame.work/

 https://www.prisma.io/

 https://www.mongodb.com/

 https://www.postgresql.org/

 https://mongoosejs.com/

 https://keystonejs.com/

 https://frontity.org/

 https://webpack.js.org/

  ××× SIIIIICK ××× PIIIICKS ×××  Scott: Hot App

 Wes: Pet Food Mat

  Shameless Plugs  Scott: Web Components Course - 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

Aplikace Youradio Talk

Potluck - Sass × Houdini × No JS? × Solid Project × First Dev Job Tips × Bartering × DRM × Dev Laptops × Databases × Frontity × More!

Poslechněte si podcast