Webpack3でWebページ制作環境を構築する。基本編 - 前編 - Qiita
un-T factory! XA Advent Calendar 9日目担当の@untspringkです。 普段はWeb制作とは少し違ったことを業務で担当しているのですが、最近フロントエンド関連技術を扱う機会があったので、一度Web制作やフロントエンド開発環境構築についてまとめてみたいと思い執筆のテーマにWebpackを採用してみました。Qiita初投稿で慣れてないこともあって、いきなり長文記事になってしまいましたが、どうぞよろしくお願いいたします。 この記事について 長い記事になってしまいましたので、前編と後編に分けております。前編と後編で以下のような内容が含まれております。 【前編】 準備から、ローダーとプラグインの導入（※この記事です） Webpackを使用し制作環境構築をはじめるまでの準備 Webpackの基本的な挙動（バンドル）について Webpack-dev-serverを導入
そろそろ対応しなきゃ！WordPressサイトのためのAMPの基本と実装方法
グーグルが推進しているモバイル向けの高速化技術「AMP」、もう対応しましたか？ WordPressを利用しているサイトなら、意外なほど簡単に対応できます。 グーグルのAccelerated Mobile Pages（AMP、モバイル向け専用の高速ページ）プロジェクトは2016年2月24日に始まりました。何千もの開発者が参加者として名を連ね、無数のWebサイトがAMP版ページを用意して、多くの開発者がAMPを学んでいます。ここでは、WordPressでAMPを使う方法を学びます。 グーグルは真剣にAMPに取り組んでいます。検索エンジンのランキング基準の1つにして、多くのサイトにとってAMPが必要になるように仕向けました。まずは、グーグルのAMPプロジェクトの詳しい情報を紹介します。WordPressサイトでAMPを利用する方法も含まれます。 AMPとは？ AMPとは、モバイルブラウザー上でW
Web Fundamentals — Google Developers
Google は、すべてのユーザーがあらゆるブラウザで利用できる、美しく、アクセスしやすく、高速で安全なウェブサイトを構築できるようサポートしています。このサイトには、Chrome チームのメンバーや、ウェブ開発のトピック（ユーザー補助、パフォーマンス、デザインなど）を専門とする外部のエキスパートが執筆した、その取り組みをサポートするコンテンツが掲載されています。 Web Platform Baseline では、ウェブ プラットフォームの機能に対するブラウザのサポートに関する情報を明確にし、現在プロジェクトで使用できるウェブ プラットフォームの機能について明確な情報を提供します。web.dev の記事で、使用されている機能がすべてベースラインの一部である場合、ブラウザの互換性レベルは信頼できます。
Sublime Textをもっと快適で便利にする、フロントエンドのWeb制作に役立つプラグインのまとめ
Sublime Textは快適で非常に使いやすいエディタですが、そのままの状態では最近の他のエディタに機能で劣っている面があります。 エディタとしての機能を強化し、HTML, CSS, JavaScriptのコーディング作業を快適にする便利なプラグインを紹介します。 Sublime Text 3 Plugins for Frontend Web Development キャプチャは、Sublime Text 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様のライセンスに基づき翻訳しています。 Sublime Textの管理系プラグイン Sublime Textの一般系プラグイン Sublime TextのJavaScript関連のプラグイン Sublime TextのHTMLとCSS関連のプラグイン Sublime Textのリンター関連のプラグイン Sublim
はじめてプログラムを書いた時，はじめてHTMLを書いた時，はじめてWeb制作の仕事をした時のことを思い出しながら、オススメ本を５冊紹介してみる | F's Garage
はじめてプログラムを書いた時，はじめてHTMLを書いた時，はじめてWeb制作の仕事をした時のことを思い出しながら、オススメ本を５冊紹介してみる 何冊か初心者向けの本があるので紹介しようと思い、本を読み始めた。 そういえば自分はどういうきっかけでプログラミングを始めたんだろう。どうやってWebの仕事に慣れて行ったんだろう。どうやってHTMLを書いたんだっけ、なんてことを考え始めた。 僕は、はてブやネットで見かける天才の人達と違って、本を読んで興味本位で手を動かしたらできるようになったというタイプではない。プログラミングの始まりは同世代の人達に近いファミリーベーシックだったが、マリオを動かすぐらいしかやってない。その後、パソコンを買ってBASICによるゲームを動かすことは知った。徳間書店の雑誌に書いてある音楽のプログラムを友達と入力したが、何かが間違っていたのか動かなかった。どう見ても間違って
JSX、TemplateLiteral とは一味違うテンプレートエンジン HyperScript - Cycle.js を学ぼう #2 | Recruit Tech Blog
JSX、TemplateLiteral とは一味違うテンプレートエンジン HyperScript - Cycle.js を学ぼう #2 wakamsha 前回のエントリ で Cycle.js の概要についてご紹介しました。今回は HyperScript という Cycle.js における DOM の描画の仕組みについてご紹介します。 hyperscript/index.js at master · hyperhype/hyperscript HyperScript - Cycle.js における DOM の描画を司る まずは前回のエントリにあるサンプルコードをおさらいしましょう。 type Sources = { DOM: DOMSource; } type Sinks = { DOM: Observable<VNode>; } /** * アプリケーション * @param source
ニューヨークで開催された AMP Conf 2017 に参加してきました - ぐるなびをちょっと良くするエンジニアブログ
みなさまいかがお過ごしでしょうか。フロントエンド開発グループの佐藤雅ｙです。 2017年3月7日と8日にニューヨークで開催された AMP のカンファレンス「AMP Conf 2017」に招待していただき、参加してきました。 今回は1日目のレポートになります。 AMPとは カンファレンスの内容に触れる前に、AMP をご存じない方のために、ちらりと AMP について触れておきます。 まず、AMP = Accelerated Mobile Pages の頭文字 です。 実装方法等はオフィシャルサイトが最新で基本となりますが、オフィシャルブログや、Google他サービスブログ等で、事前に仕様やマイルストーンが公開されることも多いです。 AMP の昨今 もともとの AMP の成り立ちは、モバイルニュースサイトの表示速度の遅さに業を煮やした有志たちが、モバイルサイトのパフォーマンスを改善させるために考
JavaScriptで作られたコンテンツはHTMLよりもGoogleの評価が低いのか？
[レベル: 初級] JavaScriptで生成されたコンテンツであっても、通常のHTMLで作られているコンテンツと同じようにGoogleは評価します。 JavaScriptだから評価が下がるということはありません。 JavaScriptを利用したコンテンツで重要なことは、Googlebotが正しくレンダリングできているかどうかです。 JavaScript と HTML の評価は同じ GoogleのJohn Mueller（ジョン・ミューラー）氏にTwitterでフォロワーが次のように質問しました。 私のサイトのJavaScriptをGooglebotがクロールすることについて不安があります。JavaScriptによって作られた要素は、HTMLよりも重要度が下がることがありますか？ ミューラー氏はこう答えます。 いいや。JSで生成されたコンテンツは（私たちがレンダリング、インデックスできれば
Bootstrapの代わりになるか？超軽量CSSフレームワーク「Spectre」を試してみた
あまりにも定番化しているので「とりあえずBootstrapで」というプロジェクトが多いと思いますが、シングルページのようなシンプルな案件ならもっとライトなフレームワークでもいいかもしれません。 フレームワークはプロジェクトの開発時間を大幅に短縮します。Bootstrapなどのフレームワークはとても人気があり、たくさんの機能を提供していますが、プロジェクトにはそこまで必要ない場合があります。この記事では、Spectreという新しいフレームワークに焦点をあてます。Spectreは軽くて、モダン、レスポンシブ、モバイルフレンドリーです。縮小化およびgzip圧縮された状態でのファイルサイズは約6.8キロバイトです。基本的なグリッドシステムのほか、タブ、モーダル、カードなど、有用でさまざまな構成要素もたくさんあります。 記事ではSpectreの概要を説明したあと、使い始めるのに役立つ簡単な解説をしま
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Google Strongly Recommends Using HTML to Get Content Indexed Quickly
2018年3月に読んだWeb・デザイン関連の本
webpack と HTML と CSS - Qiita
Web制作の20年史――デザイナーとエンジニアの協業、効率化の課題にツールはどう応えるべきなのか