Positioning content with CSS (the basics)

by

Introduction

Positioning content with CSS can be done in several ways, which property will be used depends on the specifics of the layout, and on the requirements for syntax support in browsers. The basic technique for positioning content is the position property. If the value of the property is: relative, absolute or fixed, additional properties are also available: top, right, bottom, left.
As one of the solutions for content positioning, the float property can be used, but the trend is to use this property as little as possible (that is, to use it only for “wrapping the text around the block”).
The technique that is recommended and supported by most recent browsers, involves using the CSS property “display:flex”. The “display:grid” property is considered to have great potential, but it will have to wait until all browsers adopt it in practice.

Read more

Categories CSS

Modular programming with ES6

by

Features of ES6 modules

es6 module

With the new version of JavaScript ES6 comes integrated support for modular programming.

  • Supports modules placed in files – one module per file
  • Modules are unique instances, each module is executed only once (singleton model).
  • ES6 modules can work both synchronously and asynchronously.
  • Supports “cyclic dependencies”.
  • The syntax is even more compact than CommonJS
  • ES modules have a static structure. Since the module structure is immutable, it is often enough to look at the code and figure out what is being imported where. This is not the case with a dynamic structure, where the code often needs to be executed to see what is being imported. Possible errors can also be found at the time of compilation (with the module bundler), because all actions related to the import and export of modules are determined at that moment.
  • All imported elements are immutable from the importing module. Any operation to assign a value to an imported element would cause an error (TypeError).
  • ES6 does not make a copy of a property but shares a link to that property. This is true even for sharing primitive properties (“number” or “string”). In the following example, we see that if the parent module changes the value of the shared property (the change was made by a method from the parent module!), the module that imported that property “sees” that change.
    EXAMPLE
    budget.js

    main.js

    We import all the elements that were exported from the module “proracun.js”

    If the variable “counter” was used now in some “third” module, it would have the value 2.

Read more

Modular Programming – External Syntax (AMD & CommonJS)

by

Introduction

External syntaxes are not JavaScript libraries, but appropriate specifications and conventions for defining modules. External syntax can only be used with the help of module loaders that “breathe life” into it. If the loader module supports the syntax, it means that it contains built-in methods that are previously intended to be used through a certain syntax.
The advantage of using these external syntaxes compared to the native ES5 module pattern is that it does not pollute the global domain with module names and that dependencies manager work is enabled.

  • Asynchronous Module Definition (AMD) as its name suggests, supports asynchronous loading of modules, which is convenient for working with modules in the browser.
  • CommonJS loads modules synchronously and is therefore most commonly used to work with server-side modules in a node.js environment. Although it is not planned to work in the browser, with the help of the “module bundler” it is possible to adapt CommonJS to work in the browser.
  • Universal module definition (UMD) is compatible with both AMD and CommonJS definitions and is used mainly if there is a need to load the same module on the server and in the browser.

Explanation:
CommonJS, AMD, or UMD are not JavaScript libraries. These are standardization organizations, such as ECMA (defines the language specification for JavaScript) or W3C (defines JavaScript web APIs, such as DOM or DOM events). The goal of CommonJS or AMD syntax is to define an API for working with modules.

Read more

Modular programming with ES5

by

Introduction

es5

The ES5 version of JavaScript does not support modules, but regardless of that it is possible to create applications in the manner of modular programming by following certain principles. Modules with their encapsulated code are created using “Immediately-Invoked Function Expressions” or with the constructor function. We simply return the API of the module that should be public inside a function with the reserved word return. This is a simple template and can be deployed anywhere without additional libraries. It is possible to define several modules within one file.

In addition to the above advantages, this approach has its disadvantages:

  • “pollution” of the global domain with module names, although the body of the module is hidden using functions (IIFE) in the local domain.
  • “manually” determining the loading order of modules and the loading order of modules can be quite complicated in large and complex applications.
  • no asynchronous loading possible

These templates are not perfect and have their flaws, but regardless of the flaws, the code is more understandable because it is better organized.

Read more

Introduction to modular programming

by

Features of modular programming

modular programming cube

The modular programming concept is currently one of the most prevalent concepts in modern Javascript programming. It is based on breaking a large application into smaller, encapsulated, independent pieces of code – modules. The goal of modularity is to reduce complexity according to the “divide and rule” principle. The most significant advantages of modular programming are:

  • a clearer and more understandable application
  • easier control of mutable domains
  • prevented “global domain pollution”
  • code reusability
  • possibility of working on the same project by several different teams or developers doing separate smaller tasks.
  • easier debugging

Read more

What is hoisting?

by

Introduction

js this

It is often mistakenly thought that JavaScript is an interpreted programming language that is interpreted, i.e. directly executes line by line without prior compiling (translation of the language into machine language). However, JavaScript is a programming language that is compiled when the code is executed (“on the fly“). JavaScript code is compiled every time the code is executed, so the quality and responsiveness of JavaScript as a language mostly depends on the efficiency of the JavaScript engine that compiles it.

Hoisting variables

Declaring and defining a variable are two different processes. “Declaration of a variable” is the process of creating a variable, then defining the name of the variable and providing space for its storage, while “defining a variable” is the process when a variable is assigned a value that is placed in the storage space.

Hoisting declared variables

Variable declaration is executed when the code is compiled, which means that before the execution of even one line of code, the variables are first declared. Within JavaScript, there is a special reserved word “var” that is used to declare a variable. Since the declaration of a variable occurs before the execution of any part of the code, it follows that it is the same as if the variables were declared at the beginning of the code, this principle is called “hoisting” (Sr. lifting).

Read more

Scope

by

Definition

js this

The term “scope” (variable definition area) is related to the term variable and represents a part of the program code in which a variable is available. The basic characteristic of the definition area is the border of that area. The variable can be accessed only if it is requested within its area of ​​definition, i.e. the variable cannot be accessed if we are outside the scope.

It should be noted that “scope” is not the same as “context”. These two terms are often confused because they have some similarities, but you should know that the term “scope” is a property of a variable, while “context” is a property of program code. During execution, the program passes (enters and exits) through different areas of variable definition (scope), and the variables are then either in “context” or not. “Contex” is similar to the area of ​​definition because it also depends on the position in the program (“lexical context”) or the time of code execution (“execution context”).

Read more

1001 ways to create objects in JavaScript

by

new Object()

One of the most basic ways is to create an empty object with the new keyword based on the Object() built-in constructor function, and then add properties individually.

Read more

Properties and methods of the Object() constructor

by

Introduction

Object() is a function that can be considered the “mother” of all objects. All objects in JavaScript are derived from this function. Creating objects is possible in several ways, but the following way best explains the connection between the constructor function and the object:

A constructor function has a number of methods and two properties: “Object.length” (a very strange property that always returns 1) and “Object.prototype”

EXPLANATION:
Functions in javascript are “First class citizen”, therefore they support all operations available to other types. Among other types of functions, they also support the characteristics of objects, so functions and objects have their own properties and methods. One of the most important features of the constructor function is the Object.prototype property, through which the constructor function passes basic properties and methods to all objects in JavaScript.

Read more

JavaScript operators

by

What are operators

javascript

The operator is usually a symbol that is used when we want to perform some standard, frequently used operation, such as assignment of values, comparison of values, arithmetic operations…
Operators can be understood as special functions which, unlike “ordinary functions”, are written in a “non-standard way”. Operators use the so-called “infix” notation (the function name is placed between two parameters). The standard operator shown with “infix” notation looks like this:
... operator...
The following example shows that there is an essential similarity between the operator and the function:

The most common are binary operators (operators that take two values as input), although there are also unary operators that perform certain operations on only one value:

Read more