Rendering Fractals With Just HTML and CSS

What’s better than spending hours and hours with CSS
trying to get images and text to center properly? Not [Jim], but he did notice that
CSS3 was a very powerful language. He wondered about building Tetris, a Turing Machine, or rendering fractals purely in CSS and HTML. The jury is still out if a Turing machine is possible, but he did manage to generate some simple fractals using just CSS and HTML, no JavaScript required.

Most fractals are recursive, and CSS rules can be applied to HTML objects that have already have rules applied to them. It’s not quite recursion, because there’s no way to dynamically generate HTML with CSS. However, with just a few tags, [Jim] can generate one level of a Pythagoras Tree. This method requires placing tags in the HTML for every level of the tree, greatly limiting the cool factor. That’s easily remedied by a few CTRL+Cs and CTRL+Vs.

The same technique can be used to render a Koch snowflake – seen on this page. Yes, it’s all HTML and CSS, without JavaScript. Why? Because he can, and that’s good enough for us.

HTML link tag hack sends you to the wrong place


We consider ourselves fairly cautions Internet warriors. We know when to watch out for malicious links and tread lightly during those times. But this hack will still bite even the most cautions of link followers. It’s a hack that changes where a link is sending you after you click on it.

The concept is driven home right away by a link in the post which lists PayPal as the target when you hover over it with your mouse. Clicking on it will give you a warning that it could have been a malicious page you were redirected to. Of course the address line of the page shows that you were sent somewhere else, but it’s still an interesting issue. The hack is accomplished with just a few lines of JavaScript. In fact, the original example was 100 characters but a revision boils that down to just 67.

So who’s vulnerable to this kind of thing? It sounds like everyone that’s not using the Opera browser, which has been patched against the exploit. There are also some updates at the bottom of the post which mention that Firefox has been notified about it and Chrome is working on a patch.

[via Reddit]

HTML based AVR compiler aims to make Arduino development on iOS possible

It’s surprising what lengths people will go to in order to bring functionality to their smart phones. In this case, [Tadpol] wanted a way to develop for his Arduino on an iOS device like an iPad or iPhone. He figures it’s possible to rewrite the IDE as HTML5, but since that’s a pretty large mountain to climb, he started by building a browser-based AVR compiler. It’s an interesting concept, and he’s got a working prototype up on Github for you to test. Perhaps you can throw your hat in the ring and help him with development?

The web interface uses boxes to add to the code. What you see above is three sets of commands which will blink an LED. The project, named Avrian Jump, uses a simple ladder language to feed the compiler, with several different options for output. The most interesting in our mind is a WAV file which can be used to program an AVR from the audio out of your device. That would make programming as simple as connecting the specially modified AVR to your headphone jack. There’s also an ASCII output which allows you to save your programs for later alteration, S19 output for AVRdude programming, and an assembler output for debugging purposes. It’s hard to see where this project might go, but we have to admit that the concept is intriguing.

Finally, LaTeX in HTML files

Writing a paper in LaTeX will always result in beautiful output, but if you’d like to put that document up on the web you’re limited to two reasonable options: serve the document as a .PDF (with the horrors involves, although Chrome makes things much more palatable), or relying on third-party browser plugins like TeX The World. Now that [Todd Lehman] has finally cooked up a perl script to embed LaTeX in HTML documents, there’s no reason to type e^i*pi + 1 = 0 anymore.

For those not in the know, LaTeX is a document typesetting language that produces beautiful output, usually in PDF form. Unfortunately, when [Tim Berners-Lee] was inventing HTML, he decided to roll his own markup language instead of simply stealing it from [Don Knuth]. Since then, LaTeX aficionados have had to make do with putting TeX snippets into web pages as images or relying on the [; \LaTeX ;] generated from the TeX The World browser extension.

[Todd Lehman]’s perl script generates the PDF of his LaTeX file and pulls out all the weird font and math symbols into PNG files. These PNG files are carefully embedded into the HTML file generated from the normal text pulled from the LaTeX file. It’s a ton of work to get these document systems working correctly, but at least there’s a reasonable way to put good-looking LaTeX on the web now.

Abusing HTTP status codes

Concerns over privacy online are an ever growing theme. Every day we see people complaining about the policies of facebook and the like. [Mike Cardwell] points out another method of gleaning a bit of personal data from you that you may not have seen yet. By embedding a hidden image or using some really simple javascript, he can tell if you are currently logged into Gmail, Twitter, Facebook, or Digg. While this could possibly be used for more nefarious things, he points out that you could also use it for customizing your website to better suit the experience of the browser. For example, if the “reader” is already logged into Gmail, you could have any email links automatically open a gmail instance instead of the local mail client.

Internet controlled remote

How often does this happen to you? You’re leaving on a long trip, and half way there you remember the TV was left on. Never? Alright then, how about wanting to control an Xbox 360 from within the other room and you don’t have the remote. Still a rare occurrence?

Perhaps you have a better situation where an internet controlled IR remote, that can be programmed to work with any TV or IR accepting device, would be useful. [Nicholas McClanahan] starts off with USB Propeller from Parallax, adds an Ethernet module making a mini server, and ends with an IR LED and receiver. The code is nearly as simple being a combination of SPIN, Html, and JavaScript. All coming together under a nice website GUI that prompts for what IR signals to send. To make the project even more straightforward, [Nicholas] has included an Instructable as well. In the end though, while the hack is great, we’re still trying to find a decent enough use. Video after the rift.

Continue reading “Internet controlled remote”

Free web development tools

OStatic has a collected some great free tools for web developers. We talked about Quanta in an earlier post, but this article reaches beyond just HTML editors. LaunchSplash can be used to generate splash pages while you build. IBM, responsible for the Eclipse IDE, has built Project Zero to encourage web app development; even the IDE is web based. OpenX is an open ad server. Piwik is a free web analytics package. There are also quite a few open source CMS’s and sites collecting open source designs.