Let's talk about Web Performance — Pony Foo
For the past few months I’ve been speaking at conferences about web performance. Unfortunately, none of those awesome conferences have published their talk videos just yet. I figured I’d publish a write up about the talk, the things I’ve learned since I started speaking about these things, and the key take-aways from my talk. The presentation (you can find the slides online here) is split into thr
How to Become a Great Front-End Engineer — Philip Walton
I recently received an email from a reader of my blog that, for whatever reason, really got me thinking. Here’s what it said: Hi Philip, is it okay to ask how you become a great front-end engineer? Any advice? I have to admit, I was surprised to even be asked this question since I’ve never really thought of myself as a “great” front-end engineer. In fact, the first few years I worked in this indus
HTMLメールワークフローに役立つGruntプラグイン | チャットワーククリエーターズブログ
こんにちは、先日Web開発チームに加わりました西口です。 HTMLメールの制作って煩わしくないですか？ おそらくそう感じているWebデザイナーの方は多いのではないかと思っています。 HTMLメールの制作って大変特に下記のような点が挙げられると思います。 テーブルレイアウト（コーディング面倒…）インラインCSS（コーディング面倒…）メールクライントごとで差のあるCSS対応（表示チェックどうすんの…）各種メールクライアントでの表示テスト（古い環境もまだまだ現役…）などなど… 弊社でもHTMLメールはそこまで頻繁に作成することがなかったので、これまでワークフローを見直すことがなく、ヘイトの増加を感じつつもHTMLを直接コーディングして作成していました。 ただ、やはりこういうフローでは時間がかかってしまったり表示確認が面倒だったので、どうにか効率良くならないかと調べていたら、HTMLメール作成用の
Importing CSS Breakpoints Into JavaScript | Lullabot
There are a lot of challenges within responsive web design, and one that that has constantly been a pain is triggering JavaScript based on the current CSS media query breakpoint. The problem is that the breakpoints are in CSS, which JavaScript has no native way to access. Many solutions (including window.matchMedia(), and Enquire.js) involve declaring your breakpoints in both CSS and JS, or requir
【フロントエンド】新規 Web アプリケーション開発案件をふりかえってみた | PSYENCE:MEDIA
4 ヶ月あまり続いた新規開発案件がようやく落ち着きを見せたので、ここらで振り返りをしてみたいとします1)リリースまでに巻き取れなかった不具合や未実装箇所が幾つか残っているので、まだ気持ち的には終われていないのですが…。 サービスのおおまかなアウトライン コンシューマ ( 一般ユーザー ) 向けサービス ブラウザで動く Web アプリケーション ワンソースによるレスポンシブレイアウト サポートするブラウザは IE9 以降や Android4.x 以降のモダンブラウザのみ Ruby on Rails 多言語対応あり SEO 対策はそれなりに必要 わりとフワッとしか要件が決まっていないままスタートしたので、TRY & ERROR を繰り返しながらの開発 すごく大雑把ですが、だいたいこんな感じの Web アプリケーションです。これを踏まえてフロントエンドをどのように開発していくかを設計していきまし
webpackを使い倒す - Thujikun blog
本エントリーJavaScript Advent Calendar 2014 7日目の記事になります。 webpackとは 概要については最近いろんな方が書いてるいるのでそちらを参考にしていただければつかめるかと。 全部のせRequireJSっぽいWebpackを使ってみた。 RequireJS等はもう古い。WebPackとは？ ようはナウいフロントエンドの依存解決ツールですね。 っていうネタで書こうと思っていたら、昨日yutaponさんが既に書いていたりするので（gulp.jsを使ってフロントエンドのビルドをする【webpack, stylus】）、いいところはパクリ参考にしつつ、もうちょっとwebpackに突っ込んだ内容を書いてみようと思います。 Options entryとoutput 簡単に試すときはentryは1ファイルだけ指定できればよいですが、実際にプロジェクトで使うとなると複
連番の静止画をコマ送りでアニメーションさせた話
問題です。とあるアニメーションデータの各フレームを静止画として書き出した200枚前後のPNGファイルがあったとします。この連番の静止画を秒間30コマでアニメーションさせてください。さあ、どうしますか？ この問題にたいして、自作の画像生成ツールを作って解決したというお話です。 先日の案件にて、そんなお仕事がわたしに課せられました。そのときの課題と制約は以下のような感じでした。 IE8以上のブラウザに対応すること iOSデバイスで専用の再生画面を表示することなく再生できること 閲覧時、画面内にスクロールインしたタイミングで自動再生すること 任意のタイミングで再生開始・停止できること 可能な限りファイルサイズを削減すること IE8対応が必要なので、Canvasは使えません。<video>タグはiOSで自動再生できないし、再生ボタンをタップすると画面が変わってしまうのでダメ。好きなタイミングで再生
ProgressBar.js - Progress bars with JavaScript
With ProgressBar.js, it's easy to create responsive and stylish progress bars for the web. Animations perform well even on mobile devices. It provides a few built‑in shapes like Line, Circle and SemiCircle but you can also create custom shaped progress bars with any vector graphic editor. ProgressBar.js is lightweight, MIT licensed and supports all major browsers including IE9+. Usage A simple cod
Loading webfonts with high performance on responsive websites
Once upon a time every website was only using Arial, Verdana, Garamond or Times New Roman for rendering the text, because these font were the only ones reliably installed on almost any computer. But these times are over. Webfonts are spread all over the internet, but we still don't really know, how to load them efficiently. Here is my simple guide on what to do, to offer the optimal user experienc
Timesheet.js
Timesheet.js Visualize your data and events with sexy HTML5 and CSS3. Create simple time sheets with sneaky JavaScript. Style them with CSS and have mobile fun as well … Just include Timesheet.js and configure your data. No external dependencies, no jQuery needed and of course no Angular.JS! Just a few lines JavaScript to generate a beautiful HTML5 layout and some really delicious CSS to be custom
ruby_enabler.js｜ルビ表示を改善する JavaScript
Internet Explorer 8,9 / Firefox / Chrome / Safari / Opera などの主要(しゅよう)なブラウザで、まずまず適切(てきせつ)なルビ表示(ひょうじ)を実現(じつげん)する JavaScript + CSS です。 さてさて、<ruby> タグ、<rb> タグ 、<rt> タグ、<rbc> タグ 、<rtc> タグ、 <rp> タグを使用して、ウェブページ上でルビを表示することが可能 … とされていますが、実際には、これらのタグには、 Firefox / Opera では（現在のところ）機能しない。 HTML4(XHTML1.1)での書式と、HTML5での書式が異なる。HTML5 では rbタグ、rbcタグ、rtcタグ が廃止される予定です。 バグっぽい処理をするブラウザ（Safari 5）が存在する。 …という問題があります。（各ブラウザで
僕がGrunt.jsで使っているPlugin一覧 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? どんなニーズに基いているか デザインやちょっとしたプログラミングをする人なので、単体テストとかはないです。 デザイナーだけどフロントエンドに興味ある人向け。 2015-02-07: gulp編を作成 gruntからgulpへ移行したので、gulp版の一覧も作成しました。 僕がGulpで使っているPluginとnode.jsモジュール一覧 - Qiita プラグイン一覧：非Contrib系 grunt-aws-s3 S3にアップロードできるプラグインはいくつかあるけど、いくつか試して一番良かったのがこれ。 同名ファイルは確認なしで上書き可
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GGDEWA777 : Link Situs Equinox Rekomendasi Jaminan WD
http://www.monster-dive.com/blog/web_creative/20141025_001232.php
CSSやJSのキャッシュ対策をGruntで行う - Qiita
Mobile Web App Checklist | Luster
Loaders Loading! - a Collection by Team CodePen on CodePen
Design Patterns on CodePen
【Grunt.js】ブラウザを同期してくれるgrunt-syncがスマホ制作で最強な件
Blog - LINE ENGINEERING