A drag and drop block-based coding environment for front-end web technologies.

README
Issues 21

Editor Demo: http://elementalcode.herokuapp.com/projects/editor
Website Demo: http://elementalcode.herokuapp.com/

A drag and drop block-based coding environment for front-end web technologies.

Scratch Forums topic: https://scratch.mit.edu/discuss/topic/134554/

Project Goal

The goal of Elemental is to act as a bridge between Scratch and front-end web technology. Any and all design decisions will focus on teaching how to write clean, easy-to-read, valid front-end code. There should be as little opportunity for error as possible, thus bridging the syntax gap. Users of Elemental should not be expected to continue using Elemental once they become advanced users. Instead, they should be encouraged to convert to text-based code, for a quicker, more powerful, and more extensible coding experience.

Developers

PullJosh

does things

Firedrake969

other people's things

BookOwl

neat things

TheInitializer

cool things

an-OK-squirrel

no things

=======

Dev Notes

If you're an Elemental Dev, be sure to read the Dev Notes to get up to speed on the rules and regulations for creating with the ElementalCode team. Happy coding! :)

21 Open More issues

Closed

Site admins and mods

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.

help wanted major

opened Jul 26, 2015 by matthewr6 248

Closed

How are we going to implement the blocks?

see title.

frontend major planning question

opened Jul 21, 2015 by BookOwl 244

Closed

Site Design

Current demo: http://codepen.io/PullJosh/pen/dogjOX

I talked a bit about this on the UI issue, #1, but I figured it really deserved its own topic.

The game plan, in case anyone is confused, is to have the site work a bit like scratch. There's a homepage that explains what elemental is and how it's helpful, and a link to the editor (the "UI", as I've been refering to it in the past.) That editor can be used by anyone, but projects can only be shared if you're signed up on the site.

I've made the UI, or at least a good portion of it. Now I'm beginning work on the site's homepage. I'll be using codepen so that the link at the top of this issue will always point to the latest version. Feel free to check it out, and let me know what you think. :)

opened Jul 28, 2015 by PullJosh 209

Closed

Layout (UI)

A big thing we need to figure out is the UI. What is the interface going to look like? Here are a few mockups, copy + pasted from the Scratch Forums.

^{^ The detail is much appreciated}

^ Click to zoom

frontend major planning

opened Jul 17, 2015 by PullJosh 126

Closed

Please people make the guy writing the WSF's life easier

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.

frontend help wanted major planning

opened Jul 25, 2015 by an-OK-squirrel 119

Closed

Quick questions

For when you don't need a whole issue.

quick question

opened Jul 20, 2015 by an-OK-squirrel 95

Open

Make it clear that "Open" is for project files, add HTML import feature

The option to open files is present, yet the file selected does not open.

block editor

opened Jun 12, 2017 by infinitytec 3

Open

Dropping block in palette only works when directly over trashcan – bad?

Ideally we'd be able to simply drag a block to anywhere in the block palette and have it be deleted. That's how Scratch and just about every other block editor I've seen works.

..I think this would fit a "misfeature" tag well. 📦

block editor misfeature

opened May 6, 2017 by towerofnix 4

Open

Dropping block while cursor is above another block doesn't hide trashcan in palette

Dropping the block anywhere else works fine, though (even dropping the block outside of the scripting area).

block editor bug

opened May 6, 2017 by towerofnix 0

Open

Highlighting 2

All the changes you loved about #262, now without the extra commits!

This implements the highlighting from #255 with some improvements:

[x] prettier highlighting for the blocks with rounded edges
[x] highlight both at the same time
[x] turn it on or off in the new View menu

in progress

opened May 5, 2017 by mrjacobbloom 0

Open

Search-bar behind blocks

Is this the intended behaviour? If not, it is easily fixable by adding z-index: 1; to #searchBar in the CSS.

block editor

opened Apr 18, 2017 by iamunknown2 3

Open

[mockup] block and element highlighting

I had an epiphany a couple hours ago and threw together this mockup: I have code that works but it's dependent on #249 and could use some refinement

block editor input wanted

opened Apr 17, 2017 by mrjacobbloom 8

Information

Category: Python / Miscellaneous
Watchers: 18
Star: 35
Fork: 10
Last update: Jul 30, 2021

Resource links

http://elementalcode.herokuapp.com

https://github.com/ElementalCode/Elemental

Share this repo

Related Repos

Miscellaneous

589

Playing with the Tigress binary protection. Break some of its protections and solve some o...

Tigress Protections Tigress is a diversifying virtualizer/obfuscator for the C language that supports many novel defenses against both static and dynamic reverse engineering and de-virtualization attacks. In particular, Tigr

Miscellaneous

223

:flower_playing_cards: Standard and acceptable badges list

badges To make badges more standard and acceptable. Alternative: default, flat-square. A collection of badges designed for personal repositories, and I hope that all of these badges can be widely accepted and used in

Miscellaneous

199

Small utility library for coroutine-driven asynchronous generic programming in Python 3.4+

paco Small and idiomatic utility library for coroutine-driven asynchronous generic programming in Python +3.4. Built on top of asyncio, paco provides missing capabilities from Python stdlib in order to write asynchrono

Miscellaneous

Elegant iTerm2 theme with bright colors

iterm2-snazzy Elegant iTerm2 theme with bright colors Install Right-click Snazzy.itermcolors and choose Save Link As…. Double-click the downloaded file. Tip To get the exact same look as in

Miscellaneous

3.4k

Import arbitrary code from Stack Overflow as Python modules.

StackOverflow Importer Do you ever feel like all you’re doing is copy/pasting from Stack Overflow? Let’s take it one step further. from stackoverflow import quick_sort will go through the search results of [pyth

Miscellaneous

A search tool for IDA

IDSearch Search IDA databases like a boss. What is IDSearch? IDSearch is a pythonic search tool for IDA (Interactive Disassembler). It allows searching text and data quickly in big databases. It also allows combinat

Miscellaneous

1.1k

RedSnarf is a pen-testing / red-teaming tool for Windows environments

______ .____________ _____ \______ \ ____ __| _/ _____/ ____ _____ ________/ ____\ | _// __ \ / __ |\_____ \ / \\__ \\_ __ \ __\ | | \ ___// /_/ |/ \ | \/ __ \| |

Miscellaneous

Python hooks for methods

PyHooks PyHooks is meant to expose method hook for classes Status This project is maintained, feel free to open issues or pull requests. Purpose Have you ever wanted to execute code before or af