teleren/devto huggingface dataset:
An LCH Color library and theme designer
Tags: showdev, webdev, javascript, design
Published: 2020-05-30 17:41:20

So if you've seen [my post](https://dev.to/vinaypillai/lch-colors-and-why-you-should-be-using-them-plus-a-package-to-help-bbc) on the LCH color space, you know that making the switch to LCH colors can help resolve some common design issues stemming from vanilla RGB, HEX, and HSL color models (basically LCH's [perceptual uniformity](https://programmingdesignsystems.com/color/perceptually-uniform-color-spaces/) makes it easier to select colors that have the same visual feel). Thanks to some iterative improvements, the color library I was working on then now has support for a few more colorspaces, including two flavors of LCH. 

{% github vinaypillai/ac-colors %}

I've also recently been working on an [LCH theme designer](https://colors.acutecomponents.com/), which I've found to be quite useful when choosing colors for UI components on some of the projects I'm working on.

![Acute Colors theme designer](https://dev-to-uploads.s3.amazonaws.com/i/ikgoloz11e7uavebwfny.png)

It defaults to LCHuv mode, featuring colors with independent incremental changes to their hue, chroma/saturation, and luminance/lightness, which is great for things like selecting a color for a button's disabled state, or choosing a shade of red for an error notification that matches look of your other notifications. Changing a color's component parts independently (such as the its luminance values in LCH mode or red values in RGB mode) makes exploring the niches of different color models pretty easy.
🛑 How to API Testing with JSON Server?
Tags: testing, tutorial, webdev, beginners
Published: 2020-05-30 17:37:48

In this video of 30 Days of API Testing Challenge, I am going to discuss How to Perform API Testing with JSON Server.

What is JSON Server?
Get a full fake REST API with zero coding in less than 30 seconds.
Created with love for front-end developers who need a quick back-end for prototyping and mocking.

[![30 Days of API Testing](https://i.imgur.com/tEAfn62.png)](https://youtu.be/0kkWFNTpWBs "30 Days of API Testing")


> 🚀 Link 
- https://www.npmjs.com/package/json-server


- 🚀 Day 30 Task :  Share request data passing or api chaining in postman

- 🚀 Thread :  https://scrolltest.com/api/day30

- 🚀 All Task List : https://scrolltest.com/api/task

- 🚀 Watch Full Playlist : https://apitesting.co/30days

🛑 🛑 Learn Advance API Testing using Postman -https://www.learnapitesting.com
How To Deploy To Heroku Using Postgres
Tags: postgres, heroku, node, knex
Published: 2020-05-30 17:22:44

So you've designed your database, built it and it's now running locally on your desktop with no errors. The only thing left is deploying to Heroku. Well, this post provides some guidance on how to do that.

1. I'm assuming you already have an account with Heroku and if not, you can sign up [here](www.heroku.com). What you have to do next is install [pg](https://github.com/brianc/node-postgres), a Postgres client for NodeJs.

    ```javascript
    npm install pg
    ```

2. Add a Knex configuration for production

    ```javascript
    production: {
        client: 'pg',
        connection: process.env.DATABASE_URL,
        migrations: {
            directory: './data/migrations',
        },
        seeds: { directory: './data/seeds' },
    }
    ```

    I'll explain where the connection value is coming from later.

3. Log in to Heroku, click **New** to create a new app, give your app a name and create it.

4. Choose a deployment method. Since we're going to be using Heroku commands to run knex migrations, let's use the Heroku Git deployment method. The instructions on how to install and use Heroku CLI are simple and easy to follow.

5. Once you're through installing Heroku CLI and running the following commands, move to the **Resources** tab and type **Heroku Postgres** in the add-ons search bar. Click on it and provision the plan you prefer.

6. Navigate to the **Settings** tab and click to reveal Config Vars. It should already have your DATABASE_URL. If not, go to the **Overview** tab and you should see your **Heroku Postgres** add-on, click on it to see all the information about your database. On the same page, go to the **Settings** tab to view your credentials. There you'll see your URI. Copy that and paste it as a value in your Config Vars with DATABASE_URL as the key. Note: Your key can be any valid name, just ensure it matches the name in your knex configuration. You can also add more config vars like the environment you wish to work with, i.e, production.

7. Review all your configurations. Make sure your knex configuration environment is not hardcoded to development. It should be similar to this:

    ```javascript
    const knex = require('knex');
    const knexConfig = require('./knexfile');
    const environment = process.env.DB_ENV || 'development';
    module.exports = knex(knexConfig[environment]);
    ```
    Your port number should also not be harcoded.

    ```javascript
    const port = process.env.PORT || 5000;
    ```

    Of course, you can include the DB_ENV value in your Config Vars on 
    Heroku.

8. Next, run the following command:
    ```javascript
   heroku run knex migrate:latest
   ```
And you're good to go. You can view the url of your deployed app by clicking on **Open app** on Heroku or scroll down to the domains section of the **Settings** tab.

Well done, champ. Now you can go grab that beer. Don't forget to let me know if you found this helpful, though.

Till next time......
Help me with Threading in this code. I am unable to figure out how to use threading in this
Tags: python, ipywidgets, Whileloop, threading
Published: 2020-05-30 16:51:29

def data_import_date(start_date,end_date):
    end_date1=end_date.strftime('%Y-%m-%dT%H:%M:%S')
    start_date=pd.Timestamp(start_date)
    end_date=pd.Timestamp(end_date1)

    button=widgets.Button(description='Pull Data')
    button.on_click(functools.partial(select_data,rs_=[start_date,end_date]))

    vbox=widgets.VBox([button])
    display(vbox,out)


def select_data(b,rs_):
#     clear_output()
    start_date=rs_[0]
    end_date1=rs_[1]
    print("Data pulling started")

    with out:
        clear_output()
        seeq_login() 
        [item1,item2]=query_seeq_for_data()
        i=0
        while True:
            end_date=end_date1.strftime('%Y-%m-%dT%H:%M:%S')
            print("Start & End date: ",start_date,end_date)
            if i==0:
                [X_data,Y_data]=pull_data(item1,item2,start_date,end_date)
            else:
                [X_data_live,Y_data_live]=pull_data(item1,item2,start_date,end_date)
                X_data=X_data.append(X_data_live)
                Y_data=Y_data.append(Y_data_live)
            print("Data pulling completed.\nNow you're ready for your analysis")

            clear_output()
            [X_train,X_test,Y_train,Y_test]=train_test(X_data,Y_data)

            [Xp_train,components,explained_variance_ratio,_,_]=apply_PCA(X_train,X_test)
            plot_PC_variance(X_data,explained_variance_ratio)
            plot_PC(X_data,components)

            time.sleep(20)
            start_date=end_date
            end_date1=end_date1+datetime.timedelta(days=1)
            i+=1



  a=interact(data_import_date,
           start_date=widgets.DatePicker(value=pd.to_datetime(start_date)),
           end_date=widgets.DatePicker(value=pd.to_datetime(end_date)))


def plot_PC(X_data,components):
    Np_comp=(1,len(X_data.columns),1)
    @interact
    def principal_components(PC1=Np_comp,PC2=Np_comp):
        fig,ax=plt.subplots(1,1,figsize=(10,10))
        plt.figure(5)
        print(PC1, PC2)

        ax.set_xlabel("Principal Component {}".format(PC1), fontsize=14)
        ax.set_ylabel("Principal Component {}".format(PC2), fontsize=14)
        ax.set_title("Principal components {0} & {1}".format(PC1,PC2), fontsize=(20))
        ax.scatter(components[:,PC1],components[:,PC2])
Deploy react app on shared hosting
Tags: react, javascript, npm
Published: 2020-05-30 16:46:59

For deploying a react app on a shared hosting you need to create a production build. Production build is a pack of all your react code and its dependencies.

in most shared hosting we put our site/app inside a _public_html_ directory so if we hit _www.yourdomain.com_ it serves the code from _public_html_ directory.

so if your react app is ready to go, edit your _package.json_ file add a new key value:

**"homepage":"http://yourdomain.com"** 

then create a build using following command:

**npm run build**

after running the command you will see a new directory named **build** in your app root. It will contain js and css for the app and a _index.html_ file. You need to upload all the content inside *build* directory to _public_html_ directory, and that's all, go to your domain and your app will be working just fine.
Basic Routing App in Deno using Oak
Tags: deno, webdev, typescript, javascript
Published: 2020-05-30 16:44:19

<p>Routing your Internet application is one of most important thing developer has to know about, Routing help use to keep our application safe as we can pass many authentication middleware, Routing also help our Internet application to have different pages for different purposes. Sometime implementing routing become more tedious job to implement if we want to use internal modules so how we will implement that let us think about!!!

As Deno support Third Party module like Oak which will provide us a “application layer” as well as “routing layer”. With using these two classes we can implement our routing application. So without further ado let’s just do it.

First of all we need to create our “app.ts” file our working directory will look like this.</p>

<pre>

-app.ts

</pre>

<p>
Now we have to import our module we gonna use Oak so we will copy its link and write our import statement.
</p>
<pre>
import { Application, Router } from "https://deno.land/x/oak/mod.ts";
</pre>
<p>
After importing our Application Class and Router Class we now need to initialize both of our module using following statement.
</p>
<pre>

const app = new Application();

const router = new Router();

</pre>

<p>
After initializing our router we can now setup what request we want to do with server and how will actually the router and what function they gonna provide. Request can be of many type like “GET”, “POST” ,“DELETE” etc… </p>

<pre>

router
  .get("/",(ctx) => {
   ctx.response.body = "Router has been created";
   // Implement your code
   })
  .post("/addPost", (ctx) => {
   ctx.response.body = "This is port request";
   // Implement your code   
   });

</pre>

<p>
Our router has been setup now we have then these router path to our application, we can implement this by passing our router as a middleware to our application.

</p>

<pre>
app.use(router.routes());

app.use(router.allowedMethods());

</pre>

<p>

For the final step we just need to make our server listen to Port 8000 or any thing you want.

</p>

<pre>

app.listen({port: 8000});

</pre>

<p>
So this is how we can build a Deno Routing application pretty easily. Our final code will look this in app.ts file.

</p>

<pre>
import { Application, Router } from "https://deno.land/x/oak/mod.ts";
const app = new Application();
const router = new Router();
router
  .get("/",(ctx) => {
   ctx.response.body = "Router has been created";
   // Implement your code
   })
  .post("/addPost", (ctx) => {
   ctx.response.body = "This is port request";
   // Implement your code   
   });
app.use(router.routes());
app.use(router.allowedMethods());;
app.listen({port: 8000});

</pre>

<p>

So have fun with Deno and enjoy Deno with Oak 👍.

</p>

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

{% youtube 2ozuUpNGwSE %}
Add Speech Recognition to your web app
Tags: speech, recognition, app, annyang
Published: 2020-05-30 16:42:10

Adding speech recognition capabilities to your website seems like a daunting task. However, thanks to a new framework called Annyang, it has never been easier.

Annyang makes use of the web speech API integrated inside your browser. Every browser has a different support flexibility towards the speech API so just note that it is not consistent across all browsers.

Also important to note that speech recognition currently only functions with a secure HTTPS connection only, so to save you much frustration, using it on your local files or a non-HTTPS connection will simply not work.

With this in mind let's learn how we can integrate speech recognition into our web apps.

The first thing we'll do is link the annyang script to our head tag in our html file

```html
<head>
    <script src="//cdnjs.cloudflare.com/ajax/libs/annyang/2.6.0/annyang.min.js"></script>
    <!--optional jquery script because we are using jquery instead of jaavscript-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
```

Now let's initialize annyang in a script tag (we can also link to external JS file)

```javascript
<script>
if (annyang) {
  //we first declare a command variable, adding first the text we wish to speak out to our device, then the action we wish to create
  var commands = {
    'make background red': function({$('body').css('background','red')},
    'make text green': function({$('p').css('color','green')}
  };

  // then we add our commands to annyang
  annyang.addCommands(commands);

  // Start listening. You can call this here, or attach this call to an event, button, etc.
  annyang.start();
}
</script>
```

Then we need of course a body tag with some p tags in our app:

```html
<html>
<head>
    <script src="//cdnjs.cloudflare.com/ajax/libs/annyang/2.6.0/annyang.min.js"></script>
</head>
<body>
   <p>Some text...</p>
</body>
</html>
```

That's all we need to intiate our web app with speech recognition!

Now just speak the commands and the actions will respond accordingly.

Enjoy!

Annyang Website: https://www.talater.com/annyang/


Like always see you int he next post.

Uriel Bitton
Website: www.flexrweb.com
My new app: www.quadflowapp.com
steganography cli in rust - architecture
Tags: rust, meetup, steganography, talk
Published: 2020-05-30 16:21:56

---
title: steganography cli in rust - architecture
published: true
description: Little preview of my talk about steganography in rust, a little hobby project of mine
tags: rust, meetup, steganography, talk
cover_image: https://pbs.twimg.com/media/EZRwYpaXYAQJpM8?format=jpg&name=4096x4096
---

Little preview of my talk about steganography in rust, a little hobby project of mine, at the #rust #meetup #munich on 3rd of June. Fully remote.

You can also join on [meetup.com](https://www.meetup.com/rust-munich/events/270790293/)

UPDATE 2020-06-02:
The Livestream will be [hosted on youtube](https://www.youtube.com/watch?v=ARDhkujNXrY)

[stegano-cli on crates.io](https://crates.io/crates/stegano-cli)

![architecture](https://pbs.twimg.com/media/EZRwYpaXYAQJpM8?format=jpg&name=4096x4096)
My Dev Story: Learning to Code, Writing more, and Building My Own Blog.
Tags: discuss, personal, devstory, portfolio
Published: 2020-05-30 16:13:16

I started learning to code inconsistently in late 2018 and in that time I started writing about things I was learning here on medium. I got a couple of positive responses asking me to write more, but I couldn’t find the time to because I was in my final year in school. It was really hard balancing the stress of trying to finish school, finishing my project, the numerous academic defenses, and finding time to learn to code. I finally gave up and stopped writing.

Fast forward to now, I’ve landed my first job right after leaving school and I finally found the time (all thanks to the pandemic and lockdown) to build my own portfolio and blog site using Gatsby so I can have my own digital space on the internet. [Insert shouting, drum rolls, and some funny dance steps].

To all of you who were supporting me on here, you can go check it out at codewithlinda.com and drop your reviews. I’ll love to hear them.
On codewithlinda.com, I’ll be publishing beginner-friendly articles on frontend/cloud development, dev life, and more bi-monthly. If this sounds like something you are interested in, consider subscribing to my newsletter on the blog.

Let's talk in the replies, what has your coding journey been like? Any highs or lows? any lessons learned?
Adobe XD Design to Flutter Code in 100 Seconds
Tags: flutter, dart, programming, uidesign
Published: 2020-05-30 15:55:35

---
title: Adobe XD Design to Flutter Code in 100 Seconds
published: true
description: Convert Adobe XD design to flutter code
tags: flutter,dart,programming,UIdesign
cover_image: http://img.youtube.com/vi/rPG0xkBhc5I/0.jpg
canonical_url: https://mightytechno.com/adobe-xd-design-to-flutter-code/
---

Convert your Adobe XD design to Flutter code instantly with this cool plugin.Check Full Article From [here](https://mightytechno.com/adobe-xd-design-to-flutter-code/)  

Check The Video
{% youtube rPG0xkBhc5I %}


Connect with me - [Instagram](https://www.instagram.com/mighty_techno) |[Blog](https://mightytechno.com/) |[Twitter](https://twitter.com/mightytechno)
Manifest vs head icons in the Vue CLI PWA Plugin
Tags: vue, pwa, icons, webdev
Published: 2020-05-30 15:55:34

A couple of weeks ago I opened a [PR](https://github.com/vuejs/vue-cli/pull/5408) to update the documentation of the Vue CLI, specifically the PWA plugin.  Even though the PR has been merged, the CLI docs still don't have the update so I figured I'd post it here also. Just incase anyone else is running into the same issue I was.

## What was the issue?

[Issue #4069](https://github.com/vuejs/vue-cli/issues/4069) & [Issue #5407](https://github.com/vuejs/vue-cli/issues/5407)

Mostly, the PWA icon options are not clearly explained in docs. When you navigate to the [PWA plugin docs](https://cli.vuejs.org/core-plugins/pwa.html#configuration) the only icons mentioned under the configuration specifically target the icons in the head:

**pwa.iconPaths**
```js
  {
    favicon32: 'img/icons/favicon-32x32.png',
    favicon16: 'img/icons/favicon-16x16.png',
    appleTouchIcon: 'img/icons/apple-touch-icon-152x152.png',
    maskIcon: 'img/icons/safari-pinned-tab.svg',
    msTileImage: 'img/icons/msapplication-icon-144x144.png'
  }
```

The instructions state to `Change these values to use different paths for your icons.`

That's all well and good but as I said, changing these defaults will only change the path of the links in the head of you HTML doc, not the icons in the manifest.

As it turns out, those icon paths default to:
```js
[
  {
    'src': './img/icons/android-chrome-192x192.png',
    'sizes': '192x192',
    'type': 'image/png'
  },
  {
    'src': './img/icons/android-chrome-512x512.png',
    'sizes': '512x512',
    'type': 'image/png'
  },
  {
    'src': './img/icons/android-chrome-maskable-192x192.png',
    'sizes': '192x192',
    'type': 'image/png',
    'purpose': 'maskable'
  },
  {
    'src': './img/icons/android-chrome-maskable-512x512.png',
    'sizes': '512x512',
    'type': 'image/png',
    'purpose': 'maskable'
  }
]
```

This is not mentioned in the docs.  Neither is where to make updates or changes to the above defaults. The docs do list a `pwa.manifestOptions` section in the configuration but the only defaults/options listed are:

- name: `pwa.name`
- short_name: `pwa.name`
- start_url: `'.'`
- display: `'standalone'`
- theme_color: `pwa.themeColor`

## So what's the fix?

After some digging I found a 6th option for `pwa.manifestOptions`, `icons`, which uses the defaults I lists above.  Passing in a similarly formatted array of icons will update the icons in your manifest.

Hopefully, the PR they merged in will get released soon (it's already listed in their [CHANGELOG](https://github.com/vuejs/vue-cli/blob/dev/CHANGELOG.md#441-2020-05-25)) and this post will be moot, but for now maybe this will help someone else out.

Let me know if you've found anything else about the Vue CLI that isn't (or is poorly) in the doc.
How can I learn to like Golang? (and use it a lot)
Tags: go, help
Published: 2020-05-30 15:26:49

I don't Golang because,

- I cannot set `nil` a variable (unless it is a pointer, but not sure if it is recommended to do so?)
- GoDoc is restricted to `//` and isn't Markdown friendly. `gofmt` doesn't recognize `/** */`.
  - Actually, VSCode formatter can give colors to JavaDoc/JSDoc styled `/** */` as well.
- Centralized `~/go/pkg/packages/github.com/<NAME>/<PROJECT>` structure, instead of my custom `~/projects/<PROJECT>` structure
  - Actually, sometimes it is a monorepo, so `~/projects/<PROJECT>/packages/backend`
- Golang maker don't like vendorizing, like what `node_modules` do.
  - What do you recommend? [`go mod` or `dep`?](https://www.activestate.com/blog/golang-module-vs-dep-pros-cons/)

Rust's Cargo seems to be more happy with me, but it is a different language.
Similarities Between TypeScript and Kotlin
Tags: programming, kotlin, typescript, softwaredevelopment
Published: 2020-06-04 16:12:17

---
title: Similarities Between TypeScript and Kotlin
published: true
date: 2020-05-30 15:23:42 UTC
tags: programming,kotlin,typescript,software-development
canonical_url: https://medium.com/swlh/similarities-between-typescript-and-kotlin-c25eba0e2ffc
---

[![](https://cdn-images-1.medium.com/max/700/1*fkyRp-HdNyYKTe5MaNogDw.png)](https://medium.com/swlh/similarities-between-typescript-and-kotlin-c25eba0e2ffc?source=rss-269f954fad8c------2)

8 similarities between TypeScript and Kotlin with code examples

[Continue reading on The Startup »](https://medium.com/swlh/similarities-between-typescript-and-kotlin-c25eba0e2ffc?source=rss-269f954fad8c------2)
🔴It's LIVE: I am gonna talk at NODEJS GLOBAL SUMMIT 👋 🎫
Tags: node, javascript, testing, webdev
Published: 2020-05-30 15:23:32

I am gonna talk at NODEJS GLOBAL SUMMIT today.

<strong>It's already LIVE , you can go from here [https://geekle.us/](https://geekle.us/)</strong>

<img src="https://dev-to-uploads.s3.amazonaws.com/i/xyji2hqmlfax4jeefeg4.jpg" width="350" height="400" />

My Twitter: [destro_mas](https://twitter.com/destro_mas)

Cheers!
:wave: