【フロントエンド初心者向け】ユーザビリティを上げるちょいテク
フロントエンドの開発が初めての人が意外と抜けがちな観点をまとめてみました。 初めにざっくりと概要を話すと「デザイナーが作るデザインでは表現しづらいもの」をまとめたものになります。 デザイナーが作るデザインは静的なものなので(たまにがっつりプロトタイプを作ったりもありますが)、いわゆる"状態"を表現するのが難しかったり抜けたりしがちです。 具体的に言うとローディング、Empty、エラーなどです。これらをよしなに補完できるフロントエンドエンジニアはデザイナーからもきっと「頼りになるぅ！」と思われること間違いないでしょう。 と言うわけでそんな例を紹介していきます。 今後も思いついたら追加する可能性が無きにしも非ず。 ローディングを出そう こう言うクルクルするやつとか こんな感じでシュインシュインするやつがあります。 基本的にユーザがアクションを起こした時に待たせる場合は必ず表示させましょう。 ロ
How to 速度改善 ーWebパフォーマンスについて知っておきたいこと7選ー - Qiita
今回のテーマ Webパフォーマンスを改善する上で知っておきたい知識をまとめてみました。 前回の記事では使わなかった（使えなかった）技術や方法なども含めて記載します。 また、ブラウザのレンダリングなどについても書きたいと思います。 (2019年5月23日追記) 過去の記事はこちら How to 速度改善 ー計測・知識編ー How to 速度改善 ー原因調査編ー How to 速度改善 ー実装&技術調査編1ー 1. ブラウザレンダリングの仕組み 推測するな、計測せよ という言葉にあるように、闇雲にチューニングを初めても良い結果は出ません。まずはブラウザレンダリングの仕組みからみていきましょう。 ブラウザレンダリングの流れ レンダリングの大まかな流れは Loading→Scripting→Rendering→Painting（これでページが表示される） となっています。 この処理の内容をフレーム
webpackとBabelの基本を理解する(1) ―webpack編― - Qiita
独学の内容をまとめたものです。誤りがございましたら、ご連絡いただけると幸いです。 リンク 1. webpackとBabelの基本を理解する(1) ―webpack編―（本記事） 2. webpackとBabelの基本を理解する(2) ―Babel編― 3. webpackとBabelの基本を理解する(3) ―webpackとBabel編― 4. webpackとBabelの基本を理解する(4) ―React編― 5. webpackとBabelの基本を理解する(5) ―Sass編― 概要 この記事の概要 目的 フロントエンドの環境構築に利用されるツールへの理解を深める 本記事のゴール webpackでJSファイルを結合する方法を知る 対象者 WEBフロント担当者 HTML,CSS,JavaScript(es2015含む)の基本的な構文を理解している人 npmの利用方法を理解している人 環境
FRONTEND CONFERENCE 2017 資料まとめ - Qiita
FRONTEND CONFERENCE 2017に参加したのでそのまとめ 復習のためや聞けなかったセッションや行けなかったハンズオンもあったので資料を探してみました。 見つけれていないセッションの資料は見つけ次第更新します。 もし知っていたらコメントか編集リクエストくださいm(_ _)m セッション あらゆる人のためのフロントエンド 花谷拓磨(@Potato4d)さん 新ツールやサービスから考える、明日からのデザインフロー 深沢 幸治郎さん エンジニアとデザイナーとの距離 安田 学さん HTMLスナップショット2016改 momdoさん UIデザインから知る「持続可能なデザイン」 山下 一樹さん React/FluxベースのElectronアプリをリモートチームで開発した話 太田 絵一郎さん ウェブを構成するUIの品質とHTML 桝田 草一さん スタンドアロンAMPのススメ 石本 光司さん
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
