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.
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.
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
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.
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 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!)
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!
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).
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.
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