How to start the local server for Cypress testing?

Running a Cypress test server is easy only when you have the right commands handy. Cypress documentation is a pain when it comes to referring them for an issue you are stuck at. Also, I have noticed that the resources on Google related to Cypress are limited. When you search for it, Cypress Official Docs are all over the search. And guess what, they aren’t much help when it comes to real life problems while coding.


There are cases when you would like to run your tests locally. Way before pushing your code to git, running tests locally can help identify failures.


Navigate to package.json file in your project folder. Scroll down until you see “scripts”

"scripts": {
    "start": "PORT=4000 react-scripts start",
    "testStarter": "PORT=9000 react-scripts start",

Script for starting test server is defined here. Look for the correct script defined in your project. For instance, to run a Cypress server, open a new terminal window, navigate to the project folder and type:

yarn testStarter

Now, in an another terminal window or tab, type this command to open Cypress window with tests listed:

For npm users,

npx cypress open

For yarn users,

yarn run cypress open

Click on the test you would like to run locally in your system. The test will run in the browser window and result will be displayed.


Hit me up in the comment section if you have any question.

Stay safe & Get Vaccinated! 💪🏻

Error: VSCode – Script Not Digitally Signed


Sometimes there’s an error in VSCode while we are trying to execute any command. The error reads like –

Script is not digitally signed. The script will not execute on the system


Changing the Windows PowerShell Script Execution Policy

The Set-ExecutionPolicy cmdlet enables you to determine which Windows PowerShell scripts will be allowed to run on your computer. Windows PowerShell has four different execution policies:

  • Restricted – No scripts can be run. Windows PowerShell can be used only in interactive mode.
  • AllSigned – Only scripts signed by a trusted publisher can be run.
  • RemoteSigned – Downloaded scripts must be signed by a trusted publisher before they can be run.
  • Unrestricted – No restrictions; all Windows PowerShell scripts can be run.

To assign a particular policy simply call Set-ExecutionPolicy followed by the appropriate policy name.

For example, this command sets the execution policy to RemoteSigned and can solve the problem

Set-ExecutionPolicy RemoteSigned

Reference – Microsoft Docs

Error: TypeScript 4.1: Could not find a declaration file for module ‘react/jsx-runtime’

Sometimes while working with React TypeScript, there are weird errors. One among them could be this.

Cannot find module ‘react/jsx-runtime’ or its corresponding type declarations.

There are several ways to go past this. The best one which worked for me among them is adding this piece of code in react-app-env.d.ts file.

declare module "react/jsx-runtime" {
  export default any;

Refer to this issue for more

Keep Coding 🎨

Easiest Way to Use any DSLR as Webcam on PC


There are a couple of different ways to turn your Nikon or Canon or Sony DSLR into a webcam for PC. The connection could be based on HDMI or USB as well as if you’re connecting using a PC, a MAC, or ChromeOS.

It is recommended that you use a tripod to keep the feed steady and have a power supply all the time connected. There could also be different audio recording options available to you. One best option is an external microphone because the in-cam mic is not always a great choice for crisp and clear audio.

There are camera-specific apps provided by Nikon and Canon. The limitation of these apps is that they don’t support all the camera models. For example, Nikon supplies Nikon Webcam Utility for PC and Mac. While Canon Webcam Utility is useful if you have one of the supported cameras. Sony has Imaging Edge Webcam for this purpose.

But what if you have a camera that is not the one in the list of supported cameras? Read below!


Let’s talk about the best all camera supported app present out there. digiCamControl is the best and free solution. This piece of software can help you connect any DSLR as a webcam.


  • Control your camera settings remotely from your Windows PC via USB.
  • Trigger image capture via the release button on the camera or remotely from your computer.
  • View histogram and photo metadata.
  • Review images in full screen.
  • See the image live through the camera on your computer monitor before shooting.
  • Record video
  • Histogram
  • Generate a time-lapse video.
  • Countdown counter for delayed capture
  • See a live view of the camera on the screen

How to use?

This image has an empty alt attribute; its file name is image.png
3 types of digiCamControl are available

There are 3 variants of the digiCamControl app. The first one is the stable version with all the advanced features. The second is the lite version with webcam features like a live display from the camera to the PC screen. It lets us set Aperture, ISO, Shutter Speed, Focus Mode, and Exposure Metering directly through this app. The download page can be found here.

Screenshot of digiCamControl Virtual Webcam app

For the purpose of using DSLR as a Webcam, the second version can do the job perfectly. Just download and install it. Plug in your DSLR with a USB provided with it and voila! You can see the live view feed from your camera to your PC screen.

The first version has advanced features like taking pictures, live view, viewing metadata and histogram, and setting a lot of other things. You can set image size, view battery percentage, set location of image storage, use presets, and plugins.

Screenshot of digiCamControl Stable Version

You can also find the list of supported cameras in the list located here –

Keep video calling! 😉

Fav Artist of the month: Mike Posner

Today I discovered that a new album of Mike Posner was released this week. It is titled Operation: Wake Up which truely signifies the meaning in songs.

The songs are like a story in which Mike is the main character. He describes how he is ready to shave off his hairs and his excitement to meet Jessie J. He shares his encounter with blackbear and story of his ex.

The music and beats are breakthrough. Best song is Weaponry with Jessie J followed by Posner’s rap in this song.

A recommended album if you are looking for amazing tracks for continuous 30 minutes. Here’s the link to Operation: Wake Up on Spotify.

Here’s an album for you… Operation: Wake Up Mike Posner

Happy Holidays and Merry Christmas 🎄🎅🎁

Pure React – Purely the best resource to learn React

There are numerous resources on the internet promising you to teach something in the best way. I agree that developers, creators, and writers have worked hard to deliver the course or a tutorial. It is fairly possible that certain resources can be helpful to some people but not everybody.


From the beginning when I started learning React in the early days, I was confused. There were tons of helpful resources. From Udemy lessons to blog posts, everyone was teaching React. Even today, React is the most popular JS library with infinite course material out there.

Today, there are amazing resources like Scrimba which provides a nice live editor to code alongside the video. You must have heard about Codecademy, a bit expensive but has features like side by side editor and easy steps guidance. Frontend Mentor provides an excellent way to practice your web development skills by working on the projects. It then lets you submit it and get the community feedback.


Discord servers like these have really helped people to ask questions and clarify doubts during the learning phase. Some of the popular servers are (with invite link):

  1. Reactiflux – a chat community of 110,000+ React JS React JS, React Native React Native, Redux Redux, Jest Jest, Relay Relay and GraphQL GraphQL developers.
  2. The Poppers Family – a family of 3400+ members helping each other.
  3. Scrimba Community – community with 8000+ members learning and progressing together.
Reactiflux – Community with a goal to hold developers together

Slack group of Frontend Mentor is popular with 31000+ members and counting. The community is trying to help each other in their coding journey.

Frontend Mentor Challenges is a nice place to test your knowledge

Pure React?

Pure React Book Cover ©

I recently came across the book which promises to teach React in its original form. I bought it to give it a try. The explanation given in the book is impressive. It is easy for a beginner to understand the concepts described in the book.

I have already told my friends who are looking forward to React about the book. Some of them have found this book a nice companion in their React journey. This book is totally recommended for beginners and intermediate learners of React JS.

Pure React is written by Dave Ceddia, who is a software engineer in Boston, USA. He primarily builds UIs with React.

Happy Learning 🦄

Error: Node Sass version 5.0.0 is incompatible with ^4.0.0

How do you solve this error while trying to use Sass in your application? I was struggling quite for some time with this error when I tried to use Sass.

Please scroll down a little for the Error solving part.

Get to Know SASS

Using an Scss file to style your React/Angular/Gatsby App can really enhance the CSS. SASS has helped in making CSS more awesome. Syntactically Awesome Style Sheets as its name goes, SASS is a language extension of CSS. Some of its features are:

  • Use Variables to declare the properties of elements
// Declare a variable like this
// $<variable-name>

// Example:

$main-fonts: Arial, sans-serif;

h1 {
 font-family: $main-fonts;
  • Nest rules to keep child rules within parent
nav {
 background-color: red;
  ul {
   li {
    color: white;

Debug Time – Solving the error

Let’s talk about the error 🍔

Failed to compile.

./src/App.scss (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-oneOf-6-3!./node_modules/s
Error: Node Sass version 5.0.0 is incompatible with ^4.0.0.

This error is related to versions and dependencies. Node-Sass is deprecated which means it is no longer maintained. Instead of it, we should use Dart Sass.

Latest version of SASS can be installed using this command if you’re using npm.

npm install sass

The error is also related to sass-loader which loads a Sass/SCSS file and compiles it to CSS. In order to solve this issue, you will have to manually install the latest version of sass-loader like this

npm install sass-loader sass webpack

then mention the version like this to install latest (currently v10.1.0)

npm install sass-loader@10.1.0

Once done, this error will no longer be an issue. Let me know if this solved the issue. I was quite frustrated after having tried every random step until I found this solution.

Cheers 🥗

Learn: What’s the Difference Between a URI and a URL?

Both of these mean different things, however are used alike. URI is sometimes confused with URL when in lowercase.

url -> uri

How are these 2 different?

  1. A URI is an identifier of a specific resource generally. Like a page, or book, or a document.
  2. A URL is special type of identifier that also tells you how to access it, such as HTTPsFTPs.
  3. If the protocol (httpsftp, etc.) is either present or implied for a domain, we should call it a URL—even though it’s also a URI.
  4. URL is more specific way of addressing an URI. It provides an access method/location.

Happy Learning 🍕

Display: Grid in CSS explained

This shorthand guide to CSS Grid focuses on major settings required for an efficient grid parent container and the grid child container.

Grid is known to be 2-directional systems. It can handle columns as well as rows. This is different from Flexbox which is used for 1-directional systems. This 2-directional system helps you get a better design control over the CSS elements on the web page or app.

Grid is supported by all the new age desktop, tablets and mobile browsers.

Grid goes well with Media Queries for different viewports/displays. Imagine defining the layout of your entire page, and then completely rearranging it to accommodate a different screen width all with only a couple lines of CSS. Grid is one of the most powerful CSS modules ever introduced.

Parent Properties

.container {
display: grid | inline-grid;
view raw grid.css hosted with ❤ by GitHub
.container {
grid-template-columns: 40px 50px auto 50px 40px;
grid-template-rows: 25% 100px auto;
view raw grid.css hosted with ❤ by GitHub
.container {
grid-template-areas: " | . | none | …" "…";
view raw grid.css hosted with ❤ by GitHub
.item-a {
grid-area: header;
.item-b {
grid-area: main;
.item-c {
grid-area: sidebar;
.item-d {
grid-area: footer;
.container {
display: grid;
grid-template-columns: 50px 50px 50px 50px;
grid-template-rows: auto;
grid-template-areas: "header header header header" "main main . sidebar" "footer footer footer footer";
view raw grid.css hosted with ❤ by GitHub

Child Properties

This is a 5 Columns and 4 Rows Grid
.item {
grid-area: <rowstart> / <columnstart> / <rowend> / <columnend>;
view raw grid.css hosted with ❤ by GitHub
.item {
grid-area: 2 / 3 / 3 / 4;
view raw grid.css hosted with ❤ by GitHub
Code for placing an item at a certain place in Grid

justify-self is used when aligning items along horizontal axis. While align-self aligns item along the vertical axis. One easiest way to remember this, as mentioned here, is to pay attention to the name.

justify-self ( justify-items in the case of flexbox) is for horizontal alignment of items. align-self ( align-items in flexbox ) is for vertical alignment.

.item {
justify-self: start | end | center | stretch;
view raw grid.css hosted with ❤ by GitHub
.item {
align-self: start | end | center | stretch;
view raw grid.css hosted with ❤ by GitHub
.item-a {
place-self: center;
view raw grid.css hosted with ❤ by GitHub
.item-a {
place-self: center stretch;
view raw grid.css hosted with ❤ by GitHub

Keep CSSing 🎈

How to add Dark Mode to any website?

Dark Mode toggle for Websites is the most demanding feature these days. Dark pixels help save energy in OLED displays while decreasing energy consumption in the case of other displays. It is mild on the eyes and puts less strain as compared to bright white light from the monitor.

Implementing Dark Mode is as easy as it works. Click on the toggle button, and there you are presented with dark colors. I have shared the code for the easiest Dark Mode checkbox which can be used on any website.


We would need a simple checkbox that will act as a toggle for Modes. toggleTheme function is defined below in the JavaScript file.

view raw index.html hosted with ❤ by GitHub


A dark class is created in CSS with dark colors for the background-color property and light color for text.

.dark {
background-color: hsl(199.2,89.8%,11.6%);
color: hsl(0,0%,94.9%);
view raw style.css hosted with ❤ by GitHub


toggleTheme function toggles the CSS properties of the body to the properties present in the dark class.

function toggleTheme() {
var element = document.body;
view raw script.js hosted with ❤ by GitHub

Find CODE here –

See the DEMO here –

Dark Mode Off
Dark Mode On

Another great example of implementation can be found here in this DEV article –