Great in-depth article by Paul Bakaus on the perception of vision, frame and refresh rate, motion blur, and TV displays. Worth a read as it gives on one a great insight in concepts such as 60fps and jank The Illusion of Motion → Related: The Runtime Performance Checklist
Tag Archives: link
Adaptive Placeholders
See the Pen Adaptive Placeholder by Danny King on CodePen. We’ve seen some floated labels before: when focussing a form field the placeholder seems to move towards a spot above the field. Adaptive placeholders goes a step further by also allowing one to change the text when something was entered into the field. Makes clever …
Multicolor Fonts in the browser
Seemingly out of nowhere, big guys like Apple, Google, Microsoft, Mozilla and Adobe are proposing multicolor font formats, and rushing to have them implemented in browsers and OSes. This sudden interest is not so much fueled by typographers, designers or web developers, but by an unlikely group: teenagers. More specifically: teenagers who demand their communication …
Advanced Animation Path with SVG
Neat animation of a roller-coaster following the tracks underneath. Uses an SVG as the animation path. The animated object itself is animated using tween.js. Also contains some cleverness to actually make the animated object point into the direction it is moving (viz. the roller-coaster its nose points towards the direction it is going, even inside …
Responsive tables with Tablesaw
Set of jQuery plugins by the clever folks of Filament Group for responsive tables. Comes with a few solutions such as stack (picture above), Toggle (where one can choose which columns to show), and Swipe (where you can scroll horizontally through the columns). Columns can also be sorted. Just set some data-* attributes on your …
Using the :target pseudo-selector for alternative layouts
Sometimes I want to see all the images [of my site] on a grid [instead of the regular layout]. I could have created a PHP script that responded to a querystring. Or a small JavaScript. But instead I used the :target pseudo-selector. It’s very simple. Neat trick by Vasilis: give the root html element an …
Continue reading “Using the :target pseudo-selector for alternative layouts”
CSS `will-change` Property
#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 …
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”