More from Darek Kay
When I copy a browser tab URL, I often want to also keep the title. Sometimes I want to use the link as rich text (e.g., when pasting the link into OneNote or Jira). Sometimes I prefer a Markdown link. There are browser extensions to achieve this task, but I don't want to introduce potential security issues. Instead, I've written a bookmarklet based on this example extension. To use it, drag the following link onto your browser bookmarks bar: Copy Tab When you click the bookmark(let), the current page including its title will be copied into your clipboard. You don't even have to choose the output format: the link is copied both as rich text and plain text (Markdown). This works because it's possible to write multiple values into the clipboard with different content types. Here's the source code: function escapeHTML(str) { return String(str) .replace(/&/g, "&") .replace(/"/g, """) .replace(/'/g, "'") .replace(/</g, "<") .replace(/>/g, ">"); } function copyToClipboard({ url, title }) { function onCopy(event) { document.removeEventListener("copy", onCopy, true); // hide the event from the page to prevent tampering event.stopImmediatePropagation(); event.preventDefault(); const linkAsMarkdown = `[${title}](${url})`; event.clipboardData.setData("text/plain", linkAsMarkdown); const linkAsHtml = `<a href="${escapeHTML(url)}">${title}</a>` event.clipboardData.setData("text/html", linkAsHtml); } document.addEventListener("copy", onCopy, true); document.execCommand("copy"); } copyToClipboard({ url: window.location.toString(), title: document.title });
I'm a frequent user of bookmarklets. As I'm sharing some of them on my blog, I wrote this post to explain what bookmarklets are and how to use them. In short, a bookmarklet is a browser bookmark containing JavaScript code. Clicking the bookmark executes the script in the context of the current web page, allowing users to perform tasks such as modifying the appearance of a webpage or extracting information. Bookmarklets are a simpler, more lightweight alternative to browser extensions, Chrome snippets, and userscripts. How to add a bookmarklet? Here's an example to display a browser dialog with the title of the current web page: Display page title You can click the link to see what it does. To run this script on other websites, we have to save it as a bookmarklet. My preferred way is to drag the link onto the bookmarks toolbar: A link on a web page is dragged and dropped onto a browser bookmark bar. A bookmark creation dialog appears. The prompt is confirmed and closed. The created bookmarklet is clicked. The current web page title is displayed in a browser dialog. Another way is to right-click the link to open its context menu: In Firefox, you can then select "Bookmark Link…". Other browsers make it a little more difficult: select "Copy Link (Address)", manually create a new bookmark, and then paste the copied URL as the link target. Once created, you can click the bookmark(let) on any web page to display its title. Scroll further down to see more useful use cases. How to write a bookmarklet? Let's start with the code for the previous bookmarklet example: window.alert(document.title) To turn that script into a bookmarklet, we have to put javascript: in front of it: javascript:window.alert(document.title) To keep our code self-contained, we should wrap it with an IIFE (immediately invoked function expression): javascript:(() => { window.alert(document.title) })() Finally, you might have to URL-encode your bookmarklet if you get issues with special characters: javascript:%28%28%29%20%3D%3E%20%7B%0A%20%20window.alert%28document.title%29%0A%7D%29%28%29 Useful bookmarklets Here are some bookmarklets I've created: Debugger — Starts the browser DevTools debugger after 3 seconds, useful for debugging dynamic content changes. Log Focus Changes — Logs DOM elements when the focus changes. Design Mode — Makes the web page content-editable (toggle).
It can be frustrating to fill out a web form, only to accidentally refresh the page (or click "back") and lose all the hard work. In this blog post, I present a method to retain form data when the page is reloaded, which improves the user experience. Browser behavior Most browsers provide an autofill feature. In the example form below, enter anything into the input field. Then, try out the following: Click the "Example link" and use the "back" functionality of your browser. Reload the page. Query Example link Depending on your browser, the input value might be restored: Browser Reload Back Firefox 130 Yes Yes Chrome 129 No Yes Safari 18 No Yes How does it work? I was surprised to learn that this autofill behavior is controlled via the autocomplete, that is mostly used for value autocompletion from past web forms. However, if we disable the autocompletion, the autofill feature will be disabled as well: <input autocomplete="false" /> To learn more about the behavior, read the full spec on persisted history entry state. Preserving application state Even with autofill, no browser will restore dynamic changes previously triggered by the user. In the following example, the user has to always press the "Search" button to view the results: This is an interactive example. Please enable JavaScript to use it. Query Search ... const inputElementNative = document.querySelector("#example-search-input"); const outputElementNative = document.querySelector("#example-search-output"); const performSearch_exampleSearch = (outputElement) => { outputElement.innerText = ""; const introText = document.createTextNode("Open the result for "); outputElement.appendChild(introText); const link = document.createElement("a"); link.href = "https://example.com"; link.innerText = inputElementNative.value || "no text"; outputElement.appendChild(link); }; document.querySelector("#example-search-form").addEventListener("submit", (event) => { event.preventDefault(); performSearch_exampleSearch(outputElementNative); }, ); If the web page changes its content after user interaction, it might be a good idea to restore the UI state after the page has been refreshed. For example, it's useful to restore previous search results for an on-site search. Note that Chrome will fire a change event on inputs, but this is considered a bug as the respective spec has been updated. Storing form values As the form value might be lost on reload, we need to store it temporarily. Some common places to store data include local storage, session storage, cookies, query parameters or hash. They all come with drawbacks for our use case, though. Instead, I suggest using the browser history state, which has several advantages: We get data separation between multiple browser tabs with no additional effort. The data is automatically cleaned up when the browser tab is closed. We don't pollute the URL and prevent page reloads. Let's store the search input value as query: document.querySelector("form").addEventListener("submit", (event) => { event.preventDefault(); const inputElement = document.querySelector("input"); history.replaceState({ query: inputElement.value }, ""); performSearch(); }); This example uses the submit event to store the data, which fits our "search" use case. In a regular form, using the input change event might be a better trigger to store form values. Using replaceState over pushState will ensure that no unnecessary history entry is created. Uncaught TypeError: Failed to execute 'replaceState' on 'History': 2 arguments required, but only 1 present. Restoring form values My first approach to restore form values was to listen to the pageshow event. Once it's fired, we can access the page load type from window.performance: window.addEventListener("pageshow", () => { const type = window.performance.getEntriesByType("navigation")[0].type; const query = history.state?.query; if (query && (type === "back_forward" || type === "reload")) { document.querySelector("#my-input").value = query; performSearch(); } }); I will keep the solution here in case someone needs it, but usually it is unnecessary to check the page load type. Because the history state is only set after the search form has been submitted, we can check the state directly: const query = history.state?.query; if (query) { document.querySelector("#my-input").value = query; performSearch(); } Demo Here's an example combining both techniques to store and restore the input value: This is an interactive example. Please enable JavaScript to use it. Query Search ... const inputElementCustom = document.querySelector("#example-preserve-input"); const outputElementCustom = document.querySelector("#example-preserve-output"); const performSearch_examplePreserve = (outputElement) => { outputElement.innerText = ""; const introText = document.createTextNode("Open the result for "); outputElement.appendChild(introText); const link = document.createElement("a"); link.href = "https://example.com"; link.innerText = inputElementCustom.value || "no text"; outputElement.appendChild(link); }; document.querySelector("#example-preserve-form").addEventListener("submit", (event) => { event.preventDefault(); performSearch_examplePreserve(outputElementCustom); history.replaceState({ query: inputElementCustom.value }, ""); }); const historyQuery = history.state?.query; if (historyQuery) { document.querySelector("#example-preserve-input").value = historyQuery; performSearch_examplePreserve(outputElementCustom); } Conclusion Preserving form data on page refresh is a small but impactful way to improve user satisfaction. The default browser autofill feature handles only basic use cases, so ideally we should maintain the form state ourselves. In this blog post, I've explained how to use the browser history state to temporarily store and retrieve form values.
In this post, I will summarize some problems and constraints that I've encountered with the Notifications and Push web APIs. Notification settings on macOS Someone who's definitely not me wasted half an hour wondering why triggered notifications would not appear. On macOS, make sure to enable system notifications for your browsers. Open "System Settings" → "Notifications". For each browser, select "Allow notifications" and set the appearance to "Alerts": Onchange listener not called Web APIs offer a way to subscribe to change events. This is especially useful in React: navigator.permissions .query({ name: "push", userVisibleOnly: true }) .then((status) => { status.onchange = function () { // synchronize permission status with local state setNotificationPermission(this.state); }; }); Whenever the notification permission changes (either through our application logic or via browser controls), we can synchronize the UI in real-time according to the current permission value (prompt, denied or granted). However, due to a Firefox bug, the event listener callback is never called. This means that we can't react to permission changes via browser controls in Firefox. That's especially unfortunate when combined with push messages, where we want to subscribe the user once they grant the notification permission. One workaround is to check at page load if the notification permission is granted with no valid subscription and resubscribe the user. Notification image not supported Browser notifications support an optional image property. This property is marked as "experimental", so it's not surprising that some browsers (Firefox, Safari) don't support it. There is an open feature request to add support in Firefox, but it has been open since 2019. VAPID contact information required When sending a push message, we have to provide VAPID parameters (e.g. the public and private key). According to the specification, the sub property (contact email or link) is optional: If the application server wishes to provide, the JWT MAY include a "sub" (Subject) claim. Despite this specification, the Mozilla push message server will return an error if the subject is missing: 401 Unauthorized for (...) and subscription https://updates.push.services.mozilla.com/wpush/v2/… You might not encounter this issue when using the popular web-push npm package, as its API encourages you to provide the subject as the first parameter: webpush.setVapidDetails("[email protected]", publicKey, privateKey); However, in the webpush-java library, you need to set the subject explicitly: builder.subject("[email protected]"); There is an open issue with more information about this problem. Microsoft Edge pitfalls Microsoft introduced adaptive notification requests in the Edge browser. It is a crowdsourced score system, which may auto-accept or auto-reject notification requests. The behavior can be changed in the Edge notification settings. Additionally, on a business or school device, those settings might be fixed, displaying the following tooltip: This setting is managed by your organization.
More in programming
Brilliant jerks, ZIRP-era managers, and how psychological safety lost the plot. Part 3 of my conversation with Dr. Cat Hicks.
Say you're deploying an AI assistant that processes online order returns. For it to work, it would need access to your store's purchase policy, item…
Many people say that to find a software engineering job in Japan, you need to be here first. The most common ways into Japan without a job are to become a student, arrive on a Working Holiday visa, or use the J-Find visa — all of which mean spending a lot of money just to show up and still not be sure it will work out. When I was a university student in India, I knew very well that getting hired as a junior software engineer in Japan while still overseas would be difficult. It makes sense, as companies here hire on trust, and trust is hard to build at a distance. But Japan is also a country staring down a shortage of hundreds of thousands of IT workers by 2030, with foreign workers already at a record 2.6 million and still climbing. The door is harder to get through, but there’s a whole line of people worldwide standing in front of it, and the country actually needs them to come in. Now I’m a tech lead at a Japanese startup, where we help people find and buy abandoned homes (空き家, akiya), which made up a record nine million properties in the government’s 2023 survey. I’ve lived in Japan for just over a year. I know there are a lot of people out there chasing the same Japan dream, working hard for it just like I was a few years ago, so I hope they can get a few ideas from someone who has already done it. How I got hired as a junior software engineer from overseas What I’ve learned working as a software engineer in Japan How to get a junior software engineering job in Japan Conclusion How I got hired as a junior software engineer from overseas I came to Japan despite many hurdles. Let me lay out everything that happened, and everything I did, to close the gap between me and what I wanted My starting point I started a four-year computer science degree in 2020, and it was the first time I was studying something I actually cared about. My grades sat around 8.9 out of 10 each semester and it barely felt like work. That taught me something I still believe, which is that the hard part is never the studying, it is finding the things worth studying. For me, one of those things was Japan. I’d trained in karate back in India up to green belt, and that pulled me towards the culture. I soon found I also loved the food, the nature, and the level of hospitality. So I set a goal: get my first job in Japan within three years. I also knew the usual route to Japan my classmates took—the mass campus placements, with hundreds hired in one batch—wasn’t for me. I didn’t think I was above it, but I could easily see myself disappearing into the crowd. Instead, I went looking for another way in. Finding a door to Japan What I needed was a connection, a thread that could somehow link me from South Asia to Japan. I started finding LinkedIn groups that let you work as an intern at Japanese startups. These startups were usually run by big players in Japan, often international residents, who could be the CEO or founder of many smaller companies. These are the English-friendly ones I joined back in the day: Internship opportunities in Japan Internship Japan Business in Japan They’re all pretty slow now, but in 2021 they were bustling, almost crazy with activity. The first two are internship-focused ones: students post their skills and resume, and managers share openings you can apply to directly. The Business in Japan group is different, and more of an entrepreneur crowd, but I joined it because those are exactly the people who can hire you. The one that worked best for me was Internship opportunities in Japan, because that’s where I found my first connection. I strongly recommend that group to anyone wanting an internship. Whether they start paying you depends on the company, what stage they’re at, and how much trust you’ve built with them. Preparing for a Japanese internship When I joined the groups, my resume was super odd, and I couldn’t have gotten a job or an internship with it. Still, I joined and added my Japanese-style self introduction in English. After a few days, one of the group admins messaged me about whether I wanted an internship, and then asked for my resume. It was really bad, but I sent it anyway, and we came to the mutual conclusion that I could come back later with a better skillset. Later that year I started building my skillset on my own. Honestly, you have to be a few steps ahead of your university, since they won’t teach you exactly what you will end up building at a company. At that time most people I knew went the Data Structures and Algorithms (DSA) route, which means you grind a lot of DSA, crack the interview, and figure out real building later. I went a different way. I started with learning how design actually works, and it turned out to be less difficult than it was time-consuming: you have to build a real taste for what goes where and what pairs with what. You can’t slap a Roboto font on an established news site. That went into my portfolio, which I started early and have rebuilt many times. Alongside it I shipped small personal projects to make life easier for me and the people around me, because even a silly MBTI test you play with friends is a real product if you know what you’re building. I also joined online hackathons (my mailbox was always full of stickers from them). My first real shot at a job in Japan About eight months later I went back to the admin of the internship group with these new experiences, and this time I got the chance to work with a few people from Japan Travel. The CEO of Japan Travel, Terrie Lloyd, is also the founder of Daijob, one of the country’s most well-known job platforms. Lloyd’s a Kiwi entrepreneur who landed in Japan back in 1983 on a Working Holiday visa, at 24 years old, with no degree and no Japanese, and still went on to build company after company. I was getting my chance from someone whose own story was proof that an “impossible” path was possible. We were building an idea called O2O Stays, basically a marketplace for accommodation nights. Hosts could sell nights in bulk upfront at a discount, and buyers could use them, resell them, or trade them—kind of like the short-term rentals you already know, but more flexible. I took it even though it was unpaid, for a simple reason: I had never worked at a real technical firm, and this looked like no risk and high reward. You can teach yourself to build websites, but the things that actually matter—like system design, Core Web Vitals, and the real-world problems you encounter—you only learn once actual people start using what you built. That was worth more to me than getting paid right away. My task was to build an informational website. This honestly felt huge to me back then. It was also my first real deadline and I underestimated it. The timeline slipped more than I wanted, but I was lucky to be on a team with genuinely good people, so we figured it out and shipped it. At the end I got my first letter of recommendation from my Internship, and that one letter opened the door to multiple internships after it. Building while learning A lot of that early internship experience was unpaid, and I was fine with that, because when you have no track record, even the experience itself is worth a lot. But then things started to change. In my third year at university, one of the best places I worked with was MarkoKnow, a Delhi-based startup. That’s where I built my first real application and a few admin pages, and gained a lot of firsthand knowledge. By the end I felt like I could build anything (though that was probably just the adrenaline rush). Those experiences made me want to learn more, about whatever I could do with just me and my laptop. I put a lot of time into researching Web3 and even built a project out of it that got published on IEEE with one of my university classmates. I dabbled in VR, AR, and IoT too, but the one that mattered most in the long run was machine learning, which would end up helping me a lot further down the line. I also made sure to stay in touch with people I’d met during my internships. I sent them updates on what I was building, shared my portfolio and resume each time they got better, took genuine interest in the work their companies were doing and where tech could push it further, and stayed visible by commenting on posts and checking in. Turning a connection into a job at AKIYA2.0 By August 2023 I was 20 years old, my final year of university was approaching, and my main motivation was to get a job fast. The usual path would have been an internship that converts into a pre-placement offer, and landing one in my home country is a real achievement. But the thing was, I still wanted to be in Japan. I went back to the connection I’d kept warm and asked for a new opportunity. That follow-through was what kept the door open, and this time it opened onto a great one: Terrie was on the verge of co-founding another company. It had something to do with abandoned homes, and they were offering a paid part-time job. My first task was to understand the abandoned home market and build a small scraper for a single municipality, using Tesseract OCR to read through documents, since AI still had a really bad name back then. It wasn’t pretty: on that early setup, our scraping accuracy sat around 60-70%, and validation was lower still. Later we migrated the whole thing to Gemini, which pushed scraping close to 99.5% and cut our costs by around 96%. I loved the work, and almost without noticing I drifted into much more than just software engineering. Being at a startup, I was soon hiring interns and part-timers, leading projects, and building new services and tools on my own so that nobody had to manage the extra pieces I was adding. By the time they brought me on as a full-time software engineer in March 2024, the title just formalized what I was already doing. Finally, Japan I’d just graduated that spring, and I wanted to spend a year living with my family, since I’d spent most of my life in other cities at boarding school, hostels, and university. The job with AKIYA2.0 allowed international remote work, so I had the option to stay home with my family for a year, and that was something I didn’t want to skip. Then, in April 2025, I finally moved to Japan. The move itself was surprisingly simple, because my company handled most of the paperwork. I just sent over some documents and they filed for my Certificate of Eligibility (COE). It took exactly two months, and it arrived on my birthday, while I happened to be in Singapore. I had to return to India to get the visa process started. It went smoothly and I got a three-year Engineer/Specialist in Humanities/International Services visa. What I’ve learned working as a software engineer in Japan In my three years at AKIYA2.0 so far, I’ve built three websites: https://www.akiya2.com/ https://www.singchamjapan.org/ https://www.hinokistays.com/ I also built an AI scraper covering all 47 prefectures in Japan, and became genuinely good at SEO, GEO, and system design, while managing a bunch of interns and part-time engineers. And I’m still chasing more—I want to be great at all of it. ^The mindset that got me here is simple: don’t think only about survival. Think about making your presence so bright that it becomes hard to ignore you. That mindset still matters after you arrive, because moving to Japan doesn’t make everyday problems disappear. You still have to build a life here, and how difficult that feels depends a lot on who you are and what you’re used to. For a lot of people, that adjustment is the hardest part, sometimes even harder than landing the job in the first place. The daily friction adds up in ways you don’t expect. You might have dietary restrictions, feel suffocated on a rush-hour train, spend the entire weekend recovering from the working week, or simply feel lonely. For me, the adjustment wasn’t especially difficult. I had always wanted to live independently, and after years in boarding school and hostels, I was used to being away from home. What Japan unexpectedly gave me was a real sense of freedom, because I could work during the week and travel on the weekends. That has honestly been the best part of my experience, particularly the peaceful countryside, beautiful nature, and countless shrines I’ve come across along the way. If I had the chance to start again, I would get properly good at Japanese before moving. Living here without it is possible, but knowing the language opens up far more of the country: events, friendships, relationships, jobs, and the connections that might eventually lead to a startup opportunity or even a course at a Japanese university. When you’re already living in Japan, it feels like a shame to miss so much of what is happening around you. How to get a junior software engineering job in Japan Where to find junior software engineering jobs in Japan from overseas In my experience there are two kinds of people who don’t make it: the ones who never get an opportunity, and the ones who get one but give up. The ones not getting opportunities are usually just not searching in the right places, or not building a network. How do you find opportunities? You look for them online and in communities. TokyoDev lists junior developer jobs, and is one of the best examples of how much networking matters in this career, and LinkedIn is a great tool too, if you learn how to use it. There are CEOs, CTOs, and COOs from startups and big firms sitting right there on LinkedIn and X. So what’s stopping you from a cold email? Build a portfolio that gets you noticed But a tool only gets you in front of people; after that you have to impress them. As a software engineer, the only real way to impress someone is by building something for them. And to earn that chance, you first have to get good at the basics. ^About 95% of what companies build isn’t niche or original. It’s the same kind of product that already exists across many businesses, and often in open source too. Only a small slice, maybe 5%, is truly novel. Don’t run for that 5% yet, not while you’re starting out. Get genuinely good at the 95% first, because that’s what almost every real job actually involves. After all, working in Japan isn’t niche either. The competition is huge, and being a real professional is what sets you apart. Being a professional shows in the specifics. If you’re a frontend engineer, don’t tell me you know React or Vue, middle schoolers know them by now. Show me the components you built that made your own life easier, your page load times, your Core Web Vitals, and how your SEO holds up. If you’re a backend engineer, talk about the choices you’d make for a given product, the alternatives you actually know, how you cut costs, and how you fill the gap between a developer who just writes code and an engineer who takes responsibility. That attitude is exactly what I look for when I interview interns, part-timers, or engineers. Learn what software engineering skills are in demand in Japan Another tip is to study your market and see what’s booming right now. AI is the obvious hot topic, and Japan is pouring serious money into it lately. The government has committed over 10 trillion yen (around 65 billion US dollars) in public support for AI and semiconductors through 2030, and for the coming fiscal year it nearly quadrupled its chip and AI budget to about 1.23 trillion yen (7.9 billion dollars). AI startups often get founded by certain kinds of people—Japanese citizens returning from abroad, PhD holders from Todai or Waseda, and sometimes international residents as well. Sakana AI is a good example, founded by David Ha, Llion Jones, and Ren Ito. Some of these companies even have English-speaking roles. Conclusion So target thriving sectors like AI, but keep a backup plan. And seriously, start studying Japanese, because looking at the market now it matters more and more. However, I moved to Japan in April 2025 with no Japanese at all, so there’s always a way. Don’t lose hope. If you have the right mindset, can find the places where opportunities live, and are as persistent as you possibly can be, then with time you’ll look up and realize you already have everything you were chasing. Honestly, if I can do it, I’m sure anyone reading this can too, so keep trying.
Tupo is my first new game in four years. I'm excited to share it with the world, and to talk about the process behind it.