teleren/devto huggingface dataset:
Elements of Performance
Published: 2022-07-26 16:58:00

These notes are sourced from Web Performance Fundamentals on Front End Masters by Todd Gardner

# Understanding Performance
## Why is performance important?
The main two reasons are: 
1. As of 2021, Google ranks you on performance. Performance can make a big difference in whether people see your site on Google search results.
2. Angry and frustrated users don't stick around long.

In the real world, a faster load time can increase revenue and conversion rates. 

## What does fast mean?
Websites that feel fast have ads as an afterthought. All the content you want is all there, but later, come the ads. When ads load first, it's distracting and slows down the content of the page. 

Know the psychology of users:
1. People want to start
2. Bored waits feel slower
3. Anxious waits feel slower 
4. Unexplained waits feel slower (Why am I waiting?)
5. Uncertain waits feel slower (How long is this going to take?) 
6. People will wait for value

## Measuring Web Vitals/Performance
The old way: page load, how long from the time you clicked until the page loaded
The new way: web vitals
1. FCP: first contentful paint
2. LCP: largest contentful paint
3. CLS: cumulative layout shift
4. FID: first input delay

Google's web master tools measure these values and if you cross over their threshold they'll say they'll reduce your rank if you don't fix the issue

### FCP: Respond quickly
Time from when the user clicks the link and the first meaningful bit of content enters the page. 

100ms means good performance
300ms means poor performance

### LCP: get to the point
The time at which the largest percentage of the screen has been rendered gets the LCP. A proxy for when the user thinks the page is almost ready, and most of the page is there. 

2.5s means good performance
4.0s means poor performance

### CLS: don't move stuff
All the times shifts (pushing the page down as loads come in) happen as the page loads. 

.1 means good performance
.25 means poor performance

### First Input Delay: don't load too much 
Browser time delay between the user's first click and execution of application code.

## Lighthouse: Measuring your performance in Chrome
Lighthouse is a top level tab in dev tools. Lighthouse generates a performance report. Make sure you clear storage and leave throttling on (simulate what a user sees versus what a developer sees).

Generate report to reload Chrome in the background and produce a performance report. It'll show all the above metrics and a couple more. 

FYI:
- Chrome Lighthouse reports are relative to what a user sees
- Shows the performance relative to the Chrome window size so make sure to detatch
- Chrome application priority (make sure Chrome stays in the foreground)
TIL: Angular has KeyValuePipe
Tags: angular
Published: 2022-07-26 16:44:33

TIL: Angular has a `keyvalue` pipe and it has come in quite handy. 

[Stack Overflow Answer](https://stackoverflow.com/a/51491848)

[Documentation](https://angular.io/api/common/KeyValuePipe)

<img src="https://www.gilcreque.blog/uploads/2022/baff41ff33.png" width="600" height="68" alt="" />
[TFG] Herramienta para el control y monitorización de entornos inmersivos.
Tags: moongose, javascript, webdev, rv
Published: 2022-07-26 16:42:00

In nowadays society, the use of Virtual Reality in aspects of our daily lives is becoming more and more common, mainly due to the recent reduction in the price of these technologies and their application to sectors such as video games or education. The development of new standalone VR devices brings many advantages(e.g. portability) but makes it difficult to use these devices for research purposes, where it is necessary to control and monitor the stimuli presented to users immersed in the virtual world. Achieving this remote control is possible, but it requires specialised programming knowledge and effort to develop a solution that is not very reusable in response to this need for control and monitoring that is so common among VR researchers.To provide a solution to these problems, this paper presents a web-based tool that allows any non-technical experimenter to define operations that can be executed remotely on a server supporting an immersive environment. In this way, the tool makes it easier to control and monitor users and provides a more flexible solution for each researcher's needs. This document compiles an exhaustive analysis of the tool and compiles the indispensable information for this type of project.

---

[Click to view code in GitHub](https://github.com/jesusalbarca/TFG-Herramiena-Control-y-Monitorizacion-Entornos-Inmersivos)

[Click to view Demo in YouTube](https://www.youtube.com/watch?v=9eiQh1pb5go)
How to collect multi-field data in React via form
Tags: react, form, reactj
Published: 2022-07-26 15:06:00

If you want to collect user data through a form from Front with React js, you may face to the this issue, How to store data in react and then send it to whatever, like your express abckend server.

The first solution is to use useState() hook. It's not perfect but may help you in variues situations. But if you want to take several fields like name, email, birth date and so on, are you creating multi state? 

So, simply don't do that. the better solution is to use single hook to take user data as an object in react.

**

### How?
**

look at this code:

```
  const [userAuth, setUserAuth] = useState({
    email: '',
    password: '',
  });
```
this would help you to store everything. no matter you want to get 2 inputs or 10, you only need a single useState().

then you may ask you how to hanle input?
you need a block of code like this. this function will handle your inputs and recognise them by their name and set the value.


```
  const handleInput = (e) => {
    const { name, value } = e.target;
    setUserAuth({
      ...userAuth,
      [name]: value,
    });
  };
```

the only left thing is to assign handleInput to the input as a onchange event like this:
`
<Input type="email name="email" onChange={handleInput}/>
<Input type="text name="name" onChange={handleInput}/>`


that's it. You then have an object will all user data
Desafios de algoritmo em PHP - problema#1.
Tags: php, algorithms, beginners
Published: 2022-07-26 16:28:00

### Problema
Dada uma lista de números e um número k, retorne true caso existam dois números da lista que somados resultam em k.
Por exemplo, dada a lista [10, 15, 3, 7] e k = 17, o retorno deve ser true pois 10 + 7 é 17.

### Resolução
Considerando que queremos achar dois números que somados resultam o mesmo valor de k, podemos considerar que temos uma expressão de soma simples, como abaixo:


```
k = a + b
```
Essa expressão, pode ser reescrita como:

```
a - k = b
```


Existem no PHP ao menos três formas de fazer isso, vou listar todas as três:

1 - A primeira e a que considero menos ideal é usar array_flip e transformar os valores em chaves, possibilitando o uso do isset em um foreach.
```php
$array = array_flip([10, 15, 3, 7]);
$k = 25;
    foreach ($array as $key => $num) {
        if (isset($array[$k - $key])) {
        echo 'true';
        break;
    }
}
```
2 - Podemos ainda usar o foreach com um in_array, sem necessidade do array_flip.
```php
$array = [10, 15, 3, 7];
$k = 25;
foreach ($array as $key => $num) {
    if (in_array($k - $key, $array)) {
        echo 'true';
    }
}
```

3 - Ou ainda usar uma função que faz uso de loops aninhados para verificar os valores.
```php
/**
 * @param array $array
 * @param int $k
 * @return bool
 */
function twosum(array $array, int $k): bool
{
    foreach ($array as $key => $value) {
        foreach ($array as $key2 => $value2) {
            if ($value + $value2 == $k) {
                return true;
            }
        }
    }

    return false;
}

$array = [10, 15, 3, 7, 2];
$k = 17;
var_dump(twosum($array, $k));

```
Roundup of .NET MAUI. - Week of July 18, 2022
Published: 2022-07-26 16:18:08

Table of Contents:
* [Libraries](#libraries)
* [Videos](#videos)

## Libraries <a name="libraries"></a>

### BlazorBindings.Maui

[Oleksandr](https://github.com/dreamescaper/) has been contributing to the [official experiment project](https://github.com/dotnet/MobileBlazorBindings), and singlehandedly updated it to support .NET MAUI. He even now has documentation on his fork. 

If you fancy writing your .NET MAUI using Blazor components and Razor syntax, check this out!

https://dreamescaper.github.io/MobileBlazorBindingsDocs

```
<StackLayout>
    <Label FontSize="30"
           Text="@("You pressed " + count + " times")" />
    <Button Text="+1"
            OnClick="@HandleClick" />
</StackLayout>

@code {
    int count;

    void HandleClick()
    {
        count++;
    }
}
```

### Shiny 3.0

{% embed https://twitter.com/shinydotnet/status/1550858546425876480?s=20&t=fqcJxcwGnjfOh5dm5Lrqfg %}

https://shinylib.net/

### MetroLog

The Frenchman [Jean-Marie Alfonsi](https://github.com/roubachof) is shipping an updated fork of this popular logging framework from [Claire Novotny](https://github.com/novotnyllc/) with .NET MAUI compatibility. 

{% embed https://github.com/roubachof/MetroLog %}

### Bottom Sheet

I tested this on Mac Catalyst and it works as advertised. Bottom sheets a really pretty easy, and there are a few options out there if you don't fancy building your own.

https://www.nuget.org/packages/Sm.Maui.BottomSheet



## Videos<a name="videos"></a>

### Images in .NET MAUI

Did you know you can put animated GIFs in your .NET MAUI app? 

{% embed https://youtu.be/KVBy4Y1N45Y %}

### Build your own controls in .NET MAUI

This is a super common pattern for creating custom controls. Compose the "in the box" views in .NET MAUI to meet any need. 

{% embed https://youtu.be/mgHbOGXuj0Y %}

### Live Stream: Angular in .NET MAUI

What?! I think bringing Angular and React components into .NET MAUI in the same way we enable Blazor is super interesting. 

{% embed https://www.youtube.com/watch?v=6dEl4n5MuBo %}

### .NET DC: Deploy JS Anywhere with .NET MAUI

Alyssa Nicoll is everywhere! 

{% embed https://youtu.be/B4EYSnV0-rM %}

### Windows System Tray Icons in .NET MAUI

This is something we did in the [WeatherTwentyOne](https://github.com/dotnet/maui-samples) app too! Nice touch.

{% embed https://youtu.be/TxgooETfJug %}

### Scoped Dependencies in .NET

{% embed https://www.youtube.com/watch?v=HMN26wQ8J54 %}

### What's New in Syncfusion Controls for .NET MAUI

Worth the 2 minutes and the awesome music to see what Syncfusion just shipped for .NET MAUI.

{% embed https://youtu.be/h4zJ0zRkdSs %}

### Live Stream: Authentication with .NET MAUI

Sam Basu hosts Dan Siegel to discuss implementing auth in .NET MAUI.

{% embed https://youtu.be/kjRCDzd27oQ %}

### Unit Testing in .NET MAUI

{% embed https://www.youtube.com/watch?v=C9vIDLQwc7M %}

### A Game Engine in .NET MAUI?

Why Shaun, why?! Because you can.

{% embed https://www.youtube.com/watch?v=CjIJh5p5twA %}
Workplace Discrimination in Software Engineering
Tags: career, programming, webdev, discuss
Published: 2022-07-26 16:12:41

Hello!
My professor and I are working on a project about discrimination in software engineering. We are based at Seattle University and really need responses on our survey. If you work in software engineering, we would really appreciate if you took the time to take this survey. It means a lot!
Thank you!

Here is the link: http://bit.ly/SE_Discrimination
Caching Strategies in AWS
Tags: aws, cache
Published: 2022-07-26 16:05:50

Hi,

In this post I will provide you some caching strategies that could be useful when using AWS. Before we start I just want to explain the term TTL which will be used in this article:
Time To Live (TTL) is the time that an object is stored in a caching system before it's deleted or refreshed.

### Scenario
A website that users enters which fetches data from a database through API Gateway and some app logic (in this case through Lambda but could be EC2 etc.)

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

### What caching possibilities do we have?
Let's start from the left:

**[Amazon CloudFront](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/Introduction.html)** uses cache at edge which basically means caching as close at the user as possible. If the user do hit the cache that means that they will get a response immediately. Remember to set a TTL depending on how long refresh you want on your cached data.

In **[Amazon API Gateway](https://aws.amazon.com/api-gateway/)** you can enable caching by going to the API Gateway console, you configure caching in the Settings tab of a named Stage Editor. The default TTL value for API caching is 300 seconds. The maximum TTL value is 3600 seconds. TTL=0 means caching is disabled.

Note that API Gateway can be used without CloudFront too.

In our **app logic** we don't have any caching.

**Database cache**, you don't always want to query and make heavy load on your database. You can have as a thumb rule to always cache **frequent- and complex queries**.

What database cache options do we have?
- **Redis** a fast, open source, in-memory, key-value data store
- **Memcached** an easy-to-use, high-performance, in-memory data store
- **Amazon DynamoDB Accelerator (DAX)** is a fully managed, highly available, in-memory cache for Amazon DynamoDB that delivers up to a 10 times performance improvement—from milliseconds to microseconds—even at millions of requests per second

After implementing our caches our architecture could look something like this:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ajqvadgsxhc1j73pwkik.png)

The more you move to the right side the more computation cost and it’s gonna be a latency back to the user.

**Summary**
Cache is a great way to help browsers and apps load data faster but remember to check where you want to cache and how long you want to cache.

Any comments, questions or discussions are always welcome!
Preparing the code interview... on the other side of the table (Part I)
Tags: career, leadership, beginners, javascript
Published: 2022-07-26 16:01:00

Sooner or later, your manager (or HR) will require you to take part in a selection process. 
"_Could you prepare the coding exercise for this position?_"

If you ask me, the code interview is a necessary evil; while it is  arguably broken / unfair / subjective ...it's the best we have 🤷‍♂️

***

My 2 cents to the tech-world:

###  **folks, do the code interview you'd like to solve**

***

Idea is quite simple; There _**is**_ going to be a code interview during the selection process. At least, prepare the one you'd like to solve if _**you**_ were applying.

## Front-end Challenge

I exposed this to my managers. Asked them to have _carte blanche_ to design my very own front-end code challenge. 

5 months later I can say everything is going well; so I'm sharing with the community.

### What do I avoid? ❌

- Generic js interview questions - _don't ask what is a `closure`_
- Already solved algorithms - _don't ask how to binary-search a balanced whatever._
- Edgy-Wiki questions - _don't ask what is the initial value of the `@@iterator` property for whatever._
 
Why? because those things doesn't matter in the daily work. 

- You don't need to define a `closure`, you need to _**use**_ them.
- You don't need to code a binary search from scratch, you need to _**use**_ it.
- You don't need to memorize the ECMAScript standard, you need to _**use**_ it.

Instead, 

### What do I focus? ✅

- How do you **read code** ?
- How do you **understand the problem we want to solve** ?
- How do you **adapt to an already existing code-base** ?
- How do you **review** ?

### Result 🐈

With all of this in mind. I created a simple - plain - React app at codepen. **I'm planning to analyze the interview exhaustively in this series**. But, in a nutshell it's just another:

> List of products (cards) in JSON format;
> each card has a title, image and price; 
> clicking on a card, the shopping-cart on top is updated.

Thing is...

> There is a **reported bug** from QA team;
> a **visual change** requested from Design team;
> a **new feature** prioritized from Product team;
> and an empty test file with just a `TODO` in it.

![screenshot of the project-view; link to codepen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q52r87ew9prf3l92ildx.png)
 
**===> [code sandbox of the coding interview](https://codesandbox.io/s/octo-marketplace-e7xxw2) <===**

...To Be Continued.

***

> Cover image <a href="https://storyset.com/work">Work illustrations by Storyset</a>

-- 
thanks for reading 💚
How My Views on Software Engineering Have Changed Over Time.
Tags: programming, productivity, career
Published: 2022-07-26 15:54:57


[Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m1dnpcxvoo30d4j1q0yv.jpg)

After I gained knowledge of design thinking and Java, I came to realize that being a software engineer goes beyond knowing how to code and also knowing that lives depend on you.

When I started coding in December 2020, all I was made to believe was that what I needed to be a front-end engineer was the knowledge of JavaScript, HTML, and CSS. I thought this is what the tech space needs me to be good at to become a front-end developer. As someone who wanted to become a full stack, I accepted this wholeheartedly, but no, the industry is way more than that.

The software engineering role goes beyond coding. It is about knowing and considering what may go wrong if your code goes wrong. It is about looking at yourself in the mirror and admitting that businesses and lives can be destroyed if your code goes wrong. It is about knowing that other developers will suffer if your code is not understandable. Paying attention to details and keeping modern life going is part of your role.

As a software engineer, all you do is not code alone. There is a need to cultivate great communication skills to be able to communicate with your team members and make clients understand their problems and how you are going to use tech skills to solve that problem.

I have come to realize that design thinking is for everyone who is involved in creating and providing services, and coders are the essential ingredient here. In every business and industry, software is needed.

I have learnt that with design thinking ability, we can design products, services, spaces, and systems. What we build as software engineers transcends generations, and it will tell us who we are and what we stand for. Design thinking helps us to put humans at the core of the design process. Design thinking is human-centered. Everything we design revolves around humans.
Inside popular Flutter state management libraries
Tags: flutter, dart
Published: 2022-07-26 15:48:14

Demystify Flutter state management solutions by understanding their internal mechanism.

We will categorize libraries by how it propagates state changes.

This is the key attribute and defines a library's capability and limitation. Libraries using the same state propagating mechanism are more or less similar.

There are four approaches to propagate state changes:

- Using widget (StatefulWidget, InheritedWidget, provider)
- Using stream (flutter_bloc, flutter_redux)
- Using subscription (getx, riverpod, flutter_mobx)
- Using graph (creator)

Continue reading here:

https://medium.com/@terryl1900/inside-popular-flutter-state-management-libraries-e20c1119bf75
[5/40 things about data] When in doubt, use Postgres as your database.
Tags: database, postgres
Published: 2022-07-26 15:27:00

It’s quite typical when you start a project to decide what DBMS to use. Elastic, Mongo, some key/value store like Redis, funny things like Neo4J. If you have a use case that clearly fits with a database, fine, otherwise, use Postgres or anything relational. Of course, there will be someone that says “but it does not scale”. Anyone who has worked with a system at scale knows there is no storage system that scales well (except if it’s as simple as hell and is eventually consistent, but not even then).

I love Postgres because of many things: solid, battle-tested, supports transactions (I will write about them), feature-complete, fast, it’s not owned by a VC backed company, guided by the community, calm and steady progress, great tooling, cloud services providing infra, companies with expertise…

When you pick something funny, you end up developing half of the features a solid RDBMS system provides but just worse.

I decided to use Redis as the storage for Tinybird and it’s working great but as the project evolves you miss many of the built-in features Postgres provides. Probably a mistake.
Any Senior Developer here ???
Tags: design, microservices, help, discuss
Published: 2022-07-26 15:19:44

I need some help.
Like what will i have to do to become a senior developer 
Like i know a lot many things like **MERN, MEAN, Django DRF, FastAPI, Spring Boot, MYSQL, MONGODB, Docker, AWS services and many more things**
Even I have made Projects in these technologies BUT still what would I have to do TO BECOME A **SENIOR** DEV.

now a days I am focusing on spring boot and learning Design Patterns.

What roadmap should i follow to become a Senior Backend Dev

If i see the internet Roadmaps, then i know all the things that are mentioned in those Roadmaps,

I wants to have a connection with a senior dev who is working in Industry so he may guide me.

BTW i am a university student.
Paracetamol.js💊| #177: Explica este código JavaScript
Tags: javascript, spanish, webdev, programming
Published: 2022-07-26 15:18:16

## **<center>Explica este código JavaScript</center>**
#### <center>**Dificultad:** <mark>Básico</mark></center>

```js
if (true) {
  let y = 5;
  y = 6; // puede ser re-asignada
  let y = 7;
  console.log(y);
}
```

A. `6`
B. `SyntaxisError: Identifier 'y' has already been declared`
C. `7`
D. `ReferenceError: y is not defined`

Respuesta en el primer comentario.

---
pnpm: --inspect-publish-uid= is not allowed in NODE_OPTIONS
Tags: pnpm, javascript, node, visualstudiocode
Published: 2022-07-26 15:13:56

I got this error when trying to debug a NextJS app with pnpm:

`pnpm: --inspect-publish-uid= is not allowed in NODE_OPTIONS`

The Visual Studio Code Javascript debug console sets the environment variable `NODE_OPTIONS` to include `--inspect-publish-uid=http`, which was causing this failure. The odd part was that the failure persisted even after I had uninstalled every node version except the latest binaries from my system, which should definitely support that flag.

Turns out the answer was just to uninstall `pnpm` on the system, which I had installed via the standalone script. Then after a `brew install pnpm` again, it was working. `pnpm` must have had its own notion of what's valid in `NODE_OPTIONS` that was cached somewhere with the install.
Online code editors.
Published: 2022-07-26 15:11:55

Hello
I am looking for an online code editor that is free and has the functionality of VSCode.

I have reviewed the vcode editors below they do not respond to the criteria sought.
 
JSFiddle - CodeSandBox - CodeAnyWhere - StackBlirz - AW Cloud9 - Gitpod - Theia - Github - CodeSpace.