Discuss Scratch

scimonster
Scratcher
1000+ posts

Collab between me and Hardmath

UPDATE:
Once again, we had a different idea (well, Hardmath did at least, and i liked it). "[A] simple Unix-like system in JS". Now the syntax is becoming more Scheme-like, though. Start at the linked post for more info on it.


UPDATE:
We've changed our design goals.

Now we're still planning to do an IDE, but with a different way. Check out page 4 for more.

original post wrote:

(Continued from wiki.)

So, i think what we'll do is the HTML/CSS IDE. I'll give a general layout plan for my idea:
http://imgur.com/aO149Rj
Obviously it's pretty sketchy.

We would use jQuery and jQueryUI, perhaps along with RaphaelJS. CSS would implement some LESS features.

HTML categories could be something like: block elements (p, div, article, header); inline elements (a, span, img, b); table elements (table, tbody, td, tr); form elements (form, input, button, option); meta elements (html, head, meta, link, script); interactive elements (object, script, canvas, audio); other elements (whatever's left); and entities ({; į; &lt (this would include a generated-on-the-fly character map).
Once you had an element block, you could add attributes. For some, it would have some defaults (e.x. <form> would have method and action; <script> would have type). At the end, there would be a dropdown menu listing all of the available attributes for the element, perhaps categorized a bit (event, standard, specific).
With colors, we could have a colorpicker.
Perhaps at some point we could have nice editors for each CSS property.

How does this sound?

Last edited by scimonster (Aug. 29, 2013 07:53:31)


Retired Community Moderator
BTW, i run Google Chrome 41.0.2272.101 on a Linux system - Ubuntu 14.04. NEW: iPad 4th gen. w/retina.

418 I'm a teapot (original - to be read by bored computer geeks)
THE GAME (you just lost)
; THE SEMICOLON LIVES ON IN OUR SIGS
DigiTechs
Scratcher
500+ posts

Collab between me and Hardmath

What's this for?

o.o

I've only just heard of this.

I do, in fact, have my own site; it's here.
I'm also working on a thing called Fetch. Look at it here!
@thisandagain pls explain. @thisandagain pls explain. @thisandagain pls explain. @thisandagain pls explain. @thisandagain pls explain.
veggieman001
Scratcher
1000+ posts

Collab between me and Hardmath

Nothing is permanent.

Last edited by veggieman001 (July 17, 2013 01:21:25)


Hardmath123
Scratcher
1000+ posts

Collab between me and Hardmath

Cool. It's an unearthly hour here, so ill read in more detail a little later (whenever I get Internet access–I'm flying).
scimonster
Scratcher
1000+ posts

Collab between me and Hardmath

Hardmath123 wrote:

Cool. It's an unearthly hour here, so ill read in more detail a little later (whenever I get Internet access–I'm flying).
Lol. No need to even post then.

Up in the tools, we should also have settings.
(You should open stuff to read before getting on the plane. )

Retired Community Moderator
BTW, i run Google Chrome 41.0.2272.101 on a Linux system - Ubuntu 14.04. NEW: iPad 4th gen. w/retina.

418 I'm a teapot (original - to be read by bored computer geeks)
THE GAME (you just lost)
; THE SEMICOLON LIVES ON IN OUR SIGS
DigiTechs
Scratcher
500+ posts

Collab between me and Hardmath

So this is a website developer with realtime updating visualisation?

Nice.

I do, in fact, have my own site; it's here.
I'm also working on a thing called Fetch. Look at it here!
@thisandagain pls explain. @thisandagain pls explain. @thisandagain pls explain. @thisandagain pls explain. @thisandagain pls explain.
scimonster
Scratcher
1000+ posts

Collab between me and Hardmath

DigiTechs wrote:

So this is a website developer with realtime updating visualisation?

Nice.
Yes. I plan on it being for people who don't want to learn all of the ins and outs of HTML and CSS, but still want to create a nice-looking webpage, without using a website builder, which very often makes it difficult to use anything but their themes and layouts.


We need a name for the program. EasyWeb Builder? (Ignore this.) IDK…

Retired Community Moderator
BTW, i run Google Chrome 41.0.2272.101 on a Linux system - Ubuntu 14.04. NEW: iPad 4th gen. w/retina.

418 I'm a teapot (original - to be read by bored computer geeks)
THE GAME (you just lost)
; THE SEMICOLON LIVES ON IN OUR SIGS
roijac
Scratcher
100+ posts

Collab between me and Hardmath

something like jsfiddle?
scimonster
Scratcher
1000+ posts

Collab between me and Hardmath

roijac wrote:

something like jsfiddle?
A bit, but much better.

Retired Community Moderator
BTW, i run Google Chrome 41.0.2272.101 on a Linux system - Ubuntu 14.04. NEW: iPad 4th gen. w/retina.

418 I'm a teapot (original - to be read by bored computer geeks)
THE GAME (you just lost)
; THE SEMICOLON LIVES ON IN OUR SIGS
mythbusteranimator
Scratcher
1000+ posts

Collab between me and Hardmath

veggieman001 wrote:

DigiTechs wrote:

What's this for?

o.o

I've only just heard of this.
Go have a look at Hardmath's talk page on the wiki if you want background.
Linky?

I've been listening to…
Ogre Battle // Queen // Queen II // Heavy Metal, Hard Rock, Progressive Metal
Orion // Metallica // Master of Puppets // Heavy Metal, Thrash Metal, Instrumental
Damage Inc. // Metallica// Master of Puppets // Thrash Metal, Heavy Metal
Snow (Hey Oh) // Red Hot Chilli Peppers // Snow (Hey Oh) // Soft Rock, Acoustic
Who Wants To Live Forever // Queen // A Kind of Magic // Power Ballad, Soft Rock
I suggest you listen to…
For a influential playlist: Damage Inc and Orion. Both of these songs are part of the album that revolutionized heavy and thrash metal forever.
scimonster
Scratcher
1000+ posts

Collab between me and Hardmath

mythbusteranimator wrote:

veggieman001 wrote:

DigiTechs wrote:

What's this for?

o.o

I've only just heard of this.
Go have a look at Hardmath's talk page on the wiki if you want background.
Linky?
Part 1: http://wiki.scratch.mit.edu/wiki/User_talk:Hardmath123#Code_collab.3F
Part 2: http://wiki.scratch.mit.edu/wiki/User_talk:Scimonster#Block-based_CSS

Retired Community Moderator
BTW, i run Google Chrome 41.0.2272.101 on a Linux system - Ubuntu 14.04. NEW: iPad 4th gen. w/retina.

418 I'm a teapot (original - to be read by bored computer geeks)
THE GAME (you just lost)
; THE SEMICOLON LIVES ON IN OUR SIGS
Gravitation
Scratcher
100+ posts

Collab between me and Hardmath

mythbusteranimator wrote:

veggieman001 wrote:

DigiTechs wrote:

What's this for?

o.o

I've only just heard of this.
Go have a look at Hardmath's talk page on the wiki if you want background.
Linky?
Here ya go :3

EDIT: Ninja'd.

Last edited by Gravitation (May 13, 2013 19:01:55)


mythbusteranimator
Scratcher
1000+ posts

Collab between me and Hardmath

Gravitation wrote:

mythbusteranimator wrote:

veggieman001 wrote:

DigiTechs wrote:

What's this for?

o.o

I've only just heard of this.
Go have a look at Hardmath's talk page on the wiki if you want background.
Linky?
Here ya go :3

EDIT: Ninja'd.
*throws star*

I've been listening to…
Ogre Battle // Queen // Queen II // Heavy Metal, Hard Rock, Progressive Metal
Orion // Metallica // Master of Puppets // Heavy Metal, Thrash Metal, Instrumental
Damage Inc. // Metallica// Master of Puppets // Thrash Metal, Heavy Metal
Snow (Hey Oh) // Red Hot Chilli Peppers // Snow (Hey Oh) // Soft Rock, Acoustic
Who Wants To Live Forever // Queen // A Kind of Magic // Power Ballad, Soft Rock
I suggest you listen to…
For a influential playlist: Damage Inc and Orion. Both of these songs are part of the album that revolutionized heavy and thrash metal forever.
Hardmath123
Scratcher
1000+ posts

Collab between me and Hardmath

Ok, so I'm kind of online and awake before 6 for once in my life.

Anyway, a full-fledged editor may be overkill, but I did like a lot of your ideas. Here's what I was thinking.

So you want to make a countdown timer for yourself because all the ones on the web are tacky and you can hack something better together with your eyes closed. You fire up Xcode (ok, I fire up Xcode, you fire up BBEdit) and start dumping boilerplate junk all over the place. You want to do it the “right” way, of course, so you start with like 15 lines of HTML with useless metadata in the head or whatever that you put together looking at your other projects. Then eventually you realize you need to put down some JS so you create a js file, link it to the HTML, and open up MDN. You don't want to mess up the namespace so you put all your code in an IIFE, and before you know it your whole countdown timer is a single large object. Then you realize that the buttons look terrible and start putting together some half-baked CSS by peeking at css-tricks and guessing for half an hour until you get styled buttons. But the UI looks and feels wrong. So you scrap all that and absolute-position some DIVs, and by the time you're done you realize your countdown doesn't even work right on Gecko and sink back into your JS dejectedly.

My point is, a lot of times when you want to make a simple app, you end up doing thousands of little things you shouldn't have to so that your code is written “right”—this includes browser compatibility, good JS practices, preserving the namespace, optimizations, UI norms, JSLint, whatever.

So how about instead of a webpage builder, we make a web app builder. It would have a screen to graphically put on buttons/sliders/controls, and another to bind event listeners to JS that you write. Finally, everything can by styled with a semi-graphical CSS screen. Once you're done, you download the whole thing as a ZIP. What do you think? Look up Apple's Interface Builder for an example of what I mean.
nXIII
Scratcher
1000+ posts

Collab between me and Hardmath

Hardmath123 wrote:

You want to do it the “right” way, of course, so you start with like 15 lines of HTML with useless metadata in the head or whatever that you put together looking at your other projects.
I don't know what right way you've been using
<!doctype html>
<meta charset=utf-8>
<title>Web App</title>
<!-- That's it! -->

But yeah, visual UI designers are awesome. As long as they output code that humans could have written and that humans can understand.

Last edited by nXIII (May 15, 2013 20:02:21)


nXIII · GitHub
Hardmath123
Scratcher
1000+ posts

Collab between me and Hardmath

<!DOCTYPE html>
<html>
 <head>
  <!-- there's usually some comment here -->
  <title>My Awesome App</title>
  <script type="text/javascript" src="myscript.js"></script> <!-- a couple of these -->
  <link rel="stylesheet" type="text/css" src="styles.css"/> <!-- and these (took me a while to learn that one—what's "rel"?) -->
  <!-- various meta stuff I never add but should -->
 </head>
 <body>
  <!-- lots of divs here -->
 </body>
</html>
And this is for a blank page…

Last edited by Hardmath123 (May 16, 2013 02:47:31)

blob8108
Scratcher
1000+ posts

Collab between me and Hardmath

@Hardmath: you forgot to specify a charset! And I think you can safely miss out the “type” attribute on the script tag.

tosh · slowly becoming a grown-up adult and very confused about it
nXIII
Scratcher
1000+ posts

Collab between me and Hardmath

Hardmath123 wrote:

<!DOCTYPE html>
<html>
 <head>
  <!-- there's usually some comment here -->
  <title>My Awesome App</title>
  <script type="text/javascript" src="myscript.js"></script> <!-- a couple of these -->
  <link rel="stylesheet" type="text/css" src="styles.css"/> <!-- and these (took me a while to learn that one—what's "rel"?) -->
  <!-- various meta stuff I never add but should -->
 </head>
 <body>
  <!-- lots of divs here -->
 </body>
</html>
And this is for a blank page…
There are almost no good reasons to include the <html> tag or the <head> tag. They're optional. And don't you usually use JS to make the <div>s?

Here's a real live functional web app—the entire HTML file (sans script content) for the m2e hello world demo:
<!doctype html>
<meta charset=utf-8>
<title>Morphic &mdash; m2e</title>
<meta name=viewport content="width=device-width,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<div id="world"></div>
<script src=m2e.js></script>
<script> /* ... */ </script>

Last edited by nXIII (May 16, 2013 11:54:30)


nXIII · GitHub
Hardmath123
Scratcher
1000+ posts

Collab between me and Hardmath

blob8108 wrote:

@Hardmath: you forgot to specify a charset!
See what I mean? All that stuff should be automatic. I should be able to write pure JS and CSS with no junk like that in my way. By “pure” I also mean no shims for cross-browser compatibility in my JS and no vendor prefixes in my CSS.

The JS behind some APIs is just silly—why don't people simplify their APIs instead of complicate? Getting a single sound to play when a button is clicked takes like 20 lines of code using the HTML5 standard. It should be something like this:
var sound = Sounds.load("stairway_to_heaven.mp3");
button.addEventListener("click", function() {sound.play(); }, false);
Where you can access more complicated properties if needed.

And I think you can safely miss out the “type” attribute on the script tag.
Maybe not anymore, but I always put it just to be safe.

nXIII wrote:

m2e
Is there a link to the live demo? That looks really cool.
nXIII
Scratcher
1000+ posts

Collab between me and Hardmath

Hardmath123 wrote:

I should be able to write pure JS and CSS with no junk like that in my way. By “pure” I also mean no shims for cross-browser compatibility in my JS and no vendor prefixes in my CSS.
Wholeheartedly agreed.

var sound = Sounds.load("stairway_to_heaven.mp3");
button.addEventListener("click", function() {sound.play(); }, false);
You shouldn't even need the false
(offtopic: we /really/ need an inline code tag)

And I think you can safely miss out the “type” attribute on the script tag.
Maybe not anymore, but I always put it just to be safe.
I don't know of any browser (even really old ones) that won't assume you mean JavaScript if you leave out the type attribute.

Is there a link to the live demo? That looks really cool.
Here's that demo and the full demo browser. It's sort of a work-in-progress, though (case in point: the “Save…” button does nothing), but feel free to use it for whatever you want (it's MIT —not any of that (A)GPL ickiness). If you find any bugs (event “minor” graphical ones), don't hesitate to report them

Last edited by nXIII (May 17, 2013 01:43:58)


nXIII · GitHub

Powered by DjangoBB

Standard | Mobile