Love your libraries – Why libraries? – Teach me how to Bootstrap

View Github Repository Open presentation in a new window

ktzhu

See all presentation from ktzhu

Love your libraries – Why libraries? – Teach me how to Bootstrap

0 0

love-your-libs

Slide deck for a workshop on making the most of JavaScript libraries.

On Github ktzhu / love-your-libs

Love your libraries

Making the most of JavaScript libraries

JOUR 390 | Spring 2013

Katie Zhu +@ktzhu

The point

I will encourage you to develop the one of the three great virtues of a programmer:

laziness.

Overview

More specifically, today we'll cover:

How to leverage existing resources to simplify development

How to effectively Google and find these resources

How to read docs

How to Bootstrap

Prework

How'd it go?

Talk through some dos and don'ts for Googling effectively. List some libs, doc TK.

Why libraries?

What can they do?

Trick question.

Teach me how to Bootstrap

CSS + JS components

Styles are great, but there's more.

Components are better. Reusable bits of code to make your life easier.

↓

Tooltip

The markup

                                            <a href="#" data-toggle="tooltip" title="first tooltip">hover over me</a>

The JS

                                            $('#element').tooltip('toggle')

Modal

The markup

                                            
<!-- Button to trigger modal -->
<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>

<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>

Modal

The JS

                                            $('#myModal').modal(options)

Your choice

What Bootstrap plugins did you guys try? Any you want to tackle together?

Fire up that text editor.

We're going to write some code.

Some useful JS libraries

↓

Data viz

D3.js

Raphael JS

Processing.js

App frameworks (for later!)

Meteor

Backbone.js

Angular.js

Mobile

jQuery Mobile

Sencha Touch

xui

Utilities

Underscore.js

jQuery

Layout

Isotope (click me!)

Bootstrap

Let's get meta.

I made my presentation about JS libraries using a JS library.

Reveal.js

Thanks!

Any questions?