The document is a presentation on responsive web design (RWD) given by Zach Leatherman. It discusses the goals of RWD, including providing a flexible grid and flexible media. It also covers potential performance issues with RWD like unnecessary CSS downloads and large images on small screens. The presentation provides solutions to these problems like using media queries to separate CSS and choosing minimal CSS when possible.
The document discusses progressive enhancement with JavaScript and Ajax. It defines progressive enhancement as testing for support of different technologies like JavaScript, DOM, and objects, and providing alternative interfaces when something is not supported. It recommends testing for dependencies before using them, and separating interfaces from styles using CSS for flexibility. While CSS-only solutions seem appealing, JavaScript is more powerful and reliable for building complex, accessible interfaces. The key is enhancing interfaces thoughtfully to improve the user experience, not just for the sake of enhancement.
PrairieDevCon 2014 - Web Doesn't Mean Slowdmethvin
Web sites can be fast and responsive once you understand the process web browsers use to load and run web pages. We'll look at using tools like WebPageTest to analyze and optimize web pages.
The document discusses the importance of website performance and provides tips to build responsive websites. It notes that users expect pages to load within 2 seconds and will leave slow sites. The tips include reducing HTTP requests, gzipping and minifying components, optimizing images, delivering JavaScript and CSS efficiently, lazy loading images, and inlining critical CSS. Following these foundations and techniques can significantly improve load times and user experience.
HTML 5 is the latest version of the HTML standard. It includes several new elements and features to improve structure and behavior. Some key changes include new semantic elements like <article>, <aside>, <header>, and <footer>; built-in support for audio and video; the <canvas> element for drawing graphics; and forms with new input types. HTML 5 aims to simplify HTML and separate structure and presentation, making code cleaner and pages more accessible. It is developed jointly by the WHATWG and W3C organizations.
The document discusses HTML5 and provides an overview of its features such as new semantic elements, forms, offline applications, geolocation, canvas, media elements and polyfills. It outlines the history and evolution of HTML, defines what HTML5 is, and discusses the status and browser support of various HTML5 features. Resources for further information on HTML5 are also provided.
This document summarizes Christopher Schmitt's presentation on adaptive images in responsive web design. It discusses using feature testing versus browser sniffing to determine the appropriate image to serve, including testing browser width, screen resolution, and bandwidth. It then covers various techniques for serving adaptive images, such as using .htaccess files, the <picture> element, srcset attributes, and JavaScript libraries. It emphasizes using a mobile-first approach and progressive enhancement to provide the best experience for all devices.
jQuery is an open source JavaScript library that simplifies HTML and JavaScript interaction. It uses CSS to layer functionality and has a quick, terse syntax. jQuery selects elements and allows something to be done with them, like adding a class. It has a large plugin ecosystem managed through a plugin tracker. jQuery UI provides cross-browser user interface components. The library is fully documented, has a great community, many plugins, and small size. It works in all major browsers and is used by many large companies and projects.
The document discusses progressive enhancement with JavaScript and Ajax. It defines progressive enhancement as testing for support of different technologies like JavaScript, DOM, and objects, and providing alternative interfaces when something is not supported. It recommends testing for dependencies before using them, and separating interfaces from styles using CSS for flexibility. While CSS-only solutions seem appealing, JavaScript is more powerful and reliable for building complex, accessible interfaces. The key is enhancing interfaces thoughtfully to improve the user experience, not just for the sake of enhancement.
PrairieDevCon 2014 - Web Doesn't Mean Slowdmethvin
Web sites can be fast and responsive once you understand the process web browsers use to load and run web pages. We'll look at using tools like WebPageTest to analyze and optimize web pages.
The document discusses the importance of website performance and provides tips to build responsive websites. It notes that users expect pages to load within 2 seconds and will leave slow sites. The tips include reducing HTTP requests, gzipping and minifying components, optimizing images, delivering JavaScript and CSS efficiently, lazy loading images, and inlining critical CSS. Following these foundations and techniques can significantly improve load times and user experience.
HTML 5 is the latest version of the HTML standard. It includes several new elements and features to improve structure and behavior. Some key changes include new semantic elements like <article>, <aside>, <header>, and <footer>; built-in support for audio and video; the <canvas> element for drawing graphics; and forms with new input types. HTML 5 aims to simplify HTML and separate structure and presentation, making code cleaner and pages more accessible. It is developed jointly by the WHATWG and W3C organizations.
The document discusses HTML5 and provides an overview of its features such as new semantic elements, forms, offline applications, geolocation, canvas, media elements and polyfills. It outlines the history and evolution of HTML, defines what HTML5 is, and discusses the status and browser support of various HTML5 features. Resources for further information on HTML5 are also provided.
This document summarizes Christopher Schmitt's presentation on adaptive images in responsive web design. It discusses using feature testing versus browser sniffing to determine the appropriate image to serve, including testing browser width, screen resolution, and bandwidth. It then covers various techniques for serving adaptive images, such as using .htaccess files, the <picture> element, srcset attributes, and JavaScript libraries. It emphasizes using a mobile-first approach and progressive enhancement to provide the best experience for all devices.
jQuery is an open source JavaScript library that simplifies HTML and JavaScript interaction. It uses CSS to layer functionality and has a quick, terse syntax. jQuery selects elements and allows something to be done with them, like adding a class. It has a large plugin ecosystem managed through a plugin tracker. jQuery UI provides cross-browser user interface components. The library is fully documented, has a great community, many plugins, and small size. It works in all major browsers and is used by many large companies and projects.
The document summarizes an upcoming presentation on HTML5 and PHP. It lists the group members and covers the following topics in the presentation agenda: HTML5 elements like Canvas, SVG, drag/drop, geo-location, video, audio; PHP syntax, variables, and strings; and differences between SVG and Canvas. It provides code examples and explanations for several HTML5 elements and features including Canvas, SVG, drag/drop, geo-location, video, audio, and form handling.
Mehr Performance für WordPress - WordCamp KölnWalter Ebert
The document discusses ways to improve WordPress performance, including optimizing images, minifying and combining CSS and JavaScript files, conditionally loading scripts, caching content, optimizing databases, and prioritizing above-the-fold content. It also provides examples of using .htaccess files, child themes, and hooks to optimize site performance.
The document summarizes the state of jQuery in 2013. It discusses the creation of the jQuery Foundation in 2012 to coordinate work on jQuery and related projects. It outlines major changes between jQuery 1.9 and 2.0, including dropping support for older browsers and APIs. It emphasizes that jQuery 1.9 remains suitable for most public websites, while 2.0 is better suited for newer environments. The document encourages developers to test alpha and beta versions to help improve jQuery.
This document provides an overview and summary of Scalable Vector Graphics (SVG). It begins with a brief introduction to SVG concepts like basic shapes. It then discusses the history and evolution of SVG standards over time. It outlines how SVG is commonly used today in areas like logos, icons, charts and graphics. Examples are given of tools for editing, optimizing and automating SVG. Reasons for using SVG like crisp images, scriptability, animations and small file sizes are explained. The document discusses how SVG is used and its potential in Drupal. It concludes with an overview of the future SVG 2 standard and resources for learning more about SVG.
Scott Gledhill presents at Web Directions South Government 2008 in Canberra. You have sold the concepts of web standards to your company or boss, so what next? How do you make this work in the real workplace and what problems are you likely to encounter?
Building responsively allows us to create flexible user interfaces that support the widest possible audience with a single front-end codebase. But in embracing the ever-increasing contexts in which our sites are used, performance and accessibility must remain our highest priorities; we must continually question each code addition, and improve our delivery and application techniques to ensure they’re best serving users’ needs.
This talk will explore the challenges of creating fast and broadly-accessible websites and offer approaches that dramatically improve performance, usability, access, and sustainability.
Progressive downloads and rendering (Stoyan Stefanov)Ontico
This document discusses techniques for progressively downloading and rendering web pages to improve performance and user experience. It covers topics like preventing blocking JavaScript and CSS downloads, using techniques like deferred and async scripts, inline CSS, and flushing to start rendering sooner. It also discusses using data URIs to reduce HTTP requests by inlining images and other assets. Formats like MHTML and chunked encoding are presented as ways to progressively deliver content across browsers. The goal is to start outputting content as fast as possible while downloading remaining assets in the background.
Stop reinventing the wheel: Build Responsive Websites Using Bootstrapfreshlybakedpixels
Web development has become increasingly complex, with the advent of smartphones, tablets, and multiple browsers with varying capabilities. Bootstrap makes the process faster by providing pre-written HTML, CSS, and Javascript that has been thoroughly tested and debugged. Learn how to get started with this framework, and build a responsive web page. Explore commonly used components such as buttons, tabs, tooltips, pop-ups, and third-party plugins. See examples of beautiful websites built on Bootstrap.
Presented on Oct 5, 2015 at HighEdWeb 2015, Milwaukee, WI
From nothing to a video under 2 seconds / Mikhail Sychev (YouTube)Ontico
What does it take to achieve sub two seconds video playback latency on the 3rd largest website in the world?
We will peek under the hood of the Watch page and explore what common problems are being solved by
YouTube's Desktop team and what interesting solutions had to be implemented to achieve this goal.
We will discuss how page loads are classified and what specific treatment is required for every type, what tools and technologies are used in the stack, how being one of the largest image serving websites affects our approach to thumbnails and how we maintain and monitor our latency goals.
Optimizing WordPress Performance on Shared Web HostingJon Brown
This document discusses performance tweaks that can be made for WordPress sites on shared hosting. It is divided into three acts: inside WordPress, on the shared server, and off the shared server. Inside WordPress, it recommends right-sizing images, checking for 404 errors, keeping the database under control, and using caching plugins. On the shared server, it suggests updating to newer PHP versions, cleaning up the database, and using CloudFlare. Off the server, it only recommends using CDNs like CloudFlare for their free benefits.
This document provides an overview of HTML5 and what's new in the latest version. It discusses new semantic elements like <header>, <nav>, and <article> that improve document outlining. It also covers new multimedia features like native audio and video playback without Flash, as well as 2D/3D graphics using <canvas>. Other additions include new form controls, multiple file uploading, and geolocation. While HTML5 brings many new features, it is an ongoing evolution of HTML rather than a completely new language.
Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011Patrick Lauke
The document discusses the new features of HTML5 including improved semantics, forms, and multimedia capabilities. Some key points:
1. HTML5 adds new semantic elements like <header>, <footer>, <nav> that more accurately describe content. It also simplifies the doctype to <!DOCTYPE html>.
2. HTML5 introduces richer built-in form controls without JavaScript like date/time pickers, number sliders, and improved validation.
3. Multimedia is enhanced with <video>, <audio>, and <canvas> elements, allowing native playback of audio/video without plugins and scriptable drawing on <canvas>.
This document discusses jQuery and web performance. It begins by noting that Internet Explorer 6 is now dead, and Internet Explorer 7 and 8 are the new baselines for older applications. It then discusses various aspects of web performance, including how browsers load pages, techniques for improving performance like prefetching and avoiding forced layouts, and tools for profiling performance like developer tools and webpagetest.org. It provides an example of optimizing infinite scrolling by having JavaScript only handle new items rather than doing full page layouts. The document advocates measuring performance before optimizing and using developer tools to find hot spots in JavaScript.
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)Nicholas Zakas
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.
Progressive downloads and rendering allow content to be delivered and displayed to the user incrementally to improve perceived performance. JavaScript should be placed at the bottom of the page to avoid blocking. CSS can block rendering so should also be delivered non-blocking when possible. Techniques like flushing output, non-blocking scripts, and data URIs can help deliver content progressively. MHTML and preloading can help optimize delivery across multiple HTTP requests. The overall goal is to start displaying content as soon as possible while content continues downloading in the background.
DevFest Makerere html5 presentation by caesar mukamaEmily Karungi
HTML5 is an important new industry standard for web development that provides many new features. It includes 28 new semantic tags for common page elements like articles, sections and headers. It also defines 13 new form input types for things like dates, numbers and colors. HTML5 aims to simplify HTML and supports new multimedia with elements like video and canvas for graphics. It also has improved error handling to make malformed pages work.
Presentation at web2day in Nantes, France about the opportunities we have with HTML5 and how it means we move away from a static to an web of applications.
Slides from an HTML5 overview session I presented at work...
This presentation has an accompanying sample webapp project: http://code.google.com/p/html5-playground
Universities across the country have discovered the power of industry partnerships to catalyze their economic development efforts. Opportunities for productive partnerships do not end there, however. By bringing in other public partners—municipalities, counties, state and federal agencies—institutions of higher education can create new fuel to drive innovation and regional economic development.
Investigation and analysis of metallurgical and mechanical properties of aa11...Alexander Decker
1. The document investigates the mechanical and metallurgical properties of friction stir welded joints of AA1100 aluminum alloy fabricated at different tool rotational speeds and material positions.
2. Tensile tests, microhardness tests, and optical/SEM microscopy of the welds were used to evaluate the mechanical properties and microstructure of the joints.
3. The results showed that joints welded at 1200 rpm had the optimum properties, with smooth weld surfaces and good tensile strength, yield strength, and elongation. Microhardness was also highest at this welding condition.
The document summarizes an upcoming presentation on HTML5 and PHP. It lists the group members and covers the following topics in the presentation agenda: HTML5 elements like Canvas, SVG, drag/drop, geo-location, video, audio; PHP syntax, variables, and strings; and differences between SVG and Canvas. It provides code examples and explanations for several HTML5 elements and features including Canvas, SVG, drag/drop, geo-location, video, audio, and form handling.
Mehr Performance für WordPress - WordCamp KölnWalter Ebert
The document discusses ways to improve WordPress performance, including optimizing images, minifying and combining CSS and JavaScript files, conditionally loading scripts, caching content, optimizing databases, and prioritizing above-the-fold content. It also provides examples of using .htaccess files, child themes, and hooks to optimize site performance.
The document summarizes the state of jQuery in 2013. It discusses the creation of the jQuery Foundation in 2012 to coordinate work on jQuery and related projects. It outlines major changes between jQuery 1.9 and 2.0, including dropping support for older browsers and APIs. It emphasizes that jQuery 1.9 remains suitable for most public websites, while 2.0 is better suited for newer environments. The document encourages developers to test alpha and beta versions to help improve jQuery.
This document provides an overview and summary of Scalable Vector Graphics (SVG). It begins with a brief introduction to SVG concepts like basic shapes. It then discusses the history and evolution of SVG standards over time. It outlines how SVG is commonly used today in areas like logos, icons, charts and graphics. Examples are given of tools for editing, optimizing and automating SVG. Reasons for using SVG like crisp images, scriptability, animations and small file sizes are explained. The document discusses how SVG is used and its potential in Drupal. It concludes with an overview of the future SVG 2 standard and resources for learning more about SVG.
Scott Gledhill presents at Web Directions South Government 2008 in Canberra. You have sold the concepts of web standards to your company or boss, so what next? How do you make this work in the real workplace and what problems are you likely to encounter?
Building responsively allows us to create flexible user interfaces that support the widest possible audience with a single front-end codebase. But in embracing the ever-increasing contexts in which our sites are used, performance and accessibility must remain our highest priorities; we must continually question each code addition, and improve our delivery and application techniques to ensure they’re best serving users’ needs.
This talk will explore the challenges of creating fast and broadly-accessible websites and offer approaches that dramatically improve performance, usability, access, and sustainability.
Progressive downloads and rendering (Stoyan Stefanov)Ontico
This document discusses techniques for progressively downloading and rendering web pages to improve performance and user experience. It covers topics like preventing blocking JavaScript and CSS downloads, using techniques like deferred and async scripts, inline CSS, and flushing to start rendering sooner. It also discusses using data URIs to reduce HTTP requests by inlining images and other assets. Formats like MHTML and chunked encoding are presented as ways to progressively deliver content across browsers. The goal is to start outputting content as fast as possible while downloading remaining assets in the background.
Stop reinventing the wheel: Build Responsive Websites Using Bootstrapfreshlybakedpixels
Web development has become increasingly complex, with the advent of smartphones, tablets, and multiple browsers with varying capabilities. Bootstrap makes the process faster by providing pre-written HTML, CSS, and Javascript that has been thoroughly tested and debugged. Learn how to get started with this framework, and build a responsive web page. Explore commonly used components such as buttons, tabs, tooltips, pop-ups, and third-party plugins. See examples of beautiful websites built on Bootstrap.
Presented on Oct 5, 2015 at HighEdWeb 2015, Milwaukee, WI
From nothing to a video under 2 seconds / Mikhail Sychev (YouTube)Ontico
What does it take to achieve sub two seconds video playback latency on the 3rd largest website in the world?
We will peek under the hood of the Watch page and explore what common problems are being solved by
YouTube's Desktop team and what interesting solutions had to be implemented to achieve this goal.
We will discuss how page loads are classified and what specific treatment is required for every type, what tools and technologies are used in the stack, how being one of the largest image serving websites affects our approach to thumbnails and how we maintain and monitor our latency goals.
Optimizing WordPress Performance on Shared Web HostingJon Brown
This document discusses performance tweaks that can be made for WordPress sites on shared hosting. It is divided into three acts: inside WordPress, on the shared server, and off the shared server. Inside WordPress, it recommends right-sizing images, checking for 404 errors, keeping the database under control, and using caching plugins. On the shared server, it suggests updating to newer PHP versions, cleaning up the database, and using CloudFlare. Off the server, it only recommends using CDNs like CloudFlare for their free benefits.
This document provides an overview of HTML5 and what's new in the latest version. It discusses new semantic elements like <header>, <nav>, and <article> that improve document outlining. It also covers new multimedia features like native audio and video playback without Flash, as well as 2D/3D graphics using <canvas>. Other additions include new form controls, multiple file uploading, and geolocation. While HTML5 brings many new features, it is an ongoing evolution of HTML rather than a completely new language.
Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011Patrick Lauke
The document discusses the new features of HTML5 including improved semantics, forms, and multimedia capabilities. Some key points:
1. HTML5 adds new semantic elements like <header>, <footer>, <nav> that more accurately describe content. It also simplifies the doctype to <!DOCTYPE html>.
2. HTML5 introduces richer built-in form controls without JavaScript like date/time pickers, number sliders, and improved validation.
3. Multimedia is enhanced with <video>, <audio>, and <canvas> elements, allowing native playback of audio/video without plugins and scriptable drawing on <canvas>.
This document discusses jQuery and web performance. It begins by noting that Internet Explorer 6 is now dead, and Internet Explorer 7 and 8 are the new baselines for older applications. It then discusses various aspects of web performance, including how browsers load pages, techniques for improving performance like prefetching and avoiding forced layouts, and tools for profiling performance like developer tools and webpagetest.org. It provides an example of optimizing infinite scrolling by having JavaScript only handle new items rather than doing full page layouts. The document advocates measuring performance before optimizing and using developer tools to find hot spots in JavaScript.
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)Nicholas Zakas
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.
Progressive downloads and rendering allow content to be delivered and displayed to the user incrementally to improve perceived performance. JavaScript should be placed at the bottom of the page to avoid blocking. CSS can block rendering so should also be delivered non-blocking when possible. Techniques like flushing output, non-blocking scripts, and data URIs can help deliver content progressively. MHTML and preloading can help optimize delivery across multiple HTTP requests. The overall goal is to start displaying content as soon as possible while content continues downloading in the background.
DevFest Makerere html5 presentation by caesar mukamaEmily Karungi
HTML5 is an important new industry standard for web development that provides many new features. It includes 28 new semantic tags for common page elements like articles, sections and headers. It also defines 13 new form input types for things like dates, numbers and colors. HTML5 aims to simplify HTML and supports new multimedia with elements like video and canvas for graphics. It also has improved error handling to make malformed pages work.
Presentation at web2day in Nantes, France about the opportunities we have with HTML5 and how it means we move away from a static to an web of applications.
Slides from an HTML5 overview session I presented at work...
This presentation has an accompanying sample webapp project: http://code.google.com/p/html5-playground
Universities across the country have discovered the power of industry partnerships to catalyze their economic development efforts. Opportunities for productive partnerships do not end there, however. By bringing in other public partners—municipalities, counties, state and federal agencies—institutions of higher education can create new fuel to drive innovation and regional economic development.
Investigation and analysis of metallurgical and mechanical properties of aa11...Alexander Decker
1. The document investigates the mechanical and metallurgical properties of friction stir welded joints of AA1100 aluminum alloy fabricated at different tool rotational speeds and material positions.
2. Tensile tests, microhardness tests, and optical/SEM microscopy of the welds were used to evaluate the mechanical properties and microstructure of the joints.
3. The results showed that joints welded at 1200 rpm had the optimum properties, with smooth weld surfaces and good tensile strength, yield strength, and elongation. Microhardness was also highest at this welding condition.
The document discusses the history of California over four weeks. It describes how Royce incorporated his experiences growing up in California into his theory of "Higher Provincialism". It discusses the increasing military importance of California as the US grew into a global power, with the establishment of facilities like Mare Island naval shipyard and the Pacific Fleet. It notes how the Great Depression came later and more subtly to California's diversified economy. Finally, it mentions some of the factors like the energy crisis that led to the recall of Governor Gray Davis and election of Arnold Schwarzenegger in 2003.
Re-inventing the Database: What to Keep and What to Throw AwayDATAVERSITY
NoSQL has turned many database concepts upside down. Consistency models, transactions, data models, and query interfaces are being reinvented. Tradeoffs between performance, availability, managability, and usability are being re-thought. In this talk 10gen President Max Schireson, reviews some of the different approaches being taken and offers opinions on the right choices for different uses.
Production Planning Engineer Job Ref 1501-7 - Best Viewed in Full Screen Sean Durrant
Production Planning Engineer Job Ref 1501-7
Production Planning Engineer Job for an experienced planner from a heavy mechanical engineering background to
Provide support to the tender process,
Produce/Maintain the 5 level planning approach,
Produce/Monitor performance against KPI’s,
Forecast weekly manpower requirements,
Plan in “Non-Planned” work,
Ensure system demand is in line with the company financial forecast,
Maintain manufacturing orders so that they meet demand requirements,
Review routings, part number, and material planning to ensure they meet operational needs,
Maintain work centre data,
Lead daily visualisation meetings,
Advise Production Manager, Project Manager and Team on arising issues,
Review operational performance by area/department/project,
Attend and provide planning data to operations during weekly/daily meetings,
Extract and present information held on the system,
Maintain & Update Existing Reports,
Write & Maintain report “User Help Files”.
The Production Planning Engineer Job is posted by Clements Technical Recruitment (Clemtech) and may be suitable for you if you’re seeking Planner Jobs, Prouction Planning Jobs, Engineering Planner Jobs commutable from Dunfermline, East Kilbride, Glasgow, Kilmarnock, Livingston, Motherwell, Paisley, Stirling.
Clemtech are a Technical Recruitment Agency specialising in placing engineering, technical and office support staff in both contract and permanent vacancies in the Rail sector.
From our Head Office we deliver comprehensive recruitment solutions across the UK, Europe and Overseas providing our clients and candidates alike with unparalleled service, support and opportunities.
Application for this position and subsequent acceptance to attend an interview for the Prouction Planning Job will be evident of your willingness to work in the Role
This job vacancy is only open to candidates with the demonstrable right to work in the U.K
Deutsche EuroShop is Germany's only public company that invests solely in shopping centers. It owns 18 shopping centers located primarily in Germany but also in Poland, Austria and Hungary. The company focuses on maintaining high occupancy rates and pursuing growth through acquisitions and expansions of existing properties. Key financial figures for the first 9 months of 2010 show increasing revenues and profits compared to the same period in 2009.
IT Cost Management software provides visibility into the total costs of server ownership. It identifies which business units have high server utilization and costs, where overall server costs are over budget and why, and the right server configurations to optimize utilization, capacity and costs. It delivers metrics to recommend cost-effective configurations, report on actual server usage, reduce service levels for servers with high costs but low usage, and reduce support costs. The software establishes cost-effective server offerings and can begin saving an organization money within weeks by identifying cost savings opportunities through server virtualization, eliminating underutilized capacity, and optimizing server usage.
Keeping responsive into the future by Chris millsCodemotion
Chris Mills will 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 some advanced media query and viewport tricks, including a look at @viewport; insights into responsive images: problems, and current solutions; how to provide usable alternatives to older browsers with Modernizr; what other CSS3 modules provide responsive capabilities; and where media queries are going in the future, with CSS4 media queries.
Today, a web page can be delivered to desktop computers, televisions, or handheld devices like tablets or phones. While a technique like responsive design helps ensure that our web sites look good across that spectrum of devices we may forget that we need to make sure that our web sites also perform well across that same spectrum. More and more of our users are shifting their Internet usage to these more varied platforms and connection speeds with some moving entirely to mobile Internet.
In this session we’ll look at the tools that can help you understand, measure and improve the web performance of your web sites and applications. The talk will also discuss how new server-side techniques might help us optimize our front-end performance. Finally, since the best way to test is to have devices in your hand, we’ll discuss some tips for getting your hands on them cheaply.
This presentation builds upon Dave’s “Optimization for Mobile” chapter in Smashing Magazine’s “The Mobile Book.”
This talk was given at the Responsive Web Design Summit hosted by Environments for Humans.
Measuring Web Performance (HighEdWeb FL Edition)Dave Olsen
Today, a web page can be delivered to desktop computers, televisions, or handheld devices like tablets or phones. While a technique like responsive design helps ensure that our web sites look good across that spectrum of devices we may forget that we need to make sure that our web sites also perform well across that same spectrum. More and more of our users are shifting their Internet usage to these more varied platforms and connection speeds with some moving entirely to mobile Internet.
In this session we’ll look at the tools that can help you understand, measure and improve the web performance of your web sites and applications. The talk will also discuss how new server-side techniques might help us optimize our front-end performance. Finally, since the best way to test is to have devices in your hand, we’ll discuss some tips for getting your hands on them cheaply.
This presentation builds upon Dave’s “Optimization for Mobile” chapter in Smashing Magazine’s “The Mobile Book.”
This talk was given at HighEdWeb Florida.
This document discusses various techniques for improving the frontend performance of Drupal websites. It begins by introducing the speaker and describing the goals of the presentation. The bulk of the document then provides recommendations in three areas: backend server optimizations like caching, parallel downloads and gzip compression; tools for measuring performance; and frontend optimizations like minimizing requests, lazy loading images, and improving CSS and JavaScript. The document encourages proper performance diagnosis and defines goals before implementing solutions.
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.
The Server Side of Responsive Web DesignDave Olsen
Responsive web design has become an important tool for front-end developers as they develop mobile-optimized solutions for clients. Browser-detection has been an important tool for server-side developers for the same task for much longer. Unfortunately, both techniques have certain limitations. Depending on project requirements, team make-up and deployment environment combining these two techniques might lead to intriguing solutions for your organization. We'll discuss when it makes sense to take this extra step and we'll explore techniques for combining server-side technology, like server-side feature-detection, with your responsive web designs to deliver the most flexible solutions possible.
JSDay 2013 - Practical Responsive Web DesignJonathan Klein
This document summarizes a presentation on practical responsive web design. It discusses using media queries to define breakpoints, choosing breakpoints based on how the site looks rather than targeting specific devices. It also covers responsive images, using different sized images depending on screen width and only downloading the needed image. Retina images and techniques like picturefill are presented. Performance considerations like image size and extra requests are addressed.
Making the Switch, Part 1: Top 5 Things to Consider When Evaluating DrupalAcquia
The “Making the Switch to Drupal series” will provide an overview of what you need to know when considering and adopting Drupal. In Part 1, we will guide busy managers through what they need to consider when evaluating Drupal.
We know that choosing any web development technology represents a significant investment of resources. Decision makers can spend weeks and months comparing options and deliberating about the best direction. We will use a combination of case studies and demonstrations to explain how Drupal works, so you can see first hand how it powers some of the most visited websites online.
In Part 1 of this webinar series, you will learn:
• Benefits of the open source community
• Comparison of Drupal to other systems
• Ease of Customization of branding and functionality
• Managing content layout and design in Drupal
• About common features and functionality of Drupal
In this presentation we explore how to effectively combine Responsive (RWD) and Adaptive (AWD) concepts to get a powerful combo.
This was presented in New York Web Development community (http://www.nywebtech.com) on June 20th, 2013.
If there is interest for a presentation please contact me.
This document summarizes strategies for making content responsive including pruning content like images and secondary content for mobile using CSS classes. It discusses linking to content instead of showing it all at once using JavaScript or CSS interactions. Lazy loading images with AJAX calls after page load is also covered to improve performance. The document emphasizes testing content strategies based on device capabilities and making sites functional even without full media query support.
Drupal for Project Managers, Part 3: LaunchingAcquia
This document discusses deployment and launch of a Drupal project. It covers planning for launch including testing, load testing, and cutover plans. Risks in deployment like code, data, and file conflicts are examined. Maintaining separate development, staging, and production environments is advised. Exporting configurations to code is suggested to avoid rebuilding sites. Hosting considerations like performance, scalability and optimizations are also addressed.
How We Build NG-MY Websites: Performance, SEO, CI, CD (Thai version)Seven Peaks Speaks
7 Peaks Software Angular Meetup July 2019.
How We Build NG-MY Websites: Performance, SEO, CI, CD by Jecelyn Yeen – Developer expert at Google Calendar. Google Developer Expert.
Angular 8 is the newest version on the block, and comes with the effective CLI API, helping make developers experience better. Offering differential loading support for modern browser, and faster loading, and also includes Ivy renderer tree-shaking for a smaller website.
See all the event details here -> http://7peakssoftware.com/angular-meetup-2019/
Stay tuned to get information about 7 Peaks Software’s next Angular meetup at https://7peakssoftware.com/events/
7 Peaks Software Angular Meetup July 2019.
How We Build NG-MY Websites: Performance, SEO, CI, CD by Jecelyn Yeen – Developer expert at Google Calendar. Google Developer Expert.
Angular 8 is the newest version on the block, and comes with the effective CLI API, helping make developers experience better. Offering differential loading support for modern browser, and faster loading, and also includes Ivy renderer tree-shaking for a smaller website.
See all the event details here -> http://7peakssoftware.com/angular-meetup-2019/
Stay tuned to get information about 7 Peaks Software’s next Angular meetup at https://7peakssoftware.com/events/
The document discusses responsive web design and performance. It covers topics like building flexible and fast sites, embracing constraints of different devices, conditional loading of content, lazy loading of images, and optimizing assets like CSS and JavaScript. Key aspects of responsive design like media queries, flexible layouts, and responsive images are presented alongside techniques to improve page performance like prioritizing content, conditional loading, and lazy loading of non-critical assets.
Flex User Group - Skinning Presentationjmwhittaker
This document discusses various techniques for styling Adobe Flex applications, including using themes, CSS, programmatic skins, and graphical skins. Some key points:
- Themes allow for easy distribution of styles and can include CSS files, programmatic skin classes, and graphical skin assets.
- CSS can be used to style applications, components, and custom components. CSS has some differences when used with Flex compared to HTML.
- Graphical skins can be created using SWF, PNG, JPG files and applied via CSS. Programmatic skins are created using ActionScript and the Flash drawing API.
- Examples demonstrate styling buttons, text, and applying styles programmatically using StyleSheets and set
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!
Lone StarPHP 2013 - Building Web Apps from a New AnglePablo Godel
AngularJS is a new JavaScript framework, backed by Google, for building powerful, complex and rich client-side web applications. We will go over the features and basics of building a web application with AngularJS and we will demonstrate how to communitate with a REST server built with PHP.
The document discusses building RESTful web services and APIs. It provides examples of CRUD operations like GET, POST, PUT, DELETE on a project resource using JSON representations and appropriate HTTP response codes. It covers REST principles like identifying resources with URLs, manipulating resources through representations, self-descriptive messaging, and including hypermedia links in responses. The document advises implementing common standards, consuming your own API for testing, and considering features like authentication, rate limiting and versioning for APIs intended for public use.
Similar to Performance & Responsive Web Design (20)
1. Performance &
Responsive Web Design
(RWD)
NebraskaJS via @zachleat
November 8, 2013
Thursday, November 8, 12
2. About Me
✤ @zachleat on
✤ zachleat.com
underscore_dot.dash@zachleat.com
✤ Zach Leatherman
✤
Thursday, November 8, 12
3. My Projects
✤ BigText ✤ parseIntimate.com
Thursday, November 8, 12
4. My Projects
✤ ALARMd.com ✤ f2em.com
Thursday, November 8, 12
5. Housekeeping
✤ We need one or more volunteers to speak at January’s NebraskaJS.
✤ Tweet @nebraskajs with Topic Ideas even if you don’t want to speak.
Thursday, November 8, 12
6. Goals
✤ Primer
✤ RWD !== Media Queries
✤ 99 Problems
✤ Buzzkills
✤ RWD Showcase Showdown
✤ Be kind, RWD.
Thursday, November 8, 12
8. RWD is
✤ A Flexible Grid (Fluid: % + Min Widths)
✤ Flexible Media (Images, Video)
✤
(Not Just) Media Queries
http://unstoppablerobotninja.com/entry/on-being-responsive
Thursday, November 8, 12
12. RWD & performance
✤ Two alternatives to RWD:
✤ Do nothing
✤ Use a separate m.dot site
✤ Redirects are slow.
✤ Maintenance of UA-Parsing Server
Side Redirects (WURFL updates ~monthly)
✤ Content Strategy (Desktop Mode link)
http://en.m.wikipedia.org/?useformat=mobile#_
Thursday, November 8, 12
13. Google recommends RWD
✤ “It keeps your desktop and mobile content on a single URL, which
is easier for your users to interact with, share, and link to and for
Google’s algorithms to assign the indexing properties to your
content.”
✤ “Google can discover your content more efficiently as we wouldn't
need to crawl a page with the different Googlebot user agents to
retrieve and index all the content.”
http://googlewebmastercentral.blogspot.com/2012/06/recommendations-for-building-smartphone.html
Thursday, November 8, 12
14. Content Strategy
“Mobile users want to see our menu,
hours, and delivery number. Desktop
users definitely want this 1mb png of
someone smiling at a salad.”
https://twitter.com/wilto/status/63284673723375616
Thursday, November 8, 12
16. 99 Problems
✤ Browsers Download and Block Rendering on Unnecessary CSS
✤ Browsers Sometimes Download Unnecessary Images
✤ Big Images are Wasted on Small Screens
✤ Related: Retina Images are Wasted on <snob>Blurry</snob>
Screens
Thursday, November 8, 12
17. The “Average” Web Page
http://httparchive.org/interesting.php#bytesperpage
Thursday, November 8, 12
18. JavaScript Can Block
✤ “With scripts, progressive rendering is blocked for all content
below the script.”
http://developer.yahoo.com/blogs/ydn/posts/2007/07/high_performanc_5/
Thursday, November 8, 12
19. JavaScript that Doesn’t Block
<script
src></script>
</body>
http://developer.yahoo.com/blogs/ydn/posts/2007/07/high_performanc_5/
Thursday, November 8, 12
20. JavaScript that Doesn’t Block
<head>
<!-‐-‐
Downloads
right
away
-‐-‐>
<script
src
async></script>
<!-‐-‐
Waits
to
download
-‐-‐>
<script
src
defer></script>
http://calendar.perfplanet.com/2010/the-truth-about-non-blocking-javascript/
Thursday, November 8, 12
21. JavaScript that Doesn’t Block
var
script
=
document.createElement("script");
script.type
=
"text/javascript";
script.src
=
"foo.js";
document.getElementsByTagName("head")
[0].appendChild(script);
http://calendar.perfplanet.com/2010/the-truth-about-non-blocking-javascript/
Thursday, November 8, 12
22. Stylesheets Block
✤ “Browsers (except Opera) block rendering until all screen CSS
arrives. With the worst possible experience: white page.”
✤ “Browsers download CSS they don't need, e.g. print, tv, device-
ratio... And most browsers (except Opera and Webkit) block
rendering because of these too”
✤ http://www.phpied.com/files/css-loading/mq.php?mq=all
http://www.phpied.com/css-and-the-critical-path/
Thursday, November 8, 12
23. WebKit
<!-‐-‐
blocking
stylesheet,
nothing
renders
until
it
is
downloaded
and
parsed
-‐-‐>
<link
href="main.css"
rel="stylesheet">
<!-‐-‐
non-‐blocking,
low
download
priority
because
of
the
evaluated
media
query
-‐-‐>
<link
href="i-‐want-‐a-‐monitor-‐of-‐this-‐size.css"
rel="stylesheet"
media="(min-‐width:
4000px)">
<!-‐-‐
print
stylesheet
is
non-‐blocking
-‐-‐>
<link
href="noop.css"
rel="stylesheet"
media="print">
http://www.igvita.com/2012/06/14/debunking-responsive-css-performance-myths/
Thursday, November 8, 12
24. Everything Else*
<!-‐-‐
blocking
stylesheet,
nothing
renders
until
it
is
downloaded
and
parsed
(timeouts
may
vary)
-‐-‐>
<link
href="main.css"
rel="stylesheet">
<link
href="i-‐want-‐a-‐monitor-‐of-‐this-‐size.css"
rel="stylesheet"
media="(min-‐width:
4000px)">
<link
href="noop.css"
rel="stylesheet"
media="print">
Thursday, November 8, 12
25. Downloading CSS
http://scottjehl.github.com/CSS-Download-Tests/
Thursday, November 8, 12
26. Downloading CSS
Firefox 16 Opera 12
Safari 6 Chrome 22
Thursday, November 8, 12
27. Solutions
✤ CSS is sacred. Choose minimal when possible.
✤ Separate <link> elements for each Media Query
✤ Doesn’t scale if you have a lot of breakpoints.
✤ Good for WebKit, what about everything else?
✤ eCSSential
Thursday, November 8, 12
28. eCSSential
✤ “Making responsive CSS load the way it should.”
✤ Downloads Blocking CSS that matches media
queries
✤ Downloads other CSS async, non-blocking
✤ https://github.com/filamentgroup/eCSSential
Thursday, November 8, 12
29. matchMedia
if
(window.matchMedia("(min-‐width:
400px)").matches)
{
/*
the
view
port
is
at
least
400
pixels
wide
*/
}
else
{
/*
the
view
port
is
less
than
400
pixels
wide
*/
}
https://developer.mozilla.org/en-US/docs/DOM/window.matchMedia
Thursday, November 8, 12
30. matchMedia
http://caniuse.com/#feat=matchmedia
Polyfill: https://github.com/paulirish/matchMedia.js/
Careful with IE8-, the polyfill requires Media Query support
Thursday, November 8, 12
32. eCSSential Demo
✤ http://filamentgroup.github.com/eCSSential/examples/concat/
Thursday, November 8, 12
33. Images Don’t Block
✤ Doesn’t mean they get a free pass.
Thursday, November 8, 12
34. Images Don’t Block
✤ Doesn’t mean they get a free pass.
7 5 3 KB
Thursday, November 8, 12
35. Downloading Images (CSS)
<div
id="test1">
<img
src="images/test1.png"
alt=""
/>
</div>
@media
all
and
(max-‐width:
600px)
{
#test1
{
display:none;
}
}
http://timkadlec.com/2012/04/media-query-asset-downloading-results/
Thursday, November 8, 12
36. Downloading Images (CSS)
PE
<div
id="test1">
O
<img
src="images/test1.png"
alt=""
/>
N
</div>
@media
all
and
(max-‐width:
600px)
{
#test1
{
display:none;
}
}
http://timkadlec.com/2012/04/media-query-asset-downloading-results/
Thursday, November 8, 12
37. Downloading Images (CSS)
<div
id="test2"></div>
#test2
{
background-‐image:url('images/test2.png');
width:200px;
height:75px;
}
@media
all
and
(max-‐width:
600px)
{
#test2
{display:none;}
}
http://timkadlec.com/2012/04/media-query-asset-downloading-results/
Thursday, November 8, 12
38. Downloading Images (CSS)
PE
<div
id="test2"></div>
O
#test2
{
background-‐image:url('images/test2.png');
N
width:200px;
height:75px;
}
@media
all
and
(max-‐width:
600px)
{
#test2
{display:none;}
}
http://timkadlec.com/2012/04/media-query-asset-downloading-results/
Thursday, November 8, 12
39. Downloading Images (CSS)
<div
id="test3">
<div></div>
</div>
#test3
div
{
background-‐image:url('images/test3.png');
width:200px;
height:75px;
}
@media
all
and
(max-‐width:
600px)
{
#test3
{
display:none;
}
}
http://timkadlec.com/2012/04/media-query-asset-downloading-results/
Thursday, November 8, 12
40. Downloading Images (CSS)
<div
id="test3">
<div></div>
K
</div>
#test3
div
{
O
background-‐image:url('images/test3.png');
width:200px;
height:75px;
}
@media
all
and
(max-‐width:
600px)
{
#test3
{
display:none;
}
}
http://timkadlec.com/2012/04/media-query-asset-downloading-results/
Thursday, November 8, 12
41. Downloading Images (CSS)
<div
id="test4"></div>
#test4
{
background-‐image:url('images/test4-‐desktop.png');
width:200px;
height:75px;
}
@media
all
and
(max-‐width:
600px)
{
#test4
{
background-‐image:url('images/test4-‐mobile.png');
}
}
http://timkadlec.com/2012/04/media-query-asset-downloading-results/
Thursday, November 8, 12
42. Downloading Images (CSS)
<div
id="test4"></div>
K
#test4
{
O
background-‐image:url('images/test4-‐desktop.png');
~
width:200px;
height:75px;
}
@media
all
and
(max-‐width:
600px)
{
#test4
{
background-‐image:url('images/test4-‐mobile.png');
}
}
http://timkadlec.com/2012/04/media-query-asset-downloading-results/
Thursday, November 8, 12
43. Downloading Images (CSS)
<div
id="test7"></div>
#test7
{
background-‐image:url('images/test7-‐lowres.png');
width:200px;
height:75px;
}
@media
only
screen
and
(-‐webkit-‐min-‐device-‐pixel-‐ratio:
1.5),
only
screen
and
(min-‐-‐moz-‐device-‐pixel-‐ratio:
1.5),
only
screen
and
(-‐o-‐min-‐device-‐pixel-‐ratio:
3/2),
only
screen
and
(min-‐device-‐pixel-‐ratio:
1.5)
{
#test7
{
background-‐image:url('images/test7-‐highres.png');
width:200px;
height:75px;
/*
Editors
note:
this
should
use
background-‐size
*/
}
}
http://timkadlec.com/2012/04/media-query-asset-downloading-results/
Thursday, November 8, 12
44. Downloading Images (CSS)
<div
id="test7"></div>
#test7
{
background-‐image:url('images/test7-‐lowres.png');
width:200px;
K
height:75px;
}
O
@media
only
screen
and
(-‐webkit-‐min-‐device-‐pixel-‐ratio:
1.5),
only
screen
and
(min-‐-‐moz-‐device-‐pixel-‐ratio:
1.5),
only
screen
and
(-‐o-‐min-‐device-‐pixel-‐ratio:
3/2),
only
screen
and
(min-‐device-‐pixel-‐ratio:
1.5)
{
#test7
{
background-‐image:url('images/test7-‐highres.png');
width:200px;
height:75px;
/*
Editors
note:
this
should
use
background-‐size
*/
}
}
http://timkadlec.com/2012/04/media-query-asset-downloading-results/
Thursday, November 8, 12
45. Downloading Images (CSS)
✤ Coming to a browser near you: image-‐set()
✤ http://blog.cloudfour.com/safari-6-and-chrome-21-add-image-set-to-
support-retina-images/
Thursday, November 8, 12
46. Downloading <img>
✤ RESPONSIVE IMAGES
✤ Whatever solution you pick, make sure it doesn’t
make duplicate requests.
Thursday, November 8, 12
47. Downloading <img>
✤ If possible, use Vectors (SVG) over Bitmaps
(PNG). It’ll look great on HDPI screens.
✤ Vectors are a shortcut for Responsive Images.
✤ Note: Canvas content is bitmapped, but you can
redraw at higher resolutions.
✤ Side Note: Font icons are a great scalable
alternative to PNG icons
Thursday, November 8, 12
48. Picturefill
✤ “A Responsive Images approach that you can use today”
✤ https://github.com/scottjehl/picturefill
Thursday, November 8, 12
49. Picturefill
<div
data-‐picture
data-‐alt="A
giant
stone
face
at
The
Bayon
temple
in
Angkor
Thom,
Cambodia">
<div
data-‐src="external/imgs/small.jpg"></div>
<div
data-‐src="external/imgs/medium.jpg"
data-‐media="(min-‐width:
400px)"></div>
<div
data-‐src="external/imgs/large.jpg"
data-‐media="(min-‐width:
800px)"></div>
<div
data-‐src="external/imgs/extralarge.jpg"
data-‐media="(min-‐width:
1000px)"></div>
<!-‐-‐
Fallback
content
for
non-‐JS
browsers.
Same
img
src
as
the
initial,
unqualified
source
element.
-‐-‐>
<noscript><img
src="external/imgs/small.jpg"
alt="A
giant
stone
face
at
The
Bayon
temple
in
Angkor
Thom,
Cambodia"></noscript>
</div>
http://scottjehl.github.com/picturefill/
Thursday, November 8, 12
50. Picturefill
✤ data-‐media="(min-‐width:
400px)"
✤ Uses
matchMedia.
✤ No
duplicate
requests!
Thursday, November 8, 12
51. Picturefill (HDPI)
<div
data-‐picture
data-‐alt="A
giant
stone
face
at
The
Bayon
temple
in
Angkor
Thom,
Cambodia">
<div
data-‐src="small.jpg"></div>
<div
data-‐src="small.jpg"
data-‐media="(min-‐device-‐pixel-‐ratio:
2.0)"></div>
<div
data-‐src="medium.jpg"
data-‐media="(min-‐width:
400px)"></div>
<div
data-‐src="medium_x2.jpg"
data-‐media="(min-‐width:
400px)
and
(min-‐device-‐pixel-‐ratio:
2.0)"></div>
<div
data-‐src="large.jpg"
data-‐media="(min-‐width:
800px)"></div>
<div
data-‐src="large_x2.jpg"
data-‐media="(min-‐width:
800px)
and
(min-‐device-‐pixel-‐ratio:
2.0)"></div>
<div
data-‐src="extralarge.jpg"
data-‐media="(min-‐width:
1000px)"></div>
<div
data-‐src="extralarge_x2.jpg"
data-‐media="(min-‐width:
1000px)
and
(min-‐device-‐pixel-‐ratio:
2.0)"></div>
...
</div>
http://scottjehl.github.com/picturefill/
Thursday, November 8, 12
52. Compressive Images
✤ Pump up the size, pump up the JPEG compression
✤ Scale down in the browser
✤ http://filamentgroup.com/lab/rwd_img_compression/
Thursday, November 8, 12
53. Picturefill Simplifes to (HDPI)
<div
data-‐picture
data-‐alt="A
giant
stone
face
at
The
Bayon
temple
in
Angkor
Thom,
Cambodia">
<div
data-‐src="small_compressive.jpg"></div>
<div
data-‐src="medium_compressive.jpg"
data-‐media="(min-‐width:
400px)"></div>
<div
data-‐src="large_compressive.jpg"
data-‐media="(min-‐width:
800px)"></div>
<div
data-‐src="extralarge_compressive.jpg"
data-‐media="(min-‐width:
1000px)"></div>
<!-‐-‐
TODO:
adjust
rendered
sizes
-‐-‐>
...
</div>
✤ Careful with Memory Consumption!
Thursday, November 8, 12
55. Buzzkill #1: Advertising
✤ Pit of despair: full of document.write, iframes, blocking JavaScript
(errors galore) and general badness.
✤ Inject advertising iframes using JavaScript (after onload)
✤ document.createElement(‘iframe’);
Thursday, November 8, 12
57. SocialCount
✤ 4 KB CSS, 7KB JavaScript (unminified, ✤ Initializes Native Widgets on Hover / Tap
ungzipped) for Inline +1 / Like and Tweet.
✤ 2 requests, optional +1 for Counts ✤ In use on f2em.com
✤ Non-Blocking
✤ Sharing still works without JavaScript
Thursday, November 8, 12
58. SocialCount
ng So on
C om i
✤ 4 KB CSS, 7KB JavaScript (unminified, ✤ Initializes Native Widgets on Hover / Tap
ungzipped) for Inline +1 / Like and Tweet.
✤ 2 requests, optional +1 for Counts ✤ In use on f2em.com
✤ Non-Blocking
✤ Sharing still works without JavaScript
Thursday, November 8, 12
64. Smashing Magazine
1.87 MB
Advertising, Web Fonts, Tracking and Analytics
Thursday, November 8, 12
65. RWD & Performance
✤ “The fastest web site is the one with nothing on it.”
✤ We’re in the problem solving business.
✤ Solutions often require Code.
✤ jQuery and Cross Browser DOM API Compatibility
✤ Solve more problems than you create.
Thursday, November 8, 12