[Translation] Modern web developer, or 6 things you need to know to survive

This article is about the changes that have occurred in the world of web development. I see a huge number of web developers who are literally stuck in obsolete technologies, especially in the world of .NET. If you have not started to improve your skills and adapt to changing trends, you should start today.


Set a goal to develop your web applications correctly. At your disposal are many articles and books like never before. There are more than ever a lot of Internet resources that can simplify and speed up the development process. So, here are the 6 things you need to know and use in order to remain a popular web developer and be the best in your field.

1 - Improve the quality of the code (javascript and css)

If you do not write literate HTML and CSS, you will not survive.

• Explore all the basic features of JavaScript
• Then proceed to advanced language features.
• As soon as you feel confident in pure JS, familiarize yourself with languages ​​of a higher level of abstraction, such as CoffeeScript or TypeScript . Improve the use of the necessary JavaScript libraries, here is a list of the minimum required:
• JQuery - You've learned it a long time, right?
• Require.js - JavaScript file and module loader.
• Underscore.js is an excellent utility library.
• modernizr is a browser that supports HTML / CSS capabilities.
• history.js - emulate HTML history API, work with browser history.

And here's a little more:

• Useful JavaScript libraries and jQuery plugins
• Crockford's Javascript Resources
• Try TypeScript , especially if you frequently use Microsoft .NET.
• As for CSS, check out the SASS or Less extensions, go over the CSS3 techniques , and watch the support for CSS3 features in various browsers. Understand the concept of responsive design and start using media queries .

2 - Create Responsive Design

Today, more and more traffic is consumed through mobile devices, so most websites by default should look good on devices of any form factor. If you, like me, have no time to create all these web pages using media queries, make your life easier. Master the responsive design frameworks.
')

Responsive Web Design (RWD) is an approach to web design when a website is designed to provide the best look — easy reading and navigation without zooming in, turning the device, and scrolling — for a wide range of devices (from monitor to mobile devices)

I personally use Twitter Bootstrap and the Zurb's Foundation . I have been working with Bootstrap for a long time, and I was pleasantly surprised by the Foundation chips.

Be sure to read:

• Responsive Web Design by Ethan Marcotte
• Comparison of Responsive CSS Frameworks

3 - Learn the most useful JavaScript MVC frameworks

Become a first-class JavaScript developer. There are many Javascript MVC frameworks for the client side, but learn at least 5 (Yes, at least 5). I have compiled a starting selection for you.

• Backbone.js
• AngularJS
• Spine.js
• KnockoutJS (MVVM)
• Ember.js
• YUI

To compare and match their capabilities, take a look at TodoMVC - a very cool and useful thing. This is a project that was created to help you make a choice from the MVC Zoo frameworks, depending on your goals.

4 - Understand REST and HTTP

You must understand how Restful web services work and be proficient in the creation and management of the server part of the site. For example, use Node.js. If you are using .NET, start with Web APIs . Moreover, understand how REST works. Spend time learning Hypermedia. Don't stop at theory, follow a few examples. And then, integrate your knowledge of REST web services with one of the above-mentioned MVC frameworks, and make some project using these technologies. Use the correct HTTP requests.

Be sure to read:

• WOA is here to stay
• Richardson Maturity Model - Article by Martin Fowler
• REST in Practice
• Hypermedia and Forms

These articles will go down for a start. Also, pay attention to ready-made implementations such as Meteor, SignalR.

5 - The Future for HTML5

The HTML5 standard is developing very dynamically, but much has already been approved. Along with the development of sites, HTML5 provides many containers (for example, PhoneGap, etc.) that allow you to package your applications in a browser — containers for mobile devices (so-called hybrid applications), for distribution as native applications through familiar distribution channels.

HTML5 is a markup language for structuring and presenting content online and is the core technology of the Internet. This is the fifth revision of the HTML standard (created in 1990 and standardized as HTML4 in 1997) and, as of November 2012, is under development. The main goal is to improve the language by adding support for modern media content while maintaining readability of code by people and consistently recognized computers and other devices (web browsers, parsers, etc.).

There are a lot of cool HTML5 articles:

• Nettuts step-by-step tutorial with examples
• An article in Smashing magazine is a great starting point for understanding the philosophy of modern design.
• Top 25 HTML5 Features

Check out the most useful and impressive HTML5 Javascript API and the benefits of the language. Pay attention to Web Sockets, Application Cache, Canvas API, Video / Audio, etc. Start to start with some popular template, you can use to create templates, for example Initializr.
Look in these technologies for what you really need in work.

• Some examples of using HTML5 features
• Use something like html5please or CanIUse , they will help you to be aware of the latest changes in the standard that you can use to improve your design.
• Also, see how big market players use HTML5 as a platform for building cross-platform hybrid applications — not just for the web, but also for desktops and mobile devices.
• Google Chrome Packaged Applications
• Firefox os

6 - Optimize

Optimize everything you do, during development, and at the end of it.

• Structure and improve your CSS and Javascript code.
• Use your page's code inspection tools, and test JavaScript performance.
• Google Chrome's speed tracer
• Yslow
• When necessary, monitor network traffic, it may be needed at any time - for this, try tools like Fiddler
• Use useful services, such as Screenfly, to check the display of a web page on devices of different form factors.
• Use simulators, such as Ripple, to test the behavior of your website on mobile devices.

Well, that's it, I ended up with tips. You can sit down to read, and begin to improve, I wish you success.

Translation of an article by Anoop Madhusudanan "Changing Times For Web Developers - 6 Tips You Should Read To Survive"