Det var en mystisk stand på sommer-fagdagen som tilsynelatende ønsket å A/B-teste en ny ansattliste-app... Men hva var det egentlig som ble testet? Vi snakker litt om hypotesetesting, design av eksperimenter og er så vidt innom signifikans.

Hva skjedde på fagdagen?

Have you never been able to make that menu appear in the awesome way you've always wanted? Perhaps you've got lots of experience making things move with CSS animations, but you want to learn how (or if) a modern animations library could make your life easier? Or perhaps you just want to have fun and see how easy it is to animate elements in React using Framer Motion? Then read on! This article won't give you all the answers, but hopefully it will help you getting started.

Framer Motion is a popular animations library for React that is simple enough to get you started quickly with implementing actual animations in your app, yet has enough features and possibilities to support more advanced use-cases. The library has a "motion component" for each HTML-element that exists, and lets you implement animations by adding various Framer-specific props to the components to get things like drag, hover, transition effects, and more. This article will present code examples of some of the things you can do with Framer Motion.

A simple example is given below, where a div styled as a simple square is replaced by a motion.div with two props: whileHover and whileTap. These props both take objects that can contain various properties depending on the desired behaviour of the element. In the example, a single scale property is used to control the size of the element.

Animating transitions on elements is also fairly simple using the animate-prop, as shown in the example below. Again, the prop takes an object (all of them do), which in the example contains two properties: x and rotate. Here, x is an array containing 5 values, each representing a single keyframe in the animation. There are several other properties supported by the animate-prop, such as y, scale, properties for setting the acceleration of the element, opacity etc. The second prop, transition, is used to configure the animation itself. In this case, it is used to specify the duration of the animation (1.5 seconds) and how many times the animation should run (infinitely).

I mentioned drag, so let's do a drag example. Again, we use the motion component of a div-element, and adding drag to an object is as easy as adding the drag prop to the element! In our example, the drag is restricted to the horizontal direction, which is achieved by setting the property value to "x". We can control how far we are allowed to drag the element by providing the dragConstrains prop.

A motion element uses a MotionValue to track its state and velocity, and while it is created automatically by default, we can create one using a useMotionValue-hook and pass it to a motion element explicitly. This way, we have direct access to the state of the element. This is done in the following example, where the MotionValue sliderXVal is passed to the drag element by giving it the following prop: style={{x: sliderXVal}}. Now, we can access the actual value simply by calling sliderXVal.get(), and in the example we utilize this to animate another element based on the position of the drag element.

In the example, we also define a state which is updated to the current value of the MotionValue each time the MotionValue changes, using a useEffect-hook and the MotionValue's onChange-method, to be able to continuously trigger new renders for every update:

I started this article talking about animating a menu, so let's end the circle and finish off with a simple menu example! However, first we need to talk a bit about something Framer calls "variants".

Variants is a powerful feature in the Framer Motion API, which is basically an object that can contain multiple "animation states". Say you want to orchestrate animations in your app based on some criterias, actions from a user etc. Then you can define an animation state for each scenario and use variants to conditionally animate your motion element!

An example of a variant object is seen below. Here, we have declared two simple animation states, "open" and "hidden":

Variant objects needs to be passed to the variants-prop of a motion element. Simply doing this, while setting the animate-prop as either of the states in the variants object, would animate the element according to the values of the chosen state! This lets us set the animation state conditionally, for instance depending on whether a button is clicked or not. Such as hiding or displaying a menu, which is implemented in the very last example!

This was just a quick walkthrough of some of the possibilities you get with Framer Motion. If you want to learn more, I recommend taking a look at some of the examples in the documentation and start experimenting on your own!

Get started with animations in React

Once upon a time a there was a designer. The designer lived in a small city far in the north. One day the designer woke up to find white fluffy snow falling softly outside her window. The designer felt a tingling feeling in her tummy. December is here and soon Christmas will be here as well. “I need to write a letter to Santa with my wish list!”. She pulled out some pen and paper and started to write.

A few days later, a letter arrived at the North Pole. A little elf came running into Santa’s office with the letter. “What is this?” said Santa? “It’s a letter to you, sir”. Santa opened his letter with a little golden letter opener and started to read. A big smile spread across his face . “It’s a wish list! And I have a very special assignment for you!”. The Elf was stunned “Special assignment? For me?”. “Yes I want you to make an amazing spinner”. The little elf almost fell of his chair. “Santa, do you really think I can do it?”.

The little elf ran to the workshop and started to draw his solution. This really was a hard nut to crack. He wanted to make a round spinner chasing its tail. After a few hours of pulling his hair, he still had not figured it out.

First step is to make a SVG circle.

Next, he wanted to hide a part of the circle. He needed to ask for assistance from his dear friend Rudolf. He found Rudolf outside playing in the snow. When Rudolf saw the elf hanging with his head he said “What’s wrong little friend?”. The elf said: “Santa assigned me a very special task, but I can’t figure it out”. “Don’t worry friend, I will help you! What do you need?”. The elf explained the problem. “hmmm, that’s a tricky one…” said Rudolf, “… luckily I have the answer!”. The elf lit up! “Really?!”.

Well back in the workshop the elf stared at the circle once again. “Ok, so I need to use something called stroke-dasharray. But how does it work?” He went to the bookshelf to fetch a big and heavy book. The weight of it almost made him loose his balance. With a bang, he dropped the book on the table. “Stack overflow” it read on the front page. “Ok, hmmm, S for stroke-dasharray”

Stroke-dasharray is a way of adding dashes to a stroke. Given a value of, for example, 5 it will divide the stroke into dashes and gaps of equal length, 5.

If you provide stroke-dasharray with two values, for example 20 and 5, it will divide the line into dashed of 20px and gaps of 5px.

It becomes interesting when stroke-dasharray is provided with three values, say 20, 10 and 5. The first dash will have a length of 20, the first gap will have the length of 10 and the second dash will have the length of 5. Then it starts over, with the second gap of length 20, the third dash of length 10, and so on.

The elf stared at the thick book. “I need to make one big dash!”

First, let us calculate the circumference of the circle. We do that by calculating 2 * π * radius. Our circle has a radius of 40; this leaves us with 2 * 3.1416 * 40 ≈ 251. Giving the circle a stroke-dasharray of 251, therefore gives us a full circle. Giving stroke-dasharray two values where the sum is 251 will give it one dash. For example stroke-dasharray: 11 241and stroke-dasharray: 188 73.

“Awesome!” Cheered the elf.

Let’s animate it with some keyframes.

The spinner is finally coming together. The final touch is making it rotate. We do this by using translate: rotate(45deg);

For inspiration on other cool stuff you can make with stroke-dasharray check out the links below.

Stroke it and Dash it – A stroke-dasharray Christmas Tale 

This article will give you a brief introduction to the Kotlin when expression and how to use it.

If you're used to Java, you’re probably used to the switch statement:

In Kotlin we have the when statement – which can be described as switch on steroids. when can be used both as an expression and as a statement.

The first example is a basic when statement:

You can already see that it’s cleaner than the switch statement.

It's possible to specify ranges as well:

You can also check the type of the parameter with the is expression. Here you’ll also benefit from the smart cast in Kotlin, which means that the is keyword implicitly casts value to the given type.

In these examples we've seen the use of when as a statement. As mentioned earlier, when can also be used as an expression, as we can see in this example:

If the compiler can guarantee that when always returns a value there is no need for else:

You can even use when without an argument. When used without an argument it acts more like an if-else chain:

As you can see, the Kotlin when statement can be used in many different ways. Happy coding!

If Not Now, When?

So, you would like to be one of the cool security researchers that find vulnerabilities in the most used websites in the world, saving millions from the bad guys, and maybe make some cash along the way? Well, this is your lucky day! It's time to learn about bug bounties!

As you hopefully know, you can't just go to a random website and start poking around for a security hole. That would be akin to going around the neighborhood, checking the windows and doors of all the houses. At some point, someone will call the police, and with good reason. But the best way to find security problems is to actually test the site, so to make sure we are not arrested, we have to join a bug bounty.

A Bug bounty program is a program set up by the owners of a website or application to make it possible for developers to test the security of a site in a safe and legal way. By joining the program, and sticking to the rules, you can be sure that you are not exposing yourself to any legal risk, and that you won't do anything that could potentially harm the website or application you are testing. While all programs are different, there are some common traits:

Prerequisites: You may be asked to register with the service before starting tests. This might include creating a dedicated account for the testing, or simply clicking a button or sending an email.

Allowed systems/URLs: You will be given instructions on which part of the system you may test, and which are off limits. Some programs may provide a dedicated test environment for security testing, but it is actually most common to allow tests against the production environment.

No automated tools/DOS: Most programs forbid the use of automated security test programs. These have a nasty tendency to bombard a system with thousands of requests, and could effectively perform a denial of service attack. This is not very helpful.

Non-awarded vulnerabilities: Yes, there might actually be vulnerabilities you find that the sites are not interested in reports about. That might sound strange, but some attacks are either too far fetched, not really preventable (DDOS), or pose too small a risk.

Rules for disclosure: When you find a vulnerability, you will be asked to follow a procedure for reporting it. This will usually include a rule stating that you may not share your findings with others until the owner of the site approves of this (or a fixed time, typically 90 days has passed). You can read more about disclosure in our post on Responsible disclosure.

Reward: Make it rain! If you are lucky, and you are the first to find a vulnerability, you just might get paid! Some programs offer large monetary awards, while others give internet points or honor and glory.

Bug bounties may seem odd at first. Why would anyone invite hackers to their site? The rationale is that when website owners are open to receiving reports of security issues, and compensating the work of security researchers like yourself, people are more likely to actually report issues to them, rather than trying to sell the vulnerabilities to the highest bidder on the dark web.

Tips for getting started

I won't pretend that finding security holes will be easy, but the prospects are not as grim as one might think. While many of the sites that have serious bug bounty programs are large organisations with professional security teams (read: Facebook, Uber etc.), there have been some spectacularly "simple" bugs found in their bug bounty programs. Facebook had forgotten to check if the person requesting do delete a photo was indeed the owner of said photo, making it possible to delete any photo. If you knew the ID of an image, you could simply call the API to delete it. Uber on the other hand got a report of a fairly easy workaround to their surge pricing. Place your location pin outside the surge area, then change the address for pickup to an address in the surge area.

Neither of these are difficult bugs to find. They only require some creative thinking and simple testing to validate your theories. It's important to note that actually exploiting these vulnerabilities would be outside the rules of the bug bounties. You may have to set up a second facebook account and delete one of its photos, or order a single ride with Uber, in order to verify your finding, but after that, your next step should be to file your report.

A good way to start is to select one or two types of vulnerabilities you would like to focus on. Then, you systematically start going through the application. If you want to look for missing authorization checks of an API, start by mapping out all possible API calls, then attempt them one by one. You should probably have a notetaking app handy, as you will need to keep track of a lot of attempts.

To get started, you can look for sites that have bug bounties by going to HackerOne or BugCrowd. These are two of the biggest sites gathering bug bounties from different companies. You will find clear descriptions of the rules for each program, and instructions for how to report any findings.

Bug Bounty - The modern treasure hunt

These days everything can run in a container. It may be databases, continuous integration systems, esoteric hobby projects and even Windows. In this article I’ll shine a light on various tips and tools that might be helpful when packaging Java based applications for running in containers.

Tips

Runtime options

Depending on what version (and patch level) you are running, there are different JVM flags you’ll need to take into account. Support for reading memory limits from cgroups was introduced in Java 8u131, so that’s the minimum requirement. Check out this overview for possible flags you’ll need to set.

Layering

One common pattern is to have a base image (runtime environment, which can contain one or more layers itself), one layer for your dependencies and one layer for your application. By splitting and reusing layers, container images will be more effective in terms of disk space usage and bandwidth used.

Use a stable base image

This trick depends on your appetite for risk and stability but in general it’s safe to say that the more specific tag of a base image you use, the better.

Say that some-corp/java:latest is used, then you don’t know exactly what you’re gonna get, at least not in a month. Is it a JDK or a JRE? Which major version or patch level is in use? Which OS is in use? Sometimes, this is considered a feature to always be on the bleeding edge. A more conservative (and safer) alternative would be to pin the Java version and OS version if possible, e.g. some-corp/java-jre:12.0.2_10-jre-hotspot-bionic.

Use the cache

The Docker build cache helps – a lot. Having the base image already is present is the first step, but subsequent layers should be as idempotent as possible in order to speed up the build in general. This will also help CI systems that support build caching.

Application Class Data Sharing (AppCDS)

For reducing your application’s startup time, consider looking into AppCDS. This feature involves reading your application’s classes once and build up the internal data structure that the JVM will do every time it starts up your application. By doing this operation only once, you’ll save some startup time the next time your application starts.

Tools

Jib

In July of 2018 Google introduced a simpler way to build container images for Java based apps. The Jib project enables developers to produce container images with a minimum of effort, knowledge of best practices and overhead. Jib doesn’t have a dependency on the Docker daemon, so that also helps with improved security and a reduced set of complexity.

Images produced with Jib is based on their distroless base images and is automatically split up into multiple layers. With layer splitting, dependencies are contained in a separate layer and the application itself is contained in another. Applying this technique reduces the diffs between various versions of a container image and will greatly reduce the “weight” of the image in terms of file size and network transfer speeds.

Jib is exposed as an API but more importantly as Maven and Gradle plugins. Checkout their examples for getting started. Recommended if you don’t have any special needs.

Dockerfile Maven plugin

Spotify has been running containerized workloads for many years. Their first tooling effort for Maven was the docker-maven-plugin with the first release in June of 2014. This lead Spotify to gather much experience building container images and is now deprecated in favor of dockerfile-maven, which in turn is marked as mature.

This plugin is however quite powerful and hooks into the existing Maven build lifecycle. It lets you use a regular Dockerfile to build a container image as part of an existing Maven build. Recommended if you are dependent on a Dockerfile or explicitly want to use one.

Tips and tools for running Java apps in a container

The discussion of an automatic release was started many years ago, and there are several options for how to do this (none mentioned, none forgotten). Then I came across @Rultor by accident on Twitter.

no.bekk.bekkopen:NoCommons is a small library for validating, generating and manipulating data typical for Norwegian domains. SSN, org-nr, names etc. And when maintaining a small, quite static, open source library like this on GitHub, we need a smooth automatic release path that is easy and fast to use when a release has to be published. Maybe I changed my computer since last time and need to restore GPG-keys, or even worse, generate new keys and distribute them. And when time goes by, a new maintainer steps up and needs to release. How was that done again?

@Rultor is an open source robot living on GitHub. Yegor256 is the maintainer of this robot and we all can use it. Just talk to @Rultor in a GitHub issue and it will tell you what to do to get started. This is what I did:

Change parent-pom of project to com.jcabi:parent (not necessary, but quite convenient)

Encrypt setting.xml, private- and public-key (GPG) with @Rultor and commit them to NoCommons

Create .rultor.yml and commit to NoCommons with me as commanders and architect

@Rultor needs write access to the repository to publish tags and GitHub releases, so I added it as a collaborator in GitHub.

Now I can comment this in an issue after merging a PR:

@rultor release, tag=`0.9.0`

no.bekk.bekkopen:nocommons:0.9.0

Win!

So now, let's look at GitHub Actions next…

Automatic deploy (chatops) with @Rultor

A brand, or identity, is all about the feeling you get when you encounter a product. Identity designers work with logos, packaging, advertisements and more to form a desired feeling in the hearts of a brand's customers. So then why am I, a UX-designer working on IT projects, writing an article about identity design? Aren't these two separate fields?

As UX and interaction designers, we use our craft to make digital products as useful as possible. But do users love our products? Developers find stunning solutions in code, but is that code generating cash for your client? Does it provide the desired feeling in our customers' hearts? When making decisions in the product development team, what information are they based on? How do our choices reinforce our client's brand, or send it in a new direction?

What is branding or identity design?

A common interpretation is the visual identity, but branding is much more. It deals with how we perceive things and the personality of our products. For example, how would you describe a friend's identity? Perhaps by the characteristics of her personality, or more specifically the small things she does - her quirks or the way she handles various situations. It is the same with the identities of our products. It follows then, that the choices we as product development teams make as to the behavior of our products is essential to that products identity.

Why should development teams talk about identity in their daily process?

The answer is simple: to provide clarity of direction and purpose for the product. Branding is so much more than a logo or visual identity. We need to stop thinking of identity design as a separate discipline that some other designers take care of. While you need to have dedicated resources to establishing a visual identity, the daily decisions of developers, product owners and business advisors directly affect the brand of your product. The personality of our products lies in its interactions, functionality, code quality and architecture. A development team with a common understanding of what, why and how they should make things will cooperate better. As a result, the team can intentionally reinforce and build the desired perception of the brand to their users.

How can we gather the whole team around delivering products consistent with the company's identity?

For the past two years, a small group at Bekk has been developing an identity tool kit for digital product development teams. We call it the "Brand History." The kit, consisting of strategic and hands-on tools, identifies the foundation an identity is built upon. It helps your team develop a foundation for your brand; a clear direction. It is based on The Google Brand Sprint with some additional tools making it a two days sprint. It invites the whole development team to contribute, creating a common understanding and ownership of the identity. Optimally, the Brand History should be established at the beginning of a project. It will save you time later when the team has a common understanding from the beginning and it will make decision making easier, create fewer and more focused discussions and give a clear direction for the product. It does not need to be perfect; it can be adjusted along the way to incorporate what you learn during the project.

Start talking about identity!

A brand is not built by visual designers alone. The contributions of all roles on development teams contribute, so start thinking of yourself as an identity designer, or identity advisor. An identity developer, or an identity owner. Because we are not just building functionality in our products, we are building identity.

Why development teams should talk about identity.

There are many different types of machine learning models. Linear models are some of the simplest, but also some of the most widely used. In this post we’ll explain what a linear model is and why linear models are so popular.

Let's say you are going on a 100 km road trip, and you want to know how much money you should expect to spend on gas. Unfortunately for you, there is no information on the fuel efficiency of your car, so you can't simply calculate the number.

Fortunately for you, however, you have recorded the distance traveled and gas usage for previous roadtrips. Using this data, it might be possible to build a model that can be used to predict roughly how much gas you would expect to need for your road trip.

The first step in any machine learning problem is usually to visualize the data in some way. In this case, we plot distance traveled vs gas usage in a scatter plot.

In machine learning, we decide on some model that we believe describes the data. This model is then fitted to the data, and used to extrapolate to new situations. The simplest of such models is the humble line. A line, or more accurately a linear model, assumes that the relationship between the input and the output is such that an increase in input produces the same increase in output multiplied by some constant. More precisely, is is a parameterized model of the form

Y = a*X + b

Where X is the input (distance traveled), Y is the output (gas usage) and a and b are parameters (the relationship between distance traveled and gas usage) to be determined using machine learning. The perceptive reader will notice that it’s not possible to run a line through all the points in the above image. So we need some sense of a best line.

The idea of a best model in machine learning is captured by the cost function. This is a function of the parameters which measures how “bad” your model is performing on the given data, with zero being a perfect model. The model is trained on your data set by minimizing the cost function, which corresponds to finding the model parameters that performs best on your data.

For this situation, a good cost function is the sum of the distances between the line and the points. The square of the distance is often used to measure the error for each individual data point and, hence, the method is known as the least squares method. The image below shows the line that represents the linear model you get when applying the least squares method to the problem above. Using this model, we can predict what the gas usage will be for a given distance. For 100 km, for instance, the model predicts that we will use about 6.7 liters of gas

As an informal definition, we can say that linear model are all models that represents the relationships in the data using only straight lines.

There are many reasons why linear models are widely used, but we will mention three important ones here. Firstly, linear models are relatively easy to interpret. The model parameters may be used to gain insights into the data and to explain why a machine learning model made a particular prediction. Interpretability is a very attractive quality in many data science problems.

Secondly, linear models have measures for uncertainty. The linear regression model in the example above have well defined ways of calculating confidence intervals and prediction intervals. Confidence intervals tells you how uncertain the model is about the parameters it has learned from the data. Prediction intervals tells you how uncertain the model is about a particular prediction. Machine learning models are prone to errors and having a measure of uncertainty is often very valuable for a data scientist.

A third reason is that linear models may be extended to fit many complex nonlinear relationships. The data scientist has to decide which nonlinear relationships to model, but if the relationships in the data are not too complex, a linear model will often suffice. If the relationships in your data are very complex and nonlinear, however, other machine learning models may be better suited.

Linear Models

The Problem

You’ve got your SPA, consisting of static CSS, HTML and JS, and high-performing microservices to provide the dynamic behavior of your app. The only thing remaining is hosting the static content somewhere, point a DNS to it, and call it a day.

However, it turns out that your app needs a top menu, which is shared between all the apps in the organization, to provide a common look-and-feel and navigation. All of a sudden you’re pushed into the world of content transclusion, now loosely referred to as micro frontends

Logically, this is how your index.html should look:

The menu content (html, css, and js) is provided as a service maintained by some other team, and editors are adjusting the content every now and then. In other words, it is almost static, but not quite. The menu editors want changes to propagate quickly across all apps, as and when it happens. So what to do?

Applying Client or Server Side Includes

A few options are available to you as a developer, typically variations of server-side includes (SSI) and client-side includes (CSI) techniques:

Treat the menu content as static and deploy a snapshot embedded within your app. A menu update requires a redeploy, which could be relatively easy if downloading and embedding the snapshot was a part of your CD pipeline. Ensuring a fairly updated menu could be achieved by automatically redeploying often enough, or - slightly more sophisticated - triggering a redeploy when the content of the menu service changes. In both cases the pipeline must handle an unavailable menu service, or other issues, increasing the complexity. And with lots of apps in production, there is a governance issue in ensuring working CD pipelines across all of them.

Treat the menu as dynamic, and have the client download and insert it into the html as part of page rendering. This is relatively straight-forward and only requires referring to the right piece of javascript, which could be shared between all apps. The downside is the risk of a javascript error (elsewhere in the app) could prevent the menu from being rendered altogether, or that the menu service is temporarily unavailable, also leaving the app without a menu. Also, the user experience could be affected by the performance of the menu service, potentially resulting in the menu appearing long after the app itself has been rendered, causing annoying reflow. Techniques like Optimistic UI and Skeleton Screens can mitigate such problems to some extent.

Embed the menu server side, when the content is served to the client. Of course, this would require running a web server for the static content, adding the hooks to intercept the request for index.html, and calling the functionality to download the menu content and decorating the html on the way out. Again, performance and failures would be an issue, having the user wait for the inclusion of content from a service you don’t have control over. And running a webserver to serve static content really was what we were hoping to avoid in the first place.

Each of these options has some downsides, and ways to overcome them. AWS Lambda@Edge offers a compelling alternative, which falls in the category of edge-side includes (ESI).

Edge-side Includes with AWS Lambda@Edge

AWS offers a CDN service called CloudFront, which caches static content closer to the clients, whereby offloading the origin web server and improving response times. July 2017 it became possible to run a piece of code when CloudFront receives a request or returns a response. More precisely, CloudFront offers four events that can trigger your code:

When receiving a request from a client, regardless of the requested content is cached or not

Before forwarding the request to the origin web server, in case of a cache miss

After receiving the response from the origin web server, but before it is cached

Before returning the response to the client, after it has been cached

The menu problem is a good use case for Lambda@Edge. At first glance, it seems it would be a good choice to latch on to the response from the origin web server, and decorate the html before it is cached and returned to the client. However, response triggers aren't able to access the response body or provide a generated body of any kind. The next best thing is to trigger your lambda function before the request is forwarded to the origin web server because of a cache miss. The steps you need to implement, are:

Check if the client requests “index.html” (or “/“). If not, just forward the request and return the response

Fetch index.html yourself, and get the content from the menu service

Replace specific tags in index.html with the appropriate menu-content

Set the cache headers to some fairly short expiry time (balancing the cost of regenerating index.html versus the risk of serving stale content)

Return the decorated response

Feel free to take a look at the node.js code, and the corresponding index.html and menu content examples (courtesy of the Norwegian Labour and Welfare Administration, NAV)

The final piece in the puzzle is to configure CloudFront to access your static content and then trigger your code with the right event. Using the web console of AWS Lambda, it should look something like this:

and then click “+ Add trigger”, select “CloudFront”, and click “Deploy to Lambda@Edge”:

You need to select your CloudFront distribution and event, before clicking “Deploy”.

Summary

So what have we gained? First, our static content can be hosted as such, for example in an AWS S3 bucket (set up as a static website), and deployed by a simple directory synch operation. No complex CD pipelines or dedicated web servers are required. Second, in case of a failure during transclusion, CloudFront will continue to serve the previously cached index.html. So a temporarily unavailable menu service will not impact the end-user. Third, the performance penalty is only paid occasionally by a single user (within a CDN region), and a small lambda execution timeout value will cause a relatively quick failure, resulting in the cached index.html being returned. Fourth, the lambda function decorating the index.html can be shared by all apps (provided they are authorised to do so), maintained in one place, all the while scaling is handled for you.

Finally, leveraging a CDN for static content is A Good Thing, and should reduce the cost of serving your files, while simultaneously improving the end-user experience. As an additional benefit, if you are building immutable web apps (which you should) - and therefore getting new file names with each build - serving them through a CDN will keep the files of previous versions available for a while. The slim chance that a client with an old index.html will request unavailable files, is avoided.

There are a couple of drawbacks, of course: Getting your lambda function to work correctly can be a bit of trial and error with somewhat limited debugging possibilities. Also, index.html is cached for a certain time period (decided by you). A new deployment of your app will not be immediately available to new clients. A cache invalidation request to CloudFront may take a few minutes, so in the odd case you need to be able to rapidly make a new version of your index.html available, using a CDN in front of it may be the wrong thing to do. For everybody else, it is definitely a tool to have in your toolbox.

Many thanks toMorten Jansrud,Frikk Hald AndersenogEirik Årseth, who have done all the hard work.

Splash photo by Eduardo Braga from Pexels

Need to handle NEARLY static content? Lambda@Edge to the rescue

You should always strive to make, and make use of, immutable data structures. Even if your domain is inherently mutable (like most domains, really), there are quite a few pitfalls that can give you headaches later on if you also use mutable data structures. Many of them are avoidable simply by making it harder to accidentally modify data.

An immutable data structure is one that cannot change. Its values are set in stone. Once created, it is simply not possible to assign a new value to either the object itself, or one of its children. If this thought is completely new to you, it might sound quite strange and limiting. And you would not necessarily be wrong on the limiting part – a key point with immutability is actually to limit what can be done with an object. As it turns out, if you cannot change an object, many sources of bugs also disappears!

Reasoning

Reasoning about programs can be quite hard. And when they grow in size, it becomes even harder. Our minds are limited, and can only keep so much information present at once. This is where immutability becomes quite a valuable tool: by limiting the possible interactions with objects, you no longer have to keep track of all the possible places an object might be mutated. Reasoning about your program is now more about understanding the general flow than keeping track of every tiny bit of your program.

Data Flow

I don’t like surprises. Well, there are of course nice surprises, but when I program I like things to behave the way I expect them to. If I pass my data to a function to have some computation performed, I expect that function to play nice and don’t change my data in the process. But if my data structures are mutable, how can I be sure they don’t? Actually, there is nothing more than conventions to stop that from happening. If my data structures are immutable, change is prohibited by the compiler itself. Passing data around in your application is suddenly a completely safe operation, and you no longer have to worry about the implementation of every function you use.

Concurrency

Concurrency is a biggie nowadays, with home computers having more and more CPUS and threads available. Yeah, I know, this was also true 15 years ago. But I needed a way to start this paragraph, so just keep on reading. Concurrency is also inherently hard, as threads might need to synchronize, and sometimes even needs access to shared data to perform their operations. What would happen if you had two threads operating on the same, shared data structure – one reading from it while the other mutates it? Best case scenario, your program blows up and execution stops. Worst case, you end up with the wrong result and have no idea that something is seriously wrong. This is not a new problem – concurrency and all its issues has been discussed by computer scientists since at least the 1960s (Concurrenty (computer science). There are therefore also multiple ways to deal with concurrency, and prevent concurrency issues. The easiest though, at least in my opinion, is simply making your data structures immutable. When shared resources can’t change, threads can’t cause issues for each other as easily. Again, we have removed possible problems by limiting the number of possible operations.

But what about the real world?

As we can see, immutability gives us several desired properties when programming. We all want to get rid of bugs, and we all want to remove sources of confusion. At least I do. We want to spend more time solving the real problems, not the problems we created ourselves two weeks ago. I don’t know about you, but I can tell you that the list of bugs caused by my code is already seriously long, and if something can stop that list from growing at the speed of light I’m all in!

But just making things immutable does not solve the problems by itself. In real life, data change over time, and if our programs can’t do this it’s quite hard to solve real life problems with them. If I make software for cars, having an immutable speed dial does not exactly help the driver. "Yeah, I know it doesn’t change, but at least it doesn‘t crash your car!" – good luck selling your car on that premise. Luckily, immutable data structures also have ways of modelling changes. In fact, they often have quite similar APIs as mutable data structures, but with the key difference that they return a new copy with the change included rather than modifying the data in place. With our speed dial example, we would simply receive a new speed dial and swap out the old one when accelerating or braking instead of modifying the current one. Now, this might be where you start thinking "creating new copies all the time.. that sure sounds expensive.". And I wouldn’t blame you for thinking like that, because naively implemented that might actually be true. But let me assure you that correctly implemented, this pattern is no more resource intensive than modifying in place.

Again, if this way of thinking is completely new to you, I can imagine you still might be a bit puzzled after reading this. If you are curious how one would actually structure code following an immutable pattern, I recommend picking up and learning a functional programming language. You might just get addicted.

Immutable by default

Knowing more than one way to solve a given problem can help you write more readable code. Let's look at three different ways to remove duplicates elements from an array.

Never underestimate the importance of code quality. As a developer it is key to clearly communicate the implementation of any solution you are working on through readable code. Knowing more than one way to solve a given problem can help you write more readable code. Let's look at three different ways to remove duplicate primitive values from an array.

Set

A Set is an object that lets you store unique values. Repeated calls of Set.add(value) with the same value don’t do anything.

By exploiting the fact that a Set cannot contain duplicate values, then use a spread operator to transform the Set back to an array we are able to remove duplicate elements from the array.

Reduce

The reduce method executes a reducer function (provided by you) on each element of the array, resulting in a single output value. The value returned from a reducer function is assigned to the accumulator, which is passed as the first argument of the subsequent execution of the reducer function and ultimately becomes the final resulting value.

To remove duplicate elements from an array, we can provide a function that checks if the accumulated array includes the current element. If not we add the current element to the array.

Filter

The key to understand this method is to understand how indexOf and filter works.

indexOfreturns the first index of a given element in an array.

filter creates a new array with all the elements that passes a test. You can provide the test as the first argument of filter.

If we combine these two methods, by providing a test that checks if each element is the first occurrence of the given element in the array, we can remove duplicate elements from arrays.

Which method should I choose?

We saw three different methods to remove duplicate elements from an array. It's easy to imagine a fourth method that would improve the readability. Namely, by creating a proposal to add Array.prototype.unique to EcmaScript.

In terms of readability, I prefer the first method. By using a Set your code is both short and easy to understand.

3-Dec

Today's posts