DEV Community: Leandro Cavalcante

Setting Visual Studio Code as your git merge and diff tool

Leandro Cavalcante — Tue, 06 Sep 2022 13:00:48 +0000

Paste the following lines in your ~/.gitconfig file:

# This is Git's per-user configuration file.
[core]
    editor = code --wait
[diff]
    tool = default-difftool
[difftool "default-difftool"]
    cmd = code --wait --diff $LOCAL $REMOTE
[merge]
    tool = default-mergetool
[mergetool "default-mergetool"]
    cmd = code --wait $MERGED

Done! Next time you do a git commit or whatever operation that needs a text editor, Visual Studio Code will be opened as your default editor.

Cleaning up all local stale git branches

Leandro Cavalcante — Wed, 13 Jul 2022 21:15:30 +0000

Sometimes, after some great releases (e some broken ones), it's hard to maintain our repo tidy.

To help you dealing with the messy you made creating branches e pushing them away, I found a short command line that remove all local branches that were already merged.

Open your terminal and paste the commando below:

git fetch --prune | git branch -r | awk '{print $1}' | egrep -v -f /dev/fd/0 <(git branch -vv | grep origin) | awk '{print $1}' | xargs git branch -D

It's also available as a Github Gist right here: https://gist.github.com/leandrocrs/428c956144b2b22738765d77e087a188.

Easily Change Windows CMD,WSL Transparency

Leandro Cavalcante — Fri, 23 Feb 2018 21:11:00 +0000

Smart tip: when using Windows 10 command-line tools such as WSL, Ubuntu, Powershell or even CMD, you can:

CTRL + Shift + Scroll Up/Down = change window transparency level

Speeding up WSL I/O up than 5x fast + saving a lot of battery life & CPU usage

Leandro Cavalcante — Sat, 03 Feb 2018 22:24:42 +0000

Ubuntu running inside WSL trying to update some packages behind Windows Real-time protection bad guy

While being helpful detecting some common Windows malwares, in GNU/Linux side it’s so inefficient and actually unhelpful.

Every time you try to access/read/write some file/folder, Windows Defender intercept WSL requisition for antivirus scanning, slowing down things until you hate everything in WSL!

So, to do so, first get the UbuntuOnLinux (or your distro of choice) installation path going to %USERPROFILE%\AppData\Local\Packages and lookup for something like CanonicalGroupLimited.UbuntuonWindows_79rhkp1fndgsc .

Copy the entire path from Explorer.exe address bar, then go to Settings > Update & Security > Windows Defender > Open Windows Defender Secutiry Central > Protection Against Viruses & Threats > Advanced Config… > Exclusions > Add or Remove > Add > Folder and finally: paste the previous copied path.

Warning: High security sometimes means Low performance

Windows Defender Real-time slow down… protection

The tip above may speedup things a little bit, but not so. There is one more thing bringing your performance down: Window Defender real-time protection.

As noticed by David Tansey in this WSL issue, real-time protection have a HUGE impact in developer tools like Visual Studio build tool and tools like Kubernetes and etc., including WSL.

We will disable it, but be aware: you will may be more vulnerable for some common attacks through malicious script execution.

So, let’s disable:

Use Group Policy (gpedit.msc) to disable real-time protection

Use Group Policy to disable real-time protection:

On your Group Policy management machine, open the Group Policy Management Console, right-click the Group Policy Object you want to configure and click Edit.
In the Group Policy Management Editor go to Computer configuration.
Click Policies then Administrative templates.
Expand the tree to Windows components > Windows Defender Antivirus > Real-time protection.
Double-click the Turn off real-time protection setting and set the option to Enabled. Click OK.

I’ve only tested superficially, but I can ensure a great performance speed up.

Disclaimer: I have plans to improve my English skill, but my willing to help is bigger than that.

References:

Configure always-on real-time protection in Windows Defender AV | Microsoft Docs — https://docs.microsoft.com/en-us/windows/threat-protection/windows-defender-antivirus/configure-real-time-protection-windows-defender-antivirus

Windows command-line tip: Easily Change Window Transparency

Leandro Cavalcante — Sun, 22 Oct 2017 02:27:19 +0000

Smart tip: when using Windows 10 command-line tools such as WSL, Ubuntu, Powershell or even CMD, you can:

CTRL + Shift + Scroll Up/Down = change window transparency level

Window alternating transparency level through a Windows shortcut

CSS: do ‘Odeio essa m**’ a ‘pode deixar comigo!’

Leandro Cavalcante — Mon, 06 Feb 2017 02:24:46 +0000

traduzido e adaptado do excelente post do Ignacio Piantanida no blog do 10pines, de 24 de janeiro de 2017

Me lembro dos meus primeiros dias como desenvolvedor web, quando peguei uma tarefa que parecia tão simples: “nós precisamos adicionar um pequeno botão vermelho abaixo desse formulário. Ele precisa estar alinhado à direita. Ah! E verticalmente centralizado também”. Eu estava condenado. Algumas horas gastas quebrando o layout, consertando-o e quebrando-o novamente a cada mudança no CSS que eu fazia… todos nós já passamos por isso antes.

Felizmente, depois de ler esse post você aprenderá algumas dicas para ajuda-lo(a) no seu caminho para dominar CSS plenamente.

Bora lá!

0. Esqueça os navegadores antigos

Não chamaria isso exatamente de dica, ainda mais a 0, mas é algo que sempre levo em consideração ao iniciar um novo projeto.

Tente evitar ter que dar suporte a navegadores antigos. Dê uma olhada nas estatísticas de uso, e balanceie a relação maior alcance de usuários x custos extra no desenvolvimento. Dar suporte a coisas mais velhas que o IE 10 dá muita dor de cabeça.

É claro, nem sempre isso será possível. Eu conheço uma empresa que obriga todos os seus colaboradores que não trabalham diretamente com T.I. a usa o IE 7, então todas as ferramentas internas devem funcionar no dito-cujo. Se este é o seu caso, eu realmente sinto muito por você. Não poderei ajuda-lo(a).

Se você já possui um site e as estatísticas dele, observe como as versões e navegadores se comportam dentro do contexto do negócio. Por exemplo, em um dos projetos em que trabalhei, a porcentagem de usuários de IE era baixa em termos de visitas. Mas quando você olhava para dados como os de conversão de vendas por navegador, os usuários de IE tinham uma taxa de conversão muito maior, o que representava uma boa porcentagem de vendas.

Dê suporte àquilo que vale a pena.

1. Entenda as regras de precedência

Eu não posso deixar de frisar isso. Se você não entende porque uma certa propriedade está sendo aplicada sobre outra, estará sempre em guerra com frameworks, bibliotecas e até mesmo com o monte de CSS dos seus próprios projetos.

Digamos que você tem os seguintes códigos HTML e CSS:

<div id="container" class="my-container">
  I want my <span class="text red">color</span>
</div>

<style>
#container span {
  color: blue;
}

.my-container .text.red {
  color: red;
}
</style>

Qual você acha que será a cor do texto?

Se sua resposta foi “eu não ligo, simplesmente vou colocar um !important no que eu quero”, bem, lhe desejo uma vida regada a muito IE 6.

Para o resto das pessoas que ligam, a resposta é azul. Não interessa quantos seletores você adicionar na segunda regra, você nunca fará com que o texto fique vermelho.

A chave é que os diferentes tipos de seletores ( #id , .class , element or inline ) possuem diferentes precedências. Cada seletor possui um ‘peso’, e o maior peso ganha.

Uma boa fonte de estudo e compreensão sobre o assunto é o curtíssimo post do Steven Bradley, (Understanding Style Precedence in CSS: Specificity, Inheritance, and the Cascade).

2. Utilize um pré-processador

Hoje em dia é difícil achar uma webapp que use só o CSS puro sem o uso de um pré-processador, mas se você está iniciando um novo projeto, adicione um pré-processador o quanto antes. Mixins, variáveis, herança e import ajudarão a manter seus estilos modulares e sem repetições (princípio DRY) do começo ao fim.

Eu sempre escolho Sass, que atualmente é o pré-processador CSS mais utilizado, seguido pelo Less.

3. Abrace o Flexbox para posicionamento

Com flexbox você pode construir um layout responsivo consistente, com apenas um pequeno conjunto de regras. Depois de usa-lo pela primeira vez, você nunca mais irá querer usar um float ou o grid system do bootstrap novamente.

Eu adoro esse joguinho, o flexboxfroggy.com, para aprender o básico.

Você deverá tomar muito cuidado com a compatibilidade de cada navegador e seus prefixos. O que nos leva à próxima dica…

4. Não escreva os prefixos de navegador manualmente

Adicionar os prefixos de cada navegador implica em duplicação, o que é tedioso a leva a erros.

Autoprefixer é uma ferramenta que lhe ajudará a lidar com as pequenas diferenças entre os navegadores. Baseado no CanIUse, você define quais versões de navegador você deseja dar suporte e o autoprefixer procurará nos seus arquivos CSS e adicionará as propriedades necessárias para cada navegador. Esqueça toda essa porcaria de -moz ou -webkit.

Independente de qual stack você utilize durante o desenvolvimento, webpack, gulp ou grunt, é muito simples integra-lo.

Se você não quer mudar nada no seu pipeline, ao menos utilize alguma coisa tipo o Bourbon, uma biblioteca de mixins Sass que adicionam todos os prefixos para você.

5. Não utilize qualquer nome para classes, utilize uma metodologia

Conforme o projeto cresce, o número e grau de complexidade das suas páginas de estilo podem se tornar um problema. Se não for cuidadoso(a), adicionar uma simples propriedade a uma classe pode ter um gigantesco impacto em outras partes do site que você nem sequer imagina.

Usar uma metodologia específica irá prevenir esse tipo de erro. Ao mesmo tempo, definirá um padrão para sua base de código, garantindo consistência entre tantos estilos de diferentes desenvolvedores.

Há diversas técnicas para lidar com isso como BEM, OOCSS, SMACSS, etc… a única com a qual essou bem familiarizado é a BEM.

Com BEM (Box, Element, Modifier), você define classes do tipo .bloco__elemento — modificador. Por exemplo, se você tem um cabeçalho com o logo da empresa e um botão de login, você terá classes como .cabecalho__logo-empresa , .cabecalho__btn-logar ou .cabecalho__btn-logar — oculto. Assim, toda vez que olhar para um seletor numa folha de estilos, você saberá em qual elemento ele está interferindo e onde encontra-lo.

Além disso, a BEM sugere uma estrutura chapada de classes (ao invés de aninhar tudo como .cabecalho .btn-logar ). Dessa forma, você desacopla seus estilos das estruturas no HTML e seu estilo sempre funcionará da mesma forma (exceto para propriedades herdadas, é claro).

6. Entenda as diferentes unidades de medida

Você sabe a diferença entre px , em e rem?

Você sabe o que as unidades de viewport ( vw e vh ) são?

Adicionar unidades além do px e % na sua caixa de ferramentas lhe permitirá expandir o que poderá fazer, especialmente ao lidar com sites responsivos. Aprenda mais sobre elas aqui.

7. Entenda todos os diferentes valores do POSITION

Já se perguntou porque às vezes você define o position como absolute e o elemento voa direto para o topo da página e outras vezes simplesmente permanece no mesmo lugar?

A chave é como os valores do position interagem entre si. absolute , relative , fixed ou static possuem seus próprios casos de uso e você deve entender onde cada um deles deve ser usado.

8. Pseudo-seletores

Os seletores CSS não são só as classes, ids e elementos. A cada nova versão da especificação CSS, um novo pseudo seletor aparece e permite realizar coisas com CSS puro que antes só podiam ser realizadas com Javascript ou processamento no servidor.

:last-of-type , :last-child , ::before são alguns dos exemplos de pseudo seletores que são usados a todo tempo. Este site mostra uma lista gigantesca de pseudo seletores incluindo definição, exemplos e o suporte em cada versão de navegador.

Não há muitos segredos aqui, mas assegure-se de que entende tudo o que as abas Styles e Computed têm a oferecer. Elas são muito úteis para entender onde certas propriedades estão sendo sobre-escritas e testar coisas novas rapidamente.

Além disso, garanta no seu fluxo de desenvolvimento que os source maps estão sendo gerados, assim você poderá ver em qual arquivo/linha aquela propriedade está sendo definida, diretamente pelo navegador.

Conclusão

Após compreender todos esses 9 pontos, você possuirá um vasto conhecimento de como controlar seus estilos, especialmente em questão de layout, que na minha opinião é a parte mais complexa.

É claro que o mundo do CSS é muito mais do que layout e há muitos outros tópicos mais avançados para cobrir, como animações, transições, transformações, o novo grid layout, etc… mas quanto a isso, você precisará entender o que cada propriedade faz e o que são os seus diferentes valores, mas tudo que tratamos aqui servirá como uma base sólida.

Tornar-se profissional em CSS necessita de muito tempo e prática, mas com uma base sólida não será uma jornada difícil.

E no final desse artigo, aliás, nenhum post sobre CSS pode ser completo sem esse GIF. Ele nunca fica velho!

https://medium.com/media/9ee5b80578406d432a1906ea570676ac/href