teleren/devto huggingface dataset:
API using GraphQL and Node.js
Tags: graphql, opensource, docker, typescript
Published: 2019-11-27 03:50:39

---
title: API using GraphQL and Node.js
published: true
description: 
tags: graphql, opensource, docker, typescript
---

This article is for people who are interested in learning to write optimized code using **GraphQL** with unit testing using **mocha and chai**.

Before we start, we need to define the functionality of our API. The application will be a simple todo app. It will create a user in a database who will be able to create, get and delete todos. If you don’t understand the code or get stuck somewhere, you can check out the code from my github repository linked at the end of the series of this article.

# Links

- [Article 1](https://medium.com/programming-society-gazette/part-1-api-using-graphql-and-node-js-3423a6004b96)

- [Article 2](https://medium.com/programming-society-gazette/part-2-api-using-graphql-and-node-js-ffee1549b2b7)

- [Article 3](https://medium.com/programming-society-gazette/part-3-api-using-graphql-and-node-js-f1c47cb48c9e)

# Support

I wrote this series of articles by using my free time. A little motivation and support help me a lot. If you like this nifty hack you can support me by doing any (or all 😉 ) of the following:

- Follow me on **Github(knrt10)** for more such projects.
- ⭐️ Star it on Github and make it trend so that other people can know about my project.
- 👏 Clap for this series of articles on Medium.
- Tweet about it.
- Share this on Facebook.
pipm: pip install to local-packages and pip run
Tags: python, pip
Published: 2019-11-27 01:55:38

## Updates
Look like there was already previous effort on this, there's even PEP being written in form of [PEP582]! But [discussion] on it seem to stop around May this year, look like everyone seem have gave up :(

>Aside: I don't know there's Discourse forum at discuss.python.org!

Also, other than the PEP's implementation as branch in CPython, there's also python implementation called [pythonloc] by [Chad Smith][chad]. Turn out he's also the author of pipx, tools that I have started to use recently.

********** #### ***********

Following [previous post][1], I wrote a simple wrapper to commands used in the write up. I called it `pipm`, as a play to word `npm`.

This little pipm tools allow me to do something like:-

```
pipm install django
pipm run django startproject mysite .
pipm run python manage.py runserver
```

I don't know how far this little tool can go. Past experience has shown that there will be lot of edge cases that can't be covered and result in what we can call leaky abstractions.

But at the same time, pip has evolved a lot and it surprised me that this actually seem to work. Oh wait, I haven't try yet with editable packages, sigh ...

Btw, the repo is here - https://github.com/k4ml/pipm. Feel free to try and give feedback.

[1]:https://dev.to/k4ml/python-local-packages-a-la-npm-nodemodules-3240
[PEP582]:https://www.python.org/dev/peps/pep-0582/
[discussion]:https://discuss.python.org/t/pep-582-python-local-packages-directory/963/95
[pythonloc]:https://medium.com/@grassfedcode/goodbye-virtual-environments-b9f8115bc2b6
[chad]:https://twitter.com/grassfedcode
How to write a code on dev.to
Tags: webdev, writing, codenewbie
Published: 2019-11-27 03:10:26

It's a basic how to write code like this

javascript

```javascript
const showName = (name) => {
  console.log(`Hello ${name}`)
}
```

and How to do like that ?

just an simple code, write like this

<pre>
```javascript
function data(){
  echo "make me echo";
}
```
</pre>

using another language ? just change a 
<pre> 
```(language name) 
code 
``` 
</pre>

example PHP

```php
<?php echo "i am php language" ?>
```
example java

```java
package Myjava
public class Myjava{
  public static void main(String[] args){
     System.out.println("Hello dev.to");
  }
}

```

using the literal template, the key is on left number 1 button

how to write like that ? just add pre syntax of html before literal template

Thank you for reading this post

write with ❤
AutoHotkey Beginner Tip #1: Assignment Vs Expression Operator Usage
Tags: autohotkey, beginners, tips, expressions
Published: 2019-11-27 00:50:13

Over the years I have helped many people with learning/debugging AutoHotkey in forums and one of the most common areas where people have issues (confusion) while learning AutoHotkey is with the difference between the assignment & expression operators '=' & ":=" respectively. Both can assign value, but the former is purely assignment; the latter is used for any expression (code to be executed/evaluated).

## Assigning value with the assignment '=' operator

- varName = Any unquoted string.
- varName = %anotherVarName%

## Assigning value with the expression ":=" operator

- varName := "Any quoted string."
- varName := anotherVarName
- varName := !anotherVarName?0:255
- varName := !anotherVarName?"Yes":"No"
- varName := ((anotherVarName == "whatImTestingFor")?"Value exists":"Value doesn't exist")

## Differences

- =
  - Doesn't use quotation marks for strings.
  - Variable names must be wrapped with %%.

- :=
  - Needs quotation marks for strings.
  - Variable names don't need to be wrapped.
  - Can contain any possible expression operation in the language.

<a name="opinion"></a>

## Opinion

In my opinion there's only one use for '=' ever. :

 - '=' can be used to strip leading and trailing spaces from variables
    
    - E.g. varName := " String with spaces "
    -      varName = %varName%
    -      Result: varName == "String with spaces"

Everything else can always be done with ':='. That, of course, is your preference.

### My Disclaimer

This is my first post here & I'm very aware of the hate for AHK by many so I will write my disclaimer here once.

Even though I know quite a few other languages I will always be an AutoHotkey advocate.

Many people do not like the chaotic syntax of AHK, but once you understand it & create your own consistent style it's actually quite nice (IMO?). I am aware of it's inadequecies in certain areas, but like many other languages it is still useful for many things (We can even plug in to UWP with Selenium now :D).
Day 42 : Work Everyday
Tags: hiphop, code, coding, lifelongdev
Published: 2019-11-27 00:00:11

_liner notes_:
- Professional : Pretty good day. Had my weekly meeting with my manager. Went over the list that I gave him of applications I would like to make. There's a few he things will make for good projects. Ran some ideas for talks in the new year. He liked them. I'm going to write up and submit a post for my Ninjas vs Pirates voting app to put up on the blog.

- Personal : Going to see if I can get the info page for my side project to load using Svelte's transitions. Hoping to go through some tracks for this week's radio show.

![Wooden dock with ships on a lake surrounded by mountains in Pragser Wildsee, Italy](https://thepracticaldev.s3.amazonaws.com/i/pkzyb4ubmw6d8eu38wa6.jpg)

Going to keep this short. Want to get some more work done on my side project. There's a couple of sites that I would like to have launched in the new year. Got to do some work everyday, even if it's a little bit.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube LwgwI_Inglo %}
Adding Custom Content To Akveo’s @nebular/theme 4.5.0 Sidebar Component
Tags: angular, webdev, typescript
Published: 2019-11-27 19:25:21

---
title: Adding Custom Content To Akveo’s @nebular/theme 4.5.0 Sidebar Component
published: true
date: 2019-11-27 00:00:00 UTC
tags: Angular,webdev,typescript
cover_image: https://www.leonelngande.com/images/uploads/akveo-nebular.jpg
canonical_url: https://www.leonelngande.com/adding-custom-content-to-akveos-nebular-theme-4-5-0-sidebar-component/
---

So I've been working with Akveo's [Nebular UI Kit](https://akveo.github.io/nebular/) for a while now and it's been a real issue adding custom content to `nb-sidebar`.

Today, I had a look at the component's source code on [Github](https://github.com/akveo/nebular/tree/master/src/framework/theme/components/sidebar) and found out you can basically project anything into it, specifically into `nb-sidebar > div.main-container > div.scrollable` .

```typescript
@Component({
  selector: 'nb-sidebar',
  styleUrls: ['./sidebar.component.scss'],
  template: `
    <div class="main-container"
         [class.main-container-fixed]="containerFixedValue">
      <ng-content select="nb-sidebar-header"></ng-content>
      <div class="scrollable" (click)="onClick($event)">
        <ng-content></ng-content>
      </div>
      <ng-content select="nb-sidebar-footer"></ng-content>
    </div>
  `,
})
```

Full source code [here](https://github.com/akveo/nebular/blob/master/src/framework/theme/components/sidebar/sidebar.component.ts).

Notice the sidebar component projects `nb-sidebar-header` and `nb-sidebar-footer` into dedicated containers, and all other content into `div.scrollable`.

What this means is any custom content you put into `<nb-sidebar>...</nb-sidebar>` will be projected into `div.scrollable`. For example:

```html
<nb-layout windowMode>

  <nb-layout-header fixed>
    <xc-header></xc-header>
  </nb-layout-header>


  <nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive>

    <ng-container *ngIf="menu$ | async; let menu">
      <nb-menu [items]="menu"></nb-menu>
    </ng-container>

    <!--
      -- Found out I can just project any content into nb-sidebar template's .scrollable div.
      -- So decided to add the footer here and style it well so it displays properly.
      -->
    <xc-footer></xc-footer>


  </nb-sidebar>


  <nb-layout-column>
    <router-outlet></router-outlet>
  </nb-layout-column>


</nb-layout>
```

Notice my `xc-footer` in the above sample. I was trying to add a footer to the sidebar but didn't want a "sticky footer" which is what nb-sidebar-footer offers. So I placed it below nb-menu and added css to push it well below `nb-menu`.

```css
nb-menu {
  /**
    * Assuming here the footer (xc-footer) is directly below nb-menu
    * Push the footer a good distance below the menu.
    */
  padding-bottom: 3.5rem;
}
```

So basically you can add any content to the sidebar and if need be, properly style it 🙂.
What kind of developer would Einstein have been?
Tags: discuss, watercooler, news, jokes
Published: 2019-11-26 23:54:36

For a bit of fun I was thinking what programming language would each of these notable people have learned as their primary language and why:

- Albert Einstein 

- Mary Shelley

- Muhammad Ali


Maybe we’ll even learn something about the people or the programming languages in the process.

But don’t take it too seriously.

Let me know what you think in the comments...

(I wanted to say some risqué ones, but decided to play it safe 😂, maybe you could be braver than me with your own ones)
Can Callback URLS Be Any URL?
Tags: discuss, react
Published: 2019-11-26 23:16:33

---
title: Can Callback URLS Be Any URL?
published: true
description: While learning from tutorials, there’s a key piece missing. 
cover_image: https://thepracticaldev.s3.amazonaws.com/i/qq6wkim6vg4oft2pnq33.jpeg
tags: Discuss, Beginner, React
---

I’m building 2 bots. One with Twilio and the other with Twitter. A lot of docs say to use a service like Heroku or ngrok for callback URLs, but one problem - they go to sleep and must be restated or on a paid tier for continuous use. 

Can I just make a page using one of my own domains or a firebase server as a callback?
Going Wildcat
Published: 2019-11-26 23:06:45

I recently graduated with a petroleum engineering degree from the University of Texas at Austin. I decided to do petroleum engineering for a couple of reasons. During high school, I liked math and science and felt that engineering would be a good way to challenge myself in college and as a career. Furthermore, my dad worked as a chemical engineer for an oil and gas company, and I felt like doing something similar as him but something different at the same time. 

![](https://media.giphy.com/media/l2YWF00ZX8wOs0p0s/giphy.gif)


By talking to industry professionals in college and having internships in IT related industries, I realized the need and potential of data science and analysis in an industry that is slow to adapt. I took some online courses through Coursera related to data analysis and found out that I really liked being able to make a computer recognize images through pixels. 

![](https://media.giphy.com/media/orUDTj9Q5TMzTdB892/giphy.gif)



The ability for data science to be used for a wide area of activities-- anywhere from deciding where to drill to financial models to sports analytics gives me an enormous potential to learn and pursue my interests. As technology and analysis becomes more important in the 21st century, I want to be a part of the ongoing change and potential of data science, which is why I want to learn more about it.  

![](https://media.giphy.com/media/UPYVzyd49BJcf6PqhH/giphy.gif)
I Published a package to control audio files in reactjs
Tags: react, javascript, npm
Published: 2019-11-26 22:44:08

---
title: I Published a package to control audio files in reactjs
published: true
description: A simple react component to play and control audio file built on html5 element.
tags: reactjs, javascript, npm
---

Hi all, I just published a package to control audio files in reactjs apps, Contributions are welcome.

Here's a package repo on github: https://github.com/zeyadetman/rc-player
5 HTML tags you should consider using more often
Tags: html
Published: 2019-11-26 22:42:37

When writing HTML developers often use common tags like `div`, `section`, `p`, `span` and that's ok.

But to give your markup more meaning (make it more **semantic**) I suggest you start using following tags more often. So instead of plain old `div`s and `span`s try:

## 1. `address`

Use this tag whenever you need to wrap the contact information or a contact address.

```html
<address>
  150 Deansgate,<br>
  Manchester M3 3EH,<br>
  United Kingdom
</address>
```
This tag may also include:
> any type of contact information that is needed, such as a physical address, URL, email address, phone number, social media handle, geographic coordinates, and so forth. - [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/address)

## 2. `del`

To mark the content that has been deleted from the document use [`del`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/del). This element comes with the default `strike-through` styling.

One of the most common uses for this element I found to be is displaying prices.

```html
<p>
  The item is sold out <del>19.95$</del>
</p>
```

Often this element can be seen along side its counterpart ...

## 3. `ins`

It is used to show that the content has been added to the document instead.

Again nice example with prices, [`ins`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ins) is the new price here:

```html
<p>
  The item is on sale only <ins>9.95$</ins> <del>19.95$</del>
</p>
```

## 4. `small`

This tag is used to define *side-comments and small print*. The contents of the [`small`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/small) tag is usually have smaller `font-size` style by default. One of the uses is to wrap copyright or legal text in the footer.

```html
<footer>
  <p>Yoursitename</p>
  <small>Copyright © 2019</small>
</footer>
```

## 5. `time`
Finally this tag is used to display specific time or date. Often [`time`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time) tag comes along with the `datetime` attribute which *indicates the time and/or date*.

Often is used to display published post date and time.

```html
<p>
  Published on <time datetime="2019-11-27T00:30">November 27, 2019</time>.
</p>
```
Azure-cli, active autocomplete in Zsh on Ubuntu.
Tags: azure, zsh, azurecli, az
Published: 2019-11-26 23:36:00

---
title: Azure-cli, active autocomplete in Zsh on Ubuntu.
published: true
date: 2019-11-26 22:35:18 UTC
tags: azure, zsh, azure-cli, az
canonical_url: https://gastaud.io/en/article/azure-cli-autocomplete/
---


Out of the box, Azure-cli doesn't have autocomplete activated in Zsh and Oh-My-Zsh framework doesn't have plugin available natively.

However, Azure-cli comes with an autocomplete script that should be located in `bash_completion.d` directory.

In my setup, using Ubuntu 18.04, I found the `azure-cli` script in `/etc/bash_completion.d/` directory.

Now we just need to load the autocomplete script inside our `~/.zshrc` with the following line:

```
source /etc/bash_completion.d/azure-cli
```

Save and reload your terminal. Done.

### Additional notes

* If you encounter an error when restarting, you may have to add that line before the script loading to ensure cross compatibility between bash and zsh script 

```
autoload -U +X bashcompinit && bashcompinit
```

* Looking at different blog post, you may find that the script is called `az`, not `azure-cli`.

* According to the directory I found it, the script was natively loaded if I use bash shell. If you use bash and doesn't have autocomplete activate, you probably have to search for `azure-cli` or `az` script and load it to your `~/.bashrc` file.
No Code/Visual Development links – November 26, 2019
Tags: nocode, visualdevelopment
Published: 2019-11-26 23:03:59

---
title: No Code/Visual Development links – November 26, 2019
published: true
date: 2019-11-26 22:21:39 UTC
tags: No Code, Visual Development
description: No Code/Visual Development links – November 26, 2019
published: true
canonical_url: https://maxkatz.org/2019/11/26/no-code-visual-development-links-november-26-2019/
---

## News

📖 [Microsoft wants anyone to be a developer, whether they code or not](https://qz.com/1740052/microsoft-shares-plan-to-make-anyone-a-software-developer/) – Microsoft shares plans to make anyone a builder and creator

📖 [‘Low-Code’ Becomes High Priority as Automation Demands Soar](https://www.wsj.com/articles/low-code-becomes-high-priority-as-automation-demands-soar-11573775663) – CIOs are embracing the use of No Code and Low Code tools to allow noncoders to build applications

📖 [Low-Code Platform Adoption Gets a Boost from Digital Transformation](https://thenewstack.io/low-code-platform-adoption-gets-a-boost-from-digital-transformation/) – use of low-code platforms has increased and will continue to do so in the near future despite negative feelings according to a survey

## Podcasts

🎧 [Webflow: No-Code with Vlad Magdalin](https://softwareengineeringdaily.com/2019/10/11/webflow-no-code-with-vlad-magdolin/) – Software Engineering Daily. Jeff interviews Vlad Magdalin, Co-founder and CEO at Webflow

🎧 [Episode 1: Building a Blog with No Code (Pt. 1)](https://visualdev.fm/episodes/episode-1-building-a-blog-with-no-code-pt-1) and [Episode 2: Building a Blog with No Code (Pt. 2)](https://visualdev.fm/episodes/episode-2-building-a-blog-with-no-code-pt2) – Visual Developer Podcast. Matt and Ben talk about how to build a blog with No Code tools

🎧 [Episode 3: An Interview with Lacey Kesler](https://visualdev.fm/episodes/episode-3-an-interview-with-lacey-kesler) – Visual Developer Podcast. Matt and Ben interview [Lacey Kesler](https://twitter.com/LaceyKesler), the founder of No Code Creators

## Video

📹 No Code Conf was held on December 13, 2019 in San Francisco. If you were not there, you can [watch all the wonderful talks](https://www.youtube.com/watch?list=PLPmnoMVpkxfhBwaihEVz0fPLI6OBjCdnE&v=2UCNVQmX9qs&feature=emb_title)

📹 [Create a Cryptocurrency Price Mobile App using Parabola and Glide](https://nocodehq.com/tutorial/1573218669696x933875289261342700) – Nocode HQ
DEV.to Widget now has a DARK Theme! and a pink theme and an ocean theme. See what's new in dev-widget v1.1.0 🌻🌑🌸
Tags: css, javascript, showdev, webdev
Published: 2019-11-26 22:07:01

So, a few months back I made an unofficial DEV.to Widget which lets you show off your articles on your website/blogs using just 2 lines of code! Today I finished writing and deploying a new minor version `v1.1.0` which introduces a new attribute, `data-theme`.

Before we go, Here's how new themes look like:
![DEV.to widget themes preview](https://thepracticaldev.s3.amazonaws.com/i/8a298ztjvsw97wd4a8ai.png)

# Usage
To add DEV widget to your website, All you have to do is copy-paste these two lines into your code.
```html
<dev-widget data-username="saurabhdaware" data-theme="pink"></dev-widget>

<!-- Place this before the end of body tag -->
<script src="https://unpkg.com/dev-widget@1.1.0/dist/card.component.min.mjs" type="module"></script>

```

and that's it! just replace your DEV.to username in `data-username`!

The new version lets you add `data-theme` attribute which has possible values of `default`, `pink`, `ocean`, `dark`.

The DEV Widget is also available as NPM module for frameworks and webpack,
`npm install --save dev-widget`
& 
`import 'dev-widget'`

# Codepen Demo:
{% codepen https://codepen.io/saurabhdaware/pen/NWWbOvv %}

# Links:

**GitHub:** https://github.com/saurabhdaware/DEV-widget
**NPM Registry:** https://npmjs.org/package/dev-widget
**Codepen:** https://codepen.io/saurabhdaware/pen/NWWbOvv
**v1.1.0 Changelogs:** https://github.com/saurabhdaware/DEV-widget/releases/tag/v1.1.0 

Thank you for reading 🌻 My favorite is the pink theme 🌸 which one did you like? let me know in comments :D

P.S. Now I have 10k Followers on DEV.to yay!!
How to use 'Suggest a Tweet' effectively
Tags: todayilearned
Published: 2019-11-26 22:03:16

Hopefully you already know this, but bloggers on the dev.to platform can submit a tweet suggestion to the folks at dev.to directly from the platform.  If dev.to like the tweet, they will post it up on the official thePracticalDev twitter feed.  Currently, thePracticalDev has 171.6k followers.  So it's a great way to increase your profile.

https://twitter.com/thePracticalDev/

You can access this directly from your dashboard via the _manage_ button.

But what makes a good 'tweet suggestion'?  I put this question to an extremely helpful member of the dev.to team.  So massive thanks to Michael for giving me these useful tips.

- They typically look for a good quote from an article, sometimes listing headings works well too, or just a brief summation of the post.
- The tweet can't be left blank.
- The tweet can't be a copy of the title.
- The tweet shouldn't have any #s or @mentions in it.
- Generally they're more likely to accept tweets for articles that are widely appealing (but make exceptions). 
- They're also not big on including wordings like "to learn more", "read more here", and other things that seem kind of like filler.

Armed with these tips, you should be able to increase the likelyhook that your article will be featured on the _thePracticalDev_ twitter feed.  Now this begs the question, will this article be featured?
How to Make a React Website
Tags: react, createreactapp, beginnerreact
Published: 2019-11-26 21:54:48

---
title: How to Make a React Website
published: true
description: Creating a React site is easy, just follow this video's steps.
tags: react.js, create-react-app, beginner react
---

Hey everyone, we had a member from our ReactJS Live groups on discord ask for a basic example on how to create a react site.  

In this video, we actually google "Building Your First React Website" and it brought us to a really great starter article, where we followed the directions. 

That post is here -> Much appreciation with full attribution! :) 
https://dev.to/nexttech/building-your-first-react-website-c5c

Watch the live created video here on our Youtube ReactJSLive Channel. 
Dont forget to smash that like button and subscribe!

{% youtube fCoX7pjKwe8 %} 

And, you can also join our ReactJS Live groups here at these links:

Facebook
https://facebook.com/groups/ReactJSLive

Discord Invite:
https://TinyURL.com/DiscordTech  

Thanks for checking out the video, and there will be a follow up video soon making the entire site with navigation, footer, and content! 

Cheers!