Almost five years ago, I wrote an article on how to setup a development workflow utilizing ESLint for static code analysis and Prettier for beautifying code.

Three major players exist in the field of package managers today:

Not too many developers know about the useDebugValue Hook, although it provides a much better debugging experience when it comes to debugging custom Hooks.

This article explains the React Hooks useState and useRef. You’ll learn their basic usage and get to know the different use cases for both Hooks.

This article addresses an important issue in software development projects: keeping dependencies up to date. Updating dependencies closes potential security vulnerabilities and allows us to use recent features and apply bug fixes. Here, I demonstrate an approach to update dependencies automatically in CI/CD environments using Renovate.

I’m re-learning Java, which I have already dealt with in large parts of the 2000s. In addition to pair-programming with my experienced work colleagues, I plan to pick out language features and concepts, and deal with them more intensively. In this article I describe my learnings about the chapter “Don’t use raw types” part of the excellent book “Effective Java”. This constitutes a good starting point to learn about generics.

This article aims to demystify relative length units. In contrast to absolute length units (with px as the best known representative), relative length units specify a length relative to something else. This “something else” can be of various types, e.g., a parent element’s font size, the width of a parent container, or the height of the viewport.

Understanding how the useEffect Hook works is one of the most important concepts for mastering React today. If you have been working with React for several years, it is especially crucial to understand how working with useEffect differs from working with the lifecycle methods of class-based component. In fact, it is a wholesale shift in mindset!

Lists are ubiquitous in applications. In real-life projects, such lists can get very long and, thus, performance-heavy. That’s why React wants you to add unique keys to every element whenever you iterate over a list of objects to render multiple JSX elements.

As you likely already know, React is a library to create UI components that can be used as the basis of web and mobile applications. What distinguishes React from some of its competitors is that its code is written entirely with JavaScript. Even the HTML-like templates are written in JS using JSX, which is an extension of the JS language to structure UI components.

These days, you have to use a modern module bundler such as webpack to benefit from a development workflow that utilizes state-of-the-art performance optimization concepts. Module bundlers are built by brilliant people just to help you with these difficult tasks.

A tab control is a crucial component for mobile apps. It enables users to navigate between screens or makes different portions of on-screen content accessible by switching between views.

Two years ago, I wrote an article on how to setup a development workflow utilizing ESLint for static code analysis and Prettier for beautifying code. It was in the context of Vue.js but 99% of the concepts and related technologies are independent of the actual frontend development framework. Meanwhile, I use React on a daily basis on my job project.

Using a mouse or trackpad is a major distraction and flow-breaker for many development tasks, especially programming. I strive for using keyboard shortcuts as much as possible to be more productive while programming.

Yarn Workspaces has a bug that does not respect the location precedence of .npmrc / .yarnrc files to configure registry settings if you run a yarn command in a selected workspace. Consider the following situation:

• A .npmrc file located at home folder specifies a registry entry to use a private npm registry.
• A .npmrc file located at a project root specifies a registry entry to target a public npm registry like this registry=https://registry.npmjs.org.

Gastbeitrag von Jérôme Waibel (diva-e) und Jörg Alberto Hoffmann (diva-e)

Hooks is a new concept of React. It requires some rethinking of existing knowledge. Furthermore, developing React components with hooks requires a mind shift (e.g., don’t think in lifecycle methods). It needs some time to get comfortable, but with some practice hooks can be incorporated into real-life projects without problems. Custom hooks are very useful to encapsulate logic into isolated modules that can be easily reused.

Normally, beginning your journey with CSS entails a steep learning curve. However, mastering CSS is hard since it is such a broad topic in itself. The field of applications is diverse, thus understanding the basics helps you to become a more productive developer.

Inspired by an article why flex-grow is weird, I’ve developed a small tool (Codesandbox) to explore how different properties of flex items work separately or in combination. You can reproduce all examples of this article with my tool. I hope you find it useful.

This post is my take on the topic of Mono-Repo. After a brief introduction to Mono-Repos and a comparison with Multi-Repos, I go into tools for establishing Mono-Repos.

Do you struggle to get started with technology? Do you have problems to establish a good plan for leaning new things?

Something special is developing with Vue CLI 3. At the time of this writing Vue CLI is in beta status. It is already pretty awesome! To get a brilliant overview, read Vue CLI 3: A Game Changer For Frontend Development.

Unit testing your Vuex-powered state management includes verifying getters, mutations, and actions. Because of the synchronous nature of getters and mutations, testing them is straight forward. On the other hand, testing actions can be sometimes tricky since most of the time asynchronous code is involved. Especially testing the key functionality of your actions is not easy – are your actions dispatching mutations correctly in the right context with the right arguments?

Please consider my cross-post on Medium. This document constitutes the original version of my article. However, I make improvements only on the Medium article.

In Teil 1 der Beitragsreihe zum Thema Frontend-Entwicklung mit Grunt bin ich darauf eingegangen, was Grunt ist und wie Grunt funktioniert. Teil 2 hat beleuchtet, wie Gruntfiles wartbar gehalten werden können, indem beispielsweise Task-Konfigurationen in eigene Dateien ausgelagert werden können. In diesem Teil möchte ich einige Grunt-Plugins vorstellen, die sich für mich als nützlich erwiesen haben. Im Folgenden werden die verschiedenen Plugins kurz angesprochen, wobei ausführliche Dokumentation von den jeweiligen Plugin-Seiten zu entnehmen sind.

In Teil 1 der Beitragsreihe zum Thema Frontend-Entwicklung mit Grunt bin ich darauf eingegangen, was Grunt ist und wie Grunt funktioniert. In Teil 2 möchte ich genauer darauf eingehen, mit welchen Techniken vermieden werden kann, dass das Gruntfile unübersichtlich und schwer wartbar wird.

Ich möchte mit diesem Beitrag eine Beitragsreihe starten zum Thema Frontend-Entwicklung mit Grunt. Teil 1 beschreibt, was Grunt ist und wie man es verwendet.

Sehr viele Websites, insbesondere Business Sites, bieten keine für den Druck optimierten Seiten an, was einen unprofessionellen Eindruck vermitteln kann. Klar, in Zeiten von Tablets könnte man zu dem Schluss kommen, dass Ausdrucken von Webseiten ein Relikt aus der Vergangenheit darstellt. Jedoch werden insbesondere im Geschäftsumfeld viele Seiten weiterhin zu Papier gebracht. Es ist zu vermuten, dass das Thema druckoptimierte Webseiten auch in Zukunft noch relevant sein wird, denn Papier ist für Viele immer noch ein geeignetes Medium, um beispielsweise Annotationen in Meetings zu machen.