A quick cheatsheet about useEffect. Examples of controlling when the effect runs, skip unnecessary function calls using the dependency array!

A useEffect reference to my future self

useEffect Hook: Dependency Array Cheatsheet

As a Developer you might like the idea to design your resume as a website to impress your future employer or just as an easy way to share the link with clients or friends. I've made a template for a single page resume that can easily be hosted on GitHub Pages (or somewhere else) with TailwindCSS, Vite and Ionicons. I am using the template for my own resume! It is fully responsive and customizable - check it out!

A single HTML-file template for your resume that fully responsive and customizable! Can be hosted wherever you like to host your static sites.

Developer's Resume Template - made with Tailwind, Vite and Ionicons

Object Destructuring is a handy syntax feature of JavaScript. It enables you to write cleaner code, especially when using it to destructure parameters right inside a function definition! I rarely used it in the past, although familiar with the syntax. But recently it saved me a lot of pain when I needed to pass a bunch of arguments to Vuex actions and mutation handlers. It allowed for easily keeping track of all the stuff being passed around between the functions!

Object Destructuring is a handy syntax feature of JavaScript. It enables you to write cleaner code, especially when using it to destructure parameters right inside a function definition!

Object Destructuring, but Why?

CSS position can be used to design layouts, align elements pixel-perfectly and even draw pictures! So, in order to learn the fundamentals of CSS positioning, here is a quick reference! Two vivid examples are included to play around with on CodePen!

CSS position can be used to design layouts, align elements pixel-perfectly and even draw pictures! So, in order to learn the fundamentals of CSS positioning, here is a quick reference! Two vivid examples are included to play around with!

The CSS Position Property Explained -  with Examples

Lately, I've been thinking alot about choosing the right tools and frameworks for another project. Ok, I simply go ahead and choose. Harder than you think! Because so many tools are damn hot right now - like TailwindCSS. Other tools have been hyped for years and still are - like React. But what if these tools aren't fit for every project? What if they only shine in their specific domain? Here is what I found to choose the right tools depending on the use-case of your web project.

Before starting new projects in Web Development I have been thinking alot about tools I want to use next. But are the tools that I have in mind really fit for the job? Here is what I found.

The Right Tool for the Job in Frontend Engineering

The Blockchain has constantly been hyped and is still gaining popularity - not only for cryptocurrencies such as Bitcoin pushing forward into our daily lives. Blockchain technology promises privacy and security, thus enabling a free internet of independent users. And with the rise of IoT devices, data generation, processing and storage is growing out of hand. This article provides an introduction to the merger of Blockchain technology with IoT networks to enhance privacy and security for the user.

This article provides an introduction to the merger of Blockchain technology with IoT networks to enhance privacy and security for the user.

Blockchain-based Sensor Data Validation

Websites should be easily shared on Social Media such as Facebook, Twitter, Whatsapp etc. In order to be an eye-catcher, it is essential to display the link in a visually attractive manner e.g. with a featured image, a convincing title and a concise description. It will drive peoples engagement! In this Tutorial we use meta tags in the HTML head along with Open Graph for sharing a Card on Twitter.

In this Tutorial we use meta tags in the HTML head along with Open Graph for sharing a Card of your website on Twitter.

How to preview your Website shared on Social Media with Meta Tags

Part II: Learn fundamental concepts of Vue.js like emitting custom events and component re-rendering and more! This is a followup Tutorial where we will extend the existing Vue Quiz App with a Modal giving the user a smooth experience. Create a custom Quiz App along with me!

Part II: Learn fundamental concepts of Vue.js like emitting custom events and component re-rendering and more! Create a Frontend Quiz App along with me and Vue!

Vue.js Tutorial Part II: Build a Frontend Quiz App

Modern frontend frameworks like Vue or React use props to pass data down the component tree. But how to pass data up? With Vue you can design your custom event, define how it is triggered and catch data bubbling up to the parent component.

Modern frontend frameworks like Vue use props to pass data down the component tree. But how to pass data up? With custom events in Vue.

Emit Events in Vue to pass Data between Components

CSS powers the web along with HTML and JavaScript. CSS has powerful features, one being the display property defining how an HTML element integrates into the CSS Flow Layout of a Website. Background knowledge of the display property and its most frequently used values block and inline helps to understand positioning and element flow in the browser! Additionally, a working example is supplied for outlining the importance of CSS display!

An introduction to the CSS Display property with quick facts and an illustrated example! The behavior of HTML block and inline elements explained and how they integrate in CSS Flow Layout

The CSS Display Property Explained

GitHub is full of code.. But how to find excellent repos that come in handy for every web developer? Curated lists of resources are pure gold for everyone seeking to increase their skills in coding, as a quick reference and find out what`s new out there. Searching manually can be quite exhausting... I´ll show you the needles in the haystack!

GitHub is full of code.. But how to find excellent repos that come in handy for every web developer? I´ll show you the needles in the haystack!

9 Amazing GitHub Repos for Every Developer

Writing code is probably the most complex task in the world, it requires physical engagement, focus, a clear and undisturbed mind in order to fully immerse oneself in the process. Switching frequently between keyboard and mouse can be quite exhausting and kill your fluent process over and over again. Soo, I made a small list of VS Code shortcuts helping to keep up the positive flow while coding - hands on the keyboard!

VS Code is the most popular Code Editor for Web Development. These 9 useful shortcuts can help you code more efficiently!

9 VS Code Shortcuts for faster programming

Here are some thoughts of mine about picking a frontend framework as a beginner. It's how I feel after having tried React and Vue. The original title of this post was 'Why is React so damn popular?' because its popularity caused me to pick it as my first frontend library. But was it really the best choice for me as a beginner?

For React being so popular, I choose it as my first frontend library. Now, that I have tried Vue aswell, I am looking back.

Picking a Frontend Framework as a Beginner

In this tutorial you build a Quiz app and learn fundamental concepts of Vue.js. We cover Vue components, computed properties, methods, Vue directives and much more! Our Frontend Quiz app fetches data from an API and walks the user through an interactive Quiz! I have provided a GitHub repository with the Starter-Code for you! Have fun following along!

Learn the fundamental concepts of Vue.js and create a custom Quiz App along with me!

Vue.js Tutorial: Build a Frontend Quiz App

In this post I'll walk you through setting up an AWS DynamoDB Database with your Next.js App and how to Deploy it easily on Vercel. We're going to go over the AWS Free Tier, different ways to configure DynamoDB and how to store the database's secret credentials safely in Next.js Framework and use them as Environment Variables. Last but not least, I'll show you how to manage Environment Variables on Vercel with either the Vercel CLI or the Dashboard on vercel.com. Have fun!

Learn how to set up an AWS DynamoDB within your Next.js Application and how I deployed easily on Vercel.

Connect AWS DynamoDB to your Next.js App and Deploy on Vercel

I am going to implement my Welcome Banner Component to be displayed on every page where the Typewriter Component shall be fed with variable Text Input based on the title of the page. The component will be included into the Container Component which already wraps the whole content section of DevDiary, making the Banner part of the ubiquous layout.

Making components reusable gives plenty of advantages: flexibility, maintainability and less code so you don't repeat yourself!

How to Make Banner a Reusable Component with Props

In this post I'll walk you through each step of creating my first Blog with Next.js, React, style-jsx and Markdown. Starting with some basics about Next.js, then diving into the birth of the essential components. Each step is supplemented by Code Snippets and detailed description. I'd like to inspire anyone seeking to create their own Blog!

To code the initial version of my Blog, I use Next.js, style-jsx, Markdown, and of course ... React!

My first Blog made with Next.js - DevDiary

On a Thursday in February, probably rainy and cold, I first saw the bright light of day!

After graduating from school I spent my days and nights caring for old people!

I graduated not only from school, but even from university. Got a diploma in Materials Engineering!

2017 started out exciting like hell! I married my wonderful wife, became father of two wild and smart kids and still enjoying these wild times heavily!

Hi! I am Christian 👋

My Blog maps out my Journey to Web Development. Here, I'm going to share my experience with HTML, CSS and JavaScript as a Frontend Engineer. I've learnt React, Next.js and I'm jumping into Vue.js, right now! 🚀

Latest Blog Posts

useEffect Hook: Dependency Array Cheatsheet

Developer's Resume Template - made with Tailwind, Vite and Ionicons

Object Destructuring, but Why?

The CSS Position Property Explained - with Examples

The Right Tool for the Job in Frontend Engineering

About Me