Blogging ✔ is hard. Like really 💎! So is learning to code the right way. Worse if you are a perfectionist. You lose many chasing that ghost. Go nowhere you want to. The Backwards Law is here to help.
The HTML and CSS Here is the HTML <div id="hello" class="container1"></div> <div id="hello" class="container2"></div> We have two <div> elements with different classes applied to them. But they both share the same id hello The CSS: .container1 { ...
Learnt 1 JS Feature .indexOf() Syntax: arr.indexOf(searchElement[, fromIndex]) The indexOf() method returns the first index at which a given element can be found in the array, or -1 if it is not present. searchElement Element to locate in the ar...
Learnt 1 JS Feature Built 1 JS App JS Features .filter() .includes() .filter() Array.prototype.filter Syntax: let newArray = arr.filter(callback(element[, index, [array]])[, thisArg]) . Parameters . callback Function is a predicate, to test each ...
Learnt 1 CSS Feature Flexbox align-items: flex-start flex-end` center baseline stretch https://codepen.io/samir-patnaik/pen/GRpPzLd
Learnt 2 CSS Feature Flexbox flex-direction flex-wrap 1. flex-direction row row-reverse column column-reverse https://codepen.io/samir-patnaik/pen/RwWEWJO 2. flex-wrap nowrap wrap wrap-reverse
Learnt 5 CSS Features Learnt 1 JS Feature Built 1 UI Element CSS Features calc() attr() visibility transform [property]: inherit JS Features Element.classList.contains('on'); Element.classList.add('on'); Element.classList.remove('on');...
Learnt 1 JS Feature Built 1 CSS + JS UI Element Javascript WindowOrWorkerGlobalScope.setTimeout() window.setTimeout(() => { var tooltip = document.querySelector('[class="tooltip open"]'); if (tooltip !== null) { tooltip.classList.remo...
Learnt 5 JS Features Built 1 UI Element 1. JS Features - Event and DOMTokenList Event.preventDefault() Element.hasAttribute() Element.getAttribute() Element.classList.add() Element.classList.remove() 2. UI Element - Vanilla JS Tooltip Moda...
Today Stats Learnt 5 CSS features. Learnt 3 HTML features Built 1 UI Element HTML Attributes [contenteditable] [spellcheck="false"] Tag <textarea> CSS Pseudoclass input::placeholder Pseudoselector input:focus::placeholder Property ...