It has been years since CSS Houdini was revealed in 2016 and admittedly, it has been very slow going. Although, since the W3C task force was announced there have been a few things delivered.
If you’re not aware of CSS Houdini, it is a set of proposals and standards that allow access to lower-level aspects of the layout and CSS parser in web browser engines. It is basically an umbrella term used to describe a tonne of different API’s, some of which have already shipped and you might be familiar with.
CSS just continues to grow and evolve, much like its cousin Javascript. I thought I would share a few CSS layout properties that are still relatively unknown at the moment with developers. The first 3 are variations of almost the same thing, with the fourth being the most obscure and unsupported of them all.
place-items This one blows a lot of the minds of developers I’ve shown this too or told about. The place-items property is shorthand for align-items and justify-items CSS properties.
Some of you probably already knew this, but I only recently discovered this (accidentally) while building a wrapper around Postgresql queries in Node, and my mind is blown, to be honest.
Calling toString() on an array will automatically return the values within as a comma-separated string. Best of all, there will be no hanging comma and all whitespace is removed. Implementations based on join will have a space between the items, toString() on the array itself will not.
I was recently tasked with implementing pagination for an array of values (in some instances, over 2400 of them) and instead of using an existing library, I opted to write my own pagination logic and put it into an Aurelia value converter.
There are a lot of ways you can achieve this, you can use slice, you can use filter and reduce as well. The solution I ended up coming up with uses slice because it produces the easiest to read and simple code. Performance-wise, I do believe that filter comes out on top, but that isn’t our concern here.
Yes, I still play Pokemon Go and as the years have gone by, the game has only gotten better. A somewhat recent discovery for me is the fact the in-game search supports search strings. You can type in specific values into the search bar to filter Pokemon by region, whether they can be mega evolved and more specifically, their appraisal rating.
You know when you get your Pokemon appraised and you coloured bars, with 3 stars and filled bars meaning a 100% I.V rated Pokemon? Appraising one-by-one is frustrating and time-consuming, which is why I am delighted to discover that you can filter your Pokemon based on their appraisal rating.
The Firebase team has just released a new update for the Javascript SDK, version 7.21.0 in which a new feature was just added which will save anyone who uses Firestore possibly a lot of money.
In the update, the feature introduces two new where compatible query operators for filtering out data: not-in and !=.
not-in finds documents where a specified field’s value is not in a specified array. != finds documents where a specified field’s value does not equal the specified value. Neither query operator will match documents where the specified field is not present. Filtering in Firestore and Realtime Database has been notoriously limiting. You have to either query exactly what you want using where (say you want to get all items that have an active status). The ability to perform NOT IN clauses inside of traditional databases has been a staple for years, but notably absent in Firebase.
This is actually brilliant. While looking to see if anyone reasonable had an NVIDIA RTX 3080 card on eBay at a reasonable price (nobody did), I came across this drawing that someone is selling on eBay and people are actually bidding on it.
Sadly, this is probably the closest that anyone is going to get to possessing an RTX 3080 for the next few months. It’s clear that it was mostly a paper launch for Nvidia to get press coverage and the scarce availability helps build more hype and result in more sales.
The Bootstrap 5 alpha was announced a few months ago and I instantly jumped on it and started using it. The lack of jQuery and more robust colour palettes as well as grid system were too hard to pass up.
If you are reading this in the future and Bootstrap 5 has already been released, these instructions will still work for you. Admittedly, the approach I am taking here avoids the need for any package manager like Npm or Yarn, I’m going to show you a simple way.
After an endless stream of betas and release candidates, Vue 3 is finally here.
Congratulations to the Vue team and all of the contributors who made the release happen. As many of you know, I’m on the Aurelia core team and I’ve seen how hard it is shipping a new major release. Aurelia 2 itself has been in development for quite a while now.
I haven’t made my criticisms of React a secret and I am glad that there are frameworks and libraries still around challenging React/keeping it honest, even if it is the king of the hill at present. In Vue 3, there are new composition features, support for TypeScript (finally) and other features which are more React-esque.
Goodbye, “Can it run Crysis” and hello, “Can it run Microsoft Flight Simulator 2020” — it’s not a secret that MSFS 2020 is an intensive game that seemingly has been unable to run smoothly on high-end hardware since its late August 2020 release.
The game released and while it ran okay, it wasn’t smooth at higher settings and resolutions, the Nvidia 2080 ti owners were dismayed their powerhouse card couldn’t achieve what we now know is impossible.