Skip to content
This repository was archived by the owner on Sep 10, 2025. It is now read-only.

Commit b25a3e9

Browse files
openrocketsofficialopenrocketsofficial
committed
updated
1 parent 872b3a6 commit b25a3e9

4 files changed

Lines changed: 101 additions & 62 deletions

File tree

‎body.txt‎

Lines changed: 43 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,53 @@
11

2-
## Description of the Error
3-
4-
A common performance problem in MongoDB stems from the overuse or misuse of wildcard indexes, particularly with the `$regex` operator and excessive wildcard characters (`*`). Wildcard indexes, while offering flexibility in querying, can significantly hinder query performance if not implemented carefully. MongoDB struggles to efficiently utilize wildcard indexes, especially those starting with `.*` (matching anything), leading to collection scans instead of index lookups. This results in slow query times and increased server load, especially as the collection grows.
5-
6-
7-
## Fixing Step-by-Step Code
8-
9-
Let's assume we have a collection named `products` with a field `description` where we're frequently searching using `$regex` with wildcards. Initially, we might have created an index like this:
10-
11-
```javascript
12-
db.products.createIndex( { description: "text" } ); //This is actually a text index, not a regular expression index
13-
```
14-
15-
This text index is suitable for full-text search but might not be optimal for all regex queries. A common mistake is to create a wildcard index like this which often is not very efficient:
16-
17-
```javascript
18-
db.products.createIndex( { description: 1 } ); //This is actually a simple index
19-
```
20-
21-
22-
This is inefficient for wildcard searches. A better approach involves creating more specific indexes tailored to common search patterns, avoiding excessive wildcards.
23-
24-
**Improved Indexing Strategy:**
25-
26-
Instead of a single wildcard index, let's create multiple compound indexes for specific search prefixes that frequently appear in queries:
27-
28-
```javascript
29-
// Index for queries starting with "Laptop"
30-
db.products.createIndex( { description: { $regex: /^Laptop/ } } );
31-
32-
// Index for queries starting with "Smart"
33-
db.products.createIndex( { description: { $regex: /^Smart/ } } );
34-
35-
// Index for queries containing "high-resolution"
36-
db.products.createIndex( { description: { $regex: /high-resolution/ } } );
37-
38-
// Add this text index for more complex queries
39-
db.products.createIndex( { description: "text" } );
40-
```
41-
42-
43-
**Fixing the Query:**
44-
45-
Ensure your queries are also optimized. Avoid using `.*` at the beginning of your regex unless absolutely necessary. For instance, instead of:
46-
47-
```javascript
48-
db.products.find({ description: /.*laptop.*/i })
49-
```
50-
51-
Use more specific queries when possible:
52-
53-
```javascript
54-
db.products.find({ description: /laptop/i }) //If only interested in presence of laptop
55-
db.products.find({ description: /^Laptop/i }) //If interested in laptop at the beginning
2+
This challenge focuses on creating a visually appealing circular progress bar using Tailwind CSS. We'll leverage Tailwind's utility classes to simplify the styling process and achieve a clean, modern look. The progress bar will be dynamic, allowing you to easily adjust the percentage displayed.
3+
4+
**Description of the Styling:**
5+
6+
The progress bar consists of a circular base and a filled arc representing the progress percentage. We'll use Tailwind's `relative`, `bg-gray-300`, `rounded-full`, and other utility classes to style the base circle. The filled arc will be created using an absolutely positioned pseudo-element (`::before`) with a background color, rotated using `transform: rotate()`, and styled to be a semi-circle using `clip-path`. The percentage will be displayed in the center of the circle.
7+
8+
**Full Code:**
9+
10+
```html
11+
<!DOCTYPE html>
12+
<html>
13+
<head>
14+
<meta charset="UTF-8">
15+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
16+
<title>Circular Progress Bar</title>
17+
<script src="https://cdn.tailwindcss.com"></script>
18+
</head>
19+
<body class="bg-gray-100">
20+
21+
<div class="flex justify-center items-center h-screen">
22+
<div class="relative w-48 h-48">
23+
<div class="absolute w-full h-full rounded-full bg-gray-300"></div>
24+
<div class="absolute w-full h-full rounded-full bg-blue-500"
25+
style="clip-path: circle(50% at 50% 100%); transform: rotate(225deg);">
26+
</div>
27+
<div class="absolute text-center w-full text-white">
28+
<span class="text-2xl font-bold">75%</span>
29+
</div>
30+
</div>
31+
</div>
32+
33+
</body>
34+
</html>
5635
```
5736

37+
**Explanation:**
5838

59-
## Explanation
39+
* **Outer `div`:** Sets up the container for the progress bar, centering it on the page using Tailwind's flexbox utilities.
40+
* **Inner `divs`:**
41+
* The first inner `div` creates the base circle using `rounded-full` and a gray background.
42+
* The second inner `div` (pseudo-element) creates the filled arc. `clip-path: circle(50% at 50% 100%);` cuts the circle in half, creating a semi-circle. `transform: rotate(225deg);` rotates this semi-circle to represent the progress (75% in this case, which is 270 degrees * 75/100 = 202.5 degrees. We use 225 to adjust for starting position). Adjust the `rotate` value to change the percentage.
43+
* The third `div` displays the percentage value in the center.
6044

61-
The problem lies in how MongoDB uses indexes. Indexes are fundamentally B-tree structures. Wildcard indexes, especially those starting with `.*`, are difficult to efficiently traverse. The database might end up scanning a large portion of the collection even with the index present. Creating multiple, more specific indexes allows MongoDB to narrow down the search space quickly, relying on index lookups rather than collection scans. This solution emphasizes creating indexes that precisely match the structure of the most common queries using regex.
6245

63-
## External References
46+
**Links to Resources to Learn More:**
6447

65-
* [MongoDB Indexing Documentation](https://www.mongodb.com/docs/manual/indexes/)
66-
* [MongoDB Regular Expression Indexes](https://www.mongodb.com/docs/manual/reference/operator/query/regex/)
67-
* [Understanding MongoDB Performance](https://www.mongodb.com/blog/post/understanding-mongodb-performance)
48+
* **Tailwind CSS Documentation:** [https://tailwindcss.com/docs](https://tailwindcss.com/docs) - Comprehensive documentation on Tailwind CSS.
49+
* **CSS `clip-path` Property:** [https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path](https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path) - Learn more about the `clip-path` property for creating custom shapes.
50+
* **Flexbox in CSS:** [https://css-tricks.com/snippets/css/a-guide-to-flexbox/](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) - Understanding flexbox for layout.
6851

6952

7053
Copyrights (c) OpenRockets Open-source Network. Free to use, copy, share, edit or publish.

‎errors/css/css-challenge-building-a-circular-progress-bar-with-tailwind-css/README.md‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
# 🐞 CSS Challenge: Building a Circular Progress Bar with Tailwind CSS
2+
3+
4+
This challenge focuses on creating a visually appealing circular progress bar using Tailwind CSS. We'll leverage Tailwind's utility classes to simplify the styling process and achieve a clean, modern look. The progress bar will be dynamic, allowing you to easily adjust the percentage displayed.
5+
6+
**Description of the Styling:**
7+
8+
The progress bar consists of a circular base and a filled arc representing the progress percentage. We'll use Tailwind's `relative`, `bg-gray-300`, `rounded-full`, and other utility classes to style the base circle. The filled arc will be created using an absolutely positioned pseudo-element (`::before`) with a background color, rotated using `transform: rotate()`, and styled to be a semi-circle using `clip-path`. The percentage will be displayed in the center of the circle.
9+
10+
**Full Code:**
11+
12+
```html
13+
<!DOCTYPE html>
14+
<html>
15+
<head>
16+
<meta charset="UTF-8">
17+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
18+
<title>Circular Progress Bar</title>
19+
<script src="https://cdn.tailwindcss.com"></script>
20+
</head>
21+
<body class="bg-gray-100">
22+
23+
<div class="flex justify-center items-center h-screen">
24+
<div class="relative w-48 h-48">
25+
<div class="absolute w-full h-full rounded-full bg-gray-300"></div>
26+
<div class="absolute w-full h-full rounded-full bg-blue-500"
27+
style="clip-path: circle(50% at 50% 100%); transform: rotate(225deg);">
28+
</div>
29+
<div class="absolute text-center w-full text-white">
30+
<span class="text-2xl font-bold">75%</span>
31+
</div>
32+
</div>
33+
</div>
34+
35+
</body>
36+
</html>
37+
```
38+
39+
**Explanation:**
40+
41+
* **Outer `div`:** Sets up the container for the progress bar, centering it on the page using Tailwind's flexbox utilities.
42+
* **Inner `divs`:**
43+
* The first inner `div` creates the base circle using `rounded-full` and a gray background.
44+
* The second inner `div` (pseudo-element) creates the filled arc. `clip-path: circle(50% at 50% 100%);` cuts the circle in half, creating a semi-circle. `transform: rotate(225deg);` rotates this semi-circle to represent the progress (75% in this case, which is 270 degrees * 75/100 = 202.5 degrees. We use 225 to adjust for starting position). Adjust the `rotate` value to change the percentage.
45+
* The third `div` displays the percentage value in the center.
46+
47+
48+
**Links to Resources to Learn More:**
49+
50+
* **Tailwind CSS Documentation:** [https://tailwindcss.com/docs](https://tailwindcss.com/docs) - Comprehensive documentation on Tailwind CSS.
51+
* **CSS `clip-path` Property:** [https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path](https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path) - Learn more about the `clip-path` property for creating custom shapes.
52+
* **Flexbox in CSS:** [https://css-tricks.com/snippets/css/a-guide-to-flexbox/](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) - Understanding flexbox for layout.
53+
54+
55+
Copyrights (c) OpenRockets Open-source Network. Free to use, copy, share, edit or publish.
56+

‎latest-issue.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
[{"body":"\n## Description of the Error\n\nA common performance problem in MongoDB stems from the overuse or misuse of wildcard indexes, particularly with the `$regex` operator and excessive wildcard characters (`*`). Wildcard indexes, while offering flexibility in querying, can significantly hinder query performance if not implemented carefully. MongoDB struggles to efficiently utilize wildcard indexes, especially those starting with `.*` (matching anything), leading to collection scans instead of index lookups. This results in slow query times and increased server load, especially as the collection grows.\n\n\n## Fixing Step-by-Step Code\n\nLet's assume we have a collection named `products` with a field `description` where we're frequently searching using `$regex` with wildcards. Initially, we might have created an index like this:\n\n```javascript\ndb.products.createIndex( { description: \"text\" } ); //This is actually a text index, not a regular expression index\n```\n\nThis text index is suitable for full-text search but might not be optimal for all regex queries. A common mistake is to create a wildcard index like this which often is not very efficient:\n\n```javascript\ndb.products.createIndex( { description: 1 } ); //This is actually a simple index\n```\n\n\nThis is inefficient for wildcard searches. A better approach involves creating more specific indexes tailored to common search patterns, avoiding excessive wildcards.\n\n**Improved Indexing Strategy:**\n\nInstead of a single wildcard index, let's create multiple compound indexes for specific search prefixes that frequently appear in queries:\n\n```javascript\n// Index for queries starting with \"Laptop\"\ndb.products.createIndex( { description: { $regex: /^Laptop/ } } );\n\n// Index for queries starting with \"Smart\"\ndb.products.createIndex( { description: { $regex: /^Smart/ } } );\n\n// Index for queries containing \"high-resolution\"\ndb.products.createIndex( { description: { $regex: /high-resolution/ } } );\n\n// Add this text index for more complex queries\ndb.products.createIndex( { description: \"text\" } );\n```\n\n\n**Fixing the Query:**\n\nEnsure your queries are also optimized. Avoid using `.*` at the beginning of your regex unless absolutely necessary. For instance, instead of:\n\n```javascript\ndb.products.find({ description: /.*laptop.*/i })\n```\n\nUse more specific queries when possible:\n\n```javascript\ndb.products.find({ description: /laptop/i }) //If only interested in presence of laptop\ndb.products.find({ description: /^Laptop/i }) //If interested in laptop at the beginning\n```\n\n\n## Explanation\n\nThe problem lies in how MongoDB uses indexes. Indexes are fundamentally B-tree structures. Wildcard indexes, especially those starting with `.*`, are difficult to efficiently traverse. The database might end up scanning a large portion of the collection even with the index present. Creating multiple, more specific indexes allows MongoDB to narrow down the search space quickly, relying on index lookups rather than collection scans. This solution emphasizes creating indexes that precisely match the structure of the most common queries using regex.\n\n## External References\n\n* [MongoDB Indexing Documentation](https://www.mongodb.com/docs/manual/indexes/)\n* [MongoDB Regular Expression Indexes](https://www.mongodb.com/docs/manual/reference/operator/query/regex/)\n* [Understanding MongoDB Performance](https://www.mongodb.com/blog/post/understanding-mongodb-performance)\n\n\nCopyrights (c) OpenRockets Open-source Network. Free to use, copy, share, edit or publish.\n","number":2001,"title":"MongoDB: Overuse of Wildcard Indexes Leading to Performance Degradation"}]
1+
[{"body":"\nThis challenge focuses on creating a visually appealing circular progress bar using Tailwind CSS. We'll leverage Tailwind's utility classes to simplify the styling process and achieve a clean, modern look. The progress bar will be dynamic, allowing you to easily adjust the percentage displayed.\n\n**Description of the Styling:**\n\nThe progress bar consists of a circular base and a filled arc representing the progress percentage. We'll use Tailwind's `relative`, `bg-gray-300`, `rounded-full`, and other utility classes to style the base circle. The filled arc will be created using an absolutely positioned pseudo-element (`::before`) with a background color, rotated using `transform: rotate()`, and styled to be a semi-circle using `clip-path`. The percentage will be displayed in the center of the circle.\n\n**Full Code:**\n\n```html\n<!DOCTYPE html>\n<html>\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Circular Progress Bar</title>\n <script src=\"https://cdn.tailwindcss.com\"></script>\n</head>\n<body class=\"bg-gray-100\">\n\n<div class=\"flex justify-center items-center h-screen\">\n <div class=\"relative w-48 h-48\">\n <div class=\"absolute w-full h-full rounded-full bg-gray-300\"></div>\n <div class=\"absolute w-full h-full rounded-full bg-blue-500\" \n style=\"clip-path: circle(50% at 50% 100%); transform: rotate(225deg);\">\n </div>\n <div class=\"absolute text-center w-full text-white\">\n <span class=\"text-2xl font-bold\">75%</span>\n </div>\n </div>\n</div>\n\n</body>\n</html>\n```\n\n**Explanation:**\n\n* **Outer `div`:** Sets up the container for the progress bar, centering it on the page using Tailwind's flexbox utilities.\n* **Inner `divs`:**\n * The first inner `div` creates the base circle using `rounded-full` and a gray background.\n * The second inner `div` (pseudo-element) creates the filled arc. `clip-path: circle(50% at 50% 100%);` cuts the circle in half, creating a semi-circle. `transform: rotate(225deg);` rotates this semi-circle to represent the progress (75% in this case, which is 270 degrees * 75/100 = 202.5 degrees. We use 225 to adjust for starting position). Adjust the `rotate` value to change the percentage.\n * The third `div` displays the percentage value in the center.\n\n\n**Links to Resources to Learn More:**\n\n* **Tailwind CSS Documentation:** [https://tailwindcss.com/docs](https://tailwindcss.com/docs) - Comprehensive documentation on Tailwind CSS.\n* **CSS `clip-path` Property:** [https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path](https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path) - Learn more about the `clip-path` property for creating custom shapes.\n* **Flexbox in CSS:** [https://css-tricks.com/snippets/css/a-guide-to-flexbox/](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) - Understanding flexbox for layout.\n\n\nCopyrights (c) OpenRockets Open-source Network. Free to use, copy, share, edit or publish.\n","number":2002,"title":"CSS Challenge: Building a Circular Progress Bar with Tailwind CSS"}]

‎title.txt‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
MongoDB: Overuse of Wildcard Indexes Leading to Performance Degradation
1+
CSS Challenge: Building a Circular Progress Bar with Tailwind CSS

0 commit comments

Comments
 (0)