Helix: A Post-modern Modal Text Editor Written in Rust

Helix

A kakoune / neovim inspired editor, written in Rust.

The editing model is very heavily based on kakoune; during development I found myself agreeing with most of kakoune's design decisions.

Features

• Vim-like modal editing
• Multiple selections
• Built-in language server support
• Smart, incremental syntax highlighting and code editing via tree-sitter

It's a terminal-based editor first, but I'd like to explore a custom renderer (similar to emacs) in wgpu or skulpin.

Note: Only certain languages have indentation definitions at the moment. Check runtime/queries/<lang>/ for indents.toml.

Installation

We provide packaging for various distributions, but here's a quick method to build from source.

git clone https://github.com/helix-editor/helix
cd helix
cargo install --path helix-term
hx --grammar fetch
hx --grammar build

This will install the hx binary to $HOME/.cargo/bin and build tree-sitter grammars.

Helix also needs its runtime files so make sure to copy/symlink the runtime/ directory into the config directory (for example ~/.config/helix/runtime on Linux/macOS, or %AppData%/helix/runtime on Windows). This location can be overridden via the HELIX_RUNTIME environment variable.

Packages already solve this for you by wrapping the hx binary with a wrapper that sets the variable to the install dir.

NOTE: running via cargo also doesn't require setting explicit HELIX_RUNTIME path, it will automatically detect the runtime directory in the project root.

MacOS

Helix can be installed on MacOS through homebrew via:

brew tap helix-editor/helix
brew install helix

Contributing

Contributing guidelines can be found here.

Getting help

Your question might already be answered on the FAQ.

Discuss the project on the community Matrix Space (make sure to join #helix-editor:matrix.org if you're on a client that doesn't support Matrix Spaces yet).

Download Details:
Author: helix-editor
Source Code: https://github.com/helix-editor/helix
License: MPL-2.0 License

#rust 

What is GEEK

Buddha Community

Helix: A Post-modern Modal Text Editor

Helix 

A Kakoune / Neovim inspired editor, written in Rust.

The editing model is very heavily based on Kakoune; during development I found myself agreeing with most of Kakoune's design decisions.

Features

• Vim-like modal editing
• Multiple selections
• Built-in language server support
• Smart, incremental syntax highlighting and code editing via tree-sitter

It's a terminal-based editor first, but I'd like to explore a custom renderer (similar to Emacs) in wgpu or skulpin.

Note: Only certain languages have indentation definitions at the moment. Check runtime/queries/<lang>/ for indents.scm.

Installation

Packages are available for various distributions (see Installation docs).

If you would like to build from source:

git clone https://github.com/helix-editor/helix
cd helix
cargo install --locked --path helix-term

This will install the hx binary to $HOME/.cargo/bin and build tree-sitter grammars in ./runtime/grammars.

Helix needs its runtime files so make sure to copy/symlink the runtime/ directory into the config directory (for example ~/.config/helix/runtime on Linux/macOS, or %AppData%/helix/runtime on Windows).

OS	Command
Windows (Cmd)	xcopy /e /i runtime %AppData%\helix\runtime
Windows (PowerShell)	xcopy /e /i runtime $Env:AppData\helix\runtime
Linux / macOS	ln -s $PWD/runtime ~/.config/helix/runtime

Starting with Windows Vista you can also create symbolic links on Windows. Note that this requires elevated privileges - i.e. PowerShell or Cmd must be run as administrator.

PowerShell:

New-Item -ItemType SymbolicLink -Target "runtime" -Path "$Env:AppData\helix\runtime"

Cmd:

cd %appdata%\helix
mklink /D runtime "<helix-repo>\runtime"

The runtime location can be overridden via the HELIX_RUNTIME environment variable.

NOTE: if HELIX_RUNTIME is set prior to calling cargo install --locked --path helix-term, tree-sitter grammars will be built in $HELIX_RUNTIME/grammars.

If you plan on keeping the repo locally, an alternative to copying/symlinking runtime files is to set HELIX_RUNTIME=/path/to/helix/runtime (HELIX_RUNTIME=$PWD/runtime if you're in the helix repo directory).

Packages already solve this for you by wrapping the hx binary with a wrapper that sets the variable to the install dir.

NOTE: running via cargo also doesn't require setting explicit HELIX_RUNTIME path, it will automatically detect the runtime directory in the project root.

If you want to customize your languages.toml config, tree-sitter grammars may be manually fetched and built with hx --grammar fetch and hx --grammar build.

In order to use LSP features like auto-complete, you will need to install the appropriate Language Server for a language.

Adding Helix to your desktop environment

If installing from source, to use Helix in desktop environments that supports XDG desktop menu, including Gnome and KDE, copy the provided .desktop file to the correct folder:

cp contrib/Helix.desktop ~/.local/share/applications
cp contrib/helix.png ~/.local/share/icons

To use another terminal than the default, you will need to modify the .desktop file. For example, to use kitty:

sed -i "s|Exec=hx %F|Exec=kitty hx %F|g" ~/.local/share/applications/Helix.desktop
sed -i "s|Terminal=true|Terminal=false|g" ~/.local/share/applications/Helix.desktop

macOS

Helix can be installed on macOS through homebrew:

brew install helix

Contributing

Contributing guidelines can be found here.

Getting help

Your question might already be answered on the FAQ.

Discuss the project on the community Matrix Space (make sure to join #helix-editor:matrix.org if you're on a client that doesn't support Matrix Spaces yet).

Credits

Thanks to @JakeHL for designing the logo!

For more information, see the website or documentation.

All shortcuts/keymaps can be found in the documentation on the website.

Troubleshooting

Download Details:

Author: Helix-editor
Source Code: https://github.com/helix-editor/helix 
License: MPL-2.0 license

#rust #vim #editor 

Helix: A Post-modern Modal Text Editor Written in Rust

Helix

A kakoune / neovim inspired editor, written in Rust.

The editing model is very heavily based on kakoune; during development I found myself agreeing with most of kakoune's design decisions.

Features

• Vim-like modal editing
• Multiple selections
• Built-in language server support
• Smart, incremental syntax highlighting and code editing via tree-sitter

It's a terminal-based editor first, but I'd like to explore a custom renderer (similar to emacs) in wgpu or skulpin.

Note: Only certain languages have indentation definitions at the moment. Check runtime/queries/<lang>/ for indents.toml.

Installation

We provide packaging for various distributions, but here's a quick method to build from source.

git clone https://github.com/helix-editor/helix
cd helix
cargo install --path helix-term
hx --grammar fetch
hx --grammar build

This will install the hx binary to $HOME/.cargo/bin and build tree-sitter grammars.

Helix also needs its runtime files so make sure to copy/symlink the runtime/ directory into the config directory (for example ~/.config/helix/runtime on Linux/macOS, or %AppData%/helix/runtime on Windows). This location can be overridden via the HELIX_RUNTIME environment variable.

Packages already solve this for you by wrapping the hx binary with a wrapper that sets the variable to the install dir.

NOTE: running via cargo also doesn't require setting explicit HELIX_RUNTIME path, it will automatically detect the runtime directory in the project root.

MacOS

Helix can be installed on MacOS through homebrew via:

brew tap helix-editor/helix
brew install helix

Contributing

Contributing guidelines can be found here.

Getting help

Your question might already be answered on the FAQ.

Discuss the project on the community Matrix Space (make sure to join #helix-editor:matrix.org if you're on a client that doesn't support Matrix Spaces yet).

Download Details:
Author: helix-editor
Source Code: https://github.com/helix-editor/helix
License: MPL-2.0 License

#rust 

Navigating Between DOM Nodes in JavaScript

In the previous chapters you've learnt how to select individual elements on a web page. But there are many occasions where you need to access a child, parent or ancestor element. See the JavaScript DOM nodes chapter to understand the logical relationships between the nodes in a DOM tree.

DOM node provides several properties and methods that allow you to navigate or traverse through the tree structure of the DOM and make changes very easily. In the following section we will learn how to navigate up, down, and sideways in the DOM tree using JavaScript.

Accessing the Child Nodes

You can use the firstChild and lastChild properties of the DOM node to access the first and last direct child node of a node, respectively. If the node doesn't have any child element, it returns null.

Example

<div id="main">
    <h1 id="title">My Heading</h1>
    <p id="hint"><span>This is some text.</span></p>
</div>

<script>
var main = document.getElementById("main");
console.log(main.firstChild.nodeName); // Prints: #text

var hint = document.getElementById("hint");
console.log(hint.firstChild.nodeName); // Prints: SPAN
</script>

Note: The nodeName is a read-only property that returns the name of the current node as a string. For example, it returns the tag name for element node, #text for text node, #comment for comment node, #document for document node, and so on.

If you notice the above example, the nodeName of the first-child node of the main DIV element returns #text instead of H1. Because, whitespace such as spaces, tabs, newlines, etc. are valid characters and they form #text nodes and become a part of the DOM tree. Therefore, since the <div> tag contains a newline before the <h1> tag, so it will create a #text node.

To avoid the issue with firstChild and lastChild returning #text or #comment nodes, you could alternatively use the firstElementChild and lastElementChild properties to return only the first and last element node, respectively. But, it will not work in IE 9 and earlier.

Example

<div id="main">
    <h1 id="title">My Heading</h1>
    <p id="hint"><span>This is some text.</span></p>
</div>

<script>
var main = document.getElementById("main");
alert(main.firstElementChild.nodeName); // Outputs: H1
main.firstElementChild.style.color = "red";

var hint = document.getElementById("hint");
alert(hint.firstElementChild.nodeName); // Outputs: SPAN
hint.firstElementChild.style.color = "blue";
</script>

Similarly, you can use the childNodes property to access all child nodes of a given element, where the first child node is assigned index 0. Here's an example:

Example

<div id="main">
    <h1 id="title">My Heading</h1>
    <p id="hint"><span>This is some text.</span></p>
</div>

<script>
var main = document.getElementById("main");

// First check that the element has child nodes 
if(main.hasChildNodes()) {
    var nodes = main.childNodes;
    
    // Loop through node list and display node name
    for(var i = 0; i < nodes.length; i++) {
        alert(nodes[i].nodeName);
    }
}
</script>

The childNodes returns all child nodes, including non-element nodes like text and comment nodes. To get a collection of only elements, use children property instead.

Example

<div id="main">
    <h1 id="title">My Heading</h1>
    <p id="hint"><span>This is some text.</span></p>
</div>

<script>
var main = document.getElementById("main");

// First check that the element has child nodes 
if(main.hasChildNodes()) {
    var nodes = main.children;
    
    // Loop through node list and display node name
    for(var i = 0; i < nodes.length; i++) {
        alert(nodes[i].nodeName);
    }
}
</script>

#javascript 

A Post-modern Modal Text Editor Written in Rust

Helix

A Kakoune / Neovim inspired editor, written in Rust.

The editing model is very heavily based on Kakoune; during development I found myself agreeing with most of Kakoune's design decisions.

Troubleshooting

Features

• Vim-like modal editing
• Multiple selections
• Built-in language server support
• Smart, incremental syntax highlighting and code editing via tree-sitter

It's a terminal-based editor first, but I'd like to explore a custom renderer (similar to Emacs) in wgpu or skulpin.

Note: Only certain languages have indentation definitions at the moment. Check runtime/queries/<lang>/ for indents.scm.

Installation

Packages are available for various distributions (see Installation docs).

If you would like to build from source:

git clone https://github.com/helix-editor/helix
cd helix
cargo install --path helix-term

This will install the hx binary to $HOME/.cargo/bin and build tree-sitter grammars. If you want to customize your languages.toml config, tree-sitter grammars may be manually fetched and built with hx --grammar fetch and hx --grammar build.

Helix also needs its runtime files so make sure to copy/symlink the runtime/ directory into the config directory (for example ~/.config/helix/runtime on Linux/macOS, or %AppData%/helix/runtime on Windows).

OS	Command
Windows (cmd.exe)	xcopy /e /i runtime %AppData%\helix\runtime
Windows (PowerShell)	xcopy /e /i runtime $Env:AppData\helix\runtime
Linux/macOS	ln -s $PWD/runtime ~/.config/helix/runtime

This location can be overridden via the HELIX_RUNTIME environment variable.

Packages already solve this for you by wrapping the hx binary with a wrapper that sets the variable to the install dir.

NOTE: running via cargo also doesn't require setting explicit HELIX_RUNTIME path, it will automatically detect the runtime directory in the project root.

In order to use LSP features like auto-complete, you will need to install the appropriate Language Server for a language.

MacOS

Helix can be installed on MacOS through homebrew:

brew install helix

Contributing

Contributing guidelines can be found here.

Getting help

Your question might already be answered on the FAQ.

Discuss the project on the community Matrix Space (make sure to join #helix-editor:matrix.org if you're on a client that doesn't support Matrix Spaces yet).

Download details:

Author: helix-editor
Source code: https://github.com/helix-editor/helix 
License: MPL-2.0 license

#rust #rustlang

Make Pop-Up Modal Window In Vanilla JavaScript [2022]

Make Pop-Up Modal Window In Vanilla JavaScript

Learn how to create a simple responsive pop-up modal window using Vanilla JavaScript along with HTML and CSS with a bit of Flexbox.

• Create A Button That Opens Pop Up Modal Window
• Create Pop Up Modal Overlay
• Center Pop Up Modal Window To The Modal Overlay
• Open Up Pop Up Modal Window On Button Click
• Close/Hide Pop Up Modal Window On Button Click
• Hide Pop Up Modal Window When Modal Overlay Is Clicked

Create A Button That Opens Pop Up Modal Window

Declare a <button> HTML element with an id open-modal.

<button id="open-modal">Open Modal Window</button>

The goal is when a user presses this button, the pop-up modal window will open.

Style the button using CSS Flexbox and centre it on the screen.

* {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    box-sizing: border-box;
}

body {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

button {
    padding: 10px;
    font-size: 1.1em;
    background: #32bacf;
    color: white;
    border: none;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

button:hover {
    background: rgba(0, 0, 0, 0.7);
}

Create Pop-Up Modal Overlay

Normally, pop-up modal windows have overlays with a transparent darker background that covers the entire browser screen.

Define a div with an id model-overlay which will cover the entire screen.

<div id="modal-overlay">
<div>

Then, make it to full screen using height:100vh CSS property.

Bring it in front of the button by using position:absolute with a transparent background colour.

#modal-overlay {
    width: 100%;
    height: 100vh;
    position: absolute;
    background: rgba(0, 0, 0, 0.7);
}

I just added the border to see the boundaries of the modal-overlay element.

Center Pop-Up Modal Window To The Modal Overlay

Create a div with an id modal inside the modal-overlay element, which will be an actually pop-up modal window that user interacts with.

<div id="modal-overlay">
  <div id="modal">
  </div>
<div>

Add CSS style to make it visible on the screen.

Adding width:100% and max-width:650px will make sure the width of the pop-up modal window won’t exceed when the browser width is more than 650px.

If the browser width is less than 650px, the pop-up modal window will stretch the width to fill the screen which is normally for mobile viewports.

#modal-overlay #modal {
    max-width: 650px;
    width: 100%;
    background: white;
    height: 400px;
}

Centre the pop-up modal window to the screen using Flexbox.

To do that, just add the three lines of Flexbox code to the modal-overlay which are

• display:flex → Convert an HTML element to Flexbox
• align-items:center → centre the pop-up modal window vertically to the viewport
• justify-content:center → centre the pop-up modal window horizontally to the viewport

#modal-overlay {
   ...
  
   display: flex;
   align-items: center;
   justify-content: center;
}

Open Up Pop-Up Modal Window On Button Click

Now we have the basic pop-up modal window designed using CSS.

Make it visible when a user presses the open modal button.

To do that,

First, hide the modal overlay by default by changing its display property from flex to none.

#modal-overlay {
   ...
  
   display: none; // Changed from flex to none
   align-items: center;
   justify-content: center;
}

Create a DOM reference to the open-modal button as well as the modal-overlay elements.

const openModalButton = document.getElementById("open-modal");
const modalWindowOverlay = document.getElementById("modal-overlay");

Attach a click event to the openModalButton with the callback arrow function showModalWindow.

const showModalWindow = () => {
    modalWindowOverlay.style.display = 'flex';
}

openModalButton.addEventListener("click", showModalWindow);

Set the display property of the modalWindowOverlay to flex inside showModalWindow() function which will open up the modal window.

As you can see, there is no way we can close/hide the pop-up modalwindow after its became visible on the screen.

Let’s fix it!

Close/Hide Pop-Up Modal Window On Button Click

Typically, there will be a close button on the top or bottom right side of the pop-up modal window.

Let’s add a close button on the bottom left side of the modal window.

Define header, content and footer HTML elements inside the pop-up modal window.

<div id="modal">

    <div class="modal-header">
        <h2>Modal Pop Up Window</h2>
    </div>

    <div class="modal-content">
        <p>Modal Content</p>
    </div>
    
    <div class="modal-footer">
        <button id="close-modal">Close</button>
        <button>Save</button>
    </div>

</div>

Generally, you’ll have two buttons on the footer of the pop-up modal window, which may be save and close.

Let’s push the buttons to the bottom using Flexbox.

Turn the display property of the pop-up modal window to flex and set the flex direction to column.

Continue Reading…

#JavaScript #programming #webdev #softauthor