DEV Community: Mads Phikamphon

Creating an error reporting popup with Wordpress Flatsome and Contact Form 7

Mads Phikamphon — Thu, 31 Aug 2023 03:08:08 +0000

My website Model Prices index model train prices from 1,200+ shops from all over the world.

All the indexing is done by some big algorithms and just like any other code, things might go wrong once in a while.

For example, a price might be indexed under the wrong model train model or I might index the wrong price amount.

Most things that go wrong are caught by my algorithm and fixed automatically, but sometimes errors pass through without me noticing it.

Not so good if you want to make a useful website 😅

Why an error reporting popup?

To take care of the errors that pass through, I decided to make an error reporting popup. That is a link that the users can click, so a popup appears with room for describing the error and clicking submit to send me the report by email.

First I started coding the popup myself, but then I realized that Flatsome, fantastic Wordpress theme I'm using, have a lot of built-in functionality. Including a simple way to make a popup.

Show the popup

First, I added the popup code to my product page code. That is the code to pages like this one.

The notoriously thin Flatsome documentation shows the basic version of the lightbox code here, so I just modified that a bit:

[lightbox id="lightbox_price_error" width="600px" padding="20px"]
    <h4>Found an error 😮</h4>
[/lightbox]

Since I added it to my product page code, I wrapped it in do_shortcode() like this:

function fh_get_product_page_error_popup() {
    $popup_code = '[lightbox id="lightbox_price_error" width="600px" padding="20px"]
            <h4>Found an error 😮</h4>
        [/lightbox]';

    return do_shortcode($popup_code);
}

Click to show the popup

Now I had a first version of the popup that I could use to test things, i.e. see if the popup would actually appear or not.

It was now time to make a link that my users could click on to show the popup. Again, easy to do thanks to Flatsome:

<b style='color:#000;'>Found an error? 😮</b> <a href='#lightbox_price_error' class='fh-underline-link'>Please tell me</a>

I added this to link to the product page code too, so users now would see this when they clicked the "See Deal" buttons (or actually they would if I uploaded the code. My development if of course done locally, so I don't mess up the code my users are seeing).

And when they clicked the link, the popup would appear:

Great stuff.

Adding the contact form

The purpose of creating the popup is to allow my users to report errors, so now it was time to add a small contact form. Create the form with Contact Form 7 like this:

And added the contact form to the popup by modifying the shortcode in my product page code like this:

function fh_get_product_page_error_popup() {
    $popup_code = '[lightbox id="lightbox_price_error" width="600px" padding="20px"]
            <h4>Found an error 😮</h4>
            [contact-form-7 id="***" title="Price Error"]
        [/lightbox]';

    return do_shortcode($popup_code);
}

Testing again and now a nice form with two fields and a button appears when users click the link from above:

Sending data to the popup

For the error reports to be useful, I needed to know which products and prices they belong too. Luckily Contact Form 7 forms can have hidden fields, so I added two of those. One for the product id and one for the price id, like this:

Also edited the shortcode a bit, so it now had the two extra fields:

function fh_get_product_page_error_popup() {
    $popup_code = '[lightbox id="lightbox_price_error" width="600px" padding="20px"]
            <h4>Found an error 😮</h4>
            [contact-form-7 id="8edf729" title="Price Error" product_id="-" price_id="-"]
        [/lightbox]';

    return do_shortcode($popup_code);
}

Final step is to send the ids to the form when the popup is opened. This could be done by following the instructions here - and when doing so, remembering to tag the fields in the contact form with default:shortcode_attr (my hidden fields weren't filled out to begin with because I forgot this).

Also remember to implement the shortcode_atts_wpcf7 filter as described in the Contact Form 7 instructions 🙂

Testing it all

That's it. Uploaded to production and now my users can (and do) report errors, so I get emails like this one I just submitted myself.

The from field at the top would be filled out if I had writing anything in the form's email field. Since I did not, the field is empty.

Notice the link directly to the product from where the form was submitted. Easy to add to the email with the '[_url]' parameter in Contact Form 7. Like this on the form's mail tab:

How to Build a Model Train Calculator the Right Way

Mads Phikamphon — Fri, 26 Aug 2022 02:02:42 +0000

If you are into model trains like me (I run the website Model Prices), you will know that things quickly become expensive. Much more expensive than you might expect when you start out.

To avoid such bad surprises, I decided to make a model train layout cost calculator. A calculator where you can enter various factors like layout dimensions, scale, number of locomotives etc. and get a rough estimate of how much your new layout is going to cost you.

Gathering requirements

I looked around, but couldn't find any existing model train layout cost calculators. All I could find were some blog posts talking about the costs and giving very different estimates of the cost. Some would say $30 per sq.ft. while others would say $100+ per square feet.

Having no clear consensus on costs and thinking like a pro developer, I decided to gather requirements before I started programming my new calculator.

In a few Facebook groups for model trains, I wrote about my planned calculator and asked what people thought about the factors and numbers I planned to use. Two of these posts got 20+ comments, which made me quite sure there was a need for such a calculator - and it also gave me a lot of input on how I should design the calculator.

The Javascript part

Having gathered the requirements, I knew what I had to make and could start the actual programming (i.e. start the best part). Most of the calculator was written in Javascript, while the actual cost calculation was done by calling an API function.

Writing the calculator in Javascript meant that it was easy to do validations before the numbers were submitted to the API and the Javascript could also take of currency conversions (which is important since my website targets people in multiple countries).

One of the validations the Javascript do is to validate that the total of the 3 environment percentages below is always 100%. The Javascript also updates how many percentages are missing if the total is below 100%.

The API cost calculation

The actual cost calculation could easily have been done by Javascript too, but instead, I choose to let it be done by an API function. There are two reasons for that:

When the cost calculation is done by an API function, I can store the entered data in a database table, so I can see how people are using the calculator - and later on, when lots of people have used it, I can maybe write a blog post based on layout statistics (how many locomotives and wagons are people using for different sizes of layouts, what are the most popular layout sizes for different model scales, etc.)

Using the database table, I can also assign each calculation a unique id. With the id, people can share their calculations and/or tweak their calculation later on.

Since my website is running on WordPress, the calculation function has been written as an extension to the WordPress REST API. Nice, easy and no need to setup a lot of things to get the API running. All I needed to do was to create an API class with my function in and add to the action 'rest_api_init'.

The id

As mentioned above, I assign each calculation a unique id. This is done by the calculation function, so when the function returns the results to the user, he can see a link with his id in.

Using a bit of Javascript, the current url is also changed to include the id.

Testing

To make sure everything is working correctly, I did a bunch of testing myself. But as most developers know, you are often blind to your own mistakes and might unconsciously avoid the dangerous parts of your code when testing.

I therefore also asked some friends to test things a bit, so I could be sure everything was working before starting marketing my calculator.

If you want to, you can also check out the finished calculator here.

Sharing it

The calculator is done, but unless you are coding something for your own personal use, code isn't worth much without anyone using it. It was therefore time to start spreading the word a bit.

Luckily I had already mentioned my calculator plans in some Facebook groups when I was gathering requirements. So why not return to those groups and share the finished calculator?

That way I could show people that I have actually implemented the thing we discussed - and hopefully, some of these people would check out the calculator, find it so useful and start using it.

Chart JS scatter diagram with 2 datasets

Mads Phikamphon — Mon, 30 May 2022 06:37:03 +0000

On my site Flaskepriser, I had some issues creating a Chart JS scatter diagram with 2 datasets.

Why use 2 datasets
First of all, let's look at why you might need to have more than one dataset in your scatter diagram. If you have only one dataset, your points in the diagram will all be the same color/size.

That didn't work for me, as I needed to have points in two different colors. My site is comparing wine and I needed one color for the wine being compared and another colors for the wines I'm comparing with. Like this where I'm comparing this wine vs. other wines:

JSON datasets
My site is based on Wordpress, so I use PHP to build the JS necessary to make Chart JS work and display my scatter diagram.

Having two datasets in the JSON that Chart JS use is quite easy. Just put the JSON together like this:

As you can see, each dataset has a pointRadius property which determine the size of the points (both datasets above have the same point sizes). Each dataset also has a backgroundColor property which controls the color of the points (the datasets above have different colors, so the points will end up having different colors in the scatter diagram).

Also note the order property that determines the order that the points are drawn. Smart if you have points that end up on top of each other. The lower the order, the later the points are drawn (so the order 1 points in the JSON above are drawn after the order 2 points, and the order 1 points thereby end up on top of the order 2 points).

Labels
One slightly annoying thing is that the datasets don't have their own list of labels. Instead they share the same list of labels 😅

First I thought the order of the datasets determined how the labels would be used, but I couldn't make it work and get the points from both datasets get the right labels.

Luckily, there was a simple workaround. First the list of labels are used by the dataset being drawn first. That means the labels are used by the order 2 dataset, since the lower the order, the later the points are drawn.

One would then think that it would then be possible to just add elements to the list of labels and then these extra elements would be used by the next dataset, but it didn't seem to work that way.

So to get the proper labels for the second dataset, I wrote a quick event listener that would be called when the page has been loaded:

This little function sets the label of the element in the second dataset and all the points thereby end up having the correct labels (my second dataset only has one element).

Point links
When people click the points in my scatter diagrams, they are sent to the pages of other wines.

Clickable points is not a standard function in Chart JS, but thanks to Stack Overflow, there was a quick solution to make the points clickable:

How to use paper.js to compare RC cars

Mads Phikamphon — Tue, 07 Sep 2021 13:55:01 +0000

On my site RC Donkey we compare radio controlled cars 💥 One of the many specs we compare is the dimensions of the cars, so people for example can compare car lengths, heights, etc.

These dimensions are of course numbers, for example one car might have a length of "320 mm" while another car might have a length of "360 mm". Comparing numbers like that is difficult for us humans, so we decided to make diagrams that let people compare the dimensions in a better way.

Tech choices

At first we thought about generating the diagrams as images through PHP (RC Donkey is based on a modified Wordpress installation, so PHP is used heavily on the site). Considering we have hundreds of cars in our database and people can compare them in any way they want, it quickly became clear that we would end up with way too many images. The image generating idea was therefore dropped.

Luckily image generation wasn't the only option available. Another option was to generate the diagrams through Javascript.

Writing custom JS code for generating diagrams can quickly become a bit complicated, but luckily there are several diagramming libraries available. We ended up using paper.js and it turned out to be a great choice. It's easy to use and works really well for generating the diagrams we need.

Let's take a look at how we generate the diagram above that compares the dimensions of two cars seen from above (the two cars shown is the Traxxas HOSS and the Traxxas Maxx).

Building the diagram

All the car specs are in a database, so we start out by generating a JSON object containing the dimensions of the cars. The JSON object also contains various data like the names of the cars, so we can also add a legend to the diagram etc.

We then call a JS function that parses the JSON and builds the diagram. This function first check that the JSON is valid, for example that it actually contains some car dimensions. The function then setup the canvas that we will use to contain the diagram.

We have set the diagram to have a certain max. width depending on the device. So for desktop the max. width is 700px while it is max. 400px for mobile devices. The function therefore starts with determining the max. length of the cars. The max. length is compared with the diagram width. If the max. width is bigger, we set a multiplier to a number < 0 to make sure no car ends up being bigger than the diagram. If the max. width is smaller, the multiplier is set to a number > 0 to make the biggest car match the width of the diagram.

After the multiplier has been set, the function loops through the cars in the JSON and converts the dimensions into rectangles. This is quite simple to do with paper.js:

Notice how the multiplier is used to make sure the dimensions are modified to match the width of the diagram.

In the same loop, we also generate each car's part of the legend. Again something that is quite simple to do with paper.js. After all, the legend is just about generating some text:

The scale

Finally, we use paper.js to generate the scale to the right side of the diagram. To make the scale have the right intervals, we use the max. width of the cars. The highest point on the scale simply matches the max. width of the cars since the diagram shows the cars seen from above. If the cars were seen from the side, the highest point on the scale should simply match the max. height of the cars instead.

Diagram done

So that's it. The diagram is now done and people can check it out when they visit our site. You can check it out here, together with some other diagrams for the same car comparison.

How We Created a Simple Avatar Generator for Our Fitness Site

Mads Phikamphon — Fri, 14 Feb 2020 15:52:11 +0000

Having interviewed more than 200 fitness pros on our site, we decided that we needed a way to get more traffic to our interviews.

Traffic that everybody would benefit from: Us for getting a more popular site and the people we interview for getting a bigger audience 💥💥

Instagram is a big thing in fitness, so one of our traffic strategies is to increase our Instagram presence (which to be honest is a bit sad at the moment).

To increase our Instagram audience, we needed to stand out and not be like all the other fitness accounts on Instagram. In other words, we could not just be another account with people working out in some gym.

How to stand out

To stand out, we decided to focus on making a personalized avatar for every single person we interview.

Using avatars instead of photos on our Instagram would let us stand out - and we would also not have to worry about people complaining about us misusing their photos.

Now, we could then have moved on and drawn all the avatars manually, but that would create a potential bottleneck in our workflow (since none of us are that good at drawing) + doing things manually would hurt my programmer heart 😀

So instead of doing things manually, we decided to make an avatar generator!

An avatar generator that will not only be useful for fitness. It will also be useful for other interests, so we for example can have an avatar generator for our food site.

How to make an avatar generator

Thinking things through, we estimated that it wouldn't be that difficult to make the generator - and at the end, it turned out that our estimate was correct. It wasn't that difficult.

Actually, the most difficult (i.e. time-consuming) part was to get all the shapes drawn, but more about that later.

Essentially, our avatar generator works by layering shapes on top of each other using the JavaScript NPM merge-images.

The layered images can then be downloaded as a .png - and voila, then you have your own personalized avatar that is ready for Instagram (it's even square size, 600 x 600 px, so you don't need to worry about cropping)

What about the colors

Considering we have ~150 different shapes, you might wonder if everything had to been drawn manually.

The answer is yes and no.

All the shapes have been manually drawn in 3 grey colors to begin with. A main color grey, a dark grey and a light grey.

Drawing ~150 shapes manually takes a lot of time, so that's why the drawing was the most time-consuming part of the project (together with the code being relatively simple).

Luckily we didn't have to do the coloring manually. Thanks to all the shapes being the same three colors, we could write some PHP code that took care of the shape coloring.

The way this works is that our code checks if all the colored versions of each shape exists. If a color doesn't exist, the code will take care of replacing the 3 grey colors with 3 colors in another, predefined color.

Judging from the awesome subreddit Programmer Humour, many people hate PHP.

To be honest, I'm quite alright with PHP - and we had to choose PHP because our site is a Wordpress site under the hood and our avatar generator is a Wordpress plugin (Wordpress is mostly written in PHP).

Getting ready of Instagram

Now, we don't want the avatars on our Instagram to look exactly like the ones you can download from our generator.

We want to them to be even nicer, so we run the finished avatars through some more code.

When an avatar has been generated, we put it through a bit more PHP magic that crops the avatar in a hexagon shape and adds the name of the person being interviewed + the title of the interview.

After that piece of magic, the avatar is ready for being shared on Instagram.

The actual posting to Instagram could be manual, but being programmers we of our course let things run automatically through the Buffer API 👍

Looking forward

The first version of our avatar generator is done and we use it almost every day to generate new avatars, but things doesn't stop there.

Being big fans of continuous improvement, we plan to keep building and expanding the generator.

Soon, we should be able to add functions for changing the hair if you had a hat or other headgear, adding more accessories and of course having more shapes to choose from (especially if we decide to cover other interests like for example food and cooking).