Add right click to mark as done/pending

src/components/InteractiveRoadmap/topic.js

@@ -21,8 +21,9 @@ export class Topic {
     this.handleOverlayClick = this.handleOverlayClick.bind(this);
     this.markAsDone = this.markAsDone.bind(this);
     this.markAsPending = this.markAsPending.bind(this);
-    this.queryRoadmapElementsByTopicId =
+    this.queryRoadmapElementsByTopicId = this.queryRoadmapElementsByTopicId.bind(this);
-      this.queryRoadmapElementsByTopicId.bind(this);
+    this.rightClickListener = this.rightClickListener.bind(this);
+    this.isTopicDone = this.isTopicDone.bind(this);
 
     this.init = this.init.bind(this);
   }
@@ -55,6 +56,20 @@ export class Topic {
     return document.getElementById(this.overlayId);
   }
 
+  rightClickListener(e) {
+    const groupId = e.target?.closest('g')?.dataset?.groupId;
+    if (!groupId) {
+      return;
+    }
+
+    e.preventDefault();
+    if (this.isTopicDone(groupId)) {
+      this.markAsPending(groupId);
+    } else {
+      this.markAsDone(groupId);
+    }
+  }
+
   resetDOM(hideOverlay = false) {
     if (hideOverlay) {
       this.overlayEl.classList.add('hidden');
@@ -75,6 +90,11 @@ export class Topic {
     this.activeTopicId = null;
   }
 
+  isTopicDone(topicId) {
+    const normalizedGroup = topicId.replace(/^\d+-/, '');
+    return localStorage.getItem(normalizedGroup) === 'done';
+  }
+
   /**
    * @param {string | HTMLElement} html
    */
@@ -84,8 +104,7 @@ export class Topic {
     this.topicActionsEl.classList.remove('hidden');
     this.contributionTextEl.classList.remove('hidden');
 
-    const normalizedGroup = (this.activeTopicId || '').replace(/^\d+-/, '');
+    const isDone = this.isTopicDone(this.activeTopicId);
-    const isDone = localStorage.getItem(normalizedGroup) === 'done';
 
     if (isDone) {
       this.markTopicDoneEl.classList.add('hidden');
@@ -140,9 +159,7 @@ export class Topic {
   }
 
   queryRoadmapElementsByTopicId(topicId) {
-    const elements = document.querySelectorAll(
+    const elements = document.querySelectorAll(`[data-group-id$="-${topicId}"]`);
-      `[data-group-id$="-${topicId}"]`
-    );
     const matchingElements = [];
 
     elements.forEach((element) => {
@@ -183,25 +200,19 @@ export class Topic {
       return;
     }
 
-    const isClickedDone =
+    const isClickedDone = e.target.id === this.markTopicDoneId || e.target.closest(`#${this.markTopicDoneId}`);
-      e.target.id === this.markTopicDoneId ||
-      e.target.closest(`#${this.markTopicDoneId}`);
     if (isClickedDone) {
       this.markAsDone(this.activeTopicId);
       this.close();
     }
 
-    const isClickedPending =
+    const isClickedPending = e.target.id === this.markTopicPendingId || e.target.closest(`#${this.markTopicPendingId}`);
-      e.target.id === this.markTopicPendingId ||
-      e.target.closest(`#${this.markTopicPendingId}`);
     if (isClickedPending) {
       this.markAsPending(this.activeTopicId);
       this.close();
     }
 
-    const isClickedClose =
+    const isClickedClose = e.target.id === this.closeTopicId || e.target.closest(`#${this.closeTopicId}`);
-      e.target.id === this.closeTopicId ||
-      e.target.closest(`#${this.closeTopicId}`);
     if (isClickedClose) {
       this.close();
     }
@@ -210,6 +221,8 @@ export class Topic {
   init() {
     window.addEventListener('topic.click', this.handleTopicClick);
     window.addEventListener('click', this.handleOverlayClick);
+    window.addEventListener('contextmenu', this.rightClickListener);
+
     window.addEventListener('keydown', (e) => {
       if (e.key.toLowerCase() === 'escape') {
         this.close();

src/roadmaps/system-design/content/112-caching/100-client-caching.md

@@ -1,8 +1,9 @@
-# Client caching
+# Client Caching
 
-Caches can be located on the client side (OS or browser), server side, or in a distinct cache layer.
+Client-side caching refers to the practice of storing frequently accessed data on the client's device rather than the server. This type of caching can help improve the performance of an application by reducing the number of times the client needs to request data from the server.
 
-To learn more, visit the following links:
+One common example of client-side caching is web browsers caching frequently accessed web pages and resources. When a user visits a web page, the browser stores a copy of the page and its resources (such as images, stylesheets, and scripts) in the browser's cache. If the user visits the same page again, the browser can retrieve the cached version of the page and its resources instead of requesting them from the server, which can reduce the load time of the page.
 
-- [Intro to Client Caching](https://github.com/donnemartin/system-design-primer#client%20caching)
+Another example of client-side caching is application-level caching. Some applications, such as mobile apps, can cache data on the client's device to improve performance and reduce the amount of data that needs to be transferred over the network.
-- [Server side Client Caching](https://github.com/donnemartin/system-design-primer#reverse-proxy-web-server)
+
+Client side caching has some advantages like reducing server load, faster page load times, and reducing network traffic. However, it also has some drawbacks like the potential for stale data if the client-side cache is not properly managed, or consuming memory or disk space on the client's device.

src/roadmaps/system-design/content/112-caching/101-cdn-caching.md

@@ -1,10 +1,7 @@
-# CDN caching
+# CDN Caching
 
-CDNs are considered a type of cache.
+A Content Delivery Network (CDN) is a distributed network of servers that are strategically placed in various locations around the world. The main purpose of a CDN is to serve content to end-users with high availability and high performance by caching frequently accessed content on servers that are closer to the end-users/
 
-A content delivery network (CDN) is a globally distributed network of proxy servers, serving content from locations closer to the user. Generally, static files such as HTML/CSS/JS, photos, and videos are served from CDN, although some CDNs such as Amazon's CloudFront support dynamic content. The site's DNS resolution will tell clients which server to contact.
+When a user requests content from a website that is using a CDN, the CDN will first check if the requested content is available in the cache of a nearby server. If the content is found in the cache, it is served to the user from the nearby server. If the content is not found in the cache, it is requested from the origin server (the original source of the content) and then cached on the nearby server for future requests.
 
-To learn more, visit the following links:
+CDN caching can significantly improve the performance and availability of a website by reducing the distance that data needs to travel, reducing the load on the origin server, and allowing for faster delivery of content to end-users.
-
-- [What is CDN Cache?](https://github.com/donnemartin/system-design-primer#CDN%20cache)
-- [CDN Caching](https://github.com/donnemartin/system-design-primer#content-delivery-network)

src/roadmaps/system-design/content/112-caching/102-web-server-caching.md

@@ -1,7 +1,3 @@
 # Web Server Caching
 
-Reverse proxies and caches such as Varnish can serve static and dynamic content directly. Web servers can also cache requests, returning responses without having to contact application servers.
+[Reverse proxies](https://github.com/donnemartin/system-design-primer#reverse-proxy-web-server) and caches such as [Varnish](https://www.varnish-cache.org/) can serve static and dynamic content directly. Web servers can also cache requests, returning responses without having to contact application servers.
-
-To learn more, visit the following links:
-
-- [Intro to Web Server Caching?](https://github.com/donnemartin/system-design-primer#web-server-caching)

src/roadmaps/system-design/content/112-caching/103-database-caching.md

@@ -1,7 +1,3 @@
 # Database Caching
 
-Your database usually includes some level of caching in a default configuration, optimized for a generic use case. Tweaking these settings for specific usage patterns can further boost performance.
+Your database usually includes some level of caching in a default configuration, optimized for a generic use case. Tweaking these settings for specific usage patterns can further boost performance.
-
-To learn more, visit the following links:
-
-- [Intro to Database-Caching?](https://github.com/donnemartin/system-design-primer#database-caching)

src/roadmaps/system-design/content/112-caching/104-application-caching.md

@@ -1,6 +1,13 @@
 # Application Caching
 
-In-memory caches such as Memcached and Redis are key-value stores between your application and your data storage. Since the data is held in RAM, it is much faster than typical databases where data is stored on disk. RAM is more limited than disk, so cache invalidation algorithms such as least recently used (LRU) can help invalidate 'cold' entries and keep 'hot' data in RAM.
+In-memory caches such as Memcached and Redis are key-value stores between your application and your data storage. Since the data is held in RAM, it is much faster than typical databases where data is stored on disk. RAM is more limited than disk, so [cache invalidation](https://en.wikipedia.org/wiki/Cache_algorithms) algorithms such as [least recently used (LRU)](https://en.wikipedia.org/wiki/Cache_replacement_policies#Least_recently_used_(LRU)) can help invalidate 'cold' entries and keep 'hot' data in RAM.
+
+Redis has the following additional features:
+
+- Persistence option
+- Built-in data structures such as sorted sets and lists
+
+Generally, you should try to avoid file-based caching, as it makes cloning and auto-scaling more difficult.
 
 Visit the following links to learn more:
 

src/roadmaps/system-design/content/112-caching/105-caching-strategies/index.md

@@ -1,24 +1 @@
 # Caching Strategies
-
-Caching improves page load times and can reduce the load on your servers and databases. In this model, the dispatcher will first lookup if the request has been made before and try to find the previous result to return, in order to save the actual execution.
-
-Databases often benefit from a uniform distribution of reads and writes across its partitions. Popular items can skew the distribution, causing bottlenecks. Putting a cache in front of a database can help absorb uneven loads and spikes in traffic.
-
-## Client caching
-Caches can be located on the client side (OS or browser), server side, or in a distinct cache layer.
-
-## CDN caching
-CDNs are considered a type of cache.
-
-## Web server caching
-Reverse proxies and caches such as Varnish can serve static and dynamic content directly. Web servers can also cache requests, returning responses without having to contact application servers.
-
-## Database caching
-Your database usually includes some level of caching in a default configuration, optimized for a generic use case. Tweaking these settings for specific usage patterns can further boost performance.
-
-## Application caching
-In-memory caches such as Memcached and Redis are key-value stores between your application and your data storage. Since the data is held in RAM, it is much faster than typical databases where data is stored on disk. RAM is more limited than disk, so cache invalidation algorithms such as least recently used (LRU) can help invalidate 'cold' entries and keep 'hot' data in RAM.
-
-To learn more, visit the following links:
-
-- [Getting started with Cache](https://github.com/donnemartin/system-design-primer#cache)

src/roadmaps/system-design/content/112-caching/index.md

@@ -1,25 +1,18 @@
 # Caching
 
-Caching improves page load times and can reduce the load on your servers and databases. In this model, the dispatcher will first lookup if the request has been made before and try to find the previous result to return, in order to save the actual execution.
+Caching is the process of storing frequently accessed data in a temporary storage location, called a cache, in order to quickly retrieve it without the need to query the original data source. This can improve the performance of an application by reducing the number of times a data source must be accessed.
 
-Databases often benefit from a uniform distribution of reads and writes across its partitions. Popular items can skew the distribution, causing bottlenecks. Putting a cache in front of a database can help absorb uneven loads and spikes in traffic.
+There are several caching strategies:
 
-## Client caching
+- Refresh Ahead
-Caches can be located on the client side (OS or browser), server side, or in a distinct cache layer.
+- Write-Behind
+- Write-through
+- Cache Aside
 
-## CDN caching
+Also, you can have the cache in several places, examples include:
-CDNs are considered a type of cache.
 
-## Web server caching
+- Client Caching
-Reverse proxies and caches such as Varnish can serve static and dynamic content directly. Web servers can also cache requests, returning responses without having to contact application servers.
+- CDN Caching
-
+- Web Server Caching
-## Database caching
+- Database Caching
-Your database usually includes some level of caching in a default configuration, optimized for a generic use case. Tweaking these settings for specific usage patterns can further boost performance.
+- Application Caching
-
-## Application caching
-In-memory caches such as Memcached and Redis are key-value stores between your application and your data storage. Since the data is held in RAM, it is much faster than typical databases where data is stored on disk. RAM is more limited than disk, so cache invalidation algorithms such as least recently used (LRU) can help invalidate 'cold' entries and keep 'hot' data in RAM.
-
-To learn more, visit the following links:
-
-- [Getting started with Cache](https://github.com/donnemartin/system-design-primer#cache)
-- [From cache to in-memory data grid](https://www.slideshare.net/tmatyashovsky/from-cache-to-in-memory-data-grid-introduction-to-hazelcast)