Google I/O extended 2019 Fellyph Cintra

•Download as PPTX, PDF•

0 likes•742 views

Is 2019 the year of Web Components, on this presentation we are going to look back on time and see the last key points related to this topic.

Technology

Share your moments! #io19extended | @gdgdublin | @gdgclouddublin
Is 2019 the year of Web
Components?
Fellyph Cintra
Solutions Engineer
Deloitte Digital
1

Share your moments! #io19extended | @gdgdublin | @gdgclouddublin
@Fellyph
2

Share your moments! #io19extended | @gdgdublin | @gdgclouddublin
Web Components
3

Share your moments! #io19extended | @gdgdublin | @gdgclouddublin
Web Components
It is a set of four specs from HTML5 and JavaScript.
Web components creates custom and reusable
elements natively
4Share your moments! #io19extended | @gdgdublin | @gdgclouddublin

Share your moments! #io19extended | @gdgdublin | @gdgclouddublin
Fantastic 4
5
Custom
Elements
Shadow
DOM
ES modules
HTML
Templates

Share your moments! #io19extended | @gdgdublin | @gdgclouddublin
● The specification allows us to create new types of
DOM elements, where we have two types:
○ Autonomous elements where the entire definition
created by the developer
○ Customised element when the new element
extends from a Default HTML element
6
Custom
Elements

Share your moments! #io19extended | @gdgdublin | @gdgclouddublin
Autonomous element
7
<ph-button></ph-button>

Share your moments! #io19extended | @gdgdublin | @gdgclouddublin
Customised element
8
<button is=“ph-custom-button“>Click Me :)</button>

Share your moments! #io19extended | @gdgdublin | @gdgclouddublin
● Independent DOM tree that provides
encapsulation.
● Keeps the markup in a different layer, to keep the
code clean.
● Needs extra attention with cross-functionality
Light DOM X Shadow DOM
9
Shadow
DOM

Share your moments! #io19extended | @gdgdublin | @gdgclouddublin
Shadow DOM Example
10

Share your moments! #io19extended | @gdgdublin | @gdgclouddublin
● The ES Module specification defines the inclusion
and reuse of JS documents in other JS documents.
● ES Modules enable web components to be
developed in a modular way.
11
ES modules

Share your moments! #io19extended | @gdgdublin | @gdgclouddublin
● Permits to create reusable HTML template without
rendering them.
● Images won't load until we attach the template on
the DOM.
12
HTML
Templates

Share your moments! #io19extended | @gdgdublin | @gdgclouddublin
Is 2019 the year of Web
Components?
13

Share your moments! #io19extended | @gdgdublin | @gdgclouddublin 14

Share your moments! #io19extended | @gdgdublin | @gdgclouddublin 15
Google I/O 2012 - The Web Platform’s Cutting Edge
JS.LA 2014 - Zeno Rocha: A future called
Web Components
Google I/O 2014 - Polymer and Web Components
change everything you know about Web development
Google I/O 2016 - Pratical lessons from a year
of building Web Components
Google I/O 2108 - Polymer 3.0 and beyond

Share your moments! #io19extended | @gdgdublin | @gdgclouddublin
Support
16
end of
2018

Share your moments! #io19extended | @gdgdublin | @gdgclouddublin 17

Share your moments! #io19extended | @gdgdublin | @gdgclouddublin 18
Is 2019 the year of Web Components?

Share your moments! #io19extended | @gdgdublin | @gdgclouddublin 19

Share your moments! #io19extended | @gdgdublin | @gdgclouddublin 20

Share your moments! #io19extended | @gdgdublin | @gdgclouddublin
Web components + frameworks
21https://custom-elements-everywhere.com/

Share your moments! #io19extended | @gdgdublin | @gdgclouddublin
JavaScript frameworks support
22
100% 100% 71%91%
https://custom-elements-everywhere.com/

Share your moments! #io19extended | @gdgdublin | @gdgclouddublin 23

Share your moments! #io19extended | @gdgdublin | @gdgclouddublin
Where can I start?
24

Share your moments! #io19extended | @gdgdublin | @gdgclouddublin
Developer Guide
25https://open-wc.org/

Share your moments! #io19extended | @gdgdublin | @gdgclouddublin
open-wc
● Web component recommendations with pre-configured
● automation
● tooling
● test
● lint
● demo
26

Share your moments! #io19extended | @gdgdublin | @gdgclouddublin
npm init @open-wc
27

Share your moments! #io19extended | @gdgdublin | @gdgclouddublin
Lit Element
28

Share your moments! #io19extended | @gdgdublin | @gdgclouddublin
webcomponents.org
29

Share your moments! #io19extended | @gdgdublin | @gdgclouddublin
Web fundamentals
30https://developers.google.com/web/fundamentals/web-components/

Share your moments! #io19extended | @gdgdublin | @gdgclouddublin
Obrigado
Thank you
31

Share your moments! #io19extended | @gdgdublin | @gdgclouddublin
Links
Documentation
https://www.webcomponents.org/
https://open-wc.org/
https://developers.google.com/web/fundamentals/web-components/
https://custom-elements-everywhere.com/
I/O talks
Google I/O 2012 - https://www.youtube.com/watch?v=2txPYQOWBtg
Google I/O 2014 - https://www.youtube.com/watch?v=8OJ7ih8EE7
Google I/O 2016 - https://www.youtube.com/watch?v=zfQoleQEa4w
Google I/O 2018 - https://www.youtube.com/watch?v=7CUO7PyD5zA

The W3C has been working on a Web Components standard for almost three years, but it is still a work in progress. But polyfills like allows current developers to use Web Components today, and incorporate to their apps widgets from any library of web components. The best known of these libraries is Polymer, but it isn't the only one. In this talk we are going to compare Polymer, the '800 lb gorilla' in the Web Component field, with several of its lesser known competitors: Mozilla's X-Tags and Briks, and Bosonic, and even homemade ReactJS webcomponents We will build an Angular JS application where, instead of directives, we will use webcomponents done with Polymer, X-Tag and ReactJS. And we will take a look to the performances in both Chrome and Firefox.

Ten HOT Design + Social Media Ideas for Designers

MARKITECT.me

Ten HOT Design and Social Media trends are identified in this short presentation created for the design community - 1) Inexpensive CAD Software & Renderings - 2) iPad+Apps for Designers - 3) 3DVia Mobile HD Virtual Walk-Through of Projects - 4) Kitchen & Bath Designs at Google 3D Warehouse - 5) Infographic Resume and Portfolio - 6) Twitter drives website and blog traffic...Big Time! - 7) Collect, curate and share with Pinterest - 8) Blogging for Major Brands - 9) Social Media Live Event Marketing - 10) #kbtribechat, A weekly Twitter chat

GRUG 2.0 1 look back 2010-2013 presentations 20170801

Glasgow Revit User Group

Nilesh Gulia, https://2020.ploneconf.org/speakers/nilesh-gulia As from 2018, we are aiming to develop Volto as much extensible as possible. It all started with the aim of behaving as a highly customisable object. So a user has power to develop from a simple webpage to enterprise grade intranets in his/her own way. This talk generalises how we approached from modern customisation techniques like component shadowing to building highly modifiable and pluggable blocks/components, widgets in the form of addons. https://2020.ploneconf.org/talks/volto-a-journey-towards-personalisation

Running with the bulls

Viqui Dill

Learn How To Implement Mobile First Into Your Website Dominate19 - V2

Exposure Ninja

Open API Specification - SiliconValley Code camp 2017 session @siddiqimuhammad

Muhammad Siddiqi

Strategically Evolve Your Role as an IT Pro

Christian Buckley

The traditional tasks of the IT professional role centered around configuration and administration. Going forward, one must evolve to meet the rapidly changing technology landscape, where public and private cloud, mobile, and hybrid options come into play. IT pros, today, require skill expansion on top of core infrastructure management capabilities, including technology advisory, business analysis, technical and business support, and evangelism functions. In a Microsoft environment, the IT pro role does not go away – it becomes even more essential. In this session, we discuss the transformation of the IT pro, outline some of the new opportunities, and provide much needed perspectives for businesses and individuals to prepare for the future. Presented at Microsoft Ignite 2015 in Chicago to a standing room only audience of 1000+. You can find the recording on Channel 9 at http://channel9.msdn.com/Events/Ignite/2015/BRK2139

Socionity internship July 2020

Madhavan Malolan

Manufacturers Data Moving from PDF's to digital

Mariela Daskalova

Cloud run - Serverless Containers Done Right

mfazal

The Digital Renaissance of Work - Webinar Slides

Digital Workplace Group

A retrospective of 2019 and what to expect from Submer and Immersion Cooling ...

Submer Immersion Cooling

Hello everybody and welcome to our new SlideShare post! The slides you are seeing are taken from our 11th webinar: A retrospective of 2019 and what to expect from Submer and Immersion Cooling in 2020! (you can find the video here: https://youtu.be/qfYCmG_b1HI). Together with Daniel Pope, Pol Valls, Scott Noteboom and Diarmuid Daltún, we looked back on 2019 and what happened in HPC, Immersion Cooling and other relevant news. In a more relaxed environment, we talked about: - Submer Highlights and Challenges - HPC Highlights - How Immersion Cooling is really becoming more than just a viable option - Other significant technological, and geopolitical happenings - Looking to 2020, what Submer will bring the world. Learn more about Immersion Cooling here: Wikipedia https://en.wikipedia.org/wiki/Server_immersion_cooling And in our Blog: https://submer.com/blog/what-is-immersion-cooling — Follow us online here: YouTube: https://www.youtube.com/c/Submer Twitter: https://twitter.com/submertech Instagram: https://www.instagram.com/submertech/ Facebook: https://www.facebook.com/submertech/ Website: https://submer.com LinkedIn: https://www.linkedin.com/company/submer-immersion-cooling/

Design In Tech Report 2016

John Maeda

A lot has changed since publishing my inaugural Design in Tech Tech report at SXSW last year. In this year's report, we dive deeper into analyzing some broader themes ranging from the record amounts of funding flowing into design-led startups to questioning how design will continue to evolve as a good business practice. Below are some takeaways from the report: -Design isn’t just about beauty; it’s about market relevance and meaningful results. -M&A activity continues in the design space, and it’s increased. -Increasing the designers needed in the tech industry requires rethinking education. -The adoption of design by public companies is only growing. -Designers bring needed critical thinking/making in the economic case for inclusion. -Work in the research labs from decades ago drives today’s startups. Be aware.

The Future of Personalised Search: Local SEO & Machine Learning

Patrick Langridge

Developing For Trifecta

Marcus Finley

GitLab: Remote and Open (2018-07-16 @ The New Digital School's Business Of Te...

Pedro Moreira da Silva

GitLab the product and the company. It’s a product that covers the entire software development lifecycle. And it’s a remote-only company that thrives in full transparency. We show how we manage to keep working seamlessly. Event: The New Digital School's Business Of Tech Week (https://www.facebook.com/newdigitalschool/photos/a.1569783986649101.1073741828.1464010307226470/2066656423628519) Date: July 16, 2018 Location: The New Digital School, Porto, Portugal Thanks to André Luís and Job van der Voort

Mobile Moments 2016 - Gearóid O'Rourke | Helpling

Swrve_Inc

Enhancing SharePoint with Responsive Web Design

Eric Overfield

Gsdc intro session

Miljanorevi1

[Forum Global Edition] Building Social Equity Brick by Brick

E-Commerce Brasil

How do you get started in AI?

Gordon Haff

[Shortened but updated version of talk] With all the market interest in artificial intelligence, it’s no surprise that many are asking about the best way to learn more about it. What should I read? What should I watch? There’s so much material out there. But, before one can properly answer those types of questions, it’s useful to take a step back and consider what “doing AI” even means because it turns out that AI can mean a lot of different things depending upon what you’re trying to accomplish. In this talk, Gordon Haff will provide you with both a high-level roadmap and specific pointers for adding AI smarts to your toolbox. He’ll distinguish between research AI and applied AI, discuss how AI intersects with data science more broadly, and look at some of the related research and practice areas that will help you understand AI beyond just machine learning. Armed with this knowledge, you will be better prepared to chart out a program for learning AI that targets your specific needs and objectives rather than wasting time on topics that are not interesting or relevant to you.

CSS 2022 um mundo novo de possibilidades

Fellyph Cintra

CSS en los últimos años, fuera de la red CSS, no ha traído muchas características nuevas. Pero durante el año pasado, surgieron docenas de nuevas características para CSS, abriendo una nueva posibilidad para el diseño de aplicaciones web. Y WordPress no quedó al margen de estas novedades. ¿Cómo afectan las nuevas características como consultas de contenedores, capas, subcuadrículas y :has() al desarrollo de la interfaz? En esta charla descubrirás cómo. Simulemos situaciones cotidianas, viendo cómo podemos beneficiarnos de estos nuevos recursos.

CSS 2022: un mundo completamente nuevo - Presentacion WC Pontevedra - Fellyph...

Fellyph Cintra

CSS en los últimos años, fuera de la red CSS, no trajo muchos desarrollos nuevos. Pero en el último año, aparecieron decenas de nuevas funcionalidades para CSS abriendo una nueva posibilidad para diseñar aplicaciones web. Y WordPress no se quedó fuera de estas nuevas funcionalidades. ¿Cómo afectan las nuevas características como las consultas de contenedores, las capas, la subcuadrícula y :has() al desarrollo de temas de WordPress? En esta charla descubrirás cómo. Simulemos nuestras situaciones del día a día, viendo cómo podemos beneficiarnos de estas nuevas funciones.

Similar to Google I/O extended 2019 Fellyph Cintra

2024 mega trends for the digital workplace - FINAL.pdf

Nancy Goebel

Volto: A Journey towards Personalization

PloneFoundation

Running with the bulls

Viqui Dill

Learn How To Implement Mobile First Into Your Website Dominate19 - V2

Exposure Ninja

Open API Specification - SiliconValley Code camp 2017 session @siddiqimuhammad

Muhammad Siddiqi

Strategically Evolve Your Role as an IT Pro

Christian Buckley

Socionity internship July 2020

Madhavan Malolan

Manufacturers Data Moving from PDF's to digital

Mariela Daskalova

Cloud run - Serverless Containers Done Right

mfazal

The Digital Renaissance of Work - Webinar Slides

Digital Workplace Group

A retrospective of 2019 and what to expect from Submer and Immersion Cooling ...

Submer Immersion Cooling

Design In Tech Report 2016

John Maeda

The Future of Personalised Search: Local SEO & Machine Learning

Patrick Langridge

Developing For Trifecta

Marcus Finley

GitLab: Remote and Open (2018-07-16 @ The New Digital School's Business Of Te...

Pedro Moreira da Silva

Mobile Moments 2016 - Gearóid O'Rourke | Helpling

Swrve_Inc

Enhancing SharePoint with Responsive Web Design

Eric Overfield

Gsdc intro session

Miljanorevi1

[Forum Global Edition] Building Social Equity Brick by Brick

E-Commerce Brasil

How do you get started in AI?

Gordon Haff

Similar to Google I/O extended 2019 Fellyph Cintra (20)

2024 mega trends for the digital workplace - FINAL.pdf

Volto: A Journey towards Personalization

Running with the bulls

Learn How To Implement Mobile First Into Your Website Dominate19 - V2

Open API Specification - SiliconValley Code camp 2017 session @siddiqimuhammad

Strategically Evolve Your Role as an IT Pro

Socionity internship July 2020

Manufacturers Data Moving from PDF's to digital

Cloud run - Serverless Containers Done Right

The Digital Renaissance of Work - Webinar Slides

A retrospective of 2019 and what to expect from Submer and Immersion Cooling ...

Design In Tech Report 2016

The Future of Personalised Search: Local SEO & Machine Learning

Developing For Trifecta

GitLab: Remote and Open (2018-07-16 @ The New Digital School's Business Of Te...

Mobile Moments 2016 - Gearóid O'Rourke | Helpling

Enhancing SharePoint with Responsive Web Design

Gsdc intro session

[Forum Global Edition] Building Social Equity Brick by Brick

How do you get started in AI?

More from Fellyph Cintra

CSS 2022 um mundo novo de possibilidades

Fellyph Cintra

CSS 2022: un mundo completamente nuevo - Presentacion WC Pontevedra - Fellyph...

Fellyph Cintra

Page experience road - WordCamp Athens 2022

Fellyph Cintra

Page experience is the set of signals that are part of the ranking factors on the Google search, 2021 those metrics got the attention of millions of WordPress websites. But why those metrics are so important and how does it help to understand how is the experience of users interacting on a web page. Core Web Vitals, mobile-friendly, no intrusive experience why those terms matter, and how you can archive those items. In this talk, we’re going to ride on the road of page experience and give our users the best experience improving the Core Web Vitals metrics in our website and get tips on how to improve items such as Largest Contentful Paint (LCP), First Input Delay (FID) and Cumulative Layout Shift (CLS) in our WordPress website.

Web stories the new visual storytelling format for the web

Fellyph Cintra

The web-based version of "Stories", called Web Stories got special attention this year. A free and open-web format that blend video, audio, images, animation, and text to create engaging visual narratives now became part of the listed content on search, Google Images and Google Discovery. Learn about how to create web stories, what are the best practices that you keep in mind and finally how to analyse your results.

Machine learning for mortal developers - Dublin.JS

Fellyph Cintra

Machine learning for mortal developers - Fellyph Cintra

Fellyph Cintra

Machine Learning is one of the most trendy things in IT world right now, a bunch of new services pop-up every single moment, large companies have started to implement different features that utilise Machine Learning(ML). But.... how mortal developers and small and medium business can effectively use machine learn to improve their solutions? In this talk, we are going to discuss the basic concepts around ML and using high-level libraries in JavaScript to implement on our project. Described as a friendly Machine Learning library ml5.js will be our entry door to the Machine Learning world. To wrap up the introduction journey, we will see how we can use ml5.js in a real project. As I mentioned before ml5.js is a Javascript library - the talk is focused on a front-end stack but is open for people who want to learn more about the basic concepts behind machine learning. Let's get coding!!!

Using machine learning to improve our WordPress application

Fellyph Cintra

Machine Learning is one of the most trendy things in IT world right now, a bunch of new services pop-up every single moment, large companies have started to implement different features that utilise Machine Learning(ML). But…. how mortal developers and small and medium business can effectively use machine learn to improve their solutions? In this talk, we are going to discuss the basic concepts around ML and using high-level libraries in JavaScript to implement on ourWordPress Application, described as a friendly Machine Learning library ml5.js will be our entry door to the Machine Learning world. To wrap up the introduction journey, we will see how we can use ml5.js in a real project. As I mentioned before ml5.js is a Javascript library – the talk is focused on a front-end stack but is open for people who want to learn more about the basic concepts behind machine learning. Let’s get coding!!!

WordCamp Brighton - Why use web components

Fellyph Cintra

Accessibility workshop

Fellyph Cintra

WCEU 2019 recap - AMP Plugin 1.2 and Gutenberg 6.0

Fellyph Cintra

At this talk, as a front-end developer, I'll share my experience from WordCamp Europe 2019. What were the key releases at the event? Gutenberg was my favourite subject for sure, then other front-end web technologies such as AMP, PWA and web components. In this presentation, I will discuss the release of AMP plugin 1.2, and what is new in Gutenberg 6.0, what are the break changes in this version, and more

Dublin js 2019 Fellyph Ctintra - Why use web components?

Fellyph Cintra

Web components have been around since the first spec was written in 2011, but they only started getting full support from the main browsers in 2018. And this year I decided to give a chance to web components and after my first project with web components what I've learned from that? In this talk, I'll discuss the four key specs that make the magic of web components happen and explain how they can help improve our workflow. After showcasing the advantages of using web components, I will explain how to use web components in an environment with different applications and highlight the tools and developer guides.

Work smart with Gutenberg - Fellyph Cintra

Fellyph Cintra

Gutenberg, Blocks, React, ECMAScript 6, Babel, Webpack, NPM… What the heck? Gutenberg was shipped last year and arrived with a bunch of new terms and technologies. In this presentation, you're going to see, how to create your own Gutenberg Block, the basic key concepts to a workable project. As an example I’m going to present a Digital Agency kit - a project with some of the most common types of content for a digital agency website: Testimonial area, projects list, services list, social media information, contact information. We will convert from those common elements into a Gutenberg block and make them reusable to improve our development team experience.

PWA - Progressive WordPress Apps

Fellyph Cintra

Progressive Web Apps (PWA) is a concept related to user experience especially for mobile users, where the focus is to deliver websites that are Reliable, Fast and Engaging. PWA became so popular the past year but how can we apply it to our WordPress projects? On this technical presentation, We are going to apply step-by-step features as home screen button, service worker, cache API and accessing native features as a native APP in a real project.

Amp for WordPress - Tech lunch Inspiration Marketing

Fellyph Cintra

From marketplace to WordPress - WordCamp Belfast

Fellyph Cintra

Techtalk CSS4 - Fellyph Cintra

Fellyph Cintra

Do marketplace ao WordPress - WordCamp BH 2015

Fellyph Cintra

Dicas para Workflow WordPress + JavaScript - WordCamp Salvador

Fellyph Cintra

Workflow WordPress + JavaScript - WordCamp Rio

Fellyph Cintra

Desenvolvendo Aplicações móveis com bBUI.js

Fellyph Cintra

More from Fellyph Cintra (20)

CSS 2022 um mundo novo de possibilidades

CSS 2022: un mundo completamente nuevo - Presentacion WC Pontevedra - Fellyph...

Page experience road - WordCamp Athens 2022

Web stories the new visual storytelling format for the web

Machine learning for mortal developers - Dublin.JS

Machine learning for mortal developers - Fellyph Cintra

Using machine learning to improve our WordPress application

WordCamp Brighton - Why use web components

Accessibility workshop

WCEU 2019 recap - AMP Plugin 1.2 and Gutenberg 6.0

Dublin js 2019 Fellyph Ctintra - Why use web components?

Work smart with Gutenberg - Fellyph Cintra

PWA - Progressive WordPress Apps

Amp for WordPress - Tech lunch Inspiration Marketing

From marketplace to WordPress - WordCamp Belfast

Techtalk CSS4 - Fellyph Cintra

Do marketplace ao WordPress - WordCamp BH 2015

Dicas para Workflow WordPress + JavaScript - WordCamp Salvador

Workflow WordPress + JavaScript - WordCamp Rio

Desenvolvendo Aplicações móveis com bBUI.js

Recently uploaded

GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...

Neo4j

Dr. Sean Tan, Head of Data Science, Changi Airport Group Discover how Changi Airport Group (CAG) leverages graph technologies and generative AI to revolutionize their search capabilities. This session delves into the unique search needs of CAG’s diverse passengers and customers, showcasing how graph data structures enhance the accuracy and relevance of AI-generated search results, mitigating the risk of “hallucinations” and improving the overall customer journey.

By Design, not by Accident - Agile Venture Bolzano 2024

Pierluigi Pugliese

Essentials of Automations: The Art of Triggers and Actions in FME

Safe Software

In this second installment of our Essentials of Automations webinar series, we’ll explore the landscape of triggers and actions, guiding you through the nuances of authoring and adapting workspaces for seamless automations. Gain an understanding of the full spectrum of triggers and actions available in FME, empowering you to enhance your workspaces for efficient automation. We’ll kick things off by showcasing the most commonly used event-based triggers, introducing you to various automation workflows like manual triggers, schedules, directory watchers, and more. Plus, see how these elements play out in real scenarios. Whether you’re tweaking your current setup or building from the ground up, this session will arm you with the tools and insights needed to transform your FME usage into a powerhouse of productivity. Join us to discover effective strategies that simplify complex processes, enhancing your productivity and transforming your data management practices with FME. Let’s turn complexity into clarity and make your workspaces work wonders!

A tale of scale & speed: How the US Navy is enabling software delivery from l...

sonjaschweigert1

Rapid and secure feature delivery is a goal across every application team and every branch of the DoD. The Navy’s DevSecOps platform, Party Barge, has achieved: - Reduction in onboarding time from 5 weeks to 1 day - Improved developer experience and productivity through actionable findings and reduction of false positives - Maintenance of superior security standards and inherent policy enforcement with Authorization to Operate (ATO) Development teams can ship efficiently and ensure applications are cyber ready for Navy Authorizing Officials (AOs). In this webinar, Sigma Defense and Anchore will give attendees a look behind the scenes and demo secure pipeline automation and security artifacts that speed up application ATO and time to production. We will cover: - How to remove silos in DevSecOps - How to build efficient development pipeline roles and component templates - How to deliver security artifacts that matter for ATO’s (SBOMs, vulnerability reports, and policy evidence) - How to streamline operations with automated policy checks on container images

FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf

FIDO Alliance

Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf

Paige Cruz

Monitoring and observability aren’t traditionally found in software curriculums and many of us cobble this knowledge together from whatever vendor or ecosystem we were first introduced to and whatever is a part of your current company’s observability stack. While the dev and ops silo continues to crumble….many organizations still relegate monitoring & observability as the purview of ops, infra and SRE teams. This is a mistake - achieving a highly observable system requires collaboration up and down the stack. I, a former op, would like to extend an invitation to all application developers to join the observability party will share these foundational concepts to build on:

Climate Impact of Software Testing at Nordic Testing Days

Kari Kakkonen

My slides at Nordic Testing Days 6.6.2024 Climate impact / sustainability of software testing discussed on the talk. ICT and testing must carry their part of global responsibility to help with the climat warming. We can minimize the carbon footprint but we can also have a carbon handprint, a positive impact on the climate. Quality characteristics can be added with sustainability, and then measured continuously. Test environments can be used less, and in smaller scale and on demand. Test techniques can be used in optimizing or minimizing number of tests. Test automation can be used to speed up testing.

Video Streaming: Then, Now, and in the Future

Alpen-Adria-Universität

In his public lecture, Christian Timmerer provides insights into the fascinating history of video streaming, starting from its humble beginnings before YouTube to the groundbreaking technologies that now dominate platforms like Netflix and ORF ON. Timmerer also presents provocative contributions of his own that have significantly influenced the industry. He concludes by looking at future challenges and invites the audience to join in a discussion.

UiPath Test Automation using UiPath Test Suite series, part 5

DianaGray10

DevOps and Testing slides at DASA Connect

Kari Kakkonen

GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...

Neo4j

Sudheer Mechineni, Head of Application Frameworks, Standard Chartered Bank Discover how Standard Chartered Bank harnessed the power of Neo4j to transform complex data access challenges into a dynamic, scalable graph database solution. This keynote will cover their journey from initial adoption to deploying a fully automated, enterprise-grade causal cluster, highlighting key strategies for modelling organisational changes and ensuring robust disaster recovery. Learn how these innovations have not only enhanced Standard Chartered Bank’s data infrastructure but also positioned them as pioneers in the banking sector’s adoption of graph technology.

20240605 QFM017 Machine Intelligence Reading List May 2024

Matthew Sinclair

Removing Uninteresting Bytes in Software Fuzzing

Aftab Hussain

Imagine a world where software fuzzing, the process of mutating bytes in test seeds to uncover hidden and erroneous program behaviors, becomes faster and more effective. A lot depends on the initial seeds, which can significantly dictate the trajectory of a fuzzing campaign, particularly in terms of how long it takes to uncover interesting behaviour in your code. We introduce DIAR, a technique designed to speedup fuzzing campaigns by pinpointing and eliminating those uninteresting bytes in the seeds. Picture this: instead of wasting valuable resources on meaningless mutations in large, bloated seeds, DIAR removes the unnecessary bytes, streamlining the entire process. In this work, we equipped AFL, a popular fuzzer, with DIAR and examined two critical Linux libraries -- Libxml's xmllint, a tool for parsing xml documents, and Binutil's readelf, an essential debugging and security analysis command-line tool used to display detailed information about ELF (Executable and Linkable Format). Our preliminary results show that AFL+DIAR does not only discover new paths more quickly but also achieves higher coverage overall. This work thus showcases how starting with lean and optimized seeds can lead to faster, more comprehensive fuzzing campaigns -- and DIAR helps you find such seeds. - These are slides of the talk given at IEEE International Conference on Software Testing Verification and Validation Workshop, ICSTW 2022.

Secstrike : Reverse Engineering & Pwnable tools for CTF.pptx

nkrafacyberclub

National Security Agency - NSA mobile device best practices

Quotidiano Piemontese

LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...

DanBrown980551

Do you want to learn how to model and simulate an electrical network from scratch in under an hour? Then welcome to this PowSyBl workshop, hosted by Rte, the French Transmission System Operator (TSO)! During the webinar, you will discover the PowSyBl ecosystem as well as handle and study an electrical network through an interactive Python notebook. PowSyBl is an open source project hosted by LF Energy, which offers a comprehensive set of features for electrical grid modelling and simulation. Among other advanced features, PowSyBl provides: - A fully editable and extendable library for grid component modelling; - Visualization tools to display your network; - Grid simulation tools, such as power flows, security analyses (with or without remedial actions) and sensitivity analyses; The framework is mostly written in Java, with a Python binding so that Python developers can access PowSyBl functionalities as well. What you will learn during the webinar: - For beginners: discover PowSyBl's functionalities through a quick general presentation and the notebook, without needing any expert coding skills; - For advanced developers: master the skills to efficiently apply PowSyBl functionalities to your real-world scenarios.

Pushing the limits of ePRTC: 100ns holdover for 100 days

Adtran

UiPath Test Automation using UiPath Test Suite series, part 4

DianaGray10

Welcome to UiPath Test Automation using UiPath Test Suite series part 4. In this session, we will cover Test Manager overview along with SAP heatmap. The UiPath Test Manager overview with SAP heatmap webinar offers a concise yet comprehensive exploration of the role of a Test Manager within SAP environments, coupled with the utilization of heatmaps for effective testing strategies. Participants will gain insights into the responsibilities, challenges, and best practices associated with test management in SAP projects. Additionally, the webinar delves into the significance of heatmaps as a visual aid for identifying testing priorities, areas of risk, and resource allocation within SAP landscapes. Through this session, attendees can expect to enhance their understanding of test management principles while learning practical approaches to optimize testing processes in SAP environments using heatmap visualization techniques What will you get from this session? 1. Insights into SAP testing best practices 2. Heatmap utilization for testing 3. Optimization of testing processes 4. Demo Topics covered: Execution from the test manager Orchestrator execution result Defect reporting SAP heatmap example with demo Speaker: Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP

Microsoft - Power Platform_G.Aspiotis.pdf

Uni Systems S.M.S.A.

SAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdf

Peter Spielvogel

Building better applications for business users with SAP Fiori. • What is SAP Fiori and why it matters to you • How a better user experience drives measurable business benefits • How to get started with SAP Fiori today • How SAP Fiori elements accelerates application development • How SAP Build Code includes SAP Fiori tools and other generative artificial intelligence capabilities • How SAP Fiori paves the way for using AI in SAP apps

Recently uploaded (20)

GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...

By Design, not by Accident - Agile Venture Bolzano 2024

Essentials of Automations: The Art of Triggers and Actions in FME

A tale of scale & speed: How the US Navy is enabling software delivery from l...

FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf

Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf

Climate Impact of Software Testing at Nordic Testing Days

Video Streaming: Then, Now, and in the Future

UiPath Test Automation using UiPath Test Suite series, part 5

DevOps and Testing slides at DASA Connect

GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...

20240605 QFM017 Machine Intelligence Reading List May 2024

Removing Uninteresting Bytes in Software Fuzzing

Secstrike : Reverse Engineering & Pwnable tools for CTF.pptx

National Security Agency - NSA mobile device best practices

LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...

Pushing the limits of ePRTC: 100ns holdover for 100 days

UiPath Test Automation using UiPath Test Suite series, part 4

Microsoft - Power Platform_G.Aspiotis.pdf

SAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdf

Google I/O extended 2019 Fellyph Cintra

1. Share your moments! #io19extended | @gdgdublin | @gdgclouddublin Is 2019 the year of Web Components? Fellyph Cintra Solutions Engineer Deloitte Digital 1

2. Share your moments! #io19extended | @gdgdublin | @gdgclouddublin @Fellyph 2

3. Share your moments! #io19extended | @gdgdublin | @gdgclouddublin Web Components 3

4. Share your moments! #io19extended | @gdgdublin | @gdgclouddublin Web Components It is a set of four specs from HTML5 and JavaScript. Web components creates custom and reusable elements natively 4Share your moments! #io19extended | @gdgdublin | @gdgclouddublin

5. Share your moments! #io19extended | @gdgdublin | @gdgclouddublin Fantastic 4 5 Custom Elements Shadow DOM ES modules HTML Templates

6. Share your moments! #io19extended | @gdgdublin | @gdgclouddublin ● The specification allows us to create new types of DOM elements, where we have two types: ○ Autonomous elements where the entire definition created by the developer ○ Customised element when the new element extends from a Default HTML element 6 Custom Elements

7. Share your moments! #io19extended | @gdgdublin | @gdgclouddublin Autonomous element 7 <ph-button></ph-button>

8. Share your moments! #io19extended | @gdgdublin | @gdgclouddublin Customised element 8 <button is=“ph-custom-button“>Click Me :)</button>

9. Share your moments! #io19extended | @gdgdublin | @gdgclouddublin ● Independent DOM tree that provides encapsulation. ● Keeps the markup in a different layer, to keep the code clean. ● Needs extra attention with cross-functionality Light DOM X Shadow DOM 9 Shadow DOM

10. Share your moments! #io19extended | @gdgdublin | @gdgclouddublin Shadow DOM Example 10

11. Share your moments! #io19extended | @gdgdublin | @gdgclouddublin ● The ES Module specification defines the inclusion and reuse of JS documents in other JS documents. ● ES Modules enable web components to be developed in a modular way. 11 ES modules

12. Share your moments! #io19extended | @gdgdublin | @gdgclouddublin ● Permits to create reusable HTML template without rendering them. ● Images won't load until we attach the template on the DOM. 12 HTML Templates

13. Share your moments! #io19extended | @gdgdublin | @gdgclouddublin Is 2019 the year of Web Components? 13

14. Share your moments! #io19extended | @gdgdublin | @gdgclouddublin 14

15. Share your moments! #io19extended | @gdgdublin | @gdgclouddublin 15 Google I/O 2012 - The Web Platform’s Cutting Edge JS.LA 2014 - Zeno Rocha: A future called Web Components Google I/O 2014 - Polymer and Web Components change everything you know about Web development Google I/O 2016 - Pratical lessons from a year of building Web Components Google I/O 2108 - Polymer 3.0 and beyond

16. Share your moments! #io19extended | @gdgdublin | @gdgclouddublin Support 16 end of 2018

17. Share your moments! #io19extended | @gdgdublin | @gdgclouddublin 17

18. Share your moments! #io19extended | @gdgdublin | @gdgclouddublin 18 Is 2019 the year of Web Components?

19. Share your moments! #io19extended | @gdgdublin | @gdgclouddublin 19

20. Share your moments! #io19extended | @gdgdublin | @gdgclouddublin 20

21. Share your moments! #io19extended | @gdgdublin | @gdgclouddublin Web components + frameworks 21https://custom-elements-everywhere.com/

22. Share your moments! #io19extended | @gdgdublin | @gdgclouddublin JavaScript frameworks support 22 100% 100% 71%91% https://custom-elements-everywhere.com/

23. Share your moments! #io19extended | @gdgdublin | @gdgclouddublin 23

24. Share your moments! #io19extended | @gdgdublin | @gdgclouddublin Where can I start? 24

25. Share your moments! #io19extended | @gdgdublin | @gdgclouddublin Developer Guide 25https://open-wc.org/

26. Share your moments! #io19extended | @gdgdublin | @gdgclouddublin open-wc ● Web component recommendations with pre-configured ● automation ● tooling ● test ● lint ● demo 26

27. Share your moments! #io19extended | @gdgdublin | @gdgclouddublin npm init @open-wc 27

28. Share your moments! #io19extended | @gdgdublin | @gdgclouddublin Lit Element 28

29. Share your moments! #io19extended | @gdgdublin | @gdgclouddublin webcomponents.org 29

30. Share your moments! #io19extended | @gdgdublin | @gdgclouddublin Web fundamentals 30https://developers.google.com/web/fundamentals/web-components/

31. Share your moments! #io19extended | @gdgdublin | @gdgclouddublin Obrigado Thank you 31

32. Share your moments! #io19extended | @gdgdublin | @gdgclouddublin Links Documentation https://www.webcomponents.org/ https://open-wc.org/ https://developers.google.com/web/fundamentals/web-components/ https://custom-elements-everywhere.com/ I/O talks Google I/O 2012 - https://www.youtube.com/watch?v=2txPYQOWBtg Google I/O 2014 - https://www.youtube.com/watch?v=8OJ7ih8EE7 Google I/O 2016 - https://www.youtube.com/watch?v=zfQoleQEa4w Google I/O 2018 - https://www.youtube.com/watch?v=7CUO7PyD5zA

Google I/O extended 2019 Fellyph Cintra

Recommended

Recommended

More Related Content

Similar to Google I/O extended 2019 Fellyph Cintra

Similar to Google I/O extended 2019 Fellyph Cintra (20)

More from Fellyph Cintra

More from Fellyph Cintra (20)

Recently uploaded

Recently uploaded (20)

Google I/O extended 2019 Fellyph Cintra