DEV Community: Ahmad Fathy

Same todo app with different technologies

Ahmad Fathy — Sun, 25 Jul 2021 05:46:36 +0000

It is a very simple "todo" app I made it as a challenge to myself.
I can add a lot of features but I want the app to be as simple as possible.
I am sharing to get some feedback on the code.

JavaScript

preview
Jquery

preview
Vue.js

preview
React.js

preview
Angular.js

preview

source code for all apps

https://github.com/ahmadfathy97/same-todo-app-with-different-technologies

10 JS Projects

Ahmad Fathy — Wed, 13 Jan 2021 00:32:29 +0000

I love to challenge myself so I decided to make 10 projects with different JS frameworks and libraries as I could.

1. Text Editor code | preview

Vuejs
codemirror

2. 3d-car code | preview

three.js

3. just smile code | preview

face-API

4. calculator (desktop app) code | download

electron

5. space war (online game) code | preview

p5.js

6. covid19 cases code | preview

chart.js

7. Twitter Anti Curse (browser extension) code

javaScript

8. photos gallery code | preview

expressjs
mongodb
cloudinary cloud
ejs preprocessor

9. chat app code | preview

expressjs
socket.io

10. jokes (mobile app) code | dwonload

NativeScript
VueJs

What the heck is this?

Ahmad Fathy — Wed, 22 Apr 2020 06:21:18 +0000

Ok I knew it doesn’t make sense, but after finishing this article you will change your mind.

Grab your cup of coffee or your cup of tea or whatever you drink and read this article

Let’s start with the easiest one

Why Math.max() returns -Infinity and Math.min() returns Infinity?

That is because Math.max() uses (-Infinity) as the initial comparant because almost every other value is bigger, that's why when no arguments are given, -Infinity is returned. And the same thing with Math.min() but it uses (infinity) instead of (-infinity).

0.1 + 0.2 == 0.3 // false
That’s not in JavaScript only you can read about it here
0.30000000000000004.com

Before we diving into the details you must know three things:

Firstly there are two ways to convert the type of your value in JavaScript
The explicit way and we all know this

String(1234)                            // "1234"
Number("1234")                          // 1234
Boolean(0)                              // false

The second way is implicit… and it happens when we use some operators like these (-, +, ==, ||, &&)
Secondly there are three types you can convert to (String, Number, Boolean)
Thirdly there are primitive values like String and reference value like Object

So let’s talk about the two ways that we can use to change or convert the primitive values to another type

convert to String

Most of all conversions go as you expect
Implicit way

1234 +""                      // "1234"

Explicit way

String(true)                                     // 'true'
String(false)                                   // 'false'
String(1)                                        // '1'
String(-1.5)                                   // '-1.5'
String(null)                                   // 'null'
String(undefined)                        // 'undefined'
String(Symbol('my symbol'))     // 'Symbol(my symbol)'

Except symbol you can’t convert it with the implicit way it will throw an error

Symbol('my symbol') + ""                   // TypeError is thrown

convert to Boolean

The result will be true or false
Explicit way
To make it easy everything except this list will be true even if the type of value is a reference type.

Boolean('')                                       // false
Boolean(0)                                       // false
Boolean(-0)                                      // false
Boolean(NaN)                                  // false
Boolean(null)                                   // false
Boolean(undefined)                       // false
Boolean(false)                                 // false

Implicit way
Implicit conversion happens in logical context, or is triggered by logical operators (||, &&, !).
To explain it butter I should make a lot of examples but let’s say for now logical operators return the value of original operands, even if they are not Boolean.

false || 'text'               // 'text'
true && 12                  //12

To understand it more I extremely recommend MDN

convert to Number

Explicit way
When we convert String to number first thing the spaces around the string will removed then after this if the string contains valid number will converted else returning NaN and if the string was empty returning 0
What about null or false the converted to 0
And undefined converted to NaN
true converted to 1

Number(null)                   // 0
Number(undefined)              // NaN
Number(true)                   // 1
Number(false)                  // 0
Number(" 12 ")                 // 12
Number("-12.34")               // -12.34
Number("\n")                   // 0
Number(" 12s ")                // NaN
Number(123)                    // 123

Implicit way
It’s triggered by a lot of operators (comparison operators, arithmetic operators, bitwise operators).

+'1234'                               // 1234
1234 != '1234'                  // false
4 > '5'                                //  false
5/null                                // infinity because null will be 0
true | 0                            //  1

Notes:

== does not trigger numeric conversion when both operands are strings.
+ does not trigger numeric conversion, when any operand is a string.
symbol doesn’t convert with implicit or explicit way.
null equals only to null or undefined, and does not equal to anything else.
NaN does not equal to anything even itself

Ok now we are going to explain what happen when we convert the reference type?

As we said before there are only three types to convert to (Boolean, String, Number)
We can’t convert reference types with the explicit way except in special cases like when the array has one element and when we dealing with date

So let’s go with implicit way

When we convert the reference type there are few steps happening behind the scene

Check If the input is already a primitive if it is, do nothing and return it.
Call input.toString(), if the result is primitive, return it.
Call input.valueOf(), if the result is primitive, return it.
If neither input.toString() nor input.valueOf() yields primitive, throw TypeError.

Numeric conversion first calls the step (3) followed by step (2).
String conversion does the opposite step (2) followed by step (3).
Note
_ Most built-in types do not have valueOf, or have valueOf returning this object itself, so it’s ignored because it’s not a primitive. That’s why numeric and string conversion might work the same — both end up calling toString()._

let's take some examples

[] + 0 + 5
"" + 0 + 5
"0" + 5
"05"

![] + [] && 3
!true + [] && 3
false + "" && 3
"false" && 3
3

So now you can tell me the explanation for every single code in the picture

Is it good to use events like “onkeyup” to make requests?

Ahmad Fathy — Tue, 21 Apr 2020 01:59:36 +0000

Why are we using events like "onkeyup"?

Well, It’s better from UX (user experience) side, You just hit the letters and walah here is you result.
But there is an issue here…

First of all let’s see how to make a request with “onkeyup” event?

Let’s fetch some dad jokes…

<input type="search" id="search-box">
<ul id="search-result"></ul>

let searchBox = document.querySelector("#search-box"),
    searchResult = document.querySelector("#search-result");
let config = {
  headers: {
    Accept: "application/json"
  }
};

searchBox.onkeyup = function(e) {
  if(e.target.value.trime().length > 0) {
    let searchText = e.target.value;
    fetch("https://icanhazdadjoke.com/search?term=" + searchText, config)
      .then(res => res.json())
      .then(data => {
        searchResult.innerHTML = '';
        data.results.forEach((joke) => {
          searchResult.innerHTML += "<li>" + joke.joke +"</li>"
        })
      })
  }
}

cOo0O0ol all things go just fine.
But when you type a letter and type another one no matter how fast you are (except if you are faster than eminem)there are two requests have been sent and you actually just want the last one but the first one maybe is pending in the background and maybe it isn’t completed yet and that is not a good thing for performance.

So what can we do to abort the previous request?

We can use AbortController
A controller is an extremely simple object.
It has a single method abort(), and a single property signal.
When abort() is called:
abort event triggers on controller.signal
controller.signal.aborted property becomes true.

so we will make a little change in the code

we will add this line before the function

let controller = null;

and we will add this if statement on the function to abort the previous request if the controller is not null

searchBox.onkeyup = function(e) {
  if (controller !== null) {
    controller.abort();
  }
  // the rest of the code
}

Then we will add last two lines of code after if statement

searchBox.onkeyup = function(e) {
  if (controller !== null) {
    controller.abort();
  }
  controller = new AbortController();
  config.signal = controller.signal;
  // the rest of the code
}

now when we type a letter and type another one before the first request done, the first request will be canceled