About This Site

Last Update:

Status: ON-GOING

This site is itself a project.

Here you’ll find the details in my design process in which I often choose simple solutions.

Table of Contents

Digital Garden

Like a real garden, a digital garden is where the gardener plant the seeds of ideas, and hope to grow them. It becomes both the medium and the message of the self. For some it’s a blog; for others it’s their own personal wiki.

This site, then, is my digital garden. Expect that things will be corrected, deleted, edited, fed, grown. Like a real garden, tending this one relaxes me. It helps me reorganize my thoughts by weeding out what’s unnecessary.

go to top ⤒

Public Repository of Independent Research

This site will also have my research material, if any at all. Research, in this context, will be different from that in academia. This bypasses the usual way to earn a post-graduate degree. After reading Nadia Asparouhova’s post, “Reimagining the PhD,” I’m now more inclined to do this. As a result, I won’t get a certification nor a degree; it won’t be official. But what are certifications anyway if not, for better or worse, a glorified piece of paper?

I can’t also imagine spending a few more years in grad school. I am, more or less, happy with the opportunity cost of not dealing with it.

Instead, I enlist you, Dear Reader, as my peer reviewer. I hope you don’t mind.

I think this opens interesting avenues for the stakeholders (me and the public). There will always be people smarter than me; hopefully, I can pull some of their attention here to share their insights someday.

go to top ⤒

Major Sections

This site is divided into two main sections: Log and Projects.

Each post in the Log will start with a list the significant revisions in the Site. After that, I’ll try to add some personal updates as well.

In Projects, I list the thing/s I’m currently doing on the side. Each one begins with Table of Contents (ToC), so readers can skim the topics. The write-ups will be a healthy blend of creative and technical writing, to prevent you from getting bored, something I won’t afford to do in a formal setting. Of course, I’ll include citations properly.

There’s RSS (RDF [Resource Description Framework] Site Summary, or Really Simple Syndication), which is a web feed, to which readers can subscribe to get updated. To do that, one needs RSS reader. Alternatively, many email clients like Thunderbird, Microsoft Outlook, and Apple Mail, have their own built-in RSS reader. You can use any of those too. A web service is available along these lines: check out RSS by email.

go to top ⤒

Front-end

This site’s design borders on brutalism. Admittedly, it’s the result of having only a working knowledge of HTML and CSS, and virtually none of JavaScript. It turns out that this is a feature, not a bug, for static websites anyway.

By foregoing intricate UI/UX design, I can focus on what matters most: content.

By simplifying the design, I’m making this site less bloated. This means that:

I consider these points important as they all relate to my current situation. In fact, websites should be guided by these principles.

go to top ⤒

Typography

Some would say typography should elevate the content. What I have set here gets the job done, i.e., serve readable content.

There are many ways to do that without compromising the overall experience of readers.

I use your system’s default font stack so your computer wouldn’t need to look elsewhere to render the fonts.

I use serif for headings. This is the font stack that I use (as found in my CSS):

h1,h2,h3,h4,h5,h6 {
        font-family:    Iowan Old Style,
                        Apple Garamond,
                        Baskerville,
                        Times New Roman,
                        Droid Serif,
                        Times,
                        Source Serif Pro,
                        serif,
        line-height:    1.2
}

And I use sans serif for body and the rest of the page. This is what I have in my CSS:

body {
        margin: 1em auto;
        max-width: 40em;
        padding: 0.7em;
        font: 1.2em/1.5 -apple-system,
                        BlinkMacSystemFont,
                        avenir next,
                        avenir,
                        segoe ui,
                        helvetica neue,
                        helvetica,
                        Ubuntu,
                        roboto,
                        noto,
                        arial,
                        sans-serif;
}

Using serif for headings and sans serif for body gives a clear delineation which piece of info is which.

go to top ⤒

Default is Dark

I personally like dark mode on my screens because it’s less straining to the eyes, especially in low-light environment.

It’s also said to prolong the device’s battery’s charge. In theory, it’s because the screen emits less photons (light) for using darker colors, therefore using less energy. In practice, it can be difficult to gauge.

go to top ⤒

Links that have a northeast arrow (“↗” or “\2197” in CSS) right after them are external links, i.e., links that take the visitor out of this website.

In CSS, I implented this using a selector that finds all links other than my own, which is ohio.araw.xyz.

Here is a sample CSS code block implementing that:

a[href^="http://"]:not([href*="ohio.araw.xyz"]):after,
a[href^="https://"]:not([href*="ohio.araw.xyz"]):after{
        content: "\2917"; 
        color: green;
        display: inline-block;
}

The above snippet means that if a link does not contain ohio.araw.xyz, then content will be displayed after it.

Currently, these arrows only indicate external links to let visitors know that they will be directed away. Clicking one does not open it in a new tab or window. You have to manually right-click it and select Open in a new tab (or ...window) (or click with Mouse3/MouseWheel).

go to top ⤒

No JavaScript?

Given the simple layout, the interactions with the visitor are limited to reading content and clicking links. These can be achieved without JS.

There’s also less code to maintain, so that’s a bonus, too!

go to top ⤒

No Ads

Only advertisers like ads. I don’t intend on monetizing this, with ads (or with whatever else).

Also, did you know that a lot of online advertising you see depends on JS?

go to top ⤒

Images

Humans can be visual. In the internet, however, we must play it differently.

Big image size takes time to load, and will need more resources to serve it to the visitor. More resources mean more energy consumed means larger carbon footprint.

When adding an image to a post, I make sure that:

I use imgp, a “high-performance cli batch image resizer and rotator,” that I can use offline.

From the command line, I do something like:

imgp -x 1366x0 --quality=85 -ew --optimize ~/image.jpg
go to top ⤒

Back-end

I use Hugo static site generator to build this site.

go to top ⤒

In the name of Static Site Generator (SSG)

Using SSG like Hugo arguably increases security by simplifying a lot of things2. There is no server-side software to install, no database to keep up to date, and no PHP plugins to upgrade.

In many SSGs, content is written in Markdown, a simple markup “language” for creating formatted text using a plaintext editor. Markdown files (.md) are lightweight, portable, easy to backup, and transfer between computers.

Generation time depends on the size and volume of files that need to be compiled. Some SSGs could take up to a minute to build one whole site; some only milliseconds.

It is tedious to go through all that. Unlike what-you-see-is-what-you-get (WYSIWYG) CMS like Wordpress in which you can easily post a new blog, with SSGs, you will have to, at least, type your post offline, compile, and then push to your web host.

But I’ll take the massive freedom gains provided by SSGs3 anytime!

go to top ⤒

Using Hugo

Great Hugo tutorials abound online, in blog posts and video formats. Some target new users; some have specific use cases in mind.

However, like most tutorials online, they get outdated quickly. Sooner or later, reading the official documentation becomes necessary.

As with everything else, it’s important to be patient and willing to read the manual. In case you’re stuck, you can also ask the community. Hugo has both decent community and documentation.

Honestly, Hugo’s learning curve is steep, especially if you’re like me with no “real” coding experience. But if you have the patience to read, learn, and ask for help, Hugo, as well as other SSGs, might just be the right magic for you.

My process involves a lot of trial and error to get this site looking the way it is now, simple as it is.

go to top ⤒

Disabling Internal Templates

Hugo ships with internal templates that I have disabled because they have serious privacy issues, will add unnecessary bloat to the site, and I don’t have any use for them. They are:

To have a privacy-centered configuration, I followed this documentation and disabled all services.

go to top ⤒

Privacy

As far as I’m aware, this site:

The above findings are according to The Markup’s Blacklight tool.

go to top ⤒

Hosting

Vultr currently hosts this site using their cheapest VPS. The VM runs on Debian 11 “Bullseye”.

go to top ⤒

nginx

nginx (“engine X”), is an HTTP and reverse proxy server. To meet defensive security standards, I have the snippet in my server configuration:

server {
        server_name ohio.araw.xyz ;
        root /var/www/ohio.araw.xyz ;
        index index.html index.htm index.nginx-debian.html ;
        add_header Content-Security-Policy "default-src 'self';" always;
        add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;
        add_header X-Frame-Options "SAMEORIGIN";
        add_header X-XSS-Protection 1;
        add_header X-Content-Type-Options nosniff;
        location / {
                try_files $uri $uri/ =404 ;
        }
}

With this, my site scores A+ in Mozilla Observatory.

go to top ⤒

Inspiration

In high school, computer lab was not my favorite, and I’m okay with that.

One of our lab works was to create our own (offline) website. It had to be interesting, catchy. That’s why many of my classmates had <marquee> and <blink> tags in their works.

I don’t remember how mine looked, but I’m sure it’s basic, with broken links hither and thither.

More than a decade later, here I am, building one again. This time, I’m building this site because I enjoy doing it for myself. At least, I’ve retained the important bits on how HTML works, so I’m not starting from zero.

I’d like to say that I dedicate this to my former self, who couldn’t seem to grasp the importance of web design. As we rely on the internet for improving our collective knowledge, web designers and developers must see to it that everyone can access information, in spite of the current tech they have.

Here are some other sites from which I also got inspiration:

go to top ⤒

  1. Exchangeable image file format (EXIF) metadata is removed to help reduce the image size. As an added bonus, it’s scrubs the image of details that might divulge unnecessary information to internet strangers when they inspect it, such as data, time, and location the image is created. ↩︎

  2. Or, if you have Pandoc in your computer (installation is easy), you can convert Markdown to HTML, and use those in your site. It takes some fiddling around the documentation, but it can be done. ↩︎

  3. Check out Jamstack for a list of hundreds of possible SSGs! ↩︎



Useful? Consider supporting me.

Back to Index :: Log :: Projects