Web apps and e-commerce sites may get all the love these days, but the majority of the web is still informational, and most websites are still content-led. Whether it’s a marketing website trying to convince you to buy a product or an informational site seeking to educate and answer your questions, the web is still dominated by words. But unfortunately, these sites face two substantial challenges: According to the Nielsen Norman Group, users only read 20 to 28% of a webpage. Most people who write content for the web lack the necessary skills, which leads to poor-quality content. In an ideal ..read more

Not every project has the budget to spend a lot of money on fonts. But that doesn’t mean that typography needs to play a secondary role when the budget is tight. The variety and quality of free and open-source fonts out there is impressive and enables everyone to use beautiful, well-crafted typefaces. In this post, we compiled some free fonts that we came across and that you probably haven’t spotted before. Some of them shine with their flexibility, some put a special focus on readability, and others are a great choice if you want to make a bold statement. As different as the fonts are, they a ..read more

With the introduction of Next.js 13 and the beta release of the App Router, React Server Components became publicly available. This new paradigm allows components that don’t require React’s interactive features, such as useState and useEffect, to remain server-side only. One area that benefits from this new capability is internationalization. Traditionally, internationalization requires a tradeoff in performance as loading translations results in larger client-side bundles and using message parsers impacts the client runtime performance of your app. The promise of React Server Components is th ..read more

This article is a sponsored by Neo4j Recently I was chatting with some folks about a book I wrote last year titled Full Stack GraphQL Applications. In the book, we demonstrate how to use GraphQL, React.js, and Neo4j to build and deploy full stack applications. One of the most common questions I get from readers is, “Can we use Next.js with this stack?” Next.js is a powerful React framework that adds many additional features and conventions on top of React, so the answer is “Of course!” In this article, we will explore how to build a full stack GraphQL application that takes advantage of the AP ..read more

Exhaustive, sometimes bizarre notes… wireframes… mind-bending blends of art and science. Is it a GitHub repository? No, it’s the life of a Renaissance genius. With the right lessons, we can all write some da Vinci code. Web development is a pretty big tent. It encompasses color, mathematics, accessibility, typography, photography, copywriting, ethics, and the list goes on and on. The web is a near-infinite world which — for all its relentless innovation and disruption — inherits many of its most beautiful qualities from old ways. It is in that spirit that we’ll be looking at the Italian polyma ..read more

We don’t live in an ideal world. Most of us have too much work, too little time, and too small a budget. When it comes to digital projects, it seems like our clients or bosses always prioritize speed over quality. To make matters worse, we read countless articles telling us how we should do things. These articles emphasize research and testing but do nothing more than leave us disillusioned and add to our imposter syndrome. In this article, I want to try a different approach. Instead of telling you what the best practice is, I’ll explore some practical approaches to user research that we might ..read more

More often than not, web engineers always have causes to build out forms, from simple to complex. It is also a familiar pain in the shoe for engineers how fast codebases get incredibly messy and incongruously lengthy when building large and complex forms. Thus begging the question, “How can this be optimized?”. Consider a business scenario where we need to build a waitlist that captures the name and email. This scenario only requires two/three input fields, as the case may be, and could be added swiftly with little to no hassle. Now, let us consider a different business scenario where users ne ..read more

CSS is amazing — I’m regularly surprised at how far it has come in the years I’ve been using it (~2005 – present). One such surprise came when I noticed this tweet by Shruti Balasa which demonstrated how to create a pie chart using conic-gradient(). It’s fairly straightforward. Here’s a code snippet: div { background: conic-gradient(red 36deg, orange 36deg 170deg, yellow 170deg); border-radius: 50%; } Using this tiny amount of CSS, you can create gradients that start and stop at specific angles and define a color for each ‘segment’ of the pie chart. Happy Days! Brills, I thought I could ..read more

This article is a sponsored by Neo4j The explosion of GraphQL over the past few years has introduced many front-end developers to the concepts of data modeling and storage, turning front-end developers into full-stack developers. GraphQL provides developers working on a simple contract with a database, guaranteeing consistency and predictability of the data returned while also managing persistence and data fetching. The developer trusts the API to store and retrieve the data most efficiently. But convenience comes at a cost. One day, your side project hits the front page of Hacker News, and a ..read more

Design inspiration! Where do you find interesting websites? Here’s a list of showcases that we frequently visit for inspiration. No matter if you’re looking for effective, unpretentious designs, websites that have that extra bit of fun built-in, examples of good e-commerce UX, interaction scenarios, or if you want to leave your own comfort zone and dive deeper into designs that go beyond the Latin writing system, you’ll surely find something in this post to tickle your ideas. Happy browsing! Table Of Contents You can jump directly to the topic you’re interested in to find relevant showcases or ..read more