teleren/devto huggingface dataset:
How to make a beautiful gradient scroll bar with CSS
Tags: css, webdev, react, javascript
Published: 2022-03-20 05:37:08

# Introduction
In this article, we will explain how to make a custom scrollbar in CSS. Custom scrollbar using CSS is a very useful and important thing for a website. It makes the website more beautiful and attractive.


## Let's gets started

### Setting up HTML 
Let's create a skeleton structure of the page,
```html
<div class="container">
  <div class="box">Scroll Down</div>
</div>
<div class="container">
  <div class="box">Hello World</div>
</div>
```

### Styling the layout 
Let's set the height of the box to 100% in order to create the scroll.
```css
body{
  background: #10172A;
  color: white;
  height: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.container{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
.box{
  height: 100%;
  font-size: 40px;
}
```
 Here's quick glance,

{% codepen https://codepen.io/codewithsnowbit/pen/yLpJBeR %}

### It's time to make scroll bar gradient 🌈
```css
/* Gradient Scroll Bar */

/* width */
::-webkit-scrollbar {
  width: 12px;
}

/* Track */
::-webkit-scrollbar-track {
  border-radius: 100vh;
  background: #1f2937;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: linear-gradient(rgb(134, 239, 172), rgb(59, 130, 246), rgb(147, 51, 234));
}
```

Here's the final look of the scroll bar,

{% codepen https://codepen.io/codewithsnowbit/pen/qBpZzeM %}


## Conclusion
I hope you enjoyed this tutorial on making a custom CSS gradient scroll bar. Whatever it may be, I hope that you will be able to use this CSS code to make your website look awesome. Please share this tutorial with your friends, and always feel free to contact us if you have any questions.

Recently, I have launched a new product feel free to check it out,

 **[Let's Lorem Ipsum](https://letsloremipsum.vercel.app/)** - 
It is a tool that generates placeholder texts. It helps UX designers, visual designers, and copywriters to create great content.


### Let's connect
- [Twitter](https://twitter.com/codewithsnowbit)
- [GitHub](https://github.com/codewithsnowbit)
- [YouTube](https://www.youtube.com/c/CodeWithSnowBit)
- [Buy me a coffee](https://www.buymeacoffee.com/codewithsnowbit)
Scratch – Solve Maze Problem automatically
Tags: scratch, maze
Published: 2022-03-20 05:32:45

The problem is to solve the maze automatically without any mouse or keyboard actions.

![Scratch](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/no2b5dlacnyx6k7wa4k5.gif)

[https://scratch.mit.edu/projects/644610721/embed](https://scratch.mit.edu/projects/644610721/embed)

The main idea is to bind two colors blocks at the **top **and the **bottom **of the dog which will get out of the maze. The top color is `green `and the bottom color is `purple`. If the `green `color touches the `black `color which is the maze line, then turn right. If the `purple `color touches the `black `color, then turn left. A `red `color is bind to the head of the dog, which is used to detect the head `black `color. If the head touches the `black `color, then turn back.

![Sprite’s Costume](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xq9doimfhdklv49qw6vq.png)

Turn right is the default option, and turn left is also feasible. Sometimes turning left may speed up the solving speed but highly dependent the map.


![Scratch code to solve maze problem](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qmwfd2f5bu32su0vundc.png)
Deploy strapi v4 to heroku and quasar to vercel
Tags: strapi, qu, javascript, webdev
Published: 2022-03-20 05:07:10

In this video tutorial I deployed a simple app with Strapi (famouse headless CMS) as backend to Heroku with Postgres database and Quasar ( front-end framework with VueJS components) as frontend to Vercel. The audio content is in Vietnamese, but anyone follow the video can understand easily.
{% embed https://youtu.be/ho53c3aaLnY %}
Contact Team Iron
Published: 2022-03-01 08:49:44

---
canonical_url: https://ironsoftware.com/contact-us/
---

We encourage engineers and customers to communicate with us. Our software is regularly updated, and we welcome feedback that will help us improve our product libraries and documentation.

---

## Live Chat

[Click Here](https://ironsoftware.com/contact-us/#helpscout-support) to chat with a representative. Our chat team can answer most questions regarding licensing, and will assist you to raise a ticket for any technical questions with our engineering support team.

The Live Chat team covers global time zones and is typically available from 8 AM - 5 PM, USA CST time. If the team is not online, please send us a message and your ticket will be answered via email.

---

## Email Support

We welcome all questions, be they sales or engineering related. Ask us about licensing, upgrades, multi-product discounts, feature requests, or product feedback at
[developers@ironsoftware.com](mailto:developers@ironsoftware.com).

---

## Request a Licensing Call

[Click Here](https://justcall.io/calendar/ironsoftware) to request a phone call and schedule a time to speak with one of our sales representatives.

Please note that this service is for licensing questions only. All technical requests will be redirected to send an email stating the issue to [developers@ironsoftware.com](mailto:developers@ironsoftware.com).

You can also call 24/7 to leave a message at +1 (312) 500-3060. Please be sure to leave an email address to enable our support team to reply to your request.

---

## Payment Support

License orders are processed by FastSpring: [support@fastspring.com](mailto:support@fastspring.com). If you need assistance processing a payment, you may contact them directly via [https://fastspring.com/consumer-support/topics/Question-a-Charge/](https://fastspring.com/consumer-support/topics/Question-a-Charge/)

---

## Corporate Contact

Iron Software LLC
205 N. Michigan Ave.
Chicago, IL 60611
USA
+1 (312) 500-3060
2 questions - Equal sides of an array solution
Tags: javascript, programming, tutorial, beginners
Published: 2022-03-20 02:35:21

So in an attempt to solve the above problem (Link from codewars, https://www.codewars.com/kata/5679aa472b8f57fb8c000047/javascript) I came up with the below solution in pseudocode (which didnt work)

1. Declare two variables mid and i
mid= we will assume this is the index we are looking for
i= this is starting index 
2. Then while (mid<= arr.length-1) we will go through the array and add up each side of the array one side from i=0 to i=mid and then from i=mid to i=array.length-1, while adding up each side to leftSum and rightSum respectively
3. And if leftSum==rightSum in any of these instances we will return mid if it didnt it will increase mid by one and reiterate ,
4. If mid is not returned we will return -1 at the end.

More details about this is here https://stackoverflow.com/questions/71543463/equal-sides-of-an-array-in-js 

Now below algorithm/solution is the correct answer for this question

1. Find the sum of all the integers and assign it to a variable 'right'
2. Then assign a variable named 'left' to 0
3. Basically iterate through each element and do the following

 ` for(var i = 0; i < arr.length; i++) {
    if(i>0) {left =left+ arr[i=1]; 
    }
      right =right- arr[i];
      if(left == right) return i;
  }`

4. Finally if none of the conditions above are met return-1

So the final solution is

`function findEvenIndex(arr)
{
  var left = 0, right = arr.reduce(function(pv, cv) { return pv + cv; }, 0);
  for(var i = 0; i < arr.length; i++) {
    if(i>0) {left =left+ arr[i-1]; 
    }
      right =right- arr[i];
      if(left == right) return i;
  }
  return -1;
}`

Here are some questions you might wanna ask yourself
1) Why did we write if i>0 in
in the first line in the for loop
2) Why did we write i-1 in the line  'left = left + arr[i-1]'

Leave your answers in the comments below :)
JS Interview Question #1 (Group Anagrams)
Tags: javascript, react, webdev
Published: 2022-03-20 03:30:12


Read more articles in [Think1s](http://www.think1s.in)
What is Anagram?
According to wikipedia Anagram is a word, phrase, or name formed by rearranging the letters of another.
Ex: Elbow and below


 

```
let groupAnagramsObj = {};
  for (let i of distinctArrSet) {
    let groupArr = sortedArr.reduce((acc, curr, index) => {
      if (curr == i) {
        acc.push(index);
      }
      return acc;
    }, []);
    groupAnagramsObj[i] = groupArr;
  }

  // console.log(groupAnagramsObj)
  // { "below": [ 0, 1 ], "ceersu": [ 2, 3 ], "act": [ 4, 5, 6 ] }

  let anagramsGroup = [];
  for (let i in groupAnagramsObj) {
    anagramsGroup.push(groupAnagramsObj[i].map((item) => arr[item]));
  }
  return anagramsGroup;
};
console.log(
  groupAnagrams(["elbow", "rescue", "cat", "secure", "act", "below", "tac"])
);

// [["below","elbow"],["secure","rescue"],["cat","act","tac"]]
```



Read more articles in [Think1s](https://think1s.com)
Introduction to OOP and array class implementation [part 2]
Tags: cpp, oop, tutorial
Published: 2022-03-20 02:53:17

Last time, we left off with the default constructor. Remember that it has no arguments, which is why it is also called non-parameterized constructor. Therefore, this time we’ll kick off with parameterized constructor, which takes in user’s initial values.

```
Array::Array(int num_elements)
{
    allocate(this->A, num_elements);
    this->na = 0;
    this->capacity_a = num_elements;
}
```

Read more [here](https://blogbybao.wordpress.com/2022/03/19/introduction-to-oop-and-array-class-implementation-part-2/)!
Introduction to OOP and array class implementation [part 1]
Tags: cpp, oop, tutorial
Published: 2022-03-20 02:50:33

Object-oriented programming (OOP) is an important knowledge taught in schools and programming classes. It is a concept that relies on the creation of classes and objects which helps coding more efficient with reusable code blocks of well-defined functions. Today, I will show you how to implement a simple 1D array class. Throughout the post, important OOP terminologies and concepts will be discussed for the sake of better understanding.

```
class Array
{
private:
    int *A;
    int na = 0;
    int capacity_a = 1;

    void deepcopy(const Array &a);

public:
    Array();
    Array(int);
    ~Array();

    void insert(int);
    void print();

    Array(const Array &other);
    Array &operator=(const Array &other);
    Array operator+(Array other);

    int view_na();
    void set_na(int);
    int getElement(int index);
    void setElement(int index, int value);

    void quicksort(int left, int right);
    
    friend istream &operator>>(istream &in, Array &a);
    friend ostream &operator<<(ostream &out, Array a);
};
```

Read more [here](https://blogbybao.wordpress.com/2022/03/18/introduction-to-oop-and-array-class-implementation-part-1/)!
How to share a single global object across your app (Singleton design pattern)
Tags: javascript, designpattern
Published: 2022-03-20 01:48:29


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/65izrbt4fgi8z1zutc9m.jpg)

One of the most important features in OOP is you can create a single class and instantiate instances of it as many as you want.

but what if you need to create only a single object to deal with or make sure your class will be instantiated once ?

At this point implementing a Singleton will be a good choice.
and the singleton can represent the following objects

- Database Connection Object
- Current Logged-in user Object
- Provisioning an OTP Object

or any kind of objects that you need to make sure there is only one instance of it in your app 

## How to implement

let's say we wanna create a counter and that counter will be available throughout your app.

Since in js we can create objects directly without creating a class first, 

### 1- Create a variable that holds the current value of the counter and assign it an initial value

`let currentValue = 0`

### 2- Create an object to change the value with it

Since in js we can create objects directly without creating a class first, a simple `counter` object well be enough to implement a singleton

    let currentValue = 0
    const counter = {

      increment(){
      return ++currentValue
      }

      decrement(){
      return --currentValue
      }

    }

### 3- Prevent modifying the `counter` object and export it

    let currentValue = 0
    const counter = {

      increment(){
      return ++currentValue
      }

      decrement(){
      return --currentValue
      }

    }
    Object.freeze( counter )
    export { counter }

### notes

- We use const with counter object (the Singleton) to prevent reassigning it by mistake, also we freeze it to prevent adding or removing attributes or changing the value of one of them.
- Since objects are passed by reference, you'll get the same instance every time you import it in another file
- You can create more methods based on your requirements in your app, like creating a getter method to get the counter value.

hope that article answered your question and see you next time,

Thanks
Exploring Scalable Vector Extension 2
Published: 2022-03-20 01:31:33

## Introduction
[Scalable Vector Extension (SVE)](https://developer.arm.com/documentation/101726/0400/Learn-about-the-Scalable-Vector-Extension--SVE-/What-is-the-Scalable-Vector-Extension-) is SIMD extension of ARMv8 and provides a new set of vector instructions to enable vectorization of loops for [High Performance Computing (HPC)](https://en.wikipedia.org/wiki/High-performance_computing). 

## Why SVE?
One of the key features of SVE is that it does not require a fixed 128-bit vector length like [Neon architecture extension](https://developer.arm.com/architectures/instruction-sets/simd-isas/neon). This enables Vector-length agnostic (VLA) programming in which the vector length is determined by hardware that is best for the workload. Thus, developers can write and build programs once and run them on different hardware with different SVE vector length implementations (better portability!). 

## SVE2
SVE2 is basically a superset of SVE and Neon extension. With SVE2 instruction, it further extends data-processing domains beyond HPC that now include:
- Computer vision
- Multimedia
- Long-Term Evolution (LTE) baseband processing
- Genomics
- In-memory database
- Web serving
- General-purpose software

## SVE2 Registers
Like SVE, SVE2 is based on the scalable vectors as follows:

1. Scalable vector registers

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

There are a total of 32 scalable vector registers (z0-z31). Their size in bits must be a multiple of 128 and up to 2048 bits. Data in these registers can holder 64, 32, 16, and 8-bit elements. The lower 128 bits of each register holds the corresponding Neon register of the SIMD extension. 

2. Scalable predicate registers 
![Scalable_Predicate_Registers](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ig95tezfy8dvckzpr1nz.png)

There are a total of 16 predicate registers which are unique to SVE and SVE2. Each predicate register can hold one bit for each byte available in the respective z register (1/8 of the z register length). P0 - P7 registers are governing predicates for load, store, and arithmetic. P8 - p15 registers are extra predicates for loop management.
 
## Conclusion
SVE allows developers to implement vectorization for the program in more efficient manner as they don't have to worry about the vector size. This also enable better portability because different hardware determines the vector size accordingly for the same program. In the next post, we will discuss how we can implement SVE2 to the volume algorithm we explored previously.

## Resources
1. [What is the Scalable Vector Extension?](https://developer.arm.com/documentation/101726/0400/Learn-about-the-Scalable-Vector-Extension--SVE-/What-is-the-Scalable-Vector-Extension-)
2. [Introducing SVE2](https://developer.arm.com/documentation/102340/0001/Introducing-SVE2?lang=en)
3. [Introduction to Arm SVE](https://www.youtube.com/watch?v=eGCcPo4UAHs)
Recruiters! We Were Always Remote!
Tags: work
Published: 2022-03-17 11:42:38

---
title: Recruiters! We Were Always Remote!
published: true
description: 
tags: work
canonical_url: https://www.aloneguid.uk/posts/2022/03/we-were-always-remote/
---

As COVID-19 is ending/easing, recruitment companies are trying to lower salaries / day rates by justifying the position is now "mostly remote" or "remote". This is **bullshit**. 

We were always working remote.

Taking away most of the commute does not make it remote.

Pre-covid we used to *waste a big chunk of our day* but going to the office, getting tired before work starts, and getting into uncomfortable workplace.

We put noise-cancelling headphones on to **block the office environment**.

We spent majority of meetings **online** on Teams, Slack or whatever the corporate messaging platform is.

We **work during commute** whenever possible in terrible conditions - uncomfortable busy trains, buses etc. most of the time not being able to. And if we can't, we would use our phones to reply to emails and instant messaging apps to help with customer requests. How the hell is this not remote?

And then coming home late mostly to get to bed and wake up to commute again.

So what's the cost saving for us, developers, by working "remote"?

We benefit from it mostly by saving on **mental health**, and I can't think of more to be honest. There are side benefits as well for spending more time with families (whoever has one) and self-care. But who are really benefitting from this is companies we work for - now they need to pay zero costs for our gym memberships and other benefits we take to stay sane.

What are the other benefits companies have?

Developers stay focused and productive, as they are free to set up their own workplace in a way they want.

If you as a company used to pay for commute, now this is gone too.

Most of the time developers do work longer hours than usual, because they can. This crowd is not going to work to clock hours, most of us are working the job because we**genuinely like it**. It's usual to see people working much longer hours now, and not being tired.

Then, **office space is expensive**, free coffee is expensive, and all the small things combined like office supplies, power, hardware, furniture, you name is adding up to quite a bit. And you need to **hire people and pay them salaries to run the office**. Extra people are very expensive.

But you also get extra productivity i.e. **free developer hours** which are really really expensive.

And I've just started this morning rant and given more time can find many more reasons.

Therefore think again, do you still want to offer me lower salary? You better do the job yourself. Fully remote.

We need to rethink this as a community, and raise prices for our services as companies are now getting more in return than usual.
Gerenciando Buckets no S3 usando a AWS CLI
Tags: s3, beginners, tutorial
Published: 2022-03-20 01:05:22

Para isso assumo que você o **AWS CLI** já esteja configurando com um **IAM** só com permissões para o S3.

## Listando buckets
Para listar buckets da sua conta amazon é bastante similar ao ls de sistema Unix, sendo a sintaxe assim: `aws s3 ls`

![AWS LS RESPONSE](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tnqphrnou53f6fr9fke5.PNG)

##  Listando conteúdo dentro de um bucket
Ponto importante o nome do bucket deve começar com o **s3://*nome 
do bucket***

`aws cli ls s3://i3s-01`

![AWS LS OBJECT](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/deoih8oelomrbmleol3e.PNG)

## Criando Buckets
Para criar buckets utilizamos a seguinte sintaxe: `aws s3 mb s3://teste-123`
Para facilitar o entendimento é bom associar o `mb` com **Make Bucket**.


![S3 CREATE BUCKET](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cmrw2v37gjwkl36miwxa.PNG)

Como podemos ver um novo bucket foi criado, e logo conseguimos ver o mesmo com o comando ls 

## Deletando Buckets Vázios
Bem similar ao comando de criação, usamos os `aws s3 rb s3://teste-123`
Nesse caso para fins didaticos associe o `rb` com **Remove Bucket**

![AWS DELETE EMPTY BUCKET](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oy7k0etcywb4pyaca89a.PNG)

## Deletando bucket com objetos dentro
Caso você tente remover um bucket com objetos dentro é retornado o seguinte erro: 
![AWS ERRO DELETE BUCKET NOT EMPTY](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xmebracxdrvg90qpaaas.PNG)
Para resolvermos esse problema adicionamos a flag `--force`

`aws s3 rb s3://i3s-01 --force`

![AWS S3 DELETE NON EMPTY BUCKETS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tpibfy6q5amyhxahdca6.PNG)
How to become more confident as a Developer
Tags: programming, webdev, career
Published: 2022-03-20 00:57:41

This week my team had a junior developer join us which I was ecstatic for! Previously I was the only junior developer on a team of 2, in which the other developer was a senior Dev. While I wish I had joined a bigger team initially, looking back I see that being on such a small team forced me to be more self-sufficient. At the same time though, there were many times where I wanted to know more about a topic or didn’t understand what the senior was explaining but didn’t press further because I could feel them getting annoyed. 

That’s why I made it my mission to spend every day with this new developer from walking them through how to set up their local developer environment to pushing their first PR. By doing this, not only did I get a deeper understanding of our environment, I also solidified what I knew which in turn made me more confident as a developer.

By the end of the week, I had helped my teammate push 3 PR’s and build up their confidence and that to me is extremely rewarding. I love doing great work and knocking out tasks but I love it even more when I can help someone else succeed and grow. I think that by coding more and helping others, this is the best way to grow anyone’s confidence as a developer. So don’t be afraid to lend a hand! :)
TyDIDs P2P - Node-Red Docker
Tags: nodered, ssi, did
Published: 2022-03-20 00:37:47

The just released [Docker-Hub Repository](https://hub.docker.com/repository/docker/energychain/node-red-tydids) for [TyDIDs](https://tydids.com/) allows to quickly test TyDIDs capabilities within an event management suite.


![My sample Dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/og8iy8z0q5i7c9o53ub7.png)

I use TyDIDs personally to transfer a dataset from my car and just visuallize it in Node-RED UI (dashboard).
New Video: An Early Look at C# 11
Tags: csharp, dotnet6
Published: 2022-07-17 22:47:39

---
title: New Video: An Early Look at C# 11
published: true
date: 2022-03-20 00:00:00 UTC
tags: 
  - csharp
  - dotnet6
canonical_url: https://wildermuth.com/2022/03/20/early-look-at-csharp-11/
cover_image: https://wilderminds.blob.core.windows.net/img/2022/03/20/cover.jpg
---

I’ve started staying on top of early releases on .NET 7 and C# 11 already. In this new Coding Shorts video, I look at four of the released changes to C# and hopefully you can get a head start on seeing where C# is going. Take a look:

> [Watch](https://www.youtube.com/watch?oxfcjiow3x0)

[Subscribe to my YouTube Channel](https://www.youtube.com/c/swildermuth)

[![Creative Commons License](http://i.creativecommons.org/l/by-nc-nd/3.0/88x31.png)](http://creativecommons.org/licenses/by-nc-nd/3.0/)

 This work by [Shawn Wildermuth](http://wildermuth.com) is licensed under a [Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License](http://creativecommons.org/licenses/by-nc-nd/3.0/).  
 Based on a work at [wildermuth.com](http://wildermuth.com).

* * *

If you liked this article, see Shawn's courses on [Pluralsight](http://shawnw.me/pscourses).