wissel.net

Usability - Productivity - Business - The web - Singapore & Twins

It's just HTML, CSS and JavaScript isn't it?


Web development is easy isn't it? After all it is just the open standards of HTML, CSS and JavaScript.
That's roughly the same fallacy as to say: It's easy to write a great novel, since it is just words and grammar.
The simple reason: It is hard.
I'll outline my very opinonate version of what skills you need for mastery of front-end programming. The list doesn't include the skills to figure out what to program, just how. So here it goes:

Introduction

Jeffry Veen, who'm I had the pleasure to meet in Hong Kong once, summarized it nicely in his book: The Art and Science of Web Design already in 2000: " HTML provides structure, CSS layout and JavaScript behavior". Like English, development needs a style guide (and the mastery of it), web development has several guides, besides the plain definitions mentioned in the beginning.

HTML

  • The standard today is HTML5. So ignore any screams "But it must run in IE6" and see what HTML5 can do. There's a handy list of compatible elements you can check for reference
  • The predominant guideline for structure is Twitter bootstrap. It defines a layout and structure language, so your page structures become understandable by many developers. Twitter bootstrap contains CSS and JavaScript too, since they are intertwined
  • If you don't like Bootstrap, there are other options, but you have been warned
  • The other HTML structure to look at is the Ionic framework. Again it has more than HTML only

CSS

Most frameworks include CSS, so when you picked one above, you are pretty much covered. However understanding it well takes a while, so you can modify the template you started with. My still favourite place to get a feel for the power of CSS is CSS Zengarden. The W3C provides a collection of links to tutorials to deepen your knowledge. My strong advice to the developers: don't touch it initially. Use a template. Once your application is functional, then revisit the CSS (or let a designer do that).

JavaScript

Probably the most controversial part. IBM uses Dojo big time, ReactJS is gaining traction and there is Aurelia up and coming. So there's lot to watch out for. But that is not where you get started.
  • Start learning JavaScript including ES6. Some like CoffeeScript too, but not necessarily for starters
  • The most popular core library is jQuery, so get to know it. The $ operator is quite convenient and powerful
  • To build MVC style single page applications I recommend to use AngularJS. It has a huge body of knowledge, a nice form module and an active community. Version 2.0 will have a huge boost in performance too. Make sure you know John Papa's style guide and follow it
  • And again: have a look at Ionic and Cordova (used in Ionic) for mobile development. It uses AngularJS under the hood
There are tons of additional libraries around for all sorts of requirements, which probably warrants another article.

Templates

With all the complexity around, you don't have to start from scratch. There are plenty of templates around, that, free or a little fee, give you a head start. Be very clear: they are an incredible resource when you know how all is working together, but they don't relieve you from learning the skill. Here are my favourites

Tools and resources

Notepad is not a development tool. There are quite some you need if you want to be productive
  • You need a capable editor, luckily you have plenty of choices or you opt for one or the other IDE
  • Node.js: a JavaScript runtime based on Google's V8 engine. It provides all runtime for all the other tools. If you don't have a node.js installation on your developer workstation, where were you hiding the last 2 years?
  • Bower: a dependency manager for browser files like CSS, JS with their various frameworks. You add a depencency (e.g. Bootstrap) to the bower.json file and Bower will find the right version for you
  • Grunt: a task runner application, used for assembly of web sites/applications (or any other stuff). Configured using a Gruntfile.js: it can do all sorts of steps like: copy files, combine and minify, check code quality, run tests etc.
  • Yeoman: A application scaffolding tool. It puts all the tools and needed configurations together. It uses generators to blueprint different applications from classic web, to reveal application to mobile hybrid apps. The site lists hundreds of generators and you are invited to modify them or roll your own. I like generator-angularand mcfly
  • GIT: the version control system. Use it from the command line, your IDE or a version control client
  • Watch NPM for new development


Those are the tools to mastery, when you just want HTML, CSS and JavaScript

Posted by on 13 November 2015 | Comments (3) | categories: Software

Comments

  1. posted by Dan Sickles on Saturday 14 November 2015 AD:
    Nice list. Some of these were probably presumed but I would add json, http and REST. As for tools: vagrant, ansible, babeljs. Platforms: linux, AWS, your fave cloud. React Native recently added Android support.
  2. posted by Theo Heselmans on Saturday 14 November 2015 AD:
    Nice write-up Stephan. Thanks.

    I would have put Bootstrap in the CSS section.
    Also, Angular is not the only game in town. Knockout and Backbone have their merits too.
    Underscore has a nice templating feature as well.
    I think you should write a separate blogpost about editors. Would love to hear your preferences.
    PS. In Europe in the 2nd half of March? Would love to offer you a slot at Engage to talk about these things!
  3. posted by Michael Kuhlman on Friday 24 January 2020 AD:

    +1 for the free codecademy's Javascript resource. Also, my site CourseDuck has a nice crowd sourced list of the best free javascript courses based on user reviews.