teleren/devto huggingface dataset:
map, filter and reduce in javascript - the easy way
Tags: javascript, webdev, beginners, programming
Published: 2022-08-19 18:41:00

There are three array methods in JavaScript: map, reduce, and filter. All these functions will iterate over the array and perform the function. Each will create a new array in response to the function's output. You will discover the rationale for each one's use in this article.

**map()**
The map method creates a new array with the results of calling a function for every array element.

> const output = arr.map(function) 
this function tells about the transformation I want on each element of the array.

Let's take an example:

```
const arr = [6, 3, 5, 9, 2];
//if we want to double each element in the arr, we can use map
const doubleArr = arr.map(double);
//creating the function double
function double(x){
  return 2 * x;
}

//the map will run double function for each element in the arr, and create a new array and returns it.
console.log(doubleArr); //[12, 6, 10, 18, 4];
```
So, basically map function is mapping each and every value and transforming based on the given condition.

**filter()**
Filter function is used to filter the value inside the array. This method also creates a new array from the given array consisting of only those elements from the given array which satisfy a condition set by the argument method.

Let's take an example:
Suppose we have given an array and we want a new array with all the elements greater than 4 for the values present in arr.
So, the ans will look like [5, 6, 9, 8]
```
const arr = [5, 6, 1, 4, 9, 8];
//filter values > 4
function isGreaterThan4(x){
  return x > 4;
}
const arr2 = arr.filter(isGreaterThan4);

//we can also use arrow function to rewrite the same code as :
const arr2 = arr.filter((x) => x > 4);

console.log(arr2); //[5, 6, 9, 8]

```

**reduce()**
It is function which take all the values of array and gives a single output of it. It reduces the array to give a single output.
Let's take an example:

First we will find the sum of a given array using loops and then will move on to use reduce to better understand it.

```
const array = [5, 1, 3, 2, 6];
// Let's calculate sum of elements of array - Non functional programming way
function findSum(arr) {
    let sum = 0;
    for (let i = 0; i < arr.length; i++) {
        sum = sum + arr[i];
    }
return sum; }
console.log(findSum(array)); // 17

// reduce function way
const sumOfElem = arr.reduce(function (accumulator, current) {
    // current represent the value of array
    // accumulator is used the result from element of array.
    // In comparison to previous code snippet, *sum* variable is
*accumulator* and *arr[i]* is *current*
    accumulator = accumulator + current;
    return accumulator;
}, 0); //In above example sum was initialized with 0, so over here
accumulator also needs to be initialized, so the second argument to reduce
function represent the initialization value.
console.log(sumOfElem); // 17
```
This tweets sums the entire article:
{% twitter 741089564329054208 %} 



Also, if you want a detailed explanation, do check out [Namaste Javascript](https://www.youtube.com/watch?v=zdp0zrpKzIE)
Typescript Greater Equal Or Lesser
Tags: webdev, typescript, programming, tutorial
Published: 2022-08-19 18:39:00

type level numeric comparator
```ts
export type CreateArrayWithLengthX<
	LENGTH extends number,
	ACC extends unknown[] = []
> = ACC['length'] extends LENGTH
	? ACC
	: CreateArrayWithLengthX<LENGTH, [...ACC, 1]>

export type CompareAToB<
	A extends number[],
	B extends number[]
> = A['length'] extends B['length']
	? 'equal'
	: A extends [infer C, ...infer D extends number[]]
	? B extends [infer M, ...infer N extends number[]]
		? CompareAToB<D, N>
		: 'greater'
	: B['length'] extends 0
	? 'equal'
	: 'lesser'

type E = CompareAToB<CreateArrayWithLengthX<99>,CreateArrayWithLengthX<100>> // lesser
//   ^?
type F = CompareAToB<CreateArrayWithLengthX<100>,CreateArrayWithLengthX<100>> // equal 
//   ^?
type G = CompareAToB<CreateArrayWithLengthX<101>,CreateArrayWithLengthX<100>> // greater
//   ^?
```

[playground](https://www.typescriptlang.org/play?#code/KYDwDg9gTgLgBDAnmYcDCVgEMbAIJRRaIDqAljABYAywAdgOZUAaAPALABQAkNQKIA5AOIAVABJxQuOgBMAznDoBXALYAjYFAA0XbnjRpJIafLhK6AazoQA7nQDaAXTgBeOE64A+V3H1p7AOQANvRMlAHOUvSm-MLiugD8vga6AFzomDj4hMTkVLSMLKyxomJa7gB0VX7lAIyOnlxcoJCwCMioaBAqYFiYeCIQAEIcPHhGJgrK6ppOOjxDE9FTqhpQHpzebniBIYXhkcbLcEO7oVQRiXABwACOSlhBAWm+S7IK9mR0AGaa6OVVCpfX5QOAAETepmmaycjiuiyi73cwL+AFkAVUUaCBJCVjN1o44TxuEkuj0+vhBiMweUBI1iekAgxMrgoM8eOlTsFzgdcXAAAxXG73R7s7iMkJyOSadlcJAoOB8Hxk3r9KmsDDYXAEIikCg0HlsACcRs8Wk1WR1uX1BTCbFq-P5nm8AHoXXBJdKoFw3XA-QA9BJyjpwABiyu6qspww1LOyuryBv29sdZot2pyevyhtYDqdrvddweQTgPvdAaDnHlqCEEfJapj6fj1uzydz-NqabjVqzSbt7fzcF9zK1mjLfrggaAA)

max valid number is 1000
RedisError: Redis connection needs to be open.
Published: 2022-08-19 18:05:00

Hey ! developers I'm trying to use redis-om for the redis x dev hakathon but I'm getting error !!
`RedisError: Redis connection needs to be open`

![This is the error](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kxy63bjp7bnspyjys89u.png)

For more details  : https://stackoverflow.com/questions/73417744/rediserror-redis-connection-needs-to-be-open?fbclid=IwAR1GamGnmy7ysgYXbKF7WzLWoHWkBXqubYPuZ_aGVYu2ZRZgNLrYloVHS

{% embed https://www.youtube.com/watch?v=KlFQWcBmkCQ %}
Kindly answer the question !! 🙏
Slonik v30 added sql.type, sql.date, sql.timestamp and sql.interval
Tags: postgres, node
Published: 2022-08-19 17:42:25

* [sql.type](https://github.com/gajus/slonik#user-content-runtime-validation) – runtime validation
* [sql.timestamp](https://github.com/gajus/slonik#sqltimestamp) – create PostgreSQL timestamp from Date
* [sql.date](https://github.com/gajus/slonik#user-content-slonik-query-building-sql-date) – create PostgreSQL date from Date
* [sql.interval](https://github.com/gajus/slonik#sqlinterval) – create PostgreSQL interval
New Insight on Programming Languages
Tags: personalgrowth
Published: 2022-08-19 17:41:05

Feel like Julia is a bit of a hype.

Feel like Perl and PDL (Perl Data Language) can complete machine learning tasks well. Gonna try it.

Focus my energy.

On work, data science;
after work, ... tons of things wanna learn but my energy is so limited.

Commitment is a precedent of success. Besides work, my first goal is that CPAN Weekly will be okay, and the second goal is achieving good academic result this semester.
5 Job Interview Mistakes That Could Cost You The Job.
Tags: career, beginners, productivity, computerscience
Published: 2022-08-19 17:28:30

## Dear Candidates,

There are many aspects of the job interview process you can't control… So control only the controllable.


Like preparing for the interview.
✏️Research the company.
✏️Think through questions they may ask.
✏️Practice your answers.
✏️Research the interviewers and find some common ground.
✏️ Learn to connect with them.
✏️ Exude confidence.
✏️ Demonstrate your personality.
✏️ Be your best self.


**[The Unicorn Recruiter](https://www.linkedin.com/company/theunicornrecruiter/)** 🦄


5 Job Interview Mistakes That Could Cost You The Job.
**[Youtube](https://lnkd.in/gdy5rRqc)**
Getting started with Nodejs/Express
Tags: beginners, node
Published: 2022-08-19 17:25:00

NodeJS is an open-source tools that runs on a JavaScript Engine and can be used to executes Javascript code outside a web browser.

Having worked with Nodejs, I can undoubtedly say that Nodejs is really an impressive tool and the community behind it is a massive one. Another interesting thing about NodeJS is that it is a backend cross platform Javascript runtime environment.

To get started with Nodejs we will cover the following:

1. **Introduction**
2. **Setting up Node.js and NPM**
3. **Example Project (writing hello world program)**
4. **Installing a package**

**1. Introduction:**
_To get started, this is what you need to know._

[_Nodejs](https://nodejs.org/en/) is a JavaScript runtime built on Chrome’s V8 JavaScript engine._

_[NPM](https://www.npmjs.com/) is the package manager for JavaScript and the world’s largest software registry which has over 350,000 packages._

_Express.js is a Node.js web application server framework designed for building single-page, multi-page, and hybrid web applications._

**2. Setting Up NodeJs:**
NodeJS and NPM are two important tools you need to get started and luckily, you can get all in one box by downloading NodeJS. After downloading and installing it, run to code below to be sure that everything is properly installed

`npm -v` to know the version of npm you are running currently.

`node -v` to know the version of node you are running currently.

**3. Example Project (writing hello world program)**
Create a folder name node-hello-program on your desktop then open your terminal and run the code below and follow the prompt to generate the package.json file

`npm init`

run `npm install express` to install express
 
create a file called server.js and add the code below


```
const express = require ('express');

const app = express();

app.get('/', (req, res) => {
    return res.send('hello world');
});

app.listen(4000, () => {
    console.log('app listening on port 4000');
});
``` 

run `node server.js` on your terminal to start the node server.

open your browser to see the changes on `localhost:4000`

Yay!

We are done, kindly drop your feedbacks and also share with your friends.

Thank you.
What are the golden rules of programming?
Tags: discuss, webdev, programming, beginners
Published: 2022-08-19 17:13:23

1. Make sure you understand the problem you’re trying to solve.
2. Prioritize clarity and correctness. Performance is less important, and cleverness is to be avoided.
3. If your code needs comments to be understood, it’s over-complicated.
4. Always comment your code, or at least your modules.
5. Extensibility and reusability are over-rated.
6. Don’t innovate security. Use well-established security libraries.
7. If you haven’t tested it, it probably doesn’t work.
8. If you have time to ‘go back and fix it later’ you’ve got bigger problems in your job.
9. Integrated Development Environments (like VisualStudio) and the internet (e.g. StackOverflow) are the best friends a coder could ever have.
10. printf is the world’s simplest debugger.


If you want to learn more about Web Development, feel free to [follow me on Youtube!](https://www.youtube.com/channel/UCze04H5oeudQ01G9DDj-frA)
Want to learn frontend development? Read this!
Tags: javascript, webdev, react, nextjs
Published: 2022-08-19 17:12:00

In the past, many people have asked me about a course or tutorial I recommend or know of to learn something (mostly related to frontend). So when I taught frontend development from beginner to advance level, I collected some resources. They had been in my Google Docs for more than a year. 

Finally, I decided to curate a list of these resources and put them on GitHub. I compiled resources related to learning Git, HTML, CSS, JavaScript, Asynchronous JavaScript, React, Next.js, and more. I also listed some job boards where you can find jobs related to front-end development.

{% embed https://github.com/msaaddev/frontend-resources %}

The following are some JavaScript resources:

## JavaScript

| Name | Description | Status |
|------|-------------|--------|
| [Node.js](https://nodejs.org/en/download/) | Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. | `free` |

### Resources

| Name | Description | Status |
|------|-------------|--------|
| [Learn JavaScript - Full Course for Beginners](https://www.youtube.com/watch?v=PkZNo7MFNFg) | This complete 134-part JavaScript tutorial for beginners will teach you everything you need to know to get started with the JavaScript programming language.| `free` |
| [JavaScript DOM Crash Course - Part 1](https://www.youtube.com/watch?v=0ik6X4DJKCc) | This crash course focuses on the DOM WITHOUT JQUERY. In this part we will talk about what the JavaScript DOM (Document Object Model). We will also look at how to change content and styles via these selectors | `free` |
| [JavaScript DOM Crash Course - Part 2](https://www.youtube.com/watch?v=mPd2aJXCZ2g) | In this video we will learn how to traverse and move around the DOM with properties like parentNode, parentElement, nextElementSibling and so on. We will also learn how to insert elements with createElement() and createTextNode(). | `free` |
| [JavaScript DOM Crash Course - Part 3](https://www.youtube.com/watch?v=wK2cBMcDTss) | In this lesson in the JavaScript DOM, we will be looking at different events and how to attach them to DOM elements with addEventListener(). | `free` |
| [JavaScript DOM Crash Course - Part 4](https://www.youtube.com/watch?v=i37KVt_IcXw) | In this video we will take what we learned in the last 3 videos and create a simple Item lister project where we can add list items with a form, delete them and filter through them all with vanilla JavaScript and DOM properties and methods. | `free` |
| [Async Javascript Tutorial For Beginners (Callbacks, Promises, Async Await)](https://www.youtube.com/watch?v=_8gHHBlbziw) | Asynchronous JavaScript crash course | `free` |

## Want more resources?

You can find more of these resources on the GitHub [repository](https://github.com/msaaddev/frontend-resources) I have placed above. Don’t forget to star the repo if you found the resources I have collected useful.
Best User Management Plugin
Tags: wordpress, webdev, programming, management
Published: 2022-08-19 17:08:00

If you are looking for user management plugin then [User Meta Pro](https://user-meta.com/) is the best plugin for you to go for. It is a well-designed, feature-rich, and easy-to-use user management plugin that allows front-end profile update, user registration with extra fields, email notifications and many more. Followings are some key points why you should go for this solution.

1. Work with Any Theme 
2. Quick Setup
3. Fast & Simple Customization Tools
4. Powerful Access Rules
5. Regular Updates and Bug Fixes
6. Ready to Translate
7. Email Notification
8. Google Security Captcha
9. Export/Import User
10. Website Security
11. Professional Support Team 
12. Developer Friendly
Alphabet Rangoli
Tags: alphabetrangoli, rangoli, hackerrank, solution
Published: 2022-08-19 17:05:46

We came across a coding problem today on Hackerrank called Alphabet Rangoli. We need to solve this in Python.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1gl3burerk7xyln14ffv.png)
To get the Solution visit : 
https://hecodesit.com/alphabet-rangoli/
What was your win this week?
Tags: discuss, weeklyretro
Published: 2022-08-19 16:40:12

---
title: What was your win this week?
published: true
description: Got to all your meetings on time? Started a new project? Fixed a tricky bug?
tags: discuss, weeklyretro
cover_image: https://cl.ly/188e843c2985/download/Image%202019-02-15%20at%202.36.37%20PM.png
---

Hey there! 


Looking back on this past week, what was something you were proud of accomplishing?

All wins count — big or small 🎉

Examples of 'wins' include:

- Starting a new project
- Fixing a tricky bug
- Spending time with your pets

---

Have a wonderful weekend!


![Dorky 80s guy dancing](https://media.giphy.com/media/gjgWQA5QBuBmUZahOP/giphy.gif)
Liskov Substitution Principle in TypeScript
Tags: javascript, typescript, cleancode, webdev
Published: 2022-08-19 16:35:00

> When extending a class, remember that you should be able to pass objects of the subclass in place of objects of the parent class without breaking the client code.

The goal of this principle is that subclasses remain compatible with the behavior of the parent class. Subclasses should extend the behavior of the parent class and not replace it by something different.

If you follow this principle you will be able to **replace a parent class by any of its subclasses without breaking the client code**.

---

Imagine that we have an application that accepts orders. There are two possible states for an order: draft or confirmed. If an order was not confirmed, it cannot be payed.

In the following example we are breaking the substitution principle because the parent class has the method `markAsPaid` which does not throw any errors. On the contrary, the subclass `DraftOrder` throws an error in that method because draft orders cannot be payed. Replacing the parent class `Order` by its subclass `DraftOrder` may break the code if we were calling `markAsPaid`.

```ts
class Order {
  id: number;
  items: string[];
  payed: boolean;

  // constructor

  markAsPaid(): void {
    this.payed = true;
  }
}

class DraftOrder extends Order {
  markAsPaid(): void {
    throw new Error("Draft orders can't be payed");
  }
}
```

We can improve this by making draft orders the parent class and confirmed orders the subclass. This way it is possible to replace the parent class by the subclass without breaking the code.

```ts
class Order {
  id: number;
  items: string[];

  // constructor
}

class ConfirmedOrder extends Order {
  payed: boolean;

  // constructor

  markAsPaid(): void {
    this.payed = true;
  }
}
```
Pycraft's Settings Redesign
Tags: programming, python, gamedev, opensource
Published: 2022-08-19 16:34:17

Introducing the redesigned settings menu for Pycraft (with sound), now including better joystick control too! We hope you enjoy the settings menu refresh, there are a few rough edges still though, more content coming soon!

You can also check it out here: https://youtu.be/aBpcFXGS75E
Website Designing Technologies That Will Help Your Business Grow
Tags: html, css, javascript, webdev
Published: 2022-08-19 16:21:29

[Website design](https://aristasystems.in/website-design-services.php) technology includes software that helps web designers create websites. It also includes hardware devices that allow web designers to view and edit images on computers.

**HTML 5**

HTML5 is an open standard developed by W3C (World Wide Web Consortium). It is a set of rules that define how documents should be structured and displayed on the World Wide Web. HTML5 is supported by all modern browsers.

CSS3 is a style sheet language designed to make web pages more flexible and easier to maintain. CSS3 is not yet fully implemented across all browsers. However, as browser support improves, so will the use of CSS3.

**CSS 3**

HTML5 is the latest version of Hypertext Markup Language (HTML) and is the fifth revision of the standard. HTML5 includes new features such as offline storage, geolocation, media capture, and video playback.

The first two versions of HTML were released in 1990 and 1991 respectively. HTML4 was introduced in 1999 and included some changes to HTML3. HTML5 is based on HTML 4.01 and adds several new elements and attributes.

**JavaScript**
In addition to HTML, CSS is another essential part of website design. It allows developers to style the appearance of a website. Developers use CSS to add colors, fonts, borders, backgrounds, and other visual effects to a website.
CSS is an extension of Cascading Style Sheets. CSS is a language that describes how to format text and images on a webpage. CSS is also known as cascading style sheets because it uses stylesheets to apply formatting to different parts of a document.

**PHP**

Website development languages such as PHP and ASP.NET are two popular programming languages used to build dynamic websites. Both languages allow programmers to write code that generates output based on input received from users. However, there are some differences between these two languages.

PHP is a server-side scripting language. This means that when a user visits a website, the code written in PHP runs on the server before the browser sends the request to the server. As a result, PHP is often used to generate dynamic pages.

**ASP.NET**

ASP.NET is a client-side scripting language. This type of language is used to develop applications that run on the client computer instead of the server. Because of its client-side nature, ASP.NET is used to develop interactive websites.

**MySQL**
In order to design a database, one must choose between using a relational database management system (RDBMS) or an object-oriented database management system (OODBMS). An RDBMS stores data in tables with rows and columns. It uses a query language to retrieve data from the table. An OODBMS stores data in objects. Each object has properties and methods.

MySQL is a popular open-source RDBMS. It was developed by Monty Widenius in 1991. Microsoft released a commercial version of MySQL called MS SQL Server in 1993. SQL Server supports more features than MySQL.
GLITCH TEXT EFFECT
Tags: html, css, javascript, codenewbie
Published: 2022-08-19 16:20:00



**#GLITCH TEXT EFFECT IN HTML**
**#GLITCH TEXT EFFECT IN CSS**
**#GLITCH TEXT EFFECT IN JAVA**

> STEP1 - USE THIS IN INDEX.HTML

```
 <span>
 <p style="color:rgb(253, 253, 253);">@CODE WITH ZASTIXX</p>
 </span>

```

> STEP2- USE THIS IN CSS 

```


SPAN {
    
    font-size: 4rem;
    transition: .3 all ease;
    cursor: pointer;
    letter-spacing: 8px;
    text-shadow: #ff0000 0 0,
        #00ffff 0 0;

}

span:hover {
    
 text-shadow:
           #ff0000 -5px 0,
           #00ffff 5px 0;

}

```
OUR SOCIAL LINK 
[INSTAGRAM](https://www.instagram.com/zastixx/)
[YOUTUBE](https://www.youtube.com/channel/UCy76xl8yz6scodsMRugJGsg?sub_confirmation=1)
57 CSS Shapes examples, click to copy ✨
Tags: webdev, css, beginners
Published: 2022-08-19 16:12:44

---
title: 57 CSS Shapes examples, click to copy ✨
published: true
description: 🔺 Triangles, arrows, diamonds, tooltips, bubbles, etc. 57 free CSS shapes, ready to use, click to copy.
tags: #webdev #css #beginners
cover_image: https://getcssscan.com/css-shapes/og-image.jpg
---

👋 Hi Dev.to!

I've searched for shapes like triangles, arrows, diamonds, bubbles, tooltips, etc. made with pure CSS, then used CSS Scan to grab their CSS code, made an easy click-to-copy collection with 57 CSS shapes, and now I'm sharing it with you, for free. 

Click to copy, and you'll get the CSS code.

There are even shapes like **Pac-Man**, **Yin Yang**, and **Space Invader**.

🔺 A curated collection of **57 free shapes examples made with pure CSS**:
👉 **[https://getcssscan.com/css-shapes](https://getcssscan.com/css-shapes?ref=devto-shapes)**

💖 Bookmark it (keep it on your favorites) and use it whenever you need it for your projects!
All you have to do is click on a shape you like, and it'll copy its CSS code.

And if you have any ideas or suggestions, I'm all ears.

Thanks all! 🙌
Finding new ways to stay on task
Tags: angular, codenewbie
Published: 2022-08-19 16:05:23

## The Issue

Here is a deal I get distracted when starting a project of my own, mostly due to wanted to test or use different frameworks from the start, so I started to work on small commits, first to keep develop the routine, and also to keep focused on the same things and tooling.

## The work

Now that the basics have being stablished, pages, components, UI elements, basic setup of jest, cypress, storybook and so on, I will start with the home page.

## First part

Working on the home page will be simple, I already have an idea of how I wanted the page to feel and thus I will start with simple setup of the components, the header, footer and the elements inside, then after that I will do some simple unit testing and e2e, and then create the jenkins pipeline to create the container with buildpacks and setting on cloud run as a container.

So come with me on this odyssey of learning and many rage inducing moments. It will be fun

[portfolio repo](https://github.com/meisterveda/portfolio)