CakeDC Blog

TIPS, INSIGHTS AND THE LATEST FROM THE EXPERTS BEHIND CAKEPHP

Basic UX principles

Everyone wants their website to stand out and be noticed, have you considered what the top UX principles should be when designing your next website?

We have compiled a quick list of our top ones.

  • Keep the user in mind - it's a social experience

Visitors may not always remember all the information presented to them on your site, however, they will almost certainly remember the experience or how they felt. Advertisers focus on selling to your heart, so why shouldn't you when designing. Focus on creating an emotional connection with your user.

  • Visitors scan websites - very few actually read!

Infographics and images are a perfect way to get your message across quickly - try to capture as many of your audience as you can by including ‘scan friendly’ content.

  • Keep it simple and clear

Don’t let your main message get lost in clutter. Keep the visitors path to success clear and concise. It can take as little as 0.5 seconds for a visitor to decide whether to stay or leave. Don’t let a user have to think about their next action - keep preferred actions as clear as possible.

  • Getting creative vs. using common design patterns

There are many commonly used UI patterns out there, which users are already accustomed to. By making use of these in your design, you make it easier for your user to adapt while making it easier for them to make use of your website. Links, buttons, position of login points, logos and company names all form part of commonly used UI patterns. Try to balance usability with your own creativity.

  • Designing above the fold vs. designing for above the fold.

When designing to capture one’s attention, above the fold becomes a hot topic. Designing above the fold needs to be referenced within its own context - it varies across devices. Ideally when designing to capture attention, focus should not only be on the top of the page but rather be held throughout the page’s design.

  • UX is a conversation

Your goal when designing any website, is to create a dialogue with potential clients. The key to this point is to know who your visitors will be and to use these as insights into developing your design.

  • Responsive design should be thoughtful design

Designing your website to be fluid across devices has become increasingly important over the last few years. However, many companies are still making websites responsive just to be responsive without proportioning image and text sizes. Top tip is to check out your site on different devices, such as mobile and tablets, and asking yourself “does this look good”.

Latest articles

Troubleshooting Queue Jobs with Queue Monitor Plugin

This article is part of the CakeDC Advent Calendar 2024 (December 11th 2024) In this article we'll show how to easily monitor the queue jobs in CakePHP 5.0 using the CakePHP Queue Monitor plugin. Queue Monitor Plugin is a companion plugin for the official CakePHP Queue plugin .

Why I should monitor the queues

Monitoring queue jobs is crucial for maintaining the health and efficiency of your application's background processing. Here are some compelling reasons why you should monitor queue jobs:
  • Performance and Throughput: Monitoring helps ensure that your jobs are processed within acceptable time frames, preventing bottlenecks and ensuring that your application runs smoothly.
  • Error Detection and Handling: By keeping an eye on your queue jobs, you can quickly identify and address errors or failures in the jobs. This allows you to reduce the potential downtime.
  • Scalability: As your application grows, monitoring helps you understand how the queue system is handling the increased load, guiding decisions about scaling up or distributing workloads among multiple workers to speed up the job processing.
  • User Experience: Ensuring that background tasks are processed efficiently directly impacts the user experience. For example, timely processing of tasks like email notifications or data updates keeps users satisfied.
By monitoring your queue jobs, you can maintain a robust and efficient application that enhances performance and ensures reliability.

Key Features

This plugin will allow you to monitor the queue, in particular:
  • monitor and notify about jobs that exceed the specified working time
  • check if configured queues are working correctly
  • clear the queue of queued jobs
  • inspect job messages that have been processed

Getting Started

Before we discuss the functionality, we will go through the installation and configuration of the plugin.

Step 1: Installing the plugin

First you need to install the plugin into your CakePHP 5 application. To do this, you will need to run this command in the root of your project: composer require cakedc/queue-monitor When the plugin is installed please load it into your application: bin/cake plugin load CakeDC/QueueMonitor After the plugin is loaded please run the required migrations: bin/cake migrations migrate -p CakeDC/QueueMonitor

Step 2: Configuring the monitoring

To configure monitoring, place the following directives in your config/app_local.php and adjust values if needed. // ... 'QueueMonitor' => [ 'disable' => false, 'mailerConfig' => 'default', 'longJobInMinutes' => 30, 'purgeLogsOlderThanDays' => 7, 'notificationRecipients' => '[email protected],[email protected],[email protected]', ], // ... Options explained:
  • QueueMonitor.disable - With this setting you can enable or disable the queue monitoring, as the queue monitoring is enabled by default.
  • QueueMonitor.mailerConfig - mailer config used for notification, the default is default mailer.
  • QueueMonitor.longJobInMinutes - This is the time in minutes after which the job will be considered as working too long, and will be taken into account when sending notifications. The default values is 30 minutes.
  • QueueMonitor.purgeLogsOlderThanDays - This is the time in days after which logs will be deleted from the database to keep the log table small. The default value is 7 days.
  • QueueMonitor.notificationRecipients - This is a comma-separated list of recipients of notifications about jobs exceeding the configured working time.

Step 3: Configuring queue to use the monitoring

To enable the monitoring capabilities to a queue, you will need to add the listener to the queue configurations that you want monitor: 'Queue' => [ 'default' => [ // ... 'listener' => \CakeDC\QueueMonitor\Listener\QueueMonitorListener::class, // ... ] ],

Step 4: Configure notification cronjob

To receive emails about jobs that take too long to process, you need to add the following command to cron: bin/cake queue-monitor notify It is best to configure this command to run every few minutes.

Step 5: Configure the log purging

To keep the log table size small, you need to add automatic log purging to cron: bin/cake queue-monitor purge-logs It is best to configure this command to run every day.

Features

Continuous queue job monitoring

With the Queue Monitoring plugin installed and configured, all of your queued jobs are logged with time points and full message content. The entire processing of each job is also logged, starting from the moment the job is enqueued until one of the many ways the job ends. When any of the jobs exceeds the configured working time, you will be notified by email.

Inspecting the queue logs

Using CakeDC\QueueMonitor\Model\Table\LogsTable you can view all logged job messages. This functionality will be expanded in subsequent versions of the plugin.

Testing the queues

To quickly test if all queues are running correctly, run this command (replace [email protected] with working email address: bin/cake queue-monitor test-enqueue [email protected] This command will send the email through all configured queues.

Purging the queues

To purge the content of a specified queue you can use the purge queue command: bin/cake queue-monitor purge-queue your-queue-name The above command will remove all pending queue jobs from the specified queue. To purge all queues you can use command: bin/cake queue-monitor purge-queue --all

Conclusion

And that's it, you have successfully enabled queue monitoring and troubleshooting tools in your application. This plugin is in active development and more features will be added to it soon, some of them are:
  • browsing the content of messages in the queue
  • deleting a specified number of messages from the queue
  • deleting the first job in the queue
  • CRUD for queue logs
  • asynchronous queue logging to prevent degradation of job processing performance in case of high job frequency
We look forward to your feedback and contributions as we continue to enhance this plugin for the benefit of the entire CakePHP community. This article is part of the CakeDC Advent Calendar 2024 (December 11th 2024)

Introducing the CakePHP Goto View VSCode Extension

This article is part of the CakeDC Advent Calendar 2024 (December 10th 2024) As we embrace the spirit of giving during this holiday season, I'm glad to announce a new tool that aims to enhance the development experience for CakePHP developers using Visual Studio Code. The CakePHP Goto View extension brings intelligent navigation and autocompletion features to streamline your CakePHP development workflow.

Why Another Extension?

While CakePHP's convention over configuration approach makes development intuitive, navigating between related files in large projects can still be challenging. Whether you're working with templates, elements, cells, or assets, finding the right file quickly can impact your development speed and focus. This extension was born from the daily challenges we face as CakePHP developers, designed to make file navigation and discovery as seamless as possible while respecting CakePHP's conventions.

Key Features

Smart Navigation

Controller and Template Integration

  • Seamlessly navigate between controllers and their views by hovering over ->render() calls
  • Quick access to template files directly from controller actions
  • Smart detection of template paths based on controller context

Element and Cell Management

  • Instant access to element files by hovering over $this->element() calls
  • Complete cell navigation showing both cell class and template files
  • Support for nested elements and plugin elements

Asset File Navigation

  • Quick access to JavaScript files through Html->script() calls
  • CSS file navigation via Html->css() helper references
  • Support for both direct paths and plugin assets
  • Integration with asset_compress.ini configuration for compressed assets

Email Template Support

  • Navigate to both HTML and text versions of email templates
  • Quick access from Mailer classes to corresponding templates
  • Support for plugin-specific email templates

Plugin-Aware Intelligence

  • Smart resolution of files across different plugins
  • Support for both app-level and plugin-level resources
  • Automatic detection of plugin overrides in your application
  • Composer autoload integration for accurate namespace resolution

Autocompletion

  • Context-aware suggestions for elements, cells, and assets
  • Support for plugin resources with proper namespacing
  • Intelligent path completion based on your project structure

Developer Experience

  • Hover information showing related files and their locations
  • Real-time map updates as you modify your project structure
  • Support for both application and plugin resources
  • Minimal configuration needed - it just works!

Community Contribution

As with any open-source project, this extension is open to community involvement. Whether it's reporting bugs, suggesting features, or contributing code, every input helps make this tool better for everyone in the CakePHP ecosystem.

Getting Started

The extension is available in the Visual Studio Code marketplace. Simply search for "CakePHP Goto View" in your extensions panel or visit the marketplace website. Once installed, the extension automatically detects your CakePHP project structure and begins working immediately. No complex configuration required - it's designed to follow CakePHP conventions out of the box.

Conclusion

In the spirit of the CakePHP community's collaborative nature, this extension is our contribution to making CakePHP development even more enjoyable. We hope it helps streamline your development workflow and makes navigating your CakePHP projects a breeze. We look forward to your feedback and contributions as we continue to enhance this tool for the benefit of the entire CakePHP community. This article is part of the CakeDC Advent Calendar 2024 (December 11th 2024)

Integrating Telegram Bot with CakePHP using TeBo

This article is part of the CakeDC Advent Calendar 2024 (December 9th 2024) Want to add a Telegram bot to interact with your users? TeBo is a great plugin that simplifies the process. In this guide, I’ll walk you through integrating a Telegram bot into your CakePHP 5 application with a practical example using the Pokémon public API. The bot will respond with details about a Pokémon when users send the command /pokemon <name>. TeBo is a plugin designed specifically for managing bots in CakePHP, focusing on easy configuration and custom commands. GitHub Repository for TeBo

Step 1: Install the Plugin

Start by installing the TeBo plugin in your CakePHP project. You’ll need Composer, the PHP dependency manager. Run this command in the root of your project: composer require arodu/tebo After the plugin is installed, load it into your application: bin/cake plugin load TeBo That’s it! You’re ready to use the plugin.

Step 2: Set Up the Telegram Token

Every Telegram bot requires an authentication token, which you get by creating a bot on Telegram. Follow these steps:
  1. Open Telegram and search for BotFather, the official bot for creating and managing other bots.
  2. Send the command /newbot and follow the instructions. BotFather will ask for a bot name and a unique username.
  3. When you’re done, BotFather will give you an authentication token that looks like this: 1234567890:ABCDefghIJKlmNoPQRstuVWXyz.
Add this token to your .env file in your project: export TELEGRAM_TOKEN="1234567890:ABCDefghIJKlmNoPQRstuVWXyz"

Step 3: Configure the Webhook

For your bot to receive updates from Telegram, you need to set up a webhook. This tells Telegram where to send messages for your bot in real time. TeBo provides commands to easily manage webhooks from the terminal:
  • Get webhook URL: Shows the current webhook URL.
  • Set webhook: Links your bot to a URL.
  • Remove webhook: Deletes the webhook configuration.
  • Get webhook info: Displays connection details.
  • Get bot info: Shows basic bot information.
To manage the webhook, use the following command and select option 2 from the menu: bin/cake tebo Or, set the webhook directly with this command: bin/cake tebo webhook -s

Step 4: Create a Custom Command

Now that your bot is set up, let’s create a command to respond with Pokémon information when it receives /pokemon <name>.

4.1 Create the Command Action

In your project’s src/Actions folder, create a file named PokemonAction.php with the following code: <?php declare(strict_types=1); namespace App\TeBo\Action; use Cake\Cache\Cache; use Cake\Http\Client; use Cake\Utility\Hash; use TeBo\Action\Action; use TeBo\Action\Command\MessageCommandTrait; use TeBo\Response\HtmlMessage; use TeBo\Response\TextMessage; class PokemonAction extends Action { use MessageCommandTrait; public function description(): ?string { return __('Get information about a Pokémon'); } public function execute(): void { $pokemonName = $this->getMessageCommand()->getArgument(0); if (!$pokemonName) { $this->getChat()->send(new TextMessage(__('Please provide a Pokémon name.'))); return; } $pokemonData = $this->getPokemonData($pokemonName); if (isset($pokemonData['name'])) { $types = Hash::extract($pokemonData, 'types.{n}.type.name'); $message = [ 'Name: ' . $pokemonData['name'], 'Order: ' . $pokemonData['order'], 'Types: ' . implode(', ', $types), ]; $this->getChat()->send(new HtmlMessage($message)); } else { $this->getChat()->send(new TextMessage(__('Pokémon not found.'))); } } private function getPokemonData($pokemonName) { return Cache::remember('pokemon_' . $pokemonName, function () use ($pokemonName) { $url = "https://pokeapi.co/api/v2/pokemon-form/{$pokemonName}"; $http = new Client(); return $http->get($url)->getJson(); }); } }

4.2 Register the Command

Add this command to your plugin configuration file (config/tebo.php): return [ 'tebo.actions.command' => [ 'pokemon' => \App\TeBo\Action\PokemonAction::class, ], ]; This associates the pokemon command with the action you just created, you can add as many commands as you need.

4.3 Test the Command

Send the command /pokemon pikachu to your bot, and it should respond with details about Pikachu.

4.4 Customize the Response

You can make the response more engaging by including images or additional details: if (isset($pokemonData['name'])) { $sprite = $pokemonData['sprites']['front_default']; $message = new \TeBo\Response\Photo($sprite, [ 'Name: ' . $pokemonData['name'], 'Types: ' . implode(', ', $types), ]); }

Step 5: Deploy the Bot to Production

For production, ensure your server is HTTPS-enabled, as Telegram requires secure webhooks. During development, you can use a tool like ngrok to temporarily expose your local server. Update your .env file with your server’s domain: export WEBHOOK_BASE="mydomain.com" Make sure to test your bot thoroughly in the production environment.

Additional Resources

Conclusion

And that’s it! You’ve successfully integrated a Telegram bot into your CakePHP application. Your bot can now interact with users and provide useful information, like Pokémon details. TeBo makes it easy to add custom commands and manage user interactions. Feel free to explore and expand your bot with more features! This article is part of the CakeDC Advent Calendar 2024 (December 9th 2024)

We Bake with CakePHP