Technical breakdown – with source code – of how the Stripe: Open Source website was created. Embedded above is a video of the “3D cards” used on the site. Stripe Open Source: Behind the Scenes →
Tag Archives: webdev
CSS Specificity Graph Generator
Online Specificity Graph Generator. Just paste in a blob of CSS and the graph will be generated. CSS Specificity Graph Generator → If you’re looking for an offline tool, CSS Reporter has got you covered.
Huxley – Catching visual regressions in Web applications.
Watches you browse, takes screenshots, tells you when they change. First you record a basic flow and take screenshots in between. Afterwards, when you’ve done some changes, you can let the flow play back again, and Huxley will re-take screenshots to compare with the ones from the first run. Video above shows how it works. […]
Wraith – A responsive screenshot comparison tool
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 at the BBC. Video tutorial right here: Wraith →
DummyJS – Smart Functional Testing extension for PhantomJS
open http://my.test.site type :text John click “Say hi!” assertText .greeting Hi, John! $ dummyjs mytest.dummy ✓ open http://my.test.site ✓ type :text John ✓ click “Say hi!” ✓ assertText .greeting Hi, John! PASS: Executed 4 actions in 1s. DummyJS makes writing and running automated functional tests for websites and webapps incredibly easy. Tests can be run […]
7 Principles of Rich Web Applications
My approach is to examine the usage of JavaScript exclusively from the lens of user experience (UX). In particular, I put a strong focus on the idea of minimizing the time it takes the user to get the data they are interested in. Starting with networking fundamentals all the way to predicting the future. Server […]
Choosing good CSS class names
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. […]
Debugging Chrome using the Firefox Debugger
Developing across multiple browsers and devices is the main issue developers have when building applications. Wouldn’t it be great to debug your app across desktop, Android, and iOS with one tool? We believe the Web is powerful enough to offer a Mobile Web development solution that meets these needs. Enter an experimental Firefox add-on called […]
Google Chrome DevTools Device Mode
Click the icon marked with the pink-ish circle to open Device Mode. Click the icon marked with the red circle to activate the Media Query Inspector. One can quickly choose a device and also throttle the network using the blue and orange dropdowns at the top. You might have to enable Devtools Experiments in Canary […]
Software in 2014
We’re at an inflection point in the practice of constructing software. Our tools are good, our server developers are happy, but when it comes to building client-side software, we really don’t know where we’re going or how to get there. Great read, by Tim Bray. Could pull a ton of quotes from this post, but […]