DEV Community: Bernhard Wittmann

Think about the Bus

Bernhard Wittmann — Sat, 21 Aug 2021 08:40:40 +0000

„What would happen if you or one of your team members would be hit by a bus?“

Have you asked yourself this question before? I know it feels kind of weird to be thinking about stuff like this, but there is more to this morbid question than you would might think.

This question tries to estimate the „bus-factor“ and is a measurement for risk and assesses the consequences of losing a key technical member of your team.

Imagine a developer that is the only one of your team that has knowledge of a specific subsystem or someone who is the only one with the credentials to an important server. What would happen if this developer would get hit by a bus (or other scenarios, like illness, taking a new job, parental leave, sabbatical) and is not available anymore suddenly? Things would come to a halt quickly.

This is a problem if someone on your team (or yourself) is a single point of failure. There are two main aspects that I find most important but there are probably some more aspects that are true for specific situations:

Capabilities

Does one person hold the only access rights to specific parts of your system, or is a person the only one having the authentication details for something. You would not want to be locked out of your own system

Knowledge

Is one person the sole expert in one area, where other team members do not know how it works. This makes the expert a critical dependency and it is very hard for other people to take over, because the knowledge is too concentrated.

Ask yourself

Can you think of something in your current team and application where you would get problems if someone would get hit by a bus? Especially ask yourself, where would problems arise if I would be gone suddenly?

What to do about it?

You have identified some things where you have critical dependencies. Great, so how can you alleviate them?

Regarding authentication details, it makes sense to think about your access rights concept so that there is not one overall admin. But of course you would not also want to give everyone full admin rights.

To tackle the problem of knowledge concentration there are three ways to go:

Reduce complexity: so lesser knowledge is required to understand a component
Documentation: To provide an easier knowledge transfer document all processes and things you are working on and more importantly keep it up to date
Cross training: do some pair programming to encourage thinking about other areas of your system

Also thinking about the bus factor is not a one time thing, but an ongoing tool to assess risks within your development team, especially if you are working in a small team or startup

Advice needed: How not to get frustrated when time runs out

Bernhard Wittmann — Tue, 22 Sep 2020 15:44:51 +0000

I notice that I get frustrated quite easily when the time for a task runs out. This do not necessarily have to be deadlines that are not met, but also self imposed time frames for tasks.

Especially today was a rough day in which I did not complete much of the tasks I thought I would be able to do today. I'm at a point right now where I say quit that and ask the DEV community for help and advice.

How do you deal with the frustration or what are your methods to prevent this?

Handling Dialogs with Vue Router

Bernhard Wittmann — Wed, 17 Apr 2019 11:21:45 +0000

In the first part of this little series on Vue Router Architecture I wrote about handling nested routes with Vue Router. It would maybe easier to follow if you have read that already, but here is a very short summary:
That tutorial introduced an EmptyRouterView component for handling the nested routes.

But we can also use this component for handling dialogs like this one:

By handling the visibility of dialogs with vue router we can easily toggle them by navigating to the corresponding urls. And in my opinion this results in a more clean codebase. So how do we do it?

Step 1: Update our `EmptyRouterView` Component

First we need to edit our EmptyRouterView component:



<template>
  <div>
    <router-view name="dialog"></router-view>
    <router-view></router-view>
  </div>
</template>

The component now contains two router-views. The lower one (the default one) is used for displaying the background (or the normal page in case no dialog should be shown). Meanwhile the one for the dialog will contain the content of our dialog.

Step 2: Create a component for our dialog

Now we have to create a component for our dialog:



template>
  <div class="dialog">
    <div class="dialog__inner">
      <h3>My Dialog</h3>
      <p>Content</p>
      <a class="btn" @click="close">Close</a>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    close () {
      this.$router.back()
    }
  }
}
</script>

<style lang="scss">
.dialog {
  # Styling for the background overlay of the dialog

  &__inner {
    # Styling for the dialog itself
  }
}
</style>

This is a pretty simple component, however you need some styling to make it look like a dialog (you could also use bootstraps classes for it, or something else). Maybe you noticed that I also included a back button already. We can simply use the router.back() method for navigating one page back to close the modal, since we toggle the visibility with the routes from Vue-Router.

Step 3: Update the Route Config

Last but not least we have to specify the route configuration for Vue Router in our router.js config:



routes: [{
    path: '/nested,
    component: EmptyRouterView,
    children: [{
        name: 'nested',
        path: '',
        component: MyPageView
    }, {
        name: 'nested.dialog',
        path: 'dialog',
        components: {
            default: MyPageView,
            dialog: MyDialogComponent
        }
    }]
}]

For our dialog route with name nested.dialog at the url /nested/dialog we specify the components MyPageView as the background and MyDialogComponent for the dialog itself. Since this route is a child of a route that has the EmptyRouterView component, these components directly fill the router-views specified in our EmptyRouterView Component.

This was already it. Now we can navigate to our route at /nested/dialog and you'll see the dialog:

You can also play around with it in the repo i created:

BerniWittmann / vue-router-architecture

My Architecture approach on Vue Router

My Vue Router Architecture Approach

This repository should demonstrate my basic approach on Vue Router Architecture and nested routes. It also displays the possibility of handling dialogs with Vue Router

I use a view called EmptyRouterView (which just contains a router view, and one for the dialog) to achieve a clean way to structure my nested routing configuration and an easy way to handle dialogs.

The corresponding Blog Post can be found on dev.to

Part 1: Route Handling

Part 2: Dialog Handling

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

❓ Got any questions?

Don't hesitate to drop me an email to dev@bernhardwittmann.com

View on GitHub

That's it for now. Feel free to let me know your thoughts on this 😁

Vue Router Architecture and Nested Routes

Bernhard Wittmann — Thu, 21 Mar 2019 16:55:52 +0000

Working with nested routes can be quite a hassle...

Therefore I did come up with a conclusion on how to keep the routing configuration clean and to ease the working with nested routes.

There are already some tutorials on how to work with Vue Router in general, but I want to focus on this specific issue and the architecture around it.

I'll guide you through the creation of the example repo below and show you how I solved this

The main issue

The main problem is that if you want to nest routes the parent route component needs to always contain a <router-view></router-view>. This can be quite annoying sometimes and in my opinion it just does not feel right. Also this leads to high coupling between the component itself and its sub-routes / the routing.

Step 1: Add an `EmptyRouterView` Component

At first we create an EmptyRouterView Component, which just contains <router-view></router-view>.



<template>
  <router-view></router-view>
</template>

That is nearly the whole magic. Now we just need to use this component correctly in our route configuration

Step 2: Adjust your Components to the new architecture

Head over to your route config (probably router.js)

The current config will probably look like this



// Old Config
  {
      path: '/my-route',
      component: MyRouteView,
      name: 'route',
      children: [...]
  }

Let's change it like this:



// New Config
 {
      path: '/my-route',
      component: EmptyRouterView,
      children: [{
        name: 'route',
        path: '',
        component: MyRouteView
      }]
  }

We declare some kind of abstract Route with the EmptyRouterView as component. as a default child component we now add our old route configuration, but with an empty path. The empty path leads to this child route to be rendered when a user navigates to /my-route.

You'll also notice, that we gave our abstract parent route no name. This also helps, since when we add links to our application and refer to routes by name, we won't accidentally render the empty parent route.

Step 3: Nesting Routes

Now we can easily nest routes:



// Nested Config
 {
      path: '/my-route',
      component: EmptyRouterView,
      children: [{
        name: 'route',
        path: '',
        component: MyRouteView
      }, {
        name: 'route.child-one'
        path: 'child-one',
        component: ChildOneView
      }, {
        name: 'route.child-two'
        path: 'child-two',
        component: ChildTwoView
      }]
  }

See how easy it is to nest routes 💪🏻 When a user navigates to /my-route/child-one the ChildOneView should be rendered as intended.

Step 4: Deep Nesting Routes

We can also nest routes in our nested routes. Some kind of Route-ception

(Yes I know: bad wordplay 😁)



// Deep Nested Config
 {
      path: '/my-route',
      component: EmptyRouterView,
      children: [{
        name: 'route',
        path: '',
        component: MyRouteView
      }, {
        path: 'sub',
        component: EmptyRouterView,
        children: [{
            name: 'deep',
            path: '',
            component: MyDeepRouteView
          }, {
            name: 'deep.child-one'
            path: 'deep-one',
            component: ChildOneView
          }, {
            name: 'route.child-two'
            path: 'deep-two',
            component: ChildTwoView
          }]
      }]
  }

The path /my-route/sub/deep-one would lead to ChildOneView beeing rendered.

I think I reached my word limit of the word routes, therefore I'll leave you with this. I condensed all of this in a repo, where you can see it all in action

BerniWittmann / vue-router-architecture

My Architecture approach on Vue Router

My Vue Router Architecture Approach

This repository should demonstrate my basic approach on Vue Router Architecture and nested routes. It also displays the possibility of handling dialogs with Vue Router

The corresponding Blog Post can be found on dev.to

Part 1: Route Handling

Part 2: Dialog Handling

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

❓ Got any questions?

Don't hesitate to drop me an email to dev@bernhardwittmann.com

View on GitHub

Short Spoiler: Modals

In the next part of this little series on Vue Router Architecture I would like to talk about handling Modals with Vue Router. The approach I explained above also has another advantage. It makes it very easy to deal with Dialogs (These Popups/Modals, I never know what to call them 🙄). Find Part 2 here:

Handling Dialogs with Vue Router

Bernhard Wittmann ・ Apr 17 '19

#vue #tutorial #javascript #programming

I know there may be a hundred different approaches on this topic and I'd be glad to hear your thoughts on this 😉 And as always: should you have any questions, don't hesitate to ask

Thank you for my first blog post ever and what should i write next?

Bernhard Wittmann — Wed, 20 Mar 2019 13:54:34 +0000

Last week I got inspired by Rachels post on starting a blog

Therefore I sat down and wrote my first blog post ever last sunday 💪🏻

Quick & easy documentation generation for Vue.js components

Bernhard Wittmann ・ Mar 17 '19 ・ 2 min read

#vue #documentation #tutorial #javascript

And I'm astonished by the appreciation it got with over 800 views and 150 new followers. It will even be added to the Vue.js Developers newsletter 🎉.

I don't know whether this is much or not for this platform. Nevertheless I'm thrilled!

Therefore I wanted to say thank you for the appreciation and this motivation-boost.

I also want to use this opportunity to start writing more. So i want to know:

What are some topics you would like to hear about?

I think I'm quite experienced in Vue and webdev in general therefore I want to give something back and share my knowledge. I'd be glad to hear about your ideas on some topics 😊

Quick & easy documentation generation for Vue.js components

Bernhard Wittmann — Sun, 17 Mar 2019 08:16:28 +0000

Did you ever lose oversight over the components of your Vue application?

If that's the case, you should definitely care about documenting your components. So what is the first idea here: Fire up a page in a wiki and just write down what each component does. However this may not be the best approach, because people tend to forget updating the documentation (or just don't want to, like myself).

So why don't automatically generate a slick documentation page directly from your code? But how?

Don't worry! vuese has your back. It can autogenerate documentation for your components and renders it as a neat & simple html page.

vuese / vuese

🤗 One-stop solution for vue component documentation. Original org: https://github.com/vuese

vuese

One-stop solution for vue component documentation

This project is supported by our Backers

Document

For detailed documentation: https://vuese.github.io/website/

Overview

Vuese Automatically generate documentation for your vue component, and provides a variety of solutions for generating component documentation to meet your different needs.

@vuese/cli

@vuese/cli is a command line tool that is very simple to use. If you want to quickly build a documentation site for your vue component or just want to generate markdown document for your vue component, then this tool might be a good choice. Please go to the details: @vuese/cli

@vuese/parser

The @vuese/parser module is the parser for the vue component, @vuese/cli internally parsing the vue component via the @vuese/parser module and extract the information we want. You can do any more advanced things with the interface provided by the @vuese/parser module. For the API documentation, please go to @vuese/parser

Online experience

Visit the following 👇…

View on GitHub

You can add it to your Vue project right now, by installing it with:

npm install -g @vuese/cli

and then run vuese to generate the documentation

vuese gen

That's all, I swear 🙌🏻

Now let's take a look at how it works

Imagine we have the following component:

<template>
  <div>
    <!-- Form header -->
    <slot name="header">
      <!-- `<th>title</th>` -->
      <th>title</th>
    </slot>
  </div>
</template>

<script>
// This is a description of the component
export default {
  name: 'TestComponent',
  props: {
    // The name of the form, up to 8 characters
    name: {
      type: [String, Number],
      required: true,
      validator () {}
    }
  },
  methods: {
    // @vuese
    // Used to manually clear the form
    clear () {
      // Fire when the form is cleared
      // @arg The argument is a boolean value representing xxx
      this.$emit('onclear', true)
    }
  }
}
</script>

This results in this neat html page:

vuese retrieves the data and annotations from slots, props, methods and events and for the component itself directly from the code. As you can see it even extracts the type and required state from the name prop.

You can check out the result here: https://berniwittmann.github.io/vuese-demo/index.html

I also created a small repo, where you can play around with the annotations and get a feeling of how simple it is.

BerniWittmann / vuese-demo

Short demo of Vuese Documentation Generation for Vue Components

Quick & easy documentation generation for Vue Components with vuese - Demo

This repo is a short demo of the tool vuese to create component documentation for Vue.js components.

The accompanying blog post can be found on dev.to

Result

Setup

Install the dependencies

npm install

Generate docs

Generate the docs by running

npm run docs

View on GitHub

So have fun creating your component documentation and definitely check out vuese.org for more information.

Thanks for reading and I'd be glad about some feedback, since this is my first blog post ever 💪🏻

DEV Community: Bernhard Wittmann

Think about the Bus

Capabilities

Knowledge

Ask yourself

What to do about it?

Advice needed: How not to get frustrated when time runs out

Handling Dialogs with Vue Router

Step 1: Update our EmptyRouterView Component

Step 2: Create a component for our dialog

Step 3: Update the Route Config

BerniWittmann / vue-router-architecture

My Architecture approach on Vue Router

My Vue Router Architecture Approach

Project setup

Compiles and hot-reloads for development

❓ Got any questions?

Vue Router Architecture and Nested Routes

The main issue

Step 1: Add an EmptyRouterView Component

Step 2: Adjust your Components to the new architecture

Step 3: Nesting Routes

Step 4: Deep Nesting Routes

BerniWittmann / vue-router-architecture

My Architecture approach on Vue Router

My Vue Router Architecture Approach

Project setup

Compiles and hot-reloads for development

❓ Got any questions?

Short Spoiler: Modals

Handling Dialogs with Vue Router

Bernhard Wittmann ・ Apr 17 '19

Thank you for my first blog post ever and what should i write next?

Quick & easy documentation generation for Vue.js components

Bernhard Wittmann ・ Mar 17 '19 ・ 2 min read

Quick & easy documentation generation for Vue.js components

vuese / vuese

🤗 One-stop solution for vue component documentation. Original org: https://github.com/vuese

vuese

Document

Overview

@vuese/cli

@vuese/parser

Online experience

BerniWittmann / vuese-demo

Short demo of Vuese Documentation Generation for Vue Components

Quick & easy documentation generation for Vue Components with vuese - Demo

Setup

Generate docs

Step 1: Update our `EmptyRouterView` Component

Step 1: Add an `EmptyRouterView` Component