diff --git a/content/posts/16-livros-para-desenvolvedores-ler-em-2022.mdx b/content/posts/16-livros-para-desenvolvedores-ler-em-2022.mdx index 81fc5c0..0aa7696 100644 --- a/content/posts/16-livros-para-desenvolvedores-ler-em-2022.mdx +++ b/content/posts/16-livros-para-desenvolvedores-ler-em-2022.mdx @@ -93,7 +93,7 @@ Entender sobre algoritmos é uma das tarefas fundamentais para qualquer Dev, est * * * -[![](/media/posts/16-livros-para-desenvolvedores-ler-em-2022/extreme-programming.jpg)](https://amzn.to/35iXvEx) +[![Extreme Programming](/media/posts/16-livros-para-desenvolvedores-ler-em-2022/extreme-programming.jpg)](https://amzn.to/35iXvEx) ## Extreme Programming diff --git a/content/posts/como-criar-um-aplicativo-com-react-native-e-expo.mdx b/content/posts/como-criar-um-aplicativo-com-react-native-e-expo.mdx index e3a1a5c..c4b9d2a 100644 --- a/content/posts/como-criar-um-aplicativo-com-react-native-e-expo.mdx +++ b/content/posts/como-criar-um-aplicativo-com-react-native-e-expo.mdx @@ -149,7 +149,7 @@ Após executar o comando você precisa escolher o template que deseja aplicar no
-![](/media/posts/como-criar-um-aplicativo-com-react-native-e-expo/image.png) +![Seleção de template do expo init, com blank (TypeScript) marcado](/media/posts/como-criar-um-aplicativo-com-react-native-e-expo/image.png)
@@ -181,7 +181,7 @@ Para avançar em nossa demo, **escolha a opção blank (TypeScript)**. Após finalizar a execução do script você deve ver uma tela como esta: -![](/media/posts/como-criar-um-aplicativo-com-react-native-e-expo/image-1.png) +![Terminal do expo init com o projeto pronto e os comandos yarn](/media/posts/como-criar-um-aplicativo-com-react-native-e-expo/image-1.png) Agora para abrir o projeto, vamos seguir as instruções, execute `cd app-exemplo` e depois o comando `yarn start`. Você deve ver um resumo da sua aplicação em execução, um qr-code e uma lista de comandos úteis. @@ -224,7 +224,7 @@ Para abrir a pasta no VSCode via terminal, digite: `code .` A estrutura deste template do Expo deve se parecer com esta imagem: -![](/media/posts/como-criar-um-aplicativo-com-react-native-e-expo/image-3-1024x777.png) +![Explorer do VS Code com a estrutura do projeto app-exemplo](/media/posts/como-criar-um-aplicativo-com-react-native-e-expo/image-3-1024x777.png) O arquivo **App.tsx** é o ponto de inicio do seu aplicativo. Para teste, altere o texto que veio junto com este template e inicie novamente o expo no seu terminal. diff --git a/content/posts/como-enviar-sms-em-nodejs-com-sns-aws.mdx b/content/posts/como-enviar-sms-em-nodejs-com-sns-aws.mdx index f19f94e..2af8caa 100644 --- a/content/posts/como-enviar-sms-em-nodejs-com-sns-aws.mdx +++ b/content/posts/como-enviar-sms-em-nodejs-com-sns-aws.mdx @@ -272,7 +272,7 @@ Agora vamos finalizar, adicione o script para start da sua app no package.json. Agora é só digitar **npm start** no seu terminal e ver sua app rodar. -![](/media/posts/como-enviar-sms-em-nodejs-com-sns-aws/giphy.gif) +![](/media/posts/como-enviar-sms-em-nodejs-com-sns-aws/giphy.webp) Este tutorial é um micro-serviço para rodar em qualquer ambiente nodejs. Você precisa apenas adicionar itens na fila de envio e deixar em execução. Embora este script apenas envie uma mensagem transacional, você pode customizar. Confira a documentação na AWS e adapte a sua necessidade. diff --git a/content/posts/como-usar-pm2-com-node-js-em-producao.mdx b/content/posts/como-usar-pm2-com-node-js-em-producao.mdx index 07fef81..ce844f6 100644 --- a/content/posts/como-usar-pm2-com-node-js-em-producao.mdx +++ b/content/posts/como-usar-pm2-com-node-js-em-producao.mdx @@ -136,7 +136,7 @@ pm2 start app.js --watch Agora, a saída no terminal deve ser como está imagem, com o modo Watching **_enabled_**. -![](/media/posts/como-usar-pm2-com-node-js-em-producao/pm2-output-start-w-1024x98.png) +![Tabela do PM2 com o processo app online e watching enabled](/media/posts/como-usar-pm2-com-node-js-em-producao/pm2-output-start-w-1024x98.png) Vamos adicionar uma nova rota no código para testar se está funcionando como esperado. @@ -168,7 +168,7 @@ Você deve ver duas linhas com a mensagem: App listening on port 3000! Inclusive, quando algum erro acontecer na aplicação, você poderá inspecionar a mensagem que sair no terminal com este comando, a baixo um exemplo de mensagem, forcei um erro na rota /timestamp e instantes depois o PM2 reiniciou o processo. -![](/media/posts/como-usar-pm2-com-node-js-em-producao/pm2-output-logs-1024x389.png) +![Logs do PM2 com um RangeError e App listening on port 3000](/media/posts/como-usar-pm2-com-node-js-em-producao/pm2-output-logs-1024x389.png) Caso você tenha muitas linhas sendo retornadas, você pode limitar a quantidade de linhas usando a propriedade --lines , ficando assim: @@ -210,7 +210,7 @@ pm2 start app02.js --watch --name app-02 A partir de agora você deverá ter dois processos em execução como nesta imagem: -![](/media/posts/como-usar-pm2-com-node-js-em-producao/pm2-output-logs-2process-1024x113.png) +![Tabela do PM2 com app-01 e app-02 online em modo fork](/media/posts/como-usar-pm2-com-node-js-em-producao/pm2-output-logs-2process-1024x113.png) Algo que também pode ser útil para limitar o consumo de memória de um processo é atribuir um limite de uso, com o PM2 é possível definir o máximo de memória que o processo pode usar do servidor, quando este limite é atingido, o processo é reiniciado. @@ -258,7 +258,7 @@ Você pode especificar a quantidade de CPUs que o processo vai usar ou
-![](/media/posts/como-usar-pm2-com-node-js-em-producao/pm2-output-start-cluster-1024x154.png) +![Tabela do PM2 com quatro instâncias de app-01 em modo cluster](/media/posts/como-usar-pm2-com-node-js-em-producao/pm2-output-start-cluster-1024x154.png)
diff --git a/content/posts/construindo-um-web-scraping-em-nodejs.mdx b/content/posts/construindo-um-web-scraping-em-nodejs.mdx index 4ac15fe..90af2b2 100644 --- a/content/posts/construindo-um-web-scraping-em-nodejs.mdx +++ b/content/posts/construindo-um-web-scraping-em-nodejs.mdx @@ -350,7 +350,7 @@ Uma vez adicionada a base do nosso método com html carregado, veja que estou pa Uma dica para identificar o seletor correto é usar o modo Inspect do Google Chrome, com ele aberto você pode copiar o seletor ao inspecionar o html: -![](/media/posts/construindo-um-web-scraping-em-nodejs/tutorial-web-scraper-inspecionar-elemento-300x174.png) +![Inspecionar elemento no Chrome com Copy selector no card do produto](/media/posts/construindo-um-web-scraping-em-nodejs/tutorial-web-scraper-inspecionar-elemento-300x174.png) Descobrimos que o **li** contém algumas classes e está dentro do **ul** com identificador **searchResults**. Com isso podemos iterar na lista. Veja que o seletor ideal é: @@ -440,7 +440,7 @@ Por fim, adicione o script start no seu package.json. Agora basta digitar **npm start** no seu terminal para a mágica acontecer. -![](/media/posts/construindo-um-web-scraping-em-nodejs/magic.gif) +![](/media/posts/construindo-um-web-scraping-em-nodejs/magic.webp) Este meu exemplo é básico,  ainda é possível melhorar os tratamentos de erros, otimizar as funções e usar outras bibliotecas. Puppeteer ou PhantomJS são outras opções, caso você queira aprender mais. diff --git a/content/posts/css-flexbox-guia-pratico.mdx b/content/posts/css-flexbox-guia-pratico.mdx index d337b15..c8a2546 100644 --- a/content/posts/css-flexbox-guia-pratico.mdx +++ b/content/posts/css-flexbox-guia-pratico.mdx @@ -31,7 +31,7 @@ Vamos dar uma analisada nestas imagens:
-![](/media/posts/css-flexbox-guia-pratico/01-container.svg) +![Diagrama do contêiner flexível em roxo com três caixas dentro](/media/posts/css-flexbox-guia-pratico/01-container.svg)
@@ -43,7 +43,7 @@ Container em Roxo
-![](/media/posts/css-flexbox-guia-pratico/02-items.svg) +![Diagrama dos flex items, três caixas laranja marcadas como item](/media/posts/css-flexbox-guia-pratico/02-items.svg)
diff --git a/content/posts/postgresql-e-pgadmin-com-docker-compose.mdx b/content/posts/postgresql-e-pgadmin-com-docker-compose.mdx index bd2dc68..d88b3c5 100644 --- a/content/posts/postgresql-e-pgadmin-com-docker-compose.mdx +++ b/content/posts/postgresql-e-pgadmin-com-docker-compose.mdx @@ -27,7 +27,7 @@ docker --version O resultado esperado é a versão do Docker instalado, semelhante a este print: -![](/media/posts/postgresql-e-pgadmin-com-docker-compose/docker-version-300x65.png) +![Terminal com docker --version e a versão 24.0.2](/media/posts/postgresql-e-pgadmin-com-docker-compose/docker-version-300x65.png) A segunda etapa é criar uma rede para nossos Containers, geralmente gosto de adotar essa estratégia para manter os containers de um projeto, dentro de uma rede especifica para ele, rode o seguinte comando: @@ -37,7 +37,7 @@ docker network create local-network Após executar o comando, você deve ver um ID alfanúmerico no terminal, semelhante a este: -![](/media/posts/postgresql-e-pgadmin-com-docker-compose/docker-network-created.png) +![Terminal com o ID da rede local-network recém-criada](/media/posts/postgresql-e-pgadmin-com-docker-compose/docker-network-created.png) ## Configurando o PostgreSQL com Docker @@ -80,7 +80,7 @@ Uma informação extra, caso você esteja usando um Macbook com M1 ou M2, recome Isto ajuda na compatibilidade da imagem Docker com o Apple Silicon, um problema que eu tive logo que comecei a trabalhar com os M2. -![](/media/posts/postgresql-e-pgadmin-com-docker-compose/docker-property-platform.png) +![Compose com platform linux/x86_64 no serviço dcs-postgres](/media/posts/postgresql-e-pgadmin-com-docker-compose/docker-property-platform.png) Agora com o serviço definido, podemos executar nosso Compose, no terminal execute: @@ -92,7 +92,7 @@ Após rodar o comando, o Docker vai fazer o download da imagem do PostgreSQL, in No final, você deve ver uma imagem semelhante a esta. -![](/media/posts/postgresql-e-pgadmin-com-docker-compose/docker-compose-postgres-started.png) +![Log do PostgreSQL 15.3 pronto para conexões na porta 5432](/media/posts/postgresql-e-pgadmin-com-docker-compose/docker-compose-postgres-started.png) Agora o que resta é testar a conexão. @@ -150,13 +150,13 @@ Agora para testar, pare o container atual (CTRL+C) no seu terminal e execute nov O resultado no seu terminal deve ser semelhante a este: -![](/media/posts/postgresql-e-pgadmin-com-docker-compose/pgadmin-container-runing.png) +![Containers dcs-postgres e dcs-pgadmin no ar, pgAdmin na porta 80](/media/posts/postgresql-e-pgadmin-com-docker-compose/pgadmin-container-runing.png) Para testar se o serviço do pgAdmin está funcionando acesse http://localhost:8080 no seu navegador, haverá uma tela de autenticação, você deverá informar o usuário e senha que defimos no Composer e se preferir você poderá trocar o idioma da aplicação. A tela deve ser semelhante a esta: -![](/media/posts/postgresql-e-pgadmin-com-docker-compose/pgadmin-ui-web-1024x421.png) +![Tela de login do pgAdmin com o e-mail user@localhost.com](/media/posts/postgresql-e-pgadmin-com-docker-compose/pgadmin-ui-web-1024x421.png) Autenticado, agora vamos adicionar nosso servidor e testar a conexão. @@ -180,19 +180,19 @@ Existem também outras configurações úteis, mas para este cenário, vamos con Após salvar, se você seguiu todas as etapas até aqui, o resultado é um Dashboard com as informações do banco de dados que você está conectado. -![](/media/posts/postgresql-e-pgadmin-com-docker-compose/pgadmin-database-connection-1024x390.png) +![Dashboard do pgAdmin conectado ao Server Projeto A](/media/posts/postgresql-e-pgadmin-com-docker-compose/pgadmin-database-connection-1024x390.png) Por fim, agora vamos criar nosso database, clique com botão direito em Bancos de dados -![](/media/posts/postgresql-e-pgadmin-com-docker-compose/pgadmin-new-database.png) +![Menu Criar Banco de dados no Object Explorer do pgAdmin](/media/posts/postgresql-e-pgadmin-com-docker-compose/pgadmin-new-database.png) Informe um nome para seu banco de dados e clique em Salvar para continuar. -![](/media/posts/postgresql-e-pgadmin-com-docker-compose/pgadmin-new-database-modal.png) +![Diálogo de criação do banco meu-db no pgAdmin](/media/posts/postgresql-e-pgadmin-com-docker-compose/pgadmin-new-database-modal.png) Finalizado, na aba Object Explorer, você deverá ver o seu novo banco de dados listado.   -![](/media/posts/postgresql-e-pgadmin-com-docker-compose/pgadmin-new-database-view.png) +![Object Explorer com o banco meu-db criado](/media/posts/postgresql-e-pgadmin-com-docker-compose/pgadmin-new-database-view.png) Pronto! Chegamos ao fim e agora você tem um ambiente com PostgreSQL e o pgAdmin web. diff --git a/content/posts/reactjs-para-iniciantes.mdx b/content/posts/reactjs-para-iniciantes.mdx index 23d2849..5646b7a 100644 --- a/content/posts/reactjs-para-iniciantes.mdx +++ b/content/posts/reactjs-para-iniciantes.mdx @@ -392,7 +392,7 @@ export function Card(props) { Visualmente o resultado é o mesmo, mas ao inspecionar o HTML, vamos notar a diferença: -![](/media/posts/reactjs-para-iniciantes/react-css-module-html-gerado.png) +![HTML gerado com a classe do CSS Module no elemento do card](/media/posts/reactjs-para-iniciantes/react-css-module-html-gerado.png) Esta classe **\_card\_1wwp0\_1** voi gerada durante a compilação do JavaScript. diff --git a/lib/content/migrated-posts.test.ts b/lib/content/migrated-posts.test.ts index db54d2d..1771085 100644 --- a/lib/content/migrated-posts.test.ts +++ b/lib/content/migrated-posts.test.ts @@ -60,6 +60,31 @@ function bodyMediaPaths(raw: string): string[] { ) } +const decorativeEmptyAlts = new Set([ + '/media/posts/como-enviar-sms-em-nodejs-com-sns-aws/giphy.webp', + '/media/posts/construindo-um-web-scraping-em-nodejs/magic.webp', +]) + +function bodyOutsideFences(raw: string): string { + const lines = matter(raw).content.split('\n') + const kept: string[] = [] + let inFence = false + for (const line of lines) { + if (line.startsWith('```')) { + inFence = !inFence + continue + } + if (!inFence) kept.push(line) + } + return kept.join('\n') +} + +function emptyAltPaths(raw: string): string[] { + return [...bodyOutsideFences(raw).matchAll(/!\[]\(([^)\s]+)/g)].map((match) => + normalizePublicPath(match[1] ?? ''), + ) +} + function citedPaths(raw: string): Set { const cited = new Set(bodyMediaPaths(raw)) const cover = coverPath(raw) @@ -136,3 +161,15 @@ test('posts do not reference wp-content', () => { ) expect(hits).toEqual([]) }) + +test('empty image alts are limited to decorative reactions', () => { + const unexpected: string[] = [] + for (const filename of postFiles()) { + for (const urlPath of emptyAltPaths(readPost(filename))) { + if (!decorativeEmptyAlts.has(urlPath)) { + unexpected.push(`${filename}: ${urlPath}`) + } + } + } + expect(unexpected).toEqual([]) +}) diff --git a/public/media/posts/como-enviar-sms-em-nodejs-com-sns-aws/giphy.gif b/public/media/posts/como-enviar-sms-em-nodejs-com-sns-aws/giphy.gif deleted file mode 100644 index a936505..0000000 Binary files a/public/media/posts/como-enviar-sms-em-nodejs-com-sns-aws/giphy.gif and /dev/null differ diff --git a/public/media/posts/como-enviar-sms-em-nodejs-com-sns-aws/giphy.webp b/public/media/posts/como-enviar-sms-em-nodejs-com-sns-aws/giphy.webp new file mode 100644 index 0000000..7710c3d Binary files /dev/null and b/public/media/posts/como-enviar-sms-em-nodejs-com-sns-aws/giphy.webp differ diff --git a/public/media/posts/construindo-um-web-scraping-em-nodejs/magic.gif b/public/media/posts/construindo-um-web-scraping-em-nodejs/magic.gif deleted file mode 100644 index 235c4ed..0000000 Binary files a/public/media/posts/construindo-um-web-scraping-em-nodejs/magic.gif and /dev/null differ diff --git a/public/media/posts/construindo-um-web-scraping-em-nodejs/magic.webp b/public/media/posts/construindo-um-web-scraping-em-nodejs/magic.webp new file mode 100644 index 0000000..e0891ba Binary files /dev/null and b/public/media/posts/construindo-um-web-scraping-em-nodejs/magic.webp differ