Doris Chen is a senior developer evangelist at Microsoft who focuses on web technologies like JavaScript and HTML5. Her presentation covers optimizing Cordova app performance, including measuring startup cost and memory usage, using CSS for gradients instead of images, animating with translate3d instead of left/top, and handling events through bubbling instead of individual listeners. She provides tips like keeping the DOM simple, batching layout changes, and cleaning up unused objects to prevent memory leaks.
This document provides information on creating a landing page, including recommendations for code editors, browsers, HTML tags and structures, CSS styling and selectors, responsive design, file organization, and tutorials. It recommends Sublime Text or WebStorm as code editors, Google Chrome as the browser, and covers basic HTML tags, CSS properties, Bootstrap framework, responsive design techniques, and file organization practices like splitting CSS into modules and categories. It also provides links to tutorials and resources for going further in frontend development.
Introduction to Responsive Web Design http://tinyurl.com/9ldo4c6 Includes a sample project built from scratch in Node.js using LESS available on Github
The document discusses front end development and the skills required. It begins by addressing misunderstandings about front end work, noting the complexity involved. It outlines the steps taken in front end projects, including communication, layout analysis, component identification, and integration. The document discusses reasons one may or may not want to pursue front end development, noting it requires skills like aesthetics, curiosity, and communication. Hard skills mentioned include HTML, CSS, JavaScript, performance, and responsiveness. Throughout, it emphasizes that front end work requires constant learning as technologies evolve rapidly.
[Slides from my 'Edge of the Web' workshop] The web platform has evolved significantly over the last several years, giving developers more power than ever to create rich, interactive applications delivered via browsers. New capabilities in HTML, CSS and JavaScript paired with constantly updating browsers make it possible to do things on the web that used to be the exclusive domain of plugins and native apps. In this workshop, you’ll be introduced to some of the most powerful and useful techniques available to the modern web developer that will change the way you think about web app development. The future of web app development is exciting, and these are the technologies that will underpin and drive that change. Don’t get left behind with IE8-era knowledge. Get ahead of the curve and master the edge of the web.
The document discusses unobtrusive JavaScript and accessibility requirements for websites built for Dutch government agencies. It notes that JavaScript should progressively enhance functionality without preventing base functionality, scripts that affect links should extend rather than replace default link behavior, and elements shouldn't require scripts to be meaningful in HTML. It also discusses separating content, design, and behavior; adding behaviors via class attributes; ensuring nothing breaks; and enhancing accessibility with JavaScript.
This document provides an agenda and overview for a Joomla templates 101 workshop. The agenda includes introductions, discussing module positions and template ingredients in Joomla, building HTML/CSS templates with PHP snippets, the templateDetails.xml file, uploading and activating templates, and tips/tricks. The presenter's background is also provided. The workshop will demonstrate creating a Joomla template using various software tools and cover best practices like paths for images and the templateDetails.xml file. Resources from the workshop are available online.
Talks about the best practices in web development regarding semantics, accessibility, SEO and performance.
A session talk for #NAGW2012 on: Mobile app, choices Dreamweaver’s place Creating Mobile Design (actual design, not code) Other helpful Adobe tools to create HTML/CSS jQuery Mobile in DW PhoneGap Build in DW
This document compares several JavaScript presentation frameworks: Reveal.js, Impress.js, Google Slides Template (GST), Deck.js, and Shower. It provides information on their features such as support for CSS transitions, browser support, extensions, and PDF export capabilities. Reveal.js and Deck.js support the most features, including CSS transitions, extensions, and PDF export, while Impress.js focuses on CSS transitions and browser support.
Ever tried to maintain a design system across a large site? Collaborated with a front-end designer or front-end developer who wants to design/code in the style guide, but can’t see what impacts that will have on the actual site? Do you use and maintain a single design or brand across multiple sites? Are you building on design frameworks like Bootstrap or Foundation but not sure if you’re “doing it right”? At the conclusion of this Meetup you will have a better understanding of what it takes to design, build and support more scalable, systemized designs. In this two part presentation, we’ll first present an overview of pattern libraries, atomic design, and design systems. You’ll understand these important concepts and be prepared to start thinking about how to use them in your work. We’ll then show you how Exygy uses pattern libraries in a way that empowers our designers and engineers to collaborate effectively and efficiently as a team. We’ll touch on leveraging pattern library specific tools like Fabricator (using Node.js and Handlebars templates), and finish with a solution for creating and maintaining a pattern library within WordPress and integrating it into the templates for your custom WordPress theme.
Mistakes, misconceptions, over-indulgences, minutia, and generally silly aspects of modern web accessibility. Presented at SXSWi 2010.
The document is a presentation about HTML5 that discusses its evolution and components. It defines HTML5 as using HTML, CSS, and JavaScript to update web standards for how the world currently uses the web. It outlines the main parts of HTML5 like new elements, tools for defining pages with HTML, styling with CSS compilers and frameworks, and interacting with JavaScript libraries, compilers, and APIs. It provides examples of using new HTML5 features and recommends further resources to learn more.
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
HTML 5 may take some time to find full support in all major browsers, but you may be surprised to discover how many of HTML 5’s features are available today! HTML 5 is the next generation standard for web applications, and it promises to give plug-in based RIAs a serious challenge. In this demo heavy session, you’ll see HTML 5 in action and learn what you can do with today’s browser support for the new standard. If you’re building rich web applications and you’ve never touched HTML 5, this session is a must see.
The document discusses responsive layout frameworks for XPages applications. It covers what responsive layouts are, popular frameworks like Twitter Bootstrap, tips for getting started like using Bootstrap styles and grids, and the pros and cons of responsive layouts versus progressive enhancement. Responsive layouts make a single design adapt to different screen sizes but may be slower, while progressive enhancement combines graceful degradation and client-specific functionality.
Copy of the slides from the Advanced Web Development Workshop presented by Ed Bachta, Charlie Moad and Robert Stein of the Indianapolis Museum of Art during the Museums and the Web 2008 conference in Montreal
This document provides an overview of HTML5 and CSS3 techniques that can be used today, beginning with a brief history of HTML and CSS. It then discusses adoption strategies for new techniques, including using polyfills to enable support in older browsers. Specific techniques demonstrated include semantic HTML5 tags, video and audio, geolocation, local storage, HTML5 forms, and microdata. CSS3 techniques covered are selectors, color, fonts, borders and backgrounds, gradients, media queries, and animations. The document emphasizes that many new techniques can be used now across browsers with polyfills or alternate implementations for older browsers.
How to create and measure passion in your company - Every startup has the potential for world-changing impact. Your role as a leader is to foster passion that impacts anyone who touches your business and to keep that passion alive by reinforcing it every day. Today the challenge for leaders is that there is no formal management theory for how to build, leverage, and measure the level of passion in your employees. It essentially falls into that ambiguous category of “you’ll know it when you see it.” This session will take a deep analytical look at creating and measuring your corporate passion. Passion is contagious and this session will discuss effective ways to bottle it, infect your employees/customers/investors and ultimately how to use passion as a sustainable corporate differentiator.
This document provides a survival guide for lambdas and generics in Java. It discusses key concepts like covariance, capture, inference, erasure and synthetic methods. It provides examples and explanations of how these concepts work. It also includes tips for avoiding warnings and exceptions when using generics and lambdas. Clean code techniques for refactoring lambda expressions are presented at the end. Useful external references on generics and lambdas are provided.
Tina Chen, Design Lead at Slack, takes us behind the scenes to share the design processes at Slack. She’ll talk about what it's like to design at a company that’s growing rapidly, and walk us through a recent project that gave apps and bots the ability to interact more closely with users. We’ll also have a Q&A session with Tina after her presentation.
The document describes a KittyCam project that uses a Raspberry Pi, camera, and PIR motion sensor to detect when a cat is in view of the camera and take a photo. It uses Node.js and several frameworks like Johnny-Five and KittyDar. When motion is detected, it takes a photo using Raspistill, detects if a cat face is present using KittyDar, and if so uploads the photo to Cloudinary and sends a text with the image link. It provides details on the hardware components, software stack including Node.js, and implementation of the various functions.
Tomomi Imura, a developer advocate at Nexmo, discusses Nexmo which is a cloud communications platform providing APIs for voice, text, messaging, and phone verification. Nexmo has APIs for messaging, verifying phone numbers, connecting IoT devices, voice calls, and more. Examples are provided of how to send SMS messages and communicate anonymously using Nexmo's APIs. Sign up is encouraged to try the APIs for free.
Moar puzzlers! The more we work with Java 8, the more we go into the rabbit hole. Did they add all those streams, lambdas, monads, Optionals and CompletableFutures only to confuse us? It surely looks so! And Java 9 that heads our way brings even more of what we like the most, more puzzlers, of course! In this season we as usual have a great batch of the best Java WTF, great jokes to present them and great prizes for the winners!
You can write Android applications in Ceylon, using the standard Android tools. This has many advantages, since you can use all the language features available for the other platforms that Ceylon targets, such as: Union and intersection types Top-level and higher-order functions Tuples Comprehensions Typesafe metamodel (Ceylon’s version of Java reflection, with additional type safety)
As in a good Greek Tragedy, scaling devops to big teams has 3 stages and usually end badly. In this play (it’s more than a talk!) we’ll present you with Pentagon Inc, and their way to scaling devops from a team of 3 engineers to a team of 100 (spoiler – it’s painful!)
Velocity is one of the most common metrics used-and one of the most commonly misused-on agile projects. Velocity is simply a measurement of speed in a given direction-the rate at which a team is delivering toward a product release. As with a vehicle en route to a particular destination, increasing the speed may appear to ensure a timely arrival. However, that assumption is dangerous because it ignores the risks with higher speeds. And while it’s easy to increase a vehicle’s speed, where exactly is the accelerator on a software team? Michael “Doc" Norton walks us through the Hawthorne Effect and Goodhart’s Law to explain why setting goals for velocity can actually hurt a project's chances. Take a look at what can negatively impact velocity, ways to stabilize fluctuating velocity, and methods to improve velocity without the risks. Leave with a toolkit of additional metrics that, coupled with velocity, give a better view of the project's overall health.
A look at the history and future of CSS with an eye toward new features like CSS Grid and Flexbox. Examples for this presentation live at http://bryanlrobinson.com/post-modern-examples/
Get frustrated by cross-browser incompatibility? Hate to develop application using JavaScript? jQuery is a powerful JavaScript library that can enhance your websites regardless of your background. jQuery is fast, lean, simple and hugely expandable, enabling you to build compelling web applications quickly and easily. In this session, we will start with a quick introduction of jQuery, illustrate what’s so good about jQuery, and demonstrate step by step how to develop jQuery Ajax application efficiently with database, web services, OData, NetFlix and ASP.NET MVC. Microsoft is now shipping, supporting, and contributing to jQuery, with ASP.NET and Visual Studio. New features which will be available in the next release of jQuery such as globalization, templating and data-linking will be introduced in the session as well.
Slides from DevNexus in Atlanta GA showing Cognitive Services. Minus demos unfortunately! Best place to check all this out is https://www.microsoft.com/cognitive-services/
Lisa Seaman, User Experience Manager at Autodesk, shares how she tests and optimizes Autodesk’s websites with UserTesting. She’ll discuss how her team uses UserTesting and why it has become such a crucial tool for their agile approach.
A private Java (Maven or Gradle) repository as a service can be setup in the cloud. A private Docker registry as a service can be easily setup in the cloud. But what if you want to build a holistic CI/CD pipeline, and on the cloud of YOUR choice? In this talk Baruch will take you through steps of setting up a universal artifact repository, which can serve for both Java and Docker. You’ll learn how to build a CI/CD pipeline with traceable metadata from the Java source files all the way to Docker images. Amazon, Azure, and Google Cloud (do you have setup that works on these?) will be used as an example although the recipes shown would be applicable to other cloud as well.
This is a version of the talk given at Dev Bootcamp in Chicago. Technical Debt has become a catch-all phrase for any code that needs to be re-worked. Much like Refactoring has become a catch-all phrase for any activity that involves changing code. These fundamental misunderstandings and comfortable yet mis-applied metaphors have resulted in a plethora of poor decisions. What is technical debt? What is not technical debt? Why should we care? What is the cost of misunderstanding? What do we do about it? Doc discusses the origins of the metaphor, what it means today, and how we properly identify and manage technical debt.
Machine Learning is all the rage today with many different options and paradigms. This session will walk through the basics of Machine Learning and show how to get started with the open source Spark ML framework. Through Scala code examples you will learn how to build and deploy learning systems like recommendation engines.
We can be brilliant developers, but we won’t succeed—and won’t lead our organizations to succeed—without a new perspective (if you will) and new assumptions about the components of the “technology ecosystem” that are fundamentally critical to our success. This includes the operators, QA team, DBAs, security folks, and even the pure business contingent—in most cases, each of these individuals and groups plays a critical role in the success of what we create and give birth to as developers. What we do in isolation might be genius, but if we insulate ourselves—especially with arrogance—from these colleagues, neither our code nor our organizations will realize their full potential, and most will fail. The bottom line is that our old ways are no longer viable, and as the elite within our industry, we will be the leaders and heroes who discard old assumptions and adopt a new perspective in this exciting journey to digital transformation—where the impossible can become reality.
This deck, presented at DevNexus 2017 in Atlanta, describes Chick-fil-A's approach to changing the way we deliver software to our enterprise by shifting to Cloud Native architectures, DevOps delivery models, and microservices. Contact Brian Chambers on LinkedIn at https://www.linkedin.com/in/brian-chambers-65960168/ if there are questions
The document discusses using domain-driven design aggregates and event sourcing to develop microservices architectures. It describes how aggregates partition domain models to allow microservices to own distinct capabilities. Event sourcing is presented as a way to implement event-driven architectures by persisting domain events rather than just the current state. Explicit sagas are proposed to orchestrate transactions across aggregates and microservices to maintain consistency in an eventually consistent way.
Microservices architecture is a very powerful way to build scalable systems optimized for speed of change. To do this, we need to build independent, autonomous services which by definition tend to minimize dependencies on other systems. One of the tenants of microservices, and a way to minimize dependencies, is “a service should own its own database”. Unfortunately this is a lot easier said than done. Why? Because: your data. We’ve been dealing with data in information systems for 5 decades so isn’t this a solved problem? Yes and no. A lot of the lessons learned are still very relevant. Traditionally, we application developers have accepted the practice of using relational databases and relying on all of their safety guarantees without question. But as we build services architectures that span more than one database (by design, as with microservices), things get harder. If data about a customer changes in one database, how do we reconcile that with other databases (especially where the data storage may be heterogenous?). For developers focused on the traditional enterprise, not only do we have to try to build fast-changing systems that are surrounded by legacy systems, the domains (finance, insurance, retail, etc) are incredibly complicated. Just copying with Netflix does for microservices may or may not be useful. So how do we develop and reason about the boundaries in our system to reduce complexity in the domain? In this talk, we’ll explore these problems and see how Domain Driven Design helps grapple with the domain complexity. We’ll see how DDD concepts like Entities and Aggregates help reason about boundaries based on use cases and how transactions are affected. Once we can identify our transactional boundaries we can more carefully adjust our needs from the CAP theorem to scale out and achieve truly autonomous systems with strictly ordered eventual consistency. We’ll see how technologies like Apache Kafka, Apache Camel and Debezium.io can help build the backbone for these types of systems. We’ll even explore the details of a working example that brings all of this together.
This document discusses how HTML5 can be used to build engaging mobile applications. Key features covered include offline storage using the Application Cache API, storing data locally using Web Storage, using a SQL database with Web SQL, advanced graphics capabilities with Canvas and SVG, real-time communications over WebSockets, and tools for developing HTML5 apps like jQuery Mobile, Sencha Touch, and Google Web Toolkit. It emphasizes testing on multiple platforms and browsers to ensure compatibility.
Learn all the basics of web app development including bootstrap, handlebars templates, jquery and angularjs, as well as using hybrid app deployment on a phone.
HTML5 introduces several new features including new semantic elements, support for embedded video and audio, canvas element for 2D/3D graphics, offline web applications, and drag and drop. It also removes some older HTML elements. HTML5 is still a work in progress but is supported by all major browsers. It aims to make web pages more compatible with new technologies and reduce the need for browser plug-ins.
This document discusses best practices for mobile web development. It begins by noting limitations of mobile devices like less CPU/memory and smaller screens. It then provides tips for configuring the viewport, using media queries to separate styles, and detecting device properties in JavaScript. The document also covers HTML5 features like geolocation, media capture, and input types. It gives recommendations for images, gestures, and performance optimizations like minimizing redirects, requests, files sizes and using Gzip compression.
This PPT is about my best friends, HTML, CSS and JS. Here I am just talk/show few features of them. all three combined make our web site more powerful in this WWW world.
The document discusses optimization of the presentation tier of web applications. It notes that the presentation tier is often overlooked despite being responsible for over 30% of client/server performance. Some key optimizations discussed include reducing HTTP requests, optimizing response objects by reducing size and load pattern, JavaScript minification and placement, image sprites, caching, and ensuring valid HTML markup.
HTML5 is a draft specification from the W3C that adds new elements like canvas, video and audio to HTML and changes some older elements. It is not yet finalized and continues to evolve. HTML5 allows embedding multimedia like video without plugins through new elements like <video> and <audio>. It also introduces new canvas element for drawing 2D graphics and SVG for vector graphics. HTML5 supports local storage and geolocation in the browser.
The document provides an overview of HTML5, CSS3, and LESS CSS. It describes new HTML5 elements like <canvas>, <audio>, <video>, and attributes for existing tags. CSS3 features covered include rounded corners, animations, and media queries. LESS CSS allows snippets to be reused through mixins and nested rules. The document recommends tools like Modernizr, polyfills, and Crunch to compile LESS into CSS.
This presentation about HTML5 and CSS3 presents with example and described valid points with simple example code and live preview.
This document provides an overview of a presentation on using D3 for data visualization on desktops, smartphones, and Google Glass. It discusses how D3 works, examples of basic charts like scatter plots and bar charts using D3, and how to incorporate features like mouse interactions, animations, filters and gradients. It also covers using D3 with technologies like Android, PhoneGap, and Google Glass to create mobile visualizations.
This document provides an overview of a presentation on using D3 for data visualization on desktops, smartphones, and Google Glass. It discusses topics like what D3 is, how it works, examples of creating simple charts and adding interactivity with mouse events, using SVG filters and gradients, and integrating D3 visualizations into Android and Google Glass apps. It also briefly mentions related technologies, resources for learning more, and potential training topics.
Building a responsive mobile application with AngularJs. Tips and Tricks. How to use Ionic and AppGyver to fill the Cordova performance gap.
Advanced CSS Tricks maximizes the use of CSS as a styling language and provides better user experience for your website and maximize the performance.
Modernizr is a small JavaScript library that detects whether browsers support HTML5 and CSS3 features. It allows developers to write progressive enhancement code that provides a baseline experience for all browsers while enhancing functionality for modern browsers. Modernizr tests over 20 features and adds corresponding classes to the HTML element. This allows developers to target styles and scripts based on a browser's capabilities. It is a useful tool for building websites that work across a wide range of browsers without needing to sniff browser versions.
Presentation for the East London University Hack Day explaining the technologies used to build web interfaces.
From the 2011 ACE/NETC Conference in Denver, CO This presentation focuses on utilizing technologies such as jQuery, CSS, Ajax/Spry, Wordpress, and other tools to extend the capabilities of the Adobe web publishing system. The Adobe web publishing system is primarily composed of Dreamweaver, Contribute, and the Contribute Publishing Server. Dreamweaver is used by web designers and developers to create websites. Contribute is used by the non-technical subject matter experts to edit the content of the websites through a simple graphic user interface similar to Microsoft Word. The Contribute Publishing Server controls the file permissions and other administrative settings of the websites. These programs also integrate with other Adobe products including Flash/Flex, Acrobat, InDesign, Photoshop, and other familiar programs. Technologies, such as the ones that will be discussed, are extremely useful in constructing interactive site navigation, in tailoring mobile sites, or in utilizing blogs and RSS integration. However, there are simple strategies to allow for easy editing of the content of the sites through Contribute without interfering with the scripting these utilize. The presenters will endeavor to give a general overview of some of the tools and technologies involved, as well as showcase a few examples of specific tricks that web designers and developers should find very useful.
This document provides an overview of how to create responsive website designs using Bootstrap 3. It discusses how Bootstrap is a popular framework for responsive, mobile-first projects. It then covers the basics of getting started with Bootstrap, including downloading Bootstrap, including the necessary files, and using Bootstrap's grid system and other components to create responsive designs.
Getting started with JavaScript can be somewhat challenging. Especially given how fast the scenery changes. In this presentation I provide a general view of the state of the art. Besides this I go through various JavaScript related tricks that I've found useful in practice. survivejs.com is a companion site of the presentation and goes on further detail in various topics. The original presentation was given at AgileJkl, a local agile conference held in Central Finland.
The document provides guidelines and techniques for optimizing web page performance, including recommendations for CSS and JavaScript best practices, optimization of resources, and use of the Firebug tool to inspect pages and identify issues. It discusses strategies like minimizing HTTP requests, optimizing CSS and JavaScript, using JSON over XML, image sprites, caching, and more. The Firebug tool is highlighted as a way to analyze pages and debug JavaScript, CSS, and performance issues.
This document provides an overview of HTML5, Backbone.js, and web development. It introduces key concepts like client-server architecture, APIs, databases, markup languages, and frameworks like jQuery, Bootstrap, and Backbone. It discusses modern front-end development practices and server-side programming. Mobile web development options like native, hybrid, and PhoneGap are also covered. The document emphasizes learning resources and stresses attention to details, user experience, and adaptability to new technologies in the field.
Creating high performance sites and apps is crucial for every developer. In this session, we will explore the best practices and performance tricks, including startup time, UI responsiveness, and Memory efficiency to make your apps running faster and fluid. Come learn the tips, tricks, and tools for maximizing the performance of your sites and apps with JavaScript and HTML5.
How to tackle real-world web platform performance problems in modern websites and apps? This session starts with a basic understanding of the web platform and then explores to a set of problem/solution pairs built from industry-standard performance guidance. In the talk, we will demonstrate performance tips and tricks that will help you improve the performance of your apps and sites today. We will discuss the following respond to network requests, speed and responsiveness, optimizing media usage, and writing fast JavaScript. These performance tips and tricks apply equally to web sites that run on standards based web browsers, as well as to modern apps.
Creating high performance sites and apps is crucial for every developer. In this session, we will explore the best practices and performance tricks, including startup time, UI responsiveness, and Memory efficiency to make your apps running faster and fluid. Come learn the tips, tricks, and tools for maximizing the performance of your sites and apps with JavaScript and HTML5.
This document provides biographical information about Doris Chen in 3 paragraphs. It states that she is a Developer Evangelist at Microsoft based in Silicon Valley, California. It lists her blog, Twitter, email, and details about her office hours. It notes that she has over 15 years of experience in the software industry focusing on web technologies. It also shares that she has spoken and published widely at several conferences and meetings. It concludes by mentioning that Doris received her Ph.D. from UCLA.
Doris Chen is a developer evangelist at Microsoft based in Silicon Valley. She has over 15 years of experience in the software industry focusing on web technologies. She blogs at http://blogs.msdn.com/b/dorischen and can be found on Twitter @doristchen. Her areas of expertise include HTML5, CSS3, and Windows 8 app development.
This document contains biographical information about Doris Chen, a developer evangelist at Microsoft. It notes that she has over 15 years of experience in software focusing on web technologies, has spoken widely at conferences, and holds a PhD from UCLA. Her blog and contact information are also included to allow developers to learn more about building apps for Windows 8.