teleren/devto huggingface dataset:
About .innerText
Tags: javascript, beginners
Published: 2022-12-04 12:51:12

Today I decided to create a dev blog, because I found something that I wanted to write down as I was studying Javascript.

I hope this is something that future I will be laughing at because it's such a stupid mistake.

So, I wanted to make a delete button right beside a to-do-list created.

```js
function paintTodo(event) {
    const li = document.createElement("li");
    const button = document.createElement("button");
    toDoList.appendChild(li);
    li.appendChild(button);
    button.innerText="X";
    li.innerText=event;
}
```
This will not work, because **.innerText removes all of the node's children and replaces it with the text.** So, you have to do this instead:

```js
function paintTodo(event) {
    const li = document.createElement("li");
    const span = document.createElement("span");
    const button = document.createElement("button");
    toDoList.appendChild(li);
    li.appendChild(span);
    li.appendChild(button);
    button.innerText="X";
    span.innerText=event;
}
```
You have to create a separate tag, in this case span, that will handle the to-do-list text. The button will be under li, unaffected by the .innerText=event.
Qualidade, testes e desenvolvimento
Tags: programming, discuss, braziliandevs, productivity
Published: 2022-12-04 12:31:17

Na maioria das vezes, quando falamos em qualidade no desenvolvimento de software, ou citamos a pessoa QA, pensamos em alguém que tem única e exclusivamente o papel de mapear os cenários de testes, testar nossa aplicação e encontrar bugs que eventualmente acontecem após a entrega do código.

A questão é que pensar em qualidade e testes não tem que ser uma função de uma única pessoa, deve ser algo comum a todos do time. Qualidade é uma cultura a ser construída dentro das equipes.

Nas experiências que já tive, entendo que pensar na qualidade vem desde a primeira discussão de uma ideia. Onde isso tem impacto, quais são os cenários desejáveis, o que não queremos que aconteça são algumas das perguntas que tem que ser feitas ainda nesse momento para podermos elaborar os cenários de testes.

Aqui um adendo: caso o time tenha a presença de uma pessoa QA, entendo que ela tem que participar desde esse primeiro momento junto com a tech lead. Caso o time não tenha uma pessoa QA, no meu entendimento, a tech lead, tem que conseguir mapear esses cenários. Uma vez que entendo que QA é cultura, no cenário ideal, todas no time devem ter capacidade para mapear estes cenários, porém a realidade não é o meu cenário ideal.

Porque eu penso que todas no time tem que ter essa mentalidade? Uma vez que garantimos que todas as desenvolvedoras conseguem pensar na qualidade do código, nos cenários corretos e errados, essas pessoas também conseguirão escrever testes, unitários, e2e e funcionais mais eficazes, aumentando a segurança no momento do deploy, diminuindo o risco de bug em produção e a velocidade de resposta para eventuais correções ou implementações.

Por fim, sempre lembrando que não vivemos no cenário que eu julgo ideal, o time de negócios também precisa ter esse olhar de qualidade. É importante que as histórias tenham escopo bem definido e critérios de aceite objetivos. Esses critérios de aceite podem ser exatamente os cenários de testes que esperamos de uma funcionalidade.

Qualidade é cultura e deve ser papel de todos no time, pensar na qualidade do código e da entrega para o usuário final. Essa obrigação não é apenas da QA.
two ways to change ip address in Linux
Tags: linux, cloud, cloudskills, tutorial
Published: 2022-12-04 12:26:46

**Question**:
What is the most efficient way to configure an IP address on a Linux system with multiple network interfaces? 

**Answer**:
The most efficient way to configure an IP address on a Linux system with multiple network interfaces is to [use the Network Manager utility](https://access.redhat.com/documentation/en-us/red_hat_enterprise_linux/7/html/networking_guide/getting_started_with_networkmanager). 

This tool allows you to easily set up and manage your network connections on a Linux system, including assigning static IPs to multiple interfaces.

 It can also be used for troubleshooting networking related issues, such as diagnosing problems with DHCP servers or configuring VPNs. 

Additionally, Network Manager is capable of automatically detecting and connecting to WiFi networks as well as configuring advanced network settings such as DNS server addresses, default gateways, and custom routes. 

The utility can be accessed through the graphical user interface (GUI) or command line interface (CLI). With Network Manager, configuring the IP address of a Linux system with multiple network interfaces becomes much simpler. 

Alternatively, you can also use the ifconfig command to [manually configure static IP addresses](https://www.howtouselinux.com/post/linux-command-change-ip-address-in-linux) on each interface or edit your /etc/network/interfaces file to set up static IPs as well. However, this method is not as user-friendly as using Network Manager. 

.
Hoverable Card with CSS
Tags: html, css, webdev, codepen
Published: 2022-12-04 12:25:33

Hello Everyone today i will show you a hoverable Card created with CSS.What it does is,it will show the contacts icons at the bottom when we hover over the card.

Let's get started...

* What i did is , i created a card component with a heading,a paragraph, a button and contact links at the bottom.
* Contact icons are hidden with opacity set to 0.
* They will be visible only when we hover over the card.I used the hover pseudo class with descendend selector

```css
.card:hover .bottom-links{
    opacity:1;
}
```
* It says when we hover over the card, then make the container with class bottom-links opacity to 1, making it visible

{% codepen https://codepen.io/shubhamtiwari909/pen/GRGYJqV %}

You can contact me on -
Instagram - https://www.instagram.com/supremacism__shubh/
LinkedIn - https://www.linkedin.com/in/shubham-tiwari-b7544b193/
Email - shubhmtiwri00@gmail.com

^^You can help me by some donation at the link below Thank you👇👇 ^^
☕ --> https://www.buymeacoffee.com/waaduheck <--

Also check these posts as well
https://dev.to/shubhamtiwari909/css-iswherehas-and-not-2afd

https://dev.to/shubhamtiwari909/theme-changer-with-html-and-css-only-4144

https://dev.to/shubhamtiwari909/swiperjs-3802

https://dev.to/shubhamtiwari909/going-deep-in-array-sort-js-2n90
Objects and Constructor in JS
Tags: javascript, object, constructor, beginners
Published: 2022-12-04 12:15:37

1.Create a dog object that has four properties and three methods

`let dog={}
dog.breed='puddle'
dog.color='golden'
dog.legs= 4 
dog.name='Fido'
dog.barking = function(){
    console.log('No barking')
}
dog.slepping = function(){
    console.log('no sleep')
}
dog.behaviour = function(){
    console.log('need to play daily')
}`

**CONSTRUCTOR ********************
2.Create a Tony Hawk Pro Skater constructor that makes fighting game characters with 4 properties and 3 methods

 `function TonyHaukCharacter (chName,chStance,chSponsor,chStance){
    this.characterName = chName
    this.stance = chStance
    this.sponsor = chSponsor
    this.specialMove = chMove
    this.flip = function(){
        console.log('Kickflip!!')
    }
    this.taunt = function(){
        console.log('Don"t make me use my $'{this.specialMove})
    }
    this.grab = function(){
        console.log('MELON GRAB')
    }
 }`

**//LET`S CREATE A CHARACTER NOW:**

`let kareemKampbell = new TonyHaukCharacter ('Kareem', 'Goofy','Element','Ghetto Bird')`

 // We capitalize the T on TonyHaukCharacter because of the constructor,to understand that is a constructor 
 // chName,chStance, chSponsor,chMove are parameters "function TonyHaukCharacter (chName,chStance,chSponsor,chStance)"
// We use 'new' to make a new object
Better "docker ps" for small monitors
Published: 2022-12-04 12:13:04

The output of "docker ps" often becomes really confusing on small screens (1080p or smaller).

So i created a wrapper python script that solves that problem.


## Before


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

## After

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

## Script

`/root/bin/docker-ps`:
```python
#!/usr/bin/python3

import os
import subprocess
import json

class bcolors:
    HEADER = '\033[95m'
    OKBLUE = '\033[94m'
    OKDARKGRAY = '\033[90m'
    OKCYAN = '\033[96m'
    OKGREEN = '\033[92m'
    WARNING = '\033[93m'
    FAIL = '\033[91m'
    ENDC = '\033[0m'
    BOLD = '\033[1m'
    UNDERLINE = '\033[4m'


command = "docker ps --format '{\"ID\":\"{{ .ID }}\", \"Image\": \"{{ .Image }}\", \"Names\":\"{{ .Names }}\", \"Status\":\"{{ .Status }}\", \"CreatedAt\":\"{{ .CreatedAt }}\", \"Ports\":\"{{ .Ports }}\"}'"

output = subprocess.check_output(command, shell=True).splitlines()
print("")

for entry in output:
    entry_json = entry.decode("utf-8")
    entry_json_object = json.loads(entry_json)

    id = entry_json_object["ID"]
    names = entry_json_object["Names"]
    status = entry_json_object["Status"]
    created = entry_json_object["CreatedAt"]
    image = entry_json_object["Image"]
    ports = entry_json_object["Ports"]
    print(f"{id}\t{bcolors.WARNING}{names}{bcolors.ENDC}\t ({bcolors.OKDARKGRAY}Status: {status}, Created At: {created}{bcolors.ENDC})")
    print(f"  {bcolors.BOLD}Image:{bcolors.ENDC} {image}")
    print(f"  {bcolors.BOLD}Ports:{bcolors.ENDC} {ports}")
    print("")

```
The Script is also available as a [GitHub Gist](https://gist.github.com/MaaxGr/0d6fc6c1fc1b7a345802f9c33b55df27).


In `.bashrc` i override the "docker ps" command with the script:
```
function docker() {
  case $* in
    ps ) shift 1; command /root/bin/docker-ps ;;
    * ) command docker "$@" ;;
  esac
}
```

## Alternative Idea

Just display the columns that are important to you:

e.g.:
```
docker ps --format "table {{.ID}}\t{{.Names}}\t{{.Ports}} "
```
Do You Make These Simple Mistakes In Software Testing?
Tags: testing, softwaretestin, webdev, beginners
Published: 2022-12-04 12:06:58

Yes, it is possible to make simple mistakes in software testing. Common mistakes include not testing for all possible scenarios, not testing for edge cases, not testing for compatibility with other software, not testing for security vulnerabilities, and not testing for performance. Additionally, not having a clear set of test objectives and not having a comprehensive test plan can lead to mistakes. Finally, not having a good understanding of the software and its requirements can lead to mistakes in software testing.

## What to do about it?

To avoid making mistakes in software testing, it is important to have a clear set of test objectives and a comprehensive test plan. Additionally, it is important to have a good understanding of the software and its requirements before beginning testing. It is also important to test for all possible scenarios, edge cases, compatibility with other software, security vulnerabilities, and performance. Finally, it is important to use automated testing tools to help ensure that all tests are completed accurately and efficiently.

By following these tips, it is possible to reduce the chances of making mistakes in software testing.
how to use react context?
Tags: react, reactnative, javascript, contex
Published: 2022-12-04 12:01:08

React's Context API allows you to share values such as state or data between components without passing props down manually through every level of the component tree. This can be especially useful when you have some values that are needed by many components in your application.

To use the Context API, you first need to create a context using the createContext() method from the **react** package. This method returns an object with two components: **Provider** and **Consumer**.

```js
import { createContext } from 'react';

const MyContext = createContext();
```
The Provider component is used to provide a value for the context, which can then be consumed by the Consumer component. The Provider component should be placed at the root of your component tree, wrapping the components that need access to the context value.

```js
import MyContext from './MyContext';

function App() {
  return (
    <MyContext.Provider value="Hello World">
      <MyComponent />
    </MyContext.Provider>
  );
}
```
In the example above, the value "Hello World" is provided for the MyContext context. This value can then be consumed by the MyComponent component, or any other component nested inside it, using the Consumer component.

```js
import MyContext from './MyContext';

function MyComponent() {
  return (
    <MyContext.Consumer>
      {value => <p>{value}</p>}
    </MyContext.Consumer>
  );
}```

The Consumer component expects a function as its child, which will be called with the current context value. The function should return a React element that uses the context value. In the example above, the context value is used to render a p element with the value inside it.

You can also use the useContext() hook from the react package to consume the context value inside a functional component.

```js
import { useContext } from 'react';
import MyContext from './MyContext';

function MyComponent() {
  const value = useContext(MyContext);
  return <p>{value}</p>;
}
```

The useContext() hook takes the context object as its argument and returns the current context value. You can then use this value inside the component.

It's also possible to update the context value using the useState() hook inside a component that is a descendant of the Provider component. This can be useful for implementing state management using the Context API.

```js
import { useContext, useState } from 'react';
import MyContext from './MyContext';

function MyComponent() {
  const [value, setValue] = useState(useContext(MyContext));

  function handleClick() {
    setValue('Hello World!');
  }

  return (
    <>
      <p>{value}</p>
      <button onClick={handleClick}>Update Value</button>
    </>
  );
}
```

In the example above, the context value is initially set to the value provided by the Provider component using the useContext() hook. A button element is then rendered with an onClick event handler that updates the value using the setValue() function from the useState() hook
What is react hooks ?
Tags: webdev, javascript, react, beginners
Published: 2022-12-04 11:47:54

React hooks are a new feature introduced in React 16.8 that provide a way to manage state and side effects in functional components. Prior to the introduction of hooks, managing state and side effects in React required the use of class-based components, which can be verbose and difficult to understand.

Hooks make it possible to write functional components that have the same capabilities as class-based components, without the need for complex class logic. This allows for cleaner, more concise code that is easier to read and maintain.

One of the key benefits of hooks is that they allow you to reuse stateful logic between different components. This can help reduce duplication and make your code more modular and maintainable.

To use hooks in a functional component, you simply need to import the hook you want to use from the **_react_** package, and then call it within the body of your component. For example, the **_useState_** hook can be used to add state to a functional component, like this:

```
import React, { useState } from 'react';

const MyComponent = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times.</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
};
```

In this example, the **_useState_** hook is used to add a **_count_** state variable to the **_MyComponent_** functional component. The **_useState_** hook returns a tuple containing the current value of the state variable and a function for updating it. In this case, we destructure the tuple into **_count_** and **_setCount_** variables, which we can use to read and update the **_count_** state.

In addition to the **_useState_** hook, React also provides a number of other hooks for managing state and side effects, such as **_useEffect_** for managing side effects and **_useContext_** for accessing context data.

Overall, React hooks provide a powerful and flexible way to add state and side effects to functional components, making it possible to write cleaner, more concise React code. If you haven't tried using hooks yet, I highly recommend giving them a try in your next React project.

## Conclusion

I hope this blog post provides a helpful overview of React hooks and their benefits. You can learn more about hooks on the React website (https://reactjs.org/docs/hooks-intro.html) and in the React documentation (https://reactjs.org/docs/hooks-overview.html).
What is ACID Transaction? ELI5
Tags: javascript, programming, beginners
Published: 2022-12-04 11:47:09

ACID transactions are a way of organizing actions in a computer so that they are correct and consistent. ACID stands for Atomicity, Consistency, Isolation, and Durability, and it helps to ensure that actions are completed successfully, and that the data in the computer is accurate and reliable.

Imagine you are playing a game of basketball with your friends. You are all working together to score as many points as possible, and you are taking turns shooting the ball into the hoop. Without ACID transactions, it would be difficult to keep track of who scored which points, and to make sure that the score is accurate and fair. But with ACID transactions, you can use special rules and procedures to organize the game and keep track of the score.

For example, let's say you are playing a game with three friends, and you are using a scoreboard to keep track of the score. With ACID transactions, you can use the following rules to ensure that the game is played correctly and consistently:

Atomicity: Each shot is an atomic action, which means that it is completed successfully or not at all. This means that if someone shoots the ball and misses, the shot is not counted, and the ball is passed to the next person.

Consistency: The game is played according to a set of rules, which ensures that the score is calculated correctly and consistently. This means that if someone shoots the ball and makes it, the correct number of points is added to their score.

Isolation: Each person takes their turn independently, without interference from the other players. This means that when one person is shooting the ball, the other players cannot touch the ball or interfere with the shot.

Durability: The score is recorded on the scoreboard, and it is not lost or erased. This means that even if the game is interrupted or the scoreboard is reset, the score is preserved and can be used to determine the winner of the game.

Overall, ACID transactions are a helpful way of organizing actions in a computer, just like the rules and procedures of a game help to ensure that the game is played correctly and consistently.
Mongogram - Social media backend api using golang and mongodb
Tags: atlashackathon22, mongodb, atlas, go
Published: 2022-12-04 11:41:26

---
title: Mongogram - Social media backend api using golang and mongodb
published: true
description: My submission to the MongoDB Atlas Hackathon 2022 on DEV!
tags: atlashackathon22,mongodb,atlas, go
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d852tuukx06zisp28q9p.png
---


## What I built
I have build an open source social media backend api server using Golang, Gofiber and Mongodb native driver.



### Category Submission:
Think Outside the JS Box


### App Link
https://github.com/harshmangalam/mongogram-api

### Description
Mongogram backend api build using mongodb driver and golang.
I have utilize gofiber which is based of fasthttp - fastest http server written in go and alternative to go http. I have implemented these features in mongogram

- Authentication
    - Login
    - Signup
- Accounts
    - Change password
    - Deactivate account
    - Update profile
    - Reset password
- Media
    - upload media in gridfs
    - Fetch media from gridfs

- Search
    - Atlas search
    - Fetch recent searches
    - Clear specific recent search
    - Empty recent searches

- Post
    - Create new post
    - Fetch post lists
    - Fetch post details

- User
    - Follow user
    - Unfollow user
    - Fetch user lists
    - Fetch current user 
    - Fetch user profile

 

### Link to Source Code

{% embed https://github.com/harshmangalam/mongogram-api %}


### Permissive License
MIT
https://github.com/harshmangalam/mongogram-api/blob/main/LICENSE


## Background
Golang is getting popularity now a days in web and serverless. Many of the serverless , network related tools and libraries are developed using golang. Even ecosystem of go is getting mature day by day and with great open source developer community support on stackoverflow and DEV community. You can find wide variety of open source project and documentation related to go.
To develop any backend api we utilize language specific framework from where you expect better developer experience go have many backend framework that you can utilize to create api ie. Gorilla mux, Echo, Gofiber, Gokit etc...
Many database provide native drive support like Mongodb, Sqlite, Redis etc... 
Golang have great concurrency support using channels and can scale to millions with little effort.



### How I built it
I have utilize Mongodb Cloud to store documents related to users data and posts.
I have added search support for users profile in mongogram using mongodb atlas search.
I have utlize mongodb gridfs to store media chunks and files metadata.
Mongodb provide native go driver which have great support for vast majority of latest mongodb api.


### Additional Resources/Info
https://www.mongodb.com/
https://www.mongodb.com/docs/drivers/go/current/
https://university.mongodb.com/
https://gofiber.io/
https://github.com/valyala/fasthttp
https://github.com/gofiber/fiber
https://awesome-go.com/database-drivers/
Skill matters...
Tags: layoffs, develop, programming
Published: 2022-12-04 11:39:33

In upcoming years DSA and CP will not be able to save you. Already some big product based companies are laying off their employees. If you stop enhancing your knowledge and skills, then you can be the next. So try to master one techstack and learn 2-3 more along with it but no need to focus it much. Happy coding :)