Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Web Trends to 2015
othree
October 22, 2015
Technology
4
260
Web Trends to 2015
othree
October 22, 2015
Tweet
Share
More Decks by othree
See All by othree
How GitHub Supports Vim License Detection, The Five Years Journey
othree
1
390
WAT JavaScript Date
othree
3
1.6k
Modern HTML Email Development
othree
3
2.4k
MRT & GIT
othree
1
1.5k
YAJS.vim and Vim Syntax Highlight
othree
1
2.1k
Transducer
othree
9
2.5k
HITCON 11 Photographer
othree
4
360
fetch is the new XHR
othree
6
3.4k
TypeScript, future and past
othree
2
2.1k
Other Decks in Technology
See All in Technology
Getting Started in Product Management
thatjeffsmith
0
130
ログ集約基盤をCloudWatchからOpenSearchに変えてみた
yuhta28
0
140
ログラスを支える技術的投資の仕組み / loglass-technical-investment
urmot
9
2k
品質特性のすすめ
honamin09
0
180
サイバー攻撃を想定したクラウドネイティブセキュリティガイドラインとCNAPP及びSecurity Observabilityの未来
syoshie
2
1.5k
聊聊 Cgo 的二三事
david74chou
0
340
You're M̶u̶t̶e̶d̶ Rooted
patrickwardle
1
8k
8日で作るオレオレRISC-V CPU
matsud224
1
130
Microsoft Azure を使い始める前に Azure Active Directory と Azure サブスクリプションの役割や関係性を正しく理解する
yoshiakioi
0
120
DMMプラットフォーム ゼロから始めるKubernetes運用 課題と改善
pospome
0
420
Goで実装するブランドネットワークとの接続ポイント
pongzu
2
290
PMMやプロダクト関係者と協働するために役割を整理した話 / 20220810_pdmtipslt
rakus_dev
0
130
Featured
See All Featured
Creatively Recalculating Your Daily Design Routine
revolveconf
207
10k
Building Better People: How to give real-time feedback that sticks.
wjessup
344
17k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
11
4.9k
Typedesign – Prime Four
hannesfritz
34
1.4k
How STYLIGHT went responsive
nonsquared
85
4k
Streamline your AJAX requests with AmplifyJS and jQuery
dougneiner
127
8.5k
Side Projects
sachag
450
37k
Thoughts on Productivity
jonyablonski
44
2.4k
Reflections from 52 weeks, 52 projects
jeffersonlam
337
17k
Writing Fast Ruby
sferik
612
57k
What's new in Ruby 2.0
geeforr
335
30k
No one is an island. Learnings from fostering a developers community.
thoeni
9
1.3k
Transcript
Web Trend Course 6
1998
None
None
None
1999
None
None
None
2001
None
2002
None
None
2003
None
None
None
None
2002
2000
None
None
None
2004
None
None
None
None
None
None
Web Hypertext Application Technology Working Group
2005
None
None
None
None
RESTful API
ORM
CSRF token <meta content="authenticity_token" name="csrf-param" /> <meta content="gv1xdpH2w4MYcMtoT52pRPV+tPoWFDSJhxNiBOC5idQ= name="csrf-token" />
Unobtrusive JavaScript • Separation of functionality (the "behavior layer") from
a Web page's structure/content and presentation
Asset Pipeline • All together assets pack system • JS,
CSS, images, html • Concat, minimize, hashize, update file name
None
None
None
None
First pass by Safari
2006
None
None
None
None
None
None
None
Nesting nav { ul { margin: 0; padding: 0; list-style:
none; } li { display: inline-block; } }
Mixin @mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius;
border-radius: $radius; } .box { @include border-radius(10px); }
Variable $font-stack: Helvetica, sans-serif; $primary-color: #333; body { font: 100%
$font-stack; color: $primary-color; }
JSmin
2007
None
None
None
iPhone first smart phone
None
2008
None
HTC G1 first android phone
None
None
None
V8 JavaScript Engine • by Google • Starts the browser
speed race
yuicompressor
None
None
First pass by Webkit
canvas
function draw() { var canvas = document.getElementById('canvas'); if (canvas.getContext){ var
ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.moveTo(75,50); ctx.lineTo(100,75); ctx.lineTo(100,25); ctx.fill(); } } https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shape
None
function draw() { var canvas = document.getElementById('canvas'); if (canvas.getContext){ var
ctx = canvas.getContext('2d'); // Quadratric curves example ctx.beginPath(); ctx.moveTo(75,40); ctx.bezierCurveTo(75,37,70,25,50,25); ctx.bezierCurveTo(20,25,20,62.5,20,62.5); ctx.bezierCurveTo(20,80,40,102,75,120); ctx.bezierCurveTo(110,102,130,80,130,62.5); ctx.bezierCurveTo(130,62.5,130,25,100,25); ctx.bezierCurveTo(85,25,75,37,75,40); ctx.fill(); } } https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shape
None
2009
Reference number ECMA-123:2009 © Ecma International 2009 ECMA-262 5th Edition
/ December 2009 ECMAScript Language Specification
None
None
None
# Assignment: number = 42 opposite = true # Conditions:
number = -42 if opposite # Functions: square = (x) -> x * x
# Objects: math = root: Math.sqrt square: square cube: (x)
-> x * square x # Splats: race = (winner, runners...) -> print winner, runners # Existence: alert "I knew it!" if elvis?
None
None
Closure Compiler
None
2010
None
iPhone 4 first retina display
None
None
None
1 Way Data Binding
2011
Reference number ECMA-123:2009 © Ecma International 2009 ECMA-262 5.1 Edition
/ June 2011 ECMAScript Language Specification
and First ES6 Draft
None
None
None
AMD
define(['jquery'] , function ($) { return function () {}; });
None
None
var greetings = require("./greetings.js"); module.exports = "Bonjour";
UMD
(function (root, factory) { if (typeof define === 'function' &&
define.amd) { // AMD. Register as an anonymous module. define(['b'], factory); } else { // Browser globals root.amdWeb = factory(root.b); } }(this, function (b) { return {}; }));
None
2 Way Data Binding
UglifyJS
None
None
None
None
Media Query
2012
None
None
http://techreport.com/news/21037/doom-ported-to-firefox-using-javascript-htm
None
None
None
Grunt Bower Yeoman
None
None
UglifyJS 2
None
None
None
None
2013
None
None
None
None
None
None
None
<google-map latitude="37.77493" longitude="-122.41942"></google-map>
<brick-tabbar id="demo-bar"> <brick-tabbar-tab target="a" selected> <i class="fa fa-camera-retro"></i> </brick-tabbar-tab> <brick-tabbar-tab
target="b"> <i class="fa fa-envelope"></i> </brick-tabbar-tab> <brick-tabbar-tab target="c"> <i class="fa fa-home"></i> </brick-tabbar-tab> </brick-tabbar>
None
http://creativejs.com/2013/06/the-race-for-speed-part-1-the-javascript-engine-family-tree/
asm.js
None
2014
None
ESLint
None
None
None
None
2015
None
None
http://www.codekitchen.ca/visualizing-glimmer-performance
Reference number ECMA-123:2009 © Ecma International 2009 ECMA-262 6th Edition
/ June 2015 ECMAScript® 2015 Language Specification
None
None
None
None
WebAssembly
None
Relay • Use GraphQL to communicate with server • Try
to replace RESTful API
GraphQL { user(id: 3500401) { id, name, isViewerFriend, profilePicture(size: 50)
{ uri, width, height } } }
None