teleren/devto huggingface dataset:
Senior Backend Engineer - Are you ready to BOOM?
Published: 2021-06-01 08:59:36

From Milan to the world, BOOM is a hyper-growing technology start-up providing professional visual contents worldwide. 

We are creating cutting-edge, end-to-end integrated services, and to do it we believe in the perfect blend between creativity and technology. We are looking for people who can share our passion and who make it their mission to bring a positive impact to the world around them.

As Senior Backend Engineer you will be a key part of a talented and successful engineering team that works together to support an aggressive product roadmap and keep the system growing consistently.

We would like to work with someone who is excited by the opportunity to work in a rapidly evolving environment by bringing in fresh ideas and by supporting our continuous growth.

BOOM is here to embrace creativity through innovation in a way that has never been done before.

Are you ready to BOOM? Find out more here: https://www.linkedin.com/jobs/view/2538064865/?capColoOverride=true
Graphqurl - curl like CLI for GraphQL
Tags: graphql, webdev, beginners, tutorial
Published: 2021-06-01 08:40:30

The amazing growth of GraphQL is drawing more and more developers every year. Its public release sparked the creation of a vast set of open-source libraries, tools and clients with a shared goal to make working with GraphQL an enjoyable experience. One of them is **Graphqurl**.

## Graphqurl

Graphqurl is a curl-like CLI for GraphQL that's developed and maintained by Hasura, a GraphQL-related company known for its [graphql-engine](https://github.com/hasura/graphql-engine) & [Hasura Cloud](https://hasura.io/) solution.

Its features include:

- **CLI** - a curl-like command line interface for making GraphQL queries with autocomplete,

- **Custom GraphiQL** - allowing you to run a custom GraphiQL, where you can specify headers for your requests as well as run it locally against any given endpoint,

- **Subscriptions support** - Graphqurl supports GraphQL subscription over websockets,

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

##### Source: [hasura.io/blog/](https://hasura.io/blog/graphqurl-v1-curl-for-graphql/)

## Usage

### Query

```

gq https://my-graphql-endpoint/graphql \

     -H 'Authorization: Bearer <token>' \

     -q 'query { table { column } }'

```

### Auto-complete

*Execute the command without providing a query string*

```

$ gq <endpoint> [-H <header:value>]

Enter the query, use TAB to auto-complete, Ctrl+Q to execute, Ctrl+C to cancel

gql>

```

### GraphiQL

*Opening GraphiQL with a given endpoint which runs a custom GraphiQL where you can specify request's headers*

```

gq <endpoint> -i

```

### Subscription

*Subscriptions can be executed and the response is streamed on to standard output*

```

gq <endpoint> \

   -q 'subscription { table { column } }'

```

## Version 1.0

Recently a version 1.0 was released which introduced a couple of optimizations and improvements including:

- Reduced bundle size - previous CLI versions used Apollo client for making GraphQL queries & subscriptions which had a heavy impact on its bundle size, now Apollo was replaced by light-weight isomorphic HTTP clients which reduced the size by half!

- Custom GraphiQL - from version 1.0 custom graphiQL supports [GraphiQL Explorer](https://github.com/OneGraph/graphiql-explorer) and [GraphiQL Code Exporter](https://github.com/OneGraph/graphiql-code-exporter).

If you want to read more about the project make sure to visit [Graphqurl GitHub repo](https://github.com/hasura/graphqurl).

---

## Speed up your GraphQL API development

**GraphQL Editor** is a supportive tool for both advanced GraphQL users as well as those taking their first steps with GraphQL APIs. Our all-in-one development environment for GraphQL will help you build, manage & deploy your GraphQL API much faster. **[Try GraphQL Editor for free!](https://graphqleditor.com)**

![New features of GraphQL Editor gif](https://dev-to-uploads.s3.amazonaws.com/i/hz2iv2u1073dy9orexxf.gif)
Different Cases of "===" and "=="
Tags: javascript, 100daysofcode, programming, webdev
Published: 2021-06-01 08:38:37

In JavaScript we have two type of equality comparison operators.

***Non-strict*** and ***Strict***

The difference between them is a very common question in 
**javascript interview**. This blog will help you to review all the cases and understand the distinction.

* **Non-strict (==) compare the values after converting the operands value to numbers**

   `"1" == 1 // true` 
  
  In the above example "1" on the left side will be converted to 
  number 1 .Hence, The Result will be true .

 Different Cases :
 
 1. `" " == false // true `
    In programming terms false is 0 and true is 1.
    " "  and false will be converted to 0 which result into True.

 2. `0 == false // true `
    false will be converted to 0 
     
 3. `2 <= "4" // true`
 
 4. `null == undefined // true`
    This case is pretty different from other case . If we convert 
    "undefined" to number the result will be NaN whereas in null 
     case it will be converted to 0.
   
    ***So how this `NaN == 0` can be result into true ?***
    "Null" and "undefined" are empty values and its javascript 
     core behaviour which result this into true.

 5. ` NaN == NaN `
    NaN is not equal to anything, including NaN

 
 * **Strict(===) compare the value without convertions, which is 
   quite useful to overcome cases like `0 == false`**
     
   ` " 1 " === 1  // false `
   
   In the Above example the strict operator (==) does not convert 
   the operand type to number. Thus , the output is false.

 Different Cases :
  
 1. Two strings are strictly equal when they have the same 
    sequence of characters, same length, and same characters in 
    corresponding positions.
  
    ` "abc" === "abc"  // true `
    ` "abc" === "abcc"  // false `
    ` "abc" === "acb"  // false `

 2. Two Boolean operands are strictly equal if both are true or  
    both are false.
    ` true === true //true `
    ` true === 1 //false `
 
 3. Two objects are strictly equal if they refer to the same 
    Object.
    ` {} === {}  //false ` 

 4. Null and Undefined types are not equal with ===, but equal 
    with ==.
    ` null == undefined // true `
    ` null === undefined // false `
 
    
  
Thanks for your read 🙌
Use ZonedDateTime in Spring WebFlux (MongoDB Reactive)
Tags: springwebflux, java
Published: 2021-06-01 08:36:02

Hello everyone. For this article we will be empowering our Spring WebFlux and MongoDB to be able to use ZonedDateTime, so let's get started.

## TL;DR
You can find source code in [this repository](https://github.com/marttp/spring-webflux-zoneddatetime-converter)

### Create Spring WebFlux Project
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6vpok1hxf0oicwzopuk3.png)

And if you want to implement ZonedDateTime inside our Spring WebFlux application, you can add ReadingConverter & WritingConverter for our MongoDB. you can see the code that implementation in the below.

```java
@Configuration
public class MongoConfig {
    
    @Bean
    public MongoCustomConversions mongoCustomConversions() {
        List<Converter<?,?>> converters = new ArrayList<>();
        converters.add(ZonedDateTimeToDate.INSTANCE);
        converters.add(DateToZonedDateTime.INSTANCE);
        return new MongoCustomConversions(converters);
    }

    @ReadingConverter
    enum DateToZonedDateTime implements Converter<Date, ZonedDateTime> {

        INSTANCE;

        @Override
        public ZonedDateTime convert(Date date) {
            return date.toInstant()
                    .atZone(ZoneId.systemDefault())
                    .truncatedTo(ChronoUnit.MILLIS);
        }
    }

    @WritingConverter
    enum ZonedDateTimeToDate implements Converter<ZonedDateTime, Date> {

        INSTANCE;

        @Override
        public Date convert(ZonedDateTime zonedDateTime) {
            return Date.from(zonedDateTime.toInstant());
        }
    }
}
```
That's it. You can use ZonedDateTime as a datetime type in our class. 😁

### Example of POST request
```
curl --location --request POST 'http://localhost:8080/promotions' \
--header 'Content-Type: application/json' \
--data-raw '{
    "name": "promotion-2",
    "startDate": "2021-06-01T10:00:00.000+07:00",
    "endDate": "2021-06-20T18:00:00.000+07:00"
}'
```

### Result

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t9f3nosdsjh3bpe7iw2i.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hgfat6gbvf9ykgpp0k3i.png)

This is a short article on how to use the converter of ZonedDateTime in Spring Data MongoDB Reactive, I hope it will be useful for all readers.

Thank you very much. 😄
Why open-source to get a better job as a developer is nonsense *(and what you should do instead)
Tags: programming, productivity, webdev, beginners
Published: 2021-06-01 08:30:04

Have you heard it before?

To get a great job as a developer, you should contribute to open-source projects.

I say it is a bunch of nonsense.

Think about it.

**If you have a full-time job, you just don't have the time to do it.**

Even if you could, where would you get the time from? If you are already employed where can you take the time from and do it? You would have two jobs now, one of them unpaid. You will feel exhausted and burn out. And for what? An entry in your CV?

_Doing open-source while having a job puts you at risk of burnout._

I love contributing and giving back to the community, yes. But for the right reasons and in a sustainable way.

**If you don’t have a job, your time is better invested elsewhere.**

Now, if you don’t have a job, you are better off putting all your time and energy in looking for one instead of forking random projects. You need to pay those bills my friend and unless you are in a special position* the bits and bytes in that boilerplate won’t do it for you. There are easier ways to put a roof under your head and provide for your loved ones.

_If you have to pay the bills, you need to code for $$$._

Yet, let’s for a moment imagine you have the time and energy. Let’s imagine you could actually do it.

**It might be too far away from your current skills**

Let’s say you find a project where you can contribute. And you spend a few hours, onboard yourself and even help out and update some documentation. Yes, you made some progress, but that progress might be too far away from your current skills and from the skills employers demand.

_The knowledge you get is probably out of context._

The hard truth is, contributing is just hard. It is something that you can afford once you get that high-paying job at a top tech company. Probably because the company will give you the space to do that in working hours and you will work with like-minded developers that also do it.

And though contributing to open-source can be extremely rewarding for certain developers in certain positions. For the average software developer, it is just incredibly hard.

**The good news?**

There are easier ways to get better at software development. In fact, at CodeWithDragos we have developed and battle-tested a system whose objective is just that. Turning you into a software rockstar, so you can get that high-paying job you deserve as a developer.

If you truly want a high-paying job as a developer and you are curious about how you could actually get it, just drop me a line or book a FREE consultation call below.

Together we will analyze your situation and build a step-by-step plan to help you get that developer job you dream of.

##[**Click here to apply now!**](codewithdragos.com)
I look forward to consulting you personally soon!

Dragos Nedelcu

Founder at CodeWithDragos
How to receive images with the node.js API | fetch , React
Tags: javascript, node
Published: 2021-06-01 08:18:41



[How to receive images with the node.js API | fetch , React - off.tokyo, the web site for high-tech enthusiasts](https://off.tokyo/blog/node-api-img/)

## what i did 
 

The front side is built with React, and the form data is sent to the api by post using JavaScript fetch.

 

Then, the api receives the form data and saves the data to the server.

 

To edit the user's information, imagine that the user has to register his name and driver's license (back and front) with the service, and look at the code.

 

## node.js console.log
 

In the following log, the form data created on the front side is received by post to get the data contained in the request.

 

At first, I couldn't get the image in the body of the request, so I looked at the log of various requests, and found that the files contained image data.


```js
console.log("use_info")
console.log(JSON.parse(req.body.use_info))

console.log("img_head")
console.log(req.files.img_head)

console.log("img_backkうううううう")
console.log(req.files.img_back)
```

## Front-side implementation fetch

This is the code to post the user's name and image to the api on the front side.

The user data and image data are added by using FormDate and appending to it.

```js
var userData = new FormData()
userData.append('use_info', JSON.stringify(Formdata))
userData.append('img_head', Formdata.fileBack["0"])
userData.append('img_back', Formdata.fileBack["0"])

fetch(`${API_URL}/edit_connect_user`, {
method: 'POST',
body: userData
})
```

## Server-side logs

The following code is the log of the form data thrown from the front side by post.

 

I think it contains the user's name and image data like this.

```js
use_info
{
firstName: 'Pamyu Pamyu ',
lastName: 'Kyary',
userid: 'fekw020'
}
img_head
{
name: 'img_head.png',
data: ,
size: 9808,
encoding: '7bit',
tempFilePath: '',
truncated: false,
mimetype: 'image/png',
md5: 'c28358700f3c94f841c7f7fad50596da',
mv: [Function: mv]
}
img_backk
{
name: 'img_backk.png',
data: ,
size: 9808,
encoding: '7bit',
tempFilePath: '',
truncated: false,
mimetype: 'image/png',
md5: 'c28358700f3c94f841c7f7fad50596da',
mv: [Function: mv]
}
```

[How to receive images with the node.js API | fetch , React - off.tokyo, the web site for high-tech enthusiasts](https://off.tokyo/blog/node-api-img/)
Implementing dev.to api
Tags: react, aws, github, career
Published: 2021-06-01 08:15:19

Hey everyone. It's an absolute pleasure to write something again. 
Since the past couple of days I've been busy with my university exams (footnote: still not over 😐).
But I still managed to learn ReactJS and Java.

And here is what I made as my very first single page application.
Not technically but still it's something more then a frekin TODO app lol

![my app tablet view](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jxtks9axuq0s89y5js9k.png)

Yep! A beautiful implementation of dev.to API.

It isn't my idea per say but this application is till not complete. This is just a branch of it.
I want to implement so much more in it after this. NO SPOILERS. Just stay tuned you won't be disappointed.

# my experience

Since the very day I started to learn I knew about *git bash*. Still I just use to drag and drop my code everywhere. But while making this I thought of using it. I wanted to see how version control works. Well I'd say it is the **best tool after vs code**.

I also deployed it on *AWS*.But there are some issues in it. Idk why one of my stylesheet isn't loading.
What a pity Mr Jeff lol 


[AWS Deployment](https://search-withoutportal.ddthkyo0b93r7.amplifyapp.com/) -- here

That should actually look like this.
And it must also include my search box.

![mobile view](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b2b1cb1r754u3hqj8774.png)


Despite of that I also found out the topics that I don't know enough.
This project is more of less like stepping stones but the next version is going to be amazing. I can feel it.


You can checkout my repository here.

- [main](https://github.com/icecoffee-dev/devto-api-bootstap/)
- [search-withoutportal](https://github.com/icecoffee-dev/devto-api-bootstap/tree/search-withoutportal) - completed 
- [searchbox](https://github.com/icecoffee-dev/devto-api-bootstap/tree/searchbox) - working on it

I learned a lot and I feel good about it.


I'm down for suggestions and hope you may like it.
I have also opened up some issues in the repositories. Feel free to check'em out and comment . 
Other then that a special thanks to @mwrpwr for his article regarding dev.to API. Since this is my first API I wanted someone to show me how to use it and @coffeestasia for that amazing article on portfolio website. Because I will include full version of this app in my portfolio with proper styling n all.

## Goodreads :)
{%post https://dev.to/mwrpwr/exploring-dev-to-api-45ni %}

{%post https://dev.to/actitime/how-to-build-a-great-developer-portfolio-examples-tools-bkj %}
 
Oh shoot did I forgot to mention. 
I launched an npm package
#### reactrouter-parcel
which is nothing but my boilerplate for my react apps.
You can check it out [here](https://www.npmjs.com/package/reactrouter-parcel)

It's amazing for beginners still I just think it's better than create react app.

And done! That's it for today.

Thanks for reading.
Have a beautiful day.😀
How to deploy react app on github
Tags: github, react, hosting
Published: 2021-06-01 08:01:57

In this tutorial, we'll introduce you to how you can deploy a react app on Github.

### Check Git Status
The step below is important! If you skip it, your app will not deploy correctly. Open your git bash cmd and apply this cmd:
```
git status
```
### Initialize git
```
git init
```
### add all files
```
git add .
```
### Commit your files
```
git commit -m 'any word'
```
create a new repository in github without readme and other files only repository name

### put this cmd on your git bash cmd
```
git remote add origin https://github.com/deepbag/your-repository-name.git
```
### push your react app on github
```
push -u origin main
```
### Add homepage on your package.json in the to
The step below is important! If you skip it, your app will not deploy correctly. or for a GitHub user page:
```
"homepage": "https://gitusername.github.io/your-repository-name", 
```
example: https://deepbag.github.io/your-repository-name
Create React App uses the homepage field to determine the root URL in the built HTML file.

### Install gh-pages and add deploy to scripts in package.json
Now, whenever you run npm run build, you will see a cheat sheet with instructions on how to deploy to GitHub Pages.
To publish it at https://myusername.github.io/my-app, run:
```
npm install --save gh-pages
```
### Add the following `scripts` in your package.json:
```
"predeploy": "npm run build", 
"deploy": "gh-pages -d build",
```
The predeploy script will run automatically before deploy is run.

### Deploy the site by running npm run deploy
```
npm run deploy
```
### For a project page, ensure your project’s settings use gh-pages
Finally, make sure GitHub Pages option in your GitHub project settings is set to use the gh-pages branch:

Thank You!
Create direct download link from Github Files
Tags: github, download
Published: 2021-06-01 07:51:43

You can create direct download link from github files like pdf, zip etc. You can use this link for web development. 

## Create Direct Download link
1. Go to Your repository and create a new branch
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ps2wddwbx554572kkb5p.png)
2. Upload your file in gh-pages branch ( `Deep Bag CV` pdf )
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bi8r0q41uii0dqchyfs0.png)
3. Click and and your file and copy URL
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/skfool8rqqrv2xwvswzb.png)
4. Change You URL 
```
https://github.com/deepbag/git-cloud-storage/blob/gh-pages/Deep%20Bag%20CV.pdf
```
`TO`
```
https://deepbag.github.io/git-cloud-storage/Deep%20Bag%20CV.pdf
```
Yehhh! You can use this link in your web development for direct download link. `<a href="downloadURL" target="_blank" />`
JavaScript Chapter 9 - Displaying the Date with JavaScript
Tags: javascript, beginners, tuto
Published: 2021-06-01 07:50:43

In addition to PHP, with javascript we can also display the date. We can display dates in various formats. It can display days, minutes, seconds, months, years and more. Okay, let's just go into the discussion of this tutorial.

DISPLAY DATE WITH JAVASCRIPT
There is a special function provided in javascript to display the date. That is we can use the Date() function. By using this Date () function we can display the date. And to set the date format displayed, you can adjust it by giving/filling the date format as you wish in the Date() function parameter.
Friends need to pay attention. As we discussed in the previous javascript tutorial, javascript is case sensitive, which means writing javascript is very influential about the case size. So to make a date, my friend must write the date function correctly, namely the letter "D" must be a capital letter.
- Incorrect Example> `date()`
- True Example> `Date()`
 So if you write the `Date()` function using all lowercase letters, the results will not appear. So it must begin with a capital letter at the beginning, in accordance with the provisions of writing the date function.

## EXAMPLE OF DISPLAYING DATE WITH JAVASCRIPT
Okay, it doesn't take long, I will give an example of using the Date() function in javascript

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2ooinfxe2u9mq3djw4h4.png)

Pada contoh ini, saya memasukkan fungsi date ke dalam variabel tanggal dan kemudian menampilkannya

```javascript
 var tanggal = new Date();

document.getElementById("hasil").innerHTML = tanggal;
```

and the result

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mog130hniaa0c0ji8d60.png)

## CONCLUSION
In conclusion To display the date in javascript we must use the `Date()` function and write `Date()` must begin with a capital D (Large) . When you enter the `Date()` function starting with lowercase letters, the function will not display an alias Error. But the example above is a very simple date creation, friend, you can give a css style so that the date looks more beautiful.
How to use Github as a Cloud Storage For Web Development
Tags: github, cloudstorage, react, webdev
Published: 2021-06-01 07:29:14

Github provider of Internet hosting for software development and version control using Git. It offers the distributed version control and source code management functionality of Git, plus its own features.

GitHub is where over 65 million developers shape the future of software, together. Contribute to the open source community, manage your Git repositories.

> You can use anywhere this link like Website Development.

## Access or use Files Directly via link From Github

1. First You need Github account 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/44odwwv9hygz1sc1hnbf.png)
2. Create new Repository
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4y7p5xxcemvj8bso0g66.png)
3. Fill all given info prefer below image
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o1vuqs4m9gujyec6wjbn.png)
4. Create new file - path `foldername/readme`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1h1ysm8f9u7j8alksm0f.png)
5. Upload your images in your path `foldername/`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u59oy22i5tialtbzfrao.png)
6. Click Your image which image you want to access directly via link
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1xndkn35wyn7c94tdfnl.png)
7. Right click in your image `Open in a new tab`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jz5ojm7a9i84071styrc.png)
8. Copy Link and Use where you 
`Web Development ( <img src="examplelink" alt="example" /> )`

yeahh! now i have github for multiple uses.