This is an ongoing blog post that lists project ideas I am thinking of working on. If you are interested on working on any one of these ideas with me, feel free to reach out to me!


Legend
  • ☕️: Small/Easy Project
  • ☕️☕️☕️: Large/Difficult Project
  • ✅: MVP Shipped
  • 🔨: In Progress
  • ❌: Not Yet Started

🔨 ☕️☕️☕️ compat-db

  • An automated browser compatibility database
  • Runs type checks on browser's to determine if API's are defined
  • Another way is by running w3c tests on each browser and checking if they pass.
  • Use the Microsoft API Catalog for API's to be type-checked
  • Determine if an API can be polyfilled which API's can be polyfilled
    • This can be done by adding a property of polyfillable: bool to each spec record

VR Perspective Seat Experiment ❌ ☕️☕️☕️☕️

  • What
  • How:
    • Experiment with WebVR to seem if a WebVR implementation is possible

Pagerank ❌ ☕️☕️☕️☕️


Graph Drawer ❌ ☕️☕️

  • What:
    • A general purpose API that can draw graphs. This is intended to be used by falcon
    • Allow drawing graphs like those in game engines
    • 68747470733a2f2f666f72756d2e756e6974792e636f6d2f70726f78792e7068703f696d6167653d68747470732533412532462532466c68352e676f6f676c6575736572636f6e74656e742e636f6d25324655684231385565685a466b386a4d6f5f32563347572d68443277415241635157753646477a63
    • 68747470733a2f2f7261772e6769746875622e636f6d2f756e636f6e65642f73686164657267726170682f6d61737465722f646f63732f696d616765732f726571756972652e706e67
    • Screen-Shot-2018-05-23-at-5.00.49-PM

samples

Study Rooms ❌ ☕️☕️☕️☕️☕️☕️

Screen-Shot-2018-05-25-at-9.24.57-PM

  • What:
    • Mimic great study environments
    • Play sounds that match that environment
    • The app is meant to be played on a screen (laptop or monitor) while they study
      • This is similar to a lot of asmr (asmr rooms and others)
    • Sounds
      • Merging sounds together like Noizio
      • Example Sounds
        • Chatter sounds
        • Rain
        • Thunder
        • Space
        • Cabin forest
        • Cabin snow
        • Etc...
    • Environments
      • Will be from many different places, some fictional and some real
      • Will have people moving around in them.
      • The music and sounds of the environments should match real life
        • Example: A coffee shop would have jazz playing in the backround
      • The goal is to be as realistic as possible with the environments
      • The time of day in real life should match the time in the environment
      • Examples of environments
        • Stormy cathedral
        • Coffee shops
        • Lord of the rings bar
        • Libraries
        • Small cabin
        • Writer's Refuge
  • How:
    • Models
      • Take models from sketchfab
      • Also generate own models
    • Sound
      • Go to similar places in real life and record those environments
      • Sounds can be taken from soundcloud or youtube (using their api's)
    • Graphics Performance
      • This will be difficult on low end laptops
      • We can detect if a laptop is
      • For low end
    • Infra:
      • App will be served over github pages
      • Will use https
      • Will use service worker to cache textures

❌ ☕️☕️ WebGL Static Analysis


❌ ☕️☕️☕️☕️☕️☕️ Extensible JS Type Checker

Inspired by:


❌ warn-non-ui-critical

  • iOS and Android native platforms, for example, restrict (by default) the usage of any APIs not critical to UI manipulation on the main thread. (from tasklet)
  • Make a static analyzer that can warn when using APIs not critical for UI

❌ ☕️☕️ pretty-print-errors

  • Should have browser console fallback
  • Source map support
  • Automatic script blackboxing
  • Path Error.prototype.toString
  • Use project root as root of errors: Error in 'project-root/foo/bar.js'
  • Lower opacity of code that does not error
  • Show line numbers
  • Highlight rows with errors
  • Use like babel-polyfill, babel-node -r pretty-print-errors some.js

Inspired by:

Stacktrace Parsing Library

Some terminal highlighting libraries

laravel woops

img

pretty-print-errors

const config = {
  blackbox: bool = true,
  root: string = __dirname,
  lineNumbers: bool = true,
  previousLinesCount: number = 5
}

Research

  • Elm stack trace errors

❌ ☕️☕️ stylelint-plugin-compat

  • Lint css style compatibility by using caniuse db
  • Check if using autoprefixer. If not, warn if missing prefix

❌ ☕️☕️☕️ compat-webpack-plugin

  • Automatically polyfill browser API's (ex. fetch()) by using browserlist or babel-env-preset config
  • Use polyfills from inexorabletash/polyfill
  • Base off zloirock/core-js
  • Automatically include polyfills based on browserslist targets. Find necessary polyfills from eslint-plugin-compat
  • Allow for dynamically requiring polyfills to reduce build size. (ex. if 90% of target browsers support feature, force network request instead of polyfill)
  • Borrow from https://github.com/Financial-Times/polyfill-service

❌ ☕️☕️☕️ eslint-plugin-dom

  • Lint dom API performance, warn of sync layout calc, error on forced reflow
  • Paul Irish as an eslint rule?

❌ ☕️☕️☕️ eslint-plugin-perf

  • Warn on writing suboptimal code
  • No concatenate string in for-loop
  • No nested loop
  • prefer-array-join

❌ ☕️☕️ eslint-plugin-deps

  • Warn on installation/usage of unstable dependency. Determine dependency quality
  • Use npm-check to determine is depinstalled
  • Use the new "npm audit"

❌ ☕️ build-compat-check

cli tool used to analyze the build to see if any deprecated or unsupported API's are being used


❌ ☕️☕️ webpack-strip-polyfills

Detect all the supported browsers and remove all the polyfills which are included but will never be used by the targets


❌ ☕️☕️☕️ Alfred Runtime

  • A linter that can collect runtime errors
  • Examples: why-did-you-update: Instead of logging warnings to the console, what if errors could be sent to a server which collects runtime errors and displays them in an interface for the user to see?

❌ ☕️☕️☕️ Alfred Runner

  • Given a list of routes, automate a nightmare/selenium instance to traverse the routes, simulate action, and detect performance weak points/fps drops/memory leaks
  • Interaction to Simulate
    • Clicks
    • Route navigation

❌ ☕️☕️☕️☕️☕️☕️ Alfred Linter

  • An alternative to ESLint that suggests solutions to errors
  • Similar to Cargo

✅ ☕️☕️ eslint-plugin-compat

  • Allow css-in-js to be linted for CSS compat
  • Integration with aphrodite, styled-components, react-style, radium, JSS, others
  • Each will likely need its own parser. Should be able to detect which css-in-js framework is being used
  • Integration with CSS preprocessors (ex. autoprefixer)
  • Determine if an API can be polyfilled which API's can be polyfilled
    • This can be done by adding a property of polyfillable: bool to each spec record
  • If compat-webpack-plugin detected, fail on only non-polyfillable API's
  • Why CSS in JS

✅ ☕️ FreeSound Node Client Library

✅ ☕️☕️ babel-plugin-fail-explicit

Force javascript to be stricter in development environment

Coercion and silent failure are dead. Long live usable JavaScript

  • Fail on Coercion
  • Fail on array out of bounds access
  • Fail on non-existent property access

Get the values of functions:

Inspiration


webgl-specs ✅ ☕️☕️

  • What:
    • Detect the specs of a graphics card using web apis
  • How:
    • Extract source from webglreport and create an API from it

✅ ☕️ ast-metadata-inferer

  • Generate a large collection of the ast node types of different API's

🔨 ☕️☕️☕️ compat-test-runner

  • Given compat-db records, return if each record is supported in a specific browser
  • Run tests in every browser
    • How: use testcafe and download binaries for each browser

xwing ✅ ☕️☕️