Back in April, I visited Aztalan State Park and despite the recent death of my truck, I still want to continue with my plan to visit every state park in the Wisconsin State Parks system. My first thought when I set the goal was to just track it on my main website. While that works, …
Continue reading "State Parks App: The Plan"
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"
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"