teleren/devto huggingface dataset:
10 Custom Scrollbar Samples for your next project
Tags: html, css, tips, webdev
Published: 2021-06-12 13:40:38

Hello, my gorgeous friends on the internet 👋, how are you doing this weekend 😊.

> Did you noticed my sidebar changed? 🤭 👉

In this article, I will be showing you 10 samples of custom browser scrollbars with their code snippets and also how you can implement them in your next project 💃.

Without any further ado, let's ride🏇.

Below 👇 is an image showing the difference between a normal scrollbar and a customized scrollbar.

![scroball sample for normal and custom scroball](https://cdn.hashnode.com/res/hashnode/image/upload/v1623488562770/kXzAYaFUu.png)


But before we move any further, let me briefly explain what makes that 👆 achievable 👇

##### 1. `body::-webkit-scrollbar`

This is a pseudo-element that targets the whole *browser scrollbar** and allows us to style it with CSS, our body element or any other element we want to apply scrollbar style must have an `overflow` of `scroll`.

### Example

```
body {
   background: lightgrey;
   overflow-y: scroll;
}

body::-webkit-scrollbar {
   width: 10em;
   background-color: red;
}
```
- ### Output 👇

![output of code above](https://cdn.hashnode.com/res/hashnode/image/upload/v1623491829230/AkmEOUCpR.png)

Now our scrollbar thumb is visible and easily draggable, let's proceed 👇.


##### 2. `::-webkit-scrollbar-thumb`

If you run the code from the example above, you will notice that the scrollbar `button` is difficult to notice from the background color of red. In other to make the **draggable scrolling handle** visible we need to make use of a `pseudo-element ` called `::-webkit-scrollbar-thumb`, let's proceed to apply it in our code.

Update the above example with the code below 👇

```
body::-webkit-scrollbar-thumb {
   background-color: #333333;
   height: 10rem;
}

```

- ### Output 👇

![browser output of body::-webkit-scrollbar-thumb ](https://cdn.hashnode.com/res/hashnode/image/upload/v1623492965061/zIHl4no7-.png)


##### 3. `::-webkit-scrollbar-track`

This pseudo-element is the track of the scrollbar, where the `dark charcoal` (#333333) bar in the above example is on top of the red bar.

This red bar is called the `scrollbar track`, which means that we can directly set the background colour here like below and will give us the same output as setting the background colour on the scrollbar itself `::-webkit-scrollbar`.

Update the previous code with the code below and check the effect out on your browser.
```
body::-webkit-scrollbar-track {
   background-color: green;
}

```

- ### Output 👇


![browser sample of the ::-webkit-scrollbar-track](https://cdn.hashnode.com/res/hashnode/image/upload/v1623493615620/nvw3SycAt.png)

<hr />

With the knowledge of the above-explained `pseudo-elements`, we are good to go, to check what is achievable with what we just learned.

I present to you 10 samples of a customized scrollbar 😇.

Continue reading the original post on my blog 👉[https://unclebigbay.com/10-custom-scrollbar-samples-for-your-next-project](https://unclebigbay.com/10-custom-scrollbar-samples-for-your-next-project)
Tip: Create Functions to Improve Code Readability
Tags: javascript, programming, react
Published: 2021-06-12 13:35:04

Functions are a great way to make a chunk of code reusable. But even if you'll only ever do something once in your program, it may be a good idea to wrap it in a function to indicate what it does. This makes it easier for the reader to understand what's going on without having to read the complete implementation.

In the example below, the complex ternaries are only going to be used to create `finalBaseUrl` and `finalPath`, but it's hard to understand what's going on without actually reading the implementation.

```javascript
const finalBaseUrl =
  this.baseUrl.slice(-1) === "/"
    ? this.baseUrl.slice(0, this.baseUrl.length - 1)
    : this.baseUrl;

const finalPath = path.slice(0, 1) === "/" ? path.slice(1, path.length) : path;
```

Instead, if we create functions with appropriate names to encapsulate the complex ternary logic, a reader can skip reading the implementation.

```javascript
const dropTrailingSlash = (string) =>
  string.slice(-1) === "/" ? string.slice(0, string.length - 1) : string;

const dropLeadingSlash = (string) =>
  string.slice(0, 1) === "/" ? string.slice(1, string.length) : string;

const finalBaseUrl = dropTrailingSlash(this.baseUrl);
const finalPath = dropLeadingSlash(path);
```

Although we end up with more lines of code, it's much easier to scan and understand what's going on. You may instead choose to write a comment explaining your code, but such comments often tend to go out of sync as your code changes.

If you work with React, you can apply the same for hooks. Rather than having a large chunk of code in a `useEffect` hook, you can break it down into multiple effects and assign it relevant names to indicate what they do.

{% twitter 1402717973366853634 %}

---

Thanks for reading!
Sr. React Native Dev 
Tags: hiring, reactnative, mobile
Published: 2021-06-12 13:33:44

## About Us: 

_We are a digital design and development agency with a passion for helping our clients build their communities whether through developing custom solutions or working with existing software to achieve goals. Our team thrives on new challenges, and our company culture promotes continuous improvement and learning. We have built a diverse portfolio, and are proud of the accomplishments we’ve achieved_


## About The Opportunity:

This position reports to the Chief Technology Officer, and works closely with the internal and client project teams. A daily workflow could range from working on one dedicated project, to working on several projects or interacting with clients during the normal course of a project process.

We are looking for a candidate with a strong emphasis on react native development, but we are always interested in people who also possess auxiliary skill sets. As an agency, our team has people full of talents that cross over when needed to help cover different needs based on the project.

A well qualified candidate will be well versed in working individually and as a team to figure out complex solutions. As part of a startup, it is imperative that you be a motivated, proactive individual able to take initiative as well as work in a team setting. We are looking for someone who is passionate about what they do, and who is looking to jump right in!


## Skill & Qualifications

An ideal candidate will fulfill most of the following experience requirements:

- 3+ years of web development experience
- Advanced UI/UX understanding
- Advanced understanding of creating Native Applications
- Advanced understanding of React Native
- Advanced understanding of React/Vue/Angular or similar modern libraries
- Experience with versioning systems (preferably git)
- Creative eye for detail
- Experience with Sketch/Photoshop is a plus
- Content writing skills is a plus

And of course these are all required to do the job:

- Work collaboratively with others on a diverse team
- Delegate tasks to others, we work as a team not as a bureaucracy
- Fluent english, grammatical skills
- Strong time management and organizational capabilities

The position requires flexibility, confidence, and a person who is willing to step in where needed. We are looking for confident individuals who can help our team grow. We expect the right candidate will be able to join the team and require little training. We expect for candidates reaching round two of interviews to complete a quick challenge to help us understand your skills in a real world application.

Remote employment is an option with the right skills and experience, but preference may be given to local candidates.


## How To Apply

Go to https://www.indeed.com/cmp/Audentio/jobs 
or email your resume and cover letter directly to megans@audentio.com

_Thank you!_
Prefer npm scripts to global commands
Tags: javascript, node, npm
Published: 2021-06-12 13:18:13

Define npm scripts in your `package.json`:

```json
"start": "ember serve",
"test": "ember exam --load-balance --parallel=4",
"lint": "npm-run-all --parallel --aggregate-output lint:**",
```

**and use those scripts, don't use global commands.**

Bad: `ember test` (yes, it's bad even if you see it in [the official docs](https://guides.emberjs.com/release/testing/#toc_how-to-run-tests))

Good: `npm test`

There are several benefits to using npm scripts instead of global commands:

1. No chance of local vs global package version mismatch that can lead to inexplicable errors
2. No chance of using the wrong command and/or options (for example, the default command for running tests in Ember projects is `ember test`, but a project might use `ember exam` and/or additional options like `--load-balance --parallel=4`)
3. No need to remember specific commands for each type of project, because `npm start` and `npm test` are **standard** commands used by virtually every JavaScript project, be it an Ember project, a React project, or an Express project
4. No need to install global packages, keep track of their versions, and update them

If you really need to run a one-off command, use npx, it will protect you from local vs global package version mismatch (because it uses local package if it detects one):

```console
npx prettier --write .
```
How Important is the Dhankesari Lottery Result in Goa?

Tags: lottery
Published: 2021-06-12 13:05:29

The fifth of the month of December has been the month of the Christmas lottery draw held in <a href="https://www.newsgater.com/lottery-sambad-today-result-11-55-am-4-pm-8-pm/">Lottery Sambad Today Result</a>. If you have a keen interest in this lottery, this place is the best for you to play. Many people from different parts of the world come here to have a look at their luck. If you are thinking about playing here, there are some ways that can make your way to success.

Like any other samba event, the Lottery Sambad draws are held at various places. For the first ones, they can go to the local stadium or even the local coffee house or any other public place that has been mentioned by the organizers of the Sambad draws. Others prefer to sit and have a look at the lottery samba results in their houses. This is considered as the safest among all the places mentioned above, since you are not likely to be affected by adverse weather conditions like rain or storm.

In addition, if the participants live in the city, there are certain hotels which conduct their own lottery samba games on a regular basis. It is one of the events that attract the tourists to the area with a great deal of zeal. People who come here have a great interest in getting the numbers that form the basis of the lottery.

Some of the most famous persons who have won the Sambodromo sambad include actors Rajinikanth and Anushka Shetty, as well as singers Ashok Patki and Sailoz Mukherjea. These people have a huge fan following in their respective domains. This has increased their popularity in the eyes of the common man. If you have a deep interest in the Indian state of Goa, you can surely identify with these people since they are the biggest influences in the area. You can now get tickets for the upcoming Goa State lottery games from the ticket selling agencies at various locations across the state.

There is another interesting factor about the Sambad that comes from the form of the different religions practiced here. People here are followers of both the Hindu and the Muslim faiths. There are many places in and around Sambodromo where you can find shrines to the both the religions, as well as temples dedicated to them. The dhankesari result of the lottery conducted in the state on a regular basis is also influenced by the faith of the local people.

The Bengali people, who were prominent rulers over the smaller Indian states, have a unique contribution to make in the shaping of the history of the country. They were the ones who transformed the destitute state of Goa into a major political power which today has numerous reputed organizations and tourist spots. The main aim of the rulers of the state at the time of writing the history books was to turn Goa, one of the smallest Indian states, into a major tourist destination in the world. So, it is quite obvious that the fate of the dhankesari lottery sambad result is closely associated with the Bengalis in Goa.
Creating-Live-Streaming-Video-Chat-App-without-voice-using-cv2-module-of-Python
Published: 2021-06-12 12:50:44

For creating live streaming video chat we have to install the the library that are mentioned below:
 
   1.pip install opencv-python 
   2.pip install sockets 
   3.pip install pickle-mixin
   4.pip install imutils 


First we have to write the server program:


import socket, cv2, pickle,struct,imutils

# Socket Create
server_socket = socket.socket(socket.AF_INET,socket.SOCK_STREAM)
host_name  = socket.gethostname()
host_ip = socket.gethostbyname(host_name)
print('HOST IP:',host_ip)
port = 9999
socket_address = (host_ip,port)

# Socket Bind
server_socket.bind(socket_address)

# Socket Listen
server_socket.listen(5)
print("LISTENING AT:",socket_address)

# Socket Accept
while True:
	client_socket,addr = server_socket.accept()
	print('GOT CONNECTION FROM:',addr)
	if client_socket:
		vid = cv2.VideoCapture(0)
		
		while(vid.isOpened()):
			img,frame = vid.read()
			frame = imutils.resize(frame,width=320)
			a = pickle.dumps(frame)
			message = struct.pack("Q",len(a))+a
			client_socket.sendall(message)
			
			cv2.imshow('TRANSMITTING VIDEO',frame)
			key = cv2.waitKey()
			if key ==ord('return'):
				client_socket.close()

Client side Program :

# lets mke the client code
import socket,cv2, pickle,struct

# create socket
client_socket = socket.socket(socket.AF_INET,socket.SOCK_STREAM)
host_ip = '192.168.43.35' # paste your server ip address here
port = 9999
client_socket.connect((host_ip,port)) # a tuple
data = b""
payload_size = struct.calcsize("Q")
while True:
	while len(data) < payload_size:
		packet = client_socket.recv(4*1024) # 4K
		if not packet: break
		data+=packet
	packed_msg_size = data[:payload_size]
	data = data[payload_size:]
	msg_size = struct.unpack("Q",packed_msg_size)[0]
	
	while len(data) < msg_size:
		data += client_socket.recv(4*1024)
	frame_data = data[:msg_size]
	data  = data[msg_size:]
	frame = pickle.loads(frame_data)
	cv2.imshow("RECEIVING VIDEO",frame)
	key = cv2.waitKey(1) & 0xFF
	if key  == ord('q'):
		break
client_socket.close()

After writing the code First we have run the server side program then we run client side Program.
Synchronization multiple goroutines with  sync.WaitGroup and Channel
Tags: go, beginners
Published: 2021-06-12 12:39:43

Golang has support for concurrency using goroutines and channels.
In this article, we will talk about how to synchronize multiple goroutines with `sync.WaitGroup` and `channel`

**sync.WaitGroup**
Used to wait for goroutines to finish executing
```
Add(delta int) // how many goroutines that you want to wait
Done()         // call when goroutine finished, this method will reduce the number of goroutines waiting
Wait()         // wait for all goroutines finisied then do next function
```
**Channel**
Channel is a pipeline for sending and receiving data between differenct goroutines
```
channel := make(chan <type>) // declare channel variable
chanel <- s_value            // send value into a channel
r_value := <-chanel          // receive a value from the channel
```
**Let's Code!**
```
func main(){
	var wg sync.WaitGroup
	var shared int
	channel := make(chan bool)

	wg.Add(3)
	go func() {
		defer wg.Done()
		shared = rand.Intn(100)
		close(channel)
		fmt.Printf("Task1 Done | SET shared = %d ... \n",shared)
	}()

	go func ()  {
		defer wg.Done()
		//wait for Task1
		<-channel
		fmt.Printf("Task2 Done | GET shared = %d ... \n",shared)
	}()

	go func () {
		defer wg.Done()
		//wait for Task1
		<-channel
		fmt.Printf("Task3 Done | GET shared = %d ... \n",shared)
	}()

	wg.Wait()
	fmt.Println("All done!")
}
```
**Result**
```
> go run main.go
Task1 Done | SET shared = 81 ... 
Task2 Done | GET shared = 81 ... 
Task3 Done | GET shared = 81 ...
All done!
```
**How this code work?**
this code is the program that contains 3 goroutines, the first goroutine is executed first to set the value to share variables and the last 2 goroutines are wait for the shared variable to be set then print the shared variable.
So, what is Machine Learning?
Tags: article
Published: 2021-06-13 11:36:07

---
title: So, what is Machine Learning?
published: true
date: 2021-06-12 12:36:47 UTC
tags: Article
canonical_url: https://reinforcement-learning4.fun/2021/06/12/so-what-is-machine-learning/
---

Machine Learning is an alternative approach to create computer programs to solve problems.

In the traditional approach, a programmer needs to design an algorithm and writes explicit instructions for the computer to execute.

In other words, the programmer needs to know (or design) a priori what are the required steps to produce an output y … 

[Continue reading So, what is Machine Learning? →](https://reinforcement-learning4.fun/2021/06/12/so-what-is-machine-learning/)
Is Python (and similar) really a programming language?
Tags: python, c, assembly
Published: 2021-06-12 12:20:42

For some reason, maybe because of my ego, I sometimes do not think that Python (and its similar) is a programming language.
Maybe because Python (and its similar) is a high-level programming language and near pseudo-code? I do not know.
It is not really that bad, but I do not consider it as an "achievement" if I master it or know anything about it.
Not only that, Python is far away from the Zen of Python (the latest version).
C++ Productivity Hacks
Tags: cpp, programming, hacks
Published: 2021-06-12 12:20:23


## 1. Master Header File
```cpp
#include <bits/stdc++.h>
```

## 2. Faster I/O Operations
```cpp
ios::sync_with_stdio(0);
cin.tie(0);
cout.tie(0);
```

## 3. Macros for Debugging
```cpp
#define deb(x) cout << #x << " : " << x << "\n"
```

## 4. Number of Digits
```cpp
int number = 12345;
int digits = floor(log10(number) + 1); // 5
```

## 5. Swap Two Numbers
```cpp
int a = 10;
int b = 20;
swap(a, b); // 20 10
```

## 6. Number of Set Bits
```cpp
int n = 15;
int setBit = __builtin_popcount(n); // 4
```

## 7. Auto Keyword
```cpp
vector<int> v{1, 2, 3, 4, 5};
for (auto x : v)
  cout << x << " "; // 1 2 3 4 5
```

## 8. Inbuilt GCD Function
```cpp
int x = 12;
int y = 16;
int gcd = __gcd(x, y); // 4
```

## 9. Lambda Function
```cpp
auto add = [](int x, int y) {
  return x + y;
};
int sum = add(10, 20); // 30
```

## 10. Accumulate Function
```cpp
int sum = 10;
int arr[] = {20, 30, 40};
sum = accumulate(arr, arr + 3, sum); // 100
```

Tip: Use "\n" instead of endl;
New Beginning...! MERN
Tags: react, tailwindcss, typescript, api
Published: 2021-06-12 12:17:21

Hello Readers,

After a long time i am writing on Dev[.]to website,
i just want to share about learning which i did today, which might helpful to someone who is beginner.

I have decided to take 100Daysofcode challenge, so it will give motivate me to learn more and improve myself in dev world.

my main goal is to become full-stack developer,

Day 1/100 Days.

Today i have created covid-19 tracker(India) with React, TypeScript, TailwindCss & API.

Hosted on: https://shaileshparmar-webdeveloper.github.io/covid19-tracker-india/

Github: https://github.com/ShaileshParmar-WebDeveloper/covid19-tracker-india
I Made a Discord Server!
Tags: discord, social, community, python
Published: 2021-06-12 12:16:40

## Welcome Back and Sorry
Sorry, again for not being active I was busy setting up this server and lot of other personal stuff and projects. Anyways let me tell you about the purpose of this post, even though you have already read the title!

## I thought we could have some fun! And be social!
So, I have made a discord server for all of you to join! link is below! You can chat there with bots and all that stuff. The server focuses on Coding, Python, JS, Webdev, And many more programming languages. You can get help and chat! This is a super short post, I know. This was just to inform you about this!

## Bye, Hope to see you there!
Hope you join and that's all for this post! Byeeeeeee!

Link to Join - https://discord.gg/DUeaUDxC7t
Day 24/30 : Amazing Profile Cards Design Using HTML and CSS
Tags: html, css, webdev, tutorial
Published: 2021-06-12 12:03:14

Welcome to Day 24 of this [Challenge](https://dev.to/somanathgoudar/30dayschallenge-30-days-extreme-html-css-challenge-50k1). This is what I created today. 

**➜ Here is the Demo :**
![Amazing Profile Cards Design Using HTML and CSS](https://1.bp.blogspot.com/-ppBfUHb1hj0/YKoYyKfzMCI/AAAAAAAAAHw/wCtMPDE4f_A40G54lE_WUEzMTMUPCpkXQCLcBGAsYHQ/s600/p24.gif)

**➜ Video Tutorial :**

{% youtube W2TomrNWAl4 %}
**➜ Source Code :**
https://www.futurecodersweb.com/2021/06/amazing-profile-cards-design-using-html_01995849052.html


**➜ Instagram Post and Reel for Day 24 :**
[See Post and Reel](https://www.instagram.com/future_coderss/)

------------------------------------------------------------------

Hey, If You don't know what is happening here. Don't Worry, I am doing a crazy challenge 😅. Read More about it from the post below.

{% link https://dev.to/somanathgoudar/30dayschallenge-30-days-extreme-html-css-challenge-50k1 %}

**Support Me :**
👉 Buy me a Coffee: https://www.buymeacoffee.com/somanathgoudar
👉 [Follow Me on Instagram](https://www.instagram.com/somanath_goudar/)
👉 [Follow Future Coders on Instagram](https://www.instagram.com/future_coderss/)
👉 [Subscribe to My Main Channel](https://www.youtube.com/channel/UC_nTrhTr5fnBGjOxnkPUmmA)
👉 [Subscribe to Channel Created for this Challenge](https://www.youtube.com/channel/UCzGSyMOf2jPt1MkNBB3SJ3g)

------------------------------------------------------------------
Study MBBS in Ukraine
Tags: mbbsinukraine
Published: 2021-06-12 12:01:18

MBBS in Ukraine is one of the best options for MBBS students. The cost of MBBS in Ukraine is comparatively lower than Indian private medical colleges. Ukraine is a country in Eastern Europe. Ukraine is primarily known for a country providing quality Medical Education. Ukraine is one of the safest countries for Indian students. In the field of medicine Ukraine is ranked at the fourth position for having the largest number of post-graduation.
Daily Developer Jokes - Saturday, Jun 12, 2021
Tags: jokes, dailydeveloperjokes
Published: 2021-06-12 12:00:05

---
title: "Daily Developer Jokes - Saturday, Jun 12, 2021"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Saturday%2C%20Jun%2012%2C%202021"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1259316ab83.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q:___ What are the three hardest problems in computer science?

___A:___ Naming things and off-by-one errors
 -->