Here's how you can undo a commit in Git/Github:

What you'll learn:

• Difference between soft and hard option when resetting
• Undoing the previous commit or a specific commit
• Navigating through the HEAD using ~ (tilde)
• The meaning of HEAD in git

We can use git reset to undo or reset a commit

Difference between --soft and --hard option when resetting.

• soft  - this would only undo the commit but leaves the changes that you've made.
• hard - this would undo the commit and resets every changes you've made.

What does HEAD means in Git?

• It is the reference to the current branch that you're in.

For example If you are in your main branch then the HEAD would be a reference to your main branch.

You can check your previous commits by executing the 𝗴𝗶𝘁 𝗹𝗼𝗴 command:

The ~ (tilde) can be used to navigate in the HEAD when resetting a commit:

HEAD~1 - the previous commit
HEAD~2 - the 2nd previous commit
HEAD~3 - the 3rd previous commit

You could also reset to a specific commit using the commit id:

𝗪𝗵𝗮𝘁 𝗶𝘀 𝗦𝗔𝗦𝗦, and why should you learn it?

Table of contents:

• What is Sass
• Some features of Sass
• Why should you learn Sass

𝗪𝗵𝗮𝘁 𝗶𝘀 𝗦𝗔𝗦𝗦

• SASS stands for Syntactically Awesome Stylesheet.

• It's is an extension of CSS that would help you write more flexible and organized styles.

𝗦𝗼𝗺𝗲 𝗳𝗲𝗮𝘁𝘂𝗿𝗲𝘀 𝗼𝗳 𝗦𝗔𝗦𝗦

• It is fully compatible with CSS and provides many useful functions for manipulating styles.

• Sass have its own syntax and compiles it to a readable CSS and it also support language extensions like variables, nesting, and mixins.

𝗪𝗵𝘆 𝘀𝗵𝗼𝘂𝗹𝗱 𝘆𝗼𝘂 𝗹𝗲𝗮𝗿𝗻 𝗦𝗔𝗦𝗦

• Sass code is more organized and provides all of the features of CSS and even some advanced features.

• It has several features that lets you create awesome style sheets and make writing code more efficient and maintainable.

Example: 𝗡𝗲𝘀𝘁𝗶𝗻𝗴 𝘀𝘁𝘆𝗹𝗲𝘀 𝘄𝗶𝘁𝗵 𝗦𝗔𝗦𝗦

Event Propagation in JavaScript

A Thread 🧵

Event propagation is a process that determines how events travel up and down through the DOM tree to reach their target element.

Event propagation proceeds in three phases:

1. The Capturing Phase

→ The event generates at the root of document and travels all the way down to the target element which is in this case the button element.

2. The Target Phase

→ This phase occurs when the event reaches the target element that generated that event which is in this case the button element as well.

3. The Bubbling Phase

→ During this phase, The event would travel from the target element all the way up to the root of document.

Here's a visual representation of the three phases:

You can read the unrolled version of this thread here: https://typefully.com/alicalimli_dev/rO7OeVX

Event Propagation in JavaScript

Different ways to load JavaScript in HTML

A Thread 🧵

1. Regular Script Loading Inside of the <head> tag

→ Browser fetches and executes the script first before parsing the HTML body.

→ An error might happen here when you're manipulating the DOM because script is executed first and DOM doesn't exist yet.

2. Regular Script Loading at the end of the <body> tag

→ The Script will be fetched and executed when the HTML is parsed completely.

3. Async Script Loading

→ Fetches the script asynchronously while the HTML is being parsed and immediately executes it when the script has been loaded completely.

4. Defer Script Loading

→ The script are being fetched asynchronously and will only get executed when the HTML is parsed completely.

That's it for this thread, If you found this thread useful please do consider to follow me @alicalimli_dev and retweet the first tweet.

Thank you so much for reading 🙏