Apps – LGK Blog

Link: Photopea – Like Photoshop, but free and in your browser

Lars Kliesing — Thu, 25 Nov 2021 16:00:00 +0000

With Photopea you can open, edit and save many different formats like .PSD, .AI, .XD and .sketch. Right in your browser, for free. So it might be perfect if Adobe’s subscription model is too expensive for you. With browsers like Chrome or Edge you can even install Photopea as a PWA on your desktop, so it will act like a native app. Then you even have direct access to files on your machine.

Because it’s free, you’ll see some ads on the side. If you want to remove it, you can spend a little money.

The code behind the new SP-Studio

Lars Kliesing — Sun, 20 Dec 2020 15:39:52 +0000

For some months I’m working on a cool project. It’s a web app where users can design their own characters in a South Park style. It’s the new modern version of the SP-Studio.

The older version is already about 19 years old(!) and was running with Adobe Flash. Modern browsers stopped recommending using Flash already since many years, but technically still supported it. But at the end of 2020, Flash will be entirely shut down (R.I.P. ).

Honestly it’s been some years since I visited sp-studio.de the last time, but when I was younger, I was a big fan of it. That’s why it’s a big honor for me, to bring this cool project to a new life by developing this new modern version.

Not only doesn’t this new version depend on Flash anymore, it’s designed mobile-first and works on multiple platforms: smartphones, tables, laptops and desktops. It’s also a Progressive Web App (PWA for short). This means, you can visit it normally with your browser, but are also able to install it on your device, so it will act like an app.

To find out all other things that changed since the older version, please check out this post. On this post, I want to write about the code and the technology behind this new version.

Why React?

I would say I’m already very experienced by using the React library because I already use it for a while for different projects. Compared to them, SP-Studio is actually pretty simple and straightforward to code. For the project I don’t even need any other big libraries like React Router, since we don’t need different pages. I also don’t use complex state mangers like Redux, I just work with props and states to let the different components talk to each other.

The project folder is generated with create-react-app (or “CRA” for short) and the TypeScript template. TypeScript forces me to work less chaotically, that’s why I love it.

Working with the SVG assets

The most important task the app has to do, is to read the different assets the user should be able to add to its character. All assets are prepared by Janina as SVG files. And that’s another benefit from React, because it natively supports components in SVG format and can also manipulate its attributes with code.

The default body asset and its default color tones

This is how the SVG file of the default body asset looks like:

Unfortunately I can’t directly use it like this for the application. It has to be formatted in a JSX format, also it needs to be a real React Component with props, so the values like colors can be changed from outside. That’s why wrote a script, which converts it to this:

import React from "react"
import { AssetSvgProps } from "../../../shared/assets"

export const defaultColors = {
    "col1d": "#6486A6",
    "col1n": "#8FAFCD",
    "col1s": "#49657E"
}

function SkiSki001({ colors = defaultColors, onClick, outerTransform, transform }: AssetSvgProps) {
    return (
        
                
                
                
                
                    
                
            
            
            
            
        
    )
}

export default SkiSki001

But the script does do more than just to convert the asset to a React-friendly format. Actually this part is realized with the library @svgr/core.
My script extracts the primary color tones from the vector graphic and sets them as the default color options. These colors can be overwritten later by the user. The script does also do some more things to make it easier to work with the components from outside.

Workflow with GitHub and Vercel

Vercel deploys and hosts for each change pushed to GitHub

I host and manage all my code repositories on GitHub, so I also do this one. GitHub is awesome for collaborating, and it’s easy for Janina to upload new assets. Even though the productive version wouldn’t be hosted there, we also use Vercel to deploy and host states of the site for testing and debugging. Vercel works seamlessly together with GitHub and automatically deploys when I push new changes, so I can easily show them to Janina or to test them on different devices.

That’s it

for this article. If you would like to know more details about certain things or have any questions, let me know in the comments.

The final version of the app will be launched tomorrow as I write this, so check it out when it’s published: https://sp-studio.de/

The app will evolve with the time. We plan to publish a big update with more features early 2021.

Experimentell: Colorganize als Windows 10 Universal App

Lars Kliesing — Fri, 27 May 2016 18:14:02 +0000

Colorganize als UWP App

So wird die App installiert:

Entpacke die ZIP-Datei
Im Ordner befindet sich eine PS1-Datei (Add-AppDevPackage.ps1). Rechtsklicke darauf und wähle im Kontektmenü “Mit PowerShell ausführen”.
Folge den Anweisungen im PowerShell-Fenster. Möglicherweise sind Änderungen bezüglich der Zertifikat-Akzeptierung nötig.

Hat alles geklappt, sollte sich im Startmenü unter “Alle Apps” ein neuer Eintrag “Colorganize” befinden.
Bei Fragen helfe ich natürlich gerne.

Colorganize Hosted_1.0.0.0_Debug_Test.zip

Ein Spiel, nur mit HTML, CSS und JS: “Hang The Song”

Lars Kliesing — Sun, 24 Jan 2016 19:29:30 +0000

Ein Bildschirmfoto der Hang The Song App unter Windows 10 auf meinem Lumia 550.

Ziel des Spiels ist es, Songs nur anhand der ersten und der letzten Wörter des Lyrics zu erraten.
Ist das auf Anhieb zu schwierig, bekommst du über “Get a new hint” zwei weitere Wörter zum Lyric hinzu.
Ein Hinweis kostet dir 10 Punkte. Pro Song hast du insgesamt 100 Punkte zur Verfügung. Sind alle Punkte aufgebraucht, ist das Spiel leider vorbei.

Am besten ist es also, so wenig Punkte wie möglich zu verschwenden und die Song-Titel zu erraten.

Kostenlos spielen

Die App ist unter lgk.io/hang-the-song erreichbar und kann direkt im Browser gespielt werden.
Sie ist auf mobile Endgeräte optimiert, kann aber genau so gut am PC verwendet werden.

Ich habe außerdem mit dem Windows App Studio herum experimentiert und so gibt das Spiel auch als Windows 10 App. Für PCs UND Smartphones!

Allerdings noch nicht im Windows Store. Wenn du die Apps aber trotzdem testen willst, kannst du das tun.

Voraussetzung ist, dass du entweder Windows 10 oder Windows 10 Mobile benutzt.

Windows 10 am PC:

Stelle sicher, dass sich dein PC im Entwickler-Modus befindet.
Installier das Windows Zertifikat
Installier die App Hang The Song

Windows 10 am Smartphone:

Stelle sicher, dass dein Smartphone Querladen von Apps erlaubt.
Installier das Windows Zertifikat auf deinem Handy:
Installier die App auf deinem Handy: