teleren/devto huggingface dataset:
Windows 11 Taskbar sucks [Solved]
Tags: software, misc
Published: 2021-12-15 15:28:38

---
title: Windows 11 Taskbar sucks [Solved]
published: true
date: 2021-12-15 15:27:28 UTC
tags: software,misc
canonical_url: https://siderite.dev/blog/windows-11-taskbar-sucks-solved/
---
  Original post at: https://siderite.dev/blog/windows-11-taskbar-sucks-solved

  Today I saw a Windows Update message that I can install Windows 11 on my computer. Great! I let it install and all went without a hitch. I don't see any problems with it, my software works fine, the only problem is that the taskbar icons are in the middle of the screen rather than to the left and it has that default setting of huge annoying icons instead of text, grouping all windows of the same type and so on. Simple, just go to settings, right?

  Wrong! Windows 11 now comes with a taskbar with LESS options than before. If you continue using it you will have to live with grouped apps under huge icons, with no recourse whatsoever!

  Luckily, [Michael Crider from PcWorld](https://www.pcworld.com/article/549576/the-windows-11-taskbar-is-an-annoying-step-backward.html "The Windows 11 taskbar is an annoying step backward") to the rescue. Just download the [setup](https://github.com/valinet/ExplorerPatcher/releases/latest/download/ep_setup.exe "Setup program directly.") to [Explorer Patcher](https://github.com/valinet/ExplorerPatcher "This project aims to bring back a productive working environment on Windows 11.") from GitHub and run it. The Windows 10 taskbar will be back. Just right click on it and select _Properties_ and you can customize it even better than the old one! Cheers, Michael!
Types of CSS Selectors
Tags: webdev, beginners, css, tutorial
Published: 2021-12-15 15:18:20

![Types of CSS Selectors](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uk3wmfnurbmboodjq4am.jpg)
Types of CSS Selectors are utilized to pick the substance that we need to style. It helps in separating components dependent on their group, id, type, and so forth. A CSS Selector is a segment of the CSS Ruleset.
In our last tutorial we discussed [Introduction to CSS Controls](https://dev.to/elinabey/introduction-to-css-controls-408m)

#Types of CSS Selectors
1.CSS Attribute Selector.
2.CSS Class Selector.
3.CSS Id Selector.
4.CSS Universal Selector.

##CSS Attribute Selector.
The CSS Attribute selector styles content as indicated by the trait and the quality worth referenced in the square sections.
This CSS code would be a counterpart for the accompanying HTML component.
```CSS
<input type="text">
<style>
  input[type="text"] {
background-color: #000;
width: 100px;
}
</style>
```
Moreover, if the estimation of the quality 'type' changes, the Attribute selector would not coordinate it. 
##CSS Class Selector.
he CSS Class selector is one of the most supportive selectors of the considerable number of selectors. It is proclaimed by utilizing a spot followed by the name of the class.
```CSS
<div class="soft"></div>
<style>
  .soft {
margin: 20px;
    width: 20px;
  }
</style>
```
##CSS Id Selector.
CSS ID selector encourages the engineer to coordinate the ID made by the designer to its styling content. ID Selector is utilized with the assistance of the hash (#) sign before the ID name proclaimed by the engineer. 
```CSS
<div id="soft"></div>
<style>
  #soft {
margin: 20px;
    width: 20px;
  }
</style>
```
##CSS Universal Selector.
In a HTML page, the substance relies upon HTML labels. A couple of labels characterizes a particular website page component.
```CSS
<style>
  * {
color: black;
font-size: 21px;
}
</style>
```
This post originally published at [Types of CSS Selectors](https://softcodeon.com/css/types-of-css-selectors.htm). If you want to read in detail visit their.

I am going to learn and share good content that can help others. If you have any questions please discuss below.
Thank you.
Introducing todos in noted cli v0.0.3
Tags: productivity, unix, shell
Published: 2021-12-15 15:13:37

---
title: Introducing todos in noted cli v0.0.3
published: true
description: See your todo items in one view, no matter _when_ they were written or what file they're in.
tags: productivity,unix,shell
---

_If you're new to [noted](https://github.com/scottashipp/noted), there's a great introduction here:_

{% link https://dev.to/scottshipp/an-amazing-note-taking-system-with-markdown-and-git-part-1-48b1 %}

## Introducing the `todos` subcommand!

[Version 0.0.3 of the noted cli](https://github.com/scottashipp/noted/releases/tag/v0.0.3) is out now, and introduces a new subcommand, `todos`.

The todos command lists your todos.

```shell
$ noted todos
/Users/jsmith/Documenents/notes/2021-12-06:todo Send out Christmas cards
/Users/jsmith/Documenents/notes/2021-12-08:todo Read Termination Shock, Jane recommended it
/Users/jsmith/Documenents/notes/2021-12-15:todo Pick up milk
```

You can also configure any text string as a marker for todo notes. You can set the text string that is used in your `.notedconfig` file with the `NOTED_TODO_MARKER` variable. 

For example, I've set my personal marker to this emoji: ✳️.

You can read more about it in the [todo subcommand reference](https://github.com/scottashipp/noted/blob/main/subcommands.md#todos).

Speaking of which, the documentation has been improved, so take a peek at the [README file](https://github.com/scottashipp/noted).

I'm reminded that v0.0.2 has a `grep` subcommand too, which I forgot to post on here. You can learn more about that [in the docs](https://github.com/scottashipp/noted/blob/main/subcommands.md#grep).
How to convert XLSX to JSON
Tags: webdev, javascript, tutorial
Published: 2021-12-15 14:55:16

#### Do you need to get data from a spreadsheet and turn it into a JSON ? That's not 🚀 science and I'm gonna prove it !

First, install the **xlsx** package.

<br />

With npm :

```bash
// NPM
npm  install  xlsx

// Yarn
yarn  add  xlsx
```

In the **app.js** file, import xlsx and fs to read the excel file, and declare a variable that we will use later.

```js
const XLSX = require('xlsx');
const fs = require('fs');
const finalObject = {};
```

To read and get the content of the file with the Buffer type :

```js
const data = XLSX.read(myFile, { type: 'buffer' });
```

_N.B: The different types are "string", "buffer", "base64", "binary", "file", "array"_

If you write **console.log(data.Sheet)** you will see your spreadsheets and the cells content.

Then you have to write the process for each row of each spreadsheet.

```js
data.SheetNames.forEach(sheetName => {
  let rowObject = XLSX.utils.sheet_to_json(data.Sheets[sheetName]);

  finalObject[sheetName] = rowObject;
});
```

The **sheet_to_json** function allows to convert a spreadsheet into an array of objects.
It takes differents optionnal parameters that you can find [here](https://www.npmjs.com/package/xlsx)
Here we won't need anything

If you do a console.log(**rowObject**), you will see that it contains an array, and each row of the spreadsheet is turned into an object like so :

```json
[
  { "ID": 1, "Last name": "Doe", "First name": "John" },

  { "ID": 2, "Last Name": "Doe", "First name": "Jane" }
]
```

Do you remember the variable we declared at the beginning ? It is time to use it. We are going to create a key for each spreadsheet and assign **rowObject** to it :

```js
data.SheetNames.forEach(sheetName => {
  let rowObject = XLSX.utils.sheet_to_json(data.Sheets[sheetName]);

  finalObject[sheetName] = rowObject;
});
```

If you **console.log(finalObject)** :

```json
"Utilisateurs": [
{ "ID": 1, "Last name": "Doe", "First name": "John" },
{ "ID": 2, "Last name": "Doe", "First name": "Jane" }
]
```

If you want to write the output into a file, simply add this line :

```js
fs.writeFileSync('./target.json', JSON.stringify(dataObject));
```

---

Voilà 🎉
Now you know how to convert an Excel spreadsheet into JSON !

---

Originally posted on my [blog](https://blog.ludivineachouri.com/). Check out my [instagram ](https://www.instagram.com/la.dev/)account to learn more about web development.
Git vs GitHub
Tags: github, webdev
Published: 2021-12-15 14:54:54

## Git

Git is an very popular **Distributed Version Control** (DVC) system. It is installed on your local system and helps you keep track of your ongoing programming versions thanks to its _branching_ model.

Branching is to create local branches in your code that allow you to make new features, rewind to previous states of the code ... These branches can be deleted or merged into other branches.  


Git is really easy to use, and completely free, so there are little to no alternatives to use.

There is one alternative called **Centralized Version Control** (CVC): Instead of cloning the project, everyone is connected to one server repository and every changes you make are updated on other users machines.

But there is no real reason to use CVC over DVC.

## Github

Github on the other hand is a platform built around Git.

It allows you to store and keep track of your Git version control projects thanks to the cloud. You can share your code with your team or with the world, and its is very easy to coordinate multiple people working on the same project.

Other Git repository hosting services also exist: GitLab, BitBucket, and SourceForge for instance.

## Conclusion

Git is a **tool** developers use on their computers to manage projects locally. Github is a **service** that uses Git to hosts those projects with the cloud.

---

Originally posted on my [blog](https://blog.ludivineachouri.com/). Check out my [instagram ](https://www.instagram.com/la.dev/)account to learn more about web development.
Create a GitHub profile README
Tags: github, webdev, tutorial
Published: 2021-12-15 14:54:36


I recently discovered how to create a GitHub profile **README** that you can entirely customize to your liking ! Let me show you how you can create yours and impress everyone !

![My Github Profile](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z7hfe3nrifid7p07bcke.png)

## Create a new Github Repository

The only thing you need to do, is to give your project a name matching your GitHub username. Be sure to make it public and to generate a **README** file.

This little message will appear :

![Github message](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/llpjcj15r00ftgrrz673.png)

## Write your description.

You can now start writing a description about yourself. If you lack inspiration, there is a [great generator](https://rahuldkjain.github.io/gh-profile-readme-generator/) that can help you.

You can include you social media, some GitHub stats, the technologies you work with, GIFS, pictures, emojis, anything to spice up your profile a little bit 😉

## What I used

I used [shields.io](https://shields.io/) to create the technologies badges and [imgur](https://imgur.com/) to import the Instagram and Linkedin logos. The banner was created with [Canva](https://www.canva.com/).

## Conclusion

I hope my article taught you something new ! Don't hesitate to comment and show me your brand new GitHub profile **README** !
You can check out [mine](https://github.com/Lachouri/Lachouri)  if you need.


Originally posted on [my blog](https://blog.ludivineachouri.com)
Create a New Project With Vue CLI
Tags: tutorial, javascript, vue, webdev
Published: 2021-12-15 14:53:56

Vue.js is slowly becoming a very popular framework, and adding this skill to your resume might be interesting for your career. So if you are curious on how to start a Vue project with Vue CLI, please keep on reading.

## Installing Vue

```bash
npm install -g @vue/cli
# OR
yarn global add @vue/cli
```

## Initializing your project

First you will need to run the following command :

```bash
vue create first-project
```

You can either choose pre-selected options with Vue 2 or Vue 3, or select "Manually select features"

![Vue CLI presets](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h7axat52bczps8hax9jf.PNG)

If you choose a default option, the project will be created directly.

If you manually select features, Vue CLI will ask you a few more questions :

1. Pick the features you need, from Typescript to Vuex or unit testing. You can also pick the Vue version you wish to work with.

![Vue CLI presets](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w2nulkrw3z1789ieu1ee.PNG)

2. Select where you wish to store the configurations for your features.
3. Indicate if you wish to save theses options as a preset for future projects.

Wait for the project to be created...

Once it is done, go to your project directory and run the following command to start your local development environment :

```bash
yarn serve
# OR
npm run serve
```

You can now go to [http://localhost:8080/](http://localhost:8080/) and your website will show up !

![localhost website](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3htqhyvnub9ou7ow2dgt.png)

## Vue UI

There is an option that provides you an interface to create new projects, and manage all the Vue projects stored on you machine.

You can try it by using the command :

```bash
vue ui
```

![Vue UI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l8d4rit1y4hngdoysz03.png)

With this dashboard, you can add new plugins, devDependencies or run scripts !

## Conclusion

Don't hesitate to ask questions or leave a comment if this article helped you !

Happy coding ! 👋

---

Originally posted on my [blog](https://blog.ludivineachouri.com/). Check out my [instagram ](https://www.instagram.com/la.dev/)account to learn more about web development.
How to write a YAML file
Tags: yaml, webdev, beginners
Published: 2021-12-15 14:53:50

YAML means "_Yet Another Markup Language_" in version 1.0, and became "YAML Ain't Markup Language" in 1.1 . Created in 2001 by **Clark Evans**, it was meant to be more elaborate than CSV and as simply written, (or even more), than XML.

<br />

The key to master YAML is to be very accurate when it comes to indentation. Here the indentation acts as a structure for the file.

<br />

Just like JSON, YAML works with a Key-value pair system :

## Strings

Putting your strings between quotes is not necessary, unless you want to do multiple-lines.

```yaml
last-name: Doe
first-name: 'John'
```

Multiple-lines takes two forms, one which doesn't keep the format :

```yaml
bar: >
Once upon a time, there was
a beautiful princess
named Snow White.
```

is interpreted as :

```yaml
bar: Once upon a time, there was a beautiful princess named Snow White.
```

And one which keeps the format as is :

```yaml
bar: |
Once upon a time, there was
a beautiful princess
named Snow White
```

will be interpreted as :

```yaml
bar : Once upon a time, there was
a beautiful princess
named Snow White
```

## Numbers

```yaml
integer: 506
negative-integer: -374
float: 103.98
```

## Nulls

```yaml
foo: null
bar: ~
```

## Booleans

```yaml
day: true
night: false
```

## Comments

```yaml
# List of users
name: 'John Doe' # A user
```

## Objects

```yaml
planets: { Mars: 'terrestrial planet', Jupiter: 'gas giant' }
```

## Arrays

```yaml
cities: ["Reykjavik", "Kuala Lumpur"]
# or
cities:
- "Paris"
- "New York"
```

you can make multiple-lines arrays :

```yaml
groceries:
  - fruits:
      apples: 3
      bananas: 1
  - other:
      - milk: semi-skimmed
```

---

I hope my article helped you understand YAML a little bit more !
Thank you for reading 👋 !

---

Originally posted on my [blog](https://blog.ludivineachouri.com/). Check out my [instagram ](https://www.instagram.com/la.dev/)account to learn more about web development.
How to add comments to your blog ?
Tags: javascript, gatsby, tutorial, webdev
Published: 2021-12-15 14:53:35

I recently added comments to my blog posts (don't hesitate to drop a comment 😉) and I want to teach you how to add comments to your own blog.

There are several options you can use, from free to not so free :

- [Disqus](https://blog.disqus.com/) (free)
- [Utterances](https://utteranc.es/) (free)
- [GraphComment](https://graphcomment.com/en/) (free plan available)
- [Commento](https://commento.io/) (30 days trial then $10/m or $99/y)
- [Facebook Comments](https://github.com/seeden/react-facebook) via the react-facebook package

I tried Disqus, but the design of the comment section felt a little to "old-school" and maybe not very professional, so I decided to use Utterances.

Utterances creates a GitHub Issue for each article and stores the comments there. This means your readers need a GitHub account to be able to leave a comment. As my blog revolves around web development this option is perfect.

## Creating the GitHub repository for the project

You will first need to create a **public** GitHub directory, I called mine "blog.comments" but you can call it any way you like.

Install the [Utterances app](https://github.com/apps/utterances) into the repository with the "Only select repositories" option and by selecting your repository.

## Creating a Comments component for your blog

Fill the configuration part on the Utterances main page and it will provide you a bit of code looking like this :

```jsx
<script
  src="https://utteranc.es/client.js"
  repo="Lachouri/blog.comments"
  issue-term="pathname" //How the article and issue are mapped
  theme="github-light" //The theme of the component
  crossorigin="anonymous"
  async
></script>
```

You can't add this directly into your React code, so you will need to do something like this :

```jsx
// Comments.jsx

import React from 'react';

const commentBox = 'comments-box';

const Comments = () => {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://utteranc.es/client.js';
    script.setAttribute('repo', 'GITHUB_USERNAME/REPOSITORY_NAME');
    script.setAttribute('issue-term', 'pathname');
    script.setAttribute('theme', 'github-light');
    script.setAttribute('crossorigin', 'anonymous');
    script.async = true;

    const comments = document.getElementById(commentBox);
    if (comments) {
      comments.appendChild(script);
    }
  }, []);

  return <div id={commentBox} />;
};

export default Comments;
```

You can now import your component and this is what it will look like :

![Blog comments section](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g5itzz9e21v5sp1ae2j0.png)

The issue created on GitHub :

![GitHub Issue](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1tnd6q0t63ag43ufsp64.png)

Now you know how to add comments to your blog ! Let me know if you have any question !

---

Originally posted on my [blog](https://blog.ludivineachouri.com/). Check out my [instagram ](https://www.instagram.com/la.dev/)account to learn more about web development.

Originally posted on [my blog](https://blog.ludivineachouri.com)
Generics in Golang 🚀
Tags: go, generics, programming, tutorial
Published: 2021-12-15 14:53:29


Golang just released a beta version, offering a preview or atleast a working example of how to use generics and how it works with the compiler. 

```go

package main

import (
	"fmt"
)

func Writer[T string | int](w T) {
	fmt.Println(w)
}
func main() {
	Writer("Hello")
	Writer(1)
}
```
as simple as it looks, it's really unique and powerful. 
It has both the **easy** and **understandable** syntax that go already offers and more.
It works like any other language generics.

Lets assume this piece of code.

```go

package main

import (
	"fmt"
)

func Writer[T string | int](w T) {
	fmt.Println(w)
}
func main() {
	Writer[int]("Hello")
	Writer(1)
}
```

This code, as you may have guessed **returns** an error.

```
 cannot use "Hello" (untyped string constant) as int value in argument to Writer[int]
 ```
 
 To fix it, either we'd have to change the generic type to "string" or change the param of the function to int type.
 
 ```go
package main

import (
	"fmt"
)

func Writer[T string | int](w T) {
	fmt.Println(w)
}
func main() {
	Writer[string]("Hello")
	Writer[int](1) 
}
```

# Notes

* Golang hasnt yet announced a **stable** version, therefore it is not adviced to use it in production.
* Due to addition of generics go 1.18-beta is roughly 15% slower check out more information about it [here](https://github.com/golang/go/issues/49569)

# Upgrading Version
Due to go 1.18 being unstable, golang has made the version a seperate executable.
You can download it [here](https://go.dev/dl)
and use
```bash
go1.18beta1 
```
in the cli to check out the help menu.

### OR

Install go1.18beta using the go cli (if you already have it installed)

```bash
go install golang.org/dl/go1.18beta1@latest
```
and then use 
```bash
go1.18beta1
```
instead of 
```bash
go
```
**Fyi, go does not update it just installs a seperate executable for testing out the beta version**

Well have fun looking at the new features, until next time 🤠
How to add ads to your GatsbyJS blog
Tags: gatsby, javascript, webdev, tutorial
Published: 2021-12-15 14:53:24

If you wish to learn how to add ads to your Gatsby blog, this article is made for you !

I am going to teach you how to add Google Adsense and possibly earn money !

## Auto Ads

Auto Ads are ads that Google will automatically position on your website, based on algorithms.

To activate them, go on your website ad settings and check the option "Automatic ads"

### Installation of the plugin on Gatsby

/!\ This plugin has been deprecated. Other plugins with similar names are available but I didn't test them, as I do not recommend using Auto Ads.

```
// NPM
npm install --save gatsby-plugin-google-adsense

// Yarn
yarn add gatsby-plugin-google-adsense
```

### Add the plugin on Gatsby

First you will need to get your Publisher ID from Google Adsense to link your website to Google. To find it, click on "Account" and copy your Publisher ID.

Then, in your `gatsby-config.js` ad this bit of code with your Publisher ID.

```json
plugins: [
  ...,
  {
    resolve: `gatsby-plugin-google-adsense`,
    options: {
      publisherId: `PUBLISHER ID`,
    },
  },
]
```

But I would not recommend using Auto Ads, as Google tends to add to many of them, and in odd places. The user experience on your website will majorly decrease.

Manual ad block are, I believe, a better solution.

## Create ad units

You can create ad units, that you can integrate in specific places manually. To create them, click on "Ads", then click on "By ad units" and select "Display ads".

You can change its shape and make it be a square, horizontal or vertical.

## Install react-adsense

To integrate these ads to you blog, you need to install [react-adsense](https://www.npmjs.com/package/react-adsense).

```json
// NPM
npm install --save react-adsense

// Yarn
yarn add react-adsense
```

## Integrating ads to the blog

This library offers components that you can use to display ads. You will need your Publisher ID and the id of your ad that you can find under the unit's name.

```jsx
// The minimum set up to make it work.
<AdSense.Google
  client='PUBLISHER ID'
  slot='UNIT ID'
/>

// All possible options.
<AdSense.Google
  client="required"
  slot="required"
  className="optional"
  style="optional"
  layout="optional"
  layoutKey="optional"
  format="optional"
  responsive="optional"
/>
```

### Complying with the rules

In the _Privacy & messaging_ tab, you will be able to add a GDPR or a CCPA message to comply with user consent rules.

### Preventing certain ads

In the _Blocking controls_ tab, you can select the themes of ads that can appear on your website. I would suggest block certain ads such as the more "sulfurous" ones if you know what I mean. It's not very professional 😉.

Now you know how to put ads on your GatsbyJS blog ! Don't hesitate to ask questions !

---

Originally posted on my [blog](https://blog.ludivineachouri.com/). Check out my [instagram ](https://www.instagram.com/la.dev/)account to learn more about web development.