Hva er du god til? Hvordan kan du finne ut av det? I denne artikkelen bruker jeg meg selv som eksempel, og viser verktøyene kjernekvadranten og Joharis vindu for å detaljere en fremgangsmåte for å finne styrker. 

Hei der! Mitt navn er Jarle og jeg har vært i Bekk siden januar 2013. De siste årene har jeg hatt et stadig større fokus på folk og coaching. Jeg brenner for å lykkes og hjelpe andre å lykkes. I denne artikkelserien på tre deler, «Selvutvikling på 1-2-3», ønsker jeg å dele erfaringer, modeller og verktøy som jeg har hatt mye nytte av. Både for min egen del, men også for å coache andre. Dette er den første av tre artikler i serien.

Så lenge jeg kan huske har en av mine største styrker vært selvtillit. Jeg har en sterk, iboende tro på at jeg kan få til det aller meste. Med en styrke kommer det også et overslag – at det blir for mye av det gode, rett og slett. For min del er overslaget til selvtillit arroganse. I flere år har jeg jobbet strukturert med hvilke styrker jeg har og hvordan de henger sammen. Et fokus for meg er hvordan jeg kan tøyle arrogansen uten at det går på bekostning av selvtilliten, som er en styrke jeg setter stor pris på.

I Bekk har vi en tanke om at selvutvikling bør ta utgangspunkt i våre styrker. Det som er fint med styrker er at alle har dem, og vi erfarer at det er motiverende for de fleste å jobbe med sine styrker. Det man ønsker å gjøre noe med ved seg selv er ofte en styrke som blir litt for sterk: Et overslag. Da ligger litt av utfordringen i å finne en «medisin» mot dette overslaget, kalt den komplementært motsatte styrken til din kjernestyrke.

La meg hoppe tilbake til meg selv som eksempel. Styrken min er selvtillit, overslaget er arroganse. Den komplementært motsatte styrken til selvtillit er ydmykhet. Ydmykhet har igjen sitt overslag. For mye ydmykhet gjør deg usynlig, du unngår å ta plass fullstendig. Overslaget til det komplementært motsatte er kjent som «allergi», fordi dette typisk er adferd vi reagerer negativt på hos andre. Det jeg har beskrevet her er en mental modell for å sette opp relasjonen mellom en styrke, overslaget, det komplementært motsatte og allergien. Denne modellen heter kjernekvadranten (Core Quality Quadrant, utviklet av Daniel Ofman), også kjent som talent-overslag-modellen. Se figuren under for en visualisering av dette eksempelet.

Det jeg liker veldig godt med denne modellen er at du kan starte på så mange forskjellige steder for å identifisere dine styrker. Kanskje har du vanskelig for å sette ord på en styrke, men du er bevisst på et overslag eller en allergi. Da kan du tegne opp disse boksene med tilhørende piler for å vise relasjonene, skrive inn det du kjenner, og begynne med hypoteser:

Vi har flere styrker og i min erfaring trengs flere iterasjoner og kalendertid for å la dette modnes mentalt, før du sitter igjen med et bilde som begynner å gi mening. Du kan gjøre en del selv, men det er også svært verdifullt å lene seg på andre som kjenner deg godt, samt bruke diverse verktøy for å supplere med innsikt. En stor utfordring med å prøve å forstå deg selv er at det er så mye vi ikke ser. To psykologer utviklet et rammeverk i 1955, Joharis vindu (wikipedia). Joharis vindu er laget for å hjelpe folk å forstå relasjonen til seg selv og relasjonene til andre. Visualiseringen ser ut som følger:

Jeg nevnte at det er verdifullt å lene seg på andre, samt bruke verktøy for å bidra med innsikt her. Tilbakemeldinger fra andre, gjerne med konkrete eksempler på når du er på ditt beste, er en gullgruve. Det oppleves som positivt og relasjonsbyggende for begge parter, samtidig som du får et hav av innsikt i deg selv som er umulig å realisere på egen hånd. Du kan også delta på kurs med temaer som omhandler å bli bedre kjent med deg selv, eksempelvis. Til sist har vi naturligvis personlighetstester. En liten advarsel som gjelder generelt for alle disse, men spesielt personlighetstester: ikke se på det som en fasit. Bruk det kritisk og reflekter over hva som faktisk gir mening for deg. Det finnes mange personlighetstester. Den mest anerkjente modellen innenfor akademia og den som brukes av kliniske psykologer er «Big Five» (wikipedia). Hvis du har anledning til å ta en slik test, gjerne med tilbakelesning fra en sertifisert fagperson, er det et godt utgangspunkt.

Tilbake til Joharis vindu kan vi tenke oss at disse forskjellige fremgangsmåtene hovedsaklig bidrar til innsikt i områdene som følger:

I 2016 var jeg på et kurs med Bekk som strakk seg over en ukes tid. Det er et fast opplegg vi kjører hvert år for de som rykker opp til å bli seniorkonsulenter. En del av opplegget omhandler å bli bedre kjent med deg selv, og jeg husker veldig godt at jeg hadde en stor aha-opplevelse rundt dette med arroganse og selvtillit. Det var første gang jeg forstod hvor tett disse henger sammen: Jeg kan ikke ha den ene uten å ha den andre. Det betyr ikke at jeg skal slutte å jobbe med arrogansen min, men det ga meg et mer avslappet forhold til det faktum at den er der som en konsekvens av selvtilliten min. Det å se på det som to aspekter av et personlighetstrekk gjør at jeg i større grad kan akseptere at sånn er det, uten å være for selvkritisk. I min erfaring er de fleste av oss våre egne verste kritikere, og jeg tror det ligger mye verdi i å få et mer avslappet forhold til oss selv. Rett og slett være rausere og mer tilgivende mot oss selv, slik vi typisk er mot andre. Med en større intern ro rundt dette, og en bedre forståelse for hvordan mine egenskaper henger sammen, var mitt neste steg å sette retning. Det skal vi se nærmere på bak neste luke i denne kalenderen!

Selvutvikling på 1-2-3: 1) Hva er du god til og hvordan kan du finne ut av det?

An introduction to Vue 3 from a React developer. 

Vue.js is a popular JavaScript framework. With over 2 million weekly downloads (at the time this article was written), and with 191k stars on Github, it is safe to say that it's widely used. Vue is a progressive framework, meaning it adds additional markup to HTML. 

The Vue.js framework is versatile, applicable to both single page applications as well as more complex apps. It seems like a great framework, let's dig a little deeper!

Vue vs. React

React and Vue was released almost at the same time, React had its initial release in 2013 while Vue was released in 2014. Both is open sourced, has a Virtual DOM and is component based. But how do you know which technology to use? 

Luckily, some clever people in the JavaScript community has over the years created State of JS (creds to Sacha Greif and Raphaël Benitte for creating this), comparing the different frameworks.

React has been the top choice for several years since this great website started. According to State of JS, it was surpassed by Vue in 2018 in the satisfaction category. Based on usage, React is the most popular framework every year. Vue was the framework most developers were interested in trying in 2018, but was surpassed by Svelte in 2019 and 2020. For more comparisons of the JavaScript frameworks, you can checkout the State of JS survey below 👇

Vue 2 vs. Vue 3

Vue has existed for some time now, and like every other framework, it has gone through some changes over the years. In this article I will focus on the Vue 3, which was released in September 2020. Still, I think it's a good idea to look at some history, so let's look at the differences between Vue 2 and Vue 3.

Vue 3 introduced (a lot of) changes to the API. It went from the so called Options API to the Composition API. The main goal for this change was for code sharing (code reuse?). In the early version of Vue, the JavaScript code was split into different functions, making it hard to reuse components through your application. Look at the code example for Vue 2 Composition API:

In Vue 3 they created a more dynamic way for handling the data for a component, by implementing the Composition API:

By using the setup function, we can group the code according to what makes sense logically.

For more information about the Options API and the Composition API, check out the link below!

Let's look at some more Vue code!

For the next paragraphs I will show some basic examples for typically elements you'll want to use in a Vue component.

Hello World

Let's start with the basics; how a Vue file is structured. A single file component in Vue has a <template> and a <script> tag, where the template is where you write your markup and script is where you define your component writing JavaScript. Look at the template of a Vue component in the code below:

As mentioned earlier in this article, Vue 3 has the setup() function. This function is more suitable for reusing code in your component. The data you return in your setup function will be available in your template, both variables and functions.

Reactive references

If you are familiar with React, you may have used the useEffect hooks, Vue has a similar function, only you use ref to get a reactive reference. 

A reactive reference make sure that the view updates whenever the value of the reactive reference changes.

Conditional rendering

Sometimes (I dare to say always) we want to show some data based on the state of your application, and in other cases we want to hide it. Vue has a series of directives you can use in your template, the directives are Vue specific HTML attributes that allow you to manipulate the DOM.

To conditionally render your data, you can use the v-if directive.

It is possible to use v-if-else and v-else for conditional rendering. Here are an overview of the different directives you can use in Vue. 

List iterator

As a developer, I don't want to do more work than necessary. I want an easy way to iterate over lists. As mentioned in the section above, Vue has some directives we can use. To iterate over a list in Vue, you can use the v-for directive which is written as "item in items" as input. This is different from the way we iterate over lists in React where you use the .map function. Let's look at a classic <li> example:

In the example above you'll see the :key property. It is a shorthand for the v-bind directive (written as  v-bind:key="item.id"). It binds attributes or a prop to an expression. In the example above, the key is bound to item.id to get a unique identifier so Vue knows which list item to update. This is similar to the key prop in React.

Input and two-way bindings

I know what you are thinking, what is an application without a form with a binding to some data we can update? The classic example is having an input field, and a preview of the data passed into it. Look at the code example below:

In this example @click on the button is a shorthand for v-on:click. The v-on directive attaches an event listener (in this case my addItem function) to the button. In addition, if you look at the input tag, I have added a v-model, this directive creates a two-way binding on an input field to the newItem data. Let's look at the JavaScript to fully understand the connection to the data.

Look at the newItem variable and addItem function. To fully connect the input field you need to  connect the addItem function to the button which updates newItem variable, and add newItem to the v-model for the input field to display the updated value. 

Watch for changes

When using a variable in Vue, we sometimes want to update it based on changes in another variable. Let say you have a list of items, and in your view you want to display the number of items. Declaring the variables is shown in the code example below:

There's one problem with the example above. On initial render the numberOfItems value will be correct, but if we are updating the items list, the numberOfItems will not update correctly. If you are familiar with React, you may have used the useEffect hook. There is a similar way to watch for changes in Vue, only it is done by using the watch function.

The watch function takes the data it should be watching as first argument, and a callback as the second argument which is applied when the data you are watching has changed. This way the numberOfItems will update whenever items has changed.

Child Components

Let's look at how to use components in components! In larger application it is not sufficient to have only one component, so component compositions is a nice way to split your code. To use a child component you need to register the component. Look at the example of a parent component below:

You can use the MyButton component in another component by writing JSX <MyButton /> (as in React) or accept the magic that Vue does and write <my-button /> in your template. If you want to render any JSX between the start and end tag of your parent component, you need to use <slot /> in your child component (it's not called 'children' as it is in React).

In the next code example you can see the child component. It gets some props from the parent, like childClass and onButtonClick, and renders slots.

When passing event listeners to components, you can trigger it by emitting the desired function you sent in as props. The $emit in the onButtonClick function defines events that the child component can send (or emit) to the parent. 

Every front end framework which have component composition need to have a way to define props (yes, I said it). You can define your props with an array of strings (e.g. props: ['title', 'childClass']) or as in the code example where you can define the specific type (TypeScript <3). Look at the JavaScript for the child component:

There are also two ways to pass props, either static or dynamic. Example of static types is <MyComponent value="42" />, and dynamic props is where you use v-bind and connect it with data, example <MyComponent :value="item.answer" />. 

That's it folks

I really enjoyed learning Vue, and I think it is a great framework to use in your next project. I think it is good to know what is out there in the world of JavaScript frameworks, and not be stuck in some old React pattern with class components and componentShouldUpdate. ... Even though I really, really like React!

Hope you liked this post about Vue!

4-Dec

Today's posts

Selvutvikling på 1-2-3: 1) Hva er du god til og hvordan kan du finne ut av det?

The View of Vue