Wednesday, June 10, 2020

Web development learning guide – a frontend approach

 

For the last 6 months I’ve been asked by a number of people to help them become programmers. Not any, but “the web” ones.

On the other side, around the same time I’ve had a chance to interview multiple people for the Frontend Developer position which assumes knowledge and experience with HTML, CSS and Javascript. The fact I was disappointed with both their skill level and their own opinion about it made me write this text – a mere guide for guides, courses and tutorials that should be passed through to call yourself a web developer.

This guide is linear, meaning you shouldn’t jump across chapters.

After you have passed all the tutorials you’ll have a web app project in the end which should finalize the whole learning experience and make you ready to start applying for frontend developer openings.

You have to know that the courses won’t be easy, especially if you have never done anything similar in your life. You’ll need a lot of willpower and patience to make it through.

If you’re currently using your computer’s default web browser (Internet Explorer on Windows or Safari on Mac), please hold on until you download and install Google Chrome and Mozilla Firefox. While preparing this guide I was using Google Chrome to go through the linked tutorials (actually, Chromium, but it’s almost the same).

Most of the referenced courses and tutorials are free and I’ll try to mark all the ones which are not.

By reading this text you accept the following terms:

This guide is free. Feel free to share it anywhere you want. If you copy any part or the whole guide or make it available for reading/download elsewhere, you cannot charge for it in any way and you have to reference this page.

I would have never been able to write all this without help from few friends, listing them in alphabetical order: Aleksandar, Dragan, Ivana, Milica, Nikola, Vladimir. Thanks a lot guys!

If you have any questions regarding the guide itself, feel free to comment here or get in touch with me directly.

Happy learning!

Introduction

There are a couple of things you should know in advance which won’t be affecting directly your coding skills, but will help you be much more efficient.

First thing is fast typing. It may sound absurd, but fast typing is one of those skills that can have one of the most positive impacts for your coding. The mere fact you do not need to look away from the screen while typing means you cannot lose focus from what you are doing.

There are a lot of free courses teaching fast typing and I really do not know which one is good or not, but take a look yourself and pick the one that suits you best from the list below:

You don’t have to master fast typing before continuing with this guide, of course, but you should schedule at least ten to fifteen minutes a day for it. In few weeks, up to a month, already, you’ll be surprised with how fast you can type.

Second is the editor you’ll be using. Text editor is an application we use to write and edit the code. Most famous text editor on Windows is Notepad, or its advanced version called Notepad++, while Mac users know the TextEdit one.

Coding process can benefit from an editor that can understand what we type and help us correct spelling or syntax errors.

There are many (good) text editors for coding but most of the courses and tutorials referenced here will assume you’re using the Sublime Text v.3: https://www.sublimetext.com/3

Sublime Text has a lot of built in functionalities that will help you while coding and if your needs are greater than the basics you can install an additional plugin yourself.

You’ll start with few Sublime Text guides now but before you jump on it you’ll have to have an HTML document on your computer that you’ll open later. So, open the following page in your browser: https://en.wikipedia.org/wiki/HTML and then, in your browser, open the File menu and choose the “Save as” or “Save file as” option. Save the page in a folder (if you see an option to choose the type of the saved document, chose “just html”). After you install Sublime text in the next paragraph you’ll open this page through the File/Open dialogue (file’s name should be “HTML – Wikipedia.htm”).

If you use a Mac computer it would be great to go through the following text/video guide for Sublime’s installation and basic set-up, some tips and tricks: https://scotch.io/bar-talk/the-complete-visual-guide-to-sublime-text-3-getting-started-and-keyboard-shortcuts (also go through the plugin installation list except the very last part called “Additional plugins”).

If you’re on Windows, here you can follow an installation guide:https://www.youtube.com/watch?v=W9q8CwDKIEw . Then you should install the package control plugin (one that manages Sublime plugins): https://www.youtube.com/watch?v=ioRbV7fQkdU. After that open the file you have saved earlier and continue with the Mac guide above, but starting with keyboard shortcuts chapter until the end, including installation of all the plugins (except ones described in the very last part called “Additional plugins”): https://scotch.io/bar-talk/the-complete-visual-guide-to-sublime-text-3-getting-started-and-keyboard-shortcuts#keyboard-shortcuts

Third thing is using the Google search. Most people do not pay much attention to the queries they submit when they search for something through Google but using some built in methods and techniques can significantly shorten the search process and get you more relevant results.

Here’s a couple of Google search techniques’ texts:

How internet works

How internet works

I assume you already have a day to day experience in browsing internet, using email, etc. So, what does actually happen while we browse latest news or read email on some web site?

Our experience is that we open a browser window, type a link/URL for some web site or a page and it appears in the browser.

What actually happens is the following:

  • The moment we have pressed the Enter key on our keyboard, after typing the link/URL, we have actually sent it over to the server (computer) which should deliver us the page back, in a form of www.MySite.com.
    The link above consists of several parts, separated with a dot, and browsers are interpreting it from the end.
    The .com part is known as Top Level Domain (TLD). TLD creation is controlled by an international agency IANA and besides doing this they are also assigning external agencies to manage and administer each TLD. For example, the aforementioned .com TLD is being managed by VeriSign.
    The list of all the currently available TLD’s can be found here: https://en.wikipedia.org/wiki/List_of_Internet_top-level_domains.
    TLD administration agencies are also in charge of registration of the next, second, level domains. When Google was registering their well known domain, someone did it through VeriSign or one of the registration companies that are authorized to register a second level .com domain by VeriSign (like Gandi or GoDaddy, etc.).
    People or organizations owning a second level domain can create themselves further levels, like mail.google.com, docs.google.com, etc. Records for these third and up level domains are stored in the second level domains’ Name Servers.
  • So, after sending the URL through browser the very first destination it reaches is our internet service provider’s computer that processes it, called the Domain Name Server (DNS).
    The role of the DNS is simple: it should translate the URL into an IP address which defines the actual location of the server (a computer) that should respond to our URL request. Every computer connected to internet has an IP address, including yours right now. IP address is a number, actually a series of numbers, four of them, divided by a dot, in a range between 0 and 255. For example, when we open Google search’ main page, one of the servers that responds to us is located at 74.125.128.147.
    In case our provider’s DNS doesn’t have the IP address of the URL we have sent, then it starts a discovery process: it tries first to find the domain’s name server location at the TLD registry, then it contacts the name servers for the actual server’s IP address.
    The above mentioned situation happens quite frequently and, if all the providers were contacting the TLD registry directly all the time it would have caused some serious delays in response. That’s why there’s a mechanism in place that lets DNS servers across the world store all the URL – IP pairs that have ran through them so now all the request, instead of going to TLD registry, are being sent to another closest DNS, then another, until the URL is resolved.
    On the other hand, whenever an IP address is assigned to a URL, this information is being sent (propagated) to DNS servers all around the world so the resolution requests could be answered as soon as possible.
  • Now, the URL we have sent reaches the server set to respond.
    The server itself works similar to the network of DNS’s across the internet: it tries to match the incoming URL with the stored response mechanisms. If it can be found, the request is sent further to some local server applications to handle it or the response is being sent back straight away in a form of a document or a file.
    Part of the server that receives the the request is simply called – web server. The most popular ones are Apache and Nginx on servers running Linux OS, or IIS (Internet Information Server) on Windows servers.
  • The web document assigned for our URL is being sent back to us and shown in our browser window.

The steps described above usually take around half a second in total to complete except in cases when the page needs some more complex processing before its being sent back.

Now, it’s not strictly required, but if you do intend to dive deep into web development it is highly advisable for you to go through the following links, which explain a little better and/or deeper my writing above:

  1. How does the internet work (some things do repeat in the referenced texts below, but that should just help you understand them better as they are explained in a different manner):
  1. DNS:
  1. HTTP (this might be the hardest to process until now but it s fairly important for the upcoming lessons and courses):

HTML & CSS

The previous article, and the references at the end, explained in detail what happens with our URL request. We’re aware now that together with the web page, server returns some status info as well. It is not shown in browser for us to see, but they still can be accessed and used for some debugging.

We’ll focus more now on the web page.

In most cases it’s an HTML document. It is a simple text file with .HTM or .HTML file extension. It contains tags, written between square brackets, and their attributes, which surround the contents of the document.

Basically, the HTML tags define the type of the page contents: they tell us whether the text they surround represents a heading or a paragraph, link, image, etc.

CSS (Cascading Style Sheet) is also part of the HTML document (although, it can and should be written in a separate file and just referenced so it’s loaded with the page) and it describes the style of the content’s presentation on the page. We use CSS to define if parts of the text will be painted in red or blue, how and where an image would appear or a block of text. CSS can be also used to paint on the page or to animate the content.

One of the better introduction tutorials for HTML and CSS, also an interactive one (meaning you learn by actually typing code), can be followed through on Code Academy (feel free to create an account there): https://www.codecademy.com/tracks/web.

By the way, all the basic parts of the Code Academy tutorials are available for free but, if you want some extras with it (like, more thorough explanations or knowledge tests), you’d have to upgrade your account with a subscription for around 20 USD per month.

There are also other good guides on HTML and CSS which are not interactive but I’d strongly advise to go through them and try all the examples.  For following them up you should have your Sublime Text and browser open: you’d type the examples in the editor, save them in a file, then open that file in browser. You can either do that before you complete what you do: you type some code, save, open in your browser, type again, save, refresh the browser.

So, the guides:

At this point you should have a solid understanding of the HTML and CSS basics.

Basics are, unfortunately, not enough. At least when we talk about CSS (HTML has a definite list of possible tags and once you learn it – you know it, there is no much creativity in using it). The web pages can have some pretty complex designs with a lot of (interactive) elements and we do need to step up the game a bit in order to be able to deliver.

The following guides and tutorials aim to teach you some of those more advanced techniques:

Considering the CSS styles all of the pages’ design, there are sites and web applications where the amount of the written CSS can be enormous. So, some people invented easier ways to write CSS. These easy_to_write CSS versions browsers cannot understand natively so they have to be converted before putting on server. The actual techniques to do the “easy CSS” will be covered after we go through some Javascript basics.

Javascript, the basics

At this point you should have a solid understanding of HTML and CSS.

If there is a problem with these two technologies, it’s that they are static: once written, HTML and CSS code cannot be changed by itself once the page containing it loads in browser.

That’s where Javascript helps.

Javascript is a programming language that lets us manage any aspect of our web page, in real time. Any aspect means exactly that: we can alter the content, HTML tags, styles, insert new ones, delete the others, etc.

These options have made Javascript to become one of the most popular programming languages and inevitable in any form of web development.

Before diving into the actual Javascript, would be great to remember how things get organized on a web page, on the HTML level. It is a so called Document Object Model, or DOM, and you can find out more about it here: https://www.youtube.com/watch?v=aPW_wQEFvek (read only until the chapter named “Moving through the tree” as it starts explaining the DOM through Javascript).

As a very first Javascript lesson I’d advise you to start with the interactive course at Code Academy: https://www.codecademy.com/en/tracks/javascript

Next stop is another beginners interactive course, but at Khan Academy: https://www.khanacademy.org/computing/computer-programming/html-css-js

Now it’s time to dive deeper into the JS and we’re starting with a book You Don’t Know JS: Up & Going, You can download a free eBook version here (note it in the top right corner): http://shop.oreilly.com/product/0636920039303.do

While going through the book above, have always your Sublime and browser windows ready to test and try the examples.

Another very good book that will revisit some of the topics above is the JS Enlightenment: http://www.javascriptenlightenment.com/

The code you are writing every day might eventually get transferred to someone else for maintenance or you’d have to get back to it after many months. It is important that you write an easy to understand code. Some basic coding style guide you can learn here. You can also adjust your code editor to automatically check the coding style as you type (I’d let you yourself to find and install an appropriate Sublime plugin for this).

Another, a bit easier to read, list of good JS coding practices: https://github.com/rwaldron/idiomatic.js#idiomatic-style-manifesto

I’d end this section with video recordings of the few presentations/lectures given by Douglas Crockford, beginning with some history of programming and ending with many Javascript details. You don’t need to have your Sublime ready for these videos, just watch the series whenever you have some free time:

JS Standards

Javascript was first created around 20 years ago with a goal to be executed in, then the only one, Netscape web browser. You have just learned the basic rules of JS: how to declare a variable, write a function, some syntax rules.

The rules defining JS language specifics are written by an organization called Ecma International, and the rules’ name is – ECMAScript.

At the time of writing this text the most used/wide-spread is version 5 (5.1), the same is followed in the Javascript basics tutorials, and it is usually referenced as ES 5.

The next version of this specification, ES 6, is already final and some JS libraries and frameworks are already using it. Details of ES 6 new specs, compared to ES 5, can be seen here: http://es6-features.org/ while some more thorough descriptions for part of the new stuff can be read here: https://www.smashingmagazine.com/2015/10/es6-whats-new-next-version-javascript/

Not all versions of browsers support all of the ES specifications, but the ES 6 is covered fully in all the major ones as you can see in this table.

As it took around 6 years to finalize the ES 6 specs, after it was done it was decided to release new versions once a year. So, the ES 7 is already out there, also referenced as ES 2016, with just a few items: http://www.2ality.com/2016/01/ecmascript-2016.html

SEO and Accessibility

SEO is short for Search Engine Optimization. It is a process where we adjust our web pages to not only be seen by the search engines, but to also have them appear in search results as early as possible (the ultimate goal is to have our site appear first for a certain keyword or a search phrase).

When you, as a developer, get a request to implement SEO on a site, it usually means you should do it for Google search.

A very good introduction to SEO, what it means and what it takes to have it implemented, can be found here: http://www.hobo-web.co.uk/seo-tutorial/.

The text is long and comprehensive, you do not have to actually learn here everything, but read it few times to understand and save the link (bookmark it) so you can easily get back to it later, when you need it (at the end of that page you have the option to download it as a PDF document).

A very good SEO advice was also written by Google itself and it can be downloaded as a PDF here: http://static.googleusercontent.com/media/www.google.com/en//webmasters/docs/search-engine-optimization-starter-guide.pdf.

The important thing to understand is that the whole SEO thing is not a group of clear, carved in stone, rules, but that it changes over time. The search engines themselves are changing their algorithms all the time for managing web sites’ relevancy. With the change of these algorithms, the SEO techniques are being updated as well.

If you want to dig deeper into SEO you might find useful the following tools:

Accessibility

Accessibility techniques are used to ease the access to our web content for people with disabilities.

A very good online course on accessibility, by Google, can be found here: https://webaccessibility.withgoogle.com/course

A reference list of HTML elements and how the accessibility software is interpreting them you can find here (not for learning but just reference purposes, so you’d know later where you can find this info if you need it): How HTML elements are supported by screen readers

Tools

Time to make a little break from hands-on coding so you could get familiar with some basic tools which make the development process easier. Each of these tools was developed to solve a process headache.

Before we start with the tools, you need to know some basics of working in the terminal (CLI – Command Line Interface).

On Windows you can open terminal by opening the Start menu, then Programs/Accessories/Command Prompt. On Mac it’s in your Applications \ Utilities (or just type “terminal” in Spotlight, Cmd+Space).

Basics of terminal work in Windows can be found here: http://www.computerhope.com/issues/chusedos.htm, while I’d recommend a book about terminal for Mac: http://unixmages.com/ufbm.pdf (not the whole book – going through the first three chapters is more than enough).

There are a lot of Youtube videos explaining these basics as well, so feel free to watch some (if the references given above are not enough) before going further.

Git

We’ll start with tools for code versioning.

What problem do they solve? When we work on an HTML document we start with writing the basic objects, then we add content, styles, some Javascript.  This is an iterative process, not something we just do at once. It can last from several hours to several days. During that time our files are constantly changing and we’re saving these changes.

One of the issues you may face working like this is if you realise at some point that the code you’ve deleted few days ago is actually useful and you’d need to retype it again. Also, if there are multiple people working on a same project they might need to access and alter the same file.

In both cases we’d need a mechanism that would keep all the different versions of documents and keep it in such a central location that would allow multiple edits or to have them merged into a single change on a file.

For the reasons above we’ve got the versioning tools. Their purpose is, unlike when we just use the editor, to save multiple versions of each file and help us see the differences.

There are few popular versioning technologies, like SVN, Mercurial, Git, etc.

We’ll focus on Git only for the time being as it became a de facto standard in programming.

Before starting with Git lessons, it would be good to install the Git software from here: https://git-scm.com/downloads. If you’re installing Git on Windows, please make sure to select the following options during the install process, so some further tools would be easier to install and use:

The Git basics should be learned through the Code Academy’s interactive course here: https://www.codecademy.com/learn/learn-git

A level up can be made here: http://rypress.com/tutorials/git/index

An interactive Git branching course: http://learngitbranching.js.org/

Git reference is available at the official page: https://git-scm.com/book/en/v2 (no need to learn everything there, just go through it so you’re aware ofwhat can be done with Git, so you’d know where to lookup details if you need them later).

The most popular Git online services, where you can host your repositories for free, are:

After you complete the Git courses please sign up on one of the services above, organize the files you have created while learning so far and publish it there (you can make your repo private). From now one please make a habit to push all your work to Git.

NodeJS, npm, gulp

NodeJS is a server technology, it is not being executed in your browser, but you have to be familiar at least with the basics even if you never intend to code anything else but frontend. Why: developing the frontend technologies nowdays involves using many external libraries, tools and technologies and NodeJS helps us manage all that on. Imagine if you’d use dozens of libraries on your page and you need to manually check every now and then if they are up to date, update them if needed, change the references in your files, etc.

NodeJS also helps with translating the, earlier mentioned, easier to type CSS into a real CSS before we upload it to server.

So, what is a server technology: as the name suggests, it’s a code being executed on our server. Its results can be understood by browsers without any further processing – if it is needed, it is being done by Javascript.

We’ll explain more on NodeJS later, now we’ll just tackle few basics and find out how we can use it in our frontend development process.

NodeJS executes Javascript code on server and features a modular design: after we install the NodeJS, we choose which additional modules should accompany it. The modules are installed with a tool called the Node Package Manager or – npm.

Let’s start with installing the appropriate version of NodeJS for your platform (the installation includes the npm): https://nodejs.org/en/download/current/

Then, good start for mastering the NodeJS is going through the introduction to NodeJS for web developers: http://codylindley.com/techpro/2013_04_12__package-managers-an-introducto/.

Last part of this tutorial explains usage of a NodeJS module called Bower which, in fact, manages external dependencies in our web projects. Bower is not as popular lately, since now you can use npm for the same thing.

Another NodeJS tool we have to mention here is – gulp.

Gulp is a task automation tool, helping us with everything we’d have to do between we’re done with typing and placing our code on a server. It can check of our code is valid, minify the JS and CSS files, translate to CSS, etc.

A good gulp introduction can be found here: https://css-tricks.com/gulp-for-beginners/

A more extensive tutorial with a reference to what can it be used for: https://www.tutorialspoint.com/gulp/index.htm

Please ignore the LESS and SASS parts for now in both last articles (you can read/glance through them, just no need to waste time on learning at the moment) as they will be covered later.

DevTools

Last group of external tools is integrated into every browser and developers all around the world are using them. They are easy to initiate and use right away.

There are several popular browsers on every platform but, while you work on your site, you should use either Google Chrome or Mozilla Firefox which are the most popular anyway. You might bump into online articles explaining you one of these two is better than the other, but I suggest you don’t make a choice and use both to test what you do.

Also, instead of the Firefox’ standard version you should work with the Firefox Developer edition, which is a version made with developers in mind: https://www.mozilla.org/en-US/firefox/developer/. The official page is full of explanations on various features for this version of browser.

Later, when you start working on commercial projects, you should always define in advance the required browser support. Along with Chrome and Firefox the most common ones requested are Internet Explorer and/or Apple Safari.

For now, you can start with Google Chrome as your primary browser and have Firefox ready to test how your page is being rendered there as well.

Chrome DevTools basics: http://discover-devtools.codeschool.com/

Detailed explanation of Chrome DevTools: https://developers.google.com/web/tools/chrome-devtools/

/dev tips: https://umaar.com/dev-tips/

How to use Chrome DevTools for Javascript debugging: https://scotch.io/tutorials/debugging-javascript-with-chrome-devtools-breakpoints

How to use Firefox’ Toolbox: https://developer.mozilla.org/en-US/docs/Tools/Tools_Toolbox

More about Firefox development toolbar: http://tips.webdesign10.com/web-developer-toolbar.htm

Revisiting Firefox’ dev tools: https://www.smashingmagazine.com/2015/12/revisiting-firefox-devtools/

Javascript IDE

So far you were using Sublime Text to write code while learning, then save it and open in a browser to check how it works (or you were using the browser integrated JS console to type/paste the code), as our editor cannot execute and test our code directly.

IDE means Integrated Development Environment and describes an editor integrated with a mechanism to execute (or compile) and check our code.

Sublime Text is just a simple editor, but there are few tricks to enhance the JS development experience:

  1. Integrate Javascript console
    There is a way to implement a JS console into Sublime and have it work similar to how it works in browser. An installation guide for both Mac and Windows can be found here: http://www.wikihow.com/Create-a-Javascript-Console-in-Sublime-Text
  2. Install JS plugins in Sublime
    Sublime has a very large collection of available plugins, among them many are addressing JS development. Please install the ones listed here, although you probably wonćt know at the moment what all of them do, but theyćll come in handy later.

There are also full IDE applications supporting JS development. If you still don’t feel you need anything more than Sublime can offer, you do not need to try any of the applications listed below.

  • First and, in my opinion, best IDE I’ll list here is WebStorm, made by JetBrains, and it’s not free (I am using myself one of their commercial IDE’s for years and am totally hooked). JetBrains’ tools are among the best on the market for web development. Webstorm is almost incomparable to other options when we talk about coding support, debugging, integrated tools and various additional features. It also has a huge collection of available plugins which are managed within the app.
    Considering all the features, price is pretty low; at the moment of writing this post first year subscription costs 59 EUR while each following year is priced at 35 EUR.
  • One of the first in the new wave of applications which are somewhere between light IDE’s and advanced editors is Atom, by GitHub. Atom has a modern UI, large base of available plugins and an integrated debugger. It is very similar to Sublime in day to day usage, you just do not need any hacks to have the JS debugger working.
  • Since Windows OS has appeared, Microsoft has made one of the best development tools for Windows: Visual Studio. Recently they have shipped its light version, called Visual Studio Code, available for all platforms. VSC also helps writing the JS code, has integrated debugger and supports the plugin architecture.

A list of all the available IDE applications supporting JS development can be found here: https://en.wikipedia.org/wiki/Comparison_of_integrated_development_environments#JavaScript

HTML/CSS cheating

You should have noticed until now that whenever you start a new project first few hours, in some cases – days, are very similar to each other: you create the project structure, page templates, layouts, put fonts, standard JS libraries, etc.

Everyone would want to somehow speed up or automate this step.

Boilerplates

Luckily, the same issue affected many web developers so a number of solutions came up.

We’re starting with one of the oldest and most known, called now: HTML 5 Boilerplate (H5BP) – https://html5boilerplate.com/. H5BP is actually an empty project with a folder structure in place, a couple of basic HTML pages, basic CSS files, JS files and few additional files. It’s made in such a way it can easily be modified. If you would like to automate the process of preparing an H5BP project for deployment with gulp (H5BP uses Apache Ant for this by default), you can find its basic configuration here.

In case basic H5BP is not enough for you you can create your own here: http://www.initializr.com/.

The title of the most popular HTML/CSS(/js/++) boilerplate holds Bootstrap, created by Twitter: http://getbootstrap.com/. Similar to H5BP, Bootstrap packs structure, HTM, CSS (but written with a CSS preprocessor, like LESS) and JS and has a huge number of included controls ready to be used right away. You can either take its source from here with CSS written with LESS, or a version with CSS written with SASS (another CSS preprocessor) or as a minified version (done with gulp or a similar tool). Another option would be to take it with Bower or npm.

Bootstrap’s main site has many examples how this boilerplate can be utilized. Do not hold back if you run into a technology you don’t know yet (like LESS, SASS, jQuery, grunt, etc.). While you’re trying things out, use what you know and you’ll learn the rest in the near future.

In case you’d like to try Bootstrap with gulp you can take its configuration file through npm: https://www.npmjs.com/package/gulp-bootstrap-configurator.

I’d end this section mentioning a tool that can generate you many different kinds of boilerplates, depending on technologies you would like to use: Yeoman. You can install it with npm and from there you can hop into the very detailed tutorial on its main site. You can also see the index of all the supported generators online here: http://yeoman.io/generators/.

I’d recommend using Yeoman when you’re in a tight deadline mode working on a small to mid-size project.

Less and Sass

Less and/or Sass have been mentioned multiple times until now. Both are CSS preprocessors made with a goal to make writing CSS easier. Actually, both Less and Sass are almost their own scripting languages expanding the possibilities of the basic CSS. Before they can be put on server they need to be translated into standard CSS with gulp or a similar tool.

Considering Less is based on Javascript and Sass on a programming language called Ruby, we’ll focus more on Less here, although I’ll give you few intro sources for Sass as well; Sass can be compiled to CSS with gulp and you may run into a project written in Sass in your future career.

Setting up your working environment for Less, basic instructions and basics of the Less specification are covered here: http://www.hongkiat.com/blog/less-basic/

Few more details on Less: https://scotch.io/tutorials/getting-started-with-less

A detailed list of Less options, through a thorough tutorial: http://www.tutorialspoint.com/less/

Also, here you can find a huge list of less tutorials, some of them covering really interesting specific cases (no need to go through all of them, but you should know about the list): http://www.cssauthor.com/less-tutorials/

In case you’d like to get familiar with Sass as well, take a look here, here and here.

Some basic difference between these two technologies is described here: https://www.keycdn.com/blog/sass-vs-less/

Advanced Javascript

Ending the previous chapter should mark a moment where we can say you have a pretty solid base right now. You’re familiar with the tools, html and css are covered, you know not only what is Javascript, but to write it as well.

Javascript looks like a pretty convenient tool, letting you affect any aspect of a web page, but it’s actually much more than that. It’s a programming language we can use to write any kind of complex (web) application.

In order to be able to use Javascript for solving complex problems we have to learn some advanced programming techniques, beyond the language syntax.

Few of the following chapters are applicable to any programming language as they teach you programming principles, but all explanations are done through Javascript.

Object oriented programming (OOP)

Until now we got familiar with Javascript as a language that lets us write various commands or functions which produce some result based on parameters we send them.

OOP concept is bit different. It defines a collection of connected objects where each can accept data, work with it and send it to others. Each object is a small piece of a puzzle but with a clear definition of its role and responsibility.

Javascript, the way it’s designed, does not support fully the OOP specification, but even the partial support is letting us design and write OOP applications.

Now, this may sound a bit weird, but even the OOP is not fully supported, everything in Javascript is an object, including variables and functions. Before diving into an OOP, let’s first make sure you understand the concept of Javascript objects which are very well explained here: http://javascriptissexy.com/javascript-objects-in-detail/.

The next concept you have to understand is one of Javascript prototypes. Simply put, prototypes are variables defined with a function (actually, it’s an inheritance concept in Javascript) and they are one of the fundamental programming principles in JS. A very detailed explanation of prototypes is covered here: http://javascriptissexy.com/javascript-prototype-in-plain-detailed-language/.

If prototypes are clear, you can move on, otherwise you have to go through the following links which also describe them with even more thorough explanations (you have to really understand prototypes in JS before learning OOP):

OOP basics in Javascript, its techniques, including inheritance and encapsulation, are described with many examples here: http://javascriptissexy.com/oop-in-javascript-what-you-need-to-know/

As you should be mastering the Javascript prototypes now, the following text explains OOP in Javascript through prototype references: http://alistapart.com/article/prototypal-object-oriented-programming-using-javascript.

A bit more thorough, free course on Javascript OOP, with many details and partly interactive can be found on Udacity (take it as a course which completion should confirm your fresh OOP knowledge): https://www.udacity.com/course/object-oriented-javascript–ud015

I’d end with OOP with an OOP application explained very well: part one and part two.

—

I would just like to mention that there is an opposite concept to OOP called functional programming. It abstracts the application’s design into functions, but the concept relies on a number of basic functions which do not exist by default in Javascript and should be defined manually. Functional programming gets more and more popular in the last few years. Although I won’t be guiding you into learning functional programming with Javascript (it’s not a necessary skill), you can learn a bit more about it here: https://medium.com/javascript-scene/the-two-pillars-of-javascript-pt-2-functional-programming-a63aa53a41a4#.2rmg5nlvc

Design patterns

A pattern in Javascript is such a solution of a problem within an application that it can be reused in any other for the same or very similar problem. They are like templates for solving some types of problems: we solve a problem in one application and then we create a template for it that we can reuse.

These templates for solving problems are Javascript design patterns.

Patterns are not specific only for Javascript. It’s a method available in almost all programming languages.

You can learn about Javascript patterns’ basics in this short post on Tuts plus. The list of short and practical examples in the article will show you the types of design patterns and what they are used for.

Another beginner’s introduction to Javascript design patterns: https://scotch.io/bar-talk/4-javascript-design-patterns-you-should-know.

A very thorough design pattern explanation is available as a video course on Plural Sight. This is a paid resource (monthly subscription is 30 USD) and I suggest you take it in case you are still unfamiliar with the patterns’ basic concepts: https://www.pluralsight.com/courses/javascript-practical-design-patterns.

The best and most in-depth available resource on design pattern is a free online book written by Addy Osmani, which is constantly updated: https://addyosmani.com/resources/essentialjsdesignpatterns/book/.

It’s a big book, but I suggest to go through it almost fully, from the beginning. You can pass the chapter talking about MV* and jQuery as we’ll get to know them later. You don’t need to type and try every example from the book, but have in mind that the examples you do try in Sublime or browser console, you’ll learn and remember the best (you deserve bonus points for each example for which you come up with your own solution, different from the one described in the book).

Now, patterns covered in the next few guides and tutorials are just to make sure you won’t be ashamed to ever meet Mr. Osmani and start talking about design patterns: they should confirm what you have already learned.

So, a free course on Udacity, also explaining some basic concepts: https://www.udacity.com/course/javascript-design-patterns–ud989

Short article explaining the difference between the four types of prototypes (and their instantiation): http://callmenick.com/post/instantiation-patterns-in-javascript

Similar to previous article but with much better and more thorough explanation: http://davidshariff.com/blog/javascript-inheritance-patterns/

For the end you have a comparison of different types of patterns, with examples: https://john-dugan.com/object-oriented-javascript-pattern-comparison/

Algorithms

A defined process, with a description of all the steps and rules, for solving a problem is called an algorithm.

No matter which programming language we use, at some point in our career we’ll stumble upon algorithms. In software engineering algorithms are usually used when we work with some data (sorting, searching, etc.) or with some more complex math operations (like calculating a factorial of a number or finding a Fibonacci number).

If you have never had a chance to work on or with algorithms, you can find a very good introduction course on Khan Academy: https://www.khanacademy.org/computing/computer-science/algorithms. The course explains algorithmsć basics, how to implement them in programming with examples in pseudo code (pseudo code is a code that cannot be executed on a computer; its purpose is to explain a principle of a solution).

You will often see such implementations of algorithms where the defining function calls itself within definition. For example if we write a function to calculate a factorial of a number we can implement it in such a way that we calculate multiplication of the largest number with a factorial of the next lower number (5! = 5 * 4!). The last factorial in the equation is being calculated by the same factorial function (it would calculate 4 * 3!) and so on.

Functions implemented in a way that they call themselves, like described above, are called – recursive functions. Even Google, if you look-up the word recursion hints you the meaning:

As recursions are widely used in algorithms, best would be to start with an interactive course explaining the recursion basics: https://www.codecademy.com/courses/javascript-lesson-149/0/1

You should then continue with another recursion course at Code Academy: https://www.codecademy.com/courses/javascript-lesson-205/0/1

Time to move on to algorithms. An interactive javascript algorithms course, again at Code Academy: https://www.codecademy.com/courses/big-o/0/1

Collection of most popular algorithm implementations in Javascript can be seen here with its documentation here.

Ending this section with a collection of thoroughly explained types of different data structures and their manipulation with Javascript: http://www.codeproject.com/Articles/669131/Data-Structures-with-JavaScript and data structures’ Javascript implementation without any explanation: https://github.com/benoitvallon/computer-science-in-javascript/tree/master/data-structures-in-javascript

MV*

Whenever we get a task to work on a bit more complex application there’s a moment of decision how to organise the code in a way to let us develop the application in an as simple manner as possible and, later, to maintain it and improve without a hassle.

MVC

One of the basic and  most famous organizational concepts is a Model – View – Controller one or, simply, MVC, and is being used in all programming languages.

MVC separates the application logic into several layers:

  1. Model – here we define classes which form the basis of the data we’re dealing with. If we’re making an app to store contacts, this is the layer where we will define the base classes for names, phone numbers, etc (Model relates to data which would be stored in a database).
  2. View – this is where we define how the data will be presented. View takes the data defined in the Model, process it if necessary and then formats the output as needed (i.e. it can combine first and last name into a full name, based on date of birth puts the age as the output, etc.).
  3. Controller – this is where we define changes over the data defined in the Model (like, adding new contacts, editing the existing ones, deleting, etc.)

The common way to work on any of these layers is through the design patterns, described earlier.

As an introductory course I’d recommend the following one, which explains the MVC concept through an example: https://alexatnet.com/articles/model-view-controller-mvc-javascript

Another one, but larger text,  with a more thorough explanation: http://www.awwwards.com/build-a-simple-javascript-app-the-mvc-way.html

A short MVC related text: https://agilewarrior.wordpress.com/2011/10/26/javascript-model-view-controller-example/

And for the end you should get back to the Addy Osmani book on patterns, but now you should go through the MVC chapter: https://addyosmani.com/resources/essentialjsdesignpatterns/book/#detailmvc

MVP

The Model – View – Presenter concept is based on MVC and it gained popularity with the expansion of web development as it defines better the “presentation layer” by “promoting” the Controller to the View level.

The basis of MVP in Javascript is described in the following article: http://www.roypeled.com/an-mvp-guide-to-javascript-model-view-presenter/

MVP is also explained in the Patterns book by Addy Osmani but the explanation is done through a JS framework Backbone. As we’ll be covering frameworks later you do not need to try to understand everything, you can even pass the text completely for now: https://addyosmani.com/resources/essentialjsdesignpatterns/book/#detailmvp

MVVM

The last concept you should be familiar with is the MVVM – Model – View – ViewModel and is based on both MVC and MVP.

It was created with an idea to separate even further the UI and the application (business) logic.

A very nice explanation of the MMVM concept should be read here: https://www.safaribooksonline.com/library/view/learning-javascript-design/9781449334840/ch10s06.html

The most detailed one is located in the Addy Osmani book, again through a framework, so don’t panic in case you do not understand everything yet: https://addyosmani.com/resources/essentialjsdesignpatterns/book/#detailmvvm

Architecture

Before we start programming a new application we are taking the most important step of the whole process. One where we analyse (the task) and plan (the development).

You are already familiar with the base organizational concepts (MV*) and JS techniques (OOP and design patterns) so, while planning, we should put both of these in action.

A very good introduction for JS application architecture was written by Addy Osmani and his article is available here: https://addyosmani.com/largescalejavascript/. It is more of a theory on the best approach to plan large applications so there is no need to memorize or practice anything here, just do your best to understand as much as possible.

In the last few years the entire planning process was reduced to picking the right JS framework and we’ll explain them more in one of the following chapters. Understanding and knowing the base concepts and techniques is helping us to recognize the right framework for the task ahead. Right in a sense that it is not only the best solution for the current needs but it will also easily scale and grow in the future.

Testing

One of the things some developers do not like much to do while working on something is to test the written code.

Every piece of code we write has a purpose, it solves a problem. It also changes over time and evolves, it’s being updated as the requirements change.

We can run into an issue when we have a part of an app to depend on the one being updated. If we make such a change that we have to change the parameters or the return value(s), we’ll have an issue with all the other parts of the application which are using the changed one.

Testing helps us identify these mistakes before they are being published.

There are few types of tests in web development:

  • Unit tests are the ones testing individual components, like functions. If we make a function to calculate a sum of two numbers, taking two parameters (numbers to sum), a unit test would be also a piece of code that calls our sum function, passes two known parameters, like, 3 and 5, and checks if the result is 8 or not. If we ever change how our sum function works – the unit test will fail and we’ll be reminded to check further.
  • Integration tests are making sure the entire application works as expected
  • Functional tests usually confirm the things are OK from the user perspective.

A bit more detailed explanation on test types can be found here: https://codeutopia.net/blog/2015/04/11/what-are-unit-testing-integration-testing-and-functional-testing/

Basics on test implementation with Javascript: https://www.sitepoint.com/javascript-testing-unit-functional-integration/

And a full course on writing tests in Javascript with many usefull techniques: https://www.udacity.com/course/javascript-testing–ud549

Would be also great (but not necessary)  for you to get to know the functional tests in frontend applications, to understand how they work. The most famous tool for these tests is Selenium and it runs them on the browser level. If you want to dig a bit about Selenium, I’d let you find an appropriate article or video yourself.

I would also just to mention the Test Driven Development concept, or TDD. It proposes writing the test to confirm a functionality before we develop the actual functionality. The process is usually described as having three phases: the red one, when the written test fails (functionality not implemented yet), green, when we quickly write the functionality just to pass the test, and refactor, when we update the functionality to be written in a sane manner.

Most of all the tests are written with some help from a number of JS libraries and we’ll cover a few later.

Server, the basics

Although this whole guide is made through the frontend perspective, we have to tackle some server basics.

As far as this guide is concerned, whenever you read a server word, we’re talking about an application being executed on a computer accessible through an URL, that is receiving or sending some data over internet, unless noted otherwise.

HTTP Requests

Anyway, our browser usually sends requests to servers over the HTTP protocol (that’s the same http you see at the beginning of many URL’s). A good explanation of the HTTP protocol you can find here. It’s a large article, explaining many details of the communication between the client (browser) and server but it is enough to read just the first page there.

By the way, you’ll run a lot into the client-server architecture phrase. It’s a concept of applications divided into the server part, which handles data processing and/or storage, and the client part which sends the requests. Most of the web applications today are conforming the client-server architecture. You can find a good description about it on Wikipedia.

So, the request we send over the HTTP to a URL always has the information about the type of our request, or, it specifies the HTTP method we are invoking.

According to the HTTP specification there are 9 different methods (they are always written in caps): GET, POST, PUT, HEAD, DELETE, CONNECT, OPTIONS, TRACE and PATCH.

In web development the most used methods are GET and POST but PUT, DELETE and PATCH are also among the popular ones:

  • GET method is used when we want to get some data from the server. Whenever we type a URL in our browser we’re actually sending a GET request for a document/file from the typed URL.
  • POST method sends data to server. It is used, for example, when user fills up a form and clicks the submit button.
  • PUT is similar to POST method but, if server already has an object that corresponds to the sent one, that the existing one will be overwritten with what we send.
  • DELETE method simply deletes an object, while
  • PATCH method updates an object on server.

The server response to any request is formatted similar to an HTML page: it has a header with some status information and body with the actual data.

You can see an example of the whole response here but we’ll focus now only on two pieces of the header information: status code, represented with a three-digit number in the first line, and Content-type which tells us how the data in the body is formatted.

As we just said, status code is a three-digit number and we can have 5 different response types:

  • 1xxx – informational status: says the request is accepted and sent for further processing
  • 2xx – status you always want to see – status is accepted and successfully processed
  • 3xx – redirection: request needs to be sent to another URL
  • 4xx – client error: there’s something wrong with the request
  • 5xx – server error: server cannot process the request

A list of all the possible status codes can be found here: https://en.wikipedia.org/wiki/List_of_HTTP_status_codes

Content type tells us what type of data is being returned and how it is formatted. For example, whenever we open a web page in our browser (through an HTTP GET request) the content type of the web document is sent back as a text/html: the sent data is a simple text, formatted as HTML (and browser renders the response accordingly).

Together with text/html, the most common content type you’ll be seeing while programming is the application/json one (you can find a list of all the possible content type values here).

JSON

One of the server responses we have mentioned earlier is the data response, not a web page. The data that our JS application can receive could be either some raw database data or data processed by the server.

The interaction between the JS and server is similar to opening a page in the browser: JS sends an HTTP request and the server responds.

Part of the server that is used only to communicate by sending or receiving data on (client) request is usually called an API, from  Application Programming Interface.

The data sent by server is received by Javascript in web applications. Two most known/used ways of this communication (API – client) are the Remote Procedure Call (RPC) and REST and the differences between them are described here and here. A must read that explains how/when to use each can be found here.

As REST is a de facto standard lately, would be great to go through the following tutorial: https://www.tutorialspoint.com/restful/. The REST is not perfect, by the way, and there are already proposals how to improve it. One of the proposal comes from Facebook and is called GraphQL (I’m not linking anything here, no need to dive into any of the new proposals, but you’ll probably come across GraphQL so you should know what is it).

There are also many standards for formatting the data that is being sent through the API, no matter if the data is some text or binary (like images). The only thing that the recipient cares about (in this case – a Javascript app) is that it’s clear what type and kind of data is being sent (which part of the sent data belongs to which variable). Like, if we’re sending a contact object, the format should be such that it’s clear what is what in the object sent, for example: first name = John, Last name – Doe, Phone – 5550123.

Data formatted like this, ready to be sent through an API, is also called – serialized data.

One of the most known and common serializations is called – JSON, from JavaScript Object Notation.

NodeJS

We have mentioned NodeJS briefly earlier, when we were talking about tools that help us organize our development process while working on an application.

NodeJS is a server platform that executes Javascript and sends the results through an integrated web server (I won’t explain now what the web server is and how it works but, for the sake of this entire guide, we can say that web server is a component/an application that is the first to receive a request from the internet and, if it can be accepted, sends them through to an application; later, web server send a response back).

A very good description on what NodeJS is, its characteristics and how it works, can be found here: http://www.javaworld.com/article/2079190/scripting-jvm-languages/6-things-you-should-know-about-node-js.html

You should have installed NodeJS with npm already. Please make a new folder so you could try the NodeJS data delivery process yourself (we’d be delivering data to browser). Create a new file in the folder and name it “hello.js”. Paste the following code inside:

var http = require('http');

var server = http.createServer(function(req, res) {
  res.writeHead(200);
  res.end('Hello!');
});
server.listen(80);

Enter the folder from terminal and type: node hello.js

Open your browser and open the following URL: http://localhost/ and you’ll see a page with the text from the file above.

I will explain the code from the .js file shortly, but before that, please note how we have accessed the data in the browser. You were  not opening a page this time, but a URL.

This is because the code in the .js file hasn’t been processed by the browser, but by NodeJS, which sent the processing result back to web server (in this case it’s integrated) and it sent it back to browser over http.

That’s actually what the  code itself tells us also:

  • First line requires usage of the HTTP module by assigning it to a variable
  • Then we create a server object within the HTTP with arguments which are called on each http request
  • Next to lines are defining some of the response details: status code and the message (data) itself
  • At the end we tell to server to listen for requests on port no. 80, which is a standard port for HTTP. If there was another number written here, then we would have wrote a bt different URL in our browser: localhost:AnotherNumber

The very first learning resource for NodeJS that I’d recommend is a paid one. The following two books are teaching you from the very beginner level to some very advanced techniques. At the moment of writing this text the price for both is 9 (nine) USD and you can buy them here: https://leanpub.com/b/node-beginner-and-craftsman-bundle

A much shorter, but free tutorial on NodeJS also covering the beginner level can be found here: https://www.tutorialspoint.com/nodejs/nodejs_first_application.htm

Few more explanations are covered with this online course: https://www.codeschool.com/courses/real-time-web-with-node-js

And some advanced techniques here: http://book.mixu.net/node/

One of the better ways to learn to use NodeJS would be to go through the Node School lessons: http://nodeschool.io/ (look at the Learn Your Node lesson). The lessons are made in such a way to make you come up with a solution yourself, which is the best way to learn.

Databases

Together with the (application) server, most projects dealing with some sort of data are in a need to store that data as well and they need a database for that purpose.

We won’t be covering in much detail the databases, you just need to understand the concept and to be able to use it the simple way.

Databases are usually consisting of tables. If you’ve ever used MS Excel, or a similar software, you know at least some basics of working with tables. When we define fields in a database table, their type and size, it’s like defining a column in an Excel table.

There are two (main) types of databases: relational and non-relational (also called No-SQL databases).

Relational databases let us define relations between tables. For example, if we make a database for our contact list, we’d have a table to store the names and an additional table to store the phone numbers as each contact can have multiple phone numbers. Every record in our tables (corresponds to a row in an Excel table) has a unique identifier (an ID) that we use to reference with the records in other tables. In our contact list case for each phone number record we’d add also a field to point to a name (its ID) that owns the number.

The most popular relational databases in web development are MySQL and Postgres (my favorite for many, many reasons).

Non-relational databases emerged from a need to write and store an object as fast as possible, without the need to take care of fields, tables or relations between them. In most cases these databases are receiving a pure JSON serialized object which is directly stored.

The most popular non-relational DB is MongoDB, although you can also use Postgres as non-relational storage, with its HStore option.

We’ll be using databases only together with the (application) server. As we already know few things about NodeJS, I’ll give you few guides on how to use it with databases:

API

We already know what an API is, what kinds of API are there (we have mentioned two of them, RPC and REST) and we have even made few ourselves in some NodeJS tutorials. Those were “local” services, our API and frontend part were part of the same application.

There are also applications on the internet offering their API to be consumed by third party applications so they could use some of their functionality without developing the same.

One of the conditions to use these external API’s is to know the methods of authentication and authorisation.

Authentication is a process of identifying the side that sends the request, no matter if it’s a user or another application.

Authorisation is a process of checking the rights to access certain data or a service. You might have a service capable to “recognize” you (to authenticate you) but you would not be able to consume it.

Authentication

There are several ways to authenticate a web request:

  1. Basic HTTP authentication
    This method simply sends the username and password in a form of username:password but encoded with Base64 algorithm. On the server side this kind of authentication is usually set on the web server (Nginx, Apache, IIS, etc.) but it can also be handled through our server code.
  2. Cookie
    Cookie is one of the oldest ways to have server initiate saving of some information by the browser and to later call it upon. In the authentication process it is used for, after the server confirms user’s identity through a login form, storing a string which confirms the user’s identity in requests. The contents of the cookie are being sent with every request.
  3. Token
    The most popular token based authentication mechanism is JSON Web Token (JWT). The authentication mechanism is similar to cookie, but the tokens are not stored there. They are using the browser’s  LocalStorage (in order to understand what is Local Storage and how it works, please read this) or SessionStorage.
    A good introduction into the JWT authentication with NodeJS can be read in this article: https://scotch.io/tutorials/authenticate-a-node-js-api-with-json-web-tokens (through this tutorial you will be using an application called POSTman – it’s a desktop app for invoking http requests that lets you set a custom header; the tutorial above explains some basics on how to use the tool). A bit more information on JWT can be found here.
  4. Signatures
    This method is usually used when a server application needs to use an API of another application (on a different server). The request data is being signed before sending. Signature is created from the entire request with a key shared between both applications and the signature is added at the end of the request. The receiving application creates the signature from the request as well, compares it with the received one and, if they match, processes the request. This method is not easy to use on frontend as the key would have to be shared among larger population and the security aspect becomes obsolete.
  5. One time passwords
    These are usually used in multi-factor authentication: user sends username and password, server recognizes the user but then, as an additional security precaution sends an one time password through SMS that the user has to enter in order to confirm the identity. The SMS is not the only way, of course. In some cases users have a hardware device that generates a new one-time passwords every few minutes; server knows the algorithm to create these passwords and can confirm if it is valid or not.

All the methods mentioned above are also described, together with all the “cons” of using each (which is very important to know), here: https://blog.risingstack.com/web-authentication-methods-explained/.

Whenever you work with an app that has to have user authentication, you have to have implemented all the user related flows: user creation with identity confirmation (usually just an email confirmation is being done nowadays, but some services are doing a phone number verification as well), a login mechanism (which marks the beginning of a user session – user session is, in this case, the time spent using the service, until we logout), logout mechanism (end of session).

The whole process is complicated not only for developers, but for users as well. The identity confirmation after an account creation is usually done through a link sent in an email or a code sent over an SMS and many users are finding this overly complicated.
Luckily, there is a solution to simplify the process.

Most of users have either a Facebook or a Google account, or both. During the account creation process on both these services they are already confirming their identities in some way. Also, what interests us, both these services are letting other applications to use them during the account creation process and/or authentication.

Facebook API

You have probably seen already on many pages a login or account creation form with some additional buttons, “Login with Facebook” or “Login with Google”.

Facebook, besides authentication, has an API for many other Facebook functions. In order to be able to use this API we first need to register our application (see the image), so Facebook could allow our requests to pass and be executed, on their Developer portal. With that, we’d get a unique identification number for our application and a token that we’d be using together to authenticate all our requests to Facebook API.

A bit more information about the whole Facebook authentication usage can be found here: https://developers.facebook.com/products/login. A quick guide for using Facebook to sign in (login) or sign up (create their accounts in your application) your users is here: https://developers.facebook.com/docs/facebook-login/web. A full Software Development Kit for Javascript, which covers all the FB API possibilities: https://developers.facebook.com/docs/javascript, and if you would like to use as many things as possible, but without using the SDK, then hop here: https://developers.facebook.com/docs/facebook-login/manually-build-a-login-flow.

The biggest advantage of using an external service like Facebook for account creation and login is that we have significantly simplified the whole process. Once the user lets our app to use Facebook authentication, it gets his public profile information. With a click of the user we get his name, profile image, email address, age range, etc. And, the best, these pieces of user data have been confirmed already so we can forget about sending of the email confirmations. Besides the public profile, we can also get many other user data but, for them, user would have to specifically allow the action and this usually leads to a complete break of the sign up process (due to users’ privacy concerns) so, the advice is to avoid this completely unless necessary.

Here’s an explanation from Facebook which user data will always be considered public and why: https://www.facebook.com/help/203805466323736.

Google API

Google has a similar mechanism to Facebook.

It lets two ways of application authentication:

A detailed guide on using Google through Javascript for authentication can be found here: https://developers.google.com/api-client-library/javascript/features/authentication

List of all the Google API’s: https://console.developers.google.com/apis/library

~–~

Of course, after a user authenticates through FB or Google to our application it is our job to implement the local mechanisms of authorization. If there is a need for that we can create different groups of users and define which group can do what.

As FB and Google authentication mechanisms are used a lot (also some others), there are many libraries to help with their implementation. Our job is then only to decide what to do with the user data once we get it and if we are going to build some authorization mechanisms.

One of the most popular NodeJS authentication modules, covering many options, is the PassportJS.

A very good PassportJS tutorial, one that you have to go through as you’ll learn best about authentication on an example as covered there, is available here: https://scotch.io/tutorials/easy-node-authentication-setup-and-local

Javascript cheating

As one of the most popular programming languages today (some people say – the most), Javascript has really a large number of resources available online aiming to help you learn it and use it. You might even start thinking that there is no control or a library we can think of, that someone hasn’t develop it already and put available for everyone.

I’d like to start here with two attempts to improve the Javascript syntax. Like CSS has its Less and Sass, Javascript has CoffeeScript and TypeScript.

Language improvements

CoffeeScript is a bit older than the other one and its aim is to ease the process of writing Javascript, in which it is being translated in the end. In CoffeeScript for example you don’t need to declare variables at all, just start using them and in the process of translation (compiling) it will be declared automatically for you.

There are many parallel examples of Javascript and Coffeescript code on their main page.

TypeScript is newer and was created by Microsoft. Its aim is not to ease the process of writing but to enhance the possibilities. The interesting part is that TypeScript is really a Javascript “add-on”, it uses all the standard Javascript syntax and then adds few more things on top like static definition of variables (defining whether your variable is a string or an integer), better class definition, etc.. So it is in a way a superset of Javascript.

I don’t want to tell you which of these two you should learn, they both have their own advantages and constraints.

CoffeeScript does make writing Javascript a lot easier but it can make you develop a lot of bad habits in the process. TypeScript on the other hand does not make writing Javascript better but enhances its possibilities and fixes some of the standard Javascript defects. Now, guess what the author of this whole guide would learn 🙂

You should probably go through at least the introduction guides for both and then decide yourself if you would want to explore further. These would help you at least recognize the syntax if you run into it later.

Great CoffeeScript guide can be found here: http://blog.teamtreehouse.com/the-absolute-beginners-guide-to-coffeescript

And with TypeScript you can start here: http://www.codeproject.com/Articles/802722/TypeScript-The-Basics. Although this article explains with Visual Studio editor (both TypeScript and Visual Studio are created by Microsoft), feel free to continue using the Sublime Text, just make sure to install an appropriate TypeScript plugin.

jQuery

jQuery is one of the oldest and most definitely the most popular and known Javascript libraries. It was the first to try to ease the development process (by introduction of its own scope) and development of various controls and functionalities through plugins, making sure they work in all the relevant browsers. jQuery makes it really easy to manipulate the DOM, CSS, on-page animations, Ajax, etc.

When it was created it gained so much popularity that it affected many people to start with web development but it did not affect them to also learn all the techniques. Their “development process” was consisting of downloading the plugins they needed and assembling them together. It resulted in many pages ending in an unmaintainable state due to too many incompatible plugins trying to work together.

Although jQuery is guilty for creating an entire generation of “script kiddies”, it can still help a lot if you know how and when to use it and when not.

A very good beginner tutorial ending with some more complex stuff you can find here: https://www.tutorialspoint.com/jquery/

After that all you need you can find on the official page which also has a detailed documentation and repository of all the plugins.

Frameworks

Thanks to its popularity Javascript has also many available project level templates with many built in helpers. Such a “template” that makes writing an app easier by pre-writing the structure is called a framework.

Most of Javascript frameworks are following some kind of MV* layout.

In the following chapters make sure to go through the all AngularJS related tutorials (including Ionic and Electron) and React&Redux (including React Native). As for the others, make sure to go through at least the introduction and then decide yourselves if you wanna go further or not. Vue.js is a “new kid on the block” so might be worth spending some more time on it as well.

AngularJS

At the moment of writing this text the title of the most popular Javascript framework goes to AngularJS. It was built and is maintained by Google. Angular, when it appeared, solved the data binding (synchronization between the model and the view) and dependency injection issues. More about the origins of Angular, why it was built the way it is, and how, can be found here: https://docs.angularjs.org/guide/introduction.

At the moment there are two active versions of this framework: v1.x and v2.x.

Angular v1 is the original version and is more widespread. Although Google officially stopped to maintain this version (maintenance is done by the community), most of the Angular sites today are running this version so you have to know it well.

Angular v2 is the latest version made upon all the experience gained with v1. Main difference is that v2 uses TypeScript instead of plain Javascript, but the fact that TypeScript is an extension of Javascript lets us use v2 with the plain old Javascript code. Although Angular v2 was being signed off many times in the past because of both TypeScript and some design issues, it is being used more and more and it will most likely get ahead of the v1 in the list of most popular frameworks.

Because of the overall popularity, you should learn both versions of AngularJS.

AngularJS v1:

AngularJS v2:

If you want to continue with some lessons, here’s a list of various guides and tutorials: https://porter.io/github.com/PremiseHealth/AngularJS2-Learning

Ionic

One of the advantages of using AngularJS framework is the ability to wrap the app up into a mobile application for Android and/or Apple and have it available in their app stores.

You can do this with the Ionic framework, an “extension” of AngularJS.

For the beginning of your Ionic journey, please go through the short tutorials here:

Creating a mobile app from scratch: http://gonehybrid.com/build-your-first-mobile-app-with-ionic-2-angular-2/

How to authenticate a mobile app user through FB: https://auth0.com/authenticate/ionic2/facebook

How to share some content from your mobile app to social networks: https://javebratt.com/social-sharing-with-ionic/

Using Google Maps in your mobile app: http://stevemichelotti.com/integrate-angular-2-google-maps-into-ionic-2/

Guide for making a mobile application for reading RSS feeds: https://devdactic.com/rss-reader-ionic2/

Electron

ElectronJS lets you pack your AngularJS application into a multiplatform (Windows/Mac/Linux) desktop app.

Although Electron is not tied in any way to AngularJS, the fact you know now how to quickly create a frontend application gives you the possibility to use Electron as well for desktop.

For the beginning, please go through the official Quickstart tutorial, just to understand the basics.

First article that guides you through creation of an Electron desktop app with Angular is here: https://scotch.io/tutorials/creating-desktop-applications-with-angularjs-and-github-electron

And similar, just for Angular v2: https://auth0.com/blog/create-a-desktop-app-with-angular-2-and-electron/

Vue.js

One of the newer frameworks, gaining some popularity lately is Vue.js. Vui is more of a UI library, made to make it easier to create and manage the interface of the application but with some additional tools it becomes a full fledged framework.

A very good text explaining Vue’s basics and what it can do can be found in an article written by the Vue creator: http://blog.evanyou.me/2015/10/25/vuejs-re-introduction/

A beginners tutorial: https://scotch.io/tutorials/build-an-app-with-vue-js-a-lightweight-alternative-to-angularjs

Another one for the beginners but tackling also some more advanced stuff: https://www.sitepoint.com/getting-started-with-vue-js/

The most complete guide is on the official site and explains all the Vue’s capabilities: https://vuejs.org/v2/guide/

React & Redux

Neither React or Redux are frameworks themselves, but together they form a really powerful combination.

React is a library made by Facebook and is mostly recognized by its virtual DOM concept. It can be combined with other frameworks. Best to start with React is through the official tutorial: https://facebook.github.io/react/tutorial/tutorial.html

Beginners, without a formal computer science education, will probably have a difficulty to understand the concept of Redux. It’s a library that helps tracking of object states in an application and its value is biggest in large applications. Redux is often combined with React but they do not depend on each other. A good introduction to Redux, helping you understand it, can be found here: https://learnredux.com/

An article explaining some basic concepts of React and Redux that every beginner should be aware of: https://camjackson.net/post/9-things-every-reactjs-beginner-should-know

React & Redux tutorial covering how they work together: https://www.codementor.io/reactjs/tutorial/intro-to-react-redux-pros

A first simple app built with React and Redux, from beginning to the end: https://reactjsnews.com/your-first-redux-app

A more complex app built with these two libraries, also thoroughly explained: https://spapas.github.io/2016/03/02/react-redux-tutorial/

A lot of the features are being repeated in the tutorials above but as the apps being built are different, you will be able to understand those features better.

Another bigger app, explained from scratch, includes also the server part: https://teropa.info/blog/2015/09/10/full-stack-redux-tutorial.html

And another one: http://cabin.getstream.io/

Ending with a tutorial explaining making an app but also how to make the whole environment, write tests, etc: https://github.com/verekia/js-stack-from-scratch

React Native

Just as Angular has Ionic and, somewhat, Electron, for building native mobile and desktop apps, React has – React Native.

With one significant difference: while Ionic packs your web application into its own browser version on mobile (which, besides rendering your app also connects the javascript code with some hardware features), React Native (RN) creates a real native mobile application.

Some of the well known apps built with React Native are Facebook, Instagram, AirBnB, etc.

To get yourself started with RN, go through official guide of the same name: https://facebook.github.io/react-native/docs/getting-started.html#content. At the beginning of the page you can select your working and target environments. If you work on Windows you don’t need to use the mentioned package manager Chocolatey: you already have NodeJS installed and you can download and install Python2 yourself from its official site.

As a next step, you should go through the process of making a full app, from scratch. Although the official site has its own tutorial, I’d recommend that you start with another one which is, in my opinion, a bit better explained and covers more details: http://www.reactnativeexpress.com/

At the official documentation page you also have many links with further explanations.

Also, a very good and clean starter “boilerplate for RN” can be found here: https://github.com/bartonhammond/snowflake

Meteor

Note: you don’t need to go through all the Meteor tutorials if you have already passed and mastered the AngularJS (with Ionic and Electron) and React & Redux (with React Native). First guide, with the chat app is enough. If you really like it, feel free to go through the rest.

Meteor is an attempt to make one framework for building the full stack web applications, including Frontend (JS) and Backend (NodeJS) with MongoDB, and to be able to publish them to mobile and desktop if needed.

Some other frameworks, like AngularJS, can be combined with Meteor.

You can start with Meteor by building a simple chat application: https://www.codementor.io/meteor/tutorial/getting-started-with-meteor-build-sample-app. This tutorial starts from the very beginning, explaining the basics, installation, setup, etc.

Another guide with a full app, covering many details: https://www.toptal.com/meteor/building-real-time-web-applications-with-meteor

The framework’s main site has a couple of tutorials which teach you starting from the basics then moving to more advanced techniques:

Meteor walkthrough series of guides: https://www.youtube.com/channel/UC4-DIsbr23Z-rPe_F4JAH9w

Complete guide for Meteor can be seen within the official documentation: https://guide.meteor.com/

Backbone

Another popular JS framework is Backbone. It’s a quite old one, compared to the currently popular ones and you don’t need to go through all the guides unless you need it or simply like it.

Backbone is a lightweight MVP framework made on top of Underscore.JS.

As it’s much smaller than AngularJS it is also significantly faster, especially if you deal with a lot of data in browser (this also depends on the developers’ skills).

If you wanna get familiar with the Backbone app development process, you should start with the following tutorial: http://adrianmejia.com/blog/2012/09/11/backbone-dot-js-for-absolute-beginners-getting-started/

Another similar guide, with some extra details: http://rahulrajatsingh.com/2014/07/backbone-tutorial-part-1-introduction-to-backbone-js/

A standard Tutorials Point course: http://www.tutorialspoint.com/backbonejs/

The most comprehensive Backbone resource is another free ebook by Addy Osmani: https://addyosmani.com/backbone-fundamentals/

Other frameworks

There are also many other good JS frameworks but there is no point in mentioning and learning them all. With the ones you have covered already, you’re good to go in both using them and learning others in the future. I will just mention few more I consider significant with just official links and then you can continue yourself if you feel tempted.

EmberJS – framework similar to AngularJS, once upon a time they have fought for the title of the best/most popular one. Although Ember lost the battle, it starts gaining popularity later again a bit.

Knockout –  a rare MVVM framework with a goal to make UI development easier.

CanJS – focused on speed, stability and security. It gives developers a lot of freedom in structuring their applications but this can hit back pretty hard – as there are no rules, it is not easy to work on large apps in big teams. One of the biggest drawbacks of CanJS is that they have a history of completely changing certain parts of the framework (like the templating engine), without a backwards compatibility, making the upgrade process in larger apps pretty hard.

For the end of the frameworks section I’d like to mention a great service that gives an overview of many different frameworks with a genius idea: they have made the same ToDo application in each framework and have opened the access to the code. So now you can see how each framework works and what are the differences when compared to other frameworks. You can see yourself at: http://todomvc.com/.

Other libraries

So far we have mentioned only jQuery as a JS library aiming to help and speed things up in the development process. There are also many others and we’ll mention here just a few, explaining their purpose.

D3.js – when you want to visualise some data, show them through some graphs, D3.js is simply a standard.

Mocha & Chai & Sinon – libraries helping you accomplish the testing part. An example of making an app through TDD with Mocha: http://jrsinclair.com/articles/2016/gentle-introduction-to-javascript-tdd-intro/

Also, testing libraries worth noting would be:

  • JEST, made by Facebook. Some say it’s faster than Mocha, some say it isn’t 🙂
  • Protractor, mainly used with AngularJS, but also with React, an end to end testing, using Selenium
  • Istanbul, with a command line interface in nyc

ReactiveJS – a library which has some framework characteristics but it’s still not a framework. It speeds up development process by treating all the pages as a combination of template and content (data). Created with an aim to have less experienced developers deliver an optimized web app.

Security

Whenever we deploy a website or a web application online, we should take it as granted it will become an attack target at some point. No matter if the goal is to affect the site/app itself or to access the hosting infrastructure.

Before moving to some security best practices, I’d like mention few things about the way our pages should be delivered to users.

Always insist that your app is available only through HTTPS protocol. It’s an “addon” for the standard HTTP which encrypts the transferred data in transit from server to a browser. I don’t want to go into details about how it works, it’s a possible new blog post subject, but in order to have it working you should install certificates on your web server for the domain that your app is accessible through. You can either buy these certificates or take free ones from Let’s Encrypt or StartCom.

As an introduction to web security please watch the following video which is a recording of a talk by one of the Google Chrome developers: https://mikewest.org/2013/09/frontend-security-frontendconf-2013

And an article talking about some important web development security topics: https://github.com/vasanthk/web-security-basics

Actual advices in writing more secure HTML: https://code.tutsplus.com/articles/client-side-security-best-practices–net-35677 and the same thing, just with many more details on the main OWASP page: https://www.owasp.org/index.php/HTML5_Security_Cheat_Sheet

For the end, please go through the slides from a web security workshop, containing several tips for writing a more secure JS code: http://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.298.4235&rep=rep1&type=pdf

Final project

If you have gone through all the courses and tutorials until now – I honestly congratulate you.

I hope that this guide through guides helped you achieve what you wanted in the first place.

As this is not an educational institution, you’re not getting a diploma or certificate in the end. You should be aware of your knowledge level yourself and act accordingly (learn more before looking for a job or look for a job and keep learning). Make sure that everything you did so far to be on an online repository (like GitHub), including this final project. Although you don’t have a web development work experience, that is your proof for a potential employer that you did related stuff.

You have made several applications until now through various tutorials in many different technologies. To finalise this guide you should make now an application without a tutorial telling when to do what and why. You’ll get a functionality description and decide yourself on technologies, tools, libraries, framework, etc.

Just as you would do if you get a requirement from a client.

It’s been said that the imitation is the most sincere form of flattery (source). So, I won’t be reinventing a wheel with this project, but will use an existing application, while adding few twists here and there.

Imagine you’ve been chosen as a partner in a project where you’d get a basic functional description and you’ll be responsible yourself to fill in the holes.

Requirements

You should make an application for notes management, similar to Google Keep.

Availability: the application should be accessible through web in the latest versions of Chrome and Firefox, as well as either Internet Explorer Edge+ (if you work on Windows) or Apple Safari (if you work on a Mac), and at least one mobile platform (Android or iPhone, whichever you have; if you have both, make for both, you’ll learn a lot from the experience).

Before starting with work read all the requirements below carefully and try to understand them as a whole. Once you start working there are few ways how to proceed. My advice would be to start in this case with making the user interface, all the pages and controls, then work on the server side, then on connecting the frontend with the server and,, in the end, on the mobile app.

Users

  • The application is available only to authenticated users
  • Users can create their accounts either manually (entering name, email with confirmation, phone) or by using external services for authentication (FB, Google, Twitter)
  • After creating an account, users can modify their profile image and add a timezone information
  • Every user can assign multiple email addresses to their account and can be connected to more than one external authentication service

Notes:

  • The ability to add and save notes is the app’s main functionality
  • There are three types of notes: text ones, todo lists and images. Every note can have a subject but it’s not mandatory. You can add an image to a text note or todo list, but you cannot combine text with todo list.
  • No matter on which platform we add or update a note, the change will be immediately visible on the other platforms

Actions on notes

Having a written and saved you can:

  • Select it: clicking a note makes it visually outstanding and moves it into the editing mode
  • (re)assign  a descriptive keyword to it (acting as a tag/label). We will use these keywords to filter the notes.
  • (Re)assign a key color to make it visually outstanding in another way
  • Archive it, copy, delete
  • Assign one of the three statuses: new, in progress, done (in a todo list, this is also done for each todo item but through checkboxes at the beginning). Every new note gets the “new” status automatically assigned.
  • Share it with others. In this case:
    • every user a note has been shared with can edit the note
    • If an invitee deletes a note, it is not actually deleted he/she just won’t see it anymore
    • If the creator deletes a note then it is deleted for everyone (creator should get a note about this before the deletion is done)
    • Note creator can cancel a share invitation – to remove an invitee from a list of all the invitees
    • Each shared note must be shown on a page in a way it is clear on first glance that it’s shared
    • Users are invited to a shared note through their emails. If an invitee is already a registered user, he/she will get an email invite with the notification and contents of the shared note. If not a registered user, he/she will get an invite to register with the note’s contents. Users invited like this do not need to confirm their email address during registration. After an invitee clicks the invite link he/she will be taken to the page where they can either create a new account (manually or through an external auth service) or login to an existing account with a different email address. If user logs in here to an account with a different email address, then the one where he got the invite is added to the list of his confirmed email addresses.

User interface

  • Application has a home page with service description which is accessible to non-authenticated users. This page has mechanisms for logging in and account creation.
  • Interface for the logged in users is within a single page (any option requiring new forms or controls to be shown will trigger a sort of popup within the page) and consists of:
    • Header, at the top of the page. It’s a narrow area where we have:
      • A button at the left most position used to trigger the appearance of the left hand side menu
      • Name/logo of the app (think of it yourself 🙂 once you come up with a name, you can create a logo here)
      • Text field for search filtering: typing in this text field triggers hiding of all the notes on the page which do not contain the typed text
      • Notes rendering choice: list and mosaic
      • Name and profile photo of the logged in user. Clicking them triggers opening of a popup with all the user related data where they can be edited (user profile page)
    • Central area where:
      • At the top we have a control for creating new notes, for all three types: text, todo list (each item should have a checkbox upfront) and image with the option to upload it or enter/paste its URL
      • Beneath the note creation is the view of existing notes in a list (in this view each note is above the older one – shown if either this view is selected or the screen is too small for the mosaic view) or in a mosaic (multiple columns of same width; number of columns depends on the screen width). Each note has same width as the others but height depends on the amount of content. Notes’ order is from the top left to the right, then next row left to right, etc. Latest note is in the top left corner.
        Displayed notes have the following characteristics:
        • Base view consists of the note’s content (including the subject if it exists), key color (don’t draw the entire note in key color, but maybe just a side), status, an information about whether it is shared or not
        • All the available notes actions appear on mouse over
        • Any text content in a note should be displayed differently on each note, depending on the amount of text. If there is less text, the font should be larger. Dimensions of a note should depend on the space that the content needs to be displayed. Think yourself the rules for the text size based on number of words.
    • Left side-bar that can be hidden through the header button. It contains a list of keyword used to filter the notes in the central area. Clicking a keyword would show only notes with the selected keyword assigned. First item in this side menu is “Show all” and the last should be “Add a new keyword” (or label/tag, name it as you wish)

Feel free to use Google Keep for UI/UX inspiration. The idea here is to copy the functionality of an existing service just make sure you’re aware that the features described above are not all available in Google Keep.

A note for mobile application: make sure to use native mobile controls and UX wherever you can (like, long tap on android selects an item, when you invite people to share, give an option to select a contact from the phonebook that has an email address, when you want to create an image note, let users use their camera to take a photo not to only pick it from the gallery, etc.).

And that’s it.

You cannot deploy your clone of Google Keep somewhere online where anyone can access it (but you can for yourself and your family/friends – why not, you can host the server part for free here for example) but being satisfied yourself of the final result is quite enough. The point of the final project is to learn to make decisions yourself and to find online solutions to problems you encounter along the way (don’t be ashamed of that – everybody’s doing it).

Congratulations, you’ve become a web developer! 🙂

What’s next

If you feel confident enough with what you’ve learned, you can start looking for a job. You should know what is the best local online resource for job searching.

If you’re interested in remote jobs, here you have a list of the most popular remote job listings: https://github.com/lukasz-madon/awesome-remote-job#job-boards (the same page has also a number of other related resources linked, so make sure to go through it).

If you’re stuck with a problem on a project, look at the main site of the technology/tool you’re using and look for support options. If that doesn’t help, you can always go to StackOverflow, at the moment one of the most popular places for searching help, where you can filter the Javascript questions.

Also, make sure you follow blogs and news of the technologies (and their authors) you’re using.

Share this article if you like it and think it can help someone 🙂

at No comments:
Subscribe to: Posts (Atom)

Web development learning guide – a frontend approach

  For the last 6 months I’ve been asked by a number of people to help them become programmers. Not any, but “the web” ones. On the other s...