HONGBO MIAO
Making magic happen
Introduction
A cutting-edge technology lab powered by automation.
Preview
Architecture
Tech Stack
Web
- React - Web framework
- Redux - State container
- redux-observable - Side effects
- RxJS - Asynchronous programming with observable streams
- graphql-tag - GraphQL query parsing
- Bulma - CSS framework
- PurgeCSS - Unused CSS removing
- Jest - Unit testing, snapshot Testing
- React Testing Library - React component testing
- Storybook - Visual testing
- rxjs/testing - Marble testing
- Cypress - End-to-end testing
- Lighthouse CI - Performance, accessibility, SEO, progressive web app (PWA) analysis
Mobile
- React Native - Mobile application framework
- UI Kitten - UI library
- React Native Testing Library - React Native component testing
API Server
- Express - Node.js web application framework
- GraphQL.js, express-graphql - GraphQL
- graphql-ws, graphql-subscriptions - GraphQL subscriptions
- graphql-upload - GraphQL upload
- graphql-shield - GraphQL permissions
- graphql-depth-limit - GraphQL depth limit
- graphql-disable-introspection - Disable GraphQL introspection
- graphql-query-complexity - GraphQL query complexity analysis
- DataLoader - Batching and caching
- Knex.js - SQL query builder
- PostgreSQL - Relational database
- Redis - In-memory database
- rate-limiter-flexible - Rate limiting
- expressjs/cors - CORS
- csurf - CSRF protection
- jsonwebtoken, express-jwt - JSON Web Tokens (JWT)
- bcrypt - Password hashing
- Helmet - HTTP header
Content-Security-Policy,Expect-CT,Referrer-Policy,Strict-Transport-Security,X-Content-Type-Options,X-DNS-Prefetch-Control,X-Download-Options,X-Frame-Options,X-Permitted-Cross-Domain-Policies,X-XSS-Protection - Report To - HTTP header
Report-To - Network Error Logging - HTTP header
NEL - express-request-id - HTTP header
X-Request-ID - response-time - HTTP header
X-Response-Time - connect-timeout - Request timeout
- Terminus - Health check and graceful shutdown
- Opossum - Circuit breaker
- pino - Logging
- dotenv-flow - Environment variables loading
- Stryker - Mutation testing
- SuperTest - HTTP testing
- autocannon - HTTP benchmarking
- Clinic.js - Performance profiling
API Server - Go
- Gin - Web Framework
- graphql-go/graphql - GraphQL
- gRPC - Remote procedure call (RPC) framework
- zerolog - Logging
- GoDotEnv - Environment variables loading
- Testify - Unit testing
- Dgraph - Distributed graph database
Cloud Native
- Linkerd - Service mesh
- Argo CD - Declarative GitOps CD for Kubernetes
- Open Policy Agent (OPA) - Policy-based control
- OPAL - Open-policy administration layer
- NGINX - Reverse proxy, load balancer
- Fluent Bit - Data collector for unified logging layer
- OpenTelemetry - Observability framework
- Jaeger - Distributed tracing system
- Elasticsearch - Distributed search and analytics engine
- Kibana - Data visualization dashboard for Elasticsearch
- Grafana - Monitoring and observability platform
- Prometheus - Monitoring system
- Node Exporter - Monitoring Linux host metrics
- Docker - Container
- Kubernetes - Container-orchestration system
- Skaffold - Continuous development for Kubernetes applications
- Locust - Load testing
- CodeQL - Variant analysis
Neural Network
- PyTorch - Machine learning
- PyTorch Geometric - PyTorch geometric deep learning extension
- OGB - Open Graph Benchmark
- Weights & Biases - Machine learning experiment tracking
Ethereum
- Solidity - Contract-oriented programming language
- solc-js - JavaScript bindings for the Solidity compiler
Code
- Prettier - Code formatter
- gofmt - Go code formatter
- opa - Rego code formatter
- Black - Python code formatter
- tsc - TypeScript static type checker
- Mypy - Python static type checker
- ESLint - JavaScript linter
- Stylelint - CSS linter
- golangci-lint - Go linter
- Buf - Protocol Buffers linter
- solhint - Solidity linter
- markdownlint-cli2 - Markdown linter
- ShellCheck - Shell linter
- hadolint - Dockerfile linter
- Kubeval - Kubernetes configuration file linter
- commitlint - Commit message linter
- Husky - Bad git commit and push preventing
Services
- Lightstep - Distributed tracing
- Sentry - Error tracking
- Report URI - Security reporting
- Google Tag Manager - Tag management
- Google Analytics - Web analytics
- FullStory - Experience analytics, session replay, heatmaps
- Heroku - Hosting
- Redis Enterprise Cloud - Redis hosting
- Namecheap - Domain
- Cloudflare - CDN, DNS, DDoS protection
- GitHub Actions - Continuous integration
- SonarCloud, Codacy, Code Climate, LGTM - Code reviews and analytics
- Codecov - Code coverage reports
- Chromatic - UI reviewing and feedback collecting
- HTTP/3 Check - HTTP/3 checking
- hstspreload.org - HSTS checking
- Mozilla Observatory, Snyk - Security monitoring
- Depfu, Requires.io - Dependency monitoring
- Uptime Robot - Uptime monitoring
- FOSSA - License compliance
Bots
- Renovate - Dependency update
- ImgBot - Image compression
- Mergify - Automatically merging
- Stale - Stale issues and pull requests closing
Highlights
Cloud Native
Service Mesh - Linkerd
GitOps - Argo CD
Distributed Tracing - OpenTelemetry
The website is using OpenTelemetry as an open specification to standardize collecting and sending telemetry data.
After it processes, Elasticsearch saves the data. You can analyze them using Jaeger, Prometheus, and other observability tools.
Jaeger
Prometheus
Kibana
Grafana
Graph Database
Dgraph
Machine Learning
Distributed hyperparameter optimization result by Weights & Biases.
HTTP/3
The website supports HTTP/3.
AVIF
Images on the website are using AVIF format.
“Roughly speaking, at an acceptable quality, the WebP is almost half the size of JPEG, and AVIF is under half the size of WebP.” – Jake Archibald, 2020
Security
Below is the website security report generated by Mozilla Observatory.
Profiling
Profiling result by Clinic.js and autocannon.
Load Testing
Load testing result by Locust.
Automation
This pull request shows how these technologies work together from different aspects to achieve automation.
