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


BLOG FILTER



WHAT IS IPANORAMA 360?

iPanorama 360 for WordPress is a specialized plugin that enables users to create and display interactive 360-degree virtual tours or panoramic images on WordPress websites. It extends the functionality of the WordPress content management system by providing a user-friendly interface and a range of features specifically tailored for creating and showcasing 360-degree content.

With iPanorama 360 for WordPress, you can upload panoramic images or sets of photographs and convert them into interactive virtual tours or panoramic sliders. The plugin offers customization options to adjust the appearance and behavior of the panoramas, such as controlling the speed of rotation, choosing navigation controls, adding hotspots, and incorporating multimedia elements like images, videos, or audio.

The plugin integrates seamlessly with WordPress, allowing you to embed the created virtual tours or panoramic images directly into your website pages or posts. You can also customize the tour settings, such as enabling or disabling auto-rotation, adjusting the initial zoom level, or defining the starting viewpoint.

iPanorama 360 for WordPress typically provides an intuitive visual editor that enables users to create and edit their virtual tours or panoramas using a drag-and-drop interface. This makes it easier to add hotspots, link to other panoramas or external content, and customize the appearance and functionality of the tour.

IPANORAMA 360 FEATURES

  • 3 Scene Types – cube, sphere and cylinder
  • HotSpots – allows you to mark different areas that you want to point out
  • Virtual Tour – travel from one to another scene by clicking on special hotspots
  • Tooltip System – the plugin has a build-in powerful tooltip system
  • Compass – you can be sure to look forward
  • Preview Image – you can set an image that will show as a preview
  • Fullscreen – you can toggle from the normal state to fullscreen and back
  • Mouse Wheel – zoom with mouse wheel scrolling
  • Keyboard – arrows can be used for navigation through the scene
  • Touch – touch was used for navigation tasks
  • Autoplay – the scene autorotate around a vertical axis
  • Awesome Looks – 2 predefined themes
  • View customization – create your own theme

You can testdrive iPanorama 360 using the Lite version or get the Pro version. The only limitation for the Lite version, is the ability to only create one panorama.

ADDING AN ARIAL / FLOOR MAP TO IPANORAMA 360!

portalZINE NMN | Development meets Creativity | cubicfusion hotspot8

I have tested many different solutions for 360 panoramas in the past and many have been lacking in one or more areas. I always seem to be coming back to iPanorama 360 for my projects, due to its solid editor and support.

One major problem for iPanorama 360 has been the ability to attach an Arial-map / Floor-map to the panorama. Others tried to fill that void, but mostly failed on Mobile.

There are solutions out there that could be reused (Image Map Pro / ImageLinks ) and integrated with iPanorama 360.

I decided to build an image hotspot solution myself, that can also tie into iPanorama. I am building out all the things I need and more :)

CURRENT & PLANNED FEATURES

  1. Hotspot drag and drop positioning.
  2. Image Hotspot or SVG based hotspots (Size, Fill , Border, Color).
  3. Hotspot in and out animations.
  4. Tooltip system, supporting full Media and HTML. Still expanding on that. I am not sure yet, what will finally be in the first version.
  5. Popover option.
  6. iPanorama 360 – Add arial / floor map support. Guided setup, with full automatic integration in the future. Only 1 week into development, so this might change.
  7. iPanorama 360 – Radar view, which hooks into the current camera view and shows you what you are seeing on the map.
  8. External link support.
  9. Custom ID and classes per hotspot, to allow additional hooks or visual changes.
  10. Hotspot JS Events (Click, Over, Out and Active)
  11. REST Api
  12. Shortcode support. Fully detached from iPanorama, which allows to add it to a popover, slideout or any other design construct you envision.
  13. TWIG Template support, for the shortcode, to easily tweak the layout.
  14. Elementor support.
  15. Gutenberg support.

The first version is basically done and I will be using it for a client shortly. If you are interested, please feel free to get in touch. Will setup a demo page soon or link to the client using it ;)

PREVIEW

Cheers

readmore
2. May 2023

7 Days of Docker

I am a huge Docker fan and run my own home and cloud server with it.

What is Docker?

Docker is a platform that allows developers to create, deploy, and run applications in containers. Containers are lightweight, portable, and self-sufficient environments that can run an application and all its dependencies, making it easier to manage and deploy applications across different environments. Docker provides tools and services for building, shipping, and running containers, as well as a registry for storing and sharing container images.

With Docker, developers can package their applications as containers and deploy them anywhere, whether it’s on a laptop, a server, or in the cloud. Docker has become a popular technology for DevOps teams and has revolutionized the way applications are developed and deployed.”

Why this article series?

I am always looking for new ways to document the tools I use. This might help others to find interesting projects to enhance their own work or hobby life :)

I will have multiple series of this kind. I am starting with Docker this week, as it is at the core / a hub for many things I do. I often testdrive things locally, before deploying them to the cloud.

I am not concentrating on the installation of Docker itself, there are so many articles about that out there. You will have no problem to find help articles or videos detailing it for your platform.

Docker Compose or CLI?

Docker Compose and Docker CLI (Command Line Interface) are two different tools provided by Docker, although they are often used together.

Docker CLI is a command-line interface tool that allows users to interact with Docker and manage Docker containers, images, and networks from the terminal. It provides a set of commands that can be used to create, start, stop, and manage Docker containers, as well as to build and push Docker images.

Docker Compose, on the other hand, is a tool for defining and running multi-container Docker applications. It allows users to define a set of services and their dependencies in a YAML file and then start and stop the entire application with a single command. Docker Compose also provides a way to manage the lifecycle of the containers as a group, including scaling up and down the number of containers.

I prefer the use of Docker Compose, as it makes it easy to replicate and tweak a setup between different servers.

CLI to Composer YAML

There are tools like $composerize, which allow you to easily transform a CLI command into a composer file. Also a nice way to easily combine multiple commands into a clean configuration.

Portainer – Using a webinterface for docker

Portainer is an open-source container management tool that provides a web-based user interface for managing Docker environments. With Portainer, users can easily deploy and manage containers, images, networks, and volumes using a graphical user interface (GUI) instead of using the Docker CLI. Portainer also provides features for monitoring container and system metrics, creating and managing container templates, and configuring and managing Docker Swarm clusters.

Portainer is designed to be easy to use and to provide a simple and intuitive interface for managing Docker environments. It supports multiple Docker hosts and allows users to switch between them easily from the GUI. Portainer also provides role-based access control (RBAC) to manage user access and permissions, making it suitable for use in team environments.

Portainer can be installed as a Docker container and can be used to manage both local and remote Docker environments. It is available in two versions: Portainer CE (Community Edition) and Portainer Business. Portainer CE is free and open-source, while Portainer Business provides additional features and support for enterprise users.

Portainer is my tool of choice, as it allows to create stacks. A stack is a collection of Docker services that are deployed and managed as a single entity. A stack is defined in a Compose file (in YAML format) that specifies the services and their configurations.

When a stack is deployed, Portainer creates the required containers, networks, and volumes and starts the services in the stack. Portainer also monitors the stack and its services, providing status updates and alerts in case of issues or failures.

Export a Docker compose-file

As I said, its important for me to easily transfer a single container or stack to another server. The stack itself can be easily copied and reused. But do we easily export the setup of a current single docker file into a docker-compose file?

docker-autocompose to the rescue! This docker image allows you to generate a docker-compose yaml definition from a docker container.

Export single or multiple containers

Export all containers

This has been a great tool to also quickly backup all relevant container information. Apart from the persistent data, the most important information to quickly restore a setup if needed.

Backup , backup … backup! Learned my lesson, when it comes to restoring docker setups ;) Its so easy to forget little tweaks you did to the setup of a docker container.

Starting tomorrow …

readmore
21. February 2023

SEO 2023: From  EAT to EEAT ?

EAT what does that stand for?

In SEO (Search Engine Optimization), there is a concept called “E-A-T” which stands for “Expertise, Authoritativeness, and Trustworthiness”.

Google uses E-A-T as one of its many ranking factors to evaluate the quality of content on the web. Websites that consistently produce high-quality content that meets the E-A-T criteria are more likely to rank well in search engine results pages (SERPs).

  1. Expertise: Refers to the level of knowledge, skill, and experience demonstrated by the content creator. Google looks for content that demonstrates a high degree of expertise in the relevant subject matter.
  2. Authoritativeness: Refers to the reputation and authority of the content creator or the website publishing the content. Google looks for content created by individuals or organizations with a strong reputation or authority in the relevant field.
  3. Trustworthiness: Refers to the level of trust users have in the content creator or website publishing the content. Google looks for content that is transparent, accurate, and free from any misleading or deceptive information.

E-A-T is not a specific algorithm or ranking factor that Google uses, but rather a framework or set of guidelines that Google’s quality raters use to evaluate the quality of content on the web. These quality raters assess the content using E-A-T as a benchmark, and their feedback helps Google improve its search algorithms.

It is especially important for content that falls under the category of YMYL (Your Money or Your Life), which includes content related to health, finance, legal, and other topics that can impact people’s well-being or financial stability. Google holds this type of content to a higher standard because inaccurate or misleading information can have serious consequences.

Building E-A-T for your website or content involves a multi-faceted approach that includes creating high-quality, informative, and engaging content, establishing your expertise and authority in your field, and building trust with your audience through transparency and honesty.

Some specific actions you can take to improve your website’s E-A-T include showcasing the expertise of your content creators, publishing authoritative and accurate content, providing clear and transparent information about your business, and building a positive online reputation through reviews, testimonials, and other forms of social proof.

It’s important to note that E-A-T is just one of many factors that Google uses to determine search rankings, and it’s not the only factor. Other factors that can influence search rankings include content relevance, website speed and performance, user experience, and backlinks.

So what is EEAT than ?

Just another E, for Experience. 2023 Google wants to see that a content creator has first-hand, real-world experience with the topic discussed. Which means that content and there creators are becoming far more entwined. Further pushing the trend for authoritative quality content for audiences.

  1. Author experience is a key factor in determining the expertise and authority of a website’s content. Google evaluates the author’s credentials, education, experience, and overall reputation to determine whether they are qualified to write about a particular topic.
  2. Google looks for signals that indicate the author has a high level of expertise in their field, such as relevant education, professional certifications, industry awards, or other forms of recognition.
  3. Author experience can also be demonstrated through the author’s online presence and activity. For example, if the author has published articles in reputable publications or has a strong social media following, this can signal to Google that they have a strong online reputation and are respected in their field.
  4. Building author experience involves investing in the development of your content creators and encouraging them to build their online reputations. This can include providing opportunities for training, networking, and professional development, as well as encouraging them to build their personal brands through activities like blogging, speaking at conferences, and participating in online communities.
  5. One effective way to build author experience is to showcase the author’s credentials and expertise on the website. This can include author bios, headshots, and information about their educational and professional background.

So back to a solid author bios, detailed author pages and all relevant links that detail an authors expertise. Thank you! Search is really shifting and things are changing rapidly. Real content is queen or king again :)

Enjoy coding …

readmore
11. January 2023

Top Productivity Tools 2023

Productivity tools are software applications that help individuals and teams to manage their time and tasks more effectively. These tools can range from simple time tracking and task management apps to more advanced project management software.

The goal of productivity tools is to increase efficiency, organization, and accountability, allowing users to accomplish more in less time. They can be used for a variety of purposes, such as scheduling meetings, setting reminders, tracking progress, and delegating tasks. With the right productivity tools, individuals and teams can streamline their workflows, increase their productivity, and achieve their goals more easily.

I always use the first week of the year to evaluate my tools, workflows and software. I try to switch as little as possible within every 6 months, as I can not afford any downtime during my projects. This is the first year, that I am sharing a mostly complete list of things I use. Might be interesting for some of you.

Update: Not completely done yet, but close :)

Project / Task Management & Research

  1. Asana
    “Asana is a web and mobile application designed for team collaboration and project management. It allows users to organize tasks, projects, and conversations in one place, and it offers a range of features, such as the ability to assign tasks, set deadlines, and track progress. It is designed to help teams collaborate more efficiently and effectively. Asana is a freemium service, with paid plans that offer additional features and integrations.”

    Asana has been my go-to tool for the past years to organise my internal and client projects.
    Helps to keep me and my clients informed about upcoming tasks and tasks closed. Also enjoying the REST-API, as it allows me to connect to many of my other tools.

    I had a couple of clients that were skeptical about it, but many use it for themselves as well now.
  2. Kimai – Time Tracking
    Kimai is an open-source time-tracking software. It is a web-based application that allows users to track and organise their time, and to generate reports on their activity.

    Kimai has been one of the first things, that I setup on my Homelab Server. Will talk more about my Homelab setup later …

    Its always difficult to grasp how much time projects take, especially when you are not doing generic projects.

    Kimai helped me to track certain tasks over the years and help me to optimise my internal hourly requirements per task and costs per task / milestone in the end. Nothing will ever make time-tracking and cost calculation rock solid, but it helps to at least lessen some of the pain ;)

    I also used to testdrive ActivityWatch, which has automatic watchers for different tools you use. Nice, but too involved for me.

    Kimai has a REST-API to easily access data from other tools in my stack. I have a tightly knit set of tools for all my workflows.

    Some of the features of Kimai include:
    • Time tracking, with the ability to start and stop timers, and to manually enter time worked
    • Support for multiple projects and tasks
    • Reporting, with the ability to generate various types of reports, including a detailed project report
    • Invoicing, for billing clients for the time worked on their projects
    • User management and permissions, allowing for multiple users and different levels of access to the application
    • Multi language support
    • Integration with other tools as invoicing, project management, and more.

  3. Devonthink
    is a personal information management and research application for macOS, iPadOS and Windows. It helps individuals and teams to organize, classify and discover their files, bookmarks, emails, notes and more. It uses machine learning, natural language processing, and other advanced technologies to help users find and organize the information they need, and provides powerful tools for researching, writing, and data management.

    Additionally, DEVONthink provides integration with other applications such as TextExpander, and Hazel, feature for file encryption, backup, and syncing. It can also be used to store and organize PDFs, images, and other documents, and it can be used to create and manage databases, to-do lists, and other types of information.

Project Development Tools

IDE

  1. Adobe Dreamweaver
    I know :) Tried to switch multiple times and always came back to it. I know where everything is and have not been asking for anything more in the past ;) But I am also trying to slowly phase out my Adobe subscription and switch to comparable tools without a subscription model!
    I used PHPStorm for a while, but never really switched completely. Not a big fan of the underlying Java architecture.
  2. Nova
    CSS, Diff, EJS, ERB, HTML, INI, JavaScript, JSON, JSX, Less, Lua, Markdown, Perl, PHP, Python, Regex, Ruby, Sass, SCSS, Shell Script, SQL, Tree-sitter Query, TSX, TypeScript, XML, and YAML.

    Trying Nova right now, which might be my next IDE!

PROJECT PROTOTYPING

Pretty flexible, when it comes to these tools. I am working with different agencies and customers, some prefer Adobe XD and some Figma.

  1. Adobe XD
    (Experience Design) is a user experience design software developed and published by Adobe Systems. It is used for designing and prototyping user interfaces for mobile and web applications. It provides a set of tools for designing and prototyping user interfaces, including vector-based drawing tools, prototyping tools, and design resources such as pre-built UI elements, icons, and typefaces.

    Adobe XD has built-in support for creating responsive designs, by allowing designers to create multiple artboards of different sizes, layouts, and orientations, in order to visualize their designs across a variety of devices and screen sizes.
  2. Figma
    Figma is a cloud-based interface design and prototyping tool that allows designers to create, collaborate on, and share user interface designs. It is focused on providing a real-time collaborative design experience, making it easy for multiple people to work on the same design at the same time.

MARKUP TOOLS

  1. MarkText
    A simple and elegant open-source markdown editor that focused on speed and usability.

LOCAL TOOLS

I am a Mac and Linux guy. Windows only exists virtualised in my work environment ;)

  1. Homebrew
    The Missing Package Manager for macOS (or Linux).
    Allows you to get almost anything to run locally. Quickly install Go, specific Python or PHP versions.
    Works perfectly on ARM by now. Still remember switching between ARM and x86 architecture / machines for some tools in the past.

CROSS PLATTFORM DEVELOPMENT

  1. XOJO
    Not very mainstream, but has been in my toolbox for the past 20 years. Currently testdriving the Android Beta and developing an Android App with it. Has its limitation, but will allow to easily switch to iOS next.

    “Xojo (previously known as REALbasic) is a software development tool that allows developers to create cross-platform desktop, web, and mobile applications. It is a high-level programming language and integrated development environment (IDE) that provides an easy-to-use interface for creating applications for various platforms, including macOS, Windows, Linux, iOS, and the web. Xojo uses a drag-and-drop interface for creating user interfaces and provides a wide range of tools for developing, debugging, and deploying applications.”
  2. IONIC
    Mostly internal concepts and prototypes. I know my way around it and keep myself uptodate.

    “Ionic is a free and open-source framework for building cross-platform mobile applications using web technologies such as HTML, CSS, and JavaScript. It allows developers to use their web development skills to build apps for iOS, Android, and the web (progressive web apps) all with a single codebase.

    Ionic is built on top of Angular (a JavaScript framework for building web applications) and Apache Cordova (a platform for building native mobile apps using web technologies) and provides a set of pre-built UI components and tools for building mobile apps with a native-like feel. It also allows developers to use popular JavaScript libraries such as Angular, React, and Vue.js to build apps.

    Additionally, Ionic also provides a command-line interface(CLI) to help developers quickly start new projects, build and test their apps on devices and simulators, and deploy their apps to app stores.”
  3. FlutterFlow
    Also looking at FlutterFlow currently for some quick prototyping.

    FlutterFlow is a website and app building platform that allows users to create mobile and web applications without writing code. It uses a drag-and-drop interface and a visual editor to make it easy for users to design and build their applications. With FlutterFlow, users can create custom layouts, add features like forms, galleries, and e-commerce functionality, and connect to external APIs and services. It also includes a set of pre-built templates and components that can be easily customized to fit the needs of the user. Additionally, it also provides hosting, analytics and can be integrated with Firebase for mobile app development.

BROWSER & APP TESTING

  1. LamdaTest
    Lambdatest is a cloud-based, cross-browser testing platform that allows users to test their web applications across a wide range of browsers, operating systems, and devices. It is designed to make it easy for developers and testers to run automated and manual tests on a scalable, pay-as-you-go infrastructure. The platform uses real browsers and virtual machines to simulate different environments, and it can also be integrated with popular testing frameworks and Continuous Integration (CI) tools.

API TESTING

  1. RapidAPI (former Paw)
    RapidAPI for Mac is a full-featured HTTP client that lets you test and describe the APIs you build or consume. It has a beautiful native macOS interface to compose requests, inspect server responses, generate client code and export API definitions.

ERROR TRACKING

  1. Glitchtip (Self hosted + Sentry compliant)
    An open-source error tracking software that helps developers identify and fix issues with their applications. It allows developers to monitor and detect errors in real-time and provides detailed information about the error, such as a stack trace, context, and user information.

    This information helps developers to quickly identify the root cause of an error and fix it. It can be integrated with various development platforms and languages such as python, java, javascript, c# and many more.

    Glitchtip provides a variety of features to help developers and teams manage errors, including:
    -Real-time notifications of new errors
    -Automated workflows to triage and assign errors
    -Support for grouping similar errors together for easy analysis

    This has been one of the biggest pains to setup myself in docker, but works like a charm now :)

TRANSLATION

  1. PoEdit Mac App
    Poedit provides translators and developers with a powerful and intuitive editor for gettext. It helps save time on mundane translation tasks with a lightweight and easy-to-use interface and smart features like pre-translation and machine translation.
  2. Weblate / Selfhosted in Docker
    “Web-based continuous localization. Hosted service and standalone tool with tight version control integration. Simple and clean user interface, propagation of translations across components, quality checks and automatic linking to source files.”

VERSIONING

  1. BitBucket / SVN
    Use this for all my private repositories.
  2. Github / Git
    Some public, some private repositories. These are mostly hobby related …
  3. Homelab Git & SVN repositories
    Use this for projects, documents and other things I like to keep versioned

sFTP / SSH / TERMINAL

  1. Transmit / sFtp
  2. iTerm2 SSH & Terminal

COMPILER / BUNDLER

  1. GULP
    “Leverage gulp and the flexibility of JavaScript to automate slow, repetitive workflows and compose them into efficient build pipelines.”

    This tool has been around for ages and is still my tool of choice for many tasks. I am keeping a preconfigured setup updated, so that I can easily reuse it when needed. There are some nice extensions available, like gulp notify, gulp fancy-log and vinyl-ftp.

    I started with Webpack for some projects, but some things are still a lot easier to handle with gulp. Currently also looking at PARCEL, which has gained traction and is well supported.
  2. CodeKit
    Compile Sass, Less, Stylus, CSS, CoffeeScript, Pug, Slim, Haml, TypeScript, JavaScript, ES6, Markdown, JSON, SVG, PNG, GIF and JPEG right out of the box.

    Easy and fast to use, especially for smaller projects ;)

DATABASE

  1. Navicat
    “Navicat Premium is a multi-connection database development tool which allows you to connect several types of databases within a single application: MySQL, MariaDB, MongoDB, SQL Server, SQLite, Oracle and PostgreSQL, create a quick and easy access to all your databases all at once.”

IMAGE PROCESSING / DESIGN

Again trying to free myself from the Adobe subscription model. Might be the last year and than I can finally transition away ;)

  1. Affinity Photo
  2. Adobe Photoshop

VECTOR DESIGN

Love to switch it up and again be flexible when it comes to customer preferences ;)

  1. Sketch
    Love the eco-system around it. Artboards are quick to navigate and you can quickly export assets in the right format.
  2. Affinity Designer
  3. Adobe Illustrator

ANIMATION

  1. Keyshape for 2D and Lottie Animations
    KeyShape is a vector animation software for Mac and Windows that allows designers and developers to create animations for the web, mobile apps and other platforms with a vector graphics editor. It’s an easy to use tool with a familiar design interface, that is built on top of industry standards such as SVG (Scalable Vector Graphics) and CSS, making it easy to create animations that are lightweight, scalable and perform well on various devices.

    KeyShape was created with web designers and developers in mind, it is a great tool for creating animations that are optimized for the web and for adding interactive animations to mobile apps, It also allows for easy integration with other software and programming languages, like web development frameworks, it makes it a popular choice for adding interactive animations and effects to websites and apps.
  2. Adobe Animate / After Effects

Project Communication

  1. Slack
    Slack is designed to simplify and streamline communication within teams, making it easier for team members to share information, collaborate on projects, and stay on the same page. It can be used by small and big teams, for different purposes and industries, and it’s accessible via different devices and platforms.

    Used it far more in the past, but many of the things are centralised in Asana, other Homelab or external tools now. Still using Slack to centralize notifications.

    It’s a cloud-based platform that allows teams to communicate and work together in real-time, by providing a range of tools and features such as:
    • Instant messaging and chat, with support for direct messages and group conversations
    • Channels, which are dedicated chat rooms for specific topics, projects, or teams
    • File sharing, allowing users to easily share and collaborate on documents, images, and other files
    • Integrations, which allows Slack to connect with a wide variety of other tools and services, such as Google Drive, Trello, and Asana
    • Mobile apps, which allow users to stay connected and collaborate from anywhere
    • Search, that allows to look for previous conversations, files, etc.
    • Voice and video calls

Programming Languages

I am always staying busy, when it comes to programming languages. Have my side projects, that keep me exploring new stuff. My current top 8 ;)

  1. PHP
  2. Javascript / Node.JS / React Native
  3. Ansible / Shell Scripting
  4. Go / Golang
  5. Python
  6. Xojo (Realbasic) Desktop / Mobile / Console
  7. Swift
  8. C++

Homelab Tools

“A homelab is a personal laboratory or workspace that is set up in a person’s home, typically for the purpose of experimenting with and learning about various technology or IT related topics. This can include things like building and configuring servers, experimenting with different operating systems and software, and learning about network and security concepts.”

I started my Homelab 2020 to allow more flexible workflows, to play with Docker setups, lower costs for external services and have full access to any server tool when ever needed. Allows me to quickly mirror customer setups or simulate possible upgrade paths. Quite addictive once you start building your own server. And the things you learn, can be easily replicated to remote servers, which I just did last year. I am starting to move services from a long-time static server to a scalable docker based foundation.

Will follow up on this section soon ….

Enjoy coding ….

readmore

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

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

INTRODUCTION

This is not a tutorial, but more like sharing a nice geeky road-trip ;)

I have a pretty good understanding of the Youtube Data API, as I have actively used it on portalZINE TV in the past, to upload videos and dynamically link them to my local post-types.

For one of my latest customer projects (TYPEMYKNIFE / typemyknife.com), the task was a bit more complicated and the goal was to make it as future-proof as it can be with the Google APIs :)

Prerequisites / References to get you started:

portalZINE NMN | Development meets Creativity | youtube data api

THE GOALS

The goal for the setup was to actively synchronize WooCommerce products with linked / attached videos, with their source at Youtube.

As the website is multilingual, WPML integration is critical as well. And as Youtube allows localization of title and description, that can be added into the mix quiet easily in the future ;)

The following product attributes should be mirrored and optimised for Youtube:

  • Product Title
  • Product Description (5000 character limit at Youtube)
    My customer already has a pretty long and detailed description, which is perfect for Youtube!
    We average around 2900-3000 characters.
  • Product Tags (500 character length limit at Youtube)

The following attributes should be integrated into the description to enrich the Youtube description:

  • Introduction
  • Product Link to WooCommerce Product / Shop
  • Socials
  • Legal Information
  • Hash Tags (local post-type to add recurring / important hash tags)
  • Outro

All of these attributes will be collected internally and assigned using a simple template system, which allows the customer to move parts around freely and freely layout the description for Youtube.

The following stats will be collected for review:

  • Products without a video linked (no relation)
  • Products with the same video linked (duplication)
  • Videos without a product in the system
  • Total amount of videos / amount of video-pages (50 videos max per page)
  • Total amount of products with videos

Youtube SEO

These are the relevant key aspects, that help to get your videos more views.

  • Relevant text featuring at least 1,000 characters
  • Keywords that are relevant on Google Search and YouTube and describe your video
  • Hashtags, can also be used within the text
  • Timestamps Links to related content / affiliate links
portalZINE NMN | Development meets Creativity | youtube data api auth

PREPARING AUTH / OAUTH2 AT GOOGLE

In the past access to the Youtube Data API was far easier and less limited, when it comes to offline / none expiring OAuth2 refresh tokens.

When you are building a server-side application that is only available to your customer or moderators, it makes no sense to run that app through the Google App verification. Your app will never be used in public.

The Youtube Data API and its scopes, are defined as sensitive and therefor require third-party security assessment for public access.

The scopes I am requesting are https://www.googleapis.com/auth/youtube.upload + https://www.googleapis.com/auth/youtube.

Because of that its far easier to just setup OAuth 2 in test mode and restrict access to your customer and specific additional accounts only (up to 100 test users allowed). What all these account need, is access to your own or Brand Youtube Channel.

Preparation in the Google Cloud Console:

  • Activate Youtube Data API
  • Create OAuth2 Client ID
    • Name
    • Allowed Redirects
  • Setup OAuth-Consent Screen
    • Name of the App
    • Support Email
    • Logo
    • Allowed Domains
    • Typ: External
    • Setup all test-users, all of these need access to your Youtube channel already

A detailed description can be found here.

You can circumvent verification for the consent screen, by using an organisation setup at Google. Here some infos about that. With that setup offline refresh tokens should work fine.

Update: Just tried that, but wont work with a branded youtube account, even though the cloud user has admin access to it. Not giving up yet, but Google / Youtube really makes it difficult to just have a simple offline solution for specific tasks ;) BTW also forced the login hint, to make sure the right account is logged in : $client->setLoginHint(‘YourWoreksapceAccount’); !

You might have heard of the “The League of Extraordinary Packages“. It is a group of developers who have banded together to build solid, well tested PHP packages using modern coding standards.

They also offer an OAuth2-client + OAuth2 Google extension that can be used.

SERVER SETUP

On the server, the Google API PHP SDK can be easily integrated using Composer.

In my customer plugin I neatly separated all relevant areas in classes & traits:

  • Online Authentification, with a 60 minute session
  • Offline Authentification, with a 1 week expiration (might explain that in more detail in the future.)
  • Error handling and debug information
  • Listing of videos
  • Updating of videos
  • Updating of tags
  • Updating hashtags
  • Backup old data locally, before update. There should always be an option to restore, especially with 500 videos :)
  • Settings & templates
  • REST routes / endpoints

You can check the expiry time of your access token by accessing:
https://www.googleapis.com/oauth2/v1/tokeninfo?access_token=YOUR_TOKEN

“A Google Cloud Platform project with an OAuth consent screen configured for an external user type and a publishing status of “Testing” is issued a refresh token expiring in 7 days.” – Google

Basic Auth example from the SDK:

A simple upload example can be found here .

portalZINE NMN | Development meets Creativity | youtube data api list

UPDATING A SINGLE VIDEO
BULK VIDEO UPDATES

All operations to and from the Youtube Data API are rate limited. What is important for us, are the queries per day.

The default quota is 10.000 queries per day, sounds a lot, but is easily gone after updating 150-200 videos. You can request this limit to be raised, but again a lot of paperwork and questions that are just not needed.

The above limit just means, that you need to cache as many queries as possible, to only query live when needed ;)

Something you learn fast, when experimenting with different things! I hit that limit multiple times in the first few days, with around 500 videos in the queue.

Different operation cost you different amount of units

  • A read operation that retrieves a list of resources — channels, videos, playlists — usually costs 1 unit.
  • A write operation that creates, updates, or deletes a resource usually costs 50 units.
    10.000 / 50 are 200 updates per day :)
  • A search request costs 100 units.
  • A video upload costs 1600 units. Glad we are not handling the upload as well, but technically easy ;)

It also helps to use the Google Developer Playground to testdrive the Youtube Data API with your own credentials while optimising your own code.
You can define your own OAuth 2.0 configuration by clicking the cog in the upper right corner.

I setup the bulk updating to allow splitting it over multiple days, if required. For this an offline refresh token is needed, as the standard token expires after 60 minutes.

My customer can also just update a single video, when changes are applied to the product or a new product has been added.

If more frequent updates are required, I will ask for a raise of the queries per day. You can circumvent the limit by using multiple Google Cloud Platform accounts with new OAuth credentials, but really an overkill right now. I have done that in the past ;)

LAYOUT & DESIGN

The GUI is just based of Bootstrap, to make it simple and clean. Using my own wrapper to make it work within the WordPress admin.

For all ajax operations, I am using htmx and _hyperscript, which I will talk about in another article in the future.

Really neat and clean way to build single page interfaces.

The whole plugin runs of its own REST API endpoint. Just love using WordPress as a headless system.

I used TWIG / Timber for the templates, to separate logic and layout. Timber has been my goto solution for years now. It drives my own and many customer websites.

portalZINE NMN | Development meets Creativity | road ends

CONCLUSION

This has been a lot of fun, maybe a bit too much LOL

I do geek-out about many of my projects, but this experience helped me to bring my WordPress toolbox to the next level. This will help to drive other things in the future.

Working so deeply with the Youtube Data API has been fun and feels so easy now, after all remaining problems have been solved.

Would have loved this during my portalZINE TV days ;)

I you read all this, you just earned yourself a badge for completion ;)

Need something similar or something else? Just say hi and we can talk.

ENJOY CODING ….

readmore