Desenvolvimento para a Web - freeCodeCamp.org

O que acontece quando você clica em um URL no seu navegador

Daniel Rosa — Fri, 22 Sep 2023 01:34:50 +0000

Artigo original: What happens when you click on a URL in your browser

Neste artigo, quero que meus leitores tenham uma ideia sobre um conceito básico do mundo da web. Anteriormente, escrevi artigos sobre coisas que importam no mercado de hoje, como a jornada do Angular, o básico sobre React, entre outros (textos em inglês). Hoje, porém, quero que meus leitores vejam o que ocorre quando eles clicam para acessar um URL.

O tópico é autoexplicativo – o que acontece quando clicamos em algum URL? – vamos começar!

Antes de discutir o que acontece quando clicamos em algum URL, devemos, de fato, saber o que é um URL e o que significam as diferentes partes do URL, certo? Vamos, então, entender mais sobre os URLs.

URL – Localizador de recursos uniforme

Se olharmos para o que significa a abreviação, temos outra questão autoexplicativa: é algo que tem o local do recurso que queremos acessar. É o endereço do local em que queremos ir para interagir com informações ou encontrá-las.

Vamos olhar para o seu dia a dia. Se você quiser visitar a casa do seu amigo para algum trabalho ou para obter informações, você precisa do endereço dele. A mesma coisa acontece aqui nesse grande mundo da web: temos que dar ao navegador um endereço do site que queremos acessar. O site é como a casa e o URL é o endereço.

Anatomia de um URL

Sabemos o que é o URL, mas ainda não sabemos sobre as partes de um URL. Vamos lá!

Veja este exemplo:

https://www.exemplo.com/pagina1

Aqui, a primeira parte é 'https'. Ela, basicamente, diz ao navegador qual protocolo ele deve usar. Pode ser http, https, ftp, entre outros. Um protocolo é um conjunto de regras que o navegador usa para comunicação pela rede. 'https' é basicamente uma versão segura, ou seja, as informações são trocadas de maneira segura.

A segunda parte, www.exemplo.com, é um nome de domínio. Você pode relacioná-la com a casa do seu amigo. É o endereço de um site. Nós o usamos para chegar ao servidor (computador treinado) que é responsável por fornecer as informações para esse site. Espere! Eu não mencionei um segundo atrás que URL é o endereço? Agora, eu também menciono que nome de domínio é o endereço. Você pode ter ficado confuso. Tente não ficar!

Diferença entre URL e nome de domínio

A principal diferença entre os dois é que o URL é um endereço completo. O URL informa sobre o método através do qual as informações devem ser trocadas, o caminho depois de chegar a esse site. Considere que o nome de domínio faz parte de um URL.

Vamos pegar nosso exemplo anterior para entender melhor. Você pode dizer que o endereço residencial do seu amigo é um nome de domínio, enquanto o URL não só diz o endereço da casa do amigo (nome de domínio), mas também como você vai se comunicar, como falar em uma sala em separado (segura) ou na frente de todos (onde as informações podem vazar). Ele também diz o caminho, ou seja, qual parte da casa você visitará depois de entrar na casa. Portanto, o nome de domínio faz parte do URL. Um nome de domínio com mais informações é um URL.

Espero que agora esteja claro para você o que é o URL. Vamos para a próxima parte.

Nome de domínio

Na parte anterior, expliquei sobre nomes de domínio, mas não em profundidade. Eu quero que você saiba um pouco mais sobre isso. Como eu disse, o nome de domínio é o endereço do site. Ele dá uma identidade única ao seu site em um mundo tão grande como o da web. Dois nomes de domínio não podem iguais, PORÉM – Sim! Existe um 'porém' – esta não é a única definição de um nome de domínio. Há outra coisa por trás disso. Vamos ver o que é essa coisa.

Como sabemos, quando chegamos a qualquer URL ou nome de domínio, esse site é aberto com seu conteúdo. Um servidor (um computador treinado) o serve. Também sabemos que cada computador tem um endereço IP que é usado para comunicação através da internet. É um endereço como o autoexplicativo 'endereço IP'. Quando chegamos a qualquer URL, estamos realmente chegando ao endereço IP do computador que é responsável por servir o conteúdo do site (hospedagem).

No entanto, agora, você pode pensar: que diabos... tudo é um endereço? Por que esse nome de domínio existe se o endereço IP está lá? Por que não podemos usar o endereço IP para obter o conteúdo do site?

Sim! Você pode usar endereços IP para obter o conteúdo do site, mas será que você seria capaz de lembrar o endereço IP associado a cada site? Obviamente que não! É difícil lembrar o endereço IP de cada site. É por isso que os nomes de domínio surgiram.

Você pode comparar isso à sua lista de contatos. Você não consegue se lembrar do número de cada pessoa, mas pode se lembrar do nome dela. O mesmo conceito se aplica aqui. Você não pode se lembrar desses endereços IP assustadores, mas pode facilmente se lembrar de nomes de domínio.

Essa enorme quantidade de dados é mantida em um banco de dados onde o nome de domínio com seu endereço IP é armazenado. Um sistema que armazena nomes de domínio com seu endereço IP correspondente é conhecido como DNS (Domain name system ou, em português, sistema de nomes de domínio). Acredito que você já deva ter ouvido falar sobre isso.

Já discutimos bastante o básico. Agora, aprofunde-se no processo do que acontece quando chegamos a qualquer URL.

Procura no DNS para encontrar endereços IP

Após chegar ao URL, a primeira coisa que precisa acontecer é resolver o endereço IP associado ao nome de domínio. O DNS ajuda a resolver isso. O DNS é como uma lista telefônica e nos ajuda a fornecer o endereço IP que está associado ao nome de domínio, assim como nossa lista telefônica fornece um número de telefone que está associado ao nome da pessoa.

Essa é a visão geral, mas há quatro camadas pelas quais essa consulta de nome de domínio passa. Vamos entender os passos:

1. Depois de clicar no URL, o cache do navegador é verificado, pois o navegador mantém seus registros DNS por algum tempo para os sites que você visitou anteriormente. Portanto, em primeiro lugar, a consulta DNS é executada aqui para encontrar o endereço IP associado ao nome de domínio.

2. O segundo lugar onde a consulta DNS é executada é no cache do sistema operacional, seguido pelo cache do roteador.

3. Se, nas etapas acima, uma consulta DNS não for resolvida, então é preciso a ajuda do servidor para resolver. O servidor de resolução nada mais é do que seu ISP (provedor de serviços de Internet). A consulta é enviada para o ISP onde a consulta DNS é executada no cache do ISP.

4. Se, na terceira etapa, nenhum resultado for encontrado, então são solicitados envios para o servidor superior ou raiz da hierarquia DNS. Lá nunca acontece de ele dizer que não há resultados encontrados. Na verdade, ele diz de onde essa informação pode ser obtida. Se você estiver pesquisando o endereço IP do domínio de nível superior (.com, .net, .gov, .org). Ele diz ao servidor resolvedor para pesquisar o servidor TLD (domínio de nível superior).

5. Agora, o servidor de resolução pede ao servidor TLD para fornecer o endereço IP do nosso nome de domínio. O TLD armazena informações de endereço do nome de domínio. Ele diz ao servidor de resolução para pedi-lo ao servidor de nomes autoritativos.

6. O servidor de nomes autoritativos é responsável por saber tudo sobre o nome de domínio. Finalmente, o resolvedor (ISP) obtém o endereço IP associado ao nome de domínio e o envia de volta ao navegador.

Depois de obter um endereço IP, o resolvedor o armazena em seu cache para que, da próxima vez, se a mesma consulta vier, ele não precise ir a todas essas etapas novamente. Agora, ele poderá fornecer o endereço IP a partir de seu cache.

Isso é tudo sobre as etapas que são seguidas para resolver o endereço IP que está associado ao nome de domínio. Dê uma olhada abaixo para entender melhor:

A conexão TCP inicia com o servidor pelo navegador

Uma vez que o endereço IP do computador (onde as informações do seu site estão) é encontrado, ele inicia a conexão com ele. Para se comunicar pela rede, o protocolo de internet é seguido. TCP/IP é o protocolo mais comum. Uma conexão é construída entre os dois usando um processo chamado 'TCP 3-way handshake' (em português, aperto de mão em três vias). Vamos entender o processo resumidamente:

1. Um computador client envia uma mensagem SYN para saber se o segundo computador está aberto a uma nova conexão ou não.

2. Em seguida, o outro computador, se estiver aberto a uma nova conexão, envia mensagem de confirmação, também com mensagem SYN.

3. Depois disso, o primeiro computador recebe sua mensagem e confirma enviando uma mensagem ACK.

Para entender melhor, veja o diagrama abaixo.

A comunicação inicia (processo de solicitação e resposta)

Finalmente, a conexão é construída entre o client e o servidor. Agora, os dois podem se comunicar e compartilhar informações. Após a conexão bem-sucedida, o navegador (client) envia uma solicitação para um servidor dizendo que quer receber esse conteúdo. O servidor sabe tudo em termos de qual resposta ele deve enviar para cada solicitação. Assim, o servidor responde. Essa resposta contém todas as informações que você solicitou, como a página da web, o código de status, o controle de cache e assim por diante. O navegador, então, renderiza o conteúdo que foi solicitado.

É isso! Todo o processo acima acontece quando clicamos em qualquer URL. Esse processo demorado, porém, leva menos que segundos para ser concluído. Essa é a resposta para a pergunta "o que acontece quando acessamos qualquer URL em um navegador?"

Agradecemos a leitura!

Deploy no Heroku – como colocar uma aplicação ou site da web em produção

Felipe Archanjo — Sun, 20 Aug 2023 21:00:00 +0000

Artigo original: Heroku Deploy – How to Push a Web App or Site to Production

Quando se trata de fazer o deploy (em português, implantação) de uma aplicação, geralmente existem duas opções: um VPS (servidor virtual privado) ou um PaaS (plataforma como serviço). Este artigo mostrará a você uma receita de como publicar uma aplicação em produção em um PaaS como o Heroku.

Nota da tradução: ao final de 2022, o Heroku encerrou o tier gratuito para implantação. Os planos mensais básicos por lá, no momento desta tradução, custam 5 dólares ao mês.

Passo 1 - criar o projeto

O primeiro passo é criar uma estrutura simples para o nosso projeto com alguns arquivos básicos. Para este artigo, vou criar um servidor de demonstração com NodeJS.

Em uma nova pasta, vou abrir um terminal e executar o comando npm init -y para criar um projeto. O servidor fictício será desenvolvido em Express. Assim, precisamos executar o comando npm install express para instalar esse módulo.

Assim que essa biblioteca estiver instalada, podemos criar um arquivo para o nosso projeto, chamado app.js. Dentro dele, escreveremos o código para o nosso servidor simples:

Versão RAW do projeto

Podemos iniciar a aplicação executando node app.js. Em seguida, podemos testá-la no seguinte URL http://localhost:3000. Neste ponto, você deve ver a mensagem Hello World no navegador.

Passo 2 - sistema de controle de versão

O próximo passo é escolher um sistema de controle de versão e colocar nosso código em uma plataforma de desenvolvimento em um repositório.

O sistema de controle de versão mais popular é o Git, juntamente com o Github como plataforma de desenvolvimento. É isso que usaremos aqui.

No GitHub, crie um repositório para sua aplicação, como mostrado abaixo:

Para enviar o seu código local para um repositório, você precisa executar os comandos listados no GitHub após clicar no botão Create repository:

Comandos para enviar nosso código para o repositório do Github

Importante: antes de fazer isso, precisamos ignorar alguns arquivos. Queremos enviar para o repositório apenas o código que escrevemos, sem as dependências (os módulos instalados).

Para isso, precisamos criar um arquivo .gitignore e, dentro dele, escrever o nome dos arquivos que queremos ignorar.

Estrutura de pastas e arquivo .gitignore

Agora, podemos escrever os comandos listados na imagem acima (aquela do GitHub).

Se você executou os comandos corretamente, eles estarão na página do seu repositório. Se você atualizar a página, deverá ver seus arquivos, exceto aqueles que você ignorou explicitamente, ou seja, os do diretório node_modules.

Passo 3 - vincular o repositório ao Heroku

Neste passo, podemos vincular o repositório do GitHub à nossa aplicação no Heroku.

Primeiro, crie uma aplicação no Heroku e siga os passos listados na plataforma.

Assim que a aplicação for criada, uma janela semelhante a esta deve aparecer:

Painel da aplicação

Agora, se você olhar para a navegação na parte superior, verá Overview, Resources, Deploy, Metrics e assim por diante. Certifique-se que Deploy esteja selecionado. Em seguida, na segunda linha, clique no ícone do GitHub.

Clique para conectar

Procure pela aplicação desejada, que, no nosso caso, é demo-deploy-app-09 . Em seguida, clique em Connect.

Branch da implantação (deploy)

Uma vez que a aplicação esteja conectada com sucesso à sua conta do Heroku, você pode clicar em Deploy Branch para implantar a sua aplicação.

Se desejar, você também pode selecionar a opção Enable Automatic Deploys, que buscará automaticamente o código do seu repositório do GitHub sempre que você fizer um push para esse repositório.

Assim que a aplicação for implantada, você pode clicar em View para abrir a sua aplicação.

Passo 4 - configurar o Heroku para executar corretamente a aplicação

Se você abrir a aplicação nesse momento, deverá ver algo parecido com isso:

Isso mesmo: um erro. Isso ocorre porque o Heroku não sabe como iniciar nossa aplicação.

Se você se lembra, executamos o comando node app.js para iniciar a aplicação localmente. O Heroku não tem como saber quais comandos precisa executar para iniciar a aplicação. É por isso que ele gerou um erro.

Para resolver esse problema, precisamos criar um arquivo chamado Procfile com o seguinte conteúdo: web: node ./app.js.

Para atualizar nossa aplicação, tudo o que precisamos fazer é enviar um novo commit para o GitHub. Se tivermos ativado a opção de Automatic Deploys, o código será automaticamente puxado para o Heroku. Caso contrário, precisamos clicar novamente Deploy Branch.

Assim que a aplicação for reconstruída, deveríamos vê-la funcionando assim:

Passo 5 - como adicionar um complemento

Um dos principais benefícios que o Heroku oferece é a facilidade de adicionar recursos na forma de complementos (add-ons) ao seu projeto. Esses recursos externos podem ser bancos de dados, ferramentas de registro e monitoramento, ferramentas de Integração e Entrega Contínua (CI/CD) ou ferramentas de teste.

Agora vamos ver como adicionar um novo recurso ao seu projeto. Primeiro, acessamos Resources (em português, recursos) e, a partir daí, adicionaremos uma nova ferramenta para testes.

Clique em Find more add-ons e, depois, procure por Loadmill.

O Loadmill é uma ferramenta de teste que é realmente ótima para testes de regressão e testes de carga.

Clique em Install…. Em seguida, escolha a aplicação que deseja vincular.

Neste passo, o Heroku criará automaticamente uma conta para você na plataforma fornecida.

Na guia de recursos, você pode ver o recurso que foi adicionado há pouco:

Se você acessar esse complemento, deverá ver o painel de controle com um tutorial de introdução e um teste de demonstração criado para você.

Painel do Loadmill

Conclusão

O Heroku permite que os desenvolvedores implantem rapidamente e quase sem esforço uma aplicação em um servidor web.

Ele também oferece uma variedade de plug-ins que você pode integrar à sua aplicação.

Uma solução PaaS sempre permitirá que você avance mais rapidamente do que uma solução com um VPS, onde você precisa configurar tudo desde o início.

Minha jornada para me tornar um desenvolvedor da web desde o início sem fazer a faculdade de Ciência da Computação (e o que eu aprendi)

Daniel Rosa — Mon, 10 Jul 2023 21:00:00 +0000

Artigo original: My journey to becoming a web developer from scratch without a CS degree (and what I learned from…

Escrito por: Sergei Garcia

Primeiro, eu gostaria de me apresentar. Meu nome é Sergei Garcia. Sou um desenvolvedor de front-end em tempo integral, com 2 anos de experiência. Nesse tempo, trabalhei como desenvolvedor de front-end para uma empresa de consultoria que está entre as 500 da Forbes e para uma pequena empresa.

Isso pode não parecer muita experiência, mas terminar meu segundo ano como desenvolvedor foi um grande marco para mim. Eu não tinha experiência real fazendo desenvolvimento para a web — e não tinha muita experiência em programação em geral, somente alguns treinamentos básicos em C# e Java que obtive de alguns cursos on-line. Também não era formado em Ciência da Computação. Na verdade, minha graduação foi em gerenciamento de projetos de TI.

Eu nunca escrevi sobre minha experiência, apesar de toda a ajuda que recebi de recursos maravilhosos como o Medium, o Stack Overflow e subreddits de programação do Reddit. Então, hoje, eu decidi mudar isso. Hoje, vou contar sobre o que deu certo e o que não deu certo. Se você estiver embarcando nessa jornada, espero que tenha mais sorte do que eu.

Sei que há muitos artigos como este, mas não são muitos os que discutem o processo com o benefício de dois anos de retrospectiva prática.

Vou começar com a minha jornada, incluindo o que deu errado ao longo do caminho. Se você só se importa com as minhas sugestões para o caminho mais curto possível para se tornar um desenvolvedor da web desde o início, fique à vontade para pular para a última seção: O caminho mais curto.

Então, sem mais delongas, vamos começar!

Noções básicas

Depois de decidir que queria entrar em desenvolvimento para a web, a primeira pergunta em minha mente foi "O que eu preciso aprender?" Depois de fazer algumas pesquisas, acabei traçando meu caminho de aprendizagem com base no que a maioria das posições de desenvolvedor para a web de nível básico pediam:

JavaScript
HTML e CSS
Pré-processadores de CSS (LESS e SASS)
Design responsivo
Angular
Padrões de design
Git
NodeJS
Automatizadores de tarefas (como o Grunt e o Gulp)

Veja como foi.

JavaScript

Comecei minha jornada aprendendo JavaScript através da CodeSchool (atual PluralSight, paga) e da Codecademy (gratuita). Se você não sabe sobre eles, eles são ótimos sites que permitem que você aprenda a programar usando apenas o seu navegador.

Nota da tradução: a opinião do autor do texto sobre a antiga CodeSchool é positiva. No entanto, ele demonstra, em partes do texto, não gostar das alternativas oferecidas pela PluralSight. Este artigo, porém, foi lançado antes de a Code School ter sido fechada e seus cursos terem sido movidos para a PluralSight. Caso tenha interesse em consultar os cursos da CodeSchool na PluralSight, é possível fazer esta busca aqui. Na tradução, buscamos atualizar os links sempre que possível.

Descobri que recursos de aprendizagem como esses eram os melhores quando você está apenas começando. Apenas saiba que esse método de aprendizagem fica cansativo rapidamente quando você entra em coisas mais avançadas, já que seus algoritmos para verificar se você resolveu o exemplo de código corretamente têm alguns problemas de precisão. Os dois cursos introdutórios ao JavaScript foram excelentes e eu recomendo os dois.

Assim que tirei o básico do caminho, comecei a obter uma base mais forte em JavaScript lendo o livro Eloquent JavaScript: A Modern Introduction to Programming (em inglês, gratuito – a segunda edição do livro tem uma tradução gratuita em português), de Marijn Haverbeke.

Esse livro foi recomendado para mim por muitas pessoas nos fóruns de JavaScript como uma leitura obrigatória, e por um bom motivo. Foi um livro difícil – especialmente se você está apenas aprendendo programação como eu estava naquela época – mas fico feliz por não ter desistido e continuado. Foi fenomenal devido ao vasto escopo de conceitos de programação que abrange, mesmo que, às vezes, fosse um pouco denso demais. Faça o que fizer, não pule os desafios de código. Depois de terminar esse livro, você poderá finalmente dizer com confiança que tem uma boa compreensão do JavaScript.

Você também pode, como opção, aprender jQuery (embora eu realmente não recomende aprendê-lo agora – mais sobre isso mais tarde). Você pode aprender sobre ele neste curso de jQuery (em inglês).

HTML e CSS

Depois de aprender JavaScript, passei a aprender os fundamentos de HTML, CSS e design para a web através deste caminho de aprendizagem de HTML e CSS. Esses cursos ainda são meus favoritos hoje, já que o ritmo é ótimo e o escopo geral do que cobrem me permitiu adquirir uma base mais forte.

Você também experimentar algo como o curso HTML e CSS da Codecademy e obter resultados semelhantes. Se estiver pronto para um desafio, o curso do Udacity de Introdução a HTML e CSS é muito mais completo e um pouco mais desafiador.

Bônus: se você puder colocar as mãos no livro HTML and CSS: Design and Build Websites, de Jon Duckett, ele também é um ponto de partida sólido para aprender HTML e CSS (com uma pitada de design para a web). Ele tem avaliações bem altas (4,7/5 na Amazon) e oferece uma introdução sólida ao mundo do desenvolvimento web. É um belo livro graças ao seu design limpo, com letras grandes e páginas coloridas. Eu frequentemente volto a esse livro só para admirá-lo.

Less/Sass

Para quem não conhece, Less e Sass são transpiladores de CSS que permitem escrever CSS de uma maneira mais elegante. Isso permite que você faça coisas que normalmente não são suportadas, como aninhar regras do CSS. Uma vez terminado, esses transpiladores de CSS "compilam" seu código e o convertem em CSS normal.

Existem 2 grandes transpiladores de CSS no momento: o Less e o Sass. O Sass é o mais popular, mas eu achei mais fácil aprender Less primeiro, principalmente porque usar o Sass em seu computador requer também instalar Ruby, algo que eu não gostava.

Você pode obter uma visão geral rápida, mas completa, do Less usando o Online Less Compiler, da WinLess, e seus exemplos de código para ver como seu código Less se transformaria em CSS. Você também pode experimentar o Sass on-line usando o SassMeister (embora ele não inclua exemplos de código).

Tanto faz se você aprender o Less ou o Sass primeiro. Eles são extremamente semelhantes. Então, uma vez que você conheça um, praticamente conhecerá o outro. Você pode encontrar uma ótima comparação rápida entre Less e Sass no artigo de Shelby Moulden, Comparison between LESS & SASS (em inglês).

Design responsivo

Eu aprendi originalmente sobre design responsivo e sobre o Bootstrap usando o caminho de HTML e CSS que citei acima, mas, recentemente, achei o curso da Udacity, feito pelo pessoal do Google, sobre o básico em design responsivo para a web fantástico. Ele cobre o básico e mais, de maneira muito mais completa.

Você pode fazer design responsivo sem qualquer estrutura adicional, mas é muito mais fácil com a ajuda de uma estrutura responsiva como o Bootstrap. A documentação oficial do Bootstrap é muito bem feita. Então, você não terá problemas em começar com ele.

Se você está tendo problemas para entender os princípios básicos, leia o post do blog da Froont sobre os 9 princípios básicos do design responsivo para a web (em inglês). Ele tem belas animações, limpas e simples, que ajudam a ilustrar visualmente os princípios do design responsivo para a web.

Angular

Eu realmente não sabia o que exatamente o Angular era naquela época, mas eu sabia que todo mundo estava falando sobre ele, e que, se eu quisesse me tornar um desenvolvedor para a web, eu precisava aprendê-lo. Descobri que o Design Decisions in AngularJS, da Google, dava a melhor visão geral do que era o AngularJS e sobre como ele melhorou a criação de aplicações para a web.

Primeiro, pensei em aprender AngularJS através de sua documentação oficial, mas isso acabou sendo uma péssima ideia. A documentação não era muito fácil para iniciantes, e a formatação desordenada dificultava a leitura e a compreensão.

Passei, então, a aprender AngularJS através da antiga CodeSchool (atual PluralSight). Com minha experiência positiva nos cursos de JavaScript e de CSS também de lá, eu esperava nada menos do que um ótimo curso. Eu estava errado. O curso foi um desastre desde o início, já que o algoritmo usado para verificar se você acertou o exemplo de código, às vezes, não funcionava direito e marcava sua solução claramente certa como incorreta. Houve até momentos em que tudo o que era necessário para consertar o sistema de validação quebrado era uma atualização de página. Quanto ao conteúdo do curso, também não foi dos melhores. Ele fez um trabalho mais ou menos em explicar os componentes básicos de uma aplicação em AngularJS, mas fez um péssimo trabalho em integrá-los em uma aplicação real. Acabei ficando com muito mais perguntas do que quando eu comecei.

Depois de algumas pesquisas em fóruns, descobri a Egghead.io (gratuita, mas com uma versão paga), onde tive muito melhor sorte. O material do curso era muito mais limpo, conciso e completo, proporcionando uma experiência muito melhor. Sem mencionar que, além de seus cursos, eles têm aulas de 2 a 5 minutos que cobrem tópicos importantes (por exemplo: o que é um controlador? O que é um filtro? O que é $scope?) Isso facilita muito a compreensão do básico. Eles também têm alguns vídeos que exigem pagamento, mas geralmente são os que cobrem tópicos de Angular mais avançados, que você não precisará até mais tarde. Fiz o curso AngularJS Fundamentals e fiquei totalmente satisfeito com os resultados (e também me tornei um grande fã dos cursos da Egghead.io no processo).

Padrões de design

Padrões de design são basicamente soluções de código reutilizáveis que podem ser repetidamente usadas para resolver problemas comuns de software. Ter uma base sobre eles tornará você um desenvolvedor de software muito mais competitivo em qualquer linguagem de programação. Isso também tornará mais fácil para você entender o código de outras pessoas, já que você identificará rapidamente qual padrão de design foi usado no código para entendê-lo melhor.

Descobri que as 2 melhores fontes para aprender isso são os cursos JavaScript Design Patterns, da doFactory, e Learning JavaScript Design Pattterns, de Addy Osmani. Achei o curso da doFactory muito mais fácil de entender, mas o livro de Addy Osmani era muito mais completo.

Ferramentas do desenvolvedor do Chrome

O Chrome traz as ferramentas mais poderosas para um desenvolvedor para a web. Quanto mais cedo você dominar as ferramentas do desenvolvedor, mais tempo você pode economizar mais tarde. O curso gratuito Explore and Master Chrome DevTools faz um ótimo trabalho em apresentá-los.

Git (Controle de versão)

Ah, o Git — a ferramenta de que eu nunca soube que precisava até descobrir o que ela poderia fazer. O Git basicamente permite que você acompanhe as alterações feitas no seu código para que, se as coisas derem errado, você possa reverter para um ponto anterior no tempo. Ele também permite que você veja o histórico do seu código.

Achei o curso gratuito do Github uma maneira amigável de se começar. O treinamento de Git da Atlassian foi fantástico, pois cobre os comandos mais avançados disponíveis. O roteiro de aprendizagem de Git da antiga CodeSchool (atual Pluralsight) também é ótimo em cobrir os fundamentos do Git.

NodeJS

Não demorou muito para eu aprender que ter uma compreensão básica de NodeJS me ajudaria muito na minha busca de me tornar um desenvolvedor para a web (mais sobre isso em breve).

Tentei os cursos da antiga CodeSchool no Node, mas achei que eles realmente careciam de conteúdo. Achei a NodeSchool.io muito melhor para o entendimento do básico, além de ser divertida! Amei a abordagem prática que ela oferecia, que era semelhante a da CodeSchool e da Codecademy — com o bônus de que eu estava realmente executando o NodeJS.

Automatizadores de tarefas (Grunt e Gulp)

O Grunt e o Gulp foram uma grande surpresa para mim, pois eu não tinha ideia de que ferramentas como essas existiam – mas estou extremamente feliz pelo fato de que elas existam! Basicamente, esses automatizadores de tarefas permitem automatizar tarefas comuns. Por exemplo, lembra do Less e do Sass? Normalmente, você teria que executar manualmente o compilador de CSS toda vez que você fizesse uma edição para que ele compilasse o CSS e, em seguida, atualizasse o navegador. Usando um automatizador de tarefas, você pode configurá-lo para observar seus arquivos Less/Sass em busca de alterações e, quando detectar uma alteração, compilar seu CSS e atualizar automaticamente o navegador. Isso é imensamente útil para reduzir seu tempo de desenvolvimento.

Existem 2 automatizadores de tarefas principais no momento: o Grunt e o Gulp. Embora eles façam exatamente a mesma coisa, eles funcionam de maneiras muito diferentes, com o Grunt sendo muito mais detalhado e orientado à configuração, enquanto o Gulp é mais rápido de escrever, dando preferência ao código em vez de a configuração.

Conhecer o NodeJS ajudará você a escrever arquivos do Grunt e do Gulp melhores, já que ambos são executados no NodeJS. Você pode escolher o que quiser, mas achei o Gulp muito mais fácil de aprender e escrever. Eu ainda hoje prefiro p Gulp por causa de sua abordagem minimalista – mas poderosa – baseada em pipes.

Achei que os cursos da Scotch.io sobre Grunt e Gulp estão entre os melhores que existem.

Desafios que enfrentei no meu primeiro emprego

Uma vez que eu cobri os fundamentos do desenvolvimento para a web, eu estava pronto para a minha primeira entrevista em desenvolvimento para uma posição de nível básico. Não vou entrar em detalhes sobre a entrevista, já que esse não é o foco principal deste artigo. Vou dizer, apenas, que me disseram que meu conhecimento relativamente forte de JavaScript me ajudou a garantir a posição. (Obrigado, Eloquent JavaScript!)

Devo dizer que fiquei bastante nervoso no meu primeiro projeto. Envolveu a criação de componentes reutilizáveis para a web com HTML, CSS e JavaScript, juntamente com Bootstrap, Sass e Grunt como ferramental. Os dois maiores erros que encontrei no início foram:

Medo do fracasso. Como eu era o novato, estava constantemente com medo de meu código estar errado ou malfeito. Então, passei muito tempo verificando tudo e aderi às melhores práticas de programação. Por causa disso, raramente tentei soluções criativas de novas maneiras por medo de que pudesse não funcionasse corretamente no final. Isso efetivamente diminuiu minha vontade de aprender coisas novas.
Fazer as coisas porque a pessoa "X" que sabe melhor do que eu disse isso. Fiz muito disso no início. Embora não esteja completamente errado fazer as coisas de uma certa maneira apenas porque o especialista "X" no assunto disse isso – sem tentar saber o porquê – me levou a não saber realmente quando as coisas foram feitas da maneira que foram. Logo, aprendi que havia exceções para tudo, e que você sempre deve tentar saber a razão por trás das melhores práticas.

Felizmente, tive um líder de equipe compreensivo durante meu primeiro projeto, que me ajudou a superar esses problemas. Ele constantemente me motivava a tentar coisas novas, mesmo que as coisas dessem errado às vezes. Ele também me disse para questionar tudo, até mesmo seus ensinamentos.

Com o tempo, aprendi a lição. A partir daí, sempre fui uma pessoa ansiosa para tentar coisas novas. Eu sempre tento entender por que as melhores práticas existem, quando elas estão certas e quando não se aplicam a uma situação.

Usar o AngularJS em um projeto real também representou um grande desafio para mim. Isso ocorreu principalmente porque muitas das coisas que eu fiz com ele, eu fiz sem entender totalmente por que aconteciam. Costumava pensar que era "a magia do Angular".

Houve muitas vezes em que eu gostaria de saber como o Angular realmente funcionava, mas me assustava simplesmente olhar para a documentação.

Acabei me deparando com um livro incrível chamado Build Your Own AngularJS. Eu não li todo ele, mas ler a seção sobre Escopos e sobre os Watchers (em português, algo como "observadores") e como eles funcionavam realmente revelou como a magia por trás do Angular não era, realmente, mágica. Era apenas uma maneira inteligente de manter a vinculação de dados usando verificaçãoe escopos aninhados. Eu recomendo esse livro para quem busca entender completamente o AngularJS.

O outro desafio que enfrentei um ano depois foi a rapidez com que o desenvolvimento para a web progrediu. Eu tinha acabado de dominar AngularJS e o Grunt. Estava me sentindo todo orgulhoso e poderoso – apenas para logo descobrir que Gulp e ReactJS estavam no horizonte. Um ano depois de aprendê-los, o Webpack começou a ganhar terreno – e eu tive que aprender isso também. Como você pode imaginar, uma grande parte de mim ficou bastante decepcionada com a rapidez com que alguns dos meus conhecimentos se tornaram obsoletos. Um colega de trabalho, porém, logo me esclareceu dizendo algo que mudou a forma como eu via bibliotecas e estruturas para sempre:

"Bibliotecas e frameworks podem se tornar obsoletos, mas os conceitos e soluções que propõem muitas vezes sobrevivem ao tempo."

Ele estava certo. O AngularJS pode ter se tornado obsoleto, mas entender completamente a magia por trás dele me ajudou a entender melhor a arquitetura de componentes da web do React, que era uma melhoria do conceito de diretivas do Angular. Também me ajudou a entender como o ReactJS ganhou tanta popularidade, bem como que tipo de futuro que eu poderia esperar.

Não me lembro de ter enfrentado outros grandes desafios em meus projetos subsequentes. O que vou dizer, no entanto, é que, ao longo dos 2 anos em que tenho trabalhado com desenvolvimento para a web, a coisa que mais ajudou a ter sucesso (de acordo com meus próprios colegas de trabalho) foi minha empolgação e minha motivação para estar sempre à procura de coisas novas para aprender. Logo descobri que essa era uma combinação vencedora no desenvolvimento para a web, já que as coisas por aqui mudam muito, muito rápido, com novos frameworks e bibliotecas surgindo constantemente.

Por outro lado, a outra coisa que me ajudou muito – e algo que descobri muito recentemente, na verdade – foi entender o que não aprender. Isso se tornou fundamental para o meu processo de me tornar um desenvolvedor para a web melhor.

Não é incomum ver pessoas criticando o ritmo anormalmente rápido de evolução das tecnologias da web, ou como uma nova biblioteca ou estrutura do JavaScript é lançada quase todos os dias. Com o tempo, porém, eu entendi:

Você não precisa aprender cada biblioteca ou estrutura nova.

Muitas vezes, é uma ótima ideia fazer um aplicação simples do tipo Hello World como exemplo para poder ver o que uma estrutura oferece. Então, você pode seguir em frente. Geralmente, porém, você deve tentar se concentrar no que melhor se adapta às necessidades do seu projeto. Isso pode ser difícil no início, mas, felizmente, existem ótimos, lugares como o Stack Overflow, o Medium e o Reddit, onde você pode encontrar discussões úteis sobre os frameworks e descobrir quais se encaixam melhor em seus casos de uso específicos.

Indo mais longe

Nos anos seguintes, passei a melhorar continuamente das seguintes maneiras:

Javascript

Depois de terminar o Eloquent JavaScript, é bastante fácil dizer e sentir que você domina JavaScript, mas então vem o You Don't Know JS e absolutamente destrói você (ou pelo menos fez isso comigo). Essa série de livros (gratuita por sinal) foi mencionada para mim várias vezes por alguns desenvolvedores sêniores no escritório como o livro para ler, e que só depois de lê-lo eu poderia dizer que sei totalmente JavaScript. Eles estavam certos, já que, página após página, ele continuamente me surpreendeu sobre a complexidade do JavaScript, bem como muitas, muitas armadilhas comuns que pessoas experientes e sem experiência, sem uma compreensão adequada do JavaScript, podem ter.

Ler essa série de livros realmente abriu minha mente. Também a recomendo para quem quiser se chamar um desenvolvedor especialista do JavaScript. Uma vez que você tirou isso do caminho, há 2 recursos extras que eu recomendo para obter um conhecimento de JavaScript ainda mais avançado:

JavaScript, The Better Parts: Uma palestra incrível de D. Crockford, que fala sobre os maiores pontos fracos do JavaScript, suas "Foot Guns", e como utilizá-las como seus pontos fortes.
The Two Pillars of JavaScript: um ótimo artigo do reconhecido autor Eric Elliott, que escreve artigos sobre JavaScript no Medium, que fala sobre os 2 grandes pilares do JavaScript: herança prototípica e programação funcional.

Depois de ter uma compreensão profunda de JavaScript, prossiga com o ECMASCript 2015 (também conhecido como ES6), o padrão do JavaScript mais recente e atual. O artigo da Smashing Magazine ECMAScript 6 (ES6): What's New In The Next Version Of JavaScript é uma ótima breve revisão do que há de novo no ES6. Você pode tentar ES6 no navegador usando o transpiler on-line do Babel.

CSS

O CSS pode ser uma bagunça e ficar desorganizado muito, muito rapidamente. Houve algumas metodologias diferentes propostas para escrever CSS mais limpo, mas duas delas se destacam. Recomendo que você leia sobre elas o mais rápido possível para se manter competitivo:

SMACSS: arquitetura escalável e modular para o CSS. Este é um guia flexível para o desenvolvimento de sites pequenos e grandes.
BEM: uma metodologia que ajuda você a obter componentes reutilizáveis e compartilhamento de código no front-end.

Eu, pessoalmente, prefiro o SMACSS por causa de seu visual mais limpo, mas algumas empresas e frameworks do CSS ainda usam o BEM. Então, vale a pena conhecer ambos.

Você também deve começar a se concentrar no desempenho do CSS. O artigo da Smashing Magazine, Managing Mobile Performance Optimization, e o artigo da HTML5 Rocks, High Performance Animation, fizeram um ótimo trabalho em fornecer uma vantagem inicial a respeito. Uma leitura rápida dos artigos deve dar a você uma base sólida.

Bundlers do JavaScript

Nesse momento, você já deve ter uma forte compreensão de Grunt ou Gulp. A próxima etapa é adicionar um bundler do JavaScript ao seu automatizador de tarefas, o que permitirá uma organização mais modular da sua aplicação em JavaScript.

Os melhores no momento são:

Browserify: permite que você solicite módulos no navegador, agrupando todas as suas dependências.
Webpack: basicamente, o Browserify versão avançada. Mais difícil de configurar e ajustar.

O minicurso Getting Started with Browserify da Scotch.io pode dar um pontapé inicial para o uso do Browserify, enquanto o artigo de David Fox Powell, Why Can’t Anyone Write a Simple Webpack Tutorial?, é uma ótima introdução ao Webpack, divertida de ler.

Pessoalmente, não passei muito tempo usando o Webpack, mas, no meu tempo com ele, tenho que dizer que tem sido incrível – mesmo que seja um pouco mais difícil de configurar. Se você está apenas começando, eu usaria o Browserify, já que é muito mais simples de configurar. Apenas esteja ciente de que o Webpack é o futuro, e que projetos maiores estão começando a usá-lo.

React

O React está rapidamente ganhando popularidade, e não parece estar desacelerando – a ponto de as pessoas perguntarem "O React está acabando com o Angular?"

O programa Learning React.js: Getting Started and Concepts, da Scotch.io, fornece uma visão geral sólida do React. Depois de tirar isso do caminho, continue com o curso React Fundamentals, da Egghead.io, onde você criará uma aplicação em React totalmente funcional e, em seguida, migrará para a sintaxe da ES6. Você pode acompanhar a documentação oficial do React, que é muito bem-feita e permitirá que você a domine completamente.

Como o React é apenas a visualização, é altamente recomendável que você aprenda Redux. A maioria dos cursos sobre Redux é um pouco complexa, na minha opinião, mas CSS Tricks Leveling Up with React: Redux consegue um ótimo equilíbrio entre simplicidade e ser informativo ao começar com Redux.

Você também já deve ter ouvido falar do Flux neste momento, mas se você está se perguntando por que você deve usar o Redux em vez do Flux, confira a pergunta no Stack Overflow sobre Por que usar o Redux em vez do Flux? que foi respondida pelo criador do Redux!

Relembrando meus erros e o que aprendi

Cometi muitos erros nos meus 2 anos de aprendizado de desenvolvimento para a web. No geral, acho que meu maior erro foi não dominar o básico antes de passar para bibliotecas e frameworks. Acho que isso se aplica a quase todas as linguagens de programação por aí, mas, na minha opinião, se aplica ainda mais ao JavaScript. Isso ocorre porque, em muitos aspectos, o JavaScript é uma linguagem quebrada e contém diversos "Foot Guns" (você já deve ter ouvido falar disso se você assistiu à palestra de D. Crockford, "JavaScript, The Better Parts", que mencionei anteriormente). Eles podem tornar a vida insuportavelmente difícil se você não os entender completamente.

Lembro-me de uma vez ter ficado preso em um problema do AngularJS com $scope que levei 3 dias para depurar, apenas para descobrir que não era nem mesmo um problema do AngularJS, mas um problema de JavaScript que eu mesmo causei por não entender como ele funciona.

Código limpo

É estranho que eu não veja isso ser falado com tanta frequência. Eu nem sempre me importei em escrever código limpo, mas honestamente é uma das coisas que mais me orgulho de ter aprendido. Isso porque todo mundo adora reclamar como seu último lugar teve uma das piores e mais feias bases de código do mundo. Então, por que ninguém pode falar sobre como o último lugar em que esteve foi maravilhoso? Como seu código acabou tão limpo e bem-feito que eles ficaram orgulhosos dele?

Essa é uma tendência que eu gostaria de mudar, e acredito que uma diferença pode ser feita se um número suficiente de pessoas pressionar por ela. Esforce-se para tornar os nomes de variáveis e funções compreensíveis, mesmo que você tenha que escrever um pouco mais. Não fazer isso só levará você a ter que documentá-lo manualmente em algum momento no futuro para torná-lo mais claro. Isso também fará com que sua base de código geral se torne mais difícil de entender por novos desenvolvedores e por você mesmo. Sim, você mesmo. Por que você mesmo? Porque se você não está aplicando código limpo, o que faz você pensar que seus colegas de trabalho devem aplicá-lo e escrever código limpo para você entender facilmente? É hora de dar o exemplo.

Se isso não for um incentivo bom o suficiente, as pessoas muitas vezes reconhecem e valorizam os escritores de código limpo. Você descobrirá que, escrevendo código limpo, seus colegas de trabalho e amigos gostarão ainda mais de trabalhar com você e, por sua vez, viverão uma vida mais feliz.

jQuery

Alguns de vocês podem notar que eu também não dei muita ênfase ao jQuery. Isso porque, na minha experiência, achei que o jQuery me fez mais mal do que bem no início. Alguns de vocês podem não concordar, mas deixe-me explicar: quando eu aprendi pela primeira vez, a ideia geral que eu tive era de que o jQuery estava em todos os lugares e que você poderia usá-lo para praticamente tudo. Por causa disso, eu me acostumei a usar o jQuery para praticamente qualquer coisa e, para qualquer problema que eu encontrasse, eu procurava uma solução para ele que usasse o jQuery.

Não me entenda mal, o jQuery foi incrível no meu tempo usando-o, tão incrível, na verdade, que eu ignorei cegamente que 90% do que eu fazia com o jQuery poderia ser feito nativamente em navegadores modernos em uma sintaxe igualmente fácil.

Agora, você pode estar pensando: "mas o que há de errado nisso? O jQuery não pesa tanto assim e, usando-o, você ainda acaba escrevendo menos código do que se fizesse as coisas nativamente." Certo, mas usar jQuery sobre APIs nativas não era o problema. O problema era que toda a minha maneira de pensar e todas as soluções para problemas comuns que eu conhecia até então exigiam que o jQuery funcionasse. Isso se tornou um grande problema quando recebi meu primeiro projeto e me disseram que o jQuery não era uma dependência.

Usar o jQuery me tornou inútil sem ele e me fez ignorar completamente os métodos e soluções nativas que sempre existiram. Isso também tornou todas as minhas soluções menos transportáveis, já que usá-las exigia jQuery.

Desde então, tenho me esforçado para não usar o jQuery, a menos que seja absolutamente necessário e realmente forneça uma grande melhoria na eficiência e legibilidade de nossa base de código (por exemplo, na manipulação pesada do DOM).

Mais uma vez, não me entenda mal, o jQuery é ótimo. Se, contudo, eu pudesse voltar no tempo e conhecer meu eu passado que estava apenas aprendendo desenvolvimento para a web, eu me aconselharia fortemente a não aprender tanto jQuery até ter aprendido a fazer as coisas sem ele. Se você está tendo problemas para fazer a mudança como eu fiz, confira You Might Not Need jQuery.

Cursos

Quanto ao material didático: embora muitos dos cursos da antiga CodeSchool tenham sido excelentes (o ramo de HTML e CSS foi especialmente fantástico), alguns de seus cursos sobre frameworks não eram tão interessantes assim (AngularJS, BackboneJS, etc.).

Também fiz muitos cursos da Pluralsight, que não mencionei. Depois de todo esse tempo, cheguei à conclusão de que escolher alguns dos caminhos de aprendizado deles é, em geral, uma má ideia e não confiável. Como seus cursos são feitos por professores que nem sempre (na minha opinião) são muito bons no ensino, descobri que a qualidade dos cursos deles flutua muito, já que seus padrões de qualidade de curso são inexistentes. Já tive cursos em que até a pessoa que dava o curso parecia que estava adormecendo. Eu, honestamente, não tenho tempo de atenção para continuar prestando atenção em um curso de 6 a 10 horas – e muitos deles duram esse tempo, se não mais.

Passei umas boas 80 a 100 horas de treinamento na Pluralsight e, honestamente, gostaria de resgatar uma boa parte desse tempo de volta. Não me entenda mal, há alguns cursos incríveis na Pluralsight, mas o foco deles na quantidade em vez da qualidade realmente me fez perder meu tempo. Eu poderia ter aprendido muito mais se tivesse feito cursos de fontes melhores, como a Egghead.io, onde eles valorizavam mais a qualidade do que a quantidade.

A única razão pela qual eu poderia pensar em alguém usando a PluralSight para outros cursos é para fazer um curso que nenhum outro site tenha em alguma tecnologia mais obscura (como Installshield, ou Xamarin), ou para fazer alguns cursos muito específicos que eles sabem que foram muito bem recebidos e revisados (como o Angular Fundamentals, de John Papa).

No geral, se você quiser usar a Pluralsight, certifique-se de que está fazendo cursos escolhidos a dedo por alguém que os fez primeiro e que são reconhecidos como de alta qualidade e úteis.

Eu também tentei recentemente o treinamento da Team Treehouse e tenho que dizer que estou impressionado com a qualidade dos cursos. O material didático é altamente extenso.

Depois de percorrer os caminhos de aprendizado de HTML, CSS e JavaScript de lá, vejo que você poderia facilmente adquirir a base de praticamente tudo. Não acredita? Basta olhar para as trilhas de aprendizado de lá e me dizer se não são incríveis. Claro, é um pouco caro, já que custam uns 30 dólares por mês, mas, na minha opinião, valem muito a pena. (Estou pagando por eles agora para aprender WordPress, já que preciso dele para um projeto freelance, e o material é ótimo).

Uma palavra sobre os cursos pagos

Senti a necessidade de falar sobre isso, pois notei o consenso geral de que você pode aprender programação sem pagar um centavo e ser tão competitivo quanto alguém que pagou por um curso. Embora seja verdade, não posso enfatizar o suficiente o valor que pagar pelo curso certo tem. Claro, muito do material mais valioso do curso sobre o qual escrevi é gratuito, mas muito dele também é pago. Isso ocorre principalmente porque, às vezes, você simplesmente não consegue superar ter alguém explicando cuidadosamente as coisas para você de uma maneira visual.

Sim, existem cursos pagos de aprendizagem terríveis que eu desaconselho, já que sua proposta de valor é questionável, mas outros, como a Egghead.io, a antiga CodeSchool e a Team Treehouse oferecem um ótimo valor por cada centavo investido, apesar de sua assinatura mensal relativamente cara (25 a 30 dólares por mês). Além disso, todos eles têm avaliações gratuitas de 7 a 15 dias para que você possa ver qual funciona melhor para você.

Se você jogar suas cartas corretamente, pagar 1-2 meses de qualquer uma delas pode facilmente render a você um conhecimento que você só obteria de outra forma depois de se deparar com inúmeros artigos e postagens de blog ao longo de um ano. Eles são honestamente muito bons.

Então, sim, eles não são necessários, mas, se você puder pagar pelo menos um mês, pode ter certeza que terá uma grande vantagem.

O segredo para o sucesso

Eu conheci vários desenvolvedores nos últimos 2 anos em que fui um desenvolvedor para a web. Ao longo da minha jornada, conheci alguns desenvolvedores que realmente se destacaram – desenvolvedores que estavam claramente em um patamar todo próprio, e que eu e muitos outros admiramos. Descobri que essas pessoas compartilhavam algumas características, que eu gostaria de compartilhar com vocês agora. Essas são, na minha opinião, o segredo para ser um desenvolvedor para a web de sucesso:

Ame o que faz. Esta é simplesmente a característica mais importante de todas. Se você não ama o que faz (seja estilizar em CSS ou programar em JavaScript), isso vai ficar claro no que você faz. Aqueles que são apaixonados pelo que fazem, muitas vezes, se destacam claramente da multidão.
Seja generoso e compartilhe seu conhecimento. É muito fácil querer manter em segredo aquele novo hack de CSS/JavaScript que você encontrou e que resolve os problemas do projeto, mas não faça isso. As pessoas que mais compartilham seu conhecimento costumam ser as mais valiosas, já que podem ser colocadas em qualquer tipo de equipe e melhorar sua qualidade por uma margem enorme.
Esteja sempre atento às novidades. A maioria dos desenvolvedores de sucesso que conheci compartilham essa característica comum. Seja lendo blogs, gastando muito tempo em discussões relacionadas à programação ou até mesmo falando sobre o que há de novo no desenvolvimento para a web durante os intervalos para o almoço. Estar à procura de coisas novas o tempo todo permite que os melhores desenvolvedores fiquem sempre à frente na corrida.

O caminho mais curto

Ufa, esse artigo demorou um pouco para terminar (6 horas e contando). Estamos quase terminando! Você deve estar se perguntando: "Ok, história legal, mas qual é o caminho mais rápido?" Assim sendo, aqui está.

Eu organizei isso da maneira que eu aceitaria se pudesse voltar e fazer as coisas direito. Eu também adicionei alguns bônus, que eu adoraria ter tido naquela época. Aproveite!

Bônus: recursos

Totalmente opcionais, mas alguns dos meus artigos e recursos favoritos que encontrei com o passar dos anos que, acredito, serão do seu agrado se estiver interessado no assunto específico.

Web Design in 4 minutes. Um tutorial muito criativo e original interactive que ensina o básico sobre design para a web.
Awwards. Procurando por inspiração para o design para a web? Os seus problemas acabaram.
Why Hiring is so hard in tech, de Eric Elliott. Aqui, Eric faz um trabalho incrível resumindo como é surpreendentemente difícil encontrar desenvolvedores ótimos e dá dicas de como se tornar um deles.
NoSQL database systems mega comparison, de Kristof Kovacs. Uma comparação incrível entre os sistemas de bancos de dados NoSQL mais populares: MongoDB, Redis, CouchDB, Cassandra, ElasticSearch e muito mais.
XSS Game. Bugs relacionados a cross-site scripting (XSS) são um dos tipos mais comuns e perigosos de vulnerabilidades nas aplicações para a web. Usando esse recurso sensacional, você pode aprender a encontrar e explorar os bugs de XSS, além de evitar que eles aconteçam em sua aplicação para a web.
How To Write Unmaintainable Code. Um artigo engraçadíssimo sobre como não escrever código limpo e de fácil manutenção.

Bônus: minhas ferramentas

Também achei que seria legal compartilhar algumas das ferramentas que descobri (umas bastante conhecidas; outras, nem tanto) que tornaram minha vida como desenvolvedor mais fácil.

Jetbrains Webstorm: IDE completo para o desenvolvimento para a web. (Meu editor favorito) É pago, mas oferece um ano de licença gratuita para estudantes.
Atom.io: Editor de texto altamente extensível, com recursos semelhantes aos de IDEs concorrentes, como o Webstorm. Gratuito.
Sublime Text: Editor de texto muito rápido, com suporte a plug-ins e muito bonito. (Normalmente, eu mantenho Webstorm/Atom instalados para o trabalho mais pesado e uso o Sublime Text para edições rápidas em arquivos.)
caniuse.com: Suporte aos navegadores é essencial para os sites da web. Esse é o recurso número 1 para descobrir quais recursos têm suporte em quais versões dos navegadores.
Cloud 9: Ambiente de desenvolvimento baseado em nuvem e IDE com suporte a Git que roda em Linux. Ótimo para programar remotamente e testar NodeJS ou outras coisas do lado do servidor sem precisar instalar nada em sua máquina.
CodePen, Plunker e JSFiddle: Ótimos playgrounds de front-end baseados em nuvem que permitem que você faça demonstrações rápidas de HTML/CSS/JS que você pode compartilhar ou trabalhar nelas mais tarde se criar uma conta gratuita. O CodePen é, muitas vezes, melhor para coisas relacionadas a CSS por causa de sua interface minimalista e infinidade de recursos relacionados a CSS, o Plunker para demonstrações do JavaScript por causa de seus poderosos recursos de JS e o JSFiddle para demonstrações em que você deseja colaborar com outras pessoas em tempo real, graças ao seu recurso de colaboração de compartilhamento de editor ao vivo.
Vanilla List: Um repositório de plug-ins e bibliotecas do JavaScript usando apenas JavaScript Vanilla (ou puro, o que significa que eles não exigem bibliotecas para funcionar, como o jQuery).
YouMightNotNeedjQuery: Provavelmente, não. Descubra você mesmo.
PublicAPIs: Já se perguntou quais APIs existem por aí? Este é um ótimo lugar para descobrir!
Gravit.io: Aplicativo de design baseado em nuvem rivalizando com o Adobe Illustrator. (Gratuito!) Útil para maquetes rápidas e design para a web.
Adobe Kuler: Webapp para ajudá-lo a criar combinações de cores harmoniosas para qualquer site. Também tem uma parte chamada "Explore", de paletas de cores criadas por outros designers, bem como um sistema de classificação para ajudar a inspirá-lo.
Name that color: Pare de gastar seu tempo descobrindo como nomear suas variáveis de cor em Less/Sass e apenas use o nome legítimo das cores com este webapp.

Conclusão

Eu só gostaria de dizer que realmente gostei de escrever isso. Fico muito feliz por finalmente ter sido capaz de dar algo de volta à comunidade de programação incrivelmente solidária em todos os lugares.

Como alguns de vocês já perceberam, este é o meu primeiro artigo, mas podem ter certeza de que pretendo escrever mais. Só não espere um por semana. Lembre-se: qualidade sobre quantidade!

Espero que este artigo tenha sido útil para vocês. Até a próxima vez! Um abraço!

Para os curiosos sobre o que o autor vem fazendo, acompanhe seu blog no Medium!

Aprende o sistema de grelha do Bootstrap 4 em 10 minutos

Afonso Branco — Mon, 15 May 2023 21:00:00 +0000

Artigo original: Learn the Bootstrap 4 Grid System in 10 Minutes

Escrito por: Elena-Cristina Conacel

Tradução em português europeu

O sistema de grelha do Bootstrap 4 é utilizado para layouts responsivos.

Um layout responsivo representa a forma como os elementos ficam alinhados numa página em resoluções diferentes. É importante compreender como utilizar o sistema de grelha (do inglês, grid system) antes de aprender qualquer outro componente do Bootstrap 4, porque, para qualquer elemento que utilizes, terás de colocá-lo algures no ecrã.

Vamos começar!

Crédito da imagem para Animade

Índice

A grelha do Bootstrap 4 consiste em recipientes (do inglês, containers), linhas e colunas. Vamos observar cada um e explicá-los.

Recipientes do Bootstrap 4

Um recipiente do Bootstrap 4 é um elemento com a classe .container. O recipiente é a raiz do sistema de grelha do Bootstrap 4 e é utilizado para controlar a largura do layout.

O recipiente do Bootstrap 4 contém todos os elementos na página. Isto quer dizer que a tua página deve ter a seguinte estrutura: primeiro o corpo da página HTML, dentro dele, deves adicionar um recipiente e todos os outros elementos dentro do recipiente.

...

A simples classe .container define a largura do layout com base na largura do ecrã. Esta posiciona o conteúdo no centro da página, alinhando-o horizontalmente. Existe espaçamento igual entre o recipiente do Bootstrap 4 e o limite esquerdo e direito da página.

O .container diminui gradualmente à medida que a largura do ecrã diminui e ocupa a largura toda em mobile. A largura do recipiente é definida dentro da biblioteca do Bootstrap 4 para todas as dimensões de ecrã. Podes ver os tamanhos exatos aqui.

Um recipiente de largura completa ocupa 100% da dimensão do ecrã, independentemente da largura do ecrã. Para utilizá-lo é necessário adicionares a classe .container-fluid.


  Hello! I am in a simple container.



  Hello! I am in a full-width container.

Podes observar o CodePen aqui.

Para ver as diferenças entre os dois tipos de recipientes, podes abrir o pen na tua consola e alternar entre dimensões de ecrã.

Linhas do Bootstrap 4

As linhas do Bootstrap 4 são cortes horizontais do ecrã. São utilizadas apenas como invólucros das colunas. Para utilizá-las, precisas da classe .row.

...

Aqui estão as coisas mais importantes para memorizares sobre as linhas do Bootstrap 4:

São utilizadas apenas para conter colunas. Se colocares outros elementos dentro da linha juntamente com colunas não irás obter o resultado esperado.
Têm de ser colocadas dentro de recipientes. Se não fizeres isto, irás obter um scroll horizontal na tua página. Isto acontece porque as linhas têm margens negativas à esquerda e de 15 à direita. O recipiente tem paddings de 15px. Por isso, ele neutraliza as margens.
As colunas têm de ser descendentes da linha. Caso contrário, não vão ficar alinhadas. As linhas e colunas são criadas para trabalhar em conjunto nesta hierarquia rigorosa.

Colunas do Bootstrap 4

Podemos agora avançar para a parte interessante deste tutorial, as colunas do Bootstrap 4. As colunas são óptimas! Ajudam-te a dividir o ecrã horizontalmente.

Se colocares apenas uma coluna na tua linha, esta irá ocupar toda a largura. Se adicionares duas colunas, cada uma delas irá ocupar 1/2 da largura. O mesmo acontece para qualquer número de colunas.

Podes ver este código no CodePen.

Observação: as colunas não estão coloridas. Apenas adicionei cores para uma descrição mais atrativa visualmente/de maneira a que tenham melhor aspeto.

Definir dimensões para colunas

Utilizar a classe .col define dinamicamente a largura para as colunas. Isto quer dizer que, dependendo do número de colunas numa linha, a largura da coluna será a largura do recipiente dividida pelo número de colunas.

Existe, porém, outra forma de definir colunas. Podes utilizar classes para colunas e definir o seu tamanho.

Desde o início, a grelha do Bootstrap 4 consiste em 12 colunas. Podes selecionar qualquer dimensão entre 1 e 12 para a tua coluna. Se quiseres 3 colunas iguais, podes utilizar .col-4 em cada uma (porque 3*4 colunas cada = 12). Como alternativa, podes definir dimensões diferentes para elas. Aqui estão alguns exemplos:

Podes ver este código no CodePen.

Se a soma das colunas na tua linha não resultar em 12, elas não vão ocupar toda a linha. Se a soma das colunas ultrapassar 12 então a coluna segue para a linha seguinte. A primeira linha irá exibir apenas os primeiros elementos cuja soma resulta em 12 ou menos.

Definir pontos de quebra para colunas

Se pegares no exemplo acima e o quiseres exibir em mobile, podes deparar-te com alguns problemas. Exibir cinco colunas em mobile vai tornar o conteúdo ilegível.

É aqui que entram em ação os componentes mais potentes do Bootstrap 4. De maneira a teres layouts diferentes em ecrãs de dimensões diferentes, não vais precisar de escrever media queries. Em vez disso, podes utilizar os pontos de quebra das colunas.

Um ponto de quebra é uma variável do Bootstrap 4 que representa a resolução de ecrã. Quando estás a especificar um ponto de quebra para uma classe, estás a indicar à classe para estar ativa apenas em resoluções que são pelo menos tão grandes como o número que o ponto de quebra armazena.

A classe mais simples que vamos aprender é a classe .col-[breakpoint]. Quando utilizas esta classe, estás a definir o comportamento para as colunas apenas quando são exibidas em dispositivos com um resolução de pelo menos o que está definido no ponto de quebra. Até ao ponto de quebra fornecido, as tuas colunas vão alinhar-se verticalmente desde o início. Após o teu ponto de quebra, estas vão alinhar-se horizontalmente por causa da classe.

O Bootstrap tem 4 pontos de quebra que podes utilizar:

.col-sm para telemóveis maiores (dispositivos com resoluções ≥ 576px);
.col-md para tablets (≥768px);
.col-lg para computadores portáteis (≥992px);
.col-xl para computadores (≥1200px)

Digamos que queres exibir duas colunas, uma após a outra verticalmente, em ecrãs pequenos e na mesma linha em ecrãs maiores. Terás de especificar o ponto de quebra onde as colunas ficam na mesma linha.

No nosso exemplo, vamos utilizar o ponto de quebra .col-lg e ver como as colunas ficam em ecrãs diferentes. Para resoluções que são menores do que o ponto de quebra fornecido (<992px), as colunas serão exibidas verticalmente. Isto significa que em dispositivos mobile e tablets, as colunas terão este aspeto:

Exibição para resoluções < 992px (dispositivos mobile).

Para dispositivos que têm uma resolução que é maior ou igual ao ponto de quebra (≥992px), as colunas ficam na mesma linha. Isto significa que, em portáteis e computadores vais obter este resultado:

Exibição para resoluções >= 992px (portáteis e ecrãs maiores).


 
   ...
 
 
    ...

Podes ver este código no CodePen. Se abrires o Codepen noutra janela e observares a página em resoluções diferentes, verás as colunas a alterar o seu posicionamento.

Se quisesses que as duas colunas ficassem na mesma linha a partir da dimensão de telemóveis maiores, poderias utilizar .col-sm, para tablets .col-md e para ecrãs extra largos .col-xl.

Definir dimensões e pontos de quebra para colunas

Podes combinar as dimensões e os pontos de quebra e utilizar apenas uma classe com o formato .col-[breakpoint]-[tamanho].

Por exemplo, se quiseres que três colunas de dimensões diferentes fiquem alinhadas numa linha com a resolução de um portátil, precisas de fazer isto:


  
    ...
  
  
    ...
  
  
    ...

Irás obter este resultado em resoluções <992px:

Para ecrãs que são ≥992px, o resultado será este:

De novo, podes ver este código no CodePen.

Se, porém, quiseres exibir uma coluna por linha em resoluções mobile mais pequenas, duas colunas por linha em tablets e quatro em portáteis ou dispositivos de maior resolução, o que podes fazer?

Adicionas várias classes para uma única coluna a descrever o comportamento em cada resolução. Ao utilizar várias classes, especificas que o conteúdo ocupará seis lugares em tablets e três em portáteis.


  
    ...
  
  
    ...
  
  
     ...     
  
  
     ...

O resultado será apresentado assim em tablets:

Em portáteis e resoluções maiores, terás este resultado:

Este exemplo também está disponível no CodePen.

Como exercício, podes tentar criar linhas com números diferentes de colunas, dependendo da dimensão do ecrã, e verificar o comportamento na consola do teu navegador.

Deslocar colunas

Se não quiseres que as colunas fiquem encostadas umas às outras, podes utilizar a classe .offset-[breakpoint]-[tamanho], juntamente com o .col-[breakpoint]-[tamanho].

Utilizar esta classe é como adicionar uma coluna vazia antes da tua coluna. Aqui está um simples exemplo:

Podes ver este código no CodePen.

Podes utilizar a classe em qualquer coluna da linha. Aqui estão mais alguns exemplos:

Colocar linhas dentro de colunas

Pode ser uma surpresa, mas podes adicionar uma linha dentro de uma coluna!

A linha em questão (que terá a largura da sua coluna pai) será, então, dividida em 12 colunas (mais pequenas) que podes referenciar através das classes .col-* .

Vamos observar o que acontece quando inserimos uma nova linha dentro de uma coluna:

Podes ver este código no CodePen.

Ao saber isto, podes aprofundar muito a organização da tua informação. As colunas vão fornecer uma maneira simples de poderes gerir o teu espaço.

Isto termina os conhecimentos básicos em relação ao sistema responsivo de grelha do Bootstrap 4.

Leitura adicional

Se tiveres mais algum tempo, aqui estão alguns recursos bastante úteis:

Documentação oficial do sistema de grelha (link em inglês), do GetBootstrap
Tutorial em vídeo (link em inglês), do Scrimba

Este artigo foi publicado inicialmente no blog BootstrapBay. Faz parte de uma grande série de tutoriais do Bootstrap 4 chamada 14 Days of Bootstrap 4 (14 Dias de Bootstrap 4, em inglês). Se desejares continuar a aprender sobre os componentes do Bootstrap 4, estes artigos são um bom sítio para começar.

Se quiseres alavancar o teu desenvolvimento com um template do Bootstrap, podes verificar o nosso marketplace.

Antes de te aprofundares, contudo, tira um momento para celebrar as tuas novas habilidades obtidas!

Crédito da imagem para Jonas Mosesson

Como se tornar um desenvolvedor e conseguir o seu primeiro emprego o quanto antes.

Barbara Reis Bayer — Mon, 17 Apr 2023 21:00:00 +0000

Artigo original: How to become a developer and get your first job as quickly as possible

Escrito por: Sam Williams

Você já pensou em se tornar um desenvolvedor de software ou está pensando em trocar de carreira? Este artigo dará a você um plano sólido para aprender desenvolvimento de software e conseguir seu primeiro emprego!

Por que ser um desenvolvedor?

Se você está considerando se tornar um desenvolvedor, mas não tem certeza se é uma boa ideia, aqui estão algumas coisas a se pensar:

Há uma demanda muito grande por desenvolvedores — no momento em que este artigo foi escrito, o site Indeed tinha 37.739 anúncios de emprego para 'desenvolvedor' no Reino Unido e 145.640 nos Estados Unidos. Esses números só aumentarão, já que o Departamento de Estatísticas de Trabalho dos Estados Unidos estima um aumento de 17% entre 2014 e 2024.
O trabalho pode ser muito variado e interessante — como desenvolvedor, você pode trabalhar em uma variedade de projetos, de sites da web de e-commerce a jogos de computador, de aplicações para dispositivos móveis à inteligência artificial. Quase todas as habilidades são transferíveis entre cada uma dessas áreas. Isso quer dizer que você não estará preso a um só emprego.
O trabalho pode ser bastante flexível — como a maior parte do seu trabalho é ler e escrever código, tudo o que você precisa é de um computador. Isso quer dizer que pode ser feito em qualquer lugar, a qualquer hora. Há um número crescente de desenvolvedores que trabalham remotamente em casa ou enquanto viajam ao redor do mundo.

Como se tornar um desenvolvedor

Ser um desenvolvedor requer muitas habilidades e há dois fatores importantes para se desenvolver uma habilidade: a prática eficaz e o apoio de desenvolvedores sênior. Você precisa maximizar ambos para que venha a se tornar o melhor desenvolvedor possível. Há três boas maneiras de se ter certeza de que você está em um caminho rápido para começar a sua carreira de desenvolvedor:

Bootcamps (cursos intensivos de programação)

Estes cursos são excelentes, pois são projetados para pegar alguém com pouca ou nenhuma experiência e torná-lo preparado para conseguir um emprego em três meses. Isso quer dizer muita prática efetiva e uma ajuda imensa dos desenvolvedores que coordenam o bootcamp.

Os problemas que você pode ter com bootcamps é que eles geralmente têm uma duração de três meses de ensino em tempo integral e podem custar de 4 a 20 mil dólares. Isso é muito dinheiro para desembolsar, especialmente se você não estiver recebendo durante esses três meses.

Achando um mentor

Esta é a situação perfeita: você começa a programar e tem um desenvolvedor como seu mentor e tutor. Pode ser algum amigo, um membro da família ou apenas um desenvolvedor que queira ajudar você. Você não terá tanta ajuda como em um bootcamp, mas ter alguém com quem se possa contar quando se encontra um obstáculo é muito útil. Além do mais, ter alguém que acompanhe você e que se certifique que você está dedicando o tempo necessário aos estudos pode ajudar você a se manter no caminho certo.

Isso tudo soa formidável, mas encontrar um mentor pode ser difícil. Nem todo mundo conhece alguém que trabalha como desenvolvedor e isso requer muito trabalho extra para o mentor. Se você conhece algum desenvolvedor, ele pode se recusar a ser seu mentor e você precisará respeitar isso.

Ter um mentor pode ser ótimo.

Conseguindo um trabalho como desenvolvedor

Isso pode parecer meio estranho, já que você precisa estar apto a programar antes de conseguir um emprego, mas explicarei mais tarde como chegar a esse ponto sem um mentor ou bootcamp. Quando você conseguir seu primeiro emprego, você poderá ter uma imensa vantagem — estará sendo pago para praticar programação enquanto trabalha com desenvolvedores sênior. O que mais você pode querer?

Trabalhar como um desenvolvedor também deixará você exposto a um lado do desenvolvimento que você não conhecerá nos estudos: o lado comercial. Essa é uma parte imensa do desenvolvimento, já que não há nenhuma razão em fazer um produto que ninguém quer e lidar com clientes é uma habilidade que leva tempo para se aprender.

Começando o planejamento

Como nem todo mundo pode custear um bootcamp ou conhece alguém para ser seu mentor, darei aqui um plano para conseguir seu primeiro emprego como desenvolvedor. Foi praticamente assim que eu fui de engenheiro a desenvolvedor em somente 4 meses (texto em inglês).

Encontrando um emprego

Para criar um bom plano você precisa ter um objetivo em mente. Nossa meta é conseguir um emprego o mais rápido possível, o quanto antes você conseguir seu primeiro emprego, mais rápido terá o estímulo de praticar a programação todos os dias tendo o apoio de desenvolvedores sênior e com o bônus de receber por isso.

Há muitas maneiras de se entrar no mundo do desenvolvimento, desde ciência de dados e inteligência artificial a desenvolvimento de jogos, mas o setor mais fácil para se entrar é o de desenvolvedor para a web. Se você estiver com outros planos no momento, lembre-se de que começar no desenvolvimento para a web não quer necessariamente dizer que você estará preso a isso para sempre. Você aprenderá muito e com isso poderá transferir esse conhecimento adquirido para o campo desejado.

Quando eu procurei por desenvolvedor para a web júnior, a primeira vaga de emprego que eu vi foi para desenvolvedor para a web júnior em front-end. Os requisitos eram os seguintes:

Podemos dar uma olhada em alguns anúncios de empregos similares e achar as exigências que aparecem mais frequentemente. Estas são os mais prováveis:

Conhecimento em front-end: HTML, CSS e JavaScript
Habilidade de criar sites responsivos para a web
Um portfólio demonstrando sua experiência e habilidades
Conhecimento em controle de versão

Outras habilidades bônus podem incluir:

Bibliotecas do JavaScript: jQuery, AJAX, Bootstrap
Conhecimento em depuração (do inglês, debugging)

Criando o plano

Agora que sabemos o que precisamos aprender para cumprir os requisitos, podemos criar um planejamento de como aprender o que precisamos para alcançar nossas metas. Tente seguir esse planejamento passo a passo, já que será muito mais fácil aprender o conteúdo mais avançado se você já souber os que vêm antes.

HTML e CSS

Esses são os blocos construtores da maioria dos sites da web hoje em dia. Você precisa desenvolver um bom entendimento deles se quiser ter uma chance de conseguir um emprego. Por sorte, há centenas de recursos pagos e gratuitos por aí que podem ajudar você a dominar essas competências.

O freeCodeCamp é um site que ensina a você tudo o que envolve o desenvolvimento para a web e é incrível. Ele dá o passo a passo através de pequenas aulas. Foi onde eu aprendi HTML, CSS, e JavaScript!

Começaremos com a certificação de Design Responsivo para Web e com o Básico de HTML e HTML5 e com o CSS Básico. Essas seções introduzirão você ao HTML e ao CSS. Até o final delas, você estará criando formas e estilizando HTML com variáveis em cascatas.

Uma imagem que você criará no CSS Básico: variáveis do CSS em cascata

Para aperfeiçoar nosso CSS, completaremos a nossa seção de design visual aplicado até podermos criar uma forma mais complexa usando o CSS e o HMTL. Depois, faremos todo o design responsivo para a web e a seção do CSS Flexbox. Estamos pulando alguns dos desafios e seções por agora, já que o nosso objetivo é aprender o que precisamos imediatamente. As outras seções são ótimas, mas não precisaremos delas no momento.

Agora que aprendemos a usar o HTML e o CSS para construir e estilizar uma página de web, teremos uma prática mais efetiva completando o design responsivo para a web. Esses projetos usarão tudo o que aprendemos até agora para construir cinco sites.

Controle de versão

O controle de versão é um sistema onde você salva arquivos para que possa vê-los novamente no futuro e perceber o que você alterou e em que momento. Isso provavelmente será usado em toda empresa de software em que você for trabalhar. Assim, ter esse conhecimento é muito importante.

Aprenda como instalar o Git, crie uma conta no GitHub e trabalhe com ambos. Há um tutorial ótimo em Uma Introdução ao Git e GitHub (em inglês). Você pode aprender os dois antes mesmo dos projetos de design do HTML e CSS e começar a usar o controle de versão desses projetos.

Quando souber como usar o controle de versão, tente fazer todos os seus projetos em um editor local (como o VS Code) e faça um upload deles para o CodePen quando terminá-los. Trabalhar em um editor local será exatamente o que você fará em um emprego. Isso, portanto, ajudará você a construir mais essa experiência.

Há muitas maneiras de se usar o Git/controle de versão, mas você quer saber como criar um repositório no GitHub, vinculá-lo a uma pasta local, incorporar os trabalhos que você fez e colocar tudo isso no GitHub. Uma vez que você possa fazer isso, será capaz de trabalhar de maneia efetiva e, assim, fazer realmente parte do time de desenvolvedores.

JavaScript

O JavaScript é a linguagem que alimenta 94.8% dos sites da web na internet. Isso representa muitos sites! O JavaScript permite mudar um site de estático para um completamente interativo.

Para aprender JavaScript, podemos fazer o certificação de algoritmos e estruturas de dados em JavaScript, no freeCodeCamp. Como o Javascript é uma parte tão grande dos sites modernos, completaremos toda a grade dessa certificação. Pode parecer muito trabalho, mas quando você trabalha como desenvolvedor para a web, passará a maior parte do tempo escrevendo em JavaScript. Assim, é importante que você realmente tenha capacidade de trabalhar com ele.

Construindo seu portfólio

Para mostrar do que você é capaz, você precisa ter um portfólio para mostrar aos seus possíveis empregadores. Felizmente, você já terá 10 projetos — 5 em HTML e CSS e 5 em JavaScript. Assegure-se de ter todos eles em controle de versão e transferidos para o GitHub para que outras pessoas (futuros empregadores) possam vê-los e saber do potencial do seu trabalho.

Agora, você poderá voltar ao site de portfólio que você construiu e atualizar com todos os seus projetos novos. Você também pode utilizar seus conhecimentos em JavaScript para adicionar interatividade à sua página. Pode ser uma descrição em pop-up quando o usuário passar sobre um de seus projetos, um slideshow de imagens ou até mesmo um minigame.

A procura de emprego

Se você fez tudo até agora, já deve cumprir os requisitos de muitos empregos para desenvolvedor para a web júnior. Esse é o momento de se candidatar a alguns empregos.

Para se candidatar a maioria dos empregos, você precisara de um currículo (CV). Ele deve destacar seus pontos fortes sem atrair atenção demais a quanto tempo você está programando ou ao fato de que você não tem nenhuma experiência comercial.

Aqui está o CV que eu usei para conseguir meu segundo emprego:

Saber a quais empregos você deve se candidatar também é importante. Isso pode parecer errado, mas você deveria se candidatar a empregos onde você consegue cumprir 80% (ou mais) dos requisitos. Você sempre pode salientar que, como um desenvolvedor autodidata, você provavelmente atingirá outras exigências mais rápido que os demais.

É claro que isso não quer dizer que você deva se candidatar a todo emprego em que você atenda aos requisitos. Apenas se candidate aos trabalhos que você considere interessantes e que você aceitaria se fossem oferecidos a você.

Usando os recrutadores

Os recrutadores podem ser ferramentas poderosas para conseguir seu primeiro emprego. Eles sabem o que a empresa quer, frequentemente têm empregos que não estão anunciados nos classificados e querem que você consiga o emprego... é assim que eles são pagos.

Para ter certeza de que seu CV estará nas mãos do maior número possível de recrutadores, precisaremos nos candidatar em vários sites. Comece com os sites maiores, como o Indeed e o Total Jobs, mas tente encontrar sites menores também.

Muitos desenvolvedores falam sobre o fato de recrutadores serem "terríveis", mas precisamos nos certificar de que podemos ter neles aliados. Sempre que você falar com um recrutador, assegure-se de ser educado e respeitoso. Se eles sondarem você sobre trabalhos que estão muito aquém do que você deseja, agradeça-os e recuse, mas lembre-os de que tipo de emprego você está procurando.

Meus dois primeiros empregos vieram de recrutadores perguntando sobre um emprego que não era adequado para mim, mas eles tinham outra oferta que era perfeita. Por isso, não seja tão duro com eles.

Continue se aprimorando

Você, provavelmente, não conseguirá uma entrevista e oferta de trabalho na primeira semana em que estiver se candidatando. Você pode não conseguir uma entrevista nem no primeiro mês, mas isso dará a você mais tempo para se aperfeiçoar.

Agora que alcançamos os requisitos básicos, podemos começar a adicionar mais itens interessantes de se ter no kit de ferramentas. Agora é a hora de acrescentar uma nova ferramenta na sua caixa. Incorporar mais habilidades às suas fará com que mais empregadores queiram você e, assim, aumentará suas chances de conseguir uma entrevista. Aqui estão alguns conhecimentos para se adquirir:

Aprenda uma biblioteca

Existem bibliotecas de JavaScript que podem facilitar muito a sua vida. Uma das bibliotecas mais populares é o jQuery, que ajuda com a manipulação do DOM, funções de objetos e de arrays e muito mais.

Eu recomendaria aprender a utilizar o jQuery porque é uma ótima introdução à utilização das bibliotecas em JavaScript. Há vários cursos e tutoriais para aprender jQuery, mas eu ainda prefiro o do freeCodeCamp.

Nota da tradução: no momento da tradução deste texto, outras bibliotecas foram adquirindo uma importância maior no mundo do desenvolvimento e, agora, conhecer bibliotecas como o React, o Vue ou o Angular serão de maior utilidade para você no desenvolvimento para a web.

Completando as aulas de HTML e CSS

Volte para as aulas de HTML e CSS do freeCodeCamp e complete o resto das lições em design visual aplicado, acessibilidade aplicada e CSS Grid.

Aprendendo como o JavaScript funciona

Saber usar o JavaScript é ótimo, mas entender como ele funciona pode ajudar você a se tornar um desenvolvedor muito melhor. Isso permitirá escrever o melhor código possível, já que você saberá o como e o porquê que esse código conserta o problema.

Para atingir esse conhecimento profundo de JavaScript, eu recomendo fortemente a série de livros "You Don't Know JS". Os primeiros dois livros são ótimos para compreender os princípios básicos do JavaScript. Entendê-los dará a você um excelente fundamento com o qual você poderá se tornar um desenvolvedor ainda melhor. Eles podem ser acessados ON-LINE e GRATUITAMENTE ou comprados no formato de capa dura.

Criando projetos

Outro jeito de aperfeiçoar suas habilidades é criando projetos. Eles podem ser qualquer coisa, mas seu objetivo é praticar usando as ferramentas com as quais você tenha menos experiência. Não é bom com arrays? Crie um aplicativo de lista de compras. Um pouco hesitante em estilização? Tente fazer uma cópia exata de algum site da web existente.

Esses projetos deverão aprimorar seus conhecimentos. Então, se for fácil demais ou muito complicado, pare e comece um projeto que se ajuste melhor ao seu nível.

Às vezes, ao criar um projeto, você talvez precise aprender uma habilidade completamente diferente. Aprender enquanto se faz pode ser um aprendizado excelente para algumas pessoas.

Entrevistas

Depois de se candidatar a diversos empregos e de continuar a aprimorar suas habilidades, esperamos que você seja convidado a uma entrevista. Essa é sua hora de brilhar. Há diversos artigos sobre como abordar o processo de entrevistas. Então, eu não examinarei muito a fundo os detalhes aqui, mas destacarei o que este artigo (em inglês) diz:

Conheça seu CV
Conheça a empresa
Pratique suas habilidades
Seja pontual, educado e confiante
Faça perguntas
Acompanhe o processo após a entrevista

Se você seguir todos esses conselhos, você terá uma boa chance de conseguir uma oferta de emprego. Mesmo que não consiga, certifique-se de pedir um feedback para poder usá-lo da melhor maneira na sua próxima entrevista.

Resumo

Se você quer se tornar um desenvolvedor, deve buscar um emprego de desenvolvedor para a web júnior o mais rápido possível para conseguir a experiência e o apoio de desenvolvedores sênior. Para conseguir esse tipo de emprego, você precisa:

aprender HTML, CSS e JavaScript
construir um portfólio de projetos menores

Uma vez que você tenha feito isso, você pode começar a se candidatar a vagas de emprego.

Então, prepare-se bem para as entrevistas e continue a adquirir novas habilidades enquanto espera por aquela oferta.

Obrigado por ler este guia para se tornar um desenvolvedor e para conseguir seu primeiro emprego. Se gostou dele, siga o autor no Medium para ver mais dicas e truques para desenvolvedores.

Como incorporar vídeo e áudio ao seu HTML

Marcos Adriano — Sun, 16 Apr 2023 21:00:00 +0000

Artigo original: How to embed video and audio in your HTML

Escrito por: Abhishek Jakhar

O HTML nos permite criar reprodutores de vídeo e áudio baseados em padrões que não requerem o uso de plug-ins. Adicionar vídeo e áudio a um site é quase sempre tão fácil quanto adicionar imagens ou formatar algum texto.

Existem duas formas diferentes de incluir elementos de vídeo. Discutiremos as duas abaixo.

Vídeo

A tag nos permite inserir arquivos de vídeo no HTML, bem similar ao modo como imagens são inseridas.

Os atributos que podemos inserir são:

src: este atributo representa a fonte, que é muito semelhante ao atributo src usado no elemento de imagem. Adicionaremos o link para um arquivo de vídeo nesse atributo.
type: este será video/mp4, pois .mp4 é o formato de vídeo que estamos usando. Também podemos usar diferente formatos de vídeo, como .ogg ou .webm. Nesse caso, o valor de type mudaria para video/ogg ou video/WebM, respectivamente.

Nota: alguns formatos de vídeo comuns são WebM, Ogg, MP4.

na página

Agora, temos esse vídeo na nossa página, mas tem um problema. Esse vídeo não está sendo reproduzido automaticamente e também não há controles para iniciar o vídeo. Temos que adicioná-los manualmente usando o atributo controls na nossa tag de vídeo.

Esse atributo não possui nenhum valor, porque é um atributo booleano. Isso significa que ele só pode ser true ou false.

Ter o atributo controls na nossa tag de vídeo significa que o valor dele será true e exibirá os controles de reprodução.

com o atributo Controls

Se removermos o atributo controls, também podemos fazer o vídeo ser reproduzido automaticamente usando o atributo autoplay. Esse também é um atributo booleano.

tag com o atributo autoplay (mas sem o atributo controls)

Como você pode ver, o vídeo está iniciando sozinho e não há controle. É verdade que não precisamos pressionar play para iniciar o vídeo, mas também não podemos pará-lo.

Também podemos ter controles e reprodução automática juntos.

tag com reprodução automática e atributo controls

Você pode fornecer atributos diferentes para o elemento de vídeo, dependendo do requisito.

Eu mencionei acima que existem duas formas diferentes de adicionar a tag vídeo. Vamos testar a outra forma.

Tag source

Anteriormente, usamos um elemento de vídeo com tag de fechamento automático, mas, aqui, fecharemos a tag de vídeo. Agora, temos uma tag de abertura e de fechamento.

Nos também removeremos os atributos type e source da tag video e os colocaremos em outra tag.

Tudo o que fizemos foi mover os atributos para o elemento source

Por que faríamos isso?

Bem, na maioria dos casos, com o vídeo, teremos várias fontes, já que precisamos fornecer diferentes tipos de arquivo, dependendo de qual navegador está visualizando seu vídeo, pois diferentes navegadores oferecem suporte a diferentes tipos de arquivo.

O vídeo ficará exatamente igual. Agora, no entanto, temos um suporte mais amplo dos navegadores.

Vídeo com suporte amplo de navegadores (sem atributos)

Se quisermos adicionar atributos como controls, autoplay, loop etc., adicionaremos a tag .

Vídeo com suporte mais amplo a navegadores e outros atributos

Elemento de áudio

A tag é bastante similar à tag video. Entretanto, a única principal diferença é que não há recursos visuais.

Podemos usar o elemento de áudio para iniciar um arquivo de vídeo na nossa página da web — como se fosse um arquivo mp3.

Agora, assim como a tag de vídeo, existem duas formas diferentes de se fazer isso.

Usar uma tag única representando o elemento inteiro.
Abrir e fechar tags com um elemento filho no meio.

Temos aqui uma tag de abertura e de fechamento. Então, adicionaremos o elemento source no meio.

A estrutura de pastas ficará assim:

|-- project    |-- audio      |-- sample.mp3      |-- sample.ogg    |-- css      |-- main.css      |-- normalize.css    index.html

O atributo controls não existe na tag no exemplo acima. O elemento não aparecerá no documento HTML.

Você pode ver que existem apenas algumas diferenças importantes aqui. O valor no atributo type mudou de "video/mp4" para “audio/mp3”. No atributo src, nós mudamos de um arquivo de vídeo com a extensão .mp4 para um arquivo de áudio com a extensão .mp3.

Assim como o elemento de vídeo, não poderemos realmente parar ou iniciar o áudio sem controles. Portanto, adicionaremos o atributo controls ao elemento de áudio.

Elemento de aúdio () com várias fontes para suporte mais amplo aos navegadores

Você também pode adicionar outros atributos à tag como autoplay, loop, etc.

Cobrimos aqui o essencial sobre os elementos video e audio no HTML.

Você pode ler mais sobre vídeo e áudio nos links abaixo:

Espero que você tenha achado este artigo informativo e útil. Obrigado pela leitura!

Como utilizar a repetição espaçada com o Anki para aprender a programar mais rapidamente

Jorge Felipe Ribeiro Portela — Tue, 11 Apr 2023 21:00:00 +0000

Artigo original: How to use spaced repetition with Anki to learn to code faster

Escrito por: Steven Gilbert

Imagine que você pode acelerar o seu aprendizado e melhorar a memorização nos fundamentos, técnicas e comandos de programação.

Hoje, mostrarei a você como fazer isso, utilizando a repetição espaçada e uma ferramenta gratuita de código aberto chamada Anki.

Muito atestam os benefícios da repetição espaçada:

O campeão do jogo Jeopardy!, Robert Craig, afirma que ele deve parte do seu sucesso a utilizar o Anki para memorizar curiosidades.
O perfil Googley as Heck, que estudou em tempo integral por 8 meses para uma entrevista para o Google (texto em inglês), diz que "Repetição espaçada é a chave para a memorização... Você se tornará um expert ao revisitar e revisar ao longo do tempo. Se fizer isso, chegará em um ponto onde não esquecerá dos detalhes."
Derek Sivers, fundador do CDBaby, escreveu (texto em inglês) que a repetição espaçada é "a técnica de programação mais útil que encontrei em 14 anos de programação de computadores."

Para mim, pessoalmente, o Anki tem sido uma parte indispensável do meu esforço para aprender a programar. Uso o Anki para lembrar de ideias importantes para programar em HTML, CSS, JavaScript e de comandos do Git e do Bash.

Atualmente, estou em processo de adiamento de matrícula (deferral) na UC-Berkeley Law School. O Anki será parte integral da minha estratégia para dominar as leis.

Neste artigo, abordarei:

O que é repetição espaçada
Como o Anki auxilia com a repetição espaçada
Como isso pode acelerar o seu aprendizado e aumentar a sua retenção de conceitos de programação.

O que é a repetição espaçada?

A repetição espaçada visa resolver o problema de esquecimento (texto em inglês). Ela sustenta que o momento ideal para se lembrar de uma nova informação é no momento em que você está prestes a esquecê-la.

Por exemplo, supondo que você não saiba qual é a capital da Colômbia e que, neste exato momento, eu diga para você qual é a capital do país:

"A capital da Colômbia é Bogotá."

Vamos supor que sua memória seja do tipo que se lembrará desse novo fato – que a capital da Colômbia é Bogotá – após sua primeira exposição à informação, por um período de 20 minutos. Depois disso, você esquecerá da informação.

Mas, se em 19 minutos e 59 segundos, enquanto estamos tomando um café, eu relembrar você dessa informação...

"A capital da Colômbia é Bogotá."

...a teoria da repetição espaçada diz que você será capaz de lembrar que Bogotá é a capital da Colômbia por agora, digamos 40 minutos. Depois disso, você esquecerá novamente.

Se eu relembrar você novamente 39 minutos e 59 segundos depois disso...

"A capital da Colômbia é Bogotá."

...você será capaz de reter essa informação geográfica na memória por um período ainda maior – digamos, até uma hora.

Se continuarmos assim – eu continuarei lembrando você de que a capital da Colômbia é Bogotá, justamente no momento em que você estiver prestes a esquecer – o tempo entre os lapsos de memória cresce exponencialmente de horas para dias, depois para meses, depois para anos.

Ao final, como diz a teoria, o conhecimento – de que Bogotá é a capital da Colômbia – ficará mais ou menos permanentemente alojado em sua memória.

Essa noção de declínio da memória ao longo do tempo é conhecida como a curva de esquecimento e foi desenvolvida por Herman Ebbinghaus, em 1885.

Stahl et al 2010; CNS Spectr

Essa ideia – de que é mais eficiente e eficaz espaçar o aprendizado ao longo do tempo em vez de estudar demais – é conhecida como efeito de espaçamento.

Juntos, a curva de esquecimento e o efeito de espaçamento são conceitos fundamentais por trás da repetição espaçada.

Dependendo da sua curva de esquecimento, você determina o intervalo ideal (texto em inglês) para relembrar você mesmo de um item da memória (qualquer informação). Você espaça o reforço do item de memória de acordo. Piotr Woźniak, um pioneiro em pesquisa de memória, resume essas ideias (texto em inglês):

O intervalo ideal é calculado com base em dois critérios contraditórios:

1. Os intervalos devem ser o mais longos possível para obter a frequência mínima de repetições e aproveitar melhor o chamado efeito de espaçamento, que diz que intervalos mais longos entre repetições, até certo limite, produzem memórias mais fortes.

2. Os intervalos devem ser curtos o bastante para garantir que o aprendizado ainda seja lembrado.

Nesse momento, você pode estar se perguntando: "mas como saber precisamente o momento em que estamos prestes a esquecer de que a capital da Colômbia é Bogotá? Como saber qual é o intervalo ideal?".

É claro que seria muito difícil saber com exatidão sem muitas tentativas e erros detalhados e uma atenção aos detalhes no nível de Charles Darwin. Felizmente, porém, não precisamos de tanta diligência porque um amigo bem conhecido pode nos ajudar: o software (você também pode usar um sistema não automatizado chamado de sistema Leitner – texto em inglês).

O software, construído sobre muitas pesquisas sobre a memória, pode ajudá-lo a determinar o momento ideal para reforçar a memorização. Mais especificamente, estamos falando do software de repetição espaçada.

O que é o Anki?

O Anki é uma ferramenta de software de repetição espaçada de código aberto desenvolvida e cuidada por Damien Elmes. Você pode pensar que ele é uma espécie de "programa de flashcards inteligente", que aproveita a repetição espaçada e torna a memorização mais eficiente.

O Anki foi construído com base na premissa de que você se lembra melhor do conhecimento com lembretes periódicos e estrategicamente cronometrados. O que significa que é construído sobre as vantagens da repetição espaçada.

Créditos da imagem no link

Você pode usar o Anki para lembrar virtualmente de qualquer coisa que precise ser lembrada.

Observe, no entanto, que o Anki não substitui o aprendizado. Você deve primeiro entender o material que está aprendendo e, em seguida, recorrer ao Anki, o que o ajudará de maneira brilhante a reter o conhecimento adquirido. O Anki é uma parte do processo de aprendizagem que vem após a compreensão.

Créditos da imagem no link

Existem outros softwares de repetição espaçada no mundo, como o SuperMemo, criado por Piotr Woźniak, mencionado acima. Na verdade, o Anki utiliza uma versão do algoritmo que foi utilizado no SuperMemo.

Eu me concentrei no Anki porque é o software que me acostumei a utilizar, e funciona bem. Além disso, ele é de código aberto e gratuito. Se você já usou o SuperMemo ou outra ferramenta de software de repetição espaçada, ficaremos felizes de saber sobre suas experiências.

Se você decidir usar o Anki também, eu o encorajo a ler sobre Woźniak (texto em inglês) e sobre o que ele tem a dizer sobre memória, aprendizado e criatividade (texto em inglês), pois é bastante pontual.

No que diz respeito aos dispositivos para uso, o Anki vem em uma versão para desktop na qual, se você nunca usou o Anki antes, é recomendável começar. Há também:

Um aplicação para a web gratuita, AnkiWeb.
Um aplicação para Android gratuita, AnkiDroid, totalmente compatível e sincronizável com o AnkiWeb para desktop.
Para usuários de Iphone, a aplicação AnkiMobile encontra-se no valor de U$24,99 na App Store (no momento em que este texto foi escrito).

Como o Anki funciona

Saiba que você pode se aprofundar em como usar e configurar o Anki (documentação em inglês). Eu apenas dou a você uma visão geral para que você entenda a essência do software.

Você cria "baralhos", ou seja, um grupo de cartas que representam uma grande categoria. Por exemplo, "JavaScript" ou "Capitais de Lugares" podem compor o "baralho".

Este é um exemplo de um deck no app Anki na versão desktop (não se preocupe com os itens "New", "Learning" e "To Review" por agora. Comentarei sobre essas opções mais a frente):

Exemplo de um baralho do Anki

2. Você adiciona cards (cartões) ao seu deck (baralho), que é customizado com HTML e CSS.

Um card pode ser um flashcard com conteúdo frontal e traseiro padrão, onde você primeiro é apresentado ao lado frontal. Aqui é um exemplo de um deck de "Capitais":

Exemplo de um cartão do Anki — Parte da frente padrão

Quando você já souber a resposta, selecione Show Answer (mostrar a resposta) para revelar a resposta localizada no verso do cartão:

Cartão do Anki – frente e verso padrão

Dica: há outros tipos de cartões, além do tipo flashcard com frente e verso, como o de exclusão cloze (texto em inglês) com a qual você se familiarizará. A exclusão cloze é um tipo de cartão particularmente útil que eu utilizo o tempo todo (na verdade, a maioria dos meus cartões utilizam a exclusão cloze) porque é útil e simples na organização das informações. Criar cards no Anki é uma arte. Quanto mais você praticar, melhor você ficará. Como regra geral, você vai querer tentar seguir o princípio de informação mínima (texto em inglês), que significa, essencialmente, manter algo muito simples. Você quer manter os seus cards o mais simples possível, porque o simples é mais fácil de lembrar.

3. Assim que terminar de adicionar os cards, você deve começar a praticar no Anki.

Vamos voltar ao card Colômbia-Bogotá para ver como o processo funciona.

Escolha quando você gostaria de ser lembrado novamente

Depois de selecionar Show Answer, é mostrado o verso do card. Você, então, pode se perguntar:

Foi muito difícil chegar à resposta?

Se você não souber a resposta, você pode selecionar Again (novamente), que mostrará o card novamente em menos de um minuto.
Se você encontrou a resposta depois de fazer uma pausa e vasculhar em sua memória, pode selecionar Good (bom), que mostrará o cartão novamente em menos de 10 minutos.
Se a resposta foi fácil, você pode escolher Easy (fácil) e não visualizará o card novamente por quatro dias.

O programa Anki, então, acompanha o estado do seu progresso: quais cartões revisar e quando. Isso significa que o Anki está fazendo o trabalho tedioso de acompanhar sua curva de esquecimento para cada cartão.

Esse é o poder da automatizar a repetição espaçada com software.

Eu poderia apontar que você pode mudar algumas variáveis do algoritmo de repetição espaçada do Anki. Você faz isso acessando as opções do deck e personalizando o que deseja personalizar, como o número de cartões revisáveis por dia, as opções de intervalo de tempo, entre outras variáveis.

Personalizando as opções do seu deck

No começo, porém, talvez você queira deixar essas configurações de lado e apenas usar os padrões. À medida que você se sentir mais confortável com o Anki, poderá começar a ser criativo com as opções do deck.

Vamos revisitar nosso deck JavaScript:

Exemplo de deck do Anki

New (novo) significa que você adicionou 4 novos cartões ao seu baralho de JavaScript e eles estão prontos para serem revisados.
Learning (em fazer de aprendizado) significa que, se você estiver trabalhando em um deck e escolher, digamos, Good (bom) < 10m, o Anki armazenará esse cartão na fila de aprendizado e o mostrará novamente em 10 minutos. Veja mais detalhes aqui.
To Review (para revisar) representa o número de cartões pendentes para revisão.

Tudo isso ficará muito mais claro quanto mais você usar o Anki.

Com começar com o Anki

A respeito de tutoriais e como usar o Anki, a documentação do sites é fenomenal e provavelmente responderá a maioria das suas perguntas. Também há alguns vídeos de tutoriais úteis.

Enquanto isso, darei a você uma lista para iniciar com o Anki e o porquê a checklist pode ser útil.

1. Leia o artigo de Derek Siver (em inglês) sobre repetição espaçada e o porquê ela reforça muito do que descrevi.

2. Leia a entrevista da Wired com Piotr Woźniak (em inglês), pois ela oferece uma visão holística da repetição espaçada, aprendizado e pesquisa de memória.

3. Leia Effective learning: Twenty rules of formulating knowledge (em inglês), de Piotr Wózniack. Ele fornece técnicas de como formular e estruturar seus cartões do Anki.

Em especial, lembre-se de que a repetição espaçada não substitui o aprendizado. Por isso, é importante você entender o material antes de iniciar o método de repetição espaçada. Primeiro, entenda. Depois, reforce com o Anki. Lembre-se de usar imagens e a metodologia de manter as coisas simples para criar os seus cards quando possível.

4. Crie seus próprios decks.

5. Lembre-se de manter seus decks com tópicos amplos e gerais. Por exemplo, se você está aprendendo JavaScript, não crie um deck chamado "Closures" e outro chamado "Herança prototipada". Em vez disso, crie um deck "JavaScript". Consulte Using Decks Appropriately, na documentação para mais detalhes.

6. Procure se acostumar com a exclusão cloze (vídeo em inglês), pois ela ajudará bastante o seu aprendizado.

7. Entenda as desvantagens.

Existem poucas desvantagens na repetição espaçada. A interferência na recordação é uma delas.

Por exemplo, você pode imaginar sofrer interferência na recordação com, digamos, as capitais de Martinica, Mauritânia e Ilhas Maurício, pois todas elas possuem nomes parecidos.

Algumas interferências são difíceis de escapar e você pode querer implementar outros hacks de memória nesses casos. Você, porém, pode limitar a desvantagem mantendo seus cartões com conteúdo simples.

Aprenda mais sobre as desvantagens aqui (vejas as desvantagens abaixo) e aqui (veja como combater as interferências abaixo) - textos em inglês.

8. Lembre-se de manter seus decks e cards sincronizados. Escolha uma "base inicial" como a versão para desktop e, em seguida, sincronize com o AnkiWeb e um dos aplicativos de celular sempre que fizer uma alteração. Criar seus cards e decks leva um certo tempo. Evite a dor de cabeça de ter que refazer esse trabalho.

9. Faça do Anki um hábito. Para ver os frutos da magia dessa ferramenta acontecerem, você deve tomar uma decisão e se comprometer a revisar seus cards todos os dias. Associe o Anki a uma xícara de café, pela manhã, ou na hora do almoço, ou com algo positivo. Encontre maneiras de tornar o Anki um hábito.

Recapitulando:

A repetição espaçada é a ideia de que você pode se lembrar de uma informação com mais eficiência se for exposto a ela no momento do esquecimento;
A ferramenta Anki automatiza a repetição espaçada. Isso contribui para uma ferramenta de memorização incrivelmente eficiente e útil.
O Anki pode ajudá-lo a construir sua base de conhecimento de fundamentos, técnicas e práticas recomendadas de programação de computadores.
Além do conhecimento de programação de computadores, você pode usar o Anki para lembrar de qualquer outra coisa que queira adicionar à sua memória.
Lembre-se: o Anki faz parte do processo de aprendizado, não é um substituto dele. Você deve primeiro entender, depois usar o Anki.

Se você tiver dúvidas, pode enviar uma mensagem para o Twitter do autor.

Leituras adicionais (algumas em inglês):

Repetição espaçada, Wikipédia
Curva do esquecimento, Wikipédia
Efeito do espaçamento, Wikipédia
Hermann Ebbinghaus, Wikipédia
Sistema Leitner, Wikipedia (em inglês)
Damien Elmes, criador do Anki
Documentação do Anki (em inglês)
General principles of SuperMemo (em inglês), por Piotr Woźniak
The roots of creativity and genius (em inglês), por Piotr Woźniak
Want to Remember Everything You’ll Ever Learn? Surrender to This Algorithm (em inglês), por Gary Wolf para Wired
Memorizing a programming language using spaced repetition software (em inglês), por Derek Sivers
Using spaced repetition systems to learn and retain technical knowledge (em inglês), por Jack Kinsella

Como se tornar um desenvolvedor para a web full-stack

Matheus Ribeiro — Mon, 10 Apr 2023 21:00:00 +0000

Artigo original: How to Become a Full Stack Web Developer – Handbook for Beginners

Desenvolvedores para a web full-stack são o canivete suíço do mundo da programação. Ter essa designação significa que você pode produzir soluções de ponta a ponta, um conjunto de habilidades altamente comercializáveis e ágeis. O que, no entanto, é realmente necessário para alcançar esse status?

Seja você novo, experiente ou especializado em uma das pontas da stack, há muito o que digerir aqui. Sinta-se livre para mergulhar fundo desde o início ou para pular direto para o tópico no qual você precisa de mais ajuda.

Primeiro, o que realmente torna um desenvolvedor full-stack?

É divertido e está na moda dizer que qualquer desenvolvedor de front-end é um desenvolvedor full-stack (texto em inglês), mas ser capaz de pôr um site no ar através do Netlify não o torna full-stack.

Não se sinta desencorajado – é só que, sendo realista, essa experiência por si só não será suficiente para justificar o título em sua próxima entrevista. Apesar de você estar tecnicamente criando e implantando seu trabalho do início ao fim, Netlify, Zeit e outros provedores dão a você o poder de fazer isso com suas ferramentas mágicas que removem a necessidade de realizar a maioria das operações da stack.

Não que eu queira desdenhar do que podemos realizar agora como desenvolvedores de front-end. O crescente movimento de compilar e fazer deploy de sites estáticos simplificou esse processo no lado do back-end, com benefícios para todos.

Além disso, com a flexibilidade das diferentes ferramentas disponíveis, como a possibilidade de executar JavaScript no servidor, nossas habilidades podem ser transferidas para mais casos de uso do que nunca.

De onde viemos

O cenário de desenvolvimento para a web está mudando rapidamente. O Wordpress vem sendo o rei do CMS há algum tempo, representando mais de um terço dos sites que usam CMS e ajudando o PHP a ganhar popularidade. Outros, contudo, preferem suas próprias soluções.

https://trends.builtwith.com/cms

Essas "soluções próprias" representam uma stack da web mais tradicional, como a LAMP. Nesses casos, você tinha servidores da web, geralmente executando algum tipo de sistema de gerenciamento de conteúdo e uma linguagem do lado do servidor (como o PHP), que faria a interface com os bancos de dados e produziria o código que acabaria por ser entregue ao navegador.

Além disso, você pode ter o JavaScript fazendo alguns recursos interativos e CSS gerenciando a exibição da página. Agora, em alguns casos, basta ter um servidor gerenciado com Wordpress para determinados provedores. Outros sites maiores, porém, exigiriam outra equipe para gerenciar esses serviços e o pipeline de deploy para colocar o código em produção.

Onde estamos e para onde vamos

Embora o Wordpress não vá desaparecer tão cedo, as arquiteturas serverless e JAMstack estão ganhando força (textos e sites em inglês). Para quem não está familiarizado, a ideia não é literalmente a de que não existem servidores, mas de usar servidores que são gerenciados para você na nuvem.

Serviços como o AWS Lambda permitem criar uma "função" que processa entradas e saídas simples. Anexe-a ao gateway da API e você terá imediatamente um endpoint com o qual poderá interagir sem precisar gerenciar um servidor.

Outros, como o S3, deixam você despejar HTML, CSS, JS, imagens e qualquer outro recurso estático no armazenamento e servir o site diretamente neles. Nada é processado no servidor, você está simplesmente servindo os arquivos estáticos para o client.

A parte brilhante disso é que o servidor não fica sobrecarregado e normalmente sai bem mais barato. Em muitos casos, você também terá um enorme aumento de desempenho, já que servir um site usando o S3 exigirá menos processamento para enviar a primeira resposta ao navegador, o que pode levar a uma melhor experiência do usuário.

Um joinha para uma boa experiência de usuário!

A ideia não é convencê-lo a usar o JAMstack, mas mostrar que o paradigma do full-stack está mudando e vale a pena prestar atenção nisso. Ainda existe uma noção conservadora da diferença no trabalho, mas isso está mudando.

Agora, são as equipes de DevOps que gerenciam recursos na nuvem e deploys. Os desenvolvedores de back-end agora criam APIs e código que fazem interface com serviços usando ferramentas como funções lambda. Os desenvolvedores de front-end trabalham principalmente com Javascript na criação de aplicações em React ou Vue, que acessam os serviços que os desenvolvedores de back-end criaram. Isso pode ou não incluir coisas como CSS, mas é mais um vespeiro discutir sobre em qual título essa tarefa se enquadra "oficialmente" (spoiler: depende da equipe).

Embora ainda haja uma noção de divisão de tarefas, a linha está ficando turva, tornando mais viável expandir o seu foco.

Antes de seguir em frente, vamos falar sobre foco

Pode ser bastante tentador querer mergulhar a fundo e tratar de todo o espectro de um desenvolvedor full-stack, mas há algo que precisa ser dito sobre foco. É a base da expressão "jack of all trades, master of none" (algo como "pau para toda obra, mestre de nada" em tradução livre), em que você tenta aprender um pouco de cada parte do full-stack, mas nunca domina nada de verdade.

Isso pode ser perigoso quando você ainda é um iniciante e está começando a desenvolver seus pontos fortes. Portanto, tente avaliar que tipo de aluno você é e concentre-se no que é importante. Se você estiver tendo dificuldades com um currículo muito abrangente, ele não necessariamente vai ajudá-lo a adquirir a experiência necessária para conseguir aquele primeiro emprego ou o emprego dos sonhos que você está buscando.

Uma abordagem diferente seria, por exemplo, ter um foco em particular, mas desenvolver suas habilidades full-stack ao redor desse ponto forte. Você pode ser um desenvolvedor de front-end que pode fazer deploy de suas próprias aplicações da web e constrói seu conhecimento em cima desse conhecimento fundamental.

Além disso, ser um desenvolvedor full-stack não é necessariamente ser capaz de dizer que você conhece as linguagens x, y e z. Entender de programação e conceitos de design de software, bem como ser capaz de enfrentar qualquer desafio pela frente, seja qual for a stack, é o que faz um grande desenvolvedor.

Resumindo, tente descobrir o que é melhor para você e não deixe que grandes ambições atrapalhem o domínio da sua jornada.

O Sr. Miyagi aprova

Então, por onde começamos?

Para fins deste artigo, vamos manter as divisões tradicionais que compõem a stack (front-end, back-end etc.). Embora algumas pessoas digam que isso não existe mais (texto em inglês), realisticamente, existe uma infinidade de empregos para desenvolvedores full-stack e, no dia a dia, eles se referem a essas divisões tradicionais. O "desenvolvedor full-stack" definitivamente veio para ficar.

No que diz respeito à stack, tenderemos às arquiteturas serverless/JAMstack, porque elas não param de crescer. Se você as aprender, isso só o tornará mais desejável, com diversos empregos surgindo em torno delas.

Boomshakalaka!

Como você notará abaixo, o objetivo não é ser abrangente com todos os tipos de banco de dados e todas as soluções de renderização. Um desenvolvedor forte deve ser capaz de ser flexível com suas ferramentas, se esforçando para entender os conceitos de seu trabalho, em vez de ter a mente fechada e só ser capaz de ser produtivo em um framework.

Em um momento, você pode estar confortável usando React no seu trabalho atual (e está tudo bem!), mas seu próximo trabalho pode ser pesado no Vue, ou ("surpresa!") seu líder de equipe decide reescrever a aplicação com Svelte. Tente entender por que você está usando um framework de interface do usuário em primeiro lugar e como ele está ajudando você a resolver o problema em questão.

Agora, vamos ao que interessa...

Front-end

O front-end de um site ou aplicação geralmente é a interface do usuário com a qual a pessoa que usa seu serviço interage. A linguagem de mais destaque aqui é o Javascript, do qual você normalmente dependerá para usar bibliotecas de interface de usuário, como o React ou o Vue, para gerenciar os componentes do seu projeto.

O uso desses frameworks de IU permite que você crie "componentes", essencialmente blocos de código que acabarão por produzir HTML com a capacidade de criar interações e estados dinâmicos junto com seu código. Isso é muito poderoso e, embora possa haver uma pequena curva de aprendizado no início, fica muito agradável de utilizar depois que você pega o jeito.

Seja você novo na área ou bem experiente, alguma hora você deve se deparar com o jQuery. Embora tenha seus méritos e tenha servido bem à comunidade, os recursos nativos do Javascript cresceram muito e diminuíram a demanda pela funcionalidade que o jQuery era capaz de fornecer. Agora, em vez disso, os desenvolvedores se utilizam dos frameworks de IU e do Javascript nativo.

Por isso, é bom entender o que é o jQuery, mas não recomendo dedicar seu tempo a aprendê-lo a essa altura. O lado bom é que, se você conseguir um trabalho que o use, pode escrever Javascript nativo junto com o jQuery. Então, aprender o Javascript puro é a resposta certa.

Então, o que devo aprender?

Se você realmente está começando agora, dedique seu tempo a aprender o básico do HTML e CSS. Pode não ser tão divertido e atraente como mergulhar direto no Javascript, mas ter uma boa base sobre os fundamentos (texto do autor em inglês) do que faz a web será a chave para começar com o pé direito.

Em seguida, aprenda Javascript. Ele continuará sendo o rei no futuro próximo. O Javascript fornecerá a base de qualquer framework ou biblioteca que você utilizar. Assim, entender os detalhes de como a linguagem em si funciona ajudará a impulsioná-lo em sua jornada para aprender o lado do front-end das coisas.

Isso também vai facilitar a sua vida quando você estiver tentando entender algumas das complexidades dos diferentes padrões e conceitos por trás dos frameworks que você usar.

Falando em frameworks, React e Vue são provavelmente os melhores candidatos, dada a sua popularidade. O React é o mais popular do grupo e vai continuar crescendo. Sua equipe está sempre trabalhando para amadurecer o framework e produzir APIs que ajudarão a criar aplicações para a web modernas e rápidas.

Estado dos frameworks JS em 2019

Iniciar um projeto com create-react-app ou Gatsby, inclusive, facilita a configuração de uma aplicação em React para que você esteja imediatamente pronto para mexer no código.

Embora haja benefícios em citar pré-processadores de CSS e ferramentas como o Sass, há uma porção de soluções agora para CSS, incluindo o CSS-in-JS.

Embora colocar o CSS dentro do JS tenha seus prós e contras (texto do autor em inglês), não vale necessariamente a pena indicar uma direção específica do que usar, já que depende muito da equipe.

Compreender o básico e o poder do CSS e como usá-lo em sua forma mais básica vai ajudar você a se preparar para utilizá-lo, independentemente do framework.

Recursos

Certificação de Design responsivo para a web (novo) do freeCodeCamp
Put Down the Javascript: Learn HTML & CSS first (artigo do autor em inglês)
MDN Introdução ao Javascript
Curso por e-mail Just Javascript (em inglês)
Jogo educativo JSRobot (em inglês)
Introdução ao React da reactjs.org (em inglês)
Tutoriais da gatsbyjs.org (em inglês)

Back-end

No mundo do JAMstack, o back-end geralmente se refere às APIs que nossos front-ends usam para criar experiências dinâmicas ao interagir com os endpoints do client (como os das APIs CRUD). A possibilidade de fazer essas solicitações do lado do client elimina a necessidade de ter que fazer qualquer processamento antes que a página seja servida ao navegador.

Apesar de não ser bom achar que você só pode programar com uma linguagem, ser capaz de escrever em JavaScript dá uma boa vantagem aqui, já que você pode se introduzir aos fundamentos de trabalhar com o lado do back-end das coisas com uma linguagem familiar (ou vice-versa, com o front-end).

O NodeJS é um ambiente de tempo de execução comum, que você encontrará na maioria dos ambientes na nuvem como opção e que dará a você uma experiência semelhante ao que você esperaria em um navegador. A principal diferença é que você não terá acesso a determinadas APIs do navegador nem haverá um objeto Window com suas APIs associadas.

Dito isto, o Python também é outra linguagem popular que está crescendo, especialmente devido à sua popularidade na comunidade de ciência e engenharia de dados. PHP e Ruby, embora sejam ambos válidos e ofereçam opções no mercado de trabalho, não parecem ser tão populares e nem tendem a crescer tanto quanto Javascript e Python.

Linguagens populares no GitHub

Com a linguagem de sua escolha, sua melhor aposta será aprender a criar serviços na nuvem com os quais suas aplicações possam interagir.

Criar um lambda simples com que você possa brincar, seja na AWS, na Netlify ou em qualquer outro provedor de serviços na nuvem, proporcionará uma boa experiência sobre o que você pode esperar ao trabalhar na área.

Mesmo que você não trabalhe diretamente em um lambda no emprego que conseguir, vai poder começar a se familiarizar com conceitos que são fundamentais para se trabalhar com o back-end. Cedo ou tarde, você usará essas funções para se conectar a outros serviços e bancos de dados para criar seus próprios serviços dinâmicos.

Então, o que devo aprender?

Se você já está se empenhando em aprender Javascript do lado do front-end das coisas, continue usando o Javascript para o seu back-end. Rode um lambda usando as funções do Netlify, onde você só precisa se concentrar no código e o Netlify cuida do resto (como compilar e fazer o deploy da função).

Com a sua linguagem de escolha e primeira função, tente começar a trabalhar com outros serviços dentro do seu código para adquirir experiência trabalhando com APIs de terceiros.

Talvez construir um endpoint que possa enviar um tweet usando a API do Twitter (mas não abuse dela). Aprenda a criar um banco de dados e configurar sua função para interagir com ele em um padrão CRUD. Isso dará a você um caso de uso mais realista de como uma aplicação típica pode interagir com um back-end.

Seu objetivo aqui deve ser criar serviços com os quais seu front-end interaja por meio de um endpoint para executar operações para a pessoa que usa sua aplicação. A boa notícia é que, dado o crescimento de tecnologias da nuvem, você terá uma porção de opções, algumas delas gratuitas, para começar a brincar.

Recursos

Super simple start to Netlify functions (em inglês)
Building Serverless CRUD apps with Netlify Functions & FaunaDB (em inglês)

DevOps e a nuvem

O DevOps decorre da necessidade de se criar soluções que suavizam e aceleram o processo de levar o código da sua escrita à sua implementação.

Esse trabalho pode variar de muitas responsabilidades a umas poucas, seja escrever scripts bash para uma solução personalizada, seja escrever um modelo de CloudFormation que cria todos os recursos necessários para que uma aplicação seja executada.

Normalmente, você encontrará isso como parte de uma orquestração maior de fluxos de trabalho de CI/CD que automatizam os processos de compilação e deploy.

Pipeline CI / CD

Isso muda constantemente! Dada a febre do serverless, surgiu o framework serverless para gerenciar muito disso para você de uma maneira mais fácil, o que levou a AWS a criar sua própria solução, o SAM. Ferramentas como o Jenkins já existem há algum tempo para parte do CI/CD, mas agora estamos vendo o GitHub, o GitLab e outros provedores de controle de versão fornecerem suas próprias soluções. Vemos também ferramentas, como o CircleCI, que se conectam diretamente ao seu projeto.

Essas soluções, contudo, ainda não são perfeitas – escrever modelos do CloudFormation pode ser assustador. Escrever scripts de automação também não é muito divertido, embora seja supergratificante quando eles funcionam!

O processo, porém, está melhorando. É aí que produtos como Netlify e Zeit entram. Apesar de estarem mais enraizados no lado da hospedagem estática, onde você compila sua aplicação e a despeja no armazenamento, suas ofertas estão crescendo, como as Funções da Netlify, que não passam de AWS Lambdas mais fáceis de configurar e de fazer deploy para um endpoint totalmente funcional (é realmente superfácil).

Então, o que devo aprender?

Se for a primeira vez que você configura esse tipo de coisa, comece com o Netlify. Configure uma aplicação do React ou mesmo apenas um arquivo HTML simples em um repositório do GitHub, conecte-o a uma nova conta do Netlify e veja o deploy acontecer.

Configuração fácil com Netlify

A partir daí, ou se você já tiver um pouco de experiência, comece a pesquisar sobre o que está acontecendo internamente. O Netlify, provavelmente, está pegando seu código, executando os comandos que você configurou (como yarn build) em um ambiente virtual, despejando os arquivos gerados em algum armazenamento, como o S3, e colocando uma CDN, como o CloudFront, na frente para servir de endpoint.

Primeiro, tente fazer isso manualmente do seu computador, usando o AWS Console e sua CLI e, em seguida, escreva um script para automatizar todo o processo de integração com o Circle CI em seu projeto no GitHub em vez do Netlify para que o deploy realmente aconteça no AWS.

Indo mais além, você pode criar serviços para fazer interface com o seu back-end. Você tem um banco de dados que seus serviços usam? Você pode automatizar a criação desse banco de dados usando CloudFormation ou scripts bash.

Tratar sua infraestrutura como código, com recursos descartáveis e facilmente recriáveis, ajudará você e seus projetos a se tornarem mais flexíveis e a terem uma melhor capacidade de voltar a funcionar em caso de falha.

Tudo isso vale para qualquer provedor de nuvem ou CI/CD, não apenas para a AWS e o Circle CI. Escolha sua ferramenta de nuvem e fluxo de trabalho favorita e mande ver. A questão é começar a observar as necessidades do seu projeto e descobrir o que realmente está acontecendo nas partes automatizadas da stack. Assim, você vai aprender mais e se tornará mais criativo para lidar com necessidades do seu projeto.

Recursos

A Step-by-Step Guide: Deploying on Netlify (em inglês)
Tutorial: Configuring a static website on Amazon S3 (em inglês)
AWS Certified Cloud Practitioner Training 2019 - A Free 4-hour Video Course (em inglês)
Consulte os recursos de Javascript da sessão de front-end acima

Design

Sim, você deve entender o básico de design. Não, você não precisa ser um designer.

Há muitos aspectos do design que acelerarão suas habilidades como desenvolvedor. Todo mundo sabe que designers visuais e de experiência do usuário fazem mágica, mas ter um entendimento básico pode impedir que sua aplicação se torne uma grande decepção.

A aplicação fictícia Pied Piper deu ruim por causa de uma má experiência de usuário

Todos no processo de desenvolvimento estão trabalhando em direção a uma meta que afeta um usuário final de uma forma ou de outra. Ser capaz de entender quais necessidades seu trabalho está tentando resolver e como isso afeta os usuários ajudará a equipe como um todo a desenvolver uma solução final mais abrangente.

Considere um desenvolvedor de back-end criando uma API para permitir que alguém gerencie usuários em uma aplicação. Os requisitos da API são bastante enxutos e incluem apenas o nome do usuário. Fornecer isso como um único campo "nome" em vez de "nome" e "sobrenome" pode não ser a solução mais intuitiva para a maioria, mas pode ser um descuido que complica como o desenvolvedor do front-end expõe isso na interface do usuário, o que tornaria difícil para o desenvolvedor exibir ou poderia confundir o usuário final que está consumindo o produto.

Além de tudo isso, o design pode impactar diretamente a conversão. Se você estiver desenvolvendo na área de comércio eletrônico, fazer um botão que não se parece com um botão pode impedir que as pessoas adicionem um produto ao carrinho. Isso, é claro, impedirá uma compra, o que significa receita perdida. Entender como humanizar a interface do usuário, mesmo em um nível básico, pode literalmente gerar mais dinheiro para o seu projeto ou, pelo menos, ajudar as pessoas a usá-lo com mais facilidade.

Mais importante do que isso, é importante que seu site seja acessível. Muitas pessoas têm necessidades diferentes, seja porque elas não podem ver cores do mesmo jeito ou porque não podem ouvir os sons que sua aplicação produz. Você precisa reconhecer as necessidades alheias e tentar criar um design de tal modo que sua aplicação seja acessível a todos.

Então, o que devo aprender?

Embora eu não espere que você faça um curso inteiro para isso, tente ser consciente e curioso. Talvez, da próxima vez, não pule aquele artigo de design que você viu aparecer no Twitter do freeCodeCamp.

Ao criar soluções, tente imaginar como seu trabalho será usado. O que os outros desenvolvedores da sua equipe precisarão na sua API? O que as pessoas que usam sua aplicação precisam na sua interface?

Você também pode tentar se inspirar no que os outros estão fazendo em seu espaço. Que aparência você espera que uma aplicação tenha ao fornecer funcionalidades semelhantes? Isso não é licença para copiar ou roubar, mas é bom entender as necessidades que a solução está resolvendo. Reflita no motivo do botão Adicionar ao Carrinho ser tão grande, por que estão deixando os usuários darem zoom em uma foto de produto ou como você pode tornar o design de uma tabela um pouco mais utilizável.

Design de produto "tabela" no Dribbble

Quanto à acessibilidade, tente aprender o básico. Há cada vez mais recursos disponíveis para ajudá-lo a entender as necessidades das pessoas. Tente entender quais deficiências existem e como elas podem afetar o uso da sua aplicação. Quem sabe, você poderá até encontrar alguns padrões comuns de como lidar com essas questões.

Na maioria das vezes, não é muito difícil incorporar essas questões. Se você adquirir o hábito de fazer isso desde o início, nem vai pensar sobre o assunto na próxima vez em que você construir uma aplicação.

Recursos

Design for developers (em inglês)
Hack Design (em inglês)
Design for Hackers (em inglês)
Introduction to Web Accessibility (em inglês)

Outras coisas se você está apenas começando

Muito deste artigo pressupõe que você já domine alguns conceitos básicos, como entender o que é o Git e o controle de versão ou simplesmente configurar o editor de código. Se você está mesmo começando só agora, vai ser útil ter pelo menos uma compreensão simples desses conceitos, porque vai ficar cada vez mais desafiador sem eles.

Também é preciso falar sobre aprender a usar o terminal. Pode ser assustador não usar uma GUI quando se está começando, mas uma vez que você começar a se acostumar, vai descobrir rapidamente que será mais produtivo usando um terminal, e, de qualquer maneira, muitos projetos exigem o uso do terminal.

Então, o que devo aprender?

Primeiro de tudo, configure seu editor de código. O Visual Studio Code está em alta agora, mas há outros que o servirão bem, dependendo de suas preferências, como o Atom ou o Sublime Text. Você também vai encontrar IDEs baseados na nuvem, como o Repl.it, ou pode começar com uma barreira de entrada mais baixa, brincando no CodePen ou no JSFiddle.

O Visual Studio Code tá pegando fogo agora

De qualquer modo, assim que estiver pronto para programar, você vai precisar entender o que é o controle de versão. O Git é o maior representante disso no momento. O Git é uma ferramenta poderosa que permite rastrear alterações no código e se tornar mais produtivo colaborando com outros desenvolvedores.

Familiarize-se com alguns dos comandos básicos do Git, como adicionar novas alterações, bem como o que são as branches e como usá-las. O mundo do Git é enorme, você não precisa dominá-lo imediatamente, mas logo vai aprender que há uma quantidade infinita de coisas novas para aprender em sua jornada para dominar o Git.

Muitas ferramentas que você vai usar, como o GitKraken, têm interfaces gráficas disponíveis, mas elas ainda são um pouco limitadas no que podem fazer. Aprender a lidar com os terminais padrão na sua máquina ou baixar outras opções, como o iterm2 (minha preferência) ou o Xterm.js, valerá mais a pena. Bônus: você vai se sentir como um hacker dos filmes toda vez que usá-los (ou será que sou só eu?).

Hugh Jackman hackeando em Swordfish

Recursos

Introduction to Visual Studio Code (em inglês)
Tutoriais de Git do Github
Learn Git Branching!
Introduction to the command line on Mac (em inglês)

Outras coisas se você estiver procurando por mais

Existem muitas outras coisas em que você pode se aprofundar. Lembre-se de não dispersar o seu foco e tente não se sobrecarregar. Se, no entanto, estiver se sentindo confiante com a sua situação, há alguns outros conceitos que ajudarão você a enfrentar desafios no mundo real.

Testes e as diferentes metodologias

Escrever código é uma coisa, mas ser capaz de configurar testes eficazes solidificará o seu código e evitará que bugs apareçam. Você não quer perder seu tempo no futuro ou mesmo perder a renda do seu produto quando o site cair. Aprender a escrever testes e as diferentes abordagens é importante para solidificar seu código.

Ferramentas do navegador, como o Chrome DevTools

Uma das ferramentas mais poderosas que você pode ter ao depurar sua aplicação, na minha opinião, é ser capaz de fazer isso no navegador.

Seja observando como o DOM está sendo renderizado, mexendo no CSS (texto em inglês) ou depurando suas solicitações de rede, você aprenderá rapidamente a economizar tempo e identificar mais facilmente de onde o bug está vindo.

HTTP e como depurar solicitações no painel de rede

Já que a web é baseada na internet, sua aplicação acabará fazendo solicitações para outros servidores. Quando isso acontece, entender os gargalos de solicitação ou simplesmente como uma solicitação está sendo feita pode ajudá-lo a entender por que sua aplicação parece lenta ou por que o botão Salvar não está funcionando.

Ter uma compreensão básica de como as solicitações funcionam e de como visualizá-las para depuração ajudará muito na sua jornada.

Software de código aberto e gerenciadores de pacotes

Aqui, o assunto não é tanto sobre uma habilidade ou ferramenta para aprender, mas um modo como o software é distribuído. Ao começar a criar soluções com código, você logo perceberá que muitos de nós dependemos de pacotes de código aberto. Na maioria das vezes, é através do npm, se estiver escrevendo em Javascript, o que nos ajuda a sermos mais produtivos, já que não precisamos reinventar a roda toda vez.

Passe algum tempo entendendo o conceito de código aberto e até considere retribuir colaborando no seu projeto favorito. Dar uma mão é geralmente muito bem-vindo, além de ajudá-lo a ganhar experiência, e você pode até mesmo ganhar brindes no seu primeiro pull request aprovado (texto em inglês)! Porém, seja respeitoso! Há uma pessoa de verdade do outro lado da solicitação também.

O que mais?

Esta lista pode não acabar nunca, pois o mundo da programação é imenso. O que mais você acha que é importante na jornada para se tornar um mestre do desenvolvimento? Envie um tweet ou mensagem direta para o autor se acha que ele deixou passar algo importante!

Você está com tudo! Hora de unir todas as pontas

Dada toda a experiência que você terá acumulado com o que vimos, você já deve ser capaz de criar uma aplicação inteiro do início ao fim sozinho. Você tem ideia do poder que tem?

Thanos preparando a manopla

É aqui que a diversão começa. Tente criar uma aplicação do zero – não importa o que seja, basta criar algo. A melhor coisa que você pode fazer para aprender é ganhar experiência fazendo. Não importa se é um dos milhões de tutoriais de listas de tarefas por aí ou se vai se ensinar a programar construindo uma das maiores redes sociais, como o criador do Instagram (texto em inglês).

A partir daqui, você deve ser capaz de criar:

Um front-end de aplicação da web que é executada no navegador
Serviços de back-end para os quais sua aplicação da web pode fazer solicitações por meio de endpoints
Escrever um script para se conectar a uma ferramenta de CI/CD para automatizar seu processo de compilação e deploy
Bônus: tomar boas decisões sobre a aparência da sua interface para que as pessoas possam usá-la bem!

Vá em frente e desenvolva! Compartilhe com o autor sua jornada na programação no Twitter usando a hashtag #codejourney. Adoraríamos de saber mais sobre o que você passou, o que construiu ou para onde está indo e o que quer construir.

Aprenda Bootstrap 4 em 30 minutos criando um site

Tiago Costa Rebelo — Mon, 06 Mar 2023 21:00:00 +0000

Artigo original: Learn Bootstrap 4 in 30 minutes by building a landing page website

Escrito por: Said Hayani

(Tradução em português europeu)

Guia para iniciantes

"O Bootstrap é uma biblioteca de front-end gratuita e de código aberto para criação de sites e aplicações para a web. Contém modelos de design criados em HTML e CSS para tudo, desde tipografia, formulários, botões, navegação e outros componentes de UI, bem como extensões de JavaScript. Ao contrário de muitos outros frameworks para a web, o Bootstrap tem como foco apenas o desenvolvimento front-end." — Wikipédia

Olá. Antes de começarmos, confere o meu curso completo para aprender Boostrap 4, onde aprenderás novos recursos do Boostrap e como usá-los, de modo a criares melhores experiências de usuário.

O Bootstrap tem várias versões, sendo a versão 4 a mais recente. Neste artigo, vamos construir o nosso website usando o Bootstrap 4.

Nota da tradução: no momento da escrita deste artigo, a versão mais recente era a versão 4. No momento da tradução, já estamos na versão 5.3.0.

Pré-requisitos

Antes de começar, é importante que tenhas os seguintes conhecimentos, para melhor compreenderes e aprenderes a usar o framework Boostrap:

HTML
conhecimento base de CSS
conhecimento base de jQuery

Índice

Para o nosso website, vamos cobrir os seguintes tópicos:

Baixar e instalar o Bootstrap 4

Há três formas de instalar ou incluir o Bootstrap nos nossos projectos:

Usando o npm

Podemos instalar Bootstrap 4 usando este comando no nosso Terminal npm install bootstrap

Nota de tradução: é possível instalar a versão do Bootstrap 4 indicada, nos dias de hoje, usando npm install bootstrap@4.0.0

2. Usando Content Delivery Network (CDN)

Para usar CDN, basta incluir o link abaixo no nosso projecto, dentro das tags :

Nota de tradução: recomendamos realizar a instalação por meio do CDN para aqueles que preferem ter instaladas as versões mais recentes dos pacotes.

3. Baixar o Bootstrap e usá-lo localmente (no nosso pc).

Nota de tradução: este link, de fato, levará ao site do Bootstrap para baixar a versão mais recente do framework, não a versão 4.

A estrutura (pasta) do nosso projecto deverá estar assim:

O que há de novo no Bootstrap 4

O que há de novo no Boostrap 4? Quais as diferenças entre Bootstrap 3 e 4?

O Bootstrap 4 traz as seguintes funcionalidades que não existiam na versão anterior:

Bootstrap 4 foi criado com Flexbox e Grid, enquanto o Bootstrap 3 foi criado usando float.
Se o termo Flexbox é novo para ti, vê este tutorial (em inglês).
Bootstrap 4 faz uso da unidade/medida rem em CSS, enquanto o Bootstrap 3 usa a unidade/medida px.
Entende neste artigo como as duas se diferenciam (texto em inglês).
Painéis, miniaturas e wells foram retirados na sua totalidade.
Podes ler mais sobre as alterações gerais e as funcionalidades removidas no Boostrap 4 aqui (documentação oficial em inglês).

Sem entrar em grande detalhe, vamos concentrar-nos nas partes mais importantes.

O sistema de grid do Bootstrap

O sistema de Grid no Bootstrap ajuda-te a criar o layout do site de modo fácil e responsivo. Não houve alterações nos nomes das classes usadas, com excepção para a .xs classe, que deixou de existir na versão do Bootstrap 4.

A grid foi dividida em 12 colunas, nas quais se baseará o layout do teu site.

Para usar o sistema de grid, terás de incluir a class .row na tua div principal e depois nas divs internas aplicar uma das seguintes.

col-lg-2 // classe usada para dispositivos grandes, como portáteis
col-md-2 // class usada para dispositivos médios, como tablets
col-sm-2// class usada para dispositivos pequenos, como telemóveis

Barra de navegação

A funcionalidade do elemento/tag que envolve a barra de navegação no Bootstrap 4 é fantástica e muito útil quando se trata de criar uma barra de navegação responsiva.

Para isso, vamos adicionar a classe navbar ao nosso ficheiro index.html:

  
   
 Home

     
 
     About          

    Portfolio    
 
  
    Blog            
  
            Team         
 
 Contact

A seguir, cria e inclui o ficheiro main.css para que possas criar e editar os teus elementos com CSS.

Coloca a seguinte linha de código entre as tags head do teu ficheiro index.html:

Vamos agora adicionar cor à barra de navegação:

.navbar{ background:#F97300;}

.nav-link , .navbar-brand{ color: #f4f4f4; cursor: pointer;}

.nav-link{ margin-right: 1em !important;}

.nav-link:hover{ background: #f4f4f4; color: #f97300; }

.navbar-collapse{ justify-content: flex-end;}

.navbar-toggler{  background:#fff !important;}

Uma vez que o sistema de Grid na nova versão do Bootstrap foi criado usando o sistema Flexbox, terás de usar as propriedades do Flexbox para o alinhamento dos elementos. Por exemplo, para colocar o menu da barra de navegação do lado direito, temos de adicionar a propriedade justify-content e definir o seu valor para flex-end.

.navbar-collapse{
 justify-content: flex-end;
}

Adiciona a classe .fixed-top à tua barra de navegação, de forma a fixar a sua posição no topo da página.

Para mudar a cor de fundo da barra de navegação para uma cor clara, usa a classe .bg-light. Para uma cor de fundo escura, podes usar a classe .bg-dark. Se preferires a cor azul clara, tens disponível classe.bg-primary.

Eis como parte do teu CSS deverá estar:

.bg-dark{
background-color:#343a40!important
}
.bg-primary{
background-color:#007bff!important
}

Vamos agora criar um layout para a nossa header.

Neste caso, queremos que a header ocupe a totalidade da altura da janela do dispositivo, portanto vamos usar um pouco de JQuery.

Primeiro, cria um ficheiro chamado main.js e inclui-o no teu ficheiro index.html exactamente antes da tag de fechamento do body:

No ficheiro main.js, coloca o seguinte código JQuery:

$(document).ready(function(){
 $('.header').height($(window).height());
 
})

A header ficaria bem melhor se adicionarmos uma imagem de fundo:

/*header style*/
.header{
 background-image: url('../images/headerback.jpg');
 background-attachment: fixed;
 background-size: cover;
 background-position: center;
}

Agora vamos adicionar uma div com a class de overlay, para dar um toque mais profissional à header:

Adiciona isto ao teu ficheiro index.html:

Depois, adiciona o seguinte ao teu ficheiro main.css:

.overlay{
 position: absolute;
 min-height: 100%;
 min-width: 100%;
 left: 0;
 top: 0;
 background: rgba(244, 244, 244, 0.79);
}

De seguida, vamos adicionar uma descrição dentro da header.

Para tal, vamos criar uma div e atribuir-lhe uma classe de .container.

.container é uma classe do Bootstrap que auxilia a "conter" todo o conteúdo e a fazer com que o layout se torne responsivo:

Cria agora outra div que conterá a descrição.


       Hello ,Welcome To My official Website
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Vamos atribuir-lhe a classe de .description e adicionar também a classe .text-center para garantir que o texto é centrado na página.

Botões

Cria o elemento button e atribui-lhe as classes .btn btn-outline-secondary.

Existem outras classes para estilizar os botões via Bootstrap.
Alguns exemplos disponíveis no link abaixo:

No teu ficheiro CSS main.css, a classe .description deve ter então os seguintes atributos:

.description{
    position: absolute;
    top: 30%;
    margin: auto;
    padding: 2em;
    
}
.description h1{
 color:#F97300 ;
}
.description p{
 color:#666;
 font-size: 20px;
 width: 50%;
 line-height: 1.5;
}
.description button{
 border:1px  solid #F97300;
 background:#F97300;
 color:#fff;
}

A header deve estar assim agora:

Porreiro, não?! 🙂

Secção Sobre mim

Vamos dividir esta secção em duas partes usando Bootstrap Grid.

Para inicializar a nossa Grid, vamos atribuir a classe .row à nossa div mãe.

Metade da secção ficará posicionada à esquerda e conterá uma imagem, sendo que a outra metade ficará posicionada à direita e conterá uma descrição.

Atribuiremos a cada metade da nossa secção uma div e cada uma ocupará um total de 6 colunas — o que significa, metade da secção. Lembra-te que a Grid é composta por 12 colunas.

Na div que ocupará o lado esquerdo da secção:

 
 // lado esquerdo

    
    S.Web Developer

De seguida, vamos adicionar os elementos HTML para a nossa outra metade (lado direito da secção) e a estrutura do nosso código deverá assemelhar-se a isto:


   
    
    S.Web Developer
   
   
     
    D.John
    
       ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
     consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
     cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
     proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Agora, vamos estilizar as classes usadas acima:

.about{
 margin: 4em 0;
 padding: 1em;
 position: relative;
}
.about h1{
 color:#F97300;
 margin: 2em;
}
.about img{
 height: 100%;
    width: 100%;
    border-radius: 50%
}
.about span{
 display: block;
 color: #888;
 position: absolute;
 left: 115px;
}
.about .desc{
 padding: 2em;
 border-left:4px solid #10828C;
}
.about .desc h3{
 color: #10828C;
}
.about .desc p{
 line-height:2;
 color:#888;
}

Secção Portfolio

Nesta secção, vamos criar um Portfolio, que conterá uma galeria.

Abaixo, podes ver como a estrutura do nosso código HTML ficará:



     Portfolio

É importante adicionar a classe .img-fluid a cada imagem, de modo a torná-las responsivas.

Cada item da nossa galeria ocupará 4 colunas (lembra-te, col-md-4 para dispositivos médios, col-lg-4 para dispositivos grandes), o que equivale a 33.33333% em dispositivos com ecrãs grandes, tais como computadores e 12 colunas em dispositivos pequenos (como iPhone e outros dispositivos móveis) o que fará com que as colunas ocupem 100% do contêiner.

De seguida, vamos estilizar a nossa galeria:

/*Portfolio*/
.portfolio{
 margin: 4em 0;
    position: relative; 
}
.portfolio h1{
 color:#F97300;
 margin: 2em; 
}
.portfolio img{
  height: 15rem;
  width: 100%;
  margin: 1em;
  
}

Secção Blog

Cartões (cards)

Cartões (ou cards) no Bootstrap 4 são a classe mais adequada para artigos e posts e fazem com que seja fácil criar um design de um blog.

Para criá-los, vamos adicionar a classe .card a uma div.

A classe card contém várias funcionalidades:

.card-header: define a header do cartão
.card-body: define o corpo do cartão
.card-title: define o título do cartão
.card-footer: define o footer do cartão.
.card-image: usada para imagens dentro do cartão

A estrutura do nosso HTML para esta secção deverá ficar assim:



 
 Blog
  
   
    
     
      
     
     
     
     Post Title
      
       
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      
     
     
      Read more
     
    
   
   
    
     
      
     
     
     
        Post Title
      
       
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      
     
     
      Read more
     
    
   
   
    
     
      
     
     
     
     Post Title
      
       
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      
     
     
      Read more

Precisamos agora de estilizar os nossos cartões:

.blog{
 margin: 4em 0;
 position: relative; 
}
.blog h1{
 color:#F97300;
 margin: 2em; 
}
.blog .card{
 box-shadow: 0 0 20px #ccc;
}
.blog .card img{
 width: 100%;
 height: 12em;
}
.blog .card-title{
 color:#F97300;
  
}
.blog .card-body{
 padding: 1em;
}

Após completarmos a secção Blog do nosso website, o design deverá estar conforme a imagem abaixo:

Fixe, certo?

Secção A equipa

Nesta secção, vamos utilizar o sistema Grid para distribuir as imagens pelo espaço disponível, de modo igual. Cada imagem ocupará 3 colunas (.col-md-3), o que equivale a 25% do espaço total.

O nosso HTML:



 
    Our Team
  
   
    
    
      Sara
     
    Manager
   
   
    
    
       Chris
     
    S.enginner
   
   
    
    
      Layla 
     
    Front End Developer
   
   
    
     
      J.Jirard
     
    Team Manger

Vamos complementar o nosso CSS:

.team{
 margin: 4em 0;
 position: relative;  
}
.team h1{
 color:#F97300;
 margin: 2em; 
}
.team .item{
 position: relative;
}
.team .des{
 background: #F97300;
 color: #fff;
 text-align: center;
 border-bottom-left-radius: 93%;
 transition:.3s ease-in-out;
 
}

Um toque extra que podemos adicionar, um efeito overlay nas imagens sempre que o cursor do rato passar por cima da imagem (on-hover).

Para criar este efeito, adiciona o seguinte ao teu ficheiro main.css:

.team .item:hover .des{
 height: 100%;
 background:#f973007d;
 position: absolute;
 width: 89%;
 padding: 5em;
 top: 0;
 border-bottom-left-radius: 0;
}

Brutal!

Formulário de contacto

O formulário de Contacto será a última secção que adicionaremos.

Esta secção conterá um um formulário através do qual os visitantes do site poderão enviar uma mensagens de feedback. Com algumas classes do Bootstrap, tornaremos o design mais apelativo e responsivo.

Tal como no Bootstrap 3, o Bootstrap 4 também permite usar a classe .form-control para os campos de preenchimento. No entanto, existem novas funcionalidades que foram implementadas nessa versão – como a mudança da classe .input-group-addon (descontinuada) para a nova classe .input-group-prepend (que permite usar ícones como labels).

Acede a este link do Bootstrap 4 para mais informação (em inglês). No nosso formulário, vamos "conter" cada campo de preenchimento com uma div que terá a classe .form-group.

O ficheiroindex.html deverá ter o seguinte HTML para o formulário:



 
  
   
    
      Get in Touch

Agora, vamos aos estilos:

main.css

.contact-form{
 margin: 6em 0;
 position: relative;  
}

.contact-form h1{
 padding:2em 1px;
 color: #F97300; 
}
.contact-form .right{
 max-width: 600px;
}
.contact-form .right .btn-secondary{
 background:  #F97300;
 color: #fff;
 border:0;
}
.contact-form .right .form-control::placeholder{
 color: #888;
 font-size: 16px;
}

Fonts

Para este projecto, usaremos a font Raleway, disponível através da Google Font Api.

Para isso, basta adicionarmos o seguinte link ao nosso ficheiro main.css:

@import url('https://fonts.googleapis.com/css?family=Raleway');

Vamos aplicar a nossa font usando o seguinte estilo global, que aplicará a font ao HTML e às tags de título:

html,h1,h2,h3,h4,h5,h6,a{
 font-family: "Raleway";
}

Efeito scroll

O último detalhe a acrescentar é o efeito de scrolling. Para tal, neste caso, vamos usar o JQuery. Não te preocupes se não estás familiarizado com o JQuery. Basta adicionares o seguinte código ao teu ficheiro main.js:

$(".navbar a").click(function(){
  $("body,html").animate({
   scrollTop:$("#" + $(this).data('value')).offset().top
  },1000)
  
 })

Acrescenta, então, um atributo data-value a cada link da barra de navegação:

De seguida, atribui a cada secção um atributo de id.

Nota: o atributo id terá de ser idêntico a cada atributo de data-value da barra de navegação:

Últimos retoques e conclusão

O Bootstrap 4 é uma excelente opção para construir aplicações web. Oferece excelente qualidade nos seus elementos de interface de usuário e é fácil de personalizar, integrar e usar. Ele também facilitará a inclusão de responsividade e, deste modo, melhorará a experiência de usuário dos visitantes do site.

Os ficheiros usados para este projecto podem ser encontrados neste repositório GitHub.

Se necessitarem de temas ou templates para Bootstrap, vejam este link, BootstrapBay, pois eles têm excelentes produtos

Confira o meu curso para aprender mais sobre Bootstrap 4:

Bootstrap 4 crash course: basic to advance | Said Hayani | Skillshare

Como passar na entrevista de programação – Dicas que me ajudaram a obter ofertas de emprego no Google, Airbnb e na Dropbox

Elizabete Nakamura — Wed, 11 Jan 2023 21:00:00 +0000

Artigo original: How to Rock the Coding Interview – Tips That Helped Me Land Job Offers from Google, Airbnb, and Dropbox

Em 2017, passei por algumas entrevistas de programação e recebi ofertas de várias grandes empresas de tecnologia. Foi naquele momento que decidi compartilhar o que tinha aprendido neste artigo.

Acabo de atualizá-lo para este ano para que seja superútil e relevante se você estiver procurando emprego agora.

Apesar de ter notas decentes tanto na minha disciplina básica de algoritmos, quanto na minha disciplina de estruturas de dados no curso de Ciência da Computação na universidade, estremeço ao pensar em passar por uma entrevista de programação que se concentre em algoritmos.

Assim, passei os últimos três meses descobrindo como melhorar minhas habilidades em programação para entrevistas e, no fim, recebi ofertas de grandes empresas de tecnologia, como Google, Facebook, Airbnb, Lyft, Dropbox e muitas outras.

Neste artigo, compartilharei as ideias e dicas que recebi ao longo do caminho. Candidatos experientes também podem esperar perguntas sobre design de sistemas, mas isso está fora do escopo deste artigo.

Muitos dos conceitos algorítmicos testados em entrevistas de programação não são aquilo que costumo usar no trabalho, onde sou um engenheiro de front-end (web). Naturalmente, me esqueci um pouco desses algoritmos e estruturas de dados, que aprendi principalmente durante o primeiro e o segundo anos da minha faculdade.

É estressante ter que produzir código (funcional) em uma entrevista enquanto alguém examina cada toque no teclado que você faz. O pior é que, como entrevistado, você é encorajado a comunicar seu processo de pensamento em voz alta ao entrevistador.

Eu costumava pensar que ser capaz de pensar, programar e comunicar simultaneamente era um feito impossível, até que percebi que a maioria das pessoas simplesmente não é boa em entrevistas de programação quando começam. Ser entrevistado é uma habilidade em que se pode melhorar estudando, preparando-se e praticando para isso.

Minha busca de emprego recente me levou a uma jornada para melhorar minhas habilidades para as entrevistas de programação. Os engenheiros de front-end gostam de se queixar de como o atual processo de contratação é ruim, pois as entrevistas técnicas podem incluir habilidades não relacionadas ao desenvolvimento de front-end. Por exemplo, escrever um algoritmo de resolução de labirintos e mesclar duas listas ordenadas de números. Como engenheiro de front-end, eu entendo bem o motivo da reclamação.

O front-end é um domínio especializado, onde os engenheiros têm que se preocupar com muitas questões relacionadas às compatibilidades do navegador, o Modelo de Objeto do Documento (DOM - Document Object Model), desempenho do JavaScript, layouts do CSS e assim por diante. É incomum para os engenheiros de front-end implementar alguns dos complexos algoritmos testados em entrevistas.

Em empresas como Facebook e Google, as pessoas são engenheiras de software em primeiro lugar, especialistas de domínio em segundo.

Infelizmente, as regras são estabelecidas pelas empresas, não pelos candidatos. Há uma grande ênfase nos conceitos gerais da informática, como algoritmos, padrões de design e estruturas de dados – habilidades essenciais que um bom engenheiro de software deve possuir. Se você quer o trabalho, você tem que jogar de acordo com as regras estabelecidas pelos mestres do jogo – e melhorar suas habilidades para as entrevistas de programação!

Este artigo está estruturado nas duas seções seguintes. Sinta-se à vontade para pular para a seção que interessa a você.

O formato das entrevistas de programação e como se preparar para elas.
Dicas úteis para cada tópico de algoritmos (arrays, árvores, programação dinâmica etc.), juntamente com perguntas práticas recomendadas pelo LeetCode para rever os conceitos centrais e melhorar nesses tópicos.

O conteúdo deste artigo pode ser encontrado aqui (em inglês). Lá, farei atualizações quando necessário.

Se você está interessado no conteúdo de front-end, confira meu manual de entrevistas para front-end aqui (em inglês).

Escolhendo uma linguagem de programação

Antes de mais nada, você precisa escolher uma linguagem de programação para sua entrevista de programação algorítmica.

A maioria das empresas permitirá que você programe na linguagem de sua escolha. A única exceção que eu conheço é o Google. Lá, é permitido que seus candidatos escolham apenas entre Java, C++, Python, Go ou JavaScript.

Na maioria das vezes, recomendo o uso de uma linguagem com a qual você esteja extremamente familiarizado, em vez de uma linguagem que é nova para você, mas que a empresa utiliza amplamente.

Há algumas linguagens que são mais adequadas do que outras para as entrevistas de programação. Também há algumas outras que você vai querer evitar, com certeza.

A partir da minha experiência como entrevistador, a maioria dos candidatos escolhe Python ou Java. Outras linguagens comumente selecionadas incluem JavaScript, Ruby e C++. Eu evitaria absolutamente linguagens de mais baixo nível, como o C ou o Go, simplesmente porque elas não possuem funções de biblioteca padrão e estruturas de dados.

Pessoalmente, o Python é normalmente a minha escolha para os algoritmos de programação durante as entrevistas. Ele é sucinto e tem uma enorme biblioteca de funções e estruturas de dados.

Uma das principais razões que me faz recomendar o Python é o fato de ele usar APIs consistentes, que operam em diferentes estruturas de dados, tais como len(), for ... in ... e notação de corte (do inglês, slicing) em sequências (strings, listas e tuplas). Obter o último elemento em uma sequência é arr[-1] e revertê-lo é simplesmente arr[::-1]. Você pode conseguir muito com pouca sintaxe em Python.

O Java também é uma escolha decente. Como, no entanto, você terá que declarar constantemente os tipos em seu código, isso significa digitar mais. Isso diminuirá a velocidade na qual você programa e digita. Essa questão fica mais aparente quando você tiver que escrever em um quadro branco durante entrevistas no local.

As razões para escolher ou não escolher C++ são similares às de Java. No fim, Python, Java, e C++ são escolhas decentes. Se você está usando Java há algum tempo e não tem tempo para se familiarizar com outra linguagem, recomendo que se mantenha fiel ao Java em vez de pegar o Python do zero. Isto o ajudará a evitar de ter que usar uma linguagem para o trabalho e outra para entrevistas. A maior parte do tempo, o que trava é o pensamento, não a escrita.

Uma exceção à convenção de permitir que o candidato "escolha a linguagem de programação que quiser" é quando a entrevista é para um cargo específico de domínio, como funções de engenheiro de front-end, iOS ou Android. Você precisa estar familiarizado com algoritmos de programação em JavaScript, Objective-C, Swift e Java, respectivamente.

Se você precisar usar uma estrutura de dados que a linguagem não suporte, como uma fila ou pilha em JavaScript, pergunte ao entrevistador se você pode assumir que tem uma estrutura de dados que implementa certos métodos com complexidades de tempo especificadas. Se a implementação dessa estrutura de dados não for crucial para a solução do problema, o entrevistador normalmente a permitirá.

Na realidade, estar ciente das estruturas de dados existentes e selecionar as estruturas apropriadas para resolver o problema em questão é mais importante do que conhecer os intrincados detalhes de implementação.

Revise sua Ciência da Computação básica

Se você estiver fora da faculdade há algum tempo, é altamente aconselhável rever os fundamentos de computação. Eu prefiro revisar enquanto pratico. Eu revejo minhas anotações da faculdade e reviso os vários algoritmos enquanto trabalho nos problemas de algoritmos do LeetCode e do Cracking the Coding Interview.

Se você estiver interessado em como as estruturas de dados são implementadas, confira Lago, um repositório do GitHub contendo estruturas de dados e exemplos de Algoritmos em JavaScript.

GitHub - yangshun/lago: 📕 Biblioteca de Algoritmos e Estruturas de Dados em TypeScript

Domínio através da prática

Em seguida, adquira familiaridade e domínio dos algoritmos e estruturas de dados em sua linguagem de programação escolhida.

Pratique e resolva questões de algoritmos na linguagem de sua escolha. Embora o Cracking the Coding Interview seja um bom recurso, prefiro resolver problemas digitando o código, deixando-o rodar e obtendo feedback instantâneo.

Há vários juízes on-line, tais como o LeetCode, o HackerRank e o CodeForces para você praticar perguntas on-line e se acostumar a linguagem. Pela minha experiência, as perguntas do LeetCode são mais parecidas com as perguntas feitas em entrevistas. As perguntas do HackerRank e do CodeForces são mais parecidas com as perguntas da programação competitiva.

Se você praticar perguntas suficientes do LeetCode, há uma boa chance de que você veja ou complete uma das suas perguntas reais de entrevista (ou alguma variante dela).

Aprenda e compreenda as complexidades de tempo e de espaço das operações comuns na sua linguagem escolhida. Para Python, esta página virá a calhar. Aprenda também sobre o algoritmo de ordenação subjacente a ser usado na função sort() da linguagem e as suas complexidades de tempo e de espaço (em Python é o TimSort, que é um híbrido).

Depois de completar uma pergunta do LeetCode, normalmente acrescento as complexidades de tempo e espaço do código escrito como comentários acima do corpo da função. Utilizo os comentários para me lembrar de comunicar a análise do algoritmo após ter completado a implementação.

Leia sobre o estilo de programação recomendado para a sua linguagem e mantenha-se fiel a ele. Se escolher Python, consulte o Guia de Estilo PEP 8 (em inglês). Se escolher Java, consulte o Guia de Estilo de Java do Google (em inglês).

Aprenda e esteja familiarizado com as armadilhas e problemas comuns da linguagem. Se os apontar durante a entrevista e se evitar cair neles, ganhará pontos a mais e impressionará o entrevistador, independentemente de o entrevistador estar familiarizado com a linguagem ou não.

Obtenha uma ampla exposição a questões de vários tópicos. Na segunda metade do artigo, menciono tópicos de algoritmos e as questões úteis para a prática de cada tópico. Faça cerca de 100 a 200 perguntas do LeetCode e você deverá se sair bem.

Se preferir cursos onde a aprendizagem seja mais estruturada, aqui ficam algumas recomendações. De modo algum é obrigatório fazer cursos on-line para passar em entrevistas.

O AlgoMonster visa ajudá-lo a passar na entrevista técnica no mais curto espaço de tempo possível. Criado por engenheiros do Google, o AlgoMonster utiliza uma abordagem baseada em dados para ensinar os padrões de perguntas-chave mais úteis e tem conteúdos para ajudar a rever rapidamente algoritmos e estruturas de dados básicos. O melhor de tudo é que o AlgoMonster não é baseado em assinaturas – pague uma taxa única e obtenha acesso vitalício.
Grokking the Coding Interview: Patterns for Coding Questions, da Educative, expande as questões práticas recomendadas neste artigo, mas aborda a prática a partir de uma perspectiva de padrão de perguntas, que é uma abordagem com a qual também concordo para a aprendizagem e com a qual me habituei pessoalmente a melhorar na programação de entrevistas. O curso permite praticar perguntas selecionadas em Java, Python, C++, JavaScript e também fornece exemplos de soluções nessas linguagens. Aprenda e compreenda os padrões em vez de memorizar as respostas.

Logicamente, pratique, pratique e pratique um pouco mais!

Fases de uma entrevista de programação

Parabéns! Você está pronto para pôr as suas capacidades em prática! Em uma entrevista de programação, será feita uma pergunta técnica pelo entrevistador. Você escreverá o código em tempo real, em um editor colaborativo (tela do telefone) ou em um quadro branco (no local) e terá 30 a 45 minutos para resolver o problema. É aqui que a verdadeira diversão começa!

O seu entrevistador procurará ver se você preenche os requisitos para o cargo. Cabe a você mostrar para ele que possui as competências necessárias. Inicialmente, pode parecer estranho falar enquanto programa, já que a maioria dos programadores não tem o hábito de explicar em voz alta os seus pensamentos enquanto escrevem o código.

No entanto, é difícil para o entrevistador saber o que você está pensando simplesmente olhando para o seu código. Se comunicar a sua abordagem ao entrevistador mesmo antes de começar a programar, pode validar a sua abordagem com eles. Dessa forma, os dois podem chegar a acordo sobre uma abordagem aceitável.

Preparação para uma entrevista remota

Para telas de telefones e entrevistas remotas, tenha à disposição um papel e uma caneta ou lápis para fazer anotações ou diagramas. Se for feita uma pergunta sobre árvores e gráficos, geralmente ajuda desenhar exemplos da estrutura de dados.

Use fones de ouvido. Certifique-se de que se encontra em um ambiente calmo. Não queira segurar o telefone com uma mão e escrever com a outra. Tente evitar o uso de alto-falantes. Se o feedback for ruim, a comunicação fica mais difícil. Ter que repetir apenas resultará em perda de tempo valioso.

O que fazer quando você receber a pergunta

Muitos candidatos começam a programar assim que ouvem a pergunta. Isso geralmente é um grande erro. Primeiro, reserve um momento e repita a pergunta para o entrevistador para ter certeza de que você entendeu a pergunta. Se você tiver entendido mal a pergunta, o entrevistador poderá esclarecê-la.

Sempre busque esclarecimento sobre a questão ao ouvi-la, mesmo que você ache que é clara. Você pode descobrir que escapou alguma coisa. Isso também permite ao entrevistador saber que você está atento aos detalhes.

Considere fazer as seguintes perguntas:

Qual é o tamanho da entrada?
Qual é o tamanho do intervalo de valores?
Que tipo de valores existem? Existem números negativos? Pontos flutuantes? Haverá entradas vazias?
Há duplicatas dentro da entrada?
Quais são alguns casos extremos da entrada?
Como a entrada é armazenada? Se você receber um dicionário de palavras, é uma lista de strings ou um trie?

Depois de ter esclarecido suficientemente o escopo e a intenção do problema, explique ao entrevistador sua abordagem de alto nível, mesmo que seja uma solução ingênua. Se você estiver preso, considere várias abordagens e explique em voz alta porque elas podem ou não funcionar. Às vezes, seu entrevistador pode deixar passar dicas que o levarão no caminho certo.

Comece com uma abordagem de força bruta. Comunique-a ao entrevistador. Explique as complexidades de tempo e espaço e esclareça o motivo de tentar a força bruta é ruim. É improvável que a abordagem de força bruta seja aquela que você utilizará em programação. Neste ponto, o entrevistador normalmente fará a temida pergunta "Podemos fazer melhor?". Isso significa que estão procurando por uma abordagem mais otimizada.

Essa é geralmente a parte mais difícil da entrevista. Em geral, procure por trabalhos repetidos e tente otimizá-los, potencialmente armazenando o resultado calculado em algum lugar. Consulte-o mais tarde, em vez de calculá-lo novamente. A seguir, forneço algumas dicas para abordar detalhadamente questões específicas do tópico.

Só comece a programar depois que você e seu entrevistador tiverem concordado em uma abordagem e que você tenha recebido um sinal positivo para seguir em frente.

Começando a programar

Use um bom estilo para escrever seu código. Ler código escrito por outros geralmente não é uma tarefa agradável. Ler código horrivelmente formatado escrito por outros é ainda pior. Seu objetivo é fazer seu entrevistador entender seu código para que possa avaliar rapidamente se seu código faz o que se supõe que faça e se resolve um determinado problema.

Use nomes de variáveis claros e evite nomes que sejam letras únicas, a menos que sejam para a iteração. Entretanto, se você estiver programando em um quadro branco, evite usar nomes extensos de variáveis. Isso reduz a quantidade de escrita que você terá que fazer.

Sempre explique ao entrevistador o que você está escrevendo ou digitando. Não se trata de ler, textualmente, para o entrevistador o código que você está produzindo. Fale sobre a seção do código que você está implementando atualmente em nível superior. Explique por que ele é escrito assim e o que está tentando alcançar.

Ao copiar e colar em código, considere se é necessário. Às vezes, é; às vezes, não é. Se você se encontrar copiando e colando um grande pedaço de código abrangendo várias linhas, provavelmente é um indicador de que você pode reestruturar o código, extraindo essas linhas em uma função. Se for apenas uma única linha que você copiou, geralmente está bem.

Entretanto, lembre-se de alterar as respectivas variáveis em sua linha de código copiada, onde for relevante. Erros de cópia e colagem são uma fonte comum de bugs, mesmo na programação do dia a dia!

Após a programação

Depois de terminar de programar, não anuncie imediatamente ao entrevistador que você está pronto. Na maioria dos casos, seu código geralmente não está perfeito. Ele pode conter bugs ou erros de sintaxe. O que você precisa fazer é revisar seu código.

Primeiro, olhe seu código do início ao fim. Olhe para ele como se fosse escrito por outra pessoa, como se você o estivesse vendo pela primeira vez e tentando detectar erros nele. Isso é exatamente o que seu entrevistador estará fazendo. Revise e corrija quaisquer problemas que você possa encontrar.

Em seguida, apresente pequenos casos de teste e execute o código passo a passo (não seu algoritmo) com essas amostras de entrada.

Os entrevistadores gostam quando você lê suas mentes. O que eles costumam fazer depois que você termina de programar é fazer você escrever testes. É uma grande vantagem se você escrever testes para seu código antes mesmo que eles o peçam para fazer isso. Você deve estar emulando um depurador ao passar por seu código. Anote ou diga a eles os valores de certas variáveis enquanto você percorre com o entrevistador as linhas de código.

Se houver grandes pedaços duplicados de código na sua solução, reestruture o código para mostrar ao entrevistador que você valoriza a programação de qualidade. Além disso, procure lugares onde você possa fazer uma avaliação de curto-circuito.

Por fim, forneça as complexidades de tempo e espaço de seu código e explique por que ele é assim. Você pode fazer anotações em partes do seu código com suas várias complexidades de tempo e espaço para demonstrar sua compreensão do código. Você pode até mesmo fornecer as APIs de sua linguagem de programação escolhida. Explique quaisquer trade-offs na sua abordagem atual em comparação com abordagens alternativas, possivelmente em termos de tempo e espaço.

Se seu entrevistador estiver satisfeito com a solução, a entrevista geralmente termina aqui. Também é comum que o entrevistador faça perguntas de extensão, como, por exemplo, sobre como você lidaria com o problema se toda a entrada for muito grande para caber na memória, ou se a entrada chegar como uma stream. Essa é uma pergunta posterior comum no Google, onde eles se preocupam muito com a escala.

A resposta é geralmente uma abordagem de dividir e conquistar – realizar o processamento distribuído dos dados e somente ler certas partes da entrada do disco para a memória, gravar a saída de volta para o disco e combiná-los mais tarde.

Prática com entrevistas simuladas

Os passos mencionados acima podem ser repetidamente ensaiados até que você os tenha interiorizado completamente e eles se tornem normais para você. Uma boa maneira de praticar é fazer uma parceria com um amigo e revezar nas entrevistas um com o outro.

Um grande recurso para a preparação de entrevistas de programação é o interview .io. Essa plataforma oferece entrevistas práticas gratuitas e anônimas com engenheiros do Google e do Facebook, que podem levar a empregos e estágios reais.

Em virtude de ser anônimo durante a entrevista, o processo de entrevista inclusiva é imparcial e de baixo risco. No final da entrevista, tanto o entrevistador quanto o entrevistado podem dar feedback um ao outro com o objetivo de ajudar um ao outro a melhorar.

Sair-se bem nas entrevistas simuladas desbloqueará a página de empregos para os candidatos e permitirá que eles marquem entrevistas (também anônimas) com empresas de ponta, como Uber, Lyft, Quora, Asana, entre outras. Para aqueles que são novatos nas entrevistas de programação, uma entrevista demonstrativa pode ser visualizada neste site. Observe que o site exige que os usuários façam o registro.

Já usei a interviewing.io, tanto como entrevistador quanto como entrevistado. A experiência foi ótima. Aline Lerner, a CEO e cofundadora do interviewing.io, e sua equipe são apaixonados por revolucionar o processo de entrevistas de programação e por ajudar os candidatos a melhorar suas habilidades de entrevista.

Ela também publicou uma série de artigos relacionados às entrevistas de programação no blog interviewing.io. Recomendo inscrever-se o mais cedo possível no interviewing.io, mesmo que ele esteja em estágio beta, para aumentar a probabilidade de receber um convite.

Outra plataforma que permite praticar entrevistas de programação é a Pramp. Enquanto a interview.io combina potenciais candidatos a empregos com entrevistadores experientes em programação, a Pramp adota uma abordagem diferente. A Pramp combina você com outro colega que também é um candidato a emprego. Os dois se revezam assumindo as funções de entrevistador e entrevistado. A Pramp também prepara perguntas e fornece soluções e dicas para orientar o entrevistado.

Vá em frente e conquiste

Depois de fazer uma quantidade razoável de perguntas no LeetCode e de ter prática suficiente em entrevistas simuladas, vá em frente e ponha à prova suas novas habilidades de entrevista.

Inscreva-se em suas empresas favoritas ou, melhor ainda, obtenha indicações de seus amigos que trabalham para essas empresas. As indicações tendem a ser notadas mais cedo e a ter uma taxa de resposta mais rápida do que se você se candidatar sem uma indicação. Boa sorte!

Dicas práticas para questões de programação

Esta seção mergulha profundamente em dicas práticas para tópicos específicos de algoritmos e estruturas de dados que aparecem frequentemente em questões de programação. Muitas questões de algoritmos envolvem técnicas que podem ser aplicadas a questões de natureza similar.

Quanto mais técnicas você tiver em seu arsenal, maiores serão suas chances de passar na entrevista. Para cada tópico, há também uma lista de perguntas recomendadas, que é valiosa para dominar os conceitos centrais. Algumas das perguntas só estão disponíveis com uma assinatura paga do LeetCode, que, na minha opinião, vale o dinheiro se você conseguir um emprego.

Dicas gerais

Valide sempre a entrada em primeiro lugar. Verifique se as entradas são inválidas, vazias, negativas ou diferentes. Nunca assuma que são dados parâmetros válidos. Como alternativa, esclareça com o entrevistador se você pode assumir que a entrada é válida (geralmente, sim), o que pode poupar seu tempo de escrever o código que faz a validação da entrada.

Há algum requerimento de complexidade de tempo e espaço ou restrições?

Verificar a existência de erros off-by-one (texto em inglês).

Em linguagens onde não há coerção automática de tipo, verifique se a concatenação de valores é do mesmo tipo: int, str e list.

Depois de terminar seu código, use alguns exemplos de entradas para testar sua solução.

O algoritmo deve ser executado várias vezes, talvez em um servidor da web? Em caso positivo, a entrada pode provavelmente ser pré-processada para melhorar a eficiência em cada chamada à API.

Use uma mistura dos paradigmas de programação funcional e imperativa:

Escreva funções puras com a maior frequência possível.
Use funções puras porque são mais fáceis de pensar a respeito e podem ajudar a reduzir erros em sua implementação.
Evite a alteração dos parâmetros passados para sua função, especialmente se eles forem passados por referência, a menos que você esteja seguro do que está fazendo.
Atinja um equilíbrio entre precisão e eficiência. Use a quantidade certa de código funcional e imperativo, quando apropriado. A programação funcional é normalmente cara em termos de complexidade espacial devido à não mutação e à alocação repetida de novos objetos. Por outro lado, o código imperativo é mais rápido porque você opera com objetos existentes.
Evite confiar em variáveis globais mutáveis. As variáveis globais introduzem o estado.
Certifique-se de que você não mudará acidentalmente as variáveis globais, especialmente se você tiver que confiar nelas.

Geralmente, para melhorar a velocidade de um programa, podemos escolher entre usar uma estrutura de dados ou um algoritmo apropriado ou usar mais memória. É uma troca clássica de espaço e tempo.

As estruturas de dados são suas armas. Escolher a arma certa para a batalha certa é a chave para a vitória. Conheça os pontos fortes de cada estrutura de dados e a complexidade de tempo para suas várias operações.

As estruturas de dados podem ser aumentadas para alcançar uma complexidade de tempo eficiente através de diferentes operações. Por exemplo, um HashMap pode ser usado juntamente com uma lista duplamente vinculada para alcançar a complexidade de tempo O(1) tanto para a operação de get como para a de put em um cache LRU (em inglês, onde LRU significa "menos recentemente usado").

Os HashMaps são provavelmente a estrutura de dados mais comumente usada para questões de algoritmos. Se você estiver preso a uma pergunta, seu último recurso pode ser enumerar através das possíveis estruturas de dados (felizmente não existem tantas) e considerar se cada uma delas pode ser aplicada ao problema. Isto tem funcionado para mim às vezes.

Se você estiver fazendo coisas apressadamente em seu código, declare isso em voz alta ao seu entrevistador e explique a ele o que você faria fora de um ambiente de entrevista (sem restrições de tempo). Por exemplo, explique que você escreveria uma regex para fazer o parsing de uma string em vez de usar split, que não cobre todos os casos.

Sequência

Observações

Arrays e strings são considerados sequenciais (uma string é uma sequência de caracteres). Há dicas para lidar tanto com arrays quanto com strings que serão abordadas aqui.

Há valores duplicados na sequência? Eles afetariam a resposta?

Verifique a sequência fora dos limites.

Esteja atento ao fatiamento (do inglês, slicing) ou à concatenação de sequências em seu código. Tipicamente, o fatiamento e as sequências concatenadas requerem tempo O(n). Use índices de início e fim para demarcar um subarray ou uma substring sempre que possível.

Às vezes, você percorre a sequência a partir do lado direito em vez do lado esquerdo.

Dominar a técnica de janela deslizante (texto em inglês) que se aplica a muitos problemas de substring ou subarray.

Quando são dadas duas sequências para processar, é comum ter um índice por sequência a ser percorrida. Por exemplo, usamos a mesma abordagem para unir dois arrays ordenados.

Casos limítrofes

Sequência vazia
Sequência com 1 ou 2 elementos
Sequência com elementos repetidos

Array

Observações

O array é ordenado ou parcialmente ordenado? Se for, alguma forma de busca binária deve ser possível. Isto geralmente significa que o entrevistador está procurando uma solução que seja mais rápida do que o O(n).

Você pode ordenar o array? Às vezes, ordenar o array primeiro pode simplificar significativamente o problema. Certifique-se de que a ordem dos elementos do array não precisa ser preservada antes de tentar ordená-lo.

Para perguntas onde a soma ou a multiplicação de um subarray está envolvida, a pré-computação usando hashing ou um prefixo, soma de sufixos ou produto pode ser útil.

Se você receber uma sequência e o entrevistador pedir espaço O(1), talvez seja possível usar o próprio array como uma tabela de hash. Por exemplo, se o array tiver valores apenas de 1 a N, onde N é o comprimento do array, deixe negativo o valor naquele índice (menos um) para indicar a presença daquele número.

Perguntas práticas (exemplos em inglês do LeetCode)

Binário

Links de estudo

Bits, bytes, construindo com binário (em inglês)

Observações

Às vezes, são feitas perguntas que envolvem representações binárias e operações bitwise. Você deve saber como converter um número de decimal para binário e vice-versa em sua linguagem de programação escolhida.

Alguns trechos úteis:

O teste do k-ésimo bit está definido: num & (1 << k) != 0
Defina o k-ésimo bit: num |= (1 < << k)
Desligue o k-ésimo bit: num &= ~(1 <<< k)
Alterne o k-ésimo bit: num ^= (1 < << k)
Para verificar se um número é uma potência de 2: num & num - 1 == 0.

Casos limítrofes

Verificação de sobrefluxo/baixo fluxo
Números negativos

Perguntas práticas (exemplos em inglês do LeetCode)

Programação dinâmica

Links de estudo

Desmistificando a programação dinâmica (texto em inglês)

Observações

A Programação Dinâmica (DP) é normalmente usada para resolver problemas de otimização. Alaina Kafkes escreveu um artigo fantástico sobre a solução de problemas de DP. Você deve lê-lo.

A única maneira de melhorar no DP é com a prática. É preciso muita prática para reconhecer que um problema pode ser resolvido pela PD.

Para otimizar o espaço, às vezes não é necessário armazenar a tabela de DP inteira na memória. Os dois últimos valores ou as duas últimas filas da matriz serão suficientes.

Perguntas práticas (exemplos em inglês do LeetCode)

Geometria

Observações

Ao comparar a distância euclidiana entre dois pares de pontos, o uso de dx² + dy² é suficiente. É desnecessário estabelecer a raiz quadrada do valor.

Para descobrir se dois círculos se sobrepõem, verifique se a distância entre os dois centros dos círculos é menor do que a soma de seus raios.

Grafos

Links de estudo (textos em inglês)

Observações

Esteja familiarizado com as várias representações de grafos e algoritmos de pesquisa de grafos, bem como com suas complexidades de tempo e espaço.

Você pode receber uma lista de arestas e ser encarregado de construir seu próprio grafo a partir das arestas para realizar uma travessia. As representações de grafos comuns são:

Matriz adjacente
Lista adjacente
HashMap dos HashMaps

Algumas entradas parecem ser árvores, mas, na verdade, são grafos. Esclareça isto com seu entrevistador. Nesse caso, você terá que lidar com ciclos e manter um conjunto de nós visitados quando estiver percorrendo os grafos.

Algoritmos de busca de grafos

Comum: busca primeiramente em largura (BFS), busca primeiramente em profundidade (DFS)
Incomum: ordenação topológica, o algoritmo de Dijkstra
Raro: algoritmo Bellman-Ford, algoritmo Floyd-Warshall, algoritmo Prim e algoritmo Kruskal

Nas entrevistas de programação, os grafos são comumente representados como matrizes 2D, onde as células são os nós e cada célula pode percorrer até suas células adjacentes (para cima, para baixo, para a esquerda e para a direita). Portanto, é importante estar familiarizado com a travessia de uma matriz 2-D.

Ao atravessar recursivamente a matriz, certifique-se sempre de que sua próxima posição esteja dentro dos limites da matriz. Mais dicas para fazer a DFS em uma matriz podem ser encontradas aqui (em inglês). Um modelo simples para fazer a DFS em uma matriz é algo parecido com isto:

def traverse(matrix):
  rows, cols = len(matrix), len(matrix[0])
  visited = set()
  directions = ((0, 1), (0, -1), (1, 0), (-1, 0))
  def dfs(i, j):
    if (i, j) in visited:
      return
    visited.add((i, j))
    # Traverse neighbors
    for direction in directions:
      next_i, next_j = i + direction[0], j + direction[1]
      if 0 <= next_i < rows and 0 <= next_j < cols: # Check boundary
        # Add any other checking here ^
        dfs(next_i, next_j)
  for i in range(rows):
    for j in range(cols):
      dfs(i, j)

Casos limítrofes

Grafo vazio
Grafo com um ou dois nós
Grafos desconjuntados
Grafos com ciclos

Perguntas práticas (exemplos em inglês do LeetCode)

Intervalo

Observações

Perguntas de intervalo são perguntas que dão uma série de arrays de dois elementos (um intervalo). Os dois valores representam um valor inicial e um valor final. As perguntas de intervalo são consideradas parte da família de arrays, mas envolvem algumas técnicas comuns. Portanto, elas têm sua própria seção especial.

Um exemplo de intervalo de arrays: [[1, 2], [4, 7]].

As perguntas de intervalo podem ser complicadas para aqueles que não têm experiência com elas. Isto se deve ao grande número de casos a serem considerados quando os arrays de intervalo se sobrepõem.

Esclareça com o entrevistador se [1, 2] e [2, 3] são considerados intervalos sobrepostos, pois isso afeta a forma como você vai escrever suas verificações de igualdade.

Uma rotina comum para perguntas de intervalo é ordenar o conjunto de intervalos pelo valor inicial de cada intervalo.

Esteja familiarizado com escrever código para verificar se dois intervalos se sobrepõem e para unir dois intervalos sobrepostos:

def is_overlap(a, b):
  return a[0] < b[1] and b[0] < a[1]
  
def merge_overlapping_intervals(a, b):
  return [min(a[0], b[0]), max(a[1], b[1])]

Casos limítrofes

Intervalo único
Intervalos não sobrepostos
Um intervalo totalmente consumido dentro de outro intervalo
Intervalos em duplicata

Perguntas práticas (exemplos em inglês do LeetCode)

Lista vinculada

Observações

Como os arrays, listas vinculadas são usadas para representar dados sequenciais. O benefício das listas vinculadas é que a inserção e exclusão de código de qualquer parte da lista é O(1), enquanto, nos arrays, os elementos têm que ser mudados.

Adicionar um nó fictício na cabeça e/ou na cauda pode ajudar a lidar com muitos casos limítrofes onde as operações têm que ser realizadas na cabeça ou na cauda. A presença de nós fictícios garante que as operações nunca terão sido executadas na cabeça ou na cauda. Os nós fictícios removem a dor de cabeça de escrever verificações condicionais para lidar com indicações nulas. Certifique-se de removê-los ao final da operação.

Às vezes, os problemas de listas vinculadas podem ser resolvidos sem armazenamento adicional. Tente pegar ideias emprestadas para reverter um problema de lista vinculada.

Para exclusão em listas vinculadas, você pode modificar os valores dos nós ou alterar os ponteiros dos nós. Você pode precisar manter uma referência ao elemento anterior.

Para particionar as listas vinculadas, crie duas listas vinculadas separadas e junte-as novamente.

Os problemas de listas vinculadas compartilham semelhanças com problemas de array. Pense em como você resolveria um problema de array e o aplicaria a uma lista vinculada.

Duas abordagens de ponteiro também são comuns para listas vinculadas:

Obtendo o k-ésimo nó a partir do último nó: use dois ponteiros, onde um está k nós à frente do outro. Quando o nó à frente chega ao fim, o outro nó está k nós atrás.
Detectando ciclos: use dois ponteiros, onde um ponteiro aumenta duas vezes mais do que o outro. Se os dois ponteiros se encontrarem, significa que há um ciclo.
Obtendo o nó do meio: use dois ponteiros. Um ponteiro incrementa duas vezes mais que o outro. Quando o nó mais rápido chegar ao final da lista, o mais lento estará no meio.

Esteja familiarizado com as seguintes rotinas, pois muitas perguntas da lista vinculada fazem uso de uma ou mais destas rotinas em sua solução.

Contar o número de nós na lista vinculada
Reverter uma lista vinculada no local
Encontre o nó central da lista vinculada usando ponteiros rápidos ou lentos
Fazer a fusão (do inglês, merge) de duas listas juntas

Casos limítrofes

Nó único
Dois nós
A lista vinculada tem um ciclo. Esclareça com o entrevistador se pode haver um ciclo na lista. Normalmente, a resposta é não.

Perguntas práticas (exemplos em inglês do LeetCode)

Matemática

Observações

Se o código envolver divisão ou módulo, lembre-se de verificar a divisão ou o módulo em função do caso com 0 (zero).

Quando uma pergunta envolve "um múltiplo de um número", o módulo pode ser útil.

Verifique e administre overflow e underflow se estiver usando uma linguagem tipada como Java e C++. No mínimo, mencione que o overflow ou que o underflow é possível e pergunte se você precisa lidar com ele.

Considere números negativos e números de ponto flutuante. Isso pode parecer óbvio, mas quando você está sob pressão em uma entrevista, muitos pontos óbvios passam despercebidos.

Se a pergunta for para implementar um operador como potência, raiz quadrada ou divisão, e se for para ser mais rápido que O(n), a busca binária é geralmente a abordagem.

Algumas fórmulas comuns

Soma de 1 para N = (n+1) * n/2
Soma de progressões geométricas = 2⁰ + 2¹ + 2² + 2³ + … 2^n = 2^(n+1)-1
Permutações de N = N! / (N-K)!
Combinações de N = N! / (K! * (N-K)!)

Casos limítrofes

Divisão por 0
Overflow e underflow de números inteiros

Perguntas práticas (exemplos em inglês do LeetCode)

Matriz

Notas

Uma matriz é um array bidimensional. As questões envolvendo matrizes estão geralmente relacionadas à programação dinâmica ou à travessia do grafo.

Para perguntas que envolvam travessia ou programação dinâmica, faça uma cópia da matriz com as mesmas dimensões e inicializada com valores vazios. Utilize esses valores para armazenar o estado visitado ou a tabela de programação dinâmica. Esteja familiarizado com esta rotina:

rows, cols = len(matrix), len(matrix[0])
copy = [[0 for _ in range(cols)] for _ in range(rows)

Muitos jogos baseados em grade podem ser modelados como uma matriz, como, por exemplo, o Jogo da Velha, Sudoku, palavras cruzadas, Ligue 4 e Batalha Naval. Não é raro ser solicitada a verificação da condição de vencedor do jogo. Para jogos como o Jogo da Velha, o Ligue 4 e as Palavras Cruzadas, a verificação tem que ser feita vertical e horizontalmente. Um truque é escrever o código para verificar a matriz para as células horizontais. Em seguida, transpor a matriz, reutilizando a lógica usada para verificação horizontal para verificar as células originalmente verticais (que agora são horizontais).
A transposição de uma matriz em Python é simples:

transposed_matrix = zip(*matrix)

Casos limítrofes

Matriz vazia. Verifique se nenhuma das matrizes tem comprimento 0.
Matriz 1 x 1.
Matriz com apenas uma linha ou coluna.

Perguntas práticas (exemplos em inglês do LeetCode)

Recursão

Observações

A recursividade é útil para a permutação, pois gera todas as combinações e perguntas baseadas em árvores. Você deve saber como gerar todas as permutações de uma sequência, bem como lidar com as duplicatas.

Lembre-se sempre de definir um caso base para que sua recorrência termine.

A recorrência utiliza implicitamente uma pilha. Assim, todas as abordagens recursivas podem ser reescritas iterativamente usando uma pilha.

Cuidado com os casos em que o nível de recorrência vai muito fundo e causa um transbordamento de pilha (o limite padrão em Python é 1000). Você pode receber pontos de bônus por apontar isso para o entrevistador.

A recursividade nunca terá complexidade espacial O(1) porque uma pilha está envolvida, a menos que haja uma otimização da chamada de cauda (TCO). Descubra se a linguagem escolhida dá suporte à TCO.

Perguntas práticas (exemplos em inglês do LeetCode)

String

Observações

Leia as dicas acima sobre sequências. Elas também se aplicam às strings.

Pergunte sobre o conjunto de caracteres de entrada e a distinção entre maiúsculas e minúsculas. Normalmente, os caracteres são limitados a caracteres latinos em letras minúsculas – por exemplo, de a até z.

Quando você precisa comparar strings onde a ordem não é importante (como o anagrama), você pode considerar o uso de um HashMap como um contador. Se sua linguagem tiver uma classe de contador embutida como no Python, peça para usar isso em seu lugar.

Se você precisa manter um contador de caracteres, um erro comum é dizer que a complexidade de espaço necessária para o contador é O(n). O espaço necessário para um contador é O(1) e não O(n). Isto porque o limite superior é o intervalo de caracteres, que, normalmente, é uma constante fixa de 26. O conjunto de entrada é apenas de caracteres latinos em letras minúsculas.

As estruturas de dados comuns para a busca eficiente de strings são:

Algoritmos de strings comuns são:

Rabin Karp, que realiza buscas eficientes de substrings, utilizando um hash "rolante"
KMP, que realiza buscas eficientes de substrings

Caracteres não repetentes

Use uma máscara de 26 bits para indicar quais caracteres latinos em letras minúsculas estão dentro da string.

mask = 0
for c in set(word):
  mask |= (1 << (ord(c) - ord('a')))

Para determinar se duas strings têm caracteres em comum, execute & nas duas máscaras de bits. Se o resultado não for zero, mascara_a & mascara_b > 0 , então as duas strings têm caracteres em comum.

Anagrama

Um anagrama é um trocador de palavras ou jogo de palavras. É o resultado de reorganizar as letras de uma palavra ou frase para produzir uma nova palavra ou frase, enquanto usa todas as letras originais apenas uma vez. Em entrevistas, normalmente só nos preocupamos com palavras sem espaços nelas.

Para determinar se duas strings são anagramas, existem algumas abordagens plausíveis:

A ordenação de ambas as strings deve produzir a mesma string resultante. Isso leva tempo O(nlgn) e espaço O(lgn).
Se mapearmos cada caractere para um número primo e multiplicarmos cada número mapeado juntos, os anagramas devem ter o mesmo múltiplo (decomposição do fator primo). Isto leva tempo O(n) e espaço O(1).
A contagem da frequência dos caracteres ajudará a determinar se duas strings são anagramas. Isso também leva tempo O(n) e espaço O(1)

Palíndromo

Um palíndromo é uma palavra, frase, número ou outra sequência de caracteres que é lido do mesmo modo para trás e para frente, tais como "madam" ou "racecar".

Aqui estão maneiras de determinar se uma string é um palíndromo:

Reverta a string e ela deve ser igual a si mesma.
Ter dois ponteiros no início e no final da string. Mova os ponteiros para dentro até que eles se encontrem. Em qualquer momento, os caracteres em ambos os ponteiros devem coincidir.

A ordem dos caracteres dentro da string importa, portanto, os HashMaps geralmente não são úteis.

Quando se trata de contar o número de palíndromos, um truque comum é ter dois ponteiros que se movem para fora e para longe do meio. Note que os palíndromos podem ter um comprimento par ou ímpar. Para cada posição de pivô central, é necessário verificá-la duas vezes: uma vez que inclua o caractere e outra sem o caractere.

Para as substrings, você pode terminar antecipadamente uma vez que não haja correspondência.
Para as subsequentes, use programação dinâmica, pois existem subproblemas sobrepostos. Confira esta pergunta (em inglês, no LeetCode).

Casos limítrofes

String vazia
String de um único caractere
Strings com apenas um caractere distinto

Perguntas práticas (exemplos em inglês do LeetCode)

Árvore

Links de estudo (em inglês)

Folheie até as árvores binárias

Observações

Uma árvore é um grafo acíclico, não direcionado e conectado.

A recursividade é uma abordagem comum para as árvores. Quando você perceber que o problema da subárvore pode ser usado para resolver o problema inteiro, tente usar a recursividade.

Ao utilizar a recorrência, lembre-se sempre de verificar o caso base, geralmente onde o nó é nulo.

Quando você for solicitado a atravessar uma árvore por nível, use a busca em profundidade.

Às vezes, é possível que sua função recursiva precise retornar dois valores.

Se a questão envolver a soma dos nós ao longo do caminho, certifique-se de verificar se os nós podem ser negativos.

Você deve estar muito familiarizado com a escrita de travessias de pré-ordem, dentro da ordem e pós-ordem recursivamente. Como extensão, desafie-se escrevendo-as iterativamente. Às vezes, os entrevistadores pedem aos candidatos a abordagem iterativa, especialmente se o candidato terminar de escrever a abordagem recursiva muito rapidamente.

Árvore binária

A travessia em ordem de uma árvore binária é insuficiente para serializar uma árvore de maneira única. Também é necessária a travessia pré-ordem ou pós-ordem.

Árvore de busca binária - Binary search tree (BST)

A travessia em ordem de uma BST dará a você todos os elementos em ordem.

Esteja muito familiarizado com as propriedades de uma BST. Valide se uma árvore binária é uma BST. Isso aparece com mais frequência do que o esperado.

Quando uma pergunta envolve uma BST, o entrevistador geralmente está procurando uma solução que funcione mais rápido que a O(n).

Casos limítrofes

Árvore vazia
Nó único
Dois nós
Árvore muito desbalanceada (como uma lista vinculada)

Perguntas práticas (exemplos em inglês do LeetCode)

Tries

Links de estudo (em inglês)

Observações

Tries são árvores especiais (árvores de prefixos) que tornam mais eficiente a busca e o armazenamento de strings. As tries têm muitas aplicações práticas, tais como a realização de buscas e o fornecimento de autocompletar. É útil conhecer essas aplicações comuns para que você possa identificar facilmente quando um problema pode ser resolvido de modo eficiente usando uma trie.

Às vezes, o pré-processamento de um dicionário de palavras (dado em uma lista) em uma trie melhorará a eficiência da busca por uma palavra de comprimento k, entre n palavras. A busca torna-se O(k) em vez de O(n).

Esteja familiarizado com a implementação, a partir do zero, de uma classe Trie e seus métodos add, remove e search.

Perguntas práticas (exemplos em inglês do LeetCode)

Heap

Links de estudo (em inglês)

Aprendendo a amar os Heaps

Observações

Se você vir um k superior ou inferior mencionado na pergunta, geralmente, é um sinal de que uma heap pode ser usada para resolver o problema, como em K elementos mais frequentes.

Se você precisar dos k elementos superiores, use uma heap de tamanho k. Faça a iteração através de cada elemento, inserindo-o na heap. Sempre que o tamanho da heap exceder k, remova o elemento menor. Isso garantirá que você tenha os k elementos maiores.

Perguntas práticas (exemplos em inglês do LeetCode)

Conclusão

As entrevistas de programação são difíceis. Felizmente, no entanto, você pode melhorar para elas, estudando e praticando para elas e fazendo entrevistas simuladas.

Recapitulando: para se sair bem nas entrevistas de programação:

Decida sobre uma linguagem de programação
Estude fundamentos da Ciência da Computação
Pratique a solução de questões de algoritmos
Internalize o que se faz e o que não se faz nas entrevistas
Pratique através de entrevistas técnicas simuladas
Faça a entrevista com sucesso e consiga o emprego

Seguindo essas etapas, você melhorará suas habilidades em entrevistas de programação e estará um passo mais próximo (ou provavelmente mais) de conseguir o emprego dos seus sonhos.

Sucesso para você!

O conteúdo deste artigo também pode ser encontrado aqui. Atualizações futuras serão publicadas lá. Pedidos de sugestões e correções são bem-vindos.

Se você gostou deste artigo, compartilhe-o com seus amigos!

Você pode seguir o autor no GitHub e no Twitter.

Como fazer o deploy de um site da web estático, gratuitamente em apenas 3 minutos, diretamente do Google Drive usando o Fast.io

Dairenkon Majime Rezende de Souza — Wed, 28 Dec 2022 21:00:00 +0000

Artigo original: How to deploy a static website for free in just 3 minutes straight from your Google Drive, using Fast.io

Neste artigo, eu mostrarei como implementar um site da web estático, gratuitamente em apenas 3 minutos, utilizando serviços de armazenamento na nuvem como o Google Drive ou o Dropbox.

Não – não fui pago nem pelo fast.io, nem pelo freeCodeCamp para fazer este artigo. Não tenho nenhum tipo de relação com eles. Só estou escrevendo este artigo porque achei a ferramenta deles incrível e útil para hospedar sites da web estáticos e de graça.

Observação: as informações deste tutorial estão desatualizadas, mas o artigo fica aqui para a posterioridade. Veja alguns artigos dos quais que você talvez goste com tópicos similares.

O que é o Fast.io?

O fast.io é uma solução criada pela Mediafire para simplificar o modo como a web funciona. Em poucas palavras, o objetivo deles é deixar sua vida mais fácil, tornando a web mais acessível e gerenciável.

Ele foi lançado ao final de 2019. Estou compartilhando com você agora.

Como funciona

Ao usar o Fast.io, você poderá se conectar com a nuvem (pelo Google Drive, Dropbox, entre outros), escolher o nome do seu site da web e fazer o deploy do seu conteúdo, tudo isso em apenas alguns cliques.

Se o conteúdo estiver pronto, são precisos apenas 3 minutos para colocar seu conteúdo on-line e torná-lo acessível para qualquer pessoa.

Uma vez que seu site da web estiver on-line, você pode configurá-lo, adicionar um domínio customizado e se conectar com o Google Analytics. Assim, você poderá saber quantas pessoas você está atingindo.

Eu não tinha mencionado isso antes, mas o serviço atualiza automaticamente seu site quando você modifica os arquivos fontes. Por exemplo, se você estiver usando o Google Drive para compartilhar seu conteúdo, seu site será atualizado quando você modificar algo na sua página HTML.

Fast.io - Como funciona

Provedores de armazenamento disponíveis

Aqui está uma lista de provedores de armazenamento que eu usaria se eu fosse publicar meu site hoje:

GitHub
Dropbox
Google Drive
Box
Mediafire
OneDrive

Como você pode imaginar, essa lista crescerá à medida que novos serviços forem aparecendo. Porém, mesmo hoje, você tem uma variedade de possibilidades para hospedar seu site da web estático.

Concorrência

Já existem algumas empresas que permitem que você coloque rapidamente um site da web estático on-line. As soluções mais famosas são o GitHub Pages, o Heroku e o Netlify.

Não estou dizendo que o Fast.io é necessariamente o melhor, mas eu gosto da simplicidade do processo de fazer o deploy de um site básico.

Recado rápido: se você quer fazer o deploy de algo mais complexo – como um site em Python Flask – não poderá utilizar o Fast.io. Nesse caso, eu recomendo fortemente usar o Heroku.

Como eu disse anteriormente, serei sincero com você. O fast.io é um excelente serviço para determinadas tarefas.

O que é um site da web estático?

Antes de mostrar como fazer o deploy de seu site, acho que seja essencial definir o que é um site da web estático e o que o diferencia de um site dinâmico.

Um site da web estático contém conteúdos fixos em páginas da web. O conteúdo da sua página está em HTML e todos os usuários vêm a mesma coisa.

Por exemplo, você pode utilizar esse tipo de site para construir uma landing page (uma página básica com informações do seu produto).

A principal diferença entre um site da web estático e um dinâmico é, obviamente, a parte dinâmica!

Um site dinâmico utiliza uma tecnologia de servidores para construir a página quando o usuário faz uma requisição.

Por exemplo, você pode utilizar esse tipo para seu blog. Toda vez que você adicionar um novo artigo em seu banco de dados, o site da web vai mostrá-lo.

Chegou o momento de fazer o deploy do seu site

Você está pronto para compartilhar sua página com todo mundo? Vamos lá!

Nesta parte, eu mostrarei como colocar seu site da web on-line em poucos cliques. Eu utilizarei uma página de HTML básica, mas, uma vez que você entender como o fast.io funciona, você poderá modificar o que quiser.

1) Criando um arquivo index.html

Você precisa criar um arquivo index.html com seu código HTML dentro. Eu recomendo que você comece com algo simples, porque você sempre pode atualizar depois.

Salve o arquivo no seu computador.



  
    My Static Website
  
  
    My Static Website
    
      Hello, I'm online, and everyone can see me!

Exemplo de um arquivo index.html - mantivemos os textos em inglês porque, mais tarde, uma imagem mostrará o conteúdo do site

2) Abra a página inicial do fast.io

Página inicial do fast.io

Tudo que você precisa para começar com o Fast.io é abrir o site. Quando tiver feito isso, clique em "Sign up now - it's free!" (Inscreva-se agora – é de graça!).

3) Configure seu Google Drive

Fast.io - Provedor de armazenamento

Essa página aparecerá após o segundo passo, permitindo que você selecione um provedor de armazenamento. Selecione "Google Drive".

Se você quiser criar um site com outro provedor, você pode fazer isso depois adicionando o provedor na página da sua conta.

Fast.io - Conecte-se com o Google Drive

O fast.io precisará acessar a sua conta do Google Drive para funcionar. Ele criará uma pasta chamada "Fast.io", que conterá seus sites. Clique em "Connect Google Drive Now" (Conectar-se ao Google Drive agora).

Fast.io - Selecione sua conta do Google

Você precisará selecionar sua conta do Google para se conectar ao Fast.io.

Fast.io - Permita que o Fast.io acesse seu Google Drive

Autorize o Fast.io a acessar sua conta do Google, para se conectar corretamente.

Fast.io - Crie sua conta

Sua conta está pronta. Portanto, escolha uma senha e clique em "Create Account" (Criar conta).

Fast.io - Página de boas-vindas

Depois de seguir os últimos passos, uma página dizendo "Welcome to Fast!" (Boas-vindas ao Fast!) aparecerá. Clique em "Let's Begin!" (Vamos começar).

4) Crie seu site da web

Fast.io - Painel

Agora, tudo pronto para criar seu site e compartilhar com todo mundo! Clique em "Add New Site" (Adicionar um site novo).

Fast.io - Selecione um nome para o site

Escolha o nome do seu site e coloque-o na barra de entrada. Quando tiver terminado, clique em "Next" (Avançar).

Fast.io - Selecione um tipo de site

O fast.io permite que você crie três tipos de sites: um site para o compartilhamento de arquivos, uma página da web ou um buscador de arquivos.

No nosso caso, selecionaremos "Web Pages" (páginas da web), pois queremos hospedar uma página da web em HTML.

Se, posteriormente, você quiser criar um site da web para compartilhar documentos, terá de voltar ao seu painel, criar outro site e selecionar File Downloads (download de arquivos).

Fast.io - Selecione um provedor de armazenamento para seu site

Uma vez selecionada a opção "Web Pages", você precisará selecionar seu provedor de armazenamento. Clique em "Google Drive".

Fast.io - Selecione o URL do seu site

Escolha o URL do seu site e escreva-o no local indicado. Quando tiver finalizado, clique em "Create Site" (Criar site).

Fast.io - site da web criado com sucesso!

Você conseguiu! Seu site está on-line e disponível no URL que você escolheu! No meu caso, você pode encontrar meu site em mygoogledrivewebsite.imfast.io.

Nota do tradutor: o site com o link acima já não está mais disponível on-line.

5) Carregue seu index.html

Se você abrir seu site, poderá notar um erro, pois você não carregou seu arquivo index.html no seu Google Drive.

Aqui estão duas maneiras de se fazer isso:

Abra seu Google Drive e pesquise pela pasta Fast.io. Depois, busque a pasta do seu site (no meu caso, "mygoogledrivewebsite.imfast.io").
Na página de sucesso da etapa 4, clique em "See your Google Drive" (Ver o seu Google Drive).

Fast.io - Google Drive antes do upload

Quando tiver feito isso, clique com o botão direito do seu mouse e selecione "Upload files" (Upload de arquivos). Uma nova janela vai se abrir. Então, encontre seu arquivo "index.html" e selecione-o.

Fast.io - Google Drive após o upload

Aguarde um pouco para as alterações aparecerem no seu site.

6) Comemore!

Fast.io - Site da web de demonstração

Compartilhe com seus amigos! Seu site da web está ativo e todo mundo pode acessá-lo!

Compartilhe no Twitter clicando aqui!

Bônus

Se você estiver curioso e se quiser mexer nas configurações, poderá voltar no seu painel e clicar em seu site. Você poderá vincular seu site ao Google Analytics (estatísticas de visitantes), mudar o nome de domínio (por exemplo, para meusitenaweb.com) e muito mais!

Conclusão

O que você acha desse novo serviço? Achou rápido e fácil?

Sinta-se à vontade para compartilhar este artigo, caso tenha gostado.

Se quiser mais conteúdos como este, você pode seguir o autor no Twitter, onde ele fala sobre desenvolvimento para web, autoaperfeiçoamento e sua jornada como desenvolvedor full-stack!

Como fazer uma aplicação incrível de gerenciamento de estoque em PHP e MySQL

Rafael Fontenelle — Tue, 06 Dec 2022 21:00:00 +0000

Artigo original: How to Make an Awesome Inventory Management Application in PHP and MySQL

Escrito por: Richard

Você não precisa de software corporativo inchado para rastrear seu estoque com eficiência. Este tutorial ajudará você a desenvolver sua própria aplicação de rastreamento de estoque personalizada para que você possa tomar decisões de inventário inteligentes com base em dados de estoque precisos e oportunos.

Requisitos do sistema

Nosso sistema de estoque requer a licença comercial padrão do phpGrid e do phpChart. Ele precisa de alguns recursos avançados de ambos os componentes.

PHP 5.6+(PHP 7.x é agora altamente recomendado!)
MySQL / MariaDB
phpGrid Lite (subgrid) -ou- phpGrid Enterprise (Master detail, Grouping)
phpChart (para relatórios)

O que é um sistema de gerenciamento de estoque

Também conhecido como sistema de gerenciamento de inventário, esse sistema tem vários componentes críticos. Em sua essência, o controle de estoque funciona rastreando as duas principais funções de um armazém: recebimento (entrada) e expedição (saída). Outras atividades, como a movimentação ou a realocação de estoque, também ocorrem. As matérias-primas são decrementadas e os produtos acabados são incrementados.

Remessas recebidas
Pedidos enviados
Estoque
Fornecedores
Leitor de código de barras (atualização de janeiro de 2019)

Projeto de banco de dados do sistema de estoque

Normalmente, um sistema de estoque tem quatro elementos básicos: produtos, compras, pedidos e fornecedores. Cada elemento deve ser rastreado com base em sua localização, SKU (sigla de Stock Keeping Unit – unidade de manutenção de estoque, em português) e quantidade. O estoque atual (os produtos disponíveis) é atualizado rastreando as remessas recebidas e os pedidos enviados. Os alertas de pedidos podem ser configurados para serem acionados quando os níveis de estoque ficarem abaixo dos níveis mínimos definidos pelo cliente.

Configurando o banco de dados do gerenciador de estoque

Baixe o script de SQL InventoryManager.sql do repositório do GitHub deste tutorial e execute o script usando uma ferramenta de MySQL, como o MySQL Workbench. Isso criará um banco de dados chamado InventoryManager, bem como as tabelas necessárias para este tutorial.

Uma nota sobre o ZenBase

O sistema de gerenciamento de estoque é um dos muitos modelos de aplicações disponíveis no ZenBase (construído sobre o phpGrid) para qualquer pessoa – com ou sem habilidades em programação – usar e personalizar para suas próprias necessidades.

Configurar phpGrid

Vamos continuar.

Usaremos um componente de datagrid (em português, grade de dados) do phpGrid para lidar com todas as operações CRUD (Criar, Remover, Atualizar e Excluir) do banco de dados interno.

Não se esqueça de baixar uma cópia do phpGrid antes de continuar.

Para instalar o phpGrid, siga estes passos:

Descompacte o arquivo de download do phpGrid.
Carregue a pasta phpGrid para a pasta do phpGrid.
Conclua a instalação configurando o arquivo conf.php.

Antes de começarmos, devemos incluir as seguintes informações no arquivo conf.php de configuração do phpGrid.

define('PHPGRID_DB_HOSTNAME', 'localhost'); //  nome do host
define('PHPGRID_DB_USERNAME', 'root'); // nome de usuário do banco de dados
define('PHPGRID_DB_PASSWORD', ''); // senha do banco de dados
define('PHPGRID_DB_NAME', 'InventoryManager'); // nome do banco de dados do gerenciador de estoque
define('PHPGRID_DB_TYPE', 'mysql'); // tipo de banco de dados
define('PHPGRID_DB_CHARSET','utf8'); // sempre 'utf8' no MySQL

Criando a interface de usuário (UI)

Nosso sistema de inventário é composto por quatro páginas (nomes em inglês, seguidos pela respectiva tradução):

Current Inventory (Estoque atual)
Incoming Purchases (Compras recebidas)
Outgoing Orders (Encomendas a enviar)
Reports (Relatórios)

Menus

O arquivo de inclusão do menu é armazenado em uma pasta inc com o nome de menu.php. O código para o menu é simples. Por uma questão de foco, não entraremos em grandes detalhes. Sinta-se à vontade para olhar o código dentro da pasta inc.

Também adicionamos um item de menu chamado Reports.

Páginas

Usaremos o mesmo modelo de página que usamos para os tutoriais de CRM e gerenciamento de projetos.

Current Inventory (Estoque atual)

Vamos começar com a página do estoque atual, Current Inventory.

As compras recebidas aumentam o estoque, enquanto os pedidos de saída o diminuem. De uma perspectiva mestre-detalhe, o Current Inventory não tem uma, mas duas grades de dados (datagrids, em inglês) de detalhes – Purchases (compras recebidas) e Orders (pedidos de saída).

Assim, a página Current Inventory é composta por uma grade mestre (o estoque atual) e duas grades de detalhes (Incoming Purchases e Outgoing Orders). Podemos apresentar facilmente esses relacionamentos usando o recurso do phpGrid de uma grade de dados mestre com várias grades de dados de detalhes.

phpGrid Lite Professional e Enterprise

Os recursos de agrupamento e detalhes mestre requerem a versão Professional ou Enterprise do phpGrid. Se você está na versão gratuita Lite, ainda pode usar o subgrid no lugar dos detalhes mestre, apesar de o subgrid ser menos avançado. As versões Professional ou Enterprise são altamente recomendadas.

Se você já leu o tutorial Building a Donation Manager from Scratch (em inglês), não terá problemas em seguir o código abaixo.

Observe o uso da função set_col_format() (em inglês) para formatar os números inteiros.

$dgProd = new C_DataGrid('SELECT * FROM products', 'id', 'products');
$dgProd->set_col_hidden('id', false);
$dgProd->enable_autowidth(true)->set_dimension('auto', '200px')->set_pagesize(100);

$dgProd->set_col_title('ProductName', 'Name');
$dgProd->set_col_title('PartNumber', 'Part Number');
$dgProd->set_col_title('ProductLabel', 'Label');
$dgProd->set_col_title('StartingInventory', 'Starting Inventory');
$dgProd->set_col_title('InventoryReceived', 'Inventory Received');
$dgProd->set_col_title('InventoryShipped', 'Inventory Shipped');
$dgProd->set_col_title('InventoryOnHand', 'Inventory On Hand');
$dgProd->set_col_title('MinimumRequired', 'Minimum Required');

$dgProd->set_col_format('StartingInventory', 'integer', array('thousandsSeparator'=>',', 'defaultValue'=>'0'));
$dgProd->set_col_format('InventoryReceived', 'integer', array('thousandsSeparator'=>',', 'defaultValue'=>'0'));
$dgProd->set_col_format('InventoryShipped', 'integer', array('thousandsSeparator'=>',', 'defaultValue'=>'0'));
$dgProd->set_col_format('InventoryOnHand', 'integer', array('thousandsSeparator'=>',', 'defaultValue'=>'0'));
$dgProd->set_col_format('MinimumRequired', 'integer', array('thousandsSeparator'=>',', 'defaultValue'=>'0'));
$dgProd->enable_edit('FORM');

Isso é tudo para a grade de dados de Current Inventory. Aqui está a aparência até agora:

Agora, vamos fazer algumas alterações para melhorar nossa grade de dados de produtos, Products.

Em primeiro lugar, adicionaremos uma formatação condicional: sempre que o estoque disponível, InventoryOnHand, for definido como zero ou um valor negativo, ele será exibido usando uma cor de fundo diferente. Usaremos a função set_conditional_format() para esse propósito.

 $dgProd->set_conditional_format(
    'InventoryOnHand', 'CELL',
        array("condition"=>"lt",
          "value"=>"1",
          "css"=> array("color"=>"red","background-color"=>"#DCDCDC")));

O código acima adiciona uma condição de exibição para que, sempre que o campo InventoryOnHand tiver um valor menor que (lt) um, a cor do texto mude para red e a cor de fundo para cinza escuro (#DCDCDC).

Em segundo lugar, sempre que InventoryOnHand for menor que o valor mostrado em MinimumRequired, gostaríamos de alertar o usuário com uma cor de fundo proeminente, como ouro. Para comparar valores entre dois campos, devemos mudar para Javascript porque a função set_conditional_format() só funciona com um único campo.

O código abaixo usa um laço for para iterar em cada linha na grade de dados Products. Ele compara o inventoryOnHand com o minimumRequired e, quando a condição for atendida, usará a função setCell para alterar a cor do plano de fundo.

$onGridLoadComplete = <<add_event("jqGridLoadComplete", $onGridLoadComplete);

Você pode aprender mais sobre como comparar vários valores de células no site de suporte do phpGrid (em inglês).

Em seguida, na mesma página, precisamos ver as compras recebidas (Incoming) e os pedidos de saída (Outgoing) para um produto específico.

Grade de detalhes de compras (Incoming)

// Grade de detalhes de compras
$dgPur = new C_DataGrid('SELECT id, PurchaseDate, ProductId, NumberReceived, SupplierId FROM purchases', 'id', 'purchases');
$dgPur->set_col_hidden('id', false)->set_caption('Incoming Purchases');
$dgPur->set_col_edittype('ProductId', 'select', "select id, ProductLabel from products");
$dgPur->set_col_edittype('SupplierId', 'select', "select id, supplier from suppliers");
$dgPur->set_dimension('800px');

Grade de detalhes de pedidos (Outgoing)

// Grade de detalhes dos pedidos
$dgOrd = new C_DataGrid('SELECT id, OrderDate, ProductId, NumberShipped, First, Last FROM orders', 'id', 'orders');
$dgOrd->set_sortname('OrderDate', 'DESC')->set_caption('Outgoing Orders');
$dgOrd->set_col_hidden('id', false);
$dgOrd->set_col_edittype('ProductId', 'select', "select id, ProductLabel from products");
$dgOrd->set_dimension('800px');

As duas grades de detalhes usam a mesma chave estrangeira ProductId para vincular à grade de dados mestre (Products).

$dgProd->set_masterdetail($dgPur, 'ProductId', 'id');
$dgProd->set_masterdetail($dgOrd, 'ProductId', 'id');

Finalmente, nosso código completo para gerenciar a página Current Inventory é:

$dgProd = new C_DataGrid('SELECT * FROM products', 'id', 'products');
$dgProd->set_col_hidden('id', false);
$dgProd->enable_autowidth(true)->set_dimension('auto', '200px')->set_pagesize(100);

$dgProd->set_col_title('ProductName', 'Name');
$dgProd->set_col_title('PartNumber', 'Part Number');
$dgProd->set_col_title('ProductLabel', 'Label');
$dgProd->set_col_title('StartingInventory', 'Starting Inventory');
$dgProd->set_col_title('InventoryReceived', 'Inventory Received');
$dgProd->set_col_title('InventoryShipped', 'Inventory Shipped');
$dgProd->set_col_title('InventoryOnHand', 'Inventory On Hand');
$dgProd->set_col_title('MinimumRequired', 'Minimum Required');

$dgProd->set_col_format('StartingInventory', 'integer', array('thousandsSeparator'=>',', 'defaultValue'=>'0'));
$dgProd->set_col_format('InventoryReceived', 'integer', array('thousandsSeparator'=>',', 'defaultValue'=>'0'));
$dgProd->set_col_format('InventoryShipped', 'integer', array('thousandsSeparator'=>',', 'defaultValue'=>'0'));
$dgProd->set_col_format('InventoryOnHand', 'integer', array('thousandsSeparator'=>',', 'defaultValue'=>'0'));
$dgProd->set_col_format('MinimumRequired', 'integer', array('thousandsSeparator'=>',', 'defaultValue'=>'0'));

$dgProd->set_conditional_format('InventoryOnHand', 'CELL', array("condition"=>"lt",
                                                  "value"=>"1",
                                                  "css"=> array("color"=>"red","background-color"=>"#DCDCDC")));

$onGridLoadComplete = <<add_event("jqGridLoadComplete", $onGridLoadComplete);
$dgProd->enable_edit('FORM');

// Purchases detail grid
$dgPur = new C_DataGrid('SELECT id, PurchaseDate, ProductId, NumberReceived, SupplierId FROM purchases', 'id', 'purchases');
$dgPur->set_col_hidden('id', false)->set_caption('Incoming Purchases');
$dgPur->set_col_edittype('ProductId', 'select', "select id, ProductLabel from products");
$dgPur->set_col_edittype('SupplierId', 'select', "select id, supplier from suppliers");
$dgPur->set_dimension('800px');

// Orders detail grid
$dgOrd = new C_DataGrid('SELECT id, OrderDate, ProductId, NumberShipped, First, Last FROM orders', 'id', 'orders');
$dgOrd->set_sortname('OrderDate', 'DESC')->set_caption('Outgoing Orders');
$dgOrd->set_col_hidden('id', false);
$dgOrd->set_col_edittype('ProductId', 'select', "select id, ProductLabel from products");
$dgOrd->set_dimension('800px');

$dgProd->set_masterdetail($dgPur, 'ProductId', 'id');
$dgProd->set_masterdetail($dgOrd, 'ProductId', 'id');
$dgProd->display();

Aqui, vemos uma captura de tela da página de estoque:

Compras recebidas (Incoming Purchases)

A próxima página é a de compras recebidas, ou Incoming Purchases. É similar à grade de detalhes de compras, Purchase Detail Grid, que nós vimos ao configurar a página de estoque atual, Current Inventory. Agrupamos as compras por ProductId e exibimos a soma em NumberReceived. Quaisquer compras recebidas vão aumentar o estoque.

$dgPur -> set_group_properties('ProductId', false, true, true, false);
$dgPur -> set_group_summary('NumberReceived','sum');

Observação: o recurso de agrupamento está disponível apenas no phpGrid em suas versões Professional e Enterprise. Para filtrar sem o agrupamento, use a pesquisa por integração.

O código completo:

$dgPur = new C_DataGrid('SELECT id, PurchaseDate, ProductId, NumberReceived, SupplierId FROM purchases', 'id', 'purchases');
$dgPur->set_col_hidden('id', false);

$dgPur->set_col_title('PurchaseDate', 'Date of Purchase');
$dgPur->set_col_title('ProductId', 'Product');
$dgPur->set_col_title('NumberReceived', 'Number Received');
$dgPur->set_col_title('SupplierId', 'Supplier');

$dgPur->set_col_edittype('ProductId', 'select', "select id, ProductLabel from products");
$dgPur->set_col_edittype('SupplierId', 'select', "select id, supplier from suppliers");

// $dgPur->enable_edit('FORM');
$dgPur->set_pagesize(100);

$dgPur->set_col_width('PurchaseDate', '50px');
$dgPur->set_col_width('NumberReceived', '35px');

$dgPur -> set_group_properties('ProductId', false, true, true, false);
$dgPur -> set_group_summary('NumberReceived','sum');

$dgPur->enable_autowidth(true);
$dgPur->display();

Aqui está uma captura de tela de nossa página Incoming Purchases com o agrupamento habilitado:

Pedidos enviados (Outgoing Orders)

A próxima página é a de pedidos enviados, Outgoing Orders. É semelhante à grade de detalhes dos pedidos, Orders Detail Grid, da página do estoque atual, Current Inventory. Aqui, apresentaremos uma função avançada chamada set_grid_method().

$dgOrd = new C_DataGrid('SELECT id, OrderDate, ProductId, NumberShipped, First, Last FROM orders', 'id', 'orders');
$dgOrd->set_sortname('OrderDate', 'DESC');
$dgOrd->set_col_hidden('id', false);

$dgOrd->set_col_title('OrderDate', 'Order Date');
$dgOrd->set_col_title('ProductId', 'Product');
$dgOrd->set_col_title('NumberShipped', 'Number Shipped');

$dgOrd->set_col_edittype('ProductId', 'select', "select id, ProductLabel from products");

// $dgOrd->enable_edit('FORM');
$dgOrd->set_pagesize(100);

$dgOrd->set_col_width('OrderDate', '30px');
$dgOrd->set_col_width('NumberShipped', '35px');
$dgOrd->set_col_width('First', '20px');
$dgOrd->set_col_width('Last', '20px');

$dgOrd->set_grid_method('setGroupHeaders', array(
                                array('useColSpanStyle'=>true),
                                'groupHeaders'=>array(
                                        array('startColumnName'=>'First',
                                              'numberOfColumns'=>2,
                                              'titleText'=>'Customer Name') )));

$dgOrd->enable_autowidth(true);
$dgOrd->display();

Resumo

Este tutorial cria um sistema de estoque, simples e extensível em pouco menos de 50 linhas de código. O estilo progressivo desses tutoriais também ajuda o leitor a ficar, no fim das contas, mais familiarizado e tranquilo com o phpGrid ao apresentar um número limitado de recursos novos do phpGrid em cada um.

O que vem a seguir

Esse é o final do código necessário para criar as grades de dados necessárias para o tutorial. Porém, ainda não terminamos. Ainda temos mais uma página que precisamos criar — a página dos relatórios, ou Reports. Trataremos dela em instantes.

Qual é a finalidade de um sistema de estoque sem algum tipo de relatório? Nesta seção, você aprenderá a usar o phpChart — que se integra de modo perfeito com o phpGrid — para criar relatórios que sejam visualmente agradáveis e úteis para sua aplicação de gerenciamento de estoque.

Esta será a aparência da página ao concluirmos:

Antes de iniciarmos, precisaremos instalar o phpChart. É recomendado que você obtenha a versão completa do phpChart, pois a versão gratuita (phpChart Lite) dá suporte apenas aos gráficos de linhas.

Configuração do phpChart

É importante que tenhamos o phpGrid e o phpChart em pastas separadas. Abaixo, vemos a hierarquia de pastas recomendada.

www
+-- Donation_Manager
|   |-- phpGrid
|   |   +-- conf.php
|   |-- phpChart
|   |   +-- conf.php
|   +-- ...

Design do relatório

Colocaremos o gráfico de pizza próximo à grade de resumo do estoque. A grade de dados fornece os dados em série para que o gráfico de pizza seja produzido.

Integração do phpGrid e do phpChart

Primeiro, inclua chamadas aos dois arquivos conf.php no início do código.

require_once("phpGrid/conf.php");
require_once("phpChart/conf.php");

Abaixo, vemos o código completo para a criação de nosso gráfico de pizza:

$pc = new C_PhpChartX(array(array(null)), 'PieChart');
$pc->set_title(array('text'=>'Current Inventory Summary'));
$pc->set_series_default(array( 'shadow'=> false,
    'renderer'=> 'plugin::PieRenderer',
    'rendererOptions'=> array(
      'showDataLabels' => true,
      'highlightMouseOver' => true,
      'startAngle'=> 180,
      'sliceMargin'=> 4,
      'showDataLabels'=> true )
  ));
$pc->set_legend(array('show'=>true,'location'=> 'w'));
// remove background
$pc->set_grid(array(
    'background'=>'white',
    'borderWidth'=>0,
    'borderColor'=>'#000000',
    'shadow'=>false));
$pc->add_custom_js("
        $('#PieChart').bind('jqplotDataHighlight',
            function (ev, seriesIndex, pointIndex, data) {
               $('#label_info').text(data);      
            }
        );
    ");
$pc->draw(660,400);

Vamos ver o passo a passo do código.

A primeira linha é o construtor. Passamos array(null) como os dados em série, pois não queremos que os dados sejam exibidos no gráfico de pizza inicialmente. Os dados do estoque usados para fazer o gráfico ainda não estão disponíveis quando ele é inicializado pela primeira vez. Os dados serão recebidos da grade de dados mais tarde, em formato JSON.

Damos ao nosso gráfico um nome exclusivo, PieChart.

$pc = new C_PhpChartX(array(array(null)), 'PieChart');

Em seguida, damos a ele um título. Nada muito complicado.

$pc->set_title(array('text'=>'Current Inventory Summary'));

Ao termos o título, chamamos a função set_series_default para definir o renderer para PieRenderer. Diferente de um gráfico de barras, um gráfico de pizza não tem um eixo Y.

Também podemos definir a propriedade rendererOptions. Não entraremos em detalhes em cada uma das opções aqui, mas você poderá encontrar mais informações sobre elas na documentação on-line.

$pc->set_series_default(array( 'shadow'=> false,
    'renderer'=> 'plugin::PieRenderer',
    'rendererOptions'=> array(
      'highlightMouseOver' => true,
      'startAngle'=> 180,
      'sliceMargin'=> 4,
      'showDataLabels'=> true )
  ));

Também queremos dar uma legenda ao gráfico. O comando set_legend abaixo mostra a legenda a oeste (o que sabemos em função do w) ou à esquerda do gráfico de pizza.

$pc->set_legend(array('show'=>true,'location'=> 'w'));

Também removeremos a borda e o segundo plano.

$pc->set_grid(array(
    'background'=>'white',
    'borderWidth'=>0,
    'borderColor'=>'#000000',
    'shadow'=>false));

Por fim, criaremos nosso gráfico dando a ele uma altura (height) e uma largura (width) em pixels.

$pc->draw(660,400);

No entanto, se você executar o código agora, não verá o gráfico, pois os dados usados para rendererizá-lo ainda não estão disponíveis.

Grade de dados do resumo do estoque (Inventory Summary Datagrid)

Aqui, usaremos a mesma grade de dados de estoque que usamos na página Products. Apenas adicionaremos uma questão — um manipulador de eventos.

No phpGrid, podemos adicionar um manipulador de eventos com a função add_event(). add_event() vincula um manipulador de eventos, que é, essencialmente, uma função do JavaScript, a um evento específico do phpGrid. Uma lista de eventos possíveis pode ser encontrada aqui.

Como devemos aguardar até que a grade de dados termine de carregar antes que ela possa enviar os dados para criar o gráfico, usaremos o evento jqGridLoadComplete.

Introdução ao phpGrid — o evento jqGridLoadComplete

O evento jqGridLoadComplete é o último evento que ocorre quando todo o corpo da grade de dados terminou de carregar. Observe que o corpo da grade será recarregado se o usuário alterar a ordem de classificação de uma coluna ou se definir um filtro.

Enviando dados com o Javascript

A seguir vemos o manipulador de eventos em Javascript para jqGridLoadComplete.

function(status, rowid)
{
    var dataX = [];
    var dataY = [];

    d1 = $('#products').jqGrid('getCol', 'ProductLabel', false);
    d2 = $('#products').jqGrid('getCol', 'InventoryReceived', false);

    npoints = d1.length;
    for(var i=0; i < npoints; i++){
        dataX[i] = [i+1, d1[i]];
        dataY[i] = [i+1, parseInt(d2[i])];
    }

    var pieData = [];
    for(var j=0; j < dataX.length; j++)
    {
        pieData.push([dataX[j][1], dataY[j][1]]);
    }
    console.log(pieData);
    _PieChart.series[0].data = pieData;
    _PieChart.replot({resetAxes:true});
}

O código completo:

$dgProd = new C_DataGrid('SELECT id, ProductLabel, InventoryReceived FROM products', 'id', 'products');
$dgProd->set_col_hidden('id', false);
$dgProd->set_dimension('auto', 'auto')->set_pagesize(100);
$onGridLoadComplete = <<add_event("jqGridLoadComplete", $onGridLoadComplete);
$dgProd->display();

Aí está. Você acaba de criar seu primeiro sistema de gerenciamento de estoque do zero usando o PHP e o MySQL!

É novo na programação? Sem problemas!

Se você é novo na programação e ainda não se sente confortável com ela, confira o ZenBase, que foi criado sobre o phpGrid. O sistema de gerenciamento de estoque é apenas um dos vários templates de aplicação disponíveis no ZenBase para quem quiser — com ou sem habilidade em programação — para usar e personalizar às suas próprias necessidades.

Demonstração on-line

Current Inventory
Incoming Purchases
Outgoing orders
Reports (com a grade de dados lado a lado)

A seguir: adicionar um leitor de código de barras

Adicione um leitor de código de barras ao nosso sistema de gerenciamento de estoque (texto em inglês)

Faça o download do código-fonte no GitHub

Problema comum:

Fatal error: Uncaught Error: Class ‘phpGrid\C_DataGrid’ not found

Como resolver:
Se estiver usando a versão Lite gratuita, você pode comentar a primeira linha de código

// use phpGrid\C_DataGrid;

— OU —

Adicionar um símbolo de namespace global — backslash/barra invertida (\) única — ANTES do construtor

$dg = new \C_DataGrid("SELECT * FROM orders", "orderNumber", "orders");

É possível que você se interesse também pelos tutoriais a seguir (textos em inglês):

Obrigado pela leitura! Se gostou deste artigo, compartilhe-0 para que mais pessoas possam ter acesso a ele.

Como aprender desenvolvimento para a web - um roteiro para desenvolvedores e desenvolvedoras

Marcelle Martins — Sun, 04 Dec 2022 21:00:00 +0000

Artigo original: How to Learn Web Development in 2021 - a Web Developer Roadmap

Há excelentes roteiros para desenvolvedores para a web por aí. Alguns, no entanto, exigem que se resolva um "quebra-cabeças" antes mesmo de começar, já que você precisa fazer várias escolhas.

Quando comecei a aprender desenvolvimento para a web, quis muito encontrar um/a desenvolvedor/a experiente que me contasse o que tinha feito para se tornar um/a desenvolvedor/a para a web. Infelizmente, não encontrei ninguém.

Agora que já trabalho no setor há 4 anos, quero compartilhar como eu começaria a aprender desenvolvimento para a web neste ano. Neste artigo, vou mostrar para você todos os passos que você precisa tomar, desde quando iniciar até se tornar um/a desenvolvedor/a.

Começarei com algumas ferramentas essenciais que você precisa conhecer e, depois, vou tratar de linguagens de programação e de bibliotecas/frameworks que você precisa aprender para se tornar um/a desenvolvedor/a front-end ou full-stack.

Também falarei de alguns projetos que você pode desenvolver para praticar as suas habilidades.

Você também encontrará um roteiro atualizado no meu site da web.

Ferramentas que você precisa conhecer para se tornar um/a desenvolvedor/a para a web

Vou presumir que você é um/a iniciante. Nesse caso, há algumas ferramentas que você precisa conhecer antes de iniciar na programação.

VS Code (ou outro editor de código)

Primeiro, você precisará aprender a usar o Visual Studio Code, que é um editor de código fonte. É uma ferramenta gratuita e poderosa.

No início, recomendo que você aprenda alguns dos atalhos básicos e instale algumas das extensões como ESlint, Prettier, ou Live Server.

No canal do freeCodeCamp, no YouTube, você encontrará um curso gratuito e completo para ajudar você a começar.

A linha de comando

Em seguida, você precisará saber sobre a linha de comando (texto em inglês). Você deve aprender o que é e alguns dos comandos básicos, por exemplo, como mexer em diretórios, como criar um diretório ou como criar um arquivo.

Aqui está um excelente artigo sobre como usar o Bash (texto em inglês), a linha de comando do Linux. Aqui temos outro artigo que ajudará você a usar a linha de comando de modo mais eficaz (texto em inglês).

Controle de versão - Git e GitHub

Independentemente do que você faça como desenvolvedor/a, precisará saber sobre Git. O Git é um sistema de controle de versão utilizado para monitorar as alterações. É normalmente utilizado com GitHub, que é uma plataforma de hospedagem de código.

No início, aprender Git pode ser desgastante. Por isso, basta que você tenha algumas noções básicas de, por exemplo, como criar um repositório, como clonar um projeto, como fazer um novo commit e como lidar com as novas mudanças.

Uma das melhores formas de praticar Git é trabalhando em uma equipe: você precisará saber como criar uma nova branch, como fazer pull requests e como resolver conflitos.

No canal do freeCodeCamp, no YouTube, você encontrará um excelente curso intensivo de Git e GitHub (em inglês), para ajudá-lo a praticar o controle de versão.

Ferramentas de design - Figma

A última ferramenta é o Figma. O Figma é uma ferramenta de design gratuita para uso particular. Aqui, contudo, quero falar sobre como utilizar o Figma como um/a desenvolvedor/a.

Como desenvolvedor/a, pode ser que você receba designs da sua equipe. Com o Figma, você poderá conferir o código dos elementos e medir o layout. Portanto, precisará saber como ler o design do Figma, por exemplo, como conseguir a cor, a tipografia ou espaçamento corretos.

Aqui está um artigo sobre várias ferramentas de design, incluindo o Figma (texto em inglês). Aqui está um tutorial divertido sobre a criação de esboços 3D no Figma (texto em inglês).

Muito bem. Então, estas são as ferramentas de que você precisará conhecer quando for começar. Você não precisará saber tudo, mas certifique-se de entender o básico para que possa melhorar enquanto aprende a programar.

Linguagens de programação que desenvolvedores e desenvolvedoras para a Web precisam conhecer

HTML e CSS

A seguir, vamos tratar das linguagens de programação. Comecemos falando de sites da web responsivos.

Sites da web responsivos são sites com uma boa aparência e que podem ser utilizados em todos os dispositivos ou tamanhos de telas. Você, provavelmente, sabe como é importante desenvolver um site responsivo, uma vez que, hoje em dia, as pessoas utilizam diversos dispositivos diferentes.

Então, vamos avançar para as duas primeiras linguagens que você precisará saber para desenvolver um site: HTML e CSS.

HTML significa Hypertext Markup Language (linguagem de marcação de hipertexto). Ela é utilizada para desenvolver o esqueleto do seu site. O HTML não é uma linguagem difícil de aprender, mas você talvez queira prestar mais atenção aos formulários HTML, uma vez que eles serão fundamentais no futuro.

CSS significa Cascading Style Sheets (folhas de estilo em cascata). Esta é uma linguagem de marcação, mas eu também a considero como uma linguagem de programação. O CSS não é, necessariamente, uma linguagem difícil de aprender, mas é difícil de se dominar.

Há poucos tópicos aos quais você deverá prestar mais atenção, como:

Modelo de caixa – como as margens, padding e bordas funcionam em conjunto.
Unidades CSS – utilizado para expressar comprimentos (por exemplo: rem, vh, e vw).
Posição – especifica o tipo de método de posicionamento. Também confunde muitas pessoas. Por isso, certifique-se de investir tempo aprendendo-a.
Variáveis – ou propriedades personalizadas são entidades que podem ser reutilizadas ao longo de um documento. Esta é a minha característica favorita no CSS. Elas tornam o trabalho com CSS muito agradável e é possível criar temas com apenas algumas linhas de código.
Consulta dos meios de comunicação – permite decidir o que mostrar em diferentes tamanhos de telas. Trata-se de um componente chave do design responsivo.
Animação – permite que um elemento mude de um estilo para outro. Se você souber usar a animação corretamente, ela fará com que o seu site se destaque. Caso contrário, fará com que o seu site pareça pouco profissional. Por isso, tenha cuidado.
Flexbox, CSS Grid – usados para construir layouts responsivos (eu esqueci de mencioná-los no vídeo).

Aqui está um manual completo (texto em inglês) que ensinará a você todas as noções básicas de HTML. Aqui temos um curso completo sobre CSS (em inglês), no canal do freeCodeCamp, no YouTube, que ajudará você a tornar os seus sites mais bonitos.

Quando souber as noções básicas de HTML e CSS, o próximo passo é desenvolver alguns sites da web básicos. Você pode, por exemplo, tentar desenvolver uma página inicial; um formulário, como uma página de login, ou uma página de checkout. Você pode, até mesmo, desenvolver um portfólio. Em DevChallenges.io, você encontrará exemplos de projetos.

Implementação de sites da web

Quando já tiver o seu site da web, você precisará colocá-lo na internet, para que as pessoas possam vê-lo. A implementação é o processo de enviar seu código para uma plataforma de hospedagem.

Antigamente, era muito mais difícil de se fazer. Agora, porém, é superfácil. Você pode usar ferramentas como GitHub Pages, Netlify ou Vercel.

Aqui está um curso completo no YouTube sobre como colocar o seu site da web on-line (texto em inglês), que contempla o processo inteiro, do início ao fim.

JavaScript – Fundamentos

Muito bem, o próximo tópico é o JavaScript. O JavaScript é uma linguagem de programação popular e amplamente utilizada no desenvolvimento para a web, entre outros.

Você precisará aprender algumas das características básicas da linguagem, como tipos de dados, loops, e condicionais (textos em inglês).

Em seguida, há assuntos nos quais você deverá se aprofundar.

Em primeiro lugar, temos a depuração (em inglês, debugging). Este é o processo de encontrar e corrigir erros. Aqui temos um ótimo guia aprofundado de depuração de bugs (texto em inglês) para te ajudar a começar.

Depois, há outros tópicos como objetos, primitivos e arrays. Especialmente quando se trabalha com arrays, é necessário conhecer também os métodos de array (textos em inglês).

Funções são os principais blocos de construção do seu programa. Por isso, certifique-se de que não vai deixar de estudá-los.

Uma das minhas características favoritas em JavaScript é a desestruturação (texto em inglês) – é fácil de escrever e torna a linguagem super poderosa.

Como C#, Java e outras linguagens de programação, no JavaScript moderno, também temos classes. Elas são úteis quando se trata de Programação Orientada a Objetos e os princípios SOLID.

Por melhor que você seja em programação, haverá erros nos seus scripts. Isso significa que você também precisará saber sobre como lidar com os erros (texto em inglês).

Programação assíncrona é importante, especialmente quando é necessário comunicar com o servidor. Por isso, passe algum tempo aprendendo sobre Promises e Async/Await (texto em inglês).

JavaScript - Navegador

Passemos à forma como o JavaScript é utilizado no navegador.

Primeiro, é preciso saber o que é um Document Object Model (Modelo de Objeto de Documento) ou DOM. Depois, é preciso saber como obter elementos, como mudar as classes e como mudar o estilo com JavaScript.

Aqui está uma boa introdução ao DOM no JS (texto em inglês), e aqui está um guia sobre como manipular o DOM (texto em inglês, mas aqui você aprenderá construindo um projeto).

Você também precisará aprender sobre diferentes eventos de interface de usuário, como clicar, passar o cursor para cima, para baixo e assim por diante.

Você ainda terá que prestar mais atenção aos formulários em JavaScript (texto em inglês), uma vez que eles têm muitos eventos e propriedades.

JavaScript - outras características

A Fetch API é um tópico importante. Ela permite que você envie solicitações de rede para servidores. Isso é útil, por exemplo, quando precisamos enviar um formulário ou obter informações de um usuário.

Outro tópico importante é o armazenamento de dados no navegador (texto em inglês). Em relação a isso, é necessário saber quais são as diferenças entre cookies, armazenamento local (ou local storage, em inglês) e armazenamento de sessão (ou session storage, em inglês).

Outros tópicos menos importantes quando se está apenas começando são expressões regulares (regular expressions, em inglês), componentes da web (web components, em inglês) e websockets.

Expressões regulares (texto em inglês) são utilizadas para pesquisar e substituir texto. Componentes da web, são uma novidade, mas que valem a pena você conferir.

Por último, temos os Websockets (texto em inglês). Eles são úteis quando precisamos de trocas contínuas de dados, como em aplicações de bate-papo.

Depois de aprender Javascript, você deveria aprender sobre o TypeScript (texto em inglês). Eu amo o TypeScript, pois ele me passa segurança quando estou escrevendo o código.

O TypeScript fornece uma digitação estática, que permite que você detecte erros mais cedo no processo de depuração. Isso permite economizar tempo, uma vez que identifica erros antes de o código ser executado.

Aqui está um artigo útil sobre os tipos de TypeScript (texto em inglês) para ajudar você a ter maior clareza sobre eles.

Você poderia parar por aqui e começar a trabalhar em alguns projetos. Pessoalmente, no entanto, eu ainda aprenderia, pelo menos, um framework. Isso já permite a você praticar o JavaScript ao mesmo tempo.

Muito bem. Então, vamos continuar.

Bibliotecas e frameworks para se conhecer

Para se tornar um/a desenvolvedor/a front-end ou um/a desenvolvedor/a full-stack, é necessário conhecer algumas das bibliotecas e frameworks que existem por aí.

Bibliotecas e frameworks para desenvolvedores e desenvolvedoras de front-end

Comecemos pelo Sass, que é uma linguagem de criação de scripts de pré-processador. Eu uso o Sass em quase todos os meus projetos. Ele faz o CSS parecer mais limpo e torna-o mais rápido de desenvolver.

Aqui está um curso completo sobre Sass (texto em inglês) que ensinará você a dar superpoderes ao seu CSS.

Em seguida, temos o NPM que é um gestor de pacotes para programação em JavaScript. Ele permite instalar rapidamente diferentes pacotes na sua máquina.

Aqui, você encontrará um bom guia do NPM para iniciantes (texto em inglês), que ajudará você a começar a baixar pacotes de imediato.

Um dos meus arrependimentos é não ter conhecido o contentful antes. Contentful é um sistema de gestão de conteúdos, ou CMS, headless (Headless Content Management System). Os sistemas headless são diferentes dos CMS tradicionais, pois você pode armazenar dados no Contentful e utilizá-los para o seu front-end.

Para obter um trabalho de front-end, você precisa conhecer, pelo menos, um framework de front-end. Eu, pessoalmente, escolheria o React. Falaremos sobre outros frameworks mais adiante.

Além de aprender as noções básicas de React (texto em inglês), você também deverá se atentar à forma como o estado (em inglês, state) é gerenciado nas aplicações de React e a como os formulários funcionam em React.

Depois de aprender o básico, você pode solidificar as suas habilidades trabalhando em vários projetos com React neste curso do YouTube (em inglês).

Outro arrependimento que tenho é não ter conhecido o Next.js antes. O Next.js é utilizado para a renderização do lado do servidor ou para gerar websites estáticos. Sim, o Next.js ainda é bastante novo, mas eu acredito que esta é uma habilidade que precisamos desenvolver como programadores do React.

Você poderá aprender todos os conceitos básicos do Next.js neste manual aprofundado (texto em inglês).

Depois de aprender estas ferramentas, talvez você queira conferir a Material UI que é uma biblioteca de componentes do React, ou a Tailwind CSS, que é um framework do CSS que ajudará você a acelerar o seu trabalho quando estiver fazendo protótipos ou trabalhando como freelancer, por exemplo.

Com isso, depois de aprender JavaScript e um framework, você precisará praticar construindo projetos.

Você poderá começar construindo alguns componentes simples e reutilizáveis, para compreender como funciona o React. Depois, poderá construir aplicações mais complexas, como uma aplicação de Quiz ou uma aplicação de lista de tarefas.

Depois disso, você deverá criar aplicações ainda mais difíceis, como uma ferramenta de procura de emprego, um blog ou uma página de documentos. Mais uma vez, você encontrará exemplos de projetos na DevChallenges.io.

Desenvolvedor/a Full-stack

Agora, você está pronto/a para se candidatar a uma vaga de desenvolvedor/a front-end. Se quiser continuar para se tornar um/a desenvolvedor/a full-stack, você poderá começar aprendendo Node.js e Express (textos em inglês).

Neste ponto, você precisará saber como construir uma API RESTful e deverá conseguir usar o MongoDB para trabalhar com bancos de dados. Isso é bastante simples de aprender quando já se sabe JavaScript.

Em seguida, se desejar aprender mais, você poderá conferir o GraphQL (texto em inglês), que é uma linguagem de consulta e manipulação de dados para APIs. Pessoalmente, eu também investiria algum tempo aprendendo PostgreSQL. Comparado com MongoDB, é uma linguagem um pouco mais difícil de se aprender, uma vez que você também precisará aprender sobre SQL (texto em inglês).

Depois de aprender essas ferramentas, você poderá praticar construindo aplicações como um uploader de imagens, uma aplicação de autenticação ou uma sala de bate-papo. Você também pode encontrar estes projetos no Devchallenges.io.

Agora, sim, você está pronto/a para se candidatar a uma vaga de full-stack. Se o seu trabalho exigir que você conheça Vue.js, Angular ou até mesmo Svelte (textos em inglês), você também poderá dedicar algum tempo a aprender essas ferramentas. Não deve ser muito difícil, uma vez que você já saberá React.

Isto conclui o roteiro. Espero que você o considere útil. Um dos objetivos do autor para o ano passado foi o de fazer vídeos sobre todos os tópicos dos quais acabamos de falar. Portanto, não se esqueça de consultar o canal do autor no Youtube e DevChallenges Learn, o site do autor.

O que é Open Graph e como posso utilizá-lo no meu site da web?

Elizabete Nakamura — Tue, 29 Nov 2022 21:00:00 +0000

Artigo original: What is Open Graph and how can I use it for my website?

Pode levar muito tempo para criar o conteúdo e manter um site da web. Como podemos garantir que o nosso conteúdo se destaque ao ser compartilhado em feeds sociais por toda a internet?

O que é Open Graph?

O Open Graph é um protocolo de internet que foi originalmente criado pelo Facebook para padronizar o uso de metadados dentro de uma página da web para representar o conteúdo de uma página.

Dentro dele, você pode fornecer detalhes tão simples quanto o título de uma página ou tão específicos quanto a duração de um vídeo. Todas essas peças se encaixam para formar uma representação de cada página individual da internet.

Por que eu preciso dele?

O conteúdo na internet é tipicamente criado com pelo menos um objetivo em mente – compartilhá-lo com outros. Isso pode não necessariamente importar se você estiver enviando o conteúdo apenas para um amigo, mas, se você quiser compartilhá-lo ou se quiser que ele seja compartilhado em qualquer rede social ou aplicação que utilize visualizações ricas, você vai querer que essa visualização seja a mais eficaz possível.

How to Become a Full Stack Web Developer in 2020 #javascript #fullstack https://t.co/A1TsFaDguD
— Colby Fayock @ spacejelly.dev (@colbyfayock) March 10, 2020

Isso ajudará a encorajar as pessoas a verificar o seu conteúdo e, inevitavelmente, a clicar nele.

O que acontece se eu não o tiver?

A maioria das redes sociais, por padrão, tentará se esforçar ao máximo para criar uma prévia do seu conteúdo. Isso, na maioria das vezes, não resulta bem.

Veja, por exemplo, meu site na web, colbyfayock.com.

Ele pega corretamente o título da minha página e a descrição, mas não é o tweet mais atraente em um feed.

Contrastando com a visualização de um único post, vemos uma história diferente.

Exemplo de um cartão do Twitter com uma imagem grande

Então, o que acontece se você não tiver as tags open graph? Nada de ruim acontecerá, mas você não estará aproveitando algumas das funcionalidades que ajudam a destacar o seu conteúdo ao lado da carga de outros conteúdos que são publicados na internet.

Começando pelo básico de open graph

As quatro tags open graph que são necessárias para cada página são og:title, og:type, og:image e og:url. Essas tags devem ser únicas para cada página que você serve, ou seja, as tags de sua página inicial devem ser todas diferentes da página do seu blog de publicação de artigos.

Anatomia de um cartão do Twitter usando tags Open Graph

Embora deva ser bastante direto, aqui está uma descrição do significado de cada uma das tags:

og:title: o título da sua página. Esse é tipicamente o mesmo que está na tag de sua página web, a menos que você queira apresentá-lo de forma diferente.</li><li><code>og:type</code>: o "tipo" de site da web que você tem. Explicarei mais na próxima seção, embora um "tipo" genérico seja "website".</li><li><code>og:image</code>: este deve ser um link para uma imagem que você gostaria de ver representando o seu conteúdo. Deve ser uma imagem de alta resolução que as redes sociais utilizarão em seus feeds.</li><li><code>og:url</code>: este deve ser o URL da página atual.</li></ul>Ao colocar uma tag em seu site, você deve colocá-la na <head>, junto de quaisquer outros metadados. A tag usada será uma tag <meta> e deve ser semelhante a este padrão:<pre><code><meta property="[NOME]" content="[VALOR]" /> </code></pre>Portanto, se eu fosse criar um conjunto de quatro tags open graph para o meu site, <a href="https://colbyfayock.com">colbyfayock.com</a>, poderia ser assim:<pre><code class="language-html"><meta property="og:title" content="Colby Fayock - A UX Designer & Front-end Developer Blog" /> <meta property="og:type" content="website" /> <meta property="og:image" content="/static/website-social-card-44070c4a901df708aa1563ac4bbe595a.jpg" /> <meta property="og:url" content="https://www.colbyfayock.com" /> </code></pre><h2 id="site-da-web-com-open-graph">Site da web com open graph</h2>O protocolo open graph tem algumas variações quanto ao "tipo" de site da web que ele suporta. Isto inclui tipos como 'website', 'article' ou 'video'.Ao configurar as suas tags open graph, você vai querer ter uma ideia de qual tipo fará mais sentido para o seu site. Se sua página estiver focada em um único vídeo, provavelmente faz sentido usar o tipo "video". Se for um site geral sem finalidade específica, você provavelmente vai querer usar apenas o tipo "website".Semelhante às outras, isso é único para cada página. Portanto, se a sua página inicial for "website", você sempre poderá ter outra página do tipo "video".Portanto, se eu fosse criar um tipo de open graph para o meu site, ele poderia ter a seguinte aparência na minha página inicial:<pre><code class="language-html"> <meta property="og:type" content="profile" /> </code></pre>Quando se navega para uma publicação em um blog, você teria algo como:<pre><code class="language-html"> <meta property="og:type" content="article" /> </code></pre>Você pode encontrar os tipos mais comuns de sites da web open graph na página da web do open graph: <a href="https://ogp.me/#types">https://ogp.me/#types</a><h2 id="algumas-outras-tags-open-graph-que-valem-a-pena-adicionar">Algumas outras tags open graph que valem a pena adicionar</h2>Embora você geralmente esteja de acordo com o básico, aqui estão mais algumas tags que valeriam a pena acrescentar:<ul><li><code>og:description</code>: uma descrição da sua página. Similar a og:title, essa pode ser a mesma que a tag <code><meta type="description"></code>, a menos que você queira apresentá-la de forma diferente.</li><li><code>og:locale</code>: se você quiser localizar as suas tags, provavelmente faria sentido incluir o locale (localização). O formato é idioma_PAÍS, onde o padrão é en_US (english_UnitedStates – no Brasil, teríamos pt_BR, ou portuguese_Brazil).</li><li><code>og:site_name</code>: o nome de todo o site da web em que seu conteúdo está. Se você estiver em uma página de publicações em blog, você pode ter um título usando o título dessa publicação no blog, onde o <code>nome_do_site</code> seria o nome de seu blog.</li><li><code>og:video</code>: tem um vídeo que dá suporte ao seu conteúdo? Aqui está uma chance de incluí-lo. Adicione um link ao seu vídeo usando esta tag.</li></ul>Essas tags serão adicionadas no mesmo padrão de antes:<pre><code class="language-html"><meta property="[NOME]" content="[VALOR]" /> </code></pre><h2 id="twitter-e-outras-redes-de-m-dia-social-usando-open-graph">Twitter e outras redes de mídia social usando open graph</h2>A maioria das redes sociais adere aos princípios básicos dos padrões open graph, mas algumas delas também incluem a sua própria extensão para ajudar a personalizar o visual e a sensação dentro de seu ecossistema.Twitter, por exemplo, permite que você especifique twitter:card, que é o tipo de "cartão" que você pode usar quando eles mostram seu site da web. Neste momento, os tipos de cartão deles incluem:<ul><li>summary (resumo)</li><li>summary_large_image (resumo com imagem grande)</li><li>app (aplicação)</li><li>player (reprodutor de mídia)</li></ul>Isso ajudará você a escolher como seus links são usados na feed deles. Se você escolher summary_large_image, por exemplo, o Twitter mostrará os seus links com grandes imagens em alta resolução, desde que você forneça o link na tag og:image.Aqui estão algumas referências rápidas para a documentação de como usar tags open graph com alguns dos sites de mídia social (textos em inglês):<ul><li>Twitter: <a href="https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started">https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started</a></li><li>Facebook: <a href="https://developers.facebook.com/docs/sharing/webmasters/">https://developers.facebook.com/docs/sharing/webmasters/</a></li><li>Pinterest: <a href="https://developers.pinterest.com/docs/rich-pins/overview/">https://developers.pinterest.com/docs/rich-pins/overview/</a>?</li><li>LinkedIn: <a href="https://www.linkedin.com/help/linkedin/answer/46687/making-your-website-shareable-on-linkedin?lang=en">https://www.linkedin.com/help/linkedin/answer/46687/making-your-website-shareable-on-linkedin?lang=en</a></li></ul><h2 id="imagens-em-open-graph">Imagens em open graph</h2>Enquanto acrescentar sua imagem como og:image deva ser frequentemente o suficiente, às vezes, pode ser um desafio conseguir que a sua imagem apareça corretamente. Se você parece estar tendo problemas, o padrão open graph inclui algumas tags de imagem como og:image:url x og:image:secure_url, assim como og:image:width e og:image:height.Tente ter certeza de estar seguindo todas as <a href="https://ogp.me/#structured">notas e exemplos na documentação do open graph</a> (em inglês). Além disso, algumas das redes sociais têm requisitos de imagem. <a href="https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/summary-card-with-large-image">O Twitter, por exemplo, requer</a> (texto em inglês) uma proporção de 2:1 com um tamanho mínimo de 300x157 e um tamanho máximo de 4096x4096, inferior a 5MB e no formato JPG, PNG, WEBP ou GIF.Se você não souber o que fazer, teste as suas tags usando as ferramentas de rede de mídia social para ver se consegue encontrar o problema.<h2 id="testando-as-suas-tags-open-graph">Testando as suas tags open graph</h2>Felizmente, as nossas redes sociais favoritas também fornecem ferramentas para nos ajudar a testar as nossas tags. Uma vez que você tenha certeza de que suas tags estão realmente aparecendo no código-fonte do seu site, você poderá visualizar como ele ficará no feed.<ul><li>Twitter: <a href="https://cards-dev.twitter.com/validator">https://cards-dev.twitter.com/validator</a></li><li>Facebook: <a href="https://developers.facebook.com/tools/debug/">https://developers.facebook.com/tools/debug/</a></li><li>Pinterest: <a href="https://developers.pinterest.com/tools/url-debugger/">https://developers.pinterest.com/tools/url-debugger/</a></li></ul><h2 id="indo-mais-fundo-em-tags-open-graph">Indo mais fundo em tags open graph </h2>Enquanto a maioria das tags deva cobrir um site básico, há mais algumas tags que podem ajudar você e a sua empresa a serem descobertos nas redes sociais.Se você estiver interessado em mergulhar em mais, <a href="https://ogp.me/"></a><a href="https://ogp.me/">a</a> <a href="https://ogp.me/">documentação</a> (em inglês) faz um ótimo trabalho ao fornecer uma lista de todas as tags disponíveis para você usar.<h2 id="que-tal-um-exemplo">Que tal um exemplo?</h2>Se você está simplesmente procurando um exemplo para começar, aqui está o que você deve fazer ao criar as suas tags para <a href="https://www.colbyfayock.com/2020/03/anyone-can-map-inspiration-and-an-introduction-to-the-world-of-mapping/">um post de blog</a>:<pre><code><meta property="og:site_name" content="Colby Fayock" /> <meta property=“og:title” content=“Anyone Can Map! Inspiration and an introduction to the world of mapping - Colby Fayock" /> <meta property="og:description" content="Chef Gusteau was a visionary who created food experiences for the world to enjoy. How can we take his lessons and apply them to the world of…" /> <meta property="og:url" content="https://www.colbyfayock.com/2020/03/anyone-can-map-inspiration-and-an-introduction-to-the-world-of-mapping/" /> <meta property="og:type" content="article" /> <meta property="article:publisher" content="https://www.colbyfayock.com" /> <meta property="article:section" content="Coding" /> <meta property="article:tag" content="Coding" /> <meta property="og:image" content="https://res.cloudinary.com/fay/image/upload/w_1280,h_640,c_fill,q_auto,f_auto/w_860,c_fit,co_rgb:232129,g_west,x_80,y_-60,l_text:Source%20Sans%20Pro_70_line_spacing_-10_semibold:Anyone%20Can%20Map!%20Inspiration%20and%20an%20introduction%20to%20the%20world%20of%20mapping/blog-social-card-1.1" /> <meta property="og:image:secure_url" content="https://res.cloudinary.com/fay/image/upload/w_1280,h_640,c_fill,q_auto,f_auto/w_860,c_fit,co_rgb:232129,g_west,x_80,y_-60,l_text:Source%20Sans%20Pro_70_line_spacing_-10_semibold:Anyone%20Can%20Map!%20Inspiration%20and%20an%20introduction%20to%20the%20world%20of%20mapping/blog-social-card-1.1" /> <meta property="og:image:width" content="1280" /> <meta property="og:image:height" content="640" /> <meta property="twitter:card" content="summary_large_image" /> <meta property="twitter:image" content="https://res.cloudinary.com/fay/image/upload/w_1280,h_640,c_fill,q_auto,f_auto/w_860,c_fit,co_rgb:232129,g_west,x_80,y_-60,l_text:Source%20Sans%20Pro_70_line_spacing_-10_semibold:Anyone%20Can%20Map!%20Inspiration%20and%20an%20introduction%20to%20the%20world%20of%20mapping/blog-social-card-1.1" /> <meta property="twitter:site" content="@colbyfayock" /></code></pre><h2 id="procurando-outras-maneiras-de-otimizar-e-analisar-o-seu-conte-do-textos-do-autor-ainda-em-ingl-s-no-freecodecamp-">Procurando outras maneiras de otimizar e analisar o seu conteúdo? (textos do autor ainda em inglês no freeCodeCamp)</h2><ul><li><a href="https://www.freecodecamp.org/news/how-to-add-a-social-media-image-to-your-github-project/">How to Add a Social Media Image to Your Github Project Repository</a></li><li><a href="https://www.freecodecamp.org/news/making-sense-of-google-analytics-and-the-traffic-to-your-website/">How to Make Sense of Google Analytics and the Traffic to Your Website</a></li><li><a href="https://www.freecodecamp.org/news/how-to-set-up-and-track-youtube-channel-performance-with-google-analytics/">How to set up and track YouTube Channel performance with Google Analytics</a></li></ul><figure class="kg-card kg-image-card"></figure><a href="https://twitter.com/colbyfayock">Siga o autor no Twitter</a> <a href="https://youtube.com/colbyfayock">Inscreva-se no canal do autor no YouTube</a> <a href="https://www.colbyfayock.com/newsletter/">Assine a newsletter do autor</a> </article> <article> <h1> Como carregar web fonts para evitar problemas de desempenho e acelerar o carregamento da página </h1> Daniel Rosa — Wed, 04 May 2022 10:25:25 +0000 Artigo original: <a href="https://www.freecodecamp.org/news/web-fonts-in-2018-f191a48367e8/" target="_blank" rel="noopener noreferrer" data-test-label="original-article-link">How to load web fonts to avoid performance issues and speed up page loading</a> Escrito por: Mattia AstorinoWeb fonts personalizadas são usados em todos os lugares e no mundo inteiro, mas muitos (e são muitos!) sites carregam essas fontes de modo inadequado. Isso causa vários problemas para o carregamento da página, como questões de desempenho, tempo de carregamento maior, renderização bloqueada e fontes trocadas durante a navegação.Vejo muitos desenvolvedores ignorando essas questões - ou, talvez, cometendo os mesmos erros repetidamente somente porque "foi o jeito que sempre fizeram", mas, por sermos desenvolvedores para a web, precisamos ser capazes de nos adaptarmos em um ambiente de constante mudança.É a hora de interromper esse ciclo e começar a fazer o que é certo. Aqui temos quatro passos a considerar ao carregar uma fonte personalizada da web font:<ul><li>Uso do formato de fonte correto</li><li>Fontes pré-carregadas</li><li>Uso da declaração correta de font-face</li><li>Evitar texto invisível durante o carregamento da fonte.</li></ul>Vamos tratar desses pontos, um de cada vez.<h3 id="uso-do-formato-de-fonte-correto">Uso do formato de fonte correto</h3>Existem muitos formatos de fonte que podem ser usados na web, mas apenas dois formatos são realmente necessários se você não precisar dar suporte a versão 8 do Internet Explorer (IE) ou anteriores: a <a href="https://caniuse.com/#search=woff" rel="noopener">woff</a> e a <a href="https://caniuse.com/#search=woff2" rel="noopener">woff2</a>. Esses são os dois únicos tipos de arquivo que você deve usar, pois eles são comprimidos no formato gzip por padrão (sendo, portanto, muito pequenos), são otimizados para a web e são totalmente suportados pelo IE 9 e versões posteriores, assim como por todos os outros navegadores evergreen (navegadores com atualização automática).<h3 id="fontes-pr-carregadas">Fontes pré-carregadas</h3>Ao usar fontes personalizadas, você deve informar ao navegador que ele deve pré-carregar as fontes usando a definição adequada com <code>rel=""</code> e seus atributos:<pre><code><link rel="preload" as="font" href="/fonts/custom-font.woff2" type="font/woff2" crossorigin="anonymous"></code></pre><pre><code><link rel="preload" as="font" href="/fonts/custom-font.woff" type="font/woff2" crossorigin="anonymous"></code></pre>Observe que o uso de crossorigin aqui é importante; sem esse atributo, a fonte pré-carregada é ignorada pelo navegador e um novo fetch acaba ocorrendo. Isso se dá porque espera-se que as fontes sejam obtidas (em inglês, "fetched") de maneira anônima pelo navegador. A solicitação de pré-carregamento só pode ser tornada anônima usando esse atributo.No exemplo acima, os atributos <code>rel="preload" as="font"</code> solicitarão ao navegador que inicie o download dos recursos solicitados assim que for possível. Eles também informarão ao navegador que essa é uma fonte. Assim, o navegador pode priorizá-la na fila de recursos. Usar as <a href="https://developers.google.com/web/fundamentals/performance/resource-prioritization?hl=en#preload" rel="noopener">dicas de pré-carregamento</a> causará um impacto significativo no desempenho da fonte da web e no pré-carregamento inicial. Os navegadores que dão suporte às dicas de pré-carregamento e prefetch começarão a fazer o download das web fonts assim que tiverem visto a dica no arquivo de HTML e não aguardarão mais pelo CSS.Em vez delas, você pode usar o atributo <code>rel="prefetch"</code> para informar ao navegador que ele deve preparar o download dos recursos que poderão ser exigidos durante o carregamento da página ou ações do usuário, de modo que ele possa atribuir uma prioridade baixa a esses recursos.CUIDADO: Ao usar uma CDN, como o Google Fonts, certifique-se de que os arquivos de fonte que você está pré-carregando correspondem àqueles que estão no CSS. As fontes podem ser atualizadas regularmente e, se você estiver pré-carregando uma versão anterior usando o CSS no lugar de uma nova, pode acabar baixando duas versões da mesma fonte e desperdiçando a largura de banda do usuário. Considere o uso de <code><a href="https://web.dev/uses-rel-preconnect/"><link rel="preconnect"></a></code> para facilitar a manutenção.<h3 id="uso-da-declara-o-correta-de-font-face">Uso da declaração correta de font-face</h3>Declarar uma família de font-face é muito simples e devemos ter cuidado com certas coisas na hora de fazê-lo. Aqui temos um exemplo correto de declaração de uma font-family personalizada:<pre><code>@font-face { font-family: 'Custom Font'; font-weight: 400; font-style: normal; font-display: swap; /* Ler o próximo ponto */ unicode-range: U+000-5FF; /* Fazer apenas o download dos glifos latinos */ src: local('Custom Font'), url('/fonts/custom-font.woff2') format('woff2'), url('/fonts/custom-font.woff') format('woff');}</code></pre>Aqui temos o intervalo Unicode em <a href="https://web.dev/optimize-webfont-loading/">Google Web Fundamentals</a>.Como você pode ver, usamos somente fontes otimizadas (woff e woff2) e informamos ao navegador para carregar somente o intervalo de glifos necessário (de <code>U+000</code> a <code>U+5FF</code>), mas essa propriedade não evita que os navegadores façam o download da fonte inteira. Também temos outras duas coisas que precisamos observar: a função <code>local()</code> e a ordem de declaração da fonte.A função <code>local()</code> permite que os usuários utilizem sua cópia local da fonte se ela estiver presente (imagine as fontes Roboto que já vem pré-instaladas no Android) em vez de fazer o download delas a todo momento.A ordem de declaração das fontes também é importante, pois o navegador iniciará a busca dos recursos seguindo a ordem da declaração. Se ele der suporte ao formato woff2, ele fará o download da fonte. Se não reconhecer o formato do recurso, buscará o próximo e assim por diante.Se quiser realmente usar fontes <code>eot</code> e <code>ttf</code>, certifique-se de adicioná-las ao final da declaração do <code>src</code>.<h4 id="recursos">Recursos</h4><ul><li><a href="https://codepen.io/elifitch/pen/Ljqway" rel="noopener">Gerador de intervalo de glifos</a>, de Eli Fitch</li><li><a href="https://transfonter.org/" rel="noopener">Gerador de font-faces modernas</a></li></ul><h3 id="evitar-texto-invis-vel-durante-o-pr-carregamento-da-fonte">Evitar texto invisível durante o pré-carregamento da fonte</h3>As fontes geralmente são arquivos grandes, que demoram a carregar, mesmo quando compactadas no formato gzip. Para lidar com isso, alguns navegadores ocultam o texto até que a fonte seja carregada (o "flash do texto invisível"). Você pode evitar o "flash" e exibir o conteúdo para os usuários imediatamente usando inicialmente uma fonte do sistema e substituindo-a após o carregamento.No exemplo de <code>@font-face</code> anterior, você deve ter percebido a declaração de <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display" rel="noopener">font-display</a></code> (texto em inglês). O valor <code>swap</code> informa ao navegador que o texto usando essa fonte deve ser exibido imediatamente usando uma fonte do sistema. Quando a fonte personalizada estiver pronta, a fonte do sistema será substituída.Se o <a href="https://caniuse.com/#search=font-display" rel="noopener">navegador não der suporte</a> a <code>font-display</code>, ele continuará a seguir seu comportamento padrão para o carregamento das fontes.<h4 id="comportamentos-padr-o-do-navegador-quando-uma-fonte-n-o-est-pronta-para-uso-">Comportamentos padrão do navegador quando uma fonte não está pronta para uso:</h4>O Edge usa uma fonte do sistema até que a fonte personalizada esteja pronta para uso, substituindo a fonte do sistema quando ela estiver.O Chrome ocultará o texto por até 3 segundos. Se o texto ainda não estiver pronto, ele usará uma fonte do sistema até que a fonte personalizada esteja pronta.O Firefox ocultará o texto por até 3 segundos. Se o texto ainda não estiver pronto, ele usará uma fonte do sistema até que a fonte personalizada esteja pronta.O Safari ocultará o texto até que a fonte esteja pronta.<h3 id="testes">Testes</h3>Os links abaixo testam a "versão padrão" e a contrastam com a versão otimizada:<ul><li><a href="https://fontface-test.glitch.me/" rel="noopener">Padrão</a></li><li><a href="https://fontface-test.glitch.me/index-cool.html" rel="noopener">Otimizada</a></li></ul><h4 id="resultados">Resultados</h4><figure class="kg-card kg-image-card kg-card-hascaption"><figcaption>Comportamento otimizado</figcaption></figure><h3 id="conclus-o">Conclusão</h3>Levar em consideração essas otimizações básicas melhorará a UX em geral de seu produto digital. Devemos levar em conta situações nas quais a velocidade de conexão não é a ideal ou quando as pessoas não têm tempo de esperar por vários segundos enquanto sua aplicação/site está sendo completamente carregado até se tornar navegável.Esses avanços, especialmente em projetos grandes, são obrigatórios para melhorar a experiência geral do usuário, não necessitando de muito esforço para colocá-los em prática.Devemos trabalhar juntos para <a href="https://www.oreilly.com/ideas/the-web-is-broken-lets-fix-it" rel="noopener">tentar consertar</a> a web.<h4 id="confira-o-blog-do-autor-">Confira o blog do autor:</h4><a href="https://equinusocio.dev/">Mattia Astorino Desenvolvedor para a web, ninja do CSS/HTML de Monza, Itália. Membro da equinsuocha.io de design para código aberto</a> </article> </main></body></html>