On the languages we utilizes for web development, we must always write a code that has great semantic, while also having amazing performance. Besides that, It needs to be clean so everyone can understand It easily and maintain It in the future.
On a website development, we need to use multiple technologies to make everything work properly.
Here we are considering you know the difference between Front-end and Back-end (if you don’t know and have interest in knowing, click here), because this article is for Front-end mainly.
Some concepts here are also valid not only for Front-end, but also for programming languages, but the application of these concepts here is demonstrated on the Front-end. So, let’s go!
Adopt HTML5 and CSS3 (today!)
These are already stablished technologies and you should use them without fear. Just to make It clear: Internet Explorer 8 doesn’t support HTML5, but there is a script that solves It.
I recommend you don’t use that script, because nobody uses Internet Explorer 8 in 2020 (really, almost 0%).
By using HTML5 and CSS3 you have to be careful with browser compatibility, because both have newer properties with bad browser support. But that, in no way, should stop you from using them. There is a concept called Progressive Enhancement, here is how It works:
The concept of Progressive Enhancement says that the construction of a web page should be made so that It works on all utilized browsers, and then additional cool stuff can be added that only users from recent browsers will be able to see, but that won’t break for those old browsers.
If any of those are not supported by the browser, the user will still be able to use the website, even though with a less good experience. (Fonts: Blog da Caelum)
Semantics and performance with HTML5
A very important factor on our code is semantics (not only on front-end). On HTML5, semantics is not only interesting to make code easy for other developers to read, but also super important for SEO (Search Engine Optimization).
Google cares a lot about a semantic and fresh code, in a way that old websites without HTML5 are losing space on results, if they have bad code and/or deprecated.
With the new HTML tags, semantics improved a lot, so they should be used. Take a look here the list with new tags and the old ones that are still valid.
It’s necessary to know what every tag means so we can use them properly. Besides semantic, HTML5 brings better performance, a new element that decreases websites’ loading times (“<picture>”).
This tag offers the ability to define multiple image sizes, to be used on the same location but for different screen resolutions. Good news is you can already use It (here is an usage example), because HTML’s syntax creates a fallback image (for older browsers, this one will be showed on all resolutions).
Utilization of new properties and good practices with CSS3
Back in the old times, when building visual elements for projects, image usage was common to simulate buttons (just an example), and other things. When It was about animations, Flash was already ready to take care of the job.
But, we are in 2020, so images and Flash animations are no more. CSS3 is here to make our code cleaner, with better performance and more elegant (way more).
Just as It happens with HTML5, CSS3 has many elements without old browsers’ support, but most are supported already.
For animations, CSS3 brings awesome updates, such as the canvas tag (from HTML5) and CSS animations. Big companies dropped Flash a long time ago and adopted newer and better technologies, Apple is an example on that, removing Flash completely from It’s devices. Despite super radical, it was great for the internet in general.
I hope this article helped you in any way. If you are a web developer, please put these things in practice, so we make a better internet, today.
