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
270
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
1.2k
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.2k
Transducer
othree
9
2.5k
HITCON 11 Photographer
othree
4
390
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
Hatena Engineer Seminar #23 「チームとプロダクトを育てる Mackerel 開発合宿」
arthur1
0
520
IoTを始めたきっかけの話と個人でできるIoTの今後 / 新年LT会「私の愛するIoT 2023」
you
0
240
OPENLOGI Company Profile
hr01
0
12k
JAWS-UG 横浜 #54 資料
takakuni
0
210
CSS Variable をもっと活用する / Kyoto.js 18
spring_raining
2
870
日経電子版だけじゃない! 日経の新規Webメディアの開発 - NIKKEI Tech Talk #3
sztm
0
320
開発者と協働できるメトリクスダッシュボードを作ろう!/SRE Lounge 2023
lmi
3
500
OpenShiftクラスターのアップグレード自動化への挑戦! / OpenShift Cluster Upgrade Automation
skitamura7446
0
150
Deep dive in Reserved Instance ~脳死推奨量購入からの脱却~
kzkmaeda
0
540
OCI技術資料 : ロード・バランサー 詳細 / Load Balancer 200
ocise
2
7.2k
ユーザーテストガイドライン VERSION 2.0
kouzoukaikaku
0
1.4k
Google Cloud Workflows: API automation, patterns and best practices
glaforge
0
100
Featured
See All Featured
Building a Scalable Design System with Sketch
lauravandoore
451
31k
YesSQL, Process and Tooling at Scale
rocio
159
12k
jQuery: Nuts, Bolts and Bling
dougneiner
57
6.6k
Unsuck your backbone
ammeep
659
56k
KATA
mclloyd
12
9.7k
Stop Working from a Prison Cell
hatefulcrawdad
263
18k
Ruby is Unlike a Banana
tanoku
93
9.5k
Put a Button on it: Removing Barriers to Going Fast.
kastner
56
2.5k
Build your cross-platform service in a week with App Engine
jlugia
221
17k
Fireside Chat
paigeccino
16
1.8k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
6
840
The Power of CSS Pseudo Elements
geoffreycrofte
52
4.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