Ajax allows web applications to update parts of a page asynchronously without reloading the entire page. This enables continuous interaction, customized transitions between contexts, and incremental loading of information. However, single-page applications that rely heavily on Ajax and never reload pages can result in technical problems around linking, navigation, and browser history. Designers must carefully consider when Ajax is needed versus a full page reload.
This document provides an introduction to web development. It discusses that the course will cover HTML and CSS over 8 weeks of modules. It also addresses assessments and getting help if students fall behind, noting they can email the instructors. The document further explains the layers of web development, including HTML for content, CSS for presentation, and JavaScript for behavior. It emphasizes separating these layers and why this approach is beneficial, such as for shared resources, faster downloads, collaboration, accessibility, and backward compatibility. Finally, it introduces the World Wide Web Consortium as the standards body for the web.
jQuery 1.9 and 2.0 - Present and FutureRichard Worth
The document discusses jQuery 1.9, 2.0, and the future of jQuery, noting that jQuery 2.0 drops support for older browsers like IE6-8 but is 12% smaller, and introduces 12 optionally excludable modules; it promises that jQuery 1.X will be supported as long as older IE browsers are relevant and that API equivalence will be maintained between 1.X and 2.X versions; and it invites attendees to join and contribute to the jQuery community.
The document discusses designing experiences for the mobile web. It notes that the mobile web is profoundly different than the desktop experience due to different contexts and portability. Some key decisions for mobile web design include whether to have a single or dual-site approach, how to structure navigation and content for smaller screens, and usability testing approaches. It also describes a case study of redesigning a website for mobile and some of the challenges encountered.
Umbraco is an open source content management system (CMS) that can be used to manage websites. It was developed in 2005 and has over 85,000 installations worldwide. The document discusses how to configure Umbraco by installing it manually through IIS, creating document types and templates to structure content, and extending its capabilities through macros and custom development.
Everyday we create services for our systems. A lot of people create RESTful APIs but much more can be accomplished by following best practices and treating your APIs as a product to be consumed by fellow team members, systems and 3rd party consumers.
We will discuss what makes a great RESTful API and share some of our experiences building some that power real systems.
This was part of JOSA TechTalks project within Jordan Open Source Association, presented by Yazan Quteishat and Tambi Jalouqa.
This document provides details about an Azure + Umbraco workshop that was held on March 10, 2011. It introduces the presenters Kurt Claeys from Microsoft and Mel Gerats and Olivier Mangelschots from Orbit One. The workshop provided an introduction to Azure and a hands-on session on using Umbraco in Azure. The agenda included technical dives into Azure and Umbraco, and attendees were instructed to ensure their laptops were prepped with the necessary software for the hands-on portion.
Responsive Web Design: Clever Tips and TechniquesVitaly Friedman
Responsive Web design challenges Web designers to adapt a new mindset to their design and coding processes. This talk provides an overview of various practical techniques, tips and tricks that you might want to be aware of when working on a new responsive design project.
High Performance JavaScript (CapitolJS 2011)Nicholas Zakas
High Performance JavaScript provides techniques for optimizing JavaScript performance. It discusses how JavaScript execution blocks the browser UI thread, preventing responsive user experiences. It recommends limiting individual JavaScript jobs to under 50ms to avoid unresponsiveness. The document then provides techniques to improve load time performance such as dynamically loading scripts, and runtime techniques like timers and web workers to avoid blocking the UI thread during long-running processes.
Monster JavaScript Course - 50+ projects and applicationsLaurence Svekis ✔
Get this Course
https://www.udemy.com/javascript-course-projects/?couponCode=SLIDESHARE
Portfolio builder loaded with projects and applications that you can use, extend on and enhance to add to your portfolio
JUST GOT BIGGER - more updates to come - YOU FOUND IT
Grow your portfolio - showcase what you can build with JavaScript
Learn JavaScript have fun with interactive and dynamic web applications.
Over 529 downloadable resources - 57 articles - 43+ hours on-demand video, 57 Sections
Over 614 HD video lessons
Over 51+ projects and web applications. Projects can be used as started projects to extend and enhance. All JavaScript focused.
4 downloadable ebook guides 200 pages and 3 x 60 pages - with code and resource links
No libraries JUST JAVASCRIPT and JAVASCRIPT DOM
This is the course you've been looking for..........
Everything you need to get started with JavaScript, expand your knowledge about using JavaScript, and more included.
It’s arrived, and bigger than expected!!!
For anyone who wants to supercharge their JavaScript learning - building and applying JavaScript to over 50 projects and challenges… this course is for YOU!!!!
From JavaScript beginners to all levels, course is presented in a fun interactive format that will challenge you. Move through the lessons of the course as you want to learn them, variety of ways to benefit from it. Learn alongside, try before you see the solution, try after you view the solution. It’s up to you! Unique format for learning encouraging you to try the code. Of course source code is included in every step of the way.
Most often asked for ARE PROJECTS - and this course delivers! Over 50 and will grow over time as more projects and challenges get added. You can select the projects you want to do or take them in order, it’s up to you.
Loaded with games and so many mini projects guaranteed to help you learn more about JavaScript and DOM manipulation. All JavaScript code no libraries or short cuts.
Explore how to apply JavaScript to create interactive and dynamic web content - that will impress your friends.
Extend on the projects and add them to your portfolio, to showcase skills you have learned.
Useful real world projects coded with simple JavaScript for developers of all levels.
No better way to learn than to try the code and produce something fun and useful with it. Learn to create amazing things with JavaScript bringing your web content to life.
This will keep you busy and provide you the opportunity to learn and experiment with code. Try it. All the projects are designed in a starter type format so that you can build on them and customize to make it your own.
Portfolio Builder 50+ projects
This course includes full introduction to coding with JavaScript, all core syntax and how to apply it to make things happen. Create your own code - loaded with challenges and code snippets.
5 Reasons Why Your Website Is[n’t] a Native App (PrDC 2015)David Wesst
“We need a mobile app. Make our website into a mobile app.” The request seems reasonable, doesn’t it? Your website is JavaScript, native apps are JavaScript, why wouldn’t you make your website into an application? In this presentation we’ll give you 5 reasons why your website shouldn’t end up as a native application to give you the tools you need to not only turn down the request, but on how to make a better solution.
Get this Course
https://www.udemy.com/javascript-course-dom/?couponCode=SLIDESHARE
Document Object Model Power your websites make things happen online - JavaScript to create interactive web pages
Source code making it easy for you to try the code and experiment learning the code.
Challenges and tips to get you coding quickly.
Make you web pages come to life
DOM what it is
Element selection
Multiple element selection
Element manipulation - update content and select attributes
Elements and classes add remove and toggle
Traversing children and parents
Element style attribute
Challenge #1 image popup window
Create elements
Click events
Challenge #2 click event create elements
Challenge #3 click change background
Event Object
Key press event
Mouse move events
Challenge #4 - List items advanced remove,create element, click
Event bubbling and capturing
No libraries, no shortcuts just learning JavaScript making it DYNAMIC and INTERACTIVE web application.
This document discusses web workers, which allow JavaScript to execute tasks in background threads apart from the main execution thread. It covers the need for web workers due to JavaScript's single-threaded nature. There are two types of web workers - dedicated workers which are linked to a single script, and shared workers which can be accessed by multiple scripts. The document outlines the web workers API, how to communicate with workers using message passing, and provides examples of dedicated and shared workers. It also discusses browser support for web workers and how to check for support.
This is the presentation I was using when delivering the free meetup "Node.js Jump Start" (Crash Course). You can find the video at https://www.youtube.com/watch?v=UEVaBHMTLcQ
Essential Javascript -- A Javascript <b>Tutorial</b>tutorialsruby
Javascript is an interpreted language with C-like syntax that supports object-oriented programming and other advanced concepts. It is approachable for beginners but also powerful. This document provides an overview of Javascript basics like variables, data types, operators, conditional statements, and functions. It also covers Javascript in the browser context, explaining how to add script blocks, work with events, get input from users, and output data to the DOM. Comments are included to document code.
The document appears to be notes containing random words and numbers with no clear meaning. It mentions quails but provides no other context. There are also unintelligible strings of letters and numbers with a URL listed at the bottom but no other discernible information.
The document appears to be notes containing random words and numbers with no clear meaning or context. It mentions not knowing what a quail looks like, includes some numbers with no context, and contains a partial URL.
The document appears to contain random words and numbers with no clear meaning or narrative. It references an unknown quail, provides measurements with no context, includes misspelled words, and lists a website and fraction with no explanation of their purpose or relevance.
The document appears to be a collection of random words and characters with no clear meaning or narrative. It includes dates, numbers, abbreviations, and strings of letters that do not form coherent sentences or convey any discernible information.
The document contains random words and numbers with no clear meaning or narrative. It references an unknown quail, includes numbers and a website but provides no context or essential information to summarize.
The document discusses not knowing what a quail looks like and includes some numbers and a website URL. It is unclear what the overall topic or purpose of the document is based on the limited information provided.
Steve Sfartz - How to embed Messaging and Video in your apps - Codemotion Mil...Codemotion
This document provides an overview of how to embed messaging and video capabilities into apps using Cisco Spark APIs and SDKs. It discusses the Cisco Spark platform and how developers can build bots, use the REST API and OAuth for authentication, and leverage SDKs for browsers, iOS, and Android. It also covers how guests can access Cisco Spark capabilities without being a registered user through guest mode and JWT tokens. Code samples and demos are provided to illustrate integrating messaging, video calling, and other real-time collaboration features into third party applications and business processes.
Anna Makarudze - Django Girls: Inspiring women to fall in love with programmi...Codemotion
Django Girls is a non-profit organization that empowers and helps women to organize free, one-day programming workshops by providing tools, resources and support. Our goal is to bring more amazing women into the world of technology and increase the diversity in the Django community. We believe that technology is for people and everyone should be able to build it. We are making technology more approachable by creating simple tools and resources designed with empathy. In my talk, I will share on how Django Girls was started and the journey travelled so far in empowering women across the globe.
Alberto Maria Angelo Paro - Isomorphic programming in Scala and WebDevelopmen...Codemotion
Scala is the only language that can be used to produce code that can be "trans/compiled" for the JVM, in Javascript and in native binary. This allows to write libraries that are usable in JVM and JS using the power of functional programming (i.e. cats, scalaz), generic programming (i.e. shapeless) and macro/scalameta available in Scala. In this talk, we will see how to write a Scala application backend and a SPA (scala.js/scala-js-react) that share the same code as a business logic, datamodels and transparent API call (JVM/JS) in Scala (via autowire/akka-http/circe).
The document appears to be notes containing random words and numbers that do not form a coherent story or provide essential information. It mentions not knowing what a quail looks like and includes some numbers, website URLs, and dates but does not have a clear topic or message to summarize.
This short document contains random information including a date, a statement about not knowing what a quail looks like, a number, another number with a decimal, and a URL fragment. It does not provide any clear context or narrative to summarize.
Nicola Corti - Building UI Consistent Android Apps - Codemotion Milan 2017Codemotion
Consistency is probably one of the best-known design principles. Consistent UIs are easy to use, easy to learn and frustration free. Nonetheless, they are also extremely easy to break! Just a few development iterations are enough to totally mess up your color palette or your icon sets. Yelp ships its experience across Android, iOS and Web apps used by millions of users. In this talk, you will get an insight into the challenges we face on a daily basis ensuring our visual consistency, and the solutions we adopted.
Gabriele Petronella - Mythical trees and where to find them - Codemotion Mila...Codemotion
Abstract Syntax Trees (or ASTs) are the core of most tools we use in JavaScript, from Babel to ESLint, from prettier to codemods. In this talk we see what they are, how they power such tools and how to use them directly to develop custom solutions to everyday problems.
Tiffany Conroy - Remote device sign-in – Authenticating without a keyboard - ...Codemotion
When we were developing our SoundCloud app for Xbox One, something became very obvious during usability testing: signing in with a game controller really sucks. Entering text requires navigating a virtual keyboard to individual letters, numbers, and characters one at a time – such a nightmare! Other connected devices are even more extreme, with no way to enter text at all. Learn how to implement what we call “remote device sign-in”, a way for people to sign in to devices with limited input capability that is secure, simple, and fast.
This document provides instructions for building a micro-service system using IBM Bluemix and DevOps services. It involves:
1. Setting up an Nginx proxy project in Bluemix to route requests.
2. Creating a Node.js microservice that serves pages and shared headers. Authentication is added using Facebook OAuth.
3. Adding another Node.js microservice and configuring the proxy to route to both services.
4. Sessions are stored in Redis to demonstrate integration with external services.
The full system allows composition of UIs from multiple microservices with shared authentication and session state.
Claudio Carboni - ArcGIS platformthe foundation of your idea - Codemotion Mil...Codemotion
The document summarizes key information about the ArcGIS platform:
- ArcGIS is used by over 350,000 organizations worldwide and has over 5,000 employees and 9,000 employees globally. It generates over $1 billion in annual revenue.
- The platform provides capabilities for spatial analysis, predictive modeling, and understanding relationships between data and places. It supports a wide range of industries from utilities to emergency response.
- ArcGIS includes both cloud-based (ArcGIS Online) and on-premises (ArcGIS Enterprise) components, as well as desktop and mobile apps. It also has extensive APIs and SDKs for custom development.
Giovanni Laquidara - Hello ARCore - Codemotion Milan 2017Codemotion
Get ready to develop a brand new experiences that seamlessly blend the digital and physical worlds with Android! We will learn the potential of the new AR SDK from Google, ARCore. By looking its 3 key technologies: Motion tracking, Environmental understanding and Light estimation We will have a clear vision of what We can develop with. You will be back at home with a deeper understanding of how to create AR apps with ARCore using your development environment and ready-to-reuse code samples.
This short document contains random information including a date, a statement about not knowing what a quail looks like, numeric values, and a URL fragment. It does not have a clear topic or message to summarize.
Gabriele Nocco - Massive distributed processing with H2O - Codemotion Milan 2017Codemotion
This document provides an overview of H2O and gradient boosting machines (GBM). It introduces H2O as an open-source in-memory machine learning engine that can handle large datasets and exposes APIs in multiple languages. GBM is described as a powerful supervised algorithm that builds an ensemble of decision trees to minimize a loss function. The document explains the key components of GBM, including the loss function, weak learner (decision trees), and additive model approach. It also discusses techniques to improve basic GBM like tree constraints, learning rate, stochastic gradient boosting, and regularization.
JavaScript is a scripting language that can be used to make web pages interactive. It allows you to check and modify HTML forms, change images, and write dynamic content. JavaScript code is executed by the browser and only affects the current page. The language is case sensitive, lightweight, and interpreted rather than compiled. Variables, literals, objects, operators, control structures, and functions are the basic components of JavaScript code. Comments can be added to explain code. JavaScript code can be embedded directly in HTML pages or linked via external .js files. Code placement in the head or body affects when it runs.
Building great mobile apps: Somethings you might want to knowshwetank
The document provides an overview of building great mobile web apps, including considerations for low-powered devices without full browsers, the importance of a single web, differences between smartphone browsers, guidelines for responsive design, offline capabilities using cache manifests and web storage, geolocation, device orientation, and new capabilities like camera access. It encourages reading W3C recommendations and Opera developer articles for more information on these mobile web development topics.
Presented at Web Unleashed 2017. More info at www.fitc.ca/webu
Presented by Ksenija Gogic, TWG
Overview
What are components? How can designers apply a component-minded approach to their workflow? How can we leverage components to improve the design handoff? Ultimately – how can designers and developers work together even better?
Using React as a framework, Ksenija will discuss how to design for a component-based web application to make for a more efficient workflow, an easier design handoff, and a better understanding between roles.
Objective
To create a common language and understanding when working with component-based web frameworks between designers and developers.
Target Audience
Designers and developers looking to make their collaborative workflow even better.
Five Things Audience Members Will Learn
How to take a component-minded approach to building a design system
How to design and create components using Sketch symbols
How to assemble (compose) collections of components using Sketch symbols
How to work with modifiers (props) to customize components
How to ensure everyone is speaking the same language
This document provides an overview of JavaScript, including:
- Its origins and development over time
- How it can be used to make webpages dynamic and interactive
- Key JavaScript concepts like variables, arrays, functions, and events
- How it interacts with and manipulates the DOM
- Its rebirth with the introduction of AJAX, which allows asynchronous data fetching and partial page updates
This document summarizes Jan Jongboom's presentation on building web applications for offline use. Some key points:
1. Only 2.5 billion people out of 7 billion have internet access, so mobile users often don't have a connection. Applications need to work offline.
2. Applications have two parts - the shell (code, UI, assets) and app content (dynamic data). The shell can be cached using the AppCache API to work offline.
3. App content is fetched via AJAX but can be stored in localStorage to serve offline. Path caching pre-fetches related data to improve performance.
4. While AppCache works today, the ServiceWorker API proposed by Google
This document provides an overview of Ajax including:
- What Ajax is and how it works to make web pages more interactive
- Examples of popular sites that use Ajax like Gmail and Google Maps
- How Ajax applications differ from traditional applications by exchanging small amounts of data asynchronously rather than reloading the whole page
- Popular Ajax frameworks like jQuery that make development of Ajax applications easier
- Benefits of Ajax like richer interfaces, responsiveness, and network efficiency
JavaScript is a scripting language that runs in web browsers. It allows for dynamic interactions and effects on web pages. JavaScript code can run on the client-side to process user input and update pages in real-time without reloading. It is commonly used with HTML and CSS to create interactive web applications. Some key points covered are that JavaScript is weakly typed, prototype-based, and runs directly in web browsers to enhance the user experience.
JavaScript is a scripting language that allows adding interactivity to HTML pages. It can be used for client-side form validation and integration with user plugins. JavaScript is case-sensitive and allows variables, functions, conditional statements, and objects. Common uses include pop-up boxes, event handling, and cookies.
The document discusses best practices for mobile development including designing for mobile devices, using client-side patterns like Backbone.js, and optimizing load time performance. It recommends designing for touchscreens, smaller screens, and navigation differences on mobile. It also discusses leveraging HTML5 features, detecting mobile browsers, serving optimized content and assets, and caching aggressively to improve performance. Client-side MVC frameworks like Backbone are presented as useful for building data-driven mobile web apps.
A progressive web app (PWA) delivers an app-like experience through your mobile phone’s browser but has the same flexibility and gestures as a native application. Because they are powered by mobile browsers, they are not particular to any one device, meaning developers no longer need to write separate code for Android and Apple devices.
AJAX is a set of web development techniques used to create interactive web applications. It allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes, without interfering with the display and behavior of the existing page. This is done through JavaScript and the XMLHttpRequest object, allowing new information to be added without reloading the entire page. Common uses of AJAX include updating parts of a web page without reloading, autocomplete functions, and real-time notifications.
JavaScript is a general-purpose programming language that allows programmers of all skill levels to control the behavior of software objects. It is commonly used in web browsers to control HTML elements and the document itself. JavaScript can also be used in other environments like Adobe Acrobat forms. JavaScript is distinct from Java, though they share some syntax. JavaScript was developed by Netscape and is easier to learn than Java. ECMAScript is another name for JavaScript. Common JavaScript techniques include submitting forms, detecting the operating system, and making websites more interactive using techniques like pop-up menus.
Spring Cloud Gateway is a gateway that provides routing, filtering, and monitoring capabilities for microservices. It is non-blocking and built on Spring Framework and uses reactive streams. Spring Cloud Gateway offers a simpler and more developer-friendly alternative to other gateway options that are often heavy-weight and difficult to integrate. It provides a Java-based configuration that gives developers control over routing, filtering, and other gateway features without vendor lock-in.
This document discusses developing websites with multiple teams using a microservice approach. It proposes having each service have its own frontend to enable continuous delivery, decentralized governance, and good mobile performance. Integration is done through transclusion, where one service can include static resources like HTML fragments from another service. Server-side transclusion of resources is preferred for performance. Services should not rely on global client-side dependencies.
AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. AngularJS's data binding and dependency injection eliminate much of the code you would otherwise have to write. And it all happens within the browser, making it an ideal partner with any server technology.
Lessons from the Trenches: Engineering Great AJAX Experiencesgoodfriday
- The document discusses lessons learned from building rich interactive web applications using AJAX and a mash-up architecture at Microsoft Windows Live. Some key lessons included evolving the AJAX pattern to handle real-world issues, developing component models, managing networks efficiently, and ensuring cross-browser compatibility.
- The Windows Live team adopted a mash-up philosophy where properties and experiences were composed of reusable components or "gadgets". This brought benefits like more efficient development and ability to quickly integrate services.
- Building robust, interactive web applications requires patterns for areas like asynchronous client-side page composition, component integration, theme management, and handling unreliable networks and security issues. The document outlines various approaches and best practices.
The document discusses lessons learned from building rich web applications using AJAX technologies at Microsoft. Key points include:
- They evolved the traditional AJAX pattern to address challenges of building robust, interactive applications. This included defining programming patterns and a component model.
- Their "mash-up" architecture, based on reusable gadget components, provided many benefits including more efficient development and ability to reuse components across properties.
- Building applications as collections of components rather than monolithic pages improved caching, reusability, and the ability to asynchronously deploy updates.
- Managing the network, security, and other challenges was critical for building reliable, interactive experiences.
Essentials in JavaScript App Bundling with WebpackKhaled Al-Ansari
These slides were for the Webpack session (part of the fronteers meetup), you can find the examples in the following repo: https://github.com/KhaledElAnsari/Building-Apps-With-Wepback-Fronteers-Meetup
Fuzz-testing: A hacker's approach to making your code more secure | Pascal Ze...Codemotion
Increased complexity makes it very hard and time-consuming to keep your software bug-free and secure. We introduce fuzz-testing as a method for automatically and continuously discovering vulnerabilities hidden in your code. The talk will explain how fuzzing works and how to integrate fuzz-testing into your Software Development Life Cycle to increase your code’s security.
Pompili - From hero to_zero: The FatalNoise neverending storyCodemotion
It was 1993 when we decided to venture in a beat'em up game for Amiga. The Catalypse's success story pushed me and my comrade to create something astonishing for this incredible game machine... but things went harder, assumptions were slightly different, and italian competitors appeared out of nowhere... the project died in 1996. Story ended? Probably not...
Il Commodore 65 è un prototipo di personal computer che Commodore avrebbe dovuto mettere in commercio quale successore del Commodore 64. Purtroppo la sua realizzazione si fermò appunto allo stadio prototipale. Racconterò l'affascinante storia del suo sviluppo ed il perchè della soppressione del progetto ormai ad un passo dalla immissione in commercio.
Rivivere l'ebbrezza di progettare un vecchio computer o una consolle da bar è oggi possibile sfruttando le FPGA, ovvero logiche programmabili che consentono a chiunque di progettare il proprio hardware o di ricrearne uno del passato. In questa sessione si racconta come dal reverse engineering dell'hardware di vecchie glorie come il Commodore 64 e lo ZX Spectrum sia stato possibile farle rivivere attraverso tecnologie oggi alla portata di tutti.
Michel Schudel - Let's build a blockchain... in 40 minutes! - Codemotion Amst...Codemotion
There's a lot of talk about blockchain, but how does the technology behind it actually work? For developers, getting some hands-on experience is the fastest way to get familiair with new technologies. So let's build a blockchain, then! In this session, we're going to build one in plain old Java, and have it working in 40 minutes. We'll cover key concepts of a blockchain: transactions, blocks, mining, proof-of-work, and reaching consensus in the blockchain network. After this session, you'll have a better understanding of core aspects of blockchain technology.
Richard Süselbeck - Building your own ride share app - Codemotion Amsterdam 2019Codemotion
When was the last time you were truly lost? Thanks to the maps and location technology in our phones, a whole generation has now grown up in a world where getting lost is truly a thing of the past. Location technology goes far beyond maps in the palm of our hand, however. In this talk, we will explore how a ridesharing app works. How do we discover our destination?How do we find the closest driver? How do we display this information on a map? How do we find the best route?To answer these questions,we will be learning about a variety of location APIs, including Maps, Positioning, Geocoding etc.
Eward Driehuis - What we learned from 20.000 attacks - Codemotion Amsterdam 2019Codemotion
Eward Driehuis, SecureLink's research chief, will guide you through the bumpy ride we call the cyber threat landscape. As the industry has over a decade of experience of dealing with increasingly sophisticated attacks, you might be surprised to hear more attacks slip through the cracks than ever. From analyzing 20.000 of them in 2018, backed by a quarter of a million security events and over ten trillion data points, Eward will outline why this happens, how attacks are changing, and why it doesn't matter how neatly or securely you code.
Francesco Baldassarri - Deliver Data at Scale - Codemotion Amsterdam 2019 - Codemotion
IoT revolution is ended. Thanks to hardware improvement, building an intelligent ecosystem is easier than never before for both startups and large-scale enterprises. The real challenge is now to connect, process, store and analyze data: in the cloud, but also, at the edge. We’ll give a quick look on frameworks that aggregate dispersed devices data into a single global optimized system allowing to improve operational efficiency, to predict maintenance, to track asset in real-time, to secure cloud-connected devices and much more.
Martin Förtsch, Thomas Endres - Stereoscopic Style Transfer AI - Codemotion A...Codemotion
What if Virtual Reality glasses could transform your environment into a three-dimensional work of art in realtime in the style of a painting from Van Gogh? One of the many interesting developments in the field of Deep Learning is the so called "Style Transfer". It describes a possibility to create a patchwork (or pastiche) from two images. While one of these images defines the the artistic style of the result picture, the other one is used for extracting the image content. A team from TNG Technology Consulting managed to build an AI showcase using OpenCV and Tensorflow to realize such goggles.
Melanie Rieback, Klaus Kursawe - Blockchain Security: Melting the "Silver Bul...Codemotion
The document summarizes some of the security issues with blockchain technology. It discusses how blockchain is not a "silver bullet" and does not inherently solve problems like privacy and security of smart devices. It outlines various application security issues with complex code, protocols, and difficulty of updates on blockchains. Concerns over data immutability and security of smart contracts are also covered. The document questions whether blockchain truly provides the level of decentralization and anonymity claimed, and outlines some impossibility results and limitations of existing approaches to achieving security and privacy in blockchain systems.
Angelo van der Sijpt - How well do you know your network stack? - Codemotion ...Codemotion
The document provides an overview of the HTTP network protocol in its early stages of development. It summarizes the initial IMP (Interface Message Processor) software used to establish connections and transmit messages over the ARPANET. It outlines some early requirements for host-to-host software to enable simple and advanced use between computer systems. The document also describes the initial host software specifications, including establishing connections, transmitting data efficiently, and implementing error checking between connected systems. This was one of the first documents to define core aspects of the early HTTP network protocol to enable information exchange over the fledgling internet.
Lars Wolff - Performance Testing for DevOps in the Cloud - Codemotion Amsterd...Codemotion
Performance tests are not only an important instrument for understanding a system and its runtime environment. It is also essential in order to check stability and scalability – non-functional requirements that might be decisive for success. But won't my cloud hosting service scale for me as long as I can afford it? Yes, but… It only operates and scales resources. It won't automatically make your system fast, stable and scalable. This talk shows how such and comparable questions can be clarified with performance tests and how DevOps teams benefit from regular test practise.
Sascha Wolter - Conversational AI Demystified - Codemotion Amsterdam 2019Codemotion
Sascha will demonstrate the opportunities and challenges of Conversational AI learned from the practice. Both Technology and User Experience will be covered introducing a process finding micro-moments, writing happy paths, gathering intents, designing the conversational flow, and finally publishing on almost all channels including Voice Services and Chatbots. Valuable for enterprises, developers, and designers. All live on stage in just minutes and with almost no code.
Michele Tonutti - Scaling is caring - Codemotion Amsterdam 2019Codemotion
A key challenge we face at Pacmed is quickly calibrating and deploying our tools for clinical decision support in different hospitals, where data formats may vary greatly. Using Intensive Care Units as a case study, I’ll delve into our scalable Python pipeline, which leverages Pandas’ split-apply-combine approach to perform complex feature engineering and automatic quality checks on large time-varying data, e.g. vital signs. I’ll show how we use the resulting flexible and interpretable dataframes to quickly (re)train our models to predict mortality, discharge, and medical complications.
Pat Hermens - From 100 to 1,000+ deployments a day - Codemotion Amsterdam 2019Codemotion
Coolblue is a proud Dutch company, with a large internal development department; one that truly takes CI/CD to heart. Empowerment through automation is at the heart of these development teams, and with more than 1000 deployments a day, we think it's working out quite well. In this session, Pat Hermens (a Development Managers) will step you through what enables us to move so quickly, which tools we use, and most importantly, the mindset that is required to enable development teams to deliver at such a rapid pace.
James Birnie - Using Many Worlds of Compute Power with Quantum - Codemotion A...Codemotion
Quantum computers can use all of the possible pathways generated by quantum decisions to solve problems that will forever remain intractable to classical compute power. As the mega players vie for quantum supremacy and Rigetti announces its $1M "quantum advantage" prize, we live in exciting times. IBM-Q and Microsoft Q# are two ways you can learn to program quantum computers so that you're ready when the quantum revolution comes. I'll demonstrate some quantum solutions to problems that will forever be out of reach of classical, including organic chemistry and large number factorisation.
Don Goodman-Wilson - Chinese food, motor scooters, and open source developmen...Codemotion
Chinese food exploded across America in the early 20th century, rapidly adapting to local tastes while also spreading like wildfire. How was it able to spread so fast? The GY6 is a family of scooter engines that has achieved near total ubiquity in Europe. It is reliable and cheap to manufacture, and it's made in factories across China. How are these factories able to remain afloat? Chinese-American food and the GY6 are both riveting studies in product-market fit, and both are the product of a distributed open source-like development model. What lessons can we learn for open source software?
Pieter Omvlee - The story behind Sketch - Codemotion Amsterdam 2019Codemotion
The design space has exploded in size within the last few years and Sketch is one of the most important milestones to represent the phenomenon. But behind the scenes of this growing reality there is a remote team that revolutionizes the design space all without leaving the home office. This talk will present how Sketch has grown to become a modern, product designer's tool.
Dave Farley - Taking Back “Software Engineering” - Codemotion Amsterdam 2019Codemotion
Would you fly in a plane designed by a craftsman or would you prefer your aircraft to be designed by engineers? We are learning that science and empiricism works in software development, maybe now is the time to redefine what “Software Engineering” really means. Software isn't bridge-building, it is not car or aircraft development either, but then neither is Chemical Engineering. Engineering is different in different disciplines. Maybe it is time for us to begin thinking about retrieving the term "Software Engineering" maybe it is time to define what our "Engineering" discipline should be.
Joshua Hoffman - Should the CTO be Coding? - Codemotion Amsterdam 2019Codemotion
What is the job of a CTO and how does it change as a startup grows in size and scale? As a CTO, where should you spend your focus? As an engineer aspiring to be a CTO, what skills should you pursue? In this inspiring and personal talk, I describe my journey from early Red Hat engineer to CTO at Bloomon. I will share my view on what it means to be a CTO, and ultimately answer the question: Should the CTO be coding?
Measuring the Impact of Network Latency at TwitterScyllaDB
Widya Salim and Victor Ma will outline the causal impact analysis, framework, and key learnings used to quantify the impact of reducing Twitter's network latency.
Advanced Techniques for Cyber Security Analysis and Anomaly DetectionBert Blevins
Cybersecurity is a major concern in today's connected digital world. Threats to organizations are constantly evolving and have the potential to compromise sensitive information, disrupt operations, and lead to significant financial losses. Traditional cybersecurity techniques often fall short against modern attackers. Therefore, advanced techniques for cyber security analysis and anomaly detection are essential for protecting digital assets. This blog explores these cutting-edge methods, providing a comprehensive overview of their application and importance.
Quality Patents: Patents That Stand the Test of TimeAurora Consulting
Is your patent a vanity piece of paper for your office wall? Or is it a reliable, defendable, assertable, property right? The difference is often quality.
Is your patent simply a transactional cost and a large pile of legal bills for your startup? Or is it a leverageable asset worthy of attracting precious investment dollars, worth its cost in multiples of valuation? The difference is often quality.
Is your patent application only good enough to get through the examination process? Or has it been crafted to stand the tests of time and varied audiences if you later need to assert that document against an infringer, find yourself litigating with it in an Article 3 Court at the hands of a judge and jury, God forbid, end up having to defend its validity at the PTAB, or even needing to use it to block pirated imports at the International Trade Commission? The difference is often quality.
Quality will be our focus for a good chunk of the remainder of this season. What goes into a quality patent, and where possible, how do you get it without breaking the bank?
** Episode Overview **
In this first episode of our quality series, Kristen Hansen and the panel discuss:
⦿ What do we mean when we say patent quality?
⦿ Why is patent quality important?
⦿ How to balance quality and budget
⦿ The importance of searching, continuations, and draftsperson domain expertise
⦿ Very practical tips, tricks, examples, and Kristen’s Musts for drafting quality applications
https://www.aurorapatents.com/patently-strategic-podcast.html
Are you interested in dipping your toes in the cloud native observability waters, but as an engineer you are not sure where to get started with tracing problems through your microservices and application landscapes on Kubernetes? Then this is the session for you, where we take you on your first steps in an active open-source project that offers a buffet of languages, challenges, and opportunities for getting started with telemetry data.
The project is called openTelemetry, but before diving into the specifics, we’ll start with de-mystifying key concepts and terms such as observability, telemetry, instrumentation, cardinality, percentile to lay a foundation. After understanding the nuts and bolts of observability and distributed traces, we’ll explore the openTelemetry community; its Special Interest Groups (SIGs), repositories, and how to become not only an end-user, but possibly a contributor.We will wrap up with an overview of the components in this project, such as the Collector, the OpenTelemetry protocol (OTLP), its APIs, and its SDKs.
Attendees will leave with an understanding of key observability concepts, become grounded in distributed tracing terminology, be aware of the components of openTelemetry, and know how to take their first steps to an open-source contribution!
Key Takeaways: Open source, vendor neutral instrumentation is an exciting new reality as the industry standardizes on openTelemetry for observability. OpenTelemetry is on a mission to enable effective observability by making high-quality, portable telemetry ubiquitous. The world of observability and monitoring today has a steep learning curve and in order to achieve ubiquity, the project would benefit from growing our contributor community.
How Social Media Hackers Help You to See Your Wife's Message.pdfHackersList
In the modern digital era, social media platforms have become integral to our daily lives. These platforms, including Facebook, Instagram, WhatsApp, and Snapchat, offer countless ways to connect, share, and communicate.
The DealBook is our annual overview of the Ukrainian tech investment industry. This edition comprehensively covers the full year 2023 and the first deals of 2024.
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfNeo4j
Presented at Gartner Data & Analytics, London Maty 2024. BT Group has used the Neo4j Graph Database to enable impressive digital transformation programs over the last 6 years. By re-imagining their operational support systems to adopt self-serve and data lead principles they have substantially reduced the number of applications and complexity of their operations. The result has been a substantial reduction in risk and costs while improving time to value, innovation, and process automation. Join this session to hear their story, the lessons they learned along the way and how their future innovation plans include the exploration of uses of EKG + Generative AI.
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - MydbopsMydbops
This presentation, delivered at the Postgres Bangalore (PGBLR) Meetup-2 on June 29th, 2024, dives deep into connection pooling for PostgreSQL databases. Aakash M, a PostgreSQL Tech Lead at Mydbops, explores the challenges of managing numerous connections and explains how connection pooling optimizes performance and resource utilization.
Key Takeaways:
* Understand why connection pooling is essential for high-traffic applications
* Explore various connection poolers available for PostgreSQL, including pgbouncer
* Learn the configuration options and functionalities of pgbouncer
* Discover best practices for monitoring and troubleshooting connection pooling setups
* Gain insights into real-world use cases and considerations for production environments
This presentation is ideal for:
* Database administrators (DBAs)
* Developers working with PostgreSQL
* DevOps engineers
* Anyone interested in optimizing PostgreSQL performance
Contact info@mydbops.com for PostgreSQL Managed, Consulting and Remote DBA Services
YOUR RELIABLE WEB DESIGN & DEVELOPMENT TEAM — FOR LASTING SUCCESS
WPRiders is a web development company specialized in WordPress and WooCommerce websites and plugins for customers around the world. The company is headquartered in Bucharest, Romania, but our team members are located all over the world. Our customers are primarily from the US and Western Europe, but we have clients from Australia, Canada and other areas as well.
Some facts about WPRiders and why we are one of the best firms around:
More than 700 five-star reviews! You can check them here.
1500 WordPress projects delivered.
We respond 80% faster than other firms! Data provided by Freshdesk.
We’ve been in business since 2015.
We are located in 7 countries and have 22 team members.
With so many projects delivered, our team knows what works and what doesn’t when it comes to WordPress and WooCommerce.
Our team members are:
- highly experienced developers (employees & contractors with 5 -10+ years of experience),
- great designers with an eye for UX/UI with 10+ years of experience
- project managers with development background who speak both tech and non-tech
- QA specialists
- Conversion Rate Optimisation - CRO experts
They are all working together to provide you with the best possible service. We are passionate about WordPress, and we love creating custom solutions that help our clients achieve their goals.
At WPRiders, we are committed to building long-term relationships with our clients. We believe in accountability, in doing the right thing, as well as in transparency and open communication. You can read more about WPRiders on the About us page.
The Rise of Supernetwork Data Intensive ComputingLarry Smarr
Invited Remote Lecture to SC21
The International Conference for High Performance Computing, Networking, Storage, and Analysis
St. Louis, Missouri
November 18, 2021
UiPath Community Day Kraków: Devs4Devs ConferenceUiPathCommunity
We are honored to launch and host this event for our UiPath Polish Community, with the help of our partners - Proservartner!
We certainly hope we have managed to spike your interest in the subjects to be presented and the incredible networking opportunities at hand, too!
Check out our proposed agenda below 👇👇
08:30 ☕ Welcome coffee (30')
09:00 Opening note/ Intro to UiPath Community (10')
Cristina Vidu, Global Manager, Marketing Community @UiPath
Dawid Kot, Digital Transformation Lead @Proservartner
09:10 Cloud migration - Proservartner & DOVISTA case study (30')
Marcin Drozdowski, Automation CoE Manager @DOVISTA
Pawel Kamiński, RPA developer @DOVISTA
Mikolaj Zielinski, UiPath MVP, Senior Solutions Engineer @Proservartner
09:40 From bottlenecks to breakthroughs: Citizen Development in action (25')
Pawel Poplawski, Director, Improvement and Automation @McCormick & Company
Michał Cieślak, Senior Manager, Automation Programs @McCormick & Company
10:05 Next-level bots: API integration in UiPath Studio (30')
Mikolaj Zielinski, UiPath MVP, Senior Solutions Engineer @Proservartner
10:35 ☕ Coffee Break (15')
10:50 Document Understanding with my RPA Companion (45')
Ewa Gruszka, Enterprise Sales Specialist, AI & ML @UiPath
11:35 Power up your Robots: GenAI and GPT in REFramework (45')
Krzysztof Karaszewski, Global RPA Product Manager
12:20 🍕 Lunch Break (1hr)
13:20 From Concept to Quality: UiPath Test Suite for AI-powered Knowledge Bots (30')
Kamil Miśko, UiPath MVP, Senior RPA Developer @Zurich Insurance
13:50 Communications Mining - focus on AI capabilities (30')
Thomasz Wierzbicki, Business Analyst @Office Samurai
14:20 Polish MVP panel: Insights on MVP award achievements and career profiling
Details of description part II: Describing images in practice - Tech Forum 2024BookNet Canada
This presentation explores the practical application of image description techniques. Familiar guidelines will be demonstrated in practice, and descriptions will be developed “live”! If you have learned a lot about the theory of image description techniques but want to feel more confident putting them into practice, this is the presentation for you. There will be useful, actionable information for everyone, whether you are working with authors, colleagues, alone, or leveraging AI as a collaborator.
Link to presentation recording and transcript: https://bnctechforum.ca/sessions/details-of-description-part-ii-describing-images-in-practice/
Presented by BookNet Canada on June 25, 2024, with support from the Department of Canadian Heritage.
Support en anglais diffusé lors de l'événement 100% IA organisé dans les locaux parisiens d'Iguane Solutions, le mardi 2 juillet 2024 :
- Présentation de notre plateforme IA plug and play : ses fonctionnalités avancées, telles que son interface utilisateur intuitive, son copilot puissant et des outils de monitoring performants.
- REX client : Cyril Janssens, CTO d’ easybourse, partage son expérience d’utilisation de notre plateforme IA plug & play.
Best Programming Language for Civil EngineersAwais Yaseen
The integration of programming into civil engineering is transforming the industry. We can design complex infrastructure projects and analyse large datasets. Imagine revolutionizing the way we build our cities and infrastructure, all by the power of coding. Programming skills are no longer just a bonus—they’re a game changer in this era.
Technology is revolutionizing civil engineering by integrating advanced tools and techniques. Programming allows for the automation of repetitive tasks, enhancing the accuracy of designs, simulations, and analyses. With the advent of artificial intelligence and machine learning, engineers can now predict structural behaviors under various conditions, optimize material usage, and improve project planning.
2. @theophani
TIFFANY CONROY
All content licensed under http://creativecommons.org/licenses/by-nc-sa/3.0/
My name is Tiffany, and I work as an interaction designer and front-end developer at
SoundCloud.
3. CUTTING THE FAT
When to use Ajax and when to reload
When to use Ajax and when to reload
=======================
This is a talk about being pragmatic.
This is a talk is about how to reduce the technical complexity of web applications.
This talk is about using interaction design to help make the choice between using Ajax and
reloading the page.
4. Last summer there was a conference called “Throne of JS”
The conference had a very specific premise:
5. “Throne of JS … is …
focused on answering
the question on every
web developer’s mind:
“Throne of JS is […] focused on answering the question on every web developer's mind: which
framework?”
Yes: rich, interactive web applications are now commonplace. There are so many frameworks
for building these rich client applications, and the debate among developers is which of these
frameworks to use.
6. “Throne of JS … is …
focused on answering
the question on every
web developer’s mind:
which framework?”
“Throne of JS is […] focused on answering the question on every web developer's mind: which
framework?”
Yes: rich, interactive web applications are now commonplace. There are so many frameworks
for building these rich client applications, and the debate among developers is which of these
frameworks to use.
7. Question the premise.
The premise of the question “which framework” is based on the idea that in a modern web
application, the page should never be reloaded.
But as designers and developers, we need to step back, and ask ourselves: why don’t we want
to reload the page? When *can* we reload the page, and What is the benefit of Ajax? What is
the cost of using Ajax?
Frameworks help up to solve technical problems, but can we ever avoid those problems
entirely?
8. What to expect
First I’m going to define some terminology.
Then we examine the benefits and problems of fancy single-page web applications.
Lastly, I want to show you one way of approaching your applications as a designer and
developer that can help you reduce complexity, even before you choose a framework.
Let’s get started.
9. What to expect
• Terminology
First I’m going to define some terminology.
Then we examine the benefits and problems of fancy single-page web applications.
Lastly, I want to show you one way of approaching your applications as a designer and
developer that can help you reduce complexity, even before you choose a framework.
Let’s get started.
10. What to expect
• Terminology
• Benefits and costs of Ajax
First I’m going to define some terminology.
Then we examine the benefits and problems of fancy single-page web applications.
Lastly, I want to show you one way of approaching your applications as a designer and
developer that can help you reduce complexity, even before you choose a framework.
Let’s get started.
11. What to expect
• Terminology
• Benefits and costs of Ajax
• A pragmatic approach
First I’m going to define some terminology.
Then we examine the benefits and problems of fancy single-page web applications.
Lastly, I want to show you one way of approaching your applications as a designer and
developer that can help you reduce complexity, even before you choose a framework.
Let’s get started.
12. AJAX vs RELOAD
A quick recap for everyone on what Ajax is and what we use it for, and how it differs from a
page reload.
13. In the early 90s, all web pages were static, and if you wanted to see new content, you
followed a link or clicked on a form submit button …
14. In the early 90s, all web pages were static, and if you wanted to see new content, you
followed a link or clicked on a form submit button …
… and the whole page would reload.
15. Whole page
reloads
In the early 90s, all web pages were static, and if you wanted to see new content, you
followed a link or clicked on a form submit button …
… and the whole page would reload.
20. Asynchronous
JavaScript
and
XMLHttpRequest
In 2005, the technique of loading content asynchronously with JavaScript was given the name
Ajax. Around that time Google released Gmail and Google Maps.
(ps to big know-it-alls reading these speaker notes: yes, I know the X originally stood for XML, but making that distinction would just complicate
things.)
21. Just one part
reloads
Ajax allowed us to change the page content without a full page reload.
But the more exciting use case was to make the page send and load content based on user
interaction.
25. Without me doing anything, and without interrupting me typing, the Facebook app uses Ajax
to load information about the link I entered, and adds it to my message.
26. When I send the message, the app uses Ajax to send my message without reloading the page.
Ajax allowed us to maintain the context of what the user was doing, without reloading the
page.
27. Ajax → maintains context
The web stopped being a collection of static web sites with fixed content, and allowed us to
exchange data with the web server without reloading the page.
Now, we rely heavily on Ajax to control the user's experience.
To reiterate what I said before:
Ajax allows us to maintain the context of what the user was doing, without reloading the
page.
29. “Context” is the answer to the question: where are you, and what are you doing. By this I am
not talking about where you physically are while using a web application, but where you are
*within* the web application, and what you are doing there.
30. User
Profile
News
Feed
Store
Checkout
Slideshow
Some examples of different contexts could be:
user profile, a news feed, the checkout of a store, a slideshow.
Within each of these contexts, we may not want to reload the page.
Each distinct context could be its own “single-page app”, and a plain old browser refresh
could be used to transition between these contexts.
31. But two different instances of the same “screen” are in fact two different contexts.
For example: The timeline of two different people are two different contexts.
32. Two separate contexts
But two different instances of the same “screen” are in fact two different contexts.
For example: The timeline of two different people are two different contexts.
33. ✓
Multiple parts of the same workflow can all happen in the same context.
In this example, the context is filling out a form. While the user is in this context, we want to
control the user’s experience as much as possible, so that the user doesn’t lose context.
34. ✓
Same context
Multiple parts of the same workflow can all happen in the same context.
In this example, the context is filling out a form. While the user is in this context, we want to
control the user’s experience as much as possible, so that the user doesn’t lose context.
35. Your application may have lots of little components and features and bits of information, and
you need to understand out how they all relate to each other.
36. Then you need to define which components go together.
37. Then you need to define which components go together.
38. So when I say a context, I mean these different groupings of related bits organized into
meaningful groupings.
Designers need to understand, define and communicate the distinct contexts in any rich web
application, being clear about the where boundaries between contexts are; where one stops
and the next one starts.
39. When we make a transition from one context to the next, we exit the boundary of one
context and enter another.
Ajax could be used to control the transition between contexts, if the designer and the
developer can negotiate it by balancing the benefits against the technical costs.
40. Designers need to understand, define and communicate the distinct contexts in any rich web
application, being clear about the where boundaries between contexts are; where one stops
and the next one starts.
41. Ajax → maintains context
So, Ajax allows us to maintain context for users.
42. Lots of Ajax → “Fat Client”
Web applications that use a lot of Ajax are sometimes called “fat client”
43. FAT vs THIN
What is a “fat” client?
What do we mean by a “fat client”.
How is it different from a “thin client”
44. Client = code in the browser
SERVER ----[ network ]----> CLIENT
## Server and client
In this discussion, the code that runs in a web browser is the “client”, in contrast with code
that runs on a web server.
45. Thin client
DATA + ALL THE LOGIC
-------------------[ network ]---------------->
PRESENTATION
## Thin Client
[ DATA ] + [ ALL THE LOGIC ] ----[network]----> [PRESENTATION]
All the logic is performed on the server-side.
Static pages that rely on page reload are THIN. The browser, AKA the client, just displays the
content.
46. Fat client
DATA
-------------------[ network ]---------------->
ALL THE LOGIC + PRESENTATION
## Fat Client
[ DATA ] + [ ALL THE LOGIC ] ----[network]----> [PRESENTATION]
All the logic is performed on the client-side.
The server sends static content over the network, and all the logic is done in the browser AKA
the client.
These fat clients rely on a lot of JavaScript and Ajax.
47. “Native Experience”
People also talk about a “native experience” on the web.
Ajax allows us to emulate a “native experience” on the web, meaning, it feels like an
application not a web site.
48. “Native Experience”
and controlling transitions
One of the most basic features of a ”native” experience is the controlled transitions between
contexts, for example, the sliding left and right between screens.
On the web, if you reload the page, you can’t define the transition. In every browser I’ve used,
the transition is the same: the page goes white, the spinner spins, and then the page loads.
Reloading can be jarring.
We can get around this if we load the content with Ajax, and then transition to the new
context. We call these sort of sites that exclusively use Ajax “single-page apps”.
49. SINGLE-PAGE APPS
Awesome or not awesome?
So called “single-page apps” are very sexy these days. But people have begun to see that
single-page apps are also nasty beasts that bring all sorts of technical complications with
them.
50. SINGLE-PAGE APPS
Trying to recreate a native experience brings with it all kinds of technical problems.
One upon a time, if the URL in the browser changed, the page reloaded.
As we made rich applications using Ajax, we ran into the problem that we could reach a state
in the application that we could not link to. We started to talk about how to “deep-link” to a
context within an application.
This wasn’t (usually) a problem before we started using Ajax.
51. SINGLE-PAGE APPS
back button
Trying to recreate a native experience brings with it all kinds of technical problems.
One upon a time, if the URL in the browser changed, the page reloaded.
As we made rich applications using Ajax, we ran into the problem that we could reach a state
in the application that we could not link to. We started to talk about how to “deep-link” to a
context within an application.
This wasn’t (usually) a problem before we started using Ajax.
52. SINGLE-PAGE APPS
deep-linking
back button
Trying to recreate a native experience brings with it all kinds of technical problems.
One upon a time, if the URL in the browser changed, the page reloaded.
As we made rich applications using Ajax, we ran into the problem that we could reach a state
in the application that we could not link to. We started to talk about how to “deep-link” to a
context within an application.
This wasn’t (usually) a problem before we started using Ajax.
53. SINGLE-PAGE APPS
deep-linking
#! hash-bang
back button
Trying to recreate a native experience brings with it all kinds of technical problems.
One upon a time, if the URL in the browser changed, the page reloaded.
As we made rich applications using Ajax, we ran into the problem that we could reach a state
in the application that we could not link to. We started to talk about how to “deep-link” to a
context within an application.
This wasn’t (usually) a problem before we started using Ajax.
54. SINGLE-PAGE APPS
deep-linking
JavaScript router
#! hash-bang
back button
Trying to recreate a native experience brings with it all kinds of technical problems.
One upon a time, if the URL in the browser changed, the page reloaded.
As we made rich applications using Ajax, we ran into the problem that we could reach a state
in the application that we could not link to. We started to talk about how to “deep-link” to a
context within an application.
This wasn’t (usually) a problem before we started using Ajax.
55. SINGLE-PAGE APPS
deep-linking
JavaScript router
#! hash-bang
back button
window.history
Trying to recreate a native experience brings with it all kinds of technical problems.
One upon a time, if the URL in the browser changed, the page reloaded.
As we made rich applications using Ajax, we ran into the problem that we could reach a state
in the application that we could not link to. We started to talk about how to “deep-link” to a
context within an application.
This wasn’t (usually) a problem before we started using Ajax.
56. SINGLE-PAGE APPS
deep-linking
JavaScript router
#! hash-bang
back button
frameworks
window.history
Trying to recreate a native experience brings with it all kinds of technical problems.
One upon a time, if the URL in the browser changed, the page reloaded.
As we made rich applications using Ajax, we ran into the problem that we could reach a state
in the application that we could not link to. We started to talk about how to “deep-link” to a
context within an application.
This wasn’t (usually) a problem before we started using Ajax.
57. Let’s pause for a moment:
Why do we want to use Ajax?
What problems are we trying to solve with Ajax? i.e. what **benefits** do we gain from using
it?
58. Problems a fat client solves:
Problems a fat client solves:
* The user can continue to interact (including simply viewing) while data is exchanged.
* The designer can customize and control the loading and transition experience between
contexts.
* Information can be presented in a partial, incremental, incomplete form, thus context can
be established while further information is retrieved. (Like a pan in a film, setting can be
established in advance of details.)
* The traffic between server and client can be reduced to data separate from the presentation,
reducing network use and speeding up information transmission.
Most of these are design problems. Even improved speed would result in a better experience
for people.
59. Problems a fat client solves:
• Continuous interaction
Problems a fat client solves:
* The user can continue to interact (including simply viewing) while data is exchanged.
* The designer can customize and control the loading and transition experience between
contexts.
* Information can be presented in a partial, incremental, incomplete form, thus context can
be established while further information is retrieved. (Like a pan in a film, setting can be
established in advance of details.)
* The traffic between server and client can be reduced to data separate from the presentation,
reducing network use and speeding up information transmission.
Most of these are design problems. Even improved speed would result in a better experience
for people.
60. Problems a fat client solves:
• Continuous interaction
• Transitions between contexts
Problems a fat client solves:
* The user can continue to interact (including simply viewing) while data is exchanged.
* The designer can customize and control the loading and transition experience between
contexts.
* Information can be presented in a partial, incremental, incomplete form, thus context can
be established while further information is retrieved. (Like a pan in a film, setting can be
established in advance of details.)
* The traffic between server and client can be reduced to data separate from the presentation,
reducing network use and speeding up information transmission.
Most of these are design problems. Even improved speed would result in a better experience
for people.
61. Problems a fat client solves:
• Continuous interaction
• Transitions between contexts
• Incremental loading
Problems a fat client solves:
* The user can continue to interact (including simply viewing) while data is exchanged.
* The designer can customize and control the loading and transition experience between
contexts.
* Information can be presented in a partial, incremental, incomplete form, thus context can
be established while further information is retrieved. (Like a pan in a film, setting can be
established in advance of details.)
* The traffic between server and client can be reduced to data separate from the presentation,
reducing network use and speeding up information transmission.
Most of these are design problems. Even improved speed would result in a better experience
for people.
62. Problems a fat client solves:
• Continuous interaction
• Transitions between contexts
• Incremental loading
• Reduced network traffic
Problems a fat client solves:
* The user can continue to interact (including simply viewing) while data is exchanged.
* The designer can customize and control the loading and transition experience between
contexts.
* Information can be presented in a partial, incremental, incomplete form, thus context can
be established while further information is retrieved. (Like a pan in a film, setting can be
established in advance of details.)
* The traffic between server and client can be reduced to data separate from the presentation,
reducing network use and speeding up information transmission.
Most of these are design problems. Even improved speed would result in a better experience
for people.
63. Problems a fat client solves:
• Continuous interaction
• Transitions between contexts
• Incremental loading
• Reduced network traffic
→ DESIGN PROBLEMS (mostly)
Problems a fat client solves:
* The user can continue to interact (including simply viewing) while data is exchanged.
* The designer can customize and control the loading and transition experience between
contexts.
* Information can be presented in a partial, incremental, incomplete form, thus context can
be established while further information is retrieved. (Like a pan in a film, setting can be
established in advance of details.)
* The traffic between server and client can be reduced to data separate from the presentation,
reducing network use and speeding up information transmission.
Most of these are design problems. Even improved speed would result in a better experience
for people.
64. Problems a fat client causes:
Problems a fat client causes:
* Routing becomes the responsibility of the client-side script instead of the browser -->
deep-linking
* History management becomes the responsibility of the client-side script instead of the
browser --> back button
* Caching (what and for how long) becomes the responsibility of the client-side script instead
of the browser --> reusing previously-fetched data and templates to achieve improved
speed
* Improvements from the speedy transmission are eroded by computation within the client
i.e. instead of doing computation in an environment we can control (the server) we push it to
the client, which is notoriously out of our control.
These are technical problems. From a design perspective, these become trade-offs that are
“someone else’s problem”.
65. Problems a fat client causes:
• Routing
Problems a fat client causes:
* Routing becomes the responsibility of the client-side script instead of the browser -->
deep-linking
* History management becomes the responsibility of the client-side script instead of the
browser --> back button
* Caching (what and for how long) becomes the responsibility of the client-side script instead
of the browser --> reusing previously-fetched data and templates to achieve improved
speed
* Improvements from the speedy transmission are eroded by computation within the client
i.e. instead of doing computation in an environment we can control (the server) we push it to
the client, which is notoriously out of our control.
These are technical problems. From a design perspective, these become trade-offs that are
“someone else’s problem”.
66. Problems a fat client causes:
• Routing
• History
Problems a fat client causes:
* Routing becomes the responsibility of the client-side script instead of the browser -->
deep-linking
* History management becomes the responsibility of the client-side script instead of the
browser --> back button
* Caching (what and for how long) becomes the responsibility of the client-side script instead
of the browser --> reusing previously-fetched data and templates to achieve improved
speed
* Improvements from the speedy transmission are eroded by computation within the client
i.e. instead of doing computation in an environment we can control (the server) we push it to
the client, which is notoriously out of our control.
These are technical problems. From a design perspective, these become trade-offs that are
“someone else’s problem”.
67. Problems a fat client causes:
• Routing
• History
• Caching and garbage collection
Problems a fat client causes:
* Routing becomes the responsibility of the client-side script instead of the browser -->
deep-linking
* History management becomes the responsibility of the client-side script instead of the
browser --> back button
* Caching (what and for how long) becomes the responsibility of the client-side script instead
of the browser --> reusing previously-fetched data and templates to achieve improved
speed
* Improvements from the speedy transmission are eroded by computation within the client
i.e. instead of doing computation in an environment we can control (the server) we push it to
the client, which is notoriously out of our control.
These are technical problems. From a design perspective, these become trade-offs that are
“someone else’s problem”.
68. Problems a fat client causes:
• Routing
• History
• Caching and garbage collection
• Computation is outside of our control
Problems a fat client causes:
* Routing becomes the responsibility of the client-side script instead of the browser -->
deep-linking
* History management becomes the responsibility of the client-side script instead of the
browser --> back button
* Caching (what and for how long) becomes the responsibility of the client-side script instead
of the browser --> reusing previously-fetched data and templates to achieve improved
speed
* Improvements from the speedy transmission are eroded by computation within the client
i.e. instead of doing computation in an environment we can control (the server) we push it to
the client, which is notoriously out of our control.
These are technical problems. From a design perspective, these become trade-offs that are
“someone else’s problem”.
69. Problems a fat client causes:
• Routing
• History
• Caching and garbage collection
• Computation is outside of our control
→ TECHNICAL PROBLEMS
Problems a fat client causes:
* Routing becomes the responsibility of the client-side script instead of the browser -->
deep-linking
* History management becomes the responsibility of the client-side script instead of the
browser --> back button
* Caching (what and for how long) becomes the responsibility of the client-side script instead
of the browser --> reusing previously-fetched data and templates to achieve improved
speed
* Improvements from the speedy transmission are eroded by computation within the client
i.e. instead of doing computation in an environment we can control (the server) we push it to
the client, which is notoriously out of our control.
These are technical problems. From a design perspective, these become trade-offs that are
“someone else’s problem”.
70. Design problems a
fat client solves:
Let’s look again at the interaction design problems that a fat client can solve.
71. Design problems a
fat client solves:
• Continuous interaction
Let’s look again at the interaction design problems that a fat client can solve.
72. Design problems a
fat client solves:
• Continuous interaction
• Transitions between contexts
Let’s look again at the interaction design problems that a fat client can solve.
73. Design problems a
fat client solves:
• Continuous interaction
• Transitions between contexts
• Incremental loading
Let’s look again at the interaction design problems that a fat client can solve.
74. Design problems a
fat client solves:
• Continuous interaction
• Transitions between contexts
• Incremental loading
Let’s look again at the interaction design problems that a fat client can solve.
75. Design problems a
fat client solves:
• Continuous interaction
• Transitions between contexts
• Incremental loading
Maintain context
Let’s look again at the interaction design problems that a fat client can solve.
76. Design problems a
fat client solves:
• Continuous interaction
• Transitions between contexts
• Incremental loading
Maintain context
Let’s look again at the interaction design problems that a fat client can solve.
77. Design problems a
fat client solves:
• Continuous interaction
• Transitions between contexts
• Incremental loading
Maintain context
Establish context
Let’s look again at the interaction design problems that a fat client can solve.
78. Ajax → controls context
Ajax allows us to establish and maintain the context for the user, without jarring reloads.
BUT …
79. Ajax → adds complexity
Ajax also introduces all lot of technical complications.
This is complication that you as designer don’t have to think about, but creates a lot of extra
work for developers.
And that extra work might not be worth it. How can designers help developers be pragmatic
about when to use Ajax and when not to?
80. Design problems a
fat client solves:
• Continuous interaction
• Transitions between contexts
• Incremental loading
When we look at the problems that a fat client can solve, we can ask which one is the most
important?
-> Continuous interaction is the primary reason we use Ajax. We use it during form
validation, live chatting, commenting while watching a video
81. Design problems a
fat client solves:
• Continuous interaction
• Transitions between contexts
• Incremental loading
Most important
When we look at the problems that a fat client can solve, we can ask which one is the most
important?
-> Continuous interaction is the primary reason we use Ajax. We use it during form
validation, live chatting, commenting while watching a video
82. Design problems a
fat client solves:
• Continuous interaction
• Transitions between contexts
• Incremental loading
Most important
When we look at the problems that a fat client can solve, we can ask which one is the most
important?
-> Continuous interaction is the primary reason we use Ajax. We use it during form
validation, live chatting, commenting while watching a video
83. Continuous interaction
Continuous interaction is the primary reason we use Ajax. We use it during form validation,
live chatting, commenting while watching a video, performing a search.
84. Design problems a
fat client solves:
• Continuous interaction
• Transitions between contexts
• Incremental loading
So what benefit of Ajax is the least important?
-> Transitions between contexts
85. Design problems a
fat client solves:
• Continuous interaction
• Transitions between contexts
• Incremental loading
Least important
So what benefit of Ajax is the least important?
-> Transitions between contexts
86. Design problems a
fat client solves:
• Continuous interaction
• Transitions between contexts
• Incremental loading
Least important
So what benefit of Ajax is the least important?
-> Transitions between contexts
87. New context? → Reload!
When the user switches to a new context, the page can just be reloaded.
89. “The cool kids are doing it!”
You might say:
BUT BUT BUT … all the cool kids are doing it! My product is also cool!
Maybe, but some of the cool kids still use page reload.
91. On github.com: a profile is a context, the repo file-browser is a context, and each pull
request is one context, with page reloads in between.
92. On github.com: a profile is a context, the repo file-browser is a context, and each pull
request is one context, with page reloads in between.
93. As we saw, Github is a collection of single-page apps, one per context, with page reloads in
between.
94. AJAX vs RELOAD?
So, when should you use Ajax and when should you use reload?
Let’s recap:
95. Limit your demand for Ajax
Limit your demand for asynchronous communication to only within the contexts that matter.
Only use it when you can afford it.
“Single-page apps” are often made as single-page apps for the wrong reasons. I have made
this mistake.
Where is our need for Ajax? -- at the interaction points.
96. Find the interaction points
Find the interaction points. Everywhere the user will click, type, hover or otherwise engage
with the interface.
For each, ask: what benefit vs cost does Ajax have at that interaction point? Can we afford the
cost? Where can we eliminate our need for Ajax?
97. Find the context boundaries
Know where the boundaries between contexts are, and communicate them to developers,
because these are important for designing the application architecture.
Using Ajax in at these interaction points give us the least benefit.
Lastly, for developers:
98. Does your framework
minimize your technical costs?
Does your framework help solve the design problems while minimizing the technical costs?
99. Single-page apps? YES: we can help our users maintain context so they can focus without
jarring interruptions. These means: use Ajax for each context, and each of those is its own
single-page app.
Monolithic apps? NO: or at least, they aren’t nearly as useful as they are technically hard, and
you should be very clear of the costs. You may get so much benefit, or have so many people
working in the problems, that you can overcome the costs. Your *entire web app* does *not*
need to be one single front-end app.
100. Single-page apps? → YES
Single-page apps? YES: we can help our users maintain context so they can focus without
jarring interruptions. These means: use Ajax for each context, and each of those is its own
single-page app.
Monolithic apps? NO: or at least, they aren’t nearly as useful as they are technically hard, and
you should be very clear of the costs. You may get so much benefit, or have so many people
working in the problems, that you can overcome the costs. Your *entire web app* does *not*
need to be one single front-end app.
101. Single-page apps? → YES
Monolithic apps? → NO
Single-page apps? YES: we can help our users maintain context so they can focus without
jarring interruptions. These means: use Ajax for each context, and each of those is its own
single-page app.
Monolithic apps? NO: or at least, they aren’t nearly as useful as they are technically hard, and
you should be very clear of the costs. You may get so much benefit, or have so many people
working in the problems, that you can overcome the costs. Your *entire web app* does *not*
need to be one single front-end app.