タグ

2023年6月10日のブックマーク (7件)

  • Virtual DOM: Back in Block | Million.js

    A little over four years ago, Rich Harris released Virtual DOM is pure overhead (opens in a new tab), analyzing the performance of traditional virtual DOM manipulation.[0] [0] "you've probably heard the phrase 'the virtual DOM is fast', often said to mean that it's faster than the real DOM. It's a surprisingly resilient meme" - Harris, 2018 In his article "Virtual DOM is pure overhead," Rich Harri

    Virtual DOM: Back in Block | Million.js
    efcl
    efcl 2023/06/10
    BlockDOMというアイデアについて。 Virtual DOMは要素単位であるため、diff checkが多くなりがちだが、Block単位にすることでdiff checkのコストを減らす方法について。 静的な部分が多く動的な部分の少ないサイトなどに合うパター
  • 社内用GitHub Actionsのセキュリティガイドラインを公開します | メルカリエンジニアリング

    この記事は、Merpay Tech Openness Month 2023 の4日目の記事です。 こんにちは。メルコインのバックエンドエンジニアの@goroです。 はじめに このGitHub Actionsのセキュリティガイドラインは、社内でGithub Actionsの利用に先駆け、社内有志によって検討されました。「GitHub Actionsを使うにあたりどういった点に留意すれば最低限の安全性を確保できるか学習してもらいたい」「定期的にドキュメントを見返してもらい自分たちのリポジトリーが安全な状態になっているか点検する際に役立ててもらいたい」という思いに基づいて作成されています。 今回はそんなガイドラインの一部を、社外の方々にも役立つと思い公開することにしました。 ガイドラインにおける目標 このガイドラインは事前に2段階の目標を設定して作成されています。まず第1に「常に達成したいこと

    社内用GitHub Actionsのセキュリティガイドラインを公開します | メルカリエンジニアリング
    efcl
    efcl 2023/06/10
    GitHub Actionsのセキュリティガイド
  • GitHub - Tresjs/tres: Declarative ThreeJS using Vue Components

    Declarative ThreeJS using Vue Components 💡 Build 3D scene as they were Vue components ⚡️ Powered by Vite 🥰 It brings all the updated features of ThreeJS right away regardless the version 🦾 Fully Typed Tres (Spanish word for "three", pronounced /tres/ ) is a way of creating ThreeJS scenes with Vue components in a declarative fashion. It's build on-top of a Vue Custom Renderer and it's powered by

    GitHub - Tresjs/tres: Declarative ThreeJS using Vue Components
    efcl
    efcl 2023/06/10
    ThreeJSとVueを使った宣言的に3DのViewを作成できるライブラリ
  • What is WASI?

    What is WASI? — 2023-06-02 introduction what is webassembly? bytecode, webassembly, and the jvm what are webassembly components? what is wasi? categorizing webassembly iterating on wasi the future of wasi conclusion appendix a: terminology cheat sheet Introduction Now that the final touches are being put on the second version of WASI (WASI Preview 2), I figured now might be a good time to write a

    What is WASI?
    efcl
    efcl 2023/06/10
    WASIの擁護的な解説
  • Rspack

    Announcing Rspack 0.2# June 02, 2023 It has been almost three months since the release of Rspack 0.1. We have received so much attention and feedback from the community, and we are grateful. In version 0.2, we have added many features, such as: realContentHash, DataURI, support for ESM format, strengthened compatibility with webpack, and optimized many details. In addition, thanks to compatibility

    Rspack
    efcl
    efcl 2023/06/10
    Rspack 0.2リリース。 Plugin Hooksの追加、ESM形式のoutputに対応、`SplitChunksPlugin`の実装、Data URIのサポート、Vue/Svelte/NestJSの対応など
  • 色、ムズ〜〜〜〜 - マルシテイア

    記事は、先日開催されたKyoto.js 19のために用意したLT資料に加筆したものです。 kyotojs.connpass.com こんにちは、天城です。 最近はWebGLで動画編集アプリを開発しており、Webでの色の扱いについて日々苦しんでおります。 この記事では、僕が最近知った色関連の小ネタを共有します。 目次 話題1: mix-blend-modeにaddがない そもそもBlendingって何? Webでは基的にsource-over compositingしか使われない Canvasではsource-over以外のCompositingが使える PDF Reference 一方その頃WebGLは…… 話題2: Display P3 CSS Color 4でDisplay P3が使えるようになった Display P3 CSS Color 4 CSS Color 4 で導入された

    色、ムズ〜〜〜〜 - マルシテイア
    efcl
    efcl 2023/06/10
    ウェブにおける色
  • HTML 全体の CSS を取得して Shadow DOM に適用する

    以下のコードで HTML 全体の CSS を取得して Shadow DOM に適用することができます。 最近まで replaceSync() と adoptedStyleSheets() の存在を知らなかったのですが、 この 2つを使うと毎回 style タグを書き出すより効率的に処理できるらしい。 これまで Shadow DOM の中に link タグを書くような方法を使っていたのですが、link タグだと最適化がしにくい問題があります。 CSS はインライン化したほうが高速なので、その時にも同じように使える方法が欲しかったのですが、この方法でいけるとわかりました。 document.styleSheets も知らなかった…。 function getGlobalCSS() { let cssText = ""; for (const stylesheet of document.sty

    efcl
    efcl 2023/06/10
    `document.styleShets`からスタイルを集めて`replaceSync`でスタイルシートを作り、`shadowRoot.adoptedStyleSheets`でスタイルシートを当てる方法について。