はてなブックマーク

こんにちわ、hanetsukiです。記事を書くのは5億年ぶりですね。 私は日頃よりJamstackを推進しているのですが、いつもいつもお問い合わせ系フォームに悩まされています。 近年はまさにSaaS大航海時代、自前も含めて選択肢は様々です。 HyperForm、getform、Formspree、EmailJS、SendGrid、nodemailer、AWS SES...etc 時と場合によっていろんなものを触る日々です。 そんな中最近知ったサービス、Resendを触ってみたいと思います。 （TOPがかっこいいですね。惚れてしまいます。）

2023/05/06追記： Next.jsの最新バージョンを常に適応させたStarterリポジトリです。 詳しいバージョン情報は、リポジトリのREADMEをご覧ください。 モチベーション このスターターリポジトリでは、汎用的であることを意識して作成しています。 たまにお見かけるするスターターリポジトリは、専門性が備わっており、起用できるプロジェクトが限定されるというのが個人的には課題に感じていました。 こだわり Next.jsでものづくりをする時に、WEBアプリケーションなのか、はたまたWEB制作なのか、目的により採用するライブラリや概念が異なります。 今回のリポジトリでは、それらの基点となるスターターとして採用できるように作ってあります。 eslint、Prettier、Stylelint、huskyといったコード品質を担保するものから始まり pathpidaといった、WEBアプリケーシ

Next.jsが12.2になってEmotionを利用するのに@emotion/babel-pluginの設定が不要になったりなど、地味に嬉しいアップデートがあったので改めて環境構築忘備録を残したいと思います。 今回利用している主なパッケージとバージョンは下記です。 package version

What would you like to call your site? （あなたのサイトを何と呼びたいですか？） ✔ · Example GatsbyJS 2022 What would you like to name the folder where your site will be created? （サイトが作成されるフォルダにどのような名前を付けますか？） ✔ atelier/ example-gatsbyjs-2022 ✔ Will you be using JavaScript or TypeScript? （JavaScriptまたはTypeScriptを使用しますか？） · TypeScript ✔ Will you be using a CMS? （CMSを使用しますか？） · No (or I'll add it later) ✔ Would you like

const { build } = require('esbuild') const { dependencies } = require('./package.json') const entryFile = 'src/index.ts' const shared = { bundle: true, entryPoints: [entryFile], external: Object.keys(dependencies), logLevel: 'info', minify: true, sourcemap: false, } build({ ...shared, format: 'esm', outfile: './dist/index.esm.js', target: ['ES6'], }) build({ ...shared, format: 'cjs', outfile: './d

この記事は、先日催された「ジャムジャム！！Jamstack_5」で登壇した際の内容を再度まとめたものとなります Next関連 next-seo Seoコンポーネントのようなものが踏襲されてる JSON-LDのサポートも入っていてサポート範囲が広い next-sitemap sitemap.xmlとrobots.txtを作成してくれる 分割もしてくれる configファイルの中で細かい設定ができる pathpida 再生したページのパスの定数ファイルを作ってくれる便利なやつ タイポが無くなって助かる typed-scss-modules CSS Modlesでスタイリングをする際に、.module.(sc|c)ssに対して型定義ファイルを作成してくれる。 宣言漏れや補完など、痒い所に手が届く headlessCMS関連 microcms-js-sdk 最近扱っている案件のheadlessCM

JSON色付け係のhanetsukiです。 今回はMicromodal.jsをカスタムHookで汎用的に使えるようにしようという試みで記事を書きました。 今回の実装はリポジトリを公開してありますので、参考になれば幸いです。 Micromodal.jsとは バニラjsで構成されたモーダルライブラリ アクセシビリティが考慮されている 1.9kbと軽量 要点をまとめると上記のような特徴を持っています。 近年様々なフレームワークを元に実装して行く最中、どのフレームワークに対してもアプローチ可能で、軽量！ そして、一番実装で苦戦してしまいそうなa11yが考慮されているのは非常にありがたいです。 事前準備 インストール micromodalをプロジェクトに追加します useMicromodalを作成する 今回はuse-micromodalフォルダを作成し、その中に4つのファイルで振り分けたいと思います

先日開催されたジャムジャムJamstackで登壇させていただいた時の記事になります。 簡易構成のリポジトリを作成しましたので、参考になればと思います。 経緯 メディアサイトを作成することになった デザイナーコーダー ×1 フロントエンドエンジニア ×1（ワイ） Next.jsとmicroCMSでSSGしてvercelにデプロイ 私的、Jamstack王道構成ですね デザイナーコーダーさん「Jsわからんです」「抵抗感あります」 SSGをする為のpages/配下のファイルにはいろんな処理が記載されます。 getStaticPropsやgetStaticPathsとか ページネーションとかパンクズとか作る為の処理が色々記述されます。 この辺なんらかの方法で・いい感じに・分離できたら・いいですね^^ デザイナーコーダーが触るViewの部分 フロントエンドが触るロジックの部分 これを目指していきます