DEV Community: Salil Naik

The uncanny relationship between position fixed and transform property.

Salil Naik — Sat, 05 Jun 2021 09:10:37 +0000

TL;DR

An element with position:fixed is positioned relative to the document (the viewport) which acts as its containing block.

But, it will NOT always be relative to the document. When any element has transform, filter or perspective property, it acts as a containing block for all its descendants, including the elements whose position is set to fixed.

Now, the long story...

While I was working on enhancing the navigation bar of the
Polygon Wallet, I found myself stuck with a strange error. I spent almost a day trying to figure out the issue, consulted with the senior frontend engineers and also thought of making a separate Vue component as a workaround.

When I finally found the bug, I wouldn't shy away to say that my ego went crashing down, as it was a CSS bug, and my CSS skills are something I take pride in.

I was doing some changes to the code to align the dropdown menus to the cente of the navigation item (as shown in the picture below) for which I had to move the dropdown component inside the <li>. Doing this would allow me to use the CSS position and transform properties to align the dropdown exactly at the bottom-center of the navigation item.

Till now, everything was working fine and nothing was unusual and unexpected.

Inside the dropdown menu, there were a bunch of notification items, which when clicked would open the modal component.

The components were nested something like this



<li>
  <span>Notifications</span>

  <dropdown-menu>
    <item>
      <modal />
    </item>

    <item>
      <modal />
    </item>
  </dropdown-menu>
</li>

The modal component, which was supposed to open at the center of the screen when clicked on the item, would just behave weirdly and open inside the dropdown menu itself. I was sure that, any element with a fixed position would ignore all its ancestors and position itself relative to the document (the viewport or the root element). But that just didn't happen. The ancestor element, in this case, the dropdown menu was acting as a containing block for the modal component.

And as you might have guessed, it was due to the transform property. Any element with transform, filter or perspective property will act as a containing block to all its descendants, including the elements whose position is set to fixed. Hence the modal, instead of positioning itself with respect to the document, positioned itself relative to the dropdown-menu component where I had used the transform property to align it exactly at the bottom-center of the navigation item. See CSS Transform Spec

How did I fix it?

Well, there is no fix for that, I just removed the transform property, gave a fixed width to all the dropdown components and achieved the same result with the help of the margin and position properties. But this uncanny relationship between position and transform property reminded me why CSS takes the crown as my favorite language even when I have a multi-paradigm language like JavaScript in my stack. ❤

Thank you!

If you want to learn about CSS positions, refer to
CSS Tricks
MDN Web Docs

Understanding the Synthetix Defi protocol.

Salil Naik — Sat, 06 Mar 2021 11:23:30 +0000

Brief intro to Ethereum and Smart Contracts.

Many people confuse the term Ethereum to be a cryptocurrency just like bitcoin. For years even I believed the same until recently when I started reading and learning about Ethereum.

Ethereum, just like bitcoin, allows you to use digital money without payment providers or banks. But Ethereum is programmable 😎. It introduces transaction protocols called Smart Contracts which allows the engineers to write programs that can send and receive money.

This gives birth to a whole new sector called Decentralized Finance or Defi which is to traditional finance what the internet was to paper-based media. Defi refers to financial services using smart contracts which are automated enforceable agreements that don’t need intermediaries like a bank or lawyer and use online blockchain technology instead.

There are 100s of Defi protocols that are built to solve some of the problems faced in traditional finance. One such protocol is the Synthetix protocol.

In the simplest words, Synthetix is an Ethereum-based protocol for the issuance of synthetic assets.

But to understand this, we first need to understand the financial term called Synthetic Assets.

Synthetic Assets

This term is not specific to cryptocurrencies or decentralized finance. Instead, it has been there in traditional finance for a long time.

As per definition, a synthetic asset is a financial instrument that derives its value from another asset.

For example, synthetic GOLD (sGOLD) derives its value from the real-world asset that is GOLD. Here, synthetic GOLD is nothing but an imitation, a simulation of the real-world asset.

To understand it better, let us take the Dream11 game as an example. In Dream11, you choose your playing 11 and depending on the player's performance on the field, you earn points/money. But your playing 11 is just a simulation of those real players.

Similarly, sGOLD is just an imitation of GOLD. And depending on GOLD's performance, the value of sGOLD changes. In the image above, various other synths are shown pegged to their respective real-world assets (fiats, commodities and cryptocurrencies). sBTC -> BTC, sETH -> ETH, etc.

Synthetic assets allow traders to take a position in an asset without actually needing to spend the capital to directly buy or sell that asset. Though this gives the traders exposure to real-world assets, it won't really give them the dividend that the actual stockholders get. Synthetic assets remove any limitations that regulatory bodies place on an individual to start trading the real-world assets. It also allows traders to switch from commodity like sXAU (synthetic Gold) to cryptocurrency like sETH which is not possible in the case of real-world assets.

Synthetix Protocol and SNX tokens

Now that we know what synthetic assets are, let us get back to the 1-line definition of the Sythetix Protocol.

Synthetix is an Ethereum-based protocol for the issuance of synthetic assets. It is a trading platform to buy or sell synthetic assets.

All the Synths are backed by Synthetix's native token called SNX (Synthetix Network Token). SNX is used as collateral to mint Synths and is currently backed by 800%¹ collateralization ratio.

In other words, to buy synths, users will have to back the amount with an 800% collateralization ratio. For example, to mint 100 USDT, you will have to deposit the equivalent of 800 USDT.

1 USDT = $1

So, to mint 100 USDT, you will have to deposit $800. The high collateral ratio ensures there is enough collateral to absorb large price shocks in the case of big market price wings.

Synths are minted using Mintr which is a decentralized application for interacting with the Synthetix contracts.

The price of the Synth's is tracked in real-time using Chainlink oracle data feeds which allows the investors to buy and sell all the assets like real assets, only without a central body. In this way, Synths provide exposure to assets that are normally inaccessible to the average crypto investor — gold and silver, for example — and lets you trade them quickly and efficiently.

How is the Synth peg maintained?

Since the Synths are pegged to the real-world assets, they have to make sure the value remains stable and the ratio is maintained for the well functioning system.

There are 3 methods to maintain Synth pegs.

1. Arbitrage

SNX stakers incur debt when they mint Synths. When the peg collapses, they can profit by buying sUSD back at a lower price and burning it to reducing their debt, as the Synthetix system always values 1 sUSD as $1 USD.

2. sETH liquidity pool on Uniswap

When traders stakes/mints their SNX, an exchange fee is generated which is sent to the liquidity pool available for SNX stakers to claim their proportion each week. This allows the traders to purchase Synths to start trading or sell Synths to take profits.

3. SNX auction

Synthetix is currently trialling a new mechanism with the dFusion protocol (from Gnosis) in which discounted SNX is sold at auction for ETH, which is then used to purchase Synths below the peg.

Synthetix is one of the top movers in the rapidly growing Defi space and is one of the most complex and useful protocols built on Ethereum to date. While learning about the protocol I had to refer to various articles and youtube videos and so many financial terms to the already complex protocol made it difficult for a beginner to understand. So I decided to write a high-level explanation of the protocol in simple words to help the beginners understand. This article was written under the guidance of my mentor, Arth Patel, at Ethereum India Fellowship, organized by Devfolio.

Notes

¹ C-Ratio is 800% at the time of writing this blog. (as per Synthetix Litepaper, V1.4, March 2020). Although this may be raised or lowered in the future through community governance mechanisms.

References

Reference	Type
Synthetix	Article
oracles	Glossary
What is pegging in finance	Article
What is Synthetix? SNX coin Explained	Youtube video
How does Synthetix work?	Youtube video
Intro to Synthetix, DeFi Derivatives Exchange built on Ethereum	Youtube video

What is web a11y and why is it important?

Salil Naik — Thu, 01 Oct 2020 13:20:00 +0000

The term a11y stands for accessibility. A11y is known as numeronym with 11 representing the count of letters between the first and the last letter of the word "accessibility". Some other examples of numeronym are W3C, Y2K, etc.

What is web a11y?

The web is designed to work for all, irrespective of their hardware, software, location, language, physical disabilities or situational disabilities. In other words, it just means that the web should be accessible to all no matter what.

The power of the Web is in its universality.
Access by everyone regardless of disability is an essential aspect. - Tim Berners-Lee, inventor of the WWW

Web a11y has been into the practice since the late 90s, but even 20 years after its inception, it is being treated as an added feature of the website. Making the website accessible, making it easy to use for all the people is an inclusive practice. Every web engineer should make sure that their websites are usable by people with disabilities or impairments.

But why is it so important?

The very same question was asked to me when I spoke at National Institute of Technology Goa in Jan 2020 (back when things were normal). And a few months before that, even I had the same question.

Most of the young developers are clueless about it as there is no awareness around web a11y. Out of so many courses and sessions I attended on web development, not a single one shed light on accessibility. And this is the major reason why developers are not used to making their websites accessible.

According to the World Health Organization, there are more than 2 billion disabled people, that is 37.5% of the world's population. (2019 data source)

1.3 billion people are affected by some form of blindness and visual impairment. This represents 17% of the world’s population.
466 million people have a disabling deafness and hearing loss. This represents 6% of the world’s population.

And to help people with such disabilities use our website without any hassles and not to make them feel left out is the duty of web developers. In some countries like Australia, Canada, Ireland, Italy, Japan, Spain, Sweden, US and UK, digital accessibility is a right protected by law and depriving someone of access is illegal.

Okay. Then how do I make my websites accessible?

Disabled people rely on assistive technologies like screen-readers, braille displays, etc, to carry out tasks on the internet. Websites should be developed in a way that they are compatible with all such assistive technology.

To make the websites accessible you have to use the semantic tags wherever required, use alternate text for images, use only 1 h1 tag per page, have a right colour contrast, etc. Let me know in the comments below if you would like me to write a detailed blog on building accessible websites.

I have listed down three things that will help you in making the websites accessible.

I have developed a CSS tool that detects the accessibility errors on the website. All you need to do is link it to your page and it will show all the errors. The errors will disappear as you rectify them.
You can also use Lighthouse in Chrome Dev Tools to run the accessibility audits. It runs a series of audits against the page, and then it generates a report on how well the page did.
This checklist by A11yproject uses The Web Content Accessibility Guidelines (WCAG) as a reference point. It covers almost all the a11y concerns.

Thank you!

Custom Checkbox using CSS

Salil Naik — Fri, 26 Jun 2020 02:02:56 +0000