teleren/devto huggingface dataset:
400. that’s an error. your client has issued a malformed or illegal request. that’s all we know.
Tags: internet, youtube, errors
Published: 2020-12-16 17:43:11

Sometimes the users encounter an error when they try to visit any youtube page from a Windows PC. This error message will be “Your client has issued a malformed or illegal request. That’s all we know”. This error indicates that youtube serves is incapable of processing your request due to a client error. This error usually happens due to invalid request message, framing, or a deceptive request routing.

#Solution:
This error can be solved by various methods. Some of them are;

Deleting the gsScrollPos cookie via siteData
Remove the gsScrollPos cookie via Developer Tools
##Method 1:
Open google chrome and type “chrome://settings/siteData” in address bar.
Use the search function in the top-right corner and search for “youtube”. After hitting Enter you will see two separate sets of cookies. After this hot Remove all shown button above them to delete any related youtube cookie.

---
title: 400. that’s an error. your client has issued a malformed or illegal request. that’s all we know.
tags: youtube, error,internet
canonical_url: https://kodlogs.com/blog/1928/thats-error-client-issued-malformed-illegal-request-thats
---
##Method 2:
Open google chrome and ignore “Youtube Error 400” for now. Instead, press Ctrl+shift+I to open Developer Tools. You can check canonical link for that. Thanks!
DO App Setup
Tags: dohackathon, performance, webperf, testing
Published: 2020-12-16 17:41:38

Yesterday I spent a couple of hours of coding in Python and Flask for my **Explain JMeter** app. Locally it is working okay. But when I try to deploy the app in DO, I was getting no error but the deployment failed. 🛑

After googling, I installed `waitress` package and configured the port in the Python file, it ran successfully in development environment.✈

In DO, I had to configure the build command and the port for the deployment.

All is cool now. 😎

Now, back to implement the features.

Thanks to [Sandor](https://dev.to/sandordargo/devanalytics-at-dohackathon-backend-returning-useful-data-2m0g) for his insights. 🙏
How to get client IP address using JavaScript in html
Tags: html, javascript
Published: 2020-12-16 17:37:09

#How it works?
JavaScript performs as a third party server-side language when we try to get the client IP address. In this process JQuery play it’s big role because JavaScript can not do it alone. JavaScript performs with third party applications to retrieve the IP addresses. These are the application services that retrieve the user IP assress and easily return it in three formats. There are plain text, JSON, and JSONP format. In this article we are going to use ipify and ipinfo tools with a view to finding IP addresses. 

---
title: How to get client IP address using JavaScript in html
tags: html, javascript
canonical_url: https://kodlogs.com/blog/233/how-to-get-client-ip-address-using-javascript-in-html
---

##What can we do to solve it?
**Method 1:** In this method we are showing the example ipify for SSL contained websites (griping https protocol) to gain the clients IP address.
Code:
```
<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Getting Clients IP</title> 
    <style> 
        p, h1 { 
            color: green; 
        } 
    </style> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> 
    </script> 
  
    <script> 
        /* Add "https://api.ipify.org?format=json" statement 
           this will communicate with the ipify servers in 
           order to retrieve the IP address $.getJSON will 
           load JSON-encoded data from the server using a 
           GET HTTP request */ 
  
        $.getJSON("https://api.ipify.org?format=json", 
                                          function(data) { 
  
            // Setting text of element P with id gfg 
            $("#gfg").html(data.ip); 
        }) 
    </script> 
</head> 
  
<body> 
    <center> 
        <h1>GeeksforGeeks</h1> 
        <h3>Public IP Address of user is:</h3> 
  
        <p id="gfg"></p> 
  
    </center> 
</body> 
  
</html> 
```
You can check the other method on the canonical link.
Flux to List – How to convert Reactor Flux to List/Map
Published: 2020-12-16 17:10:11

Flux to List – How to convert Reactor Flux to List/Map

![Flux to List – How to convert Reactor Flux to List/Map](https://loizenai.com/wp-content/uploads/2020/12/Reactor-Flux-to-List.png)

What is a Reactor Flux? A Flux is a Reactive Streams Publisher , augmented with a lot of operators that can be used to generate, transform, orchestrate Flux sequences. It can emit 0 to n elements ( onNext event) then either completes or errors ( onComplete and onError terminal events).
In this tutorial, I introduces ways to convert Reactor Flux into List/Map.

## I. Ways to convert Flux to List, Map
We will use Flux methods such as:
– collectList(): accumulate sequence into a Mono<List>.
-> Collect all elements emitted by this Flux into a List that is emitted by the resulting Mono when this sequence completes.

– collectSortedList(): accumulate sequence and sort into a Mono<List>.
-> Collect all elements emitted by this Flux until this sequence completes, and then sort them in natural order into a List that is emitted by the resulting Mono.

– collectMap(): convert sequence into a Mono<Map>.
-> Collect all elements emitted by this Flux into a hashed Map that is emitted by the resulting Mono when this sequence completes. The key is extracted from each element by applying the keyExtractor Function. In case several elements map to the same key, the associated value will be the most recently emitted element.

– collectMultimap(): convert sequence into a Mono<Map> that each Map’s key can be paired with multi-value (in a Collection).
-> Collect all elements emitted by this Flux into a multimap that is emitted by the resulting Mono when this sequence completes. The key is extracted from each element by applying the keyExtractor Function, and every element mapping to the same key is stored in the List associated to said key.

Then the Mono result above will be converted into a real List, Map using block() method.

## Initialization Reactor Flux

See at: https://loizenai.com/flux-to-list-reactor/
DO Hackathon Submission: Portfolio
Tags: dohackathon, react
Published: 2020-12-16 17:03:30

## What I built

I rebuilt my new portfolio in the past 2 or 3 weeks. When I read about the [announcement](https://dev.to/devteam/announcing-the-digitalocean-app-platform-hackathon-on-dev-2i1k) of the #dohackathon, I told myself, f*ck it. I'll submit this website, just for experience. 

### Category Submission: 
Portfolio

### App Link
https://studio.icvn.tech

### Screenshots
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/pdtlaccg64a192kylgeg.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/f3u26palyjiyhpanph45.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/x7253mbk65jzu7k8bmmy.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/qvoa0kpg375bqj1hqnqo.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/gudbjbu3ro05h482p0du.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1lx1g9wqlx3uvewn7op3.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/sqtvo31tjxh7f8qlzyf8.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/09y2ofaty85v76fy4pb3.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/g7anxd6loy5mindta4hp.png)

### Description

This website was built to showcase my past works as a freelance developer and to justify the rate to clients.
 

### Link to Source Code
{% github icvntechstudio/rebrand no-readme %}


### Permissive License
MIT License

## Background

My old portfolio came from a JAMSTACK template and was built on Gatsby and only had more or less 50 form inquiries hence the decision to rebuilt my portfolio. 


### How I built it 
The website is hosted on DigitalOcean's App Platform. 
I built the website using ReactJS, TailwindCSS, DatoCMS, GraphQL, Airtable, Mailchimp, Hubspot, Zapier, Discord, Cloudflare and AWS Cloudfront. Wew. 

Airtable is used as a database for the form submissions. I get notified on my discord when a user submits an inquiry on the contact form, which will then populate the tables on airtable. Then, an email will be sent from mailchimp that will get more information about what they need. Hubspot is used as a calendar and a more detailed form from the CTA at the header.

Aside from rebranding my old site, I built my new site to learn all the tech that I mentioned above, except for the Zapier, Mailchimp, Hubspot and Discord integrations.

### Additional Resources/Info
Old site can be seen at https://icvntechstudio.co
Hello, World!
Published: 2020-12-16 16:55:54

Yay!! This is my first post!!

I am Coder100 on [repl.it](https://repl.it/@Coder100). I have made numerous projects in nodeJS/TypeScript and ReactJS. I have also made a programming language in nodeJS: [CookeyLang (now Quiken)](https://github.com/cookeylang/cookeylang) with some help from other people!

I will be using dev.to to share some of my projects and also make some tutorials.

I hope you enjoy my posts and I look forward to making more!

Also you can reach me by joining my [discord server](https://discord.gg/4vTPWdpjFz)
Tips on How to Develop the Best Healthcare Marketplace App
Tags: ecommerce, healthcare, pharmacy, marketplace
Published: 2020-12-16 16:52:30

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/brvijf8lt5gvjfk2epzm.png)
This year the healthcare industry has significantly suffered from all known lockdown. This fact has served as a push to finally join the digital world, for it became clear: this is the last chance to run.

And it’s obvious, as because of global pandemic more and more customers let online shopping in their lives. And it relates to online pharmacy as well. So adoption of the eCommerce paradigm is a must, and either way, today’s circumstances will make even the most stubborn offline pharmacy business go eCommerce. 

Don’t wait for an “appropriate” moment, because it has already came, and see what capabilities a healthcare  marketplace app must have:

* **Working Schedule 24/7**. eCommerce healthcare marketplace should provide its customers with round-the-clock access to making a purchase, no matter if a store staff is available. It’s not a challenge at all for developers to make it possible;


* **Product Availability**. This is a proper case for eCommerce to prove itself, as digital systems allow connecting customers with multiple suppliers. There is no need to be tied to a certain storehouse. This is called inventory integration, and it exponentially simplifies healthcare business workflow management;

* **Delivery Service Providers**. Shipping option is an essential part of any online business. And under lockdown the door-to-door delivery is much appreciated. If your eCommerce healthcare marketplace has a well-organized supply chain, be sure that your business will be a top priority for buyers;

* **Social Commerce**. Promotional campaigns via social media is a necessity for any eCommerce niche. So it’s a great channel to update consumers with the latest discounts;


* **Online Consulting**. eCommerce tools come in handy in this case too. Using messengers, voice features or chatbots, clients can reach out to any professional they need, staying at home and skipping the phase of wasting time in lines. Offer your customers this convenient service too, and it will contribute to your faster healthcare business expansion.

This is just a couple of tips on how a successful healthcare marketplace can be developed. More recommendations you may find [in this article](https://dinarys.com/blog/create-an-online-healthcare-marketplace).
Building a quick and simple recipe finder app for Xmas
Tags: webdev, python
Published: 2020-12-16 15:08:48

# A Merry Little Recipe Finder App

This post is part of the [Anvil Advent calendar](https://anvil.works/advent). We're building one web app a day for 24 days, using nothing but Python!

For Day 16, I built a simple recipe searching app using [Anvil](https://anvil.works). It's built on top of [Spoonacular’s food API](https://spoonacular.com/food-api), and it was incredibly easy. 

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

## Using the API in Anvil

To build the app, you first need to sign up for a free API key. I stored my API key in an [app secret](https://anvil.works/docs/security/encrypting-secret-data) in Anvil. This way, the key is encrypted and can't be seen by others in my source code.

Next, I added the following lines to the [server code](https://anvil.works/docs/server), which return a list of recipe names and IDs based on a search query:

```python
@anvil.server.callable
def search(query):
    apikey = anvil.secrets.get_secret('api_key')
    query = anvil.http.url_encode(query)
    return anvil.http.request(f"https://api.spoonacular.com/recipes/complexSearch?apiKey={apikey}&query={query}", json=True)
```
To get information about the recipe such as its source and how long it takes to cook, the recipe ID is passed to the following function:

```python
@anvil.server.callable
def get_info(recipe_id):
    apikey = anvil.secrets.get_secret('api_key')
    return anvil.http.request(f"https://api.spoonacular.com/recipes/{recipe_id}/information?apiKey={apikey}", json=True)
```
## Building the UI

Now all that’s needed is a user interface to search for and display recipes. In an Anvil app, all you need is Python to build a front end for your apps. 

I added a TextBox to my recipe finder app and an event handler that runs when the user presses Enter in the TextBox. The event handler calls the search server function and displays the recipe names and photos in a [repeating panel](https://anvil.works/docs/client/components/repeating-panel):

```python
def search_box_pressed_enter(self, **event_args):
"""This method is called when the user presses Enter in this text box"""
    results = anvil.server.call('search', self.text_box_1.text)
    self.repeating_panel_1.items = results['results']
```

Each item in the repeating panel is a link. When clicked, it calls the `get_info` server function and triggers an alert with more information about the recipe:

```python
def link_1_click(self, **event_args):
"""This method is called when the link is clicked"""
    info = anvil.server.call('get_info', self.item['id'])
    alert(content=Popup(info=info), large=True)
```

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

You can use [the app](https://find-a-recipe.anvil.app) yourself to find the perfect recipe for your Christmas meal! (Or for any meal)

P.S. Check out the rest of our Advent calendar [here](https://anvil.works/advent) and our Hanukkah calendar [here](https://anvil.works/hanukkah)
How to detect caps lock using JavaScript
Tags: javascript, capslock, html, css
Published: 2020-12-16 16:42:56

Hello guys in this tutorial we will create Caps Lock Detector using html css and JavaScript
###How do you detect caps lock?###
To check if the caps lock is on, you use the getModifierState() method of the KeyboardEvent object: const capslockIsOn = event. getModifierState(modifier); The getModifierState() method returns true if a modifier is active; otherwise, it returns false

First we need to create two files index.html and style.css then we need to do code for it.

###Step:1###
**Add below code inside index.html**
```
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Caps Lock detector</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div class="form-row">
    <form method="post">
      <div class="field">
        <input type="text" name="name" placeholder="Enter Text Here...">
        <span id="caps-message">Caps Lock is on!</span>
      </div>
    </form>
  </div>
  <script type="text/javascript">
    const CapsMessage = document.querySelector("#caps-message");
    window.addEventListener("keyup", event => {
      if (event.getModifierState("CapsLock")) {
        CapsMessage.style.display = "block";
      }else {
        CapsMessage.style.display = "none";
      }
    });
  </script>
</body>
</html>
```
**Step:2**
Then we need to add code for style.css which code i provide in below screen.

####Read full article of how to detect caps lock using JavaScript ↡ ####
<a href="https://blog.stackfindover.com/how-to-detect-caps-lock-using-javascript/" rel="dofollow">Read More</a>
[Video] Ionic Vue CRUD Example App using Supabase.io, “The Open Source Firebase Alternative”
Tags: ionic, vue, javascript, tutorial
Published: 2020-12-16 16:39:13

####[See My Upcoming Book On Ionic & Vue JS](http://bit.ly/ionicvuebook)
---
>**[See The Whole Video Series Here](https://dev.to/aaronksaunders/video-series-getting-started-vuejs-supabase-io-the-open-source-firebase-alternative-50n2)**

I stumbled across [Supabase.io](https://supabase.io/) a while ago but got interested again when I saw they just got [6M in funding](https://techcrunch.com/2020/12/15/supabase-raises-6m-for-its-open-source-firebase-alternative/) so I figured I would take it for a spin and also do some live coding.

The website says
> The Open SourceFirebase Alternative
> 
> Create a backend in less than 2 minutes. Start your project with a [Postgres Database](https://www.postgresql.org/), Authentication, instant APIs, and real-time subscriptions.

The video is here along with the source code. To get the project to work you will need your own credentials and then modify the `config.js` file
```javascript
import { createClient } from "@supabase/supabase-js";
const SUPABASE_KEY = "FILL_IN_FROM_YOUR_SUPABASE_PROJECT";
const SUPABASE_URL = "FILL_IN_FROM_YOUR_SUPABASE_PROJECT";
export const SUPABASE_CLIENT = createClient(SUPABASE_URL, SUPABASE_KEY);
```
- [Link To Source Code In CodeSandbox.io](https://codesandbox.io/s/livestream-ionic-vue-crud-example-app-using-supabaseio-klmzt)

{% youtube vkEJWFQwAOM %}

### Supabase On Dev.to
https://dev.to/supabase

[![ko-fi](https://www.ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/W7W31U7HM)
Conceptual Programming Practice Problems
Tags: python, cpp, javascript, programming
Published: 2020-12-16 16:12:43

***Read it Before Solving*** : 

Solve As Much as possible, Add Points to your notes if you find something new, make a separate folder for all these programs. Remember, these programs are easily accessible on the Internet. Think of the Questions, but don't give more than 15 minutes to a single question, if you are unable to solve it for now, mark it for later ( next day or so ) and then try it again and if you are still unable to do that, Google that question.
Do Note the points you learnt from harder problems or new problems.If you are at medium level, you can skip the initial very basic problems of the topics and head towards the medium and complex questions.

Problems List : https://bit.ly/basicPractice

*It is my new initiative, many more to come, theories and more other resources. Depends on the response from you.*
AzureFunBytes New Episode Reminder - 12/17/2020: Azure Functions and .NET with @maximrouiller
Published: 2020-12-16 16:12:20

New #AzureFunBytes - 12/17/2020 2 PM EST

Welcome back to AzureFunBytes, where we take a tour of the fundamental resources that make up Azure.  This week we dive deeper into [Azure Functions](https://azure.microsoft.com/services/functions/?WT.mc_id=devops-11841-jagord) with [Cloud Advocate Maxime Rouiller](https://twitter.com/maximrouiller).  Maxime will share how to best utilize Visual Studio Code to create the Azure Functions that simplify your applications and IT processes.

Azure Functions is a serverless solution that allows users to focus more on code and less on the underlying systems that serve your applications.  Work on what's important to your users to ship features faster, reduce total overhead for your operations team, and implement [Continuous Integration and Continuous Delivery](https://docs.microsoft.com/azure/azure-functions/functions-continuous-deployment?WT.mc_id=devops-11841-jagord) for that "DevOps" workflow.  

{% youtube KkxudCUYB30 %}

Learn about Azure fundamentals with me! [Microsoft LearnTV!](https://docs.microsoft.com/learn/tv/?WT.mc_id=devops-11779-jagord) The most interactive way to join the show!

Live stream is available on Twitch at 2 pm EST Thursday. You can also find the recordings here as well:

https://twitch.tv/azurefunbytes
https://twitter.com/azurefunbytes
https://aka.ms/jaygordononyoutube

Join me, ask questions, and learn about Azure!

[Microsoft Azure Functions](https://azure.microsoft.com/services/functions/?WT.mc_id=devops-11841-jagord)
[Azure Functions C# developer reference](https://docs.microsoft.com/azure/azure-functions/functions-dotnet-class-library?tabs=v2%2Ccmd&WT.mc_id=devops-11841-jagord)
[Durable Functions](https://docs.microsoft.com/azure/azure-functions/durable/durable-functions-overview?tabs=csharp&WT.mc_id=devops-11841-jagord)
Quickstart: [Create your first function in Azure using Visual Studio](https://docs.microsoft.com/azure/azure-functions/functions-create-your-first-function-visual-studio?WT.mc_id=devops-11841-jagord)
Quickstart: [Create a C# function in Azure using Visual Studio Code](https://docs.microsoft.com/azure/azure-functions/create-first-function-vs-code-csharp?WT.mc_id=devops-11841-jagord)
[Microsoft Learn: Create serverless logic with Azure Functions](https://docs.microsoft.com/learn/modules/create-serverless-logic-with-azure-functions/?WT.mc_id=devops-11841-jagord)
[Microsoft Learn: Azure Fundamentals](https://docs.microsoft.com/en-us/learn/paths/azure-fundamentals/?WT.mc_id=devops-11814-jagord)
[Microsoft Azure: $200 Free Credit](https://azure.microsoft.com/en-us/free/?WT.mc_id=devops-11814-jagord)
An API Gateway
Tags: apigateway, microservices, dotnet, valdis
Published: 2020-12-16 15:51:48

It's years that microservice is a popular solution in distributed computing. People are now considering microservice as a response to a couple of issues in software engineering world. This includes performance, scaling and complexity. Major platforms include a good level of microservice support. This support is divided into few parts. One of this parts is **API Gateway**. This feature acts a distribution point. Every request is received at the gateway and the gateway distributes it to other microservice nodes based on different criterion.

## Valdis

Many folks have tried their chance on creating an API gateway in their favorite platform. I am no exception as today I created my own API gateway called [**Valdis**](https://github.com/afsharm/valdis). It is based on *.Net 5*. **Valdis** is a play on words *validation* and *distribution*. As its name implies, it validates the requests and then distributes them to existing microservice nodes. The way it works is not based on redirection, instead, it sends the request to the node internally, receives the answer and then sends it back to the original caller finally.

## How it works?

Navigation is based on the URL. There is a setting which indicates requests should be sent to what hosts. It checks if the URL is starting with a specific string. Hosts can be a list. Which host will be directed to is selected based on a random number. It can be imagined as a load balancing mechanism. See settings a clue:

~~~json
    "Providers": [
      {
        "Starting": "/warehouse",
        "Hosts": [
          "https://localhost:3000",
          "https://localhost:8080"
        ]
      },
      {
        "Starting": "/v1/common",
        "Hosts": [
          "http://localhost:3005",
          "https://localhost:8000"
        ]
      }
    ]
~~~

## Next step

I'm going to add token validation based on JWT on next step. Also a good logging is desired.