CSS content-visibility / / No Comments The CSS language is full of small gaps which are frustrating to navigate. Between CSS properties to hide a container and its contents, there is still room for improvement. visibility: hidden keeps height and width integrity while display: none on a container hides everything. You can use .container > * to hide all contents of a container, but what if there was a better way? There is a better way to hide the contents of an element while respecting the container’s border and dimensions. That better way is using the content-visibility property: .my-container.contents-loading { content-visibility: hidden; } A demo of such functionality: See the Pen Untitled by David Walsh... more → Posted in: JavaScript Tagged with: contentvisibility
How to Get a Base64 Version of a File From Command Line / / No Comments A while back I wrote an article on how to Convert Image to Data URI with JavaScript. It’s a neat trick developers can use for any number of reasons. Instead of abusing canvas, however, why not simply get the base64 data from command line? You can use base64 and pbcopy to convert a file to base64 and copy it to the clipboard: # base64 gets data, pbcopy copies to clipboard base64 -i logo.jpeg | pbcopy Once you have the file data copied in base64 format, the URL format to use the data is: # data:{mime-type};base64,{data} data:image/jpeg;base64,/9j/4AAQSkZJRgAB...... While base64 data and data URIs do look cryptic, they’re useful to avoid making requests to other files. I use them... more → Posted in: JavaScript Tagged with: Base64, Command, file, from, line, version
US Car Fatality Hotspots / / No Comments The U.S. Department of Transportation has released a series of interactive maps which visualize where fatal road accidents are a problem on America’s roads. The number of roadway fatalities and the fatality rate on U.S. roads increased in 2020 and 2021. In Our Nation’s Roadway Safety Crisis the DoT has created a series of maps which visualize fatality hotspots, fatalities compared to the Maps Mania… more → Posted in: Interactive Maps Tagged with: Fatality, Hotspots
How to Get a Computer’s Hardware ID / / No Comments Cheating in online games is a huge issue these days — just ask anyone playing PUBG. Cheaters aren’t difficult for players to spot but vendors oftentimes don’t do enough to punish these villains. Krafton recently announced they would start banning cheaters by hardware ID, which got me thinking about how you can get a user’s hardware ID. There’s no definitive “hardware ID” provided by a machine, but you can create your own based on how specific you want to get. The hardware ID you create can be created from multiple pieces of hardware. Let’s discover how to get important IDs of different hardware components: # Get information about the motherboard... more → Posted in: JavaScript Tagged with: Computer’s, Hardware
The Map of Reddit Now Has Street View / / No Comments The Map of Reddit now has a ‘Street View’ option which allows you to explore this organisational network map of the world’s subreddits as a 3D environment. The Map of Reddit is an interactive map which organizes and plots subreddits based on their similarity. Subreddits are individual subject forums on the social news forum Reddit. On this Map of Reddit individual subreddits are positioned near Maps Mania… more → Posted in: Interactive Maps Tagged with: Reddit, Street, View
JavaScript Array Group / / No Comments Managing, sorting, and manipulating data with JavaScript is a skill we’ve often delegated to third party libraries like lodash. As the JavaScript language progresses, however, these features eventually get. added to the JavaScript specification. Two such APIs for grouping of Array data are `Array.prototype.group and Array.prototype.groupToMap. Array.prototype.group To group an array of objects by a given property, call the group method with function that returns the grouping string: const teams = [ { name: "Arsenal", origin: "London", tier: "legendary" }, { name: "Manchester United", origin: "Manchester", tier: "legendary" }, { name: "Liverpool", origin: "Liverpool", tier: "legendary"... more → Posted in: JavaScript Tagged with: Array, Group, JavaScript
Population Stripes / / No Comments Julien Gaffuri, a cartographer at Eurostat, has created an interactive map which allows you to place stripes of any size and orientation on a map of Europe and discover the percentage of the continent’s population living within the area covered by the stripe.Julien’s Population Stripe map uses population data from the statistical office of the European Union, and provides some very iinteresting Maps Mania… more → Posted in: Interactive Maps Tagged with: Population, Stripes
Using the Cookie Store API / / No Comments Today while browsing a list of web APIs over at MDN, I ran across one that surprised me – the Cookie Store API. This is clearly marked as experimental (currently only supported in Chrome/Edge) but looks to be fascinating. Cookies are the oldest (as far as I know) way for web applications to store data on the client. They’re also typically the least recommended way of doing so, for many, many reasons. However, sometimes you need to work with cookies, and this looks like a really nice new way of dealing with them. Here’s a quick look. The Old Way # For the past few hundred years or so, working with cookies in the browser involved string parsing. There really wasn’t even... more → Posted in: JavaScript Tagged with: Cookie, Store, using