DrupalSouth 2014: Managing Complex Projects with Design Components

•

10 likes•3,368 views

This document discusses managing complex projects with design components. It introduces John Albin Wilkins as a senior front-end developer and provides some free resources he has created. It then discusses topics like web components, CSS specificity wars, goals of design components, file organization, deconstructing design components into parts and variants, and using semantic class names.

Technology

Managing Complex Projects
with Design Components!
John Albin Wilkins!
@JohnAlbin!
!

Senior Front-end Developer 
at Lullabot

John Albin Wilkins!
@JohnAlbin!
!

Senior Front-end Developer 
at Lullabot

Free Gifts From Me
★ Zen Grids 
zengrids.com!
★ Normalize.css for Sass/Compass 
github.com/JohnAlbin/normalize-scss!
★ Succinct theme for Colloquy (IRC for Mac) 
github.com/JohnAlbin/succinct-for-colloquy!
★ git-svn-migrate 
john.albin.net/git/git-svn-migrate!
★ Zen theme for Drupal 
drupal.org/project/zen

What is the WIFI
password again?
★ Network: DrupalSouth 2014!
★ Password: anzacDrupal

Where are we headed?
“Are you new to
front-end web development?
!

Here’s a secret:
no one else really knows
what they’re doing either.”
— Nicolas Gallagher

Where are we headed?
Web Components!
www.w3.org/TR/components-intro/!
css-tricks.com/modular-future-web-components/

Web Components!
“Hey… Web developers really like
templating systems.
We should implement that
natively in HTML.”
www.w3.org/TR/components-intro/!
css-tricks.com/modular-future-web-components/

Web Components!
<carousel>
<ohgod-ohgod-why-wont-my-client-listen-to-me-about-carousels>

www.w3.org/TR/components-intro/!
css-tricks.com/modular-future-web-components/

What can we learn 
from the future?
★ Reusable and repeatable components!
★ Self-contained design 
(included CSS only applies to its component)

CSS
Speciﬁcity Wars
.menu .item a:link {}!
.sidebar .menu .item a:link {}!
.page-37 .sidebar .menu .item a:link {}

CSS
Speciﬁcity Wars
.menu .item a:link {!
.sidebar & {!
.page-37 & {}!
}!
}

Overly generic class names
.title { }

.content { }!

.block .title { }

.block .content { }!

.node .title { }

.node .content { }!

.views .title { }

.views .content { }

What are!
Design Components?
★ “Component” is the same as…!
★ “Object” in OOCSS!
★ “Module” in SMACSS !
★ “Block” in BEM’s Block-Element-Modiﬁer!
★ “UI Pattern”

Design Component
One class == one consistent style

.navbar

.watermark
.button
.more-link

.side-nav
.bio

.tabs

Goals of!
Design Components
★ Reduce speciﬁcity!
★ Reduce applicability /
control the cascade!
★ Improve maintainability

On the meaning of
semantics
.omnomnomnom
!

is more semantic then!
!

.blaaagh

On the meaning of
semantics
Don’t name your class .blubadu-blubadu-blubadu-pphhffft

On the meaning of
semantics
★ Content semantics 
is handled by HTML5 elements
★ Let’s make our class names use
Design semantics
★ Make the class names meaningful
to the developers and designers

File organization =
ﬁrst 3 SMACSS Categories

Easy to ﬁnd your
components.

★ Inspect the DOM.!
★ Find the class on the design
component.!
★ Look for a ﬁle with that
name in the components
folder.

Deconstructing!
a design component
★ The component
★ Sub-parts
★ Variants
★ States

Component Variants
.menu .item a:link {}
.sidebar .menu .item a:link {}
.page-37 .sidebar .menu .item a:link {}

$Component Variants .menu__link {} .menu--sidebar__link {} .viking-ponycorn__link {}$

A simple
component
and a
variant
(all in one ﬁle)

$Deconstructing! a design component .the%component+ .the%component%%variant+ .the%component__sub%part+ .the%component.is%state+ + .the%component:hover+ + @media+all+{+.the%component+{}+}$

The “fugly” selector hack
Selector in DOM 
I couldn’t change
Class name I wish 
I could use in DOM

Thank you!
Follow me on the Twitterz.!
@JohnAlbin

What's hot

How to Build Custom WordPress Blocks

Morten Rand-Hendriksen

DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...

Jer Clarke

WordPress: A Designer's CMS

Chelsea Otakan

Use all the buzzwords

Jared Faris

Untangling spring week10

Derek Jacoby

Copass + Ruby on Rails = <3 - From Simplicity to Complexity

Augustin Riedinger

Working local

Melody Sharp Web Design

A slightly modified version of the talk I first presented at Smashing Conference, now presented at Fronteers 2012. (http://fronteers.nl/congres/2012) Use of image editors for creating web design mockups has worked until now, but responsive design is forcing us to find alternatives, as we can't simply create more mockups as we design for more screens. Have no fear, there is at least one method of replacing Photoshop for web design. Let's take a look at one of the most important aspects of this method: the creation of clear, semi-automated, self-updating style guides.

Style Guides Are The New Photoshop (Fronteers 2012)

Stephen Hay

This talk was first presented at Smashing Conference (http://smashingconf.com/). Use of image editors for creating web design mockups has worked until now, but responsive design is forcing us to find alternatives, as we can't simply create more mockups as we design for more screens. Have no fear, there is at least one method of replacing Photoshop for web design. Let's take a look at one of the most important aspects of this method: the creation of clear, semi-automated, self-updating style guides.

Style Guides Are The New Photoshop (Smashing Conference 2012)

Stephen Hay

Untangling spring week9

Derek Jacoby

Object Oriented CSS

Nicole Sullivan

CSS is hard. It’s a simple language, but getting it right and avoiding specificity hell can be a challenge if you don’t have the right framework to back you up. Especially in large scaling projects, you might start adding ID selectors here and !important properties there and the next thing you know you’ve backed yourself into a corner where even the smallest of UI changes will take hours to work out. Ew. Or how about this? Ever jump into a project and find that even the slightest markup change results in broken JavaScript AND sometimes even broken backend feature tests?! WTF. Ew. This talk will look at how taking a modular, object-oriented approach to CSS can turn frontend woes into frontend wins. We’ll examine modern CSS approaches like OOCSS, SMACSS, and BEM and demonstrate how they will help to not only decouple your CSS styles and reduce specificity conflicts, but how they will also help to decouple your CSS and HTML from your JavaScript and feature specs. Video from SEM.js November 2014: http://youtu.be/HoQ-QEusyS0

Decoupling the Front-end with Modular CSS

Julie Cameron

Responsive Design Workflow: Webshaped 2012

Stephen Hay

Why Node, Express and Postgres - presented 23 Feb 15, Talkjs, Microsoft Audit...

Calvin Tan

Webpack: What it is, What it does, Whether you need it

Mike Wilcox

Dangerous CSS

Mike Wilcox

How to not create an unbreakable Rails monolith

Bruno Almeida

Drupal Camp Manila 2014 - Theming with Zen

Japo Domingo

A bit of a different format for BathCamp in June. We’ll be cage fighting. No. Actually, it’s a sort of follow on from our previous BathCamp – a comparison of as many CMS systems as we can get people to talk about. Obviously any comparison of CMS system is heavily caveated with an “it depends…” but nonetheless we think it’ll be interesting to hear from people talking about the good, the bad and the ugly of the systems they use. The format of the talks will be “5 things I love about this CMS and 5 things I hate”, followed by time for questions and general CMS-like banter. We’ve got the following lined up: WordPress Drupal Expression Engine Plone PyroCMS Perch Umbraco Defacto

BathCamp #32 - CMS Smackdown! - Plone

Matt Hamilton

What is Object Oriented CSS?

Nicole Sullivan

What's hot (20)

How to Build Custom WordPress Blocks

DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...

WordPress: A Designer's CMS

Use all the buzzwords

Untangling spring week10

Copass + Ruby on Rails = <3 - From Simplicity to Complexity

Working local

Style Guides Are The New Photoshop (Fronteers 2012)

Style Guides Are The New Photoshop (Smashing Conference 2012)

Untangling spring week9

Object Oriented CSS

Decoupling the Front-end with Modular CSS

Responsive Design Workflow: Webshaped 2012

Why Node, Express and Postgres - presented 23 Feb 15, Talkjs, Microsoft Audit...

Webpack: What it is, What it does, Whether you need it

Dangerous CSS

How to not create an unbreakable Rails monolith

Drupal Camp Manila 2014 - Theming with Zen

BathCamp #32 - CMS Smackdown! - Plone

What is Object Oriented CSS?

Viewers also liked

New Adventures in Drupal Theming

John Albin Wilkins

Style Guide Driven Development: All Hail the Robot Overlords!

John Albin Wilkins

Rocking the Theme Layer

John Albin Wilkins

What's new in D7 Theming?

John 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.

Styleguide-Driven Development: The New Web Development

John Albin Wilkins

Our CSS sucks. We've been building sites for over a decade using crappy, ornamentation techniques and shoddy selectors. Our styles unintentional bleed across the site. Our stylesheets are fragile and unmaintainable and full of specificity landmines. Pandas wander alone in the wilderness. But there's no need to drown ourselves in beer. New technologies like Web Components and new techniques like OOCSS, SMACSS and BEM show us that planning before building can make our projects maintainable, easier to debug, and smaller with reduced CSS file sizes. This session will introduce the basic techniques for CSS layering and using design components, the heart of any front-end CSS project. We will also discuss CSS/Sass organization and tips to more easily implement these ideas.

Managing Complex Projects with Design Components - Drupalcon Austin 2014

John Albin Wilkins

Viewers also liked (6)

New Adventures in Drupal Theming

Style Guide Driven Development: All Hail the Robot Overlords!

Rocking the Theme Layer

What's new in D7 Theming?

Styleguide-Driven Development: The New Web Development

Managing Complex Projects with Design Components - Drupalcon Austin 2014

Similar to DrupalSouth 2014: Managing Complex Projects with Design Components

BP-9 Share Customization Best Practices

Alfresco Software

Once upon a time, there were css, js and server-side rendering

Andrea Giannantonio

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

The Fast And The Fabulous

Nicole Sullivan

Web Content Management Systems From A Designer's Perspective (Drupal Technica...

Chris Charlton

BADCamp 2012 -Beginner Best Practices

meghsweet

Our CSS sucks. We've been building sites for over a decade using crappy, ornamentation techniques and shoddy selectors. Our styles unintentional bleed across the site. Our stylesheets are fragile and unmaintainable and full of specificity landminds. Pandas wander alone in the wilderness. But there's no need to drown ourselves in beer. New techniques like OOCSS, SMACSS and BEM show us that planning before building can make our projects maintainable, easier to debug, and smaller with reduced CSS file sizes. This workshop will introduce the basic techniques for CSS layering and using design components, the heart of any front-end CSS project. We will also discuss Sass organization and tips to more easily implement these ideas.

SassConf: Managing Complex Projects with Design Components

John Albin Wilkins

The theme of your website has the capacity for beautiful, semantic markup...and also the hacky HTML soup. You can build a new theme by downloading a free theme and tearing out its guts--or you can learn how to become a theme surgeon. In this session you will learn two key techniques needed to build a successful theme: crime scene investigation (identifying Drupal page elements in your design files) and power tools for copy-cat theming (things you need to recreate your design using Drupal). From start to finish we will transform a design file into a Drupal theme. With special attention given to your all-important questions: how do I save time with grid-based design? Should I use Panels? How do I make this bit of stuff appear next to that bit? Yah, but how do I start? [This presentation was given at DrupalCon Chicago but the recording failed. Slides are available from http://www.slideshare.net/emmajane/forensic-theming-for-drupal] About The Presenter Emma Jane Hogbin is well known in the Drupal community for her engaging presentations and kickass theming book, Front End Drupal. She is currently working on her second book, Drupal: A user's guide which is due out shortly after DrupalCon. Through her training company, Design to Theme, emmajane has empowered thousands of people to create the Drupal site of their dreams. Intended audience Small business site builders who partner with graphic designers but have no idea how to make Drupal look like a design file. Intermediate themers who start with a free Drupal theme that looks "close" to the final site and then start hacking to make their theme. The audience currently does not use base themes and are frustrated at how complicated all of the code is. They are looking for shortcuts and some quick-fix solutions to make theming faster and more profitable. Questions answered by this session What are the key tools I need to use to make themeing Drupal easier? How can I make Drupal markup less yucky? Where should I start when building a new theme? Yeah, but how do I theme *that thing*? I want to see how you build a theme: show me! Presented at: http://london2011.drupal.org/conference/sessions/forensic-theming-key-techniques-building-effective-drupal-themes

Forensic Theming - DrupalCon London

Emma Jane Hogbin Westby

Alexander Blom Isle of Code Overview Some people consider responsive design to be cross-platform, and responsive design to be resizing for containers. However, this misses the distinction of fluid design & often leads to slow and bad programmatic implementations. This talk will cover the distinction and provide pointers on how to implement responsive apps that are also performant. Attendees should understand a differing view on how to build cross-platform apps, and the difference between fluid & responsive design. Target Audience Programmers, designers & cssers who think a single page with lots of media queries is a good idea. Five Things Audience Members Will Learn What is fluid design? The difference between responsive & fluid design Why are responsive designs often slow? How to implement responsive designs that are performant Bonus points to be revealed in talk!

Designing True Cross-Platform Apps

FITC

Taken from Future of Web Design (#FOWD), London 2015 Conference. http://futureofwebdesign.com/london-2015 Reports are in from Twitter, Medium, and the like; we can’t make full comps, use Photoshop, or even utter the phrase 'visual design' anymore. What’s a designer to do? Has our role evaporated? Fear not! Dan Mall will help redefine the tasks of the modern day designer in light of the multi -device world that snuck up on us.

So…What Do I Make? (Dan Mall)

Future Insights

Too many responsive websites fall into the "move the sidebars around" trap and end up looking the same as any other responsive site. By combining the CSS of Zen Grids and the smart markup of the Zen 5 theme, you can create a stellar, unique responsive design for your website with ease. Zen has always been a popular starting point for building Drupal themes, but the new Zen 5 has been re-written from the ground-up with updated best practices including HTML5, Modernizr integration, Normalize, IE conditional classes, responsive layouts, and, best of all, Sass and Compass integration. Zen Grids is an all new project, independent from the Zen theme. The Zen Grids system reinvents the flexible, but complicated CSS layout method in old versions of the Zen theme, transforming it into a radically simplified process using the power of Sass. Where traditional grid systems (like 960.gs) often don't scale to match a responsive design's requirements, Zen Grids makes it incredibly easy to create amazing responsive layouts in just a couple lines of code.

Creating Responsive Drupal Sites with Zen Grids and the Zen 5 Theme

Acquia

How to Build a Bespoke Page Builder in WordPress

Gerald Glynn

Front End Development Automation with Grunt

Ladies Who Code

Spark is an initiative led by Acquia's Office of the CTO under Dries Buytaert, the Drupal project lead. We take a holistic look at Drupal's competition and design and implement features to help close the gaps. One big gap that has consistently held Drupal adoption back is that of the out-of-the-box content authoring experience. Hand-typing HTML like it's 1994, previews that aren't actually previews, and interfaces that are unusable on a mobile device all present big challenges for those coming to Drupal. While all of these problems have numerous workarounds in contrib, Spark's goal is to improve the Drupal product itself to eliminate this friction innately, so site builders can spend less time smoothing out rough edges and more easily focus on what they came to Drupal to do: build their actual sites. :) Spark is both a Drupal distribution and a set of discrete modules for both Drupal 7 and Drupal 8 (in many cases, Drupal 8 core) which can enhance the user experience for your site's content authors, including: Mobile Friendly Navigation Toolbar In-Place Editing Responsive Preview WYSIWYG editing Improved Accessibility Redesigned Administration Theme ...and more! This talk will focus on demonstrating these new features and explain how site builders can take advantage of them, as well as talk about what the next areas of focus for the Spark team will be for Drupal 9 and beyond.

Spark: Authoring Experience++ in Drupal 7, 8, and Beyond

Angela Byron

Intro to html5 Boilerplate

Michael Enslow

BP-7 Share Customization Best Practices

Alfresco Software

WordCamp Sheffield 2014 Theme Workflow Presentation

Jonny Allbut

Drupal Presentation for CapitalCamp 2011: Features Driven Development

Mediacurrent

Atomic Design - An Event Apart San Diego

Brad Frost

The handout and video are also available for this presentation. http://munich2012.drupal.org/program/sessions/evaluating-base-themes http://munich2012.drupal.org/sites/default/files/slides/basethemes-handout-munich_1.pdf One of these themes is not like the other: Mothership, Zen, Omega, Bartik, Fusion. Since writing my first book, Front End Drupal, Drupal base themes have matured significantly. Some of these base themes have evolved to the point of having the learning curve of a theming engine rather than a set of preset markup defaults. In this session we'll explore the base theme ecosystem. You'll get a biased view of how I evaluate base themes and which themes come out on top for the "themer experience". You'll find out why there can be no single base theme to meet the needs of every themer and why the base theme you're using might not be right for you. Bring your questions (and your flame thrower) as we romp through the valley of Drupal base themes.

Evaluating Base Themes

Emma Jane Hogbin Westby

Web components, so close!

Aleks Zinevych

Similar to DrupalSouth 2014: Managing Complex Projects with Design Components (20)

BP-9 Share Customization Best Practices

Once upon a time, there were css, js and server-side rendering

The Fast And The Fabulous

Web Content Management Systems From A Designer's Perspective (Drupal Technica...

BADCamp 2012 -Beginner Best Practices

SassConf: Managing Complex Projects with Design Components

Forensic Theming - DrupalCon London

Designing True Cross-Platform Apps

So…What Do I Make? (Dan Mall)

Creating Responsive Drupal Sites with Zen Grids and the Zen 5 Theme

How to Build a Bespoke Page Builder in WordPress

Front End Development Automation with Grunt

Spark: Authoring Experience++ in Drupal 7, 8, and Beyond

Intro to html5 Boilerplate

BP-7 Share Customization Best Practices

WordCamp Sheffield 2014 Theme Workflow Presentation

Drupal Presentation for CapitalCamp 2011: Features Driven Development

Atomic Design - An Event Apart San Diego

Evaluating Base Themes

Web components, so close!

Recently uploaded

Automating Google Workspace (GWS) & more with Apps Script

wesley chun

Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...

Neo4j

Three things you will take away from the session: • How to run an effective tenant-to-tenant migration • Best practices for before, during, and after migration • Tips for using migration as a springboard to prepare for Copilot in Microsoft 365 Main ideas: Migration Overview: The presentation covers the current reality of cross-tenant migrations, the triggers, phases, best practices, and benefits of a successful tenant migration Considerations: When considering a migration, it is important to consider the migration scope, performance, customization, flexibility, user-friendly interface, automation, monitoring, support, training, scalability, data integrity, data security, cost, and licensing structure Next Wave: The next wave of change includes the launch of Copilot, which requires businesses to be prepared for upcoming changes related to Copilot and the cloud, and to consolidate data and tighten governance ShareGate: ShareGate can help with pre-migration analysis, configurable migration tool, and automated, end-user driven collaborative governance

Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff

sammart93

Scaling API-first – The story of a global engineering organization Ian Reasor, Senior Computer Scientist - Adobe Radu Cotescu, Senior Computer Scientist - Adobe Apidays New York 2024: The API Economy in the AI Era (April 30 & May 1, 2024) ------ Check out our conferences at https://www.apidays.global/ Do you want to sponsor or talk at one of our conferences? https://apidays.typeform.com/to/ILJeAaV8 Learn more on APIscene, the global media made by the community for the community: https://www.apiscene.io Explore the API ecosystem with the API Landscape: https://apilandscape.apiscene.io/

Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe

apidays

Real Time Object Detection Using Open CV

Khem

In this session, we will delve into strategic approaches for optimizing knowledge management within Microsoft 365, amidst the evolving landscape of Copilot. From leveraging automatic metadata classification and permission governance with SharePoint Premium, to unlocking Viva Engage for the cultivation of knowledge and communities, you will gain actionable insights to bolster your organization's knowledge-sharing initiatives. In this session, we will also explore how to facilitate solutions to enable your employees to find answers and expertise within Microsoft 365. You will leave equipped with practical techniques and a deeper understanding of how there is more to effective knowledge management than just enabling Copilot, but building actual solutions to prepare the knowledge that Copilot and your employees can use.

Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...

Drew Madelung

Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024

The Digital Insurer

Partners Life - Insurer Innovation Award 2024

The Digital Insurer

Imagine a world where information flows as swiftly as thought itself, making decision-making as fluid as the data driving it. Every moment is critical, and the right tools can significantly boost your organization’s performance. The power of real-time data automation through FME can turn this vision into reality. Aimed at professionals eager to leverage real-time data for enhanced decision-making and efficiency, this webinar will cover the essentials of real-time data and its significance. We’ll explore: FME’s role in real-time event processing, from data intake and analysis to transformation and reporting An overview of leveraging streams vs. automations FME’s impact across various industries highlighted by real-life case studies Live demonstrations on setting up FME workflows for real-time data Practical advice on getting started, best practices, and tips for effective implementation Join us to enhance your skills in real-time data automation with FME, and take your operational capabilities to the next level.

From Event to Action: Accelerate Your Decision Making with Real-Time Automation

Safe Software

Join our latest Connector Corner webinar to discover how UiPath Integration Service revolutionizes API-centric automation in a 'Quote to Cash' process—and how that automation empowers businesses to accelerate revenue generation. A comprehensive demo will explore connecting systems, GenAI, and people, through powerful pre-built connectors designed to speed process cycle times. Speakers: James Dickson, Senior Software Engineer Charlie Greenberg, Host, Product Marketing Manager

Connector Corner: Accelerate revenue generation using UiPath API-centric busi...

DianaGray10

Discord is a free app offering voice, video, and text chat functionalities, primarily catering to the gaming community. It serves as a hub for users to create and join servers tailored to their interests. Discord’s ecosystem comprises servers, each functioning as a distinct online community with its own channels dedicated to specific topics or activities. Users can engage in text-based discussions, voice calls, or video chats within these channels. Understanding Discord Servers Discord servers are virtual spaces where users congregate to interact, share content, and build communities. Servers may revolve around gaming, hobbies, interests, or fandoms, providing a platform for like-minded individuals to connect. Communication Features Discord offers a range of communication tools, including text channels for messaging, voice channels for real-time audio conversations, and video channels for face-to-face interactions. These features facilitate seamless communication and collaboration. What Does NSFW Mean? The acronym NSFW stands for “Not Safe For Work,” indicating content that may be inappropriate for professional or public settings. NSFW Content NSFW content encompasses material that is sexually explicit, violent, or otherwise graphic in nature. It often includes nudity, profanity, or depictions of sensitive topics.

Understanding Discord NSFW Servers A Guide for Responsible Users.pdf

UK Journal

GenCyber Cyber Security Day Presentation

Michael W. Hawkins

How to Troubleshoot Apps for the Modern Connected Worker

ThousandEyes

As privacy and data protection regulations evolve rapidly, organizations operating in multiple jurisdictions face mounting challenges to ensure compliance and safeguard customer data. With state-specific privacy laws coming up in multiple states this year, it is essential to understand what their unique data protection regulations will require clearly. How will data privacy evolve in the US in 2024? How to stay compliant? Our panellists will guide you through the intricacies of these states' specific data privacy laws, clarifying complex legal frameworks and compliance requirements. This webinar will review: - The essential aspects of each state's privacy landscape and the latest updates - Common compliance challenges faced by organizations operating in multiple states and best practices to achieve regulatory adherence - Valuable insights into potential changes to existing regulations and prepare your organization for the evolving landscape

TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments

TrustArc

Data Cloud, More than a CDP by Matt Robison

Anna Loughnan Colquhoun

Tech Trends Report 2024 Future Today Institute.pdf

hans926745

This presentation explores the impact of HTML injection attacks on web applications, detailing how attackers exploit vulnerabilities to inject malicious code into web pages. Learn about the potential consequences of such attacks and discover effective mitigation strategies to protect your web applications from HTML injection vulnerabilities. for more information visit https://bostoninstituteofanalytics.org/category/cyber-security-ethical-hacking/

HTML Injection Attacks: Impact and Mitigation Strategies

Boston Institute of Analytics

Scaling API-first – The story of a global engineering organization

Radu Cotescu

What are drone anti-jamming systems? The drone anti-jamming systems and anti-spoof technology protect against interference, jamming, and spoofing of the UAVs. To protect their security, countries are beginning to research drone anti-jamming systems, also known as drone strike weapons. The anti-jam and anti-spoof technology protects against interference, jamming and spoofing. A drone strike weapon is a drone attack weapon that can attack and destroy enemy drones. So what is so unique about this amazing system?

What Are The Drone Anti-jamming Systems Technology?

Antenna Manufacturer Coco

Strategies for Landing an Oracle DBA Job as a Fresher

Remote DBA Services

Recently uploaded (20)

Automating Google Workspace (GWS) & more with Apps Script

Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...

Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff

Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe

Real Time Object Detection Using Open CV

Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...

Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024

Partners Life - Insurer Innovation Award 2024

From Event to Action: Accelerate Your Decision Making with Real-Time Automation

Connector Corner: Accelerate revenue generation using UiPath API-centric busi...

Understanding Discord NSFW Servers A Guide for Responsible Users.pdf

GenCyber Cyber Security Day Presentation

How to Troubleshoot Apps for the Modern Connected Worker

TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments

Data Cloud, More than a CDP by Matt Robison

Tech Trends Report 2024 Future Today Institute.pdf

HTML Injection Attacks: Impact and Mitigation Strategies

Scaling API-first – The story of a global engineering organization

What Are The Drone Anti-jamming Systems Technology?

Strategies for Landing an Oracle DBA Job as a Fresher

DrupalSouth 2014: Managing Complex Projects with Design Components

1. Managing Complex Projects with Design Components! John Albin Wilkins! @JohnAlbin! ! Senior Front-end Developer  at Lullabot

2. John Albin Wilkins! @JohnAlbin! ! Senior Front-end Developer  at Lullabot

3. Free Gifts From Me ★ Zen Grids  zengrids.com! ★ Normalize.css for Sass/Compass  github.com/JohnAlbin/normalize-scss! ★ Succinct theme for Colloquy (IRC for Mac)  github.com/JohnAlbin/succinct-for-colloquy! ★ git-svn-migrate  john.albin.net/git/git-svn-migrate! ★ Zen theme for Drupal  drupal.org/project/zen

4. What is the WIFI password again? ★ Network: DrupalSouth 2014! ★ Password: anzacDrupal

5. Where are we headed? “Are you new to front-end web development? ! Here’s a secret: no one else really knows what they’re doing either.” — Nicolas Gallagher

6. Where are we headed? Web Components! www.w3.org/TR/components-intro/! css-tricks.com/modular-future-web-components/

7. Web Components! “Hey… Web developers really like templating systems. We should implement that natively in HTML.” www.w3.org/TR/components-intro/! css-tricks.com/modular-future-web-components/

8. Web Components! <carousel> <ohgod-ohgod-why-wont-my-client-listen-to-me-about-carousels> www.w3.org/TR/components-intro/! css-tricks.com/modular-future-web-components/

9. What can we learn  from the future? ★ Reusable and repeatable components! ★ Self-contained design  (included CSS only applies to its component)

10. CSS Speciﬁcity Wars

11. CSS Speciﬁcity Wars .menu .item a:link {}! .sidebar .menu .item a:link {}! .page-37 .sidebar .menu .item a:link {}

12. CSS Speciﬁcity Wars .menu .item a:link {! .sidebar & {! .page-37 & {}! }! }

13. Overly generic class names .title { } .content { }! .block .title { } .block .content { }! .node .title { } .node .content { }! .views .title { } .views .content { }

14. Seemed like a good idea at the time.

15. What are! Design Components? ★ “Component” is the same as…! ★ “Object” in OOCSS! ★ “Module” in SMACSS ! ★ “Block” in BEM’s Block-Element-Modiﬁer! ★ “UI Pattern”

16. Design Component One class == one consistent style .navbar .watermark .button .more-link .side-nav .bio .tabs

17. Goals of! Design Components ★ Reduce speciﬁcity! ★ Reduce applicability / control the cascade! ★ Improve maintainability

18. On the meaning of semantics

19. On the meaning of semantics .omnomnomnom ! is more semantic then! ! .blaaagh

20. On the meaning of semantics Don’t name your class .blubadu-blubadu-blubadu-pphhffft

21. On the meaning of semantics ★ Content semantics  is handled by HTML5 elements ★ Let’s make our class names use Design semantics ★ Make the class names meaningful to the developers and designers

22. File organization = ﬁrst 3 SMACSS Categories

23. Simple Folder Structure

24. Easy to ﬁnd your components. ★ Inspect the DOM.! ★ Find the class on the design component.! ★ Look for a ﬁle with that name in the components folder.

25. styles.scss

26. Deconstructing! a design component ★ The component ★ Sub-parts ★ Variants ★ States

27. A simple component

28. A component with sub-parts

29. A component with sub-parts

30. Component Variants .menu .item a:link {} .sidebar .menu .item a:link {} .page-37 .sidebar .menu .item a:link {}

31. Component Variants .menu__link {} .menu--sidebar__link {} .viking-ponycorn__link {}

32. A simple component and a variant (all in one ﬁle)

33. A SMACSS “state”

34. A SMACSS “state”

35. Deconstructing! a design component .the%component+ .the%component%%variant+ .the%component__sub%part+ .the%component.is%state+ + .the%component:hover+ + @media+all+{+.the%component+{}+}

36. The “fugly” selector hack