Blog
共通で利用している開発環境とs-hirano-ist’s blogの構成。
flowchart LR
subgraph Vercel
Astro["Astro (Vercel Edge Networks)"]-->VSI{{"Vercel Speed Insights"}}
end
subgraph Google
GAL{{"Google Analytics"}}
GSC{{"Google Search Console"}}
PSI{{"Google PageSpeed Insights"}}
end
subgraph GMO
onamae{{"お名前.com"}}
end
subgraph GitHub
GH{{"GitHub"}}-->GA
RV{{"Renovate"}}-->GA
DA{{"Dependabot Alerts"}}-->GA
GC{{"GitHub Copilot"}}
subgraph GA["GitHub actions"]
Prettier
ESLint
Styleint
secretlint
markdownlint-cli2
Playwright["Playwright test"]
Nu["Nu Html Checker"]
lighthouse["Lighthouse CI"]
end
end
subgraph PC
subgraph VSCode
Huskey
Git
JS["Node.js 20 + pnpm"]
Python["Python 3.12"]
Docker
end
end
VSCode-->|commit|GH
VSCode-->GC
Astro-->GAL
Astro-->GSC
GMO-->Astro
GA-->Astro
User((User))-->GMO
Experimental
Deployment of frontend-experimental, rss-dumper, and rss-dumper-graphql
flowchart BT
subgraph Vercel
subgraph Next["frontend-experimental (Next.js with Vercel Edge Networks)"]
Prisma
Auth.js
Apollo["Yoga/Apollo client"]
end
blob[("Vercel Blob")]
vPSQL["PostgreSQL"]
end
Apollo-->vPSQL
Prisma-->vPSQL
Next-->GAL
Next-->blob
Next-->|with openapi2aspida or untyped fetch|rss-dumper
Next-->|with GraphQL codegen or untyped fetch|rss-dumper-graphql
Auth.js-->|restrict user access|OAuth
subgraph Render
subgraph rss-dumper["rss-dumper (Express)"]
rPrisma["Prisma"]
Passport
SW["Swagger UI + tsoa"]
end
subgraph rss-dumper-graphql["rss-dumper-graphql (Apollo Server)"]
Nexus
gPrisma["Prisma"]
GSH["GraphQL Shield + GraphQL middleware"]
end
end
subgraph Supabase
psql1["PostgreSQL 1"]
psql2["PostgreSQL 2"]
end
rPrisma-->psql1
gPrisma-->psql2
User((User))-->GMO
subgraph GMO
onamae{{"お名前.com"}}
end
GMO-->Next
subgraph GitHub
GH{{"GitHub"}}-->|on code push|GA
RV{{"Renovate"}}-->|weekly schedule|GA
DA{{"Dependabot Alerts"}}-->|weekly schedule|GA
subgraph GA["GitHub actions"]
formatter
linter
test
end
VercelBot{{"Vercel Bot"}}
OAuth{{"OAuth"}}
end
GA-->VercelBot
VercelBot-->|deploy|Next
VercelBot-->|deploy|rss-dumper
VercelBot-->|deploy|rss-dumper-graphql
subgraph Google
GAL{{"Google Analytics"}}
end
Github stars of s-hirano-ist
legally :books: Check the licenses for the NPM packages that you use
lsd The next gen ls command
alfred-workflows :metal: A collection of Alfred 3 and 4 workflows that will rock your world
n Node version management
minio MinIO is a high-performance, S3 compatible object store, open sourced under GNU AGPLv3 license.
ai Build AI-powered applications with React, Svelte, Vue, and Solid
nexe 🎉 create a single executable out of your node.js apps
setup-node Set up your GitHub Actions workflow with a specific version of node.js
actionlint :octocat: Static checker for GitHub Actions workflow files
pino 🌲 super fast, all natural json logger
npm-run-all2 A CLI tool to run multiple npm-scripts in parallel or sequential. (Maintenance fork)
latexify_py A library to generate LaTeX expression from Python code.
session-resume Annotate fields to be persisted on navigation away from the current page
recoil-persist Package for recoil state manager to persist and rehydrate store
Recoil Recoil is an experimental state management library for React apps. It provides several capabilities that are difficult to achieve with React alone, while being compatible with the newest features of React.
a11y-visualizer A Browser Extension for Enhanced Web Accessibility Checking
glances Glances an Eye on your system. A top/htop alternative for GNU/Linux, BSD, Mac OS and Windows operating systems.
DOMPurify DOMPurify - a DOM-only, super-fast, uber-tolerant XSS sanitizer for HTML, MathML and SVG. DOMPurify works with a secure default, but offers a lot of configurability and hooks. Demo:
ui Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.
release-please generate release PRs based on the conventionalcommits.org spec
cli GitHub’s official command line tool
theia Eclipse Theia is a cloud & desktop IDE framework implemented in TypeScript.
animata Bring your site to life with easy to use animation & interaction code. Copy. Paste. Animate.
tsx ⚡️ TypeScript Execute | The easiest way to run TypeScript in Node.js
vaul A drawer component for React.
diodon Aiming to be the best integrated clipboard manager for the Unity desktop
mise dev tools, env vars, task runner
act Run your GitHub Actions locally 🚀
biome A toolchain for web projects, aimed to provide functionalities to maintain them. Biome offers formatter and linter, usable via CLI and LSP.
nvm-windows A node.js version management utility for Windows. Ironically written in Go.
cz-cli The commitizen command line utility. #BlackLivesMatter
mermarpidsome Mermaid integration with Marp, with Fontawesome icons!
ecschedule ecschedule is a tool to manage ECS Scheduled Tasks.
auth0-deploy-cli The Auth0 Deploy CLI is a tool that helps you manage your Auth0 tenant configuration. It integrates into your development workflows as a standalone CLI or as a node module.
material-ui Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
rehype HTML processor powered by plugins part of the @unifiedjs collective
react The library for web and native user interfaces.
apollo-client :rocket: A fully-featured, production ready caching GraphQL client for every UI framework and GraphQL server.
next-themes Perfect Next.js dark mode in 2 lines of code. Support System preference and any other theme with no flashing
markdownlint-cli2 A fast, flexible, configuration-based command-line interface for linting Markdown/CommonMark files with the markdownlint library
mermaid Generation of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown
pagefind Static low-bandwidth search at scale
recheck The trustworthy ReDoS checker
secretlint Pluggable linting tool to prevent committing credential.
prettier Prettier is an opinionated code formatter.
rimraf A `rm -rf` util for nodejs
standard-version :trophy: Automate versioning and CHANGELOG generation, with semver.org and conventionalcommits.org
vis-network :dizzy: Display dynamic, automatically organised, customizable network views.
openapi-generator OpenAPI Generator allows generation of API client libraries (SDK generation), server stubs, documentation and configuration automatically given an OpenAPI Spec (v2, v3)
express-openapi-validator 🦋 Auto-validates api requests, responses, and securities using ExpressJS and an OpenAPI 3.x specification
openapi2aspida Convert OpenAPI 3.0 or Swagger 2.0 definitions into aspida
taos A simple and small (600 bytes) library to help animate elements while scrolling using responsive Tailwind CSS JIT utility classes.
theme-change Change CSS theme with toggle, buttons or select using CSS custom properties and localStorage
daisyui 🌼 🌼 🌼 🌼 🌼 The most popular, free and open-source Tailwind CSS component library
concurrently Run commands concurrently. Like `npm run watch-js & npm run watch-less` but better.
node-csv Full featured CSV parser with simple api and tested against large datasets.
markdownlint A Node.js style checker and lint tool for Markdown/CommonMark files.
pyenv Simple Python version management
apollo-server 🌍 Spec-compliant and production ready JavaScript GraphQL server that lets you develop in a schema-first way. Built for Express, Connect, Hapi, Koa, and more.
ts-node TypeScript execution and REPL for node.js
github A higher-level wrapper around the Github API. Intended for the browser.
astro The web framework for content-driven websites. ⭐️ Star to support our work!
feTS 🗹 TypeScript HTTP Framework focusing on e2e type-safety, easy setup, performance & great developer experience
PyGithub Typed interactions with the GitHub API v3
growi :anchor: GROWI - Team collaboration software using markdown
lenis How smooth scroll should be
lighthouse-ci Automate running Lighthouse for every commit, viewing the changes, and preventing regressions
license Command line license text generator.
gibo 🤫 Easy access to gitignore boilerplates
PhotoSwipe JavaScript image gallery for mobile and desktop, modular, framework independent
type-graphql Create GraphQL schema and resolvers with TypeScript, using classes and decorators!
graphql-yoga 🧘 Rewrite of a fully-featured GraphQL Server with focus on easy setup, performance & great developer experience. The core of Yoga implements WHATWG Fetch API and can run/deploy on any JS environment.
create-t3-app The best way to start a full-stack, typesafe Next.js app
ts-rest RPC-like client, contract, and server implementation for a pure REST API
aspida TypeScript friendly HTTP client wrapper for the browser and node.js.
tsoa Build OpenAPI-compliant REST APIs using TypeScript and Node
Fuse Lightweight fuzzy-search, in JavaScript
sanitize-html Clean up user-submitted HTML, preserving whitelisted elements and whitelisted attributes on a per-element basis. Built on htmlparser2 for speed and tolerance
adminjs AdminJS is an admin panel for apps written in node.js
jsdom A JavaScript implementation of various web standards, for use with Node.js
graphql-mesh 🕸️ GraphQL Federation Framework for any API services such as REST, OpenAPI, Swagger, SOAP, gRPC and more...
sharp High performance Node.js image processing, the fastest module to resize JPEG, PNG, WebP, AVIF and TIFF images. Uses the libvips library.
resvg-js A high-performance SVG renderer and toolkit, powered by Rust based resvg and napi-rs.
encoding.js Convert and detect character encoding in JavaScript
axios Promise based HTTP client for the browser and node.js
jesth Human-readable versatile data format
phpdotenv Loads environment variables from `.env` to `getenv()`, `$_ENV` and `$_SERVER` automagically.
panda 🐼 Universal, Type-Safe, CSS-in-JS Framework for Product Teams ⚡️
validator Nu Html Checker – Helps you catch problems in your HTML/CSS/SVG
mui-x MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
system-design-primer Learn how to design large-scale systems. Prep for the system design interview. Includes Anki flashcards.
astro-paper A minimal, accessible and SEO-friendly Astro blog theme
extract-bookmarks Exports and extracts bookmarks from Windows browsers into a folder that can be easily archived by launchers like Windows Search, Cortana, Launchy, Wox, Everything and PowerToys Run.
PowerToys Windows system utilities to maximize productivity
hono Web framework built on Web Standards
van 🍦 VanJS: World's smallest reactive UI framework. Incredibly Powerful, Insanely Small - Everyone can build a useful UI app in an hour.
hadolint Dockerfile linter, validate inline bash, written in Haskell
Wox A cross-platform launcher that simply works
WiPiCap WiPiCap: DIg into Wi-Fi Beamforming Report
SwiftLint A tool to enforce Swift style and conventions.
docker-mailserver Production-ready fullstack but simple mail server (SMTP, IMAP, LDAP, Antispam, Antivirus, etc.) running inside a container.
