サイトの表示高速化につながる18のこと｜ベイジの図書館
ベイジでエンジニアをやっている酒井です。 ベイジには2017年に、新卒で入社しました。いつもはJavaScriptの開発からWordPressのカスタマイズなど、フロントエンドを中心としながら、一部バックエンドも含めて仕事をしています。『knowledge / baigie』でも、フロントエンド寄りの情報を発信していきたいと思います。 私の今日のテーマは、表示の高速化についてです。 webサイトの表示スピードは、webサイトのユーザー体験に直結すると私は考えています。表層的なUIデザインの改善以上に重要かつ効果的であることも多いため、webのデザイナーやエンジニアは、0.1秒でも速くなることにこだわるべきでしょう。 表示高速化の手法というと、サーバ側の話になることも多いですが、実はフロントエンド側でできることもたくさんあります。それは大きく3つに分けられます。 ブラウザ処理の高速化通信の高
スマートフォン対応でよく使うhtml、css、javascriptのまとめ
スマートフォン(ios、android)向けのウェブサイト・ウェブアプリを作る際に個人的によく使うhtml、css、javascriptの備忘録。 html関連 headタグ内での設定<!-- //デバイスサイズにあわせて表示領域を変更する --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- //電話番号のリンクを無効化 --> <meta name="format-detection" content="telephone=no"> <!-- //ホーム画面用アイコン --> <link rel="apple-touch-icon" href="icon.png"> <!-- //ホーム画面用アイコンの光沢を無効化する --> <link rel="apple-touch-icon
Webパフォーマンス ベストプラクティス - Make the Web Faster
Webパフォーマンス ベストプラクティス Last updated: 02 October 2012 翻訳：@t32k WebページをPage Speedで調べるとルールに準拠していないものが提示される。このルールというのは、一般的にあなたが開発段階において取り入れるべきフロントエンドのベストプラクティスだ。あなたがPage Speedを使用しようとしまいと、私たちはこの各ルールについてのドキュメントを提供する（たぶんちょうど新しいサイトを開発中でテストする準備が整ってないだろう）。もちろん、これらのページはいつでも参照することができる。私たちはあなたの開発プロセスに取り入れてもらうために、このベストプラクティスを実装するための明確なティップスと提案を提供する。 パフォーマンス ベストプラクティスについて Page Speedはクライアント側からの観点でパフォーマンスを評価し、一般的にペー
Pondasee - Front-end Starter Kit
For all skill level Pondasee is made to help front-end or developer to accelerate their work-flow in making web application. Use Pondasee, it will be perfect for your starting point. Build on Compass Pondasee made with Compass dan SCSS language. Nested rules, variables, mixins, selector inheritance in Scss/Sass makes coding CSS faster, more efficient and your stylesheets easier to organize and mai
[CSS]HTMLはシンプルで、紙をぺろっと折ったエフェクトをつけるチュートリアル
Code a Simple Folded Corner Effect With CSS [ad#ad-2] 下記は各ポイントを意訳したものです。 コンセプト デモ 実装 コンセプト このチュートリアルのコンセプトは、div要素に対してできるだけシンプルに紙を折ったエフェクトを与えることです。画像を使用すれば、当然かなり簡単にできることですが、これをCSSで行います。 基本的に必要なものは長方形のボックスのほかに、二つの三角形です。 デモページ [ad#ad-2] 実装 HTML HTMLは非常にシンプルです。 見出しとパラグラフを配置したdiv要素に、class（foldtl）を加えます。 <div class="page foldtl"> <h2>見出し</h2> <p>パラグラフ...</p> </div> CSS まずは、ページ全体とdiv要素のスタイルです。 div要素の背景はCS
HTMLとJSだけで何か作るときの - hitode909の日記
HTMLとJSだけで何か作ることが多くて，開発環境をどう作るかとか，ノウハウみたいなのがたまってきたと思う． ローカルのHTMLファイルをブラウザで開くと，いろんな制約がある．たとえば，ファイルAPIを使えないとか，YouTubeのプレイヤー貼り付けできないとか，/js/みたいに絶対パスで指定することもできない．ページ1枚なら他のページにリンクとかいらないけど，ウェブサイトを作ってるときとかは，/help/でヘルプページを表示するとか書いたときに，ローカルのファイルを見てリンクが切れてるということになる．開発中はリンク切れだけど本番サーバーに置くと見れるはずとか言って開発するのは怖い． サーバーでRubyとかPerlが動いてるみたいなときはローカルでサーバーを立てて開発してると思う．HTMLとJSだけ使うときでもローカルでサーバーを立てて開発したほうがいいと思う． 開発中は，nginxでフ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
2016年版 フロントエンド開発フォーマット
GitHub - redroot/holmes: Holmes is stand-alone diagnostic CSS stylesheet that can highlight potentially invalid or erroneous HTML(5) markup by adding one class
http://www.99lime.com/how-it-works/
CSS Design and Programming