Hello. I am Nakayama, a coder in the Coding Factory Department (hereafter referred to as CF Department) who has been with the company for almost a year now.
It is no exaggeration to say that the browser validation function is one of the development environments. Today, I would like to introduce some of the advantages of Mozilla Firefox Quantum, which made a comeback in 2017, as a development browser.
I've been using Firefox as my main browser since 2009, so I think of the Internet as Firefox, but how about you? I'm sure you're wrong... So I decided to write an introductory article about Firefox.
Introduction
About CF development environment and browser share
As part of the project production process, there is no rule regarding which browser to use by default in the CF Department, but most of the coders in our Coding Factory Department seem to use Google Chrome as their default browser for development.
After developing using a browser of their choice, the coder performs a self-check using the CF standard checking browsers such as Chrome, Firefox, and IE before sending it for checking by the quality control department.
Chrome not only has a high browser market share, but also has a wide range of validation tools, making it the standard for development.
In my case, I basically create my site in Firefox, then adjust the pixels to compare it with the design in Chrome. This way, I can get the best of both worlds without running into bugs specific to Firefox.
Why Firefox Now?
Think Firefox is a thing of the past? That was the case until last year.
After winning the browser war in 2009, Firefox seemed to have been slumbering due to the rise of Chrome, but was reborn as Firefox Quantum in September 2017. As written in an article in the New York Times in June this year , Quantum (not Gundam) is a name for a breakthrough browser, and it is a new browser that is faster, takes up less space, and specializes in security.
The interface has also become flatter, the previous extension features have been discontinued, and a comprehensive validation function (developer tool) similar to Firebug has been added as standard.
In fact, if you go to Mozilla's site, you can see a video comparing Firefox to Chrome to see which one loads faster, and Firefox wins.
Chrome has since been updated, so the difference may not be "that big" at the moment, but if you have a lot of tabs open, Firefox may take the prize.
There are currently three types of Firefox. All of them are basically the aforementioned Firefox Quantum, but in addition to the regular Firefox Quantum, there is also the Firefox Developer Edition (with a cool logo) for development, and Firefox Nightly (with a cute logo) for trying out the latest features as soon as they become available.
The basic validation tools are the same, but the Developer Edition is a little faster, so I use it. The images used in this article are also from the Developer Edition.
Firefox verification function
Let's take a look at the Firefox validation tool. The basic operations for validating HTML and CSS can be used in the same way as Chrome. Of course, there are many great features that are only available in Chrome, but this time we will introduce CSS-related features that are only available in Firefox.
When you open the verification screen, the left screen has the Inspector (tags), Console, Debugger (JS debugger), Style Editor (CSS), etc.
The bar includes a screenshot, a ruler (displays the size of the screen), a ruler (measures the position and size on the screen), a responsive mode, a color picker, and more.
On the right screen you will see Rules (CSS), Layout (Box Model), Computed, Animation, and Fonts.
On a wide screen, the verification panel is divided into three screens, making it easy to see.
Here's what it looks like when enlarged. The colors are cute.
Now, let me introduce three main points that I would like to recommend.
CSS Grid viewer
If you look at the Inspector, you will see small marks such as [event] and [flex]. These appear when an element has an event, is in flex layout, or is in grid layout.
When you open a page that uses grid layout and click [grid], the details of the grid layout will be displayed in the Layout on the right. If you check Overlay Grid, the elements arranged in the grid will be surrounded by lines.
There is a [grid] mark. OverlayGrid is displayed in the layout panel.
How it looks in the browser
The visualization makes it easier to understand the structure of a grid layout.
It's also useful when learning CSS Grid. There is a tutorial on MDN as well .
Font display and variable font viewer
By selecting Fonts on the right screen, you can visually see what fonts are used throughout the page.
It is useful when you are wondering which font is actually being applied when various fonts are specified, or when you are wondering what this font looks like. It also has a function to adjust variable fonts . Variable fonts are fonts that allow you to adjust the font-weight and italic angle in 1px increments. The Japanese version is not yet widespread, but there may be more opportunities to use it in the future.
Reference site: Adobe Typekit Blog Japanese version "Variable fonts – a new kind of font that enables flexible design"
Example of variable font: https://v-fonts.com/
clip-path editor
Starting with Firefox 62, you can now visually manipulate clip-path, which cuts out images using CSS, in the validation tool. (However, it may not be available in IE, so it may not be used very often...) This will likely broaden the scope of your designs.
Reference article, image source: https://hacks.mozilla.org/2018/09/make-your-web-layouts-bust-out-of-the-rectangle-with-the-firefox-shape-path-editor/
Other Firefox activities
https://www.mozilla.org/en-US/internet-health/
My favorite part of the reading content provided by Firefox is the "Internet Health" section. Based on Mozilla's mission of "We want the Internet to be healthy and progressive," we investigate the current situation surrounding the Internet, such as password protection and tracking by SNS, and discuss it in podcasts, with the keywords "protecting security and privacy," "being open source," "being decentralized," "being inclusive," and "having high web literacy." Recently, there have been many posts about online elections. *English only *Podcasts can also be listened to on Spotify and AppleMusic.
Image source: https://blog.mozilla.org/internetcitizen/2018/08/24/the-privacy-paradox-is-a-privacy-dilemma/
Personally, I like the design of this section because it is very cute. The visuals and illustrations of each article reflect the trends relatively quickly, so I feel like I can get a little inspiration just by looking at it. Also, although the articles are not technical, they often contain technical terms related to modern social issues, so it is also a good way to practice reading English articles.
Image source: https://foundation.mozilla.org/en/initiatives/
And from now on...
What do you think? I've roughly listed the recommended points of Firefox, but did it make you feel like giving it a try?
I'm hoping to be able to use it together with Chrome as a development environment, taking advantage of both its advantages.
We hope you continue to have a fun, safe and comfortable internet experience with Firefox.
A logo concept for a planned renewal. The colors are exciting. Which do you prefer, the one on the right or the one on the left?
Image source: https://blog.mozilla.org/opendesign/evolving-the-firefox-brand/
bonus
The color scheme of the editor I always use is the same as Firefox (even the font). Atom and VSCode allow you to download color sets as plugins, so if you're not satisfied with your current color scheme, give it a try. This is the cutest after all!
モノサスアーカイブ