DEV Community: Regis Gaughan, III

How I got a Nintendo Switch using NodeJS

Regis Gaughan, III — Wed, 23 Dec 2020 19:10:35 +0000

Have you missed out on a hot holiday gift? Me too... until I used NodeJS to send my phone an alert to buy!

This holiday season I saw a deal for a Nintendo Switch bundle which was perfect for my brother and his family. It was on sale for $299 but, unfortunately, by the time I went to get it there were no more available and third-party scalpers were selling it for over $500. Bummer.

However, I noticed that Amazon’s stock would occasionally come available with that $299 price tag every now and then; but I was never lucky enough to check at the right time.

So what does a software engineer do? Write a script to monitor the availability and send a message to my phone when it’s available to buy. And, it actually worked!

rgthree / pricewatch

An Amazon Price Watcher with phone alerting via Telegram

How it works.

The script is three pieces that work together:

An AmazonPriceChecker that fetches the Amazon product web page by its id and, using JSDOM, looks for the current price
A TelegramBot that simply encapsulates making a simple request to alert my phone via my personal Telegram bot.
And a main server file that ties it all together to run the check loop, check the price threshold, and utilize the bot to alert my phone.

Set up

For this project, we'll need very few dependencies.

If you haven't already, you'll need to install NodeJS
You'll also need TypeScript. I recommend installing globally:
```
 npm install -g typescript
```

You'll then need jsdom and node-fetch. You can create a package.json file similar to below in your project directory and run npm install:

{
  "name": "rgthree-pricewatch",
  "description": "Watch prices.",
  "version": "0.0.1",
  "private": true,
  "dependencies": {
    "jsdom": "^16.4.0",
    "node-fetch": "^2.6.1"
  },
  "devDependencies": {
    "@types/jsdom": "11.0.4",
    "@types/node": "^12.12.2",
    "@types/node-fetch": "^2.5.7"
  }
}

package.json

The AmazonPriceChecker

All we need this to do is fetch the Amazon product's web page by its product id and, using JSDOM, look for the current price in the DOM, and return it if found along with the url of the product itself.

One thing to keep in mind is we’re fetching the web page with our server. We’ll override the User-Agent so it looks like a browser, but the response back will be raw HTML and possibly different than the markup we see when using Amazon as JavaScript is likely modifying the page substantially after that raw HTML come back.

So, to find how to scrape the price we'll use the view-source feature in a browser to see exactly what our script will see instead of the DevTools.

Luckily, it wasn't too hard to find Amazon is wrapping the price in an element with the id of priceblock_ourprice. (At least for the Nintendo; it's possible other products have different markup.)

All together, our AmazonPriceChecker looks like this:

import fetch from 'node-fetch';
import {JSDOM} from 'jsdom';

/**
 * Given a product id, will try to find the current price of the item on the
 * Amazon page.
 */
export class AmazonPriceChecker {

  private readonly url: string;

  constructor(id: string) {
    this.url = `https://www.amazon.com/gp/product/${id}`;
  }

  /**
   * Returns a payload of the url for the product and it's current price, if
   * found. If the price cannot be determined, it will be `NaN`.
   */
  async check() {
    try {
      const response = await this.fetchProductPage();
      const body = await response.text();
      const doc = new JSDOM(body).window.document;
      let price = Number(doc.querySelector('#priceblock_ourprice')?.textContent?.trim().replace('$',''));
      return {url: this.url, price};
    } catch(e) {
      throw new Error(e);
    }
  }

  private async fetchProductPage() {
    return await fetch(this.url, {
      method: 'get',
      headers: {
        'accept-language': 'en-US',
        'Accept': 'text/html,application/xhtml+xml',
        // Make our request look like a browser.
        'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.11 Safari/537.36',
      }
    });
  }
}

amazon_watcher.ts

Our TelegramBot

For the next part of our script we want to alert our phone. I've previously written about how to create a personal Telegram Bot here:

Personal Telegram Bot for Alerting Your Phone (w/o code)

Regis Gaughan, III ・ Dec 9 '20

#telegram #chatbot #api #notifications

All we need is our bot’s Api Key and the chat id our bot belongs to that we'll ping.

import fetch from 'node-fetch';

/**
 * Super simple telegram wrapper that sends messages to a bot specific chat.
 */
export class TelegramBot {

  constructor(private botApiKey: string, private chatId: string) {}

  async sendMessage(text: string) {
    return await fetch(`https://api.telegram.org/bot${this.botApiKey}/sendMessage?chat_id=${this.chatId}&text=${encodeURIComponent(text)}`);
  }
}

telegrambot.ts

NOTE: You don't have to use Telegram to alert yourself. You can modify the code here to send an email, or trigger IFTTT in some way, etc. Options are up to you, I've chosen to use Telegram because I already had a personal bot setup to ping my phone :)

Tying it all together

Now that we have our two separate pieces, we'll tie them together in our main server file where we'll loop to check every two minutes.

import {AmazonPriceChecker} from './amazon_watcher';
import {TelegramBot} from './telegrambot';

const TELEGRAM_API_KEY = 'YOUR_API_KEY';
const TELEGRAM_CHAT_ID = 'YOUR_API_KEYCHAT_ID';

// The Amazon product id. The XXX in
// https://www.amazon.com/dp/XXX or https://www.amazon.com/gp/product/XXX
const AMAZON_PRODUCT_ID = 'B08KB652Q2';
const TARGET_PRICE = 300;

const MS_MINUTES = 1000 * 60;
const BASE_TIMEOUT = MS_MINUTES * 2;

const telegram = new TelegramBot(TELEGRAM_API_KEY, TELEGRAM_CHAT_ID);
const priceChecker = new AmazonPriceChecker(AMAZON_PRODUCT_ID);

/**
 * Checks the price with `priceChecker`, issues a message with `telegram` if
 * it meets our threshold, and schedules another check.
 */
async function check() {
  let timeout = BASE_TIMEOUT;
  try {
    const {url, price} = await priceChecker.check();

    if (price) {
      if (price <= TARGET_PRICE) {
        telegram.sendMessage(`Price is: ${price}. Checking again in ${timeout / MS_MINUTES} minutes. ${url}`);
      }
    } else {
      // If we can't parse the price, maybe something's wrong. We'll slow down
      // our interval a bit.
      timeout += MS_MINUTES * 5;
      telegram.sendMessage(`Could not parse price. Trying again in ${timeout / MS_MINUTES}. ${url}`);
    }

  } catch(e) {
    timeout += MS_MINUTES * 5;
    telegram.sendMessage(`There was an error fetching the price. Will check again in ${timeout / MS_MINUTES} minutes.`);
    console.error(e);
  }

  // Rinse & repeat.
  setTimeout(() => { check(); }, timeout);
}

// Start it!
check();

console.log('Checker Started. Stop with Ctrl + C.');

server.ts

Start it up

First, run the TypeScript compiler which will generate JavaScript files from our neatly typed TypeScript files:

tsc

And then run our server file with NodeJs:

node server.js

And that's it! This triggered an alert on my phone in about 4 hours or so and I was able to open Amazon directly to the product page and get the Switch, which was good because when I checked again four minutes later it shot back up to $500!

Enhance!

This is just a base that worked for me. We can take this add more checkers for other online stores, different products, turn it into a full "bot" that actually buys the product, etc. Consider this just a starting point of where we can go from here. Maybe for next holiday season.

rgthree / pricewatch

An Amazon Price Watcher with phone alerting via Telegram

Let's Make a 3D E-Card using only CSS!

Regis Gaughan, III — Mon, 14 Dec 2020 17:25:54 +0000

In my previous post, Let's Make it Snow!, I mentioned the reason for making the snow in the first place was to spice up a simple page to share some photos with family and friends.

What I didn't mention was that the photos were actually "stuffed inside" a 3D, interactive, holiday e-card, that was created using nothing but HTML & CSS. Come along with me on the journey of creating this.

_**Want instant gratification?**
This post is written as a tutorial, building up our 3D card through iteration. If you'd like to skip all that, you can head down to [the "final" CodePen](#codepen) immediately._

The Challenge

Most devs would probably approach the idea of any interactivity on a webpage with JavaScript first: Click a card, use JS to handle the event, and kickoff a bunch of eased animations to have that card open, etc. And none of that's wrong at all. JavaScript has a role, and it certainly would fit here.

But what if I told you we can make this interactive, immersive e-card using only HTML & CSS? So throw out the JavaScript, and don't you dare reach for some bloated framework! Let's get started.

The Tech & Approach

I always find it useful to talk through our approach before opening up an editor. For this, we'll have a card on the page with two states: It's either opened or it's closed, and when it changes we want to animate it from the old state to the new using CSS; but it's still just a binary state.

What element can you think of that also has an inherent binary state? Of course, it's the checkbox input! So, we'll use the checkbox: When it's checked we'll consider the card to be opened, and when it's unchecked we'll consider the card to be closed.

Plus, we don't need JavaScript to check and uncheck a checkbox!

"But how does a checkbox help us style the card to look open and closed?"

Good question. And CSS has the power to do this for us with ease!

First, let's understand that CSS will let us select a checkbox whose state is :checked and, separately, we can select a sibling of an element.

So, if we wanted the text of a label right after a checkbox to be green when checked and red when not, we could do something like this:

input[type="checkbox"] + label { color: red; }
input[type="checkbox"]:checked + label { color: green; }

Style a label element that's next to a checkbox based on the checkbox's state.

I’m going to show you how to use this pattern to style our card to be opened or closed based on the checkbox's state.

"But clicking on a tiny checkbox is cumbersome. Can't we use JavaScript to click the card itself?"

We could... or we could rely on plain old HTML! You see, a <label> element whose for attribute is a value that matches a checkbox input's id will toggle that checkbox checked state when the label is clicked.

<input type="checkbox" id="the-checkbox" />
<label for="the-checkbox">Click me!</label>

In this example when we click the label the checkbox above will be toggled.

Therefore, our plan for our e-card will be that the card itself will be contained in a , so clicking on the card will toggle our checkbox's state between checked and unchecked, meaning we can then style our card to be open or closed. Even further, we can "hide" the checkbox itself, so clicking the label is the only visual way to open the card.

Now, on to the code!

Our markup will obviously be the checkbox toggle followed by our label and the associated for attribute as we talked about above.

The label element will act as our card container, which we'll apply some special CSS to for the 3D effect of opening later. It will also define our card's layout and dimensions.

Within the label we'll have three "card-faces" positioned on top of each other absolutely. We'll have the outside front-flap (the cover), the inside of he front-flap, and the inside of the back-flap. (We don't need a back-flap-outside because we won't be able to turn the card over.) These card-faces are what will be visually styled to be the faces of the card and all contained as siblings within our card container and animate with rotation transforms.

Our initial markup will look something like this:

<input type="checkbox" id="card-toggle" />
<label class="card" for="card-toggle">
  <div class="card-face front-flap outside">
  </div>
  <div class="card-face front-flap inside">
  </div>
  <div class="card-face back-flap inside">
  </div>
</label>

Now let's style it!

I'm using Sass (SCSS) here but, remember, Sass is just a pre-processor and it's all just regular CSS in the end.

First up is our checkbox. We position this absolutely with a z-index of 1 so we can overlay our card label on top of it with a z-index of 2.

#card-toggle {
  position: absolute;
  z-index: 1;
  left: 50%;
}

Next is our card--the label element. We're going to lay this out on the page and position it relatively on top of checkbox with z-index. Finally, we set a perspective so the children's rotation transforms will appear 3D; with the edge getting larger as it opens "closer" to users' eyes.

.card {
  // These just lay the card out on the page.
  display: block;
  margin: 100px auto;
  width: 600px;
  height: 400px;

  // Position this correctly on top of our card toggle.
  position: relative;
  z-index: 2;

  // This is what will make our card flaps feel 3D.
  perspective: 2000px;
}

Now, our card faces. Remember from our markup above we have three card faces which are positioned absolutely on top of each other. Will also share a few more styles for each of them, like a base background color, and a pointer cursor so the user knows to click.

.card-face {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #FAFAFA;
  cursor: pointer;
  // ... continued below.
}

These faces are the elements that will transform by rotating. The CSS default of a transform origin is in the center of the element--but that's not how cards open. So we set the transform origin to be anchored at the top/left.

We'll also be animating these, obviously. So we'll add our transition. I use all because we'll be animating a couple other properties too, like box-shadow, etc.

.card-face {
  // ...
  transform-origin: 0 0;
  transition: all 0.5s ease-out;
}

Now that we have our base card-face defined, let's style the individual faces for their starting position.

The two card faces of the front flap share a class of front-flap and should always have the same transform, since they're "physically" the same flap (you can't flip the outside cover without also flipping the inside cover). But, the outside face will have a higher z-index than our inside, since it should appear on top.

When we "flip" the card open we also need the outside to hide itself, since it has a higher z-index it would show. So, we use the backface-visibility property so the outside face disappears when it's flipped around and our inside face will show instead.

.front-flap {
  // Start the front-flap a little open so we can see
  // the back-flap underneath.
  transform: rotateX(21deg);
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.15);
}

.front-flap.outside {
  // Modern Safari still requires the -webkit- prefix :\
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  z-index: 5;
}

.front-flap.inside {
  z-index: 4;
}

And we only have one back-flap for the inside. It's z-index should be completely under the front-flap faces. (I've skipped z-index 3 below as we're going to use it later, so the back-flap gets 2 here):

.back-flap.inside {
  z-index: 2;
  // Start slightly open, so it feels a little more natural.
  transform: rotateX(-4deg);
  box-shadow: 0 0px 5px rgba(0,0,0,0.25), 0 5px 10px rgba(0,0,0,0.25);
}

Alright, with everything above set up we should have a card that's just begging to be opened and look something like this:

Let's get it opened!

You'll notice that clicking on the card doesn't do anything. Well, that's not entirely true; clicking on the card does toggle the checkbox, which is hidden under the card visually. But now we'll style our card so when the checkbox is checked, our card opens.

We're going to use the :checked selector on our checkbox and the adjacent sibling combinator to target our card when the checkbox is checked.

To get the effect, we want to rotate both of the front-flap faces when the checkbox is checked. We'll also change our shadow since they're now upside-down.

#card-toggle:checked + .card .front-flap {
  transform: rotateX(165deg);
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.08), 5px 5px 5px rgba(0, 0, 0, 0.08), -5px 5px 5px rgba(0, 0, 0, 0.08);
}

Now the card opens and closes when we click it! And that's our e-card. We can now add content to the cards, like a photo to the front cover, and a personal message to the back...

But, are we going to call it done after that? Nope!

Let's add something inside!

As I mentioned, I wanted to share some photos with family and friends. If I sent a real card I would have naturally put a few photos inside the card itself. Let's do it here as well!

We'll add some photos inside the card label element. Since everything is absolutely positioned they don't need to go anywhere specific. I've put them at the end:

<input type="checkbox" id="card-toggle" aria-label="Open the card">
<label class="card" for="card-toggle">
  <div class="card-face front-flap outside">
  </div>
  <div class="card-face front-flap inside">
  </div>
  <div class="card-face back-flap inside">
  </div>

  <!-- Photos that fall out. -->
  <figure class="photo"><img src="..." alt="..." /></figure>
  <figure class="photo"><img src="..." alt="..." /></figure>
  <figure class="photo"><img src="..." alt="..." /></figure>
  <figure class="photo"><img src="..." alt="..." /></figure>
</label>

For the initial styles of these photos, we want them to be "inside" the card. That means they'll need to be laid out and positioned under the front-flaps z-indexes, as well as in the center of the closed card.

.photo {
  // Position them absolutely
  position: absolute;
  height: 225px;
  width: 300px;
  z-index: 3;
  top: 50px;

  // We use left: 50% and a negative margin-left so the
  // photos are aligned in the middle of the card itself.
  left: 50%;
  margin-left: -150px;

  // We don't want to be able to click the images, or they'll
  // also toggle the checkbox as children of the label.
  pointer-events: none;

  // Style to make them look a bit more realistic.
  box-shadow: 0 0 5px rgba(0,0,0,0.25), 0 5px 10px rgba(0,0,0,0.25);
  background: #fff;
  box-sizing: border-box;
  border: 4px solid #fff;
  border-radius: 1px;

  // Animate the photos. This is a base transition, we adjust some
  // of the first few to spend longer when animating out.
  transition: all .5s .06s ease-out;

  // Make sure the nested img element fits the view exactly
  > img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
}

And then, when the checkbox is checked, and the card is opening, let's move the photos out of the card:

#card-toggle:checked + .card .photo {
  &:nth-of-type(1) {transform: translate(-145px, 250px);}
  &:nth-of-type(2) {transform: translate(145px, 300px);}
  &:nth-of-type(3) {transform: translate(-145px, 480px);}
  &:nth-of-type(4) {transform: translate(145px, 530px);}
}

We now have something like this.

This is OK, kinda. But we can still...

Go the extra mile!

So we have some photos falling out of the card but they don't really feel very natural yet. If we start them rotated when in the card so they rotate as they fall out, that should help. We can also have them be a little offset in the card as well:

.photo {
  // ...

  // To help with a bit of randomness to the start, we'll make
  // the photos initially rotated 90deg and shifted a bit over...
  transform: translate(50px, 0px) rotate(90deg);
  // ...and make every third photo the opposite.
  &:nth-of-type(3n) {
    transform: translate(-50px, 0px) rotate(-90deg);
  }

Now let's add a small "random" rotation to the final positions as well as some "random" jitter to the x and y as well:

#card-toggle:checked + .card .photo {
  &:nth-of-type(1) {transform: translate(-149px, 248px) rotate(-3deg);}
  &:nth-of-type(2) {transform: translate(139px, 303px) rotate(2deg);}
  &:nth-of-type(3) {transform: translate(-142px, 475px) rotate(5deg);}
  &:nth-of-type(4) {transform: translate(146px, 534px) rotate(-2deg);}
}

And here we go:

Much better!

There's one last thing we can do before I show you the final CodePen.

Make it mobile friendly!

Right now it's not very mobile friendly, especially if we want a fixed viewport. A few tweaks to make it mobile friendly would be to let the width of the card flex if we get narrow, and have the photos fall into a single stream. Here's how we would do that:

.card {
  // ...

  // Way back up in .card we'll change our width from a static
  // 600px to a high percentage, but with some space on the sides.
  // Then we'll give our card a max-width of 600px;
  width: 90%;
  max-width: 600px;
}

// Next, when we're too narrow for two columns of photos,
// make it one column, with some randomness applied:
@media (max-width: 860px) {
  #card-toggle:checked + .card .photo {
    &:nth-of-type(1) {transform: translate(2px, 248px) rotate(-3deg);}
    &:nth-of-type(2) {transform: translate(-4px, 478px) rotate(2deg);}
    &:nth-of-type(3) {transform: translate(-1px, 714px) rotate(5deg);}
    &:nth-of-type(4) {transform: translate(3px, 942px) rotate(-2deg);}
  }
}

// And, finally, when super narrow, make our photos narrower,
// and slightly modify where they start inside the card.
@media (max-width: 350px) {
.photo:nth-of-type(1n) {
  width: 200px;
  margin-left: -100px;
  transform: translate(0px, 0px) rotate(-90deg);
}

It's the Final CodePen.

So I hope you taketake what you've learned and make it your own by add some content to the cover and inside, add more photos, etc.

Below you'll find my own CodePen which adds some more details, and uses some more advanced Sass loops to better randomize the photos falling out.

And, again, all this was done with just HTML & CSS, so don't let anyone ever tell you CSS isn't a programming language! 🙃

Let's Make it Snow!

Regis Gaughan, III — Thu, 10 Dec 2020 17:01:36 +0000

One of the first things I ever programmed was a snow animation. That was over 20 years ago and written in QBasic, but I always come back to the simplicity of a serene snowfall scene. So, when the opportunity arose this year to spice up a simple web page sharing some holiday photos with family and friends, I decided to go ahead and "reboot" one of my very first software projects, and bring it to the web in style.

Need Instant Gratification?
This post is written as a tutorial, building up our snow scene through iteration. If you'd like to skip all that, you can head down to the "final" CodePen immediately.

The Tech & Approach

The goal here is to create a performant snow animation that has a natural look and feel and doesn't physically get in the way of the content on the page.

The basic approach to animation in general is to have a subject or subjects, and update their look many, many times a second. Luckily, snow flakes are a pretty simple subject, and the web has some built in mechanisms to handle animation, framerate, and drawing.

So, our basic approach will be to have an Array of snow flake data, which we will iterate over each snow flake, update their position, and draw them within an HTML5 Canvas for each frame, which will be controlled using requestAnimationFrame.

Let's start by defining our snowflake. In order for our snowflake to be drawn, we need to know where it exists on our canvas. For this, we'll start with a simple interface for its x and y position:

interface SnowFlake {
  /** The current x position. */
  x: number;
  /** The current y position. */
  y: number;
}

Note: We're using TypeScript here. Though, this whole project is quite simple and can easily be converted to raw JavaScript without too much effort.

Next, we need a <canvas> element, and attach it to the dom. We'll also add some styles so it fills the viewport, stays-put with any scrolling, is on top of any content, and doesn't get in the way of any clicks.

const canvas = document.createElement('canvas');
canvas.width = window.innerWidth;
canvas.width = window.innerHeight;
canvas.style.position = 'fixed';
canvas.style.top = '0';
canvas.style.left = '0';
canvas.style.width = '100%';
canvas.style.height = '100%';
canvas.style.pointerEvents = 'none';
canvas.style.zIndex = '999';
document.body.appendChild(canvas);

Also, since we're using a whole lot of random values, we'll make a couple quick helper functions:

/** Helper function returning a decimal between min/max. */
function random(min: number, max: number) {
  return Math.random() * (max - min) + min;
}

/** Helper function returning an int between & inclusive of min/max. */
function randomInt(min: number, max: number) {
  return (Math.floor(Math.random() * (max - min + 1)) + min);
}

Now, let's generate all our snow flakes with some random x and y values.

const flakes: SnowFlake[] = [];
const numOfFlakes = randomInt(300, 600);
for (var i = 0; i < numOfFlakes; i++) {
  flakes.push({
    x: randomInt(0, canvas.width),
    y: randomInt(0, canvas.height),
  });
}

Finally, we'll create our draw function which we'll call over and over again using window.requestAnimationFrame.

const ctx = canvas.getContext('2d')!;
function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = '#fff';
  ctx.beginPath();
  flakes.forEach((flake) => {
    // Draw our flake at its current x/y
    ctx.moveTo(flake.x, flake.y);
    ctx.arc(flake.x, flake.y, 2, 0, Math.PI * 2);

    // Update our flake's next x/y.
    flake.y += 1;
    flake.x += 1;
    // If our snowflake goes off the left, right or bottom,
    // move it to the opposite side.
    if (flake.x > canvas.width) {
      flake.x = 0;
    } else if (flake.x < 0) {
      flake.x = canvas.width;
    } else if (flake.y > canvas.height) {
      flake.x = randomInt(0, canvas.width);
      flake.y = -2;
    }
  });
  // Fill in all the arc paths' we've just created...
  ctx.fill();
  // ...and schedule us to do it all over again.
  window.requestAnimationFrame(draw);
}

And finally, kick it off:

window.requestAnimationFrame(draw);

That's it! We now have snow!

Wait... Is that really it?

Of course not! There's so much more we can do.

Alright, let's keep going. I'm going to walk us through a bunch of improvements and you should follow along and see how our snow scene starts to take shape.

1) Let's add some dynamic sizes.

We're going to add a radius field to our SnowFlake interface, set a random size when we generate our flakes, and use this field in our draw function (replacing the hardcoded "2" there).

interface SnowFlake {
  // ...
  /** The radius in pixels. */
  radius: number;
}

// ... and our new flake generation will look like the following:
flakes.push({
  x: randomInt(0, canvas.width),
  y: randomInt(0, canvas.height),
  radius: random(.25, 2),
});

// ...and we'll use that in our draw method for the arc:
ctx.arc(flake.x, flake.y, flake.radius, 0, Math.PI * 2);

Awesome! When you plug these changes in you'll see much more dynamically sized snow. It's already feeling better!

But there's still something missing... they all still move the same direction and at the same speed...

2) Let's add some dynamic movements!

Alright, we're going to do something similar to make the snow move more randomly. Just like we added radius above, we'll now add drop and sway fields as well. These will be used to offset the general direction we're moving so we get some flakes that move a little faster, both vertically (drop) and horizontally (sway).

interface SnowFlake {
  // ...
  /** The radius in pixels. */
  radius: number;
  /** A value to add to y movement to speed/slow itself. */
  drop: number;
  /** A value to add to x movement to speed/slow itself. */
  sway: number;
}

// ... and our new flake generation will look like the following.
// (Similarly, we'll inflate our range and divide by 100 to get
// a number between -.300 and .300 with a precision of three).
flakes.push({
  x: randomInt(0, canvas.width),
  y: randomInt(0, canvas.height),
  radius: random(.25, 2),
  sway: random(-.3, .3),
  drop: random(-.3, .3),
});

// ...and now, in our `draw` method, when we update our position,
// we'll add the sway and drop:
flake.y += 1 + flake.drop;
flake.x += 1 + flake.sway;

And now we have dynamically falling and swaying snowflakes. It looks much much better already! There's one last thing we can do to smooth out one rough edge...

4) Let's fix resizing.

You may have noticed if you resize the window, the snow stretches instead of applying the extra/lost room. This is because the canvas' CSS is stretching the element, but its set width and height don't update, so our drawing becomes stretches or squished.

This is actually a simple fix, which we do so by setting the width and height attributes of the canvas to it's new size when we resize:


// Update the canvas width/height data when the window resizes.
window.addEventListener('resize', () => {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
});

Now that's it! We have dynamic, more natural feeling snow!

Hold on... Is that really it?

You got me! There's always more we can do. But this is a terrific spot to stop and deliver. We'll call what we've just created the MVP. Wrap it up in a bow and push it to production :)

As I mentioned at the very beginning, I created my version of falling snow for a holiday webpage I was sharing with family and friends. What I actually built was a little slightly different than the tutorial walkthrough above, which I've simplified a bit.

Below, we have the my "final" CodePen, which has some additional enhancements like a gentle wind causing the snowflakes to slowly sway from left to right, etc. I also have it all in a class instance with start, pause, and stop methods, because that's how I enjoy encapsulating code. You're welcome to check it out below, and think up even more ways to make it better for next holiday season!

Personal Telegram Bot for Alerting Your Phone (w/o code)

Regis Gaughan, III — Wed, 09 Dec 2020 23:30:01 +0000

A lot of times I find myself wanting to notify my phone for something that doesn't have an app. Whether it's something I'm hacking together, or an integration with an existing service, having a flexible mechanism to alert my phone on my terms is powerful.

There's a few ways to go about this, but here I'm going to outline how to create a personal Telegram bot that will send messages to our specific, private chat.

It's alive!

Let's create our bot, and get our bot's API Token.

Start (or continue) a chat with BotFather.
Enter /newbot into the chat and BotFather will ask you for a name for your bot, then a unique username for your bot, and finally give you a token that will look similar to 110201543:AAHdqTcvCH1vGWJxfSeofSAs0K5PALDsaw:

Save this token in a secure spot.

Nice to meet you.

Now let's say hello and get our chat id.

Head back out to your chats, find your bot by its username and say hi--though it won't reply yet :)

We'll get them to say hi back soon.
Now we need the id of the chat we've just started. We can do that from our browser using getUpdates of the Telegram API by heading to the following url, replacing the <token> portion with the token we got above.
```
 https://api.telegram.org/bot<token>/getUpdates
```
The response should be JSON with results from the chat we started with our bot from #4. Find the message.chat.id and save this in a secure place.

JSON.

Hello World!

We now have all the information we need to start sending ourselves messages from our bot.

Let's reply to our chat by hitting the sendMessage endpoint url below using our token and chat id that we got above.
```
 https://api.telegram.org/bot<token>/sendMessage?chat_id=<chat_id>&text=Oh,+hi!
```
...and we should get a reply back.

And now we're talking to ourselves.

That's a wrap!

And there we go. From here we can message ourselves as easily as hitting a url. We can do it from our own python script, nodejs service, chrome extension, bash script, webhooks, really anything that is capable of making an HTTP call can now alert our phone.

Of course, this is just the start of a what a Telegram bot can do. We can then code on top of this bot to listen for commands, issue responses, etc. But, for this post, we're only interested in setting up a one-way communication channel to alert our phones.

Optional

It's worth noting that bots are inherently public. People can find and add our bot. We can stop our bot from being added to groups by heading back to our conversation with BotFather and entering /setjoingroups, choosing our new bot, and entering in Disable. BotFather should let us know it was successful. I don't think this disables direct chats; at least not from what I can tell.

Though, it doesn't really matter if people chat up our bot. We'll be sending messages only to our specific chat id. If and when we were to write a bot program that listens to commands, we'd obviously want to only take whatever action when it comes from our chat id (assuming, we want to keep it private).

Hello Universe

Regis Gaughan, III — Sun, 18 Oct 2020 20:26:05 +0000

Introduction

Hi, I’m Regis. I'm a seasoned full stack engineer with a focus on building immersive, best-in-class experiences for the web.

My work experience over the last couple decades has been expansive. I've freelanced as a multi-media designer and engineer to make ends meet; I've worked for myself creating award-winning software used by millions of people each day; and I've worked at both a tiny tech startup with as little as six people all the way to one of the largest tech companies in the world. I'm currently at Google building, leading, and managing engineering teams for Google News.

Why am I on DEV?

My journey is somewhat unique, and I’ve been a technical and professional mentor to team members and colleagues for decades. I've applied my own experiences to help all sorts of people; whether new hires understand the complexities of writing software, or seasoned engineers achieve high-level career positions. I’m here to help.

But mostly, I just like sharing things I’ve learned, whether from yesterday or 15 years ago.