TopPodcast.com
Menu
  • Home
  • Top Charts
  • Top Networks
  • Top Apps
  • Top Independents
  • Top Podfluencers
  • Top Picks
    • Top Business Podcasts
    • Top True Crime Podcasts
    • Top Finance Podcasts
    • Top Comedy Podcasts
    • Top Music Podcasts
    • Top Womens Podcasts
    • Top Kids Podcasts
    • Top Sports Podcasts
    • Top News Podcasts
    • Top Tech Podcasts
    • Top Crypto Podcasts
    • Top Entrepreneurial Podcasts
    • Top Fantasy Sports Podcasts
    • Top Political Podcasts
    • Top Science Podcasts
    • Top Self Help Podcasts
    • Top Sports Betting Podcasts
    • Top Stocks Podcasts
  • Podcast News
  • About Us
  • Podcast Advertising
  • Contact
Not in our directory?
Add Show Here
Podcast Equipment
Center

toppodcastlogoOur TOPPODCAST Picks

  • Comedy
  • Crypto
  • Sports
  • News
  • Politics
  • True Crime
  • Business
  • Finance

Follow Us

toppodcastlogoStay Connected

    View Top 200 Chart
    Back to Rankings Page
    News

    Syntax – Tasty Web Development Treats

    Full Stack Developers Wes Bos and Scott Tolinski dive deep into web development topics, explaining how they work and talking about their own experiences. They cover from JavaScript frameworks like React, to the latest advancements in CSS to simplifying web tooling.

    Advertise
    • Apple Podcasts
    • Google Play
    • Spotify

    Latest Episodes:
    Potluck — Do titles matter? × Should clients pay for plugins? × Can I debug my baby? × How we prepare for Syntax × Deno × Learning things quickly × More! Feb 17, 2021
    Show notes

    It’s another potluck! In this episode, Scott and Wes answer your questions about job titles, clients and freelancing, debugging, the creative process behind the Syntax podcast, Deno, how to learn things quickly, 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.

    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.

    Cloudinary - Sponsor

    Cloudinary is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations.

    Show Notes

    01:17 - Do either of you have a pattern that you follow for rolling back Promise.all rejections? I am looking for an elegant way of reversing any promises that may have resolved before one was rejected. For instance, any db writes or 3rd-party webhooks that were created during the sign-up flow, but then need to be removed if one of the promises was rejected.

    04:51 - I’ve been doing a bunch of client projects lately that use Gatsby with the WordPress API. I have the clients set up a hosting service for WordPress and a Netlify account connected to a GitHub repo on my account for Gatsby. What I’m struggling with is the idea of having to keep these repos on my GitHub account for as long as these sites are live. But it doesn’t seem all that sensible to have these non-technical clients also set up their own GitHub account that they grant me access to for building these projects. Do you have any suggestions?

    08:45 - Hey guys! Been listening to the podcast since I was starting out and it has been super helpful, entertaining, and hilarious. Two-part question. First, when would you consider a dev “full-stack”? I work for a small company that does WordPress, GraphQL, Node, React, TypeScript…lots of variety. I was hired as a front-end dev, but have since done work in PHP and Node, and even my boss has assured me I do full-stack work. However, I am not being paid as a full-stack dev. Can’t figure out if this is because I work part-time (I have a baby) or some other reason. Should I be asking for a raise as a part-time employee?

    12:43 - When working freelance for a client, and you need to purchase something, for example the CPT UI plugin or something like WP Migrate DB Pro to help you build the site, do you either pay for it yourself and add it to the clients invoice at the end? Or do you ask them to pay for it when you need it? So many small “gotchas” I’m needing to get over!

    18:02 - I just had a baby girl 4 months ago. When she is crying I sometimes catch myself trying to debug her to find out what is wrong. My wife thinks I am weird, but I guess I am just in the habit of trying to fix problems. Have you ever experienced this?

    22:17 - How do you prepare for the Monday and Wednesday podcast? What is it like, and what is the creative process behind it?

    29:03 - How would one go about using JavaScript to load all images from a folder in order to render them dynamically on a page? I looked around and only see answers using jQuery and PHP. In the end I want my client to be able to drop images into (or remove them from) the images folder and the site would just populate the image slider with all the images. Is this problem solvable with JavaScript, or is it time to learn something new?

    35:26 - I have a side project with a Node backend that sends out reminders to signed-up users about various deadlines that they opt-in to. It started out pretty small but as the user base is now in the thousands, I’m worried that my reminder send functionality won’t be able to keep up with the increasing volume. It’s basically just a daily CRON job that loops through users and finds the different notifications to send out - either through Twilio or Postmark. Is there a more efficient way to perform large CRON jobs such as this? Curious how each of you guys would tackle this problem.

    42:29 - Hey guys, great overview episode on Deno (ep 322). This got me thinking, again, of the proliferation of tools and technologies in our industry and ecosystems. Say we’ve already “identified” the technology or tool and now we need to get familiar. As course designers constantly exploring new tools and technologies, what are some ways you can most efficiently and productively grasp actionable understanding (i.e. shortest route to Neo’s “I know kung-fu”)? And can you share any “hacks” or “pro-tips” that can help surmount that initial learning curve and tech-stack fatigue?

    Links
    • SnipCart
    • Syntax 228: More on Severless - Databases × Files × Secrets × Auth × More!
    • FileReader API
    • Syntax 322: The Deno Show
    • Syntax 044: How To Learn Things Quickly
    • Twilio
    • Postmark
    • Begin.com
    • RabbitMQ
    • Syntax 035: Keeping Up with the Codeashians. Dealing with our fast paced industry.
    ××× SIIIIICK ××× PIIIICKS ×××
    • Scott: Hario Filter-In Cold Brew Tea Bottle
    • Wes: Slonik USB Headlamp
    Shameless Plugs
    • Scott: Testing With Cypress - Sign up for the year and save 25%!
    • Wes: Advanced React - Use the coupon code ‘Syntax’ for $10 off!
    Tweet us your tasty treats!
    • Scott’s Instagram
    • LevelUpTutorials Instagram
    • Wes’ Instagram
    • Wes’ Twitter
    • Wes’ Facebook
    • Scott’s Twitter
    • Make sure to include @SyntaxFM in your tweets

    Hasty Treat - TypeScript Compilers and Build Tools Feb 15, 2021
    Show notes

    In this Hasty Treat, Scott and Wes talk about the differences between compilers and build tools in TypeScript.

    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 code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.

    Show Notes

    03:38 - What is a TypeScript compiler?

    • Do we still need Babel / WebPack?

    07:49 - Babel

    • Transpiler
    • It doesn’t do typechecking
    • New JS features that aren’t in TypeScript yet

    10:22 - SWC

    • Rust based compiler
    • Doesn’t do type checking (yet)
    • https://github.com/swc-project/swc/issues/571

    13:03 - Deno

    • Uses tsc right now
    • Might move to Rust
    • https://github.com/denoland/deno/issues/5432

    13:36 - Surcase

    • https://github.com/alangpierce/sucrase#transforms

    14:46 - ESBuild

    • Compiles, but doesn’t do any type checking
    • Fastest

    17:39 - What about bundlers?

    • Parcel
    • Snowpack
    • Webpack
    • ESBuild
    • When might you still need a bundler?
      • To handle different types of files that are non-standard
        • Like importing CSS and images
    • Treeshaking
    • Smaller bundle files
      • Typescript can concatenate to a single file, or all .js files, but smaller / smarter bundles still need a tool for that
    • Polyfills
      • Typescript does convert to syntax, but will not polyfill features
      • Something like Promise
        • Syntax can be transpiled to old code
        • Methods like allSettled aren’t
    Links
    • Syntax 324: TypeScript Fundamentals
    • Syntax 322: The Deno Show
    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

    We Review Resumes, Websites, and Online Presence Feb 10, 2021
    Show notes

    In this episode of Syntax, Scott and Wes review resumes, websites, and online presences, and discuss pros and cons, what you should focus on, 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.

    Linode - Sponsor

    Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started.

    Sentry - Sponsor

    If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.

    Show Notes

    04:32 - Why does an impression matter?

    • All of this stuff comes together to work in your favour when you are hunting for a job.

    05:14 - What goes into an online presence?

    • Twitter
      • Share what you know
    • Online website
      • Design
      • Messaging
      • Effort
      • Personal life
    • Blog
    • Resume
    • It’s not about being popular, it’s about relationships and positioning yourself as an expert. People mix up their hatred for “influencers” with having a rock solid network of people who they can help and who can help them.

    07:25 - A couple stories

    • @HenriHelvetica
      • You don’t know how many times I’ve tried to convince (esp people of color) to try a lightning talk. This stuff gets you to research, and you might even make discoveries.
      • I know it’s a step out of the comfort zone for many, and that’s cool, but don’t be upset at those who go for it, and land some work.
      • I do (did) lunch n learns @ Juno, and I started to end them w/ a post bootcamp life — tell them what it’s like, and to be active on twitter (share what you read, what you’re working on, listen to others, follow great devs, etc.). One person DM’d me to tell me she took that in and decided to try. “I never forgot that time you gave a talk at HY and one thing that you emphasized was to make your voice known on Twitter. You said that this has opened many opportunities for you and that’s been happening to me more and more recently. I never set out to build my account but the growth has indeed happened and along with it, opportunities from people I’ve never expected.”

    09:40 - Ash Connolly

    • https://ashconnolly.com/ https://www.notion.so/ashconnolly/Ash-Connolly-321c5a65350f477897ed025f4daa1bb0
    • Software Engineer
    • Using new tech with high end clients
    • Review
      • Pros
        • Clean, simple design, but doesn’t feel like it’s missing something
        • Animations are a nice touch
        • Easy to see their work (e.g. photo, title, short paragraph, link)
        • Testimonials is good, I might change the word testimonials, but that’s small
      • Cons
        • Nitpick - footer emphasis color looks like a link
        • HTML is good, but missing some semantic tags like , , , too reliant on divs
      • Resume
        • Pros
          • Good idea of what Ash has accomplished (e.g. just by reading his summary, I’m left feeling impressed because of his client base and his extras like writing for FreeCodeCamp and Marvel Blog).
          • Work history - good way of describing what he did. “Carried out performance audits and site speed improvements”
          • Links to writings and side projects
        • Cons
          • Lists Brad Frost as someone who shared his post. This feels a little weird.
          • Nitpick - CSS & CSS3, HTML & HTML5 on the languages. In 2021, just put HTML & CSS.
          • Work history - WAY way too much. Keep it to one sentence and three or four bullet points for each job. Ain’t nobody gonna read all that.

    20:48 - Matthew Bidwell

    • https://matty.dev/
    • Backend dev
    • Not focused on dev
    • Review:
      • Banging domain
      • It’s clear who he is, what he is about
      • Links to Twitter, Github and LinkedIn right away
      • Blog posts showing he knows what he’s talking about

    24:42 - Leah Lundqvist

    • https://leah.link
    • Review:
      • Pros
        • Fantastic aesthetics on site
        • Good lead paragraph
      • Cons
        • I’m not sure what work she actually does
        • Github pages are great for digging but not curation or showing off
          • Same with Twitter
        • For instance, I saw on Twitter that Leah made https://app.airport.community/app/rec1CbVg4J5aqScUQ but there was no mention of it anywhere else. A page full of the most recent / best projects with quick links is essential for anyone.
        • Don’t make them hunt for it
      • Twitter review:
        • Unreal
        • Pinned tweet

    31:04 - Ismail Ghallou

    • https://smakosh.com/
    • Best one yet
    • Clear explanation right off the bat
    • Dribbble - shows me he’s up on the latest
    • Open source
    • Testimonials
    • Talks
    • Blog
    • https://twitter.com/smakosh - Twitter lines up
    • Most recent tweets about tech

    40:18 - Jhey Tompkins

    • https://jhey.dev/
    • Whimsey
    • Sound!
    • Good use of CSS and SVG animation

    46:28 - Wes’ website

    • websos.com
    • Can’t view source
    • Whimsey
    • The right kind of animation
    • The link to the Syntax podcast has no indication that it’s going to take you offsite.
    • The background image is good, but not as good with a wide browser.
    • Custom scrollbars are nice
    • Overall the site is a delight

    53:25 - Scott’s website

    • scotttolinski.com
    • Font’s a little big
    • Link to documentary is great
    • Bio should include links
    • Page animations are great
    • Showing personal life / interests is good
    • Super fast
    Links
    • https://twitter.com/wesbos/status/1350961135269400580
    • Syntax 298: Voice Coding is Really Good with Josh Comeau
    • Josh Comeau
    • Doug DeMuro
    ××× SIIIIICK ××× PIIIICKS ×××
    • Scott: Swedish Dishcloths
    • Wes: Paper Wheels Knife Sharpening System
    Shameless Plugs
    • Scott: Testing with Cypress - Sign up for the year and save 25%!
    • Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
    Tweet us your tasty treats!
    • Scott’s Instagram
    • LevelUpTutorials Instagram
    • Wes’ Instagram
    • Wes’ Twitter
    • Wes’ Facebook
    • Scott’s Twitter
    • Make sure to include @SyntaxFM in your tweets

    Hasty Treat - Keyboard Events Are Surprisingly Interesting Feb 08, 2021
    Show notes

    In this Hasty Treat, Scott and Wes talk about keyboard events and some of the fascinating things you can do with them!

    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.

    LogRocket - Sponsor

    LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.

    Show Notes

    03:04 - The Events

    • http://keycode.info/
    • keydown
    • beforeInput
    • Keypress - deprecated
    • inputType tells you whether the event is inserting text, replacing text, inserting a line break, etc.
    • keyup
    • change event - only fires when you focus out
    • https://github.com/w3c/uievents/issues/220

    08:02 - Event meta data

    "key": "c", "keyCode": 67, "which": 67, "code": "KeyC", "location": 0, "altKey": false, "ctrlKey": false, "metaKey": true, "shiftKey": false
    • Others:
      • .locale
      • .repeat

    16:46 - Media keys

    • https://developers.google.com/web/updates/2019/02/chrome-73-media-updates
    • play, pause, ect
    • Overkill app: https://krausefx.com/blog/introducing-overkill-dont-let-itunes-interrupt-your-workflow

    18:32 - When might you use key codes?

    • Space bar to stop a video on a page
    • Building a game
    • Making a web app feel more like an app
    Links
    • Better Touch Tool
    • Syntax 315: Hasty Treat - Hyper Productivity with Keyboard Shortcuts + Window Management
    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

    TypeScript Fundamentals Feb 03, 2021
    Show notes

    In this episode of Syntax, Scott and Wes talk about TypeScript fundamentals — what it is, how you use it, why people love it so much, and more!

    Sanity - Sponsor

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

    LogRocket - Sponsor

    LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.

    Cloudinary - Sponsor

    Cloudinary is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations.

    Show Notes What is TypeScript?

    03:12 - Types?

    • What are types and why should you care?
    • JS is a typed language, it’s just not strongly typed
      • JS does not care about reassignment of a variable to a new type
      • Does not care about your types, but they do exist

    06:34 - The Fundamentals

    • You write your JavaScript code, but each time you create a variable, function, parameter, you “type it” — which means you describe what that data will look like.
      • Create a variable: Will it be a string? A number? A custom type of show?
      • Create a function: What params does it take? What type are they? What does it return?
    • Types allow your code to know if there are type errors that would present themselves to the user silently. These are small errors that can be compounded and go unnoticed.
      • This can allow you to prevent shipping code that has these errors by checking your code.
      • Some of the biggest benefits here come via errors in your text editor

    13:30 - Explaining the types

    • You can create your own types
    • Strings
    • Numbers
      • We only have numbers in TS, no floats/ints
      • We do have BigInt though, but not something most people will use
    • Arrays
      • Will be a list of another type
    • Unions
      • This type will be one of the possible options
      • String of DRAFT PUBLISHED or ARCHIVED
    • Intersections
      • An intersection type combines multiple types into one
    • Objects
      • These are custom types where each property is its own type
    • Any
      • Explicit any
      • Implicit any
    • Language types
      • These things are technically just Objects, but they have their own types
      • Dates
      • Timeouts
      • DOM Elements / Nodes
    • Void
      • When a function returns nothing — usually used with side effects like click handlers
    • Enum
      • A set of named constants
        • Used when you have a select amount of values — I like to think of these as the select lists of TS
        • String unions are also used for this same thing

    30:28 - Inference

    • Automatic detection of types
    • Typescript will try to infer your types based on their definition
    • Not every type can be inferred, leading to implicit anys and the need for explicit types

    33:25 - Getting types

    • Most popular packages already have types — you install them like npm i @types/whatever
    • If a package doesn’t have types, you have to create them yourself, which can be annoying
      • MakeTypes
      • Console log a JSON.stringify(obj), and pipe it in
    • Node has types
    • Vanilla JS has types, for the language and all of the DOM - HTMLInputElement
    • React has types
    • Typing Node modules that don’t have types
    Overall benefits

    40:39 - Type hinting

    • With TS and your editor (VSCode) you’ll get more information about your code as you type it — allowing you to know exactly what things expect
      • This seems like a small deal but in practice leads to being much more efficient

    42:50 - Refactoring

    • Rename a function, type, or variable and it will be updated everywhere in the project!
    • Moving a function to a new file is actually part of TypeScript
    • Drag + Drop file, update imports

    48:10 - Compiling

    • TSC vs Babel / Esbuild
    • Only TSC type checks
    • Compiling TS with babel will not allow you to break the build on type errors, you’ll need to run TSC in coordination or in the CI/CD
    Links
    • Snipcart
    • GraphQL
    • Snowpack
    ××× SIIIIICK ××× PIIIICKS ×××
    • Scott:
      • 1: LumiPets
      • 2: LumiPets Bear
    • Wes: Phomemo Label Printer
    Shameless Plugs
    • Scott: ESM & Snowpack - Sign up for the year and save 25%!
    • Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
    Tweet us your tasty treats!
    • Scott’s Instagram
    • LevelUpTutorials Instagram
    • Wes’ Instagram
    • Wes’ Twitter
    • Wes’ Facebook
    • Scott’s Twitter
    • Make sure to include @SyntaxFM in your tweets

    Hasty Treat - New Level Up Tutorials Site Feb 01, 2021
    Show notes

    In this Hasty Treat, Scott and Wes talk about the new Level Up Tutorials website — some of the new tech powering the site, behind-the-scenes decisions, previous iterations, and more!

    Freshbooks - Sponsor

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

    Sentry - Sponsor

    If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.

    Show Notes

    02:55 - Previous iterations

    • Originally on Drupal 7
    • Full re-write to Meteor + Blaze
      • Two sites — store.leveluptutorials.com and leveluptutorials.com
    • Meteor + React
    • Meteor + Apollo
    • Combine store and site
    • Move to TypeScript
    • NOW

    05:30 - Big choices

    • No Babel up and down the stack
    • UI
      • Mostly unchanged — React + Styled Components + SCSS
        • Moving more to SCSS, CSS vars
        • Build and dev done via Snowpack
          • 50ms hot reloadin’
          • Mega fast development workflow has been a huge plus
          • Errors in the UI via Snowpack
          • Wrote a custom GraphQL importer plugin
    • API
      • ESBuild
        • Insane speeds
        • Wrote a custom GraphQL importer plugin
      • Mercurious / Fastify
    • Codegen
      • GraphQL code gen to create everything we need for a fully typed codebase
      • Auto-generated React Hooks
    • Hosting
      • render.com for both
    • CLI
      • Custom avalanche CLI that removes the guesswork and makes bulk operations easy
    • Caddy server for easy leveluptutorials.dev in local environments
    • Testing
      • Jest → API
      • Cypress → UI
    Links
    • Digital Ocean app platform
    • https://beta.leveluptutorials.com/
    Tweet us your tasty treats!
    • Scott’s Instagram
    • LevelUpTutorials Instagram
    • Wes’ Instagram
    • Wes’ Twitter
    • Wes’ Facebook
    • Scott’s Twitter
    • Make sure to include @SyntaxFM in your tweets

    The Deno Show Jan 27, 2021
    Show notes

    In this episode of Syntax, Scott and Wes bring you the long-awaited Deno show — what it is, what it replaces, how you can use it, and more!

    Deque - Sponsor

    Deque’s free axe browser extension helps developers instantly catch 50% of accessibility bugs while they code. It’s lightweight, easy-to-use, and has zero false positives. Get started for free at deque.com/axe.

    Sentry - Sponsor

    If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.

    Mux - Sponsor

    Mux Video is an API-first platform that makes it easy for any developer to build beautiful video. Powered by data and designed by video experts, your video will work perfectly on every device, every time. Mux Video handles storage, encoding, and delivery so you can focus on building your product. Live streaming is just as easy and Mux will scale with you as you grow, whether you’re serving a few dozen streams or a few million. Visit mux.com/syntax.

    Show Notes

    02:13 - What is it?

    • A secure runtime for JavaScript and TypeScript
    • Built by Ryan Dhal — same guy who initially built Node.js
    • API is JS or TS out of the box

    04:55 - Does it replace / what is it in relation to?

    • Node
      • It’s a replacement for Node.js
    • Express
      • Web Server Frameworks like Express will run on Deno, but Express itself won’t currently run because they are build on Node APIs
      • https://github.com/oakserver/oak
    • Serverless
      • Deno can be used for anything, so it can be used for serverless functions, or a traditional web server
      • Serverless, Deno and TypeScript with Brian Leroux
    • React / Vue / Svelte
      • These things are just JavaScript, so they should/will work in Deno. Deno will replace your tooling. More involved things like Next.js that require Node APIs won’t work until.
      • https://alephjs.org/
    • SSR
      • It comes with all browser APIs out of the box!
    • Fetch
      • Window + Add Event listener
    • Webpack / Parcel / Snowpack
      • Deno is a bundler
    • Prettier
      • Deno is a formatter
    • TSC
      • Deno is a TypeScript compiler and runtime
    • ESLint
      • Deno is a linter
    • Jest
      • Deno is a Test Runner
    • NPM
      • Deno is a package manager - it pulls in packages from URLs

    14:51 - Modules

    • ES modules from the start
    • Modules are loaded from URLs
    • Why? No package registry to worry about
    • This is how the browser works
    • Import from URL
    • You can also specify it in the json file
    • https://github.com/oakserver/oak/blob/main/deps.ts
    • https://deno.land/
    • Fetch is built in!
      • It’s a browser API, but who cares?!
    • Browser APIs
      • window.add event Listener
      • Deno is event based, like the browser

    20:10 - A nice standard library

    • https://github.com/denoland/deno/tree/master/std

    22:14 - WASM

    • Deno can run WASM with the same APIs that the browsers can
    • Node is doing this too (experimental)

    25:06 - Multi-threading with Web Workers

    26:13 - Speed

    • It’s fast!
    • They took everything they learned from Node - good and bad
    • Built in Rust
    • From what we understand:
      • V8 is written in C++
      • Node is written in C, C++ and JavaScript
      • How it talks to V8 - Rust sits in-between the JS runtime, and the C++ V8 runtime and communicates between the two.
      • https://github.com/denoland/deno/blob/master/core/examples/hello_world.rs

    29:44 - Security

    • Sandboxed
    • —allow-read
    • —allow-net
    • -allow-write
    • https://deno.land/manual@v1.6.3/getting_started/permissions#permissions-list
    • You can specify which dirs it can access

    33:39 - Run from anywhere

    • https://www.npmjs.com/package/npx
    • Deno run https://cool.com/whatever.ts

    37:43 - Async out of the box

    • Everything is based on async + await / promises right away. No callback APIs, no promise wrapping.
    • Top level await

    38:53 - Node Compatibility

    • Node APIs are being filled
    • This means if a browser package ships an ES module of a package, we can just import it

    42:21 - What we’ve built

    • A bunch of sample scripts
    • Lots of simple demos
    • Very intuitive
    • Fetched and downloaded every single Syntax mp3
      • https://twitter.com/wesbos/status/1326345600141582336

    46:54 - Hosting

    • Literally any linux server (Linode, Digital Ocean, etc.)
    • https://begin.com/
    • https://fly.io/

    48:29 - Final thoughts

    • Scott: Now is a great time to learn, but don’t put any crucial work into that space unless you are ready to write everything. Libraries are still being written and evolved. Docs are still sparse. Many things didn’t work on first try. I had to read lots of source.
    • Wes: If You know JS or TS, you are already 90% there.
      • The package ecosystem isn’t there yet
      • Battle-tested
    ××× SIIIIICK ××× PIIIICKS ×××
    • Scott: Boom/Bust: The Rise and Fall of HQ Trivia
    • Wes: Orthopaedic Pillow
    Shameless Plugs
    • Scott: Deno 101 For Web Developers - Sign up for the year and save 25%!
    • Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
    Tweet us your tasty treats!
    • Scott’s Instagram
    • LevelUpTutorials Instagram
    • Wes’ Instagram
    • Wes’ Twitter
    • Wes’ Facebook
    • Scott’s Twitter
    • Make sure to include @SyntaxFM in your tweets

    Hasty Treat - The New AVIF Image Format Is Unreal Jan 25, 2021
    Show notes

    In this Hasty Treat, Scott and Wes talk about AVIF — what it is and how you might use it!

    Freshbooks - Sponsor

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

    Sentry - Sponsor

    If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.

    Show Notes

    03:10 - What is AVIF?

    • AVIF is derived from the keyframes of an AV1 video
    • Royalty free (big deal)
    • What about WebP?
    • Basically half the file size of a WebP for free, which was already about half the size of a jpeg
    • It’s a lossy format — ie it inherently will degrade the image
    • https://jakearchibald.com/2020/avif-has-landed/
    • No animation

    10:53 - How to implement

    • Cloudinary is in beta, but you can try it
    • Gatsby supports it
    • https://squoosh.app/
    • Imagemin
    • https://github.com/nucliweb/imagemin-avif
    • https://avif.io/
    • https://github.com/dreampiggy/AVIFQuickLook
    • https://github.com/vercel/next.js/pull/20765
    Tweet us your tasty treats!
    • Scott’s Instagram
    • LevelUpTutorials Instagram
    • Wes’ Instagram
    • Wes’ Twitter
    • Wes’ Facebook
    • Scott’s Twitter
    • Make sure to include @SyntaxFM in your tweets

    Potluck — $100k Dev Jobs × Sponsored Blog Posts × How To Keep Your Skills Up To Date × Libraries vs Custom × Dev Tools × More! Jan 20, 2021
    Show notes

    It’s another potluck! In this episode, Scott and Wes answer your questions about VS Code, JavaScript, $100k-per-year dev jobs, sponsored blog posts, how to use dev tools, how to keep your skills up to date, 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.

    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.

    Linode - Sponsor

    Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started.

    Show Notes

    02:01 - Not so much a question as me saying thanks! I started web dev as a bartender/college dropout in 2017 when Syntax was pretty new. I rarely miss an episode, and this year I’m starting my first >$100k JS job! Your show has always been fun, kept my attention in the realm of web dev, and helped guide my interest — I think it has been extremely valuable to my career so far, and I look forward to more.

    04:10 - How do I know when to pull in a package rather than write similar functionality myself? And is there a rule for when enough is enough, in terms of having too many packages? What I’m most concerned about is bundle size. It doesn’t seem to take a lot of packages before Webpack notifies you about large bundle sizes, so what would be best practice?

    11:27 - What is your opinion of doing a sponsored post or guest post on your own site? And if you’re in favor, what sorts of terms, payment, etc. would you outline or charge for it?

    18:20 - Do you have/know of any resources for those that want to learn more about selling digital products through e-commerce? The sources I’ve found (Scott’s e-commerce/Gatsby courses & Next.js commerce demo page) focus more on creating stores that sell physical products. Are there any gotchas when selling digital vs physical?

    22:10 - Do you have any tips for keeping your skills up to date while taking a break from work? I’m a frontend dev currently six months into my year-long maternity leave and I feel like my brain has turned to soup. I listen to podcasts and read blog posts but it never feels like enough. Time and energy are very limited for me to work on personal projects!

    25:11 - I remember you guys saying something about making your own UI component libraries. Do you use some CSS libraries like Tailwind or even Bootstrap or others for this, or do you write your Sass/CSS from scratch?

    30:52 - Would be interested to hear some of the common ways you use dev tools (chrome dev tools, react dev tools, redux, etc.). I feel like there is a lot of information in there that I am not utilizing properly to help figure out problems during development. Would be cool to hear an overview of how you use the different tabs, some of the most commons things to look for, etc.

    35:20 - I am graduating from a bootcamp next month and I feel severe insecurities/imposter syndrome. For whatever reason, I freeze up when it comes to coming up with code or writing things myself, mainly in JS. When in class, watching tutorials, following along, or viewing other people's code, I can tell you exactly what is going on, why it is being done, and I can change and add things and explain them. But when it comes to starting from a blank slate, I freeze, as if everything I know about programming has gone out the window. Do you have any advice as to how to get past this hurdle? I feel like at this point I shouldn’t be feeling like this, but maybe this is normal?

    40:36 - Do you think developers have a responsibility to help reduce CO2 emissions caused by the web? A BBC news article stated that “HD video streaming on a phone generates about eight times more in emissions than standard definition (SD)” and noted that on a small screen, the viewer might not even notice the difference. Should the developer limit the resolution available to mobile devices, or should they let the end user choose?

    47:53 - I was hoping that you guys could give me, and other listeners, advice on “knowing when you’ve bitten off more than you can chew”? Often I’ll be working on a project for fun, or possibly building out my portfolio, and I’ll continue to get excited about features that I’d like to add to my current app or what have you. At first glance, the ideas or features seemed reasonable enough to tackle, but hours later, I’ll find myself stuck, realizing that I’m in over my head, as I’ve tried to take on something that I’m not yet experienced enough to work with, or I’m lacking the man-power to complete it in a timely manner. At the same time, I want to challenge myself so that I can grow, but sometimes I feel that I’m not using my time wisely. So my question to you is, where is the line between challenging ourselves to take on new and difficult tasks and scaling back our current work to make it more approachable and less overwhelming?

    55:01 - What is the right use-case for a database, and what is the right use-case for a headless CMS? Is a headless CMS just a database + a user-friendly way of entering data into that database? Is there a secure way of querying Sanity directly from the frontend if I have data that I want to be only available to logged-in users?

    Links
    • Syntax Listener Questions
    • Bundle Phobia
    • Shopify
    • Snipcart
    • Styled Components
    • BEM
    • Mux
    ××× SIIIIICK ××× PIIIICKS ×××
    • Scott: Double Sided Mounting Tape
    • Wes: Secret Aardvark Habanero Hot Sauce
    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’ Facebook
    • Scott’s Twitter
    • Make sure to include @SyntaxFM in your tweets

    Hasty Treat - CSS Typography and Systems Jan 18, 2021
    Show notes

    In this Hasty Treat, Scott and Wes talk about CSS typography, and how to quickly get up and running with type systems.

    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 code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.

    Show Notes

    05:00 - How do you define type at the start of a new project?

    15:03 - How do media queries and screen sizes affect your system?

    16:58 - Why are systems in type important?

    20:21 - How do you design a type system?

    • Scott’s type system:
    /* Font Sizes */ --baseFontSize: 1rem; --baseNavSize: 0.64rem; --smallFontSize: 0.8rem; --smallestFontSize: 0.512rem; --xtra-big-ass-heading: 3.052rem; --xtra-heading: 2.441rem; --heading-1: 1.953rem; --heading-2: 1.563rem; --heading-3: 1.25rem; --heading-4: var(--baseFontSize); --heading-5: var(--smallFontSize); --heading-6: 0.64rem; --heading-7: var(--smallestFontSize); Links
    • https://type-scale.com/
    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

    Previous 1 71 72 73 74 75 105 Next

    Related Podcasts

    Inside Strategic Coach: Connecting Entrepreneurs With What Really Matters

    1

    Inside Strategic Coach: Connecting Entrepreneurs With What Really Matters Business
    WSJ Your Money Briefing

    2

    WSJ Your Money Briefing Business
    FORTUNE Unfiltered with Aaron Task

    3

    FORTUNE Unfiltered with Aaron Task Business
    FORTUNE OnStage Presents: The Most Powerful Women

    4

    FORTUNE OnStage Presents: The Most Powerful Women Business
    Slate Money

    5

    Slate Money Business
    In The Dark – The New Yorker

    6

    In The Dark – The New Yorker Business News
    footer-logo

    Contact Us

    Toll Free: 844-670-7747

    Links

    • Home
    • Top Charts
    • Networks
    • Apps
    • Independents Podcasts
    • Podcast Advertising
    • Podcast News
    • Contact Us
    • About Us
    • Analytics & Insights

    Stay Connected

      Privacy, Terms of Use & Our Code of Ethics Protecting Content Creators Copyrights