Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Using Source Maps in 2015

Avatar for Matt Steele Matt Steele
April 08, 2015
Programming
1.1k
0

Using Source Maps in 2015

And introducing the greatest compiles-to-js language of all time, arnoldc.js

Avatar for Matt Steele

Matt Steele

April 08, 2015

More Decks by Matt Steele

See All by Matt Steele
Upgrading to Angular 2 using ngUpgrade
Avatar for Matt Steele mattdsteele
0
1.2k
Reactive Programming with RxJS
Avatar for Matt Steele mattdsteele
0
120
GET TO THE CHOPVAR
Avatar for Matt Steele mattdsteele
0
210
Responsive Images using <picture> and srcset/sizes
Avatar for Matt Steele mattdsteele
1
1.5k
The Decorator Pattern
Avatar for Matt Steele mattdsteele
0
94
Diving Into the Device API
Avatar for Matt Steele mattdsteele
1
910
Unit Testing JavaScript when you're Afraid of JavaScript
Avatar for Matt Steele mattdsteele
3
880
What Zelda Taught Me about Front End Engineering
Avatar for Matt Steele mattdsteele
5
1.2k

Other Decks in Programming

See All in Programming
UnityでSystem.Net.WebSocketsなWebSocketサーバが動かないのでUnity Monoのコードを覗いてみた / about implementing websocket server with unity mono
Avatar for にー兄さん drumath2237
1
190
App Storeの外へ──日本のiOSサイドローディング入門 for iOSDC Japan 2026
Avatar for 野瀬田　裕樹 yuukiw00w
0
220
Snowflakeで業務アプリを作ろう。 Snowflakeのアプリ機能解説&実践ガイド
Avatar for Ayumu Yamaguchi ayumu_yamaguchi
1
280
Webの地図
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
6
4.6k
Augmenting AI with the Power of Jakarta EE
Avatar for ivargrimstad ivargrimstad
0
200
技術的負債を組織課題として解く-増えすぎたマイクロサービスとの戦い-
Avatar for reimaru reimaru
1
2k
仕様駆動開発による爆速プロダクト開発 / Bakusoku Spec Driven Development
Avatar for Keisuke Kobayashi kobakei
0
120
Streamlitで実現する自然言語データアプリ開発
Avatar for Ayumu Yamaguchi ayumu_yamaguchi
1
290
アクセシビリティから考える情報設計
Avatar for high-g high_g_engineer
0
380
そのリトライ、死んだコネクションを使い回していませんか ── GoのHTTPクライアントとHTTP/2を実プロダクト障害から学び直す
Avatar for Yusa Matsuda myus4a
0
150
海上で動くGoサーバー: goroutineとchannelでさばく航行データストリーム
Avatar for Atsuki Seo atsuki_seo
0
730
AI活用は、個人から組織へ｜マルチプレイヤーエージェントハーネス「QM」の社内活用事例 / AI use is moving from individuals to orgs
Avatar for r-kagaya rkaga
1
120

Featured

See All Featured
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
128
18k
brightonSEO & MeasureFest 2025 - Christian Goodrich - Winning strategies for Black Friday CRO & PPC
Avatar for Christian Goodrich cargoodrich
3
850
Digital Ethics as a Driver of Design Innovation
Avatar for Per Axbom axbom
PRO
1
430
More Than Pixels: Becoming A User Experience Designer
Avatar for Michelle Schulp Hunt marktimemedia
3
530
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1369
210k
What the history of the web can teach us about the future of AI
Avatar for Ines Montani inesmontani
PRO
1
700
The Director’s Chair: Orchestrating AI for Truly Effective Learning
Avatar for Mike Taylor tmiket
1
300
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
37
6.6k
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
7.2k
Visualization
Avatar for Eitan Lees eitanlees
152
17k
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
KATA
Avatar for Megan Lloyd mclloyd
PRO
35
15k

Transcript

  1. SOURCE MAPS

  2. IT’S SHOWTIME

  3. It’s 2015 Tools Are Complicated

  4. Compilers

  5. Compilers

  6. Compilers

  7. Compilers

  8. Compilers

  9. Transpilers

  10. Transpilers

  11. Transpilers

  12. None

  13. Preprocessors

  14. Preprocessors

  15. Preprocessors

  16. Preprocessors

  17. Postprocessors

  18. Postprocessors

  19. Postprocessors

  20. Postprocessors

  21. Postprocessors

  22. I’LL BE BACK

  23. Build Phase

  24. Build Phase

  25. Build Phase

  26. Build Phase

  27. Now you have two problems

  28. None

  29. DEBUG THIS

  30. Source Maps To The Rescue

  31. Content Source

  32. CSS & JavaScript

  33. app.js app.min.js Without Source Maps

  34. app.js app.min.js app.min.js.map With Source Maps

  35. None
  36. None
  37. None
  38. None

  39. Variable Length Quantity http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/

  40. It all Just Works

  41. Demo

  42. Multi-Level Source Maps

  43. HASTA LA VISTA, BABY

  44. ES6 CoffeeScript TypeScript

  45. ES6 CoffeeScript TypeScript Concat

  46. ES6 CoffeeScript TypeScript Concat Minify

  47. Demo

  48. ArnoldC

  49. None

  50. IT'S SHOWTIME TALK TO THE HAND "hello world" YOU HAVE

    BEEN TERMINATED Hello World

  51. GET TO THE CHOPPER a HERE IS MY INVITATION 4

    GET UP b YOU'RE FIRED 2 ENOUGH TALK a = (4 + b) * 2

  52. HEY CHRISTMAS TREE foo YOU SET US UP @I LIED

    HEY CHRISTMAS TREE bar YOU SET US UP @NO PROBLEMO foo = false bar = true

  53. Two Problems

  54. 1.

  55. ✓

  56. ✓ ✗ ✗

  57. ✓ … ✗ ✗

  58. None
  59. None
  60. None
  61. None
  62. None

  63. 2.

  64. 2.

  65. So

  66. I wrote a compiler

  67. arnoldc.js https://github.com/mattdsteele/arnoldc.js

  68. Compiles from ArnoldC to JavaScript

  69. Compiles from ArnoldC to JavaScript (With Source Maps)

  70. DO IT NOW

  71. 11+ Source Maps

  72. 1. Upgrade your tools Tips

  73. 2. Gulp > Grunt (for this) Tips gulp.task('javascript', function() {

    gulp.src('src/**/*.js') .pipe(sourcemaps.init()) .pipe(plugin1()) .pipe(plugin2()) .pipe(sourcemaps.write()) .pipe(gulp.dest('dist')); });

  74. 3. Inline your sourcesContent Tips

  75. Tips 4. Source Map Visualization Tool http://sokra.github.io/source-map-visualization/

  76. @mattdsteele http://steele.blue