newfangeldy front end stuff for people who last touched it back when grunge was a thing
DESCRIPTION
- Does the word "Mosaic" conjure up fond memories of pages upon pages with grey background and blue links, rather than fancy glass pictures? - Did you use AOL diskettes as coasters? - Did you last touch JavaScript back whenTRANSCRIPT
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, 2014A N G I E “ @ W E B C H I C K ” B Y R O N
ABOUT ME
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…
…AND I LOOKED LIKE THIS. ;)
WEB DESIGN: THEN AND NOW
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 ;))
MARKUP: THEN AND NOW
THEN:
<IMG SRC=SPACER.GIF><FRAMESET><CENTER><BLINK>!<BLINK><BLINK>
MORE SEMANTIC STRUCTURE
HTML5 FORMS
<input type=“date” />
(AND URL, EMAIL, TEL, NUMBER, ETC.)
MULTIMEDIA SUPPORTTHEN:
NOW:
WHAT ELSE?
CANVAS LOCAL STORAGE WEB WORKERS
OFFLINE SUPPORT GEOLOCATION
…
http://diveintohtml5.info
HTML5SHIV: “POLYFILL” HTML5 FEATURES FOR OLD IE VERSIONS
https://code.google.com/p/html5shiv/
STYLING: THEN AND NOW
<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
<!--#include file="header.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
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;!}
MEDIA QUERIES
THEN:
NOW:
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
TYPOGRAPHY: THEN AND NOW
THEN: USE ANY FONT YOU WANT, AS LONG AS IT’S:
Courier New
Times New Roman
ArialArial Black
Comic Sans MS
GeorgiaImpact
Trebuchet MS
Verdana
NOW: ACTUALLY USE ANY FONT YOU WANT*
* IF FONT LICENSE ALLOWS
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. ;)
base.scssVARIABLES
base.css
_reset.scss
IMPORTSbase.scss
base.css
“MIXINS”box.scss
box.css
@EXTEND / INHERITANCEmessage.scss message.css
SCREEN RESOLUTIONS: THEN AND NOW
THEN: EVERYONE USED ONE OF THESE.
1024x768
800x600
640x480
NOW: EVERYONE USES (AT LEAST) ONE OF THESE.
THIS IS TODAY’S SCREEN RESOLUTION LANDSCAPE.
WHAT TO DO?
“FIXED”
“FLUID”
800px
150px 600px
90%
20% 75%
THEN:
ADAPTIVE: FIXED, PER DEVICE
RESPONSIVE: FLUID, PER WIDTH
LAYOUT: THEN AND NOW
THEN: TABLES AND FRAMES
NOW: CSS
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;!}!!
NOW: GRID SYSTEMS
NOW: CSS FRAMEWORKS
MOBILE APPLICATIONS: THEN AND NOW
THEN:
NOW: THE CONTENDERS
iOS ANDROID
SCRIPTING: THEN AND NOW
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
THEN: “DHTML”
NOW: MVC JAVASCRIPT FRAMEWORKS
NOW: BUILD TOOLS
SOON: WEB COMPONENTS
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!