How to Write Better Code

Writing code is all about readability.  Even if it's just for you.  When writing code, using some best practices and standards will make your life a lot easier when trying to fix errors, stay organized, or when working with teammates.

1. Use Comments to Help Readability

Comments within code are useful for several reasons.  First, comments are a great way to type out in a conversational language what the code is doing.  Second, they are a great way to organize your code.  If you're scrolling through a long piece of you, it's a lot easier to look for comments than a particular line of code; they stand out more.  Third, it's a great way for team members to understand what you were doing or thinking as well.

2. Use a Standard When Indenting

When writing code, make sure to keep a standard throughout all of your code.  When you indent a certain way, do it for a similar piece of code later on.  It helps improve readability, audience understanding, and it might even help you spot errors.

3. Use a Standard When Naming Files, Classes, Etc.

Take a look at the code in green.  It's in camelCase.

There are several ways to name files and it really just boils down to what you're comfortable with.  A lot of people might be used to doing something like this: Desk_Talk_Blog or DESK_TALK_BLOG, or Desk-talk-blog.  But for me, I like to use a modified version of PascalCase called camelCase.  I will keep the first word lower-cased and for the second word I will capitalize the first letter and so on.  This is what it ends up looking like: deskTalkBlog.  So why do this?  Again, it helps with readability and it just gives you some organization.  I recommend doing it throughout your website down to the folder directories.

4.  Avoid Deep Nesting and Keep Line Length To A Minimum

Don't do this

It's easy to get carried away with nesting.  It is usually a great way to keep organized and matches a standard when indenting, but sometimes it is totallly unneccesary and just adds difficulty when trying to read it.

Furthermore, keep the length of your lines short.  It is so annoying when you're trying to read a line of code and you have to scroll to the right to continue reading it.  There's a reason why newspapers use multiple columns rather than one column; it's much easier to read.

That's it for now.  These tips have mostly been focused on HTML/CSS, but they can extend how to other languages as well.

Desk Talk Weekly - Web Turns 25 and More

Hey y'all,

I've decided that I might start collecting weekly news articles and trending conversations about web development and post them here.  Besides stuff in the news,  I want to talk about stuff that is trending or that people are talking about a lot.  We've got a big news event this week, so let's get started:

The World Wide Web Turned 25 Wednesday

Tim Berners-Lee submitted a proposal for the idea of the internet in March of 1989, the year I was born.  His proposal brought ideas of community and sharing stuff over what we call today, the Internet.  Soon, they developped the first website ever.  Today, Berners-Lee is still promoting the web, but argues that it should be open, free, and accessible by everybody.

CSS UI Icons

Trevan Hetzel has taken some of the most popular icons on the web and has recreated them using only CSS.  He argues that images are really annoying to deal with.  They can mess up responsive environments, are sometimes large, and they load slowly.  But, images cannot be replaced for now because we enjoy them too much.  Instead, he argues that we should code what we can.  I can see these becoming really popular; they are some of the most used icons and he provides the code for each one.  He also explains his method.

2048

This game has been talked about a lot this week.  The game is really simple and addicting, but what we're interested in is that it was made with Javascript!  Maybe the author will come out and talk about his Javascript creation soon.

Crowdsourcing Missing Plane Search

Crowdsourcing on the internet has been a big thing in recent years.  Basically, we are able to do bigger and better things through online collaboration; stuff that one person or a small team could never do.  This week, we were greeted with the sad news that a recent Malaysian plane was lost which carried over 200 people.  In an attempt to find the missing plane, which is still lost as of March 13th, people have been scanning satelitte images and reporting pictures of wreckage-like images.  So far, nothing has turned out to be anything of note, but the fact that we are all working together is an awesome thing.  And as developers, we have the opportunity to make stuff like this happen.

CSS Code Snippets

People love to save time.  It’s no surprise to find that developers enjoy saving time as well.  Mentioned in a previous blog post, developers are very particular about which code editor they use.  As we saw with Sublime Text 2, some editors have built in features that allow users to save time and code faster.  In this week’s post, we will go over another way in which people save time while working on projects: CSS code snippets.

CSS can be very basic; it’s a markup language.  In contrast to JavaScript, there is usually just one or two ways to make the document behave or look a certain way.  As a result, you can easily build something and share it with somebody.  CSS is very easy to tweak as well, so why not allow users to change up the code so that it suits their needs?

Some friendly and good-hearted developers have done just that.

Let’s say you want to quickly build a div that has a border radius.  If you’re like me, you still have trouble remembering the exact syntax to do so and looking up the documentation for it can be time consuming.  Instead of researching, try finding a tool for it.  In the border radius example, you can adjust the settings of the CSS to suit your needs.  We will go over a few websites that have these types of tools!

5 CSS Code Snippet Websites

CSS3Generator

The site provides 12 different tools including border radius, box shadow, multiple columns, transition, and transform.  One of the features that I really enjoy is the browser compatibility feature.  For each tool, the site will tell you which browsers the code is compatible with (including browser versions).

CCS Tricks

This site is a classic, fantastic resource.  The author, Chris Coyier, is well known in the developer community for his work on the site and his work with Codepen.  CSS Tricks provides a ton of snippets; some of which are more complex than CSS3Generator’s.  For example, he provides snippets for useful LESS Mixins.  He also provides snippets for other languages, so you can definitely spend a few hours here if you wanted to.

CSS Button Generator

HTML5’s button tag is nice and all, but it looks extremely plain.  This fancy little tool allows you to dress up buttons.  You can even create them with gradients and hover effects.

CSSFlow

This site provides some really nice looking results.  If you’ve got time, there are 11 full pages of code snippets ranging from toggle switches, buttons, tables, bars, etc.  A lot of it is really trendy looking as well.  The site also provides some nice looking UI kits.