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): <input type="color">

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. ^^

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.

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.

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.

To have a dark mode is a more and more common thing. But it can be pretty tricky.

Lea Verou wrote an awesome article how you can handle this task with CSS and custom properties in a pretty nice way:

Dark mode in 5 minutes, with inverted lightness variables – Lea Verou

I already followed that guide for my latest web project.

Auf der Website bekommst du auch einen guten Eindruck, was sich geändert hat. Unter anderem neue Formen und neue Animationen.

Was ich am spannendsten finde: dynamische Farben.

Google hat in Android 12 ein Algorithmus integriert, der Farbtöne aus dem Wallpaper der Nutzer:innen extrahiert, die vom UI verwendet werden können. So bekommen die Apps eine persönlichere Note.

Ich habe kein Android-Gerät, deswegen konnte ich das Feature noch nicht selbst ausprobieren.

Umsetzung für Webseiten?

Bisher ist Material You hauptsächlich für Android vorgesehen, es wird aber eine Frage der Zeit sein, dass auch an Web gedacht wird. Webseiten haben keine direkte Möglichkeit, den Wallpaper vom Betriebssystem abzugreifen.

Möglicherweise wird Google für Chrome die Theme-Farben als CSS-Variablen liefern, sodass Webentwickler:innen diese einfach nutzen können. Andere Chromium-Browser (wie Edge) könnten diese API dann ebenfalls erhalten.

Übergangslösung

Ich habe ein wenig experimentiert und Farben aus dem Standard-Wallpaper aus macOS Monterey mit Hilfe von Adobe Color extrahiert.

Den Dark Mode habe ich ebenfalls berücksichtigt:

In nächsten Schritten könnte man mit JavaScript herausfinden, welches Betriebssystem verwendet wird und jeweils Farben der Standard-Wallpaper anwenden.

Oder man erlaubt, Benutzer:innen ein Bild zum Analysieren hochzuladen/auszuwählen. Das halte ich allerdings für einen nicht sehr eleganten Ansatz.

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.

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.

Das ist ein Node.js-Modul. Um es zu verwenden, muss also Node.js installiert sein.

Um UglifyJS2 zu installieren, tippe Folgendes in ein Konsolen-Programm ein (ich benutze gerne PowerShell):

npm install uglify-js -g

Navigiere anschließend mit cd zu deinem Projekt-Ordner.

In meinem Beispiel sieht mein Projekt-Ordner so aus:

Führe nun diesen Befehl aus:

uglifyjs js/jquery.js js/main.js js/search.js -o js/script.min.js

Zuerst kommt der Befehl uglifyjs, anschließend die zu kombinierenden Dateien (durch Leerzeichen getrennt). Das -o steht für “Output” und kennzeichnet die Ausgabe-Datei. In diesem Fall js/script.min.js.

Wichtig bei der Eingabe ist auch die Reihenfolge der Dateien.

Anschließend müsste unser Ordner so aussehen:

Und aus:

wird:

Erweiterungen für Entwicklungsumgebungen?

Für Brackets habe ich ein passendes Plugin gefunden: JSCompiler2

Durch eine Konfigurations-Datei können somit auch die Ein- und Ausgabe-Dateien gespeichert werden, sodass für eine Neu-Kompilierung nur noch ein Knopfdruck nötig ist. Ziemlich praktisch also.

Für NetBeans scheint es nichts dergleichen zu geben. Für PHPStorm lässt sich UglifyJS anscheind einrichten: https://www.jetbrains.com/phpstorm/help/minifying-javascript.html

Ich habe auch einen Artikel über das Kombinieren von CSS-Dateien geschrieben: Website-Gestaltung: Beschleunigung durch Kombinieren von CSS-Dateien

Ab sofort können sich Nutzer bei Colorganize ganz einfach mit seinem Twitter-Account einloggen.
Es ist keine extra Registrierung nötig.

Klicke einfach auf den Button “Sign in with Twitter” und autorisiere Colorganize als Twitter-App.

Es ist geplant, weitere Login-Möglichkeiten einzubringen (Facebook, Google etc.).

Teste es gleich aus: colorganize.com

Der Farb-Picker ist zurück!

Seit dem Redesign fehlte der bisher enthaltene Farb-Picker. Dieser ist nun wieder da.
Klicke im Farb-Modal einfach auf das Tropfen-Symbol und er erscheint.

Ideen für die Zukunft

Neben der Möglichkeit, sich mit verschiedenen Diensten einzuloggen, wünsche ich mir, dass Farbpaletten geteilt werden können.
Nutzer können von einer ihrer Paletten eine URL erhalten, die sie dann weitergeben können. Die Empfänger müssen nicht bei Colorganize eingeloggt sein.

Ebenfalls wäre es nett, wenn Nutzer ihre Paletten auf eigenen Projekt-Seiten einbetten könnten.

Mal sehen, inwiefern ich es schaffe, diese Ideen umzusetzen… ^^

Eine Entwicklungsumgebung beschäftigt sich mit der Erstellung von HTML, CSS usw. Also zur Entwicklung einfacher Webseiten.

Anders als Dreamweaver, ist Edge Code nicht so mit Funktionen überladen, sondern liefert nur das nötigste.

Edge Code befindet sich zwar noch in der Entwicklungs-Phase, bietet aber bereits einige nützliche Features.

Mit Live Preview zum Beispiel, braucht man lediglich Strg + Alt + P drücken, und die Seite, an der man gerade arbeitet, wird direkt im Browser angezeigt.

Mit Strg + E lässt sich ein markiertes HTML-Element direkt stylen, ohne dass man extra zur CSS-Datei wechseln muss.

Momentan gibt es Edge Code nur als Preview und gratis zum Downloaden. Hoffentlich bleibt auch die finale Version kostenlos. Das Programm hat eine aufgeräumte Oberfläche und macht die Web-Entwicklung einfach smarter.

Edge Code und weitere interessante Teile der Adobe Edge-Familie findest du hier: http://html.adobe.com/edge/

Ich habe heute eine Funktion in LGK Start eingeführt, die ich mir schon länger gewünscht habe:
Das Beibehalten eines Suchwortes beim Wechsel in einen anderen Suchdienst.

Wenn ich meine Startseite aufrufe und nach einem Bild suchen will, habe ich es aus Versehen in der Websuche eingeben.
Was jetzt tun? Nach “Google Bilder” wechseln und die Eingabe erneut machen.

Das ist zwar kein Weltuntergang, aber ich als Betreiber von LGK Start, wollte den Nutzern diese “Qual” ersparen.

Wie funktioniert das Ganze nun?

Ganz einfach:

1. Du machst eine ganz normale Sucheingabe.
2. Aktiviere den Haken ganz links in der Eingabeleiste.
3. Fertig.
   Deine Eingabe bleibt erhalten. Jetzt kannst du einfach in einen anderen Suchdienst, wie z.B. Wikipedia wechseln.

Angepasstes Design

Memory ist auch einer der Gründe, warum ich das Design noch weiter verändert habe.
Denn die Suchleiste wurde allmählich zu eng und auch die Suchdienst-Buttons wirkten etwas gequetscht.

Außerdem auch, weil ich vor ein paar Tagen die Schriftart der Eingabe auf Dekar geändert habe und die Schrift damit ebenfalls vergrößert werden musste.

Also habe ich das Ganze mehr in den Mittelpunkt verschoben und alles ein wenig breiter gemacht.

Zu LGK Start: lgkonline.de/start »