Permalink
Browse files

Fix broken links

  • Loading branch information...
jcemer committed Apr 20, 2015
1 parent 4172836 commit e138ac3a121d57fa6e2646aa5ef6b6c27f69509d
@@ -7,7 +7,7 @@ tags:
excerpt: "<p>Entrevista que aborda a especificação de WebSockets e em como esta pode ser usada para desenvolver jogos e outros aplicações. Originalmente publicada no blog da Conferência Web.br da W3C.</p>" excerpt: "<p>Entrevista que aborda a especificação de WebSockets e em como esta pode ser usada para desenvolver jogos e outros aplicações. Originalmente publicada no blog da Conferência Web.br da W3C.</p>"
--- ---
Esta entrevista foi originalmente publicada no blog do evento [Conferência Web.br](http://conferenciaweb.w3c.br) de 2013. Neste evento apresentei a palestra: [Protocolos de Comunicação e o desenvolvimento front-end](https://speakerdeck.com/jcemer/protocolos-de-comunicacao). Esta entrevista foi originalmente publicada no blog do evento [Conferência Web.br](http://conferenciaweb.w3c.br) de 2013. Neste evento apresentei a palestra: [Protocolos de Comunicação que fazem parte da web](https://speakerdeck.com/jcemer/protocolos-de-comunicacao-que-fazem-parte-da-web).
----------- -----------
@@ -11,7 +11,7 @@ Tive o prazer de palestrar no primeiro [Mobile Brazil Conference](http://mobileb
Existem vários dispositivos que podem ser alcançados por uma hipermídia: desktops, laptops, impressoras, TVs, smartphones e tablets só para citar alguns. Além disto, não são apenas os browsers o meio: aplicativos como Apple Store, Netflix e o Steam são escritos em HTML5. Mas a maior revolução da nossa era, sem ter como negar, é o mobile: dispositivos pequenos e de fácil locomoção. Eles é que serão foco principal do nosso estudo. Existem vários dispositivos que podem ser alcançados por uma hipermídia: desktops, laptops, impressoras, TVs, smartphones e tablets só para citar alguns. Além disto, não são apenas os browsers o meio: aplicativos como Apple Store, Netflix e o Steam são escritos em HTML5. Mas a maior revolução da nossa era, sem ter como negar, é o mobile: dispositivos pequenos e de fácil locomoção. Eles é que serão foco principal do nosso estudo.
Aqui estão os [slides da palestra](https://speakerdeck.com/jcemer/hipermidia-as-avessas) e o [vídeo](https://www.eventials.com/pt-br/mobilebrazilconference/hipermidia-as-avessas-seu-conteudo-na-web-por-diferentes-formas). Pule para [responsive design](http://localhost:4000/hipermidia-as-avessas-responsive-design.html) ou vá direto para o [passo a passo final](/hipermidia-as-avessas-passo-a-passo.html) caso interessar. Continue a leitura por aqui para acompanhar o assunto na íntegra. Aqui estão os [slides da palestra](https://speakerdeck.com/jcemer/hipermidia-as-avessas) e o [vídeo](https://www.eventials.com/pt-br/mobilebrazilconference/hipermidia-as-avessas-seu-conteudo-na-web-por-diferentes-formas). Pule para [responsive design](/hipermidia-as-avessas-responsive-design.html) ou vá direto para o [passo a passo final](/hipermidia-as-avessas-passo-a-passo.html) caso interessar. Continue a leitura por aqui para acompanhar o assunto na íntegra.
## Mobile ## Mobile
@@ -50,7 +50,7 @@ A solução para termos imagens responsivas habita em duas novas especificaçõe
alt="The pear is juicy." alt="The pear is juicy."
~~~ ~~~
A epecificação de [srcset attribute](http://www.w3.org/html/wg/drafts/srcset/w3c-srcset), exemplificada acima, permite definir uma série de arquivos com base em resolução e densidade de *pixels* do dispositivo em relação ao *pixel* do CSS. A epecificação de [srcset attribute](https://html.spec.whatwg.org/multipage/embedded-content.html#attr-img-srcset), exemplificada acima, permite definir uma série de arquivos com base em resolução e densidade de *pixels* do dispositivo em relação ao *pixel* do CSS.
~~~ html ~~~ html
<picture width="500" height="500"> <picture width="500" height="500">
@@ -60,7 +60,7 @@ p { font-size: 0.8em; }
### Imagens ### Imagens
Tente achar um tamanho que fique com nitidez razoável na maior parte dos dispositivos ou aplique uma das [soluções possíveis](/hipermidia-as-avessas-imagens.html#Soluções-possíveis) até que exista uma melhor. Tente achar um tamanho que fique com nitidez razoável na maior parte dos dispositivos ou aplique uma das <a href="/hipermidia-as-avessas-imagens.html#Soluções-possíveis">soluções possíveis</a> até que exista uma melhor.
## Por fim ## Por fim
@@ -8,7 +8,7 @@ tags:
excerpt: "<p>Tratar elementos do seu HTML como componentes é bastante útil para manter a sanidade do seu projeto. Este texto discute um assunto muitas vezes subestimado: qual o local mais adequado para iniciar seus componentes.</p>" excerpt: "<p>Tratar elementos do seu HTML como componentes é bastante útil para manter a sanidade do seu projeto. Este texto discute um assunto muitas vezes subestimado: qual o local mais adequado para iniciar seus componentes.</p>"
--- ---
[Plugins](http://plugins.jquery.com) e [widgets](http://jqueryui.com) de jQuery, [componentes](http://component.io) e outras muitas abstrações de organização e modularização de código são muito úteis para manter a sanidade do seu projeto. [Plugins](http://plugins.jquery.com) e [widgets](http://jqueryui.com) de jQuery, [componentes](https://www.npmjs.com/package/component) e outras muitas abstrações de organização e modularização de código são muito úteis para manter a sanidade do seu projeto.
## O problema ## O problema
@@ -78,7 +78,7 @@ Alterar o JavaScript como efeito colateral da alteração de uma página não me
## Soluções melhores ## Soluções melhores
Frameworks como o [Angular.js](http://angularjs.org) e a biblioteca [Dojo](http://dojotoolkit.org/features/1.6/html5data-attributes) há tempo tomaram a consciência de que o próprio elemento HTML deve indicar a qual componente pertence. Caso você não esteja utilizando nenhuma destas soluções, algo como o [Piecemaker](https://github.com/jcemer/piecemaker) deve resolver bem este problema. Frameworks como o [Angular.js](http://angularjs.org) e a biblioteca [Dojo](http://dojotoolkit.org/blog/dojo-1-6-released) há tempo tomaram a consciência de que o próprio elemento HTML deve indicar a qual componente pertence. Caso você não esteja utilizando nenhuma destas soluções, algo como o [Piecemaker](https://github.com/jcemer/piecemaker) deve resolver bem este problema.
### Piecemaker ### Piecemaker
@@ -52,7 +52,7 @@ O construtor ideal é aquele que não adiciona *listeners* de eventos ou element
### Modelo ### Modelo
Vamos portar nossa [inspiração](#Inspiração) para JavaScript na forma de uma das aplicações mais comuns (e detestadas) de vermos em websites: um carrossel. Vamos portar nossa <a href="#Inspiração">inspiração</a> para JavaScript na forma de uma das aplicações mais comuns (e detestadas) de vermos em websites: um carrossel.
~~~ javascript ~~~ javascript
function Carousel(container) { function Carousel(container) {
@@ -27,7 +27,7 @@ Alguns elementos da página permitem ao usuário navegar através deles com aux
É bastante importante introduzir um conceito empírico (leia-se, não tenho referências) de **fluxo alternativo** de uma página de internet. Um fluxo alternativo é criado quando abrimos um *login* flutuante, mostramos uma galeria de imagens em uma camada superior à página ou mostramos qualquer outro conteúdo de maneira semelhante. É bastante importante introduzir um conceito empírico (leia-se, não tenho referências) de **fluxo alternativo** de uma página de internet. Um fluxo alternativo é criado quando abrimos um *login* flutuante, mostramos uma galeria de imagens em uma camada superior à página ou mostramos qualquer outro conteúdo de maneira semelhante.
Os fluxos alternativos devem ser compostos por [elementos que possam receber foco](#Navegação-por-elementos-que-podem-receber-foco), o que pode ser alcançado com o auxílio do atributo `tabindex`. Saiba que o valor igual a `-1` no atributo é usado para que este não participe da navegação por `tab`. Os fluxos alternativos devem ser compostos por <a href="#Navegação-por-elementos-que-podem-receber-foco">elementos que possam receber foco</a>, o que pode ser alcançado com o auxílio do atributo `tabindex`. Saiba que o valor igual a `-1` no atributo é usado para que este não participe da navegação por `tab`.
É imprescindível que quando o fluxo alternativo for ativado, o foco seja atribuído ao elemento, por exemplo: É imprescindível que quando o fluxo alternativo for ativado, o foco seja atribuído ao elemento, por exemplo:
@@ -28,7 +28,7 @@ Por outro lado, o Node.js tem sido adotado pela comunidade front-end como suport
Disponibilizar bibliotecas, frameworks ou qualquer outro tipo de código foi um dos maiores desafios do confeiteiro de HTML da era passada. Para disponibilizar código, o jeito era criar um website com uma área para download. Fizemos isto com a [Rye](http://ryejs.com) nos longínquos 2012. Disponibilizar bibliotecas, frameworks ou qualquer outro tipo de código foi um dos maiores desafios do confeiteiro de HTML da era passada. Para disponibilizar código, o jeito era criar um website com uma área para download. Fizemos isto com a [Rye](http://ryejs.com) nos longínquos 2012.
Nada mais óbvio que a medida que o NPM conquistasse o maior sucesso gerenciando pacotes do Node.js surgissem gerenciadores destinados a código front-end no geral. Surgiram vários: [Jam](http://jamjs.org/), [Component](http://component.io) e [Volo](http://volojs.org). Nada mais óbvio que a medida que o NPM conquistasse o maior sucesso gerenciando pacotes do Node.js surgissem gerenciadores destinados a código front-end no geral. Surgiram vários: [Jam](http://jamjs.org/), [Component](https://www.npmjs.com/package/component) e [Volo](http://volojs.org).
Sem dúvida, o gerenciador de pacotes de maior adoção até o momento foi o Bower. **Toda a biblioteca, framework ou código front-end que se preze está no Bower**. Sem dúvida, o gerenciador de pacotes de maior adoção até o momento foi o Bower. **Toda a biblioteca, framework ou código front-end que se preze está no Bower**.
@@ -70,7 +70,7 @@ O uso de *promises* é baseado na função `.then`: *promises* que seguem a espe
Um uso interessante da API de *promises*, é utilizar a função `race` para definir um tempo limite de espera para que um valor fique "pronto". Um uso interessante da API de *promises*, é utilizar a função `race` para definir um tempo limite de espera para que um valor fique "pronto".
É essencial que biblitoecas e *frameworks* passem cada vez mais a aceitar valores de *promises*. Para ajudar com esta tarefa, bibliotecas como [kozu](http://github.com/jamesmacaulat/kozu) permite tornar qualquer função passível de ser utilizada com promises. Assim podem usar underscore com coleções cujos valores sejam *promises*, o que é muito interessante. É essencial que biblitoecas e *frameworks* passem cada vez mais a aceitar valores de *promises*. Para ajudar com esta tarefa, bibliotecas como [kozu](https://github.com/jamesmacaulay/kozu) permite tornar qualquer função passível de ser utilizada com promises. Assim podem usar underscore com coleções cujos valores sejam *promises*, o que é muito interessante.
---------- ----------
@@ -108,7 +108,7 @@ A apresentação também abordou *generators* que são funções que podem inter
---------- ----------
Forbes já havia palestrado mais cedo no evento e conseguiu convencer mais nesta segunda palestra. O assunto é interessante e foi muito bem apresentado. Em especial, [generators](http://en.wikipedia.org/wiki/Generator_(computer_programming) permitem sintaxes absurdamente expressivas. Forbes já havia palestrado mais cedo no evento e conseguiu convencer mais nesta segunda palestra. O assunto é interessante e foi muito bem apresentado. Em especial, <a href="http://en.wikipedia.org/wiki/Generator_(computer_programming)">generators</a> permitem sintaxes absurdamente expressivas.
## Backbone.js - Jeremy Ashkenas ## Backbone.js - Jeremy Ashkenas
@@ -10,7 +10,7 @@ Cobertura comentada da manhã do segundo dia da JSConfUY 2014. Não deixe de ler
## Tiny modules on the frontend - James Halliday ## Tiny modules on the frontend - James Halliday
Conhecido como [@substack](https://twitter.com/substack), Halliday tem o título de maior número de pacotes publicados no NPM, gerenciador de pacotes do Node.js. Conhecido como [@substack](https://twitter.com/substack), Halliday tem o título de maior número de pacotes publicados no NPM, gerenciador de pacotes do Node.js.
A palestra inicia com a justificativa de que aplicações podem ser compostas por pequenos módulos e um bom exemplo daquilo que pode ser um módulo são os *polyfills*. A partir do momento que você desenvolve módulos no estilo do node.js (usando `require()`), ferramentas como [browserify](https://github.com/substack/node-browserify), criação do substack, podem ser usadas para empacotar seus módulos permitindo que sejam usados no *front-end*. A palestra inicia com a justificativa de que aplicações podem ser compostas por pequenos módulos e um bom exemplo daquilo que pode ser um módulo são os *polyfills*. A partir do momento que você desenvolve módulos no estilo do node.js (usando `require()`), ferramentas como [browserify](https://github.com/substack/node-browserify), criação do substack, podem ser usadas para empacotar seus módulos permitindo que sejam usados no *front-end*.
@@ -27,7 +27,7 @@ James mostrou alguns de seus pequenos módulos preferidos em ação, dentre eles
A palestra teve muito *live conding*. Substack tem uma capacidade incrível de raciocinar e escrever, não é por nada que ele possui mais de três centenas de módulos publicados. Todos os exemplos focaram em ilustrar como uma aplicação pode ser construída com base em módulos com responsabildiades bem definidas. A palestra teve muito *live conding*. Substack tem uma capacidade incrível de raciocinar e escrever, não é por nada que ele possui mais de três centenas de módulos publicados. Todos os exemplos focaram em ilustrar como uma aplicação pode ser construída com base em módulos com responsabildiades bem definidas.
O desenvolvimento web já está com os dois pés na modularização, se você ainda está por fora do assunto, aconselho que confira [Modularização em JavaScript](tableless.com.br/modularizacao-em-javascript). O desenvolvimento web já está com os dois pés na modularização, se você ainda está por fora do assunto, aconselho que confira [Modularização em JavaScript](http://tableless.com.br/modularizacao-em-javascript).
## Be MEAN - Jean Carlo Nascimento ## Be MEAN - Jean Carlo Nascimento
@@ -93,7 +93,7 @@ Os desafios de se manter múltiplas máquinas são: comunicação, gerenciar *jo
---------- ----------
Angel fez uma abordagem bastante humorada e simplificada de um tópico bastante interessante que tem raízes bastante acadêmicas. Vale a pena conferir sua postagem [Distributed Applications and Node.js](http://ajlopez.wordpress.com/2013/05/30/aplicaciones-distribuidas-y-node-js) que explica minuciosamente toda a palestra. Angel fez uma abordagem bastante humorada e simplificada de um tópico bastante interessante que tem raízes bastante acadêmicas. Vale a pena conferir sua postagem [Distributed Applications and Node.js](https://ajlopez.wordpress.com/2013/05/30/aplicaciones-distribuidas-y-node-js) que explica minuciosamente toda a palestra.
## Why Bacon is actually good for your health - Leonardo Garcia e Sergio Gianazza ## Why Bacon is actually good for your health - Leonardo Garcia e Sergio Gianazza
@@ -142,7 +142,7 @@ Os argumentos contra as "boas partes", incluem, que cada funcionalidade é útil
Existem dois tempos envolvidos na escrita de código: escrever e fazer o código funcionar de acordo. Sempre se leva tempo para se codificar bem. Existem dois tempos envolvidos na escrita de código: escrever e fazer o código funcionar de acordo. Sempre se leva tempo para se codificar bem.
A parte mais esperada da apresentação são as melhores partes da ES6: A parte mais esperada da apresentação são as melhores partes da ES6:
- [*Proper Tail Calls*](http://bbenvie.com/articles/2013-01-06/JavaScript-ES6-Has-Tail-Call-Optimization) - *Proper Tail Calls*
- *Rest* e *spread* - *Rest* e *spread*
- Módulos - Módulos
@@ -12,7 +12,7 @@ Jacob inicia sua palestra mostrando como o GoDaddy utilizava *branchs* do Git pa
A implementação de um sistema de Continuous Integration (CI) e Continuous Delivery (CD) os levaram a um processo de 5 minutos. O primeiro passo foi a definição de um GitHub Flow baseado em *pull request*. *Pull requets* são ótimas por documentarem funcionalidades sem que seja preciso escrever comentários no código. O fluxo compreende uso de JSHint e testes de código. A implementação de um sistema de Continuous Integration (CI) e Continuous Delivery (CD) os levaram a um processo de 5 minutos. O primeiro passo foi a definição de um GitHub Flow baseado em *pull request*. *Pull requets* são ótimas por documentarem funcionalidades sem que seja preciso escrever comentários no código. O fluxo compreende uso de JSHint e testes de código.
O *framework* [Mocha](http://visionmedia.github.io/mocha) com a biblioteca [Chai.js](http://chaijs.com) foi a escolha para testes de *front-end* que rodam em Selenium. A ferramenta [Istanbul](http://gotwarlost.github.io/istanbul) registra a cobertura de testes do código. O *framework* [Mocha](http://mochajs.org) com a biblioteca [Chai.js](http://chaijs.com) foi a escolha para testes de *front-end* que rodam em Selenium. A ferramenta [Istanbul](http://gotwarlost.github.io/istanbul) registra a cobertura de testes do código.
A infra estrutura também é composta por Logstash para armazenar os *logs*, Elasticsearch para indexar as informações e Kibana para gerar representações dos dados. O *back-end*, que é escrito em Node.js, faz uso de New Relic para monitoramento. Ferramentas como Jira, Slack e Github Enterprise também foram utilizadas na nova infra estrutura. A infra estrutura também é composta por Logstash para armazenar os *logs*, Elasticsearch para indexar as informações e Kibana para gerar representações dos dados. O *back-end*, que é escrito em Node.js, faz uso de New Relic para monitoramento. Ferramentas como Jira, Slack e Github Enterprise também foram utilizadas na nova infra estrutura.
View
@@ -55,12 +55,12 @@
- -
date: 2013-11-22 date: 2013-11-22
title: "Protocolos de Comunicação: WebSockets" title: "Protocolos de Comunicação: WebSockets"
url: https://speakerdeck.com/jcemer/protocolos-de-comunicacao url: https://speakerdeck.com/jcemer/protocolos-de-comunicacao-que-fazem-parte-da-web
event: Front in Floripa event: Front in Floripa
- -
date: 2013-11-19 date: 2013-11-19
title: "Protocolos de Comunicação: WebSockets" title: "Protocolos de Comunicação: WebSockets"
url: https://speakerdeck.com/jcemer/protocolos-de-comunicacao url: https://speakerdeck.com/jcemer/protocolos-de-comunicacao-que-fazem-parte-da-web
event: Conferência Web.br event: Conferência Web.br
- -
date: 2013-10-26 date: 2013-10-26

0 comments on commit e138ac3

Please sign in to comment.