teleren/devto huggingface dataset:
React Query: How to organize your keys
Tags: react, webdev, tutorial, javascript
Published: 2022-08-01 09:11:00

If you're using React Query you certainly know how the `useQuery` hook works. Some example similar to the ones you find in the [React Query documentation](https://react-query-v3.tanstack.com/guides/query-keys).

```typescript
// a simple string.only key
useQuery('todos', ...)

// an array key
useQuery(['todo', id], ...)

// other, more complex keys
useQuery(['todo', id, 'comments', commentId], ...)
useQuery(['todo', {id, type: 'comments', commentId}], ...)
```

These keys are used to identify a specific query and is most important in combination with react query's caching mechanism. It allows react query to fetch the same query only once even if it is called multiple times in various components, and it identifies the cache to be used when fetching again or invalidating the cache.

In larger applications you'd have to make sure the keys are identical in all components or hooks using the same query or even more important if you want to invalidate the cache (aftera mutation, for example).

The react query documention does not provide a solution to this problem. My solution for this is pretty straightforward. By creating an object with a `key` and `query` function for each query.

```typescript
const todoQuery = {
  key: (id: string): ['todo', string] => ['todo', id],
  query: (id: string): Promise<...> => {... fetch the todos ...},
}
export default todoQuery
```

Using useQuery would then look like this:

```typescript
const { data, isLoading } => useQuery(todoQuery.key(id), () => todoQuery.query(id))
```

I think this is a simple but effective way to make sure the keys are always the same. Even when the keys need to change for some reason, you always alter them for all the places they have been used.

----

Photo by <a href="https://unsplash.com/@goshua13?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Joshua Aragon</a> on <a href="https://unsplash.com/s/photos/screen?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
Why does the action swap in array when clicking after typing in javascript?
Tags: javascript, programming, beginners, webdev
Published: 2022-08-01 09:06:53

I've created a chrome extension to capture the elements in the DOM according to the click order. The XPath obtained there is pushed to an array as follows. The function that performs it is as follows.
```    
var actionArray = [];
        function Capture(json) {
        
            var lastCaptureStep = actionArray[actionArray.length-1];
            if(lastCaptureStep && lastCaptureStep.activity=="CLICK" && lastCaptureStep.timestamp+100>json.timestamp){
                actionArray[actionArray.length-1] = json;
                actionArray.push(lastCaptureStep);
            }else{
                 actionArray.push(json);
            }
        }
```

The received JSON is as follows.

```
    {
        "activity": "TYPE",
        "xpath": "//input[@id='password']",
        "value": "Password",
        "frames": [],
        "timestamp": 1658992410657
    }
```

But in the following scenario, when the password is typed in the login screen and the remember me button is clicked, the two actions are swapped as remember me click first and type action after that. (for more details please see the image).

![Swapped Array](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eiffn1cjy32isooh5yil.png)
What is the reason for this? Is there a problem with the logic in my function?
GIT :: ignoring files/folders recursively
Tags: git, webdev, subversion, github
Published: 2022-08-01 08:45:00

I had a folder for a particular set of Web Applications projects grouped together under one repository, instead of having separate repositories per project, below is my illustration. 

lets say i had 5 web projects in one repository prefixed by `_1, _2, or _3`. and each of these projects have their individual dependencies inside the `node_modules` folder.

with just one `.gitignore `file

```txt
repo/WebApp_1/node_modules/*/*/*.js
repo/WebApp_2/*/node_modules/*/*/*/*.js
repo/WebApp_3/*/*/node_modules/*/*/*/*/*.js
repo/WebApp_4/*/*/*/node_modules/*/*.js
repo/WebApp_5/*/*/*/*/*/node_modules/*/*.js

.gitignore  //just one gitignore file here.

```


I initially thought i could use the parent `.gitignore` file to restrict all `node_modules` directorys withing the sub directories.

After googling and i figured out that you could have each folder with its individual `.gitignore` folder to solve the issue. 

```txt
repo/WebApp_1/ .gitignore
repo/WebApp_2/ .gitignore
repo/WebApp_3/ .gitignore
repo/WebApp_4/ .gitignore
repo/WebApp_5/ .gitignore
```

this approach worked for me, so i want to know if anyone has a better alternative and a centralized way of achieving this i would be glad to adhere to it. 

Thanks.
What is Rootkit?
Tags: rootkit, malware, rootkitdetection, security
Published: 2022-08-01 08:38:09

When you listen about rootkit and if you are a linux user first thing that comes to your mind will be **this has some thing to do with root user**. And, you are not wrong but it's a part of it. Let's define it formally.

> **_Rootkit is a program that can hide itself as well as other running processes, files, network connections from the host where it is running._**

## What is the utmost goal of the rootkit?

The main goal is to run **incognito** meaning running in the background for as long as it is possible.

## What is the typical functionality or characteristics of rootkit?

#### 1- Stealth Functionality

It aims to hide the traces of intruder by manipulating processes, open files, network activity, changing access rights/permission of different files and directory.

### 2- backdoor

One of the main goal of rootkit is to make sure that intruder have full remote access to the victim's computer all the time. For e.g: rootkit may establish a backdoor using ssh tunneling.

### 3- Sniffing

It also enables attacker to wiretapping and intercepting various system components may be sending data to a particular end point or installing a keylogger.

## What is the biggest challenge to the attacker?

The biggest challenge that also differentiate rootkit from other types of malware is the fact that rootkit need to be installed with root privileges in the first place.

## Types of Rootkits

- User-mode rootkit: A user-mode rootkit covertly replaces common UNIX binaries or libraries with infected versions to hide its existence and to gain root privileges if needed.

- Kernel-mode rootkit: A kernel-mode rootkit operates on the system level and modifies or replaces the kernel which may have been affected in the boot process.

> This is a good [blog](https://www.freecodecamp.org/news/the-linux-booting-process-6-steps-described-in-detail/) on Linux boot process.
Cypress 10+ & Cucumber
Tags: javascript, cypress, cucumber, testing
Published: 2022-08-01 08:32:47

I see people having headaches trying to integrate Cypress and Cucumber. So, I decided to create a couple of videos to explain how to integrate both of them, and how to get a BDD report at the end of the execution. 

**1- Install the right cucumber dependency**
As you can see in the following video, I'll be using the [cypress-cucumber-preprocessor](https://www.npmjs.com/package/@badeball/cypress-cucumber-preprocessor) dependency, which is the best option available in the market right now. 
{% embed https://www.youtube.com/watch?v=FlQ9Carxeds&list=PLYDwWPRvXB8-8LG2hZv25HO6C3w_vezZb&index=50&ab_channel=JoanMedia %}

**2- Generate HTML reports with a simple add-on**
You'll need to download a json formatter as I explain in the video. Also, some extra configurations in the cucumber config file. Check it out: 

{% embed https://www.youtube.com/watch?v=5AGXK9cL2fs&list=PLYDwWPRvXB8-8LG2hZv25HO6C3w_vezZb&index=51&ab_channel=JoanMedia %}

If you want to clone the repo, just access it here: [Cucumber-Boilerplate-Project](https://github.com/JoanEsquivel/cypress-cucumber-boilerplate)
Cypress 10+ & Mochawesome Reporter
Tags: javascript, typescript, cypress, testing
Published: 2022-08-01 08:18:01

There are different report solutions for Cypress E2E tests using Javascript or Typescript. However, there is a library that print the results in an styled HTML with emmbeded screenshots, that provides a lot of insights when you need to check the test results.

The choosen one is [cypress-mochawesome-reporter](https://github.com/LironEr/cypress-mochawesome-reporter) and let's explore the installation steps:

1. Install [Node JS](https://nodejs.org/es/) in your computer depending your operating system.

2. Have a Cypress project already setup with Javascript or Typescript. [Check how to install Cypress 10+](https://www.youtube.com/watch?v=yM3qnxWNCY8&t=1s&ab_channel=JoanMedia)

3- Install the library using the command: `npm i --save-dev cypress-mochawesome-reporter`

4- Edit the configuration file 'cypress.config.js' or 'cypress.config.ts' with the properties:
- `reporter: 'cypress-mochawesome-reporter'`
- `e2e: {
    setupNodeEvents(on, config) {
      require('cypress-mochawesome-reporter/plugin')(on);
   },`

5- Add the following line to the "cypress/support/e2e.js/ts" configuration file: `import 'cypress-mochawesome-reporter/register';`

**If you need a visual example just check the following video: **
{% embed https://www.youtube.com/watch?v=dFiQpbUXqIs&list=PLYDwWPRvXB8-8LG2hZv25HO6C3w_vezZb&index=52&ab_channel=JoanMedia %}

See you soon!
PHP Developer with Twig knowledge can start expressjs project with twig in few moment
Published: 2022-08-01 08:06:00

# The Background
As a PHP Developer I was used to work with twig template engine like most of the PHP Developers. I found the twig engine is supported by express js as well and also my teammates were using this extensively. I have decied to use the same template engine for my projects.

## Starting the first project
If you are from PHP Background and using twig template engine, and want to switch to express js, then you can follow the below steps to download the boilerplate code for express and setup your project automatically.

1. Install nodejs (Latest version) from [https://nodejs.org/en/download/ (the official website)](https://nodejs.org/en/download/)

2. Open Command prompt (Windows) or Terminal (Mac/Linux) and run the following command:
    
    ```npx start-express [project-name]```

        -- [project-name] is the name of your project.
3. This will generate a directory with your project name and add essentials into it.
4. Open the directory in your text editor. 
5. Run the following command to start the server in development mode:

    ```npm run devstart```
6. You can now access your project in your browser on port 3000.

A readme file is also generated for more information. You can go through it for more details.
A Nice Developer Joke For Today
Tags: jokes, dailydeveloperjokes
Published: 2022-08-01 08:00:27

---
title: "A Nice Developer Joke For Today"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
published: true
tags: #jokes, #dailydeveloperjokes
---

Hi there! Here's today's Daily Developer Joke. We hope you enjoy it; it's a good one.

![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1259b29fe07.png)

---

For more jokes, and to submit your own joke to get featured, check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/). We're also open sourced, so feel free to view [our GitHub Profile](https://github.com/dailydeveloperjokes).

### Leave this post a ❤️ if you liked today's joke, and stay tuned for tomorrow's joke too!

_This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit._

<!--
Joke text:
___Q:___ How do JavaScript developers break up?

___A:___ They always promise to callback
 -->
Install fish shell on Ubuntu-22.04
Tags: wsl2, linux
Published: 2022-08-01 07:20:00

* What is fish?

Fish shell is a terminal shell. It has many features to help developers improve coding and skills.
* How to install?

First Step: add repository

`sudo apt-add-repository ppa:fish-shell/release-3`

Second: update and install

`sudo apt update`
`sudo apt install fish`

Third: replace the original terminal

`sudo chsh -s /usr/local/bin/fish`

> If you want to back to the bash terminal, type this in terminal

> `sudo chsh -s 'which bash'`
If establishing a product startup, should I get a remote developer teams ? Any good companies from where I can grab a team ?
Tags: management
Published: 2022-08-01 07:10:06

So I am deciding to work on a product startup like food review system based social media app, you may call it a modified of yelp (P.s its not their advertisement just using the name to explain the idea better) but in countries where yelp isn't much functional with a unique business logic as compared to theirs. But I am thinking of having contract based remote teams to work on the product.
Quickie: Requirements elicitation techniques
Tags: requirements, elicitation, analysis, requirementsengineering
Published: 2022-08-01 07:08:48

**Anyone who is involved in the management of requirements in their daily work knows, that every new project/product has different conditions. Technical, professional, human, organizational. You inevitably come to the point where you ask yourself which requirements elicitation technique is most effective and best for the stakeholders.**

Since this question is not new, smart people have thought about it before. For some time now, decision tools such as the one shown below have been floating around the Internet, and we would like to introduce one to you here. It is an excellent tool to identify suitable techniques by assessing a few parameters.

![Decision matrix on elicitation techniques](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a710wzs4ciglqwxzhrqi.png)
<figcaption>Decision matrix on elicitation techniques</figcaption>

[Download this matrix!](https://www.devlix.de/wp-content/uploads/2022/07/Erhebungstechniken_Matrix_englisch.png)

This matrix can help you enormously with an initial orientation or, in the best case, even give you new ideas. Of course, as always in dealing with stakeholders, a certain amount of empathy will help you in this case as well.

We usually go through the scenarios described in the table header from left to right and decide which of them are relevant when selecting a technique. Then we can go through row by row, focusing on the techniques that have the most matches in the green (very suitable technique) and yellow (also suitable as an alternative technique) area.

We hope this tip helps you. Success to you!

---

Frank Schillinger is writing for the devlix Blog at https://www.devlix.de/blog
This article was published first here (german): https://www.devlix.de/quickie-erhebungstechniken-fuer-anforderungen/

![devlix logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zmqebdbqusql1ibky1lr.png)
<figcaption>devlix GmbH: quality, consulting, development</figcaption>
If establishing a product startup, should I get a remote developer teams ? Any good companies from where I can grab a team ?
Tags: hiring
Published: 2022-08-01 07:08:18

So I am deciding to work on a product startup like food review system based social media app, you may call it a modified of yelp (P.s its not their advertisement just using the name to explain the idea better) but in countries where yelp isn't much functional with a unique business logic as compared to theirs. But I am thinking of having contract based remote teams to work on my product.
How to use environment variables with cl-dotenv in a Common Lisp web app
Tags: commonlisp, webdev, security, lisp
Published: 2022-08-01 06:47:00

In this post, we are going to take a look at how securely we can store our confidential information like security keys, api keys and similar stuff in `.env` files and use them in our Common Lisp web applications.

If you want some refresher about writing Common Lisp web applications, I have already written a post about it here.

{% link https://dev.to/rajasegar/lisp-for-the-web-5-13ca %}

Storing configuration in the environment separate from code is based on [The Twelve-Factor App](http://12factor.net/config) methodology. In Common Lisp, we have an awesome library called `cl-dotenv` created by [Olle Lauri Boström](https://github.com/ollelauribostrom) to load information from `.env` files and pass it along to our web apps.

## Installation
The package is available through [Quicklisp](https://www.quicklisp.org/beta/).

```lisp
(ql:quickload :cl-dotenv)
```


## Usage
You can call the `load-env` function to load the environment from the specified .env file. You can also use any of the available nicknames `cl-dotenv`, `.env` or `dotenv`.

```lisp
  (.env:load-env (merge-pathnames "./path/.env"))
```


If you are inside any web application framework or a Lisp project like `Caveman`, say for example a project called `cl-hello`, 

Let's say you have a `.env` file like this:
```
#.env file
API_KEY=1234XXXX
```

you can use the following snippet to load the `.env` file inside your project root folder.

```lisp
(.env:load-env (asdf:system-relative-pathname "cl-hello" "./.env"))
(defvar *api-key* (uiop:getenv "API_KEY"))
(print *api-key*)
```

## References
- [cl-dotenv](https://github.com/ollelauribostrom/cl-dotenv)
- [How to Use Node Environment Variables with a DotEnv File for Node.js and npm](https://www.freecodecamp.org/news/how-to-use-node-environment-variables-with-a-dotenv-file-for-node-js-and-npm/)
Moving particles of the sea
Tags: codepen, css, particles, animatio
Published: 2022-08-01 06:57:59

<p>Simulator of moving particles in the sea with html and css. This can also be used to simulate the movement of stars. Use <a href="https://cssgradient.io/" target="_blank">https://cssgradient.io/</a> to generate gradients!</p>

{% codepen https://codepen.io/baarbaracrr/pen/NWYwWRB %}
If establishing a product startup, should I get a remote team ? Any good companies from where I can grab a team ?
Tags: developers
Published: 2022-08-01 06:57:16

So I am deciding to work on a product startup like food review system based social media app, you may call it a modified of yelp (P.s its not their advertisement just using the name to explain the idea better) but in countries where yelp isn't much functional with a unique business logic as compared to theirs. But I am thinking of having contract based remote teams to work on my product.
If establishing a product startup, should I get a remote team ? Any good companies from where I can grab a team ?
Tags: remotejobs
Published: 2022-08-01 06:56:29

So I am deciding to work on a product startup like food review system based social media app, you may call it a modified of yelp (P.s its not their advertisement just using the name to explain the idea better) but in countries where yelp isn't much functional
with a unique business logic as compared to theirs. But I am thinking of having contract based remote teams to work on my product.
TatBanTheme2.0
Published: 2023-09-09 19:03:41

---
title: TatBanTheme2.0
published: true
date: 2022-08-01 06:38:26 UTC
tags: 
canonical_url: https://themes.gohugo.io/themes/tatbantheme2.0/
---

TatBanTheme2.0 TatBanTheme2.0 is a minimal Hugo theme to build an elegant website and a working blog. The theme is built from scratch using responsive Bootstrap 5 framework. Live demo is on Netlify. Although it has 2.0 in its name, it is still a work-in-progress project. I will be adding more CSS (and hopefully some JS) elements in future releases. The aim of this theme is not necessarily to provide a plug and play framework, but to encourage people to get started with their own customizations.
62. Leetcode Solution in Cpp
Tags: cpp
Published: 2022-08-01 06:36:49

```
class Solution {
 public:
  int uniquePaths(int m, int n) {
    // dp[i][j] := unique paths from (0, 0) to (i, j)
    vector<vector<int>> dp(m, vector<int>(n, 1));

    for (int i = 1; i < m; ++i)
      for (int j = 1; j < n; ++j)
        dp[i][j] = dp[i - 1][j] + dp[i][j - 1];

    return dp[m - 1][n - 1];
  }
};
```


#leetcode
#challenge
Here is the link for the problem:
https://leetcode.com/problems/unique-paths/
How to Update Newest QuickBooks Desktop Version successfully?
Published: 2022-08-01 06:30:42

Using outdated QuickBooks versions can lead to various issues and technical glitches. And so, it is often suggested to update the software whenever there is any latest version QuickBooks available. Intuit the developer of QuickBooks releases [Newest QuickBooks desktop version](https://hostdocket.com/update-quickbooks-desktop-to-the-latest-release/) every now and then to ensure that the software works smoothly. The new updates also add numerous features and  unctionalities and eliminate the existing bugs. In this post, we are going to discuss the complete steps that can be performed to update the software to the latest release. Thus, make sure to read the post till the end. Or you can also contact our tech personnel at + 1(844)405-0907 and let them help you with the update process. 
Manual Updates 
One can upgrade to QuickBooks 2021 manually using the steps below:
•	At first, close your company files and QuickBooks.
•	After that, open the Windows Start menu.
•	Now, hunt for QuickBooks Desktop. 
•	Once done with that, right-click the icon and select Run as administrator.
•	When No Company Open on the screen, go to the Help menu and select Update QuickBooks Desktop.
•	Move to Options tab
•	Choose Mark All and then select Save.
•	Pick the Update Now tab and go for the Reset Update checkbox.
•	Click on Get Updates.
•	After that close and reopen QuickBooks Desktop. To install the updates, select yes.
•	Reboot the system to complete the process. 
Schedule future automatic updates
One can schedule updates for the future using the steps below:
•	Start with heading to the help menu 
•	Now, click on Update QuickBooks Desktop.
•	After that hit Options tab.
•	Choose Yes to turn on automatic updates. 
•	Share automatic downloads with other computers on your network, by selecting yes for each computer.
•	Also, go for Close.
•	QuickBooks will automatically download updates when they're available.

Now that you know the steps that can be performed to update QuickBooks to the latest release, it is time for you to implement those steps. However, if you are stuck at any point of time or if you need our assistance at any moment, then feel free to share your queries with our team at + 1(844)405-0907  and they will come up with instant support and assistance. We are a team of technically sound [QuickBooks professionals](https://hostdocket.com/) who know what it takes to maintain QuickBooks software.