#header { will-change: opacity; } Modern CSS renderers perform a number of complex optimizations in order to render webpages quickly and efficiently. Unfortunately, employing these optimizations often has a non-trivial start-up cost, which can have a negative impact on the responsiveness of a page. The will-change property defined in the CSS Will Change Module allows …
How a Racoon became an Aardvark
“Sort of as a joke, I slipped in the ‘also known as the Brazilian aardvark’ [at the Wikipedia entry of the coati] and then forgot about it for awhile.” When Breves made the change, he assumed that someone would catch the lack of citation and flag his edit for removal. Over time, though, something strange …
Great minds …
Heroku <3 PHP
Good news from Heroku: PHP is (finally) properly supported. Just add a composer.json file to your repo and Heroku will know your app runs PHP. Yes, you see that right: Composer is supported. Whenever you push your code to Heroku, it will install the dependencies if needed. $ git add . $ git commit -m …
GitBook: Build beautiful interactive books using Git and Markdown
Write your books and courses using Markdown, GitBook will convert it to a complete static website. Installable using npm. A companion app (pictured below) to create your books – in case you want a live preview along your edits – is also available. Building the book to a PDF/eBook is also possible … strongly considering …
Continue reading “GitBook: Build beautiful interactive books using Git and Markdown”
Trianglify
HalfStyle: Style Half of a Character by CSS
Sparked by the question “Is it possible to apply CSS to half of a character?” on StackOverflow, HalfStyle was created: HalfStyle is a set of advanced CSS rules that allow styling each half or third of a character, vertically or horizontally, independently and individually. Works on any dynamic text, or a single character, and is …
Continue reading “HalfStyle: Style Half of a Character by CSS”
Velocity.js – Accelerated JavaScript animation
Velocity is a jQuery plugin that re-implements $.animate() to produce significantly greater performance (making Velocity also faster than CSS animation libraries) while including new features to improve animation workflow. Velocity includes all of $.animate()’s features while packing in color animation, transforms, loops, easings, sequences, and scrolling. Velocity is the best of jQuery, jQuery UI, and …
Continue reading “Velocity.js – Accelerated JavaScript animation”
Reading Position Indicator
Lately I’ve seen quite a few websites that have some kind of an indicator to display the current reading position (how much you have “read”, depending on how far you have scrolled down an article). In this article, we’ll focus on a technique that uses a horizontal progress bar as the indicator. But instead of …
Parallax Done Right
Parallax has become, for better or worse, an increasingly popular web trend. Done right, it feels awesome. The problem is, a vast majority of sites using parallax suffer from terrible scroll performance. A good refresher on how to do high performance animations Parallax Done Right → Related: High Performance Animations → 2D transform’s translate() vs …