DEV Community: Ryugen 京

Create Step-by-Step Guides on Your Website

Ryugen 京 — Fri, 14 Feb 2025 07:42:11 +0000

Best Libraries to Create Step-by-Step Guides on Your Website

Introduction

Interactive step-by-step guides are powerful tools to onboard users, explain complex features, and improve the overall user experience on your website. Several libraries can help you implement these guides without much hassle. In this article, we’ll introduce the best libraries you can use, how they differ, and how to get started with each one.

Why Use a Step-by-Step Guide?

A step-by-step guide offers several benefits:

Improves user onboarding: Helps users understand how to use your platform.
Enhances user engagement: An interactive guide can capture attention more effectively than static documentation.
Reduces support requests: Users are more likely to succeed with the help of a visual guide.

Best Libraries for Step-by-Step Guides

1. Intro.js – Simple and Lightweight

Intro.js is one of the most popular libraries for creating step-by-step guides. It highlights specific elements on the page and displays informative tooltips to guide users.

Features:
- Lightweight and fast.
- Customizable tooltips and styles.
- Supports multi-page guides.
- Works without external dependencies.

Installation

npm install intro.js

Usage Example

import introJs from 'intro.js';
import 'intro.js/introjs.css';

const intro = introJs();
intro.setOptions({
  steps: [
    { intro: "Welcome to our website!" },
    { element: '#step1', intro: "This is the first step." },
    { element: '#step2', intro: "This is the second step." }
  ]
});
intro.start();

Pros

Easy to integrate.
Minimal configuration required.
No external dependencies.

Cons

Limited styling options compared to newer libraries.

2. Shepherd.js – Modern and Highly Customizable

Shepherd.js is a modern step-by-step guide library built on top of Popper.js. It offers better positioning accuracy and supports more complex use cases than Intro.js.

Features:
- Highly customizable design.
- Supports modal overlays for a better user focus.
- Scrolls the page to the highlighted element.
- Multi-step and multi-page support.

Installation

npm install shepherd.js

Usage Example

import Shepherd from 'shepherd.js';
import 'shepherd.js/dist/css/shepherd.css';

const tour = new Shepherd.Tour({
  useModalOverlay: true,
  defaultStepOptions: {
    cancelIcon: { enabled: true },
    scrollTo: { behavior: 'smooth', block: 'center' }
  }
});

tour.addStep({
  text: 'Welcome to the first step!',
  attachTo: { element: '#step1', on: 'bottom' },
  buttons: [
    { text: 'Next', action: tour.next }
  ]
});

tour.start();

Pros

Modern and highly customizable.
Supports complex use cases.
Smooth transitions and animations.

Cons

Slightly heavier than Intro.js.

3. Guided.js – Minimalist and Lightweight

If you prefer a simple and lightweight solution, Guided.js might be the right choice. This library focuses on simplicity and works well for small-scale projects.

Features:
- Minimal configuration.
- No external dependencies.

How to Choose the Right Library

Choosing the right library depends on your project’s requirements:

For simplicity and speed: Use Intro.js.
For a modern look and complex guides: Go with Shepherd.js.
For minimalism: Try Guided.js.

Conclusion

Creating a step-by-step guide on your website can significantly improve user experience and engagement. Whether you want a quick, lightweight solution like Intro.js or a highly customizable option like Shepherd.js, there’s a library that fits your needs. Try one of these libraries in your next project and watch your users become more confident and engaged with your platform.

Bro Install Neovim On Windows And Setup Neovim Without Neovim Package Manager 🙀

Ryugen 京 — Sun, 08 Sep 2024 08:41:29 +0000

Alright everybody, just go ahead and install Neovim using Windows PowerShell Run As Adminstrator , and install Chocolatey. 😺

Check if your Chocolatey is installed:
choco --v

📝 Bro, haven't installed Chocolatey yet? 🙀
just visit the Chocolatey documentation here to install chocolatey.org/install

Install gitbash 😸

INSTALL OH MY POSH

choco install oh-my-posh -y

INSTALL NEOVIM

choco install neovim -y

Bro, you also need MinGW for sytanx highlighting install MinGW

NEOVIM CONFIG

Now bro, just check the location of the neovim path that loads the configuration.

🐱 open your neovim using command nvim
type this in neovim to check the configuration path :

:lua print(vim.fn.stdpath('config'))

that command will display your configuration path 📝
for example output in my nvim :
C:\users\ryugenxd\appdata\local\nvim

☝🐱 By default,the nvim folder does not exists if you never installed neovim.

Let's check if the nvim folder already axists using terminal

cd C:\users\<your username>\appdata\local
ls

if bro doesn't have the nvim folder yet 😼. bro needs to create it using the command mkdir nvim.

INITIALIZATION CONFIG

Bro needs to create a file named init.lua inside the nvim folder and create a new folder named plugins as well ☝🐱.

Open Folder plugins with windows terminal and paste this command:

git clone https://github.com/MunifTanjim/nui.nvim
git clone https://github.com/nvim-lua/plenary.nvim
git clone https://github.com/nvim-neo-tree/neo-tree.nvim
git clone https://github.com/nvim-tree/nvim-web-devicons
git clone https://github.com/olimorris/onedarkpro.nvim
git clone https://github.com/nvim-treesitter/nvim-treesitter

INSTALL NERD FONT 😾

D2Coding 😹 extract and install all your font and gone to the windows terminal settings

open your json configuration 🙀.

"profiles": {
        "defaults": 
        {
            "backgroundImage": null,
            "backgroundImageOpacity": 0.70,
            "bellStyle": "none",
            "elevate": true,
            "font": 
            {
                "face": "D2CodingLigature Nerd Font",
                "weight": "bold"
            },
            "opacity": 33,
            "padding": "22",
            "useAcrylic": true
        },
}

Bro 😸,add this code to profiles configuration.

Alright ,for the final step, we need to configure the init.lua file. Paste this code inside it:

vim.opt.runtimepath:append("/users/ryugenxd/appdata/local/nvim/plugins/plenary.nvim")
vim.opt.runtimepath:append("/users/ryugenxd/appdata/local/nvim/plugins/nui.nvim")
vim.opt.runtimepath:append("/users/ryugenxd/appdata/local/nvim/plugins/nvim-web-devicons")
vim.opt.runtimepath:append("/users/ryugenxd/appdata/local/nvim/plugins/neo-tree.nvim")
vim.opt.runtimepath:append("/users/ryugenxd/appdata/local/nvim/plugins/nvim-treesitter")
vim.opt.runtimepath:append("/users/ryugenxd/appdata/local/nvim/plugins/onedarkpro.nvim")

require("neo-tree").setup({
  filesystem = {
    follow_current_file = {
      enabled = true
    },
    use_libuv_file_watcher = true,
  },
  window = {
    position = "left",
    width = 30
  },
});

require("nvim-treesitter.configs").setup({
  ensure_installed = {"javascript","html","css","typescript","json"},
  highlight = {
    enable = true,
    additional_vim_regex_highlighting = false,
  },
})


local ts_install = require("nvim-treesitter.install")
ts_install.update({with_sync = true })

require("onedarkpro").setup({
  options = {
    transparency = true,
  }
});

vim.cmd("colorscheme onedark_dark")

vim.api.nvim_set_keymap('n','<leader>e',':Neotree toggle<CR>',{noremap = true,silent = true })
vim.api.nvim_set_keymap('n','<Tab>',':Neotree reveal<CR>',{ noremap = true,silent = true})
vim.api.nvim_set_keymap('n','<S-Tab>',':Neotree close<CR>',{ noremap = true, silent = true})
vim.g.mapleader = " "

-- set clipboard options 
vim.opt.clipboard = "unnamedplus"

-- set tab size to 2 space 
vim.o.tabstop = 2
vim.o.expandtab = true
vim.o.softtabstop = 2
vim.o.shiftwidth = 2

-- set default teminal to powershell
vim.o.shell = "powershell.exe"
vim.o.shellxquote = ""
vim.o.shellcmdflag = "-NoLogo -NoProfile -ExecutionPolicy RemoteSigned -Command "
vim.o.shellquote = ""
vim.o.shellpipe = "| Out-File -Encoding UTF8 %s"
vim.o.shellredir = "| Out-File -Encoding UTF8 %s"

-- set relative line number
vim.wo.relativenumber = true

-- line break 
vim.opt.breakindent = true
vim.opt.formatoptions:remove "t"
vim.opt.linebreak = true

-- incremental search 
vim.opt.incsearch = true

-- terminal color 
vim.opt.termguicolors = true

-- limit views 18 lines scrolls 
vim.opt.scrolloff = 18

-- Disable text wrapping
vim.opt.wrap = false

vim.opt.signcolumn = "yes"
vim.opt.isfname:append "@-@"
vim.opt.updatetime = 50


-- Highlight settings for line numbers
vim.cmd[[highlight LineNr guifg=white]]  

-- Color for absolute line numbers
vim.cmd[[highlight CursorLineNr guifg=white]]  

-- Color for the line number under the cursor
vim.cmd[[highlight LineNr guifg=white]]
vim.cmd[[highlight EndOfBuffer guibg=NONE ctermbg=NONE]]

📝 see in that code ,change my username to your username bro 🙀🚔🚨

And finally bro install neovim on windows and prepare neovim without neovim package manager 🙀 oh my god the bro is very amazing.

Follow me on LinkedIn bro ryugenxd
Follow me on Github bro ryugenxd