Forem: Alecell

Unidades CSS — Um Guia Completo

Alecell — Mon, 11 Mar 2024 15:06:41 +0000

Vejo com muita frequência o pessoal não saber quais unidades CSS usar e em quais situações. Esse é um assunto quase abstrato pois não é claro cada caso meticulosamente explicado de quando usar cada unidade.

Sou frontend a um tempo e ao longo dos anos construí um padrão que funciona pra mim e que aplico em todo projeto que trabalho hoje. Vale reforçar que essa é a minha visão sobre o assunto, mas não é a única, existem vários meios de fazer um bom site.
Aqui vou falar de quase todas as unidades, seus usos e peculiaridades.

Unidades abordadas

Vou usar o w3schools como referencia para as unidades, mas antes vamos separar as unidades em 2 categorias:
absolutas com cm, mm, in, px, pt e pc;
relativas com em, rem, ex, ch e %;

Absolutas

Unidades absolutas são independentes de qualquer outra coisa, além da definição da própria unidade. Valendo apenas lembrar que algumas unidades aqui podem variar dependendo da precisão do seu hardware.

Características

Prós:

Criar elementos puramente visuais
Criar experiencias personalizadas para mídias especificas

Contras:

CSS não é escalável
Responsividade mais verbosa
Páginas não são dinâmicas, mas sim adaptativas

px

Com certeza a unidade mais utilizada na web, não que seja a melhor opção, mas é com certeza a mais fácil de se aplicar em telas no geral.

px é uma unidade péssima pra trabalhar com responsividade de containers, exigindo usar muito mais media-queries do que de fato seria necessário se usasse uma unidade mais adequada.

Até pode usar px se responsividade de containers não for algo necessário na sua aplicação, porém é muito raro criar algo específico por dispositivo, logo é bem pouco comum esse ser o caso.

Use px quando trabalhar com

Detalhes visuais como border-radius, border, box-shadow e etc
Tamanhos (width/height) de elementos puramente visuais não-relativos. Esse tipo de elemento segue o mesmo princípio dos detalhes visuais, eles dependem apenas de si mesmos e não variam em tamanho de acordo com nada, mudam pouco entre resoluções e são muito usados quando trabalhamos com layouts que possuem detalhes nas páginas apenas para finalidade de preenchimento, veja a baixo

Não use px quando trabalhar com

media-query , é basicamente a pior unidade pra se usar, traduzi esse artigo sobre esse assunto
Containers responsivos pois usar pixels nesses containeres acaba exigindo muito mais media-querydo que de fato você iria precisar. Isso também deixa mais difícil de dar manutenção pois as coisas não fluem, são todas estáticas, exigindo mudanças manuais em cada nível dos elementos. Usar px nesse caso também torna seu site adaptativo e não responsivo o que não é um grande problema, mas pela minha vivencia acabo não concordando com a abordagem.
Qualquer propriedade que afete fonte como font-size, letter-spacing, line-height e etc por razões de acessibilidade e respeito com o usuário. Quando você usa fontes em px você acaba ignorando completamente as preferencias de tamanho de fonte do usuário e força ele a ver as coisas da forma que você fixou, isso é péssimo pois penaliza pessoas com problemas ou até mesmo deficiências visuais. Para fontes prefiro rem, mas vamos discutir ela melhor na sessão de unidades relativas.
Espaçamentos como padding e margin pois esses espaçamentos vão variar de acordo com outros elementos relativos na sua página, px nesse caso seria um elemento fixo num mar de relatividade o que acabaria variando muito a experiencia do site com variações principalmente de fonte, por isso não devemos usar px nesse caso, a unidade correta vamos abordar na sessão de unidades relativas.

cm, mm, in

Essas unidades não são tão usadas por serem muito mais úteis em impressão do que na tela de fato, mas é importante falarmos sobre elas.

Como já dito acima são unidades que não devem ser usadas para web, mas sim para gerar documentos impressos, quando for imprimir a tela em questão ou quando na impressão formos usar elementos estáticos na tela.

Antigamente essas unidades eram mais usadas, na época inicial do CSS, para criar documentos impressos, nessa época era MUITO mais frequente.

Nota: A pesar de que faz sim sentido usar essas unidades para impressão e eu ainda vejo valor nelas, hoje em dia não é algo tão usual assim e você poderia usar px normalmente.

Use cm, mm e in quando trabalhar com

Elementos puramente visuais em impressão de papel por serem unidades físicas que vão ser traduzidas para coisas igualmente físicas.

Não use cm, mm e in quando trabalhar com

Telas digitais, munitores ou qualquer coisa que for ser vista no âmbito digital.
Fontes de impressão em papel, a pesar de que sim, essas são unidades boas para impressão física, existem unidades melhores pra esse fim que vamos discutir no próximo tópico.
qualquer outro caso que não sejam os citados no tópico “use”

pt e pc

Quando falamos de unidades em impressões de texto precisamos falar, basicamente, a língua da impressora e essa língua é pt e pc.

Essas unidades nasceram pra trabalhar texto impresso especificamente, ou seja, elas devem ser usadas apenas para esse tipo de trabalho.

Use pt e pc quando trabalhar com

Fontes em impressão em papel pois essas unidades nasceram exatamente para isso e as impressoras em geral não tem problemas de precisão para trabalhar com essas unidades.

Não use pt e pc quando trabalhar com quaisquer outra coisa que não seja impressão no papel.

Relativas

Unidades relativas são aquelas que os desenvolvedores front-end mais vão usar, são unidades dependentes de outros valores como tamanho da tela, configurações do usuário e etc.

Características

Prós:

Responsividade mais manutenível
Se adapta de acordo com a necessidade de usuário
Maior escalabilidade para componentes

Contras:

Exige devs mais experientes

em e rem

As unidades clássicas pra se trabalhar com fontes na web, diferente do pt e pc, em e rem são unidades feitas pra usar fora de impressão e é a unidade que vamos usar majoritariamente para fontes em nossas aplicações e sites.

A pesar disso existem peculiaridades dentro de cada unidade que me força a tratar cada uma em um tópico diferente!

em

Essa unidade deriva seu valor da font size do elemento pai, ou seja, se o pai possui 16px de font-size, 1rem vai ser 16px, 2rem vão ser 32px e assim sucessivamente.

Essa unidade é bastante útil quando não trabalhamos com layouts criados por designers decorrente de que em geral eles não pensam nessa propagação do font-size com em, tornando mais trabalhoso do que útil usar em como unidade nesses casos, para usar fontes na web rem acaba sendo melhor na minha opinião, mas vamos discutir melhor sobre isso no próximo tópico.

Além disso existe uma coisa muito importante sobre o uso de em, essa é com certeza a melhor unidade pra se usar com responsividade, fazendo com que troquemos o @media screen and (max-width: 1200px) por @media screen and (max-width: 120em) (considerando uma font-size base de 10px).

Existem os que defendam que é melhor utilizar os espaçamentos (como padding e margin) com em, mas eu discordo porque isso gera mais problemas do que soluções. Posso até, quando precisar alterar o tamanho de uma fonte, ter que me atentar a reajustar o espaçamento também uma vez que o espaçamento vai mudar com a fonte e isso quase nunca é o desejado.

Use em quando trabalhar com

media-query, traduzi um artigo excelente sobre o assunto e você pode ler ele aqui
Quando for trabalhar com fontes em aplicações web que não tenham sido idealizadas por designers. Na maioria dos casos os designers não fazem os layouts de uma forma que as fontes são relativas umas as outas de forma pensada, fazendo com que qualquer alteração simples de font-size em vire uma necessidade de alteração em cascata ao invés de ser uma simples alteração como deveria ser. Essa unidade é melhor quando não temos um layout pronto ou temos apenas um wireframe base, nesses casos faz sentido.

Não use em quando trabalhar com quaisquer outra situação que não sejam os casos citados a cima.

rem

Talvez a unidade mais negligenciada na minha visão, o rem tem o mesmo poder do em, mas não deriva da fonte pai e sim da fonte base da página, isso faz com que ela seja muito mais consistente pra se trabalhar com fontes na web!

Essa unidade é excelente para fontes por ser uma unidade acessível e não exigir quase nenhum esforço dos devs para fazer sua acessibilidade funcionar, o rem deriva da fonte root e faz com que, se ela for 16px, logo 1rem vai ser 16px e assim sucessivamente tal como o em e é dai que vem sua acessibilidade!

Existem pessoas com dificuldades visuais ou mesmo apenas pessoas com grau mais alto no óculos cujas, em geral, aumentam a fonte do celular ou dão zoom na página pra que seja mais fácil de enxergar.

Esses aumentos na web são traduzidos como o font root que por sua vez vão afetar diretamente tudo que tiver usando rem, fazendo no fim a fonte realmente aumentar e se adaptar a necessidade do usuário sem que ele precise dar zoom na tela apenas porque sua aplicação não suporta a necessidade dele.

Assim, para tudo que for derivado de fontes como font-size, letter-spacing e qualquer outro valor que em geral usaríamos px, use rem.

Mas não só isso, também é interessante usar rem para delimitadores. Um layout nem sempre deve esticar até o infinito e esse valor de limite, que pode ser na prática 1920px, pode ser traduzido em 192rem por exemplo.

Nota: Vale do adendo de que line-height acaba sendo melhor sem nenhuma unidade.

rem também é bastante útil pra criar espaçamentos de padding e margin pela sua consistência e fluidez com a fonte root, sendo essa na minha visão a melhor unidade pra isso também.

Nota: Prefiro usar rem alterando a fonte do html e do body para font-size: 62.5%; fazendo essa alteração fica mais fácil de trabalhar com rem já que ela é múltipla de 10, e não de 16. Os exemplos dados inclusive foram baseados nesse hack.

Use rem quando trabalhar com

Para todas as propriedades derivadas de fonte na web pela sua consistência de manter o valor da unidade e acessibilidade escalando o valor de acordo com a necessidade do usuário.
Espaçamentos gerais como padding e margin pois eles vão mudar de acordo com a fonte root da página, se adaptando de acordo com a alteração de fonte base o que deixa a página mais consistente em sua fluidez e evita que ela quebre quando usarmos fontes baseadas em rem.
Delimitadores de tamanho de página já que como os espaçamentos e as fontes estão sendo derivadas da root font do usuário é interessante que os delimitadores sejam usados com rem também. Assim o tamanho máximo da página irá fluir de acordo com a root font, permitindo mais espaço para acomodar os demais elementos que cresceram junto com a alteração da root font do site.

Não use rem quando trabalhar com quaisquer outras situações que não sejam as citadas a cima.

Disclaimer

Usamos o rem para espaçamentos de não em pela natureza derivada do root do rem. O problema do em é que ele varia de acordo com a fonte do pai e isso gera side-effects geralmente indesejados. Em contra partida o rem deriva do root, o que não atrapalha enquanto trabalhamos, mas altera de acordo com a necessidade do usuário. Então usando rem para espaçamentos ganhamos a fluidez dos espaçamentos variarem com a fonte.

ex e ch

Essas unidades são meio novas e são relativas a caracteres na font-size atual, boas pra fazer coisas derivadas dos tamanhos dos textos.

ex: é a altura do caractere x na font-size atual
ch: é a largura do caractere 0 na font-size atual

Use ex quando trabalhar com

Contêineres com altura relativa a quantidade de linhas, por exemplo quando você quer limitar uma quantidade de linhas visíveis no container sem precisar fazer algum hack

Não use ex quando trabalhar com qualquer outra situação que não seja ao menos semelhante a citada a cima.

Use ch quando trabalhar com

Contêineres com largura relativa a quantidade de caracteres, por exemplo quando você quer limitar o tamanho de um texto no container sem precisar fazer algum hack

Não use ch quando trabalhar com qualquer outra situação que não seja ao menos semelhante a citada a cima.

Para ambos os casos pode ter alguma situação além dessas que o uso faz sentido e eu desconheça, mas via de regra é isso.

%

Essa é a unidade que deveria ser a mais utilizada na esmagadora maioria dos casos, mas infelizmente não é tão utilizada assim…

Essa unidade nos permite evitar um uso excessivo de media-query pela sua característica dinâmica com relação ao tamanho da página. Com isso você pode deixar seus contêineres fluidos e dinâmicos de acordo com a necessidade.

Existem também outros casos que podemos usar % a pesar de que sua principal função é determinar tamanhos de contêineres.

Use % quando trabalhar com

Contêineres que fluem com o tamanho da página/container pai, quase todos os elementos de uma página devem ser construídos com % por ser uma unidade flexível. Essa unidade reduz consideravelmente a quantidade de media-query que sua página precisa sendo mais fácil de dar manutenção e manter no geral.
- Adendo: Porcentagem deve ser usada em todos os contêineres, pai/filho não importa. Existe exceções já abordadas neste artigo, mas fora elas, via de regra, o resto TUDO é porcentagem.
Posicionamento relativo pois quando você tem algo em algum posicionamento left/right/bottom/top que varia de acordo com o tamanho do container é interessante usar, por exemplo, um <code></code>right: 3%.
Border Radius para atingir resultados ovalados quanto trabalhar com border-radius.

Não use % quando trabalhar com

Fontes/Textos pois quase nunca você vai querer usar font-size relativa ao container pai, em geral a fonte varia em outra proporção oque faria fontes em porcentagem gerarem mais manutenção do que soluções.

Conclusão

Eu espero que não tenha esquecido nenhum caso de uso ou não-uso de algum unidade, aqui tentei compilar todas as regras que uso no meu processo de desenvolvimento e que veem funcionando pra mim a bastante tempo. Vale lembrar que esse não é o único jeito de usar as unidades, é apenas, o meu jeito de usar elas.

PS: Eu sei que ficou faltando falar de vh, vw, vmin, vmax e etc, mas essas unidades vou deixar para uma parte dois desse artigo pra manter esse aqui mais conciso no objetivo. Na minha visão também não tem tanto que essas unidades façam que as apresentadas aqui não, logo essas unidades seriam mais um adendo no conteúdo do que realmente algo diferente a ser trazido.

Expo AVD (Android Virtual Device) on Windows Subsystem for Linux (WSL2)

Alecell — Tue, 05 Mar 2024 19:47:10 +0000

This article is the second and final part of two parts tutorial to completely run a Expo project through WSL2.

Prerequisites:
WinRAR/7Zip
Unzip
The previous step of this article

On the previous part of this tutorial we managed to open our Expo app by the QR code adding some network configs on our Windows and WSL. Now we'll move further to make it work with AVD as well!

To be able to run our virtual device we'll need to have a virtual device on our Windows, add the Android SDK on our WSL and install ADB to allow the connection between our Expo app on WSL and the virtual device on Windows.

Installing WSA

There's a Android version of WSL, in this case WSA, Windows Subsystem Android, it works almost like WSL, but its a Android environment.

Testing locally on my computer and on other teammates computers it worked better, some teammates have very old computers and that was a decisive point to opt on WSA. So basically we'll move on with WSA because it is more performant AVD than Android Studio.

To install WSA go to this github repository scroll to the readme and, on the Download section select the stable build for your Windows version and processor architecture.

On the page it opened go all the way to the bottom to the download table and select the second download option, right now, while I'm writing this article, the version is WSA_2311.40000.5.0_x64_Release-Nightly-MindTheGapps-13.0.7z

With that downloaded file move it to the root of your C: of your Windows and extract that file there, after this you should have this folder on your C:

Note: if you're not able to extract that file you'll need to install WinRAR or 7Zip on your Windows

Now open that folder and look for the script Install.ps1 (if your Windows is not configured to see the file extensions it'll be just Install).

Now right click on the Install.ps1 file and click on Run with Power Shell or anything similar to that.

It'll open a Power Shell window with a bunch of other windows and ask some permissions, but no worry, that's expected. Just click on continue buttons, let the windows load its views and move on. When the Power Shell process finishes just press any button to close the window.

After the process finished look for a window called Windows Subsystem Android, it'll open with a title at the top left corner as System. The window is similar to this one

On this window go to Advanced Configuration and turn the Developer Mode on (that menu option could be hide on a hamburger menu at top left corner). It could ask for some admin permissions, just allow them.

If work as expected it'll suggest you that you can run the ADB server on 127.0.0.1:58526. After turn it on you can close all the WSA windows since it runs on background.

After close all the windows you can check if ADB is working checking the Windows Task Manager and check if the WSA is there

Search for Android

Troubleshoot

Running the Install.ps1
If you get a error trying to run the Install.ps1 script try run the Run.bat script instead.

Developer mode not showing the 127.0.0.1:58526
If you can't see the 127.0.0.1:58526 after turn your Developer Mode on, try reinstall WSA with a PRE-RELEASE build instead.

Installing Android SDK on WSL

With your WSA installed now you'll need to install Android SDK on your WSL. Expo needs that to run the app with Android.

I found a awesome tutorial to do that on WSL, but we'll not use everything there and also I needed to update some of the commands so, I just get and update what is needed here.

Now open your WSL, go to the your user root folder and run the following commands individually

sudo apt install openjdk-8-jdk-headless

wget https://dl.google.com/android/repository/commandlinetools-linux-6200805_latest.zip
mkdir -p Android/sdk
unzip commandlinetools-linux-6200805_latest.zip -d Android/sdk

export ANDROID_HOME=$HOME/Android/sdk
export PATH="$ANDROID_HOME/emulator:$ANDROID_HOME/tools:$ANDROID_HOME/tools/bin:$ANDROID_HOME/platform-tools:$PATH"

sdkmanager --sdk_root=${ANDROID_HOME} "tools"

sdkmanager --update
sdkmanager --list
sdkmanager "build-tools;28.0.3" "platform-tools" "platforms;android-28" "tools"
sdkmanager --licenses

Agree to all the agreements and, after all, you'll have a Android folder on your user root

Now with Android SDK installed we Expo will run with Android, otherwise it'll throw a error saying that it didn't found the Android SDK.

Installing ADB

Now we'll need to install ADB (Android Debugging Bridge), this is what will make the connection between our Expo project on WSL and the AVD on Windows with WSA.

To install ADB go to this link, scroll down until you find the markdown and there click on the first platform tools, its the one that has Android Debug Bridge version 1.0.41

It'll download a zip file on your your Windows, move that file to your WSL user root.

For those who don't know, you can find your WSL Linux on the side of your File Explorer. There you can navigate to your user root folder manually in a WYSIWYG way, then paste the file there on your user root folder.

Again on WSL and with the file platform-tools_r34.0.5-linux.zip on your user root folder, unzip this file and go to the extracted folder platform-tools.

On the folder run you'll need to run ./adb connect <WSL IP:WSA PORT> to create the connection between WSL and WSA, but before that lets get that IP and port.

Getting WSL IP
To get the WSL IP, on your WSL terminal run netsh.exe interface ip show address and look for the WSL interfaces. In my case is these two:

In my specific case I need to get the IP Address from "vEthernet (WSL (Hyper-V firewall))", but your interface name may be different than mine, either way just get one of the WSL IP's and and save it to use later.

Getting WSA Port
Go to your WSA, on that same page we turned Developer Mode on, check the message it displays right below it and look for the port

For all the tests I made the port was the same, but I'm showing how to get the port just in case!

Getting back to our WSL on the platform-tools folder with that ADB command we view before, with your WSL IP and the WSA port run ./adb connect <WSL IP:58526>

WSA may ask you to allow the ADB connection, if that happens click on "Always allow from this computer" and "Allow"

Check if your ADB was connected successfully on your WSA running ./adb devices, if it display something like that we're connected!

Running the Project with AVD

Now go again to your project folder and run it with npm run start:wsl then press a to open Android AVD.

It should open two windows from WSA, one with the Expo app and another one with your project running, just like this

And then, congratulations, your Expo project is fully working through WSL!

Troubleshoot

unzip is not defined
If you got a issue saying that unzip command not found or something like that, this is because you don't have unzip installed on your WSL, you just need to install it.

./adb connect
You got a error when try to connect on ADB or nothing simply happens after you run the command, maybe your WSL IP is the wrong one, double check if you typed the IP correctly and also you can try to use another WSL interface IP Address.

That's all folks!

I really hope that this tutorial is as useful to you as it was to me to figure out how to make a Expo project run on WSL! Feel free to ask any questions down below and thank you for reading it!

Expo QR code on Windows Subsystem for Linux (WSL2)

Alecell — Tue, 05 Mar 2024 19:47:02 +0000

Prerequisites:

Windows 11/10
WSL2
NodeJS
Admin Rights
Up to Date Power Shell Version
Dotenv

On one of the Top Secret project on Devhat community my team decided to work with Expo to create our MVP, Expo looks great but soon I figured out that it will make me suffer. ☠️

All my developer environment runs on WSL, Windows Subsistem Linux 2 to be precise, its been more than a year that I work with it, but soon I realize that its not that easy to run Expo with WSL, there's no straight to the point tutorial nor a updated tutorial on internet on how to make it, but I wasn't comfortable to install Node, Git and god knows what else I would need to install on my Windows just because of a single project, so I started a journey to find the golden way to run Expo with WSL.

And thank god, I managed to make it work!

I'll divide this tutorial in two, the first part is to make Expo works with WSL thought the QR code and, the second part, is how to make it work with Android Virtual Device (AVD), but keep in mind that this first step is required if you want to make it work with AVD.

WSL and Expo QR code

First, get this script, available as Gist as well, and move it to your root C: on your Windows, the same place of your Program Files and Users folder, and name it forward_wsl2_ports.ps1.

Its worth to mention that this script is a slightly change of this one, we needed to change it in order to make it work for people that has more than one IP on the wsl hostname -I command. Also if your want to understand what this script actually solves I strongly recommend you to read the article

This script doesn't need any change if you use the default Expo port 8081, but if your Expo run in another port you'll need to update the line 6 of the script adding the desired port, for instance $ports = @(8081,8089);

Opening WSL ports

Now on your Windows, open Power Shell as administrator and before run the command below make sure that your WSL is completely turned off, so close all WSL terminals and editors such as VSCode and then wsl --shutdown.

With WSL turned off you can run the command below:



 powershell.exe -ExecutionPolicy Bypass -f C:\forward_wsl2_ports.ps1

If everything went right you'll see something like that

This command opened the WSL ports for the IP returned on the first step of the command WSL IP 'the ip', in my case it opened just 8081 which is the default Expo port, but if you added more IP's there it will open that other ports too. Then you can press any key and close this Power Shell window.

Configuring the WSL Expo project

Go to your WSL2 and open your Expo project or, if your don't have any, create a new one with npx create-expo-app and follow steps to create the project.

Open the project with your desired editor and lets add a new script on our package.json file, this script will be a specific one to run the Expo project on through your WSL.



"scripts": {
  /* other scripts */
  "start:wsl": "REACT_NATIVE_PACKAGER_HOSTNAME=$(node get_network_local_ip.js) expo start"
}

We'll need to add the get_network_local_ip.js file on the next step, but all that package.json command does is run the JavaScript file to get your local internet IP address and then set it as the hostname for Expo instead use the default one!

The project will work if you replace the $(node get_network_local_ip.js) with your local IP. To know your local IP you can go to, on Windows 11, Start -> Network & Internet -> Properties and then look for IPv4 address.

So, if you're a solo developer its "ok" if your script look like this



"start:wsl": "REACT_NATIVE_PACKAGER_HOSTNAME=19X.XXX.XX.XXX expo start"

But for teams this solution is not a good one, that's why we need the get_network_local_ip.js script!

All that script does is search for the IP of your active internet network, but its worth to mention that this is a updated version of the command showed on Kendall article as well.

Kendall's current solution in package.json to find the internet interface IPv4 is great, but it could lead to issues in scenarios where a different internet interface other than "Ethernet" is used or the IPv4 regex doesn't match 'IP Address'. Modifying package.json for these local-specific configurations would result in unnecessary changes in every Merge Request. To avoid this, I've implemented a separate get_network_local_ip.js script that leverages a .env.local file for local configurations, ensuring a more flexible and MR-friendly approach.

I also updated the regex to look for the IP, but this is a idiom specific issue, if you want you can read the explanation below.

Why did I update the IP regex: I'm a Brazilian and so the original script netsh.exe interface ip show address 'Ethernet' | grep 'IP Address' | sed -r 's/^.*IP Address:\\W*//' don't work for me since my netsh.exe displays the interfaces in pt-br not en-us and that's a huge problem cause here "IP Address" becomes "Endereço IP", a word with a unicode character that's very hard to work with bash scripts and even harder with a script that is somewhere between WSL and Power Shell. All my attempts to search for "Endereço IP" with grep were failures so, instead of replace the "IP Address:" section, on this updated script I look for the actual IP which was way easier. I also believe that this will work on many other idioms around the world, so its a more cross language solution.

Here's the updated command as a JavaScript file, its also available on this gist. Add it to the root of your project with the name get_network_local_ip.js

You'll also need the .env.local file to define your local variables for your internet interface name and your regex to look for your IPv4 label.

Your interface name and IP regex

On your .env.local you need to add the name of your internet interface and the regex to find your IPv4, here's how you can find it:

On Windows 11 go to Start -> Network & Internet -> Properties, look for IPv4 address and save the IP for later.

Then open your WSL terminal and run netsh.exe interface ip show address, it will return a bunch of network interfaces, in my case its a lot of interfaces, but in your case you can have only few, either way we just want one of them, the one that the IP Address is the same as the IP we saved previously saved.

In my case Ethernet 3 is the interface that has the same IP, so I can update that LOCAL_CONNECTION_INTERFACE_NAME environment variable with Ethernet 3.

In your case it could be just Ethernet, Ethernet 2 or even WiFi, all depends of how and which internet port you're using to connect your device on the internet.

Now, on the left of your IP is how your "IP Address" is called on your idiom and with that you'll need to get the most of the word on your idiom, avoiding unicode characters, to search for your IP later with the variable LOCAL_CONNECTION_IPV4_SEARCH. In my case for instance if add the whole "Endereço IP" will throw a error cause 'ç' is a unicode character, but if I search for Endere it finds the right label!

You can test if your chosen word works running



netsh.exe interface ip show address 'YOUR_INTERFACE_NAME' | grep -a 'YOUR_IPV4_SEARCH'

In my case it is



netsh.exe interface ip show address 'Ethernet 3' | grep -a 'Endere'

If it returns something like "YOUR WORD: YOUR IP" it worked! In my case

Now we can add the value to the LOCAL_CONNECTION_IPV4_SEARCH variable, my .env.local is looking like this



LOCAL_CONNECTION_INTERFACE_NAME="Ethernet 3"
LOCAL_CONNECTION_IPV4_SEARCH="Endere"

Now test if your script is working, on the opened Expo project run node get_network_local_ip.js and it should return your IPv4

If it returned your IP everything it setup! Now the only thing you need to do is check if your cellphone is connected to the same internet as your computer and then, on the Expo project, run



npm run start:wsl

You can notice if everything went well if Expo displays your IP as the Metro connection instead of another one

Now you can download the Expo App on your cellphone, scan the QR code and it should work as expected! 🥹

WSL and Expo AVD (Android Virtual Device)

For those who want to use Expo through a virtual device the tutorial continues here on how to run Expo on WSL with a Android Virtual Device!

If this tutorial helped you please leave a comment or a reaction!

Thank you for reading, see ya!

Vue Primeiras Impressões

Alecell — Tue, 20 Feb 2024 15:56:56 +0000

Tem muitos anos que tenho um amor platônico pelo VueJS, ele tinha tudo que eu sempre quis num framework, possuía em seu ecossistema coisas legais tanto do React quanto do Angular ~~(eca)~~, mas eu nunca tinha pegado pra estudar Vue de fato, tampouco trabalhei em lugares que usavam Vue, então sempre que me perguntavam o que eu achava de Vue eu dizia que era maravilhoso apesar de nunca ter usado 😅

Como parte da minha retomada recente aos estudos em TI resolvi fazer algo em Vue de fato e, somado a isso, eu sempre quis fazer um masonry grid, aí, unindo o útil ao agradável, resolvi fazer um projeto de masonry grid em Vue!

O Projeto

A ideia era ser algo simples em termos de layout e lógica no geral, nada super complexo que demoraria pra fazer, tanto que acabei levando coisa de uma semana pra terminar tudo, o importante era:

Fazer um masonry grid
Aprender o básico de Vue

só isso

E devo dizer que estou bem satisfeito com meu foco! 😋

Inicialmente ia fazer algo que batia na API do LOL (League of Legends) pra pegar minhas últimas partidas e listar elas em masonry, mas rapidamente vi que não sabia bem qual dado usar pra ser o dado que definiria a altura do elemento, quando percebi isso mudei pra uma listagem de contribuição em projetos Open Source do Github!

Muito simples, o usuário coloca um projeto no formato user/repo, por exemplo facebook/react e eu listo os contribuidores desse projeto. A variação na altura dos cards do grid seria de acordo com quanto mais a pessoa contribuiu no projeto, mais contribuição, maior o card!

Masonry Grid

Layout

Eu sempre quis fazer uma masonry grid desde quando em 2020 eu trabalhei numa empresa que precisou fazer um, mas acabei não podendo pegar a tarefa pra deixar ela pra um dos meus juniores ;-;

Pra quem não sabe, um masonry grid é basicamente o layout do Pinterest, um grid onde as células que o compõem não possuem um tamanho fixo, assim fica um, bom, um masonry grid 😄

Fazer o masonry grid foi até que simples, inicialmente fiz pegando como referência esse vídeo do Kevin Powell, mas acabei descobrindo que a forma que ele usa nesse vídeo, mesmo sendo um vídeo de 3 anos atrás, ainda não é bem suportada entre os navegadores, na verdade, de acordo com o Can I Use ele só é suportado pelo Safari Technology Preview (nem sei o que é isso)

Decepcionante!

Felizmente eu conhecia outro método de fazer masonry grid que é usando Multi-column Layout!

Pra quem não conhece, o Multi-column Layout é um formato de layout baseado em colunas (quem diria, não é mesmo 🤣), você já viu muito disso, só talvez não conheça pelo nome, por exemplo uma página de jornal (sim, o de papel) onde cada coluna é a continuação do texto

A questão é que a gente não popula as colunas com texto, mas sim com divs!

E pra fazer isso é bem simples já que esse formato de layout não se importa com qual o conteúdo que está lá dentro, ele apenas aplica o conteúdo dentro do que ele tem de espaço disponível, no fim o código que de fato faz o masonry grid acontecer no meu projeto são essas 3 linhas

.container {
  column-count: auto;
  column-gap: var(--masonry-spacing);
  column-width: 210px;
}

column-count diz que eu não qu

ero limitar a quantidade de colunas, vai quantas couberem.

column-gap diz o espaçamento entre uma coluna e outra, no caso eu usei uma variável pra que o espaçamento entre as colunas e o espaçamento entre os itens fosse o mesmo, pra ficar algo mais uniforme mesmo evitando que eu alterasse em um lugar e tivesse que lembrar de alterar no outro lugar também.

column-width é um valor fixo pois é justamente o tamanho que eu quero pra as colunas, como a quantidade de colunas é definida dinamicamente, isso aqui diz "coloca o tanto de colunas de 210px de largura que couber na tela."

O interessante do Multi-column Layout é que ele já organiza a distribuição dos itens automaticamente pra você, então não preciso me preocupar, coisa que pode até soar estranho porque geralmente coisas que crescem pra baixo podem dar trabalho, mas nesse caso não dá, ele só sai andando e maravilha!

Cards

Como era um masonry grid precisava ainda criar os itens do grid, esses fiz de uma forma bem simples, cada item teria um gradiente de baixo pra cima de tamanho fixo, ou seja, se o container fosse pequeno o gradiente não iria da cor X pra a cor Y, ele iria da cor X até o tamanho do container, podendo não chegar na cor Y, ou seja, teria uma referência visual de barra do quanto alguém contribuiu

Coloquei além do fundo um efeitinho de hover, a foto do contribuidor, o nome e a quantidade de commits, inclusive a quantidade de commits é justamente o que define o tamanho do card!

Acabei decidindo que quem teve menos que 250 contribuições iria ficar cinza porque tinha muita gente com pouca contribuição o que acabava fazendo tudo ficar vermelho o que era ruim visualmente. Pra os que contribuíram pouco também coloquei um mínimo pra a altura pra não quebrar quando fosse bem pouquinha contribuição e foi isso, bem simples a parte dos cards.

Vue

O setup inicial do projeto em Vue foi simples pra iniciar a codar logo, fui no Quick Start do site do Vue copiei o comando pnpm create vue@latest e alegria, respondi se queria TypeScript, Vuex e coisas assim, depois tudo configurado e preparado pra codar!

Na parte de codar em Vue pra mim foi um pouco complicado, eu geralmente antes de fazer um projeto, faço diversas configurações pra deixar o ambiente do jeito que eu gosto de codar, por exemplo, eu prefiro separar os arquivos de html, css e script, também costumo criar arquivos separados pra tipagem e coisas assim, mas me desafiei a fazer as coisas da forma como a comunidade em geral prefere fazer!

Assim eu codei com tudo dentro de um arquivo .vue, interfaces e afins colocava tudo dentro da tag script também e alguns outros detalhes que comento a seguir!

Extensão do Vue para VSCode

Achei inicialmente estranho que tinha uma extensão específica para Vue, mas logo entendi que é pra interpretar os arquivos .vue que não eram entendidos pelo VSCode, inclusive nessa descobri que o ChatGPT também não reconhece o formato .vue, todos os code snippets que ele me ofereceu nas perguntas que fiz eram sem cores, tudo branco no preto.

A extensão do Vue parecia funcionar direitinho, mas teve o seguinte caso que não funcionou muito bem, a colorização das coisas ficou bugada, esse código funciona, mas considera que a const é uma função porque ele não entendeu o fechamento do template string

Fora isso não tive outros problemas, mas fico me perguntando se não existem outros problemas nessa parada além do que eu experienciei.

Sintaxe e Estrutura

A sintaxe do Vue (falando de Vue3) é bastante interessante, o modo como gerar loops e condicionais pra renderização de tags é bem semelhante a como o Angular faz

, tudo dentro das tags, o que facilita a leitura das tags em si, sem .map no meio de tags coisa que eu odeio porque pra mim isso prejudica a leitura.

O modo como o Vue funciona foi estranho pra mim de início, não é uma classe, não é uma função, ele apenas é, existe, você usa métodos pra definir interface de props e outros métodos que à primeira vista não parecem se comunicar diretamente, mas se comunicam, parece até um pouco de bruxaria!

Por exemplo, em Vue3 você não precisa exportar nem fazer nada com as variáveis que você declara e recebem valores. Declarou? Já dá pra usar no <template> do componente

<script setup>
  // declaro a propriedade
  const name = 'Alecell'
</script>

<template>
  <!-- uso a propriedade -->
  <span>{{ name }}</span>
</template>

Isso pra mim é MUITA bruxaria, não é pouca não! 🤣

Inclusive se a variável em questão for um state, que nos scripts é usado como state.value, no template não precisamos colocar o .value

<script setup>
  // declaro a propriedade
  const name = 'Alecell'

  const clearName = function() {
    name.value = ''
  }
</script>

<template>
  <!-- uso a propriedade -->
  <span>{{ name }}</span>
  <button @click="clearName">Set name</button>
</template>

No caso acima, perceba que pra alterar o nome no script usamos name.value, mas no template podemos usar apenas name.

Nomeando Componentes e Seus Arquivos

Aqui teve uma coisa que achei bastante chata do Vue que ele me obriga a chamar um componente Card de Card[Alguma coisa] tipo CardComponent, eu não posso chamar um componente de apenas uma palavra, não entendi o motivo disso, tampouco entendi o porquê isso não poderia ser feito nos internos do Vue evitando que tenhamos que fazer isso nós mesmos, achei estranho e não achei nenhuma resposta.

Isso pode até ser necessário, mas o motivo do porquê não é feito automaticamente, é um mistério pra mim

Vue3 API

O tanto que eu fiquei em dúvida de como fazer as coisas no Vue é sacanagem, demorou, sei que não existe certo nessas coisas, mas senhor da glória, o tanto que eu fiquei em dúvida se eu deveria usar defineProps ou defineComponent é sacanagem! Não teve nenhum jeito claro através da doc sobre isso, aliás, esse problema me mostrou outro problema, que era a diferença entre Vue Composition e Vue Options

Vue Composition API VS Vue Options API

Aparentemente o Vue3 veio ano passado e com isso trazendo a Composition API, uma API que não obriga a gente a usar aquele clássico objetão do Vue

<script>
export default {
  data() {
    return { nome: 'Alecell' }
  },
  methods: {
    return {
      changeName: function(newName) {
        this.name = newName
      }
    }
  }
}
</script>

Mas algo mais comum de se ver quando codamos, lembra até um pouco mais o React nesse caso

<script setup>
  // ref é como o useState do React
  let name = ref('Alecell')

  const changeName = function(newName) {
    name.value = newName
  }
</script>

Ambos os códigos fazem a mesma coisa, mas usam API's diferentes do mesmo framework.

É como escrever um componente é _function components e class components em React, ambos fazem a mesma coisa, só muda o como escreve_

No fim das contas o defineComponent é uma coisa do Options API enquanto o defineProps é do Composition API. Na verdade eles sequer são "concorrentes", eles fazem coisas diferentes.

`<script setup>` VS `defineComponent`

O defineComponent é o setup inicial do componente, mas um jeito mais verboso de escrever, hoje é possível usar <script setup> que remove a necessidade de escrever esse pedaço de código. No fim o modo mais simples de escrever é usando o setup option do script então acabei usando esse formato ao invés do `define

Component` por questão de comodidade, mas meio que dá pra fazer a mesma coisa com os dois modos.

Aí no caso, você usa defineProps quando estiver em um <script setup> e usa defineComponent quando não estiver num <script setup>, esse método ainda tem a opção de você expor as props através dele.

Eu segui escrevendo tudo usando a Composition API por ser o método mais moderno, ainda no futuro pretendo fazer algo usando a Options API.

Criando um composable

Devo dizer que escrever essa seção faz eu me sentir meio burro, mas faz parte, eu apanhei horrores pra escrever meu primeiro Composable, vale dizer aqui que um composable é basicamente um hook, sério, usa a mesma lógica que vai ser sucesso.

Meu projeto precisava bater em uma API e queria criar um composable que batia na API do github, dava um shuffle dos dados e aí retornava os dados pra o componente.

aqui acabou

Mano o tanto que eu sofri pra fazer isso é sacanagem, mas isso aconteceu porque eu fui, como disse antes, burro!

Primeiro eu tentei dar um await no composable o que, não surpreendentemente, não funcionou, um amigo que conhece Vue disse que o que eu fiz funciona no Vuxt, mas não no Vue normal, mas eu achei um tutorial na internet que poderia salvar minha vida: https://www.vuemastery.com/blog/coding-better-composables-5-of-5/

Poxa, eu vi isso, achei bizarro de funcionar, mas o cara não ia fazer um artigo trolando né? Bom, SE EU TIVESSE LIDO ao invés de ficar tentando copiar os snippets teria sido MUITO BOM, mas eu não li, então eu fiquei coisa de uns 3 dias tentando entender porque quando eu chamava o composable no corpo do componente funcionava, mas quando eu colocava na chamada do método de request ele não ia nem ferrando, bom, isso é porque esse método é apenas pra o setup, não é algo pra eventos ou coisas mais dinâmicas.

Foram dias, até que fiz uma pergunta decente pro GPT e ele mostrou como fazer o composable que, pasmem, era igualzinho um hook do React 😶

Bastava eu retornar os estados e o método de requisição pra o componente que ia funcionar, nada de mais, simples, mas eu fiquei viajando nas minhas próprias ideias de que uma request assíncrona sem await seria resolvida em tempo de execução só porque Deus quer.

Finalmente com uma versão decente do composable eu finalmente tinha ele funcionando conforme eu esperava, já tava tudo praticamente pronto, só faltava isso e o input de texto.

Fiz rapidinho um input de texto e um botão e BOOM, tava funcionando certinho como eu queria 🥹

Considerações finais

Achei bem interessante essa experiência de codar em Vue, quero em breve poder criar algo mais robusto com esse framework que, depois de codar nele, eu ainda amo!

Uma coisa que gostei muito nele é que, mesmo ele tendo mais boilerplate, é muito mais simples de fazer as coisas no Vue e você consegue fazer mais codando menos, isso é bem interessante e algo que eu já imaginava com relação a esse framework maravilhoso!

Tudo em termos de setup foi zero estresse, muito decorrente do boilerplate que escolhi, mas também porque o Vue é um framework simples, algo que ele pega do React de forma incrível, permitindo que reutilizemos esse conhecimento, mas em outro framework!

Pra quem quiser conferir o projeto ele ta aqui e o código ta aqui

Valeu pra quem leu e até a próxima!

As Coisas Não Acontecem do Nada

Alecell — Mon, 23 May 2022 20:49:28 +0000

Era 2009, eu tinha 13 anos, tava na época de férias na escola e, apesar de não fazer a mais puta ideia de como, eu e meu irmão começamos a desenvolver um jogo de RPG em Byond.

Nós iniciamos o projeto num super hype, compramos um livro na Saraiva perto de casa chamado A Arte De Game Design do Jesse Schell, começamos a ler pra aprender Game Design enquanto fazíamos o jogo. O objetivo era fazer o mais rápido possível nosso RPG do Naruto, meu irmão na arte com pixelart e eu na programação ~~a pesar de que ele me ajudava na programação também porque eu não queria ler tutorial~~.

Já tínhamos feito a Vila da Folha, um modelo de personagem usável, definido como atacar, o calculo de ataque e dano deduzido da defesa, tudo em uma semana! Íamos conseguir fazer esse jogo!

Porém...

Na semana seguinte meu irmão já estava cansado, não queria mais fazer a arte nem nada do jogo, queria ficar só jogando Grand Chase, eu percebi isso e fui desanimando também, é chato ficar insistindo pras pessoas irem pra frente com projetos colaborativos, além do que tínhamos 13 anos, foi bem fácil me desfocar do que eu realmente queria, que era fazer o jogo.

Infelizmente aos poucos fomos abandonando o projeto, cada vez mais largado até o momento que nem lembrávamos de fazer nada, o projeto foi dropado com vários assets, mecânicas e etc feitos, mas o maior recurso que era nosso foco havia acabado e sem isso nunca iria haver projeto.

Lembro de nessa época, meses depois de o projeto ter sido largado, por um lapso qualquer, lembrei do jogo e me senti mal por ter abandonado, nesse momento eu disse pra mim mesmo

Quero muito que quando eu envelhecer, com uns 17 anos, saiba fazer jogos, assim como alguns adolescentes são, quero ser um deles um dia.

A Realidade

Vez ou outra eu abria o Byond pra tentar fazer alguma coisa simples, mas parava na metade e não olhava mais pra plataforma por meses. Foi assim por bastante tempo, mas o tempo passou.

Dias. Semanas. Meses. Anos.

Durante todo esse tempo eu mal estudei Byond, mal aprendi gamedesign, parei de ler o livro do Jesse Schell na página 60, nem tinha mais o Byond instalado no PC.

Conclusão: Cheguei nos 17 anos sem saber fazer jogos como havia desejado

A Reação

Me achei burro, perdedor, idiota, não era um adolescente bom com as meninas, não era bom em jogos, não era bom na escola e nem o meu maior objetivo que era fazer jogos foi atingido, com isso, peguei toda a minha maturidade de adolescente e fiquei na cama deitado por meses sentindo pena de mim mesmo sem fazer nada além de jogar Grand Chase no notebook me auto-culpando pelo que eu não fiz e como eu fracassei na vida.

A Lição

Demorou muitos anos, mas hoje eu percebo a lição valiosíssima que aprendi com esse fracasso pessoal e é por isso que eu to aqui compartilhando essa história com você.

Talvez a lição seja obvia, cristalina como água, mas por mais que ela seja é válido dizer ela e algumas coisas sobre ela

As coisas só acontecem pra quem luta por elas

~~mesmo que tenha as que ganharam tudo de bandeja, se você se comparar com essas pessoas você só vai se frustrar e vai continuar sem atingir seus objetivos~~

Nos 4 anos, dos 13 aos 17 eu nunca realmente me dediquei a aprender a fazer jogos, nunca foquei pra aprender, não tentei entrar no mundo, não estudei, não pratiquei. Como eu iria me tornar um desenvolvedor de jogos sem ir atrás de ser um?

~~Eu achava que ia acordar um belo dia com todo o conhecimento na minha cabeça?~~

Todo mundo sabe que se você não pratica algo você nunca vai ser bom naquilo, dependendo o que é você pode sequer saber como iniciar em alguma coisa se você não ir minimamente atrás pra entender como fazer, mas por algum motivo temos o hábito de traçar metas sem fazer por onde.

Você colhe o que planta

Eu e você temos metas, mas me fala, sinceramente, o que você está fazendo hoje pra atingir suas metas? Você ta caminhando em direção do seu objetivo ou ta esperando ele cair do céu no seu colo?

Independente de qual objetivo seja, se aposentar mais cedo, arrumar um trampo melhor, ganhar mais, comprar uma casa, viajar pra fora, aprender violão, ficar bom no LOL e etc. Você ta mesmo indo atras disso ou você ta se enganando dizendo que lá na frente vai tudo dar certo?

Um Exercício

Como você se imagina daqui 10 anos? O que você tem? Onde mora? Casou? Tem filhos? Trabalha com o que? Qual sua área? Seja bastante específico nas respostas, nada de "ganhando bem", especifique o salário: "ganhando 100k mês".

Agora, de novo, você está de fato fazendo algo que te aproxime desses objetivos ou está se distraindo?

Vá Atras

Hoje, quase exatos 10 anos de um dos meus maiores fracassos, eu consigo ver que errei muito na adolescência, não usei meu tempo como deveria pra atingir meus objetivos e isso me custou que até hoje não sei fazer jogos.

Mas não deixe que isso aconteça com você também, vá atras dos seus objetivos hoje, faça um pouco por dia, mas faça, vá atras, mesmo que a passos lentos.

Andando você demora, parado você não chega

Sei que você provavelmente também tem seus arrependimentos da adolescência, mas não deixe eles se repetirem, se você pode fazer algo hoje pra que atinja o seu amanha, faça, não espere, vá atras da sua visão do futuro!

Depois de quase 10 anos eu estou aqui tentando novamente fazer jogos, brigando com minha falta de foco e com a falta de tempo da vida de adulto, mas indo atras, a passos lentos na direção de um objetivo.

Faça isso também, sei que consegue!

Se hoje fosse 10 anos no futuro, você estaria feliz com seus resultados?

As coisas não vão acontecer sozinhas, faça hoje pra colher amanha.

E, do fundo do meu coração, boa sorte com seus objetivos! Espero que você os atinja, que faça um pouco por dia, mas faça. Não espere chegar lá por mágica pois isso não vai acontecer. Troque o seu "sonho" pra "objetivo" e faça acontecer.

Tenha medo de atingir o prazo, mas não a meta

Boa sorte!

Iae, dahora? To fazendo lives de segunda a sexta as 19h, segue a gente na twitch!

https://linktr.ee/alecell

Diga o que a função faz

Alecell — Mon, 18 Apr 2022 14:44:07 +0000

Por algum motivo atualmente é convenção nomear qualquer método com o prefixo handle quando ele é chamado em um evento, tipo chamar de handleClick um método chamado num evento de click, handleChange quando lidamos com o evento change e assim por diante.

Mas advinha?! Isso é o crime do crime!

O nomes dos nossos métodos ficam sem significado, o nome não diz nada sobre a função do método, só é dito quando ele é disparado, não o que ele de fato faz!

Suponhamos que temos que trabalhar em uma loja de roupas e precisamos dar manutenção neste componente, o que acontece quando clico nos botões?

function MyComponent() {

  /.../

  return (
    <>
      <button name="short" onClick={handleClick}> Short </button>
      <button name="medium" onClick={handleClick}> Medium </button>
      <button name="big" onClick={handleClick}> Big </button>
      <button name="bigger" onClick={handleClick}> Bigger </button>
    </>
  )
}

Teria que ler a implementação do handleClick pra poder responder essa pergunta, apenas com a informação atual o máximo que podemos fazer é supor de forma bem branda o que acontece ao clicar no botão, mas não temos quase nenhuma certeza!

Mas fazendo apenas ajustando o nome da função, fica claro o que acontece ao clicar no botão

function MyComponent() {

  /.../

  return (
    <>
      <button name="short" onClick={applySearchFilter}> Short </button>
      <button name="medium" onClick={applySearchFilter}> Medium </button>
      <button name="big" onClick={applySearchFilter}> Big </button>
      <button name="bigger" onClick={applySearchFilter}> Bigger </button>
    </>
  )
}

Com uma simples alteração no nome da função e apenas lendo o return do componente podemos saber o que está acontecendo, sem precisar ir na função, entender a lógica lá pra poder saber o que acontece. O código está claro quanto ao que ele faz, é explícito como deve ser.

📝 Note

Existe apenas um caso que faz algum sentido chamar a função handler de handle, e é quando, em casos muito raros, a função precisa fazer mais de uma coisa. Nesse caso chamar de handle é o meio genérico de chamar o método e, dentro dele, chamamos os 2 ou mais métodos necessários.

Por exemplo, suponhamos que o pessoal de produto ~~acordou, caiu da cama, bateu a cabeça no chão e~~ quer que quando o usuário mudar o filtro de busca o site mude de cor completamente, ai faz sentido usar handleClick

function MyComponent() {
  function handleClick(e) {
    applySearchFilter(e);
    changeSiteColor(e);
  }

  return (
    <>
      <button name="short" onClick={handleClick}> Short </button>
      <button name="medium" onClick={handleClick}> Medium </button>
      <button name="big" onClick={handleClick}> Big </button>
      <button name="bigger" onClick={handleClick}> Bigger </button>
    </>
  )
}

E se nomearem a função de forma errada?

Esse tipo de coisa precisa ser percebida e corrigida o quanto antes, se essa má nomeação te levou ao erro, você tem o dever de ajustar o nome da função para prevenir que futuros devs sejam induzidos ao erro também!

~~É legal também tirar print do git blame e colocar no grupo da empresa~~

Reutilização legível

Usando esse método de nomenclatura ainda por cima ganhamos a semântica de poder reutilizar a função usada no evento mantendo a leitura do código limpa!

Suponhamos que nos exemplos anteriores, por algum motivo, outro método precisa chamar a função applySearchFilter

function MyComponent() {
  function applySearchFilter(e) { /.../ }

  function updateSearchText(e) {
      applySearchFilter(e);
  }

  return (
    <>
      /.../
      <button name="short" onClick={applySearchFilter}> Short </button>
      <button name="medium" onClick={applySearchFilter}> Medium </button>
      <button name="big" onClick={applySearchFilter}> Big </button>
      <button name="bigger" onClick={applySearchFilter}> Bigger </button>
    </>
  )
}

Dessa forma podemos ler de forma falada dizendo que "após atualizar o texto de busca o filtro é aplicado" ao invés de dizer "após atualizar o texto de busca lidamos com o click"

Tem uma fala de Grady Booch que eu gosto muito

Um código limpo é simples e direto. Ele é tão bem legível como uma prosa bem escrita.

💡 Tips

Pra nomear uma função sempre se pergunte: "O que essa função faz?"

📚 References

Vozes da minha cabeça
Clean Code - Uncle Bob

Deixando de procrastinar e sendo mais produtivo

Alecell — Tue, 12 Apr 2022 17:21:35 +0000

Muitos desenvolvedores, assim como eu, tem uma dificuldade gigante de focar no que de fato precisa ser focado, fazer o que precisa ser feito, estudar, atualizar currículo e etc.

Como sempre fiz parte dessa galera, vivi buscando como resolver esse problema e acabei aprendendo muito sobre o assunto com livros, vídeos e etc. Hoje sinto que consegui, resolver o problema, então se você sente tanto quanto eu a dor de não conseguir se organizar, cola comigo que vou ensinar um jeito que ando fazendo pra organizar meus afazeres que ta dando super certo!

🔥🔥 Google Agenda + Google Tarefas 🔥🔥

Já tem um tempo que o Google lançou o Google Tarefas, mas só recentemente veio uma feature no Google Calendar que permite a sincronização dos 2 serviços criando tarefas com deadline listadas no seu calendário e com todas as features que um evento tem.

Mas antes, quais são as features que esses serviços juntos tem que são foda bagarai na organização?

Receber notificação da tarefa em qualquer dispositivo
Definição de tarefas a periódicas com periodicidades customizadas
Descrição detalhada da tarefa
Mover a tarefa automaticamente para o dia seguinte caso ela não tenha sido concluída
Visualização macro da sua agenda quando precisar se reorganizar

Isso junto com algumas técnicas de produtividade que conheço estão fazendo tanta diferença aqui que acredito de verdade que vão te ajudar também!

📝 Criando uma Tarefa

Antes de criar as tarefas temos que ter um lugar para coloca-las, então faça o seguinte:

Acesse seu calendário e, na barra lateral direita, clique em Tarefas, isso vai abrir a aba de tarefas:

Na aba de Tarefas crie uma nova lista de tarefas e de a ela um nome:

Agora com sua lista criada podemos começar a adicionar novas tarefas, mas não diretamente na lista de tarefas, mas sim no seu calendário!

Pense primeiro em alguma coisa que você deveria fazer todo dia, algo bem simples, rápido, ou pode pensar em algo que geralmente demora, mas que se você fizer um pouco por dia já é o suficiente, pode ser ler uma página de um livro por dia, atualizar uma informação do currículo e etc.

Mas lembra-se de que seus objetivos devem ser claros, se você quer ler um livro coloque "ler uma página de um livro" ou "ler um capítulo", mas nunca "ler o livro", esse objetivo é muito aberto, indefinido, nesse caso, uma palavra poderia ser "ler o livro"? Seja objetivo, metas visíveis e alcançáveis.

Neste exemplo, quero tentar melhorar em Javascript, então vou fazer um exercício do HackerRank por dia.

Para isso clique no dia que você vai começar a fazer a tarefa, quando a janela abrir clique em "Tarefa" e dê um nome:

Agora clique em Adicionar horário e coloque quando você vai realizar essa tarefa, lembrando que é importante que tenha um horário determinado pois rotinas ajudam na construção de hábitos! Vou colocar as 10:00 AM.

Pensando na periodicidade agora, como queremos melhorar em Javascript o ideal seja que façamos 1 exercício por dia, então clique em Não se repete e selecione Todos os dias:

"Po, mas e o descanso do guerreiro?"

Ai você clica em Personalizar, a última opção, depois que a modal aparecer, na aba Repetir, desmarca os dias de folga e clica em Concluir:

Na descrição da sua nota coloque elementos que podem facilitar que você faça o exercício, nesse caso talvez seja colocar o link direto pra página de exercícios do HackerRank que você vai fazer.

Na ultima opção selecione sua lista de tarefas (caso já não esteja selecionada)

Pronto! Sua tarefa foi criada, adicionada ao calendário com a periodicidade escolhida!

👨‍🏭 👩‍🏭 Usando as features 👩‍🏭👨‍🏭

Concluindo tarefas

Quando concluir a tarefa do dia você pode ir no seu calendário, selecionar a tarefa e marcar ela como concluída:

Quando concluir a tarefa ela também será concluída na lista de tarefas e a agenda, quando o dia virar, vai criar automaticamente a tarefa do próximo dia!

Tarefa não concluída

É comum que por um motivo ou outro deixamos de fazer uma tarefa, mas felizmente o Google Agenda nos lembra que deixamos a tarefa e move ela para o outro dia quando não concluímos a tarefa no dia esperado.

Então se eu tinha 3 tarefas para serem concluídas em um dia, mas por algum motivo não faço, elas estackam para o dia seguinte como tarefas pendentes, mas se mantem ativas no dia que eu perdi também, como um double check:

Se clicarmos em tarefas pendentes:

Vale dizer que nessa listagem podemos concluir as tarefas normalmente.

Notificações

Para usar as notificações da agenda em todos os dispositivos:

Atenção: Como as tarefas não são eventos, na maioria dos aplicativos de calendários as tarefas não aparecem 😕

TODO list

Como isso fica integrado com o Google Tarefas, se preferir visualizar suas tarefas como uma TODO list ao invés de acompanhar elas pelo calendário, basta abrir o Google Tarefas no Gmail ou algum outro serviço google (não são todos que possuem a barra lateral de tarefas) direto pelo app do Google Tarefas.

Gostou da dica? Me segue para mais, toda segunda to postando uma diquinha maneira!

https://linktr.ee/alecell

TIL: October 2020

Alecell — Thu, 08 Oct 2020 22:52:44 +0000

Day 05 [Typescript/Redux] - How to type an dispatched action that returns a value with redux-thunk, react-hooks and typescript

To get access to the returned value of a ThunkAction inside dispatch that don't pop any type errors you should declare the the type when initiate the dispatch.

const dispatch = useDispatch<MyDispatchType>();

The generics define the retuned value of the dispatch, but the generic type should be of type ThunkDispatch.

ThunkDispatch receive 3 arguments, but to our case we just need to care about the first one, which is relative to the return type of the dispatch.

type MyDispatchType = ThunkDispatch<MyType, any, AnyAction>

Obs: ThunkDispatch is exported from redux-thunk and AnyAction is exported from redux.

With this, when you use the dispatch function it will provide autocomplete and a type-safe return based on MyType.

Full example:

interface MyType {
  foo: number;
  bar: string;
  baz: string;
}

type MyDispatchType = ThunkDispatch<MyType, any, AnyAction>;

const myAction = (status: boolean) => (dispatch): MyType => {
  dispatch({ type: "foo", payload: { status } });
  return {
    foo: 23,
    bar: 'naruto',
    baz: 'hokage',
  }
}

function MyComponent() {
  const dispatch = useDispatch<MyDispatchType>();

  const handleClick = () => {
    //  No errors
    const { foo, bar, baz } = dispatch(myAction(true));
  }

  return (
    <button onClick={handleClick}>CLICK ME</button>
  )
}

Day 07 [Javascript] - How to return a value that is accessible only inside/after an event

One of the gold questions of the Javascript past is now solved surprisingly easy, thanks to the Promises.

So, imagine a scenario that your user add an audio file to an input and, before you upload the audio, for some reason, you need to get that audio duration. Before Promises it was impossible to achieve without bad practices or code smells since you only can get an audio duration after it was loaded, but with promises we can keep our code clean and do the trick.

As I found here promises could be used to return the value inside an event (which is pretty obvious BTW) so, on the case that we need to return the audio duration of a File when onloadedmetadata event is fired, we can do this:

  static async getAudioFileDuration(file: File): Promise<number> {
    return new Promise((resolve, reject) => {
      const objectUrl = URL.createObjectURL(file);
      const audio = new Audio(objectUrl);

      audio.onloadedmetadata = (e: any) => {
        resolve(audio.duration);
      };
    });
  }

The best of this approach is to avoid many work around on the web like have a variable in the upper scopes of the methods, send a callback or do what you wanted to be outside of the event inside of it. The Promise method keep the best practices, its modular, reusable and clean to read.

Day 12 [CSS] - How to `justify-self` with `flex`

(Okay, I's embarrassing I did no know this before, BUT...)

I tried to answer this StackOverFlow question and realize (besides answering the question wrongly) I didn't know how to answer, what makes me think "Hey, I don't know the answer", and start to search.

The point is that for needing purposes, the property justify-self don't work on flex items because we can just use the margin proprty to reach the same behavior.

So, when need justify-self: flex-end, just replace this with margin-left: auto.

I create a pen to exemplify this.

Day 15 [Typescript] - Why we have to reference dynamic types with the name of the type, and not only the type?

Delving on the web these days I figure out a answer that I don't get that I have already: Why we have to write dynamic keys like this:

interface Foo {
  [key: string]: string;
}

instead of:

interface Bar {
  [string]: string;
}

For too long I thought it was a typescript limitation, but I was wrong (maybe not btw), this exists for reading purposes, since name the key with something more clear is way more readable than just key.

interface Foo {
  [itemName: string]: string;
}

Now I'll stop to name the dynamic keys with just key and give them an appropriate name, and you should do it too. (if you don't do already of course)

Day 20 [Typescript] - Get the type of deeply nested dynamic key types

Let's suppose we have a collection of objects like this:

interface Item {
  name: string;
  price: number;
}

interface ItemCollection {
  [itemId: string]: Item;
}

So we have a collection of Items that each one of the collection is its itemId.

Now, again, for some reason we need to get the type of Item by the collection, without reference the Item directly.

How can we get access to the type of each item of ItemCollection, to, let's say, create an type alias?

type TypeAlias = ItemCollection[string];

And that's it, is really easy to reference the type nested, you just need to use the type of the key as you would use the type reference directly, but not using the name, but the type itself.

Day 30 [Typescript/React] - Correctly type SVG to use as components

For too long I wonder how to properly type SVG images when use ReactSvg or something like this, saddly I don't save the reference, but I found this:

  React.FC<React.SVGProps<SVGSVGElement>>;

So, when use it on the declarations, make something like this:

declare module '*.svg' {
  const content: React.FC<React.SVGProps<SVGSVGElement>>;
  export = content;
}

Forem: Alecell

Unidades CSS — Um Guia Completo

Unidades abordadas

Absolutas

px

cm, mm, in

pt e pc

Relativas

em e rem

em

rem

ex e ch

%

Conclusão

Expo AVD (Android Virtual Device) on Windows Subsystem for Linux (WSL2)

Installing WSA

Troubleshoot

Installing Android SDK on WSL

Installing ADB

Running the Project with AVD

Troubleshoot

Expo QR code on Windows Subsystem for Linux (WSL2)

WSL and Expo QR code

Opening WSL ports

Configuring the WSL Expo project

Your interface name and IP regex

WSL and Expo AVD (Android Virtual Device)

Vue Primeiras Impressões

O Projeto

Masonry Grid

Layout

Cards

Vue

Extensão do Vue para VSCode

Sintaxe e Estrutura

Nomeando Componentes e Seus Arquivos

Vue3 API

Vue Composition API VS Vue Options API

<script setup> VS defineComponent

Criando um composable

Considerações finais

As Coisas Não Acontecem do Nada

A Realidade

A Reação

A Lição

Um Exercício

Vá Atras

Diga o que a função faz

📝 Note

E se nomearem a função de forma errada?

Reutilização legível

💡 Tips

📚 References

Deixando de procrastinar e sendo mais produtivo

🔥🔥 Google Agenda + Google Tarefas 🔥🔥

📝 Criando uma Tarefa

👨‍🏭 👩‍🏭 Usando as features 👩‍🏭👨‍🏭

Concluindo tarefas

Tarefa não concluída

Notificações

TODO list

TIL: October 2020

Day 05 [Typescript/Redux] - How to type an dispatched action that returns a value with redux-thunk, react-hooks and typescript

Day 07 [Javascript] - How to return a value that is accessible only inside/after an event

Day 12 [CSS] - How to justify-self with flex

Day 15 [Typescript] - Why we have to reference dynamic types with the name of the type, and not only the type?

Day 20 [Typescript] - Get the type of deeply nested dynamic key types

Day 30 [Typescript/React] - Correctly type SVG to use as components

`<script setup>` VS `defineComponent`

Day 12 [CSS] - How to `justify-self` with `flex`