PostCSS

こんにちは、弁護士ドットコムでデザイナーをしているhosogaiです。 ふだんは https://www.bengo4.com/ サービス内のUI改善などをしています。 先日このブログ「弁護士ドットコム株式会社 Creators’ blog」のデザインカスタマイズを行った際にCSSの新機能をいくつか試す機会があったので、今回ここで紹介させていただこうと思います。 きっかけ PostCSSとは postcss-preset-envの使い方 npm packageで使う場合 CodePenで使う場合 試せるCSSの機能 Stage0（意欲的） Stage1（実験） Stage2（許容） Stage…

こんにちは、株式会社ラクスで先行技術検証を行っている技術推進課の@t_okkanです。 技術推進課では、新サービス立ち上げ時の開発速度アップを目的に、現在ラクスでは採用されていない新しい技術の検証を行う、技術推進プロジェクトがあります。 今回はその技術推進プロジェクトで、PostCSSについて検証を行いましたので、その結果の報告を行います。PostCSSの仕組みや利点を中心に紹介するため、実践的な話の紹介は少ないです。PostCSSの実践的な話はまた別の記事で紹介できればと思います。 なお、別テーマの取り組みや、過去の取り組みに関しては、こちらからご覧ください。 tech-blog.rakus…

Nuxt.js^2.14.12に postcss-nestedを追加したかったので、公式に則って設定をするとビルド時にエラーが出ます。 How to add PostCSS plugins? - NuxtJS まず、プラグインの追加。 yarn add postcss-nested --devnuxt.config.jsに追加したのはこちら。 build: { postcss: { plugins: { 'postcss-nested': {} } } }エラー内容 Error: PostCSS plugin postcss-nested requires PostCSS 8.Nuxt.js^…

NPM License Checker というそのものずばりの名前のツールを使って，依存関係のライセンスを確認してみます． 例 package.json { "private": true, "dependencies": { "vue": "^3.3.4" }, "devDependencies": { "license-checker": "^25.0.1" } } license-checker --production を実行すると，以下のようにproduction の依存関係の情報が出力されます．なお，公開レポジトリならばよいのですが，非公開ならば，自分自身を含まないようにするために…

自分が最近よく作っている、 Nuxt3 (SSR) Tailwind CSS Firebase Hosting こんな構成のアプリを「新規作成～デプロイして公開する手順」をまとめました。自分は GCP 派なので Vercel ではなく Firebase Hosting を使っています。 (Mac か WSL なら) この手順だけでとりあえず大丈夫なはず。もっと楽な手順や漏れなどあればアドバイスぜひお願いします。 1. Nuxt3 アプリ新規作成 nuxt.com // 新規作成 (例 "web" を作成) npx nuxi@latest init web // 起動 (localhost) c…

こんにちは。 毎日暑いですね。フロントエンドのフレームワークをあまり触ったことがなかったので、今回はNext.jsを試してみようかと思います。 Next.jsってなんだ 公式ドキュメントNext.jsはReactベースのWebアプリケーションフレームワークです。 ReactはJavaScriptライブラリなので基本的にはクライアントサイドでレンダリングされますが、Next.jsではNode.jsを使用してサーバー側でWebサイトをレンダリングすることができます。 ちなみに同じくJavaScriptライブラリとして有名なVue.jsベースのWebアプリケーションフレームワークとしてNuxt.js…

こんにちは。転職ドラフトでエンジニアをしている @verdy_266 です。 転職ドラフトでは、デザインシステムを導入するために、 Bootstrap から TailwindCSS への移行を進めようとしています。その際、思った以上にネットの情報が少なく苦戦した点があったので、導入事例をまとめたいと思います。 サマリ 転職ドラフトでデザインシステムを導入するため、 Bootstrap から TailwindCSS に置き換えていくプロジェクトが進行中です。 Rails 6.1 + esbuild を使用しているアプリケーションでは若干 TailwindCSS の導入方法が特殊で、最終的には a…

まーーーたstylelintが止まった。ちょうどいいから設定など見直しました。 あと！！！！！！ 検索すると！！！！！！ まーーーーーーだcssの並べ替えをcsscombにやらせよう、という記事がたくさん出てきて「そんな長らく開発されてねえもんを使うな！ VScodeのプラグインも使うなって書いとる！」と憤ってしまった*1。cssの並び替えをしたい人はcsscombではなく、Postcssやstylelintにやらせましょう。自分はVScodeでscssをcssにコンパイルしていますが、live sass compilerがベンダープレフィックスやらコンパイルやらはやってくれるので、scssと…

Media Queries: Range SyntaxがSafariを含むモダンブラウザで利用できるようになったので公式ドキュメントの通りですが、書き方をメモ📝 簡単ですが今までmax-widthで指定していたものが不等号で直感的に書けるようになりました👏 before @media (max-width: 30em) { ... } after @media (width <= 30em) { ... } developer.mozilla.org caniuseで見てみてもSafariを含めたモダンブラウザで対応されていますが、 caniuse.com 一応postcss-media-mi…

Pinceauを少しさわってみた Nuxt ThemesやDoucsで利用されているPinceau。 Docusをカスタマイズするために、もう少しちゃんと理解しようと、 少し触ってみたときの備忘録(´ω｀) Hello · Pinceau Pinceau デザイントークンのライブラリ。 こんな感じでtokens.configを用意すると、 // tokens.config.ts import { defineTheme } from 'pinceau' defineTheme({ // Media queries media: { mobile: '(min-width: 320px)', t…

この記事は 2023 夏のブログ連載企画 14 日目の記事になります。 昨日は、山田 さんの「ChatGPTを使ったインフラ構築」でした。 明日は、Y.F さんの「【ChatGPT】フレームワークの移行を試してみた！〜コード変換の実践〜」になります。ご期待ください！ はじめに こんにちは！虎の穴ラボの古賀です。 私は AT＆CSIRT というチームでアーキテクチャ検討やセキュリティ上の脆弱性対応などを担当しています。 最近では「ChatGPT」や「GitHub Copilot」などのテキスト生成やコーディング支援を行う AI を業務で使うことも増えています。その際に ChatGPT を表示して…

VSCodeで開発をしているときに、CSSやJavaScript上の色を表示する拡張があって便利だった。 colorizeを試してみたときの備忘録(*´ω｀*) marketplace.visualstudio.com こんな感じで背景色で表示してくれる(*´ω｀*) (Element+とTailwindCSSのConfigで試してみた) CSS変数にも対応しているのはありがたい(*´ω｀*) デフォルトではCSS系のみ適用する設定なので、 .setting.jsonで言語を追加すればOK。 { "colorize.languages": [ // デフォルトの設定値 "css", "sass…

hacomono フロントエンド テックリードのみゅーとん(@_mew_ton)です npm を使うプロジェクトを立ち上げる際、フレームワークやら、テストやらをどんどん導入していくと、一つの package.json に大量の依存パッケージが書き込まれて、管理が煩雑になるケースがしばしばあります 特にありがちなのが、 “このパッケージ、なんの目的で導入してるんだっけ？” となるなど 今回、いい感じに管理する方法を見つけたので、ご紹介します TL; DR monorepo 構造にして、 dependencies-eslint のような、特定の目的で利用する依存パッケージのみをな管理するだけのサブ…

はじめに 実装 dockerでnode環境を作る create-next-appコマンドで自動プロジェクト生成 next.jsのサンプルアプリ作成 いろいろ試してみる 手動でnext.jsを作ってみる。 はじめに turborepoを用いた開発をするときに、next.jsを使おうと思ったのですが、まぁ全くやったことなかったので何もできませんでした。 なのでここで一旦キャッチアップしてからturborepoのキャッチアップをしようと思います。 実装 dockerでnode環境を作る まず環境を作る。 version: '3' volumes: node-modules: services: ap…

はじめに Linuxはシステム全体がファイルで構成されている ディレクトリとは Linuxのディレクトリ構造 /bin /dev etc /home /tmp /usr /var パスとは 絶対パス 相対パス ディレクトリ移動に関するlinuxコマンド lsコマンドと応用 パス名展開 ワイルドカード(*) ls -l コマンド ls -a コマンド 続く… コメント プログラミングスクールのご紹介 (卒業生より)** 参考 はじめに 多少実践的にもLinux使えるようになりたいと思い書籍「新しいLinuxの教科書」を読み進めています。 本記事では「新しいLinuxの教科書」で学んだ内容と別途気…