Category: Programming

Building a Flickr-to-WordPress Importer with Claude Code

Back in 2018, Flickr decided to limit free accounts to 1000 photos, and like many non-professional photographers, I needed a way out. I started using a WordPress site as my replacement for Flickr to save new photos I wanted to share, calling it “A new replacement for Flickr.” Then I thought of building a small project to import my existing Flickr photos to WordPress.

Fast forward 7 years, and I finally picked up this project again – but this time with Claude Code as my coding partner. What started as a personal need became a fascinating experiment in mastering AI-assisted development.

You can check out the complete project on GitHub and see the imported photos in action on my photoblog. It’s pretty satisfying to see all those Flickr memories living in their new WordPress home.

Continue reading “Building a Flickr-to-WordPress Importer with Claude Code” →

TIL – Message Queue

Key points:

  • A message queue is a form of asynchronous service-to-service communication used in serverless and microservices architectures. 
  • Calling it “queue” because of that messages are pulled in the mechanism of FIFO (First in First Out).
  • Different styles of message queuing: point-to-point (one message is received by one consumer), and Publish/Subscribe (one message is received by multiple consumers).
Continue reading “TIL – Message Queue” →

TIL – Term “God/Godlike Object”

Today, I encountered the “godlike object” term, and here is what it is:

In object-oriented programming, a god object (sometimes also called an omniscient or all-knowing object) is an object that references a large number of distinct types, has too many unrelated or uncategorized methods, or some combination of both. The god object is an example of an anti-pattern and a code smell.

https://en.wikipedia.org/wiki/God_object

This is somewhat every developer would avoid, especially when working on a large codebase. Remember two relevant terms: “divide and conquer strategy” in algorithm and “single-responsibility principle” in OOP.

TIL – WebAuthn

WebAuthn is considered more secure than traditional two-factor authentication (2FA) methods like Google Authenticator or Duo because it is linked directly to a specific device, offering a stronger guarantee against phishing attacks. However, this device dependency also makes it less portable, as users may find it challenging to authenticate from different devices or in scenarios where their primary device is unavailable.

Some good reference:

TIL – Timing Attack

Question: Why should we use hash_equals in PHP rather than just the simple string comparison?

Answer: Actually, it’s not something PHP specific. Instead, it’s universal among all programming languages. But why? With the typical string comparison, the false result will be emitted as soon as a non-matched character is found. By trying to compare the response time in a fast network (such as local LAN) from different string lengths and content, attackers can slowly verify the correct secret string. hash_equals ensures that there is no difference in terms of response time.

References:

TIL: git grep – replace code

I’ve recently worked on this PR to make the codebase of the repository more consistent by ensuring all “platform checkout” renamed to “woopay”.

First, I tried to use this search: 

grep --only-matching --ignore-case --extended-regexp --recursive --no-filename  "platform(.?)checkout" . | sort | uniq

However, it’s painful to exclude the .gitignore files and folders. And I recently learned to use git grep to achieve basically the same thing: 

# -h => --no-filename
$ git grep --only-matching --ignore-case --extended-regexp -h 'platform(.?)checkout' | sort | uniq

xDebug – nginx – php-fpm

A few times, I could not watch xDebug on my favorite IDE. I did check xDebug config as well as IDE, and followed up a tons of things, then it still did not work.

Then, I found out this myth: port 9000 conflict between xDebug client_port and php-fpm listen port.

It’s so frustrated that my IDE PHPStorm does not tell anything about this conflict, then I did not know anything about this.

How to solve this issue?

  • Disable php-fpm. This works for me as my server is run on Docker. The current php-fpm process is left intact due to my previous setup with the local PHP on my machine.
  • Change port in either xDebug or php-fpm, obviously.

I am using brew to manage PHP on my MacOS laptop, so this is the guide I needed to change the php-fpm port for PHP 7.4. In short, I needed:

  • Open file: /usr/local/etc/php/7.4/php-fpm.d/www.conf
  • Update 9000 to 9999 (or whatever port that does not create conflicts) in this line:
    listen = 127.0.0.1:9999
  • Restart brew service: brew services restart php@7.4 

How to know if it’s a conflict?

Use the following command to list out the current process(es) using port 9000, which is specific for Mac but I guess you can figure it out for other OS:

sudo lsof -PiTCP -sTCP:LISTEN | grep 9000

Based on this answer.

TypeScript Learn-up

TypeScript is more and more common when writing code for modern JavaScript. In my current work project, we have started using it for a while though not fully migrated it from JavaScript to TypeScript yet. However, it’s still a good opportunity to catch this up.

I learned two following courses in February:

They’re both excellent and I am looking forward to learn the advance course from them. They use the format of giving explanations, then examples, and finally reviews after that. It’s also very good at going deep-dive and answering multiple questions “why” TypeScript makes a specific decision as well as how to avoid mistakes, overcome specific limitations, etc.

Even so, I will consider taking this Udemy course to how to fit TypeScript into a specific project, especially a large project or a non-fresh project with some existing JavaScript code. And to apply some of these knowledge, I would like to refactor my side project currency-conversion to TypeScript too.

“parameters” vs “arguments”

I have been confused and used the wrong term too, so here it is:

An important note: you’ve probably heard the terms “parameters” and “arguments” used interchangeably. Then why is this type called Parameters and not Arguments? The reason is that the two words have different meanings when we talk about programming languages in a formal way.

A parameter is part of a function’s definition, like the n in function double(n: number). An argument is a value that we pass when calling a function, like the 5 in double(5). Many programmers call both of these “arguments” in everyday conversation. Compilers and other programming language tools like TypeScript need to avoid ambiguity, so they usually distinguish between parameters and arguments.

https://www.executeprogram.com/courses/everyday-typescript/lessons/returntype-and-parameters

Dependency Injection (plus Inversion of Control, and Dependency Inversion principle)

This is a note for myself to get to know more concrete details about Dependency Injection.

Dependency injection is a design pattern or at least “a set of patterns and principles; i.e. not a single pattern”. The intent behind dependency injection is to achieve separation of concerns of construction and use of objects.

This Wikipedia section is excellent in defining roles in dependency injection (their examples are great too):

  • the service objects, which contain useful functionality
  • the interfaces by which those services are known to other parts of the code
  • the client object, whose behavior depends on the services it uses
  • the injector, which constructs the services and injects them into the client

Three different types of depedency injections:

  • Constructor injection
  • Setter injection
  • Interface injection

Some thoughts from Martin Fowler:

  • Generally, Dependency Injection is better than Service Locator.
  • The choice between them is less important than the principle of separating configuration from use.
  • Prefer constructor injection over setter injection.

References: