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:
    Syntax Highlight — We Review Your Portfolios Jul 07, 2021
    Show notes

    In this episode of Syntax, Scott and Wes review your portfolios!

    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

    03:59 - cudd.io

    • Shared component animation between home / about really nice
    • Readable, clear
    • Simple
    • Check the contrast ratio on the white text on light blue: https://coolors.co/contrast-checker/ffffff-56ccf2
    • Nice SSR from Next.js
    • CSS vars
    • Very tall cards without much text, looks like a mistake
    • Better on a short browser window - peep the tall and skinny
    • Card heading should be h3 or h4

    10:35 - damonbolesta.com

    • Nice design = super fun!
    • Good color palette
    • Shows your skills straight up
    • Animation
    • Not accessible - EASY fixes with Axe Dev Tools
    • Text on background images hard to read
    • White text on buttons
    • Bold some words in your bio
    • Border radius

    21:52 - walterkjenkins.com

    • Map is fun
    • Contrast issues with the color choices
    • Transparency not needed on body content
    • Cursive font for links / buttons is a no for me dog
    • Labels on social media icons
    • Hero overlaps section below it
    • Maps data processing should be h4

    29:40 - suhit.me

    • This is an example of a really good one
    • Wicked domain name
    • Design is ON POINT, like this is the type of polish I like to see - I’d hire on this
    • Can’t get enough Inter font
    • Fun little animation
    • I’d go a little easier on the box-shadow
    • Github even has a custom readme
    • Resume
      • Very modern - JS, TS, Bootstrap
      • TypeScript A+
      • Drop the “5” and “3” from “HTML” and “CSS”
      • I’d add color to the resume, its likely not printed
      • Don’t need to say Github and LinkedIn in front of the URLs

    37:20 - jacobpawlak.com

    • Initial loading is great - transitions are hot
    • Typography looks nice - not sure about those serif all-cap nav items
    • Slider not very usable
    • View circle on hover is cool, but I’m not sure about following your mouse, covers text
    • T-shirt portfolio is awesome
    • Fun little bits in the footer
    • SSL is broken - fix that sh!t
    • Links don’t show over background images - common issue today
    • External links should probably be indicated as such
    • HTML, paragraphs as h3 & h4, h5, should be

      - (i.e. “here are a few of my recently completed…” should be a

      )

    • Design of resume is KEY - different colors, eh?

    47:04 - mrtnvh.com

    • This is a good example of subtle flex of skills
    • FAST AF
    • Makes you say “Ohhhh” when you click a link (something that’s missing from a lot of these single page sites)
    • Personal Photo A+
    • Position sticky
    • Love the skills layout on the about page
    • Email is a button
      • I can’t copy your email
      • We have mailto links - don’t reinvent
    • A+
    Links
    • Top Chef
    • Syntax 354: The Surprisingly Exciting World of HTML Elements
    ××× SIIIIICK ××× PIIIICKS ×××
    • Scott: What Had Happened Was Podcast
    • Wes: WAGO Lever-Nuts
    Shameless Plugs
    • Scott: Building Svelte Components - 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 - JavaScript Event Buzzwords — Sync, Concurrent, Defer, Blocking, Workers Jul 05, 2021
    Show notes

    In this Hasty Treat, Scott and Wes define some JavaScript Buzzwords and talk about what they mean!

    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:24 - Synchronous / Async

    05:23 - Multi-threaded

    • JavaScript has a single “main thread”
    • But you can have more threads with web workers

    08:12 - Blocking

    • JavaScript can stop other things on the page from running
    • A script tag can block HTML from being parsed
    • Most stuff in JavaScript is non-blocking
    • Node.js write to filesystem can be blocking

    10:27 - Concurrent + Parallel

    • JavaScript start/stop are concurrent
    • The API runs on a different thread
    • Doesn’t REALLY matter
    • https://joearms.github.io/published/2013-04-05-concurrent-and-parallel-programming.html

    13:22 - Consecutive / Waterfall

    • One after another

    13:48 - Callback

    • A function to run when this thing happens or is done
    • Click event callback
    • Websocket on data callback
      • Like a tweet stream
    • Data fetch callback
      • Almost entirely replaced with async + await
    • http://callbackhell.com/
    • https://caolan.github.io/async/v3/

    17:56 - Script Tag Async + Defer

    • Doesn’t block other content
    • Runs when ready - doesn’t care about DOMcontentLoaded
    • Wait until the page is loaded before running
    • If the script tag is above content, don’t wait for it
    • Good for things that aren’t called on page load

    21:54 - Lazy

    • Load it in later - maybe when it’s scrolled into view, or as needed
    • Not mission-critical
    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

    Dev Tools Power — Elements Tab Jun 30, 2021
    Show notes

    In this episode of Syntax, Scott and Wes talk about the Dev Tools Elements Tab — all the features, and when you would use them!

    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.

    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:13 - Elements

    • Learn to open the Elements panel and the console right away — right-click inspect element is weak!
    • Drag-and-drop elements
    • Edit as HTML
    • Click to select use in JS console
      • $0 →
    • Add Attribute
    • Breadcrumbs
    • Flex (Chrome now!)
    • Break on → Node removal
    • Scroll into view
    • Expand / Collapse

    16:59 - Styles

    • :hov
    • .cls
    • Element style
    • Layout - Box Model
    • Layout - Grid
    • Layout - Flexbox
    • Toggle Print/Light/Dark

    25:03 - Panel

    • Escape to open close
    • No longer has to be JUST Console
    • Computed Styles
      • Great to find out what value it’s actually using without scrolling through the cascade
      • Toggle browser styles on and off
    • Fonts Tab
      • Super handy to find the used font, spacing, size, weight, etc.
      • You can also see all fonts used on a page
    • Animations Tab
    • Changes
      • Shows the CSS that has changed since you have been goofing around.

    38:18 - Settings

    • Show what’s new
    • https://chrome.google.com/webstore/detail/material-devtools-theme-c/jmefikbdhgocdjeejjnnepgnfkkbpgjo
    • Experiments

    43:39 - Compatibility

    Links
    • Firefox
    • Chrome Canary
    • Brave
    • Can I Use
    ××× SIIIIICK ××× PIIIICKS ×××
    • Scott: Problematic Roller Coasters
    • Wes: Scrapyard Finds! Repair-A-Thon! Cordless Tools Galore!
    Shameless Plugs
    • Scott: Svelte Kit - 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 - Seven Interesting JavaScript Proposals - Async Do, JSON Modules, Immutable Array Methods, and More! Jun 28, 2021
    Show notes

    In this Hasty Treat, Scott and Wes talk about seven new JavaScript proposals — what they do, where they’re at, and how you might use them.

    Deque - Sponsor

    Deque’s axe DevTools makes accessibility testing easy and doesn’t require special expertise. Find and fix issues while you code. Get started with a free trial of axe DevTools Pro at deque.com/syntax. No credit card needed.

    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:32 - Seven new JavaScript proposals

    • https://github.com/tc39/proposals

    06:25 - JSON Modules

    • https://github.com/tc39/proposal-json-modules
    • Builds on the import assertions
    • No named exports
    • Not executed, to avoid security issues
    • Not in Node yet

    09:55 - Array Find From Last

    • https://github.com/tc39/proposal-array-find-from-last
    • The problem: you need to group together async code.The only way to do that right now is to wrap it in a function.

    11:40 - Async Do

    • https://github.com/tc39/proposal-async-do-expressions
    • Async do will allow you to group together a block of code and mark it as async.
    • No need for an iife
    • Downside to this is that it’s a code block, so if you need to return any values, you’ll need to jump that up a scope level.
    Promise.all([ async do { let result = await fetch('thing A'); await result.json(); }, async do { let result = await fetch('thing B'); await result.json(); }, ]).then(([a, b]) => console.log([a, b]));

    14:33 - Change Array By Copy

    • https://github.com/tc39/proposal-change-array-by-copy
    • Like old array methods, but returns a new array rather than mutating

    17:48 - Temporal

    • https://github.com/tc39/proposal-temporal
    • Stage 3, looking good!
    • Amazing, large, very good Date API
    • Syntax 295: Hasty Treat — Temporal Date Objects in JavaScript

    18:35 - As Patterns

    • https://github.com/zkat/proposal-as-patterns
    • Scott don’t get it
    • Stage 0
    • when ([ ‘go’, (‘north’ | ‘east’ | ‘south’ | ‘west’) as dir ]) { … }

    20:47 - Pattern Matching

    • https://github.com/tc39/proposal-pattern-matching
    • VERY Rust-like
      • https://doc.rust-lang.org/1.6.0/book/patterns.html
    • Stage 1
    {props => match (props) { when ({ loading }) { ; } when ({ error }) { ; } when ({ data }) { ; } }} 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 - Web components × Gear × Docker × Web Dev Frameworks × Golden Handcuffs × Browser Testing × SSR React × Code Prediction × More! Jun 23, 2021
    Show notes

    It’s another Potluck! In this episode, Scott and Wes answer your questions about web components, gear, Docker, web dev frameworks, golden handcuffs, browser testing, SSR React, code prediction, 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.

    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

    04:08 - Is there a mechanism for exporting a React/Vue/Svelte component as a web component?

    11:42 - You guys chat a lot about your sweet gear and desk setups. As a newcomer to web development it’s all a little expensive for me to mimic what you have; at least before I’ve learned enough to justify investing in better equipment. My question is: what are the minimum specs (laptop/monitor/etc) you would recommend a beginner just starting out in webdev?

    22:35 - I rarely, if ever, hear you guys or any other web dev related podcast mentioned Python, Flask, Django etc. Do you have any experience with those frameworks and can you give any thoughts you may have on Python as a language for back end development.

    26:47 - What do you think of using Docker containers to do development work? I have seen a couple articles talking about it, but it doesn’t seem super common to use since few GitHub projects have Dockerfiles in their repos.

    32:19 - I’ve often heard you two talk about the idea of the “golden handcuffs”, where a job pays well, but the employees are miserable. I think I might be in that situation right now. I’ve tried organizing my day so my time is better segmented. I can’t tell if this is the natural progression of a developer advancing in their career and I just need to adjust better, or if I need to make a change. Any advice or tips you have to better manage time or decide what’s next would be much appreciated.

    37:28 - When it comes to desktop browser testing, is there a difference anymore is browser rendering engines? Do most (if not all) browsers use Google’s rendering engine?

    39:20 - As someone who got into the industry relatively recently (around 2019), component frameworks and single-page applications were my introduction to web development. I am now really interested in learning more about the “traditional” way of doing things, 100% server-rendered. What’s my recourse here? Ruby on Rails, Laravel, something else? Is there an agreed upon “modern” way to do a server-rendered monolithic app?

    43:43 - I wish to ask the kind of plug-in, extensions or stand-alone software you use for code prediction and to help you code faster. I personally use Kite and VS Code’s intellisense, it seems to get it wrong more times than right. Do both of you have any recommendation?

    47:18 - Is there any benefit to using prop types in TypeScript for React projects?

    48:14 - I’m currently planning to build an audio-focused app (maybe even more than one actually), and I’ve been wondering how you would solve the problem of storing and fetching (on-demand) hundreds, perhaps thousands, of little audio-files. I’ve got some deep reservations against AWS, although I’m somewhat familiar with it - the complexity, hidden (and hard to estimate) costs etc. I’m thinking about Digital Ocean or something like that. Would it be too hard to implement things like caching and such yourself. Any thoughts?

    Links
    • https://www.npmjs.com/package/react-to-webcomponent
    • https://medium.com/dev-channel/a-netflix-web-performance-case-study-c0bcde26a9d9
    • LearnNode.com
    • Transistor.fm
    ××× SIIIIICK ××× PIIIICKS ×××
    • Scott: A Death In Cryptoland Podcast
    • Wes: Affinity Designer
    Shameless Plugs
    • Scott: Svelte Kit - Sign up for the year and save 25%!
    • Wes: Beginner JavaScript Notes
    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 - CSRF Explained Jun 21, 2021
    Show notes

    In this Hasty Treat, Scott and Wes talk about CSRF (Cross Site Request Forgery)!

    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.

    Show Notes

    05:40 - What is it?

    • https://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html#samesite-cookie-attribute
    • Someone can submit a form FROM or TO your domain, automatically.

    07:50 - Solutions

    • SameSite Cookie
    • https://medium.com/swlh/secure-httponly-samesite-http-cookies-attributes-and-set-cookie-explained-fc3c753dfeb6
      • Lax — Default value in modern browsers. Cookies are allowed to be sent with top-level navigations and will be sent along with GET requests initiated by a third party website. The cookie is withheld on cross-site subrequests, such as calls to load images or frames, but is sent when a user navigates to the URL from an external site, such as by following a link.
      • Strict — As the name suggests, this is the option in which the Same-Site rule is applied strictly. Cookies will only be sent in a first-party context and not be sent along with requests initiated by third party websites. The browser sends the cookie only for same-site requests (that is, requests originating from the same site that set the cookie). If the request originated from a different URL than the current one, no cookies with the SameSite=Strict attribute are sent.
      • None — Cookies will be sent in all contexts, i.e sending cross-origin is allowed. The browser sends the cookie with both cross-site and same-site requests.
    • CSRF Token
    • Check Origin / Referrer Headers
    • Captcha
    • Ask for Password
    • Token
    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

    CSS Container Queries, Layers, Scoping and More with Miriam Suzanne Jun 16, 2021
    Show notes

    In this episode of Syntax, Scott and Wes talk with Miriam Suzanne about all things CSS — container queries, layers, scoping, 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.

    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.

    Guests
    • Miriam Suzanne
    Show Notes

    02:21 - When did you come on board with container queries?

    10:27 - How would you declare specificity?

    • Layer example:
    @layer default; @layer theme; @layer components; @import url(theme.css) layer(theme); @layer default { audio[controls] { display: block; } }

    13:08 - What is your background?

    18:20 - What are container queries?

    22:06 - What is the background on contain? How does it work?

    • https://developer.mozilla.org/en-US/docs/Web/CSS/contain

    29:25 - Is it still under development?

    • https://www.igalia.com/open-prioritization/index

    33:51 - Have you tried the EQ polyfill from Johnathan Neal yet?

    35:21 - How far out are we?

    38:10 - What is Scope?

    44:00 - How will MQ and CQ work together?

    45:49 - Do you use inline and block?

    48:44 - What browser do you use?

    Links
    • OddBird
    • Susy
    • Jonathan Neal
    • FireFox
    • Codepen
    • https://github.com/w3c/csswg-drafts
    • https://twitter.com/TerribleMia
    ××× SIIIIICK ××× PIIIICKS ×××
    • Scott: Reelgood
    • Wes: Embroidery machine
    Shameless Plugs
    • Miriam: OddBird
    • Scott:
      • 1: SvelteKit
      • 2: Level Up Tutorials Pro Spring Sale - 50% off annual subscriptions!
    • 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 - What is SvelteKit? Jun 14, 2021
    Show notes

    In this Hasty Treat, Scott and Wes talk about SvelteKit — what it is and why you might want to 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.

    LogRocket - Sponsor

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

    Show Notes

    03:28 - What is it?

    • Total platform for building Svelte apps
    • Built in Vite.js
      • Includes all of the Vite goodness but it hides behind the scenes for the most part
    • Host anywhere

    05:16 - Is it CSR, SSR, SSG, WTF?!

    • All of the above. Uses adapters to control the output:
    kit: { // hydrate the element in src/app.html target: '#svelte', adapter: adapter() }

    09:45 - What you get out of the box

    • File-based routing
    • API routes
    • Layouts and layout resets
    • Fancy file titles [slug] __layout
    • Code splitting & preloading
    • PostCSS
    • TypeScript support

    17:03 - Neat small things

    • Glob import
    • https://github.com/svelte-add/svelte-add
    Links
    • SvelteKit
    • Next.js
    • Gatsby.js
    • Sapper
    • tailwindcss
    • @chriscoyier
    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 - Immutability × Turning Off Your Brain × Types vs Interfaces × Hooks vs Components × Making the Most of Your First Job × Confidence in Svelte × More! Jun 09, 2021
    Show notes

    It’s another Potluck! In this episode, Scott and Wes answer your questions about immutability, turning off your brain, managing copy on a website, problem-solving, types vs interfaces, hooks vs components, 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.

    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.

    Coudinary - 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:24 - I’m finally getting onboard with the GraphQL train and have a specific question about nomenclature. Having worked with redux in the past, IMMUTABILITY was a concept ingrained in my head. I continue to see benefits of immutable updates across all sorts of libraries, frameworks, vanilla js, etc. Learning about GraphQL now, I’m taken aback by the fact that CUD (create, update, delete) operations are called MUTATIONS. Is there a reason that we use the “mutation” terminology, despite the fact that best practices dictate that we should implement immutable updates to objects? Does GraphQL actually mutate objects behind the scenes?

    06:38 - How do you sleep at night?!? I mean, how do you switch off your brain when you’re trying to go to sleep and your brain just wants to keep on coding?

    12:15 - How do you manage copy and microcopy on a site? Should you put every piece of text across the entire site into a CMS so the client can change it? Or just the parts you think may be updated in the future? Or do you just hard-code everything directly into the markup? Or collect it all into an importable JSON file?

    21:41 - I am new to using CMSs and I was wondering for applications that require a lot of content management where a CMS or headless CMS such as Contentful is ideal but also requires dynamic queries such as recommended content to the end-user based on browsing history. How do you approach integrating the user data in combination with the data being received and handled from the CMS? A separate API and database? Or is this a scenario that a CMS doesn’t fit?

    25:56 - When solving a problem, do you do it through trial and error? Or do you carefully think through every solution and choose the best one before actually implementing it into code?

    28:14 - How can we take advantage of this new partnership between 1Password + SecretHub! I feel like this is getting into DotEnv but sounds so much more interesting.

    32:34 - When creating types in TypeScript, when should someone use a type over an interface? While I generally understand the differences, it seems like interfaces offer more flexibility. I am struggling to understand why I would ever use a type.

    36:34 - I’ve recently started using TypeScript in React, and typically I’m just using function components. I’ve seen some people saying that classes are really great with TypeScript in React but I haven’t found any real use case/benefits myself yet. How about you guys, do you use classes in React/TypeScript?

    38:17 - What are your opinions on generators like Yeoman?

    44:26 - I’ve been looking for a career in web for a couple of years now and I’ve recently landed a job with a small agency getting paid hourly making WordPress websites, that I’ll be starting in two weeks. I’m worried that I’m going to get stuck pushing Divi sites all the time. I know this is a good opportunity for me but I was hoping you guys can shed some light and give me some tips on how I can put my skills to good use.

    48:35 - What are your approaches for caching a GraphQl API?

    52:30 - You mentioned in an earlier Potluck that Svelte is probably the easiest framework to learn. How confident can one be to start a new project with Svelte? Being a technical lead, can I propose our team to work with Svelte? Are there enough material/solution on the web and is the community established?

    Links
    • ZMA Supplement
    • Tina
    • https://twitter.com/gusfune/status/1372243283758419977
    • 1Password
    • SecretHub
    • TypeScript
    • Syntax 348: TypeScript Fundamentals — Getting a Bit Deeper
    • Syntax 042: Potluck EP × Vue.js × Headless WP × Typescript & Flow × Productivity × Server Side Rendering × Yeoman
    • https://www.npmjs.com/package/zx
    • Yeoman
    • Mercurius
    • Apollo
    • Svelte
    ××× SIIIIICK ××× PIIIICKS ×××
    • Scott: Contigo Shake & Go
    • Wes: Deli Containers
    Shameless Plugs
    • Scott:
      • 1: Become a Level Up Tutorials Author
      • 2: Level Up Tutorials Pro Spring Sale - 50% off annual subscriptions!
    • 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 - Making a Vaccine Bot with JavaScript Jun 07, 2021
    Show notes

    In this Hasty Treat, Scott and Wes talk about Wes’ experiment building a vaccine bot!

    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

    07:32 - First step

    • Finding the data. Open up dev tools.
    • Copy as Node.js Fetch in Chrome
    • Two ways to do this - Puppeteer, or raw requests, or a mix.

    11:03 - Variablizing it

    • Store IDs
    • Booking form IDs
    • Vaccine IDs

    12:56 - Finding out any restrictions

    • Is there a cookie?
    • Is there an XSRF?
    • Do these things change?
    • How often can you hit it?

    15:20 - Caching

    • Array variable

    16:59 - Delivering the notifications

    • Telegram
    Links
    • https://github.com/wesbos/vaxbot
    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 67 68 69 70 71 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