Typography enhances the readability of information on a web page, yet — quite ironically — it also helps users avoid reading. This is the true and "most humane purpose" of design. Mind blown?

Applying the principles of typography, designers break up text into blocks and offer visual shortcuts that let users sift through masses of information — making it easier to scan for information.

It’s more convenient for users to decide where to begin reading if content is organized efficiently. The more information a user gets from one glance, the quicker he achieves his goals on a web page and the less time he spends staring at the screen.

A Brief Introduction to Typography

Typography is a tool with which we, designers, can create things. We use it to shape content, give language a physical body and enable the flow of understanding.

From analyzing the basic pixels that make up a well-designed comma to organizing blocks of text along a baseline grid, the study of typography can help us create solid structures of information.

Typography isn’t just about fiddling with fonts and tinkering with typefaces. Typefaces are to designers as glass, steel and stone are to architects.

Typography is about assembling those resources into something sensible and robust—like an architect utilizing industrial materials to build a skyscraper that can withstand the test of weather and time.

Typeface versus Font

Let’s clear this up, shall we?

In both print and digital design, a typeface refers to the visual design of letterforms; a font is simply how those designs are delivered. During Johann Gutenberg’s time, these designs were used to create molds from which metal type casts are made.

A set of metal casts is called a font. These days, however, a font refers to the software that allows us to install and display the design on-screen. Each typeface can consist of different fonts—often representing a single weight or style.

In other words, a typeface refers to a family of fonts (such as Arial) while a font refers to a single member of that family (such as Arial Narrow or Arial Black).

Many designers choose to use these terms interchangeably. Now you know better.

Classifications of Typefaces

Among the various principles of typography, font choice is something we designers must master. Typefaces speak in behalf of a brand or a webpage and should reflect its personality.

By understanding the different classifications of typefaces, you will be able to combine them effectively. Nowadays, there are many different kinds of typefaces to choose from. The three most popular ones are: serif, sans serif and monospace.

Serif typefaces are characterized by tiny lines (serifs) trailing from the edges of the strokes and stems. Also called "roman" typefaces, they are often used for headlines and narratives. Examples of serif typefaces include Georgia, Times New Roman, Palatino Linotype, Adobe Garamond Pro and Cambria.

Sans serif typefaces, on the other hand, lack these tiny lines. The French word sans means "without"—hence the name. While serif typefaces are considered serious and elegant, sans serif typefaces are regarded as modern and dynamic.

Due to their simplicity, they are easier to read on a computer screen, even at very small sizes—perfect for body text in web pages. Examples of sans serif typefaces include Arial, Helvetica, Verdana and Tahoma.

Often used to display code and plain text on webpages to enhance their readability, monospace typefaces are so called because each character shares the same width. Among the most popular monospace fonts are Courier, Consolas and Andale Mono.

Alignment and Proximity

Alignment can both refer to how text is displayed (left to right, in most cases) and how each text block lines up with others. To align typographical elements more effectively, many designers rely on grid systems. Simply put, a grid system is a set of vertical and horizontal lines that a designer can use as a guide to strengthen the structure of a web page.

Proximity is also important. Keep related elements closer together with enough white space to make each of them distinct. For example, adding distinct vertical white space between paragraphs enhances readability and is often employed by news websites.

Measure

Measure refers to the width of a line in a paragraph or column. It should never be too wide or too narrow. Too wide, the blocks of text will be harder to read—eye movements tend to be jittery when forced to continuously follow a horizontal path. Very narrow lines of text, on the other hand, allow for more pauses in thought, making it easier to lose track of context and meaning.

Leading

Leading, also called line height, refers to the amount of space between lines in a block of text. Striking a balance between font size and line height can drastically improve readability and "scannability." White space, if set right, should guide the reader’s eyes along the flow of content, not distract them from it.

A very small line height value makes text seem congested; a very large value makes it difficult to distinguish each paragraph.

Weight

Weight refers to the "thickness" of a font compared to its base typeface. We think of weight in terms of "bold," "light," "normal," etc. Many typefaces, however, are already either heavy or light to begin with. When combining typefaces for a design and creating balanced typographical contrast, consider weight first. It’s also a good idea to choose a typeface with distinct weights.

Don’t Stop Learning

This is just the beginning. Typography is about bringing these basic elements together to form a coherent, robust design. It may take a while for you to develop your skills in typography, but with patient practice and constant vigilance, you’ll master it in no time.

The post The Principles of Typography: Back to Basics appeared first on Speckyboy Design Magazine.

Almost every programming book pays lip service to reading code, but few actually teach you how to read code. The peculiarities of a language and a coder’s personal idiosyncrasies can make a piece of code frustratingly difficult to read. You can’t really print out some open-source code, grab a cup of coffee and thumb through it leisurely as you would with a novel; there needs to be active engagement with the code and a continuous attempt to analyze its conceptual basis.

According to a research paper by the University of North Carolina’s CS department, we do not actually “read” code but, trained by habit, scan it for any recognizable mistakes, going through the function headers, then the function body, and finally resting our eyes where errors mostly reside, the loops. Effectively, what we call ‘reading’ actually amounts to actively scanning and comprehending code.

Learning how to read code efficiently is a skill that often sets apart excellent coders from the merely good. But it’s a skill that can be easily learned, especially by picking through examples of high-quality code. GitHub and CodePen are excellent resources for finding well written open-source code in a variety of languages.

Reading these five books with their heavy emphasis on writing and reading code will also take you a long way in acquiring this skill:

1. Code Reading: The Open Source Perspective

One of the few books to tackle the subject of reading code head on, this should be the starting point for anyone trying to learn how to read, and eventually, write good code.

This book works on the example method: the author, Diomidis Spinellis, a PhD in Computer Science from Imperial College, London, digs through over 600 real world examples to analyze how they work, how to read, and how to understand them.

2. Code Quality: The Open Source Perspective

A sister book to the above entry, ‘Code Quality’ uses real-life examples from open source projects to teach you how to write quality code. While not a particularly easy read, it is nevertheless a good book to buy for the budding programmer. Most of the best programmers in the world learn the foundational basis of writing quality code through years of experience; this book simplifies the process by providing helpful examples of well written code culled from hundreds of open source projects.

The purpose of the book might be oriented towards non-functional aspects of programming such as structure and problem solving, but the advice is equally useful for coders who want to learn how to read code.

3. Clean Code: A Handbook of Agile Software Craftsmanship

This book extols the virtues of clean code (even though the author, Robert C. Martin, maintains throughout the book that writing clean code is a ‘lot of hard work’) and approaches the process of writing code almost as an artist would approach an easel. Software engineering is compared to craftsmanship; the end result, therefore, must be suitably clean and sufficiently alterable by others.

4. Refactoring: Improving the Design of Existing Code

Refactoring is the process of altering the internal structure of a software program without affecting its actual functions. The end process leads to better designed, more readable, and more ‘coherent’ code that’s much easier to manage and modify.

Much can be learned about reading (and writing) code from the process of refactoring, namely, how to spot errors in code design. Learning about refactoring (a useful skill by itself) helps you read code better, as you will already be thinking about what changes should be made and how they should be made.

5. Code Complete: The Practical Handbook of Software Programming

Steve McConnell’s masterpiece, Code Complete, can be usually found proudly displayed on the shelves of programmers all around the world. Indeed, this seminal volume in programming literature has enjoyed tremendous success over the years, and is often dubbed the “coders’ Bible.”

Code Complete focuses on the principles of good programming, teaching with examples from academia as well as real life.

Going through the well-written code samples (and McConnell’s insightful commentary) is an education in itself, and will teach you not just how to read code, but also how to think like a top notch programmer.

The post 5 Essential Books for Learning to Read Code appeared first on Speckyboy Design Magazine.

Distributing any work – a piece of code, a software program, or even markup – under an open source license implies that the original creator has granted specific permissions to re-use and re-distribute the work without prior approval. It does not equate to a relinquishing of all copyrights; instead, it facilitates the use of existing work by other programmers and developers, provided they credit the original author.

Not all open-source licenses offer the same provisions and copyright protection, however. Each open-source license must be approved by the Open Source Initiative (OSI). While the OSI approved-license count stands at 67, only a few of these are widely used by programmers.

Below, we’ll cover ten most-used open source licenses:

1. General Public License (GPL)

Approved in February 1989, the GPL is the most commonly used license for open source work with over 50,000 SoureForge.net projects in existence. Version 3.0 of the GPL includes provisions for others to copy and modify your code, but only if they include attribution to the original in the source code. The GPL also includes strong ‘copyleft’ measures.

‘Strong’ copyleft measures imply that any program that uses your code must be distributed under the same license. ‘Weak’ copyleft measures do not necessitate this restriction. Essentially, this dictates that if you borrow GPL licensed code, you have to release the finished software under GPL license too, and not any paid or proprietary license.
GPL v. 3.0 also provides direct patent protection – a provision lacking in most open-source licenses.

GPL includes provisions to allow you to sell the open-source software, but only if you explicitly mention that the software is open-source and can be downloaded for free.

2. GNU Library or Lesser General Public License (LGPL)

The LGPL includes fewer measures of protection than the GPL with only indirect patent protection and weak copyleft measures. This has made the LGPL the license of choice for libraries, as code licensed under the LGPL can be used in paid and proprietary software.

Only changes to the library code itself must be open-sourced; the remainder of a project using LGPL code may remain closed-source. The LGPL license was approved in June 1991 and covers over 8,000 SourceForge projects.

3. BSD License

The BSD license comes in multiple flavors, of which, the two most popular ones are BSD-3-Clause (or “New BSD license”), and BSD-2-Clause (“FreeBSD license). These two licenses offer less protection than the GPL, and simultaneously, fewer restrictions on distribution.

Both BSD licenses provide unlimited redistribution without any patent protection or copyleft measures. The BSD-3-Clause license differs from BSD-2-Clause in that it includes an anti-endorsement provision. Basically, this means that if you’ve contributed to any work, your name cannot be used to endorse or advertise the work without express permission.

4. MIT License

The MIT License is the oldest open-source license still in use and dates all the way back to September of 1987. It is also the broadest of all licenses with very sparsely defined provisions regulating distribution, endorsement and copyleft measures. Essentially, it provides for anyone to modify, copy and use any piece of the code or software howsoever he wants, as long as the finished product includes a copy of the license.

An update to the license – the MIT/X11 license – adds an anti-endorsement provision. This is the least restrictive open-source license and has over 1300 SourceForge.net projects in existence.

5. Mozilla Public License 2 (MPL 2.0)

Initially approved in 1998, the first version of the MPL (MPL 1.0) was more “business friendly” and included fewer copyright measures than the GPL. A January 2012 revision to the license – MPL 2.0 – corrected compatibility issues with the GPL and Apache licenses.

Broadly, the MPL 2.0 is compatible with both the GPL and Apache licenses (a provision lacking in MPL 1.0) and may be combined with proprietary code in a “larger body of work”. It also includes direct patent protection, and must include attribution in the source code.

6. Apache License v 2.0

The first version of the Apache license was drafted and approved in 1995. The Apache license is broad in its scope and grants significant rights to copyright holders. Specifically, it dictates that all rights are perpetual, global, non-exclusive, and irrevocable. Once granted rights, you are free to use them forever, anywhere in the world, and no one can take them away from you.

The non-exclusivity clause means that anyone can use the licensed work.
Besides, the v 2.0 of the Apache license also includes patent protection. It doesn’t include any copyleft measures, which means it is compatible with paid and proprietary software.

Image Source

7. Eclipse Public License (EPL)

The EPL was published by the Eclipse Foundation in 2004 and borrows most of its clauses from the GPL. The EPL superseded the Common Public License (CPL), originally published by IBM in 2001.

The EPL’s primary aim is to facilitate collaborative open-source development by allowing it to work with proprietary licenses. Consequently, it includes weak copyleft measures and is thus incompatible with the GPL. Under the EPL, anyone can edit, modify, copy and distribute any work, provided it does not borrow any work licensed under GPL.

8. Common Development and Distribution License (CDDL)

The CDDL is based on the MPL v 1.1. The CDDL is compatible with most open-source and proprietary licenses, save the GPL. It includes limited copyleft measures, and measures that allow anyone to edit, modify and use code with appropriate attribution in any work, commercial, or otherwise.

9. Open Software License (OSL)

The OSL is similar to LGPL in its clauses and weak copyleft measures, but differs from it in one crucial aspect: the OSL includes a ‘patent action termination clause’. Essentially, this means that the license is terminated automatically as soon as anyone files a patent infringement lawsuit. It also includes a clause that dictates that all derivative works must be distributed under the OSL license.

10. Academic Free License (AFL)

The AFL was published in 2002 in an attempt to remedy the deficiencies of the BSD, MIT and Apache licenses. It provides similar measures for redistribution, modification, and attribution, but adds a few more clauses that include patent and copyright grants for the software. The AFL is incompatible with the GPL on account of its lack of copyleft measures.

The post Understanding Which License to Choose for Your Code appeared first on Speckyboy Design Magazine.

A number of well-known companies have redesigned their logos recently, and some have even gone so far as to redesign their entire brand identity system.

Below I have outlined a number of corporate logo redesigns with successful results.

Pepsi

The first major name with a long history of brand evolution is Pepsi. They have gone through many packaging iterations since their inception in the early twentieth century. The trend toward simplicity is especially apparent here with the current can flaunting a mostly blue design with the company name and logo as the only ornamentation.

The simple logo only adds to the sparse feeling of the design. The Pepsi logo began as a highly decorative red wordmark and has evolved to a red, white and blue icon with elegant but straightforward lines. The abstract quality of Pepsi’s logo is its best feature – and it is recognizable on its own because of Pepsi’s longstanding status as a household name, in this way similar to Nike.

Apple

Apple, a relatively new company in comparison to Pepsi, has still gone through a number of identity changes in its short history. The first change was a drastic one, moving from a busy, dark image-based logo to a more appropriate image of an apple. The apple concept progressed throughout the years, evolving to its current sleek silver apple icon. Interestingly, the logo changes seem to mirror the style shifts of Apple’s hardware.

As time went by, the computers and accessories became more streamlined and less clunky. Matte gray and black gave way to metallic silver and shiny black. The physical shapes became smaller and more rounded. Apple’s current logo adheres to both of these trends with its shiny silver look and slightly three-dimensional, rounded appearance.

Comedy Central

Comedy Central also modified its logo drastically a couple of years ago, shifting from a busy, illustration-based logo to an extremely simple one. Using one inverted “C” to encase another smaller “c,” Comedy Central intended the new logo to reference the copyright symbol. Some critics complained that it looked too much like it, but that was the point – to literally turn the copyright symbol upside down to make a humorous statement.

By using the copyright symbol to make a joke, Comedy Central is figuratively saying that they have exclusive rights to humor. Turning the word “Central” upside down further drives home their point, and adds visual interest. The appealing minimalist appearance of the new logo puts Comedy Central on equal footing with other big name competitors.

Animal Planet

Animal Planet also uses the orientation of text to their advantage. In their new logo, the “M” is turned on its side, mimicking the number three. There is much debate over the reasoning behind this decision, and no clear answer; but regardless of the motive, the sideways position and lighter green color makes for an attractive and visually stimulating logo. In my opinion, the negative space on the left of the sideways “M” looks like a bird’s beak – negative space is always more noticeable when a letterform is used in an unexpected way.

Animal Planet’s old logo focused on imagery, using an elephant and an illustration of the world as its main elements. The text seemed almost like an afterthought, sitting below the images with no real integration. The new identity represents the network appropriately, without using imagery as a crutch.

Seattle’s Best Coffee

Seattle’s Best Coffee exemplifies this trend toward simplicity with a new identity system that highlights the liquid nature of coffee. Their old logo was wordy and complex, with too much information squeezed into a small space. The color combination was outdated, and the shapes were very stylized and three-dimensional. Their new logo eliminates much of the text, leaving only the company’s name, and uses uncomplicated shapes to convey their point.

A droplet of coffee placed inside a semi-circle lends a bit of style, while the fresh new color scheme looks modern and unfussy. The company’s packaging also changed a bit with the introduction of the new logo, using the simplicity of the new logo as a model. The overall layout remains similar, but the Seattle skyline drawing has been removed from the background and the typefaces and colors have been updated to complement the new logo.

Conclusion

As design trends shift over the years, companies must keep up with these changes. Some make the decision to redesign their logos, while others go so far as to revamp their entire brand identity. Many of these businesses are trending toward more simple, straightforward designs and away from the complicated, multi-colored illustrations popular in decades past. Regardless of the industry or sector, it is clear that the future of logo design is headed toward easy, concise symbolic representations.

Have you noticed this tendency toward simplicity? What are your favorite corporate redesigns?

The post Corporate Logo Redesigns That Just Work appeared first on Speckyboy Design Magazine.

The default Notepad app in Windows might be suffice for making to-do lists or jotting down ideas, it falls woefully short for development purposes. So, here is a list of the best programming text editors for Windows, Mac, and Linux:

For Windows

1. Notepad++

Notepad++ has been the go-to choice since 2003 for Windows users who want to upgrade from the default Notepad to a more powerful, feature rich, yet lightweight text editor.

It was one of the first Windows applications to support multiple tabs within the same window (a boon to all multitaskers — and coders usually are). It also includes a multi-item clipboard, which streamlines coding and increases efficiency.

The list of programmer-specific features is long: it supports syntax highlighting and code collapsing. A built-in FTP browser makes uploading files onto your server effortless. With support for split-screen editing, file-compression, and auto-completion, there is nothing not to love about Notepad++.

And since this text editor has been around since 2003 with a devoted developer community supporting it, there are now dozens of plugins that can extend its functionality beyond this already impressive base.

To round up the pros, Notepad++ is also free. While it may not be the best-looking text editor out there (which shouldn’t be a concern if your primary use is coding) or the most user-friendly, it is powerful, free, and offers the key features that all programmers need.

2. SublimeText

SublimeText picks up where Notepad++ leaves off. It is a gorgeously designed, powerful, feature-rich text editor built specifically for coding. Besides basic features such as syntax highlighting, code collapsing, etc., it also supports macros and snippets to automate coding and increase your efficiency.

Whereas Notepad++ has a UI that can leave even experienced users scratching their heads, SublimeText uses a minimalistic UI with little to come between you and your code.

Besides Windows, SublimeText is also available for OS X and Linux.

3. UltraEdit

UltraEdit prioritizes ease of use and efficiency over any other feature, and the result is a userfriendly, feature-rich text editor that runs blazingly fast with ample support for programmers.

Built-in FTP support, file comparison, and automation through macros are just a few among its long list of features.

For OS X

1. TextMate

TextMate has become the de-facto choice of programmers on the Mac platform over the past couple of years, courtesy of its lengthy list of developer-oriented features. Auto-indent, advanced search-and-replace, foldable code blocks, column selection, clipboard history, visual bookmarks, and support for recordable macros are just some of its features.

The end result is a product bred thoroughly in the Apple spirit of simplicity that, nevertheless, holds the heart of a true programming text editor.

For Linux

1. Emacs

Of the three major computing platforms (Windows, OS X, Linux), Linux boasts of the largest selection of powerful text editors designed specifically to fit the needs of programmers (who also happen to form the platform’s largest user base).

Emacs is programming text-editor royalty — an extremely powerful (albeit complicated) piece of software that has been ported to virtually every platform imaginable (including Windows, OS X, BeOS, etc.). Like all Linux software, Emacs too is free and can be downloaded in multiple flavors, of which GNU Emacs happens to be the most popular.

In terms of features, Emacs is heavily inclined towards hard-core programming with extensive support for automation through powerful macros. A content-sensitive editing module, a large library of extensions, and a fully customizable interface round up the list of impressive features.

2. Kate

Kate can almost come across as Emacs-lite. It’s UI is very easy to use (compared to the almost draconian Emacs) and the text editor is extremely easy to get started with. Hidden beneath the user-friendly interface, though, is a very powerful text editor that can make a programmer smile in delight.

It has support for all the features you’d expect: syntax highlighting, macros, code collapsing, code automation with argument hints, session support, etc. and then some more.

Conclusion

There are dozens of text editors on the market, and this list barely scratches past the surface of this niche industry. Finding a programming text editor that fits your needs is a matter of trying out the different editors and poking around for a few hours until you get a good feel of the product.

Programmers tend to be creatures of habit; once you get used to a particular text editor, you wouldn’t want to use anything else.

The post The Best Programming Text Editors for Windows, Mac and Linux appeared first on Speckyboy Design Magazine.

There are certain rules – both said and unsaid – that apply when attending hackathons. While most hackathons remain informal, free-wheeling affairs, you can learn a lot more from them if you follow a few tips:

1. It’s not about competition

Barring a few headlining hackathons such as TechCrunch’s TC Disrupt, most hackathons are noncompetitive. As a coder, it can be difficult to refrain from launching into an intellect-measuring competition; but to be successful at a hackathon, this is exactly what you must do.

These events are opportunities to learn from others and make new connections, perhaps even find co-founders for a startup. To treat them as competitive code-slinging intellectual wrestling matches would be a terrible waste of the platform.

Even in competitive hackathons, remain open to overtures from other participants and keep all competitive hostility in check. You never know when the perfect opportunity might drop in your lap, and it could come from anywhere.

2. Do plan ahead

Most events have pre-decided themes – mobile, consumer web, data, etc. Acquaint yourself with the theme beforehand and prepare a flexible road-map for the actual hack day. At the same time, don’t straitjacket your creativity with an obsessively planned-out hack day project.

It helps to know what you might build; it helps even more to be receptive to ideas and lessons from other participants at the event.

3. Attend the right hackathon.

Different hackathons attract different hackers. Some, such as Rewired State, are geared towards open data with a more relaxed atmosphere and plenty of socializing.

Others, such as TC Disrupt, are entrepreneurial in spirit and attract startup founders, would-be entrepreneurs looking for co-founders, and even odd VCs looking for the next big thing.

Pick a hackathon that fits your ideology, skills and interests. But at the same time, go beyond your comfort zone by attending a few events diametrically opposite to your domain of knowledge. Open-source, non-profit enthusiasts can learn a lot from for-profit startup founders, and vice versa.

4. Do socialize

The very point of a hackathon is to get coders out of their coding dens into a comfortable space to enable sharing and collaboration. If you are stooped before a solitary computer in a corner of the room on hack day, you are misinterpreting the method and the meaning of hackathons. Move around. Socialize. Hack events are filled with people whose interests and ideologies align. Don’t hesitate to chat up random strangers – it’s what you both are there for.

5. Take care of physical necessities

Eat, drink, sleep: three words that are often tossed out of the window at hack events. Mountain Dew, Red Bull and beer are often the drinks of choice at hackathons; skip them for a bottle of water and make sure that you stay hydrated throughout the event (which can stretch from a day to a whole week).

Likewise for food: eat to fuel your body, but not beyond it. Sleeping is rare at hack events – part of the fun is late-night coding sessions – but don’t let that stop you from taking a few hours off to catch your forty winks.

6. Discuss, analyze, interpret, reconnect

Once the hackathon is over and the excitement and nerves have worn off, reconnect with your newfound friends and acquaintances over Twitter, Facebook, and email. Discuss the event, analyze what you learned and interpret your findings.

The lessons from one hack event often carry over into real-world projects. Many even find co-founders for the next hot startup in the post-event follow-up (GroupMe was hacked together over a weekend, for instance).

7. Don’t get addicted

It’s easy to get hooked on hackathons, especially if you live in a tech mecca like San Francisco or New York that abounds with them: the chance to meet like-minded individuals, hack for fun, and possibly build something useful is alluring.

However, there is a very real danger of getting addicted to the simple highs of hack events, especially if there is a potential of a bigger pay-off in the foreseeable future (an interview with a VC, a spot on TechCrunch, etc.). Too many coders and would-be entrepreneurs end up chasing these improbable rewards in lieu of doing actual work, which rarely works out.

Conclusion

Treat hackathons as what they are meant to be: informal platforms to build, connect and collaborate with like-minded individuals. You’ll make new friends, learn new things, and perhaps even profit from them. Above all, have fun!

The post Learning From Hackathons and How Not to Fail at One appeared first on Speckyboy Design Magazine.

Programming is difficult. Even the simplest of coding languages have steep learning curves. Add to that the imperative task of fixing security loopholes, and you have the perfect recipe for a concoction that can intimidate all but the most resolute of new converts to this field.

Most new programmers (and many old hands as well) are guilty of a committing a bevy of programming mistakes, some of which can be virtual suicide for a promising app or software program. The six most common programming mistakes are:

1. Not Validating Input

A numeric input field should get a numeric, not alphabetical input. A field that checks the price of a new car shouldn’t accept a dollar sign and other special characters. Validating the input is one of the fundamental rules of programming; breaking it can often lead to patchy performance and a host of easily exploitable vulnerabilities. Not only can hackers gain control over an app by carefully modifying the input, but incorrectly validated input also disrupts the data flow of a program.

How to avoid it:

Begin by using an input validation framework such as OWASP ESAPI Validation API (available for many languages). Maintain a strict policy of assuming all input as potentially malicious until further verification. Carefully examine all potential sources of vulnerabilities – filenames, databases, cookies, etc. – fixing each along the way. You can never really be too obsessed with security; using an input validation framework, and careful cross-checking of the code are only a few precautions to prevent a security mishap.

2. Cross-Site Scripting (or, Failure to Neutralize User Input)

Another common programming mistake is a failure to neutralize user-input before using it to generate output on a dynamically generated web page. Suppose a web-page requires input from a user (such as a comment field) before redirecting him to a dynamically created web page that incorporates that data. If the programmer fails to neutralize the user’s input, a hacker can insert malicious code into the input field, which can subsequently lead to inclusion of malicious, browser executable content (JavaScript, Flash, etc.) in the page.

How to avoid it:

Cross-site scripting usually occurs when users are allowed to submit unregulated content to be consumed by other users of a website. It is most common in sites that allow user-generated content such as comments for forum posts. This exploit has been prevalent since the beginning of the internet when ‘guestbooks’ were a common feature on most sites.

To prevent this from occurring, consider using a vetted framework that makes it easier to generate neutralized output, such as the Microsoft Anti-XSS library or the OWASP ESAPI Encoding Module. Further, carefully examine your code and understand the relationship between various components, neutralizing and escaping any user-generated content before outputting it to a web page. This cross-site scripting prevention cheat-sheet is a good resource as any to learn more about this exploit.

3. SQL Injection (or, A Major Failure to Neutralize User Input)

The previous mistake only affects other visitors to your site; but failure to neutralize user input before using it for database interaction is the even nastier version of this problem – it can take your entire site down and wipe out precious data. This should actually be the number one problem, because it causes more serious problems and dangerous security breaches than probably any other mistake. Mess up on this one, and your entire server could be taken over by a hacker.

How to avoid it:

To learn more about the technical details of SQL injection attacks, read this article on SQL Injection. The solution is actually rather simple: always, always escape all user input before using it in a database query. Most programming languages have built-in functions to clean user input before use in database queries. (For example, mysql_real_escape_string in PHP.)

4. Poor Formatting and Improper Comments

By its very nature, programming is a collaborative effort. This means that code generated by one programmer may be accessed and modified by other programmers days, months, and even years down the line. A failure to format the code and provide effective comments detailing each function makes code unmanageable and difficult to maintain.

How to avoid it:

Each programming language has its own entrenched ‘grammar’ and style guidelines. When in doubt, refer to them to gather insight on how to effectively comment and format code. Regardless, develop a habit of inserting appropriate white-space and starting each new function with a comment detailing its use and scope. Practice brevity; comments need to be concise and to the point, not overly wordy. A couple of well-written comments can go a long way in making code easier to read and interpret. Also, be careful to break up code by the specific task it performs; avoid run-on code, just like run-on sentences.

5. Improper User Authorization

Controlling what logged-in users can and cannot do is crucial to ensuring application security and stability. Inadvertently allowing users access to forbidden areas is a mistake new and old programmers alike are sometimes guilty of. Most recently, the ICANN allowed applicants to its new gTLD program to view other applicants’ private information in a major security gaffe, proving not only the pervasiveness of this programming error, but also its injurious consequences.

How to avoid it:

Each application should be divided into limited (normal), privileged, and administrative areas, and given rights and control accordingly. Most logged-in users must be granted limited additional rights, and only a few trusted parties must be given administrative control. Use of role-based access control (RBAC) is also highly recommended.

It is also recommended that you use a vetted library (such as the JAAS Authorization Framework for Java) to make this weakness easier to avoid.

6. Using Hard-Coded Passwords

This is one of the most prevalent programming mistakes, simply because of its convenience. Using a secret hard-coded password for authentication across all the components of a software program makes modifying the code very easy, but also makes the software vulnerable to security breaches. If an enterprising hacker gains access to this password, not only will the security breach be nearly impossible to detect, but also difficult to fix, putting your entire product at risk.

How to avoid it:

Every software program utilizes either of the two authentication methods: outbound (i.e. connecting to an external database or file to verify authentication), and inbound (the authentication mechanism is built into the software itself). For outbound authentication, it is best to save all relevant login data in a strongly encrypted database or protected file. No outside user should be granted access to this information.

For inbound authentication, the security vulnerabilities of a hard-coded password can be circumvented by requiring all users to enter a unique, strong password upon first registration. These user-specific passwords should be “salted” (the process of adding a special secret string to the actual password), then hashed using a one-way hashing algorithm before storage. Passwords should never be stored in plaintext.

In conjunction with access control checks, the elimination of hard-coded passwords can significantly improve the security of your program.

The post Six Common Web Programming Mistakes and How to Avoid Them appeared first on Speckyboy Design Magazine.

Every digitally controlled system runs on software. Netscape founder and Silicon Valley icon Marc Andreessen went so far as to say that “software is eating the world“. And since every piece of software requires programmers to code it, it is inevitable that in the near future, an active knowledge of programming will be a significant advantage in virtually any job.

According to Boston.com, ‘computer applications software engineer’ is the fourth fastest growing job in the United States, with a median pay of $82,000 in 2006 (a figure bound to go up as demand far outstrips supply). In fact, to get a job in any computer-related field, a working knowledge of programming is a must. Even in jobs that have traditionally been technology shy, such as journalism, programming knowledge today is much sought after as data journalism and online publishing upstages more traditional models. It goes without saying that picking up some programming knowledge will be of massive benefit to your career.

On the plus side, you don’t really need a degree to learn programming. Indeed, some of the most sought-after programmers in the world are self-taught. Ready to add a little programming to your skillset? With the ubiquity of technology, a number of free resources have cropped up online that will teach you programming for free.

Starting Out – Learning the Basics

Codecademy has brought about a small revolution in programming education with its innovative mix of instruction and practical application in an easy to access, easy to use single interface in the cloud. So successful was this model that Codecademy was able to accumulate over 200,000 users within a couple of months of launch.

For beginners, Codecademy is the perfect starting platform. Currently, its primary focus is on teaching JavaScript – a relatively easy language used on virtually every website. Getting a firm grip on JavaScript through Codecademy’s unique tutorials will give you all the tools you need to grapple with more advanced languages such as Ruby and C++.

Eloquent JavaScript is another highly recommended free book that brings a modern perspective to programming education. Combined with Codecademy, this book will yield ample rewards to the aspiring programmer and pave the way for more advanced programming subjects.

Beyond JavaScript – Ruby, Python, and More

Ruby (including its spin-off, Ruby on Rails), has a devoted following among programmers, who swear by its flexibility and speed. RubyMonk will teach you the syntax, idioms, and even the philosophy behind effective Ruby use in an interactive, Codecademy-like interface. As of now, RubyMonk is completely free to use.

Hackety is an alternative to RubyMonk that teaches the basics of programming in an interactive graphical user interface. While it does not have the depth of RubyMonk, it is perfect for beginners stepping unsteadily into the world of programming.

Python is an open-source, high level programming language that finds plenty of use in web applications. Python emphasizes code-readability, and is easy for beginners to approach. LearnPython offers easy-to-follow tutorials for the language that follow the Codecademy interactive model.

Crunchy is another resource to learn Python that goes beyond the basics taught by LearnPython. Crunchy is a downloadable application that delivers interactive Python lessons inside a browser window. The lessons cover beginner as well as advanced topics.

While not entirely pertaining to hardcore programming, a working knowledge of CSS is essential for any developer today, especially because of the growing confluence of desktop and web applications. CSS (Cascading StyleSheets) is used in conjunction with HTML to style web pages. CSS3Please offers a comprehensive tutorial on CSS3 (the most recent version of the CSS standard), although it assumes that you are already aware of the basic syntax and functions of the language.

SQL is a server-side language used in various avatars, particularly SQL Server and MySQL (MySQL is used as the database on most websites). SQLZoo offers beginner tutorials on the language and will get you up to speed on the basics in an approachable manner.

One higher-level resource every aspiring programmer must bookmark is Udacity. Udacity offers extensive tutorials on concepts related to computer science, taught by leading professors and programmers from around the world. The courses are designed as regular classes, with lectures, tests and tutorials. As of now, the courses teach you everything from programming a robotic car to coding a search engine.

Two more resources students should keep an eye on are Coursera and EdX. Both these platforms are in their infancy, but given the ambition and calibre of the teams backing them (EdX is a joint venture between MIT and Harvard, while Coursera has courses taught by Stanford, Princeton, UMich and UPenn professors), these two avenues should soon offer a wealth of programming knowledge (along with a host of other subjects). Best of all, these resource — like all of the ones mentioned here — are available for free.

What will you code?

The post Learn Programming Without Paying a Penny appeared first on Speckyboy Design Magazine.

Consumer web startups can benefit significantly from adding gamification to their websites/ apps. As evidenced from the success of startups such as FourSquare and Klout, gamification can enhance customer engagement and encourage repeat use. Well thought-out rewards can also bring viral traffic to a website as users share their rewards with friends and followers on social media channels. A slew of case studies by gamification startup Big Door reveal how adding game mechanics can boost engagement, loyalty and revenue across a disparate group of companies. According to Gartner, by 2015, almost 50 percent of companies that “manage innovation processes will gamify those processes”.

Understanding Gamification

Gamification entails adding features that reward user loyalty without impinging on the user experience. An intrusive, artificially implemented reward/badge program will detract from the overall experience and can actually deter growth. Gamification – which can be as simple as the red “new notification” icon in Facebook – ought to be deeply integrated into the website design and must feel like an intrinsic part of the user experience to be successful. A good example of this would be FourSquare, which is built around rewards and badges. The idea is to tap into everyone’s inner competitive spirit.

Gamification must also allow for spread through viral channels. Klout is a good example: by awarding ‘Klout points’ and badges to users, it encourages users to share their rewards with fellow Twitter users, which increases the company’s brand awareness. In any well-structured app, “virality” through social media integration should be built directly into the gamification features.

Gamification is not, however, the mere addition of random rewards distributed arbitarily. There must be actual effort involved in unlocking an achievement or badge. At the same time, the rewards must not be too difficult to achieve either, as that can discourage users. At the heart of good gamification is maintaining a balance between reward and effort. Thus, extensive testing is intrinsic to any effective gamification deployment.

How to Add Gamification to a Website

Depending on the scope and scale of your website, you have two ways to add gamification: build a native system from the ground-up, finely tuned to your site’s requirements and structure, or, utilize a turn-key gamified rewards program such as Big Door, Badgeville, etc. The former option may be cheaper cash-wise, but will also require significant input in terms of designing and distributing badges/rewards. For most websites, the latter, turn-key solution is a better alternative.

It must be noted here that not every website can benefit from gamification. An informational website that requires little user interaction (such as Wikipedia) won’t see any gains from adding game mechanics. Other websites are perfect matches. One of the the best examples is the Stack Exchange family of sites (most notably, Stack Overflow).

Any gamification process should begin by creating a repository of badges/rewards and linking them with effort. The badges and rewards should be clearly demarcated into beginner, advanced and expert semantic categories (you can always break these down further). Earning a reward in each category must be consistent with the amount of effort required to progress from one category to the next. Winning a beginner’s badge, therefore, should be very easy, whereas an expert-grade badge should require loyal, consistent use.

Typically, completing an action is rewarded with a badge. For example, completing a single lesson on Codecademy wins you the ‘First Lesson’ beginner’s badge (since this requires little effort). Completing 25 exercises, on the other hand, implies that the user has spent a considerable amount of time with the application, and is thus, rewarded with the ’25 Exercises’ badge.

The badge design itself should blend in with the rest of your site’s design ethos, but stand out enough as to be worthy of sharing. FourSquare’s badges, for instance, tend to be beautifully designed and creatively named which encourages sharing and aids in viral growth.

Conclusion

The fundamental trick to adding game mechanics is testing and balance. Higher-tier rewards must be significantly difficult to achieve. At the same time, each significant user-milestone (completing 10 lessons, sending 15 invites, etc.) must be rewarded with a badge to encourage further engagement.

Some websites that use gamification effectively are: FourSquare, StackExchange, Codecademy, and Klout.

The post Using Gamification To Get Your Visitors More Involved appeared first on Speckyboy Design Magazine.

These ten commandments of web design are good rules to always abide by — but I’ll be the last one to tell you not to break them once in a while:

1. Thou Shalt Not Sacrifice Usability in Favor of Visual Attractiveness

Every website, even the humble personal blog, has a purpose and a message. Good web design should serve to enhance the experience of delivering that message, not shroud it visual razzmatazz that doesn’t serve the site’s purpose. Far too many web designers get carried away and abuse the tremendously powerful visual tools at their disposal to create online experiences that can take the visitor’s breath away, but also leave him scratching his head from a usability point of view. If it comes to a toss-up between usability and design, always favor usability. Your audience will thank you for it.

Try this: Usability Rules for Content Sites →

2. Thou Shalt Use the Right Tools and Technologies for the Job

Knowing which tools to use to complete any particular job is essential to create an exciting, usable, and stable experience. While many trade voices might declare Flash use to be absolutely inexcusable, the best web designers know that even a technology as universally deplored as Flash has its occasional, particular uses. Deploying a stunted HTML5 and CSS3 solution when Flash can deliver the “wish list” would be dogmatic, just as sticking Flash into pages where a quick HTML5 workaround is easily available would amount to poor design.

Before embarking on any design project, carefully peruse all the tools at your disposal and use them judiciously.

Try this: How Much Code Should Web Designers Need to Know? →

3. Thou Shalt Not Flood Your Site With Colors

Bathing a website in colors with scant regard for color harmony or color theory is a great way to kill a good design. The colors used in a site must serve a purpose; frivolous use of a variety of vibrant hues purely for the purpose of visual volume ought to be avoided. Great designs can be built with just three to four colors, provided they are sufficiently contrasting/complementing.

Try this: Beginners Guide to Using the Power of Color in Web Design →

4. Thou Shalt Make Your Site Load Fast

Quick page load times are crucial from both a usability and SEO perspective. Studies indicate that a mere 0.5 second delay can impact revenue by as much as 20%. Further, Google has started incorporating page load times in its search algorithm, heavily favoring fast-loading sites.

As a web designer, you should strive to reduce page sizes as much as possible. This includes, but isn’t limited to using a suitably fast web host, compressing images, optimizing code, deploying code compression technologies, and caching page content.

Try this: Web Design Speed Series →

5. Thou Shalt Keep Your Site Clean

Visual clutter can make a website appear excessively noisy, negatively affecting user experience. Strong background patterns, over-eager use of different fonts, an over abundance of dense imagery, and scattering too many navigational elements across the page are just a few ways to make a website look noisy and unclean.

The new Boston Globe design serves as a good example of a clean, content rich website that doesn’t negatively impact user experience.

Try this: The 10 Golden Rules of Simple, Clean Design →

6. Thou Shalt Explore More Fonts

The days of limiting your typographical choices to the default Arial, Times New Roman, Georgia and Verdana are long behind us. With current browsers, it is possible to experiment with hundreds of different fonts without harming the user experience. It is time to shed the 1990s conservatism and explore typograhpical choices that can bring a page alive.

Try this: 25 Completely Free Fonts Perfect for @fontface →

7. Thou Shalt Embrace Social Media

No website is an island, especially in the social media world in which we live today. The very notion of the internet depends on interlinking pages and sharing information; a web designer who doesn’t embrace social media is only digging his career an early grave. Ensuring that a page is easy to share across a wide range of social media properties is a vital skill every designer should possess.

Try this: How Developers can Take Advantage of Social Media →

8. Thou Shalt Build Sites for the Largest Possible Audience

This commandment could be alternatively titled: don’t create sites for Firefox and Chrome alone.

As a web designer, your aim should be to create a web experience that is accessible to the largest proportion of users possible. This means that you’ll have to find ways to make your site look good and function well in outdated browsers such as IE 7. Granted, limiting your audience to Chrome and Firefox alone will remove most compatibility hassles from the design process, but it will also mean depriving yourself of half the internet’s users.

9. Thou Shalt Design with SEO in Mind

Google, Yahoo and Bing are some of the biggest sources of free, targeted traffic. To create a website that doesn’t match-up on the SEO chart would be almost suicidal. Designers need not be SEO experts, but they must know the fundamentals of search engine optimization to ensure that the site can rank as well as possible in the SERPs. This includes ensuring appropriate use of heading tags, linking the site so it’s easy to index, and using relevant Alt, Meta tags, etc.

Try this: Essential SEO Considerations For A New Website [DOs & DON’Ts] →

10. Thou Shalt Design for Users, Not Advertisers

A majority of websites are commercial undertakings, often funded by advertising. But that doesn’t mean you should sacrifice usability and usefulness to pander to the whims and fancies of advertisers. As a web designer, your users should be granted a much higher priority than advertisers. Remember — the advertisers only want you because you have users. Alienate the users, and the advertisers won’t stick around for long either.

You should strive for a design that achieves a balance between keeping users as well as advertisers happy. Plastering the primary content area with annoying animated ads is the quickest way to alienate your user base. While intrusive advertising may aid your bottom line in the short term, in the long run, it will adversely impact your site’s brand image and user loyalty.

Try this: Creating Content that Sells →

Conclusion

Just as in all other industries, you must follow certain rules when you are a web designer. The ten commandments I’ve outlined above are some of the most fundamental rules to keep in mind as you create beautiful, functional and profitable sites for your clients.

The post The 10 Commandments of Web Design appeared first on Speckyboy Design Magazine.