10 Lessons learned as a UI Dev at HootSuite

@stevemynett

whoami

  • UI Developer at HootSuite
  • Worked there two years, tomorrow!
  • Worked as a designer and front end developer
  • Trained as a classical trombone player
  • Became a design/dev in 2005
  • Worked at agencies and products
  • On the Internet as @stevemynett
  • I like gif's!

HootSuite

HootSuite helps teams execute social media strategies across multiple social networks like Twitter, Facebook, LinkedIn and Google+ Pages from one secure web-based social relationship platform.

  • Just turned 5
  • Bootstrapped out of Invoke
  • Over 8 million users in 175 countries
  • Free, Pro and Enterprise Users
  • Around 500 Employees
  • Founded and based in Vancouver

HootSuite Dev

  • ~50 Active Developers
  • + Managers, Designers, Ops etc
  • 25 devs on web team, 2 UI dev's
  • Don't throw tickets "over the wall" to UI dev's
  • Engineering Areas: Web and Mobile Web (PHP, JS, HTML, CSS), iOS, Android, Services (Scala), Ops, Business Intelligence
  • Preferred, certified partner of Facebook, Twitter, LinkedIn and Google+
  • We're hiring!

A quick story

Maybe an allegory...

(Some) Traits of successful startups

  • Speed
  • Agility
  • Velocity
  • Keep on shipping!

To big to fail

  • Didn't have notification to spot issues in advance
  • When noticed, didn't have the agility to respond in time
  • A few narrow cuts 12-13 feet
  • Had been build with waterproof compartments
  • Too many flooded, unable to respond properly
  • Crew unable to deal with a situation that hadn't been anticipated

In Software Development

  • Anticipate obstacles with enough time to react
  • Build up tooling and resources to avoid obstacles
  • Component Systems to avoid leaking into unwanted areas

Back on track Steve...

Role of a UI Dev

The role of a UI developer is to develop and maintain the User Interfaces of a web application.

The UI Layer

HTML and CSS both have low barrier to entries. This means that every developer (php/js) should be adept at creating great UI's

Role of a UI Dev

A UI Dev be a domain expert and create an environment, systems, documentation and tooling that empower every developer to create UI's. Not simply be the one to create UI's.

Create an environment where developers can thrive

Every developer codes to the best of their ability given the context.

  • Provide tooling and training to improve ability
  • Change the context/constraints in which they are operating

UI Development is HTML & CSS

My HTML and CSS Skills are essentially the same they are two years ago

So what did this week look like for me?

  • Team Lead on a Strike Force
  • Lead the HTML&CSS Guild and another training session
  • Review all HTML/CSS code from every dev before it gets merged into master
  • New StrikeForce starting next week: read all the documentation, product spec's
  • Prepped this talk
  • Attended two training sessions, and another guild meeting
  • Prepped and delivered a Lightning Talk plus this presentation
  • All hands: Friday Demos
  • 1 hour a day on self education and reading

What other skills does a UI Dev need?

  • Web Performance
  • DevOps
  • Design
  • User Experience
  • Manager of One
  • Build tooling and automation (Grunt, Bash)
  • Build and improve release pipelines

What have I learned in the last two years?

10 Lessons learned as a
UI Dev at HootSuite

1. Everything you do will scale. Plan for it.

10 Lessons learned as a
UI Dev at HootSuite

Lessons learned as a
UI Dev at HootSuite

Lessons learned as a
Dev at HootSuite

Lessons learned at HootSuite

10x Rule

Can what I am doing, scale by a factor of 10

  • 10 times the amount of users
  • 10 times the amount of load
  • 10 times as many features
  • 10 times the amount of dev's working on it
  • We still have code in our app from Day 1

Don't let cracks start in your code

  • Inline and Internal styles or scripts
  • !important in css
  • poorly named variables, functions or classes
  • $('.class').css();

A stitch in time saves 9

Be proactive in the things you will need to do

  • Coding Standards
  • Documentation
  • Tooling
  • File naming conventions
  • Folder structure of your app

What is the total selector limit
for >IE9 in one file?

Document

Standardize

Evolve

Document

What are we documenting

  • Buttons, icons, fonts, colours
  • Our coding expectations for HTML/CSS
  • Our collective standards for production code
  • Our supported browsers and what features to they enable us to use
  • Reserved selectors and what are our naming conventions

The real goal

  • Facilitate sharing domain knowledge, education and expectations across a rapidly scaling department
  • Remove interruptions to flow for developers (those impeded, or those who need to provide assistance)
  • Decrease onboarding time necessary to make an independently productive developer
  • Remove the "fingerprint" of developers. Code should not be radically different based on who is writing it
  • We can not standardize what we do not know exists

Standardize

Why is Standardization important

  • 50+ dev's coding, each with different level of expertise and experience
  • Need to set expectations as to how we code, but also what features we use when we code. (eg Multiple Background images)
  • Allows for intentional adoption or deprecation of new features

How we standardize

Documentation!

  • Documentation is potentially a dirty word
  • Shouldn't document things that are rapidly changing
  • Must be worth the effort
  • For us: HTML, CSS and LESS Standards

Examples

  • General Formatting
  • Don't use ID's or !important
  • LESS: Use mixins, variables and nesting but not extends etc
  • Expectations for Commenting etc

An anecdote about modal windows

  • Building Interfaces is frustrating
  • Takes longer than it should
  • Existing styles are hard to track down
  • Even when they are easily discoverable, this breaks flow and happens frequently when building a UI
  • No guarantee that what is being copied is most recent or up to date version
  • This increases lines of code, time to build a UI and UI iterations in the application while decreasing maintainability

HootSuite Styleguide

Evolve

This is the fun stuff

Set the roadmap for where we are moving to. What techniques and features are adopting to build the best possible UI layer of our application.

  • It scales for our users and development team
  • Is it easy for other developers to work on and maintain
  • It uses the best possible technology and methodologies to accomplish this
  • Constantly Evolve

More on this later...

D.D.D.

Data Driven Development

What is the business case for what I am doing?

Doing things "because" is not good enough

  • Measure everything about your product
  • Develop product initiatives against metrics
  • e.g. "Redesigning the homepage will increase sign ups"
  • e.g. "Changing the way the error messages are being displayed in the billing form will increase successful payments"
  • Every change is validated with data

Everything is about the users

Everyone does something for a reason

The Design of Every Day Things - Don Normal

The closer you are to your users, the better your product will be

  • You are not your users
  • Designers: Watch your users interact with the product as much as possible. Test early and often to validate decisions.
  • Developers: Support Driven Development. Know the impact of your work

CSS Preprocessors

Blessing and curse...

A tool with pitfalls

  • You don't write LESS/SASS, you write CSS and preprocessors help you do this
  • Check your CSS before you commit!
  • Overnesting is the easiest thing to do
  • Tools should assist dev's to code faster and better by removing cognitive overhead of remembering vendor prefixes, hex colours, font stacks etc
  • Develop and maintain tools helps dev's be better devs
  • Put in the time to have a full mixin and variable library

Performance Matters

Everything added to the page decreases performance.

Why does Performance Matter?

  • +500ms = -20% in Google traffic and ad revenue
  • +100ms = -1% Amazon Sales
  • Smaller page size = +25% in Google maps traffic
  • Users expect 2 seconds (desktop)
  • After 3 seconds, 40% will abandon your site

How do we measure Web Performance?

  • RUM - Real User Monitoring
  • Google Analytics
  • Chrome Developer Tools
  • Google Page Speed Extension
  • WebPageTest.org

RUM

  • Real User Monitoring
  • You are not your users
  • Your users are not on LTE, or DSL or MBP
  • Measure your users, not yourself
"Dev's in NYC build better offline applications than dev's in SF"

Other options

  • Google Analytics - hardly perfect
  • Chrome Developer Tools - great for insight, not for RUM
  • Page Speed Extension - great for "the rules"
  • WebpageTest.org - not quite RUM, but pretty close.

High Performance Web Sites

  • Authored by Steve Sauders
  • 80% of the speed is on the front end, 20% on the server
  • Spend time focusing on the front end

14 Rules

  • Rule 1: Make fewer HTTP Requests
  • Rule 2: Use a Content Delivery Network
  • Rule 3: Add a Expires Header
  • Rule 4: Gzip Components
  • Rule 5: Put stylesheets at the top
  • Rule 6: Put scripts at the bottom
  • Rule 7: Avoid CSS Expressions

14 Rules

  • Rule 8: Make JS and CSS External
  • Rule 9: Reduce DNS Lookups
  • Rule 10: Minify JS and CSS
  • Rule 11: Avoid redirects
  • Rule 12: Remove Duplicate Scripts
  • Rule 13: Configure ETags
  • Rule 14: Make AJAX Cacheable

A closer look at easy wins

  1. Make fewer HTTP Requests
  2. Put stylesheets at the top, scripts at the bottom
  3. Minify JS & CSS
  4. All external CSS/JS
  5. Proper image compression

Make fewer HTTP Requests:

Why is this important?

  • CSS blocks rendering
  • JS blocks downloads
  • 4 assets per domain at a time

For each request:

  • DNS Lookup
  • Initial Connection
  • SSL Negotiation
  • Time to First Byte
  • Content Download

Images

Example

moto.oakley.com

“If you were data roaming on an iPhone, at $9 per Mb data roaming, that web page would cost me $785 to look at on my iPhone!”

The Weight of the Web

  • Average webpage size is 1.7MB
  • 1MB of that is images
  • Everything is on the rise

Why is this going up?

  • HiDPI
  • Design Trends
  • Irresponsible designers

Performance is a design feature

Images

As a dev, you are responsible for every thing put in front of the users.

Images

  1. File Formats
  2. Image Sprites
  3. Photo Shop Save for Web
  4. Post PSD Compression
  5. Responsive...FTW? WTF?
  6. HiDPI

1. Quick survey

  1. JPG vs. GIF
  2. PNG8 vs PNG24
  3. Alpha vs Beta Transparency
  4. WebP

2. Image Sprites

3. Save for Web

As good as it gets?

4. Image Alpha

Converts 24bit pngs with alpha transparency to 8bit pngs.

4. Image Optim

Crushes images even further

5. Responsive

6. HiDPI aka Retina

  • Super new technology
  • Opt in and not opt out
  • Don't presume that desktop = high speed
  • Careful with media queries for mobile

Everything happens for a reason

Computers and tech are logical

  • Browser bugs
  • Rendering bugs
  • Something "not working"
  • Statistical anomalies

Browser Support

Browser Support

As a web developer it is your job to ensure that your application/site works in the devices and browsers that customers use.

Don't hate on IE!

Scalable CSS

In the beginning

  • On the home page, in the side bar this component that should look like this
  • This component has some styles from global.css, typography.css and .home .sidebar .thing {}
  • Think component outwards as opposed to page inwards"
  • Not self contained so not portable
  • Styles bleed both in and out of component
  • This is easy and fast...to start...

.networkAvatar {}

.networkAvatarLink {}

What do we need for an Enterprise application

  • Confidence that components are highly portable
  • Confidence that my styles aren't affecting other areas of the app
  • Developers don't need to understand entire application to write UI code

HSCSS

HootSuite CSS (HSCSS) is our internal method of writing CSS based on principles prominent in OOCSS, SMCSS, Atomic CSS and BEM methodologies. It is based on three foundational principles:

  1. Everything is a component and UI's are built upon components within components within components
  2. Every component must be fully encapsulated with no external dependencies
  3. There are limited styles available on the global scope (buttons, general typography etc), everything else is a component

A component

  • A component is a self contained UI Element
  • The smaller they are, the easier they will be to write
  • Every component has a unique class name
  • There is no style bleed in or out of a component

The promise of knowing what you are working on isn't blowing up other areas of the application is more important than reusing your code.

– Nicholas Gallagher

Naming Conventions


### Components
.uniqueComponentName {
    ...

    .-descendantName {...}

    &.x-modifiedName {...}

    &.isState {...}

}
          

In Action

The HTML


<button class="btnSocial x-twitter">Sign up with Twitter</button>
          

Base LESS


.btnSocial {
    background: url("@{base-image}@{static_maps_auth_map_png}") no-repeat;
    border: none;
    border-radius: 3px;
    color: #FFF;
    cursor: pointer;
    font: bold 14px/40px @secondaryApplicationFont;
    margin: 0 0 5px 0;
    outline: none;
    padding: 0 15px 0 45px;
    position: relative; 
    text-align: left;
    width: 100%;
          

The Extenders


.btnSocial {
    ...

    &.x-twitter {
        background-color: @twitterBrandColour;
        background-position: -128px -120px;
        border-bottom: 3px solid darken(@twitterBrandColour, 7%);

        &:hover {
            background-color: lighten(@twitterBrandColour, 5%);
        }
        &:active {
            background-color: darken(@twitterBrandColour, 5%);
            border-top: 3px solid darken(@twitterBrandColour, 10%);
            border-bottom: none;
        }
    }
          

Condensed Overview


.btnSocial {
    ...

    &.x-twitter {...}
    &.x-facebook {...}
    &.x-google {...}

    @media @hidpi {...}
}    
          

Leave the code in a better state than you found it.

Do more than the minimum for every task

Open Source is more than software

Share what you know

Paul Irish Effect

Seek out opportunities to share what you have learned or are learning. The you and community will be better for it.

Participate in Community

a.k.a - I haven't interviewed for a job in 9 years!

Meetups

Weekend Reading!

Link Drop:

Thank You!

@stevemynett