This article highlights how to set up Light and Dark Mode in React application with SCSS modules.
In my personal opinion, I feel the presentation should be controlled only by the stylesheets and we must not add additional overhead in the React components (JS/JSX) to handle the theme changes.
Also, it will be better to configure the theme in the root component (Mostly App.js/App.tsx in react’s case)
Let’s create a react application using create-react-app with TypeScript configured.
npx create-react-app my-app-name --template typescript
Next, Let’s install SCSS in our project using npm install node-sass.
Convert the existing .css files into .scss files and change any imports to use .scss. …
It is very easy to get started with a react app just with a single “create-react-app” command. But it is always recommended to make sure that we have few things checked off from our initial set up checklist before making our hands dirty with code. These checklist items can definitely help the project in the long run.
Have you noticed how products are arranged in a Super Market? Soaps, Shampoos and Body Lotions are arranged together. Rice, Wheat and Dhall products are always grouped together. Similarly it is important for us to write CSS by organising how properties should be written within a selector.
This article highlights how properties inside a selector should be written and not on the specificity of how selectors should be written.
Look at the below CSS class selector “card”. This selector would definitely produce a neat output in the DOM. But do you notice how the properties are written inside the selector?
Most of us adhere to coding guidelines and practices when writing code. We’re aware of how variables, functions, classes, etc., should be named. We log comments when necessary, to help other developers working on the project.
It’s important to respect what your user types. In 90% of scenarios, users are running on a happy autopilot (and they’ll definitely be typing the correct thing).
As of March 2019, I have cycled 6000 kilometres in 2 years. My daily target varies from 15 to 25 km and 40+ kms in the weekends. Although it seems to be a small ride for cyclists who ride 100+ kilometres on weekends, believe me short rides around the outskirts are worth every day. I do get occasional rest during the weekdays due to late night office works, still I make it a point to get on the cycle just to fall in love with the nature’s visual treat.
I call it a “PERFECT morning” only if I had completed a ride. …
Trust is an important driving factor in business. How would you feel if someone says that he/she would sell a Product A for Rs.X and later keep on increasing the cost to Rs. X + Y + Z?
Online Vendor A : Sir, it costs Rs. 5000. Would you like to buy it?
You : Yes/No. (If your answer was Yes, the conversation continues.)
Online Vendor A: Here you go! Sold!
Online Vendor B : Sir, it costs Rs. 4000. Would you like to buy it?
You: Yes/No. (If your answer was Yes, the conversation continues.)
Online Vendor B: Here you go, adding service charges, transportation charges and then applying discounts, the total cost comes to Rs. …
SketchApp can do wonders with Borders. You can create different patterns using the Shape Borders.
Step 1 : Let’s take Oval Shape as an example (Click ‘O’ key to create an oval shape). Let it’s dimension be 700*700