Web Developer

Angular Trips

2022-07-10T05:05:00.002-07:00

6 Ways to Communicate Between Components in Angular

https://javascript.plainenglish.io/angular-component-communication-81e5e02c6cbe

NgRx

--------

https://ngrx.io/guide/store

React Best practices

2022-07-04T20:08:00.008-07:00

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

https://medium.com/stackanatomy/3-react-component-design-patterns-you-should-know-about-3f1f48046da4

20 GitHub Repositories to Become a React Master

https://medium.com/@martinageradams/20-github-repositories-to-become-a-react-master-%EF%B8%8F-b91fb3bdd6c8

Javascript cheat sheet

2022-07-04T10:24:00.014-07:00

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

Javascript one liners

2022-02-16T23:57:00.002-08:00

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!");

Javascript tips and tricks

2021-07-05T19:24:00.006-07:00

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

2021-07-05T19:20:00.004-07:00

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

Flexbox

2019-10-13T19:55:00.002-07:00

https://www.freecodecamp.org/news/understanding-flexbox-everything-you-need-to-know-b4013d4dc9af/

https://www.freecodecamp.org/news/how-to-create-an-interactive-flex-layout-designer-in-javascript-54863b837b5/

Dockerize nodejs application

2018-09-07T00:42:00.003-07:00

https://buddy.works/guides/how-dockerize-node-application

Reactjs free ebook

2018-09-06T20:18:00.002-07:00

https://books.goalkicker.com/ReactJSBook/

React Redux Typescript Guide

2018-09-05T08:05:00.001-07:00

https://github.com/piotrwitek/react-redux-typescript-guide

https://github.com/Microsoft/TypeScript-React-Starter#typescript-react-starter

How to create an http server with Express in Node.js

2018-08-27T19:26:00.002-07:00

https://ourcodeworld.com/articles/read/261/how-to-create-an-http-server-with-express-in-node-js

HOW TO MAKE A WEBSITE

2018-04-27T04:58:00.003-07:00

https://websitesetup.org/

PHP the right way

2018-04-27T03:02:00.000-07:00

http://www.phptherightway.com/

ES6 Overview in 350 Bullet Points

2018-03-05T00:50:00.002-08:00

https://ponyfoo.com/articles/es6

Introduction to Gulp

2018-02-07T17:46:00.002-08:00

https://www.sitepoint.com/introduction-gulp-js/

10 Reasons Why You Should Use AngularJS

2017-04-30T03:29:00.002-07:00

https://www.sitepoint.com/10-reasons-use-angularjs/

React Js Learning

2017-03-15T07:59:00.003-07:00

http://hysterical-amusement.surge.sh/

Webpack bundling

2017-02-28T18:59:00.002-08:00

https://www.sitepoint.com/beginners-guide-to-webpack-2-and-module-bundling/

Introduction to Gulp

2017-02-28T09:10:00.002-08:00

https://www.sitepoint.com/introduction-gulp-js/

Removing User Interface Complexity, or Why React is Awesome

2017-01-24T18:31:00.000-08:00

http://jlongster.com/Removing-User-Interface-Complexity,-or-Why-React-is-Awesome

A deep dive into Angular's scope

2017-01-24T07:04:00.000-08:00

http://jonathancreamer.com/working-with-all-the-different-kinds-of-scopes-in-angular/

Jasmin Unit testing

2017-01-19T07:03:00.001-08:00

https://code.ciphertrick.com/2015/08/03/angularjs-unit-testing-tutorial-karma-jasmine/

Turn on SSL certificate on localhost

2016-12-01T22:48:00.003-08:00

https://www.digitalocean.com/community/tutorials/how-to-create-a-ssl-certificate-on-apache-for-ubuntu-14-04

Free PHP Projects for Students

2016-11-06T06:17:00.002-08:00

http://www.phptpoint.com/projects

Measuring PHP Page Load Time

2016-10-27T10:03:00.003-07:00

$time = microtime();
$time = explode(' ', $time);
$time = $time[1] + $time[0];
$start = $time;

$time = microtime();
$time = explode(' ', $time);
$time = $time[1] + $time[0];
$finish = $time;
$total_time = round(($finish - $start), 4);
echo 'Page generated in '.$total_time.' seconds.';

Ref: http://www.coding101.in/2016/10/measuring-php-page-load-time.html