teleren/devto huggingface dataset:
JavaScript -Array.prototype.filter()
Tags: javascript, beginners, tutorial, programming
Published: 2021-10-11 01:40:03

> Array.filter()

JavaScript is one of the most important parts of web development. Today we are taking a look at the `filter()` method in JavaScript.

So how do we use the `filter()` method?
###Here is a simply example:

```javascript
const fruits = ["fig", "pear", "apple", "banana", "blueberry", "watermelon"];

const fruit = fruits.filter((name) => name.length >= 6);

console.log(fruit);

// find out fruit name that has six or more letters
//expected output: [ 'banana', 'blueberry', 'watermelon' ]
```
Simply add `.filter()` after the array wants to be filtered.

### Syntax

**array.filter(functionName(currentValue, index, arr), thisValue)**

* *function*
 `function` is used to test each element in the array by pass or not.
If it is `true`, it will keep the element and build a new array. If it is `false` which did not pass the test, it won't add the element to the new array.

#### The `function` has 3 arguments:

| Arguments   | Description |
| ----------- | ----------- |
|Value/element| <**required**>  The __element(s)__ now processed in the array.     |
| Index   | <**optional**>  The __index of element(s)__ now processed in the array. |
| Array |  <**optional**>  The __array__ filter now processed.|

 *thisValue* <**optional**>
  * The __value__ `this` when executing `callback`.

#### Notice:
* The `filter()` will return a __new__ array, only elements that pass the test will add to the new array. If __no__ elements pass the test, it still will return an __empty__ array.
* The `filter()` __doesn't change__ the original array. 
* The `filter()` doesn't work with the function for the __empty array__.

#### More examples
```javascript 
const age = [1, 6, 7, 13, 24, 36, 57, 61, 68, 79, 93];

const checkAge = age.filter((check) => check >= 50);

console.log(checkAge);

//find age in the array that 50 years and older
//expected output: [ 57, 61, 68, 79, 93 ]
```

```javascript
const number = [-9, -2, -1, 0, undefined, 3, 9, 12, 15];

const overZero = number.filter((num) => num > 0);

console.log(overZero);
// find the number in an array that is over 0.
//expected output: [ 3, 9, 12, 15 ]

const un = number.filter((num) => num);

console.log(un);

// find all numbers that is a number.
//expected output: [ -9, -2, -1, 3, 9, 12, 15 ]
```
####Notice:
 0 and undefined are equal to false. Therefore, it won't be printed out.

>If you want to learn more about the filter method or even more about JavaScript.
Here is a very helpful youtube channel created by Steve.

{% youtube WrB_--bVbbs %}
Card Web Component
Tags: webdev, javascript
Published: 2021-10-11 01:33:24

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m16z78rh2o52s2512vhv.png)
 
# Development
My team and I are currently developing a card for websites like the one above. There are many elements that are a part of this card, but for this project we are focusing on four of them. They include icon, banner, scaffold, and the card itself.

## Roadblocks
Some potential roadblocks we could face when developing the card with the provided elements is properly designing the styling of the elements to work together. We want the card to be very changeable with the elements working together. We also need to take into account the size of the webpage to be able to have the card properly display the data in a way that makes sense for all web page sizes.

## Managing development
When considering working on a team with developers of all skill sets, documentation and communication of coding is key to project success. We will need to learn new skills in css and html to provide something that is workable and looks good.

repo: https://github.com/runtimeErrorsMadeEasy/project2
Get rid of certificate errors with Avi (NSX-ALB) and Hashicorp Vault!
Published: 2023-03-04 16:15:54

---
title: Get rid of certificate errors with Avi (NSX-ALB) and Hashicorp Vault!
published: true
date: 2021-10-11 01:22:00 UTC
tags: 
canonical_url: https://blog.engyak.co/2021/10/get-rid-of-certificate-errors-with-avi.html
---

Have you ever seen this error before? This is a really important issue in enterprise infrastructure because unauthenticated TLS connections teach our end users to be complacent and ignore this error. TLS Authentication SSL/TLS for internal enterprise administration typically only addresses the confidentiality aspects of an organizational need - yet the integrity aspects are not well realized: This is an important aspect of our sense of enterprise security, but the level of effort to authenticating information endpoints is high for TLS, so we make do with what we have.
Building a Web Component.. things to think about
Tags: webcomponents, cards, coding
Published: 2021-10-11 01:05:55

## Example of a Card
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b2t5hwpgy24gm6bp19f2.png)

Over the next few weeks, my group and I will be creating a card for our web components course. When starting the development of a card the starting point was to brainstorm the different elements within it. The following is what my groups and I came up with:

* Icon
* Header
* Frame
* Card

## What are the Obstacles
Since the creation of web components is still a new concept for me, an obstacle my team and I will face will be the separation and completion of work. Since another team member and I are not very confident in our ability to create a card, we will have to get help from outside sources or other team members. 

## For the Future
Over the following weeks, I will gain a better understanding of web components and the creations of cards. Learning how to design using CSS will be difficult but I am excited to see the progress my team and I will make over the next few weeks.

## Check out the progress!!
_GitHub_ : https://github.com/PenStat/penstat-project2
First time my Hacktoberfest
Tags: hacktoberfest, opensource, github, javascript
Published: 2021-10-11 01:03:28

#Overview
Since I started to do my Release 2.0 the first action I did is try to clicking some projects which seem interesting and I could find one that is called [Todo-app](https://github.com/nirajacharyaa/todo-app).

#Before Starting
There are 2 issues [at that time](https://github.com/nirajacharyaa/todo-app/issues?q=is%3Aissue+is%3Aclosed) and I applied to him both issues and start to work on them. However, sadly(?) other people also wanted to do about [CSS issue](https://github.com/nirajacharyaa/todo-app/issues/3) and the project owner [nirajacharyaa](https://github.com/nirajacharyaa) told me do 
only the [localStorage](https://github.com/nirajacharyaa/todo-app/issues/4). It was a bit sad that I couldn't take it all, but still, the part that deployed to me was enough to make my interest.

#Working
Actually, the task was simple I just [added](https://github.com/nirajacharyaa/todo-app/pull/7/commits/d1d5380a2d19a1ada100f417fb0e1a7459f32f4d)
```
//added localStorage func
    localStorage.setItem(task.innerText, task);
```
and
```
//delete selected todo-list item from localStorage
      localStorage.removeItem(item.parentElement.querySelector(".tasklist").innerText);
```
[pull-request](https://github.com/nirajacharyaa/todo-app/pull/7) them. Fortunately without any problem my pull-request was accepted.

#To finish
It was really interesting experience for me and not only limited the assignment that I can working for the project what I like is really attractiveness. Hope I can enjoy this after the OSD600
（〜^∇^)〜
Three Protocols you should know as a web developer
Tags: programming, webdev, beginners, tutorial
Published: 2021-10-11 01:02:01

###What Does Protocol Mean?

A protocol is a set of rules and guidelines for communicating data.

Rules are defined for each step and process during communication between two or more computers.

Networks have to follow these rules to successfully transmit data.


1- HTTP:

The Hypertext Transfer Protocol(HTTP) is used by the browser to tell the host computer what file it wants to retrieve.


2- IP:

The Internet Protocol (IP) is used for routing IP packets between logan's computer and the server based on IP addresses. 

3- TCP:

The Transmission Control Protocol(TCP) is used for making sure the IP packets all arrive correctly and in order.


Read More:

[The World Wide Web](https://www.khanacademy.org/computing/computers-and-internet/xcae6f4a7ff015e7d:the-internet/xcae6f4a7ff015e7d:web-protocols/a/the-world-wide-web)

[Domain Name System (DNS)](https://www.khanacademy.org/computing/computers-and-internet/xcae6f4a7ff015e7d:the-internet/xcae6f4a7ff015e7d:web-protocols/a/domain-name-system-dns)

[Hypertext Transfer Protocol (HTTP)](https://www.khanacademy.org/computing/computers-and-internet/xcae6f4a7ff015e7d:the-internet/xcae6f4a7ff015e7d:web-protocols/a/hypertext-transfer-protocol-http)
Docker-based GitHub Actions in orphan branches
Tags: github, githubactions
Published: 2021-10-11 00:51:19

GitHub Actions are great for sharing & reusing logic across your CI/CD pipelines. However, sometimes sharing is not the highest priority. Sometimes you only want to hide the complexity by exctacting & encapsulating multiple build steps and replacing them with a single action.

Anyway, you have to create a GitHub action.

You could use actions [stored in the same repository as the workflow](https://docs.github.com/en/actions/learn-github-actions/workflow-syntax-for-github-actions#example-using-an-action-in-the-same-repository-as-the-workflow). Such actions must be either written in JavaScript or be Docker actions, i.e. have a `Dockerfile`.

With JavaScript, at the time of the writing, actions must be written literally in JavaScript, no processing like compilation or transpilation allowed. In other words, it cannot be TypeScript: although you could use TypeScript to write an action, you’ll have to commit the `dist` then.

Docker actions are slow because the caching doesn’t work well at the time of the writing. Images are built from scratch every time you run a pipeline.

Finally, you may be against of polluting the main codebase with action’s code, and this is a valid argument too!

![alt text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d90666e189gi3x2nh3zs.png) 

Because of this issues — polluting main codebase, forcing you to use vanilla JavaScript or being slow with other languages and runtimes — in-repository actions might not look appealing to you.

So you might want to take the hard way: to extract your action into a separate repository. But even then caching won’t work well with Docker actions and you’ll have to commit `dist` with JavaScript actions. However, in a separate repository you could at least have action’s own lifecycle and mitigate that with automation.

😔 That’s some extra work…

Try [orphan branches](https://git-scm.com/docs/git-checkout#Documentation/git-checkout.txt---orphanltnewbranchgt) instead!

The idea is to create an orphan branch in your repository. Orphan means it wont have any intersections or common commits with the main branch, a completely separate one. GitHub won’t even allow you to make a PR to the main branch from the orphan one.

Thinking about Git as a tree was a mistake, it’s actually a forest!

Now you could store your whole action, written in any language, in this branch. It would have a completely different lifecycle by having completely different workflows in this branch’s `.github/workflows` directory. If it’s a Docker action, you could built and publish it to the GitHub packages of the same repository and use it the main branch’s workflows without rebuilding every time.

![alt text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zyx145bhufc10gvk6h3h.png)

All the issues are solved!

✅ The codebase wouldn’t have any traces of the auxiliary actions code.  
✅ Actions would have a completely independent lifecycle.  
✅ Docker actions would be prebuilt.
Web Component Considerations
Published: 2021-10-11 00:49:07

Overview - 

The main considerations for building a web component is 
1. Security 
2. Accessibility 
3. Design
4. States

The project will be creating cards similar to the ones linked in the post.

We may run into some difficulties since a card is more complex than the button we did previous. The main difficulty will be how the user interacts with the card (state change, clickable parts within the card).

I am sure that we will be able to complete the project since we have 4 group members working on the same project now. We will all put our heads together and figure out the best way to tackle the project.
Thoughts on 10x Developers
Tags: 10xdeveloper, discuss, programming
Published: 2021-10-11 00:34:18

---
title: Thoughts on 10x Developers
published: true
description: Talented people exist, but they don't have to be jerks
tags: 10xdeveloper, discuss, programming
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a97zog0pubcgn0sk5v33.jpg
---

The concept of the 10x developer was popularized by [Steve McConnell](https://en.wikipedia.org/wiki/Steve_McConnell) in his book, Rapid Development, published in the 1990s. Steve highlighted some research into software engineering that suggested top developers could offer an order-of-magnitude improvement in productivity over average performers. 

It is not easy to draw firm conclusions from this type of research. It is difficult to generalize the meaning of the results beyond the particular tasks associated with a specific study. Nonetheless, I would say these results are roughly consistent with my own anecdotal experience. In any field, there are outliers who can make things look easy that would be very hard for the average practitioner. This is accomplished both by dint of great effort put in over years, but also because some people have the good fortune of being extremely talented. 

Software development is no different from any other field. I've encountered great programmers who would be several times as productive as I am for many kinds of tasks. Also, such people can solve problems that may be entirely beyond my capabilities. Reasonable people can disagree about the 10x number, but brilliant people do exist. 

I think the trouble started when "10x developer" increasingly became a buzzword in the tech industry in the 2000s. It became associated with the image of a kind of arrogant male tech-bro. I believe it also came to be used as justification to dismiss the need for diversification in software engineering. I completely reject this kind of idea. Human potential comes in many forms, and we can nurture and cultivate talent from many different backgrounds. 

However, I do sense something in the zeitgeist that there is also an undercurrent of thought that 10x developers simply don't exist - or that any apparent increase in productivity comes only from cutting corners. That's also not true, and I believe it does a disservice to the reality of individual differences.

The truth is that there are two axes to consider. On one axis, we have talent level. On the other, there are positive vs. negative personality traits. The two axes  are somewhat independent. Talented (and untalented) jerks exist. But many talented people are also modest and kind. I believe that somehow mythologizing of 10x developers who act like jerks came from some high profile examples - people like John Carmack and Bill Gates in their youth do fit the profile. However, these stereotypes need not be representative. We tend to notice these cases because people who are both exceptional and jerks tend to stand out, but that doesn't mean it is something to celebrate or emulate.
Programming sucks
Published: 2021-10-11 00:30:49

Programming is a pain. What works for one person can break for another, and code never works right until you're just about ready to sign out. It doesn't matter the language or the platform, programming is annoying. So why do we program? I'm having a real difficult time of seeing it tonight.

It's for the love of creation. We crate with a purpose, we create for fun, we create to bring life to a machine. We create to make something bigger than us, something that can live on. We program cause we love it. 

Sometimes, I program out of spite. I have to beat the machine, or overcome my own thoughts. 

I wish I had more motivation most days to work on my projects. I wish I felt that love of creation when the same error is thrown the 15th time in a row. I wish it was more love and less anger and spite. Funny how that works sometimes.

Program for love, not for hate.
Primary Keys in SQL
Tags: sql
Published: 2021-10-11 00:19:41

---
title: Primary Keys in SQL
published: true
description: Primary Keys in SQL
tags: #SQl
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ktbx4tkp1q2jgpx2xyi5.png
---

We want all our data entries in a table to be uniquely identifiable. A Primary key is a unique identifier on a row. A good example of a primary key is your twitter handle. No 2 twitter handles are the same, and your twitter handle cannot be NULL. You can change your twitter handle, but it always has to be unique (and twitter will not allow the change unless it is unique value).

```
CREATE TABLE unique_students (student_id INT NOT NULL,
name VARCHAR(100),
age INT,
PRIMARY KEY(student_id)
);
```
The below image will shows us what the above code creates in mysql:
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z5g3rpbym2qfy97qszf3.png">

Here we can see that the primary key is the student_id. However, it would be less efficient in this database to manually create our primary key. We can do this automatically with the auto_increment keyword.

```
CREATE TABLE unique_students (
student_id INT NOT NULL AUTO_INCREMENT,
name VARCHAR(100),
age INT,
PRIMARY KEY(student_id)
);
```
The auto_increment id will add a 1 each time, so we no longer have to specify it when creating a new entry
In the highlighted section of the graphic below, we can see that we have 2 identical entries except they have different student_id's because they've been auto_incremented.  They are actually 2 separate students who happen to have the same first name and age (which is quite common in a school setting).

<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hu7ghh347fuh2ndejlpt.png">

The auto_increment now lies in the "Extra" field (use the **DESC** keyword to show the table's description.

<img src= "https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b2v6y5smxza5156xzs97.png">

That's all for this blog, folks. Thanks for checking it out :)
Reader response to: The science of software development
Tags: science, debugging, softwaredevelopment
Published: 2021-10-21 08:51:52

---
title: Reader response to: The science of software development
published: true
date: 2021-10-11 00:00:00 UTC
tags: science,debugging,softwaredevelopment
canonical_url: https://jhall.io/archive/2021/10/11/reader-response-to-the-science-of-software-development/
---

[Last week](https://jhall.io/archive/2021/10/07/the-science-of-software-development/) I wrote about ways in which the scientific method is used every day in software development. Fellow reader Pieter-Jan Smets wrote in with an obvious example I had missed:

> Hi Jonathan,
> 
> I always consider debugging a good “application” of the scientific method. Brian Cantrill said in one of his talks on youtube:
> 
> “Debugging is the act of answering questions and then answering them. Not: guessing what the answer is.”
> 
> I fully agree with that statement, and it comes down to applying the scientific method. Making a hypothesis about what the cause of the bug/failure/… could be, and then verifying your assumption.
> 
> Regards,  
> PJ

Kudos to Pieter-Jan, and originall Brian Cantrill, for the excellent point!

* * *
_If you enjoyed this message, [subscribe](https://jhall.io/daily) to <u>The Daily Commit</u> to get future messages to your inbox._
API Project Template, Written in Typescript
Tags: node, webdev, typescript, javascript
Published: 2021-10-10 23:59:52

Building project with standardized structure could save much our time. We could focus on business process without considering too much on project structure. On the other hand, a good project structure should be clean, nice refactored, and easy to maintain.

Here's why:

- Your time should be focused on creating something amazing. A project that solves a problem and helps others.
- You shouldn't be doing the same tasks over and over like structuring project
- You should implement dry principles to the rest of your life

This time, I created complete project template for API written in Typescript which is available in this [github](https://github.com/arifintahu/project-structure-api). Of course, no one template will serve all projects since your needs may be different. 

### Built With

This project structure is built using

- [Express.js](https://expressjs.com/)
- [Sequelize](https://sequelize.org/)
- [Swagger](https://swagger.io/)
- [Typescript](https://www.typescriptlang.org/)
- [JsonWebToken](https://www.npmjs.com/package/jsonwebtoken)
- [Postgresql](https://www.postgresql.org/)
- [Mocha](https://mochajs.org/)
- [Supertest](https://www.npmjs.com/package/supertest)

### Features
- Everything is modular and unit testable
- Typescript everything
- Express API with dependency injected routes, controllers, repositories, middleware, and services
- Centralized configuration loading and validation
- API Documentation using swagger

### Folder Structure
```
├── .husky/                     # Pre-commit config for lint staged
├── src/                        # All application source
├──── @types/                   # Type definition
|
├──── api/                       
├────── controllers/            # Define all controllers
├────── helpers/                # Define all helpers
├────── lib/                    
├──────── logger.ts             # Define logger
├────── middlewares/
├──────── authorization.ts      # Define authorization using JWT
├──────── morgan.ts             # Define morgan   
├────── models/                 # Define all schema models
├────── repositories/           # Define all repositories
├────── routes/                 
├──────── v1/                   # Define all v1 routes
├────── services/               # Define all services
├────── validations/            # Define all controller validations
|
├──── config/
├────── swagger/                # Define swagger configuration
├────── database.ts             # Define postgres database connection
├────── express.ts              # Define express configuration
|
├──── constants/                # Define all constants                   
├──── server.ts                 # Create express config
├──── index.ts                  # ENTRYPOINT - Start server
|
├── test/                       # End-to-end test
|
└── Lots of random build-related files
```

See full project [here](https://github.com/arifintahu/project-structure-api). Let me know if you have any suggestions😄.