teleren/devto huggingface dataset:
Yes I am a beginner 
Tags: beginners, javascript, python, node
Published: 2020-11-06 05:39:33

Hi All, This is Balaji from Chennai am new to Dev.to  and this is my first post and am very much interested in the below tech mentioned(#) tech stack
**Tech Stack**: 
•	Languages: NodeJS, Java, Shell scripting, PLSQL 
•	DevOps Tools: Jenkins, git, docker 
•	Cloud services like AWS and Azure

Please provide your suggestions to upskill them as, am new to dev.to. Excited to join the community. Feel free to connect with me in LinkedIn.
[Link](https://www.linkedin.com/in/balaji-b-768311148/)
and if you have time please look into my repository.
[Link](hub.com/balajibalajanc)
Day 5 of 100 - Facebook Sign Up in React
Tags: react, javascript, 100daysofcode
Published: 2020-11-06 05:30:25

When your specialty and passion is for well-designed pages which you apply deftly with a keen eye and infinite patience for CSS, it is painful when you are under a time crunch and have to produce something ugly, like I've done today, and call it done. I wanted to copy the Facebook registration page and get it working in React. Did I succeed?

Facebook original: 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8mgpcc5otmlm57tlj6sf.png)

My clone:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/eczc9m4rtbkfvoh3kr9g.png)

##Purpose
I liked the simplicity of the Facebook login page that I copied on [Day 2](https://dev.to/jwhubert91/day-2-exploring-forms-in-react-with-facebook-login-clone-1fah) so when I wanted to knock out a React project today and get some form practice in I went back to copy their register page. Creating a modal from scratch in React quickly became too difficult for my 10 PM brain so I just made a div to hold the form and made it look like a modal in the center of the window. It did end up being great practice creating controlled components, because user input is a bit more complicated in React than in standard HTML.

##To Bootstrap, or Not to Bootstrap?
I work all day in Bootstrap at work and use it frequently in projects so when the time came today to make another form-centric React project with uniform inputs and spacing, today I shrugged off the old Bootstrap CDN in favor of writing my own styling. (The habit is so ingrained that I actually think I included a link to the stylesheet CDN in my html page but never used any classes from it.) And thus, the spacing and some of the general feel of this thing is obviously off.

##Takeaways
There was not a ton to take away from this project except some practice setting the value for different types of inputs and having a working onChange function that worked for all inputs. It's actually very satisfying storing data in state and having it be available throughout the app. I print a JSON version of the app state on form submission, but obviously it could be used to create an account and for authentication, etc.

That's it. See you tomorrow. Maybe then we'll know who the President is. Fingers crossed it isn't Kanye, as much as I love the guy.

github: https://github.com/jwhubert91/100daysofreact/tree/master/day-5-register

deployed site: https://100-react-projects-day-5-fb-register.netlify.app/

Follow me on my fancy new Twitter:
www.twitter.com/jwhubert91
Detect user idle in react-native
Tags: reactnative
Published: 2020-11-06 04:36:58

One of requirements in an app with sensitive data is to force user to logout if the user has been idle for certain amount of time. By idle, I mean the user doesn't touch anything in the app. Normally, we use `Touchable*` to detect a user press event. But we cannot apply this on top of another element because it will override all touch event on the pages and your app won't be functional. After a brief research, I found that we can use `PanResponder`.

My strategy is to apply `PanResponser` on top of the app. We start a `setTimeout` with a certain amount of time (supposed to be configurable) during the user opens the app. Whenever the user presses anywhere on the screen, we `clearTimeout` and reset it. Note that I used `onStartShouldSetPanResponderCapture` of `PanResponser` event to detect user touch event.

```js
import React, { useState, useEffect, useRef } from "react"
import { View, PanResponder } from "react-native"

const AppContainer = props => {
  const timerId = useRef(false)
  const [timeForInactivityInSecond, setTimeForInactivityInSecond] = useState(
    3600
  )

  useEffect(() => {
    resetInactivityTimeout()
  }, [])

  const panResponder = React.useRef(
    PanResponder.create({
      onStartShouldSetPanResponderCapture: () => {
        // console.log('user starts touch');
        resetInactivityTimeout()
      },
    })
  ).current

  const resetInactivityTimeout = () => {
    clearTimeout(timerId.current)
    timerId.current = setTimeout(() => {
      // action after user has been detected idle
    }, timeForInactivityInSecond * 1000)
  }

  return (
    <View style={{ flex: 1 }} {...panResponder.panHandlers}>
      {/* <YourApp {...props} /> */}
    </View>
  )
}

export default AppContainer
```
Change Azure Repos Default Branch
Tags: azuredevops, devops, branch, azurerepos
Published: 2020-11-06 05:18:09

Azure Repos now offers a __customizable default branch name for Git__ which can be set per project or per organization.

Today we talk about the default branch name in Azure Repos and how to change it. Let's see how.

### Video

If you are a __visual learner__, or simply prefer to watch and listen instead of reading, here you have the video with the whole explanation and demo, which to be fair is much ___more complete___ than this post.

{% youtube zoTnQRyt6pM %}

([Link to the video: https://youtu.be/zoTnQRyt6pM](https://youtu.be/zoTnQRyt6pM))

If you rather prefer reading, well... let's just continue :)

### Intro

To change the default branch name for new repositories you have 2 options: you can do it either at project-level or at organization-level.

#### Change at Project Level

To change it at project level, you need to go into `Project Settings > Repositories > Settings`

![Prj level settings](https://dev-to-uploads.s3.amazonaws.com/i/kgowngnncnrghru7tuzh.png)

Remember that this will set the new default branch name __only on newly created repos inside this project__.

If you want to __change the default branch for an existing repo__, just go to:

`Repos > Branches > Create or select a branch > ... > Set as default`

[Watch the video for the full example](https://www.youtube.com/watch?v=zoTnQRyt6pM&t=60s)

This is good, but if you have many projects in your Azure DevOps organization it will take you forever to change this. This is where the new org-level settings comes in help.

#### Change at Organization Level

To change the default branch name for new repositories at org level go into `Org Settings > Repositories > Settings`

![Org level settings](https://dev-to-uploads.s3.amazonaws.com/i/ildptlk95jsp4kubyn13.png)

Now __all your new repos__ will have the default branch name as you set here.

You can still change the name at project level if you want, and that will override the setting at organization-level.

[Watch the video for the full example](https://www.youtube.com/watch?v=zoTnQRyt6pM&t=120s)

### Conclusion

Let me know in the comment section below what is your default branch name of choice.
Reactjs templates free download
Tags: react
Published: 2020-11-06 05:12:08

---
title: Reactjs templates free download
published: true
description: Reactjs free templates and admin dashboard templates
tags: reactjs
//cover_image: https://direct_url_to_image.jpg
---

Hi to all, here you can get reactjs templates and admin dashboard templates al well, thanks.

https://therichpost.com/reactjs-template-and-admin-dashboard-templates-free/
Testing With Deno - Framework
Tags: deno, typescript, javascript, testing
Published: 2020-11-06 04:49:38

# Testing With Deno

In this multipart tutorial I will show how to test with Deno.

## The Built-in Deno Testing

Deno has it's own built in testing framework
```typescript
// some_file_test.ts
Deno.test({
	name: "my test",
	fn: (): void => {
		// Do some testing here
	}
});
```
And you can run these tests with
```
$ deno test
```

### But What Is Wrong With This?
Well, it is hard to have structure in your tests, like frameworks such as Jest and Mocha allow.

## Rhum - The Deno Testing Framework

[Rhum](https://github.com/drashland/rhum) is a Deno testing framework created by the [deno-drash](https://github.com/drashland/deno-drash) REST microframework team. Let's take a look at how you use it.
```typescript
import { Rhum } from "https://deno.land/x/rhum@v1.1.4/mod.ts";

Rhum.testPlan("some_file_test.ts", () => {
	Rhum.testSuite("MyFunction", () => {
		Rhum.testCase("does stuff", () => {
			// Assert some stuff
		});
	});
});
```

### Benefits

The Rhum testing framework allows you to have more complex organization of unit tests.

I will soon by posting a tutorial on assertion libraries.
Stop a service running on a specified port
Tags: command
Published: 2020-11-06 04:34:36

##Windows

```
netstat -ano | findstr "PID: <port>"
```

Then use `taskkill`

```
taskkill /pid <pid> /f
```

##Unix

```
netstat -vanp tcp | grep <port>
```

Then use `kill`

```
sudo kill -9 <pid>
```
Preventing copying text in a webpage 😁
Tags: css, html, webdev, javascript
Published: 2020-11-06 04:07:39

This feature is really important if you have a very very unique content website or an online eBook. So here is the basic post and required post for all of you. In this post, we'll see how to prevent copying text in a webpage and I have got a bonus too.   
<hr>
Do you want development news right on your default chrome or firefox page? Then get the amazing  [daily.dev](https://api.daily.dev/get?r=rahxul) extension. There are only PROS of getting this extension no CONS. 
<hr>
# Lez Go 👊

### Simple and Basic ONE!
-> This is the simple tutorial for preventing copying of an element on the web-page. Ex. `p`, `div`, `main`. 
So here is how we can do that. 

```html
<div id="test" onmousedown='return false;' onselectstart='return false;'>
<!-- So we're disabling the texts coming under div tag-->
``` 
Let's see an example- 
 {% codepen https://codepen.io/rahxuls/pen/wvWxVOL %}

See you can't select the text now.  👊

<hr>

### Using CSS
-> You can directly disable by using CSS by just applying these properties to the whole body, you can move them to a class and apply that class to the elements you want to disable select.

```css
/* Prevent text selection of a <body> element in all major browsers */
h2 {
	-youbkit-touch-callout: none; /* iOS Safari */
        -youbkit-user-select: none;   
/* Chrome 6.0+, Safari 3.1+, Edge & Opera 15+ */
	-moz-user-select: none;	/* Firefox */
	-ms-user-select: none;	     /* IE 10+ and Edge */
	user-select: none;		/* Non-prefixed version,
				  currently supported by Chrome and Opera */
}

```
Here is the example for that- 
{% codepen https://codepen.io/rahxuls/pen/QWEVLLb %}
<hr>
### Disabling Right Click 
-> So technically no chances of copying. 

We will use JavaScript and jQuery
```javascript
document.oncontextmenu = new Function("return false;");

///JavaScript
```
```javascript
$(document).ready(function () {
	$("body").on("contextmenu",function(e){
		return false;
	});
});

// jQuery
```
The main motive is to capture the **onContextMenu** event, and return false in the event handler. So, this will block the access from mouse right click as well from the keyboard.

<hr>
Do you want development news right on your default chrome or firefox page? Then get the amazing  [daily.dev](https://api.daily.dev/get?r=rahxul) extension. There are only PROS of getting this extension no CONS. 
<hr>
Thanks For Reading. 
If it's helpful. Then Like, Share and React. 😁😎
installing ubuntu for first time in windows 
Published: 2020-11-06 04:07:18

first of all at starting i dont know about ubuntu i started learning it from other resources like youtube and mainly one video helped me alot ..which is amfoss video here i was providing the link
https://www.youtube.com/watch?v=u5QyjHIYwTQ&t=359s
if u go through this video it will  help u to go to final stage
Estudiar en el extranjero
Tags: studentlife
Published: 2020-11-06 03:43:00

Hola!

Mi nombre es Raquel, y empecé a escribir este blog más orientado a ideas de productividad y technology, pero me di cuenta que tengo conocimiento adicional a compartir! Relacionado a mi experiencia postulando a distintas universidades, he tenido la dicha de ser aceptada en varias de las mejores universidades del mundo, y de haber obtenido distintas becas, además de haber vivido en tres continentes…que creo que ayuda mucho a ver las cosas con una perspectiva un poco distinta.

Al ser esta mi primer entrada relacionada, les voy a comentar el proceso general de la postulación a universidades extranjeras desde Perú, desde mi punto de vista. Lo primero es decidir el tema de la maestría que quieren hacer, luego averiguar sobre el Pais o Países donde quieren estudiar, y empezar a buscar las universidades y programas, creo que es importante mencionar que dependiendo del sitio donde decidan estudiar la perspectiva de una maestria es distinta, por ejemplo en Europa es muy común hacer un master, no es algo extraño realizar la maestria después del pregrado sin haber tenido experiencia profesional, mientras que en países como Canadá o Australia, el estudiar una maestría no es tan ¨necesario¨ para el mercado laboral y se ve como algo más de prestigio o especialización, tal vez esta perspectiva sea mas parecida a Perú. 
Ya sé que cuando uno empieza en este proceso hay muchas dudas, pero no se preocupen iré posteando poco a poco, igualmente un tip respecto a los documentos, estos van a depender mucho de cada país y universidad, pero fijo van a pedir:
- El bachiller o titulo legalizado por el ministerio de RREE y traducido (de estudiar la maestría en otro idioma)
- El certificado de notas legalizado por el ministerio de RREE y traducido.
- Examen internacional de inglés - IELTS Académico o TOEFL  (En mi caso he realizado ambos exámenes, y los han aceptado en las universidades a las que he postulado)
- Motivation letter, básicamente uno explica porque quiere ir a estudiar a esa universidad y que lo motiva a elegir ese tema de maestria.
- Cartas de recomendación, estas pueden ser de profesores o profesionales.
- Tercio superior, esto suma mucho en caso lo tengan.
- Pasaporte
- CV (opcional - depende de la maestria)
- Tesis (he visto muy pocas veces este requisito, y esta más relacionado a maestrías de investigación)

Espero que esta información les sea útil, y ya iré compartiendo más recomendaciones acerca de como hacer una carta de motivación, pedir las cartas de recomendación, el examen de inglés, buscar becas, etc, etc

Que estén bien!

Raquel
Do you like PHP and web dev? Follow me and I will follow you.
Tags: php, laravel, webdev, beginners
Published: 2020-11-06 03:28:26

---
title: Do you like PHP and web dev? Follow me and I will follow you.
published: true
description: 
tags: php, laravel, webdev, beginner
//cover_image: https://www.centrechiroaction.com/ressources/images/d6721bfa42f3.jpg
---

Hi all,

In the next few months I will be working a lot with PHP and Laravel.

I'm looking to expand my circle of friends/contacts to discuss and exchange ideas about PHP and web development in general.

So if you are interested follow me and I will follow you.

Cant wait to read your post and cant wait to share mine!
Code Smell 18 — Static Functions
Tags: codenewbie, tutorial, development, coding
Published: 2020-11-06 03:26:26

*Yet another global access coupled with laziness.*

> TL;DR: Don't use static functions. They are global and utilities. Talk to objects instead.

# Problems

- Coupling

- Testability

- Protocol Overloading

- Cohesion

# Solutions

- Class [Single Responsibility Principle](https://en.wikipedia.org/wiki/Single-responsibility_principle) is to create instance. Honor it.

- Delegate method to instance.

- Create stateless objects. Don't call them **helpers**.

# Examples

- Static class methods

- Static attributes

# Sample Code

## Wrong

[Gist Url]: # (https://gist.github.com/mcsee/293dc79524550a542fc70db572d8e092)
```javascript
class DateStringHelper {
   static format(date) {
     return date.toString('yyyy-MM-dd'); ;    
  }
}


DateStringHelper.format(new Date());
```

## Right

[Gist Url]: # (https://gist.github.com/mcsee/b8cfaddb9085b92d21a434a2bca2b14e)
```javascript
class DateToStringFormatter {
   constructor(date){
      this.date = date;
   }
     
   englishFormat() {
     return this.date.toString('yyyy-MM-dd');    
  } 
}

new DateToStringFormatter(new Date()).englishFormat()


```

# Detection

We can enforce a policy to avoid static methods (all class methods but constructors).

# Tags

- Global

- Libraries

# Conclusion

Class are globals disguised. Polluting their protocol with "library methods" breaks cohesion and generates coupling. We should extract static with refactorings.

In most languages we cannot manipulate classes and use them polymorphically, so we can't mock them or plug them on tests. 

Therefore, we have a global reference too difficult too decouple.

# Relations

{% post https://dev.to/mcsee/singleton-the-root-of-all-evil-50bh %}

{% post https://dev.to/mcsee/code-smell-22-helpers-2j6j %}

# More info

- [Single Responsibility Principle](https://en.wikipedia.org/wiki/Single-responsibility_principle)

{% post https://dev.to/mcsee/how-to-decouple-a-legacy-system-30ke %}

# Credits

Photo by <a href="https://unsplash.com/@alexazabache">Alex Azabache</a> on <a href="https://unsplash.com/s/photos/bridge">Unsplash</a>

* * *

> There is no programming problem that can't be solved with one more level of indirection.

_John McCarthy_

{% post https://dev.to/mcsee/software-engineering-great-quotes-26ci %}

* * *

This article is part of the CodeSmell Series.

{% post https://dev.to/mcsee/how-to-find-the-stinky-parts-of-your-code-1dbc %}

*Last update: 2021/06/28*
November 5th, 2020: What did you learn this week?
Tags: weeklylearn, discuss, weeklyretro
Published: 2020-11-06 03:07:04

It's that time of the week again. So wonderful devs, what did you learn this week? It could be programming tips, career advice etc.

<center>

![It’s time to get your learn on](https://media.giphy.com/media/a7NBvg3Ss8UYo/giphy.gif)
</center>

Feel free to comment with what you learnt and/or reference your TIL post to give it some more exposure.

{%tag todayilearned %}

And remember, if something you learnt was a big win for you, then you know where to drop it as well.👇👇🏻👇🏼👇🏽👇🏾👇🏿

{% link https://dev.to/devteam/what-was-your-win-this-week-5932 %}

<center>

![Someone feeling like "Yaaas!"](https://media.giphy.com/media/zBhZiVNNQjfTG/giphy.gif)
</center>
Hamburger Menu Concept
Tags: codepen
Published: 2020-11-06 02:07:37

<h5>Menu Concept</h5>
<p>Find more demos: <a terger="_blank" href="https://www.w3tweaks.com/javascript-toggle-menu.html">Link</a></p>
{% codepen https://codepen.io/eliortabeka/pen/beGJXV %}
Offset pagination and total count?
Tags: hasura, graphql
Published: 2020-11-06 01:34:58

#Overview
I am playing with Hasura / grapghql and having an issue with offset pagination to include total number of records in certain structure.

##Query
Below is an example query I am doing to get the second page with 3 items.

```
query getItems {
  items(offset: 2, limit: 3) {
    id
  }
  items_aggregate {
    aggregate {
      count
    }
  }
}
``` 

###Query Results
You can see that to get the total number of records the property is `item_aggregated.aggregate.count`. That is a bit messy and long just for a `total count`.
```
{
  "data": {
    "items": [
      {
        "id": "829b1baa-344d-4360-8d11-eb31fa592f29"
      },
      {
        "id": "0ac64c11-1e40-44c3-84ad-4eb5e2e495a9"
      },
      {
        "id": "827fcfa8-6ce6-4612-9bab-3ea62969f041"
      }
    ],
    "items_aggregate": {
      "aggregate": {
        "count": 100
      }
    }
  }
}
```

###Required Results
Below is the result structure  I would like to get back.  You can see that `items` now have 2 different properties:
 1. __records__ array of the actual data
 2. __total__ an integer for the total record count.
```
{
  "data": {
    "items": {
       "records":[
            {
              "id": "829b1baa-344d-4360-8d11-eb31fa592f29"
            },
            {
              "id": "0ac64c11-1e40-44c3-84ad-4eb5e2e495a9"
            },
            {
              "id": "827fcfa8-6ce6-4612-9bab-3ea62969f041"
            }
          ],
       "total":100
    }
  }
}
```
#Question
To my understanding this can be done by using a resolver or a custom function but not sure how you do this.  If someone can provide me sample on how to do this?
Have you moved from Wordpress to a Headless CMS ?
Tags: wordpress
Published: 2020-11-06 00:31:18

I use Wordpress for creating almost all websites. At times I had to create a lot of custom post types and modify the WP database. But now I'm considering maybe a headless CMS is better fit for these custom websites.

Strapi.io and Netlify looks promising to me. Strapi seems to be open source so I guess I can host it in my server. Also I remember Ghost.org was claiming it much faster than Wordpress.

Any advice? Have you used any headless CMS?
System Design Basics: Load balancer 101
Tags: systemdesign, softwareengineering, architecture, technology
Published: 2020-11-06 13:43:37

---
title: System Design Basics: Load balancer 101
published: true
date: 2020-11-06 00:17:16 UTC
tags: systemdesign,softwareengineering,softwarearchitecture,technology
canonical_url: https://codeburst.io/system-design-basics-load-balancer-101-adc4f602d08f
---

[![](https://cdn-images-1.medium.com/max/2600/0*YIuEDe-yXagGc-bo)](https://codeburst.io/system-design-basics-load-balancer-101-adc4f602d08f?source=rss-577e2119c7f2------2)

####Getting started with Load balancer

The load balancer is a server that usually sits between client devices and a set of servers and distributes client requests across servers. Load balancers can be placed in various places of a system. The loads on the servers need to be distributed in a balanced way; that’s why they are called a load balancer.

###Where do we use a Load balancer?
Typically, we can put a load balancer between the client and the server to handle incoming network requests. Another very normal use of an LB is for distributing the network traffic across backend servers. A load balancer is used to reduce individual server load. And it prevents a single point of failure for any server. So, it improves the overall availability and responsiveness of the system. We may add LBs at various places in the system. Especially where we have multiple resources like servers or database or cache.

###Load Balancing Techniques:
There are various types of load balancing methods. Every type uses different algorithms for different purposes. These techniques are actually different types of strategy for server-selection. Here is a list of load balancing techniques:

####Random selection: 
In this method, the servers are selected randomly. There are no other factors calculated in the selection of the server. There might be a problem with some of the servers sitting idle, and some are overloaded with requests in this technique.

####Round Robin: 
This is one of the most common load balancing methods. It’s a method where the LB redirects incoming traffic between a set of servers in a certain order. Let's say, there is a list of five servers; the first request goes to server 1, the second one goes to server 2, and so on. When LB reaches the end of the list, it starts over at the beginning, from server number 1 again. It almost evenly balances the traffic between the servers. But in this method, server specifications are not considered. The servers need to be of equal specification for this method to be useful. Otherwise, a low processing powered server may have the same load as a high processing capacity server.

[Continue reading on codeburst »](https://codeburst.io/system-design-basics-load-balancer-101-adc4f602d08f?source=rss-577e2119c7f2------2)
If you don't have medium account check [this link](https://codeburst.io/system-design-basics-load-balancer-101-adc4f602d08f?sk=795ff2f70ce8ded089cdbec0e3332e5b)