Tag: wordpress

  • Block Editor Best Practices: WordPress Meetup Saarland

    Block Editor Best Practices: WordPress Meetup Saarland

    WordPress Meetups are always one of the best ways to meet like-minded people, teach people about WordPress, have amazing discussions, and bring more people to the wonderful community. I participated in the 3rd WordPress Meetup in Saarland on 5th September, this time as a speaker. I talked about probably the most controversial feature of WordPress, the Block Editor (also known as Gutenberg). The topic was mainly about Block Editor Best Practices – for users, designers, and developers.

    Recently, we revamped rtCamp‘s website. It was a mammoth task – custom blocks, patterns, templates, and what not. During the process, we discovered some pain points with the block editor and also figured out some best practices. This talk focused on the outcomes of the project.

    During the talk, I realized how much context-switching I needed to do. One of the members in the audience was an artist and had just installed WordPress. They wanted to know the powers of Gutenberg. On the other hand, one of the members of the audience, Fredric Döll has founded Digitenser Consulting, wanted to learn more about how to efficiently create for and with the block editor for their clients.

    Gutenberg is a very powerful tool but it is often misunderstood. It is also important to understand that for some sites, Gutenberg may not make sense. But for the sites where editorial experience is key, it is imperative that the website is planned really well. A robust plan helps with feasible designs which lead to a better overall developer experience.

    The next WordPress Meetup in Saarland will happen on 23.01.2025. If you’re around Saarbrücken at that time, feel free to drop your emails in the comment.

    Note: In the presentation, we discussed negative margins. Gutenberg does have support for negative margins; however, our discussion was more oriented towards user experience. Currrently, negative margins in Gutenberg, have a little UX situation.

    Block Editor Best Practices – Deck

    You can access the presentation slides (Google Slides) this link.

  • New Relic with WordPress using Event API for better monitoring

    New Relic with WordPress using Event API for better monitoring

    New Relic is a leading application performance monitoring (APM) platform that offers developers invaluable insights into the performance of their applications. APM tools provide us with real-time monitoring, diagnostics, and analytics capabilities that enable us to gain deep visibility into our applications, track down performance issues, and make informed decisions to improve the overall user experience. If you wish to add monitoring to your server, here is how you can use Grafana Loki to monitor your server logs. WordPress is the most popular CMS in the world. Integrating New Relic with WordPress can help developers optimize their code and identify bottlenecks. It also helps ensure that the WordPress applications perform well under different loads and usage scenarios.

    Recently, we shipped a WordPress solution that relies heavily on third-party API. To obfuscate the keys and other confidential data, we used WP REST API as a relay which acts like a proxy (sort of). On the client side, we hit the WP REST API endpoints, which call the third-party API. We use Transients to cache the response on the server side. We also use a caching layer on the client side (using Axios and LocalStorage). The transients (server-side cache) mitigate redundant requests from different users to the third-party API, whereas the client-side cache reduces redundant requests from the same user to the site’s backend.

    In this post, we will learn how to integrate New Relic with WordPress using the Event API.

    Overview

    We could not install and configure New Relic’s PHP Agent to instrument external API calls (because the hosting platform did not allow that). Therefore, we decided to use the Event API. It is a powerful tool that allows us to send custom event data to New Relic Insights, their real-time analytics platform. Using Event API, we can capture and analyze specific events or metrics that are important to our application’s performance and operations.

    Event API

    Using the Event API, we can programmatically send structured JSON data to New Relic Insights. The data can then be visualized and queried to gain deeper insights into our application’s behavior. This can include information such as user interactions, system events, errors, custom metrics, or any other relevant data points.

    To use Event API, we need to follow these steps:

    1. Obtain your New Relic Ingest - License API key.
    2. Obtain your Account ID.

    We have to use the following endpoint to POST to the Event API: https://insights-collector.newrelic.com/v1/accounts/{{ ACCOUNT_ID }}/events.

    The API Key needs to be set in the Headers. The JSON payload looks like this:

    {
      "eventType": "myEvent",
      "timestamp": 1652455543000,
      "applicationId": "myApp",
      "data": {
        "key1": "value1",
        "key2": "value2"
      }
    }

    The eventType is what we will use to query the data.

    $access_id = EXTERNAL_API_KEY;
    $response = wp_safe_remote_get( $endpoint );
    
    if ( is_wp_error( $response ) || 200 !== $response['response']['code'] ) {
    			$incident = send_external_api_incident( $endpoint, (string) $response['response']['code'], $response );
    			return new WP_Error(
    				(int) $response['response']['code'],
    				array(
    					'actual_response'    => $response,
    					'new_relic_incident' => $incident,
    				) 
    			);
    		}

    The send_external_api_incident() logic:

    /**
     * Sends API Incident event to New Relic.
     *
     * @param  string          $endpoint
     * @param  string          $response_code
     * @param  array|\WP_Error $response
     * @return array|\WP_Error
     */
    function send_external_api_incident( string $endpoint, string $response_code, array|\WP_Error $response ) {
    	$base_url = 'https://insights-collector.newrelic.com/v1/accounts/' . NEW_RELIC_ACCOUNT_ID . '/events';
    	$body     = [
    		array(
    			'eventType'    => 'ExternalApiIncident',
    			'endpoint'     => $endpoint,
    			'responseCode' => $response_code,
    			'response'     => wp_json_encode( $response ),
    		),
    	];
    	$response = wp_safe_remote_post(
    		$base_url,
    		array(
    			'headers' => array(
    				'Content-Type' => 'application/json',
    				'Api-Key'      => NEW_RELIC_INGEST_KEY,
    			),
    			'body'    => wp_json_encode( $body ),
    		)
    	);
    
    	return $response;
    }

    Checking the results

    Head over to the your New Relic account and click on your application. You can use NRQL queries to query data.

    SELECT * FROM `ExternalApiIncident` since 1 day ago


    In conclusion, integrating New Relic with WordPress application offers a robust solution for monitoring and optimizing application performance. This approach not only enhances the visibility of your application’s internal workings but also ensures a seamless user experience by efficiently tracking and analyzing critical data points. By following the outlined steps and best practices, you can successfully implement this powerful tool, even in environments with certain restrictions. The ability to customize event tracking and gain insights through real-time analytics is invaluable for developers aiming to maintain high-performance standards. Remember, continuous monitoring and improvement are key to staying ahead in the fast-paced digital world. Utilize these insights to keep your application running smoothly, and always be proactive in seeking ways to refine and enhance your system’s performance.

  • DevWP Day 2

    DevWP Day 2

    WordPress is a pretty powerful CMS but it is often misunderstood and its power is underestimated. People need to learn WordPress, not only because it drives almost half of the web but also because it is powerful, versatile, and open source.

    Hackoverflow Technical Society organized ‘DevWP’, a four-day-long WordPress contest in collaboration with rtCamp, a WordPress VIP Gold Agency Partner.

    Our goal is to introduce students, particularly college freshers and juniors, to WordPress. The participants will create a website on different topics, ranging from personal blogs to e-commerce websites, using WordPress. We want students to understand that WordPress is not just another CMS, but they can build really amazing applications using it.

    In this session, we had Muhammad Muhsin, Sourav Roy, and Paul David Clark with us. We covered three topics – Career Opportunities in WordPress, Journey as a WordPress Engineer, and Career Roadmaps. Muhsin is a Senior React Engineer at rtCamp, Sourav Roy is a WordPress Engineer, and Paul Clark is the Director of Engineer at rtCamp.

  • DevWP Day 1

    DevWP Day 1

    We are off to a great start ?

    Today was the Day 1 of #DevWP, a 4-day-long #WordPress#contest in collaboration with rtCamp. We are organizing this contest under the banner of #Genesis, our marquee #event for #freshers and #college#juniors.

    In this #edition, we thought of including a contest about #WordPress since people often underestimate its power. #WordPress is at the core of most of the #websites that we see today, so it is imperative for freshers to at least know about #WordPress.

    Today’s session was an orientation regarding the event and #WordPress. We discussed why #WordPress is important, installing #WordPress on #Windows#Linux, and #Mac, and some basic things about #WordPress.

    In tomorrow’s session, we have Paul David ClarkMuhammad Muhsin, and Sourav Roy from rtCamp with us. They’ll speak about #Career opportunities in WordPress, their #journey, and #Career#Roadmap.

    It is going to be a fun ride!

    Special mention to – Aditya KaneNicol FernandesRahul Bansal for helping Hackoverflow Technical Society and hundreds of #students from CHANDIGARH UNIVERSITY with this #collaboration.