コードレビューはしていますか? CSSは言うまでもなく、エンドユーザにもっとも近い言語です。それゆえ、変更も多く『壊れやすい』言語です。 しかし、定常的にレビューを実施することで『壊れにくい』状態をキープすることができます。 コードレビューは決して特別なスキルを必要としません。 本セ…

最近、スプライト画像はDataURIにすべきですか？という質問が多くて、調べてみました。てか、前のもそんな話題があったような。DataURIってなんぞって方は下記を見てほしい。 データURIスキーム | MOL CSSファイルがパースされなければレンダリングが始まらないのでCSSファイルの肥大化は絶対に避けなければならない。画像の1KBとCSSファイルの1KBを同じように考えてはいけない。 ― ぼくのかんがえたさいきょうのしーえしゅえしゅ あ、ホントそうだっけーなーと思いつつ、どこぞの資料見たんだっけなーと探してたらあった。 Optimizing the Critical Rendering Path for Instant Mobile Websites - Velocity SC 2013 このセッションはすごく分かりやすいのでオススメです（該当の箇所は12分位から）。というかIlya

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 we missed in the next couple of weeks and months, but for now we wante

はじめに WEBアプリケーション開発において ブラウザ側 で何かをしたい場合、ブラウザで唯一動作する言語といっていい JavaScript を触らざるを得ません。ただ JavaScript は理解してしまえば難しくないものの、 サーバサイド側の言語と違う特徴 (特に関数まわり) があるため、慣れないうちは混乱することが多いのかなと思います。 私もまだ JavaScript を学び始めて日が浅く（本職はサーバサイド側のエンジニア）、また JavaScript での業務経験もそれほど豊富ではないのですが、 サーバサイドエンジニア側の視点 で、とっかかりとして これだけ知っていれば 理解が捗るだろうというものを挙げてみました。 ですので必ずしも網羅性はなく、ブラウザに関する機能（クライアントサイドAPI）についても触れていません（対象はコアJavaScript言語《ECMAScript5相当》）

2020年11月14日 jQuery, アクセシビリティ 多くのWebサイトに設置されているドロップダウンメニュー。うまくカテゴリー分けされていれば非常にわかりやすく、スペースも取らないので制作側からも愛されていますね。しかしアクセシビリティの観点から考えると、ちょっとやっかいな存在ではあります。マウスがうまく利用できないユーザーはキーボードを使ってページやリンクを移動しますが、ドロップダウンメニューは tab キーを使ってもサブメニューが表示されないのです。今回はこの問題を解決しようと思います！ ↑私が10年以上利用している会計ソフト！ こちらのGif画像のように、カーソルではなくキーボードの tab キーを使ってリンクを推移できるようにします。通常のHTMLとCSSを使った設置方法だと隠されている子メニューが表示されないので、キーボード操作でもうまく表示するのが今回の目標です。ちなみに

うちの息子（９）はいっつも「おとうさんいつ帰ってくるの？」と聞くそうだ。そんな息子のニーズに応え、おとうさんいまどこメーターを日曜工作で作ってみた（最初は天気予報メーターにしようと思ったけど息子にいらんと却下された）。 スマホのWiFiとGPSの位置情報をIFTTTで拾ってcloudBitでサーボを動かす簡単なしくみ。電子工作の経験は不要で、こーいうのを子どもでも誰でも30分くらいで作れてしまう。cloudBit is AWESOMEである。 以下、このメーターの作り方を簡単にまとめ。 littleBitsって？ まずはlittleBitsを知らない人のために簡単に紹介しておこう。littleBitsは子供が遊びながら電子工作を学べるおもちゃで、ボタンやLED、モーター、光センサーといったいろんな電子部品のモジュールを組み合わせて回路を組める。電子工作っても、難易度はパズドラより低い。モジ

このドメインは、お名前.comで取得されています。 お名前.comのトップページへ Copyright © 2020 GMO Internet, Inc. All Rights Reserved.

Stay organized with collections Save and categorize content based on your preferences. Explore our growing collection of courses on key web design and development subjects. An industry expert has written each course, helped by members of the Chrome team. Follow the modules sequentially, or dip into the topics you most want to learn about.

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

こんにちは、@yoheiMuneです。 今日は、Webページのテストをする際に、通信速度を制限して表示テストを行う方法について、ブログを書きたいと思います。 Special Thanks to http://flic.kr/p/kwpwtG この記事で伝えたいこと この記事の目的は、次の2点を説明することです。 それは、なぜ通信速度を制限して表示テストを行う必要があるのか、それをどのように実現するのか、ということです。 この記事を読むことで、Webアプリケーション構築において、初期表示の品質向上を行うきっかけを掴んで頂けたら幸いです。 なぜ通信速度を制限してテストする必要があるのか はじめに、なぜ通信速度を制限してWebページの表示を確認する必要があるのか、について考えてみましょう。 題材として、このブログであるYoheiM.NETを取り上げます（いくつかの問題点が存在するからです）。 こ

入力フォームのプレースホルダーテキストは、入力欄にどんな情報を入れたのかをユーザーが思い出すことや、エラーのチェック・修正を難しくしてしまう。また、視覚や認知機能に障害のあるユーザーにはさらなる負担となる。 Placeholders in Form Fields Are Harmful by Katie Sherwin on May 11, 2014 日本語版2014年6月17日公開 コンテクストに沿った説明やヒントは、入力フォームのそれぞれに何が入るかを明確にするのに役立つ。その結果、入力が促進され、コンバージョンレートは向上する。ヒントの提供方法はいろいろとある。実装として一般的なのは、入力フォーム内に説明を入れるやり方だ。しかし、残念ながら、入力フォーム内のプレースホルダーはユーザビリティに役立つよりも損なうことのほうが多いことがユーザビリティテストでは繰り返し示されている。 ラベル

今日自分が体験したトラブル事例に、ユーザビリティ向上のための気づきがあったのでメモしておきます。 ※本文よりまず、このコメント、こっちに言いたいことが集約されてるのでまずはこっちを読むと早いです。 ※本文よりまず、このコメント、こっちに言いたいことが集約されてるのでまずはこっちを読むと早いです。 ※本文よりまず、このコメント、こっちに言いたいことが集約されてるのでまずはこっちを読むと早いです。 事例：登録時のパスワードでログイン出来ない！？ 今日、とあるWEBサイトでユーザ登録を行った際に、登録時に入力したパスワードでログイン出来ないというトラブルがありました。 普通は自分の入力ミスを疑うところですが、登録もログインもコピペで入力しているので入力ミスはありえ無いと思っていました。 お問い合わせフォームからバグ報告 というわけでこれはバグだろうと、お問い合せフォームから以下のような内容の報告

2019/06/11追記: これは2012年の投稿です。なぜかはてなブックマークで拡散されていますが、内容は時代にそぐわなくなったものもあるのでご注意ください。 これ知らないプログラマって損してんなって思う汎用的なツールのコメントに寄せられたツールを分類分けしてみました。 解説は、ほぼコメントに寄せられた内容のコピペです。 URLのみの記述は公式サイト(か、ほぼ公式サイトと化しているサイト) 公式サイトとは別に、ページタイトルだけでツールを説明しきっているページへのリンクも付けておきました。類似ページが複数ある場合は、はてブのブックマーク数が多いものを選びました。 知らないツールもあるので、分類がいいかげんなところもあると思います。何か気づいたらコメントください。 解説が不十分なツールについても、補足（コピペで本文に取り込める体裁だとありがたい）を頂けると助かります！ 元ネタの投稿は現在進

こんにちは、デザイナーの王です。 今回の記事ではCompass使いになるための必要最小限の知識から応用まで、体系的にひと通り紹介していきます。 全くの初心者でも問題ありません！ はじめに結論を言うと、CompassでCSSを書くと 早い！ 見やすい！ メンテしやすい！ コード量がぐっと減る！ 一度使い出したら最後、もう元には戻れない！ 一体どこまで便利なのかずらずら書くよりも、百聞は一見にしかず！ 簡単なプロジェクトを通して、各特徴について紹介した短いデモ動画を用意したので、まずはこちらを見てください！ Compassとは？ Compassを語る前に、まずは「Sass」を知っておく必要があります。なぜなら、CompassはSassを元に開発したフレームワークだからです。 Sassとは では「Sass」とは何かと言うと、正式名称は「Syntactically Awesome Style Sh

ドットインストール代表のライフハックブログ

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

このドメインは、お名前.comで取得されています。 お名前.comのトップページへ Copyright © 2020 GMO Internet, Inc. All Rights Reserved.

あらまし 大きな作業をする場合、こまめにローカルレポジトリのブランチにコミットして、何かあったときにすぐに戻せるようにしたくなります。 また、パフォーマンス改善など、実験や研究の色合いの強い作業は、試行錯誤しながらブランチに"とりあえず"保存しつつ、「あっちのほうが良かったかな〜」と思ったときに取り出せるようにしておきたくなるものです。 また、ローカルレポジトリだけでなく、リモートレポジトリに置いたほうがチームみんなで共有できたりしていろいろ便利です。 ですが、最終成果物はなるべく少ないコミットにしないと、マージが大変です。 メインブランチにこんなコミットが入るとゲンナリしますよね？ $ git log --oneline bcdef12 Revert foo abcdef0 Add foo cdef123 Refactor bar again def1234 Refactor bar e

Help us understand the problem. What is going on with this article?