The Responsinator is designed to test responsive websites on different device resolutions
※この記事は本社サイト 「Naked Security」掲載の記事を翻訳したものです※ by Paul Ducklin on November 20, 2013 この記事に関する最新の更新情報は Naked Security 掲載記事をご確認ください。 読者の方は、Adobe 社で 2013 年 10 月に発生したデータ侵害のインシデントについてはご存じでしょう。 これは、1 億 5 千万件のレコードが漏えいした史上最大級のユーザー情報データベースに関するインシデントであるだけではありません。今回のインシデントから別の問題も見えてきました。 漏えいしたデータから、Adobe 社がユーザーのパスワードを不適切な方法で保管していたことが明らかになりました。同社の利用した方法よりも格段に安全でパスワードを保管する方法はあります。またそれが、決して難しくないことを考えると、セキュリティの観点からす
前回は Middleman を習得する前準備として Haml という HTML の拡張メタ言語について学びました。 #00 Haml 再入門 Haml は Middleman においてレイアウトファイルやテンプレートファイルを作成するのに使用します。デフォルトでは Haml ではなく ERb という Ruby 標準のテンプレートファイル形式が使われており、こちらは PHP や JSP と非常によく似た書式となっています(※拡張子はerb)。 身も蓋もないことを言ってしまうと、Haml を知らなくても ERb 形式で書くことで Middleman を使うことは可能です。ソースコード自体も標準の HTML 内に Ruby のコードが埋め込まれたような見た目なので、学習コスト自体は ERb のほうが低いかもしれません。しかしそれを考慮したとしても、コーディング自体の効率性やコードの見通しの良さか
Online diagramming tool for collaborating on wireframes, flowcharts, and more
2013年05月08日18:21 JavaScript 実際のサイト上で動作するチュートリアルが簡単に作れるIntro.jsが便利すぎる件 さて、先日簡単なチュートリアル作ろうと思ったんですが、どうやるのが良いのかなーと思って悩んでました。キャプチャ取ってそこに説明文を書いて…ってしてもいいんですけど、キャプチャだと一部分なのでサイト上のどの辺なのかわかりにくかったり、サイト側は変更したのにキャプチャが古いままとかになったりしちゃいますよね>< とか思って探してみたらこちらの Intro.js が便利だったので紹介してみます。 さて、この Intro.js を使うとですね、サイト上で動作するチュートリアルを簡単に作れるんですよ。使い方も簡単で、動作させたい要素に対して data-intro (表示する説明文) と data-step (チュートリアルの何番目に表示するか) を指定します。チ
CSSのfloatを解除(クリア)する方法をまとめてみました。 以前、floatを解除するテクニックとして以下の記事をエントリーしたのですが、その後色々なテクニックがあることに気がつきました。 CSS の after 擬似要素で回り込みを解除する ということで、そもそものfloatの問題(というか仕様)と、その対処方法についてネットで調べた情報を一通りまとめました。 1.floatにより親要素の高さが出なくなる(=背景がなくなる)問題 親要素の中にある子要素にfloatプロパティが設定されていると、内容をもたない親要素の高さが0になるという仕様になっています。 例えば、次のCSSとHTMLを例にします。 <style> #container { width: 200px; background: #ddd; } .box { width: 25px; margin: 10px; paddi
Web 開発してると、ソースを編集して、ブラウザーをリロードして、という作業の繰り返しになりがちだ。ソースを編集したら、自動でブラウザーをリロードしてくれるような夢のツールがあれば便利そうだ。 この分野では CodeKit や LiveReload などが有名なんだけど、もれなく有料だったり GUI だったりする。そこで、LiveReload のオープンソースな部分を参考にしつつ、コマンドラインで使える LiveReloadX というものを作ってみた。 特長はこんなところ。 Node.js を使ってるので Windows/Mac/Linux 問わずに動かせる 開発環境のブラウザーだけでなくスマートフォンのブラウザーもリロードできる 無料 インストール方法 インストールは超簡単! Node.js をインストールする。 コマンドラインで npm install -g livereloadx を
Smart WebP, PNG and JPEG Compression for Faster WebsitesOptimize now
Hashです。ミームの人と呼ばれていた時期が俺にもありました。現在、株式会社ジモティーでエンジニアをやってます。公私ともにidで呼ばれ、本名を忘れがちなのが最近の悩みですが、別に悩んでいません。 ジモティーのエンジニアは5人で、基本的にまんべんなく仕事をやるもののある程度得意不得意があって、僕はインフラというかサーバの世話をすることが多いです(諸般の事情により名刺にはインターフェイスエンジニアと記載されているのですが…)。 そこで今回は「ジモティーを支える技術」と題して、ジモティーの使っている技術をざっくり紹介したいと思います。まぁタイトル使いたかっただけじゃね感あります。 Rails3 Ruby on Rails 3でWebアプリケーションを開発しています。 ウェブサービスとして見たときジモティーはいわば今風の「掲示板」で、トリッキーな作りは少ないためRailsとの相性は良いのではない
前編はこちら http://anond.hatelabo.jp/20120926165407 中編はこちら http://anond.hatelabo.jp/20120926165533 ■ステップ11:残りの開発(50時間) 基本的な機能とデザインが出来てきたら、細かな機能や説明ページなどの静的コンテンツも作っていきます。 8割程度出来たと思ったら、一度サーバーにアップロードして動作チェックしてみます。 たいていは上手く動作するはずですが、途中で一度チェックしておいた方が出来上がってから不具合を修正するよりは効率的です。 僕ははじめCORESERVERを使っていましたが、メールが送信できない不具合に遭遇して時間を取られました。 結局はCORESERVERとgmailの相性が悪いせい、という事で最後はさくらに移転しました。 あと、何となく動いているのが確認できたら、 このタイミングでGoo
Moqupsの特徴 Moqupsの使い方 Moqupsの特徴 ドラッグ&ドロップでエレメントを簡単に配置できます。 約60種類のUIエレメントを用意。 PDF, PNGへの書き出し。 HTTPS対応。 自動保存。 スマートガイド。 カスタマイズ可能なグリッド。 オブジェクトはグリッドにスナップ。 オブジェクトのロックとグループ化。 右クリックで、Undo/Redo/Cut/Copy/Pasteなど。 上記の操作はキーボードでも可。 タグ付けと検索機能 画像のアップロード メールによる共有。 Moqupsの使い方 Moqupsを使うにはとりあえず登録は必要ありませんが、機能が制限されます。 機能の制限はたとえば、書き出しがSVGのみになります。
[対象: 上級] ページの表示速度が、Googleのランキングを決める指標として日本を含むインターナショナルで導入されていることがSMX Advanced Seattle 2012で判明しました。 そこで今日は、ウェブページの高速化を取り扱ったセッションをレポートします。 スピーカーは、ECサイトのREIでSEOに携わるJonathon Colman(ジョナサン・コールマン)氏です。 ウェブサイトのパフォーマンス最適化 サイトを高速化する理由 コンバージョン率の最適化 カスタマーエクスペリエンスとカスタマー満足度の向上 直帰率を下げる。 競争率が非常に激しいキーワードでオーガニックからのトラフィックを増やす。 全体的な競争力を高める。 運用費を節約する。 数字で見るページスピード Googleではページスピードが検索の1%に影響している。 ユーザーがページ表示に待てるのは2秒まで。 3秒以
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く