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

A portfolio website done for a designer, author, consultant and scholar.

The biggest challenge for this project was to combine the many needs:

• All projects appear on the page, inside accordions and tabs.
• Each project still needs its unique url that opens the correspondent accordion and tab.
• Keep it easy for the client to add and organize the content.

To answer to those needs, I started a widget that would later become the Mr.Dev.’s widget.

That widget would show all five categories’ titles and descriptions in an accordion.
And on each category description another widget, showing the posts in a tabs layout.

Website designed by itemzero and developed by me for an architecture company.

The biggest challenge for this project was to show the list of projects on a horizontal scroll, with dragging and keyboard capabilities, while keeping compatibility with Internet Explorer.

When this website was made, that browser had enough usage.
Calculations for the final width of the horizontal container were made using jQuery.
The animated loading bar was an extra touch.

A discontinued platform that was developing personalized gifts, handcrafted in Portugal by the best craftsmen.

This website was designed by Itemzero and developed by me.

Some key features of this website were:

• Sticky galleries with zoom on mouseover. Showing all images on larger screens, becoming sliders that show two photos at a time on medium screens and sliders of one image at a time on smaller screens.
• Forms to request a quote with the option to send a file, with the logo for the personalized product.
• The forms have integration with Google Spreadsheets, so all data is organized and kept on a different database for extra security.
• Use of Mr.Dev.’s Widget, to display a header image on each category with a parallax effect. This is possible by using the options “Set Item image as first image found on category description” and “Only show categories of current url”. Know more

Storylabs was a children literature platform with sessions that primarily happened in museums and schools for a English-speaking audience.

The website was design by Itemzero and developed by me.

One of the key features of this website was the use of a plugin to manage events, distinguishing from upcoming and past events.

The previous version of Openbook’s website, was one of the many Joomla websites that I did when I worked at Browserbox.

The biggest challenges on this project were:

• Implement a design made by an external company (By) was a challenge because most times the design was also made at Browserbox.
• A very customized menu.
• The stories section needed some technical teamwork.

A Joomla website made for bimby – Vorwerk, selling workshops and team buildings.

This project was made at Browserbox in partnership with arcww.

Website made for a business association called Arhcesmo (aka Hoteleiros do Estoril), which groups hotels and guest houses from Cascais, Estoril, Sintra, Mafra and Oeiras.

This project was made using Joomla when I was working at Browserbox.

Some important features developed for this website were:

• Adapt the mosaic module to have an infinite scroll.
• Make the tags of a mosaic show stars for the hotels navigation.
• Change the default menu to have dropdowns on mobile.
• Created a “Continue Reading” module with options to appear only on mobile.

Website developed for Escola Val do Rio, a school located in Oeiras and Estoril (Portugal)

This project was made at Browserbox in partnership with NoMundo using Joomla.