teleren/devto huggingface dataset:
JavaScript Search Functions
Tags: javascript
Published: 2021-12-13 00:24:23

This past week, I did an exercise that tested my skills in searching and filtering through arrays. 

Here are several ways to do that in JS: 

***1. filter() function***
The filter function can be used on arrays, and most data structures. Calling filter() returns a new filtered array. 

***2. find() function***
Find is similar to filter, but will return only one element that matches a condition. If an element is not found, find() will return undefined. 

***3. includes()*** 
The includes() function can be used to check if an array contains certain elements. This will return a true or false value. 

***4. for-loop*** 
Using a for-loop versus a JavaScript function is great for being able to add more functionality once the search condition is met. In a for-loop, a new array will hold the elements that match the conditions. It will generally look something like this: 

```
const array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
 const results = [];
 const count = 0;

 for (const i = 0; i < 10; i++) {
 let element = array[i];
 if (element < 5) {
 results.push(element);
 count += 1;
   }
 }
```

Here, we are looking for elements that are less than the number 5 in an array of numbers 0-9. We iterate through each element in the array, and push to the new results array when the condition is satisfied.
When are the best tools too expensive?
Tags: makefile, build, tooling
Published: 2021-12-29 17:25:21

---
title: When are the best tools too expensive?
published: true
date: 2021-12-13 00:00:00 UTC
tags: makefile,build,tooling
canonical_url: https://jhall.io/archive/2021/12/13/when-are-the-best-tools-too-expensive/
---

A while back I was working with a team on a [Go](https://go.dev/) project that used [Mage](https://magefile.org/) as its build system.

I had never used Mage before that, but I quickly came to hate it.

It violated some of the core principles behind the Go language; namely the idea that nothing should be “magic” (I guess given the name, I should have known…). It used a custom sort of inheretence to compose build commands that requried an intimite knowledge of Mage to be able to debug or extend. (For those unfamiliar: Go has no inheretence concept natively.)

The team voted, and almost unanimously agreed to migrate to Makefiles. Make is by no means perfect, but at least it’s simple for simple tasks, and we only cared about simple tasks for this project. It also has the advantage of being nearly ubiquitous, and easy to debug and extend (as long as you aren’t doing anything fancy, anyway).

However, it quickly became apparent that switchting to Makefiles would be fairly disruptive. Since building is central to software delivery, the Mage system had become a key component in everything important our code did, so changing it would have been fairly disruptive. And as the project was using a microservices architecture, with one repo per service, it would have meant doing a the same disruptive change a couple of dozen times or more.

So what did we do?

We stuck with Mage.

Those of us who worked with the build system learned the nitty gritty internals of Mage, so that we could properly debug and extend the system.

While I’m a strong advocate for always using [the best tools money can buy](https://jhall.io/archive/2021/11/03/the-best-tools-money-can-buy/), there are times when the _non-financial_ cost of using the best tool simply isn’t worth it.

* * *
_If you enjoyed this message, [subscribe](https://jhall.io/daily) to <u>The Daily Commit</u> to get future messages to your inbox._
Final Project
Published: 2021-12-12 23:57:35

**Overview:**
The web component my group decided to work on was the trading card  project. This consists of making multiple trading cards with a name and image, as well as an age, power, and speed stat. Although we are not fully done yet, I am pleased with how the cards are looking. Here is our project so far. 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/at6rqnzj7a4ls11yevpj.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xhlakgryd15azjqhsmn0.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tdgeh6lb3w1wmhe3t6o8.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/38wbdtpo7yq83jfkquj3.png)

This is just a snippet of the 4 cards we have, formatting is still being worked on. The main library we used was LitElement, as our main source file extends it. We will also be implementing HAX, but we have not complete that yet. 

**Tutorial**:
We started out by creating an array and mapping trading card data into the array. After this, we resized the cards to better resemble a trading card. This included playing around with height, width, margins, and other formatting settings. We used a very cool way of printing out the right trading card by calling a specific one from the html file. Below is how we implemented this.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6hidcg5y7wfg2nlkxvwk.png)

**Biggest Challenge:**
One of the requirements o the project was to use an array for the data. We got stuck on how to do this, since all of the data was put onto one card. Eventually we ended up adding code in the html file that allowed us to only print one at a time. This was the biggest challenge we ran into and it instantly made the project look better after we fixed it.


**Link to NPM:** https://www.npmjs.com/package/@paddyshub/project-3
**Link to GitHub:** https://github.com/PaddysHub/project-3
About Apache Log4j RCE vulnerability (CVE-2021-44228)
Tags: security, log4j, vulnerability, cve
Published: 2021-12-12 23:40:57

## Summary

- Caused by [Apache Log4j](https://logging.apache.org/log4j/2.x/)'s JNDI ("Java Naming and Directory Interface") features.
- How is it severe? The [CVSS](https://en.wikipedia.org/wiki/Common_Vulnerability_Scoring_System) score is 10, the maximum, which means the highest risk.

### Description

CVE-2021-44228 (named "log4shell" or "log4jam"): Remote code execution (RCE) severe vulnerability, discovered in Log4j, affects a wide range.

It's because Log4j is related to JAVA, one of general-purpose programming languages and used widely, and also used by popular frameworks such as [Spring](https://spring.io/), [Struts](https://struts.apache.org/), [LogStash](https://www.elastic.co/logstash/) and [Solr](https://solr.apache.org/) etc. internally.

To be a pity, it's straightforward and easier for attackers to exploit the CVE-2021-44228 (log4shell) vulnerability. As to services open to some network, especially Internet, the situation is really dangerous.

It has been being considered as a historical one, with being referred to [Heartbleed](https://en.wikipedia.org/wiki/Heartbleed) and [Shell shock (or Bashdoor)](https://en.wikipedia.org/wiki/Shell_shock), discovered in 2014.

Updating Log4j version to 2.15.0 is strongly recommended.

## How to fix it

- Strongly recommended to updated log4j version 2.15.0 (or later).

### Second best and temporary ways to mitigate it

Well, When it's difficult to update #Log4j, they are possible:

- Use WAF.
- if ver >= 2.10.0: Disable JNDI lookup with system property (log4j2.formatMsgNoLookups) or environment variable (LOG4J_FORMAT_MSG_NO_LOOKUPS).
- else: Remove JndiLookup from classpath.

---

This post is based on [the tweets by my company](https://twitter.com/scqrinc/status/1470167065512136704).
Apache Log4j RCE 脆弱性 (CVE-2021-44228) に関して
Tags: security, log4j, vulnerability, cve
Published: 2021-12-12 23:37:19

## 概要

- [Apache Log4j](https://logging.apache.org/log4j/2.x/) の JNDI 機能に関わるものです。
- 深刻度合いは？ [CVSS](https://en.wikipedia.org/wiki/Common_Vulnerability_Scoring_System) で 10 点、最高スコアです。最上位のリスクレベルとされています。

### 詳細

CVE-2021-44228 (log4shell または log4jam とも): Log4j で見付かったリモートコード実行 (RCE) 脆弱性の影響は広範に及びます。汎用的プログラミング言語 JAVA に関わるもので、[Spring](https://spring.io/) / [Struts](https://struts.apache.org/) / [LogStash](https://www.elastic.co/logstash/) / [Solr](https://solr.apache.org/) 等のメジャーなフレームワークでも内部的に使われているためです。

CVE-2021-44228 (log4shell) は、攻撃成立の条件が低く、開かれたネットワーク系のシステムでは特に危険です。2014 年の [Heartbleed](https://ja.wikipedia.org/wiki/%E3%83%8F%E3%83%BC%E3%83%88%E3%83%96%E3%83%AA%E3%83%BC%E3%83%89) や [Shell shock (Bashdoor) (* 英語)](https://en.wikipedia.org/wiki/Shell_shock) と並んで、歴史的に深刻な脆弱性の一つになると見なされ始めています。

Log4j を 2.15.0 へ更新することが強く推奨されています。

## 対応策

- log4j のバージョン を 2.15.0 (またはそれ以降) に更新することが、強く推奨されています。

### 次善の一時的な緩和策

なお、Log4j のアップデートが難しい場合、以下も検討できます:

- WAF を導入する。
- ver >= 2.10.0 の場合: JNDI lookup を無効化する (システム設定 log4j2.formatMsgNoLookups または 環境変数 LOG4J_FORMAT_MSG_NO_LOOKUPS)。
- 上記以外: JndiLookup をクラスパスから除外する。

---

本記事は[小社のツイート](https://twitter.com/scqrinc/status/1470170339724324864)をもとにしています。
Mail Tester
Tags: webdev
Published: 2021-12-12 21:08:00

<!-- wp:paragraph -->
<p>A common scenario with many web services like a CRM is sending mail and realizing that it is often going to the junk of recipients.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>There are several reasons why a message may go to spam. Some of those reasons come from the content of the message. Some are because of filters set up by the recipient or their email provider. And some factors come down to technical configuration on the part of the sender.</p>
<!-- /wp:paragraph -->

<!-- wp:more -->
<!--more-->
<!-- /wp:more -->

<!-- wp:paragraph -->
<p>It's this last group which can be aided by a tool like <a href="https://www.mail-tester.com/" data-type="URL" data-id="https://www.mail-tester.com/">mail-tester.com</a>. It is simple to use: </p>
<!-- /wp:paragraph -->

<!-- wp:list {"ordered":true} -->
<ol><li>Visit the site and copy the unique email it gives you. </li><li>Send a message to that address. You want this test to be as close to your real scenario as possible. If you're trying to test from a website, send from the website. If you're trying to test from Outlook, send from Outlook. And so on. Similarly, make the content a copy of a real message.</li><li>Return to the site and hit the "Then check your score" button.</li></ol>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>It will provide you with a report including a score. If you're hitting at least an 8 or 9 out of 10, you'll be fine sending to most email services. It is true that some services weigh factors differently, though. Most of the recommendations it will give to improve your score are not that hard to implement for an IT person, so aim for everything you can.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>It is also true that sometimes email providers have their own block list which you could have ended up on through no fault of your own, e.g. maybe your website has a similar IP to a spam offender and the provider blocked a bunch of addresses including yours along with the real offender. A good sign that this is happening is if you notice patterns, like if Gmail never receives your messages but Outlook does, or vice versa. If the latter happens with Gmail or Outlook and you've done all the other standard things that mail-tester can help you identify, you can file a request with them to get off the list.</p>
<!-- /wp:paragraph -->
Using MongoDB with Node.JS
Tags: node, javascript, beginners, mongodb
Published: 2021-12-12 22:33:22

First, create a new project.

CD into the project folder and run `npm init`. Follow those steps until you're done.

Run: `npm i mongodb`. This will install the official MongoDB driver for Node.

Create an `index.js`, or `main.js`, depending on your main file when you ran `npm init`.

Inside there: add this:

```
const {MongoClient} = require("mongodb");
const mongouri = 'mongodb://your_connection_string';
const client = new MongoClient(mongouri);

client.connect().then(console.log("Connected to MongoDB"));
```


Congrats, if you run `node .`, you should see 'Connected to MongoDB'.

Let's create a quick question database by using an asynchronous function. Add this above `client.connect().then(console.log("Connected to MongoDB"));` and under the constants:

```
async function createListing(db, collection, data) {
    await client.db(db).collection(collection).insertOne(data);
}
```

Then, under `client.connect(...`, put:

```
createListing('question', 'questions', {
    question: "What's 2+2?",
    answer: 4
});
```

Go ahead and run `node .`. If you have access to your database, you should see that listing in the database.

Let's read a listing and compare an answer by creating another asynchronous function. Under the 'createListing' function, add:

```
async function readListing(db, collection, data) {
    const result = await client.db(db).collection(collection).findOne(data);
    if(result === null || result === undefined) {
        return false;
    }
    return result;
}
```

Then, let's remove the lines where we created our listing, and we will replace it with:

```
let guess = 4;
const res = await readListing('question', 'questions', {
    answer: guess
});
if(res === false) {
    console.log("Oops, you got it wrong.");
} else {
    console.log("Yay! You got it right!");
}
```

And now, we will run `node .`, it should output: "Yay! You got it right!"

Congratulations! You've just created and read data from a database!

To the beginners: Keep learning. You never know what you can accomplish if you keep putting your all into it. This tutorial has just showed you how to use one of the BEST databases out there, very easily. So go and do what we all beginners *should* do, keep learning, and keep attempting new things. Good luck!
Releasing WebExtension using GitHub Actions
Published: 2021-12-08 19:11:35


### My Workflow
I'm the author of an open-source [browser extension](https://github.com/cardinalby/memrise-audio-uploader) and I want to share the workflow that I have created for:
* releasing the extension to Chrome Web Store
* releasing the extension to Firefox Add-ons
* packaging the extension into various artifacts for offline distribution (_crx_ and _xpi_ files)

I wasn't able to find any existing solutions that can meet these requirements and I have prepared a set of actions and a complete solution in form of several workflows to set up the whole process. 

They are based on my practical experience of dealing with all difficulties of interacting with the extension stores and their undocumented behaviour.

### Submission Category: 

DIY Deployments

### Yaml File or Link to Code

{% github https://github.com/cardinalby/memrise-audio-uploader/ %}

[the main workflow](https://github.com/cardinalby/memrise-audio-uploader/blob/master/.github/workflows/buildAndDeploy.yml)

### Additional Resources / Info

1. I have posted a [detailed manual](https://dev.to/cardinalby/webextension-deployment-and-publishing-using-github-actions-522o) here on _dev.to_ that will help everybody to understand my workflow and build the similar one for their projects.

2. [Another post](https://dev.to/cardinalby/scheduling-delayed-github-action-12a6) related to the tricky way of using "delayed" workflows in GitHub Actions that was used in my workflow.
Advent of Code 2021 - day 1
Tags: functional, typescript, adventofcode
Published: 2021-12-12 22:16:38


https://adventofcode.com/2021/day/1

Given a list of numbers, we are asked how many times the next number in the list is larger than the previous. Ie
```
199 (N/A - no previous measurement)
200 (increased)
208 (increased)
210 (increased)
200 (decreased)
207 (increased)
240 (increased)
269 (increased)
260 (decreased)
263 (increased)
```

This can be solved by reducing over the array returning back a pair of `(lastNumber, count)` in the reduction function. For the starting condition, I want to use Number.NaN to ensure that I do not increase the count for the first iteration.

-- Part 2
This time, instead of measuring the difference between individual measurements, we are now measuring a sliding window of three values. Ie in the first example, we measure whether `[199, 200, 208]` is larger than `[200, 208, 210]`. Since the only difference between these two frames are the numbers at the front and the end, I am going to use a comparison function that takes in four numbers and compares the first and last numbers which should tell me if there is an increase or not. I will then move my sliding window of four over the original list.

https://codesandbox.io/s/amazing-satoshi-zbcs7?file=/src/index.ts
Day 88/100 Truthy and Falsy
Tags: 100daysofcode, javascript, programming, motivation
Published: 2021-12-12 22:06:29


To know the value of a function and use a proper boolean may conclude that it is easier to distinguish which one is not real to begin with.

![banner](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6sajahxgcvrput1vqya6.png)

## Overview
```
let myVariable = 'I Exist!';

if (myVariable) {
   console.log(myVariable)
} else {
   console.log('The variable does not exist.')
}
```

- The code block in the `if` statement will run because `myVariable` has a
*truthy* value; even though the value of `myVariable` is not explicitly the value `true`, when used in a boolean or conditional context, it evaluates to `true` because it has been assigned a non-falsy value.
- So which values are *falsy*— or evaluate to `false` when checked as a condition? The list of falsy values includes:
    - `0`
    - Empty strings like `""` or `''`
    - `null` which represent when there is no value at all
    - `undefined` which represent when a declared variable lacks a value
    - `NaN`, or Not a Number


## Code Snippets

```
let username = '';
let defaultName;

if (username) {
  defaultName = username;
} else {
  defaultName = 'Stranger';
}
```

## a11y myths

**Accessibility can only be tested by disabled people**

> Well, usually disabled people are the best testers - they use assistive technologies full time. However, everyone can learn how to test websites for accessibility. 

[![resources](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nbsgxh7z2x8o7hgf53py.png)](https://www.w3.org/WAI/test-evaluate/)
Why Strings are Immutable in Java?
Tags: java, strings, programming
Published: 2021-12-12 21:27:48

Before understanding why strings are immutable in java, we need to think about why do we make something immutable?

Immutable means once created we cannot change it. The one reason that we can think of making anything immutable is synchronization when it’s shared. It’s the same reason that strings are immutable.

In Java, String objects are shared and cached in String Pool. It’s a designated place in a heap where strings are stored and shared among multiple threads if they have the same value. For example: In String Pool, if there is already a string with the value “test” and the program wants to create another string object with the same value then it will get the same reference instead of creating a new string object. Now we know how strings are stored in heap. Let’s look at the reasons why they are immutable. 

1. The first reason is to make it thread safe. Since strings are shared among multiple threads in string pool, we need to restrict any random thread to change it. Any change in a string can be impacted to other threads which are accessing the same string. If a thread wants to update the value of a string, it needs to create another string and takes it reference.

2. Usually, we use String as a key in Map. If Strings were mutable, anyone can change the value of the strings, and we would lose the actual key.
100 Days of Code
Tags: 100daysofcode, webdev, beginners
Published: 2021-12-12 21:24:51

Posting on twitter... of my progress each day  @s3cio I will be adding to my YouTube Channel Playlist for WebDev.

This is my beginners collection of Frontend Web Developer videos that I come across.  I hope that it help others.  As it truck forward on my journy... I will keep adding to the list.

[AppleJ's YouTube WebDev Playlist](https://www.youtube.com/playlist?list=PLoX6zok6OYbkIlUPW4Hfn5xr-bM1cKALR)


Enjoy!

If anyone as other video they would recommend to add to this list please comment.
A Simple chat app using Socket.io with NodeJS and ReactJS
Tags: javascript, webdev, react, socket
Published: 2021-12-12 21:16:52

### I have used:

- NodeJS with Express for server side logic
- ReactJS to build a simple client app
- Socket.io for real-time connection between both sides

[Live Preview](https://reactsocket.netlify.app)
Connect from two different tabs or two different PC's to test it out

![shows the landing page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/avw8utrdbq9rhq29b6y9.PNG)
You can use it to understand how sockets work in react with a bit of touch from Material UI(An unoptimized overkill).

I am a full stack developer and i created this small app to understand working of sockets. Here is another [resource](https://youtu.be/ZwFA3YMfkoc) to learn about socket by JavaScript Mastery.
[Source code](https://github.com/Malik-Idrees/React_Socket.io.git)
Stay Tuned  for more coming soon! 
### What's next?
A detailed article about creating API's using Node.js and MongoDb along with In-memory testing and optional GitHub actions to test and deploy to Heroku whenever I have free time.

GitHub: [Link](https://github.com/malik-Idrees) ⭐
Fiverr: [imidrees](https://www.fiverr.com/share/27Yy04) ✨
Thanks for reading!
Solving day 12 of Advent of Code 2021 in JavaScript
Tags: challenge, adventofcode, javascript, video
Published: 2021-12-12 21:16:38

---
title: Solving day 12 of Advent of Code 2021 in JavaScript
published: true
description: JavaScript walkthrough of Advent of Code 2021 (day 12)
tags: challenge, AdventOfCode, javascript, video
series: Advent of Code 2021 in Javascript
---

{% youtube ZAVcCwO6Bcs %}