Web UI performance tuning

So you've embraced architecting your Angular application with reusable components--cheers to you! But you have UI components that need multiple entry points for user markup, and regular ng-transclude left you hanging. In this talk, we'll cover how new web component standards, like the Shadow DOM, handle this. Next, we'll walk through how to accomplish it today in Angular 1.3 -- and also give you a brief glimpse into what a solution will look like in upcoming Angular 2. Afterwards, you'll know how to make layout scaffold components with custom elements that serve as containers for arbitrary user-provided HTML content. Talk presented at ng-conf in March 2015.

The document discusses various jQuery anti-patterns that can negatively impact performance and compression. It describes caching selections, using document fragments to append content outside of loops, avoiding unnecessary re-querying of elements, and leveraging event delegation with delegate() instead of binding individual handlers. The document emphasizes optimizing selector syntax from right to left, avoiding universal selectors, and detaching elements from the DOM when manipulating them to improve speed.

A look at how HTML5 aims to plug the holes that Flash has been filling in browsers for the last decade, looking at both HTML5 and non-HTML5 JavaScript APIs. For Flash Brighton in Feb 2010.

So you’ve embraced architecting your Angular application with reusable components – cheers to you! But you have UI components that need to communicate with each other or expose public methods, and you’re wondering about your options. In this talk, we’ll cover how new web component standards, like Custom Elements, handle this. Next, we’ll walk through how to accomplish it today in Angular 1.x – and bring it all together into what a solution will look like in upcoming Angular 2. Afterwards, you'll know how to design and implement the public HTML and JavaScript interfaces of GUI components. Talk presented at Angular Connect in October 2015.

The document provides an overview of HTML5 and its new features. It begins by explaining that HTML5 is not a programming language and is mainly used to write web pages. It then discusses how browsers have become application platforms, prompting the need to adopt HTML5. The document outlines some of the major new features in HTML5, including semantic elements like header and nav, new input types, geolocation, local storage, offline web applications, and video playback. It also addresses questions around the future of Flash and which companies are pushing adoption of HTML5.

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 responsive images and various techniques for implementing responsive images, including: 1. Using .htaccess files to serve different image sizes based on screen resolution. 2. Implementing the <picture> element and srcset attribute to serve different image sources based on media queries. 3. Using JavaScript solutions like HiSRC to programmatically swap image sources based on screen properties like pixel density and connection speed. 4. Various workarounds and tricks for responsive images, including using background-size: 100% for images, optimizing images as SVGs, and using font-based solutions.

The document summarizes Christopher Schmitt's presentation at RWD Summit 2014 on adaptive images in responsive web design. It discusses using feature testing over browser sniffing to determine screen resolution and bandwidth. It presents techniques like srcset, picture, and JavaScript solutions to serve appropriately sized images. It also covers workarounds like background-size, SVG, and font-based solutions when native techniques are not supported. The focus is on building responsive images that scale with the device and load quickly.

12.3.16 JS Lab. Upcoming events: goo.gl/I2gJ4H По-модульний разбор высокоуровневой архитектуры браузеров.

Smartphones and tablets not only contain more computing power and better browsers than the computers that started the Internet economy. They also have better displays, which demands more of us when we use images. This session will work through tips and tricks to develop future friendly images in our sites and apps.

Web Components are touted as the future of front-end web development. In this talk you’ll learn what Web Components are, how to use them and the state of native support in web browsers. Finally I’ll demonstrate what your options are for building componentized web apps right now using AngularJS, Ember, Knockout, React, Polymer etc. And why Web Components probably are the future of front-end web development.

This document discusses the two main APIs used by WordPress - XML-RPC and AtomPub. XML-RPC uses XML over HTTP POST to transmit basic data types and allows for functions like metaWeblog.getPost. AtomPub uses HTTP methods to interact with Atom feeds and individual posts and comments. It provides a standardized way to interact with content repositories. The document also outlines tools for working with the WordPress APIs like the iPhone app and XML-RPC libraries for developers.

This document provides information about using Twig as a templating language for WordPress projects. It discusses advantages of Twig like separation of HTML and PHP. It also covers how to install and configure Twig, use Twig syntax in templates, integrate Twig with plugins like Timber, extend Twig functionality, and lists some WordPress projects that use Twig. Finally, it provides some resources for getting started with WordPress development using Composer and Twig.

The web doesn't stop at the desktop anymore. Our image assets need to do more than look good in one context. In this talk, I look at how images like JPEG, GIFs, SVG, Icons, Unicode, and more can be used in a multi-device environment.

The document discusses the messy and buggy state of the DOM across browsers and strategies for writing cross-browser JavaScript code. It notes that nearly every DOM method has bugs or inconsistencies in some browsers. It then covers strategies like feature detection, graceful fallback for missing features, simulating features via workarounds, monitoring for regressions, and having a robust test suite to prevent regressions in one's own code. The overall message is that the DOM is messy and one needs to "know your enemies" by thoroughly testing code in all target browsers.

This is the newly updated in-depth talk about jQuery UI that I gave in Taipeh at the OSDC Taiwan 2009.

Dirk Ginader, part of the Yahoo! Accessibility Taskforce, will talk about the “5 Layers of Web Accessibility”. He extents the commonly known 3 layers model consisting of HTML, CSS and JavaScript with 2 new layers for more accessibility. He shows how easy it can be to make a website or web application more accessible by following simple rules. see: http://openwebcamp.org/agenda/#5_layers_of_accessibility

This document discusses functions in JavaScript. It defines a function as a block of code that performs a task and can be called multiple times. Functions are first-class objects that can be passed as arguments to other functions, returned from functions, and assigned to variables or object properties. Functions provide their own execution context and scope their variables to the function body. Functions are defined either with a function expression or function declaration and are called directly by name or indirectly via methods like call, apply, setTimeout. The value of the this keyword inside a function depends on how the function is called and refers to the execution context object.

This document outlines PHP coding standards and conventions for naming, formatting, and structuring PHP code. It provides guidelines for naming conventions including class, method, variable, and constant names. It also provides guidelines for code formatting including brace placement, indentation, and formatting for if/else statements and switches. The document discusses comments, constants, and other miscellaneous standards.

Even nowadays, PHP code is mostly manually audited. Expert pore over actual code, in search for bugs or code smells. Actually, it is possible to have PHP do this work itself ! Strengthened with the internal Tokenizer, bolstered by the manual, it is able to scan thousands of lines of code, without getting bored, and bringing pragmatic pieces of wisdom: official manual recommendations, version migration, code pruning and security. In the end, it deliver a global overview of the code, without reading it.

The document discusses conducting a PHP code audit. It outlines steps like interviewing developers, performing black box testing, and conducting an open code audit. When auditing code, the speaker searches for injections like SQL, PHP, and HTML injections. Variables used in includes are reviewed, as are comments, variables, functions, and conditions. Register_globals is identified as a risk that can be emulated. The report would provide an executive summary, problems summary, and details on vulnerabilities found. Community involvement and continuous auditing are recommended for security.

For IT teams and PHP devs, the document provides best practices and tips for building secure and maintainable code. Key points include: 1) Sanitize all input to prevent XSS and SQL injection attacks. 2) Follow security best practices such as using prepared statements and encryption. 3) Leverage existing frameworks and components instead of reinventing functionality. 4) Handle errors and exceptions properly through logging and exceptions.

The document discusses modular and event-driven UI architectures. It describes modules as single, solid units with defined interfaces that can be composed of other modules. An event-driven architecture uses a publish/subscribe pattern where events can be triggered and other parts of the code can listen and respond to those events. Backbone.js is presented as a popular MV* framework for building modular single page apps in an event-driven and RESTful way using models, views, collections, and a router.

The document discusses PHP coding standards and conventions. It introduces PSR (PHP Standards Recommendation), which includes standards for autoloading (PSR-0), basic coding (PSR-1), coding style (PSR-2), logging (PSR-3), and improved autoloading (PSR-4). It also discusses DocBlocks and PHP_CodeSniffer, which is a tool for checking code against coding standards.

The document discusses coding standards, code reviews, and related tools. It emphasizes that coding standards provide structure and consistency that avoids arbitrary variations. Standards help produce unified, understandable code and reduce bugs. The document outlines some specific standards for areas like commenting, naming, collections, and exceptions. It addresses adopting standards through incremental changes and code reviews. Code reviews are presented as an important way to catch bugs early, enhance learning, and promote collective code ownership. Various tools for code analysis, style checking, and code metrics are also mentioned.

Static analysis tools can analyze code without executing it to find bugs and issues. The document discusses several static analysis tools for PHP like PHPMD, Phan, PHPCS, PHPLOC, Deptrac. It explains what they do, like PHPLOC gathering complexity metrics and Deptrac checking for violations of defined layer dependencies. In the end, it recommends using static analysis in CI and not trusting results blindly without understanding the underlying errors.

MyApp provides JavaScript best practices including: 1) Using namespaces to avoid naming collisions and define packages like MyApp.string.utils for reusable functions. 2) Branching code during initialization or lazily on first use to handle browser differences efficiently. 3) Passing configuration as an object instead of many parameters to simplify function calls. 4) Defining private methods and properties using closures to encapsulate code. 5) Employing self-executing functions for one-time initialization tasks. 6) Allowing method chaining for readability when calling several related methods.

Modern Static Code Analysis in PHP: tolls generations, tools examples and my opinionated vision of things.

We've all been faced with legacy code and often decided to rewrite, feeling it will be easier. There are many reasons this can be wrong. Adam Culp will talks about the entire journey of refactoring a legacy code base. He will begin with assessment and why, move on to planning how and when, cover execution and testing, give step-by-step examples, and even show how to manage the process effectively. Attendees will gain insight and tips on how to handle their own pile of code and refactor happy.

My talk will be mostly oriented towards the JavaScript ecosystem and the modern frameworks that enforce a component based approach towards building your UI. I will try to speak a lot from my recent experience with React.js and if time permits, I will demo some smaller apps just to show everyone how easy it is to play with React.