teleren/devto huggingface dataset:
My first contribution to prometheus
Tags: go, javascript, react, opensource
Published: 2021-12-22 16:41:41

Several weeks ago I joined [Virtual Coffee](https://virtualcoffee.io), and I really love that community.  I shared during one of the weekly sessions that I was hoping to learn some more about backend by contributing to open source software.  One of the more seasoned members suggested that I try contributing to [prometheus/prometheus](https://github.com/prometheus/prometheus).

Taken from the description on the repo:
> Prometheus, a Cloud Native Computing Foundation project, is a systems and service monitoring system. It collects metrics from configured targets at given intervals, evaluates rule expressions, displays the results, and can trigger alerts when specified conditions are observed.

As I started looking at the project issues, I didn't find many good first issues that I personally felt comfortable with, so I decided to take advantage that I had a completely fresh set of eyes on the project! As I followed along with the [Getting Started guide](https://prometheus.io/docs/prometheus/latest/getting_started/), something immediately jumped out at me! When opening `http://localhost:9090/metrics` and opening the Metrics Explorer, I was presented with a really long list of metrics that I could view the time series data for.  I thought to myself "with such a long list, it would be nice if there was a search field!" I opened an [issue](https://github.com/prometheus/prometheus/issues/9628) about this, and then a subsequent [pull request](https://github.com/prometheus/prometheus/pull/9629). Here's a screenshot of at least the first iteration of what I implemented:

![screenshot of metrics search feature](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tvc2khzvdo56jql7xv9f.png)

This project uses [Developer Certificate of Origin (DCO)](https://probot.github.io/apps/dco/) as one of the checks it does for PR. This makes sure that all commits are signed off to include the contributors name and email address. I learned the hard way about amending commits and using `git commit -s` to sign off commits.

Beyond that, the reviewer GitHub user @juliusv was very friendly and engaging and asked me to implement the use of Fuzzy search with [@nexucis/fuzzy](https://www.npmjs.com/package/@nexucis/fuzzy), which had been used on an adjacent component.  I was also able to add appropriate tests for the new component! 

Since this PR, I've gotten a couple more merged to the project, including some contribution to the [Go](https://go.dev/) codebase, so I'm starting to dig into the backend side which is what I had wanted to do!

*Cover image by [Timon Wanner](https://unsplash.com/@77timon). Picked it on account of the story of [Prometheus](https://en.wikipedia.org/wiki/Prometheushttps://en.wikipedia.org/wiki/Prometheus).*
Component Life Cycle discussion. 
Tags: javascript, react
Published: 2021-12-22 16:40:08

	Components are created, then grows by updating, and then die. This is referred to as a component lifecycle. There are different lifecycle methods that React provides at different phases of a component's life.
Lifecycle methods are special methods built-in to React, used to operate on components throughout their duration in the DOM. For example, when the component mounts, renders, updates, or unmounts. The most important lifecycle method is the render method.
Every React Component has a lifecycle of its own, lifecycle of a component can be defined as the series of methods that are invoked in different stages of the component's existence.
The componentWillMount() method is the first to be called. It's invoked once and immediately before the initial rendering occurs, hence before React inserts the component into the DOM.
So lifecycle can be handy sometimes when we don't want React to render our state or prop changes. Anytime setState() is called, the component re-renders by default. The shouldComponentUpdate() method is used to let React know if a component is not affected by the state and prop changes.
Unicode
Tags: computerscience, software, encoding, i18n
Published: 2021-12-22 16:37:26

[Unicode](https://home.unicode.org/) is an international character encoding standard. It provides a unique number (code point) for every character, no matter what the platform, program, or language is. Furthermore, it represents the most commonly used encoding today.

## ASCII
**ASCII** (American Standard Code for Information Interchange) is one of the first widely used character encoding standards. People from the telecommunication and computing industries in America created it during the 1960s. As a 7-bit coding system, it supported 128 (i.e. 2⁷) characters, 96 printing characters, and 32 control characters. That was sufficient to encode numbers, some special characters, and the letters of the English alphabet.

However, the spread of computing and the Internet has created a need for other characters as well. As computers used 8-bit bytes, some manufacturers decided to use the remaining 8th bit in the ASCII code and thus expand the number of characters to 256. This 8-bit encoding is often referred to as “**Extended ASCII**” or “**8-bit ASCII**“. With the growth of different 8-bit encoders, data exchange became complicated and error-prone. That was a sign that it was necessary to find some universal solution that would work for all languages and cover all the special characters.

## Unicode
Unicode provides a unique code for every character, in every language, in every program, on every platform. It enables a single document to contain text from different writing systems, which was nearly impossible with earlier native encodings. Moreover, Unicode supports emojis, which are an indispensable part of communication today.
### Unicode Transformation Formats
Unicode defines several transformation formats, also known as **UTF**s (Unicode Transformation Formats). These transformation formats define how each code is represented in bits in memory. Below is a brief overview of the three UTFs that Unicode Standard provides.

- UTF-8
  - variable-length character encoding that uses from 1 to 4 bytes (from 8 to 32 bits)
  - backward compatible with ASCII
  - the most common encoding on the web (~98% of all web pages)
- UTF-16
  - variable-length character encoding that uses 2 or 4 bytes (16 or 32 bits)
  - internally used by Microsoft Windows, Java, JavaScript, etc.
- UTF-32
  - fixed length character encoding that uses 4 bytes (32 bits)
  - faster to operate but uses more memory and wastes a lot of bandwidth

## Final thoughts
Thanks to Unicode, today's software runs on a variety of languages and platforms. That was hard to imagine a few decades ago. In other words, today's software localization would be impossible without such an encoding standard.

More details regarding Unicode you can find in the [original post](https://localizely.com/blog/unicode/).
JSX Discussion.
Published: 2021-12-22 16:37:09

	JSX stands for JavaScript XML. It is simply a syntax extension of JavaScript. It allows us to directly write HTML in React (within JavaScript code). Instead of separating the markup and logic in separated files, react uses components for this purpose.
So basically JSX is a statically-typed, object-oriented programming language designed to run on modern web browsers.
The quality of applications becomes higher when being developed using JSX, since many errors will be caught during the compilation process.
Hypertext Markup Language (HTML) is the standard language for documents that determine the structure of a web page. JSX, on the other hand was created as a syntactic sugar for React.
state and props in JavaScript.
Tags: javascript, react
Published: 2021-12-22 16:33:36

	Props are used to pass data. Props are used to pass data from parent to child or by the component itself. They are immutable and thus will not be changed. Data from props is read-only, and cannot be modified by a component that is receiving it from outside.
 But State is used for mutable data, or data that will change. State is for managing data. State data can be modified by its own component, but is private so it cannot be accessed from outside the box.
How To Copy Files Quickly In Docker Images To Host
Tags: docker, howto, copy, tips
Published: 2021-12-22 16:30:47

Sometimes, there are situations where we just need to copy one or two files in the original Docker images to the host PC. For example, when we build Docker-based [LAMP](https://devtonight.com/posts/how-to-setup-a-linux-apache-mysql-php-dev-environment-on-ubuntu?utm_source=dev&utm_medium=questions&utm_campaign=how-to-copy-files-quickly-in-docker-images-to-host)/LEMP stacks, we keep web server configuration files and database configuration files externally. Then we make necessary modifications and copy them back while building the final image.

Let's assume that we wanted to copy the `nginx.conf` file in the Nginx web server Docker image into our PC. For that, first, we need to pull that image.

```
docker pull nginx
```

After that, if we clearly know the exact path and the file name, we can mention it like this. What it does is, it create a temporary Docker container using the `nginx` image. Then it prints the contents of the required file using the `cat` (concatenate) command.

```
docker run -it --rm nginx cat /etc/nginx/nginx.conf
```

Instead of printing the content of the file in the terminal, we can even put them into a file like this.

```
docker run -it --rm nginx cat /etc/nginx/nginx.conf > nginx.conf
```

## Bonus: What If You Cannot Remember The Exact Path?

Well, that is possible. We already used the `cat` command, likewise, we can also use the `ls` command the same way to list files. The following command will display the files and directories in the root directory of the Nginx Docker image.

```
docker run -it --rm nginx ls -al
```

Then you can find the path to the file by using the `ls` command again and again.

```
docker run -it --rm nginx ls -al /etc
```

```
docker run -it --rm nginx ls -al /etc/nginx
```

Now you will be able to see and copy the required file in the list.

Feel free to visit [devtonight.com](https://devtonight.com?utm_source=dev&utm_medium=questions&utm_campaign=how-to-copy-files-quickly-in-docker-images-to-host) for more related content.
Case Sensitivity in WSL. Watch out!
Tags: wsl, bash
Published: 2021-12-22 16:25:40

I recently encountered an error when deploying some new updates to a Rails Application. The error? The application could not find a missing .xml template in production, but it could on the development workstations. Even stranger - version control couldn't find any differences. 
Now, this is elementary to those using Linux to develop their software - file names and their extensions are case sensitive. When using Ubuntu under Windows subsystem for Linux, try the following in the console:
Make a directory and navigate to it.
`mkdir test && cd test`
Create a file.
`touch test.XML`
Now here is the fun part. Watch what happens when you run...
`mv test.XML test.xml`
In WSL, this is what you get:
`mv: 'test.XML' and 'test.xml' are the same file`
**Yikes!**
What's going on? Well, on the workstation that we used to create the template, somebody made a typo and typed (XML) instead of (xml) and the workstation was configured not to look for case sensitivity. There are ways to change this behavior, [per this article.](https://devblogs.microsoft.com/commandline/improved-per-directory-case-sensitivity-support-in-wsl/)
If you are using Windows and WSL and you are used to working on a Mac, take note - danger!
Angular for newbies I
Tags: angular, javascript, webdev, beginners
Published: 2021-12-22 16:13:21

## Part I
before i start talking about angular this is the first post am taking about angular and it will be series of posting to cover what is an angular and how to use it ! 

## What is an Angular ?
angular is JavaScript framework/tool that help you build interactive and rich websites 
according the angular website they defined angular is 

> A component-based framework for building scalable web applications

> A collection of well-integrated libraries that cover a wide variety of features, including routing, forms management, client-server communication, and more

> A suite of developer tools to help you develop, build, test, and update your code


oooooh! 😩 that is not a definition a beginner can understand Right? are you feeling what am feeling ? 

let's simplify what that definition means 
 
**Component Based** : it's an approach/way that focuses on developing and maintaining a reusable piece of code, it is a way we can break down our entire code into smaller pieces.

**Why do wee need to break our code into smaller pieces ?🤔**
Hmmm! Good Question ✅
because it helps us to maintain our code easily, it helps our component to stay up to date, it also helps us to fix bugs and so on ! 

All Right now we have understood what means component based  Yeeey 🙌 you earned a cup of coffee ☕️

**So what is a framework ?**
according to code academy frame work is 

> A framework is a structure that you can build software on. It serves as a foundation, so you're not starting entirely from scratch

yep you heard it right you don't need to start from scratch angular team already took care of that work  thanks to them ?

in our next post will cover what they mean libraries , routing, form management, client server communication and a lot of cryptic words 

thanks for reading it hope you liked it and tell me what to cover next in the comment section 
see you 🖐 and stay healthy 🤪
1 line of code: How to lower case a string
Tags: javascript, webdev, productivity, codequality
Published: 2021-12-22 16:09:31


```javascript
const toLowerCase = str => str.split(" ").map((m) => ${m.charAt(0).toLowerCase()}${m.slice(1)}`).join(" ");
```

---

Returns a new string in lower case. Uses spaces as delimiter.

---

## The repository & npm package

You can find the all the utility functions from this series at [github.com/martinkr/onelinecode](https://github.com/martinkr/onelinecode)
The library is also published to [npm as @onelinecode](https://www.npmjs.com/package/@onelinecode/onelinecode) for your convenience.

The code and the npm package will be updated every time I publish a new article.

---

Follow me on [Twitter: @martinkr](http://twitter.com/_martinkr) and consider to [buy me a coffee](https://www.buymeacoffee.com/martinkr)

Photo by [zoo_monkey](https://unsplash.com/@zoo_monkey) on [Unsplash](https://unsplash.com/s/photos/fuji)

---

[![Subscribe to the weekly modern frontend development newsletter](https://modernfrontend.dev/banner/banner_583-111.png)](https://modernfrontend.dev/)

---
React Custom Hooks
Published: 2021-12-22 15:45:14

As a rule, to add a specific component to your application, you can just introduce an outsider library that is made to take care of your concern. In any case, in the event that such a library or snare doesn't exist, what do you do?

As a React designer, it's critical to get familiar with the most common way of making custom snares to tackle issues or add missing highlights inside your own React projects.

In this bit-by-bit guide, I will tell you the best way to make your own custom React snares by separating three snares I've made for my own applications, alongside what issues they were made to settle.
An introduction to React component lifecycle
Tags: react, javascript, webdev, beginners
Published: 2021-12-22 15:43:16

To understand how a component in a React application is rendered, we need to first understand how the component lifecycle works. There are 3 phases in the component lifecycle –
  • Mounting
  • Updating
  • Unmounting

### **Mounting**
Mounting is the phase when the component is mounted on the DOM. In this phase the component is rendered on the webpage for the first time. There are 2 main functions in this phase –
  • **componentWillMountI()**: This function is called before render() function is called. This indicates that the component has been initialized and now ready to be mounted.
  • **componentDidMount()**: This function is called after the render() function is called thus the webpage has been loaded for the first time.
Updating
In this stage the props and state are passed down or updated then the whole webpage re-renders based on the props and states. So, in this stage the webpage might be rendered based on the cookies or based on the user preferences. One of the most common examples can be some users want to load their webpage in dark mode and some might want it to load in light mode. So, in this stage that data is passed to the component and the component is rendered based on it. There are a couple of functions which are called in this phase of the lifecycle –
  • **componentWillReceiveProps()**: In this stage the props is checked. When initially loading a component for the first time, default props are given. So, in this stage the props are checked again to see if anything is changed.
  • **setState()**: With this function the state is changed. This is not mandatory as many components might not have a state. So, if there is any state that needs to be updated is updated so that the component can re-render.
  • **shouldComponentUpdate()**: This checks the given props and states if anything has changed. So, after checking it the component gets ready to update itself if necessary.
  • **componentWillUpdate()**: So, if the component is needed an update and another render then this function is called.
  • **componentDidUpdate()**: After re-rendering the component this function is called to confirm that the webpage has been updated. So, this function is called after render() function and done executing.

### **Unmounting**
As the name suggests, in this phase the component has finished mounting and then updating as necessary and all work is finished. So, it will now unmount from the DOM. Function called in this phase –
  • componentWillUnmount(): This function is called to end the lifecycle of a React component. So, with this function the component is unmounted from the DOM.
So, following these specific phases a React component runs on the web browser and completes its lifecycle. It is important for every web developers using React to know about these basic concept if they want to create a website using React. I hope simple guide helps beginners learn about the lifecycle of a React component.
React Context API
Published: 2021-12-22 15:40:35

The React Context API has been around as a test highlight for some time now, however just in React's variant 16.3.0 did it become protected to use underway. The article beneath will show both of you essential web store applications, one worked with the Context API and one without it.

This new API tackles one significant issue prop boring. Regardless of whether you're inexperienced with the term, assuming you've chipped away at a React.js application, it has most likely happened to you. Prop penetrating is the handling of getting information from part A to part Z by going it through numerous layers of middle person React parts. The part will get props in a roundabout way and you, the React Developer should guarantee everything works through and through.
React Component Lifecycle
Published: 2021-12-22 15:39:42

We have seen up to this point that Reacts web applications are really an assortment of free parts that are run by the communications made with them. Each React Component has its very own lifecycle, the lifecycle of a part can be characterized as the series of strategies that are summoned in various phases of the part's presence. The definition is really clear however what do we mean by various stages? A React Component can carry on with four phases of its life as follows.
Initialization: Here the part is developed with the given Props and default state. This is done in the constructor of a Component Class.
Mounting: Mounting is the phase of delivering the JSX returned by the rendering strategy itself.
Updating: Refreshing is the stage when the condition of a part is refreshed and the application is repainted.
Unmounting: As the name recommends Unmounting is the last advance of the part lifecycle where the part is taken out from the page.
Dealing with Intermittent Bugs
Tags: testing, test, beginners, productivity
Published: 2021-12-22 15:37:13

This was originally posted on my personal blog: [nicolalindgren.com](https://nicolalindgren.com/2021/06/15/dealing-with-intermittent-bugs/)

Intermittent bugs can be a frustration for the entire team. You may be lucky enough to uncover it before it reaches any beta testers or you may find yourselves having to figure out what the hell happened because a customer (or several) has reported it but you are struggling to replicate it.

Here are some ideas on how to deal with intermittent bugs.

## Gather information about the bug
This can be easier said than done as you might not always have easy access to the person who came across the bug. I’ve been on the receiving end of bugs with vague descriptions and no information on OS, device, error message etc. When possible, I do try to gather the following information:

- When did it occur? (exactly what time)
- Which device?
- Which Operating system?
- Were you able to replicate it later?
- What error do you see? (exact wording)
- Screenshots
- Exactly what did you do before the bug

To be honest, I rarely receive all of this information, but I do ask for it in case I am able to get some of this information that can help narrow it down.

## Look at the logs
One of the reasons I like to ask when it occurred (exactly what time) is so I can see if anything happened in the background etc. at the same time (or around the same time) that could have caused this to occur.

Looking at the logs can also give us more information as to exactly what happened; what the issue was.

## Timebox the investigation
I find it can be easy to lose track of time and continue investigating but not get anywhere. I tend to timebox the investigation if I don’t receive any additional information.

I’ll let the product owner/delivery lead etc. know that I will look into this for X time, but also that I will park it after I have taken notes on what I have tried and what happened.

Which leads me to…

## Record what you have tried (be specific)
Just because you haven’t replicated the issue, doesn’t mean what you have tried doesn’t have any value.

I like to be specific and write exactly what I tried (when, on what device etc.) and what happened, then add these comments against the bug in the bug tracking tool.

This can help you (or someone else) later when you need to investigate the issue further if you didn’t manage to solve the mystery the first time around.


## Pair with someone
Pairing with someone means you can bounce ideas off another person. It can be easy to get stuck or hit a rut when you are trying to tackle something like this yourself.

If you pair with someone, they can give you ideas of things you haven’t tried yet and you can ask each other “what else can we try” or “what else could we be missing?”


_Do you have other ideas on how you handle intermittent bugs? What do you do when you come across them?_

[Let me know on Twitter! @NicolaLindgren](https://twitter.com/NicolaLindgren)