HTTPraxis: Building the Web with Love

I wrote DIY Cybersecurity for Domestic Violence for survivors. I wanted the website to be an act of love in the bell hooks sense: "the will to extend one's self for the purpose of nurturing one's own or another's spiritual growth".

.

In writing the text, I emphasized privacy and compassion. Privacy, which I define as the freedom to make personal decisions without harm, was the means to nurture spiritual growth amidst abuse and control.

.

Text is never without context. This was a website: it could not be presented on a blank white page and have the same impact. I needed to build a website that emphatically embodied values of privacy and compassion. I wanted a survivor, without any cybersecurity experience, to arrive and feel welcome. DIY Cybersecurity for Domestic Violence needed to be full of love, from the server to the HTML.

.

What follows are the technical and aesthetic decisions I made to realize love in a digital space.

Static HTML

DIY Cybersecurity for Domestic Violence (DIY-Cy) is like a book: it's static text meant to be read. Most websites have dynamic features, like creating an account or loading advertisements. Websites rely on Javascript, a programming language, to serve these features. Ubiquitous across the internet, Javascript can be a blight on otherwise simple websites: it often introduces slow loading times, hacking vulnerabilities, and code complexity.

.

DIY-Cy, as a purely textual resource, has no need of Javascript. So I decided to exclude Javascript from the site. This is actually fairly tricky, as most web development resources out there assume you'll be using Javascript. Fortunately, I was able to utilize an HTML website template from HTML5 UP that had minimal Javascript. Such templates are a godsend because I am definitely -not- a designer (I also dearly appreciate that they're licensed for free under a Creative Commons license). Templates typically need a bit of HTML/CSS skill to get into working order; luckily I have enough web-development experience as a software engineer to comfortably hack a template to my liking.

.

Template in hand, I erased all of the Javascript, leaving me with HTML (the markup language beneath all websites) and CSS (the styling language beneath all websites). DIY-Cy would load incredibly fast, which is crucial for survivors who would access the site from mobile phones and poor internet connections. I also eliminated the risk of Javascript vulnerabilities being exploited against my readers. Accessibility and security at work!

Responsive Design

Websites need to look good across phones, laptops, desktops, and tablets, in an infinite combination of browser versions and screen sizes. Honestly, this sucks, it's a huuuuge pain to have a website look good all the time. Responsive design is a popular web development trend that makes a webpage "respond" to screen size by adjusting/hiding/adding its elements to ensure the page is looking fine.

.

DIY-Cy needed to be responsive to ensure that survivors relying on their phones could enjoy the site as much as they could on a computer. I chose a website template that was responsive without Javascript, so I only had to do a handful of custom HTML/CSS hacks to make the site elegant across devices. Further proof that a good template is key!!

Illustrations

Tech aesthetics: Zeros and ones. Big computer generated locks. Whitespace with white people. Tech imagery is overwhelmingly cold, sterile, and intimidating. No-one ever saw a picture of a menacing dude in a hoodie hunched over their laptop and thought, "Hey, computers are for me!". HACK*BLOSSOM, as a matter of principle, has rejected all traditional tech aesthetics in favor of flowers. Flowers are lovely, Tech is not.

.

DIY-Cy needed an aesthetic that made an incredibly difficult subject matter warm and inviting. I recognized that hand-drawn illustrations, in a DIY aesthetic, could emphasize a more personal and human energy. A reader might feel less alienated or intimidated by cybersecurity (a very confusing technical niche). I contacted an artist, the wonderful Aurora Lady, to create illustrations for DIY-Cy, and they were absolutely perfect. Every image was thoughtfully crafted, serving as a point of optimism rather than fear. I could not be more grateful for Aurora's work!

.

Illustrations mean images, which means there's technical baggage. The responsive nature of the site meant the illustrations had to be drawn to be attractive across screen sizes. The image files also had to be significantly compressed so the site would load quickly (again, accessibility is key!). Every webpage's metadata, which is used by search engines, social media sites, and browsers to learn about the page, had to have higher-res images for when the pages are shared. Aurora drew the illustrations with these constraints in mind, while I used Photoshop to adjust sizing as needed. At the end of the day, DIY-Cy was both fast and beautiful, radiating warmth.

In the Servers

DIY-Cy has immaculate HTML, fast-loading times, and appealing aesthetics. But a website has to be served from a server somewhere. When you visit a website, the address is resolved to an IP Address which leads to a server, whose job is to send you the HTML/CSS (and javascript) to be rendered in your browser. While this infrastructure is more technical than HTML or illustrations, it's absolutely key in ensuring users' privacy and well-being. The next few sections will cover this "back-end" work.

Virtual Server

I have a virtual server at DigitalOcean where I host all of my websites. A virtual server differs from a physical server in that you're sharing a physical server with lots of different people, though you're totally isolated from one another. By stuffing lots of people into one server, you get reduced costs and increased flexibility in upgrading/downgrading your server when you need to. Digital Ocean offers affordable virtual servers with great support and functionality (they'll automatically install apps for you!), with some of the greatest developer documentation on the internet. If you're new to web development, you should -definitely- check our their resources.

.

DIY-Cy is hosted on an Ubuntu server via DigitalOcean (Ubuntu is a Linux operating system; Linux is the de facto standard OS of servers). I use Nginx, web server software, to manage web requests for hackblossom.org and its associated websites. Nginx is super fast and reliable, meaning that even if DIY-Cy is being pummeled by web traffic, it'll be up to the challenge (static HTML helps a lot here too, as Nginx doesn't need to do anything more complex than return files). And if HACK*BLOSSOM ever becomes an internet sensation, I could effortlessly upgrade my DigitalOcean server to have more memory and bandwidth for serving my websites.

HTTPS

HTTP is the protocol for delivering websites. It's very insecure. Anyone, be they the NSA or your ISP, can see the data being shared between you and a website; it's just plain text. Even worse, this data could be intercepted and tampered with. Sitting in a coffeeshop, someone could inject a fake website into your browser, or collect your passwords, just by monitoring the HTTP traffic going across WiFi.

.

Lucky for us, we have HTTPS! HTTPS uses encryption to protect the HTTP data being shared between you and a website. It also guarantees that the site you're visiting is not a fake or imposter. It used to be that serving a website through HTTPS was super annoying and complex, and not nearly enough websites used it. One of the greatest innovations in recent times is Let's Encrypt, software that automatically generates HTTPS functionality for your website, for free. I cannot overstate how incredible and important this software is!

.

DIY-Cy is delivered via HTTPS, courtesy of Let's Encrypt. I don't have to worry about someone ending up on a fake DIY-Cy website and getting bad advice. I don't have to worry about malicious data being injected into the site when people visit. The nice little lock in your browser's address bar guarantees that you are accessing a safe resource. (I also configured Nginx so that you can ONLY visit the site with HTTPS. You're secure, like it or not!)

HTTP/2

HTTP has been around for decades. Most websites consist of lots of different files, sometimes living in totally different places, and your browser has to fetch them all in order to load the site for you. Most of these files have to be preemptively compressed so they load quicker, too. This flurry of fetching and loading can get pretty inefficient.

.

Times have changed! HTTP/2 was introduced in 2015 as a more efficient way of sharing data between you and a website. When a website has fewer files, HTTP/2 will fetch them in a single HTTPS connection and automatically compress them whenever it can. I configured Nginx to serve DIY-Cy over HTTP/2, so it will load just a bit faster (again, I wanted the site to be quick for folks on poor internet connections!)

Version Control

GitHub is a popular service for maintaining web or programming projects while allowing you to easily work with other developers. You can submit incremental changes to your project, which preserves work history, while allowing you to merge your work with other people's.

.

DIY-Cy is open-source, hosted publicly on GitHub, meaning that you can go read the HTML and CSS for yourself; it's not secret or proprietary. You can check it out here on GitHub. This is crucial for accountability; since you can't see my servers (that'd be a terrible security risk!), you can inspect my DIY-Cy on GitHub and make sure it's up to snuff. Additionally, if DIY-Cy was ever taken off the internet and my laptop was seized by The Man, I could use the GitHub repository to quickly spin up a new website. I also really like the fact that emerging web developers can use the DIY-Cy source as a learning reference!

Creative Commons

DIY-Cy is a creative work. Who owns it? What happens if someone wants to use it? Creative Commons is a non-profit who create legal frameworks for sharing and distributing creative work. As an independent activist who has no inclination for legal junk, Creative Common's resources are so so appreciated.

.

It's absolutely essential that DIY-Cy be accessible to everyone. I also reject any private company trying to exploit this work for profit. Thus, DIY-Cy is licensed under a Attribution-NonCommercial-ShareAlike 4.0 International license, which basically means you can do anything you like with DIY-Cy as long as you:

  • Give me credit for the original work.
  • Are not using my work for commercial purposes.
  • Release your derivative work with the same license.

This means that domestic violence shelters, activist groups, and other well-meaning people can freely adapt DIY-Cy to their needs. A sheisty news organization or content mill could not, though. (It's also worth pointing out that Aurora Lady's illustrations are strictly hers; they are not licensed under Creative Commons).

Analytics

The vast majority of websites track the number of visitors and clicks on their site. Many monitor your cookies, IP Address, browsing history, or other data to know your identity as you browse the web. Such surveillance can provide profitable metrics for advertising. Rarely do you consent to these practices.

.

As an activist, I reject analytics, and do not have any tracking code on any HACK*BLOSSOM project. Some would freak out about not knowing how many visitors their site gets, or which content is popular. For me, user privacy is paramount: I don't want to know who you are or what you read on my sites. I don't want to be in a position where my decisions as web developer could expose you to harm.

.

I lose out on metrics yes, but they have little relevance to my work anyways. I can rely on other means of determining impact. A thank-you email or tweet means far more to me than a raw number of website visitors. Knowing that a single person was able to resist abuse makes it all worthwhile. Effect can't be measured by numbers alone.

Conclusion

Resources are not consumed in a void. When you develop websites, apps, or any other creative tech media, you need to consider the broader implications of your work. Is my audience safe? Am I being diligent in protecting my audience? Am I creating a space that feels empathetic and accessible, both in content and aesthetics? Technology is only as secure as our commitment to our users' privacy.

.

I hope you enjoyed this write-up. May your websites be full of love <3