NCDevCon 2015 Notes

Bootstrap, Chrome Toolbox and JS Promises

Part 1: Don't Get BootstrappedDown

Reading the Fine Print on Responsive Frameworks

Credit to: Aaron Ladage / aladage@degdigital.com / @aladage

To paraphrase Jeremy Keith:

The web has always been responsive…right up until developers and designers came along and broke it.

The web was "broken"for a really long time.

.container {
    width: 960px;
}

Most sites went one of two directions:

• They did nothing.
• They built a separate mobile site, and routed traffic using device or user agent sniffing (yuck).

Then, in 2010...

Ethan Marcotte coined the phrase "responsive Web Design"

• "One codebase to rule them all"
  • Fluid grids based on proportionate sizes and relative units
  • Flexible images
  • Media queries to detect and respond to the device’s viewport dimensions
• Also brought more prominence to the concepts of "mobile first" and progressive enhancement

In other words, even with smartphones IN THEIR HANDS, it took developers three years to go from this:

.container {
    width: 960px;
}

.container {
    max-width: 960px;
}

A bit about Frameworks...

OMG frameworks have everything!!!

We should use them for every site ever!!! (or NOT)

Yeah…don't.

Attack of the Clones

Attack of the Clones

"Creates a consistent design language and coding style."

Attack of the Clones

"Creates a consistent design language and coding style."

Attack of the Clones

"Creates a consistent design language and coding style."

Attack of the Clones

"Creates a consistent design language and coding style."

Attack of the Clones

"Creates a consistent design language and coding style."

Maybe a little too consistent?

The Right Tool for the job

• Certain tools are better for certain situations than others.
• A tool that can do everything pretty well isn't always better than a tool that can do one thing really well.
• (agreed)

Next few slides are maintained for discussion. I personally disagree with the author.

The Right Tool for the job

The Right Tool for the job

no answer.

Moving on:

Choose Your Framework LikeYou'd Choose Your Spouse

Choose Your Framework LikeYou'd Choose Your Spouse

Choose Your Framework LikeYou'd Choose Your Spouse

Perhaps more importantly, whathappens when your framework itself is refactored?

Choose Your Framework LikeYou'd Choose Your Spouse

Bootstrap 1/2:

<div class="row">
    <div class="span4">...</div>
    <div class="span8">...</div>
</div>

Choose Your Framework LikeYou'd Choose Your Spouse

Bootstrap 3:

<div class="row">
    <div class="col-xs-6 col-md-4">...</div>
    <div class="col-xs-12 col-sm-6 col-md-8">...</div>
</div>

Choose Your Framework LikeYou'd Choose Your Spouse

Choose Your Framework LikeYou'd Choose Your Spouse

What to do differently:

• Architect your application today like your framework will change tomorrow.
• If you're using a preprocessor like SASS or LESS, consider extending Bootstrap, rather than using its provided classes.
• This keeps your classes more semantic and human-readable, and you're not quite as locked into the framework if things go wrong.

Choose Your Framework LikeYou'd Choose Your Spouse

What to do differently:

Chrome DevTools

Jared Siirila

siirila.github.io/devTools_talk

Chrome Channels

Design

drop

elements

drag

and

to

rearrange

When editing almost any string containing a number in the Elements panel, the arrow keys can be used to increment/decrement the value

This works in suprising places, such as on Hex values

Hold the shift key to increment/decrement by 10 with the arrow keys

Hold the alt key to increment/decrement by .1 with the arrow keys

Color Picker

When using the color picker:

• click the color box,
• then click the page
• if you move the mouse over the page a magnifying glass will appear that allows you to pick a specific pixel’s color

Shift+click on a color in the sidebar to switch between color formats (rgb, hex, hsl)

Select colors from the site's color palate

Preserve Log

Keeps the log between full page navigation. An option exists for this in both the Network panel and the Console

XHR Instant Replay!

Right click on any XHR request in the Network panel to have the option to replay that request

Show/Hide columns in the Network Panel