Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Share code with Silex #13

Closed
lexoyo opened this issue Mar 18, 2016 · 47 comments
Closed

Share code with Silex #13

lexoyo opened this issue Mar 18, 2016 · 47 comments

Comments

@lexoyo
Copy link
Contributor

lexoyo commented Mar 18, 2016

Hi @artf

Great project ! It is a different approach than Silex which is all about absolute positioning, but it has a common ground. As the main developer of Silex, I believe we could get organized and share some code! :)

I'm thinking Silex could use your great Style Manager if we make it an npm module. And if you want I could help you integrate Cloud Explorer to manage files like or you can use Responsize if you want your users to preview the page (if you are interested, then I should add the ability to give it the HTML instead of an URL)

Do not hesitate if you see something we can share :)

@budislav
Copy link

I think Grapesjs and Silex should be merged into one project. Both of projects have a common ground and same goals. I think there is no space on the world for two same open source projects. World need only one most powerful open source web designer tool, like Blender in 3d world.

For example you have five digital audio workstation (ardour, lmms, rosengarden, muse, qtractor). Every of them have something nice but none of them have all necessary things and never will. Don't make the same mistake. Krita and Gimp is also one of many examples. I am always for bonding of strength and this two projects are excellent chance for this.

@artf I proposed new mockup for silex based on this system. http://enjoycss.com/59e/1
I see Grapesjs looks so much as Webflow which I think is the best web designer tool today (the most complete and smartest). Visit a page from bellow to see what we want to accomplish. It is the same thing as Grapesjs and Webflow. So why not join forces to achieve the same goal.

silexlabs/Silex#387

@artf
Copy link
Member

artf commented Mar 21, 2016

Hi @lexoyo and @budislav thanks for your advice. Silex is awesome, I've never heard about it, love how easily you can design stuff, unfortunately absolute approach doesn't fit very well with dynamic contents :(

Decouple modules, like Style Manager, from GrapesJS would be definitely a goal but not now as the project is pretty far from being complete. I do my best, at the expense of my spare time, to bring it forward and will take care about it, so we could merge best of our projects :)

Anyway if you already want to check my code and there is something not clear don't hesitate to ask me

@lexoyo
Copy link
Contributor Author

lexoyo commented Mar 21, 2016

👍

Indeed we have the absolute vs positioned approaches which are 2 important choices. At one point Silex will offer lists and containers with positioned content and a flow, and grapejs will probably have a way to have absolute positioning too

Meanwhile it is clear to me that free software needs both :)

@budislav
Copy link

@lexoyo @artf
This flexbox system is more than awesome. Someone really need to implement this.
https://flexbox.webflow.com/?utm_campaign=flexlaunch&utm_source=newsletter&utm_medium=email

@lexoyo
Copy link
Contributor Author

lexoyo commented Apr 13, 2016

@budislav this is a really nice feature
Do you think they will do something to support older browsers? (see the browser compatibility of flexbox on mozilla's docs)

@lexoyo
Copy link
Contributor Author

lexoyo commented Apr 13, 2016

@artf I started to work on a new version of the stage component for Silex
https://github.com/lexoyo/stage

@budislav
Copy link

@lexoyo I think they will not. Personally I don't care about those users who use older browsers. Everyone on the web should need to have up to date web browser. Also every browser today have automatic update so that problem is gone. The progress of mankind should not stop because of older browsers and these users if they exist.

@artf
Copy link
Member

artf commented Apr 18, 2016

@budislav wow that's cool!!!
I would definitely try to add it to the demo, maybe not so sophisticated but something similar.
Anyway I'm totaly agree with you about older browsers.
@lexoyo will keep eye on it ;)

@artf
Copy link
Member

artf commented Apr 18, 2016

Not perfect but seems to work http://grapesjs.com/demo.html

@budislav
Copy link

budislav commented Apr 19, 2016

@artf wow, this escalated quickly :) Nice work!!

@lexoyo
Copy link
Contributor Author

lexoyo commented Apr 19, 2016

That is great!

Stage is made to support drag/drop/resize elements in the flow as well as positioned in absolute
https://github.com/lexoyo/stage

Also I will make a live demo of Silex in a few hours
https://www.silexlabs.org/event/silex-webinar-1-eng/

And here is the crowd funding campaign which will start in a few days
http://crowdfunding.silex.me/

That would be great to have you there and please let people know about it

Thx!

@artf
Copy link
Member

artf commented Apr 20, 2016

@lexoyo 'in the flow as well as positioned in absolute' this is hot :)
Anyway why not pick one of already well-known crowdfunding platform? I think you'll get more visibility there

@lexoyo
Copy link
Contributor Author

lexoyo commented May 4, 2016

@lexoyo 'in the flow as well as positioned in absolute' this is hot :)

like sex and coffe, that's why it's good 😍
I'm working on it but a proof of concept is already running
If absolutely positioned it just moves the element, otherwise it make it absolute while dragging and put it back in the flow on drop

the only thing I'm realizing now is that I'll need to handle click on the body and not use event.target to know where it clicks because I'll probably want to display a bootstrap-style grid on top of the stage in some cases... What do you think?

Anyway why not pick one of already well-known crowdfunding platform? I think you'll get more visibility there

it was only a teasing website to get mail adresses, but now it is on ulule:
http://crowdfunding.silex.me/

@artf
Copy link
Member

artf commented May 4, 2016

@lexoyo

If absolutely positioned it just moves the element, otherwise it make it absolute while dragging and put it back in the flow on drop

Yeah, I was already thinking about something similar :)

the only thing I'm realizing now is that I'll need to handle click on the body and not use event.target to know where it clicks because I'll probably want to display a bootstrap-style grid on top of the stage in some cases... What do you think?

What do you mean with 'display a bootstrap-style grid on top'? Something like a grid for snapping?
Anyway how could you catch clicked element without event.target? I use Event Delegation to speed up performances with many nested components inside and without e.target it seems impossible for me

@lexoyo
Copy link
Contributor Author

lexoyo commented May 5, 2016

the only thing I'm realizing now is that I'll need to handle click on the body and not use event.target to know where it clicks because I'll probably want to display a bootstrap-style grid on top of the stage in some cases... What do you think?

What do you mean with 'display a bootstrap-style grid on top'? Something like a grid for snapping?
Anyway how could you catch clicked element without event.target? I use Event Delegation to speed up performances with many nested components inside and without e.target it seems impossible for me

Maybe it is too early to think about it... But yes, at one point we will have to display things on top of the stage, like a bootstrap grid (like this @budislav ;) ?):

bootstrap grid on top of the stage

Then there will be no other way than computing the target with something like document.elementsFromPoint(x, y)
https://developer.mozilla.org/en-US/docs/Web/API/Document/elementsFromPoint

Anyway feel free to make issues on the stage project, with features you would like or constructive critics on the code, I will definitely appreciate it!
https://github.com/lexoyo/stage/

@budislav
Copy link

budislav commented May 5, 2016

Maybe it is too early to think about it... But yes, at one point we will have to display things on top of the stage, like a bootstrap grid (like this @budislav ;) ?):

Nice! Absolutely!

@artf
Copy link
Member

artf commented May 6, 2016

@lexoyo
Didn't know about elementsFromPoint method, pretty nice, although it's an experimental feature.

I would suggest you to simply use 'pointer-events: none;' to detach events so you should be able to interact with elements below that layer.

@lexoyo
Copy link
Contributor Author

lexoyo commented May 6, 2016

Nice! 'pointer-events: none;' is better indeed! 👍

@lexoyo
Copy link
Contributor Author

lexoyo commented May 7, 2016

I hope you don't feel like I spam you both with my "stage" component... Maybe I should stop here, but I would love someone to review my code as I just created this PR to add the "draw region" feature.

Also a "strategic" question here about wether the UI should live in the same DOM as the elements.

@budislav
Copy link

budislav commented May 8, 2016

I don't mind. I like to see all news about the project, although I do not understand so many technical terms.

@artf
Copy link
Member

artf commented May 10, 2016

@lexoyo absolutely not, I'd like to have more time to get in touch with other stuff

@lexoyo
Copy link
Contributor Author

lexoyo commented May 12, 2016

👍 great spirit :D
I have had new ideas to discuss, I will put them soon in the issues of stage

@Immortalin
Copy link

It's amazing how advanced both tools are. With a bit more polish, and perhaps bundling them into a desktop tool with electron, you guys could give Pinegrow and Macaw some serious competition! :D

@artf
Copy link
Member

artf commented Jun 14, 2016

thanks @Immortalin hope so :)
Anyway soon I'll release a version with some new feature, especially an improvement to reduce configurations.

@Immortalin
Copy link

https://github.com/voidlabs/mosaico

@artf
Copy link
Member

artf commented Jun 23, 2016

@Immortalin nice tool, thanks.
Anyway, I pushed some new updates to the main demo, hope to document it soon :)

@WebCrew
Copy link

WebCrew commented Oct 3, 2016

@artf I`m lookinf forward to the new update. By the way, I like Your grapejs a lot. Keep up the good work and thank You for that nice piece of software.

@artf
Copy link
Member

artf commented Oct 3, 2016

thanks @WebCrew It means a lot for me and I really appreciate it.
Unfortunately I have less time for GrapesJS in this period but hope to back to work soon

@WebCrew
Copy link

WebCrew commented Oct 3, 2016

Time is always a issue with which we have to deal with. 😂 I wish you would
find some other githubers to help with the development. Your graphejs is in
many ways easier to handle as some of the other competitors out there. I also like your whole layout a lot more.
I try to get it working with HumHub CMS as a backend template editor module.
I wish you good luck and much success. 🙌😊

Am 03.10.2016 15:01 schrieb "Artur Arseniev" notifications@github.com:

thanks @WebCrew https://github.com/WebCrew It means a lot for me and I
really appreciate it.
Unfortunately I have less time for GrapesJS in this period but hope to
back to work soon


You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#13 (comment), or mute
the thread
https://github.com/notifications/unsubscribe-auth/AMYm0yoY9BMeZvG2kPKsBxEbAAo4CXUlks5qwPy4gaJpZM4Hz-uB
.

@artf
Copy link
Member

artf commented Oct 3, 2016

Thanks again @WebCrew I'm very glad you like it :)

@Immortalin
Copy link

@WebCrew I have started a project turning grapesjs into a standalone editor using electron: https://github.com/Immortalin/Merlot

@artf
Copy link
Member

artf commented Oct 5, 2016

@Immortalin niiiiice :)
I also like the name 😂

@Immortalin
Copy link

@artf you might want to take a look at contentbuilder.js and this thread

@Immortalin
Copy link

And also the Odoo builder (AGPL)

@artf
Copy link
Member

artf commented Oct 24, 2016

thanks @Immortalin I had never heard about contentbuilder.js, seems clean and easy to use

@Immortalin
Copy link

@artf https://github.com/abdullah/plekan

@Immortalin
Copy link

@artf https://github.com/tandemcode/tandem

@artf
Copy link
Member

artf commented Jan 31, 2017

Different targets but really impressive work, thanks @Immortalin

@Immortalin
Copy link

@artf https://huu.la/

@Immortalin
Copy link

@Immortalin
Copy link

@sfkazmi
Copy link

sfkazmi commented Sep 6, 2018

@artf Did you implemented absolute positioning in grapes??

@Immortalin
Copy link

@artf congrats on shipping grapesdrop! 😄

@artf
Copy link
Member

artf commented Sep 18, 2018

Thanks @Immortalin I hope it will bring more improvements on GrapesJS itself :)

@lexoyo
Copy link
Contributor Author

lexoyo commented Mar 31, 2019

hello all

really great resources in this list

i still find it a bit sad that no one is collaborating... all these projects are still not sharing components, and silex is the worst i know. I have made efforts to split it so that we can collaborate

also i though about using grapejs or Vvveb to make a completely new version of silex, keeping the page management, the publication to jekyll and the cloud services (dropbox/sftp/githun/nextcloud). it would be great but the fact that all these website builder frameworks are very "close to the css" is against Silex philosophy which lets you start like with simple drag/drop (absolute) and then go to a text editor progressively

the effort of splitting silex so that we could collaborate has begun with this thread in 2016, and here are the projects we have made from scratch and then integrated in silex (@JbIPS, @clemos and me mostly, with UX help from @budislav, @ceubri and @suddenheroes)

  • Unifile, cloud storage services through a simple web API
  • Cloud Explorer, online file browser
  • Stage, a stage component to add a drag and drop to your project
  • Resonsize, preview websites at different sizes
  • Prodotype, framework to generate ReactJS UIs for your components
  • There is also an alpha, still in Silex for now of a utility to publish static websites to several hosting such as (for now) github pages and https://indie.host/

open source contributors let's pull it together ! if you see any use for these components in your project, please ask for a tour and let's work together ;)

Comments & ideas always welcome
🥇 🥇 🥇 🥇

@artf
Copy link
Member

artf commented Apr 2, 2019

Hi @lexoyo I'm glad to see you here again, honestly, I totally understand your point of view and even the disappointment in regard to our collaboration. IMHO we share some points of a common goal but we lead 2 different kinds of products. Silex is still an application to build websites, GrapesJS is a framework to build generic web builders (websites, newsletters, etc.).
I've created quite isolated helpers (eg. Dragger, Resizer) that I could easily publish in another repository and let them live their own life, but unfortunately, this will expose them in a totally different context/domain of use and sooner or later GrapesJS will bring a lot of not necessary functionality. So for me it's really important to keep the framework as lean as possible and if I need to bring external code it should be only functional, without any kind of UI.

BTW I'm gonna close this issue because there is no need to keep it open.

@artf artf closed this as completed Apr 2, 2019
@lock
Copy link

lock bot commented Apr 2, 2020

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

@lock lock bot added the outdated label Apr 2, 2020
@lock lock bot locked as resolved and limited conversation to collaborators Apr 2, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

6 participants