
Myself – v1.0.3 - mmastrac
http://codepen.io/jakealbaugh/full/PwLXXP/
======
dustingetz
This is called interactive development; if you liked this, check these out:

* Interactive programming Flappy Bird in ClojureScript: [https://www.youtube.com/watch?v=KZjFVdU8VLI](https://www.youtube.com/watch?v=KZjFVdU8VLI)

* Live-editing React app without refresh: [https://vimeo.com/100010922](https://vimeo.com/100010922)

These demos aren't smoke and mirrors, I and many others do interactive
development, 8 hours a day, writing regular web apps.

~~~
drchickensalad
Are there any good approaches for doing this without a specific framework?

~~~
paulirish
You can do this right now in Chrome DevTools. In the sources pane any changes
you make to CSS are live immediately. It's a text editor but totally live.

And if you want to persist those changes back to disk, you can do that, too.
[https://developer.chrome.com/devtools/docs/workspaces](https://developer.chrome.com/devtools/docs/workspaces)

~~~
lsiebert
Vim has a number of ways to do this. browserlink.vim for example. There are
also grunt and gulp plugins for webdev repls.

------
bshimmin
This is outrageously cool. Really nicely executed.

That said, it does rather illustrate just how nasty the syntax is for creating
animations with CSS.

~~~
joshstrange
I was just thinking that. I don't do much with CSS directly (I know enough to
be dangerous) but I kept thinking "Ok, now it will start beating" and then 2-3
more lines of practically gibberish and rinse and repeat until the end when it
started beating.

WAY too much CSS to do something like that. I'm not sure what the fix is
though? A JS library to generate the CSS animation with a saner syntax (I
realise CSS probably needs all of that stuff to be extendable but it's a
massive amount of code for something that should be easier to accomplish
IMHO).

~~~
omegavesko
>WAY too much CSS to do something like that. I'm not sure what the fix is
though? A JS library to generate the CSS animation with a saner syntax (I
realise CSS probably needs all of that stuff to be extendable but it's a
massive amount of code for something that should be easier to accomplish
IMHO).

The most logical solution would be the way we extend CSS syntax today -
preprocessors like LESS and SASS. You don't need to render the valid CSS
clientside, you can just compile it into CSS before you deploy it.

------
josh2600
This is really cool. I want to see more of this.

Oh man, I just went to the home page. Tons of cool stuff! This is great.

I could see something like this being integrated with codeacademy as a way of
learning after you finish the intro lessons, sorta like how chess masters
watch a lot of chess games to learn how the game works.

------
jdkanani

        We did it!    
    
        I mean *I* did it, but you know, whatever...
        jake albaugh definitely did not have anything 
        to do with this.
    
        This pen loves CodePen!       
        
        See you later!
    

Those lines made me happy.

Human nature of software always increases the success rate of it. That may be
the reason why people don't like working for/with Enterprise softwares.

Good work!

------
m1aw
I feel like someone could build a game with this. Where you see the code being
writen as you make your choises.

That would be super cool.

Anyway, that's an amazing job you did OP.

~~~
cabirum
There is a game called Odesk. You need some money to create new match and then
just describe starting level in natural language. As game progresses, you will
face choices, but only once per day at most. It's pay to win though.

~~~
fugyk
Link?

~~~
roryokane
[https://www.odesk.com/](https://www.odesk.com/) is a freelance job board,
where a premium account buys you the ability to apply for more jobs at one
time. The grandparent comment was being satirical.

~~~
fugyk
Oh, I just overlooked the name odesk.

------
amelius
This makes me think of a new requirement for a hypothetical programming
language: this requirement is that the programming language supports a coding
style where additions to the code (new functionality, or bugfixes) are
appended at the end of the code text, rather than inserted inside the existing
code. I wonder if a language like this would be feasible and practical.

~~~
groundCode
Maybe literate programming
([http://en.wikipedia.org/wiki/Literate_programming](http://en.wikipedia.org/wiki/Literate_programming))
goes some way towards that? Or at least could be extended to do that?

~~~
falcolas
This is a good example of what the OP is asking for. However, you really have
to see an example of it to understand the benefits. The writers of the
"Physically Based Rendering: From Theory to Implementation" did this for their
book, and it's pretty amazing.

They would write text, then a code block:

    
    
        func main() {
           <main body variable declarations>
           <main body functions>
        }
    

followed by another block of text, and then an expansion of the code

    
    
        <main body variable declarations> = 
            var foo int
            var bar int64
    

And so on.

    
    
        <main body variable declarations> +=
            var zed rune
    

Which, when run through the "tangler", would produce:

    
    
        func main () {
            var foo int
            var bar int64
            var zed rune
        }
    

The first really interesting implementation I've seen of literate programming,
and it makes me want to implement it myself.

------
mmanfrin
If you like this, there is a website devoted to interactive demos similar to
this:

[http://thecodeplayer.com](http://thecodeplayer.com)

------
patja
This is great...I am currently teaching 3 classes of 8th graders an intro to
html, css, and javascript and am going to show this to them!

~~~
bgraves
Nice! I spoke to 50-60 middle schoolers last month. We built a Flappy Bird
clone based on the Code.org tutorials and a few of them really caught the
spark. This is why I recommend JS, CSS, & HTML for entry level programming
courses!

~~~
rbolkey
Really anything involving graphics and interactivity. It's why I still
remember moving the Logo turtle around.

------
i_like_ike_2001
Can someone please explain why this is so mind blowing? No one is coding in
real-time. It's just printing out the lines of css one character at a time and
applying each line after it prints.

And besides, people don't actually program beginning to end like this. It is
unrealistic to think people code without trial & error, ESPECIALLY css?

~~~
NegatioN
Err... it's just a cool little thing somebody made, and it resonates with the
audience here.

It's not meant to be an accurate representation of somebody coding live, or as
a tutorial to css.

~~~
i_like_ike_2001
okay, whew! Thanks.

------
TazeTSchnitzel
This reminds me of watching recordings of Notch programming sped up several
times.

------
dysoco
Wow this was really nice.

Although, as a non-webdev, the amount of code needed for this surprises me. I
guess that's all abstracted with JS and CSS frameworks, but still.

------
r00fus
Absolutely fascinating. I'd like this to be a screensaver or desktop
background.

Hell, this is art. I'd put it on a chromestick attached to an HDTV in the
office hallway... maybe several of these.

------
isarat
In Malayalam we say "Vallabhanu Pullum Ayudham" \- translates to "For a
wiseman, even grass is a weapon". Loved the creativity and the technical
perfection behind this!

------
itsjareds
I love this! I found it funny that the heart sends out those little shockwaves
on the ventricular diastole (when the heartbeat relaxes) as opposed to when it
contracts.

------
teamhappy
I've evaluated Light Table a couple of weeks ago and wasn't really happy with
it (it's a lot better than Facebook's hot code swapping lib though). I don't
need React or any of that stuff (I don't mind writing plain HTML5, ES5, and
CSS3). I just want to do graphics programming in real time. Is there anything
besides Shadertoy I should be looking at?

------
hagendaasz
Can someone please make more of this but for production web app. I'm willing
to pay for it. I want to see the flow of how good programmer code their app
from start to finish but in a fast forward way.

~~~
hagendaasz
Ok just happen to read one of the comments and thecodeplayer.com is awesome.

------
azurelogic
This is insane. This seriously just blew my mind. Well done!

------
oldpond
Very cool. Watching programming in real time is a great learning experience.
Thanks for this.

------
tempestn
Firefox crashed for me as soon as it started on #heart. Presumably a bad add-
on.

------
brianzelip
This is really friggin cool. It's all done in coffeescript on codepen.

------
syoc
It would be nice if this post had a more descriptive title.

------
alexirobbins
Feels like watching a super-human intelligence program.

------
dazhbog
Damnn I can be watching this all day... so cool :-)

------
borgia
Very nice mmastrac, well done.

~~~
mmastrac
Not mine -- the author of the this is in the URL:
[http://codepen.io/jakealbaugh/](http://codepen.io/jakealbaugh/)

~~~
delightless
Clearly not:

* jake albaugh definitely did not have anything * to do with this.

------
zobzu
that amount of -webkit ;)

------
technologia
I love this, awesome job!

------
noobermin
Someone quickly give this man a raise or a job.

------
zita
<3

------
thailan
nice

