I AM LISTENING TO
|
WHAT I LIKE
  • English
  • German
BLOG FILTER

Watching from the sidelines

VR has not just arrived, but it finally arrived for me and the masses ;)

I have been watching VR evolving from the sidelines for the past few years. Its been a fun ride, from the first prototypes to what we have now.

The biggest problem in the past, has been image quality and the huge upfront investment for me. With the latest generation all of this has completely changed.

As a developer …

I am constantly keeping up with new technologies and have been diving into WebVR for some time now.

Its so easy to export your own simple Unity VR project into WebVR and integrate it into your own web projects.

Unreal Engine also provides options to work on VR projects. Or build upon the WebXR API.

Microsoft also has a foot in the door, with MRTK (Allows to integrate teleporting easily / Releases).

Oculus Quest 2

With the announcement of the Oculus Quest 2 last year, I finally decided to dive in myself. Standalone VR allows me to concentrate on WebVR and experiment, while still having the option to expand into the linked PC-universe in the future as well.

PC Link / PC Rig

I have no plans to invest into a beefy gaming rig yet, but have been trying out cloud solutions using Shadow and Paperspace Gaming / Paperspace $10 Coupon (KS4Q2TA).

Update: Latency is the biggest problem with these solutions and it can be a hit & miss! My Paperspace experience was close to perfect for pure desktop experiences, for VR sadly not :) Can not testdrive Shadow right now, as the waitinglist is already showing September 2021 LOL CRAZY! Local latency can be greatly optimized by using Wi-Fi 6 or Wi-Fi Direct.

With the current GPU prices, building a machine makes hardly any sense. I would love to build a small form-factor PC with a Shuttle XPC for example ;) Maybe later this year ….

I invested in VR-Comfort for now ;) I transformed the Oculus Quest 2 into a FrankenQuest with the DAS-Mod (HTC VR VIVE Deluxe Audio Strap). Loving the new look, audio and perfect weight balance :) Perfect for longer sessions.

Interesting Platforms

There are many new platforms providing access to new tools and often an easy access to a broader community. Some of them with nice build tools in VR.

Open Source

OpenXR is an open, royalty-free standard for access to virtual reality and augmented reality platforms and devices. It is developed by a working group managed by the Khronos Group consortium.”

You will find a bunch of efforts on the way, to build the next open multi-platform VR solution.

Building experiences in VR

Building with Unity is always an option, but not the best solution for those that are just getting started or for those that just want a simple starting point to experiment ;)

  • Zoe – Immersive 3D Creation Platform
    Create content directly in VR or using Unity :) Zoe is a perfect tool for Educators & Institutions.
  • A-Frame. A web framework for building 3D/AR/VR experiences. Make 3D worlds with HTML and Entity-Component For Quest, Rift, WMR, SteamVR, mobile, desktop
  • OpenSpace 3D – OpenSpace3D is a free and open-source platform, designed to create virtual and augmented-reality applications or games. If you are a 3D artist, a designer, a lab researcher, or just someone with a lot of passion and curiosity, you don’t need software development skills to use our platform.
  • Amazon Sumerian is a set of tools for creating high-quality virtual reality (VR) experiences on the web. With Sumerian, you can construct an interactive 3D scene without any programming experience, test it in the browser, and publish it as a website that is immediately available to users.
  • Mozilla Spoke – Create 3D social scenes for Hubs

VR Office

Another evolving area is the office space. Some of the platforms above already dive into that area, like XRDesktop. But Oculus / Facebook itself is working on its Infinite Office integration.

Other solutions help to mirror your PC within VR and open new ways for collaboration:

The biggest problem is the mirroring of the keyboard. As soon as that is solved, this might become usable. Immerse VR provides an option to overlay a virtual representation of your keyboard, by mapping your real-life keyboard in VR.

Here to stay

VR is here to stay, I would have never though it would take off 2020 / 2021. But we all face new challenges and technology is evolving to make space for new possibilities.

Not all gaming

While gaming / fitness / social are the entry point for VR currently, this whole market will expand quickly in 2021.

Really looking forward to new possibilities and another facet of my developer life.

Looking forward meeting some of you in the VR-Multiverse :)

Enjoy coding ….

readmore

“Klaro [klɛro] is a simple consent management platform (CMP) and privacy tool that helps you to be transparent about the third-party applications on your website. It is designed to be extremely simple, intuitive and easy to use while allowing you to be compliant with all relevant regulations (notably GDPR and ePrivacy).”

The tool is developed by KIPROTECT and can be found on Github.

Black & White

As I integrated Klaro on a couple of websites so far, I decided to make my work a bit easier and start building some basic clean themes for it.

I have a basic white and black&white theme so far. The download includes a testdrive folder, to showcase the themes. The white theme is also used on this website ;)

I really hate those standard consent management modals, that integrate badly into the website native design.

Klaro does a good job allowing to override its core theme and makes it a bit more pleasant. We do have to live with those modals from now on ;)

The themes are Sass-based and provide easy configuration options.

Enjoy!

cubicFUSION Themes for Klaro! @ Github

Klaro! Tweaks

Klaro is still missing some things, will collect some workarounds here for you to play with.

Missing events for consent modal open / closed …

Updates: Github Discussion
– 0.7.10 also adds custom callbacks to services (onAccept, onDecline, onInit) NICE!

Used a simple MutationObserver to do some magic for now, without diving into the core Klaro code for now. I am sure they already have an event listener or watcher setup.

readmore
26. November 2020

VIKTUALIA | HOFEINKAUF

Viktualia liefert an Abholstationen im Raum Heidelberg.
Viktualia bündelt für dich das Angebot kleiner und kleinster Höfe aus der Region. Das Ergebnis: Die ganze Vielfalt dessen, was ausgewählte Erzeuger zu bieten haben. Einfach im Onlineshop Brot, Eier, Fleisch, Käse, Joghurt, Gemüse und vieles mehr bestellen und die Einkäufe entspannt auf dem Heimweg an einer Abholstation mitnehmen.”


Viktualia delivers to pick-up stations in the Heidelberg area.
Viktualia bundles the range of small and very small farms from the region for you. The result: the full diversity of what selected producers have to offer. Simply order bread, eggs, meat, cheese, yoghurt, vegetables and much more in the online shop and take your shopping with you to a pick-up station on the way home. “



01.11.2020: This project has been with me for the past months. We just finished our beta testdrive with a close testing group a few weeks ago. The shop will be completely open on the 25.11., with the first delivery going out on the 2.12. It was pleasure working on this project and I am looking forward to its lift-off.


25.11.2020: Viktualia is open for business! (Viktualia ist am Start!)


This was a combined effort with GREENTONIC, Heike Frank.

Viktualia Hofeinkauf / Pelin Yildiz

readmore

Custom theme and integration for a coaching website.

  • WordPress Backend
  • Custom website design, all designed in house.
  • Vectorization and cleanup of logo
  • Custom template based theme (TWIG / TIMBER / GULP / SASS)
  • Custom plugin for internal functionality
  • Analytics
  • SEO
  • AMP
  • Social Integration (Facebook, Twitter, Instagram)
  • Hosting & Maintenance
  • Custom eCommerce integration
  • Newsletter

Update 2020: Global cleanup / tweaks


KAIAKOO – PERSÖNLICHKEITS – ARCHITEKTUR

readmore

I designed a fresh set of business cards for Willen Logistics last year, this is a small iteration with a QR-Code on the back. The business cards feature a partial varnish on the logo and QR-Code.

I updated their different logos last year, to streamline their main corporate colors.

“Seit mehr als 50 Jahren ist die Spedition Willen ein zuverlässiger Partner ihrer Kunden im In- und Ausland. Was in den 1950er Jahren als klassischer Transportbetrieb mit eigenem Fuhrpark begann, hat sich im Laufe der letzten Jahrzehnte zu einem Unternehmen mit großem Leistungsspektrum entwickelt.

Neben der Lagerung wurde die Produktion und Vermietung von Metalltrommeln ein wichtiges Standbein. Dadurch wurden dann auch kundenindividuelle Logistikkonzepte entwickelt und logistische Dienstleistungen vermehrt angeboten.” – Löningen, Niedersachsen

Willen Logistics GmbH
Willen Transport GmbH

willen.biz

readmore

Lernkarten.de – Offers specialized learning tools for the German certified master of trade/commerce exam (Handelsfachwirt Prüfung IHK). This includes printed learning materials and an App for Android / iOS. The website also provides updated information about changes in the curriculum and new requirements.
 

  • Maintenance
  • SEO – OnePage Optimization
  • SEA – Search Engine Advertising (Adwords)
  • Google & Facebook Advertising
  • Template tweaks and enhancements
  • Speed optimization
  • Hosting

 
Lernkarten Verlag

readmore

What’s new / What changed ?

Admin Enhancer is the first free plugin released under the cubicFUSION brand. The plugin is still work in progress, but a tool that is already used within some of my client projects. I am using this  plugin to centralise things I love & need, when sending out a finished website or project.

NEW: DASHBOARD GUTENBERG / DASHBOARD TEMPLATES
NEW: ADMIN TOOLBAR
UPDATE: SHORTCODES

Addons included …

This version includes a new addon “GUTENBERG DASHBOARD“, that allows you to build a White-Label Admin Dashboards using the Gutenberg Editor.

It integrates with the SHORTCODES addon and allows to drop in the dashboard widgets via its own Gutenberg Block.

The Block provides settings to overwrite CSS from the admin widgets, allowing you tweak them a bit — for better visual integration. The Dashboard template itself can be tweaked using CSS and Sass via SCSS now 😉

I am also releasing the first integration of the “ADMIN TOOLBAR” addon, which allows you to tweak some of the admin toolbar and footer options (Hide WP Logo, Hide Toolbar on Frontend, Hide Menu Items ..)

Already working on 0.3 … ENJOY!

cubicFUSION – Admin Enhancer
WordPress Repository

readmore

vibronet® is a passion project of mine, as the company belongs to my family. My sister, Sylvia, runs the company together with my parents.

The core website had not been updated for the past 8 years. It was really time for a complete rewrite and redesign :)

Ii does not only feel like a quantum jump, it actually was one technology-wise ;)

The website offers complete access to the current product portfolio in 3 languages (English, French, German).

All has been done in-house, with a complete cleanup of all product details.

We have some nice additional updates planned for the future!

vibronet® stands for innovative high quality products for food and feed made in Germany.

With its patented vibration damping system and complementary online control systems, vibronet® has been a pioneer in the field of research and advanced technologies for dramatically reduced temper times and simplified production processes since 1992.

Based in the heart Germany, the vibronet® name stands for competence and product diversity made for millers and cereal processors all around the world.”

Sylvia-C. Gräf CEO

vibronet®-Gräf GmbH & Co. KG // French // German

readmore
11. July 2020

NEUKUNDEN STUDIO | 2020

A customer asked for a simple text based logo. I delivered 5 vector-based variations and a favicon.

readmore

Gutenberg Documentation

While Gutenberg is becoming more stable with each release, documentation is only growing slowly. Many parts are outdated, superficial or completely undocumented.

For more complex or individual requirements you have to dive deep. Gladly the browser console allows you to easily checkout what is driving the editor.

Open your browser developer console and start exploring wp. / wp.data. / wp.api. .

What each function does, can be read in the Block Editor Handbook.

This is all nice, but how do I actually use these?

At this stage of the development, many things are still changing. So using the API direcly is mostly a matter of reading the documentation, checking the implementation within the core codebase and using trial & error.

Some mysteries have already been solved by others or they provide the right lead. Check Stack Overflow and especially the WordPress Development area for solutions.

Its still like a treasure hunt most of the time LOL Perfect for those that love to solve puzzles :)
Just my cup of tea or better coffee!

Do I need to learn React?

It surely is a benefit, as the whole Gutenberg Editor is build upon React. But for simple tweaks its not a must. But once you start going deeper, you will see the benefit and will learn to love React yourself.

What about ES6, ESNext vs ES5?

ECMAScript 6 is also known as ES6 and ECMAScript 2015.

ES5 is on its way out and ES6 is supported on all modern browsers since end of 2016.

Older browsers can be supported using a polyfill, that augments those browsers and allows them to use the new ES6 features.

React and also Gutenberg builds on the new Javascript functionality, but ES5 examples can also be found.

You can also easily compile ES6 to ES5 using Babel in your development environment or online.

Solving Mysteries!

I will be using the following sections to highlight some things that puzzled me and might help others to get a grip on things. I will be extending this, as I discover or solve more Gutenberg mysteries :)

I will keep the example code in ES5 for now, as that is the easiest way to start tinkering. I will also focus on things that can be used from external code. Most of the small code snippets are connected to each other.

Mystery 1: Text Selection & Formats

These little code snippets are all connected and showcase how to retrieve a selection from a block and change or remove a text format.

Wait for domReady

Make sure the editor has loaded and the DOM can be accessed.

Access the active block

Access active block selection

The actual offset can be found within the OBJECT.

Get block HTML content

Create Richtext object

Get active text formats

Check if format is active for selected text

This function is documented, but wont work from the outside that easily. This normally checks the isActive state of the component. Here a small workaround using Lodash.

Formats are saved within the Richtext object under formats and the text formats are stored within arrays that correspond to the actual index + range of the selection. So if a text-color has been applied from index 4 to 8, you will find the corresponding array for that.

Works well and does the trick for now. Here the output from the developer console, showing the arrays for an 18 character long paragraph:

Apply a new text format to selection

I am using the core/text-color format with applyFormat as an example, can be anything.

Insert text at start of selection

insertObject can insert content at the start of the selection, with the rest between selectionStart and selectionEnd getting removed. There is also insert, which allows you to simply add a HTML string into the Richtext value.

Remove text format from selection

removeFormat allows you to remove a text format from the current selection.

Would be nice to use toggleFormat here, but that works within native components and not by selection index as the two calls above.

Convert Richtext value to HTML

Replace current block content

Whats Next?

I will add some more Gutenberg examples in the future.

Enjoy coding and keep tinkering :)

readmore