俺的フロントエンド開発
7. CSSプリプロセッサ • SASS • インデントベース • 記法が厳格 • {};が不要 • SCSS • インデント無視 • CSSを入れ子と変数に対応させ た感じ • CSSをそのままSCSSプリプロ セッサに わせてもエラーでな い • LESS • SCSSの記法違い、みたいな 感じ • 使ったこと無いので分から ない • Stylus • なんかもう自由にかけるや つっぽい • 使ったこと無いので分から ない 8. SASS @import “compass” body margin: 0 padding: 0 #main border: 1px solid #000 +border-radius( 4px ) ul &.list li display: inline-block body{ margin: 0px; padding: 0px; } #main{ bord
Big Sky :: 開発速度を加速するツール、goemon を書いた。
SPA (Single Page Application) を書いていると、いちいちブラウザをリロードするのが面倒で、かつ js を minify してページをリロードするといった面倒な手間を出来れば何も設定せずにやりたい(もしくは微量な設定だけでやりたい)、という思いから goemon というツールを書きました。 mattn/goemon - GitHub https://github.com/mattn/goemon goemon は、コマンドラインツールとして使います。まず $ goemon -g > goemon.yml で goemon.yml を生成します。個人的にカスタマイズしたい人は生成されたファイルを変更して使って下さい。 # Generated by goemon -g livereload: :35730 tasks: - match: './assets/*.js'
“マークアップ”するということ ～ HTML5勧告に寄せて ～
HTMLを適切な要素を使って書いていくことは実はそれほど難しくはない。しかし過剰に要素を使わずに、かつスタイリングすることも意識して、と適切に“マークアップ”するのはなかなかの修練を必要とする。いったい“マークアップ”するということはどういうことなのだろうか、そしてどのような思考の元に行えば良いのだろうか。 HTML5での変化 著作権表示のマークアップ small要素 footer要素とsmall要素 p要素とdiv要素 footer要素とp要素 スタイリングとの兼ね合い マークアップするということ HTML5での変化 コンテンツに則した素直な形でマークアップできること。 HTML5で変わることや変わったことは多くあるが、それらをおおまかに俯瞰するとこのような言葉に集約できる。そのために様々な要素や属性が追加され、既存の実装をなるべく壊さない形で要素の意味に変更が加えられた。これらの変化は
『フロントチューニンガソン 最速を目指すには』
11:10～ 課題ページの確認＆PageSpeed Insightsの実行目的：チューニング対象のウェブサイトの改善の余地を調査 上記のgruntプラグインをインストールする npm install コマンドを実行しながら、ブラウザやIDEでチューニング対象のウェブサイトを確認し始めました。 少し見ただけでもCSSの構文エラーがあったり、使っていないJavaScriptライブラリがインポートされていたり…。 まるで無茶な運用を数ヶ月続けたかのような、カオスなファイル群でした。 ここで実行した PageSpeed Insights に画像サイズの最適化をオススメされたので、まずはそこから行うことにしました。 11:20～ 画像ファイルの最適化目的：画像ファイルサイズの削減 30 x 30pxで表示している画像ファイルが実際には150 x 150pxで保存されていたりする画像がそこそこあったの
フロントエンドエンジニア（仮） 〜え、ちょっとフロントやること多すぎじゃない！？〜
Koji Ishimoto gives a presentation on front-end engineering. He defines a front-end engineer's responsibilities as including JavaScript, version control with Git, modular code, browser developer tools, command line, templating, CSS preprocessors, testing, automation, code quality and manuals. He discusses common front-end tools, managing tools with Grunt, and tracking speed with tools like WebPage
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
現在のWebフロントエンドの現状と愚痴と、それに対するHaxeフロントエンドライブラリMageについて
