Introduction · Webフロントエンド パフォーマンス改善ハンドブック
Webフロントエンド パフォーマンス改善ハンドブック このパフォーマンス改善ハンドブックでは、ウェブアプリケーションにおけるフロントエンドのパフォーマンス改善について扱っています。 ダウンロード版 埋め込み動画を再生できないなど一部制限がありますが、ダウンロード版を配布しています。 PDF版 EPUB版 MOBI版 目的 このハンドブックでは過去に行った改善の事例を中心に紹介しています。 そのため、現在の最適な解決方法を提案するものではありません。 また、アプリケーションによっても最適な解決方法は異なります。 今回の事例ではViewライブラリにReactを使い映像再生プレイヤーなどある程度複雑な機能を持ったウェブアプリケーションのフロントを扱います。 具体的にはニコニコ生放送（以下「生放送」）で行った事例を中心に書かれています。 開発と平行して行われていたため、React 15から16の間
front-end-interview-handbook/README.md at master · yangshun/front-end-interview-handbook · GitHub
これは何のリポジトリですか？ フロントエンドの求人面接では典型的なソフトウェアエンジニアの面接とは異なりアルゴリズムの重要性が低く、特定の領域（HTML、CSS、JavaScript など）の入り組んだ知識や専門的な技術についてより多くの質問がなされます。 フロントエンドエンジニアの面接の準備に役立つリソースは既にいくつかありますが、ソフトウェアエンジニアの面接のリソースほど豊富ではありません。既存のリソースの中で最も有益な質問集はおそらく Front-end Developer Interview Questions ですが、残念ながら私はこれらの問題の多くに対して完全かつ満足のいく回答をネット上に見つけることができませんでした。そう、このプロジェクトはそれらの質問に回答する試みなのです。また、このプロジェクトはオープンソースなので、Web の状況が進歩するのにあわせてコミュニティのサポ
今後のフロントエンドについて(仮)
bonfire frontendで発表した今後のフロントエンドの話です。
ブラウザレンダリングを理解するため簡単にまとめてみた - Qiita
初投稿です。よろしくお願いします(/･ω･)/ 新卒入社してフロントエンドエンジニアとして働き始めて早半年。 最近は、自分の書いたコードが世の中にリリースされて嬉しさを噛み締めながら楽しく社会人生活を送っています。 こんな本を読み始めました Webフロントエンド ハイパフォーマンス チューニング -久保田 光則 (著) webパフォーマンスについて...要はサイトの 速度改善 について学べる本です。 冒頭に「ウェブパフォーマンスとは何か」が書かれてます。 ウェブパフォーマンスを改善することは、ユーザが目的の達成の為に費やす時間やリソースを節約させることであり、その節約した分ユーザを豊かにしているわけです。 ウェブページ遷移時の初期ロード時のパフォーマンスだけでなく ウェブページ内でのインタラクション(ユーザが起こした操作に対しての応答)の描画のパフォーマンスが重要になってきます。 読み込み
元フロントエンドエンジニアから見た Android 開発 | MEDLEY Developer Portal
2017-07-28元フロントエンドエンジニアから見た Android 開発今回の内容についてみなさん、こんにちは。開発本部でオンライン診療アプリ「CLINICS」の開発を担当している平木です。 弊社では、インフラ・サーバ・フロントで役割を区切らず、全ての開発メンバーが必要に応じてスキルを広げながら開発に取り組んでいます。 自分も入社前はフロントエンド専門のエンジニアでしたが、入社後はそれに加えて Rails を使ったサーバサイドの開発や、Swift を使った iOS アプリ開発、 そして、現在メインにやっている Android 開発と一通りのプラットフォームや言語を使って開発するようになっています。 エンジニアが自身のスキルを広げる場合、自分の経験や知識を応用して、新しいプラットフォームを理解していくということが多いと思います。 元フロントエンジニアの経験を持っている自分が Androi
フロントエンド速度改善をしようとして参考にしたもの - $shibayu36->blog;
最近フロントエンドの速度改善をほんの少しだけやって、いろんな資料を参考にしたので、今後また速度改善をする時に備えて、参考になった資料をまとめておく。今回パフォーマンス改善やった項目としてはExpiresヘッダ付ける、gzip圧縮かける、JSをbodyの一番下にとか基本的なことしかやらなかったので、そのあたりはこの記事ではまとめていません。 今回は「測定する」「ブラウザがどう表示しているか知る」「改善を検討する」の流れで調べていったのでその順にまとめる。 測定する 何はともあれ測定しないと何も始まらないので、まずは測定の仕方について調べた。 PageSpeed Insights( https://developers.google.com/speed/pagespeed/insights/ )と、webpagetest( http://www.webpagetest.org/ ) はとりあえ
『フロントチューニンガソン 最速を目指すには』
11:10～ 課題ページの確認＆PageSpeed Insightsの実行目的：チューニング対象のウェブサイトの改善の余地を調査 上記のgruntプラグインをインストールする npm install コマンドを実行しながら、ブラウザやIDEでチューニング対象のウェブサイトを確認し始めました。 少し見ただけでもCSSの構文エラーがあったり、使っていないJavaScriptライブラリがインポートされていたり…。 まるで無茶な運用を数ヶ月続けたかのような、カオスなファイル群でした。 ここで実行した PageSpeed Insights に画像サイズの最適化をオススメされたので、まずはそこから行うことにしました。 11:20～ 画像ファイルの最適化目的：画像ファイルサイズの削減 30 x 30pxで表示している画像ファイルが実際には150 x 150pxで保存されていたりする画像がそこそこあったの
AbemaTV の番組表リニューアルに伴うパフォーマンス改善 - Qiita
以前の番組表 ↓↓↓ AbemaTV 新番組表 大きく変わったところ チャンネルが横スクロールですべて見れるようになった サイドバーにチャンネル一覧ができた 日付切り替えがセレクトボックスからカレンダー表示になった etc. 今まではチャンネルが 5ch 毎に区切られていたので、わざわざページを切り替えて見ないといけなかったのを、横スクロールですべてのチャンネルが一覧で見られるようになりました。 さらにチャンネル毎の番組表にもアクセスしやすくなり、日付の切り替えもしやすくなったかと思います。 このリリースによって、ユーザービリティが少しでも向上していれば幸いです。 しかし、便利になった反面、このリリースに至るまでに、パフォーマンス面で様々なところで問題になりました。 今回は実際にリニューアル中に課題となった箇所と解決方法の一部を紹介します。 AbemaTV 以外であまり参考にならないかもし
フロントエンドチューニングの箇条殴り書き
普段気をつけてるよリスト "モバイルで、WebViewとブラウザのコンパチで、特にセオリー化されていないデザインモジュールのなか、装飾画像もふんだんに使うぞ系サービス開発" の文脈における、パフォーマンス確保のため気をつけてるよリスト。 よく、パフォーマンス「向上」とか「確保」とか申しますが、メンテナンスコストなどと天秤にかけて、「必要十分」のラインを狙うのが重要だと思う次第。 画像リソース 画像リソースを揃えるときのセオリ。圧縮率とか最適化とか細かいチューニングはあれど、大雑把に下記を守る。そしてImage Optim（or 相当の処理）。 JPEGはプログレッシブで画質60くらい（オレ目安） PNGは差し支えない範囲で色数をきちんと削る 50px未満のサムネイルは@2.0xなリソースにしない 案外、Androidあわせの@1.5xや@1.0xでも大丈夫なことすらある GIFアニメを入れ
まったくのゼロからフロントエンドエンジニアを目指すための独学方法 vol.1 － フロントエンドエンジニアとは／Webアプリケーションの歴史／フロントエンドの勉強が難しくみえる理由 - DESIGNMAP
Warning: require_once(/home/kokken/www/designmap/setting.php): failed to open stream: No such file or directory in /home/kokken/www/designmap/tobewebdesigner/frontend-engineer-2016/vol1/index.php on line 26 Fatal error: require_once(): Failed opening required '/home/kokken/www/designmap/setting.php' (include_path='/home/kokken/ZendFramework-1.5.2/library:/home/kokken/pear/PEAR') in /home/kokken/ww
逆引き！フロントエンドのイマドキパフォーマンス改善 - 青空コメントアウト
WebアプリにしろWebサイトにしろパフォーマンスはとても重要です。どんなに高機能であっても、どんなにデザインが良くても、パフォーマンスが悪ければユーザーは離れてしまいます。 とは言え現場はキツキツのスケジュールで、パフォーマンスにまでこだわる余裕がないよ！パフォーマンスはひとまずできる限りのところまで頑張るよ！となってしまうこともあるかと…。 この問題の解決の糸口はパフォーマンスを良くする手段をどれだけ知っているかです。仕様を決めるとき、デザインを決めるとき、実装するとき、それぞれのフェーズでパフォーマンスを常に意識していると自ずとハイパフォーマンスに近づきます。 というわけで今回はフロントエンドの観点から、イマドキのパフォーマンス改善手法をまとめてみました。イマドキと謳っておきながら2年前くらいの技術が出てきたりして最新の話題でもないのですが。 ちなみに、本題に入る前にWebパフォーマ
Snip2Code - 【回答】フロントエンドデベロッパー面接時の質問事項
<iframe id="embedFrame" style="width:600px; height:300px;" src="https://www.snip2code.com/Embed/128839/-------------------------?startLine=0"></iframe> #フロントエンドデベロッパー面接時の質問事項 @バージョン 2.0.0 本レポジトリはフロントエンドデベロッパー志願者のポテンシャルを見極めるのに有効な面接時の質問事項を列挙します。全ての下記質問事項を一人の志願者に聞くことは推奨されません（それは数時間もかかってしまうでしょう）。あなたが必要としているスキルを見極めるためには、下記の質問リストからいくつかの項目を選択するのがよいでしょう。 [Rebecca Murphey](http://rmurphey.com/)の[Baseline F
「フロントエンドエンジニアに伝えたいインフラの話」参加メモ 関西フロントエンドUG 2017/02/18 - Qiita
関西フロントエンドUG勉強会 「フロントエンドエンジニアに伝えたいインフラの話」 https://kfug.connpass.com/event/49305/ の参加メモです。 全般的にAWSいいね！という話ばかりでした。 サービスの内容については、書き取った内容を記載していますが、 最新の正確な情報は各サービス公式サイトの確認をお願いいたします。 フロントエンドで捗るAWS ｰ WordPress の事例と共に 岡本 秀高 さん AMIMOTOでは、AWSクラウド上で動くWordPressホスティングサービスを提供しています。なぜクラウド上でWordPressを利用するようになったのか。ケーススタディと共にご紹介します。（CMSユーザー・管理者向け） クラウドは環境の規模を柔軟に変えられる 料金は使った分だけ マネージドサービスならインフラレイヤのメンテを丸投げできる AWSの豊富なサー
フロントエンドの基礎知識
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
2018年のフロントエンドエンジニアを取り巻く課題とチャレンジ
https://eventdots.jp/slide/modal_view/165025
http://2ndidea.com/frontend/frontrend-in-fukuoka/
Web Frontend Performance Tuning TIPS *n
Browser Computing Structure
アバター着せ替えアプリ開発におけるフロントエンド技術(Vue.js活用事例) #denatechcon
