Building A Low-Tech Website For Energy Efficiency

January 10, 2020 by Sharon Lin 38 Comments

In an age of flashy jQuery scripts and bulky JavaScript front-end frameworks, loading a “lite” website is like a breath of fresh air. When most of us think of lightweight sites, though, our mind goes to old-style pure HTML and CSS sites or the intentionally barebones websites of developers and academics. Low-tech Magazine, an intentionally low-tech and solar-powered website, manages to incorporate both modern web aesthetics and low-tech efficiency in one go.

Rather than hosting the site on data centers – even those running on renewable power sources – they have a self-hosted site that is run on solar power, causing the site to occasionally go off-line. Their model contrasts with the cloud computing model, which allows more energy efficiency at the user-side while increasing energy expense at data centers. Each page on the blog declares the page size, with an average page weight of 0.77 MB, less than half of the average page size of the top 500,000 most popular blogs in June 2018.

Some of the major choices that have limited the size of the website include building a static site as opposed to a dynamic site, “dithering” images, sparing a logo, staying with default typefaces, and eliminating all third-party tracking, advertising services, and cookies. Their GitHub repository details the front-end decisions including using unicode characters for the site’s logo rather than embedding an SVG. While the latter may be scalable and lightweight in format it requires distribution to the end-user, which can involve a zipped package with eps, ai, png, and jpeg files in order to ensure the user is able to load the image.

As for the image dithering, the technique allows the website to maintain its characteristic appearance while still minimizing image quality and size. Luckily for Low-tech Magazine, the theme of the magazine allows for black and white images, suitable for dithering. Image sprites are also helpful for minimizing server requests by combining multiple small images into one. Storage-wise, the combined image will take up less memory and only load once.

There are also a few extraneous features that emphasize the website’s infrastructure. The background color indicates the capacity of the solar-charged battery for the website’s server, while other stats about the server’s location (time, sky conditions, forecast) also help with making the website availability in the near future more visible. Who knows, with the greater conscience on environmental impact, this may be a new trend in web design.

All You’ve Ever Wanted To Know About Compilers

January 5, 2020 by Bryan Cockfield 21 Comments

They say that in order to understand recursion, you must first understand recursion. Once you master that concept, you might decide that it’s time to write your own compiler that can compile itself as a fun side project. According to [Warren] aka [DoctorWkt], who documented every step of writing this C compiler from scratch, a true compiler will be able to do that.

Some of the goals for the project included self-compiling, focusing on a real hardware platform, practicality, and simplicity. [Warren] outlines a lot of the theory of compilers as well, including all the lexical, grammar, and semantic analysis and then the final translation into assembly language, but really focuses on making this compiler one for practical use rather than just a theoretical implementation. He focuses on Intel x86-64 and 32-bit ARM platforms too, which are widely available.

This project is a long read and very thoroughly documented at around 100,000 words, so if you’ve ever been interested in compilers this is a great place to start. There are a lot of other great compiler tools floating around too, like the Compiler Explorer which shows you generated code as you write in a higher level language.

[via Hackaday.io]

A Programming Language That Lets You Code With Pixels

January 3, 2020 by Sharon Lin 23 Comments

This programming language gives you programs that resemble modern art. It’s fortunately a feature of the language, dubbed Piet after the famed abstract painter Piet Mondrian.

The language uses 20 distinct colors, with the colors cycling from red to yellow to green to cyan to blue to magenta and the lightness cycling from light to normal to dark. The code is formed from graphics made of the recognized colors, with individual pixels holding much of the information. Stacks are used for storing data values, that can exist as integers or as Unicode characters with the proper commands applied.

Numbers in the program are represented by colors, while black blocks indicates edges and white blocks indicate free zones. The interpreter physically slides through blocks in the direction of the Direction Pointer (DP), with hue changes indicating different commands based on the steps of the change.

To execute a program, the Piet language interpreter begins in the upper left codel (or individual code block) of the program, maintaining a DP initially pointed to the right and a Codel Chooser (CC) initially pointed to the left. The DP and CC turn right, left, down, or up depending on the execution.

There is currently a small community of coders developing sample programs, interpreters, IDEs, and compilers for the language. You can check out some of the sample programs here.

Reverse Engineer PCBs With SprintLayout

December 31, 2019 by Al Williams 20 Comments

[Bwack] had some scanned pictures of an old Commodore card and wanted to recreate PC boards from it. It’s true that he could have just manually redrawn everything in a CAD package, but that’s tedious. Instead, he used SprintLayout 6.0 which allows you to import pictures and use them as a guide for recreating a PCB layout.

You can see the entire process including straightening the original scans. There are tools that make it very easy to place new structures over the original scanned images.

Continue reading “Reverse Engineer PCBs With SprintLayout” →

The Smart Home Gains An Extra Dimension

December 29, 2019 by Ben James 15 Comments

With an ever-growing range of smart-home products available, all with their own hubs, protocols, and APIs, we see a lot of DIY projects (and commercial offerings too) which aim to provide a “single universal interface” to different devices and services. Usually, these projects allow you to control your home using a list of devices, or sometimes a 2D floor plan. [Wassim]’s project aims to take the first steps in providing a 3D interface, by creating an interactive smart-home controller in the browser.

Note: this isn’t just a rendered image of a 3D scene which is static; this is an interactive 3D model which can be orbited and inspected, showing information on lights, heaters, and windows. The project is well documented, and the code can be found on GitHub. The tech works by taking 3D models and animations made in Blender, exporting them using the .glTF format, then visualising them in the browser using three.js. This can then talk to Hue bulbs, power meters, or whatever other devices are required. The technical notes on this project may well be useful for others wanting to use the Blender to three.js/browser workflow, and include a number of interesting demos of isolated small key concepts for the project.

We notice that all the meshes created in Blender are very low-poly; is it possible to easily add subdivision surface modifiers or is it the vertex count deliberately kept low for performance reasons?

This isn’t our first unique home automation interface, we’ve previously written about shAIdes, a pair of AI-enabled glasses that allow you to control your devices just by looking at them. And if you want to roll your own home automation setup, we have plenty of resources. The Hack My House series contains valuable information on using Raspberry Pis in this context, we’ve got information on picking the right sensors, and even enlisting old routers for the cause.

Think You Know CURL? Care To Prove It?

December 27, 2019 by Donald Papp 5 Comments

Do you happen to remember a browser-based game “You Can’t JavaScript Under Pressure”? It presented coding tasks of ever-increasing difficulty and challenged the player to complete them as quickly as possible. Inspired by that game, [Ben Cox] re-implemented it as You Can’t cURL Under Pressure!

In it, the user is challenged in their knowledge of how to use the ubiquitous curl in a variety of different ways. Perhaps this doesn’t sound terribly daunting, especially if your knowledge of curl is limited to knowing it is a command-line tool to fetch something from a web server. But curl has a staggering number of features. The man page is over 4500 lines in length. The software’s main site offers a (free) 250+ page guide on how to use curl and libcurl. Reflecting on this is exactly what led [Ben] to create his challenge.

It’s a wonderful piece of work, but things get really interesting once [Ben] starts talking about the infrastructure behind it all. At its core the game works by giving the user a problem and a virtual machine, and catching outgoing HTTP calls to see whether they look correct. If the outgoing HTTP call is the right solution for the problem, terminate the current VM and start up the next one with the next problem. He’s put a lot of work into getting suitable VMs up and running quickly, securely, and properly isolated. The code can be found on the project’s GitHub repository for those who want a closer look.

But that’s not all. [Ben] says that in the past he’s had a bad habit of presenting interactive features in his blog posts that can’t keep up with sudden demand. So to address that, the system auto-scales as needed with a small Linux cluster; small brick-sized PCs are started and shut down automatically to meet demand. Hey, the only thing cooler than a functioning cluster is a cluster doing an actual job, like this one that detects NSFW images.

Slack, Now On Windows 3.1

December 23, 2019 by Lewin Day 20 Comments

Slack is either an online collaboration tool, or a religion, depending on who you talk to. Naturally, it’s accessible across all manner of modern platforms, from Windows and MacOS to smartphones. However, some prefer to go further back. At a recent company hackathon, [Yeo Kheng Meng] decided to create a Slack client for Windows 3.1.

This is how you learned to program before the Internet.

Programming for an older OS, in this case, Windows For Workgroups 3.11, requires setting up a viable development environment. Visual C++ 1.52 was pressed into service in this case, being the last version capable of targeting Windows 3.11. The development environment is run on a Windows 2000 virtual machine running on a Mac laptop. This was chosen for its ability to run 16-bit apps, and its Samba compatibility with both Windows 3.11 and Windows 10 and modern Macs.

There were several challenges to face along the way. Old school Windows simply isn’t capable of dealing with HTTPS, necessitating a proxy to handle the exchange of packets with Slack servers. Additionally, memory management was a hassle due to the limits of the 16-bit architecture. Thankfully, an old programming manual from the era was of great help in this regard.

At the end of the hackathon, a usable Slack client was up and running, complete with garish colors from the early Windows era. There’s a few key features missing, such as the ability to resolve user IDs, but overall, the concept works. We’ve seen [Yeo]’s work with this vintage OS before too. Video after the break.

Continue reading “Slack, Now On Windows 3.1” →