Web Developer
Sunday, July 10, 2022
Angular Trips
Monday, July 4, 2022
React Best practices
React Best practices
https://devsmitra.medium.com/react-best-practices-and-patterns-to-reduce-code-3170f1913b26
https://devsmitra.medium.com/react-best-practices-and-patterns-to-reduce-code-part-2-rahul-sharma-devsmitra-9186115880b5
https://devsmitra.medium.com/react-best-practices-and-patterns-to-reduce-code-part-3-543b8cef9954
3 React Component Design Patterns You Should Know About
20 GitHub Repositories to Become a React Master
Javascript cheat sheet
Typescript cheat sheet
https://devsmitra.medium.com/13-typescript-utility-a-cheat-sheet-for-developer-9dfd23cb1bbc
Javascript short functions
https://devsmitra.medium.com/javascript-short-reusable-functions-everyone-will-always-need-10b15f3fa8ca
Javascript quick functions
https://devsmitra.github.io/javascript-quick-functions/#regular-function
Wednesday, February 16, 2022
Javascript one liners
Shuffle Array
While using algorithms that require some degree of randomization, you will often find shuffling arrays quite a necessary skill. The following snippet shuffles an array in place with O(n log n) complexity.const shuffleArray = (arr) => arr.sort(() => Math.random() - 0.5);// Testing
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
console.log(shuffleArray(arr));
Copy to Clipboard
In web apps, copy to clipboard is rapidly rising in popularity due to its convenience for the user.const copyToClipboard = (text) =>
navigator.clipboard?.writeText && navigator.clipboard.writeText(text);// Testing
copyToClipboard("Hello World!");
Monday, July 5, 2021
Javascript tips and tricks
Tips & Tricks
1. Abonden the bootstrap
https://betterprogramming.pub/3-reasons-to-abandon-bootstrap-in-2021-aa71bbc1af14
1. Conditionally Add Properties to Object
const condition = true;
const person = {
id: 1,
name: 'John Doe',
...(condition && { age: 16 }),
};
4. The Keyword in
const user = {
name: "Mehdi",
age: 19,
}
if("age" in user){
console.log("Age is available in the user object.");
}
//Age is available in the user object.
"name" in user; //true
"text" in user; //false
if("text" in user){
console.log("text is available");
}
//undefined.
5. Nullish Coalescing, ?? Operator
const foo = null ?? 'Hello';
console.log(foo); // returns 'Hello'
const bar = 'Not null' ?? 'Hello';
console.log(bar); // returns 'Not null'
const baz = 0 ?? 'Hello';
console.log(baz); // returns 0
with OR
const cannotBeZero = 0 || 5;
console.log(cannotBeZero); // returns 5
const canBeZero = 0 ?? 5;
console.log(canBeZero); // returns 0
9. Check Falsy Values in an Array
const myArray = [null, false, 'Hello', undefined, 0];
// filter falsy values
const filtered = myArray.filter(Boolean);
console.log(filtered); // returns ['Hello']
// check if at least one value is truthy
const anyTruthy = myArray.some(Boolean);
console.log(anyTruthy); // returns true
// check if all values are truthy
const allTruthy = myArray.every(Boolean);
console.log(allTruthy); // returns false
5. Dynamic properties
const dynamic = 'name'
const person = {
age: 33,
[dynamic]: 'John'
}
const dynamic = 'name'
const person = {
age: 33,
[dynamic]: 'John',
[`interpolated-${dynamic}`]: true
}
const dynamic = 'name'
let person = {
age: 33,
}
person[dynamic] = 'John'
8. Unique array values
const numbers = [1, 2, 2, 3, 3, 4, 5, 5, 6, 6, 7, 7, 7]
const unique_numbers = [...new Set(numbers)]
console.log(unique_numbers); // [1, 2, 3, 4, 5, 6, 7]
CSS Tricks
CSS Tricks
Grids by example
https://gridbyexample.com/examples/
CSS Grid
https://thingsym.github.io/flexbox-grid-mixins/#Grid-System-Example
External links
a[href*="//"]:not([href*="yourwebsite.com"]) {
/* Apply style here */
}
6. Styling optional and required input elements
input:optional {
border: 1px solid black;
}
input:required {
border: 1px dashed red;
}
7. Comma-separated list with css
ul > li:not(:last-child):after {
content: “, “;
}
CSS Tricks including the dynamic vars
https://betterprogramming.pub/22-css-tricks-that-can-make-you-a-layout-ninja-452847fba639