[Part-1] Things I learned this week in web #myDevDiary
Tags: mydevdiary, html, css, javascript
Published: 2020-01-24 02:41:13

---
title: [Part-1] Things I learned this week in web #myDevDiary
published: true
description: Are you preparing for the interview for CSS? Here are a few questions to consider.
tags: 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).

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/t3j7kkqu9qipy7z5mo4k.png)

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;*

Read more: https://css-tricks.com/fighting-the-space-between-inline-block-elements/

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!!