[{"title":"How I Raised My Hourly Rate by 78% in My First Year as a Web Development Freelancer","slug":"how-i-raised-my-hourly-rate-by-78-percent-in-my-first-year-as-a-web-development-freelancer","creationDate":"2021-11-10","category":"Programming","excerpt":"There are many great ways of how you can begin building your confidence and showing your clients why they should pay you a higher hourly wage.","cover":"how-i-raised-my-hourly-rate-by-78-percent-in-my-first-year-as-a-web-development-freelancer.jpg","tags":["Web development","Success","Hustle"],"html":"

\"Business — \n There better be some money left at the end of the year! - Photo by Author\n

\n\n

Many freelancers struggle with the question of how to raise their hourly rate. One of the main reasons why self-employed workers are hesitant to increase their rates is because they are afraid that they will scare away potential clients. This fear often comes from a lack of confidence in themselves and being able to articulate what sets them apart from other skilled freelancers. As the freelance market is getting more competitive, it is becoming harder for freelancers to ask for higher rates without providing good reasons to do so.

An important question to start with is “are you charging enough for your services?”.

There are many great ways of how you can begin building your confidence and showing your clients why they should pay you a higher hourly wage. This can be done by making small improvements in your workflow. Since COVID-19 massively sped up the digitization process for companies, currently there is an abundance of businesses who are looking for web development professionals, no matter the experience level.

If you are just starting out in your freelance career like I did at the beginning of 2021, the rest of this article will share some of my best advice on how I was able to raise my hourly rate by 78% in one year:

Generate multiple sources for incoming project offers

When you start out as a complete newbie in the freelance industry without any business connections, it is most important to find a variety of channels that can provide you with project leads. This is crucial because once you have multiple interesting project offers available to choose from, you will automatically learn how to bid for jobs more effectively and stay relaxed during the interview process.

To find potential clients, I researched and found websites where companies in my target market (Switzerland, Northern Europe, USA) were looking for freelance workers. Nowadays, it is easy to find remote positions across the globe, so you are not restricted to the country you live in. Think globally!

I talked about my process of winning new clients in detail in my previous article about How To Win Your First Clients as a Freelance Web Developer, and I can tell you, it was a lot of upfront effort that luckily paid off in the end.

Keep talking to recruiters even when you are fully booked

Although it is better to sign a deal with a company directly, you will usually have to go through some intermediary like a recruitment agency or freelancing platform. Many of the bigger and more prestigious companies completely outsource the recruitment (and billing) for independent contractors, so you wouldn't have a chance to get in contact with them anyway except through these third party agencies. The recruiters usually cooperate with many companies in parallel, so it makes sense to stay in contact and respond when you are receiving calls or emails from them.

Whenever I was contacted if I was available for a project, I would ask for basic information like the projected duration of the project, hourly rate, tech stack and more, even though I was already busy with a project and didn't plan on taking on a new one. By regularly staying in touch with the recruiters, you can get a better feel for the most in-demand skills in your area and which companies are offering to pay for it.

Update your online freelance profiles regularly

This is probably one of the key aspects to keep in mind when trying to achieve a higher hourly rate. Whenever I had a bit of time available, I made sure to go over all the freelance platforms where I registered and update them regularly. It is tedious at first because you never know if someone will actually discover your profile, but it is definitely worth it in the long run.

In my case, I was lucky enough to get contacted by the co-founder of a new invite-only freelance platform who found me through Remote OK. I didn't even know that they existed, so that provided me with a great source for high value project offers.

Showcase your passion through an active GitHub profile

It is not a hard requirement to work on web development projects outside of your work, but it definitely helps to be able to showcase a GitHub profile with reasonable activity. Opening issues, fixing bugs and adding new features to open source libraries shows that you are passionate about web development and that your code contributions are of high quality to others. The social proof of having contributed to well-known companies will improve your intrinsic value as a freelancer immensely, and you will be able to ask for better rates.

Lifelong learning and training is the way to go to be highly successful.

Move on to the next project regularly

\n\n

As you can see in the graph above, I have switched between projects quite a bit. This was an important factor for raising my hourly rate quickly, since it was unclear at the beginning how to estimate the value of my services without any prior clients. I recommend setting the initial hourly rate based on the median rate that is common in your area.

It might sound a bit harsh at first, but as a full-time freelancer you are not a permanent employee and therefore a long-lasting cooperation with the company is also not expected from you in the first place. Don't make the mistake of relying on a single client and then sticking around with them for years. It can be quite comfortable to have a client that provides you with a steady income, but whenever you receive a better project offer than your current one, brainstorm if it would be worth the hassle of switching.

You will definitely have an easier time increasing your hourly rate if you decide to choose a new project rather than asking for a raise at the current one. As a rule of thumb, I like to pick a new project every few months, but this is entirely up to you and your desired growth rate as well as relationship, satisfaction and success with a client.

Note that since you are part of the external workforce of a business, you should also be aware of the fact that you could get kicked out of a project at any time as well, so this can go both ways.

Pick a project that can advance your skill set

You might disagree with me on this one, but I believe that it is better to offer a broader skill set in the market of web development rather than to become highly specialized in one topic. Whenever I decide on a new project, I take a good look at the tech stack that is used and other facts, rather than the hourly rate alone.

With this in mind, I have recently been able to add modern and in-demand technologies like Next.js, Playwright and Electron to my skill set, which improves my value to potential clients, and it is also always great fun to learn new skills.

I started bidding on jobs that were at a higher level than what I was comfortable with and slowly increased the complexity of the projects that I took on. In the end, I was always able to keep up with the pace. In the worst case, I would need to learn a bit in my free time to be able to get up to speed with the project.

Try to move on from every client with a positive impression

Once you've made a successful pitch, make sure you do everything you can to make your client happy. If they are satisfied, they will be more likely to hire you again for any future projects. You never know which business connections can come in handy at a later stage in your career.

Oftentimes, it is not simply about having great skills in your freelance position as a software developer, but clients also want to cooperate with a freelancer who is reliable, feels connected with the project at hand and has a good eye for design and user experience. Specifically small businesses use word-of-mouth advertising and could provide you with an unexpected follow-up client.

Conclusion

We should all negotiate for higher rates in our careers as freelance business owners whenever possible, or we will find ourselves working for lower rates than we deserve. With a decent annual income, we can improve our work-life balance as well as spend newly-found free time with friends and family or focus on other productive tasks.

The market demand for freelance services is there, so build up the confidence, go ahead and make the most of it! I hope that you can take my advice to heart and apply it! Let me know if there are any open questions left or explanations to add.

\n","readingTime":"8 min read"},{"title":"4 Kinds of “Freemium” Software Products Your Small Business Needs","slug":"4-kinds-of-freemium-software-products-your-small-business-needs","creationDate":"2021-08-18","guestAuthor":"Vanessa Holwell","category":"Lifestyle","excerpt":"Let’s take a look at some free tools you should check out that will help you run a smoother, more reliable business","cover":"4-kinds-of-freemium-software-products-your-small-business-needs.jpg","tags":["Tools","Productivity","Hustle","Success"],"html":"

\"Tablet — Photo by PhotoMIX Company from Pexels

\n\n

Small-business owners know that in order to be successful, they need to turn a profit -- and that means making and sticking to a budget. There are a lot of software options for keeping your company afloat -- but what are the best free versions of these tools? How do you create efficiencies within your processes and make sure you’re operating at optimum capacity?

Let’s take a look at some free tools you should check out that will help you run a smoother, more reliable business:

1. Web conferencing apps

In the world of virtual meetings and global deals, you need to have a way to talk to folks across the world -- not just the ones who are close. There are a lot of free versions of online web conferencing software, but tools like Skype and Zoom are increasingly more useful as businesses continue to adopt them.

2. Data storage products

As a business exchanging money and goods, you will also need a place to store your electronic files and other important documents. Storage apps like Dropbox, Box, and Google Drive are all secure places to store invoices, records, and tax documents you’ll need at the end of the fiscal year. Some of these products have free versions and paid versions, each to different strengths. The paid version of Dropbox, for instance, allows you to store even more files.

3. Web development products

Any good business needs an effective website. Being a website developer like Markus might not be in your cards, but using the tools available to you can still give you a leg up on your competition. Website builders like WordPress, Wix, and Weebly are all available as free products that you can put your personal branding on and use as an online hub for your business. (And, if you want to invest money in custom CSS, hiring a freelance web developer is something you should consider doing, since you’re saving money on the other parts of your website).

4. Design tools

Every small-business owner needs a good marketing arm -- even if your marketing team consists of just you. That means you need the ability to design crisp, engaging imagery that will draw potential customers to your business. Free design tools like Paint.NET and Canva are great options if you want the sleek, stylish brand elements the professionals create. You can also always try out email marketing tools like MailChimp, which allows you to send branded newsletters to an audience to keep them engaged about your product.

When to get out the checkbook

No matter how successful you are at using the free versions of software, there will come a time when you need to invest money in products that will net you even greater achievements. For example, as your company grows, it’s essential to stay organized by using accounting and business management software like QuickBooks Enterprise, which grants you ERP functionality without the headaches you may be used to from tools like this. You can integrate across workflows, track and manage inventory, and take care of payroll all from an easy-to-use software app.

Sometimes, “freemium” apps don’t offer the features you want, and you’ll need to invest in the paid version. You may need better support, or more analytics capabilities. For instance, the free version of social media management tool Hootsuite only allows you to schedule one post per social account you have, and it doesn’t offer any analytics insights. This would be a case where you could invest in the paid version and it would benefit you immensely in the long run.

For more information about software, hiring freelance web developers, and other informative content, take a look around Markus' website!

\n Vanessa Holwell and her husband, Rick, created HiringSquad.net after losing their jobs during the financial crisis in 2008. The site is designed to be a forum for people to share advice on how to get hired, provide job search resources, and give you the tools you need to get the job you want.\n

\n","readingTime":"4 min read"},{"title":"How To Improve Your Hair Quality With the Natural and Environmentally Friendly “No Poo” Method","slug":"how-to-improve-your-hair-quality-with-the-natural-and-environmentally-friendly-no-poo-method","creationDate":"2021-01-14","category":"Lifestyle","excerpt":"Have you ever found yourself standing in the shampoo isle of a store, reading the contents of the bottles and thinking what the hell are all these ingredients?","cover":"how-to-improve-your-hair-quality-with-the-natural-and-environmentally-friendly-no-poo-method.jpg","tags":["Zero waste","Biohack","Alternative","Awareness"],"html":"

\n\n

Have you ever found yourself standing in the shampoo aisle of a store, reading the contents of a shampoo bottle, and thinking what the hell are all these ingredients? "Sodium Lauryl Sulfate", "Parabens", "Formaldehyde", "Isoprophyl alcohol", and "Triclosan" are just a few of the hard-to-spell chemical components that you can find in a common mass-produced shampoo of your choice.

After a bit of reading about these ingredients online at home, you are shocked by how many harmful ingredients you expose yourself to every time you step into the shower. Maybe you even took it a bit further and began to think: "Should I really be using this on my hair if I don’t even know what these ingredients are?"

My girlfriend and I were in this exact position about a year ago. We had been using popular shampoo brands over the years without really questioning what was in them. One day we decided to go on a mission to reduce waste from household products, and suddenly skin products became a big topic.

After our initial research on shampoo and discovering articles about how it actually damages the hair rather than creating shine or volume like it is promised in the commercials, it was a no-brainer that we needed a change.

Okay, but now what? Shampoo is a necessity and you can’t just go running around without washing your greasy hair. There must be some obvious solution!

We quickly found out that there’s actually a huge movement out there that promotes many great alternatives to the usual hair care products, and so we began to dive into the experiment:

All You Need Is Rye Flour!

Rye flour is a powerful and natural ingredient in your hair care routine. It is pH neutral and you can use it as a cleanser even if your scalp is sensitive. It can help to remove excess oil and dirt from your healthy hair. Before using the rye flour no poo method, I recommend going through the hair with a boar bristle brush about a hundred times to encourage the blood flow to the scalp and get rid of loose hair.

\n\n

Follow these three steps to use rye flour for natural hair care:

Prepare a small bowl, rye flour, and a teaspoon. Ideally, the bowl should have high edges so that you cannot spill the contents easily while mixing.
Mix rye flour with a bit of water until you have a thick paste. I have short hair and it works well with two teaspoons of rye flour, for longer hair like my girlfriend has, four teaspoons should be enough. It can be tricky to get the amount of water right, so add it slowly while stirring until the consistency is similar to a cream.
Massage the mixture into your wet hair, leave it in for a couple of minutes, then rinse. It is important to leave the mixture in your hair for a short amount of time so that your hair can benefit from it. Be thorough with the rinse afterward since the consistency is different from shampoo products and you don't want to end up with rye flour chunks in your hair.

Using the rye flour as a shampoo alternative felt natural right away and turned out to be a great choice. It gave us the impression that our hair was clean, it has a neutral smell and it doesn't ever feel dried out or brittle. If you miss the smell of freshly washed hair, you can opt in to use a small amount of essential oil when you prepare the paste.

There is a transition period of about 2 weeks - this varies from person to person - where the hair might look greasy because it has to re-learn to regulate itself and not rely on all the chemicals from the traditional shampoos anymore. I recommend brushing your hair every day during that phase to evenly distribute sebum and help your scalp with the regulation process. Once you are over that hump there are no more surprises, and it should quickly become a routine thing.

Pros & Cons of the No Poo Method

We have been washing our hair with rye flour for about a year now, and we love it! It's exactly what we were looking for:

Natural ingredients. Rye flour is a 100% natural ingredient that leaves out all the unhealthy chemical ingredients which get added to the mass-produced shampoos.
Zero plastic waste. Rye flour can either be bought in bulk at a health food store or at any supermarket in a paper bag which can easily be recycled. The planet will thank you.
No more frequent washing. As a useful side effect, your hair learns again how to regulate the amount of sebum that it produces. This means that you can go for multiple days without a hair wash, which saves you time and effort.
Save money. You can save quite a lot of money when you switch to washing your hair with rye flour. One 500 ml bottle of store-bought shampoo approximately costs 4,50 Euro ($5.00) while 1 kg (2 lbs) of organic rye flour costs 2.50 ($3.00) Euro. The savings definitely add up in the long run.
Better texture. In my opinion, rye flour also feels better than conventional shampoo since it has a bit of texture that works well for massaging it into your hair. Take a few extra minutes for yourself and enjoy!

Like with everything in life, you have to weigh in the pros against the cons:

It's messy. Depending on how well you mix the rye flour, some particles might get stuck in the drain.
Extra step. It is an extra effort in your busy life to prepare the rye flour mixture before the shower rather than simply using the ready-made commercial shampoo. Additionally, you will need to pay attention and wash out the bowl after every shower, otherwise, you will grow your own ecosystem in there.
More effort. Sometimes, flakes of rye flour stay left behind in your hair which you have to brush off.
Hard to replicate during travels. Keep in mind that you might not always have the opportunity to have rye flour with you on your travels when far from home.

Other Possible Approaches To Get Rid of Regular Shampoo

According to the official no poo movement, there are multiple alternatives to normal shampoo that could be worth a try. We tested the "baking soda & apple cider vinegar" mix method for about a month but disliked the smell as well as the resulting hair quality, which ended up dried out, tangly and brittle. There is also the "plain water only" alternative, where you don't use any kind of shampoo or natural products and just rely on water, but we haven't tried it out ourselves. I am sure that all the different methods can be effective, but it is greatly dependent on the lifestyle of a person and their hair type.

If all the classic no poo method approaches don't seem like the right fit for you, you can also take a look into shampoo bars. The used ingredients might be a bit better than the common hair care products because they are often sold in a paper wrap and are therefore better for the environment than plastic shampoo bottles.

Conclusion

It’s easy to get manipulated and convinced by the great marketing in which hair care companies invest millions of dollars every year. Don’t let yourself be fooled by the catchy slogans and promises on these hygiene products. The truth is that companies that put harsh chemicals into skincare products don't act in your best interest and it could even end up damaging your body in the long run. Dermatology experts claim that allergic reactions and skin conditions can originate from these products. Now is the right time to break with old habits and to start your no poo lifestyle!

Listen to your body, find alternative ways of using pure ingredients that come straight from nature in your everyday life and you will be amazed by the results. After a year of living a shampoo free life, my hair health is absolutely great and I don't feel the need to ever go back.

What about you? Have you ever tried using rye flour to wash your hair before? How was your experience like?

Thank you for reading!

Helpful resources

\n","readingTime":"8 min read"},{"title":"How To Win Your First Clients as a Freelance Web Developer","slug":"how-to-win-your-first-clients-as-a-freelance-web-developer","creationDate":"2021-01-06","category":"Programming","excerpt":"It is certainly a challenging adventure to switch from the secure and predictable path as a member of a company at a full time job to running your own business with all of its complexities and requirements.","cover":"how-to-win-your-first-clients-as-freelance-web-developer.jpg","tags":["Web development","Productivity","Success","Personal development","Hustle"],"html":"

\"People — \n This special moment when you finally seal the deal! - Photo by Author\n

\n\n

After working as an employee for different companies during the last four years, I am finally doing it and becoming my own boss!

It is certainly a challenging adventure to switch from the secure and predictable path as a member of a company working at a full-time job to running your own business with all of its complexities and requirements.

As a newbie web development freelancer, you will often have to ask yourself this one most daunting question in the beginning:

How Do I Even Find a Promising Client if No One Knows About Me?

Although I didn't start as a freelancer officially until January 2021, I was already able to establish myself on the market and win multiple international clients two months prior my start as a sole proprietor. As the cherry on top of this, all these projects were built on a modern tech stack and included fun and challenging tasks throughout.

Instead of relying on a single source for fresh freelance project leads, I tried out various possible ways of finding new work opportunities, some of which work efficiently and others that don't. As a successful freelance web developer, it is especially important to spend most of the time doing actual paid work and to avoid unpaid side tasks like looking for a new client.

In this article, I want to show you what I learned so far about promising ways to find potential clients for your freelance web development business.

Talk to Your Network of Peers, Friends and Family

Before searching for project offers in any other way, try to leverage your network and reach out to your connections. Interesting leads and project offers that you receive through word-of-mouth have one big advantage: the prospective clients are introduced to you through social proof and are more likely to consider you than if you had contacted them through cold outreach.

Always ask the client for follow-up projects or referrals to other potential clients to keep the flow of projects going whenever you finish a project. The social proof of getting recommended can work in your favor again. Additionally, don't forget to demand a testimonial from a happy client that you can put up on your website to improve your credibility and market value.

Receive Inbound Offers From Recruiters on LinkedIn

You might think like me that social media is a waste of time, but there is one exception: LinkedIn works like a charm for potential offers and work-related connections. You can create a good profile for yourself, put the "open for work" label on it, then lean back and wait for the offers to come rolling in to your message inbox. There were certain days where I got five offers in 24 hours, and I am not even updating my profile or posting much content for improved visibility.

Unfortunately, a lot of times recruiters will just spam their standard phrases and send you offers for permanent positions. It might be annoying to you and your first intuition is to not respond to them, but I highly recommend you to do so! I usually thank them for their nice offer and tell them that freelancers are only interested in project-based offers, but if they ever have something that could be relevant to me, they should get back at me. Because as a matter of fact, most recruiters and software agencies have both jobs and freelance projects to offer. It happened more than once that the recruiter sent me a different offer or invited me to sign up for a freelance developer talent pool at a company. You can also shortcut the process and go to the company website of the recruiter, check for project offers that are relevant, and bookmark them for later use.

Get Approved on Curated Freelancing Platforms

There are a lot of them out there, and it's not easy to separate the good ones from the bad ones, but two of the freelance platforms that I use most are ExpertLead and Gun.io.\nExpertlead requires an initial get-to-know interview, a short project showcase, and a coding interview with a peer freelancer to become a member. On Gun.io, you will have to set up a nice profile, including a short video introduction, and pass a test of three different algorithm coding challenges. After you get accepted, both can deliver interesting and relevant projects on a regular basis for you.

One of the most well-known freelance platform that I haven't applied to yet is Toptal. Their time-consuming multi-step process and the strict vetting of allowing "only 3% of top talent" in - according to their marketing - kept me from trying to get accepted so far. Still, Toptal has a very good reputation in the industry and will be able to provide you with a steady stream of high-value clients.

Browse Job Boards the Old School Way

If you decide to search for freelancer offers on job platforms, you have the advantage that you can cut out the middleman in a lot of cases. This could be a recruiter cashing in on a successful hire or platform fees like Upwork or Fiverr have, which might result in a lower hourly rate.

The job boards that I found especially helpful in regard to finding freelance offers were Glassdoor, We Work Remotely, RemoteTechJobs, LinkedIn and AngelList.

One issue that I found with a lot of job platforms is that they are lacking useful filtering options to easily discover project-based work. Additionally, it is hard to tell from a lot of job descriptions if they are supposed to be for a person looking for a permanent position or a freelance contract.

Use Lesser-Known Ways of Finding Qualified Leads

It can be a hit or miss, but holding a presentation at a meetup or conference can lead to unexpected offers and connections. Especially after the presentation of the talk, it can be the perfect opportunity to mingle with the crowd and to get into contact with prospective clients who saw you on stage.

Another way to find potential clients is to simply search on a messaging services like Twitter for a term like "freelancer wanted", and you will get a long list of past posts by users.

The same trick works for Facebook: there is a huge selection of worldwide Facebook groups for job seekers and freelancers. Try to keep away from the ones with large numbers of members though, because they tend to get spammed with low-quality content and they have too much international competition.

If you don't want to lift a finger to find freelance jobs, simply lean back and enjoy the service of a website like RemoteLeads, which scrapes thousands of sources and delivers the best matching projects right into your mailbox. It works like a charm. If you know of any similar services, let me know.

Another rather underground source for projects is the website HN Hiring, which aggregates all posts from the monthly Hacker News thread "Ask HN: Freelancer? Seeking freelancer?" into a useful listicle.

If you like to work with startups and smaller businesses, you can take a look at job-related groups on Indie Hackers or join Slack groups for freelancers.

In case you are passionate about a certain programming language or software tool, some of them have Discord channels which have a distinct #jobs channel for offers.

You have to get a bit creative with your thinking but there are a myriad of ways to find business owners who desperately need your services.

So How Did I Find My First Clients?

With my four-plus years of experience in web development, code contributions in well-known open source projects, and technical articles released on big web development publications, I would say that many recruiters and HR departments of companies would be interested to get me on board.

Since I made sure to collect all project offers in bookmarks, I can provide you with an exact breakdown of the numbers and how the customer acquisition funnel worked in my case.

Between October 2020 and January 2021, I spent endless hours searching for clients:

I bookmarked ~65 different websites as sources for finding freelance offers.
I applied to ~45 projects found on websites like HN Hiring, We Work Remotely, Computer Futures, Freelancermap, Gun.io, GitHub Jobs, LinkedIn, and many more.
I received a response from approximately 20 projects regarding a cooperation.
I had a total of 11 project interviews through remote calls.
I ended up with four international customers which will provide me with projects regularly.

Although I have such a large amount of different websites and sources for finding clients, in the end, it turned out that:

I found two of my clients through the Svelte Discord #jobs channel
One client found me through the Austrian job center database and approached me per mail
Another one re-engaged me due to a Issuehunt bounty that I solved a while ago.

Wrapping Up

No matter how good your skills, your portfolio or your references are, there will be a lot of unanswered emails, turned-down offers and disappointing client decisions until you will be able to secure your first customer. After all, it's a numbers game, and landing clients without prior connections can be hard. But it doesn't have to be.

When you start looking for your first project, use the great variety of sources and tools out there, from word-of-mouth advertising to inbound project newsletters. Try to think out-of-the-box and you might discover new ideas about finding businesses in need. My experience was that there are a huge amount of freelance web development projects out there; they are just hard to find.

Make sure to set useful bookmarks on websites, with the correct filters applied, to save you time. You can find a sub-selection of websites that I bookmarked with freelance filters enabled throughout the article.

With the right steps, you will find a company to work for in no time. Always remember: one long-term client can be enough to bring in enough money for the whole year and make you a successful freelancer!

\n","readingTime":"9 min read"},{"title":"Reclaim Your Data Privacy From Big Tech With the Best Privacy-Focused Alternatives","slug":"reclaim-your-data-privacy-from-big-tech-with-the-best-privacy-focused-alternatives","creationDate":"2020-11-08","category":"Lifestyle","excerpt":"Regular scandals of data leaks by big corporate companies and concerns about misuse of personal information through illegal data collection practices leads to internet users switching away from mainstream products.","cover":"reclaim-your-data-privacy-with-these-privacy-focused-alternatives.jpeg","tags":["Data privacy","Open source","Tools","Awareness"],"html":"

\"Man — \n Be careful, it's a trap! - Photo by Author\n

\n\n

The frequent data leak scandals caused by big corporate companies is a real reason to be concerned about misuse of personal information through illegal (and legal!) data collection practices. These scandals are leading users away from using mainstream products to finding safer alternatives.

Have you ever worried about your data privacy? Are you wondering if there are any alternatives to the Big Tech services out there?

Luckily there are great alternatives available that can allow you to take your data privacy back into your own hands. Although there are many, finding viable replacements to mitigate your privacy risk without much hassle is a time-consuming effort. I will explain how I switched different services myself so you don't have to start your research from scratch.

Why should you care about online privacy?

The most obvious reason is clearly to avoid being tracked and to keep your personal information safe.

Additionally, you probably don't want to maintain and encourage the status quo that only a few tech companies have a monopoly over the entire software market. It is much more rewarding to support multiple, smaller companies with ethical practices in mind and to help them flourish.

Supporting smaller and more underdog tools has another useful advantage: You will more likely be heard whe you request a new feature. Many of these are also open source, which means that the program has its source code available to be examined by the public. This is usually a good sign that the company is transparent and trustworthy.

Privacy hardliners will always find something in recommendations like the ones below to critique, and many will even know how you can be even more secure on the web. But the choices below include stable, mature, and free-to-use services that I’ve found to offer an acceptable trade-off between user experience, privacy, and convenience.

Google Search alternatives

This is probably the hardest switch you will have to make - at least it was for me. The search results and meta information (store opening times, movie ratings, weather forecasts, and more) that you receive through Google Search are often unbeatable.

I tried privacy-friendly search engines like DuckDuckGo, Qwant and Ecosia for a while, but they often didn't give me the results that I was looking for. Especially when querying for programming-related search terms, I often found myself receiving unrelated search results. When you are getting paid per hour as a freelancer, that is impractical as the additional time required to search more precisely can add up quickly.

Fortunately, I found out about StartPage which I have been using for about six months now. According to the privacy policy of StartPage this is how they operate: "When you search, your query is automatically stripped of unnecessary metadata including your IP address and other identifying information. We send the anonymized search query to Google and return the search results to you. We don’t log your searches."

So when using StartPage, you basically use the capability of great search results from Google without getting tracked. I don't really like the fact that I am still using Google under the hood, but this is the best solution available for me for now as I am receiving good quality search results again. I sometimes do still miss the meta results that Google provides like store opening times, movie ratings and weather forecasts, but usually, it just requires an additional click on a search result in StartPage, which is manageable.

My recommendation: If you need to dig deep into a certain topic, use StartPage to get the best results or fallback to Google Search - otherwise, you can get great results by using Qwant as your default search engine as well.

Google Chrome alternatives

According to statcounter, Google Chrome is used by approximately 66% of the population worldwide as of October 2020! Although I don't disagree with the well-deserved popularity of the browser due to constant and innovative updates by Google, it's always scary when a corporate company has such a monopoly and lack of competition in a business sector as Google Chrome does.

If you look for a privacy-focused browser alternative, I can recommend Brave Web Browser. Brave has a built-in ad blocker, automatic HTTPS upgrade, and it blocks autoplay, and you can support content creators through its own built-in BAT cryptocurrency. When I decided I would like to switch to Brave, there were some issues with syncing extensions and bookmarks across devices which kept me from using it for a while. Since then, they have fixed these issues and now it's a flawless and enjoyable experience.

Another great alternative would be Mozilla Firefox, I personally don't use it because I prefer the look and feel of a Chromium-based browser.

If you decide for a browser that comes without a built-in tracker and ad blocker, make sure to install a browser extension like uBlock Origin to do the blocking for you.

Google Maps alternatives

Your location data is very precious and you shouldn't have it exposed and possibly let it get into the wrong people's hands.

Getting rid of Google Maps is really hard and it took a lot of research to find reasonable alternatives. Most of the time, similar navigation applications only support some forms of transportation, but not all of them. There are only a few privacy-focused options that support bicycle, public transportation and on-the-go navigation, which are relevant to me. Finally, I ended up using a combination of multiple services.

For all means of transportation, HERE WeGo is a solid choice for desktop and phone. It was originally developed by Nokia and is now owned by a handful of German automotive companies, which does worry me a bit, but I haven't found any bad press on it so far. Alternatively, I also liked Sygic Maps. The interface looks very user-friendly and displays places of interest in your area.

For commuting per bicycle - which is my main form of transportation - I am using Bikemap on my desktop and phone. Since the application is specialized on bike navigation, it gives me the fastest routes.

Other alternatives for desktop that I tried and might work for you include Qwant Maps, OpenStreetMap, OpenRouteService, and BenMaps.

On your phone, you could take a look at apps like OsmAnd and Transportr.

Microsoft Office Suite alternatives

Switching from Microsoft Office Suite to LibreOffice is quite easy in my opinion. As long as you don't need any fancy advanced functionality, you should be fine.

LibreOffice works with the .odt file extension by default - but don't worry, it also has compatibility with .docx files in case you are opening a file created by a Microsoft Office user. I have been LibreOffice Writer and LibreOffice Calc on a daily basis for multiple years and don't feel limited in any way.

Google Gmail alternatives

Using another service than Gmail shouldn't be that hard. I personally never liked the user interface of Gmail and I guess I am not the only one.

As a solid alternative, Thunderbird is a reliable and mature email client that has worked flawlessly for me for a long time. Unfortunately, there is no app for Android or iOS, so I am using Spark for that on my phone.

If both email clients don't seem like the optimal choice for you, you could also take a look into ProtonMail, which is an end-to-end encrypted email service located in Switzerland and therefore adheres to strict privacy laws.

Services that I still want to switch

Since the needs of the modern world require so many different software tools, I am also still using some services from big corporations that don't have data protection high up on their priority list.

Google Calendar is deeply embedded in my everyday life. With a total of 8 different calendars and ongoing collaboration with multiple other people on calendar entries, it is very hard to find a worthy replacement for this application.

I also wasn't able to find any useful YouTube alternatives that worked well. Other video platforms like Vimeo or BitChute just can't compete with the amount of content that you can find and enjoy on YouTube. If you know a real competitor let me know; I would love to try it.

My personal website currently uses Google Analytics simply because it was fast to set up. Shame on me. There are plenty of viable privacy-focused alternatives like Matomo, Plausible or Umami out there that I plan on investigating at some point.

Facebook had its fair share of bad press in the past like the Cambridge Analytica data scandal, for example. Notorious for its invasion of privacy and data misuse, I still can't let it go due to its amazing groups and events features.

I would love to switch from WhatsApp to a more secure chat application like Signal or Telegram entirely, but that would require every one of my friends and family to use these platforms too, which is not the case. Improving your data privacy is usually inconvenient, so I don't expect that to happen anytime soon.

Conclusion

Moving away from popular and well-established services by the likes of Google and Microsoft is very difficult. The ease of use and the quality of their applications are simply superior to most other choices out there. Since they always come with a free tier, we are paying with our user data at the expense of our individual privacy.

With plenty of privacy-focused tools and alternatives like LibreOffice, Thunderbird, or StartPage on the market, you can take a step in the right direction of combating tech monoculture and increasing your user privacy.

If you liked the small selection of tools that I mentioned above, you can find a more comprehensive list of carefully picked services on my dedicated recommendations page. For a huge list of alternatives, you can also check PrivacyTools or degoogle, which continuously update their lists when company acquisitions occur or privacy policies change. I am sure you can find great services that you weren't aware of before to expand your current choice of software tools.

Thank you for reading! I hope this article has been helpful to you, let me know if there are any open questions left or explanations to add.

Helpful resources

\n","readingTime":"9 min read"},{"title":"8 Common Web Development Mistakes and How to Avoid Them","slug":"8-common-web-development-mistakes-and-how-to-avoid-them","creationDate":"2020-10-19","category":"Programming","excerpt":"To save you valuable time on your web development projects in the future, make sure to avoid these eight common web development mistakes.","cover":"8-common-web-development-mistakes-and-how-to-avoid-them.jpeg","tags":["Web development","Beginners","Code quality"],"html":"

\"Clean — \n Admit it, you make some of these mistakes too. - Photo by Author\n

\n\n

I recently joined a small startup where I helped create and deliver a web application for an important clinical study which focuses on COVID-19. The only problem was: the deadline for the project was in two weeks time! That alone already sounded scary and stressful, but I decided to accept the challenge!

On top of the looming deadline, the junior developer who was mainly responsible for leading the project, was understandably overwhelmed with the enormous workload. As a result, the code output was rushed and was a complete mess. The scope of the project was simply unrealistic for a team of two developers to manage in such a short time span.

In the end, the minimal viable product was deployed and working with minor hiccups, but it now requires a major overhaul and refactoring effort due to the messy way the code was written. It’s a daunting task that will require a lot of time but won’t lead to any additional revenue for the company.

This could have easily been avoided from the beginning if the project had been set up correctly and used some best practices.

After working on many diverse projects, I have created my own list of “must-haves” to ensure a successful project and great developer experience.

To save you valuable time on your web development projects in the future, make sure to avoid these eight common web development mistakes:

1. Not enabling code quality tools right away

This should always be one of the first tasks on your to-do list when you begin working on a new project. Make sure code quality tools are in place based on the project’s needs, you will be grateful for it later.

When I joined the aforementioned project, nothing was set up and the code was inconsistent with mixed up usage of quotes, missing .catch() blocks and various formatting issues.

ESLint will save you from producing errors like these, which could have been prevented in the first place. After running a lint script on the project for the first time with an opinionated configuration, there were 200+ warnings and errors waiting to be fixed. Fun.

I know, I know, it can be hard to make the configuration work exactly as you need it to. Additionally, the project owner wants to see actual results and doesn’t care about you spending precious time configuring development tools. But it is such a worthy time investment in the long run and shouldn’t be delayed. In the end it will make you even more productive when you have a project that is clean and error free, which is beneficial for everyone.

I recommend using all or some of these packages for your configuration depending on your needs:

eslint or @typescript-eslint for a base rule setup
eslint-plugin-import for clean and ordered imports
eslint-plugin-jest for writing better and stricter unit tests
eslint-plugin-node for backend development and supported node version feature checks
eslint-plugin-promise for avoiding missing .catch() blocks and other bad practices when working with asynchronous code
eslint-plugin-jsx-a11y for writing accessible code in case you use React
eslint-plugin-unicorn for miscellaneous helpful rules

On top of the recommended configs that give you a base rule setup, I add additional rules like: eqeqeq, prefer-template, prefer-const and no-var, which are not included in the recommended config out of the box.

Apart from avoiding nasty bugs and writing bad code, you can also gain an incredible amount of knowledge by simply following lint suggestions and looking through the ESLint documentation on why a specific rule exists and why it is necessary.

On the other hand, Prettier will make sure that the whole team conforms to the same stylistic code formatting guidelines and the achieved readability will save you time as well. The default configuration settings provided by Prettier out of the box are great, so I usually only have to do minor tweaks. This is a minimal .prettierrc.json configuration file that I tend to start with:

{\n  \"printWidth\": 100, // default is 80\n  \"singleQuote\": true, // default is false\n  \"trailingComma\": \"all\" // default is \"es5\"\n}

After setting up ESLint and Prettier, you have a solid baseline of code quality tools in place which will greatly improve your developer experience.

2. Using outdated dependencies

Various packages of your project are multiple major versions behind. The package.json dependencies haven't been upgraded for more than a year. You could delay upgrading and hope you never have to. But believe me, you will as soon as support for that old Node.js version drops or when there are new code vulnerabilities discovered in the old dependencies that you are using. Additionally, you would love to use the latest features of a library, but you can't because you are stuck with an old dependency version. Sound familiar?

Whenever I create a new project or join an existing one, one of the first things I do is check the package.json for outdated dependencies. Make sure that the dependencies are at least somewhat up to date to have potential bugs and security vulnerabilities in your 3rd party libraries fixed. For existing projects, ask the main responsible developer if there is a good reason why the dependencies are not up to date.

I personally create a dedicated package.md file in projects that I work on that looks like this:

# Dependency upgrade issues\n\n## "postcss-cli": "^7.1.2" \nMajor version 8 requires postcss as peer dependency, leads to breakage when running development \n## "sapper": "0.28.0" \n

Keep locked until missing CSS issues are fixed in v0.28.1

This way every collaborator of the project will be informed about known dependency upgrade issues.

Always keep this file up to date when you run into dependency issues or resolve some. Ideally the file stays empty and everything can be upgraded as expected.

3. Writing variable names and comments in a language other than English

Easy rule of thumb: if you or others reading your code need to spin up "Google Translate" to understand what is happening in the code, it is a waste of precious development time. Translating code should not be a part of being a web developer.

In the MVP project, the entities that were coming from MongoDB through a Node.js backend had some fields named in German and others in English while the frontend was mostly using English. This required a lot of unnecessary mapping from one naming convention to the other. It was not possible to use object shorthand and it was easy to forget which field is which. Additionally, any developer that might join the team that is not a German native speaker would have problems understanding the usage of each field.

Stick to keeping the whole code base in English. Apart from variable names looking weird in other languages like German, you exclude international developers from understanding what is going on in the code. Whenever you need to have words displayed in another language than English in your user interface, you can use libraries like Format.js to handle internationalization needs.

4. Different naming conventions throughout the whole project

Try to avoid mixing up different naming conventions for HTML, CSS and JavaScript code. Don't use kebab-case, snake_case and camelCase all over the code base or you will get confused quickly and lose productivity.

Learn about the different naming conventions and why they exist. I recommend you stick to the coding conventions of the language that you are using. Native JavaScript methods like .toLowerCase() are written in camelCase, so why would you write your variables with any different casing? While JavaScript uses camelCase, remember to use kebab-case for your HTML markup and CSS styles.

5. Using meaningless variable names

I am sure you have seen code similar to this before:

const x = 'Gabriel';\n\nconst stuff = x.map((y) => 'Hello ' + y);

What values are stored here? Is Gabriel the first name or last name of a person? What is x that gets mapped over? Is it even an array? What does the variable stuff hold?

You should not have to waste valuable cognitive energy on deciphering what you and others wrote, but focus on bug fixes and new feature implementations instead.

You might think that it is cool to write short and cryptic variable names and expressions, but it's not. Coding is not about writing the least amount of characters but about producing business logic that is easy to understand, valuable and doesn't need a refactoring right after writing it.

Let's take a look at a good example:

// The variable name `firstName` clearly shows the intent of the stored value\n\nconst firstName = 'Gabriel';
\n// The variable students is in plural, so it is probably an array. The value student is most likely an object that we are mapping over. We seem to collect greetings of students here as a result.
\nconst greetings = students.map((student) => 'Hello ' + student.firstName + '!');

Here we can assume a lot more based on good variable naming and clarity which means lesser cognitive overhead for the developer.

Your future self and your co-workers will be thankful when they still understand what each line of code is doing - even a year later.

6. Leaving console.logs and to-dos scattered all over the code

This is bad for the developer and user experience at the same time.

console.log('Hello from indexing function');\n\nconsole.log('Result', result.data);
\n// TODO: Why does this even work?
\n// TODO: Add error handling

It can be embarrassing and unprofessional to leave console.log() messages in the dev tools for every user to read. On the developer side, it can be distracting and discouraging to find to-dos of what needs to be changed without detailed information and console.log() which might be needed or not.

I recommend using the no-console ESLint rule and to configure it as needed. I tend to mark console.log() as an error and use it in conjunction with lint-staged pre-commit hooks to disallow commits which fail on lint mistakes. When you want to keep logging information you could either use console.info() to show the specific intent of requiring outputting information at that point.

If you cannot give up your console logs in the code, you could opt-in for a plugin like babel-plugin-transform-remove-console or terser-webpack-plugin to strip out console messages for you based on the environment.

To-dos are preferably put into separate issues on your repository management tool. Make sure to provide enough information for another developer to start working on it without having to sync up with you first. Additionally, when putting to-dos into issues, every developer will be aware of them rather than stumbling over random to-do comments in the code base.

7. Mixing up async/await, promises and callback syntax

Producing mistakes in asynchronous code can lead to bugs which are very hard to detect, so make sure to stick to one paradigm at a time.

Let's take a look at a real-world example from the MVP project:

export const saveLogAuthToken = async (token) => {\n  const jwtToken = jwt.verify(token, JWT_SECRET);\n\n  if (!jwtToken) return false;
\n  const logoutToken = new logAuthToken({ token, expires: jwtToken.exp });
\n  await logoutToken.save().catch((err) => {\n    console.log(err);\n  });
\n  return true;\n};

Even for me with more than 4 years of professional experience, I have a hard time figuring out how the code would flow here based on different outcomes.

The code example above shows missing knowledge about how async/await works.\nThe code starts with usages of async/await which is great for writing readable and concise code, but then it becomes unclear:

When does the function return true?
What does it return when we run into the .catch() block of the logoutToken.save() method?

With a few simple changes, we can drastically improve the code flow:

The code should be wrapped in a try/catch block to avoid the well-known UnhandledPromiseRejectionWarning message in Node.js
Remove the .catch() block on logoutToken.save() since errors are caught in the catch statement of try/catch
Stick to either using async/await or the Promises syntax. It could also be a good idea to consider not only returning false when jwt.verify() fails, but to explicitly throw an error instead.

These code design mistakes can be deadly - especially when there are no tests written for this piece of code.

8. No unit or end-to-end tests for complex business logic

This is so common that it is a running joke amongst the web development community. I still remember working at my first job and there were zero unit tests written for the project. When I asked about it, everyone said: "It would be great to have test coverage, but there is not enough time."

Since unit or end-to-end tests don't bring added value for the customer, they are often skipped and neglected. A common phrase is: "We will do it in the future when we have time," and then guess what? It never happens.

At the second company that I worked for, there were also almost no unit tests written for the front-end part of the project. By then, I was more experienced as a developer and motivated to do my team and myself a favor, so I started to implement unit tests here and there whenever a task was finished earlier than expected.

For one task that I had to work on, there were so many potential edge cases, so I started using "Test-driven development" (TDD) and wrote the tests before the actual code. Although I had to write the unit tests in addition to the business logic, I ended up finishing the issue around 30% faster due to having the "safety belt" of the unit tests catching all potential errors and edge cases. The test coverage will prevent you from looking for a bug in the wrong place as well.

Bottom line: write unit tests when possible, especially for complex snippets of code and use end-to-end tests at least for the critical parts of an application.

Wrapping Up

Although I understand that time pressure alone can be the reason for some developers to throw code quality standards overboard, I highly advise pushing through while still doing your best at delivering clean code.

The minimal amount of time that you save just by duplicating code snippets and hacking away until it works will then start to pile up as technical debt, and it will take you even longer to fix afterward.

It will not always be possible to write the cleanest code, but don't let that discourage you. After all, we are just human beings and make mistakes.

Have you made any of these or similar mistakes before? Leave a comment below!

Helpful resources

The 10 Most Common Mistakes Web Developers Make: A Tutorial for Developers

\n","readingTime":"13 min read"},{"title":"Why You Should Start Contributing to Open Source Software Right Now","slug":"why-you-should-start-contributing-to-open-source-software-right-now","creationDate":"2020-09-10","category":"Programming","excerpt":"The open source movement is growing quickly and you should become a part of it too.","cover":"work-desk-with-various-items.png","tags":["Open source","Web development","GitHub","Community","Beginners"],"html":"

\"Work — \n I know you want to. - Photo by Author\n

\n\n

\n UPDATE: This article has been translated to Korean and published to Medium by a happy reader from the community!\n

\n\n

You might not be aware of it, but you use some form of open source software every single day.

Every time you start an app on your phone or launch a program on your computer, you profit from the code that someone has written for free.

WordPress, the largest and most well-known content management system, is used by 38% of all websites worldwide. It is open source and free to use.

Linux is powering 30% of all websites globally. It is open source and free to use.

These are just two examples out of a myriad of projects which were created to solve a problem or serve a use case.

These projects became highly popular as communities formed around them. They tried to deliver the best product possible in terms of user experience, stability, security, and more.

But not only the usage of open source projects is rising. The participation in the open source movement as a whole is growing as well.

According to the State of the Octoverse report by GitHub, out of more than 40 million developers on GitHub, 10 million new users joined in 2019 alone!

The open source movement is growing quickly and you should become a part of it too.

Whenever I see a new update for my operating system or new software releases of tools that I actively use every day, it makes me smile. I enjoy the thought of products continuously getting better and more sophisticated.

Do you feel the same way?

Here is why I am convinced that you should start contributing to open source software right now.

You can learn a lot from the source code

Since the source code in open source projects is available for anyone to read, that means that a large number of developers can battle-test and improve a project.

Developers point out privacy or security issues, update the documentation, and improve source code to the newest web development standards all the time.

Especially when you go through the code of projects with hundreds or even thousands of contributors, you can gain immense knowledge about best practices and code quality.

Not only is reviewing the code itself a learning experience, but also the structure and folder hierarchy in larger projects is well thought-out and works well in the long run.

You will work with the smartest people

Compared to a company that has a limited number of employees to work on feature requests and bug fixes, you have the brightest minds working in open source development.

In my imagination, I see it as swarm intelligence, which can solve every problem that arises.

The more people that join a community, the better a project can scale. It can be like a buzzing beehive, where you could have pull requests to a codebase from users all around the world 24/7, non-stop.

A good example is the well-known code editor Visual Studio Code which got very popular with a total of 1,200+ contributors on GitHub.

You won't see a single day without any pull requests on GitHub and the monthly release cycles always bring out new amazing features.

When you participate in a project and submit a pull request, you will receive extremely helpful feedback from highly experienced maintainers. You can then implement that feedback to grow as a developer.

Your own code could be used globally

Since some software development projects are used by millions of users daily, it can be very rewarding to see your own code helping so many people.

I wrote lint rules for the JavaScript projects called eslint-plugin-unicorn and svelte. It's a great feeling knowing that my pull request will improve the code quality of many developers all around the world.

From my personal experience, it is also motivating to get positive feedback in the form of a thankful comment.

Open source projects are inclusive

A great advantage of free open source software is that no one is excluded from using the product because they can't afford it.

While some open source projects cost money to use, most do not.

Also, when you're contributing to a project on GitHub, many of the bigger repositories have a code of conduct. These make sure that every contributor feels welcome and accepted in a project.

Projects are starting to become sustainable

The main goal of a company is to become profitable - which often leads to questionable decisions. But open source software focuses on solving the needs of its users as the highest priority.

Most projects are entirely volunteer-supported, and project maintainers will unfortunately never see any financial reward. But there are great ways nowadays that you can help make these projects sustainable.

With websites like OpenCollective or GitHub Sponsors, you can donate to speed up the development of projects that you like.

Personally, I think that it would be great if every company donated at least a small sum to open source software projects because they profit from these tools daily. Such support would reduce the stress for a lot of maintainers and some could even take up the work full-time.

How to contribute to open source

Contributing to open source development sounds more scary than it really is. There are plenty of projects out there on GitHub which encourage first time contributors and newbies to take action by labeling issues as "Good first issue", "Beginner friendly" or "Help wanted".

Don't know where to start?

Ask yourself: what is an application that you enjoy using every day and where you would want to give back?

It can be as simple as searching for that application on GitHub and looking through the open issues.

It doesn't have to be a code contribution, either - you can also help out by creating a pull request to update the documentation, fix typos that you find, or by doing a thorough code review.

The README.md file of a project usually includes a passage of how to contribute.

If you decide to contribute to a project, I recommend reading my article about Contributing To Open Source Projects The Right Way. It's a detailed step-by-step guide about the contribution workflow.

I wrote it to be very beginner friendly, so don't worry about becoming overwhelmed. You will be able to find your first project and submit a contribution in no time!

Wrapping up

It always impressed me that everyone in the world can join an open source software project and work on it.

And open source software only works as a collaborative effort. The goal is to produce the best product or service without compromising on important factors like stability, security, or user privacy.

I hope you understand the importance of open source software and that you value its benefits. No matter what your reasons are for giving back to the open source community, just know that you are highly appreciated!

Many projects can only thrive with support and contributions from developers like you.

Helpful resources

\n","readingTime":"7 min read"},{"title":"10 Reasons Why I Recommend Svelte To Every New Web Developer","slug":"10-reasons-why-i-recommend-svelte-to-every-new-web-developer","creationDate":"2020-08-31","category":"Programming","excerpt":"Although the initial release of Svelte was back in November 2016, it's still more of an underdog amongst the JavaScript front end frameworks and just recently started to get its well deserved attention by the community.","cover":"svelte-logo-on-brickwall-background.jpg","tags":["Svelte","JavaScript frameworks","Web development","Beginners"],"html":"

\n $\"Svelte$ \n

\n Svelte will give you developer superpowers! - Photo by Author\n

\n\n\n

\n Syntax highlighting and formatting for code blocks might not be 100% correct due to experimental Svelte support.\n

\n\n

Although the initial release of Svelte was back in November 2016, it's still more of an underdog amongst the JavaScript front end frameworks and just recently started to get its well deserved attention by the community.

After working with various JavaScript frameworks over the years including Angular, React and Vue.js, I think I have a good overall impression about how writing code can be enjoyable and how it can be frustrating.

A couple of years ago, writing code with jQuery felt like a revelation when coming from pure JavaScript. Then at my first job, I started working with Angular 2, and all of a sudden jQuery felt like a drag. Now, React is the cool kid on the block and Angular feels so complicated in comparison. You can probably see where this is going!

For me, Svelte is the next evolutionary step in the rapidly changing ecosystem of JavaScript frameworks.\nIt feels so easy to write the Svelte way and you can tell that its creator Rich Harris was tired of all the annoying abstractions and the necessary boilerplate code that the existing frameworks require you to learn.

Now you might be asking yourself the question:

What makes Svelte different?

You might have heard about Svelte appearing here and there in articles like A RealWorld Comparison of Front-End Frameworks and developer surveys like the State of JS Survey as one of the best ranking frameworks when it comes to bundle size, performance, lines of code and most important developer satisfaction.

Compared to the popular React and Vue.js libraries, which do the bulk work during runtime and are using a technique called "virtual DOM diffing" for detecting changes, Svelte is compiled into framework-less vanilla JavaScript as a build step and can therefore benefit from a lot of code optimizations.

Naturally hesitant, I dismissed Svelte at first as "just another JavaScript framework" and didn't bother looking into it. After hearing about it a second time, I wondered: "Is Svelte just hyped or could it really be that good?" I decided to battle-test it and use it on a personal project of mine.

Now after a few months, I can give you a definitive answer: Svelte is simple, powerful, and elegant — and you will love it!

Without further ado, these are the top ten reasons why I recommend Svelte to every new web developer who is starting to learn programming:

1. Svelte components are easy to understand

If you have never seen the Svelte syntax before, this is how a simple example would look like:

<script>\n  let role = 'developer';\n</script>\n\n<h1>Hello, {role}!</h1>
\n<p>I hope you are having a good day!</p>
\n<style>\n  h1 {\n    color: green;\n  }
\n  p {\n    font-style: italic;\n  }\n</style>

Compared to other frontend frameworks which introduce a lot of abstract concepts that take a while to learn and understand, it's really refreshing to see that Svelte just uses plain old HTML, CSS and JavaScript side by side. You can see and easily recognize what is happening here with its beginner-friendly syntax.

2. Simply write concise code

As you can see in the code example above, the business logic that you write is simple and easily readable at the same time. After all, the less code you write, the fewer bugs it can have, right?

Rich Harris, the genius creator of Svelte provided some good comparisons with React and Vue.js in his article called "Write less code". According to his check up on characters needed to write the logic for a simple addition of two numbers, a React component is typically around 40% larger than its Svelte equivalent!

3. Reactivity with labeled statements

Whenever you want your variable values to update and recompute based on other variables, you can use reactive declarations. Just put a dollar sign in front of the variable that you want to be reactive and you're good to go!

<script>\n  let count = 0;\n  $: doubled = count * 2;\n\n  function handleClick() {\n    count += 1;\n  }\n</script>
\n<button on:click="{handleClick}">Click me!</button>
\n<p>{count} doubled is {doubled}</p>

Any time the button is clicked, count will increase by 1 and doubled will know that the value of count changed and update accordingly. It's really fascinating to think in terms of reactivity and it feels good to write.

4. Easy global state management out of the box

No need for any complicated third-party state management tools like Redux or Vuex.

You just define a variable as a writable/readable store:

// stores.js\nimport { writable } from 'svelte/store';\n\nexport const isDev = writable(NODE_ENV === 'development');

And use it in any .svelte file prefixed with a $ sign.

<!-- Main.svelte -->\n<script>\n  import { isDev } from '../helpers/stores.js';\n  import CookieNotice from '../components/CookieNotice.svelte';\n</script>\n\n{#if !$isDev}\n  <CookieNotice />\n{/if}

In this example, we check the current environment, which exists as a value in our store and use it to decide if the cookie notice should be displayed or not. Simple, isn't it?

With Svelte stores, you also never have to worry about memory leaks, because store variables prefixed with a $ sign act as auto-subscriptions and unsubscribe automatically.

5. Built-in accessibility and unused CSS checks

Svelte wants to make the internet a better place and helps you out with useful hints in the code.

Whenever you forget to put the alt attribute on an <img> tag, Svelte will display a A11y: <img> element should have an alt attribute reminder for you. There is a long list of accessibility checks that are implemented in Svelte, and they hint at you without ever becoming a nuisance.

To keep the code as concise as possible and to avoid snippets of left over code, Svelte also flags unused CSS selectors for you whenever there is no respective markup to be found in a component.

6. Components are exported automatically

Whenever you would want to use component A in component B, you would usually need to write code to export component A first so it can get imported by component B. With Svelte, you don’t ever need to worry about forgetting to export. A .svelte component is always exported by default for you automatically and ready to be imported by any other component.

7. Styling is scoped by default

Similar to CSS-in-JS libraries, Svelte styles are scoped by default, which means that a svelte-<unique-hash> class name will be attached to your styles, so they don't leak and influence any other components styling. Of course, you have the option for styles to be applied globally by simply prefixing them with the :global() modifier or just using a .css file if you want to.

8. #await blocks

With most web applications, you will need to handle asynchronous data to display useful stats to your users.

{#await promise}\n  <p>...waiting</p>\n{:then number}\n  <p>The number is {number}</p>\n{:catch error}\n  <p style=\"color: red\">{error.message}</p>\n{/await}

The advantage of {#await} blocks is that you don't have to define an extra state for you resolved/rejected promises, you can just define variables inline in your template.

9. Shorthand attributes for passing props

In case there's a prop name that is the same as a variable name, we can pass it to the component as a shorthand attribute like {message} below. There is no advantage over using message="{message}", but it's more concise and again, less code to write!

<!-- Parent.svelte -->\n<script>\n  let message = 'hello child!';\n</script>\n\n<Child {message} />

We can also use a shorthand for assigning classes:

<!-- Child.svelte -->\n<script>\n  let round = true;\n</script>\n\n<button class:round>C</button>\n\n<style>\n  .round {\n    border: 1px solid black;\n    border-radius: 50%;\n  }\n</style>

Above you can see the class:round attribute getting applied to the button based on if round is true or false. This could easily become a reusable component where you pass the value of round from the outside to decide the styling of the component conditionally.

10. Built-in effects and animations

Svelte comes prepacked with powerful effect modules:

svelte/motion effects like tweened and spring
svelte/transition effects like fade, blur, fly, slide, scale, draw
svelte/animate effects like flip
svelte/easing effects like bounce, cubic, elastic, and many more

There are a few examples in the official Svelte tutorial, but I like this progress bar example the most because of its simplicity.

Animations is an area of web development where you usually look for an external dependency to handle it for you, so it's great that you can use these right out of the box.

Fair reasons not to adopt Svelte

To avoid making this article sound like one long fanboy post, these are the cons that I experienced with Svelte so far:

.svelte files cannot export multiple components

On one hand, we profit from .svelte files being default exported automatically, but this also means that we cannot export multiple components from a single file. I don't think that this is such a big deal since it forces you to follow best practices writing your application with many small isolated components, which keeps them easy to understand and unit test.

Template syntax in general

For displaying conditional logic, Svelte uses a syntax that resembles the well-known Handlebars templating syntax.

<script>\n  let value = 5;\n</script>\n\n{#if value > 10}\n  <p>{value} is greater than 10</p>\n{:else}\n  <p>{value} is smaller than 10</p>\n{/if}

I didn't encounter any issues with this way of writing logic, but I would prefer a more concise syntax.

Receiving props in a child component with `export let`

When you want to pass values from the parent to the child component, you need to pass a value as an attribute and receive it by using export let with a matching variable name.

<!-- Parent.svelte -->\n<Child message=\"hello child!\" />\n\n<!-- Child.svelte -->\n<script>\n  export let message;\n</script>
\n<p>{message}</p>

In modern JavaScript, export is usually used as a keyword for exporting a module and let to declare a block-scoped variable, so I feel that the syntax is misusing existing keywords. However, I got used to it and it works well.

Development speed

This is not directly related to the development experience with Svelte, but you should definitely be aware that Svelte can't compete (yet) with bigger and sponsored open source projects like React, Angular, Vue.js and others in terms of financial support, number of contributors and popularity as of now.

Nevertheless, the community is growing quickly and there is an ever-increasing list of third-party projects built for Svelte by the community which is available on Made with Svelte. The developers working on Svelte-related tools are geniuses and you can always ask for help on the Discord channel, Twitter or Reddit. Svelte also recently added TypeScript support and it works great!

I like Svelte's ease of use, small bundle size and developer experience amongst other factors so that I can accept a slower development speed as a trade off. If you always need the newest features to be merged as fast as possible, then you might want to look into other available JavaScript frameworks.

Lack of available jobs

Most companies are still looking for developers who are experienced with the major three front end frameworks but there are various, well-known early adopters of Svelte like IBM, Apple, Philips, GoDaddy, 1Password or The New York Times, just to name a few. You can find an extensive list of companies who are using Svelte at the bottom of the Svelte website.

Usually, the adoption of a new framework takes a while to show up in job offers of companies. Nevertheless, Svelte is fun to learn and many developers enjoy using Svelte especially for their own personal projects or small scale applications.

Conclusion

If a beginner-friendly syntax, a small bundle size output and an insane performance with Svelte sounds like a great choice to you, I would recommend you to start hacking away with the Svelte tutorial. The tutorial is really detailed and you can quickly get an understanding of how powerful the framework is.

Things can definitely change fast in the world of JavaScript frameworks and I hope you are as convinced as I am that Svelte has all the upsides and potential that can make it become the new No. 1 JavaScript front end framework around!

Have you worked with Svelte before? How was your experience?

Tell me about it in the comments, I am curious to know.

Thanks for reading, I hope you enjoyed it!

Helpful resources

Looking for a Svelte powered server side rendered solution?

After getting into touch with the framework through using Sapper, I am a big fanboy and try to promote the way of Svelte whenever I get the chance.

In case you are about to set up a website and are looking for the right tool, I published an article about my experience so far with Sapper for you to read about here: "Why I Chose SapperJS For My Website, And What I've Learned About The Framework So Far".

\n","readingTime":"12 min read"},{"title":"The Beer Bucket List For The Aspiring Connoisseur","slug":"the-beer-bucket-list-for-the-aspiring-connoisseur","creationDate":"2020-08-05","category":"Lifestyle","excerpt":"This comprehensive and regularly updated list includes all the beers that I drank since around 2018.","cover":"variety-of-different-beer-styles.jpeg","tags":["Craft beer","Tools","Community"],"html":"

\"Variety — \n You gotta try them all. - Photo by\n \n JuniperPhoton\n \n on\n Unsplash\n

\n\n

Beer is one of the most popular alcoholic beverages in the world. There are countless different and complex styles brewed in an ever-growing number of craft beer breweries around the globe.

Compared to other alcoholic drinks like wine or gin, I am fascinated by the fact that beer can vary so much in flavor, bitterness, and alcohol by volume. Depending on your mood and personal preference, you can go for a refreshing, hoppy, and bitter IPA on a warm summer day or enjoy a strong, full-bodied, and creamy stout which makes you drunk fast.

I’ve always loved trying out new beers and especially the first sip when you are really thirsty is always a blessing. At the beginning of 2018, I decided to start a spreadsheet and track every new beer that I discover and drink.

Although the ranking is highly subjective, it can be helpful for you to go through the list and see if you can buy any of them locally in your area and potentially avoid the ones that I disliked.

The comprehensive and regularly updated list mostly contains beers that are available in the DACH region since I live in Vienna, Austria, but you can also find a great number of beers from places that I visited for vacation.

With a simple three-grade rating system, I have a reference to look up whenever I am unsure if I had a beer already and If I liked it or not.

To make the list easily understandable and avoid overcomplicating the rating process, these are the three grades:

I like - for the beer that I definitely would buy again.
Meh - for the beer that didn’t impress me but that also wasn’t bad.
Not my taste - for the beer that certainly has its fans, but doesn’t work for me.

Without further ado, here is the Google Docs spreadsheet.

Be aware that I tend to dislike IPA and lighter beers in favor of wheat beers, sours, and porter/stouts.

For a good general overview of top-rated beers across the globe, you can also check reviews on Untappd.

Some of my all-time favorite beers include

Edelweiss Weizen, Wheat
Kozel Dark, Lager
Kriek Boon, Lambic
Sakiškių Sour Beetroot Ale, Sour
Idylwilde Brewing Mountain Fair Confluence Cream Ale, Cream Ale

Do you have any recommendations to try for me?

Do you have a different opinion on a beer than me? You can leave inline comments directly in the spreadsheet or in the comment section below the post.

Drink on!

\n","readingTime":"3 min read"},{"title":"Contributing To Open Source Projects The Right Way","slug":"contributing-to-open-source-projects-the-right-way","creationDate":"2020-07-28","category":"Programming","excerpt":"When I started with open source contributions in April 2019, I remember being scared about doing everything wrong.","cover":"contributing-to-open-source-projects-the-right-way.jpeg","tags":["Open source","GitHub","Community","Beginners"],"html":"

\n\n

When I started with open source contributions in April 2019, I remember being scared about doing everything wrong.\nI didn't want to mess up on a pull request and be branded as a noob, never able to taste the sweet success of getting an open source pull request reviewed and merged.

There were so many questions that I had to find answers to:

What skills do I need to be able to contribute successfully?
How do I write commit messages correctly?
What is forking? What is upstream?

Although there were articles and tips and tricks available on the web, it was tedious to gather all the necessary information bit by bit.

After contributing to open source projects regularly for a while now and feeling comfortable with the workflow, I decided to share my knowledge with you so you don't have to start from zero like I did.

Additionally, my motivation is to bring people who are hesitant to start with open source contributions to take the first step. More developers contributing to open source projects means better quality of code, more documentation written and faster development speed which is a benefit for all of us.

Why you should contribute to open source projects

Improve your coding skills. Working with different code bases is a great way of getting better at coding fast. Contrary to a work environment where you might work on one project for a longer period, with open source projects you can switch to another project whenever you want and get to know various tooling and setups.
Give back to the community. You are probably using a lot of different repositories daily for free and this is your chance to contribute as a way of thanking the project.
Improve your prestige. You will be easier to hire with merged pull requests for well-known projects or you might even turn into a thought leader for a certain topic.
Work with different teams. Each repository has different contributors and coding conventions that you will need to adapt to.
Solve interesting problems. Finding solutions to complex problems can be fulfilling and a lot of fun. You are also able to choose which issues you want to work on.

If you think that you don't have enough experience to contribute to projects with code, don't worry. You can always help out by improving documentation, answering issues, or with the internationalization of a project until you feel ready.

Some of my contributions

To give you a bit of an overview of projects that you could be working on, here are some open source contributions that I worked on:

sveltejs/svelte: add accessibility rule
sindresorhus/eslint-plugin-unicorn: add lint rule
microsoft/webtemplatestudio: improve generated angular and react code, fix e2e tests
react-boilerplate/react-boilerplate: dependency changes and upgrades
ethereum/ethereum-org-website: fix setTimeout leak, fix accessibility issue
foundry376/mailspring: add preferences options, allow cancel upgrade prompt

As you can see, my favorite areas in web development include working on code quality improvements like linting and accessibility as well as dependency upgrades.

One of the great things about open source contributions is that you get to choose whichever issue you feel like working on right now!

Contribution flow

Before starting to work on open source contributions, it is essential to know how the usual workflow will look like.

\n\n

Although most pull requests can be created, reviewed, and merged within the same day, it is not uncommon for pull requests to take even multiple months from start to finish! I have pull requests which are open for more than a year, and they are not merged yet because the project is maintained irregularly or project focus moved away from that issue.

How to find a project to contribute to

GitHub: there is an Explore page where GitHub recommends repositories based on your interests and previous contributions.
Work: you are actively using a repository for a project at work. You want to fix a bug or add a feature that is necessary for your progress at work or you simply want to contribute as a way of giving back to the project.
Contacts: you hear from co-workers or friends about cool repositories and want to be part of them too.
Stock Market: not the most obvious way, but you could be invested in a company and want it to flourish.

Naturally, starting an open-source project yourself if you have a great idea is an option as well.

Bug bounty programs

Unfortunately, participation in most open source projects is voluntarily and therefore unpaid, but there are websites where you can find issues with monetary rewards on them:

Issuehunt: I collected various bounties of up to $100 for issues here and the site gets updated regularly, so I highly recommend you to check it out.
Gitcoin: Most issues here are specific to blockchain development and the payout is in cryptocurrency.
Bugcrowd
HackerOne
Bountysource

What to do first

Let's assume that you found a project of your liking, here are some ways that you can find out if it is a smart idea to start working on that repository:

Proficient with the used programming language

No matter how great the project sounds, if you have no prior experience with the used programming language or tech stack, you will have a hard time fixing an issue.

Check the popularity of the project

I recommend going for a project that is not too popular yet - all the good issues would be gone too quickly - but also not so small that the chance is high that the project might become unmaintained at some point. Aiming for a star count on GitHub between 1000 and 50k is usually a good bet, but there are some exceptions.

Check the latest commit in the master branch

Don't contribute to a repository if you see that there was no commit added to master for more than a couple of months, it can be a sign of a deserted project. When having doubts about the ongoing development of the project, ask some contributors or open up a new issue.

Take a look at the number of open pull requests

Are there a lot of open pull requests? If it is not a highly popular project, this can be a clear indicator that the repository cannot keep up and doesn't have enough members for handling the reviews. Alternatively, it could also be that there are organizational issues that lead to slow decisions or the direction of the project is lacking.

Check for interesting issues to work on

Well-organized repositories usually have issue labels like "good first issue", "help wanted" or "documentation". These can be an optimal start to get to know the repository. When you find a suitable issue, make sure it is not taken by someone else yet. If it is an older issue, write a comment to find out if there is still demand for a solution to avoid working on an issue that is not wanted anymore or superseded by other changes.

Find contribution guidelines for the project

While you can always find out how to get a project up and running locally yourself, a good project usually has information for contributors in the README.md file or more specifically in a dedicated CONTRIBUTING.md file.

Preparations before working on a project

By now, you selected a project that fulfills all the criteria of being a good pick: it is continuously maintained, you found interesting open issues and you feel skilled enough to start the work!

(Optional) Make sure to add an SSH key to your GitHub account

With GitHub, you can clone a repository either with HTTPS or SSH. Various online discussions are going on between which way is better, I prefer and recommend SSH over HTTPS because you don't have to re-enter your GitHub password every time you use operations like git push.

If you are unsure about how to generate an SSH key and put it into your GitHub account, here is a good article: Connecting to GitHub with SSH.

(Optional) Add a GPG key for verified commits

Although you can commit to a repository just fine without your commits being verified, I recommend setting up a GPG key for these three reasons:

your commit will receive a green "Verified" label which gives it improved authenticity
you show other people involved in the project that the commit comes from a trusted source
others can be sure that no one impersonated your account

\"GPG — Most of the commits in the React repository are verified by GPG key.\n

\n\n

You can read more about generating a GPG key and verifying your commits here: Managing commit signature verification.

When you have your GPG key generated and set up in GitHub, it can be helpful to run these commands to tell git to auto-sign every commit:

git config --global user.signingkey <publickey>\ngit config --global commit.gpgsign true

Ready to clone

Let's say you want to contribute to React, then the command for copying the project to your local disk would look like this:

# ssh\ngit clone git@github.com:facebook/react.git\n# https\ngit clone https://github.com/facebook/react.git

After the project is successfully cloned to your local disk, you can find the repository available under the file path that you were located in when cloning it.

Find the used branch for development

Before you start to work on the project and begin modifying files, it is a good idea to check the branches on the GitHub repo. Although most of the time you branch away from the master branch for your contributions, there are repositories that use a separate dev or development branch. These intermediate branches are used for pull requests and get merged back into master regularly when deciding on pushing out a new release.

Familiarize yourself with the project

Depending on the size of the project, it can be quite the challenge to figure out which files require a change for providing a bug fix/feature. Try to scan over the file structure once at least before using the search in your IDE for pinpointing the location for your code changes.

Don't get discouraged!

Starting with a large project can be overwhelming at first. I often wanted to give up on issues already only to find the ideal solution a moment later. It can pay off to be perseverant.

Nevertheless, you will encounter projects - especially older ones - which can suffer from bad developer experience. When you realize that it will take you a lot of time to even get the project setup or the tests and linting to pass, focusing your work on another repository might be a better idea.

Get things done

At this point, you have familiarized yourself with the project and you are sure that you can make some meaningful code changes.

Reserve the issue of your choice

You can signal the contributors of the repository that you want to take an issue by simply writing "I want to work on this" as a comment.\nIdeally, you will get assigned to an issue and avoid that your issue will be taken by someone else.

Be aware that you are expected to deliver a PR or a status update once you volunteered for an issue. Some contributors also might ask about the progress if is a high priority bug fix.

Save work into a branch

Since we are still in the default branch that we cloned the project from, it's about time to check out into a separate branch to be able to commit.

I recommend naming a branch according to the <issue-number>-<issue-name> naming convention.

An example of checking out into an issue-specific branch would look like this:

git checkout -b 345-expose-options-for-gtag

If you want to read up more on the topic, there is plenty of information available about Git branch naming conventions.

Ready to commit

We already learned that there are naming conventions for creating branches in Git, so we also want to follow the best practices for the structure of a commit message. Conventional Commits is a good resource of "a specification for adding human and machine-readable meaning to commit messages".

Set up git commit default message

As programmers, we prefer to avoid unnecessary work and stick to the DRY principle. That's why I advise using a git commit default message. Whenever I start a commit message, I can check which type of change I am working on and adapt the message and its body accordingly.

A useful hint: whenever you put the issue number into your commit message like (#<issue-number>), the respective issue on the remote repository will receive a timeline notification that looks like this:

\"Referenced — Everyone interested in the issue will see that you started working on it.\n

\n\n

This can be helpful especially for pull requests that span across a longer time frame to further signal to other subscribers of an issue that you are indeed working on it right now and that the pull request is not abandoned.

Check how commits are done in the repository of your choice

Although you are good to go most of the time with sticking to the conventional commit structure for commits, I advise running git log in a project where you contribute for the first time to see how strict commit messages are handled.

Make sure you comply with the outlined contribution guidelines

Before committing, double-check that you fulfill all the requirements of a potential CONTRIBUTING.md file. Whenever you add a new feature, it can be a requirement to add a corresponding unit test to the project to verify that your changes are reliably working or that you update the documentation to explain the feature.

Focus on the issue at hand exclusively

Don’t touch any code not related to the bug you are fixing or the feature you are implementing and stick to the code style of the project.

Sometimes, the pull request reviewers will also explicitly tell you to revert formatting or refactoring changes that you did out of goodwill. The main reason is to keep the pull request easy to read and review and to avoid time-consuming discussions about irrelevant changes in the code diff.

Squash commits

Do as many commits as you need while the pull request is in a work in progress state, but rewrite and squash your commits to result in one nice and clean commit in the end. This way you avoid polluting the master branch with excess information in git log.

In case you are unfamiliar with squashing commits, this beginner's guide to squashing commits with git rebase can help you out.

Ready to push

If you've gotten this far, great! You're almost ready to open your first PR! There are only a few steps left.

Fork repository

Forking is just a fancy word for taking a repository on GitHub and copying it under your own GitHub username.\nIt can be done by clicking the Fork button on the right upper corner on any repository as can be seen here:

\"How — The fork button is in the upper right corner in the GitHub UI.\n

\n\n

The reason why we need to fork a repository is to be able to submit a pull request against it.\nBy default, you don't have push permissions to a repository that doesn't belong to you.\nTherefore, we fork a repository under our username where we are allowed to push to, and then we can submit a PR against the original GitHub repository.

So if you would decide to fork React, it would take a few seconds, and then you would have an exact copy of the repository available under https://github.com/<username>/react.

Although the step of forking can be done earlier in the workflow, at this point we already made a git commit previously, so we know for sure that we have a meaningful contribution to push. If you fork a repository before checking out the project locally and finding out if you can do valuable changes, it can be that you decide against working on it and then you forked it in vain.

Set up a git remote

When you clone a repository from GitHub to your local disk, it has the origin set up for you.

If you run git remote -v inside the location where you cloned the repository to, it should look similar to this: origin git@github.com:facebook/react.git.

When you run git push it will try to push against origin which would not work in this case since we are not a member of the Facebook group.

We need to change the origin to be our fork and the upstream repository to be facebook/react.

To do that, we can run:

# add facebook/react as upstream\ngit remote add upstream git@github.com:facebook/react.git\n# change origin url to be <username>/react\ngit remote set-url origin git@github.com:<username>/react.git

If you did everything correctly, the output of git remote -v should display origin and upstream set up:

\n\n

Does it look similar like in the screenshot above? Good job!

Push to origin

The remaining steps should be fairly easy. We push our branch with the squashed commits that we made to the origin, which is our fork.

The command to do that is:

git push origin <branch-name>

Super, we are almost through!

Ready to open a PR

If you did everything correctly, you will be presented with an alert box at the location of your forked repository, notifying you of your recent push.

\"GitHub — A real-life example of a pull request that I made for\nReact Carousel.

\n\n

After you are 100% done with your work, click the "Compare & pull request" button.

Write a useful pull request description

To make the review for the maintainers of the repository as easy as possible, we should follow the best practices for a good pull request description.

This is the minimum that I would put there:

Closes #<issue-number>.\n\n<explanation>

GitHub will parse the "Closes" keyword and automatically close the issue when the PR gets merged.

The <explanation> part can be very different depending on your contribution. It might be that you want to explain the bug that you fixed, notify about potential problems that could show up in the future, or discuss breaking changes that your PR might lead to.

Additionally, some repositories might have dedicated pull request templates set up. Then you would need to check checkboxes making sure that e.g. linting goes through without errors, you added unit test cases for your new feature, no formatting changes were committed, depending on the repository.

When you are content with your pull request description,\nthe only thing left to do is to click that rewarding, green "Create pull request" button and voilà!

Wait for approval

Depending on the project, this can happen quickly or take a while. Sometimes you will have to do multiple iterations of improvements for a pull request, other times your work will be merged right away.

That's all folks!

You successfully created your first pull request!

\"Children — Wow, you did it! I hope you are as enthusiastic as these kids ;) - Photo by\n Pxhere (CC0)\n

\n\n

Thank you for wanting to give back to the open source community, a lot of projects can only thrive with support from people like you!

I know this was a lot to digest, but you should have all the necessary steps laid out to go from zero to hero.

I hope this article has been helpful to you, let me know if there are any open questions left or passages to add.

Thank you for reading!

Helpful resources

\n","readingTime":"18 min read"},{"title":"Become The Best Version Of Yourself","slug":"become-the-best-version-of-yourself","creationDate":"2020-07-02","category":"Lifestyle","excerpt":"Through my personal experience, the character traits mentioned below can help you out in life tremendously, no matter if you find yourself in a job interview situation, relationship, or with friends.","cover":"person-standing-in-front-of-sundown.jpeg","tags":["Personal development","Awareness","Success"],"html":"

\"Person — \n You have it all in you. - Photo by\n \n Mohamed Nohassi\n \n on\n Unsplash\n

\n\n

We all want to be attractive to our peers. Contrary to our looks which are given by nature and can only be changed up to a certain degree, we can improve our personality in a myriad of ways.

A strong and noble character can help you cope with various moments of life, no matter if you find yourself in a job interview, during a heated discussion in your relationship, or while spending time with your friends.

With a collection of real-world experiences that I have had and think about frequently, I want to show you how you can change your character traits for the better.

Through my personal experience, I have found that the following character traits can lead you to live a happier life:

Be bold

We are scared and anxious about what other people think of us.

What if I told you that people don't care about you at all?

A common test as a newbie in the self-development area - who might need a boost of confidence and self-awareness - is to go to a public place and randomly begin to do push-ups or sing a song.

It will shoot up your adrenaline and you will feel embarrassed because these actions are not socially acceptable within that certain setting.

You are thinking: "Oh no! People are looking at me!"

They are wondering how to interpret your actions and if you could potentially cause any harm. But then they just keep on moving and probably forget about you after 5 minutes.

The harsh truth is that people think about themselves 99% of the time!

Their financial situation, social status, and the picture that they are about to post online are just much more important than you. Find the people who matter to you in your life and don’t care too much about the rest.

You can use this knowledge to your advantage and act with more confidence!

Maybe asking your boss for the raise that you wanted for so long is easier for you now that you know that there is no reason to be scared?

Be in balance

Expect only the best from people that you encounter during your journey of life. Don't let yourself get influenced negatively by factors that are out of your reach.

My dad is the perfect example: if you mention certain topics at lunch, he begins to complain about things that he can't change. Yet still, he reads the newspaper every day and gets more upset about the news that he doesn't like.

Does this sound like you?

Based on my experience there are three optimal ways to proceed in this specific situation:

don't read the information that upsets you
read it but don't let it affect you emotionally
read it and join a movement to improve the situation around the topic at hand

Even better when it comes to news, reconsider your choices of media sources.

Realizing the inherent bias in every piece of information that you consume is a good start.

Don't let your bias get in the way

There is a great website called All Sides that provides you with articles and opinions on topics from news sources from the left, the center, and the right political spectrum.

Watching from an ideological bird's eye view is an excellent start to getting an objective look of things.

You can make up your mind and consume a somewhat balanced news coverage when you decide to step out of your filter bubble.

Take action

It is natural and human that there are things that annoy us, but take action and change your situation or no one will take you seriously when you complain all the time.

It might not seem like a big deal at first, but in my opinion, every anger that generates in your body can potentially turn into pain or sickness. Additionally, negative thoughts and behavior usually attract more negativity as a result. This turns into a vicious circle which is very difficult to get out of again.

A frustrating topic for me is noise and pollution of any kind. A lot of it comes from too many cars in the city where I live.

Instead of finding myself in a situation of cognitive dissonance for not taking action but feeling strongly about it, I decided to join a local bicycle organization a while ago.

With a peer group that also believes in alternative means of transportation, there are regular political actions to make the city more livable for its population.

What I can highly recommend you to do next time when you are about to get angry is, ask yourself:

Is the problem I am facing really worth getting angry about?

Yeah we know, political party X did this bad thing again. Oh no, your neighbor took your favorite parking spot. Argh, you didn't win the lottery.

Who cares?

Think about it in a global context. Other people have it way worse, but they get up every day and still have a smile on their faces.

Save your breath and don't let your day get ruined by irrelevant problems. You will see, when you compare your problems to others, most of them will seem insignificant.

Be one step ahead of yourself

Everyday life keeps you busy and one day feels like the other.

The monotony and predictability of your actions drag you down into disregard for all the beautiful things and experiences that are waiting for you right around the corner.

Challenge yourself constantly!

No matter if it means trying out a new restaurant, going for a bungee jump, or signing up for a marathon, it will make you feel awesome because you extend the boundaries of your comfort zone.

For me, taking cold showers is an easy way of implementing a challenge into my daily routine.

If you don't fight against your inner couch potato, it will win and everything will seem like a big effort because your comfort zone shrank to a minimum.

Be a good listener

There are some simple improvements you can implement into conversations which will have a huge impact:

Don't prepare your answer in a conversation while another person still speaks!

We all know this type of person: you tell them about how your weekend was and the other person cuts in and tells you how much more they did, completely overruling you.

Rather listen closely and try to find a solution for the problems of your conversation partner.

Reciprocity is a strong determining factor in human behavior.

If you give, you will receive back 10x times.

Be active in your communication and try to learn from every sentence that could hold valuable information for you.

Don't try to win the argument

This frequently happens in political showdowns or relationships.\nInstead of acknowledging valid points of the opponent, both conversation partners try to be dominant and have the last word.

When both people who are involved in the conversation try to come out on top instead of finding a compromise, there will be no useful outcome.

It can be a very powerful move to just take a step back and say: "You know what? I agree with you on this topic".

It shows your ability to respect other opinions and that you see past your subjective truth.

The irony is that by agreeing to the opponent, you might win the discussion automatically because you unarmed their arguments.

After all, you learned how to make a compromise and you don't try to cling to your limited arguments and biased experience.

Be in the moment

You are missing out on enjoying the present and all the small things that make life worth without you realizing it.

Stopping time is impossible, but there is a good exercise to slow it down.

Close your eyes and sharpen your senses:

what do you feel in your body?
what taste is in your mouth?
are you hearing any unusual sounds?
open your eyes again and try to spot things in your surroundings that are new to you

Often, we can avoid missing out on life if we choose to consciously focus on one task at a time.

No matter if you are a parent or child, don’t bring your phone to the dinner table and put it on silent for those few minutes. Enjoy the time with your loved ones, and appreciate the delicious meal you are eating.

Your phone will passively or even worse actively distract you from enjoying all the good talks and you might even miss out on some subtext of the spoken words.

Recently I was at the playground for a workout and I saw something that made me smirk in an "I lost faith in humanity" kind of way: A mother pushed her young daughter with one hand on a swing. Her phone was in her other hand, endlessly scrolling through her news feed.

Wow, great parenting!

It was clear that she was completely distracted by her phone instead of enjoying the outdoors and an afternoon with her daughter.

You might think your child doesn't mind but especially kids want your undivided attention, don't neglect them! You don’t want to wake up in 15 years and realize that you have been too preoccupied with your phone and that you missed out on so many great experiences with your kids.

Be aware

In our daily lives, we are often confronted with inconsiderate people around us.

Instead of taking initiative and starting a discussion with the person responsible, we tend to look away, ignore it, and continue our path.

When you walk through the streets next time, count how many individual pieces of trash you can find on the ground.

Unfortunately, littering is still very much a thing in today's modern world.

Even when there are no trash cans around, there are zero excuses to throw any waste on the ground.

The next time you encounter a person littering, shouting around at nighttime, or behaving inappropriately in front of other people, make it your priority to step in.

Conclusion

I hope that you can take my advice to heart and apply it!

If you are still skeptical, realize that the character traits and examples that I mentioned above are achievable no matter your background.

They don't require money or a certain IQ, you just need to be willing to change to become the best version of yourself!

\n","readingTime":"9 min read"},{"title":"A Vivid Dream About Morality","slug":"a-vivid-dream-about-morality","creationDate":"2020-07-01","category":"Lifestyle","excerpt":"Yesterday, I experienced an intense and vivid dream and I knew right away after waking up that I had to write it down and share it.","cover":"boat-sailing-into-the-night.jpeg","tags":["Dreams","Awareness","Short story"],"html":"

\"Black — \n Sailing into the dream. - Photo by\n \n Johannes Plenio\n \n on\n Unsplash\n

\n\n

Yesterday, I experienced an intense and vivid dream and I knew right away after waking up that I had to write it down and share it with you!

Often, dreams don’t seem to make a lot of sense, they contain plot holes or you end waking up before the dream has reached a logical conclusion.

But this time, it all seemed to make sense!

Into The World of Dreams

It started with my best friend (let's call him Ben) and me standing in front of a large building, and we were out to chase easy money. We are not the good guys in this dream.

Up on top of the building, far outside our reach, we spotted a money package. If you've ever played Grand Theft Auto III, you will know these hidden packages. This is exactly how they looked like in the dream. In GTA, they granted the player access to new weapons and a lot of cash, and could only be found in either hard to access or remote places.

After realizing that the building is a retirement home, we felt encouraged that it would be a cakewalk to sneak in and snatch our prize, so we started scouting the area.

Unsure about how to best proceed to enter the building and get to the money package, we walked around the block without attracting attention and luckily found an open window on the first floor on one side of the building to what looked like the laundry cleaning facility.

Entering Unknown Territory

With no one in immediate sight, we decided to take the opportunity and went inside!

Next thing I remember, my friend and I got separated on our way to the top of the building with only a rough idea of how we would get to the package fastest.

After making good progress alone and ending up on the highest floor first, I heard steps and voices heading my direction, so I took the door closest to me to avoid being spotted. A couple of nurses passed by and expecting to be alone in the room, I took a few deep breaths to calm down after the agitation.

Surprise, Surprise!

Turning around to leave the room again, I noticed an older man, who appears to be blind, sitting at a desk in the corner of the room with a chessboard set up in front of him.

He turned his head into my approximate direction and asked me: "Hello? Who is this?! Are you a doctor?", to which I hastily replied: "Yes, yes, I ... excuse me, I must have taken the wrong door!".

The man responded in a distrusting tone: "I don't believe you. I have never heard your voice before, stranger. Listen closely, I will give you two options".

"And what are these options?", I replied nervously.

"If you try to leave I will call the nurses and you will get into big trouble with the police for unlawful entry OR you sit down with me and try to beat me at a round of chess and no one will ever hear of your little adventure."

The Game is On

Deciding for the non-confrontational choice, I stepped to the chessboard and made the first move hoping to win fast to be able to get back on the hunt for the money package.

\n\n

Even though the man was blind, he played extraordinarily well and seemed to have every chess piece visualized and its position memorized in his mind by simply touching it briefly after it was moved.

After a couple of moves, it already looked grim for me! I started to talk to the old man and asked him questions to see if I would be able to distract him from the game.

A Feline Distraction

In the meantime, Ben also found himself on the top floor and had to hide away from personnel. He ended up in a room with an orange cat and similar to my own messed up situation, the cat would threaten to reveal his position by knocking inventory to the ground and meowing loudly if he would not do a good enough job at petting and entertaining her.

\n\n

After a while, the cat fell asleep in Ben's lap and it was impossible to try to get up without disturbing her.

Ultimately, I was captivated by the variety of enjoyable stories that the old man had to tell about his past during our chess match. Ben on his end couldn't resist the charm of the orange cat which demanded his unlimited attention.

Change of Heart

Inevitably, we both got caught by personnel of the retirement home, but instead of calling the police, they saw that we don't mean harm and led us into the dining hall where we all enjoyed a great dinner together.

Ben and I both realized that there are more important things to life than money, and we should focus on bettering the world instead of harming it by stealing and causing trouble.

In the end, we left the retirement home without the money that we came for, but we were happier than before.

Up to this day, Ben and I still visit the blind, old man and the orange cat in the retirement home whenever we can.

Final Thoughts

This dream was very emotional and interwove topics, objects, and people from my personal life:

my best friend
my girlfriends family's cat who died
my grandmother had to move into a retirement home recently
my nostalgia for computer games with which I grew up with
my restless search for viable income sources
I found my passion for playing chess again not long ago

The interpretation of dreams is a difficult topic, but I relish the insights that I gained from experiencing such a vivid dream.

At first, I intended to write down the exact sequence of the dream but realized soon that it would feel way too disjointed for the reader.

I added various story elements like dialog to turn the dream into a short story and make it more appealing.

Still, most of it happened exactly like it is written here.

\n","readingTime":"6 min read"},{"title":"How To Stay On Top Of Today's Information Overload","slug":"how-to-stay-on-top-of-todays-information-overload","creationDate":"2020-06-22","category":"Lifestyle","excerpt":"As a naturally curious person with a thirst for knowledge, it is easy to get swamped by the sheer amount of information that is available and directed at you.","cover":"assorted-book-lot.jpg","tags":["Productivity","Tools"],"html":"

\"Assorted — \n How I feel waking up to new emails and notifications in the morning. - Photo by\n \n freestocks\n \n on\n Unsplash\n

\n\n

As a naturally curious person with a thirst for knowledge, it is easy to get swamped by the sheer amount of information that is available and directed at you.

This can be client emails that you have to answer, newsletters, newly released programming tools, medium articles, innovative social media content or new and interesting YouTube videos that are worth watching.

If you struggle with keeping the upper hand and staying organized in a constant fight to avoid context switching, this article can help you out!

I try to keep up to date with the following channels of information on a daily basis:

Email inbox

I am a believer in Inbox Zero, which is hard to stick to in the long run but it helps avoid your brain from frantically scanning your inbox from top to bottom and getting lost in snippets of different information.

Unfortunately, oftentimes we receive these type of emails which cannot be deleted right after reading them:

confirmations for events that you signed up for, which take place in a couple of months
newsletters providing valuable knowledge that you need to revisit at some point in the future
confirmations of package deliveries being on their way to your doorstep
discussions with customer support that take x amount of days
confirmation emails for successfully canceling bookings and waiting until you get your money back (COVID-19, anyone?)

Instead of letting these get drowned in the default inbox by newer emails, I tend to move the emails mentioned above in a generic "Keep a while" folder.

When you notice that you have to put a lot of mails in that folder, try to split it up even more by separating e.g. vacation-related confirmation mails into an e.g. "Travel 2020" folder or investing mails into a "Finance" folder.

This way you have an easier time keeping your inbox as empty as possible while cleaning out your subfolders periodically whenever you feel it is necessary.

\n\n

To avoid losing time with context switching, I would also argue that it is best to turn off push notifications for incoming emails because they distract and inhibit your productivity flow.

You decide when to check your emails, not the other way around!

Whenever you notice that you move emails to the trash immediately, this is a good sign of emails/newsletters where you should unsubscribe with a single click and not worry about them anymore.

In case you are looking for a good email client: I am using Thunderbird and Spark Email depending on the operating system that I am currently using and I can recommend them both 100%.

Calendar application

With the same principle as the email folders, I create multiple, color-coded calendars which make it easy to see at a single glance which kind of tasks require your time.

I can recommend creating calendars for categories like "Business", "Meetups & Social", "Concerts", "Workout", "Birthdays" and more. You should be able to identify immediately in which category your new calendar entry should fit.

Additionally, it works out great for me and my girlfriend to have a shared calendar where we can easily put in a joint restaurant visit or show unavailability.

There will always be days when you 100% cannot procrastinate on tasks, therefore I also suggest using an "URGENT" calendar, color-coded in red, you will not miss these entries.

Oftentimes you will be on the go and need to write down your thoughts somewhere as soon as possible so you don't forget about it again. I use a "Reminders" calendar for simple entries like "Contact person XYZ" or "Sign up for service XYZ".

\"Google — The differently colored calendar entries make it easy to distinguish them visually.

\n\n

Compared to a dedicated to-do list, a calendar entry gives you an idea if you delayed acting on a task for a while and you generally have a feel for how much you still have to do for that week.

Additionally, with a calendar that syncs across all devices, you are always up to date. With a to-do list, you would probably end up splitting it up into categories to be effective and then you have to context switch to your calendar to check your time slots anyways.

In contrast to entries from e.g. "Concerts" or "Workout", which I keep in the calendar to be able to always go back in history and see what happened on day XYZ, "Reminders" will be deleted after the necessary action was taken.

In case you accidentally remove the wrong entry, a good calendar application offers you an option to restore an entry through an undo button. Additionally, you usually have a 30-day trash bin with your deleted entries history.

Browser bookmarks

We all use web browsers in our lives for work or recreational purposes pretty much every day, but the workflow shortcuts that they offer are often untapped.

Oftentimes, I see that work colleagues, friends, and family members just have a couple of websites bookmarked directly on to the bookmarks bar and that's it, or worse, none at all. As soon as they are trying to show me a site that is not in the bookmarks bar, they either try to find it through a search engine or type the URL, sometimes to no avail.

I think we can do better here!

In total, I have ~2000 browser bookmarks divided into categories in Brave Browser for easily finding links, even when they are a couple of years old. You can think of your bookmarks collection like a library, which holds a vast amount of knowledge, ready for you to read anytime!

New bookmarks usually go into a to-do folder first where I read and delete them whenever I find the time. If I find a link very useful, I will put it into a bookmark subfolder for future usage, similar to working with the email inbox.

To give you some ideas for a useful bookmarks structure that you can use, I will show you some folders that work for me and help me split up information.

To-do
- Own projects
- Ways to make money
- Let's Plays + Games + Videos
- plenty of uncategorized, temporary links
- Backlog
  - Activities
  - Finance
    - Cryptocurrency
    - ETF
    - FIRE movement
    \n
  - Fitness
    - Workout routine
    - Injuries
    \n
  \n
\n
Programming
- Algorithm Challenges
- Freelancing
- Open-source projects to contribute to
\n
Other bookmarks
- Information & News
- Adventure & Vacation
- Soundtracks
- Health
\n

You can tell at first glance into which directory you would put different website links with a structure like this. The more folders, the better.

Of course, this also gets messy from time to time unfortunately, then it will require a bit of effort to do a bit of a cleanup and combine folders or remove bookmarks.

I recommend NOT to delete any bookmark folders that you built up over a longer amount of time and don't need anymore.

Put them into an "old" folder instead, who knows when they will be of use again!

The folder that I am using for this contains links for bike repair shops, past jobs, and workplaces, what to do against migraines, and links for finding a new flat. I don't need these links regularly, but they can be helpful one day, so I keep them stashed away.

All-in-one bookmark manager

A great example of an all-in-one bookmarking tool is Raindrop.io, which is most powerful when used together with its browser extension.

You can save your favorite content into a collection in Raindrop.io and use it whenever you want. When going through mails and encountering interesting articles, I usually follow the link, save it to Raindrop.io to read, and enjoy later when there is spare time, depending on content length.

Compared to browser bookmarks, I primarily keep longer reads, which I don't want to rush, in Raindrop.io, so I can focus 100% on the content. These can be blog posts about programming, SEO, and other topics or interviews with inspiring people.

\n\n

I especially enjoy reading these articles right after waking up in the morning and instead of mindlessly scrolling through some social media feed, you already got a bit smarter before even getting up and starting the day!

I either delete Raindrop.io bookmarks right after reading them or if articles are packed with valuable information, I move them to a browser bookmarks folder, where I keep the information long term.

Application management tool

Information overload often comes in the form of application notifications as well. This can be Slack channels that you are a part of or a WhatsApp group having a chat.

With a workspace browser like Rambox, you have all your frequently used applications in one place instead of having multiple browser tabs open that you need to keep track of.

\n\n

This tool is invaluable to me because I never miss a message or notification anymore and answering on chat services on the computer is way more efficient than on the phone.

Most workspace browsers include a built-in "do not disturb" mode, so you can decide when you want to be notified or not and you can switch between different application setups like "Work" or "Home" with a simple click of a button.

Conclusion

The workflow that I proposed might seem overly complicated at first, but being any less organized would lead to missing out on a lot of useful information like new restaurants, cool programming frameworks, or interesting meetups.

While the email inbox, calendar entries, and application notifications are oftentimes high priority and need to be dealt with immediately or within the same day, Browser and Raindrop.io bookmarks can be seen as a more low priority to tackle whenever there is time.

A common workflow for me is the following:

When checking emails: read and delete the email right away or move it into a subfolder for future reference.
\n
When an email contains interesting links: read the content right away or open the external links and save them for later with Raindrop.io (e.g. a blog post) or bookmark them into your To-do folder (e.g. a service to register or a video to watch). Sometimes taking a quick screenshot is also enough to keep information available for later.
\n
While commuting or having spare time: read articles in Raindrop.io and delete or move valuable information into browser bookmarks.
\n
Getting new ideas or schedule new activities: put them into the respective calendar. Work off temporary reminders regularly and act on urgent tasks right away. Keep concerts and other events long term to be able to look back in history.
\n
When going through To-do browser bookmarks: read and delete or move valuable information into bookmarks subfolders for long term.
\n
Keeping up with chat messages and notifications: read them all in a single application window with Rambox or snooze messages for undisturbed productivity.
\n

I hope this article has been helpful to you and let me know if there are any open questions left.

If you liked the software & tool recommendations, I compiled a detailed list of all my personal recommendations.

Thank you for reading!

Helpful resources

How to Overcome Information Overload: Complete Guide 101

\n","readingTime":"11 min read"},{"title":"Wix, WordPress, JAMStack - Oh My!","slug":"wix-wordpress-jamstack-oh-my","creationDate":"2020-06-14","category":"Programming","excerpt":"How to choose where to set up your website when you have so many options and so little time.","cover":"close-up-of-different-light-bulbs.jpeg","tags":["Website","Tools","WordPress","WYSIWYG"],"html":"

\"Close — \n So many options, so little time. - Photo by\n \n Patrick Tomasso\n \n on\n Unsplash\n

\n\n

There are many options to choose from when building your website:

WordPress is the go-to option for many people who are not coders
different WYSIWYG ("What you see is what you get") tools like Wix
JAMStack solutions like Gatsby or Next.js

Why I didn't choose a CMS like WordPress

Due to its big ecosystem of plugins and popularity, you can bootstrap a website in no time with WordPress and release your MVP.

Nevertheless, having experienced various WordPress sites either through building them for clients, browsing the web myself or helping out my girlfriend with hiccups of her company's website, I can clearly say that WordPress sites feel slow, sluggish and laggy to me and don't provide the performance that I would expect from a simple website.

As a coder, I am interested in the code quality and want to have control over as many aspects of the website as possible.

When you start with a theme or template, there is way too much magic happening under the hood, and only some customization options are surfaced for the user to benefit from.

If you lack the coding skills or time for working on your website, I can understand why it’s a good choice to take the shortcut and fire up a WordPress site, install a handful of plugins, and focus solely on content creation.

In a single day, you can probably finish the MVP of your website depending on the complexity, while with a classic HTML/CSS/JavaScript framework you would be still working on the first page or even stuck with configurations.

This is of course very subjective, but here are my pro & cons regarding WordPress:

Pros

no coding skills necessary
open-source and free
huge community
extend functionality with endless plugins
ready fast with UI themes
strong focus on blogging and SEO

Cons

fresh installation lacks in security
updating plugins can break site easily
attractive for potential hackers due to popularity
bad page performance out of the box
further customization not provided through plugins and themes is difficult
spaghetti code
no version history e.g. Git

Why I didn't choose a WYSIWYG editor like Wix

The big upside of WYSIWYG tools is the possibility to drag and drop content and building the website in a way that a user can relate to since changes are immediately visualized and impactful.

It resembles a Microsoft Word editor with a lot of shortcut buttons e.g. bolding the text or attaching an image.

Compared to WordPress, my subjective pros & cons for a WYSIWYG editor look like this:

Pros

fast workflow with drag and drop
strong focus on the visual aspect of a page
no coding skills necessary
ready fast with UI themes

Cons

spaghetti code
bad page performance out of the box
weak SEO optimization
further customization without provided plugins or themes is difficult
the site can look like a clone of another one fast

Hello JAMStack!

Building my website with a JAMStack solution came naturally.

When you receive various programming newsletters, there are always clickbait articles like "Why you have to try XYZ" or "Check out the fastest framework called XYZ".

There is the ever-present need for staying relevant and up to date on the job market and also having some fear of missing out when not using the latest and greatest bleeding-edge technology.

So it happened that I worked on a project with Gatsby to satisfy my developer curiosity for trying out new technologies and got in touch with JAMStack.

It can best be described as a nostalgic reliving of the good old static website days.

A classic JAMStack project looks like this:

provide website content through Markdown files or write static HTML, no database is needed
since the content is generally static, minimal or no backend setup needed
the production bundle goes through steps like tree shaking, minification and is stripped of development tooling to become a small and performant end product
you deploy your site with a hosting provider e.g. Netlify
serve assets through a CDN
the website loads fast for the user due to server-side rendering optimizations and cached content

You can find a detailed explanation of JAMStack on jamstack.wtf. Choosing JAMStack or not depends a lot on the scope of your website. Most of the content needs to be requested on runtime e.g a corporate website with a lot of dynamic forms and user input? Don't use it. Is the content mostly images and text which rarely gets updated e.g. a blog post or a one-page product website? Yes, do it!

Pros

great performance out of the box
excellent developer experience
very cheap due delivering cached static files
fast deployment
just a static HTML page
free and open-source frameworks
extend functionality with plugins
all your changes are version-controlled

Cons

coding skills required
dependent on 3rd party services
cannot request dynamic data on runtime
the time required for learning the stack
no GUI

Wrapping it up

Using a JAMStack setup for your next project can be a great choice, depending on the scope of the project, possible company requirements, and many more factors. You will benefit immensely from a blazing fast page performance and an enjoyable developer experience.

In case you are not a programmer or need to get a project bootstrapped really quickly, it is advisable to stick with either WordPress or Wix where you can manage your project through a graphical user interface.

If you are interested in building a JAMStack website, you can read in my article "Why I Chose SapperJS For My Website, and What I've Learned About the Framework So Far" about how I was able to work and choose the perfect solution for me.

Thank you for reading! I hope you found the information useful in this article. If you have any questions, feel free to leave a response below.

\n","readingTime":"6 min read"},{"title":"Why I Chose SapperJS For My Website, And What I've Learned About The Framework So Far","slug":"why-i-chose-sapperjs-for-my-website-and-what-ive-learned-about-the-framework-so-far","creationDate":"2020-06-13","category":"Programming","excerpt":"Since I wanted to go for a website built on a modern JAMStack setup, I had these options based on framework popularity and matureness.","cover":"laptop-with-displayed-code.jpeg","tags":["Website","SapperJS","JAMStack","JavaScript frameworks"],"html":"

\n\n

\n A JavaScript framework is a collection of components and libraries that provides code for routine programming tasks like routing, HTTP calls, and more, so you don't have to write everything from scratch!\n

\n\n

Wow, what a framework!

In this post, I will explain my thought process of how I was able to single out a tech-stack that would fulfill all the criteria I need to build a well-structured website:

snappy, lightning-fast performance
optimized SEO for being visible on the web
developer friendliness for hacking away efficiently
innovation in the field of website tools
natural curiousness as a developer to try out new technologies

Since I wanted to go for a website built on a modern JAMStack setup, I had these options based on framework popularity and matureness:

Next.js
Gatsby
Hugo
Nuxt.js
and maaaany more

You can see a full list of available static site generators provided by Netlify on StaticGen, there are a lot of competitors!

Next.js

Since I have about 2 years of professional experience working with React, it would have made a lot of sense to choose Next.js as my preferred framework, but that would have been too easy, right?

To be more versatile with different JavaScript frameworks out there, I decided against a React-based framework like Next.js.

Gatsby

I didn't want to pick Gatsby again because I am already using it for another project of mine that I recently started working on called DAW Comparison.

Apart from wanting to try different tools, I didn't fully enjoy the developer experience using Gatsby as I ran into issues with performance, having a difficult time figuring out how to get gatsby-image working the way I want and getting frustrated by unmaintained/duplicated plugins.

Nevertheless, I am certain that Gatsby is here to stay and will grow into an excellent framework, especially since it is already very popular and received $28M in Series B Funding in May 2020.

Hugo

Although I am interested in trying out the Go language for writing a backend project at some point, I was not interested in Hugo due to it not being on my radar, but also because of its confusing-looking templating syntax, for example:

{{ define \"main\" }}\n<main aria-role=\"main\">\n  <header class=\"homepage-header\">\n    <h1>{{.Title}}</h1>\n    {{ with .Params.subtitle }}\n    <span class=\"subtitle\">{{.}}</span>\n    {{ end }}\n  </header>\n  <div class=\"homepage-content\">{{.Content}}</div>\n  <div>\n    {{ range first 10 .Site.RegularPages }} {{ .Render \"summary\"}} {{ end }}\n  </div>\n</main>\n{{ end }}

It might be a really powerful site generator, but I aim for simplicity for my website project.

Nuxt.js

Building the website with Nuxt.js would have made a lot of sense as I would have gained some hands-on experience with all three major JavaScript frameworks (React, Angular and Vue.js).

Vue.js is gaining a lot of popularity on GitHub and across the JS scene because it pretty much combines the best features of React and Angular, but as you will read further below, I eventually decided to go with the underdog.

Small detour

A while ago, I found out about Svelte and felt intrigued and fascinated by its promise to be a radical new approach to building user interfaces.

As seen on their website, "Svelte shifts the bulk of work that is usually done in the browser into a compile step that happens when you build your app". Hey, that sounds like a great way to solve performance issues for me!

After working through the whole Svelte tutorial, I had a few WTF moments (in the most positive sense) where I was impressed by its absolute simplicity and smooth developer experience.

Nevertheless, after acknowledging that it's too underground and might die a horrible "Just another JavaScript framework" death sooner or later and lacking a real-world project to try it out on, I dismissed it and forgot about Svelte again.

SapperJS

Fast-forward to the initial research of the potential JAMStack setup of this website.

I coincidentally ran across SapperJS and realized that it is "powered by Svelte" and developed by the same core team.

After a short moment of triumphing, I saw this notice on their documentation:

\n\n

Oh, snap! That sounds like a lot of potential headaches, I still remember the upgrades from Angular 2 to 4 and Webpack 3 to 4 much too well.

So my choices came down to

go with stable and mature Nuxt.js, be relevant to the job market and profit from a large community in case I get stuck and have to rely on Stack Overflow
choose early development SapperJS, which did not hit a major version yet and potentially run into a few breaking changes along the way

In doubt, get a second opinion

Not an easy choice, am I right? I decided to ask a former work colleague that I can always rely on for good information and advice.

He is smart as hell and has about 20 years of experience in the JavaScript ecosystem, so that helps in situations like this.

I asked: "Hey Pete, I would love to use SapperJS for my website, but it is still in early development, it's a stupid idea, right?"

He responded: "It's not stupid at all, just be aware that you might need to refactor or redo a lot of code. But especially with personal projects, it's great to try out new tools and grow from the experience."

Kind of surprised that he wouldn't turn down the idea right away and that he even encouraged me to try it out, I felt motivated and jumped right into it!

Starting with an underdog framework also meant that there would be a lacking ecosystem of plugins and solutions, but I was aware of that and accepted it as part of building the website from scratch and seeing it as a great learning experience.

Progressing fast with Sapper

I started with the sapper-template-rollup and quickly set up the first few pages.

Now after working on the website on and off for about a month, I am proud to have reached these goals:

fast, performant and fully-responsive site
a blog site with filtering options and sub-pages for categories/tags
GDPR-compliance with own cookie notice and opt-in to Google Analytics
a commenting system with ReplyBox
fast styling of layouts with Tailwind CSS
shipping less than 300kb of resources and ~20 requests across each page
lazy loading and image optimization with svelte-image
easy deployment to Netlify
close to 100% on Lighthouse audit

I was able to focus almost exclusively on these goals without worrying about site performance because Sapper comes with advanced features and optimizations like route prefetching, server-side rendering, automatic code-splitting, and offline support out of the box!

My experience so far

In case you feel inspired to start with SapperJS as well, these are my thoughts and experiences so far about what works well and what doesn't:

Pros

great starter template with plenty of optimization options provided
it works smoothly without any hiccups or weird errors even though it is in its early development stages
you automatically profit from awesome Svelte features like concise syntax, built-in linting, a11y, marking of unused CSS, and more
development server starts fast and does hot module reloading
no framework-specific <Link> components, just <a> tags which support prefetching
guaranteed smooth integration with Rollup, which was also created by Rich Harris, the founder of Svelte
Discord channel with a nice community for all your potential questions

Cons

Sapper documentation is good but doesn't cover various edge cases which happen in development
a lot of necessary SEO attributes are not set by default, e.g. meta description
lacking ecosystem and component libraries either not existent or early development e.g. Svelma (Bulma components for Svelte)

All in all, I didn't encounter any severe cons at the time of writing, and I am optimistic that with all the hype around SvelteJS we will see the ecosystem steadily grow into a mature and well-respected web application framework.

If building a website with JAMStack doesn't sound interesting to you, you can check out my other post about Wix, WordPress, JAMStack- Oh My! for some great alternatives.

Thanks for reading!

\n","readingTime":"8 min read"},{"title":"6 Reasons Why I Started This Blog","slug":"6-reasons-why-i-started-this-blog","creationDate":"2020-06-12","category":"Lifestyle","excerpt":"In contrast to blogs who focus on a single topic, I want to write about and cover these topics in depth.","cover":"pen-writing-on-a-paper.jpeg","tags":["Hustle","Creativity","Writing","Personal development","Blogging"],"html":"

\"Writer's — \n Let's start this journey! - Photo by\n \n Álvaro Serrano\n \n on\n Unsplash\n

\n\n

It is kind of ironic, I always made fun of bloggers and influencers thinking that they should get a real job.

Now I've decided to become one myself!

Let me explain

Due to encountering the right people at the right time, I have always been an out-of-the-box thinker.

I recently noticed that I have collected some valuable and unconventional knowledge over the years.

I regularly share ideas and new experiences with friends but through blogging, many more people can profit from me openly sharing ideas, thought processes, and being resourceful.

These can be found in my upcoming blog posts.

Challenges ahead

Since I am specialized as a programmer, it will be a challenge to dive into a variety of new topics and skills necessary to acquire when writing a blog like:

promoting myself and building a network
writing posts that can reach audiences of different cultures & backgrounds
getting discovered through good content marketing and SEO

Learning these skills is one part where I am afraid I might fail as I don't have much experience in these topics, but I am also looking forward to achieving them.

After quitting my last job, it gave me the chance to re-think my goals and how to invest my time most efficiently.

When you suddenly have more time on your hands, it can either drag you down into being lazy or it can be a time to reflect, try out new things, and make goals for the future.

As I am a naturally motivated person, this allowed me to start this blog and I hope that you can benefit from the topics that I will cover.

The rest of this article will explain my reasons for starting it.

1) Write articles about a wide array of topics

In contrast to blogs which focus on a single topic, I want to cover these and potential more topics:

Programming
\n
- JavaScript Frameworks e.g. React or Svelte
- Code quality tools like ESLint or Prettier
- UI Framework comparison
- My coding setup
\n
Productivity
\n
- Chrome extensions & bookmarks workflow
- Efficiency with Google Calendar
- Inbox zero
- Saving articles on the go
\n
Life hacks
\n
- Ice swimming and exposure to cold
- Barefoot shoes
- My morning routine
- Shampoo alternatives
\n
Software recommendations
\n
- Rambox
- Gravit Designer
- Spark Mail
- Boostnote
\n

\n\n

Soap nuts?

Gomad milk diet?

Robin foods?

You have probably never heard about any of these terms.

I don't want to spoil too much, but there will be plenty of posts coming up about underground topics.

Through the avid reading of articles and newsletters every day, I gather knowledge that I am happy to share with you at any time.

3) Write posts with clear and highly detailed instructions

Oftentimes, I read through posts about programming tricks, framework documentation, or even cooking recipes and there is information missing that I would need to proceed.

Especially for life hacks, I will be very detailed about "how many minutes of this", "mix 2 tbsp with that", etc.

I think we have all experienced, that sometimes it takes much more research effort on a topic just because there is a tiny but essential detail missing.

I will be writing my posts with great detail so that you don't have to go through that extensive research process to find the correct answer that you are looking for.

4) Document my thoughts and processes within a certain time frame

It will always be fun to look back and see what I wrote e.g. 5 years ago and how I developed as a person.

Who knows where the road will lead to?

For me, the bottom line will always be: Produce rather than consume.

What I mean by that is to stop wasting endless hours on social media or TV shows where you will have forgotten most of what happened in a short amount of time anyways.

Instead, live on the other end:

write a blog
make a movie
code a website
start painting

Whatever your pursuit is, content creation will leave you more satisfied in the long term than content consumption and you can (hopefully) be proud of what you created from scratch.

5) Generate potential side income with own ideas

No matter how much you earn, diversifying your income is key.

This blog enables me to potentially generate some money with my ideas and with created content about topics that I choose myself and enjoy writing about.

The blood, sweat, and tears that I will put into the content will not be inherited by a company that I work for.

Every written article could still generate income in a few years through affiliate links or ad revenue, without any extra effort.

Today, as the web is such an important medium, the access to an almost infinite stream of information is available and many people have found smart ways of making money apart from the classic 9-5 job.

Generating a side income through blogging is part of the work smarter, not harder mantra that I follow and I recommend you to watch The 4 Hour Work Week by Tim Ferriss for inspiration.

It is all about finding income sources that can grow exponentially compared to a fixed salary in a job with limited leverage.

6) Become a brand name

After deciding that I want to become a freelancer in the area of web development, I also realized that I would need a website to be able to market myself better.

So when I already have to set up a website, why not just have a blog as well?

There is a beautiful synergy that could emerge between doing contract work, attracting and generating new clients through the website and convincing them to seal the deal through well-written blog posts on interesting topics, so let's do exactly that!

Now what do you think?

Did this post inspire you to start a blog too?

Cool, contact me about it, and let's start a discussion!

Are there any topics that you want me to cover in the upcoming posts?

You can leave a comment below or contact me through email or my socials.

\n","readingTime":"6 min read"}]

Generate multiple sources for incoming project offers

Keep talking to recruiters even when you are fully booked

Update your online freelance profiles regularly

Showcase your passion through an active GitHub profile

Move on to the next project regularly

Pick a project that can advance your skill set

Try to move on from every client with a positive impression

Conclusion

1. Web conferencing apps

2. Data storage products

3. Web development products

4. Design tools

When to get out the checkbook

All You Need Is Rye Flour!

Pros & Cons of the No Poo Method

Other Possible Approaches To Get Rid of Regular Shampoo

Conclusion

Helpful resources

How Do I Even Find a Promising Client if No One Knows About Me?

Talk to Your Network of Peers, Friends and Family

Receive Inbound Offers From Recruiters on LinkedIn

Get Approved on Curated Freelancing Platforms

Browse Job Boards the Old School Way

Use Lesser-Known Ways of Finding Qualified Leads

So How Did I Find My First Clients?

Wrapping Up

Why should you care about online privacy?

Google Search alternatives

Google Chrome alternatives

Google Maps alternatives

Microsoft Office Suite alternatives

Google Gmail alternatives

Services that I still want to switch

Conclusion

Helpful resources

1. Not enabling code quality tools right away

2. Using outdated dependencies

3. Writing variable names and comments in a language other than English

4. Different naming conventions throughout the whole project

5. Using meaningless variable names

6. Leaving console.logs and to-dos scattered all over the code

7. Mixing up async/await, promises and callback syntax

8. No unit or end-to-end tests for complex business logic

Wrapping Up

Helpful resources

You can learn a lot from the source code

You will work with the smartest people

Your own code could be used globally

Open source projects are inclusive

Projects are starting to become sustainable

How to contribute to open source

Wrapping up

Helpful resources

What makes Svelte different?

1. Svelte components are easy to understand

2. Simply write concise code

3. Reactivity with labeled statements

4. Easy global state management out of the box

5. Built-in accessibility and unused CSS checks

6. Components are exported automatically

7. Styling is scoped by default

8. #await blocks

9. Shorthand attributes for passing props

10. Built-in effects and animations

Fair reasons not to adopt Svelte

.svelte files cannot export multiple components

Template syntax in general

Receiving props in a child component with export let

Development speed

Lack of available jobs

Conclusion

Helpful resources

Looking for a Svelte powered server side rendered solution?

Some of my all-time favorite beers include

Do you have any recommendations to try for me?

Why you should contribute to open source projects

Some of my contributions

Contribution flow

How to find a project to contribute to

Bug bounty programs

Receiving props in a child component with `export let`

Posts tagged with Svelte