Often neglected as ‘merely a styling language’, CSS contains a wealth of functions built right into the browser’s rendering engine that can perform everything from animations to typography and even mathematical operations, with more added each year.
In a tutorial [Bramus] takes us through using the trigonometric functions in CSS. These are supported in all major browsers since Chrome 111, Firefox 108 and Safari 15.4. In addition to these trigonometric functions, further mathematical functions are also available, many of whom have been available for years now, such as calc(), min() and max().
None of this is likely surprising to anyone who is somewhat familiar with the depths of CSS, especially after it has been more-or-less proven to be a Turing-complete programming language. Using this power for visual elements does however make a lot of sense considering that CSS was always intended to help with styling and formatting the raw HTML.
(Heading: Code to move items on a circular path around a central point in CSS.)
As the available computing power from affordable microcontrollers continues to increase, there is an inevitable blurring of the line between them and the lower tier of application processors capable of running Linux-based operating systems. For the most part a microcontroller busies itself with behind-the-scenes tasks, but as so many projects here have demonstrated, they can be pretty capable when it comes to user-facing applications too. Now [Andy Green] has extended the possibilities with affordable silicon, by producing a proof-of-concept HTML + CSS renderer over h2 on ESP32 for libwebsockets. Surf the web on a microcontroller without settling for a text-only experience? Why not!
He freely admits that this is far from being a complete HTML rendering engine, in that while it parses and renders HTML and CSS with JPEG and PNG image support, it does so only with a subset of HTML and is not tolerant of any malformations. There is also no JS support, which is hardly surprising given the available resources.
The technique hinges on you getting a CSS into the web page. Maybe you’ve partially compromised the server or maybe you wrote a malicious browser extension. The method works because you can make a style conditional on an attribute of an element. That means you can ask CSS to do some special formatting on a text field with a certain value. If that formatting is to load some background image from a server you control then you can tell if the field has a particular value.
We didn’t say it was easy. Suppose you want to capture a four-digit PIN number. You will need about 10,000 lines of format. For example:
Low cost, long range, or low power — when it comes to wireless connectivity, historically you’ve only been able to pick two. But a group at the University of Washington appears to have made a breakthrough in backscatter communications that allows reliable data transfer over 2.8 kilometers using only microwatts, and for pennies apiece.
For those unfamiliar with backscatter, it’s a very cool technology that modulates data onto RF energy incident from some local source, like an FM broadcast station or nearby WiFi router. Since the backscatter device doesn’t need to power local oscillators or other hungry components, it has negligible power requirements. Traditionally, though, that has given backscatter devices a range of a few hundred meters at most. The UW team, led by [Shyamnath Gollokota], describe a new backscatter technique (PDF link) that blows away previous records. By combining the spread-spectrum modulation of LoRa with the switched attenuation of incident RF energy that forms the basis for backscatter, the UW team was able to cover 2800 meters for under 10 microwatts. What’s more, with printable batteries or cheap button cells, the backscatter tags can be made for as little as 10 cents a piece. The possibilities for cheap agricultural sensors, ultracompact and low power wearable sensors, or even just deploy-and-forget IoT devices are endless.
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.
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.