DEV Community: James Bubb

JavaScript Snow

James Bubb — Thu, 14 Dec 2023 11:14:45 +0000

Here's how you can add a snow animation with JavaScript to your site just for the festive season :)

See a demo by watching the tutorial here and for my thoughts on why it's a bad idea!

1. Setup Constants

Let's setup some variables to hold some info on the appearance of our snow animation.



const NUMBER_OF_SNOWFLAKES = 300;
const MAX_SNOWFLAKE_SIZE = 5;
const MAX_SNOWFLAKE_SPEED = 2;
const SNOWFLAKE_COLOUR = '#ddd';

const snowflakes = [];

We'll also create an empty array called snowflakes which is going to keep track of all the individual snowflakes on the page.

2. Create a canvas

All our snowflakes are going to be drawn onto a canvas element so let's create that and drop it onto the current document.



const canvas = document.createElement('canvas');
canvas.style.position = 'absolute';
canvas.style.pointerEvents = 'none';
canvas.style.top = '0px';
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
document.body.appendChild(canvas);

const ctx = canvas.getContext('2d');

We're sizing the canvas to fit the entire window and setting the pointer-event CSS property to none so it makes the canvas invisible and the user can still click things behind it.

Finally, we'll get the 2d canvas context, which we can use to draw our snowflakes on.

But first, we need a function to generate a snowflake.

3. Create a snowflake



const createSnowflake = () => ({
    x: Math.random() * canvas.width,
    y: Math.random() * canvas.height,
    radius: Math.floor(Math.random() * MAX_SNOWFLAKE_SIZE) + 1,
    color: SNOWFLAKE_COLOUR,
    speed: Math.random() * MAX_SNOWFLAKE_SPEED + 1,
    sway: Math.random() - 0.5
});

This function will create and return a snowflake object which is at some random position on the page. We'll also create a random size (radius) for it, set its colour to the constant we defined and also give it a random speed with a minimum value.

In the second part of the tutorial, we introduce a sway property in order to move the snowflake either left or right as it falls down the page.

Now we need a way to draw the snowflake onto the canvas.

4. Draw a snowflake



const drawSnowflake = snowflake => {
    ctx.beginPath();
    ctx.arc(snowflake.x, snowflake.y, snowflake.radius, 0, Math.PI * 2);
    ctx.fillStyle = snowflake.color;
    ctx.fill();
    ctx.closePath();
};

We're just going to draw a circle with a radius as specified by the property on the snowflake object that's passed in.

5. Update a snowflake



const updateSnowflake = snowflake => {
    snowflake.y += snowflake.speed;
    snowflake.x += snowflake.sway;
    if (snowflake.y > canvas.height) {
        Object.assign(snowflake, createSnowflake());
    }
};

Here, we'll take one of our snowflake objects and update its x and y positions on the page. If it gets to the bottom of the page, we'll re-assign the reference of the snowflake to a new snowflake object.

6. Animating snowflakes



const animate = () => {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    snowflakes.forEach(snowflake => {
        updateSnowflake(snowflake);
        drawSnowflake(snowflake);
    });

    requestAnimationFrame(animate);
};

The animate function clears the current canvas and then loops through our array of snowflakes and updates their position, then draws them onto the canvas.

We can make a really smooth animation by simply calling this function repeatedly by passing it to requestAnimationFrame.

Of course, we haven't put any snowflake objects into our snowflakes array yet so let's populate those now and kick off the animation by calling the animate function.



for (let i = 0; i < NUMBER_OF_SNOWFLAKES; i++) {
    snowflakes.push(createSnowflake());
}

animate();

We should have a fully working snowfall animation on our page now!

7. Adding Event Listeners

If you try and resize your browser window at this point or scroll down to more content (if it exists on your page) then you'll notice that the snowfall effect is fixed to the top of the page and doesn't resize to fit the browser window.

Let's finish off our beautiful snowfall animation with a couple of event listeners to handle this.



window.addEventListener('resize', () => {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
});

window.addEventListener('scroll', () => {
    canvas.style.top = `${window.scrollY}px`;
});

Because we've written everything in JavaScript with no extra HTML/CSS required, we can just copy the code and drop it into any site. For example, here's how it looks on Amazon's site:

Conclusion

As mentioned in the video, this is just a bit of fun and not something you should probably add to your site unless your company is insistent on sending your site back to the 1990s :)

Thanks for reading and be sure to check out the full tutorial here if you want more details:

DevTips Daily Update 08/04/22

James Bubb — Fri, 08 Apr 2022 09:15:38 +0000

So this week we finished off the Rick and Roll full end-to-end project! 🎉

It’s taken a while and we’ve covered everything from design to devops to developing the app, hopefully you’ve leant a few things about creating and deploying an app.

Also, we returned to business as usual delivering juicy little bite-size dev tips about touch support, emojis as favicons and spellchecking (check out the new thumbnail style below 👇):

DevTips Daily - Rick and Roll Project - Creating a responsive view

DevTips Daily - Rick and Roll Project - Creating an offscreen navigation for mobile views

DevTips Daily - Rick and Roll Project - Toggling an offscreen navigation menu

DevTips Daily - Rick and Roll Project - Finale!

DevTips - Detecting touch support in JavaScript

How to use emojis for favicons

Spellcheck user input with just HTML!

More next week!

Thanks for watching 👍

DevTips Daily Update 01/04/22

James Bubb — Fri, 01 Apr 2022 08:14:34 +0000

So we're getting towards the end of our end-to-end project where we're creating a 'Rick Rolling' app.

We did some cool stuff though this week, including some date formatting with DayJS, buying a new 'short' domain to use in our app and also a bit of nginx configuration to point our new domain to our existing app!

DevTips Daily - Rick and Roll Project - Adding a short domain name

DevTips Daily - Rick and Roll Project - Configuring the short domain for production

DevTips Daily - Rick and Roll Project - Adding a redirect route in Express

DevTips Daily - Rick and Roll Project - Creating a short URL input

DevTips Daily - Rick and Roll Project - Redirecting users in the browser

DevTips Daily - Rick and Roll Project - Adding instructions and documentation to the app

DevTips Daily - Rick and Roll Project - Creating and adding a favicon

Next week, we’re going to be finishing off our app completely! There’s just a bit of work to do on tidying up styling and adding some mobile responsiveness!

Thanks for watching 👍

DevTips Daily Update - 25/03/22

James Bubb — Fri, 25 Mar 2022 10:00:59 +0000

So in this week’s tutorials we finished off the stats feature of our application and did some cool stuff like sharing stylesheets across apps in our Monorepo and saw some different ways to dynamically create HTML content with JavaScript/Typescript.

Here’s a link to each video this week:

DevTips Daily - Rick and Roll Project - Creating a GET endpoint to provide stats information

DevTips Daily - Rick and Roll Project - Changing the default port of an app in an NX MonoRepo

DevTips Daily - Rick and Roll Project - Parsing path or query params from a URL

DevTips Daily - Rick and Roll Project - Using Fetch to GET API data for our stats

DevTips Daily - Rick and Roll Project - Sharing Stylesheets across Apps (within an NX MonoRepo)

DevTips Daily - Rick and Roll Project - Creating a dynamic heading for the stats App

DevTips Daily - Rick and Roll Project - Creating a dynamic table

DevTips Daily - Rick and Roll Project - Adding table styles

DevTips Daily - Rick and Roll Project - Formatting dates with DayJS

DevTips Daily - Rick and Roll Project - Enabling Dynamic paths in Nginx Configuration

Next week, we’ll be getting a new domain setup for doing redirects (an actual short domain URL!) and doing and starting to tidy up our app ready for completion!

Thanks for watching

@codebubb

DevTips Daily Update 18/03/22

James Bubb — Fri, 18 Mar 2022 10:02:37 +0000

So in this week's update we did some cool stuff with Geolocation and used a free API to write the user's location into the database (for someone who has accessed a short url). This is to setup our stats data so we can start working on the newly created stats app!

Here's a link to each individual tutorial:

Viewing MongoDB records

Geolocating users by IP

Checking Geolocation details

Preventing unnessary Geolocation requests

Creating a GET endpoint to serve stats

Changing the default port of an NX App

Parsing Path / Query Params

Next week we're going to be carrying on with the project again, we're going to be working on the stats app and displaying stats to the user and starting to wrap up the rest of the Rick and Roll end to end project!

Thanks for watching 👍

DevTips Daily Update 11/03/22

James Bubb — Fri, 11 Mar 2022 11:17:58 +0000

So this week's DevTips daily tutorials are continuing on with our full end to end project and we're starting to see things come together now!

We've been doing some cool things with NX like creating a shared library, building a new web app and adding it to our deployment pipeline and also POSTing user choices to the backend and creating personalised shorturls based on those selections.

Here's a link to each individual tutorial:

Creating a shared library

Generating Option Elements for the Front-end

POSTing JSON data to the backend with Fetch

Handling the JSON data on the backend Express App

Redirecting users in Express

Creating a new web app and deploying it

Updating or replacing data in MongoDB

Next week we're going to be carrying on with the project again, we're going to be adding some geolocation to our stats and displaying that info to the user!

Thanks for watching 👍

DevTips Daily Update 21/01/22

James Bubb — Fri, 21 Jan 2022 10:47:43 +0000

So this week's DevTips daily tutorials have been a bit truncated - I was ill at the start of the year with COVID so i'm just catching up with things and starting to feel better!

I did publish a few videos however carrying on with our end to end project, looking at PM2 logs, securing the ports of our Digital Ocean droplet and creating specific Express routing files and finally doing a review of our progress on the project by looking at our User Stories!

Here's a link to each individual tutorial:

Viewing PM2 Logs

Securing a MongoDB database with Digital Ocean

Creating Express Routing Files

User Story Review

Next week we're going to be carrying on with the project again, starting to make progress on the front end side of things, giving the user something to generate the short URLs.

Thanks for watching 👍

DevTips Daily Update 10/12/21

James Bubb — Fri, 10 Dec 2021 14:42:50 +0000

So in this week's videos on DevTips Daily, we've still being carrying on with our end-to-end project and there's been lots of configuration and setup of our server to get it ready to deploy our code. For example, we setup a web server, pointed our domain to it and enable HTTPS with an SSL certificate!

Here's a link to each individual tutorial:

Installing nginx

nginx Configuration

Pointing the domain to the server

SSL with LetsEncrypt

Directories for Node App

Setup Node.js on the server

Setup Docker on Ubuntu Server

Next week we're going to be carrying on with the project again, we've got a touch more configuration to do and then we'll be revisiting our GitHub action to finally push our code to our server!

Thanks for watching 👍

DevTips Daily Update 03/12/21

James Bubb — Fri, 03 Dec 2021 13:25:27 +0000

So in this week's videos on DevTips Daily, we were carrying on with our full end to end project and we did a bit more work on the API in terms of setting up the redirect endpoint in Express. We then moved on to setting up a deployment pipeline with a GitHub action and finished up by starting to configure our Digital Ocean droplet to accept out code.

Here's a link to each individual tutorial:

Sending POST requests with Postman

Redirect Endpoint in Express

CI/CD Pipeline Overview

Creating a GitHub action

Installing and Building in the GitHub action

Adding a new User on the server

Setting / Resetting a user's password

Next week we're going to be carrying on with the project again, we're going to be finishing off setting up the server and getting our pipeline to push our code to the server!

Thanks for watching 👍

DevTips Daily Update 26/11/21

James Bubb — Fri, 26 Nov 2021 15:28:08 +0000

So in this week's videos on DevTips Daily, we were carrying on with our full end to end project and we got setup with our server on Digital ocean, starting creating some endpoints in the Express app for generating short urls and also got setup with a MongoDB database inside a Docker container.

Here's a link to each individual tutorial:

Setup hosting server

Connecting to server via SSH

Creating short URLs

Setup MongoDB with Docker

[Testing MongoDB connection](https://youtu.be/Pm2PWfKG1y0

Connecting to MongoDB in the API

Adding URLs to database

Next week we're going to be carrying on with the project again, we'll be setting up our redirect endpoint and starting to build our delivery pipeline with GitHub Actions!

Thanks for watching 👍

DevTips Daily Update 19/11/21

James Bubb — Fri, 19 Nov 2021 10:03:19 +0000

So in this week's videos on DevTips Daily, we made a start on our full end to end project mini-series. We got cracking with the project idea, took a look at writing Agile User Stories and got some boilerplate code setup using the NX CLI.

Here's a link to each individual tutorial:

Project Management Tools

Writing Agile User Stories

Project Name and Domain

Code Setup With NX

Serving the API with NX

Creating the GitHub Repository

Generate SSH Key Pair

Next week we're going to be carrying on with the project, setting up a server to host the project files, building a CI pipeline and more!

Thanks for watching 👍

React Project: Newsletter Signup form (using Formik, Netlify Functions & MailChimp)

James Bubb — Tue, 15 Jun 2021 11:53:34 +0000

Watch the full tutorial here -->

So in this React tutorial we'll be taking a look at the Formik forms library for React and seeing how you can use it to create and manage forms quickly and easily within your React projects.

We'll start off by getting the Formik library setup and then creating some simple inputs that the user can enter data into and we'll see how Formik handles all of the state management and form submission for us automatically.

Once we've got a basic form setup with Formik, we'll add a custom React label component and then wire up some validation to the form. We'll do this using the Yup library with our React form and you'll see it's really simple to create a Yup schema and then apply this to the Formik form. In fact, Yup and Formik work really well together.

With our validation in place we'll finish up the tutorial by creating a Netlify function to handle our form submission which will essentially pass this data to the email service provider MailChimp. We'll use the MailChimp API with React to submit the user's details they enter into the form to the MailChimp service. I'll take you through how to find your own MailChimp list ID and also MailChimp API token and successfully add contacts.

So I hope you enjoy this React Project tutorial from Junior Developer Central!