Developing for Mobile

2 parts of talking at Google Developer Summit 2016 Seoul - How to optimize loading performance your web app - Introducing to Service Worker & Offline 101

Puppeteer is a node library which provides a high-level API to control Chrome over the DevTools Protocol. When combined with the power of the web technologies, it can be used for automating image processing and batch file generation, creating automated visual testing with device emulation, tracking page loading performance, enforcing performance and code coverage budgets on CI, crawling a SPA, capturing a timeline trace of your site to help diagnose performance issues and more! We'll explore those capabilities of Puppeteer API with combination of DevTools protocol and cloud functions (FaaS) with a showcase of real life use cases demonstrated by live-examples. Finally, we’ll go through the existing puppeteer based SaaS solutions such as Checkly and Browserless.

Puppeteer is a node library which provides a high-level API to control Chrome over the DevTools Protocol. When combined with the power of the web technologies, it can be used for automating image processing and batch file generation, creating automated visual testing with device emulation, tracking page loading performance, enforcing performance and code coverage budgets on CI, crawling a SPA, capturing a timeline trace of your site to help diagnose performance issues and more! We'll explore those capabilities of Puppeteer API with combination of DevTools protocol and cloud functions (FaaS) with a showcase of real life use cases demonstrated by live-examples. Finally, we’ll go through the existing puppeteer based SaaS solutions such as Checkly and Browserless.

This document provides an overview of building progressive web apps (PWAs). It discusses the key technologies needed for PWAs including manifest files, service workers, and app shells. It provides examples of how to add a manifest to enable installable web apps, how to cache assets using service workers, and how to send push notifications. While Safari and iOS do not fully support these technologies yet, the document notes they are being developed for future releases.

This document discusses responsive image techniques for adaptive web design. It begins by explaining browser sniffing versus feature testing, and recommends using feature testing to determine browser width, screen resolution, and bandwidth instead of browser sniffing. It then covers techniques like using background-size to control image sizes, SVG for smaller file sizes, and font-based solutions. The document also discusses server-side techniques like .htaccess rewrite rules and client-side techniques like picture and HiSRC. It advocates for a mobile-first approach using CSS media queries and a single pixel GIF for responsive images.

Are you sure your app is secure enough? Do you want to scale your app to the next level? Come and join us for the Bandung JS Meetup #11. Save the date! Tuesday, March 27th 2018 Location : Bandung Creative Hub (Aula lt 5) Jl Laswi No 7, Kacapiring- Bandung We will have presentations by: 1. Galih Pratama - Head Front-end, Crowde.co on "Scalable Web Development by Vue.js" 2. Yahya Fadhlulloh - CTO, Crowde.co on "JS flaw Hackers Love to Abuse"

This document summarizes the history and evolution of web browsers and internet technologies from the early 1990s to the late 1990s. It traces the development of key browsers like Netscape Navigator and Internet Explorer. It also outlines the introduction of important web standards like HTML, CSS, JavaScript and XML. Major events included the commercialization of the web in the mid-1990s, the browser wars between Netscape and Microsoft in the late 90s, and the consolidation of online services providers toward the end of the decade.

The document discusses how Grunt can be used as a JavaScript task runner to automate repetitive tasks like minification. It provides examples of configuring Grunt tasks like Uglify to minify files and integrating it with package.json for an easy setup. Developers are encouraged to use Grunt as it allows configuring tasks in JavaScript instead of XML, is fast to set up, and helps focus on important work instead of repetitive tasks.

RSVP Node.js class at www.nycdatascience.com NYC data science academy's free workshop, given at NYC Open Data Meetup, http://www.meetup.com/NYC-Open-Data/events/163300552/

Slides apresentados no 16 EDTED, edição Rio de Janeiro, em 21 de Maio de 2011. Aqui não tem vídeos, animações e códigos apresentados, mas tem os links. Logo passo o link completo.

This document discusses adaptive images in responsive web design. It begins by introducing the speaker, Christopher Schmitt, and his credentials. It then explores using the browser's user agent string and feature detection to determine screen resolution and bandwidth rather than browser sniffing. The document discusses using CSS media queries, jQuery, and the picture element to serve adaptive images. It also proposes some workaround techniques like background sizing and SVG to improve responsive images.

Slides from Node.js and Twitter Bootstrap crash course given to Penn Graduate Computing Club. Covers creating basic node app, using the bootstrap grid, and deploying to an EC2 machine.

This document discusses jQuery UI and plugins. It provides an overview of jQuery UI classes that can be used to style elements. It also demonstrates several common jQuery UI widgets like buttons, accordions, dialogs, and tabs. The document discusses jQuery UI effects for animations and transitions. It provides tips for identifying good plugins based on aspects like their API, documentation, support, and community. Overall, the document is an introduction to using jQuery UI and evaluating jQuery plugins.

Para desenvolver um site institucional simples ou um hotsite pequeno, não é preciso muito mais que um pouco de HTML, um ou dois arquivos de CSS, alguns arquivos de JavaScript, e um sistema de CMS. No entanto, à medida que a complexidade de um site aumenta, o código passa a se tornar cada vez mais extenso, complexo, difícil de ser organizado, e projeto acaba virando um grande "code spaghetti". Para garantir que isso não aconteça, é necessário implementar uma estrutura sólida para o HTML, CSS e JavaScript, de modo que os componentes da aplicação funcionem independentemente e sejam facilmente mantidos e modificados. Nesta palestra, mostrei como elaborar uma arquitetura de front-end que sustente uma aplicação de larga escala.

Bower, Grunt, and RequireJS are just a few tools that have been re-shaping the frontend development world, replacing cluttered script tags and server-side build solutions with a sophisticated, but sometimes complex approach to dependency management and module loading. In this talk, we'll put on our trendy frontend developer hat and find out how these tools work and how they differ from what we might be used to. Most important, we'll see how using tools like this might look in Symfony2 and how our application can be a friendly place for a frontend guy/gal.

20100807 OSC Nagoya での講演資料 # スライドのみで見やすいよう若干整理 P5〜 Agenda P17〜 "HTML5" って何？ P56〜 HTML5 の範囲は？ P67〜 ブラウザのサポートは？ P94〜 IE6 はどうするの？ P118〜 使用上の注意 P147〜 便利なツールは？ P152〜 One Point Q&A P186〜 追加資料

The document discusses adaptive images in responsive web design. It covers using the browser's user agent string and feature testing to determine screen resolution and bandwidth instead of browser sniffing. Methods presented include using viewport width with JavaScript, jQuery, and CSS media queries; checking screen resolution directly and considering retina displays; and avoiding bandwidth speed tests. Workarounds discussed are using background-size: 100% with images, SVG, and a "Clown Car" SVG technique loading different image files via CSS media queries.

In this NeoGenomics Laboratory Company Overview Presentation 02/19/2014, you will find detail information on the following highlights: •Fast growing cancer genetics lab servicing Oncologists, Pathologists and Hospitals •Strategic client partnerships created by “Tech-Only” model •Dynamic, rapidly-growing and consolidating industry •Industry-leading revenue & test volume growth •Strong productivity and operating leverage leading to accelerating cash flow and net income •Strong Management Team with large cap lab experience

The document discusses the capabilities of HTML5 for building offline applications. It mentions several HTML5 features that enable offline functionality, including application cache, manifest files, and offline events. Application cache allows caching assets defined in a manifest file so the application can work offline. The offline event fires when the browser loses internet connectivity, informing the application it is now offline.

The document discusses the experiences and lessons learned from a software developer who became a full-time manager. It addresses how the work day and perspective changes from being a developer to a manager, with managers needing to context switch more and see the bigger picture. It also provides tips for what makes a great developer like reliably estimating tasks, being organized, and shipping work, as well as what makes a great leader like clear communication, pushing teams forward, coaching others, and setting a high bar for quality.

Flash over the years, has been used to prop up the regular browser like a sad old man drinking alone in a pub. Today browsers come shipped with technology designed to rival flash and aim to shut it squarely out of the game. Are browser ready to rock without Flash?

The document discusses a screencast on using jQuery for designers, noting that the screencast will cover getting started with jQuery, DOM navigation and manipulation, events, Ajax, and tips. It provides Remy's contact information and encourages asking questions during the screencast. The document also lists various jQuery resources like documentation, blogs, tutorials, and forums for getting help with jQuery.

This document provides a summary of the analytics available through SlideShare for monitoring the performance of presentations. It outlines the key metrics that can be viewed such as total views, actions, and traffic sources over different time periods. The analytics help users identify topics and presentation styles that resonate best with audiences based on view and engagement numbers. They also allow users to calculate important metrics like view-to-contact conversion rates. Regular review of the analytics insights helps users improve future presentations and marketing strategies.

As browsers explode with new capabilities and migrate onto devices users can be left wondering, “what’s taking so long?” Learn how HTML, CSS, JavaScript, and the web itself conspire against a fast-running application and simple tips to create a snappy interface that delight users instead of frustrating them.

In the beginning, progressive enhancement was simple: HTML layered with CSS layered with JavaScript. That worked fine when there were two browsers, but in today's world of multiple devices and multiple browsers, it's time for a progressive enhancement reboot. At the core is the understanding that the web is not print - the same rules don't apply. As developers and consumers we've been fooled into thinking about print paradigms for too long. In this talk, you'll learn just how different the web is and how the evolution of progressive enhancement can lead to better user experiences as well as happier developers and users. This deck is a conference-agnostic one, suitable to be shown anywhere without site-specific jokes!

Flaky browsers and connections present challenges for mobile web development. W3C Widgets offer a solution by allowing developers to create local applications using HTML, CSS, and JavaScript that run like native apps on any browser or device. Key aspects of widgets include their configuration file, widget object and methods, and security considerations when accessing device APIs. While still an emerging technology, widgets show promise as a cross-platform solution if browser support increases and issues around debugging, updating and security are addressed.

In the beginning, progressive enhancement was simple: HTML layered with CSS layered with JavaScript. That worked fine when there were two browsers, but in today's world of multiple devices and multiple browsers, it's time for a progressive enhancement reboot. At the core is the understanding that the web is not print - the same rules don't apply. As developers and consumers we've been fooled into thinking about print paradigms for too long. In this talk, you'll learn just how different the web is and how the evolution of progressive enhancement can lead to better user experiences as well as happier developers and users.

This document discusses the growing importance of mobile web development and some of the key technologies enabling it. It highlights HTML5 features like local storage and the canvas element that allow richer applications to be created. It also introduces several JavaScript libraries that can be used for mobile development, including PhoneGap, which allows creating apps for multiple platforms. Examples are given of simple to complex graphics that can now be created with these technologies.

The document provides tips for optimizing websites for mobile browsers. It discusses differences between mobile and desktop browsers like slower rendering speeds and varied browser families on mobile. It recommends strategies like embedding resources inline, caching assets locally, lazy-loading content, minimizing requests and file sizes, detecting devices, and testing on mobile emulators. The document emphasizes optimizing for the limitations of low-end mobile browsers.

Why packaging javascript as a static asset leads nowhere on the long run? Possible solution is rethinking the way the javascript is served