DEV Community: Muhammad Muhajir

Web Development / ReactJS Coaching session

Muhammad Muhajir — Sat, 27 Nov 2021 07:46:12 +0000

Speed up your firebase development workflow and save your time.

Muhammad Muhajir — Tue, 01 Dec 2020 14:55:34 +0000

Did you know that firebase now has local emulator? Previously, if we write firebase functions, we have to deploy it. And then we test it online. The iteration speed is slow, this is bad.

But not anymore, firebase now has emulator suite. It covers pretty much everything, from authentication, to firestore, to firebase functions. Pretty good.

I still miss one thing tho, Hot Reload. But it's still possible to do that with with firebase functions

This is how you hot reload the firebase functions

Initialize your project

Follow the steps here https://firebase.google.com/docs/emulator-suite/images/emulator-suite-usecase.png

Hot Reload

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. Now you can npm run serve, and your functions will be hot reloaded

Using Github Issue as CMS

Muhammad Muhajir — Tue, 01 Dec 2020 14:47:30 +0000

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, my website blog is powerd Github Issue + NextJS + Netlify.

The 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

Open for mentoring reactjs & javascript for free

Muhammad Muhajir — Tue, 01 Dec 2020 10:19:39 +0000

Hello, I've been doing React & Javascript for years. Now I am thinking to help people learning Javascript & React.

I am open for mentoring. If you're interested, leave comments below

UPDATE: It looks's like there are more than 1 person interested to learn javascript & react. So I just created this telegram group so we can follow up from there.

Evaluating Framer Web

Muhammad Muhajir — Sat, 23 May 2020 09:36:19 +0000

Evaluating Framer Web

Framer: The prototyping tool for teams

Initial impressions

Magic motion This feature is actually really good. Just signup and see their examples page.
Responsive, so we we can design in Iphone 11 resolution. But we can preview it with Iphone 11 Pro max which has different screen resolution
Figma Integration
The native tools like page, scroll, stacks is actually really good. It represents how Frontend Developement works. Figma doesn't have this yet.
It's free
Performance is good on small projects is good. Even on safrari.
Can import from figma, sketch
The pricing is pretty much the same as figma.

Pricing | Framer

Pricing for Figma's Free, Professional, and Organization plans.

The UI is good & clean

Cons:

Importing big figma project results in 'connection lost' in safari
Also, when I refresh the page. The imports is gone
framer becomes slow after importing a big project. We can see in the safari it says 'This web page using significat memory. Closing it may improve the responsiveness of your Mac'
On chrome, imported succesfully. But it's still slow, and somtimes the connection is also lost
Import is not perfect yet. Some font & color is not imported successfully

This is figma

This is framer

On safari, macbook, swiping from left to right. results to 'go back'. safari's built in functionality. So it's kinda hard to pan left. This problem doesn't exist on chrome

Summary:

Figma still wins in term of editing productivity. There are many quick actions in figma, like selection colors, etc
But for animation & protoyping, hands down framer wins.

But the good news is we can import from figma to framer (even tho it's not perfect yet). So we can edit in figma and do the animation in framer.

How often do you create a contact form for a website? How you do it? What's your stack ? What do you use to create it?

Muhammad Muhajir — Mon, 27 Jan 2020 14:57:33 +0000

How to watermark an image with Node.js

Muhammad Muhajir — Wed, 25 Sep 2019 11:46:21 +0000

It's going to be a very simple tutorial.

First, let's create a node.js project

Creating a Node.js project

mkdir jimp-watermark-demo
cd jimp-watermark-demo

npm init

Just press Enter, Enter, Enter...

npm install --save jimp

Open up your favorite editor. In my case it's Visual Studio Code.
So I can just type

code .

in terminal.

Create a file, name it index.js.

Writing the code

Here's the working code.

const Jimp = require("jimp");

const ORIGINAL_IMAGE =
  "http://www.defence.gov.au/ADFA/Images/news_events/whiteRibbon.jpg";

const LOGO = "https://upload.wikimedia.org/wikipedia/en/thumb/9/9f/Australian_Defence_Force_Academy_coat_of_arms.svg/1200px-Australian_Defence_Force_Academy_coat_of_arms.svg.png";

const LOGO_MARGIN_PERCENTAGE = 5;

const FILENAME = "test.jpg";

const main = async () => {
  const [image, logo] = await Promise.all([
    Jimp.read(ORIGINAL_IMAGE),
    Jimp.read(LOGO)
  ]);

  logo.resize(image.bitmap.width / 10, Jimp.AUTO);

  const xMargin = (image.bitmap.width * LOGO_MARGIN_PERCENTAGE) / 100;
  const yMargin = (image.bitmap.width * LOGO_MARGIN_PERCENTAGE) / 100;

  const X = image.bitmap.width - logo.bitmap.width - xMargin;
  const Y = image.bitmap.height - logo.bitmap.height - yMargin;

  return image.composite(logo, X, Y, [
    {
      mode: Jimp.BLEND_SCREEN,
      opacitySource: 0.1,
      opacityDest: 1
    }
  ]);
};

main().then(image => image.write(FILENAME));

Now try to run

node index.js

in your terminal.

It will create test.jpg. And that's the result.

Okay, okay. Slow down. I don't get it. What does the code do?

const Jimp = require("jimp");

const ORIGINAL_IMAGE =
  "http://www.defence.gov.au/ADFA/Images/news_events/whiteRibbon.jpg";

const LOGO = "https://upload.wikimedia.org/wikipedia/en/thumb/9/9f/Australian_Defence_Force_Academy_coat_of_arms.svg/1200px-Australian_Defence_Force_Academy_coat_of_arms.svg.png";

const LOGO_MARGIN_PERCENTAGE = 5;

const FILENAME = "test.jpg";

This part is pretty straight forward. We're importing jimp and defining some constants.

Next we're defining an async function main. We want it to be async because we want to do async/await inside the code. async/await can only work inside a function.

const [image, logo] = await Promise.all([
    Jimp.read(ORIGINAL_IMAGE),
    Jimp.read(LOGO)
  ]);

Here, we're reading an image from an url using jimp. Jimp.read result is a Promise. And we want to read these image in parallel. So, we use Promise.all. Promise.all also will produce Promise. So we use await to wait the result, and then we assign the result into image, and logo

logo.resize(image.bitmap.width / 10, Jimp.AUTO);

We want to resize the logo size to be smaller. We want the logo width to be 10% of the image, and we just give AUTO for the height.

const xMargin = (image.bitmap.width * LOGO_MARGIN_PERCENTAGE) / 100;
const yMargin = (image.bitmap.width * LOGO_MARGIN_PERCENTAGE) / 100;

const X = image.bitmap.width - logo.bitmap.width - xMargin;
const Y = image.bitmap.height - logo.bitmap.height - yMargin;

This is just the position of the logo. We want to position the logo on the bottom right.

return image.composite(logo, X, Y, [
    {
      mode: Jimp.BLEND_SCREEN,
      opacitySource: 0.1,
      opacityDest: 1
    }
  ]);
};

Here, we compose these two image together.

main().then(image => image.write(FILENAME));

finally we write the result into test.jpg

That's it.
Hope it helps you :)

VSCode Tips & Tricks Collection in GIF

Muhammad Muhajir — Thu, 08 Aug 2019 13:00:52 +0000

Hey everyone.

I just released VSCode.xyz, it's a collection of Visual Studio Code Tips & Tricks in GIF.

I'd love to hear some feedback from you guys.

Here's interesting tips & tricks

Explore more

You can explore more gifs at vscode.xyz

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

Muhammad Muhajir — Sun, 30 Jun 2019 13:45:19 +0000

This post is going to be a collection of VIM And Visual Studio Code tips that I use daily. And it will be updated frequently. So stay tuned. You can follow me here or on twitter @muhajirdev if you want. I'd really really love to hear your feedback here

Installed 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.

This post will be updated with more tips and tricks. Stay tuned.

Like and share if you found it useful.

If you have additional tips. You can put it on the comment below. I might can include it too in this post :)

Using TailwindCSS with SvelteJS

Muhammad Muhajir — Tue, 11 Jun 2019 00:44:23 +0000

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.

Any feedback would be very appreciated :)

Originally published at https://muhajir.dev/writing/using-tailwincss-with-svelte/

Anyone using VIM here?

Muhammad Muhajir — Sun, 09 Jun 2019 08:08:20 +0000

Anyone using VIM here?

I'd like to write a post about The Power of VIM + VSCode.

Have been using it for about 2 years+ now. Mostly for web development, JS and friends. So far have been extremely useful for me.

I'd like to do a quick survey. How many people use / doesn't use VIM here ? 🤚🏻

Update: I am compiling a post about VSCode + Vim Tips and Tricks here https://dev.to/muhajirdev/vim-visual-studio-code-tips-tricks-with-video-gif-8on

Scraping From Google & Visualizing Most Common Word With Wordcloud

Muhammad Muhajir — Mon, 03 Jun 2019 02:36:30 +0000

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/

DEV Community: Muhammad Muhajir

Web Development / ReactJS Coaching session

Speed up your firebase development workflow and save your time.

Initialize your project

Hot Reload

Using Github Issue as CMS

So how does it works ?

Fetching the data

Creating github token.

Rendering it on NextJS

Let's try it

Deploy it to Netlify

Rebuild the site when there's a new issue with Webhook

Open for mentoring reactjs & javascript for free

Evaluating Framer Web

Evaluating Framer Web

How often do you create a contact form for a website? How you do it? What's your stack ? What do you use to create it?

How to watermark an image with Node.js

Creating a Node.js project

Writing the code

Okay, okay. Slow down. I don't get it. What does the code do?

VSCode Tips & Tricks Collection in GIF

Explore more

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

Delete In Tag

Delete Surrounding Tag

Change single quote to double quote

Change Tag with Emmet

Go to matching tag with Emmet

Copy And Paste with VIM

Update

Using TailwindCSS with SvelteJS

Get Svelte default template

Install dependencies

Setup rollup-plugin-postcss

Create postcss.config.js

Create src/main.css

Import src/main.css in src/main.js

Optional

Anyone using VIM here?

Scraping From Google & Visualizing Most Common Word With Wordcloud

Scraping

Installing Scrapy:

First try

Get all text

Get links from Google

Visualizing with Wordcloud

Setup `rollup-plugin-postcss`

Create `postcss.config.js`

Create `src/main.css`

Import `src/main.css` in `src/main.js`