teleren/devto huggingface dataset:
Centering in CSS - Horizontally, Vertically
Tags: css, html, beginners, webdev
Published: 2021-07-06 07:39:21

Centering Things in CSS is a bit hard. The problem is which way to reach for among the different ways available to **Center Elements** in CSS. In this tutorial, I have explained how to center an element with CSS Vertically, Horizontally, at Block Levels.

## How to center horizontally?
Centering elements horizontally is quite simple compared to vertical centering. We have present different ways to center the elements horizontally. To change the text to center horizontally is quite simple. You can simply set the text-align property to center in order to center an element horizontally.
```css
p { 
  text-align: center; 
}
```

## How to center horizontally with flexbox?
The modern way to center anything is to use Flexbox rather than going with the text.
```css
#mysection { 
  display: flex; 
  justify-content: center; 
}
```
Any element within my section will be centered horizontally by using the above code. There is an alternative method to go with if you don't want to use the flexbox.

## How to center horizontally using CSS margin auto?
Anything which is not text can be centered by applying an automatic margin on the left and right and set the width of the element.
```css
section { 
  margin: 0 auto; 
  width: 50%; 
}
```
The above `margin: 0 auto;` is a shorthand for
```css
section { 
  margin-top: 0; 
  margin-bottom: 0; 
  margin-left: auto; 
  margin-right: auto; 
}
```
Do remember to set the item to `display: block` if it is an inline element.

## How to Center Vertically using Flexbox?
Centering an element vertically can be a difficult task. Flexbox gives us a simple way to center alignment vertically.
```css
#mysection { 
  display: flex; 
  align-items: center; 
}
```
Any element within my section will be centered vertically.

## How to Center Both Vertically and Horizontally using Flexbox?
You can combine the flexbox techniques to center both vertically and horizontally for an element in the page.
```css
#mysection { 
  display: flex; 
  align-items: center; 
  justify-content: center; 
}
```

## How to Center Vertically and Horizontally using CSS Grid?
We can perform the same using CSS Grid:
```css
body { 
  display: grid; 
  place-items: center; 
  height: 100vh; 
}
```
Pop!_OS 21.04 on Zephyrus G14 (Ryzen 5)
Tags: linux, popos
Published: 2021-07-06 07:27:04

Happy to report that - the latest Pop!_OS 21.04 is working without any glitches on G14.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bigt5qigt9s028x2t9vi.png)
* Audio, Video, and Mic are working without glitches
* Google Chrome and Firefox browsers work with hardware/GPU video decode support
* Screenshare, Video conferencing Apps are working without glitches especially using Chrome
* Battery Life is as good as Windows if not a bit more
* Graphics mode switching between AMD & NVIDIA is seamless
* Gnome 4 is performing without bugs and exceptions - unlike Fedora 34
* Trackpad gestures animations aren't smooth.
Howto use Docker Agent in a Jenkinsfile Matrix Build
Tags: jenkins, docker, php
Published: 2021-07-06 07:04:35

---
title: Howto use Docker Agent in a Jenkinsfile Matrix Build
published: true
description: 
tags: jenkins, docker, php
//cover_image: https://direct_url_to_image.jpg
---
There is one simple tutorial that I was looking for on the web, and I could not find it.

So I wrote it myself.

Jenkins has matrix builds, and Jenkins has agent docker for builds inside a docker image.

Combined, these features make it easy to test a project with multiple versions of PHP for example.

So here is the simple example I came up with: Put this in your Jenkinsfile and you are done.
```
pipeline {
    agent none
    stages {
        stage('Test') {
            matrix {
                agent {
                    docker { image "${DOCKER_IMAGE}" }
                }
                axes {
                    axis {
                        name 'DOCKER_IMAGE'
                        values 'php:5.3', 'php:5.6'
                    }
                }
                stages {
                    stage('Test') {
                        steps {
                            sh 'php --version'
                        }
                    }
                }
            }
        }
    }
}
```
Please let me know if it helps you 😊

## Learning more

Testing your software in different environments is a best practice for software engineering.

If you like this article: I am writing a book about best practices for legacy code projects:

[Leading a Legacy Software Team](https://softwareteambook.tk/)
Learn About React DatePicker in 5 Minutes
Tags: react, datepicker, webdev, component
Published: 2021-07-06 07:00:11

Learn how easily you can create and configure the Syncfusion [React DatePicker](https://www.syncfusion.com/react-ui-components/react-datepicker "React DatePicker") using the create-react-app command. This video also explains how to configure a few of the control’s basic features like setting specific date values, formats, and range restriction for date selection.

Download an example from GitHub:
http://bit.ly/3v1VXXQ

Refer to the following documentation for the Syncfusion React DatePicker: 
http://bit.ly/3rh10kJ

Check out this online example of the React DatePicker: 
http://bit.ly/3qeaP1A

{% youtube B7LvXEwgTyw %}
SQL queries through REST available now!
Tags: sql, database
Published: 2021-07-06 06:40:15

```bash
curl -X POST \
-d '[
      {
         "EMAIL" : "dwain.jonhson@gmail.com",
         "FIRST_NAME" : "Dwain",
         "LAST_NAME" : "Jonhson",
         "USERNAME" : "dwainjonhson"
      }
]' \
https://${USER}:${TOKEN}@localhost:50443/database/my_app/tables/users/rows
```

```bash
curl https://${USER}:${TOKEN}@localhost:50443/query?q='select * from my_app.users;'
```

```json
{
   "status" : 200,
   "rows" : [
      {
         "TRID" : 1,
         "EMAIL" : "jason.statham@gmail.com",
         "FIRST_NAME" : "Jason",
         "LAST_NAME" : "Statham",
         "USERNAME" : "jasonstatham"
      },
      {
         "TRID" : 2,
         "EMAIL" : "dwain.jonhson@gmail.com",
         "FIRST_NAME" : "Dwain",
         "LAST_NAME" : "Jonhson",
         "USERNAME" : "dwainjonhson"
      }
   ]
}
```

```sql
siocli> select * from my_app.users;

TRID   EMAIL                       FIRST_NAME     LAST_NAME     USERNAME
------ --------------------------- -------------- ------------- --------------
     1 jason.statham@gmail.com     Jason          Statham       jasonstatham
     2 dwain.jonhson@gmail.com     Dwain          Jonhson       dwainjonhson

Row(s): 2

Elapsed time: 15 ms.
```

**Available in the cloud** => https://datahub.siodb.io

Start your next app with Siodb, 100% encrypted, 100% automated.
Implemented in few minutes through REST API.

P.S. Let me know your feedback :)
Battery Conductance Testing at BCL Power
Tags: management, powerfuldevs, testing
Published: 2021-07-06 06:37:44

<b>Battery Conductance Testing</b>

Battery conductance is a rapid and repeatable electrical measurement that determines the ability of a battery to transmit current readily through its internal electro-chemical structure. It provides a direct relationship to <a href="https://www.bclpower.co.uk/services/ups-battery-installations/">ups battery</a> power parameters.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4m7jcp7axqgk2cq28ics.png)

Battery conductance is measured by evaluating the voltage response to a small select frequency AC current signal briefly impressed on the battery. The resultant conductance measurement provides pertinent battery information without the need of bringing the battery to full discharge.

<b>READ MORE:</b>
<a href="https://www.bclpower.co.uk/battery-conductance-testing-bcl-power/">https://www.bclpower.co.uk/battery-conductance-testing-bcl-power/</a>
Count the triplets
Tags: algorithms, twopointer, solution, geeksfogeeks
Published: 2021-07-06 06:30:11

> problem statement : https://practice.geeksforgeeks.org/problems/count-the-triplets4615/1#

Given an array of distinct integers. The task is to count all the triplets such that the sum of two elements equals the third element.
 

Example 1:
```
Input:
N = 4
arr[] = {1, 5, 3, 2}
Output: 2
Explanation: There are 2 triplets: 
1 + 2 = 3 and 3 +2 = 5 
```

Example 2:
```
Input: 
N = 3
arr[] = {2, 3, 4}
Output: 0
Explanation: No such triplet exits
```
Your Task:  
You don't need to read input or print anything. Your task is to complete the function countTriplet() which takes the array arr[] and N as inputs and returns the triplet count


> **Expected Time Complexity: O(N<sup>2</sup>)**

> **Expected Auxiliary Space: O(1)**

Constraints:
1 ≤ N ≤ 103
1 ≤ arr[i] ≤ 105

Solution Contains : 
- Solution using HashMap [space complexity O(n)]
- Solution using 2 pointers [space complexity O(1)]

## Solution using HashMap
This solution is in java 
```
import java.util.*;

class Solution {
    int countTriplet(int a[], int n) {
        // code here
        int cnt = 0;
        HashMap<Integer, Integer> map = new HashMap<>();
        // value -> index
        
        for(int i = 0; i < n; i++) {
            // since it is distinct so no need to worry about duplicate values
            map.put(a[i], i);
        }
        
        for(int i = 0; i < n; i++) {
            for(int j = i + 1; j < n; j++) {
                Integer found = map.get(a[i] + a[j]);
                if(found != null && found != i && found != j)
                    cnt ++;
            }
        }
        
        return cnt;
    }
}
```

## Solution using two pointers
```
import java.util.*;
/**
 * We will check for each number and say wether it could be decomposed into 2
 * such that those 2 numbers after addition ends up being the source number.
 */

// complexity :  
// 		time  : O(n^2)
//		space : O(1)

public class TwoPointerSolution {
	int countTriplet(int a[], int n) {
		// code here
		int cnt = 0;
		Arrays.sort(a);
		for(int i = 0; i < n; i++) {
			cnt += decompose(a, a[i], 0, i-1);
		}
		return cnt;
	}
	int decompose(int[] a, int source, int from, int to) {
		if(to >= a.length || from < 0 || from >= to) return 0;
		int cnt = 0;
		while(from < to) {
			int testSum = a[from] + a[to];
			if(testSum > source) {
				to--;
			} else if(testSum < source) {
				from++;
			} else {
				cnt++; // inc. count
				to--;    // shrink window
				from++;  // as every elemet is distinct.
			}
		}
		return cnt;
	}
}
```
HTML tags | h1-h6
Tags: html, tags, heading, h1
Published: 2021-07-06 05:58:46

They are used to **create headings** in the document, with the `<h1>` being the most important and the `<h6>` being the least. You do not have to use them thinking about how they look, but control the design with CSS.

Elements cannot be skipped (`<h1>`-`<h2>`-`<h4>`) and there can only be one `<h1>` per document.

As there is no [actual implementation of the outline algorithm](https://adrianroselli.com/2016/08/there-is-no-document-outline-algorithm.html) or forecast of it in any browser or assistive technology, it is better to use them in descending order, as always, instead of nesting `<h1>` inside `<section>` or `<article>`.

It is the [main tool to discover information](https://webaim.org/projects/screenreadersurvey8/#finding) using assistive technologies, so **it is very important to take care of them** so that the page is accessible.

- Type: *block*
- Self-closing: *No*
- Semantic value: *No*

[Definition and example](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements) | [Support](https://caniuse.com/mdn-html_elements_h1)
🦊 GitLab Cheatsheet - 6 - Registry
Tags: gitlab, tutorial, devops, cheatsheet
Published: 2021-07-06 05:53:28

This cheatsheet speaks about GitLab Registry.

<a href="https://jeanphi-baconnais.gitlab.io/img/cheatsheet/GitLabCheatsheet-6-Registry.jpg" alt="6 - GitLab Registry" target="blank">
<img src="https://jeanphi-baconnais.gitlab.io/img/cheatsheet/GitLabCheatsheet-6-Registry.jpg" alt="6 - GitLab Registry" />
</a>

I will create others cheatsheet. Tell me if you have comments or suggest about those cheatsheet 😃.
The Power Of Power BI
Published: 2021-07-06 05:44:17

Power BI is a tool for data modeling and visualisation. 
It can connect to various sources like SQL Server, Vertica, Business Central etc.

But what most impressed me is the web data source. It's basically a web scraper that can extract tables from web pages. This is a very powerful feature which allows you to bring data from web pages that you can visualise and model along with your data warehouse source.

Let’s see Power BI in action on a stock market data example.
We are going to import tables from [this page](https://www.barchart.com/stocks)

If you don’t have it already, download [free Power BI desktop version](https://powerbi.microsoft.com/en-us/downloads/)

Launch Power BI, click on Get data and find Web data source
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ytmhz8hemzvee1c8fjv5.PNG)

Enter url https://www.barchart.com/stocks
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kxc83btb1yujccwkgsr5.PNG)

Select table and click Load
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9676ysth9maof27auoqz.PNG)

Visualise and model data

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bkny049e8kvejz4og0ig.PNG)
What is Cloud Computing?
Tags: aws, cloud
Published: 2021-07-06 05:44:10

In this article, I will explain what Cloud Computing is, and the differences between Cloud Providers and On-Premise. 


### What is Cloud Computing?
 - The practice of using a network of remote servers hosted on   
   internet to store, manage, and process data, rather than on 
   a local server on a personal computer.

<hr/>


### On Premise vs Cloud Providers

Before Cloud Computing existed, you had to have your own servers, data centers, maintain them physically, hire people to rack, stack and power those servers. 

**On Premise**

<ul>
    <li> You own the servers. </li>
    <li> You hire the IT people. </li>
    <li> You pay for the real-estate. </li>
    <li> You assume all the risk. </li>
</ul>

**Cloud Providers**

With Cloud Computing, you pay the cost of utilizing a cloud provider and they do all the work for you! It's amazing, isn't it? 

<ul>
   <li>Someone else owns the servers. </li>
   <li> Someone else hires the IT people. </li>
   <li> Someone else pays for the real-estate. </li>
   <li> You are only responsible for configuring the cloud 
        services and the code that you deploy. Everything 
         else is handles by someone else. </li>
Git Branch Files
Tags: git, vscode, webdev, codequality
Published: 2021-07-06 05:33:15

As a developer, we need to open the files in the VS code editor while switching the branch. But it creates too much frustration if we are doing this continuously. Each time we have to give **'cmd+p'** and type the file name to open the particular file.

So I thought something like, *'why can't we open our files for the current branch in a single click instead of opening the files one by one?'.*

For that, I have created the extension named **'Git Branch Files'** to achieve this requirement.
It has two functionalities.

### 1. Open the files for the current branch.
   It will open the files for the current branch.
![open-files](https://user-images.githubusercontent.com/31626278/124465851-88446400-ddb3-11eb-9a0e-4d2e8c0e954e.gif)
### 2. Close the current and open the files for the current branch.
It will close all active files(For example, files from the previous branch) and open the files for the current branch.
![open-close-files](https://user-images.githubusercontent.com/31626278/124466014-c2156a80-ddb3-11eb-98dc-3e0a4ef7a155.gif)

For more information kindly refer to [this](https://marketplace.visualstudio.com/items?itemName=AlwarG.git-branch-files).

Repo Link: https://github.com/AlwarG/git-branch-files
Extension Link: https://marketplace.visualstudio.com/items?itemName=AlwarG.git-branch-files

Thank you for reading this post 🙏. I Just tried what I know. Feel free to post your comments if you want to share something.
Post #2 : It's better late than never
Tags: python, weeklyretro, twitter, gsoc
Published: 2021-07-06 05:27:18

Hi again! It's been some days since my last post. This post must have been posted last week, shame on me.

<img alt"Shame on me meme" src="https://media.giphy.com/media/LQv5qSTo8lXVvPammo/giphy.gif"/>

Despite that, it's better late than never. This is the second post of the series posts to my GSoC internship for the Python Software Foundation PSF, if you want to see more about what I am doing this summer check out the previous posts, and I hope that you enjoy them.

That week I was working on finishing the problems in the lessons as I said in the previous post. I didn't know the actual status of them, however, it turned out they didn't have so many problems, but with serious issues of indentation, and code styling.  I had done [7 PR's](https://github.com/PyAr/PyZombis/pulls?q=is%3Apr+author%3Ay-martinez+created%3A2021-06-21..2021-06-27+) and I want to announce that they have been successfully merged, but they were still waiting for the mentors' review last Monday, with those I just only needed to finish solving an issue to finish my first milestone of the summer before the first evaluation.

<img alt="Almost close" src="https://media.giphy.com/media/R2m2NzVxQ3pbG/giphy.gif" />

Besides that, I forgot in my previous post to tell you that I applied to get a [Twitter developer account](https://developer.twitter.com/en) because for the second milestone maybe it will be great to introduce an exercise using that API. The process was a little tedious since I had to respond to several questions regarding how and why I was going to use the Twitter API, explaining the specific details as much as I could. To summarize, if you want to get one, keep in mind the following inquiries that will be made to you:

- The core use case, intent, or business purpose for your use of the Twitter APIs.
- If you intend to analyze Tweets, Twitter users, or their content, share details about the analyses you plan to conduct, and the methods or techniques. 
- If your use involves Tweeting, Retweeting, or liking content, share how you’ll interact with Twitter accounts, or their content.
- If you’ll display Twitter content off of Twitter, explain how, and where, Tweets and Twitter content will be displayed with your product or service, including whether Tweets and Twitter content will be displayed at row level, or aggregated.

After of responded to all these inquiries correctly, I received this email:

![Twitter Developer Account](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i4a91a5q8ccd27toh6yt.png)

So I got my Twitter developer account successfully. I am using its API with a Postman collection. I struggled to get my access to the token, but I resolved with the [docs page](https://developer.twitter.com/en/docs/twitter-api). I could get some tweets from my Twitter account, it was great. This experiment gave me an idea for an exercise to implement in the next milestone. I need to investigate more but I keep an eye on it.
To-Do List vs. Task Management Software- What Does Your Company Need the Most?

Tags: productivity
Published: 2021-07-06 05:16:34

SMBs (Small and Mid-sized Businesses) have many challenges and limitations to deal with, and one of them is finding the right task management software. Here, it is necessary to identify essential features that can fit their budget. Also, the to do list & task management tool needs to be easy to use even for non-technical team members.
These days, technology advances to manage simple and complex projects effectively through a project tracking tool or task management software. Even to-do lists also offer some useful features to users. Altogether, project managers and entrepreneurs find it difficult to select the right software for their companies. With this, SMBs have no time to review tens of hundreds of available products to ensure that they do not waste money and effort by selecting the wrong software.

We have compared a to-do list and task management software in this blog to help you understand their scope and importance. Our focus remains on the requirements and team sizes of startups and SMBs. Let’s start with the to-do list.

<h3>Comparison between To-do List and Task Management software</h3>
<h3>- To-do List</h3>
A To-do list is software designed to make task management simple and easy. It is ideal for individual entrepreneurs for managing repetitive tasks. Mostly, to-do lists are cloud-based applications that offer apps for mobile and tablet for enabling users to get quick and seamless access to their tasks. The best thing about the to-do list is it does not require any learning curve.

<h3>Core features of a to-do list software are-</h3>
<h4>1. Build and Share</h4>
It is easy to make and share a to-do list to yourself and colleagues.

<b>Original Source : <a href="https://www.taskopad.com/blog/to-do-list-vs-task-management-softwares/">To Do List</a> </b>
Windows file Server (Amazon FSx)
Tags: aws, cloud, beginners, devops
Published: 2021-07-06 05:13:21

We studied AWS EFS which provides file storage for our Linux instances but for windows or MacOS there is AWS FSx. It is a windows native shared file system  which is built on Windows File server. It provides NTFS and SMB protocols for filesystems which are needed for windows. You can access Amazon FSx from Windows, Linux, or MacOS compute instances and devices running on AWS or on premises. Its also available across AZ and is cost effective too.

## FSx for lustre

Amazon FSx for lustre is used when we need a very high performance. It easily scales upto millions of IOPS and sub ms latencies.

Its mainly used in financial modelling, machine learning, analytics etc.

With this we have studied the various types of storage available on EC2. Next we will study how to use S3.
EC2 instance store(Physical high IOPS hard drive for AWS)
Tags: aws, cloud, beginners, devops
Published: 2021-07-06 05:06:06

We studied about network drives in the last two parts of the series (EBS). What if we need an actual physical drive connected to our EC2 instance. For that we use EC2 instance store. Some drives are connected to EC2 they are called Ec2 instance store. These are used when we need very high performance on our disk, these disks may provide up to millions of IOPS for our EC2 instance.

The first question that comes to mind is why are they not the default storage that are connected to our EC2 store. They have some drawbacks as listed below:-

1. These lose there storage once the EC2 instance is turned off
2. You have to maintain your own backups 
3. The data is also lost on hardware failures.
4. All these things make them good only for cache, temporary content

All in all EC2 instance store is very fast but is not very reliable. So, use it carefully.