[B! HTML][html] GOONEEのブックマーク

サイトの表示高速化につながる18のこと | knowledge / baigie

ベイジでエンジニアをやっている酒井です。ベイジには2017年に、新卒で入社しました。いつもはJavaScriptの開発からWordPressのカスタマイズなど、フロントエンドを中心としながら、一部バックエンドも含めて仕事をしています。『knowledge / baigie』でも、フロントエンド寄りの情報を発信していきたいと思います。私の今日のテーマは、表示の高速化についてです。 webサイトの表示スピードは、webサイトのユーザー体験に直結すると私は考えています。表層的なUIデザインの改善以上に重要かつ効果的であることも多いため、webのデザイナーやエンジニアは、0.1秒でも速くなることにこだわるべきでしょう。表示高速化の手法というと、サーバ側の話になることも多いですが、実はフロントエンド側でできることもたくさんあります。それは大きく3つに分けられます。ブラウザ処理の高速化通信の高

GOONEE 2019/11/26

リンク

head要素内のtitleやmeta情報を一括反映できるスクリプトを書いてみた - Qiita

大量のHTMLにtitleやdescriptionを反映する機会があり、試しに一括で反映可能なスクリプトを書いてみました。実現できること・エクセルに記載されているtitleやdescriptionを抽出し、該当するHTMLファイルに一括反映・og関連やcanonicalタグなど、ページ固有の設定の一括反映サンプルのディレクトリ構成 root / ├ public / ├ config.xlsx ├ package.json └ head.js public 〜 html/css/jsなどの公開用のディレクトリ config.xlsx 〜　title、meta情報を記載したエクセル head.js 〜　エクセルファイルを解析し、htmlファイルに反映するスクリプト実装について node.jsを使用し実装します。使用するモジュール xlsx cheerio 以下コマンドでインストー

GOONEE 2017/03/31

リンク

独学・未経験でフロントエンドエンジニアになる方法 - tatsuyankmura

私は25歳の時に異業種から、Web業界に入りフロントエンドエンジニアになりました。職業訓練校やスクールに通わず、知識ゼロの状態からフロントエンドエンジニアになるために行ったことや転職活動で使った求人サイト、面接で気をつけたポイントや意識したことをまとめてみようと思います。これからフロントエンドエンジニアを目指している人、異業種からWeb業界への転職・キャリアチェンジを考えている方の参考になれば幸いです。そもそもフロントエンドエンジニアとは一般的にフロントエンドエンジニアとは、HTML/CSS/JavaScript/PHPなどを利用しWebサイトやWebアプリケーションの見た目や操作する部分を構築する人を指します。HTMLコーダーやマークアップエンジニアとの違いは、HTML/CSSの設計がメインの前者に対し、マークアップエンジニアはJavaScriptやPHPの実装、CMSや各種AP

GOONEE 2017/01/10

リンク

ワンランク上のHTMLコーディングを行うための18のポイント | ベイジの社長ブログ

HTMLコーディングの初級というと、どの程度のスキルを差すのでしょうか。弊社では、以下のようなことがひとまずできていると、だいたい初級レベルを越え始めた段階かな、という気がしています。ターゲットブラウザで大きな崩れがない。リンク漏れや原稿違いなどのヒューマンエラーの頻度が極めて低い。バリデーター・チェックでエラーが出ない。逆に、これだけのことができて、なぜまだ初級レベルなのでしょうか。それは、現場では、これだけでは不十分だからです。ブラウザでひとまず正常に表示されるだけでなく、改修に素早く対応できる柔軟性、協業や運用後の更新を楽にするルールの一貫性や簡潔さ、HTMLの概念をきちんと踏まえた正しい構造設計なども、求められてくるからです。そこでここでは、脱・初級者を目指す方のために、弊社内で行っているHTMLコーディングの、いわゆるエラーということ以外のチェックポイントを、まとめてみ