DEV Community: Fikri Mulyana Setiawan

How to Configure Vim as Your Main Python IDE

Fikri Mulyana Setiawan — Sun, 16 Jan 2022 15:02:04 +0000

IDE and text-editor is the essential tools for programmers. and, as you know, there are so many text editor out there. There are Notepad ++, Visual Studio Code, Sublime Text, Atom, Brackets, etc. But, i and many people out there choose Vim as our text editor, since it is highly customizable for our programming purpose.

What Is Vim ?

For those of you who don't know, Vim is a text editor, not an IDE. but, don't get me wrong. Vim is more than just a text editor. We can make Vim works like an IDE. i wouldn't explain what makes Vim special here. you can watch about that in this video :

Altough Vim is very good for coding, it doesn't look like that at the first time. When you first installed vim and open it, it will look like this :

not bad, right? but, since we will using Vim as our main text editor, we need a better view. this is my Vim text editor after configuring it :

So, how do we make vim looks better ? here is some configuration for vim that i think are important :

Auto Indent

auto indenting feature is so important if you are writing code in programming languages that care about indenting, likes python. to enable auto-indent feature, you can type :set ai in normal mode. if you want this feature enable for every file you create, you can add set ai (without colon) in your _vimrc file (for windows user).

Syntax Highlighting

for some coder, syntax highlighting is an important feature. syntax highlighting feature makes us understand the code easier. to enable syntax highlighting in vim, open your _vimrc file, and add this text : syntax on.

Turn Off The Bell

When you are using Vim for the first time, you will notice that there is a bell sound when something wrong happen. for me, this is so annoying. to turn off this sound, add set belloff=all to your _vimrc file.

Line Numbering

to display line number in Vim, add set number to your _vimrc file. if you want relative numbering, add set relativenumber to your _vimrc file.

Matching Brackets and Quotation Marks

when you use VS Code, Atoms, and other text editor, when you type (, you will see that ) also appears automatically. But, when you use Vim, you wouldn't see this feature by default. to enable this feature, add inoremap ( ()<Esc>i to your _vimrc file. you can do the same thing with quotation marks. So, to enable this feature for every brackets and quotation marks, add this code to your _vimrc file :

inoremap ( ()<Esc>i
inoremap { {}<Esc>i
inoremap [ []<Esc>i
inoremap ' ''<Esc>i
inoremap " ""<Esc>i

Change Theme In Vim

Themes in Vim are called as colorscheme. After installing vim, you will also get some Theme/Colorscheme by default. to change the colorscheme that applied in vim, type :colors an then press tab button. then you will see something like this :

this is the menu for choosing vim colorscheme. you can use arrow keys to navigate between it and press enter to applied that colorscheme. to add new colorscheme, you can search it in github. the coloscheme that i personally use is material colorscheme. to use this colorscheme, download the file in colors folder and place it to vim82 -> colors in your vim folder. after that, you can applied that colorscheme like usual.

Vim Built-in Autocompletion

do you think vim can't perform autocompletion? Vim have its built-in autocompletion named Omni Completion.

Omni completion provides smart autocompletion for programs. When invoked, the text before the cursor is inspected to guess what might follow. A popup menu offers word completion choices that may include struct and class members, system functions, and more. A similar feature in Microsoft Visual Studio is known as IntelliSense. - Vim Fandom

to enable this feature, open your _vimrc file, and write :

filetype plugin on
set omnifunc=syntaxcomplete#Complete

after this step, you can start typing your code. if you want the code suggestion to pop-up, press ctrl-x and ctrl-o.

Cool Statusbar

the cool yellow line in the bottom of my Vim at the screenshot above is called statusbar. there are some plugins that you can use to make your statusbar looks better. for example, vim airline and vim lightline. I myself use vim airline for my statusbar. to install this plugin, you can use some plugin-manager that you prefer, like vundle or vim-plug. but, if you use Vim 8, you can use vim native package manager. to install vim airline using vim native package manager, do this step :

go to vim airline's repository
download the entire repository in zip file format.
extract this zip file
go to you vim folder, and open vimfiles folder, and open start folder (if you don't see this folder, then create it).
place the extracted zip file to this start folder.
done. you already have install vim airline.

after that step, your vim statusbar better. you can also add this code to your _vimrc file (optional). i don't know what exactly this code does, but it looks like this code make your statusbar display the file extension and current time.

let g:airline_section_b= '%{strftime("%c")}'
let g:airline_section_y= 'BN: %{bufnr("%")}'
let g:airline#extensions#tabline#enabled = 1

read more about vim native plugin here .

File Explorer

Actually, vim has file explorer by default. but, for some reason, i prefer to use NERDTree, a plugin for file explorer.

preservim / nerdtree

A tree explorer plugin for vim.

The NERDTree

Introduction

The NERDTree is a file system explorer for the Vim editor. Using this plugin, users can visually browse complex directory hierarchies, quickly open files for reading or editing, and perform basic file system operations.

Installation

Use your favorite plugin manager to install this plugin. tpope/vim-pathogen, VundleVim/Vundle.vim, junegunn/vim-plug, and Shougo/dein.vim are some of the more popular ones. A lengthy discussion of these and other managers can be found on vi.stackexchange.com. Basic instructions are provided below, but please be sure to read, understand, and follow all the safety rules that come with your ~~power tools~~ plugin manager.

If you have no favorite, or want to manage your plugins without 3rd-party dependencies, consider using Vim 8+ packages, as described in Greg Hurrell's excellent Youtube video: Vim screencast #75: Plugin managers.

Pathogen

Pathogen is more of a runtime path manager than a plugin manager. You must…

View on GitHub

Installation for this plugin is the same to the installation vim airline plugin. after installing this plugin, you can open file explorer using :NERDTree command in normal mode.

Better Syntax Highlinghting for Python

As i said before, vim have built-in syntax highlighting feature. but, it is not too good. if you want a better syntax highlighting for python, you can use this plugin :

vim-python / python-syntax

Python syntax highlighting for Vim

This is an enhanced version of the original Vim 6.1 Python syntax highlighting python.vim by Neil Schemenauer.

Features

Enhanced highlighting for
- Strings
- Special symbols inside strings
- Numeric constants
Added support for:
- Python 3
- Numbers with underscores
- String %-formatting and f-strings
- Magic comments: source code encoding and shebangs
- New exceptions and builtins
- Doctests
- @decorator syntax
- Class variables such as self, cls, and mcs
- Operators
Highlighting of the following errors:
- Invalid symbols in source file
- Invalid numeric constants
- Invalid %-formatting inside strings
- Invalid variable names
- Invalid operators
- Mixing spaces and tabs
- Trailing spaces (Enabled with g:python_highlight_space_errors)
Commands for easy switching between versions

Folding is done by the plugin SimpylFold.

How to install

Use one of the following plugin managers:

Configuration

Option variables

Set variable to 1 to enable or 0 to disable.

For example to enable all syntax highlighting…

View on GitHub

the installation of this plugin is the same to the installation vim airline plugin. after installing, you can use this plugin by add this code to your _vimrc file :

let g:python_highlight_all = 1

Terminal

you can open your terminal directly in Vim text editor. you don't need to install anything. to open terminal in vim, type :terminal or :term in normal mode.

Running Python Code

actually, you can run python code in vim using terminal and type python example.py. but, if you want to run python code by pressing keyboard, then follow this step. first, open you _vimrc file. then, write this code:

nnoremap <F10> :! python %<CR>

what this code does is mapping f10 key to run :! python %<CR> command. in general, the command :! python %<CR> will take the name of your file using symbol % and then run it like you run it manually in the terminal. after this step, you can run python code by pressing f10 on your keyboard. Do you know what to do if you want to run python code by pressing r key ? yes, just write nnoremap r :! python %<CR>.

So, that is some configuration to make vim looks like an IDE. i know that there are other IDE features that vim doesn't have, like debugger. but, you can give a try for vim. Oh, wait. can this plugin be called a debugger? I've never tried it.

puremourning / vimspector

vimspector - A multi-language debugging system for Vim

vimspector - A multi language graphical debugger for Vim

For a tutorial and usage overview, take a look at the Vimspector website.

For detailed explanation of the .vimspector.json format, see the reference guide.

View on GitHub

if you want to see my _vimrc configuration, you can visit my github repository here:

fikrinotes / Vim-Config

Configuration for my text editor - Vim

Vim-Config

Configuration for my text editor - Vim

View on GitHub

thanks for reading my blog so far. if you have some questions, fell free to ask in the comment section below.

How I Build Intergalactic War Game In Pure JavaScript

Fikri Mulyana Setiawan — Fri, 03 Sep 2021 07:32:12 +0000

Hi, Do you know that about 1 month ago (to be exact 20 days ago) I made a game? What? You haven't tried it yet? Try playing the game here.

Interesting, right? Actually, the code of this game is quite difficult for me to explain here. Therefore, I will not discuss the code, but only the algorithm.

The Algorithm

Coordinate System

For this game, I used the Cartesian coordinate system that we often learn in school. However, to save variable usage in javascript, I use array (vector) format to store coordinate data. I stored the coordinate data for spaceship in an array called poss and coordinate data for UFO in an array called posu.

Controller

First of all, I created 4 buttons for 4 different movements, left, right, up, and down. This button is useful for moving the spaceship to the left, right, up, and down. To set the position of the spaceship, we can use CSS, with the code:

.spaceship {
  position: absolute;
  left: __px;
  top: __px;
}

With javascript, we can change the value of top and left. I used spaceship.style.left to set the x-coordinate, and spaceship.style.top to set the y-coordinate, and set the speed with setInterval. Okay, I think this is pretty easy. We're done with the spaceship controller.

Shoot

In this game, i use the image from flaticon.com as the bullet.

If we shoot a bullet, logically we know that the initial coordinates of the bullet are the same as the initial coordinates of our body (spaceship). Therefore, when the shot button is pressed, the first command that must be executed by this game is to find out, what are the coordinates of the spaceship. After the spaceship coordinates are known, then set these coordinates as the initial coordinates of the bullet, then fire it with bullet.style.top.

Collision

If the spaceship collides with UFO, then the player's life (spaceship) will be reduced by 25%. Well, as we learned in school (mathematical geometry), 2 objects collide if the coordinates of each object are the same. So if the first object and the second object collide, then it should be x1=x2 and y1=y2 (x1=position x object 1). This is easy. However, there is a slight problem here. This rule applies if the colliding object is a point object (you've studied physics, haven't you?), while our object (spaceship and UFO) is a rigid body. Therefore, we need a little modification. In CSS, we know the concept of CSS box model. Simply put, this concept explains that each element in html is "wrapped" in a box. With this concept, we can modify the previous rule.

xs=x_position of spaceship and xu=y_position of UFO

By paying attention to the graph above, we can modify the condition of the spaceship when it collides with a UFO. A spaceship collides with a UFO if xu<xs+spaceship_width and xu>xs and yu<ys and yu>ys-spaceship_height. We have also managed to solve the issue of the spaceship collides with UFO. This concept also applies to the event of a bullet hitting a UFO.

UFO Movement

If you pay attention to the game, you will know that UFO actually move randomly. To make the UFO move, I use setInterval again, and to make the movement random, I use Math.random.it's easy, right?

How It Works ?

The gameplay is like this :

at first the UFO moves randomly while the spaceship (player) doesn't move. The spaceship will only move if the controller button (right, left, up, down) is pressed. The UFO moves from left to right, and if the UFO has reached the edge of the screen, the UFO will return to the left side. We call this 1 cycle. In each cycle, the UFO will fire 1 bullet at random. If the bullet hits the player, the player's life will be reduced by 25%. Otherwise, the game will continue without reducing the player's life. Players can also fire at UFO. If the bullet hits the UFO, then the player will get a score +1. Every time you reach score which is the multiple of 5, the bullet speed of the UFO will increase and also increasing your chances of losing. Simple, right?

Github Repository

If you want to see the code of this game, please jump in to the github repository below and go to javascriptproject-menu/IntergalacticWar.

fikrinotes / fikrinotes.github.io

Personal Website Of Fikri Mulyana Setiawan

Or, you can also go to this link. Thank you for read this article.

Update

I just updated the game Intergalactic War. now, you can play the game smoothly via smartphone or PC, and I think there are no more bugs.

Animate Your Web Content Using Animate On Scroll Library

Fikri Mulyana Setiawan — Sun, 22 Aug 2021 05:36:21 +0000

About 3 months ago, while developing my website, I thought about making my website even cooler. This is what I want to do : I want items on my website to appear only when I scroll to them. In other words, before scrolling, the item will not exist. Hard enough to imagine? Roughly the result like this:

This animation can be created with the Animate On Scroll (AOS) library by michalsnik at michalsnik.github.io.

Get Started

There are 2 ways to add this library to your website. The first way is to install it, and the second way is through the CDN service. I myself use a CDN service. Here is some code you should add.

CSS

add this code inside the head tag in your HTML code.

<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">

Javascript

add this code at the very bottom of your body tag.

<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

Initialize AOS

Finally, add the following code to your javascript file.

AOS.init();

If you have done all of the things above, then you are ready to use this library.

Animation

In order to have an animation, add the data-aos attribute to the html tag you want. With this data-aos, your tags now have animations. There are different values in the data-aos attribute, different values mean different animations. Here are some of them :

data-aos="fade-up" , for moving-up
data-aos="fade-down" ,for moving-down
data-aos="fade-right", for move to the right
data-aos="fade-left", for move to the left
data-aos="fade-flip-left", for flip to the left
data-aos="fade-flip-right", for flip to the right
data-aos="zoom-in", for zoom in
data-aos="zoom-out", for zoom-out

Actually, there are many more data-aos values available. For more complete data-aos, you can visit the official Animate On Scroll website at michelsnik.github.io.

Live Demo

I will show you how to use animate on scroll library.

1. Set Up Standard HTML Tag

this file contains the basic html tags to create a box with the words box 1 , box 2 and so on.

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div class='container'>
<div class='box'>box 1</div>
<div class='box'>box 2</div>
<div class='box'>box 3</div>
<div class='box'>box 4</div>
</div>
</body>
</html>

2. Prepare CSS files for basic styles

This file contains the basic styles for box such as background color, padding, margins, and so on.

.box{
  text-align:center;
  font-size:2em;
  padding:90px;
  border-radius:8px;
  border:5px #33ff33;
  margin: 30px;
  background:#66ff66;
  width:auto;
  height:30px;
}
.container{
  background:#3385ff;
  padding:auto;
  padding-top:20px;
  padding-bottom:20px;
}

3. Add CDN code to import AOS library

CSS

Add this code inside the head tag

<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">

Javascript

add this code at the very bottom of your body tag.

<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

4. Initialize AOS

add the following code to the javascript file.

AOS.init();

after all of the things above is done, the result will be like this:

Keep in mind that you can change the style of the above CSS as you wish. In the example above I only use 4 types of data-aos. You can see more complete documentation on this website.

To see the implementation of this AOS data on the website, you can visit my website which also uses the AOS library here.