Since March 2020, I’ve been working for the Marketing Team at Rydoo.

Although the core website was not made by me, I did together with the team lots of changes and improvements and as time went by the website embraced my signature.

A technical signature, that has been fitting perfectly on the team’s vibe and knowhow, that I’m very happy to be part of.

We made the website more structured, scalable, optimized for search engines and easier to use by everyone involved.

One key feature is the inclusion of different platforms inside the same environment and ecosystem.
Platforms such as:

• Marketplace
• CFO Corner
• Compliance Centre

What is a variable?

Variables are very handy strings that, as the name suggests, can vary or change one day. They can be called from many places and in many ways to be used and reused (depending on the coding language).

What makes them handy is: When you need to change one, you only need to change its value in one place, the new value will then pass to every location where you called the variable, by its name.

What to avoid in a variable name?

Even if a variable suggests a change, I see many times developers using names such as $white in SCSS or var(–white) in CSS. This for me doesn’t make any sense… How am I supposed to change to a value other than white?

Even if we can change the colour value, and it visually applies as expected, the code will be illegible. It will be read “white” when it isn’t. For example, it doesn’t make sense to have a #cecece on a $white variable.

It stops being a real variable.

It would be much better to call it $light, so it could be changed to any light colour on future design system changes. You might think this would still limit to a certain type of colour, and you are right, but at least it can vary as the name suggests.

And we could always take this to another level, call it $secondary_colour or $colourTertiary, so we could use any colour, making it future-proof as long as it’s not confused with the main/primary one.

We will recap with more examples below…

Use a standard method on the names

Be consistent when giving a name, stick to one method on all your coding or, at least, depending on the code language.

On PHP, it is typical to use underscores on variables with two or more words, on JavaScript the camel case method is more typical and on CSS the hyphen.

But if you can stick with only one method on all coding languages, it’s even better, I would say.

My favourite nowadays is camel case, so something like this: $colourPrimary.

Make it scalable with a convention!

Another tip, but very optional, is to set a convention to make the variables more scalable.

For instance, start the name with the property type and only then the actual name in camel case. In this situation, you can even combine underscores with camel cases. Here’s what I mean:

• $colour_PrimaryLight.
• $size_Spacing2 (don’t use “margin” on the name, that way you can reuse that size on paddings and font-sizes).
• $size_font_TitleBig (create another “layer” to say that this specific size is to be used only for text).

This will avoid conflicts, mistakes and make certain variables easier to find when you have a lot of them.

Quick recap

Comments

Mr.Dev. is your provider of developing tools!

He gives you a theme framework with optional features and add-ons that extend the natural workflow of WordPress.

Which features are available?

All framework features work with any theme!

But if you want to start from scratch and focus on the features given by the framework, then Mr.Dev. gives you a boilerplate theme that you can use.

Despite being a boilerplate, you can develop complete websites without needing to add or edit the base code, that’s thanks to the features of the Framework together with the block editor.

The Mr.Dev’s Theme is a boilerplate that works with the default Full Site Editor. By joining the Framework, you can control the default styles that appear on the FSE and you’ll be up to date with all the new features that are coming to WordPress.

DOWNLOAD

+INFO

Let your visitors turn the pages!

FlipBook Block is a simple yet effective WordPress block that shows a PDF from your Media in a Flip Book.

Mr.Dev. is your provider of developing tools!

He gives you a powerful WordPress widget to display your content with many customizable layouts and options.

If you use Roksprocket then you should add editor4roks, it will make the widget/module more friendly for anyone editing on it!

With editor4roks the descriptions will have a WYSIWYG editor, to be easier to edit and links easier to put directly on the modules/widgets.

Tested on Joomla with the editors: TinyMCE, JCE and an included NicEdit.
Tested on WordPress with the editors: TinyMCE, TinyMCE Advanced and an included NicEdit.
This is not an official plugin of RocketTheme.

Portfolio and eCommerce website developed for Itemzero, a design studio specialized in the intersection between technology, information design and editorial design.

This project is heavily powered by Mr.Dev. and it’s the perfect showcase of what is possible to do when combining his framework with his frontend toolkit.

The framework allowed the use of the block editor on WooCommerce product pages.
The frontend toolkit (Mr.Utils) allowed to make specific customizations and to easily use components such as sliders and tabs inside the block editor.

And because this website uses those plugins that I developed, some other plugins that I selected and because I manage this website’s server + domain, Itemzero’s score on Google Pagespeed Insights shows excellent results.

Fazer is a new Portuguese magazine about design, their eCommerce website was designed by Carvalho Bernau and developed by me.

The development of this project showcases perfectly the combined power of WordPress‘ block editor, with Mr.Dev.’s Framework, Mr.Dev’s Theme, Mr.Utils and some custom code.

Mr.Dev.’s Theme is a boilerplate theme, that allowed using all the features of the block editor on WooCommerce pages (including products and templates), while having the default colors managed from Mr.Dev.’s Framework.

Mr.Utils with Mr.Dev.’s Framework, added extra style options to the block editor including custom utility classes. That was very handy to define variables to all sizes (font-sizes, padding, margins, etc) and have them editable from one unique place in the backend if needed.

For all the custom code, I used the file manager of Mr.Dev.’s Framework to select where to load each CSS and JS, reducing unused code for each page. This was important for speed purposes. Some PHP custom code was also created. All files can be accessed trough the Framework and edited on the backend, using WordPress’ default plugin files editor.

The custom code was important to reach some specific needs of the design, here are some examples:

• Temporarily have the homepage redirecting to the most recent product/magazine-issue.
• Align footnotes with the text, according to the position of the note in the text (on non-mobile breakpoints).
• Automatically detect the color of the most recent product and apply it as accent color on the entire site (Products’ colors are added on Mr.Dev.’s Framework, by having the variable equal to the product slug).
• Allow different svg logos for each product (Uses safe SVG).
• Enable cache for almost all the pages, regardless of the cart item count. This was made possible by having custom javascript and cookies, to detect the number of items in cart. Also detects which products, to show a “View the cart” when a product is already in the cart.
• Detect when the scroll passes the header to change the color of the logo, menu, and “Buy” buttons from white to the accent color.
• Use the alt text of an image, to tell which should be the object-position/background-position for each breakpoint.
• Highlight the sub-menus according to the scroll on the page.
• Replace default tags taxonomy in favor of authors (multiple authors).
• Automatically create categories in Afazeres/Blog matching each WooCommerce product.