elementalcode / elemental Goto Github PK
View Code? Open in Web Editor NEWA drag and drop block-based coding environment for front-end web technologies.
Home Page: http://elementalcode.herokuapp.com
A drag and drop block-based coding environment for front-end web technologies.
Home Page: http://elementalcode.herokuapp.com
If the goal of Elemental is to be accessible to people who are interested in web design but know nothing about HTML, we're going to have to show them the ropes ๐
We'll need a couple of simple example webpages, some more complex projects, and a step-by-step guide area (like Scratch's "help" pullout) at least.
Tell me what you think :)
For hashing and stuff - how should we keep it private?
Or stuff we might want to use/learn how to use.
Pure html probably would be easier to work with in general. Maybe I just don't understand django , but I dunno.
For when you don't need a whole issue.
Planning to write it in Django, since I'm pretty familiar with it.
First - please learn Django templating. It'll make everyone's lives easier.
Second - put all your CSS/JS in the static folders. Will explain later...
What are the design goals of Elephantal Elemental?
It's about easing people familiar with Scratch into HTML, of course, but what else. Should it have basic features suitable for "Hello world! My first webpage ๐ ", or should it share the same design principle as Scratch with the whole low floor, wide walls, high ceiling thing? Maybe it'll be helpful to type this up somewhere idk.
Pros to "easy mode" - well, it's much easier to implement, and how the blocks are laid out don't need to be as flexible.
Pros to "wide walls mode" - lets people design professional webpages almost as easily as making a Scratch project.
...meh, meh, I should go to bed before my rambling gets incoherent again ๐
Should I create it now?
For our code (the code used to make elemental, not the code generated by it) can we all agree on a style guide?
My thought was to use Google's HTML/CSS one.
Does anyone have any problems with that?
Right now we're discussing things over comments in github issues, which is working, but I think it's kinda awkward.
Maybe we could use a Trello board or something like Slack.com to discuss things easier. Tell me which one you like. I'm leaning towards Trello.
This is a (incomplete) list of jobs and who is filling them:
If there is a job that isn't in the list that should be added, please post it and I will add it.
Post the job(s) you want to do.
remove projectownership and manytomany on user model
add user foreignkey to project model
use reverse lookup to query for projects
we need a file extension so people can load their projects after they make them
We should think about promotion and advertising for this, like, really early.
This doesn't mean you should change your Scratch signature RIGHT NOW RIGHT NOW to something Elemental-branded - but it does mean we should at least think about what we're gonna do :)
We'll need:
I, for one, will post to /r/web_design when we're done (maybe pay for a Reddit ad, if I have any money) and of course I'll add it to my signature ๐
Thoughts?
How do we want to deal with properties of objects?
My thought was to have infinite inputs, like in the join block from Snap!
Each of these inputs would be "property inputs", which could contain "property blocks". Each property block would have two inputs, and look something like this:
(Images created with Snap! custom blocks and "save scripts pic" in rt. click menu)
The only difference, though, would be that the first input in the property block could must be a dropdown.
You can open it locally without needing to do anything "complicated" :)
Also, you can work on the editor in the dev
branch now so I deleted the ui
branch.
And post your ideas for the WSF here. Some of the ideas going on here are going to be impossible to do, which sucks for me.
What browsers should we support? If we support Chrome, Firefox, Opera, Safari, and IE9, is that enough? Do we need to support versions of IE lower than 9? (I would hope that anyone making webpages wouldn't be using IE...)
What's the overall structure of an HTML file you create with this going to look like?
If you look at the gh-pages demo, the images (search icon & tiled background) aren't showing up. Why is that? (Code for: Someone fix it for me.)
Bamboo, because I love bamboo?
Please?
:P
I figure we should set this up so that I don't hate everyone else's syntax and they don't hate mine. JSON, please?
such as cdnjs.org
eg forums, loves, favorites, comments, etc
Just because we can doesn't mean we should, though.
Kinda like there's seperate tabs for scripts, costumes, and sounds. It'll make stuff a lot easier.
I'm thinking we copy most of what another site has, because I don't want to call a lawyer to review hand-written ToS (though we probably should after modifying whatever ToS we use)
see title.
HTML5 lets you create some prettyreally cool stuff (just check out Riot.js), but we probably shouldn't let people create custom tags (which you can do in "normal" HTML5).
Please edit this post as well as posting a response (unless you delete something - just make it in a strikethrough)
Scratch user infinitytec made us a logo:
What do you guys think?
Send each file individually to the backend via the rest api and save them in a temp folder and package them into a zip or folder once each file has been uploaded
or
Let the front end handle it and package each file into a zip and upload the file to the server. Then validate the content on the backend. (This would be personal choice as it would be easier front end and backend and would allow for complete offline saving of projects without needing to upload them)
SASS is amazing, and we should use it.
But it does require command-line skills... :P
I know we will have html be blocks, and I am pretty sure that CSS will be also, but what about Javascript? It seems that it would be quite complicated to represent JS as blocks...
Just created a Wiki page titled Dev Notes and wanted to let you guys know about it. Be sure to read through the entire thing, and let me know if there's anything that should be added or changed!
If the frontend is powerful, I'm fairly sure I can get this to be a clone of Scratch but teaching HTML/CSS :P (eg users, projects, loves/faves, etc) given enough time (even forums).
Anyways.
What are our theme color(s)? I'm interested in something with green.
Current contenders:
What do you mean I do "weird things" @PullJosh (or whoever wrote it) ?!?
give mods and admins privileges for all below them
Normally I just edit through the GitHub browser. :P
I was going to mention there'd be a problem with uploading images because you can't(?) upload files through the browser, but hey, if we need to upload demo media we can do that later! :P
What's your opinion on using the GitHub code editor in the browser?
Are we going to be using prototyping for the internal code or are we going to use functions on objects?
E.g. I could have something like this..
Workspace
data
as my basic workspace class. Now, to get the source of it, would I have a method of Workspace, like so:
Workspace
data
getSource()
or would I have a function inside of window
, like so:
getSource(a Workspace)
?
This will be handy to know when we're coding, we should absolutely always stick to one of the two ways.
pretty messy right now
Not sure how feasible it is in this type of thing, but it'd be nice to have written tests (or if not, at least some QA testers to make sure things don't break)
I personally am trying to write as many tests as possible for the backend (eg account settings and user registration)
So, we have discussed how we should implement blocks and how they should approximately look but not what type and the function of each. Yes I know, this already has been done in the forums but I have another Idea which in my opinion is easier and cleaner to implement.
So, I have to ideas for blocks:
We have two main blocks, a container block and a text entry block.
The container block would be a c block with a drop down of all available tags, then a byob expandable list where another type of block would go into, this block would be an attribute block (more on this later). The colour of the C block should change according to what tag has been selected.
The next entry block would be a very simple block with a textbox inside. This is to allow text to be entered. for example, you could have a paragraph tag as the C block and then inside of that C block, you would have a multi-line text entry block.
The third type is like an operator block inside of scratch, but they would only fit inside of C tag blocks. They would have a drop down of all possible attributes and a textbox for the attribute value. We could implement a separate class block but this would complicate things.
On another tab somewhere in the editor we could have a create a block and create an attribute button. Similar to creating a variable in scratch. They new attribute or tag would become available in the drop down in the respected area.
This would look somthing like this:
---------------------------------------------
| [dropdown] ( [Attribtute]=' ') +|
| |-----------------------------------------
| |
| |
| |
| |-----------------------------------------
| Automagicly insert end tag here |
---------------------------------------------
Instead of having a drop down, you can have a tag block. This would fit into the first slot of the C block where the drop down would be. The tag blocks would then be sorted in the palettes. When we do this, you would need to choose which category a tag belongs to when creating it.
Using scratch blocks: https://scratch.mit.edu/discuss/topic/134554/?page=17#post-1242024
The other option would be to have one block per tag. and have the same attribute creation system. This would fill up the block selection thing much quicker though and it would be much simpler to just have a smaller (<div>)
block instead of having
---------------------------------------------
| <div> |
| |-----------------------------------------
| |
| |
| |
| |-----------------------------------------
| </div> |
---------------------------------------------
for every single block.
As we are going to be saving the files as json anyways, Id also recommend custom blocks. These would allow users to create snippets they use often and use those as custom blocks instead of having to create the same part over and over again
I think I should get a reward for making these beautiful ascii art c blocks! :D
Seperate the two ends and use a rest api to send data between the two
Adding integration for our tests.
who deleted my far-future tag...
anyways
Post here if you want to be a mod/admin when the site is built out more, create an account on the site, and tell me the account's name. I shall deem whether or not you are worth to be an admin or mod.
I know nothing about it so the question here will be stupid.
Anyways, we store SCSS in the workspace.
But when you export it, does it compile it into css or keep it as a scss file?
Backend isn't doing anything right now besides make it super hard for people to actually run and test the thing.
Flat html/js/css files for now, add backend later / in a seperate branch (not the master branch, ugh)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.