AR.js is Efficient Augmented Reality for the Web using ARToolKit. It is Fast! It runs efficiently even on phones. 60 fps on my 2 year-old phone! it is a pure javascript solution, fully opensource. It works on any phone with webgl and webrtc AR.js: Efficient Augmented Reality for the Web →
Masonry Layout with CSS Grid and grid-auto-flow: dense;
By setting grid-auto-flow: dense;, the Grid auto-placement algorithm will attempt to fill in holes earlier in the grid if smaller items come up later, resulting in a Masonry-like layout. (click for demo) (via) 💁♂️ Do note that the result isn’t 100% masonry, but masonry-like. As Rachel Andrew – who else – notes: At first glance …
Continue reading “Masonry Layout with CSS Grid and grid-auto-flow: dense;“
Morphing Page Transition
A simple morphing page transition effect where an SVG path gets morphed into another while the current page moves up. Whilst the intro/splash screen is translated vertically over a distance of 200vh the shaped in the SVG at the bottom grows from a few pixels in height to 100vh, creating the gooey effect. <div class="content …
How to use Redux in highly scalable JavaScript applications
Alexis Mangin: I have recently worked on the first version of a React-Native mobile app for one of my clients, which desired to architecture the app in a scalable way for a painless experience to add new features later. I believe we should always think about app architecture that way as it can always scale …
Continue reading “How to use Redux in highly scalable JavaScript applications”
Arya vs Brienne Lightsaber Duel
CSS Utility Classes and “Separation of Concerns”
Haha, now this sounds all too familiar: Over the last several years, the way I write CSS has transitioned from a very “semantic” approach to something much more like what is often called “functional CSS.” The author lists 5 stages: Phase 1: “Semantic” CSS Phase 2: Decoupling styles from structure Phase 3: Content-agnostic CSS components …
Continue reading “CSS Utility Classes and “Separation of Concerns””
Removing that ugly :focus ring (and keeping it too)
Update 2021-01-28: Nowadays we can use :focus-visible for this; No JavaScript needed! David Gilbertson: You click a button and see a blue border telling you that you’ve clicked on something that you know perfectly well you’ve just clicked on — because you just clicked on it. So it’s clear: the outline must go. But hold on a …
Continue reading “Removing that ugly :focus ring (and keeping it too)”
CSS Grid Highlighter for Google Chrome
Palestine Archipelago if it were in the ocean
Fastlane Screencast: Integrate fastlane into your Ionic Framework build process
fastlane are an awesome bunch of tools. Josh Holtz has recently started Fastlane Screencast, a website with videos/tutorials for explaining and implementing built-in fastlane tools, fastlane actions, third-party fastlane plugins, continuous integration, and anything else that fastlane can possibly do. The first video covers integrating fastlane into your Ionic Framework build process: A second tutorial …
Continue reading “Fastlane Screencast: Integrate fastlane into your Ionic Framework build process”