I recently started to use github issue as my CMS. Previously I was trying to use [NetlifyCMS](http://netlifycms.org) as my CMS. But then I found out that Github Issue is more simple & easier. So I decided to experiment with this. So far so good.

And yes, this blog is power  Github Issue + NextJS + Netlify. 

This blog is open source, so you can actually see how it works here. https://github.com/muhajirdev/muhajir.dev/

# So how does it works ?

## Fetching the data

Github has a solid GraphQL api that we can use to fetch the data. Here's how I fetch it.

https://github.com/muhajirdev/muhajir.dev/blob/77e221d158e9a25d9c71a2d67b927f38f426f058/lib/github-graphql-client.js#L1-L46

You can change variable `name` and `owner` to your repository name and github username. 

```javascript
const { graphql } = require('@octokit/graphql')

const TOKEN = process.env.TOKEN

const request = graphql.defaults({
  headers: {
    authorization: `token ${TOKEN}`,
  },
})

export const getPosts = () =>
  request(
    `{
    repository(name: "muhajir.dev", owner: "muhajirdev") {
      issues(first: 50) {
        nodes {
          title
          number
          createdAt
          bodyHTML
        }
      }
    }
  }
`
  ).then((data) => data.repository.issues.nodes)

export const getPost = (number) => {
  return request(
    `query getPost($number: Int!){
      repository(name: "muhajir.dev", owner: "muhajirdev") {
        issue(number: $number) {
            title
            number
            createdAt
            bodyHTML
        }
      }
  }
`,
    {
      number: Number(number),
    }
  ).then((data) => data.repository.issue)
}
```

## Creating github token.

We can create github issue in `Settings -> Personal Access Token -> Generate New Token`

<img width="1079" alt="image" src="https://user-images.githubusercontent.com/12745166/87848845-00e5b280-c90e-11ea-9430-9d2ab6a41c38.png">

## Rendering it on NextJS

You can see how I render it on here
https://github.com/muhajirdev/muhajir.dev/blob/master/pages/index.js


```javascript
import { getPosts } from 'lib/github-graphql-client'

...

const index = ({ title, description, posts, ...props }) => {
  return (
    <Layout pageTitle={title}>
      <main>
        <Hero />
        <div className="mt-24">
          <h1 className="text-3xl font-bold mb-8">Writings</h1>
          <PostList posts={posts} />
        </div>
      </main>
    </Layout>
  )
}

export default index

export async function getStaticProps() {
  const configData = await import(`../siteconfig.json`)
  const posts = await getPosts()

  return {
    props: {
      posts,
      title: configData.default.title,
      description: configData.default.description,
    },
  }
}
```

https://github.com/muhajirdev/muhajir.dev/blob/master/components/postlist.js
```javascript
import Link from 'next/link'
import slug from 'slug'

export default function PostList({ posts }) {
  return (
    <div>
      {posts.length <= 0 && <div>No posts!</div>}
      <div className="flex -mx-8">
        {posts &&
          posts.map((post) => {
            const postSlug = slug(post.title)
            return (
              <Link
                href={'/post/[...post]'}
                as={`/post/${post.number}/${postSlug}`}
                key={postSlug}
              >
                <a className="mb-4 shadow-md rounded-md h-64 p-6 w-64 mx-8 flex flex-col justify-between">
                  <h2 className="text-xl tracking-wide font-bold">
                    {post.title}
                  </h2>
                  <div>
                    <p className="pb-6 text-gray-700">
                      Lorem ipsum dolor sit amet consectetur adipisicing...
                    </p>
                    <div className="border-b-4 w-24" />
                  </div>
                </a>
              </Link>
            )
          })}
      </div>
    </div>
  )
}
```


https://github.com/muhajirdev/muhajir.dev/blob/master/pages/post/%5B...post%5D.js

```
import Layout from '@components/layout'
import { getPost, getPosts } from 'lib/github-graphql-client'
import slug from 'slug'

export default function BlogPost({ title, bodyHTML }) {
  return (
    <Layout pageTitle={title}>
      <article className="max-w-4xl post">
        <h1 className="text-5xl font-bold mb-4">{title}</h1>
        <div
          dangerouslySetInnerHTML={{
            __html: bodyHTML,
          }}
        ></div>
      </article>
    </Layout>
  )
}

export async function getStaticProps({ ...ctx }) {
  const { post: postParam } = ctx.params
  const [id, slug] = postParam

  const post = await getPost(id)

  return {
    props: {
      title: post.title,
      bodyHTML: post.bodyHTML,
    },
  }
}

export async function getStaticPaths() {
  const posts = await getPosts()
  const paths = posts.map((post) => `/post/${post.number}/${slug(post.title)}`)

  return {
    paths,
    fallback: false,
  }
}
```


## Let's try it

```
TOKEN=yourgithubtoken yarn build
yarn export
````

Now you should be able to see generated folder `out`. 
 
Let's try to serve it

```
npx serve -d out
```

## Deploy it to Netlify

Just register a netlify account. And then, connect this repo to netlify

## Rebuild the site when there's a new issue with Webhook

Now go to netlify `Settings -> Build & Deploy` section. Click `Add build hook` and then copy the url.

Go to your github repository `Settings -> Webhook`. Click `Add Webhook`

<img width="1083" alt="image" src="https://user-images.githubusercontent.com/12745166/87849295-96cf0c80-c911-11ea-8499-11a7901ae587.png">

Choose `Let me select invidiual events` and select `Issues`

<img width="1119" alt="image" src="https://user-images.githubusercontent.com/12745166/87849306-b9612580-c911-11ea-957e-be7f126c95c7.png">


Now your site should be updated everytime you create new issue on your repo

I recently started to use github issue as my CMS. Previously I was trying to use NetlifyCMS as my CMS. But then I found out that Github Issue is more simple & easier. So I decided to experiment with this. So far so good.
And yes, this blog is power  Github Issue + NextJS + Netlify.
This blog is open source, so you can actually see how it works here. https://github.com/muhajirdev/muhajir.dev/
So how does it works ?
Fetching the data
Github has a solid GraphQL api that we can use to fetch the data. Here's how I fetch it.
https://github.com/muhajirdev/muhajir.dev/blob/77e221d158e9a25d9c71a2d67b927f38f426f058/lib/github-graphql-client.js#L1-L46
You can change variable name and owner to your repository name and github username.
const { graphql } = require('@octokit/graphql')

const TOKEN = process.env.TOKEN

const request = graphql.defaults({
  headers: {
    authorization: `token ${TOKEN}`,
  },
})

export const getPosts = () =>
  request(
    `{
    repository(name: "muhajir.dev", owner: "muhajirdev") {
      issues(first: 50) {
        nodes {
          title
          number
          createdAt
          bodyHTML
        }
      }
    }
  }
`
  ).then((data) => data.repository.issues.nodes)

export const getPost = (number) => {
  return request(
    `query getPost($number: Int!){
      repository(name: "muhajir.dev", owner: "muhajirdev") {
        issue(number: $number) {
            title
            number
            createdAt
            bodyHTML
        }
      }
  }
`,
    {
      number: Number(number),
    }
  ).then((data) => data.repository.issue)
}
Creating github token.
We can create github issue in Settings -> Personal Access Token -> Generate New Token

Rendering it on NextJS
You can see how I render it on here
https://github.com/muhajirdev/muhajir.dev/blob/master/pages/index.js
import { getPosts } from 'lib/github-graphql-client'

...

const index = ({ title, description, posts, ...props }) => {
  return (
    <Layout pageTitle={title}>
      <main>
        <Hero />
        <div className="mt-24">
          <h1 className="text-3xl font-bold mb-8">Writings</h1>
          <PostList posts={posts} />
        </div>
      </main>
    </Layout>
  )
}

export default index

export async function getStaticProps() {
  const configData = await import(`../siteconfig.json`)
  const posts = await getPosts()

  return {
    props: {
      posts,
      title: configData.default.title,
      description: configData.default.description,
    },
  }
}
https://github.com/muhajirdev/muhajir.dev/blob/master/components/postlist.js
import Link from 'next/link'
import slug from 'slug'

export default function PostList({ posts }) {
  return (
    <div>
      {posts.length <= 0 && <div>No posts!</div>}
      <div className="flex -mx-8">
        {posts &&
          posts.map((post) => {
            const postSlug = slug(post.title)
            return (
              <Link
                href={'/post/[...post]'}
                as={`/post/${post.number}/${postSlug}`}
                key={postSlug}
              >
                <a className="mb-4 shadow-md rounded-md h-64 p-6 w-64 mx-8 flex flex-col justify-between">
                  <h2 className="text-xl tracking-wide font-bold">
                    {post.title}
                  </h2>
                  <div>
                    <p className="pb-6 text-gray-700">
                      Lorem ipsum dolor sit amet consectetur adipisicing...
                    </p>
                    <div className="border-b-4 w-24" />
                  </div>
                </a>
              </Link>
            )
          })}
      </div>
    </div>
  )
}
https://github.com/muhajirdev/muhajir.dev/blob/master/pages/post/%5B...post%5D.js
import Layout from '@components/layout'
import { getPost, getPosts } from 'lib/github-graphql-client'
import slug from 'slug'

export default function BlogPost({ title, bodyHTML }) {
  return (
    <Layout pageTitle={title}>
      <article className="max-w-4xl post">
        <h1 className="text-5xl font-bold mb-4">{title}</h1>
        <div
          dangerouslySetInnerHTML={{
            __html: bodyHTML,
          }}
        ></div>
      </article>
    </Layout>
  )
}

export async function getStaticProps({ ...ctx }) {
  const { post: postParam } = ctx.params
  const [id, slug] = postParam

  const post = await getPost(id)

  return {
    props: {
      title: post.title,
      bodyHTML: post.bodyHTML,
    },
  }
}

export async function getStaticPaths() {
  const posts = await getPosts()
  const paths = posts.map((post) => `/post/${post.number}/${slug(post.title)}`)

  return {
    paths,
    fallback: false,
  }
}

Let's try it
TOKEN=yourgithubtoken yarn build
yarn export

Now you should be able to see generated folder out.
Let's try to serve it
npx serve -d out

Deploy it to Netlify
Just register a netlify account. And then, connect this repo to netlify
Rebuild the site when there's a new issue with Webhook
Now go to netlify Settings -> Build & Deploy section. Click Add build hook and then copy the url.
Go to your github repository Settings -> Webhook. Click Add Webhook

Choose Let me select invidiual events and select Issues

Now your site should be updated everytime you create new issue on your repo

Using Github Issue as CMS

When working with the codebase in a company. These things could happens

1) I sometimes keep the technical debt in my head, and then I slowly forgot that debt as the time goes. Then one day, I just realized there's just too many debt already, and that accumulated debts makes the software fragile and hard to develop.

2) Sometimes there's only one person knows that technical debt, and he just keep it. And then one day, his team team mate needs to works on that specific part of the code that has a technical and debt. And he's just confused with code, "WTF is this?"?

These things happen because the problems is **implicit** . We have to make the problem explicit. We have to bring the problems to the surface. Otherwise it will remains hidden.

One way to do that is to make a github issue, everytime there's something "doesn't looks right" with the code. By doing this we can keep track the *health* of our software. We can see how many "Issues" are there in the code. If there's too many issue already. Maybe it's a wise choice to stop the development just a moment and fix the issue, pay the debt. Otherwise, one day, a debt collector might come when you don't have any resource to pay the debt. (In software development, this resource might be "time".). Otherwise, the debt is just already too much that makes it almost impossible to keep developing that software. You might ends up rewriting it.

But, creating an issue is a long process. We need to open browser, write description, etc. It's just easier to just leave `// TODO` isn't it. That's true. The barrier to write `// TODO` is just way way lower than opening browser, creating issue etc.

While creating `//TODO` is already one step ahead to make the problem / the debts becomes more explicit. There's still some benefits of creating a github issue

1) By making Github Issue, it's easier to see the health of our program. By seeing the number of issue we have
2) It gives us more space to describe the issue in more details. For example, we can include `image`, `snippets of error logs`, etc
3) Gives us a space to discuss the problem. For example as the times goes on, we can comment on the issue to report what's the state of this issue.
4) We can refer a pull request to an issue. Issue we can know exactly what's this Pull Request is fixing. 

But the good news it, we can create github issue without sacrificing the simplicity of creating `// TODO` comment.

## Introducing VSCode's extension `Github Pull Request & Issues`

This is an official VSCode's extension developed by Github themself. (Which is right now acquired by Microsoft, the company that develops VSCode)

So how does it works? I'll let this GIF & images speaks for you

![](https://code.visualstudio.com/assets/blogs/2020/05/06/create-from-todo.gif)
![](https://code.visualstudio.com/assets/blogs/2020/05/06/issue-hover.png)

![](https://code.visualstudio.com/assets/blogs/2020/05/06/work-on-issue.gif)


I don't want to repeat what's already written in VSCode's blogs. You can read more details here https://code.visualstudio.com/blogs/2020/05/06/github-issues-integration

There's also a youtube video about this extension here
https://youtu.be/T6sW1Dk9B4E


Hopefully this extension will lower the barrier while working with Github Issue and making the debt more explicit.


When working with the codebase in a company. These things could happens


I sometimes keep the technical debt in my head, and then I slowly forgot that debt as the time goes. Then one day, I just realized there's just too many debt already, and that accumulated debts makes the software fragile and hard to develop.


Sometimes there's only one person knows that technical debt, and he just keep it. And then one day, his team team mate needs to works on that specific part of the code that has a technical and debt. And he's just confused with code, "WTF is this?"?


These things happen because the problems is implicit . We have to make the problem explicit. We have to bring the problems to the surface. Otherwise it will remains hidden.
One way to do that is to make a github issue, everytime there's something "doesn't looks right" with the code. By doing this we can keep track the health of our software. We can see how many "Issues" are there in the code. If there's too many issue already. Maybe it's a wise choice to stop the development just a moment and fix the issue, pay the debt. Otherwise, one day, a debt collector might come when you don't have any resource to pay the debt. (In software development, this resource might be "time".). Otherwise, the debt is just already too much that makes it almost impossible to keep developing that software. You might ends up rewriting it.
But, creating an issue is a long process. We need to open browser, write description, etc. It's just easier to just leave // TODO isn't it. That's true. The barrier to write // TODO is just way way lower than opening browser, creating issue etc.
While creating //TODO is already one step ahead to make the problem / the debts becomes more explicit. There's still some benefits of creating a github issue

By making Github Issue, it's easier to see the health of our program. By seeing the number of issue we have
It gives us more space to describe the issue in more details. For example, we can include image, snippets of error logs, etc
Gives us a space to discuss the problem. For example as the times goes on, we can comment on the issue to report what's the state of this issue.
We can refer a pull request to an issue. Issue we can know exactly what's this Pull Request is fixing.

But the good news it, we can create github issue without sacrificing the simplicity of creating // TODO comment.
Introducing VSCode's extension Github Pull Request & Issues
This is an official VSCode's extension developed by Github themself. (Which is right now acquired by Microsoft, the company that develops VSCode)
So how does it works? I'll let this GIF & images speaks for you



I don't want to repeat what's already written in VSCode's blogs. You can read more details here https://code.visualstudio.com/blogs/2020/05/06/github-issues-integration
There's also a youtube video about this extension here
https://youtu.be/T6sW1Dk9B4E
Hopefully this extension will lower the barrier while working with Github Issue and making the debt more explicit.

Creating Github Issue through Visual Studio Code

I recently tried to highlight the codes in My blogpost with rehype-highlight

Here's the snippets on how I do it

```javascript
import rehype from 'rehype'
import highlight from 'rehype-highlight'

....

  const reHTML = await rehype()
    .data('settings', { fragment: true })
    .use(highlight)
    .process(post.bodyHTML)

```

* `post.bodyHTML` is just strings of HTML
* `reHTML` now becomes html that's annotated with [highlight.js](http://highlightjs.org)'s className

now we only need to put some CSS. I use [dracula theme](https://github.com/dracula/highlightjs)

In my nextjs code, I just import the css  in `pages/_app.js`  like this

```javascript
import 'highlight.js/styles/dracula.css'
```

## Real Code

You can find my implemenatations here

* https://github.com/muhajirdev/muhajir.dev/blob/5406a69bd2c6c43a46d7d87f3e16a99be97e8a0b/pages/post/[...post].js#L30-L33

* https://github.com/muhajirdev/muhajir.dev/blob/5406a69bd2c6c43a46d7d87f3e16a99be97e8a0b/pages/_app.js#L2

I recently tried to highlight the codes in My blogpost with rehype-highlight
Here's the snippets on how I do it
import rehype from 'rehype'
import highlight from 'rehype-highlight'

....

  const reHTML = await rehype()
    .data('settings', { fragment: true })
    .use(highlight)
    .process(post.bodyHTML)

post.bodyHTML is just strings of HTML
reHTML now becomes html that's annotated with highlight.js's className

now we only need to put some CSS. I use dracula theme
In my nextjs code, I just import the css  in pages/_app.js  like this
import 'highlight.js/styles/dracula.css'
Real Code
You can find my implemenatations here


https://github.com/muhajirdev/muhajir.dev/blob/5406a69bd2c6c43a46d7d87f3e16a99be97e8a0b/pages/post/[...post].js#L30-L33



  
    
      muhajir.dev/pages/_app.js
    
    
         Line 2
      in
      5406a69
    
    
    
    

        
          
           import 'highlight.js/styles/dracula.css'

Highlighting HTML in NextJS with rehype-highlight

So, I tried to use Github Issue as my CMS. So I render the markdown into html in this blog. But I found an issue.

When I took a screenshot from my computer, and paste it into github. It becomes `<img>` tag like this, instead of `![](http://your_image_url)`

<img width="881" alt="image" src="https://user-images.githubusercontent.com/12745166/87870478-a4000000-c9d2-11ea-8ad2-b9472a383c50.png">

But the I found out my blog post doesn't render the `<img>` tag. So I try debug it.

Turns out this remarkjs omits html tag, because of security issue as mentioned in their docs

<img width="733" alt="image" src="https://user-images.githubusercontent.com/12745166/87870463-80d55080-c9d2-11ea-8784-bc7b4986fcc7.png">

<img width="1022" alt="image" src="https://user-images.githubusercontent.com/12745166/87870509-df023380-c9d2-11ea-8305-6a18a78ae497.png">

The solution is to use `rehype-raw` to allow html inside markdown. Here's how I use it inside my code

```javascript
import markdown from 'remark-parse'
import images from 'remark-images'
import markdown2rehype from 'remark-rehype'
import unified from 'unified'
import highlight from 'rehype-highlight'
import html from 'rehype-stringify'
import raw from 'rehype-raw'

...

  const reHTML = await unified()
    .use(markdown)
    .use(images)
    .use(markdown2rehype, { allowDangerousHtml: true })
    .use(raw)
    .use(highlight)
    .use(html)
    .process(post.body)
```

You have to be aware, there's a security issue when you allow html inside your markdown. 

```
Improper use of rehype-raw can open you up to a cross-site scripting (XSS) attack.
Either do not combine this plugin with user content or use rehype-sanitize.
```

I tried to use `rehype-sanitize`. But it also remove the `class` in my html. Which breaks my code highlighting.
So, for the sake of simplicity and 80/20 principle. I decided to not using `rehype-sanitize` for now, it's probably too much to handle security issue for just a blog like mine. I might handle it later when I have some spare time, or I might even migrate from remark to mdx. So, I'll just keep it simple for now.

So, I tried to use Github Issue as my CMS. So I render the markdown into html in this blog. But I found an issue.
When I took a screenshot from my computer, and paste it into github. It becomes <img> tag like this, instead of ![](http://your_image_url)

But the I found out my blog post doesn't render the <img> tag. So I try debug it.
Turns out this remarkjs omits html tag, because of security issue as mentioned in their docs


The solution is to use rehype-raw to allow html inside markdown. Here's how I use it inside my code
import markdown from 'remark-parse'
import images from 'remark-images'
import markdown2rehype from 'remark-rehype'
import unified from 'unified'
import highlight from 'rehype-highlight'
import html from 'rehype-stringify'
import raw from 'rehype-raw'

...

  const reHTML = await unified()
    .use(markdown)
    .use(images)
    .use(markdown2rehype, { allowDangerousHtml: true })
    .use(raw)
    .use(highlight)
    .use(html)
    .process(post.body)
You have to be aware, there's a security issue when you allow html inside your markdown.
Improper use of rehype-raw can open you up to a cross-site scripting (XSS) attack.
Either do not combine this plugin with user content or use rehype-sanitize.

I tried to use rehype-sanitize. But it also remove the class in my html. Which breaks my code highlighting.
So, for the sake of simplicity and 80/20 principle. I decided to not using rehype-sanitize for now, it's probably too much to handle security issue for just a blog like mine. I might handle it later when I have some spare time, or I might even migrate from remark to mdx. So, I'll just keep it simple for now.

RemarkJS, <img> tag not rendered to html

If you haven't check [TailwindCSS](https://tailwindcss.com), you might want to. I don't want to repeat the awesomeness here 🤪

TL;DR. Full implementation can be found on my Github [muhajirdev/svelte-tailwind-template](https://github.com/muhajirdev/svelte-tailwind-template)

## Get Svelte default template

```bash
npx degit sveltejs/template my-svelte-project
cd my-svelte-project
```

## Install dependencies

```bash
npm install --save-dev tailwindcss postcss-import @fullhuman/postcss-purgecss postcss rollup-plugin-postcss autoprefixer
```

## Setup `rollup-plugin-postcss`

```javascript
// rollup.config.js

...
import postcss from 'rollup-plugin-postcss'
...

export default {
    plugins: [
         postcss({extract: true}),
         svelte(...),
         ...
    ]
}
```

Here's the end result

```javascript
//rollup.config.js

import svelte from 'rollup-plugin-svelte';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import livereload from 'rollup-plugin-livereload';
import { terser } from 'rollup-plugin-terser';
import postcss from 'rollup-plugin-postcss'

const production = !process.env.ROLLUP_WATCH;

export default {
	input: 'src/main.js',
	output: {
		sourcemap: true,
		format: 'iife',
		name: 'app',
		file: 'public/bundle.js'
	},
	plugins: [
		postcss({
			extract: true
		}),
		svelte({
			// enable run-time checks when not in production
			dev: !production,
			// we'll extract any component CSS out into
			// a separate file — better for performance
			css: css => {
				css.write('public/bundle.css');
			}
		}),

		// If you have external dependencies installed from
		// npm, you'll most likely need these plugins. In
		// some cases you'll need additional configuration —
		// consult the documentation for details:
		// https://github.com/rollup/rollup-plugin-commonjs
		resolve({ browser: true }),
		commonjs(),

		// Watch the `public` directory and refresh the
		// browser on changes when not in production
		!production && livereload('public'),

		// If we're building for production (npm run build
		// instead of npm run dev), minify
		production && terser()
	],
	watch: {
		clearScreen: false
	}
};
```

## Create `postcss.config.js`

```javascript
const production = !process.env.ROLLUP_WATCH;
const purgecss = require("@fullhuman/postcss-purgecss");

module.exports = {
  plugins: [
    require("postcss-import")(),
    require("tailwindcss"),
    require("autoprefixer"),
    // Only purge css on production
    production &&
      purgecss({
        content: ["./**/*.html", "./**/*.svelte"],
        defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
      })
  ]
};
```


## Create `src/main.css`

```css
@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";
```

## Import `src/main.css` in `src/main.js`

```javascript
// src/main.js
import App from "./App.svelte";
import "./main.css";

const app = new App({
  target: document.body,
  props: {
    name: "world"
  }
});

export default app;
```

## Optional

Remove `public/global.css`
And also remove

```
 <link rel="stylesheet" href="global.css" />
```
from `index.html` as we already have normalize.css from `tailwind`

And finally, now you can just write tailwind class 

Try it `<div class="bg-black">test</div>` should give you a div with black background.

If you haven't check TailwindCSS, you might want to. I don't want to repeat the awesomeness here 🤪
TL;DR. Full implementation can be found on my Github muhajirdev/svelte-tailwind-template
Get Svelte default template
npx degit sveltejs/template my-svelte-project
cd my-svelte-project
Install dependencies
npm install --save-dev tailwindcss postcss-import @fullhuman/postcss-purgecss postcss rollup-plugin-postcss autoprefixer
Setup rollup-plugin-postcss
// rollup.config.js

...
import postcss from 'rollup-plugin-postcss'
...

export default {
    plugins: [
         postcss({extract: true}),
         svelte(...),
         ...
    ]
}
Here's the end result
//rollup.config.js

import svelte from 'rollup-plugin-svelte';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import livereload from 'rollup-plugin-livereload';
import { terser } from 'rollup-plugin-terser';
import postcss from 'rollup-plugin-postcss'

const production = !process.env.ROLLUP_WATCH;

export default {
	input: 'src/main.js',
	output: {
		sourcemap: true,
		format: 'iife',
		name: 'app',
		file: 'public/bundle.js'
	},
	plugins: [
		postcss({
			extract: true
		}),
		svelte({
			// enable run-time checks when not in production
			dev: !production,
			// we'll extract any component CSS out into
			// a separate file — better for performance
			css: css => {
				css.write('public/bundle.css');
			}
		}),

		// If you have external dependencies installed from
		// npm, you'll most likely need these plugins. In
		// some cases you'll need additional configuration —
		// consult the documentation for details:
		// https://github.com/rollup/rollup-plugin-commonjs
		resolve({ browser: true }),
		commonjs(),

		// Watch the `public` directory and refresh the
		// browser on changes when not in production
		!production && livereload('public'),

		// If we're building for production (npm run build
		// instead of npm run dev), minify
		production && terser()
	],
	watch: {
		clearScreen: false
	}
};
Create postcss.config.js
const production = !process.env.ROLLUP_WATCH;
const purgecss = require("@fullhuman/postcss-purgecss");

module.exports = {
  plugins: [
    require("postcss-import")(),
    require("tailwindcss"),
    require("autoprefixer"),
    // Only purge css on production
    production &&
      purgecss({
        content: ["./**/*.html", "./**/*.svelte"],
        defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
      })
  ]
};
Create src/main.css
@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";
Import src/main.css in src/main.js
// src/main.js
import App from "./App.svelte";
import "./main.css";

const app = new App({
  target: document.body,
  props: {
    name: "world"
  }
});

export default app;
Optional
Remove public/global.css
And also remove
 <link rel="stylesheet" href="global.css" />

from index.html as we already have normalize.css from tailwind
And finally, now you can just write tailwind class
Try it <div class="bg-black">test</div> should give you a div with black background.

Using TailwindCSS with SvelteJS

Have you tried searching your name on Google? Or somebody else's name? What's the most common word associated with your name? In this tutorial we'll find out :)

Requirements:

- Python
- Internet Connection :)

We have 2 sections in this Tutorial. `Scraping` and `Visualizing`

# Scraping

## Installing Scrapy:

```
pip install scrapy
```

## First try

Let's create our project.

```
scrapy startproject google
cd google
```

Let's trying searching your name on Google.
I am going to assume your name is `Sukijan`.

## Get all text

Let's try to get all the text from a url. I'll try with this url `https://www.aljazeera.com/news/2019/06/israeli-forces-settlers-enter-al-aqsa-mosque-compound-190602065712978.html` (One of the first news I got this morning)

Create, a file `google/google/spiders/test.py`

```python
import scrapy


class TestSpider(scrapy.Spider):
    name = 'test'

    # Tell scrapy, we want to start crawing with these pages
    start_urls = [
        'https://www.aljazeera.com/news/2019/06/israeli-forces-settlers-enter-al-aqsa-mosque-compound-190602065712978.html']

    # What we're going to do after the page is resolved
    def parse(self, response):
        # We yield a dict of this
        yield {
            # response.css is css style selector.
            # ::text means we want to to get the text. If we don't put ::text
            # We'll get <title>Israeli forces and settlers ...</title>
            # When we add text we got 'Israeli forces and settlers ...'
            'title': response.css('title::text').get(),
            # Same thing with `p`, We're selecting the text of element p
            # But notice that we use `getall` instead of `get`
            # `get` will select only one element.
            # While `getall`  Will select all element, and return list
            'text': response.css('p::text').getall()
        }
```

Now try to run `scrapy crawl test`.You'll see in the the result in the command line.

Let's try to write the result to a file with `scrapy crawl test -o result.json`

Now you can see the result in JSON format in `result.json`

## Get links from Google

Let's try to crawl many URLS from google

First of all. go to `settings.py`
and make sure

```
...
ROBOTSTXT_OBEY = False
...
```

```python
import scrapy
import re


def is_google(a):
    url = a.attrib['href']
    return bool(re.search("/search", url))


class TestSpider(scrapy.Spider):
    name = "test"

    # How to get the start url
    # search `sukijan` on Google. And then go to second page, and then click first page result. You'll see that the url now includes `start` parameter. We'll use that for pagination
    # Also pay attention to parameter `q=sukijan`. That's our keyword
    # We use `% start for start in range(0, 100, 10)`. To generate urls that we want to crawl
    # So it will generate a list of urls like so
    # [q=sukijan start =0, q=sukijan start=10, q=sukijan start=20, q=sukijan, start=30... until 100]

    start_urls = [
        'https://www.google.com/search?q=sukijan&safe=strict&ei=sLTvXL_KH4zfz7sPpZOBuA4&start=%s&sa=N&ved=0ahUKEwi_4un2icPiAhWM73MBHaVJAOc4ChDx0wMIjQE&cshid=1559213273144254&biw=1680&bih=916' % start for start in range(0, 100, 10)
    ]

    def parse(self, response):
        # What is `jfp3ef a`
        # If you do `scrapy shell https://www.google.com/search?q=Sukijan&oq=sukijan&aqs=chrome.0.69i59j0l5.1739j0j7&sourceid=chrome&ie=UTF-8#ip=1`
        # And then do `view(response)`. It will open up a browser
        # From there do inspect element, locate a link, And you'll find that most of the links fall under `.jfp3ef` class
        for href in response.css('.jfp3ef a'):
            # We want to open url these links. But we don't want to open Google's url
            # For example url `More images for Sukijan`, etc.
            if not is_google(href):
                # This basically means 'Hey scrapy` follow this url.
                # When you find it run parse_text function on it.
                yield response.follow(href, self.parse_text)

    def parse_text(self, response):

        # get_text takes the response
        # And then it will takes all text whether it's in <p> tag, <h1> tag, <h2> tag etc
        # But it will leave everything inside <script> and <style>
        # It will also remove `\r`, `\n`, `\t`
        # Plus it combines all the text into a string, instead of a list

        def get_text(response):
            with_duplicated_space = ' '.join(response.xpath(
                './/text()[not(ancestor::script|ancestor::style|ancestor::noscript)]').extract()).strip().replace("\r", "").replace("\n", "").replace("\t", "")
            without_duplicated_space = re.sub(
                ' +', ' ', with_duplicated_space).strip()
            return without_duplicated_space

        yield {
            'title': response.css('title::text').get(),
            'text': get_text(response)
        }

```

Okay okay, that's a lot of things going on right. Please let me know if my explanation is confusing. I am always open to feedback. Tweet me @muhajirdev on twitter

Let step, delete your `result.json` And re run again `scrapy crawl test -o result.json`. And wait until the crawling process is finished

# Visualizing with Wordcloud

Okay now open jupyter notebook. You can install with

Python 3:

```
python3 -m pip install --upgrade pip
python3 -m pip install jupyter
```

Python 2:

```
python -m pip install --upgrade pip
python -m pip install jupyter
```

Depending on your python version

You can read more installation instruction here https://jupyter.org/install.html

Create a file `File > New Notebook > Python 3`

```
jupyter notebook
```

```python
import json

text = ''
with open("result.json", "r") as read_file:
    data = json.load(read_file)
    for i in data:
        text = text + i['text']


from wordcloud import WordCloud, STOPWORDS, ImageColorGenerator
import matplotlib.pyplot as plt

wordcloud = WordCloud(background_color="white").generate(text)


stopwords = set(STOPWORDS)
# Most of my content is in Bahasa Indonesia. So I am adding more stopwords in Bahasa Indonesia
stopwords.update(
    [
        "di", "yang", "dengan", "dan", "pada", "juga",
        "itu", "dalam", "kepada" "untuk", "tersebut", "tidak", "ini",
        "dari", "sebagai", "ada", "ke", "adalah", "akan", "saat", "kembali"
        "oleh", "karena", "tak", "ia", "setelah", "sudah", "atau", "untuk", "bahwa",
        "saya", "next", "play", "menjadi", "dia", "telah", "seperti", "oleh",
        "duration", "minutes", "kami",  "kita", "WIB", "ago", "now", "orang",
        "mereka", "Namun", "Video", "seconds", "views",
    ]
)

wordcloud = WordCloud(background_color="white", stopwords=stopwords, scale=2).generate(text)
```

Okay, now let's try to visualize it

```python
plt.figure()
plt.imshow(wordcloud, interpolation="bilinear")
plt.axis("off")
plt.show()
```

![](https://thepracticaldev.s3.amazonaws.com/i/m8jvp0x5inuezzh1err5.png)

You can see there that `Sukijan` is highy tied with `Indonesia`, `Sukirman`, also there's `Eka Gustiwana`.

But how do we save it to a file? Simply

```python
wordcloud.to_file("sukijan.png")
```

Now there should a file named `sukijan.png` containing the wordcloud

I'd love to hear some feedback from you :). Tweet me @muhajirdev on twitter

This article is originally written on https://muhajir.dev/writing/scraping-and-visualizing-wordcloud/

Have you tried searching your name on Google? Or somebody else's name? What's the most common word associated with your name? In this tutorial we'll find out :)
Requirements:

Python
Internet Connection :)

We have 2 sections in this Tutorial. Scraping and Visualizing
Scraping
Installing Scrapy:
pip install scrapy

First try
Let's create our project.
scrapy startproject google
cd google

Let's trying searching your name on Google.
I am going to assume your name is Sukijan.
Get all text
Let's try to get all the text from a url. I'll try with this url https://www.aljazeera.com/news/2019/06/israeli-forces-settlers-enter-al-aqsa-mosque-compound-190602065712978.html (One of the first news I got this morning)
Create, a file google/google/spiders/test.py
import scrapy


class TestSpider(scrapy.Spider):
    name = 'test'

    # Tell scrapy, we want to start crawing with these pages
    start_urls = [
        'https://www.aljazeera.com/news/2019/06/israeli-forces-settlers-enter-al-aqsa-mosque-compound-190602065712978.html']

    # What we're going to do after the page is resolved
    def parse(self, response):
        # We yield a dict of this
        yield {
            # response.css is css style selector.
            # ::text means we want to to get the text. If we don't put ::text
            # We'll get <title>Israeli forces and settlers ...</title>
            # When we add text we got 'Israeli forces and settlers ...'
            'title': response.css('title::text').get(),
            # Same thing with `p`, We're selecting the text of element p
            # But notice that we use `getall` instead of `get`
            # `get` will select only one element.
            # While `getall`  Will select all element, and return list
            'text': response.css('p::text').getall()
        }
Now try to run scrapy crawl test.You'll see in the the result in the command line.
Let's try to write the result to a file with scrapy crawl test -o result.json
Now you can see the result in JSON format in result.json
Get links from Google
Let's try to crawl many URLS from google
First of all. go to settings.py
and make sure
...
ROBOTSTXT_OBEY = False
...

import scrapy
import re


def is_google(a):
    url = a.attrib['href']
    return bool(re.search("/search", url))


class TestSpider(scrapy.Spider):
    name = "test"

    # How to get the start url
    # search `sukijan` on Google. And then go to second page, and then click first page result. You'll see that the url now includes `start` parameter. We'll use that for pagination
    # Also pay attention to parameter `q=sukijan`. That's our keyword
    # We use `% start for start in range(0, 100, 10)`. To generate urls that we want to crawl
    # So it will generate a list of urls like so
    # [q=sukijan start =0, q=sukijan start=10, q=sukijan start=20, q=sukijan, start=30... until 100]

    start_urls = [
        'https://www.google.com/search?q=sukijan&safe=strict&ei=sLTvXL_KH4zfz7sPpZOBuA4&start=%s&sa=N&ved=0ahUKEwi_4un2icPiAhWM73MBHaVJAOc4ChDx0wMIjQE&cshid=1559213273144254&biw=1680&bih=916' % start for start in range(0, 100, 10)
    ]

    def parse(self, response):
        # What is `jfp3ef a`
        # If you do `scrapy shell https://www.google.com/search?q=Sukijan&oq=sukijan&aqs=chrome.0.69i59j0l5.1739j0j7&sourceid=chrome&ie=UTF-8#ip=1`
        # And then do `view(response)`. It will open up a browser
        # From there do inspect element, locate a link, And you'll find that most of the links fall under `.jfp3ef` class
        for href in response.css('.jfp3ef a'):
            # We want to open url these links. But we don't want to open Google's url
            # For example url `More images for Sukijan`, etc.
            if not is_google(href):
                # This basically means 'Hey scrapy` follow this url.
                # When you find it run parse_text function on it.
                yield response.follow(href, self.parse_text)

    def parse_text(self, response):

        # get_text takes the response
        # And then it will takes all text whether it's in <p> tag, <h1> tag, <h2> tag etc
        # But it will leave everything inside <script> and <style>
        # It will also remove `\r`, `\n`, `\t`
        # Plus it combines all the text into a string, instead of a list

        def get_text(response):
            with_duplicated_space = ' '.join(response.xpath(
                './/text()[not(ancestor::script|ancestor::style|ancestor::noscript)]').extract()).strip().replace("\r", "").replace("\n", "").replace("\t", "")
            without_duplicated_space = re.sub(
                ' +', ' ', with_duplicated_space).strip()
            return without_duplicated_space

        yield {
            'title': response.css('title::text').get(),
            'text': get_text(response)
        }
Okay okay, that's a lot of things going on right. Please let me know if my explanation is confusing. I am always open to feedback. Tweet me @muhajirdev on twitter
Let step, delete your result.json And re run again scrapy crawl test -o result.json. And wait until the crawling process is finished
Visualizing with Wordcloud
Okay now open jupyter notebook. You can install with
Python 3:
python3 -m pip install --upgrade pip
python3 -m pip install jupyter

Python 2:
python -m pip install --upgrade pip
python -m pip install jupyter

Depending on your python version
You can read more installation instruction here https://jupyter.org/install.html
Create a file File > New Notebook > Python 3
jupyter notebook

import json

text = ''
with open("result.json", "r") as read_file:
    data = json.load(read_file)
    for i in data:
        text = text + i['text']


from wordcloud import WordCloud, STOPWORDS, ImageColorGenerator
import matplotlib.pyplot as plt

wordcloud = WordCloud(background_color="white").generate(text)


stopwords = set(STOPWORDS)
# Most of my content is in Bahasa Indonesia. So I am adding more stopwords in Bahasa Indonesia
stopwords.update(
    [
        "di", "yang", "dengan", "dan", "pada", "juga",
        "itu", "dalam", "kepada" "untuk", "tersebut", "tidak", "ini",
        "dari", "sebagai", "ada", "ke", "adalah", "akan", "saat", "kembali"
        "oleh", "karena", "tak", "ia", "setelah", "sudah", "atau", "untuk", "bahwa",
        "saya", "next", "play", "menjadi", "dia", "telah", "seperti", "oleh",
        "duration", "minutes", "kami",  "kita", "WIB", "ago", "now", "orang",
        "mereka", "Namun", "Video", "seconds", "views",
    ]
)

wordcloud = WordCloud(background_color="white", stopwords=stopwords, scale=2).generate(text)
Okay, now let's try to visualize it
plt.figure()
plt.imshow(wordcloud, interpolation="bilinear")
plt.axis("off")
plt.show()

You can see there that Sukijan is highy tied with Indonesia, Sukirman, also there's Eka Gustiwana.
But how do we save it to a file? Simply
wordcloud.to_file("sukijan.png")
Now there should a file named sukijan.png containing the wordcloud
I'd love to hear some feedback from you :). Tweet me @muhajirdev on twitter
This article is originally written on https://muhajir.dev/writing/scraping-and-visualizing-wordcloud/

Scraping From Google & Visualizing Most Common Word With Wordcloud

Install Extenstion in Visual Studio Code:
- [VSCodeVim](https://github.com/VSCodeVim/Vim) 

## Delete In Tag


![dit-2.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1561899637547/wu98ydxWG.gif)


## Delete Surrounding Tag

![dst-2.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1561899815957/rY6Rk-Qp8.gif)

*Update June 30th, 2019*
 
## Change single quote to double quote


![single-quote-to-double-quote.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1561905097925/PfR687VHY.gif)

*Update July 4th, 2019*

## Change Tag with Emmet

Note that you need to set the keyboard shortcut first. Press `cmd+shift+p` Then write `Preferences: Open Keyboard Shortcuts (JSON)`. And add the following 

```
[
...
 {
    "key": "shift+cmd+n",
    "command": "editor.emmet.action.updateTag",
    "when": "editorTextFocus"
  },
...
]
```

My full keyboard shortcuts can be seen on my [github dotfiles](https://github.com/muhajirdev/dotfiles/blob/master/vscode-keybindings-mac.json)

![change-tag.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1562235200819/Dpi0XgmSj.gif)

*Update July 11th, 2019*

## Go to matching tag with Emmet

Similar to tips above. I use `cmd+m` as the shortcut here. You can check the keyboard shortcut file on my github dotfiles.

![matching tag.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1562811003814/UHXvSZYgk.gif)

## Copy And Paste with VIM 

![copy-paste.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1562926540034/Y0SvA7QX0.gif)


# Update

I have created [VSCode.xyz](https://vscode.xyz) as vscode tips and tricks portal. Check it out.


Install Extenstion in Visual Studio Code:

VSCodeVim

Delete In Tag

Delete Surrounding Tag

Update June 30th, 2019
Change single quote to double quote

Update July 4th, 2019
Change Tag with Emmet
Note that you need to set the keyboard shortcut first. Press cmd+shift+p Then write Preferences: Open Keyboard Shortcuts (JSON). And add the following
[
...
 {
    "key": "shift+cmd+n",
    "command": "editor.emmet.action.updateTag",
    "when": "editorTextFocus"
  },
...
]

My full keyboard shortcuts can be seen on my github dotfiles

Update July 11th, 2019
Go to matching tag with Emmet
Similar to tips above. I use cmd+m as the shortcut here. You can check the keyboard shortcut file on my github dotfiles.

Copy And Paste with VIM

Update
I have created VSCode.xyz as vscode tips and tricks portal. Check it out.

 VIM & Visual Studio Code Tips & Tricks (With Video / GIF)

We'll use github.com/vektah/dataloaden to generate dataloader for us.

## Generating the code

```sh
go get github.com/vektah/dataloaden
mkdir dataloader
cd dataloader
go run github.com/vektah/dataloaden UserLoader string "*github.com/username/project/graph/model.User"
```

* notice that you might need put use `"` between the
* `string` the the type of our graphql key.

For example with this graphql schema,

```
type Car {
   name: String!
   owner: User!
}

type User {
   id: ID!
  name: String!
}
```

and your model looks like so

```golang
package model

type Machine struct {
	ID                 string `json:"id"`
        Username   string   `json:"username"`
	OwnerID      string `json:"owner"`
}

type  User struct {
...
}

````

in your database. you might store `card.ownerId`. And then you pass this in your graphql. So it can resolver the `User`, in this case the `ownerId` is you key.

```golang
const loadersKey = "dataloaders"

// Loaders acts interface for what dataloaders we have
type Loaders struct {
         User        UserLoader
}

type Services struct {
	MachineService machine.Service
	UserService  user.Service
}

func Middleware(s Services, next http.Handler) http.Handler {
	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
		ctx := context.WithValue(r.Context(), loadersKey, &Loaders{
			User: UserLoader{
				maxBatch: 500,
				wait:     1 * time.Millisecond,
				fetch: func(usernames []string) ([]*model.User, []error) {
					queryResults, err := s.UserService.GetUsers(usernames);

					if err != nil {
						return nil, []error{fmt.Errorf("Resolver.Users fail to query user from database")}
					}

					userByUsername := map[string]*model.User{}

					for _, q := range queryResults {
						userByUsername[q.Username] = &model.User{
							ID:       q.Username,
							Email:    q.Email,
							Name:     q.FullName,
							Username: q.Username,
						}
					}

					users := make([]*model.User, len(usernames))

					for i, username := range usernames {
						user := userByUsername[username]
						users[i] = user
					}

					return users, nil
				},
			},
		})
		r = r.WithContext(ctx)

		next.ServeHTTP(w, r)
	})
}

func For(ctx context.Context) *Loaders {
	return ctx.Value(loadersKey).(*Loaders)
}

```

Notice that I use `userByUsername` to arrange the positions of the returning `users`. This is really depends on what your function returns. The point I want to highlight is the position of your keys, in this case `usernames`, should match the positions of your results, in this case `users`. 

And then you can use this function in your graphql resolver.

For example here's how I use it

```golang
func (r *ownerResolver) Owner(ctx context.Context, obj *model.Car) (*model.User, error) {
	return For(ctx).User.Load(obj.OwnerID)
}
```


We'll use github.com/vektah/dataloaden to generate dataloader for us.
Generating the code
go get github.com/vektah/dataloaden
mkdir dataloader
cd dataloader
go run github.com/vektah/dataloaden UserLoader string "*github.com/username/project/graph/model.User"

notice that you might need put use " between the
string the the type of our graphql key.

For example with this graphql schema,
type Car {
   name: String!
   owner: User!
}

type User {
   id: ID!
  name: String!
}

and your model looks like so
package model

type Machine struct {
	ID                 string `json:"id"`
        Username   string   `json:"username"`
	OwnerID      string `json:"owner"`
}

type  User struct {
...
}
in your database. you might store card.ownerId. And then you pass this in your graphql. So it can resolver the User, in this case the ownerId is you key.
const loadersKey = "dataloaders"

// Loaders acts interface for what dataloaders we have
type Loaders struct {
         User        UserLoader
}

type Services struct {
	MachineService machine.Service
	UserService  user.Service
}

func Middleware(s Services, next http.Handler) http.Handler {
	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
		ctx := context.WithValue(r.Context(), loadersKey, &Loaders{
			User: UserLoader{
				maxBatch: 500,
				wait:     1 * time.Millisecond,
				fetch: func(usernames []string) ([]*model.User, []error) {
					queryResults, err := s.UserService.GetUsers(usernames);

					if err != nil {
						return nil, []error{fmt.Errorf("Resolver.Users fail to query user from database")}
					}

					userByUsername := map[string]*model.User{}

					for _, q := range queryResults {
						userByUsername[q.Username] = &model.User{
							ID:       q.Username,
							Email:    q.Email,
							Name:     q.FullName,
							Username: q.Username,
						}
					}

					users := make([]*model.User, len(usernames))

					for i, username := range usernames {
						user := userByUsername[username]
						users[i] = user
					}

					return users, nil
				},
			},
		})
		r = r.WithContext(ctx)

		next.ServeHTTP(w, r)
	})
}

func For(ctx context.Context) *Loaders {
	return ctx.Value(loadersKey).(*Loaders)
}
Notice that I use userByUsername to arrange the positions of the returning users. This is really depends on what your function returns. The point I want to highlight is the position of your keys, in this case usernames, should match the positions of your results, in this case users.
And then you can use this function in your graphql resolver.
For example here's how I use it
func (r *ownerResolver) Owner(ctx context.Context, obj *model.Car) (*model.User, error) {
	return For(ctx).User.Load(obj.OwnerID)
}

Graphql dataloader in golang gqlgen

I was querying a log that's saved on postgresql. The database table looks like this.

```sql
CREATE TABLE IF NOT EXISTS machine_record (
    date_time TIMESTAMPTZ NOT NULL PRIMARY KEY,
    machine_id INTEGER NOT NULL REFERENCES machines(id),
    api_call VARCHAR(300) NOT NULL,
    unit_data json NOT NULL
);
``` 

so this database saves some json data. I need to find the latest log for every `machine_id` for a specific `api_call`
so it should be

- distinct
- last `date_time`
- specific `api_call`

so here's how I do it

```sql
select  distinct on (machine_id) machine_id , date_time, unit_data from machine_record where api_call='summary' and machine_id in ('4', '5') order by machine_id, date_time DESC;
```

notice that I use `distinct on` not just `distinct`. This the feature in Postgres that let us query `DISTINCT ON (expression)`. It will keep the first row of each group that has duplicates.  This almost give me the result that I want. But I want the last row instead of the first row. So do `order by`. And I sort `date_time DESC`

That give us the results

I was querying a log that's saved on postgresql. The database table looks like this.
CREATE TABLE IF NOT EXISTS machine_record (
    date_time TIMESTAMPTZ NOT NULL PRIMARY KEY,
    machine_id INTEGER NOT NULL REFERENCES machines(id),
    api_call VARCHAR(300) NOT NULL,
    unit_data json NOT NULL
);
so this database saves some json data. I need to find the latest log for every machine_id for a specific api_call
so it should be

distinct
last date_time
specific api_call

so here's how I do it
select  distinct on (machine_id) machine_id , date_time, unit_data from machine_record where api_call='summary' and machine_id in ('4', '5') order by machine_id, date_time DESC;
notice that I use distinct on not just distinct. This the feature in Postgres that let us query DISTINCT ON (expression). It will keep the first row of each group that has duplicates.  This almost give me the result that I want. But I want the last row instead of the first row. So do order by. And I sort date_time DESC
That give us the results

Postgresql select distinct on 

I have been using Visual Studio Code with VSCodeVIM extension for years now. It's just recently it starts behaving weirdly. Sometimes when press `option + backspace` to delete a word. It just deleted another random character. I don't know what causes it.

So I started looking for another VSCode Vim extension. Then I found [VSCode Neovim](https://marketplace.visualstudio.com/items?itemName=asvetliakov.vscode-neovim) extension. When I read about it, I realize it uses `real` neovim. It's not an emulation. It's a real neovim integrated into VSCode.

I was not so impressed at the beginning. Until I found out that I can install `real` VIM Plugins and use it inside VSCode. Oh my goodness. Basicly I can use `real` vim environment.

At the same time I was learning Clojure on my spare time. Clojure has this weird syntax like Lisp. This is the code example in clojure. 

```clojure
user=> (+ 3 4)
7
user=> (+ 10 *1)
17
user=> (+ *1 *2)
24
```
You can read https://www.braveclojure.com/do-things/ if you're interested in clojure

I am not impressed with the syntax at the begnning. It just looks weird.

Then I started reading about `Structural Editing` in clojure, Started Installing Calva.io (clojure vscode extension). This extension bundles paredit with itself. So after I installed calva.io, I began to use `paredit` (https://calva.io/paredit/)

Calva looks great, but I still missed something. I like VIM, and paredit doesn't seems to take any advantage out of VIM. 

Fast forward, after I found our about vscode-neovim. I found these vim plugin
- https://github.com/guns/vim-sexp
- https://github.com/tpope/vim-sexp-mappings-for-regular-people

There are not that many videos about these extension. So I just open their README.md on their github. Try the feature one by one. And boom 🤯

The power of VIM combined with clojure strcutural is mind blowing. And combined with clojure REPL nature 🤯. 

Try it and see what I mean.

I have been using Visual Studio Code with VSCodeVIM extension for years now. It's just recently it starts behaving weirdly. Sometimes when press option + backspace to delete a word. It just deleted another random character. I don't know what causes it.
So I started looking for another VSCode Vim extension. Then I found VSCode Neovim extension. When I read about it, I realize it uses real neovim. It's not an emulation. It's a real neovim integrated into VSCode.
I was not so impressed at the beginning. Until I found out that I can install real VIM Plugins and use it inside VSCode. Oh my goodness. Basicly I can use real vim environment.
At the same time I was learning Clojure on my spare time. Clojure has this weird syntax like Lisp. This is the code example in clojure.
user=> (+ 3 4)
7
user=> (+ 10 *1)
17
user=> (+ *1 *2)
24
You can read https://www.braveclojure.com/do-things/ if you're interested in clojure
I am not impressed with the syntax at the begnning. It just looks weird.
Then I started reading about Structural Editing in clojure, Started Installing Calva.io (clojure vscode extension). This extension bundles paredit with itself. So after I installed calva.io, I began to use paredit (https://calva.io/paredit/)
Calva looks great, but I still missed something. I like VIM, and paredit doesn't seems to take any advantage out of VIM.
Fast forward, after I found our about vscode-neovim. I found these vim plugin

https://github.com/guns/vim-sexp
https://github.com/tpope/vim-sexp-mappings-for-regular-people

There are not that many videos about these extension. So I just open their README.md on their github. Try the feature one by one. And boom 🤯
The power of VIM combined with clojure strcutural is mind blowing. And combined with clojure REPL nature 🤯.
Try it and see what I mean.

VSCode, Neovim, Lisp, Clojure 🤯

I was researching about firebase function devleopment workflow. Because the traditional workflow (code -> deploy -> try) is very slow.

So I found two things. 
- Use firebase emulator https://firebase.google.com/docs/functions/local-emulator
- And hot reload  the firebase functions

This is how you hot reload the firebase functions

So for example, this is our current `package.json`


```json
{
  "name": "functions",
  "scripts": {
    "lint": "eslint \"src/**/*\"",
    "build": "tsc",
    "serve": "npm run build && firebase emulators:start --only functions",
    "shell": "npm run build && firebase functions:shell",
    "start": "npm run shell",
    "deploy": "firebase deploy --only functions",
    "logs": "firebase functions:log"
  },
  "engines": {
    "node": "12"
  },
  "main": "lib/index.js",
  "dependencies": {
    "firebase-admin": "^9.2.0",
    "firebase-functions": "^3.11.0"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^3.9.1",
    "@typescript-eslint/parser": "^3.8.0",
    "eslint": "^7.6.0",
    "eslint-plugin-import": "^2.22.0",
    "typescript": "^3.8.0",
    "firebase-functions-test": "^0.2.0"
  },
  "private": true
}

```

change it into 

```json
{
  "name": "functions",
  "scripts": {
    "lint": "eslint \"src/**/*\"",
    "build": "tsc",
    "build:watch": "tsc --watch --preserveWatchOutput",
    "serve": "npm run build:watch | firebase emulators:start --only functions",
    "shell": "npm run build && firebase functions:shell",
    "start": "npm run shell",
    "deploy": "firebase deploy --only functions",
    "logs": "firebase functions:log"
  },
  "engines": {
    "node": "12"
  },
  "main": "lib/index.js",
  "dependencies": {
    "firebase-admin": "^9.2.0",
    "firebase-functions": "^3.11.0"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^3.9.1",
    "@typescript-eslint/parser": "^3.8.0",
    "eslint": "^7.6.0",
    "eslint-plugin-import": "^2.22.0",
    "typescript": "^3.8.0",
    "firebase-functions-test": "^0.2.0"
  },
  "private": true
}

```

notice the `build:watch` and `serve` script is updated

That's it.

I was researching about firebase function devleopment workflow. Because the traditional workflow (code -> deploy -> try) is very slow.
So I found two things.

Use firebase emulator https://firebase.google.com/docs/functions/local-emulator
And hot reload  the firebase functions

This is how you hot reload the firebase functions
So for example, this is our current package.json
{
  "name": "functions",
  "scripts": {
    "lint": "eslint \"src/**/*\"",
    "build": "tsc",
    "serve": "npm run build && firebase emulators:start --only functions",
    "shell": "npm run build && firebase functions:shell",
    "start": "npm run shell",
    "deploy": "firebase deploy --only functions",
    "logs": "firebase functions:log"
  },
  "engines": {
    "node": "12"
  },
  "main": "lib/index.js",
  "dependencies": {
    "firebase-admin": "^9.2.0",
    "firebase-functions": "^3.11.0"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^3.9.1",
    "@typescript-eslint/parser": "^3.8.0",
    "eslint": "^7.6.0",
    "eslint-plugin-import": "^2.22.0",
    "typescript": "^3.8.0",
    "firebase-functions-test": "^0.2.0"
  },
  "private": true
}

change it into
{
  "name": "functions",
  "scripts": {
    "lint": "eslint \"src/**/*\"",
    "build": "tsc",
    "build:watch": "tsc --watch --preserveWatchOutput",
    "serve": "npm run build:watch | firebase emulators:start --only functions",
    "shell": "npm run build && firebase functions:shell",
    "start": "npm run shell",
    "deploy": "firebase deploy --only functions",
    "logs": "firebase functions:log"
  },
  "engines": {
    "node": "12"
  },
  "main": "lib/index.js",
  "dependencies": {
    "firebase-admin": "^9.2.0",
    "firebase-functions": "^3.11.0"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^3.9.1",
    "@typescript-eslint/parser": "^3.8.0",
    "eslint": "^7.6.0",
    "eslint-plugin-import": "^2.22.0",
    "typescript": "^3.8.0",
    "firebase-functions-test": "^0.2.0"
  },
  "private": true
}

notice the build:watch and serve script is updated
That's it.

Firebase function tips : local development & hot reload

- https://calva.io
- https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2
- https://marketplace.visualstudio.com/items?itemName=Durzn.brackethighlighter


This is how my VSCode looks like now
 
<img width="1136" alt="Screen Shot 2020-11-03 at 07 59 53" src="https://user-images.githubusercontent.com/12745166/97935238-8fd9e600-1daa-11eb-9735-0a1ae22c3c6b.png">


https://calva.io
https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2
https://marketplace.visualstudio.com/items?itemName=Durzn.brackethighlighter

This is how my VSCode looks like now

VSCode extension for clojure developer

- https://github.com/guns/vim-sexp
- https://github.com/tpope/vim-sexp-mappings-for-regular-people


https://github.com/guns/vim-sexp
https://github.com/tpope/vim-sexp-mappings-for-regular-people

VIM Plugin for clojure developer

- https://github.com/guns/vim-sexp
- https://github.com/tpope/vim-sexp-mappings-for-regular-people
- https://github.com/eraserhd/parinfer-rust

https://github.com/guns/vim-sexp
https://github.com/tpope/vim-sexp-mappings-for-regular-people
https://github.com/eraserhd/parinfer-rust

VIM plugin for clojure developer

<img width="1062" alt="image" src="https://user-images.githubusercontent.com/12745166/99738236-997a8200-2afc-11eb-9df5-f14f7fd57b49.png">

Hasura says `Note: Specifying the webhook URL via an environmental variable is recommended if you have different URLs for multiple environments.`.  But couldn't find a way to put environment variable in the webhook url.

Then I found this url https://hasura.io/blog/moving-from-local-development-staging-production-with-hasura/ , turns out we can use environment variable this way. `{{FIREBASE_FUNCTIONS_API}}/users/`

Hasura says Note: Specifying the webhook URL via an environmental variable is recommended if you have different URLs for multiple environments..  But couldn't find a way to put environment variable in the webhook url.
Then I found this url https://hasura.io/blog/moving-from-local-development-staging-production-with-hasura/ , turns out we can use environment variable this way. {{FIREBASE_FUNCTIONS_API}}/users/

Muhammad Muhajir

Writings