sometechblog.com
The most important programming-style and architectural decisions I make as a frontend (or full-stack) developer building a complex application: TypeScript types are the glue that holds the application together and ensure changes can be made quickly later when you revisit older code. Server-client communication is secured with end-to-end type-safety (also a classic source of bugs in applications —…
I used to host the web app ( SQLAI.ai ) on Vercel and still do, but I moved the “app” portion to Cloudflare, given the much broader feature set and significantly lower price. The app is deployed on a subdomain and runs completely separately. I initially wanted to move the landing pages to Cloudflare and port them to Astro , but it was too much work moving all the legacy pages for too…
Partytown is a library dedicated to offloading third-party libraries such as tracking scripts to a web worker, i.e. downloading and executing them in the background. Partytown is easy to install but is still in beta and the documentation is a little lacking. To make Partytown and Google Analytics work as expected in relation to Google Analytics’ official documentation, two changes are…
The main advantage of server-side applications is that you can render large parts of applications on the server, where there is already access to the database and other configurations that do not exist on the user side without building an API logic. But one of the most important elements for usability is that the application loads quickly. Server-side rendered applications of course have an…
If you want to use Gemini’s public API, but at the same time have a safe fallback in case you have exhausted the rate limits, you can use the OpenAI TS/JS library and a few helper functions. In my particular case I needed a type-safe solution for a chartmaker app with a fallback since Gemini’s gemini-2.5-pro-exp-03-25 model is restricted to 20 request/min. First, you need to define…
Received a complaint email from Amazon SES (Simple Email Service) pointing out that my SES account could be closed because the complaint rate exceeded 0.51%. Bots were apparently abusing the input field to send signin emails to unknowing email addresses. The only exposed input field in my NextJS app is on a magic-link form , see it here . Cloudflare offers an easy and free captcha solution with…
If you want to keep your hosting costs low and not be forced to take the steep path from “Hobby” to “Pro”, avoid NextJS’s ‘Image’ component. Only 1,000 images are included in the free “Hobby” plan and even with a “Pro” plan it costs after 5,000 images; $5 per 1,000 images. Of course, you also avoid the “data transfer” limitations which you can hit fast with an embedded video and…
When I started building my application I used a routing-based structured and as the application evolved I transitioned – at least partially – to a domain-driven structure. In the domain-driven structure the application is essentially divided in multiple smaller applications with their own domains. In my case that includes “generators”, “dataSources”,…
By default NextAuth authenticates the domain provided by the NEXTAUTH_URL environmental variable and if it is on a sub domain like www.example.org also all domains below www like subdomain.www.example.org or subdomain.subdomain.example.org . It is often smart to make the domain authentication work across all sub domains to avoid restrains when branching out API services or deploying on sub…
After adding an embedded video to the landing page of my app I noticed bandwidth usage rose dramatically. The embedded video is auto-loaded for best experience and provides a sleeker experience than a YouTube embed. In a week the landing page videos both the optimized .webm (5.1MB) and .mp4 (20.4MB) consumed close to 25GB of bandwidth. This would push me out of the free tier and into a steeply…
Burnout is a modern euphemism for exhaustion depression. Burnout happens after prolonged periods of extensive work and the symptoms are similar to those of a classical depression: social withdrawal meaninglessness sadness lethargy People with burnout need months to recover. Recovery is spent alone without doing anything and retracted from social life. This is all well depicted but how come some…
In most examples I know, if not all, OpenAI uses English. But OpenAI actually supports multiple languages both as input and output. But how well does OpenAI support the different languages? I set out to find out, completely unscientifically. I googled around and found a long list of supported languages. I initially implemented all the languages and then tested to what extent OpenAI can actually…
Site search enables you to search on various sites directly from the browser’s search bar. The implementation is rather low tech but it is useful for both remembering high-quality search engines and avoid having to navigate to a site first in order to use its search engine. To add a site search to your browser, in this case Brave or Chrome, go to the settings page and search for “Site…
I Started a small bootstrapped startup in the aftermath of corona after being stuck in home office for, well, years. As a developer one of my main hurdle wasn’t building features but marketing. I used the regular channels social media, Product Hunt and SEO and they worked, but growth just isn’t rising fast enough that I can make a living out of it. So when Google Ads offered a deal…
Next.js has become not only the leading framework for building React-powered web apps but also a simple way to develop and deploy JavaScript applications with less manual configuration. The developer ergonomics are great. The CLI installer sets up the whole repository with Typescript, Lint, watch mode, configuration files and other basics. There are many deployment options from fully managed to…
Server components enable you to render the entire pages on the server without messing around with API endpoints and data fetching logic. But handling the different states remains an issue for the optimal usability experience. Without handling these states the user interface feels sluggish while waiting for the server response and an error would render the entire screen useless with a white screen…
Limiting OpenAI’s token usage isn’t merely desirable because it is cheaper and faster, but also because it increases the size of the overall context. OpenAI caps this at 8.000 tokens for most models with a possibility of up to 32.000 tokens (if you are lucky to get invited, presumably). I haven’t seen anybody offering 32K tokens computations nor showcasing it. So in the meantime…
While I was building aihelperbot.com I did what I imagine many developers do: I used an ORM for everything database related. I used ORM to handle migrations, define schemas, insert data, update data, select data, etc. I didn’t think much about it. It was only later while building aihelperbot.com I started to wonder if I really needed an ORM? Using AI more and more I started to realize that I…
I wanted to add markdown blog to my NextJS app. Initially I feared it would be a lot of work. But it turned out to be easy when using NextJS server side components, i.e. the appDir . This is the end result: blog overview blog post To get started I added the scaffolding for the markdown blog to the appDir : app/ ├── posts/ │ ├── [slug] │ │ ├── head.tsx │ │ └── page.tsx │ ├── head.tsx │ ├── page.tsx…
What does it cost to host a small web app on Render vs Digitalocean with Render’s new pricing model? The tech stack: web app running Node.js database running Postgres (Render only support Postgres) Service Render DigitalOcean Node (1CPU/1GB Ram) $25/mo $25/mon Database (1CPU/1GB Ram) $20/mo $15/month Autoscaling $19/mo 0 Bandwidth 500GB in total (additional $30 per 100GB or $3.33 per GB)…
Render adopted a new pricing scheme for its services on 1st of January 2023. And like DigitalOcean they market it as “predictable pricing” however unlike DigitalOcean it isn’t simple anymore. Render now charges both for its services and per user. The specific user pricing then in turns depends on “group type”, e.g. individual, team or organization. It is only a price…
I was checking the performance of one of my web sites using Page Speed and noticed it complained about assets loading slowly as well as the initial response time from the server being a bit long (500ms-700ms range). My first thought was that it might be the database queries being too slow. I quickly ruled that out (they all took in the vicinity of a few milliseconds). Then I noticed Stripe was…
I had no idea what would happen to me that day. It was my last day working for a client in Berlin. I came to the office to work and have a small goodbye party on the sunny terrace. This was the first time in the psychical office, before that I have, like almost everybody else, been working from home. I had bought my laptop just a year before. It was the most expensive Macbook Pro 16" with 8 Intel…
Sublime Editor is build for writing and reading code. However the urge to write down your thoughts on different matters might come and for this Sublime Editor offers excellent support. Both out of the box and with a few useful packages. Opposite to coding, where concise code blocks and programing logic becomes more readable through highlighting and linting tools, writing is easier with fewer…
Redux is a popular library used to manage global application state, at least the claim. Lots of developers struggle to understand what Redux does and how to use it properly. When saying global state most developers would intrinsically imagine a simple library lifting up individual states into a shared global object. This isn’t Redux. Although Redux is a small library (2kB, including…
It’s that time again where I have to prepare for job interviews. Since companies aren’t looking quirky originals, you need to learn what to say to look attractive. And have some answers to the common questions. #### How do you approach complex problems? There isn’t one approach since complex problems are different. Here are some common ones: structural/architectural problems as…
Originally the plan was to get familiar with Next.js and Prisma by making a simple boilerplate for it. Turns out a few commands is all it takes to generate a basic working app. Let’s get started and add Next.js: npx create-next-app my-app To add Typescript run touch tsconfig.json && yarn dev and Next.js will generate the needed files and install packages. Then add Prisma: yarn add -D…
Hiding or showing a element with React is as simple as an if statement deciding whether to print it or not. However often you want to be able to animate the transition, so that it smoothly closes or opens. To avoid cluttering the various components with this animation logic, extract the logic into a hook: /** * Returns the variables needed to animate a open and close functionality via height *…
Features that allow users to fire multiple requests quickly — where only the latest request is relevant — should include an AbortController. A typical example of this is a search filter allowing the user to quickly select and deselect filters. With each clicked filter, the application will fire another request to the server and update the search results. As requests for previously selected filters…
Although it is clearly not in fashion at the moment, deploying websites on a VPS (virtual private server) or regular server for that matter, without any containerization and orchestration is both fast and easy. I have been running my private VPS (with Ubuntu 16.06) for years without much sweat. Using the command line to install and configure a server is both easy and powerful once you know the…
I am a full-stack developer with years of experience in planning, structuring and building web and mobile apps. I live in Copenhagen and enjoy sharing thoughts and perspectives whenever time allows for it. If you are interested in collaborating or hiring me, please check out my resume site: www.lassetange.com . I am working on: SQLAI.ai : Generate, fix, validate, optimize and explain SQL/NoSQL…