Dev Tools Power — Elements Tab
Syntax - Tasty Web Development Treats30 Jun 2021

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

Episoder(970)

842: There's Python in my JavaScript! with Andrea Giammarchi

842: There's Python in my JavaScript! with Andrea Giammarchi

Scott and Wes talk with Andrea Giammarchi (aka WebReflection) about his projects, including LinkDOM and PyScript, and the exciting future of running Python in the browser via WebAssembly. Show Notes 00:00 Welcome to Syntax! 01:04 Andrea’s background and early work LinkDOM 07:25 Brought to you by Sentry.io 09:56 Pyscript 14:31 Why run Python in the browser? 20:17 Using WebAssembly to run different languages in JS 23:33 The advantages of WebAssembly 25:55 What excites Andrea about WASM Proposal: ESX as core JS feature 31:10 What is WASI? 32:21 Andrea’s experience with IOT and microcontrollers 35:35 How can the JS ecosystem be improved? 38:07 Should we have reactivity in the browser? Signals 41:06 Andrea’s thoughts on server-side APIs 43:43 Andrea’s thoughts on TypeScript 49:13 Sick Picks & Shameless Plugs Sick Picks Andrea: ESP32 Shameless Plugs Andrea: Andrea’s X / Twitter 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

1 Nov 202453min

841: Spooky Web Dev Horror Stories - PART 2

841: Spooky Web Dev Horror Stories - PART 2

Scott and Wes continue to share hair-raising developer horror stories submitted by listeners. From accidentally severing access to crucial databases to a limitless coupon code that cost millions, these tales will have you on the edge of your seat. Tune in for more wild mishaps, close calls, and hard-learned lessons from the dark side of coding. You won’t want to miss this second round of spooky web dev stories! Show Notes 00:00 Welcome to Syntax! 00:49 Brought to you by Sentry.io. 01:32 ‘Monkey Business’ 03:21 ‘Spooky Integration Bug’ 06:25 ‘Worst Case Wake Up’ 08:57 ‘Severed Trunk and Missing Backups’ 11:21 ‘Brute Force Too Brutal’ 12:30 ‘A Dorm Room Bee Movie’ 15:46 ‘No Goats’ 16:45 ‘Pokémon Problems’ 18:08 ‘Late Night’ 22:21 ‘Bootcamp Bungle’ 26:19 ‘Film School F*** Up’ 30:26 ‘AWS Clusterf***’ 31:26 ‘Limitless Coupon Disaster’ Episode #451, Episode #609. 33:55 ‘Ruined Vacation’ 35:47 ‘Console.swear’ 37:28 ‘Another Coupon Disaster’ 40:46 ‘The Doctor’ Wes’ Burner List. 43:01 ‘Marketing Nightmare’ 45:10 What did we learn this year? 45:12 You need processes. 48:42 Ask for help. 49:44 Dry-run queries + soft delete. 51:14 Code reviews. Episode #830. 52:11 Version control. 53:58 Sick Picks + Shameless Plugs. Sick Picks Scott: Nobody Wants This. Wes: Truffle Hot Sauce. Shameless Plugs Scott: syntax.fm. Wes: syntax.fm/spooky. 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

30 Okt 202458min

840: Spooky Web Dev Horror Stories - PART 1

840: Spooky Web Dev Horror Stories - PART 1

Scott and Wes unpack the spookiest web dev stories submitted by listeners in this episode. From forgotten MX records to infinite loops, these real-life coding horrors will have you double-checking your WHERE clauses and git backups. Show Notes 00:00 Welcome to Syntax! 00:39 Brought to you by Sentry.io. 00:48 What is Spooky Stories? Submit a story. 02:45 ‘Needs a Coffee’ 04:43 ‘Deleting Github’ Defunkt X Post. 07:42 ‘Rejected’ 09:08 ‘Infinite Loop’ 09:26 ‘MySqueeel Horror’ 11:02 ‘Pet Company’ 12:09 ‘Git Corrupted’ 12:57 ‘Circular Horror’ 14:25 ‘The Haunting of the Forgotten MX Records’ 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

28 Okt 202417min

839: Prisma ORM: Local First, Typed SQL Queries and Serverless with Søren Bramer Schmidt

839: Prisma ORM: Local First, Typed SQL Queries and Serverless with Søren Bramer Schmidt

Scott and Wes talk with Søren Bramer Schmidt, Founder and CEO of Prisma, about database best practices, including the latest developments in serverless, local-first, and typed SQL solutions. Show Notes 00:00 Welcome to Syntax! 02:55 Søren’s thoughts on GraphQL 03:53 Brought to you by Sentry.io 06:57 Common database mistakes 08:52 Prisma’s stability and user experience 10:42 Typed SQL and advanced querying Announcing TypedSQL: Make your raw SQL queries type-safe with Prisma ORM Prisma Optimize 20:47 Serverless challenges and solutions Prisma Accelerate 27:11 Cloudflare’s potential to dethrone AWS 29:13 Prisma and local-first development Prisma & Expo: A Better Path to Local-First Apps | App.js Conf 2024 35:30 Making local-first development mainstream 40:10 Challenges with async 42:43 Søren’s thoughts on Drizzle 43:41 Søren’s favorite database 47:21 The read your writes problem 48:58 Prisma hosted Postgres 51:44 Sick Picks & Shameless Plugs Sick Picks Søren: Cursor Shameless Plugs Søren: 1: Prisma Optimize 2: Prisma Postgres (coming soon) 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

25 Okt 202454min

838: Productivity Tools for Web Developers

838: Productivity Tools for Web Developers

Get your productivity game on point! Scott and Wes serve up the best tools for web developers, covering everything from password managers and to-do apps to mind-mapping tools and little scripts that make life easier. Plus, find out what snippet managers they swear by and how they keep their email under control. Show Notes 00:00 Welcome to Syntax! 03:01 Brought to you by Sentry.io. 03:44 Syntax meetup San Francisco. 04:26 Breakdancing update. Kid Cruz Instagram. 05:18 Password management. 1Password. 08:30 Apple stomping on apps. 09:50 To-do applications. Things. Getting Things Done. Tweek. 18:18 To-do in code. Todo Tree. Better Comments. 20:21 Snippets. 25:55 Mind-mapping. MindNode. FigJam. 29:01 Note-taking. Obsidian. Stashpad. ObservableHQ. Jupyter. 36:34 Little scripts. Script Kit. 39:50 Email. Superhuman. 48:11 Some honorable mentions. Habitpath.io. Focus. 52:10 Sick Picks + Shameless Plugs. Sick Picks Scott: The Legend of SwordQuest. Wes: The Economics of Everyday Things. 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

23 Okt 202454min

837: You Should Drop Express and Try Hono

837: You Should Drop Express and Try Hono

CJ joins Scott and Wes to dive into why he’s all-in on Hono, a fast and lightweight web framework for every JavaScript runtime. From familiar route creation to type-safe middleware, find out how Hono keeps things simple, powerful, and ready to use inside Next.js. Show Notes 00:00 Welcome to Syntax! 00:46 Brought to you by Sentry.io. 01:11 What is Hono? Watch CJ’s Video Here 03:21 Syntax Meetup San Francisco. 04:02 Why I like Hono, and why you should try it. 04:08 Familiar route creation. Connect: an extensible HTTP server framework for node. 05:45 Supports every JS Runtime. 07:00 How a service worker works. 08:48 Helpers. 09:16 Middleware. 10:40 Sentry middleware. 10:55 JSX support. 13:21 Organizing route handlers while keeping Types. 14:24 Type safety. hono-open-api-starter. zod-openapi. 15:46 Defining base type. Pinojs 17:36 Validation. 18:52 Hono RPC client. 22:09 Hono inside of Next.js. 23:30 Testing. 25:22 The community. 27:34 Type support. 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

21 Okt 202429min

836: Real Talk on Web Accessibility with Marcy Sutton Todd

836: Real Talk on Web Accessibility with Marcy Sutton Todd

18 Okt 20241h 6min

835: How to Pick a JavaScript Framework

835: How to Pick a JavaScript Framework

Do you really need a framework? Scott and Wes bring on CJ to break down when frameworks like Vue, Svelte, and Astro are worth it—and when they might just add complexity. They dive into everything from rendering strategies to auth solutions, deployment options, and how to choose the right tool for the job. Show Notes 00:00 Welcome to Syntax! 01:32 Brought to you by Sentry.io. 03:17 What is a framework? Syntax Meetup San Francisco. 08:21 Examples of frameworks for Vue, Svelte and Angular. 12:39 What questions do you need to answer? 12:44 What or where do you need to ship? 14:12 How do you render it? 18:22 Where are you deploying it? 24:03 How do you store data? 24:09 Existing API. 26:03 Integrated server. 26:22 Database. Supabase. 26:59 Does it have RPC or server actions? 34:27 Do you need authentication? 38:45 Auth packages. LuciaJS. Lucia announcement. Lucia preview. NPM Arctic Oauth. Auth utilities. Better-Auth. Scott’s Drop-In Auth. 42:10 Does it include email? 42:52 What does the TypeScript story look like? 43:32 How does it handle images? 44:35 How do we work with CSS? 46:02 How long has it been around? 47:37 How mature is the ecosystem? 48:35 Is there community support? 50:21 Portability. 51:18 Hiring. 52:17 Sick Pick + Shameless Plugs. Sick Picks CJ: Infinite Health. Scott: USB A to C adapters. Wes: Citric Acid. 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

16 Okt 202458min

Populært innen Politikk og nyheter

giver-og-gjengen-vg
aftenpodden
aftenpodden-usa
forklart
popradet
stopp-verden
fotballpodden-2
nokon-ma-ga
dine-penger-pengeradet
det-store-bildet
lydartikler-fra-aftenposten
rss-gukild-johaug
aftenbla-bla
hanna-de-heldige
bt-dokumentar-2
frokostshowet-pa-p5
unitedno
rss-ness
e24-podden
grasoner-den-nye-kalde-krigen