Calling all web developers: here’s why you should be using Firefox

I don’t know how old you are; but, as someone who was born in the late 80s, I remember the rise — and fall — of Firefox well.

Firefox emerged as an open source competitor to Internet Explorer 6. It was awesome because it had options: for instance, users could add features with various extensions and change visual themes. Everyone loved it.

A few years later, however, another player entered the ring. It was called — you guessed it — Chrome. Take up of Chrome skyrocketed, quickly surpassing its competitors. In fact, Chrome has been used by so many people, in such a short period of time, that it’s become one of Google’s most valuable assetsever. I’m sure many of you are using it to read this right now.

But let’s back up for a minute. As a developer, I know how hard it can be to please users.

And with the development of increasingly complex web technologies, applications and software in general, problems with high RAM and CPU usage are beginning to emerge.

Deniz, from the JotForm developer team, recently remarked:

“I have a computer with the latest configuration of the Macbook Pro. When developing (while Chrome DevTools is open), the battery drains too fast.”

And, if you’re a developer too, I’m sure you’ve made similar comments yourself — or heard them from people around you.

You might have even — gasp — thought about going further and switching to a browser that isn’t Chrome.

And that, my friends, is where the new-and-improved Firefox comes in: Firefox Quantum.

In 2017, Quantum launched for Android, Linux, iOS, Mac and Windows users — over a decade after Mozilla released the iconic first edition of Firefox.

As well having a beautifully modern new look, it’s rumoured to load websites twice as fast as Firefox 6 was able to — while using 30% less memory than Chrome.

After 10 years in the game, Mozilla has had to figure out new ways to differentiate Firefox from its competitors without losing its power. No small feat.

So, to take maximum advantage of a computer’s processing power, almost 4 million lines of code have been rewritten with the help of cutting-edge technologies like ServoRust and Quantum/Stylo.

And it’s paid off.

In my opinion, Firefox Quantum has a superior performance compared to other browsers.

Here’s why…

New technologies

WebAssembly

Running large, flashy or complex applications online is many a developer’s dream. Plus, with the recent rise of technologies such as photo and video editing, 3D game editing, and VR/AR, online users’ expectations have increased considerably.

JavaScript engines such as Google V8, Mozilla SpiderMonkey and Microsoft Charka have been developed to achieve a faster performance for these types of operations.

Towards the end of 2017, it became possible to run Unity and Unreal game engines on Firefox. And now, the other major scanners have given their support, too.

A-Frame and WebVR

One of the biggest recent innovations is Virtual Reality — VR for short. And with mobile phones, browsers, and products like the Oculus Rift and HTC Vive, great progress continues to be made.

Mozilla has played a huge role in the development of the WebVR infrastructure, but has also worked hard to enhance it with their new web browser. Thanks to A-Frame (supported by Mozilla), an excellent framework for using WebVR has already been made available to us.

Project Common Voice

Apple Siri, Microsoft Cortana, Amazon Echo, and Google Home all adopt a proprietary/closed wall approach to the speech recognition technology that underlies the ability of these products to respond to spoken commands.

And guess what? Mozilla has now launched Common Voice, an open source initiative to make voice recognition available to everyone.

Anyone can contribute to Common Voice by reading sentences aloud and teaching cues to the machine. You can also verify common voice transcriptions to make sure that the recognition engine is on the right track.

Firefox Devtools

Following the changes in Firefox that I mentioned above, you won’t be surprised to hear that lots of improvements have been made to DevTools. Debugger.html is one of them. The best part? Debugger.html is an open-source project hosted on GitHub, so anyone can contribute to its development.

Now, let’s examine the new features of debugger.html one by one.

General — Inspect Tool

Change Theme

The new developer tool comes with three different theme options: dark, clear and Firebug. The much-loved Firebug tool is still used by many people, even though active development has ceased.

There’s even a separate blog post to compare color usage: In-depth blog postat Firefox Nightly News.

CSS Grid

One of the latest innovations in CSS is CSS Grid Layout. With DevTools, you can see your “display: grid” featured elements. You can also easily turn on or off features such as line numbers, area names, or extend lines infinitely.

For more information visit: https://hacks.mozilla.org/2017/06/new-css-grid-layout-panel-in-firefox-nightly/

Box Model

Margin and padding values in elements can sometimes become puzzles. With the box model structure, you can easily see — and change — how much space is occupied by properties such as margin, padding, and border.

For more information visit: https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model

CSS Variables

Another CSS innovation is the introduction of variables. While not all browsers support variables yet, their use will undoubtedly increase over time. As the name implies, you can assign any value to a variable. Want to check what the value is? Simply hover your mouse over it.

For more information visit: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables

Add/Remove Class

By pressing the .cls button on the right side of the DevTools dashboard, you can easily add and remove CSS classes of the HTML element you are inspecting.

Hover

When you press the button next to the .cls key on the right side, you can easily test the hover, active, and focus states of the current element.

Font Family

When you inspect an element, you can also see which font is used in that element, and how it has been added.

Animations

Animations are another popular development. In my story ‘How to use CSS animations like a pro’, I wrote a short introduction to animation. You can play the animations slowly or keep track of how they are moving.

XPath

Any fellow developers out there will have heard the term ‘web scraping’. If you want to use a scraper to pull some content out of a web page, you can easily get the location of the element on the page via XPath. You can see what I mean in the GIF above.

CONSOLE

Console Log

When we move to the console section, you can easily examine the objects. Plus, the tree structure key makes it easy to select objects and stop them disappearing.

Console.group

Did you know that you can make events more organized and legible with console.group () and groupCollapsed ()?

Debugger

Breakpoint

Good tools for JavaScript debugging are indispensable. With Breakpoint, you can quickly insert breakpoints and examine scope details.

Source Maps

SCSS, WebAssembly, TypeScript, Babel … these JavaScript or CSS compilations are becoming very popular. As a result, the code structure that ends up in the browser has often been processed into something quite different from what was originally written. You can focus on working with the original source files by using source maps.

Function Search — Project Search

One of the best ways to uncover our mistakes is to be able to search for them in our many files.

Style Editor

In this editor you can see everything you’ve written for CSS, such as your use of breakpoints.

Performance

To ensure that our pages are rendered quickly and smoothly, particularly when animation is involved, the 60 fps rule should not be forgotten. With this, you can track how long each frame takes to display itself.

Network Monitor

CSS, JavaScript, images and many other assets are loaded in the Network Monitor section so that the page can be interpreted and displayed properly by the browser.

You can use this section specifically for performance: observing the status of the files, how long it takes them to upload, and whether or not they can be loaded successfully.

Storage

We use cookies or local storage to keep information about users when they visit your website.

This section gives you the opportunity to inspect, edit, add or delete this information.

Final thoughts

The business models of big companies depend on users shifting from third party products to their own proprietary offerings in order to keep consumers locked into their own software ecosystem.

For example, if you want to watch an Apple Keynote presentation on the web, you can only open the page with Safari. If you want to switch from iOS to Android, you’ll have to say goodbye to iMessage.

But Mozilla Firefox is not part of a proprietary ‘walled garden’. That’s why changing your browser to Firefox is way easier than doing the things mentioned above.

Yes, I know it’s still hard to make the move. You have to change habits, shortcuts, browser extensions and saved passwords. But I promise, it’s worth it.

Give Firefox another chance.

P.S.

I have good news for those who read through the end of the article. We have the ability to manage the notifications that we get tired of seeing everywhere.

12
Leave a Reply

avatar
11 Comment threads
1 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
11 Comment authors
adminTerrieAudrayeezysyeezy 500 Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Zaylin
Guest

That’s a subtle way of thniking about it.

Adidas NMD New Geometry Red
Guest

Youre so cool! I dont suppose Ive learn something like this before. So good to find any individual with some original ideas on this subject. realy thank you for beginning this up. this website is something that’s wanted on the web, someone with a bit originality. useful job for bringing one thing new to the internet!

yeezy boost
Guest

I enjoy you because of your whole labor on this website. My mother really loves conducting internet research and it’s really easy to see why. Many of us hear all about the dynamic form you create rewarding ideas on this web blog and even invigorate participation from website visitors about this concept while our favorite daughter is now learning a whole lot. Enjoy the rest of the year. You are always performing a really great job.

adidas nmd
Guest

Thank you for all of your hard work on this site. Kim loves carrying out investigations and it’s easy to understand why. We hear all of the lively ways you give informative tips by means of this web blog and even recommend participation from some others on the article while our favorite girl is truly starting to learn a lot. Have fun with the rest of the year. You have been carrying out a terrific job.

moncler outlet
Guest

I’m also commenting to let you know of the beneficial encounter my cousin’s daughter encountered reading your web page. She came to understand numerous details, most notably what it’s like to have an incredible coaching mood to let certain people with no trouble comprehend chosen advanced subject areas. You actually exceeded people’s expected results. I appreciate you for producing those informative, healthy, edifying as well as fun tips about that topic to Janet.

adidas gazelle sale
Guest

I want to express thanks to this writer just for bailing me out of this particular difficulty. Right after searching throughout the internet and getting recommendations that were not powerful, I assumed my entire life was well over. Living without the answers to the problems you have sorted out by means of your entire post is a serious case, as well as the ones that might have badly affected my career if I had not encountered the blog. Your understanding and kindness in playing with all the stuff was very useful. I am not sure what I would’ve done if… Read more »

yeezy 500
Guest

Thanks so much for giving everyone a very splendid possiblity to check tips from this website. It can be so beneficial and as well , jam-packed with a great time for me personally and my office co-workers to visit your website really 3 times per week to read through the fresh items you will have. And lastly, I am just always satisfied with all the powerful solutions you serve. Selected 4 ideas in this article are particularly the finest we have ever had.

yeezys
Guest

I intended to send you the very little remark in order to thank you yet again over the fantastic tips you’ve provided in this article. It is quite pretty generous of people like you to make extensively all most people might have offered for an electronic book to make some dough on their own, certainly since you might have tried it in case you decided. The inspiring ideas likewise served like a good way to comprehend other people online have a similar passion just as my very own to know a little more in terms of this problem. I am… Read more »

Audra
Guest

Hello there! Would you mind if I share your blog with my twitter group?
There’s a lot of folks that I think would really appreciate your
content. Please let me know. Cheers

Terrie
Guest

For most recent news you have to visit web and on world-wide-web I found this site as a most excellent web
site for hottest updates.

trackback

Google

Wonderful story, reckoned we could combine a handful of unrelated data, nonetheless actually worth taking a look, whoa did one particular discover about Mid East has got extra problerms too.

WhatsApp chat