This document discusses strategies for making CSS more scalable and maintainable. It recommends automating CSS with preprocessors, using clear and descriptive class names, avoiding descendant selectors when possible, and minimizing unnecessary nesting and complexity. Pseudoselectors should only be used when other options aren't available. Overall, the document emphasizes writing CSS according to first principles of maintainability, predictability and avoiding premature optimization.
For a presentation given to the Angular DC Meetup on 3/19/14. (http://www.meetup.com/AngularJS-DC/events/169813802/) Part 2 of the "Angular from Scratch" series. Find part one at http://christianlilley.wordpress.com/2013/11/15/angular-from-scratch-slides-from-angularjs-meetup-dc/ . Find the accompanying demonstration files at https://github.com/xmlilley/ng-demos.
The document discusses Angular directives. It defines directives as logic and behavior for the UI that can handle tasks like event handling, template insertion, and data binding. Directives are not where jQuery code goes. The key principles of directives are that they are declarative and model-driven, modular and reusable across contexts by keeping their logic local. The document provides examples of creating a basic directive using a configuration object with a link function, and covers topics like naming conventions, templates, and the restrict and replace properties.
1. Angular starts processing directives on the DOM when it is ready, calling compile functions to run code before child elements.
2. It then calls link functions, traversing back up the DOM to guarantee child element functions run before parents.
3. The compile pre-link function allows running code before child elements, while post-link runs after them.
The document summarizes new features and changes to the jQuery event system in version 1.7. Key points include:
- The .on() and .off() methods were introduced to unify event binding, removing confusion from multiple older methods. This improves performance and reduces code size.
- Event delegation was optimized through "quickIs()" to speed up selector matching, improving delegation performance by 2-4x in most browsers.
- Existing event bugs were fixed and the system was overhauled to make events more "hookable" and extensible.
Getting the Most Out of jQuery Widgetsvelveeta_512
The document discusses strategies for building modular widgets in jQuery. It recommends thinking of widgets as small, decoupled components that communicate through events. Components should subscribe to and respond to events from other components, with references only going downward between layers. Each layer consumes events from lower layers and publishes events upward. The document also recommends decorating widget functions to add logging or other functionality.
This document discusses the pros and cons of using the JavaScript library Backbone.js versus building a full-featured framework. It notes that while Backbone.js is only a code organizer and light library, developers want features of a full framework like session management and validation. Building a custom framework from scratch takes a lot of time and effort and is only 1/26 of what is needed for a real application. Frameworks like ExtJS provide more out of the box for less work than rolling one's own solution. The document advocates using Backbone.js and accepting its limitations rather than trying to re-invent the wheel by developing a full custom framework.
Last year, AOL adopted a new content strategy and has positioned itself as a premier destination for original content. Core to this strategy is having reusable, highly efficient and optimized common code and experiences at scale, which is where jQuery comes in. Check in with Dave Artz to see how jQuery has helped his front-end standards team tackle unique challenges like optimizing 3rd party widget performance, overriding plugin functionality, and managing dependencies and updates across 100+ sites spanning multiple back-end platforms.
This document discusses React components and their anatomy. It shows how a basic ActionButton component is defined and rendered, then how multiple ActionButton components are used in a Counter component to increment and decrement a count. It explains that React uses components instead of templates for separation of concerns. It also discusses how React re-renders on every state change rather than using two-way data binding, and how the virtual DOM enables efficient re-renders.
For a presentation given to the Angular DC Meetup on 3/19/14. (http://www.meetup.com/AngularJS-DC/events/169813802/) Part 2 of the "Angular from Scratch" series. Find part one at http://christianlilley.wordpress.com/2013/11/15/angular-from-scratch-slides-from-angularjs-meetup-dc/ . Find the accompanying demonstration files at https://github.com/xmlilley/ng-demos.
The document discusses Angular directives. It defines directives as logic and behavior for the UI that can handle tasks like event handling, template insertion, and data binding. Directives are not where jQuery code goes. The key principles of directives are that they are declarative and model-driven, modular and reusable across contexts by keeping their logic local. The document provides examples of creating a basic directive using a configuration object with a link function, and covers topics like naming conventions, templates, and the restrict and replace properties.
1. Angular starts processing directives on the DOM when it is ready, calling compile functions to run code before child elements.
2. It then calls link functions, traversing back up the DOM to guarantee child element functions run before parents.
3. The compile pre-link function allows running code before child elements, while post-link runs after them.
The document summarizes new features and changes to the jQuery event system in version 1.7. Key points include:
- The .on() and .off() methods were introduced to unify event binding, removing confusion from multiple older methods. This improves performance and reduces code size.
- Event delegation was optimized through "quickIs()" to speed up selector matching, improving delegation performance by 2-4x in most browsers.
- Existing event bugs were fixed and the system was overhauled to make events more "hookable" and extensible.
Getting the Most Out of jQuery Widgetsvelveeta_512
The document discusses strategies for building modular widgets in jQuery. It recommends thinking of widgets as small, decoupled components that communicate through events. Components should subscribe to and respond to events from other components, with references only going downward between layers. Each layer consumes events from lower layers and publishes events upward. The document also recommends decorating widget functions to add logging or other functionality.
This document discusses the pros and cons of using the JavaScript library Backbone.js versus building a full-featured framework. It notes that while Backbone.js is only a code organizer and light library, developers want features of a full framework like session management and validation. Building a custom framework from scratch takes a lot of time and effort and is only 1/26 of what is needed for a real application. Frameworks like ExtJS provide more out of the box for less work than rolling one's own solution. The document advocates using Backbone.js and accepting its limitations rather than trying to re-invent the wheel by developing a full custom framework.
Last year, AOL adopted a new content strategy and has positioned itself as a premier destination for original content. Core to this strategy is having reusable, highly efficient and optimized common code and experiences at scale, which is where jQuery comes in. Check in with Dave Artz to see how jQuery has helped his front-end standards team tackle unique challenges like optimizing 3rd party widget performance, overriding plugin functionality, and managing dependencies and updates across 100+ sites spanning multiple back-end platforms.
This document discusses React components and their anatomy. It shows how a basic ActionButton component is defined and rendered, then how multiple ActionButton components are used in a Counter component to increment and decrement a count. It explains that React uses components instead of templates for separation of concerns. It also discusses how React re-renders on every state change rather than using two-way data binding, and how the virtual DOM enables efficient re-renders.
REACT.JS : Rethinking UI Development Using JavaScriptDeepu S Nath
Isn't React that clear? Don't you fully understand how/why you should use it on your apps and why it gained all this attention? Do you want to learn the basics and to understand why it's so powerful?
This coffee@DBG will explore how this library works and you will discover and understand its main concepts in details. At the end of this session you'll learn main concepts like Components, Virtual DOM, One-way data binding etc.
Components
JSX
Data for component
The component lifecycle
Component Methods
Component Breakdown
AngularJS Directives provide a powerful way to extend HTML and add your own custom components into Web applications. In this talk Dan Wahlin walks through the key building blocks in directives and explains how you can get started building your own custom directives using Directive Definition Objects (DDOs), isolate scope, the link() function, controllers, templates and more.
This talk is based on the Building AngularJS Custom Directives video course available at https://www.udemy.com/angularjs-custom-directives.
The document discusses jQuery basics and the DOM. It explains that the DOM is how browsers structure HTML documents into an XML format. jQuery allows selecting elements from the DOM using CSS-style selectors and manipulating them using jQuery functions. Popular uses of jQuery include DOM manipulation, effects, AJAX calls, and building plugins. The document encourages learning more about jQuery through its online documentation.
Building Custom AngularJS Directives - A Step-by-Step Guide - Dan Wahlin | Fa...FalafelSoftware
AngularJS provides many built-in directives that can be used to manipulate the DOM, handle events, and more but there will be times when you need to write custom directives. How do you get started? Are directives really as scary as they look at first glance?
In this session Dan Wahlin will provide a step-by-step look at creating custom AngularJS directives and show how to use templates, controllers, the link function, and many other features. You'll also see how custom directives can be used along with other AngularJS features such as $http interceptors and validation. By the end of the session you'll realize that directives aren't quite as scary as they first appear.
Backbone.js is a JavaScript framework that provides structure and conventions for developing single-page web applications. It helps avoid unnecessary DOM manipulations by separating the application state from the DOM using models. Views observe changes to models and re-render the DOM accordingly. Models can be synced to a back-end API to persist data. Backbone.js uses an MVVM pattern with models representing the application state, views for rendering, and the DOM acting as the view model.
jQuery Performance Tips and Tricks (2011)Addy Osmani
Today we’re going to take a look at best practices, tips and tricks for improving the performance of your jQuery code. Performance optimization is a crucial aspect of building ‘snappy’ client-side applications and something which all developers using jQuery should bare in mind.
This document provides a tutorial on basic jQuery concepts and syntax for beginners. It introduces selecting elements, manipulating CSS classes and styles, adding and removing elements, handling events, showing/hiding elements, and basic animations. The tutorial recommends learners get more in-depth training through books, tutorials and documentation to fully understand jQuery's capabilities.
This document provides an overview of the Knockout JavaScript library. It describes Knockout as a library that helps create rich, responsive user interfaces by linking a data model to UI elements through declarative bindings. Key features highlighted include declarative bindings, automatic UI refresh on data changes, dependency tracking, and templating. The document then discusses additional features like being a pure JavaScript library and working cross-browser. It addresses questions about how Knockout relates to other libraries like jQuery and how it differs. The rest of the document covers concepts like the MVVM pattern, view models with observable and computed properties, observable arrays, and built-in bindings for controlling elements, flow, and forms.
The document discusses the jQuery framework, explaining why jQuery should be used, what the $() function does, how to write unobtrusive JavaScript, and how to extend jQuery through plugins. It also covers using jQuery with other libraries by relinquishing control of the $ variable through the $.noConflict() method. Key features of jQuery include its small file size, cross-browser compatibility, and ease of selecting, manipulating, and animating elements.
Java Server Pages (JSP) allow you to separate the dynamic parts of your web pages from the static HTML. You write normal HTML code using a web page authoring tool, and then enclose dynamic code sections within special tags that mostly start with "<%" and end with "%>". JSP provides various tags like scriptlets, expressions, comments, and directives to embed Java code within web pages to add dynamic functionality. Common uses of JSP include dynamically generating content, connecting to databases to retrieve and display data, and controlling the page flow based on user input.
jQuery is a JavaScript library that makes HTML document traversal and manipulation, event handling, animation, and Ajax interactions more simple. It works across browsers and allows developers to select elements, handle events, and perform animations with simple code. The document discusses how jQuery works, how to launch code when the document is ready, and how to add and remove HTML classes using jQuery. It also introduces callbacks and functions in jQuery, explaining how to pass callback functions into other functions.
The document describes React, a JavaScript library for building user interfaces. It introduces some key concepts of React including components, props, state, and the virtual DOM. Components are the building blocks of React apps and can be composed together. Props provide immutable data to components, while state provides mutable data. The virtual DOM allows React to efficiently update the real DOM by only changing what needs to be changed. Data flows unidirectionally in React from parent to child components via props, and state updates within a component are handled via setState().
Jquery Complete Presentation along with Javascript BasicsEPAM Systems
jQuery is a JavaScript library that simplifies HTML document manipulation and event handling. It allows developers to select elements, hide/show elements, and handle events with simple and concise code. jQuery animations and effects like fade, slide, and animate allow for creative transitions between states.
This document provides best practices for using jQuery, including loading jQuery from a CDN, using variables to cache jQuery objects, optimizing selectors for performance, best practices for DOM manipulation, event handling, AJAX requests, animations, chaining, using plugins, and other miscellaneous tips. Key recommendations include prefixing variables with $, using ID selectors when possible, giving selectors context, avoiding implied universal selectors, detaching elements before manipulation, avoiding anonymous event handlers, and using object literals for parameters.
All Things Open 2014 - Day 2
Thursday, October 23rd, 2014
James Pearce
Head of Open Source with Facebook
Front Dev 1
An Introduction to ReactJS
Find more by James here: https://speakerdeck.com/jamesgpearce
Apache Wicket is a Java web application framework that uses a component-based programming model to build web UIs, allowing developers to treat page elements like buttons and labels as objects and handle events like clicks. It aims to bridge the gap between desktop and web development by enabling an event-driven programming style and component hierarchy similar to Swing. Wicket pages are composed of reusable Java components that correspond to HTML elements, avoiding the impedance mismatch between Java and HTTP programming models.
This document summarizes key topics from a jQuery Brownbag presentation, including checking for null values, setting default values, properties, why jQuery is awesome, jQuery's founder and philosophy, selecting elements, events in jQuery, Ajax examples, plugins, and learning more about jQuery. The document provides code examples for common tasks like DOM manipulation, event handling, and Ajax using jQuery.
JavaScript is a scripting language that works in web browsers to make web pages interactive. jQuery is a JavaScript library that simplifies HTML document traversal, event handling, animating, and Ajax interactions. While JavaScript allows for web application creation and event handling, jQuery makes these tasks easier through its simplified syntax and methods. jQuery also enables animations, which are difficult to create with plain JavaScript. Overall, jQuery builds on JavaScript by providing a simpler, cross-browser compatible way to select and manipulate HTML, handle events, perform animations, and add Ajax interactions to web pages.
The document provides an overview of CSS (Cascading Style Sheets) methodology. It defines CSS as the language used for implementing designs on HTML documents. It then covers CSS basics including selectors, properties, conflicts resolution using specificity and cascade order. It also discusses the box model which defines how browsers handle rectangular boxes for elements. Finally, it offers some best practices tips such as resetting styles, separating content from design, and planning layout during HTML coding.
1) The document provides resources for a front-end development session including working files, slides, and an agenda.
2) It reviews HTML tags, CSS selectors, the box model, positioning, and Flexbox.
3) Instructions are given to install Atom plugins and review JavaScript and JQuery before adding an Express server to a webpage.
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective, Ajax ...Nicole Sullivan
The cascade is a poker game, but we've been playing our cards all wrong. Here Nicole suggests we stop trying to play to win to prevent code bloat, and simplify the cascade, using the order of the rulesets to allow overrides.
REACT.JS : Rethinking UI Development Using JavaScriptDeepu S Nath
Isn't React that clear? Don't you fully understand how/why you should use it on your apps and why it gained all this attention? Do you want to learn the basics and to understand why it's so powerful?
This coffee@DBG will explore how this library works and you will discover and understand its main concepts in details. At the end of this session you'll learn main concepts like Components, Virtual DOM, One-way data binding etc.
Components
JSX
Data for component
The component lifecycle
Component Methods
Component Breakdown
AngularJS Directives provide a powerful way to extend HTML and add your own custom components into Web applications. In this talk Dan Wahlin walks through the key building blocks in directives and explains how you can get started building your own custom directives using Directive Definition Objects (DDOs), isolate scope, the link() function, controllers, templates and more.
This talk is based on the Building AngularJS Custom Directives video course available at https://www.udemy.com/angularjs-custom-directives.
The document discusses jQuery basics and the DOM. It explains that the DOM is how browsers structure HTML documents into an XML format. jQuery allows selecting elements from the DOM using CSS-style selectors and manipulating them using jQuery functions. Popular uses of jQuery include DOM manipulation, effects, AJAX calls, and building plugins. The document encourages learning more about jQuery through its online documentation.
Building Custom AngularJS Directives - A Step-by-Step Guide - Dan Wahlin | Fa...FalafelSoftware
AngularJS provides many built-in directives that can be used to manipulate the DOM, handle events, and more but there will be times when you need to write custom directives. How do you get started? Are directives really as scary as they look at first glance?
In this session Dan Wahlin will provide a step-by-step look at creating custom AngularJS directives and show how to use templates, controllers, the link function, and many other features. You'll also see how custom directives can be used along with other AngularJS features such as $http interceptors and validation. By the end of the session you'll realize that directives aren't quite as scary as they first appear.
Backbone.js is a JavaScript framework that provides structure and conventions for developing single-page web applications. It helps avoid unnecessary DOM manipulations by separating the application state from the DOM using models. Views observe changes to models and re-render the DOM accordingly. Models can be synced to a back-end API to persist data. Backbone.js uses an MVVM pattern with models representing the application state, views for rendering, and the DOM acting as the view model.
jQuery Performance Tips and Tricks (2011)Addy Osmani
Today we’re going to take a look at best practices, tips and tricks for improving the performance of your jQuery code. Performance optimization is a crucial aspect of building ‘snappy’ client-side applications and something which all developers using jQuery should bare in mind.
This document provides a tutorial on basic jQuery concepts and syntax for beginners. It introduces selecting elements, manipulating CSS classes and styles, adding and removing elements, handling events, showing/hiding elements, and basic animations. The tutorial recommends learners get more in-depth training through books, tutorials and documentation to fully understand jQuery's capabilities.
This document provides an overview of the Knockout JavaScript library. It describes Knockout as a library that helps create rich, responsive user interfaces by linking a data model to UI elements through declarative bindings. Key features highlighted include declarative bindings, automatic UI refresh on data changes, dependency tracking, and templating. The document then discusses additional features like being a pure JavaScript library and working cross-browser. It addresses questions about how Knockout relates to other libraries like jQuery and how it differs. The rest of the document covers concepts like the MVVM pattern, view models with observable and computed properties, observable arrays, and built-in bindings for controlling elements, flow, and forms.
The document discusses the jQuery framework, explaining why jQuery should be used, what the $() function does, how to write unobtrusive JavaScript, and how to extend jQuery through plugins. It also covers using jQuery with other libraries by relinquishing control of the $ variable through the $.noConflict() method. Key features of jQuery include its small file size, cross-browser compatibility, and ease of selecting, manipulating, and animating elements.
Java Server Pages (JSP) allow you to separate the dynamic parts of your web pages from the static HTML. You write normal HTML code using a web page authoring tool, and then enclose dynamic code sections within special tags that mostly start with "<%" and end with "%>". JSP provides various tags like scriptlets, expressions, comments, and directives to embed Java code within web pages to add dynamic functionality. Common uses of JSP include dynamically generating content, connecting to databases to retrieve and display data, and controlling the page flow based on user input.
jQuery is a JavaScript library that makes HTML document traversal and manipulation, event handling, animation, and Ajax interactions more simple. It works across browsers and allows developers to select elements, handle events, and perform animations with simple code. The document discusses how jQuery works, how to launch code when the document is ready, and how to add and remove HTML classes using jQuery. It also introduces callbacks and functions in jQuery, explaining how to pass callback functions into other functions.
The document describes React, a JavaScript library for building user interfaces. It introduces some key concepts of React including components, props, state, and the virtual DOM. Components are the building blocks of React apps and can be composed together. Props provide immutable data to components, while state provides mutable data. The virtual DOM allows React to efficiently update the real DOM by only changing what needs to be changed. Data flows unidirectionally in React from parent to child components via props, and state updates within a component are handled via setState().
Jquery Complete Presentation along with Javascript BasicsEPAM Systems
jQuery is a JavaScript library that simplifies HTML document manipulation and event handling. It allows developers to select elements, hide/show elements, and handle events with simple and concise code. jQuery animations and effects like fade, slide, and animate allow for creative transitions between states.
This document provides best practices for using jQuery, including loading jQuery from a CDN, using variables to cache jQuery objects, optimizing selectors for performance, best practices for DOM manipulation, event handling, AJAX requests, animations, chaining, using plugins, and other miscellaneous tips. Key recommendations include prefixing variables with $, using ID selectors when possible, giving selectors context, avoiding implied universal selectors, detaching elements before manipulation, avoiding anonymous event handlers, and using object literals for parameters.
All Things Open 2014 - Day 2
Thursday, October 23rd, 2014
James Pearce
Head of Open Source with Facebook
Front Dev 1
An Introduction to ReactJS
Find more by James here: https://speakerdeck.com/jamesgpearce
Apache Wicket is a Java web application framework that uses a component-based programming model to build web UIs, allowing developers to treat page elements like buttons and labels as objects and handle events like clicks. It aims to bridge the gap between desktop and web development by enabling an event-driven programming style and component hierarchy similar to Swing. Wicket pages are composed of reusable Java components that correspond to HTML elements, avoiding the impedance mismatch between Java and HTTP programming models.
This document summarizes key topics from a jQuery Brownbag presentation, including checking for null values, setting default values, properties, why jQuery is awesome, jQuery's founder and philosophy, selecting elements, events in jQuery, Ajax examples, plugins, and learning more about jQuery. The document provides code examples for common tasks like DOM manipulation, event handling, and Ajax using jQuery.
JavaScript is a scripting language that works in web browsers to make web pages interactive. jQuery is a JavaScript library that simplifies HTML document traversal, event handling, animating, and Ajax interactions. While JavaScript allows for web application creation and event handling, jQuery makes these tasks easier through its simplified syntax and methods. jQuery also enables animations, which are difficult to create with plain JavaScript. Overall, jQuery builds on JavaScript by providing a simpler, cross-browser compatible way to select and manipulate HTML, handle events, perform animations, and add Ajax interactions to web pages.
The document provides an overview of CSS (Cascading Style Sheets) methodology. It defines CSS as the language used for implementing designs on HTML documents. It then covers CSS basics including selectors, properties, conflicts resolution using specificity and cascade order. It also discusses the box model which defines how browsers handle rectangular boxes for elements. Finally, it offers some best practices tips such as resetting styles, separating content from design, and planning layout during HTML coding.
1) The document provides resources for a front-end development session including working files, slides, and an agenda.
2) It reviews HTML tags, CSS selectors, the box model, positioning, and Flexbox.
3) Instructions are given to install Atom plugins and review JavaScript and JQuery before adding an Express server to a webpage.
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective, Ajax ...Nicole Sullivan
The cascade is a poker game, but we've been playing our cards all wrong. Here Nicole suggests we stop trying to play to win to prevent code bloat, and simplify the cascade, using the order of the rulesets to allow overrides.
This document provides an overview of HTML and CSS basics:
- HTML is used to define the structure and content of web pages using tags like <html>, <head>, <body>, etc. CSS is used to style and lay out HTML elements.
- The <head> holds metadata like the page title and links to CSS. The <body> contains visible elements that define the page structure.
- CSS rules are made up of selectors that target HTML elements paired with declarations in curly braces. Common selectors include classes, IDs, and element types.
- CSS files are linked in the <head> with <link> tags. Paths to other files can be relative to the current
This document discusses class and ID selectors in CSS. [1] Classes can be applied multiple times and are defined with a period (.) in CSS. IDs can only be applied once and are defined with a hash (#). Classes are better when the same selector is used multiple times, but IDs have more specificity. [2] The document provides steps to create a basic HTML page and link an external CSS stylesheet to style paragraphs, classes, and IDs. [3] Rules are defined for a paragraph, class, and ID to demonstrate how each works and the hierarchy when selectors overlap.
This document discusses class and ID selectors in CSS. [1] Classes can be applied multiple times and are defined with a period (.) in CSS. IDs can only be applied once and are defined with a hash (#). Classes are better when the same selector is used multiple times, but IDs have more specificity. [2] The document provides steps to create a basic HTML page and link an external CSS stylesheet to style paragraphs, classes, and IDs. [3] Rules are defined for a paragraph, class, and ID to demonstrate how each works.
This is AEM development best practices. These practices do not cover standard like jsp, js & java development practices. This is an effort to consolidate our learning in CMS domain.
CSS (Cascading Style Sheets) is a language that separates webpage content from presentation and defines how a website should look. It was proposed in 1994 and published in 1996. While browser support has improved, no browser fully supports all CSS specifications. CSS styles can be applied through external style sheets, internal style sheets, or inline styles. Selectors target elements to style and properties set values to change appearance.
This document discusses best practices for creating CSS pattern libraries. It recommends starting with the smallest reusable components and building up to larger page-level templates. Key aspects covered include using a naming convention based on modules, modifiers and descendants; avoiding overly specific class names; and including utility classes to add single styles without new classes. The document also provides examples of how to structure and name classes for common interface patterns.
This document discusses various utility methods provided by Prototype to simplify common scripting tasks. The $ method is described as the cornerstone method, as it allows passing either element IDs or DOM elements to functions. The $$ method selects elements using CSS selectors. The $A, $F, $H, $R, and $w methods provide shortcuts for common tasks like casting to an array, getting a form value, creating hashes and ranges, and splitting a string. The Try.these method returns the result of the first function passed to it that does not throw an error.
Drupal's theming layer is a powerful and beautiful beast, but it requires a firm hand to really behave. New themers often start out trying to control it with a light touch and gentle strokes of CSS. Only too late do they realize their error…
All too often the result of this misguided approach is bloated and inefficient CSS and JavaScript and site out of control. By the time the themer realizes what the beast have done, it might be too late to fix.
Don't let Contrib bully you around. Grab the reins, create a frontend architecture and teach the theming layer to produce lean, extendable, high performance markup and CSS that is easy and cost-efficient to maintain.
This session is about learning to take charge.
CSS frameworks provide standardized code to aid in website development. This document discusses two types of frameworks - frontend frameworks that affect the user interface, and backend frameworks that affect website logic and operation. It focuses on Flexbox and Unsemantic, two popular CSS frontend frameworks. Flexbox uses flex containers and items to lay out page sections in rows or columns. Unsemantic provides predefined grid classes to lay out content without custom CSS. The document provides code examples of using these frameworks to create a three-column layout with colored sections of varying sizes.
Front-end methodologies discusses common solutions like SMACSS and ITCSS for organizing CSS code into reusable, maintainable components. It also covers approaches like OOCSS, BEM, and CSS Modules. CSS Modules in particular scopes class names to prevent collisions and makes extending classes problematic.
This document discusses using CSS preprocessors like LESS, Sass, and Stylus to build mobile web apps. It covers getting started with Sass and Compass, using variables, operations, nesting, mixins, and other Sass features. It also discusses object-oriented CSS techniques like separating structure and skin, and container and content. The goal is to speed up front-end workflows and make CSS reusable, modular, and scalable.
Structuring your CSS for maintainability: rules and guile lines to write CSSSanjoy Kr. Paul
Structuring your CSS for maintainability: rules and guile lines to write CSS
As you start work on larger stylesheets and big projects with a team, you will discover that maintaining a huge CSS file can be challenging. So, we will go through some best practices for writing CSS that will help us to maintain the CSS project easily.
The document provides style guidelines for writing Objective-C code, covering topics such as formatting, naming conventions, and best practices. Some key points include:
1) Dot notation is recommended over bracket notation for property access and formatting guidelines specify spacing, indentation and line breaks around conditionals, methods and braces.
2) Variables, methods and classes should be descriptively named and comments should explain the purpose of code rather than restating the obvious.
3) Literals should be used for immutable objects like strings, arrays and dictionaries and constants are preferred over inline values.
4) Categories are recommended to segment functionality and protocol methods should be placed in extensions for clarity.
The document provides coding guidelines and conventions for naming variables, functions, classes, files and other constructs in C++. It recommends using meaningful names that indicate purpose, starting class names with uppercase letters, and using prefixes for boolean and other functions. The document also discusses organizing code into libraries and header files, using references instead of pointers, following standards to minimize bugs, and additional references for coding best practices.
Mike Toppa gave a presentation on dependency injection in PHP. He discussed classes and objects in PHP, the SOLID principles including the single responsibility principle and dependency inversion principle. He explained class autoloading in PHP and different techniques for dependency injection including constructor injection, setter injection, and using a dependency injection container.
This document provides information and instructions for FEWD Week 6. It includes links to slides for the week, instructions for setting up the weekly GitHub repository, and notes on manipulating arrays and collections in JavaScript. It also discusses refactoring code, the "this" keyword, and techniques for debugging code, including using the console, breakpoints, and getting help from others. The agenda covers collecting and manipulating data, arrays, iterating over arrays, refactoring, the "this" keyword, and debugging.
Similar to Scalable CSS You and Your Back-End Coders Can Love - @CSSConf Asia 2014 (20)
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.
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.
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.
Enchancing adoption of Open Source Libraries. A case study on Albumentations.AIVladimir Iglovikov, Ph.D.
Presented by Vladimir Iglovikov:
- https://www.linkedin.com/in/iglovikov/
- https://x.com/viglovikov
- https://www.instagram.com/ternaus/
This presentation delves into the journey of Albumentations.ai, a highly successful open-source library for data augmentation.
Created out of a necessity for superior performance in Kaggle competitions, Albumentations has grown to become a widely used tool among data scientists and machine learning practitioners.
This case study covers various aspects, including:
People: The contributors and community that have supported Albumentations.
Metrics: The success indicators such as downloads, daily active users, GitHub stars, and financial contributions.
Challenges: The hurdles in monetizing open-source projects and measuring user engagement.
Development Practices: Best practices for creating, maintaining, and scaling open-source libraries, including code hygiene, CI/CD, and fast iteration.
Community Building: Strategies for making adoption easy, iterating quickly, and fostering a vibrant, engaged community.
Marketing: Both online and offline marketing tactics, focusing on real, impactful interactions and collaborations.
Mental Health: Maintaining balance and not feeling pressured by user demands.
Key insights include the importance of automation, making the adoption process seamless, and leveraging offline interactions for marketing. The presentation also emphasizes the need for continuous small improvements and building a friendly, inclusive community that contributes to the project's growth.
Vladimir Iglovikov brings his extensive experience as a Kaggle Grandmaster, ex-Staff ML Engineer at Lyft, sharing valuable lessons and practical advice for anyone looking to enhance the adoption of their open-source projects.
Explore more about Albumentations and join the community at:
GitHub: https://github.com/albumentations-team/albumentations
Website: https://albumentations.ai/
LinkedIn: https://www.linkedin.com/company/100504475
Twitter: https://x.com/albumentations
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
UiPath Test Automation using UiPath Test Suite series, part 6DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 6. In this session, we will cover Test Automation with generative AI and Open AI.
UiPath Test Automation with generative AI and Open AI webinar offers an in-depth exploration of leveraging cutting-edge technologies for test automation within the UiPath platform. Attendees will delve into the integration of generative AI, a test automation solution, with Open AI advanced natural language processing capabilities.
Throughout the session, participants will discover how this synergy empowers testers to automate repetitive tasks, enhance testing accuracy, and expedite the software testing life cycle. Topics covered include the seamless integration process, practical use cases, and the benefits of harnessing AI-driven automation for UiPath testing initiatives. By attending this webinar, testers, and automation professionals can gain valuable insights into harnessing the power of AI to optimize their test automation workflows within the UiPath ecosystem, ultimately driving efficiency and quality in software development processes.
What will you get from this session?
1. Insights into integrating generative AI.
2. Understanding how this integration enhances test automation within the UiPath platform
3. Practical demonstrations
4. Exploration of real-world use cases illustrating the benefits of AI-driven test automation for UiPath
Topics covered:
What is generative AI
Test Automation with generative AI and Open AI.
UiPath integration with generative AI
Speaker:
Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slackshyamraj55
Discover the seamless integration of RPA (Robotic Process Automation), COMPOSER, and APM with AWS IDP enhanced with Slack notifications. Explore how these technologies converge to streamline workflows, optimize performance, and ensure secure access, all while leveraging the power of AWS IDP and real-time communication via Slack notifications.
Essentials of Automations: The Art of Triggers and Actions in FMESafe Software
In this second installment of our Essentials of Automations webinar series, we’ll explore the landscape of triggers and actions, guiding you through the nuances of authoring and adapting workspaces for seamless automations. Gain an understanding of the full spectrum of triggers and actions available in FME, empowering you to enhance your workspaces for efficient automation.
We’ll kick things off by showcasing the most commonly used event-based triggers, introducing you to various automation workflows like manual triggers, schedules, directory watchers, and more. Plus, see how these elements play out in real scenarios.
Whether you’re tweaking your current setup or building from the ground up, this session will arm you with the tools and insights needed to transform your FME usage into a powerhouse of productivity. Join us to discover effective strategies that simplify complex processes, enhancing your productivity and transforming your data management practices with FME. Let’s turn complexity into clarity and make your workspaces work wonders!
Generative AI Deep Dive: Advancing from Proof of Concept to ProductionAggregage
Join Maher Hanafi, VP of Engineering at Betterworks, in this new session where he'll share a practical framework to transform Gen AI prototypes into impactful products! He'll delve into the complexities of data collection and management, model selection and optimization, and ensuring security, scalability, and responsible use.
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
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.
In the rapidly evolving landscape of technologies, XML continues to play a vital role in structuring, storing, and transporting data across diverse systems. The recent advancements in artificial intelligence (AI) present new methodologies for enhancing XML development workflows, introducing efficiency, automation, and intelligent capabilities. This presentation will outline the scope and perspective of utilizing AI in XML development. The potential benefits and the possible pitfalls will be highlighted, providing a balanced view of the subject.
We will explore the capabilities of AI in understanding XML markup languages and autonomously creating structured XML content. Additionally, we will examine the capacity of AI to enrich plain text with appropriate XML markup. Practical examples and methodological guidelines will be provided to elucidate how AI can be effectively prompted to interpret and generate accurate XML markup.
Further emphasis will be placed on the role of AI in developing XSLT, or schemas such as XSD and Schematron. We will address the techniques and strategies adopted to create prompts for generating code, explaining code, or refactoring the code, and the results achieved.
The discussion will extend to how AI can be used to transform XML content. In particular, the focus will be on the use of AI XPath extension functions in XSLT, Schematron, Schematron Quick Fixes, or for XML content refactoring.
The presentation aims to deliver a comprehensive overview of AI usage in XML development, providing attendees with the necessary knowledge to make informed decisions. Whether you’re at the early stages of adopting AI or considering integrating it in advanced XML development, this presentation will cover all levels of expertise.
By highlighting the potential advantages and challenges of integrating AI with XML development tools and languages, the presentation seeks to inspire thoughtful conversation around the future of XML development. We’ll not only delve into the technical aspects of AI-powered XML development but also discuss practical implications and possible future directions.
13. I asked them. And they said
it’s all about …
The whole ‘Cascading’ thing
The ‘Specificity’ thing
(see also: ‘the Cascading thing’)
Selector Chaos
(mostly re: Specificity & Cascading)
Layout
(old-school Layouts, that is…)
20. First Principles
be DRY - ‘Don’t Repeat Yourself’
be Maintainable - write for updates &
debugging
be Predictable - Don’t keep hacking what’s
broken (unless you have to)
Don’t ‘Optimize’ Prematurely
21. Strategic Rules For CSS
Name All The Things™
Stop Hoarding Classes
& Rationing Letters
Be a Lover, not a Fighter
Automate or Die
28. Love Display: Inline-Block
Supported Since IE8 !!!
Does what you expect
vertical-align: a feature, not a bug :-)
text-align: gets you left, right, or
center
29. Love Display: Inline-Block
(The whitespace thing *is* a bug.
Easy, transparent fix: zero-sized
fonts on the container.
Use @mixin !)
30. Display: Inline-Block (Coda)
Those deceptively-reasonable .clearfix
classes that don’t need extra HTML?
They need :after …
… which requires CSS 2.1 …
… which has display: inline-block
31. Bonus Confusing Layout Idol
To Consider Burning
Ems
(Browser scaling works great)
(In practice, people use a range of
assistive technologies, and very
rarely rely on custom stylesheets.)
36. “In God, we trust.
All others:
bring evidence.”
37. OK… Maintainability… How?
1. AUTOMATE (OR DIE)
2. “NAME ALL THE THINGS”… CLEARLY
3. USE ELEMENT SELECTORS ONLY FOR RESETS
4. STOP OVER-NESTING… OR MAYBE NESTING
*AT ALL*
5. AVOID UNNECESSARY COMPLEXITY
38. Maintainability… How?
1. AUTOMATE (OR DIE)
2. “NAME ALL THE THINGS”… CLEARLY
3. USE ELEMENT SELECTORS ONLY FOR RESETS
4. STOP OVER-NESTING… OR MAYBE NESTING
*AT ALL*
5. AVOID UNNECESSARY COMPLEXITY
39. AUTOMATION
Enough with the FUD. It’s easier than you think.
Just use a (pre-)compiler. Always. (See Yeoman for help.)
A new age is upon us.
There is literally not enough time in this session to detail
all the ways in which a compiler will make your CSS
better.
But here’s a few: you’ve heard about ‘variables’ and
‘mixins’, but not *why* you need them:
40. AUTOMATION Examples:
Human-Readable Colors
Stop working directly with color codes! Use human-readable
references like $brand-primary-highlight
or $ugly-greenish-blue.
Lighten, Darken, Opacify, Transparentize, using a single
original reference color. Make a whole chart w/:
color: $myRed
$redTwo: darken($myRed, 10%)
$redThree: darken($myRed, 20%)…
‘Theme’ a design with just a few variables, and @import
44. MOAR AUTOMATION
Browser prefixes suck. Use either @mixin’s… or Grunt!
Easy theming: take theme-specific variables & @mixin’s,
then @import your default rules, and voilà!
45. Maintainability… How?
1. AUTOMATE (OR DIE)
2. “NAME ALL THE THINGS”… CLEARLY
3. USE ELEMENT SELECTORS ONLY FOR RESETS
4. STOP OVER-NESTING… OR MAYBE NESTING
*AT ALL*
5. AVOID UNNECESSARY COMPLEXITY
46. Who was it who told us that this:
#nav-list li a {
… stuff…
}
… was a good idea? Instead of this:
.nav-list-link {
… same stuff …
}
… or better… this:
.main-header__nav-list__link {
… same stuff …
}
47. Stop Rationing Classes!
It’s as if we were afraid that classes were radioactive:
too many, too close together, and they’d go super-critical
Or as if they were contaminating our pristine HTML
We also like to feel clever. (Be afraid of that instinct.)
Classes are as efficient as it gets, speed-wise.
48. Use Clear, Descriptive Classes
It shouldn’t be necessary to hunt for things. Class names
should tell us where to expect to find things.
Sometimes, the hardest thing about using good names is
just inventing ones that make sense.
Use any system you like (BEM, OOCS, Suit), which is both
highly descriptive, and which helps you design good class
names.
(Remember they’re helpful patterns, not religious faiths.)
49. A Note on Namespacing
As a way of collecting a ‘module’ of related content or
functionality, namespacing is super-cool.
But it quickly goes fractal with automation.
Consider whether using detailed, descriptive class
names gets you what you were probably really after:
the avoidance of collisions.
(See the section on over-nesting.)
50. Maintainability… How?
1. AUTOMATE (OR DIE)
2. “NAME ALL THE THINGS”… CLEARLY
3. USE ELEMENT SELECTORS ONLY FOR RESETS
4. STOP OVER-NESTING… OR MAYBE NESTING
*AT ALL*
5. AVOID UNNECESSARY COMPLEXITY
51. About That Whole
‘Cascade’ Thing
No matter how much we explain it, the ‘back-end’ folks
will never understand why we would allow five different
user-created style declarations to apply to a single
element
They’re right: it’s not maintainable.
The “browser is designed that way” isn’t a good enough
reason.
We *can* do that, but we *shouldn’t*.
52. About That Whole
‘Cascade’ Thing
Element selectors are the number one reason we end up
fighting the cascade, and hoping that the Specificity
algorithm is on our side today.
You don’t need them.
One good use: resets and global styles, like:
a {
text-decoration: none;
color: red;
}
53. About That Whole
‘Cascade’ Thing
Use of !important is always a “code-smell”
Maybe use @extend or @include to create a narrower
class, rather than fight the existing one
“Be a lover, not a fighter”
54. Maintainability… How?
1. AUTOMATE (OR DIE)
2. “NAME ALL THE THINGS”… CLEARLY
3. USE ELEMENT SELECTORS ONLY FOR RESETS
4. STOP OVER-NESTING… OR MAYBE NESTING
*AT ALL*
5. AVOID UNNECESSARY COMPLEXITY
55. Descendant Selectors:
The Problems
General use of descendant selectors is anathema to real
specificity, and guarantees conflicts and overrides:
form label input
#login-form input .name-field
!
Descendant Selectors lock your content into a single
context, making them hard to re-use, or re-locate.
Plus, you can’t relocate other code into yours: ever try to
add a JQuery date-picker into code that’s styled with
descendant selectors?
56. Pre-Compilers Gone Wrong
body {
font-size: 12px;
#main-content: {
width: 400px;
height: 200px;
!
.left-nav {
width: 200px;
margin: 0 0 0 50px;
!
ul {
li {
display: block;
list-style-type: none;
… ∞ …
}}}}}
body #main .left-nav ul li …
5 selectors and counting,
where 1 would do it.
57. Descendant Selectors:
Performance
The most important thing you can know about selector
optimization is this: they’re evaluated right-to-left.
The most important piece of any selector is thus the last
piece, not the first. Which is pretty much the opposite of
what we usually do with descendant selectors:
#very-specific-id .semi-specific-class li a
The fact that we *can* nest and qualify selectors…
doesn’t mean that we *should*.
58. Nesting Without Stacking
A (pre-)compiler w/ BEM-like syntax gives us readability of
related styles, without descendant-selector headaches:
.main-content: {
&__left-nav {
&__item
}}}
compiles to:
.main-content {}
.main-content__left-nav {}
.main-content__left-nav__item {}
(If you don’t like those syntaxes, at least just use indentation
instead of nesting.)
59. Nesting & Stacking
Rule of thumb: nest selectors and stack classes when
you *have to*, not just when you *can*.
Rule of thumb: nest and stack your @mixin’s and
@extend’s, not your selectors.
@mixin body-text {
color: green;
font: {
size: 14px;
family: Arial;
} }
@mixin nav-list__item {
line-spacing: 1;
list-style-type: none;
display: inline-block;
vertical-align: top;
}
.header__nav-list__item {
@include body-text;
@include nav-list__item;
padding: 5px;
}
60. Nesting & Stacking
Relying on @mixin and @extend with descriptive
classes, rather than on stacked, generic classes means
that refactoring is easy, and overrides (if necessary)
happen where you can see them, and plan them: in your
code.
If it comes time to refactor for performance, your most-used
mixins can easily convert to standalone classes.
Going the other direction… not so much.
61. Stacking Classes: Pros & Cons
Stacking (<div class=“class1 class2”) is great if you can’t
re-write your classes (ie. Bootstrap, components)
Stacking is declarative, at least in your HTML
It’s not at all declarative back in the CSS, forcing us to use
the Dev Tools’ Style Inspector to see what happens
It puts you into ‘fighting’ mode: overriding the conflicts
For Optimization: use tactically, not strategically
62. Stacking Classes: Pros & Cons
A Thought: how many of the reasons why we stack our
classes are because we didn’t have pre-compilers back
when we started doing it?
63. Maintainability… How?
1. AUTOMATE (OR DIE)
2. “NAME ALL THE THINGS”… CLEARLY
3. USE ELEMENT SELECTORS ONLY FOR RESETS
4. STOP OVER-NESTING… OR MAYBE NESTING
*AT ALL*
5. AVOID UNNECESSARY COMPLEXITY
64. Don’t Fight Your Elements
Do you really know if <section>, <article>, etc. do
anything for you? (hint: they don’t) Use them only if
they’re helpful in some human-readable way.
Don’t feel guilty! The era of semantic *elements* for
machine-readability is largely over, in favor of semantic
*attributes*. See: WAI-ARIA, microformats
65. Don’t Fight Your Elements
Use the most flexible elements available; ones you can
rearrange and refactor without breaking them.
Just because some content is vaguely ‘tabular’ in nature
doesn’t mean you *have* to use a <table>. You can’t scroll
the <tbody>, and styling is painful. So, don’t do it.
Just because somebody once said that <ul> is more
‘semantic’ than <div> for navigation items doesn’t mean it’s
still worth fighting with it (particularly now that we have
<nav>) Does it *look like* a list? No? Then don’t.
66. Pseudo-Helpful
When you don’t control a template, and can’t assign
classes, pseudo-selectors are great. Otherwise, maybe not.
Expensive for what you get.
Are there other options? Can Javascript help? For example,
would using Angular’s $first and $last maybe work *at
least* as well as :first-child/:last-child?
(Remember: a new age is upon us.)
67. THANKS!
(Now go teach those ‘back-end’ folks some tricks.)
!
about.me/XML #xmlilley