DEV Community: Ahtisham Hasan Khan

Mastering Git Checkout: Decoding the Impact of One Simple Command

Ahtisham Hasan Khan — Tue, 21 Nov 2023 06:27:22 +0000

It all started with a meme. My team lead sent me this, and before this happened, I was one of those who used this powerful command just for creating a new branch or switching between branches.
But kudos to this meme, I've gained a better understanding of this impactful command.

In this article we will do in-depth exploration of this powerful git checkout command. an essential tool in the Git arsenal. Whether you're a coding enthusiast, a seasoned developer, or somewhere in between, This complete guide will help you understand git checkout step by step. It uses simple code examples and clear explanations to make things easy to grasp.

Understanding the Basics

The fundamental purpose of git checkout is to switch between branches in Git repository, Here's a basic example:

# Switch to an existing branch named 'feature-branch'

git checkout feature-branch

Another cool thing I like about this branch is that you can easily switch back to your previous branch with just this simple command

# Switch to previous branch

git checkout -

Undoing Changes Like a Pro

git checkout is a handy tool for reverting changes, whether to a specific file or even the last commit. Let's look at a couple of examples:

File Undo

# Discard changes made to a specific file (filename.txt)

git checkout -- filename.txt

Use this command when you want to revert changes made to a particular file back to its state in the last commit.

Commit Undo

# Undo the last commit, keeping changes in the working directory

git checkout HEAD~1

This command gracefully undoes the last commit while preserving the changes in your working directory, giving you the flexibility to make further adjustments.

Navigating Detached HEAD State

Understanding detached HEAD state is crucial. Consider the following scenario:

# Move to a specific commit without creating a branch

git checkout <commit-hash>

This command puts your repository in a "detached HEAD" state, allowing you to explore specific commits without creating a new branch.

Tailoring Your Checkout with Paths and Commits

Sometimes, you may want to inspect or revert changes made to a specific file at a particular commit. git checkout enables this with ease:

# Checkout a specific file from a particular commit

git checkout <commit-hash> -- filename.txt

This command allows you to navigate through your repository's history and work with specific files at specific points in time.

Discarding Changes Across the Board

To discard all uncommitted changes in your working directory, use the following command:

# Discard all changes in the working directory

git checkout -- .

This is particularly useful when you want to start fresh or abandon changes that haven't been committed.

Conclusion

Armed with these insights and practical examples, you're well on your way to mastering the art of git checkout. Stay tuned as we explore advanced features and best practices in upcoming articles.

Ready to elevate your Git skills? Let's dive in!

If you found this guide helpful, consider buying me Coffee ☕. Connect with me on Twitter for more updates and discussions: (https://twitter.com/iAhtishamHK).

How to enable HTTPS for WAMP Server.

Ahtisham Hasan Khan — Thu, 19 Oct 2023 07:22:10 +0000

Securing your web applications with HTTPS is a fundamental aspect of web development. In a previous article, we discussed how to enable HTTPS on XAMPP. Now, we'll focus on achieving the same security on WAMP, a widely used web development environment. Let's dive into the process of enabling HTTPS on WAMP for a more secure web experience.

Following are some easy steps to setup enviroment to use HTTPS on WAMP.

It is Important that you have already got WAMP installed, If not you can download WAMP from here.

After you've downloade and installed WAMP; the steps are as follows,

STEP 1: Download and Install OpenSSL.

Both 32 and 64-bit versions of OpenSSL are available. Make sure you're using the right installation for your Windows version.
The most recent version of OpenSSL may be found here. When Installing OpenSSL leave all settings default.

STEP 2: Generate Private Key and SSL certficate.

Load Command Prompt as an Administrator from your start menu and run the commands below. To begin, navigate to the directory where OpenSSL was installed.

cd c:/program files/openssl-win64/bin/

Generate your Private key by using follwing command.You will be asked for a passphrase. Make it anything you want just make sure you remember it for the next step.

openssl genrsa -aes256 -out private.key 2048

openssl rsa -in private.key -out private.key

Now, create your Certificate thorough following commad,You will be asked several questions on this step. You can put whatever you like or just hit enter to leave it at default.
- The only one that really matters is Common Name (e.g. server FQDN) you will need to type “localhost” for this.

openssl req -new -x509 -nodes -sha1 -key private.key -out certificate.crt -days 36500

STEP 3: Move your KEY and Certificate.

Create a folder named "KEY" in the directory C:\wamp64\bin\apache\apache2.4.51\conf
Copy the generated private.key and certificate.crt files from C:\Program Files\OpenSSL-Win64\bin
to the C:\wamp64\bin\apache\apache2.4.27\conf\key folder.

Step 4: Edit Your httpd.conf File

Open c:/wamp64/bin/apache/apache2.4.41/conf/httpd.conf and un-comment (remove the #) the following 3 lines:

LoadModule ssl_module modules/mod_ssl.so

Include conf/extra/httpd-ssl.conf

LoadModule socache_shmcb_module modules/mod_socache_shmcb.so

Step 5: Edit Your httpd-ssl.conf File

Open c:/wamp64/bin/apache/apache2.4.41/conf/extra/httpd-ssl.conf and change all the parameters to the ones shown below.

 DocumentRoot "c:/wamp64/www"
 ServerName localhost:443
 ServerAdmin admin@example.com
 ErrorLog "${SRVROOT}/logs/error.log"
 TransferLog "${SRVROOT}/logs/access.log"
 SSLSessionCache "shmcb:${SRVROOT}/logs/ssl_scache(512000)"
 SSLCertificateFile "${SRVROOT}/conf/key/certificate.crt"
 SSLCertificateKeyFile "${SRVROOT}/conf/key/private.key"
 CustomLog "${SRVROOT}/logs/ssl_request.log"

The DocumentRoot folder is the location where the website files are located. The ServerName can be set as localhost" or the name set to access the website like "example.com"

Step 6: Restart WampServer

Everything should be set up now. Make sure you restart WampServer for the changes to take effect.
If there will be any syntax error, you can check it by navigating to c:/wamp64/bin/apache/apache2.4.41/bin in Command Prompt and run following command;

httpd -t

You should now be able to access your website with HTTPS / SSL enabled.

Public Gist URL: https://gist.github.com/iahtisham/5268b2391c674d758d0c2030dfbdb882

If you found this post helpful, consider buying me Coffee ☕. Your support keeps me fueled to create more content!

"Vue 3 : Smooth migration from the Options API to the Composition API in Vue 3"

Ahtisham Hasan Khan — Sun, 20 Aug 2023 10:25:06 +0000

Introduction

With the introduction of Vue 3, a new component option and a new advised pattern were added to the framework for creating apps. You may get top-level bindings using this magical script setup> method of implementing the logics without having to go through the extra trouble of declaring an export default and a setup().

Why <script setup> ?

Leaner codebase, faster development, readable and easier coding experience by reducing component choices into a single block. With each of these features, Reactivity makes things more simpler.

Using Props with `<script setup>`

Using the <script setup> , a function called defineProps() is utilized. This function is a compiler macro, so there is no need to import it.

<template>
  <div>
    <p>Received Prop: {{ propValue }}</p>
  </div>
</template>

Options API :

<script>
export default {
  props: {
    propValue: String
  }
};
</script>

Composition API :

<script setup>
const props = defineProps({
  propValue: String
});
</script>

Using Methods with `<script setup>`

Methods will be specified as consts and available in your template just like they were in the Options API, since methods are no longer considered objects.

Options API :

<template>
  <div>
    <button @click="incrementCounter">Increment</button>
    <p>Counter: {{ counter }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      counter: 0
    };
  },
  methods: {
    incrementCounter() {
      this.counter++;
    }
  }
};
</script>

Composition API :


<template>
<div>
<button @click="incrementCounter()">Increment</button>
<p>Counter: {{ counter }}</p>
</div>
</template>

<script setup>
import { ref } from 'vue';

const counter = ref(0);

const incrementCounter = () => {
counter.value++;
};
</script>

Using Computed with <script setup>

Computed in Composition API operate as reactive data variables. They perform the role of a function, returning calculated values depending on reactive dependencies.

Options API :


<template>
  <div>
    <button @click="incrementCounter">Increment</button>
    <p>Counter: {{ counter }}</p>
    <p>Double Counter: {{ doubleCounter }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      counter: 0
    };
  },
  computed: {
    doubleCounter() {
      return this.counter * 2;
    }
  },
  methods: {
    incrementCounter() {
      this.counter++;
    }
  }
};
</script>

Composition API :


<template>
  <div>
    <button @click="incrementCounter">Increment</button>
    <p>Counter: {{ counter }}</p>
    <p>Double Counter: {{ doubleCounter }}</p>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

const counter = ref(0);

const doubleCounter = computed(() => {
  return counter.value * 2;
});
</script>

How to enable HTTPS on XAMPP server.

Ahtisham Hasan Khan — Fri, 11 Aug 2023 12:12:56 +0000

You can checkout this article along with more programming related tips and articles on my personal website:

https://www.iahtisham.com/blog/how-to-enable-https-on-xampp-server

Following are Steps to setup HTTPS for XAMP;

STEP 1 Installing XAMMP

Download and install XAMPP Here

STEP 2 Adding VirtualHost

Navigate to
C:\xampp\apache\conf\extra

Open httpd-vhosts-conf file in Notepad

add a VIRTUALHOST in the end by copying following code

  # Virtual Hosts
<VirtualHost *:443>
    DocumentRoot "C:/xampp/htdocs/"
    ServerName localhost
    SSLEngine on
    SSLCertificateFile "conf/ssl.crt/server.crt" 
    SSLCertificateKeyFile "conf/ssl.key/server.key"
    <Directory "C:/xampp/htdocs/">
        Options All
        AllowOverride All
        Require all granted
    </Directory>
</VirtualHost>

ServerName will be the URL you want to setup HTTPS on; In this case We are using localhost

STEP 3 Creating Private Key

Now We will create Private KEY. Navigate to the directory C:\xampp\apache.

Open makecert.bat. It will ask Pass Phrase and some questions. You can give answers of your choices but the comman name should be the URL for which you are setting up SSL for; in this case its "localhost".

Once done with it you can find the certificates and Key folder in the following directory

C:\xampp\apache\conf

STEP 4 Configure httpd.config

Now, Navigate to C:\xampp\apache\conf. We will be configuring our httpd.config file,

All we need to do is to include following lines in the very bottm of httpd.config file.

 # Virtual hosts
Include conf/extra/httpd-vhosts.conf

STEP 4 Installing Certificate

Now, Open ssl.crt folder and Install the certificate on the local machine by follwing steps;]

open server.crt
click **install certificate""
click local machine, then proceed next
click on **Place all certificates in the following store"
- Browse and Choose Trusted Root Certification Authorities, click OK and NEXT
Click Finish

A message will pop up saying ""the import was successfull""

STEP 5 Configure Chrome

We will enable Allow invalid certificates for resources loaded from localhost. in Chrome.

for this paste the following on URL, it will lead you directly to it.

chrome://flags/#allow-insecure-localhost

Restart your XAMPP services and restart chrome as well.

You should now be able to access your website with HTTPS / SSL enabled.

Support Me!!

If you found this post helpful, consider buying me Coffee ☕. Your support keeps me fueled to create more content!

Public Gist URL: https://gist.github.com/iahtisham/09650933ea013fdc14906f56b191e180

Honorable Mentions:

Transform your daily grind with this dynamic calculator website – your ultimate solution for real-world problems! Explore now for a seamless and efficient experience!. Here are some of my favorites

DEV Community: Ahtisham Hasan Khan

Mastering Git Checkout: Decoding the Impact of One Simple Command

Understanding the Basics

Undoing Changes Like a Pro

File Undo

Commit Undo

Navigating Detached HEAD State

Tailoring Your Checkout with Paths and Commits

Discarding Changes Across the Board

Conclusion

How to enable HTTPS for WAMP Server.

STEP 1: Download and Install OpenSSL.

STEP 2: Generate Private Key and SSL certficate.

STEP 3: Move your KEY and Certificate.

Step 4: Edit Your httpd.conf File

Step 5: Edit Your httpd-ssl.conf File

Step 6: Restart WampServer

"Vue 3 : Smooth migration from the Options API to the Composition API in Vue 3"

Introduction

Why <script setup> ?

Using Props with <script setup>

Options API :

Composition API :

Using Methods with <script setup>

Options API :

Composition API :

Using Computed with <script setup>

Options API :

Composition API :

How to enable HTTPS on XAMPP server.

You can checkout this article along with more programming related tips and articles on my personal website:

https://www.iahtisham.com/blog/how-to-enable-https-on-xampp-server

STEP 1 Installing XAMMP

STEP 2 Adding VirtualHost

STEP 3 Creating Private Key

STEP 4 Configure httpd.config

STEP 4 Installing Certificate

STEP 5 Configure Chrome

Support Me!!

Honorable Mentions:

Using Props with `<script setup>`

Using Methods with `<script setup>`