Tweet

Oliver Jumpertz

12 Jul, 40 tweets, 10 min read

I've created many more visual tips and explanations since I posted my last collection in June.

This is a new collection of visual tips and explanations for JavaScript that can help web developers of any skill level with even more content!

A thread.

1. The Anatomy Of A For-Loop In JavaScript

2. The Anatomy Of A Do-While-Loop In JavaScript

3. The Anatomy Of A While-Loop In JavaScript

4. Anatomy Of A For..Of Loop In JavaScript

5. The Anatomy Of Array.map in JavaScript

6. The Anatomy Of An Object Destructuring Assignment

7. How To Create A Cancelable Promise Delay

8. How To Make An Argument Required With Default Parameters

9. The Performance API

10. How To Infinitely Flatten An Array

11. The Nullish Coalescing Operator

12. Object Destructuring Assignments

13. Destructuring An Object Into Existing Variables

14. Array Destructuring

15. Getting The Last Items Of An Array

16. Formatting The Output Of JSON.stringify

17. How To Prevent An Optional Object Key From Being Always Enumerable

18. How To Destructure From A Possibly Undefined Property

19. Pushing To Arrays In An Immutable Way

20. Swapping Two Variables With Array Destructuring

21. How To Swap To Elements Of An Array In-Place With Array Destructuring

22. Creating A Python-Like Range Functions

23. Creating A Lazy Range Function

24. A Memoized Fibonacci Function

25. How To Connect To MetaMask With ethers.js

26. Getting All Unique Values From An Array

27. How To Sum Up Array Values With Reduce

28. Short-Circuit Evaluation With The Logical OR

29. Short-Circuit Evaluation With The Logical AND

30. JavaScript's Automatic Semicolon Insertion

31. Make Your Numbers More Readable With Numeric Separators

32. How To Quickly Filter Out All Falsy Values From An Array

33. Making Objects Immutable With Freeze

34. Making Arrays Immutable With Freeze

35. Spreading Sparse Arrays To Leave Out Optional Arguments

36. Destructuring Function Parameters To Increase Usability

37. Abstract vs. Strict Equality Comparison

38. The Match Statement Proposal

39. Thread End

That's it for this collection of 38 visual tips and explanations about JavaScript.

I hope you found something useful! 💛

• • •

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

This Thread may be Removed Anytime!

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

More from @oliverjumpertz

Oliver Jumpertz

@oliverjumpertz

13 Jul

Let's be honest, CSS can be pretty difficult.

I had a hard time learning it, but there are a few resources that can definitely help you to understand the style language of the web.

Here is a collection of my favorite ones.

A thread.

1. codrops

An extensive CSS reference that will serve you even better than MDN.

Definitely, my go-to resource when I want to look something up.

tympanus.net/codrops/css_re…

1/11

2. The box model

Everything in HTML and CSS has something to do with a box. Some elements are block elements, others are inline elements.

This concept can actually be pretty difficult to understand.

This article on MDN makes it clear for you.

developer.mozilla.org/en-US/docs/Lea…

2/11

Read 12 tweets

Oliver Jumpertz

@oliverjumpertz

6 Jul

Initially, coming from a class-based React context, I had a hard time understanding hooks.

And the hook I had the hardest time with was useEffect.

Gladly, I understood it, and I now want to show you what useEffect is and how you can use it.

A thread.

0. A quick hook introduction

Hooks were added to React in 16.8 and enable us to write functional components while still using state and other React features like lifecycle methods without a need for classes.

1/15

Some hooks also enable you to set state in functional components.

This doesn't sound like much, but unlike class components, where you had to modify your component's state for React to notice, you need to tell React when something changed in functional components, too.

2/15

Read 16 tweets

Oliver Jumpertz

@oliverjumpertz

5 Jul

I found some awesome resources that teach you about blockchain technology.

They are short videos explaining blockchain technology to you in simple words.

A thread.

1. Asymmetric encryption

Encryption is one of the foundational building blocks of a blockchain. Knowing what it is and understanding how it works is definitely beneficial.

1/6

2. Zero Knowledge Proof

Blockchains are public databases.

Everyone decides what the truth is, and this video explains to you how it works.

2/6

Read 7 tweets

Oliver Jumpertz

@oliverjumpertz

3 Jul

Knowing and understanding the four visibility modifiers of Solidity is a base requirement for any Solidity developer.

These modifiers are:

1. external
2. public
3. internal
4. private

And each has its own use case.

A thread.

1. external

Only functions can be marked external.

External functions are part of the contract interface and can be called from other contracts and transactions.

They can't be called internally.

This leads to external functions being cheaper to execute.

1/14

Arguments of external functions can be directly read from the calldata.

They don't need to be copied over to memory like for public functions.

2/14

Read 15 tweets

Oliver Jumpertz

@oliverjumpertz

2 Jul

Some of the most important tools beginners in web development should take a look at:

- ESLint
- Prettier
- Babel
- Webpack/Parcel/Snowflake/esbuild
- Mocha/Jest

Let's go over them individually.

A thread.

1. ESLint

ESLint can take care of both code quality and code style.

Code quality covers issues like unused variables.

Code style covers issues like mixing spaces and tabs to indent code.

A good rule of thumb is to use ESLint to check your code quality.

1/9

2. Prettier

Prettier is a code formatter.

It takes care of code style and rewrites your code such that it conforms to your style guide.

Use prettier to take care of your code style while ESLint covers code quality.

2/9

Read 10 tweets

Oliver Jumpertz

@oliverjumpertz

28 Jun

Okay, what actually is a dApp?

You might hear this term from time to time, and you have perhaps not spent much more thought on it.

But you are definitely missing out on something great, so let me give you an introduction!

A thread.

1. The internet today

Nearly all websites you visit every day are a perfect model of how the internet works today.

Someone creates a service (a website, e.g.), hosts it somewhere, and has it under full control.

1/24

If you own an app, you decide what happens. You store the data. You can often decide what you do with it.

And most importantly: You can prevent certain users from participating if you don't feel like they deserve to be around.

2/24

Read 25 tweets

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

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

Donate via Paypal Become our Patreon

Thank you for your support!