In this talk, Chris Mills discusses the historic problems with web apps and which technologies are stepping up to fill the holes. This includes device APIs such as Web Activities, Camera, device orientation and nfc, offline apps (which are finally looking realistic thanks to service workers), installable apps, and high quality games and other immersive high performance experiences using such features as Web audio API, Pointer lock, asm.js and Emscripten.
High Performance JavaScript (YUIConf 2010)Nicholas Zakas
Ever wonder why the page appears frozen or why you get a dialog saying, "this script is taking too long"? Inside of the browser, JavaScript and the page's UI are very intertwined, which means they can affect each other and, in turn, affect overall page performance. Ensuring the fastest execution time of JavaScript code isn't about geek cred, it's about ensuring that the user experience is as fast and responsive as possible. In a world where an extra second can cost you a visitor, sluggishness due to poor JavaScript code is a big problem. In this talk, you'll learn what's going on inside the browser that can slow JavaScript down and how that can end up creating a "slow page". You'll also learn how to overcome the conspiracy against your code by eliminating performance bottlenecks.
Peter Lubbers from Kaazing gave a presentation on HTML5 features such as Web Workers, Geolocation, and WebSockets. He discussed how these new technologies allow for asynchronous background processing, location detection, and bi-directional real-time communications without polling. Browser support for HTML5 features was also reviewed.
webOS is an open source mobile operating system from Palm built on HTML5, CSS, and JavaScript that uses the Mojo framework for application development and provides services through a plugin development kit and application programming interfaces, with apps distributed through an online app catalog.
High Performance JavaScript (Amazon DevCon 2011)Nicholas Zakas
The document summarizes techniques for improving JavaScript performance in web applications. It discusses how JavaScript execution blocks the browser UI thread, leading to unresponsive user experiences if scripts run for too long. It then provides recommendations to limit JavaScript execution times to under 50ms and describes load time techniques like placing scripts at the bottom of the page, combining files, and loading scripts dynamically or deferring their execution to improve page load performance.
This document introduces web workers, which allow JavaScript code to perform processor-intensive calculations without blocking the user interface (UI) thread. Web workers allow web pages to run multiple scripts simultaneously, improving performance for tasks like live syntax highlighting, crunching large amounts of data, and smooth animations. They work by executing scripts in background threads separate from the main script, so the UI thread is not blocked. Developers create and communicate with worker threads to offload processing work from the UI thread.
This document discusses web workers, which allow JavaScript to execute tasks in background threads apart from the main execution thread. It covers the need for web workers due to JavaScript's single-threaded nature. There are two types of web workers - dedicated workers which are linked to a single script, and shared workers which can be accessed by multiple scripts. The document outlines the web workers API, how to communicate with workers using message passing, and provides examples of dedicated and shared workers. It also discusses browser support for web workers and how to check for support.
Keeping the frontend under control with Symfony and WebpackIgnacio Martín
Webpack tutorial with tips for Symfony users. Topics covered include: current frontend trends, setup, loaders, dev tools, optimization in production, bundle splitting and tips and tricks for using webpack with existing projects.
Symfony Munich Meetup 2016.
React is a UI library that is changing the way web applications are written. While there are many benefits to using React, managing an application's complexity as it scales is one of the most powerful.
Building Cross Platform Apps with ElectronChris Ward
Electron is a fantastic tool for creating cross-platform apps with HTML, CSS, and JavaScript that look and feel relatively native to the hosted Platform. In this presentation I'll give a quick overview of what's possible.
The document discusses responsive interfaces and how to keep the user interface responsive when executing JavaScript. It explains that the UI thread is used for both drawing updates and running JavaScript, so no updates can happen while JavaScript runs. It recommends keeping JavaScript execution under 50ms to avoid unresponsiveness, and describes using timers and web workers to split processing over multiple ticks to keep the UI responsive.
The document discusses lessons learned from examining popular jQuery plugins. It summarizes 30 top plugins, describing why each was created and how it grew. Key takeaways are that authors build plugins to make something better, for fun/exploration, or client needs. Managing features and user feedback is challenging. The best plugins have great demos, documentation, browser support testing, and are fun. The author is available for questions.
An introduction about JavaScript web workers I gave at BerlinJS on the 18th of July 2013. It introduces the concept of web workers for simple parallel processing in client side JavaScript.
This document contains slides from a presentation on Polymer and modern web APIs. The slides discuss how Polymer uses web components to build reusable custom elements, and how this allows for component-based development. They provide examples of popular elements like <paper-tabs> and <core-toolbar> that are used as building blocks. The slides also showcase several production uses of Polymer at Google scale, including the Google Santa Tracker application. They emphasize how Polymer leverages modern web platform APIs to build fast, modular, and powerful applications.
Disrupting the application eco system with progressive web applicationsChris Love
Progressive Web Applications (PWA) is a comprehensive term describing web applications that implement a base set of browser platform features like HTTPS, Web Manifest and Service Workers. But it bleeds beyond the scope of an application's code because browsers are enabling qualified web applications to offer the same user experiences native application enjoy. This includes prominent home screen placement, push notifications, eliminated browser chrome and app store placement.
Become a Progressive Web App expert with my course: Progressive Web Apps (PWA) Beginner to Expert -> http://PWACourse.com
Node JS Express : Steps to Create Restful Web AppEdureka!
Node.js uses JavaScript - a language known to millions of developers worldwide - thus giving it a much lower learning curve even for complete beginners. Using Node.js you can build simple Command Line programs or complex enterprise level web applications with equal ease. Node.js is an event-driven, server-side, asynchronous development platform with lightning speed execution. It is open source and cross-platform, running on OS X, Linux and Windows. It also has an open source community that produces amazing modules available for use in your project for additional functionalities. Node.js helps you to code the most complex functionalities in just a few lines of code. The topics covered in the presentation are :
1. Understanding NodeJS Express
2. Creating Restful Web App
3. What is NPM
4.Templates in Express
Vue.js is a JavaScript framework that provides two-way binding between DOM and JavaScript, a template language for declarative rendering, and supports installation via npm, direct download, or a script tag. It allows defining where rendering will occur, setting up data, and rendering data to the DOM. Components provide reusability through templates, logic, and styles. Additional features include routing, state management with Vuex, and use of the Vue CLI for scaffolding single file components.
High Performance JavaScript - Fronteers 2010Nicholas Zakas
For much of its existence, JavaScript has been slow. No one complained until developers created complex web applications with thousands of lines of JavaScript code. Although newer JavaScript engines have improved the situation, there's still a lot to understand about what makes JavaScript slow and what you can do to speed up your code.
2017/01/23【F2E&RGBA Meetup】所分享的內容
簡介:
PWA (Progressive Web App) 是 Google 在 2015 年所提出的概念,2016 年我們開始看到許多 PWA 應用像是 The Washington Post、Flipkart、Gmail、AliExpress、Wikipedia、Flipboard、Booking 等實務案例,本次分享將介紹 PWA 與 HTML5 Offline API 搭配 Service Worker,讓我們的網站在離線的時候還能夠進行瀏覽,打造出更好的用戶體驗。
活動網址:
http://f2e.kktix.cc/events/f2e6-56d17c-0f9e5b-3997b7-a9203f-d684fd-886f38
Introduction to JQuery, ASP.NET MVC and SilverlightPeter Gfader
This document provides an overview of a presentation on jQuery, ASP.NET MVC, and Silverlight. It discusses jQuery being a lightweight JavaScript library that makes web development simpler. ASP.NET MVC is presented as an alternative to WebForms that separates concerns into models, views, and controllers. Silverlight is introduced as a technology for building rich interactive applications for the web using .NET.
Lapset ensin - Kainutlaatuinen tapa edistää lasten ja perheiden hyvinvointia THL
Matti Heikkinen, perhepalvelujohtaja, YTL
Kainuun sosiaali- ja terveydenhuollon kuntayhtymä. Esitys LAPE-muutosohjelman yhteistyöverkoston tapaamisessa 10.10.2016.
This presentation shares some ideas and insights on Guerrilla education that may help in improving learning experiences related to the Web and web development/design. It also gives thoughts on Mozilla's new education tools and where things are going in the near future.
The document discusses the various media technologies used at different stages of creating a documentary project. Adobe Premiere Pro was used to edit video clips, add sound, adjust audio levels, and apply effects. Photoshop was utilized to design a newspaper advertisement. Blogger hosted documents, photos and videos related to the media work. A Sony HD camera and tripod captured quality footage, while a clip mic recorded clear interviews. Tagul created an interactive tag cloud with information. Prezi and PowerPoint/SlideShare helped present research, while YouTube shared the final documentary and provided archive footage.
Steven Campbell's slides from the June 2014 BACN meeting on Catching the Marketing Bug, also known as Teach Your Brain to Love Marketing, or how to invoke Constructive Motivation to help you get tasks like marketing done.
Costa Rica Real Estate Opportunities tour, bargains for both self directed IR...Pacific Lots of Costa Rica
This slide deck is for a Webinar that will be broadcast February 2014 about opportunities to purchase discount real estate properties in Costa Rica, how to join a scouting tour visiting projects that have given discounts and special incentives to work with the organizers. The tour will offer a 3 day visit to Costa Rica that will be free of charge to anyone who purchases any of the special deals the team has negotiated with the sellers. Great bargains will be available including large discounts, two for one offers, percentage off specials, pre-development and founders club purchase opportunities. In every case the organizers have done extensive review and due diligence on all the projects and properties represented.
La reforma hacendaria propone establecer una red de protección social para todos los ciudadanos y acelerar el crecimiento económico mediante la introducción y modificación de varios impuestos. Mantendrá exentos los servicios médicos, transporte urbano, libros y revistas del IVA. También busca facilitar trámites, formalizar comercios informales y aplicar impuestos al carbono, refrescos y plaguicidas para fines ambientales y de salud pública.
Las posibilidades del_blog_como_elemento_de_apoyo_y_refuerzo_en_el_aprendizajePriscy Ayala
El documento explora el potencial de los blogs como herramienta de apoyo y refuerzo para el aprendizaje, escrito por María José Hernández Serrano y publicado en 2009 por Ediciones Universidad de Salamanca.
Este documento describe algunas clases predefinidas en Java como String, Math y las clases envoltorio. La clase String permite manipular cadenas de caracteres mediante métodos como length(), substring(), equals(), etc. La clase Math contiene constantes y métodos estáticos para operaciones matemáticas como seno, coseno, logaritmos, raíz cuadrada y generación de números aleatorios. Las clases envoltorio como Integer, Float y Double permiten tratar valores elementales como objetos con funcionalidades adicionales.
Publicación de mi árticulo en revista evalúa de la cc.mm. corrientes novedo...as o
Este documento presenta una revista de la Red de Evaluadores de la Comunidad de Madrid. Incluye artículos sobre experiencias en evaluación y calidad en hospitales y empresas de evaluación, así como noticias, premios, formación y eventos relacionados con la evaluación y la calidad en los servicios públicos.
The document provides crime statistics for the Lakewood Police Department for April 2010 compared to the same period in 2009. It summarizes that part one crimes such as violent crimes (assault, homicide, rape, robbery) and property crimes (arson, vehicle theft, burglary, theft) decreased by 10.1% in April 2010 compared to April 2009. Specifically, it notes decreases in property crimes such as burglary and decreases in violent crimes such as aggravated assault and rape compared to the previous year. Gang arrests for 2010 through May 1st totaled 25 arrests.
Smoking can seriously damage your health. It leads to many diseases like cancer, heart disease, and lung disease. For your health and those around you, it's best to avoid smoking or to quit if you currently smoke.
This document discusses open source and provides guidance on how to do open source. It explains what open source is, why developers should consider it, and how to structure an open source project. Key steps include identifying the scope of the project, abstracting the code, choosing an open source license, standardizing build processes, documenting code, ensuring quality through testing and CI/CD, and making the project visible to gain contributors. The overall message is that going open source allows for improved quality and quantity of code through community involvement, but it shouldn't be forced if it isn't a good fit.
Este documento presenta los Núcleos de Aprendizajes Prioritarios para la asignatura de Educación Tecnológica en 1o, 2o y 3o año de la Educación Secundaria. Explica que estos núcleos fueron elaborados a través de un proceso federal de consulta y acuerdo entre representantes educativos de todo el país, y aprobados por el Consejo Federal de Educación. Además, introduce brevemente los contenidos de los núcleos de aprendizaje para 1o/2o año y 2o/3
Empowering the “Mobile Web”
with Chris Mills
“Mobile web” applications are often criticised for having inferior performance and a limited feature set, compared to “native” apps. To redress the balance, browser vendors are working on a number of technologies to grant them superpowers.
In this talk, Chris Mills will discuss the inherent historic problems with mobile apps and which technologies are stepping up to fill the holes. This includes device APIs such as Web Activities, Notification, Network Information and Vibration, offline apps, installable apps and performance enhancers such as asm.js and Emscripten.
Presented at FITC Toronto 2014 on April 27-29, 2014
More info at www.FITC.ca
This document discusses empowering the mobile web. It begins by defining the mobile web as the web experienced on mobile devices, with considerations for usability and responsiveness. It then addresses common arguments that native apps are better and outlines Mozilla's solutions, including their Firefox OS mobile platform, installable web apps, and APIs that allow access to device capabilities from the web. The document discusses the developer experience and tools provided by Mozilla and techniques like Web Workers, asm.js, and Emscripten that can improve web performance.
Electron - cross platform desktop applications made easyUlrich Krause
Ulrich Krause will be presenting at the Engage 2018 conference on May 22-23, 2018 in Rotterdam, The Netherlands. The presentation will cover building cross-platform desktop applications using Electron, a framework that allows creating such applications with JavaScript, HTML, and CSS. Krause will demonstrate how to build a basic "Hello World" Electron app, add features like menus, file access, and notifications, and how to package the application for distribution. Debugging techniques and ensuring the application works properly across different platforms will also be discussed.
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.
This document summarizes the Firefox OS, an open web platform for building mobile apps and customizing the user interface using HTML5, CSS, and JavaScript. It outlines key web APIs, the process for developing and publishing open web apps, and the different types of apps including regular web apps, installed web apps, and privileged web apps with additional capabilities. Security levels and permissions for APIs are also discussed.
Firefox OS allows developers to build apps and customize the user interface using HTML5, CSS, JavaScript, and Web APIs. Apps are developed as regular web apps, with the addition of an app manifest file. Apps can be published to the Firefox Marketplace or installed directly. The Firefox OS platform provides both regular web APIs as well as more privileged APIs that require permissions. Future plans include additional APIs for features like spell checking, peer-to-peer connectivity, and WebRTC. Developers can get help through IRC channels or mailing lists and try things out using emulators, boilerplate apps, and the Firefox OS developer preview.
The document summarizes key aspects of building Firefox OS to address issues with the mobile web. Firefox OS is Mozilla's attempt to make the web a first-class citizen on phones and tablets by starting with the web stack rather than trying to add the web to an existing OS. It has launched in several countries and aims to be an affordable alternative to feature phones and closed platforms. The architecture is based on Linux, Gecko, and web technologies. It provides predictable HTML5 support and addresses performance, fragmentation, security and hardware access through its design and web APIs.
Bringing the open web and APIs to mobile devices with Firefox OS - Whisky W...Robert Nyman
The document discusses building apps for Firefox OS using open web technologies like HTML5, CSS, and JavaScript. It explains that apps can be developed like regular web apps and then packaged for installation on Firefox OS devices. Developers can access device APIs for features like contacts, notifications, and sensors. The document outlines the steps to take which include developing the app, creating a manifest file, and publishing/installing the app. It provides details on various web APIs and permissions available to Firefox OS apps.
Electron Firenze 2020: Linux, Windows o MacOS?Denny Biasiolli
"If you can create a website, you can create a desktop application." This is the slogan of Electron, a framework for building desktop applications using web technologies such as JavaScript, HTML and CSS. But is that really so? Let's find out with a practical example.
Martedì sera, insieme a #DennyBiasiolli, abbiamo scoperto le varie funzionalità di #Electron durante il nostro ultimo evento di #CommitUniversity.
#Electron è un framework open source sviluppato e gestito da #GitHub.
Consente lo sviluppo di applicazioni GUI desktop utilizzando componenti front e back end originariamente sviluppati per applicazioni Web.
[Devoxx Morocco 2015] Apache Cordova In ActionHazem Saleh
Apache Cordova is a platform for building native mobile apps using common Web technologies (HTML, CSS and JavaScript). Apache Cordova offers a set of APIs that allow the mobile app developers to utilize mobile native functions such as (Audio, Camera, Contacts …etc) using JavaScript. jQuery mobile is one of the best mobile web application frameworks, which allows the web developers to develop neat mobile web applications. This session discusses why there is a need for Hybrid mobile development, the current challenges of mobile development, and how using Apache Cordova can help in overcoming many of these technical challenges. It also highlights the best practices of using Apache Cordova with jQuery mobile. Finally, it demonstrates a real Cordova mobile app for showing the audience the best practices of designing, developing, and deploying hybrid Android and iOS mobile apps.
This document compares native applications, web applications, and widgets for mobile devices. Native applications have direct access to device features but must be developed for each platform. Web applications can be written once and deployed anywhere but run inside the browser without direct device access. Widgets combine the cross-platform capabilities of web applications with the ability to access device features and run standalone like native applications.
Bringing the Open Web & APIs to mobile devices with Firefox OS - Geek MeetRobert Nyman
Firefox OS uses HTML5, CSS, and JavaScript to build apps that run on mobile devices. Developers can create open web apps using these technologies along with app manifest files and by taking advantage of device APIs for features like notifications, vibration, and battery status. The OS supports both packaged and hosted apps and uses a permission system to control access to privileged APIs for functions like contacts, messaging, and telephony. Future plans include additional APIs for areas such as peer-to-peer connectivity, NFC, and WebRTC.
This document provides an overview of popular JavaScript libraries including Dojo Toolkit, YUI, Prototype, and jQuery. It discusses problems they aim to solve like cross-browser inconsistencies. Key features of each library are mentioned like Dojo's widgets, YUI's controls, Prototype's Ruby-like syntax, and jQuery's chaining and node selection. The document also covers ideas from the libraries like progressive enhancement, animation APIs, and leveraging hosting on CDNs.
The document outlines Firefox OS and open web apps, including an agenda for a workshop on building apps for Firefox OS. It provides overviews of Firefox OS, developing open web apps using HTML5, CSS and JavaScript, app manifest files, and publishing/installing apps. It also describes various web APIs available to Firefox OS apps, including battery status, notifications, screen orientation, vibration, networking information, proximity sensing, ambient light detection, device storage, contacts, and activities. Future planned APIs are listed as well.
Although Web and mobile apps are getting more capable every day, often your application makes the most sense on the desktop. In this talk, we’ll look at some recent technologies that have allowed significant desktop apps — like Barnes & Noble’s NOOK Study e-textbook reader, or Adobe’s Brackets IDE — to be written in HTML5 and JavaScript. Projects like the Chromium Embedded Framework, node-webkit, and AppJS provide an excellent native-to-JS bridge. With them in hand, you can bring the full power of the Node.js and front-end ecosystems to bear, while still gaining the advantages of running as a native app.
This document discusses automating software deployments in .NET. It introduces the benefits of automation over manual deployments, including consistency and reducing human errors. It describes common automation techniques like using build scripts, configuration management, and database migrations. Specific tools mentioned include Psake for PowerShell builds, Migrator.NET for database schema changes, and services like Heroku, AppHarbor, BuildMaster and Octopus Deploy for release management and deployment. The document advocates setting up an automated deployment process to simplify releasing new code, configurations and database changes across multiple environments.
How to implement camera recording for USB webcam or IP camera in C#.NETOzeki Informatics Ltd.
More info: www.camera-sdk.com
Source code: http://www.camera-sdk.com/p_123-video-tutorial-on-how-to-record-video-in-c-onvif.html
Welcome to this presentation that explains step-by-step how to develop video recording feature for your USB webcam and your IP camera / ONVIF IP camera in C#.NET to be able to capture and save the camera image. Good luck, have fun!
The document discusses Firefox OS and its open web platform. It describes the key layers and components of Firefox OS including Gonk (infrastructure), Gecko (web engine), and Gaia (applications). It provides an overview of various web APIs available to Firefox OS applications for accessing device capabilities like notifications, vibration, battery status, and contacts. It also covers app development topics such as permissions, packaging versus hosting apps, and installing apps.
The document discusses ways to improve the efficiency, extensibility, and flexibility of the web, including through streams, WebAssembly, web components, service workers, and progressive web apps. Streams allow programmatic access to streams of data from the network. WebAssembly allows running compiled code in the browser faster than JavaScript. Web components define custom elements with encapsulated code. Service workers enable offline functionality and caching. Progressive web apps provide native app-like experiences through features like installing offline, home screen icons, and full screen.
Feedback handling, community wrangling, panhandlin’Chris Mills
Feedback is a big deal. As tech writers we want to receive adultation when the docs rock, or constructive criticism when there is cleanup required. Or EVEN BETTER, we want the engineers/community members/reddit readers/clowns giving the feedback to come on board and help fix the problems.
But. Actually tweaking the signal to noise ratio to something useful is really difficult. Especially when you are curating a site as enormous as MDN, the content of which is open licensed, multilingual, and open for public editing.
In this talk, MDN writer Chris Mills discusses topics such as how to choose the right feedback mechanism(s) for your situation, how to stem the torrent and get the right kind of feedback and contributions (actually useful), effective begging, stealing and borrowing, and how to balance being firm and keeping control of your product with being diplomatic and being able to sleep at night.
This set of slides accompanies the MDN workshop held at BrazilJS 2014. It features a guide to getting started with contributing to the Mozilla Developer Network documentation resource, and links to JavaScript and API work to get started on.
The document discusses various options for publishing documentation, including traditional publishing, self-publishing, online publishing through blogs, wikis, and packaged documentation. It argues that a hybrid approach combining several of these methods is best, allowing content to be updated instantly online and fed into packaged documentation. Building an engaged community around the documentation is also emphasized through communication channels, contributions, feedback mechanisms, and common interests or goals.
The document provides guidance on contributing to the Mozilla Developer Network (MDN) by making edits and additions. Some key points:
1. Contributing can be done for personal benefit, to help one's projects, or to benefit the wider development community by improving documentation.
2. Contributions can range from small fixes to larger additions like writing new articles, translations, or code samples.
3. The process involves creating an account, finding pages to edit or improve, and making changes - with reviewers able to revert anything problematic.
4. Contributors are encouraged to ask questions on mailing lists or IRC if unsure and to work with others in the community.
For years when designing web sites we'e had to use a lot of of image files--a lot!--for anything and everything. And I’m moving beyond content images here, thinking more about background images for textures, gradients, interesting borders, rounded corners, transparency, drop shadows, interesting fonts, and more.
This contributed to the whole experience being complicated, inflexible, and inefficient, with loads of assets and HTTP requests to deal with. Fast forward to the modern day, and the good news is that CSS now provides us with a lot of new tools for programmatically creating images for many common uses, making things a whole lot easier to handle.
In this talk Chris Mills will touch upon a number of more widely supported featured such as gradients, border-radius, border-image, and box-shadow, before moving on to what we can expect a bit further down the line with more nascent features like shaders, filters and masks. In addition, he will also briefly discuss what can be done about older browsers that do not support such features.
This is the full version of my main presentation for 2013, providing an overview of the most interesting new layout features available in CSS3, along with advice on supporting older browsers, and some context around why they are important.
This version of my main presentation for 2013, first given at the Camp Digital event in Manchester, provides an overview of the most interesting new layout features available in CSS3, along with advice on supporting older browsers, and some context around why they are important.
This presentation is a discussion of good and bad accessibility practices, leading up to the point that accessibility that accessibility should not be a separate subject, but instead should be a mandatory part of good web design.
This talk was given at the responsive web design event at Manchester Metropolitan university on December 5th 2012. It looks at responsive design from the standards perspective, starting with history, and how we got to where we are now, and looking at the technologies available for practicing RWD in the modern day and in the near future.
The world is now officially device-crazy!
Just look at the number of Mobile phones and tablets sold recently, and the number of ordinary people (not just geeks) who have a mobile device and a tablet in addition to their desktop computer, or have even dispensed with the desktop computer altogether.
It would be foolish of us to just design for desktop, or just for mobile. What we need is a way to optimize our layouts for a multitude of different screen sizes and other factors!
In this talk Chris Mills looks at media queries and viewport in detail:
Their origins in media types
Why media types failed for mobile and devices, and why media queries will succeed
Media query basics
Practical examples of how they work across modern browsers and devices
Exploring viewport - why it is needed, and how best to use viewport and MQ's together
A look forward to the future, and the @viewport proposal
Mobile first versus desktop first
The IE problem, and how we can slay that beast in this particular context
Device breakpoints versus content breakpoints. What works best?
Adapt and respond: keeping responsive into the futureChris Mills
Media queries blah blah blah. You've all heard that talk a hundred times, so I won't do that. Instead, I'll go beyond the obvious, looking at what we can do today to adapt our front-ends to different browsing environments, from mobiles and other alternative devices to older browsers we may be called upon to support.
You'll learn advanced media query and viewport tricks, including a look at @viewport, Insights into responsive images: problems, and current solutions, providing usable alternatives to older browsers with Modernizr and YepNope, other CSS3 responsive goodness - multi-col, Flexbox, and more, and finally where RWD is going — matchMedia, CSS4 media queries, etc.
Angels versus demons: balancing shiny and inclusiveChris Mills
The modern web developer faces a moral choice when creating sites and apps. The angel on your shoulder tells you to use standards and respect accessibility across users of AT, older browsers, mobile, etc. The devil on your other shoulder meanwhile tells you to use all the shiny, satisfy your ego, and leave user agents over two weeks old in the dust.
This talk walks you through the dilemma, looking at the perils of embracing the serpent and presenting solutions that will allow you to achieve a satisfactory compromise. We know the devil has all the good albums, and we want to rock out as much as you do! But not at the expense of the Web’s greatest strengths!
HTML5 and CSS3: does now really mean now?Chris Mills
Code at http://people.opera.com/cmills/css3book/css3-html5-dnrmn.zip. The browser vendors love them! The browser fans and cutting edge designers are producing some really remarkable stuff, but what do HTML5 and CSS3 really mean for you, the pragmatic designer on the street? If you sidle up to one of those guys and whisper "but what about IE6 support", they are likely to slap you in the face, or run away with their hands clamped over their ears, yelling "la lala lala, I can't hear you." In this talk, Chris Mills will have a look at some of the new features of HTML5 and CSS3 - new semantics, video, media queries, rounded corners, web fonts, drop shadows and more. He will show real world examples, and then look at how they actually perform on those shady older browsers we are often called on to support. He will then look at strategies for providing support for those older browsers, including using JavaScript, fallbacks, and progressive enhancement.
This presentation was given at the Greenwich university "Talk web design" day, 11th January 2012. It discusses what open web standards are and why they are a better alternative to proprietary technologies, what the W3C is and how web standards are created, and what relationship the W3C has with the rest of the web community.
The document provides an overview of HTML5, including its history, new semantic elements like <header> and <article>, improved forms capabilities with built-in validation, and error handling standardized in the specification. It discusses both benefits like leaner markup and criticisms like incomplete browser support for new features. Examples are given throughout to illustrate new HTML5 syntax and capabilities.
In this, my talk for Webinale in Berlin, June 1st 2011, I give an overview of HTML5 history and main features, relating it all back to how possible it is use develop with these new features today. Thanks to Patrick Lauke for allowing me to steal a lot of his slides ;-)
Inclusive design: real accessibility for everyoneChris Mills
Chris Mills gives a presentation on inclusive design and accessibility. He defines inclusive design as considering all users, including those with disabilities, using mobile devices, or with low bandwidth. He outlines 10 principles of inclusive design such as being equitable, flexible, simple and intuitive. He provides examples of how to implement these principles through techniques like adaptive layouts, alternative text, and consistent navigation. The overall message is that inclusive design benefits all users and is just good design.
The web standards gentleman: a matter of (evolving) standards)Chris Mills
This talk discusses standards evolution, HTML5 and CSS3 in detail. Starting with the history of HTML and CSS, it goes on to show how HTML5 and CSS3 were developed, why they were necessary, the problems they aim to solve, what the main new features are and why they are so useful, and how we can start using these features in the real world, right now. It also provides advice for the discerning web standards gentleman.
Optimizing content for the "mobile web"Chris Mills
In this presentation I discuss the mobile web: what it is, why it is lucrative, the limitations of developing for mobile, and how to best optimize web sites for viewing on mobile. This includes media queries, viewport and general best practices. I delivered this to a class at Oxford Brookes university on the 25th March 2011.
2. don’t worry about taking notes:
๏ These slides are all at slideshare.net/chrisdavidmills
๏ developer.mozilla.org
๏ @chrisdavidmills
๏ cmills@mozilla.com
๏ #mdn irc channel on mozilla irc
๏ dev-mdc@lists.mozilla.org mailing list
3. ๏ heavy metal drummer turned web nerd
๏ tech writer @ mozilla
๏ web tinkerer (HTML, CSS, JS)
๏ accessibility whiner
๏ educator
who am i?
mdn!!
9. Firefox os
We have this firefox os thing!
๏ open source project:
everyone can get involved
๏ everything runs on the gecko engine
๏ Gaia: UI and suite of default apps
๏ Gonk: the underlying kernel/haL
10. installable apps
not a new phenomenon, but...
๏ pretty recent concept for web technologies
๏ manifest file defines app (manifest.webapp)
๏ installation controlled by app installation and management apis
11. {
"version": "0.1",
"name": "To-do alarms",
"description": "My awesome open web app",
"launch_path": "/index.html",
"icons": {
"128": "/img/icon-128.png"
},
"developer": {
"name": "Chris Mills",
"url": "http://yourawesomeapp.com"
},
"locales": {
"es": {
"description": "Su nueva aplicación impresionante Open Web",
"developer": {
"url": "http://yourawesomeapp.com"
}
}, manifest example
12. var manifest_url = location.href.substring(0,
location.href.lastIndexOf("/")) + "/manifest.webapp";
function install() {
// install the app
var install = navigator.mozApps.install(manifest_url);
install.onsuccess = function(data) {
// App is installed, do something if you like
};
install.onerror = function() {
// App wasn't installed, info is in
// install.error.name
alert(install.error.name);
};
};
installation example
13. app types
Apps can be:
๏ hosted: just like a normal web site, but with a manifest and install
functionality
๏ packaged: zipped up, hosted somewhere (like the firefox
marketplace), verified
14. app payments
you can charge money for web apps
๏ payments api uses payment providers like bango
๏ receipt verification to make sure payments are completed
๏ in-app payments also available (fxPay, mozpay)
15. web runtime
web rt allows app installation on other platforms
๏ apk factory for android apps, which include native api equivalents
where possible
๏ similar native wrappers for desktop platforms
๏ firefox marketplace/Firefox will generate these
17. developer experience
we want to give the web a first class development experience,
alongside native ecosystems:
๏ documentation
๏ developer tools
๏ frameworks, templates, libraries
19. developer tools
developer tools
๏ firefox’s standard toolbox
๏ app manager webide
๏ remote debugging using connect...
๏ you can run gaia on the desktop with firefox mulet
๏ node-firefox
21. frameworks and libraries
ready made code to make development easier
๏ mortar app templates
๏ Web components
๏ firefox os boilerplate app
๏ phonegap support for firefox os
๏ and of course, ember, angular, backbone, yadda yadda
25. apis!!!
we want to control everything using web technology
๏ apis to handle access to device hardware, system functions, etc.
๏ security handled by permissions, in the manifest
26. api permissions
different apis have different permission levels:
๏ common apis can be accessed by any app
๏ privileged apis can only be used in packaged, verified apps (e.g.
contacts, camera, device storage)
๏ internal (certified) apis can only be used by vendor-installed apps
(e.g. sms, dialer, bluetooth)
27. var pick = new MozActivity({
name: "pick",
data: {
type: ["image/png", "image/jpg", "image/jpeg"]
}
});
web activities (intents)
29. pick.onsuccess = function () {
// Create image and set the returned blob as the src
var img = document.createElement("img");
img.src = window.URL.createObjectURL(this.result.blob);
// Present that image in your app
var imagePresenter = document.querySelector("#image-presenter");
imagePresenter.appendChild(img);
};
pick.onerror = function () {
// If an error occurred or the user canceled the activity
alert("Can't view the image!");
};
web activities
30. var img = '/to-do-notifications/img/icon-128.png';
var text = 'HEY! Your task "' + title + '" is now overdue.';
var notification = new Notification('To do list', { body: text, icon:
img });
notification
31. window.navigator.vibrate(200); // vibrate for 200ms
window.navigator.vibrate([100,30,100,30,100,200,200,30,200,30,200,200,10
0,30,100,30,100]); // Vibrate 'SOS' in Morse.
vibration
32. window.addEventListener('devicelight', function(event) {
var html = document.getElementsByTagName('html')[0];
if (event.value < 50) {
html.classList.add('darklight');
html.classList.remove('brightlight');
} else {
html.classList.add('brightlight');
html.classList.remove('darklight');
}
});
ambient light events
37. getusermedia
var constraints = { audio: true };
var onSuccess = function(stream) {
// do stuff with your media stream
};
var onError = function(err) {
console.log('The following error occurred: ' + err);
}
navigator.getUserMedia(constraints, onSuccess, onError);
38. mediarecorder
var mediaRecorder = new MediaRecorder(stream);
record.onclick = function() {
mediaRecorder.start();
}
stop.onclick = function() {
mediaRecorder.stop();
}
mediaRecorder.ondataavailable = function(e) {
var audio = document.createElement('audio');
audio.setAttribute('controls', '');
var audioURL = window.URL.createObjectURL(e.data);
audio.src = audioURL;
}
39. nfc
function ndefDiscoveredHandler(activity) {
var data = activity.source.data;
var tag = navigator.mozNfc.getNFCTag(data.sessionToken);
console.log(tag instanceof MozNFCTag); // should print true
}
var request = tag.readNDEF();
request.onsuccess = function() {
var ndefRecords = request.result; // ndefRecords should be an array of
MozNDEFRecord.
};
40. nfc
navigator.mozNfc.onpeerready = function (evt) {
var peer = navigator.mozNfc.getNFCPeer(evt.detail);
console.log(peer instanceof MozNFCPeer); // should print true;
};
var request = peer.sendNDEF(ndefRecords);
var request = peer.sendFile(blob);
41. Web speech API
๏ work in progress
๏ doing speech synthesis and recognition in javascript, client-side
43. advanced communication
sometimes the web model can be a pain
๏ same origin security
๏ cors/systemxhr
๏ broadcast channels/message channels
๏ request response model
๏ web sockets
๏ webrtc
44. broadcast channels
// Connection to a broadcast channel
var bc = new BroadcastChannel(“test_channel");
// Example of sending of a very simple message
bc.postMessage("This is a test message.”);
// Exemple of a simple event handler that only
// logs the event to the console
bc.onmessage = function (e) { console.log(e); }
// Disconnect the channel
bc.close()
45. channel messaging
var channel = new MessageChannel();
var ifr = document.querySelector('iframe');
var otherWindow = ifr.contentWindow;
ifr.addEventListener("load", iframeLoaded, false);
function iframeLoaded() {
otherWindow.postMessage('Hello from the main page!', '*',
[channel.port2]);
}
channel.port1.onmessage = handleMessage;
function handleMessage(e) {
para.innerHTML = e.data;
}
48. offline is hard
The main problems are as follows:
๏ offline data storage
๏ offline asset storage
๏ detecting available network and reacting to it
49. offline data
this is not so bad:
๏ indexeddb, localstorage, websql
๏ (datastore api for firefox os)
๏ there’s something available in most browsers
๏ localforage library polyfills across browsers
50. offline apps/assets
offline app assets are a pain
๏ firefox os packaged apps are installed and available offline
๏ this doesn’t help the web at large
๏ we had app cache…
53. detecting network state
network state is also a pain
๏ Network information API is pretty unreliable
๏ you could check xhr responses, but this isn’t ideal
55. This could be the answer…
service workers are coming
๏ proxy servers that sits between your app and the browser
๏ intercepting network requests and customising responses
๏ does similar things to app cache (plus a lot more)
๏ granular control over actions
56. register service worker
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw-test/sw.js', {
scope: '/*'
}).then(function(sw) {
// registration worked
console.log('Registration succeeded.');
}).catch(function() {
// registration failed
console.log('Registration failed.');
});
}
61. web workers
web workers
๏ run scripts in a background thread
๏ don’t block the main thread execution
62. web audio api
web audio api
๏ precise control and manipulation of audio
๏ add effects to audio
๏ split and merge audio streams
๏ spatialise audio
๏ create audio visualisations
63. audiochannels
audiochannels api
๏ set different audio to play in different importance hierarchy
channels
๏ react to headphones being plugged in or unplugged
๏ more important audio can continue to play in the background, e.g.
music player audio
64. asm.js
asm.js
๏ a very efficient low-level subset of JS
๏ suitable for ahead-of-time optimizing compilation
๏ Unity3d now has asm.js/WebGL support
65. emscripten
emscripteN
๏ an LLVM to javascript compiler (well, asm.js, specifically)
๏ compile c++ (and others) into JS and run it on the web
๏ = “very fast shit” ™
๏ See emscripten.org
68. resources
๏ MDN: developer.mozilla.org/
๏ demos on github.com/mdn
๏ hacks blog: hacks.mozilla.org
๏ look up localforage - polyfill for indexeddb/websql/localstorage
๏ simplewebrtc.com - simple webrtc library
๏ emscripten.org - try quakejs.com
๏ asmjs.org
๏ mzl.la/openwebapps - give us your feedback on what the web
platform needs!