Submit Search
Upload
Front-end Wonderland
•
0 likes
•
136 views
Luiz Carlos Chaves
Follow
Cenários do desenvolvimento front-end
Read less
Read more
Technology
Report
Share
Report
Share
1 of 61
Download now
Download to read offline
Recommended
Indian IT Industry at Crossroads : What should developers and managers do?
Indian IT Industry at Crossroads : What should developers and managers do?
inTwentyEight Minutes
App cache vs localStorage
App cache vs localStorage
senthil_hi
New text document
New text document
Ray Dsg
Weather
Weather
orengr
Anti (anti crawling) techniques
Anti (anti crawling) techniques
Ayman Hussein
AWS: Architecting for resilience & cost at scale
AWS: Architecting for resilience & cost at scale
Jos Boumans
Joomlatools Platform v1.0
Joomlatools Platform v1.0
Joomlatools
Comutadores
Comutadores
oziass
Recommended
Indian IT Industry at Crossroads : What should developers and managers do?
Indian IT Industry at Crossroads : What should developers and managers do?
inTwentyEight Minutes
App cache vs localStorage
App cache vs localStorage
senthil_hi
New text document
New text document
Ray Dsg
Weather
Weather
orengr
Anti (anti crawling) techniques
Anti (anti crawling) techniques
Ayman Hussein
AWS: Architecting for resilience & cost at scale
AWS: Architecting for resilience & cost at scale
Jos Boumans
Joomlatools Platform v1.0
Joomlatools Platform v1.0
Joomlatools
Comutadores
Comutadores
oziass
Jquery Framework
Jquery Framework
Luiz Carlos Chaves
Exibindo Dados com Geologalização
Exibindo Dados com Geologalização
Luiz Carlos Chaves
Performance na web: o modelo RAIL e outras novidades
Performance na web: o modelo RAIL e outras novidades
Caelum
3Com 10/100BASE-TX
3Com 10/100BASE-TX
savomir
Presentación1
Presentación1
jesus rodriguez garcia
Business is a game & the best team wins
Business is a game & the best team wins
Growthwise
Tech talent hunting
Tech talent hunting
Thibault Genaitay
La evolución
La evolución
nicolas triviño velandia
Guia extraescolares 17-18
Guia extraescolares 17-18
Educo Servicios y Proyectos Educativos
Laboratorio di Internazionalizzazione d’Impresa
Laboratorio di Internazionalizzazione d’Impresa
Octagona Srl
Ecosistemas eii
Ecosistemas eii
26844369
Mau ghe nail 2017 dep gia re bao hanh 5 nam
Mau ghe nail 2017 dep gia re bao hanh 5 nam
Noithat_hcm
Boletim 2017
Boletim 2017
Jorge Efrahim Magalhaes Berto
La realidad de mi centro i
La realidad de mi centro i
emangasl
презентація досвіду роботи
презентація досвіду роботи
Олефіренко Володимир
Em recruiting
Em recruiting
smithlopan8
Nuevo¡ contrato por obra o laboral - Presentación profesional 2017
Nuevo¡ contrato por obra o laboral - Presentación profesional 2017
Milton Llanten
Luz
Luz
Liliana Fernandez
Android infosecurity
Android infosecurity
Stephanie Vanroelen
Web Performance Optimierung - DWX13
Web Performance Optimierung - DWX13
Walter Ebert
5 Skills Needed to be a Successful WebVR Developer
5 Skills Needed to be a Successful WebVR Developer
Yoni Binstock
Bringing the JAMstack to the Enterprise
Bringing the JAMstack to the Enterprise
Jamund Ferguson
More Related Content
Viewers also liked
Jquery Framework
Jquery Framework
Luiz Carlos Chaves
Exibindo Dados com Geologalização
Exibindo Dados com Geologalização
Luiz Carlos Chaves
Performance na web: o modelo RAIL e outras novidades
Performance na web: o modelo RAIL e outras novidades
Caelum
3Com 10/100BASE-TX
3Com 10/100BASE-TX
savomir
Presentación1
Presentación1
jesus rodriguez garcia
Business is a game & the best team wins
Business is a game & the best team wins
Growthwise
Tech talent hunting
Tech talent hunting
Thibault Genaitay
La evolución
La evolución
nicolas triviño velandia
Guia extraescolares 17-18
Guia extraescolares 17-18
Educo Servicios y Proyectos Educativos
Laboratorio di Internazionalizzazione d’Impresa
Laboratorio di Internazionalizzazione d’Impresa
Octagona Srl
Ecosistemas eii
Ecosistemas eii
26844369
Mau ghe nail 2017 dep gia re bao hanh 5 nam
Mau ghe nail 2017 dep gia re bao hanh 5 nam
Noithat_hcm
Boletim 2017
Boletim 2017
Jorge Efrahim Magalhaes Berto
La realidad de mi centro i
La realidad de mi centro i
emangasl
презентація досвіду роботи
презентація досвіду роботи
Олефіренко Володимир
Em recruiting
Em recruiting
smithlopan8
Nuevo¡ contrato por obra o laboral - Presentación profesional 2017
Nuevo¡ contrato por obra o laboral - Presentación profesional 2017
Milton Llanten
Luz
Luz
Liliana Fernandez
Android infosecurity
Android infosecurity
Stephanie Vanroelen
Viewers also liked
(19)
Jquery Framework
Jquery Framework
Exibindo Dados com Geologalização
Exibindo Dados com Geologalização
Performance na web: o modelo RAIL e outras novidades
Performance na web: o modelo RAIL e outras novidades
3Com 10/100BASE-TX
3Com 10/100BASE-TX
Presentación1
Presentación1
Business is a game & the best team wins
Business is a game & the best team wins
Tech talent hunting
Tech talent hunting
La evolución
La evolución
Guia extraescolares 17-18
Guia extraescolares 17-18
Laboratorio di Internazionalizzazione d’Impresa
Laboratorio di Internazionalizzazione d’Impresa
Ecosistemas eii
Ecosistemas eii
Mau ghe nail 2017 dep gia re bao hanh 5 nam
Mau ghe nail 2017 dep gia re bao hanh 5 nam
Boletim 2017
Boletim 2017
La realidad de mi centro i
La realidad de mi centro i
презентація досвіду роботи
презентація досвіду роботи
Em recruiting
Em recruiting
Nuevo¡ contrato por obra o laboral - Presentación profesional 2017
Nuevo¡ contrato por obra o laboral - Presentación profesional 2017
Luz
Luz
Android infosecurity
Android infosecurity
Similar to Front-end Wonderland
Web Performance Optimierung - DWX13
Web Performance Optimierung - DWX13
Walter Ebert
5 Skills Needed to be a Successful WebVR Developer
5 Skills Needed to be a Successful WebVR Developer
Yoni Binstock
Bringing the JAMstack to the Enterprise
Bringing the JAMstack to the Enterprise
Jamund Ferguson
Website performance optimisation
Website performance optimisation
Webstock
4-identifying-problems.pdf
4-identifying-problems.pdf
Brian Rahmawan Purwoto
From Zero to Performance Hero in Minutes - Agile Testing Days 2014 Potsdam
From Zero to Performance Hero in Minutes - Agile Testing Days 2014 Potsdam
Andreas Grabner
NYC WebPerf Meetup Feb 2020 - Measuring the Adoption of Web Performance Techn...
NYC WebPerf Meetup Feb 2020 - Measuring the Adoption of Web Performance Techn...
Paul Calvano
Front-end on steroids
Front-end on steroids
Timble
Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?
Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?
Andy Davies
Jlook web ui framework
Jlook web ui framework
HongSeong Jeon
Hands on performance testing and analysis with web pagetest
Hands on performance testing and analysis with web pagetest
Patrick Meenan
Web Performance Optimization
Web Performance Optimization
Patrick Meenan
Security Testing by Ken De Souza
Security Testing by Ken De Souza
QA or the Highway
High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)
Steve Souders
Performance automation 101 @LDNWebPerf MickMcGuinness
Performance automation 101 @LDNWebPerf MickMcGuinness
Stephen Thair
Testable client side_mvc_apps_in_javascript
Testable client side_mvc_apps_in_javascript
Timothy Oxley
Web assembly with PWA
Web assembly with PWA
Shashank Sharma
SpeedGeeks
SpeedGeeks
xlight
In Search of Speed
In Search of Speed
SergeyChernyshev
Consegi 2010 - Dicas de Desenvolvimento Web com Ruby
Consegi 2010 - Dicas de Desenvolvimento Web com Ruby
Fabio Akita
Similar to Front-end Wonderland
(20)
Web Performance Optimierung - DWX13
Web Performance Optimierung - DWX13
5 Skills Needed to be a Successful WebVR Developer
5 Skills Needed to be a Successful WebVR Developer
Bringing the JAMstack to the Enterprise
Bringing the JAMstack to the Enterprise
Website performance optimisation
Website performance optimisation
4-identifying-problems.pdf
4-identifying-problems.pdf
From Zero to Performance Hero in Minutes - Agile Testing Days 2014 Potsdam
From Zero to Performance Hero in Minutes - Agile Testing Days 2014 Potsdam
NYC WebPerf Meetup Feb 2020 - Measuring the Adoption of Web Performance Techn...
NYC WebPerf Meetup Feb 2020 - Measuring the Adoption of Web Performance Techn...
Front-end on steroids
Front-end on steroids
Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?
Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?
Jlook web ui framework
Jlook web ui framework
Hands on performance testing and analysis with web pagetest
Hands on performance testing and analysis with web pagetest
Web Performance Optimization
Web Performance Optimization
Security Testing by Ken De Souza
Security Testing by Ken De Souza
High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)
Performance automation 101 @LDNWebPerf MickMcGuinness
Performance automation 101 @LDNWebPerf MickMcGuinness
Testable client side_mvc_apps_in_javascript
Testable client side_mvc_apps_in_javascript
Web assembly with PWA
Web assembly with PWA
SpeedGeeks
SpeedGeeks
In Search of Speed
In Search of Speed
Consegi 2010 - Dicas de Desenvolvimento Web com Ruby
Consegi 2010 - Dicas de Desenvolvimento Web com Ruby
Recently uploaded
Tech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdf
hans926745
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
UK Journal
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
Safe Software
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
HampshireHUG
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
lior mazor
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
vu2urc
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc
Advantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your Business
Pixlogix Infotech
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
hans926745
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
sammart93
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
Rafal Los
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
The Digital Insurer
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
apidays
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
The Digital Insurer
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
Michael W. Hawkins
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
presentation ICT roal in 21st century education
presentation ICT roal in 21st century education
jfdjdjcjdnsjd
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
Andrey Devyatkin
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
ThousandEyes
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
Joaquim Jorge
Recently uploaded
(20)
Tech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
Advantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your Business
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
presentation ICT roal in 21st century education
presentation ICT roal in 21st century education
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
Front-end Wonderland
1.
WonderLAND @luiz.chaves FRONT-END
2.
Qual desses não
é um framework JS?
3.
https://www.digitalocean.com/community/tutorials/5-common-server-setups-for-your-web-application
4.
http://macenstein.com/default/2008/01/apples-website-circa-1997/
5.
6.
7.
https://www.digitalocean.com/community/tutorials/5-common-server-setups-for-your-web-application
8.
https://www.slideshare.net/caelumdev/performance-na-web-o-modelo-rail-e-outras-novidades
9.
10.
126 Request 16.8s load 3KB
tamanho https://www.webpagetest.org/result/170301_YA_ZRF/
11.
Otimização na Web https://www.slideshare.net/caelumdev/performance-na-web-o-modelo-rail-e-outras-novidades
12.
https://twitter.com/sstephenson/status/730039913052176384
13.
This is Front-End
14.
15.
HYPERTEXT MARKUP LANGUAGE
16.
17.
18.
19.
20.
<tag></tag> atributo="valor" &entity;
21.
Estrutura básica
22.
Mais Semântico
23.
Mais Semântico
24.
Mais Semântico
25.
Dados Semânticos
26.
Meta Tag
27.
Meta Tag
28.
Meta Tag
29.
Featured snippets &
Sitelinks
30.
Instant Article Facebook
31.
Accelerated Mobile Pages
32.
Link Type Preload
33.
Form
34.
Atributo data-*
35.
Áudio & Vídeo
36.
Imagem responsiva
37.
Compatibilidade
38.
Compatibilidade
39.
CASCADE STYLE SHEET
40.
41.
<big> <blink> <center> <font size="" color=""
face="" > <marquee> <table bgcolor="">
42.
43.
44.
propriedade: valor; propriedade: função() @rule
{ … } @media (query) { … } #selector { … }
45.
<link> External stylesheet <style>
Internal stylesheet style="" Inline styles
46.
47.
CASCADE ???
48.
49.
CASCADE
50.
Style sheetsUser Agent Style
SheetsUser Style SheetsAuthor Normal Normal Style Sheets Style SheetsImportant Author UserImportant
51.
Thousands style attribute Hundreds
ID selector Tens class selector, attribute selector, pseudo-class Ones element selector, pseudo-element Style Selector Thousands Hundreds Tens Ones Total color: green style="" 1 0 0 0 1000 color: orange #title 0 1 0 0 0100 color: blue h1 0 0 1 0 0010 color: red h1 0 0 1 0 0010 NNNN
52.
53.
Caso remova o
color: green (style=“”) e o color: orange (#title), qual será a cor de <h1>? !
54.
redblue Style Selector Thousands
Hundreds Tens Ones Total color: green style="" 1 0 0 0 1000 color: orange #title 0 1 0 0 0100 color: blue h1 0 0 1 0 0010 color: red h1 0 0 1 0 0010
55.
56.
blue!
57.
INHERITANCE ???
58.
https://mdn.mozillademos.org/files/3623/CSS_Modules_and_Snapshots.png
59.
Tabela Cor sim,
Cor não
60.
61.
Variável & Calc
Download now