Skip to content

Commit

Permalink
feat: lazyload of images
Browse files Browse the repository at this point in the history
  • Loading branch information
Ryrden committed Dec 27, 2023
1 parent d6e1462 commit 20e7ea7
Show file tree
Hide file tree
Showing 9 changed files with 71 additions and 39 deletions.
5 changes: 5 additions & 0 deletions _includes/lazyload.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
<noscript>
<img src="{{include.image_src}}" alt="{{include.image_alt}}" title="{{include.image_title}}" />
</noscript>

<img data-src="{{include.image_src}}" alt="{{include.image_alt}}" title="{{include.image_title}}" class="blur-up lazyload" />
1 change: 1 addition & 0 deletions _layouts/default.html
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
{% seo %}
<link rel="stylesheet" href="{{ '/assets/styles.css' | relative_url }}">
<script src="{{ '/assets/script.js' | relative_url }}" defer></script>
<script src="{{ '/assets/lazysizes.min.js' | relative_url }}" async=""></script>
</head>

<body>
Expand Down
2 changes: 1 addition & 1 deletion _layouts/post.html
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ <h1 id="#top">{{ page.title }}</h1>
{{ page.description }}
</p>
</div>
<img src="{{ page.cover_image }}" alt="{{ page.imageAlt }}">
{% include lazyload.html image_src=page.cover_image image_alt=page.imageAlt image_title=page.imageAlt %}
<h2>Conteúdo</h2>
<p>{{ content }}</p>
<p style="text-align:end;"><a href="#top">Voltar ao topo ⬆️</a></p>
Expand Down
18 changes: 9 additions & 9 deletions _posts/2023-04-17-githubSSH-en.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ layout: post
title: SSH key on github - Windows and Linux
lang: en
description: Step-by-step guide on how to generate and add an SSH key to GitHub for secure authentication to repositories. The article covers creating SSH keys using the ED25519 algorithm, offering detailed instructions for Linux and Windows users. Learn how to configure the SSH key on GitHub to facilitate operations such as push and pull without the need for repeated authentication.
cover_image: 'https://i.imgur.com/9GC9TvD.jpeg'
cover_image: 'https://i.imgur.com/9GC9TvD.png'
canonical_url: 'https://ryan.dev.br/2023-04-17-githubSSH-en'
imageAlt: 'A statue of an oktokat (github mascot) in the center, in the background a laptop with the main page of GitHub open.'
tags:
Expand Down Expand Up @@ -42,7 +42,7 @@ To generate an SSH key on Linux, you need to open the terminal and type the foll
ssh-keygen -t ed25519 -C <your-email>
```

![ssh-keygen on linux](https://i.imgur.com/J56UKtq.png)
{% include lazyload.html image_src="https://i.imgur.com/J56UKtq.png" image_alt="ssh-keygen on linux" image_title="ssh-keygen on linux" %}

After typing the command, you will be prompted to fill in some information, such as the key name and password. You can type any name as long as you don't forget it; in my case, I just pressed `enter` so that Git would automatically generate the key name and have no password.

Expand All @@ -54,15 +54,15 @@ cat id_ed25519.pub

and copy the key that appears on the screen.

![getting the key in linux](https://i.imgur.com/nT9OTKx.png)
{% include lazyload.html image_src="https://i.imgur.com/nT9OTKx.png" image_alt="getting the key in linux" image_title="getting the key in linux" %}

Now you need to go to the GitHub settings page and add the key you just copied.

here a shortcut for you to go directly to the GitHub SSH keys settings page: [SSH Keys Settings Page](https://github.com/settings/keys)

here you should go to `New SSH key` and paste the key you copied earlier.

![paste key on github - linux](https://i.imgur.com/5L6KrD8.png)
{% include lazyload.html image_src="https://i.imgur.com/5L6KrD8.png" image_alt="paste key on github - linux" image_title="paste key on github - linux" %}

By clicking on Add SSH key, you will add the SSH key to GitHub.

Expand All @@ -74,7 +74,7 @@ ssh [email protected]

if everything goes well, you will see a success message, and you can clone any repository you have access to; in my case, I cloned my own repository.

![Testing ssh key - linux](https://i.imgur.com/eDKiWUy.png)
{% include lazyload.html image_src="https://i.imgur.com/eDKiWUy.png" image_alt="Testing ssh key - linux" image_title="Testing ssh key - linux" %}

### Windows

Expand All @@ -88,7 +88,7 @@ ssh-keygen -t ed25519 -C <seu-email>

replace `<your-email>` with your GitHub email.

![ssh-keygen on windows](https://i.imgur.com/bCSWptA.png)
{% include lazyload.html image_src="https://i.imgur.com/bCSWptA.png" image_alt="ssh-keygen on windows" image_title="ssh-keygen on windows" %}

After typing the command, you will be prompted to fill in some information, such as the key name and password. You can type any name as long as you don't forget it; in my case, I just pressed `enter` so that Git would automatically generate the key name and have no password.

Expand All @@ -100,13 +100,13 @@ type id_ed25519.pub

and copy the key that appears on the screen.

![getting ssh key in windows](https://i.imgur.com/XdeXkT1.png)
{% include lazyload.html image_src="https://i.imgur.com/XdeXkT1.png" image_alt="getting ssh key in windows" image_title="getting ssh key in windows" %}

Finally, now you need to go to the GitHub settings page and add the key you just copied. here a shortcut for you to go directly to the GitHub SSH keys settings page: [SSH Keys Settings Page](https://github.com/settings/keys)

here you should go to `New SSH key` and paste the key you copied earlier.

![paste key on github - windows](https://i.imgur.com/fYitTGb.png)
{% include lazyload.html image_src="https://i.imgur.com/fYitTGb.png" image_alt="paste key on github - windows" image_title="paste key on github - windows" %}

By clicking on Add SSH key, you will add the SSH key to GitHub.

Expand All @@ -118,7 +118,7 @@ ssh [email protected]

if everything goes well, you will see a success message, and you can clone any repository you have access to; in my case, I cloned my own repository.

![Testing ssh key - linux](https://i.imgur.com/OQaJNyj.png)
{% include lazyload.html image_src="https://i.imgur.com/OQaJNyj.png" image_alt="Testing ssh key - linux" image_title="Testing ssh key - linux" %}

## Conclusão

Expand Down
18 changes: 9 additions & 9 deletions _posts/2023-04-17-githubSSH-pt-br.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ title: Chave SSH no github - Windows e Linux
lang: pt-br
published: true
description: Guia passo a passo sobre como gerar e adicionar uma chave SSH ao GitHub para autenticação segura em repositórios. O artigo aborda a criação de chaves SSH usando o algoritmo ED25519, oferecendo instruções detalhadas para usuários Linux e Windows. Aprenda a configurar a chave SSH no GitHub para facilitar operações como push e pull sem a necessidade de autenticação repetida.
cover_image: 'https://i.imgur.com/9GC9TvD.jpeg'
cover_image: 'https://i.imgur.com/9GC9TvD.png'
canonical_url: 'https://ryan.dev.br/2023-04-17-githubSSH-pt-br'
devto_url: 'https://dev.to/ryrden/chave-ssh-no-github-windows-e-linux-3gj6'
imageAlt: 'Uma estatueta de um oktokat (Mascote do github) ao centro, ao fundo um laptop com a página principal do GitHub aberta.'
Expand Down Expand Up @@ -46,7 +46,7 @@ Para gerar uma chave SSH no Linux, você precisa abrir o terminal e digitar o se
ssh-keygen -t ed25519 -C <seu-email>
```

![ssh-keygen on linux](https://i.imgur.com/J56UKtq.png)
{% include lazyload.html image_src="https://i.imgur.com/J56UKtq.png" image_alt="ssh-keygen on linux" image_title="ssh-keygen on linux" %}

Após digitar o comando, você vai ser solicitado a preencher alguns dados, como o nome da chave e a senha da chave. Você pode digitar o nome que quiser desde que não se esqueça dele, no meu caso, eu apenas apertei `enter` para que o git gerasse o nome da chave automaticamente e que a chave não tenha senha.

Expand All @@ -58,15 +58,15 @@ cat id_ed25519.pub

e copie a chave que aparecer na tela.

![getting the key in linux](https://i.imgur.com/nT9OTKx.png)
{% include lazyload.html image_src="https://i.imgur.com/nT9OTKx.png" image_alt="getting the key in linux" image_title="getting the key in linux" %}

Agora você precisa ir até a página de configurações do github e adicionar a chave que você acabou de copiar.

aqui um atalho para você ir direto para a página de configurações de chaves SSH do github: [Página de configurações de chaves SSH](https://github.com/settings/keys)

aqui você deve ir em `New SSH key` e cole a chave que você copiou anteriormente.

![paste key on github - linux](https://i.imgur.com/5L6KrD8.png)
{% include lazyload.html image_src="https://i.imgur.com/5L6KrD8.png" image_alt="paste key on github - linux" image_title="paste key on github - linux" %}

Clicando em Add SSH key, você vai adicionar a chave SSH ao github.

Expand All @@ -78,7 +78,7 @@ ssh [email protected]

se tudo der certo, você vai ver uma mensagem de sucesso e você já pode fazer o clone de qualquer repositório que você tenha acesso, no meu caso eu fiz o clone do meu próprio repositório.

![Testing ssh key - linux](https://i.imgur.com/eDKiWUy.png)
{% include lazyload.html image_src="https://i.imgur.com/eDKiWUy.png" image_alt="Testing ssh key - linux" image_title="Testing ssh key - linux" %}

### Windows

Expand All @@ -92,7 +92,7 @@ ssh-keygen -t ed25519 -C <seu-email>

substitua `<seu-email>` pelo seu email do github.

![ssh-keygen on windows](https://i.imgur.com/bCSWptA.png)
{% include lazyload.html image_src="https://i.imgur.com/bCSWptA.png" image_alt="ssh-keygen on windows" image_title="ssh-keygen on windows" %}

Após digitar o comando, você vai ser solicitado a preencher alguns dados, como o nome da chave e a senha da chave. Você pode digitar o nome que quiser desde que não se esqueça dele, no meu caso, eu apenas apertei `enter` para que o git gerasse o nome da chave automaticamente e que a chave não tenha senha.

Expand All @@ -104,13 +104,13 @@ type id_ed25519.pub

e copie a chave que aparecer na tela.

![getting ssh key in windows](https://i.imgur.com/XdeXkT1.png)
{% include lazyload.html image_src="https://i.imgur.com/XdeXkT1.png" image_alt="getting ssh key in windows" image_title="getting ssh key in windows" %}

Enfim, agora você precisa ir até a página de configurações do github e adicionar a chave que você acabou de copiar. aqui um atalho para você ir direto para a página de configurações de chaves SSH do github: [Página de configurações de chaves SSH](https://github.com/settings/keys)

aqui você deve ir em `New SSH key` e cole a chave que você copiou anteriormente.

![paste key on github - windows](https://i.imgur.com/fYitTGb.png)
{% include lazyload.html image_src="https://i.imgur.com/fYitTGb.png" image_alt="paste key on github - windows" image_title="paste key on github - windows" %}

Clicando em Add SSH key, você vai adicionar a chave SSH ao github.

Expand All @@ -122,7 +122,7 @@ ssh [email protected]

se tudo der certo, você vai ver uma mensagem de sucesso e você já pode fazer o clone de qualquer repositório que você tenha acesso, no meu caso eu fiz o clone do meu próprio repositório.

![Testing ssh key - linux](https://i.imgur.com/OQaJNyj.png)
{% include lazyload.html image_src="https://i.imgur.com/OQaJNyj.png" image_alt="Testing ssh key - linux" image_title="Testing ssh key - linux" %}

## Conclusão

Expand Down
20 changes: 10 additions & 10 deletions _posts/2023-08-19-timeManagementForDevs-en.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ layout: post
title: Time Management and Productivity for Developers
lang: en
description: This article provides an in-depth look at time management in the context of software development. It addresses the importance of mental, physiological and technical dimensions in productivity and presents techniques such as Weekly Planning, Pomodoro and Eisenhower Matrix. The focus is to provide practical methods for developers to improve time management and quality of work on technology projects.
cover_image: 'https://i.imgur.com/oCZcIby.jpg'
cover_image: 'https://i.imgur.com/oCZcIby.png'
canonical_url: 'https://ryan.dev.br/2023-08-19-timeManagementForDevs-en'
imageAlt: 'Woman with notebook on top of a giant calendar, in the background a stopwatch and next to the calendar there is a plant'
tags:
Expand Down Expand Up @@ -57,7 +57,7 @@ Devemos entender o valor do tempo e estar motivado para aproveitá-lo da melhor

A dimensão fisiológica diz respeito ao nosso corpo e aos seus limites. Como tudo na vida, temos um ponto ótimo de produtividade, que é o ponto em que conseguimos realizar as tarefas com eficiência e qualidade. Se ultrapassarmos esse ponto, podemos acabar prejudicando nossa saúde física e mental.

![Ponto ótimo de produtividade](https://i.imgur.com/Eou40sx.png)
{% include lazyload.html image_src="https://i.imgur.com/Eou40sx.png" image_alt="Ponto ótimo de produtividade" image_title="Ponto ótimo de produtividade" %}

Para garantir que seu corpor sempre vai estar em potencial de estar próximo do ponto ótimo de produtividade, existem 3 mecanismos para tomar maior cuidado:

Expand All @@ -67,7 +67,7 @@ Para garantir que seu corpor sempre vai estar em potencial de estar próximo do

**Estresse x Relaxamento:** Tudo é dinâmico e o corpo não é diferente, você precisa de momentos de relaxamento para que seu corpo possa se recuperar do estresse causado pelas atividades do dia a dia. É quase que uma gamgorra onde ao estressar muito seu corpo mentalmente se faz necessário um estresse físico para que seu corpo possa se recuperar, por isso a importância de fazer exercícios físicos.

![Estresse x relaxamento](https://i.imgur.com/QY2ShP7.png)
{% include lazyload.html image_src="https://i.imgur.com/QY2ShP7.png" image_alt="Estresse x relaxamento" image_title="Estresse x relaxamento" %}

### Dimensão Técnica

Expand All @@ -81,13 +81,13 @@ Existem diversas técnicas que podem ser aplicadas na gestão do tempo. Algumas

O planejamento semanal é uma das técnicas mais simples e eficazes para gerenciar o tempo. A ideia é fazer um planejamento das atividades que serão realizadas durante a semana, definindo quais tarefas serão realizadas em cada dia da semana.

![Planejamento semanal](https://i.imgur.com/2hV4fq6.png)
{% include lazyload.html image_src="https://i.imgur.com/2hV4fq6.png" image_alt="Planejamento semanal" image_title="Planejamento semanal" %}

É importante ressaltar que o planejamento semanal não deve ser muito detalhado, pois isso pode causar ansiedade e estresse. O ideal é definir apenas as atividades mais importantes e deixar o restante para ser definido no dia a dia. além disso, há um grande perigo de cair na **Falácia do Planejamento**.

**Falácia do Planejamento:** A falácia do planejamento é um fenômeno que ocorre quando as pessoas superestimam sua capacidade de realizar tarefas em um determinado período de tempo. Para evitar essa armadilha, é importante ser realista e considerar imprevistos que possam surgir durante o dia. Por isso, é importante deixar um tempo livre para imprevistos e atividades não planejadas no planejamento semanal.

![Fálacia do planejamento](https://i.imgur.com/1jvwGFd.png)
{% include lazyload.html image_src="https://i.imgur.com/1jvwGFd.png" image_alt="Fálacia do planejamento" image_title="Fálacia do planejamento" %}

### Planejamento por Objetivos

Expand All @@ -99,7 +99,7 @@ Criar objetivos e metas é importante para manter o foco e a concentração nas

### Pomodoro

![Pomodoro](https://i.imgur.com/myYE6BT.png)
{% include lazyload.html image_src="https://i.imgur.com/myYE6BT.png" image_alt="Pomodoro" image_title="Pomodoro" %}

Provavelmente a técnica mais conhecida quando o assunto é gestão de tempo, o Pomodoro é uma técnica simples e eficaz para aumentar a produtividade e a eficiência nas tarefas realizadas. A ideia é dividir o tempo em blocos de 25 minutos, separados por intervalos de 5 minutos. Durante cada bloco de tempo, o objetivo é focar em uma única tarefa e evitar distrações.

Expand All @@ -111,7 +111,7 @@ O Pomodoro ajuda a evitar essas distrações, pois o desenvolvedor sabe que ter

Há 4 principios seguidos pela técnica Pomodoro que fazem com que ela funcione:

![Pomodoro](https://i.imgur.com/PGfVFnk.png)
{% include lazyload.html image_src="https://i.imgur.com/PGfVFnk.png" image_alt="Pomodoro" image_title="Pomodoro" %}

**Estresse x Relaxamento:** Respeitando a dimensão fisiológica da gestão de tempo, ao encontrar um tempo bom ao qual você consegue manter o foco e a concentração, você consegue trabalhar de forma mais eficiente e produtiva. O tempo de 25 minutos é um tempo bom para a maioria das pessoas, mas você pode testar outros tempos e ver qual funciona melhor para você.

Expand All @@ -125,17 +125,17 @@ Além destes 4 principios, há duas teorias que explicam o porquê de o Pomodoro

**Lei de Parkinson:** "O trabalho se expande de modo a preencher o tempo disponível para a sua realização". Ao estipular um tempo para realizar uma tarefa, seu cerebro inconscientemente vai se esforçar para realizar a tarefa dentro do tempo estipulado. Quantas tarefas em sua vida você sabe que faz em minutos mas não a faz por que não existe prazo para ela? Agora reflita sobre quantas tarefas que pareciam muito complexas e que você achava que levaria horas para realizar, mas que você conseguiu realizar antes do tempo estipulado simplesmente por que você tinha um prazo para ela.

![Lei de Parkisson](https://i.imgur.com/v9cTGVv.png)
{% include lazyload.html image_src="https://i.imgur.com/v9cTGVv.png" image_alt="Lei de Parkisson" image_title="Lei de Parkisson" %}

**Princípio de Pareto:** "80% dos seus resultados só dependem de 20% do seu esforço". Para entender esse princípio aplicado ao pomodoro, vamos supor que temos uma prova para ser feita em um dia x (prazo), você sabe que tem 5 dias para estudar para essa prova, você sabe que estudar um pouco do conteúdo da prova todos os dias até o dia da prova (20% do conteúdo por dia durante 5 dias) é muito mais eficiente do que estudar todo o conteúdo da prova no dia anterior a prova. Isso acontece por que o seu cerebro vai estar trabalhando no problema durante os 5 dias, mesmo que você não esteja estudando, e quando você for para a ação, você vai estar mais preparado para resolver o problema. Agora na perspectiva pomodoro isso se aplica com os lotes 25min de pomodoros, ao dividir a tarefa você se esforça menos e obtêm mais resultados.

![Princípio de Pareto](https://i.imgur.com/9tUAcAz.png)
{% include lazyload.html image_src="https://i.imgur.com/9tUAcAz.png" image_alt="Princípio de Pareto" image_title="Princípio de Pareto" %}

### Matriz de Eisenhower

Quando estiver tudo um caos e você não souber por onde começar, a Matriz de Eisenhower pode te ajudar a priorizar as tarefas e organizar o seu dia. A ideia é dividir as tarefas em 4 quadrantes, de acordo com a importância e urgência de cada tarefa.

![Matriz de Eisenhower](https://i.imgur.com/1dLZK6G.png)
{% include lazyload.html image_src="https://i.imgur.com/1dLZK6G.png" image_alt="Matriz de Eisenhower" image_title="Matriz de Eisenhower" %}

- **Importante e Urgente:** Tarefas que precisam ser realizadas imediatamente.
- **Importante e Não Urgente:** Tarefas que precisam ser realizadas, mas não precisam ser realizadas imediatamente.
Expand Down
Loading

0 comments on commit 20e7ea7

Please sign in to comment.