WebComponents or shadow side of the Doom
•
1 like•591 views
This document discusses web component technologies including custom elements, templates, shadow DOM, HTML imports. It provides examples of how to define custom elements and use templates and shadow DOM. It also mentions some web component libraries and resources for further information.
Report
Share
Report
Share
Download to read offline
Recommended
Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012
APEX& jQuery Mobile
Binnenkort zal Oracle versie de lang aangekondigde upgrade naar release 4.2 van Oracle Application Express beschikbaar maken. Een van de meest besproken nieuwe features die voor dit nieuwe release zijn aangekondigd is de integratie van het jQuery Mobile framework. Met de integratie van dit framework zal het mogelijk worden om met APEX applicaties te ontwikkelen, die geschikt zijn voor mobiele toestellen.
Wat is en hoe werkt jQuery Mobile en wat betekend dit voor het ontwikkelen in APEX. Dat zijn de onderwerpen die de presentatie aan bod komen. En waarom wachten tot het release van 4.2. Het is namelijk nu al mogelijk om jQuery Mobile in APEX te integreren en gebruiken. Hoe, wordt in een demo getoond. Deze sessie is waarschijnlijk de enige waarin u gevraagd zal worden om uw mobile telefoon aan te laten staan.
Challenges going mobile
jQuery Mobile has been integrated in APEX since version 4.2 and building a mobile web application with APEX seems magically easy ever since. Once you start a mobile project you will be confronted with a number of challenges related to the jQuery Mobile frameworks mechanisms. This session tends to explain the fundamentals that are important to know for APEX developers and how to deal with these in APEX development.
When creating a mobile web application with APEX, knowledge of how jQuery Mobile works and how it is different from what we are used to as APEX developers is essential, I learned this during projects. This session will explain the important jQuery Mobile framework mechanisms and how to deal with these in APEX: Page loading and submitting data; customizing the user interface elements; debugging, testing and inspecting on actual mobile devices.
Front-end Rails-приложений приложений, основанный на БЭМ
This document discusses front-end Rails application organization based on the BEM methodology. It introduces some BEM concepts and provides examples of implementing BEM in Sass and HTML. Key points include:
- Organizing stylesheets by global styles, layouts, and component blocks.
- Using BEM naming conventions like block__element and block--modifier.
- Implementing common patterns like icons through mixins and global styles.
- Structuring Sass imports, variables, and mixins to support the BEM methodology.
Powerpoint
The document describes various tags used in Hypertext Markup Language (HTML) to define text formatting, lists, tables, images, and layout of web pages. It provides examples of common tags like <p> for paragraphs, <h1> - <h6> for headings, <ul> and <ol> for unordered and ordered lists, <table>, <tr>, and <td> for tables, and <style> for defining styles. It also lists tags for images, buttons, forms, and controlling color and layout of web pages.
WebMatrix 100-level presentation
This document provides an overview of how to build a WordPress blog and photo gallery site in 60 minutes using WebMatrix. It discusses how WebMatrix allows users like Peter and Eric to easily configure, customize, and publish their sites. The document demonstrates Razor syntax, layouts, sections, membership, and helpers - features in WebMatrix that make developing sites faster and easier.
Iasi code camp 12 october 2013 shadow dom - mihai bîrsan
1. The document discusses the Shadow DOM, templates, and custom elements as solutions to encapsulate presentation and behavior in reusable web components.
2. It describes how the Shadow DOM creates a boundary between the host element and document tree, allowing for encapsulation. Shadow DOM, templates, and custom elements allow for building reusable web components.
3. The talk encourages using these new web standards now through polyfills and browser prerelease versions, and concludes that web components will improve reusability and separation of concerns on the web.
HTML CSS & Javascript
- HTML, CSS, and JavaScript are becoming the new standard for building applications and interactive experiences on the web.
- Best practices include using semantic HTML, clean CSS with a focus on maintainability, and JavaScript performance optimizations.
- Key techniques discussed are image sprites, progressive enhancement, and jQuery selector chaining to reduce DOM lookups.
Ashish
Frames allow dividing a browser window into multiple panes called frames. The <frameset> tag defines the layout of frames using rows or columns. The <frame> tag defines the content in each frame. Inline frames embed one HTML document inside another using the <iframe> tag. Frames should only be used when appropriate considering functionality, accessibility, and usability.
Recommended
Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012
APEX& jQuery Mobile
Binnenkort zal Oracle versie de lang aangekondigde upgrade naar release 4.2 van Oracle Application Express beschikbaar maken. Een van de meest besproken nieuwe features die voor dit nieuwe release zijn aangekondigd is de integratie van het jQuery Mobile framework. Met de integratie van dit framework zal het mogelijk worden om met APEX applicaties te ontwikkelen, die geschikt zijn voor mobiele toestellen.
Wat is en hoe werkt jQuery Mobile en wat betekend dit voor het ontwikkelen in APEX. Dat zijn de onderwerpen die de presentatie aan bod komen. En waarom wachten tot het release van 4.2. Het is namelijk nu al mogelijk om jQuery Mobile in APEX te integreren en gebruiken. Hoe, wordt in een demo getoond. Deze sessie is waarschijnlijk de enige waarin u gevraagd zal worden om uw mobile telefoon aan te laten staan.
Challenges going mobile
jQuery Mobile has been integrated in APEX since version 4.2 and building a mobile web application with APEX seems magically easy ever since. Once you start a mobile project you will be confronted with a number of challenges related to the jQuery Mobile frameworks mechanisms. This session tends to explain the fundamentals that are important to know for APEX developers and how to deal with these in APEX development.
When creating a mobile web application with APEX, knowledge of how jQuery Mobile works and how it is different from what we are used to as APEX developers is essential, I learned this during projects. This session will explain the important jQuery Mobile framework mechanisms and how to deal with these in APEX: Page loading and submitting data; customizing the user interface elements; debugging, testing and inspecting on actual mobile devices.
Front-end Rails-приложений приложений, основанный на БЭМ
This document discusses front-end Rails application organization based on the BEM methodology. It introduces some BEM concepts and provides examples of implementing BEM in Sass and HTML. Key points include:
- Organizing stylesheets by global styles, layouts, and component blocks.
- Using BEM naming conventions like block__element and block--modifier.
- Implementing common patterns like icons through mixins and global styles.
- Structuring Sass imports, variables, and mixins to support the BEM methodology.
Powerpoint
The document describes various tags used in Hypertext Markup Language (HTML) to define text formatting, lists, tables, images, and layout of web pages. It provides examples of common tags like <p> for paragraphs, <h1> - <h6> for headings, <ul> and <ol> for unordered and ordered lists, <table>, <tr>, and <td> for tables, and <style> for defining styles. It also lists tags for images, buttons, forms, and controlling color and layout of web pages.
WebMatrix 100-level presentation
This document provides an overview of how to build a WordPress blog and photo gallery site in 60 minutes using WebMatrix. It discusses how WebMatrix allows users like Peter and Eric to easily configure, customize, and publish their sites. The document demonstrates Razor syntax, layouts, sections, membership, and helpers - features in WebMatrix that make developing sites faster and easier.
Iasi code camp 12 october 2013 shadow dom - mihai bîrsan
1. The document discusses the Shadow DOM, templates, and custom elements as solutions to encapsulate presentation and behavior in reusable web components.
2. It describes how the Shadow DOM creates a boundary between the host element and document tree, allowing for encapsulation. Shadow DOM, templates, and custom elements allow for building reusable web components.
3. The talk encourages using these new web standards now through polyfills and browser prerelease versions, and concludes that web components will improve reusability and separation of concerns on the web.
HTML CSS & Javascript
- HTML, CSS, and JavaScript are becoming the new standard for building applications and interactive experiences on the web.
- Best practices include using semantic HTML, clean CSS with a focus on maintainability, and JavaScript performance optimizations.
- Key techniques discussed are image sprites, progressive enhancement, and jQuery selector chaining to reduce DOM lookups.
Ashish
Frames allow dividing a browser window into multiple panes called frames. The <frameset> tag defines the layout of frames using rows or columns. The <frame> tag defines the content in each frame. Inline frames embed one HTML document inside another using the <iframe> tag. Frames should only be used when appropriate considering functionality, accessibility, and usability.
Responsive Web Design & APEX Theme 25
The document discusses responsive web design techniques for building responsive applications in APEX, including:
- Using CSS media queries like @media to adapt layouts based on screen size and orientation.
- Implementing grid systems with CSS frameworks like Theme 25 to create responsive page templates.
- Leveraging APEX features like region attributes and client-side detection to conditionally render content.
- Additional techniques like responsive tabs, conditional hiding of content, and reflowing data tables.
uptu web technology unit 2 Css
CSS is a style sheet language used to describe the presentation of web pages including colors, fonts, layout, etc. It allows separation of document content from document presentation for better content organization and maintenance. CSS rules are made up of selectors, properties, and values and can be defined within HTML, externally, or via internal stylesheets. Common CSS properties include font, color, background, text, box model, list, table, and positioning. CSS specifications are developed and maintained by the W3C to standardize web development.
HTML5 workshop, part 1
This document discusses HTML5 and related web technologies. It introduces HTML5 semantics like header, nav, article, section, aside, and figure. It demonstrates using these elements to mark up a simple web page. It also covers HTML5 features like video, canvas, and SVG for rich media, as well as JavaScript APIs and libraries for manipulating these elements. Finally, it addresses questions around browser support for HTML5 and ensuring websites will work across browsers.
Advanced JQuery Mobile tutorial with Phonegap
Introduction to jQuery Mobile (jQM) - cont'd
Getting started with jQM
-Downloading the Most Recent Version of jQuery Mobile
-Proper Markup for Loading Framework JavaScript and CSS
jQuery Mobile Page Structure
-Page Anatomy: Header, Footer and Content Sections
-Header and Footer Toolbars
-Bundling Pages into a Single Document
-Navigating Between Pages
Applying Different Theme Swatches
Page Initialization Events
jQuery Mobile Page Components
Basic Content Formatting
List Views
-Ordered and Unordered Lists
-Inset Lists
-Lists with Links
-Nested Lists
-Lists with Icons or Thumbnail Images
-Split Button Lists
-List Dividers
-Search Filters
Form Controls - check boxes, slider, etc.
Dialogs
Buttons and Toolbars
-Ways to Make a Button
-Placing Icons on Your Buttons
-Inline Buttons
-Button Groupings
-Navigation Toolbars
Collapsible Content
Event Handling
-Responding to various events
-Page related events
Ajax & Interaction with server (REST & SOAP)
Deployment using Phonegap (e.g. Android)
Overview of Android Devt Environment
Best Practices in jQM
Hands-on exercises
Web Development Basics: HOW TO in HTML
HTML is a markup language used to define the structure and layout of web pages. It uses tags like <html> and <body> to mark elements in a document like headings, paragraphs, and links. Tags have start and end tags like <p> and </p> to delineate content. CSS can be used to style HTML elements by specifying rules that are applied using the style attribute, <style> element, or external CSS files. Basic HTML tags include those for headings, paragraphs, bold, italics, underlining, links, images, and buttons. HTML documents are edited in text editors and browsers use the tags to render and display the structured content.
Introduction to jQuery Mobile
jQuery Mobile is a touch-optimized web framework for building mobile websites and apps. It uses HTML5 to provide a responsive interface for all mobile device platforms. Key features include pages, navigation, buttons, forms, lists and themes. Developers add mobile-specific enhancements to HTML by using data attributes. Pages are defined with divs having the data-role of "page" and include sections for headers, content and footers. Navigation is achieved through anchor tags linking page div IDs.
Introduction to Jquery
jQuery is a lightweight JavaScript library that simplifies HTML document traversal and manipulation, event handling, animation, and Ajax interactions. It works by using a simple syntax to select elements and perform actions on them. To use jQuery, include the jQuery library file, wrap code in a document ready function, and use the $ selector and jQuery methods. jQuery greatly improves the efficiency of JavaScript coding.
Introduction to jQuery Mobile - Web Deliver for All
Mobile web development frameworks are targeting the builtin web browsers on iPhone and Android only; however, jQuery mobile has in a different vision, one that will reach the largest distribution of phones possible. Leveraging the ways of progressive enhancement, your website can be viewed in raw HTML on old mobile phones and then enhanced with nice CSS styles across mobile platforms that have a decent CSS and JavaScript support. In this session, Grabanski gives you his list of reasons to use jQuery mobile, an overview of the framework and will draw from his experiences building websites on top of jQuery Mobile.
Wd hw 1
This document provides code examples and explanations of common HTML tags. It discusses the function and attributes of title, font, img, br, a href, !-->, frameset, center, hr, and iframe tags. For each tag it gives the purpose in website examples, relevant attributes, and a short code sample to demonstrate usage. Overall the document serves as a reference for basic HTML tags and their applications.
HTML5 e Css3 - 7 | WebMaster & WebDesigner
The document discusses HTML5 and CSS3 forms features such as placeholders, autofocus, email and url input types, number inputs with min/max/step attributes, and date/time inputs. It recommends using Modernizr to detect browser support for these features and fallback options like jQuery UI for unsupported browsers. Form validation features like required and novalidate attributes are also covered.
jQuery Mobile with HTML5
JQuery Mobile is a framework for building mobile web applications using minimal code. It is built on top of jQuery and jQuery UI, leveraging their JavaScript libraries and CSS frameworks. JQuery Mobile provides a range of UI elements, widgets, page transitions, themes, and events for developing mobile apps that work across various mobile platforms and devices. It allows creating basic single page apps with HTML5 markup and managing page navigation. The framework also supports server communication through AJAX and provides mobile events for touch interactions.
Fundamental JQuery
This document provides an overview and agenda for a jQuery training session. It introduces jQuery as a JavaScript library that simplifies tasks like HTML document manipulation. It then covers various jQuery basics like selectors and events. The document also summarizes how jQuery can be used for animations, scrolling, forms, images, and more. Examples are given throughout to illustrate jQuery concepts and APIs.
Overview on jQuery mobile
This is very basic presentation focused on jQuery mobile, where it highlighted why people will choose it, and how easily anybody can start on it. It was developed for our in house presentation.
jQuery Mobile: Progressive Enhancement with HTML5
This document provides an overview of jQuery Mobile, a JavaScript framework for building mobile web sites and apps. It discusses how jQuery Mobile uses progressive enhancement with HTML5 to provide cross-platform support and a native look-and-feel on mobile devices. Key aspects covered include jQuery Mobile's use of progressive enhancement to enhance content, presentation, and behavior; its reliance on HTML5 data attributes for markup; support for various widgets like pages, buttons, forms and lists; and options for native deployment using technologies like PhoneGap.
Web Development
Web development involves both front-end development and back-end development. Front-end development includes using languages like HTML, CSS, and Bootstrap to define the layout and visual design of websites. Back-end development involves using languages like SQL and PHP to manage the database and functional aspects of websites that users do not see. Key front-end technologies are HTML for content, CSS for styling, and Bootstrap for responsive design. Key back-end technologies are SQL for databases and PHP for server-side scripting.
CSC103 Web Technologies: HTML, CSS, JS
Introducing the basic foundational languages of web development: HTML, Cascading Style Sheets, JavaScript,
Introduction to HTML, CSS, and Javascript
This document provides an introduction to HTML, CSS, and JavaScript. It begins with explaining how client-side and server-side code works. It then defines HTML as the standard markup language for web pages and lists some commonly used HTML tags. CSS is introduced as the style sheet language used to describe the presentation of HTML documents. JavaScript is explained as the programming language used to create interactive effects in web browsers. The document concludes by covering JavaScript syntax like variables, functions, and some common methods.
Styling components with JavaScript
The document discusses using JavaScript to style components instead of CSS. It describes how React allows defining styles inline but that is not ideal. The author explores using Webpack and React-style to define styles within components in JavaScript and have them automatically output to a stylesheet. This avoids separating styles across files while keeping styles tightly coupled to components. The document argues JavaScript is well-suited as a "preprocessor" for generating styles and provides examples of using variables, functions and loops to generate styles programmatically.
Better Code With Python
This document discusses the Python programming language. It provides an overview of Python's history and creator Guido van Rossum. It also outlines some of Python's key features like being cross-platform, popular uses like web and desktop apps, and standard libraries. The document also briefly describes Python concepts like PEPs, documentation, data types, functions, classes and provides some learning resources.
Js design patterns
This document discusses several JavaScript design patterns including the Singleton, Observer, Factory, Facade, and Decorator patterns. It provides an overview of each pattern and recommends books and links for further reading on JavaScript design patterns and code examples implementing the patterns.
Performance patterns
The document discusses various patterns and techniques for improving JavaScript performance, including:
1. Loading scripts asynchronously and deferring execution to improve perceived page load times.
2. Using local variables instead of globals to reduce scope chain lookups and improve minification.
3. Caching expensive operations through memoization and reusing initialization code to avoid redundant work.
4. Avoiding direct DOM access in loops to reduce reflows and repaints, such as building up a string instead of multiple innerHTML assignments.
High-performance DOM scripting
The document discusses DOM scripting performance. It begins by showing how accessing the DOM in a loop can be slow, performing thousands of get and set operations. It then discusses how the bridge between the DOM and JavaScript engines causes performance issues. Tools like Dynatrace can be used to analyze performance bottlenecks. The document concludes by providing some recommendations to improve DOM scripting performance, such as caching DOM references, updating DOM elements offline, and minimizing unnecessary reflows and repaints.
More Related Content
What's hot
Responsive Web Design & APEX Theme 25
The document discusses responsive web design techniques for building responsive applications in APEX, including:
- Using CSS media queries like @media to adapt layouts based on screen size and orientation.
- Implementing grid systems with CSS frameworks like Theme 25 to create responsive page templates.
- Leveraging APEX features like region attributes and client-side detection to conditionally render content.
- Additional techniques like responsive tabs, conditional hiding of content, and reflowing data tables.
uptu web technology unit 2 Css
CSS is a style sheet language used to describe the presentation of web pages including colors, fonts, layout, etc. It allows separation of document content from document presentation for better content organization and maintenance. CSS rules are made up of selectors, properties, and values and can be defined within HTML, externally, or via internal stylesheets. Common CSS properties include font, color, background, text, box model, list, table, and positioning. CSS specifications are developed and maintained by the W3C to standardize web development.
HTML5 workshop, part 1
This document discusses HTML5 and related web technologies. It introduces HTML5 semantics like header, nav, article, section, aside, and figure. It demonstrates using these elements to mark up a simple web page. It also covers HTML5 features like video, canvas, and SVG for rich media, as well as JavaScript APIs and libraries for manipulating these elements. Finally, it addresses questions around browser support for HTML5 and ensuring websites will work across browsers.
Advanced JQuery Mobile tutorial with Phonegap
Introduction to jQuery Mobile (jQM) - cont'd
Getting started with jQM
-Downloading the Most Recent Version of jQuery Mobile
-Proper Markup for Loading Framework JavaScript and CSS
jQuery Mobile Page Structure
-Page Anatomy: Header, Footer and Content Sections
-Header and Footer Toolbars
-Bundling Pages into a Single Document
-Navigating Between Pages
Applying Different Theme Swatches
Page Initialization Events
jQuery Mobile Page Components
Basic Content Formatting
List Views
-Ordered and Unordered Lists
-Inset Lists
-Lists with Links
-Nested Lists
-Lists with Icons or Thumbnail Images
-Split Button Lists
-List Dividers
-Search Filters
Form Controls - check boxes, slider, etc.
Dialogs
Buttons and Toolbars
-Ways to Make a Button
-Placing Icons on Your Buttons
-Inline Buttons
-Button Groupings
-Navigation Toolbars
Collapsible Content
Event Handling
-Responding to various events
-Page related events
Ajax & Interaction with server (REST & SOAP)
Deployment using Phonegap (e.g. Android)
Overview of Android Devt Environment
Best Practices in jQM
Hands-on exercises
Web Development Basics: HOW TO in HTML
HTML is a markup language used to define the structure and layout of web pages. It uses tags like <html> and <body> to mark elements in a document like headings, paragraphs, and links. Tags have start and end tags like <p> and </p> to delineate content. CSS can be used to style HTML elements by specifying rules that are applied using the style attribute, <style> element, or external CSS files. Basic HTML tags include those for headings, paragraphs, bold, italics, underlining, links, images, and buttons. HTML documents are edited in text editors and browsers use the tags to render and display the structured content.
Introduction to jQuery Mobile
jQuery Mobile is a touch-optimized web framework for building mobile websites and apps. It uses HTML5 to provide a responsive interface for all mobile device platforms. Key features include pages, navigation, buttons, forms, lists and themes. Developers add mobile-specific enhancements to HTML by using data attributes. Pages are defined with divs having the data-role of "page" and include sections for headers, content and footers. Navigation is achieved through anchor tags linking page div IDs.
Introduction to Jquery
jQuery is a lightweight JavaScript library that simplifies HTML document traversal and manipulation, event handling, animation, and Ajax interactions. It works by using a simple syntax to select elements and perform actions on them. To use jQuery, include the jQuery library file, wrap code in a document ready function, and use the $ selector and jQuery methods. jQuery greatly improves the efficiency of JavaScript coding.
Introduction to jQuery Mobile - Web Deliver for All
Mobile web development frameworks are targeting the builtin web browsers on iPhone and Android only; however, jQuery mobile has in a different vision, one that will reach the largest distribution of phones possible. Leveraging the ways of progressive enhancement, your website can be viewed in raw HTML on old mobile phones and then enhanced with nice CSS styles across mobile platforms that have a decent CSS and JavaScript support. In this session, Grabanski gives you his list of reasons to use jQuery mobile, an overview of the framework and will draw from his experiences building websites on top of jQuery Mobile.
Wd hw 1
This document provides code examples and explanations of common HTML tags. It discusses the function and attributes of title, font, img, br, a href, !-->, frameset, center, hr, and iframe tags. For each tag it gives the purpose in website examples, relevant attributes, and a short code sample to demonstrate usage. Overall the document serves as a reference for basic HTML tags and their applications.
HTML5 e Css3 - 7 | WebMaster & WebDesigner
The document discusses HTML5 and CSS3 forms features such as placeholders, autofocus, email and url input types, number inputs with min/max/step attributes, and date/time inputs. It recommends using Modernizr to detect browser support for these features and fallback options like jQuery UI for unsupported browsers. Form validation features like required and novalidate attributes are also covered.
jQuery Mobile with HTML5
JQuery Mobile is a framework for building mobile web applications using minimal code. It is built on top of jQuery and jQuery UI, leveraging their JavaScript libraries and CSS frameworks. JQuery Mobile provides a range of UI elements, widgets, page transitions, themes, and events for developing mobile apps that work across various mobile platforms and devices. It allows creating basic single page apps with HTML5 markup and managing page navigation. The framework also supports server communication through AJAX and provides mobile events for touch interactions.
Fundamental JQuery
This document provides an overview and agenda for a jQuery training session. It introduces jQuery as a JavaScript library that simplifies tasks like HTML document manipulation. It then covers various jQuery basics like selectors and events. The document also summarizes how jQuery can be used for animations, scrolling, forms, images, and more. Examples are given throughout to illustrate jQuery concepts and APIs.
Overview on jQuery mobile
This is very basic presentation focused on jQuery mobile, where it highlighted why people will choose it, and how easily anybody can start on it. It was developed for our in house presentation.
jQuery Mobile: Progressive Enhancement with HTML5
This document provides an overview of jQuery Mobile, a JavaScript framework for building mobile web sites and apps. It discusses how jQuery Mobile uses progressive enhancement with HTML5 to provide cross-platform support and a native look-and-feel on mobile devices. Key aspects covered include jQuery Mobile's use of progressive enhancement to enhance content, presentation, and behavior; its reliance on HTML5 data attributes for markup; support for various widgets like pages, buttons, forms and lists; and options for native deployment using technologies like PhoneGap.
Web Development
Web development involves both front-end development and back-end development. Front-end development includes using languages like HTML, CSS, and Bootstrap to define the layout and visual design of websites. Back-end development involves using languages like SQL and PHP to manage the database and functional aspects of websites that users do not see. Key front-end technologies are HTML for content, CSS for styling, and Bootstrap for responsive design. Key back-end technologies are SQL for databases and PHP for server-side scripting.
CSC103 Web Technologies: HTML, CSS, JS
Introducing the basic foundational languages of web development: HTML, Cascading Style Sheets, JavaScript,
Introduction to HTML, CSS, and Javascript
This document provides an introduction to HTML, CSS, and JavaScript. It begins with explaining how client-side and server-side code works. It then defines HTML as the standard markup language for web pages and lists some commonly used HTML tags. CSS is introduced as the style sheet language used to describe the presentation of HTML documents. JavaScript is explained as the programming language used to create interactive effects in web browsers. The document concludes by covering JavaScript syntax like variables, functions, and some common methods.
Styling components with JavaScript
The document discusses using JavaScript to style components instead of CSS. It describes how React allows defining styles inline but that is not ideal. The author explores using Webpack and React-style to define styles within components in JavaScript and have them automatically output to a stylesheet. This avoids separating styles across files while keeping styles tightly coupled to components. The document argues JavaScript is well-suited as a "preprocessor" for generating styles and provides examples of using variables, functions and loops to generate styles programmatically.
What's hot (18)
Introduction to jQuery Mobile - Web Deliver for All
Introduction to jQuery Mobile - Web Deliver for All
Viewers also liked
Better Code With Python
This document discusses the Python programming language. It provides an overview of Python's history and creator Guido van Rossum. It also outlines some of Python's key features like being cross-platform, popular uses like web and desktop apps, and standard libraries. The document also briefly describes Python concepts like PEPs, documentation, data types, functions, classes and provides some learning resources.
Js design patterns
This document discusses several JavaScript design patterns including the Singleton, Observer, Factory, Facade, and Decorator patterns. It provides an overview of each pattern and recommends books and links for further reading on JavaScript design patterns and code examples implementing the patterns.
Performance patterns
The document discusses various patterns and techniques for improving JavaScript performance, including:
1. Loading scripts asynchronously and deferring execution to improve perceived page load times.
2. Using local variables instead of globals to reduce scope chain lookups and improve minification.
3. Caching expensive operations through memoization and reusing initialization code to avoid redundant work.
4. Avoiding direct DOM access in loops to reduce reflows and repaints, such as building up a string instead of multiple innerHTML assignments.
High-performance DOM scripting
The document discusses DOM scripting performance. It begins by showing how accessing the DOM in a loop can be slow, performing thousands of get and set operations. It then discusses how the bridge between the DOM and JavaScript engines causes performance issues. Tools like Dynatrace can be used to analyze performance bottlenecks. The document concludes by providing some recommendations to improve DOM scripting performance, such as caching DOM references, updating DOM elements offline, and minimizing unnecessary reflows and repaints.
Open-source Mic Talks at AOL
This document discusses the speaker's involvement with the jQuery open source project. It provides background on jQuery, describing it as a JavaScript library that simplifies DOM manipulation. It then outlines the speaker's various roles contributing to jQuery, including core bug triage, API documentation, and evangelism. Challenges of contributing to open source projects from work and managing time zones are discussed. Overall, the document encourages getting involved in open source and notes that significant contributions can be made even without large time commitments.
Reactive JavaScript
Slides from BrazilJS 2013. Introducing React - an open-source JavaScript library from Facebook and Instagram for building user interfaces for the web.
Original HTML slides: http://www.phpied.com/files/react/slides.html
Open source project: http://github.com/facebook/react
Javascript Design Patterns
The document provides an overview of JavaScript design patterns including creational, structural, and behavioral patterns. It discusses common patterns like the module pattern, prototype pattern, factory pattern, decorator pattern, observer pattern, and more. Code examples are provided to demonstrate how each pattern works in JavaScript.
JavaScript Patterns
Slides from Ajax Experience 2009. In this session:
- Object creation patterns
- Code reuse patterns
- Functional patterns
- More on object creation
- Design patterns
Some example patterns: object creation with literals and constructos, prototypes, inheritance and other code reuse patterns, lazy definition, callbacks, singleton, factory, classical and prototypal inheritance, namespaces, chaining, modules, static methods, private and privileged members
For more information, see:
http://jspatterns.com
My column in the JavaScript Magazine (http://jsmag.com)
Blog: http://phpied.com
Polymer and web component
Polymer and web component presentation held under Google Developer Group Karachi @ 24th January 2015 at Nest IO
Large-Scale JavaScript Development
This document discusses strategies for streamlining application architecture. It defines a large application as one requiring significant effort to maintain. Examples given include Gmail, Yahoo homepage, and MobileMe. Current architectures are described as having custom widgets, modules, MVC patterns and libraries coupled together. Problems identified include lack of reusability and tight coupling. The document proposes using a module pattern with loose coupling, a facade abstraction layer, and mediator pattern to improve maintainability. Modules would communicate through publishing events to the facade/mediator core rather than directly accessing each other.
High Performance JavaScript 2011
For much of its existence, JavaScript has been slow. No one complained until developers created complex web applications with thousands of lines of JavaScript code. Although newer JavaScript engines have improved the situation, there’s still a lot to understand about what makes JavaScript slow and what you can do to speed up your code.
JavaScript is a buffet - Scriptconf 2017 keynote
The document discusses using JavaScript like a buffet, where developers should be flexible and not try to do everything with JavaScript or force their preferences on others. It encourages sharing code openly but also being considerate of different environments and users. Developers are advised to focus on quality over quantity and consider progressive enhancement over delivering all functionality at once.
Scalable JavaScript Design Patterns
The document discusses the module pattern, a design pattern for creating reusable components in JavaScript. It describes how the module pattern allows simulating privacy by wrapping code in immediately invoked function expressions (IIFEs) and returning objects instead of functions. This creates a private scope that is not accessible globally while exposing public APIs. Several examples are given of how different libraries like Dojo, jQuery, YUI, and ExtJS implement the module pattern.
Introduction to polymer project
This document introduces Polymer, an open-source JavaScript library for building web components. It discusses how Polymer uses existing web platform APIs like templates, shadow DOM, and custom elements to create reusable components. It also explains that Polymer is not a framework, but a library that can be used to build elements on top of existing standards. Finally, it provides a simple example of creating a new custom element in Polymer and emphasizes that Polymer is production-ready.
Fundamental JavaScript [UTC, March 2014]
The document provides an overview of fundamental JavaScript concepts such as variables, data types, operators, control structures, functions, and objects. It also covers DOM manipulation and interacting with HTML elements. Code examples are provided to demonstrate JavaScript syntax and how to define and call functions, work with arrays and objects, and select and modify elements of a web page.
Modern JavaScript Applications: Design Patterns
It's presented how classical OOP approaches and design patterns can be used for modern JavaScript applications.
Javascript Best Practices
A presentation about tricks and best practice ideas of how to use JavaScript given in our office in India as part of an internal training.
Future-proofing Your JavaScript Apps (Compact edition)
The document discusses design patterns and the module pattern in JavaScript. It introduces the module pattern and how it can be used to simulate privacy through closures and immediately invoked function expressions (IIFEs). It provides examples of implementing the module pattern with Dojo, jQuery, and YUI JavaScript libraries. The module pattern allows creating reusable and interchangeable modules that encapsulate variables and methods.
Writing Efficient JavaScript
Writing Efficient JavaScript discusses common issues that can slow down JavaScript performance and provides recommendations to address them. It covers scope management, data access, loops, DOM manipulation, and avoiding browser limits. The document recommends minimizing scope chain lookups, storing frequently accessed properties in local variables, optimizing loops, performing DOM changes off-document to reduce reflows, and using setTimeout() to avoid locking up the browser thread.
Viewers also liked (20)
Future-proofing Your JavaScript Apps (Compact edition)
Future-proofing Your JavaScript Apps (Compact edition)
Similar to WebComponents or shadow side of the Doom
Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015
Web Components are touted as the future of front-end web development. In this talk you’ll learn what Web Components are, how to use them and the state of native support in web browsers. Finally I’ll demonstrate what your options are for building componentized web apps right now using AngularJS, Ember, Knockout, React, Polymer etc. And why Web Components probably are the future of front-end web development.
Web Components and Modular CSS
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.
http://kariwebsite.com/
The document is a template for a blog or website. It contains metadata, stylesheets, menus and blocks of placeholder text for common page elements like categories, archives, recent posts, login forms, and sidebars. The template pulls in dynamic content via tags to populate the page with blog-specific or user-generated content.
HTML5
The document discusses new features in HTML5 including semantic elements like <nav> and <article>, new form input types, multimedia with <video> and <canvas>, offline web apps, CSS3 features like columns and transforms, local storage in JavaScript, and expectations for widespread HTML5 support on mobile devices in 2013.
Django Templates
This document discusses Django templates and summarizes key concepts:
1. Templates can inherit from other templates using {% extends %} and {% block %} tags to define content blocks that child templates can fill;
2. Common blocks are title, content, and extra CSS/JS;
3. Templates can include other partial templates with {% include %} and organize code into reusable parts;
4. Comments can be added with {# single-line #} or {% comment %}multiline{% endcomment %};
5. Filters can modify variables displayed in templates, such as upper, lower, truncate, and naturaltime from django.contrib.humanize.
Html Hands On
This document provides an overview of HTML tags for formatting text, images, links, lists, tables, forms and other content on web pages. It explains common tags like <p>, <strong>, <img>, <a>, <ul>, <ol>, <table>, and <form> and shows examples of how to use them to add specific formatting, images, links, lists and tables. It also covers other tags for things like frames, meta data, comments and more. The document is intended as a hands-on reference for using HTML tags to structure and style web page content.
Vaadin Components @ Angular U
My presentation on Vaadin's high performance data grid that is available to use from any client-side framework. Examples from Angular 2.
Up & Running with Polymer
This document provides an overview of using Polymer to create web components. It discusses how Polymer allows bundling markup and styles into custom HTML elements using shadow DOM. It also covers defining templates, creating custom elements, importing components, defining properties and events, data binding, using built-in elements like dom-repeat and dom-if, and common data binding patterns in Polymer like two-way binding.
Polymer 1.0
This document provides an overview of Polymer and web components. It introduces key concepts like custom elements, shadow DOM, HTML imports, and templates. It demonstrates how to define a custom element and component API. It also covers Polymer features like data binding, DOM repeat, and CSS styling. Various tools for Polymer development are presented, like the Polymer CLI, Bower, and Web Components Tester. Examples of implementing common elements and integrating Polymer in applications are given.
Frfrfrf
This document contains the HTML and CSS code for a Tumblr blog theme. It includes metadata, scripts, styles, and conditional logic to control the layout and appearance of different post types and pages on the blog. Key aspects include settings for colors, fonts, backgrounds, fixed headers, fade effects and more. Styles are defined for the overall page and for individual post types like photos, quotes, links and more.
1cst
The document contains code for a simple calculator application with functions to add, subtract, multiply and divide two numbers entered in text fields. It uses JavaScript to get the values from the text fields, perform the mathematical operation and output the result in a third text field. The calculator has buttons to perform each operation and a clear button to reset the fields.
Why you should be using Web Components. And How - DevWeek 2015
Web Components are touted as the future of web development. In this session, Phil will explain what Web Components are, the state of native support in web browsers, what your options are for building componentised web apps right now using AngularJS, Ember, Knockout or React, and why Web Components probably are the future of web development. He will also cover the benefits of a component-based architecture and how it helps when building JavaScript apps, as well as how components can communicate in a loosely coupled way, and why.
Introduction to web components
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.
HTML5, The Open Web, and what it means for you - Altran
This document discusses HTML5 and related topics. It provides code examples of new HTML5 elements like <header>, <article>, and <canvas>. It demonstrates how to add semantics, draw shapes, and load images onto a canvas. It also mentions new APIs for video, custom data attributes, and live regions for accessibility. The goal is to introduce HTML5 and showcase its capabilities for building engaging web content.
Bootstrap
This document provides an overview of Bootstrap, a popular front-end framework for building responsive and mobile-first websites. It discusses how Bootstrap uses media queries and a mobile-first approach to achieve responsiveness across different devices. The document also covers getting started with Bootstrap, its grid system, layouts, forms, and workshops for using Bootstrap components. Finally, it lists some advantages and disadvantages of Bootstrap as well as resources for using and customizing it.
HTML presentation for beginners
The document discusses the basic syntax and structure of HTML documents. It covers the main components of HTML including:
1. The DOCTYPE declaration which identifies the document type
2. Elements which contain the content and are wrapped in tags
3. Attributes which provide extra information about elements
4. Comments for annotating the code
It provides examples of basic HTML code including the skeleton of an HTML document with headings, paragraphs, lists, links, and other common elements.
Polymer
Les Web Components inaugurent une nouvelle ère de développement web, un monde dans lequel vous prenez le pouvoir avec la possibilité de créer de nouveaux composants personnalisés et encapsulables. Construit sur ces nouveaux standards, Polymer facilite l'implémentation de composants du simple bouton à une application riche complète.
Nous verrons dans cette présentation les différentes spécifications mises en oeuvre derrière le concept de WebComponents (Shadow Dom, Custom Element ...) ainsi que leur mise en place en utilisant Polymer
Web technology lab manual
The document describes a Java program to create a color palette applet with the following features:
1. Create a matrix of buttons to display a color palette.
2. Allow the user to select a color from the palette to set the background or foreground of a text area control.
3. Use a checkbox control as radio buttons to select whether the selected color sets the background or foreground.
The algorithm defines the necessary classes and objects, adds the controls to the applet using init(), arranges the controls with setBounds(), sets button backgrounds with setBackground(), adds listeners, and conditionally sets the text area background or foreground based on the checkbox selection.
Emmet cheat-sheet
This document provides a cheat sheet for Emmet syntax and abbreviations for generating HTML and CSS code. It includes abbreviations for common HTML elements and attributes as well as CSS properties. Some examples of Emmet syntax include nav>ul>li to generate a nav element containing an unordered list with a list item, and + to create sibling elements. CSS abbreviations use fuzzy search to find property names, like ov:h to generate overflow:hidden. Prefixing with - adds vendor prefixes, so -border-radius becomes -webkit-border-radius.
Converting dt ds to xml schemas
This document describes converting a DTD to an XML schema. It provides the DTD for an RSS feed and then the equivalent XML schema. Key elements of the RSS feed like 'rss', 'channel', 'item' are defined as elements in the schema. Data types and element structures are also defined, such as specifying that the 'channel' element contains a choice of other elements that can occur in any order.
Similar to WebComponents or shadow side of the Doom (20)
Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015
Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015
Why you should be using Web Components. And How - DevWeek 2015
Why you should be using Web Components. And How - DevWeek 2015
HTML5, The Open Web, and what it means for you - Altran
HTML5, The Open Web, and what it means for you - Altran
Recently uploaded
Embedded machine learning-based road conditions and driving behavior monitoring
Car accident rates have increased in recent years, resulting in losses in human lives, properties, and other financial costs. An embedded machine learning-based system is developed to address this critical issue. The system can monitor road conditions, detect driving patterns, and identify aggressive driving behaviors. The system is based on neural networks trained on a comprehensive dataset of driving events, driving styles, and road conditions. The system effectively detects potential risks and helps mitigate the frequency and impact of accidents. The primary goal is to ensure the safety of drivers and vehicles. Collecting data involved gathering information on three key road events: normal street and normal drive, speed bumps, circular yellow speed bumps, and three aggressive driving actions: sudden start, sudden stop, and sudden entry. The gathered data is processed and analyzed using a machine learning system designed for limited power and memory devices. The developed system resulted in 91.9% accuracy, 93.6% precision, and 92% recall. The achieved inference time on an Arduino Nano 33 BLE Sense with a 32-bit CPU running at 64 MHz is 34 ms and requires 2.6 kB peak RAM and 139.9 kB program flash memory, making it suitable for resource-constrained embedded systems.
DEEP LEARNING FOR SMART GRID INTRUSION DETECTION: A HYBRID CNN-LSTM-BASED MODEL
As digital technology becomes more deeply embedded in power systems, protecting the communication
networks of Smart Grids (SG) has emerged as a critical concern. Distributed Network Protocol 3 (DNP3)
represents a multi-tiered application layer protocol extensively utilized in Supervisory Control and Data
Acquisition (SCADA)-based smart grids to facilitate real-time data gathering and control functionalities.
Robust Intrusion Detection Systems (IDS) are necessary for early threat detection and mitigation because
of the interconnection of these networks, which makes them vulnerable to a variety of cyberattacks. To
solve this issue, this paper develops a hybrid Deep Learning (DL) model specifically designed for intrusion
detection in smart grids. The proposed approach is a combination of the Convolutional Neural Network
(CNN) and the Long-Short-Term Memory algorithms (LSTM). We employed a recent intrusion detection
dataset (DNP3), which focuses on unauthorized commands and Denial of Service (DoS) cyberattacks, to
train and test our model. The results of our experiments show that our CNN-LSTM method is much better
at finding smart grid intrusions than other deep learning algorithms used for classification. In addition,
our proposed approach improves accuracy, precision, recall, and F1 score, achieving a high detection
accuracy rate of 99.50%.
CHINA’S GEO-ECONOMIC OUTREACH IN CENTRAL ASIAN COUNTRIES AND FUTURE PROSPECT
The rivalry between prominent international actors for dominance over Central Asia's hydrocarbon
reserves and the ancient silk trade route, along with China's diplomatic endeavours in the area, has been
referred to as the "New Great Game." This research centres on the power struggle, considering
geopolitical, geostrategic, and geoeconomic variables. Topics including trade, political hegemony, oil
politics, and conventional and nontraditional security are all explored and explained by the researcher.
Using Mackinder's Heartland, Spykman Rimland, and Hegemonic Stability theories, examines China's role
in Central Asia. This study adheres to the empirical epistemological method and has taken care of
objectivity. This study analyze primary and secondary research documents critically to elaborate role of
china’s geo economic outreach in central Asian countries and its future prospect. China is thriving in trade,
pipeline politics, and winning states, according to this study, thanks to important instruments like the
Shanghai Cooperation Organisation and the Belt and Road Economic Initiative. According to this study,
China is seeing significant success in commerce, pipeline politics, and gaining influence on other
governments. This success may be attributed to the effective utilisation of key tools such as the Shanghai
Cooperation Organisation and the Belt and Road Economic Initiative.
Harnessing WebAssembly for Real-time Stateless Streaming Pipelines
Traditionally, dealing with real-time data pipelines has involved significant overhead, even for straightforward tasks like data transformation or masking. However, in this talk, we’ll venture into the dynamic realm of WebAssembly (WASM) and discover how it can revolutionize the creation of stateless streaming pipelines within a Kafka (Redpanda) broker. These pipelines are adept at managing low-latency, high-data-volume scenarios.
Literature Review Basics and Understanding Reference Management.pptx
Three-day training on academic research focuses on analytical tools at United Technical College, supported by the University Grant Commission, Nepal. 24-26 May 2024
Low power architecture of logic gates using adiabatic techniques
The growing significance of portable systems to limit power consumption in ultra-large-scale-integration chips of very high density, has recently led to rapid and inventive progresses in low-power design. The most effective technique is adiabatic logic circuit design in energy-efficient hardware. This paper presents two adiabatic approaches for the design of low power circuits, modified positive feedback adiabatic logic (modified PFAL) and the other is direct current diode based positive feedback adiabatic logic (DC-DB PFAL). Logic gates are the preliminary components in any digital circuit design. By improving the performance of basic gates, one can improvise the whole system performance. In this paper proposed circuit design of the low power architecture of OR/NOR, AND/NAND, and XOR/XNOR gates are presented using the said approaches and their results are analyzed for powerdissipation, delay, power-delay-product and rise time and compared with the other adiabatic techniques along with the conventional complementary metal oxide semiconductor (CMOS) designs reported in the literature. It has been found that the designs with DC-DB PFAL technique outperform with the percentage improvement of 65% for NOR gate and 7% for NAND gate and 34% for XNOR gate over the modified PFAL techniques at 10 MHz respectively.
6th International Conference on Machine Learning & Applications (CMLA 2024)
6th International Conference on Machine Learning & Applications (CMLA 2024) will provide an excellent international forum for sharing knowledge and results in theory, methodology and applications of on Machine Learning & Applications.
[JPP-1] - (JEE 3.0) - Kinematics 1D - 14th May..pdf
Kinematics 11th jpp- 01. ( Solved ) unacademy namo kaul on 14th may...
Electric vehicle and photovoltaic advanced roles in enhancing the financial p...
Climate change's impact on the planet forced the United Nations and governments to promote green energies and electric transportation. The deployments of photovoltaic (PV) and electric vehicle (EV) systems gained stronger momentum due to their numerous advantages over fossil fuel types. The advantages go beyond sustainability to reach financial support and stability. The work in this paper introduces the hybrid system between PV and EV to support industrial and commercial plants. This paper covers the theoretical framework of the proposed hybrid system including the required equation to complete the cost analysis when PV and EV are present. In addition, the proposed design diagram which sets the priorities and requirements of the system is presented. The proposed approach allows setup to advance their power stability, especially during power outages. The presented information supports researchers and plant owners to complete the necessary analysis while promoting the deployment of clean energy. The result of a case study that represents a dairy milk farmer supports the theoretical works and highlights its advanced benefits to existing plants. The short return on investment of the proposed approach supports the paper's novelty approach for the sustainable electrical system. In addition, the proposed system allows for an isolated power setup without the need for a transmission line which enhances the safety of the electrical network
Understanding Inductive Bias in Machine Learning
This presentation explores the concept of inductive bias in machine learning. It explains how algorithms come with built-in assumptions and preferences that guide the learning process. You'll learn about the different types of inductive bias and how they can impact the performance and generalizability of machine learning models.
The presentation also covers the positive and negative aspects of inductive bias, along with strategies for mitigating potential drawbacks. We'll explore examples of how bias manifests in algorithms like neural networks and decision trees.
By understanding inductive bias, you can gain valuable insights into how machine learning models work and make informed decisions when building and deploying them.
Iron and Steel Technology Roadmap - Towards more sustainable steelmaking.pdf
Iron and Steel Technology towards Sustainable Steelmaking
ACEP Magazine edition 4th launched on 05.06.2024
This document provides information about the third edition of the magazine "Sthapatya" published by the Association of Civil Engineers (Practicing) Aurangabad. It includes messages from current and past presidents of ACEP, memories and photos from past ACEP events, information on life time achievement awards given by ACEP, and a technical article on concrete maintenance, repairs and strengthening. The document highlights activities of ACEP and provides a technical educational article for members.
KuberTENes Birthday Bash Guadalajara - K8sGPT first impressions
K8sGPT is a tool that analyzes and diagnoses Kubernetes clusters. This presentation was used to share the requirements and dependencies to deploy K8sGPT in a local environment.
DfMAy 2024 - key insights and contributions
We have compiled the most important slides from each speaker's presentation. This year’s compilation, available for free, captures the key insights and contributions shared during the DfMAy 2024 conference.
Recently uploaded (20)
Embedded machine learning-based road conditions and driving behavior monitoring
Embedded machine learning-based road conditions and driving behavior monitoring
DEEP LEARNING FOR SMART GRID INTRUSION DETECTION: A HYBRID CNN-LSTM-BASED MODEL
DEEP LEARNING FOR SMART GRID INTRUSION DETECTION: A HYBRID CNN-LSTM-BASED MODEL
CHINA’S GEO-ECONOMIC OUTREACH IN CENTRAL ASIAN COUNTRIES AND FUTURE PROSPECT
CHINA’S GEO-ECONOMIC OUTREACH IN CENTRAL ASIAN COUNTRIES AND FUTURE PROSPECT
Harnessing WebAssembly for Real-time Stateless Streaming Pipelines
Harnessing WebAssembly for Real-time Stateless Streaming Pipelines
Literature Review Basics and Understanding Reference Management.pptx
Literature Review Basics and Understanding Reference Management.pptx
Low power architecture of logic gates using adiabatic techniques
Low power architecture of logic gates using adiabatic techniques
6th International Conference on Machine Learning & Applications (CMLA 2024)
6th International Conference on Machine Learning & Applications (CMLA 2024)
[JPP-1] - (JEE 3.0) - Kinematics 1D - 14th May..pdf
[JPP-1] - (JEE 3.0) - Kinematics 1D - 14th May..pdf
Electric vehicle and photovoltaic advanced roles in enhancing the financial p...
Electric vehicle and photovoltaic advanced roles in enhancing the financial p...
Iron and Steel Technology Roadmap - Towards more sustainable steelmaking.pdf
Iron and Steel Technology Roadmap - Towards more sustainable steelmaking.pdf
BPV-GUI-01-Guide-for-ASME-Review-Teams-(General)-10-10-2023.pdf
BPV-GUI-01-Guide-for-ASME-Review-Teams-(General)-10-10-2023.pdf
KuberTENes Birthday Bash Guadalajara - K8sGPT first impressions
KuberTENes Birthday Bash Guadalajara - K8sGPT first impressions
ML Based Model for NIDS MSc Updated Presentation.v2.pptx
ML Based Model for NIDS MSc Updated Presentation.v2.pptx
WebComponents or shadow side of the Doom
- 1. WebComponents or shadow side of the Doom Grzegorz Wilczyński @wilq_ Wrocław, 17.11.2014
- 2. But Why?
- 3. Four Horsemen Custom Elements HTML Imports Templates Shadow DOM
- 4. Custom Elements <polymer-element name="post-list" extends="post-list-base" attributes="type posts"> <template> </template> </polymer-element>
- 5. Custom Elements <post-list> post list </post-list> ! <post-list posts="{foo: 'bar'}" type="pretty"> post list with attributes </post-list>
- 6. Templates <template repeat="{{post in posts}}"> <post-card> <img src="{{post.avatar}}"> <h2>{{post.username}}</h2> <p>{{post.text}}</p> </post-card> </template>
- 7. Templates <template> <div class="card-header" layout horizontal center> <content select="img"></content> <content select="h2"></content> </div> <content></content> <template>
- 8. Shadow DOM
- 10. Shadow DOM Shadow DOM gives us DOM tree encapsulation and style boundaries, but please don't: ! :host([data-post-status="warning"]) /deep/ #postState /deep/ #submitButton /deep/ core-icon { color: #259b24; }
- 11. HTML Imports <link rel="import" href="foo/bar.html">
- 12. Are We Componentized Yet? X-Tags by Mozilla Polymer by Google Bosonic
- 13. Warehouse Search Bower Packages Component Kitchen Custom Elements
- 14. Sources http://webcomponents.org https://www.polymer-project.org http://pascalprecht.github.io/dont-stop- thinking-about-tomorrow/ http://jonrimmer.github.io/are-we-componentized- yet/
- 15. Thank YOU