Skip to content

Instantly share code, notes, and snippets.

View asifvora's full-sized avatar
🇮🇳
Life is Journey Not a Destination.

Asif Vora asifvora

🇮🇳
Life is Journey Not a Destination.
View GitHub Profile
@asifvora
asifvora / elementaryos.md
Created September 17, 2020 10:18 — forked from isneezy/elementaryos.md
elementaryOS | Things To Do After Installing elementary OS Hera(5.1)

First Things First

  • Enable PPA

     sudo apt update
     sudo apt install software-properties-common
  • Install apt-fast

client ID : 645687027098-rmibrne0gsdg0vpv7fo3fpdbkjoar0us.apps.googleusercontent.com
client secret : kEoPZ7XemhQEtvBaXKtgFVSW
@asifvora
asifvora / recursion.js
Created March 15, 2019 05:54
Recursion JavaScript
const nest = (items, id = null, link = "parent_id") =>
items
.filter(item => item[link] === id)
.map(item => ({ ...item, children: nest(items, item.id) }))
const comments = [
{ id: 1, parent_id: null, text: "First reply to post." },
{ id: 2, parent_id: 1, text: "First reply to comment #1." },
{ id: 3, parent_id: 1, text: "Second reply to comment #1." },
{ id: 4, parent_id: 3, text: "First reply to comment #3." },
@asifvora
asifvora / masks.js
Created March 15, 2019 05:44
Create a function that masks a string of characters with # except for the last four (4) characters.
const mask = (str, maskChar = "#") => str.slice(-4).padStart(str.length, maskChar);
mask("123456789"); // "#####6789"
@asifvora
asifvora / donut_spinner.html
Created March 15, 2019 05:31
Donut spinner : Creates a donut spinner that can be used to indicate the loading of content.
<style>
@keyframes donut-spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.donut {
@asifvora
asifvora / custom_text_selection.html
Created March 15, 2019 05:23
Custom text selection changes the styling of text selection.
<style>
::selection {
background: aquamarine;
color: black;
}
.custom-text-selection::selection {
background: deeppink;
color: white;
}
</style>
@asifvora
asifvora / counter.html
Created March 15, 2019 05:21
Counters are, in essence, variables maintained by CSS whose values may be incremented by CSS rules to track how many times they're used.
<style>
ul {
counter-reset: counter;
}
li::before {
counter-increment: counter;
content: counters(counter, '.') ' ';
}
</style>
<ul>
@asifvora
asifvora / circle.html
Created March 15, 2019 05:19
Creates a circle shape with pure CSS.
<style>
.circle {
border-radius: 50%;
width: 2rem;
height: 2rem;
background: #333;
}
</style>
<div class="circle"></div>
@asifvora
asifvora / toggle_switch.html
Created March 15, 2019 05:14
Creates a toggle switch with CSS only.
<style>
.switch {
position: relative;
display: inline-block;
width: 40px;
height: 20px;
background-color: rgba(0, 0, 0, 0.25);
border-radius: 20px;
transition: all 0.3s;
}