As an example, mobile users can install the app inoreader. Inside the app, add the link to my blog’s feed: https://earlps.net/index.xml

The RSS reader is not limited to one site, it can subscribe to other blogs, news sites, and most sites that continuously get updates. Checkout this RSS feed compilation for more: awesome-rss-feeds .

I did this because I’m forced to open Facebook when checking for local news. I published a rant about this.

I’m currently collecting posts of 4 specific pages but I’m planning to add more. The pages I’ve added are the ones I almost always look which is limited to my region. I plan to include pages relevant in the other regions of the Philippines so I’ve added a link to a Google Form for suggesting new pages to add.

I’m strictly limiting this to the Philippines but if you’re interested in hosting the same service locally, it’s very easy to do, and I’ve set up the code to be easy to modify.

The backend code is in Django, frontend in Vue options, and PicoCSS. It’s very simple. Check it out: filinfo.earlps.net

Screenshot:

You can reformat but don’t depend on it every time. Try to debug or fix the issue you have. If you can’t fix it, you can learn what caused the issue and then reformat. That way, you learn more and not repeat the same mistake.

I’ve reformatted multiple times and at one point I just got familiar with enough things that I was able to maintain the OS and fix issues every time.

1for count, fruit in enumrate(fruits, start=1):

This has saved me a lot of confusion.

I used it for finding the most recent error log:

tac err.log | grep -m 1 ERROR

source

Public Information Office #

In the Philippines, updates for most cities will come from the city’s own “Public Information Office” which posts updates on their Facebook page. They do not have their own website. Sometimes I open Facebook on my phone with the intent to catch up on information but when the site loads, my attention is immediately drawn towards the news feed. I end up scrolling for 5-15 minutes, sometimes causing me to forget why I even opened the site.

Crucial information + FB algorithm = dangerous #

Facebook is not a news platform but because it tends to be the fastest way to see updates, it kind of feels like one. Sometimes it is the only way to know about local information. Unless an incident near you is reported by big organizations, it will probably only be on Facebook.

The problem is, Facebook has to filter all this information and put it behind an algorithm that is a black box.

One cannot be certain that Facebook will prioritize showing a crucial weather update rather than a really funny meme, a shocking revelation about a celebrity, or a new product. It probably depends on which ones get the most reactions.

For example, sometimes I feel like people don’t realize how dangerous an upcoming typhoon is because Facebook doesn’t seem to amplify this sentiment enough. If only it knew how to emphasize how dangerous the typhoon could be, more people can be prepared. But instead, you see one post about an upcoming typhoon, scroll past it, see a new meme/product/scandal, and you forget about it.

Messaging #

Everyone uses Facebook Messenger to communicate in the Philippines. Unsurprisingly, it requires a Facebook account to use. So, if you need to abandon Facebook, you’ll have to also disconnect from your relatives and friends. SMS messaging doesn’t work because it is expensive.

Facebook Messenger is also used as a workplace messaging application. I know some who work on enterprises owned by Filipinos and they mostly communicate using Messenger.

Cost #

It is literally FREE to use Facebook in the Philippines.

Since 2010, mobile carriers have enabled access to Facebook and its services for free. It allowed us to view a simplified version of our Facebook news feeds and send messages for free. No payment or data plan required. The only limitation is that you will not be able to see images. This strategy worked really well, as evidenced by how much we currently depend on this private service that is Facebook.

At the time it was really difficult to switch to other platforms because they require mobile data and data plans are expensive. Meanwhile, Facebook is free.

It feels like the presence of Facebook denied Filipinos of hand-crafted websites.

I truly hope that by writing this, more people talk about this issue. I really encourage the government to start its own website for centralized information distribution.

How to help #

If you’re a programmer #

• If you’re looking to make web projects for your portfolio, try looking for non-profit organizations in your community and ask them if they want a website and collaborate with them. Deploy it for free on Github pages.
• Ask friends and family who have businesses, if they want a website

If you’re a business owner #

• You can make your own website using Wordpress for free.
• If possible, hire an IT or CS student or a newly-grad to create a simple website.

Update (Oct 22, 2024): I have created a website for scraping FB pages of local news: Scraping Facebook to scratch an itch .

Update (Oct 24, 2024):

There are a few things that can be improved here but I recently realized how important visual hierarchy is to a design.

The problem here is, there’s no one element that particularly stands out when the page is viewed. The user will either look at the logo or the title. This is a bit weird as we always want to point the user to where we want them to look - that’s the job of the design.

The first step was to decide which element I want the user to look at upon opening the page. I decided that the title is the one they should be looking at.

So the next step is to make the title stand out. How? By adding contrast.

Currently the contrast between the size of the site’s name and the title is too narrow. The contrast can be expanded by making the two elements different enough.

Here’s the final output:

There are a lot of changes here but the ones notable for improving visual hierarchy is:

1. Smaller site badge size - this shaves off the emphasis to the site badge which makes the title more noticeable.
2. Change in the size of the title’s font size - the bigger font size increased the title’s contrast against its surrounding elements.
3. A new font of the title - I chose a font that looks a bit thicker than the previous one. It is a semi-condensed font in semi-bold style. I felt like the condensed design of the font improved its contrast versus the previous font.

That’s it. I’ve removed the weirdness of the design by adding more contrast to elements and helping the user’s eye to focus on one element.

This is the most important tip: avoid side projects with user accounts.

If you build something that people can sign into, that’s not a side-project, it’s an unpaid job. It’s a very big responsibility, avoid at all costs!

Taken from Coping strategies for the serial project hoarder

Tools #

I started by sticking to my usual tools, Markor on Android, Synthing and a CSV file expenses.csv.

I can say it works really well. Entering expenses is quick on mobile, maybe because I’m used to working with CSV. The UX is mostly just the keyboard and the comma character.

You’re probably asking, why not use any other financial application out there?

Simple, I want to keep my tools simple. My current “ecosystem” already works pretty well. Adding another application probably means that it will not fit right in with the tools I use, which means I’ll have to adjust things again.

Why not a spreadsheet?

I’ve tried that, and on mobile, the UX is too clunky. I need to be able to add items while I’m out buying stuff.

And most importantly, I just like creating my own applications.

Structure of the CSV File #

The file is structured like this:

DATE, ITEM, QUANTITY, PRICE, TOTAL, CATEGORY

If DATE is empty in a row, the date of the previous row will be used. This makes it easier to add rows when I’m outside.

A simple, no build dashboard using Vue and PicoCSS #

After a month of doing this, I realized I need a tool to analyze my expenses. I started with a command line Python script but I later realized a webpage would allow me to analyze my expenses on any device.

Why Vue #

I’ve been using Vue with the options API at work. I think it’s really good and I wanted to explore it a more. What’s nice about it is the way logic is organized with options API. The complexity of the UI is more manageable this way. And that’s without a build step needed.

PicoCSS #

I’ve been using water.css for my small projects but after hearing too many people talk about PicoCSS, I wanted to try it.

PicoCSS is small enough, like water.css but unlike water.css, it still gives the user some control. The dashboard is really just a collection of tables that works by using the details and summary elements.

I’m curious if I’ll still be using it months or years from now, but so far, I’ve been loving this tool and I’m looking to improve it with new features.

The dashboard is available here: earlps.net/expenses-cli

The repo: github.com/elpachongco/expenses-cli

Screenshots (Sept 15, 2024):

In this job, I noticed myself making a lot of small mistakes repeatedly: Forgetting to push commits before asking for code review, forgetting to set a variable to False before pushing, or outright forgetting to test before pushing.

A kind coworker, understandably, probably got tired of me making these small mistakes and offered help. We did a one-on-one chat, and he asked some questions. It basically felt like being debugged.

The most important part of our conversation was when he asked me to outline what I do when I work, from start to finish. So I thought it through, outlined my rough steps when working, and came up with the steps on the fly by thinking of what I always do.

Why am I telling this? Because he asked me exactly if I just came up with it from memory. I did, and that’s the problem. I was only relying on memory - which is unpredictable (well, it’s probably predictable by how much sleep I had).

From my outline he mentioned things that I missed and gave me an example. We wrote it down, and turned the steps into checklist items. This file is now known as ‘workflow.md’. It contains a simple checklist of the ideal process:

- [ ] When starting a task, create a Trello card.
- [ ] After creation of a card, create a Slack thread.
- [ ] Ask questions/gather data:
  - [ ] How often will this be used?
  - [ ] How many users will use this feature?
 ...
 - [ ] After working on a task, list all features added
 - [ ] Test all the features
 - [ ] List all existing features that are affected of the changes
 - [ ] Test them as well
 - [ ] If a test fails, revise code
   - [ ] Test feature again after revising
 - [ ] If all tests succeed, review the code
 - [ ] Ask questions
   - [ ] Are the variables named properly
   - [ ] Are the comments formatted according to standard
   

When I start a new task, I copy this file to /tmp/ and go through the items one by one. By following a document, and not relying on memory or instinct, mistakes are lessened.

But the best part is that this file can be enhanced. Whenever we make a mistake, we ask ourselves, is this a mistake that could have been prevented by a better process? If yes, we revise the workflow file.

For example, a task I worked on nearly required a redo because there’s a step I missed. I forgot about it and it’s not in the workflow file. So I added it to the file. By doing this we’re reducing the amount of small issues that could easily be prevented by not relying on memory alone.

If you’re going to build a workflow/process file, here’s a tip:

• Consider previous mistakes and add a check for what caused the mistake.

Some examples:

• If you’re forgetful or careless, like me, then add a double check to your process.
• If you tend to over engineer stuff, then add a part where you gather data (i.e. ask questions) and define requirements before working on a task.

Having a defined process improves efficiency. It’s much better than relying on memory alone because it can easily be replicated, improved and reviewed. It’s not a solution for everyone or every scenario but I think it’s worth trying out.

Hey it works! 🙂

To summarize, I’ll be redesigning this blog.

In this article, I’ll list the things that I want my blog to have.

Must haves #

• User-clickable anchors for each post’s headers (h1,h2,h3,h4,h5,h6)
  • If possible, must highlight if scrolled or by clicking table of contents.
• Dark mode
• Table of contents for each post
  • Must be visible while scrolling. If possible, should also highlight current section.
• /shorts/ - of course
• Last updated information
• Retain StaticCMS. It’s very convinient.
• A draft indicator, Gwern-style. Since I’ll be using the blog as my personal notes website, every change I make to it WILL be pushed, even drafts.
• Code snippets must have a built-in header for filename.
• Static site search (like papermod)
• Captions for each image
• Post thumbnails
  • Get a post’s first image file and use as thumbnail
  • If not present, use a default thumbnail
  • Allow setting custom thumbnail in frontmatter/settings

Optional #

• A way to manage and view history of updates of an article (since it’s managed in git). E.g. arrow buttons to navigate history of the article.
• Comment section. (Discuss? Bhread?)

My approach was to add two <img> tags, overlapping each other and toggling the front element (greater z-index) when the conditions are right.

Seems good right?

Well, It worked as expected but after some testing, I noticed something: scrolling up would lag the browser on my 4-core i7 8550u 16gb memory machine. It’s probably half a second of the browser refusing to do anything before allowing me to scroll up.

Of course I immediately assumed it was the logo. Because previously, the site used plain text as its only branding.

I immediately thought that the CSS may be causing a DOM reflow . So I changed the logo toggle logic to use opacity, instead of display: none. My thinking was that it could be triggering the browser to re-validate the DOM tree every time the element is removed. I tested this, but the lag is still present with no noticeable change.

Next, I searched for ideas. The one that stood out was that maybe my selectors are too complex for this. This gave me an idea.

The implementation for the logo toggling depended on a single class that is added everytime the background changes. This behavior is handled by jquery.

My idea was to move the toggle from CSS to the jquery.

I spent some time with that and then tested it. Still no change. At this point, I’m out of ideas.

I called it a day maybe I just need to rest.

The next day, I had an idea: why not debug this with the devtools?

I’ve never used the more complicated tools because honestly, flame graphs intimidate me.

Hoping to finally fix the bug, I used the performance tab and recorded a sample interaction where I scroll up and then stop the recording. The timeline shows an interesting data: when I scroll up, a task happens. This task takes a good 460ms to finish. The task is Image Decode.

That’s when I realized what was really happening. It’s doing some processing on the logo because the file I used was a PNG file. I rushed to a random svg download site and downloaded two random SVGs, replaced the image sources, and tested. I was right, the lag is gone.

What’s the takeaway from this?

Reach for the most effective tool you have before doing trial-and-error. Often times, it’s easy to resort to trial-and-error approach when debugging. But knowing how long a debugging task is going to take you is a skill you should master. if you think it’s going to take a long time, use the tool for the job. Use the debugger.

More importantly, keeping track of the tools available to you and being WILLING to use them when appropriate is a good habit to have. Expect yourself to resist using a debugger because it’s usually not as quick to do as trial-end-error.

Hello There!

The Phone - LG V20 #

A highly-repairable phone with good camera hardware and software.

It’s already 2023. LG has left the smartphone market, and this phone was released in 2016.

I love this phone, it’s just good quality hardware. Only problem is its size – It’s too big for one hand operations. I prefer smaller phones because I don’t play a lot of games and I won’t benefit from the extra screen space since I only use it for communication and when I’m stuck outside the house waiting for a jeepney.

Most of my phones are second-hand phones. This means that I don’t have much control on which ones I can get. What I’ve noticed is that they’re almost always too big. My theory is that smaller phones are not as popular, possibly break easier (battery?), is not as repairable as the bigger phones or their owners just like them so much that not a lot of them end up in the second hand market.

Being in the Philippines, I have access to Chinese sellers overseas selling second-hand hardware. I bought my second hand LG phone last 2022 for 60USD (second hand + not a popular brand in the PH). This phone superseded my trusty Exynos Samsung Note 4 (its micro-USB port has worn down. In my little experience, I think USB type-C is the more robust connector).

I came across this phone in a Youtube comment claiming that it’s the ’newest' phone with the earphone jack, IR blaster, easily replaceable battery. It’s true, the battery is replaceable, and the phone can be taken apart (and assembled) very easily. See this teardown video . (It’s just 3 mins!).

Repairability is underrated today. I broke the camera glass cover last month and it took me less than 10 minutes to replace it. If the battery degrades, I can replace it in less than a minute. I don’t have a lot of money or time so this phone works great for me.

The best thing about it is its Snapdragon processor. If you’re not in the android scene, the Snapdragon is the most popular CPU. Because of this, most custom ROMs (Custom Android OS) is made for processors by Snapdragon. My previous Note 4 sported an Exynos which was a bummer because I couldn’t install a custom ROM on it.

I’m running a custom ROM in this phone that allows it to be upgradeable to Android 9. In 2023, that’s old but it works fine for me.

software #

• OS: Android 9 Custom ROM. Rooted.
  • Banking apps will usually not run on rooted phones but there are ways to bypass that and I don’t have any problems with using those. I have five banking apps and they all work after toggling some settings.
• F-droid
  • Installed in every single phone I have. This is the first place I check for apps.
• Terminal emulator
  • In case I need to do a quick network scan.
• Syncthing
  • I used Google Docs for everything because I need my files to be accessible everywhere (cloud sync). It was reliable but Syncthing replaces that functionality pretty well. At home, files from my laptop are synced to the phone. At work, files from phone are synced to the work computer. When I’m outside, I can edit these files in my phone and it will sync to the other devices. I sync my markdown files with it. It’s truly a personal cloud. I think it’s the correct solution for me. I can’t think of anything that will be better than this.
• Markor
  • The reason I don’t use google docs is because of Markor. It’s a really good markdown editor. That’s it, I don’t need to say anything. If you’re using Android, it’s on F-droid. Though, I still have a Google Docs app in my phone for work-related purposes.
• G-Cam
  • It’s the camera app for Pixel phones but configured for other phones. The software features are amazing. It takes great photos but controls are limited compared to the stock app which has manual controls for almost everything (LG proprietary app). This app is a basic camera that applies advanced image processing compared to the stock app.
• Firefox for Android
  • The key to a good experience in Android.
  • uBlock Origin installed to block ads and make websites run faster, and consume less bandwidth.
  • I watch Youtube a lot but I don’t have their app. I use it in Firefox. No ads, and plays in the background, even picture-in-picture mode. I used to install YT Vanced for this. Not anymore.
  • Surprisingly, plenty of apps are usable in the browser (Upwork, Skype). Though without the notifications (last I tried).

The computer - Thinkpad T480 #

It’s a typical machine I got it last 2021 for around 600USD. Second hand. What I like about it is its repairability, its ruggedness (I’m clumsy and careless), and its popularity.

I also consider how popular something is when shopping for a device. This is because it’s more likely to be updated faster, the bugs will be documented and resolved faster.

Hardware #

• 16GB Ram
• 128GB SSD
• i7 8550u
• 6-cell battery
• I3 WM
• USB Type C Magnetic charging
• Bavin 65W PD GAN charger
• This laptop has a metal lid. Most reviews online don’t have this. I think it’s the magnesium lid.

Software #

For most of my tasks, Neovim is the first thing I reach for.

• Neovim
  • Treesitter
  • Packer package manager
  • Mason for managing LSP stuff
  • Telescope
    • I used to install a vscode like sidebar for nvim but I found telescope and realize it’s the better solution.
• urxvt-d
  • I still use urxvt because it’s the best terminal out there.
  • It’s almost always available in the Debian repositories, it works on almost any hardware. Even on an Intel atom with 2gb of ram, it’s fast.
  • I run the daemon at startup (urvt-d) and call the client (urxvt) for every terminal. It starts fast. Kitty is faster but it’s not as light.
• IBM Plex Mono.
  • I love this font for coding.
  • I don’t worry about double underscores (dunder, there’s a lot of them in python).
  • I just like the aesthetics of it.
• Google chrome and Firefox
  • I use anything depending on my mood.
• Vimium-C
  • I browse the web the vim way. I don’t have the mouse with me most of the time and it’s definitely better than using the trackpad for the kind of work I do

Software Stack #

I use Python and Javascript. Sometimes I dabble with Go just for its concurrency features which I find fun to use.

To build full-stack apps I use:

• Django rest framework
• React
• Material-UI

Although, right now I’m moving to plain old Django templates, with HTMX, Alpine, and Tailwind. It’s a really ergonomic setup. I wrote a lot of JS in my previous job so I think I got the JS fatigue. I’m currently trying this out on my project Bhread.com .

Work Setup #

I work on the dining table. Here’s my setup:

I put the laptop on top of the box so I can work standing up from time to time.

I’m looking to improve this situation. Right now, the house is too small for us, 40sqm (430 square foot) a family of 5.

I recently got hired so I’d like to commit on building a house of our own. We’ve been renting for the past 8 years.

Bikes #

A folding bike and a folding e-bike. I use a bike for transportation even if most people in the Philippines would get a motorcycle in my situation. Because bikes or e-bikes don’t need to be registered here and electricity and maintenance of these are cheaper.

I’m thankful that I don’t have to take the time every year to stand up in a long line to register yearly, and mess with legality because I have an e-bike.

I also used to pay 40USD (2,000 PHP) a month for the gym but because of the bike, I didn’t renew. Though I will probably register to a cheaper one again.

My parents have two motorcycles which are also reliable. It’s the only economical option if you’re going to need to bring a kid to school everyday. I think it could also work well for couples living together.

Clothing #

I live in a tropical climate. Most of the time it rains here every afternoon. Because of this, I wear things that dry easily and that I don’t mind getting wet.

I treat the rain as though it’s inevitable. You will get wet. Outside, I wear shorts, sandals, and a nylon jacket but I bring my clothes with me to change when I arrive at the destination. This way, I can still walk and take the public transportation (which I like doing because it’s cheap and convenient when it’s not peak hours).

I also bring an umbrella and sometimes sunglasses. I feel much more comfortable walking outside on a sunny day with sunglasses and an umbrella. The umbrella is also helpful when it’s raining so I always carry it.

My blog’s shorts page.

I liked the idea of this. I thought it’s a good way to use the blog as my own twitter of sorts.

And then I had an idea: If I encourage people to create a /shorts/ page on their blog, and I create a central hub for these pages, where they can interact, we basically have a new twitter!

And that’s what I’ve been doing since August.

I’ve been building a website that will be a central hub for blogs. The website is called bhread.com . Yes, it’s pronounced like bread.

For this project, I wanted to try building a full-fledged application in Django. I have some experience with django rest framework so I thought plain Django would be familliar. I was wrong. Templates are hell.

Anyway, I found out about htmx and I really wanted to try it. I also wanted to try alpine.js and tailwind. I’m used to plain css because I haven’t done any project that requires a lot of styling. I usually use a UI library.

Development #

So I got into developing this project. I started with planning the application, and then I wrote it.

The planning part wasn’t thorough enough as I didn’t know what is needed to aggregate blogs. I don’t have an idea about parsing feeds. But I knew I should store urls of feeds and posts.

At first I was conflicted whether to require accounts for feed submissions. But I went straight to programming anyway. I figured that I should just write a kind of exploratory project to just know enough to be able to iterate to a better version. I wrote an initial version as fast as possible. In the end, I went through three iterations of data models to finally determine the best design.

The code was very unorganized but it helped me determine the requirements.

The initial bhread design. Thanks to water.css and material icons for its looks.

I showed it to some friends and there was not a lot of reaction. It’s to be expected for an early product but it made me realize that this UI will not work for everyone. I like it because I like reading. It’s my job to read. Hacker News looks like a big wall of text to other people. This looks like a wall of text.

To start the new iteration, I removed a lot of the code, and made new plans. This time, the UI is inspired by twitter and elk.zone (a mastodon client).

I tried a few designs. At first, I designed with CSS but I got tired easily and thought I needed to design it properly first before programming.

I used figma to design some components and the experience is really good. I used to do these things in Illustrator and I’m glad I tried out figma.

Bhread’s prototype components. These are the basis for the current website’s designs. I abandoned some of the ideas here as they’re too distracting and it consumed a lot of space in the user’s screen.

I discovered a youtube channel that’s focused on recreating UI of famous sites. I watched his videos and I can highly recommend it. It’s Demistifying Design on Youtube . I learned a lot of UX concepts by watching the videos.

After deciding on the look of the website, it was time to implement.

This is the first complicated project where I’m not using a UI library. CSS is too hard for me. I’m using tailwind to develop this site and I like it. Sure, it’s discouraging to open an html file and see really long lines of tailwind classes but it’s easier to debug because the style is directly in the html element. My only problem is that the tooling with django is not fully developed. The prettier plugin for arranging tailwind classes does not work on django templates.

Playing with HTMX for a bit, I realized how easy it makes the backend-frontend integration. It’s amazing. Like everybody else, I used to build a frontend app and a json API for my web applications. I’m too tired of it. This is why I wanted to try HTMX. The only problem I see with using HTMX is if I want to create mobile apps for bhread, I will have to create a JSON API anyway.

I haven’t used [Alpine.js ](Alpine.js) a lot as of now but I’m so excited to use it. Once I get the layout sorted, I’ll start scripting.

Deployment #

I usually use python-poetry for development but I decided to learn docker for this project. It’s amazing. The code will still work with poetry but it’s so much easier to use docker. I decided to deploy with docker as well and apart from the mistakes I made while learning docker and deploying a django project at the same time, it’s working pretty well. With a single command, I can start postgresql, redis, nginx, and gunicorn. The project runs on a $6 digital ocean droplet. I don’t know how it will handle a lot of traffic but that’s a problem I’m excited to have. Right now it’s scary that it’s using 800mb of ram on idle, with only me as the user. I’m still looking into it.

To open source or not? #

Initially, I planned on open sourcing it after a year of development. I didn’t want to reveal the idea to the public until I’m sure it’s ready. But I thought I should just get the site out there and build a community around it as early as possible.

One concern about open sourcing the project is monetization. I was scared that I might not be able to monetize it if I open source it. Sustainability is a big part of a project. I sure as hell won’t be putting ads on it. It runs on a $6 machine, I can afford that. So that’s not a problem right now.

Me doing a shameless plug on HN. It’s a post about webrings. I couldn’t resist.

That’s it for now, this is what the website looks like right now (Sept 21, 2023):

It’s getting pretty close :D

Bonus:

I forgot to sanitize the verification post. The wordpress theme of the post infected the whole site. Makes me think about the design of my code.

If you want to know more about the project, visit [Bhread.com ](https://bhread.com ) or visit the Bhread blog .

Then I came accross this: an arcade game played in the favicon . How cool is that!

I will also include a workspace setup like found on this site . But right now I work on the dining table so… 🤔

See also this site and this setup by Aaron Schwartz .

Introducing Shorts #

This site is going to get a lot more updates from now on. Social media platforms are unstable right now. It’s time for blogs to rise!

See https://elpachongco.github.io/shorts

the library most recommended by other developers to create smart contracts was hardhat.

to create and debug the smart contracts, I developed them using test-driven-development methods. The tests gave me a way to print out and inspect variables.

just as I was done with the development I read somewhere that hardhat has a console.log() utility. You import it with import hardhat/console.sol and use it like JS’s console.log. I wondered how it worked. Upon testing, it seemed to only allow a maximum amount of parameters.

so i decided to look at hardhat’s internals and find out how they do it.

the first step was to find the console.log() utility function.

this is their repository https://github.com/NomicFoundation/hardhat

1$ ls 
2config  CONTRIBUTING.md  crates  docs  LICENSE  package.json  packages  README.md  scripts  yarn.lock

im not familliar with their file structure conventions. But I can guess that the source code is not in config/, docs/, or scipts/.

1$ ls crates packages
2crates:
3rethnet_evm_napi
4
5packages:
6common                 hardhat-core       hardhat-foundry          hardhat-solhint  hardhat-truffle4  hardhat-waffle
7eslint-plugin          hardhat-ethers     hardhat-network-helpers  hardhat-solpp    hardhat-truffle5  hardhat-web3
8hardhat-chai-matchers  hardhat-etherscan  hardhat-shorthand        hardhat-toolbox  hardhat-vyper     hardhat-web3-legacy

i didn’t know what crates/ were so I also tried it. anyway, packages/ contains hardhat-core/. Inside it we’ll find console.sol.

let’s see the code.

1$ cat packages/hardhat-core/console.log

link to it: https://github.com/NomicFoundation/hardhat/blob/main/packages/hardhat-core/console.sol

opening it, we find 1513 lines of repetitive, possibly auto-generated code.

here’s an interesting part of the code:

 1$ cat packages/hardhat-core/console.sol  -n | tail -n 30
 21503
 31504          function log(address p0, address p1, bool p2, string memory p3) internal view {
 41505                  _sendLogPayload(abi.encodeWithSignature("log(address,address,bool,string)", p0, p1, p2, p3));
 51506          }
 61507
 71508          function log(address p0, address p1, bool p2, bool p3) internal view {
 81509                  _sendLogPayload(abi.encodeWithSignature("log(address,address,bool,bool)", p0, p1, p2, p3));
 91510          }
101511
111512          function log(address p0, address p1, bool p2, address p3) internal view {
121513                  _sendLogPayload(abi.encodeWithSignature("log(address,address,bool,address)", p0, p1, p2, p3));
131514          }
141515
151516          function log(address p0, address p1, address p2, uint256 p3) internal view {
161517                  _sendLogPayload(abi.encodeWithSignature("log(address,address,address,uint256)", p0, p1, p2, p3));
171518          }
181519
191520          function log(address p0, address p1, address p2, string memory p3) internal view {
201521                  _sendLogPayload(abi.encodeWithSignature("log(address,address,address,string)", p0, p1, p2, p3));
211522          }
221523
231524          function log(address p0, address p1, address p2, bool p3) internal view {
241525                  _sendLogPayload(abi.encodeWithSignature("log(address,address,address,bool)", p0, p1, p2, p3));
251526          }
261527
271528          function log(address p0, address p1, address p2, address p3) internal view {
281529                  _sendLogPayload(abi.encodeWithSignature("log(address,address,address,address)", p0, p1, p2, p3));
291530          }
301531
311532  }

this looks fascinating to me. I’m less familiar with statically-typed languages, so I don’t know how common this method is. I’ll explain why it intrigues me.

most of the file consist of functions with the name log. In python or probably any dynamically-typed languages, this would not work. For example, if log() is called, The interpreter would not know which log, to use out of the many logs defined.

11524          function log(address p0, address p1, address p2, bool p3) internal view {
21525                  _sendLogPayload(abi.encodeWithSignature("log(address,address,address,bool)", p0, p1, p2, p3));
31526          }
41527
51528          function log(address p0, address p1, address p2, address p3) internal view {
61529                  _sendLogPayload(abi.encodeWithSignature("log(address,address,address,address)", p0, p1, p2, p3));
71530          }

in solidity, this is a completely valid use case. Although the function names are the same, the compiler can determine which log to use by looking at the data types of the arguments, and finding which log function has the correct parameter data types.

11524          function log(address p0, address p1, address p2, bool p3) internal view {
21528          function log(address p0, address p1, address p2, address p3) internal view {

For example, these two function definitions are almost the same, except the fourth parmeter. Line 1524 handles log calls with specifically 4 parameters with respective types: address, address , address, and bool.

Whereas Line 1528 handles log calls that pass exactly 4 address data types.

11524          function log(address p0, address p1, address p2, bool p3) internal view {
21525                  _sendLogPayload(abi.encodeWithSignature("log(address,address,address,bool)", p0, p1, p2, p3));
31526          }

This design means that only a fixed number of arguments can be accepted by hardhat’s console.log. Console.log will not work if it’s supplied with arguments that are not pre-defined in console.sol.

I later found the script that generates this code. It’s in hardhat/packages/hardhat-core/scripts/console-library-generator.js.

The parameters p0 to p3, are passed to abi.encodeWithSignature which is then passed to _sendLogPayload.

 1$ cat packages/hardhat-core/console.log -n | head -n 14
 2 1  // SPDX-License-Identifier: MIT
 3 2  pragma solidity >= 0.4.22 <0.9.0;
 4 3
 5 4  library console {
 6 5          address constant CONSOLE_ADDRESS = address(0x000000000000000000636F6e736F6c652e6c6f67);
 7 6
 8 7          function _sendLogPayload(bytes memory payload) private view {
 9 8                  uint256 payloadLength = payload.length;
10 9                  address consoleAddress = CONSOLE_ADDRESS;
1110                  assembly {
1211                          let payloadStart := add(payload, 32)
1312                          let r := staticcall(gas(), consoleAddress, payloadStart, payloadLength, 0, 0)
1413                  }
1514          }

At first glance, I can deduce that Hardhat sends the messages from console.log to a dedicated public address. It then scans the address for messages and outputs any messages that are sent to it to the terminal.

So that’s Hardhat’s console.log. We looked at its internals and found mysterious code that turned out to be a smart solution to the problem.

I posted a blog post on August 6, 2021 stating that I want to get a job before april 2022. During that time, I was creating projects for my resume. I was reading up on what people in the industry have to say about landing a job without a degree. The most common advice is to have projects that demonstrate my skills to potential employers.

It was an effective advice. By January I was started looking for local jobs. February of 2022, I found a job that fit my criteria well. The interview went well. I demonstrated some of my projects and one of their programmers asked me programming questions. The questions were about programming best practices, what I do when I can’t solve a programming problem.

I was hired by a team of data scientists developing a product from their university research. They’re funded by the government and partnered with their university.

Our core team is composed of 4 people. I’m the one in charged of programming the product. Our project leader is a Cs doctorate and a professor in the university. the working environment is what you’d expect from a government and academic environment – they’re pretty formal, and buzzwords amaze them. Especially that the project is focused on blockchain tech. It’s a unique experience to be surrounded by non-programming (but otherwise technical) people speculating on the technology.

In the office, I get to meet different kinds of people. It’s great to be surrounded by people smarter than me, especially programmers. I can ask them advice on technical topics and most of the time that’s when I learn new things.

I have never made a complete system until now #

Now that I’m hired, I realized I will be creating a complete system. I used to only create scripts for my amusement and portfolio. Developing a whole system – one that should be able to perform its functions well and be easy to use is different from programming simple scripts.

I remember being overwhelmed of how I will plan things out. As always, you’ll never realize how important planning is until you’re in the middle of development. In our case, I wasn’t able to plan much because of uncertainties on the hardware and its communications.

For context, The project is a renewable energy trading platform based on blockchain.

The development of this project taught me a lot of things as a programmer. I wrote code from low level hardware code, react js frontend code, django backend code, solidity code, and bash. Bash was really useful for me when it came to testing and automating things.

x by example, x styleguide #

Most of the software I wrote were new languages or concepts to me.

Being already familiar with multiple programming languages, reading x by example, was the fastest way to get coding. Now, when I encounter a new language, I’ll read x by example. This works fine for small programs and programming languages that I probably will not use much. Reading solidity by example supplemented with the solidity style guide, I wrote decent smart contracts (I think)

TDD is great if the project is complex. #

For complex projects such as our backend server (django), test-driven devleopment helped a lot. I can’t imagine how much time i saved by creating tests to implement features in such a complex system. Compared to just using print() like I’m used to. Now, If i’m going to work on a project where printing will be cumbersome (solidity is another example), I will instead write tests to develop software function by function. For simple scripts, I will still stick to print(). BTW, using debugger; is great for frontend javascript projects.

Templates are great #

For the frontend, we used an open source dashboard template written in react and material-ui. This helped the project progress fast. It was better for our small team to spend our time modifying the defaults of the template instead of starting from scatch. Existing components were used as basis for creating our own new components. Being written in react, any new member of the team will most likely be able to contribute to the frontend.

Thoughts on blockchain #

Gas is still a problem. I think, currently that blockchain is great for creating organizations because of its ability to store simple data and make it available to everyone globally with not much infrastructure.

In my opinion, the current state of the art is only at the tip of the iceberg of what blockchain can offer. Currently, we mostly see applications that can theoretically be made using basic web architectures (server and client). Blockchain only acts as improvement to the previous architectures. Many people don’t bother with it because the improvements it brings are not worth the additional complexity that come with it.

More reasearch is needed. I can’t say whether blockchain is a useless tool or not because we still haven’t discovered its true properties. The project that I am working on made me see how it can be a useful innovation for the technology of the incoming generation. I’ll probably write a research article about it soon.

Failures #

• Deciding architecture

  Back when we were starting to develop the project, I hit a roadblock. I didn’t know how I would integrate the whole project. It’s not that I didn’t know what to do, I was stuck deciding which design was the best. My first choice was to put react inside of django so I can use django’s templating capabilities with react. I tried that and modified a lot of code for the react material-ui frontend but in the end, it was janky. I realized that a backend server serving an api will be the better design. So I reverted most of the changes that I did and had the frontend and backend be separate entities. I’m glad that I did. The seperation made the program code cleaner and flexible.

  I was lucky that it was just mostly me and my other coworker doing development that time. the size of our team allowed us to flexibly change the architecture without anyone else complaining. I was really close to having a really bad developer experience for the rest of my time there.

• Not knowing lower-level side of computers

  Being a self-taught programmer who learned programming by creating simple python scripts for automation, I never really bothered to learn binary arithmetic and communications. That mistake hit me. I had to write programs for two kinds of devices which had different communications. Good thing some other developers created packages for easy communication with these hardware. I still had to learn their communication protocols and binary arithmetic to fully use and understand the hardware. It took me quite some time to learn.

• Plans after getting a job

  Before getting a job, I told myself that if I ever get one, I will work from 9 to 5 then study more programming at home. That didn’t happen. I told a programmer co-worker about this and they told me they actually had the same plans but were also not able to do it after getting hired. This led me to believe that having an onsite job is actually a lot more draining than working at home.

It’s been a year now and the project is near completion. I met new people, learned new things, encountered problems I was able to solve, and got paid. The project is a one year contract so I’ll be jobless again soon. I need to think of another plan. Should I get a new job? Study in a university? Both?

In this first installment is a simple code snippet I originally wrote in Powershell to scan a local port continuously and do something when the port is found:

1function deploy(): 
2	if ( port_exists(port) ):
3		do_something()
4	else: 
5		deploy()
6
7deploy()

Recursion has been a hard concept for me to put into practice and this served as a good introduction to it. However, this doesn’t feel like a ‘proper’ recursion to me.

I was so satisfied with this code so I showed it to my programmer co-worker friend. He asked me what will happen if the program doesn’t ever find the port? I didn’t think much of it because I know the user can just close the program and the port scanning is slow enough (around 1 sec for each function call).

I later realized what he meant. Being a better programmer than me, he knew something was missing. And so, let’s try to improve the code.

 1function deploy(retries):
 2	
 3	if ( retries < 1 ): 
 4		raise Exception("Port not found, Maximum retries reached.")
 5
 6	if ( port_exists(port) ):
 7		do_something()
 8	else: 
 9		deploy(retries-1)
10
11# Limit retries to n
12n = 10
13deploy(n) 

This feels more like recursion. The program will now only do a maximum of n retries. After that, if the port still doesn’t exist, it will throw an error.

The reason why I said the previous code didn’t feel like a proper recursion was because it didn’t limit the number of times it can call itself.

This limit is called the base case. In the code:

 1function deploy(retries):
 2	
 3	if (retries < 1 ): # <--- This is the Base case
 4		raise Exception("Port not found, Maximum retries reached.")
 5
 6	if ( port_exists(port) ):
 7		do_something()
 8	else: 
 9		deploy(retries-1) 
10
11# Limit retries to n
12n = 10
13deploy(n) 

The base case is a condition where if it is true, it stops the recursion.

Without the base case, some recursive functions could result to infinite recursions — something that should not happen, hence why the computer will throw an error (usually a stack overflow) when it finds an infinite recursive function.

For example, you can try to run this python code:

1def a(b):
2	return a(b+1)
3
4a(1)

In this code, nothing will stop a from calling itself again which could be problematic. This is why adding the base case and a way to achieve the base case is important.

Back to the code snippet, what else can we do to improve the code?

Here’s an idea: add a time.sleep() before each recurse to prevent the code from executing too fast and eating unnecessary memory:

 1import time
 2function deploy(retries):
 3	
 4	if (retries < 1 ): 
 5		raise Exception("Port not found, Maximum retries reached.")
 6
 7	if ( port_exists(port) ):
 8		do_something()
 9	else: 
10		time.sleep(1) # <--- Do a 1-second sleep before every recurse
11		deploy(retries-1)
12
13# Limit retries to n
14n = 10
15deploy(n) 

Without the time.sleep(1), the program will loop as fast as it can, faster than what the code needs to be which will just waste our computer’s resources especially if the port_exists function consumes a lot of memory or cpu when called.

Note: I mentioned earlier that the port scanning takes 1 second so adding a time.sleep(1) will make the program scan every 2 seconds. I didn’t add that to my original code but in this case, I added it since it’s a different program.

That’s it for this code snippet. Try to improve the code, and maybe publish it. I will be happy to read them :).

To end this episode, I’ll give you something to think about. Here’s the same program but instead of recursion, it uses a while loop:

 1function deploy(retries):
 2	
 3	while not port_exists(port):
 4		if ( retries < 1 ): 
 5			raise Exception("Port not found, Maximum retries reached.")
 6		retries -= 1
 7
 8	do_something()
 9
10# Limit retries to n
11n = 10
12deploy(n) 

Practice your programming skills and think of these questions:

1. What are the advantages and disadvantages of using recursion or iteration (i.e. a while loop)?
2. What types of situations does it make sense to use recursion versus iteration?

I will leave you, the reader to answer these questions. See you in the next Code Snippet!

Superuser.com: How do I hit the “Ctrl” key without straining my pinky?

I press both ctrl keys with the edge of my palm. It’s perfect; I don’t have to stretch my pinkies, and my fingers don’t have to move away from where they’re supposed to be.

Only downside is that this technique won’t work flat keyboards like the ones laptops have. For those, I use an ANSI layout with a few modifications:

• CapsLock key is remapped to OS key Reasons why I do it this way:

  • I use the OS key more often than the caps lock key.
  • I use the CTRL key too much (emacs, terminal) that this placement will still hurt my pinky

• And a bottom row layout where the control and alt keys are beside the space bar respectively:

  | CapsLock (optional) | alt | ctrl | space bar | ctrl | alt | 

  This allows me to use my thumb for both the alt and ctrl keys which is powerful for me.

These techniques and layouts here mostly focus on making ctrl and alt keys very accessible because I use them a lot (the shell, emacs).

That’s it. It solves my problem, it works for me, and it’s simple enough.

Since I am coming into the computer industry without formal education on the topic, this blog could also be helpful for me to getting a job as one of my projects that employers can refer to. And if I do succeed in getting a job, I hope other people who would be in the same situation as me can refer to my blog as a reference.

I’m currently 20 years old, and my plan is to get hired when I turn 21. This is a deadline I imposed on myself that I’d give myself time to learn the things necessary to get hired. I don’t really have to have a job but I aim to have at least a source of income by that time.

Now I say that but I still feel like I want a job even if by that time I have a proper source of income (business or something) because I think the “developer experience” is not complete without the interaction with other developers who I can learn from and v./v.. I watched some of the google talks and they make it a point that success mostly comes from good communication which I think I still lack. I still don’t have any experience on working on other projects with other developers. Not to say that it’s the only solution because I also think that I can achieve the same by contributing to other open source projects. I’ll just have to see for myself but those are the things that I’m considering.

I’m a software developer based in the Philippines. I like inventing stuff. I like seeing new things come from my work.

Editor #

I use Neovim with NVChad as my editor. I don’t need a lot, I only write Python, and some JS and CSS for my day job. In the past, I’ve used VSCode and Emacs. VSCode is nice but I hate that there are times where I’ll need a mouse to use it. I’m looking into getting back to using VSCode.

Emacs was nice, it was really customizable but it was just clunky. I’ll oftentimes get random slowdowns even on an unconfigured Emacs.

Tech #

I like Python, it’s the first programming language I learned. I build all prototype stuff in Python. I also like CSS. I’m not good at it but I appreciate good CSS.

Apart from Python, I’ve tried to study C, and Go. Though, no big projects.

Reaching me #

For inquiries, collaboration, contact me on my email: earlsiachongco@<email.com> replace <email.com> with gmail.com.

This site contains notes, thoughts, images and code by me (unless specified otherwise. Also, memes are excempted to this rule). The articles I write are mainly for my own reference. From time to time, I aim to reach an audience. It’s also an excuse for me to call myself a writer.

Design #

I wanted this website to capture what it feels like to walk in the park.

To me, a park is an ideal environment to socialize, discover new things or just look around. I want the visitors of this site to feel that way. I want to show interesting stuff to make it fun to look around.

Why run a personal website #

Running a website feels the same as owning a house. Probably.

A house has to be maintained, but since you own the house, you can do whatever you want with it. This site is my own place in the internet. It’s my own land in the pangea that is the internet.

I don’t think there’s an alternative to having your own website. I still use Facebook to connect with friends but my thoughts mainly go here. I think it’s safer to host content this way and my content is not limited to one platform. I also like that I am not limited to what customizations I can do.

It’s also just so good to tell people you have your own webiste, I feel like Tony Stark when I tell someone, ‘oh I’m not really active on Facebook, but I’m active on my website’. In reality, the receiving end probably thinks I’m the kind of person who writes my own Wikipedia page, this feeling is probably heightened by the fact that they didn’t ask.

The technology of this blog #

This is a static site is rendered by Hugo, hosted on Github Pages. It’s written in plain CSS, and HTML. I have also installed staticCMS in my local copy of this website.

Previously, this site used the Jekyll theme Ananke. I customized it to fit a shorts section to the site. Today, it’s using letter, a theme made by me for this site. By having my own theme, I am able to design and customize every part of this website.

CMS #

When I first started this blog, if I wanted to get my thoughts into the blog, there were bottlenecks, one is that there’s no fast way to just type and publish a post. In Facebook, and Twitter, you’re just one URL/bookmark away, and a button press to publish a new post. I found that I can run StaticCMS on my copy of this website to get the same, fast, user experience.

I’ve setup hugo serve with a cron job to run on startup so that everytime I have a thought I want to publish, I can just open localhost:1313/admin to open StaticCMS. I think it’s awesome.