DEV Community: Syed Faateh Sultan Kazmi

I completed Hacktoberfest 2020 challenge

Syed Faateh Sultan Kazmi — Sat, 17 Oct 2020 02:41:37 +0000

What I Learned From Hacktoberfest

I completed Hacktoberfest 2020 challenge by making 4 contributions to different Github repositories and all of those 4 pull requests got accepted.
I learned from hacktoberfest that open source is actually powering the software of the world. The best part of open source is that any developer can contribute which makes it exciting to have all those unique ideas together.

It was a great experience to contribute to open-source :)

My Unique Project - Github Graph Magician

Syed Faateh Sultan Kazmi — Wed, 02 Sep 2020 08:09:55 +0000

Here is an exciting new update! 😀

The GitHub Contribution Graph

All those folks using GitHub, know that there is a Contribution Graph in GitHub that represent the statistics of the user's contributions over the past year in a Graphical Design so that it colors the date of contribution. That's cool, right?

So, what I have developed?

GitHub Graph Magician

Ever wanted to design your contribution graph yourself? That sounds pretty awesome 😎. I have developed a unique tool, that you can use to design any pattern on your GitHub Contribution Graph, without knowing any technicalities behind the curtain!

Here is a quick walkthrough about how to use this tool

First, install Node JS on your PC as per your operating system.
Go to GitHub Graph Magician (developed by me 😁)
Follow the instruction mentioned on the website
and SEE THE MAGIC HAPPEN! 😍😍😍

P.S.: This website works on screens greater than 695px. This means that you won't be able to use it on your mobile phones (also not intended for 😂)

Remember me in your prayers!

Allah Hafiz!

The easiest way to add a light/dark theme to your website

Syed Faateh Sultan Kazmi — Sun, 30 Aug 2020 11:18:40 +0000

Hi, hope you guys are doing good 😀

As we know, The Dark Mode Themes are trending nowadays. Whether its a mobile app, website, PC app, or anything, everyone shows great interest in Dark Themes.

Similarly, web designers and web developers are also working to add dark mode feature on their projects as well. Most of the big brands like Facebook, WhatsApp, Instagram, Google Chrome and many other platforms have introduced dark modes and users have appreciated a lot.

So, I will share a very basic and straight-forward technique using basic CSS and JS that can be used by beginner to advanced developers to add dark mode to there website.

The power of CSS Variables

First of all, lets discuss about color schemes. It is a very good practice in CSS to create variables in :root for each and every color you have used in your stylesheet. You can use those colors by referring to corresponding variables instead of copying color codes everywhere. Also, if you have to change color, just change the variable's value. So, first, any color you have in your stylesheet, create a variable for that. You can learn CSS Variables on W3Schools or Mozilla Dev Network. Remember, if you want to switch any colors (e.g. light/dark themes), separately create currently used variables.

Example

:root {
    /*Global color pallete*/
    --light-background-color: #ffffff;
    --light-foreground-color: #341f97;
    --dark-background-color: #000000;
    --dark-foreground-color: #48dbfb;

    /*Currently used*/
    --cur-bg: var(--light-background-color);
    --cur-fg: var(--light-foreground-color);
}

Manipulating Stylesheets using JS

When you are done with styling the default theme colors, use Javascript to directly modify the stylesheet. Use the following scheme.

Define the :root for both dark and light themes in JS for convenience.

const lightThemeRoot = ":root { --light-background-color: #ffffff; --light-foreground-color: #341f97; --dark-background-color: #000000; --dark-foreground-color: #48dbfb; --cur-bg: var(--light-background-color); --cur-fg: var(--light-foreground-color);}";

const darkThemeRoot = ":root { --light-background-color: #ffffff; --light-foreground-color: #341f97; --dark-background-color: #000000; --dark-foreground-color: #48dbfb; --cur-bg: var(--dark-background-color); --cur-fg: var(--dark-foreground-color);}";

Find the Stylesheet Index of the CSS file where you defined color variables to be used in switching themes.

const MY_CSS_FILE = window.location.origin + "/css/style.css"; //store path to your css file here
var myFileIndex = 0;
const ALL_CSS_FILES = document.stylesheets;
for(i = 0; i < ALL_CSS_FILES.lengh; i++) {
    if(ALL_CSS_FILES.item(i).href == MY_CSS_FILE) {
        myFileIndex = i;
    }
}
//now we have the file index i

Manipulate the :root of stylesheet to switch theme when a button is clicked.

if(ALL_CSS_FILES.item(myFileIndex).rules.item(':root').cssText == lightThemeRoot) {
    ALL_CSS_FILES.item(myFileIndex).removeRule(':root');
    ALL_CSS_FILES.item(myFileIndex).insertRule(darkThemeRoot);
} else {
    ALL_CSS_FILES.item(myFileIndex).removeRule(':root');
    ALL_CSS_FILES.item(myFileIndex).insertRule(lightThemeRoot);    
}

Finishing

Finally, lets bring all this together so that you can better understand the scenario.

HTML Element

<span onclick="switchTheme();">Switch Theme</span>

CSS Root

:root {
    /*Global color pallete*/
    --light-background-color: #ffffff;
    --light-foreground-color: #341f97;
    --dark-background-color: #000000;
    --dark-foreground-color: #48dbfb;

    /*Currently used*/
    --cur-bg: var(--light-background-color);
    --cur-fg: var(--light-foreground-color);
}

JS Method

function switchTheme() {
    //remember to change these variables if you change the :root in CSS
    const lightThemeRoot = ":root { --light-background-color: #ffffff; --light-foreground-color: #341f97; --dark-background-color: #000000; --dark-foreground-color: #48dbfb; --cur-bg: var(--light-background-color); --cur-fg: var(--light-foreground-color);}";
    const darkThemeRoot = ":root { --light-background-color: #ffffff; --light-foreground-color: #341f97; --dark-background-color: #000000; --dark-foreground-color: #48dbfb; --cur-bg: var(--dark-background-color); --cur-fg: var(--dark-foreground-color);}";


    //switching scheme
    const MY_CSS_FILE = window.location.origin + "/css/style.css"; //store path to your css file here
    var myFileIndex = 0;
    const ALL_CSS_FILES = document.stylesheets;
    for(i = 0; i < ALL_CSS_FILES.lengh; i++) {
        if(ALL_CSS_FILES.item(i).href == MY_CSS_FILE) {
            myFileIndex = i;
        }
    }
    if(ALL_CSS_FILES.item(myFileIndex).rules.item(':root').cssText == lightThemeRoot) {
        ALL_CSS_FILES.item(myFileIndex).removeRule(':root');
        ALL_CSS_FILES.item(myFileIndex).insertRule(darkThemeRoot);
    } else {
        ALL_CSS_FILES.item(myFileIndex).removeRule(':root');
        ALL_CSS_FILES.item(myFileIndex).insertRule(lightThemeRoot);    
    }
}

Conclusion

There are a lot of different methods to achieve the dark theme. But here I have shared the most straight-forward and basic method to do this. So, tell me in comments, which method do you use and prefer for applying the dark theme in website!

How powerful are the regular expressions for faster coding

Syed Faateh Sultan Kazmi — Tue, 18 Aug 2020 15:38:44 +0000

Do you know about a technique that can speed up your coding experience for almost all the code editors in the world?

Code Editors, the long debate 😁

Choosing a code editor is a long (and never-ending) debate though. The choice of code editor totally depends on your needs as well as your comfort. There is no perfect for all code editor. The one that you prefer, may not be a good option for someone else. So, explore multiple code editors to find your favorite one. (Remember, I'm talking about code editors, not IDEs 😑). Some of the top trending GUI code editors today are:

Visual Studio Code by Microsoft
Atom by GitHub
Sublime Text by John Skinner
Brackets by Adobe

Also, there are some CLI code editors like Vim and Nano.

But all GUI editors have one common feature!

Regular Expressions in Code Editors

Most of the time, especially when modifying a previously written code. We all use Find (CTRL+F) and Replace (CTRL+H) features to search a previously coded module, features, variable, or method. Although this feature is very good, Regular Expressions can increase their productivity up to a great extent.

Usage of RE in Code Editors

I personally use the Visual Studio Code. So, I'll illustrate 3 very basic examples of using regular expressions to search for specific content in the codebase.
*Note that you must turn on RE feature as shown in the image below:

1. Match any single character (except a line break)

can match any sequence such as cms, crm, or c3s etc.

2. Match multiple characters

can match any sequence such as cases, comes, c43s etc.

3. Match at the beginning of a sentence

can match all the lines starting with user.

There are many more ways to use Regular Expressions for searching the codebase.

You can find Regular Expression usage in Visual Studio Code and Visual Studio IDE. If you are using some other editor, google its docs!

Hope you like this! 😉

How I developed a commercial website for a client using front-end technologies

Syed Faateh Sultan Kazmi — Wed, 05 Aug 2020 20:05:01 +0000

Last month, I got a call from one of my friends who told me that the owner of this company Allahdin Casting Foundry needs a good, responsive website for his business.

I'll be sharing my experience on how I developed a fully responsive website using just HTML, CSS, JS, and Bootstrap 4. As a beginner, most of the developers start coding after just a few details and when the scope broadens, they need to shift technology. So, these are the steps in which I completed this project (in the 4th semester of my BS Computer Science degree). I followed the software engineering principles in this project and I can say that they helped a lot. 😊

Communication

Project Initiation

A fully responsive business website for a casting foundry

Requirement Elicitation

I met the person for a detailed discussion about the project. It was a completely static and responsive website project. I had to work only on the front-end. During the communication with the client, I focused on the requirement gathering to prepare a reliable software process model to work on.

Planning

Cost Estimation

Considering the client's requirements, I estimated the cost as per the technology used in terms of webpages and design and finally presented it to the client.

Scheduling

After the cost agreement, I scheduled the project to be completed within one week.

Tracking

To track and control the development process, I used the Git version control system to commit the project after developing each feature. It helped a lot to backtrack when there was a mistake.

Preparing the Software Process Model

The vision was clear. It was a small scale project, so there was no such need for a definite software process model. But, in order to keep everything confined and use good practices, I followed an Iterative Software Process Model. I prepared drafts about the software project model and started working.

Prototyping

I prepared a robust structure of the website along with the UI design and sent it to the client as a prototype. For this purpose, I used a repository on my own GitHub.

Technology and Platform to be used

Collectively, I used HTML, CSS, Javascript, Bootstrap 4, and Jquery for front-end along with Google Maps API and Google Forms Integration. I created a project on Google Firebase hosting to deploy this site. I bought a .com domain from Porkbun. I also designed the logos and other image assets, privacy policy, and T&C also.
P.S. I use VS Code 😎

Project Construction

After the prototypes were accepted, I started working on the main project. I developed the structure and layout of the website and made is responsive using various media queries. After that, I applied images, assets, and styling to make the site user friendly. Next, I developed some client-side programming in JS to make features functional. Finally, I completed the dynamics of the website. It took me about a week to get the project completed.

Testing Phase

After completion, I tested the site myself. I focused on the following things to test:

All the links should refer to correct location
There should be no typo at all
Most importantly, the loading speed should be reliable (used Google Pagespeed Insights and other tests for this)
Website should look great on all devices (screen sizes)
Images must be properly sized

After that, I released the beta testing version of the site for the public for about 4-5 days. Obviously, some bugs/issues were there which I rectified.

Deployment

The Final Release

After complete testing, I released the final version 1.0.1 (current version is 1.0.3). I also created two emails (see on the website 😁) forwarding systems to incorporate a sophisticated environment for visitors to interact with.

This is how within two weeks, the website was up and running.

Final Product

Allahdin Casting Foundry is the final website.
If found any bug/issue, please report to me or email webmaster@allahdincastingfoundry.com

Feedback

The client's feedback on this project was awesome. 😉

Finally, I created a Google Business and did some SEO to index the site on search engines.

So, this is how I developed a fully responsive static website for a client 🙂

P.S.: I've done a commercial project back in 2015 (now inactive). But this one was a much more mature and robust project.