Tanweer Profile picture
Feb 24, 2022 10 tweets 3 min read Read on X
💡 JavaScript Tip 💡
Making a 'composition function' becomes much more cleaner✨
#javascript #webdevelopment
Here's how👇
Normally while composing functions, you would do this👇which is okay, but when you are using too many functions, the code become hard to read
Follow these steps👇 to make your composition cleaner and more scalable
Step 1⃣
Install a package called 'lodash' in your project.
run 👇 in your terminal
Step 2⃣
Import the function in your JavaScript file
Do this on top of your file👇
Step 3⃣
Write any two(not necessarily) function:
I'm gonna make functions called 'trim' and 'toLowerCase' 👇
Step 4⃣
Call the 'pipe' function by passing all of your func names in their executing sequence. 'pipe' returns a function which takes the input and passes through the series of function in such a way that the result from first function is passed into the next function
Step 5⃣
Now console log the result. You should see this👇
That's all for now.

If you found this helpful, make sure to

1. Like & Retweet the first tweet so others will also learn

2. Follow @roc_tanweer to see more useful content

See you guys next time👋
Happy Coding🤓

• • •

Missing some Tweet in this thread? You can try to force a refresh
 

Keep Current with Tanweer

Tanweer Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @roc_tanweer

May 1, 2022
✨No Worries About Centering Div Now!🚀🚀
What does it mean by centering a <div> in the first place❓

☛ To center the <div> on the x-axis.

☛ To center the <div> on the y-axis.

☛ To center the <div> on both x-axis and y-axis.

In this case, we're going to do the third one ⇧
As mentioned above, there are 5 methods to center a <div>.

These methods are:

1. Flex
2. Grid
3. Position
4. Margin
5. Table

You can see the general HTML code for the first four methods 👇
Read 16 tweets
Apr 29, 2022
✨Use these APIs to make projects and add it to your Portfolio!🚀🚀

A thread🧵👇
📌 AuthO

➩ A platform that provides you easy to implement, adaptable authentication and authorization system.

➩ It's free plan includes up to 7,000 active users and unlimited logins.

auth0.com
Gratefully, I've got an awesome project for you to build!😇

Make this project and add it in your portfolio collection!🔥

devchallenges.io/challenges/N1f…
Read 10 tweets
Apr 28, 2022
✨Learn Programming While Reading 🚀🚀

Here's top 5 websites for you 👇
A thread🧵 ⬇️
{1/5}

MDN

☛ This contains almost everything you need to learn Web Development.

☛ It's modern UI and dark mode feature makes it easy to navigate and read.

☛ It is open source so you can also add/edit content yourself.

developer.mozilla.org/en-US/
{2/5}

W3 School

☛ It's content covers full-stack dev plus lower languages like C++

☛ The "How to" section helps you build small projects

☛ It also has "Exercises" and "Quizzes" for you to practice what you learnt.

w3schools.com
Read 7 tweets
Apr 27, 2022
💡CSS Tip #12💡
The combination of Pseudo-Classes⚡️

Learn the details🧵👇
📌 What is Pseudo-class?

➥ It is a special keyword that is added to the selector.
➥ It specifies a special state of that selected element.

For example,

"button:hover" selects that <button> over which the cursor is hovering.
📌 :last-child Pseudo-class

➥ This pseudo-class is used to select all those elements which are the last child of the their direct parent element.
Read 8 tweets
Apr 26, 2022
💡Array methods explained💡

Array.prototype.shift()✨

If you have any confusion, feel free to ask👇
Would love to help you😊

Now, let's learn it in detail🧵 ↓

{18/25}
✰ What happens when you call this method❓

☛ The element at zeroth index (first element) is removed and returned.

☛ All the other elements of array is shifted one step back.

☛ The original array is changed and it's length decreases by 1.
✰ What happens if we call this method on an empty array❓

☛ The original array and it's length will remain same.

☛ The return value will be "undefined".
Read 7 tweets
Apr 25, 2022
💡CSS Tip #11💡
You can easily avoid using media-queries for making the header responsive!⚡️

Learn the details🧵👇
✭ combination of "width" & "max-width"

➦ The "max-width" property gives the element a fix width which takes effect only if it is less than parent element's width.

Since we are dealing with wrapper <div> element, it's parent element is <header>
➦ The "width" property, on the other hand, gives the element a fall back width when parent element's width becomes less than it's "max-width".
Read 10 tweets

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Don't want to be a Premium member but still want to support us?

Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal

Or Donate anonymously using crypto!

Ethereum

0xfe58350B80634f60Fa6Dc149a72b4DFbc17D341E copy

Bitcoin

3ATGMxNzCUFzxpMCHL5sWSt4DVtS8UqXpi copy

Thank you for your support!

Follow Us!

:(