Myself – v1.0.3
codepen.io
codepen.io
* Interactive programming Flappy Bird in ClojureScript: https://www.youtube.com/watch?v=KZjFVdU8VLI
* Live-editing React app without refresh: 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.
I think a lot of people who are just starting out get deterred when the only thing they end up with after a week of effort is some hard-to-see changes happening on the filesystem or in some file.
But I must add that anything which gets new coders excited is a good thing!
Closing the feedback loop between typing and seeing a cool result is one of the best ways to get people excited about coding. If 3D or AR helps with that, it's definitely a good thing :)
http://research.microsoft.com/en-us/people/smcdirm/liveprogr...
And if you want to persist those changes back to disk, you can do that, too. https://developer.chrome.com/devtools/docs/workspaces
For backed web development (in Clojure at least) there isn't really a lot of state in the first place - request comes in, request comes out, state is in the database not the application - so there are no framework constraints.
Node.js has a package called piping that hot-reloads require()ed files. It makes interactive development possible. Checkout my backend and frontend interactive isomorphic starterkit: https://github.com/RickWong/react-isomorphic-starterkit It hot-reloads Node server code and client code your browser.
That said, it does rather illustrate just how nasty the syntax is for creating animations with CSS.
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.
Especially in contrast with how quickly and concisely the heart was build. All the building blocks were never meant to build hearts or shapes other than boxes. The animation elements on the other hand are used for their intended purpose and still...
He also created two animation. One that us subtle in the background and the beating of the heart.
That being said, yes. They are a pain to write.
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.
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!
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!
That would be super cool.
Anyway, that's an amazing job you did OP.
* John goes to the store and meets a woman named Jane.
* Wait, actually her name is Alice and she works at the store.
* John tells Alice that he is looking for a widget.
* Alice looks for the widget and shows John a list of what she found.
* John can't read the list.
* John takes a photo of the list and sends it to his friend Jane.
* Jane reads the list and texts what she thinks it says back to John.
* John promises to get back to Alice once he can read the list.
* John gets Jane's SMS. John can't read Jane's SMS.
* John throws his hands in the air.You are following the illusion of how that code is delivered and not how that code was created.
This demo hides from you the countless iterations until it got the result right to later linearly deploy.
Your brain knows that creativity is non-linear so you perceive this as an act of genius.
They would write text, then a code block:
func main() {
<main body variable declarations>
<main body functions>
}
<main body variable declarations> =
var foo int
var bar int64
<main body variable declarations> +=
var zed rune
func main () {
var foo int
var bar int64
var zed rune
}
10 FOR i = 1 TO 64 90 NEXT
REM What should we do inside? 50 PRINT "Hello", i, "worlds."
REM nah, too many iterations. 10 FOR i = 1 TO 16
And besides, people don't actually program beginning to end like this. It is unrealistic to think people code without trial & error, ESPECIALLY css?
It's not meant to be an accurate representation of somebody coding live, or as a tutorial to css.
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.
Hell, this is art. I'd put it on a chromestick attached to an HDTV in the office hallway... maybe several of these.
* jake albaugh definitely did not have anything * to do with this.