SlideShare uma empresa Scribd logo
1 de 52
Baixar para ler offline
My highlights from WordCamp
Europe 2019 as a Front-end Dev
Fellyph Cintra @fellyph
@fellyph
Solutions Engineer at @DeloitteDIGI_IE

Google Developer Expert
https://2019.dublin.wordcamp.org/call-for-speakers/
WordCamp
Europe 2019 Gutenberg 6.0
AMP plugin 1.2
Gutenberg 6.0
AMP Plugin 1.2
Gutenberg 6.0
https://make.wordpress.org/core/2019/06/26/whats-new-in-
Gutenberg Phases
1. Blocks for writing and editing
2. Widget, navigation and customization (now)
3. Collaboration, multi-user editing and workflows (future)
4. Multilingual support(future)
Gutenberg core & Gutenberg Plugin
New features &
Improvements
Layout
Picker
Group
blocks
Widget
Latest posts
Block
Manager
Cover Block
Snackbars
Performance
The following benchmark compares performance for a particularly sizeable post (~ 36000 words, ~ 1000 blocks) over the last releases
Coming soon
Grid
Navigation
Block
Installing
Blocks
Motion
Block
Directory
https://amp.dev/
User problems
Slow loading Unresponsive pages Content displaced by ads
Why AMP ?
● Enforces best practices for:
● Performance
● Accessibility
● Reliability
● Responsive Design
AMP Core
AMP HTML AMP JS AMP Cache
AMP
Sidebar
Past
AMP Plugin for WordPress
AMP Experiences, the WordPress Way
AMP Experiences
Websites Stories
BETA
The AMP Plugin modes
Standard Mode
Use AMP as the framework for your
site
Non AMP AMP Transitional Mode
Transitional Mode
Progressively closing the visual &
functionality gap between the AMP and
non-AMP version of you site
Non AMP AMP Reader Mode
Reader Mode
Simplified, baseline AMP
experiences
AMP plugin’s magic
Code the WordPress way, let the plugin do the rest
AMP WordPress
All WordPress core components are 

automatically AMP compatible:
Blocks, Widgets, Embeds, Comments,
etc.
html{…}
head{…}
body{…}
h1{…}
p{…}
CSS Tree Shaking
Ensures only the CSS needed on any
given page is loaded
Rendering Valid AMP
Validate page output and ensure
AMP compatibility wherever possible
Validation Workflow
Power, Control & Trust
Gutenberg blocks
AMP support for all core block
and a superset of custom AMP
blocks
Core Themes
Built-in AMP support for all core themes in both
Standard and Transitional modes.
https://2019-theme.amp-wp.org
https://2017-theme.amp-wp.org
https://2016-theme.amp-wp.org
https://2015-theme.amp-wp.org
Genesis Framework
Version 3.0 comes with AMP compatibility, making it easier to
have AMP compatible Genesis themes:
Essence Pro
Author
Metro
Breakthrough
… … ...
AMP Stories Editor (Beta)
Block navigation
Page Content
Title of your story
Settings
sidebar
1. Add image from
block media library
Block media
2. Insert a text box
AMP
Stories
Web Development with AMP Course
https://www.youtube.com/playlist?list=PLXTOW_XMsIDS45GB-eBV5s_M9EGIXMjI_
Obrigado
Thank you

Mais conteúdo relacionado

Mais procurados

Thomas Swendiman Sample Portfolio
Thomas Swendiman Sample PortfolioThomas Swendiman Sample Portfolio
Thomas Swendiman Sample Portfolio
tswendiman
 

Mais procurados (20)

Whats New in Uniface 9.7 Infographic
Whats New in Uniface 9.7 InfographicWhats New in Uniface 9.7 Infographic
Whats New in Uniface 9.7 Infographic
 
Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web Apps
 
Thomas Swendiman Sample Portfolio
Thomas Swendiman Sample PortfolioThomas Swendiman Sample Portfolio
Thomas Swendiman Sample Portfolio
 
Progressive Web App
Progressive Web AppProgressive Web App
Progressive Web App
 
Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web Apps
 
Whitepaper: Building Web Apps with Uniface
Whitepaper: Building Web Apps with UnifaceWhitepaper: Building Web Apps with Uniface
Whitepaper: Building Web Apps with Uniface
 
Web Development.pptx
Web Development.pptxWeb Development.pptx
Web Development.pptx
 
An introduction to Progressive Web Apps
An introduction to Progressive Web AppsAn introduction to Progressive Web Apps
An introduction to Progressive Web Apps
 
Final year internship presentation
Final year internship presentationFinal year internship presentation
Final year internship presentation
 
Flutter or PWA Which Is Best For Application Development
Flutter or PWA Which Is Best For Application DevelopmentFlutter or PWA Which Is Best For Application Development
Flutter or PWA Which Is Best For Application Development
 
Joomla multi effect modal box
Joomla multi effect modal boxJoomla multi effect modal box
Joomla multi effect modal box
 
Progressive web apps
Progressive web appsProgressive web apps
Progressive web apps
 
Android App Development Journey
Android App Development JourneyAndroid App Development Journey
Android App Development Journey
 
Why & which mobile cross platform?
Why & which mobile cross platform?Why & which mobile cross platform?
Why & which mobile cross platform?
 
redirectGiraffe Presentation 3
redirectGiraffe Presentation 3redirectGiraffe Presentation 3
redirectGiraffe Presentation 3
 
How to Design a Futuristic Website with Drupal 8?
How to Design a Futuristic Website with Drupal 8?How to Design a Futuristic Website with Drupal 8?
How to Design a Futuristic Website with Drupal 8?
 
Integrate Videos & Photos With Ease in ASP.NET
Integrate Videos & Photos With Ease in ASP.NETIntegrate Videos & Photos With Ease in ASP.NET
Integrate Videos & Photos With Ease in ASP.NET
 
PHP Training in Ghazibad
PHP Training in GhazibadPHP Training in Ghazibad
PHP Training in Ghazibad
 
What are Progressive Web Apps and Why The Businesses Should Use It?
What are Progressive Web Apps and Why The Businesses Should Use It?What are Progressive Web Apps and Why The Businesses Should Use It?
What are Progressive Web Apps and Why The Businesses Should Use It?
 
Web development intro session 2
Web development intro session 2Web development intro session 2
Web development intro session 2
 

Semelhante a WCEU 2019 recap - AMP Plugin 1.2 and Gutenberg 6.0

Mozilla Add-ons Universe: The Next Level for AMO
Mozilla Add-ons Universe: The Next Level for AMOMozilla Add-ons Universe: The Next Level for AMO
Mozilla Add-ons Universe: The Next Level for AMO
Brian King
 
Jon Trelfa Presentation From Desktop To Web – Getting It Right
Jon Trelfa Presentation From Desktop To Web – Getting It RightJon Trelfa Presentation From Desktop To Web – Getting It Right
Jon Trelfa Presentation From Desktop To Web – Getting It Right
Ajax Experience 2009
 
Mozilla Add-Ons Evolution 2011 in review and Upcoming in 2012
Mozilla Add-Ons Evolution 2011 in review and Upcoming in 2012Mozilla Add-Ons Evolution 2011 in review and Upcoming in 2012
Mozilla Add-Ons Evolution 2011 in review and Upcoming in 2012
Brian King
 

Semelhante a WCEU 2019 recap - AMP Plugin 1.2 and Gutenberg 6.0 (20)

Top 10 Front End Development Technologies to Focus in 2018
Top 10 Front End Development Technologies to Focus in 2018Top 10 Front End Development Technologies to Focus in 2018
Top 10 Front End Development Technologies to Focus in 2018
 
How to choose the best frontend framework in 2022
How to choose the best frontend framework in 2022How to choose the best frontend framework in 2022
How to choose the best frontend framework in 2022
 
Why you should care about Go (Golang)
Why you should care about Go (Golang)Why you should care about Go (Golang)
Why you should care about Go (Golang)
 
10 Important Web Development Tools Every Developer Should Know.pdf
10 Important Web Development Tools Every Developer Should Know.pdf10 Important Web Development Tools Every Developer Should Know.pdf
10 Important Web Development Tools Every Developer Should Know.pdf
 
JavaScript Frameworks Popularity
JavaScript Frameworks PopularityJavaScript Frameworks Popularity
JavaScript Frameworks Popularity
 
What Are The Top 5 Progressive Web App Development Frameworks For 2023
What Are The Top 5 Progressive Web App Development Frameworks For 2023What Are The Top 5 Progressive Web App Development Frameworks For 2023
What Are The Top 5 Progressive Web App Development Frameworks For 2023
 
Mozilla Add-ons Universe: The Next Level for AMO
Mozilla Add-ons Universe: The Next Level for AMOMozilla Add-ons Universe: The Next Level for AMO
Mozilla Add-ons Universe: The Next Level for AMO
 
Top 10 java script frameworks for 2020
Top 10 java script frameworks for 2020Top 10 java script frameworks for 2020
Top 10 java script frameworks for 2020
 
Advancing JavaScript without breaking the web - MunichJS
Advancing JavaScript without breaking the web - MunichJSAdvancing JavaScript without breaking the web - MunichJS
Advancing JavaScript without breaking the web - MunichJS
 
Jon Trelfa Presentation From Desktop To Web – Getting It Right
Jon Trelfa Presentation From Desktop To Web – Getting It RightJon Trelfa Presentation From Desktop To Web – Getting It Right
Jon Trelfa Presentation From Desktop To Web – Getting It Right
 
Mobile First et AMP - Developers Meetup - May 2017
Mobile First et AMP - Developers Meetup - May 2017Mobile First et AMP - Developers Meetup - May 2017
Mobile First et AMP - Developers Meetup - May 2017
 
Web components and Package managers
Web components and Package managersWeb components and Package managers
Web components and Package managers
 
Where and Why Use Angular for Web Development?
Where and Why Use Angular for Web Development?Where and Why Use Angular for Web Development?
Where and Why Use Angular for Web Development?
 
Case Study: USDA Maximizing Collaboration with NetBeans and Codebeamer
Case Study: USDA Maximizing Collaboration with NetBeans and CodebeamerCase Study: USDA Maximizing Collaboration with NetBeans and Codebeamer
Case Study: USDA Maximizing Collaboration with NetBeans and Codebeamer
 
Advantages of golang development services & 10 most used go frameworks
Advantages of golang development services & 10 most used go frameworksAdvantages of golang development services & 10 most used go frameworks
Advantages of golang development services & 10 most used go frameworks
 
Mozilla Add-Ons Evolution 2011 in review and Upcoming in 2012
Mozilla Add-Ons Evolution 2011 in review and Upcoming in 2012Mozilla Add-Ons Evolution 2011 in review and Upcoming in 2012
Mozilla Add-Ons Evolution 2011 in review and Upcoming in 2012
 
A Complete Guide To Progressive Web App.pdf
A Complete Guide To Progressive Web App.pdfA Complete Guide To Progressive Web App.pdf
A Complete Guide To Progressive Web App.pdf
 
Top 12 Front End Technologies to Use In 2023.pdf
Top 12 Front End Technologies to Use In 2023.pdfTop 12 Front End Technologies to Use In 2023.pdf
Top 12 Front End Technologies to Use In 2023.pdf
 
TechEvent Advanced Service Worker / PWA with Google Workbox
TechEvent Advanced Service Worker / PWA with Google WorkboxTechEvent Advanced Service Worker / PWA with Google Workbox
TechEvent Advanced Service Worker / PWA with Google Workbox
 
Top Backend Frameworks for Mobile App Development in 2023
Top Backend Frameworks for Mobile App Development in 2023Top Backend Frameworks for Mobile App Development in 2023
Top Backend Frameworks for Mobile App Development in 2023
 

Mais de Fellyph Cintra

Mais de Fellyph Cintra (20)

CSS 2022 um mundo novo de possibilidades
CSS 2022 um mundo novo de possibilidadesCSS 2022 um mundo novo de possibilidades
CSS 2022 um mundo novo de possibilidades
 
CSS 2022: un mundo completamente nuevo - Presentacion WC Pontevedra - Fellyph...
CSS 2022: un mundo completamente nuevo - Presentacion WC Pontevedra - Fellyph...CSS 2022: un mundo completamente nuevo - Presentacion WC Pontevedra - Fellyph...
CSS 2022: un mundo completamente nuevo - Presentacion WC Pontevedra - Fellyph...
 
Page experience road - WordCamp Athens 2022
Page experience road  - WordCamp Athens 2022Page experience road  - WordCamp Athens 2022
Page experience road - WordCamp Athens 2022
 
Web stories the new visual storytelling format for the web
Web stories the new  visual storytelling format for the webWeb stories the new  visual storytelling format for the web
Web stories the new visual storytelling format for the web
 
Machine learning for mortal developers - Dublin.JS
Machine learning for mortal developers - Dublin.JSMachine learning for mortal developers - Dublin.JS
Machine learning for mortal developers - Dublin.JS
 
Machine learning for mortal developers - Fellyph Cintra
Machine learning for mortal developers -  Fellyph CintraMachine learning for mortal developers -  Fellyph Cintra
Machine learning for mortal developers - Fellyph Cintra
 
Using machine learning to improve our WordPress application
Using machine learning to improve our WordPress applicationUsing machine learning to improve our WordPress application
Using machine learning to improve our WordPress application
 
WordCamp Brighton - Why use web components
WordCamp Brighton - Why use web componentsWordCamp Brighton - Why use web components
WordCamp Brighton - Why use web components
 
Accessibility workshop
Accessibility workshopAccessibility workshop
Accessibility workshop
 
Dublin js 2019 Fellyph Ctintra - Why use web components?
Dublin js 2019 Fellyph Ctintra - Why use web components?Dublin js 2019 Fellyph Ctintra - Why use web components?
Dublin js 2019 Fellyph Ctintra - Why use web components?
 
Google I/O extended 2019 Fellyph Cintra
Google I/O extended 2019 Fellyph CintraGoogle I/O extended 2019 Fellyph Cintra
Google I/O extended 2019 Fellyph Cintra
 
Work smart with Gutenberg - Fellyph Cintra
Work smart with Gutenberg - Fellyph CintraWork smart with Gutenberg - Fellyph Cintra
Work smart with Gutenberg - Fellyph Cintra
 
PWA - Progressive WordPress Apps
PWA - Progressive WordPress AppsPWA - Progressive WordPress Apps
PWA - Progressive WordPress Apps
 
Amp for WordPress - Tech lunch Inspiration Marketing
Amp for WordPress -  Tech lunch Inspiration MarketingAmp for WordPress -  Tech lunch Inspiration Marketing
Amp for WordPress - Tech lunch Inspiration Marketing
 
From marketplace to WordPress - WordCamp Belfast
From marketplace to WordPress - WordCamp BelfastFrom marketplace to WordPress - WordCamp Belfast
From marketplace to WordPress - WordCamp Belfast
 
Techtalk CSS4 - Fellyph Cintra
Techtalk CSS4 - Fellyph CintraTechtalk CSS4 - Fellyph Cintra
Techtalk CSS4 - Fellyph Cintra
 
Do marketplace ao WordPress - WordCamp BH 2015
Do marketplace ao WordPress -  WordCamp BH 2015Do marketplace ao WordPress -  WordCamp BH 2015
Do marketplace ao WordPress - WordCamp BH 2015
 
Dicas para Workflow WordPress + JavaScript - WordCamp Salvador
Dicas para Workflow WordPress + JavaScript - WordCamp SalvadorDicas para Workflow WordPress + JavaScript - WordCamp Salvador
Dicas para Workflow WordPress + JavaScript - WordCamp Salvador
 
Workflow WordPress + JavaScript - WordCamp Rio
Workflow WordPress + JavaScript  - WordCamp RioWorkflow WordPress + JavaScript  - WordCamp Rio
Workflow WordPress + JavaScript - WordCamp Rio
 
Desenvolvendo Aplicações móveis com bBUI.js
Desenvolvendo Aplicações móveis com bBUI.jsDesenvolvendo Aplicações móveis com bBUI.js
Desenvolvendo Aplicações móveis com bBUI.js
 

Último

Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
WSO2
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Victor Rentea
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 

Último (20)

presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
 
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfRising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
Ransomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdfRansomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdf
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
 
Cyberprint. Dark Pink Apt Group [EN].pdf
Cyberprint. Dark Pink Apt Group [EN].pdfCyberprint. Dark Pink Apt Group [EN].pdf
Cyberprint. Dark Pink Apt Group [EN].pdf
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024
 

WCEU 2019 recap - AMP Plugin 1.2 and Gutenberg 6.0