Nuxt.js v3の環境でWeb Fontsの導入を行なったため、導入方法について紹介します。 また、Storybookについても同様に追加したため、その方法についても紹介します。 前提 今回は以下のFontを追加していこうと思います。 Google Fonts fonts.google.com Adobe…

Bunのv1がアップデートされたので、各種FWでどのように使うことができるのかいろいろと調べてみた内容になります。 今回使用したバージョン bun: 1.0.11 Next.js: 14.0.2 Nuxt.js: 3.8.1 Astro: 3.5.3 Bunとは bun.sh Bun is an all-in-one toolkit for Java…

以下の記事やサービスでfont-sizeを入力するとそれに応じて出力はされますが、scssで使用する場合にはmixinで使用したいため、font-size調整用のmixinを作成した内容です。 coliss.com www.fluid-type-scale.com min-max-calculator.9elements.com 結果 @use…

X（旧Twitter）で以下のものが流れてきて実装方法など気になったので、それを実装してみた内容になります。 A realistic 3D Card hover effect using only CSS Demo: https://t.co/YFuQiTGH6r via @CodePen ✅ Minimal HTML✅ Responsive✅ Featuring the best …

Astro v2.9からページ遷移のアニメーションをAstroでつけることができるようになったため、少し検証してみた内容になります。 docs.astro.build ページ全体に遷移アニメーションを追加したい場合 コード astro.config.mjs export default defineConfig({ // …

実務で使っているツールや普段の情報収集で使っているものになります。 基本個人のメモ用でフロントエンドエンジニア向けです。 実務で使っているツール SassMeister www.sassmeister.com オンライン上でsassからcssの変換ができるツール。 基本css-modules…

タブのUIについて実装する機会はちょこちょこあるものの、ちゃんと理解しようと思い調べた内容になります。 参考にしたもの qiita.com kt-media.blog ics.media 今回実装したものについて See the Pen tab ui by miwa_shuntaro (@miwashutaro0611) on CodePe…

「swiper/react」をさわった時に少し触りやすいようにしたので、その時のコードです。 swiperjs.com 結果 使っているバージョン "react": "^18.2.0", "swiper": "^9.2.0", コンポーネント側 import type { FC, ReactNode } from 'react'; import { Children …

以下の記事を参考にTypeScriptでの配列の値を記載する際にEnums化を行ったため、その時のメモになります。 blog.mitsuruog.info 行いたかったこと react-hook-formで以下のようなことをする際にテキストだと型がうまく反応しなかったため、反応するようにし…

個人で開発しているものをNuxt2からNuxt3にアップデートしたため、その時に対応したこと等を記載していきます。 Nuxt2からNuxt3にアップデートしようと思った理由について Vue2が2023年末にサポートが切れてしまうためVue3にアップデートさせる必要があった …

cssの:whereと:isの違いについて理解できていなかったため、違いなどについてまとめていこうと思います。 MDNの情報から :whereについて developer.mozilla.org :where() は CSS の擬似クラス関数で、セレクターリストを引数として取り、列挙されたセレクタ…

Freshについて少し調べてみたので、その時のメモになります。 Freshとは deno.com Fresh is a new full stack web framework for Deno. By default, web pages built with Fresh send zero JavaScript to the client. The framework has no build step which…

以下のルール・パッケージを使用するといい感じにimport文の整形を行うことができたので、設定方法などを記載したものになります。 ※ 執筆時点(2022/07/18)の情報になるため、ご認識ください。 結論としては以下のルール・パッケージになります。 ルール・パ…

Next.jsでのプロジェクトでLighthouse CIを確認できるようにしたので、その時に行ったことになります。 参考にした記事 blog.kimizuy.dev github.com Lighthouseとは Webアプリのパフォーマンス、品質、および正確性を向上させるためのオープンソースの自動…

スケルトンスクリーンを実装する時にいろいろと調べたので、その時のメモになります。 スケルトンスクリーンとは 引用元1 ws-design.net 簡単に言うと骨組みローディング画面です。 ローディング画面を必要とするまでもないくらい短い読み込みが発生する場合…

borderのグラデーションの時に一部詰まったため、その時のメモになります。 行おうとしたこと カードのUI ボーダーはグラデーションにしたい カードの縁は角丸にする 結果 最終的に今回制作したものの最終版になります。どのようなことをしたかなどについて…

JSDocの書き方がいまいちわかっておらず、いろいろと調べたのでその時にメモになります。 環境 Vue.js v3 JavaScript(not Type Script) 参考リンク qiita.com daa-kitamura.ssl-lolipop.jp vue-styleguidist.github.io 実装したコードの一部 バリデーション…

以下の記事で stylus → dart-sassに変更はしたが、dart-sassに変更したにあたって、@importの記載を@use,@forwordに変更をしたため、その時に行なったことを紹介します。 jackswim3411.hatenablog.com importの廃止についての記事 sass-lang.com 参考にした…

以下の記事の続きのものになります。 qiita.com 遊びでcssを使ったアンパンマンを制作したのですが、意外とcssの学びが多かったので、学べたことをメインで共有します。 完成物 See the Pen css-only-Anpanman's face by miwa_shuntaro (@miwashutaro0611) o…

制作物 https://react-gsap-animation.netlify.app/ 対応したこと 左上の「Add Circle」を押したら、アニメーションのコンポーネントが表示される 要素のアニメーションはクリックされた分実行される アニメーションのコンポーネントについて 中央のアニメー…

GitHubのプロフィールページを最近カスタマイズしたため、その時に行なったことについて紹介いたします。 GitHubのプロフィール編集について docs.github.com 参考にしたページ zenn.dev dev.to 完成したページ github.com 実装した手順 1. バッジ部分を作成…

stylusからdart-sassに変更したので、その時に対応したこと、stylusとscssのコードの比較に載せたものになります。 変更した箇所のコードについては以下になります。 github.com stylusからdart-sassに変更した理由 stylintでstylusのインデント調整した後に…

マウスストーカーを制作したので、その方法について紹介します。 制作物 See the Pen mouse-stalker3 by miwa_shuntaro (@miwashutaro0611) on CodePen. 今回行ったこと マウスの場所に応じて、要素が移動 ポインター要素の周り線のアニメーションの追加 リ…

既存のcssプロパティの値をJavaScirptで取得することがあったので、その時の対応したことになります。 結果 html <div class="block"></div> .block { width: 300px; height: 60px; } /** * cssで適応されているスタイルを返却 * @param {HTMLElement} element 取得を行うHTML要素 * @…

CSS in JS でのlint(今回はemotion)の設定を行ったのときのその時に行ったことになります。 今回使用するパッケージのバージョン { "@types/react": "^17.0.2", "next": "^10.0.1", "react": "^17.0.1", "react-dom": "^17.0.1", "postcss-jsx": "^0.36.4", …

オリジナルの3Dオブジェクトファイルをwebに表示を行ったため、そのときのメモ。 表示するオブジェクトの用意 オリジナルで用意を行う場合、blenderのソフトから作成を行うことができますが、turbosquidのサイトからFreeで3Dオブジェクトを使用することもで…

viteを使用して、vite.config.jsの設定を行うを少し行ったので、そのときのメモ。 viteのインストール v1バージョンの場合 (非推奨) ※ project-appは制作したいアプリ名。 $ npm init vite-app project-app // or $ yarn create vite-app project-app 今回は…

React + ESLintで設定を行なっているときに error 'React' was used before it was defined no-use-before-define の設定が出たので、その時の解消した方法です。 no-use-before-defineとは jsファイル内で変数を指定しているのに変数が使われていない時に出…

今回、THREE.jsを使用した3Dオブジェクトやpixi.jsを使用した2Dオブジェクトなどの開発時に利用したdat.GUIについてのやり方を紹介します。 今回使用するもの NPM version: 0.123.0 www.npmjs.com version: 0.7.7 www.npmjs.com CDN https://cdnjs.cloudflar…

vue-vcliの作成 @vue/cliをインストール 参考 cli.vuejs.org npm install -g @vue/cli # OR yarn global add @vue/cli プロジェクトを作成 参考 cli.vuejs.org コマンドで作成したい場合 vue create hello-world GUIベースで作成したい場合 vue ui を実行す…