Logo
    Search

    web development tools

    Explore "web development tools" with insightful episodes like "719: Fullstack TypeScript Apps with No Build Step?! with Brian LeRoux", "Potluck × JR Devs & Copilot × CSS Variable Limitations × SvelteKit", "JavaScript in 2022", "Potluck - Sass × Houdini × No JS? × Solid Project × First Dev Job Tips × Bartering × DRM × Dev Laptops × Databases × Frontity × More!" and "Dev Tools Power — Elements Tab" from podcasts like ""Syntax - Tasty Web Development Treats", "Syntax - Tasty Web Development Treats", "Syntax - Tasty Web Development Treats", "Syntax - Tasty Web Development Treats" and "Syntax - Tasty Web Development Treats"" and more!

    Episodes (5)

    719: Fullstack TypeScript Apps with No Build Step?! with Brian LeRoux

    719: Fullstack TypeScript Apps with No Build Step?! with Brian LeRoux

    Wes and Scott talk with Brian LeRoux about not using a bundler, handling TypeScript, live reloading, Enhance being a meta framework, how Enhance handles CSS, his experience at AWS: Reinvent, and the state of JavaScript run times in 2024.

    Show Notes

    Sick Picks

    Shameless Plugs

    Hit us up on Socials!

    Syntax: X Instagram Tiktok LinkedIn Threads

    Wes: X Instagram Tiktok LinkedIn Threads

    Scott:X Instagram Tiktok LinkedIn Threads

    Potluck × JR Devs & Copilot × CSS Variable Limitations × SvelteKit

    Potluck × JR Devs & Copilot × CSS Variable Limitations × SvelteKit

    In this potluck episode of Syntax, Wes and Scott answer your questions about not becoming dependent on Copilot, CSS variable limitations, finding Sick Picks, lodash hate, and more!

    Show Notes

    • 00:11 Welcome
    • 00:55 Ice, ice baby
    • 02:01 Reactathon
    • Reactathon returns May 2-3, 2023
    • The edge cloud platform behind the best of the web | Fastly
    • 04:49 Submit your question for our next potluck
    • 05:24 How do you suggest adding form / database to Svelte?
    • Svelte • Cybernetically enhanced web apps
    • Astro
    • 08:18 What can’t go into a CSS custom prop?
    • 12:42 Are there any really good certifications for Javascript or general full stack development?
    • 16:21 What is the most exciting thing about teaching programming for both of you?
    • 19:37 What is the most challenging thing you have ever overcome in this field?
    • 21:55 How can junior to mid-level devs make the most out of GitHub Copilot while avoiding getting dependent on it and hurting their abilities in the long run?
    • 26:23 Any tips on driving a culture of code quality in a team?
    • 30:28 How soon should Sentry be brought into a new project being built from scratch?
    • 33:11 Is there a place where I can search through all the Sick Picks?
    • Syntax Sick Picks
    • 34:40 Why is box-sizing: border-box; not the default?
    • 37:51 Is using lodash in a NextJS web application a terrible idea nowadays?
    • 40:42 What is the best practice for storing JWT token?
    • 43:53 Any tips on converting ajax requests to use Fetch API?
    • patch-package - npm
    • 45:11 Any suggestions for tips for updating a very dated React Native codebase?
    • 50:56 SIIIIICK ××× PIIIICKS ×××

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    Tweet us your tasty treats

    JavaScript in 2022

    JavaScript in 2022

    In this episode of Syntax, Wes and Scott look at the the Web Almanac’s report on the role of JavaScript on the web in 2022.

    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

    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.

    Freshbooks - Sponsor

    Get a 30 day free trial of Freshbooks at freshbooks.com/syntax

    Show Notes

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    Tweet us your tasty treats

    Potluck - Sass × Houdini × No JS? × Solid Project × First Dev Job Tips × Bartering × DRM × Dev Laptops × Databases × Frontity × More!

    Potluck - Sass × Houdini × No JS? × Solid Project × First Dev Job Tips × Bartering × DRM × Dev Laptops × Databases × Frontity × More!

    It’s another Potluck! In this episode, Scott and Wes answer your questions about Sass, Houdini, JS requirements, tips for your first dev job, dev laptops, databases, Frontity, 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.

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

    02:35 - What are the use cases of SASS/SCSS in 2021? Would you still choose it over CSS (or something else?) in a new project?

    05:26 - What ever happened to CSS Houdini?

    08:49 - With all these JS being transferred, have you ever tried to challenge yourself to build a project that doesn’t involve any JS (in the front end alone); (e.g. just HTML+CSS)? I find it funny how I can pretty much use amazon.com with JS disabled, but I literally cannot view the angular docs if I disable it.

    11:40 - As we all know, Tim Berners-Lee made the web. Apparently, after seeing everyone’s data getting harvested by tech companies, he decided to make a project called Solid (https://solidproject.org/) that allows people to own their data and control all permissions to it. So if a user logs into your app with Solid, rather than storing their info on your server, you’d store it in their Solid Pod. Do you think this could save both Web developers’ conscience and disk space in the cloud?

    15:47 - I am about to start my first developer job. What practices can I start to really get off on the right foot and lay down a foundation for a successful career?

    18:57 - Have you guys ever used your dev skills to trade for other goods or services? For instance, helping out an auto mechanic with their website in exchange for brake service on your car or creating a site for a barbershop traded for free haircuts for a year. If so, how do you go about starting that conversation?

    22:14 - What’s your take on DRM? Have you implemented/integrated something like Widevine in any of your platforms/projects? How does one go about doing such a thing? I can’t seem to find any good docs on that. I personally can relate as to why it’s there, but end up hating it anyways. I recently found out that Prime Video only allows SD(sub HD) content on Linux and it had something to do with the Widevine DRM they employ. I got outraged and eventually canceled my subscription!

    29:35 - Have you seen the Framework laptop and, if so, what are your thoughts for web development? I’m a lifelong Mac user but the idea of a higher repairable laptop running Linux (I personally can’t do Windows) sounds like an amazing step forward for consumers.

    32:53 - I know that you both like MongoDB and so do I. But sometimes all these queries to database, especially aggregations gets messy, aren’t they? Prisma has now support for MongoDB. What do you think? Is it a tool that will make requesting MongoDB much easier?

    37:02 - Hey guys, been diving into Svelte a bit recently and had a question about using it with GraphQL. As I recall Scott once deemed React Typescript GraphQL CodeGen “the promised land” and since then I tried it out and have found it awesome. However, I’ve been debating moving a larger personal project from React to Svelte. I see that there is plugin for graphql-codegen-svelte-apollo but with my limited knowledge of Svelte find it hard to decipher if the development experience would be as streamlined. I am wondering if you could shed some light on the developer experience of working with GraphQL in Svelte in Typescript.

    40:58 - Do y’all have any thoughts about Frontity for WordPress? I swear I’m not a plant for Frontity, but I stumbled upon it today and I’m trying to evaluate it vs. other solutions like Next.js for use in a headless WordPress setup. Would love your thoughts if you have any!

    43:40 - Call me weird, but I kind of like fiddling around with webpack configs. I just like the level of control I have here. That being said, is webpack going to die now that the “better” tools out there mature? Or do you think we might see a webpack v6 with esbuild under the hood that makes it compete with Parcel, Vite, Snowpack in terms of speed?

    Links

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    Tweet us your tasty treats!

    Dev Tools Power — Elements Tab

    Dev Tools Power — Elements Tab

    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

    43:39 - Compatibility

    Links

    ××× SIIIIICK ××× PIIIICKS ×××

    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!