This document provides an overview of a module on interactive web application development. It covers the following topics:
- Front-end technologies: HTML5, CSS, JavaScript, and the Polymer library for implementing web components.
- Back-end concepts: Introduction to Java EE including servlets, JSP, and frameworks like SparkJava.
- JavaScript tooling: Grunt, Gulp, Bower, and Yeoman for building JavaScript applications.
- Node.js and backend frameworks like ExpressJS for building APIs.
- Introduction to NoSQL databases like MongoDB, Redis, and Cassandra.
- Software tooling in Java.
- Test-driven development.
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 3/3 - Web components avec ...Horacio Gonzalez
This document provides an overview and description of a module on interactive web application development. It covers front-end topics like HTML5, CSS, JavaScript, and the Polymer library, as well as back-end concepts using Java EE frameworks and Node.js. The module will include sections on:
- Front-end with HTML5, CSS, JS, and the Polymer library
- Back-end concepts using Java EE for servlets, JSP, and frameworks
- Back-end using Node.js, ExpressJS, and APIs
- JavaScript build tools like Grunt, Gulp, Bower, and Yeoman
- Software development practices like test-driven development
- An examination of student
Devoxx France - Web Components, Polymer et Material DesignHoracio Gonzalez
Des concepts comme encapsulation, réutilisation de composants, data-binding ou templating sont maintenant monnaie courante dans la plupart de frameworks web… mais chacun le fait à ça façon !
Et c’est là que les Web Components débarquent. Un nouveau standard en cours d’élaboration au W3C, qui va permettre d’avoir une approche par composants au développement web.
Dans cette présentation nous parlerons de ce standard en construction, de concepts comme ShadowDOM, Mutation Observers, custom elements, Model-Driven-View, Object.observe()… Nous parlerons aussi des implémentations actuelles, du projet Polymer de Google, des X-Tags de Mozilla et de comment avec AngularJS on peut déjà avoir un bon aperçu de ce que nous attend.
Et ensuite on rentrera dans le détail de comment on peut dès aujourd'hui utiliser des web components avec Polymer, et on illustrera l'approche en utilisant les composants Polymer Paper pour implémenter le look Material Design d'Android L dans des applications web.
ENIB 2015-2016 - CAI Web - S01E01- La forge JavaScriptHoracio Gonzalez
The document discusses various JavaScript development tools including npm, Bower, Grunt, and Yeoman. It begins by explaining that npm is used to install other development tools like Bower, Grunt, and Yeoman. It then provides more details on Bower for managing front-end package dependencies, Grunt for automating tasks, and how they can be used together with a Gruntfile and package.json to set up a build system for a JavaScript project.
This document discusses best practices for organizing code and setting up architecture for larger frontend projects with multiple developers. It covers choosing technology stacks, code organization, coding guidelines, responsive design approaches, performance optimization, and workflows.
This document discusses web components and the different pillars that make them possible, including templates, shadow DOM, custom elements, and imports. It provides examples of how templates allow reusable markup, how shadow DOM enables encapsulation, and how custom elements define new semantic elements with associated functionality. The document explores how these pillars work together to provide reusable, encapsulated components for building web interfaces.
The W3C has been working on a Web Components standard for almost three years, but it is still a work in progress. But polyfills like allows current developers to use Web Components today, and incorporate to their apps widgets from any library of web components.
The best known of these libraries is Polymer, but it isn't the only one. In this talk we are going to compare Polymer, the '800 lb gorilla' in the Web Component field, with several of its lesser known competitors: Mozilla's X-Tags and Briks, and Bosonic, and even homemade ReactJS webcomponents
We will build an Angular JS application where, instead of directives, we will use webcomponents done with Polymer, X-Tag and ReactJS. And we will take a look to the performances in both Chrome and Firefox.
W prezentacji znajdziesz omówienie:
-organizację kodu i pracy w trochę większych projektach
-wykorzystanie narzędzi takich jak npm, gulp, sass, bower do automatyzacji zadań
-efektywną pracę w zespole z wykorzystaniem gita
-zasady tworzenia zwartego, łatwego w utrzymaniu kodu w oparciu o podejście SMACSS i BEM
-wzorce i podejście do tworzenia modularnego javascriptu
-przydatne narzędzia i biblioteki wraz z ich praktycznym zastosowaniem
-testowanie stron i aplikacji
-przyjrzymy się też nowej wersji Javascript: ES6/ES2015
HTML5 의 표준 권고안이 채택되면서 HTML5는 엄청난 속도로 웹 전반에 걸쳐 보급되고 있습니다. HTML5 와 기존의 HTML4 / XHTML 1.1 과의 가장 큰 차잇점은 웹을 바라보는 관점입니다. 웹브라우저를 저작 플랫폼이 아닌 실행 환경으로 바라보는 HTML5의 독특한 관점은 webcomponent 에 잘 드러나 있습니다. 이 발표에서는 webcomponent 의 개념 및 역사를 훑고, webcomponent 오픈소스 구현체들인 webcomponents.js 및 구글의 Polymer, 모질라의 x-tag 과 함께 페이스북의 React 와의 비교 및 브라우저 대응에 대한 내용을 다룹니다.
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 3/3 - Web components avec ...Horacio Gonzalez
This document provides an overview and description of a module on interactive web application development. It covers front-end topics like HTML5, CSS, JavaScript, and the Polymer library, as well as back-end concepts using Java EE frameworks and Node.js. The module will include sections on:
- Front-end with HTML5, CSS, JS, and the Polymer library
- Back-end concepts using Java EE for servlets, JSP, and frameworks
- Back-end using Node.js, ExpressJS, and APIs
- JavaScript build tools like Grunt, Gulp, Bower, and Yeoman
- Software development practices like test-driven development
- An examination of student
Devoxx France - Web Components, Polymer et Material DesignHoracio Gonzalez
Des concepts comme encapsulation, réutilisation de composants, data-binding ou templating sont maintenant monnaie courante dans la plupart de frameworks web… mais chacun le fait à ça façon !
Et c’est là que les Web Components débarquent. Un nouveau standard en cours d’élaboration au W3C, qui va permettre d’avoir une approche par composants au développement web.
Dans cette présentation nous parlerons de ce standard en construction, de concepts comme ShadowDOM, Mutation Observers, custom elements, Model-Driven-View, Object.observe()… Nous parlerons aussi des implémentations actuelles, du projet Polymer de Google, des X-Tags de Mozilla et de comment avec AngularJS on peut déjà avoir un bon aperçu de ce que nous attend.
Et ensuite on rentrera dans le détail de comment on peut dès aujourd'hui utiliser des web components avec Polymer, et on illustrera l'approche en utilisant les composants Polymer Paper pour implémenter le look Material Design d'Android L dans des applications web.
ENIB 2015-2016 - CAI Web - S01E01- La forge JavaScriptHoracio Gonzalez
The document discusses various JavaScript development tools including npm, Bower, Grunt, and Yeoman. It begins by explaining that npm is used to install other development tools like Bower, Grunt, and Yeoman. It then provides more details on Bower for managing front-end package dependencies, Grunt for automating tasks, and how they can be used together with a Gruntfile and package.json to set up a build system for a JavaScript project.
This document discusses best practices for organizing code and setting up architecture for larger frontend projects with multiple developers. It covers choosing technology stacks, code organization, coding guidelines, responsive design approaches, performance optimization, and workflows.
This document discusses web components and the different pillars that make them possible, including templates, shadow DOM, custom elements, and imports. It provides examples of how templates allow reusable markup, how shadow DOM enables encapsulation, and how custom elements define new semantic elements with associated functionality. The document explores how these pillars work together to provide reusable, encapsulated components for building web interfaces.
The W3C has been working on a Web Components standard for almost three years, but it is still a work in progress. But polyfills like allows current developers to use Web Components today, and incorporate to their apps widgets from any library of web components.
The best known of these libraries is Polymer, but it isn't the only one. In this talk we are going to compare Polymer, the '800 lb gorilla' in the Web Component field, with several of its lesser known competitors: Mozilla's X-Tags and Briks, and Bosonic, and even homemade ReactJS webcomponents
We will build an Angular JS application where, instead of directives, we will use webcomponents done with Polymer, X-Tag and ReactJS. And we will take a look to the performances in both Chrome and Firefox.
W prezentacji znajdziesz omówienie:
-organizację kodu i pracy w trochę większych projektach
-wykorzystanie narzędzi takich jak npm, gulp, sass, bower do automatyzacji zadań
-efektywną pracę w zespole z wykorzystaniem gita
-zasady tworzenia zwartego, łatwego w utrzymaniu kodu w oparciu o podejście SMACSS i BEM
-wzorce i podejście do tworzenia modularnego javascriptu
-przydatne narzędzia i biblioteki wraz z ich praktycznym zastosowaniem
-testowanie stron i aplikacji
-przyjrzymy się też nowej wersji Javascript: ES6/ES2015
HTML5 의 표준 권고안이 채택되면서 HTML5는 엄청난 속도로 웹 전반에 걸쳐 보급되고 있습니다. HTML5 와 기존의 HTML4 / XHTML 1.1 과의 가장 큰 차잇점은 웹을 바라보는 관점입니다. 웹브라우저를 저작 플랫폼이 아닌 실행 환경으로 바라보는 HTML5의 독특한 관점은 webcomponent 에 잘 드러나 있습니다. 이 발표에서는 webcomponent 의 개념 및 역사를 훑고, webcomponent 오픈소스 구현체들인 webcomponents.js 및 구글의 Polymer, 모질라의 x-tag 과 함께 페이스북의 React 와의 비교 및 브라우저 대응에 대한 내용을 다룹니다.
JavascriptMVC: Another choice of web frameworkAlive Kuo
JavascriptMVC is another client side web MVC framework based on jQuery. It has totally solution to build a web application. This slide will introduce basic features of JavascriptMVC3.2
2016 is going to be the year of Virtual DOM. React.js one of the most popular implementation of Virtual DOM. But this time we won't focus on React.js. We will be focusing on what is the concept of Virtual DOM, what's the benefits, and how to use it without React.js. All of those concepts will help you understand this newest DOM manipulation technique and better work with any Virtual DOM implementations such React.js.
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.
The document discusses best practices for developing high quality JavaScript applications. It recommends leveraging build tools like Grunt and integrating tools for linting, testing, minification and concatenation. Continuous integration with Jenkins is also suggested, as well as using IDEs and editors that support JavaScript. Architectural patterns like modules and design principles are important.
HTML 5 is the latest version of the HTML standard. It includes several new elements and features to improve structure and behavior. Some key changes include new semantic elements like <article>, <aside>, <header>, and <footer>; built-in support for audio and video; the <canvas> element for drawing graphics; and forms with new input types. HTML 5 aims to simplify HTML and separate structure and presentation, making code cleaner and pages more accessible. It is developed jointly by the WHATWG and W3C organizations.
Web Components are like Lego bricks. Easy to assemble and every piece simply fits together. But there is even more to it. Being able to create your own HTML-Tags with encapsulated style & logic changes the way you think about structuring your web applications. Get a sneak peek on how to develop scalable & maintainable applications in the future.
HTML5 and CSS3 provide improvements to building the web. HTML5 introduces more semantic tags that improve accessibility and cleaner code. It also provides native support for video, audio, local storage and better interactions. CSS3 enhances presentation. HTML5 is supported across modern browsers and on mobile, allowing responsive design. New features like canvas and WebGL enable graphic effects. Geolocation allows accessing a user's location with permission. HTML5 aims to make the web platform more powerful and flexible.
Slides of the Magento Fireside Chat March 20th, 2014 with
Fabrizio Branca (@fbrnc)
Bastian Ike (@b_ike)
Daniel Fahlke (@flyingmana)
Rolando Granadino (@beeplogic)
Ben Marks (@benmarks)
This is the presentation I was using when delivering the JavaScript Jump Start meetup on February 14th, 2022. More information about that meetup can be found at https://www.meetup.com/lifemichael/events/278743661/ You can find the video at https://youtu.be/F1e-KHTEKzo
This is the presentation I was using when delivering the free meetup "Node.js Jump Start" (Crash Course). You can find the video at https://www.youtube.com/watch?v=UEVaBHMTLcQ
Deview 2013 mobile browser internals and trends_20131022NAVER D2
The document discusses browser internals and trends related to mobile browsers. It provides an overview of the major rendering engines including WebKit, Blink, and Chromium. It then focuses on specifics of Android's WebView and how it has transitioned to using the Chromium engine. Finally, it describes the multi-process architecture of Chromium which separates rendering and browser components across multiple processes for improved stability.
The document discusses JavaScript and the Document Object Model (DOM). It begins with an introduction to JavaScript, including what it is, examples of basic JavaScript code, and how it is used for client-side scripting. It then covers the DOM and how JavaScript can be used to access and manipulate elements in an HTML document. Finally, it discusses several JavaScript libraries and techniques, including the YUI library and how it can be used for drag-and-drop and animation effects.
JavaScript Advanced - Useful methods to power up your codeLaurence Svekis ✔
Get this Course
https://www.udemy.com/javascript-course-plus/?couponCode=SLIDESHARE
Useful methods and JavaScript code snippets power up your code and make even more happen with it.
This course is perfect for anyone who has fundamental JavaScript experience and wants to move to the next level. Use and apply more advanced code, and do more with JavaScript.
Everything you need to learn more about JavaScript
Source code is included
60+ page Downloadable PDF guide with resources and code snippets
3 Challenges to get you coding try the code
demonstrating useful JavaScript methods that can power up your code and make even more happen with it.
Course lessons will cover
JavaScript Number Methods
JavaScript String Methods
JavaScript Math - including math random
DOMContentLoaded - DOM ready when the document has loaded.
JavaScript Date - Date methods and how to get set and use date.
JavaScript parse and stringify - strings to objects back to strings
JavaScript LocalStorage - store variables in the user browser
JavaScript getBoundingClientRect() - get the dimensions of an element
JavaScript Timers setTimeout() setInterval() requestAnimationFrame() - Run code when you want too
encodeURIComponent - encoding made easy
Regex - so powerful use it to get values from your string
prototype - extend JavaScript objects with customized powers
Try and catch - perfect for error and testing
Fetch xHR requests - bring content in from servers
and more
No libraries, no shortcuts just learning JavaScript making it DYNAMIC and INTERACTIVE web application.
Step by step learning with all steps included.
Angularjs vs Dojo toolkit | SuperSpeaker@CodeCamp Iasi 2014Endava
A quick overview of AngularJS Framework and Dojo Toolkit. Why use them and when? Why use one instead of the other? Strong points and drawbacks! Plus a hands-on example
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.
The document provides an overview of how a browser works by breaking it down into key components and subcomponents. It discusses the user interface, browser engine, rendering engine, networking, JavaScript interpreter, UI backend, data persistence, and web APIs that make up a browser. It then dives deeper into specific subcomponents like the HTML parser, CSS parser, DOM, rendering tree, layout and reflow process, and event loop. The document uses diagrams and examples to illustrate how each component interacts and the main flows and processes involved in rendering web content in the browser.
The document discusses how to integrate jQuery and JavaScript functionality into Ruby on Rails and Merb web applications. Key points include:
- Rails and Merb do not have built-in helpers for jQuery, but jQuery is easy to use and Ruby helpers can be written to support it
- The frameworks produce consistent markup that jQuery code can be written to add interactive behavior to
- Options like metadata can be passed to jQuery plugins via the markup generated by helpers
- Helpers, jQuery code, and techniques like the <base> tag allow JavaScript features to be unobtrusively integrated into the MVC frameworks
Essential Javascript -- A Javascript <b>Tutorial</b>tutorialsruby
Javascript is an interpreted language with C-like syntax that supports object-oriented programming and other advanced concepts. It is approachable for beginners but also powerful. This document provides an overview of Javascript basics like variables, data types, operators, conditional statements, and functions. It also covers Javascript in the browser context, explaining how to add script blocks, work with events, get input from users, and output data to the DOM. Comments are included to document code.
The document contains code snippets from JavaScript courses and projects including:
1. Adding and animating elements on a page using requestAnimationFrame.
2. Using switch statements to output time of day and day of week.
3. Examples of using continue and break in for loops and while loops.
4. Dynamically adding input and div elements and adding keyboard event listeners.
5. Creating and rolling dice using dynamically generated HTML.
6. Creating a modal popup and dynamically updating content.
7. Building a simple counter using requestAnimationFrame.
8. Examples of querying elements and dynamically adding content.
9. Adding click handlers to matching elements using querySelectorAll.
Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011Patrick Lauke
The document discusses the new features of HTML5 including improved semantics, forms, and multimedia capabilities. Some key points:
1. HTML5 adds new semantic elements like <header>, <footer>, <nav> that more accurately describe content. It also simplifies the doctype to <!DOCTYPE html>.
2. HTML5 introduces richer built-in form controls without JavaScript like date/time pickers, number sliders, and improved validation.
3. Multimedia is enhanced with <video>, <audio>, and <canvas> elements, allowing native playback of audio/video without plugins and scriptable drawing on <canvas>.
This document discusses how to build web applications using web components. It introduces HTML5 web components standards including templates, imports, shadow DOM, and custom elements. Templates allow cloning document fragments, imports load additional HTML documents, shadow DOM encapsulates DOM parts, and custom elements enable extending or creating custom HTML elements. The document provides examples and demos of each standard and argues that web components enable encapsulation, separation of concerns, and element portability, advancing the capabilities of the web.
2014 03-25 - GDG Nantes - Web Components avec PolymerHoracio Gonzalez
Web Components are a W3C standard for building reusable custom elements with encapsulated styles and markup. They include features like templates for reusable markup, shadow DOM for encapsulation, custom elements for defining new types of elements, and imports for loading elements from external files. Frameworks like Polymer and X-Tags provide polyfills to bring these features to browsers that don't natively support them yet. Web Components allow developers to build encapsulated, reusable custom UI elements and enable new patterns for component-based development.
JavascriptMVC: Another choice of web frameworkAlive Kuo
JavascriptMVC is another client side web MVC framework based on jQuery. It has totally solution to build a web application. This slide will introduce basic features of JavascriptMVC3.2
2016 is going to be the year of Virtual DOM. React.js one of the most popular implementation of Virtual DOM. But this time we won't focus on React.js. We will be focusing on what is the concept of Virtual DOM, what's the benefits, and how to use it without React.js. All of those concepts will help you understand this newest DOM manipulation technique and better work with any Virtual DOM implementations such React.js.
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.
The document discusses best practices for developing high quality JavaScript applications. It recommends leveraging build tools like Grunt and integrating tools for linting, testing, minification and concatenation. Continuous integration with Jenkins is also suggested, as well as using IDEs and editors that support JavaScript. Architectural patterns like modules and design principles are important.
HTML 5 is the latest version of the HTML standard. It includes several new elements and features to improve structure and behavior. Some key changes include new semantic elements like <article>, <aside>, <header>, and <footer>; built-in support for audio and video; the <canvas> element for drawing graphics; and forms with new input types. HTML 5 aims to simplify HTML and separate structure and presentation, making code cleaner and pages more accessible. It is developed jointly by the WHATWG and W3C organizations.
Web Components are like Lego bricks. Easy to assemble and every piece simply fits together. But there is even more to it. Being able to create your own HTML-Tags with encapsulated style & logic changes the way you think about structuring your web applications. Get a sneak peek on how to develop scalable & maintainable applications in the future.
HTML5 and CSS3 provide improvements to building the web. HTML5 introduces more semantic tags that improve accessibility and cleaner code. It also provides native support for video, audio, local storage and better interactions. CSS3 enhances presentation. HTML5 is supported across modern browsers and on mobile, allowing responsive design. New features like canvas and WebGL enable graphic effects. Geolocation allows accessing a user's location with permission. HTML5 aims to make the web platform more powerful and flexible.
Slides of the Magento Fireside Chat March 20th, 2014 with
Fabrizio Branca (@fbrnc)
Bastian Ike (@b_ike)
Daniel Fahlke (@flyingmana)
Rolando Granadino (@beeplogic)
Ben Marks (@benmarks)
This is the presentation I was using when delivering the JavaScript Jump Start meetup on February 14th, 2022. More information about that meetup can be found at https://www.meetup.com/lifemichael/events/278743661/ You can find the video at https://youtu.be/F1e-KHTEKzo
This is the presentation I was using when delivering the free meetup "Node.js Jump Start" (Crash Course). You can find the video at https://www.youtube.com/watch?v=UEVaBHMTLcQ
Deview 2013 mobile browser internals and trends_20131022NAVER D2
The document discusses browser internals and trends related to mobile browsers. It provides an overview of the major rendering engines including WebKit, Blink, and Chromium. It then focuses on specifics of Android's WebView and how it has transitioned to using the Chromium engine. Finally, it describes the multi-process architecture of Chromium which separates rendering and browser components across multiple processes for improved stability.
The document discusses JavaScript and the Document Object Model (DOM). It begins with an introduction to JavaScript, including what it is, examples of basic JavaScript code, and how it is used for client-side scripting. It then covers the DOM and how JavaScript can be used to access and manipulate elements in an HTML document. Finally, it discusses several JavaScript libraries and techniques, including the YUI library and how it can be used for drag-and-drop and animation effects.
JavaScript Advanced - Useful methods to power up your codeLaurence Svekis ✔
Get this Course
https://www.udemy.com/javascript-course-plus/?couponCode=SLIDESHARE
Useful methods and JavaScript code snippets power up your code and make even more happen with it.
This course is perfect for anyone who has fundamental JavaScript experience and wants to move to the next level. Use and apply more advanced code, and do more with JavaScript.
Everything you need to learn more about JavaScript
Source code is included
60+ page Downloadable PDF guide with resources and code snippets
3 Challenges to get you coding try the code
demonstrating useful JavaScript methods that can power up your code and make even more happen with it.
Course lessons will cover
JavaScript Number Methods
JavaScript String Methods
JavaScript Math - including math random
DOMContentLoaded - DOM ready when the document has loaded.
JavaScript Date - Date methods and how to get set and use date.
JavaScript parse and stringify - strings to objects back to strings
JavaScript LocalStorage - store variables in the user browser
JavaScript getBoundingClientRect() - get the dimensions of an element
JavaScript Timers setTimeout() setInterval() requestAnimationFrame() - Run code when you want too
encodeURIComponent - encoding made easy
Regex - so powerful use it to get values from your string
prototype - extend JavaScript objects with customized powers
Try and catch - perfect for error and testing
Fetch xHR requests - bring content in from servers
and more
No libraries, no shortcuts just learning JavaScript making it DYNAMIC and INTERACTIVE web application.
Step by step learning with all steps included.
Angularjs vs Dojo toolkit | SuperSpeaker@CodeCamp Iasi 2014Endava
A quick overview of AngularJS Framework and Dojo Toolkit. Why use them and when? Why use one instead of the other? Strong points and drawbacks! Plus a hands-on example
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.
The document provides an overview of how a browser works by breaking it down into key components and subcomponents. It discusses the user interface, browser engine, rendering engine, networking, JavaScript interpreter, UI backend, data persistence, and web APIs that make up a browser. It then dives deeper into specific subcomponents like the HTML parser, CSS parser, DOM, rendering tree, layout and reflow process, and event loop. The document uses diagrams and examples to illustrate how each component interacts and the main flows and processes involved in rendering web content in the browser.
The document discusses how to integrate jQuery and JavaScript functionality into Ruby on Rails and Merb web applications. Key points include:
- Rails and Merb do not have built-in helpers for jQuery, but jQuery is easy to use and Ruby helpers can be written to support it
- The frameworks produce consistent markup that jQuery code can be written to add interactive behavior to
- Options like metadata can be passed to jQuery plugins via the markup generated by helpers
- Helpers, jQuery code, and techniques like the <base> tag allow JavaScript features to be unobtrusively integrated into the MVC frameworks
Essential Javascript -- A Javascript <b>Tutorial</b>tutorialsruby
Javascript is an interpreted language with C-like syntax that supports object-oriented programming and other advanced concepts. It is approachable for beginners but also powerful. This document provides an overview of Javascript basics like variables, data types, operators, conditional statements, and functions. It also covers Javascript in the browser context, explaining how to add script blocks, work with events, get input from users, and output data to the DOM. Comments are included to document code.
The document contains code snippets from JavaScript courses and projects including:
1. Adding and animating elements on a page using requestAnimationFrame.
2. Using switch statements to output time of day and day of week.
3. Examples of using continue and break in for loops and while loops.
4. Dynamically adding input and div elements and adding keyboard event listeners.
5. Creating and rolling dice using dynamically generated HTML.
6. Creating a modal popup and dynamically updating content.
7. Building a simple counter using requestAnimationFrame.
8. Examples of querying elements and dynamically adding content.
9. Adding click handlers to matching elements using querySelectorAll.
Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011Patrick Lauke
The document discusses the new features of HTML5 including improved semantics, forms, and multimedia capabilities. Some key points:
1. HTML5 adds new semantic elements like <header>, <footer>, <nav> that more accurately describe content. It also simplifies the doctype to <!DOCTYPE html>.
2. HTML5 introduces richer built-in form controls without JavaScript like date/time pickers, number sliders, and improved validation.
3. Multimedia is enhanced with <video>, <audio>, and <canvas> elements, allowing native playback of audio/video without plugins and scriptable drawing on <canvas>.
This document discusses how to build web applications using web components. It introduces HTML5 web components standards including templates, imports, shadow DOM, and custom elements. Templates allow cloning document fragments, imports load additional HTML documents, shadow DOM encapsulates DOM parts, and custom elements enable extending or creating custom HTML elements. The document provides examples and demos of each standard and argues that web components enable encapsulation, separation of concerns, and element portability, advancing the capabilities of the web.
2014 03-25 - GDG Nantes - Web Components avec PolymerHoracio Gonzalez
Web Components are a W3C standard for building reusable custom elements with encapsulated styles and markup. They include features like templates for reusable markup, shadow DOM for encapsulation, custom elements for defining new types of elements, and imports for loading elements from external files. Frameworks like Polymer and X-Tags provide polyfills to bring these features to browsers that don't natively support them yet. Web Components allow developers to build encapsulated, reusable custom UI elements and enable new patterns for component-based development.
Web Components are emerging standards that enable encapsulation, separation of concerns, and element portability. They include templates, imports, shadow DOM, and custom elements. Templates allow instantiating document fragments, imports load additional HTML documents, shadow DOM encapsulates DOM parts, and custom elements extend or create custom HTML elements. While still in development, Web Components aim to componentize the web and take it one step forward.
This document discusses extending the WordPress WYSIWYG editor by creating a TinyMCE plugin called MceHelloWorld. It describes creating a toolbar button that opens a dialog window to input a name, and inserts a placeholder image into the content with the name data. On the page, it prints "Hello, <name>" inside a box by parsing the content and replacing placeholders. Shortcodes are compared to placeholders, which provide a better visual representation of what will display on the page. The plugin files, JavaScript logic, and integration with WordPress are explained in detail.
The document discusses alternatives to using JavaScript frameworks. It argues that modern browsers have improved compatibility and features like templates, imports, and custom elements allow building reusable components without frameworks. It provides examples using these web standards to create a toggle component, demonstrating code organization and reuse benefits without a framework.
HTML is used to define the structure and content of a web page. CSS controls the visual styling and layout of HTML elements, while JavaScript provides interactivity. The document discusses the basic anatomy of a browser and how HTML, CSS, and JavaScript are used together to build web pages. It provides examples of HTML tags and syntax, CSS properties and selectors, and how to insert JavaScript code.
This document provides an overview of Angular.JS and advanced Angular.JS concepts. It discusses bootstrapping an Angular app, the main features of Angular including templating, routing, two-way data binding, directives, and dependency injection. It also covers best practices, testing and tooling, SEO considerations for Angular apps, and whether Angular is suitable for enterprise projects. The presenter then demonstrates a bootstrapped Angular app and provides resources for learning more about Angular.
Angular.JS is a modern Javascript MVC Framework that was built from the ground up by a team of Googlers, sponsored by Google itself. Angular.JS allows web developers a clear separation between logic and view, and greatly improves the ability to reuse the code by using things such as Directives, Services, Components.Angular.JS smart templating engine also allows to minimize the HTML code, During the presentation, you'll learn some medium-advanced usages of Angular.JS, how to use it, tips & tricks that will make your app amazing.
You Can Work on the Web Patform! (GOSIM 2023)Igalia
Have you ever wanted to work on a web browser? Servo is an experimental web
engine written in Rust. Its small code base and friendly community mean that it
is an ideal project for those looking to dip their toes into the world of web
browser engineering.
In this, Martin Robinson covers the basics of building and running
Servo on your own computer. In addition, we'll take a tour of Servo's main
subsystems and see what kind of work goes into building them. Additionally,
we'll cover a variety of types of contributions to Servo, adapted to different
kinds of experience and specialization. By the end you should have the tools
you need to explore contributing yourself.
(c) GOSIM Workshop 2023
Sept 23-24
Grand Hyatt, Pudong, Shanghai
https://workshop2023.gosim.org/
https://www.bilibili.com/video/BV1Hw411r7Q6/
Build Reusable Web Components using HTML5 Web cComponentsGil Fink
This document discusses using HTML5 Web Components to build reusable web components. It introduces several emerging Web Component standards including templates, imports, shadow DOM, and custom elements. Templates allow defining reusable DOM fragments, imports enable bundling HTML, CSS and JavaScript into a single component, shadow DOM provides DOM encapsulation, and custom elements define new semantic elements. While still in draft, Web Components aim to improve code reuse, encapsulation, separation of concerns and composition on the web. The presentation provides examples and demonstrations of each standard.
Reaching for the Future with Web Components and PolymerFITC
Save 10% off ANY FITC event with discount code 'slideshare'
See our upcoming events at www.fitc.ca
OVERVIEW
Web Components allow us to view web applications as a set of encapsulated, maintainable and reusable components, an approach which is necessary for scalability and large applications. However, they rely on the use of emerging web platform features such as the Shadow DOM, HTML Imports and Custom elements, which currently have limited browser support. But thanks to the Polymer project - a set of polyfills and an application framework using these principles – Web Components can be used today. They are bleeding edge, likely to change a bit and simultaneously insanely cool and undeniably useful. Michael Labriola invites attendees to learn how to integrate these pieces into their processes today, to bring sanity and reuse to their worlds as a result.
An understanding of how modern browsers work is essential as it helps in optimizing perfromance and the rendering of each page; be it HTML, CSS or JS.
The session was hosted by Daliya and Sneha, our UI Engineers and members Google's Women Techmakers Trivandrum chapter since it's inception.
Angular provides 3 options for view encapsulation:
1. Emulated (default) - styles are scoped to the component and attributes are added for specificity
2. Native - uses native shadow DOM for full encapsulation where supported
3. None - styles apply globally without encapsulation
The main advantage is fully encapsulated styles that don't clash, keeping CSS clean and organized. Angular emulates shadow DOM for wider browser support by default using attributes, but allows native encapsulation where possible.
The Time for Vanilla Web Components has ArrivedGil Fink
The document discusses the emerging web components standards that enable encapsulation, separation of concerns, and element portability. It covers the main web components APIs including templates, imports, shadow DOM, and custom elements. Templates allow declaring reusable DOM fragments. Imports allow loading additional HTML documents. Shadow DOM encapsulates DOM parts and prevents style leakage. Custom elements enable extending or creating custom HTML elements. While browser support is still developing, web components offer powerful tools for building reusable components in a standardized way.
Monster JavaScript Course - 50+ projects and applicationsLaurence Svekis ✔
Get this Course
https://www.udemy.com/javascript-course-projects/?couponCode=SLIDESHARE
Portfolio builder loaded with projects and applications that you can use, extend on and enhance to add to your portfolio
JUST GOT BIGGER - more updates to come - YOU FOUND IT
Grow your portfolio - showcase what you can build with JavaScript
Learn JavaScript have fun with interactive and dynamic web applications.
Over 529 downloadable resources - 57 articles - 43+ hours on-demand video, 57 Sections
Over 614 HD video lessons
Over 51+ projects and web applications. Projects can be used as started projects to extend and enhance. All JavaScript focused.
4 downloadable ebook guides 200 pages and 3 x 60 pages - with code and resource links
No libraries JUST JAVASCRIPT and JAVASCRIPT DOM
This is the course you've been looking for..........
Everything you need to get started with JavaScript, expand your knowledge about using JavaScript, and more included.
It’s arrived, and bigger than expected!!!
For anyone who wants to supercharge their JavaScript learning - building and applying JavaScript to over 50 projects and challenges… this course is for YOU!!!!
From JavaScript beginners to all levels, course is presented in a fun interactive format that will challenge you. Move through the lessons of the course as you want to learn them, variety of ways to benefit from it. Learn alongside, try before you see the solution, try after you view the solution. It’s up to you! Unique format for learning encouraging you to try the code. Of course source code is included in every step of the way.
Most often asked for ARE PROJECTS - and this course delivers! Over 50 and will grow over time as more projects and challenges get added. You can select the projects you want to do or take them in order, it’s up to you.
Loaded with games and so many mini projects guaranteed to help you learn more about JavaScript and DOM manipulation. All JavaScript code no libraries or short cuts.
Explore how to apply JavaScript to create interactive and dynamic web content - that will impress your friends.
Extend on the projects and add them to your portfolio, to showcase skills you have learned.
Useful real world projects coded with simple JavaScript for developers of all levels.
No better way to learn than to try the code and produce something fun and useful with it. Learn to create amazing things with JavaScript bringing your web content to life.
This will keep you busy and provide you the opportunity to learn and experiment with code. Try it. All the projects are designed in a starter type format so that you can build on them and customize to make it your own.
Portfolio Builder 50+ projects
This course includes full introduction to coding with JavaScript, all core syntax and how to apply it to make things happen. Create your own code - loaded with challenges and code snippets.
Developing Custom WordPress Themes for ClientsSteven Slack
Should you develop custom themes for clients? When is it necessary? Why should you build custom themes for clients? Things that will be covered in this talk include, starting a theme from scratch, theme boilerplates, working with clients through the process, cost, performance, properly planning theme architecture around clients content, integrating with plugins and custom plugins, presentation vs functionality, updates and maintenance, shipping and installing the theme, training clients, populating site with content, and getting paid!!
The document summarizes an upcoming presentation on HTML5 and PHP. It lists the group members and covers the following topics in the presentation agenda: HTML5 elements like Canvas, SVG, drag/drop, geo-location, video, audio; PHP syntax, variables, and strings; and differences between SVG and Canvas. It provides code examples and explanations for several HTML5 elements and features including Canvas, SVG, drag/drop, geo-location, video, audio, and form handling.
The document provides an introduction to web technologies including HTML, CSS, and JavaScript. It explains that HTML is used to define the structure and content of a web page, CSS is used to control the visual styling and layout, and JavaScript is used for interactivity. It also provides overviews of topics like the anatomy of a browser, HTML tags and syntax, CSS properties and selectors, and how to start developing and testing web pages locally.
Introduction to HTML+CSS+Javascript.pptxAliRaza899305
The document provides an introduction to HTML, CSS, and JavaScript for developing web technologies. It discusses how HTML is used to define the structure and content of a web page, CSS is used to control the visual styling of web pages, and JavaScript is used to add interactivity. It also provides examples of basic HTML tags and syntax, CSS properties and selectors, and how to insert JavaScript code. Finally, it summarizes some of the main capabilities and APIs available in JavaScript.
The theme of your website has the capacity for beautiful, semantic markup...and also the hacky HTML soup. You can build a new theme by downloading a free theme and tearing out its guts--or you can learn how to become a theme surgeon.
In this session you will learn two key techniques needed to build a successful theme: crime scene investigation (identifying Drupal page elements in your design files) and power tools for copy-cat theming (things you need to recreate your design using Drupal). From start to finish we will transform a design file into a Drupal theme. With special attention given to your all-important questions: how do I save time with grid-based design? Should I use Panels? How do I make this bit of stuff appear next to that bit? Yah, but how do I start?
[This presentation was given at DrupalCon Chicago but the recording failed. Slides are available from http://www.slideshare.net/emmajane/forensic-theming-for-drupal]
About The Presenter
Emma Jane Hogbin is well known in the Drupal community for her engaging presentations and kickass theming book, Front End Drupal. She is currently working on her second book, Drupal: A user's guide which is due out shortly after DrupalCon. Through her training company, Design to Theme, emmajane has empowered thousands of people to create the Drupal site of their dreams.
Intended audience
Small business site builders who partner with graphic designers but have no idea how to make Drupal look like a design file. Intermediate themers who start with a free Drupal theme that looks "close" to the final site and then start hacking to make their theme. The audience currently does not use base themes and are frustrated at how complicated all of the code is. They are looking for shortcuts and some quick-fix solutions to make theming faster and more profitable.
Questions answered by this session
What are the key tools I need to use to make themeing Drupal easier?
How can I make Drupal markup less yucky?
Where should I start when building a new theme?
Yeah, but how do I theme *that thing*?
I want to see how you build a theme: show me!
Presented at: http://london2011.drupal.org/conference/sessions/forensic-theming-key-techniques-building-effective-drupal-themes
Similar to ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 3/3 - Web Components avec Polymer (20)
Il n'y a pas que Polymer dans la vie… - RennesJS - 2017-06-27Horacio Gonzalez
Polymer par-ci, Polymer par-là, c'est bien beau de voir tout ce qu'on peut faire avec cette bibliothèque…
Mais à la base le discours qu'on nous vend depuis des années est celui des Web Components, des briques modulaires et interopérables, suivant un standard et pouvant être mélangés comme on le souhaite pour construire des webapp comme si on faisait du LEGO.
Alors, il n'est pas contradictoire de militer pour les Web Components et d'utiliser Polymer ?
Ben, pas du tout ! Polymer, surtout depuis la sortie de Polymer 2, n'est qu'une surcouche de sucre syntactique au dessus du standard Web Components, et les éléments créés avec Polymer sont bel et bien des Web Components standard.
De la même façon, il y a plein d'autres bibliothèques de Web Components qui ont un rôle semblable : SkateJS, SlimJS, BramJS... Chacune orientée vers une sensibilité et une façon de coder. Et bien entendu, les éléments créés avec eux se mélangent sans soucis, car ils suivent tous le même standard.
Dans ce talk nous allons voir comment ces éléments Polymer sont construits à partir du standard web components, voir ce côté sucre syntactique et comprendre ce qu'ils apportent. Ensuite on verra rapidement les bases de SkateJS et de SlimJS pour finir par prouver l'intéropérabilité avec une petite application qui mélange du Web Component standard, du Polymer, du SkateJS et du SlimJS.
But there is no web component for that - Web Components Remote Conference - 2...Horacio Gonzalez
This document discusses componentalizing JavaScript libraries to create web components. It provides examples of componentalizing QR code generation and scanning libraries. To componentalize a library, the author defines inputs, outputs, a template, and wires the library to these. Issues may arise that require debugging and even patching the library. The goal is to encapsulate third party code into reusable custom elements.
Mixité dans le monde des WebComponents - DevFest Toulouse - 2017-09-27Horacio Gonzalez
The document is a transcript of a talk given by Horacio Gonzalez and Cyril Balit on using web components across different frameworks. They discuss how they have previously talked about Polymer and web components individually. For this talk, they wanted to demonstrate using web components from different libraries (like Polymer) in various web application frameworks. They give a demo mixing web components from different libraries in applications built with different frameworks. They conclude that with web components standards, elements can be freely mixed and matched across frameworks.
Battle of Frameworks: Polymer - Meetup Paris Web Components - 2016-09Horacio Gonzalez
The Paris Web Components Meetup proposed a session to compare several component-oriented frameworks, where each speaker made the case of his or her favorite framework and showed the implementation of the same webapp done with the chosen framework. I did the Polymer presentation.
Mixing Web Components - Best of Web Paris - 2016 06-09Horacio Gonzalez
Ah, les web components, quelle belle idée ! Du développement web basé enfin sur une vraie architecture en composants, de la réutilisation, de la modularisation, de l'encapsulation… Mais en attendant que le W3C décide de sortir le standard, ce qu'on a dans les mains c'est une panoplie de bibliothèques de polyfills : Polymer, X-Tag, Bosomic…
Dans ce talk nous allos répondre à la question : "OK, le futur sera beau, mais aujourd'hui, si je fais des composants avec une bibliothèque X et mon pote en fait avec une bibliothèque Y, je peux les utiliser dans la même application ? Et ils marcheront dans mon framework favori ?".
Polymer in the real life - Devoxx France - 2016 04-20Horacio Gonzalez
In the last two years I've been speaking a lot about web components and Polymer in conferences and user-groups, sharing a vision of the upcoming web-component revolution. But after these introductory talks I often got the same question: "that seems great... but does it works in Real Life?" Ah, the pesky real life question...
In this talk I'm going to tackle that question in the best way I know: I'm going to tell you my experience of almost two full years web applications with Polymer in the real life, for real projects in a real enterprise with real costumers, and all the lessons I've learnt from it.
You will heard why did I choose Polymer, how I dealt with the 0.x versions lifecycle, the good points and the bad ones too, how I did integrate lots of 3rd part libs into a component architecture and how now I'm able to create full fledge Progressive Web Apps using Polymer in a simple way without having to deal with the complexity of Angular/React/Whatever JS, but also how to integrate your components into those frameworks if needed.
Warp10: collect, store and manipulate sensor data - BreizhCamp - 2016 03-24 Horacio Gonzalez
This document discusses Warp 10, a software platform for collecting, storing, and analyzing sensor and IoT data. Warp 10 can ingest large amounts of time series and geo-time series data from sensors and other sources. It provides tools for storing, manipulating, and analyzing the data using the WarpScript language. Examples demonstrate how to calculate averages and find the closest fuel station using geo-time series data on fuel prices in France.
ENIB 2015 2016 - CAI Web S02E03- Forge JS 1/4 - La forge JavaScriptHoracio Gonzalez
The document discusses JavaScript forge tools like npm, Bower, Grunt and Yeoman that allow developers to manage dependencies, build processes, and more for front-end development. It explains that npm is used to install front-end build tools and serves as the base for building a JavaScript forge. Bower is introduced as a package manager for installing web libraries and their dependencies. The benefits of using Bower and other tools via a bower.json file to define project dependencies are also covered.
ENIB 2015 2016 - CAI Web S02E03 - Forge JS 2/4 - MongoDB and NoSQLHoracio Gonzalez
This document provides an introduction and overview of MongoDB and how to use it. Some key points:
- MongoDB is an open-source document database that provides high performance, high availability, and automatic scaling. It uses documents (similar to JSON objects) rather than tables and rows.
- Documents are stored in collections without a predefined schema. Fields can be added, modified or deleted at any time.
- Common operations include inserting, querying, updating, and removing documents from collections. Queries can use filters, projections, sorting, skips, limits, and regular expressions.
- MongoDB is flexible compared to relational databases as schemas are not rigidly defined. It is suitable for high performance applications that need
ENIB 2015-2016 - CAI Web - S01E01- MongoDB and NoSQLHoracio Gonzalez
This document provides an introduction and overview of MongoDB and NoSQL databases. It discusses key MongoDB concepts like document databases, collections and documents. It also covers how to install and run MongoDB, insert and query data, and use common operations. Some examples show how to create indexes, use JavaScript and regex queries. Exercises at the end propose practicing installing MongoDB, creating a collection and querying data.
Mixing Web Components - Paris Web Components - 2015 09-16 Horacio Gonzalez
The W3C has been working on a Web Components standard for almost three years, but it is still a work in progress. But polyfills like allows current developers to use Web Components today, and incorporate to their apps widgets from any library of web components.
The best known of these libraries is Polymer, but it isn't the only one. In this talk we are going to compare Polymer, the '800 lb gorilla' in the Web Component field, with several of its lesser known competitors: Mozilla's X-Tags and Briks, and Bosonic, and even homemade ReactJS webcomponents
We will build an Angular JS application where, instead of directives, we will use webcomponents done with Polymer, X-Tag and ReactJS. And we will take a look to the performances in both Chrome and Firefox.
La Cantine Numérique Brestoise, le GDG Finistère et le FinistJUG proposent une séance d’initiation à la création création d’application mobile sous Android.
Ca fait des mois que vous voulez vous mettre au développement Android. Vous avez regardé la doc, vous avez même téléchargé le SDK, vous avez peut-être même fait un HelloWorld, vous vous êtes dit que ça a l’air facile… mais vous n’êtes jamais allé jusqu’à développer une application avec. Manque de temps, plein d’autres choses à faire, manque de motivation pour démarrer. Car il faut reconnaître que se mettre au développement sur une nouvelle plate-forme tout seul dans son coin n’est pas évident, surtout quand la vraie vie s’en mêle.
Alors pourquoi pas vous réserver une journée pour franchir le cap et vous mettre pour de vrai au développement sur Android ?
Ce Bootcamp Android est l’opportunité pour le faire. Vous arrivez le matin équipés d’un ordinateur portable, avec Eclipse/Android Studio et une JVM pré-installés et vous partirez en fin d’après-midi en ayant développé une petite application Android et plus important encore, en ayant intégré les principes basiques du développement sur cette plate-forme.
Le Bootcamp Android est une introduction accélérée et pratique au développement Android. Vous allez apprendre, vous allez mettre les mains dans le cambouis, vous allez coder, vous allez enfin cocher la case Apprendre à coder sur Android dans votre ToDo-list.
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.
Introducing Milvus Lite: Easy-to-Install, Easy-to-Use vector database for you...Zilliz
Join us to introduce Milvus Lite, a vector database that can run on notebooks and laptops, share the same API with Milvus, and integrate with every popular GenAI framework. This webinar is perfect for developers seeking easy-to-use, well-integrated vector databases for their GenAI apps.
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024Neo4j
Neha Bajwa, Vice President of Product Marketing, Neo4j
Join us as we explore breakthrough innovations enabled by interconnected data and AI. Discover firsthand how organizations use relationships in data to uncover contextual insights and solve our most pressing challenges – from optimizing supply chains, detecting fraud, and improving customer experiences to accelerating drug discoveries.
Building RAG with self-deployed Milvus vector database and Snowpark Container...Zilliz
This talk will give hands-on advice on building RAG applications with an open-source Milvus database deployed as a docker container. We will also introduce the integration of Milvus with Snowpark Container Services.
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?Speck&Tech
ABSTRACT: A prima vista, un mattoncino Lego e la backdoor XZ potrebbero avere in comune il fatto di essere entrambi blocchi di costruzione, o dipendenze di progetti creativi e software. La realtà è che un mattoncino Lego e il caso della backdoor XZ hanno molto di più di tutto ciò in comune.
Partecipate alla presentazione per immergervi in una storia di interoperabilità, standard e formati aperti, per poi discutere del ruolo importante che i contributori hanno in una comunità open source sostenibile.
BIO: Sostenitrice del software libero e dei formati standard e aperti. È stata un membro attivo dei progetti Fedora e openSUSE e ha co-fondato l'Associazione LibreItalia dove è stata coinvolta in diversi eventi, migrazioni e formazione relativi a LibreOffice. In precedenza ha lavorato a migrazioni e corsi di formazione su LibreOffice per diverse amministrazioni pubbliche e privati. Da gennaio 2020 lavora in SUSE come Software Release Engineer per Uyuni e SUSE Manager e quando non segue la sua passione per i computer e per Geeko coltiva la sua curiosità per l'astronomia (da cui deriva il suo nickname deneb_alpha).
Unlocking Productivity: Leveraging the Potential of Copilot in Microsoft 365, a presentation by Christoforos Vlachos, Senior Solutions Manager – Modern Workplace, Uni Systems
Communications Mining Series - Zero to Hero - Session 1DianaGray10
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
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...James Anderson
Effective Application Security in Software Delivery lifecycle using Deployment Firewall and DBOM
The modern software delivery process (or the CI/CD process) includes many tools, distributed teams, open-source code, and cloud platforms. Constant focus on speed to release software to market, along with the traditional slow and manual security checks has caused gaps in continuous security as an important piece in the software supply chain. Today organizations feel more susceptible to external and internal cyber threats due to the vast attack surface in their applications supply chain and the lack of end-to-end governance and risk management.
The software team must secure its software delivery process to avoid vulnerability and security breaches. This needs to be achieved with existing tool chains and without extensive rework of the delivery processes. This talk will present strategies and techniques for providing visibility into the true risk of the existing vulnerabilities, preventing the introduction of security issues in the software, resolving vulnerabilities in production environments quickly, and capturing the deployment bill of materials (DBOM).
Speakers:
Bob Boule
Robert Boule is a technology enthusiast with PASSION for technology and making things work along with a knack for helping others understand how things work. He comes with around 20 years of solution engineering experience in application security, software continuous delivery, and SaaS platforms. He is known for his dynamic presentations in CI/CD and application security integrated in software delivery lifecycle.
Gopinath Rebala
Gopinath Rebala is the CTO of OpsMx, where he has overall responsibility for the machine learning and data processing architectures for Secure Software Delivery. Gopi also has a strong connection with our customers, leading design and architecture for strategic implementations. Gopi is a frequent speaker and well-known leader in continuous delivery and integrating security into software delivery.
Pushing the limits of ePRTC: 100ns holdover for 100 daysAdtran
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.
Full-RAG: A modern architecture for hyper-personalizationZilliz
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.
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.
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc
How does your privacy program stack up against your peers? What challenges are privacy teams tackling and prioritizing in 2024?
In the fifth annual Global Privacy Benchmarks Survey, we asked over 1,800 global privacy professionals and business executives to share their perspectives on the current state of privacy inside and outside of their organizations. This year’s report focused on emerging areas of importance for privacy and compliance professionals, including considerations and implications of Artificial Intelligence (AI) technologies, building brand trust, and different approaches for achieving higher privacy competence scores.
See how organizational priorities and strategic approaches to data security and privacy are evolving around the globe.
This webinar will review:
- The top 10 privacy insights from the fifth annual Global Privacy Benchmarks Survey
- The top challenges for privacy leaders, practitioners, and organizations in 2024
- Key themes to consider in developing and maintaining your privacy program
“An Outlook of the Ongoing and Future Relationship between Blockchain Technologies and Process-aware Information Systems.” Invited talk at the joint workshop on Blockchain for Information Systems (BC4IS) and Blockchain for Trusted Data Sharing (B4TDS), co-located with with the 36th International Conference on Advanced Information Systems Engineering (CAiSE), 3 June 2024, Limassol, Cyprus.
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdfPaige Cruz
Monitoring and observability aren’t traditionally found in software curriculums and many of us cobble this knowledge together from whatever vendor or ecosystem we were first introduced to and whatever is a part of your current company’s observability stack.
While the dev and ops silo continues to crumble….many organizations still relegate monitoring & observability as the purview of ops, infra and SRE teams. This is a mistake - achieving a highly observable system requires collaboration up and down the stack.
I, a former op, would like to extend an invitation to all application developers to join the observability party will share these foundational concepts to build on:
UiPath Test Automation using UiPath Test Suite series, part 5DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 5. In this session, we will cover CI/CD with devops.
Topics covered:
CI/CD with in UiPath
End-to-end overview of CI/CD pipeline with Azure devops
Speaker:
Lyndsey Byblow, Test Suite Sales Engineer @ UiPath, Inc.
Removing Uninteresting Bytes in Software FuzzingAftab Hussain
Imagine a world where software fuzzing, the process of mutating bytes in test seeds to uncover hidden and erroneous program behaviors, becomes faster and more effective. A lot depends on the initial seeds, which can significantly dictate the trajectory of a fuzzing campaign, particularly in terms of how long it takes to uncover interesting behaviour in your code. We introduce DIAR, a technique designed to speedup fuzzing campaigns by pinpointing and eliminating those uninteresting bytes in the seeds. Picture this: instead of wasting valuable resources on meaningless mutations in large, bloated seeds, DIAR removes the unnecessary bytes, streamlining the entire process.
In this work, we equipped AFL, a popular fuzzer, with DIAR and examined two critical Linux libraries -- Libxml's xmllint, a tool for parsing xml documents, and Binutil's readelf, an essential debugging and security analysis command-line tool used to display detailed information about ELF (Executable and Linkable Format). Our preliminary results show that AFL+DIAR does not only discover new paths more quickly but also achieves higher coverage overall. This work thus showcases how starting with lean and optimized seeds can lead to faster, more comprehensive fuzzing campaigns -- and DIAR helps you find such seeds.
- These are slides of the talk given at IEEE International Conference on Software Testing Verification and Validation Workshop, ICSTW 2022.
2. Description du module
● Côté navigateur
○ HTML5 / CSS / JS - Polymer
● Côté serveur - Concepts
○ Introduction à JEE : servlets, JSP, frameworks… - SparkJava
● Forge JavaScript
○ Une forge logicielle pour JavaScript : Grunt/Gulp, Bower, Yeoman
● Côté serveur - NodeJS
○ NodeJS, ExpressJS, APIs
● Écosystème de la webapp
○ Introduction à NoSQL : MongoDB, Redis, Cassandra…
● Autour de la webapp
○ Forge logicielle en Java - Test-driven development
● Examen et exposées des projets
4. Warning : I’m a web developer
And when I tell stories, I do it from the webdev POV
So please, thick-client devs, allow me some oversimplifications
Image : TylkoMrok.pl
5. At the beginning we had the thick
client
● Widget : basic building blocks of your UI
○ Encapsulation
○ Reutilisation
In thick client you create your UI by
assembling widgets
Image : Wikipedia
6. Web development was unlike thick-
client
● HTML/CSS/JS didn't support widgets
○ Pages were the building blocks
Web apps were page oriented
Image : IBM
7. GWT gave back widgets to web devs
● GWT used a thick-client-like development paradigm
○ Widgets, properties, events
GWT web apps were widget oriented :
Single-page apps
Image : GWT Mail sample app
8. Single-page apps are a current trend
● From UX POV single-page apps are richer
○ But making them without widgets is risky and difficult
HTML/CSS/JS needed a widget standard
Image : Ken Schultz comedy juggler
10. Example : the Google+ button
● If you want to place a Google+ button in your page
<!-- Place this tag where you want the +1 button to render. -->
<div class="g-plusone" data-annotation="inline" data-width="300"
></div>
<!-- Place this tag after the last +1 button tag. -->
<script type="text/javascript">
(function() {
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
</script>
11. Example : the Google+ button
● And what I would like is simple
<g:plusone></g:plusone>
12. Example : the Google+ button
● To be fair, Google already makes it simpler
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
</script>...
<g:plusone></g:plusone>
● They create directives with JS to emulate components
○ AngularJS approach
○ Respecting the spirit of the future standard
○ Working in current browsers
Totally non standard...
13. Another example : the RIB
● If you're French, you know what a RIB is
○ A banking account identification number
● To show a RIB in HTML:
○ All styling & surface control must be done elsewhere by CSS and JS
● What I would like
○ A semantic tag
○ With encapsulated styling and surface controlling
<div class="rib">58496 87451 00014500269 74</div>
<x-rib banque="58496" guichet="87451" compte="00014500269" cle="74" />
14. But we already can do that!
● In most modern frameworks we can already do
components, in a way or another
○ And all those ways are different!
○ Using different JavaScript libraries
○ Almost no component sharing between frameworks
● W3C's works aim to make a standard way
○ Supported natively by all browsers
○ Allowing for component reuse
15. Web Components : a W3C standard
● Web Components standard is being worked at W3C
○ We all know what this means
■ Clue : HTML5
They will work for years, bickering and fighting
Browsers and devs will use the WiP document
16. The 4 pillars of the Web Components
● Templates
● Shadow DOM
● Custom Elements
● Imports
18. Templates before <template>
● How did we do templating before
○ Using display:none or hidden
○ Putting it inside a script
■ Type unknown to browser, it isn't interpreted
■ Markup easily recovered via .innerHTML and reused
■ Approach used by many template engines
<div id="commentTemplate" class="comment" hidden>
<img src=""> <div class="comment-text"></div>
</div>
<script id="commentTemplate" type="text/template">
<div class="comment">
<img src=""> <div class="comment-text"></div>
</div>
</script>
19. ● Uniformising those approach with a new tag
● Content inside the tag is parsed but not interpreted
○ HTML not shown
○ Resources are not loaded
○ Scripts not executed
The <template> tag
<template id="commentTemplate">
<div>
<img src="">
<div class="comment-text"></div>
</div>
</template>
20. Template instantiation
● Create the elements in page by cloning the template
<template id="commentTemplate">
<div class="comment">
<img src=""> <div class="comment-text"></div>
</div>
</template>
<script>
function addComment(imageUrl, text) {
var t = document.querySelector("#commentTemplate");
var comment = t.content.cloneNode(true);
// Populate content.
comment.querySelector('img').src = imageUrl;
comment.querySelector('.comment-text').textContent = text;
document.body.appendChild(comment);
}
</script>
22. Encapsulation
● Each component should have
○ Public interface
○ Private inner code
● When using a component
○ You manipulate the interface only
○ You don't need to know anything about inner code
○ No conflict between inner code and outside code
24. Your browser cheats on you
● Considerer this simple slider
○ How does the browser deal with it?
■ With HTML, CSS and JS!
○ It has a movable element, I can recover it's position
■ Why cannot see it in DOM tree?
Browsers hide DOM sub-trees for standard components
They have a public interface and hidden inner code
That's Shadow DOM!
<input id="foo" type="range">
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
</video>
25. My name is DOM, Shadow DOM
● Shadow DOM: ability of the browser to
○ Include a DOM subtree into the rendering
○ But not into the main document DOM tree
● In Chome you can see the Shadow DOM
○ By activating the option in Inspector
27. Shadow DOM is already here
● Browser use it everyday...
○ For their inner needs
○ Not exposed to developers
● Web Components makes Shadow DOM available
○ You can use it for your own components
Image: Springfield Punx
28. Using Shadow DOM
● There is a host element
○ A normal element in DOM tree
● A shadow root is associated
to the host
○ Using the createShadowRoot method
○ The shadow root is the root of the hidden
DOM tree
Image: W3C
29. Using Shadow DOM
● Quick and dirty Shadow DOM
○ DOM tree only shows
<div id="emptyHost"></div>
○ Rendered HTML shows
Not empty anymore!
○ Markup in innerHTML is ugly
<div id="emptyHost"></div>
<script>
var host = document.querySelector('#emptyHost');
var root = host.createShadowRoot();
root.innerHTML = "<h1>Not empty anymore!</h4>";
</script>
30. Using Shadow DOM
● Shadow DOM with templates
<div id="emptyHost"></div>
<template id="commentTemplate"> [...] </template>
<script>
var host = document.querySelector('#emptyHost');
var shadowRoot = host.webkitCreateShadowRoot();
function addComment(imageUrl, text) { [...] }
function addShadowedElement() {
var instanceTemplate =
addComment("http://lostinbrittany.org/avatar.png",
"This is a nice comment made by a nice guy");
shadowRoot.appendChild(instanceTemplate);
}
</script>
31. ● CSS defined in the Shadow DOM remains there
● Outside styles don't affect Shadowed content
This is a title
And this is widget title
Widget content here
Shadow DOM et CSS
<h1>This is a title</h1>
<div id="widget">
#document-fragment
<style>
div {border: solid 1px red;}
h1 {color: blue;}
</style>
<h1>And this is widget title</h1>
<div>Widget content here</div>
</div>
32. Shadow DOM et CSS
● Styling the host element : @host
<template id="template">
<style>
@host {
button { border-radius: 5px; }
}
</style>
<content></content>
</template>
<button id="host">My Button</button>
<script>
var host = document.querySelector('#host');
var root = host.createShadowRoot();
var shadowContent =
document.querySelector("#template").content.cloneNode(true);
root.appendChild(shadowContent);
</script>
My Button
35. Custom elements : the HTML side
● An element encloses template, lifecycle and behaviour
○ Templates done with <template> tag
<!-- Template Definition -->
<template id="template">
<style>
...
</style>
<div id="container">
<img src="http://webcomponents.org/img/logo.svg">
<content select="h1"></content>
</div>
</template>
<!-- Custom Element usage -->
<x-component>
<h1>This is Custom Element</h1>
</x-component>
36. Custom elements: the JavaScript side
● An element encloses template, lifecycle and behaviour
○ JavaScript to define behaviour and register the element
var proto = Object.create(HTMLElement.prototype);
proto.createdCallback = function() {
// Adding a Shadow DOM
var root = this.createShadowRoot();
// Adding a template
var template = document.querySelector('#template');
var clone = document.importNode(template.content, true);
root.appendChild(clone);
}
var XComponent = document.registerElement('x-component', {
prototype: proto
});
37. Extending other elements
● To create element A that extends element B,
element A must inherit the prototype of element B
var MegaButton = document.registerElement('mega-button', {
prototype: Object.create(HTMLButtonElement.prototype),
extends: 'button'
});
39. ● Custom elements can be loaded from external files
○ Using the link tag:
○ Only <decorator> and <element> are interpreted
○ The DOM of this document is available to script
○ Documents are retrieved according to cross-origin policies
Imports
<link rel="import" href="goodies.html">
40. Can I use?
Image: Christoph Hauf
If not, why are you telling us all this sh*t?
44. ● A Google project
○ Introduced in Google I/O 2013
○ New type of library for the web
○ Built on top of Web Components
○ Designed to leverage the evolving web platform
Version 1.0 released at Google IO 2015
Oh yeah!
Polymer
45. ● What does it means ?
○ Polymer is comprised of two efforts :
■ A paper platform to give Web Component
capabilities to modern browsers
● Shims for all modern browsers
● Shared with Mozilla x-tag project
■ A next-generation web framework built upon
this core platform
● Called Polymer Elements
Polymer
48. ● Principes:
○ Everything is a component
■ Encapsulation is needed for a component oriented application
○ Extreme pragmatism
■ Boilerplate is bad
■ Anything repetitive should be re-factored into a component
● Handled by Polymer itself or
● Added into the browser platform itself
Polymer
49. ● Principes:
○ Salt to taste
■ Use as much or as little of the framework as you wish.
● You want polyfills only :
load polymer-all/platform/platform.js
● You want extra bits :
load polymer-all/polymer/polymer.js
○ Polymer elements
Polymer
50. ● Platform technologies are already functional
○ You can use it to add templates, shadow DOM, custom elements and
imports to your app
● Lots of examples in the site
Polymer
51. ● X-Tag is a small JavaScript library
○ created and supported by Mozilla
○ that brings Web Components capabilities
○ to all modern browsers
● Polymer vs X-Tag?
○ Different features and approaches
○ Mozilla and Google are collaborating
■ building the shared polyfills platform
What about X-Tag?
52. ● AngularJS directives allow to create custom elements
○ Same spirit, different implementation
And AngularJS?
<!doctype html>
<html>
<head>
<title>Directive Test</title>
<script type="text/javascript" src="jquery.min.js" ></script>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="mydirectives.js"></script>
</head>
<body ng-app>
<div test-elem></div>
</body>
</html>
55. Step 2 - Use an element
<!-- 1. Polyfill Web Components support for older browsers -->
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"
></script>
<!-- 2. Import element -->
<link rel="import" href="bower_components/google-map/google-map.html">
<!-- 3. Use element -->
<google-map latitude="47.205403" longitude="-1.5631069" zoom="17"></google-map>
56. Step-3.1 : define an element
<dom-module name="x-web2day">
<template>
<style>
@host { /*...*/ }
</style>
<div id="box">
<h1>Bonsoir web2day !</h1>
<p><content></content></p>
</div>
</template>
</dom-module>
<script>
Polymer({ is: 'x-web2day'});
</script>
57. Step-3.2 : load Polymer, import your
element
<!DOCTYPE html>
<html>
<head>
<!-- 1. Load Polymer -->
<script src="bower_components/webcomponentsjs/webcomponents.js">
</script>
<!-- 2. Load a component -->
<link rel="import" href="x-web2day.html">
</head>
<body>
<!-- 3. Declare the component by its tag. -->
<x-web2day>Et je peux mettre mon texte ici
</x-web2day>
</body>
</html>
67. Android Lollipop's look & feel
Material Design is a visual language that synthesizes the classic principles of good
design with the innovation and possibility of technology and science
It'slike
a
flat
design,butin
3D!
Nicevisualeffects!
68. Material Design
Visual language joining good design with technical innovation to
create an unified experience across platforms and device sizes
Responsive!
Responsive!
73. Elements are configurable
<paper-header-panel mode=“scroll” flex>
<paper-toolbar>
<paper-icon-button icon=“menu">
</paper-icon-button>
<div>I/O 2014</div>
</paper-toolbar>
<div class=“content”>…</div>
</paper-header-panel>
Toolbar will scroll with the page
74. Responsivity from the beginning
<paper-drawer-panel>
<div drawer>
Drawer panel…
</div>
<div main>
Main panel...
</div>
</paper-drawer-panel>
86. You want to know more?
● W3C's Introduction to Web Components
● HTML5 Rocks' Shadow DOM 101 & HTML5 Rocks' Shadow DOM 201: CSS
● WebComponents.org's Introduction to Shadow DOM
● Polymer, X-Tags, Mozilla Brick
● MutationObserver & Object.observe