タグ

関連タグで絞り込む (353)

タグの絞り込みを解除

articleに関するefclのブックマーク (2,609)

  • CSS Grid Areas

    A fresh look at the CSS grid template areas and how to take advantage of its full potential today. Jul 20, 2024 CSS Grid support has been widely available since March 2017 in all major browsers. Yet, here we are in 2024, and I still see few people using the grid template areas feature. It’s no surprise that many avoid template areas as making sense of the grid is challenging enough. In this intera

    CSS Grid Areas
    efcl
    efcl 2024/07/21
    CSS Gridについての解説。 grid-template-areasを使ったGridのレイアウト方法について色々な例とともに解説している
  • Misconceptions about view transitions  |  Blog  |  Chrome for Developers

    The View Transition API is a web development game changer. Whether your website is single or multi-page, this powerful API lets you create seamless transitions between views, resulting in native-like experiences that captivate users. Currently available in Chrome, with same document view transitions soon to be available in Safari. With more and more people starting to look into the View Transition

    Misconceptions about view transitions  |  Blog  |  Chrome for Developers
    efcl
    efcl 2024/07/17
    View Transition APIの現状の動作について。 View Transition APIとスナップショットの動作、`blocking=render`との組み合わせについて
  • Reading and writing Node.js streams

    Working with large datasets in Node.js applications can be a double-edged sword. The ability to handle massive amounts of data is extremely handy, but can also lead to performance bottlenecks and memory exhaustion. Traditionally, developers tackled this challenge by reading the entire dataset into memory at once. This approach, while intuitive for smaller datasets, becomes inefficient and resource

    Reading and writing Node.js streams
    efcl
    efcl 2024/07/17
    Node.js Streamについて。 Streamの用途、Backpressure、基本的な読み込み、Async Iteratorを使った処理方法についてなど
  • Private Browsing 2.0

    When we invented Private Browsing back in 2005, our aim was to provide users with an easy way to keep their browsing private from anyone who shared the same device. We created a mode where users do not leave any local, persistent traces of their browsing. Eventually all other browsers shipped the same feature. At times, this is called “ephemeral browsing.” We baked in cross-site tracking preventio

    Private Browsing 2.0
    efcl
    efcl 2024/07/17
     SafariPrivate Browsing Safari 17Lint Tracking ProtectionCNAME-cloakingFingerpriting third-party IP使cloakingStorageblob URLsparitition  

    safari

    privacy

    article
     
  • 真にチラつかないダークモードをついに実現したぞ。実現方法と気付きを書く | stin's Blog

    真にチラつかないダークモードをついに実現したぞ。実現方法と気付きを書く2024/07/14 14:36 nextjsreact このサイトはダークモードに対応しています。なぜならダークモードは基的人権だからです(要出典)。 しばらく、サイトに訪問した直後ライトモードとダークモードが切り替わってチラつく現象が発生していました。これを改善したので、実装方法と気付いたことを残しておきます。 ダークモードの実装方法一般に、ダークモードの実装方法は3タイプあります。 OSによるモード設定を反映する メディアクエリー@media (prefers-color-scheme: dark)を使うと、OS側でダークモードを指定している時だけ有効になるスタイルを書くことが出来ます。 JavaScriptでも判定が必要な場合はmatchMedia("(prefers-color-scheme: dark)")

    真にチラつかないダークモードをついに実現したぞ。実現方法と気付きを書く | stin's Blog
    efcl
    efcl 2024/07/16
    localStorageとdark mode
  • Moving from express to fastify, pt 1

    Express became the default for new JavaScript projects and has stayed there. In a typical week, express is downloaded from NPM 30 million times. It’s a roaring success in every way. A need for types Express is an expressive framework: like a classic Ruby or JavaScript framework, it lets you color outside the lines using loosely defined objects and types. Query string parameters in express become f

    Moving from express to fastify, pt 1
    efcl
    efcl 2024/07/14
    expressからfastifyへの段階的な移行について。 `@fastify/express`を使うことでルーティングごとに移行していった話
  • カード決済のセキュリティ的な問題点とその対策、IC チップの決済とその仕組み - カンムテックブログ

    エンジニアの佐野です。カンムはカード決済のサービスを提供しています。カード決済にはいくつかの決済手段があり、マグストライプ、IC、IC非接触(俗に言うタッチ決済)、オンライン決済などの機能が提供可能です。iD のようなスマートデバイスにカード情報を入れてスマホでタッチ決済する仕組みもあります。カンムのプロダクトであるバンドルカードはマグストライプとオンライン決済、Pool はマグストライプとオンライン決済に加えて IC接触決済、IC非接触決済(タッチ決済)を提供しています。今日はセキュリティ的な観点から各種決済手段の特徴や問題点とともに、主に IC 決済の仕組みについて小ネタを交えつつ書いていこうと思います。カンムが提供しているカードは Visa カードでありクローズドな仕様や confidential なものについては言及することはできませんが、公開仕様であったり一般的な事柄のみを用いて

    カード決済のセキュリティ的な問題点とその対策、IC チップの決済とその仕組み - カンムテックブログ
    efcl
    efcl 2024/07/13
    クレジットカードのICチップ、認証周り
  • Understanding React Compiler | Tony Alicea

    React's core architecture calls the functions you give it (i.e. your components) over and over. This fact both contributed to its popularity by simplifying its mental model, and created a point of possible performance issues. In general, if your functions do expensive things, then your app will be slow. Performance tuning, therefore, became a pain point for devs, as they had to manually tell React

    Understanding React Compiler | Tony Alicea
    efcl
    efcl 2024/07/11
    React Compilerについて
  • How to use container queries now  |  Blog  |  web.dev

    How to use container queries now Stay organized with collections Save and categorize content based on your preferences. Recently, Chris Coyier wrote a blog post posing the question: Now that container queries are supported in all browser engines, why aren't more developers using them? Chris's post lists a number of potential reasons (for example, lack of awareness, old habits die hard), but there'

    How to use container queries now  |  Blog  |  web.dev
    efcl
    efcl 2024/07/11
    CSSのcontainer queryについて
  • ESModules プラットフォームとエコシステムの狭間で | poteboy


    WebJavaScriptwebpackRollup使 ESModulesJavaScript使Web 1 import  v8  ES Module loading import
    ESModules プラットフォームとエコシステムの狭間で | poteboy
    efcl
    efcl 2024/07/11
    モジュールの評価グラフとBundlerでのTop-Level awaitの扱いについて
  • pnpm 9.5 Introduces Catalogs: Shareable Dependency Version Specifiers - Socket

    Security News pnpm 9.5 Introduces Catalogs: Shareable Dependency Version Specifiers pnpm 9.5 introduces a Catalogs feature, enabling shareable dependency version specifiers, reducing merge conflicts and improving support for monorepos. pnpm is eight years into its unique approach to package management, and continues to gain traction, especially among those who need efficiency and support for monor

    pnpm 9.5 Introduces Catalogs: Shareable Dependency Version Specifiers - Socket
    efcl
    efcl 2024/07/11
    pnpm 9.5で導入されたカタログ機能について。 monorepoで同じパッケージのバージョンを参照させるパッケージのカタログを定義できる
  • Ladybird

    Announcement | July 1st 2024 Announcing the Ladybird Browser Initiative Hello friends! Today I want to share with you our plans for the next chapter of Ladybird, the truly independent, open source web browser we’ve been developing from scratch for the past few years. Ladybird uses a brand new engine based on web standards, without borrowing any code from other browsers. It started as a humble HTML

    efcl
    efcl 2024/07/09
    LadybirdというSerenityOSの中で開発されていたブラウザがプロジェクトとして独立した。 ChromiumやWebKitなど既存のエンジンを使わずに一から書いているブラウザプロジェクト
  • What's coming next for ESLint - ESLint - Pluggable JavaScript Linter

    When we released ESLint v9.0.0 in April, it was the first major release in 30 months and formally introduced the new configuration system. ESLint v9.0.0 also made some rule API changes to prepare the core for what’s coming next. After the release, we spent a lot of time creating compatibility utilities, a configuration migration tool, and a rule API transform utility to help the ecosystem move to

    What's coming next for ESLint - ESLint - Pluggable JavaScript Linter
    efcl
    efcl 2024/07/09
    ESLintの今後について。 今まではJavaScriptのみをターゲットにしていたが、language pluginsによってjs以外の言語にも対応できるようにしたという話
  • Layered Toggles: Optional CSS Mixins

    Layered Toggles: Optional CSS MixinsIn this article, I am sharing the next evolution of space & cyclic toggles, which allows us to create and apply optional mixins in CSS with the help of custom cascade layers, available today in every browser that supports them. I am no stranger to looking for various ways to apply some CSS conditionally, and through the years, went from using math as a way to ac

    efcl
    efcl 2024/07/01
    Layered Toggles
  • Inline conditionals in CSS, now? • Lea Verou

    The CSS WG resolved to add if() to CSS, but that won’t be in browsers for a while. What are our options in the meantime? A couple days ago, I posted about the recent CSS WG resolution to add an if() function to CSS. Great as it may be, this is still a long way off, two years if everything goes super smoothly, more if not. So what can you do when you need conditionals right now? You may be pleased

    Inline conditionals in CSS, now? • Lea Verou
    efcl
    efcl 2024/07/01
     CSSif Binary Linear InterpolationTogglesPaused animationsType GrindingVariable animation name  

    CSS

    article
     
  • React 19 and Suspense - A Drama in 3 Acts

    React 19 and Suspense - A Drama in 3 Acts16.06.2024 — ReactJs, React Query, Suspense, JavaScript — 7 min read That was quite a roller-coaster last week 🎢. Some things unravelled, some things went down, and in the middle of it: React Summit, the biggest React conference in the world. Let me try to break down what happened, in hopefully the right order, and what we can all learn from it. To do that

    React 19 and Suspense - A Drama in 3 Acts
    efcl
    efcl 2024/07/01
    React 19 RCでのSuspense内の挙動の変更について。 fetch-on-renderとrender-as-your-fetchのパターン、Fetch以外の非同期処理、React 19での修正予定についてなど
  • Migrating to Next.js App Router with zero downtime — WorkOS

    Can you really adopt Next.js App Router incrementally? At WorkOS, we learned that you can’t really migrate a complex app page by page without a hit to the UX. Instead, we worked out a migration guide that allowed us to test our entire app with App Router while still serving the Pages Router to users—before making the final switch. We use Next.js for all of our frontend apps at WorkOS. Recently, th

    Migrating to Next.js App Router with zero downtime — WorkOS
    efcl
    efcl 2024/07/01
    Next.jsのPages RouterからApp Routerへの段階的な移行方法について。 1. Next.jsのアップデート 2. `useRouter`の移行 3. 一時的な`/app/new`を作成 4. `rewrites`を使ってクエリでのリダイレクト 5. `/pages`の削除 という手順で移行する方法につ
  • CSS のカスケードレイヤー `@layer` を使ってスタイルを階層化して管理する


    CSS  `@layer` 使 2024.06.30 CSS  `@layer` 使`@layer` 使 CSS  CSS  @layer 使@layer 使 CSS  @layer  CSS 
    CSS のカスケードレイヤー `@layer` を使ってスタイルを階層化して管理する
    efcl
    efcl 2024/06/30
    CSSのlayerについて
  • Bun の非互換な拡張 API - moriken's project


    Bun  WinterCG meetings 便 API 使 Node.js  DenoCloudflare Workers 使 Jarred Sumner @jarredsumner 2024/02/18 02:45 JS runtimes obsess about web standards but web standards orgs are incentivized to only care about browsers Luca Casonato 🏳🌈 @lcasdev 2024/02/18 05:48 @jarredsumner J
    Bun の非互換な拡張 API - moriken's project
    efcl
    efcl 2024/06/29
    Bunの非標準な拡張APIについて
  • Ecma International approves ECMAScript 2024: What’s new?

    Ecma International approves ECMAScript 2024: What’s new? On 26 June 2024, the 127th Ecma General Assembly approved the ECMAScript 2024 language specification, which means that it’s officially a standard now. This blog post explains what’s new. The editors of ECMAScript 2024  # The editors of this release are: Shu-yu Guo Michael Ficarra Kevin Gibbons What’s new in ECMAScript 2024?  # Grouping synch

    efcl
    efcl 2024/06/27
    ES2024で追加された機能や構文についてのまとめ。 `Object.groupBy`/`Map.groupBy`、`Promise.withResolvers`、`ArrayBuffers.prototype.resize`、`Atomics.waitAsync`など