Webmonkey » Programming

Write Better CSS With ‘Idiomatic CSS’

Scott Gilbertson — Mon, 11 Jun 2012 15:49:20 +0000

Wooly, the CSS Sheep Image: W3C

If you’ve ever worked on a large programming project you know all about the joy of trying to read other people’s code. And of course that’s how everyone else feels about reading your code. That’s why formal programming style guides exist — to help bridge the gap between individual styles.

There is no right or wrong style of writing code, but there are styles that are easier to read and share with other people. Search the web and you’ll find formal guides to writing readable JavaScript, Python, Ruby and countless other popular languages, but one language that doesn’t get as much attention is CSS.

Developer Nicolas Gallagher wants to change that. To do so Gallagher has put together Idiomatic CSS, a style guide for how to format, organize and craft quality CSS that anyone can work with. Here are the general principles of the project:

“Part of being a good steward to a successful project is realizing that writing code for yourself is a Bad Idea™. If thousands of people are using your code, then write your code for maximum clarity, not your personal preference of how to get clever within the spec.” — Idan Gazit

All code in any code-base should look like a single person typed it, no matter how many people contributed.

Strictly enforce the agreed upon style.

If in doubt use existing, common patterns.

Idiomatic CSS follows in the footsteps of Rick Waldron’s Idiomatic JS, which does the same thing for JavaScript.

If you’ve made the leap to a CSS preprocessor like SASS or LESS, fear not, Idiomatic CSS has you covered as well. Preprocessor syntax varies and Idiomatic CSS offers examples in SCSS, but the more general rule, “your conventions should be extended to accommodate the particularities of any preprocessor in use,” apply to others as well.

Wrangling CSS on large projects can be a pain, but if you take the time to create a set of conventions and ensure that everyone sticks to them it becomes a much more manageable task. If you’ve got experience and insight to share, head on over to the Idiomatic CSS GitHub page and contribute your knowledge.

Google Kicks Off Summer of Code 2012

Scott Gilbertson — Tue, 22 May 2012 14:54:38 +0000

Students: Step into your summer office. Image: Lost In The RP/Flickr

Students, start your coding engines. Google’s annual Summer of Code program, which helps college students write open source software during their summer vacations, starts today.

Past participants have helped improve everything from popular web frameworks to browser add-ons and even operating systems. Summer of Code is also not a half bad way to get yourself on Google’s radar — the company looks at the results of the program to help it “identify potential recruits.”

Summer of Code has served as a launchpad for quite a few new open source software projects as well as helping to jumpstart work on existing favorites. This year’s roster includes some 1,208 students who will spend the next 12 weeks writing code for 180 different open source organizations.

With 208 proposed projects, there’s a pretty good chance that some Summer of Code improvements will be rolled into your favorite open source projects later this year. Among the things we’ll be keeping an eye on are Metalink’s various efforts to improve the download capabilities in Firefox and Chrome. Eventually Metalink wants to bring error recovery/repair for large downloads to everything from Chrome to wget.

Other promising projects include several efforts to help improve OpenStreetMap, the so-called “Wikipedia of maps,” as well as Code for America’s various projects, some new features for Git and an ambitious plan to bring Pylint into the modern world of Python 3.

For more info on this year’s Summer of Code, head over to Google’s Summer of Code website, which has details on all the various projects and participants. You can also get updates from the Summer of Code page at Google+.

Development Tips to Improve Your Code Quality

Scott Gilbertson — Wed, 20 Oct 2010 20:42:30 +0000

Any good programmer can tell you writing code is an art form, and as with most art forms, the key to success is good habits and lots of practice.

The Ruby Learning blog recently posted an interesting list of ways to improve your code quality and, perhaps more importantly, develop habits that will lead to better code creation. Developer James Schorr’s tips range from the obvious, like using a good version control system, to the more subtle: “realize that just because we “can” doesn’t mean that we “should”… anything’s possible, but not everything’s advisable.”

The article is broken into the three major parts of any programming workflow: pre-development, development and post-development. There are a number of great suggestions in each, but our favorite parts are the fourth category: Enjoying Your Development. Almost any project is fun and enjoyable in the beginning, but then there seems to come that point at which the fun evaporates and we get bogged down in the grunt work of writing code. Schorr has few tips to help break you out of those boring stretches:

Give yourself time to think and rest. There are some days where I just can’t write code well; other days where it’s just flowing. This is due to how your brain functions. You need sleep and a change of pace and scenery now and then.

Walk away for a while. It’s easy to get “tunnel vision” and think that you’re close to solving a problem and to think that more effort will solve it… You would be surprised at the ideas or solutions that will spring into your mind as you are thinking about or doing other things.

Head over to the Ruby Learning blog to read some of the other helpful tips and tricks for producing quality code.

Photo: Christian Hellman/Flickr/CC

See Also:

XSS Vulnerabilities, Raw SQL Top List of Common Programming Errors

Scott Gilbertson — Wed, 24 Mar 2010 18:24:21 +0000

No programmer is perfect, but some mistakes are more dangerous than others. While some mistakes might just slow down your site, others can open up vulnerabilities that expose your code, your database and even your users to all manner of attack.

To help you identify the more serious errors common in programs of all types, a group of top software security experts in the US and Europe have released their Top 25 Most Dangerous Programming Errors.

Unsurprisingly, cross-site scripting vulnerabilities and improperly handled SQL top the list of common and dangerous mistakes. Remember kids, sanitize your database inputs; you just never know when someone is going to name their child: “Robert’) DROP TABLE Students;”

While not all the errors in the list are common in web programming, some of the more serious things are concerns for web developers — cross-site request forgeries, missing encryption of sensitive data and unrestricted file uploads are all common web programming issues.

Also interesting is the weaknesses by language section, which breaks down common mistakes in PHP, Java, Perl and C/C++. No doubt web developers would like to have seen Python and Ruby in that list, but it should at least be useful for PHP and Perl programmers.

See Also:

Function

Webmonkey Staff — Mon, 15 Feb 2010 20:45:47 +0000

A function is a named group of statements in a program that performs a task when it is invoked.

Other programming languages make a distinction between a function, which returns a value, and a procedure, which performs some operation but does not return a value. Since JavaScript does not make this distinction, you can create functions that return values elsewhere in your code.

Platform

Webmonkey Staff — Mon, 15 Feb 2010 20:45:47 +0000

Software developers need to know which platform their software will be running on. A platform can be an Intel processor running Windows, a Macintosh running System 8, or any combination of hardware and software that works together. Platforms are important for web designers to understand, because they need to make sure their pages will work on more than one platform. Different browsers display web pages differently on various platforms. Since the internet itself is a cross-platform system, designers need to test web pages on different combinations of machines and browsers to ensure the widest possible audience will be able to view their sites.

Hash

Webmonkey Staff — Mon, 15 Feb 2010 20:45:47 +0000

A hash, also known as an associative array, is a collection of data in which each piece of data has two components: a key and a value. Much like the hash at your local diner, JavaScript hashes go unordered: They’re not indexed by numbers. For example, if you wish to use JavaScript to put up a different GIF animation on your site every day of the week, you might throw all these animations into a hash associated to each weekday as a key. Then you would refer to the key day to invoke that day’s animation.

For example, in a normal array, you’d have:

  dinner[0] = "monkey brain";

  dinner[1] = "meatloaf";

But in a hash, you could use a string as the index:

  dinner["monday"] = "monkey brain";

  dinner["tuesday"] = "meatloaf";

Hover

Webmonkey Staff — Mon, 15 Feb 2010 20:45:47 +0000

Much like standing behind your co-worker while she slaves away, hover implies standing by but not doing anything. In dHTML, it refers specifically to when the user has positioned her cursor over a link but not yet clicked anything. The style will not change if the cursor is simply passed over the link, but you can set an action to take place after a predetermined amount of hovering.

Loop

Webmonkey Staff — Mon, 15 Feb 2010 20:45:47 +0000

A loop is like a programming thought. Say you’re a police officer using a radar gun to catch speeding motorists. If the speed limit is 55 miles per hour, you might say to yourself: “If a car makes my radar gun display a higher value than 55, I’ll pull them over, but until then I will continue to take readings. And perhaps snack on this cruller.” In programming, the statement of this loop would be the action (firing up your motorcycle and chasing the speeder), and the expression would be the evaluation of whether or not the passing car made your radar gun read higher than 55. This is an example of a “while” loop:

  while (carSpeed < 55) {

  carSpeed = readRadar();

  // note:readRadar() should return the latest carSpeed

}



pullEmOver();  // this will only execute once carSpeed is >= 55

Object dHTML

Webmonkey Staff — Mon, 15 Feb 2010 20:45:47 +0000

In object-oriented programming, an object is a self-contained entity that consists of both data and manipulation procedures.

Similarly, HTML 4.0 includes the element to extend HTML in order to make it more dynamic. allows an author to download external data or programs into the current page. This element can be used to gather other pieces of information, including Java applets, ActiveX controls, and possibly dHTML. The long-term goal of the World Wide Web Consortium (W3C) is for the element to become the only way to embed data, replacing the and elements.