Upgrade to Pro — share decks privately, control downloads, hide ads and more …

console.animate

katashin
September 15, 2017
Programming
2
2.6k

 console.animate

ToKyoto.js ― Kyoto.js in Tokyo
https://kyotojs.connpass.com/event/64310/

katashin

September 15, 2017
Tweet

More Decks by katashin

See All by katashin
テストの重要性 / Test is Important
ktsn
0
190
Gulp のビルドをもっと効率化するツールを作ってみた / Making a Tool for Optimizing a Build Process of Gulp
ktsn
2
2.3k
ラムダ計算入門 / Introduction of Lambda Calculus
ktsn
0
300
Contextual ThisType and Vue.js
ktsn
0
13k
TypeScript で型検査器を作る / Implementing a type checker with TypeScript
ktsn
0
22k
大規模静的サイトのためのビルドツール
ktsn
0
2.2k
型付きテンプレートがほしい
ktsn
1
44k
Toward Type Safety of Vuex
ktsn
1
960
Vue の TypeScript 事情
ktsn
1
2.6k

Other Decks in Programming

See All in Programming
Pulsar2 を雰囲気で使ってみよう
anoken
0
240
Lottieアニメーションをカスタマイズしてみた
tahia910
0
130
SpringBoot3.4の構造化ログ #kanjava
irof
2
990
2024年のkintone API振り返りと2025年 / kintone API look back in 2024
tasshi
0
220
iOSエンジニアから始める visionOS アプリ開発
nao_randd
3
130
Rubyで始める関数型ドメインモデリング
shogo_tksk
0
110
CI改善もDatadogとともに
taumu
0
120
Rails アプリ地図考 Flush Cut
makicamel
1
120
コミュニティ駆動 AWS CDK ライブラリ「Open Constructs Library」 / community-cdk-library
gotok365
2
120
Domain-Driven Transformation
hschwentner
2
1.9k
一休.com のログイン体験を支える技術 〜Web Components x Vue.js 活用事例と最適化について〜
atsumim
0
470
SwiftUIで単方向アーキテクチャを導入して得られた成果
takuyaosawa
0
270

Featured

See All Featured
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Fireside Chat
paigeccino
34
3.2k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
GraphQLとの向き合い方2022年版
quramy
44
13k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
For a Future-Friendly Web
brad_frost
176
9.5k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
The Pragmatic Product Professional
lauravandoore
32
6.4k
Code Reviewing Like a Champion
maltzj
521
39k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.8k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k

Transcript

  1. console.animate

  2. !LUTO LBUBTIJO

  3. ͬͪ͜ͷ࿩͡Όͳ͍Ͱ͢

  4. IUUQTEFWPSPDPN

  5. None
  6. None

  7. render(‘͜Μʹͪ͸’) ͜Μʹͪ͸ <canvas> [0, 0, 0, 0, 0, 0, 0,

    209, 0, …] ImageData

  8. [0, 0, 0, 0, 0, 0, 0, 209, 0, 0,

    0, 255, …] ImageData SFE HSFFO CMVF BMQIB

  9. BMQIBͰUSVFɹͦΕҎ֎ͰGBMTF [ [f, f, f, f, f, f, … ],

    [f, f, f, f, f, f, … ], [f, f, f, f, t, t, … ], [f, f, f, f, t, t, … ], [f, f, f, f, f, f, … ], … ]

  10. पลͷGBMTFΛמΓऔΔ [ [f, f, f, f, f], [f, t, t,

    t, f], [f, t, t, t, f], [f, f, f, f, f] ]

  11. 5SVFˠ˙ɹGBMTFˠ˘ [ [˘, ˘, ˘, ˘, ˘], [˘, ˙, ˙,

    ˙, ˘], [˘, ˙, ˙, ˙, ˘], [˘, ˘, ˘, ˘, ˘] ]

  12. 7JFXQPSUΛͣΒͯ͠Ξχϝʔγϣϯ DPOTPMFDMFBSˠDPOTPMFMPHˠʜ [ [˘, ˘, ˘, ˘, ˘], [˘, ˙,

    ˙, ˙, ˘], [˘, ˙, ˙, ˙, ˘], [˘, ˘, ˘, ˘, ˘] ]

  13. ΧʔιϧͳΜͯͳ͍ͷͰ DPOTPMFDMFBSˠDPOTPMFMPHˠʜ

  14. ʊਓਓਓਓʊ
 ʼɹ׬੒ɹʻ
 ʉ:?:?:?:ʉ

  15. 'JSFGPY $ISPNF 4BGBSJ

  16. ͳ͔ͥ'JSFGPYͷEFWUPPMͷύϑΥʔϚϯε ͕܈Λൈ͍ͯྑ͍ DPOTPMFMPHͷୈೋҾ਺ʹ͸ελΠϧΛ౉ͤΔ console.log('%cfoo’, 'font-size: 10px;') DBOWBTʹେ͖Ίʹॻ͍͔ͯΒ খ͍͞αΠζͰDPOTPMFMPH͢Δͷ͕ྑ͍ײ͡ ஌ݟ

  17. ࣍͸Τοδݕग़ʜʜʁ render(‘’)