Uma visão crítica sobre o hype da vez. Esta palestra tem como norte tirar o ruído e fundamentar (inclusive com exemplos) o que realmente importa neste papo de componentes.
http://frontinpoa.com.br/2014
Video: https://www.youtube.com/watch?v=KhSDReAefx0
Oficina realizada em 2011. Apresenta a linguagem javascript e os frameworks jQuery e jQuery UI. Contém vários exercícios práticos e demos além de referências úteis.
Oficina realizada em 2011. Apresenta a linguagem javascript e os frameworks jQuery e jQuery UI. Contém vários exercícios práticos e demos além de referências úteis.
A construção de interfaces ricas na web podem ser menos traumáticas, essa é a premissa básica desse framework. Nessa palestra faleremos sobre a introdução ao uso do Angular JS e o seu funcionamento, explicando as abstrações e magias que tornam o framework mais produtivo.
Essa apresentação contém um conteúdo que utilizei em uma aula sobre ReactJS.
Nela contém as instruções básicas de como criar aplicações usando ReactJS como seu javascript framework. Eu também usei o exemplo que o site oficial prove, desenvolvendo um jogo da velha, de forma mais simplificada para os meus alunos.
Programando para programadores: Desafios na evolução de um FrameworkPablo Dall'Oglio
Nesta palestra são abordados alguns desafios a serem enfrentados na criação de um Framework PHP open-source e também os obstáculos a serem superados para que o mesmo evolua tecnologicamente, mantendo a retrocompatibilidade e uma base de usuários ativa, fazendo o uso correto de seus conceitos.
A construção de interfaces ricas na web podem ser menos traumáticas, essa é a premissa básica desse framework. Nessa palestra faleremos sobre a introdução ao uso do Angular JS e o seu funcionamento, explicando as abstrações e magias que tornam o framework mais produtivo.
Essa apresentação contém um conteúdo que utilizei em uma aula sobre ReactJS.
Nela contém as instruções básicas de como criar aplicações usando ReactJS como seu javascript framework. Eu também usei o exemplo que o site oficial prove, desenvolvendo um jogo da velha, de forma mais simplificada para os meus alunos.
Programando para programadores: Desafios na evolução de um FrameworkPablo Dall'Oglio
Nesta palestra são abordados alguns desafios a serem enfrentados na criação de um Framework PHP open-source e também os obstáculos a serem superados para que o mesmo evolua tecnologicamente, mantendo a retrocompatibilidade e uma base de usuários ativa, fazendo o uso correto de seus conceitos.
Web components: mais simples e produtivo com polymer!Andrew Willard
Nesta apresentação eu mostro as features que compões os Web Components para desenvolvimento WEB, destaco o uso do Polymer por grandes Produtos como o YouTube e a Ingresso Rápido, além das facilidades e agilidade de implementação.
Palestra sobre Backbone.js ministrada no LambdaDay, evento da Lambda3.
http://day.lambda3.com.br
Código do exemplo em:
https://github.com/Lambda3/lambdaday2013-backbonejs
Hoje em dia quando o assunto é CSS muito se fala em modularização e arquitetura de código. Mas o que de fato é isso? Quais abordagens podemos utilizar para tornar o código do nosso CSS mais organizado?
Nessa apresentação procuro passar uma visão geral das técnicas mais populares, detalhando suas particularidades e a ideologia por traz de cada uma.
Também falo de técnicas mais recentes que abordam o desenvolvimento de CSS de perspectivas diferentes e algumas dicas gerais de como deixar seu código mais flexível a mudanças.
16. HTML
<news>
<author uid="jim-kennedy">
Jim Kennedy</author>
<time>April 23</time>
<title>What is the core of
Palestinian conflict?</title>
<news-stats>
<stats-reads>26</stats-reads>
<stats-shares>312</stats-shares>
<stats-likes>216</stats-shares>
</news-stats>
</news>
17. Elementos HTML5 podem ser
estilizados no Internet Explorer 6
porque nele é possível definir
novos elementos
https://github.com/afarkas/html5shiv
19. Acabamos de criar uma série de
elementos sem valor semântico
fora do escopo do nosso projeto
20.
21. HTML
<div itemscope
itemtype="http://schema.org/NewsArticle">
<!-- -->
</div>
Microformats acrescentam
significado ao conteúdo
22. Sabemos que não há nenhuma
semântica a ser seguida quando
atribuímos classes a um elemento
http://nicolasgallagher.com/about-html-semantics-
front-end-architecture
23. HTML
<div class="board-item
board-item--hightlight">
<!-- -->
</div>
É muito mais flexível e prático utilizar
classes com nomes relacionados a
aparência para estilizar
24. Utilizar classes e microformats é mais
adequado sob a ótica de estilização e
semântica que definir novos elementos
25. HTML
<div class="board-item" itemscope
itemtype="http://schema.org/NewsArticle">
<div class="person" itemprop="author">
Jim Kennedy</div>
<time itemprop="datePublished">
April 23</time>
<div class="board-item__title"
itemprop="name"><!-- --></div>
<div class="board-stats">
<div class="board-stats__reads">26</div>
<div class="board-stats__shares">312</div>
<div class="board-stats__likes">216</div>
</div>
</div>
40. HTML
<div data-template style="display:none">
<img src="image.png">
<div>{{name}}</div>
</div>
Conteúdo será processado e a imagem
será requisitada para o servidor
41. HTML
<script type="text/template">
<img src="image.png">
<div>{{name}}</div>
</script>
Conteúdo é uma string que
pode expor a aplicação a
Cross-site scripting
42. JAVASCRIPT
var userData = '<script src="authstealer.js">'
el.innerHTML = t.replace('{{name}}', userData)
Assim é que sofremos um XSS attack
49. JSX JavaScript XML syntax
• Fácil de visualizar a estrutura
• Designers sentem-se confortáveis
em fazer alterações
• Previne Cross-site scripting
http://facebook.github.io/react/docs/jsx-in-depth.html
50. Shadow DOM
Permite isolar código HTML o
mantendo livre de interferências
da página
51. I’m definitely not a fan of making your
widget out of a <canvas>. It is reliable but it’s
hostile to accessibility, indexing, composition,
and resolution independence
Dominic Cooney
Google
55. Hiding Native HTML5 Video Controls in
Full-Screen Mode
Chris Coyier
http://css-tricks.com/custom-controls-
in-html5-video-full-screen
Shadow DOM CSS Cheat Sheet
Rob Dodson
http://robdodson.me/blog/2014/04/10/
shadow-dom-css-cheat-sheet
57. Maintainable JavaScript: Don’t modify
objects you don’t own
Nicholas C. Zakas
http://www.nczonline.net/blog/2010/03/02/maintainable-javascript-
dont-modify-objects-you-down-own
61. HTML
<div class="widget"></div>
<p>Not blue content</p>
<script>
var root = document.querySelector('.widget')
.createShadowRoot()
root.innerHTML = '<style>' +
'p { color: blue }</style>'
</script>
As regras definidas no Shadow DOM
não surtem efeito na página
62. HTML
<style> p { background: red } </style>
<div class="widget"></div>
<script>
var root = document.querySelector('.widget')
.createShadowRoot()
root.innerHTML = '<p>Content</p>'
</script>
E as regras de CSS definidas na página
não se aplicam ao Shadow DOM
64. Mas perder a identidade da página
a cada Shadow DOM geralmente
não é a intenção
65. Não esqueça que conflitos de CSS
podem ser evitados com a adoção de
um sistema de escrita
http://tableless.com.br/oocss-smacss-bem-dry-css-
afinal-como-escrever-css
66. HTML
<div class="widget">
<style scoped>
p { color: red }
</style>
<p>Red content</p>
</div>
Scoped CSS poderia ser um recurso
tão interessante (se não só o
Firefox tivesse suporte)
82. HTML
.sign-up::part(login-label) {
color: orange;
}
Shadow DOM permite definir
elementos parts passíveis de
estilização
http://robdodson.me/blog/2013/08/29/shadow-dom-
styles-cont-dot
92. HTML
<link rel="import" href="jquery.html">
<link rel="import" href="timeline.html">
timeline.html
<link rel="import" href="jquery.html">
Documentos indicados no import
são incluídos uma única vez
93. HTML
<link rel="import" href="jquery.html">
<link rel="import"
src="http://twitter.com/timeline.html">
timeline.html
<link rel="import" href="jquery.html">
Não resolve o problema em
diferentes domínios