NCDevCon 2015 Notes


Bootstrap, Chrome Toolbox and JS Promises

Pete Lombardo / pete.lombardo@jhu.edu

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.

Almost every website in 2005:

.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;
}

To this:

.container {
    max-width: 960px;
}

A bit about Frameworks...

OMG frameworks have everything!!!

bloody mary

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

Bootstrap buttons

Attack of the Clones

"Creates a consistent design language and coding style."

Bootstrap

Attack of the Clones

"Creates a consistent design language and coding style."

Criticue

Attack of the Clones

"Creates a consistent design language and coding style."

Fixr

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)

HOWEVER:

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

The Right Tool for the job

all features

The Right Tool for the job

some features

What about CDN's?

no answer.

Moving on:


Choose Your Framework Like
You'd Choose Your Spouse

Choose Your Framework Like
You'd Choose Your Spouse

whathappens_01

Choose Your Framework Like
You'd Choose Your Spouse

whathappens_02

Perhaps more importantly, what
happens when your framework itself is refactored?

Choose Your Framework Like
You'd Choose Your Spouse

Bootstrap 1/2:

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

Choose Your Framework Like
You'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 Like
You'd Choose Your Spouse

Mark Otto

Choose Your Framework Like
You'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 Like
You'd Choose Your Spouse

What to do differently:

extending

Chrome DevTools

Jared Siirila

siirila.github.io/devTools_talk

Chrome Channels

Channel Description
Chrome icon Stable Standard released version. Major updates every 6 weeks.
Chrome icon Beta One step ahead of stable. Major updates every 6 weeks.
Chrome icon Dev First tested version. Updated 2-3 times per week.
Chrome canary icon Canary Bleeding edge. Released daily. Untested and could be broken.

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)

Chrome Canary icon

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

Matthew Eash @mujimu http://bit.ly/control-your-async