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

LINE Developer Meetup: Javascript All The Things

LINE Developer Meetup: Javascript All The Things

Joel Billaud

July 20, 2016
Tweet

Other Decks in Programming

Transcript

  1. Perl JavaScript (ES6) bless +{ description => $description, methods =>

    \@methods, }; bless +{ description => $description, methods => \@methods, }; { description, methods, };
  2. PSD

  3. PSD npm install psd # > const PSD = require('psd')

    > const psd = PSD.fromFile(filepath) > const layer = psd.tree().children()[0] // PSD > layer.name // 'Friends @a.top.title' >[layer.width, layer.height] // [629, 1140] > layer.toPng() // Stream { ... }
  4. "AndroidFriends": { "ja": { "width": 720, "height": 1232, "layers": [

    { "color": "a.friends.bg" "rect": { "left": 0, "top": 0, "width": 720, "height": 1232 } }, { "color": "a.top.button" "src": {
  5. function renderPreviewScreen(ctx, preview) { // Promise const renderers = preview.layers.map(layer

    => { if (layer.element) { return loadElementLayer(...); } else if (layer.rect) { return loadRectLayer(...); } else { return loadSpriteLayer(...); } }); // ... function loadSpriteLayer(layer, spriteUrl, colors) { return loadImage(spriteUrl).then(sprite => { return function render(ctx) { ctx.drawImage(sprite, src, dst); }; }); }
  6. // Promise.all(renderers).then(...); // renderers.each(render => render.then(...)); // renderers[0].then(render => render(ctx))

    .then(() => renderers[1]).then(render => render(ctx)) .then(() => renderers[2]).then(render => render(ctx)) ... .then(() => renderers[n]).then(render => render(ctx)) // reduce renderers.reduce((previous, current) => { return previous .then(() => current) .then(render => render(ctx)) });
  7. function renderPreviewScreen(ctx, preview) { return preview.layers.map(layer => { if (layer.element)

    { return loadElementLayer(...); } else if (layer.rect) { return loadRectLayer(...); } else { return loadSpriteLayer(...); } }) .reduce((previous, current) => previous.then(() => current) .then(render => render(ctx)) ); }