teleren/devto huggingface dataset:
Change Fugitive's number of Git context lines in Neovim
Tags: neovim, vim, fugitive, git
Published: 2024-03-24 07:23:29

---
title: Change Fugitive's number of Git context lines in Neovim
published: true
description: Configure Neovim to display any number of Git context lines when performing diffs in Fugitive.
tags: neovim, vim, fugitive, git
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2024-02-18 02:50 +0000
---

I recently started using Neovim after trying [kickstart.nvim](https://github.com/nvim-lua/kickstart.nvim). I've spent years managing Git through VS Code's built-in Git client, and I wanted to find something similar for Neovim. I landed on [Fugitive](https://github.com/tpope/vim-fugitive) by Tim Pope. Fugitive had a tight integration with the editor, and it didn't require me to constantly jump to another window in `tmux`.

**I had one big problem with fugitive: it only showed me 6 lines of context before and after each change.** In VS Code, I had the built-in Git client configured to show me the entire file so I could make sure there wasn't old code that needed to be cleaned up as a result of the new changes.

It turns out that the configuration for the number of diff context lines is controlled by the editor itself opposed to Fugitive.

## Changing Neovim's number of diff context lines

If you run Fugitive's `:Gvdiffsplit` command on a file that has uncommitted changes in a Git repo, Fugitive will show six context lines above and below each change. You can modify the number of context lines in realtime by running the following command:

```vimscript
:set diffopt+=context:10
```

Without even reloading the diff, you'll see the number of context lines change from **6** to **10**. But this will be restored to the default configuration once Neovim is closed.

So how can we change the default settings for future sessions in Neovim? You'll need to add the following line somewhere in your Lua config, either in your `init.lua` config file or a file that is reference by it.

```lua
-- Add the following to init.lua
vim.opt.diffopt:append 'context:1000'
```

Change `1000` to whatever number of context lines you'd like, then restart Neovim. The next time you run any of Fugitive's diff commands, it will display up to 1000 lines of context before and after each change.

**If you're using an `init.vim` file instead of `init.lua`** (or you're using Vim and are using `.vimrc`), you can add the following to your Vimscript file to accomplish the same thing:

```vimscript
" If you aren't using Lua, add the following to init.vim
" or .vimrc
set diffopt+=context:1000
```

A big thanks to [slack1994 on Reddit](https://www.reddit.com/r/neovim/comments/o8dlwg/how_to_append_to_an_option_in_lua/#t1_h34lwql) for showing the syntax for how to change diff options in Lua. For more about diff options, run `:h diffopt` (or read more [here](https://neovim.io/doc/user/options.html#'diffopt')).
Web Speech API
Tags: frontendchallenge, devchallenge, javascript, webdev
Published: 2024-03-24 07:08:59

_This is a submission for DEV Challenge v24.03.20, One Byte Explainer: Browser API or Feature._

## Explainer
Web Speech API

Converts speech to text & vice versa in browser. Enables voice commands, transcription & text-to-speech synthesis. Improves accessibility & interaction.

## Additional Context
The Web Speech API is a game-changer for accessibility, allowing users with disabilities to interact with websites using voice commands. It also opens up possibilities for innovative applications in fields such as virtual assistants, dictation software, and language learning tools. By leveraging this API, developers can create inclusive and user-friendly experiences that cater to a diverse audience.
Understanding the Impact of Emotional Intelligence on Student Success
Tags: tutorial, devops, productivity, atharvgyan
Published: 2024-03-24 06:44:36

Emotional intelligence (EI) plays a crucial role in shaping various aspects of student success, including academic achievement, social relationships, and overall well-being. Unlike cognitive intelligence, which focuses on academic aptitude and intellectual abilities, emotional intelligence encompasses the ability to recognize, understand, and manage one's own emotions, as well as the ability to perceive and influence the emotions of others. Let's delve into the multifaceted role of emotional intelligence in student success.... Read more {% embed https://www.atharvgyan.com/2024/03/understanding-impact-of-emotional.html %}

{% embed https://www.atharvgyan.com/2024/03/exploring-benefits-of-project-based.html %}
Introducing Stocks API: Your Gateway to Seamless Stock Data Retrieval
Tags: javascript, node, api, webdev
Published: 2024-03-24 06:38:35

Hey everyone,

Exciting news! I'm thrilled to introduce you to my latest project: Stocks API, your ultimate solution for effortlessly fetching stock data. Whether you're a seasoned developer, a finance enthusiast, or just someone who loves tinkering with data, Stocks API has something in store for you.

🚀 **What is Stocks API?**

Stocks API is a robust tool built on Node.js and Express.js, designed to simplify the process of retrieving stock information from a variety of sources for free and no limit. With just a few simple requests, you can access a treasure trove of stock data to power your financial applications, conduct in-depth research, or simply satisfy your curiosity about stock prices.

🌐 **Website:** [Stocks API - Unlock Stock Data Easily](www.stocks-api-qkyy.onrender.com/)

🔍 **Endpoints:**

1. **GET /search**: Quickly search for stocks based on keywords, ticker symbols, or company names.
2. **GET /details**: Dive deep into comprehensive details about specific stocks, including price, volume, market cap, and more.
3. **GET /chart**: Visualize stock performance over time with customizable chart data, empowering you to analyze trends and make informed decisions.
4. **GET /recommendation**: Access recommendations about similar stocks.

🔧 **Why Stocks API?**

- **Simplicity**: With intuitive endpoints and clear documentation, integrating Stocks API into your project is a breeze.
- **Reliability**: Powered by robust Node.js and Express.js frameworks, Stocks API ensures fast and dependable performance.
- **Versatility**: Whether you're building a financial app, conducting research, or just exploring the stock market, Stocks API offers the flexibility you need.
- **Accessibility**: Accessible from anywhere, Stocks API empowers developers and enthusiasts alike to harness the power of stock data.

📈 **Join the Community**

I'm incredibly excited about the potential of Stocks API, and I'd love for you to be a part of this journey. Whether you have questions, feedback, or just want to share your experiences, join the conversation on dev.to and let's build something amazing together!

Let's revolutionize the way we access and utilize stock data. Together, we can empower developers and enthusiasts to unlock new opportunities and insights in the world of finance.

🌐 **Github Link:** [Stocks API](https://github.com/prashasth-nair/Stocks-API)

Happy coding!
Weekly Challenge 261
Tags: perl, python, theweeklychallenge
Published: 2024-03-24 06:32:54

Each week Mohammad S. Anwar sends out [The Weekly Challenge](https://theweeklychallenge.org/), a chance for all of us to come up with solutions to two weekly tasks. My solutions are written in Python first, and then converted to Perl. It's a great way for us all to practice some coding.

[Challenge](https://theweeklychallenge.org/blog/perl-weekly-challenge-261/), [My solutions](https://github.com/manwar/perlweeklychallenge-club/tree/master/challenge-261/sgreen)

## Task 1: Element Digit Sum

### Task

You are given an array of integers, `@ints`.

Write a script to evaluate the absolute difference between element and digit sum of the given array.

### My solution

Given that Perl doesn't care (most of the time) between numbers and strings, this is one of those challenges that is easier to do in Perl.

```perl
my $element_sum = sum(@ints);
my $digit_sum   = sum( map { split // } @ints );
say abs( $element_sum - $digit_sum );
```

The sum function comes from List::Util. The first line gets the sum of the elements. The second line splits the integers by the digits and calculates the sum. The final line calculates and display the absolute difference.

My Python solution is as follows

```python
def element_digit_sum(ints: list) -> int:
    element_sum = sum(ints)
    digit_sum = sum(int(i) for s in map(str, ints) for i in s)
    return abs(element_sum - digit_sum)
```

It follows the same logic and the Perl code. The second line does the following

* `map(str, ints)` turns the list of integers into a generator of strings
* `for s in` iterates over the generator
* `for i in s` iterates over each character in the string
* `int(i)` turns that character into an integer
* `sum()` turns the list of integers into a sum of the values

### Examples

```bash
$ ./ch-1.py 1 2 3 45
36

$ ./ch-1.py 1 12 3
9

$ ./ch-1.py 1 2 3 4
0

$ ./ch-1.py 236 416 336 350
1296
```

## Task 2: Multiply by Two

### Task

You are given an array of integers, `@ints` and an integer $start..

Write a script to do the following:

1. Look for $start in the array `@ints`, if found multiply the number by 2
1. If not found stop the process otherwise repeat

In the end return the final value.

### My solution

This seems relatively straight forward. I keep multiplying the `start` by two until the value does not appear in the list. For performance, I could have converted the list into a set (hash in Perl), as checking in-ness (is that a word?) is faster that way. However, we are dealing with a small list, so it is not required.

```python
def multiple_by_two(ints: list, start: int) -> int:
    solution = start
    while solution in ints:
        solution *= 2

    return solution
```

### Examples

```bash
$ ./ch-2.py 5 3 6 1 12 3
24

$ ./ch-2.py 1 2 4 3 1
8

$ ./ch-2.py 5 6 7 2
2
```
Linux Structure
Published: 2024-03-24 06:15:50

Linux is a layered operating system. The innermost layer is the hardware that provides the services for the OS. The operating system, referred to in Linux as the kernel, interacts directly with the hardware and provides the services to the user programs. These user programs don’t need to know anything about the hardware. They just need to know how to interact with the kernel and it’s up to the kernel to provide the desired service. One of the big appeals of Linux to programmers has been that most well written user programs are independent of the underlying hardware, making them readily portable to new systems.

User programs interact with the kernel through a set of standard system calls. These system calls request services to be provided by the kernel. Such services would include accessing a file: open close, read, write, link, or execute a file; starting or updating accounting records; changing ownership of a file or directory; changing to a new directory; creating, suspending, or killing a process; enabling access to hardware devices; and setting limits on system resources.

Linux is a multi-user, multi-tasking operating system. You can have many users logged into a system simultaneously, each running many programs. It’s the kernel’s job to keep each process and user separate and to regulate access to system hardware, including cpu, memory, disk and other I/O devices.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mmxiq7yn6qilr9zjnpak.png)
Resend: sending email for beginners got even easier
Published: 2024-03-24 05:08:39

we have always been using Sendgrid for configuring and sending emails. But I found an even easier solution. Literally within some lines of code, you’ll be able to set up emails. In this discussion, I’ll showcase how it is better than Sendgrid and how can you easily set it up in your code.

**

## Why is it better?

**
1. Modern simpler functionality and easy to use.
2. Pricing is compromised (even though the SendGrid fee tire has a larger capacity)
3. Simpler analytics

## now let’s learn how to implement it in node js.

1.Go to [Resend ](https://resend.com/overview)Website and register. You’ll get a page like this

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1ttptwuj9wsrd0jfb0r0.png)
2. Now add a domain and add the configure value in your DNS record.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tsh4qu38aai15dlzbjfl.png)
now you’ll be able to use your domain name’s email as the sender email such as contact@domain.

3. Now add them to your node project
add dependency 

```
pnpm add resend

```
Then add your RESEND_KEY in your env file. During calling the function call it like the following. You’ll get the key from API Keys sub-section.

```
import { Resend } from "resend";
app.get("/send-email", async (req: Request, res: Response) => {
htmlScript="<strong>it works!</strong>";
  const resend = new Resend(process.env.RESEND_KEY);
  const { data, error } = await resend.emails.send({
   from: process.env.SEND_EMAIL,
   to: ['receiver@gmail.com'],
   subject: "Testing Resend email platform",
   html: htmlScript,
    });
  if (error) {
    return res.status(400).json({ error });
  }

  res.status(200).json({ data });
});
```
And would you believe it! This is done. Now each time your endpoint is called you’ll get logs like the following.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8vs26e5u6hqy3op93cqc.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a75qhothn1gepr0qbgfn.png)
I hope this is helpful to you. Happy implementing.
HIRE AN ADEPT HACKER FOR LOST CRYPTO ASSET RECOVERY.
Published: 2024-03-24 05:51:06

Adrian Lamo Hacker is here to save you if you've ever inadvertently lost your Bitcoins and found yourself on a digital treasure hunt. They help owners of lost Bitcoins find their way through the murky woods of deleted data and retrieve their priceless cryptocurrency riches. Think of them as the Gandalf of the digital world. Adrian Lamo Hacker is an organization that offers an injection of sunshine in situations that seem hopeless. It specializes in recovering lost or unaccessible Bitcoins. Advanced data recovery methods, an in-depth understanding of blockchain technology, and a dash of digital magic to restore items that were previously believed to be lost forever are all part of their services. It can be similar to losing your keys in a virtual world when you lose your Bitcoins. Frequently occurring reasons encompass misplaced passwords, hardware problems, phishing schemes, and the age-old human element. Adrian Lamo Hacker is prepared to tackle any digital disasters that may result in such losses because it is aware of them. Finding misplaced Bitcoins is similar to assembling an online jigsaw. Adrian Lamo Hacker is a methodical approach that includes figuring out what caused the loss in the first place, regaining the data using state-of-the-art technologies, and making sure your valuable Bitcoins return to your digital wallet unharmed. You might have fallen victim to a fraudulent cryptocurrency broker if you read this testimonial.  Do you feel like there is no hope left after losing your Bitcoins? Do not be alarmed; Adrian Lamo Hacker is guaranteed to work! They guarantee that, no matter how far down the digital rabbit hole they may have fallen, your misplaced Bitcoins will be found thanks to their knowledge, commitment, and a dash of technological magic. Stay informed and involved in the recovery process with regular consultations and updates, allowing you to track the progress of your lost Bitcoin recovery journey by contacting Adrian Lamo Hacker Via email: Adrianlamo@consultant.com - Telegram info: @ADRIANLAMOHACKERTECH
How to Create a Spoiler Tag in HTML
Tags: html, webdev, javascript, css
Published: 2024-03-24 05:46:42

---
title: "How to Create a Spoiler Tag in HTML"
published: true
description: "Using HTML to create a spoiler tag that shows/hides content."
tags: html, webdev, js, css
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
#published_at: 2024-03-24 05:40 +0000
canonical_url: "https://strikingloo.github.io/spoiler-tag-html"
---

Many forums or blogs make use of the spoiler tag: a little button or anchor that, if clicked, reveals otherwise invisible content.

I wanted to add this functionality to the site for Tables of Content, so I figured adding this guide here could be useful both for my own future reference and for anyone else looking for a concise explanation.

In this post we will code a spoiler tag: an anchor that shows or hides an HTML element when clicked.

What we will do to implement a spoiler tag is divided in three parts.

### CSS Example Class

```css
    .spoiler-content {
        display: none;
    }
```

With the `display` property set to `none`, we make content invisible (but still part of the page's HTML). Setting this to `block` would make it visible again.

### HTML Part

```html
<a href="#" onclick="toggleSpoiler(event, '1')">Table of Contents</a>

<div class="spoiler-content" id='1'>
    <!-- Your invisible content here.> </!-->
</div>
```

Pretty straightforward: the `div` has the spoiler-content class that makes it invisible by default, and a unique id. We pair that content with that anchor by sending the same id as the second argument to the toggleSpoiler function.

### JavaScript Part

```js
function toggleSpoiler(event, id) {
    event.preventDefault();
    var spoilerContent = document.getElementById(id);
    if (spoilerContent.style.display === 'none' || spoilerContent.style.display === '') {
        spoilerContent.style.display = 'block';
    } else {
        spoilerContent.style.display = 'none';
    }
}
```
For the script, we define toggleSpoiler such that, given an id, if the element with that id is visible it becomes hidden, or viceversa. I add the check for `display === ''` as for some reason in this toy example, js was detecting the value as '' the first time even if the class was correctly applied, so that you don't need to click twice to reveal the content.

And there you have it, a simple spoiler tag in plain HTML/JS. Note that you could make the anchor a button or any other thing instead, and make the div contain any arbitrary HTML elements.
JSON Server and its Uses
Tags: json, server, javascript
Published: 2024-03-24 04:57:08

JSON Server or Javascript Object Notation is a lightweight and simple tool that allows you to quickly set up a RESTful API server using a JSON file as a data source. It is often used in development and testing environments to mock API responses or prototype frontend applications without the need for a full-fledged backend server.

Here are some of the key uses and benefits of JSON Server:

- Mocking Backend APIs: JSON Server enables developers to create a mock backend server by defining endpoints and their corresponding data in a JSON file. This is particularly useful during frontend development when the actual backend API is not yet available or when you want to isolate the frontend from the backend for testing purposes.
- Rapid Prototyping: With JSON Server, you can quickly prototype frontend applications by defining API endpoints and sample data. This allows frontend developers to build and test UI components without waiting for the backend to be fully implemented.
- Simulating Responses: JSON Server allows you to simulate various HTTP response codes (e.g., 200, 404, 500) and response delays. This is helpful for testing how frontend applications handle different server responses and error scenarios.
- Custom Routes and Middleware: JSON Server supports custom routes and middleware, allowing you to implement more complex API behaviors, such as pagination, filtering, sorting, and authentication. This makes it versatile for a wide range of development scenarios.
- Easy Setup and Configuration: Setting up JSON Server is straightforward. You can install it globally via npm and start serving a JSON file as an API with a single command. Additionally, JSON Server provides options for configuring routes, middleware, and other settings via a simple configuration file or command-line options.
- No Database Setup Required: JSON Server operates entirely in memory and does not require a separate database setup. Data is stored and served directly from a JSON file, making it convenient for small-scale projects or prototyping.
- Cross-Origin Resource Sharing (CORS): JSON Server automatically handles CORS headers, allowing frontend applications running on different domains to access the API without encountering cross-origin issues during development.
- Community Support and Ecosystem: JSON Server has a vibrant community and ecosystem with various plugins and extensions available for extending its functionality. Additionally, it integrates well with popular frontend frameworks and tools, making it a preferred choice for frontend developers.

Overall, JSON Server is a valuable tool for frontend developers and teams looking to streamline the development process, prototype applications rapidly, and test frontend components in isolation from backend dependencies. It simplifies the setup of a mock API server and provides flexibility for defining endpoints and data structures to meet project requirements.