CSSI: CSS Investigationコードレビューはしていますか? CSSは言うまでもなく、エンドユーザにもっとも近い言語です。それゆえ、変更も多く『壊れやすい』言語です。 しかし、定常的にレビューを実施することで『壊れにくい』状態をキープすることができます。 コードレビューは決して特別なスキルを必要としません。 本セ…
CSS Sprite画像はDataURI画像にすべきか？ - MOL
最近、スプライト画像はDataURIにすべきですか？という質問が多くて、調べてみました。てか、前のもそんな話題があったような。DataURIってなんぞって方は下記を見てほしい。 データURIスキーム | MOL CSSファイルがパースされなければレンダリングが始まらないのでCSSファイルの肥大化は絶対に避けなければならない。画像の1KBとCSSファイルの1KBを同じように考えてはいけない。 ― ぼくのかんがえたさいきょうのしーえしゅえしゅ あ、ホントそうだっけーなーと思いつつ、どこぞの資料見たんだっけなーと探してたらあった。 Optimizing the Critical Rendering Path for Instant Mobile Websites - Velocity SC 2013 このセッションはすごく分かりやすいのでオススメです（該当の箇所は12分位から）。というかIlya
Apple Shows Love for HTML5 with iOS 8
Build React Apps and Win $2000, $750, $250! – Enter the ReExt Contest We were as excited as everyone else with last week’s Apple iOS 8 release announcement. We have only had the iOS 8 GA bytes for a few days, but we wanted to do as quick and complete a write-up as we could to give the global web developer community an in-depth look at Apple’s latest release. There’s no doubt we’ll see a few items
サーバサイドエンジニアでも押えておきたい！コアJavaScriptの基本知識 - Qiita
はじめに WEBアプリケーション開発において ブラウザ側 で何かをしたい場合、ブラウザで唯一動作する言語といっていい JavaScript を触らざるを得ません。ただ JavaScript は理解してしまえば難しくないものの、 サーバサイド側の言語と違う特徴 (特に関数まわり) があるため、慣れないうちは混乱することが多いのかなと思います。 私もまだ JavaScript を学び始めて日が浅く（本職はサーバサイド側のエンジニア）、また JavaScript での業務経験もそれほど豊富ではないのですが、 サーバサイドエンジニア側の視点 で、とっかかりとして これだけ知っていれば 理解が捗るだろうというものを挙げてみました。 ですので必ずしも網羅性はなく、ブラウザに関する機能（クライアントサイドAPI）についても触れていません（対象はコアJavaScript言語《ECMAScript5相当》）
アクセシビリティを考えたドロップダウンメニューを実装する | Webクリエイターボックス
アクセシビリティを考えたドロップダウンメニューを実装する多くのWebサイトに設置されているドロップダウンメニュー。うまくカテゴリー分けされていれば非常にわかりやすく、スペースも取らないので制作側からも愛されていますね。しかしアクセシビリティの観点から考えると、ちょっとやっかいな存在ではあります。マウスがうまく利用できないユーザーはキーボードを使ってページやリンクを移動しますが、ドロップダウンメニューは `tab` キーを使ってもサブメニューが表示されないのです。今回はこの問題を解決しようと思います！ こちらの Gif 画像のように、カーソルではなくキーボードの tab キーを使ってリンクを推移できるようにします。通常の HTML と CSS を使った設置方法だと隠されている子メニューが表示されないので、キーボード操作でもうまく表示するのが今回の目標です。ちなみにこのブログのナビゲーションメ
cloudBitとIFTTTで「おとうさんいまどこメーター」を作る - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? うちの息子（９）はいっつも「おとうさんいつ帰ってくるの？」と聞くそうだ。そんな息子のニーズに応え、おとうさんいまどこメーターを日曜工作で作ってみた（最初は天気予報メーターにしようと思ったけど息子にいらんと却下された）。 スマホのWiFiとGPSの位置情報をIFTTTで拾ってcloudBitでサーボを動かす簡単なしくみ。電子工作の経験は不要で、こーいうのを子どもでも誰でも30分くらいで作れてしまう。cloudBit is AWESOMEである。 以下、このメーターの作り方を簡単にまとめ。 littleBitsって？ まずはlittleBi
「その便利そうなやつ、何使ってるんですか？」的ツール百選 (のうち10個くらい) DIST#4 LT発表資料 - Qiita
DIST.4 「Life is Short」 のLT発表資料です。 紹介するツール一覧 (基本、Macです) デザイナー、ディレクター、エンジニア問わず、誰でも使えるやつ エンジニアむけ いちおう下記、分類してますが、紹介する順番はいい感じのやつ順です。 誰でも使えるやつ Alfred : ランチャー Kiritori : 画像付箋化 ClipMenu : クリップボード拡張 Skypeログ整形ツール Table→マークダウン MacでWindow切り替え(⌘+F1) Fluid (Mac) : Webサイトをアプリ化 Push Bullet : なんでもpush通知 エンジニアむけ CodeRunner (Mac) : なんでもコード走らせる Google Apps Script : GoogleスプレッドシートとかでJS Edge Inspect : スマホ画面同期 JenkinsをC
[フロントエンド] Webページを表示するテストの際に、通信速度を3Gに制限して表示してみよう - YoheiM .NET
こんにちは、@yoheiMuneです。 今日は、Webページのテストをする際に、通信速度を制限して表示テストを行う方法について、ブログを書きたいと思います。 Special Thanks to http://flic.kr/p/kwpwtG この記事で伝えたいこと この記事の目的は、次の2点を説明することです。 それは、なぜ通信速度を制限して表示テストを行う必要があるのか、それをどのように実現するのか、ということです。 この記事を読むことで、Webアプリケーション構築において、初期表示の品質向上を行うきっかけを掴んで頂けたら幸いです。 なぜ通信速度を制限してテストする必要があるのか はじめに、なぜ通信速度を制限してWebページの表示を確認する必要があるのか、について考えてみましょう。 題材として、このブログであるYoheiM.NETを取り上げます（いくつかの問題点が存在するからです）。 こ
![[フロントエンド] Webページを表示するテストの際に、通信速度を3Gに制限して表示してみよう - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/c91a1be771899d8ed49a7ad8998d9089557447f4/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F316.jpg)
入力フォームのプレースホルダーを使ってはいけない
入力フォームのプレースホルダーテキストは、入力欄にどんな情報を入れたのかをユーザーが思い出すことや、エラーのチェック・修正を難しくしてしまう。また、視覚や認知機能に障害のあるユーザーにはさらなる負担となる。 Placeholders in Form Fields Are Harmful by Katie Sherwin on May 11, 2014 日本語版2014年6月17日公開 コンテクストに沿った説明やヒントは、入力フォームのそれぞれに何が入るかを明確にするのに役立つ。その結果、入力が促進され、コンバージョンレートは向上する。ヒントの提供方法はいろいろとある。実装として一般的なのは、入力フォーム内に説明を入れるやり方だ。しかし、残念ながら、入力フォーム内のプレースホルダーはユーザビリティに役立つよりも損なうことのほうが多いことがユーザビリティテストでは繰り返し示されている。 ラベル
maxlengthを使ってはいけない。特にパスワード入力欄で使っちゃ駄目！ - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 今日自分が体験したトラブル事例に、ユーザビリティ向上のための気づきがあったのでメモしておきます。 ※本文よりまず、このコメント、こっちに言いたいことが集約されてるのでまずはこっちを読むと早いです。 ※本文よりまず、このコメント、こっちに言いたいことが集約されてるのでまずはこっちを読むと早いです。 ※本文よりまず、このコメント、こっちに言いたいことが集約されてるのでまずはこっちを読むと早いです。 事例：登録時のパスワードでログイン出来ない！？ 今日、とあるWEBサイトでユーザ登録を行った際に、登録時に入力したパスワードでログイン出来ないと
【まとめ】これ知らないプログラマって損してんなって思う汎用的なツール 100超 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 2019/06/11追記: これは2012年の投稿です。なぜかはてなブックマークで拡散されていますが、内容は時代にそぐわなくなったものもあるのでご注意ください。 これ知らないプログラマって損してんなって思う汎用的なツールのコメントに寄せられたツールを分類分けしてみました。 解説は、ほぼコメントに寄せられた内容のコピペです。 URLのみの記述は公式サイト(か、ほぼ公式サイトと化しているサイト) 公式サイトとは別に、ページタイトルだけでツールを説明しきっているページへのリンクも付けておきました。類似ページが複数ある場合は、はてブのブックマー
パフォーマンスからみるSass/Compass 第2回：CompassによるCSS Sprite - MOL
Sass、Less、StylusなどCSS Preprocessorに関するAdvent Calendarです。― CSS Preprocessor Advent Calendar 2012 - Adventar パフォーマンスの勉強ができてなおかつSass/Compassのお勉強にもなるお得なシリーズまさかの2回目。Adventにぶつけてきた！ややもするとシリーズものの2作目というのは駄作になりがちだが、そんなプレッシャーはねのけて乱反射！やっていくYO! これまでの： パフォーマンスからみるSass/Compass 第1回：Nestingと@import - MOL パフォーマンスからみるSass/Compass 番外編：MSは青かった - MOL CSS Spriteの利点・欠点 『ハイパフォーマンスWebサイト』の書籍には「高速サイトを実現する14のルール」というものがある。その中
「Compass」、基礎から応用まで！ | 株式会社LIG
こんにちは、デザイナーの王です。 今回の記事ではCompass使いになるための必要最小限の知識から応用まで、体系的にひと通り紹介していきます。 全くの初心者でも問題ありません！ はじめに結論を言うと、CompassでCSSを書くと 早い！ 見やすい！ メンテしやすい！ コード量がぐっと減る！ 一度使い出したら最後、もう元には戻れない！ 一体どこまで便利なのかずらずら書くよりも、百聞は一見にしかず！ 簡単なプロジェクトを通して、各特徴について紹介した短いデモ動画を用意したので、まずはこちらを見てください！ Compassとは？ Compassを語る前に、まずは「Sass」を知っておく必要があります。なぜなら、CompassはSassを元に開発したフレームワークだからです。 Sassとは では「Sass」とは何かと言うと、正式名称は「Syntactically Awesome Style Sh
3つの簡単便利Javascriptテンプレートエンジン。Mustache.js, Handlebars.js, Microtemplating | codechord
Posted 7月 13th, 2013 by codechord. 0 Comments Tweet Tweet 多忙きわまりない2013年初夏でございます。 最近あんまりコードらしいもの書けてなくって、vagrantとかshefとかpjaxとかnodeとか理解するために時間つくりたい、コード書きたい！ってなってます。今回ちょっとajaxまわりのものの実装でjavascriptのテンプレートエンジンに調べる必要あったので、javascriptのテンプレートエンジンに触れてみようかなと。 phpのテンプレートだとsmartyだとか、rubyだとERBとかなんかそういうのですけど、javascriptのテンプレートエンジンについて知らなかったんで。 目次 – Table of Contents Javascriptのテンプレートエンジンの候補 1. John ResigさんのJavaScri
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
appgiga.jp
Learn web development | web.dev
IDEA * IDEA
http://plus.appgiga.jp/masatolan/2014/03/28/51357/
Git作業スタイル: リモートレポジトリに保存しつつキリのいいところで変更をまとめる - Qiita
Java使いのための「Objective-Cではこう書く」 - Qiita
