teleren/devto huggingface dataset:
How to connect Stepzen Graphql queries to supabase(Postgres database)?
Tags: nextjs, graphql, postgres, api
Published: 2022-05-26 05:19:22


![](https://cdn-images-1.medium.com/max/3840/1*lVtIgLVAoC3_h2jmdbbATQ.jpeg)

Hi 👋 friends, in this blog, you gonna learn how to set up graphql queries with the help of Stepzen.

Tools needed:

 1. Nextjs

 2. Supabase Account

 3. Stepzen Account

If you don’t know how to set up Supabase Account then you can read this 👇
[**How to connect Supabase and Nextjs**](https://nextdev1111.hashnode.dev/how-to-connect-supabase-and-nextjs)

Now comes, how to setup **stepzen account.**

Go to [stepzen.com](https://stepzen.com/) and click on the **start for free button.**

![](https://cdn-images-1.medium.com/max/3840/1*qyZxnSs3nT-PV35KnrFe0g.png)

After signing up, click on my stepzen:

![](https://cdn-images-1.medium.com/max/3840/1*O2A5lywTFwDh8rrmz0XlXQ.png)

After that you would see this page:

![](https://cdn-images-1.medium.com/max/3840/1*1WbgHW990_FLZ7tmHWsLPA.png)

I have hidden the admin key and API key so that I can prevent my account from being hacked.

Now make a nextjs project and go there:

In the root directory, make a folder name stepzen:

![](https://cdn-images-1.medium.com/max/3840/1*ivoeo26l30BqN30egu6kDw.png)

Then type this command in terminal

npm install -g stepzen

-g means that package would be installed globally.

Then type stepzen login but remember to be in the stepzen folder

![](https://cdn-images-1.medium.com/max/3840/1*41pXRFVhFEpVynQf44_fpg.png)

You can find the username WHICH is written as Account here and admin key here:

![](https://cdn-images-1.medium.com/max/3840/1*1WbgHW990_FLZ7tmHWsLPA.png)

![](https://cdn-images-1.medium.com/max/3840/1*bgPg6qFM0OZQOtA0yW6b2A.png)

You can enter any endpoint name or you can just hit enter.

![](https://cdn-images-1.medium.com/max/3840/1*YZ2OwFJl5KELLhMxW6R14Q.png)

Now, let's go to supabase

![](https://cdn-images-1.medium.com/max/3840/1*GTU5MVGFWSw9VZXUiXGEJw.png)

Remember that you should have a password:

 1. Password should not contain any symbols like (#$#@!!$) else it can give an error

![](https://cdn-images-1.medium.com/max/3840/1*V0Iusq7UBE8YIslfqVizSw.png)

This error came. But why 🤔? 

If you faced any error other than it saying ‘user not found or something else’, then you may have put wrong password

After talking with the stepzen team at discord, [https://discord.gg/xCxgan262w](https://discord.gg/xCxgan262w).

The error came because we haven’t made any table in the database.

![](https://cdn-images-1.medium.com/max/3840/1*vBbemGrNT2yTRN4L6vO-Uw.png)

After saving the table.

Retry the command

![](https://cdn-images-1.medium.com/max/3840/1*U6TNPg1wurObruttPd9ewQ.png)

Then type stepzen start 

![](https://cdn-images-1.medium.com/max/3840/1*p-B4wT8KuV6Ebq4xDwV4tQ.png)

Then, you can follow this tutorial:

https://www.youtube.com/watch?v=O0AhmAVzOo4deleted from profile’s table.
Uses of JSON.parse() and JSON.stringify()
Tags: javascript, json, webdev
Published: 2022-05-26 04:54:42

Sometimes we confused that when I have to use JSON.parse() and when JSON.stringify. But most of the time we have to use both of these. 

Let's talk about these important topics-

**<u>JSON.parse()</u>**
JSON.parse() takes JSON string and transform it into JavaScript object.

**Input**
```
let userStringData = '{"name":"Hamid","email":"hamid@gmail.com","profession":"Doctor"}';

let userObjData = JSON.parse(userStringData);

console.log(userObjData);
```
**Output**
```
{ name: 'Hamid', email: 'hamid@gmail.com', profession: 'Doctor' }
```

**<u>JSON.stringify()</u>**
JSON.stringify() is total oposite of JSON.parse(). Where JSON.stringify takes JavaScript object and transform it into JSON string.

**<u>Input</u>**

```
let userObjectData = 
{ name: 'Hamid', email: 'hamid@gmail.com', profession: 'Doctor' }

let userJSONData = JSON.stringify(userObjectData);

console.log(userJSONData);
```

**<u>Output</u>**

```
{"name":"Hamid","email":"hamid@gmail.com","profession":"Doctor"}
```
Follow me on [LinkedIn](https://www.linkedin.com/in/dev-mizanur919/)
💡 50+ JavaScript Project ideas!
Tags: javascript, webdev, beginners, productivity
Published: 2022-05-26 04:42:16

In this article, I’ve collected 50+ of them, so you can have an easier job choosing your next challenge.


① Modal open & close 

② Random Hex Color Generator

③ Random Number Generator

④ Counter Number App

⑤ Border Radius Controller

⑥ Box Shadow Controller

⑦ Image Filter (when we click on the button)

⑧ Border Width Slider

⑨ Background changer using HTML Color Picker

①⓪ Image Position Slider (X and Y Directions)

①① Click To Download Something

①② Background Choosing With Images or Gradients

①③ Auto Year Update In The Footer Section

①④ Date CountDown

①⑤ Time CountDown

①⑥ Sticky NavBar

①⑦ Smooth Scrolling 

①⑧ Responsive NavBar(Hamburger Button)

①⑨ Random Password Generator

②⓪ Body Mass Index Calculator

②① Notes App

②② To-Do App

②③ Calculator App

②④ Digital Clock

②⑤ Form Validation

②⑥ Password Hide And Show

②⑦ Password Strength Checker

②⑧ Currency Converter

②⑨ Dark & Light Mode Toggle

③⓪ Alert & Notification

③① Website Preloader Implementation

③② Character CountDown

③③ Temperature Calculator

③④ Age Calculator(Years/Months/Day)

③⑤ Music Player App

③⑥ Number Guessing Game

③⑦ Length Converter App(KM, M, CM, etc.)

③⑧ Auto Image Change Of The Background After A Defined Time.

③⑨ Contact Form

④⓪ Text To Speech

④① Search Something

④② Music Search

④③ Find The Location Of A User

④④ Click To Copy

④⑤ Internet Connection Checker

④⑥ Quiz App

④⑦ Weather App

④⑧ Accordion Open & Close

④⑨ Slider Or Carousel

⑤⓪ Scroll Bottom To Top

⑤① Random Joke Generator

⑤② Ludo Dice Number Generator

⑤③ Alarm App

⑤④ Cards Expand & Collapse

⑤⑤ Blurry Loading

⑤⑥ Toast Notification

⑤⑦ Hidden Search Widget

⑤⑧ Page Progress

⑤⑨ Find Keyboard Keys Name



## That's all for now, we will meet in the next post😍
James Paterek is the Chief Operating Officer of Millbrook Support Services, Inc.,
Published: 2022-05-26 04:27:04

 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j5335u6nddokb8ij06fl.jpg)
which provides government agencies with physicians, nurses, advanced practice providers, and Allied Healthcare staffing.
Paterek & Company, a private consultancy focused on the Human Capital sector that includes staffing, outsourcing, and consulting businesses, is also led by [James Paterek](https://muckrack.com/jamespaterek).
Prior to that, James L. Paterek was the founder and chairman of COMFORCE Corporation (formerly ASE: CFS), a leading publicly traded staffing, outsourcing, and financial services firm with over 11,000 employees. The Company operated in three business segments via its 76 global offices: Human Capital Management Services, Staff Augmentation, and Financial Outsourcing Services. COMFORCE was named the fastest growing public staffing company by SIA for two years in a row under James Paterek's leadership. During those two years, COMFORCE increased its net revenue from $12 million to nearly $500 million ($800 million gross system-wide revenue) and its operating profit from $245,000 to nearly $31 million. The expansion was fueled by YOY organic growth as well as nearly a dozen strategic acquisitions.
Previously, James L. Paterek was the founder and CEO of a $300 million private holding investment firm that acquired portfolio companies with combined annual revenues of $500 million.
James Paterek has extensive experience in acquiring, financing, and integrating businesses, having completed more than twenty-eight acquisitions and raising over $600 million for investment in those companies. James L. Paterek has experience raising capital and managing public companies in the financial markets.
Number of 1 Bits | LeetCode Solution
Published: 2022-05-26 04:20:06

Welcome back coders to our new blog where we will talk about how can we solve a Leet Code problem to find out number of "1" bits.

So here we will be using LeftShift Operator of C++. So let's get started

**Problem Statement**

Write a function that takes an unsigned integer and returns the number of '1' bits it has (also known as the Hamming weight).

**Note:**

Note that in some languages, such as Java, there is no unsigned integer type. In this case, the input will be given as a signed integer type. It should not affect your implementation, as the integer's internal binary representation is the same, whether it is signed or unsigned.
In Java, the compiler represents the signed integers using 2's complement notation. Therefore, in Example 3, the input represents the signed integer. -3.
 

**Example 1:**

`Input: n = 00000000000000000000000000001011
Output: 3
Explanation: The input binary string 00000000000000000000000000001011 has a total of three '1' bits.`

**Example 2:**

`Input: n = 00000000000000000000000010000000
Output: 1
Explanation: The input binary string 00000000000000000000000010000000 has a total of one '1' bit.`

**Example 3:**

`Input: n = 11111111111111111111111111111101
Output: 31
Explanation: The input binary string 11111111111111111111111111111101 has a total of thirty one '1' bits.`

**Solution**

```
class Solution {
public:
    int hammingWeight(uint32_t n) {
        // with the help of right shift operator
        int count = 0;
        while(n!=0){
            if(n&1){
                count++;
            }
            n = n>>1;
        }
        return count;
    }
};
```

Thanks for your valuable time. You can like my post and
you can.

[By me a Coffee](https://www.buymeacoffee.com/saim783)

[My other Blog Website over Technology](https://www.saimtechnews.in)

[My YouTube Vlog Channel](https://www.youtube.com/c/abdullavlogs)
BST To Doubly Linked List Conversion Using C++
Tags: algorithms
Published: 2022-05-26 04:06:17

```
#include<bits/stdc++.h>

using namespace std;
 
class node{
    public:

int data;
node *left;
node *right;

 node();
  node(int data){
    this->data = data;
    this->left = this->right = NULL;
}
};

//**head act as a pointer to pointer

void bsttodll(node *root,node **head){
   
    if(root == NULL)return;

//Mention static as to access it through all recursion calls
     static node *prev = NULL;

//We have to traverse recursively in left sub tree
    bsttodll(root->left,head);
//When it'll reach the lestmost node and if prev  == null then set head as root and prev = root
//After this recursion it'll back to the previous recursion step and check prev, and set 
    if(prev ==  NULL) *head = root;
    //Here root->left store the prev and prev->right will store the root address

    else{
        root->left = prev;
        prev->right = root; 
    }
    prev = root;

 bsttodll(root->right,head);


}

void preorder(node *root){
    if(root==NULL)return;
    
    
    cout<<root->data<<" ";
    preorder(root->left);
    
    preorder(root->right);
}

void printdll(node *head){
    while(head != NULL){
        cout<<head->data<<" ";
        head = head->right;
    }
    
}

int main()
{
    node *root = new node(22);
    root->left = new node(7); 
     root->right = new node(28);
    root->left->left = new node(4);
    root->left->right = new node(9);
  
    root->right->left = new node(26);
    root->right->right = new node(29);
    preorder(root);
    cout<<endl;
    node *head = NULL;
    bsttodll(root,&head); //give address of dll node as head
    printdll(head);
   
     

 
 return 0;
}

```
Output:
`
22 7 4 9 28 26 29 
4 7 9 22 26 28 29
`
Host TOR Hidden service (DARK WEB website) on a smartphone !!
Tags: termux, tutorial, opensource, github
Published: 2022-05-26 03:47:40

DARK WEB websites — TOR hidden services or the .onion sites which can only be accessed by connecting to TOR relay.

In this blog, We will host a TOR hidden service using termux in Android. This is incredibly cool, takes only a few minutes to setup…you’ve gotta try this!!

If you prefer a video tutorial, click [here](https://www.youtube.com/watch?v=oFUmVPjxRss)

If you don’t want to learn the process, I have my script to do the work for you. Check it here — https://github.com/sam5epi0l/onionX/

## Follow these steps -
* Get official termux app from F-DROID — https://f-droid.org/en/packages/com.termux/

* update packages ```pkg update -y```

* Install dependencies ```pkg i termux-api tor git -y```

* create torrc configuration 
```cp /data/data/com.termux/files/usr/etc/tor/torrc .
echo "HiddenServiceDir /data/data/com.termux/files/home/hidden_service/" >> torrc
echo "HiddenServicePort 80 127.0.0.1:1337" >> torrc```

* Start TOR hidden service```tor -f torrc```

* Check URL in hostname file ```cat /data/data/com.termux/files/home/hidden_service/hostname```

* (OPTIONAL) Start your Apache/nginx web server at port 1337

> I’m using python http server at 127.0.0.1:1337
```python3 -m http.server 1337```

Hurray! you finished all steps and the host is up and running DARK WEB website. Thank you so much for reading.
Code Smell 135 - Interfaces With just One Realization
Tags: java, programming, webdev, tutorial
Published: 2022-05-26 02:52:57

*Being generic and foreseeing the future is good.*

> TL;DR: Don't over-generalize

# Problems

- Speculative Design

- Complexity

- Over-Engineering

# Solutions

1. Remove the interface until you get more examples

# Context

In the past, programmers told us to design for change. 

Nowadays, We follow the scientific method. 

Whenever we find a duplication we remove it. 

Not before.

# Sample Code

## Wrong

[Gist Url]: # (https://gist.github.com/mcsee/e86499e8b367ce0d5524c347ed821cda)
```java
public interface Vehicle {
    public void start();
    public void stop();
}

public class Car implements Vehicle {
    public void start() {
        System.out.println("Running...");
    }
    public void stop() {
        System.out.println("Stopping...");
    }
}

// No more vehicles??
```

## Right

[Gist Url]: # (https://gist.github.com/mcsee/c7c06a683be5fe72d481840c2720e0d5)
```java
public class Car {
    public void start() {
        System.out.println("Running...");
    }
    public void stop() {
        System.out.println("Stopping...");
    }
}

// Wait until more vehicles are discovered
```

# Detection

[X] Automatic 

This is very easy for our linters since they can trace this error at compile time.

# Exceptions

This rule applies to inter system definition and business logic.

Some frameworks define an Interface as protocol to be fulfilled.

On our [bijections](https://dev.to/mcsee/the-one-and-only-software-design-principle-3086) we need to model existing real world protocols.

Interfaces are the [MAPPER](https://dev.to/mcsee/what-is-wrong-with-software-5pa) correspondence to protocol.

Dependency injection protocols declare interfaces that are fulfilled with their realizations. Until then, they can be empty.

If your language defines an interface for test mocking, it is another [code smell](https://maximilianocontieri.com/code-smell-30-mocking-business).

# Tags

- Over Design

# More Info

{% post https://dev.to/mcsee/code-smell-130-addressimpl-b46 %}

# Conclusion

We need to wait for abstractions and not be creative and speculative

# Credits

Photo by [Brian Kostiuk](https://unsplash.com/photos/WZ43jnCeWOs#:~:text=Photo%20by%20Brian%20Kostiuk%20on%20Unsplash) on Unsplash

* * *

> I love software, because if you can imagine something, you can build it.

_Ray Ozzie_
 
{% post https://dev.to/mcsee/software-engineering-great-quotes-26ci %}

* * *

This article is part of the CodeSmell Series.

{% post https://dev.to/mcsee/how-to-find-the-stinky-parts-of-your-code-1dbc %}
DRY “Don't Repeat Yourself”
Published: 2022-05-26 02:30:47


DRY is a basic principle in any software development. Certainly, it is the most understandable software principle, but not everything is so obvious. I want to show you when you don’t need to follow this principle.

DRY is an acronym, of “Don’t Repeat Yourself”. The main problem that DRY can solve is a reducing repetition of code. Sometimes you need to have already existed function in another module, class, etc. And the easiest way to do that is just copy&paste this function.Congratulations, DRY principle violated. Factual copping of code creates for you one huge problem:

_It is hard to maintain all these functions on the whole project, and if you need to change this function — you should change it in all places where did you copy it._

**How to reduce DRY**
the key points for how to apply abstraction to write code that doesn’t repeat itself:

- Create functions for common software patterns. We call them _higher order function_.
- Replace the boilerplate in your code with higher order funcitons.

Some examples of higher order functions include:
- `map` --- modifying each element in the array based on give rule
```
const finalParticipants = ["Taylor", "Donald", "Don"];

// add string after each final participant
const announcements = finalParticipants.map((member) => {
  return member + " joined the contest.";
});

console.log(announcements);
// [
//   "Taylor joined the contest.",
//   "Donald joined the contest.",
//   "Don joined the contest.",
// ];
```

- `filter` --- getting subset of the array the passes a given criterion
```
const randomNumbers = [4, 11, 42, 14, 39];
const filteredArray = randomNumbers.filter((n) => {
  return n > 5;
});
console.log(filteredArray); //[ 11, 42, 14, 39 ]
```

- `reduce` --- combining everything in the array based on a given rule

```

const arrayOfNumbers = [1, 2, 3, 4];
 
const sum = arrayOfNumbers.reduce((accumulator, currentValue) => {  
  return accumulator + currentValue;
});
 
console.log(sum); // 10

```

- `forEach` --- executes a callback function on each of the elements in an array in order.
```
const numbers = [28, 77, 45];

numbers.forEach((number) => {
  console.log(number);
  // 28
  // 77
  // 45
});
```

**Advantages of DRY**
- Maintainability
- Readability
- Reuse
- Cost
- Testing

**Disadvantages of DRY**
- Not all code needs to be merged into one piece. Some times 2 pieces of code can look similar but with subtle differences.
- If the code is “over dried”, it becomes difficult to read and understand.
- Often missed, DRY is not to be limited to just the code. It is to be applied in equal measure to database design, documentation, testing code etc.

**Conclusion**
Yes, these codes are identical right now. Does the change of one duplicated part can affect some other duplicated part? If It isn’t — you can duplicate the code
Awesome cli that you didn't know #2
Tags: cli, awesome, shell, linux
Published: 2022-05-26 02:29:47

## termdown https://github.com/trehn/termdown

![termdown](https://raw.githubusercontent.com/trehn/termdown/master/termdown.gif)

At home I have problems with my work hours, Sometimes I sitdown and not standup in hours... then I need something to tell me about the time passed from the start this tool its very helpfull!


I open a tmux new window and run on it.
What's the Alternative (Text)?
Tags: html, webdev, a11y, beginners
Published: 2022-05-26 02:23:09

`alt="A black background with the words, 'You didn't come this far to only come this far in a white font.'"` 

That alternative text describes the header image. Now if you can see that, then you know what the picture is and what message it is trying to convey. Low-vision users and Blind people won't.

So why is having alternative text so important? There are reasons why. If you have seen the tweets that are put out there that have images and no alt text to go along with the images, then you have undoubtedly seen someone from the accessibility space imploring people to use alt text.

I'm here to tell you why. **Because it matters**.

- Screen reader users depend on it.
- Persons with visual or cognitive disabilities depend on it.
- Everyone depends on it when an image does not load.

Those are reasons good enough to include alt text in your images.

> But what if I don't want to be bothered with having to write something for every image that is in this... (site, project, my tweets)?

Do it. It doesn't take more than five minutes of your time. A clear and concise description of the image and what it is conveying is more than enough. It's inclusive, it's accessible, and it's the right thing to do.

## Decorative Images

Just add an empty/null alt text and you're good to go. Easy as that.

## Infographics, Graphs, and Charts. Oh my!

For these, you want to add clear labels, have good color contrast on shapes, allow for text to be zoomed, and provide a text alternative for Blind users using an accessible HTML table.

## Please...

In the end, all I can ask is for people to use alt text in their images, practice inclusion and empathy, and make things more accessible. We can all benefit in the long run.
 
Photo by <a href="https://unsplash.com/@drew_beamer?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Drew Beamer</a> on <a href="https://unsplash.com/s/photos/alternative-text?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
Snippet: Change timezone for DateTime object
Tags: python, snippets
Published: 2022-05-26 02:21:18

---
published: true
title: 'Snippet: Change timezone for DateTime object'
description: 'Convert a DateTime object from one timezone to another timezone'
tags: Python, snippets
series:
canonical_url:
---

## Information

Convert a Python DateTime object from one timezone to another timezone. This snippet accepts either a naive or aware DateTime object.

## Snippet

```py
# code/timezone.py

import datetime as dt
import pytz


def to_timezone(datetime_value, tz):
    """
    Convert the given datetime object to a datetime object with the given timezone.
    Accepts both aware and naive datetime objects

    Parameters
    ----------
    datetime_value: datetime.datetime
    tz: pytz.timezone

    Returns
    -------
    datetime.datetime
    """
    if not isinstance(datetime_value, dt.datetime):
        raise SyntaxError

    if not hasattr(tz, "zone") or tz.zone not in pytz.all_timezones:
        raise SyntaxError

    if (
        datetime_value.tzinfo is not None
        and datetime_value.tzinfo.utcoffset(datetime_value) is not None
    ):
        datetime_value = datetime_value.astimezone(tz)
    else:
        datetime_value = tz.localize(datetime_value)

    return datetime_value

```

### Found a typo?

If you've found a typo, a sentence that could be improved or anything else that should be updated on this blog post, you can access it through a git repository and make a pull request. Instead of posting a comment, please go directly to [GitHub](https://github.com/petervanderdoes/dev.to/tree/main/blog-posts/snippet-0001-to-timezone) and open a pull request with your changes.

---

###### Photo by Ijaz Rafi - https://unsplash.com/photos/L4hg5o67jdw
Awesome cli command that you didn't know #1
Tags: awesomecli, zodman, shell, linux
Published: 2022-05-26 02:11:04

Let's fire some what I like:


## ets https://github.com/zmwangx/ets

> ets is a command output timestamper — it prefixes each line of a command's output with a timestamp.

I love this command, let's check this:


Run a command with `ets`:

```console
$ ets ping localhost
[2020-06-16 17:13:03] PING localhost (127.0.0.1): 56 data bytes
[2020-06-16 17:13:03] 64 bytes from 127.0.0.1: icmp_seq=0 ttl=64 time=0.036 ms
[2020-06-16 17:13:04] 64 bytes from 127.0.0.1: icmp_seq=1 ttl=64 time=0.077 ms
[2020-06-16 17:13:05] 64 bytes from 127.0.0.1: icmp_seq=2 ttl=64 time=0.037 ms
...
```
I use for ? well I have used for adding how long take to execute a command

Are you use time? 
```
time mylongcommand
.... long putput
real    0m0.005s
user    0m0.001s
sys     0m0.005s
```
Drop time and start using `ets -s`