DEV Community: Raathi

A VSCode extension to find things faster in your JavaScript codebase

Raathi — Tue, 11 Aug 2020 09:07:38 +0000

We spend a lot of time reading code. And a portion of that time is spent on finding the right code to read.

I love using VSCode as my editor but I wanted a better way to search my JavaScript code. I wanted a powerful search that will let me search for only functions or classes or typescript interfaces or other types of symbols.

VSCode has a built-in symbol search but I wanted something that I can keep it to the side like a sidebar.

Also, I wanted a rich bookmarking capability. Instead of bookmarking a line in a file, which could change if you add more lines, I wanted to bookmark a function and still be able to go back to the function even if the function is moved to a different position in the file.

The thing about VSCode is you could extend it if the built-in functionality is not something you are happy with.

So I did just that.

👋 Say hello to Waypoint

Waypoint is a VSCode extension which provides a fast symbol search and bookmarking experience. It works with JavaScript, TypeScript, and Flow codebases.

💨 Waypoint indexes your source files so the search is ridiculously fast.
🎲 You can filter your search results by applying filters such as classes, functions, variables, and types.
🔖 You can bookmark your symbols for later. This is a lifesaver if you need to refer a symbol over and over again.
📑 You can copy the import path for a symbol with a click.

⚡️ Getting started

If you like what you are seeing, here are a few links to get started:

🌱 The Future

We are just getting started with Waypoint. There are a lot of things we could do to improve the way we read code. I'm really excited to see what else we could add to Waypoint. If you have ideas, please open an issue in our Github repo.

Scripted natural motion with react-beautiful-dnd

Raathi — Mon, 28 Oct 2019 23:00:46 +0000

React-beautiful-dnd v12 ships with a Sensor API that allows us to control the drag and drop actions programmatically. This is going to open up a wide range of possibilities. We can programmatically move a draggable using either a snap dragging or a fluid dragging.

This blog post goes into the details of how to perform good looking fluid drags using the new fluidLift method.

The fluidLift method would allow us to create beautiful scripted experiences without user interaction. For example, a trip planner app, as shown below, could provide an interactive onboarding experience using the new fluidLift method by showing the user how to plan a trip.

Take full control of draggable using fluid dragging

The fluidLift method allows us to freely move a draggable to a new position by providing a coordinate.

Let's say if we want to move a draggable from it's initial position to a new position with the coordinate 400, 500, we could call the .move() method with { x: 400, y: 500 } as the argument as shown below.

 function useMyCoolSensor(api) {
    const startDrag = function start() {
      const preDrag = api.tryGetLock("my-draggable-item");
      if (!preDrag) {
        return;
      }

      const drag = preDrag.fluidLift({ x: 0, y: 0 });
      const end = { x: 400, y: 500 };
      drag.move(end);
      drag.drop()
    };
  }

This will make our draggable move to the new position. In the illustration below, you might have noticed that the box jumps from its initial position to its target position.

Making the motion natural

In order to achieve a more natural motion, we have to tell react-beautiful-dnd to move the draggable element coordinate by coordinate through time towards the target position.

So instead of calling the .move() just once, we are going to call it multiple times with multiple coordinates which lies between the start coordinate and the end coordinate so the drag motion would be more natural.

To create the coordinates between the start and the end coordinates, we are going to use a helper library called tween-functions. The API of the tween-functions library goes as below.

tweenFunction.tweenName(currentTime, beginValue, endValue, totalDuration)

Let's go ahead and generate 20 points between the start position and the end position and then call the .move() method with our new set of coordinates in requestAnimationFrame.

import * as tweenFunctions from "tween-functions";

function useMyCoolSensor(api) {
    const startDrag = function start() {
      const preDrag = api.tryGetLock("my-draggable-item");
      if (!preDrag) {
        return;
      }

      const start = { x: 0, y: 0 };
      const end= { x: 400, y: 500 };
      const drag = preDrag.fluidLift(start );

      const points = [];

      // we want to generate 20 points between the start and the end
      const numberOfPoints = 20;

      for (let i = 0; i < numberOfPoints ; i++) {
        points.push({
          x: tweenFunctions.easeOutCirc(i, start.x, end.x, numberOfPoints),
          y: tweenFunctions.easeOutCirc(i, start.y, end.y, numberOfPoints)
        });
      }

      moveStepByStep(drag, points);
    };
  }

function moveStepByStep(drag, values) {
  requestAnimationFrame(() => {
    const newPosition = values.shift();
    drag.move(newPosition);

    if (values.length) {
      moveStepByStep(drag, values);
    } else {
      drag.drop();
    }
  });
}

That looks much better.

Here is the full codesandbox example.

The new Sensor API unlocks a vast amount of possibilities. Experiment with it and go build amazing things.

Introducing Majestic, A Zero Config GUI for Jest

Raathi — Mon, 25 Mar 2019 11:33:15 +0000

Jest really made testing painless and, like many tools in the Javascript ecosystem, the default interface to interact with Jest is via the CLI. And it's one of the best CLI out there. But what if Jest comes with a GUI interface as well?

🕑 A while ago

A year ago I released an open-source side project of called Majestic, A GUI for Jest. It was an electron app which interacted with the Jest CLI on behalf of you. It worked as a proof of concept but it was far away from what a tool like that could be. But I learned a lot about the technical and design decisions made and wanted to star over from scratch.

🎉 An all-new Majestic

// Detect dark theme var iframe = document.getElementById('tweet-1110138948259467264-493'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1110138948259467264&theme=dark" }

Today I'm extremely happy to introduce you to the all-new Majestic and it's just a single command, npx majestic, away.

Majestic is no longer an electron app but a npm module. Go into your project which has Jest configured and run npx majestic in your terminal and you will see the UI open in your default browser.

The all-new Majestic would allow you to

✅ Run all the tests or a single file
⏱ Toggle watch mode
📸 Update snapshots
❌ Examine test failures as they happen
⏲ Console.log() to the GUI for debugging
🔍 Search tests

All these with almost zero additional configuration.

🤝 Help us make it better

Raathigesh / majestic

⚡ Zero config GUI for Jest

Majestic is a GUI for Jest

✅ Run all the tests or a single file
⏱ Toggle watch mode
📸 Update snapshots
❌ Examine test failures as they happen
⏲ Console.log() to the UI for debugging
🚔 Built-in coverage report
🔍 Search tests
💎 Works with flow and typescript projects
📦 Works with Create react app

Majestic supports Jest 20 and above

Get started

Run majestic via npx in a project directory

cd ./my-jest-project # go into a project with Jest
npx majestic # execute majestic

or install Majestic globally via Yarn and run majestic

yarn global add majestic # install majestic globally
cd ./my-jest-project # go into a project with Jest
majestic # execute majestic

or install Majestic globally via Npm and run majestic

npm install majestic -g # install majestic globally
cd ./my-jest-project # go into a project with Jest
majestic # execute majestic

Running as an app

…

View on GitHub

If you are interested in contributing or just wondering what powers Majestic under the hood,

Majestic frontend is written in React JS and Appolo qrahphQL
The local backend runs a NodeJS qrahphQL server and spins up Jest as a child process and interacts with it

Give it a try. If you have a feature request or ran into an issue, either create an issue in the github repository or drop by our community chat https://spectrum.chat/majestic

Cheers