Show HN: SpacersJS – My first JavaScript Library for no-code tools | Hacker News Reader

Show HN: SpacersJS – My first JavaScript Library for no-code tools

github.com

51 pointsactuallyakash40 comments

So just a word on the post. Opening this on my phone opened me into the GitHub app.

The repo has no explanation of what this is. I then clicked on the link to the page. Still couldn’t tell what it was except it manages padding and margin. Then all the examples seemed not to be responsive.

So all I could tell was that it seems to have something to do with spacing and doesn’t seem to work well. ¯\_(ツ)_/¯

This is just my experience and others seem to see the value in this library but just wanted to share my perspective.

Hey @mikeryan,

Thanks for sharing the feedback. I do agree the spacers doesn't work on mobile as the "dragging" part is a bit weird on mobile and the demo doesn't look good on mobile.

Gonna improve the responsiveness of demo layout for sure.

Thanks again.

```

bower install --save spacersjs

...

Option | Type | Default

element | string | null

...

Initialize with:

spacers({ element: '.element-unique-class' });

```

This is a neat tool and you did a great job.

Tangentially, I can't help but think if a person can use some of these tools, they're already a programmer. Reading the documentation, a "no code" user would need to know how to use a terminal, text editor, package manager, as well as understand data types, the DOM, and the box model. That isn't to say this is a bad library, but I question the no code premise.

It might come in handy when building no-code tools, not as a no-code tool per se.

you totally got the point of my title. thanks.

I'm just building a movable dashboard similar to Notion's blocks and this saves me globs of time!

awesome. Please let me know your use-case.

I would feel elated if people can make use of it.

The secret of no code tools is that they are actually for programmers.

haha, agree but not merely for programmers but for technical persons.

@ARandomerDude, thanks for the sharing your perspective.

Then again, I created this library for people who create no-code tools not for who use no-code tools. Though they can also use this. I think, the title I wrote have given a wrong impression, that is, 6 or 9 the same thing. Ha ha.

That is an awesome little demo video. In 10 seconds I understood what the tool does, and it looks pretty useful too.

Thanks for the appreciation, @zeta0134.

happy with the validation :)

This is great. It's always a battle when trying design 'spacing' functionality that respects responsive design.

This is potentially something we could use with Budibase (low-code platform): https://github.com/Budibase/budibase

If there is synergy and Budibase is the type of platform you imagined when building this tool, let me know and we can possibly collaborate.

Glad you liked it, @foxbee :)

I would love to collaborate. Let me know how to connect with you!

I'm still looking into how Budibase works. Looks promising.

This looks super awesome, how well does it handle responsive layouts?

Also great job on the site - the video explains things succinctly in seconds.

Thanks for the appericiation, @jwilber.

I'm still working on the responsiveness of the spacers, though that is rarely needed because you can implement multiple spacers for different screen sizes.

That'll take care of the responsiveness.

I’d love this as part of browser plug-in to modify third party sites and have the changes persist.

I’d combine it with the ability to completely hide elements… The combination would be killer for removing cruft from frequently used sites and web apps.

This has actually been a native feature of Chrome since 2018.

Couldn't find the current docs but here is the release announcement: https://developer.chrome.com/blog/new-in-devtools-65/#overri...

And Chromium Edge's docs: https://docs.microsoft.com/en-gb/microsoft-edge/devtools-gui...

Useful resources. Thanks for sharing!

Very cool, thanks. The nice thing would be the drag and drop functionality. As far as I can tell (I might be wrong) you still have to find the CSS selectors manually using the dev tools which adds a little friction.

that's a cool idea!

hmmm! Let me check what can be done.

What does this have to do with no-code?

The demo makes it easier to understand:

https://actuallyakash.github.io/spacers/

But what do you do with it? So you modify margin and padding client side... and then what? I see what it does, but I don't see what you'd use it for.

Anything you want would be the answer. Like you could have a no code tool for creating websites or anything with a layout

I see now, it’s just a UI library for controlling margin and padding, nothing more? The “no code” talk made me think it was more than that.

It’s cool, but just because it could be used for “no code” I don’t see how it is no code.

It's not actually no-code but "for" no-code tools.

For example - web builders like Divi, brizy or Webflow uses this type of functionality all the time.

There was no library for it. And I was working on a project (a no-code tool) that needed this type of functionality.

that's why I thought, it's high-time now for a spacers library. I created the spacers through backbone.js and jQuery at that project.

But later, I created this library in pure JS (vanilla js).

That how spacers came into existence.

This is the exact point of this project. (y)

I get a 404 error message "Github site not found" message on Chrome, Firefox and Brave browsers using a Galaxy Note 10+.

hey Jonny,

thank you for the info. It was an error at my end. Now it's fixed.

You can check it out. Let me know your feedback. :)

Thanks.

No code tools are made with code

haha, that's a fact.

but this library helps you to make those no-code tools.

Is there any no-code tool that's powerful enough to build itself (self-compilation)?

@kbelder,

this will probably clear up any confusion you have:

https://www.commitstrip.com/en/2016/08/25/a-very-comprehensi...

Apparently, these days, if you make a visual layout editor, you call it no code?

I still think Kelsey Hightower has the only true no code solution

haha, can't agree more with you.

He's the legend. I totally admire his "nocode" tool.

But this library is not a no-code tool but "for" no-code tools.

Thanks for sharing. I dream of making my perfect UX design tool and little things like this help keep me inspired.

Glad you liked it and found useful.

Kudos to your future projects.

It looks just amazing. I hope that this thing will not fail in the case.

Glad you liked it, @slava_kiose

Hoping for the best

Reply on news.ycombinator.com