The Future of CSS with Web components
•
0 likes•311 views
This document discusses the future of CSS and web development with web components. It introduces some key concepts in web components like templates, shadow DOM, custom elements, and HTML imports. Templates allow hiding sections of HTML from the main document. Shadow DOM provides encapsulation by creating a subtree of DOM nodes. Custom elements allow defining new HTML elements. HTML imports allow including entire HTML documents. The document demonstrates how these web component technologies can be used to build reusable custom elements and simplify web development compared to traditional techniques. It also discusses browser support and polyfill libraries that enhance support for web components.
Report
Share
Report
Share
Download to read offline
Recommended
The Future of CSS with Web Components
This document discusses the future of CSS and web development with web components. It introduces some key concepts in web components like templates, shadow DOM, custom elements, and HTML imports. Templates allow creating hidden chunks of HTML, shadow DOM provides encapsulation for styling, custom elements define new HTML tags, and HTML imports bundle related scripts and styles. Web components aim to address issues with current frontend development approaches and enable more modular and reusable code with standards like templates, shadow DOM, and custom elements. Polyfills can provide support for these features in older browsers. Popular web component libraries include Polymer and Mozilla Brick which provide pre-built reusable elements.
Our application got popular and now it breaks
Our application got popular and now breaks under load. The document discusses common issues that cause applications to break as user load increases, such as overuse of shared scopes, inefficient database queries, and slow client-side performance. It provides examples of better approaches and techniques to optimize performance, such as using distributed caching, improving query efficiency through joins, compressing assets, and prioritizing critical CSS and JavaScript.
AWS Lambda with ClaudiaJS
This document discusses serverless computing using AWS Lambda and the ClaudiaJS deployment tool. It provides an example of building a serverless API with Node.js Lambda functions to interact with a DynamoDB database of ice cream flavors. The API allows creating and retrieving items from the database table. ClaudiaJS is used to deploy and manage the Lambda functions and API Gateway configuration.
Deploying Your Favorite Web App To AWS Lambda with Apex up
Ever wonder how to deploy your Web App that you've built with your favorite web framework? You can use UP for that!
Svelte JS introduction
Svelte is a frontend framework that focuses on compiler-centered reactivity rather than a virtual DOM for better performance and smaller bundle sizes. It allows writing components in a simpler reactive way using declarative templates, properties and events. The talk covered Svelte basics like project setup, components, events and lifecycle methods. It demonstrated Svelte's speed advantages and discussed the ecosystem of libraries and community support including Typescript. Advanced topics covered included Single Page Application routing with Sapper and NativeScript for mobile.
Transakcyjność w django
This document discusses transactions in Django. It explains that Django runs database operations within transactions by default to maintain data integrity. Nested transactions are supported, and there are decorators like @transaction.commit_on_success to control transaction behavior. The document also warns about issues like race conditions and improperly using Model.save(), and discusses testing transactions in Django.
Mini-Training: AngularJS
This document provides an overview of AngularJS, including:
- AngularJS is a JavaScript MVVM framework for building dynamic web apps, developed by Google.
- It uses Scopes to bind models to views and directives to extend HTML syntax.
- Key components include modules, controllers, services and routing to organize an app.
- Batarang is a Chrome plugin that helps debug and inspect AngularJS apps.
Service worker - Offline Web
A presentation about the Service Worker.
Talk about the difference between AppCache and ServiceWorker, also show as possible with him and the idea for the future.
Demo: https://github.com/brunoosilva/service-worker
Recommended
The Future of CSS with Web Components
This document discusses the future of CSS and web development with web components. It introduces some key concepts in web components like templates, shadow DOM, custom elements, and HTML imports. Templates allow creating hidden chunks of HTML, shadow DOM provides encapsulation for styling, custom elements define new HTML tags, and HTML imports bundle related scripts and styles. Web components aim to address issues with current frontend development approaches and enable more modular and reusable code with standards like templates, shadow DOM, and custom elements. Polyfills can provide support for these features in older browsers. Popular web component libraries include Polymer and Mozilla Brick which provide pre-built reusable elements.
Our application got popular and now it breaks
Our application got popular and now breaks under load. The document discusses common issues that cause applications to break as user load increases, such as overuse of shared scopes, inefficient database queries, and slow client-side performance. It provides examples of better approaches and techniques to optimize performance, such as using distributed caching, improving query efficiency through joins, compressing assets, and prioritizing critical CSS and JavaScript.
AWS Lambda with ClaudiaJS
This document discusses serverless computing using AWS Lambda and the ClaudiaJS deployment tool. It provides an example of building a serverless API with Node.js Lambda functions to interact with a DynamoDB database of ice cream flavors. The API allows creating and retrieving items from the database table. ClaudiaJS is used to deploy and manage the Lambda functions and API Gateway configuration.
Deploying Your Favorite Web App To AWS Lambda with Apex up
Ever wonder how to deploy your Web App that you've built with your favorite web framework? You can use UP for that!
Svelte JS introduction
Svelte is a frontend framework that focuses on compiler-centered reactivity rather than a virtual DOM for better performance and smaller bundle sizes. It allows writing components in a simpler reactive way using declarative templates, properties and events. The talk covered Svelte basics like project setup, components, events and lifecycle methods. It demonstrated Svelte's speed advantages and discussed the ecosystem of libraries and community support including Typescript. Advanced topics covered included Single Page Application routing with Sapper and NativeScript for mobile.
Transakcyjność w django
This document discusses transactions in Django. It explains that Django runs database operations within transactions by default to maintain data integrity. Nested transactions are supported, and there are decorators like @transaction.commit_on_success to control transaction behavior. The document also warns about issues like race conditions and improperly using Model.save(), and discusses testing transactions in Django.
Mini-Training: AngularJS
This document provides an overview of AngularJS, including:
- AngularJS is a JavaScript MVVM framework for building dynamic web apps, developed by Google.
- It uses Scopes to bind models to views and directives to extend HTML syntax.
- Key components include modules, controllers, services and routing to organize an app.
- Batarang is a Chrome plugin that helps debug and inspect AngularJS apps.
Service worker - Offline Web
A presentation about the Service Worker.
Talk about the difference between AppCache and ServiceWorker, also show as possible with him and the idea for the future.
Demo: https://github.com/brunoosilva/service-worker
The Art of AngularJS - DeRailed 2014
AngularJS is one of today's hottest JavaScript MVC Frameworks. In this session, we'll explore many concepts it brings to the world of client-side development: dependency injection, directives, filters, routing and two-way data binding. We'll also look at its recommended testing tools and build systems. Finally, you'll learn about my experience developing several real-world applications using AngularJS, HTML5 and Bootstrap.
Spine js & creating non blocking user interfaces
This document discusses Spine.js and creating non-blocking user interfaces. It provides an overview of Spine.js, including how it compares to Backbone.js in its use of controllers instead of views and models instead of collections. It also discusses how Spine.js enables asynchronous user interfaces through its handling of events like save callbacks before ajax calls. Finally, it addresses some limitations of Spine.js for transactions and situations requiring server-side validation.
PreDevCampSF - CSS3 Tricks
This presentation was given at PreDevCampSF on August 10, 2009. It goes over some useful components of newer versions of CSS, as well as some proprietary webkit extensions that can make WebOS development much easier.
The Hitchhikers Guide To Html5 Offline Strategies (+firefoxOS)
a quick overview on html5 offline strategies (applicationCache, localStorage, sessionStorage, indexedDB, localForage, firefoxOS DeviceStorage API)
JavaScript para Graficos y Visualizacion de Datos
This document discusses using JavaScript for data visualization and graphics. It presents examples of collecting video data using HTML5 APIs, transforming the data with Web Workers and typed arrays, rendering 3D scenes with WebGL and PhiloGL, and interacting with forms. The examples show loading weather data and manipulating it to render an interactive 3D histogram in the browser. The document argues that using modern HTML5 APIs and lightweight frameworks directly provides more power and control than monolithic application frameworks.
Introduction to AJAX In WordPress
This document provides an introduction to AJAX in WordPress. It explains that AJAX allows for asynchronous requests that do not require a page reload. It describes how AJAX works, with the client sending a request to the server, the server processing it, responding, and the client receiving the response using JavaScript. In WordPress, AJAX is implemented using jQuery to make GET/POST requests to the admin-ajax.php file, with callbacks to handle the response. Examples are provided and further reading suggested, including using AJAX without admin-ajax and processing forms with AJAX and the REST API.
React.js触ってみた 吉澤和香奈
This document provides instructions for setting up a basic React.js application on a server. It details downloading the React and JSX files using wget, creating a js directory to store them, and writing an index.html file that includes the scripts and renders a simple <HelloWorld> component inside a <div> element. The <HelloWorld> component returns JSX to display an <h1> heading saying "Hello, world!".
Lazy load Everything!
This document discusses lazy loading assets like scripts and images to improve page performance. It describes loading assets on demand and asynchronously after page load to reduce initial loading time. While this can improve performance, it has drawbacks like limiting parallel downloads and caching benefits. The document recommends using script loaders like YepNope.js or image lazy loading plugins like Jail.js to lazily load assets based on events like scrolling or clicking. This allows loading visible assets while deferring loading of non-visible assets to improve performance.
Integrating Angular js & three.js
This document discusses using Angular and Three.js together for 3D modeling and visualization. It covers:
1. Different versions of a 3D viewer app including using controllers as view models and prototypal components.
2. Benefits of separating Three.js code from Angular UI code for reusability and productivity.
3. Details of the viewer app architecture including services, directives, controllers and factories for loading models and handling user interactions.
Service worker API
Everybody knows Javascript is single-threaded and that it shares this same thread with other browser-related processes such as painting and compositing. There are several techniques to implement pseudo multithreading in JavaScript; however, during this talk we will focus our attention on how to use and debug the Service Worker API. Our end goal is to explore practical use cases in order to simplify the process to render complex user interfaces and transitions in a browser.
handout-05b
The document is a tutorial on using jQuery for client-side website construction. It introduces jQuery as a JavaScript library that simplifies DOM manipulation, event handling, animations and Ajax interactions. It provides instructions on loading jQuery, basic usage, and examples of selecting elements and binding events.
Angular JS Basics.
This document provides an overview of key concepts for building modern web apps with AngularJS including tools, modules and controllers, expressions, routes, views and templates, directives, and services. It discusses Node Package Manager, Grunt, Yeoman, and Bower for tools, using angular.module and controllers, binding data with expressions, routing with $routeProvider, using templates with ng-view, repeating elements with ng-repeat, and creating reusable services.
Unobtrusive JavaScript
This document discusses unobtrusive JavaScript and patterns for implementing it in web frameworks. It begins by outlining problems with server-side JavaScript generation and the proliferation of JavaScript frameworks. It then covers common patterns for unobtrusive JavaScript like double templating, just Ajax, and update panels. The document also explains how Rails implements unobtrusive JavaScript using drivers, data attributes, and remote forms. It concludes by discussing how these patterns and techniques could be adapted for ASP.NET MVC.
Machine Learning for Web Developers
This session will be delivered in Bahasa. Riza will talk about how to starting implement machine learning with JavaScript. He will introduce some tools and terminology that can be used for implementing machine learning.
This talk is for TechInAsia Product Development Conference in Jakarta, Indonesia. Held at 2018-07-04.
The MEAN stack
Node.js is a JavaScript runtime built on Chrome's V8 engine that makes building network and server-side applications quick and easy. It is commonly used with AngularJS (Angular) for the front-end to create full-stack JavaScript (MEAN stack) applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. Common uses of Node.js include building real-time applications, working with files and streams, and using modules to reuse and share code. MongoDB is often used as the database for MEAN stack applications and Mongoose provides an ORM for interacting with MongoDB from Node.js applications. Angular is a front-end web application framework that
New Tools for Visualization in JavaScript - Sept. 2011
This document summarizes two JavaScript data visualization frameworks: the JavaScript InfoVis Toolkit and PhiloGL. It describes that the JavaScript InfoVis Toolkit provides a wide range of visualizations and is focused on performance with support for browsers, devices, and mobile platforms. It also notes that the toolkit is used by organizations like the White House, Mozilla, and Google. The document then introduces PhiloGL as a WebGL powered framework for large datasets with an idiomatic JavaScript API and module system. It provides examples of both frameworks.
Best Practices for Embedded UA - WritersUA 2012, Scott DeLoach, ClickStart
1) The document provides best practices for writing embedded user assistance (UA) including using an informal friendly writing style, integrating content from other sources, allowing user feedback, customization, and learning.
2) It demonstrates HTML5 techniques for UA like adding subtitles to videos, editing content, and saving user-provided content using local storage.
3) Forms guidelines are discussed like requiring input, validating formats, and spellchecking. Examples of applications and websites using these techniques are provided.
Desktop, Web e Mobile
Paulo Moura discusses different technologies for desktop, web, and mobile development. He covers front-end technologies like HTML5, CSS3, and JavaScript frameworks like Angular and React. He also discusses back-end technologies like Java, C#, PHP, and Ruby. For mobile development, he mentions technologies like iOS with Objective-C and Swift, Android with Java, and cross-platform with tools like React Native and Ionic that allow using JavaScript. He concludes that JavaScript can be used everywhere from web to desktop to mobile applications.
Learning Svelte
Svelte is a compiler that optimizes code by avoiding unnecessary updates. It allows building standalone components without dependencies on frameworks. Svelte compiles code to plain JavaScript that can run anywhere. Key features include bindings that sync state between components and templates, reusable components, and directives like if/else and each that control the template.
Canvas
The document provides an overview of the HTML5 canvas element and what it can be used for, including dynamic graphics, games, animations, and interactive media. It then demonstrates how to draw basic shapes, apply colors, gradients and patterns, add text, and perform transformations using the canvas rendering context. It also discusses mouse input, animation, and saving/restoring the canvas state. The canvas allows turning a basic webpage into an interactive application that can be converted into a mobile app.
Progressive What Apps?
Progressive Web Apps are one of the hottest things to come to the web platform in years, but how much of it is just hot air? When can you actually start shipping these things? Decades ago! In a hands on presentation, I'll show how PWAs are truly meant to be progressive - building on an evolution of web technologies nearly as old as the web itself, and still let you ship one of the most performant and cutting edge web apps around.
JavaScript Performance (at SFJS)
This document discusses strategies for improving JavaScript performance on websites. It begins by noting that JavaScript is often the number one cause of slow web pages. It then reviews the history of JavaScript loading approaches, from loading scripts in the page head in 1995 to more modern async and deferred loading. It discusses using localStorage as a cache and the Google Analytics async snippet as examples. It concludes by recommending tools and resources for measuring and improving JavaScript performance, including WebPagetest.org, ControlJS, and Steve Souders' own site and books.
More Related Content
What's hot
The Art of AngularJS - DeRailed 2014
AngularJS is one of today's hottest JavaScript MVC Frameworks. In this session, we'll explore many concepts it brings to the world of client-side development: dependency injection, directives, filters, routing and two-way data binding. We'll also look at its recommended testing tools and build systems. Finally, you'll learn about my experience developing several real-world applications using AngularJS, HTML5 and Bootstrap.
Spine js & creating non blocking user interfaces
This document discusses Spine.js and creating non-blocking user interfaces. It provides an overview of Spine.js, including how it compares to Backbone.js in its use of controllers instead of views and models instead of collections. It also discusses how Spine.js enables asynchronous user interfaces through its handling of events like save callbacks before ajax calls. Finally, it addresses some limitations of Spine.js for transactions and situations requiring server-side validation.
PreDevCampSF - CSS3 Tricks
This presentation was given at PreDevCampSF on August 10, 2009. It goes over some useful components of newer versions of CSS, as well as some proprietary webkit extensions that can make WebOS development much easier.
The Hitchhikers Guide To Html5 Offline Strategies (+firefoxOS)
a quick overview on html5 offline strategies (applicationCache, localStorage, sessionStorage, indexedDB, localForage, firefoxOS DeviceStorage API)
JavaScript para Graficos y Visualizacion de Datos
This document discusses using JavaScript for data visualization and graphics. It presents examples of collecting video data using HTML5 APIs, transforming the data with Web Workers and typed arrays, rendering 3D scenes with WebGL and PhiloGL, and interacting with forms. The examples show loading weather data and manipulating it to render an interactive 3D histogram in the browser. The document argues that using modern HTML5 APIs and lightweight frameworks directly provides more power and control than monolithic application frameworks.
Introduction to AJAX In WordPress
This document provides an introduction to AJAX in WordPress. It explains that AJAX allows for asynchronous requests that do not require a page reload. It describes how AJAX works, with the client sending a request to the server, the server processing it, responding, and the client receiving the response using JavaScript. In WordPress, AJAX is implemented using jQuery to make GET/POST requests to the admin-ajax.php file, with callbacks to handle the response. Examples are provided and further reading suggested, including using AJAX without admin-ajax and processing forms with AJAX and the REST API.
React.js触ってみた 吉澤和香奈
This document provides instructions for setting up a basic React.js application on a server. It details downloading the React and JSX files using wget, creating a js directory to store them, and writing an index.html file that includes the scripts and renders a simple <HelloWorld> component inside a <div> element. The <HelloWorld> component returns JSX to display an <h1> heading saying "Hello, world!".
Lazy load Everything!
This document discusses lazy loading assets like scripts and images to improve page performance. It describes loading assets on demand and asynchronously after page load to reduce initial loading time. While this can improve performance, it has drawbacks like limiting parallel downloads and caching benefits. The document recommends using script loaders like YepNope.js or image lazy loading plugins like Jail.js to lazily load assets based on events like scrolling or clicking. This allows loading visible assets while deferring loading of non-visible assets to improve performance.
Integrating Angular js & three.js
This document discusses using Angular and Three.js together for 3D modeling and visualization. It covers:
1. Different versions of a 3D viewer app including using controllers as view models and prototypal components.
2. Benefits of separating Three.js code from Angular UI code for reusability and productivity.
3. Details of the viewer app architecture including services, directives, controllers and factories for loading models and handling user interactions.
Service worker API
Everybody knows Javascript is single-threaded and that it shares this same thread with other browser-related processes such as painting and compositing. There are several techniques to implement pseudo multithreading in JavaScript; however, during this talk we will focus our attention on how to use and debug the Service Worker API. Our end goal is to explore practical use cases in order to simplify the process to render complex user interfaces and transitions in a browser.
handout-05b
The document is a tutorial on using jQuery for client-side website construction. It introduces jQuery as a JavaScript library that simplifies DOM manipulation, event handling, animations and Ajax interactions. It provides instructions on loading jQuery, basic usage, and examples of selecting elements and binding events.
Angular JS Basics.
This document provides an overview of key concepts for building modern web apps with AngularJS including tools, modules and controllers, expressions, routes, views and templates, directives, and services. It discusses Node Package Manager, Grunt, Yeoman, and Bower for tools, using angular.module and controllers, binding data with expressions, routing with $routeProvider, using templates with ng-view, repeating elements with ng-repeat, and creating reusable services.
Unobtrusive JavaScript
This document discusses unobtrusive JavaScript and patterns for implementing it in web frameworks. It begins by outlining problems with server-side JavaScript generation and the proliferation of JavaScript frameworks. It then covers common patterns for unobtrusive JavaScript like double templating, just Ajax, and update panels. The document also explains how Rails implements unobtrusive JavaScript using drivers, data attributes, and remote forms. It concludes by discussing how these patterns and techniques could be adapted for ASP.NET MVC.
Machine Learning for Web Developers
This session will be delivered in Bahasa. Riza will talk about how to starting implement machine learning with JavaScript. He will introduce some tools and terminology that can be used for implementing machine learning.
This talk is for TechInAsia Product Development Conference in Jakarta, Indonesia. Held at 2018-07-04.
The MEAN stack
Node.js is a JavaScript runtime built on Chrome's V8 engine that makes building network and server-side applications quick and easy. It is commonly used with AngularJS (Angular) for the front-end to create full-stack JavaScript (MEAN stack) applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. Common uses of Node.js include building real-time applications, working with files and streams, and using modules to reuse and share code. MongoDB is often used as the database for MEAN stack applications and Mongoose provides an ORM for interacting with MongoDB from Node.js applications. Angular is a front-end web application framework that
New Tools for Visualization in JavaScript - Sept. 2011
This document summarizes two JavaScript data visualization frameworks: the JavaScript InfoVis Toolkit and PhiloGL. It describes that the JavaScript InfoVis Toolkit provides a wide range of visualizations and is focused on performance with support for browsers, devices, and mobile platforms. It also notes that the toolkit is used by organizations like the White House, Mozilla, and Google. The document then introduces PhiloGL as a WebGL powered framework for large datasets with an idiomatic JavaScript API and module system. It provides examples of both frameworks.
Best Practices for Embedded UA - WritersUA 2012, Scott DeLoach, ClickStart
1) The document provides best practices for writing embedded user assistance (UA) including using an informal friendly writing style, integrating content from other sources, allowing user feedback, customization, and learning.
2) It demonstrates HTML5 techniques for UA like adding subtitles to videos, editing content, and saving user-provided content using local storage.
3) Forms guidelines are discussed like requiring input, validating formats, and spellchecking. Examples of applications and websites using these techniques are provided.
Desktop, Web e Mobile
Paulo Moura discusses different technologies for desktop, web, and mobile development. He covers front-end technologies like HTML5, CSS3, and JavaScript frameworks like Angular and React. He also discusses back-end technologies like Java, C#, PHP, and Ruby. For mobile development, he mentions technologies like iOS with Objective-C and Swift, Android with Java, and cross-platform with tools like React Native and Ionic that allow using JavaScript. He concludes that JavaScript can be used everywhere from web to desktop to mobile applications.
Learning Svelte
Svelte is a compiler that optimizes code by avoiding unnecessary updates. It allows building standalone components without dependencies on frameworks. Svelte compiles code to plain JavaScript that can run anywhere. Key features include bindings that sync state between components and templates, reusable components, and directives like if/else and each that control the template.
Canvas
The document provides an overview of the HTML5 canvas element and what it can be used for, including dynamic graphics, games, animations, and interactive media. It then demonstrates how to draw basic shapes, apply colors, gradients and patterns, add text, and perform transformations using the canvas rendering context. It also discusses mouse input, animation, and saving/restoring the canvas state. The canvas allows turning a basic webpage into an interactive application that can be converted into a mobile app.
What's hot (20)
The Hitchhikers Guide To Html5 Offline Strategies (+firefoxOS)
The Hitchhikers Guide To Html5 Offline Strategies (+firefoxOS)
New Tools for Visualization in JavaScript - Sept. 2011
New Tools for Visualization in JavaScript - Sept. 2011
Best Practices for Embedded UA - WritersUA 2012, Scott DeLoach, ClickStart
Best Practices for Embedded UA - WritersUA 2012, Scott DeLoach, ClickStart
Similar to The Future of CSS with Web components
Progressive What Apps?
Progressive Web Apps are one of the hottest things to come to the web platform in years, but how much of it is just hot air? When can you actually start shipping these things? Decades ago! In a hands on presentation, I'll show how PWAs are truly meant to be progressive - building on an evolution of web technologies nearly as old as the web itself, and still let you ship one of the most performant and cutting edge web apps around.
JavaScript Performance (at SFJS)
This document discusses strategies for improving JavaScript performance on websites. It begins by noting that JavaScript is often the number one cause of slow web pages. It then reviews the history of JavaScript loading approaches, from loading scripts in the page head in 1995 to more modern async and deferred loading. It discusses using localStorage as a cache and the Google Analytics async snippet as examples. It concludes by recommending tools and resources for measuring and improving JavaScript performance, including WebPagetest.org, ControlJS, and Steve Souders' own site and books.
JavaScript Perfomance
This document discusses strategies for improving JavaScript performance on web pages. It begins by noting that JavaScript is often the number one cause of slow page loads. It then reviews the history of script loading approaches, from loading scripts in the page head in 1995 to more modern async and deferred loading. Key recommendations include using async and deferred loading, prefetching scripts that may not be needed, leveraging localStorage as an application cache, and optimizing the Google Analytics async snippet. The document emphasizes strategies from stevesouders.com like ControlJS and leveraging tools from sites like WebPagetest.org and Cuzillion.com to test performance.
Keeping the frontend under control with Symfony and Webpack
Webpack tutorial with tips for Symfony users. Topics covered include: current frontend trends, setup, loaders, dev tools, optimization in production, bundle splitting and tips and tricks for using webpack with existing projects.
Symfony Munich Meetup 2016.
09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)
09 - Express Nodes on the right Angle - Vitaliy Basyuk - IT Event 2013 (5)
60 вузлів під правильним кутом - миттєва розробка програмних додатків використовуючи Node.js + Express + MongoDB + AngularJS.
Коли ми беремось за новий продукт, передусім ми думаємо про пристрасть, яка необхідна йому, щоб зробити користувача задоволеним і відданим нашому баченню. А що допомагає нам здобути прихильність користувачів? Очевидно, що окрім самої ідеї, також важлими будуть: зручний користувацький інтерфейс, взаємодія в реальному часі та прозора робота з даними. Ці три властивості ми можемо здобути використовучи ті чи інші засоби, проте, коли все лиш починається, набагато зручніше, якщо інструменти допомагають втілити бажане, а не відволікають від головної мети.
Ми розглянемо процес розробки, використовуючи Node.js, Express, MongoDB та AngularJS як найбільш корисного поєднання для отримання вагомої переваги вже на старті вашого продукту.
Віталій Басюк
http://itevent.if.ua/lecture/express-nodes-right-angle-rapid-application-development-using-nodejs-express-mongodb-angular
RESS – Responsive Webdesign and Server Side Components
Use a mixture of user agent detection and browser feature detection or a device detection library to enhance your responsive website.
Css sprite_maker-1
CSS::SpriteMaker is a Perl module that allows users to combine multiple images into a single sprite image and generate corresponding CSS code. It aims to provide a native Perl solution for creating CSS sprites without relying on other languages. The module implements different layout algorithms to organize images in the sprite and allows users to generate sprites from the command line or integrate it into their applications. Future plans include adding more layouts, tests, abstracting the imaging and stylesheet generation, and a binary for command line usage.
Angular server side rendering - Strategies & Technics
Server Side Rendering (SSR) involves running and serving an Angular application from the server. This provides benefits like fast initial loading, SEO/crawlability since search engines can't run JavaScript. The document discusses SSR strategies like partial rendering and avoiding duplicate requests. It also covers challenges like unsupported features and outlines steps to implement SSR like generating a Universal module and rendering on the server with Express. SSR can improve performance but requires more complex setup and deployment.
Building iPhone Web Apps using "classic" Domino
This document discusses building iPhone web apps using classic Domino. It covers the required structure of a mobile web app including initializing the app and registering event handlers. It demonstrates using embedded views in Domino to manage app pages and includes code examples for communicating with servers via AJAX. References are provided for JavaScript frameworks like jQTouch that can be used to build these types of apps.
Guia de Sobrevivência JS no mundo Open Source
The document discusses some of the challenges of using third-party JavaScript from open source libraries. It notes that JS must work across different environments like mobile, desktop and browsers, and across many browser versions. It also discusses issues like the same-origin policy and how to work around it using techniques like JSONP, CORS and postMessage. It provides tips on optimizing Google Analytics and avoiding common antipatterns like global pollution, modifying native objects and inline JavaScript. Finally, it outlines the process for publishing a jQuery plugin to the jQuery plugin registry, including creating a GitHub repository, adding a webhook and creating a manifest file.
Intro to HTML5
This document provides a short introduction to HTML5, including:
- HTML5 is the 5th version of the HTML standard by the W3C and is still under development but supported by many browsers.
- HTML5 introduces new semantic elements, video and audio tags, 2D/3D graphics using <canvas>, and new JavaScript APIs for features like geolocation, offline web apps, and drag and drop.
- The document provides examples of using new HTML5 features like video playback, semantic elements, geolocation API, and drawing on a canvas with JavaScript.
以Vue開發電子商務網站
架構與眉角
This document discusses developing an e-commerce website using Vue. It covers:
- Initial project setup using Vue CLI
- Project structure, components, routing, and state management
- Styling with SCSS
- Communicating with the server using Vue Resource
- Data fetching and handling loading states with route changes
- Maintaining scroll position when navigating between routes
Jarv.us Showcase — SenchaCon 2011
The document provides an overview and code snippets for an Eagles 2011 NFL Draft mobile app created with Sencha Touch. It discusses challenges faced like learning Sencha Touch, displaying live updates, and adapting images for different screen sizes. Lessons learned include destroying DOM elements when done, establishing post-launch content parameters, and using background-size for images. The document also discusses tooling, dependencies, and best practices for mobile development.
Private slideshow
This document is the HTML code for the header section of a website. It includes code for login/account information, search bar, navigation links, and scripts for tracking user analytics and ads. The header code brings together elements for user personalization, site search and navigation, and revenue generation.
Building and deploying React applications
It’s trivial today to start writing and debugging some React code, but it’s not 100% clear how to properly deploy the application, manage versions and what implications that has on the build configurations. Especially if you want to allow different versions for different users in order to perform some A/B testing, testing new features in production environment, come up with some UI experiments, or gradually roll out new features for a subset of users.
In this presentation I hopefully covered all that.
Massimo Artizzu - The tricks of Houdini: a magic wand for the future of CSS -...
The way that banner is rendered is really bland. That animation performance is lackluster to say the least. Maybe you're still unsatisfied with grid. CSS has always suffered from a slow-paced evolution but it's probably coming to an end. Houdini is a project that aims to expose the internals of CSS engines to developers, in order to create new and performant ways to extend CSS. We'll see the current state-of-the-art and some neat examples, to conclude with a glance to what the future holds for us.
125 고성능 web view-deview 2013 발표 자료_공유용
The document discusses ways to improve the performance of hybrid mobile applications that use WebView. It describes how WebView has less powerful capabilities and worse web standard compatibility compared to mobile browsers. This can cause issues like fragmentation across device versions.
The document proposes techniques for creating a high-performance WebView, including adding new capabilities like WebSockets, and replacing slower native elements like Canvas 2D with optimized custom implementations. It provides code examples for calling JavaScript from native and vice versa on Android and iOS. Lessons learned emphasize minimizing native/JavaScript communication and dealing with threading issues.
[wcatx] Adaptive Images in Responsive Web Design
This document discusses adaptive images in responsive web design. It begins by introducing the speaker, Christopher Schmitt, and his credentials. It then explores using the browser's user agent string and feature detection to determine screen resolution and bandwidth rather than browser sniffing. The document discusses using CSS media queries, jQuery, and the picture element to serve adaptive images. It also proposes some workaround techniques like background sizing and SVG to improve responsive images.
Build Better Responsive websites. Hrvoje Jurišić
The document discusses the importance of website performance and provides tips to build responsive websites. It notes that users expect pages to load within 2 seconds and will leave slow sites. The tips include reducing HTTP requests, gzipping and minifying components, optimizing images, delivering JavaScript and CSS efficiently, lazy loading images, and inlining critical CSS. Following these foundations and techniques can significantly improve load times and user experience.
Presentation Tier optimizations
The document discusses optimization of the presentation tier of web applications. It notes that the presentation tier is often overlooked despite being responsible for over 30% of client/server performance. Some key optimizations discussed include reducing HTTP requests, optimizing response objects by reducing size and load pattern, JavaScript minification and placement, image sprites, caching, and ensuring valid HTML markup.
Similar to The Future of CSS with Web components (20)
Keeping the frontend under control with Symfony and Webpack
Keeping the frontend under control with Symfony and Webpack
09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)
09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)
RESS – Responsive Webdesign and Server Side Components
RESS – Responsive Webdesign and Server Side Components
Angular server side rendering - Strategies & Technics
Angular server side rendering - Strategies & Technics
Massimo Artizzu - The tricks of Houdini: a magic wand for the future of CSS -...
Massimo Artizzu - The tricks of Houdini: a magic wand for the future of CSS -...
125 고성능 web view-deview 2013 발표 자료_공유용
125 고성능 web view-deview 2013 발표 자료_공유용
More from devObjective
Lets git together
This document discusses Git strategies for teams. It outlines several branching strategies including "wing and a prayer", long-running branches, Git flow, and branch-per-feature. Git flow uses long-running branches with specific rules for features, hotfixes, bugs, and only merging develop branches to master once stable. Branch-per-feature creates a new branch for each feature or change and nothing is merged until production deployment. The document also discusses automation, team composition, environments, and selection criteria to consider when choosing a branching strategy.
Raspberry Pi a la CFML
1) The document discusses running ColdFusion on a Raspberry Pi single board computer. It provides instructions for installing CommandBox and other tools to run CFML code on the Pi.
2) Performance tests show the Pi can handle over 1000 requests per second serving simple CFML pages.
3) The document explores various projects that can be built with the Pi including interacting with GPIO pins to control LEDs and shift registers, building a LED matrix display, and clustering multiple Pis.
Command box
CommandBox is a CLI (command line interface) package manager and automation tool for ColdFusion developers. It provides features like a package manager, REPL (read-eval-print loop), integrated server, scaffolding for frameworks like ColdBox and ContentBox, and automation commands to integrate CFML development with tasks like unit testing and source control. CommandBox aims to improve the ColdFusion development workflow and enable new use cases like packaging and distributing CFML applications and libraries.
Effective version control
The document discusses effective version control. It begins with an introduction of the presenter and overview of topics to be covered, including concepts, evolution of version control systems, best practices, and whether centralized or distributed systems are better. Key concepts discussed include repositories, working copies, patches, history, tags, branches, merges, and ancestry. The evolution of version control systems from early ones like SCCS and RCS to modern ones like Git, Mercurial, Subversion, and Team Foundation Server is outlined. Best practices recommended include committing often, branching early and merging often, and keeping the master branch releasable. The document concludes by emphasizing the power of version control tools and reusing existing code rather than reinventing
Front end-modernization
This document discusses strategies for modernizing front-end codebases in an incremental way. It recommends starting with basic modularization by splitting code into logical chunks, then concatenating and minifying files. Next steps include loading modules on demand using various module systems. Graceful deprecation is advised by keeping deprecated code available temporarily while logging its usage. Framework choices should be informed by building prototypes in different options. Overall modernization should prioritize tools like testing, linting and performance testing over choosing specific frameworks. Changes should be made gradually to avoid diverging from existing workflows.
Using type script to build better apps
TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. It allows you to write JavaScript in a more structured way using types, classes, and interfaces. Using TypeScript can help catch errors early and provide better code completion through tooling. While TypeScript adds types and other features, JavaScript code is still valid TypeScript code. The TypeScript compiler outputs plain JavaScript that runs on any browser or environment.
Csp and http headers
This document discusses various HTTP security headers and the W3C Content Security Policy. It provides an overview of headers like X-Content-Type-Options, X-XSS-Protection, X-Frame-Options, cookies, HTTP Strict Transport Security (HSTS), and the Content Security Policy. It also demonstrates how to configure these headers and gives examples of policies for different browsers and sites.
Who owns Software Security
This document discusses software security and outlines a 4 step plan to improve it. It begins by recommending studying successful security initiatives at other companies. The second step is to inventory your own applications to understand what data and services they involve. The third step is to incorporate security practices into agile development processes and use tools to help scale this. The final step is to drive a security-focused culture change and have plans for incident response.
Naked and afraid Offline mobile
The document discusses using offline storage on mobile devices by leveraging HTML, JavaScript, and technologies like Cordova, PouchDB, and CouchDB. It summarizes the evolution of HTML5 offline storage standards including Web Storage, Web SQL, and IndexedDB. It then outlines an approach to building a mobile app that works offline by storing data locally on the device using IndexedDB and syncing with a remote CouchDB database using PouchDB when an internet connection is available.
Web hackingtools 2015
This document provides an overview of a presentation on web penetration testing and hacking tools. It introduces the presenter and their background in security. It states that the presentation will demonstrate various penetration testing tools against virtual web applications and provide a quick overview of web application firewalls and vulnerability scanners. It provides details on some recent hacking events and vulnerabilities like Heartbleed and discusses tools like sqlmap, BeEF, and Metasploit that will be demonstrated.
Node without servers aws-lambda
Node Without Servers: Event-Driven Computing with AWS Lambda describes AWS Lambda and how it allows running code without servers. Lambda runs code in response to events, scales automatically, and charges only for the compute time used. Code runs in isolated containers and Lambda manages the computing resources. This allows building event-driven applications and services that respond quickly to new information.
I am-designer
This document is a presentation about design fundamentals given by Justine Arreche. It covers grids and content structure, color theory, and typography. For grids, it emphasizes laying out the grid first to keep content organized. Regarding color theory, it discusses using relevant colors aligned to messaging and creating contrast with colors on opposite sides of the color wheel. For typography, it recommends pairing type families and choosing typefaces with common traits or contrasts to create diversity and emphasis.
Garbage First and You!
The document discusses the Garbage First (G1) garbage collector in the Java Virtual Machine (JVM). It provides an overview of G1, including its core ideas of using snapshot-at-the-beginning marking and dividing memory into variable-sized regions. It describes how G1 handles young and old generation garbage collection using concurrent marking and mixed garbage collections. The document also discusses tuning G1, such as setting the maximum GC pause time goal and heap occupancy percentage for starting concurrent collection.
Fusion Reactor
FusionReactor is a monitoring and troubleshooting tool that provides visibility into application performance and issues. It allows users to view current and historical requests, database activity, errors and more. The tool helps diagnose problems by showing stack traces, logs and other details. FusionReactor 6 includes new metrics, enhanced session tracking, and an option for cloud-based monitoring. An upcoming feature called Unattended Production Debugger will automatically fix problems without user intervention.
Paying off emotional debt
The document discusses Justine's personal experience with bulimia and how it affected her life and career. It provides information about eating disorders, including definitions and statistics. It offers suggestions for how companies can help employees who may be struggling with an eating disorder, such as addressing performance issues confidentially with HR, providing information on treatment resources and medical leave policies, and ensuring compliance with disability laws. The talk aims to help reduce stigma and support those suffering from these mental health issues.
My SQL Skills Killed the Server
This document discusses SQL skills and how queries can negatively impact server performance if not written efficiently. It covers topics like query plans, execution contexts, using parameters, indexing, handling large datasets, and external influences on SQL performance. Specific "bad" SQL examples are also provided and explained. The presenter's goal is to help developers optimize their SQL and prevent poorly written queries from bringing servers to their knees.
Authentication Control
This document discusses authentication, authorization, and fine-grained access control. It introduces different levels of authorization from anonymous access to fine-grained control varying across users and resources. It provides examples of implementing fine-grained security using annotations and services. API security is also discussed, with authentication handled via OAuth2 and authorization using annotations. Pattern languages are presented as a way to discuss difficult technical problems using consistent terminology.
Multiply like rabbits with rabbit mq
This document discusses using RabbitMQ for messaging between applications. It begins with an introduction to the presenter and agenda. It then contrasts traditional RPC-style calls with messaging and covers some benefits of messaging like decoupling and flexibility. Common messaging patterns like publish/subscribe, topics, and work queues are introduced. The AMQP protocol and RabbitMQ implementation are explained. Finally, a demo of RabbitMQ is promised along with Q&A.
Preso slidedeck
This document contains notes from a presentation on software architecture. It discusses key principles like examining requirements to understand user needs, designing for foreseeable changes, and clear communication between architects and developers. Case studies are used to illustrate how understanding the problem domain leads to more elegant solutions. Overall it emphasizes that architecture is about managing risks to the application and knowing enough about the problem to design appropriately.
Intro to TDD & BDD
This document discusses test-driven development (TDD) and behavior-driven development (BDD). It defines TDD as a process of writing automated tests before code to define desired functionality, then writing minimum code to pass tests and refactoring. BDD combines TDD techniques with domain-driven design and focuses on user stories over functions to promote communication. The document provides an example of using BDD to generate scenarios for a life insurance risk example, and shows how TestBox can be used to write automated tests based on those scenarios.
More from devObjective (20)
Recently uploaded
Infrastructure Challenges in Scaling RAG with Custom AI models
Building Retrieval-Augmented Generation (RAG) systems with open-source and custom AI models is a complex task. This talk explores the challenges in productionizing RAG systems, including retrieval performance, response synthesis, and evaluation. We’ll discuss how to leverage open-source models like text embeddings, language models, and custom fine-tuned models to enhance RAG performance. Additionally, we’ll cover how BentoML can help orchestrate and scale these AI components efficiently, ensuring seamless deployment and management of RAG systems in the cloud.
Video Streaming: Then, Now, and in the Future
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.
GraphRAG for Life Science to increase LLM accuracy
GraphRAG for life science domain, where you retriever information from biomedical knowledge graphs using LLMs to increase the accuracy and performance of generated answers
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...Edge AI and Vision Alliance
For the full video of this presentation, please visit: https://www.edge-ai-vision.com/2024/06/building-and-scaling-ai-applications-with-the-nx-ai-manager-a-presentation-from-network-optix/
Robin van Emden, Senior Director of Data Science at Network Optix, presents the “Building and Scaling AI Applications with the Nx AI Manager,” tutorial at the May 2024 Embedded Vision Summit.
In this presentation, van Emden covers the basics of scaling edge AI solutions using the Nx tool kit. He emphasizes the process of developing AI models and deploying them globally. He also showcases the conversion of AI models and the creation of effective edge AI pipelines, with a focus on pre-processing, model conversion, selecting the appropriate inference engine for the target hardware and post-processing.
van Emden shows how Nx can simplify the developer’s life and facilitate a rapid transition from concept to production-ready applications.He provides valuable insights into developing scalable and efficient edge AI solutions, with a strong focus on practical implementation.Pushing the limits of ePRTC: 100ns holdover for 100 days
At WSTS 2024, Alon Stern explored the topic of parametric holdover and explained how recent research findings can be implemented in real-world PNT networks to achieve 100 nanoseconds of accuracy for up to 100 days.
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Discover how MongoDB Atlas and vector search technology can revolutionize your application's search capabilities. This comprehensive presentation covers:
* What is Vector Search?
* Importance and benefits of vector search
* Practical use cases across various industries
* Step-by-step implementation guide
* Live demos with code snippets
* Enhancing LLM capabilities with vector search
* Best practices and optimization strategies
Perfect for developers, AI enthusiasts, and tech leaders. Learn how to leverage MongoDB Atlas to deliver highly relevant, context-aware search results, transforming your data retrieval process. Stay ahead in tech innovation and maximize the potential of your applications.
#MongoDB #VectorSearch #AI #SemanticSearch #TechInnovation #DataScience #LLM #MachineLearning #SearchTechnology
Communications Mining Series - Zero to Hero - Session 1
This session provides introduction to UiPath Communication Mining, importance and platform overview. You will acquire a good understand of the phases in Communication Mining as we go over the platform with you. Topics covered:
• Communication Mining Overview
• Why is it important?
• How can it help today’s business and the benefits
• Phases in Communication Mining
• Demo on Platform overview
• Q/A
みなさんこんにちはこれ何文字まで入るの？40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの？えこ...
ここ3000字までしか入らないけどタイトルの方がたくさん文字入ると思います。
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
Maruthi Prithivirajan, Head of ASEAN & IN Solution Architecture, Neo4j
Get an inside look at the latest Neo4j innovations that enable relationship-driven intelligence at scale. Learn more about the newest cloud integrations and product enhancements that make Neo4j an essential choice for developers building apps with interconnected data and generative AI.
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
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.
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
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:
Uni Systems Copilot event_05062024_C.Vlachos.pdf
Unlocking Productivity: Leveraging the Potential of Copilot in Microsoft 365, a presentation by Christoforos Vlachos, Senior Solutions Manager – Modern Workplace, Uni Systems
Full-RAG: A modern architecture for hyper-personalization
Mike Del Balso, CEO & Co-Founder at Tecton, presents "Full RAG," a novel approach to AI recommendation systems, aiming to push beyond the limitations of traditional models through a deep integration of contextual insights and real-time data, leveraging the Retrieval-Augmented Generation architecture. This talk will outline Full RAG's potential to significantly enhance personalization, address engineering challenges such as data management and model training, and introduce data enrichment with reranking as a key solution. Attendees will gain crucial insights into the importance of hyperpersonalization in AI, the capabilities of Full RAG for advanced personalization, and strategies for managing complex data integrations for deploying cutting-edge AI solutions.
Mind map of terminologies used in context of Generative AI
Mind map of common terms used in context of Generative AI.
Programming Foundation Models with DSPy - Meetup Slides
Prompting language models is hard, while programming language models is easy. In this talk, I will discuss the state-of-the-art framework DSPy for programming foundation models with its powerful optimizers and runtime constraint system.
Recently uploaded (20)
Infrastructure Challenges in Scaling RAG with Custom AI models
Infrastructure Challenges in Scaling RAG with Custom AI models
GraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracy
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
Pushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 days
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1
みなさんこんにちはこれ何文字まで入るの？40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの？えこ...
みなさんこんにちはこれ何文字まで入るの？40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの？えこ...
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Full-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalization
Mind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AI
Programming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup Slides
The Future of CSS with Web components
- 1. The Future of CSS With Web Components SETH ENGEN
- 2. ‣Computer Know How ‣18 years developing ‣User interface Who Am I?
- 3. Instead Of This… <style> #map-canvas { width: 500px; height: 400px; } </style> <script src="https://maps.googleapis.com/maps/api/js"></script> <script> function initialize() { var mapCanvas = document.getElementById('map-canvas'); var mapOptions = { center: new google.maps.LatLng(44.5403, -78.5463), zoom: 8, mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(mapCanvas, mapOptions) } google.maps.event.addDomListener(window, 'load', initialize); </script>
- 4. We Had This… <!-- Import element --> <link rel="import" href="google-map.html"> <!-- Use element --> <google-map latitude="44.852883" longitude="-93.242410"> </google-map>
- 5. ‣Bootstrap, Foundation, JQueryUI ‣HTML + CSS + JavaScript How We Do It Now…
- 6. “Frontend Paralysis” –Rob Dodson (Google)
- 7. ‣Templates ‣Shadow DOM ‣Custom Elements ‣HTML Imports Web Components
- 8. Templates
- 9. “They're a place to put a big wad of HTML that you don't want the browser to mess with at all...for any reason.” Rafael Weinstein (spec author)
- 10. ‣ Working w/ DOM ‣ Parsed; not rendered ‣ Hidden from document Templates document.querySelector(‘template h1') == null; <template> <h1>Template Awesomeness!</h1> </template>
- 11. Shadow DOM
- 12. ‣Subtree of DOM nodes ‣Create on any HTML element ‣Provides encapsulation Shadow DOM
- 13. ‣Shadow Host ‣Shadow Boundary ‣Shadow Root ‣Shadow Tree ‣Light DOM Shadow Tree Shadow DOM Shadow Host Shadow Root Child Shadow Root Child
- 14. Shadows = false
- 16. Shadows = true
- 17. Shadows Up Close
- 18. Shadow DOM w/ JS [DEMO]
- 21. Custom Elements
- 24. HTML Imports
- 25. ‣ Before ‣ After HTML Imports <link rel="import" href="bootstrap.html"> <link rel="stylesheet" href="bootstrap.css"> <link rel="stylesheet" href="fonts.css"> <script src="jquery.js"></script> <script src="bootstrap.js"></script> <script src="bootstrap-tooltip.js"></script> <script src="bootstrap-dropdown.js"></script>
- 27. Styling
- 30. ‣ Scoping ‣ Host ‣ Host (based on context) ‣ Piercing The Shadow Boundary Styling {CSS}
- 32. Styling: Host Context <style> :host-context(.theme1) { ... } :host-context(.theme2) { ... } </style> <body class="theme1"> ... </body>
- 33. ‣ Shadow Piercing Descendent Combinator (>>>) Styling: Piercing <style> /* >>> was /deep/ */ video >>> input[type="range"] { background: hotpink; } </style>
- 34. Browser Support Chrome Firefox IE 10+ Safari 8+ Chrome (Android) Safari (IOS) Template YES YES NO YES YES YES HTML Imports YES Flag NO NO YES NO Custom Elements YES Flag NO NO YES NO Shadow DOM YES Flag NO NO YES NO ‣ jonrimmer.github.io/are-we-componentized-yet ‣ caniuse.com
- 36. ‣ platform.js — webcomponents.js ‣ bower install webcomponentsjs ‣ npm install webcomponents.js ‣ github.com/webcomponents/webcomponentsjs Polyfill
- 37. Browser Support Chrome Firefox IE 10+ Safari 8+ Chrome (Android) Safari (IOS) Template YES YES YES YES YES YES HTML Imports YES YES YES YES YES YES Custom Elements YES YES YES YES YES YES Shadow DOM YES YES YES YES YES YES w/ Polyfill
- 38. ‣ Polymer by Google ‣ X-Tags by Mozilla Polyfill Libraries
- 39. Polymer Elements ‣ polymer-project.org/docs/elements ‣ <core-*> ‣ <paper-*>
- 41. Polymer Designer
- 42. Mozilla Brick (Elements) ‣ brick.mozilla.io ‣ <brick-*>
- 43. ‣ customelements.io ‣ component.kitchen More Web Components
- 44. ‣ googlewebcomponents.github.io Google Web Components
- 45. Thank you