Learning programming is fun and easy, but writing a good program can prove to be a daunting task. In most cases, we find ourselves constantly scratching our heads trying to understand the spaghetti code we wrote, or making lots of changes just because of a newly added minor feature.

These outcomes can bring down our confidence but in fact, they can be solved with proper development practices. Here are 10 worthy habits to invest in to write cleaner and smarter code with less effort. Let’s start developing these habits now!

Read Also: 10 Misconceptions About Learning Programming That Are Not True

1. Write Human-Friendly Code

Always remember that you are not just writing code for machines, but for your future self too. So it is important to write readable code. In truth, programming is like writing a good poem. The tone should be consistent, the words descriptive and sentences well structured.

Here are some tips to write friendly code.

1. Follow Consistent naming conventions

For example, if you name private variables with underscore as the first letter, you should follow through in the rest of your code.

If you are working collaboratively, discuss naming conventions before anyone touches the code.

2. Descriptive Variable / Method Name

The variable and method name should describe what that code does perfectly. For example uncommon abbreviations like Sort_PT() may be confusing: what does the PT mean? If you can’t answer it on a second check, optimize the name to Sort_PostType() for better comprehension.

3. Indentation And Line Breaks

Indentation is magical! With some simple tab keys, you can reveal the entire code structure and edit the code with a clear understanding of how it will function.

For line breaks, use it when 2 codes on the same line execute different things. For instance, it’s best to not chain CSS properties on a single line — it complicates things.

2. Think Organization

On top of cleaner code, code structure and organization also helps with readibility issues. It is important to group your code to enable easy modification (if you need to scroll up and down multiple times to find your affected section, you need to work on the structure)

Also, don’t throw all the code into a single script. While it may seem convenient to have 8000+ lines of code in a single file, debugging is a nightmare when trying to recall method names. Always think about the ease of change.

The best practice is to separate code into different files according to their primary functions, for example manager, interface, animation, extension, etc.

(Image Source: urbanINFLUENCE)

Whenever possible, make sure the language only fulfills a particular purpose. If you are writing animation effect with CSS3, avoid writing jQuery animation effect, unless you have a strong enough reason. And if you do, comment in the CSS file about the exception.

Read Also: How To Create Bounce Effect With CSS3 Animation

3. Planning Before Coding

It’s crucial to know exactly what to do before you hit the first key. In the programming world, it is important to plan ahead. Writing a fixed navigation menu is easy, but what if the menu needs to be responsive, while being able to minimize itself when visitors scroll down the page?

Begining to code without a clear procedure in mind will often lead to retries, burnouts and a depression loop.

Plan Your Code

So instead of problem solving and programming the parallel way, it’s far easier to figure out the procedure first, then write a solution. List out general steps first (here is an example):

1. Use Bootstrap as responsive framework.
2. Create navigation menu.
3. Add .navbar-fixed-top to the menu.
4. Create jQuery script to resize menu when user scrolls down for over 200px.
5. If the user scrolls to the top, resize the menu once again.

Troubleshoot

At this point, you should discover other underlying isses, like how we should resize the site logo and menu title according to menu size, or if we need to resize the dropdown menu as well, or if the detection needs to be dynamic instead of fixed. Once you figure these out, it’s a snap to get the menu done.

4. Write Manageable Code

Trust me, you don’t want to change hundreds of variables individually, line by line. I did, for 1 straight year. That was a humbling experience, and since then I have learned to write code that requires as few manual changes as possible.

(Image Source: Logiq Tower)

How to achieve this? Use Array. It’s perfect for storing multiple variables, and you can access those variables with convenience for loop or for each method.

There are even more dynamic ways to add, arrange and retrieve data in certain languages, such as List and LINQ for C#, so be sure to periodically check out better features, libraries or plugins for smarter data management.

Lastly, to avoid constantly modifying stuff in code, write highly independent code that will not break the entire system when new features or changes are applied. It’s called Loose Coupling. After optimization, the developer only needs to tweak code in 1 class instead of 3 classes for new features.

5. Stop Overdoing Features

As our skills mature, we tend to develop more complex solutions that cater to a wider range of needs. It’s a good sign of growth but be wary as you might be stepping into another trap – overdoing a feature that’s entirely unnecessary to the project.

In development, it’s important to regularly remind yourself of the project’s main objective, and only add features that fulfill the purpose. If you know the exact collection size, use Array. If List’s function can retrieve the data the way you want, don’t use advanced LINQ.

Why develop a plugin when you hardly use that feature? Just because you can, doesn’t mean you should. Don’t waste your time. Rremember the most time consuming part aka finishing the project, is yet to come! Now, onto debugging!

Read Also: A Look Into: Premium WordPress Plugins

6. Learn To Debug Smarter

Where there is code, there are bugs. It’s impossible to have a bug-free code solution, so debugging skills are highly sought after. The ancient trial-and-error method may work, but it is slow. Too slow. Plus, why torture yourself when there are already debuggers developed for you?

Debugging Tools

Take Firebug for JavaScript as example. It comes with error detection, breakpoint setting, expression tracking, performance checking, all for your debugging convenience.

IDEs like Aptana Studio 3 and Xamarin Studio are even released with their own powerful built-in debugger, so investing the time to learn them can make your life much easier.

Read Also: 15 Websites To Test Your Codes Online

However, a debugger won’t know your code inside out. When in doubt, put the log function into the code, like console.log for Firebug, and make sure it’s good with variable integration (instead of retyping variable names as string or simply 'It works!'). The web is filled with more advanced and specific debugging methods for every language.

Read Also: 30 Cheatsheets & Infographics For Software Developers

7. Find A Stronger Editor

The right editors can help you grow in knowledge, and expedite project completion. Regardless of how experienced you are, it’s strongly recommended for you to go for editors with code completion, such as Sublime Text and Aptana Studio 3.

Not only is the feature very helpful for beginners to recognize and learn the syntax, but it can be utilized by professionals to check for possibly better codes or solutions. Do take note, most IDEs only support code completion for certain languages, so look for the right one.

Feature Filtering

For instance, one thing I love about MonoDevelop is its code template feature. With a custom shortcut key, you can output a self-defined code template from common switch statement to full-fledged manager script. This is great for large scale projects, so try to make this feature a priority during your editor hunt.

Other essential features to look out for:

• debugger
• regex replace
• macro
• version control support
• database support
• split editing
• layout customizer
• WYSIWYG editor

8. Do Version Control

There will be times when you make a huge programming mistake and want to go back to an earlier version of a code. Now what if your mistake involves several files in the codebase, and some of them were modified days, or even months ago?

Revert to the original and update the code bit by bit while solving bugs? This is counterproductive and why a version control system is greatly essential.

Version Control Systems

Among several version control softwares, Git is the most popular with a large number of documentations available online. With Git, you can keep as many revisions as you want, branch out the file for some code experiment, track down the part of code you changed last time, and revert back to them whenever you want.

Feels like overkill? Maybe, since it’s originally developed for team programming, but it’s also perfect for long term personal projects. You may be hesitant because the Git is in itself so much to learn up on, even with the GUI version. But it’s more of a sooner or later thing (so better that you make it sooner), plus the web is loaded with plenty of tutorials and guides to help ease the learning process.

9. No Extra Prototypes, Finish Current Project

Tedious coding and debugging can drain someone physically and emotionally. And some of us are inclined to prototype our work even before it is finished. While prototyping is a beneficial behavior in the long run, it doesn’t help when you do it to escape from work.

A better way to lose some steam is to enjoy something totally unrelated to the work, exercising, gaming, reading (perhaps?) — You have to keep your work life in balance. Anything but prototypes.

Read Also: 30 Common Reactions Programmers Have When Things Go Wrong

10. Always Learn Something New

In this field, you can get phased out fairly quickly. Many developmental approaches and programming languages even are declared obsolete within the past 10 years alone. Even if you graduate from a top university with a degree in the subject does not ensure that you are still primed for employment.

Read Also: Getting A College Degree Or Self-Learning?

The only way to survive and thrive is to keep learning.The best way to learn? Don’t just read, program. Challenge yourself with practical projects that require higher scalability. This forces you to think more efficiently. Explore, and enjoy the creation process. Practice is not something you can ignore in programming. The more you program, the better a programmer you become.

Malaysia Airlines flight MH370 carrying 239 passengers and crew members en route from Kuala Lumpur to Beijing, disappeared early Saturday morning, within hours after departing. Five days in, despite a huge search and rescue mission of planes and vessels from 12 countries (so far), the whereabouts of the plane is still unknown.

In the face of such a tragedy, it’s easy to feel disheartened and helpless. Aside from offering prayers, there is one other thing we can do: help with the search and rescue using Tomnod.

DigitalGlobe’s crowdsourced search platform, Tomnod, lets anyone with an Internet connection help in the search for MH370. Harnessing detailed satellite images of the region in which the plane is believed to have disappeared, the site is asking for users to comb through satellite images and tag objects of interest that they find.

So far, more than 600,000 has participated in the exercise, and you can too.

Recommended Reading: Download Offline Maps With GPS Navigation On Android With OsmAnd

Search For MH370 With Tomnod

To get started, just visit the Tomnod website. Click through the introductory text and press Start Tagging! on the Tomnod screen to start your search. You can also scroll down and find a bit more info about what you’re expected to help tag.

You’ll be taken to the main Tomnod screen. Most of the screen’s real estate is devoted to the satelite images themselves. The sidebar to the right shows all the map sections you’ve covered, one tile at a time.

Above that, there are 3 counters to show the number of map tiles you’ve explored, the number of objects you’ve tagged and the number of people who’ve agreed with your tags.

The left side of the screen has four icons for the 4 types of tags:

• Other
• Life raft
• Oil slick
• Wreckage

If you find something, just select the appropriate icon and click on the map to drop a tag. DigitalGlobe will use a computer algorithm to determine whether particular areas are tagged more than others. Sattelite imagery experts will then take a look at these highly-tagged regions and follow on from there.

There’s also a Notifications sidebar, accessible by pressing the Notifications button on the upper right of the screen, beside the Help icon. This is where any and all notifications will be shown. The icon will also show the number of unread notifications, if any.

You can also register a Tomnod account if you want to keep track of all your contributions. Just press the Sign In button on the upper right of the screen, right beside the Notifications button, and sign in with an email address.

Conclusion

DigitalGlobe will keep updating Tomnod with new images and data to reflect new information and any changes in the search area.

If you are unable to access the site at any time, just try again later as Tomnod’s servers are struggling with the incoming traffic eager to lend a hand to the cause.

Also, there might be times where there aren’t any satellite images available, even though the site itself is online: this is due to the DigitalGlobe team uploading new imagery. Again, all you can do is check again in an hour or so.

*Our thoughts and prayers are with the families and loved ones affected by this incident.

Codekit 2 was released a few weeks ago, and as expected, there are some big changes in this new version. For those of you who’ve just heard of it, Codekit is an application that puts together a number of modern web development tools including Sass, LESS, Jade, Kit, JavaScript mangler (Uglify.js), and JavaScript linters (JSLint and JSHint).

With the refreshing new user interface design and new icon, Codekit 2 also brings a bunch of new features under the hood. We’ve got our hands on it, and will show you how Codekit 2 can benefit your web development process, making it more efficient. Let’s check it out.

Recommended Reading: A Look Into The Kit Language

Built-in Server

Codekit is able to automatically reload the page on the browser; so as soon as you make a change within your project files, you will immediately see the result, giving you the experience of live editing.

But there is one problem in Codekit 1 that I had always encountered. If you do not configure the settings properly, you could end up making Codekit refresh the page, including other pages that are not part of your project.

This disrupts other activities you have running on other pages, because Codekit refreshed all opened pages.

In version 2, Codekit solves this by introducing a built-in server. When you launch it, you will notice a green light at the top right of the application window, showing that the server is “on”. Click on it, and you will see the server information such as: the Port number, and the address to access your project through the server.

You can use the address to access your project on any device within the same network. There are two given address formats; one with a nice name, and one with your network IP address format, which you can use in devices (most likely Android) that do not support Bonjour.

So, you now have to serve your pages within the browser through this address, like so.

See the following video for more details.

Tip: Change the Address

The nice-name-address format is derived from your computer name. So, if your computer name is “John Doe’s Macbook”, you will likely get a long address in return, something like http://john-doe-macbook.local:5757. To change it, go to OSX System Preference > Sharing, then change the Computer Name to something shorter.

Bower Components

The second feature that we’re going to take a look at is the Bower Component. Bower is a package manager for web development — it is similar to Homebrew for OSX package manager. There are a bunch of packages that you can find through the Bower registry including Bootstrap, jQuery, and Normalize.css.

In Codekit 2, you can now install Bower packages directly through it. Go to the Assets menu (positioned at the left side of Server menu). The Codekit author has listed a few selected packages under the Favorites tab.

The complete list can be found under the Components tab, and all installed components will go in the Installed Tab.

This would be very useful to start off a new project. If you need Normalize.css for example, you can install it through Codekit, then import it using the @import rule from your stylesheets, like so.

 @import (inline) "bower_components/normalize-css/normalize.css"; 

If a new version is available for it, you can simply update it through Codekit too, like so.

Zurb Foundation Project

Foundation is one of the more popular responsive frameworks, making it sort of a contender for Bootstrap. In Codekit 1, you can easily setup a Compass project with a few clicks, but setting up a Foundation project could be a bit of hassle, as it uses customized Sass/Compass binary.

In version 2, it is simplified. You can just go to File > New Zurb Foundation Project and you are all set.

Read Also: A Look Into Foundation 4 Responsive Framework

Final Thought

These new features make Codekit 2 a superior application for web development, and Codekit 1 now seems outdated by comparison. Note that Codekit is an OSX-only app. If you are running on a Windows machine, you can try Prepros, which also offers similar functionalities (minus the Kit language support, I think). Alternatively, you can also try GruntJS, Prepros or Koala so long as they get the job done.

Don’t like to be stuck inside the Youtube app while watching a video? It is the age of multitasking, of course, and if you ever thought of finding an app that allows you to watch your videos in a pop up window, then you are at the right article.

Introducing SuperTube, a unique app that’s capable of running any YouTube videos in the background. What’s more? If you prefer to have it floating, well you can do that too. Let’s check out what this app has to offer.

Recommended Reading: Screencast Your Android Display To Apple TV With Mirror App

Play Any Video In The Background

You may start by downloading SuperTube over here. Once you have it installed, open SuperTube and you will find that the layout is pretty much similar with to the official YouTube app.

Start by playing any video and then tap on your Android device home button, and you will notice that the video runs in the background in a window.

Using SuperTube

To "float" your YouTube video, simply tap on the pop up arrow button (top right) and SuperTube will bring the video out of the app in its own window. You can then move this window anywhere inside your device’s screen. You can also access other apps on your homescreen with the video playing.

This is how it will look like once it is "floating". You will notice that you can change the resolution, minimize the video to run in the background or close the video from here too.

Pinch and swipe to change the video window size. You can also rewind, fast forward, pause or stop the video with the command buttons below.

To change the resolution go to the drop-down menu at the top left. You can decide the rotation of the app, in Portrait or Landscape, or let it Auto Rotate (default).

To close the video you can go back to SuperTube or simply swipe down your Android device notification bar and then tap on the Exit button at the end of your video notification.

Overall SuperTube is a good alternative to the official Youtube app as it can run videos in the background, in pop up windows and the videos run smoothly too. Know of any apps like this? Share with us in the comments.

For some users, a progress bar can be a very useful thing. It informs them of how much closer they are to completing tasks. Normally, this is used to give a more user-friendly experience. When you open a webpage on your favourite browser, there is already a default progress bar in the browser tab to see if the page is completely loaded.

With Pace.js, you can now incorporate the page load progress bar into your own page.

Pace.js is a jQuery plugin to create a beautiful page load progress bar in a website. The progress is established automatically by inspecting ajax requests, document ready state, event loop lag (showing that javascript is being executed) and the existence of specific elements on a page.

When an ajax navigation or a pushState event takes place, the progress bar will also be restarted again.

Getting Started

Pace.js is very easy to implement. It can be used even without having jQuery library in your site. You just need to incorporate pace.js and a CSS theme of your choice as early as possible into your document:

 <head> <script src="../pace.js"></script> <link href="../themes/pace-theme-corner-indicator.css" rel="stylesheet" /> </head> 

That’s it! You’re done and your site now has a beautiful page loading progress bar.

Configuration

Substance wise, there’s no need for additional configuration as Pace.js comes with full automation. But if the default setting doesn’t meet your needs, you can use your own configuration as well.

To customize further, there are two simple methods you can choose. First, by including configuration inside window.paceOption like the following.

 <script> paceOptions = { // Configuration goes here. Example: elements: false, restartOnPushState: false, restartOnRequestAfter: false } </script> 

A second method is where you can easily add data-pace-options inside a script tag then define the configuration and call the pace.js resource like so.

 <script data-pace-options='{ "ajax": false }' src='pace.js'></script> 

You can find the complete list of available configurations you can use in the source page.

Final Thought

This plugin comes with a bunch of ready-to-use themes. To see the full list and demo of the themes, you can head on over to the plugin site. If those themes don’t suit you, you can easily create your own. With the help of a plugin like Pace.js, now you don’t have to worry about difficulties in implementing a loading page progress bar into your site.