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
130
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
96
Diving Into the Device API
Avatar for Matt Steele mattdsteele
1
940
Unit Testing JavaScript when you're Afraid of JavaScript
Avatar for Matt Steele mattdsteele
3
910
What Zelda Taught Me about Front End Engineering
Avatar for Matt Steele mattdsteele
5
1.3k

Other Decks in Programming

See All in Programming
Spec-driven Development with AI
Avatar for Simon Martinelli simas
PRO
0
2.2k
AI時代のシニアエンジニアとは
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
12
11k
No More NoSuchMethodError
Avatar for TATSUNO Yasuhiro exoego
1
120
Railsのためのパスキー実践入門 〜マルチテナントSaaSでの意思決定〜
Avatar for utakaha utakaha
3
1.8k
Modernizing iOS Apps
Avatar for seyfeddin seyfoyun
0
140
Materialが消えた日 〜真っ白なFlutterキャンバスにRenderObjectで絵を描く〜
Avatar for Aoi Umigishi umigishiaoi
0
120
Performance Optimization With LLMs
Avatar for xLeitix xleitix
0
230
Vapor Mode でアクセシビリティは 壊れないか検証した話
Avatar for fuqda fuqda
1
280
コーディング自動化の次へ。人の介入をゼロにするファクトリーとサポートAIによる実践
Avatar for Seiji Takahashi timakin
5
4.9k
flutter_test のその先へ — Flutter アプリの LLM 機能に「評価」という品質保証を
Avatar for Kosuke Saigusa kosukesaigusa
0
140
SODA - FACT BOOK（EN）
Avatar for SODA inc. sodainc
1
190
Kotlinize Is Not Just Converting to Kotlin
Avatar for Kazuki Chigita chigichan24
1
200

Featured

See All Featured
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
Avatar for Mine Cetinkaya-Rundel minecr
1
460
The browser strikes back
Avatar for Jono Alderson jonoalderson
0
1.9k
エンジニアに許された特別な時間の終わり
Avatar for watany watany
109
250k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
128
56k
Groundhog Day: Seeking Process in Gaming for Health
Avatar for Sebastian Deterding codingconduct
0
450
brightonSEO & MeasureFest 2025 - Winning Strategies for Black Friday CRO & PPC - Christian Goodrich
Avatar for Christian Goodrich cargoodrich
3
880
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
Avatar for Liv Day livdayseo
0
230
Agile Leadership in an Agile Organization
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
300
Dominate Local Search Results - an insider guide to GBP, reviews, and Local SEO
Avatar for Greg Gifford greggifford
PRO
0
390
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
50
10k
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
330
41k
Highjacked: Video Game Concept Design
Avatar for Ryan Kendrick rkendrick25
PRO
1
500

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