Issue #119 (CSS Tools, Productivity, Testing/Debugging)
(Skip to the tools section below)
Just got back from CSS Dev Conf in Long Beach, California, and it was a really fun time (which also explains why this week's issue is one day late). Got to meet some people that I've worked or communicated with online for ages, but never in person – including Estelle Weyl (who I co-authored two editions of a book with – it's about time we met!), Chris Coyier, Dave Rupert, Philip Walton, Sara Soueidan, Jonathan Snook, James Steinbach, and lots more.
The slides for my talk "DOM Features You Didn't Know Existed", along with all the resources included, can be found on my website. Anyone who's been subscribed to Web Tools Weekly for some time should recognize most of what I discussed. Of course, how could anyone focus on my slides when the room was being invaded by a giant octopus?
Next week I'll be back with the usual code tip/tutorial in this intro but the tools are still here, and there are lots of good ones this week!
CSS and HTML Tools
"A tiny (<1kb gzipped!) library for recreating Instagram filters with CSS filters and blend modes."
A Photoshop plugin (OSX / CC2015) that lets you apply HTML/CSS to elements in your PSD files and the output is rendered on the fly.
"Write modular and scalable CSS using the next version of ECMAScript."
"Pure CSS3 Slider with multiple animation options."
"Polyfill for the HTML inert attribute."
An alternative to the HTML imports standard while browsers catch up in support.
HTML Color Codes
"Get HTML color codes, Hex color codes, RGB and HSL values with our color picker, color chart and HTML color names."
Pure CSS Apple Device Generator
Produce animatable iOS/OSX devices for showcasing a mobile app or other tool on a web page.
"A search tool for Google web fonts."
An open source, self-hosted Slack alternative.
"A bookmarklet with some simple tools you can use to makes websites print better."
"Use Gmail to send email marketing campaigns to 2,000 people. Personalization. Scheduling. Open and click tracking."
"Chrome extension to quantify your coding with automatic time tracking and metrics about your programming."
A powerful email client for Windows Connect all your favorite email, calendar, task, and messaging apps into one.
"Replace your Facebook feed with something positively distracting like Hacker News, Designer News, Product Hunt, Dribbble and more."
"Task management for teams made easy. Boost your team’s productivity, strengthen communication, improve efficiency and make worklife simpler."
"Mute or unmute your MacBook based on your current wifi network." Useful if you use the same computer at different locations.
Slack to RSS
"Create an RSS feed from links in your Slack channels."
Testing and Debugging Tools
"Automated network diagrams. No more tedious updates to your documentation. Generate diagrams of your AWS environments."
PHP Debug Bar
"Integrates easily in any projects and can display profiling data from any part of your application. It comes built-in with data collectors for standard PHP features and popular projects."
"Detect and diagnose errors in production. Track errors and crashes in real-time and see affected users with one simple code snippet."
Real-time cross-browser automation.
A Tweet for Thought
Michael Mahemoff's mini Tweet storm on bell and whistle-driven development.
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...
Remember Anthony Calzadilla of CSS3 animation fame? Well, he's back at it again with an SVG/GreenSock Incredible Hulk demo.
Thanks to all for subscribing and reading!