SlideShare a Scribd company logo
1 of 73
Download to read offline
Striking a
Balance
 Finding middle ground in
 Front–End Development




                      http://flickr.com/photos/marcusjb/2813736862/
Hi. I’m Nathan Smith, a designer and
 front-end developer @ Viewzi.com
http://viewzi.tv/?dl=viewzi101




      Viewzi 101 – Intro Video
       (Learn more about Viewzi: www.viewzi.tv or www.viewzi.com)
Who am I, really?
– Expectant father! :)

– Master of Divinity*

– Published author

– Started Godbit.com

– Created 960.gs

– ENTJ Personality

* A few classes left, finishing up online.
Designers vs.
Developers
Stereotypical perceptions

                      ?



http://flickr.com/photos/iamaaronmartin/2858991878/   http://nbc.com/chuck/
In reality, more collaborative




http://flickr.com/photos/tbisaacs/2849275119/
But still quite competitive!
           Steve Brewer          Travis Isaacs
              Developer          Designer




                    http://flickr.com/photos/tbisaacs/2871685626/
Front-End Developers are like midfielders,
  balancing in between offense and defense.




We ensure that designers get the glory, and the
server-side guys can stick to what they do best.
“Inverse, Multi-Headed Hydra”
In the world of web-development,
there are many “dragons” sharing
the same public facade: ASP.NET,
ColdFusion, Java, Perl, PHP, Ruby,
Python, etc. To render in a browser,
all data has to pass through HTML.

Front-end isn’t a bad place to be. :)

                         http://santi.elfwood.com/hydra.jpg.html
(Best Viewed In)


Life used to be so much
simpler. But nowadays...
Striking a Balance: Middle Ground in Front-End Development
New Challenger!
Gotta catch ‘em all! o_O;




      http://www.flickr.com/photos/avalonstar/2822957764/
In order to keep
pace with change:



     We really need
     Interoperability
Web Standards
= 3 legged stool:

• HTML
• CSS
• JavaScript
Accessibility
falls flat if any of
these three are
done incorrectly.
Aaron
            Scheidies
            World Class
            Triathlete


Aaron recently received
his Doctorate of Physical
Therapy from University
of Washington.

He is a world record
holder amongst Olympic
distance triathletes.
Aaron was born with a
juvenile form of macular
degeneration called
Stargardt’s disease. His
vision is 20/400 vision,
while people with full
sight see 20/20.

Aaron is pictured here
setting a world record
with Ben Collins. They
rode a tandem bicycle,
ran and swam tethered.
He finished in 01:58:08 at
Dallas, TX on 10/14/07.
Retro-Fitted Accessibility




FAIL
Jeremy Keith – JS Expert
“Far from being something that is added to
a site, accessibility is something we need to
ensure isn’t removed. From that
perspective, the phrase ‘making a site
accessible’ isn’t accurate...”

“Accessibility is not a plug-in. It’s not
something that can be bolted onto a site
after the fact. So here’s what I’m proposing:
From now on, instead of talking about
making a site accessible, I’m going to talk
about keeping a site accessible. Join me.”
http://flickr.com/photos/kimli/2671627954/
http://flickr.com/photos/edtarwinski/226266619/
http://boston.com/bigpicture/2008/07/antiterrorism_exercises_in_chi.html
Striking a Balance: Middle Ground in Front-End Development
Striking a Balance: Middle Ground in Front-End Development
We are Passionate
                                                        About our Work
                                                        Photoshop vs. Fireworks

                                                        Mockups vs. Prototyping

                                                        Ruby on Rails vs. Django

                                                        Frameworks vs. Custom

                                                        Flash vs. Web Standards

                                                        Mac vs. PC - MS vs. Apple

                                                        Release Date for HTML5?

                                                        Jeff Croft vs. Everybody...
http://wikipedia.org/wiki/Ultimate_Wolverine_vs._Hulk
As the CS3 product cycle was
wrapping up, Adobe's user interface
designers started showing their ideas
for subsequent releases... I think my
initial reaction can be boiled down to
three letters: WTF? quot;Are you telling
me,quot; I asked, quot;that we're going to put
a huge, battleship-gray box into the
background on the Mac, as it is on
Windows? Why would we do that?quot;
http://blogs.adobe.com/jnack/2008/06/future_photoshop_ui.html
JavaScript is discussed intensely:
JavaScript is discussed intensely:




      (I happen to agree)
Yahoo! User
jQuery   Interface Library
jQuery   YUI
Ninjas master a variety of tools
                                           (not just one)




                                   Use a framework as an
                                   extension of yourself,
                                   not just as a crutch.
http://imdb.com/title/tt1046173/
Macro vs. Micro Semantics


 –   Correct tags                                   –   HTML / XHTML
 –   Accessibility                                  –   ID, class names
 –   Attribute usage                                –   Microformats
 –   Search Engines                                 –   Machine code




http://flickr.com/photos/leoffreitas/332360959/   http://flickr.com/photos/kennysarmy/2493464978/
Why Use a Version
Control System?              last code
                               commit
– Provides fall-back point

– Prevents over-writing

– Helps w. accountability

– Track change history

– Any operating system

– Schedule server tasks

–   Project management
                             http://flickr.com/photos/97607362@N00/1102286373/
Design by Commi ee
              aka Village Stew

http://flickr.com/photos/acidflask/128102331/
Several years ago in
                                              Yakima, Washington
                                              there was a church split
                                              over whether to use
                                              organ music in worship.

                                              Ironically, those who
                                              left to start a new
                                              church now have a far
                                              more extravagant
                                              organ than the original
                                              congregation ever did.

                                              They remain divided.
http://flickr.com/photos/ultrahi/102732191/
Mark Boulton: Designing by Community?


     “Designing by community I feel is different.
     There are a lot of people in the Drupal
     community. Many hundreds with a strong

                      Text
     voice. Providing very early releases—in
     fact, opening up the process completely—
     draws reaction. Within that reaction, if
     there is enough of it, we can identify
     trends. And I think trends in feedback is
     the key to Designing by Community.”
Leadership &
Team Dynamics


          http://wikipedia.org/wiki/Lion
Stephen P. Anderson
Why I’m Not a Manager

“When you have the
right people on your
team, what qualifies as
management is really
about creating a
platform from which
everyone can track
themselves. That, and
f i g u r i n g o u t h ow to
challenge folks so that
they are delivering their
best. This assumes a lot
of trust and faith in their
abilities, and not in your
ability to hand-hold.”
                                http://tinyurl.com/not-a-manager
“He who thinks he
leads, but has no
followers, is only
taking a walk.”

— John C. Maxwell
  21 Irrefutable Laws of Leadership




                                      http://flickr.com/photos/rantes/91307782/
John
                                   Maynard
                                   Keynes
                                   Father of
                                   Modern
                                   Economics




http://imdb.com/title/tt0268978/
Myers-Briggs Personalities
– Extraverted / Introverted
– Sensing      / iNtuitive
– Thinking     / Feeling
– Perceiving   / Judging

                http://humanmetrics.com/cgi-win/JTypes1.htm
                http://wikipedia.org/wiki/Myers-Briggs_Type_Indicator
SENSING                        INTUITIVE




                                                        INTROVERT
JUDGING




             ISTJ       ISFJ         INFJ   INTJ


             ISTP       ISFP         INFP   INTP
PERCEIVING




             ESTP       ESFP         ENFP   ENTP




                                                        EXTRAVERT
JUDGING




             ESTJ       ESFJ         ENFJ   ENTJ
             THINKING          FEELING      THINKING
ENTJ - “I’m really sorry you have to die.”
ENTJs have a natural tendency to marshall and direct.
This may be expressed with the charm and finesse of a
world leader or with the insensitivity of a cult leader.
The ENTJ requires little encouragement to make a
plan. One ENTJ put it this way... quot;I make these little
plans that really don't have any importance to anyone
else, and then feel compelled to carry them out.quot;
While quot;compelledquot; may not describe ENTJs as a group,
nevertheless the bent to plan creatively and to make
those plans reality is a common theme for NJ types.


                   http://typelogic.com/entj.html
I think of the ideal web team
 as operating much like the
 Ninja Turtles. Each one is
 dangerous in his own right,
 but together under the right
 leadership become more
 than the sum of their parts.

“At least half of the team
members should be senior-
level in their area of
expertise. The functions of a
web team can be categorized
into five specialist groups:
Design, Client-Side, Server-
Side, Content, and Support.”

— Cody Lindley
http://tinyurl.com/team-effort
                                 http://wikipedia.org/wiki/Teenage_Mutant_Ninja_Turtles
We All Want to Use
Elegant Techniques
(because we love the praise from peers)


– CSS Drop Shadows

– PNGs + Alpha Channels

– Ems instead of Px fonts

– sIFR Text Replacement

– JavaScript Animations

– Drawing on <canvas>

– Elastic page layouts
                                          http://veer.com/products/detail.aspx?image=ISP2009547
Can’t Be Afraid
   to Slide Tackle




http://tinyurl.com/slide-tackle
VIEWZI._launchUrl = function(urlStr, plugin) {
    if (plugin === 'flash' && new_window === true) {
         if (YAHOO.env.ua.opera) {
             return;
         } else if (YAHOO.env.ua.gecko || YAHOO.env.ua.ie) {
             window.open(urlStr);
         } else {
             var new_a                     = document.createElement('a');
                  new_a.href               = urlStr;
                  new_a.style.position     = 'absolute';
                  new_a.style.overflow     = 'hidden';
                  new_a.style.visibility   = 'hidden';
                  new_a.style.display      = 'block';
                  new_a.style.width        = '0';
                  new_a.style.height       = '0';
                  new_a.style.fontSize     = '0';
                  new_a.target             = '_blank';
                  new_a.innerHTML          = '';

             document.body.appendChild(new_a);

             var fake_click = document.createEvent('MouseEvents');
                 fake_click.initMouseEvent('click', true, true, window,
                 0, 0, 0, 0, 0, false, false, false, false, 0, null);

             new_a.dispatchEvent(fake_click);
             new_a.parentNode.removeChild(new_a);
         }
         return true;
     }
};
Paradigm Shift: Agile Workflow




                     http://tinyurl.com/assembly-line
Automate processes, but in moderation




http://flickr.com/photos/polvero/2656367141/
A moment before firing, two
members of the gun crew
ceased all activity and came
to attention for a three-
second interval extending
throughout the discharge of
the gun. He summoned up an
o l d co l o n e l o f a r t i l l e r y,
showed him the pictures,
and pointed out the strange
behavior… “Ah,” he said
when the performance was
over, “I have it. They are
holding the horses.”

p. 124 of Social Change
by Robert Nisbet


http://flickr.com/photos/gilliamhome/291509949/
Striking a Balance: Middle Ground in Front-End Development
Striking a Balance: Middle Ground in Front-End Development
Striking a Balance: Middle Ground in Front-End Development
Apple’s Me.com
http://960.gs/
“Embrace Constraints”
css
      – Mark Kraemer

      All modern monitors support at
      least 1024×768 pixel resolution.


      960 is divisible by 2, 3, 4, 5, 6,
      8, 10, 12, 15, 16, 20, 24, 30, 32,
      40, 48, 60, 64, 80, 96, 120, 160,
      192, 240, 320 and 480.
The 960 Grid System is an effort to streamline
web development by providing commonly used
dimensions, based on a width of 960 pixels.


There are two variants: 12 and 16 columns,
which can be used separately or in tandem.
The basis of the grid is ideally suited to rapid
prototyping, but it would work equally well
for workflow in a production environment.


There are printable sketch sheets, Photoshop
and Fireworks templates, and a CSS framework
that contain identical column measurements.
Inspiration: Khoi Vinh
Inspiration: Cameron Moll
Inspiration: Olav Bjørkøy
Inspiration: Brandon Schauer
The 12 column grid is divided into portions
that are 60 pixels wide, whereas the 16
column grid consists 40 pixel increments.


Each column has 10 pixels of margin to either
side, which stack to create gutters that are
20 pixels wide between each of the columns.
<div class=quot;container_12quot;>
    <div class=quot;grid_7 prefix_1quot;>
        <div class=quot;grid_2 alphaquot;>
            ...
        </div>
        <div class=quot;grid_3quot;>
            ...
        </div>
        <div class=quot;grid_2 omegaquot;>
            ...
        </div>
    </div>
    <div class=quot;grid_3 suffix_1quot;>
        ...
    </div>
</div>
12 column grid measurements
16 column grid measurements
Striking a Balance: Middle Ground in Front-End Development
Striking a Balance: Middle Ground in Front-End Development
Striking a Balance: Middle Ground in Front-End Development
Striking a Balance: Middle Ground in Front-End Development
Look Ma! WJS uses 960.gs :)
Summation of Presentation
•Strive to write elegant code.
•Slide-tackle when necessary.
•Choose the right framework.
•Know thy personality type.
•Train an “inverted-T” skill-set.
•Be passionate + pragmatic.
That’s a wrap. Keep in touch!
        sonspring.com
        twitter.com/nathansmith

More Related Content

What's hot

Unleash Productive Creativity by Banishing Your Inner Critic
Unleash Productive Creativity by Banishing Your Inner CriticUnleash Productive Creativity by Banishing Your Inner Critic
Unleash Productive Creativity by Banishing Your Inner CriticDenise Jacobs
 
Banish Your Inner Critic - Design & Content 2015
Banish Your Inner Critic - Design & Content 2015Banish Your Inner Critic - Design & Content 2015
Banish Your Inner Critic - Design & Content 2015Denise Jacobs
 
Hacking the Creative Brain
Hacking the Creative BrainHacking the Creative Brain
Hacking the Creative BrainDenise Jacobs
 
Hacking the Creative Brain - Web Directions 2015
Hacking the Creative Brain - Web Directions 2015Hacking the Creative Brain - Web Directions 2015
Hacking the Creative Brain - Web Directions 2015Denise Jacobs
 
Don't Think Websites, think data
Don't Think Websites, think dataDon't Think Websites, think data
Don't Think Websites, think dataMike Ellis
 
The Creativity Imperative - Work Life Congress 2015
The Creativity Imperative - Work Life Congress 2015The Creativity Imperative - Work Life Congress 2015
The Creativity Imperative - Work Life Congress 2015Denise Jacobs
 
Infinite Possibilities - How Interactive Conference, San Francisco
Infinite Possibilities - How Interactive Conference, San FranciscoInfinite Possibilities - How Interactive Conference, San Francisco
Infinite Possibilities - How Interactive Conference, San FranciscoDenise Jacobs
 
Bored But Never Boring - Media Evolution: The Conference 2013
Bored But Never Boring - Media Evolution: The Conference 2013Bored But Never Boring - Media Evolution: The Conference 2013
Bored But Never Boring - Media Evolution: The Conference 2013Denise Jacobs
 
History & Future of of Online Facilitation
History & Future of of Online FacilitationHistory & Future of of Online Facilitation
History & Future of of Online FacilitationNancy Wright White
 
Banish Your Inner Critic to Unblock Creativity - Adobe Max 2015
Banish Your Inner Critic to Unblock Creativity - Adobe Max 2015Banish Your Inner Critic to Unblock Creativity - Adobe Max 2015
Banish Your Inner Critic to Unblock Creativity - Adobe Max 2015Denise Jacobs
 
The Creativity Imperative - Prototypes, Process, and Play 2015
The Creativity Imperative - Prototypes, Process, and Play 2015The Creativity Imperative - Prototypes, Process, and Play 2015
The Creativity Imperative - Prototypes, Process, and Play 2015Denise Jacobs
 
Co-Create: Creating Better Together - UX Australia
Co-Create: Creating Better Together - UX AustraliaCo-Create: Creating Better Together - UX Australia
Co-Create: Creating Better Together - UX AustraliaDenise Jacobs
 
Thinking About Visuals in Online Communities and Facilitation
Thinking About Visuals in Online Communities and FacilitationThinking About Visuals in Online Communities and Facilitation
Thinking About Visuals in Online Communities and FacilitationNancy Wright White
 
Co-Create: Creating Better Together - UX Lisbon
Co-Create: Creating Better Together - UX LisbonCo-Create: Creating Better Together - UX Lisbon
Co-Create: Creating Better Together - UX LisbonDenise Jacobs
 
Social Media Influence on the Workplace
Social Media Influence on the WorkplaceSocial Media Influence on the Workplace
Social Media Influence on the WorkplaceWho walks the Dog
 
Co-Create: Creating Better Together - Twinkle Tampere 2015
Co-Create: Creating Better Together - Twinkle Tampere 2015Co-Create: Creating Better Together - Twinkle Tampere 2015
Co-Create: Creating Better Together - Twinkle Tampere 2015Denise Jacobs
 
Creative Collaboration FTW! - Delight Conference 2016
Creative Collaboration FTW! -  Delight Conference 2016Creative Collaboration FTW! -  Delight Conference 2016
Creative Collaboration FTW! - Delight Conference 2016Denise Jacobs
 
Infinite Possibilities - FrontEnd Conf CH 2016
Infinite Possibilities - FrontEnd Conf CH 2016Infinite Possibilities - FrontEnd Conf CH 2016
Infinite Possibilities - FrontEnd Conf CH 2016Denise Jacobs
 
Design Analysis
Design AnalysisDesign Analysis
Design AnalysisR. Sosa
 
Banish Your Inner Critic to Unleash Creativity – edUi Conference 2015
Banish Your Inner Critic to Unleash Creativity – edUi Conference 2015Banish Your Inner Critic to Unleash Creativity – edUi Conference 2015
Banish Your Inner Critic to Unleash Creativity – edUi Conference 2015Denise Jacobs
 

What's hot (20)

Unleash Productive Creativity by Banishing Your Inner Critic
Unleash Productive Creativity by Banishing Your Inner CriticUnleash Productive Creativity by Banishing Your Inner Critic
Unleash Productive Creativity by Banishing Your Inner Critic
 
Banish Your Inner Critic - Design & Content 2015
Banish Your Inner Critic - Design & Content 2015Banish Your Inner Critic - Design & Content 2015
Banish Your Inner Critic - Design & Content 2015
 
Hacking the Creative Brain
Hacking the Creative BrainHacking the Creative Brain
Hacking the Creative Brain
 
Hacking the Creative Brain - Web Directions 2015
Hacking the Creative Brain - Web Directions 2015Hacking the Creative Brain - Web Directions 2015
Hacking the Creative Brain - Web Directions 2015
 
Don't Think Websites, think data
Don't Think Websites, think dataDon't Think Websites, think data
Don't Think Websites, think data
 
The Creativity Imperative - Work Life Congress 2015
The Creativity Imperative - Work Life Congress 2015The Creativity Imperative - Work Life Congress 2015
The Creativity Imperative - Work Life Congress 2015
 
Infinite Possibilities - How Interactive Conference, San Francisco
Infinite Possibilities - How Interactive Conference, San FranciscoInfinite Possibilities - How Interactive Conference, San Francisco
Infinite Possibilities - How Interactive Conference, San Francisco
 
Bored But Never Boring - Media Evolution: The Conference 2013
Bored But Never Boring - Media Evolution: The Conference 2013Bored But Never Boring - Media Evolution: The Conference 2013
Bored But Never Boring - Media Evolution: The Conference 2013
 
History & Future of of Online Facilitation
History & Future of of Online FacilitationHistory & Future of of Online Facilitation
History & Future of of Online Facilitation
 
Banish Your Inner Critic to Unblock Creativity - Adobe Max 2015
Banish Your Inner Critic to Unblock Creativity - Adobe Max 2015Banish Your Inner Critic to Unblock Creativity - Adobe Max 2015
Banish Your Inner Critic to Unblock Creativity - Adobe Max 2015
 
The Creativity Imperative - Prototypes, Process, and Play 2015
The Creativity Imperative - Prototypes, Process, and Play 2015The Creativity Imperative - Prototypes, Process, and Play 2015
The Creativity Imperative - Prototypes, Process, and Play 2015
 
Co-Create: Creating Better Together - UX Australia
Co-Create: Creating Better Together - UX AustraliaCo-Create: Creating Better Together - UX Australia
Co-Create: Creating Better Together - UX Australia
 
Thinking About Visuals in Online Communities and Facilitation
Thinking About Visuals in Online Communities and FacilitationThinking About Visuals in Online Communities and Facilitation
Thinking About Visuals in Online Communities and Facilitation
 
Co-Create: Creating Better Together - UX Lisbon
Co-Create: Creating Better Together - UX LisbonCo-Create: Creating Better Together - UX Lisbon
Co-Create: Creating Better Together - UX Lisbon
 
Social Media Influence on the Workplace
Social Media Influence on the WorkplaceSocial Media Influence on the Workplace
Social Media Influence on the Workplace
 
Co-Create: Creating Better Together - Twinkle Tampere 2015
Co-Create: Creating Better Together - Twinkle Tampere 2015Co-Create: Creating Better Together - Twinkle Tampere 2015
Co-Create: Creating Better Together - Twinkle Tampere 2015
 
Creative Collaboration FTW! - Delight Conference 2016
Creative Collaboration FTW! -  Delight Conference 2016Creative Collaboration FTW! -  Delight Conference 2016
Creative Collaboration FTW! - Delight Conference 2016
 
Infinite Possibilities - FrontEnd Conf CH 2016
Infinite Possibilities - FrontEnd Conf CH 2016Infinite Possibilities - FrontEnd Conf CH 2016
Infinite Possibilities - FrontEnd Conf CH 2016
 
Design Analysis
Design AnalysisDesign Analysis
Design Analysis
 
Banish Your Inner Critic to Unleash Creativity – edUi Conference 2015
Banish Your Inner Critic to Unleash Creativity – edUi Conference 2015Banish Your Inner Critic to Unleash Creativity – edUi Conference 2015
Banish Your Inner Critic to Unleash Creativity – edUi Conference 2015
 

Viewers also liked

Glenview Values Presentation - Digital Citizens
Glenview Values Presentation - Digital CitizensGlenview Values Presentation - Digital Citizens
Glenview Values Presentation - Digital CitizensAndrew Kohl
 
Basics of JSON (JavaScript Object Notation) with examples
Basics of JSON (JavaScript Object Notation) with examplesBasics of JSON (JavaScript Object Notation) with examples
Basics of JSON (JavaScript Object Notation) with examplesSanjeev Kumar Jaiswal
 
eCMO 2010 How to better measure and optimize display media
eCMO 2010 How to better measure and optimize display mediaeCMO 2010 How to better measure and optimize display media
eCMO 2010 How to better measure and optimize display mediaHKAIM
 
Mdupiriak 30boxes
Mdupiriak 30boxesMdupiriak 30boxes
Mdupiriak 30boxesdboling
 
“From AE, AIG, DHL to PCCW… A walk down my Sales & Marketing management journey”
“From AE, AIG, DHL to PCCW… A walk down my Sales & Marketing management journey”“From AE, AIG, DHL to PCCW… A walk down my Sales & Marketing management journey”
“From AE, AIG, DHL to PCCW… A walk down my Sales & Marketing management journey”HKAIM
 
White paper on Spool space in teradata
White paper on Spool space in teradataWhite paper on Spool space in teradata
White paper on Spool space in teradataSanjeev Kumar Jaiswal
 
VietRees_Newsletter_64_Tuan1_Thang1
VietRees_Newsletter_64_Tuan1_Thang1VietRees_Newsletter_64_Tuan1_Thang1
VietRees_Newsletter_64_Tuan1_Thang1internationalvr
 
Application development for mobile phones
Application development for mobile phonesApplication development for mobile phones
Application development for mobile phonesSanjeev Kumar Jaiswal
 
Generational Differences Texas Medical Association 10 3 2008
Generational Differences   Texas Medical Association   10 3 2008Generational Differences   Texas Medical Association   10 3 2008
Generational Differences Texas Medical Association 10 3 2008Bill M Wooten, PhD
 
Lights camera action orlando - october 2015 -slide upload
Lights camera action   orlando - october 2015 -slide uploadLights camera action   orlando - october 2015 -slide upload
Lights camera action orlando - october 2015 -slide uploadtsmeans
 
Introduction to Educational Media Production
Introduction to Educational Media ProductionIntroduction to Educational Media Production
Introduction to Educational Media ProductionRachabodin Suwannakanthi
 
The eXtension Tool Box Project: Resources for Promoting eXtension Use at the ...
The eXtension Tool Box Project: Resources for Promoting eXtension Use at the ...The eXtension Tool Box Project: Resources for Promoting eXtension Use at the ...
The eXtension Tool Box Project: Resources for Promoting eXtension Use at the ...greenehorse
 

Viewers also liked (20)

Glenview Values Presentation - Digital Citizens
Glenview Values Presentation - Digital CitizensGlenview Values Presentation - Digital Citizens
Glenview Values Presentation - Digital Citizens
 
Night Vision
Night VisionNight Vision
Night Vision
 
Mission to Taipei
Mission to TaipeiMission to Taipei
Mission to Taipei
 
How to develop photo archives
How to develop photo archivesHow to develop photo archives
How to develop photo archives
 
Basics of JSON (JavaScript Object Notation) with examples
Basics of JSON (JavaScript Object Notation) with examplesBasics of JSON (JavaScript Object Notation) with examples
Basics of JSON (JavaScript Object Notation) with examples
 
eCMO 2010 How to better measure and optimize display media
eCMO 2010 How to better measure and optimize display mediaeCMO 2010 How to better measure and optimize display media
eCMO 2010 How to better measure and optimize display media
 
Orelogy - Austmine
Orelogy - AustmineOrelogy - Austmine
Orelogy - Austmine
 
Mdupiriak 30boxes
Mdupiriak 30boxesMdupiriak 30boxes
Mdupiriak 30boxes
 
“From AE, AIG, DHL to PCCW… A walk down my Sales & Marketing management journey”
“From AE, AIG, DHL to PCCW… A walk down my Sales & Marketing management journey”“From AE, AIG, DHL to PCCW… A walk down my Sales & Marketing management journey”
“From AE, AIG, DHL to PCCW… A walk down my Sales & Marketing management journey”
 
White paper on Spool space in teradata
White paper on Spool space in teradataWhite paper on Spool space in teradata
White paper on Spool space in teradata
 
VietRees_Newsletter_64_Tuan1_Thang1
VietRees_Newsletter_64_Tuan1_Thang1VietRees_Newsletter_64_Tuan1_Thang1
VietRees_Newsletter_64_Tuan1_Thang1
 
Application development for mobile phones
Application development for mobile phonesApplication development for mobile phones
Application development for mobile phones
 
Generational Differences Texas Medical Association 10 3 2008
Generational Differences   Texas Medical Association   10 3 2008Generational Differences   Texas Medical Association   10 3 2008
Generational Differences Texas Medical Association 10 3 2008
 
Lights camera action orlando - october 2015 -slide upload
Lights camera action   orlando - october 2015 -slide uploadLights camera action   orlando - october 2015 -slide upload
Lights camera action orlando - october 2015 -slide upload
 
DrupalCon jQuery
DrupalCon jQueryDrupalCon jQuery
DrupalCon jQuery
 
Introduction to Educational Media Production
Introduction to Educational Media ProductionIntroduction to Educational Media Production
Introduction to Educational Media Production
 
The eXtension Tool Box Project: Resources for Promoting eXtension Use at the ...
The eXtension Tool Box Project: Resources for Promoting eXtension Use at the ...The eXtension Tool Box Project: Resources for Promoting eXtension Use at the ...
The eXtension Tool Box Project: Resources for Promoting eXtension Use at the ...
 
Zipcast test
Zipcast testZipcast test
Zipcast test
 
Fractal Image Compression
Fractal Image CompressionFractal Image Compression
Fractal Image Compression
 
Negara Saya
Negara SayaNegara Saya
Negara Saya
 

Similar to Striking a Balance: Middle Ground in Front-End Development

Web Native Laboratory Record
Web Native Laboratory RecordWeb Native Laboratory Record
Web Native Laboratory RecordCameron Neylon
 
Bridge Conference - Fundraising 2.0 Session
Bridge Conference - Fundraising 2.0 SessionBridge Conference - Fundraising 2.0 Session
Bridge Conference - Fundraising 2.0 SessionBeth Kanter
 
Finding harmony in web development
Finding harmony in web developmentFinding harmony in web development
Finding harmony in web developmentChristian Heilmann
 
Money for Mission Conference: Fundraising 2.0
Money for Mission Conference: Fundraising 2.0Money for Mission Conference: Fundraising 2.0
Money for Mission Conference: Fundraising 2.0Beth Kanter
 
FrameChanges (How to be Effective)
FrameChanges (How to be Effective)FrameChanges (How to be Effective)
FrameChanges (How to be Effective)Peter Bromberg
 
Capturing Process: Challenges and opportunities
Capturing Process: Challenges and opportunitiesCapturing Process: Challenges and opportunities
Capturing Process: Challenges and opportunitiesCameron Neylon
 
What does Web2 do for us?
What does Web2 do for us?What does Web2 do for us?
What does Web2 do for us?Mike Ellis
 
Let's do some thinking about data visualisation thinking
Let's do some thinking about data visualisation thinkingLet's do some thinking about data visualisation thinking
Let's do some thinking about data visualisation thinkingAndy Kirk
 
How Social Has Changed the Way we Work
How Social Has Changed the Way we WorkHow Social Has Changed the Way we Work
How Social Has Changed the Way we WorkAndy Piper
 
Using Technology and Social Software to Connect with Members and Allies
Using Technology and Social Software to Connect with Members and AlliesUsing Technology and Social Software to Connect with Members and Allies
Using Technology and Social Software to Connect with Members and AlliesChristopher Wyble
 
Infinite Possibilities - STC Summit 2015
Infinite Possibilities - STC Summit 2015Infinite Possibilities - STC Summit 2015
Infinite Possibilities - STC Summit 2015Denise Jacobs
 
The Very Heart of It. Keynote at Urban Libraries Unite (ULU) Conference
The Very Heart of It.  Keynote at Urban Libraries Unite (ULU) ConferenceThe Very Heart of It.  Keynote at Urban Libraries Unite (ULU) Conference
The Very Heart of It. Keynote at Urban Libraries Unite (ULU) ConferencePeter Bromberg
 
Social business preso
Social business presoSocial business preso
Social business presoRick Ladd
 
#10NTC We Are Media Blogging
#10NTC We Are Media   Blogging#10NTC We Are Media   Blogging
#10NTC We Are Media Bloggingguest7a83015
 
#10NTC We Are Media Blogging
#10NTC We Are Media   Blogging#10NTC We Are Media   Blogging
#10NTC We Are Media BloggingDawn Crawford
 
Join the Secret Revolution
Join the Secret RevolutionJoin the Secret Revolution
Join the Secret RevolutionAlan Levine
 
Digital Ethnography For Social Interaction Design [Remix]
Digital Ethnography For Social Interaction Design [Remix]Digital Ethnography For Social Interaction Design [Remix]
Digital Ethnography For Social Interaction Design [Remix]Brynn Evans
 
Infinite Possibilities - FIU Online's InnovEd Conference 2017
Infinite Possibilities - FIU Online's InnovEd Conference 2017Infinite Possibilities - FIU Online's InnovEd Conference 2017
Infinite Possibilities - FIU Online's InnovEd Conference 2017Denise Jacobs
 
a future where data citation Counts
a future where data citation Countsa future where data citation Counts
a future where data citation CountsHeather Piwowar
 

Similar to Striking a Balance: Middle Ground in Front-End Development (20)

Web Native Laboratory Record
Web Native Laboratory RecordWeb Native Laboratory Record
Web Native Laboratory Record
 
Bridge Conference - Fundraising 2.0 Session
Bridge Conference - Fundraising 2.0 SessionBridge Conference - Fundraising 2.0 Session
Bridge Conference - Fundraising 2.0 Session
 
Finding harmony in web development
Finding harmony in web developmentFinding harmony in web development
Finding harmony in web development
 
Money for Mission Conference: Fundraising 2.0
Money for Mission Conference: Fundraising 2.0Money for Mission Conference: Fundraising 2.0
Money for Mission Conference: Fundraising 2.0
 
FrameChanges (How to be Effective)
FrameChanges (How to be Effective)FrameChanges (How to be Effective)
FrameChanges (How to be Effective)
 
Capturing Process: Challenges and opportunities
Capturing Process: Challenges and opportunitiesCapturing Process: Challenges and opportunities
Capturing Process: Challenges and opportunities
 
What does Web2 do for us?
What does Web2 do for us?What does Web2 do for us?
What does Web2 do for us?
 
Let's do some thinking about data visualisation thinking
Let's do some thinking about data visualisation thinkingLet's do some thinking about data visualisation thinking
Let's do some thinking about data visualisation thinking
 
How Social Has Changed the Way we Work
How Social Has Changed the Way we WorkHow Social Has Changed the Way we Work
How Social Has Changed the Way we Work
 
Using Technology and Social Software to Connect with Members and Allies
Using Technology and Social Software to Connect with Members and AlliesUsing Technology and Social Software to Connect with Members and Allies
Using Technology and Social Software to Connect with Members and Allies
 
Infinite Possibilities - STC Summit 2015
Infinite Possibilities - STC Summit 2015Infinite Possibilities - STC Summit 2015
Infinite Possibilities - STC Summit 2015
 
The Very Heart of It. Keynote at Urban Libraries Unite (ULU) Conference
The Very Heart of It.  Keynote at Urban Libraries Unite (ULU) ConferenceThe Very Heart of It.  Keynote at Urban Libraries Unite (ULU) Conference
The Very Heart of It. Keynote at Urban Libraries Unite (ULU) Conference
 
Social business preso
Social business presoSocial business preso
Social business preso
 
#10NTC We Are Media Blogging
#10NTC We Are Media   Blogging#10NTC We Are Media   Blogging
#10NTC We Are Media Blogging
 
#10NTC We Are Media Blogging
#10NTC We Are Media   Blogging#10NTC We Are Media   Blogging
#10NTC We Are Media Blogging
 
Join the Secret Revolution
Join the Secret RevolutionJoin the Secret Revolution
Join the Secret Revolution
 
Snakes on the Web
Snakes on the WebSnakes on the Web
Snakes on the Web
 
Digital Ethnography For Social Interaction Design [Remix]
Digital Ethnography For Social Interaction Design [Remix]Digital Ethnography For Social Interaction Design [Remix]
Digital Ethnography For Social Interaction Design [Remix]
 
Infinite Possibilities - FIU Online's InnovEd Conference 2017
Infinite Possibilities - FIU Online's InnovEd Conference 2017Infinite Possibilities - FIU Online's InnovEd Conference 2017
Infinite Possibilities - FIU Online's InnovEd Conference 2017
 
a future where data citation Counts
a future where data citation Countsa future where data citation Counts
a future where data citation Counts
 

More from Nathan Smith

Getting Started with React
Getting Started with ReactGetting Started with React
Getting Started with ReactNathan Smith
 
HTML5 Can't Do That
HTML5 Can't Do ThatHTML5 Can't Do That
HTML5 Can't Do ThatNathan Smith
 
Rapid Templating with Serve
Rapid Templating with ServeRapid Templating with Serve
Rapid Templating with ServeNathan Smith
 
Proactive Responsive Design
Proactive Responsive DesignProactive Responsive Design
Proactive Responsive DesignNathan Smith
 
Use Web Skills To Build Mobile Apps
Use Web Skills To Build Mobile AppsUse Web Skills To Build Mobile Apps
Use Web Skills To Build Mobile AppsNathan Smith
 
Adobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + FireworksAdobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + FireworksNathan Smith
 
Accelerated Grid Theming
Accelerated Grid ThemingAccelerated Grid Theming
Accelerated Grid ThemingNathan Smith
 
Urban Leadership Slides
Urban Leadership SlidesUrban Leadership Slides
Urban Leadership SlidesNathan Smith
 
Themes from Ascent of a Leader
Themes from Ascent of a LeaderThemes from Ascent of a Leader
Themes from Ascent of a LeaderNathan Smith
 
Marketing 450 Guest Lecture
Marketing 450 Guest LectureMarketing 450 Guest Lecture
Marketing 450 Guest LectureNathan Smith
 
Echo Conference 2008
Echo Conference 2008Echo Conference 2008
Echo Conference 2008Nathan Smith
 

More from Nathan Smith (20)

Getting Started with React
Getting Started with ReactGetting Started with React
Getting Started with React
 
HTML5 Can't Do That
HTML5 Can't Do ThatHTML5 Can't Do That
HTML5 Can't Do That
 
Rapid Templating with Serve
Rapid Templating with ServeRapid Templating with Serve
Rapid Templating with Serve
 
Proactive Responsive Design
Proactive Responsive DesignProactive Responsive Design
Proactive Responsive Design
 
Use Web Skills To Build Mobile Apps
Use Web Skills To Build Mobile AppsUse Web Skills To Build Mobile Apps
Use Web Skills To Build Mobile Apps
 
Red Dirt JS
Red Dirt JSRed Dirt JS
Red Dirt JS
 
Refresh OKC
Refresh OKCRefresh OKC
Refresh OKC
 
DSVC Design Talk
DSVC Design TalkDSVC Design Talk
DSVC Design Talk
 
Think Vitamin CSS
Think Vitamin CSSThink Vitamin CSS
Think Vitamin CSS
 
Adobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + FireworksAdobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + Fireworks
 
Meet Clumsy
Meet ClumsyMeet Clumsy
Meet Clumsy
 
Echo HTML5
Echo HTML5Echo HTML5
Echo HTML5
 
Accelerated Grid Theming
Accelerated Grid ThemingAccelerated Grid Theming
Accelerated Grid Theming
 
Urban Leadership Slides
Urban Leadership SlidesUrban Leadership Slides
Urban Leadership Slides
 
Themes from Ascent of a Leader
Themes from Ascent of a LeaderThemes from Ascent of a Leader
Themes from Ascent of a Leader
 
7 Storey Mountain
7 Storey Mountain7 Storey Mountain
7 Storey Mountain
 
Marketing 450 Guest Lecture
Marketing 450 Guest LectureMarketing 450 Guest Lecture
Marketing 450 Guest Lecture
 
Echo Conference 2008
Echo Conference 2008Echo Conference 2008
Echo Conference 2008
 
Bible Tech 2008
Bible Tech 2008Bible Tech 2008
Bible Tech 2008
 
Gospelcon 2006
Gospelcon 2006Gospelcon 2006
Gospelcon 2006
 

Recently uploaded

UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 

Recently uploaded (19)

UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 

Striking a Balance: Middle Ground in Front-End Development

  • 1. Striking a Balance Finding middle ground in Front–End Development http://flickr.com/photos/marcusjb/2813736862/
  • 2. Hi. I’m Nathan Smith, a designer and front-end developer @ Viewzi.com
  • 3. http://viewzi.tv/?dl=viewzi101 Viewzi 101 – Intro Video (Learn more about Viewzi: www.viewzi.tv or www.viewzi.com)
  • 4. Who am I, really? – Expectant father! :) – Master of Divinity* – Published author – Started Godbit.com – Created 960.gs – ENTJ Personality * A few classes left, finishing up online.
  • 6. Stereotypical perceptions ? http://flickr.com/photos/iamaaronmartin/2858991878/ http://nbc.com/chuck/
  • 7. In reality, more collaborative http://flickr.com/photos/tbisaacs/2849275119/
  • 8. But still quite competitive! Steve Brewer Travis Isaacs Developer Designer http://flickr.com/photos/tbisaacs/2871685626/
  • 9. Front-End Developers are like midfielders, balancing in between offense and defense. We ensure that designers get the glory, and the server-side guys can stick to what they do best.
  • 10. “Inverse, Multi-Headed Hydra” In the world of web-development, there are many “dragons” sharing the same public facade: ASP.NET, ColdFusion, Java, Perl, PHP, Ruby, Python, etc. To render in a browser, all data has to pass through HTML. Front-end isn’t a bad place to be. :) http://santi.elfwood.com/hydra.jpg.html
  • 11. (Best Viewed In) Life used to be so much simpler. But nowadays...
  • 13. New Challenger! Gotta catch ‘em all! o_O; http://www.flickr.com/photos/avalonstar/2822957764/
  • 14. In order to keep pace with change: We really need Interoperability
  • 15. Web Standards = 3 legged stool: • HTML • CSS • JavaScript Accessibility falls flat if any of these three are done incorrectly.
  • 16. Aaron Scheidies World Class Triathlete Aaron recently received his Doctorate of Physical Therapy from University of Washington. He is a world record holder amongst Olympic distance triathletes.
  • 17. Aaron was born with a juvenile form of macular degeneration called Stargardt’s disease. His vision is 20/400 vision, while people with full sight see 20/20. Aaron is pictured here setting a world record with Ben Collins. They rode a tandem bicycle, ran and swam tethered. He finished in 01:58:08 at Dallas, TX on 10/14/07.
  • 19. Jeremy Keith – JS Expert “Far from being something that is added to a site, accessibility is something we need to ensure isn’t removed. From that perspective, the phrase ‘making a site accessible’ isn’t accurate...” “Accessibility is not a plug-in. It’s not something that can be bolted onto a site after the fact. So here’s what I’m proposing: From now on, instead of talking about making a site accessible, I’m going to talk about keeping a site accessible. Join me.”
  • 25. We are Passionate About our Work Photoshop vs. Fireworks Mockups vs. Prototyping Ruby on Rails vs. Django Frameworks vs. Custom Flash vs. Web Standards Mac vs. PC - MS vs. Apple Release Date for HTML5? Jeff Croft vs. Everybody... http://wikipedia.org/wiki/Ultimate_Wolverine_vs._Hulk
  • 26. As the CS3 product cycle was wrapping up, Adobe's user interface designers started showing their ideas for subsequent releases... I think my initial reaction can be boiled down to three letters: WTF? quot;Are you telling me,quot; I asked, quot;that we're going to put a huge, battleship-gray box into the background on the Mac, as it is on Windows? Why would we do that?quot; http://blogs.adobe.com/jnack/2008/06/future_photoshop_ui.html
  • 28. JavaScript is discussed intensely: (I happen to agree)
  • 29. Yahoo! User jQuery Interface Library
  • 30. jQuery YUI
  • 31. Ninjas master a variety of tools (not just one) Use a framework as an extension of yourself, not just as a crutch. http://imdb.com/title/tt1046173/
  • 32. Macro vs. Micro Semantics – Correct tags – HTML / XHTML – Accessibility – ID, class names – Attribute usage – Microformats – Search Engines – Machine code http://flickr.com/photos/leoffreitas/332360959/ http://flickr.com/photos/kennysarmy/2493464978/
  • 33. Why Use a Version Control System? last code commit – Provides fall-back point – Prevents over-writing – Helps w. accountability – Track change history – Any operating system – Schedule server tasks – Project management http://flickr.com/photos/97607362@N00/1102286373/
  • 34. Design by Commi ee aka Village Stew http://flickr.com/photos/acidflask/128102331/
  • 35. Several years ago in Yakima, Washington there was a church split over whether to use organ music in worship. Ironically, those who left to start a new church now have a far more extravagant organ than the original congregation ever did. They remain divided. http://flickr.com/photos/ultrahi/102732191/
  • 36. Mark Boulton: Designing by Community? “Designing by community I feel is different. There are a lot of people in the Drupal community. Many hundreds with a strong Text voice. Providing very early releases—in fact, opening up the process completely— draws reaction. Within that reaction, if there is enough of it, we can identify trends. And I think trends in feedback is the key to Designing by Community.”
  • 37. Leadership & Team Dynamics http://wikipedia.org/wiki/Lion
  • 38. Stephen P. Anderson Why I’m Not a Manager “When you have the right people on your team, what qualifies as management is really about creating a platform from which everyone can track themselves. That, and f i g u r i n g o u t h ow to challenge folks so that they are delivering their best. This assumes a lot of trust and faith in their abilities, and not in your ability to hand-hold.” http://tinyurl.com/not-a-manager
  • 39. “He who thinks he leads, but has no followers, is only taking a walk.” — John C. Maxwell 21 Irrefutable Laws of Leadership http://flickr.com/photos/rantes/91307782/
  • 40. John Maynard Keynes Father of Modern Economics http://imdb.com/title/tt0268978/
  • 41. Myers-Briggs Personalities – Extraverted / Introverted – Sensing / iNtuitive – Thinking / Feeling – Perceiving / Judging http://humanmetrics.com/cgi-win/JTypes1.htm http://wikipedia.org/wiki/Myers-Briggs_Type_Indicator
  • 42. SENSING INTUITIVE INTROVERT JUDGING ISTJ ISFJ INFJ INTJ ISTP ISFP INFP INTP PERCEIVING ESTP ESFP ENFP ENTP EXTRAVERT JUDGING ESTJ ESFJ ENFJ ENTJ THINKING FEELING THINKING
  • 43. ENTJ - “I’m really sorry you have to die.” ENTJs have a natural tendency to marshall and direct. This may be expressed with the charm and finesse of a world leader or with the insensitivity of a cult leader. The ENTJ requires little encouragement to make a plan. One ENTJ put it this way... quot;I make these little plans that really don't have any importance to anyone else, and then feel compelled to carry them out.quot; While quot;compelledquot; may not describe ENTJs as a group, nevertheless the bent to plan creatively and to make those plans reality is a common theme for NJ types. http://typelogic.com/entj.html
  • 44. I think of the ideal web team as operating much like the Ninja Turtles. Each one is dangerous in his own right, but together under the right leadership become more than the sum of their parts. “At least half of the team members should be senior- level in their area of expertise. The functions of a web team can be categorized into five specialist groups: Design, Client-Side, Server- Side, Content, and Support.” — Cody Lindley http://tinyurl.com/team-effort http://wikipedia.org/wiki/Teenage_Mutant_Ninja_Turtles
  • 45. We All Want to Use Elegant Techniques (because we love the praise from peers) – CSS Drop Shadows – PNGs + Alpha Channels – Ems instead of Px fonts – sIFR Text Replacement – JavaScript Animations – Drawing on <canvas> – Elastic page layouts http://veer.com/products/detail.aspx?image=ISP2009547
  • 46. Can’t Be Afraid to Slide Tackle http://tinyurl.com/slide-tackle
  • 47. VIEWZI._launchUrl = function(urlStr, plugin) { if (plugin === 'flash' && new_window === true) { if (YAHOO.env.ua.opera) { return; } else if (YAHOO.env.ua.gecko || YAHOO.env.ua.ie) { window.open(urlStr); } else { var new_a = document.createElement('a'); new_a.href = urlStr; new_a.style.position = 'absolute'; new_a.style.overflow = 'hidden'; new_a.style.visibility = 'hidden'; new_a.style.display = 'block'; new_a.style.width = '0'; new_a.style.height = '0'; new_a.style.fontSize = '0'; new_a.target = '_blank'; new_a.innerHTML = ''; document.body.appendChild(new_a); var fake_click = document.createEvent('MouseEvents'); fake_click.initMouseEvent('click', true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); new_a.dispatchEvent(fake_click); new_a.parentNode.removeChild(new_a); } return true; } };
  • 48. Paradigm Shift: Agile Workflow http://tinyurl.com/assembly-line
  • 49. Automate processes, but in moderation http://flickr.com/photos/polvero/2656367141/
  • 50. A moment before firing, two members of the gun crew ceased all activity and came to attention for a three- second interval extending throughout the discharge of the gun. He summoned up an o l d co l o n e l o f a r t i l l e r y, showed him the pictures, and pointed out the strange behavior… “Ah,” he said when the performance was over, “I have it. They are holding the horses.” p. 124 of Social Change by Robert Nisbet http://flickr.com/photos/gilliamhome/291509949/
  • 56. “Embrace Constraints” css – Mark Kraemer All modern monitors support at least 1024×768 pixel resolution. 960 is divisible by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 and 480.
  • 57. The 960 Grid System is an effort to streamline web development by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.
  • 58. The basis of the grid is ideally suited to rapid prototyping, but it would work equally well for workflow in a production environment. There are printable sketch sheets, Photoshop and Fireworks templates, and a CSS framework that contain identical column measurements.
  • 63. The 12 column grid is divided into portions that are 60 pixels wide, whereas the 16 column grid consists 40 pixel increments. Each column has 10 pixels of margin to either side, which stack to create gutters that are 20 pixels wide between each of the columns.
  • 64. <div class=quot;container_12quot;> <div class=quot;grid_7 prefix_1quot;> <div class=quot;grid_2 alphaquot;> ... </div> <div class=quot;grid_3quot;> ... </div> <div class=quot;grid_2 omegaquot;> ... </div> </div> <div class=quot;grid_3 suffix_1quot;> ... </div> </div>
  • 65. 12 column grid measurements
  • 66. 16 column grid measurements
  • 71. Look Ma! WJS uses 960.gs :)
  • 72. Summation of Presentation •Strive to write elegant code. •Slide-tackle when necessary. •Choose the right framework. •Know thy personality type. •Train an “inverted-T” skill-set. •Be passionate + pragmatic.
  • 73. That’s a wrap. Keep in touch! sonspring.com twitter.com/nathansmith