DEV Community: Christian Kozalla

What "second" language would you recommend a JS Full-Stack Developer?

Christian Kozalla — Wed, 11 May 2022 05:36:58 +0000

Hey friends! Nice to meet you :)
I primarily work as a frontend developer, but have already gained some experience in backend development with JavaScript - mostly in side-projects.

Recently, I'm feeling kinda interested in learning another server-side language for web development. Plus, I want to increase my backend skills in general.

Apart from JavaScript, what is your server-side language of choice? Or what language would you recommend me?

useEffect Hook: Dependency Array Cheatsheet

Christian Kozalla — Mon, 28 Mar 2022 11:31:28 +0000

Hey friends! I'm Christian 👋, an aspiring frontend developer from germany. I'm writing (yet another) post about React's useEffect hook primarily for future reference. I frequently use useEffect, but I happen to struggle with advanced use-cases and complexity from time to time. So, I'll brush up my understanding of useEffect and try to fit it into the bigger picture of React's component lifecycle and JavaScript closures. 🚀

I've started reading up on useEffect in the official documentation of useEffect. I highly recommend you check it out for an in-depth guide about useEffect.

Basics about useEffect

Hooks were introduced in React v16.7.0-alpha, and they provide a way to encapsulate component logic into reusable pieces of code. Additionally hooks can seamlessly interact with different parts of component state or be stateful themselves, which is a major advantage.

Mental Model for useEffect

The useEffect hook is one of the most frequently used hooks provided by React. You can think of useEffect as a replacement for componentDidMount, componentDidUpdate and componentDidUnmount just for functional components all in one.

useEffect offers a way to hook into the components lifecycle and perform side-effects. Side-effects are operations that affect things outside of the component function. Side-effects basically make a function impure if the return value relies of on data outside the function's scope.

In class components you'd think about the lifecycle in terms of "mounting", "updating" and "unmounting", which were related to the lifecycle methods I listed above. But with functional components and hooks it is better to think about component lifecycle in terms of just "rendering".

The Effect

The signature of the useEffect hooks is useEffect(effectFn, dependencyArray). Let's talk about the effectFn parameter first and simply call it our "effect" (as in the official useEffect guide).

Run Effect on Every Render

Important to know: The effect runs on every render by default. This behavior can be customized by using the dependendyArray, i.e. the second parameter of the hook, which is optional. More on the dependency array later!

import { useEffect } from "react";

export default function MyComponent() {
  useEffect(() => {
    // inside our effect
  });
}

A Word about Closures

useEffect or hooks in general get really interesting when they interact with variables outside their own function body, i.e. in the component's scope. Let's consider a common case where the effect uses a state variable of the component.

import { useEffect, useState } from "react";

export default function MyComponent() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // inside our effect
    console.log("I run on every render whatsoever", count);
  });

  return (
    <div>
      <span>{count}</span>
      <button onClick={() => setCount((prevCount) => prevCount + 1)}>
        +++
      </button>
    </div>
  );
}

What happens when the component renders initially (which is also called "mounting")?

The function MyComponent is called
The count state variable is initialized with a value of 0
The effect function is initialized and closes over the count state variable. Like console.log(count) is resolving to console.log(0)
The DOM is painted according to the JSX returned from the component
The effect runs and logs 0 to the console.

If count is set to a new value, the component must re-render and go through steps 1 to 5. On every render a new effect is initialized and called.

But imagine our effect will be much more expensive and should not necessarily run on each render. Since our effect relies only on count we only want it to run only when count changes.

Enter the dependency array!

The Dependency Array

With the dependency array you get fine-grained control about when the effect should run. The dependency array is passed as the (optional) second argument to the useEffect hook.

If you don't pass a dependency array, the effect will run on every render.
If you pass an empty array, the effect will run on every render.
If you pass an array with state variables, the effect will run only when at least one of these variables changes.

Run the effect only on first render

useEffect(() => {
  // inside our effect
  console.log("I run only on first render!");
}, []); // Empty dependency array

Run the effect only when count changes

import { useEffect, useState } from "react";

export default function MyComponent() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // inside our effect
    console.log(count);
  }, [count]);
  //  ^^^^^ if count changes between re-renders, run our effect! If not, skip the effect.

  return (
    <div>
      <span>{count}</span>
      <button onClick={() => setCount((prevCount) => prevCount + 1)}>
        +++
      </button>
    </div>
  );
}

The Cleanup

In some cases, you want to run a function when the component unmounts, i.e. a cleanup function. Commonly, if you have attached event listeners to the DOM, you want to remove them when the component unmounts. Or if you have set an interval once after mounting, you'll want to clear the interval after unmounting.

In order to run a function after unmounting, you must return that cleanup function from the effect.

import { useEffect, useState } from "react";

export default function MyComponent() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const intervalId = setInterval(() => {
      setCount((prevCount) => prevCount + 1);
      //        ^^^^^^^^^ important: pass a callback function to setCount
      // this way the interval will always use the latest count state value
    }, 1000);

    return () => {
      // cleanup function
      clearInterval(intervalId);
    };
  }, []);

  return (
    <div>
      <span>{count}</span>
      <button onClick={() => setCount((prevCount) => prevCount + 1)}>
        +++
      </button>
    </div>
  );
}

Play with my code on StackBlitz

Have a great time coding! ❤️

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

Christian Kozalla — Mon, 03 May 2021 07:43:28 +0000

This is a template for you if you want to put your resume online to share it easily with future employers or clients!

I've made the resume template with

TailwindCSS - A utility-first CSS framework
Vite - Next Generation of Frontend Tooling
Ionicons - Open source icons. Lovingly hand-crafted.

Resources to start

Instructions on how to get the template working for your can be found along with the Code on GitHub

Live Resume Example

Story behind

I've redesigned my resume from the ground up, lately. I was tired of keeping a Word / PDF document always up-to-date. In addition, I enjoyed the simplicity of updating websites just by pushing new code to a repository! Plus, a website offers a lot more freedom to style and design according to your likes.

I thought of several advantages of building my resume as a website instead of a PDF:

Responsive - A website looks great on all screen sizes
Every design is possible - CSS offers an abundant variety
Easily share the link with friends, employers or clients

Another nice side-effect: I was waiting for an opportunity to try some tools and libraries like Tailwind and Vite. So my need for a new resume was a perfect match in this case! 😄

Feedback

If you'd like try out the template or if you have any feedback about the idea whatsoever, I'll be glad to receive your feedback 🙏

Hope you like the template and it can help you on your developer career! 🌱

Thanks for your attention! ❤️

Object Destructuring - but why?

Christian Kozalla — Sun, 04 Apr 2021 14:38:32 +0000

Once you have learnt a little bit of JavaScript, you may have come across a concept called Object Destructuring.

When I first read the term I thought: "What the heck is this?" 😕

Destructuring allows you to unpack key/value pairs from objects and store each in it's own variable. 👍

Note: Destructuring is possible with arrays as well, which obviously have no key/value pairs, but essentially are also a JavaScript object. 😉

So what exactly does unpacking an object mean ❓

Consider the following lines of code:

const payload = {
  key: "myKey",
  name: "Christian",
  age: 27,
  married: true,
  occupation: "developer"
};

const validate = (payload) => {
  // validate payload
  if (
    payload.key &&
    payload.name &&
    payload.age &&
    payload.occupation &&
    payload.hasOwnProperty("married")
  ) {
    console.log("All fields are set");
  } else {
    console.log("Please fill out the form properly");
  }
};

Imagine you have some kind of form <input /> on an app, that stores the values in component state on the client-side. Once the user presses the Upload button, a validation function might be called to highlight form fields that are not filled out correctly. Now, our form data is stored in an object payload that we pass to the validation function validate(payload).

The function wants to check if our object keys contain truthy values. That's what we do in the if statement's condition.

This is a darn long line of code - it's been a hassle to write and sure is a pain to read! 😡

Now, imagine you would have to reference and check these keys more often throughout the function code!

❤️ Object Destructuring to the rescure - reduces risk of typos, improves readability.

const payload = {
  key: "myKey",
  name: "Christian",
  age: 27,
  married: true, // test with false, null, undefined
  occupation: "developer"
};

const validate = (payload) => {
  // destructure payload - unpacking...
  const { key, name, age, married, occupation } = payload;

  // Now we can access these keys as ordinary JavaScript variables
  if (key && name && age && occupation && typeof married === "boolean") {
    console.log("All fields are set", key, name, age, occupation, married);
  } else {
    console.log("Please fill out the form properly");
  }
};

validate(payload);

Here, first thing we do is destructuring the payload keys into their own variables.

// destructure payload - unpacking...
const { key, name, age, married, occupation } = payload;

You often saw this line in the ol' days when React components were still JavaScript classes, instead of functions. So, in order to access the keys of an object passed as props to the class component, the first line inside the render() function would destructure the keys from the props:

// Destructuring inside the render function
// of a React class component
render() {
  const { name, age } = this.props;
  return {
    <div>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
    </div>
  }
}

Object destructuring in the function definition

Most confusing is the syntax of a destructuring assignment inside the parameters of a function definition:

const myFunc = ({ name, age, occupation }) => {};

In the definition of myFunc the parameters are already destructured!

See, it is clear that an object is passed to the function with the following keys: name, age and occupation

So, here is the most concise version of our first example code with destructuring inside the function definition:

const payload = {
  key: "myKey",
  name: "Christian",
  age: 27,
  married: true, // test with false, null, undefined
  occupation: "developer"
};

const validate = ({ key, name, age, married, occupation }) => {
  // Now we are saving one line,
  // because destructuring inside the function definition
  if (key && name && age && occupation && typeof married === "boolean") {
    console.log("All fields are set", key, name, age, occupation, married);
  } else {
    console.log("Please fill out the form properly");
  }
};

validate(payload);

Object destructuring is nice, but when to use it?

First off: You don't have to use object destructuring.

You might need to be familiar with the object destructuring when reading other people's code.

But apart from that, object destructuring is nice to know and might be a handy concept of writing code a little cleaner.

I have been familiar with the concept of destructuring for a little while now, but never used it in a regular basis.

But recently, I used it in a project with Vue and Vuex. I dealt with a bunch of arguments I wanted to pass to a Vuex action, which would perform some tasks on the arguments and then call a Vuex mutation to update the state, if processing went fine.

So first I had to pass everything like 4 - 5 key/value pairs to the action, then write the code for the action, then pass everything or a subset of arguments to the mutation handler.

Without destructuring my function arguments both for the Vuex action and mutation I totally lost track of all the stuff being passed in and out of the functions! 😕

With object destructuring right in the function definition, I easily remembered how I named the parameters passed at different places throughout the app! 👍

Conclusion

To sum up, object destructuring is great for writing readable code. I find it especially useful inside a function definition in order to keep track of all the parameters passed to the function.

Stay tuned && happy coding! 🚀

If you liked this post or have any feedback whats-o-ever, I'd be grateful if you'd jot down your thoughts below! Thanks for reading! ❤️

The CSS Position Property Explained - with Examples

Christian Kozalla — Tue, 30 Mar 2021 20:01:35 +0000

Positioning may be foundational for designing all kinds of layouts across the web and yet after over a year into my web development journey, I am starting to get the hang of CSS position 😉

You know how people google how to center a div everytime?

Or how they spend hours of trying to fit several elements into the intended alignment?

I can remember those times for myself. 😒

One reason to get stuck writing CSS: Writing CSS rules is easy, but if the result is not as intended, CSS gives no feedback on what went wrong, no error message thrown, so you're left off where you started and none the wiser. 😡

It's terrible to debug CSS. 😢

It's not enough to know what you want to achieve and gradually approach a solution, e.g. fixing console errors one-by-one like in scripting languages.

I realized it is essential to have a solid understanding of fundamental concepts of CSS and how the browser puts CSS rules into practice. 🚀

The Gist of CSS `position`

top, left, right, bottom, z-index properties can be used in conjuction with different values of position. These are absolute, relative, fixed and sticky.

It is crucial to know, what the values entered in top, left, right, bottom, z-index refer to!

position: static (default) - top, left, right, bottom, z-index have no effect
position: absolute - top, left, right, bottom refer to element's nearest containing block (mostly the body element, if no ancestor has a position value other than static)
position: relative - top, left, right, bottom are relative to the element's original place in the normal flow (as if position was static)
position: fixed - top, left, right, bottom are relative to to the viewport
position: sticky - treated like a relatively positioned element until it would exit the viewport. Instead, top, left, right, bottom set the distance to the edges of the viewport

When to use CSS positioning?

When you want to take an element out of the normal document flow in order to position it where you desire.

position targets a single element. So if it's your goal to design a complete, responsive layout, it could be better to use display: flex || grid

With fixed and sticky positioning it is possible to tell an element to stay in the viewport - even if the user scrolled away.

`position` property values in-depth

`position: absolute`

.positioned-absolute {
  position: absolute;
  top: 50px;
  left: 200px;
}

The above example pushes the element 50px down from the top and 200px away from the left.

position: absolute takes an element out of the normal flow. It usually ends up on the top left corner of the page - unless it has got a parent that's position property is not static (read more about an element's nearest containing block)
No space is reserved for the element (i.e. no gap in the normal flow)

`position: relative`

.positioned-relative {
  position: relative;
  top: 50px;
  left: 200px;
}

The above example pushes the element 50px down and 200px to the left, but relative to it's original position in the document flow.

position: relative leaves an element in the normal flow.
Positioning relative to original position with top, left, right, bottom and z-index
Space is reserved for the element.

`position: fixed` - similar to `absolute` but fixed to viewport

A fixed element is taken out of the normal flow with no space reserved. It is rendered fixed to the viewport positioned with top, left, right, bottom.

`position: sticky` - similar to `relative` but sticks to viewport

Initially, the sticky element is rendered in its original position (like with position: relative). If the element is scrolled out of view, it keeps the distances set with top, left, right, bottom to the edges of the viewport.

So it stays in view!

CSS `position` examples

To explain all possible values of CSS positioning, I made a CodePen that illustrates the different behavior on individually colored boxes

position: static - This is the default value. The element is part of the normal document flow
position: relative - The element has reserved space in the normal document flow, but can be adjusted relative to its origin with top, left, right, bottom, z-index

Another example - Structuring a recipe with `sticky` headlines above each step

I saw this on a cooking website, where recipes are shared and stuff. I found it kinda cool, so I rebuilt it in this pen.
With the sticky headlines, the user can easily see which step they're looking at. 😄

Recap positioning in CSS

The position property has five values static (default), absolute, relative, fixed and sticky

When position is set to something other than static, these other CSS properties enable advanced positioning: top, left, right, bottom

Most important to know: What are values set in top, left, right, bottom referring to!

That's it for CSS positioning!

Stay tuned && happy coding!

I hope you enjoyed my post! If so, I'd be over the moon if you'd check out my blog or followed me on Twitter ❤️

The Right Tool For The Job - In Frontend Engineering

Christian Kozalla — Sun, 21 Mar 2021 08:00:16 +0000

Lately, I've been thinking alot about choosing the right tools and frameworks for another project.

Ok, go ahead and choose.

Harder than you think!

Because...

So many technologies are so damn hot right now 🔥 Some old kids from the block like React, some new kids from 'round the corner like TailwindCSS 😉
More important: So many other frameworks I am eager to use in my next project! Like Bulma, UIkit, Next.js, Eleventy, Gridsome, LitElement, Shoelace, simply Sass - just to name a few.

So many tools to choose from!?
Photo by Barn Images on Unsplash

But careful! There are things to consider:

Heavy dependencies like the ones named above can shape a project in many unexpected ways. It will dictate the developer experience (DX), may limit flexibility, impact performance and user experience (UX) - the look and feel of the product.
Depending on the use-case for your website or web app, a correct choice of framework / tool can enable the quick and frictionless development and maintenance of said product. But, vice versa, choosing a framework / tool not fitting the use-case of the project may ruin the finished product altogether! :alert:

Random dev: "I am building my blog with React!"
Everyone screaming: "Nooooooo!" or "Why the hell?!"

Actually, I felt confronted with the problem of choosing the right framework for a web project, when I thought about why I learnt React - of all frontend frameworks - so early on my journey?.

The ongoing hype around React gives clueless beginners the impression, React might be the solution to all frontend-related problems.

It is not. By far!

Choosing the right tool for the job

Let's divide the process into individual steps.

Define the use case / purpose of the project
Write some user stories - what is the minimum solution - what features are available in the full-blown website / web app
Answer some questions based on the use case
- Is your web app highly interactive?
- How frequently is the displayed content changing? Every second (stock market), every minute (social media), daily or fully static content..?
- Do you require user authentication and authorization?
- Do you prefer client-side JS over server-side?
- Do you need offline availability paired with an app-like feel with push notifications, installable directly from the browser? Might go for a PWA

I any case, you decide in favor of your users!

Does "But-I-Wanna-Try-This-Fancy-New-Framework" count?
> Yes. But only if it's a side-project - or no commercial ambitions there.

Is the content mostly static..?

For example, when building a blog or a landing page there's usually only static content - no need for parts of the website due to user interaction. In fact, there is so much you can achieve with HTML, CSS and presentational* JavaScript (*expression borrowed from @Brad_Frost).

Advantages of static websites

Browser receives HTML and CSS ready for being rendered instantly. So its blazing fast!
Can be served via a CDN - no web server needed!
almost no or very little client-side JavaScript needs to be downloaded
vast variety of UX possible - forms, popups, animations, video embed, third-party integrations (e.g. CodePens, Tweets)
Can be developed in a modular, components-based fashion (e.g. with web components, or static site generators like Eleventy)

Drawbacks of static websites

Limited user input processing
Full page-loads required, if underlying data of only a single component changes

..or frequently changing dynamic content?

If yes, there are certain advantages of heavy-client-side-JS-frameworks like React, Vue or Angular.

Incrementally updating components - no full page-loads required
Get the whole web app with one request and fetch data from multiple APIs / origins along the ways
frequently update data using streams
Receive and process heavy user input for maximum interactivity

From the aspects above you'll get a good grasp of what sort of product is ideally built with React & Vue.

This ain't no simple website, no! It's a web app. A programm that happens to run in the browser!

Recently, I started contributing to an open-source project called deckdeckgo. DeckDeckGo is a wonderful web app to create presentations to share and use them across the web. Imagine it to be like PowerPoint, but completely in the cloud and runs in the browser or on your phone. A perfect example for a web app - user input and interactivity is essential here - making a presentation, upload assets, store and share the slides.

It boils down to data & interactivity

Basically it all boils down to data and interactivity.

Does a simple website containing images, paragraphs, blog posts or other informational content need to be interactive?

Does a simple website heavily rely on user input and processing?

No.

There are tools to build static sites. Use them.

Other tools shine in building web apps.

I might not know all the tools in the web development universe...yet. Until I do, I'll try to choose the right tool for the job.

That's it for now. Stay tuned & happy coding 🚀

Vue Tutorial Part II: Build a Frontend Quiz App

Christian Kozalla — Thu, 21 Jan 2021 14:08:54 +0000

This is a followup post on Vue Tutorial: Build a Frontend Quiz App. We are building a Vue Frontend Quiz App from scratch or using the Starter Code. The second part extends this Quiz App with a modal shown when the user finishes the quiz displaying his score. 🔥

Check out a live preview of the Quiz App

Fig 1: Vue Quiz App Preview

In this Vue Tutorial Part II we are building a Modal to give the user feedback on his score and options to keep playing or reach out on Twitter! 🚀

Fig 2: Modal Preview

In case you're not cloning my Starter Code from GitHub, you can get the Twitter Logo here

Steps for this Vue Tutorial:

Build a custom Modal component
Use a watcher to emit a custom event on quiz end
Catch event in App component, pass user score to Modal and handle functionality

When finished, we want our App.vue component structure to have Quiv.vue and Modal.vue side-by-side as siblings interchanging data via custom events passed through their parent App component.

<div id="app">
  <Quiz @quiz-completed="handleQuizCompleted" :key="quizKey" />
  <Modal
    v-show="showModal"
    header="Congratulations!"
    subheader="You've completed your Quiz!"
    v-bind:quizScore="quizScore"
    @reload="updateQuiz"
    @close="showModal = false"
  />
</div>

Step 1: Build a custom Modal component

First, we'll setup the empty Modal with blurred background centered vertically and horizontally.

// Modal.vue
<template>
  <transition name="modal">
    <div class="modal-mask">
      <div class="modal-wrapper">
        <div class="modal-container">
          <div class="modal-header">
            <h2>{{ header }}</h2>
            <h3>{{ subheader }}</h3>
          </div>

          <div class="modal-body"></div>

          <div class="modal-footer"></div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  name: "Modal",
  props: {
    header: String,
    subheader: String,
    quizScore: Object,
  },
};
</script>

<style scoped>
.modal-mask {
  position: fixed;
  z-index: 9998;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: table;
  transition: opacity 0.3s ease;
}

.modal-wrapper {
  display: table-cell;
  vertical-align: middle;
}

.modal-container {
  width: 90vw;
  max-width: 650px;
  margin: 0px auto;
  padding: 20px 30px;
  background-color: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
  transition: all 0.3s ease;
}

.modal-header {
  text-align: center;
}

.modal-header h2 {
  color: rgb(0, 178, 72);
}

.modal-header h3 {
  color: rgb(0, 178, 72);
}

.modal-body {
  display: flex;
  flex-direction: column;
  margin: 20px 0;
  line-height: 3rem;
}

.modal-body > * {
  margin: 1rem 0;
  padding: 0.25rem 0.5rem;
}

.modal-footer {
  display: flex;
  justify-content: space-between;
}

/*
 * The following styles are auto-applied to elements with
 * transition="modal" when their visibility is toggled
 * by Vue.js.
 *
 * You can easily play with the modal transition by editing
 * these styles.
 */

.modal-enter {
  opacity: 0;
}

.modal-leave-active {
  opacity: 0;
}

.modal-enter .modal-container,
.modal-leave-active .modal-container {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
</style>

The raw Modal component is based on this official Vue example Modal Component

Basically, the raw Modal component consists of three outside elements: modal-mask > modal-wrapper > modal-container.

CSS styles accomplish several things here:

.modal-mask spans the full width and height of the screen on top of everything else providing the gray blurred ground around the modal.
.modal-wrapper is a table cell centered in the middle of .modal-mask
.modal-container sets the space for the modal's content

The content consists of modal-header, modal-body and modal-footer as siblings.

We're putting two props header and subheader to the Modal component to make is reusable. The third prop we need is the user's score i.e. quizScore which we will receive from the Quiz component's custom event.

A quick revision of custom events in Vue is here

Here is the additional content for the Modal component: Replace the empty div.modal-body with this.

// Modal.vue
<div class="modal-body">
  <div id="score">
    You answered
    <span class="highlight">
      {{
        Math.floor(
          (quizScore.correctlyAnsweredQuestions /
            quizScore.allQuestions) *
            100
        )
      }}
      % correctly!
    </span>
    Answered
    <span class="highlight">
      {{ quizScore.correctlyAnsweredQuestions }} out of
      {{ quizScore.allQuestions }}
    </span>
    questions.
  </div>
  <div id="chooseCategory">
    Wanna choose another category?

    <a
      href="https://twitter.com/messages/compose?recipient_id=1315961855148523521&text=Hello%20Christian%20I%20would%20like%20to%20choose%20other%20categories%20with%20headsUP"
      class="twitter-dm-button"
      data-screen-name="@CKozalla"
    >
      <img
        src="@/assets/Twitter_Logo_WhiteOnBlue.png"
        alt="Twitter Logo"
        class="twitter-logo"
      />Demand that feature!
    </a>
  </div>
</div>

In the modal-body we are doing two things:

Display the user's score. The quizScore prop contains how many questions the user answered correctly and the total number of questions.
Ask user if he likes to choose another category. Since I designed this Vue Quiz App as an example for beginners to Vue.js with basic knowledge of web development, I assume that mostly web developers who want to extend their skills will play this quiz. So, I included a Call to Action if somebody wanted to reach out to me via Twitter 😄

Replace the empty div.modal-footer with the next snippet:

<div class="modal-footer">
  <button
    id="play-again"
    class="button-footer"
    @click="$emit('reload')"
  >
    Play Again
  </button>
  <button
    id="close-button"
    class="button-footer"
    @click="$emit('close')"
  >
    Close
  </button>
</div>

Two buttons are included in the modal-footer which will emit custom events on click. Here, you can see the inline use of $emit('event-name') without this.

Both our events reload and close are bubbling up to the parent component App.vue, will be caught and handled there. We'll find out about handling reload and close, later 😉

Add the corresponding CSS to the Modal component.

.button-footer {
  padding: 1rem 2rem;
  background: linear-gradient(
    210deg,
    rgba(187, 0, 47, 0.8),
    rgba(245, 0, 87, 0.6)
  );
  border-radius: 7px;
  border: none;
}

.anchor-footer {
  color: black;
  text-decoration: none;
  cursor: default;
}

.button-footer:active,
.button-footer:focus {
  outline: none;
}

.button-footer:hover {
  transform: scale(1.02);
}

.highlight {
  border-radius: 4px;
  background-color: rgba(187, 0, 47, 0.3);
  padding: 0.25rem 0.5rem;
}

.twitter-dm-button {
  display: flex;
  justify-content: space-between;
  width: 280px;
  background-color: #1da1f2;
  padding: 0 2rem;
  border-radius: 7px;
  text-decoration: none;
  color: black;
  margin: 0 auto;
}

.twitter-logo {
  width: 48px;
  height: 48px;
}

#score {
  background-color: rgb(210, 200, 200);
  border-radius: 5px;
  box-shadow: 2px 3px 9px gray;
}

#chooseCategory {
  text-align: center;
}

Step 2: Use a watcher to emit a custom event on quiz end

All the game logic takes place in our Quiz component.

First, we want to show the user which question they are viewing, how many questions overall and how many questions they answered correctly. We will include the follow snippet to Quiz.vue template.

// Quiz.vue
<h1 id="logo-headline">headsUP</h1>
<div class="correctAnswers">
  You have
  <strong>{{ correctAnswers }} correct {{ pluralizeAnswer }}!</strong>
</div>
<div class="correctAnswers">
  Currently at question {{ index + 1 }} of {{ questions.length }}
</div>

In order to show the user's score, we need to collect the data first.

// Quiz.vue
// Add these to computed properties
score() {
  if (this.questions !== []) {
    // Here, we want to collect data in an object about the users statistics - later be emitted on an event when users finishes quiz
    return {
      allQuestions: this.questions.length,
      answeredQuestions: this.questions.reduce((count, currentQuestion) => {
        if (currentQuestion.userAnswer) {
          // userAnswer is set when user has answered a question, no matter if right or wrong
          count++;
        }
        return count;
      }, 0),
      correctlyAnsweredQuestions: this.questions.reduce(
        (count, currentQuestion) => {
          if (currentQuestion.rightAnswer) {
            // rightAnswer is true, if user answered correctly
            count++;
          }
          return count;
        },
        0
      ),
    };
  } else {
    return {
      allQuestions: 0,
      answeredQuestions: 0,
      correctlyAnsweredQuestions: 0,
    };
  }
},
correctAnswers() {
  if (this.questions && this.questions.length > 0) {
    let streakCounter = 0;
    this.questions.forEach(function(question) {
      if (!question.rightAnswer) {
        return;
      } else if (question.rightAnswer === true) {
        streakCounter++;
      }
    });
    return streakCounter;
  } else {
    return "--";
  }
},
pluralizeAnswer() {
  // For grammatical correctness
  return this.correctAnswers === 1 ? "Answer" : "Answers";
},
quizCompleted() {
  if (this.questions.length === 0) {
    return false;
  }
  /* Check if all questions have been answered */
  let questionsAnswered = 0;
  this.questions.forEach(function(question) {
    question.rightAnswer !== null ? questionsAnswered++ : null;
  });
  return questionsAnswered === this.questions.length;
},

score() uses the reducer array prototype to reduce the current questions array to a number a) to count the correct answers and b) to track the total number of currently answered questions. It returns the quizScore object we use in the Modal component
correctAnswers() counts the correct user answers based on the questions array
pluralizeAnswer() returns "Answer" is correctAnswers() is currently equal to 1 to provide a grammatically correct sentence in the template - i.e. "You have 1 correct Answer" (not Answers...)
quizCompleted() returns a boolean whether the quiz is completed.

Next, we need to fire a function the moment quizCompleted() === true to emit a custom event to pass the quizScore returned by this.score to the App component

We write a watcher on quizCompleted() which will do exactly what we want.

// Quiz.vue
watch: {
  quizCompleted(completed) {
    /*
      * Watcher on quizCompleted fires event "quiz-completed"
      * up to parent App.vue component when completed parameter
      * returned by quizCompleted computed property true
      */
    completed &&
      setTimeout(() => {
        this.$emit("quiz-completed", this.score);
      }, 3000); // wait 3 seconds until button animation is over
  },
},

Step 3: Catch events in App component, pass user score to Modal, restart Quiz

We are adding the Modal to the App component in the template.

// App.vue
<Modal
  v-show="showModal"
  header="Congratulations!"
  subheader="You've completed your Quiz!"
  v-bind:quizScore="quizScore"
  @reload="updateQuiz"
  @close="showModal = false"
/>

We are using v-show="showModal" to conditionally render the modal based on this.showModal. Passing two static props header and subheader and one dynamic prop quizScore from data() to the modal. Catching two custom events reload and close emitted from the modal-footer buttons.

Additionally, we're adding state and methods to the App component. Here is the whole updated script.

// App.vue
<script>
import Quiz from "@/components/Quiz.vue";
import Modal from "@/components/Modal.vue";

export default {
  name: "App",
  components: {
    Quiz,
    Modal,
  },
  data() {
    return {
      quizKey: 0,
      showModal: false,
      quizScore: {
        allQuestions: 0,
        answeredQuestions: 0,
        correctlyAnsweredQuestions: 0,
      },
    };
  },
  methods: {
    handleQuizCompleted(score) {
      this.quizScore = score;
      this.showModal = true;
    },
    updateQuiz() {
      this.showModal = false;
      this.quizKey++;
    },
  },
};
</script>

Let's go over the methods we're using here to handle the events involved.

handleQuizCompleted(score) receives the users score from the Quiz component and sets it to local state on this.quizScore. handleQuizScore() is triggered by our custom event quiz-completed defined in the watcher before.

We need to catch that event on the Quiz component!

// App.vue
<Quiz @quiz-completed="handleQuizCompleted" :key="quizKey" />

The first part @quiz-completed="handleQuizCompleted" is clear, but what is the second part :key="quizKey"?

Glad you asked! 😄

We are binding the key of the Vue component to a data property quizKey.

But why?

The quizKey is increased by one in updateQuiz() which is triggered by the reload event from the Modal.

If the user wants to play another round, the Quiz component needs to re-render! It will then fetch another set of questions from the API and guide the user through the quiz.

How to trigger a component to re-render in Vue.js?

There are several ways to trigger a component to re-render in Vue, but the most elegant for this purpose is the Key Changing Technique

Basically, you can bind a unique key to a Vue component, not only to <li> items like you might be used to in React or Vue. If that unique key is changed, the whole old component is trashed and a new component with the new key renders instead.

To start a new round of the quiz we are exploiting that behavior here.

Wrap it up

In conclusion, to extend the existing quiz from Vue Tutorial Part I with a Modal component we learned a few things:

Use a watcher on a computed property
Emit custom events to pass data between components
Catch such events and handle the data
Trigger a re-render of a Vue component

Additional Resources

How to preview your Website on Social Media with Meta Tags

Christian Kozalla — Sat, 09 Jan 2021 14:28:28 +0000

Websites should be easily shared on Social Media such as Facebook, Twitter, Whatsapp, or Discord communities.

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 people's engagement!

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

Boilerplate HTML meta tags for sharing on Facebook and Twitter

Long story short: If you add these boilerplate HTML meta tags to your documents <head>, a URL to this page shared on Facebook or Twitter will be displayed as an engaging card to make your content stand out already in your Tweet or Post.

<!-- Boilerplate for HTML meta tags to preview on Facebook, Twitter -->
<!DOCTYPE html>
<html lang="en">
  <head prefix="og: https://ogp.me/ns#">
    <!-- ... other tags like title, link, charset, viewport -->
    <meta property="og:title" content="Example - Title of my Site" />
    <meta
      property="og:description"
      content="Example - Description of my Site"
    />
    <meta
      property="og:image"
      content="https://example.com/example-featured-image.jpg"
    />
    <meta name="twitter:site" content="@username-example" />
    <meta
      name="twitter:card"
      content="summary || summary_large_image || player || app"
    />
    <meta name="twitter:creator" content="@username-example" />
  </head>
  <body>
    <!-- Content you want to share -->
  </body>
</html>

Just replace the examples with your original content and the message you want to send!

Attention: Make sure to include prefix="og: https://ogp.me/ns#" in the opening <head> tag. Otherwise the provided Open Graph meta tags won't work.

Here is an overview of Twitters different card types:

summary - Displays a Summary Card with a Title, description and thumbnail image
summary_large_image - Displays a Summary Card with a large, prominent image
player - Shows a Card that can stream video/audio or other media directly
app - Shows a Card with a direct link to a mobile app download from App Store or Google Play

The Image should be square and at least 120x120px, but less than 1MB size

Example: The Summary Card of chrisko.io

Fig 1: Social Media Summary Card

Here is the Summary Card of chrisko.io previewed on the Twitter Card Validator - I use this tool to test my pages' social media cards before going live

Facebook offers a similar tool: The Sharing Debugger

There two chrome extensions for previewing and debugging meta tags for social media cards:

These extensions even let you preview a card on your localhost ❤️

heymeta.com is a Social Card Previewer to give you an in-depth feedback of each single meta tag - and provides debugging!

Developing with React, Next or Nuxt?

We've discussed what meta tags have to be present in the HTML to supply information for social media cards to our websites URLs. But how to add these meta tags when developing using a framework like React, Vue, Next, Nuxt or whatever (..I know, React is still a library..) 😉

Here is what I'd recommend for several popular frameworks

Next.js: NPM package next-seo is a blast! It's capable of adding OpenGraph, Twitter tags and JSON-LD (which is a form of structured data) 👍
Nuxt.js: Meta tags and SEO are a native feature of Nuxt.js - check out their documentation for more!
React.js: A rich introduction to meta tags in React at create-react-app.dev - React-Helmet is the go-to package for dynamically managing the <head> in React apps.

Conclusion

In this tutorial we generate boilerplate HTML meta tags for social media cards like used to preview URLs shared on Twitter or Facebook.

We looked at an example summary card of chrisko.io

Most valuable, we collected tools to enhance the process of adding meta tags to your website to make it look great when shared on social media! 🚀

Additional Resources

Build a Quiz App with Vue

Christian Kozalla — Sat, 02 Jan 2021 15:27:57 +0000

I made a Quiz App with Vue now available as a Tutorial in two parts. 🚀

Part I covers:

Setting up a project in Vue
Fetching data from API
Computed properties
Methods

Part II covers:

Handling custom events in Vue
Watchers
Component re-rendering

Starter Code available on GitHub

master branch is the starter
tutorial branch includes each individual step from start to finish

Try a Live Demo

Have fun playing! 🌈

If you like to read more on web development you can browse my blog chrisko.io ❤️ or follow me on Twitter 🔥

Searching on GitHub

Christian Kozalla — Mon, 14 Dec 2020 22:38:33 +0000

GitHub repos in general are a great resource for developers, especially those repos with thousands of stars! ⭐

That's why posts about amazing GitHub repos are among the most popular blog posts. In fact, I wrote one myself! 😉

Finding the most popular GitHub repos is no rocket science 🚀

Everybody can use the GitHub search and this post will help you understanding the search syntax on GitHub.

We will start in the upper left corner on GitHub, where the search bar is located.

Searching for repos with more than 100k stars

stars:>=100000

This query will show you all repositories having more than or equal to 100k stars ⭐

GitHub search syntax

Here's a list of useful query operators

operator	meaning	example
`>n`	more than	`books stars:100` will search for repositories with the word `books` that have more than 100 stars
`a..b`	range between `a` and `b`	`kitties stars:500..10000`> will search for repositories with the word `kitties` that have more than 500 but less than 10000 stars

These are the most suitable operators for finding the most starred GitHub repositories! 🐱

With that knowledge everybody can dig deeper into GitHub as they like. 🌈

Additionally, I highly recommend checking out what's trending on GitHub to see what the community is most excited about today!

P.S. I have switched the domain name of my blog to chrisko.io, recently. Feel free to check it out, if you like to find some more posts about my journey ❤️

The CSS Display Property explained

Christian Kozalla — Wed, 09 Dec 2020 21:40:29 +0000

While CSS is the core styling language for powering the world wide web along with HTML and JavaScript, it is often getting least attention especially by beginner frontend developers putting their main focus on quickly learning frontend JavaScript frameworks like React or Vue. After diving deep into core features of CSS you'll recognize what CSS is really capable of!

Everything is a box

Remember how everything is a box on the web? Here is a quick refresher!

Browsers render each element from the element tree as a box.
Each box has a margin, a border and a padding precisely defining its dimensions

Fig 1: Part of a website I recently built - Notice blue arrows down

The image above shows part of a website I recently built, where different shapes are included. Using the browser's developer tools you can easily display the boxes around each rendered element.

Fig 2: Box with margin (red), padding (green) without border here

Especially the blue arrows pointing down are interesting. You may be surprised to see that - despite their triangular shape - these arrows are still rendered as a rectangular box in the browser!

Fig 3: This is the box around the arrow poniting down

As you can see the box has two solid borders and is rotated by 45 degrees in order to let the arrow point down. But it is still a box!

CSS Flow Layout

In order to define the page's layout each box is put into the normal flow depending on their display values. The most basic values for the CSS display property are

display: block
display: inline
display: none

An element set to display: none is completely removed from the normal flow, so its not appearing in the element tree, unlike visibility: hidden

Here, we want to focus on display: block and display: inline to give you some basic knowledge of how to use these properties to your liking.

Many HTML elements are inline or block by default

Every time we use a <div> element, we actually use a block-level element. Ooooops, I am glad you already knew that! 😄

Here's a list of most frequently used HTML elements and their default display property values.

| `block` | `inline` | | :--------: | :----------: | | `` | `` | | `

` | `` | | `

` | `

` | `` | | `` | `` | | `` | `` | | `` | `` | | `

`   |   ``   |
|   ``   |    `
`    |



  
  
  Block vs Inline elements


Basic differences of block and inline elements influence how they integrate into the flow layout. Being aware of these facts help to understand positioning elements on a website and may be useful when debugging :wink:

  
  
  Block-level element behavior



Always start on a new line
Take 100% width (of the parent element) by default
Can be applied width and height with CSS
Can have block and/or inline child elements


  
  
  Inline element behavior



Do not start on a new line
Sibling inline elements appear next to each other
Take only as much space as needed
Can only contain other inline elements


  
  
  CSS display working example


Imagine you have some paragraph with text including several anchors in order to link the user to other pages. You want to fire a CSS animation on hover, to let the user know that's a clickable link.

This Article by Danny Guo covers the topic of underlining multiline text with CSS quite nicely and very in-depth!

Here is a quick visual example of our aimed solution.


  Fig 4: Animation of our solution
  


So, in order to make an underline animation with CSS, we can basically set a background-image on the element with linear-gradient which generates an image for the background. Initially, the background-size is set to the full height (100%), but to zero width (0%). Then a transition is set on the original element animating its background-size when that property will be changed on hover.


#with-underline {
  background-image: linear-gradient(
    transparent calc(100% - 15px),
    rgba(36, 153, 209, 0.5)
  );
  background-size: 0% 100%;
  background-repeat: no-repeat;
  transition: background-size 0.35s cubic-bezier(0.42, 0, 0.58, 1) 0.1s;
}

#with-underline:hover,
#with-underline:focus {
  background-size: 100% 100%;
}



On hover the elements background-size increases its width to 100% using the specified cubic-bezier timing function. More on predefined timing functions can be found here


It's best practice to apply similar or the same visual effect on focused elements for users how navigate your site through the keyboard or with screen readers. So make sure to include :focus next to the :hover pseudo-class selector!


  
  
  What may happen if you are not aware of display block and inline behavior?



  Fig 5: Multiline underline animation fails
  


When applying the CSS above to a block element, i. e. #with-underline being a <div> or <p>, the multiline underline animation fails :rage:

The background-image is at the bottom of the whole block, and not multiline like intended.

Simply adding display: inline to the respective element (or changing it to an inline HTML element by default like <span> or <a>) gives us the wanted solution of a multiline underline animation on hover! :tada:


  Fig 6: Multiline underline animation works
  


  
  
  Conclusion


CSS is a powerful language being constantly improved by W3C and is one of the foundational languages for the web next to HTML and JavaScript. Knowing the basics about the CSS display property, HTML elements and their default display values and how it affect the integration of said HTML elements into the CSS Flow Layout helps with positioning elements on a website. It can be a huge time saver when it comes to debugging!

This introduction to CSS display and its most frequently used values block and inline may broaden your background knowledge of CSS and help setting up layouts with HTML and CSS! :fire:


This article was originally posted on my blog. Feel free to check it out for more articles! I'd appreciate it :heart:


  
  
  Further Reading



MDN CSS: Cascading Style Sheets - Documentation
MDN CSS: Flow Layout
MDN CSS: Inline Elements
MDN CSS: Block Elements

What's your favorite way for learning to code?

Christian Kozalla — Wed, 25 Nov 2020 22:36:28 +0000

It's been nearly one year since I decided to become a professional developer. Spoiler alert: I recently got my first job as a junior web developer, so mission accomplished and ready for takeoff! 🚀

Now, I am taking some time to think back how my coding journey started. I made my decision with barely no previous experience in any programming language 😱

I'd like to share milestones of my coding journey with you before listening to your favorite ways for learning to code, maybe how you started your journey and what you'd recommend to a beginner!

How I started my journey

Although I was completely convinced and self-confident, I had to decide which ways to choose while learning to code. Of course I found plenty of websites, but then again I had to choose what suited me best. But how would I know ⁉️

Platforms that I personally used for learning to code

These are the websites I started learning with:

Khan Academy: I remember watching some videos about the basics of HTML, CSS and JavaScript.
Codecademy: Trying out their free courses on Python really got me going! I really liked their approach how to teach syntax & basics.
- The screen was divided into three parts: Introduction left, text editor middle, browser/console right. It was perfect to get live feedback of what I was doing.
- Thirsty for more and more, I got into the Web Development skill path, enjoyed quizzes and projects.
- Eventually I got a pro membership.
Udacity: I took some great video courses about mobile development and responsive design.
edX: In order to learn about AWS, I took a nice course preparing for the AWS Developer. I was hands-on experience with the AWS free tier.

Other resources I use

MDN: Mozilla Developer Network is one of my favorite resources for web development. It is a quick reference of anything inside HTML, CSS and JavaScript with rich and illustrative examples.
Blog posts are super helpful resource I frequently use to learn new concepts or expand my horizons. What I like best about blog posts is the personal touch of their blog and getting to know the person behind.
RTFM: Documentation is most often the starting point for my new projects.

What's your favorite way?

Enough about me! Let me hear how you started your journey learning to code. Did you use a website/platform/approach that was particulary useful for you?

P.S. I am planning to write an extended post about my journey and different paths for learning to code on my blog. So I'd love to include what resources you might recommend here. Thank you! 🙏

DEV Community: Christian Kozalla

What "second" language would you recommend a JS Full-Stack Developer?

useEffect Hook: Dependency Array Cheatsheet

Basics about useEffect

Mental Model for useEffect

The Effect

Run Effect on Every Render

A Word about Closures

The Dependency Array

Run the effect only on first render

Run the effect only when count changes

The Cleanup

Play with my code on StackBlitz

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

Resources to start

Story behind

Feedback

Object Destructuring - but why?

Object destructuring in the function definition

Object destructuring is nice, but when to use it?

Conclusion

The CSS Position Property Explained - with Examples

The Gist of CSS position

When to use CSS positioning?

position property values in-depth

position: absolute

position: relative

position: fixed - similar to absolute but fixed to viewport

position: sticky - similar to relative but sticks to viewport

CSS position examples

Another example - Structuring a recipe with sticky headlines above each step

Recap positioning in CSS

The Right Tool For The Job - In Frontend Engineering

Choosing the right tool for the job

Is the content mostly static..?

..or frequently changing dynamic content?

It boils down to data & interactivity

Vue Tutorial Part II: Build a Frontend Quiz App

Check out a live preview of the Quiz App

In this Vue Tutorial Part II we are building a Modal to give the user feedback on his score and options to keep playing or reach out on Twitter! 🚀

Steps for this Vue Tutorial:

Step 1: Build a custom Modal component

Step 2: Use a watcher to emit a custom event on quiz end

Step 3: Catch events in App component, pass user score to Modal, restart Quiz

How to trigger a component to re-render in Vue.js?

Wrap it up

Additional Resources

How to preview your Website on Social Media with Meta Tags

Boilerplate HTML meta tags for sharing on Facebook and Twitter

Here is an overview of Twitters different card types:

Example: The Summary Card of chrisko.io

Developing with React, Next or Nuxt?

Conclusion

Additional Resources

Build a Quiz App with Vue

I made a Quiz App with Vue now available as a Tutorial in two parts. 🚀

Part I covers:

Part II covers:

Starter Code available on GitHub

Try a Live Demo

Searching on GitHub

Searching for repos with more than 100k stars

GitHub search syntax

The CSS Display Property explained

Everything is a box

CSS Flow Layout

Many HTML elements are inline or block by default

Block vs Inline elements

Block-level element behavior

Inline element behavior

CSS display working example

What may happen if you are not aware of display block and inline behavior?

Conclusion

Further Reading

What's your favorite way for learning to code?

How I started my journey

Platforms that I personally used for learning to code

Other resources I use

What's your favorite way?

The Gist of CSS `position`

`position` property values in-depth

`position: absolute`

`position: relative`

`position: fixed` - similar to `absolute` but fixed to viewport

`position: sticky` - similar to `relative` but sticks to viewport

CSS `position` examples

Another example - Structuring a recipe with `sticky` headlines above each step

What may happen if you are not aware of display `block` and `inline` behavior?