HTML5 Conference 2018 の登壇資料のまとめです。 資料を発見次第随時アップデートしていきます。 https://events.html5j.org/conference/2018/11/ 2018年11月25日(日) 東京電機大学 千住キャンパス 1号館 タイムテーブル https://events.html5j.org/conference/2018/11/session/ ハッシュタグ 総合: #html5j ホール(2階): #html5j_h 各ルーム(1階:A-C/2階:D,E): #html5j_a #html5j_b #html5j_c #html5j_d #html5j_e セッション ZOZOのグローバルECのフロントエンドアーキテクチャ設計 (権守健嗣さん) 光を超えるためのフロントエンドアーキテクチャ (mizchiさん) TypeScript E
In recent years, mobile usage has risen to the point where people now spend twice as much time on mobile devices as they do on desktop, and in many countries mobiles are the only device they use. Users demand consistently great experiences on both native apps and mobile websites. Discover what we really mean by a ‘PWA’, the unique features they offer users, how to build one, and how to assess the
Intro WebPackaging は以下の 3 つの仕様を組み合わせたユースケースである。 Signed HTTP Exchanges: Signing (コンテンツに署名する) Bundled HTTP Exchanges: Bundling (コンテンツを 1 つにまとめる) Loading Signed Exchanges: Loading (そのコンテンツをロードする) 本エントリでは、各仕様を Signing/Bundling/Loading と記す。 現状、 Signing および Loading の仕様策定が進んでおり、 Chrome は Experimental な実装を行っている。 全体的に仕様が大きく、今後も変更される可能性が高いため、今回は実装が進んでいる Signing に絞り、ユースケース、仕様、および本ブログへの適用を中心に解説する。 Signing (Si
11月25日、東京電機大学千住キャンパスにて「HTML5 Conference 2018」が開催されました。本稿では基調講演の模様をレポートします。 カンファレンスの最初に基調講演が行われました。3名の登壇者が発表しました。 岩井将行氏「IoTとWEB技術が支える社会・大学としての人材育成の役割」 はじめに会場を提供している、東京電機大学未来科学部情報メディア学科准教授の岩井将行氏が登壇しました。 岩井氏の研究室からはWeb関係の会社に就職する学生も多く、これまでのように学術をやっている大学がハブになって企業とつながり、今後も若い人材を育成していきたいという話がありました。 そして岩井氏は、時代としてIoTから一進んでWeb of Thingsになってきていると、ますます感じていると言及しました。たとえば、ESP32とそのモジュールが秋葉原を中心に人気で、M5Stackという形で販売されて
PWA=Serviceworkerは間違い!? ハイパフォーマンスWeb "PWA"導入セミナー ~Webサイト/アプリ構築のベストプラクティスを知ろう~に参加しましたHTMLJavaScriptPWA 勉強会詳細 ハイパフォーマンスWeb "PWA"導入セミナー ~Webサイト/アプリ構築のベストプラクティスを知ろう 以前私が書いた記事 【増席しました!!40→60】PWA Beginners 勉強会 #3 に参加しました。2018/04/16(月) 所感 自分自身サーバーサイドエンジニアのため、菊池さんのPWAの歴史についてお話はPWAの前提知識として非常に理解が深まった。やはり技術の理解には歴史が大事であると感じた1日だった。 海外ではフレームワークとPWA兼ね合いを議論していたのは去年まで。近年はプレーンJSとの兼ね合いが議論されているというのが印象的だった。そしてそれは2-3年後
ブラウザーの先へ、ウェブの最先端を切り開く。 そんな WebDINO Japan の CTO としてウェブやブラウザとその周辺技術に関するお話をメイン講演してきました。 2017 年までの Mozilla Japan 時代のスライドは Mozilla 製品と最新 Web 技術の紹介がメインです。2019 年以降の講演は Speakerdeck https://speakerdeck.com/dynamis をご覧ください。 講演/研修のご依頼やスライドに関するご指摘、ご質問はスライド記載のメールアドレスや SNS アカウントから気軽にお声がけください。 レッサーパンダが好きです。(・・). firefox html5 firefoxos mozilla b2g fennec osc android css fxos css3 mobile html webdev browser webap
Table of contents Preface Introduction to JavaScript ECMAScript ES6 ES2016 ES2017 ES2018 Coding style Lexical Structure Variables Types Expressions Prototypal inheritance Classes Exceptions Semicolons Quotes Template Literals Functions Arrow Functions Closures Arrays Loops Events The Event Loop Asynchronous programming and callbacks Promises Async and Await Loops and Scope Timers this Strict Mode
ここでいうリビジョン管理とは、JavaScriptファイルやスタイルシートのファイル名に、ハッシュ値などのユニークな値(リビジョン)を付与すること。 そうすることで、ブラウザが古いファイルのキャッシュを利用してしまい変更が反映されない、という事態を回避できる。 手動でファイル名を更新することも可能ではあるが、ビルドの際に自動的に付与されるようにするのが一般的。 ここでは、webpackのv4でリビジョンを付与する方法を書いていく。 この記事で出てくるライブラリについては以下のバージョンで動作確認している。 webpack@4.23.1 webpack-cli@3.1.2 html-webpack-plugin@3.2.0 css-loader@1.0.1 mini-css-extract-plugin@0.4.4 clean-webpack-plugin@0.1.19 出力するファイルにハ
フロントエンドエンジニアとデザイナーさんは日々協力してプロダクトを作っていく関係にあります。デザイナーさんが作ってくれたものをエンジニアが素早く実現できるよう、いくつかエンジニアから意識してほしいことをまとめました。 なんでこんな話になったのか(前置きなので次の章まで飛ばしてOKです) デザイナーさんから「この画面をこんな風に作ってください」とXDやSketch、PSDなどいろいろな形で渡されることがあると思います。 僕の個人的な意見・経験ですが、いざ実装するぞとなったときに 「あれ…ここってどうしたらいいんだろう?」 と迷って作業のスピードが落ちてしまうことがとてもストレスに感じていました。できればノンストップでいきたいなあと思うわけです。 手が止まるたび、デザイナーさんに「ここってどうしたらいいですか?」と質問するのが何か新しい画面を作るときに必ず発生していました。 「(いつも聞いてる
2018-09-05にMercari社のオフィスで開催されたHTML5とか勉強会で 「フロントエンド刷新中のnoteの開発環境について」 というタイトルで発表させて頂きました。 pixiv社の川田さん(@_furoshiki)よりお声がけ頂き登壇する運びになりました。機会を頂き感謝です、ありがとうございました! スライド内の紹介コンテンツ・noteのフロントエンドをNuxt.jsへ刷新します ・テキストのサンプル(Nuxt.jsのデモページ) ・Nuxt.js ・ESLint ・JavaScript Standard Style ・Prettier ・「結局Nuxt.jsって何がいいの?」に対する回答 ・Atomic Design ~堅牢で使いやすいUIを効率良く設計する ・Vue.js からみた AtomicDesign ・note engineer meetup 雑談当日は参加者100
ブラウザで見ることができる3Dアクアリウムを作ってみました。 この3Dの実装は基本的にはHTMLとCSSだけで出来ています。canvasも使っていません。Vue.jsも使っていますが、魚を泳がせたり視点を変更するための用途のため、3D描画自体にはあまり関係ありません。 記事の最後に操作できるCodePenを配置してあるので読むのが面倒な方はそちらを見てしまってください(大泣きしながら)。 作り方 HTML HTMLは単にそれぞれの素材を配置しているだけです。 <div id="app" @mousemove="onMouseMoved" @touchmove="onMouseMoved"> <div class="container" :style="rotation"> <img class="bg" src="bg.jpg"> <img class="water front" src=
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く