Forem: Jalal 🚀

Introducing DFlex - A Modern Javascript Drag and Drop Library

Jalal 🚀 — Fri, 10 Nov 2023 10:03:44 +0000

I'm excited to announce the release of DFlex, a new Javascript library for building modern drag and drop interfaces.

DFlex aims to make it easy to add natural dragging, dropping, and sorting interactions to your web apps. It is lightweight, dependency-free, and works across all modern browsers.

Some key features of DFlex include:

DOM Manipulation - DFlex directly manipulates the DOM instead of reconstructing it like other libraries. This results in better performance and avoids layout shifts.
Transformation Scheduler - DFlex has its own scheduler and reconciler to transform elements. This prevents blocking and allows smooth, concurrent animations.
Custom Events & Listeners - DFlex provides custom events for dragging, interactivity, siblings, and more. It also has layout listeners to monitor state changes.
Modular Architecture - DFlex is built with a modular architecture, including separate packages for the DOM generator, utilities, store, draggable, and more.
Framework Agnostic - DFlex is framework agnostic and works with React, Vue, Angular, and vanilla JS.
Configurable - Options like dragging threshold, restrictions, auto-scroll, and more can be configured per element.

I built DFlex to push drag and drop capabilities further and handle complex interfaces at scale without compromises. The project is MIT licensed and open source on GitHub.

Here is a simple DnD component using React and DFlex:

// Simple DFlex DnD Component 

import React from 'react';
import { store, DnD } from '@dflex/dnd';

let draggableInstance; 

const DFlexDnD = ({ id, children }) => {

  const ref = React.useRef();

  React.useEffect(() => {
    if (ref.current) {
      store.register({ id });
    }

    return () => store.unregister(id);
  }, [id]);

  const onMouseDown = e => {
    if (e.button === 0) {
      draggableInstance = new DnD(id, {x: e.clientX, y: e.clientY});
    }
  };

  const onMouseMove = e => {
    if (draggableInstance) {
      draggableInstance.dragAt(e.clientX, e.clientY); 
    }
  };

  const onMouseUp = () => {
    if (draggableInstance) {
      draggableInstance.endDragging();
      draggableInstance = null;
    }
  };

  return (
    <div
      ref={ref}
      onMouseDown={onMouseDown}
      onMouseMove={onMouseMove}
      onMouseUp={onMouseUp}  
    >
      {children}
    </div>
  );

};

export default DFlexDnD;

With just a few lines of code, we can add drag and drop capabilities to a component. The DFlex store manages registration, while the DnD instance handles the dragging logic.

I'd love for you to check out the DFlex website to see examples and live demos. Let me know if you end up building something cool with DFlex! I'm always looking for feedback to help improve the library.

dflex-js / dflex

The sophisticated Drag and Drop library you've been waiting for 🥳

DFlex

DFlex is a Javascript library for modern Drag and Drop apps. It's built with vanilla Javascript and implemented an enhanced transformation mechanism to manipulate DOM elements. It is by far the only Drag and Drop library on the internet that manipulates the DOM instead of reconstructing it and has its own scheduler and reconciler.

Features

Dynamic architecture.
Traverse DOM without calling browser API.
Infinite DOM transformation instead of reconstructing the DOM tree with every interaction.
Customized and enhanced reconciler targets only elements transformed from origin.
Isolated from data flow with a scheduler prevents any blocking event.
Prevent layout shift that happens with any Drag and Drop mechanism.
Animated transformation with each interaction.
Headless and compatible with any modern JS framework.
Targeting each DOM element individually based on registration.
Event driven and fully customized API.
Extensible using its own matching algorithm instead of flat recursion algorithm(s).
Support three different types…

View on GitHub

To Puppeteer, or to Cypress

Jalal 🚀 — Wed, 22 Jul 2020 20:21:46 +0000

Working on a layout is not easy when there are too many possibilities and it gets more complicated if it's related to mouse direction. It's not just up and down, you literally need to test all horizontal and vertical possibilities. Imagine you also study elements getting effected by mouse movement, where things getting harder and harder.

In the nutshell, I am a hard unit-test believer, but in this case, you definitely need to do testing and not a unit test we are talking here about an end-to-end test where you see elements moving virtually and experience each case individually.

Using unit and integration tests in Jest

Jalal 🚀 ・ Jun 27 '20

#javascript #showdev #testing

The big question is how you do it, taking into consideration that your project already uses a unit test with Jest.

Puppeteer it

The wise decision in my case is to use, Puppeteer. You integrate Puppeteer with Jest in jest.integration.config.js a whole new config and start writing your first integration test.

{
  "preset": "jest-puppeteer"
}

Everything is async in Puppeteer so you go by something like this to get your element:

const element = await page.waitForSelector("#id-something");

I need to get element box size so I added:

const elmBox = await element.boundingBox();

const {x, y, width, height} = elmBox

// do something here...

You immediately start to notice that's Puppeteer is natural. I am not learning something new, it's easy to use and you supposedly can go further. Let's try mouse events.

// move the mouse to new coordinates 
await page.mouse.move(100, 200);

// triggers mouse down
await page.mouse.down();

// move the mouse to new horizontal position
await page.mouse.move(500, 200);

// triggers mouse up
await page.mouse.up();

Very easy. Very handy. Except there's a configuration related. you can't keep the browser open, there's no time travel, and you can't repeat the test cases individually. So, if you test and develop by doing TDD it's nearly impossible to actually see what's going on. You can slow down the test but if you running a server and you wait to browser to re-launch that's means waiting for infinity.

launch: {
 devtools: true,
 slowMo: 500,
},

Even with Puppeteer reaching version 5 there's a gap in its ecosystem. Because it's not a testing framework.

Puppeteer is a Node library which provides a high-level API to control Chrome or Chromium over the DevTools Protocol.

Trying Cypress

The first issue with Cypress, that you need to start from scratch. A new assertion, a new testing framework, with a new structure.

The installation includes examples that really help to know where you are going and what your test cases should look like. You use a chain of commands. You get something, trigger it, test it.

cy.get("#id-something").then((elm) => {
elmBox = elm[0].getBoundingClientRect();

const {x, y, width, height} = elmBox
});

Cypress uses trigger to trigger an event

cy.get("#id-something")
  .trigger("mousedown", { button: 0 })
  .trigger("mousemove", { clientX: 100, clientY: 200 });

It uses a whole different approach but once you read it you easily get it. Until you start to use assertion.

This is from Cypress documentation:

cy.get('.error').should('be.empty')
cy.contains('Login').should('be.visible')
cy.wrap({ foo: 'bar' }).its('foo').should('eq', 'bar')

You take a deep breath and ask yourself, should I really have to learn this? Even something like beforeAll in cypress is before. So, you get the sense that whatever transition you make it's not going to be smooth as you expect.

But your test runs with zero-config, with time travel, and yes you can repeat it forever. And it's super-fast.

However, my problem is not with speediness. I need, at a certain point to be able to repeat the same test command.

It turns out, Cypress automatically takes a screenshot for every command and you simply can highlight it forever which means a totally new debugging experience.

Conclusion

When it comes to increasing productivity, end-to-end test can be the real solution. Forget about all articles tell you about the benefits of testing and why you should use e2e. I personally experienced a huge difference in fixing bugs saving hours of chasing needles in a haystack.

Puppeteer can be a solution for expanding your test cases. But if you are using it with development, the answer is Cypress.

Cypress is rich with examples, and a supportive community. It's designed for the end-to-end tests; therefore, you won't struggle using it. If you are familiar with Mocha it won't take you a long time to get familiar with assertation. And it's amazing how you can use it even with no previous background about this type of testing. Most importantly, you immediately start experiencing the benefits of each test you write instead of figuring out how to configure it with your project.

Using unit and integration tests in Jest

Jalal 🚀 — Sat, 27 Jun 2020 16:42:16 +0000

I was trying to use jest-puppeteer with monorepo project i'm working on in roadmap aiming to add integration tests using puppeteer.

And honestly, I didn't have any idea how to load different jest.config.js for different packages I already have in the monorepo.

In case anyone stuck in the same problem as me. The simple solution is to separate the unit test from an integration test. Obvious? didn't seem so for me.

This "separation" should be reflected in the project structure, config files, and running scripts.

Of course, the main problem I faced here, is dealing with the switching environment. I use testEnvironment: "jsdom" and to run puppeteer you have to remove any testing environment and use preset: "jest-puppeteer".

Lesson 1: You can't run all tests at once.
Lesson 2: It doesn't matter if you are using monorepo or not.

So, I ended up with the following structure:

myProj1/
  src/
  test/
    integration/
      myFrist.test.js
    foo.test.js
    bar.test.js
  package.json

myProj2/
  ...
myProj3/
  ...
jest.config.js
jest.integration.config.js
package.json

What's in config files?

Well, not much at all.

In jest.config.js, the main goal is to exclude the integration test.

module.exports = {
  testEnvironment: "jsdom",
  testPathIgnorePatterns: ["test/integration"],
};

Inside jest.integration.config.js, make sure to test only the integration files.

module.exports = {
  preset: "jest-puppeteer",
  testRegex: "/integration/",
};

And finally inside root package.json:

"scripts": {
   "test:unit": "jest",
   "test:e2e": "jest -c jest.integration.config.js",
   "test": "yarn test:unit && yarn test:e2e",
 },

Using jest -c to pass a custom config for Jest. Since I have jest.config.js for the unit test there's no need to pass one, Jest will automatically read it. But that's not the case for test:e2e.

Eventually, the test script will run both integration and unit tests.

Detect extension in a directory using node js

Jalal 🚀 — Tue, 07 Apr 2020 00:38:08 +0000

Reading files from any package is essential before production. But since we as developers love automating things. Validating package accessibility and detect extensions among other things should be done by code.

The good news is, this can be achieved easily in the node file system.

let's start by working on getting a file extension. We have input: filename.extension splitting the input by "." should achieve our goal easily.

`filename.extension`.split(".") 
// (2) ["filename", "extension"]

`filename.test.extension`.split(".");
// (3) ["filename", "test", "extension"]

As you notice, we need to get the last element of the result. This can be done in different ways. One of them is using pop which returns the last element of the array.

function getExtension(fileFullName) {
  return fileFullName.split(".").pop();
}

We still have a problem. We don't have the file full name. We actually have to auto-detect the extension by knowing the project root.

The first step, using readdirSync to read all files that exist in our directory.

const files = fs.readdirSync(dir);

// (4) [ 'a.js', 'b.js', 'index.js', 'package.json' ]

Then, we can use find which returns the value of the first element that satisfies function result.

const found = [10, 20, 30].find((number) => number > 10);
// 20

Now let's update our function

import fs from "fs";

function getExtension(rootDir, entry) {
  const files = fs.readdirSync(rootDir);
  // (4) [ 'a.js', 'b.ts', 'index.js', 'README.md', 'package.json' ]

  const filename = files.find((file) => {
    // return the first files that include given entry
    return file.includes(entry);
  });

  const extension = filename.split(".").pop();

  return extension;
}

// reading form current directory
const result = getExtension(".", "b");

// result: ts

We can still upgrade our function, as we usually have an index as default entry from the current directory.

function getExtension(rootDir = ".", entry = "index") {
  //
}

const result = getExtension();

// result: js

Our mission is not finished yet, but that's enough for now. Next, we will build validate together.

See you soon!

Do you like it? Please leave ⭐️. I appreciate any feedback 👋👋👋

The extraordinary behavior of match()

Jalal 🚀 — Sun, 05 Apr 2020 02:24:35 +0000

If you had a very rough week as I had. Let's do some coding therapy. Something healing and productive at the same time.

There are many ways to describe my relationship with regex. Complicated at its best, confusing most of the time.

It's something I usually try to avoid, but eventually, you have to face it and
get over it. And yes, no matter how much I pretend to know it, inside, I know I don't.

That was the case when our friends from the lovely dev community pointed out to another solution can be used to count and get statistics from a string by using match instead of split.

String.prototype.match()

Match() itself is simple. It looks into a given string, returns an array of results, based on regex expression.

const regex = /cat/g;
"fat cat, fast cat".match(regex);

// (2) ["cat", "cat"]

/cat/g, will look for c followed by a followed by t. Let's see the result for this one:

- "fat cat, fast cat".match(regex);
+ "category: fat cat, fast cat".match(regex);

"category: fat cat, fast cat".match(/cat/g);

// (3) ["cat", "cat", "cat"];

Unexpected? Maybe. But it's also clear, you got what you asked for. cat is in category. Do you need a different output? Use extra options.

Let's change the pattern, I need to match cat which starts with whitespace \s followed by character c followed by a followed by t, ends with space or comma or dot [\s|.|,]

const regex = /\s(cat)[\s|.|,]/g;
"category. fat cat, fast cat. category".match(regex);

// (2)[" cat,", " cat."];

A better result indeed. At least category is not counted.

So, to continue what we've already started in the previous post, let's recap some shorthands we need to know before we start counting:

\w: matches alphanumeric characters with numbers [a-zA-Z0-9_]
+: matches preceding symbol

Which means \w+ matches the whole word.

"fat cat".match(/\w+/g);
// (2) ["fat", "cat"]

\n: matches newline

"fat cat".match(/\n/g);
// null

"fat cat \n fast cat".match(/\n/g);
// (1) ["↵"]

Since the initial result is zero, we have to add +1 to the result.

\s: matches a whitespace character including newline \n and tab \t

"fat cat, fast cat".match(/\s/g);
// (3) [" ", " ", " "]

"fat cat\n fast cat".match(/\s/g);
// (4) [" ", " ", "↵", " ", " "]

Spaces = str.match(/\s/g) - str.match(/\n/g)

Building count()

const str = "Hello World\n How are you doing";

function count(str) {
  const lines = (str.match(/\n/g) || []).length;
  // (1) ["↵"]

  const spaces = (str.match(/\s/g) || []).length;
  // (6) [" ", "↵", " ", " ", " ", " "]
  // 6 - 1 = 5

  const words = str.match(/\w+/g) || [];
  // (6) ["Hello", "World", "How", "are", "you", "doing"]

  const total = str.length;
  // 30

  return {
    lines: lines + 1,
    spaces: spaces - lines,
    words,
    total,
  };
}

Note: Using str.match(reg) || [] just in case match not found which returns null.

Here's a good resource for learning regex github/learn-regex. You can also practice regex live via regexr.

Please leave ⭐️ if you like it. Feedbacks more than welcome 👋👋👋

Let's talk about how powerful split function is

Jalal 🚀 — Sun, 29 Mar 2020 20:27:33 +0000

Split() function in JavaScript is super cool. It looks into a given string and split it into an array.

const array = "Jan\n Feb\n Mar".split(/\n/)

// ["Jan", " Feb", " Mar"]

So, if we are curious about knowing how many lines in a given string:

const lines = "Jan\n Feb\n Mar".split(/\n/).length

// 3

Let's put our code into one function so we can develop it easily:

/**
 * split string in each line and put it into array.
 */
function splitToLines(lines) {
  const linesArray = lines.split(/\n/);

  return linesArray;
}

const str = "Hello World\n How are you doing";
const strArr = splitToLines(str) // [ 'Hello World', ' How are you doing' ]
const strLength = strArr.length // 2

We may dive more into each line individually by counting words:

/**
 * counts words in an array of lines.
 */
function countWords(linesArr) {
  let words = 0;

  // go into each line individually.
  linesArr.forEach(line => {
    // line1: Hello World
    // line2: How are you doing

    // let's trim the line to avoid spaces in the beginning.
    // split each line by spaces so we can count words in each line.
    const wordsArr = line.trim().split(/\s/);
    // line1-arr: ["Hello", "World"];
    // line2-arr: [ "How", "are", "you", "doing" ]

    words += wordsArr.length;
    // for line1: words equal to 2
    // for line1: words equal to 4
  });
  return words;
}


const str = "Hello World\n How are you doing";
const linesArr = splitToLines(str) //  [ 'Hello World', ' How are you doing' ]
const wordsNum = countWords(linesArr) // 6
const linesNum = linesArr.length // 2

It's fun, exactly like solving a puzzle. You start with the first piece and suddenly you nearly there.

Think about it, if you have lines and words number, you can easily count characters in each word and calculate spaces.

This is exactly how I built a function called textics. It counts lines, words, chars and spaces for a given string using split() function and that all can be done with couple lines of code.

Do you like it? Please leave a ⭐️. I appreciate any feedback or PRs 👋👋👋

Moving Element In An Array From Index To Another

Jalal 🚀 — Fri, 27 Mar 2020 19:52:55 +0000

I was working on a project when I faced an unprecedented and obvious issue. How do I suppose to move an element in an array form one position to another?

My goal is to move an element in index-0 to index-2. Something like this:



const input = ["a", "b", "c"];

const expected = ["b", "c", "a"];

The simplest way, using splice() which gives me the ability to add and remove elements in an array.

First, let's delete element in index-0:



function move(input, from) {
  const numberOfDeletedElm = 1;

  // delete one element only, in index-from
  const arrDeletedElem = input.splice(from, numberOfDeletedElm);

  // ["a"]=["a", "b", "c"].splice(0, 1);

  // and input array is ["b", "c"]
}

But, I don't need an array, I only need the content of the arrDeletedElem.



const elm = input.splice(from, numberOfDeletedElm)[0];

Now, let's add elm to index-2



const numberOfDeletedElm = 0;

input.splice(2, numberOfDeletedElm, elm);

And our move function well be:



function move(input, from, to) {
  let numberOfDeletedElm = 1;

  const elm = input.splice(from, numberOfDeletedElm)[0];

  numberOfDeletedElm = 0;

  input.splice(to, numberOfDeletedElm, elm);
}

// move(["a", "b", "c"], 0, 2) >> ["b", "c", "a"]

Of course, this can go deeper, that's why I created move-position. Which contains utility functions for moving index in an array.

Since releasing V1, move-position can deal with the following cases:

1- Moving one element form/to index using: move.



const input = ["a", "b", "c"];

// move element form index=0, to index=2
const result = move(input, 0, 2);

// ["b", "c", "a"];

2- Moves the same form/to index in multiple arrays using: moveMultiArr.



const input1 = ["a1", "b1", "c1"];
const input2 = ["a2", "b2", "c2"];

const inputs = [input1, input2];

const result = moveMultiArr(inputs, 2, 0);

// result[0] > ["c1", "a1", "b1"];
// result[1] > ["c2", "a2", "b2"];

3- Moves multiple indexes in the same array using: moveMultiIndex.



const input = ["a", "b", "c"];

const movingMap = [
  { from: 0, to: 2 },
  { from: 2, to: 1 }
];

const result = moveMultiIndex(input, movingMap);

// result > [ 'a', 'c', 'a' ]

And it's well-tested:

Do you like it? Please leave a ⭐️. I appreciate any feedback or PRs 👋👋👋