かめ。ブログ

Dependabotはstorybookのようなバージョンが上がるライブラリが複数ある場合にめんどうになるため

Nodeでアプリ依存せずに、mdxからデータを取得してAlgoliaに登録する

Nodeでアプリ依存せずに、MicroCMSからデータを取得してAlgoliaに登録する

ブラウザも主要な最新は対応してるので、inertやroleなどの考慮もブラウザ任せにできるので modal系にはdialogを使っていくのが良いかなと思います。

gridをタイトル中央寄せ、ナビゲーションを右にするような配置をabsoluteを使わなくても作れます。

bunとかnodeとかdenoとかあるけど今回はbunについて少しだけ

最近いろいろなものを作りたいなぁという気持ちが強くなってきました！webサイト・サービス作成、エンジニアの講師など

M1だとLinuxで動くブラウザと相性が悪いらしく、M1とdockerを使う際に注意が必要のようです。依存環境がないようにするためのdockerなのになんか本末転倒な気がしますが。

デザインシステムを構築したかったり、長く運営するようなwebサイトを構築する際に参考にしたいwebサイト

Midjourneyすごいです。楽しい。もうサムネイルAIに作ってもらえばいいのでわ。。

ページネーションを自前で作る時用メモ

PhotoshopのJSX言語は少しクセがあるので苦労するところがあります。現在選択してるレイヤーも様々なやり方があるのですが苦労する部分なのでメモ。

Photoshop便利にするために作った自作のJSX達「カラーピッカー」「フォントサイズ小数点切り捨て」「レイヤーの名前を変更する」など

昔、専門学校卒業したぐらいに作ったwebサイトのデザインたちです。Movable Typeのテンプレート用に作ったものたち。

ブログ書いているとサムネイルにこまったりするのでフリーで使えるイラストサイトまとめです。

昔はJavascriptを使っていたけど最近は、カルーセルや、コンテンツにスナップするやり方。

alt=""にするぐらいだったらそもそも属性なしでもいいんじゃないかなと思っていたのですが、明確な違いがあるようです。

よく使うコードはショートカットに設定しておくと便利です。console.log()は入れておくとすごく楽かなと思います！

同じプラグインで、複数オプションで使いたい場合にHTMLを修正するだけでプラグインに渡すオプションを変えることができます

連想配列のkeyで文字列でユニオン型 (union type) を作る方法として、keyof typeof Testとする方法があります。さらに配列の場合の一つのkeyで同じことができないかなと思いやり方をメモしておきます。

CSS始めた際に、つまづきやすいポイント解説

日付ライブラリ最近luxonを使うようにしました。もともとmomentをよく使っていたのですが、他のライブラリが推奨されているので。

Mentaを使って1年ほど経ちました。色々と気をつけたいことや、今後について残しておきます。お金面の話も...

npm公開時のやってること、import,export周り、package.json周りのメモ

cssのプロパティの文字列を型として定義したい場合にCSSStyleDeclarationを使ってケバブケースも合わせて対応する方法メモ

いくつかnpmへのパッケージを公開しているのですが、今回公開しているプラグインのリファクタリングを行ったので合わせて自動でリリースする仕組みを導入しました。

markdownで返ってくる文字列を、unifiedを使って、オリジナルの任意のコンポーネントに差し替えるようにしました。

フリーランスになってから7年ほど立ちました。これからフリーランスをやりたいと言う人のために、始めたときに苦労したところや失敗したところを書いておこうかなと思います。

よく使うサイトなのに、使い勝手がたまにスマホ版にしか対応していなかったり、サイトが崩れてしまっている場合など、自分でUserCSSを設定することで解決することができます。

VScodeで、特定文字内の文字列を検索や置換をするときに毎回調べたりしていたので、メモとして残しておこうかと思います。

ブログを書くときに、目次を毎回自前で書いたりするのが大変なので、見出しをみて自動で作るJS（TS）を書いてみました。

「Google Search Console」「Google analytics」「Google Tag Manerger」を導入して、「Google Lighthouse」でチェックしておきたいですね！

microCMSとReactでカスタムフィールドを使って、Wordpressのプラグインなどでよくある吹き出しで会話しているみたいなUIを作ってみました。

JavascriptでHTMLに特定のクラス名を付与して、付与したクラスに対してCSSを当てることでいろいろなものを再現する

CSSを学んでいく上で、いくつか迷うところがあります。チートシートとして公開されている記事がいくつかあるのでご紹介

普段よく使うmargin、あいだを開ける以外にも中央寄せや右に寄せるなど、知っておくと役立つ

microCMSさんすみません。。便利なサービスではありますが、一ヶ月ぐらい使っていて、ここ直してほしいなぁ。。というところがいくつかありましたので書いておきます。

Google AdsenseやTwitter Widgetで外部のjsを読み込んだらLightHouseのPerformanceが20点ぐらいまで下がってしまったので対策しました。

_app.tsxでgetStaticPropsを使って共通化すれば良いかなと思ったのですがpages内でしか使えないようなので一工夫しました。

microCMSで「前の記事」「次の記事」を取得するのに少し工夫する必要がありましたのでメモ！

ブログで使えそうなJSON-LDを書きました。SEO対策としても正しく設定しておきたいですね。

「react-paginate」を利用すると、リストの合計と現在のページを設定すると処理をあまり気にせず、シンプルなHTMLを吐き出してくれるので便利。

母の日モチーフショッピングキャンペーンサイトのイメージサイトです。専門学校でパララックス効果を使ったサイト作成の課題を出しています。自分としても作ってみようと思い制作しました。作っていたサイトデータをダウンロードできるようにしました。自由にお使いください。

プログラム・web制作をを勉強する上で大切な考え方や姿勢について。やっちゃいけない考え方。

png、gif、jpgでそれぞれ圧縮して軽くなるように3つのソフトを使い分けています。それぞれの使い方を解説。

昔っからムームードメイン（MuuMuuDomain）を使ってるのでその流れvercelでのドメイン設定方法のメモ

Google Search Consoleにサイトを登録するやり方について（ムームドメイン・MuuMuuDomain）

Mentaを使って、Photoshop / Illustrator / Figma / HTML / CSS / Javascript / React / Vue / Nuxt / Next などのweb制作を教え始めました。