Logo
    Search

    Hasty Treat - Making a Vaccine Bot with JavaScript

    enJune 07, 2021

    Podcast Summary

    • Building a Vaccine Bot with JavaScript, CSS, and Node ModulesLeverage Sanity for a structured content CMS, Sentry for error handling, and Node modules for efficient web development projects.

      In this episode of Syntax, Wes and Scott discuss Wes's project of building a vaccine bot using JavaScript, CSS, and Node modules. They also share their experiences and practical tips in web development. Sponsored by Sanity and Sentry, they highlight the benefits of these tools for developers and end-users. Sanity is a structured content CMS that offers APIs, a user-friendly CMS editing UI, and customizable React components. Sentry is an error and exception handling tool that provides performance metrics and user misery scores to help improve website load times and log errors. By using these tools, developers can create efficient and effective web development projects.

    • A JavaScript coder creates a vaccine bot to simplify the vaccine appointment processA JavaScript coder developed a bot to check vaccine availability every 5 minutes at three pharmacy websites, saving time and effort for those trying to secure appointments during a chaotic and inefficient vaccine rollout process.

      When faced with inefficiencies and frustration in accessing essential services like getting a COVID-19 vaccine, an individual utilized their JavaScript coding skills to create a vaccine bot. The bot aimed to simplify the process by regularly checking vaccine availability at three different pharmacy websites: Shoppers Drug Mart, Costco, and Walmart. The bot's creation was a response to the complex and chaotic vaccine rollout process in Canada, where accessibility varied greatly and was often limited to certain groups. The individual ensured they weren't taking vaccines away from those who needed them most before using the bot for their age group. The bot's success came from its ability to regularly check for vaccine availability every 5 minutes, saving time and effort for those trying to secure a vaccine appointment. The creation of this bot highlights the potential of technology to streamline processes and address inefficiencies in essential services.

    • Reverse Engineering a Website's API RequestTo access private data from a website, reverse engineer its network requests and replicate them using Node.js fetch for a more authentic response.

      To access data from websites that aren't publicly available through APIs, you can reverse engineer their network requests and replicate those requests yourself. This involves visiting the website, identifying the API request in the network tab, and copying the request to use in your own code. For this, using Node.js fetch is recommended as it includes cookies and session IDs in the response, making the request more authentic. This method was demonstrated through the example of finding out if flu shots were available at a pharmacy's website. It's a valuable skill for those interested in web scraping and understanding how websites function behind the scenes. As a back end developer, having this knowledge can be particularly useful. The process starts with visiting a website, identifying the API request, copying the request, and replicating it using Node.js fetch.

    • Understanding the approaches and tools for automated website requestsWhen simple requests are enough, use fetch. For complex interactions, use Puppeteer. Set custom headers for cookies or JWTs. Variableize URL parts for flexibility. Find API endpoints for larger datasets.

      When making automated requests to websites, it's essential to understand the different approaches and tools available to handle various scenarios. When possible, using a fetch request is the faster choice for development as it bypasses the need for opening a headless browser and waiting for pages to load. However, if the website requires more complex interactions like clicking buttons or hovering over elements, then using a library like Puppeteer is necessary. When working with websites, it's important to note that cookies or JSON Web Tokens (JWTs) can sometimes be sent as custom headers instead of cookies. Therefore, setting custom headers is necessary to ensure successful requests. Another crucial step is identifying and variableizing the parts of the URL that differ from one request to another, such as store IDs or booking form IDs. This process helps make the automated requests more flexible and adaptable to various scenarios. When dealing with larger datasets, finding an API endpoint to retrieve a list of stores or locations can be helpful, especially when the user base expands. By understanding the different approaches and tools available, developers can optimize their workflow and build more efficient and effective automated systems.

    • Navigating complex APIs with multiple steps and restrictionsManually copying and pasting cookies and tokens, and carefully identifying necessary components, are crucial for accessing data from complex APIs with multiple steps and restrictions.

      Working with APIs that have restrictions and require multiple steps to access data can be a complex process. These APIs may require specific cookies or tokens to function, and figuring out what is necessary can involve deleting unnecessary parts of requests and identifying which components are essential. For instance, in the case of accessing vaccine availability data from Walmart, the process involved answering a series of questions, receiving new cookies and tokens at each step, and extracting the tokens from HTML pages. This multi-step process was time-consuming and required patience, as the API could change at any time. To overcome this, I had to manually copy and paste cookies from the browser to make the script work, as an alternative to automating the process. Caching available vaccines and their time stamps in an array variable was also necessary to ensure the script checked for updates every 5 minutes without missing out on vaccines that were available for longer than that. Overall, working with APIs that have multiple steps and restrictions can be a complex and manual process, requiring careful attention to detail and patience to figure out the necessary components.

    • Tracking vaccine availability with a Telegram botCombined techniques of checking for duplicates, using in-memory storage, and a Telegram bot for notifications effectively tracked vaccine availability.

      A simple and effective solution for tracking vaccine availability was created using a combination of techniques including checking for duplicate alerts, using in-memory storage, and implementing a Telegram bot for notifications. The developer shared how they checked for duplicate alerts to avoid false positives, used in-memory storage instead of a database to keep things lightweight, and utilized Telegram's bot API to send notifications with vaccine availability. They also mentioned using Node Cron to rerun the function every 5 minutes. The project was initially intended as a pop-up solution, but the developer expressed that they would consider using a database for more long-term flexibility. The developer's persistence paid off when they successfully secured a vaccine for themselves and their wife through the system. Overall, this is a great example of using programming skills to solve a real-world problem in a creative and effective way. Whether it's tracking vaccines or anything else, the key is to keep trying and be persistent in your efforts.

    • Exploring new skills and problem-solvingThe speaker's passion for learning and figuring things out drives them to go the extra mile, from joining a Twitter account to propagating plants.

      Some people, including the speaker, enjoy the process of figuring out how things are done and going the extra mile, even if it means putting in more effort and time. The speaker shared an example of how they got involved in the Twitter account "vaccine hunters" and their fascination with learning about fetch requests. They also mentioned their experience with propagating hydrangea plants and their failure to propagate stink plants despite numerous attempts. The speaker acknowledged that they could have simply bought the plants, but their personality type drives them to find solutions and learn new skills. The conversation also touched on the speaker's interest in landscaping and houseplants, specifically their love for snake plants and their past failures in propagating them. Overall, the speaker's passion for learning and problem-solving is a significant part of their personality.

    • Monstera plants' popularity leads to automation ideasExplore automation ideas for Monstera farms using JavaScript, learn from code examples, and enhance developer skills.

      Monstera houseplants, specifically their leaves, have become quite popular and valuable in the market, with some leaves selling for up to $150. This trend has led to an increase in propagation efforts. Monstera plants are known for growing large, making them an attractive addition to any home. Wes Bos, a podcast host, expressed his interest in automating the watering of a potential Monstera farm using JavaScript. The Wyze sprinkler automation discussed earlier sparked this idea. While the code for the entire project may not be the best, reading it can help improve developer skills. The importance of reading code cannot be overstated, especially for reverse engineering APIs, hacking together projects, or creating schedulers, Telegram bots, or similar tasks.

    Recent Episodes from Syntax - Tasty Web Development Treats

    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

    780: Cloud Storage: Bandwidth, Storage and BIG ZIPS

    780: Cloud Storage: Bandwidth, Storage and BIG ZIPS

    Today, Scott and Wes dive into cloud storage solutions—why you might need them, how they use them, and what you need to know about the big players, fees, and more.

    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

    Related Episodes

    Style guides & Rules - jak ogarnąć codebase?

    Style guides & Rules - jak ogarnąć codebase?
    Znowu bierzymy na tapet książkę Software Engineering at Google. Tym razem omawiamy temat zasad i utrzymywania porządku w codebase. Poruszamy następujące kwestie:
    • jak podejść do style guide?
    • czy można utrzymać ten sam styl w wielu projektach?
    • kto odpowiada za utrzymywanie porządku?
    • czy automatyzacja to jedyne rozwiązanie?
    • ten sam czy inny styl dla kolejnego projektu?
    Zapraszamy do wysłuchania rozmowy 💪

    Folge 65 - Vue 3 – Was bringt uns die Zukunft?

    Folge 65 - Vue 3 – Was bringt uns die Zukunft?

    Halb so groß und doppelt so schnell – das verspricht Vue.js 3. Der stable Release steht kurz bevor und wir haben uns die Versprechungen der neuen Version in der Beta angesehen. In Folge 65 möchten wir unsere Impressionen zu den spannendsten Features mit euch teilen!
    Vue 3 wurde bereits 2018 von Evan You, dem Gründer von Vue.js, angekündigt und seither von allen Vue-Enthusiasten sehnlichst erwartet. Hatte man in der alten Version manchmal damit zu kämpfen, eigene große Projekte in TypeScript aufzusetzen, so ist Vue 3 nun von Haus aus in TypeScript geschrieben und bietet damit eine bessere Typsicherheit sowie Typinferenz. Wir sprechen in dieser Folge zunächst über die Motivation der Entwickler zur Neuauflage von Vue und gehen dann ans Eingemachte: die neuen Features und allem voran die neue Composition API!
    Hier geht es auch zu den Podcastfolgen 43 und 48, in denen wir über unsere meistgenutzten Features der älteren Versionen von Vue.js sprechen.

    Picks of the Day 

    • Sebi: 
      • MQL (MetaQuotes Language) von Google, um flexibel die Visualisierung von Daten zu beeinflussen, die seitens Google in Graphen dargestellt werden. Nützlich bspw. für die Ratio zweier Datenwerte. 
      • Mit dem dpdm Tool könnt ihr euch Circular Dependencies einfacher anzeigen lassen. 
    • Fabi: Mit der Extension Remote SSH von Visual Studio Code Folder der SSH-Verbindung anzeigen lassen und Files bearbeiten. 
    • Dennis: Drücke auf dem Mac gemeinsam Cmd, Shift und T im Browser, um einen eben geschlossenen Tab wieder zu öffnen. 


    Streamt uns!
    Diese und alle vergangenen Live-Folgen könnt ihr auf YouTube anschauen.

    Schreibt uns!
    Schickt uns eure Themenwünsche und euer Feedback.
    podcast@programmier.bar 

    Folgt uns!
    Bleibt auf dem Laufenden über zukünftige Folgen und virtuelle Meetups und beteiligt euch an Community-Diskussionen.
    Twitter
    Instagram
    Facebook
    Meetup
    YouTube

    Musik: Hanimo

    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!

    Potluck - Interview Qs × Headless CMS × React Hooks × Resume Design × Redux vs Context × More!

    Potluck - Interview Qs × Headless CMS × React Hooks × Resume Design × Redux vs Context × More!

    It’s another potluck episode in which Wes and Scott answer your questions! This month - interview questions, headless CMSs, resume design, redux vs context, and more!

    Sentry - Sponsor

    If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.

    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.

    Show Notes

    2:21

    • Q: Are there any tutorials you would recommend to learn more computer science related knowledge (algorithms, closures, etc.)?

    5:12

    • Q: Do you have any suggestions for picking a headless CMS?

    8:55

    • Q: Do you have any advice for someone in a customer service background seeking a more flexible job with remote work opportunities? Resources? Is this a realistic goal or a good way to approach my job search?

    15:13

    • Q: How much importance would you place in the design of a resume? Is it worth the cost?

    21:09

    • Q: With the new React Hooks and Context API, do we still need Redux?

    25:37

    • Q: If either of you could change anything about your personal tech stack, what would it be and why?

    29:07

    • Q: Do you prefer to use React’s defaultProps or plain JS default function parameters to give your component’s props some default values?

    30:44

    • Q: You guys chat CMS sometimes - why no love for Umbraco?

    35:53

    • Q: I’m ready for a new challenge, how do I break this to my employer?

    38:16

    • Q: What’s the difference between const add = (a, b) => { return a + b } and function add (a, b) { return a + b }?

    Links

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    Tweet us your tasty treats!

    Dekoratory w JS - czy nadchodzi Hibernate ?

    Dekoratory w JS - czy nadchodzi Hibernate ?
    Najnowszy proposal odnośnie dekoratorów w JS mocno zmienia dotychczasowy obraz. Ogranicza dekoratory tylko do klas, nie pozwala operować na property descriptor. Natomiast wprowadza możliwość pisania i czytania metadanych.
    Czy zobaczymy nadejście Spring'a i Hibernate ?
    Czy JavaScript coraz bardziej zaczyna przypominać Java ?