Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

Potluck - JS × Web Components × Security × They took our jobs!

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>It’s another potluck episode in which Wes and Scott answer your questions! This month - all things JS, go-to dev stacks, website security and the ever-changing nature of development.</p> <h2><a id="Mlab__Sponsor_9" name="Mlab__Sponsor_9"></a>Mlab - Sponsor</h2> <p>mLab is the leading Database-as-a-Service for MongoDB, powering over half a million deployments worldwide. Wes and Scott use mLab to host their own databases as well as take care of backups, security, scaling and performance. Try out a sandbox database on your next mongoDB project → <a href= "https://mlab.com/">https://mlab.com</a>.</p> <h2><a id="Sanityio__Sponsor_13" name= "Sanityio__Sponsor_13"></a><a href= "http://sanity.io/">Sanity.io</a> - Sponsor</h2> <p><a href="http://sanity.io/">Sanity.io</a> is a real-time headless CMS with a fully customizable Content Studio built in React. Get up and running by typing <code>npm i -g @sanity/cli && sanity init</code> in your command line. Get an awesome supercharged free developer plan on <a href= "https://sanity.io/syntax?utm_source=syntax-fm&utm_campaign=syntax1">sanity.io/syntax</a>.</p> <h2><a id="Show_Notes_17" name="Show_Notes_17"></a>Show Notes</h2> <p>3:33 - Would you ever consider doing a live Syntax show?</p> <ul> <li>Yes! Get tickets at <a href= "https://jamstackconf.com/">JAMstack_conf</a></li> </ul> <p>4:31 - What are your thoughts on Flutter? Does React Native have some solid competition now?</p> <ul> <li>Google’s answer to React Native.</li> <li><a href="https://flutter.io/">Flutter</a></li> <li><a href="https://www.nativescript.org/">NativeScript</a></li> </ul> <p>9:43 - What are your website security essentials for static and dynamic sites? What’s the deal with forms? Is it bad to put a form on my site with no server-side validation?</p> <ul> <li>Not cool. Always do server-side validation.</li> <li><a href="https://www.netlify.com/">Netlify</a></li> <li><a href="https://www.cloudflare.com/">Cloudflare</a></li> </ul> <p>14:55 - Do you have a ‘go-to’ stack when building new web apps? If so, what is it and how would you go about choosing the right stack for the project?</p> <ul> <li>Scott - Gatsby for sites / Meteor Apollo, React, MongoDB for db needing accounts sites</li> <li>Wes - Next.js, Express Backend + either MongoDB, DiskDB or Prisma (or hasura)</li> </ul> <p>21:51 - What are your thoughts on 100 Days of Code Challenge?</p> <ul> <li>Consistency and accountability.</li> <li>The best way to get good.</li> <li><a href="https://www.100daysofcode.com/">100 Days of Code</a></li> </ul> <p>25:05 - I really have been learning a lot of React recently and have been wondering what is the difference between Next.js, Gatsby.js and vanilla React?</p> <ul> <li> <p>Dynamic vs static. What are your needs, how often does the content change.</p> </li> <li> <p><a href="https://nextjs.org/">Next.js</a></p> <ul> <li>Use for dynamic needs</li> <li>It can do static exports too</li> <li>Convert to markdown</li> <li>Nothing special other than Routing and SSR (Server request getInitialProps)</li> </ul> </li> <li> <p><a href="https://www.gatsbyjs.org/">Gatsby.js</a></p> <ul> <li>Use for static needs</li> <li>Gatsby has lots of adapters</li> </ul> </li> </ul> <p>30:38 - What are websockets and when should they be used?</p> <ul> <li>A request that is always open - it responds to events instead of pinging, pushing or pulling data</li> </ul> <p>35:15 - I would love to hear your take on PWAs. Do either of you have any experience with building or using them?</p> <ul> <li><a href= "https://syntax.fm/show/050/progressive-web-apps">Syntax Ep 50 - Progressive Web Apps</a></li> </ul> <p>40:16 - I’m a nervous newbie who’s concerned about doing a web app that accepts payments or sensitive information. How can I know I’ve done everything to create a secure website and also protect myself from being sued by the client if their website gets hacked? I’m trying to be a jam stack developer so I’m looking at things like <a href= "https://snipcart.com/">Snipcart</a> and <a href= "https://stripe.com/">Stripe</a></p> <ul> <li>Don’t save sensitive info in plain text. Use services that make it tough to do that until you are confident.</li> <li>Look up PIPEDIA</li> </ul> <p>43:23 - What is a JavaScript generator? I heard that async/await creates a “generator” under the hood.</p> <ul> <li>Pausable function that can return multiple values - call .next() on it</li> </ul> <p>46:54 - Are web components worth it in 2018?</p> <ul> <li><a href="https://www.webcomponents.org/">Web Components</a></li> <li>Polymer</li> <li>Svelte</li> </ul> <p>49:52 - How soon the designers replace React Developers with the invent of tools like Framer X?</p> <ul> <li>Not soon.</li> <li>Your job is changing and will continually change</li> <li><a href="https://www.youtube.com/watch?v=DEiWU1MbBfk">SouthPark - They Took Our Jobs!</a></li> </ul> <p>56:52 - Have you, or anyone you know ever thought of quitting the industry because of difficulties you have run into?</p> <h2><a id="_SIIIIICK__PIIIICKS__90" name= "_SIIIIICK__PIIIICKS__90"></a>××× SIIIIICK ××× PIIIICKS ×××</h2> <ul> <li>Scott: <a href="https://amzn.to/2MFATPj">EGO Lawn Tools</a></li> <li>Wes: <a href= "https://www.youtube.com/channel/UCl4-WBRqWA2MlxmZorKOV7w">B is for Build YouTube Channel</a></li> </ul> <h2><a id="Shameless_Plugs_95" name= "Shameless_Plugs_95"></a>Shameless Plugs</h2> <ul> <li><a href="https://leveluptutorials.com/pro">Scott’s Level Up Pro Subscription</a></li> <li><a href="https://advancedreact.com/">Wes’ Advanced React Course</a></li> </ul> <h2><a id="Tweet_us_your_tasty_treats_100" name= "Tweet_us_your_tasty_treats_100"></a>Tweet us your tasty treats!</h2> <ul> <li><a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li><a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li><a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li><a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li><a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li><a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li>Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets</li> </ul>

It’s another potluck episode in which Wes and Scott answer your questions! This month - all things JS, go-to dev stacks, website security and the ever-changing nature of development.
 Mlab - Sponsor mLab is the leading Database-as-a-Service for MongoDB, powering over half a million deployments worldwide. Wes and Scott use mLab to host their own databases as well as take care of backups, security, scaling and performance. Try out a sandbox database on your next mongoDB project → https://mlab.com.
 Sanity.io - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get up and running by typing npm i -g @sanity/cli && sanity init in your command line. Get an awesome supercharged free developer plan on sanity.io/syntax.
 Show Notes 3:33 - Would you ever consider doing a live Syntax show?
 Yes! Get tickets at JAMstack_conf

 4:31 - What are your thoughts on Flutter? Does React Native have some solid competition now?
 Google’s answer to React Native.
 Flutter
 NativeScript
 9:43 - What are your website security essentials for static and dynamic sites? What’s the deal with forms? Is it bad to put a form on my site with no server-side validation?
 Not cool. Always do server-side validation.
 Netlify
 Cloudflare
 14:55 - Do you have a ‘go-to’ stack when building new web apps? If so, what is it and how would you go about choosing the right stack for the project?
 Scott - Gatsby for sites / Meteor Apollo, React, MongoDB for db needing accounts sites
 Wes - Next.js, Express Backend + either MongoDB, DiskDB or Prisma (or hasura)
 21:51 - What are your thoughts on 100 Days of Code Challenge?
 Consistency and accountability.
 The best way to get good.
 100 Days of Code
 25:05 - I really have been learning a lot of React recently and have been wondering what is the difference between Next.js, Gatsby.js and vanilla React?
  Dynamic vs static. What are your needs, how often does the content change.

 Next.js
 Use for dynamic needs
 It can do static exports too
 Convert to markdown
 Nothing special other than Routing and SSR (Server request getInitialProps)

 Gatsby.js
 Use for static needs
 Gatsby has lots of adapters

 30:38 - What are websockets and when should they be used?
 A request that is always open - it responds to events instead of pinging, pushing or pulling data
 35:15 - I would love to hear your take on PWAs. Do either of you have any experience with building or using them?
 Syntax Ep 50 - Progressive Web Apps
 40:16 - I’m a nervous newbie who’s concerned about doing a web app that accepts payments or sensitive information. How can I know I’ve done everything to create a secure website and also protect myself from being sued by the client if their website gets hacked? I’m trying to be a jam stack developer so I’m looking at things like Snipcart and Stripe
 Don’t save sensitive info in plain text. Use services that make it tough to do that until you are confident.
 Look up PIPEDIA
 43:23 - What is a JavaScript generator? I heard that async/await creates a “generator” under the hood.
 Pausable function that can return multiple values - call.next() on it
 46:54 - Are web components worth it in 2018?
 Web Components
 Polymer
 Svelte
 49:52 - How soon the designers replace React Developers with the invent of tools like Framer X?
 Not soon.
 Your job is changing and will continually change
 SouthPark - They Took Our Jobs!
 56:52 - Have you, or anyone you know ever thought of quitting the industry because of difficulties you have run into?
 ××× SIIIIICK ××× PIIIICKS ××× Scott: EGO Lawn Tools

 Wes: B is for Build YouTube Channel

 Shameless Plugs Scott’s Level Up Pro Subscription
 Wes’ Advanced React Course
 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 - JS × Web Components × Security × They took our jobs!

Poslechněte si podcast