Web系企業のエンジニアブログまとめ

クックパッド開発者ブログ Hatena Developer Blog GREE Engineers' Blog DeNA Engineers' Blog [ Technology of DeNA ] mixi engineer blog pixiv inside サイバーエージェント 公式エンジニアブログ

JSで抽象クラスごっこ

class AbstractClass { constructor() { } abstractMethod() { throw "Not Implemented" } }

ChromeでWebAnimationAPIが使えるようになった

Polyfillもあるので、積極的に使っていきたい github.com

いい感じのWebサイトの探し方

ここで言ういい感じのWebサイトとは、 デザインが優れていたり、演出盛々だったり、3Dゴリゴリで最先端っぽかったり、 そういうサイトを指す。 アワード系のサイトを見る AWWWARDS www.awwwards.com 大手。 レベルの高いサイトが多いのはもちろん、 メタスコ…

自作ライブラリなんか使うな!!!

どうにも、僕の周りには、 なんでも自作したがる人が多くて、 EventEmitterも、Throttleも、 果てはjQueryライクなライブラリまで、俺俺でやってる始末。 マジでやめてほしい。 なんで人と足並み揃えられないんだろう。 そんなちんけなライブラリ、自前で作…

CoffeeScriptを書くならCoffeeらしく書いて欲しいという思い

厳密等価(===) javascript if(a === b) coffeescript if a is b undefined javascript if(a !== undefined) coffeescript if a? 否定if javascript if(!a) coffeescript unless a 後置if javascript if(a) return; coffeescript return if a 即時関数 java…

git pull したときデフォルトで rebase するようにする

git config --global branch.autosetuprebase always

CSS calc ってこういうときに使えばいいのか

run scripts の タスクランナー

hystking/npm-run-build-task-runnergithub.com かいた

We Will All Be Game Programmers

面白いのでぜひ見てください。 状態と副作用について、ゲームからReactまで、なぜそれらが重要か、それらを安全に取り扱うにはどうするべきか、丁寧に説明しています。

gulp で livereload できる開発用サーバを立てる

gulp で開発用サーバを立てるには、gulp-connect とか、gulp-webserver とががあるんだけど、 ブラックリスト入りしていて、 gulp 的には 「入出力を伴わない処理をプラグインにすんじゃねーよバーカ」 ってことなんだと思う。 なんだか過激だなあと感じつつ…

最近よんだ漫画

あれよ星屑 超おもしろい あっち系の人が描く漫画は面白いという法則 クジラの子らは砂上に歌う 超好き 登場人物全員かわいい系殺戮SF、続きが気になる 魔法使いの嫁 超かわいい 人生達観系ヒロインすき ちーちゃんはちょっと足りない 超胸糞わるい ほんと救…

GLSLで指定位置をクロップした正規化座標

vec2 p = ( ( ( vec2(0., 画面高さ解像度) - gl_FragCoord.xy ) * vec2(-1. ,1.) - クロップオフセット ) * 2.0 - クロップ解像度 ) * vec2(1., -1.) / min(クロップ解像度.x, クロップ解像度.y);

ES6は

ES6は、ES6改め、ES2015になるみたいです JavaScript 2015?

フロント大ビルド時代にレスポンシブって意味あるか?

問いたい

that just works

OAuth that just works. OAuth系の認証をいろいろ肩代わりしてくれるサービス すげい捗る サーバなしでAPI叩けるようになる

lodash 3.0 のうれしい新機能

Release 3.0.0 · lodash/lodash · GitHub _.trim ずっと欲しかった。うれしい _.pad, _.padLeft, _.padRight 使えそうという気がする lodash-fp 使いこなせる男になりたい lazy evaluation うれしい。take 使うと爆速になるのかな module分割 フロントで使う…

Chrome拡張でスクショを取る

chrome.tabs - Google Chrome これだ!

どうしようもなくこういう映像すきさね

【ニコニコ動画】【初音ミクオリジナルMV】 ココロの質量 【Dubstep】

あー今日

ほんと精神的にやばい 今年度一番やばい

感想『喜嶋先生の静かな世界』

Amazon.co.jp: 喜嶋先生の静かな世界 (100周年書き下ろし): 森 博嗣: 本 「元を辿ると、そもそもね、他人に認めてもらうということが、信じられないくらい面倒な行為だよね。これよりも面倒なことって、そうそうないというくらい面倒だ。くわばらくわばら」…

感想『○○○○○○○○殺人事件』

Amazon.co.jp: ○○○○○○○○殺人事件 (講談社ノベルス): 早坂 吝: 本 何を書いてもネタバレになりそうだから、あまり色々書けないんだけど ある重大な事実が判明した箇所は笑いました。 あとから見直すと、それなりに伏線もあって納得……でもわかるか! でも、そ…

最近読んだ漫画

Amazon.co.jp: 足摺り水族館: panpanya, 1月と7月: 本 ミッションちゃんの大冒険みたいな表紙してんなと思って手にとったら、 ミッションちゃんの大冒険 - 毒 みたいな内容で良かった 表題作とフランス人がフランスパン食ってる話すき Amazon.co.jp: オン…

EventEmitter (EventDispacher) の階層構造

フロントエンドにおいて、それなりに普遍的な問題な気もするんだけど、 例えば、何かDOMと紐づくクラスを作ると、 どうしても親子関係を持たせたくなって class ParentUnit extends EventEmitter constructor: -> @childUnit = new ChildUnit render: -> """<div></div>…

Stylus の @要素

.box width: 100px height: 200px background: #f93 position: absolute left: 50% top: 50% margin: (-@height/2) (-@width/2) See the Pen WbxajP by Eksib (@goomy) on CodePen. 自動生成したスプライトとか使う時便利

感想『日本SF短篇50 V』

Amazon.co.jp: 日本SF短篇50 V: 日本SF作家クラブ創立50周年記念アンソロジー (ハヤカワ文庫 JA ニ 3-5): 日本SF作家クラブ: 本 重力の使命 林譲治 70点 ハードな感じする。 竜の卵思い出した。 日本改暦事情 冲方丁 90点 普通におもしろい。 納得の映画化…

border-imageとbackground-attachmentの併用でよくあるやーつ

よくあるやーつ

ヘビロテ

【東方ボーカル】 「ライン」 【Liz Triangle】 - YouTube すき

coffee + lodashでやらかす凡ミス

class MyClass hide: -> @visible = false みたいなクラス作って lodash.eachで _.each instances, (i) -> i.hide() みたいな回し方すると全部回らなくて死ぬ なぜかconsole.logすると動くみたいな闇な感じになって死ぬ CoffeeScript Lo-Dash documentation

Google Chart API で QRコード作れる

しらなかった〜

Node をシェルスクリプト代わりに使う時、便利なもじゅおー

glob glob "img/**/*.png", options, (filenames) -> みたいな書き方ができる。 mkdirp パス貫通する mkdir gm 画像のリサイズとかクロップとか。 別途、GraphicsMagickのインストールが必要だけど、GPU使うから、ImageMagickより早い request HTTPリクエス…

手続きを意識させない設計をする

Twitter のツイート数を取得できる URL がある。 http://urls.api.twitter.com/1/urls/count.json?url=example.org 例えば、この URL からツイート数をコンソールに表示するプログラムを書きたいとする。coffeescript で 愚直に書くとこんな感じ JSON_URL = …

Press Start 2P

Google Fonts Press Start 2P 良い

co と jQuery 組み合わせて動くのでは

var co = require("co"); var $title = $("#title"); co(function*(){ yield $title.animate({fontSize: 100}).promise(); console.log("1"); yield $title.animate({fontSize: 10}).promise(); console.log("2"); yield $title.animate({fontSize: 200}).pr…

我々の求めた ES6 Generators と Arrow functions

動くじゃないか! let gen = function*(resume){ let wait1000ms = () => setTimeout(resume, 1000); yield wait1000ms(); document.write("Hello<br>"); yield wait1000ms(); document.write("ES6<br>"); yield wait1000ms(); document.write("Generators<br>"); yield …

ペライチのテンプレを作る趣味

hystking/p1 · GitHub 一向にベストプラクティスに辿り着ける気配がない

パラメータとかを stylus, jade, js 周りで共有するの

よく考えたら普通にできるよね globalParam = require "./global-param" # Jade jade.data globalParam # Stylus _.each globalParam, (val, key) -> stylus.define key, val, true 雰囲気こんな感じで grunt とか gulp に書いて JS は 普通に require して …

これほんとすき

z-index について思うこと

そもそも使わないのが正解だと思った(小並感)

.wrapper とか .content とか .main とか名付けない

body の直下に要素を置く時、 表題みたいな名前つけがちなんだけど、 万が一、そのページのコンテンツを 丸々別のページに移植することになったときのために ユニークな名前つけといた方がいい気がした

tests.caniuse.com

Caniuse test page ここ便利ではないか

Extending EventEmitter with coffeescript + browserify

EventEmitter = (require "events").EventEmitter class MyClass extends EventEmitter constructor: -> super() 人生捗る

Jade の attributes と block

これ知らんかった そしてめっちゃ知りたかった mixin hoge(link) a.hoge(href=link)&attributes(attributes) if block block +hoge("http://example.org/").fuga hello // => <a href="http://example.org/" class="hoge fuga">hello</a> こういうのできるの捗る mixin void-link() a(href="javascript:void(0);")…

エスケープしよう

Twitter のツイートの用の URL とか直書きできるけど https://twitter.com/intent/tweet?url=http://example.org エスケープしないと IE 系でエラーでちゃうので encodeURIComponent でエスケープを 追記: encodeURIComponent だけだと不十分らしいです enc…

Nightmare

未だ実用に耐えない気がした

node の出力に色をつける

colors 良いです

Don't Use A Reporter Called Nyan

mocha には nyan という素晴らしい reporter がいて、 こいつを使うと nyancat がテスト結果を知らせてくれる、 カワイイヤッターな攻守最強オプションなのだが、 mocha-phantomjs を使ってテストするとき、 reporter を nyan にすると、 大したエラー文も出…

koa, co そして thunk について

Node の Web Framework としては Express が有名だが、 最近は、Node の ES6 実装に伴い、 ES6 の新しい機能を利用した koa という Web Framework が注目を集めている。 koa は ES6 の generators をフルに活用したインターフェイスが特徴で、 今までの JS …

node-canvas

Automattic/node-canvas · GitHub 意外とよく動きました

Share Dialog

Share Dialog 複数のURLのシェアリンク貼れます