Front End Development - Beyond Javascript (Robin Cannon)
30 likes12,668 views
The document discusses the evolving landscape of front-end development, emphasizing that developers should not rely solely on JavaScript and should be proficient in HTML and CSS as well. It highlights the importance of understanding the underlying technologies and frameworks, as well as the growing influence of design in creating engaging user experiences. The piece also suggests a collaborative approach to development, encouraging developers to enhance their skills across multiple disciplines.
Front End Development - Beyond Javascript (Robin Cannon)
- 1. FRONT END DEVELOPMENT -FRONT END DEVELOPMENT - BEYOND JAVASCRIPT!BEYOND JAVASCRIPT! ...though I'm not sure about exclamation points in the title...
- 2. “Front end developers shall not live on Javascript alone. Source: Jesus (...paraphrased)
- 3. ROBIN CANNONROBIN CANNON (Self) Exiled Brit in Austin, TX Front End Dev Manager, IBM @shinytoyrobots
- 4. HTMLHTML CSSCSS JAVASCRIPTJAVASCRIPT LONELY STARTUP SEEKS VIVACIOUS FRONT END DEVELOPERLONELY STARTUP SEEKS VIVACIOUS FRONT END DEVELOPER Must enjoy fussball, have GSOH, own laptop and...
- 5. JAVASCRIPTJAVASCRIPT HONEST STARTUP SEEKS NEEDY FRONT END DEVELOPERHONEST STARTUP SEEKS NEEDY FRONT END DEVELOPER Must enjoy long hours, have stock option optimism, own laptop and... AND MAYBE HTML AND CSS...KINDA...AND MAYBE HTML AND CSS...KINDA... ANGULAR, EMBER, OR BACKBONEANGULAR, EMBER, OR BACKBONE
- 7. console.log('because javascript is awesome'); Display content Interact with content Enhance your HTML Run a server Give a presentation Play Command & Conquer Fight crime
- 14. I "DO" MY BANKING WITH CHASEI "DO" MY BANKING WITH CHASE I "PLAY" ON BETTERMENTI "PLAY" ON BETTERMENT http://www.consumeraffairs.com/finance/chase-online-banking.html | https://www.betterment.com/retirement/
- 15. FRAMEWORKS ARE TOOLSFRAMEWORKS ARE TOOLS (...NOT SKILLS)(...NOT SKILLS) BUT THEY CAN MAKE US LAZYBUT THEY CAN MAKE US LAZY THEY'RE SUPPOSED TO MAKE LIFE EASYTHEY'RE SUPPOSED TO MAKE LIFE EASY
- 16. FRONT END == EXPERIENCES FOR PEOPLEFRONT END == EXPERIENCES FOR PEOPLE
- 26. JAVASCRIPT MVCS ARE MATURINGJAVASCRIPT MVCS ARE MATURING AND CONSOLIDATINGAND CONSOLIDATING Google Trends
- 27. 0.2% OF WEBSITES0.2% OF WEBSITES 0.1% OF WEBSITES0.1% OF WEBSITES <0.1% OF WEBSITES<0.1% OF WEBSITES http://w3techs.com/technologies/overview/javascript_library/all
- 28. 89.5% OF WEBSITES89.5% OF WEBSITES 91.3% OF WEBSITES91.3% OF WEBSITES ~100% OF WEBSITES~100% OF WEBSITES http://w3techs.com/technologies/overview
- 30. BUT IF EVERYONEBUT IF EVERYONE IS TRYING TOIS TRYING TO BECOME ONE OFBECOME ONE OF THESE...?THESE...?
- 34. KNOWING AN MVCKNOWING AN MVC WON'T MAKE YOUWON'T MAKE YOU SPECIAL ANY MORE.SPECIAL ANY MORE. HAVING AN MVC WON'THAVING AN MVC WON'T MAKE THAT PRODUCTMAKE THAT PRODUCT SPECIAL ANY MORE.SPECIAL ANY MORE.
- 36. MOORE'S LAW:MOORE'S LAW: OVERALL PROCESSING POWEROVERALL PROCESSING POWER FOR COMPUTERS WILL DOUBLEFOR COMPUTERS WILL DOUBLE EVERY TWO YEARS.EVERY TWO YEARS.
- 37. “ Moore’s Law is no longer enough to make customers happy. John Maeda, Wall Street Journal, 5/22/2015 http://blogs.wsj.com/accelerators/2015/05/22/weekend-read-why-design-matters-more-than-moore/
- 38. DON'T BE A NINJADON'T BE A NINJA BE THREE NINJASBE THREE NINJAS http://www.viki.com/tv/1863c-ninja-segging-subbing-academy | http://www.woothemes.com/2010/07/training-ninjas-with-jon-hicks/
- 39. JAVASCRIPTJAVASCRIPT (...AND I DON'T MEAN(...AND I DON'T MEAN FRAMEWORKS AND LIBRARIES)FRAMEWORKS AND LIBRARIES)
- 40. “ the latest and greatest JavaScript framework comes around every sixteen minutes Allen Pike, Steamwork Software (@apike) http://www.allenpike.com/2015/javascript-framework-fatigue/
- 41. 6464
- 42. EVEN IF MVCS AREEVEN IF MVCS ARE CONSOLIDATINGCONSOLIDATING LIBRARIES ARELIBRARIES ARE FRACTURINGFRACTURING AND MIGHT OUTWEIGHAND MIGHT OUTWEIGH MVCS ANWAYMVCS ANWAY http://www.jacquewatkins.com/wp-content/uploads/2011/08/Broken_glass.jpg
- 44. HTMLHTML
- 45. <!DOCTYPE html> <html> <head> <title>Legit</title> </head> <body> <p>This is a legit webpage. By itself.</p> </body> </html>
- 46. PRESENTATION OF CONTENTPRESENTATION OF CONTENT COMES DOWN TO THE DOM.COMES DOWN TO THE DOM. THE "DEFAULT" OF THE DOM ISTHE "DEFAULT" OF THE DOM IS HTMLHTML JAVASCRIPT MANIPULATES THEJAVASCRIPT MANIPULATES THE DOM.DOM.
- 47. <vampire>Sucks</vampire> CUSTOM ELEMENTSCUSTOM ELEMENTS <nav is="vampire-nav"></nav> EXTENDING EXISTING ELEMENTSEXTENDING EXISTING ELEMENTS TEMPLATESTEMPLATES <template> <p>I'm a vampire!</p> </template>
- 48. THE SHADOW DOMTHE SHADOW DOM http://www.fangoria.com/new/what-we-do-in-the-shadows-sundance-movie-review/
- 51. CSSCSS
- 52. FLEXBOXFLEXBOX
- 54. YOU DON'T EVEN NEED TO KNOWYOU DON'T EVEN NEED TO KNOW ANNOYING STUFF LIKE VENDOR PREFIXESANNOYING STUFF LIKE VENDOR PREFIXES HTTPS://GITHUB.COM/POSTCSS/AUTOPREFIXERHTTPS://GITHUB.COM/POSTCSS/AUTOPREFIXER (Probably my favorite gulp recipe)
- 60. BUT THAT'S JUSTBUT THAT'S JUST ONE BIG NINJAONE BIG NINJA I SAID BECOMEI SAID BECOME THREE NINJASTHREE NINJAS http://www.viki.com/tv/1863c-ninja-segging-subbing-academy | http://www.woothemes.com/2010/07/training-ninjas-with-jon-hicks/
- 61. THANK YOUTHANK YOU ROBIN CANNON, @SHINYTOYROBOTSROBIN CANNON, @SHINYTOYROBOTS
- 62. JS/HTML Command & Conquer - http://www.adityaravishankar.com/projects/games/command-and-conquer/ UK Crime Map - http://www.police.uk/metropolitan/00BK17N/crime/ Custom Elements (Eric Bidelman @ebidel) - http://www.html5rocks.com/en/tutorials/webcomponents/customelements/ About Shadow DOM - https://www.polymer-project.org/0.5/platform/shadow-dom.html Web Components - http://webcomponents.org/ Web Components and the future of CSS - http://philipwalton.github.io/talks/2014-11-24 Flexbox Support - http://caniuse.com/#feat=flexbox