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!

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”.

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

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 }?

• Udacity
• Coursera
• Contentful
• Ghost
• Prismic
• Strapi
• HeadlessCMS
• Sanity
• WordPress
• Drupal

• Scott: J.A. Henckels International 10-piece Capri Granitium Nonstick Cookware Set
• Wes: IRWIN VISE-GRIP 2078300 Self-Adjusting Wire Stripper, 8"

• Scott’s Gridsome Series
• Wes’ YouTube

• Scott’s Instagram
• LevelUpTutorials Instagram
• Wes’ Instagram
• Wes’ Twitter
• Wes’ Facebook
• Scott’s Twitter
• Make sure to include @SyntaxFM in your tweets

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 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.

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

• Law of Triviality
• React
• Vue.js
• AngularJS
• Ember.js
• Vim
• Emacs
• Atom
• Sublime
• VS Code

• Scott’s Instagram
• LevelUpTutorials Instagram
• Wes’ Instagram
• Wes’ Twitter
• Wes’ Facebook
• Scott’s Twitter
• Make sure to include @SyntaxFM in your tweets

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.

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 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.

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?

• Angular
• React
• Blaze
• What Hooks Mean for Vue
• Nuxt.js
• Next.js
• Gridsome
• Gatsy
• NativeScript
• Vue Native

• Wes: Modified Power Wheels
• Scott: Ezy Jeans by Uniqlo

• Wes: Node.js and React Scraper Tutorial
• Scott: Static Vue with Gridsome Coming Soon!

• Scott’s Instagram
• LevelUpTutorials Instagram
• Wes’ Instagram
• Wes’ Twitter
• Wes’ Facebook
• Scott’s Twitter
• Make sure to include @SyntaxFM in your tweets

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!

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.

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

• Syntax 039: Is jQuery Dead?

• Scott’s Instagram
• LevelUpTutorials Instagram
• Wes’ Instagram
• Wes’ Twitter
• Wes’ Facebook
• Scott’s Twitter
• Make sure to include @SyntaxFM in your tweets

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.

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 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.

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
  • Performance - Harry Roberts from CSS Wizardry
  • Accessibility - HeydonWorks
  • WordPress speed
  • React checking
• 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

• Canadian Couch Potato

• Scott: Google Drive Scanner
• Wes: Endy Mattress

• Scott’s React Hooks For Everyone
• Wes’ All Courses

• Scott’s Instagram
• LevelUpTutorials Instagram
• Wes’ Instagram
• Wes’ Twitter
• Wes’ Facebook
• Scott’s Twitter
• Make sure to include @SyntaxFM in your tweets

In this Hasty Treat, Scott and Wes talk about React Suspense — what it is, how it works, support and more!

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”.

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

• React 16.x Roadmap

• Scott’s Instagram
• LevelUpTutorials Instagram
• Wes’ Instagram
• Wes’ Twitter
• Wes’ Facebook
• Scott’s Twitter
• Make sure to include @SyntaxFM in your tweets

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 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 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.

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

• Notion

• Scott: Digital Minimalism by Cal Newport
• Wes: American Kingpin

• Scott’s React Hooks For Everyone
• Wes’ All Courses

• Scott’s Instagram
• LevelUpTutorials Instagram
• Wes’ Instagram
• Wes’ Twitter
• Wes’ Facebook
• Scott’s Twitter
• Make sure to include @SyntaxFM in your tweets

In this Hasty Treat, Scott and Wes talk about communication — why it’s important, how to improve, building good habits, tools and more!

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”.

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

• Email / Standups
• Notion
• GitHub Issues
• Slack
• Missive

• Syntax 075: Hasty Treat - Feedback and Criticism

• Scott’s Instagram
• LevelUpTutorials Instagram
• Wes’ Instagram
• Wes’ Twitter
• Wes’ Facebook
• Scott’s Twitter
• Make sure to include @SyntaxFM in your tweets

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!

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

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”.

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?

• Sentry
• Freshbooks
• Syntax 060: The Undocumented Wed
• Syntax 118: The Smart Home
• IFTTT Hue/Ring applet
• Syntax 120: Gatsby vs Next
• Next.js

• Scott: Clarity Money
• Wes: Wyze Camera

• Scott’s React Hooks For Everyone
• Wes’ CSS Grid Course

• Scott’s Instagram
• LevelUpTutorials Instagram
• Wes’ Instagram
• Wes’ Twitter
• Wes’ Facebook
• Scott’s Twitter
• Make sure to include @SyntaxFM in your tweets

In this Hasty Treat, Scott and Wes talk about authentication — the difference between localStorage, cookies, session, tokens and more!

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.

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

• Cookies vs Tokens: The Definitive Guide

• Scott’s Instagram
• LevelUpTutorials Instagram
• Wes’ Instagram
• Wes’ Twitter
• Wes’ Facebook
• Scott’s Twitter
• Make sure to include @SyntaxFM in your tweets