qiu.dev

techstack

This page contains a list of all the technologies I've used for past projects. They're roughly ordered in terms of experience; I primarily use the technologies listed first.

Programming and markup languages

  • TypeScript, JavaScript (ES6+), Ruby, HTML5, CSS3, Python, Rust, C, C++

Client-side (frontend) frameworks

  • SPA (Single Page Application): React, Quasar, Vue.js

  • PWA (Progressive Web Application): React, Quasar, Vue.js

  • SSR (Server-side Rendering): React, Quasar, NuxtJS

  • SSG (Static Site Generation): React, Jekyll, NuxtJS, Vuepress

Server-side (backend) frameworks

  • Node.js: Express

  • Ruby: Ruby on Rails

Databases

I mostly interact with these through abstractions like ORMs or backend frameworks.

  • SQL: PostgreSQL (via ActiveRecord in Rails)

  • NoSQL: MongoDB (via MongoID in Rails)

Testing utilities

Snapshot tests rock.

  • Frameworks: Jest, Mocha

  • React testing utilities: @testing-library/react, Enzyme.

Cloud infrastructures

I'm no devops wizard, but I can build a fine pipeline.

  • Google cloud platform API (Google Cloud Storage, Google Cloud Functions)

  • Netlify CMS and Netlify functions (same as AWS Lambda really)

  • Amazon EC2, S3, Lambda

React.js

I vastly prefer the Hook API and functional components over class components.

  • Component libraries: Material-UI

  • State management library: Redux with Hook API (@reduxjs/toolkit)

  • GraphQL React client library: Apollo client

  • Icon libraries: React Feather, Material-UI icons.

Vue.js libraries

I pretty much always use the Composition API for Vue, mainly for its better type inference and code structure.

  • Component libraries: Quasar built-ins, Vuetify

  • State management library: Vuex (there's only one anyways...)

  • Content management system: @nuxt/content, Vuepress

JavaScript libraries

  • HTTP client: Axios

  • SVG animation: Anime, Paper.js

  • HTML5 canvas graphics: Paper.js

  • TCP socket communication: net (node.js built-in)

  • Websocket communication: Socket.io

Development tools

  • Bundlers/transpilers: Vite, Webpack + Babel

  • Linters: ESLint (preferably StandardJS preset)

  • CSS preprocessors: Sass, SCSS

  • CI/CD platforms: Netlify, CircleCI

  • GitHub Apps: Semantic Pull Requests

  • Package managers: Yarn, NPM

  • Process managers: PM2

  • Task automation: nodemon, concurrently

  • Text editor: VSCode and a dropdown Tmux terminal

Technologies I want to learn later

  • Rust, Go, or some other fun new programming language

  • Gulp (debugging webpack loaders sucks, and I hope this is the answer)

  • Pug or some other HTML preprocessor (XML is my mortal enemy)

  • Octane, SunSpider, or some other performance benchmarker (what's the point of writing clean code if I don't get to prove it?)

  • Selenium WebDriver (testing, webscrapers for data analysis, scripting my online orders)

  • Django, Flask, or some other Python backend (because JavaScript isn't exactly made to run numpy, pandas, or neural networks)