Convert Fahrenheit to Celsius with JavaScript / / No Comments The United States is one of the last bodies that refuses to implement the Celsius temperature standard. Why? Because we’re arrogant and feel like we don’t need to change. With that said, if you code for users outside the US, it’s important to provide localized weather data to users. Let’s took at how you can convert between Fahrenheit and Celsius. Fahrenheit to Celsius The formula to convert Fahrenheit to Celsius is: °C = 5/9 x (°F - 32) The following function converts Fahrenheit to Celsius: function convertFahrenheitToCelsius(degrees) { return Math.floor(5 / 9 * (degrees - 32)); } Celsius to Fahrenheit The formula to convert Celsius to Fahrenheit is: °F = (°C... more → Posted in: JavaScript Tagged with: Celsius, Convert, Fahrenheit, JavaScript
The World’s Largest Polluters / / No Comments The footprintMap is an interactive mapped visualization of the CO2 footprint of 118 countries around the world. Using the map you can discover the per capita CO2 output of each country and see which countries contribute the most and least to global heating. According to this map Singapore has the highest per capita CO2 footprint of any country. The United States has the 9th highest per capita Maps Mania… more → Posted in: Interactive Maps Tagged with: Largest, Polluters, world's
A Bare-Bones Eleventy Template for Glitch / / No Comments A few weeks ago I blogged about a simple Alpine.js template for Glitch projects. I’m still new to Glitch and wanted to give it a whirl with an Eleventy demo I wanted to share. Glitch has an Eleventy template, but it’s a bit verbose. It sets up a basic blog with sample posts and such, and that’s great to learn, but if you already know Eleventy, you may prefer to start off a bit simpler. With that in mind, I created this repository: https://github.com/cfjedimaster/glitch-eleventy It defines an .eleventy.js file that specifies an input and output directory. It sets up a very basic HTML layout and an empty index page that uses it. I also used Liquid for my demo whereas the Glitch-provided... more → Posted in: JavaScript Tagged with: BareBones, Eleventy, Glitch, Template
Earthquakes with Depth / / No Comments Earthquakes with Exaggerated Depth is an interactive globe which visualizes one year’s worth of earthquake activity around the world. The map was created by Esri’s Raluca Nicola using data from the USGS.On Raluca’s transparent globe earthquakes which occurred between July 2017 and July 2018 are shown with their depth exaggerated by a factor of eight. Each earthquake is shown on the map using a Maps Mania… more → Posted in: Interactive Maps Tagged with: Depth, Earthquakes
How to Use window.crypto in Node.js / / No Comments I’ve been writing a bunch of jest tests recently for libraries that use the underlying window.crypto methods like getRandomValues() and window.crypto.subtle key management methods. One problem I run into is that the window.crypto object isn’t available, so I need to shim it. To use the window.crypto methods, you will need Node 15+. You can set the window.crypto by importing the crypto package and setting it on the global: const crypto = require('crypto').webcrypto; // Shims the crypto property onto global global.crypto = crypto; I really loathe creating mock functions for missing libraries in Node because they can lead to faulty positives on tests; I really appreciate webcrypto... more → Posted in: JavaScript Tagged with: Node.js, window.crypto
Explore the First Route Around the World / / No Comments On September 20 1519 five ships set out with 239 men from Sanlúcar de Barrameda in Spain. Their goal was to find a new route to the Moluccan Islands, in Indonesia. On September 6 1522 just one of those ships, the Victoria, landed back in Spain. It was the first ship to have circumnavigated the globe. Only 18 men returned to Spain on the Victoria. Many of the others died on the journey, Maps Mania… more → Posted in: Interactive Maps Tagged with: around, Explore, first, route, World
How to Internationalize Numbers with JavaScript / / No Comments Presenting numbers in a readable format takes many forms, from visual charts to simply adding punctuation. Those punctuation, however, are different based on internationalization. Some countries use , for decimal, while others use .. Worried about having to code for all this madness? Don’t — JavaScript provides a method do the hard work for you! The Number primitive has a toLocaleString method to do the basic formatting for you: const price = 16601.91; // Basic decimal format, no providing locale // Uses locale provided by browser since none defined price.toLocaleString(); // "16,601.91" // Provide a specific locale price.toLocaleString('de-DE'); // "16.601,91" // Formatting... more → Posted in: JavaScript Tagged with: Internationalize, JavaScript, numbers
How to Extend Prototypes with JavaScript / / No Comments One of the ideological sticking points of the first JavaScript framework was was extending prototypes vs. wrapping functions. Frameworks like MooTools and Prototype extended prototypes while jQuery and other smaller frameworks did not. Each had their benefits, but ultimately all these years later I still believe that the ability to extend native prototypes is a massive feature of JavaScript. Let’s check out how easy it is to empower every instance of a primitive by extending prototypes! Every JavaScript native, like Number, String, Array, Object, etc. has a prototype. Every method on a prototype is inherited by every instance of that object. For example, we can provide every `Array... more → Posted in: JavaScript Tagged with: Extend, JavaScript, Prototypes