Blog Posts
I’ve got a 💯 in TOEFL.
An imperative way to build a website!
(#_ )! 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! 🩷
So, can we talk about Army of God Conference 2024?
Site Update: How many share buttons can we fit in here? 🧐👇
As a part of this monthʼs Site Update (and to celebrate the anniversary of these color-sorted buttons), we redesigned and rearranged the share buttons so it doesnʼt claim too much vertical space on mobile, and so users can skim the colors more efficiently. We also added new share buttons for SMS, which also turns into the Messages (iMessage) icon for iOS, iPadOS, and macOS, alongside Gmail, Hatena Bookmark!, LiveJournal, mail.ru, Odnoklassniki (OK), Threads, Threema, Trello, VKontakte (VK), XING and Yahoo! Mail. Tip: You can also test out these share buttons on our dedicated page. On this great opportunity, we would like to encourage the developers behind the following platforms to add support for deeplinks to share content directly to: Bluesky (see Issue #1301) Forem (e.g. DEV.to and CodeNewbie Community) Ghost (blogging platform) Kenangan.com Matrix.org, or Matrix-specific apps (e.g. Element, FluffyChat, Nheko) (currently only possible to share contacts or chatrooms, not sharing messages to them) Medium Nostr-related apps (e.g. Damus) (see NIP-0077) Signal (currently only possible to share contacts, not sharing messages to them) SimpleX Chat (currently only possible to share contacts, not sharing messages to them) Woilo Why the share buttons? We are still interested to promote a diverse set of web services, from the common ones to alternatives, as part of our Computer System Multiculturalism initiative. Consider this as a free advertising from the services you love. /* Oh, Neal, we’ve beaten your own share buttons for sure. */
GMS bukan pecah, tapi…
Site Update: Just amazed with our great SEO without fancy things.
Kebebasan dan Kontrol.
Banyak orang saat ini mati-matian mempertahankan kebebasannya: Kebebasan untuk berpendapat, kebebasan untuk menyatakan siapa dirinya, kebebasan untuk menjauhkan diri, dan kebebasan untuk melakukan kehendaknya. Ada yang berpendapat, kebebasan itu adalah bebas dari pengaruh alias kontrol dari pihak-pihak lain. Namun, ada yang justru berpendapat kebebasan itu adalah hak kontrol yang kita miliki. Selama ini kita mendengar bahwa Yesus memerdekakan kita, Yesus membebaskan kita. Namun, setelah kita lama mengikuti Yesus, kita mungkin menyadari bahwa Firman Tuhan adalah Firman yang justru penuh dengan aturan. Yesus berkata kepada mereka semua, “Jika seseorang mau mengikut Aku, ia harus menyangkal dirinya, memikul salibnya setiap hari, dan mengikut Aku. Lukas 9:23 TB2 Firman ini justru tidak membuat kita bebas! Dan kebenarannya, Tuhan tidak menghendaki kita “bebas” begitu saja, karena Dia tahu ada hal-hal yang jauh lebih berharga daripada memepertahankan kebebasan seperti apa yang sering kita pikirkan. Mengapa Tuhan tidak memprioritaskan kebebasan? 1. Karena dosa muncul dari kebebasan itu sendiri. Ada dua jenis dosa pertama yang dicatat di dalam Alkitab. Menurut urutan Alkitab saat ini, Alkitab mencatat dosa Adam dan Hawa pada paling awal (Kejadian 3). Tapi, Alkitab juga mencatat awal dosa malaikat maut Lucifer (Yesaya 14:12-17), yang sebenarnya terjadi jauh lebih awal dari penciptaan Adam dan Hawa. [12] “Wah, engkau sudah jatuh dari langit, hai Bintang Timur, Putra Fajar, engkau sudah dihempaskan ke tanah, hai penakluk bangsa-bangsa! [13] Engkau yang tadinya berkata dalam hatimu: Aku hendak ke langit, aku hendak mendirikan takhtaku melampaui bintang-bintang Allah, dan aku hendak duduk di atas gunung sidang ilahi, jauh di sebelah utara. [14] Aku hendak naik melampaui ketinggian awan-awan, hendak menyamai Yang Maha Tinggi! [15] Nyatanya, ke dalam dunia orang mati engkau diturunkan, ke tempat terdalam jurang maut. Yesaya 14:12-15 TB2 Bandingkan dengan: [4] Tetapi, ular berkata kepada perempuan itu, “Sekali-kali kamu tidak akan mati. [5] Sebaliknya, Allah mengetahui bahwa pada saat kamu memakannya matamu akan terbuka, dan kamu akan menjadi seperti Allah, tahu tentang yang baik dan yang jahat. Kejadian 3:4-5 TB2 Ada kesamaan antara kedua dosa tersebut, yaitu mereka sama-sama berencana untuk menjadi bebas dari Tuhan yang menciptakannya. Lucifer (Putra Fajar) berdosa karena ingin meninggikan diri dari Allah, kemudian manusia berdosa karena ingin menjadi seperti Allah. 2. Karena karakter lebih berharga daripada kuasa. Tuhan sesungguhnya menghendaki kita untuk menggeluti karakter, bukan kuasa, dalam bumi ini. [26] Berfirmanlah Allah, “Baiklah Kita menjadikan manusia menurut gambar dan rupa Kita, supaya mereka berkuasa atas ikan-ikan di laut dan burung-burung di udara, atas ternak dan seluruh bumi, serta atas segala binatang yang melata di bumi. [27] Allah menciptakan manusia menurut gambar-Nya, menurut gambar Allah diciptakan-Nya dia; laki-laki dan perempuan diciptakan-Nya mereka. [28] Allah memberkati mereka dan berfirman kepada mereka, “Beranakcuculah dan bertambah banyaklah. Penuhilah dan taklukkanlah bumi. Berkuasalah atas ikan-ikan di laut, burung-burung di udara, dan atas segala binatang melata di bumi!” Kejadian 1:26-28 TB2 “Segambar dan serupa dengan Allah” tidak sama dengan “menjadi seperti Allah”. “Segambar dan serupa dengan Allah” berarti kita diciptakan dengan karakter yang sama dengan Allah, tapi “menjadi seperti Allah” berbicara tentang kuasa. Kita harus paham bahwa kita diberikan otoritas untuk menguasai bumi dan binatang-binatang bumi, tapi kita tidak diberikan otoritas untuk menguasai sesama manusia. Kita bebas untuk saling menguasai binatang, tapi kita tidak bebas untuk saling menguasai manusia. Selain itu, kalau kita ingin benar-benar ingin menjadi seperti Yesus, kita seharusnya juga mengikuti pemahaman Dia yang satu ini. Kita diciptakan untuk menjaga karakter, bukan menjaga kuasa. [5] Hendaklah kamu dalam hidupmu bersama, menaruh pikiran dan perasaan yang terdapat juga dalam Kristus Yesus, [6] yang walaupun dalam rupa Allah, tidak menganggap kesetaraan dengan Allah itu sebagai milik yang harus dipertahankan, [7] melainkan telah mengosongkan diri-Nya sendiri, dan mengambil rupa seorang hamba, dan menjadi sama dengan manusia. [8] Dan dalam keadaan sebagai manusia, Ia telah merendahkan diri-Nya dan taat sampai mati, bahkan sampai mati di kayu salib. [9] Itulah sebabnya Allah sangat meninggikan Dia dan mengaruniakan kepada-Nya nama di atas segala nama, [10] supaya dalam nama Yesus bertekuk lutut segala yang ada di langit dan yang ada di atas bumi dan yang ada di bawah bumi, [11] dan segala lidah mengaku, "Yesus Kristus adalah Tuhan," bagi kemuliaan Allah, Bapa!“ Filipi 2:5-11 TB2 3. Karena ada hal-hal yang jauh lebih berharga daripada kebebasan itu sendiri: Buah-buah Roh. Sekarang, setelah kita menerima Yesus sebagai Raja dan Juruselamat, salah satu tugas terpenting kita adalah menjadi seperti Yesus, mengusahakan diri agar kita segambar dan serupa dengan Tuhan. Kalau kita diberikan kuasa, berkat, dan mujizat dari Tuhan, itu cuman bonusnya. Tapi sudah jelas bahwa Tuhan tidak membebaskan kita agar kita dapat hidup sebebas-bebasnya, namun agar kita hidup penuh dengan karakter Tuhan, lebih penting daripada kuasa Tuhan. [13] Saudara-saudara, memang kamu telah dipanggil untuk merdeka. Tetapi janganlah kamu mempergunakan kemerdekaan itu sebagai kesempatan untuk kehidupan dalam dosa, melainkan layanilah seorang akan yang lain oleh kasih. [14] Sebab seluruh hukum Taurat tercakup dalam satu firman ini, yaitu: "Kasihilah sesamamu manusia seperti dirimu sendiri!" [15] Tetapi jikalau kamu saling menggigit dan saling menelan, awaslah, supaya jangan kamu saling membinasakan. Galatia 5:13-15 TB2 Pada ayat-ayat berikutnya (Galatia 5:22-23), Paulus berbicara tentang sembilan buah Roh Kudus, yaitu: Kasih Sukacita Damai sejahtera Kesabaran Kemurahan (FAYH: Keramahan) Kebaikan Kesetiaan Kelemahlembutan Penguasaan diri Dalam buah-buah Roh itu tidak disebutkan “kebebasan untuk berekspresi”, “kebebasan untuk mendefinisikan identitas diri”, “kebebasan untuk menyatakan apa yang benar menurut saya akan selalu benar”, dan sebagainya. Mengapa? Karena buah-buah Roh justru membuat kita terus bertahan hidup, sekalipun satu per satu hak kebebasan diambil dari hidup kita. Yusuf adalah seorang anak Yakub yang dijual sebagai seorang budak, kemudian difitnah dan dimasukkan ke dalam penjara. Bukannya sudah layak bagi Yusuf untuk membunuh dirinya karena kebebasannya yang terbunuh? Tapi mengapa Yusuf bisa bertahan begitu lama? Selain karena janji dari mimpi-mimpinya, Yusuf sudah memiliki buah-buah Roh di dalamnya sejak detik ia difitnah oleh kakak-kakaknya. Meskipun hak-haknya dikebiri diambil saat dijual, Yusuf masih dapat melatih penguasaan diri. Dia tidak memberontak untuk keluar dari perbudakannya. Bahkan ia setia dalam pekerjaannya, sampai Tuhan yang sama memberkati keluarga majikan itu. Meskipun rasa amannya saat dijebloskan ke dalam penjara, Yusuf masih dapat melatih kesabaran dan kesetiaan. Bahkan ia harus menunggu lebih lama karena tukang juru anggur dan roti lupa memberitahukan pesannya kepada Firaun. Kemudian, saat ia sudah mendapatkan kebebasan sebagai penguasa Mesir, ia masih memiliki penguasaan diri, terus mengandalkan hikmat Tuhan dan tidak menyalahgunakan jabatannya. Dan terakhir, meskipun ia berhak untuk membalas dendam kepada kakak-kakaknya, ia sudah sangat matang dalam penguasaan diri, dan tetap mencintai keluarga. Justru, dari kisah ini, kita malah menemukan ayat yang sangat kuat: Memang kamu telah merencanakan (TB: mereka-rekakan) yang jahat terhadap aku, tetapi Allah telah merencanakannya untuk kebaikan, untuk mewujudkan apa yang terjadi sekarang ini, yakni memelihara hidup banyak orang. Kejadian 50:20 TB2 Mempertahankan semua ini jauh lebih berharga daripada sekadar mempertahankan kebebasan. Penutup [26] Saudara-saudara, ingatlah bagaimana keadaan kamu ketika kamu dipanggil: Menurut ukuran manusia tidak banyak orang yang bijak, tidak banyak orang yang berpengaruh, tidak banyak orang yang terpandang. [27] Tetapi apa yang bodoh bagi dunia, dipilih Allah untuk memalukan orang-orang yang berhikmat, dan apa yang lemah bagi dunia, dipilih Allah untuk memalukan apa yang kuat. [28] Apa yang tidak terpandang dan yang hina bagi dunia, dipilih Allah, bahkan apa yang tidak berarti, dipilih Allah untuk meniadakan apa yang berarti, [29] supaya jangan ada seorang manusia pun yang memegahkan diri di hadapan Allah. 1 Korintus 1:26-29 TB Saya percaya, orang-orang yang tidak hidup bebas (untuk menjaga kekudusan, menjadi misionaris, dll.) juga akan dipilih Tuhan untuk memalukan orang yang hidup sebebas-bebasnya. Karena menjaga karakter itulah tugas utama kita.
DRY-ing Go/Golang’s error handling with underscores.
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.
The self-image ethics of a Christian VTuber.
