Logo
    Search

    Podcast Summary

    • Exploring the Power of Bookmarklets and Magic BellBookmarklets are underutilized tools for adding custom functionality to websites with a single click. Magic Bell is a real-time notification inbox that simplifies implementing notifications in applications, offering features like in-app, email, push, and Slack notifications, handling batch notifications, and avoiding duplicate notifications.

      Bookmarklets are a powerful and underutilized tool for web developers. They are small pieces of JavaScript code that can be saved as a bookmark in your web browser, allowing you to add custom functionality to websites with just one click. During this episode of Syntax, Wes, Barracuda, Boss, and Scott Talinsky discussed the use of bookmarklets and how they can be used to enhance the functionality of various web development tools. They also highlighted Magic Bell, a real-time notification inbox that solves the complexities of implementing notifications in applications. Magic Bell offers features like in-app notifications, email notifications, push notifications, and Slack notifications. It also helps in handling batch notifications and avoiding duplicate notifications. Magic Bell can be easily integrated into applications, and they offer a free plan for up to 100 MAUs (Monthly Active Users). The conversation started with a reminder of the importance of bookmarklets, which were once widely used tools for web development. Tools like Pinterest and Firebug were initially built as bookmarklets. Although they are not as popular today, they still offer a quick and easy way to add custom functionality to websites. So, whether you're looking to enhance your workflow, add unique behavior to your tools, or implement notifications in your application, bookmarklets and tools like Magic Bell can help you get the job done efficiently and effectively.

    • Bookmarklets: A Powerful but Underrated Tool for Running JavaScript on WebpagesBookmarklets are a simple way to run JavaScript code directly on webpages for tasks like checking for missing alt tags, finding duplicate IDs, or detecting duplicate script tags.

      Bookmarklets are a powerful tool for running JavaScript code directly on webpages. They were popular before the widespread use of browser extensions, and although their use has declined, they can still be useful for quick and easy scripting tasks. For example, you can use bookmarklets to check for missing alt tags on images, find duplicate IDs in the DOM, or detect duplicate script tags on a page. To create a bookmarklet, simply add JavaScript code before the hash symbol (#) in the URL of a bookmark. When you click the bookmark, the JavaScript code will run on the current webpage. While browser extensions and console scripts have largely replaced bookmarklets, they remain a useful tool for developers and power users looking to customize their browsing experience with quick scripts. Matt Bushey, who sent in this topic, emphasized their underrated usefulness and shared some common bookmarklets for finding images without alt tags, hiding Jira tickets, and more.

    • Modify webpage functionality with bookmarkletsCreate custom bookmarklets to run JavaScript code directly on webpages, changing their appearance or functionality without installing extensions

      A bookmarklet is a small piece of JavaScript code that can be saved as a bookmark in your web browser. This code runs directly on the webpage you're currently viewing, allowing you to modify the page's appearance or functionality without the need for extensions. For example, you could create a bookmarklet to remove unwanted elements from a webpage before printing, or to apply custom CSS styles. The advantage of using a bookmarklet over an extension is that it's simpler and more transparent, as you can read and edit the code yourself without installing anything. Additionally, bookmarklets can be useful for developers during testing and debugging, as they provide a quick way to run JavaScript code directly in the browser. So, the next time you encounter a website that frustrates you, remember that you have the power to change it with a little JavaScript and a bookmarklet.

    • Discover the Power of BookmarkletsBookmarklets are simple JavaScript codes that can be saved as bookmarks and run directly from a web browser's bookmark bar for tasks like activating design mode, applying backgrounds, and more.

      Bookmarklets are a simple yet powerful tool for running JavaScript code directly from a web browser's bookmark bar. Although they have fallen out of favor due to the declining use of bookmarks toolbars, they offer convenience and functionality for tasks such as activating design mode, applying backgrounds, simulating events, setting cookies, toggling classes, and even taking user input. To create a bookmarklet, you can use a bookmarklet maker like the one found on GitHub, which will generate the code for you and allow you to drag and drop it into your toolbar as an anchor link. Despite being a somewhat forgotten technique, bookmarklets can be incredibly useful for streamlining workflows and customizing web browsing experiences. The CSS Tricks post from March 28, 2022, highlights seven cool and useful bookmarklets, and it's worth checking out for more ideas on how to make the most of this versatile feature.

    • Customize your web browsing experience with bookmarklets and Greasemonkey scriptsEnhance your web browsing with JavaScript code snippets saved as bookmarks or running directly in the browser to modify layouts, add functionality, or adjust settings on websites.

      Bookmarklets and Greasemonkey scripts are powerful tools that allow users to customize and enhance their web browsing experience. Bookmarklets are small pieces of JavaScript code that can be saved as a bookmark and applied to any webpage. Greasemonkey scripts, on the other hand, are more robust and run directly in the browser, modifying the page every time it is loaded. Both tools offer endless possibilities for users to add functionality, change layouts, or adjust settings on websites. For instance, if you dislike the default YouTube player interface, there are Greasemonkey scripts that can add a larger pause button, more speed options, or even default the video quality to 4k. The Greasemonkey community is full of creative and useful scripts, and users can easily share and download them to enhance their browsing experience. So, whether you're looking to make small adjustments or significant customizations, bookmarklets and Greasemonkey scripts are worth exploring. If you have any favorite scripts or code snippets, feel free to share them with us on Syntax.fm. We'd love to hear about them!

    Recent Episodes from Syntax - Tasty Web Development Treats

    790: State of JS 2023 Reactions

    790: State of JS 2023 Reactions

    Scott and Wes dive into the 2023 State of JavaScript survey, breaking down the latest trends and pain points in front-end frameworks, build tools, and JavaScript runtimes. Tune in for their hot takes and insights on what’s shaping the JavaScript landscape this year!

    Show Notes

    Sick Picks

    Shameless Plugs

    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

    789: Do More With AI - LLMs With Big Token Counts

    789: Do More With AI - LLMs With Big Token Counts

    Join Scott and CJ as they dive into the fascinating world of AI, exploring topics from LLM token sizes and context windows to understanding input length. They discuss practical use cases and share insights on how web developers can leverage larger token counts to maximize the potential of AI and LLMs.

    Show Notes

    Hit us up on Socials!

    Syntax: X Instagram Tiktok LinkedIn Threads

    Wes: X Instagram Tiktok LinkedIn Threads

    Scott: X Instagram Tiktok LinkedIn Threads

    CJ: X Instagram YouTube TwitchTV

    Randy: X Instagram YouTube Threads

    788: Supabase: Open Source Firebase for Fullstack JS Apps

    788: Supabase: Open Source Firebase for Fullstack JS Apps

    Scott and CJ chat with Paul Copplestone, CEO and co-founder of Supabase, about the journey of building an open source alternative to Firebase. Learn about the tech stack, the story behind their excellent documentation, and how Supabase balances business goals with open-source values.

    Show Notes

    • 00:00 Welcome to Syntax!
    • 00:30 Who is Paul Copplestone?
    • 01:17 Why ‘Supa’ and not ‘Super’?
    • 02:26 How did Supabase start?
    • 08:42 Simplicity in design.
    • 10:32 How do you take Supabase one step beyond the competition?
    • 12:35 How do you decide which libraries are officially supported vs community maintained?
      • 15:17 You don’t need a client library!
    • 16:48 Edge functions for server-side functionality.
    • 18:51 The genesis of pgvector.
    • 20:59 The product strategy.
    • 22:25 What’s the story behind Supabase’s awesome docs?
    • 25:26 The tech behind Supabase.
    • 35:46 How do you balance business goals with open source?
    • 42:01 What’s next for Supabase?
    • 44:15 Supabase’s GA + new features.
    • 48:24 Who runs the X account?
    • 50:39 Sick Picks + Shameless Plugs.

    Sick Picks

    Shameless Plugs

    Hit us up on Socials!

    Syntax: X Instagram Tiktok LinkedIn Threads

    Wes: X Instagram Tiktok LinkedIn Threads

    Scott: X Instagram Tiktok LinkedIn Threads

    CJ: X Instagram YouTube TwitchTV

    Randy: X Instagram YouTube Threads

    787: You Should Try Vue.js

    787: You Should Try Vue.js

    Scott and CJ dive deep into the world of Vue.js, exploring what makes this frontend framework unique and why it stands out from React and Svelte. CJ gives a comprehensive tour, covering everything from getting started to advanced features like state management and Vue’s built-in styles.

    Show Notes

    Vue.js: The Documentary.

    Sick Picks

    Shameless Plugs

    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

    786: What Open Source license should you use?

    786: What Open Source license should you use?

    Scott and CJ dive into the world of open source, breaking down its meaning, benefits, and the various types of licenses you’ll encounter. From permissive licenses like MIT and Apache 2.0 to copy-left licenses such as GNU GPLv3, they’ll help you choose and apply the right license for your project.

    Show Notes

    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

    785: What’s Next for NextJS with Tim Neutkens

    785: What’s Next for NextJS with Tim Neutkens

    Scott and Wes dive into the world of Next.js with special guest Tim Neutkens from Vercel. They explore the latest updates, including the React Compiler and React Server Components, discussing their impact on developer workflows and the future of Next.js development.

    Show Notes

    • 00:00 Welcome to Syntax!
    • 00:30 What does the React Compiler do?
    • 05:04 Will React Compiler help with managing Context?
    • 06:39 What happens if you’re not using a React Compiler?
    • 09:30 Will this work on any NextJS version?
    • 12:18 What are React Server Components?
    • 16:28 Shipping all the data inside an encapsulated component.
    • 20:17 Clearing up the frustrations around retrofitting server components.
    • 23:13 Handing migration.
    • 28:30 Is this just a fetch request with props?
    • 36:41 How closely are the NextJS and React teams working?
    • 41:53 Will we ever get Async Client Components?
    • 43:52 Async Local Storage API.
    • 45:31 Turbopack.
    • 57:51 Sick Picks & Shameless Plugs.

    Sick Picks

    Shameless Plugs

    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

    784: Logging × Blogging × Testing × Freelancing

    784: Logging × Blogging × Testing × Freelancing

    In this Potluck episode, Scott and Wes tackle listener questions on modern blogging, website environmental impact, and using LangChain with LLMs. They also cover CSS hyphens, unit vs. integration testing, and balancing web development with new parenthood.

    Show Notes

    Sick Picks

    Shameless Plugs

    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

    783: How We Built a Netflix Style “Save for Offline” Feature Into Syntax

    783: How We Built a Netflix Style “Save for Offline” Feature Into Syntax

    Scott and Wes dive into the world of browser caching for audio files, exploring the File System API and the Cache API. They discuss size restrictions across different browsers, how tools like Riverside.fm leverage IndexedDB, and walk through code examples for creating, retrieving, and managing cached audio data.

    Show Notes

    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

    782: The Developer’s Guide To Fonts with Stephen Nixon

    782: The Developer’s Guide To Fonts with Stephen Nixon

    Scott and CJ are joined by Stephen Nixon of ArrowType to delve into the world of fonts and type for developers. They explore the intricacies of font creation, the utility of variable fonts, and offer tips for making visually appealing typography on the web.

    Show Notes

    Sick Picks

    Shameless Plugs

    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

    781: Potluck - The Value of TypeScript × Vue vs Svelte × Leetcode

    781: Potluck - The Value of TypeScript × Vue vs Svelte × Leetcode

    In this potluck episode of Syntax, Scott and CJ serve up a variety of community questions, from the nuances of beginner vs. advanced TypeScript to the pros and cons of SvelteKit. They also discuss falling out of love with React, shipping private packages via NPM, and the eternal struggle of always starting but never finishing projects.

    Show Notes

    Sick Picks

    Shameless Plugs

    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

    Related Episodes

    Potluck - Where to start with JS × Freelancing × Cron jobs × Split testing × Frameworks in 2019 × More

    Potluck - Where to start with JS × Freelancing × Cron jobs × Split testing × Frameworks in 2019 × More

    It’s another potluck episode in which Wes and Scott answer your questions! This month - thoughts on frameworks for 2019, React Native, when should you start freelancing, where to start with JS, cron jobs, split testing and more!

    DevLifts — Sponsor

    DevLifts - Thad and JC are on a mission to make web developers healthy. They’re currently offering two options: The first is Fit.Start - perfect for beginners or those looking to get back at it.
    Use the coupon code “syntax” to get 50% off the fit.start plan. The second is DevLifts Premium - for those looking for a laser-focused approach and maximum accountability. Use the coupon code “tasty” to get 50% off the premium plan. Check it out today! Just for January their eight-week plan is back. Use the coupon code “newyear19” to get $50 off.

    Kyle Prinsloo’s Freelancing & Beyond — Sponsor

    Kyle Prinsloo teaches you everything you need to know about freelancing, including how to quit your job, earn a side-income and start taking control of your life. Check it out at https://studywebdevelopment.com/freelancing and use the coupon code “syntax” at checkout to get 25% off.

    Show Notes

    1:40

    • Where is the best place to start with JS coming from WordPress?

    5:36

    • How do you set up cron jobs? What are the best tools to use, should they run on their own server or on the application server, etc.?

    17:13

    • What new skills, frameworks, projects are you look forward to learning in 2019?

    21:35

    • Do you use any software for tracking analytics on your site and do you ever use this data to run split tests? If so, what is your preferred method for running split tests?

    28:24

    • What’s your best tip for young coders to stay productive and not lose time?

    32:08

    • I’m 17 and learning web dev. I’m pretty concerned about my skills and feeling some impostor syndrome. Is it ok to start freelancing?

    37:26

    • What is React Native? How do people tend to use it? If you want a native and web app, do they share code?

    Links

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    Tweet us your tasty treats!

    Hasty Treat - Web Dev Resource Sick Picks

    Hasty Treat - Web Dev Resource Sick Picks

    In this Hasty Treat, Scott and Wes talk about all of their favorite web dev resources — a full episode of sick picks!

    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.

    Show Notes

    2:03 - Twitter Accounts

    5:00 - Web Dev Resources

    7:37 - Design Resources

    11:36 - Desktop Tools

    14:59 - YouTube

    Links

    Tweet us your tasty treats!

    Tech Interview 101: Crack The Coding Interview

    Tech Interview 101: Crack The Coding Interview

    Parth's YouTube: https://www.youtube.com/DestinationFAANG/ 

    Most asked Technical Questions: https://docs.google.com/spreadsheets/d/1hzP8j7matoUiJ15N-RhsL5Dmig8_E3aP/edit#gid=1377915986

    Github Repo with all the Solutions: https://github.com/DestinationFAANG/Destination-FAANG-Java-Solution 
     
    Book: Cracking the Coding Interview, Programming interviews exposed

    Preparation Schedule: https://www.techinterviewhandbook.org/coding-interview-study-plan/

    Master Technical Interviews: https://youtu.be/-LVmKNvflnY?si=jrXIS8uzf9haBVED

    In this episode, Parth joins me to delve deep into the heart of technical interviews, a critical gateway in the tech industry. Our comprehensive discussion covers the various formats of technical interviews across different companies, highlighting the diversity and commonalities in these crucial assessments. We explore the typical pitfalls and mistakes that candidates often encounter, providing practical advice on how to avoid them. Our conversation also navigates through effective strategies for tackling tough technical questions, even when the answer seems elusive.