The image problem of the web and how to solve it…

Keynote at Codebits in Portugal, April 2014, explaining the how and why of Firefox OS and how to use it. Video: https://videos.sapo.pt/ZYQyY57ZlB6lhgIdBzrs

Microsoft has become more open in recent years by open sourcing many products, making products cross-platform, and making training materials openly available. This open approach makes business sense for Microsoft as it attracts developers, allows employees flexibility, and taps into outside skills. Examples of Microsoft's success with open source include the Edge browser, Visual Studio Code editor, TypeScript transpiler, and ChakraCore JavaScript engine. The presenter encourages attendees to help promote Microsoft's open products and projects through conference talks, writing, and contributing translations and code.

The document discusses whether WordPress should be considered a content management system (CMS) or just a blogging platform. It outlines some of the key features of a CMS and compares them to WordPress' capabilities. While WordPress can be used as a CMS, it may not be well-suited for complex workflows, custom applications, or digital asset management at large scales. The attitudes of WordPress and Drupal founders and their different focuses on usability versus engineering are discussed as factors that influence the platforms. The document considers whether WordPress would benefit from additional complexity and capabilities for CMS use cases or if simplicity should be preserved.

In the last year or so things changed drastically. Everybody uses an iPhone6, is connected 24/7 at high-speed without data caps, is healthy, has shiny teeth and loves spending money on your products. All you need to do is constantly innovate and you'll be a major success. The term for this is "the modern web". Another word for it is nonsense. There is a web people want and there is one that people use. We should start thinking about upgrading the one people use and stop chasing our own tail trying to mimick other environments.

The document discusses the evolution of the web from progressive web apps to native mobile apps and back again to progressive web apps. It notes that early mobile web faced issues like small screens, poor connectivity and unreliable browsers, leading to the rise of native apps. However, app distribution issues like slow updates and the "walled garden" approach of app stores have led to a renewed interest in progressive web apps that work offline but do not require app stores, allowing for more open distribution like the original web.

Keynote covering what Progressive Web Apps mean to the market and what issues of native apps they need to fix.

This document discusses using WordPress for non-profits. It provides examples of several non-profits that use WordPress including Earthen Vessels, Call and Response, Esplanade Association, Food Empowerment Project, and Generation Citizen. For each non-profit, it describes plugins or themes they use. It also lists some potential challenges of using WordPress like security, maintenance, cost of donation platforms, and email services. In conclusion, it thanks the audience and provides contact information for John Eckman of ISITE Design and CMS Myth.

This document contains the transcript of a presentation by Chris Heilmann on web development. Some of the key points discussed include: - The benefits of progressive enhancement and using HTML, CSS, and JavaScript together to build robust and accessible websites. - How limitations in early design can foster creativity. - The importance of error handling and defensive coding practices. - Embracing new technologies like Service Workers and Manifests to build Progressive Web Apps. - Rethinking the idea that JavaScript is unreliable and should not be depended on, as modern browsers have made it a capable tool.

This document discusses JavaScript and ES6. It covers some of the historical issues with JavaScript, the learning process, dependency on libraries/frameworks, and new features in ES6. It also discusses transpiling code to support older browsers, standards and interoperability challenges, and new JavaScript engines like ChakraCore that could break monopolies.

“If Tetris has taught me anything, it’s that errors pile up and accomplishments disappear” is a common quote and it seems we’re living this to its full extend as web developers. We fail to celebrate the successes we have and the tools that are at our disposal but we’re never short of finding reasons why things don’t work. We also tend to pile on technology on technology to solve problems that may actually not exist and thus clog up the web. In this talk Chris Heilmann wants to remind us what we achieved and how we should celebrate it and how we should stop trying to solve problems that are simply beyond our control.

The document discusses the challenges facing the progressive web and introduces progressive web apps (PWAs) as a solution. PWAs are built using modern web standards to provide native app-like experiences through features like push notifications, offline support, and app installation. They address issues with native apps like high installation friction, lack of control for publishers, and app store policies. PWAs are gaining adoption from companies like Alibaba and Housing.com who saw increases in user engagement metrics after implementing PWAs. The document outlines the core components of PWAs and provides an overview of browser and platform support.

ES6 and other extensions to JavaScript are exciting, but they have the problem that they are not backwards compatible. How can we deal with that issue? Or is it really one?

This document outlines John Eckman's presentation on structured content in Drupal and WordPress. In Drupal, custom content types can be created through modules and configurations, allowing complex sites to be built without coding. WordPress also enables custom post types, taxonomies, and fields through code or plugins to provide structured content. The presentation discusses lessons each system can learn from the other, such as Drupal improving simplicity and WordPress adopting a unified field API.

The document discusses how machines and software can help humans by doing tasks like preventing mistakes, performing repetitive tasks, filling information gaps, remembering and categorizing information, improving understanding, enabling new communication methods, and providing protection. It describes how advances in AI, APIs, cloud services, and data processing have made it possible to build useful and helpful interfaces. The conclusion encourages developers to use these capabilities to create simple, human-centric interfaces that benefit users.

A talk about future technologies of the web, and how our time is equally well spent cleaning up the web of now.

The document discusses the history and future of JavaScript and Node.js. It covers the promises and problems of JavaScript, how Node.js helped address some issues but created new ones like monoculture. It then discusses how ES6 and the ChakraCore engine can help modernize JavaScript and break the Node monoculture by providing an additional engine option. The author hopes for less drama, embracing change, simplicity, inclusiveness, and prioritizing users over developers.

Perhaps the greatest sea-change in the industry since the “Web 2.0″ meme, Responsive Design has been the unavoidable theme of the web industry in 2011 and 2012. But too much of the focus in responsive design has been on the mechanics: media queries, responsive images, javascript polyfills, and techniques for progressive enhancement. Not enough attention has been paid to how responsive sites and applications should be designed to take into account the needs and contexts of users. In short, we’ve been designing sites that respond to the needs (and capabilities) of *browsers* and *devices* rather than the desires and contexts of users. In this talk I cover strategies and processes you can follow which help ensure your web applications are truly responsive to business goals and user needs, not just device capabilities.

This document provides two tips for image processing. The first tip recommends using the Minimagick gem for image resizing and cropping, as it has a lower memory footprint than Rmagick. The second tip suggests using the image_optim gem to remove unnecessary metadata from images and better compress them, which can significantly reduce image file sizes without affecting quality. Both gems allow processing images more efficiently in terms of memory usage and file size.

(slides from the O'Reilly webcast, see recording here: http://www.oreilly.com/pub/e/3425) The web is becoming increasingly image rich. Between high-resolution mobile screens, Pinterest-style design and big background graphics, the average image payload has more than doubled in the last three years. While visually appealing, these images carry a substantial performance cost, and — if not optimized correctly — can make a web experience slow and painful, no matter how beautiful it is. These slides discuss how you can provide the eye-pleasing experience you want without sacrificing your site's performance. You'll learn about the three primary aspects of image optimization: Image Compression: How to best encode your images, delivering the same picture with the fewest bytes. Image Loading: Once your files are as small as they can be, we'll cover the best ways to make them show up quickly in the browser. Image Operations: Different tools and techniques for integrating image optimization on your site.

In computer science and information theory, data compression, source coding,[1] or bit-rate reduction involves encoding information using fewer bits than the original representation.[2] Compression can be either lossy or lossless. Lossless compression reduces bits by identifying and eliminating statistical redundancy. No information is lost in lossless compression.

This document discusses problem solving and decision making at the workplace. It outlines a problem solving model involving 6 steps: 1) recognizing and defining the problem, 2) gathering information, 3) analyzing the information, 4) developing and selecting solutions, 5) implementing the solution, and 6) evaluating the solution. It also describes a fishbone analysis tool used to identify root causes of problems by categorizing potential causes. Key aspects of effective problem solving include using a systematic approach, involving others, and evaluating solutions. The document also discusses making routine, adaptive, and innovative decisions and ingredients for good decision making such as following a process, involving teams, being creative and objective.

A logical step by step guide to solve business problems, that lead to a suitable decision making course.

http://www,saharconsulting.com An Educational presentation about Problem solving and decision making using different tools and offering solutions to problem solving, creative thinking and Decision making

This document discusses optimizing images and video for fast delivery on mobile websites. It begins by explaining that fast loading is a human perception based on time thresholds, with 100ms perceived as instant. The document then outlines 4 simple image optimizations: quality, format, sizing, and lazy loading. It provides examples of each optimization and data on real-world usage. Additional topics discussed include responsive images, animated GIFs, save-data considerations, and base64 encoding. The overall message is that images make up most web content and several techniques can significantly improve performance and user experience.

Practical Responsive Images. <picture> element, srcset attribute, picturefill, angularjs. Responsive Web Design needs Responsive Images Presentation from Breaking Borders on the topic of "framed" (Aug 2014)

Save 10% off ANY FITC event with discount code 'slideshare' See our upcoming events at www.fitc.ca OVERVIEW As most Android developers know, dealing with the extreme degree of fragmentation in the Android ecosystem is often challenging. Among the more difficult challenges is managing memory usage, as devices that are in the market today can have as little as 13MB of memory. Now imagine the pains that developers go through when faced with the headache of having massive bitmaps eat up memory in a millisecond. In this presentation, James Halpern will talk about the complexities of image and memory management in Android and walk you through the creation of a successful, powerful and open source image management utility. Come to this presentation to learn about techniques that will help you optimize the performance of your apps. Learn about Android’s memory limitations and the role the garbage collector plays in your app’s performance and complexity. Learn how to communicate android graphics issues to developers, and how good design can create fewer bugs. James will conclude this presentation by briefly walking you through his open sourced image management solution that gracefully handles most of these issues in a simple to use package.

Talk from Akamai Edge 2014 looking at some of our current web performance optimisation practices and how they may need to change as new standards and protocols emerge

This document discusses 4 simple optimizations that can be made to images on websites to improve performance: 1) Reducing image quality, 2) Using optimized file formats like JPEG, WebP and SVG, 3) Resizing images to actual display size, and 4) Implementing lazy loading so images outside the viewport are not downloaded. It provides examples and data on how each technique can significantly reduce data usage and improve load times.

This document discusses using Python in the animation industry. It describes how one person learned Python while working in animation. It also discusses using Python in Maya for animation work. The document then talks about building an animation pipeline using Python and ideas like version control, asset management databases, and behavior logging to analyze user interactions. It considers options like CouchDB and MongoDB for managing asset data and user behavior logs. Finally, it emphasizes that version control, databases, and cloud techniques can benefit many creative roles beyond just programmers.

Doug Sillars presented on optimizing mobile performance. He discussed common tools for testing performance like Video Optimizer and WebPageTest. Best practices for optimization included using HTTP/2, image formats like WebP and SVG, responsive images, lazy loading, and video format/quality adjustments. Factors that can impact video startup like manifest files, available bitrates, and 3rd party interference were also covered. The goal was to learn how to test mobile sites and apps, identify issues, and apply optimizations to deliver fast, high quality experiences to users.

This document summarizes Doug Sillars' presentation on optimizing mobile and web performance. The presentation covered testing performance with tools like Video Optimizer and WebPageTest, optimizing content delivery through techniques like HTTP/2, image optimization, lazy loading images, and video delivery best practices. Sillars stressed the importance of performance, noting that slow load times can cause high abandonment rates and lost revenue.

This document summarizes techniques for optimizing image delivery on mobile websites. It discusses 4 key optimizations: adjusting image quality, choosing optimal file formats like WebP, sizing images responsively, and lazy loading images below the fold. The document shows that these techniques can significantly reduce image file sizes and page load times based on analyses of 500,000 mobile sites. Specific tools are recommended for automating quality adjustments, format conversion, and responsive image breakpoint generation. Lazy loading is shown to improve user experience by deferring loading of off-screen images. Overall, the techniques can help images remain fast to load while retaining high quality for modern responsive delivery.

Learn more at: www.adobe.com/go/dam Speakers: Elliot Sedegah, Jonas Dahl DAM is evolving from a content library to an intelligent platform to deliver customer experiences. The latest advances in machine learning and analytics are a part of this transition as these new technologies begin to find a productive role in the world of DAM. From auto-tagging to insights - the DAM of the future is on the horizon. This presentation will discuss: - The latest advances in machine learning & AI that are enhancing the DAM user experience and automating many formerly manual tasks. - How data science & analytics are changing the way we track asset usage and performance.

This document discusses optimizing mobile performance. It recommends testing performance with tools like WebPageTest and Video Optimizer. It then provides tips for optimizing content delivery such as compressing text, resizing and compressing images, preloading video correctly, and starting video streams at a low bitrate for faster loading. The document stresses the importance of mobile performance and outlines best practices.

This document discusses optimizing images and video delivery for mobile websites. It provides 4 simple optimizations for images: quality, format, sizing, and lazy loading. For image quality, it recommends 85% quality for most images. For format, it suggests using webp, svg, and jpeg. For sizing, it discusses using responsive images at different breakpoints. For lazy loading, it notes the performance benefits. It also covers optimizing video delivery through formats, sizing, preloading, and streaming using adaptive bitrates in the manifest file. The goal is to reduce file sizes, speed up loading, and improve the user experience on mobile.

Mobile apps and mobile video need to be delivered quickly to keep your customers happy. This presentation was given in Brasov on 13/02/2018

Doug Sillars presented four simple optimizations for delivering fast and beautiful images and video on mobile: 1) reduce image quality, 2) use optimized formats like WebP and SVG, 3) size images appropriately, and 4) lazy load images below the fold. He demonstrated how these techniques can significantly reduce page load times and data usage. Sillars also discussed best practices for video delivery and alternatives to animated GIFs that can reduce file sizes substantially. Throughout, he provided real-world examples and tools to help optimize multimedia content for mobile performance.

This document discusses optimizing images and video for fast delivery on mobile. It recommends 4 simple image optimizations: reducing quality to 85%, using WebP format, resizing images responsively, and lazy loading images. For video, it suggests stripping audio from silent videos, resizing videos for mobile, and auditing third party videos. Testing sites with WebPageTest and analyzing trends with HttpArchive can help optimize content delivery.

This document discusses optimizing images and video for fast delivery on mobile websites. It provides 4 simple optimizations for images: quality, format, sizing, and lazy loading. For video, it recommends stripping audio from silent videos, resizing videos for mobile, and starting video streaming at lower bitrates. Testing tools mentioned include WebPageTest, HTTPArchive, ImageMagick, and libraries for lazy loading and responsive images. The overall message is that images and video can be both beautiful and fast with the right optimizations.

This document discusses optimizing images and video for mobile delivery. It begins by noting that images and video make up 75% of web content. It then outlines four simple optimizations for images: quality, format, sizing, and lazy loading. For each optimization, it provides examples and data on usage. It finds that adjusting quality to 85%, using responsive images, and lazy loading can significantly improve performance. For video, it discusses startup time, buffering, file size reduction techniques like removing audio and resizing, and delivery via streaming. The overall message is that minor optimizations to images and especially video can have large impacts on mobile performance and user experience.

This document discusses optimizing images for fast loading on mobile websites. It provides 4 simple optimizations: 1) reducing image quality, 2) using optimized formats like JPEG, PNG and WebP, 3) proper sizing of images for different screen widths, and 4) lazy loading images below the fold. The document shows how these techniques can significantly reduce image file sizes and page load times based on analyzing millions of real-world mobile sites.

This document provides an overview of optimizing images and video for delivery on mobile devices. It discusses four main optimizations for images: quality, format, sizing, and lazy loading. For quality, it recommends using 85% quality for JPEG images. For format, it suggests using formats like WebP, SVG and responsive images. For sizing, it discusses generating responsive image sizes. For lazy loading, it covers techniques to delay loading images until they are visible. For video, it discusses optimizations like preloading, resizing video, removing audio from non-playing videos, and optimizing video delivery through techniques like manifest files and adaptive bitrate streaming.