Syntax - Tasty Web Development Treats on Smash Notes

Syntax - Tasty Web Development Treats podcast.

May 17, 2020

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.



Recently updated notes

Wes Bos and Scott Tolinski details their email management strategies for overwhelmed creatives.

Updated on June 20

Key points in this episode

In this episode of Syntax, Scott and Wes talk about what they wish existed in React!

DevLifts - Sponsor

Refactor your body with DevLifts. They have a few different programs: 1) fit.start (normally $19/month) has a few options (lean, bodyweight, and strong). Workouts are delivered via email each month, with access to a Slack community for questions and accountability. 2) Premium (normally $199/month) is a custom-tailored option, where you get your workouts and nutrition advice after answering a questionnaire. They also check in with you each week via Slack to see how it's going and make changes if necessary. Get 50% off fit.Start plans with code SYNTAX and 50% off Premium with code TASTY.

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.

Show Notes

React

03:53 - Unmount delay for animation

06:20 - Suspense with SSR released (or not because I think they are shelving it)

09:24 - File based components

  • Like Svelte and Vue
  • This would look like a file with a special scoped tag per page.

11:50 - Prevent Default shortcuts

13:00 - No more useIsoLayoutEffect

  • useLayoutEffect on SSR should just work without a custom hook
  • Simple data fetching strategy based on promises

15:52 - Recommended hooks

  • E.g. "here is the best way to do things"
  • Official list of best practice hooks

18:25 - A good form strategy

  • Bind inputs to state directly without any change handlers
  • Inputs and forms all around need more magic - it's painful

20:43 - Write once deploy everywhere

  • Not likely ever
  • E.g. automatic transformation into react-native (obviously not going to happen)

22:28 - Compile time directives

25:11 - Slots instead of children

  • Allows for things like named slots more explicit than children

JSX

26:44 - Removal of htmlFor, className and all other abominations of html

29:09 - Import Raact from React for JSX to work

32:31 - Better conditional / if statement syntax

33:09 - Fragments by default

  • Just do it for us - the error message already knows

33:54 - Automatic key ids

  • If mapping an object, check for common _id or id

36:36 - Simple scoped CSS built in

37:29 - Short hand for props with same name is prop={prop}

39:00 - Prop interpolation without backticks: name="$first $last"

  • Or just backticks without brackets name=${first} ${last} instead of name={${first} ${last}}

Tooling

39:43 - Story for typescript/prettier/babel

40:11 - Automatic a href client side routing

41:51 - Scaffolding and component generation

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Key points in this episode

In this Hasty Treat, Scott and Wes talk about rural and mobile internet — options, tools, and things to be aware of.


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

05:04 - Satellite

08:43 - WISP

  • Can be different techs - LTE, LOS, Long range WiFi
  • Local towers put up in town
  • 900mhz, 5 + 2.5gz
  • Pretty cowboy

12:09 - Cellular LTE

  • Goes over the cell signal
  • Can be super fast or slow depending on your reception
  • Cell plans can be rate limited

12:52 - Routers

17:03 - Modem

  • Two types of modems:
    • Host modems
    • PCI-e / M2 Cards
  • Sierra Wireless
  • AT Commands
  • Band locking
  • Enable carrier aggregation
  • Get detailed values on modem power
  • See cell tower IDs

23:16 - Antennas

  • Omni
  • Yagi
  • Gotta get them high
  • Lots of connectors - Type N, SMA, RP SMA

25:47 - Boosters

  • Adds noise

26:04 - Plans

29:27 - Speeds

  • Depends on tower, congestion
  • Depends on pre paid, post paid or first responder
  • Depends on if you hit the cap or not

30:15 - Tools:

Links

Tweet us your tasty treats!

Key points in this episode

It’s another potluck! In this episode, Scott and Wes answer your questions about libraries vs frameworks, Firefox, who would win a thumb war, and more!


Prismic - Sponsor

Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.

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.

Show Notes

01:37 - Q: Why does React bill itself as a library instead of a framework?

03:14 - Q: Are y’all still using Firefox now that it has been six months?

06:30 - Q: Is it possible to do a hasty treat regarding the Brave browser? Would love to hear your opinion on the tech, view on the approach and why we could need another browser in 2020. Peace!

09:34 - Q: Who would win in a thumb war, Wes or Scott?

10:56 - Q: What are your thoughts on XState and state machines for managing state in apps? I’ve been super interested in trying to use it, eager to hear what you both think. Also, wondering if you’d have any recommendations on how to use it with Apollo, whether to use XState’s internal context to store app state, or use the Apollo cache.

14:53 - Q: Should I start a new project with jQuery or React?

17:21 - Q: I’m a young teen (<16) with a passion for all things web dev. However, without being able to legally have a job, I’m unable to make any money and am therefore running on a $50 Raspberry Pi and a 10+ year old monitor. As much as I love my Pi, just running npm install can be agonizing sometimes, not to mention the amount of space node_modules take up on a device with 16GB of storage! So basically, any pointers on getting income (and practice!) in the web development field when your under 16? And just in general, what advice do you have to young teen learning to code? Thanks in advance! P.S. You know you’ve got something going when a teenaged boy would rather listen to your podcast than watch Star Wars or Marvel with his friends! ;) So keep up the amazing work.

22:12 - Q: Is it worth my time to learn design patterns in JavaScript?

24:28 - Q: I have a question regarding Figma design to HTML/CSS conversion. When translating the design into code, do you keep the font-size, padding, height of images the same as defined in design or do you take something different? Let’s suppose top nav bar is 115px, then do you make it the same as well, or something else?

29:03 - Q: You both are great at technical communication — how do you get better at technical communication when self-learning?

33:06 - Q: What tools (or other methods) do y’all use to manage spinning up new projects with all the assorted directory structures, tools, and configs, you prefer? For example, when I start a new project, these days I like TS, Prettier, ESLint, and want those to play nicely together. I find I’m constantly copying files from one project to the other but haven’t found a good abstraction that allows me to setup a new project with the assorted files. Bonus points for a solution that can keep shared configs and deps up to date.

36:10 - Q: I am 26 years old and working a full-time job. I am currently looking at the possibility between work and spending time with my partner. I get maybe an hour a week (maybe two) to focus on learning Javascript. I feel like it is taking me literally forever to get anywhere, and when I do learn something, there is always a better way of doing it! And then when I do sit down and get the time I just feel like I have no direction. Your podcast has been giving me small boosts of motivation, so thanks for that. But is 26 too old to make a move into development?

39:39 - Q: How do you step up a web development project to an enterprise-level? There are so many simple tutorials and quick wins all over the internet, but how do you get more knowledge about bigger enterprise-ready technical stuff. E.g. How to organize a Vue app with >60 different pages? How do you organize the REST-ful API? How do you resolve dependencies between API endpoint 1 and API endpoint 2? How do you share information between multiple components in VUE-State-Management?

42:44 - Q: I’ve done Wes’ NextJS course and he uses Styled Components instead of Next’s own styled-jsx. What are your opinions on styled-jsx, and why you do (or do not) use it?

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Key points in this episode

In this Hasty Treat, Scott and Wes talk about CSS functions, what they are, how to use them, and more!


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

02:13 - attr()

04:14 - calc()

06:05 - :is()

07:20 - sin, cos, tan, acos, asin, sqrt, pow

08:52 - clamp()

12:13 - minmax()

14:24 - fit-content()

15:35 - filter

  • blur()
  • grayscale()
  • sepia()
  • opacity()
  • contrast()
  • url()

Links

Tweet us your tasty treats!

Key points in this episode

In this episode of Syntax, Scott and Wes continue their discussion of fundamentals — Bash, text editors, Regex, Github, Dev tools, and more!


Sanity - Sponsor

Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.

Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.

Show Notes

03:17 - Typing

07:02 - Bash / Terminal

  • WSL
  • What directory am I in?
  • SSH
  • How to copy / paste / remove files and folders
  • z
  • Nice prompt (ZSH or fish)
  • Know how to get out of VIM/VI and how to use it for fast editing
  • Know how to make an alias

13:19 - Text editors

  • Command Palette
  • Keyboard shortcuts (just look them up!)
  • Click through to source
  • Multiple cursors
  • Find/replace master
  • Find and replace across files

18:37 - Regex

22:03 - OS Basics

  • Switching apps
  • Unzipping
  • File organization
  • Searching for/in files

28:50 - Googling

  • Learn how to google well
  • What words to use and what not to
  • Basic operators “-”, ",
  • Use Reddit: for opinions
  • Add dates - example: Library has been out for 6 months, and you can filter out

33:08 - Navigating GitHub

  • Explore for finding interesting projects and creators
  • Know how to clone a repo
  • Create repo and push to it
  • https://octolinker.now.sh/ to click through to files
  • Use Octotree to navigate

36:20 - Navigating source

  • View source
  • Where to start in a repo (ie the entrance to a project)
  • Most code repos are easier to read and understand than you give yourself credit for - it will improve your code reading and parsing skills
  • Access to the minds of other developers

37:31 - Knowing how to pick the right dev tools pane

  • Is it network based?
  • Does it happen once you click something?
  • Toggling CSS on/off
  • When console logging makes sense vs using a better tool

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

  • Scott: All Courses - Sign up for the year and save 25%!
  • Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!

Tweet us your tasty treats!

Key points in this episode

In this Hasty Treat, Scott tells Wes about his new Linux laptop — what it is, why he did it, pros and cons, and more!


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:38 - Why?

04:20 - What is System76?

08:53 - What is Pop OS?

09:41 - How has Linux compared to Mac?

  • Pop OS is a great distro with lots of features, but command line knowledge is still necessary

10:07 - I can still run:

10:43 - I can’t run:

13:46 - What do I miss?

  • Trackpad gestures
  • It’s not as polished of an experience

Links

Tweet us your tasty treats!

Key points in this episode

In this episode of Syntax, Scott and Wes talk with Ian Ramzy about ZipCall.io — how he built it, why, and some of the surprising choices he made along the way.


Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.

Stackbit - Sponsor

Build modern JAMStack websites in minutes. Stackbit lets you combine any theme, site generator and CMS without complicated integrations. Join the beta today by visiting stackbit.com/syntaxfm.

Guests

Show Notes

02:08 - Who are you and what’s your background?

05:34 - Why did you build this?

13:55 - What is it built in?

  • Express server
  • Web sockets

16:10 - Why is there no tooling?

 VideoChat.peerConnection = new RTCPeerConnection({         iceServers: token.iceServers,       });  

24:31 - How does your server deal with an influx of users?

27:11 - How do each of these features work?

  • Auto-scaling video quality
  • Text chat
  • Screen sharing
  • Picture in picture
  • Live captions
  • Loading animation
  • No download required, entirely browser based
  • Direct peer to peer connection ensures lowest latency
  • Single use disposable chat rooms

41:32 - Have you looked into any of the recording APIs?

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Key points in this episode

In this Hasty Treat, Scott and Wes are back with part 2 on how to develop for slow internet connections.


Kyle Prinsloo Freelancing - Sponsor

Kyle Prinsloo teaches you everything you need to know about freelancing, including how to quit your job, earn a side-income and start taking control of your life. Check it out at studywebdevelopment.com/freelaning. Use the coupon “SYNTAX” and get 25%.

Show Notes

03:27 - Images

  • Resize client-side when uploading
  • Lazy load or progressive JPG
  • Width + height so the content doesn’t shift with placeholders
  • Compress your images - lossless and lossy
  • Use SVG where possible

08:33 - Scripts + CSS assets

08:51 - Video

  • Variable-rate video is key

09:13 - Connections that go in-n-out a lot

  • Save form state on page refresh
  • Show UI when user goes offline
    • window.addEventListener('offline', updateOnlineStatus);
    • window.addEventListener('online', updateOnlineStatus);
  • Retrying in _____

10:27 - Service workers!

  • Serves up local cache initially

12:05 - Fonts

  • Font-display CSS https://css-tricks.com/font-display-masses/
  • Sometimes possible: tree shake your fonts - load only the characters you need
  • font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

14:04 - CSS tricks

  • Text over background image — make sure you also set a color so the text will show while the image is loading

14:37 - Testing slow connections

  • Dev tools
  • Mimic a speed, or 3G

Links

Tweet us your tasty treats!

Key points in this episode

In this episode of Syntax, Scott and Wes talk about headless content management systems — why you might want to use one, things you should take into account, and more!


Sanity - Sponsor

Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.

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.

Show Notes

02:38 - What and why

  • A headless CMS doesn’t mean you have to use a static site generator
  • A headless CMS has an API:
    • REST
    • GraphQL
    • GROQ
  • A headless CMS can pipe its content into:
    • Static Site on build - like Gatsby
    • An app on run/refresh
    • An existing website - widget
  • What makes a CMS? Do you need a UI?
  • What is the threshold?
  • Is a hotdog a sandwich?
  • Things to think about when choosing an API
    • Auth - Rules + roles + levels
  • How easy is it to create new data types?
    • Is it code or UI?
    • Can my mom use it?
  • Can you create one-off content types? (e.g. settings pages)
  • Custom workflows
    • dRafts, revisions, roll backs
  • How are images handled? Do you need another service for that?
  • Pre-determined UI
    • Is custom UI possible?
    • Two-way relationships?
    • Tags?
  • Data validation?
    • UI + API?
  • Hosting?
  • Pricing?
  • Content movability?
    • Can you get your data out?
    • Schemas
    • Users
    • Revisions
  • CORS or realtime API?
  • APIs
    • Can you insert data via the API? (or just pull)
    • Node API
    • Importing data

24:37 - Hosted

36:59 - Self-Hosted

44:33 - API (BYOUI)

47:37 - Git Based

50:30 - Other

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Key points in this episode

In this Hasty Treat, Scott and Wes talk about how to develop for slow internet connections.


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

02:26 - Types of Slow connections

  • Slow upload
  • Slow download
    • This could be that your kids are watching a show and your partner is on a zoom call
  • High latency
  • Intermittent

07:47 - Loading UI

  • Show loading UI for everything, but after X seconds
  • Page transitions on SPAs
  • Form switches - enter country, get list of provinces/shipping/whatever

11:58 - Account for XHR failures

  • Sometimes I’m in a loading state forever
  • State machines will account for this

13:26 - “Still working” timeouts

  • Some sort of timeout so the user can get feedback

Links

Tweet us your tasty treats!

Key points in this episode

It’s another potluck! In this episode, Scott and Wes answer your questions about kids learning to code, React sub-components, why it’s so hard to scale, new frameworks, data structures, and more!


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.

Prismic - Sponsor

Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.

Show Notes

03:11 - Q: Do you think Selenium could get replaced by Cypress in the future?

16:16 - Q: When blogging about code, you need a good way to display snippets of code in your blog post. What are good ways to do that? Should you embed something like a GitHub Gist, or setup something specific for your blog?

11:13 - Q: Do my students NEED to understand recursion to be effective JS devs?

15:41 - Q: What do you think about developing using just an iPad + keyboard + external monitor? To try this, I just moved all my environment to a VM on the cloud and configured code-server (a VSCode accessed by the web https://github.com/cdr/code-server). Works pretty well! The only problem now is that the iPad has a bad resolution on the external monitor when I’m using the browser.

22:43 - Q: I often find myself refactoring sub-components out of a component once it gets too big. This however is very tedious, especially if the sub-component is tightly coupled with the component and thus needs to take a lot of props. Do you have any suggestions? Do you just let the component grow bigger in a case like that?

26:15 - Q: [Insert Hoser related greeting here], during quarantine I’ve tried to come up with an outline for creating a goofy Pokémon app with my boys (age 8 and 5). They’re obsessed with Pokémon right now and I figure this could be a fun little group activity. I see how much they struggle focusing on some of the online instruction they have through school, and they’re a bit fatigued with “learning” right now. We tried doing a bit of scratch/scratch jr. I figured a fun-themed project could help them stay engaged with learning, but I’m struggling with where to start. How would you go about creating a course/activities (like Wes’ Javascript 30 course) specifically designed for primary/elementary aged kids?

30:52 - Q: How much should someone who wants to work as a web developer (starting in a junior position) know about data structures and algorithms? Should I practice algorithms and do questions before applying for jobs?

33:53 - Q: I’m working with a friend to start up a website for our YouTube channel, and we’re getting into podcasts too (not tech-related so no competition, no worries). I’m thinking about trying to host my own RSS feed for podcasts to save some bucks. Am I crazy?

36:27 - Q: Do you guys name your colors in terms of the color or the use of the color. For example, say you styled all your links to be purple. Would you name that color “purple” or “link”?

41:00 - Q: I’ve been listening to you for about a month and really dig it. I’m working on an app that will require a couple of different databases. I’ll need a database for user information, and a larger database for application data. The app does some analytics stuff, so data is critical. I’m getting lost in the world of hosted database options (mLab, Digital Ocean, etc.) and big cloud providers (AWS, Google, etc.). Could you guys talk a little bit about how you choose database hosting? Bonus question - have you ever used Auth0 or Okta for user authentication?

45:09 - Q: I’m a bit confused about using GitHub. What happens to the files that are ignored, but required for development? What’s the best practice for backing up both? I have used .env files, but not too sure how it works if it’s in the gitignore and the site is deployed via GitHub (like with Netlify). Right now I have a backup folder on my hard drive and I back up both the dev and the live versions with a timestamp, whenever I do a new ‘release’. Also, you spoke about Jetpack, and I’d be curious what’s the best way to do this with a cronjob for example.

48:50 - Q: I was laid off in early April because of COVID-19. I’ve been trying to file unemployment since then. The state unemployment office said they were launching an updated website for filing claims on Friday, April 24th. At 9:00am that day, they ran a banner saying demand has been so high that it’s affecting the process ‘despite rigorous testing.’ Why is this so hard to scale?

55:57 - Q: What is your take on all of these rails-like server side rendered React and GraphQL frameworks? Here is another one built by Michael Jackson, Ryan Florence and some others: https://twitter.com/remix_run. This of course is in addition to Redwood and Blitz.

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Key points in this episode

In this Hasty Treat, Scott and Wes talk about IE11 — should you support it, what to be aware of if you do, and what data is important in making that decision.


Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.

Show Notes

03:21 - When was IE11 made?

03:48 - When is it deprecated?

04:44 - How to make the decision?

  • Look at your analytics
  • Look at your users
  • Is a 2% drop in sales worth it?

09:00 - What doesn’t IE11 have? What can you start using now that IE11 is gone?

  • Modern Flexbox
  • CSS Grid
  • CSS Variables

10:26 - Can you partially support it?

  • Major features
  • Progressive enhancement
  • Gracefully degrade
  • Polyfill

11:16 - What about testing?

Links

Tweet us your tasty treats!

Key points in this episode

In this episode of Syntax, Scott teaches Wes about Svelte and Sapper — general premise, best practices, and more!


Sanity - Sponsor

Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.

Stackbit - Sponsor

Build modern JAMStack websites in minutes. Stackbit lets you combine any theme, site generator and CMS without complicated integrations. Join the beta today by visiting stackbit.com/syntaxfm.

Show Notes

03:14 - General premise

  • Sapper compiles away, removing framework code from build
  • Component & Props based
  • Easy reactivity
  • Built-in tools like animation
  • Template-based

07:57 - Svelte 101

  • .svelte files
  • Files can include , <style>, and straight-up CSS</li> <li class="has-line-data" data-line-start="29" data-line-end="30"> Variables are used in templates via {var} - <img {src} /> even works</li> <li class="has-line-data" data-line-start="30" data-line-end="32"> Import component and use just like React and Vue</li> </ul> <p class="has-line-data" data-line-start="32" data-line-end="33"> 10:49 - Stylin’</p> <ul> <li class="has-line-data" data-line-start="34" data-line-end="35"> All styles are scoped by default</li> <li class="has-line-data" data-line-start="35" data-line-end="36"> global() to wrap around global declarations</li> <li class="has-line-data" data-line-start="36" data-line-end="38"> Language type sass to use sass</li> </ul> <p class="has-line-data" data-line-start="38" data-line-end="39"> 12:22 - Reactivity</p> <ul> <li class="has-line-data" data-line-start="40" data-line-end="49"> Baked in <ul> <li class="has-line-data" data-line-start="41" data-line-end="42"> let count = 0</li> <li class="has-line-data" data-line-start="42" data-line-end="43"> count = count + 1 will reactively update in template</li> <li class="has-line-data" data-line-start="43" data-line-end="44"> variables are essentially state</li> <li class="has-line-data" data-line-start="44" data-line-end="45"> $: double = count + 2 - to create a reactive variable that updates when another variable updates</li> <li class="has-line-data" data-line-start="45" data-line-end="46"> $: console.log(count) = will run whenever count is update a-la useEffect</li> <li class="has-line-data" data-line-start="46" data-line-end="47"> $: if (count >10) = same… reactive if</li> <li class="has-line-data" data-line-start="47" data-line-end="49"> <code><input bind:value={name} ></code> updates let name in script</li> </ul> </li> </ul> <p class="has-line-data" data-line-start="49" data-line-end="50"> 15:55 - Props</p> <ul> <li class="has-line-data" data-line-start="51" data-line-end="52"> Same was React, but need to be exported before they can be used</li> <li class="has-line-data" data-line-start="52" data-line-end="53"> Seems counterintuitive, but you get over it quickly</li> <li class="has-line-data" data-line-start="53" data-line-end="55"> EZ defaults <code>export let answer = 'a mystery';</code></li> </ul> <pre data-initialized="true" data-gclp-id="5"> <code class="has-line-data" data-line-start="56" data-line-end= "62"><script> import Nested from './Nested.svelte';
          export let answer = 'a mystery';   

    The answer is {answer}

    20:08 - Template logic

    • If statements
      {#if user._id}
      {/if}

    • Loops
      {#each cats as kittens}

    • Promise tags

     {#await promise}     

    ...waiting

    {:then number}

    The number is {number}

    {:catch error}

    {error.message}

    {/await}

    23:12 - Events


    • On directive
    • Functions can also be inline
    • Modifiers
          Click me   

    26:11 - Baked-in goodies

    • Animation
    • Dimensions
     
    {text}
    • Lifecycle methods
    • Advanced State Via Stores
      • A store is simply an object with a subscribe method that allows interested parties to be notified whenever the store value changes.
    • import { writable } from ‘svelte/store’;
    • export const count = writable(0);
    • count.update(0)
    • Slots
    • React helmet like stuff, ie

    36:39 - Sapper

    • Similar to Next.js
    • Folder routes
    • Static export with all of the good stuff like service workers and preloading

    Links

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    Tweet us your tasty treats!



Key points in this episode

In this Hasty Treat, Scott and Wes talk about Scott’s new website!


Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.

Show Notes

02:25 - Relaxed fit development

  • Not concerned with it being perfect
  • Will act as a loose digital garden, so it needs to be flexible
  • Keep my talks and podcast appearances somewhere

04:40 - The stack

  • Svelte / Sapper
  • CSS variables
  • Static generation with markdown
  • No API
  • Hosted on Netlify

08:15 - Why?

  • I dropped that db life in 2015 and never looked back
  • I’m a developer - markdown is good for me
  • I like a playground for ideas, so the new site throws out any idea of formality and dives into being a playground for myself.
  • Full page animations. Orchestration. Fully SSG.
  • Code is painless to add to — adding a blog post is as easy as creating a markdown file

Links

Tweet us your tasty treats!

Key points in this episode

In this episode of Syntax, Scott and Wes talk about what is new in Javascript — a whole bunch of new stuff that you can use now and in the next sixth months or so.


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.

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.

Show Notes

ES2019

04:03 - Array.flatMap()
05:30 - Array.flat()
07:37 - Array.fromEntries()
09:50 - String.trimStart() and String.trimEnd()
11:23 - Function.toString()
11:57 - Object Key Order

  1. Integer keys in ascending order (and strings like “1” that parse as ints)
  2. String keys, in insertion order (ES2015 guarantees this and all browsers comply)
  3. Symbol names, in insertion order (ES2015 guarantees this and all browsers comply)

ES2020

14:50 - Big int
18:09 - Nullish coalescing
20:57 - Optional Chaining
24:55 - promise.allSettled
25:33 - Dynamic import
27:14 - string.matchAll(regex) and string.replaceAll
29:30 - globalThis
30:44 - Module Namespace Exports
33:11 - Navigator.share() API
36:34 - Async Hooks
37:39 - Pipline Operator
39:59 - Top Level Await

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Key points in this episode

In this Hasty Treat, Scott and Wes talk about Wes’ new website - its first update since 2014!


Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.

Show Notes

05:04 - The stack

  • Gatsby
  • Styled components
  • React
  • MDX

07:04 - The content

  • Blog posts
  • Twitter Hot Tips

09:54 - Styling

  • Styled components
  • Less

16:54 - MDX

17:45 - Serverless functions

Links

Tweet us your tasty treats!

Key points in this episode

In this episode of Syntax, Scott and Wes talk with Heather Payne about bootcamps — how to get the most out of them and what to look out for!


Sanity - Sponsor

Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.

Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.

Guests

Show Notes

07:52 - Bootcamps

  • What do you teach in the bootcamp?
  • How long is it?
  • SHow do you validate and pick topics?
  • What makes a good bootcamp student?
  • Do bootcamps work?
  • How do you get the most out of a bootcamp?

20:45 - Finding a job

  • How do you prepare for an interview?
  • What qualities, outside of technical skill, do you see in developers who get jobs easily out of the bootcamp?
  • Do you see any common traits in the few that don’t get jobs?
  • What about getting a job in the current climate?

43:30 - Other

  • How do income share agreements work?
  • Pay what you can income share agreements
  • How do you tell if a bootcamp is good?

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Key points in this episode

In this Hasty Treat, Scott and Wes talk about javascript events, and how to avoid some common pitfalls!


Prismic - Sponsor

Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.

Show Notes

02:23 - Event bubbling

  • Some events bubble, some don’t
  • Clicks bubble
  • Mouseevents bubble
  • Focus doesn’t bubble

04:10 - Event capturing

  • Capture: down, bubble up
  • Canceling: prevent default
  • target` vs currentTarget
  • currentTarget is what got clicked
  • target is what you listened for the click on
  • event.isTrusted
  • addEventListener once: true

Links

Tweet us your tasty treats!

Key points in this episode

It’s another potluck! In this episode, Scott and Wes answer your questions about custom hooks, static site generators, code management, CSS, and more!


Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.

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.

Show Notes

04:02 - Q: Could you do a quick overview of how to effectively use a platform like Cloudinary? I have a Gatsby site with a lot of images and want to use something like Cloudinary to help with optimization, but the docs aren’t completely clear to me how to get the most out of their service.

10:58 - Q: What kind of CSS pre/post-processor you usually use? What are the pros and cons of pre-processor (SASS, SCSS, LESS) and post-processor (PostCSS)?

16:22 - Q: What is the most effective way to share a project with the internet and get feedback? I’m in a phase right now where I’m building loads of new web things with React and JavaScript, but the only place I can think to share them is my Twitter, where only like 3 people will see them.

18:35 - Q: What are your thoughts on classes in JavaScript? Do we still need them in 2020, or has the functional programming paradigm made them largely unnecessary? Does the answer change based on the size of the project and/or team?

23:56 - Q: Does ES2020 have var? Also, is ES2020 a real spec or just a term people are using?

27:37 - Q: Have you tried gqless, a graphql client alternative to something like Apollo client? Very interesting idea for clean and maintainable code.

29:15 - Q: What are the main differences in working for a software agency and a software product company? Pros and cons of each?

33:53 - Q: Advice for having static blog with minimal moving parts? I used to have a static blog but I eventually got sick of touching it because instead of writing content I often got stuck keeping up with all the dependencies involved.

38:18 - Q: Micro Frontends—is it the solution to rewriting legacy components?

42:16 - Q: I am relatively new to web development and I feel like it is very difficult to “catch up” with JavaScript. It seems like whenever I try to contribute an open source, I can’t figure out the code because they’re using newer (and presumably better) ways of doing things. How can I get up to date with everything that’s going on in the JavaScript world? Also, at what point should I start learning a front-end framework?

46:56 - Q: My team and I are starting to write pretty complicated custom hooks gathering data from a number of different endpoints and/or polling certain endpoints on a continuous interval timer before returning it to the component that needs the data. Since this is the case some hooks have gotten fairly large with multiple functions inside of them getting called to get/manipulate all the data, or multiple hooks using those same functions to get slightly different data. Is it a best practice to keep all those hooks together in one file if they support all the hooks? Or should we break the hooks into separate files and move the helper functions into another file and just have one hook per file?

51:10 - Q: Any tips for navigating projects with bad project managers? Working with non-technical agency project managers makes it pretty difficult to effectively plan and allocate time to ensure that all of the projects are done on time, on budget, and done well. It’s important to me to maintain an optimistic attitude in the organization, but sometimes I’d love to just hit 'em with the 'ol “Peace out” and go smoke some pork butt. Wondering if you guys have any good experience managing these types of projects?

55:45 - Q: I’m committing often and early, but this means that I end up writing the same vague git commit message over and over again. I know the solution to the problem is to just be more verbose, but it’s a difficult habit to break. Any advice?

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Key points in this episode

In this Hasty Treat, Scott and Wes talk about getting buy-in from your team when using new tools.


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

02:53 - Q: "I wrote a long message to our architect asking if I could install prettier into our component generator for new projects moving forward, and the response I got was: “Don’t auto-format, not all devs want that and prettier doesn’t always format the way I like, I don’t want to enforce that on devs.”

This sucks because I know the codebase would benefit so much. Right now every time I visit a project so much of the code is not spaced out that it makes it hard to read quickly for me, lots of the React code is bunched up with no spacing - it’s a mess to read for me especially because I am very organized. If this was your situation where you know a new tool/standard is something that can help a lot but it’s shot down, do you just give up? I don’t know how to respond to this because I am the only dev who has ever proposed this at my company and I just started here.

05:03 - Lots to unpack here

  1. Some senior devs don’t like getting suggestions from other devs. There is a sense that these things change quickly and I bet there is some anxiety over that at play here.
  2. Senior devs know better than to slap new tools into the codebase because they have probably done it and regretted it. What if it broke your code.

08:20 - So what can you do?

  1. Ask for their thoughts on a tool instead of suggesting it - it seems you have done this already
  2. Show the dev that even though it looks weird, it’s better for readability.
  3. Look at existing guidelines and try to match the settings as close as possible (not always an option with prettier).
  4. Put together a solid argument for it, written down.
  5. Use it in a smaller project. Everyone is against prettier at first, but once they use it, they realize how amazing it is.
  6. Can you just Prettier the code yourself and then format it otherwise before you check it in? This depends on if you have existing formats.

Links

Tweet us your tasty treats!

Key points in this episode

It’s another potluck! In this episode, Scott and Wes answer your questions about mobile first development, ES6 arrow functions, Deno.js, tips for refactoring your code, best e-commerce platforms and more!


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.

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.

Show Notes

02:50 - Q: Wondering about your take on mobile first design and implementation? Do you throw the desktop styles or the mobile styles in media queries? Any opinions about that? I’m switching a lot between projects that do it differently, and it really makes my head melt.

08:24 - Q: What is the difference between the ES6 arrow functions and a normal function? When would you use a normal function instead of an arrow function or the other way around?

13:54 - Q: What are your opinions or experiences on developing 360/VR experiences on the web? There are a few frameworks out there for building such experiences, like A-Frame and React 360. I was wondering if you had any experience using such frameworks or building these types of things, and do you think that this could become a big thing for web development in the future?

19:02 - Q: How do you define senior developer? What is the difference between intermediate and senior developers?

21:37 - Q: I was curious knowing your opinions regarding json:api and its consumption in React. Is it still a good pick compared to GraphQL or normal rest/json?

27:30 - Q: What’s your take on Blitz.js and RedwoodJS? Would you use a framework like this to build a large & scalable web app?

30:54 - Q: What do you think of Deno.js reaching version 1.0? Is it really going to be a Node successor, or is that just marketing hype?

34:34 - Q: When you are looking to refactor code, do you have a process you like to follow?

41:35 - Q: Which technology stack would you choose in 2020 for an e-commerce website and why?

46:32 - Q: I’m confused about developing a website for a client. I feel like most, if not all, clients want to take administrative control at the end of the project to be able to handle things themselves. Does this mean the only option for client projects is WordPress? I got really excited about making a client’s site in Gatsby, but they would need to be a coder to be able to edit the content of the site or maintain it. Am I missing something here?

49:52 - Q: How do I use prop types to check a component when getting the props from context instead of passing them down?

51:51 - Q: Should I use the mongoDB or mongoose node module in my project? What are the differences?

55:48 - Q: Is it a bad practice if I mix up React Bootstrap and Material UI in one React project?

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

  • Scott: Custom React Hooks - Currently 50% off! - Use the coupon code ‘Syntax’ for an additional 10% off!
  • Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!

Tweet us your tasty treats!

Key points in this episode

In this Hasty Treat, Scott and Wes continue their discussion of website page speed — five more things that make your site slow!


Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.

Show Notes

03:01 - Shipping too much JS

06:38 - Not bundling code

  • Build process

08:24 - Not compressing code

11:45 - Loading JS asynchronously

Key points in this episode

In this episode of Syntax, Scott and Wes talk about emergency UI when building a website. During an emergency, you need to relay information to your website visitors as quickly and efficiently as possible. How do you do that? What do you need in place on your website?


Sanity - Sponsor

Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.

Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.

Show Notes

5:40 - Banners and popups

  • Interfere
  • Static
  • Dismissible
  • Cookie/localstorage
  • When that popup is updated, it should show again. Maybe use a hash of the content? Or length? Something that resets itself every time the content is updated.
  • Private client-side-only PWAs are hard

14:35 - Good styling

  • What happens if they add an image?
  • Do they have access to the branded fonts and colors in their WYSIWYG?
  • Can you revoke 100px red Times New Roman?

18:32 - Page alerts

  • Yellow, green, red
  • Alerts on existing pages

21:08 - New pages

  • Is there a good template for new pages?
  • Can they easily set the slug?
  • Can they add it to the nav?

23:52 - Google’s “Hours of Operation”

25:43 - Other

34:38 - Deployment

  • Detail how to deploy everything
  • It might have been years and the CSS will only compile on Node 6 and Gulp 3
  • Do any caches need clearing?
  • Does the CSS need to be cache busted?

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Key points in this episode

In this Hasty Treat, Scott and Wes talk about five things that could potentially be making your website slow.


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

3:00 - TTFB

  • Slow DNS lookup
  • Server on the other side of the world
  • Slow server processing
  • Network speed back to the browser

6:21 - Requests

  • Too many requests
  • Too large
  • Waterfalling your requests

9:44 - Assets are too large

  • Images are the biggest bloat in a site
  • Compress and optimize via build tool or ImageOptim
  • Make smaller
  • Picture fill for mobile

14:48 - Lazy loading

  • lazy=“true”
  • Intersection observer
  • Preload slider images two ahead

18:03 - Not using a CDN

  • What is a CDN?
  • Cloudflare is free, others are very cheap - we used Cloudfront
  • Netlify is free and comes with a CDN

Links

Tweet us your tasty treats!

Key points in this episode

In this episode of Syntax, Scott and Wes talk about working from home. How do we do our best in these unprecedented times? Here are our tips for working from home and staying productive and sane!


.TECH Domains - Sponsor

If you need eyes on your project, you’ll need a domain, and .TECH is perfect for representing your brand. Find out if your .TECH domain is available at go.tech/syntax2020. Use the coupon code Syntax2020 and get 90% off 1- 5- and 10-year domain names.

Prismic - Sponsor

Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.

Show Notes

2:39 - Your space

  • You need a table
    • Card table or dining room table
  • Keyboard + monitor
  • Don’t work from your bed or couch
  • Headphones can get you in the zone (noise-canceling ftw)

16:36 - Routine

  • Shower, shave, makeup
  • Clear start and stop times - even if that means it’s 5am to 11am because you are splitting
  • Taking breaks is important

25:24 - Focus

  • TODO list - write a list of what you hope to do at the start of the day, check things off, feel good about yourself
  • Eat That Frog - for the 100th time
  • Don’t watch or check the news during work hours
  • Block the terms related to the pandemic or politics on social media - you don’t need that info there
    • DOOM Scrolling

30:11 - Self care

  • Video games or relaxing things post work
  • Exercise
  • Zoom Happy Hours
  • Don’t overly rely on substances to get you through
  • Get your VD (vitamin D)
  • Don’t stress out yourself at night - don’t look up news before bed

43:20 - Managing kids and sharing time with your partner

  • First of all, props to you all - this is really hard, mentally and physically
  • This will vary greatly depending on your SO’s job, number and age of kids
  • Our SOs have work and jobs of their own
  • Watching young kids is hard work
  • Give each other 30 min brakes
  • Kids need routine - put something in place
  • Some times Uncle Mickey needs to take over, and that’s ok
  • Communication is key
  • Schedule Examples:
    • 6-12 and 12-6
    • 4 hours each
    • 2 hour trade off
    • Focus time (calls, deep work) and half-focus time (emails, etc.)
  • Have empathy with everyone: co-workers, SO, kids
  • Check in on your peeps
  • Keep an eye on your co-workers, even the extroverted ones

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Key points in this episode

In this Hasty Treat, Scott and Wes talk about abstraction in general as well as javascript programming.


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

1:48 - What the heck is abstraction?

  • I like to think of it as sweeping under the rug
  • Vue and React devs should be very familiar with the concept

4:44 - When to abstract

  • When things are getting too heavy
  • Personal preference
  • Some people have an arbitrary line limit

7:25 - When not to abstract

  • When savings are minimal
  • When it just adds a pointless layer

9:40 - Personal code abstractions vs public

  • My personal focus is on API simplicity and baked-in smart defaults
  • More specific
  • Public APIs need to be more flexible or at least for some components

Links

Tweet us your tasty treats!

Key points in this episode

In this episode of Syntax, Scott and Wes talk with Dr. Courtney Tolinski about mental health and web development.


Sanity - Sponsor

Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.

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.

Show Notes

3:20 - Depression

  • Honestly just explaining depression would be great. Too many times I’ve heard “but you don’t look sad”
  • As someone who struggles with depression, what are some things I can do to rekindle and things I enjoy like developing and hobbies? This would greatly benefit me for learning more dev related things outside of doing it for work.
  • My depression is due to some other cause in personal life - two years into it.
  • Coding has bought me little life back as this is the only thing I have to do.
  • What can we do from an outsider's view to someone who might have depression?

12:23 - Anxiety

  • Imposter Syndrome x 1000
  • How to deal with increased anxiety during these times?
  • How to avoid anxiety and feel useless when working products that you don’t appeal to you?
  • Wanted to ask the Dr about why do I feel that I have to work on 1000 projects that seem to never finish? 😣This is inducing a lot of anxiety sometimes.
  • I am on depression medication. Sometimes, I feel scared that I am so slow and don’t feel accomplished enough like people working at FANG, etc, being a SE.
  • How to deal with the anxiety caused by today’s events around the world and the need to isolate yourself from society even though we crave human interaction?

29:12 - Focus and job performance

  • How to keep motivation and focus? I find myself enjoying work but having a hard time focusing on it. All the “distraction-free” apps don’t work because I can turn them off and I feel they literally have no power over me.
  • Hardcore mode
  • Pomodoro technique

35:10 - Motivation and remote work

  • Bore-out
  • Burnout
  • How do you deal with loss of focus and happiness in web development (especially on remote jobs)?
  • Working for yourself at home, you don’t get a chance to bounce ideas and encouragement from others in an office. What’re some good ways to compensate for that to ensure you maintain a positive mindset?
  • Work on new things
  • Find ways to try new things

40:38 - Stress

  • Correctly identifying source of (negative?) stress. Not lashing out when under stress.
  • How to avoid eating to cope with stress?

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

  • Scott: All Courses - Sign up for the year and save 50%!
  • Wes: All Courses - Eveything is 50% off! Use the coupon code ‘Syntax’ for $10 off!

Tweet us your tasty treats!

Key points in this episode

In this Hasty Treat, Scott and Wes talk about security and how to get good at passwords.


Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.

Show Notes

7:35 - Setting passwords

  • Absolutely 100% must be unique for EVERY SINGLE WEBSITE

9:38 - Generated passwords

  • Make a sentence: lovetoEatPizza
  • Decide on casing
  • Make your own algorithm:
    • 3rd letter replaced by 4th letter of domain
    • number on end is double the number of chars in the domain

13:52 - Use a password Manager

  • Have the password manager generate the password for you
  • Get it on your phone
  • You must go 100% all in
  • 1password
  • Dashlane
  • Bitwarden - open source version of Dashlane
  • LastPass - awful

17:45 - Password manager tips

  • Turn off your browser password manager - this is a crutch and causes them to become out of sync and this is why I see people annoyed by them
  • For the love of god, make you master password something you can remember
  • You can add family members to your plan that will approve it
  • 1password’s Watchtower feature

20:50 - Biometrics

  • Face ID, Touch ID
  • Blood

21:37 - 2FA codes

29:55 - Text message codes

  • Don’t
  • My sister got sim jacked, PayPal drained, phone number was gone for 7 days
  • Lock transfer - ask your phone provider - mine has voice recognition

Links

Tweet us your tasty treats!

Key points in this episode

It’s another potluck! In this episode, Scott and Wes answer your questions about bootcamps, Figma, Gatsby, AMP, Mongoose, imposter syndrome, and more!


.TECH Domains - Sponsor

If you need eyes on your project, you’ll need a domain, and .TECH is perfect for representing your brand. Find out if your .TECH domain is available at go.tech/syntax2020. Use the coupon code Syntax2020 and get 90% off 1- 5- and 10-year domain names.

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

3:02 - Q. Scott, you talk a lot about your workflow with Figma. As a designer going to programming it sounds like the workflow was natural to you. As a programmer trying to move into design, I have no idea how to get started. Could you explain your workflow on starting a new project in Figma through starting to implement in VSCode?

5:36 - The dreaded monitor question, flat or curved?

8:34 - I am relatively new to web development and have learned HTML, CSS, Node and Mongo. I planned on taking your GatsbyJS e-commerce course, however, I have no experience in React whatsoever. Should I learn React first?

12:35 - What is AMP and should I be using it?

16:07 - What are the advantages and disadvantages of building a web app using a framework such as Blitz.js?

21:46 - Would you ever consider moving from Mongo / Mongoose?

24:47 - I am very new to the dev world. Went to college 15 years ago for Comp Sci, but dropped out halfway through to become an electrician. (Wasn’t sure if I could sit in an office all day.) Long story, but I’m wanting to change my career path and I’m very interested in software development. I’ve heard about Modern Labor’s bootcamp and I’m intrigued. I’d like to know what your take is on their program.

33:15 - Loved your recent episode(s) on serverless functions. I’ve implemented a few myself, but I always come back to the same question: how exactly do I secure these endpoints? Because you are charged for compute time, and those endpoints are publicly available, couldn’t anyone just send requests to them and run up your bill?

36:53 - I’ve decided to make a career out of coding and programming and I’m an absolute beginner starting out in HTML and CSS. It might be a weird question but how many/what percentage elements and declaratives do I need to memorize? It’s not that the info is necessarily difficult to parse, it’s the amount of tags that I’m bombarding my brain with is muddying my progress. I’m more of a theory-driven learner so it’s not the biggest obstacle in the world but I’m starting to see the breadth of this endeavor and I’m not sure how to focus my mental acuity.

40:39 - Do you have a standard folder structure that you follow for placing “utility” function JS files? Is there an “industry standard”? I’ve just been using utils or utilities inside src, but curious if there is a more common way.

44:12 - Is figuring out new techs/modules/plugins/whatever really as easy as reading the docs for most people? A common response to “what’s a good way to learn x” seems to be “the docs are good”. I then open the docs and am absolutely clueless. Are these people just giving bad advice, or do the docs actually give most people enough to go on? For example, I tried to implement username login with Passport using their docs, and a lot seemed to be left out, implying you’re supposed to just already know all this other stuff. It’s a bit demoralizing to feel like I can’t figure out much of anything on my own, and I’ve been doing web dev for a few years now, albeit not professionally, but I have done some big projects that are used regularly. So anyway, just wondering what your take on this common advice is, your experience with being able to figure out things on your own without needing an hour-long tutorial, and so on. I know you’re both tutorial makers, but I don’t get the impression that you two have to take a course to understand something new.

48:19 - Do you have any tips for getting over “code shyness” or “imposter syndrome”? I find myself struggling with this issue from time to time and was curious to know your suggestions for dealing with it.

53:36 - If I rename my GitHub repo, will all the links that are in the wild still work. For instance will github.com/webruin map to github.com/newname?

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Key points in this episode

In this Hasty Treat, Scott and Wes talk about purchasing power parity — what it is, and how Wes has implemented it on his course website.


Prismic - Sponsor

Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.

Show Notes

2:36 - What is it?

5:43 - How do you calculate it?

8:04 - How do you implement it?

  • Cloudflare headers
  • Dealing with VPNs
  • Does it work with sales?

16:09 - Is it client-side only?

Links

Tweet us your tasty treats!

Key points in this episode

In this episode of Syntax, Scott and Wes talk about React Hooks, one year later — what’s changed, how to use them, and more!


Sanity - Sponsor

Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.

Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.

Show Notes

1:26 - Hooks vs Render Props

  • Hooks win hands down
  • useState
  • useReducer
  • useRef
  • useContext
  • useEffect
  • Custom hooks to hide and encapsulate functionality

35:06 - How we use them

  • Scott

    • Index that imports all custom hooks
    • Babel alias to hooks folder
    • Import { useHook } from ‘hooks’
    • useContextState
  • Wes

    • useResizeObserver
    • useForm
    • useGridRower
    • useWickedFavIcon

45:54 - Which built-in hooks do we not use?

  • useImperativeHandle
  • useCallback
  • useDebugValue

48:22 - Are hooks harder to learn?

  • Wes: Yes — but easier to maintain after the fact
  • Scott: Yes — harder conceptually and initially but easier after concepts are understood

50:29 - Are classes going away?

  • Wes: I say yes
  • Scott: Double yes

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

  • Scott: All Courses - Sign up for the year and save 25%!
  • Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!

Tweet us your tasty treats!

Key points in this episode

In this Hasty Treat, Scott and Wes talk about how to hire an assistant — something that can make your life a lot easier as a solo developer.


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

2:34 - Finding someone

  • Virtual Assistant
    • Offset timezones can be handy
    • Flexible is great - two hours here, two hours there

5:55 - Types of tasks to delegate

  • Support
  • Email replies
  • Mail and shipping items
  • Invoicing
  • Expenses
  • Research - find emails for X
  • Blog post edits
  • Sponsorships

14:50 - Standard Operating Procedures

  • If something happens more than once, make an SOP
  • Common questions that come up

18:07 - Tools

  • 1Password
  • Missive
  • Custom backend tools for:
    • Managing courses
    • Issuing refunds
  • Chromebook
  • Google Docs

21:52 - Hours

Links

Tweet us your tasty treats!

Key points in this episode

In this episode of Syntax, Scott and Wes talk about soft skills tips — productivity, planning, communication, and more.


Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.

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.

Show Notes

2:20 - Productivity

  • Make a todo list and prioritize
  • Get ideas out of your brain
  • Use a tool like Notion as a second brain
  • Batch related things together
  • Recharge when you need it
  • Have a system and stick to it

16:34 - Finishing projects

  • Start
  • Do a little every day
  • Go all-in for a few days
  • Clearly identify what needs to be done (Github issues, todo app)

23:30 - Planning tips

  • I use Mind Node
  • Whimsical
  • Write it down when you have an idea
  • Put everything in a calendar

30:24 - Communication

  • Be honest and upfront with deadlines
  • Give yourself padding — many people are overly optimistic
  • Don’t let people expect communication from you, at all, or at all times
  • Assume good intentions
  • Don’t be a jerk to clients or coworkers

40:28 - Skill and career advancement

  • FDD — fun driven development
  • Share what you learn
  • Don’t let other’s progress get you down — there is always someone smarter doing crazier stuff
  • Solve your own problems
  • Apply and interview for anything that’s interesting
  • Track your progress
  • I want to ___, I wish I could ____, You are lucky that you get to _____
  • Just start! Seriously. Plan on doing something.

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Key points in this episode

In this Hasty Treat, Scott asks Wes about Cloudflare — which services he uses, which ones he doesn’t, why, and more!


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

2:45 - What do you personally use Cloudflare for?

  • DNS provider
  • Domain registration at cost
  • Caching
  • DDoS protection
  • Hiding server IP address
  • Free HTTPS
  • Firewall rules
  • Scrape shield
  • Lightweight stats
  • Serverless functions
  • DNS
  • Cloudflare Warp

16:40 - What are you not using?

  • KV storage
  • Video streaming
  • Deep customization around blocking/errors

19:49 - How do you set it up?

Links

Tweet us your tasty treats!

Key points in this episode

In this episode of Syntax, Scott and Wes do a part 2 about Serverless — databases, files, secrets, auth, and more!


Sanity - Sponsor

Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.

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.

Show Notes

2:47 - Wes tried Cloudflare Workers

  • Also this is so cool:

Hey Wes, just listened to the latest Syntax episode on the serverless setup. Not sure if it’s an episode idea or not, but if you wanna do a bit of a dive on Cloudflare’s service workers, I’m currently leading an “invisible infrastructure migration” right now from a legacy WordPress setup to a new Storyblok/Netlify setup. We’re using Cloudflare’s service workers to basically “stitch” the headers/menus/footers from the old WordPress site into our new Netlify pages, but serving the page back as if it was part of the normal domain. This means we can migrate from the old to the new slowly without massively disrupting SEO, doing a lengthy/costly rebuild, etc.

  • A word on Digital Ocean
  • Kubernetes + FAAS allows you to scale up/down

13:54 - Secret management

  • Some have a great UI
  • Some have a CLI
  • Some only have production
  • Some have dev/staging/prod

16:24 - Vendor lock-in

  • Two kinds of vendor lock-in
    • Lock into a low-level provider (Like AWS, or MongoDB)
    • Lock into a framework
  • Questions to ask:
    • Can I go, take my app as-is, and host it on another provider?
    • Can I refactor the config and run my code as-is?
    • Do I need to refactor my code for it to run on other platforms?
  • Next.js will only run on Now
  • There is a community package
  • Begin all runs on Arc.codes
  • Firebase is locked in?

25:12 - Sharing dependencies

  • Each function will have its own package.json, which can be a pain
  • Publish utils a private module
  • AWS Layers
  • Import/export
  • Bundle and tree shake

30:26 - Local development

  • Now dev
  • NPX sandbox
  • Wrangler for Cloudflare workers

36:40 - Existing applications

  • Difficult to move with many routes, but easy to move a Graphql API that has one single route
  • Maybe do piece by piece instead of all at once
  • Begin has http express method

45:21 - Data

  • Any DB you want
  • Dynamo DB integrated into many
  • Firebase
  • KV Storage for Cloudflare workers
  • Fauna

48:14 - File storage

  • Generally files go in the associated file place like Amazon S3, Backblaze B2, Cloudinary
  • Many also have this integrated as well

52:18 - Auth

  • Serverless is ephemeral and stateless
  • JWT likely as sessions will work, but doesn’t really make sense

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Key points in this episode

In this Hasty Treat, Scott and Wes talk about container queries, what they are and how you can use them.


Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.

Show Notes

4:30 - The General Idea

6:20 - Problems

  • It’s not as easy as, “how do we write them”
  • Some of the requirements may need a fundamental change to browser engines
    • May be very impractical and take a long time

“Did you know, for example, that there are multiple many year long efforts with huge investments underway already aimed at unlocking many new things in CSS? There are - and I don’t mean Houdini!” ~ Brian Kardell

8:56 - What’s been happening?

  • Lots of conversations
  • Dead ends

“How do we make this into more solvable problems?” and “How do we actually make some progress, mitigate risk - take a step, and and actually get something to developers?” ~ Brian Kardell

12:00 - Progress

  • Lot’s of discussion
    • Goog, Moz, Apple, smart people
  • Not there yet
  • Big ideas that could go somewhere

.foo { display: grid; grid-template-columns: switch( (available-inline-size > 1024px) 1fr 4fr 1fr; (available-inline-size > 400px) 2fr 1fr; (available-inline-size > 100px) 1fr; default 1fr; ); }

“A whole lot of the problems with existing ideas is that they heave to loop back through (expensive) phases potentially several times and make it (seemingly) impossible to keep CSS rendering in the same frame.” ~ Brian Kardell

  • Or a system based on resizeObserver

“In the coming months I hope to continue to think about, explore this space and continue discussions with others. I would love to publish some research and maybe some new (functional) experiments with JS that aim to be ‘closer’ to a path that might be paveable.” ~ Brian Kardell

Links

Tweet us your tasty treats!

Key points in this episode

It’s another potluck! In this episode, Scott and Wes answer your questions about Gastby vs everything, Next, Vue, Rails, working with agencies, CSS, and more!


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.

Kyle Prinsloo Freelancing - Sponsor

Kyle Prinsloo teaches you everything you need to know about freelancing, including how to quit your job, earn a side-income and start taking control of your life. Check it out at studywebdevelopment.com/freelaning. Use the coupon “SYNTAX” and get 25%.

Show Notes

1:39 - This may be a crazy question but I need to build a similar system to Level Up Tutorials where people can access content based on a monthly subscription. Any recommendations where to start with either Next.js or Gastby.js? How do I check to see if a person is up-to-date with payment?

4:14 - What's your favorite new tab page?

6:19: CSS vs SCSS vs Styled Components? When you are developing a React or Next.js application which styling method do you guys use and why? Which one is “best practice”, or a more efficient way of going about it?

11:14 - What do you think of lit-html?

15:25 - I’m relatively new to React, and primarily learning the create-react-app way. When do you go for the create-react-app approach when building an application, and when do you customize the config? I’m uncertain when it’s time to escape the ‘create-react-app’ approach. Also, when escaping it, which main configurations are you grabbing?

18:19 - Is there a reason hasty treat intros are 2.5x the length of normal episodes? Now that Overcast has intro skipping it’d be nice if the intros were uniform in length.

21:23 - I see Kyle Matthews coming out with a lot of input on how Gatsby can be used for web applications as well. After listening to several of your podcasts, where you talk about Gatsby, it doesn’t seem like you agree, and would go for Next.js instead. In your opinion is the development at Gatsby really heading in the direction of SSG and web application?

27:17 - I’ve hopped on the Vue train from jQuery land, and am loving both Nuxt and Gridsome. However, I keep hearing all these good things about Gatsby. Would you guys say that it is worth it to learn Gatsby (and the whole react ecosystem for that matter) over Gridsome? This is mostly for small-medium-ish side-project web sites that connect to a headless CMS.

30:04 - What are your thoughts on CSS pre-processors nowadays? With all the advance and new features from CSS, do you guys really think that it is still worthy to use it those?

32:11 - Scott, can you talk a bit about why you decided to switch back to Meteor after putting in all the effort to convert LUT to Next.js? I am about to start a new fullstack project and was considering Next until I heard you switched back. Maybe I should consider Meteor instead?

40:21 - I’ve recently started an internship at one of my favorite tech companies where I’m using EmberJS and Ruby on Rails. I love the team I’m on (the people are so nice) but I’m not super passionate about the tech stack. I’d much rather be using something like React and NodeJS/Express in my day-to-day coding. Do you think it’s worth staying in a position (if I were to try and get a full-time gig in this role) if you don’t like the tech stack, but really like the people?

40:51 - I’m thinking of doing a bootcamp that teaches Ruby on Rails for backend. I hear a lot that Ruby is a dying language, but at the same time, I know it’s used for a lot of big-timers, such as Airbnb and Shopify. Could you please explain the relevance that Ruby/Ruby on Rails will have in 2020 forward, as well as if it’s worth learning for newer web developers at this point?

45:15 - What is the deal with CMSs/headless CMSs? I hear you guys talk about them all the time (Sanity, Keystone, Prisma?) but I’m not sure what they are good for. To me, they just seem like a UI to my database, but isn’t that what my application is? It just seems like it would be easier to have my frontend talk to my backend talk to my database instead of learning how each CMS wants things to be done and programming for that? Am I missing the point?

48:11 - What does Svelte needs for each of you to use it instead of React in personal and future developments?

50:38 - I freelance on the side as well as have a 9-5. The other dev I work with mentioned he’d help if I ever needed/wanted help on a client project. What are your thoughts on doing freelance work with someone who you also work with at your job?

52:01 - My team is currently in the design phase for a rewrite of our biggest product. We are switching from perl backend (y i k e s) to node (yay) but for some reason, our tech lead decided on hapi for the node framework. I have spent a little time with hapi and it seems cool but I am not sure about its longevity when compared to more established frameworks like express. How do you feel about hapi and should I push for a different framework?

54:29 - I’m a lead dev that recently joined an agency for the first time. What 🔥tips do you have for livin’ and devin’ in that agency life? Especially around time management, time estimation and dealing with clients.

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Key points in this episode

In this Hasty Treat, Scott and Wes talk about how to make servers fast!


Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.

Show Notes

3:58 - Ram / Memory

  • Things like variables, functions, callstacks, application cache, sessions are all stored in memory
  • Large processes can eat up lots of memory
  • Reading 1,000,000 lines of a CSV
  • npm installing
  • Swap Memory
  • If your node application is limited by memory, it will crash or wait longer for memory to be freed up (garbage collection)
  • Garbage collection can take up CPU resourced
  • High-performance databases

7:52 - CPU

  • The processor on your server - the brains of the computer
  • A task - like 1 + 1, or function handleClick(), takes CPU time - the faster the processor, and the more cores it has, the faster it can think and perform these tasks
  • A faster CPU means your node app will start more quickly

9:26 - GPU

  • Most servers don’t have a GPU
  • GPUs are not only good for graphics, but they are great at solving complex tasks
  • Bitcoin mining is fast on a GPU
  • Machine Learning

11:47 - Disk Space

  • SSD vs HDD
  • The files have to be read from the hard drive and served up to the web server - the hard drive speed determines how fast they can be read, and how fast they can be written
  • SSD is more expensive but makes for a much faster application
  • HDD is cheaper and is better for storing larger files that aren’t as time-sensitive
  • An SSD will mean your node app will start faster and serve up files more quickly

Links

Tweet us your tasty treats!

Key points in this episode

In this episode of Syntax, Scott and Wes talk about serverless and cloud providers - the benefits, limitations, providers and more!


.TECH Domains - Sponsor

If you need eyes on your project, you’ll need a domain, and .TECH is perfect for representing your brand. Find out if your .TECH domain is available at go.tech/syntax2020. Use the coupon code Syntax2020 and get 90% off 1- 5- and 10-year domain names.

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.

Show Notes

4:05 - What is Serverless?

  • URL driven
  • Startup/shut down (Heroku works this way)
  • Digital Ocean droplet works differently

8:15 - What are the benefits?

  • Scale up specific functions rather than everything - aka potentially cheaper
  • Security - your singular server instance being hacked is not a possibility
  • Less knowledge overhead required
    • You don’t need to manage your own server
    • Empowers front-end devs to do more
  • Faster deploys
    • Only re-deploy the code that changed

17:05 - What can you host on Serverless?

  • Static Files - SPA (React)
  • Single functions
  • It can be in JS, Python, GO, PHP

18:07 - What can’t you host on Serverless?

  • Entire applications
  • Large apps have slow coldstarts
  • 500mb limit

23:40 - Raw Providers

  • Google Cloud
  • Azure
  • AWS Lambda
  • SAP
  • Red Hat
  • IBM Cloud Functions
  • Cloudflare Workers
  • Kind of cool because they work like service workers where you can intercept any HTTP request

27:33 - Easy Providers + Frameworks

  • Begin + Arc.codes
  • Zeit Now + Next.js
  • Anything + Serverless
  • Netlify
  • AWS Amplify
  • Apex Up - TJ Holowaychuk
  • Open Faas + Digital Ocean

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Key points in this episode

In this Hasty Treat, Scott and Wes talk about Framer Motion — why it is so cool, and how it can improve animations in your projects.


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

4:53 - The 411

  • Previous knowns as Pop Motion Pose
  • Animation library with focus on ease of use
  • Utilizes both spring and duration based animations

7:19 - Pose

  • Pose was previously more pose based - aka you made scenes and toggled between them
  • This still exists within Motion as variants, but isn’t the main way

8:06 - The New New

  • motion.div
    • animate prop is basically a live value for the animation
    • initial for initial state
    • exit for animating out with use of animatePresence
  • Hard stuff made easy
    • drag prop
  • Full control over properties like duration and easing
  • Orchestration features, this then that
  • Variants
    • Multiple scenes allow you to orchestrate many animations with a single state change
  • Handles hover and tap easily
  • Scroll values
  • SVG path animations

19:45 - Final Thoughts

  • Framer Motion is easier
  • React Spring is much smaller
  • React Spring makes very complex animation possible

Links

Tweet us your tasty treats!

Key points in this episode

In this episode of Syntax, Scott and Wes talk about web dev GUIs — what are they, are they going to replace developers, are they good or bad, and more!


Hasura - Sponsor

Hasura is an open source real-time GraphQL engine. It connects to your databases & microservices and instantly gives you a production-ready GraphQL API. Check it out at Hasura.io.

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

1:30 - What is “codeless”?

  • The codeless movement is coming in with a force. Are they just selling something? Or is it a real concern?
  • All types of jobs are being replaced by computers
    • Truckers
    • Cashiers
    • Lawnmowers
    • Doctors
    • Why not web developers?

7:22 - First experience building sites with a GUI?

10:18 - Entire website builders:

13:17 - When are GUIs useful?

  • Brochure site
  • Basic e-commerce

20:26 - Is a GUI/Codeless always better?

  • It depends what you’re capable of doing

25:21 - Levels of hell GUI assistance in builders

  • CMS - Just modifying content and basic markup
  • Access to code, drag blocks into place
  • No or minimal access to code
  • No modification outside of options

31:36 - Are there GUIs for making applications?

36:54 - Are jobs at risk?

  • Yes

    • I think a lot of WordPress tinkering has already been replaced
    • The guy who knows what buttons to push is at risk?
    • Webmaster jobs where the roll was just occasionally updating HTML and text
  • No

    • Government
    • Educational institutions
    • Major corporations that can’t have their content stored via a service

39:55 - Our favorite GUIs to help development

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Key points in this episode

In this Hasty Treat, Scott and Wes talk about hobbies — how they can improve your life and make you a better developer, as well as the hobbies they enjoy.


Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.

Show Notes

3:19 - What are our hobbies?

  • Wes: Focus on one thing, learn it, move along

    • Kombucha, Fermentation and Curing Projects
    • Bike flipping
    • Kids ride on repairs + hacks
    • ATV fixing
    • ICE to Battery conversion
  • Scott:

    • Dance - 15+ years
    • Weightlifting / fitness
    • Video games
    • Watching hockey
    • Design
    • Computing / coding
    • Snowboarding
    • Kung fu movies

9:00 - Why are they good?

  • Fuel your coding project
  • Maybe could even become your key to a job you love
  • They keep your mind sharp
  • Good for downtime
  • Good for mental health and mood
    • Can be meditative
    • Be cognizant of what they do to your mental state
  • Promotes creativity and critical thinking
  • Fun man

17:54 - How do you find a hobby?

  • Wes

    • I always need an end game
    • I want to grow hot peppers
    • I want a wicked ATV for cheap
    • I think batteries are fascinating but I need something real to do
  • Scott - I start with the fascination

    • I think dancing is cool, but I could never learn
    • I think _____ is cool, but I don’t know where to start
  • Deep dark YouTube holes

    • YouTube has an endless selection of educational content
  • Facebooks groups or forums

  • Meetups / volunteering

    • Introverts will have a hard time with this, push yourself

22:50 - What is your hobby?

Links

Tweet us your tasty treats!

Key points in this episode

In this episode of Syntax, Scott and Wes talk about running backups and a home server — Synology setups, apps, and more!


Sanity - Sponsor

Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.

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.

Show Notes

2:03 - What is it?

  • A little headless computer

5:07 - Drives

  • WD Red or Seagate Ironwolf — They are loud, you can put SSDs in them, but it’s $$

6:25 - RAID

11:17 - Power

  • Backup
  • Time Machine over the network
  • You can upgrade the memory
  • SSDs

22:40 - Backing up your Backups

  • Mirror folders to Backblaze B2
  • Slow, but worth it

30:53 - Apps

  • Plex + Emby
  • Storage Analyzer
  • Docker - anything really
  • Node js ;)
  • Security cameras
  • Pi-hole or custom DNS server
  • Moments
  • Drive

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Key points in this episode

In this Hasty Treat, Scott and Wes talk about the non-glamorous skills that will improve your life as a developer!


Prismic - Sponsor

Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.

Show Notes

3:13 - Why it’s needed

  • Make you a better dev
  • Make big tasks easier

7:00 - Why we don’t do it

  • Because it’s hard
  • It’s boring - sometimes
  • It’s not our focus

7:24 - Good command line skills

  • Get around file system
  • Copy, move, delete things

8:58 - Keyboard skills

  • Jump by word/line/BOL/EOL
  • Learn 1 new shortcut per week
  • Custom keybindings for common tasks

14:22 - Communication and interpersonal skills

14:41 - Time management

  • Focus apps to help
  • How long will something take?
  • Revisit past projects when they are done and see how long it took

16:36 - Good file hygiene

  • Good folder structure
  • Delete old cruft
  • Clear your recycle
  • Desktop and downloads are off-limits
  • Create template structures or tools for commonly used structures

Links

Tweet us your tasty treats!

Key points in this episode

It’s another potluck! In this episode, Scott and Wes answer your questions about dev culture fit, Slack communities, vanilla Javascript, backpacks, Raspberry Pi, beards, and more!


.TECH Domains - Sponsor

If you need eyes on your project, you’ll need a domain, and .TECH is perfect for representing your brand. Find out if your .TECH domain is available at go.tech/syntax2020. Use the coupon code Syntax2020 and get 90% off 1- 5- and 10-year domain names.

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.

Show Notes

3:10 - Q: Recently I took a job as a lead dev doing the exact kind of work I’ve always wanted to do. But after the first week, I really hate it. I feel like I don’t fit in and I’m seeing many red flags. There are no processes and there doesn’t seem to be any real excitement around what we are building. What should I do? Do I suck it up for a while? Or do I start looking for something else, potentially taking a pay cut (and moving back into doing web dev as opposed to building apps) to work at another creative agency with people who are more my jam?

10:32 - Does Syntax have a Discord or Slack community channel to collaborate on topics?

12:00 - What is one thing that really annoys you about Javascript? I’m curious if you could change one thing about the language itself, what would it be?

15:08 - Have you tried Fauna DB?

19:13 - What are your thoughts on including tutorial projects in a portfolio? (For example, putting the Sick Fits site from Wes’ Advanced React course in a portfolio.) I’m relatively new to React and have a couple of my own projects, but a bunch of projects from following a course.

23:58 - A site you’re maintaining is hacked, how do you handle fixing it?

30:28 - My bookmarks are overwhelming! I just started learning web dev and even though I sort my bookmarks into folders, I end up with so much that I don’t even know how to use them. What do you guys do for managing bookmarks on browsers?

34:15 - How would you recommend integrating React and other modern JS frameworks into (more or less) “static” or “brochure” websites? Say for instance I have a banking website that has mostly static content, but also has complicated JS pieces such as calculators, location finders and sign-up forms? I currently reach for jQuery & jQuery plugins for these pieces of functionality, but React and Vue sound like they could also help solve these one-off pieces of functionality. Most tutorials and examples are based on creating apps from the ground up, but what if you only want to sprinkle these frameworks in and only use them where JS is necessary? How might the both of you solve for these scenarios?

38:00 - I was wondering whether you could share which backpack, or bag do you use for carrying your laptops? I’m looking for something that would be useful for carrying my 16" Macbook Pro, but also could hold some other stuff like groceries, clothes, or other various things that one may want to put there.

41:50 - Do you write out a vanilla fetch() in your components that need it, or do you use a fetch “wrapper” written by yourself or someone else? If so, what does it look like?

46:16 - Have you ever done any automation projects using a Raspberry Pi? I am trying my hand at remote access to the solar power setup at our ‘bach’ (pronounced ‘batch’) here in New Zealand, which is the same thing as a ‘cottage’ in Canada. Finding it hard to find good resources for this online as most get really technical really fast. My idea is to take the RS485 modbus data and just send it up to a DB every 5 minutes or so.

51:38 - What do Wes and Scott think about beards and have you ever thought about growing one?

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Key points in this episode

In this Hasty Treat, Scott and Wes talk about community building online — some of the different software techniques and things you can do to either get started with a web community or join one.


Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.

Show Notes

7:16 - Chat options

9:00 - Forum based

  • Indexable
  • Searchable
  • Slower communication
  • Discourse
  • Spectrum
  • Facebook groups
  • Reddit
  • Syntax Reddit

27:27 - Commenting systems

  • YouTube comments
  • Comments systems in general

Links

Tweet us your tasty treats!

Key points in this episode

In this episode of Syntax, Scott and Wes talk about tech to watch in 2020 — things you should keep an eye on and learn this year!


Sanity - Sponsor

Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.

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

6:39 - CSS Subgrid

8:10 - CSS Houdini

11:20 - CSS features not supported in older browsers yet

  • Scrollsnap - IE 11 and up. Lot’s of mobile issues.
  • position:sticky - no IE at all

14:24 - NPM tink

  • installer-less npm
  • Load packages at runtime into a shared cache across all projects
  • Intelligently download the parts you need

17:25 - Yarn PnP

  • Hard links to eliminate package duplication
  • Shared cache across all projects

18:31 - Pika & Snowpack

21:10 - Deno

  • New Node?

25:39 - React

  • Suspense in more libraries
  • Suspense for Server Rendering
  • Meteor
    • New ownership. v1.9 just dropped with lots of promise for future growth
  • Svelte 3
  • Vue 3
  • Apollo
  • Next.js

36:37 - Serverless

  • Going to get easier
  • Begin.com
  • Next.js / Now Functions

38:14 - Gatsby

  • A single useQuery (made possible by suspense)

39:36 - Headless CMS Thunderdome

42:20 - Next Gen Frameworks

  • Keystone
  • Strapi
  • Meteor
  • Vulcan.js

43:46 - Cypress

  • End to end testing
  • Currently no Firefox support, but hopeful for 2020

44:21 - Modulz

  • Exports to JS component

45:00 - Figma

  • Was already amazing in 2019
  • Constantly improving and adding new features
  • Can import from Sketch

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Key points in this episode

In this Hasty Treat, Scott and Wes talk about Wes’ new website, uses.tech — the stack he chose for building it, as well as what it does and how to use it!


Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.

Show Notes

2:23 - What is uses.tech?

5:33 - The stack

8:13 - Avatars

10:43 - Filtering

15:51 - Github actions

19:25 - Favicon

21:30 - Search

22:03 - Hosting

Links

Tweet us your tasty treats!

Key points in this episode

In this episode of Syntax, Scott and Wes talk about fitness — how to stay in shape as a developer, nutrition, goals, and more!


DevLifts - Sponsor

Refactor your body with DevLifts. They have a few different programs: 1) fit.Start (normally $19/month) has a few options (lean, bodyweight, and strong). Workouts are delivered via email each month, with access to a Slack community for questions and accountability. 2) Premium (normally $199/month) is a custom-tailored option, where you get your workouts and nutrition advice after answering a questionnaire. They also check in with you each week via Slack to see how it’s going and make changes if necessary. Get 50% off fit.Start plans with code SYNTAX and 50% off Premium with code TASTY.

Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.

Show Notes

4:42 - Past year reflections

  • Scott

    • Tried several different lifting
    • Breaking didn’t happen as much, so my cardio took a hit
    • I finally found a full body plan / bro split that has been very effective
    • Weight belt has really helped my form
  • Wes

    • Overcommitted in 2019
    • Feeling great - physically
    • Gained about 12 pounds past where I want to be - rough year!
    • Noticeable loss in energy when I don’t hit the gym
    • DevLifts since November
    • Cardio / HIIT up

12:15 - What we’re doing now

  • Scott

    • 4 day split
    • Chest/Triceps
    • Back/biceps
    • Shoulders
    • Legs
    • Abs every day
  • Wes

    • 3 days a week
    • Set A - Chest and back
    • Set B - Legs and chest
    • Set C - Legs and back
  • Cardio finisher (BLASTERS)

  • At home helpers

    • Kettle bells
    • Foam roller

30:32 - Nutrition

  • Scott

    • Nothing too hardcore, salads for lunch - not religiously though
    • Good dinners
    • IF occasionally (e.g. not eating before 10 and not eating after dinner snacks)
    • Desert items allowed
  • Wes

    • Macro Tracking - still want to enjoy things
    • Low Carb
    • High on veggies
      • Brussel sprouts
      • Green beans
      • Salads
      • Chickpeas
      • Olives
    • Still super into fermentation, crunchy + sour + fizzy + spicy
    • No sweets either
    • Beer is my downfall

41:04 - Supplements

  • Scott

    • Not doing anything right now other than high quality protein
    • On meds for nerve damage
    • Probiotic
    • Fish Oil
    • Psylluim husk
  • Wes

    • Megafood Men’s Once Daily Multivitamin - they are natural and organic, empty stomach
    • Magnesium
    • Fish Oil
    • Lions Mane
    • Ashwagandha
    • Shilajit

53:49 - Year Looking Forward

  • Scott

    • New gym remodel going to help life
    • Yoga once twice a week
    • Breaking once a week
    • Lifting every day
    • Stretching every day
    • VR Gaming (I burned 400 cals last night playing Super Hot)
    • Goals to dead lift 350, weighted GHR, continue to progress at current rate
    • Make cardio a thing
  • Wes

    • Lose a Few Pounds + Energy + consistency
    • Kettle Bells in office
    • Consistent Gym before life takes a dive
    • Lock down macros
    • Stretches
    • Less beer
    • HIIT

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Key points in this episode

In this Hasty Treat, Scott and Wes talk about a month of using Firefox — what they liked, what they didn’t, and whether or not they’ll keep using it.


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

3:42 - Dev tools are really good

19:16 - Browsing experience

22:40 - Setup and switchover tips

26:45 - What we didn’t like

29:57 - Will we stay?

Links

Tweet us your tasty treats!

Key points in this episode

In this episode of Syntax, Scott and Wes talk with Fred Schott about Pika Pkg, a new kind of package registry for the modern web.


Sanity - Sponsor

Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.

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.

Show Notes

3:24 - What is Pika?

9:40 - What about peer dependencies?

12:53 - What does migration look like?

17:30 - Are these tools making things easier?

21:25 - What is the Pika Registry?

34:48 - What is the Pika editor?

41:13 - Is it open source?

47:30 - What about security?

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Key points in this episode

In this Hasty Treat, Scott and Wes talk about modules in Node — what are they, how they’re different from browser modules, and more!


Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.

Show Notes

3:06 - How were they done before?

5:11 - How do they work?

7:07 - How to use Modules in Node

9:57 - Gotchas

13:18 - What should you use?

Links

Tweet us your tasty treats!

Key points in this episode

It’s another potluck! In this episode, Scott and Wes answer your questions about fonts, frameworks vs custom, drinking tea, learning to code, client work, and more!


Kyle Prinsloo Freelancing - Sponsor

Kyle Prinsloo teaches you everything you need to know about freelancing, including how to quit your job, earn a side-income and start taking control of your life. Check it out at studywebdevelopment.com/freelancing. Use the coupon “SYNTAX” and get 25%.

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

2:01 - Q: When you run audits like lighthouse on a website, do you run the audit on each page? Or have you found an app or hack to run the audit over the entire site / multiple pages?

5:30 - Q: What makes a font “good”? I stumbled upon haleyfiege.fun/fonts, where she says her first font was not “good,” but it looks perfectly usable to me. When you are picking fonts for web apps, how do you judge them? Is it entirely subjective?

9:14 - Q: As a solo founder, speed is essential. What’s faster, building your own components, using a theme, or using a framework?

12:05 - Q: I’ve never been a tea drinker, but lately I’ve been wanting to start drinking a hot tea in the afternoon (instead of coffee). I know Scott is the Tea Guru, so what would your suggestions be for starting out?

15:30 - Q: Is it worth bundling JavaScript for websites that aren’t using a framework (i.e. WordPress / CMS websites)? The company I work for uses a large enterprise CMS and our JavaScript is just a minified mash of several different JS files, most of which are several hundred lines of spaghetti code. It would be nice to break up all these files in some sort of modular way, plus have the added benefit of using Babel so we can write modern JS. However, the output of the bundled JS file seems massive. Won’t that hurt performance and page load?

21:17 - Q: I know both of you put out a ton of content, both together and individually. I’m just curious to hear if you listen to any other podcasts out there in the land, or any other types of content that you consume to hone your skillz to pay the billz. Thanks!

25:14 - Q: What are your thoughts on Blazor? Is it a good move to be an early adopter of a framework like this, or should you focus on the ones that are already in a fully released state like React, Vue etc.?

28:51 - Q: I would like to ask Scott how you make subscriptions in a website? Also, how you give users a lifetime locked yearly subscription?

39:53 - Q: I feel like other developers’ code is always shorter, better structured, and easier to read than mine. Any tips (or resources) on writing clean, ‘good’ javascript code (or any other functional programming language)?

44:02 - Q: Both of you have CMS backgrounds, Scott with Drupal and Wes with WordPress. When you moved to freelancing, did you build for clients using a CMS? Or did you create custom admin interfaces for clients to manage their own site? You’ve mentioned some headless WordPress in the past, but was that the norm?

47:02 - Q: Hey Scott + Wes, you’re obviously very successful with your course creation careers, but do you miss client work? If people for some reason ever stopped buying your courses, would you go back to client work?

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Key points in this episode

In this Hasty Treat, Wes teaches Scott about Keystone.js — best practices, things to avoid, why you should check it out, 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.

Show Notes

3:10 - What is Keystone?

7:38 - How do you handle mutations?

14:26 - What’s the hosting situation like?

19:34 - Shortcomings

21:40 - Plugins

Links

Tweet us your tasty treats!

Key points in this episode

In this episode of Syntax, Scott and Wes do a 2019 year in review — the most popular Syntax episodes, what they learned, some personal updates, plans for next year, and more!


Prismic - Sponsor

Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.

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.

Show Notes

1:40 - Plans for 2020

  • Syntax Live March 2019
  • Plans for 2020
  • Twitter has done really well for @syntaxfm
  • Community feels great

9:20 - Top 10 Syntax episodes of 2019

25:17 - Personal stuff

  • Scott

    • Brooklyn Tolinksi
    • 2019 was really tough for me
    • Level Up courses for 12 months
    • Huge changes to my production values and office
    • Huge changes to LUT codebase (React hooks, Typescript, Next.js, Mongoose)
  • Wes

    • New Baby in June / 3 months Paternity Leave
    • Bought a cottage
    • Hardest course to make was Beginner JS — it was a slog, hard to stay motivated at times, with 80 hours of recording alone
    • Course Platform re-write (Next.js)

39:17 - Stuff we learned

  • Scott

    • Better speaker
    • Lots of TypeScript
    • Better debugging
    • Hooks
    • Svelte
    • General improvement in JS writing and programming skills
  • Wes

    • Really good at Vanilla.js DOM API
    • React Hooks
    • Suspense
    • Audio Visualization
    • Shape Detection API - Faces, Barcodes, Text
    • Headless CMS: Prismic, Sanity, WordPress GraphQL, Keystone.js, Hasura
    • Very good understanding of the nitty gritty of JS (closures, objects, this, new keyword, classes, etc.)

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Key points in this episode

In this Hasty Treat, Scott and Wes talk about launching courses — a behind-the-scenes look at their platforms, processes, best practices, and what it takes to get a course published.


Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.

Show Notes

2:13 - Scott’s process

8:48 - Wes’ process

20:57 - Additional tips

Links

Tweet us your tasty treats!

Key points in this episode

In this episode of Syntax, Scott and Wes talk with David K Piano about state machines, CSS, animations and more!


Sanity - Sponsor

Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.

Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.

Show Notes

2:30 - Who is David K Piano?

4:00 - Did you have a background in animation prior to web development?

5:45 - How did you build the CSS Responsive House on Codepen?

8:36 - What are state machines?

14:47 - How does it relate to programming?

17:20 - How do you go about changing states?

20:20 - Is this similar to how RxJS works?

21:40 - How would state machine work in CSS?

29:07 - Perspective in CSS

34:47 - How do you like Twitch vs YouTube?

35:48 - How do you add XState to a current project?

41:42 - Visualizing sate machines

46:15 - Do you have a day job as well?

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Key points in this episode

In this Hasty Treat, Scott and Wes talk about the new 16" MacBook Pro and how it performs as a web development machine.


Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.

Show Notes

2:24 - Why did the old ones suck?

4:43 - What did we get and why?

  • Wes

    • 32GB RAM
    • 2.3GHz 8-core i9
    •  
    • 1TB SSD
  • Scott

    • 64GB RAM
    • 2.4GHz 8-core i9
    • 8gb AMD Radeon Pro 5500M
    • 2TB SSD

9:40 - Is it still the best?

  • The MacBook Pro is the workhorse of developers
  • Keyboard is amazing
  • Screen is even bigger
  • Esc key is back
  • Touch ID is very fast
  • Heat is good
  • Speed is very fast. Great for video editing, recording, etc…
  • Trackpad feels great

15:18 - Still not good:

  • Webcam sucks
  • Ports

16:09 - Y NAWTS:

  • Why not Windows?
  • Why not Hackintosh?
  • Why not iMac?

Links

Tweet us your tasty treats!

Key points in this episode

In this episode of Syntax, Scott and Wes bring you an entire episode of sick picks — the 2019 gift guide!


Prismic - Sponsor

Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.

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.

Show Notes

3:48 - Gadgets

16:59 - Smart Home Automation

27:14 - Laptop Stands

29:59 - Phone Cases

30:52 - Mechanical Keyboards

34:34 - Mice

35:27 - Tripods

37:04 - Cameras

38:06 - Experiential

  • Massage
  • Float
  • Knife Skills Class
  • Butcher Class
  • Cooking Class

40:08 - Food

49:24 - Grooming & Wellness

Links

Shameless Plugs

Tweet us your tasty treats!

Key points in this episode

In this Hasty Treat, Scott and Wes talk about Gihub Actions — what they do, why you might be interested in them, best practices and more!


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

2:30 - What are Github Actions?

4:40 - Examples of Github Actions

6:02 - Will Github Actions replace continuous integration services?

9:19 - Libraries

Links

Tweet us your tasty treats!

Key points in this episode

It’s another potluck! In this episode Scott and Wes talk about tabs vs spaces, coding music, SEO, React vs Angular vs Vue vs Svelte, Rapping, Soy sauce and more!


Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.

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.

Show Notes

3:18 - Q: I am potentially starting a job as an Angular developer (modern angular). But I am scared that, even though I will continue to stay on the cutting edge in my personal projects, using Angular in my job will make it harder to get a job after that in more modern tech like React. Do you think there is any truth to this?

5:30 - Q: Yo guys, saw soy sauce stirred up quite the controversy…lol. What are some big developer disagreements you guys have?

11:40 - Q: In JavaScript, ! == is the same as ! =, but I was told there was a slight technical difference. I cannot find what the difference is. Could you elaborate on this?

14:17 - Q: What are the rules on using another dev’s repos as a boiler plate? Example: Using Wes’s advanced react starter files to utilize his set up for my own project?

15:35 - Q: What music do you listen to while you code? As an extension, could we crowd source a dev playlist and host it on Spotify?

20:26 - Q: How do you go about working with different technologies and stacks (front-end related) when you have to accommodate for the client or other developers’ biases towards specific things. For example, you have to learn a different set of tools because in a new project someone doesn’t like what you use and says X is a better tool for the job.

23:11 - Q: I know there is no magic SEO silver bullet, but what are some best practices for implementing SEO into your website or web application?

27:26 - Q: When dealing with responsive sites, how do you go about respecting the request in iOS safari to show desktop sites?

28:45 - Q: I get confused about your usage of the word ‘app’. You don’t make iPhone or Android apps, but you often through the word around like “I would create a Node App”, or “Some of the apps I made” etc. Is it just website applications, or how exactly should I interpret “Node App” or “Web App” compared to a mobile app?

31:36 - Q: I wanted to ask your thoughts on transform class properties plugin from Babel? Heard the podcast on react state, I found it mind blowing when setting everything up without constructors.

36:53 - Q: I am a beginner, I have mostly learned front-end so far (HTML/CSS, JavaScript, React). Should I first get pretty good at these before I start learning some back-end? Or, should I actually start learning back-end now and have a basic knowledge of both front-end and back-end?

39:00 - Q: If for some reason React died today and you were no longer able to use it, which framework would you pick up and use full time? Would it be Vue or Angular? Or something new like Svelte?

40:11 - Q: What habits, strategies, or specific tools do you rely on to prevent your hard drives from filling up with useless files?

  • find . -name "node_modules" -type d -prune -exec rm -rf '{}' +

47:20 - Q: Which JS library is most like the Tesla Cybertruck?

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Key points in this episode

In this Hasty Treat, Scott and Wes talk about new CSS Logical Properties.


Hasura - Sponsor

Hasura is an open source real-time GraphQL engine. It connects to your databases & microservices and instantly gives you a production-ready GraphQL API. Check it out at Hasura.io.

Show Notes

2:27 - The Box Model

5:32 - Grid and Flexbox

10:17 - Widths and Heights

11:20 - Text Align

Links

Tweet us your tasty treats!

Key points in this episode

In this episode of Syntax, Scott and Wes celebrate 200 episodes of Syntax with a live Q&A!


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.

Sanity - Sponsor

Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.

Show Notes

2:27 - With 2020 around the corner, what are your wild predictions for the the future of web design and development?

8:44 - Are site builders going to replace us as web developers?

13:30 - What does the future look like for Syntax?

19:01 - What emerging tech advancements most excite you for the next 5-10 years?

23:27 - What is the future of web hosting? What should hosting companies do differently?

27:40 - Why do you set your base font size to 10px?

32:40 - If you could go back in time, what would you say to yourself?

36:29 - How do you make an iFrame go 100% high?

39:10 - What’s one thing you see developers stress out about for no reason?

44:46 - Do you feel overwhelmed with creating new content when there’s so much already out there?

48:42 - How do you stay sane with your naming conventions?

51:15 - If Gatsby is best for static websites and Next is best for apps, how does Create React App compare?

54:30 - How much is too much or too little magic in a framework or library?

58:11 - Does Kait ever get tired of you buying a bunch of stuff?

61:45 - What is your office setup?

64:01 - How long until we can use Suspense for data loading with libraries other than Relay?

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Key points in this episode

In this Hasty Treat, Scott and Wes talk about making courses — techniques, best practices, things to avoid, and more!


Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.

Show Notes

3:07 - Validating your ideas

4:44 - Generating ideas

6:38 - Figuring out which ideas will stick

10:00 - Show your expertise

14:02 - Pay attention to what’s popular

15:50 - Collect email addresses

Links

Tweet us your tasty treats!

Key points in this episode

In this episode of Syntax, Scott and Wes talk about how to get better at problem solving — one of the most important skills to build as a developer.


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.

Prismic - Sponsor

Prismic is a Headless CMS for your next front end project. Create complex content type, relate data, and have your clients edit it all with the Prismic UI. Then pull the data into your project with their JSON or GraphQL API. Try it out with your next project - Gatsby, React + Apollo, or any other language. Check out their examples to get you started at Prismic.io/syntax.

Show Notes

2:43 - Gather info

  • What is this thing trying to do?
  • Use tools
  • DevTools are your best friend during this phase

8:01 - Know where to look (and use tools)

  • Dev tools for client side
  • Error logs
  • Sentry
  • LogRocket
  • The most experienced people in any field know how to ask the right questions.
  • Some of this will come with experience and nothing else. If you’ve seen a problem before, it’s easier to solve.

10:00 - Look at the end game

  • What are you really trying to do here? Don’t focus so much on the tech that you miss the bigger picture.

13:17 - Read Again

  • Error logs provide the best clues. Read them closely.
  • Actually read your code — don’t skim it.
  • Write comments while reading it, or follow existing comments — good for documenting, but also for structuring your thoughts.

18:08 - Make it simple (break it into smaller parts)

  • Limit the number of inputs and outputs
  • Get it working in a limited capacity (e.g. safe mode, Codepen, etc.)
  • Comment out major sections of code until you have a working example
  • Does this problem exist outside of the framework?
  • Does this work in a clean environment?

25:35 - Take yourself out of your environment

  • You should be able to take a look at the problem at all zoom levels
  • Does it work locally but not on the server?
  • Does it work in other browsers?

27:32 - Stay calm

  • It’s easy to get nervous or worked up when the stakes are high
  • It won’t serve you to panic. If you are panicking, take a 10 min walk to deep breath
  • Take a shower, lift weights (seriously)

30:14 - Talk it over

  • Getting the perspective of another developer can be invaluable

32:28 - Make things obvious

  • Use debugger or label logs — don’t let it be ambiguous
  • For CSS bugs, use primary colors to make things stand out
  • Use the right tool to make the problem stand out
    • Layers for CSS issues
    • Network for network issues
    • Performance tab (etc.)

35:12 - Use Git correctly to free up your techniques

  • If you’re code commits are up to date, you can heavily modify code without fear of deleting things — just revert to a previous commit once you find the issue and fix.

36:10 - Don’t jump at solutions

  • Take the time to fully dissect the problem
  • Question you assumptions
  • It can’t possibly be a problem with ____. Well maybe it is.
    • Wes once spent hours trying to diagnose a check engine light when the gas cap was lose.

43:51 - Get good at pattern matching

  • This comes with experience
  • When did this problem start?
  • Did we deploy any code? Did we change any logic?

44:54 - Get good at googling

  • Being able to describe your problem is key.
  • Search the error from Firefox

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Key points in this episode

In this Hasty Treat, Scott and Wes talk about tips for writing good CSS.


Sizzy - Sponsor

Sizzy - The browser made for developers and designers. Stop manually resizing your browser window and switching between devices so you can test responsive design. Speed up your workflow by developing and previewing your website on multiple devices at once. Sizzy includes powerful features and plugins that will help you take your web development game to the next level. Sizzy.co.

Show Notes

4:08 - Use a system

4:50 - Use overrides and cascading

  • Embrace the cascade
  • Don’t rewrite the same CSS over and over again
  • Understand why scoping is good

9:07 - Nail down typography early

  • You can always revisit if it isn’t what you need

10:36 - Pick a pattern and stick to it

  • BEM
  • Functional CSS
  • CSS in JS

14:39 - Don’t style based on element type (kind of) — a class should describe the component

17:09 - Good naming techniques

  • Describe what it is, not what it looks like
  • Thing
    • ThingChild
      • ThingChild-modifier
  • Scale sizes (e.g. s, m, l, xl)

21:43 - Other tips

  • Group like CSS together
  • Chunk into different files
  • Write good comments
  • CSS properties FTW

Links

Tweet us your tasty treats!

Key points in this episode

In this episode of Syntax, Scott and Wes talk about design foundations for developers — tips to follow that will make your designs better!


Sanity - Sponsor

Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.

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.

Show Notes

6:35 - Our backgrounds in design

12:41 - Foundations

  • Consistency makes a big difference
  • Use “training wheel” tools until you are confident
  • Always work within a system
  • Less is more - subtle is better

19:39 - Color

  • Color theory
  • Complementary colors and shades
  • Stick to color pallet generators until you are good enough

28:51 - Spacing

  • More spacing than you think you need
  • Vertical rhythm
  • Letter spacing: -1px
  • Consistent margin and padding

34:47 - Typography

  • Sans vs serifs
  • Finding fonts
  • Use proven combinations until you know your way around

41:49 - Interaction

  • Design for all states (e.g. standard, visited, active, hover, etc.)
  • Animations should be quick
  • Interactions should make sense

45:04 - Concerns beyond visuals

  • Accessibility via color contrast
  • Thin fonts and light grey are awful
  • Think about the poor Windows users

48:47 - Inspiration + Resources

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Key points in this episode

In this Hasty Treat, Scott and Wes talk about domain names — buying and selling, best practices and more!


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

2:50 - Buying a domain

10:47 - Selling a domain

13:50 - Transferring a domain

Links

Tweet us your tasty treats!

Key points in this episode

It’s another potluck! In this episode, Scott and Wes answer your questions about Gatsby vs Next, Google Home and privacy, flat file CMS, working with designers, CSS frameworks and more!


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.

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.

Show Notes

6:15 - Q: Curious if you would ever consider running your course platform on Gatsby instead of NextJs? If not, what dynamic content would prevent you from doing so?

10:48 - Q: What’s the difference between a software developer and a software engineer, in your opinion?

13:11 - Q: How do you deal with designers who design without any thought about how dev will implement it?

15:46 - Q: I saw that Wes has an example in one of his slides where the Array prototype is written onto the Nodelist prototype. Is this safe enough for production as it overrides all regular NodeList behavior?

19:18 - Q: In a potluck episode you mentioned that you do not host your clients’ website. If you don’t host you clients’ website how do you usually go about handling clients that are less tech savvy? Or do you avoid those types of clients?

21:30 - Q: I know you guys (especially Wes) have been pretty insistent recently on not hosting clients’ sites yourself, but what do you guys think about continuously hosting client sites with a service like Netlify? It’s highly unlikely to go down and scales all for you, so it might be a bit of reoccurring income if you bill them yearly for the minimal Netlify fees.

24:44 - Q: I was listening to your episode on “The Smart Home” and I’m very interested in buying a Google Home Mini myself. However, I cannot stop thinking about the privacy implications of an always listening device around the house. What are your thoughts on this topic and on privacy related to online services in general?

29:08 - Q: What are your thoughts about using a CMS that uses flat files vs one that uses a traditional MySQL or Postgres database for a company blog that won’t have insane traffic? We’re currently evaluating Grav CMS and Craft CMS.

32:17 - Q: Have you used data attributes as custom elements in CSS and JS?

37:32 - Q: Why do so many people jump on styled-components/CSS in JS? Are these all people who have never used Sass/SCSS?! It seems like such a PITA to get Sass working with either of these. It feels like coding tables vs HTML 5. To me it seems like a step backwards.

44:26 - Q: When do you, if ever, reach for a component library, like Material or Bootstrap? Currently working a corporate job where it’s almost expected to use one of these for all internal applications. I usually prefer to make my own, but I’m wondering if I’m just making my life more difficult than it needs to be? Any advice?

48:30 - Q: Could you guys chat about Git clients and which ones you guys use and why? Or are you guys hardcore terminal geeks?

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Key points in this episode

In this Hasty Treat, Scott and Wes bring you more web dev horror stories!


Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.

Show Notes

2:26 - Perf Woes

3:42 - Always Backup Your Backups

4:54 - Kill Children

6:03 - Robots Don’t Eat Food

8:32 - Email Goof Up

9:44 - Hundreds of Thousands of Date Issues

10:46 - Spooky August

12:32 - You’re up to .bat

13:17 - Printed Code

15:12 - ThinkGeek

16:12 - It would take a while to Ketchup on all these orders

17:05 - This story makes me want to stick my head in async

Tweet us your tasty treats!

Key points in this episode

In this episode of Syntax, Scott and Wes talk about web dev horror stories — things you can only hope will never happen to you!


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.

Sanity - Sponsor

Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.

Show Notes

2:09 - Scott’s Disastrous Git Clean

4:35 - Magic Updates the Gathering

8:52 - YAAAAS

9:37 - Token Trouble

12:16 - jQuery Plugins

15:22 - Success!

18:00 - Parental Advisory

21:47 - Students Changing Grades

22:46 - Lorem Sh!tsum

26:22 - Drowning in a Waterfall

28:53 - Magneto Upgrades

30:00 - JOHN CENA

33:24 - Migration Migraine

35:39 - Primary Key Nightmare

36:26 - The $20,000 YAML formatter

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Key points in this episode

In this Hasty Treat, Scott talks about moving to iPhone — his experiences with both Android and iOS, the advantages and disadvantages of both, and more!


Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.

Show Notes

1:59 - My device history

  • OG Droid → Nexus → Pixel
  • Misconceptions of android
    • It’s Windows for phones
    • It’s cheaper or not as nice

5:03 - Why switch?

6:39 - Who wins what?

  • Android

    • Homescreen
    • Low light photography
    • Usability
      • Squeeze assistant
      • Google search integrated everywhere
    • Search
    • Keyboard
    • Notification
  • iOS

    • Apps
    • Performance
    • Camera overall
    • Device quality
    • Fun stuff
    • Haptics

Links

Tweet us your tasty treats!

Key points in this episode

In this episode of Syntax, Scott and Wes talk with Brad Touesnard of Delicious Brains about migrating, deploying, and hosting WordPress.


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.

Hasura - Sponsor

Hasura is an open-source GraphQL engine that helps you instantly setup a scalable and realtime GraphQL backend. Hasura makes your team super productive by dynamically composing a schema backed by databases and services that you can securely query from frontend clients. Get started at hasura.io to try it out in 30 seconds!

Show Notes

3:50 - Why did start Delicious Brains?

5:25 - What plugins does Delicious Brains make?

11:40 - Migrating WordPress

16:50 - Migrating databases

24:20 - How do you do version control with WordPress?

37:06 - What’s the easiest way to deploy and host WordPress?

40:23 - What are some examples of managed WordPress hosts?

46:58 - What does your deployment process look like from beginning to end?

50:22 - Thoughts on headless WordPress

53:12 - Is serverless WordPress a thing?

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Key points in this episode

In this Hasty Treat, Scott and Wes talk about server side rendering — what it is, how to use it, best practices, things to avoid, and more!


Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.

Show Notes

3:20 - What is SSR?

4:16 - Why SSR at all?

8:39 - Platforms that do SSR out of the box

11:18 - Gotchas

  • useLayoutEffect
    import { useEffect, useLayoutEffect } from 'react'
    const useIsoLayoutEffect =
    typeof window !== 'undefined' ? useLayoutEffect : useEffect
    export default useIsoLayoutEffect

18:20 - Tools

Links

Tweet us your tasty treats!

Key points in this episode

In this episode of Syntax, Scott and Wes talk about server side fundamentals — the important things you should know if you’re interested in diving into server side.


Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.

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.

Show Notes

2:53 - Requests and responses

9:21 - What is a server?

10:33 - Ports

13:50 - Database connection and interaction

15:16 - Cookies and sessions

15:48 - Writing files and directory permissions

19:34 - Headers

22:13 - Error Handling

22:50 - Logs

25:04 - Async data handling

26:33 - Routing

30:44 - Mime types

36:26 - Authentication

37:49 - Environmental variables

40:37 - Deployment

43:24 - Advanced

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Key points in this episode

In this Hasty Treat, Scott and Wes talk about their experiences with float tanks!


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

2:28 - What is a float tank?

6:47 - What are the benefits?

8:50 - How did you feel during the float?

17:28 - Would you do it again?

Links

Tweet us your tasty treats!

Key points in this episode

It’s another potluck! In this episode, Scott and Wes answer your questions about freelancing, handing off projects to other developers, terminal configs, podcast apps, how much flexbox is too much flexbox, npm dependencies, and more!


Sanity - Sponsor

Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.

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.

Show Notes

3:49 - Q: I’m interested in freelancing full-time and have some projects, big and small, lined up over the next few months to work on the side. How much work is a good amount of work to transition into freelancing full-time?

9:52 - Q: How much flexbox is too much flexbox? Is it a bad idea to use a dozen flexboxes for a viewport-filling application?

13:19 - Q: Can you explain the “potential” benefit of resetting CSS and whether it’s necessary? In which circumstances should we use such an approach?

15:26 - Q: I would love to hear an episode, or potluck segment, about your shell/fish/zsh configs. Maybe explain little tweaks you’ve made and why you’ve chosen the shell you use.

23:26 - Q: I always get confused on when and how to use .bind() method. Any pointers on when I should use .bind(), like in what situations? I also see it used a lot in React apps, but have no idea why they are using it. Could you explain this in detail?

27:02 - What are your suggestions for handing off client sites for freelance work? I don’t take many contracts (I have another full time job) but I’ll take one here or there during summer to supplement a little bit. I’m finding it difficult to make a clean hand-off when the project is finished. The contractual requirements are met and like anything, there are always tweaks to be made. I’ll handle some minor deployment issues without billing, but I struggle with where to draw the line. What suggestions do you have?

35:19 - This question is for Wes. I live in Central New York, and every time I go on the highway heading north or south I see several Ontario license plates. Where are ya’ll going all the time? Is there a secret Canadian spot down here?

38:20 - Each time I re-open an old project I lose so much time with npm dependencies being outdated and it drives me mad! I’m starting to dislike npm and everything around it, but is it npm only? How does other languages like php, python or GO handle this mess of dependencies? Are we better today than yesterday and I’m just complaining about nothing?

43:50 - Which podcast player do you use (Android, PC, or other phone/tablet), and why? Where do you listen to them?

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Key points in this episode

In this Hasty Treat, Scott and Wes talk about feature and release planning — dealing with bugs, task management, best practices, and more!


Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.

Show Notes

4:06 - Wes:

  • Features are logged into software (Github, Jira, etc.)
  • I use a Kanban board - I bubble them up and down in the order in which I want to release them
  • I don’t plan for Q1, Q1, etc…
  • Tear off an issue, tackle it, test and deploy.

10:39 - Scott:

  • All issues/features get a priority tag (e.g. p1 → p4) regardless of the system
  • Bugs go in Github
  • Features and platform improvements go in Notion
  • Table of priorities (with git branch, lead dev, release number, emoji icon, what it contains, etc.)

Links

Tweet us your tasty treats!

Key points in this episode

In this episode, Scott and Wes talk with Etienne Lemay, developer of Missive, about his experience building Missive, best practices, and the pros and cons of building desktop and mobile apps with a single codebase.


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.

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.

Show Notes

0:57 - What is Missive?

6:10 - What is the desktop app built in?

9:44 - Did you use any particular libraries for the front-end?

11:44 - How are you managing state?

13:37 - Is it challenging to do all of this in JS?

15:07 - What was the catalyst for the “multi-conversation swipe”?

21:32 - What is the mobile app built in?

24:00 - What are the advantages of Cordova?

30:30 - How do you manage offline/syncing/etc. so well in a JS app?

34:56 - How do you test it?

36:52 - Have you looked into Cypress?

39:35 - How do you style it?

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Key points in this episode

In this Hasty Treat, Scott and Wes are talking about developing better habits — strategies, avoiding distractions, best practices, and more!


Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.

Show Notes

2:03 - Habits we’re trying to build

  • Scott
    • Focus on one project at a time
      • Alfred tasks to quit apps and block sites
    • Not being efficient with my time
      • Daily todo lists and utilizing calendar
    • Too much screen time
      • Listening to music in the background instead of having the TV on
  • Wes
    • Flossing
    • Mindless context switching

13:37 - General strategies for building habits

  • Make them trackable
    • Easy enough to not ignore them
    • Quantifying them is key
  • Make them small enough
  • Be accountable
    • Tell other people your habits and have them remind you about them
  • Replace bad habits with good things
    • Design a sticker
    • Reply to three emails
    • Drink some water
  • Celebrate your wins productively
  • Keep the streak alive
  • Can’t do x until y is done

Links

Tweet us your tasty treats!

Key points in this episode

In this episode, Scott and Wes are trying something new! It’s called Practical, in which Scott and Wes take a topic and flesh out all the theory into something super practical. Today’s topic comes from a listener question asking how they would build a simple version of a modern web app like Twitter, Reddit, or Airbnb.


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.

Sanity - Sponsor

Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.

Show Notes

3:03 - Backend

14:45 - Frontend

  • React
  • Next.js
  • Styled components
  • Stay as close to real CSS as possible

22:39 - Deployment process

  • Serverless
  • Now
  • Ideally one app that handles everything

28:38 - Email

33:32 - Users / Auth / Cookies / Permissions

  • Use something a pre-existing package or service rather than role your own (though it can get expensive quickly)
  • Passport
  • Auth0
  • accounts-js

38:48 - Images

41:50 - Other things to be aware of

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Key points in this episode

In this Hasty Treat, Scott and Wes are talking about automation — apps, workflows, resources, and more!


Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.

Show Notes

3:16 - Alfred workflows

9:32 - Smart home routines

13:16 - Bash scripts & aliases

18:43 - Other

Links

Tweet us your tasty treats!

Key points in this episode

It’s another potluck! In this episode, Scott and Wes answer your questions about webpack, serverless, agencies, recruiters, CSS Grid, media queries and more!


Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.

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.

Show Notes

5:06 - Q: What do you think about webpack vs parcel vs the old way (gulp, etc.)?

11:30 - Q: What is your opinion on AWS Lambda functions?

15:42 - Q: How do you push new Syntax.fm episodes into production? Each episode is written in markdown. Do you have a different branch for each episode and merge into master? What’s your strategy to avoid releasing the episode before the intended date?

21:24 - Q: Can Scott share some of his experiences working at an agency? Are there any red flags for when you should jump ship?

30:44 - Q: Whats the deal with recruiters? How do they work, and should you use one to land a new job?

36:46 - Q: What do you think about Upwork? Is it possible to find cool full-time jobs there or is it only ‘work for beer’?

41:28 - Q: If my website is already fast, why should I sacrifice my developer experience and learn a new syntax?

44:17 - Q: Will there be a CSS grid inspector on Chrome? Do you use any 3rd party grid inspectors or stick with Firefox’s CSS grid inspector?

46:39 - Q: What the best way to handle media queries in Gatsby with styled components?

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Key points in this episode

In this Hasty Treat, Scott and Wes are playing a game! It’s called the TLD game, where Scott and Wes try to stump each other with questions about top level domains.


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

1:55 - The rules of the game

We pick a TLD from a list, and the other person needs to guess:

  1. Is it for a country or business? -5 points
  2. What country, business, or type of business is it for? -5 points
  3. How much per year does it cost to register? You may also say “unregisterable” +/- off by $$
  4. is scott.___ and wes.___ available? -10 for each

5:40 - .BO

7:51 - .BZH

9:50 - .BANANAREPUBLIC

11:15 - .BABY

14:04 - .KR

16:09 - .MOTO

17:25 - .AW

19:16 - .IM

Links

Tweet us your tasty treats!

Key points in this episode

In this episode, Scott and Wes talk about how they make courses — recording, editing, hosting, best practices, and more!


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.

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.

Show Notes

5:42 - Recording

33:04 - Editing

  • Wes:

    • Screenflow
    • Speed up slow typing
    • Edit out some goof-ups (but not all)
    • Edit immediately after recording so I’m in the same headspace and can easily re-record
  • Scott:

    • Hire a video editor
    • Cut out all blank spaces in audio, because I know that pauses are typically where I stop to think
    • Normalize audio
    • DaVinci Resolve 16

42:31 - Hosting

52:46 - Common Questions

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Key points in this episode

In this Hasty Treat, Scott and Wes talk about moving from PHP to Node — pitfalls to avoid, best practices and more!


Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.

Show Notes

3:43 - Servers need to be started and baby sat

4:48 - There is no built-in file system based routing

6:34 - Some "gotchas"

7:02 - Functional programming

8:17 - Async vs sync

11:11 - Event lifecycles

12:09 - Dependencies

14:17 - Keyed arrays

Links

Tweet us your tasty treats!

Key points in this episode

In this episode, Scott and Wes talk with Drew Conley about building games with Javascript.


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.

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.

Show Notes

1:58 - What is Danger Crew?

5:25 - Did you have a background in game dev before this?

8:36 - What were the initial resources you went to to make a game in React?

10:27 - How much of it is Canvas?

13:06 - What other libraries are you using?

14:00 - How did you lay out the environments?

16:35 - How is text rendered?

22:40 - How did you do all of the animation?

26:08 - What performance issues did you run into?

27:31 - How do you handle user states and saves?

29:21 - Is there any server side aspect?

30:42 - What was the process for creating the level editor?

34:38 - How did you publish the game / wrap it as an executable to sell?

38:16 - How do you update it?

39:43 - How difficult was creating the game logic?

41:20 - The dev theme in the game is super prominent, did that make working on it more fun?

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Key points in this episode

In this Hasty Treat, Scott and Wes are back with another edition of Stump’d! where they try to stump each other with interview questions.


Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.

Show Notes

3:54 - What is the difference between NULL and undefined?

5:40 - What is short circuit evaluation in JS?

7:25 - What is use strict?

9:07 - What is the only value not equal to itself in JS?

10:36 - When would you create a static class member?

11:54 - What is a pure function?

13:08 - What is JSONP?

14:24 - Describe the layout of the CSS box model?

Tweet us your tasty treats!

Key points in this episode

In this episode, Scott and Wes talk about creating APIs — what’s happening behind the scenes and why it’s important.


Sanity - Sponsor

Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.

Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry and using the coupon code “tastytreat”.

Show Notes

2:15 - How do you build an API from scratch?

3:54 - Choose an API type

8:15 - Setup some sort of server that will accept requests and send responses

11:11 - Document the endpoints

  • What is the end point
  • What parameters are required
    • Filters
    • Sorting
  • Headers required
  • What you get back when you hit this endpoint
  • Any request limits
  • Examples in common languages
    • JS
    • PHP
    • Ruby

21:20 - Naming

  • Make it obvious

27:39 - Securing

32:42 - Protecting

36:00 - Write resolvers

  • Modify data if needed
  • Send back the data requested
  • Send back the correct HTTP code
  • Log what happened

37:56 - Tools

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Key points in this episode

In this Hasty Treat, Scott and Wes talk about Svelte 3 — initial impressions and more!


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.

Show Notes

2:16 - What is Svelte?

11:32 - Sapper

13:05 - Svelte Native

14:58 - Questions we have

  • What’s the Typescript story here?
  • How hard would it be to convert a large React app to Svelte?
  • Will Svelte be able to capture the market share it needs to grow and compete?
  • Would you (Wes & Scott) use this?

Links

Tweet us your tasty treats!

Key points in this episode

It’s another potluck! In this episode, Scott and Wes answer your questions about deploying applications, the value of Typescript, live coding via Twitch and more!


Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry and using the coupon code “tastytreat”.

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.

Show Notes

1:35 - Q: I prefer using grid-row and grid-column instead of grid-area. But is grid-area more performant? For example, in Flexbox, it’s a best practice to use the shorthand flex property instead of writing out flex-grow, flex-shrink and flex-basis.

4:04 - Q: Do you have any advice how to deploy an application? What do you think about AWS, Zeit, Heroku, Firebase? Do you use automation tools like Circle CI or Buddy.works? I also wonder if we should keep whole application on one server, or split it up.

9:36 - Q: A career advice question: I’m best at being a front-end/javascript developer - but in a quest to my make job(s) easier, I’ve also been getting into fullstack architecture - namely CI/CD (TravisCI, GitlabCI) and Kubernetes. I’m feeling like I’m spreading myself a little thin, and I guess I’m just finding it a bit frustrating (configuring Kubernetes is a lot of bashing your head against the wall). I know that my skills as a front-end developer are already valuable, whereas I can’t say the same for my Kubernetes/CICD skillset. I’m wondering whether I should narrow my scope a bit. Maybe this is just the frustrating hump I’m climbing over, and in six months I’ll be happy with where I’m at, but interested to hear your thoughts. One thing I’ve been thinking about is, maybe I should step back from the network architecture type stuff (ie. Kubernetes) and focus more on DevOps that is closer to the front-end stack (ie. writing tests, VSCode tooling, commit hooks, CI tools, etc.).

13:07 - Q: Do you think Typescript adds value to React, or more complexity than value? When should you choose Typescript for a project?

18:09 - Q: I am in a well known Bootcamp, and as of right now (from what they have taught us) this is what I am working with: HTML/CSS, JavaScript, jQuery, Node, Express, SQL, Auth, MVC, APIs, React, Redux. As we finish off the program, they are going over Java. I do want to learn Java, however I feel like my time would be better spent fine-tuning my knowledge on my stack. And I can learn Java at some other time. Do you recommend that I fully engage with Java and try to absorb some of the basics and fundamentals now, or do you recommend that I take this last month we have here and strengthen my current skills so I do better during my technical interviews? And by the way thanks for everything you do, it helps :)

22:02 - Q: Have you seen the live coding going on at Twitch? Thoughts? Maybe a Syntax stream in the future? There’s a good list at livecoders.dev. Thanks for all you do. Keep killin’ it!

26:11 - Q: How do you handle people (i.e. C# bastards) who think JavaScript is a joke and is going to be overthrown by Blazor or some other C# library framework? Can’t we all just get along and live in the same industry? I’m having a hard time being the adult in these kinds of responses around the web, and in random discussions with people I know very well.

29:55 - Q: There are plenty of places saying that it is important to secure API keys by not embedding them in front-end code. Cool. I’m on board! But there is not many that tell you specifically how to do this. How do you safely use an API key in a CRUD project?

34:15 - Q: Do you plan to launch a Syntax.fm app?

45:49 - Q: I was hired as a junior developer at a company in the last year. It’s my first development job and I was so excited. The interview and application were all about React and fullstack development. However now that I’ve been here a while, I have found out the company does primarily dev ops work. None of this was mentioned in the interview or application, but it looks like soon it will be the majority of my workload. I am feeling very discouraged and was wondering what you guys would do in this situation?

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Key points in this episode

In this Hasty Treat, Scott and Wes talk about documentation libraries, starting and maintaining projects, how to publish React components to NPM, and more!


Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.

Show Notes

2:40 - Create React Library

6:55 - Documentation libraries

10:54 - What I’m building

13:13 - Linking library to projects

14:52 - Improvements and community thoughts

Links

Tweet us your tasty treats!

Key points in this episode

In this episode of Syntax, Scott and Wes talk about state in React: local state, global state, UI state, data state, caching, API data and more!


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.

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.

Show Notes

3:38 - What is state?

4:58 - What kind of things are kept in state?

  • Data
    • Temporary client side data
      • From forms, button clicks, etc.
    • Cached server data
    • Data from API
  • UI status
    • AKA isModalOpen
    • isToggled

12:48 - Global state vs. Local state

  • Ask yourself: does the data need to be accessed outside this component?
    • If data does need to be accessed a little higher, you can simply move where that state lives. React calls this “lifting state”.
  • Do you count Apollo API calls as global state?

21:15 - Managing Local state

  • useState, setState
  • Passing state & update functions down
  • State machines

31:12 - Approaches to Global state

  • Redux

    • Complicated, hard to learn
    • Very useful, organized and structured
    • Actions, reducers and more
    • Time traveling do to nature of store
    • Immutability
    • Tons of Redux based hooks libs
  • Mobx

    • Based on Observables
      • An Observable is like a Stream and allows to pass zero or more events where the callback is called for each event. Often Observable is preferred over Promise because it provides the features of Promise and more.
  • Context

    • Functions just work and update global state.
    • Downside is there are no fancy tools
  • Apollo

    • Apollo quires for data in global cache
    • Apollo client for global UI state
      • Not quite there, isn’t super elegant

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Key points in this episode

In this Hasty Treat, Scott and Wes talk about remote internet! Remote internet is an important because it opens up living options to developers as the industry moves toward more remote work.


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 for more info.

Show Notes

4:31 - Remote internet options

7:55 - Modems and routers

10:52 - Antennas

13:47 - Boosters

14:54 - Plans, data and speeds

20:11 - Other things to think about

Links

Tweet us your tasty treats!

Key points in this episode

In this episode of Syntax, Scott and Wes talk about blogging — both the specifics of content (how to make great content), as well as the mechanics of where and how to publish blog posts.


Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.

Sanity - Sponsor

Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.

Show Notes

7:06 - What are some of the different platforms for publishing a blog?

23:41 - How to structure a blog post?

29:10 - How to direct traffic to a blog post?

38:51 - How do you make technical content in-depth and also succinct?

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Key points in this episode

It’s another VSCode episode! In this Hasty Treat, Scott and Wes talk all the things they love about VSCode — things to learn, how to get around more quickly, using keyboard commands, being more efficient, using snippets and more!


Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry and using the coupon code “tastytreat”.

Show Notes

2:14 - Things to learn

  • Jump by word, line
  • Select by word
  • Command Palette (cmd + shift + p)
  • Move and copy lines - option up down or with shift
  • Multi cursor
  • Find and replace in files
  • Use the Insiders build if you like updates every day

11:03 - Keyboard commands

  • Cmd + b to hide sidebar
  • Cmd + shift + x

13:55 - Snippets

Links

Tweet us your tasty treats!

Key points in this episode

It’s another Syntax potluck! In this episode, Scott and Wes answer your questions about remote work, AI agendas, motivation, fitness, the future of coding, and much more!


Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry and using the coupon code “tastytreat”.

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.

Show Notes

2:03 - Q: I hear you both talk about “state” a lot in your podcasts. And while I understand a little about it, I never understand it in the context you both use it. Can you enlighten us?

6:52 - Q: I have an idea for a project that is suited for web sockets, push text/images/documents to a bunch of users in real time. I just learned about Firebase’s real-time database, and it looks like it would be pretty easy to implement my idea. What are your thoughts, pros/cons, of these two technologies?

10:42 - Q: How’s your fitness going?

12:15 - Q: Let’s say both of you gents were junior developers that had basic knowledge and skills in HTML, CSS and JavaScript but you had all the experience and knowledge of how to best master those skills and where the industry was heading. What would be the outline and focus of your road-map knowing what you do now?

17:22 - Q: Is it worth it to find a remote dev job at an early stage of your career? Considering the stuff I learn from my seniors and other devs on the team, I wonder if I will lose the opportunity to learn stuff from my team members?

19:49 - Q: How do I keep myself motivated in coding?

22:47 - Q: What’s y’all’s opinion on using some obscure (at least in my opinion) features of a language, such as Javascript bitwise operators, in a production app that dozens of other engineers maintain, and will continue to maintain long after you leave the company? It seems hard to read and immediately understand, which possibly makes it harder to debug/refactor in the future. Is it the responsibility of future devs to learn if they don’t know, or should you find a different way to code the solution in the first place?

26:00 - Q: Wes, I keep hearing you talk about working from your Dropbox. Do you sync up everything? Even things like your node module folders?

29:26 - Q: Have you talked about Firefox Developer Edition? It looks like it should be very useful, but I can’t quite make the transition.

32:58 - Q: Hey guys, what your opinion of CSS naming convention methodologies such as BEM?

35:04 - Q: I would like to refer to the question from ep 140 about fronted development possibly dying. I don’t feel satisfied with the answer, so maybe I could state the question differently: With the machine learning being developed rapidly in recent years, will the web change, causing reduction of front-end jobs? Maybe we will just be training smart algorithms and developing them instead? What do you think?

40:32 - Q: How do you deal with anxiety and fear during interviews that might hinder your ability to give the best impression of yourself or solve coding challenges?

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Key points in this episode

In this Hasty Treat, Scott and Wes talk about more of their favorite VSCode tasty treats - extensions, features, keyboard shortcuts and more!


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 for more info.

Show Notes

3:45 - Extensions

9:36 - Features

  • Indent lines in explorer - Workbench > Tree Indent & Guides
  • Breadcrumbs
  • Commit all & visual git commands
  • Change branch in lower left
  • Rename Symbol

Links

Tweet us your tasty treats!

Key points in this episode

In this episode of Syntax, Scott and Wes talk with Harry Dry about the crazy story behind his Kanye West dating site, how he taught himself to code, and how to come up with cool side projects!


Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry and using the coupon code “tastytreat”.


Sanity - Sponsor

Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.


Show Notes

2:30 - How did you get into web dev and come up with the idea for the Kanye West dating website?

10:29 - Do you have a background in design?

13:05 - What’s your story?

15:28 - Do you wear yeezys?

36:26 - What made you decide to take this story and make a bit site out of it? What was the plan?

40:45 - How did you learn to code? How did you decide what to learn next?

45:30 - How do you push through hard problems?

48:50 - Any final advice to offer?


Links


××× SIIIIICK ××× PIIIICKS ×××


Shameless Plugs


Tweet us your tasty treats!

Key points in this episode

In this Hasty Treat, Scott and Wes talk about all of their favorite web dev resources — a full episode of sick picks!


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.


Show Notes

2:03 - Twitter Accounts

5:00 - Web Dev Resources

7:37 - Design Resources

11:36 - Desktop Tools

14:59 - YouTube


Links


Tweet us your tasty treats!

Key points in this episode

In this episode of Syntax, Scott and Wes talk about the fundamentals of JavaScript - the set of core skills you should know before branching off into other frameworks, libraries, etc.


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.


FreshBooks - Sponsor

Get a 30 day free trial of FreshBooks at FreshBooks and put SYNTAX in the “How did you hear about us?” section.


Show Notes

3:07 - Variables + Scoping

  • var/let/const
  • Block scope
  • Function scope
  • Scope lookup

6:06 - Types

  • Objects
    • Reference vs. copy

7:15 - Functions

  • Types of functions
    • Anonymous vs. named
    • Expressions
    • Arrow functions
  • Methods

9:33 - DOM

  • Selecting
  • Updating
  • Creating

15:07 - Prototypes + this

  • this
  • Objects

20:16 - Events

  • Listening, callbacks
  • dispatchEvent
  • Bubbling

22:05 - Arrays

  • Push, pop, manipulate
  • Spread, rest
  • Map, filter, reduce
  • Arrays vs. objects
  • Mutation vs. immutable

26:25 - Flow control

  • Looping
  • If
  • Promises + Async + Await

29:47 - Security and accessibility

  • XSS and innerHTML

32:04 - Things you should know, but not necessarily master

  • Modules
  • Closures
  • Ajax requests

35:26 - Clean code


Links


××× SIIIIICK ××× PIIIICKS ×××


Shameless Plugs


Tweet us your tasty treats!

Key points in this episode

In this Hasty Treat, Scott and Wes talk about everything they love regarding VSCode: themes, fonts, extensions, techniques and more!


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 for more info.


Show Notes

3:18 - Theme

4:58 - Fonts

7:12 - Five things we love


Tweet us your tasty treats!

Key points in this episode

In this episode of Syntax, Scott and Wes talk with Jason Bahl (author of WPGraphQL) about GraphQL, headless WordPress, frameworks in WordPress, React in WordPress, and more!


Sanity - Sponsor

Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.


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.


Show Notes

4:55 - Data in WordPress

6:26 - WPGraphQL

10:31 - What were your initial thoughts/first experiences with GraphQL?

16:58 - Does it use MySQL queries or wpQuery?

19:36 - How does authentication work?

24:38 - What does the WP local dev experience look like in 2019?

26:49 - What about deployment? How do you handle migrating data?

30:10 - How does WPGraphQL handle mutations?

32:46 - What are the preferred hosting methods for a headless WordPress setup?

36:44 - Do you see any push back about giving up much of what WordPress gives you out of the box?

41:23 - What are techniques for preventing all of WordPress from loading When you’re using it exclusively for the API?

43:40 - How does WPGraphQL support custom post types, taxonomies and fields, etc?


Links


××× SIIIIICK ××× PIIIICKS ×××


Shameless Plugs


Tweet us your tasty treats!

Key points in this episode

In this Hasty Treat, Scott and Wes talk about front end security and what to do in order to avoid hacking.


Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry and using the coupon code “tastytreat”.


Show Notes

2:53 - SSL

  • Encrypted transfer of information
  • Digitally binds a cryptographic key to an organization’s details
  • Web-cam, geolocation, etc.

6:15 - innerHTML

  • React’s dangerouslySetInnerHTML
    • Name intentionally chosen to be frightening
    • Allows you to write HTML to the DOM
    • Data should be sanitized before used in prop
      • Removes unexpected data from string
      • Used to prevent cross site scripting attacks

10:25 - Don’t trust the client

  • The client can be manipulated to send any info to your server
  • E-commerce example — don’t take the price total from the front end to make the charge, DB call and calculate on the server
  • Validate form inputs via HTML 5 field validation/check data types on the server
    • Don’t allow your users to send an object when it should just be a string
    • Get this for free with GraphQL via types

13:41 - PCI Compliance

  • Protect card holder data
    • SSL or Secure iFrame
  • Encrypt transmission of card data
  • Restrict access to card holder data
  • Restrict physical access
    • Front of front-end

16:44 - Tips

  • Don’t put a name on sensitive fields if you are using JS
  • HTTP only cookies
  • Local Storage tokens
  • XSS


Links


Tweet us your tasty treats!

Key points in this episode

In this episode of Syntax, Scott and Wes talk about the “fundamentals” of web development and what you need to know - HTML, CSS foundations and more!


Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry and using the coupon code “tastytreat”.


Freshbooks - Sponsor

Get a 30 day free trial of Freshbooks at Freshbooks and put SYNTAX in the “How did you hear about us?” section.


Show Notes

1:54 - Learning fundamentals vs framework specialists

  • Learning vs getting a job
  • Abstractions work well until they don’t and you need to debug them

HTML

7:58 - Semantic markup

9:15 - Accessibility basics

9:57 - Attributes

CSS

16:13 - Specificity

22:42 - Selectors

24:52 - Layouts

27:53 - Box model

32:50 - Positioning

36:42 - Forms and inputs

40:45 - Block vs inline vs inline-block

43:09 - Sizing units

44:40 - Typography

47:53 - Media Queries


Links


××× SIIIIICK ××× PIIIICKS ×××


Shameless Plugs


Tweet us your tasty treats!

Key points in this episode

In this Hasty Treat, Scott and Wes talk about headless CMSs - why to use them, how they work, pros and cons, examples and more!


Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry and using the coupon code “tastytreat”.


Show Notes

2:11 - What is a headless CMS?

  • It’s a system or CMS that has no front-end (aka head)
  • Allows you to use front-end specific tech (static generators/front-end frameworks) instead of the back-end to generate pages

4:37 - Some examples

  • Can be used with any type of website that can consume an API
  • WordPress API + Gatsby
  • Hosted Service + React App

7:06 - Why?

  • Separation of concerns - your data is in a single spot, and can be pulled into any app, website, marketing micro site, etc.
  • Keeps ergonomics of WordPress or $CMSHERE, while developers get to use what they like
  • Optimizes for performance with static builds
  • Hide the implementation details and back-end from view

10:19 - Live vs statically-generated website

10:55 - How?

  • Connects to API via normal fetch calls/GraphQL/whatever you use
  • Needs to host your back-end either as a service or on a host
  • Needs to host your front-end either on the same server as your back-end or on something specialized like Netlify


Links


Tweet us your tasty treats!

Key points in this episode

It’s another potluck! In this episode, Scott and Wes answer your questions about career changes, preprocessors, moving, “the gap”, hip hop and more!


Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry and using the coupon code “tastytreat”.


Sanity - Sponsor

Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on Sanity.


Show Notes

1:54 - Q: I am 33 with a wife and two young daughters, and am trying to change careers. My job pays $80,000 a year, but I hate it. My wife is ok with me doing university, but she wants me to stay at the job I don’t like. Should I stand my ground? Any tips on achieving my goals to make me happy, but also keep my family happy?

10:10 - Q: What is your advice to very junior/junior devs in writing cover letters for jobs? I wonder what to say without sounding canned and fake.

14:35 - Q: Scott, what was the stack you were using at Ford?

17:09 - Q: Other than reading the docs, how do you guys go about learning/trying out new technologies? Do you rebuild similar applications or pick out individual features you think are “sIcK”?

22:32 - Q: Is it always necessary to use setState in react when storing data (for example, a form input) even if you don’t intend on re-rendering the page, or can you get away without using state?

25:04 - Q: Development has a stereotype for being a young person’s game. As someone who started their career out of university, I often wonder how long I can sling divs for? Do you think you could make it to retirement age or do you think the game will change out from under you?

30:34 - Q: Scott, you’ve mentioned you love hip hop. Would you be willing to share any playlists of your all-time favorite hip hop artists?

32:08 - Q: What are your thoughts on HTML pre-processors? If you use one, which one(s) do you prefer and why?

36:04 - Q: What advice would you have for someone considering to “level up” their career by moving from a city with few tech jobs to a city with more opportunity for tech jobs? What are some of the biggest things to consider when moving possibly cross-country to further a career?

42:11 - Q: What are your recommendations in terms of resources for first time dads (and moms) like books, podcasts, etc. and generally good co-parenting advice for working professionals?

46:45 - Q: Loved the show with Travis. Had a question about “the gap”. Similar to design ambitions/taste surpassing current skill, when did you feel like your code had “grown up” and that you could actually DO what you envisioned with Javascript?


Links


××× SIIIIICK ××× PIIIICKS ×××


Shameless Plugs


Tweet us your tasty treats!

Key points in this episode

In this Hasty Treat, Scott and Wes talk about pushing yourself in uncomfortable areas to grow as a programmer, be a better developer, and become more efficient in general.


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 for more info.


Show Notes

3:50 - CCS Preprocessor parable

6:09 - Efficiency

10:40 - When to learn new systems

13:03 - Common pain points

14:42 - Pushing yourself to foster growth


Tweet us your tasty treats!

Key points in this episode

In this episode of Syntax, Wes is joined by Sara Soueidan, a freelance front-end UI developer and trainer. While Scott is taking a break to spend time with his new baby girl, Wes and Sara dive into all things SVG!


Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry and using the coupon code “tastytreat”.


Sanity - Sponsor

Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on Sanity.


Show Notes

6:05 - What are SVGs?

  • It’s an image you can edit

16:17 - Icon fonts

  • Better tools
  • Fails in certain areas
  • SVG sprite icons
  • Grunticon

24:24 - SVG files / Build tools

  • SVGO / SVGOMG

31:50 - Where to find SVGs

  • Noun project
  • Exporting from Sketch/Illustrator/Figma
  • Freepik
  • Iconmoon

33:48 - What is the viewbox?

40:39 - Animating SVG

43:41 - Accessibility & text with SVG

45:44 - Graphing with SVG

  • D3.js

47:58 - Filters


Links


××× SIIIIICK ××× PIIIICKS ×××


Shameless Plugs


Tweet us your tasty treats!

Key points in this episode

In this Hasty Treat, Scott and Wes talk about internationalization - how to deal with different languages, different currencies, and more!


Log Rocket - 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

5:48 - Intl.NumberFormat

9:17 - Intl.ListFormat

12:17 - Intl.DateTimeFormat / Intl.RelativeTimeFormat

14:27 - Intl.PluralRules


Links


Tweet us your tasty treats!

Key points in this episode

In this episode of Syntax, Scott and Wes talk about debugging — tools, techniques, and the mindset needed to debug a problem and get through it as quickly as possible.


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/syntaxfor more info.


Freshbooks - Sponsor

Get a 30 day free trial of Freshbooks at Freshbooks.com and put SYNTAX in the “How did you hear about us?” section.


Show Notes

1:41 - Tools

21:49 - Network requests

  • Doesn’t take place in your site/dom, so might not always have all info in your console, debugger
  • Network tab in dev tools shows you all requests going in and out of your app
  • Filters by type, sees length in request
  • Sees headers, responses and more
  • Failed requests will be red

26:50 - Debugging mindset

  • Check different browsers
  • Check the docs/examples
  • Isolate when possible
  • “What has changed?”
  • Get minimal working code
  • Rubber Duck Debug
  • Step back and re-think


Links


××× SIIIIICK ××× PIIIICKS ×××


Shameless Plugs


Tweet us your tasty treats!

Key points in this episode

In this Hasty Treat, Scott and Wes discuss the Javascript standard library proposal — what it is, how it could influence dev, and what they’d like to see.


Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.


Show Notes

1:38 - What is a Standard Lib?

  • Still experimental
  • Built-in modules don’t have to be downloaded because they ship with the browser
  • Not exposing built-in modules globally has a lot of advantages:
    • They won’t add any overhead to starting up a new JavaScript runtime context (e.g. a new tab, worker, or service worker)
    • They won’t consume any memory or CPU unless they’re actually imported
    • They don’t run the risk of naming collisions with other variables defined in your code

6:47 - Key Value Storage is the first one:

8:36 - What do we want to see?

  • Deep clone
    • Basically all of Lodash
  • util.isDeepScrictEqual

  • Async json.parse() / json.stringify
  • UUID
  • URL Lib for building and parsing URLs
  • Missing Array Methods
    • Most of underscore JS

15:53 - International

  • Currency Formatting
  • Lists
  • DateTimeFormat
  • RelativeTimeFormat


Links


Tweet us your tasty treats!

Key points in this episode

In this episode of Syntax, Scott and Wes talk with Jason Lengstorf from the Gatsby team about Gatsby themes, and the future of Gatsby in general.


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.


Freshbooks - Sponsor

Get a 30 day free trial of Freshbooks at Freshbook and put SYNTAX in the “How did you hear about us?” section.


Show Notes

2:18 - Jason Lengstorf - What do you do?

9:37 - Gatsby refresher

  • Gatsby is statically generated

  • gatsby-config.js file determines which plugins you use

  • gatsby-node.js allows us to hook into Gatsby at different points and do things like source content and dynamically create pages

  • gatsby-browser.js contains code that should hook into browser events

13:54 - Gatsby themes

  • Layouts in Gatsby are done the same way in React - simply create a component with children
  • How is this different than a plugin?
  • Is it a collection of plugins?
  • How do you share themes?
  • Can they include functionality (plugins?) Like Markdown rendering?
  • What about a theme that needs a UI once activated?
  • What about custom fields for Gatsby?
  • Do you foresee a marketplace like WordPress themes?
  • Are there some themes already out there?
  • What will come for themes soon?

34:07 - Questions about Gatsby

  • What do you think about WordPress?
  • E-commerce?
  • How do you make money?
  • Suggested way of doing dynamic things
  • What is the future of Gatsby?


Links


××× SIIIIICK ××× PIIIICKS ×××


Shameless Plugs


Tweet us your tasty treats!

Key points in this episode

In this Hasty Treat, Scott and Wes talk about how to give a killer workshop, as well as benefits and best practices!


Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry and using the coupon code “tastytreat”.


Show Notes

3:00 - Types of workshops

  • Public
  • Private

4:29 - Choosing a topic

  • Create original content
  • Create custom content for companies

5:55 - Building content

  • Choose seven to eight different little things
    • ES6
    • Progressive web apps
  • Build a single application throughout the day, introducing a new feature or two at a time and then implementing it into your own application
    • Gatsby website
    • React Beer application
    • React Notes Application
  • Process:
    • Build the app
    • Rewind back to starter files
    • Build it again while writing notes
    • Follow your own notes to see if it makes sense

13:25 - General information

  • How long should it be?
  • Fixed price vs split cost
  • How many people?

16:46 - Other Tips:

  • Break away from your app and show other apps using - gives better context
  • Stop often and ask if anyone needs help
  • Give large breaks
  • Give challenges for those who need more to do


Tweet us your tasty treats!

Key points in this episode

It’s another Potluck! In this episode, Scott and Wes answer your questions about CSS, Angular, Svelte, dev job preparation and more!


Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry and using the coupon code “tastytreat”.


Sanity - Sponsor

Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at Sanity. Get an awesome supercharged free developer plan on Sanity.


Show Notes

3:23 - Q: How big is too big for state? I have an object of around 1000 items which will be used in a search box on the frontend of my site, but the list of items won’t be updated very often. What is the most efficient way to store these items and deliver them to the browser? Would you use state, a JSON object, a MongoDB document or some other way I haven’t thought of?

7:17 - Q: How much do I need to know before I start applying for dev jobs?

9:26 - Q: Do you folks have any opinions on Skeleton loaders, and any thoughts on how best to implement them? At my day job we’ve recently implemented skeleton loaders in a way that inherits the parent styles. Would love to know if there’s any best practices for this or ways we can improve our setup.

13:01 - Q: Do you think we still need to use CSS resets like normalize and sanitizer?

14:56 - Q: Scott, can you tell the story of how you landed an interview for a job in Japan? I am moving to Japan next year and wondering how that opportunity arose for you.

20:04 - Q: Do you guys have an opinion on angular good or bad? Or is it that you’re more comfortable and have used React and Vue more often, so they’re largely at the center of any framework discussions?

22:54 - Q: Could you talk about naming and structuring files/folders in your applications? How do you name components and folders? Do you follow some sort of path of how to structure files in a web app?

29:01 - Q: Do you think that Node is almost too powerful to handle some of the simpler tasks (a site that just needs a contact form for instance), or am I just missing some very simple configuration? It seems like other languages, such as PHP, might be better suited for some of these simple tasks and Node is really just meant for larger scale application? I guess what my question really boils down to is, for a freelancer, I understand that I need to have my hands in a lot of different tech stacks, but should I really dive in on PHP (or something else) to handle some of these simpler features a client might need?

33:24 - Q: What do you guys think about Svelte? Before everything goes WASM will Svelte be the future of web programming?

37:24 - Q: What smart phones and laptops do you use for work? (specific model and why)

42:38 - Q: Should I apply for other jobs even if my contract might get renewed? Should I feel loyal to a company?


××× SIIIIICK ××× PIIIICKS ×××


Shameless Plugs


Tweet us your tasty treats!

Key points in this episode

In this Hasty Treat, Scott and Wes talk about how to identify and work on your weaknesses.


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.


Show Notes

2:45 - Why care about weaknesses?

  • If we avoid the things we’re afraid of or bad at we’ll always grow in lopsided ways

7:32 - As a developer

  • What skills / languages are you not good at or afraid of?

14:06 - As an employee

  • Communication
  • Company and personal goals
  • Efficiency
  • Compatibility

16:54 - As a human

  • How you treat people
  • Sharing your time
  • What you’re neglecting
  • Your living space


Tweet us your tasty treats!

Key points in this episode

In this episode Wes and Scott talk about the cool parts of CSS! From filters to variables, here are some cool (and amazing) things you can do with CSS in 2019.


Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.


Sanity - Sponsor

Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.


Show Notes

2:28 - Clip path

6:35 - Filters

16:24 - Background mix blend mode

21:47 - Border images

25:46 - Multiple background images

27:47 - Multiple background gradients

28:25 - Radial gradients

29:06 - Multiple box-shadows

34:30 - HEX + Alpha

40:41 - Viewport units

42:17 - Calc

44:32 - CSS variables

47:44 - Text decoration


Links


××× SIIIIICK ××× PIIIICKS ×××


Shameless Plugs


Tweet us your tasty treats!

Key points in this episode

In this Hasty Treat, Scott and Wes are back with another AMA. This time they talk about their spouses, careers outside of tech, lots of favorites (movies, colors, clothes), and more!


Clubhouse - Sponsor

Clubhouse is the first project management software that brings everyone together so that teams can focus on what matters: creating products that customers love. Clubhouse provides a perfect balance of simplicity and structure for better cross-functional collaboration. Check out https://clubhouse.io/syntaxpodcast and get your first two months free.


Show Notes

2:58 - What do your wives do?

6:40 - If you had to choose a different career, what would you do?

If you started learning another (programming) language today, what would it be?

11:50 - Favorites (e.g. colors, movies, brands, etc.)

18:08 - Who inspires you?

26:19 - What’s your ratio of client work, learning new tech, and teaching via your courses, talks or Syntax.fm? You guys seem awfully busy, and it’s making me feel kinda lazy.


Links


Tweet us your tasty treats!

Key points in this episode

In this episode of Syntax, Scott and Wes talk all about side hustles with special guest Courtland Allen, from Indie Hackers! They talk about the story behind Indie Hackers, how to start your own side hustle, where to find ideas, listener questions, and more.


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.


Freshbooks - Sponsor

Get a 30 day free trial of Freshbooks at Freshbooks and put SYNTAX in the “How did you hear about us?” section.


Show Notes

1:05 - What’s the back story behind Indie Hackers?

5:30 - What is a side hustle?

11:21 - How do you validate your idea?

13:15 - What are some different types of side hustles?

31:55 - What about people who don’t like marketing?

33:57 - What are some important pieces of side hustles?

39:04 - How do you sell a business?

42:40 - Listener Questions:

  • Q: How do you stop the side hustle from affecting your main job in regards to things like overtime, sleep and commitment?
  • Q: Should you frame yourself as a one-man-band or as a company?
  • Q: Have you heard stories of people living in cheap places, making bank? Are there any white whales you have been chasing to interview?


Links


××× SIIIIICK ××× PIIIICKS ×××


Shameless Plugs


Tweet us your tasty treats!

Key points in this episode

In this Hasty Treat, Scott and Wes talk about Shadow Doms - what they are, the individual pieces involved with them, why they’re important, and how to get started using them.


Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry and using the coupon code “tastytreat”.


Show Notes

2:41

  • What is the shadow DOM?

4:25

  • What elements are shadow DOM?

5:47

  • Styling shadow DOM elements

8:54

  • Creating your own

9:22

  • Frameworks


Links


Tweet us your tasty treats!

Key points in this episode

In this episode of Syntax, Scott and Wes talk to Travis Neilson about his career at Google, the challenges he faced, how to choose projects tips for devs wanting to get better at design, and more.


Stackbit - Sponsor

Build modern JAMStack websites in minutes. Stackbit lets you combine any theme, site generator and CMS without complicated integrations. Join the beta today by visiting stackbit.com/syntaxfm.


Sanity - 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

2:43 - Career path

  • On ambitions and where it all started

23:15 - Being all in

  • On how to choose your next project

33:31 - Working at Google

  • On the day-to-day at Google, the challenges of a big team, and constraints

43:23 - Design tips for developers

  • Advice for devs who want to get better at design but are struggling
  • Thoughts on CSS frameworks
  • The one thing devs often get wrong about design


Links


××× SIIIIICK ××× PIIIICKS ×××


Shameless Plugs


Tweet us your tasty treats!

Key points in this episode

In this Hasty Treat, Scott and Wes discuss different error handling strategies.


Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.


Show Notes

2:07 - Try / Catch

  • This can be done at call time or inside the function

4:10 - Higher Order Function

  • Makes a function that returns a new function which in turn calls your original function (but with a .catch chained on)

7:46 - Handle the error when you call it

  • Use async/await but chain a .catch onto the end

9:03 - Node.js Unhandled Rejection Event

  • process.on('unhandledRejectionEvent', callback)

9:40 - What do do with those errors

  • Send to error tracking service
  • Possible to give the user a reference number
  • Display good error text to user


Tweet us your tasty treats!

Key points in this episode

It’s another potluck episode in which Wes and Scott answer your questions! This month - Media Queries, NPM Vulnerabilities, Web VR and AR, Fullstack JS vs JAMstack for freelancers, switching jobs, and more!


Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.


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.


Show Notes

2:46

  • Q: I recently started a static site so I want as much of the site as possible to change layout with just CSS for responsive design. I am comfortable with media queries but find often times the design is very different between sizes. It is easy to tame the complexity of repeated data for the different component views keeping everything in sync but is it good practice to put two completely different component level views in a single HTML file? Does the repeated data in the static HTML have any effect on SEO?

7:08

  • Q: How should a mid developer know when its time to leave the current company? Is tech stack (e.g frameworkless) a decent reason even though he/she is happy at the place, but feels like they are not growing enough?

11:19

  • Q: Should I worry about the critical vulnerabilities when installing an NPM package?

15:06

  • Q: I’ve had the idea for styling one site two different ways (professional/artistic) and giving visitors a button to toggle between the two. Too gimmicky? Secondary: how did you pick your brand colors?

20:19

  • Q: Any SICK TIPS on career change? I’m a full-time employee with two kids and a lovely wife, who wants a fulfilling career. I throw as much time in as I can to study, but I feel like it isn’t enough to apply for jobs.

20:49

  • Q: Within the next two years, how well do you think WebVR and WebXR technologies would fit within mainstream web development (think A-Frame, SparkAR, React 360 in normal websites and applications)?

30:39

  • Q: Should I learn Fullstack JS or JAMstack for freelancing?

35:34

  • Q: Is front-end development dying?

37:30

  • Q: How do you deal with CSS-in-JS when you have one-off stuff, or coupled components/selectors like a [CSS] grid container and a grid child (think grid-area)? CSS-in-JS feels very verbose for this use case.

42:07

  • Q: Scott always talks about Meteor. I thinks its really cool too. What’s the future of it and why didn’t it take off? It seems to have slowed down. They seem to have moved on to other projects like GraphQL stuff.


Links


××× SIIIIICK ××× PIIIICKS ×××


Shameless Plugs


Tweet us your tasty treats!

Key points in this episode

In this special Hasty Treat, Scott and Wes answer your questions about money, investments, online presence and more!


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 https://logrocket.com/syntax.


Show Notes

2:33 - Besides coding/teaching, do you have any another source of income (stocks, bonds, crypto, etc.)?

9:03 - How do I build my online presence?

13:05 - What’s your favorite tasty treat (as in actual food)?

16:33 - Wes, lets talk about the + symbol that you use to start the prompt for Cobalt2 — whats up with that?

18:41 - How do you get out of a rut?


Links


Tweet us your tasty treats!

Key points in this episode

In this episode of Syntax, Scott and Wes talk about what’s new in web development: new promise static methods, new CSS functions, PWAs and more!


Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.


Clubhouse - Sponsor

Clubhouse is the first project management software that brings everyone together so that teams can focus on what matters: creating products that customers love. Clubhouse provides a perfect balance of simplicity and structure for better cross-functional collaboration. Check out https://clubhouse.io/syntaxpodcast and get your first two months free.


Show Notes

5:38 - New Promise static methods

  • Promise.all
  • Promise.race()
  • Promise.allSettled()
  • Promise.any()

10:16 - Lazy loading images

14:25 CSS Houdini aka JS in CSS

20:32 - Subgrid

24:31 - Native modules in browser

  • type="module"
  • dynamic import()

27:08 - Node Native Modules update

29:17 - PWA install app and Google PlayStore

  • Already shipped in Chrome
  • Java API that communicates through services with Chrome
  • Trusted Web Activity aka TWA
  • All content in TWAs must comply with Play store policy including policies for payments in-app purchases and other digital goods
  • Already existing TWAs include Twitter Lite, Google Maps Go, Instagram Lite
  • Passing the PWA Criteria
  • Performance Score with a minimum of 80/100, tested with Lighthouse
  • All current Google Play Store rules

35:49 - CSS Scroll Snap

  • In many browsers already
  • scroll-padding

38:17 - Aspect Ratio Unit

39:32 - CSS nesting

  • Disallows cross-domain cookies unless on the same domain/subdomain


Links


××× SIIIIICK ××× PIIIICKS ×××


Shameless Plugs


Tweet us your tasty treats!

Key points in this episode

In this Hasty Treat, Scott and Wes talk about CSS frameworks - what they are, why they’re important, and when (and when not) to use them.


Stackbit - Sponsor

Build modern JAMStack websites in minutes. Stackbit lets you combine any theme, site generator and CMS without complicated integrations. Join the beta today by visiting stackbit.com/syntaxfm.


Show Notes

2:52 - What is a CSS framework?

  • Pre-written CSS that takes over the basic styling of your app
  • Can include just utilities or lots of styles (minimal to overboard)
  • Twitter Bootstrap and Zurb Foundation were the pioneers
  • Follow different CSS styles from “functional CSS” to utility-first to BEM

7:33 - Functional (aka Utility) based

  • Tachyons
  • Tailwind

9:59 - Preprocessor based

  • Bootstrap

11:33 - Styled Components based

  • Rebass
  • Styled Systems
  • Facepaint

15:50 - Why use one?

  • Makes styling FAST
  • Makes hard things easy
  • Some, like Bootstrap, have themes
  • Keeps your own CSS minimal and organized
  • Built on an established system
  • Lots of people use the same CSS

19:22 - Why not use one?

  • CSS class hell
  • Stops you from learning how CSS works
  • Size (not all have this problem)
  • Brotli, Purify CSS
  • You will be overriding a ton of it
  • You like exclusively writing the code you need and nothing else


Links


Tweet us your tasty treats!

Key points in this episode

In this episode of Syntax, Scott and Wes talk about working remotely — problems, challenges, and how to keep yourself sane, productive and efficient.


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 https://logrocket.com/syntax.


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.


Show Notes

4:34 - Find your spots

  • Coffee shops
  • Cafes
  • Library

7:40 - Deal with Distractions

  • Log out of Twitter/Facebook/Instagram
  • Delete Apps — only use the browser
  • Put phone and computer on “do not disturb”
  • Focus App

11:33 - Prioritize your tasks

  • Drifting is possible when it isn’t clear what you need to do
  • If you don’t have someone telling you what to do, it can be hard to get started
  • Todo lists

17:15 - Make time to be social

  • Go to meet ups
  • Chat in Slack or Discord rooms
  • Talk to people at work spaces

21:48 - Get fresh air

  • Go for a walk
  • Open the windows

24:03 - Get moving

  • Hit the gym
  • Do push-ups in your office

28:09 - Have a separate work space

  • Designated office
  • Don’t work from the couch with the TV on
  • Clean your damn office 😂

38:16 - Act like you are going to work

  • Dress well
  • Fix up, look sharp - get yourself ready to go

40:44 - Take Breaks (not too many, not too long)

  • Some people like the Pomodoro Technique
  • Take a lunch break away from your computer
  • Don’t make a break longer than 15 minutes or so


Links


××× SIIIIICK ××× PIIIICKS ×××


Shameless Plugs


Tweet us your tasty treats!

Key points in this episode

In this Hasty Treat, Scott and Wes talk about cranky developers — those devs who never seem happy about anything, always mad about tech choices, and constantly writing off any new tech as simply a “fad” or unnecessary.


Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.


Show Notes

2:20 - How to deal with cranky devs

  • Many experienced developers prefer older, stable technology for a reason. They have been through it before.

7:14 - Questions to ask when considering new tech:

  • Is it better for the product?
  • Is it better for the users?
  • Is it better for the business?
  • Is it better for the developer?

16:39 - How to convince them:

  • Proof of concept - show them it’s better.

18:28 - Things to acknowledge:

  • There are risks in changing technologies.
  • There are costs - training, tooling, hosting.

21:20 - Some people are not interested in improving themselves

  • They got the job they want and are short sighted about the future.
  • You can appeal to management about making progressive choices.
  • If management isn’t interested, you should look for a new job.


Links


Tweet us your tasty treats!

Key points in this episode

It’s another live episode of Syntax in which Wes and Scott do Hook’d on Hooks, Who’s Snackin’ on React, Stump’d, Unpopular Opinions, Q & Eh, and more!


Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.


The Armoury - Sponsor

The Armoury is a men’s clothing and accessories retailer that provides some of the highest quality clothing you can buy. Designed for those of you who want the highest quality clothing that feels great and will last forever. Buy less, buy better. Follow them on Instagram @thearmourynyc and check out their website TheArmoury.com.


Show Notes

6:54 - Who’s Snackin’ On React

Guess which of these websites have their homepage partially or fully built in React?

10:55 - Hook’d on Hooks

  • Wes:

    • useSocket
    • useStaticQuery (gatsby)
    • useKeyPress
  • Scott

    • useLocalStorage
    • useClickOutside
    • useMeasure
    • useGesture

17:47 - This, That, Both, or Neither?


  • Gutenborg: A WordPress GUI plugin for creating react-based gutenberg blocks, or a 90’s budget TV show about Cyborgs who read?

  • Nashorn: A Java based JavaScript engine developed by Oracle, or a popular rock climbing spot in Portland?

  • Easy Peasy: A React state library, or children’s spoon set?

  • Use Boxmen: A hooks library that gets box model dimension, or a puzzle-based strategy game for children?

  • Toggs: A lightweight styleable toggle component, or rain resistant outdoor gear?

  • Landwind: A set of React components for using the Tailwinds CSS Library, or a Chinese Knock-off Land Rover SUV?

  • Freeflow: A redux-like state management library built on state, context and hooks, or a California-based hot tub company?

  • Ubergrippen: A popular rock climbing spot in Denver, or a client-side video stabilization framework built on the filereader API?

26:22 - Tag Team Coding React

  • Fetch Data from the data jokes API
  • Show a loading indicator
  • Have a button to fetch a new joke

36:24 - Stump’d

  • What is a react PureComponent for?
  • Why might you use a callback with setState?
  • How would you reverse an array without mutating the original array?
  • Can you explain what a “downtown job” is?
  • When would you use useReducer?
  • What makes useLayoutEffect different from useEffect?
  • What propType would you use for an object that contains a number and a string

43:11 - Unpopular Opinions. Overrated, Underrated?

52:45 - Q + EH with Wes and Scott

  • What where the first apps you worked on?
  • What React problem stumped you for the longest time?
  • What’s your most expensive mistake?
  • Do we need classes in Javascript?
  • How do you explain what you do to your mom?
  • How do you explain React?
  • What made you start wanting to code?
  • What’s the hackiest thing you’ve ever done?
  • Where do you see yourselves in 10 years?


Tweet us your tasty treats!

Key points in this episode

In this Hasty Treat, Scott and Wes talk about portfolios - best practices, organization, and how to use what people are looking for to stand out in the right ways.


Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.


Show Notes

3:21 - Include screenshots (or don’t). Often clients can ruin a site after you hand it off.

6:19 - Include list of technologies used

7:25 - Include list of problems solved

7:48 - Use company logos (if allowed)

9:13 - Show mockups on modern laptops/phones

10:04 - Show your work (mockups, sketches, layouts, etc.)

11:39 - Keep it updated

12:10 - You don’t need a million examples — max out somewhere around five. People just need a few quick examples of the type of stuff you work on.

14:11 - What about using side projects and tutorials?

16:28 - Dribbble, Github and Instagram are all valid portfolio options as well — often that is the first place people look. Don’t ignore these.

  • A hot stuff profile on any of these will make you more hireable. Make sure it’s creative and looks nice.


Links


Tweet us your tasty treats!

Key points in this episode

It’s another potluck episode in which Wes and Scott answer your questions! This month - interview questions, headless CMSs, resume design, redux vs context, and more!


Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.


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.


Show Notes

2:21

  • Q: Are there any tutorials you would recommend to learn more computer science related knowledge (algorithms, closures, etc.)?

5:12

  • Q: Do you have any suggestions for picking a headless CMS?

8:55

  • Q: Do you have any advice for someone in a customer service background seeking a more flexible job with remote work opportunities? Resources? Is this a realistic goal or a good way to approach my job search?

15:13

  • Q: How much importance would you place in the design of a resume? Is it worth the cost?

21:09

  • Q: With the new React Hooks and Context API, do we still need Redux?

25:37

  • Q: If either of you could change anything about your personal tech stack, what would it be and why?

29:07

  • Q: Do you prefer to use React’s defaultProps or plain JS default function parameters to give your component’s props some default values?

30:44

  • Q: You guys chat CMS sometimes - why no love for Umbraco?

35:53

  • Q: I’m ready for a new challenge, how do I break this to my employer?

38:16

  • Q: What’s the difference between const add = (a, b) => { return a + b } and function add (a, b) { return a + b }?


Links


××× SIIIIICK ××× PIIIICKS ×××


Shameless Plugs


Tweet us your tasty treats!

Key points in this episode

In this Hasty Treat, Scott and Wes talk about bike shedding - issues that are hotly debated, but may not matter that much in the long run.


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 https://logrocket.com/syntax.


Show Notes

3:03 - What is Bike Shedding?

  • Technical disputes over minor, marginal issues conducted while more serious ones are being overlooked. The implied image is of people arguing over what color to paint the bike shed while the house is not finished.

4:39 - Tabs vs spaces

  • Two spaces

5:50 - Single vs double quotes

  • Single in JS, double in HTML

7:05 - Semicolons or not

  • Semicolons

9:01 - Grouping/ordering CSS properties

  • Wes: Format
  • Scott: Alphabetical

12:35 - var vs let vs const

  • Scott: const for life — let when needed
  • Wes: const by default — change to let when needed

14:24 - Default vs named exports

  • Use both
  • Mix-n-match

15:58 - Should designers code?

  • If interested, sure

17:58 - Which front-end framework

  • Whichever one best suits your needs

19:30 - Vim/Emacs vs Atom/VS Code/Sublime

  • VS Code

21:53 - Small perf wins

  • Micro optimization often aren’t needed

25:14 - Browser support

  • If you’re required to support it, then support it

25:47 - Block formatting

  • Function block
  • Else on a new line vs else after block

29:07 - Trailing comma


Links


Tweet us your tasty treats!

Key points in this episode

In this episode Wes and Scott talk about VueJS - what it is, how it compares to other frontend frameworks, and how to get the most out of it.


Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.


Clubhouse - Sponsor

Clubhouse is the first project management software that brings everyone together so that teams can focus on what matters: creating products that customers love. Clubhouse provides a perfect balance of simplicity and structure for better cross-functional collaboration. Check out https://clubhouse.io/syntax and get your first two months free.


Show Notes

2:22 - What’s the deal with VueJS?

  • Combines ideas from Angular 1, React and Blaze
  • Ease of Angular 1
  • App structure of React

8:02 - Components

  • Template syntax is similar to handlebars

    • aka {{stuff}}
  • v-bind:property

    • v-bind:property or simply :bind allows you to dynamically bind a value to a property
  • Props

    • Props must be declared before they can be used in a template.
  • Script tag

    • Where imports happen
    • Where props are defined, computed properties, action events and lifecycle
  • Actions

    • v-on:click="doSomething"
    • @click="doSomething"
    • These will run a doSomething event defined in your script export via methods
  • Lifecycle

    • How does data fetching work?
  • CSS

    • Can be scoped to file by adding  to your property
  • Global Registration

    • You can register a global component and not have to import it

36:38 - Features

  • CLI

    • Easy to use when creating new projects
  • Animations

    • Baked in to core
    • A transition component wraps your code and just have a v-if on the element you are transitioning
    • There is also more intense javascript options via v-on
  • Routing

    • 1st party router vue-router with support for 3rd party routers
  • Global State

    • Vuex

45:57 - Ecosystem

  • Nuxt — AKA Next.js for Vue
  • Gridsome — AKA Gatsby for Vue
  • Native?


Links


××× SIIIIICK ××× PIIIICKS ×××


Shameless Plugs


Tweet us your tasty treats!

Key points in this episode

In this Hasty Treat, Scott and Wes talk about frontend frameworks — what they are, when you need one, how to organize your code for maximum efficiency, and more!


Stackbit - Sponsor

Build modern JAMStack websites in minutes. Stackbit lets you combine any theme, site generator and CMS without complicated integrations. Join the beta today by visiting stackbit.com/syntaxfm.


Show Notes

3:08 - What is a frontend framework?

  • JavaScript based
    • Controls applications such as:
      • Routing
      • Rendering
      • Data Fetching
    • Examples:
      • React
      • Angular
      • VueJS
      • Ember
      • Backbone
      • Svelte

5:54 - When to use a frontend framework

  • The Link between your JavaScript data and the DOM (your HTML) isn’t live
  • The use of frameworks makes re-updating the DOM (after the initial variable update) easy
  • You need an opinionated way to handle complexity
    • Example:
      • You add an item to a shopping cart, send the event to the backend, and update both the number of items in the cart and the “Add to cart” button
      • Event Handlers - binding and un-binding
  • Your client wants a fast, modern experience
  • Seamless routing and page transitions
  • Fast prototyping
  • Access to battle-tested libraries
    • Security
    • Perf

14:24 - When not to use a frontend framework

  • When using CMS like WordPress and Drupal
  • A medium amount of JavaScript is needed - Vanilla JS will work fine
    • Modals
    • Slideshows
    • Form submits
  • Static pages, no JS functionality
  • Updating an existing project

17:20 - Why can’t I just use jQuery?

  • Vanilla JS contains all of jQuery’s available DOM APIs
  • Frameworks provide structure
  • Organizes code for big projects


Links


Tweet us your tasty treats!

Key points in this episode

In this episode Wes and Scott talk about how to find freelance clients — tangible things you can do to position yourself and set yourself up for success.


Stackbit - Sponsor

Build modern JAMStack websites in minutes. Stackbit lets you combine any theme, site generator and CMS without complicated integrations. Join the beta today by visiting stackbit.com/syntaxfm.


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 replayer and a performance monitor. Get 14 days free at https://logrocket.com/syntax.


Show Notes

1:27 - Question from Andreas Trattner: I am a backend developer with 4+ years experience working on large systems in Europe and am considering moving toward freelancing/contracting. However, I find it difficult to discover quality opportunities. Any tips you can share on how to strategically get projects?

  • There isn’t a secret trove of work, and there’s no one way to do it.

4:50 - Relationships

  • Trust and relationships rule all. The best paying gigs are never advertised.
  • Who should you know?
    • Other developers

      • How? Meetups, Conferences, Twitter, Slack rooms, Friends
      • Tip: Volunteering is a great way to get in to conferences, plus you often get to know people
      • Tip: If you are friends of a friend who gets a lot of work, as for a introduction
    • Designers and marketers
      • You usually work together

      • How? Twitter, Email, Dribbble, Instagram
    • Project managers

      • How? Cold emails, tweets
    • Office managers
      • Life blood of the office - they know everyone
      • Often move into other roles

      • How? Meetups, previous employees
    • Entrepreneurs
      • Lots of connections, often switching gears

      • How? Demo camps, Facebook marketing groups
    • Venture capitalists
      • Have dozens of companies and tons of connections

      • How? Demo camps, introductions, cold email

19:08 - Display of expertise

  • It certainly is an option to just be really freaking good at what you do
  • Speaking at conferences and local meetups
  • Working on open source
    • Helping in chat rooms
    • Posting guides
    • Maintaining docs
  • Offering reviews / Make things public
  • Start a podcast
  • Blogging
  • Volunteering

9:22 - Visibility

  • You need to let everyone know what you do. Your mom’s uncle’s friend’s cousin on Facebook might casually ask for recommendations.
  • Instagram / Photos. Showing people what you are doing and what you are working on will make a mental note in their head that you do that type of work.
  • Facebook / Twitter / Instagram
  • Blogging
    • This makes the “vetting” process much easier
  • Tweeting
  • YouTube videos
  • Slack channels you are involved in

38:02 - Other tactics

  • SEO - Locality (Toronto designer), specific technologies (Redux contractor)
  • Craigslist
    • This one sucks, but it can lead to decent work occasionally
    • You need to be more vigilant in screening, most clients will suck
  • Cold asks - Just ask people what works well
    • “Hey, I’m looking to book a few contracts starting June 2019. I love working with ______ and you can see my work here”
  • Put a phone number on your website. Seriously.
  • UpWork
    • Won’t make as much money here because of competition
  • Local business listings
    • Find online and offline biz listings
    • Old fashioned — putting your card on bulletin boards

47:29 - Maintaining Relationships

  • Check in every few months with non-biz related contact
    • But also just straight up ask for work
  • Christmas / Thank-you gifts


Links


××× SIIIIICK ××× PIIIICKS ×××


Shameless Plugs


Tweet us your tasty treats!

Key points in this episode

In this Hasty Treat, Scott and Wes talk about React Suspense — what it is, how it works, support and more!


Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.


Show Notes

Not live yet - it may/will change. Be warned!

3:59 - The problem we have with React right now

  • API calls
  • Image loading
  • Code splitting

7:16 - What is React Suspense?

  1. First we convert our async data fetching functions into resources
  2. Resources can then be read inside render - above the return
  3. Resources can be read from cache
  4. Resources can be preloaded into a cache if you anticipate needing them
  5. Resources reads are blocking for that function - you can’t return JSX until the resource is read
  6. In your component that fetches data, there is no need to maintain a loading state
  7. Then, anywhere higher up in that tree, you can introduce a suspense component
  8. The suspense component can detect if any of it’s children are currently loading data
  9. If they are, we can then choose to show a loader via the fallback prop
  10. We can also choose to show nothing via the maxDelay prop — this is helpful for fast connections that shouldn’t see the spinner for a short split-second

15:20 - Support

  • React.lazy and suspense for code splitting is already here
  • The React.lazy function lets you render a dynamic import as a regular component
  • Loadable Components is recommended if you need splitting with SSR
  • Data Resources is not here yet


Links


Tweet us your tasty treats!

Key points in this episode

In this episode Wes and Scott talk about developer education — what to look for, what to avoid, and how to be a life-long learner with good problem solving skills.


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.


The Armoury - Sponsor

The Armoury is a men’s clothing and accessories retailer that provides some of the highest quality clothing you can buy. Designed for those of you who want the highest quality clothing that feels great and will last forever. Buy less, buy better. Follow them on Instagram @thearmourynyc and check out their website TheArmoury.com.


Show Notes

3:59 - Our experiences

  • Scott:

    • Went to college - Go Blue!
    • Worked odd jobs while self teaching
    • Was mentored and taught more while working at my first job
    • Self directed since then
    • Started teaching via LUT in 2012
  • Wes:

    • Went to university for Business Tech - entirely self-taught
    • Led and created part-time HTML + CSS program at HackerYou
    • Led and created first bootcamp at HackerYou
    • Led and created first JS part-time at HackerYou
    • Been offered jobs at colleges + universities

10:02 - School - $$$

  • Pros

    • The best thing about school was unrestricted free time to find out what I enjoyed, which lead me to coding
    • Co-ops can help you find what you like and what you don’t like
    • Life skills that involve you being on your own and figuring things out more
    • You are exposed to interesting people and ideas
    • CS Degree work can open more career doors
    • Professional networking
    • Many companies wont hire you without some sort of bachelor’s degree (this might change)
  • Cons

    • Not everyone has the time or money to devote two to five years to school — especially to something they might not end up enjoying
    • Potentially outdated staff and course material
      • Wes was often asked to lead a video editing course, print design course and a web development course
    • Lot’s of distractions

23:10 - Bootcamp - $$

  • Pros

    • Very fast, lots of info, but can be a bit overwhelming
    • You can get up-to-speed extremely quickly
    • Focused on hire-ability and job-ready skills
    • Focused information
    • Personality is really the deciding factor here - lots of people do well, and some don’t
  • Cons

    • Hit or miss — quality of bootcamps aren’t vetted, so do your research
    • Talk to someone who took it, find out who the instructors are
    • You absolutely must continue learning after the bootcamp
      • The bootcamp is just a push and you are expected to continue learning once you are done
    • Not great for individuals that can’t handle the pace
    • You have to quit your job

37:09 - Self-Taught - $

  • Pros

    • Self-directed people will prevail here
    • Can be drip-fed while earning money at another job
    • Can be supplemented by a job (e.g. you are front-end and want to go full stack)
    • Can get real world experience as a freelancer while you evolve
  • Cons

    • Not for everyone
    • Can be difficult to self-motivate
    • Hard to get help - sometimes you can be stuck for hours on a two-second fix
    • Potentially discouraging
    • You might go down the wrong path without guidance on what you should learn

47:11 - Part Time Programs - $

  • Pros

    • Fantastic way to get up to speed with a new tech
    • Goes at a good pace - twice a week usually
    • Offered on weekends and evenings where you can maintain a regular job
    • Very low risk - you can try it out
  • Cons

    • Might not be as fast as you like it
    • Quality is all over the map

49:55 - Mentored Self Learning - $

  • Pros

    • Best to do with a mentor on the job
    • Mentor can help steer what to learn in your free time
    • Good feedback and a place to ask lots of questions
  • Cons

    • Can’t be done without someone willing to mentor you
    • Only as good as your mentor

52:55 - What approach would we take?

  • Bootcamp > then immediately supplement with courses


Links


××× SIIIIICK ××× PIIIICKS ×××


Shameless Plugs


Tweet us your tasty treats!

Key points in this episode

In this Hasty Treat, Scott and Wes talk about communication — why it’s important, how to improve, building good habits, tools and more!


Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.


Show Notes

3:59 - Why it’s important

  • Projects can live or die by the team’s communication
  • Project timelines can be disrupted leading to big problems with scheduling

5:53 - How to improve communication skills

  • PRACTICE
  • Pay attention to what works
  • Have a system – standups, weekly meetings, etc.
  • Over communicating can be annoying but effective
  • Realize that people can’t read your mind, so having your intentions and timelines public and known is important

9:12 - Building good habits

  • Need to practice
  • Build systems to support new habits

11:04 - Tools we use to communicate


Links


Tweet us your tasty treats!

Key points in this episode

It’s another potluck episode in which Wes and Scott answer your questions! This month - are classes dead?, tutorials vs real life, the smart home, developers and mental health, 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 errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.


Show Notes

1:30

  • Q: What advice would you give to someone wanting to get involved with the open source community, coming from closed-source full-time work? How do people make time to code on the side and balance a life/family?

5:38

  • Q: In Syntax 060, you mentioned making your life easier as a motivation. How do you get your data from sites that may not have an API? Web scraping? Any tools you’d recommend?

11:34

  • Q: Do you think React aims toward a world with functional components only or will class based components always play a role?

17:10

  • Q: Just feedback on the recent Smart Home podcast…I really enjoyed it! I have about 48 (color) HUE lights throughout my home, and use an IFTTT applet for my Ring PRO doorbell, so when someone rings the doorbell, all the lights in the home blink (e.g. so I can see when an Amazon Prime package arrives, or know someone is at the front door, etc…while I’m working and wearing my Bose QC35II’s, and of course listening to your podcast)! I’m a huge fan of the podcast since early last summer (I rarely comment, but you guys are great)!

21:37

  • Q: What would you do in the event your clients sends you a “thank you” card along with cash that is MUCH lower than you are preparing to invoice them? Would you remove it from the invoice, ask them what they would prefer, etc? I’m stuck in an awkward situation and it doesn’t even cover the hosting costs.

24:39

  • Q: I’ve heard a lot of good things about Next.js, but what exactly is it? How does it compare to just using the create-react-app? Is it worth it to migrate a small side project that I have to Next.js?

28:26

  • Q: I take tutorials all the time for web dev. I have taken many of both of your courses. Thank you, they are great! I am completely self taught and have zero computer science education whatsoever. As well as your courses and other tutorials have taught me various languages and libraries, they do not prepare me for real work interviews or jobs. No offense. How do I make the jump from tutorials to real life?

34:39

  • Q: Do you have exercises to warm up your brain before you start coding? I always find it a bit difficult to jump straight into a project. I would never start working out before warming up and I feel that’s also true about development!

36:42

  • Q: How should developers deal with depression and mental health?


Links


××× SIIIIICK ××× PIIIICKS ×××


Shameless Plugs


Tweet us your tasty treats!

Key points in this episode

In this Hasty Treat, Scott and Wes talk about authentication — the difference between localStorage, cookies, session, tokens and more!


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 replayer and a performance monitor. Get 14 days free at https://logrocket.com/syntax.


Show Notes

4:20 - How should we track users?

  • Token based - generally stored in the client
  • Session based - stored on the server
  • Token Based (JWT)

6:00 - Token-based auth

  • Stateless - the server does not maintain a list of logged in users
  • Scalable - you can use serverless functions easily
  • Cross domain
  • Data can be stored in JWT
  • Easy to use on non-web sites like mobile apps
  • Hard to expire tokens — you must maintain a list of blacklisted tokens

7:48 - Session-based auth

  • Stateful - generally you maintain a list of session IDs
  • Passive - once signed in, no need to send token again
  • Easy to destroy sessions

10:48 - How do we identify the user on each request? localStorage or Cookies?

  • A common misconception is that localStorage is for tokens while cookies is for sessions
  • With localStorage, we need to grab the token and send them along on each request
  • With cookies, the data is sent along on each request

11:25 - Security Issues

  • XSS for Tokens - make sure bad actors can’t run code on your site
  • Sanitize inputs
  • XSRF - CSRF tokens are needed


Links


Tweet us your tasty treats!

Key points in this episode

In this episode, Wes and Scott talk about life management — the systems and tools for managing all the the busy details of life and work.


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 errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.


Show Notes

5:00 - Todos

  • GTD philosophy
  • Todoist
  • Things

12:31 - Focusing

  • Focus app
  • Turn off all notifications on iOS and desktop
  • Rename apps
  • Ask yourself why you feel the way you do
    • Should be doing email? Do I need to eat that frog?
    • Why do I not enjoy this?
  • Sticky note on screen or desk

21:27 - How we track ideas, thoughts, and notes

  • Get everything out of your head
  • Markdown files
  • Evernote
  • Notion

27:23 - Calendar and schedule

33:30 - Goal tracking / Life progression

  • Keep concepts and ideas in Notion
  • Milestones (bigger ideas) are separated
  • Use the system that works best for you

36:58 - Fun things with Notion

  • What is Notion?
  • Cross-linking/referencing between boards
  • Episode calendar and possible episodes kanban


Links


××× SIIIIICK ××× PIIIICKS ×××


Shameless Plugs


Tweet us your tasty treats!

Key points in this episode

In this Hasty Treat, Scott and Wes talk tips to succeed on YouTube!


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.


Show Notes

1:55

  • How YouTube has affected our careers

3:45

  • YouTube money is just OK

6:28

  • SEO is king

7:15

  • The title is most important

8:59

  • Description is important

11:00

  • Use Tags. All of them.

12:00

  • Scheduled content works

13:26

  • Keeping Viewers

15:20

  • Pinning comments

15:41

  • Liking Comments

17:00

  • Practice Finishing Sentences

17:34

  • Collaborate when you can

19:00

  • Use all the features YouTube has to offer

20:44

  • Don’t get sucked into the BS


Links


Tweet us your tasty treats!

Key points in this episode

In this episode, Wes and Scott debate Gatsby vs Next — how they compare, the pros and cons of each, why you might chose one over the other for your next project, and more!


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 replayer and a performance monitor. Get 14 days free at https://logrocket.com/syntax.


The Armoury - Sponsor

The Armoury is a men’s clothing and accessories retailer that provides some of the highest quality clothing you can buy. Designed for those of you who want the highest quality clothing that feels great and will last forever. Buy less, buy better. Follow them on Instagram @thearmourynyc and check out their website TheArmoury.com.


Show Notes

5:07 - Server Side Rendering

  • Next.js will render on demand — this allows you to have server rendered pages on demand.
    • Think of a blog website — publish a new blog post and it will immediately start working.
    • Authenticated pages can be server rendered, and thus, pre-loaded for better performance.
  • Gatsby runs at build time only — so you need to have all of your data ready at build time.
    • Pro: This makes for very fast page load.
    • Con: Large websites can take a long time to build.
    • Con: Gatsby can do network fetches from the client, but these lose the benefit of SSR.
  • Ease of SSR:
    • Next.js requires a complicated document.js file if you are fetching data anywhere other than a page component.
      • This will probably get easier with Suspense. Demos are simple, but any real application requires harder config.
    • Gatsby is Easy Peeezy!

11:09 - Data

  • Next.js is unopinionated. Like React, it doesn’t care where your data comes from.
    • getInitalProps();
  • Gatsby has a number of “source” plugins which will pull in data from sources — markdown, WordPress, API, file system. Once you have that data sourced, you can query it with GraphQL.

22:50 - Routing and Creating Pages

  • Next.js makes you create a page in a pages directory. You can nest these as deep as you like. If you want to pass query params, you must do so with a ?query=string. There are several third-party options for getting around this that require a node server.
  • Gatsby allows you to programmatically create pages with their createPage API.
  • For both navigating between pages, they make a Link Component available.

30:49 - Plugins

  • In Gatsby, everything goes through the Gatsby pipeline. This makes things like image compression, pagination, sass, service workers and many other progressive web app pieces very easy.
  • Gatsby makes building a really good website easy.
  • Gatsby Image is SOOOOO amazing.
  • The scope of Next.js is much smaller. They give you a few things, but you generally bring your own approach for most things
    • Routing
    • Linking and prefetching
    • Dynamic Importing

38:42 - Deploying and Hosting

  • Gatsby is just HTML, CSS, and JS at the end of the day, so it can be deployed almost anywhere — Netlify, Github Pages, cheap PHP hosting, etc.
  • Next.js is a Node app. It can be integrated into an existing Express app, or run by itself. Requires a Node server to run it.
  • Next.js has a static generation option, but you’re better off using Gatsby for that.

44:41 - The verdict?

  • Us Next.js for Apps, Gatsby for Websites


Links


××× SIIIIICK ××× PIIIICKS ×××


Shameless Plugs


Tweet us your tasty treats!

Key points in this episode

In this Hasty Treat, Scott and Wes talk about side projects — what you can learn, why they’re great, how to come up with ideas, and more!


Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.


Show Notes

2:17 - Why?

  • Keeps you sharp
  • It’s actually useful
  • Try new technology

5:28 - How to come up with ideas

  • What sucks in your life?
  • How do you get a competitive advantage in life?

12:10 - Quick and dirty tech


Tweet us your tasty treats!

Key points in this episode

In this episode, Wes and Scott talk about the Smart Home — all the different tech available, how it works together, pitfalls to avoid, hardware, software, and more!


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.


Stackbit - Sponsor

Build modern JAMStack websites in minutes. Stackbit lets you combine any theme, site generator and CMS without complicated integrations. Join the beta today by visiting stackbit.com/syntaxfm.


Show Notes

2:25 - The tech

  • Wifi devices

  • Zigbee
    • Can operator on low power
    • Usually Cheaper
    • Water Sensor, door sensor, temperature
  • iOS
    • HomeKit sucks
    • You need an Apple TV or iPad to access outside of your house

9:13 - Controlling your smart home

  • Smart Things
  • Home Assistant
    • Host your own
    • Lots of add-ons
    • You need to babysit it
  • Android
    • Google Assistant
  • Google Pixel squeeze to assistant is way better than saying “Hey Google”.
  • Google Home
    • Google Home is awesome
    • Custom sayings with IFTTT
    • Custom via Routines
  • Alexa

23:52 - Software

  • Stringify

  • IFTTT
    • Basic automations
    • Makers accounts
    • Web hooks to trigger actions

  • Homebridge
    • Make non-iOS stuff work with HomeKit
    • Swipe up control is nice

28:15 - Hardware

67:32 - What we want in the future

  • Scott
    • Motion sensors
    • Door sensors
    • Locks
    • Blinds
    • More bulbs
  • Wes
    • Fireplace
    • Constantly recording cameras
    • Sensors galore
      • Windows open
      • Doors open
      • Garage door
    • Zigbee Hub
    • Xiaomi Sensors
      • Gear Best


Links


××× SIIIIICK ××× PIIIICKS ×××

  • Scott: Philips Hue
  • Wes: All the recommendations from above


Shameless Plugs


Tweet us your tasty treats!

Key points in this episode

In this Hasty Treat, Scott and Wes tackle email, specifically, how to email busy people — how to write emails that actually get read, and don’t just get tossed in the archive.


Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.


Show Notes

4:05

  • Subject lines

11:26

  • The body

14:33

  • Best practices


Tweet us your tasty treats!

Key points in this episode

It’s another potluck episode in which Wes and Scott answer your questions! This month - organizing your Git repos, the difference between freelancing and contracting, changing careers, how to deal with spammers and more!


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.


Techmeme Ride Home Podcast

From Techmeme.com, Silicon Valley’s most-read news source, The Techmeme Ride Home podcast is a short daily podcast about the day’s tech news. Mark Zuckerberg called Techmeme the one news source he definitely follows. New episodes are published every day at 5p.m. You can check out the show here, or search for “Techmeme Ride Home” in your favorite podcast player.


Show Notes

1:55

  • Q: Do you prefer to have your backend and frontend in separate Git repos or together? What are the trade-offs?

5:12

  • Q: In web dev, what’s the difference between a freelancer and independent contractor?

9:45

  • Q: Default export vs named export?

11:35

  • Q: I’m looking to change careers, but I’m 41 this year. Is it too late?

16:12

  • Q: Have you guys made much use of multicolumn layout? If so, only for text, or have you come up with (or seen elsewhere) any interesting out-of-the-box uses?

20:11

  • Q: Since you publish your courses’ source code on Github, what do you think about people using that to learn instead of buying your course? Is it an intentional decision, or is it a compromise you’re willing to make?

23:52

  • Q: When is a certification needed for both jobs and side-projects?

29:35

  • How do you deal with spammers filling out forms?

34:05

  • Q: Could you better explain what a slug is? I’ve heard the term thrown around on a number of your episodes, but I don’t really know what it means.

37:44

  • Q: I am currently going through some currency conversion stuff for a project, what would you recommend to use for international conversions?


Links


××× SIIIIICK ××× PIIIICKS ×××


Shameless Plugs


Tweet us your tasty treats!

Key points in this episode

In this Hasty Treat, Scott and Wes continue their discussion about code quality tooling - how to get your code extra nice and clean, and the tools that will help you along the way.


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 replayer and a performance monitor. Get 14 days free at https://logrocket.com/syntax.


Show Notes

2:28

  • Typescript and Types

5:42

  • Jest and Testing

7:48

  • Exceptions & Error Tracking


Links


Tweet us your tasty treats!

Key points in this episode

In this episode Scott and Wes continue their discussion about the freelance client lifecycle—from design and development, to project hand-off, and everything in between.


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.


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.


Show Notes

1:47 - Design

  • Collect all assets from your client
    • Logo
    • Brand guidelines
    • List of likes and dislikes
  • Create initial look and feel
  • Don’t show client too early—they can be distracted by little unfinished things
  • Back up the “whys” of what you did. Otherwise, it’s just a pretty picture and and the client only thinks about it in terms of taste. Remember, you are the expert they hired, so it’s not totally subjective—you have the expertise and you need to flex that.
    • This button is teal because it’s your call to action—this is the button that makes you money so we want to highlight that
    • Grey text on white background is hard to read—you’ll be leaving people out if you do this.
    • When possible, draw circles or golden ratio lines around everything ;)
  • Be prepared for non-standard feedback
    • E.g. this feels cloudy, can it look more sunny? Please make it pop, etc.
  • Don’t get offended by feedback on creative work
    • Clients didn’t go to art school and don’t know about good feedback.
    • Clients will ignore all finished aspects of a design and only focus on the one minor thing that’s incorrect.
  • Revisions

17:58 - Development

  • Clear requirements make development much easier.
  • Sometimes this starts at the same time or in the process of design.
  • Only show dev progress if client is capable of understanding dev process.
    • Showing a developed site too early can cause clients to worry about visual aspects that aren’t yet in line with the design.
    • Showing to early is also a recip