Issue #209 (Keeping Up, CSS Tools, Build Tools, RWD/Mobile)
At one of my previous jobs working for a web design and development agency, one of the things that was strongly encouraged was spending at least one hour every day reading up on news, design inspiration, keeping up with new features, tools, etc.
This was around 2008-2010, so that was basically at about the time when design and development blogs started popping up everywhere. Smashing Magazine and CSS-Tricks had just started to gain popularity and many other blogs started to mimic their styles.
This was also about the time period that GitHub had launched and was gaining momentum, eventually leading to what I like to call the Cambrian Explosion of Tools, which continues to this day.
I think most places that employ web developers and designers recognize the value of spending time each day learning new tools, experimenting, or just reading some dailies and weeklies to catch up on news.
Does your workplace encourage this sort of thing? Do you like to start your day by catching up on RSS or email subscriptions? Or do you prefer to do it at the end of the day? Or maybe you're too busy most days and you like to wait until there's down time.
If you have any interesting stories to share in this regard as to what works best for you in trying to keep up with stuff, and how your employer feels about that, feel free to respond to this email and let me know.
Now on to this week's tools!
CSS and HTML Tools
Now at version 2+. Uses ES6 template literals and the power of CSS to allow you to attach CSS to your React components while removing mapping between components and styles.
A minimal classless CSS framework and theme.
Functional and customizable CSS utilities with familiar names.
A library of hand-picked CSS gradients.
Gradient buttons with hover effects.
A modern, elegant and minimal, CSS-only tooltip library.
Flex Layout Attribute
Layout helper based on the flexbox specification designed to serve as a quick flexbox shorthand by using two custom HTML attributes — 'layout' and 'self'.
Task Runners, Build Tools, etc.
JSON Schema to TypeScript Converter
Online tool, title says it all.
Gulp, Grunt, etc., are great for complicated build workflows. Sometimes you want something simpler that doesn't take lots of configuration to get up and running.
An in-browser module loader configured to get external dependencies directly from CDN.
Online CoffeeScript to ES6 converter.
A whole slew of free online converter tools, beautifiers, minifiers, validators, utilities, and lots more.
RWD and Mobile Tools
A library to create multi device experiments. You have to watch the video demos to see this in action, pretty cool stuff.
Mobile app development platform that lets you build native apps in your browser, without coding.
Mobile-friendly image viewer (like a lightbox) plugin.
Visual mobile and desktop development in the cloud, for developers of all skill levels.
Drag and drop mobile apps for your iPhone, Android, and Mobile web customers.
A Tweet for Thought
Harry Roberts' advice on future-proofing your code. More discussion/tips in the original thread too.
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...
Thanks to all for subscribing and reading!