まもなくやってくる Vue.js 3「とりあえず動く」コードはよい、「読みやすい」コードはもっとよい / Code that 'just works' is good, but code that is 'readable' is even better.
いいからBlazorをさわるんだ - Qiita
はじめに Blazorのプロジェクトの作り方やPWA(プログレッシブWebアプリケーション)化について、今年の秋辺りにいろいろやっていたのでまとめます。 この記事はC#+WPFチューニング戦記 の最近の一部記事から多少情報を刷新したものです。 皆さんにBlazorをおすすめしている理由 ブラウザのプラグイン等を一切使わないSPA(シングルページアプリケーション)のメリットをそのままに、JavaScriptを1行も書かずにC#+HTMLでブラウザアプリケーションが作れるというのは、非常に良いと思いました。 PWA化するとC#のアプリケーションでありながら、C#のための.NET Framework/.NET Coreやアプリケーション自体のインストールすら不要です(PWA化するときは1行だけJavaScriptを書きますが、コピペです)。 Blazorの紹介 BlazorとはMicrosoft
React License Violation
JSConfJP 2019 で使用したスライド (に次回の公演情報を追加したもの) です。 https://jsconf.jp/
階層表現が可能なインタラクティブなフロアマップ「Interactive Mall Map」
国内でも商業施設の中でも重要な役割を担うフロアマップ。どうわかりやすく直感的に見せるかというのは商業施設においては一つの課題となっていますが、今日紹介するのは、階層表現が可能なインタラクティブなフロアマップ「Interactive Mall Map」です。 こちらのフロアマップは各階層ごとに積み重なっているビューから始まり、各階層ごとに詳しく見ていけるようになっています。 詳しくは以下 また、マップからだけでは無く、インデックスから逆に位置を探したり、登録されている店舗名を検索したりと、実用的な機能も盛り込まれています。実際のデモは「View demo」からご覧いただけます。 実際にマップを作りこんでいくためにはカスタマイズや登録作業などの作りこみは必要ですが、従来の完全に俯瞰型では無い、動きのあるフロアマップを作りたいという方にはベースとしては非常に優秀なものだと思います。 Intera
A Real-World Comparison of Front-End Frameworks with Benchmarks (2019 update)
By Jacek Schae Also available in: Turkish — thanks to @erdenizZz, Portugues — thanks to @felipefialho For the third time, we are comparing Front-End frameworks by using the Real World example apps. RealWorld example app gives us: RealWorld App Something more than a “todo”. Usually “todos” don’t convey enough knowledge and perspective to actually build real applications. Standardized A project that
Vue Fes Japan 2019 キーノート構成変更のお知らせ｜kazupon
こんにちは！ Vue.js 日本ユーザーグループ代表の川口和也@kazupon です。 Vue Fes Japan 2019 開催まで、残り3週間を切りました。本日は、みなさんに重要なお知らせがあります。 キーノートで登壇を予定していました Evan You 氏が、家庭の事情により来日できなくなりました。直接の出演は叶わなくなったものの、Evan 氏の生の声を届ける貴重な機会を最大限に生かすため、構成を変更してライブ配信形式でキーノートを実施することになりました（注：当日キーノートをご覧いただけるのは会場内のみです）。 本件について Evan 氏からビデオメッセージをいただいています。 大変残念ではありますが、ご理解のほど何卒よろしくお願いいたします。また、予定されているキーノートの内容については変更ありませんので、当日はぜひお越しいただき、オープニングから楽しんでいただければと思います。
サーバサイドエンジニアがフロントエンドを始めた時の試行錯誤
[PHPカンファレンス沖縄2024]「無理なくできるだけ安全に」テストもないレガシーコードをリファクタリングするテクニック
実はHTMLだけで多くのことが実現できる！知っておくと便利なHTMLの使い方
HTMLだけで多くのことが実現できるのは素晴らしいことです。一昔前までは、CSSやJavaScriptを使用しなければできなかったこと、かなり複雑なコードを書かなければできなかったことが、実はHTMLだけで多くのことが実現できます。 知っておくと便利なHTMLの使い方をまとめて紹介します。 HTML can do that? by Ananya Neogi 先日紹介した「CSSでここまでできるのか！」の続編です。 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1. datalist -フォームに入力候補を表示 2. dialog -ダイアログ ボックス 3. progress -プログレスバー 4. detailsとsummary -開閉パネル 5. inputmode -スマホで入力時に適したキーパッドを表示 6. inpu
p5.jsをWebページの背景に設定する方法 - Qiita
p5.jsとは? p5.jsとはデジタルアート等をつくることのできるProcessingというプログラミング言語のjavascript版ライブラリです。 javascriptで使うことができるので、Webページに組み込むことが可能です。 公式サイト https://p5js.org/ OpenProcessing(いっぱい作例が載っているサイト) https://www.openprocessing.org/browse ダウンロード まずはp5.jsのDownload(http://p5js.org/download/)からp5.js completeをダウンロードしてください。今回はその中のp5.min.jsとp5.dom.min.jsを使います。 準備 以下の説明ではフォルダ,ファイルの構成は以下のようになっているものとします。 projectFolder/ ├ index.html
Vue.js × Atomic Design - コンポーネント分割の指針 / Vue.js and Atomic Design - Guideline for components division
Vue.js 講演用資料です。 # 概要 コンポーネントをどのような粒度で分割し、どのように実装するべきかというのは難しいテーマです。 一概に正解があるとも言い切れないテーマですが、この指針を疎かにすることはチームを混乱に陥れることと同義です。 それが SPA 未経験のチームであればなおさら…
Chromeのストレージ永続化仕様を詳しく追ってみた - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 1. はじめに ChromeやFirefoxで使えるストレージ永続化機能はご存知でしょうか。 https://developers.google.com/web/updates/2016/06/persistent-storage に Persistent Storage という題で詳しく触れられていますが、通常 LRU で消去されてしまう IndexedDB や CacheStorage の内容を永続化してくれる機能だと理解しています。 CacheStorage と Persistent Storage の組み合わせは強力で、理論上大
expressにwebpack-dev-serverを組み込んでフロントエンドとサーバーサイドを同時にサクサク開発するハンズオン ～Auto Reloadで幸せに～ - Qiita
概要 ■ expressにwebpack-dev-serverを組み込むことにより以下のようなことを可能にします フロントエンド側変更してもブラウザの手動リロードいらず サーバー側変更しても、サーバー(express on node.js)の手動再起動いらず つまり、「ソースを変更したら、フロントエンド側もサーバー側もオートリロードする」ような環境設定の方法を説明します。 これができると、フロントエンドもサーバーもコードを変更したらすぐに反映し動作確認ができるようになりプチハッピーです。 ■ 実現方法 webpack-dev-middlewareとwebpack-hot-middlewareをexpressに組み込むことにより、比較的カンタンに実現できます。 ■ 環境 サーバーはexpressが前提となります フロントエンド開発にはバンドラーとしてwebpackを使います ReactやVu
Updates to the Web Payments APIs | Articles | web.dev
Web Payments have been publicly available in browsers since 2016. The core feature—the Payment Request API—is now available across multiple browsers: Chrome, Safari, Edge and soon Firefox. If you're new to Web Payments take a look at the "Web Payments Overview" to get started. Since the launch of the Payment Request API and the Payment Handler API, there have been quite a few changes made to their
Display Locking によるレンダリングの最適化と Async DOM | blog.jxck.io
Intro React や lit-html などにより、 DOM 操作の抽象化に加えて最適化が提供されることが一般的となった。 見方を変えれば、本来ブラウザがやるような最適化を、ライブラリが肩代わりしていると捉えることもできる。 これは、現在の標準 API には、規模が大きく処理が複雑なアプリケーションを開発する際に、足りてないものがあると考えることが可能だ。 課題の 1 つとして「DOM 操作が同期処理である」という点に着目し、 Async DOM という文脈でいくつかの提案が行われた。 今回は、その提案の 1 つであり Chrome で実装が進んでいる Display Locking について現状を解説する。 現状の DOM 操作の課題 まず、以下のような処理を考える。 body.appendChild($div) この処理が JS の途中で出現すれば、その瞬間 Window にある
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web Packaging BoF
フロントエンドの組織について考える / think-about-front-end-organization
PaymentRequest.show()
vue-devtools/README.md at master · vuejs/vue-devtools · GitHub
D3.js and Vue.JS
Web プラットフォーム再考 ～PWA のもたらす未来の光と影～