各種サイトに記載した情報をまとめる「WITMAN」。
個人の活動記録になります。

• Nuxt.js
• font
• storybook

Nuxt.js v3, Storybook v7の環境にWeb Fontsを追加する（Google Fonts, Adobe Fonts）

Bunを使用していろいろなFWを作成してみる（Next.js, Nuxt.js, Astro）

• css
• scss

scssでfont-sizeの横幅に応じて可変するmixinを作ってみる

• css

cssを使って画像を立体的に見せる方法

• Astro

AstroのView Transitionsを試してみる

• tool

実務で使うツール・情報収集しているものについて紹介

• タブ
• html
• css
• JavaScirpt

タブUIをちゃんと理解する

• React
• swiper

「swiper/react」をちょっとだけ使いやすくする

• TypeScript

TypeScirptで配列・オブジェクトの値をEnums化して型を安全にする

• Vue.js
• Nuxt.js

Nuxt2 から Nuxt3にアップデートを行う

• css

cssの「:where」と「:is」の違いを理解する

• deno

Deno のフルスタック・ウェブフレームワーク「Fresh」を触ってみる

• JavaScirpt
• eslint

eslintを使用してimportの部分をいい感じにする

• circleci
• Next.js

Next.jsでLighthouse CIを導入して、PRの時点でLighthouseのスコアを確認できるようにする

• スケルトンスクリーン
• html
• css
• JavaScirpt

スケルトンスクリーンをちゃんと理解する

• css

cssでのボーダーのグラデーションをいい感じにしたい

• JavaScirpt

JSDocを使用して、レビュー者に対して見やすいコードを心がける

• scss

dart-sassの@importの記載を@use, @forwordに置き換えをした時に行ったこと

• css

cssだけでアンパンマンの目をいい感じに動かす

• React
• GSAP

React + GSAP を使用したアニメーションを作成する

• GitHub

GitHubのプロフィールページをオシャレにする

• scss
• stylus

stylesからdart-sassに変更した時に行なったこと・コード

• javascript

マウスストーカーの実装について

• javascript
• css

JavaScriptで適応されているcssプロパティの値を取得する

• emotion
• React
• lint

emotionにlintを追加して、効率的に開発を行う

• three.js
• javascript

オリジナルのglTFファイルをthree.jsを使用してweb上に表示する

• Vue.js
• vite

viteを使用して、aliasなどの設定を行う

• React
• lint

「error 'React' was used before it was defined no-use-before-define」のエラーをなくす

• three.js
• dat.GUI

dat.GUIを使用して、開発時の3Dオブジェクトの編集を行いやすくする

• Vue.js
• pug
• stylus

vue-cliでプロジェクトの追加、 pug, stylusを追加する

• html
• css
• scss
• stylus
• babel

フロントエンド開発の時によく使用するサービス一覧【コード整形・ダミーデータなど】

storybook + tailwind + nuxtでstorybookの設定を行う

• pug
• webp
• image

pugを使用して、imageを管理する

• webpack
• javascript

webpackでjsのオプション・配置場所をカスタマイズする

• マークダウン
• javascript
• PDF

マークダウンで簡単に職務経歴書を作成する

• gulp
• webpack

Gulpで動いている既存のプロジェクトをWebpackのみに変更する

• javascript

SPのtouchmoveで自由に移動できる要素を配置する

• storybook
• Vue.js
• Nuxt.js

storybookでダークモードの対応を行う

• lint
• pug
• puglint

pug-lintを触ってみる

• npm

npmアップデート手順・アップデートを行ってみて

• css
• javascript
• scss

cssとjsを使ってテキストに1文字ずつアニメーションさせる

gulpfile.jsからgulpfile.tsに変更する

• javascript
• eslint
• tslint

tslintから@typescript-eslintに変更する

• css

backdrop-filterについて

• javascript
• referrer

referrerについての実装メモ

• css

iosでモーダルの高さ100vhがいい感じに反応してくれない

• css
• scss
• 色
• stylus

cssでの色の管理

• css
• スニペット

cssジェネレーターについて

ESlint, prettierを使ってjavascript, vueのコード品質を保つ

• css
• font
• Variable Font

Variable Fontについて少し調べてみた

cssアニメーションについてメモ

• html
• css
• javascript
• codepen
• スニペット

codepenスニペットメモ

stylelint,prettierを使ってscssのコード品質を保つ

xdのプラグインメモ

photoshop バッチ処理・レイヤーからテキストのコピースクリプトのメモ

• Rails
• Vue.js
• Webpacker
• storybook

vueらしい書き方でstorybookを使う

• Vue.js
• storybook
• Rails
• Webpacker

Rails + vueの環境にstorybookを導入する

• Nuxt.js
• Vue.js
• 環境構築

Nuxt.js 初期設定 v2

自分のgulpv4 + webpackの設定

gulp-v4らしい書き方をしたい

• css
• sass
• IsometricSass

IsometricSassを使って3D表現をやってみる

adobeソフトの画像書き出し系参考リンク一覧

• html
• css

html,cssでのジェネレーターなどのおすすめツール

stylusのlintを導入

• javascript
• stylus

stylus + jsの整形ルール

• デザイン

アイソメトリックについて気になったのでいろいろ調査

アスペクト比の固定

• webpack
• pug
• stylus
• gulp

pug + stylus + gulp + webpack技術選定・行っていること

• css

cssメディアクエリについて調査

• phothosop
• chrome
• tool

デザインカンプの再現率をあげる&スピードをあげる為に役立つツール一覧など

• html
• html5

html5のタグについて少し調べてみた

• Nuxt.js

Nuxt.jsの初期設定~行なったこと

• React

UIT#6 進化する React.jsに行ってきました