Goldmines for Front-end Developers in 2023 🤯

Open:🧵

I've also earned one certificate from the freeCodeCamp.

1. freeCodecamp: Responsive-web-design

https://www.freecodecamp.org/learn/2022/responsive-web-design/


2. MDN: HTML

https://developer.mozilla.org/en-US/docs/Web/HTML

3. MDN: CSS

https://developer.mozilla.org/en-US/docs/Web/CSS

4. freeCodecamp: JavaScript

https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/

5. javascript .info : JavaScript

https://javascript.info/

6. MDN: JavaScript

https://developer.mozilla.org/en-US/docs/Web/JavaScript

7. freeCodeCamp: Bootstrap, React, Redux

https://www.freecodecamp.org/learn/front-end-development-libraries/


Goldmines for Front-end Developers in 2023

[2, 100, 70, 50].sort( )
⇩
[100, 2, 50, 70]

Why?😭

A Thread🧵

😊 So, don't cry now in this thread we are going to see how the sort() method works behind the scenes.

🎯 My main focus is on how this "sort" method works behind the scenes.

🧠 In short, we are going to see multiple examples, so that you can easily understand.

let's go...🔥

💡 Overview of sort( )

❍ The sort method allows us to sort the elements of the array.

❍ It changes the position of the elements in the original array, in other words, the sort method mutates the original array.

❍ By default, it sorts the array items in ascending order, which means the smallest first and largest value will be the last one.

❍ The sort method "typecasts" the elements into strings and compares the strings to determine the order of the elements.

💡 Example 1:

❍ Suppose, if we want to sort only the "small" characters of the array, it will print as expected.

Right?😊

💡 Example 2:

❍ Now, if we want to sort only the "capital" characters of the array, it will also print the expected result.

Right?😊

💡 Example 3:

❓But what happens if we sort through the mixed cases of the characters?🤔

☹️ This time it's returned with an unexpected result.

Right?😊

❓Who is the culprit here? Let's see an example. Then we will see the work behind the scene.

💡 Example 4:

❍ Suppose we want to sort an array that contains the number of elements.

☹️ But this time it's also returned with an unexpected result.

Right?😊

Let's find out the culprit...😊

🤔 Culprit Of Example 3:

❍ Actually, it is working just fine because it compares the ASCII(unicode value) of the letters.

👀 Have a look at the code snippet👇

❍ The character code of "E" is the smallest in the array. That's why it will be sorted first, then U(85), and so on.

🤔 Culprit Of Example 4:

❍ The above logic also applies here, so the character code of 0(48) is the smallest in the array. That's why it will sort first, then 1000(49), and so on.

🤔 But what is the solution?...

💡 Solution: "compareFunction"

❍ Yes, to resolve this problem we need to pass a "compareFunction" to the sort() method.

❍ The sort( ) method accepts an optional argument which is a "compareFunction" that compares 2 elements of the array.

❍ But, if we omit the "compareFunction" the sort() method sorts the elements on the basis of Unicode values.

❍ The sort( ) method sorts elements on the basis of the returned value of the compare function.

💡 Syntax of compareFunction:

❍ The compare function also accepts 2 arguments, which are 2 continuous elements of the array.

❍ Here, "a" and "b" are the 2 continuous elements of the array.

💡 Solution of Example 3:

1. We need to convert all elements in the same case.

2. Check,

📌 if "charCode of a" > "charCode of b" then return any positive value.

📌 if "charCode of a" < "charCode of b" then return any negative value.

📌 if same then return 0 means nothing.

Still do not understand?😊

Don't worry...

Just say "AAG LAGA DENGE AAG" 🔥😉

💡 Solution of Example 4:

❍ a = 1st item
❍ b = 2nd item

📌 Just we have to check:

❍ if a > b = yes, then we need to SWAP, that's why we have to pass any +ve value.

❍ if b > a = yes, then we don't need to SWAP, that's why we have to pass any -ve value.

❍ else a === b, it will be the same number, we don't need to do anything.

😊 That's all ladies and gentlemen, that's it 🧑‍💻

💡 Refactor the solution of Example 4:

Suppose,

🤔 a = 20 , b = 1000

❍ If I subtract both of them, a - b = A negative number, right?

Now,

🤔 a = 1000, b = 500

❍ If I subtract both of them, a - b = A positive number, right?

And,

🤔 a = 500, b = 500

❍ If I subtract both of them, a - b = 0, right?

🧠 So, can I replace the above logic with 𝗮 - 𝗯?

Yes, we can do it 😊👇

❍  Finally, if you want to sort an array with descending order then you have to only change the order of the return value with 𝗯 - 𝗮

💚 I hope you like my way of presenting the topics, so in return, I need your support by just following me and sharing it with your audience.

⚡ Hello world, in the Qwik framework!

A Thread 🧵

So in this thread, we are going to set-up and build a Hello world app with the Qwik framework.

Prerequisite:
❍ Node
❍ Editor(VS Code)

We can create a Qwik app with CLI that allows you to create a basic working skeleton of an application.

1️⃣ Run this command in the terminal:

This command also asked for ` npm installation ` then type "y" to approve.

After running the above command, it creates a the Qwik app folder something like this.👇

Once the application is created, we have to change the working directory created by the above command.

2️⃣ cd <Name of the Qwik app folder>

3️⃣ npm start

🎉 Congratulations, you have created your first Qwik app successfully.

Now inside the "src" folder, there is a "routes" folder, in this folder, you will get 2 files that are "index.tsx" and "layout.tsx"

src/routes

Actually, these both files contain the all elements of the default page of the Qwik app.

So, I am going to remove some default code for creating our "Hello world" app.😊

⛔ If you have any doubt, follow the official docs:

https://qwik.builder.io/docs/getting-started/

🛠 The Ultimate Series on Git & GitHub

💡 Git Branch?
💡 Main VS Master Branches?

A Thread🧵↓

💡 Git Branch?

◈ You can think of it as alternative timelines for a project, where we can work on multiple ideas simultaneously.

◈ If we change on one branch then do not impact the other branches unless we combine them.

💡 Main VS Master Branches?

◈ We are always working on the branch in git, the default branch name is 𝗺𝗮𝘀𝘁𝗲𝗿.

◈ But many people think that the 𝗺𝗮𝘀𝘁𝗲𝗿 branch is their 𝘁𝗿𝘂𝗲 work of the project, it totally depends on you.

◈ In 2020 GitHub renamed the default branch from 𝗺𝗮𝘀𝘁𝗲𝗿 to 𝗺𝗮𝗶𝗻, but the default git branch name is still 𝗺𝗮𝘀𝘁𝗲𝗿.

◈ 𝗺𝗮𝘀𝘁𝗲𝗿 is just the name of the branch and nothing else.

◈ In short:
- Default branch of github = main
- Default branch of git = master

⚡ 10 Fantastic JavaScript Projects For Beginners.

A Thread🧵↓

1. Count Number App

https://twitter.com/ATechAjay/status/1515577456631058433

2. Modal or Popup Window

https://twitter.com/ATechAjay/status/1516638620316143618

3. Border Radius Slider

https://twitter.com/ATechAjay/status/1517388673469206528

4. Random Number Generator

https://twitter.com/ATechAjay/status/1518198383789236224

5. 𝗥𝗮𝗻𝗱𝗼𝗺 𝗛𝗲𝘅 𝗖𝗼𝗹𝗼𝗿 𝗚𝗲𝗻𝗲𝗿𝗮𝘁𝗼𝗿 & change the background color of the body according to a random color!

https://twitter.com/ATechAjay/status/1519959436307034112

6. 𝗘𝘅𝗽𝗮𝗻𝗱𝗮𝗯𝗹𝗲 𝗮𝗻𝗱 𝗰𝗼𝗹𝗹𝗮𝗽𝘀𝗶𝗯𝗹𝗲 elements

https://twitter.com/ATechAjay/status/1530027234479984640

7. 𝗧𝘄𝗶𝘁𝘁𝗲𝗿 𝗖𝗵𝗮𝗿𝗮𝗰𝘁𝗲𝗿 𝗖𝗼𝘂𝗻𝘁 𝗗𝗼𝘄𝗻

https://twitter.com/ATechAjay/status/1531841330603003904

8. Border with slider

https://twitter.com/ATechAjay/status/1536976588100710400

9. Image Position Slider

https://twitter.com/ATechAjay/status/1537328834382483457

10. Search Bar Expanding And Collapsing

https://twitter.com/ATechAjay/status/1539498364227620866

11.  Footer Date Auto Update

https://twitter.com/ATechAjay/status/1542098394037878785

🔔 One more thing, if you want to learn the awesome projects from this series then you should follow this Github repository. 


🔔 Don't forget to give a star ⭐ to this repository, also if you didn't follow me on GitHub then consider following me.

https://github.com/ATechAjay/50-The-Ultimate-JavaScript-Projects-Series

😢 Default ScrollBar - Ugly

💚 Custome ScrollBar - Impressive

A Thread 🧵↓

😍 I'm inclined to believe that, the default scroll bar of the website looks hideous.

🤔 What do you think about it?

- BTW, we can customize the scroll bar of the websites using a few lines of code.

😍 So, Without further a do, let's get into the thread...

1️⃣ First of all, I love to change the width and background color of the scroll bar track.

- So you can change these using the "-WebKit-scrollbar" selector.

👀 And customize as you want...

2️⃣ Also, if you want to change the thumb of the scrollBar then you can do it using the "thumb" selector.

- You can also use pseudo-class selectors to customize the thumb like hover, active, etc.

- Use "-webkit-scrollbar-button" selector for btn.

👀 And customize as you want...

😍 Try it from here:

https://codepen.io/atechajay/full/dymPNqB

⚡ How to create custom code snippets in VS Code?

A Thread🧵↓

◪ Custome snippets save your time, instead of writing a full line of code yourself, write 1 or 2 characters, and VS Code auto-suggest you.

◪ Suppose, if I want to write "console.log();" in VS code, then we can create custom snippets for this line of code.

◪ Just, you have to write "cl" and VS code will suggest you include this custom snippet.

These are the following steps:

1. Click on "file"

2. Then preferences

3. Configure user snippets

4. Select the technology name(I have selected JavaScript)

◪ Then you will get an interface like this:

◪ Here you have to write your code snippets in JSON format.

⛔ NOTE: Everything in JSON you have wrapped into double quotes.

◪ So there are 4 parts to the snippets:

1. Name of the snippets
2. Prefix
3. Body
4. Description

1. Name of the snippets:

◪ It describes the name of the snippets.

◪ For example "log" is the name of the snippet.

2. Prefix:

◪ Then we have to include the prefix inside the curly braces.

◪ Here, "cl" is the name of the prefix for this snippet.

◪ Note: Everything should be in double quotes.

3. Body:

◪ Then we have to include the body of the snippet.

◪ Here we have to write detailed code.

◪ $1 and $2 specified the position of the cursor, just you have to hit the "Tab" key and it will move number-wise.

◪ After selecting the snippet the cursor is blink inside the log braces.

◪ Again if I hit the "Tab" key the cursor will be moved to the next line.

4. Description:

◪ It describes the description of the snippet.

◪ And finally, save this file and restart VS Code, your snippet will be created successfully.

◪ Similarly, you can create other snippets as well by following these steps.

That's all😍

🛠 The Ultimate Series on Git & GitHub

💡 What is "AMEND" in GitHub?

💡 How to "REDO" the previous commit?

💡 After committing "SHA" id will be changed?

A Thread🧵↓

💡 What is "AMEND" in GitHub?

◩ After committing changes, suppose if you want to change the commit message or commit with new files, then the "amend" flag is used with the git commit command.

◩ Or, if you want to wrap all things under a commit.

◩ Or, if you made mistakes in the commit message that you want to correct.

◩ Or, after making a "commit" you realized that I forgot to include other files.

◩ These are some reasons to use the "amend" flag with the git commit command.

💡 How to "REDO" the previous commit?

◩ Just you have to run this command and include and change your previous commit message.

◩ But before running this command you have to include other files and then run this command.

◩ And if you want to change only the message of commit then you can run it immediately.

💡 After committing "SHA" id will be changed?

◩ Yes, after amending the commit SHA key will be changed every time.

◩ Or in other words, after amending the commit SHA key will be changed.

🛠 The Ultimate Series on Git & GitHub

🤔 What is GitHub Page?
🤔 How to host our website on GitHub?
🤔 How to add a custom domain to our website on GitHub?

A Thread🧵↓

🤔 What is GitHub Page?

◒ Github pages are a static site hosting service that uses HTML, CSS, and JavaScript as a GitHub repository for hosting.

◒ You can host your sites on GitHub with the ".github. io" domain or a custom domain.

◒ There are three types of GitHub pages which are project, user, and organization.

◒ Project sites are connected to a specific project hosted on Github.

◒ User and organization sites are connected to a specific GitHub account.

◒ To publish a user site, you must have to create a repository owned by your user account.

👀 For example:
<user name> .github. io
<organization name> .github. io

◒ Your default domain will start with your user name or organization.

◒ The source file for a project site is stored in the same repository as the project.

◒ Github pages sites are publicly available on the internet by default.

◒ Github Pages does not support server-side languages like PHP, PYTHON, etc.

◒ Github pages do not use for sending passwords, financial info, etc.

◒ Github pages do not use for sending passwords, financial info, etc.

◒ Publish GitHub Pages sites not be longer than 1GB.

🤔 How to host our website on GitHub?

💡 These are the following steps that you should follow:

1️⃣ Create a new GitHub repository.

2️⃣ Then upload the files of your website which can be index.html, style.css, and script.js.

3️⃣ Then click on the "setting" icons on Github.

4️⃣ Now you have to click on the "pages" tab inside the "Code and automation" section.

5️⃣ Then select your branch from "none" to "main" branch.

6️⃣ Finally click on the "save" button.

7️⃣ And wait for 10 to 20 minutes, Now you can see your website has been hosted on GitHub.

8️ Your default domain will be "𝗵𝘁𝘁𝗽𝘀: //𝘂𝘀𝗲𝗿𝗡𝗮𝗺𝗲. 𝗴𝗶𝘁𝗵𝘂𝗯. 𝗶𝗼/𝗥𝗲𝗽𝗼𝗡𝗮𝗺𝗲/"

😍 Have a look:
https://atechajay.github.io/neumorphism_older/ 

🤔 How to add a custom domain to our website on GitHub?

◒ In the same section that is "Code and automation" there is an input field for custom domain.

◒ Just you have to put your domain name and nameserver or DNS of your domain with GitHub.


That's all for now, we will meet in the next thread😍

🔔 Follow Me @ATechAjay For:

🌐 Web Development
✨ JavaScript
📝 Writing Skill
🔥  Motivation
💹 Growth
⛔ But Not For Only Resources & Shitpot

Thank you so much for staying to the end of this thread💚


🛠 Regular Expression in JavaScript?

A Thread🧵👇

🛠 Do you want to play with text or strings? then you have to use "regular expression" also known as ReGex.

◈ Yes, Regular expressions are used to manipulate characters.

◈ Or, Regular expression is a sequence of characters that form a particular pattern that is used to manipulate the character.

◈ That pattern can be used for text search, text replacement, text match, and many more operations with the text.

◈ A regular expression can be a single character or more than one.

◈ Also, a regular expression is an object in JavaScript.

◈ These sequences are used with multiple methods.

◈ There are 2 ways to create regular expressions in JavaScript.

1️⃣ Using regular expression literal:

◈ Just like a string literal and template literals, there is also regular expression literal in JavaScript.

◈ It contains a particular pattern or sequence enclosed between slashes(/ /).

◈ And this is compiled when a script is loaded.

👀 Code Snippet Explain:

◈ sequence - This is a sequence that is used to manipulate with string.

◈ /sequence/ - This is regular expression.

🛠 flag or modifiers - It is used to perform global searches and whether case sensitive or not.

◈ Some flags:
i - Used for case insensitive matching
g - Used for global matching, etc.

NOTE: We can also use more than 1 flag at the same time.

2️⃣ Using a "new" keyword or with ReGex constructor.

◈ We can also create a regular expression with the RegExp constructor.

◈ It provides a runtime compilation of the regular expression.

🛠 Some most important regular expression methods:

① exec() method

◈ If the ReGex is successful matches with a string or its part then it returns an array otherwise returns null.

◈ Also, it returns some more properties like index, input, etc and we can access it as an object.

② test () method

◈ It returns true if ReGex and string are matches otherwise returns false.

◈ Here "ajay" is matching with the string that's why it returns true.

③ match() Method:

◈ It returns an array with the matches otherwise null.

④ search() Method

◈ It returns the first match index otherwise returns -1 if no match is found.

◈ This method is case-sensitive without the "i" flag.

That's all for now, we will meet in the next thread😍

But if you like make sure to:

1. Follow me @ATechAjay

2. Retweet the first tweet.

3. Turn on the notification to never miss these amazing tweets.

Thank you so much for staying to the end of this thread.