
# 5 Improvent ideas for firebase

## 1. Projcetion

Projection is a common feature in the vast majority of popular databases such as MongoDB and PostgreSQL that gives the option to only retrieve some fields from a document. This has two main crucial benefits, firstly it allows you to decrease the number of data that gets transferred to the client which would be very beneficial if you have a big user base that is mobile. Only selecting the fields you want would give a better user experience. The second reason projection is super useful is that this could be paired with a new rule in your security rules that would not allow certain fields to be retrieved in some scenarios. For example, let us say that you have a collection of users where every user could choose their profile to be public or private, if a user is public all fields should be accessible but if the user is private the email fields should not be accessible. This behavior is not possible at the moment in firestore, and the recommended way to mimic this behavior from the firestore documentation is to split up your data into two different documents which is a big pain to deal with and maintain.

Here is an example of how the code for the javascript client SDK might look:

```js
// example.js
import { collection, query, getDocs, projection } from 'firebase/firestore'
import { db } from './firebase'

const q = query(collection(db, 'users'), projection({ name: 1, age: 1 }))
const querySnapshot = await getDocs(q)
```

Here is an example of how the syntax for only accessing certain fields in your security rules might look:

```js
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /users/{userId} {
      allow read: if resource.data.visibility == 'private' &&
                  ['email'] notin request.resource.data.retriviedKeys();
    }
  }
}
```

## 2. Where queries in security rules

The security rules of firestore are great in the majority of ways but one thing I have found is that it is not possible to perform where queries. To find if a document exists that has a certain value. This would be very nice to have for making sure that a value is unique, for example, let us say that you have a collection of **users** and each user must have a unique **username**, I have yet to find a nice and easy way of doing this.

Here is an example of how the syntax for this in your security rules might look:

```javascript
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /users/{userId} {
      allow write: if !exists(/databases/$(database)/documents/users, where('username', '==', request.resource.data.username));
    }
  }
}
```

## 3. Security rules formatter

This is pretty straightforward, as I write this I have yet to find a tool that can format my security rules and I would love to have it as it can get a bit messy with unformatted rules. This would just be a matter of adding a button to the navbar (as shown in the image down below) which would format it.

<img src="/tes.png" alt="security rules formatter" />

## 4. Count number of documents in a collection

The ability to count the number of documents in a collection is a feature that I don't get how it can not be a thing. I am not sure how other databases like MongoDB do it, but a relatively straightforward implentaion would be to take the documents retrieved after the query and just return the array length instead of the array of documents. This way the amount of data sent to the client would be drastically minified. It may not be the best solution but at least it's a feature.

Here is an example of how the syntax for this might look:

```js
import { collection, query, countDocs } from 'firebase/firestore'
import { db } from './firebase'

const q = query(collection(db, 'users'))
const querySnapshot = await countDocs(q)
```

## 5. Full text search

I find it a bit obscured that Firebase, maintained by Google which is the world's biggest search engine and also owns youtube the world's second-biggest search engine, still doesn't have a native way to search thru your documents. Not much more to say here, just please Firebase introduce something to enable the developers to search thru the documents.


5 Improvent ideas for firebase


# Create a blog with next.js and tailwind

I recently created this website as place to share intresseting stuff i find in the realm of programing. I thought it would be good to share how I created this blog if anyone was intresseting in doing something similarly.

Lets start by creating a new **Next.js** project:

```bash
npx create-next-app@latest
# or
yarn create next-app
```

Add **tailwind** to the project:

```bash
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
```

In your `styles/global.css` make sure to add the following lines:

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

Install `@tailwind/typography`

```bash
npm i @tailwind/typography
```

Now in the `tailwind.config.js` file add the the `@tailwind/typography` to the **plugins** array

```js
module.exports = {
	mode: 'jit',
	purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
	darkMode: false, // or 'media' or 'class'
	theme: {
		extend: {}
	},
	variants: {
		extend: {}
	},
	plugins: [require('@tailwindcss/typography')]
}
```

Lets add some articles! In the root of your project create a new folder called `articles` and inside it create a new file called `first-blog-post.md`. All of your articles are going to be _markdown_ files. So lets add some markdown to this article:

````markdown
# My first ever blog post

This is just some dummy text.

Here is some javascript `code`:

```js
const x = 10
console.log('hello world')
```
````

Now lets work on showing our articles to the user. First we'll need add _two_ packages. `marked` for turning our _.md_ files into html elements and `highlight.js` for highlighting code blocks:

```bash
npm i marked highlight.js
# or
yarn add marked highlight.js
```

To change the color your code-blocks have add the following line to the `pages/app.js` file:

```js
import '../styles/globals.css'
import 'highlight.js/styles/night-owl.css'

function MyApp({ Component, pageProps }) {
	return <Component {...pageProps} />
}

export default MyApp
```

Lets start writing some _react_ code. In the `pages` directory, create a new folder called `articles` and create a new file inside that folder called `[articleId].jsx`. In that file add the following code:

```tsx
import React, { useEffect, useRef } from 'react'
import fs from 'fs'
import path from 'path'
import { marked } from 'marked'
import hljs from 'highlight.js'

// generating all the paths
export const getStaticPaths = async () => {
	// read all files in the articles folder
	const files = fs.readdirSync(path.join(process.cwd(), './articles'))

	return {
		paths: files.map((file) => ({
			params: {
				// if you changed the name of this to something other then [articleId].js
				articleId: file.toLowerCase().trim().replace(' ', '-')
			}
		})),
		// all other paths will return a 404 error
		fallback: false
	}
}

export const getStaticProps = async (context) => {
	// read the given file
	const markdown = fs.readFileSync(path.join(process.cwd(), `articles/${context.params?.articleId}`), 'utf8')

	return {
		// return the given file in the props pargument
		props: {
			markdown
		}
	}
}

const Article = ({ markdown }) => {
	const divRef = useRef(null)

	useEffect(() => {
		if (divRef.current) {
			// default settings for the the marked renderer
			marked.setOptions({
				renderer: new marked.Renderer(),
				highlight: function (code, lang) {
					const language = hljs.getLanguage(lang) ? lang : 'plaintext'
					return hljs.highlight(code, { language }).value
				},
				langPrefix: 'hljs language-',
				pedantic: false,
				gfm: true,
				breaks: false,
				sanitize: false,
				smartLists: true,
				smartypants: false,
				xhtml: false
			})

			// need to set the innerHTML as just setting it in the div, e.g (<div>{marked.parse(markdown)}</div>)
			// will result as just plain text
			divRef.current.innerHTML = marked.parse(markdown)
		}
	}, [markdown])

	return (
		<main className="bg-slate-50 dark:bg-slate-900 ">
			<article className="mx-auto max-w-5xl py-40">
				{/*
                here is were the real magic happens,
                the 'prose' class is what takes care of all the styling needed.
                It's highly customisable as you can see by all the classes
                */}
				<div
					className="md:prose-md prose prose-slate prose-headings:text-blue-800 prose-code:bg-teal-100/50 prose-code:text-teal-600
                      prose-pre:bg-[#011627] dark:prose-invert dark:prose-headings:text-blue-600 dark:prose-code:bg-teal-800/10 dark:prose-code:text-teal-500
                      sm:prose-sm lg:prose-xl xl:prose-xl mx-auto
                      mt-16 px-6
                     "
					ref={divRef}
				></div>
			</article>
		</main>
	)
}

export default Article
```

## Wuala! Just like, that you just create your first blog

Run it in the browser:

```bash
npm run dev
# or
yarn dev
```


Create a blog with next.js and tailwind


# Center a div

<div style={{ padding: '1rem', backgroundColor: 'violet' }}>Try and change the background color to `tomato`.</div>
Centering a div is a lot easier then you might think, i promise 😃

```html
<div class="center-me"></div>
```

### Option 1, style the parent

```css
body {
	width: 100vw;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* or */

body {
	width: 100vw;
	height: 100vh;
	display: grid;
	place-items: center;
}
```

Applying `display: flex` to the body element will control how the children are aligned. `justify-content: center` centers all the children on the horizontal axis, `align-items: center` centers all the children on the vertical axis. Similarly, `display: grid` controls how its direct children are layout, `place-items: center` sets the alignment both horizontally and vertically.

### Option 2, absolute positioning

```css
.center-me {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
```

The only prerequisite for this technic is that the parent element has a `position: relativ`, otherwise the `center-me` div will be centered in relation to the entire screen.

### Option 3, margins

```css
.center-me {
	margin: auto;
}
```

This will only center a div horizontally
