Alle afleveringen van Syntax - Tasty Web Development Treats – pagina 18 van 21

How To Get Better At Problem Solving

20 november 2019 · 1 uur

Afspelen

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 Lees meer

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 …

Hasty Treat - Tips For Writing Good CSS

18 november 2019 · 25 min

Afspelen

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 Lees meer

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 Stylus

Webpack

Parcel

Tweet us your tasty treats! Scott’s Instagram

LevelUpTutorials Instagram

Wes’ Instagram

Wes’ Twitter

Wes’ Facebook

Scott’s Twitter

Make sure to include @SyntaxFM in your tweets

Design Foundations For Developers

13 november 2019 · 1 uur 2 min

Afspelen

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
Take inspiration from the best — you’ll find your own voice after enough work
Go easy on trends - blobby characters with purple hair
Take a trip around the world wide web
Stripe Lees meer

Dribbble

Site Inspire

codrops

Refactoring UI

Links Designer Starter Pack - Andrea Crofts

LastPass

Colour Lovers

Syntax 142: Travis Neilson on Skills Gap, Design, Focus and Working at Google

Bloomberg

Dropbox

FontPair

FontJoy

Figma - Google Font Pairings

Type Scale

Creative Market

Radnika Next

Stripe

Dribbble

Syntax 72: Accessibility

Firefox

Site Inspire

codrops

Refactoring UI

Adam Wathan

Ste…

Hasty Treat - Buying and Selling Domain Names

11 november 2019 · 22 min

Afspelen

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 who.is Lees meer

GoDaddy

JavaScript.co

BeginnerJavaScript.com

LearnNode.com

BeginnerJS.com

KitBos.com

Cloudflare

Learn.li

Learnli.co

Escrow.com

Hover

Bob.com

Sedo.com

Park.io

Tweet us your tasty treats! Scott’s Instagram

LevelUpTutorials Instagram

Wes’ Instagram

Wes’ Twitter

Wes’ Facebook

Scott’s Twitter

Make sure to include @SyntaxFM in your tweets

Potluck - Gatsby vs Next × Is Google Home spying on you? × Flat File CMS × CSS Frameworks × Hosting Client Sites × More!

6 november 2019 · 1 uur

Afspelen

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 t… Lees meer

Hasty Treat - Spooky Stories

4 november 2019 · 21 min

Afspelen

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! Scott’s Instagram Lees meer

LevelUpTutorials Instagram

Wes’ Instagram

Wes’ Twitter

Wes’ Facebook

Scott’s Twitter

Make sure to include @SyntaxFM in your tweets

Spooky Web Dev Horror Stories

30 oktober 2019 · 46 min

Afspelen

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 Adam J. Sontag Lees meer

jQuery

GitLab

Gitlab Database Incident

Magento

Meteor

××× SIIIIICK ××× PIIIICKS ××× Scott: Dyson Hand Vacuum

Wes: /r/ AbsoluteUnits

Shameless Plugs Scott: Fullstack React with JS9 - Sign up for the year and save 25%!
Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
Tweet us your tasty treats! Scott’s Instagram

LevelUpTutorials Instagram

Wes’ Instagram

Wes’ Twitter

Wes’ Facebook

Scott’s Twitter

Make sure to include @SyntaxFM in your tweets

Hasty Treat - Scott Moves to iPhone

28 oktober 2019 · 26 min

Afspelen

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 Lees meer

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 1Password

LastPass

Gboard

Tweet us your tasty treats! Scott’s Instagram

LevelUpTutorials Instagram

Wes’ Instagram

Wes’ Twitter

Wes’ Facebook

Scott’s Twitter

Make sure to include @SyntaxFM in your tweets

Migrating, Deploying, and Hosting WordPress

23 oktober 2019 · 1 uur 2 min

Afspelen

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 Delicious Brains Lees meer

WP Migrate DB Pro

WP Offload Media

WP Offload SES

SpinupWP

Heroku

Now.sh

WP Engine

Flywheel

Advanced Custom Fields

Composer

WP Packagist

WordPress.org

React

Laravel

Pagely

Kinsta

GoDaddy

WordPress.com

SiteFround

Buddy

Digital Ocean

Laravel Forge

npm

Codeship

Gatsby

Laravel Vapor

Installing via Composer

WordPress deployment workflow

Managing your WordPress site with Git and Composer

××× SIIIIICK ××× PIIIICKS ××× Brad: Teppanyaki Grill

Scott: Succession and The Righteous Gemstones

Wes: Magnatiles

Shameless Plugs Brad: All Products

Scott: Svelte For Beginners - Sign up for the year and save 25%!
Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
Tweet us your tasty treats! Scott’s Instagram

LevelUpTutorials Instagram

Wes’ I…

Hasty Treat - React Server Side Rendering

21 oktober 2019 · 24 min

Afspelen

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 Next.js Lees meer

Gatsby

Webpack

Parcel

Meteor

React

NoSSR component

Syntax 127: Hasty Treat - React Suspense

Tweet us your tasty treats! Scott’s Instagram

LevelUpTutorials Instagram

Wes’ Instagram

Wes’ Twitter

Wes’ Facebook

Scott’s Twitter

Make sure to include @SyntaxFM in your tweets

The Fundamentals - Server Side

16 oktober 2019 · 55 min

Afspelen

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 GraphQL Lees meer

Node

React For Beginners

Next.js

Meteor

Papertrail

pjax

jQuery

Github

iMazing HEIC Converter

Now.sh

Netlify

Twitter streaming API

B is for Build

××× SIIIIICK ××× PIIIICKS ××× Scott: Samcrac YouTube Channel

Wes: Wyze Plugs

Shameless Plugs Scott: Svelte For Beginners - Sign up for the year and save 25%!
Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
Tweet us your tasty treats! Scott’s Instagram

LevelUpTutorials Instagram

Wes’ Instagram

Wes’ Twitter

Wes’ Facebook

Scott’s Twitter

Make sure to include @SyntaxFM in your tweets

Hasty Treat - Float Tank Experiences

14 oktober 2019 · 23 min

Afspelen

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 The Joe Rogan Experience Lees meer

Tweet us your tasty treats! Scott’s Instagram

LevelUpTutorials Instagram

Wes’ Instagram

Wes’ Twitter

Wes’ Facebook

Scott’s Twitter

Make sure to include @SyntaxFM in your tweets

Potluck - Terminal Configs × CSS Reset × Flexbox × Freelancing × NPM Dependencies × Project Hand-off × More!

9 oktober 2019 · 56 min

Afspelen

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 … Lees meer

Hasty Treat - Feature + Release Planning

7 oktober 2019 · 19 min

Afspelen

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 Github Lees meer

Trello

Kanban

Jira

Canny

Notion

Getting Things Done

Tweet us your tasty treats! Scott’s Instagram

LevelUpTutorials Instagram

Wes’ Instagram

Wes’ Twitter

Wes’ Facebook

Scott’s Twitter

Make sure to include @SyntaxFM in your tweets

Desktop & Mobile Apps With a Single Codebase

2 oktober 2019 · 57 min

Afspelen

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 @EtienneLem Lees meer

Missive

Spark

CoffeeScript

Backbone

Redux

Typescript

Electron

Webpack

Javascript30

Cordova

React Native

Fastlane

Amazon S3

Cypress

Sass

TailwindCSS

Svelte

Syntax 176: Building Steam Games with React

××× SIIIIICK ××× PIIIICKS ××× Scott: Disgraceland Podcast

Wes: Wagner 590 Spray Gun

Etienne: Prettier

Shameless Plugs Scott: Svelte Course Coming Soon! - Sign up for the year and save 25%!
Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
Etienne: Missive

Tweet us your tasty treats! Scott’s Instagram

LevelUpTutorials Instagram

Wes’ Instagram

Wes’ Twitter

Wes’ Facebook

Scott’s Twitter

Make sure to include @SyntaxFM in your tweets

Hasty Treat - Developing Better Habits

30 september 2019 · 28 min

Afspelen

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 Lees meer

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 uhabits

Done

Loop

K-Safe

Alfred

Codepen

Atomic Habits

The Power of Habit

Tweet us your tasty treats! Scott’s Instagram

LevelUpTutorials Instagram

Wes’ Instagram

Wes’ Twitter

Wes’ Facebook

Scott’s Twitter

Make sure to include @SyntaxFM in your tweets

Practical: How would we build Airbnb, Twitter, or Reddit?

25 september 2019 · 52 min

Afspelen

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
Express Lees meer

Node

GraphQL

MongoDB

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
Syntax Ep 32: Designing, Templating, Inlining and Sending Email

mjml

Juice

Inky

Nodemailer

Postmark

Mailjet

Mandrill

Get everyone set up and working in two different systems, so you can switch easily if something goes wrong
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
Cloudinary

imgIX

41:50 - Other things to be aware of
Handling cash Stripe

PayPal

Braintree

Recurly

Queueing
Links Ruby on Rails

Django

Meteor

MySQL

PHP

Postgres

Mongoose

Drip

ConvertKit

Feathers

David Luecke

Tweetdeck

Next.js

react-router

Reach Router

Gatsby

Digital Ocean

Heroku

Redux

Svelte

Gridsome

Mailchimp

××× SIIIIICK ××× PIIIICKS ××× Scott: K-Safe

Wes: Bon Appetit YouTube Channel

Shameless Plugs Scott: Svelte Course Coming Soon! - Sign up for the year and save 25%!
W…

Hasty Treat - Automating Stuff

23 september 2019 · 24 min

Afspelen

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 Alfred Lees meer

Wyze Cam

Google Home

Drip

Divvy

Tweet us your tasty treats! Scott’s Instagram

LevelUpTutorials Instagram

Wes’ Instagram

Wes’ Twitter

Wes’ Facebook

Scott’s Twitter

Make sure to include @SyntaxFM in your tweets

Potluck - Why Webpack? × Serverless × Agencies × Recruiters × CSS Grid × MQ in Styled Components

18 september 2019 · 59 min

Afspelen

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 Webpack Lees meer

Parcel

Gulp

Codeship

Semaphore

r/reactjs

r/webdev

Wordpress

Upwork

Fiverr

Svelte

Syntax 173: Hasty Treat - Wes & Scott Look At Svelte …

Hasty Treat - The TLD Game

16 september 2019 · 23 min

Afspelen

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:
Is it for a country or business? -5 points
What country, business, or type of business is it for? -5 points
How much per year does it cost to register? You may also say “unregisterable” +/- off by $$
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 101Domain Lees meer

Tweet us your tasty treats! Scott’s Instagram

LevelUpTutorials Instagram

Wes’ Instagram

Wes’ Twitter

Wes’ Facebook

Scott’s Twitter

Make sure to include @SyntaxFM in your tweets

How We Record, Edit, and Host Our Courses

11 september 2019 · 1 uur 5 min

Afspelen

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
Wes:
Screenflow Lees meer

Uberlayer

Loopback

Heil PR40

Heil PL-2T

dbx 286s

Focusrite Scarlett 2i2

Scott:
Screenflick

iShow HD

Divvy

Principal for Mac

EV RE-20

dbx 286s

Focusrite Scarlett 2i2

Sony a7 III

Logic

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
Wes:
Wistia

Vimeo

Rev

Backblaze

Amazon S3

My own course platform, with additional controls added via React

Scott:
YouTube

Vimeo

Plyr Video Player

Backblaze

Amazon S3

Custom course platform

52:46 - Common Questions
Links Syntax 014: Our Stacks Explained

Adobe Premier Pro

Figma

VS Code

Audio-Technica AT2020

Blue Bluebird

BSW

Sweetwater

Tim Smith - Video Editing

××× SIIIIICK ××× PIIIICKS ××× Scott: Hyperdrive

Wes: PicQuic Screwdriver

Shameless Plugs Scott: LevelUpTutorials Pro - Advanced Gatsby & Shopify - Sign up for the year and save 25%!
Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
Tweet us your tasty treats! Scott’s Instagram

LevelUpTutorials Instagram

Wes’ Instagram

Wes’ Twitter

Wes’ Facebook

Scott’s Twitter

Make sure to include @SyntaxFM in your tweets

Hasty Treat - Moving from PHP to Node

9 september 2019 · 18 min

Afspelen

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 Wes’ tweet thread Lees meer

Forever

PM2

Tweet us your tasty treats! Scott’s Instagram

LevelUpTutorials Instagram

Wes’ Instagram

Wes’ Twitter

Wes’ Facebook

Scott’s Twitter

Make sure to include @SyntaxFM in your tweets

Building Steam Games with React

4 september 2019 · 52 min

Afspelen

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 Steam Lees meer

Danger Crew

aseprite

Buy Danger Crew

Drew Conley

Pixels to SVG

GameMaker

Making an editor

Electron

××× SIIIIICK ××× PIIIICKS ××× Drew: Strange Planet Instagram

Wes: MX Master Config Tweet Thread

Scott: Figma

Shameless Plugs Drew: Danger Crew

Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
Scott: LevelUpTutorials Pro - Advanced Gatsby & Shopify

Tweet us your tasty treats! Scott’s Instagram

LevelUpTutorials Instagram

Wes’ Instagram

Wes’ Twitter

Wes’ Facebook

Scott’s Twitter

Make sure to include @SyntaxFM in your tweets

Hasty Treat - Stump'd

2 september 2019 · 16 min

Afspelen

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! Scott’s Instagram Lees meer

LevelUpTutorials Instagram

Wes’ Instagram

Wes’ Twitter

Wes’ Facebook

Scott’s Twitter

Make sure to include @SyntaxFM in your tweets

How to Build an API

28 augustus 2019 · 46 min

Afspelen

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
REST Lees meer

GraphQL

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

Koa

Meteor

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
Only accept requests from logged-in users oAuth
Cookie/Session
jwt

API key
CORS
Check roles - access level
Syntax 055: Hasty Treat - User Role Systems

32:42 - Protecting
Rate limit
Whitelist / blacklist
Cloudflare

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
Postman

Swagger

Links Stripe

××× SIIIIICK ××× PIIIICKS ××× Scott: Hoax Podcast

Wes: Solar Lights

Shameless Plugs Scott: LevelUpTutorials Pro - Advanced Gatsby & Shopify

Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
Tweet us your tasty treats! Scott’s Instagram

LevelUpTutorials Instagram

Wes’ Instagram

Wes’ Twitter

Wes’ Facebook

Scott’s Twit…

Hasty Treat - Wes & Scott Look At Svelte 3

26 augustus 2019 · 23 min

Afspelen

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 https://svelte.dev/examples#hello-world Lees meer

Mustache

Webpack

Rollup.js

Next.js

Sapper

Svelte Native

React Native

Svelte - Typescript support

Rethinking Reactivity

Tweet us your tasty treats! Scott’s Instagram

LevelUpTutorials Instagram

Wes’ Instagram

Wes’ Twitter

Wes’ Facebook

Scott’s Twitter

Make sure to include @SyntaxFM in your tweets

Potluck - Deploying Applications × Typescript × Live Coding with Twitch × Fullstack Architecture × More!

21 augustus 2019 · 47 min

Afspelen

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 thought… Lees meer

Hasty Treat - How To Publish A React Component To NPM

19 augustus 2019 · 18 min

Afspelen

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 Rollup Lees meer

testing-library/react-testing-library

transitive-bullshit/create-react-library

leveluptuts/fresh

How To Make a React Component Library - Making A React Library

React Styleguidist

Storybook

Docz

DocSource

npm-link

Yarn

wesbos/dump

wesbos/Waait

Tweet us your tasty treats! Scott’s Instagram

LevelUpTutorials Instagram

Wes’ Instagram

Wes’ Twitter

Wes’ Facebook

Scott’s Twitter

Make sure to include @SyntaxFM in your tweets

State In React

14 augustus 2019 · 55 min

Afspelen

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

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 Thinkso

Learn Node!

Meteor Session

xstate-react

React Context

Mobx

easy-peasy

hype.codes

providerCompose.js

Relay

React Podcast

××× SIIIIICK ××× PIIIICKS ××× Scott: Command Line Heroes

Wes…

Hasty Treat - Remote Internet

12 augustus 2019 · 24 min

Afspelen

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 Deadmau5 house Lees meer

ZTE MF288

Netgear LB1120

Mofi Routers

ZBT WE826T

Rogers

Ubiquiti Networks

Tomato Firmware

Tweet us your tasty treats! Scott’s Instagram

LevelUpTutorials Instagram

Wes’ Instagram

Wes’ Twitter

Wes’ Facebook

Scott’s Twitter

Make sure to include @SyntaxFM in your tweets

Blogging

7 augustus 2019 · 50 min

Afspelen

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 WordPress Lees meer

Gatsby

Squarespace

Netlify

Tumblr

Medium

Hacker Noon

Freedcamp

Devtoo

Smashing Magazine

Net Magazine

Gridsome

GraphQL

Vuepoint

Everything I wish I knew running a sole proprietorship business

@peterc

JavaScript Weekly

Cooperpress

Seth Godin

Overreacted - Dan Abramov

××× SIIIIICK ××× PIIIICKS ××× Scott: Business Wars

Wes: Spectacular Failures

Shameless Plugs Scott: Level Up Tutorials Pro — Subscribe before price goes up!
Wes: All Courses — Use the coupon code ‘Syntax’ for $10 off!
Tweet us your tasty treats! Scott’s Instagram

LevelUpTutorials Instagram

Wes’ Instagram

Wes’ Twitter

Wes’ Facebook

Scott’s Twitter

Make sure to include @SyntaxFM in your tweets

Hasty Treat - VSCode Love Part 3

5 augustus 2019 · 19 min

Afspelen

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
Snippet Generator Lees meer

Get to know defaults as well as tabs
Mongo Snippets for Node-js

Links VSCode Marketplace

VSCode Insiders Build

React Snippets

JavaScript (ES6) Code Snippets

HTML Snippets

ES7 React/Redux/GraphQL/React-Native snippets

Vue VSCode Snippets

Atom Snippets

Text Expander

Tweet us your tasty treats! Scott’s Instagram

LevelUpTutorials Instagram

Wes’ Instagram

Wes’ Twitter

Wes’ Facebook

Scott’s Twitter

Make sure to include @SyntaxFM in your tweets

Potluck - What is "State"? × Web Sockets × Remote Working × Firefox × Machines Taking Our Jobs × More!

31 juli 2019 · 55 min

Afspelen

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 … Lees meer

Hasty Treat - VSCode Treats Part 2

29 juli 2019 · 19 min

Afspelen

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
Git Blame Lees meer

Apollo GraphQL

VS Code Spell Checker

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 Syntax 161: Hasty Treat - VSCode Extensions & Themes

Alfred

Playlist.js

Tweet us your tasty treats! Scott’s Instagram

LevelUpTutorials Instagram

Wes’ Instagram

Wes’ Twitter

Wes’ Facebook

Scott’s Twitter

Make sure to include @SyntaxFM in your tweets

A Story About Kanye West and Learning to Code

24 juli 2019 · 57 min

Afspelen

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 The Kanye Story
TheNetNinja
@rogerfederer
Refactoring UI
@GonzoVice
Dang That’s Delicious
Puck
@joerogan
Code Academy
ChatKit by Pusher
@grantimahara
Mythbusters
@elonmusk
Marketing Examples
@goodmarketinghq
@harrydry
××× SIIIIICK ××× PIIIICKS ××× Scott: BattleBots Lees meer

Wes: Logitech MX Master 2S Wireless Mouse

Harry: Twitter Demetricator

Harry: CAMP LIFE: BIG JOHN FURY GIVES TOUR OF VINTAGE CARAVAN

Shameless Plugs Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
Scott: Dev Tools and Debugging and Gatsby and E-commerce

Tweet us your tasty treats! Scott’s Instagram
LevelUpTutorials Instagram
Wes’ Instagram
Wes’ Twitter
Wes’ Faceb…

Hasty Treat - Web Dev Resource Sick Picks

22 juli 2019 · 22 min

Afspelen

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
Scott: HeyDesigner Lees meer

Wes: Mathias Bynens

5:00 - Web Dev Resources
Scott: Scotch.io

Wes: Webgems.io

7:37 - Design Resources
Scott: UI Movement

Wes: Creative Market

11:36 - Desktop Tools
Scott: Pock

Wes: MongoDB Compass

14:59 - YouTube
Scott:
JSConf
stance

Wes:
Andrew Camarata
dotconferences

Links Studio3t
Tweet us your tasty treats! Scott’s Instagram
LevelUpTutorials Instagram
Wes’ Instagram
Wes’ Twitter
Wes’ Facebook
Scott’s Twitter
Make sure to include @SyntaxFM in your tweets

The Fundamentals — JS

17 juli 2019 · 44 min

Afspelen

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 Lees meer

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
Clean Code Javascript
Links Syntax 043: 20 Javascript Array and Object Methods to make you a better developer
Syntax 141: Hasty Treat - Async + Await Error Handling Strategies
Syntax 072: Accessibility
××× SIIIIICK ××× PIIIICKS ××× Scott: BaseCS

Wes: Owlet Baby Monitor

Shameless Plugs Scott’s new E-Commerce and Gatsby Course

Wes’ Courses - Use the coupon code ‘Syntax’ for $10 off!
Tweet us your tasty treats! Scott’s Instagram
LevelUpTutorials Instagram
Wes’ Instagram
Wes’ Twitter
Wes’ Facebook
Scott’s Twitter
Make sure to include @SyntaxFM in your tweets

Hasty Treat - VSCode Extensions & Themes

15 juli 2019 · 20 min

Afspelen

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
Cobalt 2
SyntWave '84
4:58 - Fonts
Dank Mono
Operator Mono
7:12 - Five things we love
Wes:
Bracket Pair Colorizer Lees meer

Permute Lines, Unique Lines

Breadcrumbs
Toggle Quotes
Snapshot Tools

Scott:
Better Comments
Import Cost
Ctrl+Click Go To Definition
Wrap Console Log Simple
Git History

Tweet us your tasty treats! Scott’s Instagram
LevelUpTutorials Instagram
Wes’ Instagram
Wes’ Twitter
Wes’ Facebook
Scott’s Twitter
Make sure to include @SyntaxFM in your tweets

GraphQL and WordPress

10 juli 2019 · 1 uur 4 min

Afspelen

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 WPGraphQL
Kyle Mathews
GraphQL
Gatsby
WordPress
Meteor
Apollo GraphQL
GraphiQL
WPGraphiQL
WAMP
Flywheel
Local by Flywheel
PhpStorm
Lando
Laravel
React
Netlify
Jason Schuller
Leeflets
Press75
Advanced Custom Fields
WPGraphQL Tax Query
WPGraphQL Meta Query
WPGraphQL for Advanced Custom Fields
Jason’s Twitter
WPGraphQL Twitter
××× SIIIIICK ××× PIIIICKS ××× Scott: Figma Lees meer

Wes: CalDigit TS3 Plus Thunderbolt 3 Dock

Jason: Local by Flywheel

Shameless Plugs Scott’s new course - Dev Tools & Debugging

Wes - All Courses - Use the coupon code ‘Syntax’ for $10 off!
Jason - WPGra…

Hasty Treat - Front End Security

8 juli 2019 · 20 min

Afspelen

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 Lees meer

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 React
GraphQL
Express
Tweet us your tasty treats! Scott’s Instagram
LevelUpTutorials Instagram
Wes’ Instagram
Wes’ Twitter
Wes’ Facebook
Scott’s Twitter
Make sure to include @SyntaxFM in your tweets

The Fundamentals: HTML + CSS

3 juli 2019 · 56 min

Afspelen

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 Interviewing candidates with a lack of fundamentals - Tweet
Jean-Philippe Sirois Tweet
Syntax 72: Accessibility
Syntax 107: Hasty Treat - CSS Units
××× SIIIIICK ××× PIIIICKS ××× Scott: I Think You Should Leave with Tim Robinson Lees meer

Wes: Forearm Forklift Lifting and Moving Straps

Shameless Plugs Scott’s new course - “Debugging and Dev Tools”

Wes’ courses - Use the coupon code ‘Syntax’ for $10 off!
Tweet us your tasty treats! Scott’s Instagram
LevelUpTutorials Instagram
Wes’ Instagram
Wes’ Twitter
Wes’ Facebook
Scott’s Twitter
Make sure to include @SyntaxFM in your tweets

Hasty Treat - What is a Headless CMS?

1 juli 2019 · 17 min

Afspelen

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
Syntax 120 - Gatsby vs Next
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 WordPress
Sanity.io
React
Syntax 120 - Gatsby vs Next
Netlify
GraphQL
Cobalt
Gatsby.js
Drupal
Next.js
Nginx
Tweet us your tasty treats! Scott’s Instagram
LevelUpTutorials Instagram
Wes’ Instagram
Wes’ Twitter
Wes’ Facebook
Scott’s Twitter
Make sure to include @SyntaxFM in your tweets Lees meer

Potluck - Career Switch at 33 × Cover Letters × Kids × Learning Quickly × More!

26 juni 2019 · 59 min

Afspelen

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… Lees meer

Hasty Treat - Making Yourself Uncomfortable To Grow

24 juni 2019 · 26 min

Afspelen

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! Scott’s Instagram
LevelUpTutorials Instagram
Wes’ Instagram
Wes’ Twitter
Wes’ Facebook
Scott’s Twitter
Make sure to include @SyntaxFM in your tweets Lees meer

SVGs with Sara Soueidan

19 juni 2019 · 1 uur 1 min

Afspelen

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 Font Awesome
Grunticon
Grunt
gulp.js
React
Vue.js
Sketch
Illustrator
Figma
imagemin
gulp-imagemin
Gatsby.js
gatsby-plugin-sharp
jakearchibald/svgomg
Noun Project
Freepik
Icomoon
GreenSock
Snap.svg
SVG Animations: From Common UX Implementations to Complex Responsive Animation By Sarah Drasner
Codrops
D3.js
××× SIIIIICK ××× PIIIICKS ××× Sara: Netlify Lees meer

Wes: Wise Contact Sensors

Shameless Plugs Sara’s Website & Workshop Dates

Wes’ Courses - Use the coupon code ‘Syntax’ for $10 off!
Tweet us your tasty treats! Scott’s Instagram
LevelUpTutorials Instagram
Wes’ Instagram
Wes’ Twitter
Wes’ Facebook
Scott’s Twitter
Make sure to include @SyntaxFM in your tweets
Sara’s Twitter

Hasty Treat - New Intl Methods Are Straight Fire

17 juni 2019 · 19 min

Afspelen

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 Standard built-in objects
Language Subtag Registry
Tweet us your tasty treats! Scott’s Instagram
LevelUpTutorials Instagram
Wes’ Instagram
Wes’ Twitter
Wes’ Facebook
Scott’s Twitter
Make sure to include @SyntaxFM in your tweets Lees meer

Debugging Tools + Tips

12 juni 2019 · 49 min

Afspelen

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
CLDD - console.log driven development
How To Pause Your Code With Breakpoints In Chrome DevTools
Other types of break points XHR
DOM break on attribute change
DOM break on children
Conditional break
Break on exception
Break on event listener Lees meer

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 Debugging Visual Studio Code (Node) - James Q Quick
CodePen
Spencer Carli’s Youtube
××× SIIIIICK ××× PIIIICKS ××× Wes: DeWALT Lawn Mower

Scott: Cold Brew Coffee Maker

Shameless Plugs
Wes’ Courses - Use the coupon code ‘Syntax’ for $10 off!
Level 2 React Native with GraphQL
Tweet us your tasty treats! Scott’s Instagram
LevelUpTutorials Instagram
Wes’ Instagram
Wes’ Twitter
Wes’ Facebook
Scott’s Twitter
Make sure to include @SyntaxFM in your tweets

Hasty Treat - Std Lib in JavaScript

10 juni 2019 · 19 min

Afspelen

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 Lees meer

6:47 - Key Value Storage is the first one:
KV Storage: the Web’s First Built-in Module
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 JavaScript Standard Library Proposal
Add remaining Underscore / Lodash features
JavaScript standard library contents
Tweet us your tasty treats! Scott’s Instagram
LevelUpTutorials Instagram
Wes’ Instagram
Wes’ Twitter
Wes’ Facebook
Scott’s Twitter
Make sure to include @SyntaxFM in your tweets

Gatsby Themes

5 juni 2019 · 57 min

Afspelen

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 Gatsby
Jason Lengstorf
Livestream
Progressive Disclosure of Complexity
Gatsby Themes
Sanity
Gatsby + Sanity.io
Snipcart
Axios
Algolia
Netlify
Airtable
Hope in Source - Henry Zhiu
××× SIIIIICK ××× PIIIICKS ××× Jason: Kamado Joe Grill Lees meer

Scott: Zojirushi Hybrid Water Boiler and Warmer

Wes: Waterproof Digital Instant Read Meat Thermometer

Shameless Plugs Jason’s Weekly Live stream
Scott’s Courses

Wes’ Courses - Use the coupon code ‘Syntax’ for $10 off!
Tweet us your tas…

Hasty Treat - Workshops

3 juni 2019 · 24 min

Afspelen

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 Lees meer

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! Scott’s Instagram
LevelUpTutorials Instagram
Wes’ Instagram
Wes’ Twitter
Wes’ Facebook
Scott’s Twitter
Make sure to include @SyntaxFM in your tweets