In this Hasty Treat, Scott and Wes take Matt Busche’s suggestion and talk all about bookmarklets and scripts to modify or manipulate web pages. MagicBell - Sponsor  MagicBell is the the notification inbox for your product. Add a MagicBell to your product for announcements, billing, workflow, and other notifications. The free plan supports up to 100 Monthly Active Users - use the coupon code SYNTAXFM for 10% off the first 12 months. NAME - Sponsor COPY HERE  Show Notes   00:25 Welcome  02:02 What are bookmarklets?   Matt Busche’s fav bookmarklets Gist  Bookmarklet Maker  CSS Tricks - Web Development Bookmarklets  04:49 Using an Immediately invoked function expression  09:22 Greasemonkey  Greasemonkey   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 

Bookmarklets

Full Stack Developers Wes Bos and Scott Tolinski dive deep into web development topics, explaining how they work and talking about their own experiences. They cover from JavaScript frameworks like React, to the latest advancements in CSS to simplifying web tooling.

Technology

Tech News

Podcasting

Gadgets

Software How-To

News

Join Scott and Wes as they dish out the juiciest VSCode secrets for coding like a boss (or a Tolinski)! From speedy navigation to must-have extensions and the sickest themes, get ready to level up your coding game. Show Notes   00:00 Welcome to Syntax!  00:47 Brought to you by Sentry.io.  01:44 A recording bug.  03:18 VSCode versions.  05:59 Tabs or no tabs.  10:32 Navigation tips.  11:35 Mouse and trackpad input.  13:43 Move, select and expand by  19:07 Interface tips.  19:17 Sidebars.  24:23 Sticky headers.  26:21 Activity bar.  30:30 Show or hide?  31:35 Profiles.  32:43 Keyboard Shortcuts.  32:49 Renaming.  34:32 Extensions.   34:45  Text pastry.  36:43  Better comments.  39:03  Auto rename tag.  40:02  Change case.  40:25  Permute lines.  41:26  File utils.  43:20  Sort JSON objects.  43:50  SQLite viewer.  44:29  Spell checker.  45:42  APC.    49:19 Themes.   Syntax Theme  53:05 Final tricks.   Log Wrapper  57:44 What about the AI stuff?  01:00:10 Sick Picks & Shameless Plugs.   Sick Picks   Scott: Flicker Free Ultra Definition Phillips Bulbs.  Wes: Clear Shoe Box Organizers.   Shameless Plugs   Scott: Syntax Newsletter.   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

760: Pro VSCode Setups

 Scott and Wes serve up top tools and tricks for rapid idea execution, from JavaScript services like Valtown and Observable to database solutions including LowDB and Google Sheets integration. Get ready to streamline your development ideation process with these tasty insights! Show Notes   00:00 Welcome to Syntax!  02:16 Brought to you by Sentry.io.  03:14 JavaScript Services.   03:43 Valtown.  05:44 Observable.  06:35 Notebooks.  08:23 Deno Juypter Notebooks.  09:51 Svelte Repl.  10:32 Playgrounds: TypeScript, Tailwind, etc…    11:05 CSS Services.   11:10 CodePen.    13:14 Full stack services.  13:47 Your own stack. Hot Tips & Cool Treats.   Wes’s Hot Tips.  Scott’s Cool Treats.  21:01 Bun file routing.  24:25 Tooling and tips.    26:30 Database.   26:51 Write to a file.  27:40 LowDB.  29:00 SQLite + Drizzle.  29:40 Google Sheets.  30:06 Sheet DB.     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

759: How to Easily Explore Coding Ideas

Font Awesome is back with Web Awesome, an open source library of web components that will work with any framework because it’s based on standards. Today on Syntax we have Konnor Rogers and Cory LaViska here to talk all things Web Awesome. Show Notes   00:00 Welcome to Syntax!  00:47 Brought to you by Sentry.io.  02:49 What is Shoelace?  07:21 What is Font Awesome?  08:07 Font Awesome is getting into Web Components?  11:35 What is Shoelace’s relationship with Web Awesome?  13:33 Is the idea to make it quick to get up and running?  15:46 What is the autoloader?  16:29 Where does Web Awesome fit in the ecosystem?  18:13 What does the styling game look like?  20:33 What is Part in CSS?  CSS Part mdn web docs  22:06 The reason we’re so stoked with Web Components.  23:32 Custom elements are a natural progression.  24:51 What are your thoughts on Open UI initiatives?  Floating UI  Close Watcher  Can I Use  27:40 Wes’ escape key conundrum.  30:21 A bug on the Syntax site.  31:19 Let’s talk about  Kickstarter.  35:24 Do you know what premium inputs will be available in Web Awesome?  36:12 Rich text editor.  40:18 Setting goals.  41:48 Kickstarter giveaways.  42:47 Have you tried drag and drop?  Pragmatic Drag and Drop  44:57 The layout component.  48:50 What are your favorite components?  50:29 Sick Picks + Shameless Plugs.   Sick Picks   Konnor: Enhance.dev, Extism.org  Cory: Lit.dev   Shameless Plugs   Cory:  Kickstarter  Konnor: Everyone involved in open UI   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

758: Web Awesome with Konnor Rogers + Cory LaViska

 Scott and Wes serve up answers to community questions, from navigating Light DOM vs. Shadow DOM to diving into tools for data extraction. Plus, they dish out insights on Gatsby in 2024, utilizing JavaScript ‘wheel events’, and explore the possibilities of hosting a website at home. Show Notes   00:00 Welcome to Syntax!  00:51 Brought to you by Sentry.io.  01:17 When should I use Light DOM or Shadow DOM?  03:43 Do you know of any good tools for extracting data/content from Markup/HTML?  LinkeDOM on GitHub  08:29 Wanted to ask you guys your opinion on the state of Gatsby in 2024.  LocalFirst.fm   MeteorJS UI Updates  15:05 Please get the Goodhertz creator on the pod! Would be a great show.  Goodhertz Audio Software  16:34 Effects that involve the JavaScript ‘wheel’ event.  Runway.com  GSAP Animate Anything   CSS Scroll-Driven Animations  23:15 Best tool for rapidly creating UI from the ground up.  Episode 751  Thinkmill.com  27:44 Wes, what’s with your frame rate?  Frame Rate Testing Results on X  32:31 Is there any way to host a whole website setting on my PC at home?  CJ and Self-Host 101  Hetzner.com   Cloudflare Docs Create a Tunnel  36:52 Offline functionality like saving data and syncing data to database?  Episode 739  Local-First Web Development   Syntax Side Dish Explainer Playlist  39:41 Creating a GPT-like tool that can listen to long audio files.  OpenAI Speech to Text  Insanely Fast Whisper  Deepgram  43:51 Sick Picks.   Sick Picks   Scott: Hair Powder  Wes: Mini Grease Gun   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

757: Potluck: Is Gatsby Dead? Shadow Dom, AI Summaries, Self Hosting + More

 Scott and Wes chomp through CSS Mixins and Functions, discussing the latest features making their way into CSS. From Tailwind-like classes to fluid typography, join us as we explore the possibilities and practical applications of these new tools. Show Notes   00:00 Welcome to Syntax!  01:24 Brought to you by Sentry.io  03:00 CSS Is getting Functions and Mixins!  CSS Mixins and Functions Explainer   CSS Working Group Discussion  06:19 Functions and mixins, how are they different?  07:26 Don’t get hung up on the syntax, or maybe do.  09:12 CSS Functions.  12:02 Some use-cases.  15:58 CSS Mixins.  16:31 Tailwind-like classes.  17:53 Tailwind-like arbitrary syntax.  20:08 Fluid typography.  21:13 Let’s talk about logic.   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

Bookmarklets

Download our free app to listen on your phone