I AM LISTENING TO
|
WAS ICH LIEBE
  • Englisch
  • Deutsch


BLOG FILTER



Transition

jQuery has provided easy access to complicated core Javascript solutions in the past and has been shielding us from difficult workarounds for legacy browsers. But times have changed and many of those things can be done as easily using Javascript directly.

jQuery is a fast, small, and feature-rich JavaScript library. It makes interactions with HTML documents easy, and is widely used in web development to add features to web pages and to simplify the process of writing JavaScript. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

5 reasons, why you might want to stop using jQuery!

  1. jQuery is a large library, and loading it can add a significant amount of time to the page load time of your website. If your website doesn’t use many of the features provided by jQuery, it may be more efficient to use smaller, specialized libraries or to write your own code.
  2. Some developers prefer to use modern JavaScript features like classes and modules instead of the functional programming style used by jQuery.
  3. As web development has evolved, many of the tasks that jQuery was commonly used for can now be accomplished with vanilla JavaScript, which is plain JavaScript that does not use any additional libraries.
  4. Using jQuery can make it more difficult for other developers to understand and maintain your code, especially if they are not familiar with the library.
  5. In some cases, jQuery may not work as expected with certain versions of modern browsers, or it may not be optimized for mobile devices.

That being said, jQuery is still a popular and widely used library, and there are many valid reasons to continue using it. It is ultimately up to you to decide whether the benefits of using jQuery outweigh the potential drawbacks in your particular situation.

Benefits to using pure JavaScript

  1. Improved performance: Pure JavaScript code is generally faster than code that uses libraries, because it does not have the overhead of loading and interpreting the library.
  2. Smaller file size: Pure JavaScript code is generally smaller in file size than code that uses libraries, because it does not include the library code. This can result in faster loading times for your website or application.
  3. More flexibility: With pure JavaScript, you have complete control over the code, and you can customize it to fit your specific needs.
  4. Better understanding and control: By writing your own JavaScript code, you can gain a better understanding of how it works and how to troubleshoot any issues that may arise.
  5. Improved compatibility: Pure JavaScript code is more likely to work across different platforms and devices, because it does not depend on a specific library or framework.
  6. Easier maintenance: Pure JavaScript code is generally easier to maintain than code that uses libraries, because it does not require updating or maintaining the library code.

„You might not need jQuery“

Easily search and compare direct Javascript solutions to jQuery ….

How jQuery does it:

Pure Javascript:

Link

or use UmbrellaJS

UmbrellaJS is a lightweight JavaScript library that provides a number of utility functions and features for working with DOM elements and handling events. It was designed to be small, fast, and easy to use, and it does not have any dependencies on other libraries.

Some of the features provided by UmbrellaJS include:

  • Easy element selection and manipulation using CSS-style selectors
  • Support for chaining multiple function calls on the same element
  • A simple event system for handling events on elements
  • Utility functions for working with arrays, objects, and strings
  • Functions for handling AJAX requests and working with JSON data

UmbrellaJS is a good choice for developers who want a simple, lightweight library for working with DOM elements and handling events. It is especially well-suited for smaller projects or for developers who want to avoid the overhead of larger libraries like jQuery.

Selector demos:

Documentation
Migrate from jQuery

HTMX might be another way …

HTMX (HTML enhanced for asynchronous communication and XML) is a JavaScript library that allows you to add asynchronous communication and other interactive features to your web pages using HTML attributes and elements. It allows you to make AJAX (Asynchronous JavaScript and XML) requests and handle responses directly in your HTML, without the need for writing any JavaScript code.

HTMX works by intercepting events on HTML elements and making asynchronous requests based on the attributes you specify. For example, you can use the hx-get attribute to make a GET request to a specified URL, and use the hx-trigger attribute to specify an event that should trigger the request. You can also use the hx-target attribute to specify an element on the page where the response should be inserted.

Here’s an example of how you might use HTMX to make a GET request and insert the response into a div element:

When the button is clicked, HTMX will make a GET request to /some/url and insert the response into the div element with the id of target.

HTMX is designed to be easy to use and flexible, and it can be used to add a wide range of interactive features to your web pages.

I am currently using HTMX in one of my longterm projects and will be talking about it more in a separate article in the future !

HTMX Reference / Documentation


It is ultimately up to you to decide which approach is best for your particular project. Sometimes a combination is needed ;)

Enjoy coding…

readmore

THE PREMISE

A fullstack developer is a software engineer who has expertise in all layers of a web application’s stack. This includes both the frontend, which is the user-facing part of the application, and the backend, which is the server-side portion of the application.

THE ROAD TO …

To become a fullstack developer, one must have a solid understanding of a wide range of technologies. This includes proficiency in at least one programming language, such as JavaScript or Python, as well as knowledge of databases, server infrastructure, and web development frameworks.

One of the key benefits of being a fullstack developer is that they can work on any part of a web application, from the design and user experience to the underlying server-side logic. This means that they can take on a wide range of roles and responsibilities, from designing the user interface to implementing complex business logic.

Fullstack developers are also in high demand, as the skills they possess are highly sought-after in the job market. This is because companies are increasingly looking for engineers who can work on both the frontend and backend of their web applications, rather than hiring separate teams for each layer of the stack.

In addition to their technical skills, fullstack developers must also have strong problem-solving and communication skills. This is because they often work on teams and need to be able to collaborate effectively with other developers, as well as communicate their ideas to non-technical stakeholders.

NEVER GETS BORING

Overall, being a fullstack developer is a challenging but rewarding career path. It requires a diverse set of skills and the ability to adapt to new technologies, but the rewards include the opportunity to work on a wide range of projects and the satisfaction of seeing your work come to life in the form of a web application.

Enjoy coding …

readmore

Facebook sucks …. and now how to solve saving pages connected to a gray account! Might not work for everyone, but it solved it for me.

What are Gray accounts?

„A gray account is an account used to log into Facebook that is not associated with a personal profile or account. People used to be able to manage their Pages with gray accounts before we required individuals to have a personal Profile in order to create, manage, or run ads on a Page.“ – Facebook Help

The starting point and problems!

Normally it should be easy to transfer a page to a new administration account. Right? RIGHT!

My customers page was on the new profile page layout, that was introduced a while back. So normally you should go to the Page -> Professional Dashboard -> Settings -> Site Access. This would than allow you to assign a new page admin.

This just straight fails for me! I can easily choose a new person , select person and allow full access, confirm with password and than nothing happens. When checking the console, i see a couple of random errors …

Tried with different accounts, different browsers, different OS. Always the same …

The solution

After trying everything and almost giving up. I though, well you can still switch back to the old page layout, maybe that works!

And that is what finally worked for me. I was able to assign my customer as a new admin, within Settings -> Site Roles and than switch back to the new page layout!

Again … Facebook sucks! Who is testdriving updates and checking for incoming errors … seems that noone cares. Just leave it to the user, to solve their own problems. Not a single resource, that actually helps. I am sure that there are many, that already lost their pages! Just unbelievable !!!

Happy coding!

readmore

THE QUESTION

A while back a potential customer asked me, if it is possible to restructure a WordPress Multisite setup and WPML with a more simplified and custom url structure?


THE ROUGH IDEA

1 . BASE.website web.site (with possibly different languages)

web.site/de/
web.site/en/

2. SUB.website web.site/nl-nl/

Languages would normally be added like this:

web.site/nl-nl/de/
web.site/nl-nl/en/

The customer wanted it to be restructured / simplified like this:

web.site/de-nl/
web.site/en-nl/

This basically mimics the structure of a single WPML website with custom languages, but with all the benefits of a multisite.

THE SOLUTION

This is nothing that WPML or WordPress Multisite provides out of the box.
I built a prototype setup to make it work.

Not something that I would propose for anyone, as it requires a lot of tweaks for anything that handles dynamic links (plugins, hooks, core systems, page.builder …)

Its doable :)

BASIC URL HANDLING

One thing that needs to be tweaked globally, is the mapping of the new url structure.

So web.site/nl-nl/en/ needs to become web.site/en-nl/

This needs to be handled on the server side, by proxying the original to the new structure.
This can be easily done using Apache or NGINX.

With that web.site/nl-nl/en/ will be proxied to web.site/en-nl/, but any core navigation will not work yet.

This is the fastest solution that I came up with, within the hour I gave myself ;)

There surely are other options, like the core rewrites / restructuring of the core shorturl handling. But these approaches might break things in far more areas.

Using the proxy approach, keeps the core as it is. The solution needs to be as simple as possible, allowing to maintain it in the future :)

HOOKS TO THE RESCUE

Just for the basic setup a couple of hooks are required to make this work, more might be needed depending on the plugins in use.

Here a couple of examples ….
WordPress site_url

WordPress Nav Links

WPML

Rankmath

This will not cover every angle, but will give you a starting point! I love my puzzles and there always is a viable solution :)

Need something similar … get in touch!

Happy coding …

readmore

When you look at Youtube, Twitter, certain Facebook groups and even some software companies, they are all building up fear for the upcoming / in-progress Google „Helpful Content“ algorithm update.

WHAT IS IT?

– Our “helpful content update” launching next week will better surface original, helpful content made by people, for people, rather than content made primarily to gain search traffic. It’s part of a broad effort to show more unique, authentic info in results – Google SearchLiaison@Twitter

WHEN IS IT HAPPENING?

Its happening as I write this and its about time!

The goal of this update is to rank websites that publish original and unique content. Content written by real writers and not AIs.

This also downgrades websites, that write about content that is not relevant to their core expertise. So no more content domain dominance, by posting about every possible content angle to lure visitors in.

Also old content, when not updated regularly, will loose prominence.

This all is a plus for the enduser and knowledge seeker. Google has been preparing for this for years now and its not happening suddenly.

Structured data gained more and more importance over the past few years. Google is finally using it to cleanup search!

HOW GOOD WILL IT BE?

Hard to tell. But change was needed! There are so many underrated websites out there, that deliver quality content, but never got a chance to bubble up or shine :) This will hopefully get us better search results and better quality control.

LOOKING FORWARD TO THE RESULTS!
Keep on breathing …. ALEX

readmore
25. August 2022

KAIAKOO® Bildungsgruppe

Custom multisite setup for an educational institution website.

„The KAIAKOO® education group is a recognized education provider based in Speyer. Our services are tested, certified and eligible for funding in accordance with the Accreditation and Licensing Ordinance (AZAV). Our consulting cosmos includes in particular the topics of PROFESSION, CAREER & FOUNDING.“

  • WordPress Multisite Backend (3 websites)
  • Custom website design, all designed in house.
  • Theme core based on Elementor, so that the customer can do as many tweaks as possible himself.
  • Custom plugin for internal functionality.
  • Custom plugin to autofill PDFs, based on PDFTK. Its used to prefill official & internal documents, easing the daily workflow. More areas will be included in the future.
  • Feedback solution for customers.
  • Linked data across multisite.
  • Analytics
  • SEO
  • New server setup, server / email move & maintenance

KAIAKOO – Bildungsträger & Persönlichkeits-Architektur

readmore

Ich hatte dieses Jahr die Möglichkeit, über meinen Kunden TYPEMYKNIFE®, an der „Nacht der Sterne“ in Stuttgart, im Mercedes-Benz Museum, teilzunehmen. Auf der Gala kommen mehr als 800 Gäste aus Gastronomie, Hotellerie, Politik, Kultur und Wirtschaft zusammen. 

NACHT DER STERNE / ahgz Sterne Award 2022

portalZINE NMN | Development meets Creativity | nacht der sterne 2022 typemyknife 1
Felicitas Then – Anmoderation
portalZINE NMN | Development meets Creativity | nacht der sterne 2022 typemyknife 3
Verleihung + Food

Es war ein klasse Abend, auf dem nicht nur die Spitzenköche aus Deutschland, der Schweiz, Südtirol und Österreich ausgezeichnet wurden, sondern diese auch Live zeigen konnten was sie so können.

Veranstaltet wird die Party von der Allgemeinen Hotel- und Gastronomie-Zeitung (Ahgz) und Burg Staufeneck / Rolf Straubinger.

Moderatorin des Abends waren die Journalistin und Fernsehköchin Felicitas Then und Rolf Westermann von der ahgz-Chefredaktion.

Informationen zum Award, den Methoden und Siegern findet man hier.

TYPEMYKNIFE®

portalZINE NMN | Development meets Creativity | nacht der sterne 2022 typemyknife 2
portalZINE NMN | Development meets Creativity | nacht der sterne 2022 typemyknife 4
TYPEMYKNIFE® – Im Gespräch

TYPEMYKNIFE® hat Vorort an einem Stand eine kleine Auswahl seiner Küchenmesser, die über den 3D Gravur Konfigurator vorbereitet und graviert wurden, präsentiert. Dadurch hatten Gäste die Möglichkeit, die gravierten Küchenmesser einmal persönlich zu entdecken und die Qualität zu bestaunen.

portalZINE NMN | Development meets Creativity | typemyknife portalzine
Glamour Shot / Kartentausch LOL

Die fast 1400 km Rundreise aus dem Norden hat sich gelohnt. Es ist immer schön Kunden mal nicht nur virtuell zu treffen, besonders wenn die Distanz so groß ist. Bei der Entfernung trifft man sich nicht immer mal kurz auf einen Kaffee oder Gin-Tonic :)

Gruß an TYPEMYKNIFE® / Schwäbisch Gmünd / Stuttgart

readmore

Visual House erstellt realistische 3D Video-Animationen, Panoramatouren, Außen- und Innen Ansichten für Ihr Bauvorhaben.“


Visual House creates realistic 3D video animations, panorama tours, exterior and interior views for your construction project.“


This is a simple portfolio website, that will be expanded upon in the future. The client wants to edit and maintain the website himself. Its a clean and simple layout with an Elementor Pro backend. Virtual panoramic tours are a key service they offer and is integrated directly for potential customers to explore. More to come in the future …


Update 2022: Update to a complete portfolio website, detailing the current portfolio and show-casing current services. Complete design revamp and custom template.


visual-haus.de

readmore

TYPEMYKNIFE® – allows you to laser ingrave your knife using a unique 3D configurator.

I redesigned their 3D knife configurator and helped to optimise the overall integration. The core backend functionality of the configurator was not created by me, I only helped debug and tweak the old & new functionality.

  • Complete redesign of the old 3D knife configurator
  • Prototype / Preview using Adobe XD
  • New help system, showing the user how to design their knife quickly.
  • Multi-language integration
  • Server tweaks for better sharing capabilities
  • Shop integration changes
  • Debugging for desktop / tablet & mobile integration
  • Performance boost & tweaks
  • Streamlined website integration

TYPEMYKNIFE / 3D KNIFE CONFIGURATOR / Example with knife loaded / Search for a knife

readmore

Why?

Color correction is important to me and to the projects I do. Regularly calibrating your monitor is essential in order to create prints that accurately represents what you see on your monitor. 

I have color-profiles (ICC – International Color Consortium) for different light conditions and I do recalibrate every few months, as the light output and colors degrade on my displays.

Spyder3

I am still using an old Spyder3 from datacolor for calibration, which is not really supported anymore. Hard to find working software for my Windows 10 machines and Mac M1.

DisplayCAL

To the rescue comes DisplayCAL, an Open Source calibration solution that allows you to calibrate your displays using even older calibration hardware.

DisplayCAL

ArgyllCMS – is an ICC compatible color management system, available as Open Source. This is requested by DisplayCAL to make the magic work. ( MAC M1 – Fork)

I have calibrated all machines with this and love it :)

readmore