teleren/devto huggingface dataset:
Develop GraphQL Web APIs using Apollo Server
Tags: graphql, node, apolloserver
Published: 2019-08-24 09:46:39

---
title: Develop GraphQL Web APIs using Apollo Server
published: true
description: GraphQL Apollo Server example
tags: graphql, nodejs, apolloserver
---

I've been learning GraphQL since it is more flexible than REST APIs. GraphQL has been initially developed and used by Facebook in 2012. In 2018, the GraphQL project was moved to the GraphQL foundation (under the Linux Foundation).

Compared to REST, I guess one obvious and major advantage which I've really loved so far is the ability to only retrieve data fields you need for your application. There are a few interesting frameworks you can start with when building your GraphQL APIs. 

If you want to build from scratch, you can choose from these 3 server frameworks that I know of.

Apollo Server https://apollographql.com/docs/apollo-server
Express GraphQL Server https://github.com/graphql/express-graphql
Prisma https://www.prisma.io/with-graphql

I've chosen Apollo for this example since Apollo is one of the pioneers in the GraphQL space.  Also, the code is very simple. In this example, we'll be using NodeJS. I am using node v11.4.0 for this example. So here it goes...

Below is the source code in Glitch. Feel free to remix! :) 
{% glitch donvito-graphql-server-apollo-example file=index.js %}

All source code for this example is available in my github repo.
{% github donvito/graphql-server-apollo-example %}

Full blog post here
http://www.melvinvivas.com/graphql-api-using-apollo-server-example
MEN Stack Template with Local Authentication Plugged in!
Tags: webdev, javascript, beginners, node
Published: 2019-08-24 06:59:52

I created a template in MEN (Mongodb, Express, Node) Stack to get off the ground quickly with your next project. 

Stuff you get in the box:
1. Webpack
2. Sass
3. Eslint
4. Passport
5. Bulma
6. ejs

Fork it [here](https://github.com/godcrampy/Express-Local-Auth-Template) 😄
LeetCode "12. Integer to Roman"
Tags: leetcode, python
Published: 2019-08-24 06:59:11

---
title: LeetCode "12. Integer to Roman"
published: true
description: Solution of LeetCode "12. Integer to Roman"
tags: [leetcode, python]
---

[12. Integer to Roman](https://leetcode.com/problems/integer-to-roman/)

```python
class Solution:
    def intToRoman(self, num: int) -> str:

        if num == 0:
            return ''
        
        symbols = [('I', 'V'), ('X', 'L'), ('C', 'D'), ('M')]
        roman = ''        
        numOfDigit = 0
        
        while num > 0:
            c = ''
            digit = num % 10
                            
            if digit == 4:
                c = symbols[numOfDigit][0] + symbols[numOfDigit][1]
            elif digit == 9:
                c = symbols[numOfDigit][0] + symbols[numOfDigit + 1][0]
            else:
                if digit > 4:
                    c = symbols[numOfDigit][1]
                for i in range(digit % 5):
                    c += symbols[numOfDigit][0]

            # next digit
            num //= 10
            numOfDigit += 1
            
            roman = c + roman            
            
        return roman
```
What are your favorite open source projects?
Tags: discuss, opensource, javascript
Published: 2019-08-24 06:57:50

# Top Open Source Projects in 2019

According to GitHub, these were some of the top open source projects in the past year, based on the number of contributors. It's amazing to realize how many people are actively contributing to all these projects around the world; the VSCode repository has nearly 200 open pull requests at the moment!  

1.	[Microsoft/vscode](https://github.com/microsoft/vscode/)	– 19K 
2.	[facebook/react-native](https://github.com/facebook/react-native)	– 10K
3.	[tensorflow/tensorflow](https://github.com/tensorflow/tensorflow)	– 9.3K
4.	[angular/angular-cli](https://github.com/angular/angular-cli)	– 8.8K
5.	[MicrosoftDocs/azure-docs](https://github.com/MicrosoftDocs/azure-docs)	– 7.8K
6.	[angular/angular](https://github.com/angular/angular)	– 7.6K
7.	[ansible/ansible](https://github.com/ansible/ansible)	– 7.5K
8.	[kubernetes/kubernetes](https://github.com/kubernetes/kubernetes)	– 6.5K

## What are *your* favorite open source projects?
What projects deserve more attention or contributors? Let everyone know in the comments below!


*Stay in the loop! Follow me for more posts about software, tech, and more. Check out [Exponent](https://www.tryexponent.com/software-engineering?src=devto) for help with software engineering interviews.*
Debugging Saturday: React is not cooperating with me
Tags: testing, graphql, gatsby, react
Published: 2019-08-24 05:06:33

Hello! This post originally started as a dummy post to test how the DEV.to API communicates with my website. Well, since I'm here anyway, I might as well describe what I'm trying to accomplish.

## The Problem 👻

I'm using @emasuriano's amazing [Mate starter](https://www.gatsbyjs.org/starters/EmaSuriano/gatsby-starter-mate/) for GatsbyJS. I'm trying to use DEV.to posts instead of Medium posts. I have successfully changed the source plugin to `gatsby-source-dev` and my DEV.to posts have been successfully grabbed by GraphQL, but I'm trying to figure out how to render the actual elements on my website.

My site successfully outputs the cards - one for each blog post because I have two posts so far - but the elements are returned as 'undefined':

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/c19sn8us9mgy9wzig2e3.PNG)

## An attempt at a solution 🤔

I really think it has something to do with the `render` function after my GraphQL query. Hopefully I get this fixed by the end of the week - I would like to have a nice portfolio website out as soon as I can. Who doesn't?

## What I learned 🎓

I discovered what the ES6 spread function is. It's a pretty nifty tool - if we were using ES6 at work, I would definitely use it. 

I have also learned about lambda functions. When I was trying to find out what the double => arrow => function means, I was visited by a ghost of my undergrad years - function currying. I am so glad I have learned all about it in school; otherwise, I would have been much more confused.

## Status

This is my first time debugging a React web app. Talk about a trial by fire 🔥! The solution might come as a very simple one for some, but I'm still trying to unravel all the abstractions on this code, and I'm already on my second Starbucks drink.  

I should probably get dinner. My head hurts.
Recommend a Simple Kafka UI Tool
Tags: kafka
Published: 2019-08-24 03:55:14

---
title: Recommend a Simple Kafka UI Tool
published: true
description: 
tags: Kafka
---

I'm looking for recommendations for a simple UI -based tool that will help 
* viewing lists of Kafka topics, 
* viewing Consumer groups for each topics
* viewing messages for a topic
* post test messages to a topic

The audience would be developers who are using Kafka and could use a simple tool within their test environments.

I found a couple of tools:
* [Kafka Tool](http://www.kafkatool.com/features.html)
* [Yahoo Kafka-manager](https://github.com/yahoo/kafka-manager)
Also, based on replies here and elsewhere:
* Confluent Control Center (if using Confluent Kafka)
* [Kafdrop](https://github.com/obsidiandynamics/kafdrop) HT: @ekoutanov
* [Kadeck](https://www.xeotek.com/kadeck/) HT: @benjaminbuick_19


I'm looking for recommendations of more tools
Automatically counting and numbering HTML elements with CSS counters
Tags: css, webdev, beginners
Published: 2019-08-24 02:35:42

Say you had an unknown number of `<div>` elements and (for some reason) you wanted to count them and number each other them automatically - how would you do it? If you're like me, your first thought would be to use some kind of Javascript to play around with the DOM. What if I told you (insert Morpheus voice here) you can do it with CSS?

## How to use CSS counters

Getting counters working requires three steps:
* Initialize the counter with `counter-reset`
* Increment the counter with `counter-increment`
* Show the current counter value with `counter()`

It's pretty simple, really. The Pen below demonstrates how to count and number three `<div>` elements.

{% codepen https://codepen.io/wang0nya/pen/voRyaJ %}

## Where would this be useful?

I discovered CSS counters while looking for a way to number images on my blog posts. That's one place it would really come in handy. Here's a quick example:

{% codepen https://codepen.io/wang0nya/pen/LwdxZz %}
Python - Difference Between 'is' and '=='
Tags: python, foundation
Published: 2019-12-10 15:43:41

---
title: Python - Difference Between 'is' and '=='
published: true
tags: python, foundation
canonical_url: https://tech.serhatteker.com/post/2019-08/python-difference-between-is-and-equal/
---

In python the `is` operator compares if two variables point to the same object. The `==` operator checks the "values" of the variables are equal.


```py
#!/usr/bin/env python
# -*- coding: utf-8 -*-

a = [1, 2, 3]
b = [1, 2, 3]
c = a

if (a == b):
    print("True")
else:
    print("False")

if (a is b):
    print("True")
else:
    print("False")

if (a == c):
    print("True")
else:
    print("False")

if (a is c):
    print("True")
else:
    print("False")
```

Or with more "pythonic" and clearer syntax:

```py
#!/usr/bin/env python
# -*- coding: utf-8 -*-

a = [1, 2, 3]
b = [1, 2, 3]
c = a

print(a == b)
print(a is b)
print(a == c)
print(a is c)
```

The output will be:

```
True
False
True
True
```

For detail, you can check memory adresses of these objects to see whether they are same or not:

```py
print(hex(id(a)))
print(hex(id(b)))
print(hex(id(c)))
```

Output:

```
0x7ff7b59d8488
0x7ff7b59d84c8
0x7ff7b59d8488
```

All done!
Angular Ivy: Overcome the first obstacles
Tags: angular, ivy
Published: 2019-08-23 22:17:11

This is a list of Ivy-related issues that occured to me, while trying out Ivy on an already existing Angular (7) App, after upgrading to `9.0.0-next.2`. 

After the initial needed changes of [upgrade notes](https://update.angular.io/#7.0:9.0) I stumbled upon these issues:

## 1. `Unable to write a reference to {X} from {Y}`
I had a library (with using a path-alias) which exported multiple modules from directories (lower than `src/lib/{name}/`) and on the first ivy-try this issue occurred.

At first I tried to allow wildcard alias `@my/lib-name/subfolder` and export each subfolder with its own barrel. While that worked on one module, it had to be done on each sub-module. After some luck I found this:

### Solution :tada: 
Add `"rootDir": ".",` to the `"compilerOptions"` in your `{project-root}/tsconfig.json`. 

Source:
{% github https://github.com/angular/angular/issues/29361#issuecomment-511050660 %}

## 2. `Cannot combine @Input decorators with query decorators`
This was a weird issue (for me). Even after finding some posts on GitHub/Stackoverflow, the answers didn't really made sense (or I just didn't find the "right" ones. :smile:)

To figure it out, I added a breakpoint at the error to see what property-name is used in the argument call. Once found, I saw what I did wrong in my code.


I somehow had this in my component, don't know how I got there :smile: :

```ts
  @Input()
  @ContentChild('template', {static: true})
  itemTemplate: TemplateRef<ElementRef>;
```

### Solution :tada:

So if you have an `@Input()` *and* `@ContentChild()` (probably also `@ViewChild()`) .. choose one! :)



Thankfully those were the only ones I (yet) had. I'll continue to update this post, if I come across others.


If you also had any other weird issues, please comment. :)
Why Scratch is still a useful tool for developers
Tags: scratch, prototyping, computerscience, online
Published: 2019-08-23 21:43:41

If you’re a programmer, you’ve probably at one time heard of Scratch.  Scratch is a project run by the MIT Media Lab and Lifelong Kindergarten.  It consists of a web-based IDE that allows users to code by dragging blocks onto a canvas and connecting them.  If you’ve never heard of it, check it out at [https://scratch.mit.edu](https://scratch.mit.edu).  

The website is clearly geared toward a younger audience with its bright colors, large blocks, and its strictly-regulated online community.  However if you let it, it can still be a useful tool to develop programs.  Here are 3 reasons why Scratch is still useful to full-out developers.  

**#1: It’s easy to prototype**

When you’re designing a new product or program, you generally use a software such as Adobe XD to prototype your design.  But there’s a simpler (and freer) option: Scratch.  While Scratch may not include the handy default objects that XD and other prototyping softwares do, its 3.0 update now supports full SVG uploads, so you can easily upload assets.  Once you’ve uploaded everything you need to the editor, you can quickly drag some blocks and get a full prototype up-and-running, and if you want to go the extra mile, Scratch has advanced operator and variable functions so that you can even build the full program!  Why would you want to do that?  Simple.  Scratch is a very logical programming language.  Once you’ve coded the program in Scratch, it’ll give you a clear idea on how the code could be structured.

**#2: You can test functions**

If you want to logically build your own functions without having to reload, compile, and all those other annoying steps as you go, just use Scratch.  Drag the blocks, build the functions, and test immediately.  Simple and easy.

**#3: It’s useful for inspiration**

You’d probably be surprised at the projects that the online Scratch community publishes.  Once you get past all the buggy “Hello World”s and immature memes, there are some extremely well thought out programs.  Scratchers create some [pretty elaborate stuff](https://scratch.mit.edu/users/ampara/) when they put their minds to it.  I know from experience that some projects can put actual programmers to shame.  So maybe you’ll find some inspiration, or maybe even a project that could be a useful program.  Just make sure to give credit 😉.  

**Bonus: Interaction with the community**

Scratch is all about learning.  If you decide to start using it, make sure you interact with the community!  Lots of Scratchers want to be real programmers one day, so by encouragement, advice, and aid, you can fuel the next generation of developers.
4 Great initiatives to find open source projects
Tags: opensource, productivity, beginners, github
Published: 2019-08-23 21:27:37

Hello, recently I wanted search more projects to practice python and javascript, so here share you some resources to find great projects to collaborate and improve our tech skills :)  : 

CodeTriage (https://www.codetriage.com)
You can take one issue from your favorite repo per day to help you understand and learn more, and stay involved with the code you rely on.
 
issuehub.io (http://issuehub.io)
You can search issue labels to find the right project you want to help.

Pull Request Roulette (http://www.pullrequestroulette.com) 
Find open source pull requests that need a reviewer before merging.

Contrib (https://gauger.io/contrib)
Browse open source projects with issues for beginners.

Good luck :)
Jenkins Interview Questions for DevOps Engineer
Tags: jenkins, devops, interview
Published: 2019-08-23 21:17:37

Jenkins is a Continuous Integration (CI) server or tool which is written in Java.
 
It provides Continuous Integration services for software development, which can be started via command line or web application server. 

Jenkins is free software to download and install. Following are some Jenkins interview questions for DevOps engineer which will help you to crack Jenkins Job Interview.

###Q:- What is Jenkins?
Jenkins is an open-source Continuous Integration and Continuous Delivery Tool.

Jenkins is a self-contained, open-source automation server which can be used to automate all sorts of tasks related to building, testing, and delivering or deploying software.

Jenkins can be installed through native system packages, Docker, or even run standalone by any machine with a Java Runtime Environment (JRE) installed.

###Q:- What is Continuous Integration (CI)?
Continuous Integration (CI) is a development practice where developers integrate code into a shared repository frequently, preferably several times a day. Each integration can then be verified by an automated build and automated tests.

###Q:- What are the benefits of Jenkins?
Open-Source: It is an open-source tool and has community support.

Installation: It is very easy to install.

Plugins: It has a large number of plugins to ease your work.

Portable: It is built with Java so, it is portable to all the major platforms.

Version: One can configure Jenkins to pull code from a version control server like GitHub, BitBucket, etc.

[read more about jenkins](https://www.fullstacktutorials.com/interviews/jenkins-interview-questions-for-devops-engineer-56.html)
What’s an online community you really love?
Tags: discuss, weeklyretro, culture, reddit
Published: 2019-08-23 21:13:31

---
title: What’s an online community you really love?
published: true
description: whether it’s a subreddit, a slack, or even an old school discussion board, I’d like to know what you rely on
tags: discuss, weeklyretro, culture, reddit
---

Meetups are useful as long as you’re willing to go outside once a month, and work communities can be lovely until you change jobs, Twitter can be great but it’s impossible to recommend a good list of whom to follow; I’m curious what communities have been a great place for you to hang out as a developer through the changes in your career. Some of mine:

The [Wes Bos](wesbos.com) Slack 

- initially the first place I got help with, as Wes says it javahscreept (I’m sorry Wes I love you), I still go here from time to answser a few questions from new developers.

Stack Overflow 

- I know some people are into cool substacks but I still like following certain tags in plain old Stack Overflow

I’m curious if you have favorite:

* subreddits
* Slack(s)
* SubStacks
* discussion boards


Let me know in the comments!
Creating A Portfolio Site
Tags: beginners
Published: 2019-08-23 20:21:06

So Week 11 of theClubhou.se Coding Bootcamp. I was excited about designing and learning to use new tools to help get across my vision(HA!). We looked at resources for three different design styles: [Brutalist](https://brutalist-web.design), [Flat](https://designmodo.com/flat-design-principles), and [Material](https://material.io). We started with making button designs using [Figma](www.Figma.com). Relatively easy enough but then when it came to adding a text element (which went through too many iterations for three sentences) and a header(thankfully it was just my first and last name) it became abundantly clear that layout is hard. We made three more designs for all the components using each of the three designs. All looked pretty blah, if I'm being honest (not the designs fault but the designer). Then we were told we could use any design elements we wanted but had to write out a style guide for those choices. Well hell! I don't know why I wanted to use a certain  rule/formatting/style over any other. How was I going to have any of that make sense with words? Then had a little one on one psychological profile meeting with the instructor to try to get at the root of what would communicate me on the page. I'm too eclectic to really nail down anything, except I like grey and I wanted a brush stroke font for my name as the header. Then the TA suggested using coolors.co to randomly select a color palette that could help me figure out where to go. So now I've got these five colors to use. They are the colors and no questions from the instructor are changing 'em! *Update on those colors, come to find out one of my colors isn't very Accessible friendly so I'm gonna have to change that one.* Since Google fonts was failing me, I created an SVG in Figma using the pencil tool and did my signature, header complete for now. Hope to find a free, open source tool to use a different brush to get the effect I'm actually looking for. I ended up doing a lot of try this px Ctrl-S, nope what about this, with the live server in Visual Studio Code to see my changes and hope my "vision" would come to life. Now realize I should've just been using [CodePen](https://codepen.io) to see all the changes, would've saved me all that Ctrl-S. Well anyway. I've got four pages and a .css. What to do next, publish it? How the instructor wants us to do that is TBD.
React Dropdown Select Tutorial with React-select
Tags: react, javascript, reactselect
Published: 2020-02-01 19:21:07

---
title: React Dropdown Select Tutorial with React-select
published: true
tags: React JS,JavaScript,react,react-select
canonical_url: https://www.positronx.io/react-dropdown-select-tutorial-with-react-select/
---

The post [React Dropdown Select Tutorial with React-select](https://www.positronx.io/react-dropdown-select-tutorial-with-react-select/) appeared first on [positronX.io](https://www.positronx.io).

**React-Select** is profoundly easy to use dropdown library exclusively built for React. The react-select library offers powerful **multi-select, autocomplete, and AJAX support** without any hassle. React-select’s main power lies in its dynamic functionalities such as search, filter, async loading, animated component, easy accessibility, and faster loading time.
### Why Should We Use React-select in React?

[Click here to read more](https://www.positronx.io/react-dropdown-select-tutorial-with-react-select/)