This document discusses Atomic Design, a methodology for building design systems. It begins by explaining that interfaces are made of systems of components, not just pages. It then discusses frameworks like Foundation and Bootstrap, as well as their potential pitfalls. The document introduces Atomic Design and its principles of separating interfaces into abstract and concrete levels. It explains Pattern Lab as a tool for building design systems and provides examples of existing style guides. Overall, the document advocates for a systematic approach to design to improve collaboration and build reusable and scalable components.
The document discusses the concept of atomic design for building interfaces and design systems. It provides examples of existing style guides and pattern libraries. It also describes how atomic design breaks interfaces down into basic elements called atoms, and combines them into larger components called molecules, organisms and templates. Real content can then be piped into the templates.
Design systems, not pages. This is an introduction to atomic design (http://bradfrostweb.com/blog/post/atomic-web-design/), a methodology for crafting an effective interface design system. It also introduces Pattern Lab (http://patternlab.io/), a tool for implementing atomic design systems and pattern libraries.
Responsive web design has hit the scene like a bomb, and now designers everywhere are showing off to their bosses and peers by resizing their browser windows. "Look! The site is squishy!"
While creating flexible layouts is important, there's a whole lot more that goes into truly exceptional adaptive web experiences. This session will introduce the Principles of Adaptive Design: ubiquity, flexibility, performance, enhancement and future-friendliness. We need go beyond media queries in order to preserve the web's ubiquity and move it in a future-friendly direction.
A designer has been asked to mock up a student profile page in Photoshop. It’s beautiful. The student’s name fits perfectly under the profile image. Their bio is split into two columns that perfectly line up. Unfortunately, all of this perfectly laid-out content is an unrealistic best-case scenario. Our content never fits this perfectly. Names are longer than the eleven characters used in the mock-up. Bios naturally vary in length from person to person. The reality is that we will have large variation in our content.
Rather than addressing these variations after we’ve received approvals and started building a website, we should stress-test our designs with real content from the start of our process. To deliver the best possible product, we need to design for the best-case, worst-case, and every-case-in-between when it comes to possible content.
* Learn how systems and patterns can help us build reusable and shareable components for our websites
* Discover the benefits of taking the design process out of Photoshop and moving it to the browser.
* Learn how content specialists can engage with the design process from the beginning and be advocates for realistic content.
* Explore how real and varied content, not lorem ipsum, can be used to test a design and how it might work.
* Discover how developers can also be involved in this process to ease integration of a design with a CMS or a custom solution.
The document discusses atomic design principles and best practices for CSS architecture and code. It explains the different levels of atomic design including atoms, molecules, organisms, templates and pages. It provides examples of how to implement atomic design using CSS extensions, mixins, variables and imports. It also outlines recommendations for CSS practices such as managing specificity, using semantic selectors, separating concerns of paint and layout, avoiding magic numbers, and more.
Responsive web design has become an important tool for front-end developers as they develop mobile-optimized solutions for clients. Browser-detection has been an important tool for server-side developers for the same task for much longer. Unfortunately, both techniques have certain limitations. Depending on project requirements, team make-up and deployment environment combining these two techniques might lead to intriguing solutions for your organization. We'll discuss when it makes sense to take this extra step and we'll explore techniques for combining server-side technology, like server-side feature-detection, with your responsive web designs to deliver the most flexible solutions possible.
The Death of Lorem Ipsum and Pixel-Perfect Content (MinneWebCon version)
A designer has been asked to mock up an example student profile page in Photoshop. It’s beautiful. The student’s name fits perfectly under the profile image. Their bio is split into two perfectly aligned columns. The design just feels… right. Approvals are given and the production of a website with many different profiles is started. As more profiles are added the design no longer seems to work. It’s starting to seem like the website itself will no longer work. The cold, hard reality of varied and inconsistent web content has hit the project hard. Do we make large design changes or just live with it?
To head off this question we should utilize real content as we develop mock-ups. But it shouldn’t just be one set of real content. Delivering the best possible and most robust websites requires us to design using the best-case, worst-case, and every-case-in-between content. By combining the skills of content specialists, designers, and even developers designs will be that much stronger.
This document discusses responsive web design. It begins by outlining the failures of separate mobile websites and native apps. Responsive design is identified as the key approach because it allows for one website with a layout that adapts to any screen size. The document then covers various aspects of responsive design such as thinking mobile first, information architecture considerations, designing in the browser versus Photoshop, using a fluid or fixed grid, and making design decisions beyond just visual design.
Presented at WordCamp Malaysia 2010.
Slideshare also does not resize my cropped images properly, thus resulting in squished images. This is noticeable on my squished code.
Styleguide-Driven Development: The New Web Development
The session was originally titled "Managing Complex Projects with Design Components”, but the training I took to become a certified ScrumMaster blew my mind.
Integrating agile development with web development is actually very simple. It's called Styleguide-Driven Development.
In this session, we will discuss the two requirements for Style Guide Driven Development: component-based design and automated style guides.
The document discusses the history and features of plugins in WordPress. It defines what a plugin is and explains that plugins can enhance WordPress functionality by adding features like SEO, spam filtering, backups, and more. The document notes there are over 18,000 plugins available and provides tips for installing, troubleshooting, and removing plugins. It recommends several popular plugins including Akismet, Jetpack, backup plugins, caching plugins, SEO plugins, and others.
This document provides an overview of common poor coding practices in WordPress development that can negatively impact compatibility and user experience. It discusses examples like directly modifying core WordPress scripts, directly printing scripts and stylesheets rather than using the enqueue system, and encourages developers to avoid these practices to prevent breaking other plugins, themes or WordPress itself. The presentation aims to make developers aware of these issues and how to develop code that is more considerate of other code on the site.
This document describes how to build a Jabber bot that can process Twitter messages serialized as XMPP messages. It provides instructions on setting up the necessary Ruby gems, creating a daemon to serialize tweets, writing specs to test the bot's behavior, and implementing the bot client to apply rules to messages. Sample Twitter messages in XMPP format are also included. The goal is to allow others to build their own bot armies that can process tweets and perform actions.
The document discusses how to make a website social using Facebook social plugins. It describes various Facebook social plugins like the login button, registration button, like button, and comments that can be easily integrated into a website with one or two lines of code. Integrating these plugins allows users to login, register, like content, and comment using their Facebook profiles. This increases user engagement and grows the social features of the site. [/SUMMARY]
How do you scale CSS for millions of visitors or thousands of pages? The slides from Nicole's presentation at Web Directions North in Denver will show you how to use Object Oriented CSS to write fast, maintainable, standards-based front end code. Adds much needed predictability to CSS so that even beginners can participate in writing beautiful, standards-compliant, fast websites.
We keep thinking we can write better CSS if we just try harder, that the next site will be clean and stay that way. This presentation shows that in fact, messy CSS is the direct result of our worst best-practices. We need to reexamine those assumptions with an eye to practicality and scalability as well as accessibility, standards, and fabulous design.
Creating Living Style Guides to Improve Performance
Refactoring Trulia’s UI with SASS, OOCSS, and handlebars. My slides from jsconf 2013. Lot's of yummy details about the performance improvements we were able to make.
Your website has out-of-control CSS bloat. You know your performance is being impacted, but how do you move from organic CSS with no particular architecture to something lighter, more logical, and easier to maintain? In this session, Nicole Sullivan and Stoyan Stefanov will show you how they improved the CSS at Facebook and Yahoo! Search. After this session you will know how to:
1. Use lint tools to automate and evaluate the efficiency of your CSS
2. Avoid the top 5 causes of CSS bloat, and
3. Speed up your site by making the UI code an order of magnitude smaller.
The JavaScript community is one of the most vibrant and fun groups I've ever been lucky enough to be a part of. Like any vibrant community, sometimes people don't play nicely. In this session, I will discuss what it has been like to be shy *and* be on twitter, mailing lists, and open source. I'll talk about my experiences consulting on massive CSS overhauls, and ways to defeat trolls -- including your own inner troll! I'll also share a timing attack for your brain that might just surprise you.
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective, Ajax ...
The cascade is a poker game, but we've been playing our cards all wrong. Here Nicole suggests we stop trying to play to win to prevent code bloat, and simplify the cascade, using the order of the rulesets to allow overrides.
Nicole Sullivan and Stoyan Stefanov discuss their work optimizing CSS at Facebook and Yahoo!, As well as the state of CSS optimizations in the Alexa Top 1000 websites. What a mess!
From Velocity Conference and Texas-Javascript.
The document provides an overview of the Ruby programming language, discussing how everything in Ruby is an object, Ruby's dynamic typing, how classes are objects and class names are constants, modules and mixins, functional support through blocks and variables, and how procs and lambdas allow for deferred evaluation.
From Nicole's presentation at the CSS Summit. This is brand new research regarding efficient CSS selector design. Practicing the rules outlined here will make your CSS lean, your site fast, and your maintenance minimal. A beautiful combination for people concerned with building performance into their sites.
From Nicole's talk at JSConf.eu where she presented her wish list for the future of CSS. She presents a brand-new expanded syntax which allows for prototypes, mixins, and variables and explains how a preprocessor can be used today to achieve a richer language in older browsers.
This document discusses view resolution in Spring MVC. It describes several view resolvers included with Spring, including InternalResourceViewResolver, BeanNameViewResolver, and ResourceBundleViewResolver. It also covers configuring multiple view resolvers, binding form data, rendering messages, displaying errors, integrating Jakarta Tiles to layout pages, and creating Tiles controllers.
This document discusses responsive web design using CSS3 media queries. It begins with an introduction to media queries and their syntax for modifying CSS based on screen width. It then covers examples of adapting layouts, images, and other design elements for different screen sizes. Finally, it addresses techniques for supporting older browsers that do not support media queries, such as using conditional comments or JavaScript libraries.
Media queries allow CSS styles to be applied conditionally based on characteristics of the device viewing the content, like screen width. They provide a way to target specific devices and change layouts without changing the HTML. The document discusses the syntax of media queries, including using media types, features, expressions, and keywords. It provides examples of using media queries to load different style sheets or apply different CSS rules for different screen widths.
Many web sites have moved away from table based layouts to CSS. But what about the longer term? Is you CSS efficient, maintainable and modular? Find out about taking your CSS to the next level.
This document introduces the SC5 Styleguide, a tool for living styleguides that represents UI components with the exact same styles used in a project. It advocates an approach called Styleguide Driven Development where the styleguide is the focal point for front-end development. Key features include supporting CSS/SCSS/LESS, related variables, live editing, Angular directives, and easy integration. The styleguide allows for quick testing, building out new pages, and easier collaboration between designers and developers.
Given at CSS Dev Conf 2014 in New Orleans on October 14, 2014.
This full presentation written with Web Components can be viewed with Chrome 36+ online at http://andrewrota.github.io/web-components-and-modular-css-presentation/presentation/index.html#0.
The source of the presentation is available on GitHub: https://github.com/andrewrota/web-components-and-modular-css-presentation.
Universal JS Web Applications with React - Luciano Mammino - Codemotion Rome ...
This document outlines a presentation about building universal JavaScript web applications with React. It discusses:
1. The term "universal" in relation to JavaScript and some advantages it provides like maintainability and faster load times.
2. Building a frontend single page application with React and then making it universal by rendering on the server as well with React and Express.
3. Key aspects of universal apps like module sharing, routing, data retrieval and state management that work across client and server.
4. An example of building a universal JavaScript app with React called "Judo Heroes" that shows athlete data and profiles, using components, routing, data and building tools like Babel and Webpack.
Universal JavaScript Web Applications with React - Luciano Mammino - Codemoti...
Since we started to see JS on the server side, the dream of developers has been to reduce the gap and the cost of switch between frontend/backend. Today with Node.js, React and a whole ecosystem of tools, this dream is becoming true! In this talk I am going to discuss about Universal (a.k.a. Isomorphic) JS and present some practical example regarding the major patterns related to routing, data retrieval and rendering. I will use Node, React, Webpack, Babel and React Router and give you a series of example to get you started easily with this new technology trend.
Presentations includes following topics :-
Introduction of ReactJS.
Component workflow.
State management and useful life-cycles.
React hooks.
Server Side Rendering.
The document discusses trends toward browser-based, client-side development and simpler yet more powerful products. It describes building a web-based document viewer using the Accusoft Pegasus ASP.NET Imaging SDK. The application allows searching a document library and viewing documents. Code examples show creating search and view pages, loading a document into the viewer, and JavaScript for viewer controls.
The document discusses trends toward browser-based, client-side development and simpler yet more powerful products. It describes building a web-based document viewer using the Accusoft Pegasus ASP.NET Imaging SDK. The application allows searching a document library and viewing documents. Code examples show creating search and view pages, loading a document into the viewer, and JavaScript for viewer controls.
The document summarizes the FotoWeb 8.0 Selection Widget and Export functionality. The Selection Widget is an HTML widget that allows users to browse, search, and select assets from a FotoWeb DAM system within a third-party application without leaving that application. Selected assets can then be programmatically exported from FotoWeb at specified sizes using preset configurations. The widget and export processes involve embedding IFRAMEs, subscribing to selection and export events, and making API calls to retrieve assets and generate exported files.
The Structure of Web Code: A Case For Polymer, November 1, 2014
About using Polymer (http://polymer-project.org/) to achieve better structure of the frontend code than with other tools.
Part of the Dublin GDG Dev Fest.
WordPress Admin UI - Future Proofing Your Admin Pages
The document provides instructions for future-proofing WordPress admin pages by following best practices for creating, styling, and extending them. It demonstrates how to create an admin menu item and page callback function, add basic HTML markup and form elements, display tabular data using list tables, and customize the page icon. The document recommends using the Settings API to build settings pages and enqueueing custom styles to add styling and high-DPI icons.
This document provides an overview of the BEM (Block Element Modifier) methodology for organizing CSS code. It discusses the concepts of blocks, elements, and modifiers. It also covers advantages like namespacing and shared UI language. Finally, it discusses tools and frameworks for BEM including BEMHTML, CSSO, Emmet, and inuit.css.
Angular server side rendering - Strategies & Technics
Server Side Rendering (SSR) involves running and serving an Angular application from the server. This provides benefits like fast initial loading, SEO/crawlability since search engines can't run JavaScript. The document discusses SSR strategies like partial rendering and avoiding duplicate requests. It also covers challenges like unsupported features and outlines steps to implement SSR like generating a Universal module and rendering on the server with Express. SSR can improve performance but requires more complex setup and deployment.
This document is the HTML code for the upload page on the SlideShare website. It includes metadata, scripts, and styling to display the page content which encourages users to discover, share and present presentations, infographics and videos on the largest professional content sharing community. The page code provides options for users to upload, login or sign up for an account.
This document summarizes a workshop on React JS that covered topics like what React is, how to build components, manage state and data flow, and the component lifecycle. It began with introductions and an overview of React and its benefits like being declarative, component-based, and able to learn once and write anywhere. Key aspects of React like JSX, embedding expressions, specifying attributes and children were explained. Different types of components like class and functional were discussed. Examples were provided to illustrate props, state, and data flow. The document concluded by outlining what would be built in the workshop - a chatbot application - and next steps to explore like React router, Redux, and testing.
Salesforce Lightning is Salesforce's next-generation development framework for building applications. It uses a component-based approach where reusable UI components can be developed using JavaScript on the client-side and Apex on the server-side. Key advantages of the Lightning framework include its focus on components, improved performance through JSON data exchange, and an event-driven architecture. Developers can also leverage many pre-built Lightning components and tools for visual development to more quickly build apps.
Overview of the new frontend architecture used for the New Profile at LinkedIn.
Blog version of this slidedeck: https://engineering.linkedin.com/profile/engineering-new-linkedin-profile
This document provides an overview of building initial scenes in React Native, including setting up components, styles, state, props, file structure, and networking. It discusses common React Native components like View, Text, Image, ScrollView, ListView, and interaction components. It also covers more advanced topics such as maps, dates pickers, geolocation, cameras, and working with native iOS and Android modules.
This document discusses adding images to web pages in different ways:
1) Image maps allow different parts of an image to act as hyperlinks using the <IMG>, <MAP>, and <AREA> tags.
2) Images can be added as the background of a web page using the BACKGROUND attribute of the <BODY> tag.
3) Hands-on activities guide the creation of web pages that demonstrate image maps and background images.
Create president quotes web part using share point rest api and bootstrap
This document provides steps to create a President Quotes web part in SharePoint using the REST API and Bootstrap:
1. Create a list in SharePoint called "PresidentMessage" with columns to store description, image, and author details.
2. Add a Script Editor web part to a SharePoint page and include jQuery and Bootstrap scripts/styles.
3. Use the REST API and jQuery to retrieve the list data and dynamically build the UI within the centered div, displaying the image, description, and author for each item.
Let’s admit it, the tools for writing CSS aren’t very advanced. For the most part, the people who write tools don’t know about CSS and the people who know about CSS don’t write tools. Quite a conundrum!
In this session, you’ll learn about good tools that can make development faster and maintenance easier. We’ll also talk a bit about where we can go from here.
What tools do we need as sites are becoming more and more complex? We need to get beyond tools whose primary goal is to avoid hand-coding and realize that, as our techniques for writing CSS become more powerful, our tools can too! Session will include:
* Validators
* Preprocessors
* Finding dead rules
* Linting
* CSS3 gradient tools
* Performance measurement tools
* Unit testing
You've got a sneaking suspicion that design impacts performance. What next? Your engineers know nothing about design and your designers know nothing about performance. How can you get everyone on the same page? Which design flaws must you absolutely avoid? How do engineers slow designs with poor CSS? This presentation covers the best practices in design and OO CSS for fast, maintainable sites.
* Abstraction
* Flexibility
* Grids
* Location dependent styles
Velocity Conference, 2009
This document discusses object-oriented CSS (OOCSS) as an evolution of CSS that makes it more powerful. OOCSS involves creating reusable CSS objects rather than page-specific rules, setting good global defaults, abstracting reusable elements, separating container and content, and using multiple classes to simulate inheritance. This allows for more scalable, maintainable and performant CSS code. Some best practices of OOCSS include creating semantic object classes like .heading rather than styling specific elements directly. The document provides examples of OOCSS principles and their benefits.
Nicole Sullivan gives a presentation on designing fast websites. She discusses why performance matters, how websites have grown more complex over time, and how poor performance can negatively impact businesses. She provides several best practices for optimizing websites, such as creating reusable components, using consistent styles, making modules transparent, optimizing images through sprites and compression, avoiding non-standard fonts and using columns instead of rows.
The 7 Habits of Exceptional Performance discusses techniques for optimizing website performance. It recommends flushing the buffer early, using GET requests for AJAX, preloading components, avoiding filters, measuring performance metrics, and balancing new features with performance improvements. High performance should be baked into the development process from the start. Key metrics to track include page weight, response time, and HTTP requests.
The document discusses 20 additional best practices for improving web performance beyond the original 14 recommendations from YSlow. It covers techniques like flushing the buffer early, splitting components for post-loading, preloading necessary assets, reducing unnecessary DOM elements, optimizing images through techniques like converting to smaller file formats and using CSS sprites, and designing for mobile performance. The document provides examples and case studies to illustrate the recommendations and cites additional resources on web performance.
7 Most Powerful Solar Storms in the History of Earth.pdf
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).
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
Presented at Gartner Data & Analytics, London Maty 2024. BT Group has used the Neo4j Graph Database to enable impressive digital transformation programs over the last 6 years. By re-imagining their operational support systems to adopt self-serve and data lead principles they have substantially reduced the number of applications and complexity of their operations. The result has been a substantial reduction in risk and costs while improving time to value, innovation, and process automation. Join this session to hear their story, the lessons they learned along the way and how their future innovation plans include the exploration of uses of EKG + Generative AI.
If you’ve ever had to analyze a map or GPS data, chances are you’ve encountered and even worked with coordinate systems. As historical data continually updates through GPS, understanding coordinate systems is increasingly crucial. However, not everyone knows why they exist or how to effectively use them for data-driven insights.
During this webinar, you’ll learn exactly what coordinate systems are and how you can use FME to maintain and transform your data’s coordinate systems in an easy-to-digest way, accurately representing the geographical space that it exists within. During this webinar, you will have the chance to:
- Enhance Your Understanding: Gain a clear overview of what coordinate systems are and their value
- Learn Practical Applications: Why we need datams and projections, plus units between coordinate systems
- Maximize with FME: Understand how FME handles coordinate systems, including a brief summary of the 3 main reprojectors
- Custom Coordinate Systems: Learn how to work with FME and coordinate systems beyond what is natively supported
- Look Ahead: Gain insights into where FME is headed with coordinate systems in the future
Don’t miss the opportunity to improve the value you receive from your coordinate system data, ultimately allowing you to streamline your data analysis and maximize your time. See you there!
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.
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
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.
Kief Morris rethinks the infrastructure code delivery lifecycle, advocating for a shift towards composable infrastructure systems. We should shift to designing around deployable components rather than code modules, use more useful levels of abstraction, and drive design and deployment from applications rather than bottom-up, monolithic architecture and delivery.
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
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
How RPA Help in the Transportation and Logistics Industry.pptx
Revolutionize your transportation processes with our cutting-edge RPA software. Automate repetitive tasks, reduce costs, and enhance efficiency in the logistics sector with our advanced solutions.
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.
Choose our Linux Web Hosting for a seamless and successful online presence
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/
Documenting an Atomic Design System with JekyllTodd Moy
This document discusses using Jekyll to document an atomic design system. It introduces atomic design and common documentation issues around formatting, navigation, usability, and versioning. It then explains how Jekyll is a static site generator that uses Markdown files and templates to generate static HTML and CSS pages. The rest of the document outlines how Jekyll was used to structure, edit, host, and improve the design system documentation through processes like Omnigraffle, InVision, Basecamp, commits and pull requests. Future plans are also mentioned.
All matter, no matter how complex, can be broken down into molecules which can be broken down further into atomic elements. All web interfaces can be broken down down the same way. Atomic Design provides a methodology for building an effective design system. It consists of five distint stages: atoms, molecules, organisms, templates and pages.
From a lecture for product designers, describing the Atomic Design Approach in theory and practice: the idea of approach and how it was used in production.
This document discusses Atomic Design, a methodology for building design systems. It begins by explaining that interfaces are made of systems of components, not just pages. It then discusses frameworks like Foundation and Bootstrap, as well as their potential pitfalls. The document introduces Atomic Design and its principles of separating interfaces into abstract and concrete levels. It explains Pattern Lab as a tool for building design systems and provides examples of existing style guides. Overall, the document advocates for a systematic approach to design to improve collaboration and build reusable and scalable components.
The document discusses the concept of atomic design for building interfaces and design systems. It provides examples of existing style guides and pattern libraries. It also describes how atomic design breaks interfaces down into basic elements called atoms, and combines them into larger components called molecules, organisms and templates. Real content can then be piped into the templates.
Atomic Design - An Event Apart San DiegoBrad Frost
Design systems, not pages. This is an introduction to atomic design (http://bradfrostweb.com/blog/post/atomic-web-design/), a methodology for crafting an effective interface design system. It also introduces Pattern Lab (http://patternlab.io/), a tool for implementing atomic design systems and pattern libraries.
Beyond Squishy: The Principles of Adaptive DesignBrad Frost
Responsive web design has hit the scene like a bomb, and now designers everywhere are showing off to their bosses and peers by resizing their browser windows. "Look! The site is squishy!"
While creating flexible layouts is important, there's a whole lot more that goes into truly exceptional adaptive web experiences. This session will introduce the Principles of Adaptive Design: ubiquity, flexibility, performance, enhancement and future-friendliness. We need go beyond media queries in order to preserve the web's ubiquity and move it in a future-friendly direction.
The Death of Lorem Ipsum & Pixel Perfect ContentDave Olsen
A designer has been asked to mock up a student profile page in Photoshop. It’s beautiful. The student’s name fits perfectly under the profile image. Their bio is split into two columns that perfectly line up. Unfortunately, all of this perfectly laid-out content is an unrealistic best-case scenario. Our content never fits this perfectly. Names are longer than the eleven characters used in the mock-up. Bios naturally vary in length from person to person. The reality is that we will have large variation in our content.
Rather than addressing these variations after we’ve received approvals and started building a website, we should stress-test our designs with real content from the start of our process. To deliver the best possible product, we need to design for the best-case, worst-case, and every-case-in-between when it comes to possible content.
* Learn how systems and patterns can help us build reusable and shareable components for our websites
* Discover the benefits of taking the design process out of Photoshop and moving it to the browser.
* Learn how content specialists can engage with the design process from the beginning and be advocates for realistic content.
* Explore how real and varied content, not lorem ipsum, can be used to test a design and how it might work.
* Discover how developers can also be involved in this process to ease integration of a design with a CMS or a custom solution.
The document discusses atomic design principles and best practices for CSS architecture and code. It explains the different levels of atomic design including atoms, molecules, organisms, templates and pages. It provides examples of how to implement atomic design using CSS extensions, mixins, variables and imports. It also outlines recommendations for CSS practices such as managing specificity, using semantic selectors, separating concerns of paint and layout, avoiding magic numbers, and more.
The Server Side of Responsive Web DesignDave Olsen
Responsive web design has become an important tool for front-end developers as they develop mobile-optimized solutions for clients. Browser-detection has been an important tool for server-side developers for the same task for much longer. Unfortunately, both techniques have certain limitations. Depending on project requirements, team make-up and deployment environment combining these two techniques might lead to intriguing solutions for your organization. We'll discuss when it makes sense to take this extra step and we'll explore techniques for combining server-side technology, like server-side feature-detection, with your responsive web designs to deliver the most flexible solutions possible.
The Death of Lorem Ipsum and Pixel-Perfect Content (MinneWebCon version)Dave Olsen
A designer has been asked to mock up an example student profile page in Photoshop. It’s beautiful. The student’s name fits perfectly under the profile image. Their bio is split into two perfectly aligned columns. The design just feels… right. Approvals are given and the production of a website with many different profiles is started. As more profiles are added the design no longer seems to work. It’s starting to seem like the website itself will no longer work. The cold, hard reality of varied and inconsistent web content has hit the project hard. Do we make large design changes or just live with it?
To head off this question we should utilize real content as we develop mock-ups. But it shouldn’t just be one set of real content. Delivering the best possible and most robust websites requires us to design using the best-case, worst-case, and every-case-in-between content. By combining the skills of content specialists, designers, and even developers designs will be that much stronger.
This document discusses responsive web design. It begins by outlining the failures of separate mobile websites and native apps. Responsive design is identified as the key approach because it allows for one website with a layout that adapts to any screen size. The document then covers various aspects of responsive design such as thinking mobile first, information architecture considerations, designing in the browser versus Photoshop, using a fluid or fixed grid, and making design decisions beyond just visual design.
Presented at WordCamp Malaysia 2010.
Slideshare also does not resize my cropped images properly, thus resulting in squished images. This is noticeable on my squished code.
Styleguide-Driven Development: The New Web DevelopmentJohn Albin Wilkins
The session was originally titled "Managing Complex Projects with Design Components”, but the training I took to become a certified ScrumMaster blew my mind.
Integrating agile development with web development is actually very simple. It's called Styleguide-Driven Development.
In this session, we will discuss the two requirements for Style Guide Driven Development: component-based design and automated style guides.
The document discusses the history and features of plugins in WordPress. It defines what a plugin is and explains that plugins can enhance WordPress functionality by adding features like SEO, spam filtering, backups, and more. The document notes there are over 18,000 plugins available and provides tips for installing, troubleshooting, and removing plugins. It recommends several popular plugins including Akismet, Jetpack, backup plugins, caching plugins, SEO plugins, and others.
This document provides an overview of common poor coding practices in WordPress development that can negatively impact compatibility and user experience. It discusses examples like directly modifying core WordPress scripts, directly printing scripts and stylesheets rather than using the enqueue system, and encourages developers to avoid these practices to prevent breaking other plugins, themes or WordPress itself. The presentation aims to make developers aware of these issues and how to develop code that is more considerate of other code on the site.
This document describes how to build a Jabber bot that can process Twitter messages serialized as XMPP messages. It provides instructions on setting up the necessary Ruby gems, creating a daemon to serialize tweets, writing specs to test the bot's behavior, and implementing the bot client to apply rules to messages. Sample Twitter messages in XMPP format are also included. The goal is to allow others to build their own bot armies that can process tweets and perform actions.
The document discusses how to make a website social using Facebook social plugins. It describes various Facebook social plugins like the login button, registration button, like button, and comments that can be easily integrated into a website with one or two lines of code. Integrating these plugins allows users to login, register, like content, and comment using their Facebook profiles. This increases user engagement and grows the social features of the site. [/SUMMARY]
How do you scale CSS for millions of visitors or thousands of pages? The slides from Nicole's presentation at Web Directions North in Denver will show you how to use Object Oriented CSS to write fast, maintainable, standards-based front end code. Adds much needed predictability to CSS so that even beginners can participate in writing beautiful, standards-compliant, fast websites.
We keep thinking we can write better CSS if we just try harder, that the next site will be clean and stay that way. This presentation shows that in fact, messy CSS is the direct result of our worst best-practices. We need to reexamine those assumptions with an eye to practicality and scalability as well as accessibility, standards, and fabulous design.
Creating Living Style Guides to Improve PerformanceNicole Sullivan
Refactoring Trulia’s UI with SASS, OOCSS, and handlebars. My slides from jsconf 2013. Lot's of yummy details about the performance improvements we were able to make.
Your website has out-of-control CSS bloat. You know your performance is being impacted, but how do you move from organic CSS with no particular architecture to something lighter, more logical, and easier to maintain? In this session, Nicole Sullivan and Stoyan Stefanov will show you how they improved the CSS at Facebook and Yahoo! Search. After this session you will know how to:
1. Use lint tools to automate and evaluate the efficiency of your CSS
2. Avoid the top 5 causes of CSS bloat, and
3. Speed up your site by making the UI code an order of magnitude smaller.
The JavaScript community is one of the most vibrant and fun groups I've ever been lucky enough to be a part of. Like any vibrant community, sometimes people don't play nicely. In this session, I will discuss what it has been like to be shy *and* be on twitter, mailing lists, and open source. I'll talk about my experiences consulting on massive CSS overhauls, and ways to defeat trolls -- including your own inner troll! I'll also share a timing attack for your brain that might just surprise you.
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective, Ajax ...Nicole Sullivan
The cascade is a poker game, but we've been playing our cards all wrong. Here Nicole suggests we stop trying to play to win to prevent code bloat, and simplify the cascade, using the order of the rulesets to allow overrides.
Nicole Sullivan and Stoyan Stefanov discuss their work optimizing CSS at Facebook and Yahoo!, As well as the state of CSS optimizations in the Alexa Top 1000 websites. What a mess!
From Velocity Conference and Texas-Javascript.
The document provides an overview of the Ruby programming language, discussing how everything in Ruby is an object, Ruby's dynamic typing, how classes are objects and class names are constants, modules and mixins, functional support through blocks and variables, and how procs and lambdas allow for deferred evaluation.
From Nicole's presentation at the CSS Summit. This is brand new research regarding efficient CSS selector design. Practicing the rules outlined here will make your CSS lean, your site fast, and your maintenance minimal. A beautiful combination for people concerned with building performance into their sites.
From Nicole's talk at JSConf.eu where she presented her wish list for the future of CSS. She presents a brand-new expanded syntax which allows for prototypes, mixins, and variables and explains how a preprocessor can be used today to achieve a richer language in older browsers.
This document discusses view resolution in Spring MVC. It describes several view resolvers included with Spring, including InternalResourceViewResolver, BeanNameViewResolver, and ResourceBundleViewResolver. It also covers configuring multiple view resolvers, binding form data, rendering messages, displaying errors, integrating Jakarta Tiles to layout pages, and creating Tiles controllers.
This document discusses responsive web design using CSS3 media queries. It begins with an introduction to media queries and their syntax for modifying CSS based on screen width. It then covers examples of adapting layouts, images, and other design elements for different screen sizes. Finally, it addresses techniques for supporting older browsers that do not support media queries, such as using conditional comments or JavaScript libraries.
Media queries allow CSS styles to be applied conditionally based on characteristics of the device viewing the content, like screen width. They provide a way to target specific devices and change layouts without changing the HTML. The document discusses the syntax of media queries, including using media types, features, expressions, and keywords. It provides examples of using media queries to load different style sheets or apply different CSS rules for different screen widths.
Many web sites have moved away from table based layouts to CSS. But what about the longer term? Is you CSS efficient, maintainable and modular? Find out about taking your CSS to the next level.
This document introduces the SC5 Styleguide, a tool for living styleguides that represents UI components with the exact same styles used in a project. It advocates an approach called Styleguide Driven Development where the styleguide is the focal point for front-end development. Key features include supporting CSS/SCSS/LESS, related variables, live editing, Angular directives, and easy integration. The styleguide allows for quick testing, building out new pages, and easier collaboration between designers and developers.
Given at CSS Dev Conf 2014 in New Orleans on October 14, 2014.
This full presentation written with Web Components can be viewed with Chrome 36+ online at http://andrewrota.github.io/web-components-and-modular-css-presentation/presentation/index.html#0.
The source of the presentation is available on GitHub: https://github.com/andrewrota/web-components-and-modular-css-presentation.
Universal JS Web Applications with React - Luciano Mammino - Codemotion Rome ...Luciano Mammino
This document outlines a presentation about building universal JavaScript web applications with React. It discusses:
1. The term "universal" in relation to JavaScript and some advantages it provides like maintainability and faster load times.
2. Building a frontend single page application with React and then making it universal by rendering on the server as well with React and Express.
3. Key aspects of universal apps like module sharing, routing, data retrieval and state management that work across client and server.
4. An example of building a universal JavaScript app with React called "Judo Heroes" that shows athlete data and profiles, using components, routing, data and building tools like Babel and Webpack.
Universal JavaScript Web Applications with React - Luciano Mammino - Codemoti...Codemotion
Since we started to see JS on the server side, the dream of developers has been to reduce the gap and the cost of switch between frontend/backend. Today with Node.js, React and a whole ecosystem of tools, this dream is becoming true! In this talk I am going to discuss about Universal (a.k.a. Isomorphic) JS and present some practical example regarding the major patterns related to routing, data retrieval and rendering. I will use Node, React, Webpack, Babel and React Router and give you a series of example to get you started easily with this new technology trend.
Presentations includes following topics :-
Introduction of ReactJS.
Component workflow.
State management and useful life-cycles.
React hooks.
Server Side Rendering.
The document discusses trends toward browser-based, client-side development and simpler yet more powerful products. It describes building a web-based document viewer using the Accusoft Pegasus ASP.NET Imaging SDK. The application allows searching a document library and viewing documents. Code examples show creating search and view pages, loading a document into the viewer, and JavaScript for viewer controls.
The document discusses trends toward browser-based, client-side development and simpler yet more powerful products. It describes building a web-based document viewer using the Accusoft Pegasus ASP.NET Imaging SDK. The application allows searching a document library and viewing documents. Code examples show creating search and view pages, loading a document into the viewer, and JavaScript for viewer controls.
The document summarizes the FotoWeb 8.0 Selection Widget and Export functionality. The Selection Widget is an HTML widget that allows users to browse, search, and select assets from a FotoWeb DAM system within a third-party application without leaving that application. Selected assets can then be programmatically exported from FotoWeb at specified sizes using preset configurations. The widget and export processes involve embedding IFRAMEs, subscribing to selection and export events, and making API calls to retrieve assets and generate exported files.
The Structure of Web Code: A Case For Polymer, November 1, 2014Tommie Gannert
About using Polymer (http://polymer-project.org/) to achieve better structure of the frontend code than with other tools.
Part of the Dublin GDG Dev Fest.
WordPress Admin UI - Future Proofing Your Admin PagesBrandon Dove
The document provides instructions for future-proofing WordPress admin pages by following best practices for creating, styling, and extending them. It demonstrates how to create an admin menu item and page callback function, add basic HTML markup and form elements, display tabular data using list tables, and customize the page icon. The document recommends using the Settings API to build settings pages and enqueueing custom styles to add styling and high-DPI icons.
This document provides an overview of the BEM (Block Element Modifier) methodology for organizing CSS code. It discusses the concepts of blocks, elements, and modifiers. It also covers advantages like namespacing and shared UI language. Finally, it discusses tools and frameworks for BEM including BEMHTML, CSSO, Emmet, and inuit.css.
Angular server side rendering - Strategies & Technics Eliran Eliassy
Server Side Rendering (SSR) involves running and serving an Angular application from the server. This provides benefits like fast initial loading, SEO/crawlability since search engines can't run JavaScript. The document discusses SSR strategies like partial rendering and avoiding duplicate requests. It also covers challenges like unsupported features and outlines steps to implement SSR like generating a Universal module and rendering on the server with Express. SSR can improve performance but requires more complex setup and deployment.
This document is the HTML code for the upload page on the SlideShare website. It includes metadata, scripts, and styling to display the page content which encourages users to discover, share and present presentations, infographics and videos on the largest professional content sharing community. The page code provides options for users to upload, login or sign up for an account.
This document summarizes a workshop on React JS that covered topics like what React is, how to build components, manage state and data flow, and the component lifecycle. It began with introductions and an overview of React and its benefits like being declarative, component-based, and able to learn once and write anywhere. Key aspects of React like JSX, embedding expressions, specifying attributes and children were explained. Different types of components like class and functional were discussed. Examples were provided to illustrate props, state, and data flow. The document concluded by outlining what would be built in the workshop - a chatbot application - and next steps to explore like React router, Redux, and testing.
Salesforce Lightning is Salesforce's next-generation development framework for building applications. It uses a component-based approach where reusable UI components can be developed using JavaScript on the client-side and Apex on the server-side. Key advantages of the Lightning framework include its focus on components, improved performance through JSON data exchange, and an event-driven architecture. Developers can also leverage many pre-built Lightning components and tools for visual development to more quickly build apps.
Overview of the new frontend architecture used for the New Profile at LinkedIn.
Blog version of this slidedeck: https://engineering.linkedin.com/profile/engineering-new-linkedin-profile
Academy PRO: React native - building first scenesBinary Studio
This document provides an overview of building initial scenes in React Native, including setting up components, styles, state, props, file structure, and networking. It discusses common React Native components like View, Text, Image, ScrollView, ListView, and interaction components. It also covers more advanced topics such as maps, dates pickers, geolocation, cameras, and working with native iOS and Android modules.
This document discusses adding images to web pages in different ways:
1) Image maps allow different parts of an image to act as hyperlinks using the <IMG>, <MAP>, and <AREA> tags.
2) Images can be added as the background of a web page using the BACKGROUND attribute of the <BODY> tag.
3) Hands-on activities guide the creation of web pages that demonstrate image maps and background images.
Create president quotes web part using share point rest api and bootstrapRajkiran Swain
This document provides steps to create a President Quotes web part in SharePoint using the REST API and Bootstrap:
1. Create a list in SharePoint called "PresidentMessage" with columns to store description, image, and author details.
2. Add a Script Editor web part to a SharePoint page and include jQuery and Bootstrap scripts/styles.
3. Use the REST API and jQuery to retrieve the list data and dynamically build the UI within the centered div, displaying the image, description, and author for each item.
Similar to Building the Media Block in ReactJS (20)
Let’s admit it, the tools for writing CSS aren’t very advanced. For the most part, the people who write tools don’t know about CSS and the people who know about CSS don’t write tools. Quite a conundrum!
In this session, you’ll learn about good tools that can make development faster and maintenance easier. We’ll also talk a bit about where we can go from here.
What tools do we need as sites are becoming more and more complex? We need to get beyond tools whose primary goal is to avoid hand-coding and realize that, as our techniques for writing CSS become more powerful, our tools can too! Session will include:
* Validators
* Preprocessors
* Finding dead rules
* Linting
* CSS3 gradient tools
* Performance measurement tools
* Unit testing
You've got a sneaking suspicion that design impacts performance. What next? Your engineers know nothing about design and your designers know nothing about performance. How can you get everyone on the same page? Which design flaws must you absolutely avoid? How do engineers slow designs with poor CSS? This presentation covers the best practices in design and OO CSS for fast, maintainable sites.
* Abstraction
* Flexibility
* Grids
* Location dependent styles
Velocity Conference, 2009
This document discusses object-oriented CSS (OOCSS) as an evolution of CSS that makes it more powerful. OOCSS involves creating reusable CSS objects rather than page-specific rules, setting good global defaults, abstracting reusable elements, separating container and content, and using multiple classes to simulate inheritance. This allows for more scalable, maintainable and performant CSS code. Some best practices of OOCSS include creating semantic object classes like .heading rather than styling specific elements directly. The document provides examples of OOCSS principles and their benefits.
Nicole Sullivan gives a presentation on designing fast websites. She discusses why performance matters, how websites have grown more complex over time, and how poor performance can negatively impact businesses. She provides several best practices for optimizing websites, such as creating reusable components, using consistent styles, making modules transparent, optimizing images through sprites and compression, avoiding non-standard fonts and using columns instead of rows.
The 7 Habits of Exceptional Performance discusses techniques for optimizing website performance. It recommends flushing the buffer early, using GET requests for AJAX, preloading components, avoiding filters, measuring performance metrics, and balancing new features with performance improvements. High performance should be baked into the development process from the start. Key metrics to track include page weight, response time, and HTTP requests.
The document discusses 20 additional best practices for improving web performance beyond the original 14 recommendations from YSlow. It covers techniques like flushing the buffer early, splitting components for post-loading, preloading necessary assets, reducing unnecessary DOM elements, optimizing images through techniques like converting to smaller file formats and using CSS sprites, and designing for mobile performance. The document provides examples and case studies to illustrate the recommendations and cites additional resources on web performance.
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).
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfNeo4j
Presented at Gartner Data & Analytics, London Maty 2024. BT Group has used the Neo4j Graph Database to enable impressive digital transformation programs over the last 6 years. By re-imagining their operational support systems to adopt self-serve and data lead principles they have substantially reduced the number of applications and complexity of their operations. The result has been a substantial reduction in risk and costs while improving time to value, innovation, and process automation. Join this session to hear their story, the lessons they learned along the way and how their future innovation plans include the exploration of uses of EKG + Generative AI.
Coordinate Systems in FME 101 - Webinar SlidesSafe Software
If you’ve ever had to analyze a map or GPS data, chances are you’ve encountered and even worked with coordinate systems. As historical data continually updates through GPS, understanding coordinate systems is increasingly crucial. However, not everyone knows why they exist or how to effectively use them for data-driven insights.
During this webinar, you’ll learn exactly what coordinate systems are and how you can use FME to maintain and transform your data’s coordinate systems in an easy-to-digest way, accurately representing the geographical space that it exists within. During this webinar, you will have the chance to:
- Enhance Your Understanding: Gain a clear overview of what coordinate systems are and their value
- Learn Practical Applications: Why we need datams and projections, plus units between coordinate systems
- Maximize with FME: Understand how FME handles coordinate systems, including a brief summary of the 3 main reprojectors
- Custom Coordinate Systems: Learn how to work with FME and coordinate systems beyond what is natively supported
- Look Ahead: Gain insights into where FME is headed with coordinate systems in the future
Don’t miss the opportunity to improve the value you receive from your coordinate system data, ultimately allowing you to streamline your data analysis and maximize your time. See you there!
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.
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.
Kief Morris rethinks the infrastructure code delivery lifecycle, advocating for a shift towards composable infrastructure systems. We should shift to designing around deployable components rather than code modules, use more useful levels of abstraction, and drive design and deployment from applications rather than bottom-up, monolithic architecture and delivery.
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
How RPA Help in the Transportation and Logistics Industry.pptxSynapseIndia
Revolutionize your transportation processes with our cutting-edge RPA software. Automate repetitive tasks, reduce costs, and enhance efficiency in the logistics sector with our advanced solutions.
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.
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/
Implementations of Fused Deposition Modeling in real worldEmerging Tech
The presentation showcases the diverse real-world applications of Fused Deposition Modeling (FDM) across multiple industries:
1. **Manufacturing**: FDM is utilized in manufacturing for rapid prototyping, creating custom tools and fixtures, and producing functional end-use parts. Companies leverage its cost-effectiveness and flexibility to streamline production processes.
2. **Medical**: In the medical field, FDM is used to create patient-specific anatomical models, surgical guides, and prosthetics. Its ability to produce precise and biocompatible parts supports advancements in personalized healthcare solutions.
3. **Education**: FDM plays a crucial role in education by enabling students to learn about design and engineering through hands-on 3D printing projects. It promotes innovation and practical skill development in STEM disciplines.
4. **Science**: Researchers use FDM to prototype equipment for scientific experiments, build custom laboratory tools, and create models for visualization and testing purposes. It facilitates rapid iteration and customization in scientific endeavors.
5. **Automotive**: Automotive manufacturers employ FDM for prototyping vehicle components, tooling for assembly lines, and customized parts. It speeds up the design validation process and enhances efficiency in automotive engineering.
6. **Consumer Electronics**: FDM is utilized in consumer electronics for designing and prototyping product enclosures, casings, and internal components. It enables rapid iteration and customization to meet evolving consumer demands.
7. **Robotics**: Robotics engineers leverage FDM to prototype robot parts, create lightweight and durable components, and customize robot designs for specific applications. It supports innovation and optimization in robotic systems.
8. **Aerospace**: In aerospace, FDM is used to manufacture lightweight parts, complex geometries, and prototypes of aircraft components. It contributes to cost reduction, faster production cycles, and weight savings in aerospace engineering.
9. **Architecture**: Architects utilize FDM for creating detailed architectural models, prototypes of building components, and intricate designs. It aids in visualizing concepts, testing structural integrity, and communicating design ideas effectively.
Each industry example demonstrates how FDM enhances innovation, accelerates product development, and addresses specific challenges through advanced manufacturing capabilities.
Mitigating the Impact of State Management in Cloud Stream Processing SystemsScyllaDB
Stream processing is a crucial component of modern data infrastructure, but constructing an efficient and scalable stream processing system can be challenging. Decoupling compute and storage architecture has emerged as an effective solution to these challenges, but it can introduce high latency issues, especially when dealing with complex continuous queries that necessitate managing extra-large internal states.
In this talk, we focus on addressing the high latency issues associated with S3 storage in stream processing systems that employ a decoupled compute and storage architecture. We delve into the root causes of latency in this context and explore various techniques to minimize the impact of S3 latency on stream processing performance. Our proposed approach is to implement a tiered storage mechanism that leverages a blend of high-performance and low-cost storage tiers to reduce data movement between the compute and storage layers while maintaining efficient processing.
Throughout the talk, we will present experimental results that demonstrate the effectiveness of our approach in mitigating the impact of S3 latency on stream processing. By the end of the talk, attendees will have gained insights into how to optimize their stream processing systems for reduced latency and improved cost-efficiency.
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)
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Building the Media Block in ReactJS
1. BUILDING THE MEDIA
BLOCK IN REACTJS
the API is an interface that needs to be designed
https://www.flickr.com/photos/darpi/212323100/in/photolist-jLdg7-4zEiwa-nwFCR-cZVtBE-4NHtnv-7daytd-pce3y-4NH3fh-5TLS72-58aMX7-58aMVN-a3826y-gVDVKr-8DRhUB-nEdkNf-6tnApQ-
fqJRqv-4NMHx7-7fUPoM-cNu2W-8etirE-o7PZA-wsB4L-7ABatu-8LyEF5-7iEjwY-3faCd1-9Gn1fF-4qYRms-JUKbE-7B97bb-69Uer5-5DQMzG-f4ZgsG-7TvUJp-5zyhEh-65naZh-nBkNs-5eCcAF-sErjv-4ePHGY-6kV1Q4-
nxWYX-dpGR5-55vgqd-5scyot-5t7uJJ-nLQn5y-9Njbu-79B4aw
13. I <3 HTML, WHY USE
REACT?
❖ html consistency (modal debugging)
❖ smaller api (fewer breaking changes)
❖ don’t need to go everywhere a component
was used to update the dom if it changes
❖ lightning fast dom updates when data
changes
❖ not managing those updates manually
❖ simpler APIs (tabs example)
16. WHAT ARE THE ELEMENTS
OF A REACT INTERFACE
❖ Elements
❖ Attributes
❖ Nested children
❖ Data
Sounds a lot like html, right?
17. HOW DO YOU MAKE A
MEDIA COMPONENT?
in React
Code
var Media = React.createClass({
!
});
18. SO THEN, HOW WOULD
YOU USE IT?
It’s kind of like HTML, it’s called jsx
<Media>
My very first React component!
</Media>
19. BUT, WE NEED TO EXPORT
the Media component, so it can be used in other files
module.exports = {
Media: Media
};
20. DESCRIBE IT WITH A
RENDER FUNCTION
This tells the browser what HTML to render.
var Media = React.createClass({
render: function () {
return (
<p>
{this.props.children}
</p>
);
}
});
just render a paragraph, for now
tell React where to
render children
22. LET’S TRY IT!
Sweet, this is gonna be rad.
<Media>
This text is our component’s children!
</Media>
!
!
!
!
<p>
This text is our component’s children!
</p>
23. LET’S TRY IT!
Sweet, this is gonna be rad.
<Media>
This text is our component’s children!
</Media>
!
!
!
!
<p>
This text is our component’s children!
</p>
When React renders that
component we get this html
24. LET’S TRY IT!
Sweet, this is gonna be rad.
<Media>
This text is our component’s children!
</Media>
!
!
!
!
<p>
This text is our component’s children!
</p>
{this.props.children}
When React renders that
component we get this html
25. NOT VERY USEFUL, RIGHT?
You'd never use react to render a simple paragraph because it
already understands <p> tags, you can just use them!
26. LET’S BUILD AN ACTUAL
MEDIA BLOCK
Step 1:Add the left image
27. SO, WHAT DID WE TRY
FIRST?
https://www.flickr.com/photos/mstewartphotography/6195718653/in/photolist-aruFip-3Ym2sP-d5ipmU-61ivfM-2SmfSo-eMWyyv-7Tx3yN-p7xVZN-5LExX5-dG1RK2-86LsMW-6TDV5Y-9isMj1-cJuUm-4v2NE-
amKvge-61TfaY-61PcSp-61nGEd-86FasK-qrz8VS-4bGoKp-77DPsN-7NeZKn-botCkn-8vpoEE-oTAKWV-5Sz1Fv-a5oF29-86Hf14-aS9vmZ-a8M5q6-a8Mh8k-7AKzoA-86HcPz-61HM17-7AFRcK-a8LXht-5c5LvE-a8LZXX-61Hb8A-
fJgHuw-86LhDq-86Lmch-3jzdZ-5mYENE-8UMWoM-bx1iUr-p9jsSa-a865Ji
https://www.flickr.com/photos/mstewartphotography/6195718653/in/photolist-aruFip-3Ym2sP-d5ipmU-61ivfM-2SmfSo-eMWyyv-7Tx3yN-p7xVZN-5LExX5-dG1RK2-86LsMW-6TDV5Y-9isMj1-cJuUm-4v2NE-
amKvge-61TfaY-61PcSp-61nGEd-86FasK-qrz8VS-4bGoKp-77DPsN-7NeZKn-botCkn-8vpoEE-oTAKWV-5Sz1Fv-a5oF29-86Hf14-aS9vmZ-a8M5q6-a8Mh8k-7AKzoA-86HcPz-61HM17-7AFRcK-a8LXht-5c5LvE-a8LZXX-61Hb8A-
fJgHuw-86LhDq-86Lmch-3jzdZ-5mYENE-8UMWoM-bx1iUr-p9jsSa-a865Ji
28. TONS OF ATTRIBUTES
What could go wrong? ;)
https://www.flickr.com/photos/ilo_oli/5856288807/in/photolist-jpnSsc-bp1mTF-iC3JNn-feu2hV-feJdEw-dCsd6V-aQmwUk-qJvwYx-qKHp7N-qKJtpL-pMFnAC-9XxWkr-qKJEV1-q6hte9-qZZXHG-q6hp8d-qKHchA-qKJt8U-bp1mv2-
b6LSWT-bKfSon-kxWCNt-b6LNN8-b8Vpk6-ehScwd-c5CMgq-qKJcqw-r3iaXK-pMieGe-9ZUFNi-aD4zaE-fDwLBF-9Vv1CF-kzarYi-9ovVLy-rVLApS-fDwKki-b5sxAg-fskG7P-bUUme1-bKgdD6-c5CMiW-a1wsSP-4u7U5a-dtv95k-dtvKP6-
dtBtwJ-dtvrRR-dtBm2s-abcAqR
29. CREATE A SOURCE
ATTRIBUTE
We’ll use it in our render function to set the src of the image
<Media leftImageSource='http://placehold.it/50x50'>
Media block content
</Media>
React props are a
lot like HTML
attributes
31. SO, LET’S ADD AN HREF
ATTRIBUTE
<Media
leftImageSource='http://placehold.it/50x50'
leftImageHref='http://www.google.com'>
Media block content
</Media>
Our render function will
make this into a link
wrapper (if it is set)
35. WE NEED AN ALT
ATTRIBUTE
<Media
leftImageSource='http://placehold.it/50x50'
leftImageHref='http://www.google.com'
leftImageAlignment='middle'
leftImageAlt="profile photo">
Media block content
</Media>
Our render function will make
this into an alt attribute on the
<img> tag
37. WE NEED A HEIGHT AND
WIDTH
<Media
leftImageSource='http://placehold.it/50x50'
leftImageHref='http://www.google.com'
leftImageAlignment='middle'
leftImageAlt="profile photo"
leftImageHeight="50px"
leftImageWidth="50px">
Media block content
</Media>
Explicit height and width
allow the browser to do a
single rendering/painting
pass
38. SET THE GUTTER BETWEEN
IMAGE AND CONTENT
with the spacing attribute
<Media
leftImageSource='http://placehold.it/50x50'
leftImageHref='http://www.google.com'
leftImageAlignment='middle'
leftImageAlt="profile photo"
leftImageHeight="50px"
leftImageWidth="50px"
leftImageSpacing="medium">
Media block content
</Media>
For when the 10px default
spacing isn’t right, like a tiny
icon with text
40. FOR EXAMPLE, IT’S
RESPONSIVE
via the stacksize (breakpoint) attribute
<Media
leftImageSource='http://placehold.it/50x50'
leftImageHref='http://www.google.com'
leftImageAlignment='middle'
leftImageAlt="profile photo"
leftImageHeight="50px"
leftImageWidth="50px"
leftImageSpacing="medium"
stackSize='medium'>
Media block content
</Media>
stack size puts the image
above the text at the
breakpoint
41. THIS IS GETTING
OUT OF HAND!
But we forgot something, the media block can have a right
image
42. ADD THE RIGHT IMAGE
PROPERTIES
This is out of control, we are going the wrong way!
<Media
leftImageSource='http://placehold.it/50x50'
leftImageHref='http://www.google.com'
leftImageAlignment='middle'
leftImageAlt="profile photo"
leftImageHeight="50px"
leftImageWidth="50px"
rightImageSource='http://placehold.it/50x50'
rightImageHref='http://www.google.com'
rightImageAlignment='middle'
rightImageAlt="profile photo"
rightImageHeight="50px"
rightImageWidth="50px"
rightImageSpacing="medium"
bodyAlignment='middle'
stackSize='medium'>
Media block content
</Media>
right image
props
43. PROS/CONS
❖ It’s very explicit, we know
what each thing does
What works?
❖ We're basically recreating
html in React, yuck! (we
shouldn’t make a new
different alt attribute!
❖ We have image properties
and media properties all
mixed up
❖ We have too many
properties
What doesn’t work?
44. SO, WHAT DID WE TRY
NEXT?
https://www.flickr.com/photos/mstewartphotography/6195718653/in/photolist-aruFip-3Ym2sP-d5ipmU-61ivfM-2SmfSo-eMWyyv-7Tx3yN-p7xVZN-5LExX5-dG1RK2-86LsMW-6TDV5Y-9isMj1-cJuUm-4v2NE-
amKvge-61TfaY-61PcSp-61nGEd-86FasK-qrz8VS-4bGoKp-77DPsN-7NeZKn-botCkn-8vpoEE-oTAKWV-5Sz1Fv-a5oF29-86Hf14-aS9vmZ-a8M5q6-a8Mh8k-7AKzoA-86HcPz-61HM17-7AFRcK-a8LXht-5c5LvE-a8LZXX-61Hb8A-
fJgHuw-86LhDq-86Lmch-3jzdZ-5mYENE-8UMWoM-bx1iUr-p9jsSa-a865Ji
https://www.flickr.com/photos/mstewartphotography/6195718653/in/photolist-aruFip-3Ym2sP-d5ipmU-61ivfM-2SmfSo-eMWyyv-7Tx3yN-p7xVZN-5LExX5-dG1RK2-86LsMW-6TDV5Y-9isMj1-cJuUm-4v2NE-
amKvge-61TfaY-61PcSp-61nGEd-86FasK-qrz8VS-4bGoKp-77DPsN-7NeZKn-botCkn-8vpoEE-oTAKWV-5Sz1Fv-a5oF29-86Hf14-aS9vmZ-a8M5q6-a8Mh8k-7AKzoA-86HcPz-61HM17-7AFRcK-a8LXht-5c5LvE-a8LZXX-61Hb8A-
fJgHuw-86LhDq-86Lmch-3jzdZ-5mYENE-8UMWoM-bx1iUr-p9jsSa-a865Ji
45. JSON ALL THE THINGS
https://www.flickr.com/photos/bike/4797449644/in/photolist-8iWbD3-5HPWhF-QyKg5-eVYyjt-3meRNg-5HPW94-4HwYMz-utah8-3qvXS-aqsJtx-eyQK4T-42P9p1-7Th995-5oKgDS-5mJEJe-9bt9At-4zbwwo-8vDr8Z-7konhy-
BhrJ9-5zHQ7E-bobveq-DmrMg-3qvNs-5HPW1P-qtLJmp-5ZCPcW-9QuNBj-5HUdgS-9thCcq-6FmTKV-7QgAua-6DZyzu-gkukag-apwsgp-8hWccC-4U7EX6-pfaKPb-hvM3q-asXuSH-at18RL-asXuDV-asXuC4-9ys6M7-phFVSp-
dkdPkb-86toqn-dzVg-zVaLA-cDsK7N
47. JSON IN THE MEDIA
passed in as another property
<Media
images={images}
bodyAlignment='middle'
stackSize='medium'>
Media block content
</Media>
48. JSON IN THE MEDIA
passed in as another property
<Media
images={images}
bodyAlignment='middle'
stackSize='medium'>
Media block content
</Media>
{curly braces} mean it’s a JavaScript
variable rather than a string
49. JSON IN THE MEDIA
passed in as another property
<Media
images={images}
bodyAlignment='middle'
stackSize='medium'>
Media block content
</Media>
json goes into the
images attribute
{curly braces} mean it’s a JavaScript
variable rather than a string
50. What works? What doesn’t work?
PROS/CONS
❖ abstraction of passing in
JSON means all the code
isn't in the same place
❖ weird to have JSON in the
middle of what looks like
markup
❖ still reinventing html
attributes of an <img> tag
❖ cleaner separation of
concerns (media takes care
of media stuff, rather than
the properties of its
children)
51. WHAT DID WE DO NEXT?
https://www.flickr.com/photos/mstewartphotography/6195718653/in/photolist-aruFip-3Ym2sP-d5ipmU-61ivfM-2SmfSo-eMWyyv-7Tx3yN-p7xVZN-5LExX5-dG1RK2-86LsMW-6TDV5Y-9isMj1-cJuUm-4v2NE-
amKvge-61TfaY-61PcSp-61nGEd-86FasK-qrz8VS-4bGoKp-77DPsN-7NeZKn-botCkn-8vpoEE-oTAKWV-5Sz1Fv-a5oF29-86Hf14-aS9vmZ-a8M5q6-a8Mh8k-7AKzoA-86HcPz-61HM17-7AFRcK-a8LXht-5c5LvE-a8LZXX-61Hb8A-
fJgHuw-86LhDq-86Lmch-3jzdZ-5mYENE-8UMWoM-bx1iUr-p9jsSa-a865Ji
https://www.flickr.com/photos/mstewartphotography/6195718653/in/photolist-aruFip-3Ym2sP-d5ipmU-61ivfM-2SmfSo-eMWyyv-7Tx3yN-p7xVZN-5LExX5-dG1RK2-86LsMW-6TDV5Y-9isMj1-cJuUm-4v2NE-
amKvge-61TfaY-61PcSp-61nGEd-86FasK-qrz8VS-4bGoKp-77DPsN-7NeZKn-botCkn-8vpoEE-oTAKWV-5Sz1Fv-a5oF29-86Hf14-aS9vmZ-a8M5q6-a8Mh8k-7AKzoA-86HcPz-61HM17-7AFRcK-a8LXht-5c5LvE-a8LZXX-61Hb8A-
fJgHuw-86LhDq-86Lmch-3jzdZ-5mYENE-8UMWoM-bx1iUr-p9jsSa-a865Ji
52. PARSING CHILDREN
We decided to try including the images as children
https://www.flickr.com/photos/i-am-mclovin/16535518502/in/photolist-rcbRyA-nshV4n-eAaqTz-bCfUFZ-jH4tBF-pctQQD-qNmfZS-eT3GMZ-bTJsji-N8LkW-iCxgoA-7JDTp2-mPGu7V-dV4m7G-igpkaV-dRobZv-mnUN9i-igoYgJ-bCzBBi-
f9tdxa-oMiWTE-b6LMzz-rcTY6S-dYq12b-qUh6hV-f6oFCx-pmwC9Z-hNLucH-moYnBt-6uGwja-aRrBm4-mPGGDB-igp6YC-f8b3QR-igpkXB-igoY3C-o62zzh-iC3JNn-9217QQ-D3JPG-pcHyUy-pprMfU-igoJAg-hgRxSL-pqomg9-
ahQDpD-4LkbKg-hNLcDy-igoJb8-9STs34
53. PARSING CHILDREN
better, everything is normal html! But, it has a few drawbacks
<Media>
<img src='http://placehold.it/50x50'
href='http://www.google.com' alignment='middle'
alt="profile photo" height="50px" width="50px" >
<p>My media content</p>
<img src='http://placehold.it/50x50'
href='http://www.google.com' alignment='middle'
alt="profile photo" height="50px" width="50px" >
</Media>
54. What works? What doesn’t work?
PROS/CONS
❖ The images and body
content need to be in a very
particular order, it seems
weird to expose that to the
user
❖ Violates the "build
components you can use
without understanding CSS”
principle
❖ Normal HTML
❖ Facebook does it this way
55. WHAT *ELSE* DOESN’T
WORK?
❖ We could loop over children and reorder them, but how do
we tell the difference between content images and media
images?
❖ We were still discovering React, and didn't know how to loop
over children yet
❖ React provides handy error messages and property validations.
We would lose out on that if we made the images children
❖ Facebook's images aren't optional, so it's a different case
56. SO, WHAT DID WE TRY
NEXT?
https://www.flickr.com/photos/mstewartphotography/6195718653/in/photolist-aruFip-3Ym2sP-d5ipmU-61ivfM-2SmfSo-eMWyyv-7Tx3yN-p7xVZN-5LExX5-dG1RK2-86LsMW-6TDV5Y-9isMj1-cJuUm-4v2NE-
amKvge-61TfaY-61PcSp-61nGEd-86FasK-qrz8VS-4bGoKp-77DPsN-7NeZKn-botCkn-8vpoEE-oTAKWV-5Sz1Fv-a5oF29-86Hf14-aS9vmZ-a8M5q6-a8Mh8k-7AKzoA-86HcPz-61HM17-7AFRcK-a8LXht-5c5LvE-a8LZXX-61Hb8A-
fJgHuw-86LhDq-86Lmch-3jzdZ-5mYENE-8UMWoM-bx1iUr-p9jsSa-a865Ji
https://www.flickr.com/photos/mstewartphotography/6195718653/in/photolist-aruFip-3Ym2sP-d5ipmU-61ivfM-2SmfSo-eMWyyv-7Tx3yN-p7xVZN-5LExX5-dG1RK2-86LsMW-6TDV5Y-9isMj1-cJuUm-4v2NE-
amKvge-61TfaY-61PcSp-61nGEd-86FasK-qrz8VS-4bGoKp-77DPsN-7NeZKn-botCkn-8vpoEE-oTAKWV-5Sz1Fv-a5oF29-86Hf14-aS9vmZ-a8M5q6-a8Mh8k-7AKzoA-86HcPz-61HM17-7AFRcK-a8LXht-5c5LvE-a8LZXX-61Hb8A-
fJgHuw-86LhDq-86Lmch-3jzdZ-5mYENE-8UMWoM-bx1iUr-p9jsSa-a865Ji
58. FIRST, WE MAKE OUR
IMAGES
var leftImage = <img src='http://placehold.it/
50x50' href='http://www.google.com'
alignment='middle' alt="profile photo"
height="50px" width="50px">;
!
var rightImage = <img src='http://placehold.it/
50x50' href='http://www.google.com'
alignment='middle' alt="profile photo"
height="50px" width=“50px">;
59. NEXT, WE MAKE OUR
MEDIA OBJECT
this looks similar to the JSON example
<Media
leftImage={leftImage}
rightImage={rightImage}
bodyAlignment='middle'
stackSize='medium'>
Media block content
</Media>
60. NEXT, WE MAKE OUR
MEDIA OBJECT
this looks similar to the JSON example
<Media
leftImage={leftImage}
rightImage={rightImage}
bodyAlignment='middle'
stackSize='medium'>
Media block content
</Media>
left and right images are
passed into attributes
61. YOU CAN EVEN WRITE IT
like this if you really want to
<Media
leftImage={<img src='http://placehold.it/50x50'
href='http://www.google.com' alignment='middle'
alt="profile photo" height="50px" width="50px">}
bodyAlignment='middle'
stackSize='medium'>
Media block content
</Media>
image component directly in
the attribute property
62. What works? What doesn’t work?
PROS/CONS
❖ HTML inside an attribute (in
the latter example) is a bit
odd, though it does have
advantages.
❖ React passes default html
attributes in to the resulting
img tag, so we don't have to
do anything special with
height, width, src, aria and alt.
❖ We separate concerns and
the image takes care of it's
own properties
❖ No need to parse content
63. WHAT *ELSE* DOESN’T
WORK?
❖ href will be passed through. So our image will have an href
attribute. I like clean html, and that feels weird to me!
<div class="media">
<a href="styleguide.pivotal.io">
<img href="styleguide.pivotal.io" />
...
Yuck!
64. WE CONSIDERED GOING
BACK TO PROPERTIES…
but decided we should make our own <img> wrapper
<Media leftImageHref="styleguide.pivotal.io">
to property or not to property?
65. SO, WHAT DID WE TRY
NEXT?
https://www.flickr.com/photos/mstewartphotography/6195718653/in/photolist-aruFip-3Ym2sP-d5ipmU-61ivfM-2SmfSo-eMWyyv-7Tx3yN-p7xVZN-5LExX5-dG1RK2-86LsMW-6TDV5Y-9isMj1-cJuUm-4v2NE-
amKvge-61TfaY-61PcSp-61nGEd-86FasK-qrz8VS-4bGoKp-77DPsN-7NeZKn-botCkn-8vpoEE-oTAKWV-5Sz1Fv-a5oF29-86Hf14-aS9vmZ-a8M5q6-a8Mh8k-7AKzoA-86HcPz-61HM17-7AFRcK-a8LXht-5c5LvE-a8LZXX-61Hb8A-
fJgHuw-86LhDq-86Lmch-3jzdZ-5mYENE-8UMWoM-bx1iUr-p9jsSa-a865Ji
https://www.flickr.com/photos/mstewartphotography/6195718653/in/photolist-aruFip-3Ym2sP-d5ipmU-61ivfM-2SmfSo-eMWyyv-7Tx3yN-p7xVZN-5LExX5-dG1RK2-86LsMW-6TDV5Y-9isMj1-cJuUm-4v2NE-
amKvge-61TfaY-61PcSp-61nGEd-86FasK-qrz8VS-4bGoKp-77DPsN-7NeZKn-botCkn-8vpoEE-oTAKWV-5Sz1Fv-a5oF29-86Hf14-aS9vmZ-a8M5q6-a8Mh8k-7AKzoA-86HcPz-61HM17-7AFRcK-a8LXht-5c5LvE-a8LZXX-61Hb8A-
fJgHuw-86LhDq-86Lmch-3jzdZ-5mYENE-8UMWoM-bx1iUr-p9jsSa-a865Ji
66. CUSTOM IMAGE
COMPONENT
And another component was born…
https://www.flickr.com/photos/eltonharding/522073772/in/photolist-N8LkW-dLnt39-dsdYRQ-qcf3KQ-rgojpc-dsdWxA-dRxje9-iAgtmB-aaTYBU-mgGFrk-d3TMAf-opZhPw-nbi6ut-gMDt1W-adGAGZ-j8HqHK-gAt6ec-mc944B-
nEMWpG-oQkVQ4-qR9xvi-gSVfC5-oUurRb-9jGTJD-nWUZza-e5NeHJ-aTYLCT-dTTRha-rp3zLC-qn7i8t-hQxDrG-9qcih5-sn5TTi-9aQfXm-nsgfeC-niFxPL-dRxjy7-9Ry7C3-p8VRa4-noA5cx-oovJdV-kLSLxL-dpgFWM-rhZ9Ri-
dRxkm3-9qResk-kGDeJb-bprRNw-oCC5tt-oCX7iY
67. GOAL: OUTPUTS A SIMPLE
<IMG> TAG
but won't pass through attributes
that don't make sense like href
68. STEP 1: CREATE THE IMAGE
COMPONENT
var Image = React.createClass({
!
});
69. STEP 2: EXPORT THE IMAGE
the same way we did the Media component
module.exports = {Image};
70. STEP 3: GET ITS PROPERTIES
and render an image
var Image = React.createClass({
render() {
var {href, src, children, className, ...other} = this.props;
!
var image = <img {...other} src={src} className={classes}>;
!
return href ? <a {...{href}}>{image}</a> : image;
}
});
71. STEP 3: GET ITS PROPERTIES
and render an image
var Image = React.createClass({
render() {
var {href, src, children, className, ...other} = this.props;
!
var image = <img {...other} src={src} className={classes}>;
!
return href ? <a {...{href}}>{image}</a> : image;
}
});
get the properties we need
72. STEP 3: GET ITS PROPERTIES
and render an image
var Image = React.createClass({
render() {
var {href, src, children, className, ...other} = this.props;
!
var image = <img {...other} src={src} className={classes}>;
!
return href ? <a {...{href}}>{image}</a> : image;
}
});
get the properties we need
build the image from our properties
73. STEP 3: GET ITS PROPERTIES
and render an image
var Image = React.createClass({
render() {
var {href, src, children, className, ...other} = this.props;
!
var image = <img {...other} src={src} className={classes}>;
!
return href ? <a {...{href}}>{image}</a> : image;
}
});
get the properties we need
build the image from our properties
if we have a link, wrap the image in an <a> tag
74. STEP 4: MAKE IT
RESPONSIVE
by handling the responsive boolean
var Image = React.createClass({
render() {
var {responsive, href, src, children, className, ...other} = this.props;
!
var image = <img {...other} src={src}>;
return href ? <a {...{href}}>{image}</a> : image;
}
});
75. STEP 4: MAKE IT
RESPONSIVE
by handling the responsive boolean
var Image = React.createClass({
render() {
var {responsive, href, src, children, className, ...other} = this.props;
!
var image = <img {...other} src={src}>;
return href ? <a {...{href}}>{image}</a> : image;
}
});
get the responsive property
76. STEP 4: MAKE IT
RESPONSIVE
and setting the img-responsive class if the boolean is true
var Image = React.createClass({
render() {
var {responsive, href, src, children, className, ...other} = this.props;
!
var classes = classnames({'img-responsive': responsive}, className);
!
!
!
!
!
!
!
var image = <img {...other} src={src} className={classes}>{children}</img>;
return href ? <a {...{href}}>{image}</a> : image;
}
});
77. STEP 4: MAKE IT
RESPONSIVE
and setting the img-responsive class if the boolean is true
var Image = React.createClass({
render() {
var {responsive, href, src, children, className, ...other} = this.props;
!
var classes = classnames({'img-responsive': responsive}, className);
!
!
!
!
!
!
!
var image = <img {...other} src={src} className={classes}>{children}</img>;
return href ? <a {...{href}}>{image}</a> : image;
}
});
add this class
if this evaluates
to true
78. STEP 4: MAKE IT
RESPONSIVE
and setting the img-responsive class if the boolean is true
var Image = React.createClass({
render() {
var {responsive, href, src, children, className, ...other} = this.props;
!
var classes = classnames({'img-responsive': responsive}, className);
!
!
!
!
!
!
!
var image = <img {...other} src={src} className={classes}>{children}</img>;
return href ? <a {...{href}}>{image}</a> : image;
}
});
add this class
if this evaluates
to true
then, put the class
on the image
87. OUR “AH-HA” MOMENT
Users are still needing to specify too many things to get this
component to work, they might as well just write html!
88. SO, WHAT DID WE DO
NEXT?
https://www.flickr.com/photos/mstewartphotography/6195718653/in/photolist-aruFip-3Ym2sP-d5ipmU-61ivfM-2SmfSo-eMWyyv-7Tx3yN-p7xVZN-5LExX5-dG1RK2-86LsMW-6TDV5Y-9isMj1-cJuUm-4v2NE-
amKvge-61TfaY-61PcSp-61nGEd-86FasK-qrz8VS-4bGoKp-77DPsN-7NeZKn-botCkn-8vpoEE-oTAKWV-5Sz1Fv-a5oF29-86Hf14-aS9vmZ-a8M5q6-a8Mh8k-7AKzoA-86HcPz-61HM17-7AFRcK-a8LXht-5c5LvE-a8LZXX-61Hb8A-
fJgHuw-86LhDq-86Lmch-3jzdZ-5mYENE-8UMWoM-bx1iUr-p9jsSa-a865Ji
https://www.flickr.com/photos/mstewartphotography/6195718653/in/photolist-aruFip-3Ym2sP-d5ipmU-61ivfM-2SmfSo-eMWyyv-7Tx3yN-p7xVZN-5LExX5-dG1RK2-86LsMW-6TDV5Y-9isMj1-cJuUm-4v2NE-
amKvge-61TfaY-61PcSp-61nGEd-86FasK-qrz8VS-4bGoKp-77DPsN-7NeZKn-botCkn-8vpoEE-oTAKWV-5Sz1Fv-a5oF29-86Hf14-aS9vmZ-a8M5q6-a8Mh8k-7AKzoA-86HcPz-61HM17-7AFRcK-a8LXht-5c5LvE-a8LZXX-61Hb8A-
fJgHuw-86LhDq-86Lmch-3jzdZ-5mYENE-8UMWoM-bx1iUr-p9jsSa-a865Ji
89. ELEMENTS FTW
we can simplify our interface further
https://www.flickr.com/photos/rejik/14681743931/in/photolist-onnLY4-nPYfhm-ed6PWM-bvWmjA-mMGE1V-j88ToM-ngTbpk-nUg38a-9n1hgv-4KZr2Z-nucMef-dd5exw-9eyaqy-8QWK1i-eaTuFL-4RbvFX-7kiwo3-7NqP2a-4R1KYB-
mZEx1J-5iV12q-39v9f8-bqt2rx-7zvWs-9eyamJ-7JKZAh-hiwiDa-poG8fx-ehZRGj-684GeT-pPeQGL-efRP9f-icXKJY-aNxWqT-9niyKk-ouarpw-bmC5SK-7s5DNV-bqt3F8-bqsZ24-mZCLWp-86YqXk-e6ERub-bqtEL8-8K3pJf-
kik4tg-8yYivi-8fi3Ep-dVohpu-fzmggH
https://www.flickr.com/photos/rejik/14681743931/in/photolist-onnLY4-nPYfhm-ed6PWM-bvWmjA-mMGE1V-j88ToM-ngTbpk-nUg38a-9n1hgv-4KZr2Z-nucMef-dd5exw-9eyaqy-8QWK1i-eaTuFL-4RbvFX-7kiwo3-7NqP2a-4R1KYB-
mZEx1J-5iV12q-39v9f8-bqt2rx-7zvWs-9eyamJ-7JKZAh-hiwiDa-poG8fx-ehZRGj-684GeT-pPeQGL-efRP9f-icXKJY-aNxWqT-9niyKk-ouarpw-bmC5SK-7s5DNV-bqt3F8-bqsZ24-mZCLWp-86YqXk-e6ERub-bqtEL8-8K3pJf-
kik4tg-8yYivi-8fi3Ep-dVohpu-fzmggH
90. DESIGNERS ONLY USE 2
KINDS OF ALIGNMENT
❖ Traditional media with everything top aligned
!
!
!
❖ “Flag” component a la Harry Roberts middle aligns
91. WE MADE THESE TWO USE
CASES DEAD SIMPLE
❖ We changed the media component to default to top
alignment if nothing else was specified.
❖ We created the <flag> component
<Flag leftImage={refreshImage}>
refresh
</Flag>
92. What works? What doesn’t work?
PROS/CONS
❖ engineers don't always know
what the flag object is,
documentation and teaching
help
❖ with Flag and Media, we no
longer need to specify
alignment unless we want
something weird
93. ARE ANY OF THESE
WRONG?
No, absolutely not.
https://gist.github.com/stubbornella/e97662e4a197eb9a534a
101. GOOD DESIGN PRINCIPLES
❖ Many drawers -Tom O
❖ Set good defaults
❖ User shouldn’t need to understand CSS to use it
❖ Make tiny components with one job (same as CSS)
❖ Allow flexibility
❖ Prefer a complex implementation over a complex interface
what has worked for us
102. WHO ARE YOUR USERS?
component creators and maintainers, contributors, developers
building features, actual product users
https://www.flickr.com/photos/fabiansociety/16300828766/in/photolist-qQs1tQ-qAa8pJ-pVJmYw-qxNcH4-qAaDuJ-qSHJsr-5SDe5H-josG7R-dxrFDm-e6S4TN-fddCLi-po7JuN-d21PZN-ax7LAK-qBLEie-dEMphp-byfU17-nPjAPc-eZ7ooX-
ctHbf5-g5QFS-naVVhZ-cFgo6s-akEb2Q-qUQi3c-aGJ83i-627cGv-aRFFNx-nSyXpr-dyXFU7-aupkvk-buYgB2-nj7Xyv-jHSXR5-9eAqzK-eNqYdm-a4GaUk-qiFrdF-dy1QsG-bPqzrk-9dEUm7-n7cmgE-gJNeKz-nigszh-mi4QjT-s76Yxa-
103. USE ALL THE TOOLS IN
YOUR TOOLBOX
❖ Elements (built in and custom)
❖ Attributes (simple and objects)
❖ JSON
❖ Children