2014 11-18 rip onload

Node.js is a JavaScript runtime built on Chrome's V8 engine that allows JavaScript to run on the server side or as a standalone application. It uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, as it can handle multiple concurrent connections while waiting for responses. Common uses of Node.js include building web servers, real-time applications, command line tools, and more due to its asynchronous and event-driven nature.

The document discusses Service Workers, which allow web applications to work offline by caching assets and responding to fetch events. Some key points covered include: - Service Workers can be used to cache assets on install to enable offline usage. They also allow programmable caching and handling of fetch events. - Other capabilities include background processing and push notifications. The standard is maintained by the W3C. - Service Workers have a lifecycle of registration, installation, and activation. They are scoped to URLs and can handle fetch events for navigation and subresource requests.

This document discusses event loops and how they work. Event loops allow non-blocking operations by listening for events like network data or user input in parallel. They achieve this through callbacks, select(), threads, or other asynchronous programming techniques. Common examples of event loops include browser JavaScript, game engines, servers, and other applications that perform non-blocking IO operations. Event loops can be complex to work with correctly due to issues like race conditions, so abstractions like promises are recommended.

A brief introduction for start using Docker! Includes brew2docker (which is still relevant), writing Dockerfile's, building images from scratch etc.

To people responsible for the health of web properties, monitoring, measurement, and analysis of real-user experiences is key to delivering a consistent and delightful experience. Drawing on their experience with the open source boomerang project, Philip Tellis and Nic Jansma explore various tools and methods available to measure real-user performance in the browser. Topics include: Available browser APIs: Navigation Timing, Resource Timing (Levels 1 and 2), User Timing, Error Logging, and more Measuring full-page apps Measuring single-page apps RUM SpeedIndex Measuring continuity Hacks when an API isn’t available Avoiding the observer effect Filtering data to get rid of noise Identifying outliers and treating them differently

I believe ServiceWorker is one of most important specifications for the next web world. Offline and its technologies are very friendly concepts to native application developers. But, now I think front-end developers have to know that for stepping into new paradigm. With ServiceWorker, you can make your web application can run offline, and it also means you can make your web application load extremely fast. I've told about ServiceWorker very briefly in this slide. But you can understand how ServiceWorker runs on. If you want to know its usage, I highly recommend Topeka, which is a polymer demo application at google I/O 2014, that also includes material design and ServiceWorker in inside of it. If you want to know ServiceWorker some more or in detail, I'd like to recommend to read the following, written by Jungkee Song, one of authors of this spec. http://www.slideshare.net/jungkees/service-workers

This document discusses React.js and web development. It begins with an introduction to React.js and its history. It then covers key React concepts like components, JSX syntax, and the virtual DOM. It discusses why the author likes React, describing it as easy to learn and use with true reusable components. It also provides an overview of how the author uses React on both the client-side with tools like Webpack, Babel, and Flux and the server-side with Node.js, Express, MongoDB, and other technologies.

This document discusses React, Flux, and Redux frameworks. It provides an overview of each: React is a JavaScript library for building user interfaces using reusable components. It uses a virtual DOM for efficient re-rendering. Flux is an architecture for unidirectional data flow between actions, dispatcher, stores, and views. Stores hold application state and logic. Actions describe events. The dispatcher routes actions to stores. Redux takes cues from Flux but with a single immutable state object and pure reducer functions. It is not limited to React and allows functional programming approaches like immutable data and pure functions.

This document provides a checklist and overview of basic security practices for securing an AngularJS application. It discusses securing the server, preventing man-in-the-middle attacks with HTTPS, preventing XSS with input sanitization, preventing XSRF with anti-CSRF tokens, and preventing JSON injection. The document also provides code examples and explanations of authentication, authorization, escaping user input, and implementing other security best practices in AngularJS.

Responsiveness to user interaction is crucial for users of web apps, and businesses need to be able to measure responsiveness so they can be confident that their users are happy. Unfortunately, users are regularly bogged down by frustrations such as a delayed "time to interactive” during page load, high or variable input latency on critical interaction events (tap, click, scroll, etc.), and janky animations or scrolling. These negative experiences turn away visitors, affecting the bottom line. Sites that include third-party content (ads, social plugins, etc.) are frequently the worst offenders. The culprit behind all these responsiveness issues are “long tasks," which monopolize the UI thread for extended periods and block other critical tasks from executing. Developers lack the necessary APIs and tools to measure and gain insight into such problems in the wild and are essentially flying blind trying to figure out what the main offenders are. While developers are able to measure some aspects of responsiveness, it’s often not in a reliable, performant, or “good citizen” way, and it’s near impossible to correctly identify the perpetrators. Shubhie Panicker and Nic Jansma share new web performance APIs that enable developers to reliably measure responsiveness and correctly identify first- and third-party culprits for bad experiences. Shubhie and Nic dive into real-user measurement (RUM) web performance APIs they have developed: standardized web platform APIs such as Long Tasks as well as JavaScript APIs that build atop platform APIs, such as Time To Interactive. Shubhie and Nic then compare these measurements to business metrics using real-world data and demonstrate how web developers can detect issues and reliably measure responsiveness in the wild—both at page load and postload—and thwart the culprits, showing you how to gather the data you need to hold your third-party scripts accountable.

This document discusses JavaScript events and event listeners. It begins with an introduction that defines events as notifications that specific actions occurred, like user or browser actions. Event handlers are scripts that are executed in response to events. Events can be used to trigger JavaScript code that responds to user interactions. The document then provides examples of common event types like onclick, onsubmit, onmouseover, onmouseout, focus, and blur. It also discusses how to add and remove event listeners using addEventListener() and removeEventListener() methods. The document concludes with an example demonstrating how events can be used to change an HTML element in response to user clicks.

Over the past year we have seen a lot of excitement around Progressive Web Applications. Browser evangelist are selling developers and business owners on their advantages and promising future. But what is the real story? What are the details to proper execution? What do engineers need to know to make their web sites into Progressive Web Applications that not only meet the minimum criteria, but meet the sales hype? Searching the Pokedex offline is fun, what is the real experience like caching a business application? Caching application assets and data can be complex, especially for larger applications. What to cache, how long to cache and how to cache are all valid questions. Often, in an effort to just ship something, we cache nothing. When we don't cache, we disappoint the customer and miss a key promise of progressive web applications.

This document discusses DOM (Document Object Model) and events in JavaScript. It covers DOM node retrieval, the document tree structure, child, sibling and parent node relationships, DOM manipulation methods like appendChild and innerHTML, event handling and the bubbling and default behaviors of events.

Minko is a platform to display, share and interact with 3D content from anywhere, whether you're on a web browser, a workstation, or a device that fits in your pocket. In order to reach those targets with the team we have, we had to go with a cross-platform, hybrid solution that would enable fast UI development with native 3D performances. So we built one, on top of many open source projects, using C++. This talk will discuss our approach for building cross-platform HTML5 interfaces, with a C++/JS bridge to bind DOM APIs, and the tricks we use to make them responsive (spoiler: React is one of them).

The document discusses different approaches for managing application lifecycles and dependencies in Clojure applications. It presents atoms, maps, and components as options, evaluating each approach. Components are determined to be the best option, as they provide lifecycle management capabilities, allow dependencies to be defined, and keep application logic together and reload-friendly, while still maintaining pure functions. Some caveats are mentioned, such as components being invasive and records sometimes being weird to work with.

Given at YAPC::EU 2012 Dancer + WebSocket + AnyEvent + Twiggy This in *not* a talk about doing a hello world in Dancer, as there are plenty of it. This is a real-life example of using Dancer to address a problem in an elegant and powerful way At $job, we have cpan mirrors. We want them to stay a bit behind the real CPAN for stability, but we have a tool to update modules from the real CPAN to our mirrors. Cool. I wanted to have a web interface to trigger it, and monitor the injection. This problem is not a typical one (blog, wiki, CRUD, etc). Here we have a long running operation that shall happen only one at a time, that generates logs to be displayed, with states that need keeping. In this regard, it's interesting to see how Dancer is versatile enough to address these situations with ease. This talk details how I did that, the technology I used, and the full source code (which is quite short). I used Dancer + WebSocket + AnyEvent + Twiggy + some other stuff. This talk doesn't require any particular knowledge beyond basic Perl, and very basic web server understanding.

Vagrant allows developers to easily create and manage virtual machine environments for development. It provides a simple configuration file format and CLI to automate the setup of VMs using various providers like VirtualBox, VMware, AWS, and more. Vagrant can provision VMs using tools like Chef, Puppet, Ansible and Shell scripts. It aims to allow exact clones of production environments for testing and to simplify tasks like testing infrastructure changes.

This document discusses GWT architectures and lessons learned from GWT development. It covers topics like structuring the UI with widgets, talking to servers, and shifting to rich internet applications. It provides tips for development like using MVP patterns, handling events, avoiding maintainability issues. It also discusses using GWT-RPC and generics for type-safe communications and batching commands for efficiency. Overall it focuses on architectural best practices, common problems, and solutions for building maintainable and performant GWT applications.

This document provides a complete guide to Node.js, covering installation methods, checking installation, modules, NPM, events, streams, and persisting data. It discusses installing Node.js from nodejs.org, using a version manager like NVM, or compiling from source. It also covers creating a basic web server, reading and writing files, uploading files, and using Socket.IO for real-time applications.

This document provides an overview and introduction to the webOS platform. It discusses the webOS architecture including application architecture using stages and scenes. It covers building a basic "Destroy World" app using the command line tools. It also discusses the webOS emulator, advanced APIs like camera, storage and accelerometer access. Finally it discusses submitting apps to the webOS app catalog and a promotion for hot new apps.

The document discusses improving performance for mobile web experiences. It begins by outlining some of the key reasons why mobile web is typically slower than desktop, such as network latency and bandwidth limitations. It then examines the current state of the mobile web, including average page sizes and number of requests. The document proposes that responsive design alone is not enough to optimize for mobile and introduces the concept of adaptive or responsive design with server-side components (RESS). Some techniques discussed for RESS include device detection, image optimization, and CSS processing to remove unnecessary styles. The overall message is that a hybrid approach considering server capabilities alongside responsive design can help create faster, lighter mobile web experiences.

This document provides information about an upcoming Box Guy event, including sponsors, speakers and sessions. On the first day, there will be a presentation on FusionReactor at 12:30pm and a podcast at 6:30pm. The second day will feature a lunch with Pete Freitag at 12:30pm. Attendees can enter raffles by tweeting with #intothebox. The event also promotes Ortus' consulting services and modernization approach for CFML applications.

Nicholas Zakas presented on optimizing the performance of the Yahoo homepage redesign from 2010. The new design added significant functionality but also increased page size and complexity, threatening performance. Areas of focus included reducing time to interactivity, improving Ajax responsiveness, and managing perceived performance. Through techniques like progressive rendering, non-blocking JavaScript loading, and indicating loading states, performance was improved and maintained users' perception of speed. The redesign achieved onload times of ~2.5 seconds, down from ~5 previously, while perceived performance matched the previous version.

Overhauling one of the most visited web sites in the world is a major task, and add on top of it the pressure of keeping performance the same while adding a ton of new features, and you have quite a task. Learn how the Yahoo! homepage team achieved performance parity with the previous version even while adding a ton of new features.

This document discusses using JavaScript on the server side with Node.js and the YUI framework. It begins by explaining why server-side JavaScript is useful and discusses JavaScript runtimes like V8, SpiderMonkey, and Rhino. It then covers Node.js, CommonJS frameworks, and how to use YUI modules on the server by enabling YUI's module loader. Examples are provided for accessing remote data, rendering HTML on the server, and implementing progressive enhancement.

This document discusses improving automated web application testing. It begins with an introduction and agenda. Some key points: - Testing at Google expects test code quality to match production code quality. Tests must be maintainable and meet engineering standards. - The present focuses on Selenium/WebDriver automation best practices and things to avoid. Base classes and locator organization can help improve test robustness and maintainability. - The future may include more exploratory testing tools like WebTestingExplorer for automated exploratory testing. Overall the document provides guidance on using Selenium/WebDriver for web application testing in a best practices way, focusing on test code quality, maintainability, and anticipating future changes. It emphasizes organizing tests through

Fast Cordova applications This document provides techniques for improving the performance of Cordova applications. It discusses ways to use the DOM efficiently by caching elements, minimizing reflows, and interacting with the DOM less frequently. It also covers optimizing events, network usage, CSS features, and memory management. The overall goal is to understand what makes a Cordova app fast and provide techniques to improve performance.