The last guide to the useEffect Hook you’ll ever need

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!

Read More

Why unfavorable React keys lead to unpredictable behavior

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.

Read More

JavaScript to master before learning React

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.

Read More

Yarn Workspaces does not Honor .npmrc Location Precedence - Implications and Possible Solutions

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.
Read More

Testing of a Custom React Hook for Fetching Data with Axios

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.

Read More

Unit Testing of Vuex Actions with Mocha and Sinon

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?

Read More

Frontend-Entwicklung mit Grunt - Realworld Workflow (Teil 3)

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.

Read More

Mit wenig Aufwand Webseiten für Print optimieren

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.

Read More