Creating Non-Rectangular Layouts with CSS Shapes

With the introduction of CSS Shapes into the web, wrapping content in custom non-rectangular shapes, and recreating print designs and layouts on the web becomes a piece of cake! In this article we’re going to go over the basics of declaring shapes, and creating some simple layouts using these new CSS technologies. Creating Non-Rectangular Layouts …

Grade components, not browsers

At Filament Group these days, we try to build our sites out of modular, independent components, and we document them for our clients that way as well. In taking a component-driven approach to building websites, we’ve found that the browser features required to offer an A-Grade experience of a particular component become much easier to …

Rendering Performance Case Studies

Once again another rock solid presentation by Addy Osmani on page performance. (RSS Readers: presentation embedded above. Original can be found here) Related: Gone In 60fps – Making A Site Jank-Free and all related posts to that post. Also see Paul Lewis’ talk from Fronteers 2013 on the subject.

Pencil, a stylus from the makers of Paper

Great tools inspire great ideas. Pencil is the most natural and expressive tool for getting ideas on Paper. Advanced technology meets beautiful design to keep you in the flow, without needing to switch tools. With Erase, Blend, and adaptive Palm Rejection, Pencil puts creative possibility in your hands. Neat that the back of the pencil …

Scroll Animations

A little Pen I knocked together to demonstrate “CSS Animations triggered on scroll” to some of my students. The key part is the animated class which actually starts the animation: it is only added once the element is in view. Check out this Pen! Note that the event handler is not debounced as we need …

jquery.unevent.js

A jQuery/Zepto plugin I’ve been using a lot lately to debounce (= attach with delay) event handlers. To be applied on scroll events for example, as you don’t want one long single scroll to pull down the performance of your webpage by constantly triggering the attached handling function. $(window).on(‘scroll’, function(e) { // update stuff *after* …