Build this beautiful, small weather app and learn how to best plan and organize a React project. A beginner-friendly introduction to thinking in React.
In this article, we are going to build a beautiful, simple weather app with React.js. By doing this, we will discover and learn some essential skills:
Unfortunately, learning these theoretical things is often rather boring than excited, although it is important. That’s why I like to put it in a more practical-approached context by building a real app. …
Without a doubt, Notion.so is one of my favorite apps when it comes to organizing notes. I love their minimal designed text editor because it focuses your attention on the content — and not on unnecessary UI elements.
Yet it provides you a ton of powerful features that lead to a better writing experience.
For instance, the slash command is one of those features that really enhanced my writing flow. It allows you to add and style content without leaving the keyboard. …
Yes, I know… there are certainly more exciting topics to write about than dealing with cursors on a web page. But since I struggled a lot with this issue in my latest project, I decided to share my approach — hoping that it might help one or the other.
In this article, we are going to create two methods for locating the caret: One to get the X/Y coordinates and another to get the index position within the content.
Recently, I built a text-editor where users could edit HTML content inside a
contenteditable element. …
This article should provide a general understanding of how Gatsby works and how it can be used to create a personal website from scratch. If you are new to Gatsby, this article is for you.
I recently published the first iteration of my personal website. Since I haven’t had a chance to try Gatsby prior to the project, it was the first time for me to dive into this new ecosystem.
Even though I got more and more enthusiastic about Gatsby throughout development, it was admittedly quite overwhelming at first. …
The web is a great platform. It’s an open-ecosystem that anyone can use and build on. Sometimes, however, it is not possible to build exactly what you want due to missing capabilities.
Think about a messaging application that should use the contact list on your smartphone to select friends to chat with. In today’s web, you can’t build an app like this because you don’t have access to native features like contact lists.
Google calls this the app gap.
It describes the gap between what’s possible on the web and what’s possible on native. …
These days, the discussion about Progressive Web Apps is often primarily focused on whether they will replace native apps or not. And while this might be an interesting topic to talk about, people forget about the first and foremost intent PWAs were built for: Enhancing the web’s user experience.
However, ignoring this can come to you at a high cost. No matter if you have a native app or not. This article should help you in evaluating PWA technology.
Discussing PWAs, it seems like one question is ubiquitous: Which app model will be the most promising in the future? Not only on social media but also in companies the debates are quite the same. A lot of people solely focus on the question if they either should build a PWA or native app. A lot of people solely focus on the question if they either should build a PWA or a native app and if PWAs will have a future at all. …
Traditionally, platforms like PHP or Ruby on Rails took care of the rendering process server-side. Lately, new frameworks like React or Angular took that process from the server to the client. With service workers, we now have a third place where we can implement a template engine — between client and server. This article shows you what I mean by that, the advantages that come with it, and how you can use it.
Service-Worker-Side Templating works like any other template engine. You have your templates, e.g. an article page, stored within your cache. For any intercepted requests, the service worker will fetch the data from an external API or its cache, populate the merge fields within your template, and return the rendered HTML to the client. …
Progressive Web Apps have been hyped for quite a long time. Since the term was coined by Google’s engineer Alex Russell back in 2015, a lot of people referred to it as the future of app development and enumerated its advantages over and over again.
But let’s face the truth: People and businesses haven’t yet adapted to Progressive Web Apps. Even though we have seen some great case studies in the past, it feels like neither corporates nor users have been embracing this new technology thoroughly. Or how many PWAs do you use in your daily life?
In this article, we want to analyze how mature Progressive Web Apps are today. We want to have a look at the brief history of this new technology and its challenges, in particular. By identifying what may have caused a lack of acceptance in the past, we can draw conclusions about areas where this new technology needs to grow in the future. …
Hosting your Gatsby site with Netlify is a perfect pairing. The whole development workflow gets so smooth using both. However, redirects, for instance, don’t work out of the box yet, or at least not the way you would expect it to work. Therefore, this article should show you two ways how you can add redirects to your Gatsby site hosted on Netlify.
Adding redirects via
Adding redirects via
Which one you choose is up to you, whatever you prefer. However, since both don’t work out of the box in Gatsby, we, first of all, have to install a plugin called gatsby-plugin-netlify. It is an official Gatsby plugin and will handle the redirects we set up during the build process. You can check the link for more information. …
I recently read the biography of Steve Jobs, written by Walter Isaacson. And although there are many things interesting enough to write about, it was one particular aspect that got me fascinated throughout the whole book: Jobs’s ability and discipline to focus.
Well, you may think it’s nothing new that Jobs was really dedicated to simplicity and focusing, and you’re certainly right. But I, nevertheless, was impressed by how he implemented both in a straightforward way at Apple. …