[Part-1] Things I learned this week in web #myDevDiary

#mydevdiary #html #css #javascript

1) [WEB] Voiceover doesn't work on the Mozilla (Mac)
Since last a few months, I am learning accessibility. Recently while testing the accessibility tools I stumbled on an interesting issue on Mozilla (Mac) with voiceover and I was not able to figure out that is the issue is on my webpage or not?

I went out and tweeted about it. Here is the screenshot of the problem and solution (not exactly the solution but the reason for the problem).

The good news is Mozilla is planning to support Voiceover support for Mozilla(Mac).

2) [CSS] Inline elements white space
This is something I came across while working with my team. In our web application, we were having 1px weird space between our buttons. We debugged but no luck for the source of 1px space. A quick Google explained the issue.

If you have inline or inline-block elements there will be 1px space but the fix of this is most weird.

Why it is happening?
HTML preserves the whitespace between the inline/inline-block elements.

Solution:

Make inline elements block
gzip or minified the HTML code. There should be no white-space
Add comments between inline elements
Make the element's font-size: 0;

3) [WEB] Fonts support for the localization
At my work, I am working on the Design system. Our Design system will be used by many products worldwide which means we will be supporting different languages. Currently, we have products with 12+ languages. Our design system should able to support 12+ languages.

For this, the first task is to identify the font-family and working on the usage guidelines with every language. The reason is the font properties that are working fine with the 'English' or 'German' might won't work with say 'Japanese'. The default 1rem and font-weight 800 which is visually looking good for English might not be readable with other languages.

So, I learned about these requirements and what is required from the developer.

4) [FRAMEWORK] Vuejs Gridsome
I am learning VueJS and I stumbled upon Gridsome and I am loving it. I loved my experience with it. Whenever does a ReactJS developer ask me what it is? My response to them - 'It is Gatsbyjs of Vuejs'.

For more information: https://gridsome.org/

I am working on a small project to learn and implement the Gridsome. My learning curve is very smooth so far and documentation is pretty awesome.

5) [JAVASCRIPT] instanceof
JavaScript is a programming language where one can learn every day something new. Strangely we developers are so busy in delivering the tasks that we rarely get time to go under the hood of the languages.

instanceOf operator checks whether the constructor instance falls anywhere in the prototype chain of an object. This is helpful when you have nested inheritance and want to check is the constructor instance is falling anywhere in the prototype chain of an object. Just to be clear it does not check that instance is a prototype of an object or not.

isPrototypeOf() differs from the instanceof operator. In the expression >"object instanceof AFunction", the object prototype chain is checked > against AFunction.prototype, not against AFunction itself.

For more information: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/instanceof

6) [JavaScript]URLSearchParams
This one I learned while working on the vanilla JS application. I wanted to get the params from the URL. Instead of having the old trick of using replace() or slice() to get the params, JavaScript has URLSearchParams an easy way to get the params.

https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams

Happy Learning!!