Web Components are like Lego bricks. Easy to assemble and every piece simply fits together. But there is even more to it. Being able to create your own HTML-Tags with encapsulated style & logic changes the way you think about structuring your web applications. Get a sneak peek on how to develop scalable & maintainable applications in the future.
Presentation about the native browser way for building web components. We look at examples and the pros and cons of doing it natively and using a library. At the end we look at the Angular way of wrapping custom components into Custom Elements.
All you need to know about CSS:
Selectors
Value Processing
Cascading
Box Model
Visual Formatting Model
Block Formatting Context
Stacking Context
At-Rules
Units
Presentation with examples:
http://rawgit.com/vzhidal/HTML-CSS-Training-Presentations/master/css-basics.html
If you are using jQuery, you need to understand the Document Object Model and how it accounts for all the elements inside any HTML document or Web page.
April 2014- Here is a session I did at The Iron Yard in Durham for their one of their kids classes. We dove into HTML basics and the kids wrote some of their first lines of code.
Given at CSS Dev Conf 2014 in New Orleans on October 14, 2014.
This full presentation written with Web Components can be viewed with Chrome 36+ online at http://andrewrota.github.io/web-components-and-modular-css-presentation/presentation/index.html#0.
The source of the presentation is available on GitHub: https://github.com/andrewrota/web-components-and-modular-css-presentation.
An introduction to Web Components describes why we should use web components for Web App development and how Polymer Javascript library from Google can help build web components faster.
Presentation about the native browser way for building web components. We look at examples and the pros and cons of doing it natively and using a library. At the end we look at the Angular way of wrapping custom components into Custom Elements.
All you need to know about CSS:
Selectors
Value Processing
Cascading
Box Model
Visual Formatting Model
Block Formatting Context
Stacking Context
At-Rules
Units
Presentation with examples:
http://rawgit.com/vzhidal/HTML-CSS-Training-Presentations/master/css-basics.html
If you are using jQuery, you need to understand the Document Object Model and how it accounts for all the elements inside any HTML document or Web page.
April 2014- Here is a session I did at The Iron Yard in Durham for their one of their kids classes. We dove into HTML basics and the kids wrote some of their first lines of code.
Given at CSS Dev Conf 2014 in New Orleans on October 14, 2014.
This full presentation written with Web Components can be viewed with Chrome 36+ online at http://andrewrota.github.io/web-components-and-modular-css-presentation/presentation/index.html#0.
The source of the presentation is available on GitHub: https://github.com/andrewrota/web-components-and-modular-css-presentation.
An introduction to Web Components describes why we should use web components for Web App development and how Polymer Javascript library from Google can help build web components faster.
Polymer vs other libraries (Devfest Ukraine 2015)jskvara
Most modern front-end JavaScript libraries provide support for component based development. Components help separate large applications into standalone building blocks with specified communication API. Let's compare Polymer elements with components from React, Angular.
The Complementarity of React and Web ComponentsAndrew Rota
On Github: http://andrewrota.github.io/complementarity-of-react-and-web-components-presentation/index.html
The component driven, performance focused approach of React is a perfect complement to the modularity and portability of native HTML Web Components. At first glance, React and Web Components might seem like two radically different solutions to the same problem. But when combined properly they complement each other to create an extremely powerful, expressive framework for developing complex web applications.
The Structure of Web Code: A Case For Polymer, November 1, 2014Tommie Gannert
About using Polymer (http://polymer-project.org/) to achieve better structure of the frontend code than with other tools.
Part of the Dublin GDG Dev Fest.
A short introduction to web components. The talk covers the basic standard specified by W3c like HTML imports, templates, shadow DOM and custom elements.
Further a short overview of polyme, x-tags/Brick is given and shows how these bring together native browser implementation, polyfills and framework code to leverage web components technology today.
Creating GUI container components in Angular and Web ComponentsRachael L Moore
So you've embraced architecting your Angular application with reusable components--cheers to you! But you have UI components that need multiple entry points for user markup, and regular ng-transclude left you hanging. In this talk, we'll cover how new web component standards, like the Shadow DOM, handle this. Next, we'll walk through how to accomplish it today in Angular 1.3 -- and also give you a brief glimpse into what a solution will look like in upcoming Angular 2. Afterwards, you'll know how to make layout scaffold components with custom elements that serve as containers for arbitrary user-provided HTML content.
Talk presented at ng-conf in March 2015.
Orchard Harvest 2014 - The Future of Widgets?Steve Taylor
Presented on June 9th 2014 at the Orchard Harvest 2014 event which was held at Microsoft's HQ in Redmond, WA.
Many technologies, past and present have tried to "componentize" HTML. Each with their own implementations and approaches. Web Components are a standard implementation backed by the W3C that aim to tackle this.
Polymer is a library from Google that sits on top of Web Components and makes the creation of custom elements a lot easier. The presentation, talks on how Web Components & Polymer can be used within Orchard CMS.
Type Systems & Props Design - Exploring PropTypes, TypeScript, Flow & ReasonNikolaus Graf
Badly designed props can lead to components that are frustrating to use. While there are a couple patterns to make components more pleasant to use, ultimately it needs a type system in combination with a good editor integration for an even better developer experience. Yet not all type systems are the same. They offer different features and therefore lead to different experiences.
Using Reason's type inference we can create GraphQL servers with 100% type coverage. Regardless if we compile to Node.js or native binaries using Reason we can do this with ease.
Besides that Reason shines even more so on the client. Send one quick introspection request and you get full auto completion on your schema right in the browser.
We will kick off with the basics and then quickly go into how to leverage features like variant types and pattern matching to make impossible states impossible. After you gained some knowledge about the basics the talk will dig even further into ReasonReact.
Introduction to React in combination with Redux. Redux helps you to develop applications in a simple way while having features like time-travel available during development.
Some of the ES6+ features are great companions when using React. This presentation introduces you to some of them.
This talk was inspired by Steven Luscher's blog post: http://babeljs.io/blog/2015/06/07/react-on-es6-plus/
Since recently AngularJS has a new sibling called AngularDart. Both are based on the same concepts.
With AngularDart you can write web applications using Angular concepts and leveraging the benefits of the Dart language.
Generating a custom Ruby SDK for your web service or Rails API using Smithyg2nightmarescribd
Have you ever wanted a Ruby client API to communicate with your web service? Smithy is a protocol-agnostic language for defining services and SDKs. Smithy Ruby is an implementation of Smithy that generates a Ruby SDK using a Smithy model. In this talk, we will explore Smithy and Smithy Ruby to learn how to generate custom feature-rich SDKs that can communicate with any web service, such as a Rails JSON API.
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...UiPathCommunity
💥 Speed, accuracy, and scaling – discover the superpowers of GenAI in action with UiPath Document Understanding and Communications Mining™:
See how to accelerate model training and optimize model performance with active learning
Learn about the latest enhancements to out-of-the-box document processing – with little to no training required
Get an exclusive demo of the new family of UiPath LLMs – GenAI models specialized for processing different types of documents and messages
This is a hands-on session specifically designed for automation developers and AI enthusiasts seeking to enhance their knowledge in leveraging the latest intelligent document processing capabilities offered by UiPath.
Speakers:
👨🏫 Andras Palfi, Senior Product Manager, UiPath
👩🏫 Lenka Dulovicova, Product Program Manager, UiPath
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024Albert Hoitingh
In this session I delve into the encryption technology used in Microsoft 365 and Microsoft Purview. Including the concepts of Customer Key and Double Key Encryption.
Key Trends Shaping the Future of Infrastructure.pdfCheryl Hung
Keynote at DIGIT West Expo, Glasgow on 29 May 2024.
Cheryl Hung, ochery.com
Sr Director, Infrastructure Ecosystem, Arm.
The key trends across hardware, cloud and open-source; exploring how these areas are likely to mature and develop over the short and long-term, and then considering how organisations can position themselves to adapt and thrive.
UiPath Test Automation using UiPath Test Suite series, part 4DianaGray10
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
Transcript: Selling digital books in 2024: Insights from industry leaders - T...BookNet Canada
The publishing industry has been selling digital audiobooks and ebooks for over a decade and has found its groove. What’s changed? What has stayed the same? Where do we go from here? Join a group of leading sales peers from across the industry for a conversation about the lessons learned since the popularization of digital books, best practices, digital book supply chain management, and more.
Link to video recording: https://bnctechforum.ca/sessions/selling-digital-books-in-2024-insights-from-industry-leaders/
Presented by BookNet Canada on May 28, 2024, with support from the Department of Canadian Heritage.
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf91mobiles
91mobiles recently conducted a Smart TV Buyer Insights Survey in which we asked over 3,000 respondents about the TV they own, aspects they look at on a new TV, and their TV buying preferences.
JMeter webinar - integration with InfluxDB and GrafanaRTTS
Watch this recorded webinar about real-time monitoring of application performance. See how to integrate Apache JMeter, the open-source leader in performance testing, with InfluxDB, the open-source time-series database, and Grafana, the open-source analytics and visualization application.
In this webinar, we will review the benefits of leveraging InfluxDB and Grafana when executing load tests and demonstrate how these tools are used to visualize performance metrics.
Length: 30 minutes
Session Overview
-------------------------------------------
During this webinar, we will cover the following topics while demonstrating the integrations of JMeter, InfluxDB and Grafana:
- What out-of-the-box solutions are available for real-time monitoring JMeter tests?
- What are the benefits of integrating InfluxDB and Grafana into the load testing stack?
- Which features are provided by Grafana?
- Demonstration of InfluxDB and Grafana using a practice web application
To view the webinar recording, go to:
https://www.rttsweb.com/jmeter-integration-webinar
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.
DevOps and Testing slides at DASA ConnectKari Kakkonen
My and Rik Marselis slides at 30.5.2024 DASA Connect conference. We discuss about what is testing, then what is agile testing and finally what is Testing in DevOps. Finally we had lovely workshop with the participants trying to find out different ways to think about quality and testing in different parts of the DevOps infinity loop.
Connector Corner: Automate dynamic content and events by pushing a buttonDianaGray10
Here is something new! In our next Connector Corner webinar, we will demonstrate how you can use a single workflow to:
Create a campaign using Mailchimp with merge tags/fields
Send an interactive Slack channel message (using buttons)
Have the message received by managers and peers along with a test email for review
But there’s more:
In a second workflow supporting the same use case, you’ll see:
Your campaign sent to target colleagues for approval
If the “Approve” button is clicked, a Jira/Zendesk ticket is created for the marketing design team
But—if the “Reject” button is pushed, colleagues will be alerted via Slack message
Join us to learn more about this new, human-in-the-loop capability, brought to you by Integration Service connectors.
And...
Speakers:
Akshay Agnihotri, Product Manager
Charlie Greenberg, Host
2. Who is this guy?
nikgraf
www.nikgraf.com
nik@blossom.io
Web Components
3. How to Use
<html>
<head>
<link rel="import" href="/path/calendar.html">
</head>
<body>
<custom-calendar></custom-calendar>
</body>
</html>
index.html
Web Components
9. Easier and Faster Prototyping
<bootstrap-modal>
<h2>Welcome to Berlin</h2>
<open-street-map location-x=”13.252601623535156”
location-y=”52.45077881417044”
zoom=”5”>
</open-street-map>
</bootstrap-modal>
Web Components
10. Web Component
● HTML Templates inert chunks of clonable DOM
● Custom Elements create new HTML elements
● Shadow DOM encapsulation & boundaries inside of DOM
● HTML Imports import html documents
Web Components
11. Client Side Templating
<script id="clock-template" type="text/x-type-template">
<span class=”hour”></span>:
<span class=”minute”></span>
</script>
HTML
encourages run-time string parsing (.innerHTML)
user-supplied data → Cross-site scripting
Web Components
12. HTML Templates
<template id="clock-tmpl">
<span class=”hour”></span>:
<span class=”minute”></span>
</template>
<script>
var template = document.querySelector("#clock-tmpl");
// comment is a DocumentFragment
var comment = template.content.cloneNode(true);
</script>
Web Components
HTML
13. HTML Templates
Web Components
Working directly with the DOM
no runtime script parsing, smaller XSS attack vector
Hidden from document
cannot traverse into its DOM via JavaScript
Content gets parsed, not rendered
<script> tags aren’t executed, images aren't loaded,
media doesn't play, etc.
14. “
”
Shadow DOM
Web Components
Shadow DOM gives us markup encapsulation,
style boundaries, and exposes (to web
developers) the same mechanics browsers
vendors have been using to implement their
internal UI.
Eric Bidelman
17. Shadow DOM
<div id="clock"></div>
<script>
var host = document.querySelector('#clock');
// use webkitCreateShadowRoot for now
var shadowRoot = host.createShadowRoot();
shadowRoot.innerHTML = "<span>14</span>:
<span>30</span>";
</script>
Web Components
HTML
18. Shadow DOM
<h2>Black header</h2>
<script>
var host = document.createElement('div');
var shadowRoot = host.createShadowRoot();
var content = "<style>h2 {color: red}</style>";
content += "<h2>Red header</h2>";
shadowRoot.innerHTML = content;
document.body.appendChild(host);
</script>
Black header
Red header
Web Components
HTML
19. Shadow DOM
shadowRoot.resetStyleInheritance = false;
shadowRoot.applyAuthorStyles = false;
@host {
*:hover { color: red };
}
<span pseudo="x-hour"></span>
<my-clock id=”clock”></my-clock>
<style> #clock::x-hour { color: blue; } </style>
Web Components
HTML
Component CSS
clock.html Template
index.html
20. Custom Elements
var ClockPrototype = Object.create(HTMLElement.prototype);
ClockPrototype.createdCallback = function() {
this.impl.textContent = "14:20";
};
var Clock = document.register('custom-clock', {
prototype: ClockPrototype
});
var clock = new Clock();
// adds <custom-clock>14:20</custom-clock> to the DOM
document.body.appendChild(clock);
Web Components
tick_tock_clock.html
21. <link rel="import" href="clock.html">
<script>
var link = document.querySelector('link[rel=import]');
var content = link.import.querySelector('#clock');
</script>
HTML Imports
Web Components
<div id="clock">
<span class=”hour”>14</span>:
<span class=”minute”>30</span>
</div>
clock.html
index.html
22. Web Component
Web Components
<template id="clock-tmpl">
<span class=”hour”>14</span>:
<span class=”minute”>30</span>
</template>
<script>
var ClockProto = Object.create(HTMLElement.prototype);
ClockProto.createdCallback = function() {
var template = document.querySelector('#clock-tmpl');
var shadowRoot = this.createShadowRoot();
var clone = template.content.cloneNode(true);
shadowRoot.appendChild(clone);
};
document.register('my-clock', {prototype: ClockProto});
</script>
<link rel="import" href="clock.html">
<my-clock></my-clock>
clock.html
index.html
27. Further Reading
Web Components
Web Components
http://www.youtube.com/watch?v=fqULJBBEVQE
https://dvcs.w3.org/hg/webcomponents/raw-file/57f8cfc4a7dc/explainer/index.html
HTML Templates
http://www.html5rocks.com/en/tutorials/webcomponents/template/
https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/templates/index.html
HTML Imports
http://robdodson.me/blog/2013/08/20/exploring-html-imports/
https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/imports/index.html
28. Further Reading
Web Components
Shadow DOM
http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/
http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/
http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-301/
http://glazkov.com/2011/01/14/what-the-heck-is-shadow-dom/
https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow/index.html
Custom Elements
http://www.html5rocks.com/en/tutorials/webcomponents/customelements/
https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/custom/index.html
Resources
Web Components https://plus.google.com/103330502635338602217/posts
Lego Bricks http://commons.wikimedia.org/wiki/File:2_duplo_lego_bricks.jpg
Polymer Architecture http://www.polymer-project.org/
Icons http://pictos.cc/