Miscallaneous Flashcards
object prototype chain
get attributes of a property
set attributes of a property
// Every object (except the root object) has a prototype (parent). // To get the prototype of an object: Object.getPrototypeOf(obj);
// In Chrome, you can inspect "\_\_proto\_\_" property. But you should // not use that in the code.
// To get the attributes of a property: Object.getOwnPropertyDescriptor(obj, 'propertyName');
// To set the attributes for a property:
Object.defineProperty(obj, 'propertyName', {
configurable: false, // cannot be deleted
writable: false,
enumerable: false
});
prototype property of a constructor
// Constructors have a "prototype" property. It returns the object
// that will be used as the prototype for objects created by the constructor.
Object.prototype === Object.getPrototypeOf({})
Array.prototype === Object.getPrototypeOf([])
// All objects created with the same constructor will have the same prototype.
// A single instance of this prototype will be stored in the memory.
const x = {};
const y = {};
Object.getPrototypeOf(x) === Object.getPrototypeOf(y); // returns true
// Any changes to the prototype will be immediately visible to all objects // referencing this prototype.
you can instantiate an object with a constructor function or a class, that has a constructor method
where do you put object methods
to get the own/instance properties
to get all the properties - own + prototype
// When dealing with large number of objects, it's better to put their
// methods on their prototype. This way, a single instance of the methods
// will be in the memory.
Circle.prototype.draw = function() {}
// To get the own/instance properties: Object.keys(obj);
// To get all the properties (own + prototype):
for (let key in obj) {}
JSON in JS object and back
- JSON.parse(‘{ “name”:”John”, “age”:30, “city”:”New York”}’) to convert text into a JavaScript object
- js object to json JSON.stringify(object)
which type of testing would best measure which version of a landing page results in more sign-ups:
A/B testing or split testing is an experimental approach to compare two versions of a landing page (A and B), which are identical except for one variation that might impact a user’s behavior and to find out the most effective version.
babel
front end or backend? vs webapack?
- Babel is simply a translator, who translates your ‘fancy’ (ES6+) JS code into ‘not-so-fancy’ (ES5) ones that browser (front-end) or Node.js (back-end) understands.
- Why we speak fancier than browser and Node.js? Because we can’t wait to use the latest and greatest, even before they are officially supported.
- Below is a fancy code that most developers write today. Despite of how fancy it is, our browser / Node.js has no idea what it’s talking about. (Note: Some Node.js higher versions have ES6 support now.)
- // ES6 syntax
import moment from ‘moment’;
export default () => moment().format(“YYYY Do MM”);
* And this is why we need Babel to translate above into the equivalent not-so-fancy code below, that our browser / Node.js actually understands.
*
* // ES5 syntax
const moment = require(‘moment’)
function getDateString() {
const date = moment();
return date.format("YYYY Do MM");
}
exports. default = getDateString;
* That’s why Babel is sometimes called a transpiler.
* It’s worth noting that Babel is commonly used for both front- and back-end. Why do I mention this? Because Webpack is front-end only (in most cases).
webpack
- If Babel is a translator for JS, you can think of Webpack as a mega-multi-translator that works with all kinds of languages (or assets). For example, Webpack often runs Babel as one of its jobs. Another example, Webpack can collect all your inline CSS styles in your Javascript files and bundle them into one.
- Why do we need such a monster for front-end, but not back-end?
- Because front-end has many kinds of assets such as CSS, SASS, images, fonts and is way more complex and dynamic than back-end which only has JS. And in the end of day we need to somehow package all variety of assets into a small file that our users’ browser can download at page load time. This is also known as minify and uglify. You see, back-end has none of the above requirement.
- Another important reason is that front-end doesn’t work with modules (again, in most cases). Modules are built-in features of Node.js, not browsers. Nowadays developers are so used to npm install, import and export JS modules in front-end, as it allows us to better organize code and share packages. But in reality they are only syntactic sugars, and it’s Webpack’s job to figure out all the dependencies among all the modules that we use in the code, and compile them into one big chunk of JS code that the browser actually understands.
- When do we use Webpack in back-end? A good use case is to support SSR (Server-Side Rendering).
babel vs webpack
- Backend: we use Babel so that we can use the fanciest JS syntax (ES6/7) with Node.js.
- Frontend: we use Webpack (which uses Babel and other things) to compile JS code and many other assets into a few small bundle files that our users can download when they first load our webpage. For example, create-react-app uses Webpack and Babel when creating your app.
you don’t need moment.js
Moment.js is a fantastic time & date library with lots of great features and utilities. However, if you are working on a performance sensitive web application, it might cause a huge performance overhead because of its complex APIs and large bundle size.
Problems with Moment.js:
- It is highly based on OOP APIs, which makes it fail to work with tree-shaking, thus leading to a huge bundle size and performance issues.
- It is mutable and it causes bugs:
- clone
- How do I work around mutability in moment.js?
- Complex OOP API (which doubles mutability problem). Here is an example: https://github.com/moment/moment/blob/develop/src/test/moment/add_subtract.js#L244-L286 Moment.js allows to use a.subtract(‘ms’, 50), a.subtract(50, ‘ms’) and even a.subtract(‘s’, ‘50’).
If you are not using timezone but only a few simple functions from moment.js, this might bloat your app, and therefore is considered overkill. dayjs has a smaller core and has very similar APIs so it makes it very easy to migrate. date-fns enables tree-shaking and other benefits so that it works great with React, Sinon.js, and webpack, etc. See https://github.com/moment/moment/issues/2373 for more ideas on why and how people switch from moment.js to other solutions.
tree shaking
uglify.js
Tree shaking is a term commonly used within a JavaScript context to describe the removal of dead code. … In modern JavaScript applications, we use module bundlers (e.g., webpack or Rollup) to automatically remove dead code when bundling multiple JavaScript files into single files.
Uglify is a JavaScript file minifier. It compresses the file size by removing all the spaces and new lines- which makes the code unreadable able hence ugly. Uglify also joins sentences using comma, changes property access to dot notation (to reduce number of characters), removes dead code and removes console logs.
dead code vs unreachable code
Dead code - code that is executed but redundant, either the results were never used or adds nothing to the rest of the program. Wastes CPU performance.
function(){
// dead code since it’s calculated but not saved or used anywhere
a + b;
}
Unreachable code - code that will never be reached regardless of logic flow. Difference is it’s not executed.
function(){
return x;
// unreachable since returned
a = b + c;
}
native js Date functions or a library?
some of them native is superior,
if there is tedious math, or a crazy regex then use library like day.js
day.js is very tiny, if you want to reduce bundle size
but use native where you can
just in time language, parsed, serve the app
serve up small js file
material ui
Material-UI is an open-source project that features React components that implement Google’s Material Design.
It kick-started in 2014, not long after React came out to the public, and has grown in popularity ever since. With over 35,000 stars on GitHub, Material-UI is one of the top user interface libraries for React out there.
Its success didn’t come without challenges though. Designed with LESS, Material-UI v0.x was prone to common CSS pitfalls, such as global scope, which lead the project on the CSS-in-JS trajectory. This is how next came about in 2016.
The journey towards better style, as Olivier Tassinari puts it, began with inline styles, but their suboptimal performance and limited feature support (think pseudo selectors or media queries), ultimately made the team transition to JSS. And boy did they make a smart choice.
https://www.freecodecamp.org/news/meet-your-material-ui-your-new-favorite-user-interface-library-6349a1c88a8c/
material design
Material Design is an Android-oriented design language created by Google, supporting onscreen touch experiences via cue-rich features and natural motions that mimic real-world objects. Designers optimize users’ experience with 3D effects, realistic lighting and animation features in immersive, platform-consistent GUIs.
https://www.interaction-design.org/literature/topics/material-design
the process of contributing to open source on github
https://www.dataschool.io/how-to-contribute-on-github/
