DEV Community: Marius Bongarts

Supercharge Your Learning: Convert Kindle Highlights into Instant Study Flashcards

Marius Bongarts — Thu, 06 Jul 2023 10:20:11 +0000

Have you ever wondered how many books you’ve read from which you can’t recall anything anymore? Reading business books is an excellent method for skill enhancement, but if you read them once and never revisit their content, it’s nearly useless.

We forget 80% of what we read once

According to a study conducted by Ebbinghaus in 1885, commonly known as the “Forgetting Curve,” it was found that we tend to forget approximately 80% of what we read once. Learn more about the Forgetting Curve in the article Spaced Repetition: How to Make Your Readings Stick in Long-Term Memory.

In a nutshell, the key to truly remembering what we read lies in repeated recall of the information. Regarding books, this implies finding an efficient way to recall what we have read. While rereading books is one option, it may not be the most efficient approach.

Luckily, there are more efficient solutions. In this article, I will show you how you can import your Kindle highlights to the Web Highlights Chrome extension, which uses spaced repetition learning to remember what you have read truly.

The spaced repetition technique optimizes your learning by scheduling review sessions at strategic intervals, reinforcing your memory and preventing forgetfulness. By incorporating spaced repetition, Web Highlights transforms your flashcards into a powerful tool for long-term retention.

What is Web Highlights?

Before delving into the specifics, let’s take a brief moment to familiarize ourselves with the capabilities of the PDF & Web Highlighter Chrome extension.

This productivity tool offers a range of features, including the ability to highlight text on any webpage or PDF, create tags, and take notes. Furthermore, it streamlines the process of transforming your highlights into flashcards.

How can I import my Kindle Highlights?

Once you’ve installed the online text highlighter from the Chrome Web Store, you can highlight text on any website or PDF you visit.
Consequently, you have the option to visit your Kindle library and conveniently access all your highlights and notes from the books you’ve read.

From there, you can proceed with two options:

1. Highlight the most important parts of your highlights

If you don’t need all highlights of a book you can manually re-highlight your highlights & notes from your Kindle library.

Highlighting your annotations manually is a simple process. Once you have installed the PDF & Web Highlighter Chrome extension, you can immediately start highlighting text by selecting it and clicking on the highlighter popup. You can also choose to highlight by right-clicking or using a keyboard shortcut. All your highlights will be conveniently displayed in the sidebar for quick and easy reference.

2. Import all highlights & notes of your books

If you consider all the highlights and annotations in a book to be valuable, you can take advantage of the “Kindle Import Helper” feature offered by Web Highlights.
This approach is simple: with a click of the “Import Highlights & Notes to Web Highlights” button, all your highlights and notes will be seamlessly imported into the Web Highlights extension.

Web Highlights ensures that the highlight color you choose on your Kindle device automatically applies to your highlights within the extension.

Recall your Highlights To Remember Them

After importing your highlights into the online highlighter, we come to the intriguing part — spaced repetition learning.
Once you have imported or manually created some highlights, you will locate them in the extension’s sidebar. To access it, click on the extension icon in your browser’s toolbar.
In this sidebar, you will also discover the button to initiate a recall session.

Initiating a recall session will display a popup containing details about your daily learning progress. Additionally, you can view your daily streak if you successfully engage in learning for consecutive days.

To assist in reinforcing the habit of recalling your highlights and notes, you have the option to enable a daily reminder of your learning session, which will be shown in the bottom left corner.

After clicking “Learn 10 of 10 highlights” a learning session will be started and you have the option to provide feedback for each learning item by selecting either “I remember” or “I don’t remember”. If you can successfully remember an item, its confidence level increases, and the item will be rescheduled for the next recall cycle.

In the given example above, we managed to successfully recall our highlight for the first time, leading to a boost in our confidence regarding our ability to retain it. Consequently, the highlight will be scheduled for review again in 3 days.

If, after the three-day interval, you can still recall the essential details, the review date will be set further in the future, perhaps at ten days. Subsequently, the review cycle may extend to approximately 30 days, and so on.

However, if you cannot recall a particular item, your certainty will decrease, and the review cycle will reset. In such cases, the item will be reviewed again on the following day.

If you wish, you can also choose to "Dismiss" any learning items. This will ensure that they will not be displayed during your sessions anymore.

Final Thoughts

Engaging in book reading is a highly effective method for personal growth and self-improvement. Nonetheless, reading a book just once proves to be inefficient, since we tend to forget approximately 80% of its content.

To address this, you can make use of the PDF & Web Highlighter Chrome extension, which not only allows you to import your Kindle highlights but also facilitates the retrieval of these highlights later on. This ensures that the important information is retained in your long-term memory.

Install the extension for free, and start highlighting on any webpage or PDF, create tags, and take notes. Share your research and export it to HTML, Markdown, and PDF.

I hope you enjoyed reading this article. I am always happy to answer questions and am open to criticism. Get in touch with me via LinkedIn or follow me on Twitter.

Will Web Components Replace Frontend Frameworks?

Marius Bongarts — Wed, 26 Oct 2022 20:09:10 +0000

What's your opinion on Web Components?

Will Web Components Replace Frontend Frameworks?

Web Components will not replace frontend frameworks but they can enhance those frameworks by replacing their component layer with a native solution.

web-highlights.com

SEO Strategies I Used to Gain 2,000 Users In Two Months

Marius Bongarts — Mon, 17 Oct 2022 08:26:08 +0000

Disclaimer: This article was originally posted on the Web Highlights blog. You can find it here.

I was unmotivated and somewhat disappointed when I read an article on Medium.com that gave the foundation for the growth of my Web Highlights Chrome Extension today.

Growth is the lifeblood of startups, and it’s what differentiates Snapchat from the coffee house on the corner– it’s exponential. — Des Traynor

Two months ago, Web Highlights had 3,577 active users in the Chrome Web Store. Suppose you also have a published side project or write articles. You will surely be familiar with the daily addiction to view the statistics of your articles or projects. Of course, I am doing the same, and at the beginning of August, I was a bit disappointed as user growth stagnated.

The chart above shows that at the beginning of 2022, the user growth per day started to decline. That demotivated me, mainly because there were even days when I lost users. Meaning more users have uninstalled the extension than installing it.

But, since June 2022, you can see an increase in user growth per day and a peek of 81 new users on September 13th.
In the last two months, the amount of new users has doubled from around 15 per day to more than 30. How did I do that?

Product Marketing

One of the biggest problems developers have with side projects is that many can develop great products but often don’t know how to market them — Here is one of them 👋

You can build the greatest product in the world, but if no one hears or knows about it, it’s doomed to fail.

The only difference between product teams and marketing teams at a startup is that one is focused on long term growth, and the other is focused on immediately measurable growth. — Intercom on Starting Up by Des Traynor

When I started developing the Web Highlights Chrome extension, I never cared about Marketing or SEO. I always focused on building a product that helps students, researchers, and everyone else to organize their internet research in a better-organized way.

Web Highlights is still far from perfect, but it can keep up with all my competitors. Many users would say that my web highlighter extension is much better, and the Chrome Web Store reviews agree. But that’s not the point here — The fact is that my extension currently has around 6,000 active users. Some of my competitors have more than 700,000 users.

So, what differentiates my extension from a similar highlighter extension with close to a billion users?

The answer is — Marketing and SEO.

I read this article here on Medium from George Field two months ago. I left a private note and asked whether he had some tips on how to scale and market my extension. George took a lot of time to give me very insightful tips, and we had a call for about one hour. At this point, thank you again, George. I find it amazing that strangers worldwide take so much time to help others.

Here are the points I took away from our conversation that are the reason for the increase in user growth over the last two months.

Hosting a Blog on your Website

If I had to settle, I would say that hosting a blog on Web Highlights was the essential point for new user growth.

Without organic keywords on your website, SEO is not possible. Keywords tell search engines what your page is about so they can show relevant content to the searcher. Having organic keywords on your website is key to getting more organic traffic.

Organic traffic is also why I publish this article on Medium and my Web Highlights Blog. Before I hosted the blog, there were only a few keywords on my site. My landing page contained a few sentences that offered a small number of keywords. By that, the page was at least visible in Google Search at all.

Ahrefs is an excellent tool for analyzing the organic traffic of your page. It takes all the keywords for which your page ranks in the top 100 organic search results. Then it calculates an organic traffic value, which estimates how much organic search traffic your target website gets each month.

The screenshot above shows how Web Highlights’ organic traffic and organic keywords developed in the last 90 days. You can see that hosting a blog has had an incredible impact.

In just two months, the organic traffic increased from 20 to 212. Notice that the organic traffic per month value is only an estimation. It would be best to use the Google Search Console to see the traffic.

The chart above shows a screenshot of the Google Search Console tool. Here we can see how much traffic is really coming from organic search traffic in the last 28 days. With 463 clicks in 28 days, Web Highlights generates even more organic clicks than Ahref estimated.

Ahrefs can also group keywords by top positions. It differentiates between three keyword groups:

low-ranked (11+)
middle-ranked (4–10)
high-ranked (1–3)

This means that if Web Highlights has a high-ranked keyword like “web-highlighter,” it will appear in the first three search results.

Here is a chart that demonstrates even better which impact the blog hosting had:

Before publishing the blog, Web Highlights had around 30 low-ranked, one middle-ranked, and no high-ranked keywords.

Today, there are 140 low-ranked, 30 middle-ranked, and even one high-ranked keyword.

Creating Backlinks

Once you have your website equipped with some keywords, you should focus on another essential metric — backlinks.

A backlink is just an anchor link from a different site to your site. Backlinks are one of the most important factors in improving your site’s SEO ranking.

Backlinks are also called inbound links because they represent another website’s traffic coming to your own site. — mailchimp.com/marketing-glossary/backlinks/

Do-follow and No-follow backlinks

Backlinks are not all the same. We need to understand that there are two different types of backlinks:

Do-Follow links: Anchor links without rel="no-follow" attribute.
No-Follow links: Anchor links with a rel="no-follow" attribute.

Do-Follow link:

<a href="https://web-highlights.com">blue text</a>

No-Follow link:

<a href="https://web-highlights.com" rel="nofollow">Web Highlights</a>

No-follow links are the ones you should focus on. But they are much harder to get. On platforms like Medium, Quora, etc., where anyone can publish content, links are no-follow automatically. These links will not be crawled by Google and will not have much effect on your Google rank. Nevertheless, no-follow links are also valuable as they bring traffic to your site.

But what brings the most significant effect are do-follow links. Those links allow Google and other search engines to point back to your website. Every do-follow link strengthens your domain authority.

Getting a do-follow backlink to your story or to your root domain is the №1 factor for getting ranked on Google search. — Aamir Kamal 🚀

Domain Authority

Each backlink from another website will make your website rank higher. Especially do-follow links will have a great impact on your SEO score.

You should focus on creating as many backlinks to your website as possible. But, what’s also very important is that you should not only focus on quantity but also the quality of your backlinks domains.

The higher the domain authority of the linking page is, the better it will affect your page’s authority.

The domain authority of a website says how important this website is for its subject and how likely it is to achieve good rankings. — en.ryte.com

The scale goes from 0 to 100, and you can check the domain authority using a tool like this. E.g., a backlink from a domain like medium.com (domain-authority = 95) will have much more impact than a backlink from a low-ranked website.

Medium is one of the websites with one of the highest domain authority. — Aamir Kamal 🚀

One of the things I did was to ensure that every single Medium article of mine has at least one backlink to web-highlights.com. Even though Medium links within articles are no-follow links, they still positively impact SEO as they bring more traffic to my website.

A no-follow backlink from Medium still has some SEO value. — Aamir Kamal

Furthermore, I linked Web Highlights by writing answers on quora.com and reaching out to authors of online highlighter comparison articles.

Once again, Ahrefs can help us with this. We can easily see the backlinks and referring domains increase in the last months.

Furthermore, Ahrefs enables us to analyze the domain authority of each linking website.

You can see that medium.com is the linking domain with the highest domain authority. Unfortunately, it does not include a do-follow link, as most linking domains do.

Still, e.g., launching my product on Producthunt was essential to provide seven do-follow links for my highlighter extension from a page with very high domain authority.

Improve Website Structure

Another significant thing to do is to improve your website. You want to ensure that your website has good performance, accessibility, best practices, and, especially, SEO score.

Achieving this is relatively easy with Google’s Lighthouse tool, which is included in the Chrome Developer tools. Alternatively, you can download the Lighthouse Chrome Extension.

You can run a report telling you what to do to improve your score. For example, you want to ensure that all images contain an accessible alt attribute. This enables search engines to access your images as well. But, most importantly, it makes your website accessible for people with disabilities by using tools like screen readers.

Perhaps the most important reason to use the alt tag is to support accessibility — MDN

Fulfilling all accessibility for your website will bring many benefits for everyone, and as a side effect, you will be ranked higher by Google.

Final Thoughts

Many great software products out there go under because many developers build great products but don’t know how to make them accessible to the masses.

If Google can not find your product, it basically does not exist. It is not difficult to take the first small steps to become visible to search engines. The first step is to publish a lot of content on your page. An own blog can be a huge step. It would help if you also tried to link your site to as many websites as possible and implement standard SEO conventions on your website.

I am always happy to answer questions and am open to criticism. Feel free to contact me at any time! Get in touch with me via LinkedIn or follow me on Twitter.

Join 5000+ users and start using the Web Highlights PDF & Web Highlighter to highlight text on the internet.

Building A Beautiful Link Preview With Web Components

Marius Bongarts — Mon, 29 Aug 2022 14:43:00 +0000

Fetching Open Graph Data from URLs to show a thumbnail preview

This article was originally posted on the Web Highlights blog. You can find it here.

Recently, I improved the design of my Web Highlights app's dashboard by showing a link preview for each highlighted page. Here is what the new design looks like:

In this article, I want to share how to create such a link preview component and make web pages appear with a thumbnail.

If you follow my articles, you will probably know that I am a big fan of Web Components. So, of course, I built this component with Web Components as well.

For several reasons:

I can use the component in the Vue.js web app as well as in the Web Component-based Chrome Extension.
The architecture is better encapsulated
Anyone can reuse the component

Suppose you are not yet convinced. Embedding the application is as easy as including these few lines of code in your web application:

You can find a demo here. Here is also a CodePen showing how easy it is to use the link preview anywhere.

For the component's design, I followed a plain one as Medium does. The preview card contains a title, description, link, and preview image. Here is what the thumbnail preview component looks like:

Furthermore, the component shows some loading indicators when fetching the open graph data from our API, which we will come to later.

I will not go into detail about the CSS implementation in this article. But you can find the Github repository here. Feel free to check it out.

Building the Web Component

To build this web component I created the custom element webhighlights-link-preview. To make development easier, I am using the Lit library from Google.

We create our custom element by using Lit's customElement decorator and provide some reactive properties to make our element customizable by the client:

A client must provide a url for which we will fetch the open graph data from our API. Furthermore, one can provide an alternative apiUrl URL if you want to use a different API.

Not every website provides open graph meta data tags so that a client can provide some fallback data in case we can not find a title, description, or image for the given URL.

Furthermore, we need a reactive property that stores the fetched metadata for the corresponding URL:

The OpenGraphMetaData interface defines the object we expect to get back from the API. It looks like this:

So, if you wanted to create your own API, you would need to make your server response adapt to this OpenGraphMetaData interface and provide the URL of the endpoint within the components apiUrl property.

Furthermore, we need to know whether the component should show the text-loading indicators. In this case, we want to show it as long as our metaData property is undefined. To check this in the template, we create a simple getter:

Now, in the template, we can conditionally add some CSS classes to make our component show a loading state depending on whether the metaData is still being fetched from the server or has already been loaded:

Fetching Open Graph Data

To get all the needed data for our preview, we must somehow fetch the Open Graph metadata tags from the corresponding URLs. If you are not familiar with the Open Graph protocol, you should check out this article first:

Make Your Website Have a Beautiful Thumbnail Link Preview

There is the possibility to get the necessary data using APIs like OpenGraph.io. Using APIs like this, we wouldn't need to create a server to get the data. Unfortunately, most of those APIs have a limited amount of requests. OpenGraph.io, e.g., limits it to 100 requests.

As I don't want to pay anything to get Open Graph Data, I created a simple Netlify function that fetches Open Graph data using the open-source openGraphScraper library. This library is a simple node module for scraping Open Graph for any website.

In production, I am using the normal server environment for my Web Highlights application as I also wanted to provide some server-side caching to decrease the loading time. But, for this example, a simple Netlify function should be fine.

We can get the Open Graph data for any URL by importing the ogs object from the library:

And then fetch the data like this:

Afterward, we adapt the received SuccessResult interface to our expected OpenGraphMetaData interface by using an adapter function:

Here is what the Netlify handler looks like:

Now, in our frontend, we can get the needed metadata by fetching it from our endpoint:

Final Thoughts

Thanks for reading this article. I hope you could follow along to build your own link-preview component or reuse the one we created here. Notice that I can not guarantee that the provided Netlify API will be available forever. So, if you are planning to use this component in production, make sure to provide your own endpoint.

I am always happy to answer questions and am open to criticism. Feel free to contact me at any time! Get in touch with me via LinkedIn, follow me on Twitter, Medium, or subscribe to get my stories via email.

About the Author

I am a Software Engineering Analyst at Accenture Song. What drives me the most is my urge to create something that has the potential to be helpful and life-changing for others.

For example, are you tired of browsing your history to find the information you saw a few days ago? My Web Highlights Chrome Extension got you covered and will boost your productivity by organising your research in a structured and efficient way. Just like you do on books and articles, highlight text on any web page or PDF. Your highlights sync directly to the web app on web-highlights.com, where you can find them from anywhere.

Transform Mapped Types from Snake_ to CamelCase in Typescript

Marius Bongarts — Wed, 13 Jul 2022 06:04:40 +0000

Re-mapping Typescript Mapped Types

Transform Mapped Types from Snake_ to CamelCase in Typescript | by Marius Bongarts | Jul, 2022 | Medium

Marius Bongarts ・ Jul 13, 2022 ・
Medium

Web Components at Big Tech Companies: Salesforce

Marius Bongarts — Mon, 11 Jul 2022 06:19:27 +0000

If the enterprise can deploy web components so can you!

Web Components at Big Tech Companies: Salesforce | by Marius Bongarts | Jul, 2022 | Medium

Marius Bongarts ・ Jul 11, 2022 ・
Medium

Web Components at Big Tech Companies: Github

Marius Bongarts — Wed, 06 Jul 2022 14:36:42 +0000

Web Components at Big Tech Companies: Github | by Marius Bongarts | Jul, 2022 | Level Up Coding

Marius Bongarts ・ Jul 6, 2022 ・
Medium

Advanced TypeScript With Code Challenges: Mapped Types

Marius Bongarts — Mon, 04 Jul 2022 06:54:42 +0000

Advanced TypeScript With Code Challenges: Mapped Types | by Marius Bongarts | Jul, 2022 | Medium

Marius Bongarts ・ Jul 4, 2022 ・
Medium

How To Use Web Components in Vue.js

Marius Bongarts — Wed, 29 Jun 2022 13:15:39 +0000

They are built to solve different problems. Maybe, it is a combination of both!

How To Use Web Components in Vue.js | by Marius Bongarts | Jun, 2022 | Level Up Coding

Marius Bongarts ・ Jun 29, 2022 ・
Medium

Design Patterns With TypeScript Examples: Facade

Marius Bongarts — Mon, 27 Jun 2022 06:50:30 +0000

The Facade Pattern defines a higher-level interface to make subsystems easier to use.

Design Patterns With TypeScript Examples: Facade | by Marius Bongarts | Jun, 2022 | Medium

Marius Bongarts ・ Jun 27, 2022 ・
Medium

Advanced TypeScript With Code Challenges: Const Assertions

Marius Bongarts — Wed, 22 Jun 2022 06:39:53 +0000

Advanced TypeScript With Code Challenges: Const Assertions | by Marius Bongarts | Jun, 2022 | Medium

Marius Bongarts ・ Jun 22, 2022 ・
Medium

Are Web Components Dead?

Marius Bongarts — Mon, 20 Jun 2022 13:18:28 +0000

DEV Community: Marius Bongarts

Supercharge Your Learning: Convert Kindle Highlights into Instant Study Flashcards

How can I import my Kindle Highlights?

Recall your Highlights To Remember Them

Final Thoughts

Will Web Components Replace Frontend Frameworks?

Will Web Components Replace Frontend Frameworks?

SEO Strategies I Used to Gain 2,000 Users In Two Months

Product Marketing

Hosting a Blog on your Website

Creating Backlinks

Improve Website Structure

Final Thoughts

Building A Beautiful Link Preview With Web Components

Fetching Open Graph Data from URLs to show a thumbnail preview

Building the Web Component

Fetching Open Graph Data

Final Thoughts

About the Author

Transform Mapped Types from Snake_ to CamelCase in Typescript

Transform Mapped Types from Snake_ to CamelCase in Typescript | by Marius Bongarts | Jul, 2022 | Medium

Marius Bongarts ・ Jul 13, 2022 ・ Medium

Web Components at Big Tech Companies: Salesforce

Web Components at Big Tech Companies: Salesforce | by Marius Bongarts | Jul, 2022 | Medium

Marius Bongarts ・ Jul 11, 2022 ・ Medium

Web Components at Big Tech Companies: Github

Web Components at Big Tech Companies: Github | by Marius Bongarts | Jul, 2022 | Level Up Coding

Marius Bongarts ・ Jul 6, 2022 ・ Medium

Advanced TypeScript With Code Challenges: Mapped Types

Advanced TypeScript With Code Challenges: Mapped Types | by Marius Bongarts | Jul, 2022 | Medium

Marius Bongarts ・ Jul 4, 2022 ・ Medium

How To Use Web Components in Vue.js

How To Use Web Components in Vue.js | by Marius Bongarts | Jun, 2022 | Level Up Coding

Marius Bongarts ・ Jun 29, 2022 ・ Medium

Design Patterns With TypeScript Examples: Facade

Design Patterns With TypeScript Examples: Facade | by Marius Bongarts | Jun, 2022 | Medium

Marius Bongarts ・ Jun 27, 2022 ・ Medium

Advanced TypeScript With Code Challenges: Const Assertions

Advanced TypeScript With Code Challenges: Const Assertions | by Marius Bongarts | Jun, 2022 | Medium

Marius Bongarts ・ Jun 22, 2022 ・ Medium

Are Web Components Dead?

Are Web Components Dead?. Recently, I published an article with a… | by Marius Bongarts | Jun, 2022 | Level Up Coding

Marius Bongarts ・ Jun 20, 2022 ・ Medium

Marius Bongarts ・ Jul 13, 2022 ・
Medium

Marius Bongarts ・ Jul 11, 2022 ・
Medium

Marius Bongarts ・ Jul 6, 2022 ・
Medium

Marius Bongarts ・ Jul 4, 2022 ・
Medium

Marius Bongarts ・ Jun 29, 2022 ・
Medium

Marius Bongarts ・ Jun 27, 2022 ・
Medium

Marius Bongarts ・ Jun 22, 2022 ・
Medium

Marius Bongarts ・ Jun 20, 2022 ・
Medium