Download as PDF, PPTX
![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; }](https://image.slidesharecdn.com/drupalcon-austin-front-end-140611110500-phpapp01/85/Newfangeldy-Front-End-Stuff-For-People-Who-Last-Touched-It-Back-When-Grunge-Was-A-Thing-35-320.jpg)
![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](https://image.slidesharecdn.com/drupalcon-austin-front-end-140611110500-phpapp01/85/Newfangeldy-Front-End-Stuff-For-People-Who-Last-Touched-It-Back-When-Grunge-Was-A-Thing-81-320.jpg)
Uploaded byAngela Byron
Newfangeldy Front End Stuff For People Who Last Touched It Back When Grunge Was A Thing
The document outlines a presentation comparing web development from the mid-1990s to the present, highlighting significant changes in web design, markup, styling, and scripting. It emphasizes the evolution of tools and technologies, including HTML5, CSS preprocessors, and JavaScript frameworks, alongside shifts from static to dynamic web development practices. The speaker, an experienced web developer, aims to make the audience aware of modern techniques and the importance of adopting current standards in web development.
More Related Content
Similar to 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
- 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.
- 3. WEB DEVELOPER SINCE1994, 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’SCOMPARE WEB DEVELOPMENT THEN VS. NOW…
- 6. …defining newfangeldy termsas 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 TIMETO THE FAR DISTANT PAST… THE MID 1990S…
- 8. POP CULTURE LOOKEDLIKE THIS…
- 9.
- 10. …AND I LOOKEDLIKE THIS. ;)
- 11.
- 12. THEN: ALL WEBSITESBASICALLY LOOKED LIKE THIS.
- 13. UNTIL… *GASP* THESLICE TOOL!
- 14. STEP 1: MAKEA STATIC GRAPHIC COMP OF YOUR AMAZING DESIGN
- 15. STEP 2: SLICEIMAGE UP INTO SMALLER SQUARES & EXPORT
- 16. STEP 3: SPENDTHE NEXT 50 HOURS “FIXING” THE “HTML”
- 17. NOW: DESIGN INTHE BROWSER (AGAIN ;))
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24. HTML5 FORMS <input type=“date”/> (AND URL, EMAIL, TEL, NUMBER, ETC.)
- 25.
- 26. WHAT ELSE? CANVAS LOCAL STORAGE WEBWORKERS OFFLINE SUPPORT GEOLOCATION … http://diveintohtml5.info
- 27.
- 28. HTML5SHIV: “POLYFILL” HTML5 FEATURESFOR OLD IE VERSIONS https://code.google.com/p/html5shiv/
- 29. START HTML5 DEVELOPMENT ONTHE RIGHT FOOT. http://html5boilerplate.com
- 30.
- 32. <HTML>! <BODY BGCOLOR=#000000 BACKGROUND=STARS.GIF TEXT=#FF0000 LINK=#FF4C4CVLINK=#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
- 33. 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
- 34.
- 35. NEW SELECTORS ANDPSEUDO- 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; }
- 36. EASY COLUMNS .container {! !width: 500px;! ! margin: 0 auto;! }! ! .container p {! ! columns: 3;! }
- 37.
- 38. 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
- 39.
- 40.
- 41. THEN: USE ANYFONT YOU WANT, AS LONG AS IT’S: Courier New Times New Roman Arial Arial Black Comic Sans MS Georgia Impact Trebuchet MS Verdana
- 42. NOW: ACTUALLY USEANY FONT YOU WANT* * IF FONT LICENSE ALLOWS
- 43. PULL IN WEBFONT REMOTELY https://www.google.com/fonts
- 44. GENERATE YOUR OWNWEB FONT fontsquirrel.com
- 45.
- 46. http://necolas.github.io/normalize.css/ NORMALIZE: BECAUSE NOBROWSER STARTING POINTS ARE CREATED EQUAL
- 47. Newfangeldy term: “CSSPreprocessor” 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
- 48. SASS, LESS, STYLUS.MOST POPULAR* SEEMS TO BE SASS. http://sass-lang.com * BASED ON MY TWITTER STREAM. PLEASE DON’T SHOOT THE MESSENGER. ;)
- 49.
- 50.
- 51.
- 52. @EXTEND / INHERITANCE message.scssmessage.css
- 53.
- 54.
- 55. THEN: EVERYONE USEDONE OF THESE.
- 56.
- 57. NOW: EVERYONE USES(AT LEAST) ONE OF THESE.
- 58. THIS IS TODAY’SSCREEN RESOLUTION LANDSCAPE.
- 59.
- 60.
- 61. ADAPTIVE: FIXED, PERDEVICE RESPONSIVE: FLUID, PER WIDTH
- 62.
- 63. THEN: TABLES ANDFRAMES
- 64.
- 65. IT’S *SO* SIMPLE!TRYING TO GET THIS?
- 66. INSTEAD OF THISHORRIBLE, 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>
- 67. YOU WRITE THISAWESOME, 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>
- 68. …AND THEN 500LINES 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;! }!
- 70.
- 71.
- 72.
- 73.
- 74.
- 75.
- 76.
- 77. NOW: THE CONTENDERS iOSANDROID
- 79. PHONEGAP TO THERESCUE! http://phonegap.com
- 80.
- 81. 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
- 82.
- 83.
- 84.
- 85.
- 86.
- 87.
- 88. WHAT DID YOUTHINK?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!