The document discusses techniques for rapidly prototyping interactive prototypes using DHTML, including separating interface elements, behaviors, and data using a model-view-controller pattern; addressing challenges related to layout, styles, and behaviors; and tools like CSS frameworks that can help simplify the prototyping process. It provides examples of interactions and discusses factors like timing that are important to consider for prototyping interactions.
Presented in the Lightning Rounds at the 2008 Ajax Experience. Rapid tour through the Netflix API and some examples of using the APIs in the first Netflix Hack Day. See http://developer.netflix.com for more information.
In 1971, David Parnas wrote the great paper, "On the criteria to be used decomposing the system into parts," and yet the problem of breaking down big projects into small parts that work well together remains a struggle in the industry. The ability to decompose a problem space and in turn, compose a solution is essential to our work.
Things have gotten worse since 1971. With microservices, big data, and streaming systems, we're all going to be distributed systems engineers sooner or later. In distributed systems, effective decomposition has an even greater impact on the reliability, performance, and availability of our systems as it determines the frequency and weight of communication in the system.
This talk speaks to the essential considerations for defining and evaluating boundaries and behaviors in large-scale distributed systems. It will touch on topics such as bulkhead design and architectural evolution.
Atlassian Summit 2012 - Confluence State of the UnionAtlassian
Confluence 4 was a game changer in content collaboration. Think that's radical? Come to the Confluence State of the Union to hear what's next on our roadmap, get demos of the latest and upcoming features, and learn about new Confluence add-ons for your team.
Presented in the Lightning Rounds at the 2008 Ajax Experience. Rapid tour through the Netflix API and some examples of using the APIs in the first Netflix Hack Day. See http://developer.netflix.com for more information.
In 1971, David Parnas wrote the great paper, "On the criteria to be used decomposing the system into parts," and yet the problem of breaking down big projects into small parts that work well together remains a struggle in the industry. The ability to decompose a problem space and in turn, compose a solution is essential to our work.
Things have gotten worse since 1971. With microservices, big data, and streaming systems, we're all going to be distributed systems engineers sooner or later. In distributed systems, effective decomposition has an even greater impact on the reliability, performance, and availability of our systems as it determines the frequency and weight of communication in the system.
This talk speaks to the essential considerations for defining and evaluating boundaries and behaviors in large-scale distributed systems. It will touch on topics such as bulkhead design and architectural evolution.
Atlassian Summit 2012 - Confluence State of the UnionAtlassian
Confluence 4 was a game changer in content collaboration. Think that's radical? Come to the Confluence State of the Union to hear what's next on our roadmap, get demos of the latest and upcoming features, and learn about new Confluence add-ons for your team.
This eBook was created by Above the Fold, a user experience design agency located in Cambridge, MA, USA. For more information about Above the Fold, visit http://www.abovethefolddesign.com/
Managing Databases In A DevOps Environment 2016Robert Treat
Given at #pgdayphilly2016, this talk covers how configuration management, monitoring, and rapid deployments are impacting how we think about database management.
Designing with AJAX: Yahoo! Pattern Librarygoodfriday
With the recent rise in popularity of AJAX, we now have the opportunity to more closely model the real flow of the user. This presents a radical change to the designer paradigm-designers create in "chunks" while users think in "flows". Come explore interaction styles and design principles that can inform future design projects. Come see a set of common design patterns that are currently in vogue and examples that illustrate good design choices and bad design choices.
Get hands-on advice for rapid Agile prototyping in a product team.
You'll learn:
- How to determine the right depth and breadth for MVP prototypes.
- How to prioritize use cases for prototyping.
- How to elicit the right stakeholder and user feedback.
- How to correctly annotate prototypes for dev and QA.
Bill Scott, Director from the UI Engineering team at Netflix shows ways to use RIA to enhance the User Experience. If you take more interest in the field of design patterns than drop by at www.interaction-patterns.org.
Emergent behavior in complex systems is our reality. Root Cause Analysis, as a framework, is insufficient to properly manage the patterns present in our continuously changing world.
Embracing Uncertainty: Learning to Think ResponsivelyChad Currie
Presented to IxDA Austin on March 6, 2013.
Adopting Responsive Web Design practices means shifting the way we work. Get practical suggestions for streamlining your design process in the multi-screen world.
Best Practices in Automating Business ProcessesRhia Wieclawek
Workflows can take you from an hour process to a 2 minute process, if done correctly. Thinking of building out some workflow? Take some advice from these slides and learn how to start small to see big changes!
Cosa abbiamo scoperto in questi 20 anni? Che cercare di cambiare il mondo focalizzandoci su un singolo aspetto, il processo, il TDD, il clean code, non porta da nessuna parte. I veri cambiamenti avvengono quando scopriamo le reali interazioni tra le parti, quando lasciamo la specializzazione e cominciamo a vedere il vero quadro d'insieme.
In questo talk vedremo come scelte architetturali apparentemente innocue, finiscano per impattare il processo, ed in generale di come processi, pratiche, architetture, persone e scelte di business non possano essere considerate come elementi disaccoppiati tra loro.
Bringing Change to Life | YOW 2016 | Melbourne, Brisbane, Sydney - AustraliaBill Scott
This talk was given at YOW 2016 in Melbourne, Brisbane & Sydney Australia, December 2016.
Change in an organization is really hard. This is especially true when a company that was once on the forefront of innovation finds itself having lost that luster through its own growth & success. The past few years there has been a transformation happening at PayPal that is touching every part of the organization to make it innovative again. At the heart of this change is engineering innovation coupled with a new, close partnership between product, design and engineering.
Can your organization be changed? From Bill’s experience at Yahoo!, Netflix, PayPal and consulting with numerous companies he believes there are some core principles you can employ to drive transformation that are all centered around the customer. The question Bill will explore is “How can engineering and design be the catalyst for that change?” While this talk will be inspirational, it will take an honest (and humorous) look at what has worked and what hasn’t worked so well in trying to scale change.
More Related Content
Similar to DHTML Prototyping: Silicon Valley Code Camp
This eBook was created by Above the Fold, a user experience design agency located in Cambridge, MA, USA. For more information about Above the Fold, visit http://www.abovethefolddesign.com/
Managing Databases In A DevOps Environment 2016Robert Treat
Given at #pgdayphilly2016, this talk covers how configuration management, monitoring, and rapid deployments are impacting how we think about database management.
Designing with AJAX: Yahoo! Pattern Librarygoodfriday
With the recent rise in popularity of AJAX, we now have the opportunity to more closely model the real flow of the user. This presents a radical change to the designer paradigm-designers create in "chunks" while users think in "flows". Come explore interaction styles and design principles that can inform future design projects. Come see a set of common design patterns that are currently in vogue and examples that illustrate good design choices and bad design choices.
Get hands-on advice for rapid Agile prototyping in a product team.
You'll learn:
- How to determine the right depth and breadth for MVP prototypes.
- How to prioritize use cases for prototyping.
- How to elicit the right stakeholder and user feedback.
- How to correctly annotate prototypes for dev and QA.
Bill Scott, Director from the UI Engineering team at Netflix shows ways to use RIA to enhance the User Experience. If you take more interest in the field of design patterns than drop by at www.interaction-patterns.org.
Emergent behavior in complex systems is our reality. Root Cause Analysis, as a framework, is insufficient to properly manage the patterns present in our continuously changing world.
Embracing Uncertainty: Learning to Think ResponsivelyChad Currie
Presented to IxDA Austin on March 6, 2013.
Adopting Responsive Web Design practices means shifting the way we work. Get practical suggestions for streamlining your design process in the multi-screen world.
Best Practices in Automating Business ProcessesRhia Wieclawek
Workflows can take you from an hour process to a 2 minute process, if done correctly. Thinking of building out some workflow? Take some advice from these slides and learn how to start small to see big changes!
Cosa abbiamo scoperto in questi 20 anni? Che cercare di cambiare il mondo focalizzandoci su un singolo aspetto, il processo, il TDD, il clean code, non porta da nessuna parte. I veri cambiamenti avvengono quando scopriamo le reali interazioni tra le parti, quando lasciamo la specializzazione e cominciamo a vedere il vero quadro d'insieme.
In questo talk vedremo come scelte architetturali apparentemente innocue, finiscano per impattare il processo, ed in generale di come processi, pratiche, architetture, persone e scelte di business non possano essere considerate come elementi disaccoppiati tra loro.
Bringing Change to Life | YOW 2016 | Melbourne, Brisbane, Sydney - AustraliaBill Scott
This talk was given at YOW 2016 in Melbourne, Brisbane & Sydney Australia, December 2016.
Change in an organization is really hard. This is especially true when a company that was once on the forefront of innovation finds itself having lost that luster through its own growth & success. The past few years there has been a transformation happening at PayPal that is touching every part of the organization to make it innovative again. At the heart of this change is engineering innovation coupled with a new, close partnership between product, design and engineering.
Can your organization be changed? From Bill’s experience at Yahoo!, Netflix, PayPal and consulting with numerous companies he believes there are some core principles you can employ to drive transformation that are all centered around the customer. The question Bill will explore is “How can engineering and design be the catalyst for that change?” While this talk will be inspirational, it will take an honest (and humorous) look at what has worked and what hasn’t worked so well in trying to scale change.
Lean Engineering: How to make Engineering a full Lean UX partnerBill Scott
In 1999, PayPal's name was synonymous with innovation. In fact, the so called PayPal Mafia (original founders) went on to establish Tesla, SpaceX, YouTube, Skype and other startups. They also provided the early investments of many of the most innovative companies on the internet today. But over time that innovation slowed to a crawl.
In 2011 a number of things begin to come together for PayPal that started its journey back to innovation. This is the story of that reboot and how engineering has played a key role in partnering directly with product and design to move from a culture of products having a long shelf life, to one of rapid experimentation.
In this talk, Bill will outline the principles of Lean Engineering; principles for engineering that enable learning. Drawing from his experience leading User Interface Engineering at both Netflix & PayPal, Bill will walk you through the key principles your engineering team will need to adopt to be that enabler for product and design in your organization. This talk will not just inspire you, but it will also give you some hard earned advice on making this a reality in your organization.
Presented on 3/16/2014 as Keynote for the MXConference.
Change in an organization is really hard. This is especially true when a company that was once on the forefront of innovation finds itself having lost that luster through its own growth & success. The last couple of years there has been a transformation happening at PayPal that is touching every part of the organization to make it innovative again. At the heart of this change is a new, close partnership between design and engineering.
Can your organization be changed? From Bill’s experience at Yahoo!, Netflix, PayPal and consulting with numerous companies he believes there are some core principles you can employ to drive transformation that are all centered around the customer. The question Bill will explore is “How can design be the catalyst for that change?” While this talk will be inspirational, it will take an honest (and humorous) look at what has worked and what hasn’t worked so well in trying to scale change.
6 Principles for Enabling Build/Measure/Learn: Lean Engineering in ActionBill Scott
Presented at Lean Day West - Portland, OR. Sept. 17, 2013
How do you take a gigantic organization like PayPal and begin to transform the experiences? Engineering is often the key blocker in being able to achieve a high rate of innovation. In this talk, Bill Scott will give specific examples on implemented Lean UX in a 13,000 person company, re-factored the technology stack and changed the way engineers work with design & product partners. In addition, Bill will provide additional examples that go back to his early days writing one of the first Macintosh games to his more recent work at Netflix and the power of treating the user interface layer as the experimentation layer.
bringing design to life with lean ux & lean engineering - Lean Day West 2013Bill Scott
What does a good Lean UX working rhythm look like for designers & engineers? In this workshop, Bill & one of his design partners at PayPal, Cody Evol, will guide you through this experience. A set of principles, patterns (and anti-patterns), best practices, technologies & tools will be explored in this hands-on workshop leaving you with a clear understanding of how to mesh prototype & production.
8 Principles for Enabling Build/Measure/Learn: Lean Engineering in ActionBill Scott
Keynote for eBay Classifieds TechCon 2013, Tues June 25, 2013.
This is a variation on previous lean engineering talks but focuses on 8 principles for enabling build/measure/learn.
Clash of the Titans: Releasing the Kraken | NodeJS @paypalBill Scott
FluentConf 2013 Plenary.
http://www.youtube.com/watch?v=tZWGb0HU2QM&list=SP055Epbe6d5avZGXwE5u039VQq_oQFgrc&index=9
How do you take a large titan like PayPal and move it from a culture of a long shelf life to a culture of rapid experimentation? You set the UI free by adding liberal doses of NodeJS, JavaScript templating & libraries, JSON, Github and Lean Startup/UX. Bill will explain the transformation that is in process to revolutionize the technical and experience stack at PayPal.
Presented at WebVisions May 2013 in Portland, OR.
What happens when you take teams that have traditionally not worked together closely? Teams that are used to the "delivery mindset" and instead try to bring great experiences to life in a collaborative manner?
All hell breaks loose!
We are all creatures of habit and we all bring baggage to the table. And events conspire to tear our teams apart. This talk takes the flip side of how teams work together well and instead looks at behaviors and events that can stifle team collaboration for Lean UX teams. 18 anti-patterns are used to sensitize you for what to watch out for as well as strategies to overcome each.
Real World Lessons Using Lean UX (Workshop)Bill Scott
Half Day Workshop given 5/22/2013 at WebVisions Portland.
In this workshop Bill will explore the mindset of LeanUX and how it relates to bring products to life in the midst of big organizations that don't normally think "Lean". He will look at how teams can create a strong partnership between product, design & engineering in a way that tears down the walls and instead focuses on three key principles:
Shared understanding
Deep collaboration
Continuous customer feedback
The workshop will take a look at how Bill has been able to apply Lean UX at PayPal — a place that in recent years has been the total antithesis of the lean startup idea. With very specific examples, he will share lessons learned applying lean to the full product life cycle as well as how it relates to agile development.
Finally, the workshop looks at the technology stack. In the last few years there has been an explosion of open source technology stacks that can support rapidly creating products, launching them to scale and rapidly iterating on them when live. While startups embrace these stacks from the get-go, large organizations struggle with how to embrace this change. This workshop will also look at the shift that has happened, what is driving this change, and how organizations can embrace this stack and how to marry Lean Tech with Lean UX.
Fluent Conference WebCast from 5/15. I talk about the technology stack that we specifically are employing at PayPal to enable rapid experimentation with Lean UX. The use of nodejs as a prototyping stack is discussed as well as the use of javascript templating (with Dust JS) to allow for an efficient way to refactor a legacy stack.
Listen to the webcast here: http://www.livestream.com/oreillywebcasts/video?clipId=pla_554d1581-9104-4721-8985-5d7b9f3e4a6c&utm_source=lslibrary&utm_medium=ui-thumb
My talk starts at 12:22
Lean Engineering. Applying Lean Principles to Building ExperiencesBill Scott
Highlights a couple of principles that we have been applying to our UI engineering teams to move us to applying Lean UX to our products.
This was a 25 minute talk from Lean Day UX in NYC on March 1, 2013.
Enabling Lean with Tech: lessons learned applying lean at paypalBill Scott
Couple of lessons learned with changing the technology stack at PayPal to support Lean UX methodologies.
This talk is happening as part of the Lean Startup in the Enterprise talk with Jeff Gothelf on Tues, Dec. 4, 2012.
More and more organizations are following a Lean model for creating products. This model has been popularized by LeanUX and the Lean Startup movements which emphasize build-test-learn in rapid iterations. This talk (given at Open Web Camp 2012) looks at what has changed in the landscape and the lessons learned in creating user experiences in a lean manner.
We are going full bore on LeanUX at PayPal. This presentation just captures a lot of cautions for our teams. These anti-patterns call out bad behaviors or situations that can become bad which will stifle collaboration.
Designing With Lenses (UxLx, CHIFOO, BigD)Bill Scott
Given CHIFOO in Portland OR (4/7/2010), UxLx in Lisbon, Portugal (May 2010) & BigD in Dallas, TX (May 2010)
In any field of design, designers can enhance their craft by studying the work of others. Through the careful exercise of breaking down real-world solutions into their underlying principles and patterns, previous lessons can be applied to new sets of problems we encounter. Designing for web interfaces is no different. By necessity we are constantly searching for inspiration and practical guidance in solving the problems we face as designers each day. A powerful approach is to capture these lessons into “design lenses”. A design lens allows you to view the user experience through the eyes of a single design principle. Lenses were originally created for game design but are just as powerful for user experience design.
In this talk, Bill introduces the idea of design lenses and discuss several lenses inspired from fields of study as diverse as theater, magic, game & car design, Shaker furniture, motion graphics, and comics for inspiration in designing rich, interactive interfaces. By teasing out some of the key takeaways from each of these disciplines, a fresh light can be shed on our own corner of the design universe.
(Given at Google campus for IxDA, Microsoft campus in Redmond to UX team, Ruby Meetup Group at CMU/Moffett Field & The Ajax Experience 2009. Will be giving again in Florida at Rich Web Experience.)
Did you know that there are at least 16 different moments of interaction during drag and drop? And that there are at least a half-dozen elements on the page that conspire with these points in time to form a drag and drop interaction? With almost all user interactions there are lots of interesting moments that you can use to enhance the user experience -- or worse to create confusion in the user's mind.
In this talk, Bill slows down time and puts dozens of interactions under the microscope to study what works and what doesn't work when creating interactive applications. Nuances from 80+ examples illustrate both what should be emulated (design patterns and best practice tips) as well as what should be avoided (design anti-patterns).
These are conveniently summarized in six over-arching design principles.
* Input where you output.
* Require a light footprint.
* Maintain flow.
* Invite interaction.
* Show transitions
* Be reactive.
This talk goes hand-in-hand with Bill Scott & Theresa Neil's book, Designing Web Interfaces and will provide you with dozens of clear take-aways for designing rich interactions on the web.
I gave this talk at WebVisions 09. May 21 2009.
DESCRIPTION
"Any sufficiently advanced technology is indistinguishable from magic."
-Arthur C. Clarke, "Profiles of the Future", 1961 (Clarke's third law)
At most companies, designers and engineers live in completely different worlds. For many designers the work of engineering is indistinguishable from magic. This unfortunately makes creating a finely crafted user experience much harder than it should be. Not knowing what is possible or proposing the impossible both hinder the synergy between design and engineering. Understanding the interface engineer's bag of tricks can go a long way to closing the gap between these two worlds.
What is now possible in the browser? And what is still hard to do? In this session, Bill will focus specifically on the challenges and the opportunities for DHTML-based web sites and applications.
Drawing from 25 years of experience in designing and engineering interface solutions as well as leading design and engineering organizations, Bill will provide a set of guiding principles as well as concrete, real world examples of what is now possible and what is still hard to do given the current technology landscape.
Designing Web Interfaces Book - O'Reilly WebcastBill Scott
This is an update to the previous Designing Web Interfaces talk. This presentation was given on Feb. 3, 2009 over a live webcast via an O'Reilly Author Webcast special.
This presentation goes hand in hand with our book (Bill Scott & Theresa Neil) called Designing Web Interfaces: Principles and Patterns for Rich Interaction.
This presentation is much better suited for Slideshare than previous presentations as I took a lot of time to turn the movie screencasts into individual keyframes. All interactions now show in this presentation (that is why there are 300+ slides; in reality the presentation was more like 50 slides.)
You can see the recorded video & audio of the webcast in high resolution on YouTube at: http://www.youtube.com/watch?v=LW4MwvgW_ww&fmt=18
http://designingwebinterfaces.com
http://looksgoodworkswell.com
http://designgenie.org
(Also this is similar to the Big D 09 presentation on 5/30/2009. You can find that exact presentation at http://billwscott.com/share/presentations/2009/bigd/DWI.pdf)
GraphRAG is All You need? LLM & Knowledge GraphGuy Korland
Guy Korland, CEO and Co-founder of FalkorDB, will review two articles on the integration of language models with knowledge graphs.
1. Unifying Large Language Models and Knowledge Graphs: A Roadmap.
https://arxiv.org/abs/2306.08302
2. Microsoft Research's GraphRAG paper and a review paper on various uses of knowledge graphs:
https://www.microsoft.com/en-us/research/blog/graphrag-unlocking-llm-discovery-on-narrative-private-data/
Connector Corner: Automate dynamic content and events by pushing a buttonDianaGray10
Here is something new! In our next Connector Corner webinar, we will demonstrate how you can use a single workflow to:
Create a campaign using Mailchimp with merge tags/fields
Send an interactive Slack channel message (using buttons)
Have the message received by managers and peers along with a test email for review
But there’s more:
In a second workflow supporting the same use case, you’ll see:
Your campaign sent to target colleagues for approval
If the “Approve” button is clicked, a Jira/Zendesk ticket is created for the marketing design team
But—if the “Reject” button is pushed, colleagues will be alerted via Slack message
Join us to learn more about this new, human-in-the-loop capability, brought to you by Integration Service connectors.
And...
Speakers:
Akshay Agnihotri, Product Manager
Charlie Greenberg, Host
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...James Anderson
Effective Application Security in Software Delivery lifecycle using Deployment Firewall and DBOM
The modern software delivery process (or the CI/CD process) includes many tools, distributed teams, open-source code, and cloud platforms. Constant focus on speed to release software to market, along with the traditional slow and manual security checks has caused gaps in continuous security as an important piece in the software supply chain. Today organizations feel more susceptible to external and internal cyber threats due to the vast attack surface in their applications supply chain and the lack of end-to-end governance and risk management.
The software team must secure its software delivery process to avoid vulnerability and security breaches. This needs to be achieved with existing tool chains and without extensive rework of the delivery processes. This talk will present strategies and techniques for providing visibility into the true risk of the existing vulnerabilities, preventing the introduction of security issues in the software, resolving vulnerabilities in production environments quickly, and capturing the deployment bill of materials (DBOM).
Speakers:
Bob Boule
Robert Boule is a technology enthusiast with PASSION for technology and making things work along with a knack for helping others understand how things work. He comes with around 20 years of solution engineering experience in application security, software continuous delivery, and SaaS platforms. He is known for his dynamic presentations in CI/CD and application security integrated in software delivery lifecycle.
Gopinath Rebala
Gopinath Rebala is the CTO of OpsMx, where he has overall responsibility for the machine learning and data processing architectures for Secure Software Delivery. Gopi also has a strong connection with our customers, leading design and architecture for strategic implementations. Gopi is a frequent speaker and well-known leader in continuous delivery and integrating security into software delivery.
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...UiPathCommunity
💥 Speed, accuracy, and scaling – discover the superpowers of GenAI in action with UiPath Document Understanding and Communications Mining™:
See how to accelerate model training and optimize model performance with active learning
Learn about the latest enhancements to out-of-the-box document processing – with little to no training required
Get an exclusive demo of the new family of UiPath LLMs – GenAI models specialized for processing different types of documents and messages
This is a hands-on session specifically designed for automation developers and AI enthusiasts seeking to enhance their knowledge in leveraging the latest intelligent document processing capabilities offered by UiPath.
Speakers:
👨🏫 Andras Palfi, Senior Product Manager, UiPath
👩🏫 Lenka Dulovicova, Product Program Manager, UiPath
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered QualityInflectra
In this insightful webinar, Inflectra explores how artificial intelligence (AI) is transforming software development and testing. Discover how AI-powered tools are revolutionizing every stage of the software development lifecycle (SDLC), from design and prototyping to testing, deployment, and monitoring.
Learn about:
• The Future of Testing: How AI is shifting testing towards verification, analysis, and higher-level skills, while reducing repetitive tasks.
• Test Automation: How AI-powered test case generation, optimization, and self-healing tests are making testing more efficient and effective.
• Visual Testing: Explore the emerging capabilities of AI in visual testing and how it's set to revolutionize UI verification.
• Inflectra's AI Solutions: See demonstrations of Inflectra's cutting-edge AI tools like the ChatGPT plugin and Azure Open AI platform, designed to streamline your testing process.
Whether you're a developer, tester, or QA professional, this webinar will give you valuable insights into how AI is shaping the future of software delivery.
Elevating Tactical DDD Patterns Through Object CalisthenicsDorra BARTAGUIZ
After immersing yourself in the blue book and its red counterpart, attending DDD-focused conferences, and applying tactical patterns, you're left with a crucial question: How do I ensure my design is effective? Tactical patterns within Domain-Driven Design (DDD) serve as guiding principles for creating clear and manageable domain models. However, achieving success with these patterns requires additional guidance. Interestingly, we've observed that a set of constraints initially designed for training purposes remarkably aligns with effective pattern implementation, offering a more ‘mechanical’ approach. Let's explore together how Object Calisthenics can elevate the design of your tactical DDD patterns, offering concrete help for those venturing into DDD for the first time!
Securing your Kubernetes cluster_ a step-by-step guide to success !KatiaHIMEUR1
Today, after several years of existence, an extremely active community and an ultra-dynamic ecosystem, Kubernetes has established itself as the de facto standard in container orchestration. Thanks to a wide range of managed services, it has never been so easy to set up a ready-to-use Kubernetes cluster.
However, this ease of use means that the subject of security in Kubernetes is often left for later, or even neglected. This exposes companies to significant risks.
In this talk, I'll show you step-by-step how to secure your Kubernetes cluster for greater peace of mind and reliability.
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024Albert Hoitingh
In this session I delve into the encryption technology used in Microsoft 365 and Microsoft Purview. Including the concepts of Customer Key and Double Key Encryption.
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Tobias Schneck
As AI technology is pushing into IT I was wondering myself, as an “infrastructure container kubernetes guy”, how get this fancy AI technology get managed from an infrastructure operational view? Is it possible to apply our lovely cloud native principals as well? What benefit’s both technologies could bring to each other?
Let me take this questions and provide you a short journey through existing deployment models and use cases for AI software. On practical examples, we discuss what cloud/on-premise strategy we may need for applying it to our own infrastructure to get it to work from an enterprise perspective. I want to give an overview about infrastructure requirements and technologies, what could be beneficial or limiting your AI use cases in an enterprise environment. An interactive Demo will give you some insides, what approaches I got already working for real.
25. Devil is in the Details
y! photos. anti-pattern. idiot boxes
26. Devil is in the Details
y! photos. anti-pattern. idiot boxes
y! maps. anti-pattern. mouse trap
27. Timing Concerns
timing is important
makes actions seem faster
slows down interaction for understanding
reveals state change
shows relationships between objects
focuses attention
28. Timing Concerns
timing is important
makes actions seem faster
slows down interaction for understanding
reveals state change
shows relationships between objects
focuses attention
29. Timing Concerns
timing is important
makes actions seem faster
slows down interaction for understanding
reveals state change
shows relationships between objects
focuses attention
30. Timing Concerns
timing is important
makes actions seem faster
slows down interaction for understanding
reveals state change
shows relationships between objects
focuses attention
31. Timing Concerns
timing is important
makes actions seem faster
slows down interaction for understanding
reveals state change
shows relationships between objects
focuses attention
32. Timing Concerns
timing is important
makes actions seem faster
slows down interaction for understanding
reveals state change
shows relationships between objects
focuses attention
38. Advantages
Start simple & add complexity
Higher fidelity
Living, evolving example
Closer to final technical solution
39. Disadvantages
Requires technical savvy
Bugs can suck down time
Too much time spent ‘messing with code’
Hard to extract into documentation
Can get in the way of ideation if not rapid enough
40. 100+ variations prototyped over 1 week
Winnowed down between PMs, Design & Eng.
Put before users the next week & again 2 weeks later
41. 100+ variations prototyped over 1 week
Winnowed down between PMs, Design & Eng.
Put before users the next week & again 2 weeks later
54. Prototyping Challenges
Not surprisingly the challenges are within each concern
Structure, Layout & Style
Getting the page laid out correctly (enough) & quickly
Behavior
Adding interactivity to the page
Data
Populating the prototype with fake or semi-realistic data
55. Layout & Style
Putting everything where it should be as quickly as possible*
*with minimal hacking
57. It’s Not That Easy
9 ways to layout
columns
14 IE 6 layout
bugs
58. It’s Not That Easy
9 ways to layout
columns
14 IE 6 layout
bugs
3 rendering
engines
59. It’s Not That Easy
9 ways to layout
columns
14 IE 6 layout
bugs
3 rendering
engines
8 major
browsers
60. It’s Not That Easy
9 ways to layout
columns
14 IE 6 layout
bugs
3 rendering
engines
8 major
browsers
5 ways to layout
elements
61. It’s Not That Easy
9 ways to layout
columns
14 IE 6 layout
bugs
3 rendering
engines
8 major
browsers
5 ways to layout
elements
6+ ways to
vertically align
62. This Should Not Be Hard... But It Is
Confronted with many techniques Floats + Margins
Slows prototyping float left float right
Problem: Laying out against
the flow
margin-left margin-right
Simple Margin All Floats
Lorem ipsum dolor
sit amet, consectetur
adipiscing elit.
Quisque quam float left float right
massa, aliquam non,
feugiat non,
ullamcorper sed,
eros. Nullam mattis
float left
ultrices lectus.
Aenean dolor tortor,
semper in, aliquam
at, faucibus a, diam.
Nam eget urna vitae
magna convallis
vulputate. Duis
tempus mattis ipsum.
All Floats w/ Nested
float left
Cum sociis natoque
margin-left
float left float right float right
63. Box Model
IE6 Quirks mode (and earlier IE) have different handling
Use strict mode to eliminate this concern
66. Understanding Floats
Flow of block elements Flow of block elements
Lorem ipsum dolor
float left sit amet, consectetur block
adipiscing elit.
Quisque quam massa, aliquam non,
feugiat non, ullamcorper sed, eros. element
Nullam mattis ultrices lectus. Aenean
dolor tortor, semper in, aliquam at, flows around
faucibus a, diam. Nam eget urna
vitae magna convallis vulputate. Duis
tempus mattis ipsum. Cum sociis
block above
natoque
Flow of inline elements
67. Understanding Floats
Flow of block elements Flow of block elements
Lorem ipsum dolor
float left sit amet, consectetur block
adipiscing elit.
Quisque quam massa, aliquam non,
feugiat non, ullamcorper sed, eros. element
Nullam mattis ultrices lectus. Aenean
dolor tortor, semper in, aliquam at, flows around
faucibus a, diam. Nam eget urna
vitae magna convallis vulputate. Duis
tempus mattis ipsum. Cum sociis
block above
natoque
Flow of inline elements Floating block elements
float left
float left third block
float left element
wraps
flow left to right
68. Understanding Floats
Flow of block elements Flow of block elements
Lorem ipsum dolor
float left sit amet, consectetur block
adipiscing elit.
Quisque quam massa, aliquam non,
feugiat non, ullamcorper sed, eros. element
Nullam mattis ultrices lectus. Aenean
dolor tortor, semper in, aliquam at, flows around
faucibus a, diam. Nam eget urna
vitae magna convallis vulputate. Duis
tempus mattis ipsum. Cum sociis
block above
natoque
Flow of inline elements Floating block elements
float left
float left third block
float left element
wraps
flow left to right
Clearing floats
float left
float left
flow left to right
[clear] after clear,
flow returns
to vertical
for blocks
69. Absolute Positioning
It is actually relative to its closest positioned ancestor
B positioned absolutely
5 em
A B is positioned
relative to A
5 em
5 em (which is
B positioned), not
5 em
the document
70. Absolute Positioning
It is actually relative to its closest positioned ancestor
B positioned absolutely
5 em
A B is positioned
relative to A
5 em
5 em (which is
B positioned), not
5 em
the document
B positioned absolutely
position: relative
A B is positioned
relative to A
5 em (again
B positioned), not
5 em
the document
71. Absolute Positioning
It is actually relative to its closest positioned ancestor
B positioned absolutely B positioned absolutely
5 em no positioning specified
A B is positioned A B is positioned
relative to A relative to
5 em
5 em (which is document, not A
B positioned), not (since it is not
5 em
the document positioned)
5 em
B
5 em
B positioned absolutely
position: relative
A B is positioned
relative to A
5 em (again
B positioned), not
5 em
the document
74. Layout Techniques for Prototyping
Choose positioning over floats
Use a grid layout system
75. Layout Techniques for Prototyping
Choose positioning over floats
Use a grid layout system
76. Layout Techniques for Prototyping
Choose positioning over floats
Use a grid layout system
77. Layout Techniques for Prototyping
Choose positioning over floats
Use a grid layout system
78. Layout Techniques for Prototyping
Choose positioning over floats
Use a grid layout system
79. Layout Techniques for Prototyping
Choose positioning over floats
Use a grid layout system
Use a CSS framework to simplify life
80. CSS Frameworks
Building on the work of others
Hide complexity
Simplify the layout process
Express layout
Define templates and/or grids
Normalize browsers
CSS Reset
Handle IE
Objections?
Takes away the craftsmanship
Non-semantic
81. CSS Frameworks
Elements CSS Frameworks CleverCSS
WYMstyle: a CSS framework Tripoli Beta CSS Framework
YAML CSS Framework ESWAT Web Project Framework
YUI Grids CSS CwS CSS Framework
Boilerplate CSS Framework My (not really mine) CSS
Framework
Blueprint CSS
BlueTrip
960 Grid
Schema Web Design Framework
82. CSS Frameworks
Elements CSS Frameworks CleverCSS
WYMstyle: a CSS framework Tripoli Beta CSS Framework
YAML CSS Framework ESWAT Web Project Framework
YUI Grids CSS CwS CSS Framework
Boilerplate CSS Framework My (not really mine) CSS
Framework
Blueprint CSS
BlueTrip
960 Grid
Schema Web Design Framework
87. Blueprint CSS Framework
Layout is specified by using
style classes that denote layout.
“span-7” means span 7 grid columns.
“colborder” means provide one grid
column to the right as a border.
98. Why 960?
960 is divisible by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30,
32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 and 480.
This makes it a highly flexible base number to work with
You can also make Blueprint a 960 grid system as well
104. Making it Semantic
Criticism: non-semantic naming
There are tools for making blueprint semantic
Boilerplate
http://code.google.com/p/css-boilerplate/
Blueprint’s compress.rb
http://jdclayton.com/blueprints_compress_a_walkthrough.html
Semantify
http://lab.christianmontoya.com/read/
http://www.christianmontoya.com/2007/11/10/semantify-and-css-tools-based-on-
blueprint/)
CSS Mixin for PHP
http://habilis.net/cssmixin/
Non-issue for prototyping
105. Style Techniques
Use CSS Reset
Keep structure, style and logic separate
Avoid any direct styles or html style tags (font, etc.)
Appropriate Markup
H1 Does Not Mean "Big, Bold, and Ugly"
A Paragraph Is a Paragraph
List Mania
Keep DIV elements to a minimum
Use px for font-sizes (avoids nesting difficulties)
Minimize selectors
Extend objects by applying multiple classes to an element
108. Anatomy of an Interaction
Page Element
Target an element or elements
for attaching events & behaviors.
109. Anatomy of an Interaction
Page Element
Target an element or elements
for attaching events & behaviors.
Event Handler
Events are the glue between the user and
behaviors. They start behaviors.
110. Anatomy of an Interaction
Page Element
Target an element or elements
for attaching events & behaviors.
Event Handler
Events are the glue between the user and
behaviors. They start behaviors.
Behavior
Blocks of logic, patterns, actions that
operate on elements.
111. Anatomy of an Interaction
Page Element
Target an element or elements
for attaching events & behaviors.
Event Handler
Events are the glue between the user and
behaviors. They start behaviors.
Behavior
Blocks of logic, patterns, actions that
operate on elements.
112. Anatomy of an Interaction
Page Element
Target an element or elements
for attaching events & behaviors.
Page
Element
Event Handler
Events are the glue between the user and
behaviors. They start behaviors.
Behavior Event
Blocks of logic, patterns, actions that Handler
operate on elements.
Behavior
113. user
Anatomy of an Interaction
ew
vi
t
en
Page Element
ev
Target an element or elements
for attaching events & behaviors.
Page
Element
Event Handler fir
e
Events are the glue between the user and
behaviors. They start behaviors.
Behavior
modify
Event
Blocks of logic, patterns, actions that Handler
operate on elements.
rm
fo
p er
Behavior
114. user
Anatomy of an Interaction
ew
vi
t
en
Page Element
ev
Target an element or elements
for attaching events & behaviors.
Page
Element
Event Handler fir
e
Events are the glue between the user and
behaviors. They start behaviors.
Behavior
modify
Event
Blocks of logic, patterns, actions that Handler
operate on elements.
rm
fo
p er
Behavior
“Keep interaction, objects and behavior separate”
115. Behavior Injection
Tying behavior to elements in the markup tightly couples
behavior (also non-semantic)
Avoid onclick=”someAction()”
Instead associate actions with matched elements
116. Behavior Injection
By rendering all panels hidden & showing with JS
<form id="login" action="">
<!-- Without Errors-->
<div class=”noerrors”>
<p><label>Username: </label><input type="text" name="username"/></p>
<p><label>Password: </label><input type="password" name="password"/></p>
<input type="submit" value="Submit" />
</div>
<!-- With Errors-->
<div class=”errors”>
<p class="error">Password doesn't match.</p>
<p><label>Username: </label><input type="text" name="username"/></p>
<p><label>Password: </label><input type="password" name="password"/></p>
<input type="submit" value="Submit" />
</div>
<!-- Forgot Password-->
<div class=”forgotten”>
<p>Provide your email and we'll send you a new password.</p>
<p><label>Email Address: </label><input type="text" name="email"/></p>
<input type="submit" value="Send New Password" />
</div>
</form>
Example courtesy Kevin Hale’s article on Ajax Wireframing Approaches
117. Behavior Injection .noerrors, .errors, .forgotten:
{display:none;}
By rendering all panels hidden & showing with JS
<form id="login" action="">
<!-- Without Errors-->
<div class=”noerrors”>
<p><label>Username: </label><input type="text" name="username"/></p>
<p><label>Password: </label><input type="password" name="password"/></p>
<input type="submit" value="Submit" />
</div>
<!-- With Errors-->
<div class=”errors”>
<p class="error">Password doesn't match.</p>
<p><label>Username: </label><input type="text" name="username"/></p>
<p><label>Password: </label><input type="password" name="password"/></p>
<input type="submit" value="Submit" />
</div>
<!-- Forgot Password-->
<div class=”forgotten”>
<p>Provide your email and we'll send you a new password.</p>
<p><label>Email Address: </label><input type="text" name="email"/></p>
<input type="submit" value="Send New Password" />
</div>
</form>
Example courtesy Kevin Hale’s article on Ajax Wireframing Approaches
118. Behavior Injection .noerrors, .errors, .forgotten:
{display:none;}
By rendering all panels hidden & showing with JS
<form id="login" action="">
<!-- Without Errors-->
<div class=”noerrors”>
<p><label>Username: </label><input type="text" name="username"/></p>
<p><label>Password: </label><input type="password" name="password"/></p>
<input type="submit" value="Submit" />
</div>
$(".errors").show();
<!-- With Errors-->
<div class=”errors”>
<p class="error">Password doesn't match.</p>
<p><label>Username: </label><input type="text" name="username"/></p>
<p><label>Password: </label><input type="password" name="password"/></p>
<input type="submit" value="Submit" />
</div>
<!-- Forgot Password-->
<div class=”forgotten”>
<p>Provide your email and we'll send you a new password.</p>
<p><label>Email Address: </label><input type="text" name="email"/></p>
<input type="submit" value="Send New Password" />
</div>
</form>
Example courtesy Kevin Hale’s article on Ajax Wireframing Approaches
127. Anatomy of Self-Healing Delete
DOM elements
[X] DOM
<LI>[X] oldmove.mov</LI> Element
Events
Click Event
onClick (callback)
Behaviors
Fade Behavior
Close
128. Anatomy of Self-Healing Delete
DOM elements
[X] DOM
<LI>[X] oldmove.mov</LI> Element
Events
Click Event
onClick (callback)
Behaviors
Fade Behavior
Close
129. Anatomy of Self-Healing Delete
DOM elements
[X] DOM
<LI>[X] oldmove.mov</LI> Element
Events
Click Event
onClick (callback)
Behaviors
Fade Behavior
Close
144. Behavior Demo
Site has a demo page for each behavior
http://protoscript.com/demos.php
Site has a wiki with documentation page for each
behavior
http://docs.protoscript.com/
Element
Behavior
Event
151. ClassBehaviors jQuery Library
http://www.woollymittens.nl/default.php?id=classbehaviour-
examples&cat=classbehaviour&mod=category
<fieldset class="border">
<label for="myselect">Select Anything<em>*</em>:</label>
<select id="myselect" name="myselect" class="linkedSelects id_myLinkedSelect">
<option value="">--- pick a type ---</option>
<option value="./xml/linkedSelects_fruit.xml">Fruit</option>
<option value="./xml/linkedSelects_vegetables.xml">Vegetables</option>
<option value="./xml/linkedSelects_fish.xml">Fish</option>
</select>
<select id="myLinkedSelect" name="myLinkedSelect">
<option value="">--- pick a type first ---</option>
</select>
</fieldset>
152. Style Class Switching
Keep style details out of programming logic
Instead bundle style changes under a style class
Use class “mix-in”
Multiple class names for an element
154. Greasemonkey + jQuery
jquery code can
be loaded for any web
page allowing behaviors to
be added
155. Firebug
Edit HTML
For quick adding of html or modifying html
during a prototype review
Edit CSS
Change behaviors, layout or style on the fly
Layout issues
Visualize the box model & page layout
Manipulate Javascript
Change logic, add behaviors, experiment &
tweak
156. Behavior Techniques
Use CSS to simulate mouse hover actions
Use CSS selector syntax to inject behavior
ExtJS, jQuery, Dojo, Mootools, Prototype, cssQuery(), YUI 3.0
Understand CSS Specificity
Understand Class vs. ID
Use style class switching for visual changes
Use innerHTML for content changes
Anchors as basic navigation/action hooks
Keep structure, style and logic separate
Avoid adding onclick handlers in the HTML (unobtrusive)
Use Firebug to tweak & debug
171. Prototyping Challenges
View. Layout, Style & Structure
Getting the page laid out correctly (enough) & quickly
Behavior
Adding interactivity to the page
Data
Populating the prototype with fake or semi-realistic data