DEV Community: Sahil Garg

Better way to make disabled variants of the components

Sahil Garg — Fri, 06 Oct 2023 18:30:11 +0000

When creating large projects or ones where you need full customization, it is usually a good practice to recreate the basic UI components according to the design system of the project. When creating these basic UI components, we usually create a disabled variant of button, input etc… These are usually styled by adding another class and then styling that class according to the design system and then disabling the click-handler and removing the cursor: pointer; from it and optionally using cursor: not-allowed;. And for this, we repeat the same code again and again or need to create a mixin (if using a SCSS). What if I tell you that there's an easier way to style the disabled state of the elements together without needing to redefine the same styles again and again… Well, that's exactly what we will be going to look in this article.

Toggling the disabled state of the element

Instead of disabling the click handler or removing it depending on the disabled variant, use the disabled HTML attribute which gets toggled based on the variant.

<button onclick="clickHandler()" disabled={variant === 'disabled'}>
  Hello world
</button>

Here, if the variant prop passed is disabled then the disabled attribute will be set to true, else false is passed to disabled and the button won't be disabled.
HTML's disabled Boolean attribute, which will communicate a form control as semantically being disabled, change its styling to reflect its state and suppress all functionality along with disallowing the element's value from participating in form submission
The disabled attribute can be applied to other elements as well such as inputs and textarea the same was as applied to the button.

Styling the disabled state

CSS provides a pseudo-selector for selecting the disabled state of an element, :disabled. When used with * we can select the disabled state of all the elements.
Usually in a design system, we have a fixed background, foreground and border color for disabled state and the hover state of the button is disallowed. Hence, it is more convenient and non-repetitive to write the disabled styles together for all the elements in the root stylesheet. Still if there are any styles which are specific to an element, they can be specified in their own components and the common ones in the root.
Example:

/* global.css */

*:disabled {
  background: gray;
  color: #fff;
  cursor: not-allowed;
}

Improving accessibility of the disabled state

To improve the accessibility of the disabled state of the element, aria labels are of crucial importance. The aria-disabled attribute, when set to true, indicates that the element upon which it is set and all of its focusable descendants are meant to be in the disabled state. This declaration will inform people using assistive technologies, such as screen readers, that such elements are not meant to be editable or otherwise operable.

Example:

<button disabled aria-disabled="true">Hello world</button>
And in toggle-able form:
<button disabled={variant === 'disabled'} aria-disabled={variant === 'disabled'}>
  Hello world
</button>

But note that the state of being disabled applies to the element with aria-disabled="true" and all of its focusable descendants such as input, button etc… Hence, when applying aria-disabled="true" care must be taken to not apply it to containers with focusable elements as children in which you do not want disabled state.

Conclusion

These disabled attribute and pseudo-selector were launched with the initial versions of the browsers and have stayed here for a long time yet their use has decreased according to caniuse.com. These bring in more accessibility when combined with the aria labels compared to the traditional approach of using JS, pointer-events: none; or making separate .disabled classes.

If you came this long, you must have liked the post. I highly recommend you to follow to never miss learning new and unknown things in the domain of web development. You can always unfollow if you don't like it in the future.
Let's get connected on linkedin: https://www.linkedin.com/in/sahil2004/
I post such amazing content there as well.

Nesting in CSS - A better way to structure styles

Sahil Garg — Mon, 02 Oct 2023 03:30:03 +0000

CSS can be cumbersome to read. It becomes easily very difficult to figure out which is the parent and which is the child. Also, which is the immediate parent and which is the immediate styles. Hence, concept of nesting was introduced, initially in CSS pre-processors such as SASS and now in native CSS.
CSS now has a & nesting selector support built in. This provides a familiar syntax to most of the CSS pre-processors to nest the CSS selectors.

CSS Nesting selector basics

To nest CSS, it isn't necessary to use the nesting operator. It can be done without that as well.

.parent {
  /* Parent's CSS Code */
  .child {
    /* Child's code */
  }
}

This will evaluate to:

.parent {
  /* Parent's CSS Code */
}

.parent .child {
  /* Child's CSS Code */
}

But then why do we require the & nesting operator?
Well, we can also nest the pseudo-selectors and we might need to mention classes which require them to be written without the whitespace. In these situations, we are mandated to use the nesting operator. Let's see an example.

.parent {
  /* Parent's code */
  :hover {
    /* Hover state code */
  }
}

Intended functionality:

.parent {
  /* Parent's code */
}
.parent:hover {
  /* Hover state code */
}

But what we actually get:

.parent {
  /* Parent's code */
}
.parent *:hover {
  /* Hover state code which gets applied to all the child element's hover states */
}

Which is not the desired functionality.
Also note that currently (at the time of writing of this article) browsers except firefox do not support type selectors (tags) to be nested without the nesting operator.

Appending the CSS nesting operator

Nesting operator can be appended to the right as well to reverse the effect. With the & at the left side of the operator, it was giving .parent .child. But if we append it, we will get .child .parent which reverses the effect. Now here we are referring to the element with .parent class which lies inside the element with .child class.
This can be done multiple times as well. Appending the nesting operator or pre-pending the nesting operator multiple times will duplicate the selector there.
Here is an example to illustrate this:

Well, with CSS nesting operator, it is now a better choice to use it rather than repeating the classes again and again just to point to their children. Also, if you are using CSS pre-processors such as SASS (or SCSS) just due to the variables and nesting, then you should reconsider your choice as CSS has support for both nesting as well as variables.

8 ways to center a div: The most common interview question

Sahil Garg — Sat, 23 Sep 2023 07:56:19 +0000

Centering a div is now a meme on internet but still to this day it is very common among software developers that they are not familiar either with all the ways or sometimes even with one. Having a knowledge of all these ways is a great asset in your skill set and efficiency as a web developer.

The 8 ways are given below with the CSS code (and HTML code just for one) that needs to be applied to the elements. The HTML document structure for all the examples is as below:

<div class="parent">
  <div class="child">
    Hello world!
  </div>
</div>

1. Position absolute

Centers both vertically and horizontally

Position absolute brings the element out of the normal document flow. Then then we shift the top edge of the element 50% (of the document height) to the bottom and similarly the left side 50% (of the document width) to the right.

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

2. Margin auto

Centers only horizontally

If we set the width of parent element to the appropriate size, making the child element of a set width less than the parent element, we can set the margins to auto to center the div horizontally.

.parent {
  width: 100%;
}

.child {
  width: fit-content;
  margin: 0 auto; /* 0 or anything for top and bottom but auto for left and right */
}

3. Flexboxes

Centers both horizontally and vertically

If we make the parent as a flexbox. Then using justify-content: center; and align-items: center; we can center the div horizontally and vertically.

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

4. Gird and place items

Centers both horizontally and vertically

Using place-items is a short hand for both align-items and justify-items. Now using this shorthand to center the div horizontally and vertically is very easy.

.parent {
  display: grid;
  place-items: center;
}

5. Grid and place self

Centers both horizontally and vertically

Instead of centering all the elements in a div, we can center individual items as well. This is done using place-self: center;. This is a short hand for justify-self: center; and align-self: center;. You can use either one of them instead of place-items if you want to center in just a single direction.

.parent {
  display: grid;
}

.child {
  place-self: center;
}

6. Margin auto with a grid

Centers both horizontally and vertically

We can use margin: auto; along with grid as well to center the div.

.parent {
  display: grid;
}

.child {
  margin: auto;
}

7. Margin auto with a flexbox

Center both horizontally and vertically

We can use margin: auto; along with flexboxes as well to center the div.

.parent {
  display: flex;
}

.child {
  margin: auto;
}

8. Using

Centers horizontally only

HTML hasn’t faded away and there exists this method of centering the elements <center> tag wrapped around the child element.

Unlike other methods, for this we will need to modify the HTML and not the CSS.

<div class="parent">
  <center>
    <div class="child">
      Hello world!
    </div>
  </center>
</div>

Example of all the methods

To test out all the methods, here is a collective pen made just for this.

Conclusion

Centering a div is a thing we need to do a lot as a frontend developer. This is also a very trending meme.

Source: https://www.reddit.com/r/ProgrammerHumor/comments/95z1xn/if_you_can_successfully_center_a_div_you_can/

So, save this article so that you can refer back to it whenever you need to center a div.

Let’s get connected on linkedin: https://www.linkedin.com/in/sahil2004/
I post such amazing content there as well.

New way to create modals using HTML only

Sahil Garg — Wed, 20 Sep 2023 15:43:11 +0000

As HTML continues to evolve, the most used modal which were earlier implemented using JS have now gotten native support of HTML. It is completely game changer, as it now makes it a lot easier to implement Modals and popups without hacking the way into it.

New dialog element also has the support for all the JS methods we will need. Thus it can be completely customized. Let’s explore this more…

Browser Compatibility

Currently, it is supported in all the major browsers. Hence, we can implement immediately in our production sites.

Let’s get the basics down

A dialog/modal, is a popup that appears on a button click. To create it, we have the HTML tag. But there is a difference between a dialog and a modal. Dialog is just a simple popup with content that takes up space on the page.

<dialog open>
  <p>Greetings, one and all!</p>
  <form method="dialog">
    <button>OK</button>
  </form>
</dialog>

This shows a dialog box.

The open attribute displays the dialog box. Without it, there would be nothing on the screen. This however isn’t a modal but a simple dialog box and doesn’t take the priority over screen.

Dual nature of Dialog

The new dialog in HTML shows dual nature based on how you use it. It can work as a modal, appearing on top of everything and in the center of the page. It can also work as a normal box appearing at the place it is opened at.

To control this functionality, dialog element has different methods to execute its different functionalities. To display it as a dialog we have dialog.show() and to show it as a modal we have dialog.showModal().

As long as the dialog is open as a modal, all the other UI components become inert. The focus shifts to modal and when pressing tabs, the cursor rotates within the different HTML elements itself.

Designing the modal

When the modal opens, we mostly need to set the background of the modal to make user focus on the modal more than the rest of content. Usually we set it to a blurry black. This can now easily be done using ::backdrop pseudo-selector.

Closing the modal or dialog:

To close the modal, we have 4 methods — escape key, clicking an element with formmethod="dialog" set inside the form, form’s method="dialog" is set, or dialog.close().

Both the functionalities of the dialog element, as a modal and as a dialog is aptly displayed in the following example:

It is recommended, that you run this pen and tinker around and tweak the code to completely understand the dialog element.

Additional Details

The dialog doesn’t make the elements in the background inert. It can be closed by a button in the body as well. This functionality is displayed in the pen.
Dialog doesn’t need a tabindex. It means that tabindex property must not be applied to dialog.
When the dialog opens, if it contains any element which can be focused, the first one gets autofocused if not stated otherwise or autofocus is not used with any other element.

Conclusion

Thus the new dialog element is a good addition to the HTML. It decreases the code required to implement the modals using JavaScript and also provides more accessibility to the element which is most common in today’s websites and apps.

Let’s get connected on linkedin: https://www.linkedin.com/in/sahil2004/
I post such amazing content there as well.

Why you should use Vue.js

Sahil Garg — Mon, 11 Jan 2021 12:17:11 +0000

You might have heard about vue.js. People will recommend you to use vue.js to simplify single page application coding. So, how does it actually simplify it?

How does it actually simplify it

It simplifies it by dividing different parts of app into what we call components. These components have different code; and hence are stored in separate files for compartmentalization of code. Why have all the components in a single HTML file when we can have it in different files. Now what Vue or any other JS framework will do under the hood is it will converge all the components into a single file based on what you need. If you need Login page then you can insert a login page. Then after the user has logged in, you can remove the login page and instead of moving to another page it remains on the same page and just remove the component and updates it with a new component.

Computation within a component

Now you'll ask that why do we need a JS framework to do that because JS will take a lot more time to render than to simply request a new HTML page.
Here comes the computations that you can do under the hood in the component. You can make dynamic pages. Whenever the user has submitted a form then you can push the new content or remove the previous content of the page without reloading the whole page. Also, you can define several functions that can be performed on the data entered by the user.

The wonders of state management

Now, you will ask that we can add onsubmit function and we can make a function in normal JS. Then why should we use Vue.js. Here comes the state management.
All components have a state. By state what we mean is the state of an element at that current time. For example: an empty input field, user has pressed submitted button, now on submit we will update the database at the server and on the client side. Over here you can save the data at the place of one component and use that anywhere in your app, in any component. This will lead to update of the data in every component's HTML without reloading the whole page.

Now this will lead to a simpler codebase in the long run if you have to scale the app. Else it will lead to a very long JS file that will be so difficult to understand that after a year you yourself will not understand what you have written. This is from my own experience. I made a single page application that had so many functions that even after naming the functions properly, after a month only I was unable to understand the code myself. And ended up leaving it.

At all, devs love Vue for several reasons. Concluding the discussion, I want to provide you with four key strengths of Vue.js and its community:

An easy learning curve with perfect guides for beginners. It’s enough to know a bit of JavaScript and HTML to create your own application with Vue.
Great flexibility which facilitates interaction with different libraries and suits different strategies, such as the development of PWAs.
Optimal performance that is available thanks to the minimalism of the tool. Actually, Vue.js is even smaller than 20 KB.

Houdini

Sahil Garg — Sun, 20 Dec 2020 17:17:51 +0000

Introduction

Houdini is a set of low-level APIs that exposes parts of the CSS engine. Hence, giving developers the power to extend CSS by hooking into the styling and layout process of a browser’s rendering engine. Houdini is a group of APIs that give developers direct access to the CSS Object Model (CSSOM), enabling developers to write code the browser can parse as CSS, thereby creating new CSS features without waiting for them to be implemented natively in browsers. Also, it takes quite long for new CSS features to come to the browsers. Houdini will help bring them faster.
JavaScript-based polyfills can be used as a substitute for the lack of browser support in order to use new CSS features before they’re officially implemented. For example, scrollsnap-polyfill is one of several polyfills that can be used to fix browser support inconsistencies for the CSS Scroll Snap specification.

Advantages

Houdini enables faster parse times than using JavaScript style for style changes. Houdini's CSS Typed Object Model is a CSS Object Model with types and methods, exposing values as JavaScript objects making for more intuitive CSS manipulation than previous string based HTMLElement.style manipulations.

Disadvantages

This would look great but there are a few things to keep in mind before using it. Those are:

With Houdini you could invent your own masonry, grid, or regions implementation, but doing so is not necessarily the best idea. The CSS Working group does a lot of work to ensure every feature is performant, handles all edge cases, and considers security, privacy, and accessibility. But as you extend CSS with Houdini, make sure to keep these considerations in mind.
JavaScript Polyfill solutions run only after the initial render cycle has been completed, i.e. when both DOM and CSSOM have been created and the document has finished loading. After Polyfill makes changes to styles in the DOM, it causes the render process to run again and the whole page re-renders. Negative performance impact gets even more apparent if they rely on the user interactions like scroll events.

Learn it

To learn about it in a simpler manner, a great article would be: https://css-tricks.com/css-houdini-could-change-the-way-we-write-and-manage-css/#modularity

To learn it in a difficult manner

Learn more about the specifications of Houdini and worklets here:
https://developers.google.com/web/updates/2016/05/houdini#the_specifications
To explore the various APIs that Houdini provides see here: https://developer.mozilla.org/en-US/docs/Web/Houdini#The_Houdini_APIs

A recommended watch

Why Rust is good for Web Assembly and path to learning it...

Sahil Garg — Tue, 10 Nov 2020 09:58:41 +0000

Introduction to Web Assembly

WebAssembly is a new type of code that can be run in modern web browsers — it is a low-level assembly-like language with a compact binary format that runs with near-native performance and provides languages such as C/C++, C#, and Rust with a compilation target so that they can run on the web. It is also designed to run alongside JavaScript, allowing both to work together.
Also, it can be understood in a 2.15-minute video from Fireship:

Support

WebAssembly 1.0 has shipped in 4 major browser engines: Chrome, Firefox, Safari, legacy Edge. Source: https://webassembly.org/

Web assembly = wasm

Why Rust is best for Web Assembly

Many different languages can be compiled down to WebAssembly, including C# and Go, so why not use them instead of Rust? While the use of a programming language is always influenced by personal preference, there are many reasons why Rust is the best tool for the job. Because these languages have large runtimes that must be included in the WebAssembly binary, they're only really practical for greenfield projects (i.e., they're practical only as JavaScript replacements). This Go wiki article on Wasm says the smallest achievable binary size uncompressed is around 2MB; this mirrors what I've seen. For Rust, which ships with an extremely minimal runtime (basically just an allocator), the "hello, world" example compiles to 1.6KB on my machine without any post-compile size optimizations (which could bring it down further).

This is not to say that the future of Go or C# in the browser is bleak—I'm quite excited about what might come from those efforts. But the reality is that these technologies will probably always be best for greenfield projects.

C and C++ ship with very small runtimes, just like Rust, and thus can be practical for embedding inside existing apps and libraries. However, Rust makes it really easy to create WebAssembly binaries that have fairly idiomatic JavaScript interfaces using the tools we'll explore in the other articles in this series, while the process in C and C++ is much more manual. The tooling in Rust is absolutely fantastic, and I think it makes the entire experience much more enjoyable. Rust is also a much more memory-safe language meaning that a whole class of bugs that are common in C and C++ are impossible to have in safe Rust. If you're used to memory-safe languages like JavaScript, Java, and C#, (and even if you're not), you probably want to go with Rust.
You can read more about the benefits of using Rust with Web Assembly at: Why using WebAssembly and Rust together improves Node.js performance
Supporting my argument: Microsoft: Why we used programming language Rust over Go for WebAssembly on Kubernetes app

How to learn Rust?

Learning Rust isn't a simple task but following a good path and a good guide will make it easier. First of all, you need to know the syntax. For this, I recommend this Rust Crash Course by Traversy Media on youtube:
Then after this, the next thing to do is to make a real-world project, not a practice script. Let's get into some of the things that can be made using this. I made many scripts in Rust to practice it. Like:

Sahil2004 / shutdown

A simple application created for shutting down the windows 10 OS through the start menu without using the mouse.

Shutdown

Description:

This was created by me as I am sometimes very lazy in shutting down the PC and feel lazy in doing those clicks to first open the start menu then clicking the power icon on the side and then clicking shutdown button to shutdown the PC. I made this script to simplify this task and then just click the start key on the keyboard and then start typing 'shutdown' as typing shutdown is much easier than those boring clicks. Hence, when the shutdown.exe appears on the side startmenu, just press 'enter' and its done.

How to compile

Compiling is easier, you have to open the directory and then in the cmd type

$ cargo build --release

And it will compile it for you.

Contribution

If you want to contribute to it, just do it man. Open the issue and put in the discription that you want to work…

View on GitHub

Sahil2004 / Mount-drive-in-linux

Mount your external drive using nautilus and automate it with this script.

Mount-drive-in-linux

I tried mounting my HDD automatically with fstab but it is not giving me appropriate permissions. I tried everything. But then I found that if I mount using nautilus in gnome I was getting appropriate permissions. But here the problem was that I wasn't able to find automatic mount. But after researching I found that by using gio mount command. So, that is what I wrote a script for in rust. Now putting it in startup scripts, it will mount my HDD automatically on startup.

Index

Technologies

Project is created with:

rustc 1.45.0
cargo 1.45.0

Setup

First of all open the src/main.rs and change the drive name al line 8 to what you wish to mount. To run the project you need to install rust version 1.45.0. For reference you can see Technologies. Then run:

$ git clone https://github.com/Sahil2004/Mount-drive-in-linux.git
$ cd Mount-drive-in-linux
$

…

View on GitHub

Sahil2004 / delete-npm-error-logs

This helps to clear out all the logs left behind due to errors when installing a npm package.

Delete-npm-error-logs

This helps to clear out all the logs left behind due to errors when installing a npm package. I made this because I usually fix the errors in a single go before switching off my pc and do not want to keep extra stuff on the storage.

Contribution

You may contribute as you may wish.

View on GitHub

Also as they are open-sourced you can see their code and learn and then make something like this that solves some kind of problem. You can even make a module for python project and then import it into python with rust-cpython; a good article will be: https://developers.redhat.com/blog/2017/11/16/speed-python-using-rust/. This will give you somewhat good practice of Rust.

Getting into Web Assembly

First, you will need to look at some background concepts: https://rustwasm.github.io/docs/book/background-and-concepts.html. Now the reference will be this book: https://rustwasm.github.io/docs/book/. This is a great way of learning Web Assembly.

Conclusion

Web Assembly and Rust together can do wonders. Learning this combo can make you a better Web Developer. Web Assembly with Rust is something which only a few know now but the future is this.

Figma for VS Code: Now get styles listing and copying CSS & listing layer tree and a preview of top-level layers

Sahil Garg — Sat, 31 Oct 2020 14:21:05 +0000

Introduction 💌

Many people use Figma for designing and need to copy the styles to VS Code from there or just see the styles in VS Code to code their websites like the way they designed it. Hence, it's a great pain to work with both on a single monitor. But VS Code being the most powerful code editors, it can handle it all.

Solution 😉

There's an extension in VS Code: Figma by Kasper Mikiewicz. This is the goto solution for this. I have been using it for the past few days and it is damn amazing.

Installation ✔

First of all, there are some requirements, let's fulfill them. By the way, the same you will find on the extension page in VS Code, but these are more elaborate.

Requirements

Figma Personal Access Token
Team ID

If you don't know how to get them here's how:

Go to Account Settings in Figma.
Click on Create a new personal access token.
Name your token and copy it.
In VS Code open the commands by using Ctrl + Shift + P menu and execute Figma: Connect.
Paste your Figma token and press enter.

Team

You must be a part of any team to be able to browse and select files or you can create your own team. To get your team id:

Go to Figma and click on any team in the sidebar
Copy id from URL: https://www.figma.com/files/team/ID/example. But for this, you will have to open it in the browser.
In VS Code open the commands menu by using Ctrl + Shift + P and execute Figma: Add Team command
Type in your team name
Paste team id and press enter
You're now able to select any team file using Figma: Select File from the command palette.

Limitations 😢

Browsing files works only for teams. You can't browse your drafts. But they say that in the future there will be support for adding single files by id.
Also, it is in the preview version. With the release version of 0.1.0 at the time of writing this article.

Conclusion

This extension has helped me save my time and will definitely help you integrate your Figma designs into code with great ease and saving a lot of time.

Design Systems now have CODE with the new XD extension for VS Code

Sahil Garg — Thu, 22 Oct 2020 09:16:02 +0000

Introduction

There's a new Adobe XD update here. So, what Adobe has brought us is a new extension for VS Code and a new file format called DSP (Design System Packages). This will bring designers and developers close and make them work together to build functional design systems.

There's a teaser video that will sum it all up.

This teaser video was mainly for the VS Code extension.

DSP

It is a new open format standard for building design systems in an effort to normalize the way we use design systems. Most of the design tools expose design systems in their own way which is not very universal across organizations.

When a design system is normalized into a formal like DSP it helps companies share their design systems in a way that developers can take advantage of it. It is a bit similar to how PDF was made a standard for sharing pages and content.

DSP is a new open-format folder-structure created to help teams share design system information across tools. From designers to developers tools that are compatible with this format can exchange
design data and stay in sync.
DSP is a collaborative effort and open-sourced so it's not owned by Adobe although they were a huge player in this initiative.

Extension for VS Code

This extension allows you to create and consume DPSs visually with code-completion features. If you import from Creative Cloud libraries with colors and character styles and components new DSPs can be created in seconds.

Hence, coming to how this extension works is that designers are creating their own sticker sheets and design system libraries in XD as they normally would and after publishing the library the link can be shared inside VS Code to get a head start in the design system package. This creates colors, character styles, and component tokens. The extension will then create a skeleton for our DSP but the developer will have to create the code snippets that will generate the code.

Documentation can be added with each component including images, gifs, and other media like iframes to actually coded components.

Where to learn?

You can learn more at https://letsxd.com/vscode with their videos on "Getting Started with Design Tokens", "Consuming a Design System Package (DSP) in VS Code", "Design System Packages (DSP) Importing Assets from Libraries".
You can also get some publicly available DSPs & tools to get started immediately.

Team behind it

The team behind this was headed by Demian Borba who is XD's product manager focused on developer workflows.

How to uninstall and reinstall play store without root

Sahil Garg — Fri, 16 Oct 2020 08:16:47 +0000

I uninstalled Google play store from my phone as I a privacy respecting person and installed Aurora Store. But now as I have to give buy a new phone and sell the old one, I thought of reinstalling Google services, especially the play store. Then I used ADB for installing it but faced an error. But then I found a command for ADB that installed it without giving me any error. I was relieved a lot.
Now, I thought that I should share it with the community as someone out there might also be facing the same issue.

Installing the tool

Now for uninstalling the apps without root you will need to download a tool that is named ADB whose full form is "Android Debugging Tool".

Setup Computer with ADB Platform Tools

Windows Install:

With Chocolatey: choco install ADB
Download the zip, extract it in a folder, then Open Windows Explorer and browse to where you extracted the contents of this ZIP file. Then open up a Command Prompt from the same directory as this ADB binary. This can be done by holding Shift and Right-clicking within the folder then click the “open command prompt here” option. (Some Windows 10 users may see “PowerShell” instead of “command prompt”.) Linux Install with Terminal: sudo apt-get install android-tools-adb android-tools-fastboot MacOS Install with Homebrew:
Homebrew install - ruby -e “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
ADB Homebrew Install - brew cask install android-platform-tools

Setup Phone for ADB Debugging

Open Settings, and select “About”.
Tap on “Build number” seven times.
Go back, and select “Developer options”.
Scroll down, and check the “Android debugging” or “USB debugging” entry under “Debugging”.
Plug your device into your computer.
On the computer, open up a terminal/command prompt and type:

$ adb devices

A dialog should show on your device, asking you to allow USB debugging. Check “always allow”, and choose “OK”.
Note: If you don’t see this prompt on your device change the USB connection to MTP or File Transfer on the device

Uninstalling Google play store

In the terminal/command prompt type the command:

adb shell pm uninstall --user 0 com.android.vending

In this command we are basically uninstalling the play store for the User 0 that is the default user only. Without root it can't be uninstalled completely from the phone. This doesn't disable software updates from your OEM/Phone manufacturer. 'com.android.vending' is the name of the package the play store has. I know it is a very confusing name. That is the reason I asked the name of the package on reddit. Now, we need a software for installing apps.

Other FOSS alternatives of Google Playstore

There are 2 best FOSS alternatives of play store.

F-Droid: This is an app store that includes those apps only which come in the category of FOSS and hence there is an option for individual app where there repository is written.
Aurora store: It uses Google play store API to let you install apps listed on Google play store. You can download it from its website or from F-Droid. In Aurora Store you can download apps without signing in to Google hence Anonymously or you have an option to signin to your Google account.

Installing FOSS alternatives

You have to download their apk from their websites and then just put them on your phone storage and then just click on the apk in the phone and Install it by clicking the install button. But you may need to enable the option in the settings that says 'install apps from Unknown sources', this setting will be available in the developer options.

Reinstalling Google Playstore

If you want to reinstall playstore. Plug your device into your computer. On the computer, open up a terminal/command prompt and type:

$ adb devices

Now, in the same command prompt type:

$ adb shell cmd package install-existing com.android.vending

Now you should get the line in the command prompt stating: "Package com.android.vending installed for user: 0". If this is shown, play store has been downloaded successfully. Now you can disconnect your phone from the computer.

Journey of my first CSS art

Sahil Garg — Tue, 04 Aug 2020 15:04:37 +0000

Introduction

Today I made my first CSS artwork. It was a coffee mug. And thinking of sharing this with all, I am writing this post. I consider it a journey because it is very different from writing CSS for styling websites.

I styled a lot of websites using CSS but never made a CSS artwork. Whenever I saw any artwork on Twitter shared by the dev community I thought about the difficulty in making it. I thought that there might be a lot of work went into it and a lot of CSS knowledge that I still don't have. But today I found an article on dev.to that helped me in starting and making my first CSS artwork. It contains the link to some important websites that you will need.

I saw many artwork codepens and the second thing that my eyes saw was the length of code. This made me upset.

Starting with the artwork

But today I just made a folder in my documents folder and opened VS Code and made two files: index.html and style.scss.
Yea, I use SCSS and not CSS as SCSS makes writing CSS a lot easier. But then when I was going to start typing HTML, I started wondering about the thing that I was going to create.

Then I opened FIGMA, design tool that I use. And made a new file. Then I started designing the coffee mug that I saw in the above mentioned article. I didn't copy the code or referred to the code, but instead used my prior CSS knowledge. I made a design with element hierarchy.

Then I made the div for the cup, that I took as the base for making the art. And began styling it. It took me some time to style the cup but subsequent elements took no time. The artwork was ready in an hour's time.

Feelings After completing it

I was feeling great after completing it. I got my lost confidence, that was really needed. I posted it on codepen and then shared it on Twitter as well with the community that appreciates it.

Conculsion

If you have even a little knowledge about CSS, then just start making it. It will teach a lot of things during the journey. The best experience can be gained by doing it and not reading other's experience. Take this post as a motivation for you to start making your own CSS artwork.