Spiderman: Into the Spiderverse; Visual Style Mashup Deluxe

This post is about why Into the Spiderverse looks fantastic, for that I’ve taken some screenshots of the official trailers at intothespiderverse.movie to illustrate what I’m talking about.

The vibe I got from the trailers was that it’d be a similar movie to Big Hero 6 and I wasn’t disappointed. Into the Spiderverse is a great animated movie that does not take itself too seriously, has a fine story for the first of a potential series and is visually stunning.

It’s a PG movie (meaning no actual age restriction) so you can see it as a kids movie, but if you’ve seen any of the spider man stuff, especially the Toby Maguire ones, there’ll be stuff to laugh about.

Anyways, the story in a super hero movie isn’t exactly what you’re going for, but how the characters are going to overcome their challange and what funny stuff they say along the way.

The Visuals

The graphical style and combination of the movie pretty much blew me away. It’s a glitchy combination of:

  • relatively realistic 3D
  • old school comic looks
  • some anime elements

and a lot of street art style aesthetics come up in one way or another.

Generally the movie is in the 3D look, sometimes cutting over to the comic style for just a few frames, that are probably accurately enough grabbed from the comics to compete with Sin City on that one:

the most common 3D style

Notice the halftones that pretty frequently are used for varying effects, mostly to actually define brightness gradients of areas.

The composition with the split frame that has things happening in sequence was great as well, because it compresses a flashback or a scene where something expected happens in an entertaining way:

Next up is one of my favourite things, the channel splitting, which was actually sometimes used as a way of focusing. We watched the movie in 2D (because preference) but the channels are still split harder further away from the center or used in some action scenes:

Notice the blue and reds splitting away from the hand.

Lastly, the hatching was a welcome comic relic, which also was used to shade and shadow areas:

and this all is just what I noticed. I hope nobody from the studio reads this, because I probably missed a ton of things, but this was really different and really, really awesome.

9/10 would watch again!

Let me know what you thought about it if you’ve seen it!

Getting Started with Flutter on Linux for Android [Beginner Tutorial]

Flutter is a cross platform and performant native mobile app framework by Google and can target Android and iOS at the moment. The language that comes with it is Dart, which originally made it into Chrome Canary as a possible JavaScript replacement or alternative.

In this post we’re going to have a look at how to set up a development environment for Flutter and Android. At the end of this post, you’ll have a working development environment on Ubuntu, Linux Mint or similar, including your first Flutter app running in an emulator and device.

Installing Flutter and Android Studio

The Flutter Linux Installation Docs are the starting point and take you through downloading the appropriate file:

# adapted
cd ~/Downloads
wget https://storage.googleapis.com/flutter_infra/releases/stable/linux/flutter_linux_v1.0.0-stable.tar.xz
tar xf ~/Downloads/flutter_linux_v1.0.0-stable.tar.xz

Now you can add the flutter binaries to your PATH, either by running this in your terminal:

export PATH="$PATH:/home/$USER/Downloads/flutter/bin"

or by adding it to the configuration file of your shell permanently. Depending on which shell you use, these will typically be:

  • ~/.bashrc for bash
  • ~/.zshrc for zsh

Open the respective file and add around the bottom.

export PATH="$PATH:/home/$USER/Downloads/flutter/bin"

You can reload your config by running:

  • source ~/.zshrc
  • source ~/.bashrc

or restart your terminal.

You can verify your flutter installation with flutter doctor, the output should be something like:

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.0.0, on Linux, locale en_US.UTF-8)
[✗] Android toolchain - develop for Android devices
    ✗ ANDROID_HOME = /home/jonathan/Android/Sdk
      but Android SDK not found at this location.
[!] Android Studio (not installed)
[!] Connected device
    ! No devices available

! Doctor found issues in 3 categories.

Installing Android Studio and Flutter Plugins

First, we’ll need to download Android Studio and unpack this into our Downloads or home folder. I have placed my unpacked version in /home/jonathan/android-studio. To start it I can run:

cd /home/jonathan/android-studio/bin
./studio.sh

This will open the IntelliJ based IDE for Android Studio and start off with a splash screen. After the IDE has started, just create a new Android project, because we want to head into the Tools menu and open the SDK Manager.

Inside the SDK Manager we want to navigate to the Plugins menu and press the Browse Repositories… In the following dialogue you can now search for Flutter and hit install, which should prompt you to install the Dart plugin as well.

Adding the Android Studio Home to your PATH

Now that we have the Android Studio installed, it should have created a directory in our home folder called Android, to add the tools and platform-tools that come with it, we need to add something like the following to our .zshrc or .bashrc. Remember to change the paths if you’re not called Jonathan 😉

export ANDROID_HOME="/home/jonathan/Android/Sdk"
export PATH="/home/jonathan/scripts:/home/jonathan/projects/go/bin:/home/jonathan/Downloads/flutter/bin:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools:$PATH"

Remember to reload your shell config with source ~/[config name here].

Now to verify that we have installed the Android SDK correctly, let’s run flutter doctor again:

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.0.0, on Linux, locale en_US.UTF-8)
[✓] Android toolchain - develop for Android devices (Android SDK 28.0.3)
[✓] Android Studio (version 3.2)
[!] Connected device
    ! No devices available

! Doctor found issues in 1 category.

After installing the Android SDK, you’ll have to agree to some license agreements via the CLI. Now we still have No devices available, let’s fix that with an Android Emulator.

Adding an Android Emulator

In Android Studio, head to Tools and then AVD Manager (Android Virtual Devices) and add a new emulator. This should be straight forward.

After you have gone through this process and started your emulator, you should no longer receive the warning that no devices are present by flutter doctor.

Troubleshooting the AVD

If you can’t add an AVD due to errors regarding /dev/kvm permission denied on Linux, you can try to install some additional dependencies and adding your user to the kvm group:

sudo apt install qemu-kvm libvirt-clients libvirt-daemon-system bridge-utils virt-manager
sudo adduser $USER kvm

NOTE: after running the adduser command you should restart your machine.

If you’re still facing trouble, there may be a BIOS setting which is not set correctly, for the most common BIOS versions you can see how to change it here: fedora wiki: BIOS setting for virtualisation

For GIGABYTE mainboards this setting is slightly hidden within Advanced CPU Core Settings and called SVM mode which needs to be enabled.

Enabling your Android Phone for Development

To set your phone up for app development, you’ll need to enable some developer settings, like explained by the Google Android Docs.

After this, if your phone is the target device for flutter and attached to your computer, it will automatically install the app and launch it when you use flutter run.

Creating your first Flutter App

For the next step you can either use Visual Studio Code or the Android Studio, as you wish. I’ll use vscode in the example:

  1. I create a directory where my flutter projects will live with cd ~/projects && mkdir flutter && cd flutter
  2. I create a new flutter project with flutter create test1
  3. I follow the instructions and run cd test 1 and flutter run
  4. The app should now appear in your AVD

To open your project with Visual Studio Code, change to your project directory with cd ~/projects/flutter/test1 && code .

Now you will be able to edit the flutter app and change the text labels or counter behaviour (try adding 3 at a time!).

If you want to integrate VSCode more closely with Flutter, make sure to install the Dart and Flutter plugins, which will enable you to create new projects or run your app from within Visual Studio Code.

That’s it! You’re now up and running with Flutter development for Android! Happy coding and remember to share your first app results!

PS: Thanks to some sub-reddits and Thomas for the review!

Physical Location Security (Wild West Hacking Fest Talk)

This year the lady gave me a lockpicking set. I’ve always been interested in security, mostly in the digital space, but also for assets in the real world.

When we got our apartment I was very pleased that the door locks in three places and that the key is two dimensional. Certainly not high security stuff, but at least not kicked down with one swing.

When I talk to other people they usually become uncomfortable or resignated when we look at how easily things can be broken, broken into or exploited. In a way I think that’s a mindset issue.

The ones that get uncomfortable usually resort to something like:

These hackers should just stop showing everybody how to break into stuff on YouTube!

Continue reading “Physical Location Security (Wild West Hacking Fest Talk)”

Strange Brigade Review

Strange Brigade is a co-op shooter that I recently acquired and actually find quite entertaining. You are an Indiana Jones or Lara Croft style adventurer in the 1930s that shoots their way through hordes of zombies and solves various riddles on the way to a boss fight that finals every map that usually takes about 45 minutes.

This, in essence, describes the game relatively accurately, but its charm really comes through the overly British 19th century commentator that relentlessly points out what ever you are doing, the diverse characters you can select, and the fact that it doesn’t take itself too seriously.

Continue reading “Strange Brigade Review”

Lenovo IdeaPad 120s-14 AP Review

I’ve used a Lenovo IdeaPad 120s temporarily because of a slight emergency and even did some coding on it. To say the least, it’s been weeks of managing resources very carefully and learning why performance is still an important factor in computing in general 🙂

If you’re considering buying it, make sure to be aware that this is an incredibly low end machine and that you exclusively want to use it as a distraction free environment (it doesn’t run many applications at once) and that you’ll probably only use it to write your novel. Using vim. Also you want a machine you can probably charge using a solar panel on your van and that lasts 5+ hours without flinching (8h advertised, depends what you do).

Continue reading “Lenovo IdeaPad 120s-14 AP Review”

Using Vue.js with Parcel.js Tutorial

Vue.js is ever growing in popularity and even though it has a strong CLI that allows you to kick start projects, you can use other bundlers like the Parcel bundler.

The Parcel bundler excells at simplicity and only requires and entry file like index.html, yet it results in highly optimised builds with its powerful defaults.

Also Parcel, like webpack, works well with all kinds of JavaScript frameworks like React, Preact and of course Vue.

Continue reading “Using Vue.js with Parcel.js Tutorial”

Getting into Open Street Map (Copenhagen)

Maps are fascinating and in the spirit of Human knowledge belongs to the world the open street map is an open source alternative to popular map services like Google maps, Apple maps or Bing maps.

The cool thing about open street map or short OSM is that the users can contribute to the map without being professional cartographers or software engineers.

Continue reading “Getting into Open Street Map (Copenhagen)”

Deploying a Vue.js Single Page App (including Router) with Docker

Creating single page apps has become a more frequently requested task of web developers (like me) and deployment in containers, across zones and under monitoring, seems like a natural step.

In this post we’re going to have a look at how to deploy a Vue.js SPA with docker.

Let’s start off by installing the vue-cli to create a boilerplate project. Make sure you have Docker installed as well.

Continue reading “Deploying a Vue.js Single Page App (including Router) with Docker”

Music Monday: Mono Inc.

Mono Inc. is a gothic rock band from Germany that have been around for about 10 years, but I’ve first recently discovered them. They’ve collaborated with Joachim Witt, who made one of my first favourite songs when I was a kid.

Needless to say I got all nostalgic when hearing his voice again and dug a bit deeper into their discography. The themes frequently revolve around war, but in a way that points out that it’s shit and actually very pacifistic.

Continue reading “Music Monday: Mono Inc.”

Medieval Market at Burg Satzvey (May 2018)

Last weekend I spent at Burg Satzvey with the Lady. It’s a fairly intact castle and they have multiple medieval markets per year and it was a blast!

There were birds of prey, a super cool tournament with stunt riders (and horses) and it was overall just brilliant.

Medieval role (or cos-play) is super amazing and you should put this on your bucket list right now if you haven’t. It’s another world and a great time to tune out and into something else. It’s a perfect retreat from the technocracy.

Continue reading “Medieval Market at Burg Satzvey (May 2018)”