Forem: Felipe Murakami

Containers and Docker: Simplifying Software Development

Felipe Murakami — Tue, 04 Mar 2025 16:12:48 +0000

If you're a developer, you've probably heard of containers and Docker. But if you're not yet familiar with these terms, don't worry! We'll explain everything clearly and objectively, without beating around the bush.

Containers: The Foundation of Everything

Imagine you need to send an application to a server. In addition to the code itself, it needs various dependencies to function correctly: libraries, frameworks, configurations, etc. Containers are like boxes that package all of this together, ensuring that the application works in any environment, withou conflicts or unpleasant surprises.

Why use containers?

Portability: Your application will run anywhere that has containers, whether on your computer, the company server, or in the cloud.
Isolation: Each container is like a separate environment, which prevents one application from interfering with the operation of others.
Efficiency: Containers are lighter than virtual machines, which means you can run more applications on the same server.

Docker: The Facilitator

Docker is a tool that allows you to create and manage containers simply and efficiently. With it, you can:

Create images: Images are like molds of containers, containing everything needed to run an application.
Manage containers: Docker allows you to start, stop, restart, and remove containers easily.
Share images: You can share your images with other developers, which facilitates teamwork.

Containers vs. Virtual Machines: What's the Difference?

Virtual machines, or VMs, are like complete computers that run within another computer. Containers share the host's operating system, making them lighter and more efficient. To better understand the differences, let's analyze some key points:

Size: Containers are generally much smaller than VMs, as they don't need a complete operating system.
Startup: Containers start much faster than VMs, as they don't need to "turn on" an operating system.
Resources: VMs consume more resources (CPU, memory, disk) than containers, as each VM has its own operating system.

When to use VMs:

Complex applications and legacy systems: VMs are more suitable for larger and more complex applications, which may have various dependencies and specific configurations. In these cases, the stronger isolation offered by VMs is crucial.
Application that require high security: VMs offer greater isolation between environments, as each VM has its own operating system and kernel. This can be important for applications that handle sensitive data or require high security.
Running different operating systems: VMs allow you to run different operating systems on the same host, which can be useful in heterogeneous environments. This flexibility is an important advantage for companies that need to keep old systems running.

When to use containers:

Microservices and lightweight applications: Containers are ideal for smaller and independent applications, which communicate with each other to form a larger system.
Applications that need to be scalable: Containers can be easily added or removed to meet demand, ensuring that the applicatoin is always available.
Development and testing environments: Containers can allow you to create consistent and isolated environments to test applications before sending them to production.

Open Container Initiative (OCI): Standardization for an Open Ecosystem

The Open Container Initiative (OCI) is a fundamental organization for the world of containers. It was created to define open technical standards for container image formats and runtimes (the tools that run containers).

Why is the OCI important?

Interoperability: Thanks to OCI standards, you can use different tools to create, manage, and run containers, without worrying about compatibility issues.
Innovation: By establishing a solid and open foundation, the OCI allows different companies and projects to contribute and innovate in the world of containers.
Community: The OCI is an open community, where developers and companies collaborate to create and maintain standards.

What does the OCI do?

Specifications: The OCI defines detailed specifications for the container image format (Image Spec) and for the runtime (Runtime Spec).
Projects: The OCI maintains open-source projects that implement these specifications, such as runc, a lightweight and efficient container runtime.

By ensuring standardization, the OCI prevents the container market from becoming fragmented and allows you to choose the tools that best meet your needs, without being tied to a single vendor.

Benefits of Using Containers and Docker

Agility: Application development and deployment become faster and more efficient.
Portability: Applications run in any environment, without the need for adaptations.
Scalability: It is possible to increase or decrease the number of containers according to demand.
Efficiency: Containers consume fewer resources than VMs, which generates cost savings.

Conclusion

Containers and Docker are powerful tools that facilitate the development, deployment, and execution of applications. If you are not yet using them, it is worth giving them a chance and discovering how they can transform you workflow.

If you liked this article, and want a part 2, leave it in the comments. :)

References

Docker Documentation: https://docs.docker.com/
Open Container Initiative: https://opencontainers.org/faq/
Docker vs. Virtual Machines: https://www.docker.com/resources/what-container/

CSS: Learning box model with analogies

Felipe Murakami — Mon, 08 Jul 2024 21:29:31 +0000

Introduction

If you're studying CSS, you may have already encountered the term box model. If not, don't worry; we'll address this topic in this article.

Every element in a web page is a rectangle called box; that's where the box model name came from. Understanding how this model works is the basis for creating more complex layouts with CSS or aligning the items correctly.

When inspecting an element (clicking with the right button or opening the DevTools with Ctrl+Shift+C or F12, depending on your browser) at the Computed tab, you'll probably see something like this:

Fig.1 - Element's proprieties (Computed tab)

In the next section, we'll see what each part of this image means in detail.

The Box model's basic structure

Inspired by this article [1], we will use the construction of a house on a lot as our example to illustrate the basic structure of the box model.

The parts that make up the structure are:

Content

Content refers to the most central part of Fig.1 in blue and is related to the content within an HTML tag, such as text in a paragraph (<p>).

The content is composed of two properties, width and height.

In our example, the content will be the little house below (Fig.2) (if you inspect the image of the house, you will see that the measurements are the same as Fig.1). The dimensions of the house are 81px wide and 93px tall.

Fig. 2 - Content (house) and its dimensions

The content needs to be inside an HTML structure, so we will place our little house inside a lot to represent this structure:

Fig. 3 - House positioned in the center of the lot

Padding

The green part of Fig.1 is the padding property, which creates space around the content.

The padding is demonstrated by the land part, where the garden will be, for example:

Fig. 4 - Padding added as a land area around the house

Border

Next, we have the border property, which is responsible for delimiting our content and is represented by yellow in Fig.1. The border is the last property of our element that can be seen.

The border can be represented as the wall or, in our case, the fence of the house:

Fig. 5 - Border added around the padding

Margin

Finally, we have the margin property in orange (Fig.1), which includes an empty area around our element. As can be seen in the image:

Fig. 6 - Margin added to the element, creating an empty area around the border

In this case, we reduced the padding so that the margin could be represented in the image.

The `box-sizing` property

Now that we know the structure of the box model, we can address the box-sizing property. This property allows us to tell the browser how it should calculate the height and width of the element. We only have 2 possible values:

content-box

This is the default value, where the element's height and width include only the content. Therefore, if we have content with a height and width of 100px, plus 10px of padding, 5px of border and 5 of margin, we will see that the size of our element changed from 100px to 130px:

Fig. 7 - Div with 100 px height and width, 10px padding, 5px border and 5px margin using the default value content-box

See the code here:

This occurs because the height and width properties are only applied to the content (the blue part of Fig.1, remember?). However, we also added padding, border and margin:

100px (height/width) + 2 * 10px (padding) + 2 * 5px (border) + 2 * 5px (margin) = 140px

Attention! ⚠️

Huh?! 🤔

The image shows the element with 130px and not 140px!
Exactly! Remember that margin is an external property of the element (or empty space around it) and should not be added to its height and width.

We can think that the box-sizing property, with the value content-box, will grow our element as we add more "layers."
To explain, I will use another analogy: Imagine a balloon, like those at a children's party, with sweets inside (it's like the Brazilian version of piñata).

Fig. 8 - Birthday party big balloon (`border`)	Fig. 9 - Sweets (`content`)
Fig. 10 - Balloon with sweets inside

The sweets will be our content, with a fixed height and width. To make it possible to pop the balloon, we will add padding (air) inside the balloon. The balloon itself is the border and the margin is all the space around the balloon:

Fig. 11 - Sweets (content), air (padding), balloon (border), space around the balloon (margin code> code>)

Did you see how our element grew as we added more properties or if we added more air (padding) to the balloon?

Another example of a content-box using an analogy is a bag of popcorn in the microwave, where we initially have the content (corn), the border (paper bag), and the margin (internal space of the microwave). However, padding (air/steam inside the bag) is slowly added when heating.

border-box

The other possible value for the box-sizing property is border-box. It is handy when you want to be sure of the space your element will occupy on the page; instead of limiting the height and width to just the content, it uses the entire element (content + padding + border). This helps create responsive layouts, as we guarantee that the elements have the exact size defined even using relative measurements (%, em, rem etc.).

Using the same example as Fig.7, but adding the box-sizing: border-box; property, we will have a final element with 100px height and width as previously defined.

Fig. 12 - Div with 100 px height and width, 10px padding, 5px border and 5px margin, but this time using the value border-box

The difference is that our content has now been reduced to 70px in height and width so that it does not exceed 100px.

Fig. 13 - Computed tab when inspecting the element

See the code here:

In this case, we must think of something in which the final measurements cannot exceed a certain size. For this, we will use a cooler as the maximum size; therefore, the box will represent the border of our element:

Fig. 14 - Cooler (border)

The content will be a drink that we want to chill, and the ice is the padding:

Fig. 15 - Beer barrel (`content`)	Fig. 16 - Ice cubes (`padding`)
Fig. 17 - Cooler with the drink and ice

Note that the more ice we add, the smaller the drink we can chill. As we cannot have content with negative measurements, the smallest possible size will be 0px. However, assuming that our box is 100px height by 120px width, and we define a padding of 60px, we will have all 120px of ice both horizontally and vertically; that is, the ice will overflow to the cooler.

18 - Ice overflowing at the maximum limit (height) of the cooler

The same happens with our HTML element:

Fig. 19 - Inspecting the element, we can see that when adding padding greater than the total size of the element, the content was reduced to 0x0 px, and the height increased to 150px, even with box-sizing: border-box

See the code here:

Conclusion

Now that you know the basic structure of the Box Model and the box-sizing property, it will be easier to understand how the elements behave on your web page and know when to use each value (content-box and border-box). Inspecting the elements of the websites you use daily, you will see that the majority use border-box for their elements, as this property has made responsive design much easier. :)

Congratulations on getting this far!

Do you have any questions or suggestions? Feel free to leave a comment or, if you prefer, send a private message on LinkedIn.

Note ❗🚫

I made all images in this article; please do not use them without due consent/credit.
The free ready-made assets I used are in the references, and use for non-commercial projects is permitted.

References

[1] The CSS Box Model Explained by Living in a Boring Suburban Neighborhood
[2] MDN Web Docs - The box model
[3] MDN Web Docs - Introduction to the CSS basic box model
[4] MDN Web Docs - box-sizing
[5] W3Schools - CSS Box Model
[6] W3Schools - CSS Box Sizing
[7] The Odin Project - Foundations Course - The Box Model
[8] Learn CSS BOX MODEL - With Real World Examples
[9] Learn CSS Box Model in 8 minutes
[10] box-sizing: border-box (EASY!)
[11] Assets used in the images for the Box Model examples
[12] Assets - Beer mug

CSS: Aprendendo box model com analogias

Felipe Murakami — Fri, 05 Jul 2024 14:50:09 +0000

Introdução

Se você está estudando CSS, talvez já tenha se deparado com o termo box model. Caso ainda não tenha, não se preocupe, iremos abordar esse assunto nesse artigo.

Basicamente todo elemento em uma página web é um retângulo chamado de box (caixa), e daí vem o nome box model ou modelo de caixa. Entendermos como funciona esse modelo é a base para conseguirmos criar layouts mais complexos com CSS, ou alinhar itens corretamente.

Ao inspecionar um elemento (clicando com o botão direito ou abrindo o DevTools com os atalhos Ctrl+Shift+C ou F12, dependendo do seu navegador), na aba Computed (Calculado), você provavelmente irá ver a imagem a seguir:

Fig.1 - Propriedades do elemento (aba Computed)

No próximo tópico iremos ver detalhadamente o que significa cada parte dessa imagem.

Estrutura básica do box model

Para ilustrar a estrutura básica do box model irei utilizar como exemplo a construção de uma casa em um terreno. Essa ideia foi inspirada neste artigo [1] (em inglês).

As partes que compõem a estrutura do box model são:

Conteúdo (Content)

O conteúdo se refere à parte mais central da Fig.1 em azul, e está relacionado ao conteúdo dentro de uma tag HTML, como por exemplo o texto em um parágrafo (<p>).

O conteúdo é composto basicamente por duas propriedades, largura (width) e altura (height).

No nosso exemplo, o conteúdo será a casinha abaixo (Fig.2) (se você inspecionar a imagem da casa, verá que as medidas são as mesmas da Fig.1). As dimensões da casa são 81px de largura e 93 px de altura.

Fig. 2 - Conteúdo (casa) e suas dimensões

O conteúdo precisa estar dentro de uma estrutura HTML, portanto colocaremos nossa casinha dentro de um lote para representar esta estrutura:

Fig. 3 - Casa posicionada no centro do lote

Preenchimento (Padding)

A parte em verde da Fig.1 é a propriedade chamada de padding (preenchimento), que cria um espaço ao redor do conteúdo.

O padding é demonstrado pela parte de terra, onde será o jardim, por exemplo:

Fig. 4 - Padding adicionado como uma área de terra ao redor da casa

Borda (Border)

A seguir temos a propriedade border, ou borda, que é responsável por delimitar nosso conteúdo e está representada pela cor amarela na Fig.1. A borda é a última propriedade do nosso elemento que pode ser vista.

A borda pode ser representada como o muro ou, no nosso caso, a cerca da casa:

Fig. 5 - Border (Cerca) adicionada ao redor do padding

Margem (Margin)

Por fim, temos a propriedade margin, em laranja (Fig.1), que inclui uma área vazia ao redor do nosso elemento. Como pode ser visto na imagem:

Fig. 6 - Margem adicionada ao elemento, criando uma área vazia ao redor da borda

Neste caso, reduzimos o padding para que a margem pudesse ser representada na imagem.

A propriedade `box-sizing`

Agora que conhecemos a estrutura do box model, podemos abordar a propriedade box-sizing. Essa propriedade nos permite dizer ao navegador como ele deve calcular a altura e a largura do elemento. Temos apenas 2 valores possíveis:

content-box

Este é o valor padrão, em que a altura e a largura do elemento incluem apenas o conteúdo. Portanto, se tivermos um conteúdo com height(altura) e width(largura) de 100px, mais 10px de padding, mais 5px de border e 5 de margin, veremos que o tamanho do nosso elemento mudou de 100px para 130px:

Fig. 7 - Div com 100 px de altura e largura, 10px de padding, 5px de border e 5px de margin utilizando o valor padrão content-box

Veja o código aqui:

Isso ocorre pois as propriedades height e width, são aplicadas somente ao conteúdo (a parte azul da Fig.1, lembra?). Porém adicionamos ainda o padding, a border e a margin:

100px (height/width) + 2 * 10px (padding) + 2 * 5px (border) + 2 * 5px (margin) = 140px

Atenção! ⚠️

Ué?! 🤔

A imagem mostra o elemento com 130px e não 140px!
Exato! Lembre-se que a margin é uma propriedade externa (ou um espaço vazio em volta) do elemento e por isso não deve ser somada à altura e à largura do mesmo.

Podemos pensar que com a propriedade box-sizing com o valor content-box, nosso elemento vai crescendo conforme adicionamos mais "camadas".
Para explicar, utilizarei mais uma analogia: Imagine um balão, daqueles de festa de criança, com doces dentro.

Fig. 8 - Balão de festa (`border`)	Fig. 9 - Doces (`content`)
Fig. 10 - Balão com os doces dentro

Os doces serão o nosso conteúdo, com uma altura e largura fixos. Para que seja possível estourar o balão, vamos adicionar um padding (ar) dentro do balão. O balão em si, é a border e a margin é todo o espaço em volta do balão:

Fig. 11 - Doces (content), ar (padding), balão (border), espaço em volta do balão (margin)

Viu como nosso elemento foi crescendo conforme adicionamos mais propriedades? Ou se adicionarmos mais ar (padding) ao balão?

Outro exemplo de content-box utilizando analogia: um saco de pipoca no microondas, onde temos inicialmente o content (milho), a border (saco de papel) e margin (espaço interno do microondas). Porém ao aquecer, lentamente um padding(ar/vapor dentro do saco) vai sendo adicionado.

border-box

O outro valor possível para a propriedade box-sizing é o border-box. Ele é muito útil quando você quer ter certeza do espaço que seu elemento irá ocupar na página, pois ao invés de atribuir a altura e a largura apenas ao conteúdo, ele utiliza o elemento todo (content + padding + border). Isso ajuda na criação de layouts responsivos, pois garantimos os elementos terão o tamanho exato que for definido mesmo utilizando medidas relativas (%, em, rem etc.).

Utilizando o mesmo exemplo da Fig.7, porém adicionando a propriedade box-sizing: border-box; teremos um elemento final com os 100px de altura e largura como definimos anteriormente.

Fig. 12 - Div com 100 px de altura e largura, 10px de padding, 5px de border e 5px de margin, porém desta vez utilizando o valor border-box

A diferença é que agora nosso conteúdo reduziu para 70px de altura e largura para não ultrapassar os 100px no total.

Fig. 13 - Aba computed ao inspecionar o elemento

Vejo o código aqui:

Neste caso, devemos pensar em algo em que as medidas finais não possam ultrapassar um determinado tamanho. Para isso utilizaremos uma caixa térmica como o tamanho máximo, sendo assim, a caixa representará a borda do nosso elemento:

Fig. 14 - Caixa térmica (border)

O conteúdo será a bebida que queremos gelar, e o gelo é o padding:

Fig. 15 - Barril de chopp (`content`)	Fig. 16 - Cubos de gelo (`padding`)
Fig. 17 - Caixa térmica com a bebida e o gelo

Perceba que quanto mais gelo colocarmos, menor será a bebida que conseguiremos gelar. Como não podemos ter um conteúdo com medidas negativas, o menor tamanho possível será de 0px. Porém, supondo que nossa caixa tenha 100px de altura por 120px de largura , e definirmos um padding de 60px, ao todo teremos 120px de gelo tanto na horizontal quanto na vertical, ou seja, o gelo irá transbordar a caixa térmica.

Fig. 18 - Gelo transbordando o limite máximo (altura) da caixa térmica

O mesmo acontece com nosso elemento HTML:

Fig. 19 - Inspecionando o elemento é possível ver que, ao adicionar um padding maior do que o tamanho total do elemento, o conteúdo foi reduzido para 0x0 px e a altura aumentou para 150px, mesmo com o box-sizing: border-box

Vejo o código aqui:

Conclusão

Agora que você já conhece a estrutura básica do Box Model, e a propriedade box-sizing, ficará mais fácil entender como os elementos se comportam na sua página web e saber quando usar cada um dos valores (content-box e border-box). Se você inspecionar os elementos dos sites que utiliza no dia-a-dia, verá que a maioria utiliza border-box para seus elementos, pois essa propriedade tem facilitado muito o design responsivo. :)

Parabéns por ter chegado até aqui!

Ficou com alguma dúvida? Tem alguma sugestão? Fique a vontade para deixar seu comentário, ou se preferir, mande uma mensagem privada no Linkedin.

Observação ❗🚫

Todas as imagens deste artigo foram feitas por mim, favor não utilizá-las sem o devido consentimento/crédito.
Os assets prontos que utilizei estão nas referências, e o uso para projetos não-comerciais é permitido.

Referências

[1] The CSS Box Model Explained by Living in a Boring Suburban Neighborhood
[2] MDN Web Docs - The box model
[3] MDN Web Docs - Introduction to the CSS basic box model
[4] MDN Web Docs - box-sizing
[5] W3Schools - CSS Box Model
[6] W3Schools - CSS Box Sizing
[7] The Odin Project - Foundations Course - The Box Model
[8] Learn CSS BOX MODEL - With Real World Examples
[9] Learn CSS Box Model in 8 minutes
[10] box-sizing: border-box (EASY!)
[11] Assets utilizados nas imagens para os exemplos de Box Model
[12] Assets - Caneca de cerveja

Dicas de estudo para se manter atualizado em TI

Felipe Murakami — Mon, 16 Oct 2023 15:02:27 +0000

Se você decidiu entrar para o mundo da TI, já deve ter ouvido alguém falar que você vai ser um eterno estudante, pois precisamos estar sempre atualizados sobre as novidades da área e, ao mesmo tempo, aprofundar os conhecimentos que já possuímos.

Segundo Andy Hunt, em Pensamento e Aprendizado Pragmático: Refatore seu cérebro [1], as duas habilidades mais importantes hoje em dia são:

Habilidade de comunicação;
Habilidade de aprendizagem e pensamento.

Neste artigo iremos focar na segunda habilidade, mas esta pode não ser uma tarefa tão simples quando se tem tanta informação à disposição e a cada dia nasce uma nova tecnologia. Portanto, antes de começar a tentar absorver tudo o que vê pela frente, talvez seja necessário estruturar o seu aprendizado, ou em outras palavras, aprender a aprender.

Mas, afinal, o que é aprender?

O termo aprendizagem vem do latim apprehendere, que significa “apoderar-se”, “tomar posse de”. Ou seja, ao aprender algo, estamos tomando posse desse conhecimento.

Porém, esse termo muitas vezes traz uma bagagem negativa. Por exemplo, o formato do ensino aqui no Brasil, com aulas expositivas, é um pouco ultrapassado e pouco eficiente, pois é muito mais comum ver o conteúdo ser simplesmente despejado em cima do aluno, sem se importar de fato se ele está aprendendo ou não.

É uma abordagem pouco eficiente, pois:

A aprendizagem não é feita para você; é algo que você faz. Ou seja, o modelo que funciona para um, pode não funcionar para outro. Além disso, não é algo que alguém possa fazer por você, não é possível delegar essa tarefa.
Dominar o conhecimento por si só, sem experiência, não é eficaz.
Uma abordagem aleatória, sem metas e feedback, tende a gerar resultados aleatórios. Em outras palavras, isso dificultará a medição do seu progresso e você não saberá qual abordagem funciona melhor para você.

O processo de aprendizado pode ser um pouco frustrante às vezes, afinal quem nunca ficou dias quebrando a cabeça tentando resolver um problema? Isso faz parte do aprendizado, quando estamos aprendendo algo novo, precisamos nos desafiar para conseguir evoluir. Mas podemos tornar esse processo um pouco menos frustrante, através da programação de ensino.

Devemos ir aumentando o nível dos desafios aos poucos, para que a jornada não seja aversiva ao ponto de nos fazer querer desistir logo no começo, e possamos perceber nossa evolução ao longo do tempo. :)

A seguir veremos como tornar a aprendizagem mais eficaz no mundo real, como acelerar a aprendizagem abordando-a de maneira mais metódica com as melhores ferramentas disponíveis para o trabalho em questão.

Antes de mergulhar de cabeça nos livros, vamos aprender sobre alguns métodos de estudos.

Para começar, vamos dar uma olhada mais de perto em como gerenciar metas e planejamento usando metas SMART e o Plano de Investimento Pragmático.

Metas SMART

O termo SMART vem do inglês:

Specific (Específico)
Measurable (Mensurável)
Achievable (Atingível)
Relevant (Relevante)
Time-bound (Temporal)

Mas o que isso quer dizer?

Específico

Devemos evitar objetivos muito genéricos como: “Quero emagrecer” ou ”Quero aprender Ruby on Rails”. O ideal é termos uma meta bem definida como: “Quero perder x kg” ou “Quero ser capaz de criar uma página web utilizando Ruby on Rails”.

Mensurável

Como saber que você atingiu seu objetivo? Você precisa ser capaz de medir seu progresso.

Este item está bastante atrelado ao item anterior, pois é difícil medir algo genérico ou abstrato.

Se você não conseguir mensurar seu objetivo, talvez não esteja sendo específico o bastante.

É como em uma viagem, você não precisa enxergar seu destino final, apenas alguns metros à sua frente.

Atingível

Como comentamos anteriormente, uma meta não atingível apenas gera frustração.

Seja realista ao definir suas metas. “Quero perder 10kg em uma semana”, é praticamente impossível, a menos que você corte fora partes do seu corpo (espero que você não faça isso), ao invés disso, que tal começar com “Quero fazer 10 minutos de caminhada todo dia”?

Seu objetivo deve ser atingível a partir do ponto em que você se encontra atualmente.

Relevante

Seu objetivo precisa ser relevante para você, ou você irá perder a motivação.

Novamente usando o exemplo da perca de peso, por que isso é importante para você?

Um objetivo relevante poderia ser: “Quero perder peso, para conseguir jogar bola com meu filho”.

Temporal

Por último, e talvez o item mais importante. Você precisa colocar um prazo para atingir seu objetivo.

Sem um prazo, as chances de você deixar de lado sua meta aumentam, pois sempre irá aparecer algo “mais urgente/importante”.

Por isso a importância de se ter metas pequenas e atingíveis, pequenos progressos frequentes são melhores do que um grande avanço que foi deixado de lado.

Defini minhas metas, e agora?

Após definir suas metas, você deve criar um plano de ação para executá-las.

O Plano de Investimento Pragmático (PIP), de Andy Hunt e Dave Thomas [2], se baseia na ideia de que você deve gerenciar sua carteira de conhecimento com o mesmo cuidado que administraria uma carteira de investimentos financeiros.

Segundo eles, apenas ter um plano já é um passo bastante eficaz para alcançar seus objetivos, mas há um ponto em que devemos estar atentos: geralmente, tendemos a deixar essas tarefas para nosso “tempo livre”, mas essa é uma receita para o fracasso, pois nunca teremos tempo “livre” de verdade.

Devemos deliberadamente alocar um horário na agenda para nossa aprendizagem.

O PIP define alguns pontos importantes a serem seguidos para a manutenção da nossa carteira de conhecimento:

Tenha um plano concreto: Está muito relacionado com as metas SMART, seja específico em seu plano; crie diferentes níveis de metas ao longo do tempo, por exemplo:
- Agora (Qual é a próxima ação que você pode realizar?);
- Metas para o próximo ano;
- Metas para daqui há cinco anos.

Estes prazos são apenas um exemplo, você deve adaptá-los conforme suas necessidades.

Diversifique: Assim como nos investimentos financeiros, devemos diversificar nossa atenção, por exemplo entre a área técnica e a não técnica. Devemos sempre levar em consideração a relação risco versus retorno, aprender uma tecnologia já consolidada no mercado tem baixo risco, mas o retorno é igualmente baixo pois há maior concorrência. Já focar em uma nova tecnologia que acabou de ser lançada tem alto risco, pois pode não vingar, mas também pode trazer um alto retorno pois há poucos profissionais no mercado. A parte boa é que, diferentemente dos investimentos financeiros, o investimento em conhecimento sempre terá algum valor.
Faça um investimento ativo, não passivo: Assim como no mundo financeiro, é necessário parar e reavaliar sua carteira de tempo em tempos. Ainda faz sentido aprender o framework x? Ou a linguagem y? Reveja seu plano de ação constantemente e recalcule a rota caso necessário.
Faça um investimento regular: Ao investir em ações, às vezes irá pagar muito barato, às vezes irá pagar caro, mas pensando no longo prazo, essas diferenças são suavizadas, e a empresa irá se valorizar, fazendo com que seu capital aumente. Devemos investir regularmente em nosso conhecimento também, criar um ritual e nos comprometer a dedicar um tempo mínimo para os estudos. E assim como os preços das ações podem variar, nem toda sessão de estudo será igualmente produtiva, mas ao realizá-las regularmente, no longo prazo seu conhecimento aumentará.

Para ajudar aproveitar ao máximo sua sessão de estudos, planeje o que irá fazer previamente. Vá ao banheiro, pegue uma bebida, separe os materiais necessários, elimine as distrações (deixe o celular em outro cômodo, ou no modo “Não perturbe”).

Que tipo de aprendizagem é melhor para você?

Com suas metas e plano de estudos bem definidos, agora é hora de conhecer algumas formas de aprendizado [3], assim saberá quais métodos de estudo serão mais eficazes para você.

Basicamente, podemos dividir em 3 grupos:

Visual: São aqueles que precisam ver o material. Aprendem melhor com imagens, gráficos e até mesmo linguagem corporal;
Auditivo: Aprendem melhor ouvindo. Deve buscar palestras, podcasts etc., até mesmo o tom de voz ou velocidade podem influenciar no aprendizado desse grupo;
Cinestésico: São aqueles que precisam tocar/mover o material. Este tipo é bastante comum em esportes ou artes. Pessoas desse grupo geralmente precisam “por a mão na massa” para aprender.

Lembrando que você não precisa se encaixar apenas em um único grupo, irá depender da habilidade que está tentando desenvolver. Teste abordagens diferentes e descubra quais irão te ajudar a aprender com mais facilidade.

Chega de enrolação, vamos à prática

A seguir serão apresentados alguns métodos de estudo que podem te ajudar a fixar o conteúdo:

Divida o conteúdo em pequenas partes

Alguns estudos apontam que as pessoas tendem a se lembrar melhor das coisas quando aprendem algo novo em pequenas doses, ao invés de tentar digerir todo o conteúdo de uma só vez.

Isso está relacionado com a capacidade da nossa memória de trabalho [4] e a forma como nosso cérebro transforma memórias de curto prazo em memórias de longo prazo. Ao tentar consumir todo o conteúdo de uma vez, estamos lidando com uma grande quantidade de informações, porém nossa memória de trabalho não consegue armazenar tudo isso e a tendência é que nos esqueçamos de boa parte do que aprendemos.

Além disto, o ser humano não consegue se manter completamente focado em uma atividade por períodos muito longos, por isso é importante distribuir o conteúdo em sessões menores. Esta técnica é chamada de Prática Distribuída [5], e ela não apenas nos ajuda a nos mantermos focados como também a fixar melhor o conteúdo, pois ao retomar o mesmo assunto após um tempo, nosso cérebro entende que aquilo é importante e irá reter esse conhecimento na memória de longo prazo.

Técnica Pomodoro

~~Para esta técnica iremos precisar de 5 tomates, 2 dentes de alho..~~

Esta técnica foi desenvolvida por um italiano chamado Francesco Cirillo [6] e, apesar do nome, nada tem a ver com tomates (pomodoro, em italiano).

Buscando aumentar sua produtividade nos estudos, ele utilizou um timer de cozinha para se manter focado em suas atividades durante o tempo estipulado.

Timer utilizado por Francesco Cirillo, motivo dele ter batizado a técnica com o nome Pomodoro.

Esta prática está diretamente ligada com a Prática Distribuída, e consiste em:

Ajustar um timer para o tempo desejado;
Trabalhar na tarefa escolhida sem interrupções;
Fazer uma pequena pausa quando o alarme tocar.

Este ciclo é chamado de "pomodoro", normalmente utiliza-se um período de 25 minutos focados, seguidos de 5 minutos de descanso. Ao completar 4 "pomodoros", deve-se fazer uma pausa um pouco maior, de 10 a 15 minutos.

Esses tempos são apenas uma sugestão, o ideal é que você teste e ajuste de acordo com sua necessidade.

Caso você não possua um timer de cozinha, há alguns sites e aplicativos que você pode utilizar para aplicar esta técnica, como TomatoTimer ou Pomofocus.io, entre outros. Basta procurar no Google por "pomodoro timer".

SQ3R

Há indícios de que a leitura é um dos meios menos eficazes de se aprender, uma vez que o ser humano é bastante visual e aprende muito bem observando e imitando comportamentos. Como por exemplo, um bebê que aprende a falar e caminhar apenas observando os adultos.

Porém há uma técnica conhecida como SQ3R [6], que é capaz de aumentar a eficácia da leitura. Esta é uma sigla que vem do inglês: Survey, Question, Read, Recite, Review.

Iremos abordar cada uma das etapas:

Survey (Inspecione/pesquise): Analise o sumário, os resumos, títulos e subtítulos dos capítulos, bem como imagens e tabelas, para ter uma visão geral do conteúdo do livro.
Question (Questione): Anote suas dúvidas a respeito dos temas de cada capítulo, o que você espera aprender em cada um deles? Quais assuntos estão relacionados?
Read (Leia): Leia todo o conteúdo buscando as respostas para as perguntas feitas anteriormente, destaque trechos que julgar importante.
Recite (Recite): Faça resumos, anotações, escreva com suas próprias palavras o que entendeu. Você também pode falar em voz alta ou mentalmente, como se estivesse explicando para alguém.
Review (Revise): Releia brevemente o material e/ou suas anotações, veja se pode fazer melhorias nelas. O processo de revisão é uma processo contínuo, e pode ser feito entre um capítulo e outro, ou até entre cada sessão de estudo.

Aqui, o importante é não ter pressa para terminar a leitura, se necessário, diminua o ritmo nas partes mais difíceis, releia até compreender bem o assunto. Caso ainda sobre dúvidas, tente procurar em outras fontes, discutir o assunto com alguém (as comunidades online são uma ótima opção).

Faça revisões periódicas

Como dito anteriormente, o processo de revisão deve ser contínuo para que não esqueçamos o que aprendemos.

O conceito de curva do esquecimento [8] foi criado pelo psicólogo alemão Hermann Ebbinghaus. Em seus estudos a respeito da nossa memória, ele conseguiu demonstrar, através de uma representação gráfica, a relação entre as informações adquiridas e o tempo em que elas permanecem em nossa memória, como pode ser visto na imagem abaixo.

Ebbinghaus notou que, em 24 horas, entre 50% a 80% do aprendizado havia sido perdido. Nosso cérebro não consegue absorver grandes quantidades de informação ao mesmo tempo, e as informações menos utilizadas, é como se ele enviasse para a Lixeira, e após alguns dias, caso essas informações não sejam "restauradas", é realizada a exclusão definitiva.

Para evitar esse processo, devemos realizar revisões periódicas, assim seu cérebro irá entender que esta informação é importante e irá retê-la em sua memória de longo prazo.

Esta prática de revisões é conhecida como Sistema de Repetição Espaçada (SRE) [9], e se baseia na curva do esquecimento para propor os melhores momentos para realizar as revisões.

O SRE é dividido em 5 etapas de revisão:

1ª Revisão - Imediata: Assim que terminar de ver o conteúdo, revise os pontos mais importantes por 5 a 10 minutos.
2ª Revisão - após 24 horas: Faça revisões de 10 minutos
3ª Revisão - após 7 dias: Faça revisões de 5 a 10 minutos
4ª Revisão - após 30 dias: Faça revisões de 5 minutos
5ª Revisão - a cada 30 dias: Faça revisões de 5 minutos

Estas revisões podem ser: rever suas anotações, realizar exercícios ou construir mapas mentais, veremos sobre isso a seguir.

Mapas mentais

Os mapas mentais [10] são uma maneira visual de organizar e representar informações. Eles funcionam como uma espécie de diagrama mental, que permite representar de forma clara e concisa as informações. Além disso, os mapas mentais são fáceis de usar e personalizar, o que significa que podem ser adaptados aos interesses e necessidades de cada um.

Para criar um mapa mental, é preciso escolher um tema ou assunto e começar a desenhar um diagrama com ramificações para as ideias relacionadas. É importante usar imagens, símbolos e cores para tornar o mapa mais atraente e memorável. Além disso, os títulos das ramificações devem ser curtos e claros para facilitar a leitura.

O objetivo dos mapas mentais é ajudar a estabelecer conexões entre os assuntos e facilitar a compreensão dos conceitos relacionados. Ao criar conexões entre ideias, é possível ver como as informações estão relacionadas entre si e como elas formam uma estrutura mais ampla. Isso pode ajudar a identificar padrões e relações importantes que podem não ser óbvias de outra forma.

E se você descobrir mais sobre o assunto? Não tem problema! Basta atualizar o seu mapa mental.

Em resumo, os mapas mentais são uma ferramenta valiosa para quem deseja melhorar o seu aprendizado e a retenção de informações. Eles ajudam a visualizar o material de uma forma clara e concisa, além de forçar o cérebro a processar as informações de uma forma mais ativa. Se você ainda não experimentou criar mapas mentais, vale a pena dar uma chance e ver como eles podem ajudar na sua jornada de aprendizado.

Ensine

Aprender ensinando é uma abordagem de estudo eficaz que ajuda a solidificar o conhecimento e aprofundar a compreensão de um assunto. Quando se ensina algo, é necessário explicar o assunto de forma clara e concisa, o que pode ajudar a identificar áreas que ainda não são compreendidas. Além disso, o ato de ensinar ajuda a criar uma ligação mais forte com o assunto, o que pode aumentar a memória e a capacidade de lembrar informações.

Ensinar pode ser feito de muitas maneiras, como explicar a alguém, dar uma palestra ou apresentação, escrever um artigo ou resumo, ou até mesmo explicar para um patinho de borracha (ou qualquer outro objeto inanimado).

Há uma técnica conhecida como Rubber duck debugging [11], ou Debug com Pato de borracha, que basicamente consiste em tentar explicar o problema para um pato de borracha, decrevendo o código linha a linha. A ideia é que, ao explicar o problema em detalhes para o pato, você consiga identificar a raiz do problema e encontrar uma solução, pois este processo ajuda a organizar os pensamentos e a ter uma visão mais clara.

Dicas extras

Exercite-se antes de estudar

Exercitar-se antes de estudar pode ter várias vantagens [12], tanto para a saúde física quanto mental. Algumas dessas vantagens incluem:

Aumento da energia: O exercício ajuda a liberar endorfinas, que são substâncias químicas responsáveis por aumentar a sensação de bem-estar e aumentar a energia. Isso pode ajudar a mantê-lo alerta e concentrado durante o estudo.
Melhora da memória: O exercício físico ajuda a estimular a circulação sanguínea e a oxigenação do cérebro, o que pode melhorar a capacidade de retenção de informações e aumentar a memória.
Redução do estresse: O estresse pode ser um grande obstáculo para o foco e a formação da memória (graças ao hormônio cortisol), realizar exercícios físicos pode ajudar a reduzir o estresse e a ansiedade, e melhorar o bem-estar geral e a concentração.
Aumento da autoestima: O exercício físico pode ajudar a aumentar a autoestima e a confiança, o que pode ter um impacto positivo na motivação e na concentração durante o estudo.
Melhora da qualidade do sono: O exercício físico regular pode ajudar a melhorar a qualidade do sono, o que é fundamental para uma boa saúde mental e física e para um melhor desempenho acadêmico.

Tenha um grupo de estudos

Ter um grupo de estudos no trabalho pode trazer muitas vantagens tanto para os indivíduos quanto para a equipe e a organização como um todo. Algumas dessas vantagens incluem:

Aprendizado compartilhado: Um grupo de estudos permite que os membros da equipe compartilhem seus conhecimentos e habilidades, o que pode ajudar a preencher lacunas no entendimento e aumentar a compreensão do assunto.
Melhoria da colaboração: Estudar em grupo pode ajudar a construir relações de trabalho mais fortes e melhorar a colaboração entre os membros da equipe.
Desenvolvimento profissional: Participar de um grupo de estudos no trabalho pode ajudar os membros da equipe a desenvolver habilidades e conhecimentos importantes para seu crescimento profissional.
Solução de problemas: Discutir questões e fazer perguntas em um grupo de estudos pode ajudar a encontrar soluções para problemas complexos e aumentar a eficiência na resolução de tarefas.
Inovação: O compartilhamento de conhecimentos e perspectivas diferentes em um grupo de estudos pode levar a novas ideias e inovações que podem ser aplicadas no trabalho.

Tente manter o grupo com não mais do que oito pessoas, pois grupos menores permitem que todos participem ativamente.

Não tenha medo de errar

Nosso cérebro não foi feito para simplesmente absorver conteúdo passivamente e armazená-lo em nossa memória. Devemos praticar para consolidar este conhecimento.

Durante a prática, você irá cometer erros, ficará confuso e/ou frustrado. Tome um tempo para analisar o erro e tentar entendê-lo, procurar erros semelhantes que você já tenha resolvido pode te ajudar a seguir em frente.

Costumamos ver o fracasso como algo extremamente negativo, algo a ser evitado a qualquer custo. Não tenha medo ou vergonha de dizer "Eu não sei".

Acertar na primeira vez não é importante; o importante é acertar na última vez. [13]

Tenha um ambiente onde seja seguro testar, sem se preocupar com o resultado. Se no trabalho você não tiver um ambiente de teste que possa quebrar, teste em um projeto pessoal.

Outra forma de reduzir o medo de errar é poder reverter suas alterações para um estado anterior, e o Git é ótimo para isso (caso não saiba o que é Git vale a pena dar uma olhada neste artigo O que é controle de versão? [14]). Testes automatizados [15] também podem aumentar sua confiança na hora de realizar uma alteração, pois ajudam a garantir que tudo continuará funcionando como o esperado.

Conclusão

Como dito no início deste artigo, a área de TI está em constante evolução (enquanto você lê esse artigo, um novo framework já deve ter sido lançado). Com tanta informação disponível, é normal nos sentirmos meio perdidos de vez em quando.

Espero que com as dicas desse artigo você consiga se manter motivado nos estudos. Não tenha pressa, vá no seu ritmo e lembre-se:

Críticas e sugestões são bem-vindas, caso queira compartilhar alguma dica que não foi citada, deixe nos comentários. :)

Referências

[1] Pensamento e Aprendizado Pragmático: Refatore seu cérebro - Capítulo 1 - Andy Hunt

[2] Pensamento e Aprendizado Pragmático: Refatore seu cérebro - Seção 6.3 - Andy Hunt

[3] Tipos de aprendizagem

[4] Memória de trabalho

[5] Prática Distribuída

[6] Técnica Pomodoro

[7] Método SQ3R

[8] Curva do esquecimento de Ebbinghaus

[9] SRE - Sistema de Repetição Espaçada

[10] O que é Mapa Mental?

[11] Debug com Pato de Borracha

[12] 5 Study Hacks Proven By Science - College Raptor Blog

[13] Pensamento e Aprendizado Pragmático: Refatore seu cérebro - Seção 7.3 - Andy Hunt

[14] O que é controle de versão?

[15] Entenda de uma vez por todas o que são testes unitários, para que servem e como fazê-los

Imagens

[1] Imagem de mulher com livro no rosto

[2] Timer em formato de tomate

[3] Curva do esquecimento de Ebbinghaus

[4] Imagem de exemplo de um mapa mental

[5] A post shared by Mariana Andrello (@oimare)

[6] Guilherme Bandeira on Instagram: "🐌"

Mais algumas referências que podem ser úteis

The Pomodoro Technique - Why It Works & How To Do It

Técnica pomodoro - Wikipédia, a enciclopédia livre

Como aplicar o método SQ3R para estudar de forma mais efetiva e aprimorar o aprendizado (um exemplo prático)

As 5 etapas do método SQ3R para leitura

Curve of Forgetting | Campus Wellness

Um Resumo do Curso "Aprendendo a Aprender", de Barbara Oakley

TEDx - Learning how to learn - Barbara Oakley

Para quem se interessou pelo livro, esse artigo do @evertones comenta sobre alguns pontos que não foram abordados aqui (em inglês):
Book: Pragmatic Thinking and Learning

Mapas mentais: benefícios, como construir, dicas e modelos

Documentação oficial do Git

Forem: Felipe Murakami

Containers and Docker: Simplifying Software Development

Containers: The Foundation of Everything

Why use containers?

Docker: The Facilitator

Containers vs. Virtual Machines: What's the Difference?

When to use VMs:

When to use containers:

Open Container Initiative (OCI): Standardization for an Open Ecosystem

Why is the OCI important?

What does the OCI do?

Benefits of Using Containers and Docker

Conclusion

References

CSS: Learning box model with analogies

Introduction

The Box model's basic structure

Content

Padding

Border

Margin

The box-sizing property

content-box

Attention! ⚠️

border-box

Conclusion

Note ❗🚫

References

CSS: Aprendendo box model com analogias

Introdução

Estrutura básica do box model

Conteúdo (Content)

Preenchimento (Padding)

Borda (Border)

Margem (Margin)

A propriedade box-sizing

content-box

Atenção! ⚠️

border-box

Conclusão

Observação ❗🚫

Referências

Dicas de estudo para se manter atualizado em TI

Mas, afinal, o que é aprender?

Metas SMART

Específico

Mensurável

Atingível

Relevante

Temporal

Defini minhas metas, e agora?

Que tipo de aprendizagem é melhor para você?

Chega de enrolação, vamos à prática

Conclusão

Críticas e sugestões são bem-vindas, caso queira compartilhar alguma dica que não foi citada, deixe nos comentários. :)

The `box-sizing` property

A propriedade `box-sizing`