teleren/devto huggingface dataset:
JVM Ecosystem Report 2021
Tags: java, jvm, kotlin, groovy
Published: 2021-06-21 10:12:06

Snyk has just released the annual JVM ecosystem report! This report presents the results of the largest annual survey on the state of the JVM ecosystem. 

This year's survey is a cooperation between [Snyk](https://snyk.io) and [Azul](https://www.azul.com/) and was slightly different from the previous surveys. We aimed for the survey to be more concise and focus only on the most important aspects of JVM developers today. Additionally, this year every participant was allowed to choose multiple options. We believe that the way the 2021 survey was designed, we have a better and more comprehensive view of the current JVM ecosystem. In this report, we also looked at different open data sources like GitHub and Google Trends to see how that data compares to the survey results.

Next to the results, there are some great highlight stories in this report like:

- ___Java, Changing Faster Than Ever After 26 Years___ by [Simon Ritter](https://twitter.com/speakjava)
- ___The State of Spring___ by [Josh Long](https://twitter.com/starbuxman)

## Report Highlights:

![Highlight for the JVM Ecosystem 2021](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/syqkdt7oiy7kjf08vyms.png)

The highlight of the 2021 JVM Ecosystem report
We would like to thank everyone who participated and offered their insights on Java and JVM-related topics. Big shoutout to [Foojay.io](https://foojay.io), the [VirtualJUG](https://virtualjug.com), and other Java communities for the invaluable help. This massive effort results in an impressive number of developers participating in the survey, giving great insight into the current state of the JVM ecosystem.

###[Read the full report](https://snyk.io/jvm-ecosystem-report-2021)
Open all your job related apps with one click.
Tags: python, gui, tkinter, windows
Published: 2021-06-21 10:06:20

Don't let the word tkinter fool you, this is what the apps main page looks like.
![main page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/buqyiu8voksqz4033mw7.PNG)

This is the group edit page.
![edit page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hcj59cd3dllqg9wzqzum.PNG)

## what does it do.
Allows the user give a list of all the apps (currently 5 apps are supported) related to a task and then opens all the apps with a single click. It can also run one bat script. If you are fancy and want to do something with it.

## Installation
Click [here](https://adwaith-rajesh.github.io/exekute/#installation) to read more about installation. (Windows executable is available)
How to convert a custom Chrome extension to a .crx extension / file type
Tags: crx, chrome, customextension, extension
Published: 2021-06-21 10:00:01

Ever ran into an issue where you need to convert a chrome extension that you wrote or pulled from somewhere on GitHub?

Don’t you worry. I’ve got you covered.

You can convert it with just a few simple steps

**Steps:**

1.  Open Chrome
2.  type _chrome://extensions/_ in the search bar
3.  Toggle the Developer Mode in the upper right corner

![](https://cdn-images-1.medium.com/max/800/1*sOFuA4WT10qCisAkX7ux2A.png)

Developer Mode in the Upper right corner

4. After Enabling it, this will appear

![](https://cdn-images-1.medium.com/max/800/1*yBTcKmk_nwt8wi63K6tX-A.png)

5. Click on Pack Extension

![](https://cdn-images-1.medium.com/max/800/1*5A7nYcU2jaCKCtGGxRVQRQ.png)

6. Now this should appear. Leave the private key empty (it will be default) and click on browse Extension root dir.

7. Select the root directory of your extension and click pack extension

That's all you need to do. Your Crx file is now ready and generated. It will be present in the parent directory of your extension root.
Image Slideshow HTML CSS
Tags: image, slideshow, slider, htmlcss
Published: 2021-06-21 09:55:49

How to make an automatic image slider in HTML and CSS?

Hello readers, today in this blog I'm going to build an Automatic Image Slider in HTML CSS. Earlier I have created lots of Card with Sliding Animation but to date, I haven't built any Image slideshow. So without further ado let's get started.

What is an Automatic Image Slider?
Automatic image slide means the changing or sliding images and displays one by one and step by set. 
In this automatic image, slideshow users do not need to change images manually.

As you can see on the given Image on the webpage. Actually, this is not one image there are other 3 images that are hidden. Let's watch the following video then we will know the real demo or example of this automatic image slider or automatic image slideshow.  

You can download all source code from the given link. <a href="https://www.codinglabweb.com/2021/06/automatic-image-slider-in-html-css.html">Click Here To Download All Source Code</a>
Azure App Service - Dotnetcore app - 500 Error - IIS was not able to access the webconfig file
Published: 2022-07-05 10:50:55

---
title: Azure App Service - Dotnetcore app - 500 Error - IIS was not able to access the webconfig file
published: true
date: 2021-06-21 09:13:29 UTC
tags: 
canonical_url: https://lkgforit.com/azure-app-service-dotnetcore-app-500-error-iis-was-not-able-to-access-the-webconfig-file
---

 **When we get error:** IIS was not able to access the web.config file for the Web site or application. Ensure that the NTFS permissions for the web.config file are correct on accessing an Azure app service endpoint which is hosted with dotnet core Webapp or API, you can follow this article to troubleshoot it.

Sometimes we will get following error also based on the place your code fails: 500.30

Open Advanced tools menu in the App service left menu under development tools - as shown in below image.

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1624266106626/d8FihbJLC.png)

Click on Go link - as highlighted in below image.

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1624266162965/q6CleC6p5.png)

In the new window opened - click on Debug console and then select CMD as highlighted in below image.

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1624266220137/pQrUk8z38.png)

Click on site folder -> then wwwroot folder. Edit the web.config file inside the folder as shown in image below.

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1624266336525/ISlL3ocPw.png)

Copy the highlighted text in image below. (which in our case is .\SampleApp.dll)

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1624266395270/Sey4R2OMT2.png)

Then type in the following command in the cmd prompt shown below:

```
dotnet .\SampleApp.dll

```

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1624266534564/nKwSJ2wCo.png)

Then you will see the errors occurred on the app start in the console.

If there are no errors, then it will show this message:

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1624266631106/tbRAtLkl6.png)
Create a Barcode Generator Widget in Flutter
Tags: flutter, widget, barcode, mobile
Published: 2021-06-21 09:01:20

Do you need to generate a barcode in your Flutter app. This tutorial will help you generate different types of barcodes, including QR codes, using Syncfusion tools.

Get an overview of the [Syncfusion](https://www.syncfusion.com/ "Syncfusion") Flutter Barcode generator widget. This video explains how to add the [Syncfusion Flutter Barcodes](https://www.syncfusion.com/flutter-widgets/flutter-barcodes "Syncfusion Flutter Barcodes") package and a Barcode generator widget to a Flutter project. It explains how to change the symbology like QR Code and Data Matrix. It also explains how to display the input value along with the Barcode for human readability. 

{% youtube ckAHrT2CR8A %}
Canal+Kafka, a Fancy Way To Sync MySQL to Redis in Real-Time
Tags: database, redis, mysql
Published: 2021-06-21 08:54:01

You know what, besides Jedis and self-developed functions, there is still one more fabulous way you can take to sync data from MySQL to Redis in real time.

As it known to all, the combination of Canal & Kafka is widely implemented in ETL solution, however, it can also used to realize data synchronization between MySQL and Redis, which can help you build fast response applications.

Still no a clue? Here you go. Watch the video and learn how to do it step by step in 20 mins.
[Video Tutorials >](https://youtu.be/O-GoA6182mI)

【Related Resource】
GitHub Project: 
https://github.com/alibabacloud-howto/solution-mysql-redis-canal-kafka-sync

Canal：
https://github.com/alibaba/canal

Kafka-Redis-Writer：
https://github.com/alibabacloud-howto/solution-mysql-redis-canal-kafka-sync/tree/master/source/
The Right Way for Web Apps Theming. Dark-mode, light-mode, system and many more.
Tags: css, javascript, html, themes
Published: 2021-06-21 08:46:18

Recently I experimented with creating themes for my web apps and found many ways to create themes but there was conflict in the execution due to over-rides, so I will run with you through how I solved the issue.
#### So we will cover:
1. How to create themes.
2. The conflict between theming methods.
3. Resolving the conflict.

### How to create themes
There are three ways to create themes
1.**Using css variables**: Using both CSS and JavaScript, you define the variables in a parent element and using JavaScript call a function that changes the variable values, it can be reverted by calling a function that does the opposite of the previous function.
2.**Using additional classes**: Using JavaScript and CSS, you get the parent element and add a class containing the values you want to change and it can also be reverted using another function by removing the class.
3.**Using media queries**: Using CSS 
```css
@media (prefers-color-scheme: dark )
```, you can check mozzila documents to learn more, but what it does is update the elements styles according to the user's operating systems theme;

### The Theme Conflict
I was learning to use styled-components with next.js so I had both the media queries theme and was using the theme provider to update the theme, I was going for my user's having three themes to choose from i.e light, dark and system but when the user's system was in dark-mode the media query theme clashed with my themes from the theme provider.

### Resolving the Conflict:
I had to create a new .css file with a .dark class containing the styles I wanted to apply, so whether in dark-mode or light mode the class added takes precedence over
the other theming methods,
**To summarize the order of precedence of theming methods is** :
1. Class method
2. Media query method
3. Themes from theme provider (using styled-components)

### Extra:
Remember to save your client's last theme to the local storage or something to prevent bad UX and achieve consistent theme even on reloads.
Awesome blur)
Tags: html, css, ux, webdev
Published: 2021-06-21 08:25:04

I know that css have a blur property) but using only that property is not enough to get blur effect as shown in the image. Who knows how it can be done by css or who have some example?

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

ThankS)
8 Best Free Online Data Analytics Courses
Tags: datascience, analytics, analyst, machinelearning
Published: 2021-06-21 08:12:32

Are you looking for **Best Free Online Data Analytics Courses**? If yes, then this article is for you. In this article, you will find the **8 Best Free Online Data Analytics Courses** from various platforms. These free data analytics courses will help you to learn data analytics free of cost. 

**All courses are completely free.**

So give few minutes and find out the best free online data analytics course for you. Now without any further ado, let’s get started-
**[Click to continue reading...](https://www.mltut.com/best-free-online-data-analytics-courses/)**
npm: Making sense of versions
Tags: node, npm, javascript
Published: 2021-06-21 08:11:30

While giving a code walkthrough, some one recently asked "How do we keep our dependencies updated?" and "what is the meaning of caret `^` in `package.json`?". This seems like a very easy question, but sometimes it confuses people and i feel it's good to know these little things.

### Introducing Semantic Version

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eyjv0ezqrjvyru999ez3.png)

- `tilde` (`~`) in `package.json`, it means when someone gets your repo or package and try to install the library, it is going to install latest `patch` version.

So if `package.json` looks like this:
```json
...
"dependencies": {
  "some_dependencies": "^4.17.1",
},
...
```

So if the latest version is `4.17.11` then `4.17.11` version is going to be installed.

- `caret` (`^`) in `package.json`, it means when someone gets your repo or package and try to install the library, it is going to install latest `minor` version.

so if `package.json` looks like this:
```json
...
"dependencies": {
  "some_dependencies": "^4.17.8",
},
...
```

And latest version is `4.18.9`, then if we do `npm i` it is going to pick up `4.18.9` version.

- When it is written as (`"lodash": "*"`) it basically says to go ahead and install its absolute new version. This is not always a good idea, it might break your system, so we need to plan these kind of changes.

#### More read on Semantic Versioning
* [About Semantic Versioning](https://docs.npmjs.com/about-semantic-versioning)
* [NPM Semver Calculator](https://semver.npmjs.com/)

-- Thanks, Ravi
How to generate Laravel 8 Login / Registration (Authentication)
Tags: laravel, programming, php, tutorial
Published: 2021-06-21 08:01:26

As Laravel 8 has removed default auth Scaffolding, I will explain about adding auth scaffolding in Laravel 8.

we can add the `laravel/ui` package has bootstrap and Vue UI Component and auth scaffolding.

To know more about this package you can visit 
[Github Laravel UI](https://github.com/laravel/ui).

##Steps To Add in Laravel 8

###Step 1
Include the `laravel/ui` package into project,

```php
composer require laravel/ui
```

Once the `laravel/ui` package has been installed, you may install the frontend scaffolding using the `ui` Artisan command:

```php
// Generate basic scaffolding...
php artisan ui bootstrap
php artisan ui vue
php artisan ui react

// Generate login / registration scaffolding...
php artisan ui bootstrap --auth
php artisan ui vue --auth
php artisan ui react --auth
```

###Step 2
After including UI Components now we have to add CSS and JS Files, For that, we need to run the following commands.

```javascript
npm install
npm run dev
```

You can watch this video I have explained this.

{% youtube GixbjPkMVtE %}


Thank You for Reading

Reach Out To me.
[Twitter](https://twitter.com/techtoolindia)
[Instagram](https://www.instagram.com/techtoolindia/)
[TechToolIndia](https://youtube.com/techtoolindia)
Node.js Files app
Tags: node, javascript, totaljs, apps
Published: 2021-06-21 07:42:00

We are happy to announce a new __Node.js app__ called **Files**. **The Files app** is a simple Node.js web application for storing and managing files on the server. The app is fully open-source, and you can modify it according to your needs.

- [Join Total.js Telegram](https://t.me/totaljs)
- [Run __Files app__](https://www.totaljs.com/files/?run=1)
- Open-source (__MIT license__)

![Node.js Files app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rol94ji290x90n9nolig.png)

## Files app

- __without dependencies__
- __without database__
- uncomplicated usage
- supports drag & drop uploading files
- supports search
- supports Total.js Message Service (TMS)
- beautiful user interface
- nice features
- fully extensible

__Requirements__:

- Node.js +v12
- Total.js 4 - `$ npm install total4`
- Download and run

__Links__:

- [Files website](https://www.totaljs.com/files/)
- [__Download source-code__](https://github.com/totaljs/files)
- [Join our community](https://t.me/totaljs)

## Try Total.js Files today

You can try __Total.js Files__ in [__Total.js Cloud__](https://www.totaljs.com/files/?run=1) or download the repository, and follow install instructions.
String comparisons with zero(0) in PHP

Tags: php, programming
Published: 2021-06-21 06:55:39

##The Problem
Strange things happen when you compare any string with zero (0) in PHP. Let me show this to you first. Then we’re going to know “WHY?”
```php
<?php
var_dump(0 == "something");        // bool (true)
```
Isn’t that strange? Let me show you this strange behavior with another approach with a switch case. Cross your fingers before running this code.

```php
<?php
switch ("something") {
case 0:
    echo "Strange";
    break;
case "something":
    echo "All is well";
    break;
}

// Strange    WTF??
```

What is going on? It should print *All is well*, isn’t it? So, why is PHP showing this kind of output? Moreover, this kind of output can lead us to creating a bug in our code. Quite often this kind of bug happens where the comparison is implicit, such as `in_array()` or `switch` statements like in the above code. Let’s see what happend in `in_array()` situation:

```php
<?php
$languages = ["C", "C++", "PHP",];
$value = 0;
var_dump(in_array($value, $languages));         // bool(true)
```


##The Happening
Did you watch the movie *The Happening* released in 2008? The story is about a mysterious toxic air, causes people to kill themselves. Let's not talk about the movie, right now we need to talk about the happenings of the toxic code. So, how did this happen in PHP?

In PHP, when a string compares with a number, the string is converted to number, due to php’s non-strict comparison semantics. In strict mode that means when we use === the type and value are compared but in non-strict mode (==) just value will be compared. In that case the type of the values are converted into integers. That's the process of how php executes. So, Let's check which string converted to what.

```php
<?php
var_dump((int) "0");                // int(0)
var_dump((int) "01");               // int(1)
var_dump((int) "10");               // int(10)
var_dump((int) "something");        // int(0)
```
There’s the magic of implicit conversion. Now we know numeric strings convert into integers but when it comes to ordinary strings it converts into zero (0). When “something” converts into zero (0) as we see, the value becomes equal so the output of `“something” == 0` is became true.

##The Saviour
Now it’s time to introduce The Saviour which is PHP 8. PHP 8 solves this problem with the proper rules. From now on when it comes to implicit conversion of string to numeric PHP first check on whether the string is a numeric string or not. If it’s a numeric string then the string converts into numeric, otherwise it returns false.

```php
0 == “something”             // false  [in php 8]
0 == “something”             // true   [in php 7]
```
How to Customize the Tooltips in React Charts of Syncfusion
Tags: reactnative, charts, tooltips, webdev
Published: 2021-06-21 06:52:58

**Syncfusion React Charts**
The [Syncfusion](https://www.syncfusion.com/react-ui-components "Syncfusion") React Chart is a well-crafted charting component to visualize data. It contains a rich UI gallery of 30+ charts and graphs, ranging from line to financial that cater to all charting scenarios. Its high performance helps render large amounts of data quickly. It also comes with features such as zooming, panning, tooltip, crosshair, trackball, highlight, and selection.

Learn how easily you can enable and customize the tooltip in the [Syncfusion React charts](https://www.syncfusion.com/react-ui-components/react-charts "Syncfusion React charts"). This video explains how to format the tooltip content and render an HTML template in the tooltip.
 
Download the example from GitHub: 
https://bit.ly/3vvxEQR

Refer to the following documentation for the adding tooltip in the Syncfusion React Charts: 
https://bit.ly/3zBXh63

Check out this online example of the tooltip template in the Syncfusion React Charts: 
https://bit.ly/35xJAY0
{% youtube nQhhLNUzyM4 %}
Cross platforms App Development
Tags: mobile, android, ios, html
Published: 2021-06-21 06:47:33

Apps have become an integral part of our lives. Choosing the correct type of app is always dependent on your business goals and current situation. However, choosing between the option of a cross-platform app and a native app isn’t as easy.

Cross platforms apps are compatible with multiple platforms after being coded only once. Cross-platform apps can provide an interface and feel the same as that of a [native mobile app.](https://darkbears.com/mobile-application-development) Their development includes writing just one code for the core logic, which is usually over 70% of the total code, whereas the rest of it is the one that decides the interface for each platform.

Here are some examples of [Cross platforms apps.](https://darkbears.com/hire-mobile-app-developer)
For More [Visit Our Business.](https://bit.ly/3uwXhRd)

![Cross-platform apps](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qkifvrutut8v8xpirz7k.jpg)
Testbuilder comments v1
Published: 2021-06-21 06:42:21

1. wise choice of variable declarations!
2. general rule of thumb is: if a value or a method/function is used 3. more than once with the same arguments, setting a variable for it may be a good idea
4. instead of having JS constantly process a function call, we can process it once, save it in memory (a variable) and just use this data from memory for more efficiency ⚡

CONS - 
Variable Naming
we should name variables very explicitly, like plain English.
1. do not create numbered variables; avoid naming variables like x1, x2, x3 etc, even if the number has some meaning!
2. consider using a name such as firstTwoDigits or firstTwoCharacters
3. using a mathematical range detection approach would be a more efficient process ⚡
4. instead of having JS process 5 separate conditions, we can speed things up by checking 2 conditions
just remember to adhere to best practices and convert your string into a number
5. we can shorten our code a LOT if we were to use native JS methods such as .includes/.indexOf
that would address the work that we're doing within this entire loop~
6. instead of this very "hard-coded" approach, consider using the card variables above with our detection ```
  if ( ( card === '38' || card === '39' ) && cardNumber.length === 14) {

    return "Diner's Club";

  } ```
this type of approach would allow for us to address (1) network per if block which reduces the amount of repetitiveness

7. we can create a library of helpers for each card network
this type of work is a bit less on priority as it is our main duty to pump out a working product more than a perfect product
the idea here is to build a library of "alike" functions that all do the same thing
they all just want to confirm whether or not the card belongs to their network
inside these helpers is where we want to use our other helpers to help with the detection

8. JS's type coercion will always prioritize String data types
therefore, there is no need to call .toString here