Blog
We enjoy everyday life and keep a close eye on how cutting-edge
technology is put to work in society and in practice.
With the help of AI, we write about the topics that personally interest us.
We hope you find a fresh idea or a useful hint here.
-
Old-School Front-End, Frameworks part 7: Side effects and fetching data
Connected to the real Spring Boot. Dev fired requests twice, out-of-order answers left 14 Oct's rate behind, and a Promise made inside the component asked 317 times in 3 s. CORS, CSRF and 401, measured.
Where useEffect and Suspense fit. -
Old-School Front-End, Frameworks part 6: Forms and input checks
Sending with React 19 Actions, checked on screen and on the server with the same rules. The screen sent nothing and took 0.02 s. <form action> wiped the purpose even on a no, and a double click made two claims.
Before and after the send, measured. -
Old-School Front-End, Frameworks part 5: State and re-rendering
Rows driven by useState. One key re-renders six components; two places change on screen. push doesn't render; two setRows add one row. Keying by position moved a ✓ and left a deleted row behind.
State and re-rendering, measured. -
Old-School Front-End, Frameworks part 4: First steps in React
The claim form in React from a Vite starter: components, rows passed down as props, what JSX really is, seven mistakes, 50 ms HMR, and 3.8 MB in dev versus 451 KB in production.
Building in React at last. -
Old-School Front-End, Frameworks part 3: History II, after React
The items table in current Vue, Angular, Svelte and Solid. No drift or errors under a strict CSP. On 5000 rows, React and Vue take 90-odd ms per key; the three signal-based ones about 10.
Rebuild-and-compare versus signals. -
Old-School Front-End, Frameworks part 2: History I, from jQuery to MVC
The items table in 2010's three answers: Backbone, Knockout, AngularJS. No count drift, and 1.6–16.4 ms per key on 5000 rows, faster than React. But two fail under a strict CSP.
The schools compared, by measurement. -
Old-School Front-End, Frameworks part 1: Why frameworks were born
Add a row count to the jQuery claim form and it goes stale in 3 of 8 actions. Rebuild everything and it is right, but the box you type in vanishes. React is right and fast, for 226 KB.
The start of a new 15-part series. -
Old-School Backend, part 15 (final): Running it, taking the claims app off your own PC
Flyway puts the schema in the source; a Docker image, compose and nginx in front. No connection reuse means 502s; virtual threads give 2.7x on waiting work but nothing inside a transaction. Shutdown and a 512 MB box.
The final part of 15, measured to the end. -
Old-School Backend, part 14: Tests, so the machine remembers what we fixed
The skeleton's one test stayed green with three fixes undone. Spring-free, counter-only, real-PostgreSQL and race tests make 107, and all ten undone fixes were caught. Coverage and PIT.
Measured by writing tests and breaking the code on purpose. -
Old-School Backend, part 13: Logging and monitoring, so you can read afterwards what happened
Unknown URLs were 500s, DEBUG wrote 5 lines per GET, and hashes reached the log. Request numbers, structured logs, Actuator's numbers and the connection pool, and 30 seconds then 500 when the database stops.
Measured by rereading our logs. -
Old-School Backend, part 12: Files, receiving receipt photos without trusting their names or contents
Phone photos refused by default limits, and no reply at all for 12 MB. Storing under the name received overwrites files and escapes the folder. First bytes, SHA-256 fingerprints, returning by number and permission, and drift between DB and disk.
Measured on our own practice application. -
Old-School Backend, part 11: Authentication and authorisation, making sure of who and deciding whether they may
Writing a name in a header made you anyone. Spring Security login and sessions, bcrypt and roles, and closing IDOR, where changing a claim number shows others' claims, with MyBatis's where clause. Plus when to answer 401, 403 or 404.
Measured on our own practice application. -
Old-School Backend, part 10: State transitions, who may change an approved claim
An approved claim's amount can change, and a mistyped status lands in the database behind a 500. Transition tables, the update's where clause, history, screen buttons and 409, and a database CHECK: five layers guarding the status.
Measured with MyBatis and PostgreSQL. -
Old-School Backend, part 9: Transactions and concurrent updates, the last save wins
Two people edit one claim and the first change silently vanishes; 150 simultaneous spends all get OK, yet the budget drops by only 18,000 yen. Subtracting in SQL, for update, versions, retries, deadlocks and long transactions.
Measured with MyBatis and PostgreSQL. -
Old-School Backend, part 8: Database access, the same list in JdbcClient, JPA and MyBatis
Same answer, different SQL: plain JPA's N+1 with 104 statements, an update without save, open-in-view, and MyBatis's ${} returning everyone's claims. The jar grows from 24 MB to 55 MB. Plus how to choose.
Measured with the database log. -
Old-School Backend, part 7: Exceptions and replies, graduating from “A system error has occurred”
From plain Spring Boot, where a missing reference and a double click are 500s, to ProblemDetail and @RestControllerAdvice with 400 reasons, 404, 409 and reference numbers. Plus the false success of swallowed exceptions, and stack traces never to send.
All measured. -
Old-School Backend, part 6: Input checks, what to check, where, and how far
A missing @Valid lets empty and negative values in; part 1's marks silently round ¥1280.125 and turn 101 characters into a 500. Strict marks, the JSON stage, unknown fields, a UTC app calling Tokyo's today the future, and database CHECKs.
All measured. -
Old-School Backend, part 5: Back to Spring Boot, DI, three layers and “only one bean”
196 beans, 8 ours. With DI the clerk runs in 0.23 s without Spring, an applicant kept in a field swaps on 87–102 of 200 claims, Tomcat and Jackson take over part 3 and 4's failures, and @Transactional called from inside its own class does nothing.
All measured. -
Old-School Backend, part 4: Talking to the database by hand, JDBC, SQL injection and transactions
PostgreSQL with only the JDBC driver: six round trips per connection, refused at 97 unclosed ones, other people's claims through glued SQL and 0 rows with placeholders, getLong on NULL giving 0, 1,000 rows from 385 to 22 ms, and half a claim left by autocommit.
Measured with the database log and Wireshark. -
Old-School Backend, part 3: HTTP by hand, ServerSocket, threads and the JDK's HttpServer
Reading HTTP line by line with only the JDK, a reply cut short by a character-count Content-Length, one silent client stalling the server, and threads and virtual threads taking 50 requests to 0.2 s. JSON read with a regex turns an amount into ¥780.
Measured with curl, nc and Wireshark. -
Old-School Backend, part 2: Java basics, holding money, dates and times correctly
¥999 from double, BigDecimal manners and rounding, times whose date depends on the place, timestamp vs timestamptz, SimpleDateFormat, null, records, characters and bytes.
Measured with jshell and PostgreSQL. -
Old-School Backend, part 1: the big picture, how one submission travels through the server into the database
A new series building the receiving end of our submissions in Java, over fifteen parts.
Part 1 runs a Spring Boot and PostgreSQL expense server and measures one submission's trip. -
Old-School Networking, part 12 (final): troubleshooting when it won't connect, one rung at a time from the bottom
The troubleshooting ladder, misleading error messages, refused versus dropped, checking TLS, who sent the 5xx, and splitting a slow request.
We break the practice network one piece at a time and measure. The last of twelve parts. -
Old-School Networking, part 11: the developer's network, localhost, inside and outside Docker, and proxies
localhost as a name, 127.0.0.1 vs 0.0.0.0, Docker containers and -p, localhost inside containers, office proxies, and dev-server proxies vs CORS.
We measure the inside of a developer's PC with Docker and a practice network. -
Old-School Networking, part 10: HTTP, reading the submit button's message line by line
The shape of requests and responses, methods and idempotency, status codes, ETag and 304, cookies, CORS, compression, and HTTP/1.1, 2 and 3.
We measure the submission's HTTP on a practice server. -
Old-School Networking, part 9: DNS, looking up addresses from names in the internet's phone book
The name tree, the resolver's path, TTL and caching, record types, hosts vs dig, and what happens when DNS stops.
We measure name lookups through three tiers of practice DNS servers. -
Old-School Networking, part 8: Layers 5 and 6, and TLS, putting a lock on the submission
Layers 5 and 6, TLS's three promises, key sharing, certificates, four verification failures, ECH and shrinking certificate lifetimes.
We measure what HTTPS hides, what it leaves visible, and what it costs. -
Old-School Networking, part 7: UDP and sockets, letters without greetings and the program's doorway
UDP's 8-byte header, boundaries, fragments and head-of-line blocking; then sockets, the accept queue and epoll.
We measure what happens to later messages when one is lost, over TCP and over UDP. -
Old-School Networking, part 6: TCP, ports, the three-way handshake, retransmission, windows and congestion
Ports, the handshake, Seq and Ack, retransmission, the receive window, congestion control and TIME-WAIT.
A “mischief wire” that drops packets on purpose shows how thorough TCP is. -
Old-School Networking, part 5: Routers, routing tables, TTL, traceroute, and what your “home router” really is
Routing tables and the longest match, TTL and traceroute, ICMP, what a home router really is (NAT), ASes and BGP.
Loop the road on purpose: how many times does one ping go round before it dies? -
Old-School Networking, part 4: IP addresses, 32-bit addresses and “/24”, DHCP, and IPv6
32-bit addresses and “/24”, special addresses, DHCP, IPv4 exhaustion and IPv6.
We find out what a /16 typo does by getting it wrong on purpose. -
Old-School Networking, part 3: the data link layer, MAC addresses, switches and ARP asking everyone
MAC addresses, switch learning, ARP, MTU, VLANs and STP, checked with one switch and three PCs.
We also measure what one broadcast becomes inside a loop. -
Old-School Networking, part 2: the physical layer, where 0s and 1s become electricity, light and radio
The 266 bytes on the cable, computing the FCS, copper, fibre and Wi-Fi, hubs and switches.
We measure how much faster one submission gets on a 100× faster line. -
Old-School Networking, part 1: the big picture, from the Submit button to the server in seven layers
A new series following one request from the Submit button, layer by layer, over twelve parts.
Part 1 maps OSI and TCP/IP, records 14 real packets and takes 266 bytes apart. -
Old-School Front-End, part 15 (the last): finishing touches, checking with tools, shoring up the defences, going live, and the door to frameworks
The expense-claim app from 15 parts, checked with an HTML validator and axe-core, fixed, and given CSP and SRI defences.
We sort out going live, then rewrite the same table in Vue 3 for a look through the door to frameworks. -
Old-School Front-End, part 14: jQuery, rewriting the same page with “$” and comparing side by side
The claim form from parts 8 to 10, rewritten in jQuery 4.0.0 and checked for identical behaviour.
With a practice server we try the $() wrapper, $.ajax versus fetch, and what changed since 3.7.1. -
Old-School Front-End, part 13: totals and printing, adding up by month, drawing a bar chart by hand and putting it on paper
Add claims up by month, category and person, and draw an SVG bar chart by hand.
With a practice server we check the Date trap that shifts months, rounded shares, and print CSS. -
Old-School Front-End, part 12: the approval flow, checking a claim in a dialog and moving it on with one button
Check a claim in a dialog element, then send approve or send back as JSON.
With a practice server we check what showModal() does, the JSON Content-Type, 409 and versions when two approvers press at once, and history times. -
Old-School Front-End, part 11: signing in and moving between screens, asking “who are you?” on every page
A sign-in page, and every screen first asking the server who you are.
With a practice server we check HttpOnly cookies, the trap in next, 401 versus 403, and hiding versus refusing. -
Old-School Front-End, part 10: asynchronous requests, talking to the server with fetch without leaving the page
The fourth JavaScript part: fetch an exchange rate to convert dollars, send the claim and get a claim number back.
We check, with a practice server, that fetch doesn't treat 404 or 500 as errors, why money needs whole numbers, and how to stop double submissions. -
Old-School Front-End, part 9: validation, stopping people kindly and telling them how to fix it
The third JavaScript part is validation: how far the browser's own checks go, and JavaScript taking over the rest.
We try regexes, the toISOString date trap, messages that say how to fix things, and red borders, a summary and focus. -
Old-School Front-End, part 8: JavaScript and the DOM, adding and removing rows and showing the total as you type
The second JavaScript part: the DOM and events, so line items can be added and removed and the total updates as you type.
We try event delegation, template, textContent versus innerHTML, and where focus goes after a removal. -
Old-School Front-End, part 7: JavaScript basics, writing a function that totals the line items
The first JavaScript part: kinds of value, variables, functions and loops, building a function that totals the line items.
We run the + trap that glues strings together, and money traps such as full-width digits, NaN and decimals. -
Old-School Front-End, part 6: CSS with Bootstrap, using the old-timers' toolbox once you know what's inside
The claims list and claim form rebuilt with Bootstrap 5.3.8: reading the classes, mapping them to our hand-written CSS, the grid and components.
We also measure the load-order trap, Bootstrap 4 code sneaking in, and the files' weight. -
Old-School Front-End, part 5: CSS layout and phones, arranging with flex and grid and fitting any screen width
Making the claims list readable on phones: meta viewport, flex and grid, a table that scrolls on its own, and media queries.
We measure column counts and switch points, and learn short layouts that don't fall apart. -
Old-School Front-End, part 4: CSS selectors and the box model, dressing the claims list in hand-written CSS
Hand-written CSS for the claims list from part 2: selectors, the cascade and specificity, inheritance and the box model.
We measure who wins and how wide boxes really are, and learn to write CSS without leaning on !important. -
Old-School Front-End, part 3: forms, building the claim form in HTML and seeing what gets sent
The claim form in plain HTML: label and name, the controls, buttons and the browser's checks.
We submit it for real to see the GET URL and the POST body, and why on-page checks can be bypassed. -
Old-School Front-End, part 2: HTML structure, building the claims list from meaningful tags
The claims list in plain HTML: header, nav, main and footer, headings, a table, links and images.
How it differs from div soup, as seen by screen readers and AI, and checked with a validator. -
Old-School Front-End, part 1: how a web page reaches the screen, and the plan for an expense app
A fifteen-part series begins: the opposite of vibe coding, an expense app written by hand in HTML, CSS and JavaScript.
Part 1 covers how pages reach the screen, what each language does, a screen plan, the tools, and a first page. -
A guide to Docker Desktop: what it does, how it works, the screens, and the alternatives
The first post in the new Software category. Real screens marked with numbered steps: starting from Docker Hub,
logs, Exec and files, settings, the basic terms, pricing, and how it compares with Rancher Desktop, OrbStack and others. -
Playwright in practice: origins, how it works, an expense-form test, and AI
From Selenium and Puppeteer to Playwright, and how contexts, auto-waiting and locators work, in diagrams.
Real tests for an expense-claim page, groundwork at the design stage, and how to make AI follow your testing rules. -
The story of sake: 1,300 years of rice, water and koji
The rare “multiple parallel fermentation”, what junmai, ginjo and daiginjo mean, and a history from an 8th-century chronicle to UNESCO.
Plus a map of sake country from Nada to Niigata, and how temperature changes the taste. -
The story of Wagyu: from farm partner to the world's favourite beef
What makes beef Wagyu, the four breeds, the bull behind 99.9% of Japanese Black cows, what A5 and BMS mean, and why the fat melts.
Plus a map tour of Matsusaka, Kobe, Omi, Yonezawa, Miyazaki, Kagoshima and more. -
The story of yakitori: from wild birds on skewers to the red lanterns of every street
From skewered wild birds and Meiji street stalls to post-war alleys and the broiler boom, told with a timeline.
Plus a chicken-cut diagram, ten skewers, salt versus sauce, the binchotan grill, a regional map and famous shops. -
The story of yakiniku: from post-war street stalls to Japan's favourite feast
From twelve centuries of meat bans to the first yakiniku restaurants in 1946, bottled sauce, smokeless roasters and solo yakiniku.
Plus a beef-cut diagram, an offal guide, a regional yakiniku map, famous shops and how to eat it safely. -
The story of tempura: from a Portuguese-era fry to an Edo street-stall favourite
From Portuguese-era origins to Edo street stalls and the birth of tempura soba and tendon, told with a timeline and illustrations.
Plus Kantō vs Kansai styles, the classic pieces, what makes it crisp, and Tokyo's famous old tempura houses. -
What is a gene? Not a cell, not an atom, but information
Is a gene like a cell, or a particle like an atom? A zoom from the body down to atoms shows what genes are and where they live.
Then: how proteins are made, why genes matter so much, and what they do and do not decide about our lives. -
Sushi for beginners — a guide to the classic toppings and how to eat them
Lean and fatty tuna, salmon, white fish, shiny fish, shellfish, uni and ikura, in photos.
Then, with illustrations: what order to eat in, soy sauce, hands or chopsticks, and conveyor-belt etiquette. -
Japanese ramen, north to south — its history and 15 regional bowls on the map
How noodles from China became Japan’s national comfort food. Then Sapporo miso, Kitakata shoyu, Hakata tonkotsu
and 12 more regional styles from Hokkaido to Kagoshima, on a map of Japan and in photos. -
Marvel films in story order — a timeline of all 38 MCU movies (2026 edition)
Captain America, Iron Man, Hulk, Spider-Man, the Avengers: all 38 films in the order they happen.
Story years, sagas and phases, series-by-series order, films outside the MCU, and the best order to watch. -
From Ikebukuro to Akihabara — a one-day route through the Electric Town, Ochanomizu, Kanda and Ueno (autumn 2026)
Twenty minutes on the Yamanote Line, or eleven to Ochanomizu on the Marunouchi. Hijiri Bridge, Yushima Seido and Kanda Myojin, the Electric Town and the Sunday car-free street,
then mAAch ecute, 2k540, Ameyoko and Shinobazu Pond. With shops and lunch picks. -
n8n in practice — how it works, where it fits, a web-development example, and a comparison with UiPath
n8n's history, how it works, its licence and where it is used. A real post-deploy acceptance check, automated,
then a comparison with UiPath: where n8n can take over and where UiPath keeps the edge. -
Docker from the basics to practice — developing, deploying and maintaining a Java web system
Containers versus VMs, images, volumes and the other terms, and the main use cases.
Then a Spring Boot and Vue client system shows what gets easier in development, the database, deployment and maintenance. -
From Ikebukuro to Studio Tour Tokyo — a day behind the scenes of Harry Potter (autumn 2026)
Fifteen minutes on the Seibu line, the 9:00 slot and three to four hours inside: tickets, budget, the route and when to eat,
Halloween to 8 November, and the park and Ikebukuro at sunset on the way home. -
Running large models locally — from CUDA versus Metal to Qwen3.8-27B in LM Studio
CUDA, Metal and the other families, options on Windows, Mac and Linux, what 27B and Q4_K_M mean, and practical text, image, voice, OCR and translation models.
Then Qwen3.8-27B in LM Studio, step by numbered step. -
Tokyo DisneySea in a day — autumn 2026, the 25th anniversary and Halloween
Anna and Elsa DPA the moment you are in, Fantasy Springs in the morning, harbour shows and fireworks at night,
updated for October’s closures such as Tower of Terror, with tickets, budget and a map. -
Tokyo Disneyland in a day — autumn 2026, Halloween season
Queue before opening, buy DPA in the app the moment you are in, then Fantasyland, the parades and the fireworks,
updated for the October price rise and the end of the Priority Pass, with tickets, budget and a map. -
Okutama in a day — from Lake Okutama down the Tama River to a sake brewery
The Holiday Rapid to Okutama, a walk across the Ogochi Dam, the Shiromaru fish ladder and Hatonosu gorge,
then the Mitake Gorge path down to Sawanoi-en at Sawai, with two maps and timings. -
Tokyo in a day from Ikebukuro — the Imperial Palace, Ueno and Asakusa
The subway to Tokyo Station, Nijubashi and the East Gardens of Edo Castle, Ueno’s pond, market and national museum,
then Senso-ji at dusk and the Sumida River by night, with two maps and timings. -
A RustDesk manual — what remote desktop needs, and when you need a server
Do you need RustDesk after Tailscale? Does it work out of the box?
When a relay or your own server helps, and how to pair it with Tailscale with no server at all. -
A Tailscale manual — from networking basics to how it works and how to use it
IP addresses and NAT, then how Tailscale connects without port forwarding;
setup on Windows, Mac, iPhone and Android, remote desktop and file transfer, screen by screen. -
Enoshima and Kamakura in a day — a hanging monorail to the island, the Enoden to the Great Buddha
The suspended monorail from Ofuna to Enoshima, a coastal walk to the Kamakura-Kokomae crossing,
then the Enoden to Hase’s Great Buddha and on to Kamakura, with two maps and timings. -
Vibe Coding Field Notes — what goes beyond AGENTS.md on a larger system
Where specs, ADRs, area rules, skills and hooks live, and how to run them;
one approval flow followed from spec to verification. Seven chapters. -
AGENTS.md Field Notes — the house rules you hand to an AI
What it is for, when it helps and how to write one, with this site’s own file and the research;
and whether smarter AI will make it unnecessary. Seven chapters. -
Atami in two days — from a hot-spring town to a lava coast and a volcano
The MOA Museum, Kinomiya Shrine, the seafront and a night at a hot-spring inn;
then the Jogasaki bridge and Mt Omuro’s crater rim, with two maps and timings. -
Hakone in a day — mountains, a lake and a hot spring from Ikebukuro
Mountain railway, art museum, Owakudani, pirate ship, Hakone Shrine and a hot spring,
with a timed schedule and a route map. -
A beginner’s roadmap to Mac apps — from zero to a utility you can ship
Swift basics, SwiftUI, menu bar apps, permissions and the sandbox,
through to signing and notarization. Eight steps, with diagrams. -
Spigen Classic LS — AirPods Pro 3 dressed as the first Mac mouse
The case I liked best after comparing many.
Why Pro 3 now, how it feels, how it lives day to day. With photos. -
Laya Field Notes — owning the decision model
The open version that landed three days after Jev: who was first,
whether training is really that easy, and where to run it. Six chapters. -
Jev Field Notes — where a model that writes nothing fits
Do you define state and the options yourself? What goes in for a web test?
Can it trade stocks? Worked through with diagrams. Six chapters. -
Vector Field Notes — turning words into numbers
Readers said the vectorisation part did not land.
One idea, taken on its own, with plenty of diagrams. Six chapters. -
Model Field Notes — where specialisation comes from
Images, video, code: why one foundation grows different talents,
through to reading intent and finding bugs. Six chapters. -
LLM Field Notes — mechanism to practice
Next-token prediction, attention, training stages, hallucination,
prompting, MCP and agents, reading a spec sheet. Seven chapters.
No posts match these filters.