Issue #131 (CSS Mistakes, Testing, RWD, jQuery)
If you haven't seen it yet, the folks at the CSSWG have produced a document called Incomplete List of Mistakes in the Design of CSS. The idea here is to list stuff that should have been done differently when those features were created.
Some examples from the list:
There are tons more on the page, but you get the picture. It's interesting to see how things could have been done differently and (in many cases) in a much more developer-friendly and intuitive manner.
- white-space: nowrap should be white-space: no-wrap (notice the hyphen)
- vertical-align should not apply to table cells
- z-index should be called z-order or depth and should Just Work on all elements (don't we wish?!)
- The currentcolor keyword should have a dash, current-color.
Even more interesting is a PostCSS plugin created by Jonathan Neal called Time Machine that actually fixes a bunch of these issues.
Now on to this week's tools!
Testing and Debugging Tools
Chrome extension that gives you instant tech and SEO info on the current web page (server, analytics, advertising, page speed, and more).
"Command line tool to analyze, troubleshoot or inspect TLS certificates, requests or keys."
"Analyzes your website & builds a digital marketing strategy for your site in the form of comprehensive tasks."
Smartphone Test Farm
"Control and manage real Smartphone devices from your browser."
"Bug tracking so simple. It's like sticky notes on a website. Capture client feedback, resolve issues and manage projects visually."
RWD and Mobile Tools
"jQuery plugin that makes images truly responsive, without sacrificing anyone's face."
"Project to help developers build high-performance, high-fidelity, mobile apps for iOS and Android from a single codebase."
The Goldilocks Approach
An HTML/CSS boilerplate that uses "a combination of Ems, Max-Width, Media Queries and Pattern Translations to consider just three states that allow your designs to be resolution independent."
Check the thumb!
Drag a screenshot of your app's UI to see if CTAs are in the thumb hotzone on iOS devices.
Bookmarklet that scans a website's stylesheets to find user-defined Media Query breakpoints. It lets you check responsive designs by breakpoints rather than device widths.
Ergo Web Tools
"Dead simple responsive images for Jekyll. This Jekyll plugin makes it very easy to send larger images to devices with high pixel densities."
"Helps you make mobile apps using standard web technologies. It provides layouts, widgets, touch gestures, data filtering, data binding and more."
"Quick selection of common options in select boxes." Best to check out the demo to see exactly what this is about.
A custom jQuery event for when a window resize operation ends.
"A customizable, modular, responsive, lightbox gallery plugin for jQuery."
A responsive lightbox plugin with a bit of a different twist.
"jQuery plugin for image zooming – now with support for object-fit/object-position, powered by Velocity.js animations, complete with some pre-defined image cropping classes."
A Tweet for Thought
Suggestions / Corrections
Made something? Send links via Twitter @WebToolsWeekly (details here). No tutorials or articles, please. If you have any suggestions for improvement or corrections, feel free to reply to this email.
Before I Go...
Here's a neat pure CSS demo by Noah Blon that lets you do image colorization using the browser's native color picker.
Thanks to all for subscribing and reading!