teleren/devto huggingface dataset:
Are you TOO OLD to start coding? Use this tool to find out!
Tags: beginners, programming, webdev
Published: 2022-07-18 15:05:42

Coding is an exciting field, there's no doubt about that. It's an attractive field, but a lot of people are put off for one simple reason: they feel they are too old to start coding. **But are you**?

To help you answer this question, I have created a super simple tool called "Too Old To Code?".

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d89q7wrhjmwj27yod191.png)
 
To use it, just click on the link below and enter your age. The tool will _immediately_ tell you if you're too old to code. Give it a go! 

🔥 [Are you Too Old to Code?](https://savvas.me/toooldtocode/)

Share your results here!
How to fill an array in JavaScript with initial values
Tags: javascript
Published: 2022-07-18 15:00:08

You will come across instances where you want to have an array with predefined values so that you can iterate over them. The very obvious way will be to create a for loop and initialize an array as shown below:

```js
let array = []

for (let index = 0; index < 10; index++) {
  array.push(1)
}
```

We will see 3 other methods to fill an array in javascript without explicitly using a for loop.

## Using Array.fill method

We can use the `fill` method provided by the [Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)
object to populate the array with predefined values.

```js
const array = Array(10).fill(1)

console.log(array) // [1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
```

The `Array(10)` will create an empty (sparse) array of size 10.

The `fill` method accepts additional parameters, which can be used to fill only part of an array:

```js
const array = [1, 2, 3, 4]

array.fill(5, 2, 4)

console.log(array) //[1, 2, 5, 5]
```

The second argument is used to specify from which position to begin (inclusive) and the third argument says till where to fill (exclusive, maximum being `array.length`).

## Using Array.from method

We can fill an array using `Array.from` method using 2 different ways:

```js
const array1 = Array.from({ length: 10 }, () => 1)
console.log(array1) // [1, 1, 1, 1, 1, 1, 1, 1, 1, 1]

const array2 = Array.from(Array(10), () => 1)
console.log(array2) //[1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
```

The first argument accepts an array or an iterable object and the second argument is a map function which should return the value to be filled.

## Using spread operator and .map function

We can use a combination of spread operator and `map` function as well to fill an array:

```js
const array = [...Array(10)].map(() => 1)
console.log(array) //[1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
```

> Here spreading and creating another array is necessary since `Array(10).map(()=>1)` will only create an empty (sparse) array.

## Filling array with 1..n

If you need to fill an array with numbers starting from 1 to n (say 1 to 10), you can do that using one of the following code:

```js
const array1 = Array.from({ length: 10 }, (value, index) => index + 1)
console.log(array1) // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

const array2 = [...Array(10)].map((value, index) => index + 1)
console.log(array2) // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
```

## Filling an array with objects

Not only numbers, you can fill an array with other type of values like string, object etc. If you need to create an array of objects, then you can do it as shown below:

```js
const array = Array.from({ length: 5 }, (value, index) => {
  return { id: index + 1 }
})
console.log(array) // [{"id":1},{"id":2},{"id":3},{"id":4},{"id":5}]
```

If you know any other methods, please do comment them below.
Paracetamol.js💊| #169: Explica este código JavaScript
Tags: javascript, webdev, spanish, programming
Published: 2022-07-18 14:42:34

## **<center>Explica este código JavaScript</center>**
#### <center>**Dificultad:** <mark>Avanzado</mark></center>

```js
const libro = {
  isbn: "1265-4985-466",
  titulo: "Los miserables",
  datosEditorial: {
    nombre: "Santillana",
    "año publicacion": 2016
  }
};

const copiaLibro = structuredClone(libro);
copiaLibro.datosEditorial["año publicacion"] = 2011;

console.log(libro.datosEditorial["año publicacion"]);
console.log(copiaLibro.datosEditorial["año publicacion"]);
```

A. `2016`, `2011`
B. `2016`, `2016`
C. `2011`, `2011`
D. `Uncaught ReferenceError: structuredClone is not defined`

Respuesta en el primer comentario.

---
In the beginning.....
Tags: beginners
Published: 2022-07-18 14:40:23


![Funny Programming Meme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/47lkml7tquppmgjshpjg.jpg)
Hello and welcome to my blog! I am Melanie known to most as Mel and to some as Marshmelly. I’ll tell you about that nickname someday… maybe 🤔

I would say my journey began at the beginning of a heartbreaking divorce. My life was changing because of it, but I didn’t realize then, how much it would really transform. I was really depressed, hurt and not seeking help. I plummeted into a lifestyle that led to destruction, thinking it would fix my problem. That lifestyle led me to make poor choices that had negative effects on my life. I knew I needed to make a change. I knew I needed to make better choices, and I had more to live for. I came to terms with the choices that brought me so low. I am a firm believer that everything happens for a reason and that I was in the position I was in to transform my life. I am thankful for that, because I wanted to live a life of abundance and excellence, and the road I was following was definitely **_not_** that. I became focused on what I needed to do to change myself from the inside out. It started with doing a self-evaluation and bringing out my feelings towards my divorce. I had to heal from that before I could begin to transform inside. I attended mental health groups to help me get it out and cope with what had happened. I knew I needed to take advantage of all opportunities that became available to me.


![Gatsby](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e2qlb0bbvxq1e1kcfb27.png)
In rolls, _The Great Bootcamp_ (not as awesome as _The Great Gatsby_), but hey pretty awesome in itself. My bootcamp was available to me to teach me about web development. Learning to code was interesting because I acquired a new skill that could lead to a new career as a software engineer. I made progress through the front-end languages such as HTML, CSS, JavaScript and React. At the end of those lessons I applied my skills to a few web pages. I became confident in my ability to use those languages. I have been exposed to the back-end technologies, and I am anxious to be able to incorporate those into future projects. While being in the program I enjoyed challenges of re-wiring my brain to write code.

It has been a long, hard journey to get to where I am currently. I am so grateful for Develop Carolina and the apprenticeship offered. This apprenticeship is an awesome opportunity because I possess a desire to advance my knowledge of technical languages. I hope to gain problem solving skills,  hands-on work experience, and a great network of software developers. This apprenticeship will be great for me because it will propel me into an incredible software engineering career.

This first week was a little rough for me. It showed me how much self-discipline I would need to complete it successfully. I start everyday with a 5-10 minute meditation. This helps me get my day rolling on a great foot. I am ready for this new journey and although it won’t be easy, I am up for the challenge.
Music Monday — What are you listening to? (July 18)
Tags: watercooler, discuss, music
Published: 2022-07-18 14:37:45

_cover image source: [Verve Label Group](https://giphy.com/vervelabelgroup/)_

In this weekly series, folks can chime in and drop links to whatever it is they've been listening to recently + browse others suggestions.

If you like talking about music, consider following the org [#music discussions](https://dev.to/music-discussions) for more conversations about music!

{% embed https://dev.to/music-discussions %}

***

So, what have y'all been listening to today? _Note: you can embed a link to your song on most platforms using the following syntax `{% embed https://... %}`._

I look forward to listening to y'all's suggestions! 👂 🎶
JavaScript 配列によく使うメソッド
Tags: javascript, array
Published: 2022-07-18 14:35:43


## why 

配列の操作が鈍ってきているので復習。

---

# Filter -- 引数の条件での絞り込み。

## 動作

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

```ts
const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);
```

このように、条件式を引数に持ってきて、配列からその条件で絞り込む。

---

## プロダクトで使われそうな実例

https://blog.oliverjumpertz.dev/10-important-array-methods-in-javascript-explained

```ts
const customers = [
  {
    id: 1,
    address: {
      number: "1-1-1" ,
      zipCode: "123-1111" ,
    } 
  },
  {
    id: 2,
    address: {
      number: "2-2-2",
      zipCode: "123-2222" ,
    } 
  },
]
const getElibgleCustomers = (customers, zipCode) => {
  return customers.filter(
    (customer) => customer.address.zipCode === zipCode
  );
}
const results = getElibgleCustomers(customers, "123-2222")

console.log(results);

// [ { id: 2, address: { number: '2-2-2', zipCode: '123-2222' } } ]

```

お客さんたちのデータと、絞り込むための条件をもってきて
絞り込んだ。

---
---

# includes -- 引数の値での絞り込み。

https://blog.oliverjumpertz.dev/10-important-array-methods-in-javascript-explained#heading-5-includes

```ts
const numbers = [1, 2, 3, 4, 5];

const includesFive = numbers.includes(5);
```

配列から引数の条件を含んでいるものだけを絞って返す。

---
---

# reduce -- 引数の処理を Lisp 的に施す。

https://kei-s-lifehack.hatenablog.com/entry/2021/03/09/js_array_reduce%28func%2C_arg%29_%E3%81%AE%E7%AC%AC%E4%BA%8C%E5%BC%95%E6%95%B0%E3%81%8C%E3%81%82%E3%82%8B%E5%A0%B4%E5%90%88%E3%81%A8%E3%81%AA%E3%81%84%E5%A0%B4%E5%90%88%E3%81%AE%E5%87%A6

Lisp 的な処理。左からひとつひとつ 演算していく。

----
---

# map -- 引数の関数を配列の要素ひとつひとつに施す。

https://www.w3schools.com/jsref/jsref_map.asp#:~:text=Definition%20and%20Usage,not%20change%20the%20original%20array.

配列の各自に対して、引数の関数の処理を行う。シンプル。
Side project sees the light of day 🚀
Tags: css, react, frontenddev, dev
Published: 2022-07-18 14:34:38

---
title: Side project sees the light of day 🚀
published: true
description: I built a CSS grid layout tool for the web using React
tags: css, react, frontenddev, dev
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cnnlospth7xjhapm791f.png
# Use a ratio of 100:42 for best results.
---

I built a CSS grid layout tool using React. 

The primary motivation for building [gridbuilder.xyz](https://www.gridbuilder.xyz), despite there being several other tools like this, was two-fold: I wanted to build something that I would use myself (and therefore others would hopefully find useful, too) and just for the fun of the challenge!

This is currently at MVP stage, so there are lots of potential features to be added in the near future. Would be interested to see what you guys think and of course, any feedback would be great.

Cheers! 🤘
Report Automation Test Results to Google Chat
Tags: javascript, chat, teams, slack
Published: 2022-07-18 14:27:06

In the previous [post](https://dev.to/asaianudeep/report-test-results-to-slack-or-microsoft-teams-2597) we have seen the integration of test results to **microsoft teams** and **slack**.

In this article, we will check on reporting your test results to **Google Chat**.

{% github test-results-reporter/reporter %}

[Test Results Reporter](https://test-results-reporter.github.io) is a command line tool that can publish test results to numerous communication platforms.

### Steps

- Create an incoming webhook url for a chat space - [docs](https://developers.google.com/chat/how-tos/webhooks#create_a_webook)
- Create a config file either in `json` or `js` format.
```json
{
  "reports": [
    {
      "targets": [
        {
          "name": "chat",
          "inputs": {
            "url": "<chat-incoming-webhook-url>"
          }
        }
      ],
      "results": [
        {
          "type": "junit",
          "files": ["path/to/junit-results.xml"]
        }
      ]
    }
  ]
}
```
- Install Node.js in your system.
- Run this command to report the results.
```shell
npx test-results-reporter publish -c path/to/config.json
```
Prometheus 2.37 – The first long-term supported release!
Tags: prometheus, monitoring, kubernetes, devops
Published: 2022-07-18 14:16:42

**Prometheus 2.37 is out and brings exciting news**: this is the first long-term supported release. It'll be supported for at least six months. 


## Why is Long-Term Support (LTS) so significant?

Previous to this release, each Prometheus version had a six-week life-cycle. That means that if you wanted to **stay up-to-date with the latest features and bug fixes**, you needed to update your Prometheus server every six weeks or so. 

Upgrading isn't always as easy as clicking on a button. **With Prometheus growth, more and more companies depend on Prometheus** as the key component of their monitoring infrastructure, and they can't face the risk that new features and enhancements also bring regressions, requiring them to upgrade again. That's why Prometheus is adding LTS releases to their release cycle.


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

[Prometheus LTS releases](https://prometheus.io/docs/introduction/release-cycle/) will bring **bug, security, and documentation fixes**, so companies limit the risks of upgrades while having the Prometheus server still up-to-date.

So, you won't have the latest Prometheus features, but you'll know that **upgrading to the next 2.37 fix release will be straightforward**.


## The Prometheus community is getting more and more mature

2022 is a great year for the Prometheus community. Last KubeCon EU in Valencia, the [CNCF announced](https://www.cncf.io/announcements/2022/05/18/prometheus-associate-certification-will-demonstrate-ability-to-monitor-infrastructure/) the [​​Prometheus Associate Certification, which is currently in beta](https://training.linuxfoundation.org/certification/prometheus-certified-associate/). This allows engineers to demonstrate their proficiency in the Prometheus ecosystem and cloud native observability concepts. Now, Prometheus is announcing a LTS release.

The release of these new LTS versions means that, now, every time the community fixes bugs and security issues in Prometheus, **the maintainers will add these fixes both in the latest Prometheus minor and in the latest LTS version**. 

This extra effort is a **serious investment in the Prometheus maturity** that will bring more stability to the vast number of companies and projects using Prometheus.


## Some nice changes included in Prometheus 2.37

This release also includes other nice changes, like a new built-in [service discovery for HashiCorp Nomad](https://github.com/prometheus/prometheus/pull/10915), and an [enhancement that allows attaching node labels for endpoint roles](https://github.com/prometheus/prometheus/pull/10759) in the Kubernetes service discovery.

You can find the full list of changes in the [official release notes of Prometheus 2.37](https://github.com/prometheus/prometheus/releases/tag/v2.37.0).
CSS ESSENTIALS
Published: 2022-07-18 14:11:00

TYPES OF CSS SELECTORS
1]TYPE SELECTORS
2]DESCENDANT SELECTORS
3]CLASS SELECTORS

CREATING A PAGE LAYOUT WITH FLOATS
         LESSON REVIEW
1]THE"FLOAT"AND "WIDTH" PROPERTIES CAN BE USED TO CREATE COLUMNS
2]CLEAR YOUR FLOATS
3]THERE ARE DIFFERENT UNITS OF MEASURE FOR THE WIDTH PROPERTY{%,px,AND MANY OTHERS}
Productivity apps for CS students
Tags: students, productivity, 100daysofcode, beginners
Published: 2022-07-18 14:05:35

I recently wrote this blog for college students - [12 Best Productivity Apps for University Students](https://blog.invidelabs.com/best-productivity-apps-for-students/)

If you are struggling with time management, you could use these apps. Even if you are a beginner at coding, you will find these apps helpful.
Install NodeJs and NPM using Homebrew [MacOs]
Tags: node, npm, homebrew, macos
Published: 2022-07-18 13:56:36

To install NodeJs and NPM we gonna use Homebrew. If you already haven't installed Homebrew please check this [post](https://dev.to/fabio_correia15/how-can-i-install-homebrew-on-maos-13ld)

**What is NPM?**
Going straight to the point `npm` is a command-line tool that interacts with a repository, that repository that enables the installation of packages. So, a package manager :D

To install is easy as opening the terminal and run the follow  command:

```
brew install node
```

To verify if `npm` is already installed:

```
npm -v
```
Name a website or app that annoys you. What’s wrong with it?
Tags: discuss, anonymous
Published: 2022-07-18 13:49:16

_This is an anonymous question sent in by a member who does not want their name disclosed. Please be thoughtful with your responses, as these are usually tough posts to write. Email sloan@dev.to if you'd like to leave an anonymous comment or if you want to ask your own anonymous question._ 

***
Craftsmanship
Published: 2022-07-18 12:23:51

Modern craftsmanship principles apply to most, if not all trades. While it’s common to think back in history and pick trades such as blacksmithing or even pottery when discussing craftsman and craftsmanship, today, craftsmanship principles can apply to all fields.

I’m at the beginning of my journey in the Develop Carolina apprenticeship program and one of the first things introduced is how to approach the program and learn. That involved learning about the history of craftsmanship and what that means. Craftsmanship is more of a mindset and how you approach your trade or career. In an article regarding shokunin, I read that the finished product is affected by the environment produced. These artisans spend a lifetime learning their environment and materials to create products and are true masters of their craft.

This itself can apply to several trades such as nursing, service industry positions, and in my case, software engineering. In order to master your craft, you must pour yourself into your craft. Fully immerse yourself and love what you do every day. To get better you have to DO. One of the common themes I saw while researching craftsmanship was repetition. By continuous practice and DOING you will see improvements. Another resource during this learning module was watching the film Jiro Dreams of Sushi. Jiro is what most consider a master of his craft. Something straightforward that I thought was rather powerful was Jiro saying something like “All I want to do is make the best sushi, and it gets better each time.” Jiro’s son also says some are born with natural skills and gifts but if you work hard you’ll get good over time.” Again, a very common theme is investing your time and dedication to the craft.  

To summarize, a craftsman is anyone who takes pride in what they do, loves what they do, has self discipline, and truly invests in their field. Craftsmanship doesn’t apply to any particular craft or trade its how you approach the craft or trade.
Decentralized software
Tags: dapp
Published: 2022-07-18 13:42:48


Nowadays, the interest in DApp is growing steadily. That's why people often ask: [how to create a decentralized application?  ](https://www.zfort.com/services/DApp-Development-Company) 
A decentralized application guarantees the user that his data is secure and encrypted due to the private info is stored on users' devices instead of central storage.

Take a look at a short list that you should know about decentralized apps: 
- they are secure;
- they build on open-source code;
- they encrypted user data;
- they are anonymous.

Small wonder that it is a promising direction today.
CSS properties you should know right now!
Tags: webdev, beginners, css
Published: 2022-07-18 13:38:44

While browsing the MDN docs, I found some interesting CSS properties. So, I made this article about those. Let's begin!

## `accent-color`
Have you ever wanted to override the default color of `<input type=checkbox` es and the default focus ring color? I used `filter` 🙄 before knowing this property. This is how you use it

```css
element {
    accent-color: (any valid color)
}
```

For example, if we try this

```css
body {
    accent-color: red
}
```

We get this result

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3v0mpfch0125snjrkvb0.png)

## `all`

This property will reset all the property values of the given element, for example, if we want to remove all styles from the button we can do this.

```css
button {
   all: unset
}
```

This will give us some plain text.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/25e48dfb1dl4wr4z5wml.png)

## `text-indent`

This property is very useful for overriding the length of the indent of the text.

```html
<p>I have no spaces before</p>
```

```css
p {
  text-indent: 42px;
  border: 1px solid gray;
}
```

Produces

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8khu6blo2xbhu5uiexm9.png)

## `resize`

This is my favorite, you can create resizable components with 0 JavaScript!

```css
div {
  resize: both;
  overflow: hidden;
  border: 1px solid black
}
```

```html
<div>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab aspernatur deserunt minus mollitia repellendus voluptates quibusdam atque. Blanditiis reprehenderit et eligendi, deleniti tempora, ipsam ad, dolores sed rem id sit.
</div>
```

And we have a resizable component only with CSS!

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y0no7hv7r4o4lmlnx0uj.png)
 
## `column-count`

A bit useful property to create columns. But may not be responsive.

```html
<div class="test">
  <div class="box">
    <h1>
      :D Columns
    </h1>
  </div>

  <div class="box">
    <h1>
      without flex
    </h1>
  </div>

  <div class="box">
    <h1>
      or grid? 😲
    </h1>
  </div>
</div>
```

```css
.test {
  column-count: 3;
}

.box {
  margin: 10px;
  border: 1px solid gray;
}
```

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/by2hkt7cn4s5q2wldo5z.png)
  
This is not bad but only useful when testing something.

## `animation-play-state`

Using this property, you can pause/play animations.

```css
.element {
   animation: bounce 10s ease infinite;
}

.element.paused {
   animation-play-state: paused;
}
```

## The end!

Thank you for reading this article. I hope you learned something new. 

Follow me on

Twitter - https://www.twitter.com/posandu
GitHub - https://www.github.com/posandu