IRC is Back

Internet Relay Chat (IRC) is a protocol, created in 1988, and was meant to help facilitate group discussions, via various channels. The channels served to identify different discussion topics you could pop in on. In the 90’s, IRC chat was world changing and career-influencing. However, I was too young to enjoy its flavor back then, but there is no doubt that it showed the developers the potential of the Internet as a globally-connecting venue for meaningful cultural collaboration and connections. Over the time, IRC has lost 60 percent of its users, going from 1 million in 2003 to about 400,000 today. And IRC channels? In 2003 there were 500,000; now there is half that number. This is due in large part to the advent of the Web, social media, and tools that can do a lot more than plain text can do. 

But here is the thing. I’ve noticed in the last couple of years is a resurgence in using IRC as a primary means of communication, especially for open source projects. I hear about IRC all the time in the geek world. I asked on Twitter and Facebook if people use it and, sure enough, the open-source and developer crowd shot right back that it is still their chat world of choice. While there have been group-based services for a while (Skype, Campfire, Google Hangouts, etc.), the relatively open nature of IRC makes it easy for large groups of people to hop on a channel and collaborate easily.

So you want to get into this “IRC thing”. That’s actually a good thing because to be honest, a LOT of great discussions are happening on there and in some cases, going to a channel is the only way to get any decent support, especially for some open source efforts. I did some research on it lately and findings are amazing. Read on..

Right Network

IRC works by using some type of client that connects you to an IRC network. The networks are just machines that are setup to allow users to connect to IRC. There are a number of networks out there, and most are targeted to specific interests. According to IRCHelp.org, the major networks are as follows:

  • EFNet
  • Freenode
  • Dalnet
  • Undernet
  • Quakenet

While QuakeNet targets video game players – especially Quakeworld players, Freenode is rightfully one of the best development platforms. Here’s how the Freenode network describes itself:

“An IRC network providing discussion facilities for the Free and Open Source Software communities, not-for-profit organizations, and related communities.”

And with open source software so vitally important today to just about every major web property, it makes perfect sense why so many of the popular development channels are on Freenode. Wikipedia lists it as the largest of the major networks, with approximately 85k users on it at peak hours.

Channels

Specific networks have specific channels for specific topics. By joining a channel, you’re choosing to jump into a discussion group about a specific topic. The discussion is typically free-form so don’t expect to go into a threaded UX with everything tightly organized or hierarchical. In fact, depending on the number of users in the channel and how active they are, discussions can be challenging to piece together. You’ll typically participate in group chats, but IRC does support 1 to 1 private chats as well, along with the ability to transfer files. As always, safe Internet practices are essential. Chances are high that you DON’T know the person on the other end of the wire; so you need to be careful when accepting anything from anyone.

Developer Channels

I recently asked senior developers in Twitter and Quora about channels that developers are using and I got some nice feedback. The following list is a little long, but I think worth posting since the channels are incredibly useful:

  • #html5
  • #gruntjs
  • #yeoman
  • ##javascript
  • #jquery
  • #angularjs
  • #requirejs
  • #node.js
  • #css
  • #httpd
  • #webgl
  • #webrtc

This is NOT an all-encompassing list of every awesome web development channel so if you think there are others that would be useful, drop them in the comments section.

The hash (“#”) in front of the channel is purposeful and meant to identify channels that are available across a whole network.

Getting Connected

  • Windows – HexChat, mIRC
  • OSX – Colloquy, LimeChat
  • Browser Based- Just hop on over to Freenode’s Web Chat if you do not want to install any software.

Useful Commands

  • /who <nick> – This allows you to get more information about someone in a channel.
  • /list – This will return a list of all channels available on a network.
  • /join – This allows you to join a channel via the Freenode command line. Remember to prefix the channel name with a hash (“#”)
  • /msg – This allows you to have a private chat with the person whose nick you’ve specified and will send them the message to kick off the chat
  • /invite – This allows you to invite a user to another channel for a chat
  • /away – Tells users that you’re away from your PC for a bit
  • /quit – Tells the network you’re done and are leaving

Stay Safe

I can’t stress enough that IRC offers no anonymity. Don’t assume anything you say is private and can’t be seen (unless you’ve gone to great lengths to anonymize yourself). Conversations can be logged and in fact, most IRC clients have that feature built-in. Your IP address is also easily visible by simply using the “/who” command.

  • Don’t accept file transfers
  • Don’t accept direct connection requests (you’re bypassing the IRC server and directly connecting to another computer)
  • Don’t run commands that someone tells you to run
  • Don’t run scripts that someone has sent you. You can get backdoored.

Go through this page for more details.

Conclusion

IRC offers a great opportunity to get developers from across the world together and share a wealth of knowledge. So, if you haven’t yet tried IRC or you’re a veteran that needs to re-grease the wheels, IRC is back and ready for you.

LAMP vs MEAN vs Whatever

It was only a few years ago that MongoDB, Express.js, AngularJS, and Node.js were raising eyebrows on their own. Now they’ve grown up and ganged up, and together they’re doing some really serious work, poaching no small number of developers from the vast LAMP camp. But how exactly does this newfangled MEAN thing stack up against LAMP? When is it better to choose the well-tested, mature LAMP over this upstart collection of JavaScript-centric technologies? These are few of the questions I am going to try to answer today.

LAMP stack

As we all know, LAMP stands for Linux, Apache, MySQL and PHP/Python. It has been popular for a long time, which means there are tons of tutorials and stack overflow posts that you can reference if you get stuck. Even the worst hosting services generally support it.It has time-tested tools like PHP Admin and powerful CMS tools like WordPress and Drupal. By combining a Web server (Apache), dynamic components (using Perl, Python or PHP), and a database (MySQL) you can create a truly database-driven and dynamic Web site that is easy to update and provides rich functionality to support users.

MEAN Stack

MEAN stands for MongoDB, ExpressJS, AngularJS, and Node.js. Here, Linux operating system is replaced with any operating system that Node.js can run on. This includes MS Windows, Mac OS, and Linux.
The Apache web server is replaced with the Node.js.
The MySQL is replaced with MongoDB, which is a No-SQL database that frees you from having to micromanage migrations and schemas.
The PHP server side programming language is replaced with the ExpressJS, which basically provides a thin layer of features over Node.js.
Note that ExpressJS and Node.js in combination are tools to run JavaScript on the server side.

Why MEAN took my heart away..

Below I have listed the primary reasons to choose MEAN over LAMP.

  • Javascript and only Javascript

    In the last decade, the JavaScript was, and still is, a mainstream scripting language that runs on the client side (browser) and makes web pages dynamic and responsive. The MEAN stack keep using the JavaScript on the client side by introducing the powerful client side Javascript framework (AngularJS) which makes it easier to build modern Single Page Apps. As you might notice, there is no programming language to be used with the MEAN stack other than the JavaScript. Using the same language on both ends make lives simpler for developers.

  • MongoDB is built for the cloud

    This modern database comes equipped with automatic sharding and full cluster support, right out of the box. Plug in MongoDB and it spreads across your cluster of servers to offer failover support and automatic replication. Given the ease with which apps can be developed, tested, and hosted in the cloud, there’s little reason not to consider MongoDB for your next project.

  • MySQL’s structure is confining

    Like all relational databases, MySQL forces you to push your data into tables. This isn’t a problem if every single entry fits into exactly the same format, but what if two people share the same address but not the same account? What if you want to have three lines to the address instead of two? MongoDB, on the other hand, offers a document structure that is far more flexible.

  • Node.js simplifies the server layer

    Want to change how your app routes requests? Sprinkle in some JavaScript and let Node.js do the rest. Want to change the logic used to answer queries? Use JavaScript there as well. If you want to rewrite URLs or construct an odd mapping, it’s also in JavaScript. The MEAN stack’s reliance on Node.js put this kind of pipework all in one place, all in one language, all in one pile of logic. You don’t need to reread the man pages for PHP, Apache, and whatever else you add to the stack. While the LAMP generation has different config files for everything, Node.js avoids that issue altogether.

  • MEAN makes code isomorphic

    The simplicity doesn’t stop with using JavaScript on the server. By going MEAN, you can enjoy that same JavaScript on the client, too, leaving behind the LAMP stack’s client/server schizophrenia. If you write code for Node and decide it’s better placed in AngularJS, you can move it over with ease, and it’s almost certain to run the same way. This flexibility makes programming MEAN-based apps significantly easier. Plus, if you’re staffing up a project, you don’t need to look for a PHP expert and a JavaScript expert, or a front-end and a back-end specialist. Instead, it’s all JavaScript across the stack.

  • JSON everywhere

    AngularJS and MongoDB both speak JSON, as do Node.js and Express.js. The data flows neatly among all the layers without rewriting or reformatting. MySQL’s native format for answering queries is, well, all its own. Yes, PHP already has the code to import MySQL data and make it easy to process in PHP, but that doesn’t help the client layer. This may be a bit minor to seasoned LAMP veterans because there are so many well-tested libraries that convert the data easily, but it all seems a bit inefficient and confusing. MEAN uses the same JSON format for data everywhere, which makes it simpler and saves time reformatting as it passes through each layer.

  • Node.js is superfast

    Apache was great, but these days, Node.js is often flat-out faster. A number of benchmarks show that Node.js offers better performance, while doing much more.

  • AngularJS is fresh

    It’s not exactly fair to compare the “A” in “MEAN” with anything in the LAMP stack because LAMP doesn’t include an analog. If you want to do anything on the client side, you’re on your own. Sure, there are plenty of good PHP-based frameworks that work with MySQL, but each is a bit different and moving in its own direction. WordPress, Joomla, and Drupal, for example, offer differing strategies, and it’s hard to switch between them, let alone port code from one to the other. Anointing one client framework adds consistency and stability.

    It also helps that AngularJS was built by folks with 20 years of experience building Web apps. They knew well enough to leave the design work to HTML and CSS. They also figured out how to add a bit of JavaScript to scan the HTML. The designers of AngularJS looked at what humans do well, then tailored the JavaScript to support the humans.

In Conclusion,

Of course, if you’re really picky, there’s no reason why you can’t mix it up a bit. Plenty of developers use MongoDB with Apache and PHP, and others prefer to use MySQL with Node.js. AngularJS works quite well with any server, even one running PHP to deliver data from MySQL. You don’t have to be a slave to the acronyms.

 

The Tale of a Full Stack Developer

Full Stack? Excuse me, what?

The term full-stack means developers who are comfortable working with both back-end and front-end technologies.

A full stack developer is capable of performing tasks at any level of the technical stack in which they reside. It means:

  • Working with systems infrastructure (knowing what hardware to ask for , what OS to install, how to prepare the system and dependencies for all software)
  • Understanding, creating, manipulating, and querying databases
  • API / back-end code in one or more languages, e.g. Ruby, Java, Python, etc.
  • Front-end code in one or more languages, e.g. HTML, JavaScript, CSS etc.
  • Project management / client work, e.g. gathering requirements, creating technical specifications and architecture documents, creating good documentation, managing a project timeline (e.g., someone who knows Agile/SCRUM).

However, the developer doesn’t need to master all of the areas and technologies he needs to work on, because that just makes it nearly impossible, he just needs to be comfortable working with those technologies, and that’s a lot too.

Full Stack – Back in 2000 and Now

2000 was a long time ago, in that year PHP 4.0 was released. Yes, 4.0. Back then, a good web developer knew a little HTML, CSS and some procedural PHP, because proper OOP didn’t even exist until version 5.0.

The LAMP (Linux – Apache – MySQL – Perl/PHP) stack was all the rage in those years, with little or no alternative. In the early 2000s if somebody used version control they were considered either technological heretics or wizards. Today it’s unheard of and laughed at, not using one.

So, let’s try to break down and categorize the main technology stacks that are required from a full-stack developer today:

System Adminstration

  1. Linux and basic shell scripting
  2. Cloud computing: Amazon, Rackspace, etc.
  3. Background processing: Gearman, Redis
  4. Search: Elasticsearch, Sphinx, Solr
  5. Caching: Varnish, Memcached, APC / OpCache
  6. Monitoring: Nagios

Web development tools

  1. Version control: Git, Mercurial, SVN
  2. Virtualization: VirtualBox, Vagrant, Docker

Back-end technology

  1. Web servers: Apache, Nginx
  2. Programming language: PHP, NodeJS, Ruby
  3. Database: MySQL, MongoDB, SQL / JSON in general

Front-end technology

  1. HTML / HTML5: Semantic web
  2. CSS / CSS3: LESS, SASS, Media Queries
  3. JavaScript: jQuery, AngularJS, Knockout, etc.
  4. Compatibility quirks across browsers
  5. Responsive design
  6. AJAX, JSON, XML, WebSocket

Design:

  1. Converting website design into front-end code
  2. UI
  3. UX

With many of the mentioned technologies a developer can get away with not knowing to code or use, such as Ruby or specific JavaScript libraries, but all these are interconnected in one way or another. For example if you want to set up Vagrant you need to know Ruby’s syntax, as simplified as it is or if you want to manipulate DOM elements, jQuery is a good to know technology.

One other category that deserves mentioning is mobile technologies. It’s a very dynamic industry and closely related to web development:

  1. iOS
  2. Android
  3. Hybrid: PhoneGap, Appcelerator

A full-stack developer should know about these technologies as well.

Wow, then should I even try to become a Full Stack Developer after all?

I consider a great full-stack developer to be someone who is good at lot of things but great at some. I’d wager that there are zero individuals with advanced-level knowledge in each of these areas that would be capable of single-handedly delivering this next generation kind of application. Just keeping up with the advancements and new programming interfaces in each category is almost a full-time job. So, I would rather advise you to pick your eco system and become an expert in it, but don’t try to be everything to everyone or you will burn yourself out. There are a lot of great stacks available  and you must learn one of them thoroughly.  In order to “have a deep understanding of all areas” you must begin with a deep understanding of just one area.  Only then should you expand.

Future of Full Stack

Whether you choose to specialize in front end or back end development — or position yourself as a full stack generalist — the job outlook is positive. The role of software developer is recognized by the U.S. Bureau of Labor Statistics as one of the occupations that will have the most growth over the next ten years. In 2014, just over 718,000 people were employed in some capacity as software developers — and the nationwide median salary was $95,510. That number is expected to rise by 135,000 jobs to more than 853,000 by 2024.

So, Good Luck and let me know your thoughts.

 

Why Prototypal Inheritance Matters?

Prototype-based programming is a style of object-oriented programming in which behaviour reuse (known as inheritance) is performed via a process of cloning existing objects that serve as prototypes. This model can also be known as prototypal, prototype-oriented, classless, or instance-based programming. Delegation is the language feature that supports prototype-based programming.

Problem with classical Inheritance:

Most JavaScript programmers will tell you that classical inheritance is bad. However only a handful of them really know why. The truth is that classical inheritance is not bad. Python has classical inheritance and it’s a great programming language. Nevertheless classical inheritance is not suitable for JavaScript. Python got classes right. They are simply factory functions. In JavaScript however any function can be used as a constructor.

The problem with JavaScript is that since any function can be used as a constructor we need to distinguish a normal function call from a constructor function call; and this is achieved using the new keyword. However, this breaks functional features in JavaScript since new is a keyword, not a function. Hence functional features can’t be used in conjunction with object instantiation.

Classical vs Prototypal:

In prototypal inheritance, instances inherit from other instances. Using delegate prototypes (setting the prototype of one instance to refer to an examplar object), it’s literally Objects Linking to Other Objects, or OLOO, as Kyle Simpson calls it. Using concatenative inheritance, you just copy properties from an exemplar object to a new instance.

It’s really important that we understand these differences. Class inheritance by virtue of its mechanisms create class hierarchies as a side-effect of sub-class creation. Those hierarchies lead to arthritic code (hard to change) and brittleness (easy to break due to rippling side-effects when you modify base classes).

Prototypal inheritance does not necessarily create similar hierarchies. I recommend that you keep prototype chains as shallow as possible. It’s easy to flatten many prototypes together to form a single delegate prototype.

Understanding Prototypal Inheritance:

Prototypal inheritance is simple. In prototypal languages you only have objects. No classes. There are two ways to create new objects – ex nihilo (“out of nothing”) object creation or through cloning an existing object. In JavaScript the Object.create function (discovered by Douglas Crockford) is used to create new objects. Newly created objects are then extended with new properties.

Inheritance and the _proto_

When an object rabbit inherits from another object animal, in JavaScript that means that there is a special property rabbit.__proto__ = animal

When a rabbit property is accessed, and the interpreter can’t find it in rabbit, it follows the__proto__ link and searches in animal.

  1. var animal= { eats: true }
  2. var rabbit = { jumps: true }
  3. rabbit._proto_ = animal     //inherit
  4. alert (rabbit.eats)                  //true

The eats property is actually taken from animal. Here’s the picture: 

If the property is found in rabbit, then __proto__ is not checked.

For example, when eats is in the child object, parent is ignored:

  1.  var animal= { eats: true }
  2. var fedUpRabbit = { eats: false }
  3. fedUpRabbit._proto_ = animal     //inherit
  4. alert (fedUpRabbit.eats)                  //false

One could put a method into animal and it becomes available in rabbit:

  1. var animal = {
  2.       eat: function() {
  3.            alert( “I’m full” )
  4.            this.full = true
  5.     }
  6.  }
  7. var rabbit = {
  8.      jump: function() { /* something */ }
  9. }
  10. rabbit.__proto__ = animal
  11. rabbit.eat()


The
rabbit.eat() is executed in two steps:

  1. First, the interpreter looks up rabbit.eat. There’s no eat in rabbit object, so it goes torabbit.__proto__ and finds it there.

  2. The function runs with this = rabbit.The value of this is completely irrelevant to __proto__. It is set exactly to the object before the dot (see more about thishere).So, this.full = true stores the value in the rabbit object:

Look what we’ve got. An object calls parent method, but this is set to the object itself. That’s the inheritance.The object, referenced by __proto__ is called a prototype. So, animal is a prototype of rabbit.

Object.create (proto[,props])

Creates an empty object with given __proto__

  1. var animal ={ eats: true }
  2. rabbit= Object.create(animal)
  3. alert (rabbit.eats)                   //true

The code above creates empty rabbit with animal __proto__:

Once the rabbit is created, we can add properties to it.

Object.getPrototypeOf(obj)

Returns the value of obj.__proto__. The method is standard, so it works in browsers which don’t support __proto__ property.

The prototype

Remember, any function creates an object when called with new. A new function call sets the __proto__ of the object to the value of its prototype property.

  1. var animal = { eats: true }
  2. function Rabbit (name) {
  3.          this.name = name
  4. }
  5. Rabbit. prototype = animal
  6. var rabbit = new Rabbit (‘John’)
  7. alert (rabbit.eats)                // true because rabbit. _proto_ == animal

The code Rabbit.prototype = animal literally means the following:
”set __proto__ = animal for all objects created by new Rabbit.

hasOwnProperty

All objects have hasOwnProperty method which allows to check if a property belongs to the object or its prototype.

Conclusion:

It is essential to understand the prototypal inheritance model before writing complex code that makes use of it. Also, be aware of the length of the prototype chains in your code and break them up if necessary to avoid possible performance problems. Further, the native prototypes should never be extended unless it is for the sake of compatibility with newer JavaScript features.

DOM vs BOM in Javascript

DOM (Document Object Model)

The DOM is a language- and platform neutral interface that allows programs and scripts to dynamically access and update the content and structure of documents.

The DOM in JavaScript is the API to access the elements inside the document. It maps the entire Document into an hierarchy of parent and child tree. Each node can hold number of children element or can inherit to other parent element in some or the other way.

One can access each element and it’s properties using the DOM structure. This model describes how the element inherits the property of another element.

DOM has following level of abstractions

  • DOM level 1 The level one of DOM consist of two modules
    • DOM Core: It maps the XML-based document and gives the access to user to manipulate and read any part of the document
    • DOM HTML: This module extends the core by adding HTML specific objects and methods.
  • DOM level 2 has new modules deal with the new types of interfaces
    • DOM Views: Tracks different views of document such as, how the document should appear before and after applying the styles.
    • DOM Events: It interfaces the event to the documents elements
    • DOM Styles: This interface the styling to the document
    • DOM traverse and Range: DOM traversing provides the way to modify or add new element into the DOM hierarchy.
  • DOM level 3 The level three of DOM abstracts the methods to validate the document, DOM validation. The level three fully supports the XML 1.0 which inclues infoset, XPath and XML base.
  • Other abstraction of DOM
    • Scalable Vector Graphics (SVG)
    • Mathematics Markup language (MathML)
    • Synchronized Multimedia Integration Language (SMIL)
    • Canvas in HTML5

BOM (Browser Object Model)

This is an informal term as there is no W3C or WHATWG standard that mentions it.

The Browser Object Model is a larger representation of everything provided by the browser including the current document, location, history, frames, and any other functionality the browser may expose to JavaScript. The Browser Object Model is not standardized and can change based on different browsers.

One simple definition would be that the BOM encompasses the entire object structure which is accessible via scripting in the browser, beginning with the window object which “contains everything else”, since it’s the global object.

The window object contains lots of properties (try console.dir( window );). These properties are specified in numerous web-standards. The “core” specification of the window object is as of now still specified in the HTML standard – see here, but I guess it’s only a matter of time until the editors decide to transfer this specification into a separate standard.

Since DOM is one of the object of BOM, DOM is the child of BOM and they relate to each other. One can access document by simple writing document or window.document.

FAQ on Javascript

As I read through multiple blogs on javascript over the past few months, I found the following questions to be one of the most popular ones especially for people who are just starting out their journey in the world of web development. Enjoy 🙂

What Exactly Is JavaScript?:
JavaScript is a programming language used to make web pages interactive. It runs on your visitor’s computer and doesn’t require constant downloads from your website. JavaScript is often used to create polls and quizzes.

Who created Javascript?
JavaScript was created in 10 days in May 1995 by Brendan Eich, then working at Netscape and now of Mozilla. JavaScript was not always known as JavaScript: the original name was Mocha, a name chosen by Marc Andreessen, founder of Netscape.

Are JavaScript and Java the Same?:
No, they are two completely different computer languages. Java and Javascript are similar like Car and Carpet are similar.

What is ECMAScript?
ECMAScript is a subset of JavaScript. JavaScript is basically ECMAScript at it’s core but builds upon it. Languages such as ActionScript, JavaScript, JScript all use ECMAScript as its core. As a comparison, AS/JS/JScript are 3 different cars, but they all use the same engine… each of their exteriors is different though, and there have been several modifications done to each to make it unique.

What Do I Need to Run JavaScript?:
JavaScript support is built right into all the major web browsers, including Internet Explorer, Firefox and Safari. Provided that the visitors to your site are using web browsers that support JavaScript (most do) and have JavaScript enabled (it is by default), then your JavaScript will run when they visit the page.

Do I Need to Learn Javascript to Be Able to Use It?:
No. There are plenty of pre-written JavaScripts that people have made available for you to plug straight into your web page. All you need to know to be able to use such scripts is how to paste the supplied code into the required places in your web page.

Can I Use HTML Instead of JavaScript?:
No. HTML and JavaScript are two completely different things. HTML is a markup language designed for defining static web page content. JavaScript is a programming language designed for performing dynamic tasks. Sometimes the distinction is confusing because JavaScript code can go in the same file as HTML.

Can I Use PHP or Some Other Server-Side Language Instead of JavaScript?:
Perhaps. It depends where the code needs to run. If it can run before the page loads, you can use a server-side language. If it has to run after the page has loaded, then you must use JavaScript, as this is the only scripting language supported by all web browsers that support client-side scripting.

Does the Javascript Go in the Same File as the HTML?:
It can, but your scripts will be more easily reused on multiple pages of your site if you place them in separate files. (Using a .JS extension helps identify them as Javascript.) You then just link the JavaScript to your HTML by inserting a <script> tag. The same JavaScript can then be added to several pages just by adding the appropriate tag into each of the pages to set up the link.

Is Javascript Object-oriented?
JavaScript is a prototype-based programming language (probably prototype-based scripting language is more correct definition). It employs cloning and not inheritance. A prototype-based programming language is a style of object-oriented programming without classes. While object-oriented programming languages encourages development focus on taxonomy and relationships, prototype-based programming languages encourages to focus on behavior first and then later classify.

Front-end Learning

How exactly does one become a front-end developer? Well, it’s complicated. Still today you can’t go to college and expect to graduate with a degree in front-end engineering. And, I rarely hear of or meet front-end developers who suffered through what is likely a deprecated computer science degree or graphic design degree to end up writing HTML, CSS, and
JavaScript professionally. In fact, most of the people working on the front-end, even today, generally seem to be self taught and not traditionally trained as a programmer. Why is this the case?

A front-end developer is not a focused visual designer or an interaction designer. Design school is not exactly the place to hone front-end skills. A front-end developer is not exactly a traditionally trained computer science graduate either. Focusing on either doesn’t prepare a person for front-end development. And, in fact, following the traditional paths for either in the
higher education systems of America (i.e. College) can derail a person from potentially finding a doorway into a practice where actual experience is king. Today, if you want to be a front-end developer, you teach yourself or you take what is likely a non accredited program, course, bootcamp, or class.

With all of that said, I believe that the path to a career as a front-end developer is very much an unknown process. What I can say is that to become a front-end engineer one must know and use HTML, CSS, DOM, and JavaScript at a high level without ignoring interaction design or traditional programming know how. In fact, from my experience, the best front-end developers often have a mastery understanding of interaction design and programming, but from the context of the web platform (i.e. browsers, HTML, CSS, DOM, and JavaScript). And for whatever reason, this knowledge is often found not given. That is to say, front-end engineering still seems very much to be a practice made up of self taught people, as
opposed to a field that corresponds directly to an educational focus from an organized and accredited higher learning situation.

If you were to set out today to become a front-end developer I would loosely strive to follow the process outlined below. The process assumes you are your own best teacher.

  1. Learn Internet/Web [Read]
  2. Learn web browsers – Chrome (Engine: Blink+ V8), Firefox (Engine: Gecko + SpiderMonkey), Internet Explorer (Engine: Trident + Chakra), Safari (Engine: Webkit + SquirrelFish).
  3. Learn Domain Name System (aka DNS) [Watch]
  4. Learn HTTP/networks (including CORS &
    WebSockets) [Watch] [Read]
  5. Learn web hosting [Read]
  6. Learn general front-end development [Read] [Watch]
  7. Learn user interface/interaction design [Read] [Read]
  8. Learn HTML & CSS [Read] [Read] [Watch] [Watch]
  9. Learn Search Engine Optimization [Read] [Read] [Watch]
  10. Learn JavaScript [Read] [Read] [Watch] [Watch]
  11. Learn DOM, BOM, & jQuery [Read] [Watch]
  12. Learn web/browser API‘s [Read] [Read] [Watch]
  13. Learn JSON (JavaScript Object Notation) [Read] [Watch]
  14. Learn static site generators [Read]
  15. Learn Interface/API design [Read] [Read]
  16. Learn web developer tools [Read] [Watch]
  17. Learn command line [Read] [Watch]
  18. Learn node.js [Read] [Code] [Watch] [Watch]
  19. Learn package manager (npm) [Read] [Read] [Watch]
  20. Learn version control [interact] [Read] [Read]
  21. Learn site performance optimization [Read] [Read] [Watch]
  22. Learn JS testing [Read] [Watch] [Watch]
  23. Learn headless browsers– A headless browser is a web browser without a graphical user interface. [Read] [Watch]
  24. Learn offline development– Offline development (aka offline first) is an area of knowledge and discussion around development practices for devices that are not always connected to the Internet or a power
    source. [Read] [Read]
  25. Learn security [Read] [Watch]
  26. Learn Responsive Design. [Read] [Watch]

The notion that you should follow an individual to learn about front-end development is slowly becoming pointless. The advanced practitioners of front-end development generate enough content that you can simply follow the community/leaders by paying attention to the front-end “news” outlets (via Newsletters, News outlet, & Podcasts).

Thanks for reading 🙂