HTML5 & CSS3

There is no web project or hybrid app that does not use HTML and/or CSS today. They are the most used declarative languages per excellence and were emerging ad-hoc as the Internet was expanding and the market was asking for more solutions.

Today 3 out of 4 web pages use HTML5. 

HTML5 de-facto logo

The great evolution of HTML5 is the inclusion of labels to visualize video, play audio and be able to paint both 2D and 3D graphics on canvas.

HTML5 was strongly driven by Apple. Its main motivation was the replacement of Adobe Flash, whose execution was not allowed on their devices.

It is supported by most desktop and mobile browsers. 

But the most remarkable thing is that its specification is still open. There are numerous technologies that have been incorporated: WebSockets, WebRTC, Geoposition, Push Notifications, Web Workers, Service Workers, Bluetooth API, Battery API, ...

These latest additions are not available in all browsers and each developer is including them according to their criteria. In HTML5Test you can check what each one supports.

Web browsers implement what is known as the engine. He is in charge of the processing and rendering of the HTML, CSS and JS code.

With Microsoft's announcement of using Chromium instead of using its own engine for Edge, now only major engines remain: WebKit and Gecko.

The heart of Progressive Web App (PWA)

The latest additions to HTML5 are what make PWA a reality.

The use of manifests, services workers and push notifications, are key to having webapps that look like native apps.

Beyond the browser

With Electron, thanks to the guys at GitHub, it is very easy to generate desktop apps that use WebKit.

It allows developing these native desktop apps using web technologies (HTML5/CSS3/JS). Electron is responsible for easily adding the WebKit engine.

Examples of apps made with Electron are Atom and Slack.

The modern form of Web development

Web development has come a long way since its origins, when they were created using the simple notepad.

Web systems have evolved from pages that only showed information and as a bit a form processed by a simple CGI script to systems where most of the processing is in the web browser.

Bootstrap

Initiated by Twitter people, Bootstrap is a library that includes HTML, JS and CSS code so you do not have to start a web project from scratch. Through a structure of labels and classes, generic ready-to-use widgets are provided: navigation menus, buttons, dialogs, etc. One of the main problems that it solves is the responsive design (mobile, tablet, desktop, etc). It would be expensive in time to make a responsive design, mandatory nowadays, without bootstrap.

JavaScript evolution

Javascript has also undergone major changes since it was launched in 1995.

We still call it JavaScript, but nowadays most web browsers interpret ECMAScript, whose latest version is from 2016.

In this evolution there are many improvements: new types of data, new methods for types and elementary classes, new development paradigms such as reactive programming, etc.).

Developing using the latest version of ECMAScript has the risk that less used or non-updated browsers do not interpret the code well. For this reason, the transpile technique was born, which allows a fallback in older specifications to be 100% compatible.

We can say that TypeScript is a superior layer of JavaScript. The idea that the guys from Microsoft had was very good: add static types to JavaScript so that later it will not be hell to debug the code. But browsers "only" understand JavaScript, so it is necessary for the TypeScript compiler to generate the "most secure" code in JavaScript.

Comment also the existence of alternative languages such as Dart, devised by Google and then needs to be interpreted by a Dart runtime that is loaded into the browser next to the code.

CSS with superpowers

CSS is not far behind in evolution. 

Now many design details are allowed: shadows, animations, image processing, ...

But in terms of the language itself, it still has many limitations.

This was the reason for the birth of technologies such as SASS, which allows defining variables, nesting styles, functions to generate colors, ...
As it happens like TypeScript or ECMAScript, then it is necessary to compile to generate 100% compatible CSS code.

Webpack

As you can see, web development has become more complex. Having several parts that need a compilation or transpile process.

It is also good to optimize the code and occupy as little as possible.

For that reason, tools such as Webpack were born.

Webpack is a task manager that is automatically responsible for doing all these processes, generating at the end a code that is 100% interpretable by most web browsers.

Projects made with Web Technologies (HTML5/CSS3/JS)