IoT, web apps, and connected devices are all becoming increasingly popular. But, the market still resembles a wild west apothecary, and no single IoT ecosystem or architecture seems to be the one bottle of snake oil we’ll all end up using. As such, we hackers are keen to build our own devices, instead of risking being locked into an IoT system that could become obsolete at any time. But, building an IoT device and interface takes a wide range of skills, and those who are lacking skill in the dark art of programming might have trouble creating a control app for their shiny new connected-thing.
Enter Involt, which is a framework for building hardware control interfaces using HTML and CSS. The framework is built on Node-Webkit, which means the conventions should be familiar to those with a bit of web development background. Hardware interactions (on Arduinos) are handled with simple CSS classes. For example, a button might contain a CSS class which changes an Arduino pin from high to low.
While Involt isn’t the only framework to simplify hardware interaction (it’s not even the only Node.js based method), the simplicity is definitely laudable. For those who are just getting started with these sorts of devices, Involt can absolutely make the process faster and less painful. And, even for those who are experienced in this arena, the speed and efficiency of prototyping with Involt is sure to be useful.
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
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.
Web scraping is the act of programmatically harvesting data from a webpage. It consists of finding a way to format the URLs to pages containing useful information, and then parsing the DOM tree to get at the data. It’s a bit finicky, but our experience is that this is easier than it sounds. That’s especially true if you take some of the tips from this web scraping tutorial.
It is more of an intermediate tutorial as it doesn’t feature any code. But if you can bring yourself up to speed on using BeautifulSoup and Python the rest is not hard to implement by trial and error. [Hartley Brody] discusses investigating how the GET requests are formed on your webpage of choice. Once that URL syntax has been figured out just look through the source code for tags (css or otherwise) that can be used as hooks to get at your target data.
So what can this be used for? A lot of things. We’d suggest reading the Reddit comments as there are several real world uses discussed there. But one that immediately pops to mind is the picture harvesting [Mark Zuckerburg] used when he created Facemash.
Ever since Hack a Day first emerged on the scene in 2004, the site’s design has been pretty consistent. The black background with its green and white text, while a bit dubious looking at work, is fine by me. For others however, the site’s design is a constant eyesore both figuratively and literally. [James Litton] is one of those readers, and he wrote in to share a tip that helps him read up on the latest hacks without killing his eyes.
[James] uses Firefox to browse the web, so he whipped up a small Greasemonkey script that tweaks Hack a Day’s style sheet once it reaches his browser. His script inverts the background while changing a few other items, making for a much more comfortable read. Overall we found the change to be pretty reasonable, but go ahead and judge for yourself – you can see the before and after screen shots in greater detail on his site.
[James] also points out that the script should work just fine in Chrome, for those of you who prefer that browser instead.
So if your eyes are a bit on the sensitive side, feel free to grab his script and customize away – I don’t think we’ll be changing the theme any time soon.
Why settle for the standard home icon on your browser? If your home button brings you to hackaday.com, why not make the icon reflect that destination? This hack is quick and simple. We’ll take you through it using Firefox 3 and the default theme with standard sized icons. Continue reading “Firefox CSS hack: change navigation icons”