Syntax - Tasty Web Development Treats

Alle afleveringen

1.049 afleveringen, van nieuw naar oud

1. What's New in Javascript

   13 mei 2020 · 48 min

   Afspelen
   In this episode of Syntax, Scott and Wes talk about what is new in Javascript — a whole bunch of new stuff that you can use now and in the next sixth months or so.
   LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
   Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
   Show Notes ES2019 04:03 - Array.flatMap() 05:30 - Array.flat() 07:37 - Array.fromEntries() 09:50 - String.trimStart() and String.trimEnd() 11:23 - Function.toString() 11:57 - Object Key Order
   Integer keys in ascending order (and strings like “1” that parse as ints)
   String keys, in insertion order (ES2015 guarantees this and all browsers comply)
   Symbol names, in insertion order (ES2015 guarantees this and all browsers comply)
   ES2020 14:50 - Big int 18:09 - Nullish coalescing 20:57 - Optional Chaining 24:55 - promise.allSettled 25:33 - Dynamic import 27:14 - string.matchAll(regex) and string.replaceAll 29:30 - globalThis 30:44 - Module Namespace Exports 33:11 - Navigator.share() API 36:34 - Async Hooks 37:39 - Pipline Operator 39:59 - Top Level Await
   Links https://twitter.com/wesbos/status/1181584047144878080 Lees meer

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

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

   Regex101

   Regexr

   https://developer.mozilla.org/en-US/docs/Web/API/Navigator/canShare

   Sketch

   CloudApp

   Figma

   https://nodejs.org/api/async_hooks.html

   Gulp

   https://v8.dev/features/top-level-await

   https://github.com/tc39/proposal-pipeline-operator

   ××× SIIIIICK ××× PIIIICKS ××× Scott: Sapper

   Wes: Dewalt Oscillating Multitool

   Shameless Plugs Scott: Level Up Tutorials 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…

2. Hasty Treat - Wes' New Personal Website

   11 mei 2020 · 28 min

   Afspelen
   In this Hasty Treat, Scott and Wes talk about Wes’ new website - its first update since 2014!
   Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
   Show Notes 05:04 - The stack
   Gatsby
   Styled components
   React
   MDX
   07:04 - The content
   Blog posts
   Twitter Hot Tips
   09:54 - Styling
   Styled components
   Less
   16:54 - MDX
   17:45 - Serverless functions
   Links wesbos.com Lees meer

   bos.af

   WordPress

   ACF

   Netlify

   Gatsby

   React

   MDX

   My New Website! Here are the deets

   Next

   Operator Mono

   Mono Lisa

   Puppeteer

   gatsby-image

   Jason Lengstorf

   gatsby-plugin-prettier-build

   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

3. Bootcamps, Getting a Job, and Income Share Agreements with Heather Payne

   6 mei 2020 · 1 uur 2 min

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

   Show Notes 07:52 - Bootcamps
   What do you teach in the bootcamp?
   How long is it?
   SHow do you validate and pick topics?
   What makes a good bootcamp student?
   Do bootcamps work?
   How do you get the most out of a bootcamp?
   20:45 - Finding a job
   How do you prepare for an interview?
   What qualities, outside of technical skill, do you see in developers who get jobs easily out of the bootcamp?
   Do you see any common traits in the few that don’t get jobs?
   What about getting a job in the current climate?
   43:30 - Other
   How do income share agreements work?
   Pay what you can income share agreements
   How do you tell if a bootcamp is good?
   Links Heather Payne

   Juno College

   WordPress

   React

   Council on Integrity in Results Reporting

   Zoom

   ××× SIIIIICK ××× PIIIICKS ××× Heather: Whereby

   Scott: Original Grind Coffee Co. Cold Brew Coffee Maker (1 Gallon)

   Wes: iStat Menus

   Shameless Plugs Heather: Juno’s Continuing Education Online Courses

   Scott: Design Systems In Figma - Sign up for the year and save 25%!
   Wes: Wes’ New Website - Use the coupon code ‘Syntax’ for $10 off!
   Tweet us your tasty treats! Scott’s Instagram

   LevelUpTutorials Instagram

   We…

4. Hasty Treat - Things You Should Know About Javascript Events

   4 mei 2020 · 14 min

   Afspelen
   In this Hasty Treat, Scott and Wes talk about javascript events, and how to avoid some common pitfalls!
   Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.
   Show Notes 02:23 - Event bubbling
   Some events bubble, some don’t
   Clicks bubble
   Mouseevents bubble
   Focus doesn’t bubble
   04:10 - Event capturing
   Capture: down, bubble up
   Canceling: prevent default
   target` vs currentTarget
   currentTarget is what got clicked
   target is what you listened for the click on
   event.isTrusted
   addEventListener once: true
   Links Javascript30 Lees meer

   BeginnerJavascript

   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

5. Potluck Part 2 - Magic GQLess × Are classes dead? × Custom Hooks × Staying Up To Date × CSS × More!

   29 april 2020 · 1 uur 4 min

   Afspelen
   It’s another potluck! In this episode, Scott and Wes answer your questions about custom hooks, static site generators, code management, CSS, and more!
   Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
   Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
   Show Notes 04:02 - Q: Could you do a quick overview of how to effectively use a platform like Cloudinary? I have a Gatsby site with a lot of images and want to use something like Cloudinary to help with optimization, but the docs aren’t completely clear to me how to get the most out of their service.
   10:58 - Q: What kind of CSS pre/post-processor you usually use? What are the pros and cons of pre-processor (SASS, SCSS, LESS) and post-processor (PostCSS)?
   16:22 - Q: What is the most effective way to share a project with the internet and get feedback? I’m in a phase right now where I’m building loads of new web things with React and JavaScript, but the only place I can think to share them is my Twitter, where only like 3 people will see them.
   18:35 - Q: What are your thoughts on classes in JavaScript? Do we still need them in 2020, or has the functional programming paradigm made them largely unnecessary? Does the answer change based on the size of the project and/or team?
   23:56 - Q: Does ES2020 have var? Also, is ES2020 a real spec or just a term people are using?
   27:37 - Q: Have you tried gqless, a graphql client alternative to something like Apollo client? Very interesting idea for clean and maintainable code.
   29:15 - Q: What are the main diffe… Lees meer

6. Hasty Treat - Getting Buy-in for a Tool Like Prettier From Your Team

   27 april 2020 · 18 min

   Afspelen
   In this Hasty Treat, Scott and Wes talk about getting buy-in from your team when using new tools.
   LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
   Show Notes 02:53 - Q: "I wrote a long message to our architect asking if I could install prettier into our component generator for new projects moving forward, and the response I got was: “Don’t auto-format, not all devs want that and prettier doesn’t always format the way I like, I don’t want to enforce that on devs.”
   This sucks because I know the codebase would benefit so much. Right now every time I visit a project so much of the code is not spaced out that it makes it hard to read quickly for me, lots of the React code is bunched up with no spacing - it’s a mess to read for me especially because I am very organized. If this was your situation where you know a new tool/standard is something that can help a lot but it’s shot down, do you just give up? I don’t know how to respond to this because I am the only dev who has ever proposed this at my company and I just started here.
   05:03 - Lots to unpack here
   Some senior devs don’t like getting suggestions from other devs. There is a sense that these things change quickly and I bet there is some anxiety over that at play here.
   Senior devs know better than to slap new tools into the codebase because they have probably done it and regretted it. What if it broke your code.
   08:20 - So what can you do?
   Ask for their thoughts on a tool instead of suggesting it - it seems you have done this already
   Show the dev that even though it looks weird, it’s better for readability.
   Look at existing guidelines and try to match the settings as close as possible (not always an option with prettier).
   Put together a solid argument for it, written down.
   Use it in a smaller project. Everyone is against prettie… Lees meer

7. Potluck - Mobile First × Arrow Functions × Deno × JSON APIs × Refactoring Tips × More!

   22 april 2020 · 1 uur 3 min

   Afspelen
   It’s another potluck! In this episode, Scott and Wes answer your questions about mobile first development, ES6 arrow functions, Deno.js, tips for refactoring your code, best e-commerce platforms and more!
   LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
   Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
   Show Notes 02:50 - Q: Wondering about your take on mobile first design and implementation? Do you throw the desktop styles or the mobile styles in media queries? Any opinions about that? I’m switching a lot between projects that do it differently, and it really makes my head melt.
   08:24 - Q: What is the difference between the ES6 arrow functions and a normal function? When would you use a normal function instead of an arrow function or the other way around?
   13:54 - Q: What are your opinions or experiences on developing 360/VR experiences on the web? There are a few frameworks out there for building such experiences, like A-Frame and React 360. I was wondering if you had any experience using such frameworks or building these types of things, and do you think that this could become a big thing for web development in the future?
   19:02 - Q: How do you define senior developer? What is the difference between intermediate and senior developers?
   21:37 - Q: I was curious knowing your opinions regarding json:api and its consumption in React. Is it still a good pick compared to GraphQL or normal rest/json?
   27:30 - Q: What’s your take on Blitz.js and RedwoodJS? Would you use a framework like this to build a large & scalable web app?
   30:54 - Q: What do you think of Deno.js reaching version 1.0? Is it really going to be a Node successor, or is that just marketing hype?
   34:34 - Q: When you are looking … Lees meer

8. Hasty Treat - 5 More Things That Make Your Site Slow

   20 april 2020 · 21 min

   Afspelen
   In this Hasty Treat, Scott and Wes continue their discussion of website page speed — five more things that make your site slow!
   Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
   Show Notes 03:01 - Shipping too much JS
   Code splitting
   Webpack Bundle Analyzer Lees meer

   Look at dependencies of libraries
   Use fewer libraries
   06:38 - Not bundling code
   Build process
   08:24 - Not compressing code
   Google Closure Compiler

   Gzip via your server serving assets
   Minify CSS + JS
   11:45 - Loading JS asynchronously
   Where should I put tags in HTML markup?

   Solution: Lazy load JS as needed
   Solution: Show HTML first, load JS in the footer
   Solution: Use Async + Defer
   16:42 - Missing indexes on DB
   What is a DB index?
   Where should you add them?
   MongoDB Compass

   Links Syntax 239: Hasty Treat - 5 Things That Make Your Site Slow

   Google PageSpped

   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

9. Thinking Ahead for Emergency UI When Building a Website

   15 april 2020 · 46 min

   Afspelen
   In this episode of Syntax, Scott and Wes talk about emergency UI when building a website. During an emergency, you need to relay information to your website visitors as quickly and efficiently as possible. How do you do that? What do you need in place on your website?
   Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
   Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
   Show Notes 5:40 - Banners and popups
   Interfere
   Static
   Dismissible
   Cookie/localstorage
   When that popup is updated, it should show again. Maybe use a hash of the content? Or length? Something that resets itself every time the content is updated.
   Private client-side-only PWAs are hard Lees meer

   14:35 - Good styling
   What happens if they add an image?
   Do they have access to the branded fonts and colors in their WYSIWYG?
   Can you revoke 100px red Times New Roman?
   18:32 - Page alerts
   Yellow, green, red
   Alerts on existing pages
   21:08 - New pages
   Is there a good template for new pages?
   Can they easily set the slug? whatever.com/covid19

   Can they add it to the nav?
   23:52 - Google’s “Hours of Operation”
   Is that easy to change?
   Meta tags: https://schema.org/OpeningHoursSpecification

   25:43 - Other
   Own your audience!
   Email newsletter ready to rock
   Online pickup? Basic scheduling software https://www.cityhive.net/

   https://snipcart.com/

   Live streaming - have a YouTube account ready to go, even if empty
   34:38 - Deployment
   Detail how to deploy e…

10. Hasty Treat - 5 Things That Make Your Site Slow

    13 april 2020 · 24 min

    Afspelen
    In this Hasty Treat, Scott and Wes talk about five things that could potentially be making your website slow.
    LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
    Show Notes 3:00 - TTFB
    Slow DNS lookup
    Server on the other side of the world
    Slow server processing
    Network speed back to the browser
    6:21 - Requests
    Too many requests
    Too large
    Waterfalling your requests
    9:44 - Assets are too large
    Images are the biggest bloat in a site
    Compress and optimize via build tool or ImageOptim
    Make smaller
    Picture fill for mobile
    14:48 - Lazy loading
    lazy=“true”
    Intersection observer
    Preload slider images two ahead
    18:03 - Not using a CDN
    What is a CDN?
    Cloudflare is free, others are very cheap - we used Cloudfront
    Netlify is free and comes with a CDN
    Links WordPress Lees meer

    Webpack

    Gulp

    gatsby-image

    Cloudinary

    Cloudflare

    Cloudfront

    Netlify

    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

11. Working From Home During the Pandemic (With or Without Kids)

    8 april 2020 · 55 min

    Afspelen
    In this episode of Syntax, Scott and Wes talk about working from home. How do we do our best in these unprecedented times? Here are our tips for working from home and staying productive and sane!
    .TECH Domains - Sponsor If you need eyes on your project, you’ll need a domain, and .TECH is perfect for representing your brand. Find out if your .TECH domain is available at go.tech/syntax2020. Use the coupon code Syntax2020 and get 90% off 1- 5- and 10-year domain names.
    Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.
    Show Notes 2:39 - Your space
    You need a table Card table or dining room table Lees meer

    Keyboard + monitor
    Don’t work from your bed or couch
    Headphones can get you in the zone (noise-canceling ftw)
    16:36 - Routine
    Shower, shave, makeup
    Clear start and stop times - even if that means it’s 5am to 11am because you are splitting
    Taking breaks is important
    25:24 - Focus
    TODO list - write a list of what you hope to do at the start of the day, check things off, feel good about yourself
    Eat That Frog - for the 100th time
    Don’t watch or check the news during work hours
    Block the terms related to the pandemic or politics on social media - you don’t need that info there DOOM Scrolling

    30:11 - Self care
    Video games or relaxing things post work
    Exercise Kettlebells, spin bike, bodyweight workouts Stronger by Science has a great episode about this - https://www.strongerbyscience.com/podcast-episode-38/

    Zoom Happy Hours
    Don’t overly rely on substances to get you through
    Get your VD (vitamin D)
    Don’t stress out yourself at night - don’t look up news before bed
    43:20 - Managing kids and sharing time with your partner
    First of all, props to you all - this is really hard, mentally and physically
    This will vary greatly depending…

12. Hasty Treat - Abstraction

    6 april 2020 · 17 min

    Afspelen
    In this Hasty Treat, Scott and Wes talk about abstraction in general as well as javascript programming.
    LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
    Show Notes 1:48 - What the heck is abstraction?
    I like to think of it as sweeping under the rug
    Vue and React devs should be very familiar with the concept
    4:44 - When to abstract
    When things are getting too heavy
    Personal preference
    Some people have an arbitrary line limit
    7:25 - When not to abstract
    When savings are minimal
    When it just adds a pointless layer
    9:40 - Personal code abstractions vs public
    My personal focus is on API simplicity and baked-in smart defaults
    More specific
    Public APIs need to be more flexible or at least for some components
    Links React Lees meer

    Vue

    Svelte

    Max MSP

    chakra UI

    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

13. Mental Health and Dev ft Dr. Courtney Tolinski - Depression, Anxiety, Imposter Syndrome, Focus, Motivation, Burnout

    1 april 2020 · 1 uur 3 min

    Afspelen
    In this episode of Syntax, Scott and Wes talk with Dr. Courtney Tolinski about mental health and web development.
    Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
    Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
    Show Notes 3:20 - Depression
    Honestly just explaining depression would be great. Too many times I’ve heard “but you don’t look sad”
    As someone who struggles with depression, what are some things I can do to rekindle and things I enjoy like developing and hobbies? This would greatly benefit me for learning more dev related things outside of doing it for work.
    My depression is due to some other cause in personal life - two years into it.
    Coding has bought me little life back as this is the only thing I have to do.
    What can we do from an outsider's view to someone who might have depression?
    12:23 - Anxiety
    Imposter Syndrome x 1000
    How to deal with increased anxiety during these times?
    How to avoid anxiety and feel useless when working products that you don’t appeal to you?
    Wanted to ask the Dr about why do I feel that I have to work on 1000 projects that seem to never finish? 😣This is inducing a lot of anxiety sometimes.
    I am on depression medication. Sometimes, I feel scared that I am so slow and don’t feel accomplished enough like people working at FANG, etc, being a SE.
    How to deal with the anxiety caused by today’s events around the world and the need to isolate yourself from society even though we crave human interaction?
    29:12 - Focus and job performance
    How to keep motivation and focus? I find myself enjoying work but having a hard time focusing on it. All the “distraction-free” apps don’t work because I can turn them off and I feel they literally have no pow… Lees meer

14. Hasty Treat - Get Gud at Passwords & Password Management

    30 maart 2020 · 35 min

    Afspelen
    In this Hasty Treat, Scott and Wes talk about security and how to get good at passwords.
    Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
    Show Notes 7:35 - Setting passwords
    Absolutely 100% must be unique for EVERY SINGLE WEBSITE
    9:38 - Generated passwords
    Make a sentence: lovetoEatPizza
    Decide on casing
    Make your own algorithm: 3rd letter replaced by 4th letter of domain
    number on end is double the number of chars in the domain Lees meer

    13:52 - Use a password Manager
    Have the password manager generate the password for you
    Get it on your phone
    You must go 100% all in
    1password

    Dashlane

    Bitwarden - open source version of Dashlane
    LastPass - awful
    17:45 - Password manager tips
    Turn off your browser password manager - this is a crutch and causes them to become out of sync and this is why I see people annoyed by them
    For the love of god, make you master password something you can remember
    You can add family members to your plan that will approve it
    1password’s Watchtower feature
    20:50 - Biometrics
    Face ID, Touch ID
    Blood
    21:37 - 2FA codes
    Authy

    Google Authenticator

    Authenticator +

    1Password for 2FA codes
    Backup codes
    You can also backup the QR code
    29:55 - Text message codes
    Don’t
    My sister got sim jacked, PayPal drained, phone number was gone for 7 days
    Lock transfer - ask your phone provider - mine has voice recognition
    Links Have I been pwned?

    Shop Talk Show: One on One with a Hacker

    Mailchimp

    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

15. Potluck - Bootcamps × Career Change × Figma × Gatsby × AMP × Mongoose × More!

    25 maart 2020 · 58 min

    Afspelen
    It’s another potluck! In this episode, Scott and Wes answer your questions about bootcamps, Figma, Gatsby, AMP, Mongoose, imposter syndrome, and more!
    .TECH Domains - Sponsor If you need eyes on your project, you’ll need a domain, and .TECH is perfect for representing your brand. Find out if your .TECH domain is available at go.tech/syntax2020. Use the coupon code Syntax2020 and get 90% off 1- 5- and 10-year domain names.
    LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
    Show Notes 3:02 - Q. Scott, you talk a lot about your workflow with Figma. As a designer going to programming it sounds like the workflow was natural to you. As a programmer trying to move into design, I have no idea how to get started. Could you explain your workflow on starting a new project in Figma through starting to implement in VSCode?
    5:36 - The dreaded monitor question, flat or curved?
    8:34 - I am relatively new to web development and have learned HTML, CSS, Node and Mongo. I planned on taking your GatsbyJS e-commerce course, however, I have no experience in React whatsoever. Should I learn React first?
    12:35 - What is AMP and should I be using it?
    16:07 - What are the advantages and disadvantages of building a web app using a framework such as Blitz.js?
    21:46 - Would you ever consider moving from Mongo / Mongoose?
    24:47 - I am very new to the dev world. Went to college 15 years ago for Comp Sci, but dropped out halfway through to become an electrician. (Wasn’t sure if I could sit in an office all day.) Long story, but I’m wanting to change my career path and I’m very interested in software development. I’ve heard about Modern Labor’s bootcamp and I’m intrigued. I’d like to know what your take is on their program.
    33:15 - Loved your recent episode(s) on serverless functions. I’ve implemented a few mysel… Lees meer

16. Hasty Treat - Purchasing Power Parity

    23 maart 2020 · 18 min

    Afspelen
    In this Hasty Treat, Scott and Wes talk about purchasing power parity — what it is, and how Wes has implemented it on his course website.
    Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.
    Show Notes 2:36 - What is it?
    5:43 - How do you calculate it?
    Big Mac Index
    Purchasing Power Parity Lees meer

    Spotify Pricing Index

    Glassdoor

    Just ask developers what they make
    8:04 - How do you implement it?
    Cloudflare headers
    Dealing with VPNs
    Does it work with sales?
    16:09 - Is it client-side only?
    Links country-emoji npm package

    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

17. React Hooks - 1 Year Later

    18 maart 2020 · 1 uur 1 min

    Afspelen
    In this episode of Syntax, Scott and Wes talk about React Hooks, one year later — what’s changed, how to use them, and more!
    Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
    Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
    Show Notes 1:26 - Hooks vs Render Props
    Hooks win hands down
    useState
    useReducer
    useRef
    useContext
    useEffect
    Custom hooks to hide and encapsulate functionality
    35:06 - How we use them
    Scott
    Index that imports all custom hooks
    Babel alias to hooks folder
    Import { useHook } from ‘hooks’
    useContextState Lees meer

    Wes
    useResizeObserver
    useForm
    useGridRower
    useWickedFavIcon

    45:54 - Which built-in hooks do we not use?
    useImperativeHandle
    useCallback
    useDebugValue
    48:22 - Are hooks harder to learn?
    Wes: Yes — but easier to maintain after the fact
    Scott: Yes — harder conceptually and initially but easier after concepts are understood
    50:29 - Are classes going away?
    Wes: I say yes
    Scott: Double yes
    Links Syntax Ep 092: React Hooks

    Making setInterval Declarative with React Hooks - Dan Abramov

    babel-plugin-module-resolver

    awesome-uses

    uses.tech

    ××× SIIIIICK ××× PIIIICKS ××× Scott: Ars Technica War Stories

    Wes: Mpow CH1 Kids Headphones

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

    LevelUpTutorials Instagram

    Wes’ Instagram

    Wes’ Twitter

    Wes’ …

18. Hasty Treat - Hiring an Assistant

    16 maart 2020 · 23 min

    Afspelen
    In this Hasty Treat, Scott and Wes talk about how to hire an assistant — something that can make your life a lot easier as a solo developer.
    LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
    Show Notes 2:34 - Finding someone
    Virtual Assistant Offset timezones can be handy
    Flexible is great - two hours here, two hours there Lees meer

    5:55 - Types of tasks to delegate
    Support
    Email replies
    Mail and shipping items
    Invoicing
    Expenses
    Research - find emails for X
    Blog post edits
    Sponsorships
    14:50 - Standard Operating Procedures
    If something happens more than once, make an SOP
    Common questions that come up
    18:07 - Tools
    1Password
    Missive
    Custom backend tools for: Managing courses
    Issuing refunds

    Chromebook
    Google Docs
    21:52 - Hours
    Links 1Password

    Missive

    Notion

    Freshbooks

    Syntax Ep 184: Desktop & Mobile Apps With a Single Codebase

    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

19. Soft Skills Tips

    11 maart 2020 · 1 uur 1 min

    Afspelen
    In this episode of Syntax, Scott and Wes talk about soft skills tips — productivity, planning, communication, and more.
    Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
    Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
    Show Notes 2:20 - Productivity
    Make a todo list and prioritize
    Get ideas out of your brain
    Use a tool like Notion as a second brain
    Batch related things together
    Recharge when you need it
    Have a system and stick to it
    16:34 - Finishing projects
    Start
    Do a little every day
    Go all-in for a few days
    Clearly identify what needs to be done (Github issues, todo app)
    23:30 - Planning tips
    I use Mind Node
    Whimsical
    Write it down when you have an idea
    Put everything in a calendar
    30:24 - Communication
    Be honest and upfront with deadlines
    Give yourself padding — many people are overly optimistic
    Don’t let people expect communication from you, at all, or at all times
    Assume good intentions
    Don’t be a jerk to clients or coworkers
    40:28 - Skill and career advancement
    FDD — fun driven development
    Share what you learn
    Don’t let other’s progress get you down — there is always someone smarter doing crazier stuff
    Solve your own problems
    Apply and interview for anything that’s interesting
    Track your progress
    I want to ___, I wish I could ____, You are lucky that you get to _____
    Just start! Seriously. Plan on doing something.
    Links Todoist Lees meer

    Things

    Notion

    Evernote

    Notable

    Beginner Javascript

    Level 1 Electron

    uses.tech

    Rework

    Jason Freid

    David Heinemeier Hanson

    It Doesn’t Have To Be Cr…

20. Hasty Treat - Scott asks Wes about Cloudflare

    9 maart 2020 · 26 min

    Afspelen
    In this Hasty Treat, Scott asks Wes about Cloudflare — which services he uses, which ones he doesn’t, why, and more!
    LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
    Show Notes 2:45 - What do you personally use Cloudflare for?
    DNS provider
    Domain registration at cost
    Caching
    DDoS protection
    Hiding server IP address
    Free HTTPS
    Firewall rules
    Scrape shield
    Lightweight stats
    Serverless functions
    DNS
    Cloudflare Warp
    16:40 - What are you not using?
    KV storage
    Video streaming
    Deep customization around blocking/errors
    19:49 - How do you set it up?
    Links Cloudflare Lees meer

    Beginner Javascript

    Digital Ocean

    DNS Simple

    Let’s Encrypt

    Syntax Ep 224: Serverless / Cloud Functions - Part 1

    Begin

    7-Eleven hit “Dance The Slurp”

    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

21. More on Severless - Databases × Files × Secrets × Auth × More!

    4 maart 2020 · 1 uur 1 min

    Afspelen
    In this episode of Syntax, Scott and Wes do a part 2 about Serverless — databases, files, secrets, auth, and more!
    Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
    Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
    Show Notes 2:47 - Wes tried Cloudflare Workers
    Also this is so cool:
    Hey Wes, just listened to the latest Syntax episode on the serverless setup. Not sure if it’s an episode idea or not, but if you wanna do a bit of a dive on Cloudflare’s service workers, I’m currently leading an “invisible infrastructure migration” right now from a legacy WordPress setup to a new Storyblok/Netlify setup. We’re using Cloudflare’s service workers to basically “stitch” the headers/menus/footers from the old WordPress site into our new Netlify pages, but serving the page back as if it was part of the normal domain. This means we can migrate from the old to the new slowly without massively disrupting SEO, doing a lengthy/costly rebuild, etc.
    A word on Digital Ocean
    Kubernetes + FAAS allows you to scale up/down
    13:54 - Secret management
    Some have a great UI
    Some have a CLI
    Some only have production
    Some have dev/staging/prod
    16:24 - Vendor lock-in
    Two kinds of vendor lock-in Lock into a low-level provider (Like AWS, or MongoDB)
    Lock into a framework Lees meer

    Questions to ask: Can I go, take my app as-is, and host it on another provider?
    Can I refactor the config and run my code as-is?
    Do I need to refactor my code for it to run on other platforms?

    Next.js will only run on Now
    There is a community package
    Begin all runs on Arc.codes
    Firebase is locked in?
    25:12 - Sharing dependencies
    Each function will have its own package.json, which can be a pain
    Publish utils a private module
    AWS Layers
    I…

22. Hasty Treat - The Status of Element Queries / Container Queries

    2 maart 2020 · 24 min

    Afspelen
    In this Hasty Treat, Scott and Wes talk about container queries, what they are and how you can use them.
    Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
    Show Notes 4:30 - The General Idea
    Toward Responsive Elements — Brian Kardell Lees meer

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

    “Did you know, for example, that there are multiple many year long efforts with huge investments underway already aimed at unlocking many new things in CSS? There are - and I don’t mean Houdini!” ~ Brian Kardell
    8:56 - What’s been happening?
    Lots of conversations
    Dead ends
    “How do we make this into more solvable problems?” and “How do we actually make some progress, mitigate risk - take a step, and and actually get something to developers?” ~ Brian Kardell
    ‘containment’ and ResizeObserver, Implemented in all browsers in about 2 years

    12:00 - Progress
    Lot’s of discussion Goog, Moz, Apple, smart people

    Not there yet
    Big ideas that could go somewhere
    .foo { display: grid; grid-template-columns: switch( (available-inline-size > 1024px) 1fr 4fr 1fr; (available-inline-size > 400px) 2fr 1fr; (available-inline-size > 100px) 1fr; default 1fr; ); }
    “A whole lot of the problems with existing ideas is that they heave to loop back through (expensive) phases potentially several times and make it (seemingly) impossible to keep CSS rendering in the same frame.” ~ Brian Kardell
    Or a system based on resizeObserver
    “In the coming months I hope to continue to think about, explore this space and…

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

    26 februari 2020 · 1 uur 2 min

    Afspelen
    It’s another potluck! In this episode, Scott and Wes answer your questions about Gastby vs everything, Next, Vue, Rails, working with agencies, CSS, and more!
    LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
    Kyle Prinsloo Freelancing - Sponsor Kyle Prinsloo teaches you everything you need to know about freelancing, including how to quit your job, earn a side-income and start taking control of your life. Check it out at studywebdevelopment.com/freelaning. Use the coupon “SYNTAX” and get 25%.
    Show Notes 1:39 - This may be a crazy question but I need to build a similar system to Level Up Tutorials where people can access content based on a monthly subscription. Any recommendations where to start with either Next.js or Gastby.js? How do I check to see if a person is up-to-date with payment?
    4:14 - What's your favorite new tab page?
    6:19: CSS vs SCSS vs Styled Components? When you are developing a React or Next.js application which styling method do you guys use and why? Which one is “best practice”, or a more efficient way of going about it?
    11:14 - What do you think of lit-html?
    15:25 - I’m relatively new to React, and primarily learning the create-react-app way. When do you go for the create-react-app approach when building an application, and when do you customize the config? I’m uncertain when it’s time to escape the ‘create-react-app’ approach. Also, when escaping it, which main configurations are you grabbing?
    18:19 - Is there a reason hasty treat intros are 2.5x the length of normal episodes? Now that Overcast has intro skipping it’d be nice if the intros were uniform in length.
    21:23 - I see Kyle Matthews coming out with a lot of input on how Gatsby can be used for web applications as well. After listening to several of your podcasts, where you talk about Gatsby, it doesn’t… Lees meer

24. Hasty Treat - What makes a server fast?

    24 februari 2020 · 16 min

    Afspelen
    In this Hasty Treat, Scott and Wes talk about how to make servers fast!
    Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
    Show Notes 3:58 - Ram / Memory
    Things like variables, functions, callstacks, application cache, sessions are all stored in memory
    Large processes can eat up lots of memory
    Reading 1,000,000 lines of a CSV
    npm installing
    Swap Memory
    If your node application is limited by memory, it will crash or wait longer for memory to be freed up (garbage collection)
    Garbage collection can take up CPU resourced
    High-performance databases
    7:52 - CPU
    The processor on your server - the brains of the computer
    A task - like 1 + 1, or function handleClick(), takes CPU time - the faster the processor, and the more cores it has, the faster it can think and perform these tasks
    A faster CPU means your node app will start more quickly
    9:26 - GPU
    Most servers don’t have a GPU
    GPUs are not only good for graphics, but they are great at solving complex tasks
    Bitcoin mining is fast on a GPU
    Machine Learning
    11:47 - Disk Space
    SSD vs HDD
    The files have to be read from the hard drive and served up to the web server - the hard drive speed determines how fast they can be read, and how fast they can be written
    SSD is more expensive but makes for a much faster application
    HDD is cheaper and is better for storing larger files that aren’t as time-sensitive
    An SSD will mean your node app will start faster and serve up files more quickly
    Links Atlas Lees meer

    Digital Ocean

    Tweet us your tasty treats! Scott’s Instagram

    LevelUpTutorials Instagram

    Wes’ Instagram

    Wes’ Twitter

    Wes’ Facebook

    Scott’s Twitter

    Mak…

25. Serverless / Cloud Functions - Part 1

    19 februari 2020 · 53 min

    Afspelen
    In this episode of Syntax, Scott and Wes talk about serverless and cloud providers - the benefits, limitations, providers and more!
    .TECH Domains - Sponsor If you need eyes on your project, you’ll need a domain, and .TECH is perfect for representing your brand. Find out if your .TECH domain is available at go.tech/syntax2020. Use the coupon code Syntax2020 and get 90% off 1- 5- and 10-year domain names.
    Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
    Show Notes 4:05 - What is Serverless?
    URL driven
    Startup/shut down (Heroku works this way)
    Digital Ocean droplet works differently
    8:15 - What are the benefits?
    Scale up specific functions rather than everything - aka potentially cheaper
    Security - your singular server instance being hacked is not a possibility
    Less knowledge overhead required You don’t need to manage your own server
    Empowers front-end devs to do more Lees meer

    Faster deploys Only re-deploy the code that changed

    17:05 - What can you host on Serverless?
    Static Files - SPA (React)
    Single functions
    It can be in JS, Python, GO, PHP
    18:07 - What can’t you host on Serverless?
    Entire applications
    Large apps have slow coldstarts
    500mb limit
    23:40 - Raw Providers
    Google Cloud
    Azure
    AWS Lambda
    SAP
    Red Hat
    IBM Cloud Functions
    Cloudflare Workers
    Kind of cool because they work like service workers where you can intercept any HTTP request
    27:33 - Easy Providers + Frameworks
    Begin + Arc.codes
    Zeit Now + Next.js
    Anything + Serverless
    Netlify
    AWS Amplify
    Apex Up - TJ Holowaychuk
    Open Faas + Digital Ocean
    Links Heroku

    Digital Ocean

    Meteor Galaxy

    Codepen Radio: Preprocessors and Lambda

    Zeit Now

    Wes’ tweet about serverless

    @maxsteenbergen

    uses.tech

    Google Cloud

    Azure

    AWS Lambda

    SAP

    Red Hat

    IBM Cloud Functions

    Cloudflare Workers

    Begin

    Arc.codes

    Severless

    Netlify

    AWS Amplify

    Apex Up

    Open Faas

    @tjholowaychuk

    Scott tries Begin.com

    SyntaxFM Reddit

    ××× SIIIIICK ××× P…

26. Hasty Treat - Get Movin' With Framer Motion

    17 februari 2020 · 24 min

    Afspelen
    In this Hasty Treat, Scott and Wes talk about Framer Motion — why it is so cool, and how it can improve animations in your projects.
    LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
    Show Notes 4:53 - The 411
    Previous knowns as Pop Motion Pose
    Animation library with focus on ease of use
    Utilizes both spring and duration based animations
    7:19 - Pose
    Pose was previously more pose based - aka you made scenes and toggled between them
    This still exists within Motion as variants, but isn’t the main way
    8:06 - The New New
    motion.div animate prop is basically a live value for the animation
    initial for initial state
    exit for animating out with use of animatePresence Lees meer

    Hard stuff made easy drag prop

    Full control over properties like duration and easing
    Orchestration features, this then that
    Variants Multiple scenes allow you to orchestrate many animations with a single state change

    Handles hover and tap easily
    Scroll values
    SVG path animations
    19:45 - Final Thoughts
    Framer Motion is easier
    React Spring is much smaller
    React Spring makes very complex animation possible
    Links Framer Motion

    React Spring

    Framer Motion Examples

    Framer X

    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

27. Are Web Dev GUIs Going to Replace Us?

    12 februari 2020 · 52 min

    Afspelen
    In this episode of Syntax, Scott and Wes talk about web dev GUIs — what are they, are they going to replace developers, are they good or bad, and more!
    Hasura - Sponsor Hasura is an open source real-time GraphQL engine. It connects to your databases & microservices and instantly gives you a production-ready GraphQL API. Check it out at Hasura.io.
    LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
    Show Notes 1:30 - What is “codeless”?
    The codeless movement is coming in with a force. Are they just selling something? Or is it a real concern?
    All types of jobs are being replaced by computers Truckers
    Cashiers
    Lawnmowers
    Doctors
    Why not web developers? Lees meer

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

    10:18 - Entire website builders:
    Wix

    Squarespace

    Webflow

    Modulz

    Grid.io

    Wordpress Builders
    13:17 - When are GUIs useful?
    Brochure site
    Basic e-commerce
    20:26 - Is a GUI/Codeless always better?
    It depends what you’re capable of doing
    25:21 - Levels of hell GUI assistance in builders
    CMS - Just modifying content and basic markup
    Access to code, drag blocks into place
    No or minimal access to code
    No modification outside of options
    31:36 - Are there GUIs for making applications?
    Native Mobile
    Zapier

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

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

    39:55 - Our favorite GUIs to help development
    Scott:
    Netlify

    Heroku

    Studio 3T

    VS Code

    Wes:
    Sketch CSS Export
    Digital Ocean

    Cyberduck

    Transmit

    ZSH

    VS Code

    Links Roomba’s first autonomous lawnmower

    Notepad++

    Geocities

    Angelfire

    Sketch

    Figma…

28. Hasty Treat - The Power of Hobbies

    10 februari 2020 · 24 min

    Afspelen
    In this Hasty Treat, Scott and Wes talk about hobbies — how they can improve your life and make you a better developer, as well as the hobbies they enjoy.
    Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
    Show Notes 3:19 - What are our hobbies?
    Wes: Focus on one thing, learn it, move along
    Kombucha, Fermentation and Curing Projects
    Bike flipping
    Kids ride on repairs + hacks
    ATV fixing
    ICE to Battery conversion Lees meer

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

    9:00 - Why are they good?
    Fuel your coding project
    Maybe could even become your key to a job you love
    They keep your mind sharp
    Good for downtime
    Good for mental health and mood Can be meditative
    Be cognizant of what they do to your mental state

    Promotes creativity and critical thinking
    Fun man
    17:54 - How do you find a hobby?
    Wes
    I always need an end game
    I want to grow hot peppers
    I want a wicked ATV for cheap
    I think batteries are fascinating but I need something real to do

    Scott - I start with the fascination
    I think dancing is cool, but I could never learn
    I think _____ is cool, but I don’t know where to start

    Deep dark YouTube holes
    YouTube has an endless selection of educational content

    Facebooks groups or forums

    Meetups / volunteering
    Introverts will have a hard time with this, push yourself

    22:50 - What is your hobby?
    Tweet us @syntaxfm

    SyntaxFM Reddit

    Links Oculus Quest

    Tweet us your tasty treats! Scott’s Instagram

    LevelUpTutorials Instagram

    Wes’ Instagram

    Wes’ Twitter

    Wes’ Facebook

    Scott’s Twitter

    Make sure to include @S…

29. The Synology Show - Backups and Home Server

    5 februari 2020 · 1 uur

    Afspelen
    In this episode of Syntax, Scott and Wes talk about running backups and a home server — Synology setups, apps, and more!
    Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
    Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
    Show Notes 2:03 - What is it?
    A little headless computer
    5:07 - Drives
    WD Red or Seagate Ironwolf — They are loud, you can put SSDs in them, but it’s $$
    6:25 - RAID
    11:17 - Power
    Backup
    Time Machine over the network
    You can upgrade the memory
    SSDs
    22:40 - Backing up your Backups
    Mirror folders to Backblaze B2
    Slow, but worth it
    30:53 - Apps
    Plex + Emby
    Storage Analyzer
    Docker - anything really
    Node js ;)
    Security cameras
    Pi-hole or custom DNS server
    Moments
    Drive
    Links Screenflow Lees meer

    Synology

    DS918+

    DS219+

    WD Red Drives

    Seagate Iron Wolf

    Govee Thermometer

    Now

    Squizzy

    Backblaze B2

    Plex

    Emby

    Storage Analyzer

    DaisyDisk

    Docker

    Node.js

    Raspberry Pi

    Dokku

    Synology vs Blue Iris

    Moments app

    Pi-hole

    Discourse

    ××× SIIIIICK ××× PIIIICKS ××× Scott: Lululemon Men’s Jogger

    Wes: DS918+

    Shameless Plugs Scott: How to Build a GraphQL API - 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

30. Hasty Treat - Non-Glamorous Skills You Should Have

    3 februari 2020 · 23 min

    Afspelen
    In this Hasty Treat, Scott and Wes talk about the non-glamorous skills that will improve your life as a developer!
    Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.
    Show Notes 3:13 - Why it’s needed
    Make you a better dev
    Make big tasks easier
    7:00 - Why we don’t do it
    Because it’s hard
    It’s boring - sometimes
    It’s not our focus
    7:24 - Good command line skills
    Get around file system
    Copy, move, delete things
    8:58 - Keyboard skills
    Jump by word/line/BOL/EOL
    Learn 1 new shortcut per week
    Custom keybindings for common tasks
    14:22 - Communication and interpersonal skills
    Check out Syntax 125: Hasty Treat - Communication Skillz Lees meer

    14:41 - Time management
    Focus apps to help
    How long will something take?
    Revisit past projects when they are done and see how long it took
    16:36 - Good file hygiene
    Good folder structure
    Delete old cruft
    Clear your recycle
    Desktop and downloads are off-limits
    Create template structures or tools for commonly used structures
    Links Wes’ Command Line Power User Course

    Synology

    VSCode

    React PropTypes Generate

    Syntax 125: Hasty Treat - Communication Skillz

    CleanMyMac

    DaisyDisk

    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

31. Potluck - Dev Culture Fit × Slack Communities × Vanilla JS × Backpacks × Raspberry Pi × More!

    29 januari 2020 · 1 uur 1 min

    Afspelen
    It’s another potluck! In this episode, Scott and Wes answer your questions about dev culture fit, Slack communities, vanilla Javascript, backpacks, Raspberry Pi, beards, and more!
    .TECH Domains - Sponsor If you need eyes on your project, you’ll need a domain, and .TECH is perfect for representing your brand. Find out if your .TECH domain is available at go.tech/syntax2020. Use the coupon code Syntax2020 and get 90% off 1- 5- and 10-year domain names.
    Netlify - Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up netlify.com/syntax for more info.
    Show Notes 3:10 - Q: Recently I took a job as a lead dev doing the exact kind of work I’ve always wanted to do. But after the first week, I really hate it. I feel like I don’t fit in and I’m seeing many red flags. There are no processes and there doesn’t seem to be any real excitement around what we are building. What should I do? Do I suck it up for a while? Or do I start looking for something else, potentially taking a pay cut (and moving back into doing web dev as opposed to building apps) to work at another creative agency with people who are more my jam?
    10:32 - Does Syntax have a Discord or Slack community channel to collaborate on topics?
    12:00 - What is one thing that really annoys you about Javascript? I’m curious if you could change one thing about the language itself, what would it be?
    15:08 - Have you tried Fauna DB?
    19:13 - What are your thoughts on including tutorial projects in a portfolio? (For example, putting the Sick Fits site from Wes’ Advanced React course in a portfolio.) I’m relatively new to React and have a couple of my own projects, but a bunch of projects from following a course.
    23:58 - A site you’re maintaining is hacked, how do you handle fixing it?
    30:28 - My bookmarks are overwhelming! I just started learning web dev and even though I sort my bookmarks … Lees meer

32. Hasty Treat - Building A Community Slack, Discord, Spectrum, Discourse, Forums

    27 januari 2020 · 31 min

    Afspelen
    In this Hasty Treat, Scott and Wes talk about community building online — some of the different software techniques and things you can do to either get started with a web community or join one.
    Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
    Show Notes 7:16 - Chat options
    Slack
    Discord
    Level Up Tutorials Discord Lees meer

    Faster communication
    9:00 - Forum based
    Indexable
    Searchable
    Slower communication
    Discourse
    Spectrum
    Facebook groups
    Reddit
    Syntax Reddit

    27:27 - Commenting systems
    YouTube comments
    Comments systems in general
    Links Github

    Slack

    Discord

    Discourse

    Spectrum

    Reddit

    r/reactjs

    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

33. Tech To Watch In 2020

    22 januari 2020 · 55 min

    Afspelen
    In this episode of Syntax, Scott and Wes talk about tech to watch in 2020 — things you should keep an eye on and learn this year!
    Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
    LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
    Show Notes 6:39 - CSS Subgrid
    8:10 - CSS Houdini
    11:20 - CSS features not supported in older browsers yet
    Scrollsnap - IE 11 and up. Lot’s of mobile issues.
    position:sticky - no IE at all
    14:24 - NPM tink
    installer-less npm
    Load packages at runtime into a shared cache across all projects
    Intelligently download the parts you need
    17:25 - Yarn PnP
    Hard links to eliminate package duplication
    Shared cache across all projects
    18:31 - Pika & Snowpack
    21:10 - Deno
    New Node?
    25:39 - React
    Suspense in more libraries
    Suspense for Server Rendering
    Meteor New ownership. v1.9 just dropped with lots of promise for future growth Lees meer

    Svelte 3
    Vue 3
    Apollo
    Next.js
    36:37 - Serverless
    Going to get easier
    Begin.com

    Next.js / Now Functions
    38:14 - Gatsby
    A single useQuery (made possible by suspense)
    39:36 - Headless CMS Thunderdome
    42:20 - Next Gen Frameworks
    Keystone
    Strapi
    Meteor
    Vulcan.js
    43:46 - Cypress
    End to end testing
    Currently no Firefox support, but hopeful for 2020
    44:21 - Modulz
    Exports to JS component
    45:00 - Figma
    Was already amazing in 2019
    Constantly improving and adding new features
    Can import from Sketch
    Links Syntax 109: CSS Grid Level 2 aka Subgrid

    CSS Houdini

    Interactive Introduction to CSS Houdini

    Tweetdeck

    Next Generation Package Management

    tink

    Pika

    Yarn PnP

    Syntax 212: Pika Pkg

    Snowpack

    Entropic

    Deno
    Ryan Dahl - 10 Things I regret About Nod…

34. Hasty Treat - Picking the Stack for uses.tech - Gatsby, React, Context, Styled Components

    20 januari 2020 · 25 min

    Afspelen
    In this Hasty Treat, Scott and Wes talk about Wes’ new website, uses.tech — the stack he chose for building it, as well as what it does and how to use it!
    Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
    Show Notes 2:23 - What is uses.tech?
    5:33 - The stack
    8:13 - Avatars
    10:43 - Filtering
    15:51 - Github actions
    19:25 - Favicon
    21:30 - Search
    22:03 - Hosting
    Links uses.tech Lees meer

    awesome-uses repo

    Gatsby

    React

    Gatsby Node API

    Clearbit API

    unavatar

    Now.sh

    webserv.nl

    country-emoji

    Andrew Luca

    joi

    Making setInterval Declarative with React Hooks

    Netlify

    Algolia

    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

35. 2020 Fitness

    15 januari 2020 · 1 uur 5 min

    Afspelen
    In this episode of Syntax, Scott and Wes talk about fitness — how to stay in shape as a developer, nutrition, goals, and more!
    DevLifts - Sponsor Refactor your body with DevLifts. They have a few different programs: 1) fit.Start (normally $19/month) has a few options (lean, bodyweight, and strong). Workouts are delivered via email each month, with access to a Slack community for questions and accountability. 2) Premium (normally $199/month) is a custom-tailored option, where you get your workouts and nutrition advice after answering a questionnaire. They also check in with you each week via Slack to see how it’s going and make changes if necessary. Get 50% off fit.Start plans with code SYNTAX and 50% off Premium with code TASTY.
    Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
    Show Notes 4:42 - Past year reflections
    Scott
    Tried several different lifting
    Breaking didn’t happen as much, so my cardio took a hit
    I finally found a full body plan / bro split that has been very effective
    Weight belt has really helped my form Lees meer

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

    12:15 - What we’re doing now
    Scott
    4 day split
    Chest/Triceps
    Back/biceps
    Shoulders
    Legs
    Abs every day

    Wes
    3 days a week
    Set A - Chest and back
    Set B - Legs and chest
    Set C - Legs and back

    Cardio finisher (BLASTERS)

    At home helpers
    Kettle bells
    Foam roller

    30:32 - Nutrition
    Scott
    Nothing too hardcore, salads for lunch - not religiously though
    Good dinners
    IF oc…

36. Hasty Treat - A Month On Firefox

    13 januari 2020 · 33 min

    Afspelen
    In this Hasty Treat, Scott and Wes talk about a month of using Firefox — what they liked, what they didn’t, and whether or not they’ll keep using it.
    LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
    Show Notes 3:42 - Dev tools are really good
    19:16 - Browsing experience
    22:40 - Setup and switchover tips
    26:45 - What we didn’t like
    29:57 - Will we stay?
    Links Firefox Lees meer

    Errors in Firefox

    Debugging messages in Firefox

    Harald Kirschner

    GraphQL

    1Password

    WhatsApp

    Videostream for Chromecast

    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

37. Pika Pkg

    8 januari 2020 · 57 min

    Afspelen
    In this episode of Syntax, Scott and Wes talk with Fred Schott about Pika Pkg, a new kind of package registry for the modern web.
    Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
    Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
    Show Notes 3:24 - What is Pika?
    9:40 - What about peer dependencies?
    12:53 - What does migration look like?
    17:30 - Are these tools making things easier?
    21:25 - What is the Pika Registry?
    34:48 - What is the Pika editor?
    41:13 - Is it open source?
    47:30 - What about security?
    Links Fred Schott Lees meer

    @FredKSchott

    Pika

    @pikapkg

    Snowpack

    Pika Builders

    Babel

    Typescript

    Webpack

    CSZ

    Parcel

    Deno

    VSCode

    Entropic

    Homebrew

    Plex

    Synology NAS

    Luke Jackson

    Toolsday Podcast

    ××× SIIIIICK ××× PIIIICKS ××× Fred: Idle Supermarket

    Scott: Theragun

    Wes: Emby

    Shameless Plugs Fred: Pika

    Scott: Level Up Tutorials 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

38. Hasty Treat - Modules in Node

    6 januari 2020 · 18 min

    Afspelen
    In this Hasty Treat, Scott and Wes talk about modules in Node — what are they, how they’re different from browser modules, and more!
    Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
    Show Notes 3:06 - How were they done before?
    5:11 - How do they work?
    7:07 - How to use Modules in Node
    9:57 - Gotchas
    13:18 - What should you use?
    Links Node Lees meer

    Node Modules

    Babel

    ESM

    Meteor

    Keystone

    MJS

    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

39. Potluck - Fonts × Frameworks × Teas × Coding Subscriptions × Client Work × More!

    1 januari 2020 · 57 min

    Afspelen
    It’s another potluck! In this episode, Scott and Wes answer your questions about fonts, frameworks vs custom, drinking tea, learning to code, client work, and more!
    Kyle Prinsloo Freelancing - Sponsor Kyle Prinsloo teaches you everything you need to know about freelancing, including how to quit your job, earn a side-income and start taking control of your life. Check it out at studywebdevelopment.com/freelancing. Use the coupon “SYNTAX” and get 25%.
    LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
    Show Notes 2:01 - Q: When you run audits like lighthouse on a website, do you run the audit on each page? Or have you found an app or hack to run the audit over the entire site / multiple pages?
    5:30 - Q: What makes a font “good”? I stumbled upon haleyfiege.fun/fonts, where she says her first font was not “good,” but it looks perfectly usable to me. When you are picking fonts for web apps, how do you judge them? Is it entirely subjective?
    9:14 - Q: As a solo founder, speed is essential. What’s faster, building your own components, using a theme, or using a framework?
    12:05 - Q: I’ve never been a tea drinker, but lately I’ve been wanting to start drinking a hot tea in the afternoon (instead of coffee). I know Scott is the Tea Guru, so what would your suggestions be for starting out?
    15:30 - Q: Is it worth bundling JavaScript for websites that aren’t using a framework (i.e. WordPress / CMS websites)? The company I work for uses a large enterprise CMS and our JavaScript is just a minified mash of several different JS files, most of which are several hundred lines of spaghetti code. It would be nice to break up all these files in some sort of modular way, plus have the added benefit of using Babel so we can write modern JS. However, the output of the bundled JS file seems massive. Won’t t… Lees meer

40. Hasty Treat - Wes Teaches Scott about Keystone.js

    30 december 2019 · 27 min

    Afspelen
    In this Hasty Treat, Wes teaches Scott about Keystone.js — best practices, things to avoid, why you should check it out, and more!
    Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
    Show Notes 3:10 - What is Keystone?
    7:38 - How do you handle mutations?
    14:26 - What’s the hosting situation like?
    19:34 - Shortcomings
    21:40 - Plugins
    Links KeystoneJS Lees meer

    Prisma

    Hasura

    Next.js

    GraphQL

    Stripe API

    WordPress

    ThinkMail

    Drupal

    Redux

    Now

    MongoDB

    MongoDB Compass

    pm2

    TypeScript

    Apollo Helpers

    GraphCool

    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

41. 2019 YEAR END Definitely Not a Clip Show

    25 december 2019 · 57 min

    Afspelen
    In this episode of Syntax, Scott and Wes do a 2019 year in review — the most popular Syntax episodes, what they learned, some personal updates, plans for next year, and more!
    Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.
    Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
    Show Notes 1:40 - Plans for 2020
    Syntax Live March 2019
    Plans for 2020
    Twitter has done really well for @syntaxfm Lees meer

    Community feels great
    9:20 - Top 10 Syntax episodes of 2019
    Syntax162: The Fundamentals - JS

    Syntax120: Gatsby vs Next

    Syntax158: The Fundamentals - HTML + CSS

    Syntax126: Bootcamps vs School vs Self-Learning

    Syntax138: What’s New in Web Development

    Syntax130: The VueJS Show (Scott teaches Wes)

    Syntax146: CSS the Cool Parts

    Syntax174: How to Build an API

    Syntax154: SVGs with Sara Soueidan

    Syntax106: A Look Forward to 2019

    25:17 - Personal stuff
    Scott
    Brooklyn Tolinksi
    2019 was really tough for me
    Level Up courses for 12 months
    Huge changes to my production values and office
    Huge changes to LUT codebase (React hooks, Typescript, Next.js, Mongoose)

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

    39:17 - Stuff we learned
    Scott
    Better speaker
    Lots of TypeScript
    Better debugging
    Hooks
    Svelte
    General improvement in JS writing and programming skills

    Wes
    Really good at Vanilla.js DOM API
    React Hooks
    Suspense
    Audio Visualization
    Shape Detection API - Faces, Barcodes, Text
    Headless CMS: Prismic, Sanity, WordPress GraphQL, Keystone.js, Hasura
    Very good understanding …

42. Hasty Treat - How We Launch Courses

    23 december 2019 · 26 min

    Afspelen
    In this Hasty Treat, Scott and Wes talk about launching courses — a behind-the-scenes look at their platforms, processes, best practices, and what it takes to get a course published.
    Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
    Show Notes 2:13 - Scott’s process
    8:48 - Wes’ process
    20:57 - Additional tips
    Links Beginner Javascript Lees meer

    Level Up Tutorials

    Figma

    Tim Smith

    YouTube

    Vimeo

    HandBrake

    Screenflow

    Backblaze B2

    VS Code

    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

43. State Machines, CSS and Animations with David K Piano

    18 december 2019 · 54 min

    Afspelen
    In this episode of Syntax, Scott and Wes talk with David K Piano about state machines, CSS, animations and more!
    Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
    Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
    Show Notes 2:30 - Who is David K Piano?
    4:00 - Did you have a background in animation prior to web development?
    5:45 - How did you build the CSS Responsive House on Codepen?
    8:36 - What are state machines?
    14:47 - How does it relate to programming?
    17:20 - How do you go about changing states?
    20:20 - Is this similar to how RxJS works?
    21:40 - How would state machine work in CSS?
    29:07 - Perspective in CSS
    34:47 - How do you like Twitch vs YouTube?
    35:48 - How do you add XState to a current project?
    41:42 - Visualizing sate machines
    46:15 - Do you have a day job as well?
    Links @davidkpiano Lees meer

    David’s Codepen

    CSS Responsive House

    InVision

    Framer

    Figma

    XState

    RxJS

    React

    Apollo

    Vue.js

    Javascript30

    Tailwind CSS

    GROQ.dev

    Keyframe.rs

    Babel

    Twitch

    Keygrame.rs Patreon

    ××× SIIIIICK ××× PIIIICKS ××× David: Lynn Fisher

    Scott: The Big One

    Wes: American Factory

    Shameless Plugs David: XState and Keyframe.rs

    Scott: React and Typescript for Everyone - Sign up for the year and save 25%!
    Wes: Beginner Javascript - Use the coupon code ‘Syntax’ for $10 off!
    Tweet us your tasty treats! Scott’s Instagram

    LevelUpTutorials Instagram

    Wes’ Instagram

    Wes’ Twitter

    Wes’ Facebook

    …

44. Hasty Treat - The New MacBook Pro for Web Development

    16 december 2019 · 22 min

    Afspelen
    In this Hasty Treat, Scott and Wes talk about the new 16" MacBook Pro and how it performs as a web development machine.
    Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
    Show Notes 2:24 - Why did the old ones suck?
    4:43 - What did we get and why?
    Wes
    32GB RAM
    2.3GHz 8-core i9 Lees meer

    1TB SSD

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

    9:40 - Is it still the best?
    The MacBook Pro is the workhorse of developers
    Keyboard is amazing
    Screen is even bigger
    Esc key is back
    Touch ID is very fast
    Heat is good
    Speed is very fast. Great for video editing, recording, etc…
    Trackpad feels great
    15:18 - Still not good:
    Webcam sucks
    Ports
    16:09 - Y NAWTS:
    Why not Windows?
    Why not Hackintosh?
    Why not iMac?
    Links 16" MackBook Pro

    Surface Book

    Alfred

    CalDigit TS3 Plus Thunderbolt 3 Dock

    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

45. 2019 Gift Guide

    11 december 2019 · 56 min

    Afspelen
    In this episode of Syntax, Scott and Wes bring you an entire episode of sick picks — the 2019 gift guide!
    Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.
    Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
    Show Notes 3:48 - Gadgets
    Apple Watch Lees meer

    Sabrent Qi Wireless Charger

    Sony wh-1000xm3

    Bose QC35 II

    Sabrent 8-in-1 hub

    Satechi Aluminum Multi-Port Adapter

    Anker 5-in-1 quick charge hub

    3 in 1 charge cable

    Elgato Cam Link

    16:59 - Smart Home Automation
    Google Nest Home Hub

    Wyze cams + plugs + bulbs

    Ecobee thermostat

    Google Chromecast

    Google Home

    Smart Powerstrip

    27:14 - Laptop Stands
    12 South

    Rain Design mStand

    Roost

    Nexstand

    29:59 - Phone Cases
    RhinoShield

    30:52 - Mechanical Keyboards
    Ctrl Keyboard

    Keychron K1

    Code Keyboard

    34:34 - Mice
    Logitech MX Master Mouse

    35:27 - Tripods
    Lammcou Flexible Tripod

    GorillaPod

    37:04 - Cameras
    Sony a7 III

    38:06 - Experiential
    Massage
    Float
    Knife Skills Class
    Butcher Class
    Cooking Class
    40:08 - Food
    Cold Brew Coffee Maker

    Prep Naturals Glass Meal Prep Containers

    Blue Top Creamy Buffalo

    Heartbeat Hot Sauce Pineapple Habanero

    Maldon Salt

    Weck jars

    Thick sheet pans

    Precut parchment

    Instant Read Thermometer

    Umai Dry Steak Aging

    Charcuterie bags

    Mesh produce bags

    Beeswax wraps

    Yeti drinkware

    49:24 - Grooming & Wellness
    Theragun

    Foam roller

    Power Blocks

    Japanese nail clippers

    Links Anker
    Deal Extreme
    Prismic YouTube Channel
    Shameless Plugs Scott: Level Up Pro - Sign up for the year and save 25%!
    Wes: Beginner Javascript Course

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

46. Hasty Treat - What Are Github Actions?

    9 december 2019 · 16 min

    Afspelen
    In this Hasty Treat, Scott and Wes talk about Gihub Actions — what they do, why you might be interested in them, best practices and more!
    LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
    Show Notes 2:30 - What are Github Actions?
    4:40 - Examples of Github Actions
    6:02 - Will Github Actions replace continuous integration services?
    9:19 - Libraries
    Links Codeship Lees meer

    Github Actions

    nextdiff

    Figma Action

    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

47. Potluck - Tabs are better? × Coding Music × SEO × Is Angular good? × Biggie Smalls × Soy Sauce × More!

    4 december 2019 · 56 min

    Afspelen
    It’s another potluck! In this episode Scott and Wes talk about tabs vs spaces, coding music, SEO, React vs Angular vs Vue vs Svelte, Rapping, Soy sauce and more!
    Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
    Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
    Show Notes 3:18 - Q: I am potentially starting a job as an Angular developer (modern angular). But I am scared that, even though I will continue to stay on the cutting edge in my personal projects, using Angular in my job will make it harder to get a job after that in more modern tech like React. Do you think there is any truth to this?
    5:30 - Q: Yo guys, saw soy sauce stirred up quite the controversy…lol. What are some big developer disagreements you guys have?
    11:40 - Q: In JavaScript, ! == is the same as ! =, but I was told there was a slight technical difference. I cannot find what the difference is. Could you elaborate on this?
    14:17 - Q: What are the rules on using another dev’s repos as a boiler plate? Example: Using Wes’s advanced react starter files to utilize his set up for my own project?
    15:35 - Q: What music do you listen to while you code? As an extension, could we crowd source a dev playlist and host it on Spotify?
    20:26 - Q: How do you go about working with different technologies and stacks (front-end related) when you have to accommodate for the client or other developers’ biases towards specific things. For example, you have to learn a different set of tools because in a new project someone doesn’t like what you use… Lees meer

48. Hasty Treat - New CSS Logical Properties

    2 december 2019 · 17 min

    Afspelen
    In this Hasty Treat, Scott and Wes talk about new CSS Logical Properties.
    Hasura - Sponsor Hasura is an open source real-time GraphQL engine. It connects to your databases & microservices and instantly gives you a production-ready GraphQL API. Check it out at Hasura.io.
    Show Notes 2:27 - The Box Model
    5:32 - Grid and Flexbox
    10:17 - Widths and Heights
    11:20 - Text Align
    Links New CSS Logical Properties! Lees meer

    Elad Shechter

    Adam Argyle

    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

49. Show 200!

    27 november 2019 · 1 uur 14 min

    Afspelen
    In this episode of Syntax, Scott and Wes celebrate 200 episodes of Syntax with a live Q&A!
    LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
    Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
    Show Notes 2:27 - With 2020 around the corner, what are your wild predictions for the the future of web design and development?
    8:44 - Are site builders going to replace us as web developers?
    13:30 - What does the future look like for Syntax?
    19:01 - What emerging tech advancements most excite you for the next 5-10 years?
    23:27 - What is the future of web hosting? What should hosting companies do differently?
    27:40 - Why do you set your base font size to 10px?
    32:40 - If you could go back in time, what would you say to yourself?
    36:29 - How do you make an iFrame go 100% high?
    39:10 - What’s one thing you see developers stress out about for no reason?
    44:46 - Do you feel overwhelmed with creating new content when there’s so much already out there?
    48:42 - How do you stay sane with your naming conventions?
    51:15 - If Gatsby is best for static websites and Next is best for apps, how does Create React App compare?
    54:30 - How much is too much or too little magic in a framework or library?
    58:11 - Does Kait ever get tired of you buying a bunch of stuff?
    61:45 - What is your office setup?
    64:01 - How long until we can use Suspense for data loading with libraries other than Relay?
    Links Pigeonhole Lees meer

    Keystone

    VulcanJS

    NextJS

    Gatsby

    Meteor

    Wix

    Squarespace

    Modulz

    Figma

    Sketch

    Framer

    Netlify

    dnsimple

    Digital Ocean

    AWS

    Heroku

    Syntax016: Rems vs Ems

    Seth Godin

    Notion

    Laravel

    Blaze

    Rel…

50. Hasty Treat - So you want to make a course... Will people buy it?

    25 november 2019 · 19 min

    Afspelen
    In this Hasty Treat, Scott and Wes talk about making courses — techniques, best practices, things to avoid, and more!
    Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
    Show Notes 3:07 - Validating your ideas
    4:44 - Generating ideas
    6:38 - Figuring out which ideas will stick
    10:00 - Show your expertise
    14:02 - Pay attention to what’s popular
    15:50 - Collect email addresses
    Links Microsoft Excel Stream Highlights Lees meer

    Refactoring UI

    Adam Wathan

    Steve Schoger

    Scott’s Svelte 3 course

    Wes’ Sublime Text articles

    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