Easily add dark mode support to your app

Image for post
Image for post
Image credit: Author

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

Typescript is optional here. Feel free to create react application with normal JavaScript.

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.


Image for post
Image for post

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.

Image for post
Image for post
Set Up Roadmap

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. …


Make your CSS easier to understand with a little more organisation

Image for post
Image for post
Photo by Hanson Lu on Unsplash

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?

Image for post
Image for post

Yeah! You guessed it. …


Whitespace and comments are your friends

Image for post
Image for post
Photo by Fabian Grohs on Unsplash

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.

Image for post
Image for post
Fig 1. Code Comparison : Left Pane vs Right Pane

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. …


What not to do while validating forms

Image for post
Image for post

1. Stop Throwing Errors When Your User Is Typing

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).

Form containing email, first name, last name and password
Form containing email, first name, last name and password
Figure 1: Email on key-press validations

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?

  1. Avoid key-press validation for email, names, and contact numbers. Rather, validate them on blur or change.
  2. For fields like password, validate the constraints on key press. Example: Your password constraint might include a lowercase, uppercase, number, and symbol. In such scenarios, highlight the user’s progress on key press. …

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.

Image for post
Image for post
All these patterns were created by altering the border of Oval Shape in Sketch

How to create Patterns using Border

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

Image for post
Image for post
Step 1 : Draw a Circle (700*700)

Step 2 : Increase the Border Thickness (Probably a bigger number. say 400)

Image for post
Image for post
Step 2: Add Border (400) to the Circle

Step 3: Click on the Gear Symbol near Borders and change the Dash Value. Try changing Dash and Gap Values to create different Pattern.

Image for post
Image for post
Step 3A: Try Changing Dash Value to create patterns
Image for post
Image for post
Step 3B: Observe the Pattern. Try changing Dash, Gap Values to create different patterns.

Step 4: Change Fills & Border Color

Image for post
Image for post
Step 4 : Pattern with Color filled. The Dash value is changed to 20.

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.

About

Nijin Vinodan

Designer + Developer | Traveller | Cyclist

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store