VS Code 1.58 がリリースされました? リリースノートはこちらにあります。 リリースノートの中で前回 DevelopersIO に書かせてもらった、ローカルに clone しなくても VS Code で GitHub 上のリポジトリを直接開ける Remote Repositories に関連のある「'Open in VS Code' badge」というものがあったので今回はそれをピックアップしてみました。 'Open in VS Code' badge 「VS Code で開く」バッジです。 このバッジを押すと以下のような画面に遷移し、Remote Repositories で開くもしくはDev Container で開くかを選択できます。 ちなみにこの画面では通常版の VS Code か Insiders 版の VS Code かを選べるようになっていました。 今回は左側の R

こんにちは丸山@h13i32maruです。 僕は今、Ubie Discoveryで医療従事者向けのカルテエディタを作っています。人生で初めてContent Editableを使ってエディタを作ってるんですが、それがすごく楽しいです！というのも、エディタを作るには色々技術的な課題があります。例えば、テキストをパースするには？ASTからHTMLをビルドするには？パフォーマンスのよい更新方法は？などなど。それらの技術的な課題を解決していくのが単純に楽しいという感じです。また、車輪の再発明は極力抑えつつ、自分たちのプロダクトでやりたいことを実現できるような工夫もしています。 というわけで、今回はそんなエディタ作りで取り組んだ課題と解決策を紹介していきたいと思います。 （訳: 楽しかったので、誰かに聞いてもらいたい！） エディタの概要 メンテしやすいテキストパーサ - PEG.js メンテしやすいH

この記事について webpack の設定ファイルであるwebpack.config.jsは、TypeScript で書いて Node.js 上で実行できます。しかし、本来であれば TypeScript のソースコードは Node.js では実行できないはずです。 この事が気になった私は、今回その仕組みを調べてみたので、この場を借りてその調査結果を共有したいと思います 💪 参照 記事の概要 概要のみ知りたい人に向けて、以下にこの記事で解説する内容をまとめておきます 👇 webpack-cli では、 rechoir を使って TypeScript を require() できるようにしているよ rechoir は、 ts-node などを使って require.extensions を拡張しているよ ちなみに、 require.extensions は非推奨だよ webpack-cli

第4のWebブラウザ用言語「WebAssembly」、誰がどのように使っているのか：他の言語から呼び出して使う ソフトウェアコンサルティング会社のScott Logicが第4のWebブラウザ用言語「WebAssembly」の使用状況について、調査結果を発表した。WebAssemblyアプリケーションの作成に使われている言語やWebAssemblyの使用目的、今後大きな影響を与える分野、改善を要する分野などが明らかになった。 WebAssemblyとは WebAssembly（「Wasm」と略される）は、Webブラウザを含むモダンな実行環境での効率的なコード実行とコンパクトなコード表現を実現するために設計された、安全でポータブルな低レベルフォーマットだ。 企業の独自規格ではなく、World Wide Web Consortium（W3C）が2019年に標準化を完了し、コア仕様をW3C勧告とし

/** * [α] T 型から undefined 不可キーの union を抽出 */ type RequiredKeys<T> = { [K in keyof T]-?: Record<any, unknown> extends Pick<T, K> ? never : K; }[keyof T]; /** * [β] α を利用し， Passed 型から Req 型の条件を満たさないものだけを抽出 */ type MissingKeys<Req, Passed extends Partial<Req>> = { [K in keyof Pick< Req, RequiredKeys<Req> >]: Passed[K] extends Req[K] ? never : K; }[keyof Pick<Req, RequiredKeys<Req>>]; /** * [γ] β を利用し

CSSのみのボタンデザイン – 現場で使ってきたボタンアイデア30選 Update2025.03.24 Publication2021.07.08 コーディング Web制作の現場でよく使ってきたCSSのみで実装するボタンデザインを紹介します。hover時のスタイルも合わせて公開しているので、そのまま利用することができます。主に自分用のデザインストックとして投稿しますが皆さんも使えるボタンデザインがあるかもしれません。ぜひあなたの現場でもご活用ください。 背景色と矢印のボタン <div class="button01"> <a href="">ボタンデザイン</a> </div> .button01 a { display: flex; justify-content: space-between; align-items: center; margin: 0 auto; padding:

以下の記事を読みました。 CookieのPath属性は本当に安全性に寄与しないのか 結論として以下となっています。 結論。Path属性は特殊な状況下ではある程度安全性に寄与する Path属性は、これを設定してCookieを発行するあるパス(以下「自身のパス」)にサーバサイドのプログラムを書き換えられるような脆弱性がなく、同一オリジン内の別のパスにそのような脆弱性がある場合に、そのパスへのCookieの漏洩することを防ぐことができます。 中略 つまり、「体系的に学ぶ 安全なWebアプリケーションの作り方」の記述はおそらく間違えです。 とはいえ私はセキュリティは専門ではなく、特に攻撃側には疎く、この記事に書いた以上の調査・実験もしていないため、この結論も確実とは言い切れません。詳しい情報をお持ちの方がいたら、ぜひご教示ください。 記事では、iframeなどを用いた攻撃について言及されていて、そ

Viteヴィート（フランス語で「速い」の意味）はフロントエンドのビルドツールです。 シンプルなウェブページの作成からReactやVue.jsなどのフレームワークを使ったアプリケーションの開発まで、さまざまな環境で利用できる汎用的で強力なツールです。2026年にリリースされたバージョン8では、パフォーマンスや開発体験がさらに向上しています。 ViteはNext.js・Nuxt・Astroのようなフレームワーク（メタフレームワーク）を使わずに静的サイトやReact・Vue.js等のSPAを開発するために使われます。位置付けとしてはwebpackのようなバンドラーと呼ばれるものに近い存在ですが、それだけではありません。 この記事では、Viteを導入して静的ウェブサイトからTypeScript・React・Tailwind CSS等を組み合わせたアプリケーションまで、快適な開発環境を手に入れる方法

GoogleではCSSの新機能を導入するだけでなく、既存の機能を向上することにも取り組んでいます。その中の一つ「TablesNG」で、HTMLのtableの実装がこれまでと変わるのでその変更点を紹介します。 tableは古くからあり、その後さまざまなCSSの機能がブラウザに実装されました。当然、それらの新しい機能にtableは対応していません。それらに対応し、不整合を修正するのが今回の取り組みです。 TablesNG Resolves 72 Chromium Bugs for Better Interoperability by Una Kravets, Aleks Totic 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに TablesNGの取り組み 1. テーブルの行にposition: sticky 2. バック