teleren/devto huggingface dataset:
What is the difference between ==, === and Object.is() in JavaScript
Tags: javascript, webdev, programming, beginners
Published: 2023-01-26 12:42:54

> The post was originally published on [ExplainThis](https://www.explainthis.io/) with title [《What is the difference between ==, === and Object.is() in JavaScript》](https://www.explainthis.io/en/interview-guides/javascript/js-equality)


There are many ways to compare equality in JavaScript. The three most common are `===` (strict comparison), `==` (loose comparison), and `Object.is` (equal comparison). What's the difference between the three? Let's take a look at this question that is often asked in interviews.

## `==` Loose comparison (loose equality)

**When using `==`, before two values are compared, the type will be converted first.**

For example, in the following three examples, the reason why `true` will be printed is precisely because before the comparison, the type is converted.
Otherwise, the number `1` and the string `'1'` represent different values in JavaScript, and strictly speaking, they should not be equal.

Similarly, `undefined` and `null` are different types and different values in JavaScript, but if `==` is used, `true` will be returned.

```jsx
console.log(1 == '1'); // true
console.log(0 == false); // true
console.log(undefined == null); // true
```

`==` can cause some confusion for developers because of the type conversion. Therefore, **in most cases, it is not recommended to use `==`**.

## `===` Strict comparison (strict equality)

`===` does not convert the type and value, so comparing the two will return `false` if they are of different types.
If the value is different, `false` will also be returned.

There are two exceptions though, strict comparisons will return `true` when we compare `+0` and `-0`, and comparisons `NaN` and `NaN` will return `false`.

```jsx
+0 === -0; // true
NaN === NaN; // false
```

**These two situations are when equality comparison `Object.is` comes in handy.**

## `Object.is` Same-value comparison (same-value equality)

Same-value comparison, as the name implies, compares whether two values are equal.
Although it starts with Object, any two values can be compared. For example:

```jsx
console.log(Object.is(1, 1)); // true
console.log(Object.is(1, '1')); // false
```

The above two problems in `===` can be fixed by using `Object.is`

```jsx
console.log(Object.is(+0, -0)); // false
console.log(Object.is(NaN, NaN)); // true
```

However, if you want to check the equality of `NaN`, there is a method called `isNaN` in JavaScript. Whether to use it depends on the habits of the development team. If you are unfamiliar with `Object.is`, you can choose to use `Number.isNaN`.

---
Thanks for reading.

If you like the content, check out the free frontend interview prep resources my friends and I curated at [explainthis.io](https://www.explainthis.io/).

I have got frontend engineer offers from both startup and FAANG companies. I would like to help as many people as possible to land a job. If you have any questions regarding to frontend engineering or frontend interview. Feel free to reach out to me at hello@explainthis.io
git review -2022: My 2022 wrap up as a Software Engineer
Tags: softwareengineer, 2022, wrapup, revisiting
Published: 2023-01-26 16:55:13

---
title: git review -2022: My 2022 wrap up as a Software Engineer
published: true
date: 2023-01-26 12:36:03 UTC
tags: softwareengineer,2022,wrapup,revisiting
canonical_url: 
---

It's been an eventful year for me as a software engineer in 2022. I started off the year by cracking a few job offers and ultimately landed an internship at [Argoid](https://argoid.ai) as a backend software engineer. This opportunity allowed me to gain valuable industry experience and develop my skills further.

One of the highlights of my year was winning the 3rd Rank at the '[HackMerced](https://devpost.com/software/cyberify)' international hackathon. It was an amazing experience to not only participate in a hackathon but to also come out on top. I mean, what's more exciting than staying up all night coding and drinking Red Bull? I also had the opportunity to participate as a mentor and judge in a few other hackathons, which was a great way to give back to the community and help other aspiring engineers.

In May, I graduated from [Ahmedabad University](https://ahduni.edu.in). That was a real treat, a piece of paper that confirms nothing eventually 🥲. Shortly after, our team launched a [product](https://apps.shopify.com/argoid) on the [Shopify](https://www.shopify.com) marketplace. I was responsible for building the product's backend from scratch and it was a great learning experience. This project not only allowed me to improve my backend engineering skills but also to learn new technologies and frameworks. I was also awarded as a "bright beginner" in my company, which was a great recognition for my hard work and dedication. I was later converted to a full-time employee at Argoid, which was a huge milestone for me (PS: Because who doesn't love being in debt and working long hours? 😬).

Later in July, I moved to Bengaluru to work with my team and it was an incredible experience. I met a lot of talented and passionate software engineers and learned a lot from them. It helped me grow both professionally and personally.

In addition to my full-time job, I also made a conscious effort to improve my DSA (thanks to [Striver](https://www.youtube.com/@takeUforward)) and started contributing to open-source projects (Big ups to [Kunal Kushwaha](https://hashnode.com/@kunalk), [Eddie Jaoude](https://hashnode.com/@eddiejaoude) & community). It was a challenging but rewarding experience.

As I look back on the past year, I'm proud of the progress I've made and the opportunities I've had. I've planned a lot of new stuff for 2023. I am determined to continue learning and growing as a software engineer and am excited to see what the future holds. (Said with a hint of sarcasm, of course)

More about me: [https://harshmange.netlify.app](https://harshmange.netlify.app/)

Let's connect on [GitHub](https://github.com/harshmange44) and [LinkedIn](https://www.linkedin.com/in/harshmange) !!

> Happy Coding 2023 :)
Always over estimate effort
Tags: discuss, devrel, productivity
Published: 2023-01-26 12:32:49

Developers solve problems no one have tried to solve before.

Trying to estimate how much time require to solve this problems is a guessing-game, is like gambling.
Gambling is risky, so estimates should be superconservative.

Like gambling, you think you are good, because sometimes you get it right. 
But you are not, you are only lucky.

As a developer, even as a junior developer, you are responsible for the quality of the code, but our job is full of pitfalls.
We have to check performance, maintainability, security and many other subjects. 


If the persons who asked you the estimate say that is too much, remember they asked *you*, and if they needed a different answer they shouldn't ask you in the first place. 
If they need it in less time you can discuss the timing, of course, but the responsibility of failure is not all on you, at least is shared.

Moreover, clients/PM/Product owner/etc. not always need all your work in short time, 
you don't need to demonstrate always how quick you can be. Speed of delivery is not the only metric that matter.

Exaggerate estimate help you to keep calm and experiment various design pattern. 
If you think that they don't give you time to do unit tests, refactor, clean tech debt, remember that are you that say the estimates.

So when you give yourself the chance to have some extra-time, you can really improve your codebase, and deliver very high quality code. 

Thirty minutes can be enough to make significant improvements.

What is a better time to refactor a feature that anyway will be tested? You decide. You have the power to find time to improve the code.

Inspiration for this article, other than personal experience, is [this talk](https://www.youtube.com/watch?v=QVBlnCTu9Ms) by Allen Holub, where he says that doing estimates is stupid and you should not do it. I agree with him, but I'm not a CSO (Chief of Something Officer), I'm a senior developer of a company where I don't have the option to don't give estimates.

I hope this article start a discussion and help me and some of you to better manage this itchy argument.
Whats Medusa an introduction part 1
Tags: medusa, javascript, webdev, beginners
Published: 2023-01-26 12:32:41

In this short blogpost you'll learn about [Medusajs](https://medusajs.com/) the opensource Shopify alternative.

Medusa is based on [Node.js](https://nodejs.org/en/) and the web framework [Express](https://expressjs.com/) medusajs is hosted on [GitHub](https://github.com/medusajs/medusa) and written in [TypeScript](https://www.typescriptlang.org/).

Medusa itself is based on three components:

Medusa Server
Admin dashboard
Storefront


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r7mq734lqpar3o8ussf1.png)

### Howto install Medusa?

Medusa provide a quickstart method to install a Medusa server which assumed you have Node.js and Git installed on your system.

First we install the Medusa-CLI:
```
npm install @medusajs/medusa-cli -g
```

Create a new Medusa project:
```
medusa new my-medusa-store --seed
```

Start you Medusa server:
```
cd my-medusa-store
medusa develop
```

That's all we need todo to run our Medusa server locally.
Medusa provides different storefronts which are based on [Gatsby](https://www.gatsbyjs.com/) or [Next.js](https://nextjs.org/) we'll cover in later parts howto setup a storefrontend.

Thats all for now if you liked the blogpost you can comment below or follow me on [Twitter](https://twitter.com/NorbertFuhs) 

Stay tuned for part 2.
Selectors: Specificity in CSS
Tags: beginners, css, codenewbie, vscode
Published: 2023-01-26 12:20:06

As you write more and more code, you might observe that more than one CSS rule can be applied to an element.

By mistake, you can also double-style an element. In that case, which rule will be applied?

For situations where conflict arises, CSS applies a set of rules and rank them in a specificity hierarchy and apply the 'winner'.
<br>

## Specificity Hierarchy
There are 4 categories for this hierarchy:

**1. Inline styles**
This looks and operates much like CSS, but with a few differences. Inline styles affect the tag they are written in directly, without the use of selectors, which are needed in CSS.
```
/*example*/
<p style="color: green">
```
<br>

**2. IDs**
This type of selector matches an element from your code depending on the value of the ID selector.   

```
/*HTML*/
<div id="footer">Contact me</div>

/*CSS*/
#footer {
   display: flex;
}
```
<br>

**3. (Pseudo-)classes & attributes**
A pseudo-class is used to define a special state of an element such as active, focus, visited, hover and so on.

```
/*when the link is clicked*/
a:active {
   color: pink;
}
```

A class would be defined just as the ID selector, with the difference that its value would be based on the class selector. 

```
/*HTML*/
<div class="container">Hello</div>

/*CSS*/
.container {
   font-size: 2rem;
}
```

You can also style your HTML elements that have a specific attributes or attribute values.

```
/*HTML*/
<a href="https://website1.com">Website 1</a>
<a href="http://website2.com" target="_blank">Website 2</a>

/*CSS*/
a[target] {
   background-color: blue;
}
```

**4. (Pseudo-)elements**
CSS pseudo-elements are used to style specified parts of an element.

```
h1::first-letter {
  font-weight: 900;
}
```
On the other hand, elements can be styled as simple as they come in your HTML structure.

```
h3 {
   border-radius: 10px;
}
```

---

## Calculate Specificity
1. Start at 0
2. Add 1000 for each inline style (this always has the highest priority - using the !important rule will override the inline style)
3. Add 100 for each ID value
4. Add 10 for each (pseudo-)class  or attribute value
5. Add 1 for each (pseudo-)element value.

*Example*

```
h1.p -> 1 + 10 -> 11
h1#title -> 1 + 100 -> 101
<h1 style="color: red"> -> 1000 -> 1000
```
<br>

Want to see more examples and have some exercises?
Check [this](https://www.linkedin.com/posts/cosma-patricia_selectors-specificity-in-css-examples-activity-7024279011044302848-YYLU?utm_source=share&utm_medium=member_desktop) and save it for later. 😍

---
If you enjoyed this post, you can get more relevant development content by subscribing (no spam!) to my newsletter on [my website](https://patriciacosma.ro/).

Thank you for reading!

---
_Cover photo by <a href="https://unsplash.com/@javaistan?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Afif Ramdhasuma</a> on <a href="https://unsplash.com/photos/RjqCk9MqhNg?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>_
Paracetamol.js💊| #201: Explica este código JavaScript
Tags: javascript, webdev, spanish, programming
Published: 2023-01-26 12:15:00

## **<center>Explica este código JavaScript</center>**
#### <center>**Dificultad:** <mark>Intermedio</mark></center>

```js
const fn = (obj) => {
  obj.nombre ??= "invitado";
  obj.edad ??= 0;
  obj.peso ??= 0;
  return obj;
}

console.log(fn({edad:18}))

```

A. `{ edad:18, nombre:invitado, peso:0 }`
B. `{ edad:18 }`
C. `SyntaxisError`
D. `Ninguna de las anteriores`

Respuesta en el primer comentario.

---

Respuesta:
A. `{ edad:18, nombre:invitado, peso:0 }`

Usamos el operador `??=` denominado **nullish coalescing assignment** verifica que el operando de la izquierda es `undefined` o `null`, si se cumple el caso, asigna el operando de la derecha a la declaración; caso contrario significa que la expresión tiene un valor diferente de `undefined` o `null` entonces se queda con dicho valor.

En el ejemplo, pasamos un objeto `{edad:18}` a la función, entonces tanto `nombre` como `peso` tienen valores `undefined` y se realiza la asignación.
5 habits that can make you a good developer
Tags: beginners, productivity, management, devjournal
Published: 2023-01-26 12:12:52

Developing good habits is essential for a developer to be productive, efficient, and successful.
So, here are 5 must-have habits for a good developer

1. **Continual learning**: Technology is constantly evolving, and it's essential for developers to stay current with the latest tools, technologies, and best practices. This can involve taking online courses, reading technical books, and experimenting with new technologies.
2. **Writing clean and readable code**: Writing code that is easy to read and understand is essential for both the developer and other team members who may need to work on the code in the future. This includes using meaningful variable names, commenting code, and following a consistent coding style.
3. **Time management**: Developers often have a lot of tasks to complete, and it's essential to manage time effectively to meet deadlines and prioritize tasks. This can involve using tools such as calendars, to-do lists, and project management software, and learning how to estimate how long a task will take.
4. **Focus and concentration**: Developing the ability to focus and concentrate for long periods of time is essential for developers to be productive. This can involve setting up a comfortable work environment, minimizing distractions, and using techniques such as the Pomodoro Technique to increase focus and concentration.
5. **Collaboration and teamwork**: Developers often work in teams, and it's essential to have strong collaboration and teamwork skills to effectively communicate and work with other team members. This can involve using tools such as version control, issue tracking, and agile development methodologies to work with other team members.
How to improve mobile app performance?
Tags: performance, mobile, android, ios
Published: 2023-01-26 11:41:20

For a successful product that users love and stick to, the ability to perform flawlessly is one of the most important criteria. On a regular basis, we advise to monitor app performance using APM tools to spot why your application performance leaves something to be desired and react fast. 

If you have run through the checklist but your app still lags behind in performance, you should take a deeper app performance audit to determine the issue source in order to address it correctly. 

At Solveit, we start with an audit when the app development or support is transferred from another team. As well, our support services include regular app performance monitoring. 

Check the full article here - [https://solveit.dev/blog/improve-mobile-app-performance]
Building Better Menus: Comparing ol, ul, and menu in HTML
Tags: interactivity, a11y, menus, lists
Published: 2023-01-26 11:20:20

---
title: Building Better Menus: Comparing ol, ul, and menu in HTML
published: true
description: Learn the differences and best practices for using <ol>, <ul>, and <menu> in web development. Enhance your navigation & interactive elements with this guide.
tags: interactivity, a11y, menus, lists
# cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3xr17wd3rhddglcgjy5j.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2023-01-26 11:13 +0000
---
![UL, OL vs Menu](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c1dd5qjfz54b487xlvnz.jpg)

Many are unfamiliar with an HTML tag is a menu. You might be familiar what an order list (ol) or an unordered list (ul). Let's take a look at what the difference between those is.

{% codepen https://codepen.io/StfBauer/pen/KKBRZQE %}

## For text lists - &lt;ol&gt;, &lt;ul&gt;

Those list types may be around your code, too; they are pretty common and always used incorrectly. Why wrong?

When we take a look at the HTML specification under [grouping content](https://html.spec.whatwg.org/multipage/grouping-content.html) it shows the following definitions.

> **ol**
> The ol element represents a list of items that have been intentionally ordered, such that changing the order would change the meaning of the document.
>[html spec - ol](https://html.spec.whatwg.org/multipage/grouping-content.html#the-ol-element)

> **ul**
> The ul element represents a list of items where the order of the items is not important — that is, changing the order would not materially change the document's meaning. 
> [html spec - ul](https://html.spec.whatwg.org/multipage/grouping-content.html#the-li-element)

So both contain only list items, and the list item only contains text, no interactive elements, and links.

## For Menus - &lt;menu&gt;

The definition of a menu is slightly different.

>**menu**
> The menu element represents a toolbar consisting of its contents in the form of an unordered list of items (represented by li elements), each representing a command that the user can perform or activate.
>[html-spec - menu](https://html.spec.whatwg.org/multipage/grouping-content.html#the-menu-element)
 
&lt;menu&gt; and &lt;ul&gt; both render unordered list items. The primary difference is that an &lt;ul&gt; is primarily used for display items. &lt;menu&gt;, on the other hand, is for interactive items. 

So whenever you build a list of interactive elements. Think about which HTML element to use. For me, **&lt;menu&gt;** is the correct one.

Screen reader, by default, doesn't recognise that it is a menu and only narrates it as a list of elements. To improve the accessibility further, add some aria roles to the menu.

```html
<menu role="menu">
  <li><a href="#" role="menuitem">Lorem.</a>
  <li><a href="#" role="menuitem">Numquam.</a>
  <li><a href="#" role="menuitem">Modi!</a>
  <li><a href="#" role="menuitem">Adipisci.</a>
  <li><a href="#" role="menuitem">Officiis.</a>
</menu>
```

And that's it; let me know what you choose to build your next menu, toolbar, and menubar.
useFetch, useLazyfetch with Nuxt 3
Tags: javascript, webdev, beginners, programming
Published: 2023-01-26 11:06:49

{% embed https://www.youtube.com/watch?v=rU92oLYjTGY&ab_channel=CodewithGuillaume %}

useFetch and useLazyFetch are custom hooks that can be used in Nuxt.js version 3 to make API calls.

useFetch can be used to fetch data during the server-side rendering (SSR) process. It will return the data immediately if it is already available, otherwise it will wait for the data to be fetched before rendering the page.

useLazyFetch is similar to useFetch, but it is used to fetch data during the client-side rendering (CSR) process. It will only fetch the data when the component is mounted and will not block the rendering of the page.

Guillaume Duhan
NodeJS Deployment to Heroku Issue: Dependencies error
Tags: heroku, node, npm
Published: 2023-01-26 11:02:20

Sometimes we try to deploy a NodeJS app to Heroku and get an error regarding dependencies. 

The exact issue is that there is a dependency we used during development by installing it globally (using npm install -g)

So now when we deploy the app to Heroku, there is an error.

The Solution:-

Simply, install whatever dependency you had installed globally as a dev dependency (using npm install -D) in your app before deploying app to Heroku. When done, now deploy the app to Heroku.

**The dev dependency will do the same thing for production what a global dependency does during development.**

It should now be deployed :) !
You can't ignore ChatGPT
Tags: ai, programming, beginners, webdev
Published: 2023-01-26 11:01:15

AI is not a thing one should be scared of. #ChatGpt isn't going to take your job any time soon. Bit it doesn't mean you can safely ignore it.

AI is a tool which can make one incredibly productive - and it would be a huge mistake not to leverage it.

In this video I explain how software developers can utilise ChatGpt


{% embed https://youtu.be/AHNlCo69W0s %}
Valkyrie - Decoupling the iGaming industry
Tags: go, igaming, opensource, programming
Published: 2023-01-26 10:55:14



# Domination
Currently the iGaming industry is dominated by a number of aggregators, i.e. platforms offering game providers and gaming operators ways to integrate. These platforms offer a way for providers to spread their content to more operators and for operators to add more interesting games in their customer offerings. At a cost.

# Valkyrie
Valkyrie challenges current state by providing free integrations, bypassing the commercial aggregators and hence potentially decrease cost and increase profit for operators as well as providers. It's all open source!

# Software
The Valkyrie software provides a generic interface for operator integration and game provider specific modules which can be enabled on a per provider basis. It's all tied together with a couple of core components handling basic stuff such as logging, tracing, routing and such.
In addition there are test benches simulating providers as well as operators, and some operational guidance setting up Kubernetes and similar, available.

# Open source
All of the above is freely accessible on GitHub and free to use by whoever interested. Contributions to the software are most welcome as well!
Currently there is only a handful of providers having integrated with Valkyrie, but the more the merrier! Relevance and attraction will increase gradually as more players enter the free iGaming integration space.

# More stuff & info
If this sounds interesting, check out the [Valkyrie website](https://valkyrie.bet/) and the [repo ](https://github.com/valkyrie-fnd)!