teleren/devto huggingface dataset:
A new low-code backend as a service to build GraphQL & REST APIs
Published: 2020-10-21 21:17:42

Hello everyone,

We've just launched our lowcode backend as a service for building GraphQL and REST APIs in seconds https://hypi.io/2020/10/20/announcing-hypis-public-beta2/

We built Hypi to take away the repetition and all that is dull from API service development. Hypi lets you integrate with other services easily and comes with a host of features including:

• CRUD GraphQL & REST APIs.
• API Playground.
• Authentication & Authorisation.
• Serverless functions.
• Webhooks.
• Realtime APIs.
• Event triggers.
• Simple but powerful query language for filtering.
• Pagination and so much more.

Your comments and feedback are highly appreciated.
CSS Halloween Faces: Ghoul
Tags: css, wip, frontend
Published: 2020-10-21 20:41:21

Here is a Ghoul I made while I was trying to build a skull. 

![Ghoul with pale skin red eyes and share teeth.](https://dev-to-uploads.s3.amazonaws.com/i/x1vv8orcj2u7xwnkhb91.jpg)

The eyes are similar to the ones from my earlier [alien post](https://dev.to/jarvisscript/css-alien-face-wip-38ig). I just made the pupils and catchlights circular. By making height and width equal creating a square then adding a `border-radius:  100%`. 

HTML
```HTML
	<div class="minifig_face">
	<div class="eyes_pair">
		<div class="eye_socket">
			<div class="eyes">			
				<div class="pupil">
					<div class="catchlight"></div>
				</div>
			</div>
			<div class="eyes">
				<div class="pupil">
					<div class="catchlight">
				</div>
			</div>
		 	</div>
		</div>				
	</div>

```

CSS
```CSS
.pupil {
	width: 50px;
	height: 50px;
	margin-top: 50px;
	background: red;
	border-radius: 100%;
	display: flex;
	justify-content: center;
	position: relative;
}

.catchlight {
	width: 4px;
	height: 4px;
	margin-top: 25px;
	background: rgb(26 23 23);
	border-radius: 100%;
	display: flex;
	justify-content: center;
} 
```
The mouth is the same oval shape as the alien. I made the fangs long but used `overflow: hidden` to hide the roots of the teeth.

```CSS
.mouth {
	width: 200px;
	height: 80px;
	background: rgb(51 51 51);
	margin-top: 90px;
	border-radius: 100px;
	border: 4px solid black;
	display: flex;
	justify-content: space-around;
	align-items: center;
	position: relative;
	overflow: hidden;
}

.fangs {
	width: 5px;
	height: 65px;
	margin-top: -50px;
	background: #fff;
	border-radius: 100%;
	display: flex;
	justify-content: center;
	position: relative;
	border: solid 1px black; 
}

.fangs_bottom {
	width: 7px;
	height: 100px;
	margin-bottom:  -50px;
	background: #fff;
	border-radius: 100%;
	display: flex;
	justify-content: center;
	position: relative;
	border: solid 1px black;
}


```

I added a nose by making a rectangle out of borders and making the color of the sides transparent but the bottom a solid color.

```CSS
.nose_pair {
	
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}

.leftNostril {
	border-left: 30px solid transparent;
      border-bottom: calc(4 * 20px * 0.8) solid rgb(26 23 23);
	display: inline-block;
	margin-bottom: -70px;
}

.bridge {
	width: 2px;
	height: 22px;
}

.rightNostril {
	border-right: 30px solid transparent; 
	border-bottom: calc(4 * 20px * 0.8) solid rgb(26 23 23);
	display: inline-block;
	margin-bottom: -70px;
}

```


Inspired by Cody Pearce's [Bender in CSS post](https://dev.to/codypearce/draw-and-animate-bender-s-face-with-css-e8p). 

![Green alien face. Alien has large round eyes with thin black pupils.](https://dev-to-uploads.s3.amazonaws.com/i/1bh2y5ptyouhkfvt79qf.png)


**Next Time: The Skull**


Have you ever made something cool with CSS? Share it.

-$JarvisScript git push
Sorting by external keys in Redis with Python
Tags: redis, python
Published: 2020-10-21 21:11:43

Sometimes you want to sort elements using external keys as weights to compare instead of comparing the actual elements in the list, set or sorted set. Let's say the list `indices` contains the elements `key0`, `key1`, and `key3` representing unique IDs of objects stored in as `key0`, `key1`, and `key3`. When these objects have associated weights stored in their hash, SORT can be instructed to use these weights to sort `indices`. 
```
>>> from random import randint
>>> import redis
>>> r = redis.Redis(host='localhost', port=6379)

>>> for i in range(3):
...     key = f'key{i}'
...     r.hset(key, 'weight', randint(0, 100))
...     r.sadd('indices', key)

>>> # Show the weights of each Hash
>>> [(f'key{i}', r.hget(f'key{i}', 'weight')) for i in range(3)]
[('key0', b'91'), ('key1', b'40'), ('key2', b'63')]

>>> r.sort('indices', by='*->weight')
[b'key1', b'key2', b'key0']
```
Using React To Build A Mini Personalized Spotify (Using the Spotify Web API)
Tags: react, webdev
Published: 2020-10-21 20:50:02

I know, the title sounds super confusing. Allow me to explain. 

To start with, here's a live demo of the app, just in case you're curious - [MySpotify](https://myspotify-aa2ed.web.app/)

{% vimeo 470888675 %}

Alright, so, I built a client side application that makes use of the super cool Spotify Web API to log in users, filter the latest songs they have listened to by mood, suggest artists similar to the ones they love, get top tracks by their favorite artists, and let them listen to their favorite tracks. 

A complete step-by-step walkthrough would probably end up in a comically large post which no one will have the patience to read, so I'll try and provide a general outline of how I went about building the application.

If you'd like to take a look at the code, here is the GitHub repo. Do consider starring it if you find it useful: [MySpotify-repository](https://github.com/Swapnil-2001/MySpotify). A small disclaimer - I'm not exactly a seasoned developer, so I'd gladly encourage suggestions on how to improve the code.

So here's what I did:

1. I registered the app with Spotify. That's because we use the Spotify API to provide OAuth authentication so that users can log in with their Spotify accounts. I suggest taking a look at this excellent [article](https://dev.to/myogeshchavan97/how-to-create-a-spotify-music-search-app-in-react-328m) in case you have any problems implementing this step.

2. I used Redux for state management. For those of you who are new to Redux, it allows your application to have a centralized logic and state. Basically, it makes it easier to work with your application as it gets more and more complex. I suggest taking a look at the [official documentation](https://redux.js.org/) for any queries you might have.

3. I used the [recently-played](https://developer.spotify.com/console/get-recently-played/) endpoint to get hold of the current user's recently played songs. The Spotify API has [endpoints](https://developer.spotify.com/documentation/web-api/reference/tracks/get-audio-features/) to get audio feature information for a single track identified by its unique Spotify ID. I used the 'valence' metric to filter the recent songs according to mood. 

4. The rest of the features could be achieved by fairly straightforward [API calls](https://developer.spotify.com/documentation/web-api/).

The Spotify API is pretty spectacular, not least if you're a music lover as I am, and I would highly recommend you go through it. There are tons of things you can do - the only limit, as they say, is your imagination. Whenever you get stuck, refer to the documentation. I found answers to most of my questions hidden there somewhere. And if that doesn't help, there's always Google.

All in all, I had loads of fun building this, and I hope you do too. This is my first post here, so let me know if you have any questions regarding the project, and if you liked it. Until then, bye bye, and happy coding!

**P.S.** 
I made this into a PWA(Progressive Web App), but I have not pushed the changes to GitHub yet.
Using a Custom Element
Tags: webcomponents
Published: 2020-10-21 20:47:12

Recently I gave a lightning talk for the [HighEdWeb Associations](https://membership.highedweb.org/)'s annual conference called ["Old School HTML with Modern Web Components"](https://docs.google.com/presentation/d/1dpGPjjWmUZ6m_1ti2nf2tPZPdAjtz3jfiatE8CMZpeU) making the case for web components. 

Since then I've been getting lots of follow-up questions about how to get started. I think what scares most people off of them is that we often start with how to make your own, which is honestly doesn't give you the immediate return on your learning investment. So what I've decided to do a series that starts at a much easier and more immediately rewarding point.

For newcomers dependencies, bundling, and polyfills are a bit intimidating, so for now, let's use a script where all of that has been taken care of for you. To that end, let's with the simplest most useful task: using an existing web component with a single script. 

1. Add the Javascript. We have a CDN for the web components we use. Add the following script to any HTML page: ```
<script> 
    window.__appCDN="https://cdn.webcomponents.psu.edu/cdn/"; </script>
<script src="https://cdn.webcomponents.psu.edu/cdn/build.js"></script>
```

2. Use the custom element HTML. For example, try accent-card: ```
<accent-card accent-color="red" dark horizontal image-src="https://webcomponents.psu.edu/styleguide/elements/accent-card/demo/images/image1.jpg">
  <h1 slot="heading">Look at this card</h1>
  <div slot="content">This is the card content.</div>
</accent-card>
```

3. Make some changes. Check out the [accent-card demo](https://webcomponents.psu.edu/styleguide/?path=/story/layout-card--accent-card-story) to learn how to change the card's accent-color, orientation, heading, content, and more. ![Accent Card demo with an arrow pointing to the panel on the right and the demo/HTML on the left](https://dev-to-uploads.s3.amazonaws.com/i/ii8ukdey07nhb5ya5u8p.png)

4. Try more custom elements. Browse our CDN to try more:
  * [a11y-figure](https://webcomponents.psu.edu/styleguide/?path=/story/media-figure--a-11-y-figure-story)
  * [a11y-media-player for video](https://webcomponents.psu.edu/styleguide/?path=/story/media-video--a-11-y-media-player-story)
  * [a11y-media-player for YouTube](https://webcomponents.psu.edu/styleguide/?path=/story/media-youtube--a-11-y-media-player-youtube-story)
  * [a11y-tabs](https://webcomponents.psu.edu/styleguide/?path=/story/navigation-tabs--a-11-y-tabs-story)
  * [a11y-collapse](https://webcomponents.psu.edu/styleguide/?path=/story/navigation-collapse--a-11-y-collapse-story)
  * [nav-card](https://webcomponents.psu.edu/styleguide/?path=/story/navigation-card--nav-card-story)

Next you'll learn how to make your own magic script for dynamically importing web components.
Installing VSCode Extension From a List
Tags: vscode, tips, developer, coding
Published: 2020-10-21 20:40:18

---
title: Installing VSCode Extension From a List
published: true
description: Sharing a quick way to save your list of extensions and load them from that list.
tags: #vscode #tips #developer #coding
//cover_image: https://direct_url_to_image.jpg
//cover_image: https://code.visualstudio.com/assets/docs/editor/extension-gallery/extensions-view-icon.png
---
One of my favorite tools is VSCode. I like it’s versatility, the fact that I can use it with any language (that I use, anyway :)) it’s something I really like. As much as I like VSCode there is one thing I dislike doing, and that is, installing the extensions on a new VM or machine! Because I often spin up machines for testing, I wanted to see if there was a way to automate this.

In my quest for a great VSCode hack, I found that VSCode supports cli and you can install the extensions via the command line using the code ‘code –install-extension <extensionName>’ command. The caveat is that it can only take one argument at a time. Then I thought about making a script, but...wait for it....[**Stack Overflow**](https://stackoverflow.com/a/60805086/7869697) to save the day! That's right I found one in an answer before I even got started writing it. I modified the scripts to take a file containing the extension names as an argument.

To backup your current extensions to feed it to the script use the command:
```bash
code --list-extensions > VSCode_Extension_List.txt
```
Here is the script snippet for Linux:
```bash
#!/usr/bin/env bash

cat $1 | while read extension || [[ -n $extension ]];
do
  code --install-extension $extension --force
done
```
Here is the script snippet for Windows using PowerShell:
```PowerShell
Get-Content $args[0] | ForEach-Object {code --install-extension $_}
```
I hope you find this useful, makes you a little happier and that it saves you some time!
Hacktoberfest 2020
Tags: hacktoberfest
Published: 2020-10-21 20:39:28

## What I Learned From Hacktoberfest

During the pandemic this year, I decided to try something new, so I bought a good amount of online lectures on coding. I'm still hammering sharpening my skills on the fundamentals of JS. Hacktoberfest really helped me to learn about version control with Git, Github and the open source community. Thank you so much to everyone involved. I look forward to learning more in the future and hopefully using the great services of the companies that sponsor this event.
Day 97: Stuck!
Tags: 100daysofcode
Published: 2020-10-21 20:23:37

Guess who is supper stuck? Me! I'm missing something on passing data to components. I was hoping I'd finish this project before day 100 but clearly that's not going to happen.

Worked on the last design section. Seems like I'm running 
out of ideas for this. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ur0pa5nfxwapv5auljhs.png)

_My Day 97_
Hacktoberfest 2020
Published: 2020-10-17 10:54:08

This has been my first year participating in Hacktoberfest. It's been a tumultuous few weeks with all the spam PRs and contest changes. But here we are with only two weeks left in October. So what did I learn in these first weeks as both a participant and a maintainer?
What I Learned From Hacktoberfest
Think about your PR description

I learned to think about my PRs more than what I usually do. Before participating in Hacktoberfest my PRs usually include a few words about what I was trying to add. I was banking on the collaborators to know what the PR does at a quick glaze.

One more thing I've learned since the start is to be patient and slow down. When the spam came in, I admit I panicked at first. It didn't seem to end, and I spent most of my time removing spam. Which in retrospect is detrimental to contributors. Since spending more time on spammers means less time on contributors. That's a balance I would like to find someday.

In conclusion, I would say Hacktoberfest is a great challenge to undertake. Even if contributing is new to you. You can always find something if you search hard enough. Just remember to read the necessary documents before contributing. 👍
On-Premise Data Labeling
Tags: machinelearning, datascience
Published: 2020-10-21 19:36:49

If you haven’t heard of the [the Universal Data Tool](http://universaldatatool.com), it’s an open-source web or desktop program to collaborate, build and edit text, image, video, and audio datasets with labels and annotations. 

This is our eight community update! By releasing these videos, we hope to engage the community and encourage new contributors. 

You can [watch the full video here](https://www.youtube.com/watch?v=IBWOaw0jMmM)

#Join us for a Hacktoberfest Hackathon

We are super excited to announce our 8-hour Hacktoberfest Hackathon on October 29th. You can get all the information as well as register at this link 
https://organize.mlh.io/participants/events/5164-universal-data-tool-livestream-mini-hackathon 


#New Feature: Asynchronous Datasets Loading

You can now add millions of samples in a single dataset when using an external server.

#Easier On-Premise Usage

The Universal Data Tool along with a collaboration server can now be run as a single docker container. See the [on-premise documentation](https://docs.universaldatatool.com/running-on-premise) for more details.

You can provide different options to the docker container to control various aspects of the Universal Data Tool. You'll know if a configuration value is used because it will appear in the starting logs as shown below. This allows you to configure things like S3 integrations without needing any user input.

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

#Other Updates

-Fixed reload config state in Audio Transcription: Configuration  in Audio Transcription is updating now (thanks @anaplian!)
-Fixed Portuguese translation: Now you can see the special characters in Portuguese translation (thanks, @miguelcarvalho13)
-Introducing Manage Plugins:  You might have noticed the “Manage Plugins” option introduced in version 13 of UTD. It helps to add an ES6 module to add more functionalities. This is a work-in-progress as of now. However, there will be new features in this option soon. 

That’s it for our eighth community update, be sure to follow us on [Twitter](http://twitter.com/UniversalDataTl), or join our [Slack](https://workaroundon.slack.com) to hear more!
My favorite feature in Rust
Tags: rust, csharp, immutable, functional
Published: 2020-10-21 19:28:20

I use C# in production. It's a great language. It has implemented a lot of really powerful features like pattern matching and linq. If I was going to change one thing about C#, it would be to make variables immutable by default. Rust does this really well, and I'm considering Rust as one of my favorite languages because of this. Here's how I arrived at this being my favorite Rust feature and what I think it would look like for C# to implement something like this.

# My short story

Everyone on my team would agree that important transformations should not be hidden by side effects. Likewise, that immutability is generally a good practice. However, any code base will start to age after a number of years, so you if the compiler allows you to do something, you can probably find an example of it.

I found one such example working through a bug:
```C#
// line 1
var tags = new List<tag>();
var editedLines = lines.Where(line => line.IsEdited);

// ...line 200
var transformedEditedLines = TransformEditedLines(editedLines, parameter2, parameter3, tags);

// ...line 400
Submit(transformedEditedLines, transformedNewLines, tags);
```
The bug said that the tags were being set wrong. It took me a long time to figure out where the tags were even being set. There was no method for it, yet by the time it got to Submit(), they were there. 

As you can guess by the lines I've included, they were being set in TransformEditedLines(). You can understand my confusion because it looks like TransformEditedLines() is a pure function which takes in the parameters it needs and spits out the lines after they're transformed.

# Why default immutability would help

First, when you're writing the code, you would start to default to setting it in the place of initialization. That would decrease that chance that anyone would write this mutable mess out of convenience.

Secondly, when you're reading the code, you would know from the definition whether to look out for a mutable mess. There would be an assumption of side effects, so even functions that pure would raise a warning flag.

Here's roughly what this could look like in C#:
```C#
// line 1
// notice the "mut" mutable keyword.
var mut tags = new List<tag>();
var editedLines = lines.Where(line => line.IsEdited);

// ...line 200
// notice the "mut" keyword here too.
var transformedEditedLines = TransformEditedLines(editedLines, parameter2, parameter3, mut tags);

// ...line 400
Submit(transformedEditedLines, transformedNewLines, tags);
```
Adding "mut" would be a lot like adding "private" to a field or "ref" to a parameter.

# Where to go from here
What is your favorite Rust feature? What else could C# learn from Rust? Do you disagree? Is default immutability a bad thing?

Read about immutability in Rust: [Rust docs](https://doc.rust-lang.org/book/ch03-01-variables-and-mutability.html#:~:text=As%20mentioned%20in%20Chapter%202%2C%20by%20default%20variables,have%20the%20option%20to%20make%20your%20variables%20mutable.)
Context Api
Tags: react, typescript, node, javascript
Published: 2020-10-21 19:13:16

Como passar dados entre components sem cair no temido props hell? Simples vamos utilizar a Context Api do próprio ReactJS.

Para utilizar a context api preciamos criar a context propriamente dita, e um provider para prover os dados.

Ao criar uma context vc precisa passar um objeto com as definições do seu conteúdo

```jsx
import { createContext } from 'React'

interface MyContextProps {
  value: string
}

const MyContext = createContext<MyContextProps>({} as MyContextProps)
```

Para que sua árvore de components consiga utilizar essa context você precisa criar um provedor da context.

```jsx
<MyContext.Provider value={{ value: 'my string' }}>
  <App />
</MyContext.Provider>
```

Agora tudo que estiver dentro de  ``<App />`` ou de qualquer outro component que esteja dentro do provedor da context poderá utilizar os dados context através do hook useContext

```jsx
import React, { useContext } from 'react'

import MyContext from './contexts/MyContext.ts'

export const App: React.FC = () => {
  const context = useContext(MyContext)
  
  return (
    <p>{context.value}</p>
  ) 
}
```

Com o conceito de context você poderá por exemplo controlar a autenticação do seu sistema, ou o tema de seu site para mudar entre dark e light.

Segue o link de um exemplo de um contador usando context api , [https://github.com/renatoosaka/context-api-reactjs](https://github.com/renatoosaka/context-api-reactjs).

![Screenshoot](https://dev-to-uploads.s3.amazonaws.com/i/kv2wb18xnxu7arg3ffk7.png)
Intl Collator in JavaScript
Tags: javascript, webapi, intl, beginners
Published: 2020-10-21 16:32:21

---
title: Intl Collator in JavaScript
published: true
date: 2020-10-21 16:23:50 UTC
tags: #javascript #webapi #intl #beginners
canonical_url: https://krzysztofzuraw.com/blog/2020/js-intl-collator
---

Recently I needed to sort an array of objects from A to Z. Usually for such task I’m using the following piece of code:

```tsx
const cities = [{ name: 'Wrocław' }, { name: 'Kraków' }, { name: 'Łódź' }];

cities.sort((city1, city2) => (city1.name > city2.name ? 1 : -1));
```

Yet I had a problem with this code - the last city `Łódź` was not in the right place. The proper order should be:

```tsx
[{ name: 'Kraków' }, { name: 'Łódź' }, { name: 'Wrocław' }];
```

But code from previous example returned:

```tsx
[{ name: 'Kraków' }, { name: 'Wrocław' }, { name: 'Łódź' }];
```

Why is that? Because `Łódź` is not starting from Unicode character - it is a [utf-8](https://en.wikipedia.org/wiki/UTF-8) one.

How then can I sort an array with `utf-8` characters? In turns out that all major browsers have support for [localeCompare](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare).

What it is? I like to think about this method as a way of sorting with `utf-8` support. `localeCompare`allows me to compare two strings with internationalization support. My sorting example now can be changed to:

```tsx
const cities = [{ name: 'Wrocław' }, { name: 'Kraków' }, { name: 'Łódź' }];

cities.sort((city1, city2) => city1.name.localeCompare(city2.name));
// [{name: 'Kraków'},{name: 'Łódź'},{name: 'Wrocław'}];
```

There is a lot of configuration options to `localeCompate` - if you want to know more I recommend visiting [mdn](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare).

## Summary

In this blog post, I wrote on how to use [localeCompare](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare)to sort strings that are `utf-8`.