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 …
Author Archives: Bramus!
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 …
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”