Arthur Plazanet Wiki

Appearance

Resources - mix of Awesome List ​

Personal easy access to a mix of curated lists of resources, tools, and libraries for various topics - which can be helpful or copied pasted easily.

Table of Contents ​

Frontend ​

Libraries ​

UI Components ​

Accessibility and performance ​

Fonts

CSS / SCSS ​

Viusal representation

Google Drawing

Architecture ​

Responsive ​

Reset ​

CSS rules to remove browsers default styling or harmonize them - see examples

Tailwind CSS ​

TODO: https://nuejs.org/blog/tailwind-misinformation-engine/

Storybook ​

☆

Design Tokens ​

Style Dictionary ​

Build system to define your style once and let them accessible through different platforms

Can be used and integrated in a project: repository

Color Palette Generator ​

Articles ​

"What are Design Tokens?" ​

abl

Nuxt ​

JavaScript ​

TypeScript ​

Tools ​

  • hygen - The simple, fast, and scalable code generator that lives in your project - repo
  • Use Hygen to Bootstrap New Components in your Custom Vue UI Library - VueSchool Daniel Kelly

Infra/DevOps ​

GitHub Actions ​

Web Performance ​

Details

Uses Puppeteer to start up Chrome with network emulation settings defined by WebPageTest. Supports saving of artifacts to the Github Action run. Supports custom Lighthouse configuration via JavaScript file. Supports Lighthouse budget.json for failing PRs. Supports Lighthouse-based data model scores.js for failing PRs based on any audit score or category. Posts results of audit run as a comment on your PR.

Basic usage

yaml
name: Audit Web Performance
on: [pull_request]
jobs:
  perf:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v1
      - name: Generate Lighthouse Report
        uses: justinribeiro/lighthouse-action@master
        with:
          secret: ${{ secrets.GITHUB_TOKEN }}
          url: https://${{ github.sha }}-dot-${{ secrets.GAE_PID }}.appspot.com
          wptConnectionSpeed: threegfast
      - name: Saving Lighthouse Audit Artifacts
        uses: actions/upload-artifact@master
        with:
          name: lighthouse-artifacts
          path: './results'

Monorepo ​

pnpm ​

npm pkg set scripts.common="pnpm --filter common”

set script root

  npm pkg set scripts.lint="eslint ."
  npm pkg set scripts.format="prettier --write ."

dev mode

pnpm common build --watch
pnpm web-app dev

Terminal ​

Zellij ​

ghost - A Zellij plugin for spawning floating command terminal pane.

Other ​

Security messaging clients ​

  • Comparaison of all / most of messenging apps - link