Web Design – LGK Blog

Gedanken zu Material You für Web

Lars Kliesing — Thu, 28 Oct 2021 06:58:20 +0000

Material Design, die Designsprache von Google, bekommt in Android 12 ein großes Update: Material You. Es gibt jetzt auch einen offiziellen Guide: Material Design 3.

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.

Quelle: Material Design 3

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.

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.

Website-Gestaltung: Beschleunigung durch Kombinieren von CSS-Dateien

Lars Kliesing — Fri, 08 May 2015 14:50:03 +0000

Wer in einem Web-Projekt viele verschiedene CSS- und JavaScript-Bibliotheken verwendet, wird feststellen, dass sich im Quellcode eine Menge HTTP-Anfragen anhäufen können:

...

Die feine Art ist das nicht. Der Browser muss so bei jedem Seitenaufruf jede einzelne Datei abklappern. Je nach Internet-Leistung des Besuchers kann das eine Weile dauern.
Und jede Millisekunde, die der Nutzer warten muss, ist eine Gefahr, dass dieser die Seite wieder verlassen will.

In diesem Artikel möchte ich ein paar Tipps geben, wie ihr CSS-Dateien kombinieren könnt, sodass der Browser nur noch jeweils eine Datei abfragen muss.

Los geht’s: CSS-Dateien mit LESS verbinden

LESS ist ein CSS Pre-Prozessor. LESS-Dateien beinhalten erweiterten CSS-Code, welcher anschließend durch einen Compiler zu einer normalen CSS-Datei kompiliert wird.

LESS-Dateien können mehrere LESS-Dateien importieren. Die kompilierte CSS-Datei sieht dann so aus, als hätte ich einfach die einzelnen Codes hintereinander eingefügt.

Beispiel

./less/main.less

body {
	font-family: "Arial", sans-serif;
	font-size: 14px;
	color: #000;
}

./less/home.less

#nav li#home {
	font-weight: bold;
	background-color: orange;
}

./less/style.less

@import url("main.less");
@import url("home.less");

LESS-Compiler generiert CSS

./css/style.css

body {
	font-family: "Arial", sans-serif;
	font-size: 14px;
	color: #000;
}
#nav li#home {
	font-weight: bold;
	background-color: orange;
}

CSS-Datei minimiert

./css/style.min.css

body{font-family:Arial,sans-serif;font-size:14px;color:#000}#nav li#home{font-weight:700;background-color:orange}

Bei vielen CSS-Dateien macht das auf jeden Fall Sinn. Für viele Entwicklungsumgebungen und Code-Editor gibt es passende Plugins, welche aus LESS-Dateien automatisch CSS-Dateien generieren. Unter anderem für Brackets, Visual Studio oder auch NetBeans.

In dem Beispiel habe ich die style.css außerdem noch minimiert (zu: style.min.css). So schrumpft auch nochmal die Größe der End-Datei. Auch hierfür gibt es entsprechende Plugins. Mit CSS Minifier geht das auch online.

Vorher / nachher

Wenn wir das auch noch mit unseren CSS-Frameworks machen wird aus:

schnell das hier:

Was beachtet sei: Drch die Kombinierung ändern sich auch die Verweise. Bei Bootstrap bespielsweise müssen dann die Verweise zu den Font-Dateien geändert werden.
Öffne dafür die bootstrap.less und ersetze alle ../fonts/ durch ../lib/bootstrap/fonts/.

JavaScript-Dateien kombinieren

Gut, die Stylesheets haben wir somit auf eine Datei reduziert. Doch auch bei den JavaScript-Dateien auf einer Seite kann sich einiges ansammeln.

In einem seperaten Artikel möchte ich darauf eingehen, JavaScript-Dateien zu kombinieren.
Der Link wird dann hier angefügt.