So, you want to add a map to your website but you don’t want to (or can’t) use Google Maps? Luckily, you have a few options. The one that we are looking at today is Mapbox (which uses OpenStreetMap data). Mapbox has the benefit of a generous free tier (unlike Google Maps), and it’s pretty …
Continue reading "You can add a map to your website without using google maps!"
Last week, we gathered COVID-19 statistical data. This week, we are going to try to build some charts using D3.js. D3.js is a javascript library that allows you to generate some fairly fancy charts and graphs but we are going to start with some basic bar charts. Let’s take a look at a simple example. …
Continue reading "Playing with COVID-19 data: D3.js Bar Charts"
I have been wanting to work with some statistical data for a while now. Recently, I came across The COVID Tracking Project (a project of The Atlantic) and I figured that I would would look at what I could get out of the project’s APIs. The project has a lot of API endpoints but I …
Continue reading "Playing with COVID-19 data"
Lazy loading is a method for optimizing a website by loading images (or iframes) on demand. If properly implemented, the browser should load the images that are at the top of the page first and wait to load the rest until the user starts to scroll down the page. This is something that is relatively …
Continue reading "Three ways to load lazily"
Last week, we talked about CSS sprites and a large benefit of it was that the user didn’t need to retrieve as many image files from the server. This week, we are going to look at how to not need to retrieve ANY image files from the server. The method is something called data URLs. …
Continue reading "Data URLs"
CSS sprites is a method where you take multiple images and combine them into one single image so that you can use to reduce the number of assets that are loaded when someone visits the webpage. I don’t think that it does anything for the total download size of the images but it does reduce …
Continue reading "CSS Sprites"
This is a topic that I have been avoiding (mainly because I don’t feel like I understand it enough). I figure that we have to tackle the idea eventually, though. Hoisting is a JavaScript mechanism where variable and function declarations are moved (or hoisted) to the top of the scope before the code is executed. …
Continue reading "What the heck is hoisting?"
Last week, we looked at arrow functions. This week, I figured that we would look at Classes. Support for classes was another thing added to JavaScript with ES6. See the Pen JavaScript Classes by Joe Steinbring (@steinbring) on CodePen. In the above example, there is a Person class and a Person2 class. The difference between …
Continue reading "JavaScript Classes"
ECMAScript 6 introduced some interesting new stuff. We have already covered let and const, previously. I figured that it is time to cover arrow functions, now. See the Pen Arrow Functions – Part 1 by Joe Steinbring (@steinbring) on CodePen. As you can see in the above example, at the very least, this new syntax …
Continue reading "JavaScript Arrow Functions"
This is going to be a relatively short post. We have been doing a lot of [x] vs [y] vs [z] posts lately and this one is no different. Today, I figured that we would look at Prototype.call() vs Prototype.apply(). Both apply() and call() are used to invoke functions. The difference is that call uses …
Continue reading "Prototype.call() vs Prototype.apply()"