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 advantage in that you can send less code to the user; an example is a header that either contains a log...| Posts on sometechblog.com
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 self-hosting. A fully managed deployment solution can get pricey (long running functions can easily...| Posts on sometechblog.com
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 of death. Not ideal, but strategies to mitigate these undesirable behaviors do exist and are easy...| Posts on sometechblog.com
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 optimizing the token usage makes even more sense. I am bootstrapping a small startup, that generates SQL usin...| Posts on sometechblog.com
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 could do most of the things I did with an ORM directly with SQL. And that I often could do it quicke...| Posts on sometechblog.com
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 │ └── utils.ts The routing logic behind ...| Posts on sometechblog.com
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) ServiceRenderDigitalOcean Node (1CPU/1GB Ram)$25/mo$25/mon Database (1CPU/1GB Ram)$20/mo$15/month Autoscaling$19/mo0 Bandwidth500GB in total (additional $30 per 100GB or $3.33 per GB)100GB per app (additional $0.10 per GB) Build500min per user/mo (additional $5 per 1000 min)0 Total$64/mo$40/mo Wh...| Posts on sometechblog.com
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 increase while Render’s offerings remains the same. Or that is not exactly true as users in the “individual group...| Posts on sometechblog.com
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 loading on each page load. This only happened in production hence I didn’t noticed it while develo...| Posts on sometechblog.com
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 CPU cores and it costed 3600 €. It was quite an investment. It was driven by the theoretical ar...| Posts on sometechblog.com
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 colors, larger text and line height. # Monochromatic theme Unless you are writing code or poetry, atte...| Posts on sometechblog.com
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 dependencies), the documentation and the complimentary libraries required makes it comprehensive. For experie...| Posts on sometechblog.com
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 the application matures should be handled together with the team, since everyone has a stake in the app and sh...| Posts on sometechblog.com
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 @prisma/cli yarn prisma init Prisma created a .env file with the database connection url. dotenvenc npm pack...| Posts on sometechblog.com
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 * @param {Boolean} isOpen: boolean is the element initially open * @param {Number} duration: number du...| Posts on sometechblog.com
Features that allow the user to fire multiple requests quickly and where only the latest request is relevant, should build in an abort controller. 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 server and update the search results. As requests for previously selected filters are irrelevant, it makes no sense for the browser trying to resolve them all. On the contrary i...| sometechblog.com
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 Turnstile. To get started you need 2 keys, a site key and secret key. You can see how to get them her...| sometechblog.com
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 traffic.| sometechblog.com
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”, “subscriptions”. This means that everything related to the subscription domain is located in the src/modules/subscriptions folde...| sometechblog.com
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 domains. To do this you need to set the cookie domain to root wildcard. If my web app is deployed on http...| sometechblog.com
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 priced PRO subscription. A PRO subscription cost $20/mo ($240/y) and includes 1TB of bandwidth, but ...| sometechblog.com
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 people burnout and others don’t? To burnout long periods of extensive work isn’t enough. At the...| sometechblog.com
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 write meaningful and relatively complex text in them.| sometechblog.com
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 Search” or copy paste this: brave://settings/searchEngines?search=Site+Search.| sometechblog.com
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 where you spend $400 to get $400 on decided to try it.| sometechblog.com
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 basic. No need to bother with a fancy UI layer or the limitions it often imposes.| sometechblog.com