How to begin on Front End Development

A friend of mine asked me today how could he begin on front-end development without knowing anything at all of programming and bellow is what I have pointed out to him. These links should get anyone started with basic concepts of front-end development and learning should be easier after that.

Some links to get you started on HTML, CSS and JQuery (Javascript)

• http://www.html5rocks.com/en/
• http://twitter.github.com/bootstrap/ (use as reference – they do everything very well)
• http://www.css3.com/
• http://jquery.com/

Med-advanced

• http://lesscss.org/
• http://sass-lang.com/
• http://backbonetutorials.com/

Get used to concepts like Responsive CSS (it’s great) and for those you can use test tools like: http://screenqueri.es/ to check if everything is ok.

Get into Twitter and Google+ and  follow me on those (you can get the links at www.mcloide.com) and you will see that there is a bunch of people that I follow that are in regards of CSS, HTML and Javascript. There is always a bunch of new things that you can learn from developers that work with front-end in a daily basis.

You can also check hubs like Coderwall and Geekli.st where you can find info, tutorials and tips on HTML, CSS and Javascript.

As tips remember this:

•  IE sucks -> it will break your design / css / html / etc so if it works on IE it works on everything else
• Google is your best bud -> there is always someone with the same problem or a similar problem as the one you are having
• in backend programming we use the concept of DRY (don’t repeat yourself). In HTML you might not be able to use it, but for both CSS and Javascript you can use it.
• You can use JS Lints (http://www.jslint.com/) to check if your code is pristine
• You can use Fiddles to test some stuff on the fly (http://jsfiddle.net/)
• Use either Chrome or Firefox while developing, the Firebug and Chrome Inspector are excellent tools to check on javascript errors, small inline css changes, etc
• The best way to practice and start, build a site, publish it and ask for a review on it from other dev’s / people – it will give you ideas of UX and if you need to improve your code.

I’m not a front-end developer, but these are the steps that I usually take when I need to code something for front-end. Either way is a good start for anyone that haven’t coded anything in front-end or is simply considering on starting on web-development altogether.

Getting your head around Backbone.js

Truth is that I’m still a beginner on this and I’m still learning, but since I have found some resources and did a bit of study, here is what I could gather so far.

To be able to understand fully how backbone.js worked I have decided to do a small compare with CakePHP MVC structure, so I have started an example with the following directory structure:

• app
  • controllers
    • // extend Backbone.Router
  • models
    • // extend Backbone.Model
    • collections
      • // extend Backbone.Collection
  • views
    • // extend Backbone.View
  • libs
    • js
      • jquery files
      • backbone.js
      • underscore.js
      • bootstrap js files -> these weren’t loaded on the main index.php file because of conflict, couldn’t figure out why so far, but I will look into it
    •  css
      • bootstrap css files
    • img
      • bootstrap img files
  • index.php

The index file was a simple file that loaded all required scripts and the only requirement is to load the underscore.js file prior to the backbone.js and, off course, loading your controllers, views, models, collections, after these.

The controllers are called “routers” on backbone js. At some given point they were called controllers, but the naming convention were changed because some confusion. In one of the links that I will paste bellow have more info about this.

The views can work just like the CakePHP views, the only real big difference is that the part that render the “view” is under this view file. In another words, the Backbone.View.extend is both a view and a controller renderer.

The models are a bit bigger concept than CakePHP. The models are split in Models and Collections. To explain this better consider that User is a model and Users is a collection of User, so when you do a Users.get it would return all objects from the User model that is stored.

I have just started to scratch the surface from Backbone.js, so don’t take anything for granted, but here are all links that I’m using at the moment as reference. They are helping me, so they might help you as well:

• Backbone on Github
• Backbone.js tutorials
• Backbone.js for noobs by noobs (a little outdated, but helps understanding)
• Backbone Fundamentals (e-book in progress)
• Backbone Unit Testing
• Underscore.js
• Tutorial for Testing with Backbone JS, Jasmine and Sinon

 

A few weeks after I have 1st written this post I have got an excellent tutorial of how to handle Backbone.js. It is all in Portuguese (Brazil), but with a little Google Translation the tutorial should work perfectly for you.

Here is the link:

http://fernandomantoan.com/javascript/serie-backbone-js-parte-1-introducao/

 

PHP Series – Wrapping up

After writing and rewriting this post several times I have gave-up on posting it here a WordPress. It became huge and totally unreadable for a blog.

Anyway I wouldn’t let the series without an ending or a wrap of how everything was going to be tied up together and thinking on this I have organized the whole series, written a couple more articles, including this one, revised the codes and wrapped all together in a book.

I hope you enjoy this book as much I have enjoyed writing the posts that originated it.

Book: PHP Series – The encore beginner version

Got this coupon from Lulu.com: spreading the word  – enter code ‘ IDES ‘ at checkout. 10% off.