Logpointsを使おう Webフロントエンドの開発をする際、デバッグ目的で「特定の処理が実行された」ということを確認するために console.log() を使うことは多いと思います。しかし、Google Chrome や Microsoft Edge で利用可能な Logpoints を利用することで、 console.log() を使わずともコンソールにメッセージを出力することが可能です。 なぜLogpointsを使うの？ Logpoints を使うのには以下のメリットがあります。 デバッグや動作確認のためにコードを変更する必要が無い console.log() を誤ってcommitに含めてしまう心配が無い console.log() を入れた後に再ビルドやホットリロードを待つ必要が無い どうやってLogpointsを使うの？ logpoints は以下のように使用します。 Chr
この記事は以前7月に自分で書いた「Hono + htmx + Cloudflare is a new stack」という記事を一部修正し、訳したものです。 Hono + htmx + Cloudflareは新しいスタック 以前、バックエンドエンジニアだった身からすれば、Reactは複雑だと感じることがあります。さらに（私はフレームワーク開発者なのですが）フレームワーク開発者にとってはハイドレーションの仕組みを作ることは厄介です。しかし、しばしばReactを使うことになります。 Reactの優位な点の一つは「JSX」です。最初見た時、JSXは奇妙に思えました。「なんでJavaScriptの中にHTMLのタグが入っているんだ！」。しかし、一度慣れると、JSXは柔軟で、書きやすいことに気づきました。 今日はこれから、JSXをサーバーサイドのテンプレートとして使う技術スタックを紹介します。これはつ
2023/09/21 @ Findy のカンファレンス
はじめに この記事では、consoleメソッドについて紹介を行っていきます。consoleメソッドには例えばconsole.log()などが挙げられます。web開発においてconsole.log()を使用する方は多いかもしれません。しかしconsoleにはconsole.log()以外にも様々なメソッドがあるので、状況に合わせて使い分けることで少しでも快適なデバック、開発ライフを目指しましょう。 弊社Nucoでは、他にも様々なお役立ち記事を公開しています。よかったら、Organizationのページも覗いてみてください。 また、Nucoでは一緒に働く仲間も募集しています！興味をお持ちいただける方は、こちらまで。 consoleについて consoleオブジェクトを用いることで変数の値などをコンソール上に出力することができます。主に出力の確認であったり不具合の原因特定などのデバックするために
Cookie2 とは何か | blog.jxck.io
Intro タイトルを見て「Cookie の新しい仕様か、キャッチアップしよう」と思って開いたのなら、以降を読む必要はない。 Cookie History 2000 年に発行された Cookie の仕様である RFC 2965 では、仕様中に Set-Cookie2/Cookie2 (以下 Cookie2) という 2 つのヘッダが定義されている。しかし 2011 年に改定された現行の RFC 6265 ではそれらヘッダは deprecate されており、実際の Web でこれらのヘッダが交換される場面を、少なくとも筆者は見たことがない。存在すら知らない開発者も多いだろう。 筆者はずっと、この仕様がどのように出てきて、どうして消えていったのかが気になっていた。 Web 上にも情報が少なく、「歴史上の理由で」とか分かったようなことを言ってる人がたまにいるくらいだ。四半世紀前のことなので経緯を
CSSの新しいプロパティ「field-sizing: content;」が便利！ フォームのサイズを入力された文字量に合わせて自動変更
今まではJavaScriptを使用しないとできなかったことが、たった1行のCSSで簡単に実装できるようになります。フォームのtextareaに文字を入力すると、その文字量に合わせてサイズを自動で変更するCSSの新しいプロパティを紹介します。 下記のように入力された文字量に合わせてサイズを自動で拡張してくれます。また、min-heightやmax-heightを同時に設定できるので、上限下限のサイズを設定することもできます。 CSSの新しいプロパティはfield-sizingです。field-sizingプロパティを使用すると、フォームコントロールのデフォルトのサイズを無効にし、フォームのサイズをコンテンツに依存させることができます。そのため、自動で拡張されるtextareaを実装するのが簡単になります。 参考: Feature: field-sizing CSS property CSSは
SameSite属性とCSRFとHSTS - Cookieの基礎知識からブラウザごとのエッジケースまでおさらいする - Flatt Security Blog
こんにちは、 @okazu_dm です。 この記事は、CookieのSameSite属性についての解説と、その中でも例外的な挙動についての解説記事です。 サードパーティCookieやCSRF対策の文脈でCookieのSameSite属性に関してはご存知の方も多いと思います。本記事でCookieの基礎から最近のブラウザ上でのSameSite属性の扱いについて触れつつ、最終的にHSTS(HTTP Strict Transport Security)のような注意点を含めて振り返るのに役立てていただければと思います。 前提条件 Cookieについて Cookieの属性について SameSite属性について SameSite属性に関する落とし穴 SameSite属性を指定しなかった場合の挙動 SameSite: Strictでも攻撃が成功するケース 例1: スキームだけ違うケース 例2: サブドメイ
CSSのサブグリッド（subgrid）の基礎知識と使い方、たった一行のCSSで複数カードの水平グリッドを簡単に揃えられる！
CSSのサブグリッド（subgrid）がChrome 117でサポートされ、Safari, Firefoxではすでにサポートされていたので、これで主要ブラウザのすべてで利用できるようになりました。 先日の記事でもお伝えしたように、subgridを使用するとカード内の見出しやテキストの水平グリッドを簡単に揃えることができます CSSのサブグリッド（subgrid）の基礎知識と使い方、プログレッシブエンハンスメント、デベロッパーツールによるデバッグ方法などを紹介します。 CSS Subgrid by Adam Argyle 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに サブグリッド（subgrid）の基礎知識 ページレベルの「マクロ」グリッドを共有する サブグリッドのサポートをチェ
はじめに 明けましておめでとうございます。 (一週間遅れ) この記事はJavaScriptの組み込みAPI Intl の紹介と解説です。 Intl とは？ MDN から引用すると Intl オブジェクトは、 ECMAScript の国際化 API の名前空間で、言語に依存した文字列の比較、数値の書式化と、日付の書式化を提供します。 Intl オブジェクトは、いくつかのコンストラクターに加え、国際化コンストラクターや他の言語に関する関数に共通する機能へのアクセスを提供します 用はi18nの書式版です。 例を出すより見たほうが早いので実際に機能解説します。 (先に言っておきますが、実はこれバックエンド無しで自然言語処理が出来る優れものです。) 用語解説 localesって何？そもそもnewって何？って人がいるかもしれないので locales https://developer.mozilla.
最近のCloudflare Workersについて、知らない方向けにざっくばらんに書いてみます。 連絡事項 自己紹介しておくと、僕はCloudflareのDeveloper RelationsチームにいてDeveloper Advocateをやってます。 一方で、HonoというCloudflareのみならずDenoやBun、Fastly等で動くWebフレームワークを開発してます。 Cloudflare Workersとは？ 本題に入る前に、そもそも「Cloudflare Workersとは？」を簡単に紹介しておきます。 Cloudflare WorkersとはCloudflareのエッジで動くサーバーレス環境です。 基本的にJavaScript/TypeScriptでアプリケーションを書きます。 V8というJavaScriptエンジンの上でアプリを動かすのですが、これはWebブラウザのGo
本当にあった Web アプリケーションの脆弱性
この記事の目的 今まで Web アプリケーション製作を行った経験が無い方が「ちょっと個人開発で何か作ってみようかな！」と思ったときにうっかり脆弱性を作りこんでしまうことを少しでも防げたらいいなと考えました。 そのためにはまず脆弱性を他人事だと考えないことが大事だと思ったので、私が過去の開発現場において実際に遭遇したことがある Web アプリケーションの脆弱性の事例を幾つか紹介します。 紹介の前に注意喚起をします。 自分が管理しているわけではない Web アプリケーションに対し、依頼されてもいないのに脆弱性を探す行為は絶対にしないでください。その行為の内容によっては犯罪になる可能性もあります。 外部から渡されたデータを何の対策もなしに SQL に埋め込んでいる SQL インジェクション攻撃の説明でよくみられる例ですが、ログイン処理でユーザーが入力した ID とパスワードに一致するユーザー情報
タイミーのRailsアプリをシニアなエンジニアが採点したらだいぶ辛口だった - Timee Product Team Blog
この記事はTimee Advent Calendar 2023シリーズ 1の1日目の記事です。 はじめに こんにちは、タイミーでバックエンドエンジニアをしている須貝（@sugaishun）です。昨年は弊社でアドベントカレンダーに取り組んだか覚えていないのですが、今年はなぜかいきなり3トラックで臨むということで、非常に勢いがあるなと思いました。量と勢いで攻めていくところが弊社らしいなと感じています。全て完走できると良いですね。 さて私はその中のひとつのトップバッターということで、タイミーのRailsアプリケーションについて弊社のシニアなエンジニアたちと雑談した内容を座談会風にお伝えできればと思います。事の発端は弊社Slackのバックエンドエンジニアが集まるチャンネルで「タイミーのRailsアプリケーションの健康度はどのくらいなのか？」という会話をしたことでした。その時の私の感想は「人によって
BuriKaigi 2024 https://burikaigi.dev/ X https://twitter.com/__sakito__
最近実際に開発現場にコンテナを導入してきた経験から、公式ドキュメントに記載されているベストプラクティスに実際どうなんだということを言ってみようと思います。公式に書いてあることを間違ってると指摘という意図はありません 発言は個人の見解に基づくものであり、所属組織を代表するものではありません。 2023/12/3更新: 燃えかけてるのでタイトルを変えました。 補足: こちらの環境は下記を想定しています。 Java CICD/本番環境イントラネット内に整備 WF開発 マルチステージ・ビルドを使う マルチステージビルドの目的 公式ドキュメントには、下記のように記載があります。 マルチステージ・ビルド は、中間レイヤとイメージの数を減らすのに苦労しなくても、最終イメージの容量を大幅に減少できます。 つまり、最終イメージの容量を減らすことが目的であって、その一つの手段としてマルチステージビルドを進めて
経緯 world.hey.com DHHが「オタクくん見てる〜？ 今からうちのレポジトリからTypeScriptを剥しま〜す」と宣言したことにより、Web開発者界隈でTypeScriptの是非自体の話になり騒ぎになった*1*2。 github.com その後、野次馬がたくさん集ってきてrevertプルリクエストを立てる人やTypeScript公式リポジトリから全ソースコードを消すプルリクエストを出す*3ようなキッズムーブをする人も出てきた world.hey.com 実際の変更 8617行のTypeScriptがJavaScript化された。(Sloc 便利) ❯ scc src/ ─────────────────────────────────────────────────────────────────────────────── Language Files Lines Blan
Publickeyのサーバは3月12日から14日にかけて何度もDoS攻撃を受けてダウンしていました。 その間、読者や広告を掲載いただいているお客様や代理店様にご不便やご心配をおかけし申し訳ありませんでした。 ひとまず現在までの状況と対応について報告したいと思います。 先に現状のみを報告すると、CloudflareのDDoS対策サービスを導入していまのところ平穏な状況を保っているため、このまま様子をみているところです。 DoS攻撃の発生時間帯 DoS攻撃とは、大量のトラフィックをWebサーバなどに浴びせることでサーバを応答不能にしてしまう攻撃のことです。 下図が3月12日から14日にかけてPublickeyのサーバに対して行われたDoS攻撃の主な発生時間帯です。 グラフはPublickeyのページビューの推移を示しており、横向きの矢印が主なDoS攻撃の発生時間帯を示しています。発生時間帯では
inline-block を使う理由、それは 入れ子構造を作れることにより、改行位置の優先順位をつけられるから！ 詳しくは以降で説明します。 （前提）そもそも改行調整ってなんの話？ このタイトルを見て記事を開いた方であれば知っていると思いますが、一応説明です。 スペースで単語が区切られる欧文とは違い、日本語は単語の区切りがないので、改行すべき位置を機械的に判断できず、不自然な位置で改行されてしまうことがあります。そこで、見た目を整えるため、改行すべき位置を指定するための手法が必要になります。 他に詳しい記事がいくつもありますので、詳細はそちらを参照してください。 代表的な改行調整の手法 <wbr> 要素 <wbr>要素は、改行してよい位置を表す要素です。 親要素に対して word-break: keep-all; を指定して基本的には改行されないようにすることで、<wbr>要素がある位置で
CSSの最新トレンドにおける現状のまとめ、よく使用する新機能やプロパティや疑似クラス、人気のフレームワークや検証ブラウザなど
CSSの進化は速く、ここ1,2年はさらに速くなりましたね。その要因の一つがIEのサポート終了で、現在はエバーグリーンのブラウザ（自動で最新版にアップデートするブラウザ）となり、モダンCSSの機能がたくさん使用できるようになりました。 2023年、CSSの現状調査をおこなった結果をまとめた「State of CSS 2023」を紹介します。今年は例年より早いですね。 State of CSS 2023 State of CSS 2023は、State of CSSでおこなわれたアンケートの調査結果（9,190人分）をまとめたものです。 まずは、アンケートに回答された人の属性。 世界中の人がアンケートに参加しており、日本人も参加しています。年齢は25-44才が多く、性別は男性が多めです。
先週の火曜日、3月12日に始まったPublickeyへのDDoS攻撃は今週日曜日、3月18日日曜日の早朝を最後に収まったようです。この記事執筆時点でPublickeyのサーバは平常に戻っています。 この間、読者や広告を掲載いただいているお客様や代理店様にご不便やご心配をおかけし申し訳ありませんでした。 DoS攻撃とは、大量のトラフィックをWebサーバなどに浴びせることでサーバを応答不能にしてしまう攻撃のことです。 前回の報告「Publickeyが受けたDoS攻撃、これまでの経緯と対策まとめ」の後、さらにいくつか対策を講じましたので、この記事では前回の報告以後の経緯と講じた対策を記したいと思います。 また、前回の報告では「DoS攻撃」と書きましたが、その後Publickeyのサーバをホスティングしているさくらインターネットのサポート担当の方から、今回の攻撃は分散した箇所から攻撃を受けていると
モダンCSSでテーブルをゼブラストライプしたり、テーブルの四隅を角丸にしたり（昔はかなり面倒でした）、列や行を分割したり、ホバーでハイライトやアウトラインを表示したりなど、表のデータを読みやすくするテーブル（<table>）のさまざまなスタイルを紹介します。 A Guide to Styling Tables by Mads Stoumann 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに テーブルを構成するHTMLの要素 テーブルをゼブラストライブにするCSS テーブルを角丸にするCSS テーブルの列を分割するCSS テーブルの行を分割するCSS ホバー・フォーカスでハイライトするCSS ホバーでアウトラインを表示するCSS データを左右・中央に揃えるCSS 終わりに はじめに 私は最近、小さな矛盾に気がつきました。
普段なにげなく使っているフォントですが、文字の太さを表すフォントウェイトには注意したいポイントがあります。とくにどの環境でも同じフォントにするためのウェブフォントでも、CSSの設定やOSの違いによって見え方が変わってしまうことがあります。ほかにもCSSの設定によっては意図しないウェイトが適用されてしまうこともあります。 この記事ではフォントウェイトのまつわる落とし穴と、それを回避するための方法を紹介します。エンジニアだけでなく、デザイナーの方にも役立つ内容です。 Noto Sans JPを例にフォントのウェイトの設定を変えながら見え方を確認できるデモページを用意しました。ぜひ試してみてください。 サンプルを別ウインドウで開く コードを確認する アンチエイリアス まず、アンチエイリアスについて簡単に説明します。アンチエイリアスとは、画面上で表示される輪郭を色の濃淡などを用いて滑らかにする処理
Webアプリ版Photoshopを実現させた最新Web技術をGoogleが紹介。WebAssemblyのスレッドによる高速化、ストリーミングコンパイル、Web Componentsなど
Webアプリ版Photoshopを実現させた最新Web技術をGoogleが紹介。WebAssemblyのスレッドによる高速化、ストリーミングコンパイル、Web Componentsなど Photoshopは画像の作成や加工といった専門的な用途を目的に、長年にわたって作り込まれた代表的なデスクトップソフトウェアの1つと言えます。 プロフェッショナルな用途を満たす膨大な画像処理の機能を細かく作り込まれたユーザーインターフェイスから操作し、画像の変形や加工、フィルタリングなどの大量の複雑な演算処理が実行されるなど、Webアプリケーションへの移植を難しくする要素が満載です。 それらの困難を克服し、Photoshop Webではデスクトップ版Photoshopでよく使われる一般的な機能を、類似のユーザーインターフェイスでWebに実装し、商用サービスとして提供することに成功しました。 Photosho
jQuery 4.0.0 has been in the works for a long time, but it is now ready for a beta release! There’s a lot to cover, and the team is excited to see it released. We’ve got bug fixes, performance improvements, and some breaking changes. We removed support for IE<11 after all! Still, we expect disruption to be minimal. Many of the breaking changes are ones the team has wanted to make for years, but co
For modern real-time web applications, the ability to send events from the server to the client is indispensable. This necessity has led to the development of several methods over the years, each with its own set of advantages and drawbacks. Initially, long-polling was the only option available. It was then succeeded by WebSockets, which offered a more robust solution for bidirectional communicati
Google DomainsがSquarespaceに買収されるので、持っているドメインとカスタムドメインのメールアドレスをCloudflare Registrarに移管した。 Cloudflare Registrar · Cloudflare Registrar docs 基本的にはCloudflare Registrarに表示される手順でやっておけば、問題は起きなかったので、よくできてると思った。 次のような手順で順番に移管していたので、移管時のメモ。 手順 Google Domainsの移行準備 Cloudflareのname serverを使うように移行する ドメインの移管 メールの転送設定 Google Domainsの移行準備 移管する前に、Google Domainに登録しているドメインの設定を変更しておく。 それぞれONになってると移管時に問題が発生する。 DNSSECを無
この記事のモチベーション 「php-fpmとはなにか？」を知るため、PHPのドキュメントを見ました。 しかし、ここに書いていることはまあそうなのですがあまりに焦点が絞られ過ぎてて「php-fpmとはなにか？」に対する答えとしては少し不十分な気がしていました。 例えるなら数学の問題に答えるにあたって、途中式を飛ばしたり証明の過程を飛ばしたりというような感じ。 不十分というのは、それを理解するための段階をすっ飛ばして答えだけが書かれている状態のことを指しています。 その不十分なところを自分も曖昧にしか理解できていない気がしており、いい機会なので整理しておこうというのがこの記事のモチベーションです。 そのためこの記事は、「php-fpmとはなにか？」をプロセス→Webサーバー→実行方式と順を追って説明していく構成になっています。 「細けぇこたぁいいんだ、おらぁ今すぐ答えだけ知りてぇンダ」という方
内容 社内でAWS知らない人でもこれだけは覚えていてほしいという動画を作成して欲しいとリクエストあり。その内容を資料化したものです。小学生の子供に説明してみましたがになんとなくAWSが分かったと言っていたので今回は結構分かりやすくまとめられたと思います。 システムを構築する時 システムを構築する際、サーバやネットワークなどのインフラが必要になります。昭和の時代は物理サーバを買ってきてラックマウントしてネットワークに接続してと物理的な作業が多く発生していました。 その後、物理サーバの上に仮想的なサーバを作成できる仮想化技術の発展により、仮想サーバが主流となりました。最初に物理サーバを用意して、仮想化基盤を構築する必要があります。仮想化基盤構築後は、新しいシステムを作りたい場合はすぐに仮想サーバの準備を行うことができ、物理環境の時と比較すると大きな進展がありました。 仮想化基盤を自社で構築する
Deno first でやっていく
去年末ぐらいから Deno を使う割合がグッと増えてきた。最近のJS関連は7割ぐらい deno 環境の VSCode でコードを書いている気がする。 今回はいくつかの実例を示しながら、実際に Deno 使えるじゃんというイメージを持ってもらうためのユースケースを紹介していく。 というか、 deno が普及してくれないと、自分が作ったツールの紹介を全部 deno のインストールから書かないといけなくなる。みんなインストールしといて。 最初に: なぜ Deno を使いたいか 一番の問題点、Node は新しいプロジェクトを一式整えるための手間が非常に重い。 とくに ts で書いたものを他の環境に渡すための方法が未だにしんどい。ある環境で動いたコードをそのままコピーしても、プロジェクト設定の非互換を踏む可能性が非常に高い。 deno にそういう側面がないとは言わないが、非常に少ない。とくに TS
こんにちは。カミナシにて業務委託としてフロントエンドを担当している田村(@junkboy0315)です。皆さんはフロントエンドのテスト、どのように取り組んでいますか？フロントのテストはなかなか難しいですよね。 バックエンドのテストには、「入力、出力、永続化されたデータ」の3つを検証するという基本セオリーがあります。しかし、フロントエンドのテストは、その粒度や手法が多様で、とっつきにくいと感じる方も多いのではないでしょうか。 カミナシでもフロントエンドのテストは以前は十分とは言えない状態でしたが、これまで継続的に改善を重ねてきました。今回は、その変遷についてお話ししようと思います。 夜明け前 カミナシのコードベースでは、元々ユニットテストがある程度整備されていました。これらは主に複雑な計算処理を行い結果を返す関数などに対して実施されていました。 しかし、画面全体の機能を網羅する包括的なテスト
フロントエンドの移り変わりは早すぎるのか
インターネットでは毎日のように言われることですが、私はそこまでではないと考えています。 ネットでよくそう言われる理由として考えられるものと、それを踏まえてどう向き合っていくとよさそうか、個人的な考えをまとめてみます。 なぜ言われるのか 言語が実質的にJavaScript一択 バックエンド、というかサーバサイドでは技術選定に「言語の選択」が入りますが、フロントエンドでは実質的にはJavaScriptにほぼ固定されます（TypeScriptも別言語ではないので、ここではJavaScriptに含めます） サーバサイドと比較して「技術の移り変わりが早すぎる」と評される場合、多くはその人の使用しているとある言語と比較されているように思われます。 実質的に言語が固定なので、比較するならすべてのサーバサイドの変化の総量と比較するのが妥当でしょう。 PHP + Python + Ruby + go + J
はじめに WebAssembly (略して Wasm) では WASI や WIT、 Component Model など様々な仕様があります。 それぞれが登場した背景、モチベーションなどを理解することでなんとなく概要を掴んでいくことができるのではないかと考えたため、過去・現在・未来と時間軸で整理してみました。 まず Wasm とその特徴に関して簡単に紹介した後、Wasm の過去として生まれた背景やモチベーションを紹介します。 そして現在の Wasm がなぜ注目を集めているのか、そして現在策定中の仕様と目指している未来について紹介します。 WebAssembly とはなにか WebAssembly はスタックベースの仮想マシン用バイナリ命令フォーマットの仕様です。Wasm と略されます。 Wasm ファイル(Wasm モジュール)は一般に .wasm という拡張子で表されるバイナリファイル
2023年9月7日 CSS CSS小技集シリーズの第5弾！「【第4弾】少しのコードで実装可能な10のCSS小技集」から約2年。またまた便利でサクッと使えるコードが続々登場しています！初心者さんからベテランさんまで要チェック！ ↑私が10年以上利用している会計ソフト！ 目次 ネストで親子セレクターを管理 チェックボックスやラジオボタンの色を変更 アスペクト比を指定する 新しいメディアクエリーの範囲指定方法 背面の要素をぼかす 要素を画面のど真ん中に固定表示 空の要素にスタイルをあてる 条件に合致しないセレクターにスタイルをあてる スムーススクロールのジャンプ位置 動いているCSSアニメーションを止める HTML・CSSの全コードは各サンプルの「HTML」や「CSS」タブを、別タブでのサンプル表示は右上の「EDIT ON CODEPEN」をクリックしてご覧ください！ 1. ネストで親子セレクタ
<details>要素でアコーディオンを簡単に実装できますが、懸念点は複数のウィジェットが個別に開閉してしまうことです。1つ目を開いて、2つ目を開くと、1つ目は開いたままです。1つ目を閉じるには、1つ目をクリックして閉じる必要がありました。 しかし、<details>要素にname属性を与えると、すべてのウィジェットを連動して開閉させることができます。1つのウィジェットだけを開くことができる排他的アコーディオンをHTMLとCSSだけで実装する方法を紹介します。 Exclusive Accordion by Bramus 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 アコーディオンの実装 1つのウィジェットだけを開くことができる排他的アコーディオン 排他的アコーディオンのポリフィル アコー
ZennにみるCloudRunとBigQueryによるアプリケーション構築 / zenn-cloudrun-bigquery-serverless
Zennは、クラスメソッドが展開する技術者向けの知識共有プラットフォームです。Cloud Runを中心としたGoogle Cloudのソリューションをメインで使用しており、スケーラブルなWebアプリケーションとなっています。 このセッションでは、「サーバーレスとはなにか」という部分から改めてディスカッションし、アプリケーションをスケーラブルに、ビジネスに集中するという目的に対してZennがどうアプローチしているかを解説します。 また、Google Cloud を利用するモチベーションのひとつにBigQueryの存在があると思います。Zennでも統計機能に利用しており、アプリケーションとどのように統合しているか紹介、それがどの程度 Google Cloud を使う理由になるか議論します。 サーバーレスアプリケーションを組むときに、みなさまの選択肢をひとつ増やし、結果的によりニーズに合致したア
こんにちは！ラクスルの灰原です！ 軽量かつ高速なWebフレームワークであるHonoと、新進気鋭のJSランタイムであるDenoを使って、社内ツールを作ってみましたので紹介します。 作ったツール 技術スタック index.tsx の内容 Tips HonoでTwindを使う HonoのJSXでAlpine.jsを使う Hono+Denoでesbuildを使う おわりに 作ったツール テックブログ向けのアイキャッチ画像ジェネレータを作りました。 タイトルを入力して、 背景画像と文字色を選んで、 文字の位置と大きさを調整して、 後は「Download」ボタンを押せば画像が手に入ります。 これは以前、弊社デザイン組織で作られた「Zoom背景ジェネレータ」に多分に影響されています。 こちらのデザイナーブログも是非ご覧ください！ note.com 技術スタック このツールは利用頻度がそこまで多くないと思
#フロントエンド #設計 #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は自動
こちらは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
Shadow DOMとCSSの現状
2024-02-27 DOMDOMトークス #1
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
console.log() の代わりにdevtoolsのLogpointsを使う - Qiita
Hono + htmx + Cloudflareは新しいスタック
フロントエンドの開発生産性とは
今からでも遅くないconsoleを使いこなそう - Qiita
JavaScriptの組み込みAPIのIntlが凄いので紹介してみた。
最近のCloudflare Workers - ゆーすけべー日記
2023年のフロントエンド振り返りと2024年
コンテナのベストプラクティスに対しておこがましくも言ってみる - Qiita
Remove TypeScript - laiso
Publickeyが受けたDoS攻撃、これまでの経緯と対策まとめ
それでも私が<wbr>でなくinline-blockで改行調整をする、たった1つの理由
続、Publickeyが受けたDoS攻撃、これまでの経緯と対策まとめ
モダンCSSで実装する、テーブル（<table>）のさまざまなスタイルのまとめ
意外と奥深いCSSのfont-weightの話 - ICS MEDIA
jQuery 4.0.0 BETA! | Official jQuery Blog
WebSockets vs Server-Sent-Events vs Long-Polling vs WebRTC vs WebTransport | RxDB - JavaScript Database
Google DomainsからCloudflare registrarにドメインとメールを移管した
Re: WebサーバーアーキテクチャとPHP実行方式の理解から始めるphp-fpmとはなにか？
本当のAWS基礎 昭和～平成～令和の時代の変遷システムの変化と今昔物語 - Qiita
理想のフロントエンドテストをたずねて三千里 - カミナシ エンジニアブログ
WebAssembly の過去・現在・未来 - Qiita
【第5弾】少しのコードで実装可能な10のCSS小技集
これは知っておくとかなり便利！ details要素にname属性を与えると、連動して開閉するアコーディオンを実装できます
HonoとDenoで社内ツールを作ってみた - RAKSUL TechBlog
jQueryは1個の要素と複数個の要素を同じように書かせる - fsubal
axiosやfetchに替わるKyのススメ - Qiita
社内版 Rails アップグレードガイドを公開します - Timee Product Team Blog
「理論上は最強」の Qwik/QwikCity を、フロントエンドの共通基盤にできないか