PACE — Automatic page load progress bars
What is Pace? Include pace.js and a CSS theme of your choice, and you get a beautiful progress indicator for your page load and ajax navigation. No need to hook into any of your code, progress is detected automatically. Download If you’re a developer, download Pace directly here: Pace.js Themes Enter a color:
「IE11」でスクロール時に固定背景画像がカクつく問題 | 創kenブログ
リンクをコピー IE（Internet Explorer）に泣かされることは多々あります。 WEB制作者の頭痛の種です。 徐々にIEの各バージョンも引退しつつありますが、最後の砦である「IE11」は未だ現役です。 今回はこの「IE11」で、スクロール時に固定背景画像がカクつく問題についてです。 発生条件 発生条件は、CSSで背景画像に 「position : fixed」 「background-attachment : fixed」 どちらかを適用した場合に起こるようです。 ま、百聞は一見にしかず。 以下のページをPCから見てください（スマホ・タブレットは画像非表示）。 ＊サンプルtmp001（no-js） Chrome・Firefox・Edge・Safariなどでは普通に見れます。 普通のサンプルサイトです。 今度はこれをIEで見てみましょう。 マウスでページをスクロールすると、ページ
静的サイトをとにかく高速化する話
自分のポートフォリオサイトをサンプルに、どのくらいの容量削減ができるのかを確認してみました。 jsおよびCSSは、サイトの表示に必要な要素を1ファイルにバンドルした状態です。 画像ファイルはjpegの圧縮率などによって最終的なサイズが大幅に変化するので、jsとCSSのサイズ変化のみを取り上げました。 Bootstrap + Font Awesomeのような重量級フレームワークを使用しても、十分に実用的な容量まで削減できました。これならスマホ+3G回線での表示も心配ありません。 手法 適用しやすさを順に手法を並べると、以下のようになります。 遅延する 圧縮する キャッシュする まとめて削る 遅延する サイト上にあるほとんどのリソースは、実際には後から読み込んでも問題なく動作します。 まず最小限の構成でサイトを表示させ、重いファイルは後から読み込みます。 javascriptの遅延読み込み h
【CSS/Javascript】手書き風の文字を錬成して時代錯誤に立ち向かえ - Qiita
TL;DR 手書き文化は滅べ それっぽく対抗してみた 実運用は自己責任で… intro わし「ES提出したるで～、OpenES(※)でいくらでも出したるわ」 企業「手書きね＾＾」 わし「」 こういう非効率の塊みたいな企業が死滅することを祈りながら、技術的に解決することを試みる。 ※OpenES: Web上で書いてそのまま提出できるES。ガクチカ(学生時代に力を入れていたこと)という9割の人間はろくに書けない質問などを提供してくれる 目標 ぱっとみ手書きっぽくないようなフォントの組み合わせとかを錬成。 使用フォント ダーツフォント http://www.p-darts.jp/font/dartsfont/ ボールペンで書いたような細いフォント(公式ページより) 見てもらうとわかるが、字が綺麗 font-weight: boldじゃないとめっちゃ細い Kalam https://fonts.g
Chromeで不要なCSS/JavaScriptを洗い出す
こんにちは！ 開発部の武内です。 Webフロントエンドの開発はここ数年で急激に高度化していますが、 それを大きく後押ししている一因にブラウザ付属の開発ツールがあります。 Chrome、Firefox、Edge、Safariなどに付属していますが、どれも非常に高機能です。 Webフロントエンドエンジニアで使っていない方はいないのではないでしょうか。 グラフィカルなデザイン調整 コードのステップ実行 通信のロギング etc… 今回、Chrome 59のアップデートでCSS/JavaScriptのカバレッジ機能が追加されたので試してみました。 CSS and JS code coverage What’s New In DevTools (Chrome 59) Find unused CSS and JS code with the new Coverage tab. When you load
Simplify paint complexity and reduce paint areas | Articles | web.dev
Simplify paint complexity and reduce paint areas Stay organized with collections Save and categorize content based on your preferences. Paint is the process of filling in pixels that eventually get composited to the users' screens. It is often the longest-running of all tasks in the pipeline, and one to avoid if at all possible. Paint is the process of filling in pixels that eventually get composi
2018年のフロントエンドエンジニアならこの程度は知ってて当然だよな？ - Qiita
可及的速やかにReactが絶滅しますように。 以下はFront-End Developer Handbook 2018の第三部、Front-end Developer Toolsからリンクされているツールと、その簡単な紹介です。 ドキュメントツール 開発者向けドキュメント、APIリファレンス Dash 200以上のAPIリファレンス、100以上のチートシートを一括ダウンロードできる。有料、Mac用。 DevDocs 200以上のライブラリをオンラインで検索できる。無料。 Velocity 中身はDashと同じ。有料、Windows用。 Zeal Windows、Linux、MacOS用各種揃っている無料のオフラインドキュメント。 チートシート devhints.io JavaScript、CSS、Go、vim等のショートカット、書式などチートシート。字が薄くて見辛い。 SEOツール Key
SPAにおけるCSSについて、ひとつの解（追記あり） - エンジニアをリングする
SPAにおけるCSSのありかたについてずっと悩んでたけど昨日今日で一筋の光明が見えた— よしこ (@yoshiko_pg) 2017年4月7日 この話を簡単にまとめておこうと思います。 結論を先に書くと「今のところtemplate literal内にCSSを記述する形式のCSS in JSがいい感じ。Reactならstyled-componetnsが良かった」という感じです。 悩んでいたこと コンポーネント指向でSPAを作っていく上で、CSS（というかスタイリング）はどう書いていったらいいんだろう？ということに結構悩んでいました。 HTMLとJSがコンポーネントとしてまとまっていく中でCSSだけは今まで通り別物として扱い、BEMなどでグローバルスコープと戦うのか？はたまたCSSの枠をはみ出てJSコンポーネントの粒度に合わせたコンポーネント化をするのか？ 加えて、見た目も挙動も複雑なアプリケ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
DirtyMarkup Formatter - HTML, CSS, & JavaScript Beautifier