Web Designer guide to Front End Stack

Dozens of blogs have been written to demystify the miracle process of the birth of a new front end developer, I suspect that I’m gonna add more but, at least, I have an obligation to tell my fella designers how I mutated from a UI designer to Front End developer.


A bit of history?

Web designers with the old definition had responsibilities to Design the interface and code into HTML/CSS output, Maybe some of jQuery seasoning on top! But basically, that is what they had to do, give or take some parts.

Then out of nowhere there was the uprise of MVC libraries to handle the Frontend i.e Backbone, Angular …

Till now, I know a lot of web designers their role still around the same task and I was one of them till 2 years ago! Genuinely the problem was there is no clear vision of how to grow, and what to become in the new world?

Why is it hard?

long story short, I jumped on the moving train of Javascript world and trying to hang on since!

When you are a designer, you can’t just process dev related jargon or concepts at ease. One of the biggest reasons is that the programmers/developers/engineers in this world just trying to overcompensate the bad years of high school with bag fatty word! :)

When you try breaking any big word down to understand you will find it very easy but someone just had to screw it for the next fellas :)

This happens a lot while reading design patterns books( in software design not in UX :P). You know what! just chill down it’s never a big deal once you get the hang of it.

Aside from the jokes, there is a lot for the designer mentality person to learn, This should be your first steps not to fast jump right into techniques and code snippets without understanding the underlying ideas.

Do not get distracted

Plenty of courses on Udemy, Codeshcool, Lynda or Pluralsight and they are all good but you will need to stick to one and apply!


The journey…

1.Code school: Javascript track.

Codeschool interactive courses gave me the first revelation about javascript and they are really good and straightforward for entry-level and for people who like taking baby steps at the beginning to understand fully the basics, which is not shameful, as with javascript you will always try to grasp the basics and will always suffer misguided, lost or utterly wrong concepts understanding.

2.Pluralsight: Basic of Programing with Javascript(Kyle Simpson).

The writer of ‘You don’t know javascript’, a famous ebook series which is available on Github here, the guy one of the best speakers on javascript and while I was at the beginning I was a fan of listening and watching rather than reading! this course is definitely your next step.

3. Take your time: don’t rush it

At this moment, you will feel not productive and you can’t get your knowledge into execution level! which is frustrating, but don’t make any scary code pile intimidates you, just keep focus because now you will have to start your own first project!

4. First project

By now you will have an introductory level knowledge, and only knows how to create an object, declare a function or using the console.log()

you need to know how stuff is getting done in JS! imagine in CSS you’ve just learned about floats and you need to build your first grid system :)

To give an example, people tends to do a ToDo app at the beginning because it has a straightforward logic and has a lot of applications.
You should get your own idea and try to start to build it, it will be dirty and sluggish at the beginning but with time, it will get better.

for me, I choose to do an application for a food ordering app which I tried to implement concepts and techniques along with the courses I’m studying.
Here it is, and keep the laugh and mockery for yourself :)

5.Books and larger concepts

Now, it’s important that you get yourself familiar with the software design patterns, it will last forever :), know the basics, by time, you will figure out why every pattern is a good fit for the problem solve.

  1. Secrets of the JavaScript Ninja: old but gold I started with it and it was enlightening!
  2. You don’t know javascript: as mentioned above!

3. Learning JavaScript Design Patterns(addy Osmani)

4. Eloquent JavaScript

Those are the best to start off with in my humble opinion, sure after while you will need no guidance to read anything :)

6. Foundations of Programming: Fundamentals

with Simon Allardice.
While I’m not a fan of lynda.com nowadays, but this course has its benefits if you’re having a hard time grasping on programming concepts! as simple and slow walkthrough using Javascript language as a demonstration.
Again, it may sound like a pep talk, but don’t feel down if you don’t get stuff like loops of if statements or the Why of things, you will get there!

7. Practical Design Patterns in Javascript

To be honest, this sequence now is being modified, I didn’t see at the time but I hoped for something like this, as I’m really a visual guy who loves the code being written and execute before my eye.

So this course is a real catch, his style is very smooth and won’t assume you knowing a lot which is the best part of it.

8. Knowing the features and the quirks!

Javascript is notorious for being quirky and unpredictable sometimes. But it’s the tool of the trade and you will have to know the good parts along with the bad!

For example, closures, hoisting, memory leaks, ways of declaring a function or object property accessing.

IImportant: Learn Advanced javascript 
http://ejohn.org/apps/learn/
It is a small yet condensed presentation-like walkthrough on javascript critical features, Also, you will have quizzes to help you to get your head around it.

IImportant: A test-driven approach to assessing JS skills
https://github.com/rmurphey/js-assessment
The purpose of it, not to test your skills, it is to get acquainted with Javascript everyday used techniques, solving them or googling how to solve them will add a lot to your skillset.


Summary

Don’t get overwhelmed, Just start!