Track name - Date - & anything else you need to include
that maybe relevant to you presentation
NEWFANGELDY FRONT END STUF...
ABOUT ME
WEB DEVELOPER SINCE 1994,
BACKEND DEVELOPER SINCE 1999.
UNQUALIFIED TO GIVE THIS TALK,
BUT QUALIFIED TO TELL YOU TO
GET OF...
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 ;))
“STYLE TYLES”
http://styletil.es
PATTERN LAB
http://patternlab.io
MARKUP:
THEN AND NOW
THEN:
 
<IMG SRC=SPACER.GIF>
<FRAMESET>
<CENTER>
<BLINK>!<BLINK><BLINK>
NOW:
http://www.w3.org/TR/html5/
MORE SEMANTIC STRUCTURE
HTML5 FORMS
<input type=“date” />
(AND URL, EMAIL, TEL, NUMBER, ETC.)
MULTIMEDIA SUPPORT
THEN:
NOW:
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
STYLING:
THEN AND NOW
<HTML>!
<BODY BGCOLOR=#000000
BACKGROUND=STARS.GIF TEXT=#FF0000
LINK=#FF4C4C VLINK=#FF4C4C
ALINK=“FF4C4C>!
<CENTER>!
<P><B...
CSS
body {!
background-color: #000;!
background-image: url(‘stars.gif’);!
}!
a { color: #ff4c4c; }!
…
<LINK HREF=STYLES.CS...
NOW:
http://www.w3.org/TR/CSS/
NEW SELECTORS AND PSEUDO-
CLASSES
// Links that start with “https://“!
a[href^="https://"]{ background:#f00;}
// Links tha...
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;!...
ANIMATIONS, TRANSFORMS,
TRANSITIONS
TYPOGRAPHY:
THEN AND NOW
THEN: USE ANY FONT YOU
WANT, AS LONG AS IT’S:
Courier New
Times New Roman
Arial
Arial Black
Comic Sans MS
Georgia
Impact
T...
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...
SASS, LESS, STYLUS. MOST
POPULAR* SEEMS TO BE SASS.
http://sass-lang.com
* BASED ON MY TWITTER STREAM.
PLEASE DON’T SHOOT ...
base.scss
VARIABLES
base.css
_reset.scss
IMPORTS
base.scss
base.css
“MIXINS”
box.scss
box.css
@EXTEND / INHERITANCE
message.scss message.css
COMPASS
http://compass-style.org
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</h...
YOU WRITE THIS AWESOME,
SEMANTIC CODE!
<div id="container">!
<div id="top">Top</div>!
<div id="leftnav">Left</div>!
<div i...
…AND THEN 500 LINES OF
CRAP LIKE THIS. :P
#container {!
text-align: center;!
width: 480px;!
margin: 10px auto;!
line-heigh...
NOW: GRID SYSTEMS
SINGULARITY
http://singularity.gs
NOW: CSS FRAMEWORKS
BOOTSTRAP
http://getbootstrap.com
FOUNDATION
http://foundation.zurb.com
MOBILE APPLICATIONS:
THEN AND NOW
THEN:
NOW: THE CONTENDERS
iOS ANDROID
PHONEGAP TO THE RESCUE!
http://phonegap.com
SCRIPTING:
THEN AND NOW
var agt=navigator.userAgent.toLowerCase();
if ( (parseInt(navigator.appVersion)>=4) &&
(agt.indexOf(`mozilla')!=-1) &&
(ag...
NOW: JQUERY
$('h1').css('color', 'red');
http://jquery.com
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
Tha...
Newfangeldy Front End Stuff For People Who Last Touched It Back When Grunge Was A Thing
Newfangeldy Front End Stuff For People Who Last Touched It Back When Grunge Was A Thing
Newfangeldy Front End Stuff For People Who Last Touched It Back When Grunge Was A Thing
Upcoming SlideShare
Loading in …5
×

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

475 views

Published on

- 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 when

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
475
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

  1. 1. 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
  2. 2. ABOUT ME
  3. 3. WEB DEVELOPER SINCE 1994, BACKEND DEVELOPER SINCE 1999. UNQUALIFIED TO GIVE THIS TALK, BUT QUALIFIED TO TELL YOU TO GET OFF MY LAWN. ;)
  4. 4. SO WHY *AM* I GIVING THIS TALK?
  5. 5. THIS TALK WILL COMPARE… LET’S COMPARE WEB DEVELOPMENT THEN VS. NOW…
  6. 6. …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 .
  7. 7. LET’S TRAVEL IN TIME TO THE FAR DISTANT PAST… THE MID 1990S…
  8. 8. POP CULTURE LOOKED LIKE THIS…
  9. 9. TECHNOLOGY LOOKED LIKE THIS…
  10. 10. …AND I LOOKED LIKE THIS. ;)
  11. 11. WEB DESIGN: THEN AND NOW
  12. 12. THEN: ALL WEBSITES BASICALLY LOOKED LIKE THIS.
  13. 13. UNTIL… *GASP* THE SLICE TOOL!
  14. 14. STEP 1: MAKE A STATIC GRAPHIC COMP OF YOUR AMAZING DESIGN
  15. 15. STEP 2: SLICE IMAGE UP INTO SMALLER SQUARES & EXPORT
  16. 16. STEP 3: SPEND THE NEXT 50 HOURS “FIXING” THE “HTML”
  17. 17. NOW: DESIGN IN THE BROWSER (AGAIN ;))
  18. 18. “STYLE TYLES” http://styletil.es
  19. 19. PATTERN LAB http://patternlab.io
  20. 20. MARKUP: THEN AND NOW
  21. 21. THEN: &nbsp; <IMG SRC=SPACER.GIF> <FRAMESET> <CENTER> <BLINK>!<BLINK><BLINK>
  22. 22. NOW: http://www.w3.org/TR/html5/
  23. 23. MORE SEMANTIC STRUCTURE
  24. 24. HTML5 FORMS <input type=“date” /> (AND URL, EMAIL, TEL, NUMBER, ETC.)
  25. 25. MULTIMEDIA SUPPORT THEN: NOW:
  26. 26. WHAT ELSE? CANVAS LOCAL STORAGE WEB WORKERS OFFLINE SUPPORT GEOLOCATION … http://diveintohtml5.info
  27. 27. MODERNIZR: HTML5 FEATURE DETECTION http://modernizr.com
  28. 28. HTML5SHIV: “POLYFILL” HTML5 FEATURES FOR OLD IE VERSIONS https://code.google.com/p/html5shiv/
  29. 29. START HTML5 DEVELOPMENT ON THE RIGHT FOOT. http://html5boilerplate.com
  30. 30. STYLING: THEN AND NOW
  31. 31. <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
  32. 32. 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
  33. 33. NOW: http://www.w3.org/TR/CSS/
  34. 34. 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; }
  35. 35. EASY COLUMNS .container {! ! width: 500px;! ! margin: 0 auto;! }! ! .container p {! ! columns: 3;! }
  36. 36. MEDIA QUERIES THEN: NOW:
  37. 37. 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
  38. 38. ANIMATIONS, TRANSFORMS, TRANSITIONS
  39. 39. TYPOGRAPHY: THEN AND NOW
  40. 40. 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
  41. 41. NOW: ACTUALLY USE ANY FONT YOU WANT* * IF FONT LICENSE ALLOWS
  42. 42. PULL IN WEB FONT REMOTELY https://www.google.com/fonts
  43. 43. GENERATE YOUR OWN WEB FONT fontsquirrel.com
  44. 44. EVEN MOAR NEWFANGELDY CSS STUFF!
  45. 45. http://necolas.github.io/normalize.css/ NORMALIZE: BECAUSE NO BROWSER STARTING POINTS ARE CREATED EQUAL
  46. 46. 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
  47. 47. SASS, LESS, STYLUS. MOST POPULAR* SEEMS TO BE SASS. http://sass-lang.com * BASED ON MY TWITTER STREAM. PLEASE DON’T SHOOT THE MESSENGER. ;)
  48. 48. base.scss VARIABLES base.css
  49. 49. _reset.scss IMPORTS base.scss base.css
  50. 50. “MIXINS” box.scss box.css
  51. 51. @EXTEND / INHERITANCE message.scss message.css
  52. 52. COMPASS http://compass-style.org
  53. 53. SCREEN RESOLUTIONS: THEN AND NOW
  54. 54. THEN: EVERYONE USED ONE OF THESE.
  55. 55. 1024x768 800x600 640x480
  56. 56. NOW: EVERYONE USES (AT LEAST) ONE OF THESE.
  57. 57. THIS IS TODAY’S SCREEN RESOLUTION LANDSCAPE.
  58. 58. WHAT TO DO?
  59. 59. “FIXED” “FLUID” 800px 150px 600px 90% 20% 75% THEN:
  60. 60. ADAPTIVE: FIXED, PER DEVICE RESPONSIVE: FLUID, PER WIDTH
  61. 61. LAYOUT: THEN AND NOW
  62. 62. THEN: TABLES AND FRAMES
  63. 63. NOW: CSS
  64. 64. IT’S *SO* SIMPLE! TRYING TO GET THIS?
  65. 65. 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>
  66. 66. 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>
  67. 67. …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;! }!
  68. 68. NOW: GRID SYSTEMS
  69. 69. SINGULARITY http://singularity.gs
  70. 70. NOW: CSS FRAMEWORKS
  71. 71. BOOTSTRAP http://getbootstrap.com
  72. 72. FOUNDATION http://foundation.zurb.com
  73. 73. MOBILE APPLICATIONS: THEN AND NOW
  74. 74. THEN:
  75. 75. NOW: THE CONTENDERS iOS ANDROID
  76. 76. PHONEGAP TO THE RESCUE! http://phonegap.com
  77. 77. SCRIPTING: THEN AND NOW
  78. 78. 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
  79. 79. NOW: JQUERY $('h1').css('color', 'red'); http://jquery.com
  80. 80. THEN: “DHTML”
  81. 81. NOW: MVC JAVASCRIPT FRAMEWORKS
  82. 82. NOW: BUILD TOOLS
  83. 83. SOON: WEB COMPONENTS
  84. 84. SOON: ECMASCRIPT 6 (“HARMONY”)
  85. 85. 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!

×