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
The document discusses web components, which include HTML templates, custom elements, shadow DOM, and HTML imports. Web components allow the creation of reusable custom elements with their own styles and DOM structure. They provide encapsulation and help avoid issues with global namespaces. While browser support is still emerging for some features, polyfills exist and frameworks like Polymer make web components accessible today. Web components represent an important evolution of the web that will improve how code is structured and shared.
The average website loads over 1.5MBs of content per page, making over 75 requests. Many popular websites are serving over 5MBs just to load their homepages. And these numbers represent measurements taken AFTER compression is applied. The full weight of many popular websites is pushing 20+ MBs these days. In an era where performance truly matters to the end user experience, web developers need techniques to help curtail this bloat in data down the wire.
No matter how well you optimize, there is no better way than to delete things you do not need. How does one determine what is essential to the user experience and what is not? One answer Chris posits is to develop a hyper-lightweight version of your website which will provide critical insights into your specific performance priorities. This is a process that he has leveraged on many projects, in particular at YouTube to reduce the size of the video watch page from 1.5MBs to 100KBs. In this talk, Chris will take real-world web pages and show techniques for dramatically reducing their page weight and for identifying areas to optimize, while outlining the key steps to doing this well.
Peter Lubbers from Kaazing gave a presentation on HTML5 features such as Web Workers, Geolocation, and WebSockets. He discussed how these new technologies allow for asynchronous background processing, location detection, and bi-directional real-time communications without polling. Browser support for HTML5 features was also reviewed.
This document discusses strategies for adding features to jQuery plugins without causing bloat. It suggests using metaplugins that handle cross-browser compatibility issues and provide core functionality. Wrapper plugins are also proposed to extend existing plugins through extension points like callbacks. The document uses the Treeview plugin as an example, explaining how an AsyncTreeview wrapper plugin was created to add Ajax support by wrapping the Treeview plugin instead of modifying it directly. This allows features to be added modularly without changing the original plugins.
Building a Simple Mobile-optimized Web App Using the jQuery Mobile FrameworkSt. Petersburg College
Presented June 8, 2012 (Online) at the 'Access by Touch: Delivering Library Services Through Mobile Technologies' conference sponsored by Amigos Library Services.
Description: By the end of 2012, it is expected that more than 80% of the world’s population will have access to a smartphone. Your library users will assume that your library can be accessible from anywhere, at any time, and on any device. Now is the time to be ready! During this webinar, you will:
- learn what a mobile framework is.
- acquire best practices in mobile Web development.
- understand the various technologies (HTML, CSS, JavaScript) and how they work together to build mobile Web apps.
- recognize the differences between native and web apps.
- have an opportunity to continue to work with Chad after the webinar to demonstrate what you learned.
- gain access after the webinar to a free Web server so you can see your mobile Web app live.
After consulting with several companies on performance related issues, it became clear that one of the biggest performance issues facing websites today is the sheer amount of JavaScript needed to power the page. The demand for more interactive and responsive applications has driven JavaScript usage through the roof. It’s quite common for large sites to end up with over 1 MB of JavaScript code on their page even after minification. But do today’s web applications really need that much JavaScript?
Using Web Standards to create Interactive Data Visualizations for the Webphilogb
This document discusses using web standards to create interactive data visualizations for the web. It provides an overview of the JavaScript InfoVis Toolkit, which allows creating multiple graph and tree layouts using web standards and JavaScript. It also discusses upcoming improvements to browser engines and JavaScript that will further improve performance of interactive visualizations. Finally, it introduces WebGL and V8-GL as emerging web standards that bring hardware-accelerated 3D graphics to the web through JavaScript.
Christmas holiday experiment: creating a VueJS front that gets data through GraphQL from a decoupled WordPress install on another server. Read more on this blogpost: https://conimpeto.be/wordpress/create-a-wordpress-twentyseventeen-theme-with-vuejs-and-graphql/.
This document discusses single-page web application architecture. It begins by comparing traditional web pages that require full page reloads on navigation to single-page apps that use client-side routing and rendering with no page reloads. It then discusses how to build single-page apps using client-side routing to handle navigation, client-side rendering of views, and an event system to decouple modules. The document also emphasizes the importance of performance in single-page apps and provides techniques for fast loading, execution and caching of assets.
The main API for PWA creation is Service Workers, they are the heart of this “new web”. With Service workers, we can send push notifications to the user or do background sync and show data even when the user is offline. They are not some science fiction, but a script that is quite easy to use.
In this talk, we will see overview what are service workers and when and how to use them.
An overview of web development essentials that will help you as a user experience designer to not only understand how to integrate designs with development components, but also to learn some tips on interacting effectively with developers.
On Selecting JavaScript Frameworks (Women Who Code 10/15)Zoe Landon
For front-end developers, there's a never-ending stream of new things to learn. New frameworks, with new philosophies, seem to be released on a daily basis. How, then, do you pick which one to use? The answer, as it happens, has nothing to do at all with JavaScript.
The Complementarity of React and Web ComponentsAndrew Rota
On Github: http://andrewrota.github.io/complementarity-of-react-and-web-components-presentation/index.html
The component driven, performance focused approach of React is a perfect complement to the modularity and portability of native HTML Web Components. At first glance, React and Web Components might seem like two radically different solutions to the same problem. But when combined properly they complement each other to create an extremely powerful, expressive framework for developing complex web applications.
In the beginning, progressive enhancement was simple: HTML layered with CSS layered with JavaScript. That worked fine when there were two browsers, but in today's world of multiple devices and multiple browsers, it's time for a progressive enhancement reboot. At the core is the understanding that the web is not print - the same rules don't apply. As developers and consumers we've been fooled into thinking about print paradigms for too long. In this talk, you'll learn just how different the web is and how the evolution of progressive enhancement can lead to better user experiences as well as happier developers and users.
This deck is a conference-agnostic one, suitable to be shown anywhere without site-specific jokes!
How to Develop a Rich, Native-quality User Experience for Mobile Using Web St...David Kaneda
This document discusses how to build rich mobile user experiences using web standards like HTML5, CSS3, and JavaScript. It covers various HTML5 features such as new elements, forms, video/audio, geolocation and caching. It also discusses CSS techniques including transforms, transitions, animations and vendor-specific properties. Challenges with fixed positioning, touch events and performance are addressed. The document promotes building web apps that are native-like using frameworks like jQTouch and Sencha Touch.
This document discusses using jQuery Templates and Data Link to build dynamic data-driven browser applications. It describes how jQuery Templates can be used to render templates from data but offers limited interactivity. jQuery Data Link allows binding data to HTML but has no templating. The presentation previews a new approach called JsViews that integrates Templates and Data Link to provide both fast rendering of templates to static HTML strings as well as fully interactive and responsive views through two-way data binding between templates and JavaScript data objects.
This document discusses JavaScript frameworks and web components. It provides examples of code for Dojo, Ember, Angular, React, and jQuery. It also discusses the benefits of web components, including that they are part of the DOM, future-proof, and modular. Web components include custom elements, shadow DOM, templates, and HTML imports. Browser support is improving but not yet universal. Polyfills exist to provide support in older browsers. The web components specification has changed from version 0 to version 1 to support ES6 classes.
Building performance into the new yahoo homepage presentationmasudakram
Nicholas Zakas presented on optimizing the performance of the Yahoo homepage redesign from 2010. The new design added significant functionality but also increased page size and complexity, threatening performance. Areas of focus included reducing time to interactivity, improving Ajax responsiveness, and managing perceived performance. Through techniques like progressive rendering, non-blocking JavaScript loading, and indicating loading states, performance was improved and maintained users' perception of speed. The redesign achieved onload times of ~2.5 seconds, down from ~5 previously, while perceived performance matched the previous version.
This document discusses progressive web apps (PWAs) and how to make them fast, integrated, reliable, and engaging. It focuses on four key areas: fast performance by optimizing load times and working offline; integrated user experience by making the app feel like a native app; reliable functionality even on poor network connections using service workers; and engaging design with features like push notifications. The document provides examples of how to implement service workers, push notifications, and other technologies to build PWAs that meet these criteria.
Learn reactjs, how to code with example and general understanding thinkwikHetaxi patel
React js for beginners, learn react js with basic code setup and code examples with general understanding. beginners guide for basic react js programming with examples
Many teams may have a front end developer among their ranks, but besides a title or area of responsibility, it can be difficult to pinpoint the exact craft of front end development. Expertise in web technologies is a good start, but we can't forget the users we actually build for. This talk will examine the impact of the front end on User Experience. I'll talk about how becoming more fluent across more UX concerns like content and user research can help front enders make better decisions, can bring more clarity to our craft, and result in building better experiences for our users.
This document discusses strategies for theming mobile websites. It covers responsive vs adaptive design, using viewport meta tags and media queries to adapt layouts, grid systems, and Drupal themes and modules that facilitate mobile theming. The key aspects are determining the client's needs, whether to use a separate site/theme or a responsive/adaptive approach, and tools like Context and Mobile Detector that can simplify the process in Drupal. The goal is to think from a mobile perspective and adapt content and interfaces for different devices and capabilities.
In the old days, many developers looked at complex websites and web applications as a series of individual pages. These days, it’s all about abstracting these pages down to re-usable elements, modules and components which are then documented, designed and built as comprehensive pattern libraries. Pattern libraries can be used as an integral part of the UX, design and front-end development phases. But where should accessibility be included in these different types of pattern libraries? Come on a journey as we explore the pain and glory of baking accessibility into UX, design and front-end pattern libraries.
This document provides an overview and introduction to React.js, including:
- React uses components and states, with components being reusable parts of the interface and states allowing components to re-render when data changes.
- JSX allows embedding XML-like syntax in JavaScript and makes code more readable.
- Props are used to pass data between parent and child components, while state stores internal data of a component that may change.
- The document provides examples of building a simple component to track saves or favorites of a home listing as state, and discusses organizing data flow through components.
This document provides a summary of the key concepts and chapters covered in a book about React. It begins with a brief table of contents that outlines the 3 parts and 13 chapters of the book. Part 1 focuses on learning the basics of React, including introducing React, components, data flow, rendering, lifecycles, forms, and third-party libraries. Part 2 covers additional React topics like routing, testing, and integrating Redux. Part 3 introduces React application architecture including Redux and building React applications for both the web and native platforms like React Native.
Introduction to Docker and Containers- Learning SimpleSandeep Hijam
Docker is an application that generates container images which allow microservices applications to be developed and run. A container image contains all the dependencies of an application. Microservices break applications into small, independent services that communicate via APIs. Docker is like a web server that runs container code. Containers are the actual application code, while Docker generates the container images and hosts the running containers. Microservices improve scalability and maintainability by separating functions into independently deployable services.
Building resuable and customizable Vue componentsFilip Rakowski
This document summarizes key lessons learned from building Storefront UI, a Vue component library for e-commerce sites. Some of the challenges discussed include determining the goals and intended users of the library, how to deliver components to users, which atomic components to include, and how to enable global and individual customization of components. The document provides suggestions like using props for customization where it makes sense, avoiding props for CSS customization, leveraging slots to make components highly customizable, and starting with an overridable style guide.
Presented at FITC Toronto 2016
See details at www.fitc.ca
There is no doubt React is here to stay, it’s popularity is on the rise. But if you are new to JS or new to JS frameworks you might be wondering WHY is it so popular. In this talk we will look at why we have React and what problems it solves. The concept of reusable components, their life cycles and the common terminology. We will also explore what the workflow for building a modern React app looks like, and where React can fall short. Learning React in 2016 will be an important step in your career, so lets dive in!
Objective
Break down the concepts behind React and make it easy for people to start building with it.
Target Audience
JavaScript developers or project mangers looking to get a better understanding of React.
Assumed Audience Knowledge
Intermediate understanding of JavaScript.
Five Things Audience Members Will Learn
Why do we have react, what problems does it solve
React components
Component life cycles
Common terminology
Where React falls short
Also, keep in mind, this is, of course, just my list and I deliberately wanted to keep it short because if I specified 20 trends here, I'm not sure if they're really all trends.
The document discusses frameworks in web development and provides examples using ASP.NET MVC framework. It defines what a framework is, explains the benefits of using frameworks like organizing code and faster development. It also describes the MVC pattern with model, view and controller components. An example application is built using ASP.NET MVC and Entity Framework to demonstrate how to create, build and run an MVC application.
A brownbag presentation at IPC media in London about the need to use libraries to make web development much less random and more professional. Get the audio at: http://www.archive.org/details/ProfessionalWebDevelopmentWithLibraries
Atomic Design: Effective Way of Designing UIFibonalabs
Atomic Design is a methodology developed by Brad Frost to guide developers in the creation of more intentional and hierarchical interface design systems.
1) Javascript frameworks have proliferated and can now perform complex tasks that previously required dedicated software packages, from mathematical operations and engineering drawings to physics simulations and animation.
2) With so many frameworks to choose from, it is impossible to know them all. Developers should focus on understanding fundamental concepts like MVC, OOP, and layers before learning specific frameworks.
3) Relying too heavily on a single framework can "frame" one's thinking and limit flexibility; developers should understand concepts at a broader level rather than how a single framework implements them.
If you’re not new to the tech world, you might know the importance of frontend frameworks and libraries in web development and how their ecosystem is evolving rapidly. In order to walk at the same pace, businesses adopt new tools along with different libraries and frameworks available to choose from. But there is no shadow of a doubt the urge to stay updated leads them to a big dilemma of which technology would be perfect for building their desired digital solutions. In this blog, we will discuss in detail why React is an incredible choice for web app development.
No matter whether it is a high-performing responsive website or a web-based application, using libraries is crucial. React or ReactJS can smooth the way for you. It is one such frontend web development tool that 10.2 million websites worldwide are using. Today, software engineers worldwide are interested in learning this hottest skill. Not only this but a lot of demand for React developers has also been noticed among startups and MNCs in recent years. But why?
Why is there a lot of buzz around React? What is ReactJS? What are the skills required to learn this tech? How much time would it take to become a pro in React? Well, if such questions hit your head, it’s time to go through this blog post.
Frontend Development Bootcamp - React [Online & Offline] In BanglaStack Learner
Frontend Development Bootcamp - React
Stack School:
https://courses.stackschool.co/courses/frontend-development-bootcamp-react
"Frontend Development Bootcamp - React"[ Online + Offline], we will teach you frontend development and its process. And we will use React and its ecosystem for learning. But at the end of this camp, if you want to switch to any other library or framework, and you can do so without anyone's help.
ওয়েব ডিজাইনার না, জেনে শুনে বুঝে, দীর্ঘ সময় হাতে কলমে প্রাকটিস করে সত্যিকার অর্থেই ফ্রন্টেন্ড ডেভেলপার হতে চাইলে এই বুটক্যাম্পটি আপনার জন্য। ফ্রন্টেন্ড ডেভেলপমেন্ট মানে HTML CSS না, React Vue না, এটা একটা প্রোসেস এবং যা আমরা শিখবো React ব্যবহার করে।
Frontend Development Bootcamp - React [Online & Offline]
43+ Weeks, 86+ Classes - A Long Journey to Become A Professional Frontend Developer
আমাদের অনেকেরই ধারণা ফ্রন্টেন্ড ডেভেলপমেন্ট মানেই হচ্ছে React, Vue বা Angular. এগুলো একবার শিখতে পারলেই হয়ে গেলো। কিন্তু বাস্তবিক অর্থে এগুলো হচ্ছে কিছু টুলস যা আপনাকে ফ্রন্টেন্ড অ্যাপলিকেশন ডেভেলপ করতে সাহায্য করবে। এই সুদীর্ঘ বুটক্যাম্পে আমরা ফ্রন্টেন্ড ডেভেলপমেন্ট শিখবো। এবং শেখার কাজে ব্যবহার করবো React এবং এর ইকো সিস্টেম। তবে এই ক্যাম্প শেষে যদি আপনি অন্য যে কোনো লাইব্রেরী বা ফ্রেমওয়ার্ক এ সুইচ করতে চান, কারোর সাহায্য ছাড়াই আপনি সেটা করতে পারবেন। কারণ এই লম্বা বুটক্যাম্পে আপনাকে ফ্রন্টেন্ড ডেভেলপমেন্টের থিওরি এবং প্রসেসের সাথে এমন ভাবে পরিচয় করিয়ে দেওয়া হবে, যেন চাইলেই আপনি যেকোনো টুলস ব্যবহার করে ফ্রন্টেন্ড ডেভেলপমেন্ট করতে পারেন। মনে রাখবেন, এটা React এর কোনো কোর্স না, ফ্রন্টেন্ড ডেভেলপমেন্ট কোর্স যেখানে আমরা টুল হিসেবে React কে বেছে নিয়েছি।
Rich, interactive web applications AKA fat clients 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. As designers and developers we need to step back, and ask ourselves when and how we should enrich our client applications and when or why not. Let’s dig in to the question: Why do we even want fat clients, and when should we use them? Let’s examine the complications such clients introduce so we can weigh them against all the benefits.
- The document discusses the respondent's career as a programmer over 30 years, including various projects they have worked on both as a freelancer and leading teams.
- Some of their biggest projects include websites like desen.bg and votpusk.ru, though they note most internet projects are unprofitable for owners.
- They now prefer to work as a freelancer or for employers/investors rather than starting their own projects due to the financial risks involved.
Viacheslav Eremin interview about DOT NET (eng lang)Viacheslav Eremin
This document contains an interview transcript with questions about the interviewee's development experience and practices. Some key points:
- The interviewee has worked as a freelance developer for many years, completing around 20 projects of varying sizes for different clients.
- Favorite development tools include Visual Studio 2010/2015 and SQL Server Management Studio. Source control experience includes SVN, TFS and Git.
- The interviewee emphasizes dividing code into logical layers and modules to improve maintainability. Databases should also be normalized.
- To improve loading speed, the interviewee recommends precompiling ASP.NET sites to static HTML or removing unnecessary frontend frameworks/libraries.
Welcome to
What is web development and how it can benefit your business | SEO Exparte BD Ltd.
Consider all of the web applications you have used in the past week. You probably can't even keep track of how many websites you visited, including your favorite news site, Facebook, and shopping sites. The internet is probably the first site you turn to if you need to find gifts, reserve a hotel room, or make a doctor's appointment. Even when the actual purchase takes place in a store, 80% of significant transactions begin with online research. The fact that 1 in 4 small businesses still don't have a website or a web app is somewhat astonishing, then. Especially in light of the numerous advantages that web apps may provide for organizations.
A web app can help your company grow by positioning you as a reliable partner who values its clients. But how can you build a feature-rich web application that your users would adore? Web development services might be used in this situation if you lack the time or the necessary abilities to create one yourself.
What is Web Development?
The entire process of creating, developing, testing, and maintaining websites and web applications is known as web development. This refers to the entire process of web design, web content development, client-side/server-side scripting, network security settings, and occasionally SEO optimization that goes into making a web app look great, operate well, and have a smooth user experience.
Full-stack web developers typically write lengthy lines of code in text editors, style it with CSS, and then combine all the components to make these products. Today, however, they can also create a new website without having to start from scratch by using tools like Adobe Dreamweaver or content management systems.
The three main types of web developers are front-end developers, back-end developers, and full-stack developers. All of a website's visual elements are the responsibility of front-end development experts (layout, navigation bar, etc.). Its functionality and interactivity are also the responsibility of front-end developers.
Less visible duties and development areas handled by backend developers include administering the web app services, databases, and applications. To fix server-side concerns with back-end development, backend developers may also need to use additional server-side languages like Python, Ruby, Java, and PHP. Full-stack developers can work on both the front end and the back end.
What tools do web developers use?
When people refer to "web app development tools," they typically refer to the HTML, Java, and CSS programming languages, apps, and environments that enable developers to write and debug the code for online applications. However, the job of a web developer changes along with the digital world.
They now need to be capable of more than just writing code fragments. They must be knowledgeable with graphic elements, responsive UI/UX design, prototyping, wire-framing
1) The document discusses code splitting strategies for bundling JavaScript applications, including route-based code splitting, splitting on-demand components, and using the Split Chunks plugin.
2) It recommends optimizing lazy loading through techniques like prefetching and using IntersectionObserver to preload resources the user may visit.
3) The key code splitting strategies discussed are route-based splitting, splitting common dependencies, and splitting asynchronous or on-demand components.
Presented at Web Unleashed 2019
More info at www.fitc.ca/webu
Andréa Crofts
League
Overview
Examining our responsibility as creators to design for disconnection.
The “restore connection” alert isn’t just for devices– it applies to people too. And it’s more important now than ever before.
Digital creators, we need to talk. The rise in mental health as a result of situational stress is a prevailing theme in today’s society, and some of the products we’re building are the root cause. But we have the power to change this. As creators of digital products, how might we enable our users to be more present in their lives? How might we invest in features like Instagram’s activity timer, despite the fact that they’re fundamentally counterintuitive to the usage metrics most behemoth tech companies are driving towards?
We have a responsibility as creators of digital products to enable others to disconnect …and re-connect with themselves, physically and mentally. This intersection is an emerging category Andrea likes to call digital health, and it’s something we can create together.
Objective
To share actionable strategies, principles and considerations for designing with digital health top of mind. Andrea will get into some #realtalk about how we can collectively create more balance and presence for the humans using our products.
Target Audience
Designers and digital creators of all kinds – especially those building digital products at scale!
Level
Open to audience members of any skill level (this is a more high-level talk)
Five Things Audience Members Will Learn
Tips and best-in-class examples of designing for digital health
Design guidelines and principles for designing with digital health in mind
Evidence-based practices to ground your future design decisions
Strategies for re-framing the success metrics of digital products
Design ethics resources
Presented at Web Unleashed 2019
More info at www.fitc.ca/webu
Luke DeWitt
REDspace
Overview
JavaScript’s popularity has exploded over the last decade, taking it from a laughable scripting language to one that powers much of the web today. Because it’s so flexible and so easy to learn, it’s extremely popular with new developers looking to cut their teeth in programming. However, these strengths are also weaknesses, as it’s incredibly easy to write bad JavaScript without even knowing it.
A lot of these newer developers jump from “Hello, World!”, to TodoMVC in order to find the library that makes their life easier. By doing this, they skip over some of the important details of not only how JavaScript works, but also how to optimize its performance to ensure the best user experience.
The Chrome profiler is a very handy tool that not a lot of developers have experience with. In this talk, we’ll take a beginner’s look at the profiler tool and examine how to use it to best improve your web application, and identify bottlenecks in your code without having to rely only on console.log statements.
Objective
To help developers understand how to better make use of the JavaScript profiler.
Target Audience
Any JavaScript developers
Assumed Audience Knowledge
Basic JavaScript
Level
Beginner / intermediate
Five Things Audience Members Will Learn
Javascript inner-workings
Profiling concepts
Identifying bottlenecks
Profiling node applications
Tooling
presented at Web Unleashed 2019
For more info see https://fitc.ca/event/webu19/
Kevin Daly RBC Ventures
Every developer has faced the difficult choice of deciding what tech stack they should use for a new project. Should you use the latest tech or something that everyone knows? Which framework is the best for your team? To survive your tech stack, developers must make trade-offs with developing on new tech stacks and the ability to maintain and scale their applications.
In this presentation, you’ll learn how to evaluate your tech stack and understand the pros and cons of using bleeding edge technology. Using his past experiences, Kevin will also share his lessons learned and how his team tackles managing their tech stack today.
Presented at FITC Toronto 2019
More info at www.fitc.ca/toronto
Bushra Mahmood
Unity Technologies
Overview
In this talk, Bushra Mahmood will explain how to articulate and pitch augmented reality as a viable medium to help solve problems. Learn about what makes an AR application come together on both mobile devices and headsets. Uncover different tools and methodologies for problem-solving and making a compelling story.
By properly understanding this technology and its parts, creatives can take an active role in shaping and defining this new space in computing.
Objective
Learn the tools and techniques required to pitch an augmented reality project.
Target Audience
Designers, product managers, product stakeholders.
Assumed Audience Knowledge
An understanding of product design and an awareness of AR
Five Things Audience Members Will Learn
The right language to use when explaining ‘spatial’ design
The different requirements and considerations for scoping an AR project
The tools that are currently available for AR authoring
Insights into what the near and far future will hold for this medium.
An example of an AR application pitch
Start by Understanding the Problem, Not by Delivering the AnswerFITC
Presented at FITC Toronto 2019
More info at www.fitc.ca/toronto
Karri Ojanen
RBC Royal Bank of Canada
Overview
Over the past number of years companies have adopted the idea of customer-centricity. People across functions can fluently talk about the importance of paying special attention to end-user needs and overall customer experience.
But innovation and forward-thinking ideas that connect both customer and business needs can’t simply be squeezed out of brainstorm sessions and sticky notes if the organization doesn’t learn how to effectively look outside of its own silos. In this session, Karri will show how to move from jumping to solutions to driving innovation by understanding the question first.
Target Audience
Designers, researchers, strategists, product managers, and technology leads
Three Things Audience Members Will Learn
Methodologies and tools to form insights out of a holistic understanding of customer challenges
How to synthesize data to form a vision of the better future
How to break the vision into manageable chunks that drive value for the business and the customer at every launch
Cocaine to Carrots: The Art of Telling Someone Else’s StoryFITC
Presented at FITC Toronto 2019
More info at www.fitc.ca/toronto
Alan Williams
Imaginary Forces
Overview
During dailies as an intern at Imaginary Forces, Alan’s director, Karin Fong, would follow her animation feedback with one of the scariest and empowering questions of his career, “what do you think?” Over the last eight years, Alan’s transition from technician to creative director came from a dramatic shift in how he approached and answered that question. By examining larger conceptual principles to practical application in commercial and tv/film design, such as HBO’s Vinyl and Netflix’s Anne with an E, he will share hard-learned lessons that can empower you, whether in Photoshop, behind a camera, or pitching to clients, in developing and selling your creative voice.
Target Audience
Visual communicators eager to become more evocative storytellers
Five Things Audience Members Will Learn
‘Method branding’ in a selfie culture
O.C.D. (observe, collect, dissect) & the imagination
The resuscitating power of rearrangement
Pertinence vs pipeline: the crippling cage of routine
Less pitching, more poetry
Everyday innovation is defined as a daily process of introducing new ideas, devices, or methods through small improvements. There are different types of innovation, including empowering, sustaining, efficiency, and disruptive innovation. Everyday innovation focuses on making incremental improvements through collaboration, identifying opportunities by listening for user needs, and building habits of innovation. Effective collaboration and feedback are important to driving everyday innovation, with feedback working best when it is specific, goal-oriented, organized, relevant and timely.
Presented at FITC Toronto 2019
More info at www.fitc.ca/toronto
Chris Zacharias
imgix
Overview
The average website loads over 1.5MBs of content per page, making over 75 requests. Many popular websites are serving over 5MBs just to load their homepages. And these numbers represent measurements taken AFTER compression is applied. The full weight of many popular websites is pushing 20+ MBs these days. In an era where performance truly matters to the end user experience, web developers need techniques to help curtail this bloat in data down the wire.
No matter how well you optimize, there is no better way to than to delete things you do not need. How does one determine what is essential to the user experience and what is not? One answer Chris posits is to develop a hyper-lightweight version of your website which will provide critical insights into your specific performance priorities. This is a process that he has leveraged on many projects, in particular at YouTube to reduce the size of the video watch page from 1.5MBs to 100KBs. In this talk, Chris will take real-world web pages and show techniques for dramatically reducing their page weight and for identifying areas to optimize, while outlining the key steps to doing this well.
Objective
Learn a process for building a hyper-lightweight version of your website for establishing reasonable performance budgets, grounded in reality, to work from.
Target Audience
Web developers
Assumed Audience Knowledge
HTML, CSS, Javascript, some server-side awareness.
Level
Intermediate
Five Things Audience Members Will Learn
How to analyze a web page for performance issues
A holistic approach to deconstructing an existing website
A clear process for building a hyper-lightweight version of your website
Translating your findings into real performance priorities
Establishing a realistic performance budget
Presented at FITC Toronto 2019
More info at www.fitc.ca/toronto
Michael Fullman
VT Pro Design
Overview
An exploration of the process of creation. We live in a time where technology and inspiration are more readily available and accessible than ever before. That being said we also live in a time that mostly highlights the successes of projects and process. In this particular talk Michael wants to touch on the process of creation with technology at VT Pro, to further explore a full circle approach to inspiration and creation where often times our next project is inspired by something learned in the process of creating something else.
By exploring what went wrong and what went right in a number of different projects he’s created, Michael will touch on points where inspiration can be found in this world of seemingly endless technology; the importance of collaboration; what can be learned from the moments that don’t necessarily go as planned; and how often projects come close to failure than the audience ever knows. Lastly he wants to touch on the process of finding personal inspiration to inspire an audience, and the momentum to push further that comes from their energy.
Objective
Things often don’t go as planned, but often that’s the fun part.
Target Audience
Creative technologists and experience designers
Five Things Audience Members Will Learn
Collaborative process
Giving personality to a piece of technology
How to learn from the unexpected
We all start somewhere (the journey is just as important as the destination)
Everything is possible now
Post-Earth Visions: Designing for Space and the Future HumanFITC
Presented at FITC Toronto 2019
More info at www.fitc.ca/toronto
Sands Fish
MIT Media Lab
Overview
Today, the environments that humans occupy in space are designed for survival. Humans are carefully shuttled to and from space, and during their relatively short stays, they are provided with minimum supplies to remain alive and able to perform experiments. As we begin to plan less for short visits and more for life in space (such as a six to eight month trip to Mars and beyond) the question becomes: What does human culture look like in space?
This talk will explore how human culture, design, and creativity might evolve as we begin to live in space, and the unique environmental conditions that might guide us in certain directions, just as the environment on Earth has. It will discuss space tourism, living in zero gravity, and some experiments in art and design that hint at future aesthetics.
Objective
Convey what opportunities exist at the outset of a more democratized New Space age, and call out the aesthetics, ethics, and cultural frontiers we find ourselves faced with at the end of the second decade of this century.
Target Audience
Those interested in the future of human life in space
Five Things Audience Members Will Learn
The history of human culture in space
Unique design constraints and considerations when designing for zero gravity
The experience of flying in a zero-g flight
The aesthetics at play in human spacefaring — (what has been)
New forms, new materials, new ideas — (what might be)
The Rise of the Creative Social Influencer (and How to Become One)FITC
Presented at FITC Toronto 2019
More info at www.fitc.ca/toronto
Lindsay Munro
Adobe XD
Overview
Your social network could be more valuable than the work you’re doing today, because it could (and should) lead to the opportunities you get tomorrow. Your next post could result in your next recommendation, job, collaboration, exhibit, and next level experience.
In this session, you’ll learn how to hone and build your online social media presence to attract brands and engage in the modern-day endorsement deal. Get a behind-the-scenes perspective on the things brands look for in creative profiles and the rules of engagement.
Objective
Teach the ins and outs of what it means to be a creative social influencer.
Target Audience
Creatives looking to up level their social media presence and strike brand partnerships.
Things Audience Members Will Learn
How to set yourself up for “success” on social media
The importance of working with the right brands
Figuring out compensation and negotiating contracts
The ins and outs of disclosure and liability
How to not mess it up
Presented at FITC Toronto 2019
More info at www.fitc.ca/toronto
Amelie Rosser
Jam3
Overview
For the past two years Jam3 worked alongside Joy Kogawa and the NFB to create East of the Rockies, an augmented reality storytelling experience.
East of the Rockies is the first interactive AR game of its kind. The story takes users through a piece of Canadian history where Japanese Canadians were forced to leave their homes and live at internment camps during WWII.
This talk will cover the creation of the game: from concept and storyboarding, to the development process in Unity and various challenges and questions to consider from a creator’s perspective.
Objective
To let the audience in on the behind the scenes of developing an AR experience like East of the Rockies.
Target Audience
For those interested in Augmented Reality storytelling and game development.
Five Things Audience Members Will Learn
AR techniques using Unity
Storytelling in AR
Prototyping interactions in AR
Game state management using Unidux
Game optimization techniques in Unity
The Knowledge Society: Three Talks About the Future
Futurism Innovation Science
Isabella Grandic
The Knowledge Society
Overview
Join three incredible, young, and brilliant minds as they present their findings on topics that we’ll all have to deal with in the not so distant future. This series of talks will explore how exponential technologies like synthetic farming, nanotechnology, and quantum computing can be used to solve some of the world’s most difficult problems.
The speakers are all students of The Knowledge Society (TKS), a human accelerator for high school students designed to help them impact billions. TKS encourages students to take risks and think big.
Ayaan Esmail‘s talk will cover creating a proactive healthcare system
World Transformation: The Secret Agenda of Product DesignFITC
R.C. Woodmass
Crescendo
Overview
The reports are in: how we relate to technology directly affects how we relate to other humans, to our environments, and to ourselves. Are we headed for a technological dystopia, where robots are in charge and empathy is just a word for the history books? Not necessarily! Learn how the interfaces we interact with can teach us how to be better communicators, increase our understanding of each other, and how product design might be the key to building a positive future for all.
Objective
Directly address fear and skepticism about technology, inspiring all who design and build tech to think more empathetically when building UX and UI.
Target Audience
Product designers, HR specialists, and anyone skeptical about technology
Three Things Audience Members Will Learn
How to create user interfaces that are flexible enough to include everyone, even if they can’t keep up with all the different identities and new labels that people are using
What is conversation design, and how it has the power to teach people how to communicate
How AI has the potential to be more inclusive than previous data analysis systems, if we leverage its weaknesses to the human advantage
This document discusses various topics related to video games and digital media including the power of now, video games from PlayStation and PC demos, games editors, live events featuring popular musicians, current uses of augmented reality, and real-time ray tracing technology. It features various images related to the topics.
Hasan Ahmad
Aquent DEV6
Overview
PWAs are a newly emerging delivery format for web, desktop apps. The fact that they can be installed on a client device and behave like natively installed apps means that special care should be taken when designing and building these types of apps, above and beyond a typical browser-only web application. One of the most important (potential) differentiators in the user experience of a PWA app vs a traditional web app is the ability to provide a high-performance UI because of their ability to do things like cache resources offline, including entire pieces of Web UI code, and the use of background services. In this talk we are going to do an exhaustive overview of the entire landscape of building PWAs from a performance-first perspective.
Target Audience
Web development teams
Assumed Audience Knowledge
Web Development fundamentals
Objective
Large enterprise applications
Five Things Audience Members Will Learn
Why PWA’s require performance engineering
What tools are available to measure performance metrics
Offline caching strategies
Host device considerations: desktop and mobile
Taking advantage of background code: Service Workers
The document discusses the rise of the JAMstack, which stands for JavaScript, APIs, and Markup. It describes how the JAMstack architecture uses static sites, content managed by headless CMSes, and APIs to provide performance and security benefits compared to traditional monolithic frameworks. Key advantages of the JAMstack include faster load times, higher security since there are fewer moving parts, and easier scalability using CDNs. The document outlines the various ingredients that make up the JAMstack like static site generators, hosting providers, and serverless functions, and provides examples of how popular sites have benefited from adopting this architecture.
From Closed to Open: A Journey of Self DiscoveryFITC
Midge “Mantissa” Sinnaeve
Mantissa
Overview
Midge will be speaking about his experience of switching to open source applications for his freelance work. From ditching expensive software subscriptions to going down the linux rabbit hole, he’ll take you along for the ride and show you some cool stuff along the way.
It’s an in-depth look at what happens when your digital tools become an extension of yourself and how that can in turn inspire you to get better as an artist and find your style.
Objective
Taking a critical look at how you work and why.
Target Audience
(Motion) designers, 3D & VFX artists
Four Things Audience Members Will Learn
Open Source Design Tools
Self-criticism
Inspiration
Letting go
This document discusses several art projects including 42 SKULLS which offers limited edition prints, THE LIGHTS, and SOFT BOTS. It also mentions UWATELA's new materials and presentation as well as AMERDAHL.
INDIAN AIR FORCE FIGHTER PLANES LIST.pdfjackson110191
These fighter aircraft have uses outside of traditional combat situations. They are essential in defending India's territorial integrity, averting dangers, and delivering aid to those in need during natural calamities. Additionally, the IAF improves its interoperability and fortifies international military alliances by working together and conducting joint exercises with other air forces.
Comparison Table of DiskWarrior Alternatives.pdfAndrey Yasko
To help you choose the best DiskWarrior alternative, we've compiled a comparison table summarizing the features, pros, cons, and pricing of six alternatives.
Sustainability requires ingenuity and stewardship. Did you know Pigging Solutions pigging systems help you achieve your sustainable manufacturing goals AND provide rapid return on investment.
How? Our systems recover over 99% of product in transfer piping. Recovering trapped product from transfer lines that would otherwise become flush-waste, means you can increase batch yields and eliminate flush waste. From raw materials to finished product, if you can pump it, we can pig it.
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...Erasmo Purificato
Slide of the tutorial entitled "Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Emerging Trends" held at UMAP'24: 32nd ACM Conference on User Modeling, Adaptation and Personalization (July 1, 2024 | Cagliari, Italy)
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
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-InTrustArc
Six months into 2024, and it is clear the privacy ecosystem takes no days off!! Regulators continue to implement and enforce new regulations, businesses strive to meet requirements, and technology advances like AI have privacy professionals scratching their heads about managing risk.
What can we learn about the first six months of data privacy trends and events in 2024? How should this inform your privacy program management for the rest of the year?
Join TrustArc, Goodwin, and Snyk privacy experts as they discuss the changes we’ve seen in the first half of 2024 and gain insight into the concrete, actionable steps you can take to up-level your privacy program in the second half of the year.
This webinar will review:
- Key changes to privacy regulations in 2024
- Key themes in privacy and data governance in 2024
- How to maximize your privacy program in the second half of 2024
Choose our Linux Web Hosting for a seamless and successful online presencerajancomputerfbd
Our Linux Web Hosting plans offer unbeatable performance, security, and scalability, ensuring your website runs smoothly and efficiently.
Visit- https://onliveserver.com/linux-web-hosting/
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.
Transcript: Details of description part II: Describing images in practice - T...BookNet 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 slides: 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.
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...Bert Blevins
Today’s digitally connected world presents a wide range of security challenges for enterprises. Insider security threats are particularly noteworthy because they have the potential to cause significant harm. Unlike external threats, insider risks originate from within the company, making them more subtle and challenging to identify. This blog aims to provide a comprehensive understanding of insider security threats, including their types, examples, effects, and mitigation techniques.
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.
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
7 Most Powerful Solar Storms in the History of Earth.pdfEnterprise Wired
Solar Storms (Geo Magnetic Storms) are the motion of accelerated charged particles in the solar environment with high velocities due to the coronal mass ejection (CME).
7 Most Powerful Solar Storms in the History of Earth.pdf
Thinking in Components
1. Thinking in Components
🤔 📥 🏗
Good morning y’all! Let’s learn about how to think in components! ✨ ✨ ✨
2. Creating a shared understanding
between designers and developers
to do our best work together
Thinking in Components
🤔 📥 🏗
The goal of this talk it to create a shared understanding
between designers and developers
around component-based web frameworks
to enable us to do our best work together.
Show of hands —
How many people in the room are designers?
How many people in the room are developers?
3. Inspiration
✨
The inspiration for this talk came from me wanting to share the amazing experience I had with developing component-based web apps with my design peers.
4. Efficiency
🏎
As a developer, component-based frameworks enabled me to build and assemble UI quickly and efficiently, buying me time to delve deeper into functionality,
interactions, new user flows — you name it.
5. Everyone Wins!
👯
So as a developer, if I was afforded all these wins, could I pass on my learning and thinking to designers, so that they too could benefit from this approach and workflow?
7. @twg
At a software agency in Toronto called TWG
And coming from an agency, our teams are in constant flux — so it’s important to me I figure out how to work best with each of my peers on my new teams.
8. React
And, in the last year,
I’ve spent the majority of it building web apps
with component-based libraries,
specifically React
9. ❓
Component-Based
So I’ll be talking through my learnings and experience with React as my “component framework” anchor, but know that approach is applicable with any component-
based framework or library.
10. Web Components™
And know that this approach is here to stay — at least for as long as things stay on the web — as web components are now a part of future browser spec.
11. 03. How can I apply this approach to my design workflow?
How can a web framework impact my design
workflow for the better?
Today’s
Agenda
01. What makes a framework or library “component-based”?
And why is everyone* suddenly using them?
*intended as hyperbole
04. How can this improve handoff?
And more importantly — the working relationship
between designers and developers?
00. What inspired you to do this talk?
Because my life changed for the better once I
introduced a component-based approach!
02. Most importantly — what is a component?
And why should I care*?!
*because knowledge is power
12. “
”
What makes a library or
framework “component-
based”? Why are libraries
like React all the rage?
Okay so the first major question —
13. First — let’s talk
about the ecosystem
these libraries live in.
Web Development Ecosystem
Static Web vs. Dynamic Web vs. Web Applications
So before we dive deep into what makes a library or framework specifically “web-component”-based, let’s first understand the ecosystem of the general kinds of tools
we have to at our disposal when building for the web.
14. Web Development Ecosystem
First — let’s talk
about the ecosystem
these libraries live in.
Static Web vs. Dynamic Web vs. Web Applications
When making websites, we can opt to make static websites.
A static website is a site that serves / sends the end user a final file of what each page is meant to show. The only communication with the backend is to send a final
HTML, CSS and sometimes JS file for each view. Sometimes, we’ll generate static sites — so we may be building in a framework like React, but by the time we put it on
our server, we’ll have generated final static files of it, to optimize load times for users.
As another example, my personal website is a static site — I have a couple of HTML files up there, and any time I need to make a change, I have to edit an HMTL or CSS
file, and re-upload them to my server.
15. Web Development Ecosystem
First — let’s talk
about the ecosystem
these libraries live in.
Static Web vs. Dynamic Web vs. Web Applications
Dynamic sites, on the other hand, are usually sites paired with a CMS that allows an admin to create and control content.
Wordpress sites are great examples of this — these sites have specified templates per view, but through an admin view, we’re able to populate all of the content that’s
going to be actually displayed. Generally, in this environment, the admins have access to high functional admin areas, but the end users generally do a lot of reading of
content, and interact mainly with forms.
16. Web Development Ecosystem
First — let’s talk
about the ecosystem
these libraries live in.
Static Web vs. Dynamic Web vs. Web Applications
And then we have web applications — web apps offer the end user a highly-interactive experience on the web.
As web applications generally have many flows and screens, and are generally continuously growing, the goal is to minimize repeating work, and find ways to modularize
and reuse existing elements. This is where web component-based libraries really shine. Often you’ll hear these referred to as “SPAs” — “Single Page Applications”.
17. Web Development Ecosystem
First — let’s talk
about the ecosystem
these libraries live in.
Use the right tool
And the last thing I wanted to touch on is — no one type of output is better than the next. It’s about using the right tool for the solution.
18. Next — let’s talk
about the web app
ecosystem.
Web Application Ecosystem
So many to choose from!
So, for the case of web applications — some of the best tools available to use are component-based libraries and frameworks.
Component-based frameworks and libraries are frameworks and libraries like React, Preact, Angular 2 and Vue.js.
19. Next — let’s talk
about the web app
ecosystem.
Web Application Ecosystem
No Browser Left Behind
And again, the reason more and more people are picking them is because this has proven to be a useful and successful approach to building web applications — and
this approach is part of future browser spec!
Until then — frameworks like React really help to fill the gaps in what current, modern browsers are capable of.
20. “
”
Okay that’s all very nice
but I still don’t know what
a web component is?
If you’re thinking …
Yes — you’re right — comin’ right up!
21. https://en.wikipedia.org/wiki/Web_Components
A custom element that
allows for reusability
and modularity.
Web Component
A web component is an element that is completely self contained — all the markup, styles and logic are all bundled into one component.
“Web Components are a set of features currently[1] being added by the W3C to the HTML and DOM specifications that allow for the creation of reusable widgets or
components in web documents and web applications.”
22. https://facebook.github.io/react/docs/react-component.html
A custom element that
allows for reusability
and modularity.
React Component
Bringing this back to what I know, I have the most amount of experience with React components.
From the React docs: “a React component lets you split the UI into independent, reusable pieces, and think about each piece in isolation.”
23. “
”
Cool. That’s great. Now,
tell me how this going to
impact my design work?
And so now you might be thinking…
24. A custom element that
allows for reusability
and modularity.
Sketch Symbol
https://www.sketchapp.com/learn/documentation/symbols/
PLOT TWIST!
This functionality exists outside the browser! In fact — Sketch Symbols do a fantastic job of instilling the same way of work as React might!
From the Sketch docs: “Symbols is a powerful feature in Sketch that allows you to reuse elements easily across Artboards and Pages.”
26. Components: In the Wild
So that should be our mantra — reuse and modularize, reuse and modularize, reuse and modularize. And the easiest way to do identify what we can reuse and good
candidates for modularity is to look for patterns of repetition.
So here’s something I built a few months ago (thank you, thank you) — it’s a section where we’re introducing users to a series of curriculum. Right away, we can see a
bunch of repetition — right?
27. Components: In the Wild
I have a bunch of these curriculum card elements repeated — so I can create this kinda “curriculum card” element that I can then repeat to my heart’s content.
28. Components: In the Wild
But even in just this section alone, I can identify another element that’s repeated — this button. So when I’m creating my Curriculum Card component, I don’t want to just
create a single-use, specific layout element — it would be best if I could assemble a “Button” into my Curriculum Card — so I only have to worry about writing the code
once.
29. Components: In the Wild
So if we have repetition in that “View 2017 Curriculum” Section — we can be pretty sure we’ve got loads of repetition elsewhere in this view alone, as well as across the
entire app.
30. Identify and create
all your smallest
components.
Development Sprint One
We’ll call these “core components”
And so to help understand how we start developing and assembling (cause that’s what it really should be) these greater views, it’s important to note that we start with
creating all the smallest, repeated elements so that we can start building out our bigger and bigger ones.
31. Identify and create
all your smallest
components.
Development Sprint One Outcome
As Seen On VSCode™
Which will result in something like this.
32. Create all of your
smallest, reusable
symbols
(Potential) Design Sprint One
We’ll call these “core symbols”
And perhaps something that design can adapt from a component-based development mindset is the order of operations in which we created our design system?
33. Create all of your
smallest, reusable
symbols
(Potential) Design Sprint One
etc.
We’ll call these “core symbols”
And so what I’m suggesting is — just like developers begin with creating all of our smallest, reusable pieces — I’m suggesting designers may benefit from doing the
same.
So start by creating your often repeated elements — buttons, cards, headings, avatars — whatever makes sense for the project.
34. Components: Assembled with other Components!
And just to give you an idea, once we have all those small components (module number, heading, button, card), we can just “compose” a new component — our
Curriculum Card component!
35. Components: Assembled with other Components!
And just to prove it to you, here’s what that might look like in code
As you can see — all of the yellow elements — those are my custom defined components. So in this Card component, I’m using a Heading, Contact, Link and Button
element.
The other divs are there either because elements (like that fraction element) aren’t repeated anywhere, so it wasn’t necessary to modularize it, or for small flow / width
control.
36. Assemble all symbols*
that will be repeated
(Potential) Design Sprint One
*From other symbols! Symbolception!
etc.
And so, if we began with designing all of our smallest pieces — those buttons, cards, headings, avatars — you now have the building blocks to start assembling larger
and larger pieces of “Design UI.”
37. Components: Assembled with other Components!
And then check this out — this “collection of cards” — that’s just a CardCollection component.
38. Components: Assembled with other Components!
And just to prove it to you, here’s what that might look like in code!
39. Components: Assembled with other Components!
And here’s what that looks like in the even greater context of code!
40. Components: Establishing Modifiers
Now let’s talk modifiers.
Just in this screenshot, we can already see a hierarchy of sorts / difference in our button styles — something that I know there’s consideration around in design — but as
a dev, without a clear understanding of intent, I might misinterpret these buttons — are the outlined ones secondary? Are they inactive? What’s the jazz here!
41. s
(Potential) Design Sprint One
etc.
Establish all
potential variants
of a symbol
Primary / Secondary / Tertiary / Quaternary
So the next activity I may undertake as a developer is making variants of all my elements. This may be an incredible helpful exercise early on in design — this enriches
the symbol library you have to choose from!
42. Establish all
potential variants
of a symbol
(Potential) Design Workflow
And stick to them!
And perhaps something that design can adapt from a component-based development mindset is the order of operations in which we created our design system.
44. Exhaust all possible existing
variants of a symbol before making
the case for a custom instance.
Stick to Your Symbols:
- A proverb I came up with in like July when I presented a
version of this at work
You can imagine, if we have this existing library of core components / symbols, we can make new views, new components and whole new user flows much faster if we
just stick to existing variants of established symbols / components.
46. Two — Compose and
assemble symbols
from smaller symbols
Workflow Mantras
47. Three — Avoid custom
component modifiers
for single-context uses
Workflow Mantras
48. “
”
How can this improve the
design handoff? And our
working relationship?
49. Shared awareness
around your custom
components
Better Design Handoff
You both know what elements exist, and in what contexts
You’ve now both done the exercise of nominating components / symbols. You’re pretty aware of what exists now.
So, design handoff becomes a lot easier given that we’re aligned on what kinds of elements make sense to include in that first handoff — all those smallest, most
repeated pieces done ASAP lead to quicker UI assembly time for devs.
50. Shared vocabulary
around your custom
components
Better Design Handoff
You both can speak to your component taxonomy ⚡
You may have also created a shared language around them.
This is something that the whole team can benefit from — if we can all use the same nomenclature around our UI, we can smoothly be on the same page in discussions.
This even benefits the team from a client or outside perspective — we can quickly onboard and present our work consistently.
51. Shared understanding
around your custom
components
Better Design Handoff
You both “signed” a verbal contract
And you can both share that mindset of reuse and modularity.
This benefits the team well beyond the design handoff — you both can have an understanding of what it means to create a new component — can we reuse an existing
one? Can we find a way for 3 different contexts the share the exact same one with minimal tweaks?
52. Shared activity around
nominating and
naming components
Better Relationships
Knowledge transfer forever and ever
And perhaps — this can be an activity shared between design and development?
As a developer, I have to do this — I have to thinking in reusable, modular components when I’m building a web app. And it’s always my pleasure to work with a
designer, walk them through how to think in components, and share my approach and context with them.
It’s made for better, collaborative working relationship built on mutual understanding, respect, and collaboration.
53. 03. … And Sketch Symbols are very much like components
In that they have encapsulated markup and
styles, with a focus on modularity and reusability
Today’s
Learnings
01. Component-based libraries exist as a “polyfill”
Meaning technologies like React are here to fill the gap
until all browsers support web components
04. Shared understanding improves relationships
Because we can approach things with a similar
mindset, and teach each other from our learnings
00. I very much love components
And they’ve impacted me so positively as a developer I
had to share it with you today
02. Components are custom elements with markup and styles
Their primary focus is to make modularity and
reusability easy to do
56. Browser’s Castle
further tools for collaborating as
developers and designers
2:30pm @ The B-Side
🤝
If you enjoyed this,
and want to hear even more about working together better as developers and designers,
I’ll be discussing how to defend “Browser’s” Castle at 2:30 in The B-Side
with my good pal and Creative Director of TWG, Liam Thurston.