Browsers — which one you must use?
Chrome, Firefox, Safari, IE (?) … There are many options — which one you must choose?
If you're a basic/regular user, probably your choice will be based on the browser that best fits your browsing and looks attractive; but, if you're a web developer (mainly a front-end), your choice should be: all of them!
Yes, all of them; or, at least, a few of them! Because your users could use more than a single browser — maybe they use Firefox on the desktop and Safari on the mobile; and the JS and CSS codes rendering process is way different. So, as a developer, you must be prepared to all those possibilities that apply to browsers.
When I started in the web development world — about 5 years ago, I used Firefox a lot, both for development and for my personal use. Back in the time, Chrome wasn't so good for development and Firebug was the best way to debug code and inspect elements.
But recently, Chrome console (called DevTools) has evolved lot and even left Firefox a little behind that Mozilla has reworked the whole developmental side of Firefox and today it competes as equals to Chrome. Now you can make good use of Firefox to develop without having to use Firebug anymore.
Another very interesting and great point to note are the "beta browsers", also called developers' edition. This is the case of Canary (Chrome), Firefox Quantum, Safari Technology Preview…
These browsers gets a lot more uptades than the regular editions. So they can support new CSS and JS specs long before they are present in stable versions.
Of course, this kind of browser also have a slightly higher number of bugs, due to the number of updates; however, if you want to try out new stuff, they're the best choice!
Also, there are the "smaller browsers". Sometimes they're not as well known and uses the rendering engines of the giant ones (most of them are based on Chromium), but they have optimized sizes and a low memory consumption. Here we can cite Brave, Spark…
Brave has even been created by Brendan Eich — nothing less than the father of JavaScript and Mozilla co-founder!
For the modern web, it's impossible for you to create a website or a webapp by testing it in a single browser, or in a single version. Today, on many sites, the accesses made by mobile devies is larger than the accesses made by desktop devices. And it has already happened for the last 2 years.
You can't get stuck within the xyz version of that specific browser. Incidentally, if you do this, you can't call yourself a modern developer! However, it will also depend on the support you want/need to have in your project.
Some great tools, like Google Analytics, can help you a lot in finding and analyzing your conversions and accesses rate, diving into categories like device type, OS, browser version, user location…
I'll leave here a breif list with some browsers and their best features. It's worth taking a look:
1 — Chrome
The best-known browser, it's a cross-platform software and uses the best rendering engine available for JS, the V8. It has several plug-ins, extensions and themes to make your experience even more comfortable.
In development issues, it has one of the best consoles availables and also offers a beta version, the Canary.
2 — Firefox
The first browser of many developers, it uses less memory and is as good as Chrome. Its private browsing is greatly improved and also has several extensions, plug-ins and themes for customization.
For devs, Firefox Quantum edition is available.
3 — Opera
An alternative browser that became very popular, Opera also uses Blink and V8 as engines (same as Chrome) and is cross-platform. Now, it offers a free VPN service and a built-in ad-blocker. It also has an excellent on-the-fly currency conversion service.
For devs, it offers Dragonfly as dev tools.
4 — Safari
Simply, Apple's official browser. Also a cross-platform and it's absurdly fasther on Apple devices (compared to other browsers). Also has several extensions to cutomize your browsing experience.
For devs, it offers the Technology Preview version.
5 — Brave
Headed by Brendan Eich, it's also a cross-platform software and extremely focused on perfomance and security. His built-in ad-blocker has a differential — it only removes ads from sites that spy on user behavior and history. It's based on Chromium and also uses Blink and V8 engines.
6 — Spark
Baidu's browser, has some great features that are only accessed with mouse moviments, without the need for clicks. It has data sync with your Google accounts and several customization by themes and extensions.
7 — Midori
Another extremely performance-focused browser, uses WebKit and is fully open-source. It also has great levels of customization and a download optimizer (this will depend a lot on your connection).
8 — IceDragon
Another performance-focused browser, it extremely easy to use. Created by Comodo, is based on Firefox and has several integrations with the plugins and extensions of the fox. It uses low levels of hardware memory and has several widgets focused on security.
9 — Vivaldi
Also a performance-focused browser and extremely light, Vivaldi has a lot of widgets such as notes, dashboards, speed dial, pills, marker aliases… Its interface is highly customizable, both by themes and by you being able to choose which elements and where they'll be positioned.
In this post, I didn't mention IE nor Edge because, IMHO, they're not part of the modern web and, unfortunately, they're heading for irrelevance — time is for everyone.
According to a survey done in March of this year (2018), only 15.4% of the world's computers still use IE, and about 10% uses Edge.
Top web browsers 2018: Microsoft scratches out gains as analytics vendor expels bots — https://www.computerworld.com/article/3199425/web-browsers/top-web-browsers-2018-microsoft-scratches-out-gains-as-analytics-vendor-expels-bots.html?page=7&platform=hootsuite
But even then, there are still people who uses those browsers. So if you need to offer legacy browser support, stay alert for vendor prefixes and polyfills.
Another great reference you can (and should) use during your development is Can I Use, which contains information about the support of various HTML elements/attributes, CSS properties and JS features.
You can also use testing tools on multiple browsers and platforms, such as BrowserStack and Browsersync.
The web is an immense blue ocean of opportunity, and as it's written in the image of this post — explore!
✉️ Subscribe to CodeBurst’s once-weekly Email Blast, 🐦 Follow CodeBurst on Twitter, view 🗺️ The 2018 Web Developer Roadmap, and 🕸️ Learn Full Stack Web Development.
