Logo
    Search

    svelte

    Explore "svelte" with insightful episodes like "726: Is HTMX a Joke?", "Svelte UI: The JS Framework Shaping Tomorrow's Web Development", "686: We Need Your Help With The Secret Sauce", "Our Predictions for 2023" and "React use() hook and Async Server Components Proposal" from podcasts like ""Syntax - Tasty Web Development Treats", "Programming Tech Brief By HackerNoon", "Syntax - Tasty Web Development Treats", "Syntax - Tasty Web Development Treats" and "Syntax - Tasty Web Development Treats"" and more!

    Episodes (18)

    726: Is HTMX a Joke?

    726: Is HTMX a Joke?

    Scott and Wes unravel the mysteries of HTMX, exploring the essentials for getting started, its powerful capabilities, limitations, and possible stacks for building primarily server rendered applications.

    Show Notes

    • 00:00 Welcome
    • 02:07 Brought to you by Sentry.io
    • 02:53 What exactly is HTMX?
    • 04:30 What you need to know before working in HTMX.
      • 04:35 You need a server.
      • 05:35 You’ll most likely need a templating engine.
      • 06:42 You most likely do not need as much client-side JS.
      • 08:33 You don’t work in JSON
      • 11:15 Not something you can swap out your UI with in a SPA.
      • 11:48 Brings back AJAX
    • 13:32 So, what can it do?
    • 15:20 And what it doesn’t do.
      • 18:25 It doesn’t do server-side responses.
    • 19:09 What about animations?
    • 19:20 What about CSS?
    • 19:57 What about Web Components?
    • 20:06 What about third-party client-side JS?
    • 20:18 What about WebSockets and SSE?
    • HTMX WebSockets
    • 20:30 What about extensions?
    • HTMX Extensions
    • 21:00 Wes’ “bomb” question.
    • 24:16 What Scott likes about HTMX.
    • 25:45 What Scott doesn’t like about HTMX.
    • HTMX Multi-Swap
    • 30:33 Hype, Meta Framework.
    • Hype

    Hit us up on Socials!

    Syntax: X Instagram Tiktok LinkedIn Threads

    Wes: X Instagram Tiktok LinkedIn Threads

    Scott: X Instagram Tiktok LinkedIn Threads

    Randy: X Instagram YouTube Threads

    Svelte UI: The JS Framework Shaping Tomorrow's Web Development

    Svelte UI: The JS Framework Shaping Tomorrow's Web Development

    This story was originally published on HackerNoon at: https://hackernoon.com/svelte-ui-the-js-framework-shaping-tomorrows-web-development.
    In an evolving world of web development, making the most suitable choice of UI frameworks can greatly impact the efficiency and quality of your applications.
    Check more stories related to programming at: https://hackernoon.com/c/programming. You can also check exclusive content about #javascript-development, #svelte-framework, #frontend, #web-dev-tools, #svelte, #ui-frameworks, #web-development-trends, #programming-languages, and more.

    This story was written by: @myname1. Learn more about this writer by checking @myname1's about page, and for more stories, please visit hackernoon.com.

    Svelte, a modern JavaScript UI framework, has emerged as a powerful contender thanks to its unique architecture and ease of use. Uniquely designed, Svelte compiles your code to efficient, imperative code that directly updates the DOM, stepping away from the more traditional Virtual DOM employed by other JavaScript frameworks.

    686: We Need Your Help With The Secret Sauce

    Our Predictions for 2023

    Our Predictions for 2023

    In this episode of Syntax, Wes and Scott talk about their predictions in web development for 2023.

    Show Notes

    • 00:07 Welcome
    • 01:25 SSR JS sites more the norm
    • 03:32 React doing forms
    • 05:39 TypeScript Inferred becomes hot
    • 08:11 Deno gets hotter
    • 12:51 JS Runtimes Mature
    • HTMX
    • 15:00 We will see a new TS Type Checker written in Rust
    • 19:20 New JS APIs
    • 23:37 Writing towards Winter CG Spec Popular. “Worker Ready” script
    • STC
    • 27:05 A new JS framework
    • SolidJS
    • Qwik
    • 29:44 Page Transitions API
    • 32:40 Scott was right / Scotts gonna be right
    • 34:06 Rust becomes more Popular
    • 36:00 React Beta Docs launch after 5 year dev cycle
    • 37:45 CSS Container Queries in Production
    • 41:07 Svelte and Sveltekit Glow Up
    • 43:38 CSS Subgrid
    • 49:19 WASM
    • 51:51 AI
    • Open AI
    • 53:16 Houdini
    • 54:30 People souring on React, Eslint
    • 57:47 Machine learning
    • 01:08 SIIIIICK ××× PIIIICKS ×××

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    Tweet us your tasty treats

    React use() hook and Async Server Components Proposal

    React use() hook and Async Server Components Proposal

    In this Hasty Treat, Scott and Wes talk about the new proposal for React, what the basics of it are, why it’s being proposed, and some benefits and issues it brings up.

    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.

    Auth0 - Sponsor

    Auth0 is the easiest way for developers to add authentication and secure their applications. They provides features like user management, multi-factor authentication, and you can even enable users to login with device biometrics with something like their fingerprint. Not to mention, Auth0 has SDKs for your favorite frameworks like React, Next.js, and Node/Express. Make sure to sign up for a free account and give Auth0 a try with the link below. https://a0.to/syntax

    Show Notes

    Tweet us your tasty treats

    Supper Club × Open Table LIVE SHOW

    Supper Club × Open Table LIVE SHOW

    In this supper club episode of Syntax, Wes and Scott recorded a live open table episode with guests calling in to talk about Wasm, building Riverside.fm, home networking, getting a job at Microsoft, Svelte and Sveltekit, htmx, and more!

    Auth0 - Sponsor

    Auth0 is the easiest way for developers to add authentication and secure their applications. They provides features like user management, multi-factor authentication, and you can even enable users to login with device biometrics with something like their fingerprint. Not to mention, Auth0 has SDKs for your favorite frameworks like React, Next.js, and Node/Express. Make sure to sign up for a free account and give Auth0 a try with the link below. https://a0.to/syntax

    Appwrite - Sponsor

    Appwrite is a self-hosted backend-as-a-service platform that provides developers with all the core APIs required to build any application. Get free cloud credits by signing up for early access to the Appwrite Cloud launch!

    Show Notes

    Tweet us your tasty treats

    Supper Club × Rich Harris, Author of Svelte

    Supper Club × Rich Harris, Author of Svelte

    In this supper club episode of Syntax, Wes and Scott talk with the author of Svelte, Rich Harris, about what influenced the creation of Svelte, his thoughts on web components, the virtual DOM, why companies are switching to Svelte, and what’s next for Svelte.

    Gatsby - Sponsor

    Today’s episode was sponsored by Gatsby, the fastest frontend for the headless web. Gatsby is the framework of choice for content-rich sites backed by a headless CMS as its GraphQL data layer makes it straightforward to source website content from anywhere. Gatsby’s opinionated, React-based framework makes the hardest parts of building a performant website simpler. Visit gatsby.dev/syntax to get your first Gatsby site up in minutes and experience the speed. ⚡️

    Lightstep Incident Response - Sponsor

    Streamline on-call, collaboration, incident management, and automation with a free 30-day trial of Lightstep Incident Response, built on ServiceNow. Usage-based pricing on active services promotes collaboration across your entire team to build a culture of service ownership. Listeners of Syntax will also receive a free Lightstep Incident Response T-shirt after firing an alert or incident.

    Pay for the services you use, not the number of people on your team with Lightstep Incident Response, built on ServiceNow. Streamline on-call, collaboration, incident management, and automation with a free 30-day trial. Fire an alert or incident today and receive a free Lightstep Incident Response t-shirt.

    Show Notes

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    Tweet us your tasty treats

    2022 Predictions

    2022 Predictions

    In this episode of Syntax, Wes and Scott talk through their predictions for 2022.

    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.

    Hashnode - Sponsor

    Everything you need to start blogging as a developer. Own your content, share ideas, and connect with the global dev community! Hashnode is a free developer blogging platform that allows you to publish articles on your own domain and helps you stay connected with a global developer community.

    Hashnode: Everything you need to start blogging as a developer!

    Freshbooks - Sponsor

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

    Show Notes

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    Tweet us your tasty treats

    2021 In Review

    2021 In Review

    In this episode of Syntax, Scott and Wes review their predictions and highlights for 2021.

    .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".

    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

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    Tweet us your tasty treats

    How To Do Things In Svelte

    How To Do Things In Svelte

    In this Hasty Treat, Wes and Scott talk about how to do things in Svelte.

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

    Tweet us your tasty treats

    From React To SvelteKit

    From React To SvelteKit

    In this episode of Syntax, Scott talks with Wes about moving Level Up Tutorials from React to SvelteKit — why he did it, how, benefits, things to watch out for, 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:28 - Thoughts

    • Apples to oranges, so unfortunately, no super legit ability to compare.
      • SvelteKit isn’t analogous with a custom React setup that uses CSR
        • SSR is usually going to be faster - we can ship less JS
        • Some big things changed beyond React → SvelteKit
        • HLS starts grabbing chunks immediately, so it’s hard to get accurate load time and transfer.
    • Whole conversion took a couple of months.
    • Hardest part was making UI choices and changes, straight up converting components one by one wasn’t actually that tough

    16:14 - Converting React components to Svelte

    • useState becomes just a straight-up variable
    • Graphql calls were hooks now just imported generated functions
    • Remove extranous fragments
    • Convert {things && } to {#if thing}{/if}
    •  becomes 

    24:06 - Spark joys

    • State
      • Our checkout flow became way more transparent, way easier with Svelte stores
    • Render flow
      • Was never something we needed to really think about. Didn’t think about memoizing, or worrying about too many renders down the line, just never needed to
    • Overall developer experience
      • It’s honestly a joy to work in and I don’t want to go back
    • Making a library
    • Creating a sitemap was extremely easy, because of server-side routes. file.returnformat.ts ie sitemap.xml.ts
    • CSS without a css-in-js library for scoping is a dream. CSS props are now 100% via CSS variables using the https://svelte.dev/docs#style_props
    • Animations are all done with Svelte’s internal animations lib

    32:45 - Hosting

    • adapter-node
    • Hosted on render.com as a straight-up node process $7/m for more than enough RAM and CPU,
    • Lots of other options for static, Vercel, workers whatever, I like having just a straight-up node app you can host anywhere

    35:50 - Things to do

    • Admin tools

    37:00 - Challenges

    • ESM is not always smooth sailin
      • Import has from ‘lodash/has’ didn’t working in dev, but import has from ‘lodash/has.js’ didn’t work in prod.
        • Solution was to use lodash.has as the dependency
        • Apollo included all React as a dep unless you import from @core
    • TS is great, but there was once where I wanted to define the entire props ts object for a spread prop, but was not possible
    • Drag animations

    Cloudinary

    42:46 - Wes’ questions

    • What about the ecosystem?
    • What about forms + DOM data?
    • Serverless functions?
    • Do you always bind to state? Or just access directly?
     formData = writable({   title: "yo" })  {$formData.title}    

    Links

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    Tweet us your tasty treats!

    ShopTalk x Syntax

    ShopTalk x Syntax

    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

    ××× SIIIIICK ××× PIIIICKS ×××

    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!

    Potluck - Svelte × Bleeding-Edge Tech × Git Process × Screencasts × Government Jobs × Permissions-Based APIs × Rescript × More!

    Potluck - Svelte × Bleeding-Edge Tech × Git Process × Screencasts × Government Jobs × Permissions-Based APIs × Rescript × More!

    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

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    Tweet us your tasty treats!

    Potluck - Frameworks vs Libraries × Debugging × CSS Modules vs Styled Components × Resumes × Stress Management × More!

    Potluck - Frameworks vs Libraries × Debugging × CSS Modules vs Styled Components × Resumes × Stress Management × More!

    It’s another potluck! In this episode, Scott and Wes answer your questions about frameworks vs libraries, improving your debugging skills, building a component library, CSS modules vs styled components, writing a good resume, stress management, and more!

    Sanity - Sponsor

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

    Sentry - Sponsor

    If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.

    Show Notes

    01:27 - How do you implement WebRTC? Please tell us more about online streaming, screen sharing, data flow.

    03:20 - Which JS library/framework do you think beginners might find the easiest to understand?

    05:06 - How do you deal with different case types between different systems in your project? For example, I store records in a Postgres database which typically uses snake_case and then I render them with React, where props are typically camelCase. Is it better to convert the cases back and forth between frontend and backend or just pick one case and use it everywhere?

    09:23 - My question is about the difference between a framework and a library. Should we have two separate words?

    12:39 - How can I work on improving both my generic problem-solving skills and my debugging skills? I feel like there have got to be some more proactive things I can do to improve in these areas.

    17:22 - I just listened to your podcast on making freelancing easier and enjoyed it. You talk about making your own component library. Do you have tips on how to store and manage a component library?

    21:39 - What projects do you use Rust for, and do you have any ideas where Rust might be the thing to do when talking web projects?

    29:10 - I’ve recently joined a great-paying full-time gig at a big enterprise-level company as a Senior Javascript Engineer (React, Node, etc). I’m humbled to be here - but at times the pace is slow, tickets are scarce, and I feel like I’m not able to really utilize or hone my skillset. I’ve been looking at potentially moving into contracting/agency work - the money seems comparable with the added benefit of new and exciting projects and having more control over them. Do you think contract work would be more fulfilling, or is crazy to leave a cushy job solely because I’m in a sense, bored?

    35:26 - I’m currently working on a Next.js project and trying to decide which CSS system to use. What is your take on CSS modules? I know you like styled components a lot, but since there is built-in support for CSS modules with scoped CSS, I find it hard to motivate bringing in styled components. Am I missing something?

    38:15 - Regarding Episode 290, you fielded a question regarding Angular and I appreciated your balanced response since I’m primarily an Angular developer at my job. If you could, would you please update the link to the Angular website to point to Angular.io (v10) instead of the AngularJS (v1) website?

    40:43 - I really need advice on how to write a good resume, or any tips you may have for getting noticed in the hiring process with only a couple years of experience. I have been applying to many jobs as a front-end developer but I seem to get no response EVER.

    47:17 - How do I dynamically assign subdomain/wildcard/slug dynamically during signup process with React and Node? (Like the way Freshbooks does — i.e tenant1.domain.comtenant2.domain.com, etc.)

    48:44 - Wes, I’ve been taking your Mastering Gatsby course, and I’m loving the course so far. My only complaint would be I wish you added a module for CSS. I think it's just because I personally struggle with styling websites. Do either of you have any suggestions on how I can improve in that aspect of web dev?

    50:35 - For web developers just starting out in freelancing/building e-commerce sites — from a business perspective, do you recommend we first 1) just code and worry about business stuff later? or 2) go through the government paperwork and be a sole proprietorship? or 3) incorporate (though this costs more)?

    54:20 - What’s your approach for handling padding + margin with components?

    57:43 - How do you back up sensitive files that do NOT get added to source control (env files, for example)? I have off-site computer backups, and I have .env files on a small thumb drive on my keychain. What do you do?

    59:56 - Do you guys have stress management techniques? How do you cope with stressful situations at work, like unexpected tight deadlines?

    Links

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    • Scott: Animating Svelte - Black Friday Sale: Sign up for the year and save 50%!
    • Wes: Master Gatsby - Black Friday Sale: All courses 50% off!

    Tweet us your tasty treats!

    Scott Teaches Wes Svelte and Sapper

    Scott Teaches Wes Svelte and Sapper

    In this episode of Syntax, Scott teaches Wes about Svelte and Sapper — general premise, best practices, and more!

    Sanity - Sponsor

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

    Stackbit - Sponsor

    Stackbit offers developers tools that enable things like inline content editing, live previewing of content changes, and collaboration features on your Jamstack site, without code changes. That's why Stackbit is the best way to Jamstack. stackbit.com

    Show Notes

    03:14 - General premise

    • Sapper compiles away, removing framework code from build
    • Component & Props based
    • Easy reactivity
    • Built-in tools like animation
    • Template-based

    07:57 - Svelte 101

    • .svelte files
    • Files can include
         

      The answer is {answer}

      20:08 - Template logic

      • If statements
        {#if user._id}
        {/if}

      • Loops
        {#each cats as kittens}

      • Promise tags

       {#await promise}     

      ...waiting

      {:then number}

      The number is {number}

      {:catch error}

      {error.message}

      {/await}

      23:12 - Events

      • On directive
      • Functions can also be inline
      • Modifiers
         

      26:11 - Baked-in goodies

      • Animation
      • Dimensions
       
      {text}
      • Lifecycle methods
      • Advanced State Via Stores
        • A store is simply an object with a subscribe method that allows interested parties to be notified whenever the store value changes.
      • import { writable } from ‘svelte/store’;
      • export const count = writable(0);
      • count.update(0)
      • Slots
      • React helmet like stuff, ie

      36:39 - Sapper

      • Similar to Next.js
      • Folder routes
      • Static export with all of the good stuff like service workers and preloading

      Links

      ××× SIIIIICK ××× PIIIICKS ×××

      Shameless Plugs

      Tweet us your tasty treats!

    Hasty Treat - Scott's New Personal Website

    Hasty Treat - Scott's New Personal Website

    In this Hasty Treat, Scott and Wes talk about Scott’s new website!

    Sentry - Sponsor

    If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.

    Show Notes

    02:25 - Relaxed fit development

    • Not concerned with it being perfect
    • Will act as a loose digital garden, so it needs to be flexible
    • Keep my talks and podcast appearances somewhere

    04:40 - The stack

    • Svelte / Sapper
    • CSS variables
    • Static generation with markdown
    • No API
    • Hosted on Netlify

    08:15 - Why?

    • I dropped that db life in 2015 and never looked back
    • I’m a developer - markdown is good for me
    • I like a playground for ideas, so the new site throws out any idea of formality and dives into being a playground for myself.
    • Full page animations. Orchestration. Fully SSG.
    • Code is painless to add to — adding a blog post is as easy as creating a markdown file

    Links

    Tweet us your tasty treats!

    Hasty Treat - Abstraction

    Hasty Treat - Abstraction

    In this Hasty Treat, Scott and Wes talk about abstraction in general as well as javascript programming.

    LogRocket - Sponsor

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

    Show Notes

    1:48 - What the heck is abstraction?

    • I like to think of it as sweeping under the rug
    • Vue and React devs should be very familiar with the concept

    4:44 - When to abstract

    • When things are getting too heavy
    • Personal preference
    • Some people have an arbitrary line limit

    7:25 - When not to abstract

    • When savings are minimal
    • When it just adds a pointless layer

    9:40 - Personal code abstractions vs public

    • My personal focus is on API simplicity and baked-in smart defaults
    • More specific
    • Public APIs need to be more flexible or at least for some components

    Links

    Tweet us your tasty treats!

    Practical: How would we build Airbnb, Twitter, or Reddit?

    Practical: How would we build Airbnb, Twitter, or Reddit?

    In this episode, Scott and Wes are trying something new! It’s called Practical, in which Scott and Wes take a topic and flesh out all the theory into something super practical. Today’s topic comes from a listener question asking how they would build a simple version of a modern web app like Twitter, Reddit, or Airbnb.

    Netlify - Sponsor

    Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up netlify.com/syntax for more info.

    Sanity - Sponsor

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

    Show Notes

    3:03 - Backend

    14:45 - Frontend

    • React
    • Next.js
    • Styled components
    • Stay as close to real CSS as possible

    22:39 - Deployment process

    • Serverless
    • Now
    • Ideally one app that handles everything

    28:38 - Email

    33:32 - Users / Auth / Cookies / Permissions

    • Use something a pre-existing package or service rather than role your own (though it can get expensive quickly)
    • Passport
    • Auth0
    • accounts-js

    38:48 - Images

    41:50 - Other things to be aware of

    Links

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    Tweet us your tasty treats!