DEV Community: Sjors van Dongen

4 Errors I Made When Building A Financial Application

Sjors van Dongen — Mon, 20 Jun 2022 12:40:56 +0000

1. Not knowing which datatype to use in MySQL

I once heard it’s better to use integers when handling financial data. You convert a price like €10 to its lowest unit (cents in this case). This way you end up using 1000 as the amount to work with. This way you avoid the floating-point problem. The floating-point problem is best shown by typing the following in your Google Chrome console:

0.1 + 0.2 > 0.30000000000000004

If you want to learn more about this problem visit this website. Working with integers is dramatic for readability (how much is 13310 in euros?). The disadvantage of working with integers is also that it has a limit of 2147483647 which is roughly € 21,474,836.47. Although with the euro you probably wouldn’t run into this issue quickly but with the Vietnamese Dong, this wouldn’t work. Learnings: use decimals (not floats!) in MySQL to store monetary values. Depending on how many decimals you need decimal(15,2) oftentimes is enough.

2. Not having something to fact-check the numbers

Imagine we have a shopping cart where there’s 1 product for € 100, the VAT of € 21 and a total of € 131. The first time you’re sharp and you immediately see your mistake. After the 100th time, you start to be blind to those mistakes.

That’s why you need something to fact-check the numbers if they’re correct. I’ve created a Google Sheet for me and my team where we can all fact-check this. Especially if you work with people who test your product but don’t have access to the code this is crucial. How should they know if the price displayed is the correct one?

3. Not splitting the price into all the components

Every part of a price should be stored separately. If not, there’s no way to reproduce the components if you need to later on. So save the VAT amount, the discount amount, the base price, and the total all separately. Big chance there are gonna be more price components in your app in the future.

4. Using foreign keys in the ‘orders’ table

One of my dumbest mistakes. I had an ‘orders’ table where all the orders of an e-commerce store were placed. Unfortunately, it had a reference to the actual products which I got the product price from. Everything was fine until one of the product prices changed and older orders were affected by it😅

I’ve made many mistakes even though I have been developing applications for years. But without resistance, there’s no growth, so I tend to share my mistakes so you might prevent them.

I’m planning on writing an ebook on developing applications where you work with money. If you’re interested you might wanna subscribe to get free access to the first chapter.

Subscribe here

Quickly check which PHP extensions are needed on your server

Sjors van Dongen — Thu, 25 Feb 2021 11:31:41 +0000

I just ran into a composer command which displays the required PHP extensions for your production server:

composer check-platform-reqs

It displays all required extensions in a table :-)

Happy coding!

7 Tips to Write Landing Page Text Without Sounding like a Salesman.

Sjors van Dongen — Mon, 06 Jul 2020 21:02:29 +0000

Copywriting is sales in words. But how do you avoid sounding like a slick salesperson?

1. Write like you talk

Write copy as if you are talking to a single person. Don’t use fancy words when you don’t use them in real life. If you stay close to who you are when you are writing copy, it will be easier. You are used to using your own words, so why wouldn’t you?

2. Address your reader

Imagine having a date with a beautiful person. Hair colour blond, a cute nose and a beautiful smile. It all looks perfect. But as soon as you start talking, you can't say a word, because the other person is the only one talking. Well, that’s a bummer…

It’s the same with writing for a landing page. If you only talk about your company people get bored. It’s not about your company and how great you are. It’s about your customer and how you are going to help them.

3. Use simple words no matter the target audience

Simple, 1 or 2 syllable words make your text easier to read. Use short and easy words. Always assume people don’t know the jargon you use. So avoid using a lot of jargon in your copy.

4. Remove adjectives and adverbs

People tend to use adjectives and adverbs to emphasize their message. In the end, these are not the words that will stick in your reader’s mind. It’s about how you make them feel and what you can solve for them. Using adjectives and adverbs is not bad. Using meaningless adjectives and adverbs is bad.

5. Don’t use buzzwords

“State of the art”, “Artificial Intelligence”, “Innovative”, “Disruptive”, “Agile”. All these words appear so often in media and on websites that people grow sick of them. Often they are meaningless. It seems that every company nowadays uses state of the art technology and artificial intelligence to disrupt a new market in an agile way.

6. Don’t scream every header in your reader’s face

Exclamation marks can emphasize a message you are trying to convey. Similar to using capitalization in your text, it can also cause the reader to read the sentence like someone is screaming. HOW WOULD YOU READ THIS IN YOUR HEAD?

7. Avoid the words “buy” or “pay”

Don’t tell your reader what it will cost them, rather tell them what they will gain. Showing your reader how it will benefit them will create a positive emotion. Create a picture where they see themselves without any problems when using your product.

Hopefully, you learnt some new things you can use when copywriting a message. If you liked this article, consider showing some love on this Tweet:

Sjors van Dongen

@sjorsvdongen

7 Tips to Write Landing Page Text Without Sounding like a Salesman. #copywriting

THREAD

14:43 PM - 03 Jul 2020

1 10

7 Practical Examples of How To Improve CTA's

Sjors van Dongen — Thu, 04 Jun 2020 21:02:18 +0000

Words can improve your conversion. Here's how.

CALL TO ACTION (CTA). People easily leave your website because you lost their attention. It's your job as a UI designer, web designer, developer, founder, CEO, -insert fancy title here- to grab that attention and hold it. And a change in words can accomplish that.

1. Beta's don't own only 1 CTA text

When the user scrolls further than the fold the text is all about that they haven't launched yet. So is this manipulative? Perhaps a little bit, but they do mention on their website that they're still in beta. So the blame is not on the website when you subscribe. You just read too fast.

2. Put the focus on your user

When I read "Join us for free" I don't read the value that's in it for me. However, when you change this to "Find your mentor" I know what I can get when I press the CTA.

3. Me vs You

According to ContentVerve, conversion boosted with 90% (!) when they changed a text from "Start your 30 day trial" to "Start my 30 day trial". This is because a person feels more connected to the word "my" instead of "you/your".

4. But it depends on the context

It can also sound if the website is going to do something for you. In the case of a job board, this might not be the case. If the CTA would contain "find my dream job" it implies that the website is going to find a job that suits you. But in this case, you have to pick it yourself.

5. Tell your user what happens when they click on it

This way they know what's going to happen when they click on it and what they can expect. Especially the help text "No signup required" lets them know you can directly start building a website when you click on it.

6. Make your CTA a Call To Value

A call to value is when you have a button which directly states the value you get when you click on it. With a call to value you also show them what they will miss when they don't sign up for your product or service.

7. Express what you offer in the CTA

I think this image is a good example of how you can play with a CTA. It tells you what you can do with the website and it does not include the word Free directly. However, in an eye blink, we still know it's free due to the help text.

It took me several hours to put this together! If you liked this, please send some love to this tweet:

// Detect dark theme var iframe = document.getElementById('tweet-1268645081063526403-979'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1268645081063526403&theme=dark" }

The UX of images on a landing page in 7 examples

Sjors van Dongen — Fri, 29 May 2020 08:41:51 +0000

What images should you use for your landing page or blog article? In this article we take a look at images I found on various landing pages and how they could improve.

Read this on my blog for better readability

1. Don’t use weird colours for obvious objects

Although it’s obvious that the object behind the two people represents a heart, it’s a bit awkward to see it in purple colour. If you’re talking about a heart most people see a red heart shape in their minds. That’s an image we don’t want to mess with. A purple heart doesn’t radiate love but looks rather toxic!

2. Check where people look at

I’ve been looking at this for a long time why I think it should be mirrored. I thought the only reason was that there are 2 people staring to right and only 1 staring to the left. After looking at this image while editing it, I think another big reason is that the 2 people are wearing glasses and the other one not. This makes it look like they have eyes. Images that look towards a paragraph or header will shift your user’s focus to it as well.

3. Or even walk to!

Snap Search understands this principle well! They already had the image looking and walking towards the text. I still wanted to make an example of this, if the woman would walk the other way. What impression would you have if you see someone walking away from your screen? It looks like they are not interested or maybe even bored. And although these are subtle changes you can do in an image, your brains will interpret this differently when the woman is walking toward the text.

4. You associate certain images with feelings

Creating a startup should be an adventure where you are gonna conquer the world. In this case, openstartuplist.com made this clear with an image on top of the world. This is the feeling you want to trigger when your visitors read about other startups as well. A dull image of a startup office is not gonna work here.

5. Don’t try to trigger 5 feelings at the same time

Although images can make your website more alive and bring colour to it, try to keep it simple. This landing page uses such a big image that the focus is more shifted to the image than the actual call to action (CTA). Besides that, it doesn’t add much value to the text.

6. If you do have a heavy image, make it look towards your CTA

For this website, I think the image is awesome and emphasizes the message. But since it is a big attention seeker it could emphasize the call to action more by making the primate look towards the yellow call to action. A missed chance!

7. But you don’t need eyes to shift focus to a CTA

This example is a perfect showcase of how you shift your visitor’s attention to a call to action!

I hope this inspires you to take a look at the images on your own website and check if you use them correctly!

It took me quite some time to collect all the content. If you liked this, please show some love to this Twitter thread:

// Detect dark theme var iframe = document.getElementById('tweet-1266102116420071424-922'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1266102116420071424&theme=dark" }

Minutes | Copywriting Case Study

Sjors van Dongen — Sun, 17 May 2020 14:10:41 +0000

Learn the differences between scannable and skimmable. With practical examples on how to apply this to your landing page.

I've been telling various people on indiehackers.com to make pages more scannable in the last month. Some people asked me what it means to make something scannable. In this article, we will take a closer look at the differences of scannable and skimmable.

Scannable vs skimmable

There is a difference between scannable and skimmable web pages. I'll explain what the difference is between the two.

Once you open a landing page, the first thing you do is start interpreting how the page is build up. Your brain is not ready to read every sentence on the page yet, so you scan the page first. This way you'll get familiar with the layout. The navigation on the top, the sidebar on the right, an image in the centre. Vivid colours will help to focus your attention on one point. Like the red dot above, it is pretty small but it's probably still one of the first things you noticed on the page. We are programmed (oh the irony) to distinguish vivid colours. This is because back in the days those often meant venomous animals and plants.

The first image your mind processes while 'scanning' the page

Skimming through a page means that you start reading some headers and subheaders. You focus on some emphasized texts and text with different colours.

You start reading
Some bullet points
That pull your attention

So making a page that is skimmable can really make a difference whether a visitor converts or not.

The first thing a visitor on your page wants to know: "is this going to solve my problem?"

This week's case

This week's case is about Minutes. Minutes is an app that helps you organize your meetings in a better way. Add tasks, reminders, due dates or ideas in organized sections. This way your meeting becomes more measurable and more efficiently.

Buyer persona

One of the concepts I use when I'm writing copy is creating a buyer persona. It's a fictional persona that represents your ideal customer.

This week that's Mario the Manager. Mario is 43 years old and works for a consultancy company as a manager of a team of developers. Lately, Mario is starting to hate meetings because they're always too long and inefficient. On top of that, people don't take action on the tasks they'd agreed to do. So he's is looking for a way to meet more efficiently with his team and keep track of all the tasks and deadlines agreed upon.

So what can we learn if we skim the homepage of Minutes? If you'd write down all the headers on this page there are a lot of features that don't say much about the app itself. Above the fold, there is a big header displaying

Take back control of your meetings with Minutes.

Features of Minutes

Mario is kind of interested although he is not sure what 'Take back control' means in this case. So he scrolls on to the feature blocks. He skims the feature blocks and sees a lot of buzz words. 'Local Storage', 'Dark mode', 'Dynamic types', 'CSV', 'Local notifications'. These are a lot of words a 43 years old manager might not be familiar with. But most of all, these are all features that don't solve a problem directly. Chances are that Mario leaves the page before he even reaches the end.

So what can we change so Mario wants to stay on this page? We want to address the problems Mario has with meetings, aka they are long and not efficient. That's the problem we want to solve for him. But how are you supposed to fill 13 blocks with the problems your visitor has? The answer is, you don't. People visit your website because they have 1 or 2 problems they want to solve. And it's your job to know which problems these are. When you have figured this out, you want to display it in the most skimmable way.

A best practice for creating skimmable content is to follow the Z pattern:

Z content pattern for websites.

You should start with the most important content on the top left. This is because most people read from left to right and apply this pattern when they skim the page.

Current feature rows

Although Minutes also uses this pattern, you could increase the attention more on the text if you mirror the layout. So start with text and follow up with an image. In these blocks, you can easily fit the problems you solve with the application. After you have addressed the problem you can offer a solution in the form of a feature. So how can we turn these features into sentences that address a problem? Let's see:

Take back control of your meetings with Minutes > Do you ever have meetings without a concrete outcome?
Capture all the meeting value created in a single place > Capture all the tasks and ideas in a single app.
Do ideas in meetings just remain ideas?
Do people not meet their deadlines?

If you can touch 1 or 2 problems of your visitor's problems it's enough to convert them into a customer. They don't care about all the login methods they can use or if it has built-in dark mode support. It's about the value you add to their daily life, and that value isn't the dark mode you offer. It's about the problem you solve for them.

Tired of writing copy that doesn't convert? Try our copywriting editor on https://targetaudience.app!

UpStamps.com | Copywriting Case Study

Sjors van Dongen — Thu, 14 May 2020 07:17:27 +0000

While I was talking with Vitor Amaral, creator of UpStamps, I was inspired by the design he uses for his homepage. It’s a clean homepage with awesome vectors that animate(!). Reading through the copy I noticed some things that could be improved which would increase his conversion. So let’s start!

About

UpStamps is a startup that makes it easy for you to enable and disable features of your website in production. They also offer A/B testing of features based on segmentation.

Copywriting

Copywriting is definitely one of the hardest things to do about building a website. You want your text to be unique and to grab the attention of your visitors. And how else can you do that by displaying the awesome features or your unique idea? This is what I see time and time again on websites and it perfectly makes sense. You think. Unless you have a super idea, it converts worse than when you use a different approach. People want to feel addressed and understood. Especially feeling understood is an important factor when writing copy. But how can you feel someone understood when you are the one talking? You don’t talk about yourself, you talk about your visitor.

To be able to talk about your visitor you need to know them thoroughly. Your visitor has a problem, something he is worried or annoyed about. These problems are so-called pain points. For the concept of UpStamps I can think of 2 major pain points:

As a developer, he accidentally deployed a feature to production that was not ready yet. Once he saw that the feature was in production he was incredibly stressed.
As a developer, he develops new features and wants to test them if they work on a production server as well. Last time he released a new feature there were too many support tickets coming of users complaining that something didn’t work. He wants to test the feature among a small group of people.

You need to get in the head of the visitor and answer his questions. Say we validated these questions by asking a couple of dozen developers what their biggest problem is. Now we know they deal with this problem we can change the headline to a more pain point based text:

Did you ever deploy a feature by mistake?
Do you ever doubt if your feature will work in production?
Do you want to test a feature among a small group of people?

In this case, I would go for the headline that focusses on the pain point that has the most emotion. I am a developer myself as well, and if you ever deployed a feature to production which was not finished yet, that is incredibly stressful. You never want that again. And that’s exactly the type of feeling we want to address.

The key point here is that you want to address an emotion before you offer your solution. You don’t want to sound like Jordan Belfort but more like Oprah Winfrey.

Call to action’s

How your mind processes the homepage

When using multiple ‘call to action’ buttons on a page it is better to use primary, secondary and tertiary colours. This will draw the attention of your visitor to 1 place. But since this is the homepage the user is probably not convinced yet to register. We want to take him by the hand and lead him through some paragraphs and pictures that will convince him, that he needs this tool. Therefore it would be better to lower the appearance of the yellow signup button. You can consider not making it a button but a normal menu item or only using a border.

Feature rows

The feature rows further down the page do a better job. I want to know “what’s in it for me?”. The headlines in these sections don’t directly describe a feature but more what can be of value for me. Although the call to action buttons don’t contain any ‘Sign up’ or ‘Create account’ texts, they don’t convince me to do something that’s beneficial to me. Changing texts in a button can really make the difference if people click it or not. Although these are not exactly buttons, I think we can improve them by changing them to ‘Call to Value’ buttons. Here’s what it would look like:

Create a new feature flag
Start (features) testing in production

Where ‘features’ would be optional.

Images

Something I really like about this homepage, are the images and animations. I just love how they make the website more alive. One of the things I couldn’t help noticing is that they all have eyes. And with eyes, you can play. Take this feature row:

Crazy scientist

The guy here is looking at his potion and brewing his new formula for his live elixir! But he should not be the centre of attention if this feature row. So how can we still keep the cool animation but also emphasize the attention on the text? Flip the image horizontally and it will look towards the text:

This is a very good practice for pointing someone’s attention to a paragraph or a call to action button. You could even use this approach for the hero image as well:

Hero image

Every time the little robot walks towards the button your attention will point you towards the call to action. But like I mentioned earlier, the visitor might not be convinced enough yet.

That’s it for this week! I hope you learned something about copywriting and how people unconsciously take a look at a website. If you want to take a look at how my landing page looks, visit https://targetaudience.app!

Neat little tricks for increasing your conversion

Sjors van Dongen — Mon, 11 May 2020 19:10:04 +0000

This is part 2, as promised, of the landing page tips! See my previous article here.

1. Do not target multiple audiences on 1 page

No, your startup is not for everybody. Last weekend I was looking for a coach. I found three coaches:
A coach for life coaching, business coaching, burn out coaching etc;
A coach for people in their twenties and thirties;
A coach for young entrepreneurs in their twenties.
Which one do you think I choose? Exactly, the third one, cause I am RIGHT in his target audience. I feel more addressed when I read his website. Like you can’t coach the whole world, your problem can’t solve the whole world. You need to start solving 1 problem very good for 1 target audience.

2. Install some heatmap software on your page

Heatmaps will give you a better understanding of how your visitors read and scroll through your page. Perhaps they click on things that are not clickable? Or maybe they don’t even reach the end of your page where your subscribe form is located. Chances are a heatmap will give you some good insights.

3. Provide a signup form halfway your page

This a neat little trick if you have a very long landing page. Try to provide a signup form halfway your page to see if people are willing to convert before the end of the page.

4. Put a very clear call to action on the page

What is the most important action you want your visitors to take? Is that login, register, book now, schedule a call? Take a look at all the buttons on your page and decide which action you want them to take. A good landing page has not many links on it that will drive your customer away from that specific page. Your landing page should only have 1 call to action.

5. Validate your IDEA not your DESIGN

It’s not worth it to spend hours on the right design for your landing page. It’s not your design your validating. Of course, you need to make it a little bit decent, but you don’t have to think about the whole colour palette of your brand yet. It’s for sure that your idea and your brand are gonna change anyway. So don’t spend time and money on designs and vectors for an idea nobody might be waiting for.
My landing page literally uses 2 colours. Black and white.

6. Content is king but context is God

The content of your landing page is far more important than the colours and images on your page. However, there is one more thing more important than the content. Attracting the right audience to your landing page. You can have the best marketing texts in the world but if you only send housewives to your tech-related startup landing page you’ll end up with no conversion anyway. Figure out who the people are on your landing page right now and decide if they are your target audience.

Tired of copywriting that doesn’t work? Check out:
https://targetaudience.app

5 personal tips for landing pages

Sjors van Dongen — Wed, 06 May 2020 20:45:55 +0000

I’ve seen quite some landing pages come by on indiehackers.com by now and I noticed that I wanted to give/gave the same tips multiple times. So I thought it would be nice to write a small article about this. These are just tips from my point of view and things I like about a landing page personally.

1. Address 1 pain point your target audience has above the fold

People pay out of emotion. This is often fear or anger. Fear comes in various forms like anxiety, stress, worry. Anger can be irritation, fed up or annoyed. Try to think of a compelling header that addresses this emotion to make the first connection with your visitor.

2. Put a least 3 content blocks below the fold

People need to be convinced to take action. No one likes people who try to sell you something and ask for your email, phone number or credit card directly. Inform them with problems you solve. Don’t tell people your solution straight away, tell them which problem you’re going to solve for them. People want to be heard and don’t want to hear about you. There’s a difference between the following:

We help you with your Instagram branding (solution)

Are you trying to find a way to differentiate you from the competition on Instagram? (problem)

3. Make sure you can access some analytics

I still remember the first time I put one of my landing pages online. After I posted about it on various websites and send it to all my email contacts after 1 day no one signed up. I wasn’t very surprised but a little sad. I had on Google Analytics or something to check how many visitors I had at least. So I quickly installed Google Analytics and saw there was very few traffic so that was the reason there were no sign-ups.

4. Make it scannable

With most of the people having the attention span of a goldfish nowadays, your page must be scannable. Try to ask 10 people or so to look at your landing page for a maximum of 10 seconds and ask if they understand your concept. Making it scannable means that you emphasize certain phrases or headers that are important to read. Just like this blog post uses a bold font for each tip and is prefixed with a number. If I wouldn’t do that it’s way harder to scan the content. And you probably read the emphasized sentence above as one of the first sentences of this paragraph.

5. Use primary, secondary, tertiary colours

Not all buttons on your page should have the same colours. Check the homepage from dev.to:

There are two things that attract one’s attention, the ‘write a post’ and ‘share your project’. We could encourage people more to write a post if we make it vivid pink! That would make pink our primary colour, blue our secondary colour and the ‘See all posts’ in white our tertiary colour.

Stay tuned cause I’ll be sharing more tips in a couple of days!

My current landing page:
https://targetaudience.app/

Previewing Laravel markdown Notifications directly in your browser

Sjors van Dongen — Sat, 12 Oct 2019 13:36:43 +0000

Preview your notifications easily with just a couple of lines of code

Sometimes you want to develop beautiful notifications in HTML or markdown format. But how do you style them easily without having to send them every time you've changed something? Laravel offers an out of the box solution for this. In your web.php you can easily return a notification to render it and display it in your web browser.

Let's code!

If you'd like to try this with an easy example you can code along with me. First, we start with creating an example notification:

$ php artisan make:notification InvoicePaid

Secondly, we add the following lines to our web.php to be able to display the notification in our browser:

As the title of this article might confuse, it sounds like we render a Notification, in this case, InvoicePaid. But what we're actually rendering here is the MailMessage we return in the toMail method.

Rendering markdown notifications

Laravel supports sending markdown notifications as well and it would be nice to be able to preview these as well in the browser. For this kind of notifications it requires a little bit more code:

In this case, we use the \Illuminate\Mail\Markdown class to render the markdown to HTML. Go to /notification in your browser to see if it works!

(Bonus!) Rendering On-Demand Notifications

All objects which are using the Notifiable trait can be notified through their desired channel. This is a great out of the box feature from Laravel. But there are times that you'd like to send a notification to an email or mobile number which isn't a Notifiable instance (yet). Laravel calls these On-Demand Notifications. To render On-Demand Notifications in your browser we have the following workaround:

In the background, Laravel uses the AnonymousNotifiable class to send notifications on-demand.

I'm currently working on Laravel Pigeon. A notification center for all your communication with customers AND for debugging notifications in your browser!

The best Laravel repositories solution in 30 lines of code

Sjors van Dongen — Fri, 13 Sep 2019 14:31:35 +0000

How a 30 lines piece of script can finally provide a good solution for a repository pattern in Laravel apps.

The problem

Laravel provides a beautiful way to query your database through Eloquent, an Object Relational Mapping. The moment your project becomes larger there starts to rise a problem. The difference between entities and models start to become vague. Let me give you an example:

We have two methods, one called findByName and one called concatName.

What we are actually doing here is mixing methods for retrieving (collections of) Products, with methods for instances of 1 Product.

A much cleaner approach would be to separate them into 2 different classes. One for obtaining instances and collections of models and one for the model definition itself. You might call this the repository pattern.

There are several libraries for Laravel to start using the repository pattern. One thing that's a huge disadvantage to me is that you can't use Eloquent functions on your repositories. Since Eloquent is a huge reason why I am using Laravel I still wanted to be able to use Eloquent on repositories for obtaining models.

The solution

I created a very simple piece of code which enables all the features of Eloquent on your repositories. This way you can use the repository pattern in a way which is fun and keep your models and your repositories clean! A repository with the use of laravel-repositories would look like this:

By the use of the Repository trait and the $model property, laravel-repositories knows which model to query and where to use Eloquent and where to use your own repository methods.

With this definition of the repository we can now use it in our controllers, jobs, commands etc:

Go try it out and leave me some feedback for improvement!

Link to Github repository

Tired of writing copy that doesn't convert? Try https://targetaudience.app