JavaScript – LGK Blog

How I hacked Piskel and added a new feature for me

Lars Kliesing — Thu, 14 Apr 2022 11:15:00 +0000

I recently started using Piskel more often, which is a cool web app to create cute pixel graphics and animations. It’s pretty nice to use, but there was a thing I was bothering me. The color picker tool only works in scope of the app. But I wanted to transfer colors from my Affinity project to the Piskel browser app.

My goal was to be able to do this

For each color had to pick the color inside of Affinity Designer, copy the hex code, open the color dialog on Piskel, paste the code and press enter. If you want to transfer a lot of colors, this can get a little bit annoying.

The good thing: Piskel is an Open Source web project. That means with a little effort I could solve this problem for me. Because I know, there is a native color control which has a picker which works across the whole screen (atleast in Chromium browsers):

Great. Now I needed to bring this to the Piskel application and make it overwrite the current color. I tried to find some kind of a state in the JavaScript code I could use. Because Piskel’s source code is on GitHub, I could just clone the project to my machine and search through the code. Because I know from the User Interface that the main color is called “primary color” I was searching for “primary”. And voila, I found an event called "SELECT_PRIMARY_COLOR". Sounds like exactly what I need. Now I needed to know how to trigger this event. So I was searching for where "SELECT_PRIMARY_COLOR" is used in the code and this is what I found:

$.publish(Events.SELECT_PRIMARY_COLOR, [color])

Nice, looks like I could just use something like $.publish("SELECT_PRIMARY_COLOR", "#ff00ff"). I tested it in the browser console and it worked! I now also used the console to put the color input element to the HTML document and passed an event listener when the input is changed:

const colorInput = 
  document.createElement("input")

colorInput.id = "lgkColorInput"
colorInput.className = "tool-icon"
colorInput.title = "Native color picker"
colorInput.type = "color"

// The tools container of Piskel's UI
document.getElementById("tools-container")
  .append(colorInput)

document.getElementById("lgkColorInput")
  .addEventListener(
    "input", 
    ({currentTarget}) => {
      $.publish("SELECT_PRIMARY_COLOR", 
      currentTarget.value)
    }
  )

It looks great, like it was always part of the UI. I found the "tool-icon" class name, because all other tool buttons use it too.

Awesome, but everything I run on the browser console is just temporary, so I needed a way to always execute it when I’m on Piskel. The good thing; there is a browser extension for this: Custom JavaScript for Websites 2
I installed it, pasted my code in and it works!

So if you would like to my new tool aswell, just install the extension and paste in my code and it should work. ^^

How I created a card game with Svelte

Lars Kliesing — Sun, 20 Mar 2022 18:18:00 +0000

It’s kinda a tradition for me to use my Christmas holidays for a fun little project. Since Svelte became more and more a thing, so I wanted to do try it in practice myself. I also heard that SvelteKit is pretty popular in the community, so I decided to is as a framework. Because I already knew Vercel from previous side projects, I was very happy that it is supporting deploying SvelteKit projects. Vercel is awesome, because you don’t have to care too much about publishing web apps. I just had to put my code on GitHub and connect it to Vercel. Each time when I push to the main branch, a new version will also be deployed automatically. Vercel also allows me to use my own sub-domain, so I could use skip-it.lgk.io. I also created my game as a Progressive Web App (PWA), what makes it look and behave like an installable app, it even works offline!

How the looks the PWA on a phone. The app supports light and dark mode!

You can see it on the sub-domain, I later called my project “Skip it!” and it is a card game you can play anywhere. On your phone, on your computer and on your tablet. If you know the card game “Skip-Bo”, you could probably guess, how you can play my game. I chose to create a clone of Skip-Bo because I sometimes play it with my family and also enjoyed playing the iPad app a while ago. Through the iPad app I found out how addicting and fun the game can be and the game-play might be simple enough to create it with my skills in web technologies.

Skip it! also looks good on iPads and tablets

The developer experience using SvelteKit and Svelte was awesome! For years I primarily use React for my projects. I actually felt a little nostalgic, because I wrote actual HTML again, instead of JSX (no more className) and handling states is way more straightforward. I also use Svelte’s feature for scoped stylesheets. In previous projects I normally use SCSS and create global stylesheets. In Skip it! I switched to component-scoped architecture. Benefit is, you automatically just keep CSS, you will actually use, because the code-editor will underline unused CSS rules.

With the right browser (Chrome, Edge) you can also install PWAs on PCs.

Right now you can play against 3 players. I also thought about if you could play against real players. There are multiple ways to realise such realtime actions. Maybe I will implement it next holidays.

Mach deinen Code prettier

Lars Kliesing — Thu, 30 Sep 2021 14:01:00 +0000

Als Programmier:in entwickelt man mit der Zeit eine eigene Code-“Handschrift”. Benutzt du für Strings einfache Anführungszeichen (') oder doppelte (")? Benutzt du Semikolons? Benutzt du für Einrückungen Tabstopps oder Leerzeichen und wie viele?

Innerhalb eines Projekts ist es auf jeden Fall angenehm, überall die gleiche Formatierung zu haben. Das sorgt für eine bessere Übersicht und befriedigt nebenbei den inneren Monk.
Arbeitet man mit mehreren Personen an einem Projekt, kannst du entweder regelmäßig von Hand den Code der anderen formatieren oder du lässt es machen, automatisch!

Installiere Prettier

Das geht mit dem Tool Prettier! Du legst zuvor in einer Config-Datei (.prettierrc.json) die Regeln fest (Semikolons ja/nein, maximale Zeilenlänge etc.) und führst dann Prettier aus. In einer separaten Datei (.prettierignore) kannst du noch definieren, welche Ordner und Dateien dabei unangetastet bleiben sollen.

Folge einfach dem offiziellen Guide, um Prettier bei dir einzurichten: Install · Prettier

Prettier bei jedem Git Commit ausführen

Du kannst Prettier jedes Mal manuell ausführen oder dafür eine Extension in deinem Code-Editor installieren. Ich finde es allerdings angenehmer, dass Prettier automatisch vor jedem Git Commit ausgeführt wird. So wird sichergestellt, dass kein unschöner Code nach GitHub gelangt (oder wo auch immer du Git hostest). Auch funktioniert das ganze dann unabhängig davon, welchen Code-Editor du oder Team-Kolleg:innen verwenden.

Ich bin einfach den Abschnitt “Git hooks” gefolgt: Install · Prettier

Das Tool “Husky” sorgt also dafür, dass Prettier vor jedem Git Commit-Befehl ausgeführt wird und der Code formatiert wird.

Meine bevorzugten Einstellungen

Meine .prettierrc.json-Datei sieht so aus:

{
    "tabWidth": 4,
    "useTabs": false,
    "semi": false,
    "singleQuote": false,
    "trailingComma": "none",
    "bracketSpacing": true,
    "bracketSameLine": false,
    "fluid": false
}

Zur Einrückung werden 4 Leerzeichen verwendet.
Ich nutze keine Semikolons (bei JavaScript und TypeScript).
Ich nutze doppelte Anführungszeichen bei Strings (").
Keine Kommata, wo es nicht notwendig ist (z.B. in TypeScript Interfaces).
Leerzeichen um geschweifte Klammern ({ foo: bar }).
Für bracketSameLine siehe: https://prettier.io/docs/en/options.html#bracket-line

Was du in .prettierignore reinschreibst, ist stark von deinem jeweiligem Projekt abhängig. Grundsätzlich sollte da alles rein, was kompiliert wird (vielleicht build-Ordner).

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.

If / else statement inside of React Component’s Render method

Lars Kliesing — Fri, 04 Aug 2017 09:50:11 +0000

Sometimes (well, actually pretty often) you have to use conditional statements inside of React Component’s Render methods.

You could do it like this:

import React from "react";

class MyComponent extends React.Component {
    render() {
        return (
            
                {"LGK" == "awesome" ?
                    LGK is awesome!
                : 
                    LGK is not awesome :C
                }
            
        );
    }
}

This works without any problem. But you always have to set the else part. But in many situations you only need the “if part”.
In this case, this way is much nicer:

import React from "react";

class MyComponent extends React.Component {
    render() {
        return (
            
                {"LGK" == "awesome" &&
                    LGK is awesome!
                }
            
        );
    }
}

Node.js: Check if you are in debug or production mode

Lars Kliesing — Wed, 10 May 2017 08:12:16 +0000

Sometimes you have to use other values in a variable when your application is in production as if when you are debugging it.
For example you have to use another web service URL.

Here is how can do it:

var webApiUrl;

if (process.env.NODE_ENV === "production") {
	// use in production
	webApiUrl = "http://myapp.online/awesome-app/api";
}
else {
	// use on debugging
	webApiUrl = "/api";
}

If you do it like me and use Webpack, you can start the debug mode with webpack -d and the production mode with webpack -p.

JS: Hide an element when clicking on somewhere else

Lars Kliesing — Mon, 08 May 2017 10:54:39 +0000

Hint: I used the functions removeClass() and addClass() to make things easier. You can find them on

See the Pen Hide an element when clicking on somewhere else by Lars Gerrit Kliesing LGK (@lgkonline) on CodePen.

JavaScript “hasClass()”, “addClass()”, “removeClass()” helper functions

Lars Kliesing — Mon, 08 May 2017 10:52:16 +0000

If you’re like me and come from jQuery to pure JavaScript, these helper functions might be very helpful for you:

function hasClass(el, className) {
    if (el.classList)
        return el.classList.contains(className);
    else
        return !!el.className.match(new RegExp('(\\s|^)' + className + '(\\s|$)'));
}

function addClass(el, className) {
    if (el.classList)
        el.classList.add(className);
    else if (!hasClass(el, className)) 
        el.className += " " + className;
}

function removeClass(el, className) {
    if (el.classList)
        el.classList.remove(className);
    else if (hasClass(el, className))
        el.className=el.className.replace(new RegExp('(\\s|^)' + className + '(\\s|$)'), ' ');
}

Try to avoid loops in JavaScript for better performance

Lars Kliesing — Mon, 03 Apr 2017 11:49:14 +0000

Use objects instead of arrays

A benefit of objects is that you can directly call its children elements (properties) by name. While arrays only have index numbers.

Here is a simple example:

const exampleDataArray = [
	{
		id: 8462943,
		name: "Google",
		url: "http://google.com/"
	},
	{
		id: 9847323,
		name: "Amazon",
		url: "http://amazon.com/"
	},
	{
		id: 938442934,
		name: "Twitter",
		url: "http://twitter.com/"
	}
];

function getDataById(id) {
	for (let i = 0; i < exampleDataArray.length; i++) {
		if (exampleDataArray[i].id === id) {
			return exampleDataArray[i];
		}
	}
}

So in this example when I want to get an item by its ID or any other property I have to go through each other item first. Depending on how many items you have and how often you need to get one item, it can take lot of time.

If you use an object instead of an array it could look like this:

const exampleDataObject = {
	8462943: {
		name: "Google",
		url: "http://google.com/"
	},
	9847323: {
		name: "Amazon",
		url: "http://amazon.com/"
	},
	938442934: {
		name: "Twitter",
		url: "http://twitter.com/"
	}
};

function getDataById(id) {
	return exampleDataObject[id];
}

This way we can directly point to the item we want and don't have to use a loop.

Die komfortable Art, JavaScript- und CSS-Dateien zu kombinieren — mit Miniphpy

Lars Kliesing — Sat, 31 Oct 2015 16:51:23 +0000

In den Artikeln Traffic verringern: JavaScript-Dateien kombinieren und Website-Gestaltung: Beschleunigung durch Kombinieren von CSS-Dateien bin ich bereits darauf eingegangen, dass es Sinn macht, bei Web-Projekten CSS- und JavaScript-Dateien zusammenzufassen, um mehrfaches Abfragen einzelner Dateien zu verhindern.

Verwendet man CSS Pre-Prozessoren wie LESS oder Sass, ist es ziemlich einfach, seine Stylesheets zu kombinieren. Seit einiger Zeit nutze ich für das Kompilieren von LESS-Dateien die Anwendung Koala.

Nur für das Kombinieren von JavaScript-Dateien habe ich bisher noch keine Lösung gefunden. Und deswegen habe ich mir einfach selbst eine gemacht: Miniphpy

Durch das Web-Interface kannst du deine Dateien zu Bündel kombinieren. Um auf Dateien zu verweisen, kannst du entweder einen lokalen Pfad oder eine URI zu einer Datei angeben.

Die Dateien werden dann, abhängig von der Reihenfolge, zusammgefügt und anschließend komprimiert.

Hierbei kannst du wählen, ob die Komprimierung lokal (erfolgt mithilfe von Bibliotheken, die in Miniphpy enthalten sind) oder remote (dabei werden APIs der Komprimierungs-Dienste http://javascript-minifier.com/ und http://cssminifier.com/ verwendet) passieren soll.

Da Miniphpy eine PHP-Anwendung ist, musst du Apache (z.B. durch XAMPP) auf deinem PC am Laufen haben.

Download Miniphpy Version 1.0 (ZIP) Zu GitHub