teleren/devto huggingface dataset:
A (cat) machine learning game I've been working on...
Tags: showdev
Published: 2020-09-07 00:30:48

Wasn't sure where to post this as I'm still working on it but wanted to put it out there to get any useful feedback or thoughts from the experts. It's basically a game similar to 20 Questions (or Animal, Vegetable, Mineral) that attempts to ask you questions to work out an object you are thinking about. You can think of everyday items (animals, household objects, food, quite a bit of other stuff etc) and it has 30 questions to try and guess the item. I've been working on it for a while but not sure what to do next so interested to hear anyone's thoughts...

[Have a play here](https://incredicat.com)
How to check for missing, unused, or out-of-date JavaScript dependencies
Tags: javascript, node, npm, codenewbie
Published: 2020-09-07 00:29:43

> Managing dependencies is very important to developing and maintaining a JavaScript application. Here are three quick tips to help with checking for missing, unused, or out-of-date dependencies!

## Want to check a project for dependencies missing from the package.json?

### Use [depcheck](https://www.npmjs.com/package/depcheck)!

Install the `Depcheck` tool to analyze JavaScript projects for dependencies missing from the `package.json`.

![console output](https://dev-to-uploads.s3.amazonaws.com/i/usa3yux0yhw4f885s9du.jpeg)

- Any `npm` packages that are missing from the `package.json` file and the associated JavaScript file path where the package is used are listed. The packages can then be installed using the [npm-install](https://docs.npmjs.com/cli/install.html) command.

## Want to check a project for unused dependencies?

### Use [depcheck](https://www.npmjs.com/package/depcheck)!

`Depcheck` also analyzes JavaScript projects for unused dependencies. 

![console output](https://dev-to-uploads.s3.amazonaws.com/i/clk168o761zwc80uy0c3.jpeg)

- The unused `npm` packages are listed and it is safe to remove these from the project by running the [npm-uninstall](https://docs.npmjs.com/cli/uninstall.html) command. 

## Want check a project for out-of-date dependencies?

### Use [npm-outdated](https://docs.npmjs.com/cli-commands/outdated.html)! 

This command will check the registry and compare with the versions specified in the `package.json` file. Simply run the command `npm outdated` in the same directory as the project `package.json`. 

Given this `package.json`:
```
{
  "@material-ui/core": "^4.10.0",
  "@okta/okta-react": "1.1.4",
  "@testing-library/jest-dom": "^4.2.4",
  "@testing-library/react": "^9.3.2",
  "@testing-library/user-event": "^7.1.2",
  "axios": "^0.19.2"
}
```

Here is the `npm outdated` output:
![console output](https://dev-to-uploads.s3.amazonaws.com/i/5cgig3ki8lqhfphaojge.jpeg)

- `Red` means update now -> A newer version is available matching the specified `package.json` version so this should be updated now.

- `Yellow` means use caution -> A newer version is available above the specified `package.json` version. Make sure to test your application with the higher package version to ensure there are no breaking changes introduced when updating.

- Use the [npm-update](https://docs.npmjs.com/cli-commands/update.html) command to update the dependencies accordingly.

> <span>Cover image by <a href="https://unsplash.com/@wordsmithmedia?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Allie</a> on <a href="https://unsplash.com/s/photos/coffee-computer?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span>
COVID-19 Risk Visualized Through Data
Published: 2020-09-07 00:18:22

As we all know, we are currently living in unprecedented times. Times like these call for desperate measures which includes making sure you keep yourself and your loves ones safe. However, one of the keys to life is keeping a healthy balance which means living your regular lifestyle is important as well. When going about doing this you must access your choices and the risks that come with them. A great way of doing this is to create a entity-relationship diagram which maps out how your life and the pandemic intertwine. 

Here we have a diagram that shows a risk analysis of your life:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/42qux3j4paw956zzo6ig.png)

Patient: Beginning with information about the patient, this provides very important data that can give an overall description along with a patient ID that can be used to identify the patient.

Health: Next comes information about the health of the patient. Accessing the health history of the patient along with family health, preexisting conditions, and what age bracket they are in are huge factors in COVID risk. Also the factor if the patient is currently sick can be arguably the biggest factor in survival rates from the disease. 

Occupation: One of the biggest risks to contract COVID comes at your work. Factors like healthcare, level of contact, mask use, sanitization, and the overall quality of procedures that are used to keep workers safe are huge components of a healthy work life during a pandemic.

Location: Where you live also has an affect on your safety during the pandemic. Geographical attributes like, culture, population, population density, and the wealth of the area all shape how the disease spreads. 

Behavior: Your behavior not only could put you at risk but also harm others. Travelling and attending social gatherings can put you at risk while mask use, sanitization, and social distancing are good ways to protect yourself.

Hospitals: Attributes of hospitals including quality, capacity, staff availability, quarantine space, and available ventilators all affect your quality of healthcare. If there were to be problems with any of these attributes it would be detrimental.

Testing: COVID-19 testing factors including cost, ease of access, accuracy, speed and quality are all important in determining if you have COVID. 

Video: https://drive.google.com/file/d/15DV8tg08H0BP_rmsRv6RrxnGSlI8UFUK/view

Example tuple: ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ozh9irqkljk0xg3bmya7.png)
209. Minimum Size Subarray Sum
Published: 2020-09-07 00:15:11

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2f4u8fejfza5ns963h1k.jpg)

###Question:
Given an array of n positive integers and a positive integer s, find the minimal length of a contiguous subarray of which the sum ≥ s. If there isn't one, return 0 instead.

###Example: 
```
Input: s = 7, nums = [2,3,1,2,4,3]
Output: 2
Explanation: the subarray [4,3] has the minimal length under the problem constraint.
```

###Solution:
Time complexity: O(n)
Space complexity: O(1)
```javascript
var minSubArrayLen = function(s, nums) {
    let windowSum = 0
    let output = Infinity;
    let windowStart = 0;
    for (let windowEnd = 0; windowEnd < nums.length; windowEnd++) {
      windowSum += nums[windowEnd];
      // shrink the window until the windowSum is smaller than s
      while (windowSum >= s) {
        output = Math.min(output, windowEnd - windowStart + 1);
        // subtract the element at the windowStart index
        windowSum -= nums[windowStart];
        // change windowStart to the next element
        windowStart++; 
      }
    }
    return output == Infinity ? 0 : output;
};
```
Intro to Objects Part 1
Tags: javascript, beginners
Published: 2020-09-07 00:13:00

**Intro**
Normally in Javascript Arrays are a great way to store ordered data. But what if we wanted to store data that doesn't need to be ordered such a person's personal information. This is where using storing the data as an object is very useful.

**Object Syntax**
To create an object we use the following syntax:

```
const myObject = {
key:value
}
```
So lets take the personal information of a person named John and store it into an object:
```
const myProfile = {
  name:"John",
  age: 32,
  hair: "brown",
  weight: 175
}

``` 

**Quick Note About Keys**
If you create an object with a key that it is number it will convert it to a string. Example:

```
const myObj = {
32:'Magic Johnson'
// the key 32 will be converted to '32'.
}
```

**Accessing Data in Objects**
Rather than accessing data using an index like we do with arrays we use custom keys.

There are two different ways to access a property in an object.

```
objectName.propertyName
```

or 

```
objectName["propertyName"]
```

Lets look back at our profile example and access John's age using both techniques:

```
const myProfile = {
  name:"John",
  age: 32,
  hair: "brown",
  weight: 175
}

myProfile.age // output 32
myProfile["age"] //  output 32
```

**Adding and Updating Properties**

What if we wanted to add an eye color to John's profile? We simply do that using the following syntax:

```
const myProfile = {
  name:"John",
  age: 32,
  hair: "brown",
  weight: 175
}

myProfile.eye = "blue"

console.log(myProfile)

/* output
{
  name:"John",
  age: 32,
  hair: "brown",
  weight: 175,
  eye:"blue"

}
*/
```
Oh no we made a mistake John actually has green eyes. Lets's update that:

```
const myProfile = {
  name:"John",
  age: 32,
  hair: "brown",
  weight: 175,
  eye:"blue",
}

myProfile.eye = "green"

// myProfile["eye" = "green" would also work


console.log(myProfile)

/* output
{
  name:"John",
  age: 32,
  hair: "brown",
  weight: 175,
  eye:"green"

}
*/
```

As you can see with one line of code our profile now has John's eye color listed as green.

**Conclusion**

Now you know who to both create and manipulate javascript objects. In part 2 we will dive into more advanced syntax such as using methods in Javascript and how to use the this keyword.
Online coding classes
Published: 2020-09-07 00:03:10

Forever a beginner... except in Java. For all else, I am often on Ray Wenderlich or Coursera. I have begun this thing where I take a class on the same exact subject but on two different platforms. I think it covers more and gives me a better sense of what is going on with online learning. To compare classes somehow. They might not compare but some are better code than others.

I am a one-screen laptop person and I still haven't found a solution better than a book. This isn't practical with Swift and SwiftUI, though. Tomorrow my friend who is learning Javascript is coming over and we might try on the TV. I have enjoyed more theoretical subjects on the TV so much more than my phone or laptop but code cannot go out of focus or away any one second faster than I need it! What about hololens? I don't have the money to spend on those just to find out I despise them but I do hope very lightweight VR headsets come out someday and I can wear those while I code. 

There will always be the garden without screens or speakers.
What is the New in the go 1.15
Tags: go, go115, gofeatures
Published: 2020-09-10 07:39:33

---
title: What is the New in the go 1.15
published: true
date: 2020-09-07 00:00:00 UTC
tags: Go,golang,Go115,GoFeatures
canonical_url: https://www.loginradius.com/engineering/blog/what-is-the-new-go-1.15/
---

Go announce Go 1.15 released on 11 Aug 2020. Highlighted updates and features include Substantial improvements to the Go linker, Improved allocation for small objects at high core counts, X.509 CommonName deprecation, GOPROXY supports skipping proxies that return errors, New…

   
[Read On](https://www.loginradius.com/engineering/blog/what-is-the-new-go-1.15/)
Edit and Replay your network requests, direct from the browser
Published: 2020-09-07 09:02:36

---
title: Edit and Replay your network requests, direct from the browser
published: true
date: 2020-09-02 00:00:00 UTC
tags: 
canonical_url: https://jonhilton.net/debuggable-network-requests/
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/pqh9utbmq25nh9rx7na6.png
---

You know how it goes; you build your shiny new feature using Blazor, React, Vue, `<insert framework here>`.

You test locally; everything works as it should.

Then you push to production and…

… everything is broken!

Any number of things can break your app in prod but one of the biggies is data coming back (or being posted) via your network calls which doesn’t match what you expected.

For some time we’ve been able to inspect those network requests via the browser’s Dev Tools, to see what’s really going on.

![](https://jonhilton.net/img/BlazorWASMByExample/Network%20Requests.png)

You can inspect the request, check what parameters are being sent across, then look at the response and inspect the resulting data to see why your feature might be working the way it is.

But, what if you want to play with that request, tweak it’s parameters, or just replay the request, without having to drive everything from the UI?

Microsoft Edge now includes an **Edit and Replay** feature comes in, and it’s pretty darn useful.

So long as you’re using the new (actually really good) Chromium version of Edge, you can enable the shiny new **Network Console** for your browser.

With that, head over to any network request in the Dev Tools, right-click and select **Edit and Replay** and…

![](https://jonhilton.net/img/BlazorWASMByExample/EditableRequests.png)

The Network Console springs into life and shows you the request, including things like Query parameters, the request Body and Auth tokens etc.

From here you can click **Send** to replay the request, at which point you can easily inspect the response for that request…

![](https://jonhilton.net/img/BlazorWASMByExample/Response.png)

Then you can download the resulting json, or just edit the request and try again.

There are of course other ways to achieve similar results. I’ve been a big fan of a tool called Insomnia in recent years.

But, for testing authenticated requests it was always a bit of a pain to locate the JWT auth token, copy it and paste it across to Insomnia, then set up the request etc.

Now, with a couple of clicks you can replay requests right there in the browser, Auth tokens and everything!

It’s worth noting this is an **“Experimental Feature** so expect a few bugs here and there, but overall this looks like a big step forward for testing your client applications.

[Check out this post by Microsoft for all the details](https://docs.microsoft.com/en-gb/microsoft-edge/devtools-guide-chromium/whats-new/2020/06/devtools#edit-and-replay-requests-with-the-network-console) (including how to enable this in Edge).
Angular State Management With NGXS
Tags: angular, ngxs, redux
Published: 2020-09-10 07:40:02

---
title: Angular State Management With NGXS
published: true
date: 2020-09-07 00:00:00 UTC
tags: Angular,NGXS,Redux
canonical_url: https://www.loginradius.com/engineering/blog/angular-state-management-with-ngxs/
---

NGXS is a state management pattern + library for Angular. It acts as a single source of truth for your application's state, providing simple rules for predictable state mutations.

   
[Read On](https://www.loginradius.com/engineering/blog/angular-state-management-with-ngxs/)
Azure Resource Graph - Community samples
Published: 2023-09-13 15:42:21

---
title: Azure Resource Graph - Community samples
published: true
date: 2020-09-07 00:00:00 UTC
tags: 
canonical_url: 
---

In previous articles, I have shown you that Resource Graph Explorer is ultra powerful for querying your various Azure subscriptions.

Now it’s always more convenient to have a few queries on hand, because rewriting everything each time wastes time.

Microsoft provides a few examples on their site : [Simple queries](https://docs.microsoft.com/en-us/azure/governance/resource-graph/samples/starter?tabs=azure-cli) and [Advanced queries](https://docs.microsoft.com/en-us/azure/governance/resource-graph/samples/advanced?tabs=azure-cli)

However, I prefer “functional” queries, i.e. the ones I use during my work, because listing all KeyVaults with the name of the subscription is not something I do every day.

Therefore I have created a Github repository [Azure Resource Graph Queries](https://github.com/wilfriedwoivre/azure-resource-graph-queries) on which I invite everyone who wants to contribute to add Azure Resource Graph queries. You’ll find all the queries I’ve already put on my blogs.

To contribute, nothing could be simpler:

- Via a Github issue, you just have to create a Github issue with your Resource Graph query to add.
- Via a pull request by adding both your query and an explanatory readme.

The bonus, the ARM template part and the button to deploy it is added automatically for your request, as for the others.

And to finish, a small example of a request to find all your subnets that don’t have a Route Table.

```
resources
| where type == "microsoft.network/virtualnetworks"
| project vnetName = name, subnets = (properties.subnets)
| mvexpand subnets
| extend subnetName = (subnets.name)
| extend hasRouteTable = isnotnull(subnets.properties.routeTable)
| where hasRouteTable == 0
| project vnetName, subnetName

```
How to convert images to AVIF in NodeJS
Tags: avif, node, sharp, typescript
Published: 2020-09-09 12:54:39

---
title: How to convert images to AVIF in NodeJS
published: true
date: 2020-09-07 00:00:00 UTC
tags: avif, NodeJS, Sharp, Typescript
canonical_url: https://adamlacombe.com/blog/how-to-convert-images-to-avif-in-nodejs
---

 ![](https://adamlacombe.com/assets/blog/images/how-to-convert-images-to-avif-in-nodejs/main.png)


## What is AVIF and why should I be using it?
AVIF is the latest next-gen image compression format. It offers significant file size reduction for images compared with JPEG ( ~50% ) or WebP ( ~20% ). Chrome recently shipped support for [AVIF in Chrome 85](https://www.chromestatus.com/feature/4905307790639104#status) and it can be enabled in [Firefox](https://bugzilla.mozilla.org/show_bug.cgi?id=1443863) via the `image.avif.enabled` flag in `about:config`.

Take a look at this [blog post](https://netflixtechblog.com/avif-for-next-generation-image-coding-b1d75675fe4) published by **Netflix** if you're looking for a more in-depth comparison.

## How can I convert my images to AVIF?
[Squoosh](https://squoosh.app/) recently [shipped support](https://github.com/GoogleChromeLabs/squoosh/pull/722) for AVIF if you don't mind manually converting your images.

If you're looking for a more automated method, you could try using [Sharp](https://github.com/lovell/sharp). 
Sharp offers [support for AVIF](https://sharp.pixelplumbing.com/api-output#heif) although it is currently experimental. 

Unfortunately, Sharp's prebuilt binaries do not support AVIF, so you will have to compile `libvips` with support for `libheif` before you can start taking advantage of this "experimental" feature.

To simplify this process I created a [Dockerfile](https://github.com/adamlacombe/sharp-image-proxy/blob/master/Dockerfile) that I'm using in [sharp-image-proxy](https://github.com/adamlacombe/sharp-image-proxy).

If you aren't familiar with Docker, I suggest you read my post: [Introduction to Docker](http://adamlacombe.com/blog/introduction-to-docker).

Once you have `libvips` installed and compiled with support for `libheif` you can start using the Sharp API. 

Here's an example of how you can convert a png to avif:
```typescript
import * as sharp from 'sharp';

sharp('input.png')
  .toFormat('heif', { quality: 30, compression: 'av1' })
  .toFile('output.avif')
  .then(info => console.log(info));
```
New Release and Features: September 2020
Published: 2020-09-28 14:02:23

---
title: New Release and Features: September 2020
published: true
date: 2020-09-07 00:00:00 UTC
tags: 
canonical_url: https://api.video/new-release-and-features-september-2020
---

Summer is a great time to be outside, enjoying the weather, and spending time on holidays. This was the case here at [api.video](https://api.video) - we all got some much needed vacation and sunshine.Of course, that does not mean we were resting on our laurels. We’ve been very busy on our platform, making improvements and building for the future. This week we have a few new features that are released and ready for you (and your customers) to use:
1. \*\*Embedding videos on other platforms\*\*: All videos on our platform now support oembed, making sharing your videos on Facebook, Twitter, and other services easier. You can even natively play your videos on Twitter (and Facebook native playback is coming soon).<iframe border="0" frameborder="0" height="550" width="550" src="https://twitframe.com/show?url=https%3A%2F%2Ftwitter.com%2Fdougsillars%2Fstatus%2F1242816491084566529"></iframe> 
2. \*\*Private video update\*\*: Private videos previously used cookies to store the token that allowed viewing. Browsers are moving to block all 3rd party cookies (starting with Safari 13.1). We have rebuilt the private video token system to use headers, future proofing this feature. ([Read our updated Private Video Tutorial](https://api.video/blog/tutorials/inserting-custom-headers) for more information.
3. \*\*Chapters\*\*: api.video allows you to mark [chapters](https://api.video/blog/tutorials/adding-chapters-to-your-videos) in your video, allowing your users to easily jump to different sections. Chapter breaks now appear in the timeline of the video, making seeking faster for your users. Here, we can see that we are in the “Jupiter” section of the video: https://www.datocms-assets.com/26885/1599473048-screenshot-2020-09-07-at-10-57-35.png
4. The player’s default colours are now orange, as seen in the timeline above, and the play button below:https://www.datocms-assets.com/26885/1599473103-screenshot-2020-09-07-at-11-04-48.pngIf you want to customise the colors of your video player, please look at the custom player tutorial we just published.5. New [Player SDK](https://github.com/apivideo/player-sdk) with more features to control the player with Javascript. The sdk now gives access to all methods implemented in the player to support [playerjs.io](https://playerjs.io).

 Note that the player object *apiVideoSdk* is now *PlayerSdk*. We have a lot more in store for the coming months. 

If you’d like to help us build api.video, check out our [jobs](https://jobs.api.video/) page. If you have suggestions for new features, please leave a note on our [community forum](https://community.api.video/).
Sitecore Identity Service - Max Client Secret Length
Tags: sitecore, identityserver
Published: 2020-09-07 07:51:57

---
title: Sitecore Identity Service - Max Client Secret Length
published: true
date: 2020-09-07 00:00:00 UTC
tags: Sitecore, IdentityServer
canonical_url: https://robearlam.com/blog/sitecore-identity-service-max-client-secret-length
---

So in the process of developing the new MVP site, we ran into a couple things that other developers might encounter. So I wanted to start covering some of them here. The first of those are the rules about the Identity Server Client Secret.With the release of Sitecore 10, a new Sitecore CLI was released. This allows for headless authentication when deserialising content automatically, say during a CI process. You can achieve this by using a command like so:

```
dotnet sitecore login --client-credentials true --auth https://mvp-id.sc.localhost/ --cm https://mvp-cm.sc.localhost/ --allow-write true --client-id "<<client_id>>" --client-secret "<<token>>"
```
Now I was trying to use a very long Token value for this. I originally started with a 128 char token, but the authentication kept failing with the following error
```
Error while getting client credentials token: invalid_client
```
It took a bit to figure out, but the key to this became clear once I viewed the logs for my ID server instance, I did this using the following command:
```
docker logs mvp-site_id_1
```
After wading through the logs I saw the following entry that made it all very clear!
```
IdentityServer4.Validation.PostBodySecretParser [Error] Client secret exceeds maximum length.
```
So after some trial and error with tokens of different lengths, it turns out that the Max Length supported is 101 chars. So when creating Client Secrets for Sitecore 10 you need to make sure that you stay under that length!</token></client_id>