development tools

In this Hasty Treat, Scott and Wes talk about updating web apps that have running for a long time — the problems to look out for and how to avoid them.

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.

Show Notes

01:54 - The problem

• This only affects the client-side

05:28 - What are some solutions:

• Do nothing and hope the user refreshes.
• Have a list of assets, or commit hashes. Poll the server periodically, and when there is a new version available:
  • Prompt the user to refresh
  • Just refresh the user (store current state in localstorage and restore)
• Do a custom component, that checks the last time the user has refreshed (or if new version if available). When they click the link, render a regular instead of a pushstate link.
• Use a service worker. They will emit an event when a new version is available. Use the above methods to refresh the user.
• Hot code push.
  • Vuepress has “hot reloading” baked in.

Links

• https://twitter.com/wesbos/status/1306969658751361024
• Notion
• Vuepress
• Meteor

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

Wes and Scott talk all about Static Site Generators!

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.

They are also hiring! netlify.com/careers

Freshbooks - Sponsor

If you are a small business or freelancer check out Freshbooks.com Cloud Accountingand get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section.

Show Notes

1:00

• Woah Scott's Audio!

4:00

• #TastyTreats Winners

8:00

• What are static site generators?

10:00

• Benefits of Static Site Generators
• Gatsby
• StaticGen.com
• Jekyll
• Hugo
• Hexo

24:00

• More complicated apps as static sites
• Next.js Static Export
• Nuxt.js

34:00

• Limitations of a static site
• What happens when you need something on the server?
• Snipcart for Ecommerce
• Algolia
• Awestruct
• Hot Hot Reloading

41:00

• Using with a Headless CMS
• Reloading The Pages

48:00

• WHAT WHAT Scott is Canadian?!

50:00

• Where can you host a Static Site?
• Literally Anywhere
• Github Pages
• Netlify
• rsync
• WPGraphQL

Siiiiiiiick Pixxxx

• Scott: JSRefactor
• Wes: Auto Rename Tag

Shameless Plugz

• Level Up Pro
• ES6 For Everyone

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

Xojo — Sponsor

Xojo is a cross-platform development tool for creating native apps for desktop, mobile, web and Raspberry Pi.

With Xojo you really can write just one version of your app, say, on the Mac, click a button, and have a completely native Windows version too.

Xojo lets you abstract yourself from specific platform details, so you can focus on what makes your app unique. All apps have completely native controls, even if they weren’t developed on that platform. Just use drag and drop to create your user interface, and one language to program the functionality.

Users also include Fortune 500 companies, citizen developers, professional developers, IT, hobbyists and students - anyone who wants to build apps faster.

Listeners of this show get 20% off with the coupon code SYNTAX over at xojo.com/syntax

Show Notes

• Take a drink every time Wes says exactly

01:10

• CSS Grid course is out!

03:50

• The most basic hosting / services
• WordPress.org, Medium, Wix, Squarespace

05:00

• Your Cheap PHP/Apache Hosts
• Endurance International Group owns most of the cheap web hosting world
• cPanel
• Bluehost doing shady stuff
• Siteground seems p good

13:20

• Service Based Hosting
• Heroku
• Zeit's Now
• Galaxy

15:00

• What does "spinning down" mean?
• Deploying to these services

17:20

• How these services do instant cut-overs to new servers
• SSL Certificates

20:00

• You should listen to the Our Stacks Explained episode.
• Zeit's Now Alias
• mLab MongoDB Hosting
• Compose MongoDB Hosting

29:00

• Raw Server Space
• Linode
• Digital Ocean
• Rackspace
• Digital Ocean Droplets
• Digital Ocean's docs are 👌👌👌👌

32:00

• What is Nginx?!
• Let's Encrypt
• Mozilla's SSL config generator
• Caddy Server

38:20

• Docker

40:00

• SPA Apps - React, Angular, Vue...
• How to handle Routing
• Netlify

SICK PICKS

• Wes: Magnetic Magsafe-life USB cable for micro USB, USB-c and Lightning
• Wes: Magsafe-like USB that can handle a 87w Macbook Pro
• Wow: MONGOOSE VS SNAKE VIDEO
• Scott: Bulk Supplements

Shameless Plugs

• Scott: Levelup Tutorials Pro
• Wes: CSS Grid 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

Scott and talk all about different JavaScript utility libraries that make you say "Dang, that's handy!"

Sponsor

• Freshbooks - Get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section.

Show Notes

• Lodash
• Underscore
• You should follow John David Dalton on twitter
• Moment.js
• moment().endOf(‘term’)
• date-fns
• Slugify
• speakingurl
• Fetch API
• Axios
• Cookie Jar
• store.js
• Cross Storage
• Faker.js
• Woah URL.searchParams() is a thing
• Parse URI
• url-search-params-polyfill
• ngrok
• Browsesync
• Async
• Bling.js

Sick Picks

• Essentialism Book
• Essentialism Audiobook
• Satechi Aluminum Multi-Port Adapter
• Satechi all Docks

Shameless Plugs

• Dhanish Gajjar's Instagram
• Paweł Grzybek's Snippet Generator

Twitter

• Wes Bos
• Scott Tolinski
• Syntax

Show Notes

• Wes Bos' Site
• Level Up Tutorials site
• Level Up Tutorials YouTube channel
• Scott Tolinski personal site
• Cloudflare
• Next.js
• Hacker News Example in Next.js
• GraphQL
• Graphcool
• create-react-app
• React dev-tools
• Redux dev-tools
• Preact.js
• React Storybook
• Meteor
• Blaze

Sick Picks

• Wes: Parcel App
• Scott: Fish shell

Shameless Plugs

• Learn Node
• React Native for everyone