Alle afleveringen

1.049 afleveringen, van nieuw naar oud

Voice Coding is Really Good with Josh Comeau

4 november 2020 · 59 min
Afspelen

In this episode of Syntax, Scott and Wes talk with Josh Comeau about coding with your voice, accessibility, bootcamps, animation, and more!
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Guests Josh Comeau Lees meer

Show Notes 01:48 - What is your background?
04:33 - Coding with your voice
08:32 - How do you code for a living if you can only do it for a few minutes a day?
21:56 - How has it impacted your productivity?
22:46 - Is it easier with a typed language like Typescript?
26:05 - What about accessibility?
27:14 - How good is the eye tracker?
29:30 - What got you into animation?
35:29 - Favorite app for animations?
40:12 - Being a teacher
41:44 - Is it worth going to a bootcamp?
44:57 - Interactivity in teaching
Links joshwcomeau.com

@concordia_btcmp

@gatsbyjs

@khanacademy

@unsplash

Talon

Using Python to Code by Voice

Neuralink

Tobii 5

Moleskine Apps

VLC

VSCode

freeCodeCamp

Syntax 246: Bootcamps, Getting a Job, and Income Share Agreements with Heather Payne

https://joshwcomeau.com/css/full-bleed/

Nintendo Switch

Navigator.vibrate

Voice Driven Development

××× SIIIIICK ××× PIIIICKS ××× Josh: The Utterly Uninteresting and Unadventurous Tales of Fred, the Vampire Accountant

Scott: The Neighborhood Listen

Wes: Every Tool’s a Hammer by Adam Savage

Shameless Plugs Josh: CSS for Javascript Developers | An online course tha…
Hasty Treat - Certifications? Government Specified JavaScript Skills?

2 november 2020 · 20 min
Afspelen

In this Hasty Treat, Scott and Wes talk about web dev certifications — are they worth it, or a waste of time?
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Show Notes 02:12 - Certifications
05:30 - We have standards, and people move faster than standards.
jQuery moved faster than vanilla JS
Typescript is sometimes preferred over regular JS
We have universities that offer web developer certs and many of them are a joke
The point is that programming is the wild west — it’s far too broad and moves far too fast for us to try and fit it in a box
10:28 - Do certifications mean anything?
14:30 - How do you know if you have enough skills (when you’re job hunting)?
19:04 - Some jobs do require a certification
AWS
Google
Links https://openjsf.org/certification/ Lees meer

https://www.sentiatechblog.com/imposter-syndrome-how-to-display-front-end

https://twitter.com/wesbos/status/1318192217824124928

https://twitter.com/photonstorm/status/1318193404312944641

https://twitter.com/Ky1e_S/status/1318193954085634048

https://twitter.com/ArleyM/status/1318194323821912067

https://twitter.com/ajitbohra/status/1318194600335470592

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
Spooky Web Dev Stories — Part 2

28 oktober 2020 · 1 uur 3 min
Afspelen

In this episode of Syntax, Scott and Wes are back for another episode of spooky web dev stories — listener-submitted stories about web dev gone wrong.
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.
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 03:28 - Jack Rhysider Story
06:28 - Dirty Dicks JSON
08:23 - CMS Disaster
10:58 - Oh No Hotel
11:19 - FTP
12:19 - Push Notification Hell
13:16 - DVD Nightmare
15:15 - Bad Words Again
16:23 - Mo Money
17:01 - Bass Ackwards
18:17 - Taxi Coding
19:36 - Bad Env
21:30 - Login As
21:50 - Email Subscribers Plugin
22:33 - 1 in 300 Chance of the C-Word
24:24 - Production Target
26:12 - A Happy SEO Ending
28:26 - Just Oof
29:48 - I’ve Fallen and I Can’t Get Up
30:54 - Crypto
32:34 - rm -rf
33:42 - Never Deploy on Fridays
35:31 - Million Dollar Scramble
36:22 - Deleting Production
37:11 - 500,000 Concurrent Problems
39:14 - Deleting a Government Website
40:36 - You Ruined the Surprise!
45:23 - Mr. D Hole
46:48 - One Expensive Race Condition
48:43 - Yikes
51:11 - Always Be Closing
51:44 - Adidas - All Day I Delete A Site
Links @JackRhysider Lees meer

Darknet Diaries Podcast

ExpressionEngine

#ghosts

chefkoch.de

Sendgrid

Magento

Evite

××× SIIIIICK ××× PIIIICKS ××× Scott: Fastify

Wes: 🇨🇦 Mr Chefer Meat Thermometer

🇺🇸 Mr Chefer Meat Thermometer

Shameless Plugs Scott: Level Up Pro - 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 - Temporal Date Objects in JavaScript

26 oktober 2020 · 17 min
Afspelen

In this Hasty Treat, Scott and Wes talk about Temporal Date Objects in JavaScript — a WICKED AWESOME API for working with times and dates.
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Show Notes 05:11 - Temporal Now
You can get now Temporal.now.___ Lees meer

07:58 - Temporal Instants
A Temporal.Instant represents a fixed point in time, without regard to calendar or location. Most common way to show it is nanoseconds since unix epoch.
Can be formatted a few different ways.

09:59 - Calendar
Support for different types of calendars
11:43 - Durations
Temporal.Duration There are .from and .add and subtract() methods

12:47 - Other interesting parts
Timezones Temporal.ZonedDateTime

Temporal.YearMonth - represents a ym = new Temporal.YearMonth(2019, 6) // => 2019-06
14:51 - Polyfill (unstable)
Links Fixing JavaScrip Date - Maggie Pint

https://github.com/tc39/proposal-temporal

https://github.com/tc39/proposal-temporal/blob/main/docs/calendar.md#methods

https://github.com/tc39/proposal-temporal/blob/main/docs/duration.md

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
Spooky Web Dev Stories — Part 1

21 oktober 2020 · 54 min
Afspelen

In this episode of Syntax, Scott and Wes talk about spooky web dev stories — listener-submitted stories about web dev gone wrong.
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.
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Show Notes 03:12 - The Most Expensive Boolean Ever
06:19 - An Actual Logging Issue
09:37 - Snitches Get Stitches
10:41 - The Spooky Office Skeleton
12:04 - Prevent the Default of Making Money
13:52 - Computer Magic Trick
14:42 - Update Score
15:59 - Change Reaction
19:30 - Personal Mongodb
20:26 - Hello Rob!
22:08 - SSN Regex
23:06 - WordPress Plugins
23:52 - Loggin Ya In, Ya F’in Dummy
24:58 - A Hostel Coding Environment
25:59 - A Graceful Exit
27:27 - Favicon DDOS
28:07 - Common Cents
29:03 - Open Source Vendors
33:04 - Don’t Leave the Country
35:09 - Apostrophe Catastrophe
35:43 - Env
36:05 - A Christmas Miracle
36:43 - The One Million Dollar Bill
39:00 - The Hacker Who Dropped the DB
40:19 - The Tech Lead Who Uses Alert Statements
46:14 - Lorem Ipsum
46:58 - Malicious Compliance
Links Indigo.ca Lees meer

r/MaliciousCompliance

××× SIIIIICK ××× PIIIICKS ××× Scott: Hades Game

Wes: LED Flame Bulb

Smaller LED Flame Bulbs

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

LevelUpTutorials Instagram

Wes’ Instagram

Wes’ Twitter

Wes’ Facebook

S…
Hasty Treat - Stretching For Developers with Scott

19 oktober 2020 · 20 min
Afspelen

In this Hasty Treat, Scott and Wes talk about stretching for developers — techniques, misconceptions, and how to feel better.
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 03:21 - Devs do the following
Head forward looking at screen
Shoulders forward
Sitting a lot
Weak core
Carpel tunnel from typing
06:02 - Stretching misconceptions
Static holds
Dynamic controlled movements first and foremost
07:52 - Stretches to help
Dynamic twists
Cat / Cow
Flat down / Curl up spine
Arm hang to decompress spine
Wrist stretches and strengthening for carpel tunnel
Horse stance at standing desk to be office weird person
Shoulder circles
Doorway stretches
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 Make Freelancing Easier

14 oktober 2020 · 59 min
Afspelen

In this episode of Syntax, Scott and Wes talk about how to make freelancing easier — how to avoid burnout, and tips and tricks to make it successful.
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”.
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 02:15 - Code
Use starters and resets and component libraries
Don’t build in something you don’t know, unless you have time and budget to do so — WP is good enough for most projects
Feel free to go over time on projects if you are learning something new
Re-use code from project to project
Target similar types of clients
13:09 - Communication
Often, clear and frequent People won’t be mad for being too informed — just know when to leave out the technical jargon Lees meer

Clients typically don’t care about Git, React, etc. — they care about results
Don’t overwhelm them
Train your clients that you aren’t available 24/7
22:19 - Time management
Set calendar alerts early and often to not miss communications
Set meetings at 9am, don’t wait around all day for meetings
Block off large amounts of time for dev — you won’t be able to get meaningful work done in one-hour slots
27:54 - Contracts + quoting
Have a boilerplate contract that you can just fill in Same for a quote

Value-based billing
33:47 - Billing + taxes
Don’t be shy when talking about money. Be clear on what you need, when you need it, and on what terms. This is business. This is your art, but it’s a…
Hasty Treat - Updating / Restarting Long-Running Web Apps

12 oktober 2020 · 13 min
Afspelen

In this Hasty Treat, Scott and Wes talk about updating web apps that have running for a long time — the problems to look out for and how to avoid them.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes 01:54 - The problem
This only affects the client-side
05:28 - What are some solutions:
Do nothing and hope the user refreshes.
Have a list of assets, or commit hashes. Poll the server periodically, and when there is a new version available: Prompt the user to refresh
Just refresh the user (store current state in localstorage and restore) Lees meer

Do a custom component, that checks the last time the user has refreshed (or if new version if available). When they click the link, render a regular instead of a pushstate link.

Use a service worker. They will emit an event when a new version is available. Use the above methods to refresh the user.
Hot code push. Vuepress has “hot reloading” baked in.

Links https://twitter.com/wesbos/status/1306969658751361024

Notion

Vuepress

Meteor

Tweet us your tasty treats! Scott’s Instagram

LevelUpTutorials Instagram

Wes’ Instagram

Wes’ Twitter

Wes’ Facebook

Scott’s Twitter

Make sure to include @SyntaxFM in your tweets
Potluck - Is Angular good? × Stencil.js × Self XSS × SVGs in React × Social Platforms for Devs × Project Handoff × Cleaning Knives × More!

7 oktober 2020 · 58 min
Afspelen

It’s another potluck! In this episode, Scott and Wes answer your questions about getting your first web dev job, what makes a software engineer senior, handing off projects to clients, Angular vs React, the best social platforms for devs, and more!
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Show Notes 01:58 - You’ve talked a couple times in the past about the security concerns around target="_blank". You mentioned how adding rel="noopener" and / or rel="noreferrer" can secure this functionality, but what’s to stop a savvy person from going into the dev tools and deleting these attributes before clicking a link? Does this defeat the entire purpose or what? Surely browsers have thought of this and it’s not so easy to hack?
03:48 - Why did you not mention Stencil when talking about web-component in the last Potluck? Can I presume you have not heard of it? It is quite successful and Ionic proves it. We’ve been using it for two years in production. This is the only library that thought web-components through to the end. If you know it, what do you think about it and would you use it?
Example of a stencil component:
import { Component, Prop, h } from '@stencil/core'; @Component({ tag: 'my-first-component', }) export class MyComponent { // Indicate that name should be a public property on the component @Prop() name: string; render() … Lees meer
Hasty Treat - Enums in JS (GraphQL and Typescript)

5 oktober 2020 · 13 min
Afspelen

In this Hasty Treat, Scott and Wes talk about enums in JS — what they are, what they do, and how they work in 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.
Show Notes 03:11 - What are enums?
A type restricting variables to one value from a predefined set of constants
Direction = UP / DOWN / LEFT / RIGHT
Role = ADMIN EDITOR AUTHOR VIEWER
Day of the Week
05:12 - In GraphQL
enum Role { ADMIN EDITOR AUTHOR VIEWER}
Then
07:05 - In TypeScript
First, declare the type: enum direction = { UP, DOWN, LEFT, RIGHT } Lees meer

Then when you defined your function, use that type type User { role: Role } or type User { role: [Role] }

08:49 - In JavaScript
Not in JS yet
There is a proposal in stage 1 https://github.com/rbuckton/proposal-enum

And a babel plugin: https://www.npmjs.com/package/babel-plugin-const-enum

Can use case/switch
Can use Object or Map keys
Links Syntax 287: Hasty Treat - Records and Tuples in JavaScript

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
Tales from Web Dev Past - Part 2

30 september 2020 · 49 min
Afspelen

In this episode of Syntax, Scott and Wes are back with part 2 of Tales from Web Dev Past — this time looking at iFrames, layout trends, icon fonts, web rings, 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.
Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.
Show Notes 03:00 - iFrames
Sidebar menu
target
05:42 - JavaScript image hovers
Dreamweaver Lees meer

Photoshop Slice and Select Tool
08:24 - CSS Pie
09:42 - Animated gifs of people and construction
http://textfiles.com/underconstruction/

11:20 - CSS Zoom 1 / IE CSS Hacks
Forced IE 7 to redraw floats
13:42 - Layout trends
800x600 fixed websites
960gs

Golden Grid

12-col grid creators
16:26 - Sprite maps
Spritecow

☠️ Killed icon fonts ☠️ Killed by SVG icons

18:40 - Firebug and Firebug Lite
Lite was a bookmarklet
20:14 - Image maps / Background gradients
1px wide and 2000px tall image to make repeating gradients
Squidfingers

Subtle Patterns

Hero Patterns

CSS3 Patterns

25:53 - Web rings
27:41 - Glossy buttons
28:09 - Flaming text
FlamingText.com

30:01 - Marquee tags
Staggered
Speed attribute
31:26 - Spacer gifs
34:30 - AngelFire / GeoCities
36:11 - Xanga / LiveJournal
37:29 - Above the fold content
Abovethefold.fyi

39:36 - Homestar Runner
Links Drupal Omega theme

Syntax 032: Designing, Templating, Inlining and Sending Email

Mailchimp

Litmus

Email on Acid

Herman Miller Aeron

××× SIIIIICK ××× PIIIICKS ××× Scott: New Rustacean Podcast

Wes: Autonomous Ergo Chair

Shameless Plugs Scott: Advanced Animating React with Framer Motion - Sign up for the ye…
Hasty Treat - Records and Tuples in JavaScript

28 september 2020 · 17 min
Afspelen

In this Hasty Treat, Scott and Wes talk about records and tuples in javascript — what they are, why you might want to use them, and more!
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes ??? -
02:42 - Immutability
05:08 - Records
Immutable object
Syntax #{x: 1, y: 2}
05:56 - Tuples
Immutable array
Syntax #[1,2,3,4]
07:18 - For both
Referred to as a compound primitive Lees meer

Can contain only primitives, not objects

They are compared deeply by their contents rather than their identity
assert(#{ a: 1 } === #{ a: 1 }); assert(#[1, 2] === #[1, 2]); assert(#{ a: 1, b: 2 } === #{ b: 2, a: 1 });
Potential for optimizations
Optimizations for making deep equality checks fast
Optimizations for manipulating data structures

Works well with type systems

Better integration with the debugger

Accessed through normal record.scott object like syntax

13:39 - Stage 2
Links https://github.com/tc39/proposal-record-tuple

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
Git Fundamentals

23 september 2020 · 59 min
Afspelen

In this episode of Syntax, Scott and Wes talk about Git fundamentals — what it is, why you need it, 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”.
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 03:12 - What is Git?
04:16 - Why do you need it?
06:31 - UI vs command line
09:03 - Commands 101
https://git-scm.com/ Lees meer

init .gitignore file is key right off the bat

add add -p - quick review of all the changes you’ve made

commit Multiple adds and commits
Commit messages should be descriptive

push What are origins?

pull
clone
checkout
merge
fetch
stash
fork
Merge vs pull request
Git vs GitHub / Alternatives Bitbucket
GitLab

44:25 - Common issues
Merge conflicts
Files being tracked unintentionally
“How do I delete file from GitHub?” git rm -r
alias gri="git ls-files --ignored --exclude-standard | xargs -0 git rm -r"

Databases in Git?
49:10 - Git clients
https://git-scm.com/downloads/guis

CLI
“Hub”
Github CLI
GitHub desktop app
VS Code integration
Source tree
Kraken
Tower
Links VS Code

GitLens

GitHub

Bitbucket

GitLab

Drupal

GitKraken

Tower

××× SIIIIICK ××× PIIIICKS ××× Scott: What Had Happened Was Podcast

Wes: Yeti Products

Shameless Plugs Scott: React For Everybody - Sign up for the year and save 25%!
Wes: Master Gatsby - 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 - Our First Bucks Made From Web Dev, Teaching, YouTube and Tutorials

21 september 2020 · 23 min
Afspelen

In this Hasty Treat, Scott and Wes talk about their first steps in the word of entrepreneurship and web dev specifically.
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 Wes:
First money: check for $300
First website: Pool company
First ad sense income: Craigonomics
First YouTube: import large SQL database with bigdump
First online Product: Sublime Text - Ryan Christiani
First in-person teaching: HackerYou
First project at agency: Jet Cooper
Scott:
First dev gig: parents tea store
First design gig: Perpetual
First YouTube video: Adobe Premier 101 Lees meer

First BIG YouTube video: Sass Tutorials
First ad sense income: scotttolinski.com blog post about music promotion sites
First online product: Sass Mastery
First project at agency: Nu Step
Links https://twitter.com/wesbos/status/1276500155789910016

Audiojungle

Themeforest

Juno College

@steveschoger

Smashing Mag

Css Tricks

Packt Publishing

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
Writing Good CSS

16 september 2020 · 57 min
Afspelen

In this episode of Syntax, Scott and Wes talk about writing good CSS.
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.
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 02:11 - Frameworks
Utility: Tailwind, Taycons, Bulma Lees meer

Frameworks: Foundation, Bootstrap

Classless base starters: https://github.com/dbohdan/classless-css HTML5 UP / A template

13:37 - Preprocessors
Sass

Stylus

Less

Regular CSS Variables
Color functions - not yet

19:42 - Tools
PostCSS is like Babel for CSS. Some good plugins: https://github.com/postcss/postcss#plugins

CSS min/max for clamp
Autoprefixer

Autoreset - reset a component
Gap instead of grid-gap
Simple-vars

Postcss-modules

SugarSS

Preset env
34:19 - Stylint
Stylint

More than just a basic linter
Capable of complex rules in your CI process - i.e. if you are using a color, make sure it’s a CSS variable
36:37 - Removing unwanted CSS
PurgeCSS - Tailwind uses this
PurifyCSS

41:17 - Writing maintainable CSS / scoping solutions
Component-based CSS Modules

Naming Convention Based BEM

SMACSS

CSS Variables Powerful when utilized with things like calc() to avoid out of sync values

Know which browsers you need to support
Links Syntax 197: Hasty Treat - Tips For Writing Good CSS

Compass

Susy

Grunt

Gulp

Linaria

Astroturf

Houdini

Svelte

Syntax Highlight Dhanish Gajjar - https://www.instagram.com/dhanishgajjar/

××× SIIIIICK ××× PIIIICKS ××× Scott: Rustlings

Wes: Class Action Park Documentary

Shameless Plugs Scott: Advanced Animating React with Framer Motion - Sign up for the year and save 25%!
Wes: Master Gatsby - Use the coupon code ‘Syntax’ fo…
Hasty Treat - Time Block Planning

14 september 2020 · 17 min
Afspelen

In this Hasty Treat, Scott and Wes talk about time block planning — what it is and how it can help you increase your productivity!
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 01:50 - What is time block planning
03:12 - How TBP has helped Scott stay focused
04:46 - How it helps family life
05:57 - How to plan your week
11:00 - How to deal with setbacks
Links Cal Newport Lees meer

Todoist

Deep Work

Deep Questions

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
Tales from Webdev Past - Cleafix × Floats × Cufon × Guestbooks × PNG Fix × More!

9 september 2020 · 50 min
Afspelen

In this episode of Syntax, Scott and Wes talk about tales from web dev past — clearfix, floats, flash, cufon, guestbooks, hit counters, and more!
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Show Notes 04:28 - Float-based layouts
Clearfix
☠️ Killed by Flexbox, and then Grid Lees meer

09:29 - Loading Screens:
Two websites - one flash and one HTML
Splash screen
11:22 - Hit counters
12:28 - Guestbooks
13:28 - Flash
3rd party player
Media dragged its feet FOREVER
☠️ Killed by Steve Jobs
18:46 - Fonts
The Golden Layout
Cufon / sIFR / Images of text
Typekit

☠️ Killed by font-face
24:15 - Folder-based version control
☠️ Killed by Git
26:22 - FTP
☠️ Killed by Git, then many other things
28:40 - CSS Zen Garden
CSS Zen Garden

☠️ Killed by CSS being better
32:02 - TextMate
Coda

Notepad++

Adobe GoLive

FrontPage

Macromedia / Dreamweaver

☠️ Killed by Sublime Text, then VSCode

33:58 - Sliding doors
A technique for rounded corners on buttons ☠️ Killed by CSS
35:29 - PNG Fix
☠️ Killed by the death of IE6
37:53 - 9-Panel layouts
☠️ Killed by CSS
39:20 - CSS 3 Please
CSS 3 Please

Paul Irish

☠️ Killed by modern CSS
Links Silverlight

Chris Coyier

××× SIIIIICK ××× PIIIICKS ××× Scott: Fancierstudio 600 LED Light Panel Kit

Wes: Allen Key Drill Bit Set

Shameless Plugs Scott: React 3D and Advanced Animating React with Framer Motion - Sign up for the…
Hasty Treat - Backyard Offices

7 september 2020 · 20 min
Afspelen

In this Hasty Treat, Scott and Wes talk about home offices, backyard offices, costs, and pros and cons!
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 03:40 - Structure options:
Existing sheds
Build your own likely not allowed Lees meer

Drop-in offices
Rubbermaid shed
07:18 - Electrical
07:58 - Insulation
09:01 - Heating
11:30 - Cooling
16:01 - Interior
16:42 - WiFi
17:12 - Costs ~ $4k
Electrical - $2k
Flooring - $600
Paneling- $900
AC - $1000
Fan - $100
Links https://twitter.com/bradwestfall/status/1284299864210210817

https://bradfrost.com/blog/post/brad-frost-web-headquarters/

Technology Connections - Space Heater Nonsense

Technology Connections - Personal “air conditioners” aren’t what they seem

Technology Connections - Cassette adapters are remarkably simple

Caldigit

Ubiquity Outdoor Access Point

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 - RIP Firefox? × Safari × Changing Careers × Regression Testing × Google Analytics Alternatives × Malicious Github Users? × Mac vs Windows × More!

2 september 2020 · 59 min
Afspelen

It’s another potluck! In this episode, Scott and Wes answer your questions about the recent Mozilla layoffs, Safari, finding time to learn coding, Google Analytics alternatives, malicious Github users, 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 01:15 - What are your guy’s thoughts on Mozzila’s layoffs and how it will affect developers?
08:42 - Right now I am a math teacher. I am married with 2 kids (3 and 1) so finding time to code is difficult. My current situation includes waking up at 4:30 am everyday just to get in some time before the kids wake up. Do either of you have any tips about finding a balance between raising kids, getting stuff done around the house, having a full time job and trying to teach yourself web development to transition into a different career?
13:23 - If you had to use a drag-n-drop framework using React, which one would you choose?
15:49 - E2E vs Visual Regression Testing? At which web-app development cycle to implement each? Best tools open source vs purchase?
20:36 - I teach a Highschool course in web development. For a group of students who have a solid knowledge of HTML/CSS and a decent understanding of JavaScript, would Svelte be a good framework for entering into component-based development for the first time?
22:33 - What’s a good Google Analytics alternative in 2020? I have a site on Netlify that the $9/mo seems a bit steep for, for what the site is, and flipping the domain thro… Lees meer
Hasty Treat - End of Season Wrap Up

31 augustus 2020 · 16 min
Afspelen

In this Hasty Treat, Scott and Wes wrap up season one of the podcast and talk about what’s coming.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes 01:32 - Plans for the Fall
06:59 - Fav Hasty
Scott Ep 161: Hasty Treat - VSCode Extensions & Themes Lees meer

Ep 165: Hasty Treat - VSCode Treats Part 2

Ep 167: Hasty Treat - VSCode Love Part 3

Ep 277: Hasty Treat - 5 Things That Make Your Site Slow

Wes Ep 211: Hasty Treat - Modules in Node

08:55 - Fav Tasty
Scott Ep 236: Mental Health and Dev ft Dr. Courtney Tolinski - Depression, Anxiety, Imposter Syndrome, Focus, Motivation, Burnout

Ep 250: Scott Teaches Wes Svelte and Sapper

Wes Ep 224: Serverless / Cloud Functions - Part 1

Ep 256: WebRTC and Peer-to-Peer Video Calling with Ian Ramzy

10:22 - Top Episodes of 2020
10: Ep 214: 2020 Fitness

09: Ep 228: More on Severless - Databases × Files × Secrets × Auth × More!

08: Ep 220: The Synology Show - Backups and Home Server

07: Ep 222: Are Web Dev GUIs Going to Replace Us?

06: Ep 210: Potluck - Fonts × Frameworks × Teas × Coding Subscriptions × Client Work × More!

05: Ep 212: Pika Pkg

04: Ep 224: Serverless / Cloud Functions Part 1

03: Ep 218: Potluck - Dev Culture Fit × Slack Communities × Vanilla JS × Backpacks × Raspberry Pi × More!

02: Ep 226: Potluck - Next vs Gatsby × Headless CMS × Vue.js × Is Ruby on Rails still good? × More!

01: Ep 216: Tech to Watch in 2020

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 - MDX × Portfolio Projects × Code Commenting × CSS Properties × Reusable Components × More!

26 augustus 2020 · 58 min
Afspelen

It’s another potluck! In this episode, Scott and Wes answer your questions about MDX, portfolio projects for junior devs, code commenting, CSS property order, 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 02:18 - I’m curious to know what you guys think of MDX. I’d love to learn more about pros and cons, if you guys had a chance to use it.
08:49 - Where would you put business logic in Vue.js middle- or large-scale applications? I try to put business logic in store but it makes hard to maintain such store, even with splitting to actions/getters/mutations files. I ended up using vanilla JavaScript files, where each file is a class singleton. I was wondering: is it a good solution or do you have better alternatives in mind?
12:07 - I commonly find myself engineering complex programs and left flabbergasted on how to express these ideas to other people when the need arises that I need to explain them and remember why I did them a certain way. How can I get better at conceptualizing intricate design patterns or functions as well as have better memory recall for these abstractions?
18:02 - Can I get recommendations for a junior dev portfolio? What five projects you would recommend to build that will significantly help in getting a job as a front-end web dev and why?
21:13 - I am now working on building a minesweeper game with React. You know how on a computer you right click to flag and disable a cell? I am thinking of doing a press and hold on a mobile device instead. I am not sure how to do either (the right cli… Lees meer
Hasty Treat - Stump’d

24 augustus 2020 · 20 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.
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 03:28 - What is the difference between HTML and React event handling?
05:55 - What are JavaScript data types?
07:00 - In which states can a Promise be?
07:48 - Discuss the differences between an HTML specification and a browser’s implementation thereof.
09:14 - What is a stateless component?
10:10 - What is a pure function?
10:51 - What is the output of the following code?
const a = [1, 2, 3] const b = [1, 2, 3] const c = "1,2,3" console.log(a == c) console.log(a == b) 13:35 - What is memoization?
15:15 - How do you pass an argument to an event handler in React?
15:59 - What is HTML5 Web Storage? Explain localStorage and sessionStorage.
Links 30 Seconds of Interviews 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 - Subscriptions × ES Modules in Node × Chicken Thigh × Being a Good Dad × Refactoring × More!

19 augustus 2020 · 1 uur 3 min
Afspelen

It’s another potluck! In this episode, Scott and Wes answer your questions about React subscriptions, ES Modules in Node, how to cook a chicken thigh, being a good dad 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”.
Stackbit - Sponsor Stackbit offers developers tools that enable things like inline content editing, live previewing of content changes, and collaboration features on your Jamstack site, without code changes. That’s why Stackbit is the best way to Jamstack. stackbit.com.
Show Notes 02:11 - What are “subscriptions” in React, or in programming in general? The React docs mention that setting up a subscription is an example of a side effect, but what exactly is a subscription, and how do you set one up?
05:43 - Using the latest node esm imports, is it possible to use aliases? Using the old require() syntax I used the npm package module-alias (https://www.npmjs.com/package/module-alias), but I cannot seem to find a solution for node v14 imports. In a deeply nested file, I find the import ‘…/…/…/some/folder’ syntax to be awful compared to require(’@/some/folder’).
09:20 - I’ve been a full-time developer for over 10 years and my company has a fairly flat hierarchy. I want to take on more responsibility (and salary) but my company doesn’t have anything like a “lead developer” position. Any ideas for how to move up without switching companies? I know my boss would be receptive if I came to him with a pitch, but we work full stack so it feels like I’m already doing it all.
12:59 - In Wes’ website episode, he mentioned using Gatsby Parallels for images. Why not git LFS?
… Lees meer
Hasty Treat - Gatsby Tips

17 augustus 2020 · 18 min
Afspelen

In this Hasty Treat, Scott and Wes talk about tips and tricks for using Gatsby in your projects
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes 02:02 - React Helmet
Make a re-usable SEO component that sets defaults. Spread children to override.
04:27 - When in doubt, stop the build and restart
Gatsby clean
Nuke node_modules + package-lock
05:34 - Use ESM to use ES Modules everywhere - share functions between gatsby-node and gatsby-browser
06:44 - Run the build command locally to troubleshoot prod
Dev mode isn’t SSG’d - people overlook this
08:06 - Wrap your layout automatically in gatsby-ssr and gatbsy-browser
wrapPageElement and wrapRootElement
09:50 - Consider just adding the layout component manually to each page
This will allow you to skip the layout if you need to have a page that isn’t typical
11:21 - Layout is not suitable for unmount animations
Orchestrating individual component animations in Gatsby isn’t easy, use wrapPageElement to write your animations or delays for internally unmounted components.
12:59 - use onCreatePage to pass context to the layout
exports.onCreatePage = ({ page, actions }) => { const { createPage } = actions; if (page.path.match(/thumbnail/)) { page.context.layout = 'thumbnail'; createPage(page); } }; 14:03 - You don’t have to query for everything
Hard-coding data in html/jsx is super valid
15:32 - Gatsby Parallel Runner
For lots of images
Links Gridsom Lees meer

Google Cloud

Cloudinary

Sanity Image

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 does stuff get added to CSS? Adam Argyle answers!

12 augustus 2020 · 1 uur 4 min
Afspelen

In this episode of Syntax, Scott and Wes talk with Adam Argyle about how stuff gets added to CSS.
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.
Guests Adam Argyle Lees meer

Show Notes 01:48 - Who are you and what do you do?
04:13 - How does stuff get added to CSS?
06:44 - Github issue proposal or public document
Shares use case
Problem made succinct
StrawMan solution
JS demo
10:12 - Time
Multiple proposals
Comments
Back and forth
Bikeshedding
20:00 - Editor’s draft spec (Stage 1)
CSS typed
Examples
Provided code logic
Implementor interest Can go stale
Explainer

Implementor Prototype behind flags in browser
Intent to Prototype (I2P)

24:42 - Working Draft (Stage 2)
WPTs
Prototype behind flags in browser
Needs two or more to graduate
Intent to Ship (I2S)
24:54 - Conference Calls
Around 10 items to discuss Issues or proposals

Flexible list Things can be injected as emergency
Things can get punted to the next call

25:26 - Face 2 Face (F2F)
Four times a year
Presentations
Breakout sessions
Houdini focus groups, etc
Try to resolve as many Github issues as possible
27:34 - Candidate Recommendation (Stage 3)
Could still be behind a flag Edge cases are being worked through
WPTs and standards are being nudged into a final state

44:20 - Roles
Spec author
Community Member Print
Color
Internationalization
Box Model
AOM
JS APIs
Renderers
etc

Implementor
It’s like pub/sub, where spec authors pub and implementors sub, and the community tries to help shape the message that’s published while supporting the subscribers who need to implement and make it real
46:32 - Questions
What language is CSS written in?
What's the deal with Houdini?
Links https://githu…
Hasty Treat - How To Refine Your Process

10 augustus 2020 · 18 min
Afspelen

In this Hasty Treat, Scott and Wes talk about refining your processes, how to evaluate them, make them better, 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 04:18 - Find slow process
Getting through email
Cleaning my desk
06:29 - Set clear goals (smart goals)
Is my inbox less crazy?
Don’t spend too much time
Do a 30-day challenge
09:46 - Ask around
What are people you know using and why
Time-blocking
Batching
Eat that frog
Links Streaks Lees meer

Matt Cutts — Try something new for 30 days

1Writer

Notable

Dropbox

Notion

Obsidian

Todoist

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
React State Round Up

5 augustus 2020 · 55 min
Afspelen

In this episode of Syntax, Scott and Wes talk about React State libraries, should you use them, pros, cons, and more!
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Show Notes 01:24 - Context
Have we used? Scott: Yes
Wes: Yes Lees meer

Pros Built into React
As simple or complex as you want

Cons Takes effort to optimize
Takes effort to plan and organize aka can get out of hand quickly

08:49 - Redux
Have we used? Scott: Yes
Wes: Yes

Pros Huge user base
Legacy of growth and improvements
Modern API
Even though it’s hard to learn, it has a clear “how to build with it” path
Dev tools

Cons Complex
Thing that calls a thing that calls a thing that calls a thing
Confusion around what additional packages are needed, e.g. ducks, saga, whatever

17:08 - XState
Have we used? Scott: Yes
Wes: No

Pros Enforces solid design patterns
Very safe
Awesome tooling like UI to see state machines
https://xstate.js.org/viz/

Cons Knowledge overhead - having to understand state machines
Complex syntax

23:26 - Zustand
Have we used? Scott: Yes
Wes: No

Pros Fast, scalable, easy to use
Simpler
No context providers

Cons Smaller community 2.6k stars on Github
Can inform components transiently (without causing render)

27:04 - Apollo Client
Have we used? Scott: Yes
Wes: Yes

Pros Fits in well with your GraphQL API
Dev tools

Cons Complex, large syntax for simple oper…
Hasty Treat - Upgrading Next.js Syntax Site

3 augustus 2020 · 18 min
Afspelen

In this Hasty Treat, Scott and Wes talk about their experience upgrading Syntax.fm and some of the site’s big changes.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes 02:26 - The old Syntax site
Next.js
Custom server for API - shows, Latest shows, sick picks
On-demand page builds
Custom routing Lees meer

06:41 - The new Syntax site
Next.js has solved those things now, no need for a custom server. API Routes
On-demand page builds: SSG with Next.js. It’s a server, but caches the page builds. Releasing the shows happens with revalidation. It’s statically generated like Gatsby, but you can also choose
Custom routing is now done with [pages]

Very fast to load
Very fast to build
Very fast to deploy
It’s now a “dynamic static site”
Zeit Now 1 to “Vercel”
Huge thanks to Tim Neutkens and Luis Alvarez from Vercel for making it happen.
13:23 - Why not:
Gatsby Entire site would need to be regenerated exactly at 9am eastern
API of the site would need to be done with something else like Netlify Functions - not nearly as nice as Next API routes

Sapper
Links Next.js

Gatsby

Sapper

Vercel

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
Meteor's 2nd Life

29 juli 2020 · 1 uur 5 min
Afspelen

In this episode of Syntax, Scott and Wes talk with Filipe Névola about Meteor and the exciting things happening in the Meteor world!
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.
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Guests Filipe Névola Lees meer

@filipenevola

Show Notes 01:20 - What is your background?
03:41 - What exactly is Meteor?
12:00 - What are the biggest misconceptions of modern meteor?
18:20 - What do you say to people who think Meteor is dead?
21:33 - How does data get from your Meteor into your React app?
Example of getting data on client side
import { useTracker } from 'meteor/react-meteor-data' // Hook, basic use, everything in one component const MyProtectedPage = (pageId) => { const { user, isLoggedIn, page } = useTracker(() => { // The publication must also be secure const subscription = Meteor.subscribe('page', pageId) const page = Pages.findOne({ _id: pageId }) const user = Meteor.user() const userId = Meteor.userId() const isLoggingIn = Meteor.loggingIn() return { page, isLoading: !subscription.ready(), user, userId, isLoggingIn, isLoggedIn: !!userId } }, [pageId]) if (!isLoggedIn) { return Create an Account Log in } return {page.title} {page.content}
Log out ({user.username}) } 27:50 - What do you think is the ideal usecase for Meteor?
31:09 - Why did Meteor 1.0 fail to maintain hype?
36:41 - What does Meteor’s future look like?
45:27 - Are there any plans to integra…
Hasty Treat - Target=_blank security issue? What's the deal with noopener and noreferrer?

27 juli 2020 · 14 min
Afspelen

In this Hasty Treat, Scott and Wes talk about noopener and noreferrer and why you should use them with links that have blank targets.
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Show Notes 03:35 - What’s the big deal?
If you have a link that is target="_blank" you should add rel=“noopener” and rel=“noreferrer”
Retail Me Not uses it
Valid use cases: Same domain change the page from a popup
Cross domain changing page data Lees meer

Example: https://mathiasbynens.github.io/rel-noopener/

05:39 - Why doesn’t the browser just fix it?
Safari did - You can use rel=“opener” to allow it
Firefox did
Chrome hasn’t yet
https://twitter.com/HugoGiraudel/status/801475801397030912

10:48 - Does this hurt SEO?
It breaks analytics of the recipient site, turning a referral visit from your site into direct traffic, unless the link has UTM or similar tracking parameters. If you have a site where passing traffic offsite is part of the business model, links need an affiliate id instead.
Links @argyleink

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 - Beating Procrastination × Rollup vs Webpack × Leadership × Code Planning × Styled Components × More!

22 juli 2020 · 51 min
Afspelen

It’s another potluck! In this episode, Scott and Wes answer your questions about transitioning to backend dev, tips for beating procrastination, Rollup vs Webpack, code planning, growing as a leader 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.
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Show Notes 02:33 - I am a junior dev, coming up on two years at my current agency. I have been primarily on the frontend using Angular and templating with Handlebars and other HTML and CSS. I have been asked if I would be interested in moving more into backend, with a focus on Node.js. Outside of creating APIs, what else should I do to learn “backend”?
06:08 - I work as a web master and would like to be a frontend developer someday. Currently I am working on a MERN stack app on my own to enhance my skills, but have problems focusing and tend to procrastinate a lot. How do you tackle distractions and get things done? I would appreciate some tips.
11:00 - Rollup or Webpack? Webpack 5 still doesn’t seem to support ES6 module output, as described by Philip Walton, so instead of upgrading to Webpack 5, this might be a good time to think about switching to Rollup (or Parcel).
13:46 - I have been learning web development (HTML, CSS and JS) and am at a place where I can build simple websites for small businesses, but I feel like a beginner and am wondering if you have any recommendations on courses to… Lees meer
Hasty Treat - Turbolinks + Server Generated HTML + JS Sprinkles

20 juli 2020 · 16 min
Afspelen

In this Hasty Treat, Scott and Wes talk about turbolinks — what it is, how to use is, popular apps using is, and more!
Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.
Show Notes 02:50 - What is turbolinks?
Generate HTML on the server
Send it over the ajax request
Load it in the page
03:55 - Who is using Turbolinks?
GitHub Lees meer

Basecamp

Hey.com

05:24 - Turbo Links javascript browser bundle
Intercepts any link click
Fetches the page HTML
09:19 - JS Sprinkles
Vanilla JS
jQuery

Stimulus

Alpine JS

Links Turbolinks

Syntax 254: Headless CMS Break Down & Roundup

pjax

Svelte

Next.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
Video for the Web 2020 and Beyond

15 juli 2020 · 53 min
Afspelen

In this episode of Syntax, Scott and Wes talk about the future of video for the web!
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Show Notes 08:19 - Scott’s Background in video
Started editing in middle school
Worked professionally as an editor and production assistant for magazine
Created specialty flash video players
Have been hosting video content since the start of my web career
09:12 - Terminology
Transcoding - digital to digital conversion of one format to another
Ingest - bringing a video to a new facility (ie uploaded video file or data stream to server)
10:51 - Streaming vs Downloading
Streaming is basically chunks of content at a time, while download is waiting for the entire file to be downloaded before playing.
11:16 - Formats
MP4
WebM
DASH
HLS (HTTP Live Streaming)
m3u8
21:35 - Players
shaka-player - https://github.com/google/shaka-player/ Lees meer

hls.js - https://hls-js.netlify.app/demo/

dash.js - https://github.com/Dash-Industry-Forum/dash.js

video.js - https://videojs.com/

jw player - https://www.jwplayer.com/

Bit Movin player - https://bitmovin.com/docs/player

Ooyala Brightcove - https://www.brightcove.com/en/

27:48 - Services Roundup 🐴
YouTube - free
Vimeo - $
MUX - $$
Wistia -
Cloudflare - $$
JW Player - $
Cloudinary - $$$
Brightcove - $$$
Azure - $$
Bit Movin - $$
AWS - $$
46:59 - What Scott did and how/why
upchunk
Mux
Video.js
Custom uploader
Using polling
Links Basecamp

Hey

Inbox

YouTube

Wistia

Drip

ConvertKit

Vimeo

https://fronteers.nl/congres/2015/sessions/jsmpeg-by-dominic-szablewski

https://www.vidbeo.com/blog/hls-vs-dash

HLS Can I Use

youtube-dl

Syntax Ep 254: Headless CMS Break Do…
Hasty Treat - The Domain Name Game

13 juli 2020 · 20 min
Afspelen

In this Hasty Treat it’s another edition of the Top Level Domain Game!
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes 02:25 - How it works
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 $$ https://www.101domain.com/ Lees meer

Is scott._ and wes._ available? -10 points for each
04:00 - .sd
Scott: 5 + -5 + -126 + -10 + 10 = -126
05:46 - .ong
Wes: 5 + -5 + -30 + 20 = -10
07:53 - .koeln
Scott: 5 + -5 + -20 + 20 = -126
09:23 - .co.ke
Wes: 10 + -15 + 0 = -15
11:00 - .tr
Scott: 5 + -5 + 0 + 0 = -126
12:25 - .ist
Wes: -5 + 5 + -10 + 0 = -25
13:57 - .xn—45q11c
Scott: 5 + 5 + -295 + 10 = 20 = -401
16:40 - .reit
Wes: 10 + -1460 + 10 = -1465
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
Jerome Hardaway + Vets Who Code

8 juli 2020 · 1 uur 3 min
Afspelen

In this episode of Syntax, Scott and Wes talk with Jerome Hardaway about web dev, vets who code, diversity in tech, and more!
.TECH Domains - Sponsor If you need eyes on your project, you’ll need a domain, and .TECH is perfect for representing your brand. Find out if your .TECH domain is available at go.tech/syntax2020. Use the coupon code Syntax2020 and get 90% off 1- 5- and 10-year domain names.
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Guests Jerome Hardaway Lees meer

Show Notes 01:50 - Captain America of Tech
03:25 - Where do you work and what type of stuff do you work on?
08:03 - What was your introduction to programming?
15:46 - When did you start Vets Who Code?
24:13 - What is the stack behind Vets Who Code?
29:56 - How do you help prep vets to get jobs?
41:32 - How can you be an ally and amplify black voices in tech?
50:05 - Everybody against racism
Links Vets Who Code

Quicken Loans

Eventbrite

Animate.css

Laws of UX

react-spring

General Assembly Code Bootcamps

uses.tech

keycode.info

Tech Talent Pipeline

@vetswhocode

××× SIIIIICK ××× PIIIICKS ××× Jerome: 1: HBO’s Watchmen

2: https://vidr.io/

Scott: Explained on Netflix

Wes: Jeremy Fielding YouTube Channel

Shameless Plugs Jerome: Vets Who Code

Scott: Design Systems with CSS Variables - 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 - Forms, Captchas, Honeypots, Dealing With Malicious Users and the Sad State of Contact Forms

6 juli 2020 · 21 min
Afspelen

In this Hasty Treat, Scott and Wes talk about forms, captchas, dealing with malicious users, and more!
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes 02:00 - So you made a form:
Contact form
Sales form
Email signup for newsletter
Bug report
Sign up for an account
Password reset
03:00 - Now someone is going to:
Have a bot that submits it
Maliciously write a bot that submits thousands
04:14 - So what can you do?
4:54 - Honey pot
This is a field that is either hidden or you tell the user not to fill in
Can goof up autofill
Works in many cases
07:37 - IP Throttle
Only allow each IP to do an action a certain number or times inside a window
You may only try signing up once per 10 mins
09:48 Block known ASN
12:37 - Captcha
Soft captcha: “What is 1 plus 1?”
Annoying captcha: Type these letters
Google captcha: Train our self driving cars
Hidden captcha
Cloudflare hCaptcha
Links Cloudflare Lees meer

Digital Ocean

Google reCaptcha

Cloudflare hCaptcha

Cloudinary

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
Our React Wish List

1 juli 2020 · 52 min
Afspelen

In this episode of Syntax, Scott and Wes talk about what they wish existed in React!
DevLifts - Sponsor Refactor your body with DevLifts. They have a few different programs: 1) fit.start (normally $19/month) has a few options (lean, bodyweight, and strong). Workouts are delivered via email each month, with access to a Slack community for questions and accountability. 2) Premium (normally $199/month) is a custom-tailored option, where you get your workouts and nutrition advice after answering a questionnaire. They also check in with you each week via Slack to see how it's going and make changes if necessary. Get 50% off fit.Start plans with code SYNTAX and 50% off Premium with code TASTY.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the "How did you hear about us?" section.
Show Notes React 03:53 - Unmount delay for animation
06:20 - Suspense with SSR released (or not because I think they are shelving it)
Dan's tweet: https://twitter.com/dan_abramov/status/1259614150386425858 Lees meer

09:24 - File based components
Like Svelte and Vue
This would look like a file with a special scoped tag per page.
11:50 - Prevent Default shortcuts
13:00 - No more useIsoLayoutEffect
useLayoutEffect on SSR should just work without a custom hook
Simple data fetching strategy based on promises
15:52 - Recommended hooks
E.g. "here is the best way to do things"
Official list of best practice hooks
18:25 - A good form strategy
Bind inputs to state directly without any change handlers
Inputs and forms all around need more magic - it's painful
20:43 - Write once deploy everywhere
Not likely ever
E.g. automatic transformation into react-native (obviously not going to happen)
22:28 - Compile time directives
https://github.com/bukharim96/directive-x
25:11 - Slots instead of children
Allows for things like named slots more explicit than children
JSX 26:44 - Removal of htmlFor, className and all other abominations of html
29:09 - Import Raact from R…
Hasty Treat - Rural and Mobile Internet Revisited

29 juni 2020 · 34 min
Afspelen

In this Hasty Treat, Scott and Wes talk about rural and mobile internet — options, tools, and things to be aware of.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes 05:04 - Satellite
High latency
Satellite congestion
Oneweb Lees meer

Starlink

08:43 - WISP
Can be different techs - LTE, LOS, Long range WiFi
Local towers put up in town
900mhz, 5 + 2.5gz
Pretty cowboy
12:09 - Cellular LTE
Goes over the cell signal
Can be super fast or slow depending on your reception
Cell plans can be rate limited
12:52 - Routers
WE826-T2 Rooter / Golden Orb / Wifix
Based on Open WRT
https://www.ofmodemsandmen.com/

Nighhawk M1

ZTE MF288

17:03 - Modem
Two types of modems: Host modems
PCI-e / M2 Cards

Sierra Wireless

AT Commands
Band locking
Enable carrier aggregation
Get detailed values on modem power
See cell tower IDs
23:16 - Antennas
Omni

Yagi

Gotta get them high
Lots of connectors - Type N, SMA, RP SMA
25:47 - Boosters
Adds noise
26:04 - Plans
Some plans are phone only
Some plans are tower restricted
Most Hot spot plans are a rip off
Calyx Institute

Canada: Bell Internet Five

Telus Smart Hub

29:27 - Speeds
Depends on tower, congestion
Depends on pre paid, post paid or first responder
Depends on if you hit the cap or not
30:15 - Tools:
Cell Mapper

LTE Hacks Facebook group

LTE Fix website

Links Syntax 169: Hasty Treat - Remote Internet

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 - Libraries vs Frameworks × Firefox × Career Advice For Teenagers × Who Would Win a Thumb War × More!

24 juni 2020 · 52 min
Afspelen

It’s another potluck! In this episode, Scott and Wes answer your questions about libraries vs frameworks, Firefox, who would win a thumb war, and more!
Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Show Notes 01:37 - Q: Why does React bill itself as a library instead of a framework?
03:14 - Q: Are y’all still using Firefox now that it has been six months?
06:30 - Q: Is it possible to do a hasty treat regarding the Brave browser? Would love to hear your opinion on the tech, view on the approach and why we could need another browser in 2020. Peace!
09:34 - Q: Who would win in a thumb war, Wes or Scott?
10:56 - Q: What are your thoughts on XState and state machines for managing state in apps? I’ve been super interested in trying to use it, eager to hear what you both think. Also, wondering if you’d have any recommendations on how to use it with Apollo, whether to use XState’s internal context to store app state, or use the Apollo cache.
14:53 - Q: Should I start a new project with jQuery or React?
17:21 - Q: I’m a young teen (60 different pages? How do you organize the REST-ful API? How do you resolve dependencies between API endpoint 1 and API endpoint 2? How do you share information between multiple components in VUE-State-Management?
42:44 - Q: I’ve done Wes’ NextJS course and he uses Styled Components instead of Next’s own styled-jsx. What are your opinions on styled-jsx, and why you do (or do not) use it?
Links React Lees meer

Firefox

Brave

CodeSandbox

VS Code in the browser

CodePen

Source Making Design Patterns

Figma Auto Layout

××× SIIIIICK ××× PIIIICKS ××× Scott: 1…
Hasty Treat - Some Neat CSS Functions That You Should Know About

22 juni 2020 · 20 min
Afspelen

In this Hasty Treat, Scott and Wes talk about CSS functions, what they are, how to use them, and more!
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes 02:13 - attr()
04:14 - calc()
06:05 - :is()
07:20 - sin, cos, tan, acos, asin, sqrt, pow
08:52 - clamp()
12:13 - minmax()
14:24 - fit-content()
15:35 - filter
blur()
grayscale()
sepia()
opacity()
contrast()
url()
Links https://twitter.com/wesbos/status/1256229763225657348/photo/1 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
The Fundamentals Leftovers - Terminal, Shortcuts, View Source, Github + More!

17 juni 2020 · 45 min
Afspelen

In this episode of Syntax, Scott and Wes continue their discussion of fundamentals — Bash, text editors, Regex, Github, Dev tools, and more!
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Show Notes 03:17 - Typing
Take an online typing test or skills - https://www.keybr.com/ Lees meer

07:02 - Bash / Terminal
WSL

What directory am I in?
SSH
How to copy / paste / remove files and folders
z
Nice prompt (ZSH or fish)
Know how to get out of VIM/VI and how to use it for fast editing
Know how to make an alias
13:19 - Text editors
Command Palette
Keyboard shortcuts (just look them up!)
Click through to source
Multiple cursors
Find/replace master
Find and replace across files
18:37 - Regex
Regex101
https://regexone.com will teach you just enough
22:03 - OS Basics
Switching apps
Unzipping
File organization
Searching for/in files
28:50 - Googling
Learn how to google well
What words to use and what not to
Basic operators “-”, ",
Use Reddit: for opinions
Add dates - example: Library has been out for 6 months, and you can filter out
33:08 - Navigating GitHub
Explore for finding interesting projects and creators
Know how to clone a repo
Create repo and push to it
https://octolinker.now.sh/ to click through to files
Use Octotree to navigate
36:20 - Navigating source
View source
Where to start in a repo (ie the entrance to a project)
Most code repos are e…
Hasty Treat - Scott Goes Linux with Pop OS

15 juni 2020 · 22 min
Afspelen

In this Hasty Treat, Scott tells Wes about his new Linux laptop — what it is, why he did it, pros and cons, and more!
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes 01:38 - Why?
04:20 - What is System76?
System76 Lemur Pro Lees meer

08:53 - What is Pop OS?
Pop OS

09:41 - How has Linux compared to Mac?
Pop OS is a great distro with lots of features, but command line knowledge is still necessary
10:07 - I can still run:
Alfred

Figma

VSCode

DaVinci Resolve

Zoom

Brave

Chrome

Firefox

10:43 - I can’t run:
ScreenFlow

Logic

Sketch

13:46 - What do I miss?
Trackpad gestures
It’s not as polished of an experience
Links Dell

Toughbook

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
WebRTC and Peer-to-Peer Video Calling with Ian Ramzy

10 juni 2020 · 55 min
Afspelen

In this episode of Syntax, Scott and Wes talk with Ian Ramzy about ZipCall.io — how he built it, why, and some of the surprising choices he made along the way.
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Stackbit - Sponsor Stackbit offers developers tools that enable things like inline content editing, live previewing of content changes, and collaboration features on your Jamstack site, without code changes. That's why Stackbit is the best way to Jamstack. stackbit.com
Guests Ian Ramzy Lees meer

Show Notes 02:08 - Who are you and what’s your background?
05:34 - Why did you build this?
13:55 - What is it built in?
Express server
Web sockets
16:10 - Why is there no tooling?
GetUserMedia
WebRTC
Twilio STUN/TURN/ICE infrastructure https://www.twilio.com/docs/stun-turn/faq

VideoChat.peerConnection = new RTCPeerConnection({ iceServers: token.iceServers, }); 24:31 - How does your server deal with an influx of users?
27:11 - How do each of these features work?
Auto-scaling video quality
Text chat
Screen sharing
Picture in picture
Live captions
Loading animation
No download required, entirely browser based
Direct peer to peer connection ensures lowest latency
Single use disposable chat rooms
41:32 - Have you looked into any of the recording APIs?
Links ZipCall

Zoom

jQuery

WebTorrent

Heroku

Adopter.js

Figma

××× SIIIIICK ××× PIIIICKS ××× Ian: Notion

Scott: Summoning Salt

Wes: 4 Channel WiFi Momentary Inching Relay Self-Lock Switch Module

Shameless Plugs Ian ZipCall

Scott: All Courses - Sign up for the year and save 25%!
Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
Twee…
Hasty Treat - Slow Connections Part 2

8 juni 2020 · 19 min
Afspelen

In this Hasty Treat, Scott and Wes are back with part 2 on how to develop for slow internet connections.
Kyle Prinsloo Freelancing - Sponsor Kyle Prinsloo teaches you everything you need to know about freelancing, including how to quit your job, earn a side-income and start taking control of your life. Check it out at studywebdevelopment.com/freelaning. Use the coupon “SYNTAX” and get 25%.
Show Notes 03:27 - Images
Resize client-side when uploading
Lazy load or progressive JPG
Width + height so the content doesn’t shift with placeholders
Compress your images - lossless and lossy
Use SVG where possible
08:33 - Scripts + CSS assets
Hasty Treat - 5 Things That Make Your Site Slow Lees meer

Hasty Treat - 5 More Things That Make Your Site Slow

08:51 - Video
Variable-rate video is key
09:13 - Connections that go in-n-out a lot
Save form state on page refresh
Show UI when user goes offline window.addEventListener('offline', updateOnlineStatus);
window.addEventListener('online', updateOnlineStatus);

Retrying in _____
10:27 - Service workers!
Serves up local cache initially
12:05 - Fonts
Font-display CSS https://css-tricks.com/font-display-masses/

Sometimes possible: tree shake your fonts - load only the characters you need
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
14:04 - CSS tricks
Text over background image — make sure you also set a color so the text will show while the image is loading
14:37 - Testing slow connections
Dev tools
Mimic a speed, or 3G
Links ImageOptim

Slack

Discord

Cloudflare

Workbox by Google

Chrome Dev Tools

Firefox Dev Tools

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
Headless CMS Break Down & Roundup

3 juni 2020 · 1 uur 2 min
Afspelen

In this episode of Syntax, Scott and Wes talk about headless content management systems — why you might want to use one, things you should take into account, and more!
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Show Notes 02:38 - What and why
A headless CMS doesn’t mean you have to use a static site generator
A headless CMS has an API: REST
GraphQL
GROQ Lees meer

A headless CMS can pipe its content into: Static Site on build - like Gatsby

An app on run/refresh
An existing website - widget

What makes a CMS? Do you need a UI?
What is the threshold?
Is a hotdog a sandwich?
Things to think about when choosing an API Auth - Rules + roles + levels

How easy is it to create new data types? Is it code or UI?
Can my mom use it?

Can you create one-off content types? (e.g. settings pages)
Custom workflows dRafts, revisions, roll backs

How are images handled? Do you need another service for that?
Pre-determined UI Is custom UI possible?
Two-way relationships?
Tags?

Data validation? UI + API?

Hosting?
Pricing?
Content movability? Can you get your data out?
Schemas
Users
Revisions

CORS or realtime API?
APIs Can you insert data via the API? (or just pull)
Node API
Importing data

24:37 - Hosted
Sanity

Prismic

Contentful

Dato CMS

Storyblok

8Base

Agility CMS Seems to be making a big corporate play

36:59 - Self-Hosted
WordPress WordPress REST API
GraphQL API
WP GraphQL

Advanced Custom Fields for custom UI
Most things in WordPress are custom post types and taxonomies, so data from plugins can often be surfaced
The theme UI from plugins is often lost

Drupal contentacms.org

Craft CMS

Ghost

Strapi

Keystone

Joomla (JK!)
44:33 -…
Hasty Treat - Developing for Slow and Spotty Connections

1 juni 2020 · 16 min
Afspelen

In this Hasty Treat, Scott and Wes talk about how to develop for slow internet connections.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes 02:26 - Types of Slow connections
Slow upload
Slow download This could be that your kids are watching a show and your partner is on a zoom call Lees meer

High latency
Intermittent
07:47 - Loading UI
Show loading UI for everything, but after X seconds
Page transitions on SPAs
Form switches - enter country, get list of provinces/shipping/whatever
11:58 - Account for XHR failures
Sometimes I’m in a loading state forever
State machines will account for this
13:26 - “Still working” timeouts
Some sort of timeout so the user can get feedback
Links Sentry

Sapper

Backblaze

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 - Courses for Kids × Sub-Components × Recursion × DB Hosting × Frameworks × Data Structures & Algorithms × More!

27 mei 2020 · 1 uur 5 min
Afspelen

It’s another potluck! In this episode, Scott and Wes answer your questions about kids learning to code, React sub-components, why it’s so hard to scale, new frameworks, data structures, and more!
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.
Show Notes 03:11 - Q: Do you think Selenium could get replaced by Cypress in the future?
16:16 - Q: When blogging about code, you need a good way to display snippets of code in your blog post. What are good ways to do that? Should you embed something like a GitHub Gist, or setup something specific for your blog?
11:13 - Q: Do my students NEED to understand recursion to be effective JS devs?
15:41 - Q: What do you think about developing using just an iPad + keyboard + external monitor? To try this, I just moved all my environment to a VM on the cloud and configured code-server (a VSCode accessed by the web https://github.com/cdr/code-server). Works pretty well! The only problem now is that the iPad has a bad resolution on the external monitor when I’m using the browser.
22:43 - Q: I often find myself refactoring sub-components out of a component once it gets too big. This however is very tedious, especially if the sub-component is tightly coupled with the component and thus needs to take a lot of props. Do you have any suggestions? Do you just let the component grow bigger in a case like that?
26:15 - Q: [Insert Hoser related greeting here], during quarantine I’ve tried to come up with an outline for creating a goofy Pokémon app with my … Lees meer
Hasty Treat - Should You Support IE11?

25 mei 2020 · 15 min
Afspelen

In this Hasty Treat, Scott and Wes talk about IE11 — should you support it, what to be aware of if you do, and what data is important in making that decision.
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Show Notes 03:21 - When was IE11 made?
03:48 - When is it deprecated?
04:44 - How to make the decision?
Look at your analytics
Look at your users
Is a 2% drop in sales worth it?
09:00 - What doesn’t IE11 have? What can you start using now that IE11 is gone?
Modern Flexbox
CSS Grid
CSS Variables
10:26 - Can you partially support it?
Major features
Progressive enhancement
Gracefully degrade
Polyfill
11:16 - What about testing?
Links wesbos.com Lees meer

VirtualBox

modern.ie

IE11

Surface Book

Tweet us your tasty treats! Scott’s Instagram

LevelUpTutorials Instagram

Wes’ Instagram

Wes’ Twitter

Wes’ Facebook

Scott’s Twitter

Make sure to include @SyntaxFM in your tweets
Scott Teaches Wes Svelte and Sapper

20 mei 2020 · 51 min
Afspelen

In this episode of Syntax, Scott teaches Wes about Svelte and Sapper — general premise, best practices, and more!
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
Stackbit - Sponsor Stackbit offers developers tools that enable things like inline content editing, live previewing of content changes, and collaboration features on your Jamstack site, without code changes. That's why Stackbit is the best way to Jamstack. stackbit.com
Show Notes 03:14 - General premise
Sapper compiles away, removing framework code from build
Component & Props based
Easy reactivity
Built-in tools like animation
Template-based
07:57 - Svelte 101
.svelte files
Files can include , , and straight-up CSS
Variables are used in templates via {var} - even works
Import component and use just like React and Vue
10:49 - Stylin’
All styles are scoped by default
global() to wrap around global declarations
Language type sass to use sass
12:22 - Reactivity
Baked in let count = 0
count = count + 1 will reactively update in template
variables are essentially state
$: double = count + 2 - to create a reactive variable that updates when another variable updates
$: console.log(count) = will run whenever count is update a-la useEffect
$: if (count >10) = same… reactive if
updates let name in script Lees meer

15:55 - Props
Same was React, but need to be exported before they can be used
Seems counterintuitive, but you get over it quickly
EZ defaults export let answer = 'a mystery';
import Nested from './Nested.svelte'; export let answer = 'a mystery'; The answer is {answer}
20:08 - Template logic
If statements {#if user._id} {/if}

Loops {#each cats as kittens}

Promise tags

{#await promise} ...waiting
{:then number} The number is {number}
{:catch error} {error.message}
{/await} 23:12 - Events

On directive
Functions …
Hasty Treat - Scott's New Personal Website

18 mei 2020 · 15 min
Afspelen

In this Hasty Treat, Scott and Wes talk about Scott’s new website!
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Show Notes 02:25 - Relaxed fit development
Not concerned with it being perfect
Will act as a loose digital garden, so it needs to be flexible
Keep my talks and podcast appearances somewhere
04:40 - The stack
Svelte / Sapper
CSS variables
Static generation with markdown
No API
Hosted on Netlify
08:15 - Why?
I dropped that db life in 2015 and never looked back
I’m a developer - markdown is good for me
I like a playground for ideas, so the new site throws out any idea of formality and dives into being a playground for myself.
Full page animations. Orchestration. Fully SSG.
Code is painless to add to — adding a blog post is as easy as creating a markdown file
Links ScottTolinski.com Lees meer

Svelte

Sapper

Maggie Appleton

Shawn Swyx

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

Alle afleveringen

Voice Coding is Really Good with Josh Comeau

Hasty Treat - Certifications? Government Specified JavaScript Skills?

Spooky Web Dev Stories — Part 2

Hasty Treat - Temporal Date Objects in JavaScript

Spooky Web Dev Stories — Part 1

Hasty Treat - Stretching For Developers with Scott

How to Make Freelancing Easier

Hasty Treat - Updating / Restarting Long-Running Web Apps

Potluck - Is Angular good? × Stencil.js × Self XSS × SVGs in React × Social Platforms for Devs × Project Handoff × Cleaning Knives × More!

Hasty Treat - Enums in JS (GraphQL and Typescript)

Tales from Web Dev Past - Part 2

Hasty Treat - Records and Tuples in JavaScript

Git Fundamentals

Hasty Treat - Our First Bucks Made From Web Dev, Teaching, YouTube and Tutorials

Writing Good CSS

Hasty Treat - Time Block Planning

Tales from Webdev Past - Cleafix × Floats × Cufon × Guestbooks × PNG Fix × More!

Hasty Treat - Backyard Offices

Potluck - RIP Firefox? × Safari × Changing Careers × Regression Testing × Google Analytics Alternatives × Malicious Github Users? × Mac vs Windows × More!

Hasty Treat - End of Season Wrap Up

Potluck - MDX × Portfolio Projects × Code Commenting × CSS Properties × Reusable Components × More!

Hasty Treat - Stump’d

Potluck - Subscriptions × ES Modules in Node × Chicken Thigh × Being a Good Dad × Refactoring × More!

Hasty Treat - Gatsby Tips

How does stuff get added to CSS? Adam Argyle answers!

Hasty Treat - How To Refine Your Process

React State Round Up

Hasty Treat - Upgrading Next.js Syntax Site

Meteor's 2nd Life

Hasty Treat - Target=_blank security issue? What's the deal with noopener and noreferrer?

Potluck - Beating Procrastination × Rollup vs Webpack × Leadership × Code Planning × Styled Components × More!

Hasty Treat - Turbolinks + Server Generated HTML + JS Sprinkles

Video for the Web 2020 and Beyond

Hasty Treat - The Domain Name Game

Jerome Hardaway + Vets Who Code

Hasty Treat - Forms, Captchas, Honeypots, Dealing With Malicious Users and the Sad State of Contact Forms

Our React Wish List

Hasty Treat - Rural and Mobile Internet Revisited

Potluck - Libraries vs Frameworks × Firefox × Career Advice For Teenagers × Who Would Win a Thumb War × More!

Hasty Treat - Some Neat CSS Functions That You Should Know About

The Fundamentals Leftovers - Terminal, Shortcuts, View Source, Github + More!

Hasty Treat - Scott Goes Linux with Pop OS

WebRTC and Peer-to-Peer Video Calling with Ian Ramzy

Hasty Treat - Slow Connections Part 2

Headless CMS Break Down & Roundup

Hasty Treat - Developing for Slow and Spotty Connections

Potluck - Courses for Kids × Sub-Components × Recursion × DB Hosting × Frameworks × Data Structures & Algorithms × More!

Hasty Treat - Should You Support IE11?

Scott Teaches Wes Svelte and Sapper

Hasty Treat - Scott's New Personal Website