DEV Community: Andrei Bumbu

PWA Overview in 6 minutes (part 1)

Andrei Bumbu — Thu, 22 Aug 2019 16:40:41 +0000

Here it is, a favorite technical topic of mine, Progressive Web Apps. The target is to write a series of articles related to PWAs, so let me know if you struggled to understand/implement any of the functionalities.

Maybe you heard about this (becoming) buzzword from Google events or some random articles on the internet. If you don’t, it’s ok, we will start from the beginning.

In the past months, I delivered two presentations on PWAs with an aggregated attendance of over 50 people. The focus was on two directions, first (tied to this article), to present what are PWAs and why they are useful and second, to implement live a PWA from scratch (future articles).

You will discover:

What PWAs are 📳
The benefits you can get from them 👍
Production PWAs examples with statistics 📈
PWA characteristics 📝

But first, important notice (if never used a PWA)! Go to www.twitter.com from Chrome and click on the menu “Install Twitter” or from your Android device and click “Add to Home screen” pop-up. If you are an Apple user tap “Share” and then “Add to Homescreen”.

The target is to really see PWA in action before the information from this article.

Let’s go!

What are PWAs

Based on what Google says:

“Progressive Web Apps are websites built using web technologies but
act and feel like an app.”

The main idea from this definition is that you can develop a web application from scratch or even upgrade an existing one with some functionalities that make it behave like a native app. (mobile or desktop)

And now a more casual explanation:

“Progressive Web Apps are just websites that took all the right
vitamins.”

Therefore PWA can be seen as an upgrade of a web application in order to serve the new needs of the users worldwide. Over 50% of the internet traffic it’s from mobile devices, so your web application should do more than responsiveness in order to adapt.

PWA Checklist

HTTPS - Secure

Any PWA should be served over HTTPS. If this requirement it’s not respected, your application will not be Progressive.

Connectivity Independent

Your web application should support weak networks and also offline support. Both functions can be achieved using service workers and caching.

App-like

The structure of the application should have the aspect of a native one. For that, we can load the app shell the first time, using service workers, and load it on the next visit.

Discoverable

Being a web application can be found by searching engines.

Re-engageable

The main functionality of the mobile application that engages users is push notifications. With service workers, you can implement those for your PWA and use them anywhere.

Fresh

The application can be updated with new functionalities using service workers (background-sync).

Responsive

Of course, the application should be responsive and behave nicely on any type of screen.

Installable

Your application can be installed through the browser and behaves like a native one afterward.

Case Studies

1. Twitter

Let’s start with Twitter's situation:

“With over 80% of users on mobile, Twitter wanted their mobile web
experience to be faster, more reliable, and more engaging. “

Twitter implemented a PWA version of their application and managed to make it the most used client. The application had a lot of success on desktop also.

Here are some statistics that they presented:

Increased the pages per session with 65%
Increased the tweets sent by 75%
Decreased by 20% the bounce rate

This is a tremendous success for them, taking into consideration the volume of their users.

2. Pinterest

Pinterest observed a problem of their web application, as they declared:

“Pinterest noticed its website experience was slow and converted only
1% of all visitors into sign-ups or mobile app installs. This led them
to develop a Progressive Web App.”

After their PWA implementation they also had some valid statistics to share:

Increased time spent on the mobile web by 40%
Increased user-generated ads revenue by 44%
Increased engagement with 60%

The most important one from them, in my perspective, is the revenue one. That demonstrates that this technology can be applied successfully in a large organization and have a positive impact on the business/revenue side.

Characteristics

1. Fast loading

Google says:

“53% of users will abandon a site if it takes longer than 3 seconds to
load!”

Having that information in mind, an important aspect of PWAs is to be fast and reliable. A particular method to achieve that speed is to cache the app shell, using the service workers.

Here are represented some simple network requests. When an user opens the application, the shell can be served directly from the service worker, who can intercept any network request sent from the browser.

The benefit is that the user gets fast feedback before all the resources were loaded.

Another good strategy is to let the service worker do the business-related data request at the start and until the app shell is drawn by the browser, the content could be ready to be loaded. In this example case, the time is reduced to almost half, which represents a huge difference.

2. Installable

“Add to Home Screen, sometimes referred to as the web app install
prompt, makes it easy for users to install your Progressive Web App on
their mobile or desktop device.”

What it does, it adds a shortcut to your screen from where you can start the application in a separate process, not directly on the browser. It works both on mobile and desktop, but the main target is the mobile audience.

A PWA can be installed from Safari, but it will need two additional touches, going through the menu. A workaround for this can be a custom implementation of a banner similar to the one from Chrome, and implement the installation manually in the back.

3. Multiple platforms

PWAs can support multiple platforms (browser, mobile, desktop) and will behave particularly to each one of them. Because nothing is perfect, there are some limitations when we refer to Safari.

Yes, I know what you are thinking. It seems that PWA can be implemented only on Chrome or other non-Apple browsers, but the truth is somewhere in the middle.

Even if important functionalities like Push Notification or Install Banner aren’t supported for Safari, PWAs can still bring value to the Apple fans through the other benefits and with a couple of customizations.

4. Works offline

Works offline it’s a bold statement. It’s an objective for the PWAs, but you can implement just some of the functions.

For example, you can cache the app shell and, if you have a platform similar to dev.to, cache also the visited articles (the data). In this case, if the network is flakey or there is no connection at all, the user can still read the loaded articles.

A more advanced feature could be to use “background sync” to commit the offline user actions when the connection returns.

5. Engaging

The engaging point is strongly attached to push notifications. It’s the main feature that keeps the user interested in the application dynamically.

In the above schema, it’s presented an example of an implementation for push notification into a PWA, using Google Cloud Messaging (GCM).

First, you can ask the user if he agrees to receive notifications. If the answer is positive, request the GCM for a token, then store it into your server, tied to the device.

When you want to send a notification you can simply send a request to GCM, using the token and some additional information, like the message or icons and GCM will send the notification to your device. Thanks to service workers, your client can understand and display the notifications.

It was a high-level article, that presents the main aspects of PWA. To fully understand PWAs, you need to research further. Leave a comment if you want to write more on some specific topics related to PWAs.

PWAs represents a fast approach to develop an application that (almost) works on all platforms. If your use case can ignore the limitations, especially the ones related to iOS, it can be a great solution for your mobile-web dilemma.

Even if you don’t need a mobile application, adding the capability to install and offline functions into your web application can be a huge upgrade. Those functionalities are the easiest to implement and I will present them in a future article.

The main two problems with PWA are the iOS limitations and the fact the *users are not yet familiarized * witg a web application, as a PWA.

It’s a technology in development, that has great potential to solve the changes from the user's behavior and I think it’s great to be aware of it. There may be cases where it’s the perfect fit.

Let me know in the comments if you have any questions or suggestions.

Happy coding!

100 reactions at my first technical article - Tips and Insights

Andrei Bumbu — Mon, 12 Aug 2019 11:10:11 +0000

So, if you are here it means that you considered at least once to write an article or you did it already. (or just curious)

The scope is to present my “roadmap” writing my first technical article, simply and funnily (I hope) and give you the main elements that you need to do it yourself (or maybe improve your process).

My first technical article posted on the internet is named “6 JavaScript WTFs and what to learn from them”. Check it out if you didn’t already and hit me with that juicy feedback.

Before we start, here are some things about me. I am a Romanian Full-Stack developer who worked for almost 3 years in the field, interested in web technologies, especially in ReactJS, practice-oriented and keen to help others find their passion for programming and improve their skills.

The reason I wrote the previous article is tied to my medium term objective to create web oriented content for begginers. (and also to improve my skill down the road)

Why write? Three reasons:

First, you are giving back to the community and help others. For me, this is the greatest motivator, it fills me. (if this is not you, bare with me for the next two reasons)

Second, it helps you learn. Wait, I shouldn't already master the subject? Yes, but when you research deep into it you can find some missing pieces from your knowledge and also explaining a concept may develop you even more. Take the learning pyramid as the argument for this.

Finally, an appreciated skill at most jobs is the capacity to mentor others and transfer knowledge. In this way, you develop this ability and build a “portfolio”.

This introduction is already too long, so let’s start with my past weeks journey.

Find a topic

My first dilemma was: what should I write about? I know that I am excited about web development and that it is my area o strength, but what people would like to find out from me? What content would bring value to them?

The process was the following:

Brainstorming in a document. Anything from keywords, technologies, subjects, etc.. I was trying to start the brain rolls.
My next stop was Google, especially Google Trends. I wanted to discover what people want to find out about web development, JavaScript, ReactJS and others. I couldn’t say that it gave me the answer, but I noticed a large interest in general topics related to JavaScript (duh, of course)
After that, I was thinking a lot about that complicated JavaScript interview questions that always have a little trick.
In the end, I decided to combine the previous thought with my desire to help others understand those concepts, not just to recall the answer.

Therefore I decided that the topic will be about strange things that happen in JavaScript, explained with examples. Also, the article should be informal, friendly and funny. (I hope I got that part)

The title

I know what you are thinking. Why choose a title before the content was written? It’s not a little bit superficial? Yes and no, I would say.

Picking your title may help you clarify the big picture of the article, the general approach that you will apply.

Let me give you an example. My first article could have taken many forms, with similar content. It could be just a fun article where I expose the WTFs without any explanations, or maybe I could have chosen interview questions instead of WTFs, less fun, more productive. You got the point.

Now, let’s dissect the title of the article, “6 JavaScript WTFs and what to learn from them”. My objective was to summarize the content and to add some small clickbait crumbs.

The content was described by “Javascript, WTFs and learn” and the clickbait is formated only by that “6”, which helps to provide something specific and also because brains are attracted to numbers. (“JavaScript WTFs and what to learn from them” doesn’t sound that good, right?)

I will recommend the following article if you want to go deeper into this subject: Choose your next article topic with this exercise by Glenn Stovall

Build a structure

My simple construction started with the principal chunks of the article: Introduction, Content, and Conclusion. For each of them, I started to add small bullet points with the main ideas.

For example, for the conclusion, I wanted to speak about the habit of checking the official documentation when facing a problem, that those WTFs are funny, but may hide bugs and that this is my first attempt in writing a technical article.

Start developing each point

After the structure was ready the focus was to implement each small idea and research for the WTFs.

I tried to read enough to make sure I fully understand the subject and therefore be able to expose it in a simplified manner. After each WTF I asked myself the following questions: The content it’s clear enough? It explains the subject correctly?

Also, for each of them, my idea was to add as many code examples as possible to visualize the explanations.

In the end, I thought of some funny images that are suitable for that case, with the idea of making the article more friendly. (but not overuse them)

Markup or text

My approach was to write the content directly as markup. I didn’t have significant experience with it, so I googled for an online markup tool and my choice was StackEdit. It had a simple interface, with everything I needed.

For this article, I have written the content as text and I will transform it into markup, at the end. Until now I can say that the writing process was quicker, but I should see how much time I will invest in transforming it.

Let me know in the comment what method works best for you.

Prepare for publish

Besides good content and great ability to present information, the “promotion” and the general aspect of the article is essential.

First, I created a cover image, using Photoshop, that has the scope to steal your attention for just a fraction. If you aren’t familiar with Photoshop, you can use other free online tools like Canva to create it. I followed the editor guide advice and made it 1000px x 420px.

Research for the best time and day to post your article. As it was my first article, I also took this aspect into consideration and I found this article that presents (based on data) what could be the best option. I combined it with the fact that the majority of dev.to members are from the USA and I picked Monday 14:00 (Bucharest time).

Review

Review it’s also valuable, therefore, I read the whole article a couple of times, used Grammarly to correct some typos or mistakes and also ask other persons to give me some feedback.

Further, I wrote a short description for the social media platforms and I was ready to publish.

Social Media

My first step in the social media strategy was to identify the platforms where my public should be and try to grab their attention (and 5-8 minutes of their lives). I know that not everyone is a social media person but I think that, in this case, you should see it as the process that helps you get in touch with your public.

The platforms that I used are:

Dev.to as the publishing platform. This platform was a recommendation and I found it perfect for the first steps. It's free, popular and made for developers.

LinkedIn, where a have a 2000 contacts network. I consider LinkedIn a place where I can find my audience, people that are oriented on learning and development and also start building my portfolio.

Twitter, where I opened the account only for this article, as it is not so popular in Romania.

Reddit, one of the largest platforms out there. Hard to believe, but I didn’t have an account on Reddit either (you can judge me for that), but I knew that it’s a large audience here and I gave it a try.

Why not Facebook or Instagram? In my case I thought that my target is not on those two platforms. (at least for the moment)

Numbers, numbers, numbers

Dev.to: The main activity of the article took place here. It exceeded my expectations for my first article (it was a blind shoot) and I was glad to see interest in my content and style of writing. The number of followers also amazed me, we will talk about it in a moment.

LinkedIn: I was more relaxed with this environment because my presence there started 5 years ago. The activity started slow, but in the end, it was nice seeing people that appreciated the content.

Twitter: I didn’t invest so much effort in this one. I just shared the article on my 0 followers account and hope for the best.

Reddit: I failed miserably. My first and second posts were removed and my third one, on another JS group, didn’t get any upvote

Reactions progress

Another interesting aspect was the things that I felt after hitting the publish button. In the first two hours, I tasted some agitation and concern.

The article only got 5-8 reactions (deep down inside I knew that those were my friends), and the LinkedIn post 3-4 likes. That was the moment that I said, ok, this is not for me, I failed, I should focus on other matters.

Around 18:20 I left work, I got on my electric scooter and “drive” for 10 minutes. After that, I check dev.to and something wonderful happened. Almost 40 reactions, all the numbers went up and I received some positive comments. It’s hard to explain that feeling, but it was lit.

For 2 hours I have other activity scheduled (where I didn’t check my phone) and after that, the reactions reached almost 60, the views went up, another motivation dose.

At that moment I just wanted to take my laptop and dig for my next topic. After that, it went up until the morning.

The life span of the article activity was pretty much 24h. (yes, short life)

Moral of the story, have the patience for your content and take as much fresh feedback as you can.

Note: The Time Zone Bucharest, Romania (UTC/GMT +3 hours in the summer)

Followers

An aspect that I didn’t take into consideration was the followers from the dev.to platform. As the article got traction, the number of followers started to raise and hitting almost 700 in two weeks. (thank you all)

Looking at the numbers I realized that there are people in the community that consider my content useful and valuable. That gave me the motivation to continue this path with a lot of energy.

Comments

The comments from LinkedIn are all positive, two of them from known people and two from persons that I never talk with.

On the dev.to platform, there were three positive comments, one neutral (I can’t decode the feeling from it) and one constructive/negative. (that person pointed me to a part of the article that was debatable)

I responded to all of them (didn't take me long) and I took them as great energizers.

P.S.: Here is the funniest notification for views achievement I have ever seen.

My objectives for this article are to share my story and help others start creating content. The advice that I received a couple of weeks ago was, of course, “just start”. Deeply inside you know that is true but sometimes it's hard to “just do it”. With this article, I want to add a small brick to people's trust wall.

After you manage to start, focus yourself on delivering quality content. Again, research your subject and existing content in order to get a strong context, then bring something new, always with your target audience in mind.

Maybe the previous points may seem that they don’t have the best fit, but it’s not the case. You can force your brain to start doing the task you are thinking about and focus afterward on giving your best.

Don’t try to make it more than perfect. Even Ben Halpern says that 85% perfect is better than 100% perfect. (check his article on writing principles)

Thank you for reading it through the final, I hope it was helpful and you got 1% more motivated.

Happy writing!📰

6 JavaScript WTFs and what to learn from them

Andrei Bumbu — Mon, 29 Jul 2019 10:55:24 +0000

Hi! I'm sure that in your JavaScript developer journey you saw at least once (per day) ‘undefined’ is not a function or you asked yourself why the type of the NaN is actually a number. Well, sometimes JavaScript wants to put you to the pressure test.

In this article, you will be part of an adventure in the funny (and dark) side of this beautiful programming language. Let's start!

1. Min > Max

Math.min() > Math.max() //true

Explanation:

Ok, so first let's define a couple of things.

Math is a built-in object that has properties and methods for mathematical constants and functions. Not a function object.

The static function Math.max() returns the largest-valued number passed into it, or NaN if any parameter isn't a number and can't be converted into one.

Perfect, until now we know what the Math object represents in JavaScript and what the .max() static function does. Similarly, the .min() function will do the opposite operation. Until now our instinct may say that Math.max() should return the Number.MAX_VALUE if no parameters are provided.

However, that assumption would be erroneous. Here's why. Imagine that you will have to implement a function that finds the maximum value from an array. That's easy! The simplest way to do it is to iterate through the entire array, compare the elements and store the maximum value. Here's the twist! That variable where you store the maximum value should be initialized with a very, very small value, the smallest.

You might think by now that, ok, the smallest value in Javascript is Number.MIN_VALUE (5e-324) and you are right. But, JavaScript has something prepared for you in this particular case and that is Infinity.

The global Infinity property is a numeric value representing infinity.

And finally, full description of .max() function:

Math.max() returns the largest of the given numbers. If any one or more of the parameters cannot be converted into a number, NaN is returned. The result is -Infinity if no parameters are provided.

Math.min() > Math.max() -> Infinity > -Infinity //true

Takeaways:

What is Math object
How min() and max() functions behave
Infinity object in JavaScript

2. 0.1 + 0.2 = ?

Well, that's too easy. 0.1 + 0.2 = 0.3, right? Not in JavaScript! (or JAVA, or C++, or C#, or..you got the point)

0.1 + 0.2 === 0.3 //false

Explanation:

How is this possible? Before you reconsider all the basic math that you learned, let me introduce Floating Point Math.

Computers can only natively store integers, so they need some way of representing decimal numbers. This representation comes with some degree of inaccuracy.

This subject's a complex one and needs some serious number of hours invested in it. However, I will try to simplify it for this particular situation.

In the case of base 10 system, the only fractions that can be expressed cleanly are the ones with prime factor as a base (½, ¼, 1⁄5, etc.). In comparison 1⁄3 has repeating decimals (0,33333..). Now if we take this information and apply it for 2 base system, the clean fractions are ½, ¼ and 1⁄8, while 1⁄5 and 1⁄10 have repeating decimals. That's causing some leftovers in this example.

0.1 + 0.2 === 0.30000000000000004 //true

When you do the math on these repeating decimals, you end up with leftovers which carry over when you convert the computer's base 2 (binary) number into a more human-readable base 10 number.

Takeaways:

Floating Point Math overview
This concept applies to most of the programming languages

3. baNaNa

Good, after that hard mathematical problem, let's do something fun!

"b" + "a" + +"a" + "a" -> baNaNa

Explanation:

Different from the other 2 WTFs, this one is a little bit simpler. That's because you have 75% of the problem solved. Now we have just one tiny aspect to clarify: what + +"a" will return.

JavaScript syntax is valid because the second + is not the addition operator, but a unary operator.

The unary + operator converts its operand to Number type. Any unsupported values will be evaluated to NaN.

That was effortless! So our expression will l as below, because "a" can't be converted to a Number.

"b" + "a" + NaN + "a" -> baNaNa

In order to conclude we should confirm one more piece of the puzzle. What String + String + NaN + String will return? How the addition operator will behave?

The addition operator either performs string concatenation or numeric addition.

So, there are two types of addition that can occur, string concatenation or numeric addition, in this particular order. The way the algorithm work is the following:

Transform the operands into primitives using ToPrimitive() function.

If one of the operands is a String, then transform the other one into a String and perform string concatenation. Otherwise, convert both of them to Number and execute numeric addition.

"b" + "a"-> "ba"
"ba" + NaN -> "ba" + "NaN" -> "baNaN"
"baNaN" + "a" -> "baNaNa"

Takeaways:

What is Unary operator
Addition operator algorithm
ToPrimitive() function and one use case for it

4. Initialization before the declaration?

Take this code for example:

message = "don't forget to hit the heart button if you liked it.";
console.log(promoteArticle("Stranger"));
function promoteArticle(name) {
    return `${name}, ${message}`;
};
var message;

What will be prompted in the console? A ReferenceError that message is not defined? Or maybe the string "Stranger, undefined". No, it must be a TypeError, promoteArticle is not a function.

Fortunately for us, the output will be exactly what we wanted: "Stranger, don't forget to hit the heart button if you linked it". But why? The "Hoisting" (buzzword) JavaScript behavior is responsible for that.

Hoisting is JavaScript's default behavior of moving declarations to the top.

Note: This is available only for variables defined with the var keyword and declared functions.

Using this piece of information we can claim that our code will look like this after compilation:

function promoteArticle(name) {
    return `${name}, ${message}`;
};
var message;
message = "don't forget to hit the heart button if you liked it.";
console.log(promoteArticle("Stranger"));

Let's take it step by step. The promoteArticle() function is on the top because function declarations are the first elements moved to the top, followed by var variable declaration.

Also, no error is thrown and the message has the right value is because by the time the function is invoked, the variable was both declared and initialized.

Just to make sure I didn't cause any kind of confusion, I will mention the difference between declared functions and expression functions. Below is an example containing both types.

function declaredPromoteArticle(name) {
    return `${name}, ${message}`;
};
var expressionPromoteArticle = function(name) {
    return `${name}, ${message}`;
}

And after compile:

function declaredPromoteArticle(name) {
    return `${name}, ${message}`;
};
var expressionPromoteArticle; // just the variable definition was hoisted
expressionPromoteArticle = function(name) {
    return `${name}, ${message}`;
}

Takeaways:

What is Hoisting
Function declaration vs function expression

5. typeof NaN == 'number'

This one might appear strange especially because of the lexical side, "Not a number is a number", but it will make sense in a second. First, let's inspect the definition:

The global NaN property is a value representing Not-A-Number.

A simple and clear definition for NaN, but we can find the trick in the 'global' word. Contrary to our first instinct, NaN is not a keyword (like null, if, var, etc.), but a global property. What global object may include this property? Yes, you guessed it, is the Number object.

typeof NaN == 'number' -> typeof Number.NaN == 'number' //true

Number.MIN_VALUE
The smallest positive representable number - that is, the positive number closest to zero (without actually being zero).
Number.NaN
Special "not a number" value.

Why I also extracted the MIN_VALUE property you may ask. It's because it will be clearer why the JavaScript compiler doesn't know any difference between MIN_VALUE and NaN property, and therefore both types are numbers.

Takeaways:

NaN it's not a keyword, but a property
How type of operator behaves in this case

6. Array.prototype.sort()

The subject of the last WTF is the behavior of the sort() method, without any parameter sent.

[32, 3, 6].sort() //[3, 32, 6]

Ok, that not work how we expected. Why the values are in that particular order? Let's take more examples and be adventurous.

[32, 3, true, 6].sort() //[3, 32, 6, true]
[32, 3, true, 6, NaN].sort() //[3, 32, 6, NaN, true]
[32, 3, true, 6, NaN, undefined].sort() //[3, 32, 6, NaN, true, undefined]

Got it? Yup, the default algorithm casts each value into a string and then sort them accordingly.

In order to reach the expected result, sort() method will need a compare function as a parameter. That function receives two parameters and return a number which describes the relation between them.

The notation a < b means comparefn(a, b) < 0; a = b means comparefn(a, b) = 0 (of either sign); and a > b means comparefn(a, b) > 0.

Below it's an example using an array of users. The sort algorithm is based on the age property of each user.

let users = [
    {
        name: "Andrei",
        age: 24
    },
    {
        name: "Denisa",
        age: 23
    }];
users.sort((first, second) => first.age - second.age);
//[ { name: 'Denisa', age: 23 }, { name: 'Andrei', age: 24 } ]

Takeaways:

Array.prototype.sort() default behavior
How to implement a specific sort mechanism

Bonus: `NaN` is not a `NaN`

Surprise, there is more!

NaN === NaN //false

This one refers to the Strict Equality Comparison and its implementation.

If Type(x) is different from Type(y), return false.

If Type(x) is Number, then

If x is NaN, return false.

If y is NaN, return false. ...

Return SameValueNonNumber(x, y).

As we know, the NaN type is number so the second if the condition is matched. After that, if any of the operands is NaN, false is returned.

Takeaways:

The first part of Strict Equality Comparison implementation
Last part of that algorithm uses another one named SameValueNonNumber

Finally, we are done. You might think that those WTFs are childish (and you will be right from some of them), but they may hide small bugs (with big impact) and waste a lot of your time and energy.

Also, the habit to search in the official documentation when something seems fishy in your code and learn how the compiler "thinks" can really improve your skills.

Note: This is my first attempt in writing technical articles. Please let me any kind of feedback in the comments and also what topics are you interested in. Happy coding!

DEV Community: Andrei Bumbu

PWA Overview in 6 minutes (part 1)

What are PWAs

PWA Checklist

Case Studies

Characteristics

100 reactions at my first technical article - Tips and Insights

Find a topic

The title

Build a structure

Start developing each point

Markup or text

Prepare for publish

Review

Social Media

Numbers, numbers, numbers

Reactions progress

Followers

Comments

6 JavaScript WTFs and what to learn from them

1. Min > Max

Explanation:

Takeaways:

2. 0.1 + 0.2 = ?

Explanation:

Takeaways:

3. baNaNa

Explanation:

Takeaways:

4. Initialization before the declaration?

Takeaways:

5. typeof NaN == 'number'

Takeaways:

6. Array.prototype.sort()

Takeaways:

Bonus: NaN is not a NaN

Takeaways:

Bonus: `NaN` is not a `NaN`