I sent this very link to an acquaintance who is looking to get started programming, to give him an idea of how much fun it is to do things interactively in a tight REPL-alike.
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.
A lot of us who have been doing this for years sometimes spend a week working on something only to see a benchmark slightly improve or a unit test pass - but still get a thrill from it!
But I must add that anything which gets new coders excited is a good thing!
That's because you can conceptualize what happens through your experience and knowledge. For a newbie, a slight benchmark increase doesn't mean anything because they can't tell what the impact of it is, why it is important.
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 :)
Python has a webbrowser module so that you can use it to remote control your webbrowser. It is much more fun to see results that way than mess around with print.
I gave a talk at OOPSLA in Montreal in 2007, made a pacman game during my 30 minute talk slot using a live programming language/environment. I'm sure I wasn't even the first, as I got many of my ideas from Chris Hancock's PhD thesis published in 2003, "Real time programming and big ideas in computational literacy", and of course the multitudes of less but still interactive Lisp and smaltalk environments, and fully interactive visual environments way before that (starting with sutherland's sketchpad).
insanely cool! but isn't this more like live code replay vs interactive development? I mean it looks like it's just running through code at constant speed. doesn't look like any development process i've ever seen unless it really is done by a robot
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.
Not really, for interactive UI development you need to model the UI as a pure function (no state in the view). So that limits you to React or React-like approaches, and game engines: https://www.youtube.com/watch?v=tJr_TD1BtF0
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.
Depends on the backend platform actually. Apache CGI processes (PHP) are fire-and-forget per request. But for example Ruby and Node.js servers persist through request cycles. It's important that any state is unique to the request, sometimes even the caches should be per request.
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.
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).
>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.
> That said, it does rather illustrate just how nasty the syntax is for creating animations with CSS.
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...
It isn't that bad. Remember that he prefixed for webkit and also wrote everything by hand. Most of CSS is written using mixins/functions these days or at the very least with some help with the text editor.
He also created two animation. One that us subtle in the background and the beating of the heart.
This isn't really a fair representation of the syntax. He's using vendor prefixes, defining properties that typically aren't needed (custom timing functions), and has broken rules up over multiple blocks for the sake of this demo. In typical usage the code would be two or three times more concise.
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!
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.
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.
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.
I'm not sure what the overhead would be for something like that... When you get to a certain level of complexity, canvas or webgl are usually a better targets.
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.
I'd say it's feasible. Practical? Probably not. I'd imagine it would be like a very linear, horribly written story:
* 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.
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.
How would that be different from the way CSS currently functions, where if B is parsed later than A and references the same selector, B's behavior overwrites?
It already exists. It's called Git. You append more code in "commits" that modify existing functionality. The previous code is always accessible, though, so it's almost always strictly adding (except for cases where you have to scrub passwords from the history and other edge cases)
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!
I teach high school students how to code and I thought the same thing. Wonder if there's something here that could be spun into a tool to help learn coding.
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?
I like it for the show. Presentation is as important as the work behind it -- and the work behind this one is also pretty good. Someone spent hours of her time to do this and it's beautiful.
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!
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.
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?
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.
* 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.