Entender como funciona o processo de renderização do browser é simples e ajuda bastante na hora de pensar em performance. Nessa apresentação, mostro um pouco sobre esse processo.
Padrões Web e algumas vantagens para o designerDiego Eis
Palestra bem básica sobre algumas vantagens do CSS. Vantagens mais ligadas a design. Palestra feita para iniciantes e interessados no Semana do Design feito na Faculdade Impacta de Tecnologia em SP.
Construir um framework é basicamente escrever o CSS do jeito certo, ou seja, escrever código sem dependências, modular, leve e altamente documentado.
Palestra feita pela primeira vez na QCon 2013.
O que você precisa saber para se tornar um dev front-endDiego Eis
Ser um desenvolvedor front-end já foi mais fácil. Essa palestra mostra o caminho das pedras para os que estão iniciando na área e os que já estão, servindo como guia para assuntos importantes na área.
Link do artigo relacionado:
http://tableless.com.br/tornar-dev-front-end/
DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow?RC Comunicação
Com as constantes mudanças de ferramentas e no desenvolvimento web, construímos um workflow do processo criativo ao desenvolvimento front-end, focado em qualidade, agilidade e integração entre as equipes.
Padrões Web e algumas vantagens para o designerDiego Eis
Palestra bem básica sobre algumas vantagens do CSS. Vantagens mais ligadas a design. Palestra feita para iniciantes e interessados no Semana do Design feito na Faculdade Impacta de Tecnologia em SP.
Construir um framework é basicamente escrever o CSS do jeito certo, ou seja, escrever código sem dependências, modular, leve e altamente documentado.
Palestra feita pela primeira vez na QCon 2013.
O que você precisa saber para se tornar um dev front-endDiego Eis
Ser um desenvolvedor front-end já foi mais fácil. Essa palestra mostra o caminho das pedras para os que estão iniciando na área e os que já estão, servindo como guia para assuntos importantes na área.
Link do artigo relacionado:
http://tableless.com.br/tornar-dev-front-end/
DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow?RC Comunicação
Com as constantes mudanças de ferramentas e no desenvolvimento web, construímos um workflow do processo criativo ao desenvolvimento front-end, focado em qualidade, agilidade e integração entre as equipes.
JavaScript e o perfil do desenvolvedor front end das atualidades mais atuaisWilliam Oliveira
Palestra apresentada no FEMUG-ABC com o intuito de convencer os desenvolvedores da necessidade de se aprender/estudar JavaScript e como se adequar ao mercado de trabalho atual.
Versão original com anotações, links importantes e os gifs legais: https://docs.google.com/presentation/d/15St9PXpif87PIqWnIuP3Xfr-kOPJvnssWIt_cLpnoRI/edit?usp=sharing
Apresentação utilizada para introduzir meus alunos no mundo da estruturação com (x)html/css. A novidade, aqui, é apresentar os prós e contras da utilização de ferramentas WYSWYG, como o dreamweaver.
Questões como a organização do código e a cobrança do mercado web para que o profissional conheça tais técnicas também são abordadas.
Apresentação baseado em artigo "(x)html/css para design de interfaces", que pode ser lido no seguinte endereço:
http://www.fabianoweb.net/blog/2008/10/xhtml-e-css-para-design-de-interfaces-1/
Grande abraço!
Você não precisa de uma sopa de letrinhas para criar web appsWilliam Oliveira
Palestra apresentada no GDG-ABC sobre a criação de Web Apps e um overview sobre a criação de aplicações JavaScript com Frameworks como o AngularJS, libs como ReactJS e ferramentas estilo GulpJS, GruntJS, Yeoman, NPM, Webpack, dentre outras.
Apresentação realizada no Aniversário do curso de Ciência da Computação da Universidade Federal do Maranhão (UFMA). O objetivo é apresentar a definição de framework, mostrar alguns padrões de projeto e um case de um pequeno framework chamado LizPHP.
Bootstrap, desenvolvendo uma interface responsiva na prática!Cristofer Sousa
Nessa apresentação explico um pouco o que envolve o desenvolvimento de uma interface responsiva, alguns conceitos sobre media-queries, grids e como utilizar o Bootstrap de forma eficiente e rápida.
UX, Front-end and Back-end: How front-end can help these guys?Diego Eis
How front-end can help UX and Back-end guys? How they interact? I tell a little about it in this slides, showing how the front-end can help the back-end and UX.
JavaScript e o perfil do desenvolvedor front end das atualidades mais atuaisWilliam Oliveira
Palestra apresentada no FEMUG-ABC com o intuito de convencer os desenvolvedores da necessidade de se aprender/estudar JavaScript e como se adequar ao mercado de trabalho atual.
Versão original com anotações, links importantes e os gifs legais: https://docs.google.com/presentation/d/15St9PXpif87PIqWnIuP3Xfr-kOPJvnssWIt_cLpnoRI/edit?usp=sharing
Apresentação utilizada para introduzir meus alunos no mundo da estruturação com (x)html/css. A novidade, aqui, é apresentar os prós e contras da utilização de ferramentas WYSWYG, como o dreamweaver.
Questões como a organização do código e a cobrança do mercado web para que o profissional conheça tais técnicas também são abordadas.
Apresentação baseado em artigo "(x)html/css para design de interfaces", que pode ser lido no seguinte endereço:
http://www.fabianoweb.net/blog/2008/10/xhtml-e-css-para-design-de-interfaces-1/
Grande abraço!
Você não precisa de uma sopa de letrinhas para criar web appsWilliam Oliveira
Palestra apresentada no GDG-ABC sobre a criação de Web Apps e um overview sobre a criação de aplicações JavaScript com Frameworks como o AngularJS, libs como ReactJS e ferramentas estilo GulpJS, GruntJS, Yeoman, NPM, Webpack, dentre outras.
Apresentação realizada no Aniversário do curso de Ciência da Computação da Universidade Federal do Maranhão (UFMA). O objetivo é apresentar a definição de framework, mostrar alguns padrões de projeto e um case de um pequeno framework chamado LizPHP.
Bootstrap, desenvolvendo uma interface responsiva na prática!Cristofer Sousa
Nessa apresentação explico um pouco o que envolve o desenvolvimento de uma interface responsiva, alguns conceitos sobre media-queries, grids e como utilizar o Bootstrap de forma eficiente e rápida.
UX, Front-end and Back-end: How front-end can help these guys?Diego Eis
How front-end can help UX and Back-end guys? How they interact? I tell a little about it in this slides, showing how the front-end can help the back-end and UX.
A brief introduction about what expect from CSS Level 4. CSS 3 was all about shadows, borders, backgrounds, 3D, transitions and animations. CSS 4 is all about select and detect things.
Flexbox and Grid Layout: How you will structure layouts tomorrow.Diego Eis
Say goodby to Float. Float save us until today. But float was never the right solution. With Flexbox and Grid Layout, we have the right solutions (maybe) to structure layouts to many devices and screens, with less work, easy (not so much) to understand syntax and maintainable code.
Lets talk today about Flexbox and Grid Layout and how they work.
Interface é código: aprimorando a experiência do usuário no front e no back-endTalita Pagani
Sendo desenvolvedor de software, qual a minha contribuição e o meu papel para a usabilidade dos sistemas que desenvolvo? Acredite, muita coisa que prejudica a usabilidade não está no design do seu sistema, mas no código dele.
Nessa palestra, é abordado como o desenvolvedor/analista/engenheiro pode melhorar a experiência do usuário (UX) para aplicações web – com boas práticas de JavaScript, tratamento, prevenção e recuperação de erros, configurações de cache e otimização de requisições HTTP com exemplos de sites de diferentes portes.
Também é mostrado como validar e testar rapidamente requisitos funcionais e não funcionais com prototipagem rápida e quais ferramentas podem ser utilizadas para analisar e verificar diversos pontos do seu site.
Introdução a testes de usabilidade - 11º Diverso DesignTalita Pagani
Palestra sobre os conceitos básicos de testes de usabilidade ministrada no 11º Diverso Design em Bauru.
----
Talk about usability testing basics, in pt-br, presented on XI Design Diverso in Bauru, Brazil.
A WAI-ARIA serve para estender o significado das interações do seu site. Quando as tags do HTML5 vieram, elas já começaram um trabalho importante de dar significado às estruturas do layout. Você consegue marcar agora o que é um menu de navegação, uma sidebar, um header, um footer etc. Esse trabalho é muito importante por que ajuda a definir a importância dos elementos que cada elemento contém.
Veja um artigo completo neste link:
http://tableless.com.br/wai-aria-estendendo-o-significado-das-interacoes/
ISP - The Interface Segregation Principle Thiago c?ar
Trabalho sobre Principio de segregação de interfaces.
Disciplina:
Programação Orientada a Objetos
Curso:
Pós-Graduação em Engenharia de Software Centrada em Métodos Ágeis
Alunos:
Thiago César
Walter Brito
Novidade no mercado mineiro de plotagem para engenharia e arquitetura
Possuindo equipamentos de alta tecnologia e equipe qualificada, pronta para satisfazer o cliente, a Big Plotter quer se firmar como referência no mercado mineiro de plotagem para engenharia e arquitetura.
A empresa, com sede em Belo Horizonte, está com promoções especiais de inauguração.
Peça a tabela com os preços promocionais por email ou pelo telefone (31) 3271-7711.
WCM 2009-TT19 3 M-Programa ISP Integração dos Serviços de TerceirizadosEXCELLENCE CONSULTING
Este trabalho foi apresentado no Congresso WCM 2009 realizado no Instituto de Engenharia de S. Paulo, promovido pela Excellence. A 3 M apresentou o Programa ISP Integração dos Serviços de Terceirizados.
Interface é código: aprimorando a experiência do usuário no front e no back-endTalita Pagani
Palestra realizada no The Developer's Conference (TDC) em 24 de julho de 2015. Nessa palestra, será abordado como o desenvolvedor/analista/engenheiro pode melhorar a experiência do usuário (UX) para aplicações web com boas práticas de JavaScript, tratamento, prevenção e recuperação de erros, configurações de cache e otimização de requisições HTTP com exemplos de sites de diferentes portes. Grande parte dos tópicos abordados se relacionam com a performance front-end e back-end contextualizados sob o impacto sobre a experiência de uso. Também será mostrado como validar e testar rapidamente requisitos funcionais e não funcionais com prototipagem rápida e quais ferramentas podem ser utilizadas para analisar e verificar diversos pontos do seu site.
APIs: The Problems with Eating your Own Dog FoodPhil Calçado
SoundCloud's web and mobile properties are all built on top of our Public API. While building the user-interface atop a RESTful layer has proven itself a sound decision, the one-size-fits-all nature of a Public API is not ideal.
When it comes to data transfer and HTTP resource modelling, each client has their own needs, and in the end hacks and workarounds have to be implemented in both clients and servers. Feature development also becomes complicated, with coordination between multiple teams required for every single little feature.
SoundCloud is now moving to a different model, where clients have their own façade APIs, modelled after their core characteristics and needs. We are also using the architecture to break away from Conway’s Law and building more cross-functional, end-to-end teams.
From: http://gotocon.com/berlin-2013/presentation/APIs:%20The%20Problems%20with%20Eating%20your%20Own%20Dog%20food
To implement this, a lot of change in our architecture, tech stack and development processes were required. In this talk we will explore the challenges we had, the options we investigated and how ultimately SoundCloud decided to move forward.
Navegadores por de baixo dos panos - Ana Luiza BastosiMasters
Ana Luiza Bastos - Fullstack Developer, Quanto
Como funciona o passo a passo da renderização de elementos do navegador do request ao website funcional e como otimizar a performance para garantir uma melhor experiência de usuário.
Apresentado no InterCon 2018 - https://eventos.imasters.com.br/intercon
JS Experience 2017 - Otimizando o front endiMasters
Thales Carvalho, Course Manager da Udacity fala sobre Otimizando o front end no JS Experience'17
Saiba mais em https://eventos.imasters.com.br/jsexperience
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3 Cristofer Sousa
Essa apresentação visa dar enfase para quem deseja conhecer HTML5, CSS3 e o conceito de prototipagem, a partir disso foi possivel fazer grupo de trabalhos para criação de desenvolvimento de interfaces para sistemas web.
Introdução ao Desenvolvimento WEB com Ruby on RailsJulio Betta
Slides que utilizei para ministrar uma palestra sobre Desenvolvimento WEB com Ruby on Rails no IV Congresso de Iniciação Científica da Faculdade Redentor de Itaperuna / RJ.
Versão PDF aqui: https://www.dropbox.com/s/2fkwksu00chm7nu/presentation.pdf
Apresentação sobre CSS que mostra técnicas antigas de desenvolvimento, novas funcionalidade da versão CSS3, lidando com navegadores antigos e sem suporte, exemplos de algumas ferramentas úteis.
Edição de conteúdo web usando Javascript de ponta a pontaJorge Walendowsky
Porque utilizar um CMS sempre é tão complicado? Porque desenvolver para eles é sempre uma tarefa tão difícil para os desenvolvedores?
Esta palestra mostrará como este problema vem sendo resolvido no iG usando o NodeJS para criar um sistema de edição de páginas web totalmente em Javascript e reaproveitar o código usado nos browsers dos editores. Mostraremos como a nova edição das homes do iG se beneficia da renderização dos templates usando Javascript e como as inovações dessa linguagem nos ajudaram a criar uma interface altamente intuitiva. Falaremos também sobre como o NodeJS em uma aplicação da “vida real” nos possibilitou criar um backend altamente escalável e facilitou o desenvolvimento de módulos robustos para edição simultânea, renderização, publicação de páginas, entre outros.
Semelhante a DOM, CSSOM e RenderThree - Introdução ao Browser Render Path (20)
Carreira de Product Manager em 18 minutosDiego Eis
Alguns highlights sobre progressão de carreira e responsabilidades de pessoas que gerem produtos digitais.
Palestra feita na Trends and Future, Novembro de 2021, na FAAP, São Paulo.
Service Dominant Logic - S-D Logic em Produtos DigitaisDiego Eis
A forma com que lidamos com produtos todos os dias tem mudado nos últimos dez anos e um novo pensamento tem se difundido, mudando a forma tradicional de pensamento sobre produto.
O que isso tem a ver com produtos digitais? Como podemos trazer para o contexto dos produtos digitais um pensamento mais centrado em serviço, criado para e com o usuário? Foi isso que eu quis estudar nesses slides.
Métricas para times Ágeis usando Estatística BásicaDiego Eis
Entender quanto e quando entregar em projetos de software é algo difícil. Isso todo mundo já sabe e é exatamente por esse motivo que todo mundo acha que apenas ter um time agile é a solução para todos os problemas.
Se aplicarmos um pouco de estatística básica, como Média, Mediana, Percentil, Desvio Padrão, Histograma e outras técnicas a partir de números de Leadtime e Throughput, nós conseguimos entender a constância de entregas do time.
O que é semântica? Para que serve o HTML? O que é marcação de dados? Entenda como a semântica do HTML nos ajuda a publicar informação na web de forma mais inteligente.
Manual de Sobrevivência do Desenvolvedor EmpreendedorDiego Eis
Eu sei que você sabe programar muito bem. Eu sei que você é um ótimo designer. Eu sei que você é o melhor freela do mundo. Acontece que tem alguns detalhes importantes que nem todo mundo segue e eu estou aqui para te lembrar.
Veja essa palestra em vídeo aqui:
https://www.eventials.com/tableless/guia-de-sobrevivencia-do-dev-empreendedor-2/
2. Diego Eis
I love work with web.
And I lost 37 pounds. ;-)
@diegoeis
@tableless
http://tableless.com.br
http://medium.com/@diegoeis
http://slideshare.net/diegoeis
11. Document Object Model
Uma representação estruturada de documentos HTML e
XML. Essa estrutura pode ser acessada por scripts e
linguagens de programação, possibilitando a mudança de
estrutura do documento, estilo e conteúdo.
15. Tokens
StartTag: html StartTag: head tag: title tag: meta
EndTag: head StartTag: body StartTag: p
dev
EndTag: body EndTag: html
StartTag: span EndTag: span
EndTag: p
Olá
maroto
18. DOM e JS
O JavaScript não manipula o HTML, ele manipula o DOM.
Você escreve JavaScript, mas usa o DOM para acessar o
documento e seus elementos. O DOM não é uma
linguagem de programação, mas sem ele, o JavaScript não
teria um modelo da página para manipular.
26. Por que o CSSOM tem
formato de árvore?
Quando o browser carrega todos os estilos dos objetos da
página, o browser aplica os estilos da regra mais genérica,
recursivamente, para a mais específica, refinando os estilos
aplicados. Por isso o termo Cascading (Cascata) no nome
CSS.
28. body
p
font-size: 16px;
background-color: #ccc;
font-size: 16px;
color: #fff;
font-weight: bold;
div
span
font-size: 16px;
font-weight: bold;
color: #fff;
font-size: 16px;
color: #ccc;
ul
li
font-size: 16px;
color: #ccc;
font-size: 16px;
color: #ccc;
font-size: 20px;
29. 1 Aplicação das regras básicas do Browser
2 Declarações customizadas do usuário
3 Declarações normais (genéricas) do dev
3.1 Regras mais específicas
3.2 !important
37. RenderTree
Quando o DOM e o CSSOM são calculados, os dois se
juntam na RenderTree, onde são computados o layout de
cada elemento visível no documento.
3
38. font-size: 16px;
color: #fff;
font-size: 16px;
color: #fff;
border: 1px solid red;
p
font-size: 16px;
color: #fff;
Olá
span
p
span marotoOlá
dev
font-size: 16px;
color: #fff;
border: 1px solid red;
span
p
maroto
DOM
dev
CSSOM
Render Tree
40. font-size: 16px;
color: #fff;
font-size: 16px;
color: #fff;
display: none;
p
font-size: 16px;
color: #fff;
Olá
p
span marotoOlá
dev
span
p
maroto
DOM
CSSOM
Render Tree
41. visibility vs display
A propriedade visibility é diferente da propriedade display.
No caso do visibility, o elemento é renderizado, mas não é
visível.
47. IMAGEM
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
venenatis turpis nec diam tempus convallis eu ac lorem.
Integer at ultrices velit, a ultricies odio. Donec eu ex luctus,
maximus ante et, dictum leo. Proin ullamcorper ante id dolor
viverra, id scelerisque arcu sodales. Maecenas est risus,
blandit in nunc eu, ornare maximus est. Nunc nec erat et
diam ultricies pellentesque consectetur non turpis. Quisque
at auctor massa. Mauris a venenatis enim, nec maximus ex.
In dictum odio nisl, eget commodo dui tristique id. Sed
fringilla laoreet ligula at aliquam. Suspendisse sit amet nisi
ligula.
Cras viverra quis arcu mattis aliquet. Sed et nibh a nunc hendrerit interdum a ut lacus.
Integer id turpis viverra ex vulputate tincidunt sit amet eget mauris. Praesent eu
fermentum nunc, vitae scelerisque elit. Etiam vel eros libero. Phasellus et nunc lectus.
Nulla sit amet iaculis felis, a dignissim ipsum. Sed consequat suscipit ipsum, quis
euismod mauris commodo in. Fusce aliquet sollicitudin ultrices. Pellentesque vitae lorem
mauris. Aliquam varius risus ut leo rutrum vehicula.
Nulla tempor nisl mollis, facilisis arcu quis, tempus risus. Suspendisse sed turpis elit.
Morbi dignissim sed metus nec luctus. Vestibulum interdum mattis aliquet. Duis facilisis
mauris rutrum purus euismod pretium. Nam justo leo, lacinia id dapibus id, bibendum at
neque. Sed finibus ipsum sed est commodo, in accumsan lacus luctus. Sed eget lobortis
tellus. Aliquam tristique et orci nec ornare. Mauris eu vulputate eros. Etiam ac hendrerit
leo, non imperdiet lorem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras venenatis turpis nec diam
tempus convallis eu ac lorem. Integer at ultrices velit, a ultricies odio. Donec eu ex
luctus, maximus ante et, dictum leo. Proin ullamcorper ante id dolor viverra, id
scelerisque arcu sodales. Maecenas est risus, blandit in nunc eu, ornare maximus est.
48. Paint
Sabendo o tamanho e a posição de cada elemento, agora
o browser renderiza os pixels na tela.
56. Reflow
Quando você modifica qualquer coisa no DOM, como a
posição dos elementos, quando você cria, remove ou
esconde elementos com display: none. Essas tarefas fazem
o browser ter que recalcular a geometria e a posição dos
elementos e seus descendentes.
57. Repaint
Ocorre quando você modifica qualquer característica visual
dos elementos ou seus descendentes. Quando você muda
background, font, borda, esconde com visibility, muda
padding, margin, etc…
59. 1 Inicia a construção do DOM parseando o HTML
2 Constrói o CSSOM parseando o CSS
3 Faz o merge do DOM e do CSSOM na Render Tree
4 Computa a geometria e posição de cada nó do HTML
5 Pinta os elementos individualmente na tela
60. 1 Inicia a construção do DOM parseando o HTML
2 Faz o request do CSS e do JS que encontra no head
3 Constrói o CSSOM parseando o CSS
4
Executa o JS, porque ele pode modificar o DOM antes
de virar HTML
5 Faz o merge do DOM e do CSSOM na Render Tree
6
Roda o Layout (calcula geometria e posição) e o Paint
(mostra na tela)
61. CSS bloqueante
Por padrão o CSS é um recurso que faz o browser pausar o
processo de renderização do conteúdo até que o CSSOM
seja construído. Mas o browser é esperto e entende quais
CSS são bloqueadores.
62. <!-- Este é bloqueante -->
<link href="style.css">
<!-- Este só é carregado na impressão -->
<link href="print.css" media="print">
<!-- E este só quando a condição for verdadeira -->
<link href="mobile.css" media="(max-width: 980px)">
63. JS bloqueante
O JavaScript é bloqueante por que ele pode modificar o
DOM e o CSSOM; A sua execução bloqueia o CSSOM; E
também bloqueia o DOM, a menos que seja declarado
como async.
66. Ferramentas
O inspector do Chrome é uma das melhores ferramentas
para monitorar e analisar a render path do browser. O site
WebPageTest também é um grande aliado.
67.
68.
69. Coloque o CSS no HEAD
Todos os CSS devem ser especificados o mais cedo
possível. Colocando no HEAD, o browser descobre seus
CSS de maneira mais rápida.
70. Não use CSS imports
O browser só descobre que há outros CSSs quando ele
baixa o CSS com @import e parseia, só depois ele busca os
arquivos de CSS importados.
71. Prefira JS com async
JavaScript com async não bloquea a renderização do HTML
e do CSSOM.
72. Use defer nos JS que não
forem essenciais
Qualquer script não essencial, ou seja, que não seja crítico
para a construção inicial da página deve ser atrasado para
economizar trabalho de renderização.
73. Goodbye!
Let me know what you think!
@diegoeis
@tableless
http://tableless.com.br
http://medium.com/@diegoeis
http://slideshare.net/diegoeis