本連載は分散型マイクロブログ用ソフトウェアMisskeyの開発に関する紹介と、関連するWeb技術について解説を行っています。 ここ最近でMisskeyのユーザー数がさらに急激に増えています。そのため、運営者がより少ないコストでサーバーを維持できるよう、Misskeyのスケーラビリティ改善を急いでいます。 今回は、そういった最近のMisskeyのパフォーマンス改善の取り組みについて、検討中のものも含めて紹介したいと思います。 misskey.ioの登録ユーザー数の推移 Identicon生成の無効化オプション Identiconはユーザーが自身のアイコンを設定していないときに代わりに表示されるアイコンで、これはユーザーごとに異なるようになっています。 仕組みとしては、https://misskey.example.com/identicon/hogeにリクエストされた際に、hoge部分をシー
より良いものをより早く作るのに役立つ、あまり知られていないリポジトリ。 Photo by Juan Rumimpunu on Unsplash はじめに 私たちは、汎用ツールやリソースが数回タップするだけで手に入る時代に生きています。しかも幸いなことに、そのほとんどが無料です。 新しいツールやより簡単な方法が見つかり、面倒で複雑なタスクを実行できれば、誰にとっても、特に開発者には嬉しいことです。 でも、より良く賢い方法があり、予想外の方法で時間を節約できることを知らない場合もあります。 この2年間で見つけたGitHubの素晴らしいリソースは、私をかなり助けてくれました。これらのうちいくつかは、その必要性さえ知りませんでした。 そこで、あなたもおそらく必要になるGitHubリポジトリのリストを作りました。 1. 33 JS concepts ソース 私はプログラミングをJavaで始め、その後
Tailwind CSSが私には合わなかった理由
ここ1,2年で、Tailwind CSSを使用する人が増えてきました。Tailwind CSSはユーティリティファーストのフレームワークで、いくつかのclassを組み合わせることでUIコンポーネントやレイアウトを簡単に実装できます。 Webデベロッパーによる、Tailwind CSSが私には合わなかった理由を紹介します。 Why Tailwind Isn't for Me by Jared White Tailwind CSSについて詳しく知りたい人は、以前の記事をご覧ください。 Tailwind CSSの便利な使い方、レイアウトやUIコンポーネント用のスタイルシートが簡単にまとめて利用できる CSSを書くのが劇的に楽になる！ユーティリティファーストのCSSフレームワーク「Tailwind CSS」 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog はじめまして、Yahoo!ショッピングでシステム開発を担当している村上です。 Yahoo!ショッピングでは数億件にのぼる商品が日々更新されています。 今回はそれを支える巨大なDBの運用の中で遭遇したMySQLのアンチパターンと、回避した方法について紹介いたします。 特定のテーブルをJoinするとすごく遅くなる Yahoo!ショッピングでは商品を出品するためのツールがあります。 商品情報には「商品名」「価格」といった、任意で設定可能な項目のほか、「ブランド」「商品種別」など、製品ごとに入力する内容が決まっている項目を、マスター情報としてテーブルで管理しています。 このマスター情報を利用して、出品の際に入力情報が正確であるかどうか確か
<details>要素でアコーディオンを簡単に実装できますが、懸念点は複数のウィジェットが個別に開閉してしまうことです。1つ目を開いて、2つ目を開くと、1つ目は開いたままです。1つ目を閉じるには、1つ目をクリックして閉じる必要がありました。 しかし、<details>要素にname属性を与えると、すべてのウィジェットを連動して開閉させることができます。1つのウィジェットだけを開くことができる排他的アコーディオンをHTMLとCSSだけで実装する方法を紹介します。 Exclusive Accordion by Bramus 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 アコーディオンの実装 1つのウィジェットだけを開くことができる排他的アコーディオン 排他的アコーディオンのポリフィル アコー
はじめに 2023年3月末にiOS 16.4がリリースされたことで、ついにすべてのモダンブラウザユーザーに対してWeb Pushを送れるようになりました。 本記事は、筆者が個人開発しているWebサービスでWeb Push機能を実装したときに調べたことや行ったことをメモとして残すものです。Web Push機能の実装を検討されている方の参考になりましたら幸いです。 なお、筆者は外部サービスへの依存をなるべく減らしたかったため、FCMなどのプッシュ通知機能を提供してくれるものはなるべく使わずに実装したのですが、大変だったので基本的には素直にSaaS等を使った方がよいと思います。 注意事項として、筆者はバックエンドに専門性がありません。そのため、何か間違った記述があるかもしれません。特に暗号化周りは理解が甘い点があると思います。もし誤りを発見された場合は優しめに教えていただけると助かります。よろし
のんびりしていたらこんなメンションをもらっていたので、ちょっとまとめてみようと思います。 そろそろ @tk0miya さんがアップしてくる頃。GFMはspecかっちりしてるんでしたっけ(markdown全く詳しくない — Aki Ariga (@chezou) February 1, 2020 かっちりしている? この記事を読んでいる皆さんは Markdown の歴史に精通していると思うので、古い部分はざっくり割愛してしまいますが、オリジナルの Markdown は かっちりしていない ことで有名なマークアップ言語です。 必要最低限のマークアップ要素は規定されていて HTML への変換ツールも完成していた Markdown ですが、マークアップ言語の言語仕様としては貧弱で、インデントのルールやインライン要素をネストしたときの挙動、空行の有無による解釈の違い、などなど、細かい部分のルールにつ
WEB+DB PRESS Vol.136 最終号！---日本のソフトウェア技術を支えてくれた雑誌の休刊 - Magnolia Tech
WEB+DB PRESS Vol.136 技術評論社Amazon 表紙に「最終号」と書かれているのが、ちょいと悲しい。 技術雑誌の存在ってなんだろうなと考えてみると、一つ一つの記事の深掘りは当然単行本に比べると浅い。でもすべての技術にたいして専用の技術書が出る訳でもない中、ブログ記事などに比べると、編集者の目を通っていることと、一回あたりのページ数が少ない分だけ入りやすいことで重宝する。それに「今、こういう技術が話題になっているんだな」って、ざっと理解できるのも良い。目の前で使わない技術でも、いつか使う日がやってくる時に、「そういえば、ちょっと前に特集されていたなー」と思い出せるだけでも知識のインデックスとして有効に機能してくれる。 そんな雑誌が無くなってしまうのは、けっこう寂しいし、何か大きな穴が空いてしまった感じがする。でもそれを実感するのは今日・明日ではなく、ずっと先のことだと思うけ
Reactの開発において、状態管理の方法は注意深く検討する必要があります。状態管理ライブラリ「Redux」が大きい勢力ではありますが（参照：npm trends）、記事『ベストな手法は？ Reactのステート管理方法まとめ』でも紹介した通りさまざまな状態管理の手法が現在でも編み出されています。本記事では状態管理ライブラリ「Recoil」についての概要と簡単な使い方、Reduxとの思想の違いについて解説します。 Reduxによる状態管理の懸念点 Reduxでは状態管理を一か所にまとめられるというメリットがあります。これはメリットのように思えますが、小さな単位の状態管理もReduxに委ねるのか迷いどころです。 また、Reduxは状態更新の作法的な書き方が複雑でした。Redux ToolkitというReduxのアドオンとしてのJSライブラリもありますが、基本的には作法的な書き方はあまり軽減しませ
ZennにみるCloudRunとBigQueryによるアプリケーション構築 / zenn-cloudrun-bigquery-serverless
Zennは、クラスメソッドが展開する技術者向けの知識共有プラットフォームです。Cloud Runを中心としたGoogle Cloudのソリューションをメインで使用しており、スケーラブルなWebアプリケーションとなっています。 このセッションでは、「サーバーレスとはなにか」という部分から改めてディスカッションし、アプリケーションをスケーラブルに、ビジネスに集中するという目的に対してZennがどうアプローチしているかを解説します。 また、Google Cloud を利用するモチベーションのひとつにBigQueryの存在があると思います。Zennでも統計機能に利用しており、アプリケーションとどのように統合しているか紹介、それがどの程度 Google Cloud を使う理由になるか議論します。 サーバーレスアプリケーションを組むときに、みなさまの選択肢をひとつ増やし、結果的によりニーズに合致したア
Intro JS から Cookie を操作する document.cookie の改善を目的とした Cookie Store API についてまとめる。 document.cookie document.cookie は、ブラウザの API における代表的な技術的負債の一つと言える。 HTML Standard https://html.spec.whatwg.org/multipage/dom.html#dom-document-cookie 基本的な使い方は以下だ。 document.cookie = "a=b" console.log(document.cookie) // a=b まず、この API の問題を振り返る。 同期 API 最も深刻なのは、 I/O を伴いながら、同期 API として定義されているところだ。 この API は古くから実装されているため、I/O は非同期
Intro Interop 2022 の目覚ましい成果の一つとして :has() の存在がある。 これまでの CSS の限界を突破する、革新的な仕様であり、多くの開発者が期待を寄せる機能の一つだろう。 こうした仕様策定の裏には、必ずと言って良いほど互換性の問題がつきまとい、時にそれはそこまでの作業の蓄積を無に帰すレベルで影響を与える場合がある。 一方それらは Web 開発者が使う時点では解決されており、基本的に気にされることはない。 だからといって、気にする必要がないわけではない。ということを象徴する事件が、今回も裏で起こっていた。 jQuery と :has() :has() は、従来の CSS Selector の常識を変え、子の状態を元に親をクエリすることが可能となった。親から子を見る場合と比べて探索範囲が爆発的に増えるため、非常に実装が難しいとされていた。 Igalia の詳細な調
こんにちは！ラクスルの灰原です！ 軽量かつ高速なWebフレームワークであるHonoと、新進気鋭のJSランタイムであるDenoを使って、社内ツールを作ってみましたので紹介します。 作ったツール 技術スタック index.tsx の内容 Tips HonoでTwindを使う HonoのJSXでAlpine.jsを使う Hono+Denoでesbuildを使う おわりに 作ったツール テックブログ向けのアイキャッチ画像ジェネレータを作りました。 タイトルを入力して、 背景画像と文字色を選んで、 文字の位置と大きさを調整して、 後は「Download」ボタンを押せば画像が手に入ります。 これは以前、弊社デザイン組織で作られた「Zoom背景ジェネレータ」に多分に影響されています。 こちらのデザイナーブログも是非ご覧ください！ note.com 技術スタック このツールは利用頻度がそこまで多くないと思
Slim Framework と Docker を使って本格的にアプリを作ってみよう｜技術ブログ｜北海道札幌市・宮城県仙台市のVR・ゲーム・システム開発 インフィニットループ
Slim Framework と Docker を使って本格的にアプリを作ってみよう はじめに Web アプリケーションの開発をするにあたっては勉強しなければならないことは多く、どう勉強すれば良いかはなかなか難しい問題です。初心者向けの解説は比較的たくさんあるのでとりあえずやってみるくらいは何とかなるものの、実戦的な開発がどうなっているかという総合的な話は実務を経験しないとわからないことが多いことでしょう。 ということで、本記事では最近流行の Docker と、そこそこ名前は見かける PHP のマイクロフレームワークの Slim Framework を使って実戦的な Web アプリの開発をしてみる（開発環境を作ってみる）こととします。実装的には、ドメイン実装としてユーザー登録、ログイン、ユーザー情報取得の3つのAPIを実装するところまでを取り扱います。また、静的解析を最大限活用してユニット
はじめに デジタル庁が公開したデザインシステムがよさそうなデザインでしたので、適当に遊ぼうかと思いました。 html/cssで公開してくれればすぐに使いやすいと思ったんですが、どうやらFigmaでしか配っていない。。 ということでhtml/cssに落とし込んでみました。 注意事項 趣味程度に作ったものを、使いたい人がいればどうぞというものです。 細かい部分は間違っていることもあるかと思います。(ラジオボタン難しかったので、何とか再現した感じです。) 自分用に目的もなくつくっていましたので、命名等のポリシーもめちゃくちゃです。許してください。 大変つかれましたので、厳しいコメントは受け付けません。 気が向いたら、もう少しきれいにするかもしれません。 ソースコード 以下、に載せています。 完成概要 ページとしてはこんな感じ
【2024年夏】ブラウザ拡張機能開発を加速するフレームワーク・ツール3選をコードベース付きで紹介！
本記事では、ブラウザ拡張機能開発を加速させる、個人的に注目な3つの拡張機能開発フレームワーク・ツール（WXT、Plasmo、Extension.js）を紹介します。 サンプル拡張機能の実装を通して、それぞれの特徴、セットアップ方法、実際の開発フローを見ていきます。お好みの拡張機能開発ツールが見つかれば嬉しいです。 各フレームワーク・ツールの紹介 WXT WXTは、Viteベースのブラウザ拡張フレームワークです。次のような特徴を持っています（トップページから抜粋）。 クロスブラウザ対応 Chrome、Firefox、Edge、Safari、その他Chromiumベースのブラウザ Manifest V2、V3の両方に対応 開発モードでのHMRと、開発用ブラウザの自動起動 内部的にChrome Launcher等を使用 ファイルベースのエントリーポイントでマニフェストを自動生成 Nuxt風の自動
#フロントエンド #設計 #JavaScript 「1個の要素と複数個の要素を同じように書かせる」というのが実は jQuery の特徴の一つだと思っている。 document.querySelector() や querySelectorAll が出現して以降 jQuery の必要性はほとんどなくなったと言われる。 実際にこんなサイトもあるし https://youmightnotneedjquery.com/ これは実際その通り 一方、jQuery で書かれたコードを querySelector や querySelectorAll に移行しようとしたら苦しかったという経験をした人は多そう。 上のコードが下のようになる。 code:javascript $('.foo').on('click', e => { // ... }) Array.from(document.querySele
Kyとは Kyは、Sindre Sorhusが開発したJavaScript向けの軽量かつ多機能なHTTPクライアントです。ネーミングの意図はよくわかりませんが、AxiosやネイティブのFetch APIに代わる、より効率的で使いやすい選択肢として設計されています。 Kyの利点 軽量で効率的: Kyのコアは非常に小さく（約2 KB）、パフォーマンスが重要なアプリケーションにとっては特に大きなメリットとなります。 Promiseベース: Fetch APIと同様に、KyはPromiseを基盤としており、async/await構文との組み合わせが容易です。 シンプルなAPI: Kyが提供するAPIは非常にシンプルなので、学習コストが抑えられます。 再試行機能: Kyには、失敗したリクエストの再試行する機能が組み込まれており、エラーハンドリングの実装コストを減らします。 JSON処理: Kyは自動
前書き フロントエンドエンジニアの松原(@simezi9)です。 先日10月30日にクラウドワークスさんをお借りして実施したVue.jsの設計勉強会である、Vue.jsアーキテクチャリング勉強会 にて、 BASEの現在のVueコンポーネントの設計に関して登壇してお話してきました。 全体の資料はこちらです もともとBASEではVue.js+TSを採用した大規模なシステムのリニューアルプロジェクトが2018年からスタートしていました。それにあたっての大まかなフロントエンドの構築方針は以前もblogや外部登壇で発表していました。 次世代の管理画面を作るフロントエンドの取り組み - BASE開発チームブログ 次の5年を支えるVue.js製UIコンポーネントライブラリを育てる これまでの発表では大枠の技術スタックやワークフローの話が多かったですが、 今回はVueコンポーネントの設計が勉強会の主眼にあ
AWSはNoSQLデータベースサービスのDynamoDBが、SQLで操作可能になるSQL互換のクエリ言語「PartiQL」に対応したことを発表しました。 You now can use PartiQL (a SQL-compatible query language) to query, insert, update & delete table data in DynamoDB. PartiQL makes it easier for you to interact with DynamoDB & run queries in the AWS Management Console. https://t.co/qlRwzYZCPC pic.twitter.com/pVaX5xlEDu — DynamoDB (@dynamodb) November 23, 2020 DynamoDBはキーバ
Kubernetesを利用したクラウドネイティブな開発と運用とは何か？ これまでと何が違うのか？ サイバーエージェント青山氏が語る（前編） July Tech Festa 2019
Kubernetesを利用したクラウドネイティブな開発と運用とは何か？ これまでと何が違うのか？ サイバーエージェント青山氏が語る（前編） July Tech Festa 2019 Kubernetesを利用したクラウドネイティブな開発や運用は、これまでとどう違うのでしょうか、あるいはどのくらい進化したものなのでしょうか。 2019年12月8日に産業技術大学院大学で行われたイベント「July Tech Festa 2019」で、サイバーエージェントの青山真也氏が行ったセッション『「Kubernetes による Cloud Native な開発」と「VM 時代の開発」』で、VMを用いた従来の方法と比較しつつ、Kubernetesを前提としたクラウドネイティブのやり方が分かりやすく紹介されています。 その内容をダイジェストで紹介しましょう。本記事は前編と後編に分かれています。いまお読みの記事は
IE終了により、webpackやbabelを使う必要がなくなるのか、フロントエンドからビルドステップを完全に消し去ることはできるのか。 そもそもなぜフロントエンドを「ビルド」していたのか そもそもなぜwebpackやbabelを使ってJavaScriptをバンドル（1ファイルにまとめる）していたのか 1. HTTP/1.1とモジュールシステムの相性の悪さ ブラウザにはES Moduleというモジュールシステムが導入されています。これはimport文で他のファイルを読み込むことができるシステムです。 HTTP/1.1については、ブラウザ側で同時接続数制限があります。これは、ファイルを多数読み込む必要があるES Modulesには不向きでした。 2. ブラウザのES Module対応率の低さ ES ModulesはIE非対応です。開発するWebサイトがIEをターゲットにしたい場合、ES Mod
WebAssemblyがW3Cの勧告に到達。「WebAssembly Core Specification 」「WebAssembly Web API」「WebAssembly JavaScript Interface 」の3つ
W3Cの WebAssembly Working Groupは、Webブラウザ上でネイティブコードに近い実行速度で高速に実行できるバイナリフォーマット「WebAssembly」の仕様が勧告に到達したことを発表しました。 今回勧告になったのは、WebAssemblyに関連する3つの仕様です。 1つ目はWebAssemblyのバイナリファイルを実行する仮想マシンの仕様を定義した「WebAssembly Core Specification」。これは一般的なマイクロプロセッサの動作を模倣するような作りにすることで、WebAssemblyのバイナリファイルでプロセッサのネイティブコードに近い実行速度を実現するようになっています。 2つ目の「WebAssembly Web API」は、さまざまなプラットフォームでWebAssemblyを利用可能にするため、WebAssemblyバイナリファイルのシリ
Open standards for building event-driven applications in the cloud
Tailwindcssとは https://tailwindcss.com/ CSSライブラリの一種。 BootstrapやBulmaのような他のCSSライブラリと異なり、 .btnや.cardといったコンポーネント系のクラスは定義されておらず、 <b>1つのスタイルのみを変更するユーティリティ系のクラスがたくさん詰まっている</b>のが特徴。 Tailwindcssで定義されているクラスの例: .font-bold { font-weight: 700; } .rounded { border-radius: .25rem; } .hidden { display: none; } この特性がWeb開発で一体どんな効果をもたらすのか？ Web開発ではおなじみのBootstrapと比較しながら学んでいこう。 Bootstrap vs Tailwindcss : ボタンの例 Bootstra
Next.jsのISRを使ってスプレッドシートをデータソースにして業務フローを変えた話 - パンダのプログラミングブログ
Next.jsのISRを使って業務フローを変えた話 この記事は Next.js アドベントカレンダー 2020 の最終日の記事です。 本記事では、Next.js の ISR の機能を使って業務フローを変えた話を紹介します。Incremental Static Regeneration（以下、ISR） とは、Next.jsアプリケーションをビルドしてデプロイした後も、特定のページのみ定期的に再ビルドする機能です。 ISRでのリクエスト先は Google Apps Script（以下、GAS）にしました。GAS でスプレッドシートのデータを返却する API を作成したので、コードも併せて紹介します。 作ったものは書籍の一覧更新を自動化するもの 開発しているサービス「弁護士ドットコムライブラリー」を紹介します 私は仕事で 弁護士ドットコムライブラリーというサイトを開発しています。このサイトは弁護
令和最新版: PostgreSQLの安全なSET NOT NULL | Wantedly Engineer Blog
データベースのスキーマを変更するときは、スキーマの変更作業によってテーブルが長期間ロックされてしまわないように注意が必要です。 2019年にリリースされたPostgreSQL 12.0以降では、NOT NULLを安全に追加するためによりよいベストプラクティスができています。まだ知らない人もいるかもしれないので、ここで紹介します。 何が問題なのか?次のようなDDLコマンドを考えます。 -- posts.moderatedをNULL禁止にする ALTER TABLE posts ALTER COLUMN moderated SET NOT NULL;これはテーブルをACCESS EXCLUSIVEでロックしたままフルテーブルスキャンを行います。その間は他のトランザクションはこのテーブルに関する処理を進行できません。 テーブルが小さければこれで特に問題ありません。しかし、postsがそれなりに大
はじめに この記事について こんにちは、 @zomysan（Twitter） です。この記事では、Next.js で開発をしているWebアプリケーションのフロントエンドを対象に、開発途中のページをどう扱うかということについて書きます。 新しい機能やリニューアルのための開発を始めてあたらしいページを追加したものの、まだ途中なのでユーザーに見せられる状態ではない、ということはよくあると思います。ユーザーには見せたくないけど、開発環境やステージング環境では確認したい。でも本番環境には出したくない。そういうときどうしたら良いのでしょうか？ この記事の対象 この記事は以下のような人を対象としています。 Next.js で Web アプリケーションを実装している 開発中のページを本番環境に露出したくない まとめ 今回、私は以下のように実現してみました。 開発中のページについて、拡張子を .page.d
![[Next.js] 開発中のページを開発環境でのみ表示し、本番環境のビルドには含めないようにする](https://cdn-ak-scissors.b.st-hatena.com/image/square/a7c534f99c5939a78ed338eb6285e70b062ec2ee/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--VoVKpVgs--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%25255BNext.js%25255D%252520%2525E9%252596%25258B%2525E7%252599%2525BA%2525E4%2525B8%2525AD%2525E3%252581%2525AE%2525E3%252583%25259A%2525E3%252583%2525BC%2525E3%252582%2525B8%2525E3%252582%252592%2525E9%252596%25258B%2525E7%252599%2525BA%2525E7%252592%2525B0%2525E5%2525A2%252583%2525E3%252581%2525A7%2525E3%252581%2525AE%2525E3%252581%2525BF%2525E8%2525A1%2525A8%2525E7%2525A4%2525BA%2525E3%252581%252597%2525E3%252580%252581%2525E6%25259C%2525AC%2525E7%252595%2525AA%2525E7%252592%2525B0%2525E5%2525A2%252583%2525E3%252581%2525AE%2525E3%252583%252593%2525E3%252583%2525AB%2525E3%252583%252589%2525E3%252581%2525AB%2525E3%252581%2525AF%2525E5%252590%2525AB%2525E3%252582%252581%2525E3%252581%2525AA%2525E3%252581%252584%2525E3%252582%252588%2525E3%252581%252586%2525E3%252581%2525AB%2525E3%252581%252599%2525E3%252582%25258B%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_34%3Azomysan%252Cx_220%252Cy_108%2Fbo_3px_solid_rgb%3Ad6e3ed%252Cg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2I4Mjg2YmNjMDEuanBlZw%3D%3D%252Cr_20%252Cw_90%252Cx_92%252Cy_102%2Fco_rgb%3A6e7b85%252Cg_south_west%252Cl_text%3Anotosansjp-medium.otf_30%3ASocialPLUS%252520Tech%252520Blog%252Cx_220%252Cy_160%2Fbo_4px_solid_white%252Cg_south_west%252Ch_50%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzUxYTI1OGI3MTQuanBlZw%3D%3D%252Cr_max%252Cw_50%252Cx_139%252Cy_84%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
サーバサイドWebAssemblyに、かつてのCGIの仕組みを取り込んだ「WCGI」をWasmerが発表。すぐ起動し安全に分離されるWebAssemblyの特長が活きる
サーバサイドWebAssemblyに、かつてのCGIの仕組みを取り込んだ「WCGI」をWasmerが発表。すぐ起動し安全に分離されるWebAssemblyの特長が活きる スタンドアロンのWebAssemblyランタイム「Wasmer」の開発元であるWasmer.ioは、サーバサイドのWebAssemblyフレームワークとして、かつて動的なWebサイトを構築する技術として主流だったCGI（Common Gateway Interface」の仕組みを取り込んだ「WCGI」を発表しました。 Today we are incredibly excited to announce WCGI. WCGI allows running any CGI app with WebAssembly and Wasmer! (...we got Wordpress running! ) Check it out
はじめに
好奇心旺盛な人のためのWebRTC #この本は、WebRTCの実装者が苦労して得た知識を世界に向けて発信するために作成されました。 好奇心旺盛な人のためのWebRTC は、常により多くのことを求めている人のために書かれたオープンソースの書籍です。 この本は抽象化されたものではありません。 この本はプロトコルとAPIに関するもので、特定のソフトウェアについて語るものではありません。 私たちはRFCを要約し、文書化されていないすべての知識を一箇所に集めることを試みます。本書はチュートリアルではないので、コードはあまり含まれません。 WebRTCは素晴らしい技術ですが、使いこなすのは難しいものです。この本はベンダーに依存せず、利益相反を排除するようにしています。 この本は誰のためのものか。 #WebRTC が何を解決するのかさえ知らず、もっと学びたいと思っている開発者。既に WebRTC を使っ
Google Analytics 4移行対策、Publickeyの場合。Simple AnalyticsとRanklet4を導入し、GA4も使うことに
Google Analytics 4移行対策、Publickeyの場合。Simple AnalyticsとRanklet4を導入し、GA4も使うことに Google AnalyticsはPublickeyのようなブログに限らず、個人や組織の公式サイトやECサイト、そしてWebアプリケーションなど、さまざまなWebサイトで使われているアクセス分析ツールのデファクトスタンダードといえます。 そのGoogle Analyticsが今月（2023年7月）から、大幅に機能変更が行われた新バージョン「Google Analytics 4」（以下、GA4）に移行し、これまでのGoogle Analytics（通称UA：Universal Analytics）は廃止されました。 UAも、新しくなったGA4も、無料で利用できる大変ありがたいツールであり、こうした有用なツールを無料提供しているGoogleには
自分で Svelte + TypeScript を色々と書いてみたが、情報がまとまってなかったので、ここでまとめていく。 なぜ Svelte + TypeScript か Svelte + TypeScript はセマンティクスが単純で型が付く軽量な Vue として気に入っている。ビルドが軽量で他と混ぜやすいのが特に気に入っていて、React や Vue の他のシステムに対しても、末端のコンポーネントとして混ぜやすい。Vue は歴史的経緯でデータバインディングの仕様が混沌としているが、Svelte はESM First で構文解析時の処理に仕様を寄せてるので、とてもシンプル。 webcomponents として配布するモードがあるのも気に入っている。Vue React は単体のビルドサイズが大きすぎて webcomponents の末端にするのは難しい。 やりたいこと <script la
この資料は、2023年4月23日に開催された「春のJavaScript祭り Online 2023」にて発表した資料になります。 https://javascript-fes.doorkeeper.jp/events/154047 Remixとは、2021年にバージョン1.0が登場したフルス…
この記事は、既存のCSSのレイアウトの文脈ではなく、「プログラムから制御されるレイアウト」をいかに綺麗に制御・生成するか、です。 複雑なSPAや何らかのオーサリング環境で、主に JavaScript の視点からレイアウトを扱うのに Grid をどう活かしていくか、という話。 grid-template-areas の視覚的な対応 IEがない世界では CSS grid のフル機能を使うことができます。 自分が grid を使う際、今まで grid-template-areas を気に入って使っていました。これは CSS の視覚的な情報が最終的な表示と一致する、という理由からです。 例えば、 svelte で書いた grid-template-areas を使ったレイアウト設定のコードはこんな感じになります。。 <div class="grid"> <div style="grid-area:
追記: GoのアプリケーションをOpenMetricsを使ってObservableにする方法については別エントリを書きました。 → https://songmu.jp/riji/entry/2020-05-18-go-openmetrics.html ECSとGoで運用しているシステムに対するDatadogの日本語知見があまり無さそうだったので書いてみる。ちなみに以下の環境です。 ECS on EC2 (not Fargate) アプリケーションコンテナのネットワークモードはbridgeモード 動的ポートマッピングも利用 背景として3月にNature Remoのインフラアーキテクチャ改善をしていて、その前にもうちょっと監視を整えたほうが良いな、ということでDatadogを導入したのがある。テストがないとリファクタリングできないように、監視がないとアーキテクチャのアップデートもやりづらいとい
こちらでVue.jsのプロジェクトを作成しておいてください。 今回のレッスンの全体像 今回のレッスンは、Vue.jsとFirebaseを連携させることが目的です。 Vue.jsとFirebaseが連携できれば、Vue.jsで作成した画面から、データをFirebaseに保存したり、引き出したり、消したり出来るようになります。 つまり、皆さんが想像する一般的なウェブサービスを作れます。 Firebaseとは？ Firebaseとは、Googleが提供するモバイル・Webアプリケーション開発プラットフォームです。 様々な便利なサービスを提供してくれていますが、今回はFirestoreと言う、データベースのサービスを利用します。 Firebaseのプロジェクトを作成 まずはFirebaseのアカウントを作成してください。 Firebase アカウントができたら「プロジェクトを追加」をクリックします
こちらはTimee Advent Calendar 2023 シリーズ1の25日目の記事になります。 昨日は @tomoyuki_HAYAKAWA による Swift Concurrency AsyncStreamを使ってみる #Swift - Qiita でした。 タイミーでバックエンドエンジニアをしている id:euglena1215 です。 メリークリスマス🎄 みなさんの手元にはプレゼントは届いているでしょうか。 Ruby の世界では Ruby コミッターサンタさんがクリスマスプレゼントとして新しい Ruby バージョンをリリースしてくれます。 今年は Ruby 3.3 ですね。個人的には 3.3 の YJIT がどれだけ速くなるのか楽しみです。 また、新しいバージョンのリリースにはアップグレードがつきものです。アップグレードせずには新しいバージョンの恩恵を受けることはできません。
Qwik をマイクロフロントエンド基盤として使えないか検討していて思いついた色々。副産物で色々作った。 tl;dr Qwik は理論上は最強。だが難しい qwik-react を使えば選択的に Qwik/React を切り替えられるので、 Astro と同じメタフレームワークとして使えそう React 以外もその気になれば対応できるはず => qwik-svelte と qwik-vue を実装した 最終的な問題は Qwik が流行るかどうか Qwik/QwikCity とは何か Qwik は SSR First なUIライブラリで、 .tsx の React 方言からコンポーネントを生成する。 import { component$, useSignal } from '@builder.io/qwik'; export default component$(() => { return
マイクロソフト、WebIDEの「Visual Studio Codespaecs」を「GitHub Codespaces」に統合へ
マイクロソフト、WebIDEの「Visual Studio Codespaecs」を「GitHub Codespaces」に統合へ マイクロソフトはWebブラウザで利用可能な統合開発環境、いわゆるWebIDEの「Visual Studio Codespaces」を、GitHubで提供を予定しているWebIDEの「GitHub Codespace」へ統合することを発表しました。 Visual Studio Codespacesは、2019年5月に行われたMicrosoft Build 2019でVisual Studioファミリーのなかで、Web版のVisual Studioの位置づけとなる「Visual Studio Online」として発表され、その1年後の今年2020年5月に「Visual Studio Codespaces」と名称変更され、パブリックプレビューとして利用可能になりまし
webcontainer とは
stackblitz が提唱して実装している node.js が動くブラウザ環境。container といってるが、 Docker 等とは関係ない。 stackblitz/webcontainer-core このコンテナはブラウザ内で node.js (らしきもの)が動くことがターゲットで、現在デモとして next.js をビルドしてプレビューできている。これによって node.js + webpack + next.js cli が動いていることがわかる。 デモはここで試せる。 まだ OSS ではないので、この記事の大部分は想像によって書かれている。 webcontainer 概要 (自分の理解なので話半分に) ブラウザサンドボックスでも electron なしでも動かせるようになってきた。しかし現在 node.js を動かすには色々と欠けている部分があるので、それらを総称して webc
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Misskeyのパフォーマンス改善の取り組み・2023年7月 | gihyo.jp
必要だと気付いてもいなかったフロントエンド用リポジトリ7選 - Qiita
MySQLの物理削除によるパフォーマンスの悪化とその回避策について
これは知っておくとかなり便利！ details要素にname属性を与えると、連動して開閉するアコーディオンを実装できます
iOS(16.4+)を含むブラウザでWeb Push機能を実装したメモ
GitHub Flavored Markdown は何であって何でないか - Qiita
Reactの新しい状態管理ライブラリ「Recoil」とは？ Reduxとの違いを解説 - ICS MEDIA
Cookie Store API による document.cookie の改善 | blog.jxck.io
誇りを被った仕様の針に意図を通す | blog.jxck.io
HonoとDenoで社内ツールを作ってみた - RAKSUL TechBlog
デジタル庁公開のデザインをhtml/cssに落とし込んでみた。 - Qiita
jQueryは1個の要素と複数個の要素を同じように書かせる - fsubal
axiosやfetchに替わるKyのススメ - Qiita
BASEのVue.jsコンポーネントの設計について登壇してきました - BASEプロダクトチームブログ
AWS、DynamoDBをSQLで操作可能に。SQL互換のクエリ言語「PartiQL」対応を発表
IEが終了したので、webpackやbabelは不要？ - Qiita
CSS Architecture on Vue.js
Tailwindcssは素晴らしいという話 - GitPress.io
[Next.js] 開発中のページを開発環境でのみ表示し、本番環境のビルドには含めないようにする
Svelte + TypeScript のベストプラクティスを考える
やさしくはじめるRemixとWeb
プログラムによるレイアウト制御のための CSS Grid を考える
ECSとGoで構築したシステムにDatadogを導入する | おそらくはそれさえも平凡な日々
FirebaseのセッティングとVue.jsプロジェクトに組み込む
社内版 Rails アップグレードガイドを公開します - Timee Product Team Blog
「理論上は最強」の Qwik/QwikCity を、フロントエンドの共通基盤にできないか