teleren/devto huggingface dataset:
Are you using the right CSS units? 
Published: 2021-03-12 14:52:27


How to pick which CSS unit to use in which circumstance. I wish this was an easy question to answer but it really is one of those depends type of questions but in this case . It does actually depend on something more than others. 

So, In this article, we are going to generalize the above questions.

*Note: There is always an exception to pretty much all of these rules these are just rules of thumb.* 

**Are you declaring a font size ?** 

 You probably want to go with **rem** they are **relative units** but in the case of **rem**, they are relative to the font size of the root element which is our HTML element most of the time that defaults to 16 px. **rem** are better than using **pixels** because they adapt to the user's system and browser preference whereas if you use pixels you going to locks things in and you can overwrite the user's preferences. 

**Are you declaring a width ?** 

This is one of the harder ones to answer because there are so many different things that you might be a width on but for the most part a **percentage** is a nice direction to go on often coupled with a max-width. There are times also where a **viewport width** might be a good unit to use but it can cause some trouble or some unintended consequences. Another unit that could be a really good fit is the **ch** unit  


**Are you declaring padding or margin ?**

For the most part, going with either **em** or **rem** for these. It depends on whether you want the padding or margin to be consistent despite the element that you are setting it on or if you want it to adjust based on that element's font size. 

**Are you declaring a height ?**

A **percentage, rem, or viewport height** all are a good fit. 




Note: This is an incomplete article. Soon I am going to add more insight on it. If you are up for contribution please add your thought in the comment box. 

Happy Learning ;)
Comment un formulaire à mulitples étapes fonctionne t'il ?
Tags: french
Published: 2021-03-12 14:41:16

Bonjour.

Je développe actuellement une librairie de validation de formulaire.
J'attaque aujourd'hui la gestion des formulaires à étapes multiples.
Je me demande s'il est possible (selon les bonnes pratiques) que différentes étapes communiquent entre elles.

Par exemple…
J'ai deux étapes. J'ai un champ de saisi dans la deuxième étape qui peut être valide ou invalide selon ce que j'aurai saisis auparavant dans la première étape.
Est-ce possible de faire ça, ou est-ce une aberration ?
Les étapes doivent-elles impérativement être indépendantes les une des autres ou est-ce un tout qui fonctionne ensemble ?

Autre exemple.
Est-il possible, selon les infos que je saisi dans une étape, que certaines étapes suivantes soient désactivées ou carrément supprimées ?

Je sais qu'il ne s'agit pas de développement, mais plus de règles quant à l'expérience d'utilisateur…

Merci, et au plaisir de lire vos réponses.
What key did I press?
Tags: react, eventlisteners, nextjs, console
Published: 2021-03-12 14:30:05

I was just listening podcast about keyboard event listeners and I got an idea.

I was thinking about a mini web application that tells developers, what key did they press. I do not mean character on the keyboard. I mean, what that key did. What is hidden in the keys?

If you need some information about the key values or key codes, you need to listen to them. You need to listen to the keyboard. There are [keyboard listeners in Javascript](https://developer.mozilla.org/en-US/docs/Web/API/Document/keydown_event) you can use.

This application is listening to keyboard events and I am handling event values and setting to state. I am using Container from [react-keyboard-key](https://www.npmjs.com/package/react-keyboard-key) package. There is also an option to use hooks. In the Container, there are maintained values and they are presenting to the user.

## Examples
* Application: [whatdidipress.com](https://whatdidipress.com/)
* Github project: [Github](https://github.com/massoprod/what-did-i-press)
* Package: [react-keyboard-key](https://www.npmjs.com/package/react-keyboard-key)

# Support
If you liked my article, application, or project, you can support me by sharing it into the world 🌎. Thank you ♥️
Continuous improvement and adaptability
Tags: awesomitylab, coa, professionalism
Published: 2021-03-12 14:11:04

It is really interesting how one's life can change in just 2 weeks, from lifestyle, thinking, and physical capability to a brand new experience. I'm going to share with you how to maintain self-improvement. This my 2nd week attending the task force Bootcamp and a lot in my personal and career life has changed. 

In the previous week, I acquired a bunch of new soft and technical skills that changed my viewpoint and helped me to enjoy this 2nd week. This is a recap of what I learned and how I applied them on a daily basis. 

By considering adaptability value, I was able to take a decision of not giving up on either my current mobile developer position at Uplus or intern at Awesomity/CoA training. Choosing to go with one of the activities seemed to be the only solution, but I am glad for the aforementioned decision of accepting the challenge of maintaining professionalism in all situations. 

I've learned how to be productive by managing time perfectly. On the technical side, the more you practice best practices the easier the coding becomes. Last week's coder wars tasks helped me to always seek simple, efficient, and accurate solutions. This enhances the ability to create easy and reusable lines of code.

Technically this week I was introduced to scalable and maintainable project structure and the best styling practices. Moreover, I acquired knowledge of intercultural communication, the power of non-verbal communication, and how to be truly empathetic by identifying and understanding different gestures and body languages from various cultures.  

In conclusion, accepting challenges, eagerness to continuously improve, time management skills, constant practices, and adapting to changes, and never giving up even when it is the best option, upgraded my career standards in both ways within the last 2 weeks.
content-visibility: auto and the scrollbar problem
Tags: css, design, performance, beginners
Published: 2021-03-12 13:50:03

Earlier this week on Twitter, I came across a tweet about [content-visibility](https://web.dev/content-visibility/) and the rendering boost that it supposedly provides. I was surprised to find out that it is a relatively new feature launched on August 2020.

Cross verifying it with [Can I Use](https://caniuse.com/css-content-visibility), I was content about the coverage. So I did the thing that I naturally had to. Implement it, release it on the same day for the [job board](https://arbeitnow.com/) 

I ran a performance test using Chrome and saw that there was a marked improvement in Rendering tests (of 60%) as it was promised.

Couple of days later, I noticed a problem when I scrolled up from the footer and there was definitely a janky scroll issue with the scroll bar flickering. Things I checked:

- Tried a different browser to make sure the problem wasn't the browser or addons
- Tried a different device to ensure it is not my old MacBook Pro unable to handle things anymore
- Checked both Production and Dev environments to confirm these weren't caused by other changes
- Checked whether this was a TailwindCSS issue (was definitely sure this wouldn't be it)

Started looking at the recent commit, it was easy to see that content-visibility would be most possible culprit. This seems to be a documented issue and there are fixes for it. The performance gain isn't worth this hacky fix and I would rather not mess with something I do not know.

I missed this from the official documentation, and the explanation makes sense:

> In order to realize the potential benefits of content-visibility, the browser needs to apply size containment to ensure that the rendering results of contents do not affect the size of the element in any way. This means that the element will lay out as if it was empty. If the element does not have a height specified in a regular block layout, then it will be of 0 height. This might not be ideal, since the size of the scrollbar will shift, being reliant on each story having a non-zero height.
- from web.dev
Laravel local scopes: easy, simple and clear.
Tags: laravel, scopes, eloquent
Published: 2021-03-12 13:41:34

**Scopes** allow you to define prebuilt `scopes`(filters) that you can use either every time your query a model with a specific method chain (Local Scope).

Let's take this example: 

```
$newBlackCars = Car::where('type' , 'like' , 'manual')->where('color' , 'like' , 'black')->get();
```

The request above will return all black cars where the `type` is manual.

But what if we could make it more simple and shorter? 

Something like: 

```
$blackManualCars = Car::blackManuals()->get();
```
Yes we can! Thanks to the local scope :

```
class Car
{
    public function scopeBlackManuals($query){
          return $query->where('type' , 'like' , 'manual')->where('color' , 'like' , 'black')->get();
    }

```

To define a local scope, we add a method to the Eloquent class that begins with `scope` then the title-cased version of the scope name. Also as you can see this method is passed a query builder _that you can modify before returning_ and of course needs to return a query builder.

Also, It's possible to define `scope` that accept parameters:

```
class Car
{
    public function scopeBlackType($query, $type){
          return $query->where('type' , 'like' , $type)->where('color' , 'like' , 'black')->get();
    }

```

Then you can use this like : 
```
$blackTypeCars = Car::blacktype()->get();
```
PWA in 20 Minutes!
Tags: pwa, zim, mobile, canvas
Published: 2021-03-12 13:32:06

![Alt Progressive Web Apps PWA](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/amnqzl6f3tzqdb8492c9.png)

[Progressive Web Apps](https://web.dev/progressive-web-apps/) (PWA) are how Web apps can act like Mobile apps. People can save them to their device home screen and launch them from an icon just like a mobile app.  They can then open in full screen without the Browser interface.  They are also loaded from cache so are fast to load and can run offline. PWAs can access device APIs as well.

Here is a 20 minute video that takes you through the following:

1. [Adding a Manifest](https://zimjs.com/pwa/manifest.json)
2. [Adding a Service Worker](https://zimjs.com/pwa/manifest.json) (for caching)
3. [Adding an install message](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Add_to_home_screen)

{% youtube DyOcdVW_dXc %}

Here is the [PWA mobile page](https://zimjs.com/mobile) for ZIM on the Canvas including and example ZIP and resource links.

Making a mobile app has never been easier.  This replaces 70 steps of work to do something similar in Phone Gap / Phone Gap Build.  However a main difference is that the mobile app is not in stores.  PWAs can be in stores - see [Trusted Web Activities](https://developers.google.com/web/android/trusted-web-activity) for Android and perhaps [this article](https://superpwa.com/doc/test-pwa-ios-devices/) for Apple - or turn to [Capacitor](https://capacitorjs.com/).

An important aspect of PWA that we did not talk about is getting a good [LightHouse](https://developers.google.com/web/tools/lighthouse) rating to ensure a good user experience.
How Blockchain Is Affecting In Travel & Tourism Industry
Published: 2021-03-12 13:28:34

How Blockchain Is Affecting In Travel & Tourism Industry
Blockchain is the latest trending technology that has transformed the travel and tourism industries. In the travel industry Blockchain helps in keeping track of the traveler’s luggage and ease of customer identification. These were just the high-level [Importance Of Blockchain Software Development](https://www.pixelvalues.com/importance-of-blockchain-in-mobile-app-development/) technology in the travels and tourism industries; its detailed benefits are as follows:
 

1.In Tracking Luggage
Most of the time, customer’s luggage changes hands multiple during the course of the journey, especially in international travels. [Blockchain Technology Development Companies](https://www.pixelvalues.com/blockchain-development-services/) provides a decentralized database that helps in tracking and sharing this luggage movement with various stakeholders easily.

2.Efficient Identification Services
[Mobile & Web App Development Company](https://www.pixelvalues.com/web-application-development-company-india/php-development-services/) uses Blockchain software development technology that helps in automating the traveler identification process thus, reducing the tourist’s identification time drastically. As we all know that during international travels, a substantial amount of time is spent standing in a queue for performing verification checks as it involves verifying a lot of documents. Using Blockchain, just by the scan of fingerprints this process can be overcome and a considerable amount of time can be saved.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mwsws818spddqkxrxctf.jpg)
3.Secure Payments
As Blockchain can also work as a global ledger, it makes bank payments more efficient, simple, and secure. Already many hotels and airline companies are accepting payments via virtual cryptocurrency such as bitcoin.
 

4.Efficient Customer Loyalty Schemes 

Today, almost all the [Mobile App Development](https://www.pixelvalues.com/) and other businesses we see around run some sort of customer loyalty schemes, tours, and travel industry is no different in this. It results in more customer engagement and increasing revenue as it increases the probability of a customer becoming a potential returning customer. Blockchain technology makes this process easier by making it easy for customers to access their loyalty information, making the overall process simpler, and moreover, resulting in more distribution of the loyalty tokens.
Here, blockchain can be quite helpful in making the overall process easier. Plus it can help customers to access their information regarding loyalty more easily. And ultimately, it results in more distribution of tokens.
Funções em Elixir como associações de valores ou como "receitas"
Tags: elixir, funcoes, programacaofuncional
Published: 2021-03-12 13:26:27

Olá, neste texto vou falar um pouco sobre funções. Em primeiro lugar deixo aqui uma [lista de vídeos de um colega professor da UTFPR, Helio Tozatti](https://twitter.com/elixir_utfpr/status/1369777979950252036), sobre teoria dos conjuntos e conjuntos numéricos. Acho bom revisar os conceitos básicos de matemática para entender alguns conceitos de programação funcional. É essencial? Não sei. Talvez não.

Neste texto usarei funções anônimas pois elas podem ser definidas de forma mais elegante no _shell_ de Elixir, o iex (Elixir Interativo).

Vou começar definindo uma função entre dois conjuntos, A e B, f: A -> B. 

Sejam  A = {:a, :b, :c} e B = {2, 4}.

Seja f tal que:
- f(:a) = 2
- f(:b) = 4
- f(:c) = 2 

Eu defino f em Elixir da seguinte forma:
```elixir
f = fn :a -> 2; :b -> 4; :c -> 2 end
```

Como eu verifico se a função anônima que defini, e que associei à variável f, está correta?

```elixir
> f.(:a)
2
> f.(:b)
4
> f.(:c)
2
```

Observe que entre o nome da variável e os parênteses que listam os argumentos precisamos colocar um PONTO (.).

Esta forma de definir funções, que chamo de "função como associações de valores" é permitida em matemática e em Elixir, mas pouco utilizada.

Em Elixir faria mais sentido criar um [mapa](https://elixirschool.com/pt/lessons/basics/collections/#mapas) para isso:

```elixir
> map = %{:a => 2, :b => 4, :c => 2}       
%{a: 2, b: 4, c: 2}
> map[:a]
2
```

Além de obter, na prática, o mesmo resultado, é mais flexível, pois mapas podem ser modificados (considerando-se a imutabilidade, claro).

Logo, funções em Elixir são geralmente "receitas". Um exemplo básico é uma função que calcula o dobro de um número:
```elixir
> dobro = fn x -> 2*x end
#Function<44.79398840/1 in :erl_eval.expr/5>
> dobro.(2)
4
```

E, claro, você pode ter "receitas" que envolvem mais "ingredientes" (parâmetros). Eu gosto do exemplo do [cálculo do Índice de Massa Corpórea](https://www.programasaudefacil.com.br/calculadora-de-imc), onde dados como entrada o peso de uma pessoa (em quilogramas) e a altura (em metros), calcula-se um valor que fica na faixa de 15 a 40 (às vezes mais):

```elixir
> imc = fn peso, altura -> peso/(altura*altura) end
#Function<43.79398840/2 in :erl_eval.expr/5>
> imc.(80, 1.7)
27.68166089965398
``` 

Claro que estes exemplos são muito simples. Podemos ter funções bem mais elaboradas em Elixir; até mesmo funções que não são funções matemáticas:

```elixir
> Enum.random(1000..2000)
1771
> Enum.random(1000..2000)
1988
```

OK, mas isto é assunto para outros _posts_.
Webiny 5.0 Release
Published: 2021-03-12 13:22:17

It took us ~6 months, 179 calls with users and 3676 commits to ship this release. It is a release where all the changes are 100% driven by community feedback.

Here are the main highlights:

🚀 Drastic performance improvements (benchmarks included)
🔐 Default VPC and private VPC deployment are now supported
🗄 DynamoDB and Elasticsearch support 
🏗 Page Builder overhaul - way faster and more stable than before
💻 Improved developer experience
🧱 IaC implementation via Pulumi

[Check out the blog post for full details](https://www.webiny.com/blog/webiny-v5-the-big-update?utm_source=Dev-to&utm_medium=webiny-blog&utm_campaign=webiny-cross-promote-mar-12&utm_content=webiny-v5-updates&utm_term=W00624).

To get started with Webiny 5.0 ([full tutorial](https://docs.webiny.com/docs/tutorials/create-an-application/introduction?utm_source=Dev-to&utm_medium=webiny-blog&utm_campaign=webiny-cross-promote-mar-12&utm_content=webiny-v5-updates&utm_term=W00625))

## In Other News

Webiny is proud to announce that we have received funding from `Y Combinator` and have joined their latest batch of companies.

![Screen Shot 2021-03-12 at 14.19.10](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wuutunytegneo4dzeqw4.png)
Deal with javascript objects faster !!!
Tags: javascript, webdev, beginners, codenewbie
Published: 2021-03-12 13:09:16

# A better way to split objects into variables

## What is Destructuring?

Simply put, Destructuring is the new & better way of storing JavaScript Object values into individual variables.

## Let's see how it works!

Consider you have an object called **`person`**. And you want to store the individual values of the object person into separate variables.

```jsx
const person = {
    firstName : "John",
    lastName  : "Doe",
    age       : 50,
    eyeColor  : "blue"
};
```

Traditionally, you will do something like this:

```jsx
const firstName = person.firstName;
const lastName = person.lastName;
const age = person.age;
const eyeColor = person.eyeColor;
```

You will create variables of each **`name`** from the object **`person`** and assign it the **`value`** of the same **`name`**.

**This method works!**

But, lucky you, there is an even easier method through which you can get the job done with just one line of code instead of writing 4 lines of code.

As you guessed, it's called **Destructuring**. And this is how it works:

```jsx
const { firstName, lastName, age, eyeColor } = person;
```

All you have to do is just put the **names** of the object within the **`{}`** & assign it to the object **`person`**.

That was easy right!

# Merge variables into an object

## Object Properties

Above, we saw how to split an object into individual variables. Now, what if you wish to do the reverse of it? How about merging multiple variables into an object? Let's talk about it!

## Let's see how it works!

Suppose we want to merge variables **`a`**, **`b`** & **`c`**, into an object called **`okObj`**.

```jsx
const a = 'test';
const b = true;
const c = 789;
```

Traditional this is how people do it:

```jsx
const okObj = {
  a: a,
  b: b,
  c: c
};
```

**Again, this way works!**

But there is an easy, one-liner way to achieve the same! **Here it is:**

```jsx
const okObj = {a, b, c};
```

Cool, right! It will create an object with key names as the variables names and key values as object variables.

## Final Takeaway!

Start using **Destructuring** & **Object Properties** in case you ever need to split up objects or merge variables into an object. 

But feel free to stick to any other method you are comfortable with. 

These are the new and best practices of **writing modern javascript**. Best of all it will save you precious seconds.

## Support

Thank you so much for reading! I hope you found this blog post useful. 

If you like my work please consider [Buying me a Coffee](https://buymeacoff.ee/mindninjaX) so that I can bring more projects, more articles for you.

![https://dev-to-uploads.s3.amazonaws.com/i/5irx7eny4412etlwnc64.png](https://dev-to-uploads.s3.amazonaws.com/i/5irx7eny4412etlwnc64.png)

Also if you have any questions or doubts feel free to contact me on [Twitter](https://twitter.com/mindninjaX), [LinkedIn](https://www.linkedin.com/in/mindninjax/) & [GitHub](https://github.com/mindninjaX). Or you can also post a comment/discussion & I will try my best to help you :D
AI ML Data students opportunity with Sky Hub
Tags: ai, machinelearning, contributorswanted, news
Published: 2021-03-12 13:06:08

If you are interested in developing your skills contact Sky Hub or join our forum indicating which area interests you.


AI / Video Processing / Machine learning specialists
Software developers (golang, web vue.js, hardware)
UI / UX designers
Data scientists

https://chat.skyhub.org/home
team@skyhub.org
https://www.linkedin.com/in/skyhub/
Daily Developer Jokes - Friday, Mar 12, 2021
Tags: jokes, dailydeveloperjokes
Published: 2021-03-12 13:00:04

---
title: "Daily Developer Jokes - Friday, Mar 12, 2021"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Friday%2C%20Mar%2012%2C%202021"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e12591442e48.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q:___ When do front end developers go out to eat?

___A:___ On their lunch `<br>`.
 -->