CogniQ Overlook

CogniQ Overlook is an ADHD Web Reviewer

Comment

Inspiration

Welcome to CogniQ Overlook - bridging the gap between your developer needs and modern web features.

What it does

CogniQ Overlook is an ADHD Web Reviewer that offers a groundbreaking approach to reviewing web projects (React, Angular, Astro, Next.js, etc.) to encourage upgrading to modern web browser features. It offers a dynamic review and relevant suggestions in a focused user interface that caters to ADHD developers. The focused interface reduces distractions to encourage the developer to take critical action and incorporate modern features based on the feedback provided by the Overlook Web Reviewer.

While other tools, such as linting tools, offer a long list of things to fix, they can be overwhelming and not actionable, especially for developers with ADHD. Instead of tackling the suggestions and review feedback, other tools push developers away from taking action. Overlook Web Reviewer reverses this by offering a focused mode that provides direct guidance with a minimalist functional interface.

We developed the Overlook Web Reviewer as a timely extension that addresses critical limitations that can affect developer experience. Users with ADHD, especially in the tech industry, face multiple interconnected challenges including, but not limited to: distraction overload due to multiple tabs, ads and notifications; difficulty starting, prioritizing, or completing tasks; content management issues due to navigation issues and information density; sensory overstimulation due to cluttered interfaces; and cognitive fatigue and motivation dips caused by complex navigation and inefficient content layout.

We developed CogniQ Overlook ADHD Web Reviewer as the first step in offsetting many of these challenges.

How we built it

We built Overlook as a VS Code extension using TypeScript and JavaScript, making use of the VS Code APIs and the standard library in Node for searching through files. The user interface was built with JavaScript and CSS and used icons from Baseline. The scanner and registry code were written in TypeScript and used the Baseline web-features NPM package for the data about the features and browser support. We also include tree-sitter for heavy duty parsing needs.

Challenges we ran into

Some of the challenges we encountered:

  • Navigating the VS Code API for searching through files and message passing between the webview and the extension.
  • We also needed to write our own code to load the data.json file from the web-features package directly rather than using the provided API method for loading that data.

Accomplishments that we're proud of

We are proud of tackling an important area of developer experience that is not always addressed when thinking about performance improvement. CogniQ Overlook ADHD Web Reviewer caters specifically to a demographic of developers that often have to face additional challenges in order to rapidly innovate. While the Overlook extension can improve all developer performance output, it is an extension that uses cognitive shortcuts to improve functionality for all users and developers.

What we learned

Our key learning outcomes include:

  • We learned how to work with webviews in VS Code to develop multi-featured sidebar extensions.
  • We gained a deeper understanding of the cognitive processes that can improve the user experience for developers with ADHD.
  • We learned how much great information is provided by the web-features package and the Web Platform Dashboard.

What's next for CogniQ Overlook

We plan to move to the next stage of prototyping by using components from the vscode elements package library.

Built With

Share this project:

Updates