How to add text on-top of an image
I am slightly surprised that I haven’t done a post on this, yet. My intention with this blog post is to simply show how to layer text on-top of an image.
Continue reading "How to add text on-top of an image"Category: Coding
Showing countries on a map using Mapbox
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"
Showing a location 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"
You can add a map to your website without using google maps!
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!"
Playing with COVID-19 data: D3.js Bar Charts
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"
Playing with COVID-19 data
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"
Three ways to load lazily
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"
Data URLs
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
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"
What the heck is hoisting?
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?"