2023年5月26日のブックマーク (2件)

  • CSSのコード品質向上のためのStylelint入門 - ICS MEDIA

    Stylelintは、スタイルシートの問題検出や自動修正を行えるLintと呼ばれる静的解析ツールです。利用することで、CSSやSCSSファイルのコード品質の向上に役立ち、具体的には以下のメリットがあります。 プロジェクトのすべてのスタイルシートから構文エラーを検出する セレクターやプロパティの重複といった、問題になりそうな実装を未然に防ぐ 次のようなルールを強制し、コーディングスタイルを共通化してコードに一貫性を持たせる font-weightの値は、boldといったキーワード指定を強制する 疑似要素のコロンは2つに強制する(::before)など ICSでは複数人で開発することが多いため、スタイルシートの一貫性のためにStylelintが役立っています。HTMLコーディングが多い場面で恩恵を得られるツールです。 この記事ではStylelintの導入方法と、必要な設定について紹介します。

    CSSのコード品質向上のためのStylelint入門 - ICS MEDIA
    yuyans
    yuyans 2023/05/26
  • ブラウザー上でReactやTypeScriptのコードをコンパイルして動かすツールを作った

    通常、ReactTypeScriptを使って開発する場合は、ローカル環境で開発して、ビルドして、ブラウザーで表示するという流れになります。 ただ、昨今のブラウザーの性能はかなり高くなっており、ES Modulesをうまく使うことで、ノーバンドルでReactTypeScriptをリアルタイムにブラウザー上で反映させることができるのではないかと考えました。 この案をもとに、何番煎じかわかりませんが、ブラウザー上でリアルタイムにReactTypeScriptをバンドルするライブラリを作成しました。 以下のようにコードを書くだけで、ブラウザーで実行可能なJavaScriptコードが生成されます。 import { browserBundle } from "browser-bundler"; const code = ` import React from "react"; import R

    ブラウザー上でReactやTypeScriptのコードをコンパイルして動かすツールを作った
    yuyans
    yuyans 2023/05/26