5 ms·
Show HN: SpacersJS – My first JavaScript Library for no-code tools
- jtwaleson 5y agoWhat does this have to do with no-code?
- stevekemp 5y agoThe demo makes it easier to understand: https://actuallyakash.github.io/spacers/ https://actuallyakash.github.io/spacers/
- nkrisc 5y agoBut 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.
- chovybizzass 5y agodude its no code....stop asking questions! /S
- barefeg 5y agoAnything you want would be the answer. Like you could have a no code tool for creating websites or anything with a layout
- nkrisc 5y agoI 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.
- actuallyakash 5y agoIt'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.
- actuallyakash 5y agoThis is the exact point of this project. (y)
- jonnydubowsky 5y agoI get a 404 error message "Github site not found" message on Chrome, Firefox and Brave browsers using a Galaxy Note 10+.
- actuallyakash 5y agohey 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.
- barefeg 5y agoNo code tools are made with code
- actuallyakash 5y agohaha, that's a fact. but this library helps you to make those no-code tools.
- kbelder 5y agoIs there any no-code tool that's powerful enough to build itself (self-compilation)?
- actuallyakash 5y ago@kbelder, this will probably clear up any confusion you have: https://www.commitstrip.com/en/2016/08/25/a-very-comprehensive-and-precise-spec/ https://www.commitstrip.com/en/2016/08/25/a-very-comprehensi...
- verdverm 5y agoApparently, 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
- actuallyakash 5y agohaha, 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.
- ARandomerDude 5y ago``` 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.
- dschooh 5y agoIt might come in handy when building no-code tools, not as a no-code tool per se.
- actuallyakash 5y agoyou totally got the point of my title. thanks.
- yawnxyz 5y agoI'm just building a movable dashboard similar to Notion's blocks and this saves me globs of time!
- actuallyakash 5y agoawesome. Please let me know your use-case. I would feel elated if people can make use of it.
- zeroonetwothree 5y agoThe secret of no code tools is that they are actually for programmers.
- actuallyakash 5y agohaha, agree but not merely for programmers but for technical persons.
- zeta0134 5y agoThat is an awesome little demo video. In 10 seconds I understood what the tool does, and it looks pretty useful too.
- actuallyakash 5y agoThanks for the appreciation, @zeta0134. happy with the validation :)
- mthoms 5y agoI’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.
- chovybizzass 5y agocheckout https://briskreader.com https://briskreader.com
- krono 5y agoThis 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/#overrides https://developer.chrome.com/blog/new-in-devtools-65/#overri... And Chromium Edge's docs: https://docs.microsoft.com/en-gb/microsoft-edge/devtools-guide-chromium/workspaces/ https://docs.microsoft.com/en-gb/microsoft-edge/devtools-gui...
- actuallyakash 5y agoUseful resources. Thanks for sharing!
- mthoms 5y agoVery 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.
- actuallyakash 5y agothat's a cool idea! hmmm! Let me check what can be done.
- jwilber 5y agoThis looks super awesome, how well does it handle responsive layouts? Also great job on the site - the video explains things succinctly in seconds.
- actuallyakash 5y agoThanks 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.
- apineda 5y agoThanks for sharing. I dream of making my perfect UX design tool and little things like this help keep me inspired.
- actuallyakash 5y agoGlad you liked it and found useful. Kudos to your future projects.
- mikeryan 5y agoSo 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.
- actuallyakash 5y agoHey @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.
- slava_kiose 5y agoIt looks just amazing. I hope that this thing will not fail in the case.
- actuallyakash 5y agoGlad you liked it, @slava_kiose Hoping for the best
- foxbee 5y agoThis 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 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.
- actuallyakash 5y agoGlad 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.