DEV Community: Shashank Shekhar

Creating a Markdown Editor in React.js & TypeScript with Deployment through Github Actions

Shashank Shekhar — Tue, 03 Mar 2020 05:17:14 +0000

I remember when I was doing freeCodeCamp, I was about to make a Markdown editor in one of the projects. So I decided to go with the Markdown editor this time, combined with React.js and TypeScript.

What you'll learn

Setting up React.js project with TypeScript
Creating a markdown editor by compiling down it to html
Using React hooks to create theming for the application
Continuous deployments through Github Actions

I am a lazy person, I think most of you are, too. So here's the code and demo link, if you directly want to see them.

Project Source Code:

ashwamegh / react-typescript-markdown-editor

Markdown editor with the use of React.js and TypeScript combined with continuous deployments using Github actions workflow

Project Demo: ashwamegh/react-typescript-markdown-editor

Lets start with setting up our project

1. Setting up our project with React.js & TypeScript

We all know the capabilities of TypeScript, how it can save the day for your silly mistakes. And if combined with react, they both become a great combination to power any application.

I will be using create-react-app since, it gives the TypeScript support out of the box. Go to your root directory where you want to create the project and run this command:

npx create-react-app markdown-editor --template typescript

this --template typescript flag will do all the hard work for you, setting up React.js project with TypeScript.

Later, you'll need to remove some of bootstrapped code to start creating your application.

For reference you can check this initial commit to see what has been removed:
https://github.com/ashwamegh/react-typescript-markdown-editor/commit/7cc379ec0d01f3f1a07396ff2ac6c170785df57b

After you've completed initial steps, finally we'll be moving on to creating our Markdown Editor.

2. Creating Markdown Editor

Before diving into the code, let's see the folder structure for our project, which we will be developing.

├── README.md
├── package.json
├── public
|  ├── favicon.ico
|  ├── index.html
|  ├── logo192.png
|  ├── logo512.png
|  ├── manifest.json
|  └── robots.txt
├── src
|  ├── App.test.tsx
|  ├── App.tsx
|  ├── components
|  |  ├── Editor.tsx
|  |  ├── Footer.tsx
|  |  ├── Header.tsx
|  |  ├── Main.tsx
|  |  ├── Preview.tsx
|  |  └── shared
|  |     └── index.tsx
|  ├── index.css
|  ├── index.tsx
|  ├── react-app-env.d.ts
|  ├── serviceWorker.ts
|  ├── setupTests.ts
|  └── userDarkMode.js
├── tsconfig.json
└── yarn.lock

I will be using emotion for creating styles for my components and react-icons for icons used in the project. So you'll be needed to install emotion and react-icons by running this command:

npm i -S @emotion/core @emotion/styled react-icons

or if you're using yarn like me, you can run

yarn add @emotion/core @emotion/styled react-icons

Moving forward, first of we will create a shared components folder to create components we will be reusing.


/* src/components/shared/index.tsx */

import React from 'react'
import styled from '@emotion/styled'

export const ColumnFlex = styled.div`
  display: flex;
  flex-direction: column;
`
export const RowFlex = styled.div`
  display: flex;
  flex-direction: row;
`

In this file, we have declared two styled components for flex-column and flex-row styled divs which we'll be using later.
To know more about styled-components with emotion library, head on to this link.

3 Using React hooks to create a custom theme hook

We'll use react hooks to create our custom hook to implement basic theming capabilities, using which we can toggle our theme from light to dark colors.

/* useDarMode.js */

import { useEffect, useState } from 'react'

export default () => {
  const [theme, setTheme] = useState('light')

  const toggleTheme = () => {
    if (theme === 'dark') {
      setTheme('light')
    } else {
      setTheme('dark')
    }
  }

  useEffect(() => {
    const localTheme = localStorage.getItem('theme')
    if (localTheme) {
      setTheme(localTheme)
    }
  }, [])

  return {
    theme,
    toggleTheme,
  }
}

In our hooks file, we are setting the initial state of the theme to be light using useState hook. And using useEffect to check whether any theme item exists in our browser's local storage, and if there is one, pick the theme from there and set it for our application.

Since, we have defined our shared components and custom react hook for theming, let's dive into our app components.

So, I have divided our app structure into 5 components and those are: Header, Main (contains main section of the app with Editor & Preview component) and Footer component.

Header // contains normal header code and a switch to toggle theme
Main // container for Editor and Preview components i. Editor // contains code for Editor ii. Preview // contains code for previewing markdown code into HTML
Footer // contains normal footer code

/* src/components/Header.tsx */

import React from 'react'
import { FiSun } from 'react-icons/fi'
import { FaMoon } from 'react-icons/fa'

// this comment tells babel to convert jsx to calls to a function called jsx instead of React.createElement
/** @jsx jsx */
import { css, jsx } from '@emotion/core'

// Prop check in typescript
interface Props {
  toggleTheme: () => void,
  theme: string
}

const Header: React.FC<Props> = ({ theme, toggleTheme }) => {

  return (
    <header
      css={theme === 'dark' ?
      css`
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        background-color: #f89541;
        padding: 24px 32px;
        font-size: 16px;
      `:css`
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        background-color: #f8f541;
        padding: 24px 32px;
        box-shadow: 0px -2px 8px #000;
        font-size: 16px;
    `}>
      <div className="header-title">
        Markdown Editor
      </div>
      <div css={
        css`
          cursor: pointer;
        `}
        onClick={toggleTheme}
      >
       {
         theme === 'dark'?
         <FaMoon />:
         <FiSun />
       }
      </div>
    </header>
  )
}

export default Header;

In this component, we are using TypeScript for prop checks and you may wonder, why we're mentioning React.FC here. Its just that, by typing our component as an FC (FunctionComponent), the React TypeScripts types allow us to handle children and defaultProps correctly.

For styling our components we're using css prop with string styles from emotion library, you can learn more about this by following the docs here

After creating the Header component, we'll create our Footer component and then we'll move on to Main component.

Let's see the code for Footer component

import React from 'react'

// this comment tells babel to convert jsx to calls to a function called jsx instead of React.createElement
/** @jsx jsx */
import { css, jsx } from '@emotion/core'

const Footer: React.FC = () => {

  return (
    <footer>
      <div 
        className="footer-description"
        css={
            css`
                padding: 16px 0px;
                overflow: hidden;
                position: absolute;
                width: 100%;
                text-align: center;
                bottom: 0px;
                color: #f89541;
                background: #000;
            `
        }>
       <span>{`</>`}</span><span> with <a href="https://reactjs.org" target="_blank">React.js</a> &amp; <a href="https://www.typescriptlang.org/" target="_blank">TypeScript</a></span>
      </div>
    </footer>
  )
}

export default Footer;

Footer component contains simple code to render usual credit stuff.

/* src/components/Main.tsx */

import React, { useState } from 'react'

// this comment tells babel to convert jsx to calls to a function called jsx instead of React.createElement
/** @jsx jsx */
import { css, jsx } from '@emotion/core'
import { RowFlex } from './shared'
import Editor from './Editor';
import Preview from './Preview';

interface Props {
  theme: string
}

const Main: React.FC<Props> =  ({ theme }) => {
  const [markdownContent, setMarkdownContent] = useState<string>(`
# H1
## H2
### H3
#### H4
##### H5

__bold__
**bold**
_italic_
`);
  return (
    <RowFlex
      css={css`
        padding: 32px;
        padding-top: 0px;
        height: calc(100vh - 170px);
        `}>
      <Editor theme={theme} markdownContent={markdownContent} setMarkdownContent={setMarkdownContent}/>
      <Preview theme={theme} markdownContent={markdownContent}/>
    </RowFlex>
  )
}

export default Main;

Since, some of the code will look familiar to you from the previous components which you can now understand yourself. Other than that, we have used useState hook to create a state to hold our markdown content and a handler to set it, called setMarkdownContent in the code.

We need to pass these down to our Editor and Preview components, so that, they can provide the user the way to edit and preview their markdown content. We have also set an initial state for content with some basic markdown text.

Let's see the code for Editor component:

/* src/components/Editor.tsx */

import React, { ChangeEvent } from 'react'
import PropTypes from 'prop-types';

// this comment tells babel to convert jsx to calls to a function called jsx instead of React.createElement
/** @jsx jsx */
import { css, jsx } from '@emotion/core'
import { ColumnFlex } from './shared'

interface Props {
  markdownContent: string;
  setMarkdownContent: (value: string) => void,
  theme: string
}

const Editor: React.FC<Props> = ({ markdownContent, setMarkdownContent, theme }) => {
    return (
        <ColumnFlex
        id="editor"
        css={css`
            flex: 1;
            padding: 16px;
          `}>
        <h2>
        Editor
        </h2>
        <textarea
          onChange={(e: ChangeEvent<HTMLTextAreaElement>) => setMarkdownContent(e.target.value)}
          css={theme === 'dark'?
          css`
            height: 100%;
            border-radius: 4px;
            border: none;
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 1);
            background: #000;
            color: #fff;
            font-size: 100%;
            line-height: inherit;
            padding: 8px 16px;
            resize: none;
            overflow: auto;
            &:focus {
              outline: none;
            }
          `
          : css`
            height: 100%;
            border-radius: 4px;
            border: none;
            box-shadow: 2px 2px 10px #999;
            font-size: 100%;
            line-height: inherit;
            padding: 8px 16px;
            resize: none;
            overflow: auto;
            &:focus {
              outline: none;
            }
          `}
          rows={9}
          value={markdownContent}
          />
      </ColumnFlex>
    )
}

Editor.propTypes = {
  markdownContent: PropTypes.string.isRequired,
  setMarkdownContent: PropTypes.func.isRequired,
}

export default Editor;

This is a straight forward component which uses <textarea/> to provide the user a way to enter their inputs, which have to be further compiled down to render it as HTML content in the Preview component.

Now, we have created almost all the components to hold our code except the Preview component.
We'll need something to compile down the user's markdown content to simple HTML, and we don't want to write all the compiler code, because we have plenty of options to choose from.

In this application, we'll be using marked library to compile down our markdown content to HTML. So you will be need to install that, by running this command:

npm i -S marked

or with yarn

yarn add marked

If you want to know more about this library, you can see it here

Let's see the code for our Preview component

/* src/components/Preview.tsx */

import React from 'react'
import PropTypes from 'prop-types'
import marked from 'marked'

// this comment tells babel to convert jsx to calls to a function called jsx instead of React.createElement
/** @jsx jsx */
import { css, jsx } from '@emotion/core'
import { ColumnFlex } from './shared'

interface Props {
    markdownContent: string,
    theme: string
}

const Preview: React.FC<Props> = ({ markdownContent, theme }) => {
    const mardownFormattedContent = ( marked(markdownContent));

    return (
        <ColumnFlex
            id="preview"
            css={css`
            flex: 1;
            padding: 16px;
            `}
        >
            <h2>Preview</h2>
            <div
                css={theme === 'dark'
                ? css`
                height: 100%;
                border-radius: 4px;
                border: none;
                box-shadow: 0 -2px 10px rgba(0, 0, 0, 1);
                font-size: 100%;
                line-height: inherit;
                overflow: auto;
                background: #000;
                padding: 8px 16px;
                color: #fff;
                `
                : css`
                height: 100%;
                border-radius: 4px;
                border: none;
                box-shadow: 2px 2px 10px #999;
                font-size: 100%;
                line-height: inherit;
                overflow: auto;
                background: #fff;
                padding: 8px 16px;
                color: #000;
            `}
            dangerouslySetInnerHTML={{__html: mardownFormattedContent}}
            >
            </div>
        </ColumnFlex>
    )
}

Preview.propTypes = {
    markdownContent: PropTypes.string.isRequired
  }

export default Preview;

In this component, we are compiling the markdown content and storing it in mardownFormattedContent variable. And to show a preview of the content in HTML, we will have to use dangerouslySetInnerHTML prop to display the HTML content directly into our DOM, which we are doing by adding this dangerouslySetInnerHTML={{__html: mardownFormattedContent}} prop for the div element.

Finally we'are ready with all the component which will be need to create our Markdown editor application. Let's bring all of them in our App.tsx file.

/* src/App.tsx */

import React from 'react'
import { css, jsx } from '@emotion/core'

// Components
import Header from './components/Header'
import Main from './components/Main'
import Footer from './components/Footer';
import useDarkMode from './userDarkMode';

function App() {
  const { theme, toggleTheme } = useDarkMode();
  const themeStyles = theme === 'light'? {
    backgroundColor: '#eee',
    color: '#000'
  }: {
    backgroundColor: '#171616',
    color: '#fff'
  }
  return (
    <div 
      className="App"
      style={themeStyles}
      >
      <Header theme={theme} toggleTheme={toggleTheme}/>
      <Main theme={theme}/>
      <Footer />
    </div>
  );
}

export default App;

In our App component, we are importing the child components and passing down the theme props.

Now, if you have followed all steps above, you'll have a running markdown editor application, for styles I have used, you can see my source code using then link I mentioned.

Now, its time to create Github actions for our project to create continuous deployment workflow on every push to master.

4 Setting up continuous deployments through Github Actions

We’ll be using Github actions workflow to build and deploy our web application on every push to master.

Since this is not a enterprise application that holds the branches for production and development, I will setup my workflow for master branch, but if in any time in future, you require to setup the Github action workflow for your enterprise application, Just be careful with the branches.

To do so, we’ll follow some steps:

Create a folder in our project root directory .github/workflows/, this will hold all the workflows config.
We’ll be using JamesIves/github-pages-deploy-action action to deploy our application.
Next we’ll create our .yml file here, which will be responsible for the action to build and deploy our application to GitHub pages. Let’s name it build-and-deploy-to-gh-pages.yml

Let's see what goes inside this build-and-deploy-to-gh-pages.yml

# build-and-deploy-to-gh-pages.yml

name: Build & deploy to GitHub Pages
on:
  push:
    branches:
      - master
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v1
      - name: Set up Node
        uses: actions/setup-node@v1
        with:
          node-version: 10.x 
      - name: Set email
        run: git config --global user.email "${{ secrets.adminemail }}"
      - name: Set username
        run: git config --global user.name "${{ secrets.adminname }}"
      - name: npm install command
        run: npm install
      - name: Run build command
        run: npm run build
      - name: Deploy
        uses: JamesIves/github-pages-deploy-action@releases/v3
        with:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          BASE_BRANCH: master
          BRANCH: gh-pages # The branch the action should deploy to.
          FOLDER: build # The folder the action should deploy.

This workflow will run every time, we push something into master and will deploy the application through gh-pages branch.

Let's Breakdown the Workflow file

name: Build & deploy to GitHub Pages
on:
  push:
    branches:
      - master

This defines our workflow name and trigger for running the jobs inside it. Here we are setting the trigger to listen to any Push events in master branch.

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v1
      - name: Set up Node
        uses: actions/setup-node@v1
        with:
          node-version: 10.x 
      - name: Set email
        run: git config --global user.email "${{ secrets.adminemail }}"
      - name: Set username
        run: git config --global user.name "${{ secrets.adminname }}"
      - name: npm install command
        run: npm install
      - name: Run build command
        run: npm run build
      - name: Deploy
        uses: JamesIves/github-pages-deploy-action@releases/v3
        with:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          BASE_BRANCH: master
          BRANCH: gh-pages # The branch the action should deploy to.
          FOLDER: build # The folder the action should deploy.

This is the most important part in our workflow, which declares the jobs to be done. Some of the lines in the config are self-explanatory runs-on: ubuntu-latest it defines the system, it will be running on.

- name: Checkout
        uses: actions/checkout@v1

This is an action for checking out a repo, and in later jobs we are setting our development environment by installing node and setting our git profile config. Then we are running npm install to pull out all the dependencies and finally running the build command.

- name: Deploy
        uses: JamesIves/github-pages-deploy-action@releases/v3
        with:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          BASE_BRANCH: master
          BRANCH: gh-pages # The branch the action should deploy to.
          FOLDER: build # The folder the action should deploy.

After the build command has been completed, we are using JamesIves/github-pages-deploy-action@releases/v3 action to deploy our build folder to gh-pages.

Whenever, you'll push something in your master branch, this workflow will run and will deploy your static build folder to gh-pages branch.

Now, when the deployment is completed, you'all have your app running at you github link https://yourusername.github.io/markdown-editor/.

Don't forget to add "homepage" : "https://yourusername.github.io/markdown-editor/" in package.json file, otherwise serving of static contents may cause problem.

If you liked my article, you can follow me on Twitter for my daily paper The JavaSc®ipt Showcase, also you can follow my personal projects over Github. Please post in comments, how do you like this article. Thanks!!

Liquid error: internal

ashwamegh / react-typescript-markdown-editor

Markdown editor with the use of React.js and TypeScript combined with continuous deployments using Github actions workflow

Why should you prefer npx over npm

Shashank Shekhar — Thu, 06 Feb 2020 06:44:51 +0000

I would like to show you, what are the benefits of npx over npm. Again, every developer has the way of working. Some would stick to npm but some are likely to upgrade themselves to npx.

You can use npx and npm together, but for some cases, you might prefer npx. Here are some of the cases where you can achieve more with npx:

1. Run npm scripts easily with locally installed tools using npx

Traditionally we developers have used local dev-dependencies to run executables locally without installing them globally on any user's system for individual projects.
For Eg: If we want to run workin-hard in our project scope, we used to execute these following codes:

# to install workin-hard in local devDependencies
npm i -D workin-hard
# to execute workin-hard from local binaries
./node_modules/.bin/workin-hard --jackryan

Now we will see, how to accomplish same thing with npx without extra burden of writing more code:

npx workin-hard --jackryan

In above code, you can see that, I have removed workin-hard from devDependencies and just executed npx workin-hard --jackryan This will manage all - installing and running the command.
So from this example, I want to say that if you have locally installed devDependencies then npx will run that version, else it will install the package in your memory, somewhere, and then execute it, without adding it to any dependencies.

2. Running commands in one go

This is the part I love the working with npx. Let's expect that we are about to make a new React.js app using create-react-app, then in order to achieve that, we will run the code below:

npm i -g create-react-app
create-react-app my-app

now, if you want to try out this same scenario with npx, then you only need to run this single liner command:

npx create-react-app my-app

This single liner command execution is much simpler and shorter to use. While we can always use npm when we need, but to increase the productivity, npx can prove to be a worthy tool.

3. Run commands with multiple node.js versions

Developers who work on multiple projects have to switch their node.js versions constantly according to projects. Well, we have been using tools like version manager (for eg: nvm) to accomplish this.
While one of the npx options allows you to obtain the same functionality without installing a version manager. If you use - package or -p flag, then you can specify the package name and package version to run a particular script or command in reference to that version.
There is a package named node which is already available in npm registry which contains the latest node binaries. So, we can ditch version managers by using this package to run our program by specifying node versions. The command you will be needed to run to achieve this is:

npx -p node@8 script.js

Note: Please don't install node globally with npm 2. npm@2 immediately removes node, then you will not be able to use the current setup of npx and npm

this command will install node v8 and will execute script.js with that version. There are multiple options available with npx, you can see that by executing npx --help in your terminal. Some of the options are :

--userconfig           Path to user npmrc.                            
--call, -c             Execute string as if inside `npm run-script`
--shell, -s            Shell to execute the command with, if any.
--ignore-existing      Ignores existing binaries in $PATH, or in
the local project. This forces npx to do a temporary install and use the latest version.                      
--quiet, -q            Suppress output from npx itself. Subcommands will not be affected.                                  
--node-arg, -n         Extra node argument when calling a node binary.

4. Implement shell auto fallback with npx

In many cases, we don't need to use npx directly. Sometimes, we just need to call the binary directly which have been installed globally, like create-react-app my-app.

npx provides us an option to set our shell's auto fallback mechanism, in that case, if any user encounters command not found handler in their shell, then the shell will forward the call to npx. The catch is that, we need to use pkg@version syntax to call the binary. This save us from potentially-dangerous typo errors.

So, if we want to use this cool feature in our shell, we will need to complete these two steps:

Step 1: Configure your shell (bash, zsh, fish) for auto-fallback by executing npx --shell-auto-fallback [shell], so if your shell is zsh, then run

npx --shell-auto-fallback zsh

Step 2: If you want to configure it globally, then add the above line in your ~/.bashrc, ~/.zshrc, ~/.config/fish/config.fish files, depending on what shell are you using.

5. Run your scripts with Package Environments

I was surprised to see that, we can get environment variables using npm run env | grep npm_

If you'll run this command

npm run env | grep npm_

You'll see a bunch of npm environment variables on your console, similar to this.

The thing is when we run a npm script, we do not have access to these variables. But with npx, this is not the case, npx do have the access to package environment variables out of the box.

So, if we want to use our package environment variables while running a script, we can do it with npx without any extra effort.

For eg: In my case, I would like to print my package name and version with executing another script too.

npx -p cowsay \
-c 'echo "$npm_package_name@$npm_package_version" | cowsay'

It'll display my package name and version on the console, like this

This is just the tip of the iceberg, you can explore more than this with the package npx and environment variables

6. Execute/Share your gists on the go with npx

This is one of things, I love using npx, that you can run the scripts using gist link in the CLI.

For Eg:

npx https://gist.github.com/ashwamegh/3f089382fb0ebb94200cbffd524b9b08

Run this and share the output!

Hope, I have explained it well. If you have any queries or would like to add something, you're more than welcome.

How to hide scrollbar from any HTML element

Shashank Shekhar — Wed, 05 Feb 2020 19:38:38 +0000

Use CSS to hide the scrollbar

There are times when we need to hide the scrollbar from the HTMl elements. The uses can vary from person to person. It is opinionated topic to keep the scrollbar or not based on User Interactions(UI)/User Experience(UX).

Most of the time, I don't like to show the scrollbar to the user because of design practices I follow.

To achieve this, you just need to tickle with CSS to add some pseudo selectors for hiding it based on Browser's stylings

Let's see the default UI for scroll elements which will show the scrollbar.

We will declare a div which will contain a list of items and then we will apply some CSS to provide max-width and max-height to see the scroll behaviour.

<!-- Element that contains scrollbar -->
<div class="scroll-show">
    <ul>
      <li>Some Value</li>
      <li>Some Value</li>
      <li>Some Value</li>
      <li>Some Value</li>
      <li>Some Value</li>
      <li>Some Value</li>
      <li>Some Value</li>
      <li>Some Value</li>
      <li>Some Value</li>
      <li>Some Value</li>
      <li>Some Value</li>
      <li>Some Value</li>
      <li>Some Value</li>
      <li>Some Value</li>
      <li>Some Value</li>
      <li>Some Value</li>
      <li>Some Value</li>
    </ul>
  </div>

.scroll-show ul {
  max-height: 100px;
  max-width: 200px;
  overflow: auto;
  border: 2px solid #f3f3f3;
  padding-left: 16px;
}

Let's see how it look in the screen

You see, browser automatically adds the scrollbar by default, but If we want to hide, we can do it.

Now, we will add some css to the element to hide the scrollbar:

We will declare a div with some other class name which will contain same number of items and then we will use the same CSS but with some extra rules to see the scroll behaviour but not see the scrollbar.

<!-- Element that contains scrollbar -->
<div class="scroll-hide">
  <ul>
    <li>Some Value</li>
    <li>Some Value</li>
    <li>Some Value</li>
    <li>Some Value</li>
    <li>Some Value</li>
    <li>Some Value</li>
    <li>Some Value</li>
    <li>Some Value</li>
    <li>Some Value</li>
    <li>Some Value</li>
    <li>Some Value</li>
    <li>Some Value</li>
    <li>Some Value</li>
    <li>Some Value</li>
    <li>Some Value</li>
    <li>Some Value</li>
    <li>Some Value</li>
  </ul>
</div>

.scroll-hide ul {
  max-height: 100px;
  max-width: 200px;
  border: 2px solid #f3f3f3;
  padding-left: 16px;
  overflow: auto;
  /* this will hide the scrollbar in mozilla based browsers */
  overflow: -moz-scrollbars-none;
  scrollbar-width: none;
  /* this will hide the scrollbar in internet explorers */
  -ms-overflow-style: none;
}

/* this will hide the scrollbar in webkit based browsers - safari, chrome, etc */
.scroll-hide ul::-webkit-scrollbar { 
  width: 0 !important;
  display: none; 
}

Let's see, whether we achieved what we wanted or not

Here, you can see that, the scrollbar is no longer can be seen, but the functionality for scrolling remain intact.

Hope this helps you someway. Do comment your thoughts on anything, you would like to change or add.