Webdev with Bengin

How to Fix Flashing FontAwesome Icons on Page Load

Bengin Cetindere — Sun, 17 Jul 2022 09:08:51 GMT

If you ever used FontAwesome with a server side rendered framework like nextjs, remix or static site generator like GatsbyJS, you probably noticed it. On each page load, the FontAwesome icons are huge for a split second. After some research, I found out why that happens and how to fix it:

FontAwesome icons flicker on page load because their CSS is loaded only after they are displayed. Even though scaling them via inline CSS makes the flashing less noticeable, including the FontAwesome styles via an import into the root route effectively eliminates the flashing.

Let's look at how to apply those two methods to your problem:

Scaling FontAwesome Icons Inline

If the problem is rather local and not in your whole app / website, maybe this fix will be more feasible:

By giving the element a width inline, even without external CSS, the icon is not rendered hugely. Instead, you may notice a small change in size on page load, depending on what the icon's actual size is.

If you use icons only e.g. in the menu, you can consider playing with the width until the desired width is reached and the icon is not changing in size after the stylesheet is loaded. Take care of the fact that on different screen sizes different icon sizes might be needed.

If you display icons at several places within your site, consider trying the next solution that eliminates the flashing completely:

Loading FontAwesome Stylesheet in Root Route

Apart inlining a specific size, you can import the FontAwesome stylesheet to be bundled within the rest of your deliverable code.

This works a bit different depending on what framework you are using, but you need to find a place where if you put code, it will be executed / sent for each site.

For vanilla react, this might be inside index.html or index.js while in remix, it's root.tsx and for next it's the pages/_app.js layout. This is what you want to do:

import '@fortawesome/fontawesome-svg-core/styles.css';
import { config } from "@fortawesome/fontawesome-svg-core";
// Prevent fontawesome from dynamically adding its css since we are going to include it manually
config.autoAddCss = false;

This will make FontAwesome not add their CSS automatically. Instead, we got the faStyleSheetUrl and will use it manually now. Again, depending on what framework you are using, you have to add the stylesheet differently. Next.js or React will automatically import the CSS and apply it without the client needing to wait for an external stylesheet.

If you are using a framework that doesn't automatically add / apply imported CSS, you have to do it manually. Here is an example on how to accomplish that in remix.

import faStylesheetUrl from'@fortawesome/fontawesome-svg-core/styles.css';
import { config } from "@fortawesome/fontawesome-svg-core";
// Prevent fontawesome from dynamically adding its css since we did it manually above
config.autoAddCss = false;

export const links: LinksFunction = () => {
  return [{ rel: "stylesheet", href: tailwindStylesheetUrl },
    { rel: "stylesheet", href: customStylesheetUrl },
    { rel: "stylesheet", href: faStylesheetUrl }
  ];
};

If you are using another framework, you should try to import the contents of the stylesheet and put it into the header (like shown for remix above).

This will make the CSS for styling the icons available in the same file where the icons are rendered, which means no flickering.

Summaries and Recommendations: The 4-Hour Work Week by Tim Ferriss

Bengin Cetindere — Sun, 03 Apr 2022 17:03:39 GMT

If you have enough of working for your boss in your corporate cubicle, this book is for you. I just finished reading Tim Ferriss' 4-Hour Work Week and I am going to share a high level summary, so you can decide if it's for you or not.

Just skim through the sections and see if you find something that piques your interest.

General Structure

This book does not contain "a little trick" to only work 4 hours per week. It literally introduces you to a whole new style of working. This is part of what Tim calls "Lifestyle Design" and it's a sustainable system that does require effort from your side.

He divides his book into 4 sections, which are Definition, Elimination, Automation and Liberation. All the sections are for optimizing your life on a different dimension.

Definition (of Your New Life)

In this chapter, you are taught the concept of New Riches. It's basically a term Tim uses for people who are not mega rich, but generate the money they need to fulfill their travel-, accommodation- and free time dreams without actively working more than a few hours a week.

This chapter effectively introduces you into the world of New Riches and sets the mood for the rest of the book. Here you also learn Dreamlining. It'll help you be more reasonable and see that you actually don't need that much revenue to live happily, whatever that means to you.

One of the hidden gems inside this chapter is the Fear Setting technique. Most people, if forced to decide, will choose unhappiness over uncertainty. Fear Settings is a technique you can use to control and correctly assess fears, especially related to things like quitting your job or risking other things.

Eliminate (Hours of Your Workday)

This chapter is probably the most information-dense, that's why I split it into many subtopics. It sets the baseline for many following techniques or methods.

Feel free to just skim the headlines if they suffice to decide if you want to read the book or not:

Eliminating Hours via Pareto's Principle

Tim uses the Pareto principle to explain how to work just a few hours in your corporate job each day while still getting results that can even surpass eight hours of an average employee.

He also applies this to good/bad customers (as a business owner). As a business owned by a New Rich, you don't want each and all customers you can get. You'd rather want less revenue, but with only the good customers. The ones that are not using up much of your time (for support, e.g.) or cheap.

This will help you get profitable without working more than a few hours each week. You could make more money, but you'd need significantly more time each week, which is a tradeoff that is not scalable.

Eliminating Physical Presence and Commute

There is also a very useful part for employees that may not want to take the leap into self-employment or founding: In this part, Tim teaches a very effective way to get your employer to allow remote work.

I can't guarantee that every boomer-conservative boss will allow it, but the odds are pretty high with his method. Especially if you use the previous chapters to outperform other people in the company.

Eliminating Hours via Awareness of Parkinson's Law

He also introduces Parkinson's Law, a law postulating that we fill 8 hours per day because there are 8 hours to fill. If there would be more, we would fill more. That doesn't mean we are working productively and on important tasks in those hours.

Parkinson's Law: "Work expands so as to fill the time available for its completion.". This is the reason why it's very important to set deadlines, even if they are only for yourself. Timebox tasks to work on them more efficiently.

The reason why it seems off to only work a few hours per day is because we usually do fell all 8 hours. Just not with important stuff.

Eliminate Hours by Checking Emails Less Frequent

Tim doesn't like emails. I don't like emails either, and I think you share our hate for emails too.

He provides templates for auto-responders and techniques to reduce email checking to a bare minimum. It's a bold move for an employee you can - at least from my point of view - only pull off after you have already shown your above-average productivity.

But if you manage to apply it, it's a game changer for many people that get pulled out of focus from emails every few minutes / hours. You will also waste less time by batching responses to emails and therefore eliminating content-switches.

Exercises and Tasks for Working Fewer Hours

I don't want to spoiler too much, so I'll only say that in the book, there are several exercises included to help you apply the above principles, together with a set of rules that will effectively disallow active but unproductive work.

Most of them I was able to apply pretty well, they do make a difference. He also compiled a set of questions you can ask yourself via an alarm clock to get focused during the day as often as you like (he recommends at least 3 times).

Other topics I left out but are worth mentioning:

Low-Information Diet - carefully decide what information you consume
Empowerment Failure - prevent people having to call you because they are not empowered (permission-wise, knowledge-wise, etc.)
Eliminating-Paper-Tooling - List of Tools for managing stuff without paper

Automation and Outsourcing (of Tasks in Your Business and Life)

This chapter deals with how to reduce the few tasks that are left after elimination even further by outsourcing and automating. This is my favorite chapter, and I was really not aware outsourcing can work that well.

Outsourcing via Virtual Assistants

Tim lets a friend tell a story about how outsourcing changed his life forever. The story is largely to show off what tasks a virtual assistant is capable of doing for you.

I am not going to go into detail here because a big chunk of the story is made up of examples, but I really enjoyed reading it and was instantly inspired to outsource work (which I did and it worked quite well, but that's for another time).

It does not exactly apply much to traditional employees, but if you want to take the leap to self-employment or founding, you can use your employee-money to buy time of a virtual assistant who does tasks for you while you still have the safety of an employment.

He also has a bunch of tips included on where to find good VAs and how to choose the right one.

Automating Income Generation (mostly)

As you probably know, passive income is very rare and should not be the goal of most people. Instead, you should strive for a healthy business and then

Eliminate everything that's not directly beneficial for your business
Automate everything that can be automated
Outsource everything of the remaining tasks that you don't like and can outsource

In this section, the book at hand deals with what types of businesses can be a muse. A muse is a business that does not rely on you spending time to make money (like it would be the case for e.g. a consultancy).

The goal is to create "an automated vehicle for generating cash without consuming time". He does explain in detail how to choose, validate and build this, but it's one of the chapters you have to put a lot of your own personality and interests in.

In this part, he also touches base on basics of economy and marketing, but if you are serious about either of these two topics, I'd rather recommend you read "100M Offers: How To Make Offers So Good People Feel Stupid Saying No" by Alex Hormozi. It's deceivingly low-priced at like one dollar, Alex will also explain why in his book. He's a genius, I definitely have to write about that book next.

Back to the 4-hour work week, Tim pays attention to always remind you that the goal is neither a 80h week CEO position, nor a million dollar exit. Accordingly, he will teach you "Management by Absence". This includes automating Ads, traffic, conversion to sales, payment processing and even fulfillment if you have physical products.

This will effectively remove you from the equation and you will be only required to guide the business into the right direction or make changes in the process.

Liberate (Yourself)

By liberation, Tim means being able to choose where you work from. He is talking about traveling the world, already having learned how to spend less time doing your job correctly and now being able to choose to stay near the beach/mountains/whatever you like.

He is very big on geo-arbitrage, which takes advantage of prices being different in different regions. If you believe it or not, your current income most likely will be enough to life an almost luxurious life in another country.

One part of this chapter is about how to achieve this liberation of location. The other part is really about how to spend your newly gained freetime since many people seem to get bored quickly. How to plan bigger "mini-retirements", as he calls them, and what to pay attention to.

It's inspiring. Even if you don't get much direct value out of it because you are not there yet, the possibilities are very effective for motivating yourself to master everything before and achieve liberation.

Personal Opinion

I am a full stack developer and consultant who just quit his job to work on my own stuff. This book was one of the foundations I built on, combined with 2 projects I already run and combined with some other books I'll soon recommend too.

The 4-hour work week will help get you further in life, if

are already running a business
as you will learn a lot about elimination, automation and outsourcing
are thinking about switching from employment to running your own thing
as you will learn a lot about how to make the transition smoother and with more safety before quitting (that's what I did)
are an employee and want to stay employed.
This category will not benefit from this book as much as the above two. But still, you'll at least learn to use your time in a way more effecient manner and save many hours of work that you can spend with friends and family.

As you can see, this book is at least moderately useful to almost anyone. Especially well suited if you are searching for a life-changing gift without knowing too much about a person.

Even though it's a pretty old book, it still did something great for me. I hope this article shed some light onto the question whether this book is worth a read or not. If you want to support me, consider buying it via my ref-link.

Learning React: Custom Notification-System with Context

Bengin Cetindere — Sat, 27 Nov 2021 11:17:00 GMT

Displaying a notification to the user is typical for web applications. Let me show you how we can leverage React Context to build a global, customizable Notification-System.

To give you a high-level overview of this article, we will:

Create a Notification component that can hold and display one single notification
Create a NotificationManager component that can display several notifications and remove them again
Make the NotificationManager available from all / most components (by using Context)

In contrast to many other tutorials, I am not giving you a huge project on GitHub. The focus here is on learning and not on copying. I'll also assume you have a React app that is able to run.

I am using react with TypeScript. I recommend everyone to give it a shot, but this is not a debate about TypeScript vs JavaScript. For those of you who don't use / know TypeScript, you should be able to understand the code and construct a JavaScript version fairly easily.

I'll style my notification component with Tailwind CSS - as this is purely cosmetic, you can choose any other CSS framework of course or none at all. In this project I am also using Fontawesome for Icons - the button to close a notification is a FontawesomeIcon component, you can simply replace it by any other HTML element if you are not using it.

If you have any questions while reading through this, simply hit my Twitter DMs and I'll answer them as soon as possible, promise!

Notification Component

I did some basic styling for a notification component with different colored versions to indicate an error, warning, success or information. Here's the one for success:


	
    	
    
  {props.title}
  {props.content}

snippet from Notification.tsx

I return this jsx if the type prop of the component is "success" and a similar version (different colors) for the other types.

You should be able to render the component in place with some static values now:

alert("you clicked close")}/>

example for testing

This should render a notification (inline) with the given title and content that will alert you when you click its close button.

NotificationManager Component

We don't want to render those Notification components in each component that generates them individually. This would yield the problem that if more than one component shows a notification, they would overlap because you would probably render both with a fixed position.

In order to counter that behavior (and for clean code) we are moving that into the NotificationManager.

The NotificationManager will keep an array of notifications that will be rendered, and it will also handle the onClick event of those rendered notifications, so it can remove them again:

// the interface export is TypeScript-specific
export interface NotificationData {
  title: string,
  content: string,
  type: "success" | "error" | "warning" | "info"
}

const NotificationManager = () => {
  const [notifications, setNotifications] = useState>([]);

  return (
  	
  		{notifications.map(notification =>
  			 {
  					const index = notifications.indexOf(notification)
                      const clone = notifications.slice();
                      clone.splice(index, 1);
                      setNotifications(clone);
                }}
            />
  		)}
  	
  );
};

export default NotificationManager;

basic NotificationManager component

As you can see, we iterate through the notifications array and render all of them. The component itself will render in a position: fixed style at the bottom and with a given max width.

The onClick property of the Notifications is set to a function so that the clicked notification will be removed.

To test this, you can initialize the notifications state like this:

const [notifications, setNotifications] = useState>([{
	title: "Successfully Sent Data",
    content: "Your request has been transmitted to our side successfully. Thank you.",
    type: "success"
},{
	title: "Error Sending Data",
    content: "Your request has not been transmitted. Please try again later.",
    type: "error"
}]);

test with pre-initialized notifications

You should see 2 notifications and be able to remove them upon click on the cross.

NotificationManager with Context

For now, we can't add notifications from other components yet.

Let's add an addNotification function inside the NotificationManager component just below the getter and setter of the notifications:

const addNotification = (notif: NotificationData) => {
	setNotifications(notifications.concat(notif));
}

addNotification function

We could pass the addNotifiation function down the component tree, but this is cumbersome and error-prone. Here's a quote from the context documentation:

Context provides a way to pass data through the component tree without having to pass props down manually at every level.

This is what we need React Context for. We will create a so called ContextProvider with the addNotification function as the value and let other components consume this context in order to get the addNotification function.

We need this to be callable by other components, so we create a context. We create this context outside the component, since we can't export something inside a component.

export const NotificationContext = React.createContext((notif: NotificationData) => {});

const NotificationManager = ()=>{
	// ...
};
export default NotificationManager;

create context

We are creating a new Context with the createContext method. This method takes one argument, which will later be accessible to all ContextConsumers.

We would like to pass our addNotification function here, but we can't reference it since its scope is inside the NotificationManager component.

Therefore, we just provide an empty function as the default. Then, inside the NotificationManager's output, we wrap everything inside tags like this:

return (
	
    // ....
	
);

wrap everything with NotificationContext.Provider

This will allow us to change the value from the empty function to our addNotification function.

Since the context can only be consumed by components which are inside the tags, we will make our NotificationManager component a parent component like this:

const NotificationManager: React.FC = (props: React.PropsWithChildren<{}>) =>{
  const [notifications, setNotifications] = useState>([]);

  const addNotification = (notif: NotificationData) => {
    setNotifications(notifications.concat(notif));
  }

  return (
      
        {props.children}
        
          {notifications.map(notification =>
               {
                              const index = notifications.indexOf(notification)
                              const clone = notifications.slice();
                              clone.splice(index, 1);
                              setNotifications(clone);
                            }}
              />
          )}
        
      
  );
};

Final NotificationManager component

You can see that we are rendering {props.children} inside the provider. This will be equal to whatever we will put inside the tags.

Notice that for this to work in TypeScript, we are required to define the props of type React.PropsWithChildren so we can use props.children in the component but are not required or even allowed to specify a children prop manually.

We can then use the NotificationManager component as a wrapping component, similar to how you would use a Router component or other providers:


	
    	// ...

Usage of the NotificationManager component

After this setup, you'll end up with a very convenient way to add notifications that stack correctly and are removable by click:

const SomeComponent = () => {
  const addNotification = useContext(NotificationContext);
  
  return 
  	
  
};

Usage of the addNotification function

We are simply fetching the NotificationContext with the useContext hook and have access to this function in our component. Every component which has our NotificationManager as any ancestor will be able to consume this context with the above hook.

Extensibility

Since this is custom-built, you can customize as much as you want. For example, you could remove the messages again, after a few seconds, via a setTimeout inside the addNotification function.

If you do so, you could add some kind of indicator for how long the message will be shown (like a loading bar) or add an animation for how it appears/disappears.

Thank you for reading - if you liked this article, considering following me on Twitter to stay in to 🙌

MasterCard, Visa & the Payment-Mafia - Why Payment is Messed Up

Bengin Cetindere — Fri, 24 Sep 2021 11:31:18 GMT

We've come to a point in time in which technically, everyone can accept payments for their online-shop via Shopify + PayPal. Every developer can integrate Stripe payments with a vast amount of security features and risk-management to protect against fraudulent transactions.

Technology is - as always - at it's peak, payments can be implemented technically easier than at any time before. Businesses can start accepting payments as professionally as huge giants like Netflix or Spotify.

But what's with this emphasis on technically? Well, there is one big fat problem.

Not Everyone is Welcome

PayPal refuses to accept payments for some people. Let's take a look at the Prohibited Activities section of their Acceptable Use Policy:

https://www.paypal.com/us/webapps/mpp/ua/acceptableuse-full at 27th May 2021

Of course some of these activities are simply illegal, so it's not necessarily bad that they ban those activities (more about that later) - but things like "items that are considered obscene" (2.g) or "certain sexually oriented materials" (2.i)?

This includes all kinds of adult content, be it sexual services or art that is of sexual nature (videography, paintings, literature, ...)!

Well, people can then just take payments via Stripe, right?

No they can't, Stripe prohibits this too:

https://stripe.com/en-de/restricted-businesses at 27th May 2021

They, too, ban honest, adult-themed work. It's not only them though, Mollie doesn't accept such things either:

https://help.mollie.com/hc/en-us/articles/115000939369 at 27th May 2021

Every payment processor has a list of prohibited activities, and adult content is included in almost every payment processor's list.

There are only very few payment processors that willingly accept adult themed content, but in return they take somewhere between 12% and 17% of the transaction instead of the default 1.5-2.5% taken by PayPal, Stripe or Mollie.

Why do they all prohibit adult topics? Neither PayPal, Stripe, Mollie nor any other payment processor themselves are the reason for that.

The Source

Let me introduce you to MasterCard & Visa. In our world, they are the ones who create and control (the majority of) credit-cards and the ones who have power over them.

The source of many of these prohibited activities lies here. What's the reason they name publicly for refusing service? The top 2 reasons are "brand-damaging content" and "high-risk transaction".

Brand Damage

Brand-Damaging is hard to argue because it's not measurable, at least not on a per-case basis. But apart from that ... all the C-Level executives at MasterCard and Visa are not consuming any kind of erotica, then? Did I understand that right?

I don't like calling people out, but the courtesy ends when they call out adult content as "brand-damaging". Some people do their living with stuff you call "brand-damaging".

It's not even like MasterCard or Visa would really be tied to the product that could be "brand damaging". Everyone knows they are buying something from xyz-site and only the payment is done via their card. No one assumes that the card-network affiliates for the content. The card is only a tool.

A hammer wouldn't be affiliated with murder, just because someone used it that way. No one would think bad about a workbench brand just because one of their tools has been used for murder in the past.

High-Risk Transaction

The high-risk problem is something they really have to put the blame on themselves.

For anyone not in fin-tech: Customers that purchased via card can request a chargeback for transactions from their banks for a variety of reasons (like credit card was stolen, hacked, I didn't receive the item, and so on).

Those chargebacks are a critical hit (as if the customer rolled a 20) to the merchant because they not only have to give the money back by default, they pay a chargeback-fee ranging from 10$ to 100$.

The merchant can fight the case to get the transaction back, but the chargeback fee is always used for paying for the dispute-resolution and dispute in general. It's like legal fees, but the merchant always has to pay, even if they're in the right and can provide evidence.

This mechanic has been implemented by Card-Networks like MasterCard and Visa in the early times, when people were too afraid of getting a card that had access to their bank account and could be hacked or stolen. It's a relic of the past and should not exist in this way anymore.

Why does risk even matter? Transactions should only work when authorized and with the 3DS getting mandatory in more and more countries, it should not be the merchant's fault when someone exposes their passwords or looses their cards. There should be no bailing-out of transactions without real, severe consequences.

At the moment, customers have nothing to lose by filing a chargeback with their bank, it's why this technique is also called friendly fraud.

Why This is a Bigger Problem than You Think

MasterCard recently disabled payments for Pornhub because of a reason that may or may not be legitimate. The problem lies not in why they banned Pornhub or that it was Pornhub. It lies in the fact that MasterCard decided that on their own.

They are no authority nor regulator, but if they add something to their policy, everyone has to bow the knee or else.

Is it reasonable for a company to have the power to shut down businesses just like that? Why is the power to take payments centralized to just 2 or 3 very large companies (which are by the way not even authorities, but corporations)?

MasterCard and Visa if you read this, of course all the above was a joke. I love you and your decisions, pls don't cancel my card or blacklist me.

Epilogue

Payment should not be as centralized as it is.

If two people want to transact money from one place to another, there shouldn't be some sort of company that decides whether that is acceptable use or not.

Yes, it's MasterCard's and Visa's cards, so they make the rules (that's also the only reason for this being legal), but here's a quote for ya:

With great power comes great responsibility

How to Find Micro-SaaS Ideas: The EBIG Framework

Bengin Cetindere — Mon, 28 Jun 2021 11:56:00 GMT

Once upon a time, I was a slender, thin little software developer with no ideas, just like you. For real though, a few years ago, I was in search of the perfect software idea permanently.

I would constantly look at successful websites or apps and thought, "Technically, this is something I could've done too!". If you can identify with my past self, I'll teach you how to come up with ideas that actually will attract users.

EBIG stands for environment-based-idea-generation, and the gist behind this method is to ask people in your environment for problems that they have and work on a solution-draft together with them.

Because that's where most developers go wrong. It's not having an idea and then searching for people who have the appropriate problem. It's finding a niche audience that has a specific and painful problem, so you can build a perfectly tailored solution for that problem.

Starting a Conversation to Find Problems

You start out with people in your environment. You'll always have people in your environment that have problems. Make a list of friends and family and write the niches they work in or have hobbies in.

Now comes the hard part for us developers. I know this sounds awful, but it won't be, I promise: You have to talk to a few of those peoples about problems they have in their niche.

Also, there are companies that are too large to sell to without enterprise procurement (which you really don't want, trust me). My dad for example works at a really huge parcel delivery service, and they wouldn't buy or even consider anything that one person produced.

So, you choose the first person you want to talk with and schedule a call or hang out with them. In the conversation itself, ask them (casually, nothing formal please) what their pain points in their job/hobby are. Try to control the conversation in a way, so they tell you about problems that could be solved by technology.

You could start out by saying, "I can't really visualize how your typical work day looks like. Can you summarize for me?" - this way you can get a conversation about this topic started, and they'll tell you about their workday.

Extracting Problems From the Conversation

There is a good chance they'll tell you about some problems already. If they didn't mention specific problems, ask them, "when was the last time you had a painful problem [at work/with hobby X]?".

The important thing here is to understand the why. It's very hard actually to ask the correct questions here, but there is a very helpful book, it's called "The Mom Test" by Rob Fitzpatrick.

As a founder, you really absolutely must read this one, it'll save you a lot of trouble finding and especially validating ideas. Except if you are into building products for 9 months just to find out no one needs them. In this case, you are a masochist by definition, I am sorry you had to find out this way.

The super-short version of some questions you could ask: Let them explain

why the problem is painful
who is affected by the problem
what happens if they wouldn't solve the problem
what they currently do to solve the problem

If for the question "what happens if they wouldn't solve the problem" they respond something along the lines of "well, I'll just do it later" or "We'll have to file a document.", this problem is not suited! This response means that the problem is not painful enough.

If you ask them what they currently do, and they'll respond, "Well, I just invest the extra 15 minutes to do this monthly task", this is a clear sign that this product is not suited either.

I think you get the gist of what to look for. If not, the book linked above will teach you.

There is also the possibility they will point out how this old rusty software they use is so slow, has bad UX and could be so much better. Take notes! Try out the software if you can and build something better that targets the pain points they complained about. Be sure to check what requirements you'd need to fulfill before they or their company would use your software. In some industries, the requirements are way too high for a solo-dev.

Magic Button

Many people can't imagine what software is capable of and what not - this is where the magic button comes into play. It's a technique that poses a question in a way that opens up people to talk about problems, even if they don't seem particularly solvable for them.

Ask them, "If you had a magic button that, if pressed, would do a part of your work for you, which part of your work would that be?"

Their response will often be something that can be solved either with normal software or machine learning. It's so efficient because most people will not think software can help them with their work. Magic can, though. Additionally, magic sounds so absurd, the barrier to responding to you with a problem is much lower.

Requirements for a Successful Micro-SaaS Idea

When you have a list of problems that you think could be solvable with software, start vetting the list. The questions above should help you with that.

If you want to build a Micro-SaaS, be sure to check if your idea additionally fulfills these requirements:

Big Enough Market

The market should be big enough so that if you can capture 1-2% of it, you should be able to make a living off of it. Make sure there are enough potential customers or people searching for a solution to that problem.

Small Enough market

The market can also be too big, so make sure that it's small enough. If it's too big, you'll have to compete with bigger companies that have more budget for development and marketing than you.

Market Fit

You should make sure that your target audience are people that have enough money to pay you. They should be in a market that is growing or at least staying steady.

A bad market, for example, would be to serve the hobby-painter market. A good market, for example, would be to serve the professional-photographer market.

Drafting Solutions

After vetting the different problems, start drafting solutions for them together with your friend or family member that introduced you to the niche. This will be very individual depending on the type of problem.

After designing a first high-level draft of the solution, you have a person who can check if this is technically viable to build (you) and someone who can say if this would actually be useful (your friend / family member).

Example from My Life

I am writing this article because a few days ago, I was talking with my girlfriend's father about his job. He does general inspections for car safety, and he was complaining about how the appointment-scheduling and payment were really unorganized.

With some precise questions, I could find out all the details and what could be done better. For example, customers can only make appointments by calling. How cool would it be if you can use an interface similar to Calendly? See which dates / times are free and book something and pay online via PayPal, card or your favorite payment method.

At the moment calling is the only option + there is no payment possibility other than cash or normal bank transfer which can take days.

At the moment (mainly because of Minervabooks) I don't have the time for a new project, but I added it to my idea-list. Feel free to steal this one btw, I'd love to see someone succeed with this idea.

Your users have latency. As a developer, you should too.

Bengin Cetindere — Wed, 17 Mar 2021 08:31:13 GMT

There are a gazillion ways to optimize the speed of your website. Many of which are hard to implement and will only reduce the loading time by an unremarkable amount.

I am going to introduce you to an unpopular opinion right now. Bear with me, this will help you craft experiences with better UX. So promise to read on, despite your instincts might tell you otherwise 😁

Disclaimer: Only for web apps, not for content/SEO relevant websites:

The UX difference between loading for 1 second vs loading for 0.5 seconds is not as big as the difference between loading for 1 second vs loading for 1 seconds but showing a loading indicator.

Not to say you can't have both (fast loading AND good UX), but more often than not - Yes, I am especially looking at you, indiehacker / solo-founder - I see missing loading indicators, empty content that looks like the app is loading or other bad UX which could be fixed way easier than your asynchronous + deferred JavaScript loading that'll get you 31ms faster first contentful paint.

Got it, use loading-spinners. Anything else?

I am currently working on a web app (Subscribee.net) and I implemented a spinner component to use it as a loading indicator at different places. This way, it's very easy for me and almost no work at all to add a spinner everywhere it's needed.

After some time, I wanted to check something in production, I was messing with some environment variables, and then it hit me: When editing a post, there was no loading indicator while loading the post content and images.

I added the spinner into the respective component but after this incident, I wasn't sure if I may have overlooked something at other places too.

Your users have latency when using your app

When you develop a web app, most of the time you'll run the backend, frontend and database on your local machine. This means that network requests go from your PC/Laptop to itself. No router latency, no (remarkable) latency due to speed of light limit, no load balancing latency, no wireless latency, [...]

Your users will have to query your frontend for HTML, CSS and JavaScript. The JavaScript on the page makes a request to your backend (which in turn fetches data from a database) with which's answer content can be finally displayed. It's impossible to reduce the latency for this chain of actions to the same level as you have on your local setup.

So what's the solution?

Delay each backend response artificially

Delaying each backend response in non-production environments by 250ms in NodeJS is as easy as adding this middleware:

if (!process.env.PRODUCTION) {
  app.use("/", (req, res, next) => {
    setTimeout(next, 250);
  });
}

These 5 lines of code will make sure that you see your web app as a user and not only as a developer. Probably, there are similar methods to delay responses by x ms in non-prod environments for your framework and language.

Like I said, it may seem counterintuitive (to add intentional delay) but you won't ever forget a loading indicator again. I have this snippet in Subscribee's backend, and it works wonders.

Now that you'll easily spot bad UX while the page is loading, you can enhance it where needed. Keep an eye out especially for

text that hasn't loaded yet
input values that are prefilled but haven't loaded yet (like in my edit-post case)
buttons that have been clicked (don't forget to disable them)

Enhancing the Loading UX Even Further

As a bonus, Michal Malewicz, UI Design lecturer and author of "Designing User Interfaces" explained how to improve loading experience even more.

If you remember the first few iPhones, they were pretty slow. Loading an app would often take over twenty seconds, so Apple came up with a solution that would trick the users to think the app is loading faster.

I'm talking of course about Skeleton Screens, a term coined by Luke Wroblewski in 2013. What it means is that they were using a loading screen, that had parts of the layout already rendered on it. If the first app screen was a list, the resulting screen would show an empty list, but with all the boxes and UI elements marked in place.

This led to a perceived lower waiting time by the users, even when the actual time was the same as with an app without a skeleton screen.

This concept was later refined by the use of subtle animation - mostly fading in and out a little, that made the users think that something is happening.

Spinner happens in place, but is not connected to anything. Skeleton backgrounds appear to be there and all you're waiting for is their content - so it appears like half of the screen already has loaded and all we're waiting for is the data.

Summary - TLDR

Main Points of this article summarized:

Work on what makes a bigger impact. Only optimize loading speed until the optimizations get smaller than potential benefits you could achieve with UX optimization. Devs get lost in optimizations way too often.
Use loading spinners, so users know when they can expect more to happen and when the site has finished loading.
Add artificial latency to your local development setup, so you can experience your app like your users would.
If you want an even more optimized UX, go for skeleton screens. Here's more info on skeleton screens.

How I wrote a scraper to get an RTX 3080 (OSS)

Bengin Cetindere — Mon, 11 Jan 2021 07:07:02 GMT

As many are aware, Nvidia didn't at all manage to meet the high number of buying intents for the RTX 3080 generated by gamers, crypto-miners and others. It was the beginning of October when I realized that I am going to need a more powerful GPU for my soon to arrive HP Reverb G2 (VR headset with 4320x2160 resolution). Also, Cyberpunk.

As an experienced developer I thought "Well Bengin, can't be that hard to write a scraper that periodically calls a few sites and tells me what changed". I would only need to quickly write something that checks a list of sites every 2 minutes and email me if the result was different from the previously fetched version. Simple.

Boy was I wrong.

Of course, I wanted something more customizable, scalable (duh). I think it's just me, but I am not really satisfied with developing hacky solutions. I want at least some UI (even if it would be command line) and the possibility to let my friends use it too without them having to install 10 tools.

In the next sections, I walk you through the basic structure of the app and some challenges. Warning: It's going to be technical (but from a rather high level). You can also always check the source code on my GitHub.

First, I thought about a React frontend and a NodeJS paired with a DB like MongoDB to build a multi-tenant web app. Then I realized that I don't need a React frontend. In the frontend I only want to enter some data (links, scrap-interval, etc.) and I want the frontend to be able to notify me when something changed.

I picked up Telegram earlier that year and I decided to just use a Telegram bot as the frontend - the notification would work without problems and would work really fast (as opposed to web push or email). Bonus: I could learn to write Telegram bots. I mean, which developer doesn't like to play with new, shiny stuff😍?

Frontend

As already mentioned, I used Telegram as the frontend for webwatcher. I decided to try out Telegraf, a NodeJS Framework/Wrapper because of its dialogue modelling capabilities. At the end, creating a new target for webwatcher is a dialogue:

Creating a webwatcher target to notify when a new blog posts on this site is available

As you can see, the whole usage and configuration of the bot is done via Telegram. This way I can send the bot link to friends, and they can use it instantly without installing anything.

I also added the bot into a group with some friends who also needed a new GPU. Everyone can chat with the bot privately for private notifications, and it's also possible to set up the bot in a group so many people get notified for the same things.

In the current state you can only delete targets but not modify them (which would be really useful, but yeah, I kind of don't need the webwatcher at the moment). When deleting a target, I used the inline buttons Telegram offers, to list the targets that the user can delete:

Deletion of a target

The inline buttons are removed upon selection and a confirmation message is sent.

I don't want to go into detail on how I modeled the dialogue (mostly because I didn't do a great job at making it readable or maintainable). But I want to show how one part of the dialogue looks because the documentation was really not that helpful:

As you can see there is a WizardScene which takes an id and then the different steps of the dialogue. Pretty neat, but took a lot of fumbling to get right.

Backend Infrastructure

In order to store the targets and their configuration persistently, I use a MongoDB - it is pretty much only used for that.

I had difficulties finding a way to properly set up a Telegram bot development environment. Even when developing on your local machine, you have to connect to Telegram's API servers, so you can test your changes.

I created two bots, one for development and one for the live version which would run on my server. The live one would always run the latest master version of the project's repository (Jenkins webhook which builds and deploys a Docker container (Yes yes, I know, Overkill, but I love CI/CD)).

This way I could try implementing a feature or fix a bug in my local environment and if that works, I can simply commit and push, and it would be live in a minute or so. DevOps magic is really cool.

Backend Logic

When the NodeJS project then starts, all targets are read from the database. Then each target that has been read is set up. The same set up routine is executed for a newly, dialogue-created target, and it works like this:

Fetch Website and Execute Check
SetInterval to check periodically
Put return value of setInterval into a map for stopping this specific target

For the actual fetching, I use axios, my favorite http library. Depending on the target's http verb (post or get), a post or get request is made. The response is then interpreted differently, depending on the target mode. I made 4 modes, each mode does a different transformation with the response. After the transformation, the result is compared against the previous result of this target. The 4 modes are

RAW - simply returns the response
CONTAINS - takes a string argument and returns if the result contains the argument (for example a word) as a boolean
JSON - also takes a string argument and interprets the response as a JSON object and queries it with the argument (for example [0]["title"])
HTML - also takes a string argument and interprets the response as HTML, queries it with basic CSS selectors (I use node-html-parser for that) like .title or #news-wrapper and returns the content of the HTML element

This means that with the mode, the user can choose to get notified when anything changes (RAW), the occurrence of a word changes from yes to no or vice versa (CONTAINS), an API's JSON response changes at a specific location (JSON) or a specific HTML element's content on a site changes. After that I simply notify the user if necessary (via the saved telegram chat id in the target).

The hardest thing in the backend was actually the dialogue modelling. Not only because the documentation lacks some details but also because I created it with the intent of having a linear dialogue that just asks for some values. Due to the GET or POST question and the different modes, some questions texts depended on answers of previous questions. My implementation of that is a bit hacky, which I don't like, but it works 🙌. Telegraf surely has better ways to deal with this - if someone knows a good tutorial on that, please comment.

Conclusion

In the end, the webwatcher was a fun side-project for learning and hey, it allowed me to buy an RTX 3080 in covid-october. And now that the Reverb G2 arrived, I got to say that Half-Life: Alyx looks dauntingly realistic o.O

Anyways, thanks for reading! If you have any questions, please feel free to comment.

Make Footers Stick to the Bottom of the Page in Bulma

Bengin Cetindere — Wed, 21 Oct 2020 13:51:00 GMT

Many websites feature a footer element which should be displayed as the last element on a website. Everyone that created a footer stumbled upon this problem at least once: For shorter pages, the footer is the last element, but it's not at the bottom of the screen. It's somewhere in the middle of the screen with space below it.

In Bulma, the footer class can be altered to always be at the bottom of the viewport by enlarging the element right before the footer to fill the remaining space. This ensures that there is no blank space on below the footer.

This behavior can best be achieved by using the flexbox layout. Let's dive into the details on how to implement this behavior and more:

Theory

I want to quickly explain the theory behind the problem for more inexperienced developers, so they understand why this problem happens and what the idea behind the solution is. This is important to know and allows you to transfer your knowledge to similar problems more easily. But you can of course skip this section and jump straight to the Non-Theory heading below.

The Problem

Websites have certain rules that determine how DOM elements in general are positioned and rendered. In our case, the footer element simply gets rendered right below its sibling, which is the intended behavior for DOM elements.

For the footer however, we don't want this. The empty space below the footer is a result of all elements total height being smaller than the viewport height. This leads us to the solutions (or one of the solutions):

The Solution

The height of the content to the top of the footer would have to be larger by the amount of space below the footer. One could add tags or something else that occupies space so the footer gets pushed down, but this would be an anti-pattern since you shouldn't modify the content in order to change the design. Those two should be separated at all times.

Rather, the solution to go for is to increase the height of the element to the top of the footer (or any element to the top of the footer really) by using CSS. Due to the existence of different display- and thus viewport-sizes, fixed heights are not a viable solution either.

Instead, we are going to make a layout that fills the remaining space automatically by using flexbox. Flexbox is a display-mode that allows an element to display its child elements in a distinct and flexible way (hence the name).

Non-Theory

Here is a rough sketch of a basic website with header and footer:

So in order to have the blue footer part always end at the bottom of the screen, the height of the red main content part has to fill the remaining height. In Bulma we can simply achieve this with the following HTML code:

Code on CodePen

And the following CSS code:

Code on CodePen

I've also put the code on CodePen for you, so you can simply copy it or look at the result. With this flexbox technique you can also build similar layouts horizontally (for a fixed width menu on the left and fill the remaining space with content) and many other things.

Addition: How to do that without Bulma

Maybe at some point of time you'll be in the position where you have to realize this behavior without Bulma - it'll be nice to know what the Bulma classes do in the background so you can do it yourself or in other frameworks like bootstrap.

Basically the columns class applies display-mode:flex to the wrapper and the is-flex-direction-column class applies flex-direction: column. We then add height: 100vh to the wrapper so it always fills the screen.

The column class applies several CSS values but most importantly it applies flex-grow: 1 so the child elements grow until the parent element is filled. With the class is-narrow we set flex-grow:0 for the elements we don't want to grow (so they only take up as much space as they do without flex). That's it.

I hope that you learned something and that this was helpful for you. Please like, subscribe and share - jk, computer scientists like us don't have any friends to share with :P

Integrate Google Analytics into Your React Web-App (without npm packages)

Bengin Cetindere — Wed, 16 Sep 2020 13:50:00 GMT

Integrating an analytics solution is crucial for any business in order to measure success and where it originates from. Google Analytics is probably the most well known tool, so in this article you will learn how to use it in your React App without any npm packages.

In order to integrate Google Analytics into your React app, you first have to create the respective GA Property. Then copy the script that Google Analytics provides and add a script element into the body of your React app that contains the copied script at runtime.

After that, you can track different events and page views (even for single-page-applications) with ease. Let's dive into the details of how to do the above and more for your React web app.

But there is a React npm package for Google Analytics

There is an npm package for react which integrates Google Analytics and there is nothing wrong with using packages if they take off workload from you. In this case, though, the reduced workload is minimal and integrating the plain JavaScript Google Analytics version will yield the benefit of being well-documented.

If you go with the npm package, chances are that you run into issues (like me) and can't resolve them because there is only very limited resources about non-official npm packages.

If you go with the vanilla JavaScript version, however, you will be able to fix issues much faster as you can use all the resources on the internet about Google Analytics.

Everything should be done as simple as possible, but not simpler - Albert Einstein

At the end of the day, KISS (Keep it short and simple) is one of the clean code principles and adding yet another layer of complexity by adding an npm package shouldn't be the solution for this problem.

This is the code I use

At its core I simply add a script element that contains the GA code to the body. The async attribute is important if you don't want the page to stop parsing while executing the script.

I have this code snippet inside my top level component's componentDidMount lifecycle method. It's that simple. This should do the trick for a very basic integration.

Only Track in Production

It's also worth mentioning that I only execute the above script when the code is running on production environment, so I don't record page views and events while I am developing.

I do this by having a different .env on my production environment. If you don't know how to work with environment variables, I strongly recommend you to check out this great introduction and tutorial about environment variables. Be sure to search for react-specific solutions after reading the article, there are some caveats using env files with React.

Tracking Page Views Correctly

The above snippet does not work for capturing page views that do not execute a full page reload. As most React apps don't reload the page but only swap the displayed content, Google Analytics will only capture the first page view but not the consecutive page views produced by clicking inside your app.

To track page views correctly, we have to submit a page view event on each new page view. In order to do that, we need access to the gtag function that allows us to do so. I modified the copied Google Analytics code by adding a line after the gtag function definition:

This way, the gtag function always available via window.gtag. The following code sends a page view event "manually":

In my top level component, I execute this code when the location path changed. If it changed, I execute the above code. Use the componentDidUpdate method with a little check to listen to location path changes:

This will result in only sending a new page view if the location has changed and the code is running on the production environment.

Add Event Tracking

Let's get to the creative part. You'll probably already have a few ideas which events you want to capture but here are some ideas what to track to get you started:

click on external URL events
registration events
login events
sale events
add to cart events
subscription renewed event

Be sure to also track other business-specific events that are important for your website. You'll thank me later for having the data at hand when you need it (for example to see which channel brought the most sales and how different devices / countries are performing).

You simply have to add this line of code at any point where you want to trigger an event:

In this case, I send an event which has the action "early-access" and the event category "conversions". The good part about using the vanilla JS implementation is that you can simply go to the Google Analytics documentation and look how to for example specify a value or a label. Just be sure to use window.gtag because gtag is not in the global scope.