22 ms·
Myself – v1.0.3
- TazeTSchnitzel 12y agoThis reminds me of watching recordings of Notch programming sped up several times.
- josh2600 12y agoThis 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.
- brianzelip 12y agoThis is really friggin cool. It's all done in coffeescript on codepen.
- m1aw 12y agoI 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 12y agoThere 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.
- tracker1 12y agoI'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.
- azurelogic 12y agoThis is insane. This seriously just blew my mind. Well done!
- borgia 12y agoVery nice mmastrac, well done.
- mmastrac 12y agoNot mine -- the author of the this is in the URL: http://codepen.io/jakealbaugh/ http://codepen.io/jakealbaugh/
- delightless 12y agoClearly not: * jake albaugh definitely did not have anything * to do with this.
- r00fus 12y agoAbsolutely 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.
- patja 12y agoThis 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 12y agoNice! 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 12y agoReally anything involving graphics and interactivity. It's why I still remember moving the Logo turtle around.
- dopeboy 12y agoI 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.
- bshimmin 12y agoThis is outrageously cool. Really nicely executed. That said, it does rather illustrate just how nasty the syntax is for creating animations with CSS.
- joshstrange 12y agoI 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 12y ago>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.
- zerocrates 12y agoChrome/Blink is apparently enabling unprefixed animations in Chrome 43, so that will soon just leave Safari requiring all that -webkit- business.
- weinzierl 12y ago> 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...
- dustingetz 12y agoThis 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.
- et1337 12y agoThere's also my favorite: live-editing a VR environment. https://www.youtube.com/watch?v=db-7J5OaSag https://www.youtube.com/watch?v=db-7J5OaSag
- philsnow 12y agoI 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.
- jakejake 12y agoA 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!
- chton 12y agoThat'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 :)
- i_like_ike_2001 12y agoCan 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 12y agoErr... 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 12y agookay, whew! Thanks.
- ekin 12y agoI 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.
- oldpond 12y agoVery cool. Watching programming in real time is a great learning experience. Thanks for this.
- mmanfrin 12y agoIf you like this, there is a website devoted to interactive demos similar to this: http://thecodeplayer.com http://thecodeplayer.com
- dazhbog 12y agoDamnn I can be watching this all day... so cool :-)
- amelius 12y agoThis 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.
- cben 12y agoREM We'll need a loop. 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
- MetricMike 12y agoHow 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?
- groundCode 12y agoMaybe 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 12y agoThis 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.
- dysoco 12y agoWow 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.
- noobermin 12y agoSomeone quickly give this man a raise or a job.
- technologia 12y agoI love this, awesome job!
- teamhappy 12y agoI'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 12y agoCan 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 12y agoOk just happen to read one of the comments and thecodeplayer.com is awesome.
- alexirobbins 12y agoFeels like watching a super-human intelligence program.
- jdkanani 12y agoWe 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!
- stewartjarod 12y agoThis was really cool! Great demo.
- tempestn 12y agoFirefox crashed for me as soon as it started on #heart. Presumably a bad add-on.
- zobzu 12y agothat amount of -webkit ;)
- itsjareds 12y agoI 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.
- thailan 12y agonice
- syoc 12y agoIt would be nice if this post had a more descriptive title.
- zita 12y ago<3
- isarat 12y agoIn 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!