Backend JS - atabegruslan/Notes GitHub Wiki
https://www.youtube.com/watch?v=DqGwxR_0d1M&list=PL0zVEGEvSaeHBZFy6Q8731rcwk0Gtuxub&index=5
-
.__proto__
property points to the object that the current object actually will use when doing lookups on the prototype. -
.prototype
only exists on functions, in case you want to use those objects as constructors passed to thenew
keyword.
So with prototype-based languages, it's just: object -> object -> object.
There are no classes and instance objects. Just objects.
So Prototype inheritance/chaining can be better described as objects delegating its missing functionalities to other objects.
Inheritance, eg: Date
objects inherit from Date.prototype
From ES6, JavaScript introduced the class
keyword. But it's essentially a syntactic sugar over the prototype-based system.
Class vs Prototype
In short: prototype is eaasier for the computer under the hood.
Proper comparison: https://softwareengineering.stackexchange.com/questions/110936/what-are-the-advantages-of-prototype-based-oop-over-class-based-oop
https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object_prototypes
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply
- https://www.codementor.io/@niladrisekhardutta/how-to-call-apply-and-bind-in-javascript-8i1jca6jp
- https://stackoverflow.com/questions/15455009/javascript-call-apply-vs-bind
- https://www.youtube.com/watch?v=c0mLRpw-9rI&list=PL7pEw9n3GkoW5bYOhVAtmJlak3ZK7SaDf&index=6
- https://www.freecodecamp.org/news/javascript-map-reduce-and-filter-explained-with-examples/
- https://www.youtube.com/watch?v=rRgD1yVwIvE
-
Object.assign({}, ['a','b','c']); // {0:"a", 1:"b", 2:"c"}
-
ES6 spread syntax:
{ ...['a', 'b', 'c'] }
-
Array's map function resp.data.data is the object:
let listOfObjects = Object.keys(resp.data.data).map((key) => {
return resp.data.data[key]
})
- Array's reduce function: https://dev.to/afewminutesofcode/how-to-convert-an-array-into-an-object-in-javascript-25a4
https://stackoverflow.com/questions/951021/what-is-the-javascript-version-of-sleep/39914235#39914235
function sleep(ms)
{
return new Promise(resolve => setTimeout(resolve, ms));
}
await sleep(1000);
var thereYet = false;
var intervalName = setInterval(function() {
if ( /* "there yet" condition */ )
{
thereYet = true;
}
if (thereYet)
{
clearInterval(intervalName);
}
// Do action
}, 100);
function recursive_function()
{
$.ajax({
...,
async: true,
success: function(res) {
if ( NOT DONE )
{
recursive_function();
}
else
{
// DONE
}
}
});
}
- Debouncing: Hold up for a while then act
- Throttling: Act then hold up for a while
https://redd.one/blog/debounce-vs-throttle
- Refresh, Navigate & Leave: https://gist.github.com/atabegruslan/e3547eeaf0758770ec4540fe303df681
- https://developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigationTiming/type
- How to override unload over the years: https://stackoverflow.com/questions/1119289/how-to-show-the-are-you-sure-you-want-to-navigate-away-from-this-page-when-ch/1119324#1119324
- Detect different domain: https://stackoverflow.com/questions/7162300/how-can-i-detect-when-the-user-is-leaving-my-site-not-just-going-to-a-different/7162766#7162766
- React: https://dev.to/eons/detect-page-refresh-tab-close-and-route-change-with-react-router-v5-3pd
- Remove unload event listener: https://stackoverflow.com/questions/39094138/reactjs-event-listener-beforeunload-added-but-not-removed/39094299#39094299
- https://stackoverflow.com/questions/60044205/download-response-data-as-stream-w-axios-in-react-app
- https://stackoverflow.com/questions/4545311/download-a-file-by-jquery-ajax
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays
- https://stackoverflow.com/questions/3195865/converting-byte-array-to-string-in-javascript
- https://www.youtube.com/watch?v=UYkJaW3pmj0
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DataView
https://stackoverflow.com/questions/22202766/keeping-only-certain-properties-in-a-javascript-object
https://www.w3schools.com/jsref/jsref_eval.asp
But try not to use it, it may execute malicious code.
https://thispointer.com/5-ways-to-merge-two-arrays-and-remove-duplicates-in-javascript/
https://gist.github.com/ahtcx/0cd94e62691f539160b32ecda18af3d6
const merge = (target, source) => {
for (const key of Object.keys(source))
{
if (Array.isArray(source[key]))
{
Object.assign(source[key], [...new Set(target[key].concat(source[key]))]);
}
if (source[key] instanceof Object && !Array.isArray(source[key]))
{
Object.assign(source[key], merge(target[key], source[key]));
}
}
Object.assign(target || {}, source)
return target
}
https://gist.github.com/atabegruslan/123cbba73cf97c7ce2025bdd1494f20e
- https://www.youtube.com/playlist?list=PLGnv0UtYYEZbfGp7Trh2xyGxyWaH71XyP
- https://www.youtube.com/playlist?list=PL7pEw9n3GkoW5bYOhVAtmJlak3ZK7SaDf
- https://www.w3schools.com/Js/js_history.asp
- https://www.codesdope.com/blog/article/javascript-es5-vs-es6/
- https://www.javatpoint.com/es5-vs-es6
JavaScript mostly implements the ECMAScript specification.
More info about JS vs ECMAScript: https://www.freecodecamp.org/news/whats-the-difference-between-javascript-and-ecmascript-cba48c73a2b5/
JavaScript engine: A program or interpreter that understands and executes JavaScript code.
Synonyms: JavaScript interpreter, JavaScript implementation
V8 in Chrome, SpiderMonkey in Firefox, and Chakra in Edge. Each engine is like a language module for its application, allowing it to support a certain subset of the JavaScript language.
A JavaScript engine to a browser is like language comprehension to a person
JavaScript runtime: The environment in which the JavaScript code runs and is interpreted by a JavaScript engine.The runtime provides the host objects that JavaScript can operate on and work with.
Synonyms: Host environment
JIT Compiler (eg in V8 Engine)
A compiler compiles a language to bytecode at compile-time. Then the JIT-compiler compiles bytecode to native code at runtime.
https://stackoverflow.com/questions/59807938/the-confusion-with-jit-compilation-in-v8
Transpiler (eg Babel)
A transpiler converts codes that are at similar levels of abstraction. Eg: ES6 code to ES5 code.
https://gist.github.com/atabegruslan/39db447e098e3809847498d34a6fa8ee
Not to be confused with Modules: https://www.w3schools.com/js/js_modules.asp
- BE: Node default is CJS (Common JS, like
require()
&module.exports
) - FE: ES2015 made its module system, called ESM (ES Modules, like
import
&export
) - https://www.youtube.com/watch?v=mK54Cn4ceac
- Node14+ can support ESM.
- To use ESM in Node, either have
type:module
inpackage.json
or use.jsm
extension for module files - https://stackoverflow.com/questions/43622337/using-import-fs-from-fs/43622412#43622412
- So if you use
import
in NodeJS, then obviously you'll get"Uncaught SyntaxError: Cannot use import statement outside a module"
. Hence, you'll have to:- add
type:module
inpackage.json
- use
.jsm
extension - add
type="module"
to<script type="module" src="whatever.js"></script>
- https://stackoverflow.com/questions/58211880/uncaught-syntaxerror-cannot-use-import-statement-outside-a-module-when-import/64655153#64655153
- add
- Conversely, if you get
ReferenceError: require is not defined
, then you'are obviously in ESM & you'll need to use theimport
syntax.
- To use ESM in Node, either have
Comparisons:
- CJS vs ESM: https://blog.logrocket.com/commonjs-vs-es-modules-node-js/
-
require
vsimport
: https://flexiple.com/javascript-require-vs-import/
-
- CommonJS, AMD & ES: https://medium.com/computed-comparisons/commonjs-vs-amd-vs-requirejs-vs-es6-modules-2e814b114a0b
- UMD, unpkg: https://tutorial.tips/how-to-load-any-npm-module-in-browser/
- CJS vs ESM vs AMD vs UMD: https://dev.to/iggredible/what-the-heck-are-cjs-amd-umd-and-esm-ikm (GOOD)
Other related articles:
- Importing a module's CSS: https://stackoverflow.com/questions/49518277/import-css-from-node-modules-in-webpack/49523565#49523565
- Or like
import 'bootstrap/dist/css/bootstrap.min.css';
withbootstrap
folder being located in./node_modules/bootstrap/...
- Or like
- Webpack: https://webpack.js.org/api/module-methods/
-
package.json
'sbrowser
: https://docs.npmjs.com/cli/v8/configuring-npm/package-json#browser
- https://www.youtube.com/watch?v=5IG4UmULyoA
- https://www.youtube.com/watch?v=5IG4UmULyoA
- https://www.snowpack.dev
- https://rollupjs.org
Take this example:
webpack.config.js
module.exports = {
entry: "./index.tsx",
target: "es5",
module: {
rules: [
{
test: /\.tsx$/,
use: ['babel-loader', 'ts-loader']
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
}
Loaders are pre-processors in WebPack
-
Regarding the CSS part:
- The loaders are executed from right to left.
css-loader
resolve allimports
&url(...)
.style-loader
inserts those styles into the page. - Another example: https://github.com/atabegruslan/ReactJS-Flux-Redux/blob/64d9e0f494101d9571396ddd730015beccd407d1/webpack.config.js#L48-L50
- The loaders are executed from right to left.
-
Regarding the JS part:
-
ts-loader
converts typescript to javascript -
babel-loader
: https://webpack.js.org/loaders/babel-loader- As we can see from below: it does the following:
-
@babel/preset-env
: Transpiles new ECMA scripts to older versions and add in polyfills when necessary. -
@babel/react
: Convertsjsx
tojs
-
- As we can see from below: it does the following:
-
babel.config.json
module.exports = {
"presets": [
"@babel/preset-env",
"@babel/react"
]
}
- More on Babel presets: https://babeljs.io/docs/presets
https://zellwk.com/blog/publish-to-npm/
npm login
.
It will ask for your NPM username, email and password and email you an OTP.
Then npm publish
.
https://docs.npmjs.com/creating-an-organization
Only works for NPM >= v8.3
- https://www.stefanjudis.com/today-i-learned/how-to-override-your-dependencys-dependencies/
- https://docs.npmjs.com/cli/v8/configuring-npm/package-json#overrides
Constrict dependency version
"overrides": {
"node-ipc@>9.2.1 <10": "9.2.1"
}
So that node-ipc
of any version between 9.2.1 and 10 will be made to be v9.2.1
Override "downstream" module
"overrides": {
"bar": {
"foo": "1.0.0"
}
}
Override foo
to be 1.0.0 when it's a child (or grandchild, or great grandchild, etc) of the package bar
.
There is another way of accomplishing the above: https://docs.npmjs.com/cli/v8/commands/npm-shrinkwrap
In ./local_modules/@whatever-optional-namespace/local-module-name/package.json
{
"name": "local-module-name",
npm i -S ./local_modules/@whatever-optional-namespace/local-module-name
The following will be generated in ./package.json
{
"name": "whatever",
"dependencies": {
"@whatever-optional-namespace/local-module-name": "file:local_modules/@whatever-optional-namespace/local-module-name"
},
Now your local module is in.
- https://www.pluralsight.com/guides/how-to-use-forked-npm-dependencies
- https://dev.to/paddy57/how-to-fork-github-repository-and-use-as-npm-dependency-inside-a-react-native-project-2j21
For example, just put in the Github link (or a community-fork of it, or your own fork of it)
"dependencies": {
"react-js-pagination": "https://github.com/wwwaiser/react-js-pagination.git",
This becomes useful when your dependency-module's develop haven't yet updated their work on npmjs.com
.
- https://www.youtube.com/watch?v=kwn7tHJJoLA
- https://docs.npmjs.com/cli/v9/using-npm/scripts#pre--post-scripts
- Caution: https://www.youtube.com/watch?v=4vIhgaEMtOk
- Relevant: https://stackoverflow.com/questions/43664200/what-is-the-difference-between-npm-install-and-npm-run-build
PM2:
- https://www.youtube.com/watch?v=yPd9sds9lJ4 (Very Good)
- https://www.youtube.com/watch?v=zrfRDGdp7Po&list=PLdHg5T0SNpN38gy5xZ0PVEaDdZXlPkgP9&index=6
- Rome: https://www.youtube.com/watch?v=XFR2TRhbnq0
- Prettier: https://www.youtube.com/watch?v=DqfQ4DPnRqI
- https://blog.logrocket.com/migrating-prettier-rome/
- https://www.freecodecamp.org/news/using-prettier-and-jslint/
- https://blog.bitsrc.io/best-practices-with-react-hooks-69d7e4af69a7
Yarn is faster: https://waverleysoftware.com/blog/yarn-vs-npm
- JS: https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams/delete#examples
- PHP: https://stackoverflow.com/questions/4937478/strip-off-url-parameter-with-php/45713333#45713333
- JS: https://stackoverflow.com/questions/6660977/convert-hyphens-to-camel-case-camelcase
- PHP: https://stackoverflow.com/questions/2791998/convert-dashes-to-camelcase-in-php
https://github.com/atabegruslan/Notes/wiki/Encoding#rid-diacritics