DEV Community: Tome Karkalashev

How to load website resources asynchronously

Tome Karkalashev — Sat, 16 Jul 2022 18:31:58 +0000

Browsers load website resources synchronously by default.

This means web browser can do only one thing at a time - loading (downloading and execution) of something blocks the loading of something else.

1. Concepts

1.1. Async

async allows downloading of specified JS resources while the browser is doing something else and then execution of those resources immediately after the download is completed.

Notes

<script src="app.js" async>

To solve reader blocking issues
Scripts should be executed asap
Be careful to dependent resources

1.2. Defer

defer allows downloading of the specified JS resources while the browser is doing something else and then execution of those resources after the HTML file rendering is completed.

Notes

<script src="app.js" defer>

To solve reader blocking issues
Ideal for scripts accessing DOM
Good for dependent resources

1.3. Preload

HTML preload is a system that is used to give hits to web browsers about the resources/files (e.g., CSS, JS, images, and others) that will soon become necessary to load a webpage. The preload hint is given by adding preload as the value of the rel attribute in the element of those necessary resources.

Notes

<link href="app.css" rel="preload">

To load above the fold contents
Available for font, css, JS, image, ...
Preload many contents

Normal

Preload

1.4. Server Push

HTTP/2 server push allows downloading of specified resources while the browser is doing something else and then execution of those resources when they become necessary.

Notes

To load above the fold contents
Available for font, css, JS, image, ...
Server Push many contents

2. Comparisons

2.1. Between Async, Defer, Preload and Server Push

Similarities

They all allow asynchronous downloading of website resources.

They all allow specified resources to be downloaded by the browsers simultaneously when it is doing something else.

Differences
Downloaded files are executed in different order.

async files are executed immediately after they are downloaded.
defer files are executed after the parsing of the HTML document is completed.
preload and HTTP/2 server push files are executed when they are necessary.

2.2. Between Preload and Server Push

Similarities

simultaneous downloading
executed only when the files are necessary
to load above the fold contents
support multiple file formats - JS, CSS, image, etc

Differences

Preload makes request to download those resources from the web server
Server Push doesn't require making any of these requests - it allows web servers to automatically send these files alongside the main webpage (HTML file)

2.3. Between (Async and Defer) vs (Preload and Server Push)

Diferences

a. Supported file formats

async, defer: only JS files
preload, server push: CSS, JS, image, etc

b. Purpose

async, defer: to solve render-blocking issue, control over how the files are loaded
preload, server push: download resources early

Thanks for reading!

Best practices for Mongoose

Tome Karkalashev — Tue, 12 Jul 2022 10:08:41 +0000

1. Practice for Queries

1.1. Use lean queries for GET operations

Mongoose documents are much heavier than vanilla Javascript objects.

const user = await User.findById(userId);

Change tracking
Casting and validation
Getters and setters
Virtuals (including "id")
save() function

If you execute query and send result without modification, you should use lean().

const user = await User.findById(userId).lean();

1.2. Use .select() to filter specific properties

You don't need the entire document which your query returns.

const user = await User.findById(userId).select({ name: 1, email: 1 });

This also helps sensitive fields being returned to frontend side.
You can also define selections in the schema definitions.

const userSchema = new mongoose.schema({
 firstName: {
  type: String,
 },
 email: {
  type: String,
  select: true,
 },
 verficationToken: {
  type: String,
  select: false,
 },
 password: {
  type: String,
  select: false,
 },
});

// Select explicitly
const { userId } = req.body;
const user = await
User.findById(userId).select('+email');

1.3. Minimise DB Queries (Avoid .populate)

Avoid this

const customers = await Customer.find()
 .populate({
   path: 'contract',
   populate: {
    path: 'customer',
    model: Customer
   }
 });

const result = customers.filter(customer => customer.contract.number === contractId);

const customers = await Customer.find()
 .populate({
  path: 'contract',
  select: 'number',
  populate: {
   path: 'customer',
   model: Customer,
   select: 'firstName lastName'
  }
});

Need to select only essential fields as many as possible
Better to use .aggrecate() pipeline

1.4. Hooks and validators

Mongoose validators

const userSchema = new Schema({
 provisionAcqFeePercent: {
  type: Number,
  default: null,
  min: [10, 'Percentage too small'],
  max: 100
 },
});

Mongoose hooks (prehook, posthook etc)

userSchema.pre('save', function capitalizeNames(next) {
 this.firstName = capitalize(this.firstName);
 this.lastName = capitalize(this.lastName);
 next();
});

These functions wouldn't trigger validators and
hooks

User.create();

User.findOneAndUpdate();
User.findByIdAndUpdate();

User.remove();
User.findOneAndRemove();
User.findByIdAndRemove();

1.5. Proper use of virtuals

Person and Blog has 1:M relationship (one to many)

const blogSchema = ({
 title: String,
 tags: [{
  type: String
 }],
 author: {
  type: Schema.Types.ObjectId,
  ref: 'Person'
 }
});

const personSchema = ({
 name: String,
 blogs: [{
  type: Schema.Types.ObjectId,
  ref: 'Blog'
 }]
});

It's easy to fetch author of each blog, but...

If you want to find out all blogs written by a person?

const personSchema = ({
 name: String
});

personSchema.virtual('blogs', {
 ref: 'Blog',
 localField: '_id',
 foreignField: 'author'
});

const blogs = await Person.findById(personId).populate('blogs');

1.6. Create custom indexes

Custom index

eventSchema.index({ 'type': 1 });
eventSchema.index({ 'data.object._id': 1 });
eventSchema.index({ 'data.object.parent': 1 });
eventSchema.index({ 'data.object.customer': 1 });
eventSchema.index({ 'data.object.contract': 1 });
eventSchema.index({ 'data.object.partner': 1 });
eventSchema.index({ 'data.object.to._id': 1 });

Compound index

event Schema.index({ type: 1, status: 1 });

1.7. Field selection for PATCH & PUT

PUT request assumes all fields are submitted from frontend

user.findById(req.params.id, (err, user) => {
 user.name = req.body.name;
 user.age = req.body.age;
 user.country = req.body.country;

 user.save((saveErr, updatedUser) => {
  res.send({ data: updatedUser });
 });
});

POST request would pass only fields that wants to update

user.findById(req.params.id, (err, user) => {
 // Update user with the available fields
 // This assumes the field name is the same in the form and the database.
 user.set(req.body);

 user.save((saveErr, updatedUser) => {
  res.send({ data: updatedUser });
 });
);

2. Practices in MongoDB schema design

2.1. Embedding vs Referencing

Embeding

{
 "first_name": "Paul",
 "surname": "Miller",
 "cell": "447557505611",
 "city": "London",
 "location": [45.123, 47.232],
 "profession": ["banking", "finance", "trader"],
 "cars": [
  {
   "model": "Bentley",
   "year": 1973
  },
  {
   "model": "Rolls Royce",
   "year": 1965
  }
 ]
}

Referencing

{
 "first_name": "Paul",
 "surname": "Miller",
 "cell": "447557505611",
 "city": "London",
 "location": [45.123, 47.232],
 "profession": ["banking", "finance", "trader"],
 "cars": [
  {
   type: Schema.Types.ObjectId,
   ref: 'Car'
  }
 ],
}

2.2. Modeling One-to-few, One-to-Many

Modeling One-to-few
Favor embedding unless there is a compelling reason not to.

const blogSchema = ({
 title: "String,"
 tags: [{
  type: String
 }],
 author: {
  type: Schema.Types.ObjectId,
  ref: 'Person'
  }
});

One-to-Many
if you need to access an object itself, you need to use reference

{
 "name": "left-handed smoke shifter",
 "manufacturer": "Acme Corp",
 "catalog_number": "1234",
 "parts": ["ObjectID('AAAA')", "ObjectID('BBBB')",
 "ObjectID('CCCC')"]
}

Parts
{
 "_id" : "ObjectID('AAAA')",
 "partno" : "123-aff-456",
 "name" : "#4 grommet",
 "qty": "94",
 "cost": "0.94",
 "price":" 3.99"
}

Use a reference array in ONE side in the one-to-many relationship.

2.3. One-to-squilion vs Many-to-Many

One-to-squilion
if there are too many references, don't use an array of ObjectIDs

Hosts
{
 "_id": ObjectID("AAAB"),
 "name": "goofy.example.com",
 "ipaddr": "127.66.66.66"
}

Logs
{
 "time": ISODate("2014-03-28T09:42:41.382Z"),
 "message": "cpu is on fire!",
 "host": ObjectID("AAAB")
}

Use a reference in MANY side in the one-to-squilion relationship.

Many-to-Many
Use bidirectional reference in many-to-many relation

Users
{
 "_id": ObjectID("AAF1"),
 "name": "Kate Monster",
 "tasks": [ObjectID("ADF9"), ObjectID("AE02"),
ObjectID("AE73")]
}

Tasks
{
 "_id": ObjectID("ADF9"),
 "description": "Write blog post about MongoDB schema",
 "due_date": ISODate("2014-04-01"),
 "owners": [ObjectID("AAF1"), ObjectID("BB3G")]
}

3. MongoDB vs MySQL

3.1. Differences

MYSQL


datastructure	It stores each individual record as a table cell with rows and columns
schema	MySQL requires a schema de nition for the tables in the database
languages	Supports Structured Query Language (SQL)
foreign key	Supports the usage of Foreign keys
replication	Supports master-slave replication and master-master replication
join operation	SQL Database can be scaled vertically
performance	Supports Join operation
risks	Optimized for high performance joins across multiple tables

MONGODB


datastructure	It stores unrelated data in JSON like documents
schema	MongoDB doesn’t require any prior schema
languages	Supports JSON Query Language to work with data
foreign key	Doesn’t support the usage of Foreign keys
replication	Supports sharding and replication
join operation	MongoDB database can be scaled both vertically and horizontally
performance	Doesn’t support Join operation
risks	Optimized for write performance

3.2. Select, Update and Insert performance

3.3. Is MongoDB faster than MySQL?

Since MongoDB's document model stores related data together, it is often faster to retrieve a single document from MongoDB than to JOIN data across multiple tables in MySQL.

3.4. Summary

Applications, like an accounting system that requires multi-row transactions, would be better suited for a structured and relational database. MySQL is an excellent choice if you have structured data and need a traditional relational database.
MongoDB is well-suited for real-time analytics, content management, the Internet of Things, mobile, and other types of applications. It is an ideal choice if you have unstructured and/or structured data with rapid growth potential.

Thanks for reading!

Important JavaScript Concepts

Tome Karkalashev — Sun, 10 Jul 2022 20:10:16 +0000

1. Prototype

Prototypes are the mechanism by which JavaScript objects inherit features from one another. The prototype is an object that is associated with every functions and objects by default in JavaScript, where function's prototype property is accessible and modifiable and object's prototype property is not visible.

Usage of Prototype

function Bike(model, color) {
 this.model = model;
 this.color = color;

 this.getDetails = function () {
  return this.model + ' bike is ' + this.color;
 };
}
var bikeObj1 = new Bike('BMW', 'BLACK');
var bikeObj2 = new Bike('BMW', 'WHITE');

function Bike(model, color) {
 this.model = model;
 this.color = color;
}
Bike.prototype.getDetails = function () {
 return this.model + ' bike is ' + this.color;
};
var bikeObj1 = new Bike('BMW', 'BLACK');
var bikeObj2 = new Bike('BMW', 'WHITE');

Advantages

If we define the method in the object constructor, the method will be defined in every instance of object. If we define the method to the prototype, it only defines once and every instance of object has access to it. It is only stored in the memory once.

2. Scope

Scope is the accessibility of variables, functions, and objects in some particular part of your code during runtime. In other words, scope determines the visibility of variables and other resources in areas of the code. The two types of scope are local and global:

Global variables are declared outside of a block.
Local variables are declared inside of a block.

Usage of Scope

Global Scope

function someFunction() {
  // Local Scope #1

  function someOtherFunction() {
    // Local Scope #2
  }
}

Local Scope

function anotherFunction() {
  // Local Scope #3
}

Lexical Scope

function grandfather() {
  var name = 'Hammad';
  // likes is not accessible here

  function parent() {
    // name is accessible here
    // likes is not accessible here

    function child() {
      // name is also accessible here
      var likes = 'Coding';
    }
  }
}

var, let and const

Block statements like if and switch conditions or for and while loops, unlike functions, don't create a new scope. Variables defined inside of a block statement will remain in the scope they were already in. ECMAScript 6 introduced the let and const keywords. Contrary to the var keyword, the let and const keywords support the declaration of local scope inside block statements.

if (true) {
  // this 'if' conditional block doesn't create
a new scope

  var name = 'Hammad';
  // name is still in the global scope
}


var name = 'Hammad';
let likes = 'Coding';
const skills = 'Javascript and PHP';

if (true) {
   // this if conditional block doesn't create a scope

   // name is in the global scope because of the var keyword
   var name = 'Hammad';

   // likes is in the local scope because of the let keyword
   let likes = 'Coding';

   // skills is in the local scope because of the const keyword
   const skills = 'JavaScript and PHP';
}

console.log(name); // 'Hammad'
console.log(likes); // Uncaught ReferenceError: likes is not defined
console.log(skills); // Uncaught ReferenceError: skills is not defined

Questions

What is the result of?

for (var i = 0; i < 5; i++) {
 setTimeout(function () {
  console.log(i);
 }, i * 1000);
}

//answer: 5 5 5 5 5

What is the result of?

for (let i = 0; i < 5; i++) {
 setTimeout(function () {
  console.log(i);
 }, i * 1000);
}

//answer: 0 1 2 3 4

3. Closure

A closure is the combination of a function bundled together
(enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives you access to an outer function’s scope from an inner function. In JavaScript, closures are created every time a function is created, at function creation time.

Lexical Scope

function init() {
 var name = 'Mozilla';
 // name is a local variable created by init

 function displayName() {
  // displayName() is the inner function, a
closure
  console.log(name);
 }

 displayName();
}

init();

Closure

function makeFunc() {
 var name = 'Mozilla';

 function displayName() {
  console.log(name);
 }

 return displayName;
}

var myFunc = makeFunc();
myFunc();

Creating closures in loops: A common mistake

function showHelp(help) {
 document.getElementById('help').textContent = help;
}

function setupHelp() {
 var helpText = [
  {'id': 'email', 'help': 'Your e-mail address'},
  {'id': 'name', 'help': 'Your full name'}
 ];

 for (var i = 0; i < helpText.length; i++) {
  var item = helpText[i];
  document.getElementById(item.id).onfocus = function() {
   showHelp(item.help);
  }
 }
}

setupHelp();

function showHelp(help) {
 document.getElementById('help').textContent = help;
}

function makeHelpCallback(help) {
 return function() {
  showHelp(help);
 };
}

function setupHelp() {
 var helpText = [
  {'id': 'email', 'help': 'Your e-mail address'},
  {'id': 'name', 'help': 'Your full name'},
 ];

 for (var i = 0; i < helpText.length; i++) {
  var item = helpText[i];
  document.getElementById(item.id).onfocus = makeHelpCallback(item.help);
 }
}

setupHelp();

4. Hoisting

Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their scope before code execution. A strict definition of hoisting
suggests that variable and function declarations are physically moved to the top of your code, but this is not
in fact what happens. Instead, the variable and function declarations are put into memory during the compile phase, but stay exactly where you typed them in your code.

function catName(name) {
 console.log(name);
}
catName("Tiger");
// Tiger

catName("Chloe");
function catName(name) {
 console.log(name);
}
// Chloe

// JavaScript only hoists declarations, not initializations.
console.log(num); // undefined:
var num = 6; // Declaration and Initialization

console.log(num); // ReferenceError exception
num = 6; // Initialization

a = 1; // Initialization
let a; // ReferenceError: Cannot access 'a' before initialization

a = 1; // Initialization
const a; // SyntaxError: Missing initializer in const declaration

5. Apply, Call, Bind

Usage

var obj = {
 num: 2;
};
var add = function (num2, num3, num4) {
 return this.num + num2 + num3 + num4;
};

// Call method
console.log(add.call(obj, 3, 4, 5)); // Output: 14

// Apply method
console.log(add.apply(obj, [3, 4, 5])); // Output: 14

// Bind Method
var bound = add.bind(obj);
console.log(bound(3, 4, 5)); // Output: 14

Thanks for reading!