Forem: jbroomer

Prefetching Images in JS

jbroomer — Tue, 19 Jan 2021 13:05:02 +0000

Loading...

These are mad times we live in, mad! There is an insatiable demand for a silky smooth user experience, instantaneous loading times, and unlimited content.

When thinking about load times, one thing that comes to mind is images. Have you ever experienced the frustration of being on a loaded webpage, only to have to wait for images to load on further interaction with the page. Of course you have. If you are developing a website with many images you will undoubtedly want to spare your users from this vexation.

Luckily, there is a simple way to go about this if:

You have the image URLs ahead of time
You can accurately predict which images the user will likely see next

If the above isn't true then this article may not be super useful to you.

Basic Prefetching

const urls = [
  "shorturl.at/auLWY",
  "shorturl.at/sBTX5"
];
urls.forEach(imageUrl => {
    const imageElement = new Image(); // Create new image element
    imageElement.onload = () => {}; // Do something on success
    imageElement.onerror = () => {}; // Do something on error
    imageElement.src = imageUrl; // Set the image URL which will trigger a network request
};

Let's talk about why the approach above actually works.

The Image constructor, which is functionally equivalent to document.createElement('img'), creates a new image instance. The purpose of creating these images is not for display, but rather to set the image src attribute which in turn will trigger a network request for the image. If you can accurately predict which images the user is likely to see next based on some logical flow of interaction, then you can ensure the images have already been delivered to the browser by the time the user gets there.

This may seem trivial, but for large scale applications it can save a significant amount of time. In order for this to work effectively, you will need to find a practical place to prefetch in your current environment: before the user sees the images and after any heavy initialization tasks as to not affect your web application's initial load time.

Prefetching w/Promises

const urls = [
  "shorturl.at/auLWY",
  "shorturl.at/sBTX5"
];
Promise.all(urls.map(imageUrl => {
  return new Promise((resolve, reject) => {
    const imageElement = new Image(); // Create new image element
    imageElement.onload = () => { resolve(); }; // Do something on success
    imageElement.onerror = () => { reject(); }; // Do something on error
    imageElement.src = imageUrl; // Set the image URL which will trigger a network request
  };
}))
.then(() => {}) // Do something after all images load
.catch((err)=> {}); // Do something if there are any errors

Additionally, if find it necessary to have more control over the loading state of your images, such as triggering some function when they all load successfully or to conditionally display some skeleton component, there is an easy way to do so using promises.

Simply map each image url to a new promise and resolve/reject the promise as it suits your needs. Wrap the promise array in a Promise.all and use the then and catch methods to execute the appropriate action. That's it!

I hope this article has helped you understand how you can use prefetching to improve your web application's user experience. Let me know in the comments if it works for you!

Node.js + Cron === 💪🏼💪🏼💪🏼

jbroomer — Fri, 10 Jul 2020 12:30:21 +0000

TLDR; wrote script to automate new gym registrations everyday. Tell me in the comments below what you have done to solve your COVID quarantine problems.

CODING FOR COVID Everyone has been affected by COVID-19 in some way. Many states were shutdown for an extended period of time, something that I don't think most people have come close to experiencing. But that doesn't mean life can't go on! As programmers we are to be critical thinkers, looking to solve our problems and hinderances. I want to talk about one that I solved and hear about your own! I call it: Coding for Covid.

Businesses in my area have begun their reopening. I guess I should really write, reopening*****, since there are numerous strict health and safety guidelines. One such business reopening I have been anticipating the most is the gym, which naturally have some of the strictest requirements. For example, almost 2/3 of the gym equipment is closed off, the usual 24/7 gym hours have been cut back to 7:00am-6:30pm (with an hour in-between that they close for cleaning), and to top it all off, you have to register two days in advance for one of the allotted time slots that has a maximum capacity of 25 people. This is a large facility. I'm sure you can imagine how quickly the most popular time slots fill up.

First, let me be clear, I am completely on board with the guidelines and keeping everyone safe.

As dedicated to my workout regimen as I am, time slots only open two days in advance and I simply cannot be online at the exact time each day to secure a slot. So, this got me thinking.

I took one look at the network requests on the registration website and knew I could start cooking something up. I decided to use Node.js to write the script and axios to make the network request with the proper authentication. A couple hours later I successfully signed up to a class through my terminal.

Now, I needed this to run at the same time every day so obviously my head immediately went to Cron Jobs. However, I don't have a machine that will, reliably, be on all the time.

Cue in: Google Compute Engine

I configured a super low-end linux machine: lowest amount of RAM, standard 10GB storage, etc. I pulled down my script file from git and 20 minutes later I was ready to go.

Of course I took proper precaution to not sign up for any at risk time slots as, thankfully, I am not at risk. My next plan is to configure some quick commands to cancel my registrations to free up time for everyone else in the event that I cannot make it on a given day.

What have you done to Code for Covid?

Information Error: Duplication Overload!?

jbroomer — Tue, 30 Jun 2020 21:32:53 +0000

Edit: Discuss your most used resources/authors in the comments below!

TLDR; Thank you to anyone who has ever answered online questions or made online tutorials.

Information. Perhaps one of the most notable characteristics of our time is the sheer amount of information available at our finger tips. Now, of course someone can (and will) play Devil's advocate and exacerbate all of the "disservices" being done with that amount of information.

Well, I'm only here to talk about the good.

Thought Experiment Time: close your eye's and....
Just kidding don't do that. If you've already done it then it's too late, otherwise, keep reading.

Imagine yourself back in your Intro to Computer Science, Intro to Engineering, or whatever Intro course may have been your first; a time where terms such as Object Oriented Programming, Higher Order Functions, Tree Searches may have had little meaning to such an innocent mind. If you are still at this point, bless your soul. If not, perhaps these memories have been repressed due the severe, irreversible, damage it may have caused otherwise, but try to remember.

Still in the shoes, of your younger, irreproachable, self. Do you remember the hundreds if not thousands of articles, blog posts, video tutorials, etc. All tailored to your specific topic and each one slightly different than the last. We all learn in different ways so, if one author didn't get through to you then perhaps the next one made it click!

That is really what this post is about, it is a thank you. To all of the developers, educators, and anyone else out there that has used their time to answer a question or post a tutorial.