Hacker News Reader

Comment by jimmy2020 | Hacker News Reader

jimmy2020

Hi HN, DFlex author here. I built DFlex because I couldn't find a comprehensive solution for interactive apps. All existing solutions depend heavily on HTML5 drag and drop to achieve interactivity despite the fact that the standard implementation is not designed to turn the apps into an interactive ones. So I started from scratch, built the transformation mechanism, and implement a custom reconciler built specifically to deal with DOM transformation. It also has a concurrent registration to prevent any blocking event and reduce initial loading. I also tried to take care of browser painting and scripting time. It's still in development mode but I'm glad it's shared here. Happy to take any questions you have and I'd love to get your feedback.

View on HN

A request: could you please remove "case" from the font-feature-settings on the root element of https://www.dflex.dev/. It’s wrong (its purpose is to tweak vertical positioning of punctuation to align with all-caps text, which is not the case here), and some fonts (including a couple of the largest font foundries) also have "case" effectively imply `text-transform: uppercase`, and I’m using such a font, so the entire site is inappropriately uppercase for me.

(The rest of the font-feature-settings declaration also doesn’t make much sense: "case" 1, "rlig" 1,"calt" 0: rlig is for other scripts, and calt is a weird thing to turn off. I’d remove the entire declaration.)

Sorry for the bad experience and thanks for the feedback.

The live demo[1] is completely unusable for people relying on assistive technology like screen readers and speech recognition, plus anyone using alternative input modalities like the keyboard. Do you have accessibility on your roadmap, to ensure that you're not encouraging users of your library to exclude a large percentage of the world's population?

[1] https://www.dflex.dev/demo/lists/symmetric/

Thanks for pointing out the accessibility issue. DFlex stands for a better user experience that includes of course adding accessibility to the main mechanism. At least the essential one. But at this moment, the project is still in development mode and many things need to improve including accessibility.

I spent a long time a few weeks ago looking for a replacement for jQueryUI's sortable(), but none of the DnD libraries supported both sortable and the grid option out of the box. Would yours work for that? Here's where we want to use it: https://pamelafox.github.io/faded-parsons-static/problem.htm...

Good question. Internally every registered element has a grid position inside its own container [1]. And it's not CSS grid styling, it actually calculates the geometry in each element and positioned them relative to their parent container. This is the implementation behind the enhanced transformation. Based on the grid position, DFlex can call the right method responsible for transformation instead of checking siblings linearly. For example, if you transform an element in the middle of the container it only invokes the switching position method instead of iteration in the entire tree. Still, grid implementation is not fully implemented and supported yet. But it's something that can be done in the next releases. However, the link you shared has an interesting case because you are resizing the element when appending it to the new container. I'd like to see a repo if it's possible but it's a very interesting case I'd love to look into it.

[1]- https://github.com/dflex-js/dflex/blob/cbda61af185100a3afb39...

Thanks for the response! Here's the code for our use case: https://github.com/pamelafox/faded-parsons-static/blob/maste...

It calls jQuery UI sortable() with a "grid" of [50, 1], to mimic Python indentability. Here's their documentation for grid: https://api.jqueryui.com/sortable/#option-grid

Thanks for sharing the link I'll look into it soon.

Hi!

Thanks for this lib, it looks very nice so far.

I was wondering if DFlex supports nesting containers inside items in infinite depth. I saw you had nested example but I couldn't drag on item on the other container.

None the less promising, you say it's still in development, is there some aspects you are more specifically working on?

It's designed to handle nesting, so each register element can have depth starting from zero. But it's not finished yet. There are so many aspects to cover but nesting is not fully implemented. My priority right now is to enhance scrolling and migrate between scroll containers.

Edit: I'd like also to hear back from the community, I welcome any suggestions about the roadmap and what's necessary to be shipped soon.

Could you expand on the limitations you found with the inbuilt API's out of interest?

In the nutshell, it's designed to drag an element into a droppable area. So let's say you are dragging a file to be uploaded, in this case, it makes perfect sense to use HTML API. Otherwise, you need a framework that can orchestrate the transformation. It's like using React. In theory, you can manipulate DOM directly in the browser but instead, you use a framework to build your app.

Having done something similar before, 2 things really hard to get right: - animate position shift when the list is reordered. you can't rely on natural dom ordering to properly animate all items - anything that has to do a tree structure

DFlex doesn't reorder the elements. 1- It transforms elements by calculating the new position so it can avoid any layout shift this is something essential in the transformation mechanism. 2- It reconciles the transformed element when needed. So instead of replacing the entire children, it replaces only the transformed ones.

Reply on news.ycombinator.com