Forem: lizardkinglk

Custom JSON Validator

lizardkinglk — Thu, 12 Jun 2025 14:24:45 +0000

Introduction

As a developer I want to make cool apps and learn the insides of systems and know how they behave. The goal is to become a better dev. So I found this coding challenges newsletter. It has many build your own challenges with references linked to resources. Step by step approach with, in each step describing the goals need to have or achieve in the solution.

Building your own json parser is one of them. So I tried it and could achieve the goals.

Below is the link for the challenge so you can check it out.

Build Your Own JSON Parser

This challenge has the final target of validating JSON also known as syntactical analyzing AKA parsing.

Resources

There are many resources provided in the challenge page. For validating a syntactically correct JSON is that the JSON should follow the correct JSON grammar. These JSON grammar is provided in the challenge page with resource linked to below page.

Introducing JSON

There is another resource that points to a book called 'Dragon Book'. This dragon book describes everything about compilers. This parsing is an area or an early step of compiling a language.

Also the challenge has provided some official test data I call them. You can access them in the challenge page.

Approach

My approach to implementing the solution is using the test data given in each step and overcome the goal for that with TDD (Test Driven Development) approach.

Started as a console app and increment the functionality in each step.

Besides the official test data, each step has test data that is not enough for me and I thought I should add more tests. So I added custom test data as well.

How to do?

To put it simply figuring how to is an incremental process and my tests failed with each change and debugging helped a lot. As an example I thought I can simply trim the json string and use split with commas to divide them and do the validation with the content in the splitted array.

But it raised questions like whenever I split them it could be spliting them from the characters which might be inside a string literal. So I had to refigure. This took couple of iterations of figuring outs and I finally came up with a solution.

That is if I started from first index and read every byte to the last index then I can choose which is valid json and which are not. If any byte contains invalid JSON then I stop the process and return failed error message to the user regarding the invalid json found. If not it is valid JSON and program ends with success.

Summarize steps

To achieve the challenge I'm following these steps below.

1 Read the user's arguments from the Command Line

These commands contain only the file path argument (so far) which points
to a text or json (preferably) file path.

2 Validate the path and read all of the content then put it to a Character array

This JSON String acts as read-only variable throughout the execution.

I put the content to a character array because if I simply used
the json string (which I previously did) I realised it
using more memory as I'm passing the string jsonString
argument to many functions in the solution.

The reason behind this is, strings acting as value types allocating more
memory for the copy of variable inside the function that gets passed to.
To avoid this, using a character array to store the JSON String was
an option because it behaves as reference types saving memory, avoiding
the overhead of copy operation.

Another reason to use a character array is the ease of using indexes or
simply direct memory access.

But there must be a caveat here as the size limitation for character array
could only be too much.

I should handle it with a message to the user
or find a solution like separate it to different arrays to
validate as subtasks for bigger files.

3 Validate the starting character

Then from the start, as the starting character there could be either,

curly brace - '{'
square brace - '['
or a bunch of whitespace characters as the starting character.

So my solution has a function named ValidateNextCharacter
that goes to target character reading from a given index
of the array excluding the whitespace characters.

All of the whitespace are ignored until the target character.
And there can be special characters including
backslash - '\'
alphabetical - a-z
symbols - '[!@#$%^*.]' etc.

If any of it contain above non-whitespace characters
then validate it as invalid json as the target character
only could be either curly or square brace.
(Even in vscode the value literal itself could be valid json,
the challenge and json standard does not comply with that)

4 Validate JSON Object

Let's assume the starting character is for a JSON Object

scenario1
{ "key1": "value1", "key2": "value2" }

As you can see, it contains key value pairs separated by commas
and should end with clossing curly brace.
(Don't forget the whitespaces)

If it contains none of that then the json object should be like below.

scenario2
{}

So let's say the starting index is like below,

current starting index being 2
This is for the first scenario with two key value pairs.
Character at this starting index is double quotes - '"'

current starting index being 1
This is for the second scenario with no key values and no whitespaces.
Character at this starting index is close curly braces - '}'

So we need to figure out which scenario path we should go.
In my soultion there is a function called ValidateFirstOccuringCharacter
to check what character comes first between a character set
and another character.

As an example for this scenario we need to call our method like below.

ValidateFirstOccuringCharacter(ref startIndex, [Quotes], CloseCurlyBrace)

In here, startIndex argument is passed by ref for modify it in a single place
in memory and the second arguemnt for parameter is the character set
as array that contains only quotes.
The last argument being the Close Curly Brace
which is expected as the second character.

What we achieve by doing this is figuring out if
either the JSON Object contains key values
(if that is the case then our solution knows it by returning 0)
or
it returns 1 if there were no key value pairs found.

Furthermore,
This validates whitespace characters
and returns -1 if illegal characters were found.

If it returns 1 which means that is the
scenario2 - '{}'

Then we can think the JSON is valid and the result is handled
to the user with the success message.
But what if there was a scenario3 which is an extension to scenario2.
What if the JSON object would look like this below?

scenario3 - ' { } '
Not a problem. Validate whitespace and reach curly brace open.
Check for first occuring character to be either Quotes - '"' or
Close Curly Brace - '}'

Can close as valid JSON but can we actually?
Without validating until the end of the file we can't be certian.
See the scenario4 below

scenario4 - ' { } what? '
The word 'what?' is invalid json as we concluded the JSON Object as
valid and it cannot contain values outside of whitespaces.
So in my solution there is a function named
ValidateLegalTrailing

This validates if the last set of characters to be contain only whitespace.
So if 'what?' or any other illegal characters were found then
the solution handles as invalid.

We can see that empty arrays - '[]' can also be validated or even
spacious arrays - ' [ ] ' using these functions implemented.
Let's look into arrays with values later.

5 Validating Keys

In the previous JSON Object if keys were found then it should start with
double quotes everytime. We should iterate the key value pairs until
end of object that is Close Curly Braces - '}' were found.

Each key value pair are validated. To validate the key,
the procedure is below.
Starting from the first character of the key until the end
of the key content iterate the characters for illegal characters.
In here starting index is the index of quotes + 1 and last being
closing quotes - 1. See below.

       start index
       v
      "key1"
          ^
          end index

The invalid characters for the keys are
line breaks - '\n' and tab spaces - '\t'

So if any of these were found then the key is invalid.
Also if someone used any special characters which start from backslash
then these characters should escaped which means they should be followed
by character set mentioned in JSON reference provided in the challenge.
See below.

valid example but why put "\n" inside a key?

      "ke\ny1"

(this is interpreted by backslash - '\' followed by a
line character - 'n') I use a simple regex to match every and all of the
whitespace characters, escape sequences & special unicode characters
which exist within a JSON key. See below.

   ^(\\[\\""/bfnrt]{1}|(\\u[0-9aA-fF]{4}))$

See an invalid example below.

invalid example because of line breaks '\n'

      "ke <-- line break here
       y1"

Let's see another example

invalid example because '\y' is not a valid escape character

      "ke\y1"

(this is interpreted as - '\y' character. But since '\y' is
not in the given set of special characters in the
the JSON reference so this is a invalid JSON key scenario.

Same goes for tabspaces as well. Instead of line breaks this acts
as tabspaces. See below.

invalid example because of tab spaces '\t'

      "ke   y1"
         ^
         actual tabspace here

Note that validating values for string literals in
the value validation these rules goes the same.
Let's look into that later.

6 Validating Values

When it comes to JSON values that are used by not only JSON Objects
but also by JSON Arrays. They are validated by a common function that calls
separate and specific child functions in my solution.
These values starts with any of the below characters (or tokens)

   Negative        '-' for number values
   CharZero        '0' for number values
   CharOne         '1' for number values
   CharTwo         '2' for number values
   CharThree       '3' for number values
   CharFour        '4' for number values
   CharFive        '5' for number values
   CharSix         '6' for number values
   CharSeven       '7' for number values
   CharEight       '8' for number values
   CharNine        '9' for number values
   Quotes          '"' for string values
   OpenCurlyBrace  '{' for object values
   OpenSquareBrace '[' for array values
   CharNullStart   'n' for null as value
   CharTrueStart   't' for true as value
   CharFalseStart  'f' for false as value

So our ValidateNextCharacter should expect for a value within this array.

The solution checks for exact match for values of null, true & false
by using a two pointers method that implemented in the function
ValidateJsonValueForNullOrBool
These values must end with a Comma - ',' character
or a Close Curly Brace - '}' thus indicating no more key-value pairs.

For string values as mentioned previously it uses the same function
implemented for key validation as well. String values must end
with a Quote - '"' character.

For JSON Objects and JSON Arrays that appear as values they are validated
separately with functions and they use a recursion logic for validating
their children. More on that later.
Just like one above,
the termination character being either Comma - ','
or a Close Curly Brace - '}' for value found as JSON Object,
and either Comma - ','
or a Close Square Brace - ']' for value found as JSON Array.

For validating numbers I read the content until the termination character
which are any values ',', '}', ']' or any whitespace character.
So the numeric value itself can be validated regardless of what being
the termination character. (Termination character and whatever after
is validated by the called parent).
Collected numerical content is then validated by a regular expression.
The number could be simple or a scientific one. All numbers
should follow decimal representation as the JSON reference does not allow
0b - binary or 0x - hexadecimal values. There is a
caveat here as when the number is too long it might cause performance
issue. So it should be handled. The regular expression is below.

   ^[-]{0,1}(0|([1-9]{1})([0-9]{0,}))(\.[0-9]{1,}){0,1}([eE][-+]{0,1}[0-9]{1,}){0,1}$

Below are two great sources I use to practice and become
somewhat bearable at regex

RegexOne

RegExr

This regex matches for negative values and if not present
then its a positive.
i.e.
"-" as value is invalid. empty value (zero-length) for a value is invalid.

Then checks for other characters which is any digit either 0 to 9
i.e.
"-0" as value is invalid. "0" is valid

Then checks for multiple digits.
"-01" this is invalid as non-rational numbers in JSON cannot start with 0.
"-11" is valid. So is "12"

Then checks if rational number. If not then checks if scientific part was
included. If a rational number then it must start with a Dot - '.'
If it has a sceintific part then it should follow a Letter E - 'e' both
cases included. Then it must follow one or many positive or negative number.
"0.1" is valid. "12.01" is valid.
"-1.1E" is invalid. "1.12e2" is valid.
"1.12e+1" is valid. "-12.01E-1" is valid.

That concludes value validation logic.

7 Validate JSON Array

To validate JSON string that is also a JSON Array is bit easier but not
as performant as validating objects since it checks for containment of
any character included in the value prefix array which has many
comparrison hits to take.

So I need to start from reading empty whitespaces and then check
if an array literal was found (Open Square Brace - '['). If found
then it should start the array validation logic.

Simply following the above steps it validates each and every value reside
inside the array until a Close Square Brace - ']' was found.

Also as mentioned above if Object or Array literal was found as
the value then it takes a function call to validate their children.
To make it further nested let's take below examples.

   {
     "key1": {
       "key1a": true,
       "key1b": {
         "key1ba": [
           1,
           null
         ]
       },
       "key1c": [
         true,
         false
       ]
     }
   }

In here "key1" has a JSON Object found as the value for its "key1a" key.
So "key1a" calls the function to validate its children just like their
parent ("key1") expected. And reports the result to called parent.
This uses self calls (recursion) inside child object to invoke
grandchildren to validate these results.
Also the start index continues from the ended position of child so it does
not need to travel back to the position where the parent of its child
first called to validate which is good.

That concludes the steps this validation process takes.

Testing

I tested all the scenarios as mentioned above with XUnit.
These includes default (step-wise tests), custom and official tests.
And those are also included in the repository.
No tests were added for utility functions as they were manually tested.
(Tests for these were added later for getting more test coverage)
Also I had to turn off parallel testing and enable collection per assembly
options in XUnit because when executed with vscode it gave me at least
one error due to tests using shared resources (globals) internally.

Benchmarks

It takes under half a second to validate a JSON file that is
the size of 10MB which I downloaded from the below source.

Example File

Besides the areas I need to cover for scaling up and performance these
results look good for a simple JSON parser/validator.

But please note that sometimes under heavy load my pc performs slower
so the results can be vary from your device.

Notes

Thanks to the team at Coding Challenges NewsLetter

Repository

jPTool

Thank you for Reading!

Keep Coding ツ

YouTube's Metered Count

lizardkinglk — Thu, 31 Oct 2024 07:08:23 +0000

What is it?

I had this need to understand how that youtube's view count thing works. I'm talking about that number digits on a video views going up with an animated scrolling while watching a video for a while.

So I had to break it down using React and also made a react component as an npm package. Check it out here.

Simple state update

From the looks of it, it was simple, but it was not.
Let's start from the begining.

We have the parent component that calls to render the Metered count component.
Its goal is to update the count value whenever it needs to.

So the child component (this metered count component) takes the new value as a prop and updates it to the latest value.

This is simple without the animation part. Because when the prop value count updates and if we render it in the child component it gets updated by react.

Breaking it down

It took me few hours to implement this using javascript but to do the same in react, was hard and took some time to comprehend.
If you want to think through this problem and try now is the time.

...

Let's break it down now.

There are few steps

Containerize the digits to a array for the value as count
Calculating the difference values as steps between previous and current digits
Animating each differences if the difference is greater than one

Using react we can have a useState hook to store the number as an object array.
An object of this array contains properties steps (which stores the difference of previous and current digit as a number) and the content (which stores the new values to animate as a array)

i.e.

Let's say the value for count by parent comes as 0. In youtube's terms let's say the views count is 0.
So the containers array will be like this

[{steps: 0, content: [0]}]

At this time let's say the count value goes up to 12. So what will happen now?
The new containers value should be like this below after calculations of the differences of the digits (left to right of the number).

old count value = '00'
new count value = '12'

[{steps: 1, content: [0, 1]}, {steps: 2, content: [0, 1, 2]}]

See the graphic below

In this graphical representation red square is the visible area. The overflowed area is hidden using css property overflowY: hidden. It should also hide the scrollbar that comes with it.

So the next thing to do is animating the change.

With react, once the containers gets updated that change is listened by a useEffect hook that do the animation.

To do this it requires an animate function that animates all the digits of a single container. In javascript, I handled this using element.scrollTo function but in react I used element.animate function that changes translatesY css property thus making the div go up.

Note that fill property for animation function needs to be forward Otherwise the animation resets to previous value.

See the graphic below

See the source code GitHub.

Thanks for Reading! :)

DocsShare - Share Your documents

lizardkinglk — Sun, 13 Oct 2024 16:44:35 +0000

This is a submission for the The Pinata Challenge

What I Built

A simple and private serverless file storage with sharable url provider
Powered by Pinata files API + upload groups with ClerkJS authentication.

Demo

DocsShare - Demo

My Code

GitHub

More Details

Pinata Files API

Authenticated user can upload and share files
Users can select files to upload using drag and drop interface
Pinata's files API with group functions (scaled per user) were used
Signed urls sharable with friends with expiration time of 1 hour

News posting website with AWS Amplify

lizardkinglk — Mon, 27 May 2024 06:30:38 +0000

This is a submission for the The AWS Amplify Fullstack TypeScript Challenge

What I Built

Studious

Using AWS Gen 2 services, I developed an open-source news, blog, and post creation and publication application Studious. Users who have registered on this website can view news, draft and publish their own local news articles, and build their own. Add a variety of stuff, such as size-based text, urls for photos, etc.

Demo

Studious App
Source Code

Journey

I developed this application using the next js (pages routes) for react framework.

The following AWS services are used by this application

Data
Authentication
Serverless Functions
File Storage

Connected Components and/or Feature Full

This application also uses the Amplify UI React library for the frontend UI Framework, also with the auth and storage connected UI components which speeds up and simplifies development.

Thanks for reading! 🤝🏿

Friendly Waffle 🧇

lizardkinglk — Sun, 12 May 2024 10:54:29 +0000

This is a submission for the Netlify Dynamic Site Challenge: Visual Feast.

What I Built

This project demonstrates images which are statically saved and gets re-rendered based on the adjustments made by the form controls by user. This uses netlify's imagecdn features.

Demo

Click to Try

Platform Primitives

Size width and height adjustments
Format conversion from .jpg to .png
Quality adjustments from 1 to 99
Fit feature (uses cover)

Thanks for reading... 🧇

Hacktoberfest23

lizardkinglk — Sat, 11 Nov 2023 14:33:34 +0000

Contribution to Hacktoberfest 2023

Intro

Hacktoberfest has always been more than just a month-long celebration; it's a community-driven initiative that encourages collaboration, learning, and growth.

It is a pleasure to announce that I have completed this year's event.

lizardkingLK · GitHub

lizardkingLK has 52 repositories available. Follow their code on GitHub.

github.com

Highs and Lows

I was struggling to find some repos to contribute to because it was overwhelming at first. But finally, I could kick it off around the 2nd week.

So I mainly focused on improving styling with techs like tailwindCSS. Starting from there I also worked on UI and date-related issue fixings.

Growth

As a contributor, there are things to improve with the help of others in the community. So it is always important to ask what this does and this. They will help you out.

Thanks for reading! ❤🎃🤟🏿

Expense Tracker App

lizardkinglk — Wed, 19 Jul 2023 22:36:42 +0000

What I built

Expense and Income tracker using Supabase and Material UI.

App Link

App

Screenshots

Description

As a first time user of refine.dev, trying refine was fun and it was maintainable as I go. It was actually reducing the development time compared to vanilla next app.

Link to Source Code

GitHub

Permissive License

Apache-2.0 license

Background

Expense tracker is an app we can save our costs and incomes to not miss anything and spend with caution. This application's goal is to simplify it.

How I built it

MaterialUI components were refined using scaffolding, custom data provider, and inferencer for understanding components. Database connections and filters were utilized.

Thank you!

Cleaning an object

lizardkinglk — Mon, 03 Jul 2023 13:34:56 +0000

Let's say we have a javascript object or JSON object literal that we use to do some task. And let's say those object values weren't predicted which means it can cause problems in the task execution due to nullish values. These nullish values may consist of the follwing.

undefined, null, ""

Our goal is to change the given object to a clean record.

Photo by Sebastian Pena Lambarri

Let's assume we are given the following object.

const obj = {
    "foo": "",
    "bar": null,
    "max": undefined,
    "firstName": "John",
    "lastName": "Doe",
    "age": 42
};

Points to consider

The for-in loop takes an object and makes it an iterable of keys. In other words it returns the indexes/keys of that object. We can use this to iterate the object and access each element.
The built-in function includes uses to check if an element contains in the given array. In here we are using it to check if the value given available within the items we have.
The operator/function delete removes an element/value by the key of the object given.

How to do it

With this below function we can achieve our goal.

for (const i in obj) {
    if ([null, undefined, ""].includes(obj[i])) {
        delete obj[i];
    }
}

This function demonstrates the points mentioned above. It iterates the object via the keys (for-in loop) and checks the value contains in the array given (includes). If so it removes the key-value pair from the object (delete).

Finally we are left with the object containing clean values.

{ firstName: 'John', lastName: 'Doe', age: 42 }

Thanks for reading!

Roman to Integers

lizardkinglk — Fri, 16 Jun 2023 18:22:32 +0000

Hello everyone!

There is this leetcode challenge which is to convert roman numbers to integers.

This is a beginner level problem I tried to solve and it was fun.
You can try it before continuing with the post. Maybe you might come up with an efficient solution as well.

Photo by Mathew Schwartz

Hope you are now familiar with the problem.
Let's see our function that returns according integers.

GetInteger(string roman)

switch (roman)
{
  case "I": return 1;
  case "V": return 5;
  case "X": return 10;
  case "L": return 50;
  case "C": return 100;
  case "D": return 500;
  case "M": return 1000;
  default: return -1;
}

Call it and output should give accurate results.

But what if this input that is a string called roman was not a single letter? As an example "IX".

If so the case should jump to default case and it has to be resolved.

First let's make the input string a char array.

char[] characters = roman.ToCharArray();

We assign the returning value as the integer value of last letter.

number -> 'X' -> 10

We are going to iterate from one before last to first of this char array.
We take the current value as the integer value of current char.

current -> 'I' -> 1

We take the previous value as the integer value of char to the right of the current char.

previous -> 'X' -> 10

We add or subtract returning value if current value becomes more or less than the previous value.

current -> 1, previous -> 10, previous > current -> yes
number -> previous - current -> 9

Therefore the returned value for IX becomes 9.
This applies for any roman number given.

Source code below.

public static int GetInteger(char c)
{
    switch (c)
    {
        case 'I': return 1;
        case 'V': return 5;
        case 'X': return 10;
        case 'L': return 50;
        case 'C': return 100;
        case 'D': return 500;
        case 'M': return 1000;
        default: return -1;
    }
}

public static int RomanToInt(string s)
{
    char[] characters = s.ToCharArray();
    int number = GetInteger(characters[characters.Length - 1]);
    for (int i=characters.Length-2, previousValue, currentValue; i>=0; i--)
    {
        currentValue = GetInteger(characters[i]);
        previousValue = GetInteger(characters[i + 1]);
        number = previousValue > currentValue
            ? number - currentValue
            : number + currentValue;
    }
    return number;
}

Thanks for reading!

Hourglass Problem

lizardkinglk — Sun, 24 Apr 2022 06:42:22 +0000

This problem is based on a challenge on hackerrank. It is a bit tricky beginner level problem.

The problem is to find the maximum of all the hourglass shaped number sums in a given 2d integer array

A 6 x 6 array (2d) is given.

1 1 1 0 0 0
0 1 0 0 0 0
1 1 1 0 0 0
0 0 0 0 0 0
0 0 0 0 0 0
0 0 0 0 0 0

And if you notice, there is hourglass shaped numbers.
The first one is below.

1 1 1
  1
1 1 1

The sum of this hourglass is (1 + 1 + 1) + (1) + (1 + 1 + 1) = 7
7 being the largest.

So now to the problem. You are given the below 2d array.

-9 -9 -9  1 1 1 
 0 -9  0  4 3 2
-9 -9 -9  1 2 3
 0  0  8  6 6 0
 0  0  0 -2 0 0
 0  0  1  2 4 0

You need to find the maximum sum of hourglass looking numbers.

In this I have circled some hourglass looking numbers.

Sum of Red hourglass is
(-9 + -9 + -9) + (-9) + (-9 + -9 + -9) = -63

And the rest of hourglass sums are like below

-63, -34, -9, 12, 
-10,   0, 28, 23, 
-27, -11, -2, 10, 
  9,  17, 25, 18

The maximum hourglass is below. It's sum is 28

So How do we calculate the maximum of the hourglass looking numbers ?

You should follow these steps.

Loop through each index of the array.
Find the hourglass sum of the each regional hourglass.
If the current sum is higher than the previous, maximum = current.
Print the maximum.

Starting from the first row first column is the index (0, 0). It contains the hourglass below.

-9 -9 -9
   -9
-9 -9 -9

So you need to find the sum of this hourglass using another nested loop.

Then the second hourglass is in the index of (0, 1). It contains the hourglass below.

-9 -9  1
-9  0  4
-9 -9  1

Sum is calculated in this second one too.

If the second is higher than the first you can assign the maximum as the second sum. This is repeated until the end.

But we should not need to go until the last element since at (0, 4) index and indexes after that we can't make a hourglass shaped numbers.

And also for the row-wise it is invalid to go for (4, 0) index since hourglasses not shaped in thereafter.

Find the source code using below link

https://github.com/lizardkingLK/hourglass_problem

HasAllChildren

lizardkinglk — Sat, 19 Mar 2022 05:16:44 +0000

The below is a function to check if an sub array consist of all the elements of a given array.

const hasChild = (array, child) => {
    const ruleA = array !== undefined;
    const ruleB = child !== undefined;
    const ruleC = array.find(c => c === child) === child;
    return ruleA && ruleB && ruleC;
}

const hasAllChildren = (array, subArray) => {
    const ruleA = array !== undefined;
    const ruleB = subArray !== undefined;
    const ruleC = subArray
        .filter(c => hasChild(array, c))
        .length === array.length;
    return ruleA && ruleB && ruleC;
}

Now, What this function hasAllChildren(array, subArray) does when called is checking if all items match to be available in the array.

Notice - This method does not check if these passed arrays are equal. It simply checks if the elements are available.

First it checks all the arguments passed to our method are defined.

array (original array)
subArray (comparing array)

For each element we need to check if element is available in the array. We need hasChild(array, child) to do this. It finds the element in the array and returns true if found. For all subArray elements it needs to return true;

The reason to check if undefined is that if not it returns true.

If all elements contains we can say that count of all checked available items is equal to the original array's size.

Finally we return if all rules and checks passed by returning
ruleA * ruleB * ruleC.

Thank for reading.

CSS with Superpowers

lizardkinglk — Sat, 26 Feb 2022 09:47:22 +0000

What is SCSS ?

Sass or Scss is a supertype of CSS (Cascading Style Sheets). Sass was officially described as CSS with superpowers.

Sass and Scss are same in terms of what it does. It is okay to use one of the two for your project with your preference.

The main difference between scss and sass is their coding standards. Scss uses the standard css coding conventions whereas sass uses indentation and short hand methods.

.scss

button {
   background-color: red;
}

.sass

button
   background-color: red

What SCSS do for us ?

We use CSS to make our web pages structured , beautiful and responsive. SCSS helps to do this easily and in less time.

Features of SCSS

Variables
Nesting
Mixins
Inheritance
Import
Use
Forward

Variables

Variables are used to allocate a key and a value for reusable values throughout an application. Easy to use when long text required as the value of the property because we don't need to remember it because we only need to use the variable name as the value. Dollar sign refers to variable names.

$dark: #000000

Nesting

Let's assume the below scenario in a html page given to you for style it.

<div class="myDiv">
   <h1 class="myHeading">Hello</h1>
</div>

The css way of doing styles for this should be as below

div.myDiv {
   background: red;
}

div.myDiv  h1.myHeading {
   color: white;
}

And as we can see the css selectors getting longer gradually when nested elements being added to our html. To address this issue we use nesting in scss. The scss solution is like below. By doing it this way we don't need to repeat the css selector (div.myDiv) again and again.

div.myDiv {
   background: red;

   h1.myHeading {
      color: white;
   }
}

Mixins

Mixins are css rulesets that are referenced in a scss stylesheet that are usable as a function which returns that ruleset. It can involve passing with (parameters) or not.

@mixin background-color($primary: red) {
   background-color: $primary;
}

div.myDiv {
   @include background-color(teal);
}

Inheritance

Inheritance used to inherit styles from defined styles for elements or defined utility classes and override them using their class reference.

.yourDiv {
   background-color: red;
   color: white;
}

.myDiv {
   @extend .yourDiv;
   text-decoration: underline;
}

@import

Import functionality uses the adpotation of modular usage of css which means we can define stylesheets based on their responsibility and use them in a single scss file using @import keyword.

@import 'typography';

@use

This functionality loads other css rulesets, mixins and variables defined in another sass stylesheet in scss stylesheet. @use works like import as a variable reference.

@use 'typography';

h3.myHeading {
   font-size: typography.$fs-m;
}

Using it as opposed to import we can scope our rulesets from referencing with the stylesheet reference. As an example this helps if we have different dark and light css themes together to use.

@Forward

This functionality loads scss stylesheets for use when there are nested imports need to take place. So when you need to use scss sheets in a main scss file this helps by loading it to use. This reduces your import statements and use statements you need in your stylesheet.

@forward 'myVariables'

How to apply SCSS ?

SCSS is great in many ways but we can't use .scss or .sass files directly in our html using a link tag like we did with css. There is a procedure to convert scss files into css which is called precompiling scss to css.

Precompilers get the scss files and convert them to css as you command. Then it gives the output as a css stylesheet which you can use in your application with a link tag.

To use a precompiler we have few options.

For static web apps use an extension available for your IDE / Editor
For node based apps use an automated task runner like gulp-sass which automatically watches for changes in your given directory and compile it at the same time.

When to use SCSS ?

You can use scss rather than conventional css in,

Stylings for single page web applications
Stylings for enterprise level web applications
When starting with a scss theme or to make a theme
To modify css more in a html template before use

Learn more about scss with following links

https://sass-lang.com/documentation
https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass
https://www.npmjs.com/package/gulp-sass