teleren/devto huggingface dataset:
JavaScript Built-in Functions
Tags: javascript
Published: 2021-05-10 02:22:04

In the past few months, I've been learning the ropes of JavaScript and came across some useful built-in functions that always come in handy. 

### Arrow Functions

With arrow functions you don’t need to pass the function keyword;  it can also be passed as an anonymous function.

```javascript
functionOne = ( ) => {
     return console.log(‘this is an anonymous function);
}

functionTwo  =  parameter => {
    return console.log(this has one parameter);
}
```
An *Inline function* doesn’t need the return keyword and you can remove the parenthesis if you’re passing 1 parameter.

`const multiply =  num => num * 4;`

verses

`const multiply = (num) => {
   return num * 4;
}`

### Splice 
The Splice function selects element(s) in array that can be replaced or removed.

```javascript
Let fruits = [‘apple’, ‘kiwi’, ‘orange’, ‘avocado’];`

Fruits.splice(2, 0, ‘raspberries’);
```

2 is where the new element will be positioned, 0 is the number of elements that are removed, ‘raspberry is the new element that's added to the array.

`modified array: = [‘apple’, ‘kiwi’, ‘orange’, ‘raspberry’, ‘avocado’];`

### Slice
Slice Returns a new array.

```javascript
names = [‘Pat’, ‘John’, ‘Ann’, ‘Lukas’, ‘Tom’]
names.slice(2, 3);
new array name: [‘Ann’]
```
Photo credit: Christina Morillo from Pexels
React (Conceptos Básicos)
Tags: react, beginners, webdev, apuntes
Published: 2021-05-10 01:46:04

# *¿Qué es React?*


Es una librería de código abierto de Java Script que nos permite crear interfaces de usuario.



# *Características*



- *Usa un virtual DOM* en vez del DOM real haciendo el manejo de este más fácil.

- Es *declarativa*, puedes crear tus propias etiquetas que al final de cuentas son [componentes](https://dev.to/betosandoval/2-react-componentes-2mg2), esto hace fácil seguir patrones de diseño y  crear interfaces de usuario interactivas.

- Es *eficiente*.

- *Predecible*. Fluye en una sola vía.

- React está basado en [***Componentes***](https://dev.to/betosandoval/2-react-componentes-2mg2). Pequeñas piezas de código encapsuladas que pueden tener un estado o no, permite organizar aplicaciones complejas en pequeños componentes sencillos y fáciles de mantener.

- Se puede trabajar con React del lado del servidor con Node

- Se puede crear aplicaciones móviles con Reac Native y aplicaciones de escritorio con Electron.

# Virtual DOM

VDOM Es una representación en memoria de lo que es el DOM real del navegador. Actua como intermediario entre el estado de la aplicación y la UI que está viendo el usuario de tu proyecto.

### Reconciliación

Este concepto describe la manera en que React manipula y actualiza los componentes. Para ello usa un algortmo diferencial para actualizar los elementos del árbol de tu aplicación.

### Fiber (Fibras)

Son objetos internos de React que mantienen información del árbol de los componentes. Se podiran vislumbrar como partes pequeñas que nos ayudan a actualizar la información de los nodos.


# JSX



El JSX es una combinación de Java Script con XML, nos provee una sintaxis fácil de usar  ("syntactic sugar").

Ejemplo: a la constate llamada "h1Tag"  le asignamos como valor una etiqueta de HTML.

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

# Crear un proyecto en React.


Para crear un proyecto en React usamos el comando:

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

Con este comando se creara un proyecto con el nombre "my-app". Para personalizar el nombre de nuestro proyecto debemos cambiar "my-app" por el nombre deseado.


npm start. Comienza a ejecutar un servidor para nuestra la aplicación que acabamos de crear.

En mi próximo post publicare mis apuntes sobre los [componentes](https://dev.to/betosandoval/2-react-componentes-2mg2)  en React.
Understanding Outlines in CSS, overwriting browser defaults.
Tags: css, browser
Published: 2021-05-10 00:57:11

You might have noticed that in newer versions of web browsers there is this dark outline in forms, buttons after they are clicked and many more, Now what are those things, why are they there and how can you remove them? (cause to be sincere these aren't beautiful)

It usually shows when it's focused, or active. (Pseudo selector for focus, *:focus*) And Focus has this outline property it's the browser defaults.
The outline is comparable to a border but it's not part of the box model, It is like a lighter version of the border.

You can style it with the outline property. 
To remove it, outline: none;
It's usually displayed when the element is focused so use the focus Pseudo class
*button:focus {
      outline: none;
}*

You can set the outline to a different look maybe its width, its color too, you can also add a border-radius to it too and also make it like a normal border

see MDN For a complete reference of what you can set with the outline https://developer.mozilla.org/en-US/docs/Web/CSS/outline

With that, you have full access to your input or button outline and remove ugly outlines by the browser defaults. Now go give that outline a great look😀😀
How to place background image using ::before pseudo selector
Tags: codepen
Published: 2021-05-10 00:35:07

{% codepen https://codepen.io/mikedev-frontend/pen/RwpPyNN %}

##Hello everyone! I've been on DEV for a while now and have always wanted to get my hands dirty posting stuff and showing off the skills I've learned. 

Well, this is my first post I thought fit to share as it is something that I was curious about but never made the time to try out. 

Today I'm gonna look at how to add a background image using the::before pseudo-element. 

My research into this nifty trick took me to the Geeks for Geeks website and they have it all laid out pretty nice and easy to follow, although I just made some small adjustments to make the layout look how I wanted all of the magic is from Geeks for Geeks, so big thanks to them for helping me to understand this.

I hope my post will clarify the ins and outs for any other beginners out there who are looking to try this out. 

Ps. There is this annoying blur on the button I'm still trying to figure out what that is :)
MOST POPULAR WEB DEV STACKS
Tags: webdev, 100daysofcode, css, uiweekly
Published: 2021-05-10 00:12:55

1) LAMP: 
Linux , Apache, MySQL, Php

2) LEMP:
Linux, Nginx, MySQL, Php

3) MERN:
MongoDB, Express, React, NodeJS

4) MEVN:
MongoDB, Express, Vue, NodeJS

5) MEAN:
MongoDB, Express, Angular, NodeJS


If this post is helpful for you, leave and reaction and share.
Making a zsh script
Tags: zsh, shell, scripting, beginners
Published: 2021-05-10 00:05:37

#Background:
I have been making small notes about my learnings daily, typically any new thing I learnt. I make a small note about it.
I want to name this note with dates and time(This is for easy find, recollection etc) but I need to also get the date in this format **20210510002211**

-- Now, the terminal will readily spew out this date formate with this command
***date  +%Y%m%d%H%M%S ** - try it.***

-- Now I can't keep that in the terminal, hence why i need to make it into a script. give it a fancy name and run quick
What do you need:

-A text editor(I use nano here)

1. Create a file 
```
#!/bin/bash
# A script that spews out current long date and time
date  +%Y%m%d%H%M%S
```
- save the file giving it a fancy name (datum)

2. Setting Permission
```
chmod 755 datum       //datum is the fancy name  I'm calling the script
````
--- The script can run now, try ``` ./datum ```

3. Putting it in my own path
- Run ``` echo PATH ```
-- It should reveal a the current excutable path on the system
-- It is good practice to have a special folder for your scripts /bin, create that folder on your home directory.
Now you will have a this pathe *./bin/datum*

4. We need to add the new path to PATH definition on the .zshsrc file
- do ``` nano ~/.zshsrc``` - You will be able to edit that file now, add the path to the script to the PATH line
- save and exit

5. Now, we need to refresh the zsh files
- do ```source .zshsrc```

*Now, just typing datum in the terminal should spit out that long date and time*
IF I WERE STARTING FROM ZERO. A Step by step plan on how to go from 0 - 100 in programming.
Tags: codenewbie, productivity, motivation
Published: 2021-05-10 00:03:58

1) Find a tech path that interests you. There are lot of tech paths like iOS, Android, Web, Game.


2) Find the right languages to learn for that path choosen
- iOS/Swift
- Android/Kotlin
- Web/HTML, CSS, JAVASCRIPT
- Game/ C++

3) Spend 2-3 hours a day learning to the language 1 at a time.

4)Find mentor-ship and guidance. Like Discord groups, Stackoverflow, Personal mentorship

5)Stay consistent and enjoy the process.



What would you do if you were starting back at zero? Comment and give a reaction.
npm ERR! ERESOLVE unable to resolve dependency tree
Published: 2021-05-10 00:01:48

When I am trying to create a new angular app and put "ng new myTest1" or any name, then this happened and an error shown on my screen every time. Here is the error code:

D:\angular>ng new myTest1
? Do you want to enforce stricter type checking and stricter bundle budgets in the workspace?
  This setting helps improve maintainability and catch bugs ahead of time.
  For more information, see https://angular.io/strict Yes
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS
CREATE myTest1/angular.json (3631 bytes)
CREATE myTest1/package.json (1198 bytes)
CREATE myTest1/README.md (1016 bytes)
CREATE myTest1/tsconfig.json (783 bytes)
CREATE myTest1/tslint.json (3185 bytes)
CREATE myTest1/.editorconfig (274 bytes)
CREATE myTest1/.gitignore (631 bytes)
CREATE myTest1/.browserslistrc (703 bytes)
CREATE myTest1/karma.conf.js (1424 bytes)
CREATE myTest1/tsconfig.app.json (287 bytes)
CREATE myTest1/tsconfig.spec.json (333 bytes)
CREATE myTest1/src/favicon.ico (948 bytes)
CREATE myTest1/src/index.html (293 bytes)
CREATE myTest1/src/main.ts (372 bytes)
CREATE myTest1/src/polyfills.ts (2830 bytes)
CREATE myTest1/src/styles.css (80 bytes)
CREATE myTest1/src/test.ts (753 bytes)
CREATE myTest1/src/assets/.gitkeep (0 bytes)
CREATE myTest1/src/environments/environment.prod.ts (51 bytes)
CREATE myTest1/src/environments/environment.ts (662 bytes)
CREATE myTest1/src/app/app-routing.module.ts (245 bytes)
CREATE myTest1/src/app/app.module.ts (393 bytes)
CREATE myTest1/src/app/app.component.html (24848 bytes)
CREATE myTest1/src/app/app.component.spec.ts (1060 bytes)
CREATE myTest1/src/app/app.component.ts (211 bytes)
CREATE myTest1/src/app/app.component.css (0 bytes)
CREATE myTest1/e2e/protractor.conf.js (904 bytes)
CREATE myTest1/e2e/tsconfig.json (274 bytes)
CREATE myTest1/e2e/src/app.e2e-spec.ts (658 bytes)
CREATE myTest1/e2e/src/app.po.ts (274 bytes)
\ Installing packages (npm)...npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: my-test1@0.0.0
npm ERR! Found: jasmine-core@3.6.0
npm ERR! node_modules/jasmine-core
npm ERR!   dev jasmine-core@"~3.6.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer jasmine-core@">=3.7.1" from karma-jasmine-html-reporter@1.6.0
npm ERR! node_modules/karma-jasmine-html-reporter
npm ERR!   dev karma-jasmine-html-reporter@"^1.5.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\ACER\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\ACER\AppData\Local\npm-cache\_logs\2021-05-09T23_58_39_293Z-debug.log
× Package install failed, see above.
The Schematic workflow failed. See above.

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

Please let me know how I can resolve this error.
Thank you
Anil
Landing a job is a numbers game, so don't take rejection personally
Tags: career, interview
Published: 2021-05-12 14:58:29

---
title: Landing a job is a numbers game, so don't take rejection personally
published: true
date: 2021-05-10 00:00:00 UTC
tags: career,interview
canonical_url: https://jhall.io/archive/2021/05/10/landing-a-job-is-a-numbers-game-so-dont-take-rejection-personally/
---

I see a lot of discussion about how to beat the game when it comes to finding the perfect tech job. And while there certainly are things you can do to increase your chances, even if you do _everything_ perfectly, you’re going to experience some rejections.

In 2019, Amazon reported receiving as many as [18 applications per minute](https://www.businessinsider.nl/amazon-hiring-thousands-received-applications-2019-9?international=true&r=US), for a total of 208,000 applications for 30,000 open positions. This implies at _least_ an 85% rejection rate, assuming every open position is filled from that candidate pool.

Further, there’s strong evidence that the traditional recruiting process is actually pretty bad at choosing good candidates. According to Geoff Smart, author of [_Who: The A Method for Hiring_](https://amzn.to/3bdYOV7), “the typical hiring success rate of managers is only 50 percent.” This means that half of the people hired should have been, and by extension, half of the people who _should_ have been hired, weren’t.

So take heart: Your rejection is _not_ personal. It’s a numbers game. Stick in there. You’ll eventually land a job.

* * *
_If you enjoyed this message, [subscribe](https://jhall.io/daily) to <u>The Daily Commit</u> to get future messages to your inbox._
Psychological Testing
Published: 2021-05-07 20:56:35

Psychometrics is a statistics section that deals with the measurement of human psychological variables, such as intellectual capacity, and personality traits and behaviors. Psychometricians carry out scientifically valid assessments of various behaviors. They use a specialized set of statistical tools and create the tests in order to understand better how the mind functions. Assessment of language development, early literacy and such disorders as aphasia, autism, etc., are of particular interest to speech-language pathologists.
A standardized test is also called a ''structured'' test due to its defined structure and rules. Every expert who administers the test has to follow the same structure. Standardized tests also have defined procedures for results evaluation, which are typically performed by matching the subject's score to the sample scores of people of similar age, sex, etc. This type of tests involves gathering data from a large amount of subjects via a set of defined rules for administration and scoring. Researchers determine the average score and the standard deviation based on the data.
Unlike the standardized tests, the non-standardized ones do not use data from a sample administered to a large amount of subjects with the help of the same techniques used by each researcher. Each clinician who wants to assess specific clients can create non-standardized tests individually or adapt them from existing tests. Non-standardized tests may create many problems if administration procedures and scoring rules are based on the clinician's own criteria rather than on scientifically supported basis. In some cases, there are no standardized assessments, so psychometricians must create non-standardized tests. This type of assessment is less valid than a standardized one but it possesses a high flexibility that allows a clinician to collect data, which would have been missed during the standardized test.
This material was prepared by Jaime Bradley, who is a [ concept map writing services](https://qualitycustomessays.com/nursing-concept-map-writing-services/) writer.
How to check if a string is a valid MD5 hash in JavaScript?
Tags: javascript
Published: 2021-05-10 00:00:00

---
  title: How to check if a string is a valid MD5 hash in JavaScript?
  published: true
  tags: JavaScript
  date: Mon May 10 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/check-if-string-is-valid-md5-hash-javascript
  cover_image: https://melvingeorge.me/_next/static/images/main-c3b621dda26a45a09db276a7f4bc50cc.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/check-if-string-is-valid-md5-hash-javascript)
  
To check if a string is a valid MD5 hash in JavaScript, we can use a regex expression to match for the 32 consecutive hexadecimal digits which are characters from `a-f` and numbers from `0-9`.

### TL;DR

```js
// Regular expression to check if string is a MD5 hash
const regexExp = /^[a-f0-9]{32}$/gi;

// String with MD5 hash
const str = "e10adc3949ba59abbe56e057f20f883e";

regexExp.test(str); // true
```

This is the regex expression for matching almost all the test cases for a valid MD5 hash in JavaScript.

```js
// Regular expression to check if string is a MD5 hash
const regexExp = /^[a-f0-9]{32}$/gi;
```

This will match all the 32 hexadecimal digits which have characters in the range from `a` till `f` and numbers from `0` till `9`.

Now let's write a string with MD5 hash like this,

```js
// Regular expression to check if string is a MD5 hash
const regexExp = /^[a-f0-9]{32}$/gi;

// String with MD5 hash
const str = "e10adc3949ba59abbe56e057f20f883e";
```

Now to test the string, we can use the `test()` method available in the regular expression we defined. It can be done like this,

```js
// Regular expression to check if string is an MD5 hash
const regexExp = /^[a-f0-9]{32}$/gi;

// String with MD5 hash
const str = "e10adc3949ba59abbe56e057f20f883e";

regexExp.test(str); // true
```

- The `test()` method will accept a `string` type as an argument to test for a match.
- The method will return boolean `true` if there is a match using the regular expression and `false` if not.

See the above example live in [JSBin](https://jsbin.com/batanisava/2/edit?js,console).

If you want this as a utility function which you can reuse, here it is,

```js
/* Check if string is a valid MD5 Hash */
function checkIfValidMD5Hash(str) {
  // Regular expression to check if string is a MD5 hash
  const regexExp = /^[a-f0-9]{32}$/gi;

  return regexExp.test(str);
}

// Use the function
checkIfValidMD5Hash("e10adc3949ba59abbe56e057f20f883e"); // true
checkIfValidMD5Hash("hello98123!"); // false
```

That's all! 😃

### Feel free to share if you found this useful 😃.

---
Angular Change Detection Infographic
Tags: angular, javascript, performance
Published: 2021-05-10 00:00:00

---
title: "Angular Change Detection Infographic"
author: Chris Kohler
date: "2021-05-10"
hero: "https://raw.githubusercontent.com/ChristianKohler/Homepage/master/content/posts/2021-05-10-infographic-angular-cd/images/hero.jpg"
cover_image: "https://raw.githubusercontent.com/ChristianKohler/Homepage/master/content/posts/2021-05-10-infographic-angular-cd/images/hero.jpg"
published: true
secret: false
canonical_url: "https://christiankohler.net/angular-change-detection-infographic"
masterid: 20210510
excerpt:  A graphical overview over Angular Change Detection
description:  A graphical overview over Angular Change Detection
tags: angular, javascript, performance
---

# Angular Change Detection Infographic

The Angular way of change detection is very powerful and makes it easy to start building Angular apps. It is basically magic since it doesn't require the developer to do trigger it manually, it just works. Unless it doesn't where it can be a daunting task to debug the change detection process.

This cheatsheet is for everyone who wants to know more about how change detection in Angular works.

👩‍🚀 Protip: 🖨 Print this cheatsheet as a poster and hang it in the toilet. Within a few weeks your work colleagues are Angular experts 😀

✅ Also feel free to use the cheatsheet for education purposes like workshops or in classes.

👆 It took me hours to complete this cheatsheet. If you like it follow me on [twitter](https://twitter.com/kohlerchristian) and spread the word 🙌

🤓 Did you find a mistake? Please help improve the infographic and open an issue [here](https://github.com/ChristianKohler/homepage) or give your feedback [here](https://github.com/ChristianKohler/Homepage/discussions/16)

[Download Angular DI Infographic as PDF](https://raw.githubusercontent.com/ChristianKohler/Homepage/master/content/posts/2021-05-10-infographic-angular-cd/angular-cd-cheatsheet-v1-0.pdf)

![](https://raw.githubusercontent.com/ChristianKohler/Homepage/master/content/posts/2021-05-10-infographic-angular-cd/images/angular-cd-cheatsheet-v1-0.png)
My go-to React Libraries in 2021
Tags: react, node
Published: 2021-05-21 08:41:42

---
title: My go-to React Libraries in 2021
published: true
date: 2021-05-10 00:00:00 UTC
tags: ReactJS, node
canonical_url: https://vivekpandey.live/blog/My-fav-React-Libraries/
---

I’ve been working on React for months now, since the I’ve used tons of react libraries. To my belief, I’ve seen quite new tools slowly replacing old libraires.

![React Libraries](https://vivekpandey.live/blog/images/react-libraries.png)

# For Components

Component libraries help us develop better when we don’t have strong styling directives. Most of the time, they provide us with additional features and remove a lot of biolerplate code.

## 1. Ant Design

This react component provides some enterprise-level products. You don’t need to worry about “not being able to do the component” You’ll be able to get it done.

Another thing to note is that Ant Design is a design system. It is meant to be opinionated. Overall, it is a fun to use compared to Material UI. There’s still some things I don’t like about Ant Design. If you want to customize Ant Design theme you need to change variables during your build. To me it feels like a lot of work for little things like changing colors.

## 2. Material UI

If I were not to use Ant Design, Material-UI would be the second choice. It’s components are for faster and easier web development. You can even build your own design system, or start with Material Design.

# For Icons

## 1. React Feather

React-feather is a collection of simply beautiful open source icons for React.js. Each icon is designed on a 24x24 grid with an emphasis on simplicity, consistency, and readability.

React-feather is also a collection of SVG files so you can use them in any way (image, background image, object, inline, etc.) depending upon the need. Overall, I prefer it over others.

## 2. Material UI Icons

It is a complete React UI framework and it provides one of the best icons support in three following ways:

- Standardized Material Design Icons exported as React Components (SVG).
- With the SVG Icon component, a React wrapper for custom SVG icons.
- With the Icon components, a React wrapper for custom font icons.

# For state management

## 1. Redux

You already knew this was coming, right? So, yes - Redux is de-facto “the default” of its kind. But it starts to “show its age” and if not that, then to irritate some devs. Don’t get me wrong - it’s a great library, but its size, steep learning curve, and verbose action-reducer approach to state management can make some people want to switch.

## 2. Hookstate

It’s the underdog of the state-management libraries. It’s small, minimal, clean, extendable, and it has a lovely hook-based API. Not only can it be used for global state, but can also enhance local `useState()` with additional features, handle nested state without performance loss, and deal with async data with ease!

## Conclusion

Those were all my favourites, what’s your? Let me know on Twitter. Thank you for taking the time to read my blog.

Originally posted on: [Vivek's Blog](vivekpandey.live/blog)