localtest.me
Save this URL, memorize it, write it on a sticky note, tweet it, tell your colleagues about it! localtest.me (http://localtest.me) and *.localtest.me (http://something.localtest.me) If you do any testing on your local system you’ve probably created hosts file entries (c:\windows\system32\drivers\etc\hosts) for different testing domains and had them point back to 127.0.0.1. This works great but it
TypeScriptの型と値とバリデーション
TypeScript は本質的に自分に型が付与されていると思っているだけの JavaScript です。 いくら型を付与しようが、それが実行時に影響を与えることはありません。 コードレビューをしているとここを誤解している人が本当に多いです。何度も解説しているのですが、なかなか浸透しないので、TypeScript におけるバリデーションという視点で記事を書くことにしました。 あと TS でバリデータ使って色々作ろうとしている友人と、プログラミング始めたてで zod と openapi を使っいる友人がいたので、彼らが想定読者です。 型と値の名前空間 TypeScript 上での名前空間(スコープ)は2つに分類できます。 値: 実行時にランタイム上のメモリに存在するもの 型: 静的解析時にのみ参照可能なもの。コンパイル時に完全に消滅する。 TypeScript は基本的に JavaScript
JSDocをサポートするということ Attach & Find編 | Memory ice cubes
JSDocをサポートするということ Parse編 | Memory ice cubes https://leaysgur.github.io/posts/2024/04/26/145407 これの続きです。 JSツーリングの一環として、JSDocをサポートするためにはいくつか壁があり、まずそのコメント自体のパースが大変だという話を書いた。 今回は、パースが大変ならその前段も例に漏れず大変なのだという話です。 いやほんと、大変なのよこのコメント文字列をサポートするのは。 JSDocの持ち主は？ JSDocをパースするからには何らかの目的があるはずで、それがLinterであるならば、ASTのノードとの関係が重要になってくる。 たとえば、引数に対して@paramがちゃんと書かれてるか？とか。JSDoc TSなら型情報を取得してるしなおのこと重要。 端的に言うと、こういうコードがあったときに、この
ARM に存在する JavaScript 専用命令「FJCVTZS」を追う（ついでに V8 をビルドする）
前回の記事では、JavaScript の実行エンジン V8 の JIT 出力コードを読んでみました。記事は M1 Mac 上で動かした結果でしたので、ARM アーキテクチャのアセンブラを読むことになりました。 さてそんな ARM アーキテクチャですが、最近の ARM には FJCVTZS という JavaScript 専用の機械語命令があるのをご存知でしょうか？CPU に、特定の言語（それもコンパイラを持たない JavaScript）専用の命令があると知ったとき、私は大いに驚きました（過去にも Jazelle みたいなものはありましたが） 今回は、この FJCVTZS 命令について、実際にどれだけ効果があるのか、V8 をビルドしながら調べてみましょう。 FJCVTZS 命令とは？ FJCVTZS 命令は、Arm v8.3 から導入された JSCVT 命令の一つで、JavaScript の言
高性能な CSS アニメーションを作成する方法 | Articles | web.dev
要素を移動する 要素を移動するには、transform プロパティの translate または rotation キーワード値を使用します。 たとえば、ビュー内にアイテムをスライドして表示するには、translate を使用します。 .animate { animation: slide-in 0.7s both; } @keyframes slide-in { 0% { transform: translateY(-1000px); } 100% { transform: translateY(0); } } 要素を回転するには、rotate を使用します。次の例では、要素を 360 度回転させます。 .animate { animation: rotate 0.7s ease-in-out both; } @keyframes rotate { 0% { transform: rot
大規模で複雑なレイアウトとレイアウトのスラッシングを回避する | Articles | web.dev
大規模で複雑なレイアウトとレイアウトのスラッシングを回避する コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 レイアウトでは、要素の幾何学的情報（要素のサイズやページ内での位置）をブラウザが把握します。各要素には、使用された CSS、要素の内容、親要素に基づく、明示的または暗黙的なサイズ情報が含まれます。このプロセスは Chrome では「レイアウト」と呼ばれます。 レイアウトは、要素の幾何学的情報（要素のサイズ、ページ内での位置）をブラウザが把握する場所です。各要素には、使用された CSS、要素の内容、親要素に基づく、明示的または暗黙的なサイズ情報が含まれます。このプロセスは、Chrome（および Edge などの派生ブラウザ）、Safari ではレイアウトと呼ばれます。Firefox ではリフローと呼ばれますが、プロセスは実質的に同じです。 スタイルの
Deno v2に向けて - Deno v2, deno_std v1, Fresh v2について
Deno v1がリリースされてから4年程が経過しました。 そろそろDeno v2はいつごろ出るんだろう？と疑問に思っている方もいらっしゃるかもしれません。 この記事ではDeno v2やその周辺などに関して、現状、どのような対応が進んでいるのかなどについてまとめます。 Deno v2について Deno v2についてなのですが、リリース時期についてはちょっとまだわからない状況です。 ただ、現在の状況として、Deno v2のリリースに向けた対応は少しずつ進められてる様子が見られます。 具体的に現在、どういった変更が計画または進められているのかについて見ていきたいと思います。 Node.js互換性の改善 以前にいくつか記事にもしましたが、Node.js互換性の改善は引き続きかなり力を入れて進められています。現状では以下のような機能などが実装されています。 npm:URLによるnpmパッケージのim
Bashで$(cat foo.txt)していませんか？$(< foo.txt)しよう - Lambdaカクテル
以下の文書はBashを使う前提の話。 Bashにはコマンド置換(Command substitution)というのがある。$(another-command)のように、$()でコマンドを括る記法だ。これを利用すると、括弧で括られたコマンドが実行され、その標準出力が文字列として取り出され、$()全体を置き換える。シェルスクリプトでは非常によく見る技術だ。 この$()でファイルの内容を読み出すというのを最近見た。このような用法は非常によく見る。 foo-command $(cat params.txt) しかし、より良い書き方があるのでこれを提唱したい。$(< params.txt)と書くことで全く同等のことができる。しかも速いのでこちらのほうが完全に上位互換となる。 foo-command $(< params.txt) この方法はBashのドキュメントのコマンド置換のコーナーにちゃんと書か
What We Learned Inside a North Korean Internet Server: How Well Do You Know Your Partners? - 38 North: Informed Analysis of North Korea
A misconfigured North Korean Internet cloud server has provided a fascinating glance into the world of North Korean animation outsourcing and how foreign companies might be inadvertently employing North Korean companies on information technology (IT) projects. The incident also underlines how difficult it is for foreign companies to verify their outsourced work is not potentially breaking sanction
アニメ「魔導具師ダリヤはうつむかない」に関する報道への対応について | 「魔導具師ダリヤはうつむかない」公式サイト
本製作委員会によるアニメ「魔導具師ダリヤはうつむかない」において、北朝鮮の制作会社が関 与していたと疑われる報道につきまして、大変お騒がせしておりますことを謹んでお詫び申し上げ ます。 今回の報道を受け、制作に関わったスタッフの調査を行った結果、本製作委員会から制作委託 を請けた颱風グラフィックスから日本の制作会社へ、同社から中国の制作会社へ、更にそこから別 の中国の制作会社へ一部の作業が委託されたことが判明しました。 これらすべての委託先に対し、作業スタッフを特定するため、各話に関わったスタッフリストの提 出を求めたところ、これに応じない会社が１社ありました。 したがって、当該会社へ委託した作業については、北朝鮮の制作会社の本作への関与の可能 性が否定できないと判断し、該当部分をすべて国内スタッフにより制作し直した上で放送することと いたしました。 今後のアニメ制作におきましては、委託先
株式会社一休に入社しました - 貳佰伍拾陸夜日記
転職のお知らせ、あるいは個人の日記です。 6月から以下のように所属変更となっています。 From 株式会社はてな To 株式会社一休 マネージャではなく、とくに役職のないソフトウェアエンジニアとして働きます。いわゆるIC (individual contributor)というやつです。 きっかけ はてなには新卒として入社して以来11年も勤めて、インターンやアルバイトとして関わった時期から数えると16年になります。出入りの激しいこの業界でずっと1社しか知らずに過ごすのは負い目に感じていました。また、年齢的にも今年で40歳になることもあって、そろそろ転職を経験しておかないとまずいという焦りもありました。 そんなときに、大学の同期でプライベートでも仲良くさせてもらっているid:suzakから声をかけてもらい、ちょっと真剣に転職を考えたのがきっかけでした。 できることではなくやりたいこと はてなで
JavaScriptの識別子に中黒が使えるようになった: Days on the Moon
JavaScriptの識別子（変数名、関数名、プロパティ名など）の2文字目以降に中黒「・」（U+30FB KATAKANA MIDDLE DOT）が使えるようになりました。以下のコードはChrome 124では構文エラーになりますが、Chrome 125では問題なく実行できます。 const シン・ゴジラ = 2016; JavaScriptの識別子 中黒が使えるようになったのは、JavaScript（ECMAScript）の仕様が変わったからではありません。変わったのはUnicodeの仕様のほうです。Unicode 15.1.0（2023年9月）においてOther_ID_Continueプロパティ（を持つ文字の集まり）に中黒が追加されました。 そもそもJavaScriptの識別子に使える文字は、Unicodeを参照して定義されています。ECMAScript 2023（2023年6月）では
Linuxコンテナの「次」としてのWebAssembly、の解説
はじめに WASMをブラウザの外で動かすトレンドに関して「Linuxコンテナの「次」としてのWebAssemblyの解説」というタイトルで動画を投稿したのですが、動画では話しきれなかった内容をこちらの記事で補完したいと思います。 2022年もWebAssembly(WASM)の話題が多く発表されましたが、そのひとつにDocker for DesktopのWASM対応があります。FastlyやCloudflareもエッジ環境でWASMを動かすソリューションを持っていますし、MSのAKS(Azure Kubernetes Service)でもWASMにpreview対応しています。WASM Buildersでも2023年のWASMの予想としてWASMのアプリケーションランタイム利用に関して言及されました。 WASMといえば元々ブラウザ上で高速にC++のコードなどを実行するところから始まっている
Google、パソコン用 Googlebot によるクロールを完全に終了。 2024年7月5日以降
[レベル: 初級] パソコン用 Googlebot によるクロールとインデックスを 2024 年 7 月 5 日以降 Google は完全に終了します。 検索セントラルブログでアナウンスがありました。 ウェブサイトをクロールするのは スマートフォン用 Googlebot だけ 2023 年 10 月末に、モバイル ファースト インデックスへの移行が完了したことを Google は宣言していました。 しかし実際には、モバイル ファースト インデックスに対応できていないごく一部のサイトについては、パソコン用 Googlebot によるクロールを継続していました。 ですが、2024 年 7 月 5 日以降は、モバイル ファースト インデックスに対応していないこうしたサイトのクロールもスマートフォン用 Googlebot で実行します。 もし、スマートフォン用サイトのコンテンツを省略していたり、あ
PPR - pre-rendering新時代の到来とSSR/SSG論争の終焉
本稿はNext.js v15.0.0-rc.0時点の情報を元に執筆しており、PPRはさらにexperimentalな機能です。v15.0.0のリリース時や、PPRがstableな機能として提供される際には機能の一部が変更されてる可能性がありますので、ご注意下さい。 Partial Pre-Rendering(以降PPR)はNext.js v14.0で発表された、SSRやSSGにならぶ新たなレンダリングモデルです。 PPRは前述の通り開発中の機能で、v15のRC版にてexperimentalフラグを有効にすることで利用することができます。ppr: trueとすれば全部のページが対象となり、ppr: "incremental"とすればexport const experimental_ppr = trueを設定したRouteのみがPPRの対象となります。 // next.config.mjs
ブラウザーのストレージ制限と削除基準 - Web API | MDN
ウェブ開発者が、ユーザーのブラウザー（つまり、ユーザーがウェブサイトを閲覧するために使用している端末のローカルディスク）にデータを格納するために利用できる技術はたくさんあります。 ブラウザーがウェブサイトに格納することを許可するデータ量と、その制限に達したときにデータを削除するために使用する仕組みは、ブラウザーによって異なります。 この記事では、データを格納するために使用できるウェブ技術、ウェブサイトがデータを格納しすぎないように制限するためにブラウザーが所有しているクォータ、および必要なときにデータを削除するために使用する仕組みについて記述されています。 ブラウザーは、ユーザーがウェブ上で追跡されるリスクを縮小するために、ウェブサイトからのデータをさまざまな場所に格納します（バケットとも呼ばれます）。ほとんどの場合、ブラウザーは格納されるデータをオリジンごとに管理します。 このため、オリ
*.drawio.png と *.drawio.svg とはなんなのか
VS Code Draw.io Integration の画像エクスポート機能 数ヶ月前に、VS Code の Draw.io Integration が話題になりました。 VSCode で Draw.io が使えるようになったらしい！ - Qiita ただ、上記の記事にもあるようにエクスポート機能はv0.4.0から無効化されており、エクスポート機能を利用するにはオンライン版の Draw.io に繋がないといけないという本末転倒な状況になっているようです。 せっかくエディタ内でドキュメントと作図が完結しそうという素敵な体験にあと一歩というところなので、*.drawioファイルを一括で画像ファイルに変換するスタンドアロンのツールを作ってみたり（kaakaa/dio-exporter）もしましたが、もっと良い方法があったようです。 *.drawio.png と *.drawio.svg Vis
Built-in AI | AI on Chrome | Chrome for Developers
When we build features with AI models on the web, we often rely on server-side solutions for larger models. This is especially true for generative AI, where even the smallest models are about thousand times bigger than the median web page size. It's also true for other AI use cases, where models can range from 10s to 100s of megabytes. Since these models aren't shared across websites, each site ha
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Introducing visualViewport | Blog | Chrome for Developers
Layout Thrashing and Forced Reflows