Newfangeldy Front End Stuff For People Who Last Touched It Back When Grunge Was A Thing

Track name - Date - & anything else you need to include
that maybe relevant to you presentation
NEWFANGELDY FRONT END STUFF
FOR PEOPLE WHO LAST TOUCHED IT BACK WHEN
GRUNGE WAS A THING
Front End Track - Tuesday, June 3, 2014
A N G I E “ @ W E B C H I C K ” B Y R O N

WEB DEVELOPER SINCE 1994,
BACKEND DEVELOPER SINCE 1999.
UNQUALIFIED TO GIVE THIS TALK,
BUT QUALIFIED TO TELL YOU TO
GET OFF MY LAWN. ;)

SO WHY *AM* I GIVING THIS TALK?

THIS TALK WILL
COMPARE…
LET’S COMPARE WEB
DEVELOPMENT THEN VS. NOW…

…defining newfangeldy terms as we go.
A L O N G W I T H A C O U P L E O F
E X A M P L E S .

LET’S TRAVEL IN
TIME TO THE FAR
DISTANT PAST…
THE MID 1990S…

POP CULTURE LOOKED LIKE THIS…

TECHNOLOGY LOOKED LIKE THIS…

THEN: ALL WEBSITES BASICALLY
LOOKED LIKE THIS.

UNTIL… *GASP* THE SLICE TOOL!

STEP 1: MAKE A STATIC GRAPHIC
COMP OF YOUR AMAZING DESIGN

STEP 2: SLICE IMAGE UP INTO
SMALLER SQUARES & EXPORT

STEP 3: SPEND THE NEXT 50
HOURS “FIXING” THE “HTML”

NOW: DESIGN IN THE BROWSER
(AGAIN ;))

“STYLE TYLES”
http://styletil.es

PATTERN LAB
http://patternlab.io

THEN:
 
<IMG SRC=SPACER.GIF>
<FRAMESET>
<CENTER>
<BLINK>!<BLINK><BLINK>

NOW:
http://www.w3.org/TR/html5/

HTML5 FORMS
<input type=“date” />
(AND URL, EMAIL, TEL, NUMBER, ETC.)

WHAT ELSE?
CANVAS
LOCAL STORAGE
WEB WORKERS
OFFLINE SUPPORT
GEOLOCATION
…
http://diveintohtml5.info

MODERNIZR: HTML5
FEATURE DETECTION
http://modernizr.com

HTML5SHIV: “POLYFILL” HTML5
FEATURES FOR OLD IE VERSIONS
https://code.google.com/p/html5shiv/

START HTML5 DEVELOPMENT
ON THE RIGHT FOOT.
http://html5boilerplate.com

<HTML>!
<BODY BGCOLOR=#000000
BACKGROUND=STARS.GIF TEXT=#FF0000
LINK=#FF4C4C VLINK=#FF4C4C
ALINK=“FF4C4C>!
<CENTER>!
<P><B><FONT FACE=“COMIC SANS”
COLOR=#FF00FF>HELLO</FONT></B>!
</CENTER>!
</BODY>!
</HTML>
THEN: LOTS OF CODE LIKE THIS
index.html

“SERVER-SIDE INCLUDES”
about.html contact.html

CSS
body {!
background-color: #000;!
background-image: url(‘stars.gif’);!
}!
a { color: #ff4c4c; }!
…
<LINK HREF=STYLES.CSS>!
index.html about.html contact.html
styles.css

NOW:
http://www.w3.org/TR/CSS/

NEW SELECTORS AND PSEUDO-
CLASSES
// Links that start with “https://“!
a[href^="https://"]{ background:#f00;}
// Links that end with “.ca”!
a[href$=“.ca"]{ background:#0f0;}
// Links that contain “drupal”!
a[href*="drupal"]{ background:#00f;}!
// Style even table rows differently!
tr:nth-child(even) { background:#ccc;}!
// Style disabled elements differently!
input[type="text"]:disabled { background: #ccc; }

EASY COLUMNS
.container {!
! width: 500px;!
! margin: 0 auto;!
}!
!
.container p {!
! columns: 3;!
}

BACKGROUNDS, BORDERS, AND
DECORATIONS… OH MY!
color: rgb(230, 230, 230);!
background: rgb(210, 20, 20);!
font-size: 20px;!
padding: 20px;!
text-shadow: 0px -1px 0px rgba(30, 30, 30, 0.8);!
border-radius: 30px;!
background: linear-gradient(0deg, rgb(210, 20, 20) 30%,
rgb(250, 20, 20) 70%);!
box-shadow: 0px 2px 1px rgba(50, 50, 50, 0.75);!
http://css3gen.com

ANIMATIONS, TRANSFORMS,
TRANSITIONS

THEN: USE ANY FONT YOU
WANT, AS LONG AS IT’S:
Courier New
Times New Roman
Arial
Arial Black
Comic Sans MS
Georgia
Impact
Trebuchet MS
Verdana

NOW: ACTUALLY USE ANY FONT
YOU WANT*
* IF FONT LICENSE ALLOWS

PULL IN WEB FONT REMOTELY
https://www.google.com/fonts

GENERATE YOUR OWN WEB FONT
fontsquirrel.com

EVEN MOAR NEWFANGELDY
CSS STUFF!

http://necolas.github.io/normalize.css/
NORMALIZE: BECAUSE NO BROWSER
STARTING POINTS ARE CREATED EQUAL

Newfangeldy term: “CSS Preprocessor”
A S C R I P T I N G L A N G U A G E T H A T
E X T E N D S C S S W I T H N E W
F E A T U R E S A N D C O N V E N I E N C E ,
W H I C H T H E N G E T S C O M P I L E D
I N T O R E G U L A R C S S S Y N T A X
F O R U S E O N T H E W E B .
!
P O W E R + +
R E P E A T I N G Y O U R S E L F - -
http://drupalize.me/videos/what-css-preprocessor

SASS, LESS, STYLUS. MOST
POPULAR* SEEMS TO BE SASS.
http://sass-lang.com
* BASED ON MY TWITTER STREAM.
PLEASE DON’T SHOOT THE MESSENGER. ;)

_reset.scss
IMPORTS
base.scss
base.css

@EXTEND / INHERITANCE
message.scss message.css

COMPASS
http://compass-style.org

SCREEN RESOLUTIONS:
THEN AND NOW

THEN: EVERYONE USED ONE
OF THESE.

NOW: EVERYONE USES (AT
LEAST) ONE OF THESE.

THIS IS TODAY’S SCREEN
RESOLUTION LANDSCAPE.

“FIXED”
“FLUID”
800px
150px 600px
90%
20% 75%
THEN:

ADAPTIVE: FIXED, PER DEVICE
RESPONSIVE: FLUID, PER WIDTH

IT’S *SO* SIMPLE! TRYING TO
GET THIS?

INSTEAD OF THIS HORRIBLE,
HACKISH CODE…
<table>!
<tr><td colspan=3>Top</td></tr>!
<tr>!
<td>Left</td>!
<td>!
<h1>Center</h1>!
</td>!
<td>Right</td>!
</tr>!
<tr><td colspan=3>Bottom</td></tr>!
</table>

YOU WRITE THIS AWESOME,
SEMANTIC CODE!
<div id="container">!
<div id="top">Top</div>!
<div id="leftnav">Left</div>!
<div id="rightnav">Right</div>!
<div id="content">!
<h1>Center</h1>!
</div>!
<div id="footer">Bottom</div>!
</div>

…AND THEN 500 LINES OF
CRAP LIKE THIS. :P
#container {!
text-align: center;!
width: 480px;!
margin: 10px auto;!
line-height: 130%;!
}!
!
#top {!
padding: .5em;!
}!
!
#leftnav {!
float: left;!
width: 80px;!
margin: 0;!
padding: 1em;!
}!

SINGULARITY
http://singularity.gs

BOOTSTRAP
http://getbootstrap.com

FOUNDATION
http://foundation.zurb.com

MOBILE APPLICATIONS:
THEN AND NOW

NOW: THE CONTENDERS
iOS ANDROID

PHONEGAP TO THE RESCUE!
http://phonegap.com

var agt=navigator.userAgent.toLowerCase();
if ( (parseInt(navigator.appVersion)>=4) &&
(agt.indexOf(`mozilla')!=-1) &&
(agt.indexOf(`spoofer')==-1)
&& (agt.indexOf(`compatible') == -1) ) {
document.tags.H1.color=“red";
}
else if ( (parseInt(navigator.appVersion)>=4)
&& (agt.indexOf(`msie') != -1) ) {
document.styleSheets["ietssxyz"].addRule
("H1", "color:red");
}
THEN: RAW DOM
MANIPULATION

NOW: JQUERY
$('h1').css('color', 'red');
http://jquery.com

NOW: MVC JAVASCRIPT
FRAMEWORKS

SOON: ECMASCRIPT 6
(“HARMONY”)

WHAT DID YOU THINK?E V A L U A T E T H I S S E S S I O N :
A U S T I N 2 0 1 4 . D R U P A L . O R G / S C H E D U L E
Thank you!

Newfangeldy Front End Stuff For People Who Last Touched It Back When Grunge Was A Thing

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (6)

Similar to Newfangeldy Front End Stuff For People Who Last Touched It Back When Grunge Was A Thing

Similar to Newfangeldy Front End Stuff For People Who Last Touched It Back When Grunge Was A Thing (20)

More from Angela Byron

More from Angela Byron (19)

Recently uploaded

Recently uploaded (20)

Newfangeldy Front End Stuff For People Who Last Touched It Back When Grunge Was A Thing