Vue Collapsible Panel Component (with persisted state)

Today, ill create a simple re-usable collapsible panel component that saves state in localStorage.

Starting out

I start out by creating a basic vue project through the CLI (default settings)

Next up, add Fontawesome and Bulma (I ❤️ Bulma) yarn add bulma.

package.json after dependencies has been added

(I load in bulma through sass so I can override colors etc. so I’ve also installed node-sass and sass-loader as devDependencies)

In main.js I’ve added the basic FontAwesome setup (as per the link)

I just add ChevronUp (🔼) and ChevronDown (🔽) to the library and off we go.

On to the actual component

I’ve created the “panel” out of the bulma card component.
The component takes 2 props, namely id and title.
title is used for the card header and id is used for state management.

The component loads/saves the collapsible state in localStorage.

I’ve created a small extension to help (de)serialize objects to localStorage as localStorage only really does key/value pairs (which could have been used, but I find this to be much better).

We load the state during mounted() and we get/set via the following methods

The state is saved in an object in localStorage under the key collapsibles
and id‘s are added to that object with the collapsible state.
It creates something like this

Complete component

The component has 2 slots, a default one and a footer – you can see that in the usage below.


I’ve shown 2 usage scenarios in the following code. 1 with the footer and 1 without.

Below you can see the storage change when I change the state.

you can find the complete project on my github

Simple Vue splash screen

Today, ill just introduce a nifty little trick to create a loading screen, to let your users know that your app is still working, even though it takes a while to do the initial load.

Splash screen

The idea is to add the loading/splash screen to the .public/index.html file inside the <div id="app"></div> or whatever your mount point is, because vue will remove whatever is inside, when it is done loading the components.

I’ve just created a new vue app from the CLI.
To simulate the slow rendering I’ve put a delay function in the HelloWorld.vue which is then called inside of the beforeMount()

In the .public/index.html file I’ve added;

which is just some simple animation css and inside the <div id="app"></div>I’ve added the following:

You can find the full project on my github

Special thanks to for the Loading Screen.

Throttling actions in .Net Core 2.1 using AttributeFilter

I have previously written about Throttling in the pre-core times, and this is sort of the update to that post – with a bit of fixes and tweaks.

Lets get to it;

A few changes:

In my last post I did things a bit differently, for instance; I used to throw a custom exception type and handle that as a response, I have learned that this is an anti-pattern and is strongly discouraged (at least by David Fowler).
Anyway now we return a class, which is basically just my old ApiException type, just without the inherited bits of Exception. – this is both cheaper and cleaner.
Also since we are using .NET Core, we are using IMemoryCache instead of HttpRuntime.Cache – which is also nice.


On to the attribute:

There isn’t a lot to it to be honest.

  1. Check for existence of cache entry
  2. If none, create one and set allowExecute = true
  3. If allowExecute != true, return throttle response and short-circuit the pipeline.

Do note that this throttle uses IP as it’s target, but could easily be username or similar.


[IPThrottling("GetItems", 300)]
public ActionResult<IEnumerable<string>> Get()
    return new string[] { "value1", "value2" };

The above throttles for 300 seconds for the GetItems key, so you can group together functionality as well, if you really need to.

Ill talk about the custom response in a different blogpost