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
css , SASS , 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…

Sass part 4 – Built in modules and functions. Writing custom functions with @function and @return
css , SASS , 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 5 – Understanding mixins, creating mixins in Sass using @mixin
css , SASS , Uncategorized / January 26, 2020

This is the fifth part of our Sass series. This part covers the concept of mixins, creating mixins in Sass using @mixins. Part 1      – Introduction, variables, and nesting in Sass. Part 2     – @-rules and Directives. Part 3     – Operators and control directives in Sass Part 4     – Built-in modules and functions. Writing custom functions with @function and @return     WHAT YOU WILL LEARN Concept of mixins mixins in Sass Mixins with arguments Mixins with content block   Mixins Mixins are a programming language concept by which a class is created to inject code into other classes. Units of functionality are combined together to form a mixin and this mixin can be used by other different classes. Methods of the Mixin class can be used by multiple classes and these classes need not be a child class of the Mixin. Mixins make the code clean and more maintainable.   Mixins in Sass Mixins in Sass are used to create styles that are to be reused throughout the stylesheet. Mixins improve code reusability.mixin are created using @mixin directives. @mixin Directive: Used to create Mixins.

The mixins are included in code using @include directives @include Directive: used to include…

Sass Part 6 – Sass with Node.js based applications, Sass output styles
css , SASS , Uncategorized / January 30, 2020

This part of the Sass series aims at helping to set up Sass in Node.js projects. Sass preprocessor used with Node.js is the one written in c++ called libSass. node-sass is the library which binds Node.js applications to LibSass preprocessor. Part 1      – Introduction, variables, and nesting in Sass. Part 2     – @-rules and Directives. Part 3     – Operators and control directives in Sass Part 4     – Built-in modules and functions. Writing custom functions with @function and @return Part 5     – Understanding mixins, creating mixins in Sass using @mixin   WHAT YOU WILL LEARN Setting up Sass in Node.js applications. The four output styles of Sass.   Sass with Node.js applications and Sass output styles Create a project with npm init. Install node-sass using the command

Now create an SCSS file, test.scss with the following syntax.

Now, there are four output styles in Sass. compressed nested compact expanded Output styles determine the style of generated CSS. –output-style provides the option for providing output style.      Now run the command

This command will generate a CSS file test.css, with a compressed style.


–output-style nested will generate a CSS file test.css with style like…

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…

Share this page in social media platforms