Jeffry Houser's Blog
I was working on a project, where we get a lot of data from a remote system we do not control. We were displaying this data, which included an image. Most of the time the image data was valid, but every once in a while we got a broken image reference. We didn't want to show the default browser broken image link, like this: So, we needed another way. The answer was to use an error handler on the…
I was onboarding onto a new project and got an error when trying to checkout the repository. The filepaths were too long. How do I fix this? It turns out there is a git setting exactly for this issue. I just had to change my global setting. First, check the value: git config --global core.longpaths For me, I got no response when running the command, which mean the longpaths value had no value at…
If this came up in a Google search, welcome Windows Developers. After decades of experience across multiple different stacks, I finally ran into a puzzling problem. I couldn't check out a repo some of the files had colons in the file name. That's a first for me. Apparently, a colon in the file name is not allowed on Windows machines, but is okay on various forms of Linux, which includes Macs.…
I'm working with a team that is upgrading to a modern Angular version that no longer uses the zone.js library. This upgrade help makes angular work more effectively, but is beyond the scope of this article. In our test suite, we had some tests like this: it('some test', fakeAsync(() => { // do something tick(1000); // check something })); The ticks were, primarily, in the code because we were…
Both Vue and Svelte us something that I call Runes. These are special functions that have special meaning to the framework. I find these concepts parallel. Svelte uses $derived(), which is similar to Vue's computed(). Svelte uses $state(), which is similar to Vue's Ref(). These special functions are often used to wrap the variable values you want to use. For normal use the framework makes the rune…
I'm working on a Svelte app that uses Tailwind. I recently upgraded from Tailwind 3 to 4, and was getting this error: Cannot apply unknown utility class text-blue-200. Are you using CSS modules or similar and missing @reference? https://tailwindcss.com/docs/functions-and-directives#reference-directive It took a while to find the source, but the app had a Svelte, whose CSS imported a CSS File, like…
I have been working on projects with Git for over a decade. I'm primarily a Windows user. This shouldn't be a problem. For the first time ever, this year, I have been having a lot of trouble with line endings. When I check files out, Git was converting all the line endings to windows based line endings (CRLF), even though the Repo has linux based line endings (LF). Recommitting would change the…
I'm working on a Svelte Library, that imports a TypeScript library. The TypeScript library has an interface, which is used in a Svelte component. When using this setup in a Svelte application, everything worked great. However, I was trying to write some Storybook stories for the Svelte-Lib component, and was getting this error like this: The requested module…
I've been working on a Svelte project that integrates with an auth server. If the user's session cookie expires, the app shows a modal to the user prompting them to login. The modal persists until the user logs in. Creating this modal was easy . Unit testing the modal was not If you're following along, I already showed you how to test the modal in real time . This post will focus on testing the…
I've been working on a Svelte project that integrates with an auth server. If the user's session cookie expires, the app shows a modal to the user prompting them to login. The modal persists until the user logs in. Creating this modal was easy . Unit testing the modal was not. This article is all about writing unit tests for the modal using real timers. Write some Tests Start with the describe…
This took me a lot longer to figure out than I feel it should have, so as always, I thought I'd write about it. I've been working on a project where a Svelte application integrates with an Auth server. If the app discovers that the user is logged out, it displays a modal prompting the user to login. When the clicks the login button, a new tab is open, prompting the user through the login process,…
I've been doing a Svelte project for work, and therefore experimenting with it in my free time. I noticed that after generating a brand new project, using the Svelte instructions, the unit test command does not work. I got so frustrated with this I opened up a bug report . The error I see is something like this: 12:55:39 PM [vite] (ssr) Error when evaluating SSR module…
I want to install a tool shelf in my basement. I thought I'd just wash the wall, drill some holes, hang the shelf and be done with it in a few hours. It took 7 days! I will relate this to software development if you bear with me. The Home Project First, I needed some supplies. I needed a masonry drill bits for my drill, because I was pretty sure I'd be drilling into some brick or concrete. That's…
I have been working on Svelte library, and I just started configuring and writing unit tests for it. Vitest was set up and configured, but when running tests I Was getting an error like this: FAIL src/tests/my-class.spec.ts [ src/tests/my-class.spec.ts ] Error: Failed to resolve import "$app/paths" from "src/lib/my-class.ts". Does the file exist? Plugin: vite:import-analysis File:…
I'm doing some research for an article I'm writing about building VueJS libraries. Creating a default VueJS application with Vite creates a public directory in the root directory--which includes a vite.svg file. And it creates an assets directory under the src, which contains a vue.svg file. Both are referenced in the main App.vue. The directory structure looks like this: And you can see both…