<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Mr.Dev.&#8217;s Module &#8211; Marcos Rego</title>
	<atom:link href="https://marcosrego.com/tag/mr-dev-s-module/feed/" rel="self" type="application/rss+xml" />
	<link>https://marcosrego.com</link>
	<description>Web Development</description>
	<lastBuildDate>Tue, 27 Dec 2022 20:22:50 +0000</lastBuildDate>
	<language>en-GB</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.7.1</generator>
	<item>
		<title>A plugin development journey and what&#8217;s breaking in right before 2022</title>
		<link>https://marcosrego.com/blog/mrdev-mrutils-journey-new-2022/</link>
		
		<dc:creator><![CDATA[Marcos Rego]]></dc:creator>
		<pubDate>Thu, 23 Dec 2021 01:29:00 +0000</pubDate>
				<category><![CDATA[Blog]]></category>
		<category><![CDATA[About me]]></category>
		<category><![CDATA[Joomla]]></category>
		<category><![CDATA[Mr.Dev.]]></category>
		<category><![CDATA[Mr.Dev.'s Framework]]></category>
		<category><![CDATA[Mr.Dev.'s Module]]></category>
		<category><![CDATA[Mr.Dev.'s Widget]]></category>
		<category><![CDATA[Mr.Utils]]></category>
		<category><![CDATA[News]]></category>
		<category><![CDATA[Wordpress]]></category>
		<guid isPermaLink="false">https://marcosrego.com/?p=2302</guid>

					<description><![CDATA[The journey of Mr.Dev.&#8217;s Widget and Module Back when I first started developing Mr.Dev.&#8217;s Widget and Module, it didn&#8217;t have that name and the main intention was to show categories in accordions and posts inside tabs that are inside those accordions for Ruben R Dias website. Back then, WordPress and Joomla were CMS where the [&#8230;]]]></description>
										<content:encoded><![CDATA[<span id="more-2302"></span>
<!--noteaser-->



<h2 class="wp-block-heading"><strong>The journey of Mr.Dev.&#8217;s Widget and Module</strong></h2>



<p>Back when I first started developing <a href="https://marcosrego.com/development/mrdev-widget/" data-type="post" data-id="574">Mr.Dev.&#8217;s Widget</a> and <a href="https://marcosrego.com/development/mrdev-module/" data-type="post" data-id="868">Module</a>, it didn&#8217;t have that name and the main intention was to show categories in accordions and posts inside tabs that are inside those accordions for <a href="https://marcosrego.com/websites/rubenrdias/" data-type="post" data-id="448">Ruben R Dias</a> website.</p>



<p>Back then, <a href="https://marcosrego.com/tag/wordpress/" data-type="post_tag" data-id="23">WordPress</a> and <a href="https://marcosrego.com/tag/joomla/" data-type="post_tag" data-id="46">Joomla</a> were CMS where the frontend was totally dependent of extra elements (themes, plugins and other optional features) that the developer/designer could choose to use or could create custom tools.</p>



<div style="height:30px" aria-hidden="true" class="  wp-block-spacer"></div>



<figure class="   wp-block-gallery aligncenter has-nested-images columns-default is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex">
<figure class="     wp-block-image size-large"><img fetchpriority="high" decoding="async" width="1024" height="610" data-id="1572" src="https://marcosrego.com/wp-content/uploads/2021/08/rubenrdias-site-desktop-categories-1024x610.jpg" alt="Ruben R. Dias desktop website showing the main categories" class="wp-image-1572" title="rubenrdias site desktop categories - A plugin development journey and what&#039;s breaking in right before 2022" srcset="https://marcosrego.com/wp-content/uploads/2021/08/rubenrdias-site-desktop-categories-1024x610.jpg 1024w, https://marcosrego.com/wp-content/uploads/2021/08/rubenrdias-site-desktop-categories-300x179.jpg 300w, https://marcosrego.com/wp-content/uploads/2021/08/rubenrdias-site-desktop-categories-768x457.jpg 768w, https://marcosrego.com/wp-content/uploads/2021/08/rubenrdias-site-desktop-categories-1536x914.jpg 1536w, https://marcosrego.com/wp-content/uploads/2021/08/rubenrdias-site-desktop-categories.jpg 1920w" sizes="(max-width: 1024px) 100vw, 1024px" /><figcaption class="wp-element-caption">Ruben R. Dias desktop website showing the main categories</figcaption></figure>
</figure>



<p>We (developers) had the full control over the frontend. </p>



<p>In my case, I choosed to create a widget and module because of the functions and the graphic user interface (GUI) that both WordPress and Joomla had already built-in. In theory they allowed to not bloat the systems with something otherwise done from scratch or using external dependencies.</p>



<p>The version of Mr.Dev.&#8217;s widget/module I gave to my direct clients became very powerful, <strong>allowing to show any type of content (from posts to products) with many options, themes and layouts</strong>. All that with checkbox and fields, so<strong> it was safe to give to clients</strong>, knowing they would not affect negatively the design.</p>



<p>To indirect clients <em>(people downloading the widget/module to their own developments)</em> I put the most powerful features part of the paid plugin <strong><a href="https://marcosrego.com/mrdev-widget-module-features/" data-type="page" data-id="838">Mr.Dev.&#8217;s Framework</a></strong>.</p>



<figure class="    wp-block-image size-large"><img decoding="async" width="1024" height="538" src="https://marcosrego.com/wp-content/uploads/2021/08/mrdev-widget-category-description_opengraph-1024x538.jpg" alt="Mr.Dev.&#039;s Widget getting the current category" class="wp-image-1582" title="mrdev widget category description opengraph - A plugin development journey and what&#039;s breaking in right before 2022" srcset="https://marcosrego.com/wp-content/uploads/2021/08/mrdev-widget-category-description_opengraph-1024x538.jpg 1024w, https://marcosrego.com/wp-content/uploads/2021/08/mrdev-widget-category-description_opengraph-300x158.jpg 300w, https://marcosrego.com/wp-content/uploads/2021/08/mrdev-widget-category-description_opengraph-768x403.jpg 768w, https://marcosrego.com/wp-content/uploads/2021/08/mrdev-widget-category-description_opengraph.jpg 1200w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<h3 class="  wp-block-heading"><strong>But then things changed..</strong></h3>



<p><strong>As for the module, Joomla 4</strong> was later released with different methods to create modules. It was not worth it to recreate the module, so it was discontinued and unsupported for other two reasons: The user-base of Joomla is much smaller comparing to WordPress and I was using Joomla mostly for <a href="https://marcosrego.com/tag/browserbox/" data-type="post_tag" data-id="47">a company where I am not working anymore</a>.</p>



<p><strong>As for the widget, WordPress also changed,</strong> with a new highly visual editor enabled by default: The <strong>Gutenberg block editor</strong> meant that WordPress was pushing to developers a specific tool to change the frontend, a tool that basically <strong>transforms the CMS into a site builder</strong>.</p>



<p>And with that, the optional features such as widgets and the customizer started to become obsolete vs the block editor with full site editor growing much stronger.</p>



<p>Despite this,<strong> Mr.Dev.&#8217;s Widget is still compatible and support is available</strong>! But no further development will be put into it (for the reason mentioned above).</p>



<p><strong>Instead I&#8217;ll focus my energies on Mr.Dev&#8217;s Framework and Mr.Utils..</strong></p>



<aside class="  wp-block-group sidebar has-main-text-color-color has-aside-background-color-background-color has-text-color has-background"><div class="wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow">
<section class="wp-block-group has-main-text-color-color has-main-background-color-background-color has-text-color has-background"><div class="wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow">
<h3 class="   has-main-text-color-color has-text-color wp-block-heading"><strong>Did you know?</strong></h3>



<figure class="    wp-block-image size-large"><img decoding="async" width="1024" height="538" src="https://marcosrego.com/wp-content/uploads/2021/06/mrutils-marcosrego-opengraph-1024x538.png" alt="Mr.Utils Opengraph Image" class="wp-image-1029" title="mrutils marcosrego opengraph - A plugin development journey and what&#039;s breaking in right before 2022" srcset="https://marcosrego.com/wp-content/uploads/2021/06/mrutils-marcosrego-opengraph-1024x538.png 1024w, https://marcosrego.com/wp-content/uploads/2021/06/mrutils-marcosrego-opengraph-300x158.png 300w, https://marcosrego.com/wp-content/uploads/2021/06/mrutils-marcosrego-opengraph-768x403.png 768w, https://marcosrego.com/wp-content/uploads/2021/06/mrutils-marcosrego-opengraph.png 1200w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p class="  has-main-text-color-color has-text-color"><strong><a href="https://marcosrego.com/development/mr-utils/" data-type="post" data-id="473">Mr.Utils</a></strong> can be installed as a <strong>WordPress plugin</strong>.<br>Give to the <strong>block editor</strong> super-powers such as <strong>pagination or components</strong> and apply changes <strong>depending of the device</strong>!</p>



<div class="wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex">
<div class="   wp-block-button"><a class="wp-block-button__link has-invert-color-color has-link-color-background-color has-text-color has-background" href="https://marcosrego.com/client-area/downloads/?product=mrutils"><strong>Get it now (free)</strong></a></div>
</div>
</div></section>
</div></aside>



<h2 class="wp-block-heading"><strong>The plugin development journey of Mr.Dev.&#8217;s Framework</strong></h2>



<p>The idea behind the framework came up because I started noticing how using a <strong>third-party framework</strong> (Gantry5 with particles) together <strong>with the block editor and Mr.Dev.&#8217; widgets</strong> was adding extra learning curves, starting to bloat WordPress and I wasn&#8217;t even needing all the features of Gantry5.</p>



<p>So, keeping that idea of not wanting to bloat the system and make it simpler, <strong>I had to adopt the block editor and accept it as the future moving forward</strong>.</p>



<p><a href="https://marcosrego.com/development/mrdev-framework/" data-type="post" data-id="403">Mr.Dev.&#8217;s Framework</a> focus on <strong>adding optional features</strong> he considers essential to a CMS, <strong>without repeating features already available by default</strong> and <strong>helping transition / discontinue features</strong> that might become available by default.</p>



<p>Being a continued path, <strong>the Framework its on active development and improvements continue to be made.</strong></p>



<figure class="   wp-block-gallery aligncenter has-nested-images columns-default is-cropped wp-block-gallery-2 is-layout-flex wp-block-gallery-is-layout-flex">
<figure class="     wp-block-image size-large"><a href="https://marcosrego.com/wp-content/uploads/2021/06/mrdev-framework_configuration.jpg"><img loading="lazy" decoding="async" width="1024" height="693" data-id="954" src="https://marcosrego.com/wp-content/uploads/2021/06/mrdev-framework_configuration-1024x693.jpg" alt="Mr.Dev.&#039;s Framework - Configuration page" class="wp-image-954" title="mrdev framework configuration - A plugin development journey and what&#039;s breaking in right before 2022" srcset="https://marcosrego.com/wp-content/uploads/2021/06/mrdev-framework_configuration-1024x693.jpg 1024w, https://marcosrego.com/wp-content/uploads/2021/06/mrdev-framework_configuration-300x203.jpg 300w, https://marcosrego.com/wp-content/uploads/2021/06/mrdev-framework_configuration-768x520.jpg 768w, https://marcosrego.com/wp-content/uploads/2021/06/mrdev-framework_configuration.jpg 1342w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></a><figcaption class="wp-element-caption">Enable only the options that you need on the configuration page. Including a maintenance mode and the use of Mr.Utils (CSS classes and JS functions).</figcaption></figure>
</figure>



<p><strong>And this brings us to today..</strong></p>



<h2 class="wp-block-heading"><strong>The new version of Mr.Utils joined with the Framework</strong></h2>



<p>Mr.Dev.&#8217;s Framework already helps to create breakpoints, add media sizes, create stylesheets with global colors, typography, sizes and files via a graphic user interface (GUI). And <strong>it always included an optional frontend toolkit I developed called <a href="https://marcosrego.com/tag/mr-utils/" data-type="post_tag" data-id="35">Mr.Utils</a></strong>.</p>



<p>There <strong>was</strong> no graphic user interface to use that toolkit, it was used mainly by developers knowing concepts like classes, CSS and javascript functions.</p>



<h3 class="  wp-block-heading"><strong>As of today, Mr.Utils and the framework reached the block editor!</strong></h3>



<p><strong>Mr.Dev. now gives an option for editors and clients to use that frontend toolkit using the GUI!</strong></p>



<p>All options will appear under an &#8220;Utilities&#8221; tab,&nbsp; allowing to easily implement designs that were difficult or impossible to implement with the current state of the Gutenberg block editor. <strong>Including Mr.Utils pagination (perpage) and components to create sliders and tabs.</strong></p>



<figure class="    wp-block-gallery aligncenter has-nested-images columns-default is-cropped wp-block-gallery-3 is-layout-flex wp-block-gallery-is-layout-flex">
<figure class="     wp-block-image size-full"><a href="https://marcosrego.com/wp-content/uploads/2021/10/banner-772x250-1.png"><img loading="lazy" decoding="async" width="772" height="250" data-id="2289" src="https://marcosrego.com/wp-content/uploads/2021/10/banner-772x250-1.png" alt="Mr.Utils options on WordPress block editor" class="wp-image-2289" title="banner 772x250 1 - A plugin development journey and what&#039;s breaking in right before 2022" srcset="https://marcosrego.com/wp-content/uploads/2021/10/banner-772x250-1.png 772w, https://marcosrego.com/wp-content/uploads/2021/10/banner-772x250-1-300x97.png 300w, https://marcosrego.com/wp-content/uploads/2021/10/banner-772x250-1-768x249.png 768w" sizes="auto, (max-width: 772px) 100vw, 772px" /></a><figcaption class="wp-element-caption">Mr.Utils options on WordPress block editor</figcaption></figure>
</figure>



<p>If you don&#8217;t have Mr.Dev&#8217;s Framework yet, you can actually <strong><a href="https://marcosrego.com/client-area/downloads/?product=mrutils">install Mr.Utils as a plugin for free</a></strong>. It will give you the same interface just without some advanced options.</p>



<p>And to finish with another great news, <strong>a present just in time for Christmas</strong>&#8230;</p>



<h2 class="wp-block-heading"><a href="https://wordpress.org/plugins/mr-utils/" target="_blank" data-type="URL" data-id="https://wordpress.org/plugins/mr-utils/" rel="noreferrer noopener"><strong>Mr.Utils plugin is available on WordPress repository</strong>!</a></h2>



<figure class="    wp-block-image size-large"><a href="https://wordpress.org/plugins/mr-utils/" target="_blank" rel="noopener"><img loading="lazy" decoding="async" width="1024" height="538" src="https://marcosrego.com/wp-content/uploads/2021/12/mrutils-wordpress-repository-marcosrego-opengraph-1024x538.png" alt="Mr.Utils plugin journey reached the WordPress Repository" class="wp-image-2351" title="mrutils wordpress repository marcosrego opengraph - A plugin development journey and what&#039;s breaking in right before 2022" srcset="https://marcosrego.com/wp-content/uploads/2021/12/mrutils-wordpress-repository-marcosrego-opengraph-1024x538.png 1024w, https://marcosrego.com/wp-content/uploads/2021/12/mrutils-wordpress-repository-marcosrego-opengraph-300x158.png 300w, https://marcosrego.com/wp-content/uploads/2021/12/mrutils-wordpress-repository-marcosrego-opengraph-768x403.png 768w, https://marcosrego.com/wp-content/uploads/2021/12/mrutils-wordpress-repository-marcosrego-opengraph.png 1200w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></a></figure>



<p>I hope you&#8217;ve found interesting to know the reasons behind developing this plugins, that you can join me on this journey and most of all, enjoy using the plugins!</p>



<p>Let&#8217;s now celebrate Christmas and start 2022 with the right footer! 🎅 🎄 🎁 🥂</p>



<p><strong>Extra note:</strong> <em>Mr.</em> comes from playing with the initials of my first and last name while representing a person that is a developer. <em>Dev.</em> represents the fact that all framework features are optional, thinking on developers that want some control and worry about lighter work environments.</p>



<h2><b>Comments</b></h2>
<div id="disqus_thread"></div>
<script>
if(mrGetCookie('cookielawinfo-checkbox-functional') == 'yes') {
    var disqus_config = function () {
        this.page.url = (location.protocol+'//'+location.host+location.pathname).replace("/account/", "/");
        this.page.identifier = document.querySelector("article").id.replace("post-", "");
    };
    
    (function() {
    var d = document, s = d.createElement('script');
    s.src = 'https://marcosrego-web.disqus.com/embed.js';
    s.setAttribute('data-timestamp', +new Date());
    (d.head || d.body).appendChild(s);
    })();
} else {
    document.querySelector('#disqus_thread').innerHTML = 'You cannot view or add comments because you did not consent to the use of functional cookies: <a class="  cli_manage_current_consent" style="cursor:pointer;">Manage your consent.</a>';
}
</script>
]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
