teleren/devto huggingface dataset:
Productive Taskbar Settings missing in Windows 11
Tags: productivity, windows, settings, taskbar
Published: 2021-07-06 20:54:24

## Ungroup the Icons in Taskbar

If you are a person who likes to see all your open windows in the taskbar, with their titles for one click navigation, you would relate to my pain.

There used to be the option called `Combine Taskbar Buttons`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zm4vvoam5eohq2uelxe4.png)

Now in Windows 11, its gone !
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vgutboy53b2avrhw7g06.jpg)

This makes it super hard to navigate directly to your inteded window with a glance and click :(

## Position the Taskbar

Also there used to be the option of `Taskbar Location on Screen` which goes missing
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fn9ps8er9yt4mbyx4npp.png)

Now
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vgutboy53b2avrhw7g06.jpg)

This is a real productivity tool for many developers who rely on the left/right positioning to get more real estate for individual window titles, again for quicker navigation.

---

Not sure what the logic behind this is, but please bring these settings back Microsoft !
Reading values from appsettings.json in ASP.NET
Published: 2021-07-06 20:54:08

Let’s see how we fetch data from the appsettings.json file to the controller. First off we got to add some worthwhile data to the appsettings.json file, what is more worthwhile than the meaning of life?

```json
{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft": "Warning",
      "Microsoft.Hosting.Lifetime": "Information"
    }
  },
  "AllowedHosts": "*",
  "Settings": {
    "Home": {
      "MeaningOfLife": 42
    }
  }
}
```

Ok, so how do we access this data from our Home Controller? Via the awesomeness of dependency injection of course! In this case there is no need to configure the dependency injection in the Startup class. ASP will automatically add the IConfiguration instance to the dependency injection container. With the IConfiguration instance we have full access to all the information in the appsettings.json file. All we have to do now is to add IConfiguration to the constructor in our controller like this:

```csharp
namespace WebApplication.Controllers
{
  public class HomeController : Controller
  {
    private readonly IConfiguration configuration;

    public HomeController(IConfiguration configuration)
    {
      this.configuration = configuration;
    }

    public IActionResult Index()
    {
      int meaningOfLife = configuration.GetValue<int>("Settings:Home:MeaningOfLife");

      return View();
    }
  }
}
```

As you can see we can use the GetValue method to get the appsettings.json data from the IConfiguration instance. All we have to do is to specify the return type and the path to the key. Got a lot of settings? Maybe you got deeply nested sections in appsettings.json? No problem people, the GetSection comes to the rescue:

```csharp
public IActionResult Index()
{
  var homeSettings = configuration.GetSection("Settings:Home");
  var meaningOfLife = homeSettings.GetValue<int>("MeaningOfLife");

  return View();
}
```

First we’ll save the target section in a variable and then we use the GetValue method on that variable.

OK so that is it, there are a lot of ways to access the appsettings.json file and the ones in this post are the most basic ones. Another great way is to bind the sections to an object or using the options pattern.

Go configure!
Animate in style with Framer Motion
Tags: react, npm, animation, style
Published: 2021-07-06 20:47:44

![Alt text of image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iuansriqlzzjane7eiix.gif)

***

##If you're thinking:
>#####*"Wow,* **that** *looks complicated!"*

###or
>#####*"Wow,* **you've** *got time on your hands."*
>

***

##Then allow me to introduce **Framer-Motion**



As per https://www.framer.com,


>A production-ready motion library for React. Utilize the power behind Framer, the best prototyping tool for teams. Proudly open source.

To put it simply, 

*you can use framer-motion to create elegant animations like the one listed above in as little no time*.

##To start 

run the following command within your React application:

```react
npm install framer-motion
```

Once you've got that set up you're good to go.

What specifically you want to animate is up to your choice. Here I will show you an example that's easy to understand. 

Regardless of what you choose to animate, the options are endless.


##Let's begin with a *simple example.*


Let's say you have a div within a component like so: 

```React
<div>
   <h2>Header!</h2>
</div>
```

And you want to animate that header to *come from the right* and to *fade in*.

###First 
Import both AnimatePresence and motion from framer-motion

```React
import {AnimatePresence, motion} from "framer-motion"
```

This will allow you to add "motion." to whatever element you choose give animated capabilities. 

###Then
Add the code to your render

```React
<AnimatedPresence>
   <motion.div>
      <h2>Header!</h2>
   </motion.div>
</AnimatedPresence>
```

###Finally
Framer-motion gives *a ton* of options to fiddle around with. In this examples, we will only be using *opacity* and *x-coordinates*

```React
<AnimatedPresence>
   <motion.div 
       initial={{x: 100, opacity: 0}} 
       animate={{x: 0, opacity: 1}} 
       exit={{opacity:0 }}
       >
      <h2>Header!</h2>
   </motion.div>
</AnimatedPresence>
```

###Voila
You now have a basic understanding of how to implement framer-motion into your application with smooth animations!

![Alt text of image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tqarqa5v3wscrcskknme.gif)

##For details on the transition from the beginning
Check out this how-to guide by **CoderOne**!

{%youtube -bll7l-BKQI%}
Stylischer CSS oder SVG Hintergrund mit WordPress
Tags: wordpress, kadencewp
Published: 2021-07-29 15:08:51

---
title: Stylischer CSS oder SVG Hintergrund mit WordPress
published: true
date: 2021-07-06 20:44:49 UTC
tags: WordPress,KadenceWP
canonical_url: https://bloggerpilot.com/css-und-svg-hintergrund/
---

![Stylischer CSS oder SVG Hintergrund mit WordPress](https://bloggerpilot.com/wp-content/uploads/2021/07/css-svg-hintergrund.png)

Ein toller Hintergrund muss nicht immer aus starren Bildern bestehen....

[SVG Hintergrund mit WordPress erstellen](https://bloggerpilot.com/fluent-forms/)
Free Live lab: Deploying Kubernetes Apps in an Air Gapped Environment
Tags: kubernetes, airgap, security, lab
Published: 2021-07-06 20:41:38

Curious about how to manage #airgapped applications in #K8s but don't know where to start your learning journey? @replicatedhq can help with that! Join our free #airgap lab and gain hands-on experience installing a #Kubernetes application in an air gapped environment. Register [here:](https://info.replicated.com/air-gap-labs-virtual)
Developers don't like meetings - That's not true
Published: 2021-07-06 20:27:24

###### I am always posting provoking post on my Linkedin, and I have decided to replicate those here. [Let's socialize!](https://www.linkedin.com/in/alexsandro-souza-dev)


Some people say that developers don't like meetings, well, that's not really true. I appreciate being in the decision-maker meetings.

When we say we don't like meetings what we really mean is:

- "We dislike inefficiency."
- "we dislike poorly planned meetings."
- "We dislike poorly executed meetings."
- "We dislike not keeping our promises."
- "We dislike missing our team iteration deadline."
- "We dislike not getting enough time to do our job."

Having work done for developers and managers follows a different process:

- Managers get stuff done through meetings.
- Developers and other creators need 3-4 hour blocks of time to get work done.
- For a Dev, a single meeting at the wrong time can disrupt their entire day of work.

For everyone who has your work done through meetings,
beware that the meeting might be for you and you will get work done, so you're probably feeling great. Your team probably did not get work done and might not be feeling as great.

Developers are nice creatures and also feel great if they contributed to your work and for the company success. Just make sure they are required for those meetings.


### Free Advanced Java Course
I am the author of the [Advanced Java for adults course](https://www.udemy.com/course/advanced-java-for-adults/?referralCode=8014CCF0A5A931ADED5F). This course contains advanced and not conventional lessons. In this course, you will learn to think differently from those who have a limited view of software development. I will provoke you to reflect on decisions that you take in your day to day job, which might not be the best ones. This course is for middle to senior developers and we will not teach Java language features but how to lead complex Java projects. 

This course's lectures are based on a Trading system, an opensource project hosted on my [Github](https://github.com/apssouza22/trading-system).
Create NLP pipelines with drag and drop
Published: 2021-07-06 20:00:12

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9wcfnrjlfzizwlj1yegp.gif)

Recently I have started work on query builder GUI for my open source project [nlphose] (https://github.com/code2k13/nlphose).

I am using [Blockly](https://en.m.wikipedia.org/wiki/Blockly) to implement this feature.

Still in initial phase , I have uploaded video on YouTube which you guys can check out !

{% youtube X-BmStLY-DY %}
Kbc Head Office Number
Tags: kbc, kbcofficial, lotterywinner, kbcheadofficenumber
Published: 2021-07-06 19:56:04

We are KBC officials we give all information about how to play kbc official game. You can contact with <a href="http://www.kbcofficialprize.com/">kbc head office number</a> and on KBC official website.

You can get all information about kbc head office number, kbc whatsapp number, kbc official game, jio head office, whatsapp lucky draw, jio kbc head office number, kbc head office whatsapp number, kbc lottery winner on our <a href="http://www.kbcofficialprize.com/">kbc official website</a>.
Star rating with nothing but text!
Published: 2021-07-06 19:43:24

I think this is getting silly.

``` html
<input value='1' type='radio' name='stars'/> *
<input value='2' type='radio' name='stars'/> **
<input value='3' type='radio' name='stars'/> ***
<input value='4' type='radio' name='stars'/> ****
<input value='5' type='radio' name='stars'/> *****
```
I think mine has less bytes than the other solutions but I'm on my phone so forget accreditation or accessibility 😂. 
Good post folks?
Using DNSCrypt with AdGuard Home & Pi-hole
Tags: adblock, dnscrypt, adguard, adguardhome
Published: 2021-07-06 19:35:24

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

This will be a super simple and easy to follow guide to get you using DNSCrypt and utilize DNSSEC with AdGuard Home and/or Pi-hole on Linux.

1: Open your terminal of choice or ssh into the machine

2: run `sudo su` to become superuser

3: run `cd /opt` since this is where we install DNSCrypt

4: You need to download the latest binaries from [GitHub](https://github.com/DNSCrypt/dnscrypt-proxy/releases) with `wget` in this example we will use the 64bit version (since that is most common)

4.5: THIS ISN'T THE LINK YOU USE, use the latest release that is for your system `wget` is the correct tool for the job, this is how you download the file `wget https://github.com/DNSCrypt/dnscrypt-proxy/releases/download/2.0.46-beta3/dnscrypt-proxy-linux_x86_64-2.0.46-beta3.tar.gz`

5: run `tar xzvf dnscrypt-proxy-linux_x86_64=2.0.46-beta3.tar.gz` or whichever you have to download for your system

6: run `mv linux-x86_64 dnscrypt-proxy` or whichever is for your system, could be `linuxi386` or whatever you downloaded for your system.

7: Delete the tar file with `rm dnscrypt-proxy-linux_x86_64=2.0.46-beta3.tar.gz` or whichever file you have downloaded.

8: `cd` into the new directory with `cd dnscrypt-proxy`

9: use `mv` to rename the example to the config file we are going to use. `mv example-dnscrypt-proxy.toml dnscrypt-proxy.toml`

9.5: Now we are going to edit the newly created `.toml` file with our editor of choice, in this example I will use Vim but you can use nano, emacs, etc.

run `vim dnscrypt-proxy.toml` to begin editing the config file. This is a long file and mostly complete I will guide you through the lines you have to change.

`listen_addresses = ['127.0.0.1:53']` needs to be changed to `listen_addresses = ['127.0.0.1:5335']`

`require_dnssec = false` should be `require_dnssec = true`

10: From here you are ready to continue with setup, but this is a huge config file with lots of options, you can tinker as you see fit.

11: run `./dnscrypt-proxy -service install` and `./dnscrypt-proxy -service start` and `systemctl enable dnscrypt-proxy`

12. Now login to the admin portal of either Pi-hole or AdGuard Home, whichever you are using.

**Telling AdGuard Home to use DNSCrypt**

Go into your AdGuard Home admin panel and go to Settings -> DNS settings

In the Upstream DNS servers box you now put 127.0.0.1:5335 and apply.

**Telling Pi-hole to use DNSCrypt**

1. Go into Settings and go to Upstream DNS settings, uncheck every DNS box and check one custom IPv4 address, input `127.0.0.1#5335` and apply

**Finalize Configuration**
Make sure to enable DNSSEC in whichever software you are using with DNSCrypt.

If you have any issues or want to join a community of whole home adblocking/tech enthusiasts please check out: https://discord.gg/DGscCVPRme
LeetCode 15. 3Sum
Published: 2021-07-06 19:34:54

I used two pointers to calculate the sum.
To better deduplicate the results, I sort the nums first. Then create a bland list as the returning result.

I enumerate the nums from the first one and the two pointers are going from left to right and right to left at the same time.

To deduplicate the first number, if nums[i] encounters the same value as previous one, just do nothing and move forward. Then calculate the value sum with the values of left index and the right index. 

If the sum is greater than 0, then the right index can go left ward for a smaller value; if the sum smaller than 0, then we move the left index right ward to search a greater value. If the sum is 0, we append the triplet to the result. Then the left pointer move rightward. The right one we don't need to move it since it will move leftward if the sum > 0 automatically.

while to deduplicate the left index, if it finds the value is the same as the previous one, it will move rightward directly.

The corner cases are if the value of index i is greater than 0, then the sum cannot be zero anyway since the array already sorted. In this case, just break the for loop.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/94ac2m5ge7zeqf4sggyi.png)
Best Web Scraping Hacker News using Beautiful Soup

Published: 2021-07-06 19:29:10

The aim of this article is to get you started on real-world problem solving while keeping it super simple so you get familiar and get practical results as fast as possible.

So the first thing we need is to make sure we have Python 3 installed. If not, you can just get Python 3 and get it installed before you proceed

https://youtu.be/fQlnii4imeM
'npm' is not recognized as internal or external command : Solution
Tags: npm, node, git, computerscience
Published: 2021-07-06 19:05:44

## Introduction
When you have installed node.js on your OS but **unable to run the npm commands**, this blog will tell you how to fix this issue.
![intro](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mrfaf8g53z9au72rlvss.png)

## Let's get to it!
You might have already installed Node.js from the official website. with your respective OS. If you've not installed, [click here](https://nodejs.org/en/download/).
![Screenshot (317)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/29o2z3fimdw96mz3dt00.png)


1. **To make sure that you have node installed on your computer --**
Go to your drive (C:) -> Program Files -> you should find the node folder. 
![step1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iyha96vmegjkafyh6ooh.png)

2. **Copy the folder path of node**
Click on the node folder. To copy the path, you can **click on the drop down symbol**, then use **Ctrl+C** on the path *OR* right click on the path and then **click copy address**.
![step2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fcu8s63qhqj1zrfrelhe.png) 
👇
![step2.1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g7hsh37iiyfhxz6ankot.png)

3. **Change settings**
Go to **Control Panel** -> View advanced system settings  
![step3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ir4t55t91d9g93ovz7xr.png)
👇
In the Advanced tab -> click on **Environment variables**
![step3.1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m4bgh018278qok41jm7a.png)
Under System variables, click on **Path** and then click on **edit** as shown in the picture below emoji
![step3.2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tyfnvor1q05oapih3vq9.png)

Click on **New** 
![step3.3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/80hktljuxm1maocjt4qk.png)

In the new text field appeared, paste the folder path that you copied earlier and then click on **OK**
![steplast](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rmygiylnccfh9m7q64xq.png)



You're done!
Now, you will not get any errors.
![finalimg](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hqjlxy49pybf4gu0ugrb.png)

## Thank you for reading!🙌
[My twitter](https://twitter.com/SuprithaRavish1)

Like it and share it for more such articles.

### Like what I do?  
#### Support me by [buying me a coffee ☕](https://www.buymeacoffee.com/suprithaa).
YAML Validations
Published: 2021-07-06 18:55:55

In some pipelines or when a project build, we want to check if some files are build correctly like our YAML files!

So here is **YamlLint**!

You can find on their [website](https://yamllint.readthedocs.io/en/stable/) all that you will need to use it, but here is a quick look!

<br/>

# Quick look
## Setup
Depending your project/machine, you can :
- install it directly on your machine if you are on Linux
```bash
sudo apt-get install yamllint
```
- install it with **brew**
```
brew install yamllint
```
- add it in your Python project
```
python setup.py sdist
pip install --user dist/yamllint-*.tar.gz
```

Then you can use it directly with the default configs, or override it with your configs.


## Overiding configs
To do it, create a **.yamllint** file at the top level of your project. Then, in this file, you can enable/disable rules or override rules ...

*example*
```yaml
---

yaml-files:
  - '*.yaml'
  - '*.yml'
  - '.yamllint'

rules:
  braces:
    level: warning
    max-spaces-inside: 1
  brackets: enable
  colons: enable
  commas: enable
  comments:
    level: warning
  comments-indentation:
    level: warning
  document-end: disable
  document-start:
    level: warning
  empty-lines: enable
  empty-values: disable
  hyphens: enable
  indentation: enable
  key-duplicates: enable
  key-ordering: disable
  line-length: enable
  new-line-at-end-of-file: enable
  new-lines: enable
  octal-values: disable
  quoted-strings: disable
  trailing-spaces: enable
  truthy:
    level: warning
```

### Documentation links
- [YamlLint config](https://yamllint.readthedocs.io/en/stable/configuration.html)
- [Rules](https://yamllint.readthedocs.io/en/stable/rules.html)

## Run
Then, you can run the yaml lint to test it!

When you want to check some files
```bash
yamllint file.yml other-file.yaml
```

When you want to check all the files in the folder
```bash
yamllint .
```

---

# Alternatives
If you are working with a Maven project, maybe you want to check it during your build! In this case you can use this library: 

{% github sbaudoin/yamllint %}


---
# Links
- YAML Lint : https://yamllint.readthedocs.io/en/stable/
- GitHub Java YamlLint : https://github.com/sbaudoin/yamllint

---

I hope it will help you!

*Please don't hesitate to give me a feedback about this post to improuve my writing skills. Thanks!*
Reveal navbar on scroll
Tags: showdev, webdev, codenewbie, javascript
Published: 2021-07-06 18:22:08

## Intro and Motivation

[DesignCourse's](https://www.youtube.com/watch?v=RYUuGgC_IY0) Gary Simon just released a tutorial on the topic that sounds like the title of this blog (I'm not sure if my writing is eligible to be called as a blog :grin:)

After I watched that, I thought of recreating it and here I'm showing it to you all. 

## Let's Start
I'm sure you can write some markup and a lots of the **lorem** text. So we'll jump right to my javascript logic.

## The pre-requisites
- **window.pageYOffset** : It basically returns the position of scrollbar. Check out [More on pageYOffset](https://developer.mozilla.org/en-US/docs/Web/API/Window/pageYOffset)
- Basic JavaScript
- Basic Logical Resoning
- Some time

## The Logic

When the user scroll's down the navbar must hide itself and when the user starts to scroll up it must reveal itself back.

So let us have some variables,
1. lastScroll - Stores the just previous scroll position
2. currentScroll - Stores the currenrt scroll position

If differnce between currentScroll and lastScroll is positive, it means that user has -- SCROLLED DOWN -- and therefore we will hide the navbar.

Similarly, If differnce between currentScroll and lastScroll is negative, it means that user has -- SCROLLED UP -- and therefore we will reveal the navbar

We will also need some css classes to help us perform the magic,
1. .scroll-up - what happens after user scrolls up
2. .scroll-down - what happens after user scrolls down

`.scroll-up`
```css
header.scroll-up{
    transform: translateY(0);
}
```
`.scroll-down`
```css
header.scroll-down{
    transform: translateY(-100%);
}
```

## The Code

{% codepen https://codepen.io/amdhanwate/pen/GRmZgay default-tab=js,result %}

### You can also find the code on GitHub
{% github amdhanwate/https://github.com/amdhanwate/reveal-unreveal-on-scroll no-readme %}

## After words

Do tell me your thoughts on this and I welcome all type of criticism (I don't know the spelling) which would help me become a better developer after all.

Also, a **BIG** thanks to our developer community for always helping and encouraging everyone around.

I hope you wait for my next article..
useToggle: Custom react hook for toggle
Tags: react, javascript, codenewbie, webdev
Published: 2021-07-06 18:05:55

```js
// File: useToggle.js
import { useState } from "react";

const useToggle = (initialState = false) => {
  const [visible, setVisibility] = useState(initialState);

  const toggle = () => setVisibility((prev) => !prev);

  const setToggleStatus = (value) => setVisibility(Boolean(value));

  return [visible, toggle, setToggleStatus];
};

export default useToggle;
```

```js
import { useToggle } from "./useToggle";

const App = () => {
  const [visible, toggleVisibility, setVisibility] = useToggle(false);

  return (
    <div>
      <div>
        <button onClick={() => toggleVisibility()}>Toggle</button>
        <button onClick={() => setVisibility(false)}>Hide</button>
      </div>

      <div>{visible ? "Hello" : "Hidden content"}</div>
    </div>
  );
};
```

---

**Thanks for reading 💙**  
Follow **@codedrops.tech** for more.  
[Instagram](https://www.instagram.com/codedrops.tech/) ● [Twitter](https://twitter.com/codedrops_tech) ● [Facebook](https://www.facebook.com/codedrops.tech/)

Micro-Learning ● Web Development ● Javascript ● MERN stack  
**[codedrops.tech](https://www.codedrops.tech/)**

---
**Projects**  
[File Ops](https://marketplace.visualstudio.com/items?itemName=mehullakhanpal.file-ops) - A VS Code extension to easily tag/alias files & quick switch between files