stop sopa image

Sites such as Wikipedia and Reddit are going “dark” this Wednesday, Jan. 18, to protest the Stop Online Piracy Act (SOPA) which, critics contend, would compromise the ability of any site that includes outside links to carry on current operations.

Feeling left out? A simple piece of code is helping the entire web (from major sites to even the humblest of Tumblrs) go dark in solidarity. The code, called STOP SOPA, replaces any site’s landing page with a black screen. Using your mouse a flashlight uncovers a message explaining the need to kill SOPA and a link to anti-SOPA site AmericanCensorship.org.

SEE ALSO: On the Street: Do You Understand SOPA? [VIDEO]

The idea of “Going Dark” is a worst-case scenario protest against SOPA, essentially warning that link-heavy sites such as Reddit and Wikipedia might get shut down, or go dark, if SOPA becomes law.

The STOP SOPA code was created by Zachary Johnson, a developer and Internet enthusiast, out of anger:

I’ve been calling my representatives in Congress, but this gave me another outlet for my frustration with this legislation. I place this code in the public domain. I require no attribution.

You can find the code here and get a sense of what sites will look like before and after application. Make sure you don’t add it until Jan. 18, otherwise your site will prematurely go dark.

More About: code, SOPA

For more Dev & Design coverage:





The Web Development Series is supported by Rackspace, the better way to do hosting. Learn more about Rackspace’s hosting solutions here.

Taking on a large project can be both exciting and intimidating, particularly if you’re a solo developer. Big builds can be a lot of fun and serve as great learning experiences. At the same time, you have to keep the project moving forward, or risk missed deadlines and burnout.

Below are some tips to help you stay organized and productive, whether you’re working individually or as a team.


1. Make Your Contract Rock-Solid


When dealing with clients, issues like scope creep, late payments and deadlines are always a concern. And what may seem obvious to you may not be clear to your client. To avoid hurt feelings, delays and financial troubles, your first priority should be establishing a thorough, firm, but fair written contract.

A good contract protects both you and your client. In addition to general terms and conditions, your contract should contain specifics about the project: payment schedules, due dates, deadlines (and consequences for missing those deadlines), cancellation policies, guidelines regarding intellectual property and project scope. You can find many sample contracts on the web, but there’s no substitute for consulting with an attorney. When dealing with the safety of your business and your livelihood, the expense is justifiable, and should be calculated in your business overhead.


2. Have a Well-defined Road Map


One of the required supplements to your contract should always be a project road map. It should outline all of the project features as thoroughly as possible, and establish the general plan for project progression, from research all the way through deployment.

To start, write out all of the features in outline format. It helps to break them down into groups, such as “Account Administration Features” and “Inventory Control Features,” for example. Keep refining the outline until you’ve defined exactly what is expected and what needs to be developed.

Next, break the project down into different phases, such as research, design, development, testing and deployment. For each phase, state its goals clearly, and define where the project should be when the phase is completed. Have your client sign off on the phases, and include this document with your contract. You may want to make a second copy of this road map to include more technical details, such as technologies to employ and methods to implement each feature — but don’t change the scope unless your client signs off on the changes.


3. Establish a Style Guide


Whether you’re working alone or with a team, taking the time to establish a style guide for your project will help you maintain consistency throughout. Furthermore, when the project needs updating six months from now, you’ll be glad you made the effort.

There are two types of style guides you should consider: a visual guide and a coding guide. Keep in mind that either or both may apply to the project. The visual style guide should contain information regarding fonts, colors, branding and any other notes on visual appearance. You should also include a few examples of common elements, such as headers, forms, body content, sidebars and menus. While you may never need to go into such detail, the Skype Brand Book is a great example. The guide provides a great presentation to your client, a tool to help them understand how the project will ultimately look and feel. Review the established style with the client (mood boards are great for this purpose), and have them sign off on the look. Refer back to the visual style guide often during your own work to make sure you’re adhering to the set guidelines.

A programming style guide needn’t be project-specific (unless you’re working with a new team that has already established a style different from your own). It may be as simple as following an existing style guide, such as the Zend style guide. You don’t need to start from scratch here, but you need to be consistent. Having a clear set of guidelines will help any developers who may come on board later.


4. Take Time to Research, Plan and Test


When developing a new project, particularly one that’s interesting and exciting, people have the temptation to dive right in and get to work. An initial lack of proper research and planning can have detrimental effects, especially for larger projects. Take the proper initial steps and spend time researching, diagramming, reading through source code and organizing your thoughts. It will end up saving you time and money down the road.

The same applies to testing your code. It will spare you the tedious and often embarrassing problems of code rewrites, because the only thing worse than having your code fail during a demo is having it fail in production. Testing code and debugging shouldn’t be afterthoughts, so work both into your project estimate and timeline. There are a lot of automated testing suites out there today — everything from PHP and JavaScript to Ruby and Python, and countless other languages. It’s a good idea to learn at least one for each language you plan to use. Don’t forget to have real users navigate your software too. You and your client should both spend time actually using the site you’ve developed before going live.


5. Document As You Go


If you’re like most developers, you cringe at the thought of writing documentation. Taking the time to document something, especially when it seems clear at the time of creation, feels like a waste of valuable time. However, years from now those thousands of lines of source code may not make nearly as much sense.

Furthermore, programming styles and skill evolve over time, which can make old code hard to dive back into. So take time to document your code as you go. Make it as intuitive as possible by using descriptive names and logical progression. As a good rule of thumb, you should never need to document what something does, but make notes in your code that explain a feature’s purpose and function. Also note any dependencies that it either relies on or creates. Stopping at the end of each new feature and taking the time to draft some end-user documentation is a good idea as well. This will make it much easier to train your client on the software, and will also serve as a good way to catch any usability issues or features that were accidentally omitted.


6. Use Version Control


This should almost go without saying, but many solo developers don’t use version control for their projects. For a large project, this simply isn’t an option. A good VCS (whether you choose SVN, Git, Mercurial or some other system) virtually eliminates the possibility of accidentally deleting or overwriting code.

In addition to providing an invaluable safety net, commit logs also help you track your progress. And the ability to branch, fork, and merge your code gives you the flexibility to experiment with different methods of feature implementation. You can also refine and fine-tune your software’s performance without the risk of breaking existing code. Finally, it simplifies remote backup and deployment to testing and production environments. These days, version control should be considered an essential part of your development, particularly if you collaborate with other individuals.


7. Take Thorough Meeting Notes


Whether you prefer to use a laptop or a spiral-bound notebook, take notes when you meet with your client and other collaborators. Otherwise, you may not retain that minor detail discussed during the meeting as effectively. Good note-taking demonstrates to your clients that you’re attentive, interested and dedicated to providing them with good service. It ensures you don’t forget the little details, and it also saves you the embarrassment of having to go back to the client for clarification. It sounds simple, but one minor modification that went forgotten or overlooked could mean major changes in code or functionality. Save yourself the headache, stress and humiliation and learn to write everything down.


8. Organize Your Assets


As with thorough note-taking, keeping assets organized is another important step toward streamlining your project work flow. You may even consider a separate version control repository for project assets that don’t belong in the finished code base. Your client will likely send you a lot of files, content, artwork and emails containing feedback and requests for modifications and new features. Often, they’ll send more than one version of those files or requests.

Think about putting these assets into version control or some well-defined project management software. It can go a long way toward helping you keep information organized. Sending the wrong file or hunting through hundreds of emails not only slows you down and introduces the likelihood of errors, it makes you look unprofessional.


9. Put Due Dates in Writing


Due dates may often be established when outlining the project and its contract, but if this isn’t something you’re already doing, or if your current system isn’t working as well as you would like, it’s definitely worth the attention. Large projects tend to have a lot of dependencies, and missing one deadline can often put an entire project behind schedule. Mark due dates on your calendar and discipline yourself to stick to them.

Due dates aren’t just for you, either. It’s not at all unreasonable to give your client due dates for various deliverables, such as content and branding, and to set fixed periods of time for reviewing and approving assets. Clearly define due dates for all parties, and furthermore, address the consequences of unmet deadlines. As with negotiating a contract and drafting the project outline, always try to be fair, but don’t be afraid to be firm. Your client will respect you for it, and your reputation and career depend on it.


Series Supported by Rackspace


rackspace

The Web Development Series is supported by Rackspace, the better way to do hosting. No more worrying about web hosting uptime. No more spending your time, energy and resources trying to stay on top of things like patching, updating, monitoring, backing up data and the like. Learn why.

Images courtesy of Flickr, ZedZAP .. gone camping, justonlysteve

More About: code, contract, design, dev, developement, MARKETING, programming, project, style, web development series

For more Dev & Design coverage:

If you’re a .NET dev who likes the sound of predictive bug-squashing, you might want to give Armadillo a shot.

This handy tool runs in the background and analyzes your code, flagging lines that need to be corrected. It follows you as you test your code and creates a safety net, protecting your work from regression bugs.

Armadillo creates validation scenarios that are continuously verified as you modify your code. If a bug is found, Armadillo pinpoints it so you can debug the code in question without running the whole app.

And best of all, as the software learns more scenarios, it is able to prevent more bugs. Armadillo will also show you unverified code so you can add validation scenarios yourself.

Armadillo works on Windows machines and can be used with Visual C# on Visual Studio 2010 to prevent bugs in WPF, WinForms and Console applications. ASP .NET and SharePoint scenarios protection is coming soon for web app support.

You can get a 21-day free trial, or you can subscribe for $25 each month. Commercial licenses, ideal for .NET shops, are $299 plus a $99 annual maintenance fee.

More About: armadillo, bugs, code, developers, development

For more Dev & Design coverage:

The Web Development Series is supported by Rackspace, the better way to do hosting. Learn more about Rackspace’s hosting solutions here.

Learning to code is something every tech-minded person should try at least once — and the wealth of online courses, many of which are free or surprisingly inexpensive, make learning about programming easier than ever.

If you’re thinking of picking up C++, Ruby on Rails, Python or Java, these online options might be a good way to test the waters of programming before you fully invest your time and money in formal training or certifications. And if you’re a veteran programmer in need of resources for learning new languages, these sites might help you a bit, too.

One disadvantage of learning to code through an online platform is the lack of face-to-face interactions with an instructor. But don’t let that intimidate you — Google, Stack Overflow, and other online forums (even Twitter) are great ways to get help when your code won’t compile, you don’t understand a concept or you just get frustrated.

In the comments, let us know if you’ve found other great resources for learning about programming — or other sites for support and Q&A for newer developers.

UC Berkeley Webcast/Courses

The University of California at Berkeley has an extensive catalog of webcasts, including events and courses. The coursework is entirely free to access, and it includes video and audio webcasts of computer sciences classes from the current semester all the way back to 2003.

Mozilla’s School of Webcraft

Mozilla’s 100% free developer training site is all about teaching noobs and jedis alike how to code. If you want to get started coding with something like HTML or if you’re an experienced dev who wants to dive into Python, the School of Webcraft is something worth checking out. Several courses generally run simultaneously, and new classes are being drafted all the time.

Google Code University

From Google Code, we have the Code University, a free and fascinating resource. And of course, it has its own forums for learners to ask questions and get help. True beginners can also start out with the introductions and tutorials, which are designed with newer devs in mind.

MIT’s OpenCourseWare

If you’ve dreamed of studying computer science at one of the U.S.’s leading tech institutions, here’s your chance. MIT’s free and accessible courses are great for ambitious would-be coders. Check out the full list of courses for computer science, which include introductions to Java, Python, C++ and more.


Series Supported by Rackspace


rackspace

The Web Development Series is supported by Rackspace, the better way to do hosting. No more worrying about web hosting uptime. No more spending your time, energy and resources trying to stay on top of things like patching, updating, monitoring, backing up data and the like. Learn why.


More Dev & Design Resources from Mashable:


Ruby on Rails: Scaling Your App for Rapid Growth
Should Your API Be Free or Pay-to-Play?
HOW TO: Get Devs to Use Your Company’s API
Should Your Company Offer an API?
10 Tools for Getting Web Design Feedback

Top image courtesy of iStockphoto user nullplus

More About: beginner, code, coding, developers, development, education, learning, programming, web development series

For more Dev & Design coverage:

qr cork image

Hamilton Chan is CEO and founder of Paperlinks. With the free Paperlinks iPhone app, featured previously by Apple as the #1 New & Noteworthy app, consumers can scan and view QR code content with a native app experience. Paperlinks also provides a powerful platform for generating QR codes, hosting content and tracking their performance.

The QR code: A thing of beauty or an eyesore? The magical barcodes that can be scanned by a smartphone to launch an offline-to-online experience are often criticized for their black and white checkerbox appearance. Those who doubt that QR codes will go mainstream are quick to point out that the look of QR codes will deter marketers and advertisers from using them.

Fortunately, QR codes are malleable and can be redesigned in truly extraordinary ways, while still maintaining their scanability. The truth is, QR codes no longer have to be checkerbox in appearance. We’ve entered a new phase of “designer codes” that can be integrated into marketing campaigns in an attractive way that isn’t an eyesore.

QR codes have so much potential from a design perspective, so let’s take a look at a few tricks and techniques you should keep in mind when designing a code to enhance your brand and appeal to your audience.


1. Add a Color Palette


The easiest way to add branding power to your code is to add color to it. Your QR code does not have to be standard black and white in order to be scanned. You can embed multiple colors and apply a color gradient without affecting scanability. The only rule of thumb is that the code color should generally be dark and placed against a light-colored background. Make sure the contrast is sufficient, or the code will be difficult to scan.

A “reversed out” code, where the background is dark and the boxes are light colored, is generally not recommended. Only a small handful of QR code readers can treat such codes as a film negative and properly interpret the data.


2. Soften Hard Edges with Round Corners


blue qr image

One of the QR code’s greatest aesthetic flaws is its numerous hard edges. You can dramatically lessen the severity of this look by strategically rounding some corners. It is not necessary to round all of the corners, but softening up the edges will definitely make the code appear more friendly and approachable.


3. Incorporate Dimensionality for 3D Impact


One high impact way to brand your QR code is to obstruct some of the boxes with imagery, such as a logo. By placing an image in front of the code, you imbue the code with a sense of depth. An ordinary barcode suddenly becomes a form of artwork, and you can really make a statement with the way you melt boxes together or choose to obstruct aspects of the code.

Fun ideas include adding a logo to the center of the code, but you could also add interesting elements to the corners or the sides for an even less standard look. Adding images or characters between the boxes is another playful way to dress the code with personality and style.


4. Use QR Codes With 30% Error Correction


green qr image

If you decide to add in a logo to create a 3D feel for your QR code, you need to decide which part of the coding to obstruct with your logo. The key to creating these eye-popping designer codes is to take advantage of the fact that up to 30% of a QR code’s data can be missing or obstructed, and still be scanned. QR codes can be generated with 0%, 10%, 20% or 30% error correction rates built in. Building in the 30% error correction rate adds more noise (extra boxes) within the code, but those extra boxes within the code can then be removed to make way for a logo or other interesting imagery.

If you use a QR code with 0% error correction, the code will look more streamlined, but opportunities to brand the code by adding in a logo are very limited. Removing or obstructing a single box within a 0% error QR code could render it unscannable.


Apply a Trial-and-Error Process


cork qr image

Technically, it is possible to mathematically compute which boxes in a QR code are the buffers that can be removed, but such computations are generally unnecessary. By applying a simple process of trial-and-error, anyone can begin applying their design techniques to a code and then test for scannability.

Be sure to test your code’s scannability with multiple QR readers, ideally three or four. Some readers may be able to overcome some stylistic elements of your designer code, whereas others will not. Deploying your code without testing for scannability is designer malpractice and can cause serious heartache with clients. It is true that even with reasonable precautions, designer codes may still be difficult to scan, so you must always weigh the costs of scanning difficulty against the benefits of designing a code that is eye-catching. If a designer code takes more than a few seconds to scan, it probably needs to be redesigned.


Conclusion


In the end, creating branded QR codes is as much art as it is science. The mathematical qualities of a QR code and the impact of a clever design can truly elevate a QR code to the point where the code becomes the central artwork of a piece of marketing collateral. Applying designer best practices will enhance scanning conversion rates and effectively augment an offline item with online capabilities.

It is only a matter of time before QR codes hit mainstream. Knowing how to innovate both in technology and design, and how to implement a QR code in the right way for your business, will keep your brand on the cutting edge
of marketing and technology.


Interested in more QR Code resources? Check out Mashable Explore, a new way to discover information on your favorite Mashable topics.

More About: 2d, code, design, Mobile 2.0, qr code, tech, technology

For more Dev & Design coverage:

Now here’s a tool we’d like to see applied to more languages. A handful of developers have just launched a site devoted to explaining the more intricate, difficult and quirky aspects of JavaScript.

Dubbed the JavaScript Garden, this project isn’t aimed at teaching JS noobs the ropes; rather, it’s supposed to refine the understanding of the language for current JavaScript programmers. Its creators, a handful of JavaScript experts, dole out well-organized advice on how devs can “avoid common mistakes, subtle bugs, as well as performance issues and bad practices.”

[Note: If you’re just starting out in JavaScript, the creators of the JavaScript Garden recommend Mozilla’s guide on the subject.]

As many a commenter noted in threads from our recent post on the JavaScript-based Node.js, JavaScript isn’t “easy” by any means. Although it’s used quite widely outside the hardcore hacker communities (particularly by those on the design side of the web), it still has its own unique frustrations and complexities, even for experienced devs.

For example, within the JavaScript Garden, you can find detailed information on the for in loop or a detailed explanation of how this works.

The JavaScript Garden comes from Zynga JavaScript dev Ivo Wetzel and student/front-end developer Yi Jiang with contributions from Spotify dev Andreas Blixt and IBM engineer Caio Romão.

From what we can see, the Garden is still a work in progress. What other topics would you like to see explored in this resource?

Image based on a photo from iStockphoto user TommL

More About: code, developers, github, javascript, javascript garden

For more Dev & Design coverage:

If you’re a developer interested in earning some passive income for blocks of code, or if you’re a dev who’d like to save time by buying someone else’s code, we’ve got an interesting proposition for you.

Binpress is a new site that hopes to act as a marketplace for source code. Its goal is to bring web developers “high-quality and high-level source-code solutions for development projects and web ventures,” and it promises that all code sold is “mature and tested,” a promise that’s fulfilled in the company’s developer screening and selection process.

You can go buy — or sell — a JavaScript image manager or an auction system coded in PHP, the little code packages that might make your projects a little bit less of a headache and your work process a little bit faster.

For example, if you’re working on an e-commerce app, you can buy this Paypal API abstraction class for Express Checkout and Direct Payment features. It’s written in PHP, and you can buy a single-site license for $25; a multi-site license will run you $200.

And once you buy a code package, you will receive all future updates and fixes of that code. You’ll have the opportunity to contact the developer if you need to, and you also get a money-back guarantee.

On top of all that function, we have to admit that the form is pretty nice, too:

Binpress seems like a lot less effort for everyone involved than “rent-a-coder”-type outsourcing or contracting solutions, and it generally costs less, as well. Some code is even free, and with many packages, you can see a demo of the code in action before you buy.

In addition to single-language, stand-alone components, Binpress also offers code packages for web frameworks such as CakePHP and Django and platforms such as WordPress and Joomla.

Binpress is a fairly new initiative, and its marketplace offerings are slender so far. So to kick things off and incentivize devs to sell their code on the site, the company is running a programming contest with more than $40,000 in cash and prizes for winners. The contest’s sponsors include Google, Microsoft, PayPal, Amazon Web Services, Conduit, O’Reilly, Tropo, Media Temple, uTest and others.

Although the idea of a “code marketplace” is hardly new, it’s timed well for the current development market. We saw a lot of similar ideas floating around in the early 2000s; however, web development and the dev ecosystem and communities have changed significantly since then. It’s long been time for a new, better way to buy and sell code packages and snippets, and Binpress is a good-looking, functional site that meets the need. If enough devs flesh out its code package inventory, we can see the site being of great use to developers, both those who buy and those who sell.

Binpress comes from Lionite, an Israeli web dev shop with a focus on great design.

In the comments, please let us know if Binpress is the kind of resource you’d use, either as a buyer or seller, and why or why not.

Image courtesy of iStockphoto, jgroup

More About: binpress, code, developers

For more Dev & Design coverage: