teleren/devto huggingface dataset:
Getting Started with GraphQL
Tags: graphql, testing, automation, gettingstarted
Published: 2020-06-11 15:33:57

## What is GraphQL?
GraphQL is an API specification standard and an Open-Source data query and manipulation language. It has a server-side runtime fulfilling those queries along with the data. In other words, GraphQL follows WYAIWYG pattern What You Ask Is What You Get. GraphQL allows declarative data fetching where a client can specify what data it needs from an API.

Facebook invented GraphQL, and now it is maintained by a large community of companies and individuals all over the world. GraphQL is a specification and, users shall create their implementation on different platforms conforming to the specification. Therefore, Netflix Open-Sourced their implementation called Falcor. An easy example for folks coming from Test Automation world, it is like WebDriver being a W3C Specification, Selenium and WebDriverIO are its browser automation implementation.

GraphQL has two parts:

* A Server component, a GraphQL server to accept the incoming requests and send back data precisely.
* A Client component, to send a POST request (with payload) to the GraphQL server.

GraphQL uses a type system to define the capabilities of an API. All the types declared in an API are written in a schema using the GraphQL Schema. Namely, Schema Definition Language (SDL). It serves as a contract between the client and the server to define how a client can access the data. Defining the Schema allows the back-end and front-end teams to concentrate on their piece of work without much communication.

More content here: https://blog.testproject.io/2020/06/11/introduction-and-getting-started-with-graphql/
What are keys in React? How can we utilize them for improving the performance?
Tags: react, reactnative
Published: 2020-06-11 15:21:13

We all have used `Keys` in React. Mostly while iterating over an array and rendering the elements dynamically in JSX. 

**But Why do we use Keys?**
Before keys, We need to know What **Reconciliation** is in React?
Reconciliation is a process which helps React to make a minimum number of changes in DOM by comparing it with the Virtual tree.

Keys in React is used to let React know if anything has changed in a list of the dynamically Rendered element. So that React can only update the DOM nodes which have changed. for example, If we have 3 elements with their respective keys and we add one more element. React will only update DOM tree for that one new element and won't change or re-render the old 3 elements. This saves the re-rendering cost and Your app will be more performant.

**Why shouldn't we use Index?**
Let's say we have 10 elements and we have used Array indexes for the keys for these elements and we delete the third element with 2nd index. Now, when the virtual DOM looks for an element with key={2}. It will find the element with key={2} is different than before because we have deleted the element with key={2} and after deleting it, The array will reshuffle and the fourth element from the pre-mutated array will be the third element. and this will reshuffle all the elements with key > 2. This will cause React to re-render all the elements with key > 2. Because the elements have changed for these keys. thus causing unnecessary renderings

**If not Index, then what?**
What we can do is we can create a unique ID for every element. Which should **never change** even if we remove or add a new element in the Array. So, that even if we delete or add a new element in the Array. React will add only one DOM node in the DOM tree and won't manipulate the rest of the DOM elements. You can either append a Unique Id from the server you are fetching Data from (preferable) or you can append a Unique ID in `componentDidMount` life cycle hook.

Keys even though sounds like a minor concept but can improve your React App performance significantly by saving up on those unnecessary renders.
Learning Deno and liking what I see
Tags: deno, todayilearned
Published: 2020-06-11 15:20:08

Today I learned why there's some buzz going on about [Deno](https://deno.land/manual). As someone who has always found Node difficult, Deno is a welcome relief. 

Recently I started solving some computable problems on [Quora](https://www.quora.com/) using C#. One of them was [What are words with a vowel to consonant ration of 2:3?](https://www.quora.com/What-are-words-with-a-vowel-to-consonant-ratio-of-2-3/answer/Bruce-Axtens). Below is Deno code re-implementing the C#. Please note that the word-list in the Deno solution is different from that of the C# version (https://boardgames.stackexchange.com/questions/38366/latest-collins-scrabble-words-list-in-text-file rather than https://users.cs.duke.edu/~ola/ap/linuxwords).
```javascript
const rex = /[aeiou]{1}/ig;

const res = await fetch(
  "https://drive.google.com/uc?export=download&id=1oGDf1wjWp5RF_X9C7HoedhIWMh5uJs8s",
);

const body = new Uint8Array(await res.arrayBuffer());

const list = await new TextDecoder("utf-8").decode(body).split(/\r\n|\r|\n/g)
  .filter((line: string, index: number) => { // skip first two header lines
    return index > 1;
  })
  .filter((word: string) => {
    const match = word.match(rex);
    if (null !== match) {
      const vowelcount = match.length;
      const consonantcount = word.length - vowelcount;
      if (vowelcount % 2 === 0) {
        if (vowelcount / 2 * 3 === consonantcount) {
          return true;
        }
      }
    }
    return false;
  });

list.forEach((line: string) => {
  console.log(line);
});
```
There are probably better way to write that, but the `await` notation seemed fairly natural and made sense. Being able to use `.filter` was helpful too.

I think I'm going to enjoy learning Deno. Maybe you will too.
College Student seeking career advice
Tags: career, help, webdev, dsa
Published: 2020-06-11 13:00:53

Hello, This is my first post so if there are any typos or grammatical mistakes please forgive me. 

I am a student pursuing Bachelor's degree in Computer Science. I am a self taught full-stack web developer with decent knowledge of Django in backend. I also like competitive programming. My preferred programming languages are Python and C++.

I want to be land a good job after my college but I am very confused about the path I should follow to achieve that. 

I am good at web development but sometimes I feel like I might not be able to land a job with just being a web developer. I am thinking of focusing completely on Data Structures and Algorithms to be able to work in companies like Amazon, Google, Facebook etc. 

I can't decide between webdev and data structures. If anyone can give me advice please comment or email me at 9876shivamyadav@gmail.com

Edit: I just finished an internship as a python developer intern. I learnt a lot yet I feel like to land a job in a really good company I am not talented enough in web dev.
Interesting header progress navbar in dev.to
Tags: javascript, css, tricks
Published: 2020-06-11 15:14:51

---
title: Interesting header progress navbar in dev.to
published: true
description: how to create process navbar in page header like dev.to
tags: Javascript, CSS, Tricks

---

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/mdk0wauafk53gglix1xm.jpg)


Found Interesting things when you click a link in `dev.to`  you will see a colorful progress navbar grow width it's so cool.

I just inspect how dev.to implement it. let's show code i have found:

First defined html dom like this

```html
<div class="navigation-progress showing" id="navigation-progress"></div>
```

Then use css **animate* attributes

```css
// defined background with linear-gradient 
.navigation-progress {
    position: fixed;
    top: 0;
    background: linear-gradient(to right, orange, yellow, green, cyan, blue, violet);
    z-index: 102;
    height: var(--su-1);
    width: 0%;
}
// play animation when navigation-progress dom added showing class
.navigation-progress.showing {
    display: block;
    width: 140%;
    -webkit-animation: grow-width 3200ms ease-out, pulsate 1.4s infinite ease-in-out;
    animation: grow-width 3200ms ease-out, pulsate 1.4s infinite ease-in-out;
}

// define keyframes
@keyframes grow-width {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
```

These CSS defined animation `grow-width` will infinite play until page loaded.

Hope it can help you :)  [Demo](https://codepen.io/ihavecoke/pen/yLeOOzP)
Do you know these 5 things about Vue Lifecycle Hooks?
Tags: vue, javascript, webdev, typescript
Published: 2020-06-11 15:14:06

1. Vue Lifecycle Hooks are an example of the **Template Method Design Pattern**.

2. In the case of **SSR**, only the **creation hooks** are run on the **server-side**, all **other hooks** are run **client-side**.

3. Vue has an `errorCaptured()` hook and contrary to what you might believe, it **does not capture** all the errors thrown inside the component. Setting up a **global error handler is suggested**.

4. You can do **programmatic lifecycle hook registration** using `$on` or `$once` and pre-pending the hook name with `hook:`. Similarly, you can also **listen to lifecycle hooks from children components**.

5. There is a significant delay between the `created()` and the `mounted()` hook.

I cover all the above-mentioned points and more in my talk [here](https://youtu.be/SS8gN7IyJE8).

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

Happy Coding!
Git Cheat sheet.
Tags: git, github
Published: 2020-06-11 15:12:31

![Git cheatsheet](https://dev-to-uploads.s3.amazonaws.com/i/1qpduzhiblt1j14wlwb1.png)
Mention the missing ones in the discussion below.
Also Read complete article about [git and GitHub](https://milddev.com/an-essential-guide-on-what-is-git-and-how-to-use-git-and-github) here.
How To Write Better Git Commits
Tags: git, github
Published: 2020-06-11 15:10:18

Git plays a very important role in software development. It allows for collaboration across the globe. In such an ecosystem, git commits must show what the other developer's thought process was while working. Maybe that other developer is your self from 3 months back.
  
1. The `title` must start with a **capital** letter unless it is an identifier.
2. The `body` and the `title` must be separated by **2 blank lines**.
3. The `title` should not end with a period.
4. Each line in the body shouldn't exceed **75 characters**.
5. Use the imperative form of verbs (`Add` not `Added`, `Remove` not `Removed`).
6. The `title` shouldn't exceed **72 characters**.
7. The commit's `body` must explain the entire thought process behind the changes or further details.
8. Your git commit must have a `title` that briefly sums up the changes made to the codebase.

You could visit any successful open source project and view their git commits.
For example, [this commit](https://github.com/atom/atom/commit/9e8b0b14faea0b2d08ffadbe44272c386749dd53) is a good example of a well-written commit.

I would like to quote what **Atom** says in their contributing guidelines.
```
These are mostly guidelines, not rules. Use your best judgment.
```

This is a summary of these resources:
[Gnome guidelines](https://wiki.gnome.org/Git/CommitMessages)
[Atom guidelines](https://github.com/atom/atom/blob/master/CONTRIBUTING.md#git-commit-messages)
I highly encourage to read these. 😄
  
  
| Photo by Yancy Min on Unsplash
Composition in Ruby with the >> operator
Tags: ruby, rails, functional
Published: 2020-06-11 15:09:14

In Ruby, you can compose behavior and make arguments flow from to proc to proc using the `>>` operator.

Let's say I want the addition of two numbers

```ruby
add = proc { |first, second| first + second }
add.call(1,2)
# => 3
```

Let's say I would also like my program to square numbers

```ruby
square = proc { |number| number ** 2 }  
square.call(2)
# => 4
```

Now, I would like the program to perform one action after the other. First add two numbers, and then square them

```ruby
add_then_square = square.call(add.call(1,2))
# => 9
```

I tried composing two simple functions and I don't like where this is going.  Now need to read the line from left to right. This is when the `>>` operator comes in to make our day.

```ruby
add_then_square = add >> square
add_then_square.call(1,2)
# => 9
```

You can also reverse the order of operations by using <<

```ruby
greet = proc { |name| "Hello, #{name}!" }
sanitize_name = proc {|name| name.capitalize }

say_hello = greet << sanitize_name
say_hello.call("BENDER")

# =>  "Hello, Bender!"
```

And we do not even have to assign multiple procs to a variable in order to  call them.

```ruby
total = 0
appetizer = proc { total += 10 }
salad = proc { total += 15 }
dessert = proc { total += 6 }

(appetizer >> salad >> dessert).call

# => 31
```

All this makes composing and pipelining behavior really easy. Procs are, however, one of the very few things in Ruby that are not objects. We need to add a bit of indirection to our methods if we want to make them compatible with `>>`.

```ruby
def sanitize_name
	proc { |n| n.capitalize }
end

def verify_robot
	robot_names = %w(Bender Marvin Kitt)
	proc {|n| n if robot_names.include?(n) }
end

def greet
	proc {|n| "Hello ,#{n}!" }
end

join_robot_army = sanitize_name >> verify_robot >> greet
join_robot_army.call("BENDER")

# =>  "Hello, Bender!"
```

Ruby is famous for being an OOP-first language, but it has tremendous support for function composition and creating pipes. The `>>` operator is part of it, but you also have beautiful pieces of handy syntax like `#then`, `#yield_self` and `===`.
Bulletin: UI component for javascript developers
Tags: javascript, mobile, design, typescript
Published: 2020-06-11 15:08:48

### Bulletin component 
It's a very useful draggable pop-up for mobile developers
Bulletins was firstly demonstrated on iOS, as simple airpods information popup (about 3 years ago), but the good and stable javascript implementation for javascript developers still doesn't exist.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/u9zjkda1y4dkp3qzrlii.jpg)

### In this quick tutorial
I will introduce how to create bulletin component easy and how to start use thats cute pop-ups in your application.
Especially, it must be used for alerts on hybrid applications `cordova/ionic/react`.

### Getting started
Component will based on `cupertino-pane` package. Package can be used with any JavaScript framework. It is also supports TypeScript out of the box. 

#### Install package into your `node_modules`
```bash
npm install cupertino-pane --save
```
#### Or use from CDN
```html
<script src="https://unpkg.com/cupertino-pane/dist/cupertino-pane.min.js"></script>
```
#### Design your html markup for bulletin
```html
<body>
  ...
  <div class="bulletin">
    <h1>Welcome to pet board!</h1>
    <div class="emoji">😻</div>
    <p>
     Explore and choose a pet that you wanna play with.
    </p>
    <button onclick="dismiss();">
     Continue
    </button>
  </div>
</body>
```
#### Stylize default pane in bulletin style
```css
.pane {
  border-radius: 30px !important;
  width: calc(100% - 16px) !important;
  height: auto !important;
  margin: auto;
  left: 0;
  right: 0;
}
```
#### Initialize bulletin component
```js
var bulletin = new CupertinoPane('ion-bulletin', {  
  initialBreak: 'top',
  breaks: {
    top: { enabled: true, height: 348},
    middle: { enabled: false},
    bottom: { enabled: false},
  },
  backdrop: true,
  topperOverflow: false,
  backdropOpacity: 0.8,
  bottomClose: true,
  buttonClose: false,
  showDraggable: false,
  bottomOffset: 8,
  onBackdropTap: () => bulletin.destroy({animate: true})
});

function present() { 
  bulletin.present({animate: true});
}

function dismiss() { 
  bulletin.destroy({animate: true});
}
```
As you can see by options, pane will have only topper position.
Bottom position will auto-destroy the pane by the option `bottomClose: true`. 
And the bottom offset `bottomOffset: 8` it is a margin from screen bottom to pane bottom bound. 
Overflow needs to be disabled for better experience `topperOverflow: false`.

#### Appendix 1
If you are using CDN and pure JS, probably you can catch exports error with modules environment. Solve it with additional line right above your import:
```html
<script>var exports = {"__esModule": true};</script>
<script src="https://unpkg.com/cupertino-pane/dist/cupertino-pane.min.js"></script>
```

### Results and demonstration
![Demo](https://github.com/roman-rr/cupertino-pane/blob/master/docs/images/bulletin.gif?raw=true)
Live demo with Ionic framework are [here](https://output.jsbin.com/fonavuy)
Sources are [here](https://github.com/roman-rr/cupertino-pane/blob/master/playground/bulletin.html)
TAKE THAT BOLD STEP !!!
Tags: beginners
Published: 2020-06-11 14:46:41

IMAGE BY [Lennart Wittstock](https://www.pexels.com/@lennart-wittstock-94105?utm_content=attributionCopyText&utm_medium=referral&utm_source=pexels) ON [PEXELS](https://www.pexels.com/)

Hello you, yes you. If you've come across this post as a beginner in programming, then you're so lucky.
I just have few tips ,actually just one for you.

## TAKE THAT BOLD STEP 

Every top developer you know out there started just the same way you're doing right now.
You're great and you're going to be at the top just 
    
#### BE CONSISTENT

Find out what works best for you, PDFs, Videos, or Documentations . 
Find out what time your brain accepts and understands new things then capitalize on it.
For my Nigerian friends, Data and Light might be a problem, you could do night subscription to download those heavy videos, watch / monitor when EEDC, KEDC, AEDC ( Electricity companies in Nigeria ) brings your light and schedule your coding.
Also don't forget 

#### TO GO FAST, WALK ALONE...TO GO FAR,  WALK IN GROUP

When you learn alone, you tend to skip most things you don't understand, and probably finish the Tutorials... But, when you learn alongside others, your challenges met could be easily solved, you get to learn new ways of solving those problems.

Oh, I said one thing right 😅, Take the first seriously and meditate on others.
Cheers !!!!
Thoughts on Coding Tests
Tags: discuss
Published: 2020-06-11 14:33:55

I've been running around the world of remote job postings and applying to some for context on what I am working on and what to do next.

I'm finding that most are now requiring online coding exams which is something that was not around 5 or so years ago.  I've really had mixed feelings about them - some seem to have great tests that I actually feel like test whether or not you are a fake developer but others are just totally off-base and do not test anything worthwhile.

What do you all think? Good? Bad?
PHP vs NODE vs DENO ? 
Published: 2020-06-11 14:11:56

Hello 👋 👋
(NB : I am not fluent in english but this community is filled with the persons who speak english than those who speak other language and that is why I have chosen to write my post in english. So please forgive me for the wrong things I have done due to my lack in english) 

I have made a huge progress in learning PHP, MySQL and Javascript since I started learning them nearly 3 years ago. If really I like coding, the truth is also that I would like to code in a language that will allow me to get a job. I saw a lot of posts where the programming language I'm good in, PHP in that case, where badly talk about. When I thought I should switch to Node.js, this is Deno that came out from nowhere. I'm now so confused that I wonder if I will be a good programmer.I need your advices so I can get the right way. Do I need to switch to any other backend language from PHP? Is it a wise choice to stay with my PHP? THANKS
Why is an external service via internet, e.g. web-push with GCM needed for service workers to push notifications?
Tags: serviceworkers, pwa, pushnotifcation, vpn
Published: 2020-06-11 14:10:39

I am doing this tutorial, but it doesn't work on the VPN of my company:

https://pusher.com/tutorials/push-notifications-node-service-workers

I am writing an application with a restrictive internet policy here. Apparently no external service like GCM can be used. However, for push notification web-push is used. Web-push uses GCM to send notification.

It seems like my company network doesn't allow GCM to send messages. I wonder why an external service like GCM is needed anyway. Isn't the cool thing about service workers that you can use them offline? What am I missing?
ສະບາຍດີ ລຸງໂອ້ດ ໃນDev.to 
Published: 2020-06-11 14:08:27

ສະບາຍດີບໍ່ມີຫຍັງຫລາຍນີ້ເປັນການທັກທາຍຊື່ໆ
Create and Edit animated GIFs for short tutorials
Tags: gif, video, recording, tutorial
Published: 2020-06-11 14:04:06

Most tutorials nowadays contain many visuals to grab the reader's attention and also explain better how to solve different problems. I found that GIFs are a very good tool when presenting GUIs. Therefore, I decided to show you how to create and edit GIF files that can be used along with text to create faster and better demos. ScreenToVideo can record, edit and export to many video file formats, including animated GIFs so this is the tool I am going to use. 

## Download ScreenToVideo
Just go to [**screentovideo.com**](screentovideo.com) and download the free trial. The installation should be straightforward and take less than a couple of minutes.

![Download ScreenToVideo](https://dev-to-uploads.s3.amazonaws.com/i/x6xxo5tyyc4ex6gt7qxa.gif)

## Record your screen
Start recording your screen by clicking on the home button. We will use a small preset of 426x240 and add a timer of 3 seconds. After the timer goes off, you can begin your presentation. Don't worry if you clicked on the wrong button - you can edit the video afterwards.

![Record your screen](https://dev-to-uploads.s3.amazonaws.com/i/uzvg6nnadsxkwu2kvub3.gif)

I recorded a short period of me playing the Dinosaur game from Google Chrome that appears automatically when no internet connection is available. It took some time to reach the moment when birds are spawned so I should cut the boring part. 

## Cut and delete the middle part
Cutting a video in multiple pieces can be done by right-clicking on the timeline component and choosing the **Split** (CTRL + T) option from the menu. Alternatively, you can add a **freeze-frame** (CTRL + F).

![Cut](https://dev-to-uploads.s3.amazonaws.com/i/p595lgthhp6m2h2qe2ak.gif)

Now cut the video once again at the end and **delete** the unwanted part.

![Delete](https://dev-to-uploads.s3.amazonaws.com/i/rbefhemukcgcztbz8n5q.gif)

## Add some text
Enhancing your GIFs with text can help the viewer follow some simple instruction. I chose a dashed balloon border pointing to the little dinosaur.

![Add text](https://dev-to-uploads.s3.amazonaws.com/i/6llxgsgappx3izowwjaf.gif)

## Add a sketch animation

Sketch animations are a good way to focus the attention on the most important spots. I used an arrow at the end of the GIF.

![Sketch animation](https://dev-to-uploads.s3.amazonaws.com/i/qx8zmmb7f73sbcp7i9iu.gif)

## Export

Finally, we can export our first GIF. A balance between frame rate and file size should be found. For us, the default options are enough.

![Export](https://dev-to-uploads.s3.amazonaws.com/i/dl1oytkq7ti95wjkdj61.gif)


## Conclusions
Congratulations! You should now start creating your own animated GIFs for your tutorials. Keep in mind that you can use [**ScreenToVideo**](screentovideo.com) for longer videos that include animations, interactivity and much more. I hope you enjoyed this short demo! Please share your thought (and your own gifs).

![Dinosaur Game](https://dev-to-uploads.s3.amazonaws.com/i/yoiegb38z404z72l3djj.gif)