moonbloggerのブックマーク - はてなブックマーク

phiary

Code Chip タグの定義部分です. Jade で書いてます. chip(class='{has-icon: opts.icon, deletable:opts.deletable}') div.chips-icon(if='{opts.icon}') span(if='{opts.icon === true}', style='background-color: {iconColor};') {value.substr(0, 1)} img(if='{opts.icon !== true}', src='{opts.icon}') a(href='') {opts.value} div.delete-icon(onclick='{_del}') i.material-icons clear style(scoped, type='less'). :scope { display: i

moonblogger 2016/06/02

JavaScript

リンク

phiary

phi I'm a Game Programmer and Frontend Engineer passionate about programming education. Math / C / C++ / C# / JavaScript / HTML5 / CSS3 / Python はじめに「webpack インストールしといてー」, 「gulp 導入して watch しながら開発してー」, 「React だから ES6 でコード書いてー」最近こんな会話が当たり前のように現場で飛び交っています. フロントエンドの開発者には HTML, CSS に特化している人 (coder, markup engineer) JavaScript は得意だけど CSS はちょっと弱い人 (javascripter) HTML, CSS, JavaScript 全てを統べる者 (frontend

moonblogger 2016/06/02

JavaScript

リンク

phiary

phi I'm a Game Programmer and Frontend Engineer passionate about programming education. Math / C / C++ / C# / JavaScript / HTML5 / CSS3 / Python オレの Advent Calendar 2015 - Adventar の 12 日目です. git を使っていると空ディレクトリを管理したいってことよくあると思います. 一時(tmp)ファイルやログ(log) ファイル用のディレクトリなんかがそうですね. 実は, git は空ディレクトリは add できない仕様みたいです. ですが, .gitignore を上手く使うことでそれっぽいことができるようになります. 今回はその方法を紹介したいと思います. 1. ".gitkeep" という空ファイルを配

moonblogger 2015/12/13

Git

リンク

phiary

今回は CSS3 から box-sizing について紹介します. width や height と同時に border や padding を指定しているときに, 少し値を変えただけで意図しない表示になったりレイアウトが崩れたという経験はありませんか？これはボックスサイズの算出方法が複雑なのが原因です. そんな面倒な問題を解決してくれるのが box-sizing プロパティです!! box-sizing プロパティを指定することでボックスサイズ(width, height) の算出方法を指定することができます. あまり普及していないようですが, 実はこれめちゃめちゃ便利だったりします!! まだ独自実装レベルだからかもしれません. ですが, 現在のCSS3 の草案にも一応残ってるので, がっつり使わせて頂いてる次第です.