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:
    How to Build a Website — The Show For Beginners Aug 11, 2021
    Show notes

    In this episode of Syntax, Scott and Wes talk about the basics of building a website — how to get started for beginners!

    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.

    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

    04:20 - HTML

    • HTML is the language you write to get text and elements to show up on the screen
    • Elements can describe the content they contain
      • p
      • img
    • Or be structural and describe the areas of the website
      • div
      • h
      • header, footer
    • Listen to our ep on HTML elements to learn more about them: Syntax 354: The Surprisingly Exciting World of HTML Elements
    • HTML elements have default styling applied to them before you write any CSS
      • This comes from the browser and can be manipulated
      • However, by default all elements are either block or inline-display

    08:11 - CSS

    • If HTML is the bones, CSS is the clothes and skin
    • CSS dictates how a website looks
      • Without CSS, you have text on a blank page and images
    • CSS stands for Cascading Style Sheets (“cascading” being the key word)
    • Adding CSS to a page
      • Link tag
      • Style tag
      • Inline styles
    • Selectors
      • You can select an element on the page via element, class, id, attribute
      • Syntax is selector, brackets, property, value
    • Property
      • A property is what you are changing (e.g. background-color)
    • Value determines how the thing looks
      • background: red;
    • Specificity
      • Specificity is a big part of the cascade. When you apply one style to something, you need to learn how to target things appropriately. This is a huge part of being good at CSS.
      • People develop systems like BEM to organize this
      • General rules - Use elements for base styling and classes for specific styling. Don’t use IDs for styling.
      • !important exists to override everything, but as a general rule, NEVER use it. Seriously.
    • Some interaction
      • Most interaction is done in JavaScript, but CSS has some basics
        • hover, active, focus
    • Pseudo selectors
    • You’ll often see people reaching for libraries to make CSS easier and more consistent
      • Common examples are Bootstrap, Foundation, and TailwindCSS
      • For the most part you’ll want to avoid these until you have a good understanding of the cascade, how CSS works, and how to write good CSS.
    • In addition to properties, you can now write your own custom properties for CSS.
      • While this could be seen as an advanced technique, I believe the new normal is CSS variables first.
      • CSS variables are indicated by —variableName: value; where variable name takes the place of a property.
      • You can then use the variable via var(—variableName) in place of a property. This allows for easy duplication of same values across your style sheet.

    37:08 - JavaScript

    • JavaScript is used to add interaction to a website
    • It makes your website dynamic

    JavaScript the Language

    • We have a base programming language that has nothing to do with HTML
    • It has things like:
      • Variables - ways to store things
      • Numbers + Math
      • Data Containers - Objects and Arrays
      • Functions - Code grouped together to achieve a certain purpose
    • It also has a “Standard Lib” which means JavaScript comes with built-in support for doing common things:
      • Formatting time + money
      • Alerting the user
      • Logging a value to developer tools
      • Capitalizing things
      • Sorting lists of things
      • Round or randomize numbers
      • Fetch data
      • Talk to a sever
    • Promises
      • Logic and flow control

    JavaScript the DOM

    • When the HTML is loaded, it’s parsed into something called the DOM (Document Object Model)
    • Events
      • JavaScript is mostly event-driven - when something happens, do something else
      • When you click something and want something else to happen
      • There are lots of events
        • mouse, touch, pointer
        • Ready
        • Forms
          • Submit, change, keyboard, etc.
    • Can be used to fetch data
      • fetch() - you’ll often hear it called Ajax, or XMLHttpRequest
    • Can be used to make more HTML
      • Whole set of APIs for creating elements
    • The DOM can be traversed
    Links
    • https://css-tricks.com/
    • https://getbootstrap.com/
    • https://get.foundation/
    • https://tailwindcss.com/
    ××× SIIIIICK ××× PIIIICKS ×××
    • Scott: Tony Hawk’s Pro Skater 1 + 2
    • Wes: Mini Split Air Conditioner
    Shameless Plugs
    • Scott: 1: Level Up Tuts Pro - Sign up for the year and save 25%! 2: Become a Level Up Tutorials Author
    • Wes: 1: All Courses - Use the coupon code ‘Syntax’ for $10 off! 2: Javascript Notes & Reference
    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 Utility Types Aug 09, 2021
    Show notes

    In this Hasty Treat, Scott and Wes talk about TypeScript utility types — what they are, why you might use them, why they exist, and more!

    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.

    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:35 - Levels of using TypeScript

    1. Typing your code
    2. Typing your code, but getting a little bit more dynamic using utility types
    3. Creating your own utility types!
    • TypeScript is a language in itself
    • Check out type challenges if you want your mind blown: https://github.com/type-challenges/type-challenges/
    • https://www.typescriptlang.org/docs/handbook/utility-types.html

    07:29 - Partial

    08:23 - ReadOnly

    09:00 - Required

    09:33 - Record

    • A record is an object type that is a bit more restrictive
    • Say you want to store podcast details - name, URL, showCount, etc., but only for Syntax and Shoptalk.

    10:47 - Omit

    • I find this one handy when I want to create a “Create Item” type, where it has all the item fields except the ID field

    11:34 - Pick

    • Given a type, pick these properties

    12:39 - Return Types

    • Gives you the type that is returned from a function. Handy if you need to dynamically generate the type based on a passed function.

    13:30 - Case

    • These case types are useful for when you are doing template literal types
    • Uppercase
    • Lowercase
    • Capitalize
    • Uncapitalize
    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 - WordPress × 3rd-Party Cloud Services × Backend Hosting × Drupal × Getting Clients × GPS vs BEM × More! Aug 04, 2021
    Show notes

    It’s another Potluck! In this episode, Scott and Wes answer your questions about WordPress, Drupal, using SSGs, finding clients when you’re just starting out, scoped CSS, 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.

    RevenueCat - Sponsor

    RevenueCat makes it easy to build and manage iOS and Android in-app purchases. With a few lines of code, RevenueCat provides IAP infrastructure, customer analytics, data integrations, and gives you time back from dealing with edge cases and updates across the platforms. Created by developers, for developers, thousands of the world’s best apps use RevenueCat to power their in-app purchases and subscriptions. Get started for free at revenuecat.com.

    Show Notes

    01:48 - Most small businesses I know have heard of WordPress and it seems like it’s the industry standard for brochure sites. I’m tired of 1-5 page freelance WordPress sites. I love front-end coding and design. Do I need to “sell” people on static sites or are there freelance jobs out there for Vue/React/whatever static sites for developers? I want to stick with small businesses and a few other niches, but I’m tired of drag-and-drop builders in WordPress. Plus, I feel WordPress is overkill for a majority of sites. I just want to code sites and freelance.

    08:53 - I wanted to get your opinion on 3rd-party cloud services that provide some application functionality. Things like auth0, Algolia, open cart etc. I work for a large enterprise where there is a real fear of trusting these companies with our data and so everything is built from the ground up, with less time, and we miss out on some of the sweet features these services provide. Do you use many services like this in your production apps and how would you decide which to use?

    16:03 - I recently took Wes’ Advanced React course and went on to build my first custom React app! Thanks Wes! When the time came to deploy the app, I was surprised by the asymmetry in hosting options for the front vs. backend. It seems that there are 1000 slick, free-teir options for hosting my front-end. But finding a host for my Keystone backend: barf. I messed around with Heroku but troubleshooting was a nightmare, and I eventually settled on a Digital Ocean droplet. My inner system admin is secretly happy to have another OS instance to manage, but I hate paying 5 dollars a month to host a silly project that will probably never be seen by anyone, and I’m already irritated with the amount of care and feeding the backend needs. What gives? Why are there so many choices for frontend hosts and so few for the backend? Are there hosted backends that have auth, database, image hosting, etc and take care of the nitty-gritty with a newbie-friendly free-tier? Maybe I should I be looking into serverless?

    23:21 - Since Drupal has evolved beyond awkward kloog of v7 entity/ctools/json-services/phptemplate erc into v9 with excellent graphql/json/rest support and tomb(?) for non drupal web would you recommend Drupal as for a blogger/businesses’ internal network doc/publishing/communications system (ie Drupal not as website itself)?

    29:43 - I have just started my web development freelancing business and I feel like I am having a hard time getting a lot of response from small business who currently don’t even have a website (or have a terrible one). Is there any advice you can give about talking people into hiring a web developer when they CLEARLY need help? I plan to use NextJS and Sanity for all of my sites. My first client project is already built using it and it was a great developer experience!

    34:30 - What would you guys consider the best alternative to the BEM naming convention? I personally follow a method with very few classes (I’ve seen this called GPS) which takes advantage of the CSS cascade, but I do think it may suffer from readability problems if I handed my stuff to another developer to work on. Interested to hear your thoughts.

    39:16 - I have been self teaching myself web development for a little over a year now and your show has been a big help! I am getting to the point now where I feel I am nearly qualified for jobs and will be starting the application journey soon. I currently work in supply chain management at a big corporation with a background in industrial engineering (of which I hold a Bachelors degree). My question for you is - seeing that I have work experience at a big company and a STEM background, do you think this holds any weight in terms of being qualified for a dev job? What I am mainly wondering is how much I should leverage this during interviews and on my resume.

    Links
    • https://www.gatsbyjs.com/
    • https://tina.io/
    • https://vercel.com/
    • https://www.netlify.com/
    • https://circleci.com/
    • https://github.com/Nexedi/renderjs
    • https://keystonejs.com/
    • https://www.drupal.org/
    • https://medium.com/@jescalan/bem-is-terrible-f421495d093a
    ××× SIIIIICK ××× PIIIICKS ×××
    • Scott: I Was There Too Podcast
    • Wes: Mattias Random Stuff YouTube Channel
    Shameless Plugs
    • Scott: Advanced Svelte Techniques - 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 - Git the Latest - New Things In Tech - CoPilot, Petite Vue, Stackblitz, Web3 + More! Aug 02, 2021
    Show notes

    In this Hasty Treat, Scott and Wes launch a new series called Git the Latest — New Things In Tech.

    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:47 - GitHub CoPilot

    • AI-powered autocompletion
    • Not going to take your job

    07:18 - Next.js 11

    • Image updates
    • Multiplayer

    08:20 - Astro

    • Build faster websites with less client-side JavaScript

    09:50 - Notion API

    • Get database
    • Query database
    • Pages
    • Block children

    11:27 - Petite Vue

    • Petite Vue is an alternative distribution of Vue optimized for progressive enhancement
    • Similar to Alpine.js
    • Without a build step

    13:58 - Stackblitz

    • Node in the browser
    • Not in the cloud
    • Rolled

    15:22 - Solid.js

    • Solid is a declarative JavaScript library for creating user interfaces. It does not use a Virtual DOM. Instead, it opts to compile its templates down to real DOM nodes and wrap updates in fine-grained reactions. This way when your state updates only the code that depends on it runs.

    16:37 - Stately

    • From the company that made xState

    18:05 - Web3

    • Let us know if you want a show about it
    • Ethereum JavaScript API
    • Apps that run on the Blockchain
    Links
    • https://alpinejs.dev/
    • https://svelte.dev/
    • https://xstate.js.org/
    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

    ShopTalk x Syntax Jul 28, 2021
    Show notes

    In this episode of Syntax, Scott and Wes do a collaboration with Chis Coyier and Dave Rupert from ShopTalk Show! They talk about favorite tech stacks, podcasting, learning new tech, dealing with FOMO, 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.

    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.

    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

    07:23 - What’s your favorite stack right now?

    28:52 - What are your thoughts on WordPress? Do you still use it?

    33:59 - What do you want for listeners of Syntax?

    38:21 - How do you deal with FOMO / the pressure to learn new tech?

    Links
    • https://shoptalkshow.com/469/
    • Chris Coyier
    • Dave Rupert
    • Syntax 372: CSS Container Queries, Layers, Scoping and More with Miriam Suzanne
    • https://svelte.dev/
    • https://kit.svelte.dev/
    • https://mercurius.dev/
    • https://www.prisma.io/
    • https://keystonejs.com/
    • https://graphql.org/
    • https://redwoodjs.com/
    • https://nuxtjs.org/
    • https://astro.build/
    • https://vercel.com/
    • https://wordpress.org/
    • https://dayoneapp.com/
    • https://automattic.com/
    • https://mongoosejs.com/
    • https://www.blink182.com/
    • https://newsroom.spotify.com/2021-02-22/a-new-era-for-podcast-advertising/
    • Chase Reeves YouTube Channel
    • https://xdebug.org/
    ××× SIIIIICK ××× PIIIICKS ×××
    • Dave:
      • 1: Haikyu!!
      • 2: Nintendo Garage
    • Chris: Ray App
    • Wes:
      • 1: Connor Ward YouTube Channel
      • 2: Ryan Knorr YouTube Channel
    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 - The Surprisingly Exciting World of Favicons Jul 26, 2021
    Show notes

    In this Hasty Treat, Scott and Wes talk about favicons. Favicons are a bit of mystery and something people don’t talk about that often.

    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

    03:48 - What are favicons?

    • Requesting favicons by default /favicon.ico

    07:38 - Sizing favicons

    • 16x16 is OG - don’t do that now
    • You can specify multiple sizes

    09:41 - File formats

    • .ico files
    • .png favicons

    13:40 - Animated favicons

    • Canvas Base64

    11:36 - SVG favicons

    17:19 - Dark mode favicons

    18:55 - App Coloring

    • Isn’t there a new Safari version?
    Links
    • https://en.wikipedia.org/wiki/Favicon
    • https://caniuse.com/
    • https://keycode.info/
    • https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/icons
    • https://fav.farm/
    • https://deno.land/
    • https://uses.tech/
    • Missive
    Tweet us your tasty treats!
    • Scott’s Instagram
    • LevelUpTutorials Instagram
    • Wes’ Instagram
    • Wes’ Twitter
    • Wes’ Facebook
    • Scott’s Twitter
    • Make sure to include @SyntaxFM in your tweets

    Potluck - Svelte × Bleeding-Edge Tech × Git Process × Screencasts × Government Jobs × Permissions-Based APIs × Rescript × More! Jul 21, 2021
    Show notes

    It’s another Potluck! In this episode, Scott and Wes answer your questions about Svelte, bleeding-edge tech, best Git processes, Create React App, screencast software, FitBit API, government jobs, Syntax sponsors, and more!

    .TECH Domains - Sponsor

    .TECH is taking the tech industry by storm. A domain that shows the world what you are all about! If you’re looking for a domain name for your startup, portfolio, or your own project like we did with uses.tech, check out .tech Domains. Syntax listeners can snap their .TECH Domains at 80% off on five-year registration by visiting go.tech/syntaxistech and using the coupon code “syntax5”.

    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.

    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

    03:15 - I was wondering what you guys think about using the latest of Svelte (svelte-next) in serious projects? Does the improved devEx makes up for the small (but growing) community and lack of libraries? Do you think svelte-next is here to stay or maybe we will get a revamp that breaks backward compatibility in a couple of years, like svelte 2 -> svelte 3?

    8:48 - Git question: My process is often that I want to be able to use my last project as a starting point for my next project, with the new project having absolutely no connection or relationship to the old project. What steps can I take to completely sever any ties to the old project? Bonus question: In the new project I would love to eliminate all commits from the old project and start the new project having just one commit, the initial commit with all the code from the old project.

    11:05 - Is CRA still useful for building actual production-level web apps these days? People seem to be reaching for Next or Gatsby most of the time, and I feel CRA is mainly used for actually learning React/building personal small websites. Your thoughts? Also, for normal CSR, I feel it is better to use something like Next, and fetch data inside your component (eg: for a dashboard) rather than building one with CRA. Am I wrong?

    19:40 - What are your favorite screencast tools? (Linux? Mac? Windows?)

    25:53 - Is it a bad trait for beginners to “give up” easily? By that, I mean instead of taking the time to think of the answer to a problem, they would instead rely on googling the solution and try to understand how it worked afterward.

    27:55 - In pursuit of better health I want to track my weight daily using a smart digital scale. The idea is to automate the process of logging my own weight (e.g. stepping on the scale will update my Apple Health and any other integrations I have). After some searching around I landed on the Aria Air (mostly because I like the design and it has the coolest name). One small problem - it does not sync with Apple Health as it is a product from FitBit. They have an API so I’m thinking about running a serverless function daily, around 8 a.m. after I weigh in, to hit the FitBit API, get the data and push it to Apple Health. This way I can stay in the Apple eco-system whilst happily getting this nice, aesthetic digital scale. Any thoughts on how you would personally implement something like this? P.S. My girlfriend thinks I’m crazy, but I know the tinkerer inside Wes will love this.

    30:26 - I work for the government with good pay and benefits and love where I work, but I feel like I’m missing out. Working in government we are not always working on the bleeding edge of technology. I do try and learn on my own, but it’s hard sometimes if I don’t put it into practice. I do peek at other job openings and get excited about the tech stack and the things they’re doing. I’m just afraid if I leave I won’t have the stability and benefits I would get from working in government. Any tips or thoughts would be appreciated.

    34:24 - Unpopular opinion: Authentication isn’t that hard, but authorization is! What systems have you built to handle when users with specific permissions are allowed (or disallowed) to take actions within your system? What advice would you give to other developers developing permissions-based APIs, assuming their users can have 5-10 different levels of permissions?

    40:21 - What are your thoughts on ReScript as an alternative to TypeScript?

    44:43 - How come you guys moved to two sponsors on a Hasty and three on a Tasty? Not that it’s a big deal - was just curious of it was to keep up with costs or just because you could and then you’d make more? Either way, the show is awesome and really appreciate your opinions on everything!

    48:01 - Have you tried Angular 12? I’d think you’d be pleasantly surprised if you gave it a chance!

    52:20 - I have to copy and paste hundreds of products with six rows of details from a spreadsheet into a web interface because there is no API or CSV upload function for this program. Any recommendation on how to automate data entry into web inputs, navigate pages / click buttons, and toggle between applications? BTW, I scored my first web developer job and have to give you guys credit for steering me in the right direction.

    Links
    • Svelte
    • Create React App
    • Next.js
    • Vercel
    • iShowU
    • Descript
    • Screenflow
    • Aria Air
    • FitBit
    • Apple Health
    • https://www.gov.uk/
    • Keystone
    • rescript
    • TypeScript
    • Angular
    • Syntax 359: Hasty Treat - Making a Vaccine Bot with JavaScript
    • Puppeteer
    • uses.tech
    • wes.tech
    ××× SIIIIICK ××× PIIIICKS ×××
    • Scott: SvelteKit
    • Wes: Wyze Sprinkler Controller
    Shameless Plugs
    • Scott: Svelte Components Course - 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 - Stylelint for Linting CSS Jul 19, 2021
    Show notes

    In this Hasty Treat, Scott and Wes talk about Stylelint, what it is and why you should use it!

    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:15 - What is a linter anyway? Why do you want to lint your CSS?

    • Does stylelint fix errors or just tell you errors?

    04:42 - Getting setup

    • .stylelintrc
    • stylelint extension
    • Sass
    • High perf animations
    • stylelint order
    • Max nesting depth
    • Declaration strict value
    { "extends": [ "stylelint-config-standard", "stylelint-config-sass-guidelines" ], "plugins": [ "stylelint-high-performance-animation", "stylelint-declaration-strict-value", "stylelint-order" ], "rules": { "selector-no-qualifying-type": [ true, { "ignore": [ "attribute" ] } ], "plugin/no-low-performance-animation-properties": [ true, { "ignoreProperties": [ "color", "background-color", "box-shadow" ] } ], "indentation": "tab", "order/order": [ "custom-properties", "declarations" ], "order/properties-alphabetical-order": null, "declaration-block-no-duplicate-custom-properties": true, "declaration-empty-line-before": null, "scale-unlimited/declaration-strict-value": [ [ "/color$/", "z-index", "font-size" ] ], "scss/dollar-variable-pattern": "^[a-z][a-zA-Z0-9]+$", "max-nesting-depth": 3, "selector-pseudo-class-no-unknown": null } } Links
    • https://github.com/stylelint/awesome-stylelint
    • JSLint
    • JSHint
    • ESLint
    • 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

    React 18 - A Look Ahead Jul 14, 2021
    Show notes

    In this episode of Syntax, Scott and Wes talk about everything coming in React 18!

    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.

    RevenueCat - Sponsor

    RevenueCat makes it easy to build and manage iOS and Android in-app purchases. With a few lines of code, RevenueCat provides IAP infrastructure, customer analytics, data integrations, and gives you time back from dealing with edge cases and updates across the platforms. Created by developers, for developers, thousands of the world’s best apps use RevenueCat to power their in-app purchases and subscriptions. Get started for free at revenuecat.com.

    Show Notes

    04:32 - Automatic Batching

    • Don’t worry about re-renders

    08:32 - New Render API

    const root = ReactDOM.createRoot(document.getElementById('root')); root.render();
    • No more hydrate method (yay!)

    10:44 - Suspense

    • Suspense is basically a promise resolver component - nothing inside will render until promise is resolved.
    • SuspenseList lets you coordinate the order in which loading indicators show up.

    16:43 - StrictEffects Mode

    • https://github.com/reactwg/react-18/discussions/19
    • Will allow components to mount, unmount, and mount again
    • Will help with fastrefresh and really good dev experience

    18:43 - useTransition() Hook

    • Not an animation hook. They named it this because of the future ability to add animations to React core.
    • Wrap the state update in a “transition” to prevent the ProfilePage from being unmounted while suspending. This lets React know that it should wait for the update to complete.
    • We classify state updates in two categories:
      • Urgent updates reflect direct interaction, like typing, hover, dragging, etc.
      • Transition updates transition the UI from one view to another.

    23:11 - SSR Improvements

    • React.Lazy will work on the Server
    • Finally!
    • https://github.com/reactwg/react-18/discussions/37
    • Server-side rendering (abbreviated to “SSR” in this post) lets you generate HTML from React components on the server, and send that HTML to your users. SSR lets your users see the page’s content before your JavaScript bundle loads and runs.
    • React Server Components

    34:45 - ELI5

    • https://github.com/reactwg/react-18/discussions/46

    36:37 - Next.js

    • Next.js will probably have support for a lot of these features soon.
    Links
    • https://reactjs.org/blog/2021/06/08/the-plan-for-react-18.html
    • https://dev.to/cassidoo/react-18-alpha-is-out-now-what-2apj
    • https://github.com/reactwg/react-18
    • https://github.com/reactwg/react-18/discussions
    • Svelte
    • Syntax 127: Hasty Treat - React Suspense
    • Deno
    ××× SIIIIICK ××× PIIIICKS ×××
    • Scott: SoundSource App
    • Wes: The Changelog 443: Exploring Deno Land
    Shameless Plugs
    • Scott: Building Svelte Components - 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
    • Scott’s Twitter
    • Make sure to include @SyntaxFM in your tweets

    Hasty Treat - Vite + Parcel 2 Jul 12, 2021
    Show notes

    In this Hasty Treat, Scott and Wes talk about modern build tools, comparisons between them, and makes them modern and next-level.

    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:08 - Next Gen Bundlers are here!

    • They are easy
    • They are fast
    • They are bundlers
    • They are code splitters
    • They are dev environments
    • HMR / Fast Refresh

    07:13 - What do they use under the hood?

    • Parcel uses SWC (Rust)
    • Vite uses esbuild (Go)

    10:29 - How do you use them?

    1. Usually point your app at an HTML file
    2. Your HTML file has an ES module
    3. It then goes and loads everything from there
    4. They have adaptors for different types of files
      • CSS
      • Images
      • Etc.
    • You can also point it directly at files

    14:59 - Common use-cases

    • React / JSX
      • OOTB
    • Vue
    • Svelte
    • TypeScript
      • Both just work
    • Custom Babel config
      • Plugins for both
    • Sass
      • Vite: Detects it, asks to install it
      • Parcel: Detects it, installs it for you
    • PostCSS Processors

    20:29 - Custom API

    • Both have a custom API or “plugins”, which you can integrate into your app or tooling if needed.
    • Example use-case: a really nice WordPress dev package.

    20:57 - Which one?

    • Both are really good!
    • Parcel 2 has been in dev for 2+ years - unsure when it will launch.
    • Wes: In my experience Vite “just works” a bit better. Might be a side effect of Parcel being in dev.
    • Both are wicked fast. (Wes: I literally screen recorded JS and CSS updates ~ 10 ms difference either way.)
    • Life is good!
    Links
    • Top Chef
    • Master Chef
    • Snowpack
    • Webpack
    • Parcel
    • SWC
    • Vite
    • esbuild
    • Rollup
    • SvelteKit
    • Strapi
    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 66 67 68 69 70 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