Sass part 4 – Built in modules and functions. Writing custom functions with @function and @return
Uncategorized / January 15, 2020

This is the fourth part of our Sass series. This part covers built-in modules, functions, and modularization in Sass. Part 1      – Introduction, variables, and nesting in Sass. Part 2     – @-rules and Directives. Part 3     – Operators and control directives in Sass       WHAT YOU WILL LEARN Sass modularization, built-in modules, and functions in Sass. Writing custom functions in Sass.   Sass modularization Sass moved built-in functions into separate built-in modules in its Dart version DartSass. The C++ version of the preprocessor LibSass and the Ruby version of the preprocessor RubySass do not have this modification. Sass introduces @use and @forward which can be used to create custom modules. @forward makes mixins, variables, and functions in your Sass module available in other Sass sheets.  The modules with these forwarded variables, mixins, and functions, are loaded to Sass sheets using @use. The built-in modules have functions and mixins which can be used to work on data types and selectors. Functions to observe the internal operations of Sass are also combined into a module. Functions can be classified into three types.  Functions to work with values of different data types, selector functions, and introspection functions….

Sass Part 1 – An introduction, Sass variables and Nesting rules and properties in Sass
css , SASS , Uncategorized / December 15, 2019

Hey, folks! Welcome to the  Sass series. The aim of this series is to give a general idea of what Sass is, why it is beneficial and what are the key properties of Sass which makes it beneficial. Becoming an expert is in Sass can be achieved through rigorous practice and hands-on experience in real projects. This series will give you guys a platform to start with. WHAT YOU WILL LEARN Sass is a CSS preprocessor Sass has two syntaxes Sass syntax allows variables, mixins, nesting rules and properties, function Variables declared using $ , 7 data types are supported,and scope of variable. Interpolation for selector or property names using {} Parent selector using & and nesting     Sass or syntactically awesome stylesheet Sass is a CSS preprocessor that will generate CSS files for your project. “A CSS preprocessor is a program that will generate CSS  from a syntax supported by it.” Sass generates CSS files from .sass or .scss files that have their own syntax. Sass allows using features like variables,functions, mixins, etc that CSS files do not allow(CSS now supports variables but the usage is a bit different and browser support is limited).   SASS is originally written in Ruby. A…

Sass Part 2 – @-Rules and Directives
css , SASS , Uncategorized / December 25, 2019

This is the second part of our Sass series, aimed at providing a better understanding of  Sass  @-rules and Directives. Part 1 of the series provided an introduction and taught by example about variables and nesting in Sass.   WHAT YOU WILL LEARN @-rules and Directives 11 Directives @-rules of CSS  CSS provides statements called @rules which are rule statements preceded by an @symbol. Most commonly used @rules are @media,@keyframes,@import, etc Sass extends some of these  @rules and provides other directives as well. “A directive is something that introduces new syntax. Sass directives help in writing CSS in an easy and better way” There are 7 @rules and directives you can use in Sass. They are as follows @import @media @extend @debug @warn @error @at-root @forward @use @mixin and @function       @-Rules and Directives @import directives – @import directive is used to import Sass files (SCSS/SASS) into one another. Using the @import directive while properly modularizing the application can improve code reusability and avoid repeats. Consider two scss files _sectionone.scss _sectiontwo.scss These have styles for two sections and these scss files are called partials.  _ is what sass uses to identify a partial file. These partial files can…

Sass Part 3: Operators and control directives
Uncategorized / December 29, 2019

This is the third part of our Sass series aimed at providing insight in o  Sass operators and control directives. Part 1 of the series provided an introduction and taught by example about variables and nesting in Sass.  Part 2 of the series provided a better understanding of @-rules and Directives.   WHAT YOU WILL LEARN Operators and types of operators in Sass. Control directives and types of control directives in Sass. Operators in Sass Expressions are written using operators. There are different types of operators supported by sass and they can be broadly classified into Numeric operators, Relational operators/ Comparison operators, and Boolean operators. Numeric operators: +, – , *,  / ,% are numeric operators. These operators are used to write expressions that perform mathematical operations just like in most programming languages.   +, – and / can be used with values of string data type to perform operations like string concatenation.   +,-,/ are also used as unary operators(operators which require one operand).

TRY IT OUT Relational operators/Comparison operators:    <=, >=, >, <!=, == are  relational operators. These operators are used to write comparison expressions.

  Control Directives Control Directives are directives that are used to create…

Understanding Microservices, Web services, APIs and Endpoints
architecture , Uncategorized / December 4, 2019

Many beginners who start development, especially back end, get confused with terms like APIs, Microservices, Web services, endpoints, etc. The aim of this article is to describe what these terms are with a simple example. Please note that the example given here is just a demo. Microservices Microservice Architecture is a way of designing the structure of an application. Microservices are independently deployable services that together make the application. The architecture of an application can be in such a way that it can have multiple independent microservices that can function together. Splitting the application into microservices makes the maintenance of the application easier. It is also helpful in reducing the complexity of the application. Proper microservice architecture reduces complexity, increases flexibility, increases reusability as compared to a monolithic architecture.       API(Application Programming Interface) According to NIST definition, an API is, A system access point or library function that has a well-defined syntax and is accessible from application programs or user code to provide well-defined functionality. API provides a well-defined set of protocols, routines, and rules for a system so that another system can communicate with it. An API specifies how software components should interact. Documentation on how to…

Understanding Cloud Deployment Models. Cloud Part – 2
Cloud , Uncategorized / November 21, 2019

For part 1 of this series visit the following link What is Cloud Computing and Why? Cloud Part – 1   Cloud Deployment Models represent the types of cloud environments used by business organizations depending upon access, ownership, and size. There primarily  4 types of cloud deployment models Public Cloud Private Cloud Hybrid Cloud Community Cloud All these models provide various IT Resources as services Public Cloud A Public cloud is a publically accessible cloud environment. Resources and their maintenance is run by Cloud Service Provider (CSP) for a cost. The services are scalable, flexible and used by multiple organizations. Major Public Cloud Service providers are Amazon, Google, and Microsoft.   Some of the major negatives of public cloud services are Ownership of data rests with the cloud service providers. No exclusive custody. Limited control as a whole of the resources is handled by the service provider. Fear of lack of security. Multiple organizations access services.     Private Cloud A private cloud environment is owned and used exclusively by a single organization. A private cloud enables and organization to provide centralized access to IT resources for different parts/sections/departments of a business organization. Private cloud service models can be broadly divided into…

Understanding Cloud service models IaaS, PaaS and SaaS – Cloud 3
Cloud , Uncategorized / December 3, 2019

You might have heard acronyms like IaaS, PaaS, SaaS, what do they actually mean? what are cloud service models?. This is the third part of the Cloud Series and aims to provide an answer to the above questions. This article will provide you with an overview of cloud service delivery models so that you can choose which service model is best suited for your business application.   Cloud service models Cloud service models are models, based on which pre-packaged combinations of IT resources are delivered to the customer as services, by the cloud service providers(CSP). The three cloud service models following which the services are offered to the customers are Infrastructure as a service(Iaas), Software as a service(Saas), Platform as a service(Paas). Serverless is a cloud service execution model.   Other approaches by which CSPs provide service to the customers are Backend as a Service Backup as a Service Banking as a Service Blockchain as a Service Business Process as a Service Communications as a Service Compliance as a Service Consensus as a Service Container as a Service Crime as a Service Crypto as a Service Data as a Service Database as a Service (DBaaS) Datacenter as a service (DCaaS) Desktop…

Difference between tilde (~) and caret (^) in package.json, Semantic Versioning of npm packages and npm audit for vulnerability fixes
interview questions , Uncategorized / November 27, 2019

In the package.json files of  Node.js applications, the dependencies are added specifying their version. Sometimes these version numbers can be preceded by tilde (~) and caret (^) characters. What do they actually intent and what is the difference between them?     Semantic Versioning of npm packages Consider a version of a package like 1.2.3                It is of the form MAJOR.MINOR.PATCH MAJOR in version is updated when major change, which can affect compatibility is made and the new one might not have backward compatibility. MINOR in version is updated when a minor change is made in a backward-compatible manner. PATCH in version is updated when backward compatible bug fixes are made. Additional labels for pre-release and build metadata are available as extensions to the MAJOR.MINOR.PATCH format. Caret will install packages with version updated until just before the next major and tilde will install packages with version updated until just before next minor. We will see this in detail below   caret (^) character in the version  caret (^) character in version number means that the package version installed will be updated up to the latest minor and its patch, of the major. For…

Understanding Map object in JavaScript

Map Hold key-value pairs Remember the order of insertion. Can have objects or primitive values as key or value. Map is a JavaScript object which can hold key-value pairs  and remember the order of insertion. Maps inherit from  Map.prototype. Map.prototype.constructor returns the constructor function that created an instance’s prototype. A new Map is created using the map constructor in the following way.

We can set key-value pairs using the set method

You can see here that  Map remembers the order of insertion.  Maps can have objects or primitive values as key or value. For example, see the following map which has an object as key and object value. Here we set object key-value pairs using the set method and retrieve it using the get method.

  Now get the object value belonging to object key using get method

  Read more on Map.prototype hereMap

Q: Handling errors while using Async/Await (JavaScript ES8)

This article aims at providing an insight into handling errors while using async-await. In the below example, a  function TestPromise will return a promise.The promise will give an error and get rejected if the value of the variable budget is less than 20000. The promise will always get rejected as we initialize the value of  budget to be 10000. A function calltestAPromise calls the function TestPromise.  

As shown above function calltestAPromise will call TestPromise and handle the promise it returns with .then  and .catch, an error will get caught in the .catch which will handle the rejected case. The above promise will get rejected with an error.   Now change the function calltestAPromise to be an async function which will await for the promise to get resolved or rejected.

Now, the promise returned by TestPromise will get rejected with an error. The error won’t be handled and the promise rejection will be left unhandled. If the promise gets rejected, the code will never reach the console.log. Handling the error on a promise can be achieved by wrapping the block of code inside a try-catch. The rejected error on promise will be caught by the catch.

The catch of try/catch will catch the error of the promise rejection and the error will be handled in…

Share this page in social media platforms
Download Formatting took