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


BLOG FILTER



Elementor Pro provides grid containers as an experimental feature. The options provided are limited, when it comes to native controls. The fine-tuning of the grid container items need to be done using Advanced CSS.

If you are looking for a simpler way without using Advanced CSS, I started building out a Grid Tweaker for Elementor.

portalZINE NMN | Development meets Creativity | grid tweaker 1
portalZINE NMN | Development meets Creativity | grid tweaker 2

This will add a new tab to all containers and allows you to tweak grid-row / grid-column. Basic work is done. I am currently tweaking the controls a bit and will make it even easier ;)

Added an example template to import into Elementor. For those interested, the plugin can be freely downloaded from my Github repository. You can also do a search for “cubicfusion-grid-tweaker” on Github.

Cheers and enjoy
Alex

readmore

Artificial intelligence (AI) has revolutionized the way we interact with images, and the current AI image solutions are a testament to this. AI image solutions are applications of AI that can identify, classify, and manipulate images with remarkable accuracy and speed. With the rise of deep learning and computer vision, AI image solutions have become increasingly sophisticated, and their applications have expanded to fields such as healthcare, finance, entertainment, and more. Some of the most prominent AI image solutions and their applications.

Image Recognition

Image recognition is the process of identifying and classifying objects, people, or other elements in an image. AI-powered image recognition solutions use deep learning algorithms to recognize images with high accuracy. Image recognition is widely used in various fields, including healthcare, security, and retail. For example, in healthcare, AI image solutions are used to analyze medical images such as X-rays and MRIs to detect diseases and conditions such as cancer, brain injuries, and more. In security, AI-powered image recognition solutions are used to identify faces, license plates, and other elements in surveillance videos. In retail, AI image solutions are used to identify and classify products and improve inventory management.

Object Detection

Object detection is a subset of image recognition that involves detecting the location of specific objects in an image. AI-powered object detection solutions can identify and locate objects in an image with high accuracy. Object detection is used in various fields, including self-driving cars, security, and e-commerce. For example, in self-driving cars, AI image solutions are used to detect pedestrians, traffic lights, and other objects on the road. In security, AI-powered object detection solutions are used to identify suspicious behavior and detect objects such as weapons and explosives. In e-commerce, AI image solutions are used to detect and locate products in images, improving search and recommendation algorithms.

  1. TensorFlow: TensorFlow is an open-source platform for building and training machine learning models, including image recognition models. It provides a wide range of tools and resources for image processing and can be used for tasks such as image classification, object detection, and segmentation.
  2. Keras: Keras is a high-level neural networks API written in Python and capable of running on top of TensorFlow, CNTK, or Theano. It is a user-friendly and efficient way to build and train deep learning models, including image recognition models.
  3. PyTorch: PyTorch is another popular open-source machine learning framework that can be used for image recognition. It provides a flexible and easy-to-use platform for building and training deep learning models and supports various image processing tasks.
  4. OpenCV: OpenCV is a widely used computer vision library that provides tools and algorithms for image processing, including image recognition. It can be used for tasks such as object detection, face recognition, and motion detection.
  5. YOLO: YOLO (You Only Look Once) is an open-source object detection system that can recognize objects in images and videos with high accuracy and speed. It is based on deep learning and can be trained on custom datasets.
  6. ImageAI: ImageAI is an open-source library that provides pre-trained models for image recognition tasks such as object detection, classification, and segmentation. It supports several deep learning frameworks, including TensorFlow, Keras, and PyTorch.
  7. Detectron2: Detectron2 is an open-source object detection framework built on top of PyTorch. It provides a flexible and efficient platform for building and training object detection models and supports various architectures such as Faster R-CNN, Mask R-CNN, and RetinaNet.
  8. MXNet GluonCV: MXNet GluonCV is an open-source computer vision library built on top of MXNet. It provides a wide range of tools and resources for building and training object detection models and supports various architectures such as Faster R-CNN, Mask R-CNN, and SSD.
  9. SimpleDet: SimpleDet is an open-source object detection framework based on PyTorch. It provides a simple and efficient platform for building and training object detection models and supports various architectures such as Faster R-CNN and RetinaNet.

Image Segmentation

Image segmentation is the process of dividing an image into multiple segments or regions based on specific criteria. AI-powered image segmentation solutions use deep learning algorithms to identify different objects and elements in an image and segment them accordingly. Image segmentation is widely used in various fields, including healthcare, entertainment, and transportation. For example, in healthcare, AI image solutions are used to segment medical images such as CT scans and MRIs to aid in diagnosis and treatment. In entertainment, AI-powered image segmentation solutions are used to create special effects and manipulate images in movies and games. In transportation, AI image solutions are used to segment images of roads and traffic to aid in autonomous driving.

  1. Mask R-CNN: Mask R-CNN is an open-source framework based on deep learning that can perform instance segmentation, which involves identifying and segmenting each object in an image. It is built on top of the Faster R-CNN architecture and supports various deep learning frameworks such as TensorFlow and PyTorch.
  2. U-Net: U-Net is a popular open-source deep learning architecture for image segmentation. It is based on a fully convolutional neural network and has been widely used for tasks such as medical image segmentation.
  3. DeepLab: DeepLab is an open-source image segmentation framework based on deep learning. It supports various architectures such as DeepLab v3 and DeepLab v3+, which have achieved state-of-the-art performance on several benchmarks.
  4. SegNet: SegNet is an open-source deep learning architecture for image segmentation. It is based on an encoder-decoder network and has been widely used for tasks such as road segmentation and object detection.
  5. PyTorch-UNet: PyTorch-UNet is an open-source implementation of the U-Net architecture in PyTorch. It provides a simple and efficient platform for building and training image segmentation models.
  6. SimpleITK: SimpleITK is an open-source library for image analysis that provides tools and algorithms for image segmentation, registration, and filtering. It supports various programming languages such as Python, C++, and Java.

Image Generation

Image generation is the process of creating new images using AI algorithms. AI-powered image generation solutions can generate highly realistic images based on specific inputs, such as text descriptions or reference images. Image generation is used in various fields, including art, fashion, and advertising. For example, in art, AI image solutions are used to generate unique and creative designs and artworks. In fashion, AI-powered image generation solutions are used to create new designs and prototypes. In advertising, AI image solutions are used to generate highly realistic product images and visualizations.

  1. GAN (Generative Adversarial Networks): GANs are a type of deep learning model that can generate realistic images by training two neural networks, a generator and a discriminator, in a adversarial setting. Several open-source implementations of GANs are available, including TensorFlow-GAN, PyTorch-GAN, and Keras-GAN.
  2. StyleGAN (Style-Based Generative Adversarial Networks): StyleGAN is a type of GAN that can generate high-quality images with fine-grained control over the image style and content. It has been used to generate realistic human faces, animals, and other objects. An open-source implementation of StyleGAN is available on GitHub.
  3. DeepDream: DeepDream is a visualization technique that uses convolutional neural networks to generate abstract and surreal images. It works by optimizing the input image to maximize the activation of specific neurons in the network. An open-source implementation of DeepDream is available in the TensorFlow library.
  4. PixelRNN (Pixel Recurrent Neural Networks): PixelRNN is a type of neural network that can generate images pixel by pixel. It works by predicting the probability distribution of each pixel value based on the context of previous pixels. An open-source implementation of PixelRNN is available in the PyTorch library.
  5. VAE (Variational Autoencoder): VAEs are a type of deep learning model that can generate images by learning a low-dimensional representation of the image space. They work by encoding an input image into a lower-dimensional latent space and then decoding it back into an image. Several open-source implementations of VAEs are available, including TensorFlow-VAE and PyTorch-VAE.

AI image solutions are transforming the way we interact with images and are being used in various fields to improve efficiency, accuracy, and creativity. From image recognition and object detection to image segmentation and generation, AI image solutions are increasingly sophisticated and capable. As AI technology continues to evolve, we can expect to see more applications of AI image solutions in the future, and they will undoubtedly play an essential role in many industries.

The Future

Some of the tools are already used in new ways, to help reconstruct or understand archaeology dig sites. They help analyse genes and will help to discover new remedies or cures for illnesses in the future.

Even though many complain about the exponential growth of AI, it brings so many positive angels into the mix, allowing us to fix and elevate our lives. Sadly change often comes at a cost, but it lies in our hands to direct and secure AI technology to help and not destroy lives.

readmore

Archaeology Travel

I had the chance this year to meetup with my client Thomas Dowson from “Archaeology Travel Media” at the Travel Innovation Summit in Seville.

Over the past 2 years we have been revamping all the content from archaeology-travel.com and integrated a sophisticated travel itinerary builder system into the mix. We are almost feature complete and are currently fine-tuning the system. New explorers are welcome to signup and testdrive our set of unique features.

It was so nice to finally meet the whole team in person and celebrate what we have accomplished together so far.

What is Archaeology Travel all about?

Directly taken from the front-page :)

EXPLORE THE WORLD’S PASTS WITH ARCHAEOLOGY TRAVEL GUIDES, CRAFTED BY EXPERIENCED ARCHAEOLOGISTS & HISTORIANS

Whatever your preferred style of travel, budget or luxury, backpacker or hand luggage only, slow or adventure, if you are interested in archaeology, history and art this is an online travel guide just for you.

Here you will find ideas for where to go, what sites, monuments, museums and art galleries to see, as well as information and tips on how to get there and what tickets to buy.

Our destination and thematic guides are designed to assist you to find and/or create adventures in archaeology and history that suit you, be it a bucket list trip or visiting a hidden gem nearby.”

More Details
About
Mission & Vision
Code of Ethics

What is next?

We are constantly expanding our set of curated destinations, locations and POIs. Our plan is it, to make it even easier to find unique places for your next travel experience.

We are also working on partnerships to enhance travel options and offer a even broader variety of additional content.

Looking forward to all the things to come, as well as to the continued exceptional collaboration between all team members.

Lets continue to help bring the world’s past to the future :)

readmore

First a bit of context :)

What is Gettext?

Translation within WordPress is based of Gettext. Gettext is a software internationalization and localization (i18n) framework used in many programming languages to facilitate the translation of software applications into different languages. It provides a set of tools and libraries for managing multilingual strings and translating them into various languages.

The primary goal of Gettext is to separate the text displayed in an application from the code that generates it. It allows developers to mark strings in their code that need to be translated and provides mechanisms for extracting those strings into a separate file known as a “message catalog” or “translation template.”

The translation template file contains the original strings and serves as a basis for translators to provide translations for different languages. Translators use specialized tools, such as poedit or Lokalize, to work with the message catalog files. These tools help them associate translated strings with their corresponding original strings, making the translation process more manageable.

At runtime, Gettext libraries are used to retrieve the appropriate translated strings based on the user’s language preferences and the available translations in the message catalog. It allows applications to display the user interface, messages, and other text elements in the language preferred by the user.

Gettext is widely used in various programming languages, including C, C++, Python, Ruby, PHP, and many others. It has become a de facto standard for internationalization and localization in the software development community due to its flexibility and extensive support in different programming environments.

What are WordPress language files?

WordPress uses dedicated language files to store translations of your strings of text in other languages. Two formats are used:

  1. Portable Object (PO) files: They serve as the message catalog, containing the original strings that need to be translated and placeholders for the translations. Each entry in a PO file consists of several fields:
    • msgid: This field represents the original string that needs to be translated.
    • msgstr: This field holds the translated string corresponding to the msgid field.
    • Comments: PO files may include comments that provide context or instructions for translators. These comments start with a “#” symbol.
  2. Machine Object (MO) files: MO files are generated from PO files using a compilation process. The compilation process converts the human-readable PO file, which contains the original strings and their translations, into a more compact and efficient binary format suitable for runtime use.

    The purpose of MO files is to provide a faster and more efficient way of accessing translations during the execution of a software application. Instead of parsing and processing the text-based PO files at runtime, the Gettext libraries directly read the pre-compiled MO files.

Caching Language Files!

There has been a discussion for years, if it makes sense to cache mo-files, to speedup WordPress when multiple languages are in use. Discussion of the WordPress Core team.

There have been a couple of plugins trying to fix this and prevent reloading of language files on every pageload.

Most of these use transients in your database and object caches if active.

Does it really make any sense?

Well it all depends on the amount of language files and your infrastructure. This load/parse operation is quite CPU-intensive and does spend quite a significant amount of time.

I have decided, not to bother with it in the past :) But I am always looking for ways to speed up multi-lingual websites, as that is my daily bread & butter ;) Checkout Index WP MySQL For Speed & Index WP Users For Speed, which optimizes the MySQL Indexes for optimal speed. That change, really does make a bit difference!

Native Gettext for WordPress

One thing that can help to speed up things, is to use the native gettext extension and not the WordPress integration of it. This will indeed help speedup translation processing and help big multilingual websites.

Native Gettext for WordPress by Colin Leroy-Mira, provides just that.

Disable Gettext, when only using English!

Create a must use plugin and add this:

This will prevent any .mo file from loading.

Use the gettext filter to change any translatable string.

Please consider the performance impact. Read about it at the main documentation.

Enjoy ….

readmore

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

Chatbots

Typebot is a free and open-source platform that lets you create conversational apps and forms, which can be embedded anywhere on your website or mobile apps.

It provides various features like text, image, and video bubble messages, input fields for various data types, native integrations, conditional branching, URL redirections, beautiful animations, and customizable themes.

You can embed it as a container, popup, or chat bubble with the native JS library and get in-depth analytics of the results in real-time.

Typebot can be used in the Cloud (free tier available) or installed via Docker.

It drag & drop builder makes it amazingly fast to build your personal chatbot. It provides a ton of integrations (Google Analytics, Google Sheets, OpenAI, Zapier, Webhooks, Email, Chatwood) out of the box or you can connect other things via your own API Requests.

I have been a longtime user of RocketChat and build my own chatbots using Hubot or BotPress.

RocketChat
“Rocket.Chat is a free and open-source team chat platform that enables real-time communication between team members. It provides team messaging, audio and video conferencing, screen sharing, file sharing, and other collaboration features. It offers a familiar chat interface that makes it easy for teams to stay connected and collaborate effectively.

Rocket.Chat is highly customizable and extensible, with a large number of community-contributed plugins and integrations. It supports multiple platforms, including web, desktop, and mobile, making it accessible to teams regardless of their device or location. It also offers end-to-end encryption for secure communication, and compliance with various industry regulations such as HIPAA, GDPR, and others.”

Hubot
“Hubot is a popular open-source chatbot framework developed by GitHub. It allows developers to build and deploy custom chatbots that can automate tasks, integrate with various APIs, and enhance team communication and collaboration.

Hubot is built on Node.js and can be extended with various plugins and scripts, making it highly customizable and flexible. It comes with many built-in plugins, including integration with popular chat platforms like Slack, HipChat, and Campfire, as well as various APIs like Twitter, GitHub, and Google.

Hubot enables developers to build chatbots that can perform various tasks, such as scheduling meetings, deploying code, fetching data, and responding to user queries. It also provides a command-line interface for managing and interacting with the chatbot.”

Botpress
“Botpress is an open-source platform that allows you to build and deploy chatbots and conversational interfaces. It provides a user-friendly interface and a visual flow editor that allows you to create and manage your chatbot’s conversation flow. Botpress comes with many pre-built components and integrations, including natural language processing (NLP) engines, chat widgets, and webhooks, making it easy to build complex chatbots with advanced functionality.

Botpress offers features like machine learning-based NLP, conversational analytics, multi-language support, customizable themes, and a modular architecture that allows you to add custom functionalities with ease. It supports multiple channels, including web, Facebook Messenger, Slack, and WhatsApp, allowing you to reach your audience wherever they are.”

Typebot rocks

Typebot beats Botpress and could be the reason why I might be skipping RocketChat as well. Not sure I want to build an integration for RocketChat myself.

Setup

portalZINE NMN | Development meets Creativity | typebot

Base YAML Docker-Compose File to get you started. This will setup a Postgres instance, the typebot builder and typebot viewer.

Github
Docker Setup

readmore

Developer Tools

IT Tools is an amazing docker image that gives you access to a ton of developer tools for different categories. All these are nicely wrapped into an intuitive web-interface.

The online tools can perform different functions. These include generating tokens, hashing text, generating UUIDs, encrypting and decrypting text, generating BIP39 passphrases, converting dates and times, converting numbers between different bases and converting Roman numerals to numbers and vice versa. Other tools listed include base64 encoders/decoders, color converters, HTML editors, user-agent parsers, crontab generators, Docker run to Docker compose converters, and various calculators for items such as IPv4 subnets, ETA and temperatures.

I am using it locally and added some of my own. These tools are a nice addition for developers to streamline their workflow and are tools you often search online anyway.

Available Categories

  • Crypto
    Token generator, Hash text, Bcrypt, UUID generator …
  • Converter
    Date-time, Base64, Yaml to JSON ….
  • Web
    Escape html entities, Url Parser, Basic Auth generator …
  • Images
    QR Code Generator, SVG placeholder …
  • Development
    Git Cheatcheet, Radom Port generator, Crontab generator …
  • Network
    IPv4 subnet calculator, MAC address lookup …
  • Math
    Math evaluator, ETA calculator
  • Measurement
    Chronometer, Temperature converter …
  • Text
    Lorem Ipsum, Text stats
  • Data
    Phone parser …
  • Add your own
    There is a tool that allows you to deploy / integrate your own

Setup

portalZINE NMN | Development meets Creativity | it tools docker


Docker is a containerization platform that allows you to create and manage containers for your applications. Not going into detail, but here the docker run command to get you started.

Preview
Github
Feature request

readmore

What is Bookstack

BookStack is an open-source, web-based platform for organizing, storing, and sharing knowledge and documentation. It was developed to provide a user-friendly and intuitive interface for creating and managing knowledge bases, wikis, and other types of structured content.

BookStack allows users to create books, chapters, and pages, and to organize them hierarchically. Users can also add images, files, and links to their content, and collaborate with others by assigning roles and permissions. BookStack also supports full-text search, version control, and commenting, making it easy to find and update information.

BookStack is written in PHP and uses the Laravel framework, and it is available for free under the MIT License.

What are you using it for?

This is my internal homelab documentation system, I use it for private and client related content. Bookstack is fast, clean and well documented. It has really elevated the way I store and access important reminders / how-tos and documentation.

The system provides API access and has many ways to tweak it. Bookstack documentation.

Why display CSV files?

CSV stands for “Comma-Separated Values”. It is a simple file format used to store tabular data, such as spreadsheets or databases, in plain text. In a CSV file, each line represents a row of data, and each column is separated by a comma (or sometimes a semicolon or tab).

There are always CSV exports or other data stored in CSV format, that i need quick access to sometimes.

Bookstack allows to add files to pages and insert links to them, but it does not embed or parse those files in any way. There are similar hacks to mine, this example allows to embed PDFs and here the main Hacks page.

Lets get started!

We need something to parse the CSV file and something to display the information in a nice visual & flexible grid.

  1. I am choosing Papa Parse for the CSV parsing, wrote about it a long time ago and still using it actively for many projects.

    Papaparse can handle CSV files with different delimiters, encodings, and line endings, and can also handle complex data formats, such as quoted values, escaped characters, and multi-line cells. The library is widely used in web applications, data analysis tools, and other software that deal with CSV data.
  2. Grid.js is my library of choice to display the parsed information in a nice grid.

    Grid.js is a modern and open-source JavaScript library for building responsive and customizable data tables in web applications.

    It provides a simple and intuitive API for creating, styling, and populating tables with data from various sources, including JSON, CSV, and Excel files.

    Grid.js supports features such as sorting, filtering, pagination, column resizing, and cell formatting, as well as advanced features such as tree grids, custom renderers, and editable cells. The library also includes built-in plugins for exporting data to different formats, such as CSV, Excel, and PDF.

Include the file in Bookstack

Included and linked CSV files look something like that in source.

Tweak the header

The settings allow you to add custom code to your instance. Another option would be to tweak template files, but its easier to do these light tweaks using the header customizer.

This can be found under: https://bookstack.instance/settings/customization

Add required libs

Either link them externally or better use locally stored versions of these.

Papa Parse
Grid.JS

Find CSV links in the page and append to link

  1. This searches the page_content for elements that have “.csv” in their textContent.
  2. Gets textContent and the href of the link.
  3. The link is passed to Papa Parse for processing.
  4. On completion the data result is split into the header row and the rest.
  5. That data is passed to Grid.JS and added to a container element after the link.
    Grid.JS provides a ton of configuration options, I added the most common as a starting point. This includes different ways to style the grid.

Github: Will be adding more hacks, as I clean some of them up :)

A bonus

You can use the title attribute to pass some config data, in JSON format. Currently only to strip columns, but will extend that a bit more for flexible usage ;)

portalZINE NMN | Development meets Creativity | json grid js

The result

Should look something like that …

portalZINE NMN | Development meets Creativity |

Enjoy coding …

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