Syntax - Tasty Web Development Treats

In this Hasty Treat, Scott and Wes talk about modern build tools, comparisons between them, and makes them modern and next-level. 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. 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:08 - Next Gen Bundlers are here! They are easy They are fast They are bundlers They are code splitters They are dev environments HMR / Fast Refresh 07:13 - What do they use under the hood? Parcel uses SWC (Rust) Vite uses esbuild (Go) 10:29 - How do you use them? Usually point your app at an HTML file Your HTML file has an ES module It then goes and loads everything from there They have adaptors for different types of files CSS Images Etc. You can also point it directly at files 14:59 - Common use-cases React / JSX OOTB Vue Svelte TypeScript Both just work Custom Babel config Plugins for both Sass Vite: Detects it, asks to install it Parcel: Detects it, installs it for you PostCSS Processors 20:29 - Custom API Both have a custom API or “plugins”, which you can integrate into your app or tooling if needed. Example use-case: a really nice WordPress dev package. 20:57 - Which one? Both are really good! Parcel 2 has been in dev for 2+ years - unsure when it will launch. Wes: In my experience Vite “just works” a bit better. Might be a side effect of Parcel being in dev. Both are wicked fast. (Wes: I literally screen recorded JS and CSS updates ~ 10 ms difference either way.) Life is good! Links Top Chef Master Chef Snowpack Webpack Parcel SWC Vite esbuild Rollup SvelteKit Strapi 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

12 Heinä 202125min

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

7 Heinä 20211h 2min

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

5 Heinä 202125min

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

30 Kesä 202151min

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

28 Kesä 202125min

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

23 Kesä 20211h 2min

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

21 Kesä 202117min

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

16 Kesä 202159min