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

Commit f930229

Browse files
openrocketsofficialopenrocketsofficial
committed
updated
1 parent ede8006 commit f930229

File tree

4 files changed

+157
-61
lines changed

4 files changed

+157
-61
lines changed

‎body.txt‎

Lines changed: 63 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,85 +1,89 @@
11

2-
This document addresses a common challenge developers face when managing posts (e.g., blog posts, social media updates) with large datasets in Firebase Firestore: inefficient querying and data retrieval due to poor data structuring. Using a naive approach, fetching posts with associated data like comments or user details can lead to slow loading times and exceed Firestore's query limitations.
2+
This challenge involves creating a card that expands vertically when hovered over, revealing hidden content. We'll use CSS3 transitions and transforms to achieve a smooth and engaging animation. No JavaScript is required.
33

4-
**Description of the Problem:**
54

6-
A common mistake is storing all post data (text, images, comments, user information) within a single document for each post. When fetching posts, this approach often results in retrieving unnecessarily large amounts of data, especially when only a subset of the information is needed for display. Furthermore, complex queries involving filtering and sorting across multiple fields within a single, large document become inefficient and can even fail due to Firestore's limitations on the number of fields within a single document and query complexity.
5+
## Description of the Styling
76

7+
The card will start with a minimal height, displaying only a title and a small image. On hover, the card's height will smoothly increase to reveal additional text content that was initially hidden using `max-height` and `overflow: hidden`. We'll use a subtle background color change and a shadow effect to enhance the visual feedback.
88

9-
**Fixing the Problem: Step-by-Step Code Example**
109

11-
We'll demonstrate a more efficient approach using separate collections for posts, comments, and users. This allows for targeted querying and improves data management.
10+
## Full Code (CSS only)
1211

13-
**1. Data Structure:**
14-
15-
* **Collection: `posts`:**
16-
* Each document represents a single post.
17-
* Fields: `postId` (string, unique identifier), `title` (string), `content` (string), `authorId` (string, referencing the user document), `createdAt` (timestamp). Avoid storing large amounts of data like images directly in this collection.
18-
19-
* **Collection: `users`:**
20-
* Each document represents a user.
21-
* Fields: `userId` (string, unique identifier), `username` (string), `profilePictureUrl` (string).
22-
23-
* **Collection: `comments`:**
24-
* Each document represents a comment.
25-
* Fields: `commentId` (string, unique identifier), `postId` (string, referencing the post document), `authorId` (string, referencing the user document), `text` (string), `createdAt` (timestamp).
26-
27-
**2. Code (using JavaScript with the Firebase Admin SDK):**
28-
29-
```javascript
30-
// Import necessary modules
31-
const admin = require('firebase-admin');
32-
admin.initializeApp();
33-
const db = admin.firestore();
3412

13+
```css
14+
.card {
15+
background-color: #f0f0f0;
16+
border-radius: 8px;
17+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
18+
overflow: hidden; /* Hide content beyond the initial height */
19+
transition: max-height 0.3s ease-in-out, background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* Smooth transitions */
20+
max-height: 100px; /* Initial height */
21+
}
3522

36-
// Function to create a new post
37-
async function createPost(title, content, authorId) {
38-
const postId = db.collection('posts').doc().id;
39-
await db.collection('posts').doc(postId).set({
40-
postId: postId,
41-
title: title,
42-
content: content,
43-
authorId: authorId,
44-
createdAt: admin.firestore.FieldValue.serverTimestamp()
45-
});
46-
console.log('Post created with ID:', postId);
23+
.card:hover {
24+
max-height: 300px; /* Expanded height on hover */
25+
background-color: #e0e0e0;
26+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
4727
}
4828

49-
// Function to fetch posts with author information
50-
async function getPostsWithAuthors() {
51-
const postsSnapshot = await db.collection('posts').get();
52-
const posts = [];
53-
for (const postDoc of postsSnapshot.docs) {
54-
const postData = postDoc.data();
55-
const userDoc = await db.collection('users').doc(postData.authorId).get();
56-
const userData = userDoc.data();
57-
posts.push({ ...postData, author: userData });
58-
}
59-
return posts;
29+
.card-image {
30+
width: 100%;
31+
height: auto;
6032
}
6133

34+
.card-content {
35+
padding: 15px;
36+
}
6237

63-
// Example usage
64-
async function main() {
65-
await createPost("My First Post", "This is the content of my first post.", "user123");
66-
const posts = await getPostsWithAuthors();
67-
console.log(posts);
38+
.card-title {
39+
font-weight: bold;
40+
margin-bottom: 5px;
6841
}
6942

43+
.card-text {
44+
font-size: 14px;
45+
line-height: 1.5;
46+
}
47+
```
7048

71-
main();
49+
```html
50+
<!DOCTYPE html>
51+
<html>
52+
<head>
53+
<title>Expanding Card</title>
54+
<style>
55+
/* CSS from above goes here */
56+
</style>
57+
</head>
58+
<body>
59+
60+
<div class="card">
61+
<img src="https://via.placeholder.com/350x150" alt="Card Image" class="card-image">
62+
<div class="card-content">
63+
<h2 class="card-title">Card Title</h2>
64+
<p class="card-text">This is some example text that will be revealed when you hover over the card. It's hidden initially to create the expanding effect. You can add more content here as needed.</p>
65+
</div>
66+
</div>
67+
68+
</body>
69+
</html>
7270
```
7371

74-
**3. Explanation:**
7572

76-
This improved approach separates data into distinct collections, making queries more efficient. Fetching posts involves retrieving only the necessary data from the `posts` collection. Author information is then fetched individually using the `authorId` reference, avoiding the need to retrieve it every time if not needed. This significantly reduces the amount of data transferred and improves query performance, particularly with a large number of posts. Similar strategies should be applied for comments and other associated data. For images, consider using Firebase Storage and storing only the URLs in Firestore.
73+
74+
## Explanation
75+
76+
* **`transition` property:** This is crucial for the animation. It specifies which properties (`max-height`, `background-color`, `box-shadow`) should animate, the duration (`0.3s`), and the easing function (`ease-in-out`).
77+
* **`max-height` property:** Controls the initial and expanded heights of the card. The `overflow: hidden` ensures that content beyond the `max-height` is initially hidden.
78+
* **`hover` pseudo-class:** Applies styles when the mouse hovers over the `.card` element.
79+
* **`box-shadow`:** Adds a subtle shadow to enhance the card's appearance and the hover effect.
7780

7881

79-
**External References:**
82+
## Links to Resources to Learn More
8083

81-
* [Firestore Data Modeling](https://firebase.google.com/docs/firestore/modeling-data): Official Firebase documentation on data modeling best practices.
82-
* [Firestore Query Limitations](https://firebase.google.com/docs/firestore/query-data/queries#limitations): Understanding Firestore's query limitations is crucial for efficient data structuring.
84+
* **CSS Transitions:** [MDN Web Docs - CSS Transitions](https://developer.mozilla.org/en-US/docs/Web/CSS/transition)
85+
* **CSS Transforms:** [MDN Web Docs - CSS Transforms](https://developer.mozilla.org/en-US/docs/Web/CSS/transform)
86+
* **CSS Pseudo-classes:** [MDN Web Docs - CSS Pseudo-classes](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes)
8387

8488

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

‎errors/javascript/css-challenge-dynamically-expanding-card/README.md‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
# 🐞 CSS Challenge: Dynamically Expanding Card
2+
3+
4+
This challenge involves creating a card that expands vertically when hovered over, revealing hidden content. We'll use CSS3 transitions and transforms to achieve a smooth and engaging animation. No JavaScript is required.
5+
6+
7+
## Description of the Styling
8+
9+
The card will start with a minimal height, displaying only a title and a small image. On hover, the card's height will smoothly increase to reveal additional text content that was initially hidden using `max-height` and `overflow: hidden`. We'll use a subtle background color change and a shadow effect to enhance the visual feedback.
10+
11+
12+
## Full Code (CSS only)
13+
14+
15+
```css
16+
.card {
17+
background-color: #f0f0f0;
18+
border-radius: 8px;
19+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
20+
overflow: hidden; /* Hide content beyond the initial height */
21+
transition: max-height 0.3s ease-in-out, background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* Smooth transitions */
22+
max-height: 100px; /* Initial height */
23+
}
24+
25+
.card:hover {
26+
max-height: 300px; /* Expanded height on hover */
27+
background-color: #e0e0e0;
28+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
29+
}
30+
31+
.card-image {
32+
width: 100%;
33+
height: auto;
34+
}
35+
36+
.card-content {
37+
padding: 15px;
38+
}
39+
40+
.card-title {
41+
font-weight: bold;
42+
margin-bottom: 5px;
43+
}
44+
45+
.card-text {
46+
font-size: 14px;
47+
line-height: 1.5;
48+
}
49+
```
50+
51+
```html
52+
<!DOCTYPE html>
53+
<html>
54+
<head>
55+
<title>Expanding Card</title>
56+
<style>
57+
/* CSS from above goes here */
58+
</style>
59+
</head>
60+
<body>
61+
62+
<div class="card">
63+
<img src="https://via.placeholder.com/350x150" alt="Card Image" class="card-image">
64+
<div class="card-content">
65+
<h2 class="card-title">Card Title</h2>
66+
<p class="card-text">This is some example text that will be revealed when you hover over the card. It's hidden initially to create the expanding effect. You can add more content here as needed.</p>
67+
</div>
68+
</div>
69+
70+
</body>
71+
</html>
72+
```
73+
74+
75+
76+
## Explanation
77+
78+
* **`transition` property:** This is crucial for the animation. It specifies which properties (`max-height`, `background-color`, `box-shadow`) should animate, the duration (`0.3s`), and the easing function (`ease-in-out`).
79+
* **`max-height` property:** Controls the initial and expanded heights of the card. The `overflow: hidden` ensures that content beyond the `max-height` is initially hidden.
80+
* **`hover` pseudo-class:** Applies styles when the mouse hovers over the `.card` element.
81+
* **`box-shadow`:** Adds a subtle shadow to enhance the card's appearance and the hover effect.
82+
83+
84+
## Links to Resources to Learn More
85+
86+
* **CSS Transitions:** [MDN Web Docs - CSS Transitions](https://developer.mozilla.org/en-US/docs/Web/CSS/transition)
87+
* **CSS Transforms:** [MDN Web Docs - CSS Transforms](https://developer.mozilla.org/en-US/docs/Web/CSS/transform)
88+
* **CSS Pseudo-classes:** [MDN Web Docs - CSS Pseudo-classes](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes)
89+
90+
91+
Copyrights (c) OpenRockets Open-source Network. Free to use, copy, share, edit or publish.
92+

‎latest-issue.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
[{"body":"\nThis document addresses a common challenge developers face when managing posts (e.g., blog posts, social media updates) with large datasets in Firebase Firestore: inefficient querying and data retrieval due to poor data structuring. Using a naive approach, fetching posts with associated data like comments or user details can lead to slow loading times and exceed Firestore's query limitations.\n\n**Description of the Problem:**\n\nA common mistake is storing all post data (text, images, comments, user information) within a single document for each post. When fetching posts, this approach often results in retrieving unnecessarily large amounts of data, especially when only a subset of the information is needed for display. Furthermore, complex queries involving filtering and sorting across multiple fields within a single, large document become inefficient and can even fail due to Firestore's limitations on the number of fields within a single document and query complexity.\n\n\n**Fixing the Problem: Step-by-Step Code Example**\n\nWe'll demonstrate a more efficient approach using separate collections for posts, comments, and users. This allows for targeted querying and improves data management.\n\n**1. Data Structure:**\n\n* **Collection: `posts`:**\n * Each document represents a single post.\n * Fields: `postId` (string, unique identifier), `title` (string), `content` (string), `authorId` (string, referencing the user document), `createdAt` (timestamp). Avoid storing large amounts of data like images directly in this collection.\n\n* **Collection: `users`:**\n * Each document represents a user.\n * Fields: `userId` (string, unique identifier), `username` (string), `profilePictureUrl` (string).\n\n* **Collection: `comments`:**\n * Each document represents a comment.\n * Fields: `commentId` (string, unique identifier), `postId` (string, referencing the post document), `authorId` (string, referencing the user document), `text` (string), `createdAt` (timestamp).\n\n**2. Code (using JavaScript with the Firebase Admin SDK):**\n\n```javascript\n// Import necessary modules\nconst admin = require('firebase-admin');\nadmin.initializeApp();\nconst db = admin.firestore();\n\n\n// Function to create a new post\nasync function createPost(title, content, authorId) {\n const postId = db.collection('posts').doc().id;\n await db.collection('posts').doc(postId).set({\n postId: postId,\n title: title,\n content: content,\n authorId: authorId,\n createdAt: admin.firestore.FieldValue.serverTimestamp()\n });\n console.log('Post created with ID:', postId);\n}\n\n// Function to fetch posts with author information\nasync function getPostsWithAuthors() {\n const postsSnapshot = await db.collection('posts').get();\n const posts = [];\n for (const postDoc of postsSnapshot.docs) {\n const postData = postDoc.data();\n const userDoc = await db.collection('users').doc(postData.authorId).get();\n const userData = userDoc.data();\n posts.push({ ...postData, author: userData });\n }\n return posts;\n}\n\n\n// Example usage\nasync function main() {\n await createPost(\"My First Post\", \"This is the content of my first post.\", \"user123\");\n const posts = await getPostsWithAuthors();\n console.log(posts);\n}\n\n\nmain();\n```\n\n**3. Explanation:**\n\nThis improved approach separates data into distinct collections, making queries more efficient. Fetching posts involves retrieving only the necessary data from the `posts` collection. Author information is then fetched individually using the `authorId` reference, avoiding the need to retrieve it every time if not needed. This significantly reduces the amount of data transferred and improves query performance, particularly with a large number of posts. Similar strategies should be applied for comments and other associated data. For images, consider using Firebase Storage and storing only the URLs in Firestore.\n\n\n**External References:**\n\n* [Firestore Data Modeling](https://firebase.google.com/docs/firestore/modeling-data): Official Firebase documentation on data modeling best practices.\n* [Firestore Query Limitations](https://firebase.google.com/docs/firestore/query-data/queries#limitations): Understanding Firestore's query limitations is crucial for efficient data structuring.\n\n\nCopyrights (c) OpenRockets Open-source Network. Free to use, copy, share, edit or publish.\n","number":2945,"title":"Efficiently Storing and Querying Large Post Datasets in Firebase Firestore"}]
1+
[{"body":"\nThis challenge involves creating a card that expands vertically when hovered over, revealing hidden content. We'll use CSS3 transitions and transforms to achieve a smooth and engaging animation. No JavaScript is required.\n\n\n## Description of the Styling\n\nThe card will start with a minimal height, displaying only a title and a small image. On hover, the card's height will smoothly increase to reveal additional text content that was initially hidden using `max-height` and `overflow: hidden`. We'll use a subtle background color change and a shadow effect to enhance the visual feedback.\n\n\n## Full Code (CSS only)\n\n\n```css\n.card {\n background-color: #f0f0f0;\n border-radius: 8px;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n overflow: hidden; /* Hide content beyond the initial height */\n transition: max-height 0.3s ease-in-out, background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* Smooth transitions */\n max-height: 100px; /* Initial height */\n}\n\n.card:hover {\n max-height: 300px; /* Expanded height on hover */\n background-color: #e0e0e0;\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n}\n\n.card-image {\n width: 100%;\n height: auto;\n}\n\n.card-content {\n padding: 15px;\n}\n\n.card-title {\n font-weight: bold;\n margin-bottom: 5px;\n}\n\n.card-text {\n font-size: 14px;\n line-height: 1.5;\n}\n```\n\n```html\n<!DOCTYPE html>\n<html>\n<head>\n<title>Expanding Card</title>\n<style>\n /* CSS from above goes here */\n</style>\n</head>\n<body>\n\n<div class=\"card\">\n <img src=\"https://via.placeholder.com/350x150\" alt=\"Card Image\" class=\"card-image\">\n <div class=\"card-content\">\n <h2 class=\"card-title\">Card Title</h2>\n <p class=\"card-text\">This is some example text that will be revealed when you hover over the card. It's hidden initially to create the expanding effect. You can add more content here as needed.</p>\n </div>\n</div>\n\n</body>\n</html>\n```\n\n\n\n## Explanation\n\n* **`transition` property:** This is crucial for the animation. It specifies which properties (`max-height`, `background-color`, `box-shadow`) should animate, the duration (`0.3s`), and the easing function (`ease-in-out`).\n* **`max-height` property:** Controls the initial and expanded heights of the card. The `overflow: hidden` ensures that content beyond the `max-height` is initially hidden.\n* **`hover` pseudo-class:** Applies styles when the mouse hovers over the `.card` element.\n* **`box-shadow`:** Adds a subtle shadow to enhance the card's appearance and the hover effect.\n\n\n## Links to Resources to Learn More\n\n* **CSS Transitions:** [MDN Web Docs - CSS Transitions](https://developer.mozilla.org/en-US/docs/Web/CSS/transition)\n* **CSS Transforms:** [MDN Web Docs - CSS Transforms](https://developer.mozilla.org/en-US/docs/Web/CSS/transform)\n* **CSS Pseudo-classes:** [MDN Web Docs - CSS Pseudo-classes](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes)\n\n\nCopyrights (c) OpenRockets Open-source Network. Free to use, copy, share, edit or publish.\n","number":2946,"title":"CSS Challenge: Dynamically Expanding Card"}]

‎title.txt‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
Efficiently Storing and Querying Large Post Datasets in Firebase Firestore
1+
CSS Challenge: Dynamically Expanding Card

0 commit comments

Comments
 (0)