Home / Python / Miscellaneous

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

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.m
Information
Category: Python / Miscellaneous
Watchers: 18
Star: 35
Fork: 10
Last update: Jan 29, 2023
Resource links
http://elementalcode.herokuapp.com
https://github.com/ElementalCode/Elemental

image

Stories in Ready

Join the chat at https://gitter.im/ElementalCode/Elemental

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.

question planning major frontend 
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.

image ^ The detail is much appreciated

image

image

image

image ^ Click to zoom

planning major frontend 
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.

help wanted planning major frontend 
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).

bug block editor 
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

hl

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: out 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

Contents

    jsplumb Lightweight drag/drop handler, supporting containment, multiple element drag, custom css classes, drop filters, drag filters.
    james2doyle A for Vue.js directive for providing drag and drop capabilities to elements and data
    HerMajestyDrMona "Windows 11 Drag & Drop to the Taskbar (Partial Fix)" partially fixes the missing "Drag & Drop to the Taskbar" support in Windows 11. It works with the new Windows 11 taskbar and does not require nasty changes like UndockingDisabled or restoration of the classic taskbar.
    HerMajestyDrMona "Windows 11 Drag & Drop to the Taskbar (Partial Fix)" partially fixes the missing "Drag & Drop to the Taskbar" support in Windows 11. It works with the new Windows 11 taskbar and does not require nasty changes like UndockingDisabled or restoration of the classic taskbar.
    acheronfail A front-end for the xi-editor built with modern web technologies.
    wengerwu BFBaas Platform provides block chain serives to clients, assits industries to set business on block chain, and excavates commercial values of block chain.
    emiliorizzo vue-dialog-drag - Draggable dialog
    yangyxd Flutter Image add drag sort, Image add drag sort, support click event, delete, add, long press drag sort.
    FrontendMasters The Front-End Developer Learning Roadmap by Frontend Masters
    jongacnik Kirby block preview plugin to directly render block fields
    Esvalirion vue-drag-it-dude - Vue2 component, that allows you to drag object wherever you want.
    iPaulPro Basic example of using ItemTouchHelper to add drag & drop and swipe-to-dismiss to RecyclerView.
    ernestoyaquello Kotlin Android library that extends RecyclerView to support gestures like drag & drop and swipe, among others. It works with vertical, horizontal and grid lists.
    Vivify-Ideas vue-draggable - Vue Drag and Drop library without any dependency. Simple and easy to use.
    akserg Angular 2 Drag-and-Drop without dependencies
    nevyn [iOS/deprecated!] Stop using context menus. Drag and drop instead, even between apps!
    erinnmclaughlin Blazor WebAssembly app demonstrating real-time SignalR updates with drag and drop functionality.
    tonsky Sane wrapper around Drag-n-Drop DOM API
    FrontendMasters 2017 edition of our front-end development guide
    mhogomchungu zuluCrypt is a front end to cryptsetup and tcplay and it allows easy management of encrypted block devices
    sindresorhus Block users from running your app with root permissions
    Share this repo

    Related Repos


    Miscellaneous
    100
    Playpen is a set of modern, gas optimized staking pool contracts.
    ZeframLou Playpen Playpen is a set of modern, gas optimized staking pool contracts. Features Support for both ERC20 staking and ERC721 staking Can start new rew
     
    Miscellaneous
    47
    DIAL(Did I Alert Lambda?) is a centralised security misconfiguration detection framework w...
    CRED-CLUB DIAL Workloads on cloud provide equal opportunities for hackers as much as they do for internal teams. Cloud-native companies are open to attacks from
     
    Miscellaneous
    42
    Code for "Semantic-Aware Implicit Neural Audio-Driven Video Portrait Generation"
    alvinliu0 Semantic-Aware Implicit Neural Audio-Driven Video Portrait Generation Code for "Semantic-Aware Implicit Neural Audio-Driven Video Portrait Generation"
     
    Miscellaneous
    40
    IDA Frida Plugin for tracing something interesting.
    P4nda0s IDAFrida A simple IDA plugin to generate FRIDA script. Edit template for functions or you can use the default template. Select functions you want to t
     
    Miscellaneous
    15
    https://t.me/master_thyself
    evmn Know Thyself 中文版 Chinese Title Authors Mind Hacks 刘未鹏 编程随想: 2009 ~ 2021 Blog Archives Program Think 晚点 LatePost 宋玮…… English Blogs Title Authors Essay
     
    Miscellaneous
    717
    a Jupyter kernel for Clojure
    clojupyter A Jupyter kernel for Clojure - run Clojure code in Jupyter Lab, Notebook and Console. Table of Contents Getting Started Installation Usage Scenarios -
     
    Miscellaneous
    132
    using your namespace as a notebook
    scicloj notespace Notebook experience in your Clojure namespace What is it? This tool is an attempt to answer the following question: can we have a notebook-l
     
    Miscellaneous
    794
    Python bindings for Clojure
    clj-python Deep Clojure/Python Integration Version Info New Versions Are HOT! Huge New Features! You Can't Afford To Miss Out! API Documentation Java API - you c
     
    Miscellaneous
    78
    Turn data into functions! A simple and functional machine learning library written in elix...
    mrdimosthenis emel Turn data into functions! A simple and functional machine learning library written in elixir. Installation The package can be installed by adding
     
    Miscellaneous
    6
    An optional component handler for hikari, inspired by discord.py's views.
    HyperGH hikari-miru An optional component handler for hikari, inspired by discord.py's views. Installation pip install git+https://github.com/HyperGH/hikari-m
     
    Miscellaneous
    5
    TikTok 4L and 4C checker that doesn't count banned usernames as available
    cliphd TikTok 4L and 4C checker that doesn't count banned usernames as available. Once a username is available, it will send it to your Discord Webhook
     
    Miscellaneous
    4
    TBOT Binance Smart Chain token
    TBOT-Project tbot-bsc-token TBOT Binance Smart Chain token Minting transaction: https://bscscan.com/tx/0xd387a96ac15a616f9b17bf9af84d63fd54de98e176a55bf11bb4f08855
     
    Miscellaneous
    4
    notes on reusable p5.js coding patterns
    M0nica p5.js Notes on random p5.js coding patterns Table of Contents Positioning Elements Responding to User Input Positioning Elements centering elements fu
     
    Miscellaneous
    3
    smart contracts for the implementation of a networked money stream using the ERC1155 stand...
    phydy MoneyStreamNetwork #Short Description A Tradable Cash-Flow DeFi-NFT that gives a holder the power to leverage their superfluid flow to get loans or fu
     
    Miscellaneous
    3
    Fb token and cookie making tools
    niloy0 🥀 🍁 ASSALAMU WALAYKUM 🥰 🥀 🥀 😻 🌺 HI I AM N!LOY 🥀 😘 😻 ! 🥀 😻 WELCOME TO MY PROFILE 🥰 MY PROFILE VISITORS : GITHUB STATES : CONTACT WITH ME :