Issue #2 (JS naming conventions, CSS/HTML, Mobile)08/01/13
During my recent trip to Italy, I read Nicholas Zakas' Maintainable JavaScript, which I highly recommend for anyone developing JavaScript apps on a large team. Near the start of the book, he talks about naming conventions. Below I summarize his suggestions, showing both good and bad examples (indicated by comments in the code).
First, he recommends using camel casing for variables and functions, which stays consistent with the fact that JavaScript's core is written using camel casing:
// good examples
var hereIsOneExample;
var hereIsAnotherExample;
// bad examples
var hereisoneexample;
var here_is_another_example;
Next, he recommends that variable names begin with a noun, to help differentiate them from functions:
// good examples
var count = 100;
var userName = "Mark Twain";
// bad examples; "get" and "retrieve" are not nouns
var getCount = 100;
var retrieveName = "Mark Twain";
And naturally, function names should begin with a verb:
// good example
function getName() {
}
// bad example; "user" is a noun, not a verb
function userName() {
}
He also gives some suggestions on what type of verb, depending on what the function returns. For example, if a function returns a Boolean value, it should start with "is" or "has" or another verb that implies true/false. If it's a non-Boolean, you would use something like "get" or "set".
Next, he recommends the C programming convention for constants, which is all uppercase with underscores:
// good examples
var NEWS_TITLE = "Web Tools Weekly";
var NEWS_LOCATION = "http://webtoolsweekly.com";
And finally, for constructors, use Pascal case, which is the same as camel case except the first letter is uppercase, and using a noun:
function NewsletterArchive() {
// good example
}
Of course, the most important thing is to be consistent, but I think these are some good suggestions that can help the readability of your code, especially on large teams working on complex projects.
Now on to this week's tools!
HTML/CSS Tools
Topcoat
Yep, it's another CSS library, this time from the folks at Adobe. This one is being marketed as a library "designed to help developers build web apps with an emphasis on speed", which is a big topic nowadays and should make a lot of app developers give Topcoat a close look.
Pure
"A set of small, responsive CSS modules that you can use in every web project." Built on Normalize.css, responsive out of the box, and includes grids, forms, buttons, tables, and more.
Jeet Framework
"Jeet takes the best of the open source HTML5/CSS3 World and combines it into a lightweight, semantic, responsive, and blazing fast framework." You can use Stylus, SCSS, or both.
CSS Prettifier Bookmarklet
If you ever come across a minimized stylesheet you've accessed via view-source, this bookmarklet by Addy Osmani (based on a userscript by Sindre Sorhus) will make it readable. I've tested it and it works nicely in Chrome.
Holmes - The CSS Markup Detective
A "stand-alone diagnostic CSS stylesheet that can highlight potentially invalid, inaccessible or erroneous HTML(5) markup". Basically, it will automatically highlight stuff that's invalid without you having to put it into a validator.
Helium
"A JavaScript tool to scan your site and show unused CSS", for testing on a local or development version of a web project.
csscss
This simple ruby gem "will parse any CSS files you give it and let you know which rulesets have duplicated declarations."
PXtoEM.com
A tool to convert pixels to ems. After choosing a base pixel size, the tool lets you grab a Normalize.css stylesheet that uses the chosen base.
JavaScript and jQuery Tools
Flippant.js
A customizable, zero-dependency, "mini js+css library for flipping things over." Check out the on-page demos to see exactly what it does.
fragment.js
When gzipped, a 625-byte tool for easily loading html fragments and templates uisng a data-fragment attribute in the HTML.
Squel.js
A lightweight library to help you "quickly and easily build SQL query strings through an object oriented API."
hideShowPassword
From the folks at Cloud Four, a jQuery or Zepto plugin that lets you "easily hide and reveal the contents of a password input field" and is based on a mobile design pattern documented by Luke Wroblewski.
dejavu
An object-oriented toolkit designed for programmers moving to JavaScript from languages like PHP, Java, or ActionScript 3.0.
Nestable
A jQuery plugin for drag-and-drop hierarchical lists. Not under active development, but a nice starting point if you need this sort of functionality in an app.
ExplainJS
I'm not entirely convinced this could be of much use, but it seems like a unique idea: A script that displays your JavaScript with the comments extracted into a left pane.
Color Swatches
"A jQuery plugin that turns a one-line div into a sweet color swatch." This is a cool idea just because of the way it uses a data attribute to gather the color info. Nicely done.
Coquette
"A micro framework for JavaScript games. Handles collision detection, the game update loop, keyboard input and canvas rendering."
Mobile Tools
Fries
"Fries lets you create [a] sexy Android-like UI using HTML, CSS, and JavaScript." The example UI is mega-cool. Worth a look.
Ghostlab
This sounds pretty powerful: "Ghostlab synchronizes scrolls, clicks, reloads and form input across all connected clients. This means what you're testing is not the simple page load, but the full user experience."
jquery.pep.js
A lightweight jQuery plugin that turns any DOM element into a draggable object. Serves specially as a replacement for jQuery UI's draggable feature, because this one works on touch devices.
Moobile
A mobile application framework built on MooTools. Has some cool demos for iOS and Android UIs.
tinytype
Referred to as an "incompatibility table" this is a chart that displays available default system fonts across four major mobile platforms.
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...
Some of us have placed "hidden" welcome messages or other info about our websites inside of HTML comments, visible only via view-source. Now you can use WelcomeMat.co to quickly grab a fancy welcome message for your source code. The site also accepts submissions.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
