teleren/devto huggingface dataset:
Minimum Steps to Visit Nodes in Infinite 2D Grid x Interview Bit
Tags: java, interviewbit, codenewbie, programming
Published: 2022-06-21 13:33:07

I have been solving questions for some time on Leetcode. 
But having a timer for each question is another challenge. So I recently decided to start solving questions on Interview Bit.

Also, sharing what I learn as a series of posts.

The first question I solved the following question : 
[Minimum Steps to Visit Nodes in Infinite 2D Grid](https://www.interviewbit.com/problems/min-steps-in-infinite-grid/)

The problem states that there is list of points in a matrix or a 2D array. Here, the array is infinite. 

Once we start from point P(A[0],B[0]), we have to visit all the points in the given order.

The first thing that might come in mind is that we have to check all possibilities. But the solution is not that complicated.

There are 2 ways to reach to a given point from another point : 
 - `4-direction movement`: We have to cover the x-axis difference and the y-axis difference differently. For that the distance between the two points will be : `abs(Bx-Ax)+abs(By-Ay)`
 - `8-direction movement`: Now, that we can move diagonally, we can cover x and y axes in on diagonal move. So, the optimal distance between 2 points comes out to be : `Max(abs(Bx-Ax),abs(By-Ay))`

The complete solution of this question in Java can be found here :
[Github](https://github.com/thevinitgupta/Java-DSA-Practice/blob/main/src/InterviewBit/Arrays/MinStepsInInfiniteGrid.java)

PS : This is going to be a series on the questions that I solve on Interview Bit so stay tuned!!
Showify Tv Shows App | Requestly Android Interceptor
Published: 2022-06-21 12:58:54

Hello guys, today I learn Dependency Injection (Dagger-Hilt) for Android with that I build a simple Android app Showify using MVVM Architecture Android.
Showify is simple app which fetch Movies, TV shows details and show them into Recycler View.

<img width="100%" style="width:100%" src="https://media.giphy.com/media/SVWsg9maTGFGPo0zFN/giphy-downsized-large.gif">


Also to debug my API responses I use Requestly debugger which Open Source SDK, with that I can Intercept my API request/response, In-App without dealing with SSL certificate and proxy issues.


# Benifits of using Requestly Debugger

- Open Source
- Simple 1-time integration (No Proxy or SSL certificate hassles)
- In-APP and Web Service Interceptor 
- APIs Modifications Possible
- Also Debug production apps
- Active support

We can integrate Requestly debugger SDK simply in 2 setps and with 3 lines of code.

## Steps to Integrate Requestly


Step 1:- Add the dependency into your build(app) file.

`dependencies {
  debugImplementation "io.requestly.rqinterceptor:library:1.+"
  releaseImplementation "io.requestly.rqinterceptor:library-no-op:1.+"
}`

Step 2:- Add these 3 lines code into your Network Module.

`val collector = RQCollector(context=appContext, sdkKey="<your-sdk-key>")
val rqInterceptor = RQInterceptor.Builder(appContext)
                                .collector(collector)
                                .build()  
val client = OkHttpClient.Builder()
                      .addInterceptor(rqInterceptor)
                      .build()`


If you are using retrofit then simply pass okHttpClient into retrofit client.

`Retrofit.Builder()
    .baseUrl(APIUtils.API_BASE_URI)
    .client(okHttpClient) // okHttpClient with RQInterceptor
    .build();`

That's all now you can Intercept your the API responses into your app or into requestly web app.

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


Thanks for reading this through.
Have a wonderful Day.

- [Requestly Android Interceptor](https://requestly.io/debug-android-apps/)
- [Showify Github](https://github.com/MohitGupta121/Showify)
Customizable Django Admin themes
Tags: django, python, webdev
Published: 2022-06-21 12:57:00

Create django project and then create super user to access django admin.

```
python manage.py createsuperuser
```

Now django-admin-interface package. django-admin-interface is a modern responsive flat admin interface customizable by the admin itself.

```
pip install django-admin-interface
```

After installation, add "admin_interface", "colorfield" in INSTALLED_APPS in settings.py

```python
# settings.py

    INSTALLED_APPS = [

    "admin_interface", #this
    "colorfield", #this
    
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',

    'qrcodeapp',
    
]

``` 

add this if in INSTALLED_APPS
```python
 "flat_responsive", # only if django version < 2.0
 "flat", # only if django version < 1.9
```

Now migrate 

```python
python manage.py migrate
```

This package ships with optional themes as fixtures, they can be installed using the loaddata admin command. Optional themes are activated on installation.

DJANGO THEME (DEFAULT):
```
python manage.py loaddata admin_interface_theme_django.json
```

BOOTSTRAP THEME:
```
python manage.py loaddata admin_interface_theme_bootstrap.json
```

FOUNDATION THEME:
```
python manage.py loaddata admin_interface_theme_foundation.json
```

U.S. WEB DESIGN STANDARDS THEME:
```
python manage.py loaddata admin_interface_theme_uswds.json
```

Now run the server and hit http://127.0.0.1:8000/admin and now login yourself.

You can see themes get added 


![django admin](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f4i9lraikqhwodc5xxw8.png)


![django admin](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kq3ffwdsnlbc1iusebfi.png)


![django admin](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kwds74j23i4pehjn5g1s.gif)

Package: [django-admin-interface](https://pypi.org/project/django-admin-interface/)

Follow me for more <3

Happy Coding :)

You can support me and 
<a href='https://ko-fi.com/F1F44PLC7' target='_blank'><img height='36' style='border:0px;height:36px;' src='https://cdn.ko-fi.com/cdn/kofi1.png?v=3' border='0' alt='Buy Me a Coffee at ko-fi.com' /></a>
How To Remove The Uncommitted Changes in Git
Tags: git
Published: 2022-06-21 12:28:30

Have you ever changed your mind and tried to remove the uncommitted changes? I stuck at once. Doing basic things in git is easy-peasy, like live hosting, committing, pushing…etc. but when you do advanced stuff. You will be in a pickle soon. 

Maybe, I am a beginner at using git at that time. Though it’s easy to remove the uncommitted changes. All you have to do is:

`git reset --hard [commit id]`

Actually, you don’t need that commit id (to do on the current branch). You can do without that. The recent uncommitted codes will be removed from your git folder and become as fresh as your last commit.
Data structures and algorithms
Tags: javascript, webdev, react, programming
Published: 2022-06-21 12:25:29







![Laptop photo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ox9ovq69wm410z5m5yva.jpg)
**<u>Introduction to data structures and algorithms</u>**
Data structures and algorithms sound scary,right? Luckily, I'll give an easier overview of each with simple examples.

**<u>Data structures</u>**
Data Structure is basically a way to store and organize data for efficient use. Organized data is easier to use than unorganized data. For example, assuming the dictionary was not organized according to alphabets, would it be easy to find a word from it? The same way in a computer we need to organize data for efficient and easy use; data structure is the answer.
Data structures can either be linear or non linear.
Some of the examples of data structures are;

1. <u>**Array**</u>
An array is a collection of elements of the same data type such as an integer and a string.The operations that can be done on arrays are;

- Transversal - it is a process of visiting each element once
- Insertion -It is the process of including one or more elements in an array.It can be at the beginning,end or a given index
- Deletion -It is the process of removing the desired element and re-organizing it
- Searching -Looking for a specific element in an array
- sorting -It is the process in which it sorts elements in a user-defined order

2. <u>**LinkedList**</u>
A linked list is a collection of objects linked together by references from one object to another object. Linkedlists have the following operations
-Deleting - Removing an element from a linked list.
-Searching - Find the first element that matches a condition in the given linked list by a simple linear search.
-Inserting - Add a key to the linked list
3.<u>**Stack**</u>
A stack follows the principle of Last In First Out (LIFO). This means the last element inserted inside the stack is removed first. The operations are;
-Push - Insert an element on to the top of the stack.
-Pop - remove the topmost element and return it.
4. <u>**Queue**</u>
A queue follows the FIFO (First In First Out) method and is open at both of its ends. Data insertion is done at one end rear end or the tail of the queue while deletion is done at the other end called the front end or the head of the queue.
Operations that can be done on a queue are:
-Enqueue - Insert an element to the end of the queue.
Dequeue - Delete the element from the beginning of the queue.

<u>**What are algorithms **</u>

![Algorithm picture](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tmddt6fgrs8viv08mv89.png)
an algorithm is a set of well-defined instructions to solve a particular problem. It takes a set of input and produces a desired output. For example,

- An algorithm to add two numbers:

- Take two number inputs

- Add numbers using the + operator

- Display the result
JavaScript(ES6) Symbols
Tags: javascript, es6, beginners
Published: 2022-06-21 11:58:46

## What is symbol in JavaScript?
Symbol is a primitive data type that is unique and immutable. Every symbol has a hidden unique value. It is usually used to avoid name conflicts between object properties, and keys. 

## Syntax
Unlike other primitve data types, we can not create symbol with new keyword because symbol is not a constructor function. We can create a symbol by using the factory function Symbol(). It returns a unique symbol every time it is called.
` var symbol = Symbol();`
We can also add description to symbols. Symbol description does not have any functional value. They are used for debugging purpose, to differentiate between symbols. 

```
var symbol1 = Symbol();//Symbol with no description
var symbol2 = Symbol('Symbol description');//Symbol with description
```

## Symbols are unique
Every time we create a new symbol in JavaScript, they return a unique value. Even though we get same output when we console.log symbol1 and symbol2, when we check if symbol1 is equal to symbol2 it returns false.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zvmmbd5prkvbkjhmmznm.PNG)

## Symbol.for()
Symbol.for(key) is an inbuilt method in JavaScript. It searches for existing symbols in runtime-wide registry with the given key and returns it. If it is not found, it creates a new symbol with the given key. The key can also be used as the description of the symbol.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x24dyqkvpjhtaf7w2de6.PNG)

## Why use Symbols?

- We can use symbols as object properties

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ebn4dqh08pl5rlk4r7lm.PNG)

- We can use symbols to avoid over writing object properties
Say we have an object blackWidow with id and name properties. 

![code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cc2o3qigipb65wajcac2.PNG)
As we can see the value of id property is changed. What if we don’t want to change the actual value of id we can add symbol in the object.

![code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kiziwzv9r0c8kdcuicvq.PNG)

- Symbols are hidden in loops and js functions. We can use them to keep any unique or identifier property hidden.

![code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/21nb3cpx0qjjeilzfdrr.PNG)
Website Development, Designing and Hosting Company in Raipur
Tags: web, development, mobile, application
Published: 2022-06-21 11:53:10

[DMS Infosystem](https://www.dmsinfosystem.com/) is the indistinct website development, web design and hosting company in India. It is one of the service based company provide mobile app development and website development among [software companies](https://www.dmsinfosystem.com/
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qbreqpajyc076c6b4zzc.png)) in raipur.
Tokenization of text with spaCy tokenizer
Tags: productivity, opensource, showdev, tutorial
Published: 2022-06-21 11:49:04

In the latest version of our software, the text will now automatically get tokenized with the spaCy tokenizer of your choice saving time and energy with added features exclusively for our user’s.This not only helps you to build better labelling functions via pre-integrated metadata, but also allows you to easily label data manually. Kern sparks innovation having the easiest navigation system with features that can help you manage labelling tasks rapidly in-house. This drastically reduces the time, money and support in delivering high quality AI solutions in a hassle free way.

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

Subscribe to our newsletter 👉🏼 https://www.kern.ai/pages/open-source and stay up to date with the release so you don’t miss out on the chance to win a GeForce RTX 3090 Ti for our launch 😉
#Descomplica - DTO
Tags: programming, architecture, beginners, tutorial
Published: 2022-06-21 11:40:56

## Introdução

E aí pessoas, tudo bem?
Esse será o primeiro artigo do **#Descomplica**, uma série de pequenos artigos que irão sempre focar em um tema específico, com uma abordagem simples e direta sobre o assunto e o nosso primeiro assunto será sobre **DTOs**.

## O que é um DTO

**DTO (Data Transfer Object/Objeto de Transferência de Dados)** é um(a) **Design Pattern/Padrão de Projeto** simples, porém eficiente para se aplicar na arquitetura um software.

Um **DTO** nada mais é que um objeto utilizado para encapsular e mapear dados primitivos e que podem ser serializados.

## Como criar e utilizar um DTO

Como dito anteriormente, um **DTO** nada mais é que um objeto simples para encapsular e mapear dados que serão enviados entre as camadas da nossa aplicação. Então vamos ver um exemplo bem simples em **PHP** de um **DTO** utilizado para encapsular dados para um endpoint/serviço que irá salvar um usuário:

```php
class SaveUserDTO
{
    public function __construct(
        private string $name,
        private string $email,
        private string $password
    ) {}

    // GETTERS AND SETTERS
}
```

```php
$userDTO = new SaveUserDTO('Wendell', 'me@wendelladriel.com', 'S3cR3t');
```

Como podem ver acima, criar e utilizar um **DTO** é extremamente simples e fácil. Agora vamos aprender o porquê utilizar esse padrão.

## Porquê utilizar DTOs

Para mim, a utilização de **DTOs** no código gera um código simples, limpo e de fácil manutenção. Para quem trabalha com **Laravel** e outros frameworks **PHP** já devem ter visto como eu vi em várias aplicações algo como abaixo nos controllers:

```php
public function saveUser(Request $request): JsonResponse
{
    $this->service->saveUser($request->all());
}
```

No código acima o código pega todos os parâmetros do **Request** e os envia para a **Camada de Serviço**. Alguns dos problemas criados por isso são:

- Não temos a definição de quais valores estão a ser enviados
- Caso o Request seja atualizado, não vamos saber de forma fácil o que foi alterado
- Para alguém que não conhece o código ou se ficar um tempo sem mexer no código, dificilmente saberá os possíveis valores desse Request

Se ao invés de fazer isso, usarmos o **DTO** que criamos acima, qualquer dev que entrar na equipe ou caso alguém precise fazer alguma alteração ou manutenção no código, será muito mais fácil de saber quais são os dados esperados pelo serviço, o que podemos utilizar e como alterar algo se necessário.

O código fica muito mais limpo, fica muito mais fácil de dar manutenção ou alterar algo e oferece uma excelente DX (Developer Experience/Experiência para o Desenvolvedor) para toda a equipe!

## Conclusão

Vimos nesse artigo o que é, como utilizar e o porquê utilizar DTOs para melhorar a arquitetura da nossa aplicação! Espero que tenham gostado e aproveitem pra comentar aqui se conheciam esse padrão, se utilizam e como utilizam!

Um grande abraço e até o próximo **#Descomplica**!
Verbum - Rich Text Editor For React
Tags: javascript, typescript, react
Published: 2022-06-21 11:36:23

---
title: Verbum - Rich Text Editor For React
published: true
description: Verbum is a fully flexible text editor based on lexical framework.
tags: javascript, typescript, react
---

![Demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x1h2afwg44m5wfb0wmhh.gif)

Until this year, **draft.js** was one of the mainly used libraries out there for building web based text editors, and there are lots of component libraries for React based on draft.js. However, the development team(which is facebook) has announced that the project is not under development anymore, since they have started a brand new project, which is **Lexical**. Lexical is a framework to build text editors and is under early development currently. By using Lexical, I have built a new component library that comes with a ready to use rich text editor. It is under very early development as well, as I am trying to make it more modular and flexible with each improvement. I hope this project can help some startups that needs to implement a highly functional text editor to their projects. All of the support(like stars) and contribution to the project is very much welcomed.


{% github ozanyurtsever/verbum %}
Journey into web3 [0]
Tags: web3
Published: 2022-06-21 11:33:56

Hello everyone! It’s Kizito here again. My profile has been quite dusty for some time. So within that time I’ve decided to transition into Web 3.0 (Blockchain Tech). Meanwhile another group somewhere is working on Web 5 😅 but no pressure y’all. 
So I plan to share detailed explanations on what I’ve been learning along the way hoping that someone would find it useful 😁 Ciao.
Create the function to test for true or false
Tags: python, programming, productivity, tutorial
Published: 2022-06-21 11:30:25

Create the function to test for true or false
You will use true_values and false_values to create a function named str_to_bool to convert strings to Boolean values. str_to_bool will accept one parameter named value.

Create the function str_to_bool. Convert value to lower case letters. If value matches an entry in true_values the function should return True. If value matches an entry in false_values it should return False. If it doesn't match any of the values, it should raise a ValueError, with a message of Invalid entry.
Meet ODBC Driver for Salesforce with new versions of macOS and Linux
Tags: odbc, salesforce
Published: 2022-06-21 11:23:03

---
title: Meet ODBC Driver for Salesforce with new versions of macOS and Linux
published: true
description: Devart announced an updated ODBC Driver for Salesforce with macOS and Linux support.
tags: odbc, salesforce
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
---
Devart, a recognized vendor of world-class data connectivity solutions for various data connection technologies and frameworks, presented a new version of [ODBC Driver for Salesforce](https://www.devart.com/odbc/salesforce/?utm_source=devto&utm_medium=referral&utm_campaign=pr_odbc_21.06.2022) with **macOS and Linux support**. The release is based on the developers’ potential challenges when using the Salesforce ODBC drivers on systems with no prior official support.  

**Features of the new release:** 
- The new version of ODBC Driver for Salesforce is available for macOS.
- ODBC Driver for Salesforce 3.0 supports Linux. 

Now it takes less effort to properly integrate tools into the workflow since there is no need to create custom solutions for each third-party instance — it simply works out of the box.

To learn more about the recent release, visit:
https://blog.devart.com/odbc-driver-for-salesforce-macos-and-linux-versions-released.html

**Devart ODBC Driver for Salesforce** is a high-performance connectivity tool with enterprise-level features for accessing Salesforce from ODBC-compliant reporting, analytics, BI, and ETL tools on both 32-bit and 64-bit Windows, macOS, and Linux. 

About Devart 
 
Devart is one of the leading developers of database tools and administration software, ALM solutions, data providers for various database servers, data integration, and backup solutions. The company also implements Web and Mobile development projects. 
For additional information about Devart, visit https://www.devart.com/.
React Router 6 send data from link to target page
Tags: react, reactrouter
Published: 2022-06-21 10:57:46

---
title: React Router 6 send data from link to target page
published: true
description: 
tags: react, reactrouter
---

use `Link`, `useLocation` from React-Router 6, send my filterList data from list to detail page.

After enter filter in list page, click on row and go to detail page, then we can **go back** to list page with filters we added.

```
import {
  Link as RouterLink,
} from "react-router-dom";
import { useLocation } from "react-router";
```
List page:
```
<Button
  variant="contained"
  color="primary"
  size="small"
  style={{ marginLeft: 16 }}
  component={RouterLink}
  state={{ filterList: state.filterList }}
  to= {`/collections/${params.row.id}`}
>
  Edit
</Button>
```

Detail page:
```
<Button
  variant="outlined"
  startIcon={<KeyboardBackspaceIcon />}
  to="/collections"
  state={{filterList: location.state.filterList}}
  component={RouterLink}
>
  back to list
</Button>
```
ERROR: Cannot set headers after they are sent to client!!!
Tags: node, javascript, webdev
Published: 2022-06-21 10:42:09

## UnhandledPromiseRejectionWarning: Error [ERR_HTTP_HEADERS_SENT]: Cannot set Headers after they sent to the client

If you encounter this error you probably calling the response in a loop. For example

```
app.get('/pokemon', async (req,res)=>{
for(let i=1;i<20;i++)
{
const response = await fetch(url);
const data = await response.json();
res.json(data);
}})

```

For this simple solution is just add return before response. This will return the response out of the loop.

return res.json(data)