Project Ideas
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
🔨 ☕️☕️☕️ any-cast
- Cast audio or video to any device with one API
🔨 ☕️☕️☕️ 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
- This can be done by adding a property of
VR Perspective Seat Experiment ❌ ☕️☕️☕️☕️
- What
- Take Codrops' Perspective Seat Preview and create a VR experience out of it
- Possible integrate this experience into popcorn time desktop
- 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
Study Rooms ❌ ☕️☕️☕️☕️☕️☕️
- 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
- Models
❌ ☕️☕️☕️☕️☕️☕️ Extensible JS Type Checker
Inspired by:
- https://cstheory.stackexchange.com/questions/22117/language-with-extensible-type-system
- Create a type system for JS and allow plugins to extend it
❌ 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:
@emberjs I'm loving the new error messages in Ember 2.15! pic.twitter.com/TYrtPLlOKc
— Jordan Vincent (@jordan_vinc) September 23, 2017
Making my stack traces a little more readable with a quick regex and some CSS line height pic.twitter.com/AvivrDHIAt
— Wes Bos (@wesbos) February 15, 2017
Stacktrace Parsing Library
- https://github.com/felixge/node-stack-trace
- https://github.com/stacktracejs/stacktrace.js
- https://www.npmjs.com/package/error-stack-parser
Some terminal highlighting libraries
- https://medium.com/@gauntface/pretty-printing-d80639fb8881
- https://github.com/chalk/chalk
- https://github.com/thlorenz/cardinal
- https://github.com/mikaelbr/marked-terminal
- https://github.com/dtao/console-highlight
- https://github.com/felixfbecker/cli-highlight
- https://github.com/eush77/v8-print-code-highlighter (not maintained)
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 usingbrowserlist
orbabel-env-preset
config - Use polyfills from inexorabletash/polyfill
- Base off zloirock/core-js
- Automatically include polyfills based on
browserslist
targets. Find necessary polyfills fromeslint-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-deps
- Warn on installation/usage of unstable dependency. Determine dependency quality
- Use npm-check to determine is depinstalled
- Use the new "npm audit"
❌ ☕️ 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
- a minifier that does constant folding and inlining
— Sebastian McKenzie (@sebmck) November 16, 2018
- a compiler transforms that don't rely on order
- a compiler that uses an immutable AST to perform transforms, with accurate scope tracking
- a linter that gives me suggestions on how to fix my code
- ...
✅ ☕️☕️ 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
- This can be done by adding a property of
- If compat-webpack-plugin detected, fail on only non-polyfillable API's
- Why CSS in JS
Now, this is a configuration that makes sense to me. Specify browsers once, let Babel and Autoprefixer do the work. https://t.co/KgOtIyw0wH pic.twitter.com/vVPeECXGY3
— Dan Abramov (@dan_abramov) December 12, 2016
A big advantage of CSS in JS(X): One language (JS), not three (JS, HTML, CSS).
— Guillermo Rauch (@rauchg) November 26, 2016
One linter. One code style. One type system. One test system.
✅ ☕️ FreeSound Node Client Library
- https://freesound.org/docs/api/
- Current one is utter trash
- Maybe if time permits, we can redo the web interface for https://freesound.org because it's open source
✅ ☕️☕️ 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
Modeling Growth of Projects ✅ ☕️☕️
- Consider using SIR Model
- Variables
- Initial stars (because we can't get view metrics, assume star count prop. to view count)
- code quality
- tags
- language
- size of language ecosystem
✅ ☕️ 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
- How: use
xwing ✅ ☕️☕️
- What:
- Emulate the trench run scene from star wars. The game involves avoiding obstacles in the trench and avoiding fire from tie fighters
- How:
- Take models from sketchfab
- Use three.js to build a small game
- Should have sound affects
- Adapt game textures to device. Use lower quality resources for low powered devices (laptops)
- Resources: