teleren/devto huggingface dataset:
Creating Visuals for Music Using Speech Recognition, Javascript and ffmpeg: Version 1
Tags: javascript, html
Published: 2019-07-16 06:01:39

This is my discussion of version 1 of a project I'm working on called _animatemusic_.

[Click here to go to its GitHub repository](https://github.com/vishalbakshi/animatemusic).

My blog post on version 0 of this project [can be found here](https://dev.to/vbaknation/creating-visuals-for-my-music-using-speech-recognition-javascript-and-ffmpeg-4a6d).

## milliseconds, not frames

In version 0 of this project, in my pursuit to render text on a canvas element (which would eventually become a video frame), I chose to design around the essential question:

_which video frame is being rendered?_

which was a reasonable question to ask since I was rendering a finite and known quantity of frames (based on the framerate and duration of the video).

However, it ended up having a not-so-reasonable solution because it involved a conversion from float (start time in seconds) to integer (frame number) for each set of words that were to be rendered. This caused repetitive rounding, which resulted in the text lagging behind the vocal audio. Here's codepen to articulate the plight:

{% codepen https://codepen.io/vishalbakshi/pen/orrRaE default-tab=result %}

For version 1, I've chosen to steer clear of this issue by designing around a new essential question:

_at what time is the word rendered?_

## Examples using `requestAnimationFrame`

I found two resources that reassured me that my new essential question was worth pursuing:

- [Controlling frame rate with requestAnimationFrame](http://codetheory.in/controlling-the-frame-rate-with-requestanimationframe/)
- [How to throttle requestAnimationFrame to a specific frame rate](https://stackoverflow.com/a/19772220/10244270)

I would eventually like to use a library such as anime.js or three.js, and their documentation and API also catered to a time-based animation approach.

## Refactor and `generateFrameImages`

I took this opportunity to refactor my original script, in addition to adding functions to render the text on the canvas when the current time (elapsed) of the video is within the `start` and `end` times of the word. Here's a codesandbox and [sample transcript json for upload](https://github.com/vishalbakshi/animatemusic/blob/master/20190623C_transcribed_test.json):

{% codesandbox canvas-export-fnvws %}

## The Result

I am trembling with excitement as I present to you the new and improved resulting video!! The lyrics sync with the audio so much better than version 0! I don't see many issues with the text (although there are some blanks and one `<unk>`, which is gentle's version of `undefined`)

{% youtube iujaWnphaY4 %}

Thanks for reading! Please comment below if you have something you can share to help me improve this project. Going to try and sleep now amongst the adrenaline rush...

## Follow Me

[YouTube](https://www.youtube.com/channel/UCqvA0CVB3QR3TLpGVzkD35g)
[Instagram](https://www.instagram.com/vbaknation)
Interpolating colours within a range in D3.js
Tags: d3, webdev, javascript, dataviz
Published: 2019-07-16 05:56:08

---
title: "Interpolating colours within a range in D3.js"
published: true
description: "Enhance your data visualisations with colour gradients with the power of d3.js"
tags: #d3, #webdev, #javascript, #dataviz
canonical_url: "https://nobitagit.github.io/blog/Interpolating-colors-range-d3js/"
cover_image: "https://images.unsplash.com/photo-1466690672306-5f92132f7248?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjF9"
---


Colours can be a powerful visual hint in a data visualisation. 
A good rule of thumb though is to use them sparingly, only when they add something meaningful to the chart and [not just because they are pretty](https://youtu.be/AiD6etOB6qI?t=1m3s).

A good alternative to using many different colours is to use just a range of different shades of one or two colours across our entire dataset. This will highlight visually the differences in “weight” of each datapoint without distracting the user with an infinite rainbow of colours.
D3.js makes achieving this goal incredibly easy, allowing us to pass a colour codes to our `ranges`. We just need to pass the two colour codes we want to use as extremes and we will be good to go.

```js
import { scaleLinear } from 'd3-scale';

const ourScale = scaleLinear()
  .domain([0, 100])
  .range([
     '#63a6d6', // <= lower bound of our color scale
     '#124488'  // <= upper bound of our color scale
  ]);
```

D3.js will in turn interpolate the value we pass to our scale function to give us back the appropriate color code. Easy!
Here below a working JsFiddle to check how it works live.

{% jsfiddle https://jsfiddle.net/webdevem/v8k047yh result,js,html,css %}


Cover image is from Markus Spiske, check out his work [here](https://unsplash.com/@markusspiske).

_Originally published on [my blog](https://nobitagit.github.io/blog/Interpolating-colors-range-d3js/)_.
Twitter's new UI, Whats your thoughts.
Tags: twitter, discuss, watercooler
Published: 2019-07-16 05:17:07

---
title: Twitter's new UI, Whats your thoughts.
published: true
description: Twitter changed its UI. What do you think?
tags: twitter, discuss, watercooler
cover_image: https://thepracticaldev.s3.amazonaws.com/i/xod8dpqgdt5q0df5z4s3.png
---

what do you think about the new UI of Twitter?
SNEAK PEEK: ASP .NET Core A-Z eBook
Tags: aspnet, learn, visualstudio, webdev
Published: 2019-12-28 23:54:26

---
title: SNEAK PEEK: ASP .NET Core A-Z eBook
published: true
date: 2019-07-16 03:45:19 UTC
tags: ASP.NET,Learn,Visual Studio,Web Development
canonical_url: https://wakeupandcode.com/sneak-peek-asp-net-core-a-z-ebook/
---

Over the past 26 weeks, this blog has hosted a [series of ASP .NET Core articles](https://wakeupandcode.com/aspnetcore/#aspnetcore2019) to cover 26 different topics from A-Z. Below is a sneak peek of an upcoming eBook that will combine all 26 blog posts as 26 chapters of the book.

# ![ASPNETCoreLogo-300x267](https://wakeupandcode.com/wp-content/uploads/2018/10/ASPNETCoreLogo-300x267-150x150.png) A – Z of ASP .NET Core!

# Things to note:

- The eBook is still a work in progress ![🙂](https://s.w.org/images/core/emoji/12.0.0-1/72x72/1f642.png)
- I’m using my [Worker Service](https://wakeupandcode.com/worker-service-in-asp-net-core/) sample to auto-generate Word documents from each blog post by converting each article’s HTML into Word format using [MariGold.OpenXHTML](https://github.com/kannan-ar/MariGold.OpenXHTML)
- The code segments are wrapped in \<pre\> tags on the site, but these don’t convert easily into Word, so I’m setting each code block’s CSS style to use Courier-New fonts before the conversion
- I also fixed a bug around converting newline characters into \<br\> breaks within the \<pre\> tags
- Images are still broken as of this writing, as each image tends to appear in their original size, going off the page throughout each Word document. This should be fixed soon.
- The content currently covers a combination of ASP .NET Core 2.2 and 3.0 (Preview). In the weeks/months ahead, the content will be updated to include Core 3.0 across the entire series.
- The complete eBook will be available as a free PDF.

[![eBook cover](https://wakeupandcode.com/wp-content/uploads/2019/07/aspnetcore-az-cover-wider-400x518.png)](https://wakeupandcode.com/wp-content/uploads/2019/07/aspnetcore-az-cover-wider-400x518.png)

eBook cover

You can find the **Worker Service** sample code on GitHub:

![Web](https://wakeupandcode.com/wp-content/uploads/2013/06/Network-Download-icon.png) Worker Service Sample: [https://github.com/shahedc/WorkerServiceSample](https://github.com/shahedc/WorkerServiceSample)

The (unpolished) auto-generated Word documents are also available in the GitHub repo, within a “chapters” subfolder:

- [https://github.com/shahedc/WorkerServiceSample/tree/master/WorkerServiceSample/chapters](https://github.com/shahedc/WorkerServiceSample/tree/master/WorkerServiceSample/chapters)

Stay tuned for updates!
Async/Awaiting Production in Python
Tags: python, tutorial
Published: 2019-07-16 03:40:32

Async / Await are the two new Python keywords that are used to define coroutines. Concurrency and parallelism are expansive subjects that are not easy to wade into. It has been known that the asynchronous functions in Python can be very slow. Watch this talk to learn how to optimize async/await performance in production.

{% youtube bF1xRTwmgvQ %}
Debugging Travis CI is very hard.
Tags: watercooler, devops
Published: 2019-07-16 02:47:58

---
title: Debugging Travis CI is very hard.
published: true
description: I can't find the docs and the output is bad
tags: watercooler, devops
---

I had the "simple" goal of setting up automatic builds for my Go project. And it's been a nightmare.

https://github.com/nektro/andesite

https://travis-ci.org/nektro/andesite

The docs are hard to follow, the error messages aren't descriptive, and it has taken up most of my afternoon.

In other news, I switched from Windows to Debian on my main machine and I've been loving every second of it.
Ownership and Borrowing in D
Tags: d, memorymanagement
Published: 2019-07-16 02:16:10

New blog post by Walter Bright [is up](https://dlang.org/blog/2019/07/15/ownership-and-borrowing-in-d/):

> Ownership and Borrowing. It’s memory efficient, as performant as manual management, and mechanically auditable. It has been recently popularized by the Rust programming language. It has its downsides, too, in the form of a reputation for having to rethink how one composes algorithms and data structures.

While I welcome this addition (assuming it actually materializes) I think that last sentence understates the downsides. In my experience, it's just a lot more taxing to have to think about memory all the time. In terms of developer productivity, you can't beat garbage collection, and things like this are a last resort for the small amount of code that absolutely can't handle garbage collection.
We're hiring! Exciting projects and opportunities 🏠 
Tags: career, reactnative, react
Published: 2019-07-16 00:19:43

Hey community I wanted to share an exciting opportunity with a startup I work at currently experiencing rapid growth and doubling in size the next few months. 🏠🚀

Our teams are focused on reinventing the real estate home purchasing process and is currently filling several positions on exciting projects. We have multiple openings, please feel free to message me directly for any questions, and I would love to share my experience. https://getendpoint.com

---

Lead Engineer
https://hire.withgoogle.com/public/jobs/endpointclosingcom/view/P_AAAAAAHAABMM8fbZ73MlKC

Senior React / ReactNative Engineer
https://hire.withgoogle.com/public/jobs/endpointclosingcom/view/P_AAAAAAHAABMIN7OXbEy2a6

Senior NodeJS Engineer
https://hire.withgoogle.com/public/jobs/endpointclosingcom/view/P_AAAAAAHAABMAg9AAnMDaCP

Senior Full Stack Engineer
https://hire.withgoogle.com/public/jobs/endpointclosingcom/view/P_AAAAAAHAABMExKk1DBMtHc
The #1 Mistake Developers Make
Published: 2019-07-15 23:22:01

---
title: The #1 Mistake Developers Make
published: true
description: The #1 Mistake Developers Make
tags: 
---

I have been doing this thing called software development for over two decades and I consistently see developers make the same bad mistake. Then they are wondering why they are not making the money they think they should make, get zero chances for promotions and are constantly frustrated when they come across programming/application issues.

<h2>1. Developers Do Not Learn The Whole Environment Surrounding Their Code</h2>

From my experience, most developers today are specialist. There is nothing wrong with that but there will be definitely frustrations that come with that. If a problem happens in your code that is not initiated from your code you will have a hard time finding the problem because you have no clue about the environment surrounding your code. 

For example let's say you are a web developer and the minute you deploy your code  to the server it blows up (dev language). I have seen time and time again developers spend hours looking through the code for a problem or better yet searching Stack Overflow. The one reason they do this is because that is the only place they are familiar with. They have no clue how a web application interacts with the underlying web server, DBMS, or operating system. I have seen web developers where all they know is a server-side language and some HTML. 

I don't know how many times a developer has asked me for help with an application issue and it had nothing to do with the code.

I will admit some places have 100 person teams where if you have a server or database issue you can just IM someone for help but keep in mind that you have to wait on someone for help and it makes you less productive. Why not just spend some time learning the environment surrounding your code. It can't hurt. Knowledge is power.
Notifications were stressing me out before it was cool
Tags: watercooler, gofigure, wordpress
Published: 2019-07-15 22:28:54

File under the "go figure" category:

I found this old blog post from July 2008 only a couple of weeks after getting my first iPhone:

https://ohryan.ca/2008/07/21/iphone-stress/

> *wake up, check phone*
> “oh, no new mail”
> *shower. check phone*
> “9 new emails!?! WTF?!”
> (only 3 were spam)

It's stunning how jarring that felt back in the day vs how normal it feels now.

---

PS. I found out about this old post via a WordPress plugin I wrote that surfaces old posts (as a dashboard and/or site widget): https://wordpress.org/plugins/retroposts/
Multiple Emails on GSuite
Tags: gsuite, indiehackers, protip
Published: 2019-07-15 22:15:08

---
title: Multiple Emails on GSuite
published: true
description: Setting up more than 1 email on GSuite is confusing and I have to look up how to do it everytime
tags: gsuite,indie hackers,pro tip
---

![from](https://thepracticaldev.s3.amazonaws.com/i/ph7pi5guq2eh987zbds6.png)

# Email Aliases

Email aliases are one way to get more bang for your buck.  GSuite costs me $6.36/month.  For that you can have up to 30 email aliases for a single user.  So this is how you do it if you are the GSuite admin.  After logging in you can use the following links.

## [Ensure Default Routing](https://admin.google.com/AdminHome?subtab=filters#ServiceSettings/service=email&subtab=domaindefault)

Default routing is a way to catch all invalid emails to your user.  If someone typos your email address, this will help you still receive the email.

## [Add Your Domain](https://admin.google.com/AdminHome?subtab=filters#Domains:)

Here you can add your domain which is additional to your gsuite domain.  You probably don't want it to be an alias.

## [Add Organizational Unit](https://admin.google.com/ac/orgunits)

This will allow you to make shared inboxes under google groups.

## [Add Email Aliases to User](https://admin.google.com/ac/users)

Click on the user of interest and then "User Information".  Add whatever aliases you currently have.  At this point you'll need to wait up to an hour before the alias is added in gmail.

## [Add Send From](https://mail.google.com/mail/u/0/#settings/accounts)

Under the "send mail as" section you should be able to add the email from the previous step.  Leave "Treat as an alias" checked and if you waited long enough from the last step, it should accept the email.

## Bonus: [Email profile picture](https://www.quora.com/How-do-I-add-a-profile-photo-to-an-alias-email-account-in-my-Gmail)

If you want your profile picture to show in gmail clients, this is how you would do that.
JS == vs ===
Tags: javascript, webdev, beginners, tutorial
Published: 2019-07-15 21:29:17

This post expects prior knowledge on [data types](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures).

Javascript gives two options for testing equality that look really similar. Together we'll walk through the difference between `==` and `===`.

![confused](https://media.giphy.com/media/4JVTF9zR9BicshFAb7/giphy.gif)

###Triple Equals / ===
Using Triple Equals tests for strict equality, meaning, both the **type** and the **value** have to be the same. 

Here are some examples that return **true**:

`10 === 10
// true : both Integers and values match`


`true === true
// true : both Booleans and values match`

`'hello world' === 'hello world'
// true : both Strings and values match`

Here are some examples that return **false**:

`100 === '100'
// false : comparison of an Integer and a String`

`'red' === 'blue'
// false : both Strings with different values`

`false === 0
// false : both different types and different value`


What if we wanted to test loose equality where only the value mattered? Then we can use `==`


###Double Equals / ==
Using Double Equals tests for loose equality. Here only the **value** has to be the same. Javascript makes this possible by completing type coercion which will actually try to convert our values into a like type. Let's return to one of the previous examples that returned **false**.

`100 == '100'
// true : comparison of an Integer and a String`

`false == 0
// true`

The example of `false == 0` can be confusing. This example returns `true` because 0 in Javascript is described as being **falsy**.

###In Conclusion

When testing equality using Triple Equals is preferred. Testing the type and value ensure true equality testing.

Both experience and [this article](https://codeburst.io/javascript-double-equals-vs-triple-equals-61d4ce5a121a) provided information on the topic and describes in detail what **falsy** means.
Hover animate, Masonry mover, Side switch | Module Monday 47
Tags: showdev, opensource, webdev, javascript
Published: 2019-07-15 20:58:55

---
title: Hover animate, Masonry mover, Side switch | Module Monday 47
published: true
description: Module Monday 47
tags: showdev, opensource, webdev, javascript
cover_image: https://res.cloudinary.com/component/image/upload/b_rgb:ffffff,c_lpad,h_350,w_800/v1562985793/header_hgrore.gif
canonical_url: https://guide.anymod.com/module-monday/47.html
---

## Everything below is open source 
It's free to use on any website, web app, or anywhere else. There are hundreds more like these built & shared by developers on [AnyMod](https://anymod.com).

Click a mod to see it along with its source code.

## Animated masonry overlay
Welcome overlay that transitions to a masonry gallery. Add your own text and images.
<a class="btn btn-sm" href="https://anymod.com/mod/masonry-gallery-with-collapsible-call-to-action-overlay-barnrn?preview=true">View mod</a>
<a href="https://anymod.com/mod/masonry-gallery-with-collapsible-call-to-action-overlay-barnrn?preview=true">
  <img src="https://res.cloudinary.com/component/image/upload/v1562985793/header_hgrore.gif"/>
</a>

## Alternating content sections
Pre-styled sections to tell your story.
<a class="btn btn-sm" href="https://anymod.com/mod/alternating-content-sections-ordkdo?preview=true">View mod</a>
<a href="https://anymod.com/mod/alternating-content-sections-ordkdo?preview=true">
  <img src="https://res.cloudinary.com/component/image/upload/v1562985794/alternating_ktnecw.gif"/>
</a>

## Hover social links
Adds a professional touch to your social links.
<a class="btn btn-sm" href="https://anymod.com/mod/social-links-with-animations-dkdlnk?preview=true">View mod</a>
<a href="https://anymod.com/mod/social-links-with-animations-dkdlnk?preview=true">
  <img src="https://res.cloudinary.com/component/image/upload/v1562985792/social-icons_u9mskw.gif"/>
</a>

## Formatted content
Font, layout, and colors based on the Spatial theme by Templated.
<a class="btn btn-sm" href="https://anymod.com/mod/content-block-alrmdb?preview=true">View mod</a>
<a href="https://anymod.com/mod/content-block-alrmdb?preview=true">
  <img src="https://res.cloudinary.com/component/image/upload/v1562985792/styled-content_exi7mb.png"/>
</a>

## Refined image cards
Beautiful, responsive design with a suble zoom on hover.
<a class="btn btn-sm" href="https://anymod.com/mod/image-cards-with-call-to-action-raorod?preview=true">View mod</a>
<a href="https://anymod.com/mod/image-cards-with-call-to-action-raorod?preview=true">
  <img src="https://res.cloudinary.com/component/image/upload/v1562985793/image-cards_szuolm.png"/>
</a>


<hr>

I post new mods from the community [here](https://dev.to/tyrw) every (Module) Monday -- I hope you find them useful!

Happy coding ✌️
Kent C. Dodds talks about teaching, open source and software development in the latest Ducktapes podcast
Tags: podcast, javascript, opensource, teaching
Published: 2019-07-15 20:30:29

---
title: Kent C. Dodds talks about teaching, open source and software development in the latest Ducktapes podcast
published: true
description: https://www.ducktapes.fm/
tags: podcast, javascript, open source, teaching
---
C program is not working properly.
Tags: c, beginners
Published: 2019-07-15 20:25:47

//wap to enter a password which contains uppercase, lowercase and digits in it?
#include <stdio.h>
#include <stdlib.h>
#include <ctype.h>

int main()
{
    char pass[10];
    int a,b,c=0;
    int i;
    printf("enter a password:\n");
    scanf("%s", pass);
    
    for(i=0;i<10;i++){

       if(islower(pass[i])){
           a++;
        }
       if(isdigit(pass[i])){
            b++;
        }
       if(isupper(pass[i])){
            c++;
        }
    }
        if((a>0) && (b>0) && (c>0)){
            printf("pass is legit.");
        }else{
            printf("pass is not valid.");
        }

        return 0;
}
Airtable POST/PATCH errors solved
Tags: airtable, googleappsscript, gas, post
Published: 2019-07-15 20:13:59

After a frustrating evening I finally found out WHY the Airtable API was always rejecting my humble POST/PATCH requests, a.k.a. requests that needed parameters to be sent as body.

I was stuck at some errors:

> {“type”:“INVALID_REQUEST_MISSING_FIELDS”,“message”:“Could not find field “fields” in the request body”}}.`



> {"error":{"type":"INVALID_REQUEST_UNKNOWN","message":"Invalid request: parameter validation failed. Check your request data."}}



> {“error”:{“type”:“INVALID_REQUEST_BODY”,“message”:“Could not parse request body”}}


THE SOLUTION WAS...just to add this to the json: **"typecast:true"**. 
Yes, everything else was ok.

From the Airtable's API documentation:
"The Airtable API will perform best-effort automatic data conversion from string values if the typecast parameter is passed in (click to show example). Automatic conversion is disabled by default to ensure data integrity, but it may be helpful for integrating with 3rd party data sources."

To be honest this was a bit hidden, but hey, I'm writing this post specially for you, struggling for the win (read: for myself when I'll forget).

An example json

```javascript
{
  "fields": {
    "customer": [
      "recMmE0pTasdGqkEw"
    ],
    "date": "2019-07-15",
    "from": "2019-06-15",
    "to": "2019-06-30",
    "currency": "USD"
  },
typecast:true

}
```


edit:
I just found out that after I sent the request with **typecast:true**, now all the requests are passed smoothly without an error!