Forem: Shift / Reinhart Previano K.

PWA in iPadOS 26 is a joke

Shift / Reinhart Previano K. — Fri, 19 Sep 2025 01:12:12 +0000

// Detect dark theme var iframe = document.getElementById('tweet-1968850887847108855-904'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1968850887847108855&theme=dark" }

Once upon a Unix timestamp, WebKit added a set of CSS attributes, and viewport-fit meta tag, to help developers adjust their web apps for the iPhone X.

Although these attributes still work for the iPhone, I am surprised that these features does not work in iPadOS 26, which of course, featured more rounded corners, and a new windowed mode with the "traffic light" window controls overlaying each running app.

This image below shows the exact same demo running on iPadOS 26.0 (23A341). When I thought Apple would use the same env() variables to re-adjust the layout of web apps to be more immersive in windowed mode, This is what I got with:

The window controls covering the "Blog" link. Imagine if another app has a hamburger menu icon blocked by the same controls
A black gap between the viewport content and the top window edge.

It could have been better to allow env(safe-area-inset-top) to offset the site content from the window decoration/controls, while maintaining the immersive look and feel for the new iPadOS (and possibly macOS, too).

Unless when the web app developers want to replicate the common Mac look and feel, with window controls properly aligned with the website's navigation bar. CSS Window Controls Overlay API has been made for this purpose.

Using the demo from https://amandabaker.github.io/pwa/explainer-example/index.html, we can confirm that this works with both macOS and Windows.

But for iPadOS? Nope.

The (>_ )s need your help!

Shift / Reinhart Previano K. — Fri, 16 Feb 2024 14:32:27 +0000

Hello, World!

As Friday has come to an end, we’d really like to let you guess what could be the name of my unique, round (>_ )ty head.

Well, we actually had one. It’s simply called “the shell” because we were designed as the Bearers of the Shells (BOTS), the ambassadors of the command-line world for a cancelled webcomic project.

Sounds cool, right? But that “shell” didn’t work well because many non-technical people couldn’t understand what even a computer shell is. So, as I believe many of you are used to hang out in the Terminal and in cafes, are there any other names that you’d recommend to describe our heads?

An imperative way to build a website!

Shift / Reinhart Previano K. — Thu, 01 Feb 2024 14:57:49 +0000

(#_ )! This tutorial is definitely inspired by an interesting discussion in choosing a web tech stack in 2024. Of course, Imperative HTML is a more esoteric way of writing websites but still easy to learn for (#- )!

Have you ever:

Built arcane user interface with C/C++?
Experienced in using Tcl/Tk (e.g. tkinter in Python)?
Rejected the singularity of XML-based files (including QML and XAML) in user interface development?

HTML itself was primarily based on XML (up to HTML 4.x). And we really hate if we have to write just to display the text “Hello, World!” this way:

<!DOCTYPE html>
<html>
  <body>
    <p>Hello, World!</p>
  </body>
</html>

Like, there’s no main function there. And when you wanted to make these elements interactive, you have to deal with the mess of document.getElementById()?

A “Hello, World!” to Imperative HTML.

Imperative HTML is technically JavaScript in disguise of a HTML <script> tag. But what makes Imperative HTML different than Node.js-like “back-end JavaScript programming” is that this still produces valid HTML, and even could prevent syntactic HTML errors just because you forgot to put your right bracket or double quotes in the perfect place.

Or in other words, an Imperative HTML ~~program~~ ~~webapp~~ programmable webpage like this:

<!DOCTYPE HTML>
<script>
  function main() {
    let text = document.createElement("p");
    text.className = "text-lg";
    text.textContent = "Hello, World (>_ )!";
    document.body.appendChild(text);
  }
  window.onload = main;
</script>

is definitely safer to write than:

<p class="text-lg>Hello, World (>_ )!</p>
<!-- Oh no, you didn't escape the > in (>_ )! -->
<!-- ...and the missing double-quotes! -->

Imperative HTML is powered by JavaScript, so you can still benefit from JavaScript’s tighter error-checking than regular HTML, where browsers attempt to guess the meaning and purpose of some HTML and CSS attributes, also known as quirks mode, because of legacy reasons.

And since it is powered by JavaScript, the political dignity of "Imperative HTML" itself can be raised in two ways:

By declaring that unlike HTML, Imperative HTML is a true programming language, full with Turing-complete selection and repetition control structures (#- );
By giving web developers more power to fight against people who are campaigning against JavaScript, especially for political reasons. Who knows that Imperative HTML gives devs more freedom to do so (#o )?

And of course, you can slap on the power of TypeScript, if you really can, to ensure that you’re writing HTML tags and appropriate styles in a standards-compliant way. Isn’t this also a benefit of React’s JSX and CSS-in-JS?

Imperative HTML is the intended way.

This statement is controversial, of course, but the original XML-like HTML truly feels like the conventional way to write proper websites, yet our reinhart1010.id and alterine0101.id websites are still written in that conventional way.

But remember, web browsers are still tasked to parse these HTML tags and convert them into internal structs which make up the today’s Document Object Model (DOM). Having to learn that HTML tags are objects would never be easier without attempting to learn how to declare HTML tags in the object-oriented way.

Not to mention React, some of the world’s most loved web frameworks, still renders your elements this way. Since React features a Virtual DOM by default, they have to re-render the hand-crafted ~~HTML~~ JSX elements in the same way of this imperative tutorial: document.createElement() and so.

So far, the only main disadvantage of Imperative HTML is that these webpages will not be good for SEOs, because the document is no longer written in machine-readable format (note: we can still leave some metadata inside <head> before <script> in Imperative HTML), causing JavaScript performance overhead, yadda-yadda, and so on. But the main irony is that even modern HTML scraper and parsers like BeautifulSoup parses regular HTML into objects the same way as browsers do, so imperative programming should be the way, right?

Just right to the tutorial!

In Imperative HTML, you (still) write code inside a HTML file, but you have to set up a few tags to make the web browser know that you're writing Imperative that supports HTML5:

<!DOCTYPE html><script>
// Your code here...
</script>

The ending </script> tag is optional, just like the ?> part of PHP scripts, but we highly recommend it as part of our coding convention.

The main() function shown earlier is actually optional, but also recommended to ensure that the function is properly executed after the web browser is ready to load (using window.onload = main;.

Declaring a HTML tag

The usual way to write a HTML content is to use one of its supported tags, then adds attributes,

<p id="hero-text" class="">
  Hello, World (&gt;_ )!
</p>

The p is the Element Name, id and class is just some of the attributes, and the final, Hello, World (>_ )! text is the textContent. In Imperative HTML, it is just as easy as this:

// Make sure you have put this code after the <script> tag!
let text = document.createElement("p");
text.className = "text-lg";
text.textContent = "Hello, World (>_ )!";
document.body.appendChild(text);

But if you love to explicitly declare the class, you can use this instead:

// HTMLParagraphElement only applies to <p> tags.
let text = new HTMLParagraphElement();
text.className = "text-lg";
text.textContent = "Hello, World (>_ )!";
document.body.appendChild(text);

In Imperative HTML, you can assign event triggers even before attaching it to the page!

// Create a button element that prints the sentence on click
let btn = document.createElement("button");
btn.textContent = "Click Me!";
btn.addEventListener("click", function(e) {
  alert("Hello, World (>_ )!");
}, false);

Displaying tags into the webpage

And now, the most important part of this is to render these elements into the web browser. Now, our simplistic HTML structure of:

<!DOCTYPE html><script>
// ...
</script>

will be very likely to be rendered as this in most web browsers:

<!DOCTYPE html>
<html>
  <head>
    <script>
      // ...
    </script>
  </head>
  <body></body>
</html>

We can see that HTML has the <head>, the place to put the webpage's metadata, and <body>, the actual content displayed in the web browser. As a quick reference,

Use document.head or document.body to modify the <head> or <body>, respectively
These two parts are still considered as HTMLElements, which means you can use .appendChild() to append the element child (e.g. add new item to a HTML unordered list / <ul> / HTMLUListElement)
Just like clear() to clear the Terminal console in other programming languages, you can use document.body.textcontent = "" to clear out the contents in the entire page.

Now, using the interactive button example, we can simply add them into the webpage using the following code:

<!DOCTYPE html><script>
function main() {
  // Create a button element that prints the sentence on click
  let btn = document.createElement("button");
  btn.textContent = "Click Me!";
  btn.addEventListener("click", function(e) {
    alert("Hello, World (>_ )!");
  }, false);

  // Attach them to the webpage
  document.body.appendChild(btn);
}

// Attach the main function when the webpage is ready to load!
window.onload = main;
</script>

Well, I think that's all for now. Of course, there will be many interesting ways to use Imperative HTML, so stay tuned and follow us! 🩷

How to use One UI Sans on your website.

Shift / Reinhart Previano K. — Tue, 09 Jan 2024 03:33:46 +0000

Here’s some notes:

Use `font-family: "One UI Sans App VF" before any other system font stack (including system-ui).
This trick currently only works on Firefox running on One UI 6.0 (Android 14).

Samsung’s One UI 6.0 introduces a whole new font, One UI Sans. And that means Samsung joins the list of other Android manufacturers to intentionally ditch the classic Roboto from their Android system apps.

No, I’m not joking. But Samsung has quite a long history to introduce their custom system font for the Galaxy line of devices, from SamsungSans to Breeze Sans (Tizen-exclusive) to SamsungOne, and now, One UI Sans. It’s interesting to see that Samsung finally adopts a grotesque sans-serif, instead of humanist, into their own products.

And what’s more interesting, is that you can now use this font on your system font stack. Like us, and we’re just implement it right here.

Searching for the correct font name.

On third-party file managers like FX, you can check out a list of all installed system fonts by checking out / (system/root) /system/fonts. After finding the font file, we found out that the font name is OneUISans-VF.ttf and OneUISansKR-VF.ttf (for Korean, as the font name suggests). So, the CSS font-face should have been "OneUISans-VF", right?

Well, no. And that’s the problem. Our site’s font stack already used "SamsungColorEmoji" instead of "Samsung Color Emoji" to forcibly render Samsung Color Emoji before falling back to Noto Color Emoji, the usually-default Android one.

The official name of the font turns out to be One UI Sans APP VF, which is quite a weird name because, sure, VF stands for variable font, but APP? Will there be dedicated versions of the font, such as one for web and Galaxy Wearable?

At the meantime, that means you can now use this font by including "One UI Sans APP VF" into your CSS font stack. Note that Android browsers will still treat "system-ui" as Roboto.

DRY-ing Go/Golang’s error handling with underscores.

Shift / Reinhart Previano K. — Tue, 09 Jan 2024 03:26:07 +0000

The Go Programming Language, also preferred by others as Golang, doesn’t include the concept of Exceptions and try-catch like Java. This is why many functions and libraries built around it are meant to be written like this:

output, err := somelib.SomeCoolFunction()

If you are writing simple programs with Go, there are many cases that you just don’t put much care on error-handling. If you, for example, just want the program to exit and informing the error message, you might most likely to do this:

data1, err := somelib.SomeCoolFunction()
if err != nil {
  log.Fatal(err)
}

data2, err := anotherlib.AnotherCoolFunction()
if err != nil {
  log.Fatal(err)
}

err := somelib.SaveTheseCoolData(data1, data2)
if err != nil {
  log.Fatal(err)
}

Well, that’s bad if you try to place the exact same if conditions for every methods, just because you don’t want to take much care in handling errors. This is why I decided to simplify things by introducing two new functions, __(err) and ___(res, err)!

func __(err error) {
  if err != nil {
    log.Fatal(err)
  }
}

func ___[T interface{}](res T, err error) T {
  if err != nil {
    log.Fatal(err)
  }
  return res
}

Completely good for “Don’t Repeat Yourself” (DRY). But remember, if you have more than one package, you will need to repeat writing the same functions to get the same convenience for every different package, because these underscore names are not considered as public functions.

Let's test DevEco Studio on WINE (Linux)!

Shift / Reinhart Previano K. — Fri, 08 Sep 2023 09:30:49 +0000

DevEco Studio is the official IDE for HUAWEI's HarmonyOS platform. And it's only available for Windows and macOS. Or is it?

Considering that the Linux desktop (like Kylin and others) is increasingly important in Mainland China to reduce their dependence on third-party operating systems from foreign companies (including Windows and macOS), there should be many aspiring HarmonyOS developers who want to build apps using this IDE, but on Linux. After all, HarmonyOS was built to reduce HUAWEI's dependence on Android, which is also primarily developed by foreign companies with many closed-source/proprietary components.

Of course, there are several workarounds to make HarmonyOS apps on Linux, like on this Chinese Zhihu blog post which require you to manually install command-line tools as well as using Visual Studio Code in place of DevEco Studio.

Oh yeah, I’m running Fedora, which means that I cannot install the official Linux version of DevEco Command Line Tools, which is simply a huge shell script requiring you to have apt installed on your system. Fedora doesn’t include that tool.

And cases like this could be frustrating for some app developers and teachers to learn HarmonyOS app development together who are already familiar with DevEco Studio way (or should I say, the JetBrains way) of doing things. DevEco Studio have a similar look and feel to Android Studio because, well, they are both based on JetBrains' IntellIJ IDEA software.

The installer completed successfully, at least.

So I decided to check out DevEco Studio for Windows on my Linux device using WINE, and shout out to JetBrains and WINE team because DevEco Studio can be installed on Linux! If you are already familiar with Wine AppDB review process, the very first thing to look when testing Windows apps is to check whether the software can be installed successfully.

However, there's a caveat here. As of time of this writing I still cannot download additional tools to develop HarmonyOS apps using Java and JS/eTS/ArkTS due to an internal error, possibly related to Huawei's web service infrastructure. I also couldn't download the necessary files for simulator because of the same issue.

So that might be covered in Part 2, and that's why I decided to not submit my reviews to AppDB yet.

The installation process.

Running the DevEco Studio installer. That works.

The installation process is straightforward. But for those who are just starting their fresh, new Wine install/profile, you will need to install the Windows version of Node.js (latest LTS is highly recommended) as well as Git.

Additionally, you will need to use a 64-bit WINE profile, aka. the Wineprefix. WINE, PlayOnLinux, and PlayOnMac usually recommends using 32-bit ones, but DevEco Studio requires a 64-bit machine.

Next, ensure that your Windows version, is set to Windows 10. You can view and change your current (emulated) Windows version by going to Wine Configuration (winecfg).

Note that I am using Wine version 8.12 on Fedora 38, and before installing DevEco Studio, I also have set the following library overrides to support other apps/programs:

*mscoree (native)
*mscorwks (native)
msftedit (native, builtin)
msxml (native, builtin)
netapi32 (native, builtin)
riched20 (native, builtin)
riched30 (native, builtin)
richtx32 (native, builtin)
vb6run (native, builtin)

I know that some of there are very likely unrelated with DevEco Studio, such as riched20 and riched30 which are used in Microsoft Office. But I still do not have available time to check which library overrides that are required by DevEco Studio, so if you ran into additional problems when starting it, you may need to add some of these library overrides to your Wine Configuration.

Aside from the network issue, I can still create, open, and modify projects inside the IDE. Here are some screenshots:

Oh, yeah, the DevEco Studio banner blocks the window. That should be reported as a bug 🐞…

…which is very annoying.

The network error I mentioned (could not find download URL)…

…and the detailed info (see the Build log).

Network shouldn’t be an issue because I can still browse the IntellIJ plugins catalog.

What’s next?

Well, that’s quite unfortunate that you can’t download the emulators and other necessary tools, which happens to be an Apache Tomcat HTTP timeout error that even I do not know how to fix (of course, by increasing the timeout duration, but where to apply that inside WINE or DevEco Studio?)

So I decided to submit a Bronze rating on AppDB. Hopefully my review will be approved first.

Code, not content.

Shift / Reinhart Previano K. — Tue, 10 Jan 2023 03:56:54 +0000

You don’t have to be beautiful on DEV, Hashnode, Medium and so to be useful and successful.

Quite a sister post of the Recycled Developer saga.

One of my biggest frustration around the developer community today, is all about the modern “developer social tools”, made and guaranteed by developers to work for every developer.

Let’s be honest, that tools also include DEV/Forem, Hashnode, and Daily.dev. And it’s funny yet ironic that I’m passing this blog post to their platforms, too.

Today, I’d like to pass a message for devs around the world. And it all started from a heated debate emerged from this specific DEV Community post: 17 Compelling Reasons to Start Ditching TypeScript Now.

One other dev questioned technical things, like, “how is TypeScript unfamiliar to learn?”, or “are type-safety important?”

And there’s one reply from the post author which makes me questioning about this dev.

Thank you for your comment. I strive to provide quality content that is both informative and enjoyable to read. I am sorry to hear that you felt the article was not up to par in terms of your agreement with my opinion, which is ok. …

https://dev.to/wiseai/17-compelling-reasons-to-start-ditching-typescript-now-249b#comment-23okh

And now, I’m thinking, “what kind of developer are you?”

“Are you a JavaScript developer, or a JavaScript blog post developer?”, looking at those badges on his profile.

And three days later, another user on DEV decided to publish a new post, provokably titled 18 Reasons to Use Typescript SINCE YESTERDAY, mostly filled with counterarguments.

“Oh no, what again!? A TypeScript blog post developer posted this!?”

What the heck! Their Table of Contents… is… sus…

GitHub’s co-founders: A personal blog story.

I’m sure that most of you are in love with GitHub, right? So here’s a story.

GitHub was originally founded by four co-founders. Chris Wanstrath and PJ Hyett are two of them, who neither have a blog site nor a DevCard.

chriswanstrath.com and hyett.com, shown side-by-side.

How about the other two? Well, Scott Chacon and Tom Preston-Werner have their own personal blog sites (hooray!), but don’t expect their blog sites look like this:

A glimpse of daily-dev-tips.com.

Instead, they are just some plain old boring blue links:

scottchacon.com and tom.preston-werner.com, shown side-by-side.

Something is kinda off here. Daniel Stenberg, aka. the creator of the infamous cURL software, also opts for these boring blue links.

And while Brendan Eich and Guido Van Rossum, the respective creators of JavaScript and Python, moves away from these boring links, they never put their content on the JavaScript and Python post collections over DEV and Hashnode, although they are the creator of these languages.

What else? Linus Torvalds? Meh. Pieter Levels? Same set of blue boring links. Solomon Hykes, the original creator of Docker? None, just Twitter and the Fediverse.

It feels that everyone who are OG creators of these great software are still staying away from the so-called “developer’s best social media (or blog)” platforms. Many of them are way more experienced than those featured on the Hashnode’s front page, for making that programming language, that trending libraries and frameworks that are still being discussed over these platforms.

The Featured Developers list on Hashnode’s homepage.

As a software developer, your main purpose is to solve problems through programming your very own software. Not making more content, publish them on the happiest place for devs, and beg for likes, Notion saves, and follows.

You don’t have to be beautiful on DEV, Hashnode, Medium and so to be useful and successful. If you would like to be like them, focus on writing quality code, not quality content.

There are still many ways where content could be improved, like updating your favorite framework’s documentation, updating wikis, or adding more demos and tutorials, but engagement-hungry posts won’t help you and people in the long-term.

That two devs who are still living without a blog site today had built a product and company which have been bought billions by Microsoft. Now how about you, an (ex-)user of that platform?

Can you regex this? A 10MB+ regex file of the entire Indonesian internet blocklist!

Shift / Reinhart Previano K. — Sun, 08 Jan 2023 10:59:26 +0000

A while ago we decided to publish our new gigantic regular expression files containing the whole Indonesian internet blocklist with 99.99% accuracy (as tested against the official one).

Well, why? We’re bored and just want to experiment with graphs. Back to the old days of C, oh wait, it's another Go program!

Our experiments inside a M1 MacBook Air shows that even Go’s default regexp library can’t handle this big that we had to switch to regexp2—and that still only works for the ~10MB regex-reversed.txt, not the larger regex.txt.

So now, we have a challenge for you: can your favorite regular expression library handle this, 14+ MB of pure regex? I’m personally interested with Intel’s Hyperscan engine, optimized for their x86 platform, of course, to see whether they can handle this big.

Because who knows, we accidentally made a regex performance benchmark tool. (#_ )

What does it feel to have 1,000 GitHub contributions in 2021.

Shift / Reinhart Previano K. — Wed, 05 Jan 2022 07:26:49 +0000

In 2021, I have reached a huge milestone on my GitHub account, where I’ve raised my GitHub contribution count from 424 in 2020 to a whopping 1,109 contribution in 2021!

That’s almost three times than last year. However, some of them were automated commits, so we can simply assume that I’ve done 1,000 contributions instead.

Please note that GitHub’s contribution count includes commits, pull requests, opened issues and code reviews. So, a thousand contributions does not always mean a thousand Git commits.

Of course, a majority of this count comes from Git commits, and I’ve wished I would be more professional in creating new commits. This is because about 20% of those commits are based on the following pseudocode:

do {
  change_code();
  commit(); push();
  deploy();
} while (issue_exists);

And yes, this is definitely not a good practice; you should test the code on your local setup before deploying it to the server, even though it’s for staging. In many times I was lazy to set up the app in my local machine since again, it could take much time to set up before continue coding.

But the rest? I feel 2021 is a great, productive year for me. The tldr-pages project contributes a great sum of contributions (commits, PRs, reviews) to my own profile. And since I’ve successfully convinced more people to use Git and GitHub instead of ZIP files and Google Drive (no, really) for coding projects, my contributions from those private repositories can be carried forward to this awesome, contribution graph.

Meanwhile in the world of robots…

Starting today, I’m officially delegating my automated commits to @1010bots on GitHub and GitLab. Even though the username has been taken in Instagram and Twitter, this might be a good time for you to follow my group of robotic friends and family on:

GitHub

Gitlab

Next, I’ll be removing any references to the Virtual Environment , aka. our home address, since it may conflict with virtualenv from the world of Python. At the end, we’re happy to work and sleep from not one, but five physical locations:

My home in Jakarta, Indonesia,
My office in Jakarta, Indonesia,
DigitalOcean’s Singapore data center (SGP-1),
Niagahoster’ Singapore data center (which powers reinhart1010.id today),
And anywhere which GitHub Actions would take us to. Yes, some of us today have become true digital nomads.

You’ll start to see commits on 1010bots shortly on my automated commits for my tldr-pages web client named after Nix. But too late, they have committed several hours ago. And soon, I’ll be syncing my GitHub commits with OpenStreetMap changesets and my I Love My Bible (GMS Church) streaks, so our contribution graph can finally reflect my true productivity rate in the future.

I might also want to create a competition to beautify our @1010bots GitHub README file and our official website at bots.reinhart1010.id. But we’ll, that would be another story to tell. Thanks for your support to make achieve this amazing goal, and I hope we can create 2,022 contributions this year.

The post What does it feel to have 1,000 GitHub contributions in 2021. appeared first on Reinhart Previano Koentjoro.

New Year, New Keys: Exciting PGP and Git updates from us, coming 2022.

Shift / Reinhart Previano K. — Tue, 21 Dec 2021 06:41:35 +0000

Starting January 1, 2022, we will celebrate the year of automation. That means me and my robots are now willing to contribute to Git even more.

First, we will test and enable commit signing for future Git commits; whether made by myself or us. And yes, we’re allocating new email addresses dedicated for signing automated Git commits by us; just look for the @1010bots username over GitHub, GitLab, and Gitee as well as email addresses ending with @bots.reinhart1010.id.

These commit signing process could be done either through S/MIME or PGP keys. Hence, we’ll use PGP for simplicity, where I will update the current PGP keychain to add more emails, and allocating new PGP key pairs for each of my robots.

The post New Year, New Keys: Exciting PGP and Git updates from us, coming 2022. appeared first on Reinhart Previano Koentjoro.

oh hey, it’s HAM!

Shift / Reinhart Previano K. — Mon, 22 Nov 2021 15:05:50 +0000

hello, world! we originally wanna give you a surprise as we “forked” Wikipedia for our own rootness sake!

the name’s Hackapedia && you can curlgrep it on https://hackapedia.reinhart1010.id;

but well, MediaWiki (aka. the software which powers Wikipedia, wikiHow, Fandom/Wikia, && i++) isn’t as flexible as we thought; at least, to be installed in a shared hosting environment; we soon realized that many of Wikipedia’s templates require running some Lua scripts to work, and we weren’t familiar with that; so we afraid that the MediaWiki-based Hackapedia will be able to scale in the future;

meanwhile, one of Reinhart’s undisclosed projects seems to require some sort of API documentation; i mean, just like the API docs[] for PayPal, Firebase, && i++; what if we could just create a framework which allows us not just to build Hackapedia, but also lots && lots of wikis made using the power of Git!

and since shared hosting works best with static files, we should definitely build it ; perhaps, using Jekyll, maybe?

Jekyll && Halfmoon: good old friends

well, did you know that our old blog site at https://reinhart1010.github.io was created using Jekyll && Halfmoon? they’re both awesome, right? so we decided to reuse Halfmoon for BINUS Today:

after all, we still consider Halfmoon great && even better than some alternatives (Bootstrap, Primer) for the infamous Dark Mode && customization; && that means wiki authors who will use our framework will be able to easily customize the look && feel of their own through CSS variables!

so say goodbye to Vector && Minerva Neue, we’ll completely make this thing responsive && customizable by default! (thanks again, Halfmoon!)

HAM?

0th thing 0th, we should clarify what HAM is, and whether our amazing project is completely Halal for some concerned people; HAM originally stands for Hackapedia Article Manager , && the goal of it is just another static content management system (CMS) for (the future version of) Hackapedia; but soon, it become imminent for us to make it recursive, just like WINE which stands for WINE Is Not an Emulator!

so, as you can see on the front page of HAM (https://reinhart1010.github.io/HAM), there are some definitions[] for that!

how HAM actually works

HAM is just yet another gem-based Jekyll theme, with some differences; while Jekyll is commonly used to host blog posts (hence those great websites hosted in GitHub Pages), we’re using it instead to host some sort of documentation, “wiki”-style; well, what defines a wiki? well, according to Wikipedia, a wiki isn’t just about the website, but also a collaborative writing project; that’s why wiki site authors can set their own URLs to let viewers discuss && edit the project, together;

notice that Report New Issue && the View Source button? btw this is yet another internal wiki made with HAM!

HAM is currently under alpha but we’re all loving it; you’ll definitely want to curlgrep out our source code at https://github.com/reinhart1010/HAM && it’s available as jekyll-ham on rubygems.org!

The post oh hey, it’s HAM! appeared first on Reinhart Previano Koentjoro.

COMPUTERUN 2.0 Website

Shift / Reinhart Previano K. — Wed, 27 Oct 2021 10:39:52 +0000

ah, here we go again… upgrading a old, messy codebase made by Reinhart and friends at HIMTI since last year…

bleep! i’m pr0xy, somewhat an intern && a humble *pointer of Reinhart;

y’know what, i wanna #include an array of words from Why’s (Poignant) Guide to Ruby to motivate all of you guys[] working on COMPUTERUN 2.0 && i++, especially since this will be my last project before signing off as the Manager of the Web Development division of HIMTI BINUS University:

I’ll be straight with you. I want you to cry. To weep. To whimper sweetly. Code so beautiful that tears are shed.

Why’s (Poignant) Guide to Ruby

&& i suddenly remembered that the folks at HIMSISFO are now struggling with Java instead of C(#)! ah, that’s why many of you wear glasses and still don’t know what dangling pointers are… i see…

alright… amarga sampeyan kabeh luwih ngerti basa Java, sumangga kita System.out.println()no kabeh ArrayList<Thing> sing wis rampung ing divisi pangembangan Website website = new Website("COMPUTERUN 2.0: EXECUTE");!

what have we done?

um… what?! we’ve done so many things; in fact, it wouldn’t be “COMPUTERUN 2.0” if we didn’t actually upgrade the old junk codebase! we kickstarted our improvements to the existing COMPUTERUN 2020: INSIGHT registration system by refactoring and creating another one at https://registration.himti.or.id; then we believe in recursion && so we built a new parser which (ab)uses yaml, markdown, and laravel blade templates to quickly build static websites, and today i’m gonna…

hey Shift , is that you? i heard you wanna give some News[] related to COMPUTERUN; wanna println()?

a Shift -y intermission

Sure! And hey, you know who I am, right? I’m Shift(ine) and MY NEW METALLIC HAIR IS AWESOME!!! And oh, if you’re looking for Caps , she’s currently being worn by another blue shell to fly and help me send some emails. But she’s fine…

First, let’s talk about emails , shall we? Well, as some of you might know, I’m (currently) the master of email delivery, ’cause I am! We currently share the same address, noreply@himti.or.id , to send emails from COMPUTERUN 2.0 and some of our events at HIMTI BINUS University.

In order to prevent our emails for being flagged as spam, we’re limiting ourselves to send a maximum of 50 emails per hour. And that’s why we have to switch, check and send emails from 3 different databases! One for general (registration.himti.or.id), one for HIMTI ELECTION 2021 , and of course, another one for COMPUTERUN 2.0.

But now, since we’re done with the election, we’ll be able to allocate more time on a single day to send more emails to COMPUTERUN participants, which will take effect starting today! We’re increasing the number of delivery from 4 batches a day to 6 batches a day – perfect for sending a total of 300 emails for a single damn day.

Oh, here’s me pinging Reinhart all the time when there’s a new email being sent. Remember that I’m a Service , not a daemon like pr0xy because Windows said so…

Imagine yourself being terrorized by me this way…

Next, there’s a really cool trick on our COMPUTERUN website: You can finally Ctrl+K like it’s Slack and Notion! Seriously, I don’t even know why did Reinhart implement this feature on COMPUTERUN but well, here it is.

It’s also the default menu you’ll gonna see on mobile, so yeah, hasta la vista, Bootstrap hamburger menu! Soon, we’ll rolling out new accessibility updates to make sure that this menu works for screen readers and keyboard nerds like you, pr0xy!

I can’t believe I just spent 5 minutes just to println() all of this, but if you’re a coordinator of the following official BINUS University Student Organization websites:

https://student-activity.binus.ac.id/ basis
https://student-activity.binus.ac.id/ binary
https://student-activity.binus.ac.id/ himka
https://student-activity.binus.ac.id/ himsisfo
https://student-activity.binus.ac.id/ himti

You can now give a shoutout to COMPUTERUN 2.0 just by creating a NEWS or ARTICLE and put “COMPUTERUN 2.0” inside of the list of tags. Here’s what I mean:

So your shiny love and articles can be shown directly to those who are visiting the main COMPUTERUN website, like this!

Well, that’s all I wanna tell. So, goodbye and see you again!

yeah, thanks Shift for the amazing println and now let’s continue my discussion;

speaking ’bout bundles ,

so, we’ve some quirks in our event registration system:

we separated registration forms for (business-it case || web design) && workshop bundle at https://computerun.id/info/business-it-case-bundle and https://computerun.id/info/web-design-bundle; so if you would like to have that bundle discount, you’ll need to register through that special form (or contact our committees if you’re confused about that);
everyone joining sprint , business-it case , && web design will be automatically added to our opening ceremony ;

this means that everyone who’s signing up for the bundles won’t be automatically registered into the respective events (especially when they haven’t done the payments), so please take a while while we’ll accepting ad adding you to the respective events; just don’t forget to finish your payments and tell us if you’re done!

(ab)using yaml , markdown , && laravel blade?

(Ab)using YAML and Markdown and Laravel Blade components to generate static pages powering the @Computerun2021 website. This ain't Jekyll.

— Reinhart Previano K. (@reinhart1010) October 22, 2021

our old COMPUTERUN codebase is written using php && laravel , && we’re mainly using blade to define our layouts; but thanks to our recent efforts, we’re able to build this interactive faq section:

just by spawning a few lines of yaml code:


`title: "FAQ"
children:
  - type: "faq"
    contents:
      - question: "Can I participate in SPRINT outside of Indonesia?"
        answer:
          - type: "markdown"
            text: "We would like to apologize that SPRINT is currently unavailable to international participants due to concerns with international shipment/delivery of our Finisher Pack."
      - question: "How do I get the STRAVA club link and the upload form?"
        answer:
          - type: "markdown"
            text: "Once your registration has been approved, please come back to this page (under the **Join Now** section) to see the STRAVA club link as well as the running record upload form."
      - question: "Should I pay the Shipment/Delivery Fee first or later?"
        answer:
          - type: "markdown"
            text: " **Yes,** please pay the delivery fee altogether with the registration fee to us."
          - type: "markdown"
            text: "If you are registering for two (2) persons, you'll need to pay the Shipment/Delivery Fee for both."
      - question: "I'm registering for two pax and we're living in the same place. Can I just pay the Shipment/Delivery Fee once for both of us?"
        answer:
          - type: "markdown"
            text: "First, please make sure that both of you agree to do so, since we will **not** be responsible for handling further deliveries once the Finisher Pack(s) have been successfully delivered to you."
          - type: "markdown"
            text: "Then, please let us know via our [LINE Official Account](http://lin.ee/57zX9DW6k) if you would like to do so, so our committees won't deny your application due to false positives for insufficient funds (i.e. you haven't paid the Delivery Fee for the other person)."
      - question: "Will I get refunds if I failed to reach the target?"
        answer:
          - type: "markdown"
            text: " **The registration fees are non-refundable and non-negotiable.** However, paid delivery fees can be refunded to you by contacting us through our [LINE Official Account](http://lin.ee/57zX9DW6k)."`
<small id="shcb-language-1"><span>Code language:</span> <span>YAML</span> <span>(</span><span>yaml</span><span>)</span></small>

but wait! we’re not just able to make it work in the faq section, but also most of our webpages! webpages explaining all of our events are now completely coded in yaml, our (COMPUTERUN) homepage is now also written in yaml; even our online guidebooks, sponsorship proposal, && media partner proposal are entirely written in yaml!

this means that COMPUTERUN 2.0 committees wishing to update the page no longer need to understand a bunch of html; just hack that yaml && markdown source files && done!

the modernization of the codebase is definitely making it more flexible and quicker to set up for changes; let’s say, when one of your events require an Instagram username; before, we had to modify our registration logic && add a new form to insert your Instagram username, but today we’ll just need to add that additional field directly on our database, and our backend codebase will automatically recognize and start to validate that, too!

interested in COMPUTERUN 2.0?

if you’re interested, just head over to the official website at https://computerun.id, or follow and contact us through many ways!

COMPUTERUN 2.0 is proudly presented not just by us (the folks at https://reinhart1010.id), but also by HIMSISFO (Information Systems Student Association) and HIMTI (Computer Science Student Association), two of the largest official Student Associations in BINUS University! && true , this is our second (or first, ’cause arrays starts at 0, unless you’re R or MATLAB) installation of COMPUTERUN, && this is our first (or 0th) installation to be held internationally!

The post COMPUTERUN 2.0 Website appeared first on Reinhart Previano Koentjoro.