Willow, a ‘state of the art’ quantum chip

In the month of December 2024, Google announced it’s new hardware called Willow, a Quantum Chip. Google claims its abilities as the state-of-art performant across a number of metrics, which means that it is the most advanced technology till today (by the end of 2024).

Google says, Willow outperforms and excels at 2 major achievements:

• Quantum error correction

  • Quantum error correction is a foundational concept in field of ‘Quantum Information’. In quantum computers, error correction is very crucial because efficient quantum algorithms make use of large scale quantum interference. It is fragile and may lead to lack of accuracy in the computer performance and it eventually leads to unwanted blend between the computer and the rest of the world.

• Sets new standards of computation speed

  * Willow claims it's benchmark computation speed that would defeat one of the today’s fastest supercomputers. Willow could perform a complex computation in under five minutes which require 10 Septillion years for supercomputers like ‘ORNL’s exascale supercomputer’.

  One Septillion = 10²⁴

  It means 10 Septillion years means 10²⁵ years of time.

  Exascale supercomputer’s approximate computing speed is estimated to be one Quintillion operations per second.

  One Quintillion = 10¹⁸

To get a better understanding of the word "Quantum" let’s dive a bit deeper to its core…

What is Quantum and a quantum particle?

A Nobel laureate, Germany Physicist Max Planck proposed a theory that explains Black body radiation and energy particles called Quanta. He won Noble prize in 1918 for his remarkable work in theoretical physics. Max Planck’s Quantum Field theory defies the laws of Physics which lead to a discussion in science communities around the world and today’s world remembered him as “The Father of Quantum Theory” and also revered him as one of the founders of “Modern Physics”.

In the early days of the 20th Century, different scientists around the world attempted to explain Black Body radiation but it did not bridge the gap between the theory and practical aspects of it.

On the 19th October, 1900 Max Planck presented a new radiation principle that describes the energy distribution of thermal radiation and it stood incompatible with classical physics. Max Planck’s radiation principle explains radiation in the form of energy particles called { Quanta } and each particle is called { Quantum }

When he proposed this revolutionary concept, it was unnoticed at that time. But subsequently slowly it grabbed the attention of the scientists around the world.

when the temperature of a black body increases, it emits or absorbs energy in the form of quantized (chunks) electromagnetic waves rather than continuous flow. Energy gain or loss happens in the form of multiple small energy packets. This smallest energy particle is called Quantum.

Max Planck’s energy quantization explained with the help an equation:

E = hv

where ‘h’ denotes Planck’s Constant whose value is equal to 6.62607015X10^(-34) Joule Sec,

and ‘v’ denotes the frequency and ‘E’ denotes the Energy of the photon (light) particle.

This equation solves ultraviolet catastrophe and it clearly states that:

When assuming the energy emission happens only in the integral multiples (hv) from an object (like black body), the frequency of that electromagnetic radiation is directly proportional to the magnitude of the radiating energy.

In simple terms, Energy of a particle is directly proportional to its frequency.

Max Planck named such energy particle as { Quantum }

Max Planck’s constant plays a crucial role in understanding the motion of atoms, subatomic particles which shows a way to study the functioning of computer chips, solar panels, lasers… etc.

And this resulted the new branches of Physics to emerge like “Quantum Mechanics” and “ Modern Electronics”, “Quantum Optics” and others. Quantum Mechanics plays a crucial role in explaining and creating many things in today’s world like,

• Flash memory drives in USB apply quantum tunnelling to erase memory cells.

• GPS (Global Positioning System) works on atomic clocks that work on quantum mechanics principles.

• Electron microscope works on the quantum tunnelling concept and it can magnify objects to millions of times to their original size.

• MRI (Magnetic Resonance Imaging) is used to study tissues in organic matter like human body and it works on nuclear magnetic resonance, which is a combination of quantum mechanics and classical electrodynamics. During MRI scanning, hydrogen atom is used to generate high resolution images of the tissues.

• Quantum mechanics is used to study the evolution of starts and their existence which helps scientists to study and explore solar systems and the universe.

• Quantum cryptography, Lasers,….. and so on.

{ To be acquainted with topics mentioned in this article like Quantum Theory and its applications need a lot of explanation and discussion which is out of scope in this article…. }

Wave - Particle Duality

Debate about the nature of atomic particles among the scientists around the world dates back 17th century. At that time, Isaac Newton proposed the nature of light as corpuscular where as another scientist Christiaan Huygens stated it as wave nature and both of these theories contradict each other. Later, Isaac Newton appeased both the theories and proposed a new theory called wave-particle duality of a light.

In the 18th century, Thomas Young’s double slit experiment proved that the photon particles have wave nature as a result of diffraction of the particles emitted from the source which created light and dark spot patterns on the receiver. Scientists further studied this behaviour and they found that when a detector (observer) is placed on the photon beam, particle nature of the photons is observed otherwise they exhibit wave nature. From there onwards the concept of wave - particle duality was widely discussed among the scientists of that time including Einstein, Heisenberg and others.

How wave particle duality is related to computers in 2024-25?

Quantum computers solve mathematical problems at an exponential speed which is unattainable or a tedious task even for super computers that exist today.

In today’s classical computers, Bits are fundamental units of data. To process any kind of operations inside a computer, a Bit can handle a state of either 0 or 1 at a time which limits the speed of calculations and computations of more complex problems whose out come is based on exceedingly high precision values.

In quantum computers, the fundamental unit of data is a Qubit. A Qubit at a time can exist in a state of either 0 or 1 or both which is a Superposition of both the states. It means a Qubit can handle a binary nature of a Bit at a time which simulates the wave-particle duality. When Qubits entangle to each other, one can influence the state of another, even though they are far away from one another. It leads to something called Quantum Parallelism. This condition of qubits creates the powerful correlation between them and adds exponential calculating power of the computer. Different Quantum algorithms in quantum computers work on the principles like Superposition, Entanglement and Interference to get the accurate results of more complex problems with faster computation speed.

When we observe all of these topics of Quantum mechanics and computing, we may have a feeling of a different reality / dimension. And we can call it as ‘realm’, a Quantum Realm.

Does Quantum Realm really exist?

May be, yes…!

The existential dimensions of subatomic particles and Boson particles like Photons at which they exhibit their behaviour can be termed and visualized as Quantum Realm. Scientists, Mathematicians and Technologists around the world are still working on the concept of quantum realm to decipher and manifest it to the human scale. Once they find a way, it is expected to solve hidden mysteries in the nature.

Tech giants and Quantum Computers in today’s world (…2025) !

Big players around the world have been working on the research and development of AI Accelerated Chips which could work on Quantum Computing principles.

IBM

IBM has quantum exploration facilities such as Quantum Composer and Quantum Lab. In the year 2025, IBM is aiming to release the largest quantum computer ever, by combining many quantum chips in parallel.

Google

Google Quantum AI is a actively working on faster ever - computing abilities. The Quantum Artificial Intelligence Lab is a collaborative research facility undertaken by Google, NASA and The Universities Space Research association.

NVidia

NVidia’s CUDA-Q is a platform that enables services on CPU,GPU and QPU. This platform offers GPU simulations when adequate QPU resources are not available. In early 2025, NVidia’s Blackwell architecture was announced for AI Accelerated chips, which can simulate Quantum Computing and hybrid application development procedures. And NVidia also announced it’s next release ‘Rubin’ a superchip successor of Blackwell in 2026.

Amazon

Amazon Bracket service is an accelerated quantum computing research facility on Amazon cloud. It allows the users to connect multiple quantum computers.

IonQ

IonQ offers quantum services for customers of various needs. And it uses CUDA-Q platform.

Many other players around the world are in the race of Quantum and AI supremacy*.*

What the future holds..!

Exciting and Unknown….!

I conclude here, as the topics discussed in this article are just a glimpse of quantum mechanics and its applications in the field of computing. However, each one of them has a potential of individual study and research allowing an in-depth exploration of the subject.

JavaScript has a special object called ‘Set’. A Set() is a constructor that creates a set object and holds a few methods as explained here and with help of those methods it can perform different operations of sets like union, intersection, difference etc.

Syntax:
<declaration> <identifier> = new Set()
or
<declaration> <identifier> = new Set(<array>)

Eg:

const a = new Set([1,2,3,4,5])

A Set in JavaScript is a constructor which can only be initialized with new operator. An empty set can also be created and utilized later to add, modify or delete some data with the help of its instance methods.

Like other objects in JavaScript (such as Map), Set has generic properties and methods such as size, has(), keys(), values().

For example, let's consider a new set:

const setSample = new Set([0.1,22,3,43,54,0.5,101,121,200])
setSample.size    // returns: 9
setSample.has(200)  // returns: true
setSample.has(2010)  // returns: false
setSample.keys() // returns set Iterator
setSample.values() // returns set Iterator

Every Set by default contains a special instance methods like keys() and values() which in return creates an iterator object.

• In JavaScript all built-in iterators inherit from Iterator class

Consider 2 sets A and B and lets go through some basic math:
Union: A∪B
Intersection: A∩B
Difference: A - B ≣ A \ B
SymmetricDifference: (A \ B) ∪ (B \ A)
isSubsetOf: A⊆B
isSupersetOf: A⊇B
isDisjointFrom: A∩B = ∅

A Set constructor holds a collection of instance methods which are used to handle these mathematical operations in JavaScript efficiently.

Let's consider 2 arrays namely ‘arrayA’ and ‘arrayB’ and thier sets ‘setA’ and ‘setB’ respectively:

let arrayA = [0,2,5,7,8,4,6,1], arrayB = [3,9,10,1,12,21,33,42,2];

const setA = new Set(arrayA), setB = new Set(arrayB);

Union of Sets

Use: To find unique features among set-like data entities.

Syntax: <set A>.union(<set B>)

Eg:

setA.union(setB);
// results in:  Set(15) {0,2,5,7,8,4,6,1,3,9,10,12,21,33,42}

It ignores the duplicates elements and makes a set of unique elements.

Intersection of Sets:

Use: To identify similarities between two set-like data entities.

Syntax: <set A>.intersection(<set B>)

Eg:

setA.intersection(setB);
// results in:  Set(2) {2,1}

It gets the common elements among them and ignores the rest of the elements.

Difference of Sets:

Use: To find the features that are present only in the first one among the two set-like data entities.

Syntax: <set A>.difference(<set B>)

Eg:

setA.difference(setB);
// results in:  Set(6) {0,5,7,8,4,6}

setB.difference(setA);
// results in:  Set(7) {3,9,10,12,21,33,42}

setA.difference(setA);
// results in:  Set(0) {}

Symmetric Difference of Sets:

Use: To get rid of the common features among the two data entities. In other words, it is quiet opposite to Intersection.

Syntax: <set A>.symmetricDifference(<set B>)

Eg:

setA.symmetricDifference(setB);
// results in Set(13) {0,5,7,8,4,6,3,9,10,12,21,33,42}

setB.symmetricDifference(setA)
// results in Set(13) {3,9,10,12,21,33,42,0,5,7,8,4,6}

Disjoint Sets:

Use: To verity if both of them do not match each other.

Syntax: <set A>.isDisjointFrom(<set B>)

Eg:

setA.isDisjointFrom(setB);
// results in Set() {}

Subset of Sets:

Use: To verify if the first data entity is a part of the second one.

Syntax: <set A>.isSubsetOf(<set B>)

Eg:

let arrayA = [9,10,1,21], arrayB = [3,9,10,1,12,21,33,42,2];
const setA = new Set(arrayA), setB = new Set(arrayB);
setA.isSubsetOf(setB);
// result is true

setA.isSubsetOf(setA);
// result is true

Superset of Sets:

Use: To verify if the first data entity has the second one as a part of it.

Syntax: <set A>.isSupersetOf(<set B>)

Eg:

let arrayA = [9,10,1,21], arrayB = [3,9,10,1,12,21,33,42,2];
const setA = new Set(arrayA), setB = new Set(arrayB);
setB.isSupersetOf(setA);
// result is true

setB.isSupersetOf(setB);
// result is true

Besides these regular math operations, Set constructor also holds other instance methods to operations like CRUD, iterations etc.

add() delete() clear() size() has() entries() keys() values() forEach() Symbol.iterator next()

Examples of these operations:
Let’s consider arrays p1,p2,p3,p4 and p5.

let p1 = ['ravi',25,'Indian', 'graduate','techie']
let p2 = ['Ravi',32,'Indian', 'graduate','no-techie']
let p3 = ['Ronald',23,'American','highSchool','techie']
let p4 = ['Arun',32,'Indian','graduation','techie']
let p5 = ['Dennis',40,'American', 'under-graduate','non-techie']

Using a Set constructor we can create different sets out of each and every array as shown here:

const setP1 = new Set(p1) 
const setP2 = new Set(p2) 
const setP3 = new Set(p3) 
const setP4 = new Set(p4) 
const setP5 = new Set(p5)

let countryCriteria = ['Indian', 'American','European']
let ageCriteria = [23,25,32,40]
const setCC = new Set(countryCriteria)
const setAC = new Set(ageCriteria)

Advantages of Sets

• Sets avoid unnecessary iterations through arrays' or objects' data.

• They do not modify original array of data.

Real-time scenarios

There are some real-time scenarios where Sets make developers' life easy such as when any two data entities (sets) are considered:

• Useful to find unique entries in a data collection like stores, books, etc.

• Missing entries from a large data sets (like Censuses in a city) can be found easily with minimal coding efforts.

• Find out if an existing user is entering / leaving the chat rooms or from online meeting areas.

• In a large scalable applications, compare and filter the datasets based on certain predefined features and restrict their access to a particular domain routes in that application.

• Identify similar molecular structures in various chemical composition data.

• Identify and keep track of similar cyber attacks that happen frequently on a large scale of networking pipelines.

Order of Complexity

Iterators use index numbers to locate their elements where as Sets use Hash tables. Hash table is a data structure and it is a generalization of an ordinary array whose expected time of search reasonably is O(n) where an average value of n=1.

Hash tables are more performant while executing operations like data searching and sorting etc on large data sets. They work on key-index combinations instead of iterating through an entire array of elements.

Order of Complexity of sets can be represented as O(log N), sometimes O(N). It depends on the complexity of the logic written.

Let’s take an example of 2 arrays, find common elements in both of them and remove similar ones from the resultant array. Perform this operation in 2 ways:

• Without using Sets

• Using Sets

 let arrResult=[];
 let arr1 = [1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,20,1,2,3,4,5,6,7,8,9,30,1,2,3,4,5,6,7,8,9,40,1,2,3,4,5,6,7,8,9,50,1,2,3,4,5,6,7,8,9,60,1,2,3,4,5,6,7,8,9,70,1,2,3,4,5,6,7,8,9,80,1,2,3,4,5,6,7,8,9,90,1,2,3,4,5,6,7,8,9,100,1,2,3,4,5,6,7,8,9,110,1,2,3,4,5,6,7,8,9,120,1,2,3,4,5,6,7,8,9,130,1,2,3,4,5,6,7,8,9,140,1,2,3,4,5,6,7,8,9,150,1,2,3,4,5,6,7,8,9,160,1,2,3,4,5,6,7,8,9,170,1,2,3,4,5,6,7,8,9,180,1,2,3,4,5,6,7,8,9,190,1,2,3,4,5,6,7,8,9,200];
 // Lenght of arr1 is 200;
 let arr2 = [1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,20,1,2,3,4,5,6,7,8,9,30,1,2,3,4,5,6,7,8,9,40,1,2,3,4,5,6,7,8,9,50,1,2,3,4,5,6,7,8,9,60,1,2,3,4,5,6,7,8,9,70,1,2,3,4,5,6,7,8,9,80,1,2,3,4,5,6,7,8,9,90,1,2,3,4,5,6,7,8,9,100];
 // Lenght of arr1 is 100;

Let arr1 and arr2 are two different arrays (as shown above) with lengths 200 and 100 respectively.

arrResult is an empty array to store the common elements in both the arrays after removing the duplicates.

Without using Sets:

arr1.filter(e=>arr2.includes(e) ? !arrResult.includes(e) ? arrResult.push(e):'':'')
console.log(arrResult);

In this method, the browser takes 0.6000000238418579 milli seconds to execute the logic.

Using Sets

let setArr1 = new Set(arr1); 
let setArr2 = new Set(arr2);
arrResult = [...setArr1.intersection(setArr2)]
console.log(arrResult);

In this method, the browser takes 0.3999999761581421 milli seconds to execute the logic.

In this case, using sets is 66(+)% more performant than the previous method.

Package Managers

Sometimes…, Front End engineering seems more complicated but there is alot to explore besides ever changing technologies. Moreover, it is not dependent on any technology or platform as it is a methodology.

If one can imagine, besides traditional technologies, JavaScript has been in existence and evolving like a parallel world. It is everywhere and still unfolding day by day.

Nowadays, the words like packages, dependencies, modules, bundles are very popular in modern javascript. To understand these terms, we have to look at modules first. What are they about…!

Modules

Simply saying, a module is a discrete block of code that can be exported from one file and imported in another file. Every item in a module like variables, functions, objects etc can be exported individually. This approach gives more control over complex functionality. In other words, it is called modular programming .

A well defined module comprises of a properly encapsulated unified structure which can have a clear functionality written that supports the overall application or a part of it.

Those who are working with modern JavaScript technologies like React, Angular, Vue, NodeJS etc., use modules knowingly or unknowingly. As mentioned, modules can be exported with a built-in keyword in javascript called export .

They can be imported in 2 different ways:
ES5 standard

require(‘......’);

ES6 standard

import < ___ > from ‘ ./< ___ > ’ ;

Early days

Now, to have a clear idea of Package Managers, first we have to know why they are important in today’s world. When we go through the backstory of package managers, it seems that they are not new. During the early days of Linux and Unix, software downloading and installation was held using FTP or through some kind of data source. To get rid of this process further, Linux and Unix operating systems first introduced the practice of Centralised Systems like those we are using in these modern days, for example npm. That centralised system is completely based on GNU.

GNU means ‘GNU is not Unix’. It is a recursive acronym. It means, it refers to itself, where ‘G’ is silent. GNU consists of many tools and services used for different purposes with broad usage in the field of software. It holds different components of toolchains which are often used to develop applications and to write operating systems. And often GNU is referred to as “an Operating System that is free software “.

In fact, the Linux operating system is a combination of GNU software and Linux kernel. That’s why they call it GNU/Linux. Ofcourse, there are different flavours of Linux intended for varying purposes.

With the practice of centralised systems, tar files were used to pack the software setup files and to distribute them. In fact, the first versions of tar files are not compressed files or folders. They are just like a collection of files together. In other words, a tar file is an archive of files. Those files can be unarchived / untar to extract the necessary files. ‘Configure’ scripts can be initialised using GCC (GNU Compiler Collection) or with some variant of C compilers. Those scripts (./configure) will set up the software besides inspecting the application for dependencies. If any required dependencies are missing, the script would not allow the installation process to proceed further until those requirements are fulfilled.

dll Hell

On the other hand, once the process is done successfully it creates a file called ‘makefile’. This file can be accessed with the help of ‘make’ command which actually instals the software. ‘Make’ is a utility tool which maintains and manages various components of system programs. When the make command is used in the terminal, it reads instructions inside Makefile where different rules for dependency, macros etc., were defined. And it automates complex tasks like software builds, dependencies to execute in the shell etc.

This process results in creating binary files which is crucial in order to maintain hardware compatibility with the upcoming software requirements. But this whole process is annoying, troublesome and takes a lot of time to complete. Imagine how tedious it is to update an installed software in a system. In operating systems like Windows, this kind of complexity was termed as DLL (Dynamic Link Library) HELL.

Inception of Package Managers

This is where the Package Management System comes into play to overcome such complexities of early days software installation and development.

A Package consists of:

• Compressed files

• Precompiled binary files

• Metadata ( like author’s name, description, version number, licence, vendor, cryptographic information etc )

• List of dependencies (used to install the software without any hurdles)

By the way, a package is not responsible for maintaining those dependencies.

Package managers are widely accepted throughout the world consistently and have improved a lot. With the help of a package, it is easy to install, configure, update or remove software. Now such tasks have become as simple and fun as eating peanuts. This system of package managers eliminates manual installation processes and complexities like DLL HELL .

In Existence

Have a look at different package managers from various platforms:

Most of the following package managers are command-line utilities. Even though the purpose of their usage is the same, they differ in their features that are based on the platform they work with.

RedHat Package Manager

• It is intended for Linux distributions.
• It has its own database of packages’ information.
• It has file formats with .rpm extension.

Syntax:

rpm [option] [package_name]

Eg:

rpm -ivh thunderbird-78.6.1-1.el7.centos.x86_64.rpm
rpm -qa
rpm –help

Yellowdog Updater Modified

• It works on Linux.
• It is a front-end utility package manager that works on RPM.
• It has its own database of packages’ information.

Syntax:

yum [options] [command] [package]

Eg:

yum -y install thunderbird
yum -y remove thunderbird
yum install dos2unix
yum search all
yum list all
yum help

Node Package Manager

It works on the NodeJS runtime environment. It is the world’s largest registry with over 1 million packages and 11 million developers worldwide.

Syntax:

npm [options] [command] [package]

Eg:

npm install create-react-app
npm install axios
npm i react-router-dom@6
npm audit fix
npm --version

It is just a brand name.

The developer of YARN stated that he thought of its name as KPM (Kittens Package Manager).

• But they named it so to create a unique brand.
• It has Caching mechanism, Checksum of packages, Workspaces which aims at Monorepos.

NPM and YARN are widely used in NodeJS Environments

Syntax:

yarn [options] [command] [package]

Eg:

yarn add create-react-app
yarn add axios
yarn add react-router-dom@6
yarn audit –groups dependencies
yarn help
yarn version

pnpm

Performant Node Package Manager

• It has monorepo support.
• It creates hard links in the global space of the system with reference to every package in the node_modules folder of the project’s local space. Hard links are references of a file like pointers. They do not occupy extra space in the system’s memory unlike files and folders do.
• In the case of Windows Operating System, pnpm uses junctions (soft links) to create a dependency tree of the packages.

Syntax:

pnpm [command] [option] [package]

Eg:

pnpm create react-app
pnpm link --global
pnpm link --global dependencies
pnpm exec jest

Both NPM and PNPM deal with Dependency Tree Structures.

HOMEBREW

macOS and Linux based package manager

• First, It instals packages and it symlinks them to /usr/local directory on macOS.
• Here, in cli formulae are used which are nothing but packages and scripts.

Syntax:

brew <command> [--verbose|-v] [options] [formula]

Eg:

brew install node
brew list
brew doctor
brew help
brew --version

Windows based package manager

• It works with powershell.
• Here, packages encapsulate all necessary files into a single unit of artefact that is suitable for deployment.
• Such a collection consists of installers, executable files, zipped / compressed files and scripts compiled into a package.
• Compiled packages have an automatic virus scanning system to strictly block malicious and pirated software or attacks.

Syntax:

choco <command> [package] [options]

Eg:

choco install nodejs -y
choco install sysinternals
choco install ruby
choco uninstall ruby
choco help
choco -?

choco -? It is a general help command, same as choco -help.

PIP

Pip Installs Packages. It is an acronym.

• It works in a Python environment. And it is independent of system interpreter.

Syntax:

pip <command> [package] [options]

Eg:

pip install Django
pip install flask-bootstrap
pip list
pip --version

Gradle

Works on different platforms

• It is used for build automation.
• It is highly customizable and powerful with a rich ecosystem of APIs and plugins.

Syntax:

gradle [taskName...] [--option-name...]

Eg:

gradle test deploy
gradle dist --exclude-task test
gradle tasks --group="build setup"
gradle -q help –task libs
gradle --help

Apache Maven

• It is used for Java Projects to deal with build automation processes.
• It deals with project builds, reporting and documentation from its centralised ecosystem.

Syntax:

mvn [options]:<command> [options] [options]...

Eg:

mvn install
mvn package
mvn compiler:compile
mvn dependency:tree
mvn deploy
mvn clean
mvn verify
mvn archetype:generate
mvn --version

Used to create .NET Apps

• It distributes .NET libraries and these libraries are called packages.
• It has more than 297,210 packages as of today.

Syntax:

nuget sources <operation> -Name <name> -Source <source>

Eg:

nuget install packages.config
nuget config -Set repositoryPath=c:\packages -configfile c:\my.config
nuget list
nuget -help

APT

Advanced Packaging Tool

• It is Ubuntu’s package management system.
• Based on Debian GNU-Linux distribution.

Syntax:

apt <command> [package_name] [options]

Eg:

sudo apt install vim
sudo apt install /full/path/file.deb
sudo apt list
sudo apt --help

Steam

Based on Debian distribution

• It has official support from GNU/Linux.
• It is widely used as an application launcher for Video Games and other creative tools / assets.

Syntax:

steam [-options]

Eg:

steam -console
steam -tenfoot
steam steam://open/console
steam -shutdown

Wine

Wine is not an Emulator - it is an acronym

• It runs on operating systems that support POSIX (Portable Operating System Interface)
• It converts API calls into POSIX calls to run Windows Applications efficiently in the Desktop.

Syntax:

wine program [argument1] [argument2] ……

Eg:

wine winecfg
wine [ipconfig] [/all]
wine msiexec /i <filename>.msi
wine --help
wine --version

Package Managers have been gradually improved since their inception. Nowadays, they are used to automate different processes in the project pipeline.

This is a brief introduction about Package Managers

…keep an eye for the next article on Webpack.

STYLED COMPONENTS

A lot happens with the modern CSS and JS

A Styled Component is the combination of a DOM element and the rules that can style it.

In today’s JavaScript era, words like modules, components, functions, bundlers, transpliers, etc., are very popular and used widely. Components are very useful to develop scalable systems. An interesting feature that makes Styled Components more powerful is, CSS styles can be maintained as Components that can be reused at ease.

A Component

A Component is a popular term in the JavaScript World. Developers love to reuse their code whenever necessary instead of taking all pain to write it again. Component based Architectures are the robust way to solve a lot of issues in front-end engineering. Like native web components, a user defined css component is also possible but with a slightly different approach and with JavaScript/ES6 combination makes it possible.

Usually, a Component is a file with .js extension. A Class or a Function that can return something can behave like a component.

Now-a-days, CSSinJS is a popular term for components styling web elements and also for various other useful features.

Styled-Components

Styled-components is a library that makes the best use of CSS to style the Component based systems like React / ReactNative. ES6 standards play an important role in this aspect. The best part is we can use transpilers like Babel to make efficient use of this library. On the other hand, styled-components can be used easily along with other libraries.

Easy of use - Installation

First of all, like any other node based library or a framework, styled-components can be installed using npm or yarn. Use the following command in your terminal or CLI :

npm install --save styled-components

yarn add styled-components

CSS Components - the Basics

A Component is a code block that is wrapped with a reference name and can be reused. A CSS Component is a block of styles defined and can be reused in the form of a component which is a very flexible way to reduce the number of lines of css code.

Building Design Systems

Building a design system is one of the sophisticated approaches to foresee and solve many problems in the Front End Architecture of a Scalable System. Such design systems can easily be used among various groups of designers and developers at no extra effort. A Design System plays a vital role in creating a better user experience and Styled Components comprise of many distinct features to create such a sophisticated system.

CSSinJS

The way of css styling web elements with JavaScript/es6 support takes css standards to the next level. This approach is very feasible for developers to use and to implement it in scalable products.

In general, CSS in JS refers to dynamic css, server side rendering, auto vendor fixes etc. Styled Components have features that cover everything of CSSinJS and moreover it gives you a feel of ReactJS.

Props play major role

Props / properties are nothing but arbitrary inputs of Components. These are helpful to create intuitive theming of components and developers can use them to enable dynamic styling of CSS. Furthermore, props can also be passed conditionally to a component. Like in react, props are available in styled components as well.
Code Sample:
Styles.js -->

import styled from "styled-components";

export const MsgText = styled.div`
 color: ${(props) => (props.danger ? "#db0000" : "#04a134")};
 font-size: 20px;
`;

App.js -->

<MsgText danger> You are not authorised to edit page...! </MsgText>
       <br />
<MsgText> But you can view it. </MsgText>

Conditioning Styles

While passing props to a styled component, conditions can be added based on which the output(styling) of that component changes when rendered in DOM. Using a ternary operator is the best and shortest way to add conditions to props’ values as shown in the image below:

Flexible CSS Components (Extend / Override)

Unlike normal css, styled components allow us to inherit styles from another. There is a constructor called styled( )which makes inheritance possible.

Code Sample:
Styles.js -->

import styled from "styled-components";
export const MsgText = styled.div`
 color: ${(props) => (props.danger ? "#db0000" : "#04a134")};
 font-size: 20px;
`;

export const MsgGhost = styled(MsgText)`
color: ${(props) => (props.restricted ? "#adadad" : "#8b8b8b")};
`;

App.js -->

<MsgText> You can view it. </MsgText>
<MsgGhost restricted>This is Admin's Block.</MsgGhost>

Without disturbing the existing ones, overriding styles seems easy to use with the help of props. As shown in the above code sample, the styled( ) constructor modifies color property in MsgGhost that was inherited from MsgText and overrides its values with some props and conditions. Now, MsgGhost has updated color value and inherited font-size.
Eg:

Pseudo Selectors

Besides Sass and Less, Stylis is a light-weight css preprocessor. Styled Components library uses it to adapt nested styling, selector patterns etc. ‘&’ character makes different selector patterns possible, for example:

import styled from "styled-components";
export const Input = styled.input`
color:green;
&:hover { 
color:red; 
}
`;

In this code, &:hover represents the styles applied on hover of the input element. Similarly, we can make use of different selector patterns like we use in normal css, such as
&:focus
& + &
& ~ &
&.classname
&#id
...to mention a few.

Create Animations

‘Keyframes’ play an important role animating objects on DOM whether it is core css or any library/framework. It is the same case with Styled Components as well.

Combining keyframes with attributes binding features allow us to create a number of various interesting animations on the Web. Any css property can be animated except those who have boolean values. In particular, css properties whose values vary in a particular range instead of fixed values, can be animated to get nice visual appeal. Code Sample:
Styles.js -->

import styled from "styled-components";

const blinkText = keyframes`
 0%{color:rgba(9,113,241,1)}
 25%{color:rgba(9,241,38,1)}
 50%{color:rgb(241,137,9,1)}
 100%{color:rgba(9,113,241,1)}
`;
export const AnimTextC = styled.div`
 font-size: 30px;
 line-height: 70px;
 font-weight: bold;
 max-width: 800px;
 margin: auto;
 border: 2px dotted #e5e5e5;
 animation: ${blinkText} 2s ease infinite;
`;

App.js -->

import { AnimTextC } from "./styles.js";
export default function App() {
 return (
    <div className="App">
        <AnimTextC>Text Viz</AnimTextC>
    </div>
)
}

Eg:

Theming

Styled Components have huge support for theming UI Layers. It is easy to use and it reduces repetitive styles. It can be done using a specific wrapper to theme a UI and can be reused and customised with no time. is a wrapper component to wrap UI with themes. For example,
App.js

import { ThemeProvider } from "styled-components";

const cyanTheme = {
 regular: "#588a93", hover: "#31808f"
};
const brownTheme = {
 regular: "#816c6c", hover: "#5e4848"
};

<ThemeProvider theme={cyanTheme}>
    <form>
             <div className=”title”>Fill the details</div>
              ……. …. .. ..     
    </form>
</ThemeProvider>
<ThemeProvider theme={brownTheme}>
    <form>
             <div className=”title”>Fill the details</div>
             ……. …. .. .. 
     </form>
</ThemeProvider>

Styles.js

.title { color: ${(props) => props.theme.regular}; }

Eg:

Attributes

The Styled Components library provides us the right way to decorate a component and make it more dynamic yet simple to use. .attrs( ) constructor is available that can do all the work. This kind of approach is more useful for scalable projects instead of the smaller ones. Have a look at a sample code:

const Anchor = styled.a.attrs((props) => ({
 href: props.yahoo
   ? "https://www.yahoo.com"
   : props.google
   ? "https://www.google.com"
   : ""
   ? "#"
   : props.href,
 target: "_blank"
}))`
 color: blue;
 font-size: 16px;
 padding: 7px;
 display: block;
`;

Go through this example to understand it thoroughly:

Decorating a Component

Styled Components library provides us the right way to decorate a component and to make it user friendly with the help of props, attrs, conditions, dynamic styling, extending / overriding the styles etc.

A different type of prop is available which we can call it ‘Polymorphic’. Create a styled- component and we can render it as an html element as we desire. A keyword “as” is used like an attribute to make this happen, as shown below:

<button as=”a”>Click to open</button>

Here, a button tag will be rendered as an anchor tag as mentioned as=”a”. The value “a” refers to an anchor tag.

Refer this example for more details:

Similarly, a React Component can also be rendered as a styled-component by using polymorphic prop ‘as’.

... this is Styled-Components library at a glance. Still we can explore many interesting things when it is used along with any component based workflows like React.

...keep an eye for the next article on Package Managers.