WebBundle によるコンテンツの結合と WebPackaging | blog.jxck.io
Intro 依存コンテンツを 1 つにまとめて配信する WebBundle の仕様策定と実装が進んでいる。 これは Signed HTTP Exchange と合わせて WebPackaging を実現するための仕様であり、組み合わせれば WebBundle に対して署名することでコンテンツの配信を通信と分けて考えることができる。 Signed HTTP Exchange に比べると格段に簡単な仕様なので、現状のフォーマットと挙動について解説する。 draft-yasskin-wpack-bundled-exchanges-latest WebBundle かつて Bundled HTTP Exchanges と呼ばれていた仕様であり、複数のコンテンツを 1 つにまとめ、配信することができる。 例えば index.html とそれが依存する css/js/favicon etc を 1 つ
Webアプリは会話するスピードで開発しよう～ReactやBFFで高速にプロトタイピングする技術
デザインを高速に実現するReactとCSS in JS React Componentが高速なプロトタイピングを実現する 高速なプロトタイピングにはまず、スピーディーにUIを構築する手法が必要となります。これはReactの得意分野です。 Reactの特徴の1つに、UIにおけるコンポーネント志向が挙げられます。再利用可能な小さいUI部品を組み合わせて全体を構築するアプローチです。Reactにおける基本単位はReact Componentであり、この小さなReact Componentを組み合わせてページを構成します。 さらにReactではデザインもReact Componentの中に閉じ込めることが可能です。React ComponentにCSS相当の装飾やレイアウトを記述しておくことで、React Componentを呼び出すだけでデザイン適用済みのUI部品を表示できます。CSSをJava
Sentryでイベントログ収集をしよう！ - Vue.js編 - - Qiita
はじめに 実際にシステムを運用する上でログからエラーの発生を検知して，原因を調べ，修正する時があるよね．．． ログ収集では，AWSのCloudWatchなど使ったりすると思うのですが，今回はSentryというイベントログ収集ツールを紹介します． 何か間違ったことを書いていたら教えてくださると幸いです． 概要 Sentryはいろんな言語で利用できる アプリケーションの利用ユーザのブラウザやOS情報を取得できる アプリケーションの利用ユーザの行動記録を収集できる ユーザ情報も設定すると，どのユーザがエラーは発生させたのか分かる 実際にJavaScriptのフレームワークVue.jsでSentryを利用する方法の紹介 Sentryとは Sentryはイベントログを収集するツールです． https://sentry.io/welcome/ これを利用することで，エラーの原因の特定を補助してくれます
2018年の最先端フロントエンドエンジニアになろう - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? フロントエンドエンジニア / バックエンドエンジニア / DevOpsエンジニア@poly_soft この画像を見てティン！と来たので訳してみました。 以下はModern Frontend Developer in 2018の日本語訳です。 Modern Frontend Developer in 2018 この記事を始める前に、まず私のことと、このロードマップについてお伝えします。 私は過去5年間フルスタックエンジニアとして働いていて、そして現在はtajawalで、様々な役割を持つリードエンジニアとして働いています。 単に趣味だからと
JSON Schema 中心設計 - FlowType から RAML まで - - Qiita
はじめに Web サービスの運用を続けていくと，依存関係が徐々に複雑になっていきます．そしてメンテナンスするものが増えた結果，それらが相互に乖離していく，といったことが起こりがちです． そこで今回は，JSON Schema のみをメンテナンスしていくことで，動的チェック (バリデーション)，静的チェック (FlowType)，API ドキュメント生成，スタブ作成といった様々な恩恵を享受し，品質と保守性を同時に向上させるアプローチについて書いていきます．この JSON Schema を中心に据えたエコシステムを，__JSON Schema 中心設計__と呼ぶことにします． JSON Schema の仕様については割愛しますので，必要な方は こちら をご覧下さい．また，本記事では JavaScript での事例を紹介しますが，他の言語でも同様の適用ができるかと思います． アプローチ 本記事では
CSSの設計方法をまとめてみた~BEM編~ - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? CSSの設計方法をまとめてみた~BEM編~ BEMについて、簡単にまとめる。 詳細な部分に関しては以下の記事がわかりやすかったので、参考にされると良いと思う。 bem-methodology-ja/index.md at master · juno/bem-methodology-ja BEMという命名規則とSass 3.3の新しい記法 - アインシュタインの電話番号 BEMとは Block、Element、Modifierの略。 DOMを構成する各要素をBlock、Element、Modifierのどれかに当てはめて命名する。 正直な
CSSの設計方法をまとめてみた~SUIT CCS編~(Angularによるサンプル付き) - Qiita
CSSの設計方法をまとめてみた~SUIT CCS編~ SUIT CSSについて、簡単にまとめる。 また、Angularを使用した簡単なサンプルも書いてみる。 なお、本記事は、公式ドキュメントをかなり参考にさせていただいている。 詳細な部分に関しては以下の記事がわかりやすかったので、参考にされると良いと思う。 suit/design-principles.md at master · suitcss/suit suit/naming-conventions.md at master · suitcss/suit SUIT CSSとは Componentベースのcssの方法論。 Componentベースなので、AngularやReactなどのComponent指向なJavaScriptフレームワークやライブラリと相性が良いそう。 SUIT CSSのメリット 各々のユニットの結びつきを緩くして、
webpack -> FuseBox 移行メモ - Qiita
webpackを使っていたプロジェクトをFuseBoxに移行してみました。 バンドル時間が超速くなり、バンドルファイルサイズが超小さくなりました。 webpack FuseBox package.json package.jsonの比較です。 "devDependencies": { "babel-cli": "^6.26.0", "babel-core": "^6.23.1", "babel-eslint": "^8.0.0", "babel-loader": "^7.1.2", "babel-preset-es2015": "^6.22.0", "babel-preset-flow": "^6.23.0", "babel-preset-react": "^6.23.0", "css-loader": "^0.28.7", "eslint": "^4.6.1", "eslint-load
複雑なJavaScriptアプリケーションを考えながら作る話
autoscale: true theme: Plain Jane,5 複雑なJavaScriptアプリケーションを考えながら作る話 自己紹介 Name : azu Twitter : @azu_re Website: Web scratch, JSer.info #jsprimerを書いています JavaScript入門書に興味ある人はウォッチ :star: :warning: 注意 :warning: 作成するアプリケーションによって必要な構造は異なります 今回の話はある程度の規模で複雑性を持つクライアントサイド ライブラリ抜きで数万LOC >= 長期的にメンテンナンスや変更が発生するアプリケーション サーバサイドレンダリングはしないクライアントアプリケーション 3行でOK 複雑なJavaScriptアプリケーションを作るにあたりドメインモデルをどう実装するか悩んだ 色々と試行錯誤した
JavaScript Promiseの本を書きました | Web Scratch
JavaScript Promiseの本という無料で読める電子書籍を書きました。 タイトルそのままで、JavaScriptのPromiseについて書いた書籍です。 書籍の目的 この書籍を読むことで学べる事として、次の3つを目標にして書きました。 Promiseについて学び、パターンやテストを扱えるようになる事 Promiseの向き不向きについて学び、何でもPromiseで解決するべきではないと知る事 ECMAScript6 Promiseの基本をよく学び、発展した形を自分で形成できるようになる事 Promiseは、次のECMAScriptの言語仕様として策定が進められていて既に多くのブラウザに実装されています。 Promiseについて扱う書籍ですが、この機能はjQuery.Deferred()やAngularJSの$qやBluebird等の類似の機能が既にあるため扱ったことがあるかもしれま
JavaScript Plugin Architectureというプラグイン設計について学ぶ無料の電子書籍を書いた
JavaScript Plugin ArchitectureというJavaScriptのプラグイン設計についての電子書籍を書きました。 この書籍はJavaScriptのライブラリやツールにおけるプラグインアーキテクチャについて見ていく事を目的としたものです。 以下の形式で読むことができます。 Web版 PDF形式 ePub形式 Mobi形式 GitHub上にソースコードも公開されているでので直接Markdownファイルを読むこともできます。 MarkdownよりはWeb版の方が見やすいのでそちらをオススメします。 Twitterのハッシュタグは#js_plugin_book 更新情報はRSSやリリースノートから見ることができます。 v1.0.0 最初に書くと決めたプラグインアーキテクチャが揃ったので1.0.0としてリリースしました。 JavaScript Promiseの本の時と同じく、継
Almin.js | JavaScriptアーキテクチャ
autoscale: true Almin.js | JavaScriptアーキテクチャ 自己紹介 Name : azu Twitter : @azu_re Website: Web scratch, JSer.info 中規模以上のJavaScript 設計が必要になる 正しい設計はない Bikeshed.js :bike: 人、目的、何を作るかによってアーキテクチャは異なる 前回の続き? How to work as a Team Read/Write Stack | JavaScriptアーキテクチャ 用語 設計の目的 中規模以上のウェブアプリ SPAというよりは、画面が複雑なElectronアプリのようなイメージ スケーラブル 人、機能追加、柔軟性、独立性 見た目が複雑ではないアーキテクチャ 書き方が特殊ではなく見て分かるもの 設計の目的 テストが自然に書ける パーツごとに無理なく
André Staltz - Unidirectional User Interface Architectures
This post is a non-exhaustive quick overview of the so-called “unidirectional data flow” architectures. Not meant to be taken as a beginner tutorial, but rather as an overview of their differences and peculiarities. At the end, I’ll introduce a new architecture which deviates significantly from the others. This post assumes client-side Web UI frameworks only. TERMINOLOGY It would be confusing to t
FacebookのFluxアーキテクチャの始め方 Part 1 | POSTD
私のように、Reactを使ってより進んだことがしたいと考えたなら、おそらく Flux に注目した経験があると思います。ざっと目を通してタブを閉じ、JavaScript開発者としての自分の人生を見直したことでしょう。 もしReactになじみがなければ、私の記事 「React入門」 を読んでみてください。 Fluxとは？ Fluxは、遠目には始めるために複雑な手順を踏まなければいけないように映ります。しかし、 GitHubにあるexample を見てみれば、これがどのように機能するのかが実に明確になってきます。 簡単に言うと、Fluxは美化された 出版-購読型モデル のアーキテクチャです。データはシステム内を一方向に流れ、そこから様々な利用者が必要に応じてデータを取得します。これについて考えるには、私たちの体に例えてみると簡単です。 イベント – 血液 血液は私たちの体内を一方向に流れています
データ管理JavaScriptライブラリ「Breeze」とは
クライアントサイドのJavaScriptでのデータ処理を簡単にするライブラリ「Breeze」を紹介。JSONデータをキャッシュしたり、ODataのクエリ文字列などを利用したデータのソートやページング処理をしたりできる。 最近のWebアプリケーション開発のトレンドの1つとして、クライアントサイドにおけるJavaScriptの重要度が増していることは、特にHTML5やマルチデバイスといったキーワードが飛び交う中で最新のWeb開発に携わる開発者であれば周知の事実であろう。また、多種多様なJavaScriptライブラリが登場する中で、jQueryはもはやデファクト・スタンダードとしてその地位を確固たるものにしており、そのプラグインとして動作するJavaScriptライブラリも非常に多い。もはや、JavaScriptというよりは、jQueryでコードを書くといっても過言ではない状況でもある。 このよ
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
webpack入門3 ~Output Management~ - Qiita
sourcemap を無効化して webpacker の production build を 2000% 速くする - Qiita