Stephin's Blog

Web forms simplified

Stephin Reji — Thu, 20 Jun 2024 07:09:31 GMT

Building something for the community 💡🚀

check it out at : https://formifyai.stephinreji.com

Lemme know your thoughts

Style Tags can be styled 😎

Stephin Reji — Wed, 05 Jul 2023 03:27:41 GMT

Indeed, you heard correctly! Style tags are also considered HTML tags, to which we can apply various styles.

Let's explore this further.

Go to your Favourite editor and paste the following code

html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Edit CSS Livetitle>
head>
<body>
    <style style="display: block;">
        *{transition: all 0.2s;}
        html{
            background-color: #bada55; 
            font-size: 20px;
        }
    style>
body>
html>

In the code provided above, I have included a style attribute within the style tag. Now, when you execute this code, the content inside the style tag will be displayed in the browser with the applied styling, as demonstrated below.

Cool right! but there is more.

What if I say you can edit the styles on the browser window 😳.

html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    <style contenteditable style="display: block;">
        *{transition: all 0.2s;}
        html{
            background-color: #bada55;
            font-size: 20px;
        }
    style>
body>
html>

There is an attribute called "contenteditable" that can be added to the style tag, allowing us to edit the styles directly from our browser window, as demonstrated below.

Try changing the background color and font size, and you'll see what I mean.

https://codepen.io/stephin007/pen/OJajXJY

You can also add "white-space: pre;" alongside "contenteditable" to include the necessary whitespace wherever needed.

<style contenteditable style="display: block; white-space: pre;">

Hope this quick tutorial helped you in some or the other way. Thankyou

Getting Started with Git Commands

Stephin Reji — Thu, 15 Jun 2023 17:01:41 GMT

Git is a popular and highly useful version control system that allows you to track changes made to your code and collaborate with others on the same project. It can be intimidating to get started with Git at first, but with a few basic commands, you can be up and running in no time.

Below are some of the most commonly used Git commands that you'll need to know to get started with Git:

Git Init

The git init command is used to initialize a new Git repository. It creates a new directory for your project and sets up the necessary files for Git to track changes.

git init

Git Add

The git add command is used to stage changes made to your files for the next commit. This tells Git that you want to include the changes in the next commit.

git add

You can also use git add . to stage all changes in the current directory.

Git Commit

The git commit command is used to create a new commit with the changes that you've staged using git add.

git commit -m "Commit message"

The -m flag is used to provide a short description of the changes made in the commit.

Git Status

The git status command is used to display the current status of your repository. This shows which files have been changed, which have been staged using git add, and which have not been tracked by Git.

git status

Git Log

The git log command is used to display a list of all commits that have been made to the repository. This allows you to see the history of your project and track changes made over time.

git log

You can also use git log --oneline to display a simplified list of commits.

Git Branch

The git branch command is used to create a new branch in your Git repository. A branch allows you to work on a separate version of your project without affecting the master branch.

git branch

Git Checkout

The git checkout command is used to switch between different branches in your Git repository.

git checkout

Git Merge

The git merge command is used to combine changes made in one branch with another branch. This allows you to merge changes made by you or your team members into the master branch.

git merge

There are many other Git commands that you'll want to explore and learn as you become more proficient with Git. However, with these basic commands, you'll have everything you need to get started with version control and collaborative development.

How to Verify your Commits in GitHub

Stephin Reji — Fri, 09 Jun 2023 05:55:02 GMT

When working with Git, ensuring the integrity and authenticity of commits is essential. One way to enhance the security of your Git commits is by using SSH (Secure Shell) for verification. SSH provides a secure connection between your local machine and the remote Git repository, allowing you to verify the authenticity of the commits made by other contributors. In this guide, we'll walk through the process of verifying Git commits using SSH.

Prerequisites

Before you begin, make sure you have the following:

Git is installed on your local machine.
An SSH key pair is generated on your local machine.
Access to a remote Git repository that supports SSH authentication.

If you don't have an SSH key pair, you can generate one by following the official documentation for your operating system.

Step 1: Configure SSH for Git

Open your terminal or command prompt.
Set up your SSH key with Git by running the following command:
```
 $ git config --global user.signingkey 
```
Replace with the identifier of your SSH key. This key will be used for signing and verifying commits.
Verify that the gpg.program configuration is set to gpg by running:
```
 $ git config --global gpg.program gpg
```
This ensures that Git uses the gpg command-line tool for signing and verifying commits.

Step 2: Import Your Public Key to the Remote Repository

Obtain your SSH public key by running the following command:
```
 $ cat ~/.ssh/id_rsa.pub
```
This command prints your public key to the terminal.
Copy the output of the previous command, which represents your public key.
Access your remote Git repository (e.g., GitHub, GitLab, Bitbucket) and navigate to your account settings.
Look for the SSH key settings and add a new SSH key.
Paste your public key into the designated input field and save the changes.

Step 3: Verify a Git Commit

Clone the repository that contains the commit you want to verify:
```
 $ git clone 
```
Replace with the URL of the remote repository.
Change into the repository's directory:
```
 $ cd 
```
Replace with the name of the local repository directory.
Fetch the latest commits:
```
 $ git fetch
```
Verify the commit by running the following command:
```
 $ git verify-commit 
```
Replace with the SHA-1 hash of the commit you want to verify. You can find the commit's hash by checking the commit history.

If the commit is valid and has a valid signature, Git will display a "Good signature" message. Otherwise, it will indicate that the commit is invalid or not signed.

Congratulations! You have successfully verified a Git commit using SSH. This ensures the authenticity and integrity of the commit, providing an extra layer of security to your development workflow.

Remember to follow best practices for securely storing and managing your SSH key pair to maintain the security of your Git commits.

Conclusion

In this blog post, we explored the process of verifying Git commits using SSH. By configuring SSH for Git, importing your public key to the remote repository, and leveraging Git's verification commands, you can ensure the authenticity and integrity of your commits. Incorporating SSH-based verification into your Git workflow enhances security and helps build trust in the codebase.

Nurturing a Follow-Up Culture: The Key to Success in Corporates

Stephin Reji — Wed, 31 May 2023 04:13:58 GMT

Introduction

In the fast-paced world of corporate environments, effective communication and timely follow-ups can make all the difference. A follow-up culture refers to the practice of consistently following up on tasks, projects, and commitments within an organization. It is a vital aspect of organizational success, as it ensures accountability, enhances productivity and strengthens professional relationships. In this blog post, we will delve into the significance of fostering a follow-up culture in corporates and explore strategies to implement it effectively.

Accountability and Efficiency:

A follow-up culture promotes accountability by ensuring that tasks and projects progress smoothly. When individuals consistently follow up on their commitments, it becomes clear who is responsible for each task and what progress has been made. This level of transparency fosters a sense of ownership, leading to increased productivity and efficiency.

Building Trust and Professionalism:

Consistent follow-ups demonstrate professionalism and reliability. When employees take the initiative to follow up on their commitments, it conveys a sense of dedication and attentiveness to details. This behaviour builds trust among team members, clients, and stakeholders, as it showcases a genuine interest in fulfilling obligations and delivering results.

Effective Communication and Collaboration:

One of the primary benefits of a follow-up culture is the facilitation of effective communication and collaboration. Regular follow-ups provide opportunities for team members to share progress updates, clarify doubts, and seek feedback. They promote open lines of communication and ensure that everyone involved is on the same page.

Client Satisfaction and Retention:

A strong follow-up culture is particularly crucial when it comes to client interactions. Clients appreciate timely responses and regular updates on the status of their projects. By maintaining a consistent follow-up practice, organizations can exceed client expectations, ensuring their satisfaction and increasing the likelihood of repeat business.

Strategies for Implementing a Follow-Up Culture

a. Clear Communication Channels: Establish clear channels for communication within the organization. Utilize project management tools, email, instant messaging platforms, or dedicated communication software to streamline the process.

b. Set Expectations: Clearly define expectations regarding follow-ups for each project or task. Include follow-up deadlines and ensure that all team members are aware of these expectations.

c. Document and Track: Maintain a centralized system for documenting and tracking follow-ups. This could include task management software, shared calendars, or spreadsheets. Regularly review and update these records to stay organized and accountable.

d. Lead by Example: Encourage leaders and managers to lead by example. Consistently demonstrate the importance of follow-ups through their actions and hold everyone accountable for their commitments.

e. Provide Training and Support: Offer training sessions or workshops on effective communication and follow-up practices. Provide resources and support to help employees develop and refine their follow-up skills.

Conclusion

A follow-up culture is not just a mere formality in corporate settings; it is an integral part of fostering a productive and thriving work environment. By prioritizing accountability, trust, effective communication, and client satisfaction, organizations can unlock the full potential of their teams. Implementing strategies to cultivate a follow-up culture will not only improve efficiency and productivity but also strengthen professional relationships and set the stage for long-term success.

How to deploy multiple sites to firebase hosting?

Stephin Reji — Sun, 03 Jan 2021 18:21:49 GMT

Wait, what..is that even possible... Cause one project in firebase means only one hosting for that particular project, Right..! Well, my fellow reader, Firebase has this feature to deploy multiple sites in a single firebase hosting. You might be wondering why do we need multiple websites for a single project, yeah I thought that too, so apparently, there might be situations, in which the user might need 2 separate apps i.e. one for customers, one for admin employees - both of which share the same database and functions.

In this blog, let me walk through the steps which you will need to follow strictly to deploy the sites correctly to their respective domains.

NOTE: I ASSUME THAT YOU HAVE ALREADY DEPLOYED ONE OF YOUR APPS TO YOUR FIREBASE PROJECT, OTHERWISE, YOU WON'T BE ABLE TO DEPLOY MULTIPLE SITES

Great, I hope you are still with me, Lets Begin.

1 Define Your Site Name(s)

Assume, there is an e-commerce vendor, whose consumer app is done and deployed on firebase, now you are working on the admin site for the vendor which will help the user to add products to his e-commerce website.

In the Firebase Hosting Console, scroll to the bottom under the Advanced Section you will find an option to Add Another Site , When you click that, you will see the below screen.

Add the site name for ex: admin-multi-site-magic , then you will see the site will be added like this.

Wait, it's not over yet, you have just added the site, you have not deployed anything to your new site, lets see how that's done

2 Install the latest Firebase Tools and Initialize hosting

You need Firebase Tools v4.2 or later for multisite hosting.

npm i -g firebase-tools@latest
firebase -v

firebase init hosting

One thing to note here, to make sure you add the word hosting in the last command since firebase has a lot of functions so when you add hosting after init, it will understand that it needs to only initialize the hosting.
It will prompt you some questions to select the project where you want to host it, make sure to select the correct project.

3 Update the firebase.json

As soon as you complete the above step, you will see that firebase adds 2 files to your project directory i.e. .firebaserc firebase.json

Now we just need to update this firebase.json by adding a field called target. Firebase uses this target, (yes you guessed it probably) to target the site to which your code needs to be deployed.

If you are using React, your deployable code will be your build folder and If you are using Angular, your deployable code will be your dist folder. The name of the target can be anything, but better to keep it relevant to the site you are about to deploy. Add your target file as shown below, just above the public field

{
  "hosting": {
    "target": "admin",
    "public": "build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

4 Letting firebase know about the new target you just created.

We need to associate the sites with a local target so Firebase knows which code to deploy where. We run the following command for each site: firebase target:apply hosting

firebase target:apply hosting admin admin-multi-site-magic

where the target-name is just a unique name you choose, and resource-name is the site from step 1.

5 Deploy to FIrebase

We have done all the major steps, now we can deploy it to firebase to the targeted site.

firebase deploy --only hosting

And that's it, I hope you liked it if you do leave some reactions and comments. Also, I am open to collaboration you can mail me or ping me on any of the social media platforms.

How to sync your local git and remote git repository changes?

Stephin Reji — Fri, 01 Jan 2021 07:19:59 GMT

Today we will focus on how we can synchronize our GitHub local repository master with an upstream repository branch of the GitHub project. Now, you might think what is an upstream branch, Upstream branches define the branch tracked on the remote repository by your local remote branch (also called the remote-tracking branch), the below figure will help ya'll understand.

NOTE : When we made any CLONE/PULL for the first time this is not required as we do fork the repository for the first time all the content in both will be the same.

So, Why do we need this process to be done?

This is very much necessary if you are working in a team and the teammates are working on different aspects of the project and you yourselves are working on something, Certain files will differ in both repositories as there are many other developers are merging the code upstream and your branch will not have that changes unless you sync the repository with the current upstream, so you might need to keep up with their code changes as well, this is called syncing your changes with your local and remote repo.

Synching will override the local repository with a master remote repository. And if there are files in the local repository that do not exist in the remote repo, local files get removed

If you don't, this will cause conflicts while you raise a PULL REQUEST.

Now, let me walk you through how to sync your changes with other changes by other developers. Here I have the taken example of the Opencart GitHub project. First, change your working directory to the file location where you want to clone the project with the command.

$ cd your/local/storage/path

STEP 1: Clone your project with the command.

After the clone is completed then move to the Opencart folder This will move to the current working directory as opencart

STEP 2: List the current configured remote repository for your fork.

$ git remote -v

This will list your forked repository response will be as below :

This is our repository branch content now we have to get a project from the upstream repository Now Specify a new remote upstream repository that will be synced with the fork. In Opencart Project this https://github.com/opencart/opencart.git is my upstream repository. Run the following command.

$ git remote add upstream https://github.com/opencart/opencart.git

Now you cross-check that the new upstream repository created for your forked repo. To do this run the same command again as below.

$ git remote -v

Now it will show the response as below and it will also include your upstream repository from your master project.

STEP 3: Make your origin repository the same as your upstream repository.

Now we have created upstream branches for our local repository. Now we will match the content from the upstream repository to the local repository. In this, we will have all the code which is not in our local repository from the upstream repository

Run the commands as mentioned below.

$ git fetch upstream

This command will respond by fetching the content from the upstream for your Master repo. All the new branches and files, contents will the fetched from the upstream repository. And the response for the command as below.

Now checkout to your master branch with the command (if not on the master branch)

$ git checkout master

And run the command.

$ git merge upstream/master

This will sync all the changes to your local repository if any, Now your local repository is synced with the upstream repository.

And That's it, If you have any queries let me know in the comments and it would be great if you leave a reaction as well

Connect your firebase Domain to any Custom Domain

Stephin Reji — Thu, 31 Dec 2020 04:15:07 GMT

Firebase is a free hosting provider, through this you can deploy from simple static HTML to complex e-commerce website made on the latest tech stack. In this post, we will look into how to connect the firebase domain to the custom domain we bought from domain providers like Namecheap, Hostinger, Google Domains, etc.

We will add another post on how to deploy any website on firebase, stay tuned :)

Assuming that you already have hosted your website on firebase, do the following steps:

- Add Domain

Go to your firebase console
Select your project from the list of projects.
After you click on the desired project, select the hosting option from the left panel
CLick on Add custom domain, you will see the following window, add your custom domain name in the text field provided(make sure the spelling is correct)

-Verify domain ownership

In your domain provider's site, locate the DNS management page. As soon as you click on continue, it will give you TXT value. This TXT value will be used by firebase to verify that you really own this domain. . In your domain provider's site, locate the DNS management page. Add this TXt value as a DNS record, you will see a bunch of options like A record, AAA record, etc. to add as a record, select TXT and then input
- Type: TXT
- Value: It must be the value provided by the firebase.
- Host/Name: it should either @ or yourdomainname.com(generally it's @ - it will already be prefilled)
- TTL Value: Keep it either Automatic or to 3600
Allow up to 24 hours for the propagation of your updated TXT records, then click Verify. It probably takes 15-20 mins, the trick is to continue clicking verify for few mins. eventually, it will get verified. If clicking Verify prompts an error message, your records have not propagated or your values may be incorrect.

- Go Live

After your txt record gets verified, firebase will provide you with 2 A records which you have to add into your DNS Records of your domain provider by default the QUICK SETUP MODE will be selected which is suitable for new websites.
Add A new record in your DNS Management Section, just as you added the TXT record, this time add an A Record and then input.
- Type: A
- Value: In this, you have to add the IP provided by Firebase, Your domain provider may list this term as "Data", "Points To", "Content", "Address", or "IP Address".
- Host/Name: it should either @ or yourdomainname.com(generally it's @ - it will already be prefilled)
- TTL Value: Keep it either Automatic or to 3600
Do the above step twice, since firebase provides you with 2 IPs to add to your DNS.

Common domain providers.

Here are some common domain providers and the types of input each might require. This information is kept up-to-date as much as possible, but refer to your domain provider's documentation for detailed instructions.

NameCheap

DNS TXT record inputs

Type TXT
Host/Name @
Value verification value provided in Firebase console.

DNS A records inputs

A @ 151.101.1.195
A @ 151.101.65.195

Hostinger

DNS TXT record inputs

Type TXT
Host/Name @
Value verification value provided in Firebase console

DNS A records inputs

A @ 151.101.1.195
A @ 151.101.65.195

Note: if in case, your domain gets not connected, it's probably due to an existing A record in your DNS Records, just delete that then you are good to go but make sure, the firebase A records are not deleted.

CloudFare

DNS TXT record inputs

Type TXT
Host/Name example.com
Value verification value provided in Firebase console.

DNS A records inputs

A example.com 151.101.1.195
A example.com 151.101.65.195
A www 151.101.1.195
A www 151.101.65.195

Google Domains

DNS TXT record inputs

Type TXT
Host/Name @
Value verification value provided in Firebase console.

DNS A records inputs

A @ 151.101.1.195
A www 151.101.1.195
A www 151.101.65.195

Google Cloud DNS

DNS TXT record inputs

Type TXT
Host/Name example.com
Value verification value provided in Firebase console.

DNS A records inputs

A example.com 151.101.1.195
A example.com 151.101.65.195
A www 151.101.1.195
A www 151.101.65.195

Squarespace

DNS TXT record inputs

Type TXT
Host/Name @
Value verification value provided in Firebase console.

DNS A records inputs

A @ 151.101.1.195
A @ 151.101.65.195
A www 151.101.1.195
A www 151.101.65.195

That's it for today!

Hope you liked the post, if you’ve got any questions your can Mail us mail@stephinreji.me or join our Discord-server and do checkout our website forcommunity.tech