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
Huxley – Catching visual regressions in Web applications.
This content is quite old. You might want to check out this modern way of visual diffing, using Puppeteer instead 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, …
Continue reading “Huxley – Catching visual regressions in Web applications.”
Wraith – A responsive screenshot comparison tool
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”
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 …
Continue reading “DummyJS – Smart Functional Testing extension for PhantomJS”
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 …
Continue reading “Debugging Chrome using the Firefox Debugger”
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 …