teleren/devto huggingface dataset:
How to use JavaScript to get elements by class name?
Tags: javascript, tutorial, beginners
Published: 2021-10-12 11:30:56

In this short tutorial, we use JavaScript to get element by class name. We break down the concept, explain the code and then discuss the limitations of the method used.

This tutorial is a part of our initiative at [Flexiple](https://flexiple.com/), to write short curated tutorials around often used or interesting concepts.

### Table of Contents - Javascript get element by class:
- [How does the class attribute work?](#how-does-the-class-attribute-work)
- [Using the JavaScript getElementByClassName() method](#using-the-javascript-getelementbyclassname-method)
- [Limitation & Caveats - JavaScript get element by class](#limitation-amp-caveats-javascript-get-element-by-class)

## How does the class attribute work?
The class attribute is an optional property of an HTML element. This attribute can be used on any HTML element. Once a class is created their name can be used by CSS or JavaScript to apply a particular style or to perform certain tasks. This ensures that all the elements belonging to a particular class behave and appear in a similar fashion.
The below code is an example of a class attribute.
```html
<h2 class="classname">Title</h2>
```
## Using the JavaScript getElementByClassName() method:
The JavaScript getElementsByClassName is used to get all the elements that belong to a particular class. When the JavaScript get element by class name method is called on the document object, it searches the complete document, including the root nodes, and returns an array containing all the elements.

The syntax is as follows:
```javascript
var elements = document.getElementsByClassName(name);
```
Here “name” is the class name you are looking to find and “elements” is a variable that would contain the array of elements.

### Code and Explanation:
Let’s take a sample HTML code:
```HTML
<header>
<nav>
        <ul id="freelancer">
            <li class="item">Name</li>
            <li class="item">Skills</li>
            <li class="item price">Cost</li>
            <li class="item">Projects</li>
        </ul>
</nav>
</header>
```
Now since we intend to look for the element in a particular section we first identify the section along with the ID.
```javascript
let docs = document.getElementByID('#freelancer');
let elements = freelancer.getElementsByClassName('item');
```
Now ‘elements’ contain the list of elements with the class name ‘item’.

## Limitation & Caveats - JavaScript get element by class:
When using the aforementioned method, note that
If you are trying to get elements with the different class names their names must be separated by whitespace and not a comma.
Class selectors cannot be used in this method.
El proceso de prueba de un sistema
Published: 2021-10-10 19:01:40

Este artículo fue creado para una tarea de la Universidad Francisco Gavidia, video de referencia: https://www.youtube.com/watch?v=wfgFcwh_EkM

El principio fundamental de una prueba de sistema es: "Asegurar que el sistema hace lo que él cliente quiere que haga"

El proceso de la prueba de un sistema se lleva a cabo con el siguiente orden de pruebas: 
![Diagrama de pruebas](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pbz89j5eirxv4f34papl.png)

Analizaremos cada una de las pruebas para conocer más sobre que se espera al utilizarlas.

## Prueba de Función
Siguiendo un esquema de caja negra, se evalúan las funcionalidades de los requerimientos funcionales ignorando la estructura del sistema, pruebas eficaces de este tipo tienen una alta probabilidad de descubrir un defecto, cuando son bien realizadas se hace prueba de una función por vez, para así evitar hacer pruebas tan grandes de múltiples funciones y no encontrar exactamente en que funcionalidad ocurrió el error. 

## Prueba de Desempeño
También conocida como de rendimiento, esta solo se debería realizar una vez te tenga la certeza que el sistema realiza las funciones que se mencionan en los requerimientos, estas se basan sobre todo en los requerimientos no funcionales y los Ings. de Hardware pueden involucrarse debido a que es necesario validar rendimiento tanto en hardware y software. 

Tienen muchos tipos de prueba como de:
- Estrés
- Volumen 
- Configuración
- Compatibilidad 
- Configuración
- Regresión
- Seguridad
- Temporización
- Medio Ambiente
- Calidad
- Recuperación 
- Mantenimiento
- Documentación
- Factores Humanos

## Prueba de Aceptación
Con los resultados de las pruebas el cliente debe revisar que lo que se ha hecho es lo correcto, independientemente de la forma que lo verifique ya sea en un sitio web o instalado en el hardware de los usuarios, la aceptación es que el cliente acepte lo que el sistema está realizando. 

## Prueba de Instalación
Se instala el sistema a los usuarios y se verifica que funcione correctamente, se considera completo una vez el cliente está satisfecho con los resultados.
Puede que no sea necesario si la prueba de aceptación se ha realizado en el sitio.
Hacktoberfest’21: Aviyel is Celebrating Open Source with Coffee & Code!
Tags: chatwoot, developers, opensource, chatbots
Published: 2021-10-12 11:21:32

To all developers and open source enthusiasts, 

Bringing you an evening full of codes and industry experts on some of the most sought-after open source projects out there. Chatwoot’s open source community is going live with Aviyel and you are invited!

Join us live for a coding session on Contributing to **Chatwoot** via **Github** by **Mangabo Kolawole**, a full stack developer and a part-time indie maker. 

Learn from the minds behind some trending open source projects (full lineup is a surprise), get exclusive Q&A with Kolawole, and boost your open source journey through hands-on experience with Chatwoot. 

By the end, we promise tons of tactics and programming, you can put into action right away. Don’t miss out, it’s October already!

Mark your Calendar: 📆 **15th October**

Time: **9 AM PST | 12 PM EST**

**Join here 📌**
https://bit.ly/3v4aGSe

Impressed? Check out the rest of our  [events](https://bit.ly/2YG9eJE) !

Let’s code together,

Team Aviyel
How to use colors in designs
Tags: design, colors
Published: 2021-10-12 11:15:18

Color is a complex tool that requires careful study. Its use has a lot to do with finding balance, and the more colors you use, the harder it is to find balance. But if you limit the number of colors to three, then the likelihood that the design will be harmonious increases significantly.
 
Rule 60/30/10
This rule is a timeless technique used by designers all over the place to balance colors. This principle helps create a sense of balance and allows the eye to perceive the design comfortably. In addition, this rule is easy to use.
60% is the main shade, 30% is the minor color and 10% is the accent.
Stay away from pure grays and blacks
In real life, you can hardly find purely gray colors. The best designers in the field always try to avoid pure gray, giving it saturation. Thus, it will look more natural and familiar to the eye.
Believe in nature
If you are faced with a choice of a color palette for a project, then the best way out of this situation would be to just look around. Color solutions that already exist in nature always look harmonious and natural.
An example of a website for a construction company we have prepared in this color scheme
 
Save Contract
In order for the work to be harmonious and at the same time stand out, it is necessary to use the rules for the interaction of colors. Because, as many years of experience have shown, it is not at all easy to choose colors on the fly that will be combined with each other. To facilitate this task, you can use the color wheel rules.
 
In the era of [web design](https://terentevdesignstudio.com/sozdanie-sajtov-veb-razrabotka/), color has become more than just a way to decorate, it has become a separate means of communication with the user. The tips above will help you find and adjust color balance. But remember that the best tool for using color is experience and practice. Without them, the use of any other aids simply does not make sense.
[Golang] Sorting String In Alphabetical Order
Tags: go, tutorial, beginners, algorithms
Published: 2021-10-12 10:54:48

In this article we are going to learn about how we can sort strings in golang the order we are going to implement is ascending order. If you are not familiar what ascending and descending order is let me explain you about it or if you knows then you can skip that part.



What is Ascending Order?
Ascending order is a method of arranging numbers from smallest value to largest value. The order goes from left to right. Ascending order is also sometimes named as increasing order. For example, a set of natural numbers are in ascending order, such as 1, 2, 3, 4, 5, 6, 7, 8… and same for the alphabets as well. The inverse method of increasing order is descending order, where the numbers are arranged in decreasing order of values.


What is Descending Order? 

If the information is sorted from highest to lowest, it is said to be in descending order. For example 10, 9, 8, 7, 6, 5, 4, 3, 2, 1 are arranged in descending order. In other words, if the numbers are arranged from the largest to the smallest number, it is said to be in descending order.

In simple words, descending order is defined as an arrangement in the highest to lowest format. These concepts are related to decimals, numbers, fractions or amount of money.

Example of Descending Order

24, 20, 18, 12, 7 are arranged in descending order.

This is also known as decreasing order of numbers.

So now we knows what is ascending and descending order then let's move forward main part which is runes.



What is Rune in Golang?
Rune literals are just 32-bit integer values (however they're untyped constants, so their type can change). They represent unicode codepoints. For example, the rune literal 'a' is actually the number 97.


We have covered all reading part which was important while we were going to code, So let's start writing code.

```
func alphasort(str []rune, depth int) {
    for x := range str {
        y := x + 1
        for y = range str {
            if str[x] < str[y] {
                str[x], str[y] = str[y], str[x]
            }
        }
    }
}
```

Checkout Here for more methods on bubble sort implementation:
https://kdsingh4.blogspot.com/2021/10/golang-sort-string-in-alphabetical-order.html

Checkout More Algorithms Solutions: https://kdsingh4.blogspot.com/search/label/algorithm?&max-results=5/feed/

Don't Forget To Subscribe My Youtube Channel as well:
https://www.youtube.com/channel/UCXhmNqWQ50zitqIdTgS7s8Q
Next js static html deployment to SSH server using Github action.
Tags: react, javascript, serverless, linux
Published: 2021-10-12 10:40:41

In this blog post we are going to be deploying a Nextjs application to an SSH server using GitHub action.

step 1:
 Create a new next js project by typing

```
npx create-next-app nextjs-blog --use-yarn
```

step 2:
Update your your build key in you package.json file to

```
   "build": "next build && next export",
```
Adding the next export enables next to build and store them in out folder, containing the static html of your app.

***
Note you can't using next methods like getServerSideprops or next image optimization with next export.

***

step 3:
we create our main.yaml file in the root of our project 

```
name: nextjs-blog
on:
  push:
    branches: main
jobs:
  build-and-deploy:
    name: Build and deploy next site
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Code
        uses: actions/checkout@v2.3.1
      
      - name: Install Node.js
        uses: actions/setup-node@v1
        with:
          node-version: '13.x'
      
      - name: Install Project Dependencies
        run: npm install
      
      
      
      - name: Build
        run: npm run build
      
      - name: Verify build
        run: ls -la out
      
      - name: copy file via ssh key
        uses: appleboy/scp-action@master
        env:
          HOST:  XXXXXXXXX
          PORT:  XXXX
          USERNAME:  XXXX
          PASSWORD: XXXXXXXXXXXXXXXXXXXX
        with:
          source: "./out"
          target: "/var/www/html/nextjs-blog"
          strip_components: 2 # this is important


```
That how you deploy a Nextjs application to SSH server using github action.Thanks for reading
Kubernetes co-founder Joe Beda interview: “Software development is a team sport”
Tags: devops, kubernetes, programming, discuss
Published: 2021-10-12 09:37:13

We recently had the opportunity to interview VMware’s principal engineer, [Joe Beda, one of the creators of Kubernetes,](https://evrone.com/joe-beda-interview) as well as the Google Compute Engine. Joe is an experienced software engineer who has worked at both Microsoft and Google. He also co-founded the cloud-native leader, Heptio, which is now a part of VMware.

We hope you enjoy the read!
My portfolio journey #1
Tags: webdev, beginners, career, css
Published: 2021-10-12 09:25:42

Hi, I'm Prince. I'm in the final year of my 3 year CS program and very soon I'll be out looking for a job. To prepare for that I thought it wise to begin creating a portfolio site and at the time of writing I am looking at some example portfolios. 

Being someone who is not very comfortable with design, UI/UX (pretty much anything that is supposed to be visually compelling) it was a pretty daunting task. I thought looking at some example sites was going to help, it did, but then I realized those sites had loads of great visual content and animations which I don't think I could implement successfully. 

This realization put me down a bit but the truth is your first portfolio doesn't have to be some out-of-earth looking thingamajig, it just has to exist. So I decided to go simple and start by making a simple wireframe of a site I was able to build from the ground up. I am going to be documenting my journey as I am advancing. I will include tips / tutorials on how I created my website and since I have no clients (yet) I will also talk about the pet projects I put on my site and what motivated my choice of them.

Wish me luck. 

PS: here are links to some resources that helped me along the way
https://www.freecodecamp.org/news/coding-projects-to-include-in-your-frontend-portfolio/
https://www.seanhalpin.design/
https://blog.jemimaabu.com/how-i-built-my-perfect-score-portfolio-website#how-to-get-a-perfect-lighthouse-score-on-your-website
How to Resize Image in NodeJS
Tags: node, resizeimage, javascript
Published: 2021-10-12 09:21:53

Hello, Today we will create a demo in nodejs where image will be resize of the required dimension. As we need to generate thumbnail images in the application where we think all aspect to improve the performace of the application. A very basic steps are needed to perform the task. In nodejs applicationi it is verydifficult to resize or compress the image while uploading with multer package(in case of uploading file to our own server).

[Click here](https://jsonworld.com/demo/how-to-resize-image-in-nodejs) to get complete working code.

##Package required
For the image compression task we will use **imagemagick** package of nodejs. So at first we have to install imagemagick in our system, I am using linux with ubuntu. **sudo apt-get install imagemagick** will install the software in our system.

 
Now create a file named server.js and create a basic app of nodejs. I am not adding much thing here in the demo to clear the actual concept for image compression task in nodejs application. So I have written very basic code in my demo. Lets have a look in code of my package.json.

```

{
    "name": "node-resize-example",
    "version": "1.0.0",
    "dependencies": {
       "imagemagick": "0.1.2"
   }
}
```

In the above file we can see that only one npm package has been installed.

Now move to the next file, server.js. Lets have a look inside it.

```
var im = require('imagemagick')
, path = require('path')
 
let convertArgs = [
'./images/tes.jpg',
'-resize',
300 + 'x' + 300,
'./images/thumbnail_test.jpg'
];
 
im.convert(convertArgs, function(err, metadata){
if (err) throw err;
 
console.log('success! Checkout your new thumb: ');
});
```

In the above file at top we have required the node packages. below that we have created a variable named convertArgs having first value as the current image second and value as the required size of thumbnail/resized images and last value as the name of the new file. At the end we call the convert method of imagemagick which  is performing the actual task. By following these easy steps we can compress/resize image in our nodejs app.

For more info visit its official site : [Click here to redirect](https://www.npmjs.com/package/imagemagick)
New Luos get started tutorial
Tags: tutorial, opensource, embedded, luos
Published: 2021-10-12 09:17:22

⭐ Curious about how Luos is easy to use? Try our new get started tutorial to get the flavor of the new way to think, create, maintain and evolve embedded systems. Luos is open-source 👩‍💻

{% youtube VcK-LJ-gnDo %}
Gestalt principles in user interface design.
Tags: design, gestalt
Published: 2021-10-12 09:12:59

How often have you, looking at the sky, happened to notice strangely shaped clouds that resemble animals or objects? How do we see intricate shapes just by looking at a fluffy drop of gas? This is how our brain works!
Awareness of this process will improve your design skills. It will teach you to condition the elements that are more effective to use in a given situation in order to influence perception, direct attention and change behavior. Create something useful, especially when looking for a purposeful, problem-solving, intuitive design;
 
Basic principles of gestalt:
Occurrence, people tend to perceive the elements in their general outlined form.
Revelation, people tend to recognize objects, even if they are not one whole.
Multistability, people often identify certain things in different ways.
Invariance, we can easily recognize simple objects regardless of their rotation, scale, color and displacement.
Gestalt principles that will help you take a fresh look at web design.
Proximity. Objects located nearby are identified as something more holistic than those that are far from each other.
It can be used in web design to organize content and lay out layouts. The correct use of this principle will affect the perception of the content and the user experience.
Closure - Several objects can be taken as something whole.
Given a sufficient number of facts and factors, we can fill the picture with missing elements. With the help of this principle, we are able to minimize the number of elements that are necessary for the correct transfer of information.
Continuation - objects that are on the same straight or smooth curve are taken as more connected than those that are scattered or located on a zigzag or dashed line.
 
Objects located on one straight line are accepted by us as something integral. The less angles and bends on the line, the more our brain unites elements.
Conclusion
[Web design](https://terentevdesignstudio.com/blog/trendy-sovremennogo-veb-dizajna-chto-nuzhno-znat/) is a means of communication between oneself and the viewer. Basically, we are talking about performance and functionality. Gestalt principles are always relevant, they help you achieve the desired results, create a pleasant experience for users and great success for your business.

https://terentevdesignstudio.com/sozdanie-saytov-nikolaev-109/
Writing Free and Open Source Software
Tags: wikidata, wikipedia, wikimedia, opensource
Published: 2021-10-12 09:05:48

---
title: Writing Free and Open Source Software
published: true
description: I work writing FOSS (Free and Open Source), yeii.
tags: wikidata, wikipedia, wikimedia, opensource
//cover_image: https://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/Wikimediadeutschland-logo.png/320px-Wikimediadeutschland-logo.png
---

It's been hectic times and I hadn't had much time to write. But here are some 2020/2021 updates: 

Since June 2020 I have been working for [Wikimedia Deutschland](https://www.wikimedia.de/) as a Fullstack Developer for the Wikidata / Wikibase team at first, and now at the [Wikidata](https://www.wikidata.org) team after the team split It has been a crazy rollercoaster of learning. I had been wanting to become a Fullstack developer for a while and this has been a great opportunity to expand my knowledge on more backendy things (will see you later  down the road beloved microservices), but also  I've learned crazy lots about Open Source Software (everything we do is open source, even [our sprint boards](https://phabricator.wikimedia.org/)!), about Creative Commons Licensing, about the inner workings of Wikipedia and its community, about the nuances of working in non-profits and a whole lot about democracy (the good, the bad and the ugly).

We usually divide the work in feature development and maintenance. I have been mostly contributing in the development of features, some examples:

- [Simple Query Bilder](https://query.wikidata.org/querybuilder). A visual interface that helps users make queries to Wikidata without the need to learn SPARQL.
- The [Wikidata Mismatch Finder](https://mismatch-finder.toolforge.org/). A tool to review mismatches between Wikidata and External Databases.
- [Wikit](https://wmde.github.io/wikit). A design system / component library for Wikibase.
- [Wikibase Reconcile Edit](https://github.com/wmde/WikibaseReconcileEdit). An Api to reconciliate items from an external database to a Wikibase instance for [Open!Next](https://opennext.eu/) an Open Hardware project funded by the EU.

More features coming up. You can find me on [Github ](https://github.com/guergana), [Gerrit](https://gerrit.wikimedia.org/r/q/owner:guergana.tzatchkova%2540wikimedia.de) and [Phabricator](https://phabricator.wikimedia.org/p/guergana.tzatchkova/). 

Support open source!
function in JS
Tags: javascript
Published: 2021-10-12 08:49:46

Guys, help me write a function in JS:

a function that will return a new array based on the existing 'features' array; the length of the new array X (a random number, but not more than the length of the existing array 'features');

function randomNumber(min, max, afterPoint) {
  if (min >= 0 && max >= 0 && afterPoint >= 0) {
    const rand = min + (Math.random() * (max - min));
    return Number(rand.toFixed(afterPoint));
  }
  return 'The range can only be positive, including zero!';
}
randomNumber(0, 10, 0);

// existing array
const features = ['wifi', 'dishwasher', 'parking', 'washer', 'elevator', 'conditioner'];