1px の変化も見逃さない！ビジュアルリグレッションテスト導入で快適フロントエンド開発 - dely Tech Blog
こんにちは！dely でフロントエンドの開発をしています @all__user です。 今回は kurashiru のフロントエンド開発に導入されたビジュアルリグレッションテストについてご紹介したいと思います。 【反応を多くいただいた点について記事の最後に追記しました】 目次 目次 ビジュアルリグレッションテストとは 導入の背景 フロントエンドのテスト？ SPA移行前後の比較 ツール reg-suit Loki Wraith BackstopJS テストのフロー GitHub + CodeBuild + BackstopJS ステージング環境 テストケースは Google スプレッドシートで管理 結果を S3 にアップロードして Slack に通知 まとめ 【追記】 運用が大変ではないか？ 1pxの違いにそこまで工数かける？ 広告が差し込まれたり変わっただけでテストが壊れるのでは？ ビジュ
Webデザインや配色をサポートする新サービス「Croppy」をリリースしました | Stocker.jp / diary
Webデザイン Webデザインや配色をサポートする新サービス「Croppy」をリリースしました Wednesday, October 26th, 2011 WordCamp KOBE で私の講演をご覧になった方はご存知かと思いますが、Webデザインや配色をサポートする新サービス Croppy（クロッピィ） をようやくリリースしました。 Croppy にアクセスすると、このようなページが見れます。 色々なサイトのパーツが「ヘッダー」や「サイドバー」「ボタン」などカテゴリ毎に並んでおり、ブブンデザインアーカイブ のように見えるかもしれません。 しかし、Croppy は集められたパーツを見るだけではなく「今見ているWebページをブラウザ上で切り抜き、手軽にスクラップできる」のです。 Twitter または Facebook アカウントで Croppy にログインしたあと、気になるデザインのサイト
PNGの画質を劣化せず極限までファイルサイズを落とす、たった1つの方法 | フリーソフトラボ.com
ウェブ上で使用される画像ファイルのフォーマットには、主にJPEG、GIF、PNGという3種類の圧縮形式があり、この中で可逆圧縮かつフルカラー、つまり元画像の画質を見た目上一切劣化させることなくファイルサイズを縮小できるのがPNGですが、欠点は高画質な分ファイルサイズが大きくなってしまいがちなこと。 このため、フルカラーのPNGをウェブ上で使用する場合は専用ツール（有名なものではAzConvPNGなど）を使用してファイルサイズの最適化を行い、画質を劣化せずにできる限りサイズを落とした上でサーバーにアップロードされることがよくありますが、それでも削減できるファイルサイズは良くて1割といったところでしょう。 実は、一般にはほとんど知られていませんが、この他にもフルカラーPNGを画質劣化なしに、さらに大幅にファイルサイズを削減できる裏技的な方法が存在します。やり方は少し面倒ですが、うまく使えば非常
「このサイトを5秒間だけ見て覚えていることを教えてください」テストが作れる『Clue』 | 100SHIKI
ウェブサイトの印象をテストするときに使えそうなサービスのご紹介（どこかで紹介した気もするが・・・まぁ、いいですか）。 Clueの使い方は簡単だ。 まずはこのサイトでテストしたいサイトのURLを入力する。するとテスト用のURLが作られるので、それを被験者に渡すだけだ。 被験者はそのURLにアクセスすると5秒間だけサイトのスクリーンショットを見せられて、何を覚えているかを記入することができる。 このテストによって、意図していなかったものが記憶されていたり、記憶されていなかったり、といったことがわかるだろう。サイトのリニューアルなどをするときに参考にしたいですな。
12 Really Useful Image Optimization Tools For Web Designers - Web Design Booth - Your Home For The World Wide Web
Images are very important because they will make your web pages look nicer and more attractive. But, high quality and beautiful images always huge in file size. They make your pages load slower and consume more bandwidth. So we, the designers should optimize the images so that they are tiny in file size, but good in quality. There are a lot of useful image optimization tools which can help us to o
ウェブデザインに役立つカラースキームのサンプルやジェネレーター集
The Web Squeezeのエントリーから、ウェブデザインに役立つカラースキームのサンプルやジェネレーターを紹介します。 25 Color Palette Generating Resources for Web Designing!
黄金比などを使用して、緻密で美しいグリッドを設計できるツール集 | コリス
黄金比や白銀比などを使用して、緻密で美しいグリッドを設計したり、設計したグリッドを表示・確認できるアプリケーション・オンラインサービスの紹介です。 アプリケーション関連
XHTML-CSS Validator
Just type or paste an URL in the form above, and click on "check it" to see the magic. If you want to fine tune your validation, click on the "advanced" link. That's it! An Idea: The Social Media Algebra I used to be very good at maths. I really was. Then I started studying computer science stuff (which is normal for a computer scientist) and as time goes by, I forgot many of the coolest stuff I l
Browsershots
No active screenshot factories. Please try again later. What is Browsershots? Browsershots makes screenshots of your web design in different operating systems and browsers. It is a free open-source online web application providing developers a convenient way to test their website's browser compatibility in one place. When you submit your web address, it will be added to the job queue. A number of
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
