Newfangeldy Front End Stuff For People Who Last Touched It Back When Grunge Was A Thing
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

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

  • 184 views
Uploaded on

- Does the word "Mosaic" conjure up fond memories of pages upon pages with grey background and blue links, rather than fancy glass pictures? ...

- 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

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
184
On Slideshare
184
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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