|
|
|
|
Issue #131 (CSS Mistakes, Testing, Mobile, jQuery)01/21/16
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:
- 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.
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.
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!
Buy My JavaScript/DOM E-Book:
70 JavaScript and DOM Tips for $5 (EPUB, MOBI, PDF) |
Testing and Debugging Tools
AWRStudyr
Chrome extension that gives you instant tech and SEO info on the current web page (server, analytics, advertising, page speed, and more).
TraceGL
"Transforms your JavaScript, injecting monitoring code that produces a log of everything that happens."
TLStools
"Command line tool to analyze, troubleshoot or inspect TLS certificates, requests or keys."
jsLint.it
A fork of the original JSLint. This one "takes a JavaScript source and scans it. If it finds a problem, it returns a message describing the problem and an approximate location within the source."
Uprank
"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."
JsDebuggr
"Add, remove, enable, and disable breakpoints in JavaScript from the comfort of Sublime Text."
BugHerd
"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
Responsify.js
"jQuery plugin that makes images truly responsive, without sacrificing anyone's face."
Flutter
"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.
BreakpointTester
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
Web inspector, responsive testing, and JavaScript console for iPad.
Jekyll Srcset
"Dead simple responsive images for Jekyll. This Jekyll plugin makes it very easy to send larger images to devices with high pixel densities."
TruckJS
"Helps you make mobile apps using standard web technologies. It provides layouts, widgets, touch gestures, data filtering, data binding and more."
jQuery Plugins
Quick[select]
"Quick selection of common options in select boxes." Best to check out the demo to see exactly what this is about.
Resize End
A custom jQuery event for when a window resize operation ends.
jQuery lightGallery
"A customizable, modular, responsive, lightbox gallery plugin for jQuery."
Chocolat
A responsive lightbox plugin with a bit of a different twist.
enhance.js
"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
Addy Osmani's suggestion for JavaScript tooling in 2016.
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!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
|
|
|
|
|
|
