Potluck - JS × Web Components × Security × They took our jobs!
Syntax - Tasty Web Development Treats26 Syys 2018

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? Yes! Get tickets at JAMstack_conf 4:31 - What are your thoughts on Flutter? Does React Native have some solid competition now? Google’s answer to React Native. Flutter NativeScript 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? Not cool. Always do server-side validation. Netlify Cloudflare 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? Consistency and accountability. The best way to get good. 100 Days of Code 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? Syntax Ep 50 - Progressive Web Apps 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? Web Components Polymer Svelte 49:52 - How soon the designers replace React Developers with the invent of tools like Framer X? Not soon. Your job is changing and will continually change SouthPark - They Took Our Jobs! 56:52 - Have you, or anyone you know ever thought of quitting the industry because of difficulties you have run into? ××× SIIIIICK ××× PIIIICKS ××× Scott: EGO Lawn Tools Wes: B is for Build YouTube Channel Shameless Plugs Scott’s Level Up Pro Subscription Wes’ Advanced React Course 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

Jaksot(964)

860: Module Federation Microfrontends with ByteDance’s Zack Jackson

860: Module Federation Microfrontends with ByteDance’s Zack Jackson

Wes and Scott talk with Zack Jackson about Module Federation, and the innovative ways it streamlines collaboration across large teams and complex applications. Zack also dives into simplifying microfrontends, optimizing builds with Rspack, and his work at ByteDance. Show Notes 00:00 Welcome to Syntax! 00:48 Zach background and role at ByteDance 03:10 ByteDance’s web and native apps How ByteDance Became the World’s Most Valuable Startup Lynx ByteDance GitHub Coze Lark MarsCode 06:48 What is Module Federation? Zephyr Cloud 15:49 Evolution from V1 to V2 of Module Federation 24:47 When to consider Module Federation 29:46 How would you publish a utils package in Module Federation? 32:59 How would you do a major upgrade? 36:36 Brought to you by Sentry.io 37:01 Who owns the update process? 39:40 Handling multiple frameworks 42:10 ModernJS and Meta frameworks ModernJS Rspress 47:20 Does ByteDance have its own JavaScript runtime? NAPI 50:02 Why Zack built Rspack Rspack Rsbuild 58:15 The future of Rspack and custom bundlers Unpack 01:04:24 Module Federation’s major features 01:07:29 Sick Picks & Shameless Plugs Shameless Plugs Zack: Zephyr Cloud Midscene.js 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

13 Joulu 20241h 10min

859: Streaming Video in 2025

859: Streaming Video in 2025

Scott and Wes break down the tech behind video streaming for the web, from transcoding and variants to CDN and access control. They also share insights on tools like Mux, Cloudflare Stream, and ffmpeg, plus tips for managing bandwidth, hosting, and costs. Show Notes 00:00 Welcome to Syntax! 00:50 Brought to you by Sentry.io. 01:15 The history of video streaming. 02:10 How video streaming works: The Tech. 03:54 How video streaming works: Transcoding. 06:37 How video streaming works: Variants. ffmpeg. Wes’ R2-video-streaming. Wes’ Transcoding. YT-DL. YT-DLP. 13:13 Dynamic ad insertion. 14:29 Bandwidth and hosting. Mux. 18:03 Cloudflare. 19:13 The costs. Wes Bos Tweet Cloudflare TOS. Steve Tenuto tweet. 25:39 Media players. Media Chrome. 29:42 CDN. 32:04 Access control. 33:35 Solutions. Mux. Cloudflare Stream. Bunny.net Stream AWS Media Convert. Cloudinary. Bitmovin. 41:55 Some other features. 45:47 Sick Picks & Shameless Plugs. Sick Picks Scott: Anker MagGo. Wes: PolyCapture. Shameless Plugs Scott: Syntax on YouTube. 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

11 Joulu 202451min

858: How to Go Deeper With Your Learning

858: How to Go Deeper With Your Learning

Want to level up your web dev game? Scott and Wes share their top tips for going deeper with your learning—covering everything from reading the docs and source code to finding mentorship and engaging with the community. Show Notes 00:00 Welcome to Syntax! 02:48 Brought to you by Sentry.io. 03:54 How do you go deeper? 04:23 Pick a project and build it. 06:36 Read the docs. Svelte Docs. 09:07 Read the source. 11:19 Consume content: blogs, conference talks, etc. Dot Conferences on YouTube. GitNation JavaScript Conferences. 16:24 Discord and Reddit. 19:31 Get mentorship and ask questions. 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

9 Joulu 202424min

857: How to Look and Sound Good at $10, $100 and $1000 With Producer Randy

857: How to Look and Sound Good at $10, $100 and $1000 With Producer Randy

Wes and Scott talk with Syntax Producer Randy Rektor. From mastering mic technique to lighting hacks and choosing the right camera, they discuss the best ways to upgrade your audio and video setup on any budget. Show Notes 00:00 Welcome to Syntax! 03:01 Brought to you by Sentry.io 04:14 Understanding signal-to-noise ratio 06:48 Using de-noise iZotope Voice De-noise 09:12 The importance of mic technique 10:28 Dealing with electrical noise 11:15 The proximity effect 13:01 Sound treatment vs sound proofing Sound Wavelength Calculator Syntax 516: Wes’ New Soundproof Office Studiobricks Randy’s Studiobricks video GIK Acoustics 23:33 Do egg crates work for sound treatment? 25:22 USB mics vs XLR mics Shure MV6 Syntax 845: Are Companies Hiring? State of the Dev Job Market With Taylor Desseyn 27:06 Video composition 30:18 How to improve your lighting 35:37 Choosing the right camera 36:58 The importance of codecs and bitrates 38:14 What to look for in a webcam 38:50 Randy’s packages for $50, $150 and $500-$1000 budgets 40:02 The $50 package/selecting your mic Feelworld PM1 Fifine K688 heyday Stone White Desktop Mic 43:53 The $150 package Neewer lights 45:32 The $500-$1000 package Shure MV6 Insta360 Link 2 Insta360 Link 2c Elgato Cam Link 4k Sonay a6000 51:07 Mic stand recommendations VIVO 56:50 Sick picks & Shameless Plugs Sick Picks Randy: etymologynerd on TikTok Shameless Plugs Randy: Randy’s YouTube Channel 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

6 Joulu 202458min

856: Loading UIs, Rust Webpack, New Cookie Types, Conference Talks + More

856: Loading UIs, Rust Webpack, New Cookie Types, Conference Talks + More

Scott and Wes dive into your questions on Hono and SvelteKit, partitioned cookies, redirect codes, and using Rspack instead of Vite. Plus, they share insights on quoting projects, interview best practices, and whether you should slow down those speedy loading spinners. Show Notes 00:00 Welcome to Syntax! 00:50 Brought to you by Sentry.io. 02:23 Apple developer accounts and certificates. 06:58 Hono, SvelteKit, and using them together. 11:14 Rspack & Rsbuild over Vite? Rspack, Rsbuild. Rolldown, Rollup. oxc. Turborepo. 21:01 Quoting projects without seeing under the hood. 25:26 HTTP cookies, partitioned cookies, and chips. Partitioned Cookies. 30:29 Redirect codes; 301, 302, 303, 307 418 I’m a teapot. 36:22 Gaining inspiration for talks and posts. 40:02 My loading state is too fast! Should I use setTimeout? setTimeout Docs. 42:29 Interviews and landing the job. 49:50 Sick Picks & Shameless Plugs. Sick Picks Scott: Stainless Steel Cookware. Wes: Dim Lightbulbs, steelpan.guy on TikTok. Shameless Plugs Scott: Potluck Submissions. Wes: Syntax on YouTube. 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

4 Joulu 202456min

855: Fast Websites: The New Speculation Rules API

855: Fast Websites: The New Speculation Rules API

Scott and Wes dive into the Speculation Rules API and why it’s a game-changer for building blazing-fast websites. They break down how pre-loading, prefetching, and pre-connecting work together to boost performance while weighing the costs for both users and developers. Show Notes 00:00 Welcome to Syntax! 00:49 Pre-loading, prefetching, and pre-connecting. CSS Wizardy. CSS Wizardy on GitHub. 02:06 Brought to you by Sentry.io. 03:16 Benefits of pre-loading, prefetching, and pre-connecting? 07:02 The Speculation Rules API. mdn web docs. 08:20 Isn’t that expensive? 08:53 Eagerness of the Speculation Rules API. 09:55 What is the cost for the site? 14:42 What is the cost for the user? 15:49 Next Master. Next Master. 18:07 The current prevalence. 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

2 Joulu 202424min

854: Animating the Web With Matt Perry: Exploring motion.dev

854: Animating the Web With Matt Perry: Exploring motion.dev

Wes and Scott talk with Matt Perry, the creator of Motion (formerly Framer Motion). Matt discusses building intuitive tools, transitioning Motion to open source, and the future of web animation. Show Notes 00:00 Welcome to Syntax! 01:15 The Framer Motion story Motion 05:16 What’s the status of Framer Motion today? 09:08 What tech is Motion built on? 13:40 Is Motion entirely WAAPI? 16:06 Why hasn’t the Web Animation API gained more traction? 17:46 Does Matt design his demos? 19:25 Performance and testing 25:34 Brought to you by Sentry.io 28:10 Have other animation libraries influenced Motion? Svelte GSAP Anime.js 31:49 Micro-Optimizations in JS 36:02 How do you test frame rates? 38:03 Graphics programming and shaders Maxime Heckel Maxime’s blog 39:58 What is the future of Motion? 41:42 What’s the difference between layout animations and the Vue Transition API? 46:35 Sick Picks & Shameless Plugs Sick Picks Matt: Grime music P Money Ghetts Shameless Plugs Matt: Motion.dev Sponsor Motion 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

29 Marras 202450min

853: The State of Frontend

853: The State of Frontend

Scott and Wes dive into the State of Frontend 2024 Survey, breaking down the latest trends, tools, and frameworks shaping the developer ecosystem. Tune in as they react to hot takes on frameworks, state management, hosting, and what’s next for frontend devs! Show Notes 00:00 Welcome to Syntax! 00:53 Brought to you by Sentry.io. 01:15 About the survey. Follow along! State of Frontend Survey 02:10 Frameworks. 06:15 Rendering frameworks. 07:35 State management. 09:14 Other libraries. Just: Dependency-free Utilities. 13:34 Data. Syntax Episode 453. Syntax Episode 833. 16:39 Hosting. AWS Amplify. 19:51 Continuous Integration. 21:30 Micro-frontends. 23:25 Package Managers. pnpm Link Workspace Packages. Corepack. 28:35 JS Runtimes. 29:47 Typescript. 33:13 Browser Technologies. 35:05 What is app property? 38:20 Progressive Web Apps. 40:11 Styling tools. 43:17 Testing. 45:39 Code editors. 49:02 Build tools. 49:17 Linting tools. 50:26 Operating systems. 51:17 The future trends. 54:14 Sick Picks + Shameless Plugs. Sick Picks Scott: Candle Warmer. Wes: Flighty iOS App. Shameless Plugs Scott: Syntax on Bluesky 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

27 Marras 20241h

Suosittua kategoriassa Politiikka ja uutiset

rss-ootsa-kuullut-tasta
aikalisa
tervo-halme
ootsa-kuullut-tasta-2
politiikan-puskaradio
viisupodi
rss-podme-livebox
et-sa-noin-voi-sanoo-esittaa
rss-vaalirankkurit-podcast
otetaan-yhdet
aihe
linda-maria
the-ulkopolitist
rss-polikulaari-humanisti-vastaa-ja-muut-ts-podcastit
rss-hyvaa-huomenta-bryssel
radio-antro
rss-valiokunta
rss-kaikki-paskaksi-ystavat
rss-kuka-mina-olen
rss-tasta-on-kyse-ivan-puopolo-verkkouutiset