Code Smart, Code Well

[Andy Haskins]

Just a heads up for anyone here who does code their own landing pages and websites, if you don't already it pays to learn how to code SMART and get more done. A few little tips below that I utilize every day.

NOTE: These resources won't be of any assistance to anyone who isn't used to coding and use WYSIWYG editors.

1) Use a good code editor.

Using a good code editor and not a piece of software that will bloat your code (Dreamweaver) will do you a world of favours when it comes to building landing pages. My weapon of choice, Aptana. Why do I choose Aptana?

- It's free
- It's customizable
- It has GIT support
- It has auto completing tags (i.e. you open one and it automatically generates the closing tag)
- It has built in templates for different coding languages saving you time
- There is a Zen coding extension (read below)
- Clean and clear interface

Find out more about Aptana here.

2) Consider Zen Coding

It's well worth considering a nifty little piece of kit called Zen coding if you are writing a lot of code. Quite simply, you write a short form line of code and press an action key (I use the tab button) and it generates the full code for you. Example:

You write:

ul.navigation>li*5

and press your action button, it spits out:

<ul class="navigation">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

It's literally that easy. Once you know the expressions to use you can build a page in no time.

More info - Zen Coding on Google Code

3. Use a framework or prototyping system

You may have heard of these already but to put it simply, they take the laborious task of creating resets, re-writing meta descriptions etc. The base code is all there for you. A couple of good examples are listed below:

Frameworks
- HTML5 Boilerplate
- Baseline

Frameworks/Prototyping
- Twitter Bootstrap
- Zurb Foundation

Just take a look at the Foundation Docs to get an idea of what you can achieve with these frameworks

4. Use SCSS or Less

Now this is not my forte and is next on my list to learn so I won't write too much, however, I am aware that it is an incredible way to remove repeat coding when working with CSS so definitely look in to it.

Once I know more I'll look at posting up a tutorial or something similar.

Find out more here

Let us know more

I'm always looking to improve my turnaround time when developing so if you have any resources you can recommend just list them below!

 

[Andy Haskins]

Also, with regards to point 1. I believe Mac have a great code editor called Coda 2 (although it does cost)

 

[Serious]

thank you Andy.

 

[Andy Haskins]

No problems, be sure to ask any questions in this forum if you need some assistance with coding!

 

[Hacder]

Great stuff. Thanks for posting!

Have you tried Sublime Text 2 ? it's a cross-platform lightweight code editor with lot of plugins (zen coding is also there), works with mac, windows and linux

I'm a big fan of this tool <3 Previously was using phpdesigner 7/8!

 

[Andy Haskins]

Great stuff. Thanks for posting!

Have you tried Sublime Text 2 ? it's a cross-platform lightweight code editor with lot of plugins (zen coding is also there), works with mac, windows and linux

I'm a big fan of this tool <3 Previously was using phpdesigner 7/8!

Yet to try it but thanks for the heads up, looks quite incredible actually and although it has a price tag, it looks like it may be justified.

 

[ezeey]

Thanks for the post, question, why do you say dreamweaver bloats your code? Do you mean if you are using WYSIWYG editor? I just use the plain old code view and just to see if I'm on the right track I switch to design.

I would say the best editor is Notepad++ use it more than DW

 

[Andy Haskins]

Thanks for the post, question, why do you say dreamweaver bloats your code? Do you mean if you are using WYSIWYG editor? I just use the plain old code view and just to see if I'm on the right track I switch to design.

I would say the best editor is Notepad++ use it more than DW

Tbh I'm not sure what the situation is with the current software and I'd imagine it can be considered a reasonable code editor these days, especially if it has the same sort of features as other coding software. I remember the days when it added extra breaks and poor tags.

I agree that Notepad++ is also a cracking piece of software. The main point is that you get a feel for something that helps you to work quickly and efficiently.

 

[crysper]

Andy you're quite a qeek man

I'm also using Aptana for server side coding, but for HTML, js I'm using Notepad++, it's just so lightweight. I used SCSS, Less not at all, but I still prefer plain CSS. Maybe for big projects starting from ground 0 with styling yea, it would be very useful, but when you use frameworks like jQuery UI or twitter Bootstrap, it's just too much in my opinion.

 

[Hacder]

Yet to try it but thanks for the heads up, looks quite incredible actually and although it has a price tag, it looks like it may be justified.

Yep it has a price tag but you can still use the tool for free as they give full version, they don't limit your usage or in features, they just annoy you with the pop up asking you to buy the tool if you want to help the developer (Sometimes when you save) which I think is fair enough.


Sent from my iPhone using Tapatalk

 

[bluffeyes]

really n ice work

 

[Luke]

Also, with regards to point 1. I believe Mac have a great code editor called Coda 2 (although it does cost)

Great post. Since switching to Mac a few years ago I've been using Coda and it's awesome.

 

[lucerosama]

Before, I'm using gEdit as my editor. Good editor, has a lot of plugins and free.

But now I'm currently happy with Sublime Text 2, although it has a license to purchase, they offer it free but it has a pop-up every now and then, I think every n of saves.

 

[blogdemanila]

+1 for Notepad++

currently, i'm using CodeLobster. - free!

if you are into Wordpress, Drupal or CakePhp, they have plugins too (Pro version)!