I created this on a long time ago, this week I tried to do the blue one, but honestly I’m not too pleased with the results I’ve gotten so far. I got an OK result after a while but it wasn’t as easy as the other.
Design background
The look I was going for is these huge buttons from the ’50s opposite to today’s all plastic, super-low depth piezoelectric buttons hollow buttons, or even capacitive buttons on appliances, devices and even machinery (i.e. cars) where it makes no effing sense! Sidenote: remember ’s 3D touch and the fake home button button? Right not I’m not a fan of but that was a good implementation of capacitance—of course, Tim Cooks’ Apple kills stuff quicker than Google kills projects, so that’s gone now.
The buttons I’m talking about, mostly in those old huge round cars with the giant hood, they weren’t exactly buttons, they were more like levers, well… more like a rod you pushed and pulled slightly concave, their face was some sort of embossed/stamped/pressed/whatever plastic, chromed with shiny backing I think; however given the era it may have real pressed metal. IDK, that was decades before I was born, but that look is still in used in cars and appliances today: the start button in cars is a bigger, smooth and matte version of that, except without the giant rod behind it connecting it to the wheel were the donkey is chasing a carrot under the hood or whatever they did. Now behind it, there’s one or more LEDs, an NFC reader, your daily commute sent to a server in real time for bidding and/or surveillance, y’know, progress.
In the case of the blue one; it’s obviously much darker than the original design, that was just because of that shiny finish of the material I was referring to before, colors seemed to be darker until sunlight hit them, I still went a little darker though, so it wouldn’t look cartoonish.
Because of the shadows, the artboards will look a little off-center if you open the file in an editor but it is centered. I’ve OCPD; it has to be.
Files’ info
So… there was an issue exporting SVGs. It turns out the blending can be reproduced in that format, the end result was either without the effects that were the thing that took the most time to make it look good or rasterizing part of the file. I weighted the options exporting on the other open formats I had available: EPS (PostScript v3) and PDF. PDF completely lost all vector information, EPS came out exactly like SVG but glitchier.
I’m attaching the original Affinity Designer AFDESIGN file as well, but it’s not an open format nor as popular as AI, so I exported PNG in twice the original size.
Other specs
Document resolution
400 DPI
Artboard dimensions
2048px × 2048px
Color format
RGB/32 (HDR)
Color profile
sRGB IEC61966-2.1 (Linear)
Alpha channel
✔︎
The PNGs have already been compressed, the space saving was very impressive, I didn’t not expect that:
Sizes in megabytes. The ZIP contains all of the above. Individually you can get them by completing the URL https://fetch.vitanetworks.link/static/embed/designmaster/qbittorrent/ with the desired filename. BTW, that’s “designmaster” as “CD master”, “main copy of…”, it isn’t a self-given title. Gawd, these italics are hideous. I need to fix it soon.
Some time ago I posted an article about DokuWiki, I don’t remember what it was. The site was new. It’s still new, it’s perpetually new since I barely do anything to it so articles are more like placeholders to evaluate what is the look I want, I needed to some image for that post.
I may be still finding my ways and I’m aware that I will make mistakes like a beautiful young geisha who got railed by a soccer team and broke character in the moment, that’s fine. But like the geisha, I have something very well semented cemented: I want as little color as possible other than in accents, and maybe a soccer team. So for like the fourth time this week, I created another logo.
Logo in the hero
UPDATE
Since the original, the design has been updated for a third time. This post has been mostly rewritten to reflect that.
After the first version, I bet you cannot guess what came next. You better sit down for this…
Ready?…
The second version! Wow!, I know, right?!
“Can’t innovate, my ass!”
Phil Schiller
v2
What are those lines inside the letters, I hear no one ask?
DokuWiki’s original, official, logo is a little too busy for me. I has too much color yet not enough. What I mean is that it’s a faded old-librarian-looking sort of color palette, which I guess in a way is fitting for the kind of web app it is.
But why though? There’s no need to evoke the old paper look, we do things on screens now. Recently there was an effort to save Ukraine’s digital history because of its invasion and even the big giant library, Wikipedia, got a refreshed look as well. At least in the posts of my site/intranet, I’m going to try to make DokuWiki look the best I can with my non-existent developer skills.
Reading some article DokuWiki’s website I learned that the arrows of the original design are supposed to symbolize hyperlinks while the different-colored pencils mean collaborative editing.
Oddly enough I arrived to the same conclusion but for completely different reasons: see, to me having different colors on the pencils is either a way to not make the design look repetitive or could be because of the formatting (styling) of an article e.g. title, headers, code boxes, links, etc. The arrows were an indication of the pencils moving, while being two of them I thought it meant simultaneous collaborative editing.
So, yeah… kind of the same conclusion but followed a completely different path to get there.
I decided to leave that behind. I outlined the old logo because it would be a smoother transition and out of respect for the original author, I took a little inspiration from what I’ve learned from my own progress since I started designing my own stuff, there is this handwritten logo I made before. I wouldn’t do another handwritten logo though, it’d look just lazy and sloppy, but I wanted to incorporate either handwriting or some sort of cursive or long stroke text styling. “DokuWiki” is a wide word, I like elongated, very stylized things. I gravitate heavily towards minimalist design but I don’t give a f**k if it’s not true minimalism, I’m only in it for the looks not so much the practical side of it.
So if it can’t be slender and colorless, heroin chic, then go all the way in the opposite direction. Exacerbate the width, go for bold. And so I did.
So, where does the handwritten comes in?
Inside! The extra width allow to ornament the text from within so it still has a clean(-enough) silhouette. Imagine you have one of those lamps to look at x-ray film:
Full disclo, I don’t know what the name of the device is so I could look up a picture to make an illustration of it, so this is the second thing I pulled out of my ass today. 🙂
The design is still usable using only the its outline, e.g like for stationary or whatever, like I said, I’m not exactly big on print.
Then why bother?
Because somewhere I read… or heard… IDK, that logos should work in one or two colors, and because if deemed worthy, all of these logos I’ve been making for other people/brands/organizations, I intent to give the rights to them to their respective prospective owners. What good do they do just sitting there on some intranet website or single post on a single site when they can serve much better the projects’ owners? Right?
And in the case of DokuWiki, it’s1 letting me use this awesome tool for free, it’s the least I can do to give back. It’s most likely to get ignored anyway since it1 seems to be all in in the sepia theme.
DokuWiki — the organization/project
UPDATE NÚMERO TRES
Some day in April 2023
So, the other day I was doing something totally very interesting — and I know because somebody told me “that’s totally very interesting what you are doing” when I told them to tell me — and I saw this (current) page and I didn’t like my design anymore, some of it.
On the senseirum, the place where the Jedi keep the dragon balls and where the sensei (past and current) meet in telespiritference, but most importantly where the ultimate knowledge of nothing is kept and has been fiercely guarded for millennial; the sensei relayed to me the theory that the more time you spend working on something, the more likely you are of Stockholm Syndrome yourself into liking it and I think that happened to me.
There was something off. I made a few more modifications and dialed down the effects used on the design. I replaced the most of the alpha-blending effects with their results applied directly as opaque fillings so at the time of exporting SVGs the incompatibilities were minimized. I also confident-black-womaned (or in certain markets: “dad-bodded”, “hot daddyed“) part of it to be more uniform, because part of the reason I created my own logo, was not only giving it neutral colors but also making it look a little less haphazardly put, still preserving the original author’s design a little.
Last minute, I found out that part of the incompatibilities of SVG exports were due to the color format the design had; it had originally RGB/32 (HDR) color format, after changing it to RGB/16 now it exports OK. However, even if it didn’t, the changes are done so it should have minimal issues across different devices.
I downsized the number of objects as well, for instance; in the previous designs, the whole image was backed by a white bottom of its own outline because otherwise the blending would darken or lighten pseudorandomly colors behind it, and therefore the image itself.
In the end, it came up more minimalist than I expected anyway.
Files
In the first two versions, I exported to hi-res PNG, the original multi-artboard AFDESIGN (Serif Affinity Designer) file, SVGs, PSD, EPS, EXR and HDR. Neither SVG nor EPS exported correctly so I threw in PSD (which seems to support vector data) and HDR and EXR because they seemed fancy enough that they might be usable tor recover information to reconstruct the SVGs.
That’s no longer necessary, so there are only SVGs and PNGs this time. There’s an simple HTML file that should be easy (enough) to edit to preview the SVG files with transparency.
An finally the original AFDESIGN file which also includes the previous version and a fourth text-only version of the design which I didn’t mention earlier because it’s unfinished. I don’t think I can finish it because I’m teaching all the padawan Advanced Telekinesis and Introduction to the Dark Arts this millenial, and right on cue the anti-dark arts matter protesters won’t go away. Without zen in the gardens, the padawan can’t be taught, y’know how it is…
All the files are in the ZIP. You can get them individually by appending the filename to the URL; https://fetch.vitanetworks.link/static/embed/designmaster/dokuwiki/
Meta
Document resolution
400 DPI
Artboard dimensions – squared
1024px × 1024px
Artboard dimensions – banner/header-type
5400px × 1024px
Color format
RGB/32 (HDR)
Color profile
sRGB IEC61966-2.1 (Linear)
Alpha channel
✔︎
v1, v2
Document resolution
400 DPI
Artboard dimensions – squared
1024px × 1024px
Artboard dimensions – banner/header-type
5400px × 1024px
Color format
RGB/16
Color profile
sRGB IEC61966-2.1 (Linear)
Alpha channel
✔︎
v3
Preview
Below in the upper artboart, in the lower artboard is the unfinished design.
Last time, there was long explanation spanning many paragraphs about design decisions/elements, why this and that. I’m summarizing that in a single annotated image. It does a quicker job and I think most can be inferred from it.
Yes, it is a single image, right click it or drag it out of the browser to save and you’ll see.
Just outside of the view, the previous design is still included as well as a fourth text-only design that I wasn’t convinced it was good enough.
except not like for real since I’m still testing things, anyhoo, where was I? If you follow…blah blah…years, oh yeah, back on track.
I wrote earlier I’m designing a them for rEFInd, both the theme and the article about the theme are unfinished yet somehow public, today my absurdly disconnected train of thought lead me to a Wikipedia page about a Cisco OS, which in turn reminded me about creating icons for pfSense, OPNsense and Mikrotik CHR, three firewall/routers I use heavily, simultaneously too, and in one of these pages at the bottom in the semantic articles thingy I saw IPFire.
Might as well, I thought, so I clicked the link expecting to get an SVG from its Wikipedia page that I could modify, or base-on, or get-inspired-by to use in my theme. That had been my MO since I did the deceivingly simple CentOS logo from scratch only to discover the SVGs were on Wikipedia. Not this time, this is the image reference in the article:
I was already distracted (and by the way: I’m only realizing it now), so I went to the site looking for a press kit or something like that. Companies always have something along the lines. Nothing.
I even went to the user forums straight to the non-help section to see if I found some fan fiction or whatever the F it’s called. Nothing.
So I got to work.
I didn’t want the fucking penguin. Penguins, the birds are adorable, but no drawing of them has ever been able to convey that, if anything I think it’s like… um… you know about chroma subsampling or ray tracing? Me neither. But there is people who do, yet oftentimes these are the same that think orange is an OK color. Wait… I just thought about a better example: Ubuntu, more appropriately blind brand loyalty. Have you noticed a lot of software GUIs are orange? Now, this is only speculation of mine, but I think it comes from Ubuntu, a free Linux distribution that at a point was the most popular in the world, it still is popular, I think this site is hosted on Ubuntu, I don’t remember. People when they get offered a “free” product or regard something as influential (because it was at some point) tend to go all in; more examples of this are: Google’s Material Design everywhere beyond the Android screen, or iOS-themed Android themes, or on the flipside the Windows look and, ehm.. “feel” on Linux desktop environments, the Louis Vuitton or Coach patterns on men’s clothing/accessories…
I tried IPFire many, MANY years back, back then it had this rather refreshing take on firewalls in color zones, as far as I remember. Which is what you see see on Cockpit if you’re using Fedora or Red Hat Enterprise Linux with firewalld enabled. To this day I haven’t see other firewall distribution that has taken advantage of it.
I only used IPFire for a few minutes, it just wasn’t featured enough and though it was very user-friendly, the color zones template system was only going to get in the way. It wasn’t the fit for me, but now that’s in my head again I can’t finish the list of people to whom I could recommend it since they’d actually benefit from it as it was all those years ago. I have a feeling it’s evolved since then, I won’t try to find out because my network if sort of OK right now and I’ve a million things to finish.
2023-07-12 Update
I’ve found a few firewalls that use zones since then. I have also actually tried finishing a working firewall using IPFire too and sadly I discovered the zones thing is actually pretty restrictive in terms of how can you set it up and works against you rather than for you. Other platforms with zones make them optional but IPFire seems to mandate them with p reestablished operation modes with only 1 out of 4 being best practice but even so in order to use the good one you’re forced to use the ones dictated for you in your main interfaces (WAN, main LAN) which, by the way, require a physical interface each without the option to put a . and sort it out later. Sadly, the shortsightedness made it impossible for me to use or recommend IPFire. It’s a shame though, it has a lot potential, were it not be arbitrarily restricted.
Anyway, long story longer, I put “IPFire” on the artboard, and stared at it for a good 10 minutes. I already went into a rant why I’m not using a penguin, plus, live birds engulfed in fire is a little too murdery for me. Then there’s the fire itself which is not only difficult to draw, it’s also messy and it’s already spelled in the name. So it’s kind of redundant.
I thought about bricks, like my own Routelogic logo, here flat:
I kinda really like that, and I’m not just designing things for a stupid theme, if the things I do can serve others, I’m happy to let go of them so they do their best. Right?
Routelogic though, I like, plus of all the things involved setting up network infrastructure, coming up with names memorable and understandable in several languages is the hardest. I’m not quite ready to let go of it and IPFire deserves its own thing anyway.
Heads up
About three days have passed since I started writing the first draft of this. I even made another design (for DokuWiki) in the meantime; I may have forgotten what I wrote and I ain’t going back.
I kinda recycled something, to be honest. But it was something I drew from scratch to mean generic Linux, a more contemporary tux in profile, I was avoiding the penguin when I drew that too.
If they had a penguin burning alive, it must’ve meant they were really keen about the flames, so I found a way to add them back (☑︎) and even using them to avoid spelling FIRE (☑︎) by containing them in the letters themselves, the colors are several grayscale gradients with blending effects and I inverted the heat map (the hotter part at the core of the fire should be a lighter color, but it just looked better the other way around and because of the blending it would need too many layers doing it like that.
Organic Ads Just kidding!: The Tux
I actually researched this → While I’ve been wearing black tie forever, I like it so I never really gave it much thought. The jacket with the coattails is actually worn in white tie jackets — more formal than black tie — the jacket is still black (or white). The tux used to be the white tie jacket in the ’50s, give or take, but since then the tux evolved to the less formal black tie jacket/suit. It no longer has coattails. And you probably already know about Tuxedo, NY. Or at least I think it was NY, I might need to check that.
Header/banner/HERO style
ICON (SQ) style
Getting it
This should probably be a good moment that, in addition to allowing hotlinking, server logs last until shutdown and I’m not tracking what you do while you visit or after you visit, just FYI. Sidenote: If you see a little number on top of uBlock Origin little shield icon, please let me know at v at antipostal.com or mail at senseivita.com
I exported PNGs and SVGs of the original. The original, an AFDESIGN file is also included. I didn’t check if the SVGs were exported faithfully, sometimes they aren’t, but hopefully you have access to Affinity Designer so you don’t need them anyway.
PNGs always are exported fine, the document’s resolution is 400DPI, and all files are 3750px wide. You should be fine with the only PNGs as well. For reference, the image at the top of this page is 2560px wide.
I’m about to finish, I promise, I just need to put a couple of things together first.
All files are included in ipfire.zip. For the individual links, complete this URL with the the desired filename in the placeholder: https://fetch.vitanetworks.link/static/embed/designmaster/ipfire/<filename>. Non-TLS access is allowed.
I was having trouble uploading images, strangely enough after I fixed it I realized I forgot to take a screenshot of the error, so I tried to unfix it but it guess it’s gone for good. Anyway, according to my search terms the error read something like: “Error creating folder * (mkdir(): File exists)”. Where “*” is a wildcard for a file path which would make it harder to find results otherwise.
It showed way too many results, apparently this is a common PHP error. Prefixing my search with the word “dokuwiki” narrowed it down and soon I find half the answer I was looking for.
Apparently the media folder locks down mod_authz_host-based access with an .htaccess file. What is mod_authz_host ? It simply means “Group authorizations based on host (name or IP address)” according to the HTTP Server Project‘s Module Index. In other words, you cannot request the files directly since your request would be coming from a system—which has an IP address.
However, requests for the filesystem coming by other means, such as processes running on the server (like PHP), can still get them and present them differently to the client (the browser).
Regardless, FCKeditor/Ckgedit can bypass this by symlinking the media directory (ref/data/media — ref is my DokuWiki root) into FCKeditor/Ckgedit’s own file structure at ref/lib/plugins/ckgedit/fckeditor/userfiles. Filesystem-wise, symlinking immediately grants the symlinked location 777 permissions, and I believe they can’t be changed. (I’ve had mixed results attempting this and, in the cases I’ve been successful, the change is only recognized by some systems, not all.)
UPDATE 1
I mean… Only a day passed when I found out symlinks can indeed change ownership. Seriously!—Every time I say something I prove myself wrong the next minute. You should not believe a word written in here. You use the -h short option in both chmod and chown, BTW, the long option is --no-deference only in chown. I think chmod doesn’t have a long option for this. But why should you believe me!? 😛
UPDATE 2
Never mind. That (chmod) only seems to work in macOS. I’m testing systems, so far on Fedora 36, Red Hat Enterprise Linux 8.6, Ubuntu 20.04.5 LTS can’t be done. On macOS 10.13 and FreeBSD 13.0 can be done. chown works everywhere though. See? This is what I’m talking about; just a minute later. I didn’t test more system bc suddenly I’m blanking on their (host)names for some reason. I have at least one Debian (version), one Zorin OS, I’m not so sure about FreeBSD, usually they’re pretty uniform on their versions…
If you remove the symlink from FCKeditor/Ckgedit’s directories, then the next time you summon the UI to upload an image it automatically recreates it as a regular directory which of course it won’t have access to your existing data which means you’ll end up duplicating it. If you recreate the symlink on your own the error returns.
When FCKeditor/Ckgedit recreates its image directory as a directory, not a symlink. other was automatically added because of the namespace I was in but otherwise it’s an empty file structure.
According to the articles I read, all you have to do is copy one of the .htaccess samples from the userfiles directory mentioned earlier, .htaccess.security, into the real media directory and you’re done.
However, I did and I wasn’t.
The sample file’s content is:
<IfModule mod_authz_host>
Require all denied
</IfModule>
<IfModule !mod_authz_host>
Order allow,deny
Deny from all
</IfModule>
<FilesMatch "\.(gif|jpe?g|png)$">
<IfModule mod_authz_host>
Require all granted
</IfModule>
<IfModule !mod_authz_host>
Order allow,deny
Allow from all
</IfModule>
</FilesMatch>
Options -Indexes
Now, stop me if you’ve seen this before, specifically the last line.
Right?! That’s what I thought too. It’s like we’re twins. We should definitely start calling each other “bitch” and “dumb slut”. Hashtag BFFs.
So bitch…
I added on it +FollowSymLinks, I tried again et voici ci-dessous !
Now showing more stuff, it still looks emptyish because there isn’t much on the wiki.
I also augmented the file extensions allowed to be served:
<IfModule mod_authz_host>
Require all denied
</IfModule>
<IfModule !mod_authz_host>
Order allow,deny
Deny from all
</IfModule>
<FilesMatch "\.(gif|jpe?g|png|svg|pdf|mov|mp4|mp3|m4a|ai|psd|aiff|tiff|pxm)$">
<IfModule mod_authz_host>
Require all granted
</IfModule>
<IfModule !mod_authz_host>
Order allow,deny
Allow from all
</IfModule>
</FilesMatch>
Options -Indexes +FollowSymLinks
Getting ambiguities out of the way
The contents of ref/data/media/.htaccess is a copy of ref/lib/plugins/ckgedit/fckeditor/userfiles/.htaccess.security:
<IfModule mod_authz_host>
Require all denied
</IfModule>
<IfModule !mod_authz_host>
Order allow,deny
Deny from all
</IfModule>
<FilesMatch "\.(gif|jpe?g|png|svg|pdf|mov|mp4|mp3|m4a|ai|psd|aiff|tiff|pxm)$">
<IfModule mod_authz_host>
Require all granted
</IfModule>
<IfModule !mod_authz_host>
Order allow,deny
Allow from all
</IfModule>
</FilesMatch>
Options -Indexes
At this point I had gone rogue and I had edited the file directly which is advised not to do. However, I left the last line untouched.
The contents of ref/lib/plugins/ckgedit/fckeditor/userfiles/.htaccess is: → this is the important file ⤵︎
<IfModule mod_authz_host>
Require all denied
</IfModule>
<IfModule !mod_authz_host>
Order allow,deny
Deny from all
</IfModule>
<FilesMatch "\.(gif|jpe?g|png|svg|pdf|mov|mp4|mp3|m4a|ai|psd|aiff|tiff|pxm)$">
<IfModule mod_authz_host>
Require all granted
</IfModule>
<IfModule !mod_authz_host>
Order allow,deny
Allow from all
</IfModule>
</FilesMatch>
Options -Indexes +FollowSymLinks
If you deleted the symlink too, to recreate it, in the command line navigate to your media folder using the pushd command instead of cd.
If you deleted the symlink too, to recreate it, in the command line navigate to your media folder using the pushd command instead of cd. Why? Because it prints the last directory you were each time you change to a new one. You can copy and paste it.
Objects are closer than they appear
The last step is fixing permissions. In Debian upstream, httpd’s default user is www-data:www-data. In Fedora upstream it’s apache:apache. I don’t know what’s the user on xBSD, but just list the files in other directories of your DokuWiki install with the long format option (ls -l) and you should be able to infer it from it. Now, assuming you’re on the last directory we were (image above), run:
# replace user:group with your distributions respective values
chown -fR user:group "$(pwd)"
# you can't really change this on symlinks but it's just for housekeeping (the other files)
# '"$(pwd)"' is your current path, '-fR' includes the contents said path no Qs asked
chmod -fR 755 "$(pwd)"
I doubt this people will ever see this, but if some permalink magic is at work and it finds its way back, I’d like to thank them for getting me on the right path…literally.
Personal notes
I’ve observed that normally it’s expected for the website files to be on the web server itself. I expect to be hacked, to fuck up my server, to delete all the directories using something irreversible like rm -fR, or to do some other stupidity as I often do, thus as a safety measure my server’s files are on NFS mounts which are symlinked kinda heavily. Even if I delete things from the CLI, the backend servers are taking both constant backups and snapshots automatically of the files letting me revert from stupidity, plus you know a bitch likes to serve that chunky media which like all good dicks, has trouble fitting into my tiny disk, a mount. hashtag wink, is necessary.
Point is, It might be the reason why the guides above didn’t work, though the guides themselves use symlinks, so it could’ve been an oversight as well. IDK.
Messages from Sensei Vita’s Temple
Non-ESA ESA-vested pet (17:00 PST) or ESA-vested bondage partner (17:30 PST) videoconf frozen yogo yoga with resident Israeli-American instructor Terry Shirah York is available on Microsoft Teams again. The Azure support staff has assured us that the service will be very reliable as long as it’s not raining, Friday or Saturday.
