はてなブックマーク

【Mac】RaycastでNight ShiftのON/OFF設定切替をショートカットキーで実現して、クリエイティブかつ目に優しい世界を。 はじめに Adobe XDやFigma等を使ってデザインを作成しているWebデザイナー、そのデザインのコーディングを担当するフロントエンドエンジニアやWeb制作を仕事にしているコーダー（マークアップエンジニア）の皆さんに質問です。 「あなたの目、疲れていませんか？」 そんなあなたにオススメしたいのが、Mac OSに内蔵されているNight Shiftという機能です。 「そんなの知ってるよ！」 という方は多いかもしれませんが、一応説明します。 Night Shiftという機能を使えば、ディスプレイの色味が暖色に変わり、液晶のブルーライトによる目の負担が軽減します。システム環境設定＞ディスプレイ＞Night Shiftから設定可能です。 ちなみに、私は以下

はじめに Next.jsでSVGファイルの扱い方を検討したところ、@svgr/webpackプラグインを導入することで実現したかったことが容易に実現できたし、Storybookでも読み込めるように設定が完了して、大変満足していたところに、Jestのテストを走らせると下記のエラーが発生してしまいました。 これまでの過程は下記を参照してください。 Jestを実行すると発生するエラー内容 console.error Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of `ForwardR

はじめに フロントエンド開発を進める際に、Next.jsでのSVGでの扱い方について考える機会があったので、Zennで共有しようと思った次第です。 本来、Webサイト内でSVGファイルを表示させる方法は、大きく分けて以下3点だと思われます。 imgタグのsrcにSVGファイルへのパスを設定して読み込ませる。 CSSファイル内のbackground-imageにパスを設定して読み込ませる。 HTML内でSVGをインラインコードで埋め込む。 ※ 細かく話すとSVG以外の拡張子の画像でもインライン化できたり、CSSでもSVGをインラインで読み込ますことが可能ですが、今回は割愛させてください🙏 1と2の方法だと、他の画像ファイル同様、簡単に読み込ませることができますが、SVG内のスタイルをHTMLもしくはCSSで変更できません・・・ 3の方法だと、HTMLやCSS、JavaScriptによるスタ

Visual Studio Code（VsCode）本体のインストール まだインストールされていない方は、以下からVsCode本体をダウンロードしてください。 VsCodeのおすすめプラグイン（コーダー・マークアップ・フロントエンドエンジニア視点） 私が導入しているVsCodeのプラグインを紹介します。 フロントエンドエンジニアとして働いている自分の普段の業務ではHTML CSS Sass(Scss) EJS Pug JavaScript TypeScript React Next.js PHP WordPress Markdownファイル等を触ることが多いので、それらに関連したプラグインが多くなっています。 共通 プラグイン名 機能

インストール完了後、pagesとstylesをsrcディレクトリに移動してください。この先の手順は、src配下にpagesやstylesディレクトリが配置されていることを前提に進めています。 Prettier + Stylelint + ESLintを含めたNext.jsの環境構築は以下を参考にしてみてください🌟 Storybookのインストール プロジェクトのルートディレクトリで以下コマンドを実行します。