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.
From the above roadmap,
1. Dark Lines highlight the recommended checklist.
2. Dotted Lines - if you wish to skip any paths.
Step 1: Create React Application
Let’s navigate to our codebase folder and create the project using “create-react-app” command.
npx create-react-app my-app-name
Note: You are welcome to use yarn. …
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?
Yeah! You guessed it. …
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.
Both panes have the same code, but the one on the right has comments. Comments in code make it easier for other developers.
But how easy is it for the other person to scan and reach a particular section in a large chunk of code? This is where line spacing comes into play.
In Fig. 2 Notice Line Numbers (12, 25, 35) are left blank intentionally, to ensure that there’s is a logically cut between two different components or sections. …
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).
Consider the above scenario (Figure 1) — a user is in the process of keying in a correct email address, but the form tries to validate on key press. Why should the form throw an error message when the user is typing a correct address?
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
Step 2 : Increase the Border Thickness (Probably a bigger number. say 400)
Step 3: Click on the Gear Symbol near Borders and change the Dash Value. Try changing Dash and Gap Values to create different Pattern.
Step 4: Change Fills & Border Color
Guess, this story would have helped you to learn how to create different patterns using Borders. Try the same behavior with different shapes and enjoy designing patterns magically.