DEV Community: SRMKZILLA

Getting to know Vim

Aniruddha Chatterjee — Tue, 11 Aug 2020 12:39:13 +0000

If I am to answer the question “What is Vim?”, I would like to quote the official website of Vim,

“Vim is a highly configurable text editor for efficiently creating and changing any kind of text. It is included as “vi” with most UNIX systems and with Apple OS X.”

Vim is a ubiquitous text editor, that is it is available for all operating systems such as Windows, Macintosh and various distributions of Linux. And as you may have guessed (or might not!), Vim is a text editor, that is, it is used to edit text.

Let us see how we can use Vim to create and edit a simple text file. For the demonstration, I will be using Vim on my Windows 10 laptop.

Installing Vim

Vim can be download from their official website (click here for the downloads page).

There is a self-installing executable file for Windows which we shall use. Click on the link to download the setup.

After the file has been downloaded, run the setup. We shall not be changing any settings in the installer as of now. The installer will now install Vim with the default settings.

If you are greeted with an installation finished message, voila! You have successfully installed Vim on Windows.

Starting Vim

Starting Vim is pretty easy. Open up a Command Prompt window and enter “vim”. You will be greeted with the Vim welcome screen.

If you are getting an error that “vim is not recognised as an internal or external command”, you need to add Vim to your Path Variable. This is a handy tutorial on how to do so. You need to mention the path where vim.exe was installed. If you went with the default installation, it should be “C:\Program Files (x86)\Vim\vim82” *where *vim82 can change depending on your Vim version. Restart the Command Prompt terminal and all Vim commands should now work.

Vim has an inbuilt tutorial to get started. Type in “vimtutor” and hit enter to start the tutorial.

We shall now be learning how to create, edit and save a simple text file with Vim.

Working with a Simple Text File

To create a new file, we follow the syntax “vim ”

So to create a new text file, open up your command prompt and navigate to the location where you want your file to be created. Now type “vim helloWorld.txt” and hit enter.

Vim will now create a text file with the name HelloWorld and will open the Vim editor for you to write your content. Vim has many modes in which we can work. Vim will now open in Normal Mode, which is used for simple editing purposes. We need to switch to Insert Mode, where we can insert/edit data in the file. Press “i” to switch to* Insert Mode.*

We will just write in the line “This is a Hello World Text Document.”

Now that we have our file ready, we need to save the contents and quit the editor.

To do this, we first need to switch to Command Line Mode to be able to issue instructions to the editor. Pressing colon (:) in the Normal Mode switches to the Command Line Mode.

To switch from Insert Mode *into *Normal Mode, press “Esc”. Now to move to Command Line Mode, we shall use the colon (:).

To save a file and quit, we use the command “:wq”. And to quit the editor without saving the file, we use “:q!”.

We shall save this file. So type in “:wq” and press enter. And you have successfully created your first text file with Vim!

A Bit about Vim Modes

If you are a bit confused about modes in Vim, don’t worry. Let us summarise what we learnt about modes.

Modes are the various states of Vim editor which have their own purposes. In this demonstration, we learnt about three modes-

Normal Mode: It is used for navigation around the file and for simple edits. Vim focuses heavily on editing than writing. Since Vim is used a lot by programmers who do more of editing as compared to writing, Vim opens up in the Normal Mode by default.
Insert Mode: **This mode is used for text editing. Every keystroke in this mode is displayed on the editor screen. To enter into this use, we can use the key “i”. To switch back to Normal Mode, we can use the “Esc**” key.
Command Line Mode: **This mode is used for operations like saving the file and quitting the editor. Pressing the colon “:**” key in Normal Mode takes us to the Command Line Mode. There are other modes in Vim, which we shall not be discussing at this time. ### Doing More with Vim
You can learn more about Vim with their inbuilt tutorial. It can be accessed by typing “vimtutor” from your Command Prompt Terminal.
There is an interactive tutorial to learn Vim. It can be found at VIM Adventures.
To know more about Vim Modes and how to work with them, there is a handy guide from FreeCodeCamp. That is it. You learnt how to install Vim on Windows, learnt a bit about Modes and created your first text file in Vim. Vim is a very powerful editor and is used by a large number of programmers. Since Vim focuses more on editing than writing, learning Vim would definitely prove to be useful for you. Happy learning!

Create a Medium like Lazy Image Loading Effect Using Gatsby.js in 5 minutes

Shrey Sachdeva — Tue, 11 Aug 2020 07:56:03 +0000

Ensuring that users get the best experience with images on the web can be a tedious task. However, with Gatsby, we can leverage the power of gatsby-image to get these speedy, optimised images with a little setup and a rich toolset.

You probably already saw this effect here on Medium, the blurry images with a nice “fade in” animation being changed by their respective originals. This effect is called Progressive/Lazy Image Loading.

What is Lazy Image Loading?

Lazy Image Loading is a practice that’s been around for a decade and for good reason: images are usually the heaviest downloads on a given webpage and avoiding unloading images that are never seen saves the user bandwidth. With this technique, you can sharply load the images on your website when required, and use blurred placeholders while the original image is being lazy-loaded. And when it finishes loading, you can do a smooth transition to the original image. It’ll help you shave-off hours of work, use fewer resources, improve performance and build a meaningful experience for the user.

Gatsby does a great job optimizing images. With plugins and some configuration, you can setup image preloading and the blur-up effect in just a matter of minutes. This helps with a smoother user experience that is faster and way, way better!

Let’s code right in!

Step 1: Install Dependencies

If you used the CLI, you’ll have to install these packages withyarn. If you used npm install, then continue to use npm so you don't mix the package installers. I'll be using npm for the rest of this demo.

To install gatsby-image with npm run:

npm install gatsby-image

We’ll also need to install two more npm packages that are required to process the images.

npm install gatsby-transformer-sharp gatsby-plugin-sharp

You can read more about how these packages work, here.

Step 2: Configure Gatsby

Once these packages are installed we need to include them manually in our gatsby-config.js file.

Include the following snippet to the file:

module.exports = {
  siteMetadata: {
    title: 'Gatsby Default Starter'
  },
  plugins: [
    **{
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/src/images`,
        name: 'images'
      }
    },**
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `pages`,
        path: `${__dirname}/src/pages`,
      }
     },

    **'gatsby-transformer-sharp',
    'gatsby-plugin-sharp',
 **],
}

This snippet will also allow us to create file nodes from our images that can be used later to query the /images folder inside the /src directory using GraphQL.

Step 3: Writing queries in GraphQL

You can navigate to GraphiQL which is an integrated development environment (IDE). It’s a powerful (and all-around awesome) tool you’ll use often while building Gatsby websites.

You can access it when your site’s development server is running — normally at http://localhost:8000/___graphql.

I have added 4 images inside my /src/images directory and I will write the following query to get the contents of the /images folder.

{
  images: allFile {
    edges {
      node {
        relativePath
        name
        childImageSharp {
          fluid {
            srcSet
            src
            srcWebp
            base64
            originalImg
            originalName
            presentationHeight
            presentationWidth
            sizes
            srcSetWebp
            tracedSVG
            aspectRatio
          }
        }
      }
    }
  }
}

Writing this query will return a string that you can see in the response column. This essentially means that Gatsby is able to find your image and process it.

http://localhost:8000/__graphql

You can read more about how Gastby uses GraphQL here.

Step 4: Creating Components

Now that we have the query string, we can use it in our component. I will create a image.js component inside /src/components directory.

Here, we need to import StaticQuery as well as graphql from gatsby and Img *from *gatsby-image.

import { StaticQuery, graphql } from "gatsby"
import Img from "gatsby-image"

We’ll now add the query that we made earlier to this component. Our React component should return a tag, which has a query property and a render property.

<StaticQuery 
  query={
    graphql`{
      query {        
        images: allFile {
          edges {
            node {
              relativePath
              name
              childImageSharp {
                fluid {
                  ...GatsbyImageSharpFluid
                }
              }
            }
          }
        }
      }
  `} 
  render={(data) => (
    <>
      {*/* our JSX will go in here */*}
    </>
  )}
/>

Notice how we are using ...GatsbyImageSharpFluid here, which is a fragment that replaces all the fields inside the fluid property.

Now, we need to include our image inside the render property which has to be passed down two props — a fluid and an alt prop.

The final result looks like this:

We’re almost done!

Let’s create a new page that will accept these props to load the images.

Step 5: Putting it together

I’ll name this pagegallery.js and place it in the/src/pages folder. And import the Image component we created earlier.

import Image from "../components/Image"

Let’s pass down the props and here’s how our Gallery page should look like:

*const* Gallery = () *=>* (
  <div>  
     <*Image* alt="image_1" filename="image_1.jpg" />
     <*Image* alt="image_2" filename="image_2.jpg" />
     <*Image* alt="image_3" filename="image_3.jpg" />
     <*Image* alt="image_4" filename="image_4.jpg" />
  </div>
)

export Gallery

It’s all done! Open up http://localhost:8000/gallery/ after running gatsby develop on your command line and…

https://gist.github.com/shrey-sachdeva2000/07a6b8ef822f2b385a15f186c933fcd6

Voila!

There you have it. A really cool Lazy Loading Image Effect. Oh, by the way, I really wish I could lazy-load the image of the black hole too if only we had it in better pixels(a sincere astrophilia).

Conclusion

Gatsby does a great job at processing and handling images and by leveraging the power of Gatsby, optimizing images is easy as pie. You can also try out generating a traced SVG of your image while it processes by applying a traceSVG argument and the appropriate fragment. Let me know how did that go for you!

If you liked this article, don’t forget to give it a 👏 and share it with your friends! And subscribe for more geeky and cool articles in the future.