|
|
|
|
Issue #79 (Tool Tips, Sass, Images, JS Utils)01/22/15
After doing 78 weeks of Web Tools Weekly, I've come across a ridiculous amount of tools, scripts, libraries, and other useful things for web developers. Based on some of the most common problems I've seen, I've come up with some tips for those who want to get their own tool noticed.
A One or Two Sentence Description
This is the most important point: Your tool's website or GitHub repo should explain in just one or two brief sentences what exactly it is and what problem it solves. Many descriptions I've read are quite vague and don't make it clear enough what the tool is. Then there are others that are overkill in their description, often mentioning obscure dependencies and other unknowns. Of course, it's okay to mention dependencies, but the description shouldn't convolute the mental process of understanding what the tool is and what it accomplishes.
Be Consistent with Branding
Probably one of the most common problems I see is inconsistencies with the name of the tool. For example, I'll see a tool called SuperJSLibrary. But on the same page, I'll see the same tool referenced as "Superjslibrary" or maybe "superjslibrary" or even "super-js-library". If you want your tool to be noticed, pick a name and stick with it, using the correct spelling and casing every time you refer to it. Often the only branding you have is the name (e.g. you might not have a logo or even a dedicated website), so do what you can and be consistent with the name throughout any documentation.
Include a Live Demo
This won't apply to every tool, but I've seen so many scripts, CSS tools, and other stuff that sound really cool but don't have a live demo available. Always include a demo and link to it in the repo's Readme and the description beside the title.
Cross-Link Between GitHub and Website
Often a script or library will have a dedicated website (e.g. superjslibrary.io) as well as a GitHub repo. While the site will usually link to the repo, I've actually come across repos that didn't include a link back to the site. So make sure you cross-link so developers can find all the necessary resources, demos, documentation, and so forth.
Those are probably the most common problems I see when reading descriptions of different tools I come across. Nobody's perfect (I'm certainly not!) but I hope these suggestions will help you if you're considering releasing something to the world.
Now on to this week's tools!
Sass Tools
Evernote SASS Structure Boilerplate
"An example Sass build structure sample to start a project", from the developers at Evernote.
ConsistentFlexibleGrids
"A simple stylesheet using Sass to generate a flexible grid with consistent margins."
SASS Import Once
"Ensures Sass modules can only be included once per build."
Andy.scss
An open-source collection of useful Sass mixins.
Juice
"A collection of Sass mixins/functions that are used to minimize the work needed to apply styling/properties to elements."
SassySuit
A Sass framework, still in progress, with features related to validation, typography, web fonts, and more.
Suzi
"A responsive, Sass and Grunt UI framework."
SCSS-Lint
"A tool to help keep your SCSS files clean and readable. You can run it manually from the command-line, or integrate it into your SCM hooks."
| Support Web Tools Weekly: 384 pages of CSS for $7 |
Multimedia Tools
Bulk Resize Photos
"Good for resizing the large photos produced by many digital cameras and smartphone cameras into sizes that are more suitable for sending over the internet."
Datamatic.io
A GUI generator hooked into Google Drive, where you can create and publish interactive D3.js based charts.
is-progressive
A CLI tool or JavaScript module that lets you check to see if a JPEG file is progressive, which is better for performance.
Snazzy Maps
Themes and styles for Google Maps.
BPG Image Format
"BPG (Better Portable Graphics) is a new image format. Its purpose is to replace the JPEG image format when quality or file size is an issue."
Walkway.js
"An easy way to animate SVG images consisting of line and path elements."
JavaScript Utilities and Mini Libraries
easyLazyImages
"A global method for configuring lazy-loaded images."
Bloader
A load indicator to allow you to precisely indicate to your users how a loading process is going (by updating progress while your resources are loading, scripts executing, etc).
Ripple.js
Adds an animated ripple-effect to any element.
FormatJS
"A modular collection of JavaScript libraries for internationalization that are focused on formatting numbers, dates, and strings for displaying to people."
storage.js
"A simple abstraction of the browser localStorage API."
ajax-form
"HTML forms on performance-enhancing drugs."
Sortable
An open-source JavaScript and CSS library that adds sorting functionality to tables. It's tiny (<2kb) and has no dependencies.
| Support Web Tools Weekly: 384 pages of CSS for $7 |
A Tweet for Thought
UK developer Lewis King with yet another hyperbolic reminder that sometimes CSS still sucks.
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...
PageFair is a company that measures the effect of ad blockers on revenue. They wrote a report on their findings in this PDF document called "The Rise of Adblocking", which you might find to be an interesting read.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
|
|
|
|
|
|
