Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

Potluck - Svelte × Bleeding-Edge Tech × Git Process × Screencasts × Government Jobs × Permissions-Based APIs × Rescript × 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 Svelte, bleeding-edge tech, best Git processes, Create React App, screencast software, FitBit API, government jobs, Syntax sponsors, and more!</p> <h2 class="code-line" data-line-start="9" data-line-end="10"><a id= "TECH_Domains__Sponsor_9" name="TECH_Domains__Sponsor_9"></a>.TECH Domains - Sponsor</h2> <p class="has-line-data" data-line-start="10" data-line-end="11"> .TECH is taking the tech industry by storm. A domain that shows the world what you are all about! If you’re looking for a domain name for your startup, portfolio, or your own project like we did with uses.tech, check out .tech Domains. Syntax listeners can snap their .TECH Domains at 80% off on five-year registration by visiting <a href= "https://go.tech/syntaxistech">go.tech/syntaxistech</a> and using the coupon code “syntax5”.</p> <h2 class="code-line" data-line-start="12" data-line-end="13"> <a id="LogRocket__Sponsor_12" name= "LogRocket__Sponsor_12"></a>LogRocket - Sponsor</h2> <p class="has-line-data" data-line-start="13" data-line-end="14"> LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at <a href= "https://logrocket.com/syntax">logrocket.com/syntax</a>.</p> <h2 class="code-line" data-line-start="15" data-line-end="16"> <a id="Mux__Sponsor_15" name="Mux__Sponsor_15"></a>Mux - Sponsor</h2> <p class="has-line-data" data-line-start="16" data-line-end="17"> Mux Video is an API-first platform that makes it easy for any developer to build beautiful video. Powered by data and designed by video experts, your video will work perfectly on every device, every time. Mux Video handles storage, encoding, and delivery so you can focus on building your product. Live streaming is just as easy and Mux will scale with you as you grow, whether you’re serving a few dozen streams or a few million. Visit <a href= "https://mux.com/syntax">mux.com/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"> 03:15 - I was wondering what you guys think about using the latest of Svelte (svelte-next) in serious projects? Does the improved devEx makes up for the small (but growing) community and lack of libraries? Do you think svelte-next is here to stay or maybe we will get a revamp that breaks backward compatibility in a couple of years, like svelte 2 -> svelte 3?</p> <p class="has-line-data" data-line-start="21" data-line-end="22"> 8:48 - Git question: My process is often that I want to be able to use my last project as a starting point for my next project, with the new project having absolutely no connection or relationship to the old project. What steps can I take to completely sever any ties to the old project? Bonus question: In the new project I would love to eliminate all commits from the old project and start the new project having just one commit, the initial commit with all the code from the old project.</p> <p class="has-line-data" data-line-start="23" data-line-end="24"> 11:05 - Is CRA still useful for building actual production-level web apps these days? People seem to be reaching for Next or Gatsby most of the time, and I feel CRA is mainly used for actually learning React/building personal small websites. Your thoughts? Also, for normal CSR, I feel it is better to use something like Next, and fetch data inside your component (eg: for a dashboard) rather than building one with CRA. Am I wrong?</p> <p class="has-line-data" data-line-start="25" data-line-end="26"> 19:40 - What are your favorite screencast tools? (Linux? Mac? Windows?)</p> <p class="has-line-data" data-line-start="27" data-line-end="28"> 25:53 - Is it a bad trait for beginners to “give up” easily? By that, I mean instead of taking the time to think of the answer to a problem, they would instead rely on googling the solution and try to understand how it worked afterward.</p> <p class="has-line-data" data-line-start="29" data-line-end="30"> 27:55 - In pursuit of better health I want to track my weight daily using a smart digital scale. The idea is to automate the process of logging my own weight (e.g. stepping on the scale will update my Apple Health and any other integrations I have). After some searching around I landed on the Aria Air (mostly because I like the design and it has the coolest name). One small problem - it does not sync with Apple Health as it is a product from FitBit. They have an API so I’m thinking about running a serverless function daily, around 8 a.m. after I weigh in, to hit the FitBit API, get the data and push it to Apple Health. This way I can stay in the Apple eco-system whilst happily getting this nice, aesthetic digital scale. Any thoughts on how you would personally implement something like this? P.S. My girlfriend thinks I’m crazy, but I know the tinkerer inside Wes will love this.</p> <p class="has-line-data" data-line-start="31" data-line-end="32"> 30:26 - I work for the government with good pay and benefits and love where I work, but I feel like I’m missing out. Working in government we are not always working on the bleeding edge of technology. I do try and learn on my own, but it’s hard sometimes if I don’t put it into practice. I do peek at other job openings and get excited about the tech stack and the things they’re doing. I’m just afraid if I leave I won’t have the stability and benefits I would get from working in government. Any tips or thoughts would be appreciated.</p> <p class="has-line-data" data-line-start="33" data-line-end="34"> 34:24 - Unpopular opinion: Authentication isn’t that hard, but authorization is! What systems have you built to handle when users with specific permissions are allowed (or disallowed) to take actions within your system? What advice would you give to other developers developing permissions-based APIs, assuming their users can have 5-10 different levels of permissions?</p> <p class="has-line-data" data-line-start="35" data-line-end="36"> 40:21 - What are your thoughts on ReScript as an alternative to TypeScript?</p> <p class="has-line-data" data-line-start="37" data-line-end="38"> 44:43 - How come you guys moved to two sponsors on a Hasty and three on a Tasty? Not that it’s a big deal - was just curious of it was to keep up with costs or just because you could and then you’d make more? Either way, the show is awesome and really appreciate your opinions on everything!</p> <p class="has-line-data" data-line-start="39" data-line-end="40"> 48:01 - Have you tried Angular 12? I’d think you’d be pleasantly surprised if you gave it a chance!</p> <p class="has-line-data" data-line-start="41" data-line-end="42"> 52:20 - I have to copy and paste hundreds of products with six rows of details from a spreadsheet into a web interface because there is no API or CSV upload function for this program. Any recommendation on how to automate data entry into web inputs, navigate pages / click buttons, and toggle between applications? BTW, I scored my first web developer job and have to give you guys credit for steering me in the right direction.</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://svelte.dev/">Svelte</a></li> <li class="has-line-data" data-line-start="45" data-line-end="46"> <a href= "https://reactjs.org/docs/create-a-new-react-app.html">Create React App</a></li> <li class="has-line-data" data-line-start="46" data-line-end="47"> <a href="https://nextjs.org/">Next.js</a></li> <li class="has-line-data" data-line-start="47" data-line-end="48"> <a href="https://vercel.com/">Vercel</a></li> <li class="has-line-data" data-line-start="48" data-line-end="49"> <a href="https://shinywhitebox.com/">iShowU</a></li> <li class="has-line-data" data-line-start="49" data-line-end="50"> <a href="https://www.descript.com/">Descript</a></li> <li class="has-line-data" data-line-start="50" data-line-end="51"> <a href= "https://www.telestream.net/screenflow/">Screenflow</a></li> <li class="has-line-data" data-line-start="51" data-line-end="52"> <a href= "https://www.fitbit.com/global/us/products/scales/aria-air">Aria Air</a></li> <li class="has-line-data" data-line-start="52" data-line-end="53"> <a href="https://www.fitbit.com/global/us/home">FitBit</a></li> <li class="has-line-data" data-line-start="53" data-line-end="54"> <a href="https://www.apple.com/ios/health/">Apple Health</a></li> <li class="has-line-data" data-line-start="54" data-line-end="55"> <a href="https://www.gov.uk/">https://www.gov.uk/</a></li> <li class="has-line-data" data-line-start="55" data-line-end="56"> <a href="https://keystonejs.com/">Keystone</a></li> <li class="has-line-data" data-line-start="56" data-line-end="57"> <a href="https://rescript-lang.org/">rescript</a></li> <li class="has-line-data" data-line-start="57" data-line-end="58"> <a href="https://www.typescriptlang.org/">TypeScript</a></li> <li class="has-line-data" data-line-start="58" data-line-end="59"> <a href="https://angular.io/">Angular</a></li> <li class="has-line-data" data-line-start="59" data-line-end="60"> <a href= "https://syntax.fm/show/359/hasty-treat-making-a-vaccine-bot-with-javascript"> Syntax 359: Hasty Treat - Making a Vaccine Bot with JavaScript</a></li> <li class="has-line-data" data-line-start="60" data-line-end="61"> <a href="https://pptr.dev/">Puppeteer</a></li> <li class="has-line-data" data-line-start="61" data-line-end="62"> <a href="https://uses.tech/">uses.tech</a></li> <li class="has-line-data" data-line-start="62" data-line-end="64"> <a href="https://wes.tech/">wes.tech</a></li> </ul> <h2 class="code-line" data-line-start="64" data-line-end="65"> <a id="_SIIIIICK__PIIIICKS__64" name= "_SIIIIICK__PIIIICKS__64"></a>××× SIIIIICK ××× PIIIICKS ×××</h2> <ul> <li class="has-line-data" data-line-start="65" data-line-end="66"> Scott: <a href="https://kit.svelte.dev/">SvelteKit</a></li> <li class="has-line-data" data-line-start="66" data-line-end="68"> Wes: <a href="https://wyze.com/wyze-sprinkler.html">Wyze Sprinkler Controller</a></li> </ul> <h2 class="code-line" data-line-start="68" data-line-end="69"> <a id="Shameless_Plugs_68" name="Shameless_Plugs_68"></a>Shameless Plugs</h2> <ul> <li class="has-line-data" data-line-start="69" data-line-end="70"> Scott: <a href="https://www.leveluptutorials.com/pro">Svelte Components Course</a> - Sign up for the year and save 25%!</li> <li class="has-line-data" data-line-start="70" data-line-end="72"> 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="72" data-line-end="73"> <a id="Tweet_us_your_tasty_treats_72" name= "Tweet_us_your_tasty_treats_72"></a>Tweet us your tasty treats!</h2> <ul> <li class="has-line-data" data-line-start="73" data-line-end="74"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="74" data-line-end="75"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="75" data-line-end="76"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="76" data-line-end="77"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="77" data-line-end="78"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="78" data-line-end="79"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="79" data-line-end="80"> 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 Svelte, bleeding-edge tech, best Git processes, Create React App, screencast software, FitBit API, government jobs, Syntax sponsors, and more!
.TECH Domains - Sponsor .TECH is taking the tech industry by storm. A domain that shows the world what you are all about! If you’re looking for a domain name for your startup, portfolio, or your own project like we did with uses.tech, check out.tech Domains. Syntax listeners can snap their.TECH Domains at 80% off on five-year registration by visiting go.tech/syntaxistech and using the coupon code “syntax5”.
 LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
 Mux - Sponsor Mux Video is an API-first platform that makes it easy for any developer to build beautiful video. Powered by data and designed by video experts, your video will work perfectly on every device, every time. Mux Video handles storage, encoding, and delivery so you can focus on building your product. Live streaming is just as easy and Mux will scale with you as you grow, whether you’re serving a few dozen streams or a few million. Visit mux.com/syntax.
 Show Notes 03:15 - I was wondering what you guys think about using the latest of Svelte (svelte-next) in serious projects? Does the improved devEx makes up for the small (but growing) community and lack of libraries? Do you think svelte-next is here to stay or maybe we will get a revamp that breaks backward compatibility in a couple of years, like svelte 2 -> svelte 3?
 8:48 - Git question: My process is often that I want to be able to use my last project as a starting point for my next project, with the new project having absolutely no connection or relationship to the old project. What steps can I take to completely sever any ties to the old project? Bonus question: In the new project I would love to eliminate all commits from the old project and start the new project having just one commit, the initial commit with all the code from the old project.
 11:05 - Is CRA still useful for building actual production-level web apps these days? People seem to be reaching for Next or Gatsby most of the time, and I feel CRA is mainly used for actually learning React/building personal small websites. Your thoughts? Also, for normal CSR, I feel it is better to use something like Next, and fetch data inside your component (eg: for a dashboard) rather than building one with CRA. Am I wrong?
 19:40 - What are your favorite screencast tools? (Linux? Mac? Windows?)
 25:53 - Is it a bad trait for beginners to “give up” easily? By that, I mean instead of taking the time to think of the answer to a problem, they would instead rely on googling the solution and try to understand how it worked afterward.
 27:55 - In pursuit of better health I want to track my weight daily using a smart digital scale. The idea is to automate the process of logging my own weight (e.g. stepping on the scale will update my Apple Health and any other integrations I have). After some searching around I landed on the Aria Air (mostly because I like the design and it has the coolest name). One small problem - it does not sync with Apple Health as it is a product from FitBit. They have an API so I’m thinking about running a serverless function daily, around 8 a.m. after I weigh in, to hit the FitBit API, get the data and push it to Apple Health. This way I can stay in the Apple eco-system whilst happily getting this nice, aesthetic digital scale. Any thoughts on how you would personally implement something like this? P.S. My girlfriend thinks I’m crazy, but I know the tinkerer inside Wes will love this.
 30:26 - I work for the government with good pay and benefits and love where I work, but I feel like I’m missing out. Working in government we are not always working on the bleeding edge of technology. I do try and learn on my own, but it’s hard sometimes if I don’t put it into practice. I do peek at other job openings and get excited about the tech stack and the things they’re doing. I’m just afraid if I leave I won’t have the stability and benefits I would get from working in government. Any tips or thoughts would be appreciated.
 34:24 - Unpopular opinion: Authentication isn’t that hard, but authorization is! What systems have you built to handle when users with specific permissions are allowed (or disallowed) to take actions within your system? What advice would you give to other developers developing permissions-based APIs, assuming their users can have 5-10 different levels of permissions?
 40:21 - What are your thoughts on ReScript as an alternative to TypeScript?
 44:43 - How come you guys moved to two sponsors on a Hasty and three on a Tasty? Not that it’s a big deal - was just curious of it was to keep up with costs or just because you could and then you’d make more? Either way, the show is awesome and really appreciate your opinions on everything!
 48:01 - Have you tried Angular 12? I’d think you’d be pleasantly surprised if you gave it a chance!
 52:20 - I have to copy and paste hundreds of products with six rows of details from a spreadsheet into a web interface because there is no API or CSV upload function for this program. Any recommendation on how to automate data entry into web inputs, navigate pages / click buttons, and toggle between applications? BTW, I scored my first web developer job and have to give you guys credit for steering me in the right direction.
 Links  Svelte

 Create React App

 Next.js

 Vercel

 iShowU

 Descript

 Screenflow

 Aria Air

 FitBit

 Apple Health

 https://www.gov.uk/

 Keystone

 rescript

 TypeScript

 Angular

  Syntax 359: Hasty Treat - Making a Vaccine Bot with JavaScript

 Puppeteer

 uses.tech

 wes.tech

  ××× SIIIIICK ××× PIIIICKS ×××  Scott: SvelteKit

 Wes: Wyze Sprinkler Controller

  Shameless Plugs  Scott: Svelte 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 - Svelte × Bleeding-Edge Tech × Git Process × Screencasts × Government Jobs × Permissions-Based APIs × Rescript × More!

Poslechněte si podcast