One of the things that I tried to add to my website, last summer was a map that showed what countries I had visited. I was never able to come up with a solution that I really liked but this week’s little experiment might fit the need. You might remember from our previous Mapbox post …
Continue reading "Showing countries on a map using Mapbox"
Two weeks ago, we looked at how to embed a Mapbox map on a website. I figured that this time, we would look at how to mark a location on a map. We are going to look at two methods: dropping a pin on a map to show a location and drawing a shape to …
Continue reading "Showing a location on a map using Mapbox"
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"