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

Commit 068c082

Browse files
openrocketsofficialopenrocketsofficial
committed
updated
1 parent c490cc0 commit 068c082

4 files changed

Lines changed: 246 additions & 56 deletions

File tree

‎body.txt‎

Lines changed: 115 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,126 @@
11

2-
## Description of the Error
3-
4-
Over-indexing in MongoDB, while seemingly beneficial for query performance, can significantly degrade write performance and overall database efficiency. Adding too many indexes increases the overhead of write operations (inserts, updates, deletes) as the database must update all affected indexes with every change. This can lead to slower application response times, especially in high-write environments. The extra disk space consumed by numerous indexes also contributes to this problem. While a few well-chosen indexes are crucial, excessive indexing is counterproductive.
5-
6-
## Fixing Step-by-Step
7-
8-
This example demonstrates identifying and removing unnecessary indexes on a collection named "products" with the following hypothetical indexes:
9-
10-
* `{"product_name": 1}`
11-
* `{"category": 1}`
12-
* `{"price": 1}`
13-
* `{"product_name": 1, "category": 1}` (Compound Index)
14-
* `{"price": 1, "in_stock": 1}` (Compound Index)
15-
16-
17-
Let's assume that queries using `product_name` and `category` together are rare, making the compound index `{"product_name": 1, "category": 1}` redundant given the existence of the individual indexes. Similarly, the `{"price": 1}` index might be sufficient, making `{"price": 1, "in_stock": 1}` redundant if queries rarely filter by both.
18-
19-
**Step 1: Identify Redundant Indexes (using mongo shell)**
20-
21-
Connect to your MongoDB instance and access the database containing the "products" collection. Then list all indexes:
22-
23-
```bash
24-
use your_database_name
25-
db.products.getIndexes()
26-
```
27-
28-
This will output a JSON array of all indexes on the "products" collection. Analyze the output to identify potentially redundant indexes based on your query patterns.
29-
30-
**Step 2: Drop Unnecessary Indexes (using mongo shell)**
31-
32-
Let's assume we've determined that `{"product_name": 1, "category": 1}` and `{"price": 1, "in_stock": 1}` are redundant. We'll drop them using the following commands:
33-
34-
35-
```bash
36-
db.products.dropIndex({"product_name": 1, "category": 1})
37-
db.products.dropIndex({"price": 1, "in_stock": 1})
2+
This challenge focuses on creating a responsive navigation bar with dropdown submenus using CSS. The navigation bar should adapt smoothly to different screen sizes, ensuring a good user experience on both desktop and mobile devices. We'll use plain CSS for this example, focusing on fundamental concepts.
3+
4+
5+
**Description of the Styling:**
6+
7+
The navigation bar will contain a logo on the left, a list of main menu items, and a toggle button for smaller screens. When a main menu item is hovered over (or tapped on mobile), a submenu will appear with additional links. The styling will emphasize clean aesthetics and smooth transitions. The overall design will aim for a modern, minimalist look.
8+
9+
10+
**Full Code:**
11+
12+
```html
13+
<!DOCTYPE html>
14+
<html>
15+
<head>
16+
<title>Responsive Navigation Bar</title>
17+
<style>
18+
nav {
19+
background-color: #333;
20+
overflow: hidden;
21+
}
22+
23+
nav ul {
24+
list-style-type: none;
25+
margin: 0;
26+
padding: 0;
27+
overflow: hidden;
28+
}
29+
30+
nav li {
31+
float: left;
32+
}
33+
34+
nav li a {
35+
display: block;
36+
color: white;
37+
text-align: center;
38+
padding: 14px 16px;
39+
text-decoration: none;
40+
}
41+
42+
nav li a:hover {
43+
background-color: #ddd;
44+
color: black;
45+
}
46+
47+
.submenu {
48+
display: none;
49+
position: absolute;
50+
background-color: #f9f9f9;
51+
min-width: 160px;
52+
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
53+
z-index: 1;
54+
}
55+
56+
nav li:hover .submenu {
57+
display: block;
58+
}
59+
60+
/* Mobile responsiveness */
61+
@media screen and (max-width: 600px) {
62+
nav li {
63+
float: none;
64+
}
65+
66+
nav li a {
67+
display: block;
68+
text-align: left;
69+
}
70+
71+
.submenu {
72+
position: static;
73+
}
74+
}
75+
76+
/* Logo Styling */
77+
.logo {
78+
float: left;
79+
padding: 14px 16px;
80+
}
81+
82+
.logo img {
83+
height: 30px;
84+
}
85+
</style>
86+
</head>
87+
<body>
88+
89+
<nav>
90+
<div class="logo"><img src="logo.png" alt="Logo"></div> <!-- Replace logo.png with your logo -->
91+
<ul>
92+
<li><a href="#">Home</a></li>
93+
<li><a href="#">About</a></li>
94+
<li><a href="#">Services</a>
95+
<ul class="submenu">
96+
<li><a href="#">Service 1</a></li>
97+
<li><a href="#">Service 2</a></li>
98+
<li><a href="#">Service 3</a></li>
99+
</ul>
100+
</li>
101+
<li><a href="#">Contact</a></li>
102+
</ul>
103+
</nav>
104+
105+
</body>
106+
</html>
38107
```
39108

40-
**Step 3: Verify Index Removal (using mongo shell)**
41-
42-
Re-run `db.products.getIndexes()` to confirm that the indexes have been successfully removed.
43-
44-
**Step 4: Monitor Performance**
45-
46-
Monitor your application's performance after removing the indexes to observe improvements in write operations. You might need to use performance monitoring tools to track write times and disk I/O.
47-
48-
## Explanation
49-
50-
Choosing the right indexes is crucial for optimization. Over-indexing leads to:
51109

52-
* **Increased Write Overhead:** Every write operation requires updating all relevant indexes, slowing down inserts, updates, and deletes.
53-
* **Increased Storage Usage:** More indexes mean more storage space consumed.
54-
* **Slower Query Performance (in some cases):** Ironically, an excessive number of indexes can sometimes hinder query performance due to the increased overhead. The database needs to evaluate many indexes before deciding which one to use, thus slowing down query planning.
110+
**Explanation:**
55111

56-
Proper index selection involves understanding your application's query patterns. Use indexes only for frequently used query filters. Consider compound indexes only if queries frequently combine multiple fields. Analyze your application’s queries using the MongoDB profiler to identify which indexes are used frequently and which are not.
112+
* The main navigation uses a simple unordered list (`<ul>`) with list items (`<li>`) for each menu item.
113+
* Floats are used to position the menu items horizontally.
114+
* The `submenu` class is hidden by default and uses absolute positioning to appear below its parent list item. `display: block;` on hover makes it visible.
115+
* Media queries handle the responsive behavior for smaller screens. On smaller screens, the floats are removed, and the submenu becomes statically positioned, simplifying the layout.
116+
* A logo is added for completeness. Remember to replace `"logo.png"` with an actual logo image.
57117

58118

59-
## External References
119+
**Links to Resources to Learn More:**
60120

61-
* **MongoDB Documentation on Indexes:** [https://www.mongodb.com/docs/manual/indexes/](https://www.mongodb.com/docs/manual/indexes/)
62-
* **MongoDB Performance Tuning Guide:** [https://www.mongodb.com/docs/manual/administration/performance/](https://www.mongodb.com/docs/manual/administration/performance/)
121+
* **MDN Web Docs CSS:** [https://developer.mozilla.org/en-US/docs/Web/CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) (Comprehensive CSS reference)
122+
* **CSS-Tricks:** [https://css-tricks.com/](https://css-tricks.com/) (Great articles and tutorials on CSS)
123+
* **W3Schools CSS Tutorial:** [https://www.w3schools.com/css/](https://www.w3schools.com/css/) (Beginner-friendly CSS tutorial)
63124

64125

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

‎errors/css/css-challenge-responsive-navigation-bar-with-submenus/README.md‎

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
# 🐞 CSS Challenge: Responsive Navigation Bar with Submenus
2+
3+
4+
This challenge focuses on creating a responsive navigation bar with dropdown submenus using CSS. The navigation bar should adapt smoothly to different screen sizes, ensuring a good user experience on both desktop and mobile devices. We'll use plain CSS for this example, focusing on fundamental concepts.
5+
6+
7+
**Description of the Styling:**
8+
9+
The navigation bar will contain a logo on the left, a list of main menu items, and a toggle button for smaller screens. When a main menu item is hovered over (or tapped on mobile), a submenu will appear with additional links. The styling will emphasize clean aesthetics and smooth transitions. The overall design will aim for a modern, minimalist look.
10+
11+
12+
**Full Code:**
13+
14+
```html
15+
<!DOCTYPE html>
16+
<html>
17+
<head>
18+
<title>Responsive Navigation Bar</title>
19+
<style>
20+
nav {
21+
background-color: #333;
22+
overflow: hidden;
23+
}
24+
25+
nav ul {
26+
list-style-type: none;
27+
margin: 0;
28+
padding: 0;
29+
overflow: hidden;
30+
}
31+
32+
nav li {
33+
float: left;
34+
}
35+
36+
nav li a {
37+
display: block;
38+
color: white;
39+
text-align: center;
40+
padding: 14px 16px;
41+
text-decoration: none;
42+
}
43+
44+
nav li a:hover {
45+
background-color: #ddd;
46+
color: black;
47+
}
48+
49+
.submenu {
50+
display: none;
51+
position: absolute;
52+
background-color: #f9f9f9;
53+
min-width: 160px;
54+
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
55+
z-index: 1;
56+
}
57+
58+
nav li:hover .submenu {
59+
display: block;
60+
}
61+
62+
/* Mobile responsiveness */
63+
@media screen and (max-width: 600px) {
64+
nav li {
65+
float: none;
66+
}
67+
68+
nav li a {
69+
display: block;
70+
text-align: left;
71+
}
72+
73+
.submenu {
74+
position: static;
75+
}
76+
}
77+
78+
/* Logo Styling */
79+
.logo {
80+
float: left;
81+
padding: 14px 16px;
82+
}
83+
84+
.logo img {
85+
height: 30px;
86+
}
87+
</style>
88+
</head>
89+
<body>
90+
91+
<nav>
92+
<div class="logo"><img src="logo.png" alt="Logo"></div> <!-- Replace logo.png with your logo -->
93+
<ul>
94+
<li><a href="#">Home</a></li>
95+
<li><a href="#">About</a></li>
96+
<li><a href="#">Services</a>
97+
<ul class="submenu">
98+
<li><a href="#">Service 1</a></li>
99+
<li><a href="#">Service 2</a></li>
100+
<li><a href="#">Service 3</a></li>
101+
</ul>
102+
</li>
103+
<li><a href="#">Contact</a></li>
104+
</ul>
105+
</nav>
106+
107+
</body>
108+
</html>
109+
```
110+
111+
112+
**Explanation:**
113+
114+
* The main navigation uses a simple unordered list (`<ul>`) with list items (`<li>`) for each menu item.
115+
* Floats are used to position the menu items horizontally.
116+
* The `submenu` class is hidden by default and uses absolute positioning to appear below its parent list item. `display: block;` on hover makes it visible.
117+
* Media queries handle the responsive behavior for smaller screens. On smaller screens, the floats are removed, and the submenu becomes statically positioned, simplifying the layout.
118+
* A logo is added for completeness. Remember to replace `"logo.png"` with an actual logo image.
119+
120+
121+
**Links to Resources to Learn More:**
122+
123+
* **MDN Web Docs CSS:** [https://developer.mozilla.org/en-US/docs/Web/CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) (Comprehensive CSS reference)
124+
* **CSS-Tricks:** [https://css-tricks.com/](https://css-tricks.com/) (Great articles and tutorials on CSS)
125+
* **W3Schools CSS Tutorial:** [https://www.w3schools.com/css/](https://www.w3schools.com/css/) (Beginner-friendly CSS tutorial)
126+
127+
128+
Copyrights (c) OpenRockets Open-source Network. Free to use, copy, share, edit or publish.
129+

‎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\nOver-indexing in MongoDB, while seemingly beneficial for query performance, can significantly degrade write performance and overall database efficiency. Adding too many indexes increases the overhead of write operations (inserts, updates, deletes) as the database must update all affected indexes with every change. This can lead to slower application response times, especially in high-write environments. The extra disk space consumed by numerous indexes also contributes to this problem. While a few well-chosen indexes are crucial, excessive indexing is counterproductive.\n\n## Fixing Step-by-Step\n\nThis example demonstrates identifying and removing unnecessary indexes on a collection named \"products\" with the following hypothetical indexes:\n\n* `{\"product_name\": 1}`\n* `{\"category\": 1}`\n* `{\"price\": 1}`\n* `{\"product_name\": 1, \"category\": 1}` (Compound Index)\n* `{\"price\": 1, \"in_stock\": 1}` (Compound Index)\n\n\nLet's assume that queries using `product_name` and `category` together are rare, making the compound index `{\"product_name\": 1, \"category\": 1}` redundant given the existence of the individual indexes. Similarly, the `{\"price\": 1}` index might be sufficient, making `{\"price\": 1, \"in_stock\": 1}` redundant if queries rarely filter by both.\n\n**Step 1: Identify Redundant Indexes (using mongo shell)**\n\nConnect to your MongoDB instance and access the database containing the \"products\" collection. Then list all indexes:\n\n```bash\nuse your_database_name\ndb.products.getIndexes()\n```\n\nThis will output a JSON array of all indexes on the \"products\" collection. Analyze the output to identify potentially redundant indexes based on your query patterns.\n\n**Step 2: Drop Unnecessary Indexes (using mongo shell)**\n\nLet's assume we've determined that `{\"product_name\": 1, \"category\": 1}` and `{\"price\": 1, \"in_stock\": 1}` are redundant. We'll drop them using the following commands:\n\n\n```bash\ndb.products.dropIndex({\"product_name\": 1, \"category\": 1})\ndb.products.dropIndex({\"price\": 1, \"in_stock\": 1})\n```\n\n**Step 3: Verify Index Removal (using mongo shell)**\n\nRe-run `db.products.getIndexes()` to confirm that the indexes have been successfully removed.\n\n**Step 4: Monitor Performance**\n\nMonitor your application's performance after removing the indexes to observe improvements in write operations. You might need to use performance monitoring tools to track write times and disk I/O.\n\n## Explanation\n\nChoosing the right indexes is crucial for optimization. Over-indexing leads to:\n\n* **Increased Write Overhead:** Every write operation requires updating all relevant indexes, slowing down inserts, updates, and deletes.\n* **Increased Storage Usage:** More indexes mean more storage space consumed.\n* **Slower Query Performance (in some cases):** Ironically, an excessive number of indexes can sometimes hinder query performance due to the increased overhead. The database needs to evaluate many indexes before deciding which one to use, thus slowing down query planning.\n\nProper index selection involves understanding your application's query patterns. Use indexes only for frequently used query filters. Consider compound indexes only if queries frequently combine multiple fields. Analyze your application’s queries using the MongoDB profiler to identify which indexes are used frequently and which are not.\n\n\n## External References\n\n* **MongoDB Documentation on Indexes:** [https://www.mongodb.com/docs/manual/indexes/](https://www.mongodb.com/docs/manual/indexes/)\n* **MongoDB Performance Tuning Guide:** [https://www.mongodb.com/docs/manual/administration/performance/](https://www.mongodb.com/docs/manual/administration/performance/)\n\n\nCopyrights (c) OpenRockets Open-source Network. Free to use, copy, share, edit or publish.\n","number":2008,"title":"Overusing Indexes in MongoDB and Performance Degradation"}]
1+
[{"body":"\nThis challenge focuses on creating a responsive navigation bar with dropdown submenus using CSS. The navigation bar should adapt smoothly to different screen sizes, ensuring a good user experience on both desktop and mobile devices. We'll use plain CSS for this example, focusing on fundamental concepts.\n\n\n**Description of the Styling:**\n\nThe navigation bar will contain a logo on the left, a list of main menu items, and a toggle button for smaller screens. When a main menu item is hovered over (or tapped on mobile), a submenu will appear with additional links. The styling will emphasize clean aesthetics and smooth transitions. The overall design will aim for a modern, minimalist look.\n\n\n**Full Code:**\n\n```html\n<!DOCTYPE html>\n<html>\n<head>\n<title>Responsive Navigation Bar</title>\n<style>\nnav {\n background-color: #333;\n overflow: hidden;\n}\n\nnav ul {\n list-style-type: none;\n margin: 0;\n padding: 0;\n overflow: hidden;\n}\n\nnav li {\n float: left;\n}\n\nnav li a {\n display: block;\n color: white;\n text-align: center;\n padding: 14px 16px;\n text-decoration: none;\n}\n\nnav li a:hover {\n background-color: #ddd;\n color: black;\n}\n\n.submenu {\n display: none;\n position: absolute;\n background-color: #f9f9f9;\n min-width: 160px;\n box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);\n z-index: 1;\n}\n\nnav li:hover .submenu {\n display: block;\n}\n\n/* Mobile responsiveness */\n@media screen and (max-width: 600px) {\n nav li {\n float: none;\n }\n\n nav li a {\n display: block;\n text-align: left;\n }\n\n .submenu {\n position: static;\n }\n}\n\n/* Logo Styling */\n.logo {\n float: left;\n padding: 14px 16px;\n}\n\n.logo img {\n height: 30px;\n}\n</style>\n</head>\n<body>\n\n<nav>\n <div class=\"logo\"><img src=\"logo.png\" alt=\"Logo\"></div> <!-- Replace logo.png with your logo -->\n <ul>\n <li><a href=\"#\">Home</a></li>\n <li><a href=\"#\">About</a></li>\n <li><a href=\"#\">Services</a>\n <ul class=\"submenu\">\n <li><a href=\"#\">Service 1</a></li>\n <li><a href=\"#\">Service 2</a></li>\n <li><a href=\"#\">Service 3</a></li>\n </ul>\n </li>\n <li><a href=\"#\">Contact</a></li>\n </ul>\n</nav>\n\n</body>\n</html>\n```\n\n\n**Explanation:**\n\n* The main navigation uses a simple unordered list (`<ul>`) with list items (`<li>`) for each menu item.\n* Floats are used to position the menu items horizontally.\n* The `submenu` class is hidden by default and uses absolute positioning to appear below its parent list item. `display: block;` on hover makes it visible.\n* Media queries handle the responsive behavior for smaller screens. On smaller screens, the floats are removed, and the submenu becomes statically positioned, simplifying the layout.\n* A logo is added for completeness. Remember to replace `\"logo.png\"` with an actual logo image.\n\n\n**Links to Resources to Learn More:**\n\n* **MDN Web Docs CSS:** [https://developer.mozilla.org/en-US/docs/Web/CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) (Comprehensive CSS reference)\n* **CSS-Tricks:** [https://css-tricks.com/](https://css-tricks.com/) (Great articles and tutorials on CSS)\n* **W3Schools CSS Tutorial:** [https://www.w3schools.com/css/](https://www.w3schools.com/css/) (Beginner-friendly CSS tutorial)\n\n\nCopyrights (c) OpenRockets Open-source Network. Free to use, copy, share, edit or publish.\n","number":2009,"title":"CSS Challenge: Responsive Navigation Bar with Submenus"}]

‎title.txt‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
Overusing Indexes in MongoDB and Performance Degradation
1+
CSS Challenge: Responsive Navigation Bar with Submenus

0 commit comments

Comments
 (0)