Docco é uma ferramenta gratuita de geração de documentação JavaScript baseada em Node.js. Nunca gostei muito de documentar métodos JavaScript nos próprios arquivos de código-fonte, mas minha equipe tomou a decisão de seguir esse caminho em um novo projeto e eu me adaptei totalmente. Combine a documentação in-source com o Docco e o senhor terá uma bela documentação JavaScript ao lado do código-fonte.
O senhor pode instalar o Docco usando o npm ou o pegar o repositório diretamente. Com o Docco disponível, o senhor pode criar estruturas de código a la:
// The code in `oninstall` and `onactivate` force the service worker to // control the clients ASAP. self.oninstall = function(event) { event.waitUntil(self.skipWaiting()); }; self.onactivate = function(event) { event.waitUntil(self.clients.claim()); }; // When fetching, distinguish if this is a resource fetch. If so, // apply the server selection algorithm. Else, let the request reach the // network. Could should be autoexplanatory. self.onfetch = function(event) { var request = event.request; if (isResource(request)) { event.respondWith(fetchFromBestServer(request)); } else { event.respondWith(fetch(request)); } }; // A request is a resource request if it is a `GET` for something inside `imgs`. function isResource(request) { return request.url.match(/\/imgs\/.*$/) && request.method === 'GET'; } // Fetching from the best server consists of getting the server loads, // selecting the server with lowest load, and compose a new request to // find the resource in the selected server. function fetchFromBestServer(request) { var session = request.url.match(/\?session=([^&]*)/)[1]; return getServerLoads(session) .then(selectServer) .then(function(serverUrl) { // Get the resource path and combine with `serverUrl` to get // the resource URL but **in the selected server**. var resourcePath = request.url.match(/\/imgs\/[^?]*/)[0]; var serverRequest = new Request(serverUrl + resourcePath); return fetch(serverRequest); }); }
A execução do Docco no conteúdo acima gera uma página bem formatada com comentários “inline” à esquerda e código sem comentários à direita:
O Docco tem alguns parâmetros para personalização, mas a conversão é bastante simples e há extensões para gulp, grunt e outros utilitários. Esse tipo de geração e exibição de documentos é fantástico tanto para o ensino de JavaScript quanto para a manutenção entre uma equipe. O senhor pode ver o Docco sendo usado no Livro de receitas do Service Worker exemplos de código.
Gradientes CSS
Com CSS border-radiusNo artigo anterior, mostrei aos senhores como o CSS pode preencher a lacuna entre o design e o desenvolvimento, adicionando cantos arredondados aos elementos. Os gradientes CSS são outra etapa nessa direção. Agora que os gradientes CSS são compatíveis com o Internet Explorer 8+, Firefox, Safari e Chrome…
Animações JS responsivas e infinitamente escalonáveis
No final de 2012, não era fácil encontrar projetos de código aberto usando
requestAnimationFrame()
– esse é o gancho que permite que o código Javascript seja sincronizado com o loop de pintura nativo de um navegador da Web. As animações que usam esse método podem ser executadas a 60 fps e proporcionar…
CSS Vertical Center com Flexbox
Tenho 31 anos e me sinto como se estivesse no jogo do desenvolvimento da Web há séculos. Sempre soubemos que os layouts em CSS eram um pesadelo e todos nós consideramos o flexbox nosso salvador. Ainda não se sabe se isso vai acontecer, mas o flexbox é facilmente…