Measure, Optimize, Automate
A relevant ad will be displayed here soon. These ads help pay for my hosting. Please consider disabling your ad blocker on Pony Foo. These ads help pay for my hosting. We’ve already covered the different techniques you could use to vastly improve the performance of your front-end applications, their page load time, and the perceived performance (determined by the moment when the human can start in
Front-end Tooling Workflows
~ 198 slides on tools to help you stay productive on the front-end.
jit-grunt で grunt をキビキビ動作の高速化
Take Grunt to the Next Level — Jonathan Suh この記事を見て知ったのだが、jit-grunt というプラグインが中々よい。Just In Time ということで、タスクのロードを loadNpmTasks でまとめて最初にやる代わりに、各タスクの実行時までロードを遅延させるというもの。 npm の jit-grunt ページを見ると相当数がダウンロードされて利用者がいるようだが、検索するとあまり紹介されてないようだったので書いてみる。 効能 17個のタスクをロードしていた手元の環境に導入したところ、単純なタスクを実行した限りでは次のような実行時間の短縮が見られた。計測は例によって time-grunt だ。 Before loading tasks で 625ms かかっていて、全体では 651ms を要した。 % grunt concat:lib
Explorations In Automatically Fixing JavaScript Linting-errors
Explorations In Automatically Fixing JavaScript Linting-errors September 30, 2014 Linting is a common step in our JavaScript iteration workflow. Most developers probably use JSHint (or ESLint) for this purpose. However, when a tool is capable of informing you of linting issues, the next logical question is..why can't it fix these issues for us? Is this taking automation too far, or a logical compl
Reaching Everyone, Fast at Velocity NY, 2014
Mobile subscriptions continue to increase at an incredible rate, with most of that growth coming from emerging economies such as Africa and Southeast Asia. These areas are dominated by slow, intermittent connectivity and low-end devices. If companies aren’t already taking steps to ensure they are able to reach these new audiences, they soon will be. Presented at Velocity NY, in New York City, NY o
CSS Performance Tooling
Presented at CSSConf.eu, September 2014. Video: https://www.youtube.com/watch?v=FEs2jgZBaQA You've learned the concepts, now meet the tools. High-performance sites need to feel instant and deliver the goods in < 1000ms. In this talk, learn about the bleeding edge tools that can automate keeping your CSS on the fast path. Automate generating critical-path CSS, removing unused CSS, discovering dupli
RxDB - JavaScript Database | RxDB - JavaScript Database
Realtime applications made easyFrom the results of a query, to a single field of a document, with RxDB you can observe everything. This enables you to build realtime applications fast and reliable. Whenever your data changes, your UI reflects the new state. RxDB supports RxJS and any reactiveness libraries like signals, hooks or vue.js-refs. Writeawait collection.upsert({ id: 'foobar', color: '#e6
grunt-task-helperが良さそう
grunt-task-helperというGruntプラグインを使っている。ざっと言うとsrcとdestを比較してフィルターをかけた結果を他のタスクで使えるようになったりするもの。例えばビルトインの比較機能であるnewFileを使うと、更新されたファイルがあった場合にだけ走るタスクと似たようなものが簡単に作れる。 grunt-contrib-concatを使っているとして、そのタスク設定が以下のようになっているとする。 concat: { options: { seperator: ';' }, prettify: { src: [ 'scripts/prettify/prettify.js', 'scripts/prettify/lang-config.js', 'scripts/prettify/lang-css.js', 'scripts/prettify/lang-scss.js',
Browsersync - Time-saving synchronised browser testing
Time-saving synchronised browser testing. It’s wicked-fast and totally free. npm install -g browser-sync Get Started Your indispensable test assistant. With each web page, device and browser, testing time grows exponentially. From live reloads to URL pushing, form replication to click mirroring, Browsersync cuts out repetitive manual tasks. It’s like an extra pair of hands. Customise an array of s
ページ表示速度の問題チェックをしてくれるgrunt-pagespeedについて紹介するよ - Qiita
Gruntfile.js grunt-pagespeed タスクをロードするように追記し、pegespeedタスクを定義します。 ここではPageSpeedのデスクトップ版チェック、モバイル版チェックを定義しています。 module.exports = function(grunt) { grunt.initConfig({ pagespeed: { desktop: { options: { paths: ['/', '/bijin-zoroe/', '/bijin/1134'], locale: 'ja_JP', strategy: 'desktop', threshold: 70 } }, mobile: { options: { locale: 'ja_JP', strategy: 'mobile', threshold: 65 } }, options: { key: 'API_
Gruntタスクで環境変数を定義する(grunt-env) - テノニッキ (@hideack 's diary)
Node.jsで開発しているプロジェクトでGruntを利用しているときに、タスクによって環境変数を定義したい場合、grunt-envを利用すると便利ですよ。という話。 npmでgrunt-envをインストール。 $ npm install grunt-env --save 次にGruntfile.jsを編集します。以下の様な具合。 module.exports = function(grunt) { grunt.loadNpmTasks('grunt-env'); // grunt-env追加 grunt.initConfig({ env: { dev: { NODE_ENV : 'development' }, production: { NODE_ENV : 'production' } } }); 上の様に定義した上で、例えば既に、serverというタスクにコンパイル及びNode.j
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - stephanmax/grunt-responsive-images-extender: A Grunt plugin that extends HTML image tags with srcset and sizes attributes.
GitHub - addyosmani/es6-tools: An aggregation of tooling for using ES6 today
GitHub - indieisaconcept/grunt-styleguide: Universal CSS styleguide generator for grunt. Easily integrate Styledocco or KSS styleguide generation into your development workflow.
GitHub - nDmitry/grunt-autoprefixer: Parse CSS and add vendor-prefixed CSS properties using the Can I Use database. Based on Autoprefixer.