A rather geeky/technical weblog, est. 2001, by Bramus
This content is quite old. You might want to check out this modern way of visual diffing, using Puppeteer instead Wraith uses either PhantomJS, CasperJS or SlimerJS to create screen-shots of webpages on different environments and then creates a diff of the two images, the affected areas are highlighted in blue By the folks over …
Continue reading “Wraith – A responsive screenshot comparison tool”
TDCSS helps you write and document solid, maintainable and modular CSS. It’s especially well suited to adopt a test-driven approach to CSS styling – but of course you may just as well use it to build a regular online styleguide. Not too sure about calling this test-driven though, as the verificiation process is not automated …
<div class="scrollme"> <div class="animateme" data-when="enter" data-from="0.5" data-to="0" data-opacity="0" data-translatex="-200" data-rotatez="90" > Yup, that’s all. </div> </div> ScrollMe is a jQuery plugin for adding simple scrolling effects to web pages. As you scroll down the page ScrollMe can scale, rotate, translate and change the opacity of elements on the page. It’s easy to set up and …
Continue reading “ScrollMe – A jQuery plugin for adding simple scrolling effects to web pages”
<div data-sr="enter left please, and hustle 20px"> Foo </div> <div data-sr="wait 2.5s and then ease-in-out 100px"> Bar </div> <div data-sr="enter bottom and scale up 20% over 2s"> Baz </div> <script src=’/js/scrollReveal.min.js’></script> <script> window.sr = new scrollReveal(); </script> Just add data-sr to an element, and it will reveal as it enters the viewport. The data-sr attribute …
Continue reading “scrollReveal.js – Easily reveal elements as they enter the viewport”
I set out to create a quick visual to summarize Flexbox when I run into these moments of pause in the future. I like to think of it as a little diagram (flow chart? decision tree-ish thing?) that is a cheatsheet…based on cheatsheets. (That’s only an extract, shown above) Flexbox Cheatsheet Cheatsheet →
Heydon Pickering: Despite its irreverent name and precarious form, the lobotomized owl selector is no mere thought experiment for me. It is the result of ongoing experimentation into automating the layout of flow content. The owl selector is an “axiomatic” selector with a voracious purview. As such, many will be hesitant to use it, and …
JS Bin Great JSBin by Jake Archibald, showcasing 4 ways to vertically center elements in CSS. Technique 2 has my preference: .technique-2 { position: absolute; height: auto; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } The great thing about CSS transforms is that the percentages are referenced to the element’s width/height
Adobe’s Web Platform group teamed up with Food Network to experiment with bringing their popular Cupcakes! tablet application to the web. See how we turned beautiful content from Food Network, hardware from Leap Motion, speech recognition, responsive tooling, and new layout and graphics standards into a next-generation web experience. Canvas Blend Modes, CSS Masks, CSS …
Continue reading “Making the Web Sweeter with Food Network and Cupcakes”
Naming things is by far the most difficult part of writing CSS. This is because we can’t predict the future. A class name might make perfect sense one day, then the design changes, and it’s a misnomer the next day. We’re then tasked with refactoring our markup and styles so that they make sense. Yuck. …