I have a confession to make.

I actually enjoy JavaScript.

I know, I know, I’m not really supposed to feel this way. It’s supposed to be this weird language full of flaws that never follows established rules and conventions, and we’re all supposed to not like it. But that’s just not the case for me – despite all the quirks and unusual behavior I still enjoy it.

There are, of course, sides of it I enjoy less. The two things I dislike the most are lack of strong, static typing, and a well-built standard library. The standard library is still growing, and the newer parts of it are not too bad – the older parts, though, are all over the place: they mutate, and lack consistency.

Not too long ago I came across this library named fp-ts, that together with TypeScript made my whole JavaScript experience a lot better. This blog post aims to give you a short introduction to this library, and show you some of its strenghts. To keep this blog post short, I will assume you know both JavaScript and TypeScript. You will probably still understand most of it even if you are not fluid in any of them, but consider yourself warned.

fp-ts

fp-ts introduces many functional concepts. If you come from Java or Kotlin, you can compare it to Vavr or Arrow, respectively. It provides several well known data types, type classes, a consistent library of functions, and several other functional abstractions.

Wading through every feature of fp-ts would be an enourmous task, and one way too overkill for this blog. Instead, I will take you through some of the simpler concepts that anyone can benefit from. My goal is to show you exactly how to make use of some of these concepts, so you can take use of them right after.

Let’s get started!

The Data Types

Let’s start with two data types I use more or less daily: Option and Either. If you are completely new to functional programming, I suggest starting with these as they encourage a coding style that is safe, and can help you understand other aspects of functional programming later on.

An Option type represents an optional value. Something you either have, or don’t have. This is useful when lacking a value is valid in your domain, or when a function may or may not return a value. Let’s see some code.

Before we go through the code, I’d just like to point out the use of partial application in the two last lines. Lots of functions in fp-ts are curried by default, as is often common in functional languages. This pattern is really convenient when you want to bind some, but not all, parameters of a function.

So, an Option wraps a value, and allows operations to be performed through functions such as map, filter, fold and others. This example demonstrates a really nice property of the Optional: your business code can describe the "happy path" – error handling is abstracted into the Option itself. We never have to check for null values before getting the username from the user, because the function getUserName is run in a safe context. map runs the provided function on an Option only if it is a some, and not a none. The same is true for other functions on the Option.

But what if you wanted to display, or use, the username? You can’t just extract the value from inside an Option, as you don’t know whether it is a some or a none. To get the actual value from the Option, you need to specify what to do both when it is a none, and a some. Let’s take a look at two safe ways of extracting your value from the Option.

With both fold and getOrElse, the type system forces us to handle both the missing and the non-missing state. You now have a safe way of handling missing values, and even a safe way of getting them out as well – no more checking for null all over the place!

Let’s modify the function getUserById from the first example a bit. Instead of just returning a none, we would like to know why it was not returned. An Option can’t help you with this. Instead, you need something like the Either. Where an Option is either a none or a some, the Either is either a left or a right. It holds a value in both cases. The Either is often used to model situations where an operation can either fail or succeed. By convention, the left case represents the failure, and the right case represents success.

Aaaaaanyway. As stated, let’s change our getUserById function to also tell us why it was unsuccessful.

This is not too far from the first example with the Option, with the added value that we now also know why it failed. It was either not found, or it was expired. Just as with the Option, Either is also a wrapper around your value(s), abstracting away the error case until you need the actual value. Either has its own version of fold, among others, which can be used to extract the value. I’ll leave you with the task of implementing this – if you need a hint, I can tell you it’s more or less the same as with Option!

So, which type should you use? It’s the usual, booring answer: it all the depends. It all depends on how the operation might fail, and what it would result in. It also boils down to semantics – is the lack of a value valid in your domain, or is it an error? In the former case, and Option is more suitable. In the latter, an Either might be better. As always: if you are unsure, just try one of them – you will soon find out if it was right or wrong.

Pipes and flows

Function composition is a central concept in functional programming. It is the act of combining simple functions to build more complicated ones. Smaller and simpler functions are easier to reason about and test, but can’t perform complex operations by themselves.

You could of course just call your simple functions in succession in a larger function. Either by saving the result of each step, or wrapping your functions inside each other. Both of these gets more and more tedious the more functions you need to call, and hides the important details: the actual logic and transformation. Let’s take a look at two functions called pipe and flow, which both make composition easier. They are quite alike, but have different use cases.

result and result2 have the same value, but are computed differently. pipe gives us the ability to pipe a value through a list of functions, and produce an output. This is nice for those one-off situations where you need to combine a few functions to produce a result. flow is more suited for those situations where you want to compose functions and create a new function permanently. In both cases, everything needs to typecheck – the input to one function needs to be of the same type as the output from the previous, all the way through.

Extended built-ins

As I said in the beginning of this post, JavaScripts standard library is in a bit of a weird position. If we take Array as an example, there is a distinction between functions that mutates in place, and functions that instead returns a new value. Things are moving to a better place, but we still have these old, mutating, functions that we have to live with. fp-ts fixes this by providing a consistent library even for JavaScript built-ins such as Array and Map. It’s not only consistent on the different types themselves, but also across the types thanks to extensive use of type classes [^1]. Every class that adheres to the Functor type class supports the map function, and every class that adheres to the Filterable type class can be filtered and partitioned. If this is greek to you, just ignore the lingo and appreciate the fact that most types has map, filter, reduce and loads of other functions implemented on them. You can even implement them on types you create yourself as well!

... and so much more

We have only really scratched the surface here. These concepts should give you enough to get you started, and hopefully see the value in this library. When you’re ready, there are tons of other concepts to dive into, which can make your code even more readable and safe. I haven’t had the time to wade through it all myself, so I still keep finding small gems which makes my day just a bit easier.

If you want to know more, the learning resources section of the documentation is actually quite good. As the author states, fp-ts does not really aim to teach functional programming from the ground up, but the resources are still good and manages to convince at least me quite well.

I also recommend reading the source code. It is surprisingly readable, even to me – a person who is neither fluent in advanced typescript or an FP zealot.

[^1] – These are not «real» type classes, they are type classes implementet with interfaces. You can’t use the same map function on all Functors, but all Functors has a map function. You still need to use the type specific implementation of map, but at least it encourages the same pattern.

Functional TypeScript With fp-ts

Born from constraints and out of necessity, the Takahasi method is a way of designing text-only presentations. Using one word. Maybe two. Per slide.

A method for creating presentations when you have no intentions of dealing with graphic design. The Takahashi-method is a bare-bone style, using words alone or short sentences as visuals. There is room only for the bare minimum, and whatever is on display should underline the spoken word and be a point worth making.

Lawrence Lessig is one of the more notable presenters who borrow from this style. The clip below is an example of Lessig in action with his distinct way of presenting.

As you are watching Lessig present, consider which is more important; his slides or the story? In this case, the story and his ability to convey a to-the-point narrative, almost makes the presentation superfluous.

There is no doubt that he is in control when presenting, always knowing what comes next both in the story and on screen. There is no hesitation.

Confidence on this level comes from experience and practice, and knowing your message by heart.

The Takahasi way of presenting can be an interesting challenge, and certainly something that will be perceived as out of the ordinary at a conference or a meetup.

A word of caution; there is a time and a place for everything. The Takahas-method is no exception. If you have an hour on stage and are a fresh presenter, this might not be the best approach. The same goes for video conferences and online meetings, ,where you are running the risk of having spotty internet connections ruin the experience.

If, however, your goal is to leave your audience feeling excited and motivated by your talk, the it might be worth trying this style of presenting.

It takes little effort to make the slide deck, which will save you time. Time which is much needed or rehearsing your story and timing.

The Takahashi-method

MockK is a mocking library for Kotlin, written in Kotlin. Because of this, it has extensive support for Kotlin language features such as extension functions and companion objects.

What is mocking?

Mocking is a technique that is primarily used in unit tests, or tests that validates the functionality of parts of the code in isolation. When running unit tests on classes, they are often dependent on other classes to function properly.

As an example, imagine a Car class, which is dependent on another very complex Engine class in order to work. How do we isolate the testing of the car (the unit under test) from the engine (a dependency of the unit)?

A solution to this problem is to create fake versions of the dependencies. Instead of providing an actual engine for the car, we can instead provide a mock object which mimics the behavior of the dependency without all the underlying details, thus isolating the unit under test from its dependencies.

Mock objects can be configured in many different ways to suit the needs of different unit tests, and allows the test writer full control of the behavior of dependencies for any given test.

For reference, a mock object of the unit in focus in a unit test is often referred to as System Under Test (SUT), and the mocked dependencies of the SUT are often called Dependent-On Components (DOC).

How to mock in MockK

mockk and every

The bread and butter of MockK are the two functions mockk and every. You declare mock objects by using mockk, and you mock away dependencies by using every. This use of every is also called stubbing behavior to generate canned responses.

Let us consider a simple class for example demonstration purposes:

Below are two simple examples of how mockk can be used to declare mock objects of the class Santa, and how every can be used to stub behavior.

The keyword returns specifies what the return value (or the canned response) for the call to that DOC should be.

The function call any() passed as parameter to laugh is a way of allowing every call with any parameter value to return a canned response with exactly three Ho ho ho!'s.

Argument matching

In addition to any, you can implement more sophisticated argument matching with the use of more, less, eq and or:

Expected answers

In addition to returns, there are other keywords that control the behavior, or the expected answer, of a DOC.

The keywords returnsMany and andThen can be used to generate a sequence of canned responses from similar function calls.

If the return type of a call to a DOC is Unit, just Runs can be used:

You can also throw exceptions by using the keyword throws:

You can create more sophisticated answers in the form of lambda function return values by using the answers keyword in tandem with answer scope functions like firstArg:

Verifying behavior

While assertions and verification can typically be handled by your testing framework of choice (like Spek which was featured in yesterday's post), MockK does feature quite a bit of functionality to help the test writer verify behavior.

Behavior verification refers to checking if the mocked DOC's were called correctly from the SUT. Usually you want to put verification at the end of a test. You start a verification block by using any of the keywords verify, verifyAll, verifySequence and verifyOrder, and unlike every, you can specify multiple calls inside a single verification block.

To check if certain calls happened at least once, use a simple verify:

verifyAll does a similar check to verify, except it also checks if the calls specified are the only calls made on that mock. The following block checks if laugh was the only DOC called from the SUT:

verifySequence checks if an excact sequence of calls happened, with no other calls in between:

verifyOrder is similar to verifySequence, but it only checks the order of the calls specified, while allowing for other calls to be possibly woven in between:

verify also accepts arguments. You can check if a call to laugh happened in an interval of 2 to 4 times by supplying arguments to the parameters atLeast and atMost:

The parameter exactly specifies an exact number of calls to check for, and is the same as setting atLeast and atMost to the same value:

To check if a call did not happen, you can either set exactly = 0, or you can use the special construct wasNot Called:

Sometimes you want to execute calls to the real dependencies of an SUT. For this purpose, MockK also features Spies. A Spy can be seen as a hybrid between a mocked object and a "real" object. Any verification you can apply to mocked objects, you can also apply to spies. You can create a spy with the function spyk, and add some optional mocked behavior like so:

That covers the basics of using MockK! If you're still interested in learning more, check out the relevant links below for further reading.

MockK Library

"If you want to be a millionaire, start with a billion dollars and launch a new airline"



– Richard Branson

Fra Richard Branson, Bjørn Kjos til Erik Braathen – gründere og kapitalsterke investorer har gjennom tidene tatt den store utfordringen det er å etablere et flyselskap, til tross for at det er en bransje med lav lønnsomhet og høy risiko. Hvorfor starter folk egentlig flyselskaper?

Ting du burde tenke på hvis du vurderer å starte et flyselskap

Flybransjen er en bransje som historisk har levert særdeles lav avkastning på totalkapitalen (ROIC) på rundt 6%, sammenlignet med et snitt på 15% for alle bransjer i USA. Den lave avkastningen kommer blant annet som følge av et marked med nesten perfekt konkurranse, der mange ulike flyselskaper tilbyr så godt som det samme produktet – de flyr de samme flyene, fra de samme flyplassene, i samme hastighet, med de samme sikkerhetsrutinene. Som følge av den harde konkurransen om å tilby det samme produktet, er det vanskelig å utkonkurrere konkurrentene uten å kutte kostnadene. De ulike flyselskapene står overfor de samme kostnadsdriverne, og etter å ha kuttet det som kuttes kan, blir nasjonalitet og lønnskostnadsnivå grunnlag for konkurransefortrinn – der for eksempel ungarske flyselskaper vinner markedsandeler og reduserer lønnsomheten for resten av bransjen. Flyselskaper er også ofte en nasjonal stolthet og viktig arbeidsgiver som innehar stor politisk betydning. Dette medfører at stater har subsidiert flyselskapene og ført til at mindre lønnsomme selskaper fortsetter å konkurrere, og dermed ødelegger lønnsomheten i hele bransjen.

Lav avkastning og lønnsomhet er ikke nødvendigvis et stort problem i seg selv, så lenge risikoen også er tilsvarende lav – noe den dessverre ikke er i flybransjen. Gjennom en rekke ulike sjokk de siste årene, som blant annet 11. september, askeskyen over Island og nå COVID-19, har etterspørselen etter flybilletter blitt kraftig negativt påvirket. Etterspørselen er også sterkt avhengig av den økonomiske utviklingen - fritidsreiser er for eksempel et luksusgode som raskt kuttes dersom man havner i økonomiske problemer. Videre er jobbreiser også en kostnad som kuttes tidlig dersom en bedrift får økonomiske problemer. På kostnadssiden er det også flere risikoelementer; flybensinprisene svinger kraftig i takt med oljeprisen, de ansatte går typisk i streik når det passer som dårligst, og flyene kan plutselig få problemer og settes på bakken over lengre perioder. Rammebetingelsene kan også brått endres; plutselig blir det innført en flyseteavgift, over natten kan en ny konkurrent komme inn på dine mest lønnsomme ruter, og plutselig er det flyforbud over Pakistan. Den siste tiden har også klimahensyn og konsepter som «flyskam» gjort sitt inntog, og mye kan følgelig tyde på at den tradisjonelle fossilflybransjen nærmer seg «peak demand».

Det krevende konkurransebildet og de mange risikoaspektene resulterer følgelig i en lav risikojustert avkastning, med en ROIC på kun 6% og betydelig risiko. I tillegg er bransjen kapitalintensiv, og det er krevende å finne investorer som er villige til å investere i slik risiko og en avkastning på kun 6%. Ved hjelp av gearing (gjeldsfinansiering) kan en oppnå en mer attraktiv egenkapitalavkastning (ROE), men med gjeld økes en allerede høy risiko ytterligere.

Så hvorfor starter du et flyselskap?

Det er flere grunner til at man velger å starte et flyselskap til tross for den lave bransjelønnsomheten. En god grunn kan være at du har en ny forretningsmodell og operasjonsmodell, der du kan oppnå en høyere lønnsomhet enn de eksisterende flyselskapene – for eksempel utviklingen av Norwegians lavkost-modell som fylte et stort kundebehov og hadde åpenbare konkurransefortrinn overfor forretningsmodellen til SAS på tidlig 2000-tallet. En annen grunn kan være oppnådde konkurransefortrinn gjennom eksempelvis kostnadsfordeler i landet flyselskapet etableres – som f.eks. WizzAir fra Ungarn, som opererer i et land med noen av de laveste kostnadsnivåene i hele Europa. En tredje grunn kan være at du ser en god inngang til markedet som for eksempel i disste tider der flyprisene er lave, flyselskapene er relativt lavt priset, det er mye tilgjengelig arbeidskraft, og at deler av markedet har tro på høyere lønnsomhet fremover. Sist, men ikke minst, kan du se at det er mulig å geare (gjeldsfinansiere) store deler av kapitalbehovet, og følgelig oppnå en betraktelig høyere egenkapitalavkastning.

At det er en bransje med relativt lav lønnsomhet, betyr ikke at det ikke finnes eller er mulig å starte enkeltselskaper med høy lønnsomhet. Ryanair og Allegiant Airlines oppnådde ROIC på henholdsvis 14% og 24% fra 2005-2015, som ligger betydelig over bransjesnittet på 6%. Fellesnevneren er at de er ultralavpris-flyselskaper med bransjeledende kostnadsnivåer.

Men livet handler ikke bare om å tjene penger, og det er mange som drives av mer meningsfylt motivasjon enn bare egenkapitalavkastning. Kanskje du syns det er utrolig spennende å starte et flyselskap i seg selv? Kanskje du har en lidenskap for flybransjen og hvordan den har knyttet verden sammen og skapt reiser, minner og opplevelser for store deler av verdens befolkning? Kanskje du trigges av denne særdeles utfordrende, kompetitive og internasjonale bransjen? Kanskje du finner glede i å skape et nytt tilbud som skaper verdi for konsumentene, samtidig som du skaper arbeidsplasser? Motivasjon og ambisjon har følgelig vært utgangspunktet for mange av verdens flyeventyr, og vil etter all sannsynlighet fortsatt bidra til starten av nye.

Å starte et flyselskap er ingen enkel oppgave, og man står overfor mange åpenbare utfordringer og hindringer. Men med mye lidenskap, et unikt verdiforslag, store kostnadsfordeler og en stor dose flaks kan man lykkes og bygge et imperium.

Hvorfor starter folk egentlig flyselskaper?

Did you know most Chrome extensions are written in good ol' JavaScript? Turns out, creating one with React is pretty straight forward, too! Let's look at how you can use your existing JavaScript skills to spread some holiday cheer!

Chrome extensions are small programs that can be added to your Chrome browser. Their functionality can vary greatly; some extensions can offer some small tweaks for the browser, while others can be larger and more complex programs. Similar to web pages, Chrome extensions are created with HTML, JavaScript and CSS, so why shouldn't it be possible to develop Chrome extensions with React?

Basics of Chrome Extensions

Before we get started with the project, there are some things to know and bear in mind.

There are three main components of an extension; popup, content script and background script.

Popups are the content that's shown when the extension's icon is pressed.

Content script is code, JavaScript or CSS, that's injected into the context of the current webpage.

Background script is JavaScript code that's run as a separate instance in the browser, and it's mostly used for listening to events and to handle a browser wide state.

We are going to develop an extension that's utilizing these three types of components. The popup will be created with React and TypeScript and the content- and background script will be created with TypeScript. It's also possible to inject a website with React code through the content scripts, but we will not be doing that in our project.

Setting up the project

There are several ways to initialize our React project, one of which is with create-react-app. create-react-app is a great way to get started on a regular web project, but it requires some tweaks to be a viable starting point for a Chrome extension. Instead of tweaking a create-react-app based project, we decided to create a boilerplate project using Webpack, which create-react-app is based on.

Create a project directory with the boilerplate by running the following command. This will create a directory named snow-extension and add the boilerplate.

degit is a tool for cloning a repository and removing the git files, which is useful when you want to base your project on some boilerplate code.

Navigate to the project directory and install the dependencies by running:

Now we're ready to have a look at the code!

Looking at the code

Our project consists of some config files, a public directory, and a src (source) directory. We will start by looking at the public directory.

public

The public directory contains several files used as metadata and configuration of the extension.

manifest.json - Configuration file of the Chrome Extension.

popup.html - The mounting point for our React code.

icon*.png - Icons used by the Chrome Extension

manifest.json is the most important file for in a Chrome Extension, it contains everything from its name and version number, to which scripts to be used where. We are only going to go through the essentials, but you can read more about the Manifest File Format here.

Let's have a look at our manifest.json file!

name, version, and manifest_version are the only required fields in manifest.json. manifest_version should always be 2, and the rest should be reasonable strings. We are going to create an extension that makes it snow in the browser, and we are going to name fields thereafter.

icons provides an icon-to-file mapping for Chrome that is used in various situations. These icons should be square to ensure correct displaying, and you should always provide at least an x16, x48, and x128 icon. You can read more about the icons here.

browser_action, and its alternative, page_action, are two possible ways to include a popup in your extension. Browser actions are always available in the browser, but Page actions are set to only be available on certain pages. We are going to make our extension available no matter what the current page is, and we will therefore let it stay as browser_action.

default_icon is used as your extension's clickable icon to the right of the address bar, and default_popup is rendered when the icon is clicked. As we mentioned earlier, we will be mounting our React code to this popup.

background lets us specify what scripts should be run in the background, and if they should be persistent or not. When the persistent flag is set to false, the script is loaded when needed, and unloaded when it goes idle.

Note that we have specified background.js, and not background.ts. This is because background.ts will be compiled to JavaScript code before it is packaged together with the rest of the build.

content_scripts lets us specify the scripts that should be able to access the given webpages, and their context. matches specifies which websites these scripts should have access to, and currently, this is set to every page. You can read more about these Match Patterns here. Similar to how we defined the background scripts, we define the JavaScript code to be injected in the by the js key. Note content_scripts is an array of objects, which means that we could inject different scripts based on the URL matches.

Now that we have looked at the public directory, we can have a look at the actual source code located in src.

src

As with most React projects, we have an App.tsx and App.css file. Instead of index.tsx and index.css, we have popup.tsx and popup.css, which will be mounting the React code (App.tsx) to public/popup.html. background.ts is the script that will be compiled to background.js, and content.ts will be compiled to content.js, and used according to our manifest.json file.

Creating a popup

Let's get started developing this extension!

Our first step will be to build the project and load it into Chrome. We can do that by running the build command.

This creates a directory named dist. dist will contain everything from public and the compiled and bundled code.

To add the extension to Chrome

Open Chrome.

Navigate to chrome://extensions.

Enable Developer mode.

Click Load unpacked.

Select your project's dist directory.

Voila! You should now be able to find your extension in Chrome!

We can now change some of the content of App.tsx, rebuild it, and then open the popup again. You should now be able to see your changes without having to reload the app, because the popup is loaded from your targeted dist directory every time it is opened.

Note that you have to reload the app if any of the metadata, content scripts, or background scripts are changed.

If we don't want to build manually, we can use npm start to rebuild our project every time a file is changed!

Creating a content script

Now that we have our popup ready, it's time to add a content script to make our browser ready for Christmas!

Our current content script does only contain a console.log, so let's make sure we can find that print!

Open Chrome.

Open the Console (Mac: Opt+Cmd+J, Windows/Linux: Shift+Ctrl+J).

Navigate to any website.

You should see the text printed in the Console.

Let's add some simple HTML to the site! Since we have access to the context of the webpage, we can use default JavaScript to add more HTML, change the styling, and so on. Let's add a title for testing purposes!

In this script, we are creating a new h1 element and adding it as the HTML body's first child.

Rebuild and reload the project, refresh the web page, and have a look at the result!

Now, this header is not very christmassy, let's add some snowflakes. We are going to use @pajasevi's CSSSnowflakes as a starting point.

We'll start by recreating the HTML.

The result should be something like this: 

Now we have to add some styling. Let's create a CSS file named content.css and add @pajasevi's styling.

To make sure the CSS is loaded, add an import statement at the beginning of the content.ts file. Rebuild the project, reload the extension in Chrome, and refresh the web page.

It should now be snowing in your browser!

This is great and all, but you might want to be able to disable the effect at some point. Let's add some functionality to control the browser weather ❄️.

Communication between the components

We plan to create a button in the popup which enables us to toggle the snow. Since every component (popup, content scrip, and background script) is isolated, we have to use Chrome's communication API to be able to send a message between the components. We want our background script to function as a browser wide state, and therefore all the communication should go through it.

Communication between popup and background script

We will start by listening to messages from our background script.

Now we need to create a button in our popup to send a message to the background script.

Now, this button is only cosmetic, and the only thing it does is toggle between our local snowing state. Let's make it send a message to the background script! We will change the onClick function to make it send a message.

To be able to see the background's print, we have to open its console. We can do that by navigating to our extension on chrome://extensions and clicking the Inspect views background page-button.

Great! We can now communicate from the popup to the background. Since the popup's state is cleared every time it is closed, we should ask the background whether it is snowing or not. For this, we will define some types that will be used for all the communication.

We can update our background to take different actions depending on the received message type.

To make sure the popup is up to date, it will ask for the snow status when it is mounted ("REQ_SNOW_STATUS"). When it wants to toggle the snow when pressed, it sends a "TOGGLE_SNOW" message and the snowing state.

We have to specify our use of chrome.storage in manifest.json. We do that by specifying it in our permission array. There are several other parts of the Chrome API that requires permission specification, and you can read more about these here.

We should now be able to see the button's state changing when pressed - even though we removed our setSnowing in the onClick function. The popup will send the request to the background script, the background script will update its snowing variable and send the updated status back. The popup will then update its value when a "SNOW_STATUS" message is received.

Note that it doesn't affect the snow. This is because we haven't added communication between the background script and the content script.

Communication between background script and content script

To be able to actually toggle the snow, the content script has to add a listener, just like the popup.

It is just the same kind of flow as the popup; request the snow status and listen for responses. We only care about "SNOW_STATUS". We want to add the snowflakes container to the DOM, only if the message status is snowing and our local status is not snowing. This is to make sure that we don't try to add it after it already has been added.

There is however a difference in how you communicate with the content injections compared to the popups. chrome.runtime.sendMessage can be used to pass messages to popups and background scripts, and chrome.tabs.sendMessage can be used to pass messages to content scripts. chrome.tabs.sendMessage requires the id of a specified tab. We can get tabs by running a query with different query parameters. Some query parameters could be if the tab is active, muted, and so on. We want to send this status message to every tab, and we will therefore pass an empty object as our query parameter. You can read more about the query here.

You should now be able to toggle the snow with the popup button! Remember that you have to reload the extension and reload each page before the changes are applied!

Where to go from here

This was only a quick introduction to how you can get started developing Chrome Extensions with React and TypeScript. Have a look at https://developer.chrome.com/extensions for more information and samples.

If you develop an extension of your own, you can of course also share it on the Chrome Web Store. You can actually find this extension there as well!

You can also find the complete project on GitHub. ❄️

Creating a Chrome Extension with React and TypeScript

I first heard about using Kubernetes for Internet of Things (IoT) and edge computing less than a year ago. I was pretty new to Kubernetes, and didn't know a lot about IoT. So it seemed like a big pile of buzzwords. And even if it seems like a lot of buzzwords to you, you should still consider Kubernetes when deciding how to manage your IoT and edge applications. In this article I will discuss some of the features and frameworks that are especially important when running Kubernetes on the edge.

First of all, let's clear up some misconceptions. At least my misconceptions from before I got into IoT. I had the idea that edge computing and IoT were the same. It turns out they're not.

IoT is all about connecting physical devices that senses and interacts with their environment to the cloud. Edge computing is bringing computing resources closer to the end users (and IoT devices) that connect. Edge computing doesn't have to involve physical devices, but can merely be a server located closer to the end users. For instance, Content Delivery Networks brings storage of content closer to end users to save bandwidth and reduce latency.

Another misconception I had, was that Kubernetes needed too much resources to run on smaller devices. But I can actually run Kubernetes on the Raspberry Pi that sits on my shelf collecting dust. k3s makes it possible to run Kubernetes clusters on everything from small devices to powerful VMs with your favorite cloud provider. How? It's opinionated and removed a lot of cruft you don't really need, and is packaged as a single binary that is less than 40MB.

We'll look at three concrete use cases, and look at different features of Kubernetes that might be useful.

Industrial IoT

Industrial IoT deployments can have millions of IoT devices. The devices usually doesn't have a lot of computing resources, and can't act as nodes in a Kubernetes cluster. However, they send the collected data to IoT gateways (also known as hubs or bridges), that often can.

IoT gateways can be nodes in a cluster, running k3s or a lightweight KubeEdge agent. Either in your main cluster, or in a local cluster on the edge. The latter is especially useful if network connectivity at the edge location is poor.

Kubernetes provides pod priority and quality of service classes that should be used to ensure the critical workloads can't be pre-empted by another workload consuming too much resources. Using these features ensure that workloads aren't killed willy-nilly, but according to some set priority. And, yes, workloads will be killed when you're running out of memory in your constrained edge environment.

Edge applications

Applications requiring low latency or a lot of bandwidth are typical candidates for edge deployments. Online streaming services, communication applications, and gaming servers are some examples that benefit from edge deployments, reducing latency and network contention.

Priority and quality of service features help schedule important workloads in this use case too. For instance, video calls must have higher priority than chat messages. Also, NetworkPolicy and the more experimental traffic shaping plugin can between them control both how a pod is allowed to communicate with others, and how much bandwidth it's allowed to consume.

Mixed and hybrid clusters

Sometimes parts of you applications can't run in a public cloud, due to compliance or special hardware requirements. Or, maybe you have some nodes in your public cloud with powerful GPUs? Kubernetes can be configured to run applications on specific nodes, or on nodes that have, e.g., GPU resources available.

There's no silver bullet

Using Kubernetes on the edge provides almost all your favorite features you're using in your centralized cloud. You can manage deployments using GitOps, have your favorite observability stack and use the same policies. However, Kubernetes can't solve scaling issues if the underlying platform on the edge doesn't support it. Furthermore, if (when!) you have to manage the hardware and operating systems your edge applications run on, you have a lot of security threats that Kubernetes can't handle alone.

If you're interested in using Kubernetes for edge deployments check out this talk from the Kubernetes IoT Edge Working Group. The working group has also published a whitepaper that discusses the edge security challenges.

Edge Computing with Kubernetes

Jeg dristet meg til å sende ut et skjema for å ta en liten jule-temp på avdelingen. Det førte til denne luken som deler erfaring fra til sammen 6560 dager(49200 timer) med designere på hjemmekontor. Det er mye hjemmekontor det, på godt og vondt. Her handler det mest om det som var godt!

Obs! Dette er en luke laget for å skrolle seg gjennom og kose seg med hva folk har delt. Så ikke hegn deg opp i at det står mange minutter!

To spørsmål som kommer til å definere 2020?

Jeg tror det er to spørsmål som kommer til å definere 2020 og da ser jeg bort i fra “Når kommer vaksinen?”. Jeg tenker nemlig på "Hvilken videotjeneste synes du er best?" og "Har du kommet deg over på Figma?". Og her kommer svaret.



Hvilken videotjeneste synes du er best?

Zoom går av med seieren, men her er kakediagrammet gankse fargerikt!



Hvilket tegneprogram bruker du mest?

 Med 68,2% som bruker Figma mest så er vi på god vei når vi nå skal starte det nye året.



Har vi lært noe da?

Og alle skriker et rungende JA!



Dette er hva folk deler at de har lært i år 😍:



Jeg har lært meg å tegne, sånn ish hvertfall.



Har lært å brukerteste remote, og Adobe XD, virkelig jobbe agilt



Jobbe med designsystem i Figma! Og kommunikasjon/struktur på hjemmekontoret via Discord, Miro og Slack



Figma, Observasjon og alt i design upskill



Gjennomføring av remote brukertester



Visuelt design, lage informasjonsarkitektur, jobbe i team med kun andre designere...



Jeg har lært meg å snakke foran flere folk, å ta "kontroll" i møter og tørr nå å ringe folk spontant!



Lært meg Figma. Ikke direkte lært, men fått igjen oppleve energien og engasjementet ekte brukerintervjuer gir. Mer, mer av det! Tall og metrikker er viktig - men ikke alene!



Figma, ulike måter å mappe, Business Model Canvas, bruke hypotesekort



Lært meg de nye funksjonalitetene i Figma



Kontinuerlig design



Remote fasilitering av workshops, med verktøy som Miro. Brukerintervju via video. Onboarding av nye personer remote. Å sette sammen team og opprette produktteam.



Har lært meg Figma, Miro og å slappe av under videomøter



Lært den del mer Figma og kontinuerlige leveranser/team prosess.



Har lært mest om prosess og møtevirksomhet. Fått innblikk i utfordringer knyttet til å styre fremdriften i store komplekse prosjekter der det finnes mange parallelle prosesser som nødvendigvis ikke er koblet til hverandre eller samkjørte selv om det er mange avhegngiheter mellom dem.



Gjennomføre brukertester digitalt. Lage fyrstekake.



Jeg har blitt bedre på animasjon. Og lært mer om prosesser som treffer UX



Jeg har lært mye om å drive prosesser.



Jeg har lært Figma



Jeg har lært meg å skisse digitalt live fremfor masse folk på videokonferanse



Jeg har lært hvor viktig det er å jobbe tverrfaglig når man jobber med svært komplekse problemstillinger



Jeg har lært å jobbe med jurister



Jeg har lært å svelge enorme UX kameler fordi det har hastet med å få ting ut



Jeg har lært å holde gode digitale workshops



Jeg har lært at mange folk er litt mindre teknisk anlagte enn den jevne IT-konsulent Bruke frames og components i Figma, Holde workshop i Miro, Bruke Github, Sjekke PR-er, Fikse små styling endringer i koden, Lærte meg bitte litt p5.js



Jeg har lært meg hvor viktig det er med pauser. Jeg har lært hvor mye konsentrasjon som kreves av videomøte.



Jeg har lært meg å sette ekstra stor pris på gode kollegaer, og bra teamsamhold.



Jeg har lært meg å fasilitere digital workshop, shortcuts i Figma, jobbe med kunde.



Jeg har lært meg Figma, prototyping i Figma, å gjennomføre digitale brukertester, gjennomføre brukertest i Teston.



Jeg har blitt litt bedre i illustrator, og litt flinkere til å snakke med skumle, voksne folk i Bekk. Også har jeg tenkt å lære mer om figma!



Digitale workshops, telefonintervjuer, optimize (verktøy for A/B-testing)



Jeg har lært mye om merkevarebygging, om prosjektledelse og prioritering av oppgaver



Å tegne i Procreate på iPad



Figma og Favro



Prosjektledelse. Noen nye verktøy bedre - miro, figma



Brukertesting via Teams fungerer overraskende godt. 2. Vi er 2020 og det finnes fremdeles ikke gode verktøy for prototyping av interaktive skjema. 3. Noe så nerdete som lydforsinkelse (latency) er grunnen til at videomøter alltid er litt knotete.



lage varianter av komponenter i Figma, bruke GitHub, jobbe enda tettere med utviklere om design



Jeg har læst meg å bruke Teston!



Designsystemer, Prosjektledelse, Teamkultur, Typescript, Git



Bedre på å holde workshops remote



Lært å holde digitale workshops, hvordan jobbe aktivt med måling og eksperimenter, mer om OKR



Har lært meg Figma, og hvor bra Miro har fungert for å kartlegge flyt og diskutere flyt, ha workshops. Hvor mye tid man sparer på å ha brukertesting og -intervju via teams, selv om det byr på en del utfordringer.





Hvilke tips ville du gitt deg selv som designer hvis du kunne hoppe et år tilbake i tid?



Vær raus med deg selv.



Test mer I prod med god feedback loop. Funker sykt bra :)



Involvere de andre (over video) enda mer tidlig i konseptutviklingen, når det blir så store distanser remote



Stole på intuisjonen og tørre å stoppe opp og stille spørsmål



Stol på deg selv, du kan mere enn du tror!



Husk på at ikke alt er ditt ansvar



Samarbeid med utviklere er helt utrolig viktig og at politikk i organisasjonen+lover og regler betyr mye når man designer



Ta deg tid til jobben din: brukerinnsikt og brukerforståelse.



Legg inn en ekstra innsats i å sosialisere med teamet i år!



Bli god venn med Miro



Remote-ifisering av fysisk arbeidsprosess fungerer dårlig. Når man jobbe remote må man jobbe på en annen måte enn før. Et godt eksempel er at man ikke kan erstatte fysiske møter med videomøter en-til-en. Å ha 4-5 timer møter noen dager fungerer helt fint når man jobber sammen fysisk, men man blir helt utslitt dersom det er videomøter. Mye av dette handler om at man ikke får en naturlig diskusjonsflyt digitalt, alt må fasiliteres mye mer. Det krever mye mer mental kapasitet. Generelt krever remote-arbeid mer selvdisiplin og struktur for å fungere. Fysiske workshops med folk man kjenner krever null forarbeid, en tavle og en tusj er nok. Digitale workshops krever mer forarbeid. Deltakere må være trygg i verktøyet man bruker, og man må gjerne ha satt opp et Miro-board med informasjon, figurer etc. på forhånd.



Praten med kaffemaskinen forsvinner remote. Som designkonsulent er det et problem, fordi man kan ikke bygge nettverk "tilfeldig". Min strategi hos kunder er vanligvis å "tilfeldigvis" snakke med ledere og personer i matkposisjoner, bli kjent med dem — slik at jeg kan bruke denne relasjonen for å oppnå endring hos kunden. En remote versjon av dette, er å spørre om å bli med i møter man vanligvis ikke ville blitt med i fysisk. Digitale møterom har uendelig kapasitet. Å snike seg inn i møter kan være en fin måte å bygge nettverk hos kunder.



Å opprettholde et sosialt miljø remote, må skje mer bevisst. Lønningspils på video fungerer dårlig, men å sette opp møter med små gjenger for å bare prate fungerer veldig fint. Det kan føles "ulovlig" å bare sitte sammen og prate i en time. Men når man jobber fysisk har man mange småprater i løpet av en dag. Pratene få frem ulmende problemer, skape motivasjon og bygge tillitt til kollegaer. Superviktig.



Det finnes også positive sider. Særlig om man bruker gode digitale verktøy, som Figma, Miro, Notion, Slack og Whereby.



«Slik holder du engasjerende workshoper med Miro og distribuerte deltakere»



Ta et seg tilbake og se på helheten i prosjektet. Vær mer strukturert i måten du håndterer motgang.



chill litt



Start utendørsbading tidligere og sett av tid til å lære noe nytt innenfor et felt du brenner for!



kjøp deg et tegnebrett så du kan få opp "digital whiteboard" i møter. og fortsette sånn du gjør når du er i rom med tavler.



Jeg vet ikke



Spør om det du lurer på, selv om du tenker at det er et dumt spørsmål. Det er garantert mange som lurer på det samme.



Bli såpass trygg på et tegneverktøy at du kan skisse live fremfor teamet ditt. Det gjør det mye lettere å fasilitere diskusjoner som handler om komplekse problemstillinger. Skissing er ikke noe designerne gjør på bakrommet



Planlegge for masteren mtp. korona. Gå for et enklere konsept, og bruk lenger tid på å utforske ved å gjennomføre workshop, selv om det blir digitalt. Ikke alt trenger å være perfekt. "Perfect is the enemy of good". Det samme gjelder når du begynner i jobb. Det kan være lurt, selv om så mye er digitalt, å skisse på papir eller i et tegneprogram som ikke er så high-fidelity.



Ikke legg opp til omorganiserings-workshopper flere dager og uker på rad over video.



Raskt lage en rigg for å kunne brukerteste remote, så det var lett å ta frem og bruke i løpet av året.



Sett opp hjemmekontoret med en gang, du blir sittende der enn stund.



Brukertesting er ikke skummelt, folk flest er veldig hyggelig og interesserte testpersoner!



Prøv å bli med på flere webinar, digitale frokoster og se deg rundt hva som skjer i designmiljøet!



Bli god på å dele håndtegnede skisser over skjerm, og snakk mer en til en med kollegaene dine enn du tror du trenger. Bruk mye tid til å forstå og enda mer tid på å visualisere forståelsen, så du kan dele den videre. Man må ikke møte brukere for å lære om dem, snakk med dem over telefonen, det funker bedre enn du tror. Pauser sammen er kritisk for å opprette sosial trygghet i et team.



Ta heller en avklarings-prat for mye enn for lite. Spesielt på hjemmekontor må man senke terskelen enda mer for å ringe de andre på teamet. Og - samjobbing i Figma er GULL for avklaringer og produktivitet!



Bruk innetiden til noe kreativt som gir et avbrekk i hverdagen. Prøv å lage noe du ikke har prøvd før, enten det er å strikke, male, tegne eller noe helt annet.



Sparre med/involvere flere personer i arbeidet, også de du ikke tenker er de som kan sitte på inspill/svar.



Kjøp en god mikrofon til videomøter nå, før de blir utsolgt.



team opp med utviklerne på en måte som gjøre at dere kan jobbe sammen om design.



Bruk tid på å lære deg hvordan man lager animasjoner og transisjoner for å virkelig kunne vise frem hvordan du har tenkt at elementer skal se ut og oppføre seg. Det er mye enklere å bare kunne spille dette av i en video/prototype enn å prøve å forklare det. I alle fall over video.



Eksperimentere litt mer med hvordan og hvor jeg jobber kanskje..



Mitt heteste designtips for livet: Gå all in på Tesla-aksjer med alle penger du kan oppdrive 1. april!!!!!!!



Finn deg en ny hobby som du kan holde på med hjemme.



Kjøp inn design-bøker du vil lese! Det kommer til å bli mye skjermtid i 2020, og du kommer til å ville ha avbrekk uten skjerm.



Ha et mer åpent forhold til hvordan man har det og hvilke behov man har. Prioriter de oppgavene som gir deg den læringen og mestring du ønsker, og hvor du kjenner på at dette kunne jeg ha gjort i times hvis, fordi det er gøy!





Hvis du trenger en Slack-kanal (litt internt for bekk da), blogg eller nettside så kommer anbefalingene her:



https://www.instagram.com/collectcartoons/



Alltid: UX collective newsletter



Ikke fag, men podcasten "Jeg kan ingenting om vin" er helt super for noobs som meg.



YT-kanalen til Figma!



Slack -> pelsdirektoratet😍



https://eyeondesign.aiga.org/https://abduzeedo.com/



Vil anbefale instagramkontoen "people_dancing_to_dansband". Værsågod!



UX Norge-slacken er superkul!



For Bekkere: slack-kanalen "ekte". For alle: instagramkontoen: norskehemmeligheter



Slack -> planteglede



Side hvor det legges ut bilder/videoer av ting som er utrolig godt gjennomført, men har et utrolig dårlig konsept/idé/smak. Awful taste but great execution: reddit.com/r/ATBGE



Brukbart podcasten er både lærerik og morsom



Slacken UX-Norge og twitterkontoen @SWatercolour



Slack -> ekte



Daily dose of internet på Youtube. Ev. Ghana says goodbye på reddit.



Min absolutt favorittnettside er vår alles kjære fotograf, Rune Johansen: http://www.runejohansen.com/



podcasten til anita krohn traaseth! "godt nok for de svina"



https://dribbble.com/



Podcasten Utestemmer fra DNT



Nyhetsbrevet Dense Discovery. Eneste nyehetsbrevet jeg abonnerer på. Inneholder den perfekte mengde av inspirasjon, tips til nye verktøy, tanker fra smarte folk, artikkeltips etc.



Slack-kanalen #ekte, Podcasten Brukbart, Boken Ruined by Design, og Boken Atomic Habits



vinmonopolets podcast



https://danskdesigncenter.dk/da/vaerktoejskassen?fbclid=IwAR0Hkghjwv_C8smpNlFQ1pOEZ-KTGn-6c3iljRn0qa-8P6TID1ZJBpZx82o



Slack -> ekte <3



https://growth.design/case-studies/ Disse artiklene. De er gøye og lettleste. Anbefaler også julespillelisten til Interactive, og slack-kanalene #ekte og #pelsedirektoratet



Love on the spectrum, Netflix-serie med en utrolig mengde hjertevarme



Slackkanalen «Ekte» synes jeg er så fin og UX collective newsletter (epost) kan man lære mye av!



https://colorhunt.co/ er ganske gull når man skal lage illustrasjoner i procreat, men ikke synes det er så lette å sette sammen farger selv.



Podcasten til inVision: Design Better Podcast



An Equal Music, av Vikram Seth



Tut og mediekjør podcast



kildesorteringioslo på Instagram



https://www.thisiscolossal.com/



UX Norge sin slack er jo fin å være en del av, ellers liker jeg å besøke denne siden når jeg har tid https://sidebar.io/



Alt om selvfølelsen. Vi alle trenger en god selvutvikling, ha fokus på en selv, slik at man har det bra med seg selv.





Og til slutt noe random som folk hadde lyst til å dele:



https://gfx.nrk.no/vqfXhsgyWZvEljSMdT1lcQLTVQQJDHHfdA_Lfx7GmoFw.jpg



Den beste sushien i Oslo er Mr. Fish på Torshov! Anbefales varmt.



Noe av det viktigste du gjør som designer er å påvirke at alle beslutningstagere får frem empatien for brukerne!



https://www.reddit.com/r/AnimalsBeingDerps/comments/kaikbb/road_trippin_with_huskies_be_like/?utm_source=share&utm_medium=ios_app&utm_name=iossmf



Practicalsxd.slack.com



Podcast: Rekommandert med Christoffer Schau - er herlig blanding av de underligste temaer



...jeg burde bli flinkere til å "booke inn" frokost og lunsj i kalenderen min. så jeg får spist gjennom dagen...!



Let me be your Father Christmas tonight, toonight, klippety-klopp, ding-dong, ding-dong marrily on high, feeels all right



Jeg tror kanskje mange har blitt bedre designere av denne perioden vi har vært gjennom.



Push The Button og Drawful er også morsomme spill å spille med team.



Nå er det snø i marka 😁



Ola er kul!



Shit, jeg er takknemlig for alle gode kollegas og at jeg har Bekk som arbeidsgiver under dette rare året 🙌



Treat yo self!



Blekkspruten er et utrolig fascinerende dyr



I prosjektet mitt så jobber vi med en av animatørene som laget The Lion King og Star Wars. Det er ganske kult.



På den neste månelandingen (i 2024 🤞) er det med det som skal bli den første kvinnen på månen 👏👩‍🚀



Enten går det bra, eller så går det over.



Corona gir deg mulighet til å utfordre deg selv om hva gøy man gjør i hverdagen! Ta den, og gjør nye gøy og nytt! :D

Litt av hvert fra 2020

Much of Elm's power stems from the fact that most things are just functions. So how do operators fit in?

Imagine that we have a list of first names (like Stanly, Paul and so forth), and another list of last names (Henderson, Hansen, Copperfield etc.). Also imagine that we have been given a task to come up with a set of full names, to be used as an example for a form we're making. We could solve the problem like so:

This works, but the anonymous function we've made takes up a surprisingly large amount of screen real estate considering how little it actually does.

We could try to improve the situation by turning this into a proper function:

This works, but creating a function which just applies the ++ operator feels like more work than should be necessary.

The good news is that it is, in fact, uneccessary. Operators are functions, too.

Operators are special as they're the only functions which can be used with infix notation. That means its arguments are placed on both sides of the function. However, you can turn an operator back into a "regular" function by wrapping it with parenthesees, like this:

As long as they're wrapped by parenthesees, operators work like any other function in Elm. Which means we could write the original exampleNames implementation like so:

You might have noticed that we have a bug here. Normally, a full name will have its first and last name seperated by whitespace, but our current implementation will join the first and last name without any space between them.

We could solve this by prefixing all last names with a single space, and then combine first names and last names together. Since operators are just functions, this allows us to make use of partial application:

Summary

While operators work differently from regular functions by default, you can make them work like any regular function by wrapping them in parentheses. Done correctly, this can make your code more succinct and easier to read.

Operators are functions, too

Provided I didn't miscount (I am not the Count von Count, so it's quite possible), there are 46 operators in JavaScript which are available in all modern web browsers. Many of them are inevitable (e.g. arithmetical and logical operators), while others are more uncommon. But the list doesn't end there and the family of operators is still growing. Let's have a brief look at the latest additions, and new operators which are just around the corner!

Optional Chaining Operator

Having been around for quite some time as a Babel plugin, the optional chaining operator was finally included in this year's ECMAScript specification, ES2020. Consider the following example:

What happens when we run this code? Since the address property isn't defined in the child object, we get an error saying that we can't read the property street from undefined.

We often prefer that childAddress is undefined rather than causing an error. One possible approach to this problem is to check whether child.address is nullish (null or undefined). We can use a simple ternary operator to achieve this:

Alternatively, we could use the more elegant logical AND operator:

The downside of this is that these conditional expressions can become quite long and repetitive if we chain many properties together. This is where the optional chaining operator (?..) comes into play:

Instead of causing an error when a property is null or undefined, the expression returns undefined. Yay, code that is both shorter and easier to read - we like that!

Nullish Coalescing Operator

Just like optional chaining, the nullish coalescing operator (quite a tongue twister) was one of the features introduced with ES2020. Again, let's look at an example:

This time, the naughty property is undefined. How can we make it default to false in this case? Obviously, we can't just assume that the child was naughty this year! Well, we can use the logical OR operator (||):

This works in the above case, but we must take a certain characteristic into account: the logical OR operator returns the right operand if the left operand is falsy (this includes undefined and null, but also 0 and ''). Let's add another property to the child object, age. Since also newborns should get their presents, we have to allow the falsy value '0'. This is where the nullish coalescing operator (??) comes to the rescue:

This operator only returns the right operand if the left operand is nullish, and returns the left operand otherwise. Therefore, children with an age of zero don't default to -1 in the above example.

What's Yet to Come

Those of you who have been following this Christmas calendar since December 1st have already read about the logical assignment operator a couple of days ago. You haven't? Then have a look at the article about this and other new features in ES2021!

This is however not the last operator to be added. We were writing about the pipeline operator exactly two years ago while it was still a stage 1 proposal. And guess what, it still is! In the JavaScript world, everything takes its time. Someday, though, it will make your life as a JavaScript developer a little easier.

This article summarized the two most recent of the 46 operators in Javascript. If you want to learn more about the remaining 44, you should take a look at this amazing Operator Lookup.

Smooth Operators

Ransomware is extremely costly and difficult to get rid of, and once your files are encrypted you may have lost that data permanently. Giving in to the ransom demand is expensive, gives no guarantee that your data will be restored, and only encourages cybercriminals to keep attacking and extorting money from individuals and companies alike. Clearly, the best way to deal with the increased rise in ransomware attacks is to implement solid preventative measures to avoid getting infected in the first place. And, if the worst should happen and all your files do get encrypted, to have alternative ways of restoring your data.

This article will go over some good measures to reduce the risk of getting ransomware on your computer, as well as some advice what to do if you do get infected. Ransomware was covered in our previous post, so check it out for more details about what ransomware is, how it works, and the most common ways your computer gets infected.

The main way ransomware gets installed on your computer is through phishing, a form of social engineering where an individual is tricked into installing the malware. There are several things to look out for:

Social engineering – reduce the people factor

Do not click on any links that are not verified. These can come through a seemingly legit email or website. Downloads will usually start as soon as you click on a link, so use extra caution, and if in doubt do not click on it.

Do not open email attachments from untrusted sources. Also, be aware that some phishing attacks are highly specialized and could be adapted for you specifically or the company you work in (so-called spear phishing). One tip is to use the show file extensions feature to see if any attachments are executable, e.g. ending in .bat, .sh, .dmg, or .exe. If so, do not open it.

If an colleague sends a genuine email that looks like phishing, let them know so that the culture for writing good a proper emails will improve in your company.

Use caution when downloading from websites. Browsers will give an indication if the site is verified, usually in the form of a lock symbol or a shield. However, even verified websites may have security vulnerabilities or may even be phishing sites, so it is still necessary to exercise caution. Also, make sure the site uses HTTPS instead of HTTP to ensure secure encryption of requests and responses.

Be careful not to share personal information. Criminals may use this information to send personalized emails specifically to you, increasing the likelihood of doing what they ask of you.

For companies, provide training for employees so that they can recognize malicious emails and phishing attempts more easily.

Ransomware can also exploit technological vulnerabilities. There are a few dos and don’ts to make sure your technological routines are up to scratch.

Limit technological vulnerabilities

Make sure you scan all your emails and attachments using content scanning and filtering on your mail servers. This will reduce the chance of a malicious email ending up in your inbox.

Outdated versions on browsers, software, and operating systems may have vulnerabilities that can be exploited, so make sure to always update to the latest versions when possible.

Use good antivirus software that also include ransomware, and a firewall. There are several good ones that will block infected files and prevent your computer from being encrypted, but only use from reputable sources as there are also a lot of fake antivirus software out there.

When connecting to the Internet from a public WIFI, make sure you use a VPN.

Only give admin privileges when necessary. Restricted access for normal users may reduce the spread of the malware if one employee’s computer is attacked by ransomware.

Backup your data!

This cannot be stressed enough and may be the most important measure you do. Having a good backup system is key to protect yourself from losing your data. Instead of paying the ransom, it is better to reinstall everything from good and recent backups, so make sure you have a backup on an external hard drive or in the cloud so that the backup data doesn’t get infected along with your computer.

Worst case scenario – all my files are encrypted

First off, make sure it is actual ransomware and not just an imitation (such as screen-locking ransomware). The latter may be more easily removed, and is often characterized by trying to shame the victim (eg having been caught looking at adult websites) and pretending to from a source such as the FBI or the police. If you can read most of your files and navigate through your computers system, it is most likely a fake.

However, if the ransomware is authentic there are three main paths you could chose:

Paying the ransom

First off, it is not recommended to pay the ransom. This will only encourage this type of attack, and there is no guarantee that you will receive the decryption key. Some may even ask for the ransom one more time before they give what you payed for.

That being said, some have chosen to recover the data by paying the fee, especially in the case of medical records or where there is no good backup to reinstall your files from. This is not an easy issue, and the pros and cons can be discussed at length. Again, take good backups of your data, and you will not have to be faced with this dilemma should you be so unfortunate to have all your files encrypted.

Restoring your system from backups

Disconnect your infected computer or system from the Internet and other devices, and use an antivirus to remove the ransomware. Note, this will not recover your files, but should remove the virus from your system. Check if there are any deleted files you might recover. Also, finding the exact type of ransomware strain might help you decrypt the files (though not in most cases). There are some online tools like ID Ransomware and Crypto Sheriff that will help you with this. There are also some decryption tools available for some strains, so checkout No More Ransom if a decryption key exist for a specific strain.

If decryption is not possible, then restore the files from your backups. The best is to wipe your computer or system completely, reinstall the operating system, and then restore the files to make sure all traces of the virus is removed. Make sure your backup is not infected before you start. This is the fastest and cheapest way of getting your systems up and running again.

Restore your system and lose you data

This may not be optimal, but if your data is not very important or something you can’t replace, then simply choosing to reinstall you affected system may be a good solution.

Ransomware – How to stay one step ahead of the cybercriminals

Det er vanskelig å finne fram i mylderet av ordninger for oppstartsselskaper. Hva er for eksempel en inkubator?

Jens Andreas Huseby prater med Bjarne Tvete, Partner og CEO i Aggrator - Inkubator Ås

12-Dec

Today's posts