Logo
    Search

    webcomponents

    Explore "webcomponents" with insightful episodes like "Supper Club × Solid.js with Ryan Carniato", "Supper Club × Rich Harris, Author of Svelte", "Potluck - Web components × Gear × Docker × Web Dev Frameworks × Golden Handcuffs × Browser Testing × SSR React × Code Prediction × More!", "The Surprisingly Exciting World of HTML Elements" and "Potluck - JS × Web Components × Security × They took our jobs!" 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)

    Supper Club × Solid.js with Ryan Carniato

    Supper Club × Solid.js with Ryan Carniato

    In this supper club episode of Syntax, Wes and Scott talk with Ryan Carniato about Solid.JS, SolidStart, how web components work with Solid, why he chose JSX, and what the future of Solid is.

    Show Notes

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    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

    Potluck - Web components × Gear × Docker × Web Dev Frameworks × Golden Handcuffs × Browser Testing × SSR React × Code Prediction × More!

    Potluck - Web components × Gear × Docker × Web Dev Frameworks × Golden Handcuffs × Browser Testing × SSR React × Code Prediction × More!

    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

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    Tweet us your tasty treats!

    The Surprisingly Exciting World of HTML Elements

    The Surprisingly Exciting World of HTML Elements

    In this episode of Syntax, Scott and Wes talk about HTML — interesting HTML elements, things you might not know, wish lists for the future, 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

    02:34 - What is semantic HTML?

    • What is the content? HTML should describe the content first and foremost.

    04:04 - Why semantic HTML?

    • Accessibility
    • SEO
    • Styling is easier
    • HTML tags that have meaning:
      • Almost all of them
      • Common ones:
          • /
            and
          • to

      20:04 - Structural / Layout tags

        • You can have more than one header
        • Header cannot be in a footer / address / header

      26:18 - Some fun ones you might not know

      • /
      • and strike?
      • / /
        • A ruby annotation is a small extra text, attached to the main text to indicate the pronunciation or meaning of the corresponding characters.
      • and
        • While is used to convey how much work in a task has been completed, the element is used to display a measurement on a known scale. This could be something like the current disk usage on your computer, or a temperature measurement (within a defined range).

      32:12 - Visual vs Semantic tags

      • Almost all tags in HTML are semantic
      • vs and vs
        • and are NOT deprecated like many have said
        • The element is for content that is of greater importance, while the element is used to draw attention to text without indicating that it's more important.

      35:40 - HTML tags with no meaning:

      37:51 - Some elements have special functionality or styling

      • and tag
      • +

      40:59 - What elements would we like to see?

      • Modal element
      • Textarea that grows with content
      • Animated accordion
      • A better table
        • One that works with grid/flex/modern CSS, auto-sizing, max/min widths
      • From Twitter:
        • VirtualList
        • Carousel - HOT DRAMA
        • Date range
        • Hero
        • tag that figured its level out by itself. Useful for components that can go anywhere
        • Icon tag
        • Cookie banner
        •   tag that shows HTML elements without encoding 
          • You can kinda do this with display block on script and style tags
             

      ××× SIIIIICK ××× PIIIICKS ×××

      Shameless Plugs

      Tweet us your tasty treats!

       

      Potluck - JS × Web Components × Security × They took our jobs!

      Potluck - JS × Web Components × Security × They took our jobs!

      It’s another potluck episode in which Wes and Scott answer your questions! This month - all things JS, go-to dev stacks, website security and the ever-changing nature of development.

      Mlab - Sponsor

      mLab is the leading Database-as-a-Service for MongoDB, powering over half a million deployments worldwide. Wes and Scott use mLab to host their own databases as well as take care of backups, security, scaling and performance. Try out a sandbox database on your next mongoDB project → https://mlab.com.

      Sanity.io - Sponsor

      Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get up and running by typing npm i -g @sanity/cli && sanity init in your command line. Get an awesome supercharged free developer plan on sanity.io/syntax.

      Show Notes

      3:33 - Would you ever consider doing a live Syntax show?

      4:31 - What are your thoughts on Flutter? Does React Native have some solid competition now?

      9:43 - What are your website security essentials for static and dynamic sites? What’s the deal with forms? Is it bad to put a form on my site with no server-side validation?

      14:55 - Do you have a ‘go-to’ stack when building new web apps? If so, what is it and how would you go about choosing the right stack for the project?

      • Scott - Gatsby for sites / Meteor Apollo, React, MongoDB for db needing accounts sites
      • Wes - Next.js, Express Backend + either MongoDB, DiskDB or Prisma (or hasura)

      21:51 - What are your thoughts on 100 Days of Code Challenge?

      25:05 - I really have been learning a lot of React recently and have been wondering what is the difference between Next.js, Gatsby.js and vanilla React?

      • Dynamic vs static. What are your needs, how often does the content change.

      • Next.js

        • Use for dynamic needs
        • It can do static exports too
        • Convert to markdown
        • Nothing special other than Routing and SSR (Server request getInitialProps)
      • Gatsby.js

        • Use for static needs
        • Gatsby has lots of adapters

      30:38 - What are websockets and when should they be used?

      • A request that is always open - it responds to events instead of pinging, pushing or pulling data

      35:15 - I would love to hear your take on PWAs. Do either of you have any experience with building or using them?

      40:16 - I’m a nervous newbie who’s concerned about doing a web app that accepts payments or sensitive information. How can I know I’ve done everything to create a secure website and also protect myself from being sued by the client if their website gets hacked? I’m trying to be a jam stack developer so I’m looking at things like Snipcart and Stripe

      • Don’t save sensitive info in plain text. Use services that make it tough to do that until you are confident.
      • Look up PIPEDIA

      43:23 - What is a JavaScript generator? I heard that async/await creates a “generator” under the hood.

      • Pausable function that can return multiple values - call .next() on it

      46:54 - Are web components worth it in 2018?

      49:52 - How soon the designers replace React Developers with the invent of tools like Framer X?

      56:52 - Have you, or anyone you know ever thought of quitting the industry because of difficulties you have run into?

      ××× SIIIIICK ××× PIIIICKS ×××

      Shameless Plugs

      Tweet us your tasty treats!