Web Tools Weekly Issue #1 (Sass, CSS/HTML, jQuery)

Issue #1 (Sass, CSS/HTML, jQuery)07/25/13

Welcome to the first issue of Web Tools Weekly!

I know what you're thinking. The web development industry needs another weekly newsletter like I need a crushed-ice enema. Well, I promise this newsletter will fit in nicely with whatever other weeklies, monthlies, and dailies you currently subscribe to. This one will be primarily focused on tools.

But this won't be a dry list of what's new, rehashing stuff you've likely already seen and will probably see again. Instead, each issue of Web Tools Weekly will begin with a short tutorial or brief discussion of some front-end coding technique. Sometimes it'll be a simple JavaScript or CSS feature, in other issues I'll focus on a particular HTML5 API feature, and still others I'll break down something cool about a particular tool or third-party library.

And of course, each issue will close with the ubiquitous list that we all say we hate but secretly we love — with a special focus on tools. Some lists will be themed around a particular aspect of front-end development, while others will be broken down into categories.

Well, that's it for introductions in this one. No tutorial in this issue; look for that in issue #2. Below you'll find this week's list of tools to get things kicked off.

Preprocessor Tools

Prepros
This looks like a cool app. It 'compiles anything', including LESS, Sass, Stylus, Jade, CoffeeScript, Haml, and more. It also does JS concatenation, live CSS injection, includes a built-in HTTP server, and has no dependencies.

Bourbon
A simple and lightweight mixin library for Sass. Covers a number of CSS features and also works with CodeKit, Hammer, and LiveReload.

Preboot
From Mark Otto, a comprehensive and flexible collection of LESS utilities. Named as such because its original variables and mixins became the precursor to Twitter's Bootstrap.

MVCSS
A Sass-based CSS architecture from a couple of Florida-based developers. This project mashes together their preferred practices from popular methods like OOCSS, BEM, and SMACSS.

HTML/CSS Tools

HTML Inspector
From Philip Walton, here's a code quality tool that runs in the browser to help dev teams write better markup. It's customizable and, as far as strictness, may provide a more reasonable alternative to W3C validation.

Magic CSS3 Animations
A simple library of plug-and-play CSS3 animations, inspired by a similar collection by Dan Eden.

Hitch
Touted as "a better way to write CSS", this JavaScript-driven tool lets you use long-proposed but incomplete CSS selectors and other features. Watch the video for a good overview of the whys and hows of this interesting tool.

CSSDB
A curated and searchable collection of CSS-based libraries and frameworks.

dockPHP
Currently in public beta, a visual website editor that includes support for CSS3 and comes coupled with Bootstrap. Has drag-and-drop functionality and lets you export a website with a click of a button. Not sure exactly why "PHP" is in the name, but looks like an option for small simpler projects.

bluePen Editor
An online visual CSS editor with a Photoshop-like interface and an "intelligent saving system" module that is compatible with WordPress, Drupal, Joomla, and Magento.

JavaScript and jQuery Tools

MixItUp
A neat little jQuery plugin that uses CSS3 animation to filter and sort items. Lots of customization options and it degrades gracefully on IE<9, avoiding any JS polyfilling, thus remaining lightweight.

debug.js
A toolkit that offers NaN detection, assert() to stop execution, and the ability to define private properties and functions.

jQuery Builder
This simple tool lets you build a custom version of jQuery, allowing you to exclude any modules you won't be using. You can grab the output instantly online or build yours via the command line.

jquer.in
A searchable and filterable library of categorized jQuery plugins.

Chardin.js
There have been a few of these types of scripts floating around: It's a jQuery plugin to add overlay instructions to your apps.

jQuery Pin
A jQuery plugin to pin an element to the screen so it "hangs around" as you scroll. I like the fact that you can disable it on small screens using an optional setting.

Countable.js
A 1KB, dependency-free library to add live paragraph, word, and character counting to an element. I like that it can count characters with or without spaces.

Sublime Web Inspector
A very cool looking Sublime Text package that lets you 'debug JavaScript right in the Sublime Text editor' just as you would do in a browser's developer tools.

Suggest Your Tool via Twitter

Have you built or written something cool for front-end developers? Send a link to your project via Twitter @WebToolsWeekly. I'll publish most any kind of tool including libraries, plugins, apps, or even a new book release. Tutorials and articles will not be included — there are plenty of other weeklies for that! :)

Help Keep Web Tools Weekly Ad-free!

I want this newsletter to stay ad-free indefinitely. One thing I will never do is post unmarked paid content. All of the content is curated based on what I find interesting and useful for front-end developers. To remain ad-free, I'm going to try to sustain it by means of voluntary contributions.

So if you like the newsletter, you have the option to go to the donate page and give a small one-time amount using one of the services listed.

Before I Go...

If your inbox is pretty messy and hard to keep up with, you might want to check out a Gmail app called Scoop that offers to "turn your scattered bulk mail into a beautiful daily email, so your inbox can finally be as clean as your desk."

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly