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:

Hexadecimal

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

The hexadecimal (base 16) number system used for Web-page design consists of 16 unique symbols:0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, and F.

For example, the decimal number 15 is equal to the hexadecimal number F. In HTML, an RGB color can be designated by

RRGGBB

with the first two numerals representing the amount of red, the second two the amount of green, and the last two the amount of blue. If you wanted your background to be red, you could write the code for a body background color as

Black is the absence of all color and white is the presence of all color, so in hexadecimal, black is at the bottom of the system (no red, green, or blue:

#000000

and white is at the top (the maximum amount of red, green, and blue:

#FFFFFF

API

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

The application program interface (API) is a set of building blocks for programmers.

APIs are made up of routines, protocols, and tools. Most operating environments provide an API so that programmers can write applications consistent with that environment. For example, developing software using the Windows API ensures that your user interface will be consistent with other Windows applications, making it easier for users to learn your new programs.

Use on the Web

Web APIs provide simple ways to interact with websites. Using an API, you can extract public data from sites like del.icio.us, Flickr and Digg to create mashups, reuse data or just about anything else you can imagine.

APIs are also useful for extracting your own private data from a web service so that you can back it up elsewhere or display it on another site.

When talking about APIs you’ll here the following terms quite a bit.

Common Web API Related Terms

Web service/API — These terms are largely interchangeable and simple refer to the ways you can interact with the data on your favorite websites.

Method — A method is just one aspect of an API; you might also see methods refered to a functions. For instance, if you’re interacting with Flickr, you might want to get your public photos. To do so you would use the get_user_photos method.

Response — The information returned by the API method that you’ve called.

REST — Short for Representational State Transfer. REST treats data as a web document that lives at a specific URL. REST APIs use standard HTTP requests such as GET, PUT, HEAD, DELETE and POST to interact with data.

XML-RPC — This older API scheme formats method calls and responses as XML documents which are sent over HTTP.

SOAP — Simple Object Access Protocol. A W3C standard for passing messages across the network. SOAP is the successor to XML-RPC. It’s complexity has led many to disparage SOAP and with more APIs leaning toward REST, SOAP’s future is uncertain.

Ajax — Asynchronous JavaScript and XML. Technically it has nothing to do with APIs, however many sites using APIs send their queries out using Ajax which is partially responsible for the popularity of JSON.

JSON — JavaScript Object Notation. JSON’s main advantage is that it is easy to convert from JSON to nearly any other programming language. JSON uses key-value pairs and arrays, something common to PHP, Python, Perl, Ruby and most other languages. The portability of JSON has made it an increasingly popular choice for sites developing APIs.

Popular Web APIs

Operator

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

An expression tells JavaScript what to do with the data it gets, and within each expression are operators and operands. Operands are the data or data types the expression gets, and operators are the shorthand characters that tell the expression what to do with the operand. JavaScript has arithmetic (+,-,*,/), assignment (=), bitwise (&, |), comparison (>, <,), logical (&, ||, !), special (., []), and string (+) operators. Operators are a feature of many programming and scripting languages. At first there were a relatively limited menu of operators to use in JavaScript, but version 1.2 allowed for the support of regular expressions and a group of operators large enough to compare to other scripting languages.

Event

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

Events are user interactions with their computer, such as a mouse click or key press.

In the good ol’ days, computers handled user interactions as input of batched data. The user fed a hunk of data in, the computer did something to that data, then produced the results. With the advent of interactive devices like the GUI interface, computers could display answers to computations onscreen. The input for these interactions are events caused by the user, which could be keystrokes, button clicks, or the position of the mouse pointer. (see Event Handler).

Perl

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

Practical extraction and reporting language, or Perl, is a scripting language first created by Larry Wall to be used as duct tape for programming with the Unix operating system. Due to its immense power for handling piles of text and, consequently, as a common gateway interface (CGI) scripting language, Perl became very popular among server-side scripters. Perl has a large community of contributing programmers and, what’s more, costs nothing and is free to redistribute. These circumstances have helped Perl evolve from a scripting language used to generate server stats into a language many use for database administration. All along Perl has maintained its zaniness. Most Perl documentation reads as though written by early vaudeville comedians.

Expression

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

In JavaScript, expressions are phrases that the interpreter can evaluate. For example,

x + 10

and

x < 10

are expressions since they can be evaluated, while

x = 10

is simply a statement.

In linguistical terms, JavaScript is made up of sentences, phrases, and words. The sentences are JavaScript statements, in which an entire action is expressed. The phrases are JavaScript expressions, in which the elements of the action can be created and put together to make a statement. The words are JavaScript operators, which are used to act upon the data passed to them.