teleren/devto huggingface dataset:
What are the 5 pillars of information security?
Tags: informationsecurity, datasecurity
Published: 2020-08-07 06:39:13

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/26brb41l4xt9qrqal3m3.png)

Information is a valuable resource for any company in this digital world. Due to strong competition in business, you must provide your information as securely as possible so as not to give your competition some form of advantage. Therefore, information security is paramount for your business to ensure that no amount of information is compromised.

Information sent over online networks is vulnerable to malicious attacks. Therefore, it is necessary to create a secure information system to protect vital data. Building a secure system follows five essential pillars.

**Five pillars to take into account when securing information:-**

**Confidentiality**

Confidentiality is the most vital part of information security. If the information or data transmission is over the network, you must use a coded language that can only be deciphered by the sender and recipient of the information. Third parties must not be able to decrypt the data under any circumstances. The right people should only see highly confidential information.

**Data and information integrity**

The information submitted is believed to always remain in its original nature. It should not be changed during the transmission process. Tampering or tampering by unauthorized agents should not be allowed. An effective [information security](https://www.cloudanalogy.com/) system provides a method to ensure that data is not tampered with. For example, many companies and businesses use hash signatures, which helps verify the non-manipulation of the information received.

**Availability**

The availability of information means that only qualified persons who have access to the system can obtain the information at any time and without fail. It can be enabled by having a strong framework that constitutes the IT infrastructure. This ensures that the system remains fully functional even during adverse situations such as database failures. Having excellent resources ensures that information is accessible in a convenient and timely manner. The typical way to ensure data availability is to have load balancers that ensure that server resources do not fail.

**Authenticity**

Authentication measures prevent identity theft and require users to provide proof that they are authorized to access the system and resources. It is essential because it establishes the validity of the information transit and its origin. The conventional way of ensuring authenticity includes the use of reliable passwords, user names, and biometric data, among others.

**Non- Repudiation**

This is an essential part of information security, as it confirms the delivery of data to the sender. The recipient can also verify the identity of the sender of the information. Between the two agents, no one can deny the sending or receiving of the data. This means that there should be some form of audibility. The information security system provides records that can be opened to provide evidence of who sent and received the data.
How to apply CSS class in Javascript?
Tags: webdev, javascript, css, beginners
Published: 2020-08-07 06:34:38

This post was originally published at https://www.blog.duomly.com/6-most-popular-front-end-interview-questions-and-answers-for-beginners-part-3/#how-to-apply-css-class-in-javascript

---

{% youtube K4ilZGuj1PQ %}

DOM manipulation is definitely the skill that you need to have if you’d like to be a successful front-end developer, especially if you’d like to work with UI, as for example, UI developer.

Whole DOM manipulation is a huge topic, and I’ll be showing you the most popular methods in time to time in the Front-End Interview Questions series.

Especially in PART 3, we’ll talk about that even a few times.

Whole DOM manipulation is a kind of resource-hungry stuff, and if you can, you should go forward with the stuff like virtual DOM, but sometimes you need to do it with the normal DOM anyway.

In the previous section, I’ve shown you how you can manipulate with classes by using jQuery, but what if you don’t want to use jQuery in your project, and you need to do it with pure JS?

You need to know how to do it!

Let’s see on the code example.

As the first step, we need to select the element that we’d like to modify.

In this case, I’ve added an id to the element that is kind of comfortable to select, because the method “getElementById” returns only one element.

Next, when we have selected elements, we can use the method “setAttribute” and define attribute type as “class”, the value we can setup however we want.

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Learn coding on Duomly.com</title>
  </head>
  <body>
    <div id="hero">
      This is hero element
    </div>
    <script>
      const hero = document.getElementById("hero");
      hero.setAttribute("class", "rounded");
    </script>
  </body>
</html>
```

<a href="https://www.duomly.com/?code=lifetime-80">![Duomly - Programming Online Courses](https://dev-to-uploads.s3.amazonaws.com/i/bde89cw4h64z765g2l4r.png)</a>

Thank you for reading,
Radek from Duomly
State Management...follow
Tags: mithril, meiosis, mergerino
Published: 2020-08-07 05:53:05

Let's Mithril do it's magical 'autoredrawing'

```js
// https://github.com/pakx/the-mithril-diaries/wiki/Model-Management-with-Meiosis

/* @jsx m */

const merge = mergerino;

const state = { count: 0 };
const update = m.stream();
const states = m.stream.scan(merge, state, update);
const actions = Actions(update);

const App = { view: () => app(states(), actions) };
m.mount(document.getElementById("app"), App);

function app(states, actions) {
  const { up, down, increment } = helpers(actions);
  return (
    <div>
      <div>{states.count}</div>
      <button onclick={increment(up)}>inc</button>
      <button onclick={increment(down)}>dec</button>
    </div>
  );
}

function helpers(actions) {
  return {
    up: 1,
    down: -1,
    increment: (direction, incr = 1) => () => 
      actions.onclick(direction * incr)
  };
}

function Actions(update) {
  return {
    onclick: onclick,
  };
  function onclick(incr) {
    update({
      count: (value) => value + incr,
    });
  }
}

```
You can test it here [MithrilMeiosis](https://flems.io/#0=N4Igxg9gdgzhA2BTEAucD4EMAONEBMQAaEAMwEskZUBtUKTAW2TQDoALAF0fmPSk6IBqEAB585AG4ACcvgC8AHRA5sygHyiA9BMnq+eJGE7lo1NAAYUARgCcIAL5F6TFiFYAraiUgChnES0taS5OXBQggHNyTnYAVwAjVkhGLWxMAGsADy1YxABaRhj2ACdKfIlMMsQYLQB3cgzyLQBZCHxEeHyWzAZIxGYBfIbY7sRTGHIYRSgZrQAqaQABLyzpRml54JmZ3xhOdcQS-ul5Q+Oj8igIHag9g-3MQVPpaWBIOIEUaQsHXbMDnFsPgnogXoxWPsSogmAAKACUAG5-rAHpxQTBwZDONCmJCwL1YcwLkRpI9BKSgSDBPCUftpJhjKZYC8AIJMsywqmg2mzO4A6Ss7DYF7ASTkRB1b4I07qBnC2HkmoI0mMkxmeF-KAQxgQT6cWH4CBgOKDTisfqcACiSDNACEAJ4ASXwsOUqmU8NJQuwvJmpE+HKg8uwivRghgqqDMHhbxmr3ubyBpKNdSgpKuYGhZocL3YnWwRxgsLVzJj8ek0M4cRKwbdwde0nEUnUFcbTd06mASpgyT1Agc2k7bcbogScU4nGg0mgYHg5DAGVFmez-i5voc6kz2nHk+grYb7bHE6nwdn88Xy7uq4Ehogac16g6YB3J-3I6HLYrvK1-sD6uDfN4ELEpMRLaNYzeaQKyrGtg2AEcgWkb5rCIEdUygb58lQkcVwGfxkOkQ1yGhIMM2vF5rFjeQ5RHV4ZRohlo1Yc8FwyYjSIAzZZGvWMKy1X8oADO4uPZACwO5Gk4wbWDa2k9tWMXb5FIyfiK2EoMZzuC8l1hFdYwQw9pEkxBYUM9sE37ThpUkTB4DiRBqLlWz7LBABqHisxHBxeVeATbj4FJsEoI4RASTAEk6AxOkQaMRGsawUAAFgADkcZwQAYZgRGSGBvH4QRhDQRwAF0SHnKAMnMOhMtcERiX6Mprj4GteDQUJwiCT5sAySI+1SBrLmuJYLFYJLWAsHQpk4LRBqaiBWBqABWVgiigTx8s4B1CxEGAs3IbAAicFxsrQIpYjKXgSFakQOpgCItG63r+tm4pLqWAAmCaxtei7KFWq4Nr4LadrQPaykO9KTrcc7SnKKEYUYFqSjakA7oep6+pSX64a6BGmE+77JvxiEvGB7a3HBg6jrK2rTpAFpihacYIEcIA)
CSS Only Tooltips
Tags: css
Published: 2020-08-07 05:51:46

Today we will be building some tooltips with nothing more than `CSS`. The idea is we hide the tooltip, and we will show it once hovering over the div.

> Note: These tooltips must have a fixed width to work!

## HTML Structure

As for the HTML, we use the following setup:

```html
<div class="skills">
  <div class="skills-item">
    <span class="tooltip">HTML5</span>
    <!-- Content -->
  </div>
  <div class="skills-item">
    <span class="tooltip">CSS3</span>
    <!-- Content -->
  </div>
  <div class="skills-item">
    <span class="tooltip">JavaScript</span>
    <!-- Content -->
  </div>
</div>
```

This will give us a basic grid like setup!

## CSS Only Tooltips

As for the CSS which is going to be the main part of this article, we will use some basic styling to style the boxes next to each other.

```css
.skills {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  max-width: 50vw;
  margin: 0 auto;
  height: 100vh;
  align-items: center;
}
.skills-item {
  background: #fff;
  padding: 10px;
  margin: 5px;
  position: relative;
  border-radius: 5px;
}
```

This is our basic template; we are using a basic grid solution and center the elements.

Let's now style the tooltip:

```css
.skills-item .tooltip {
  width: 100px;
  background-color: #555;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  position: absolute;
  z-index: 1;
  bottom: 100%;
  left: 50%;
  margin-left: -50px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s;
}
```

The main important parts here lay in the default hidden structure; we also add a `transition` so it will animate once we hover.

Now we will also add a small triangle in the center, just a touch of extra `CSS`

```css
.skills-item .tooltip:after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}
```

So now let's move on to making it actually show!

```css
.skills-item:hover .tooltip {
  visibility: visible;
  opacity: 1;
}
```

That's it. We can now view our awesome tooltip in action.

View it on Codepen.

<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="html,result" data-user="rebelchris" data-slug-hash="LYNEYEv" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSS Only Tooltips">
  <span>See the Pen <a href="https://codepen.io/rebelchris/pen/LYNEYEv">
  CSS Only Tooltips</a> by Chris Bongers (<a href="https://codepen.io/rebelchris">@rebelchris</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/evu5sxi0m88si452ti6v.png)

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
What’s new in Web Payments
Tags: webpayments, webdevlive
Published: 2020-08-07 06:49:16

---
title: What’s new in Web Payments
published: true
date: 2020-08-07 05:42:12 UTC
tags: webpayments,webdevlive
canonical_url: https://medium.com/@agektmr/whats-new-in-web-payments-9e14718f8c38
---

![](https://cdn-images-1.medium.com/max/1024/1*4LWtsGNZ1GeGL09462_1Xg.jpeg)

It’s been a while since my previous post, but Web Payments team at Google including myself have been commited to work on improving it. Some may wonder what’s giong on with it, so let me share my talk at an online event called “web.dev LIVE” which Google’s Web DevRel team organized early July 2020.

{% youtube ZXmKKV7R72c %}

It’s a short video, but it contains:

- Recap of Web Payments
- How it works
- Status update
- Upcoming features

Most importantly, we’ve published a set of documentation that explains how to build a native and a web-based payment app in detail.

[web.dev](http://web.dev/payments/)

Integrate Web Payments into your payment app

- [Empowering payment apps with Web Payments](https://web.dev/empowering-payment-apps-with-web-payments/)
- [Life of a payment transaction](https://web.dev/life-of-a-payment-transaction/)
- [Setting up a payment method](https://web.dev/setting-up-a-payment-method/)

Build a native payment app

- [Android payment app developers guide](https://web.dev/android-payment-apps-developers-guide/)
- [Providing shipping and contact information from an Android payment app](https://web.dev/android-payment-apps-delegation/)

Build a web-based payment app

- [Web-based payment apps overview](https://web.dev/web-based-payment-apps-overview/)
- [Registering a web-based payment app](https://web.dev/registering-a-web-based-payment-app/)

…And more articles are coming!

If you are interested in building a Web Payments compatible payment app, let me know.
Zoom App cloned!!
Tags: node, devops, github, git
Published: 2020-08-07 05:16:02

Recently, I completed my project on zoom app cloning. It is almost a clone of zoom app. Build with node, express, web sockets.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/zxd7azg21v1jkq0lahf1.jpg)
<ul>
<li>
Stop video
</li>
<li>
Mute audio
</li>
<li>
Chat feature
</li>
</ul>

<h3>Concept</h3>
It uses uuid to make new links so if user want to communicate he/she can send that unique link to ones whom to communicate. It makes separate rooms on the basis of unique links.

Please give ur suggestions and feedbacks. 
Thanks and Cheers!!

<a href="https://zooomgs.herokuapp.com/" target="_blank">App link</a>

<a href="https://github.com/GauravSingh9356/Zoom-Clone" target="_blank">GitHub Code</a>
5 Clever tips on CSS
Tags: css, tutorial, codenewbie, codepen
Published: 2020-08-07 04:54:41

The 5 cleverest CSS tips I have collected in the last few months.

## Clamp

Perfect for `font-size`, for example. Replace most of your media-queries for it with that.

### What does it do?
Sets a value between lower and upper bounds. It‘s like setting up `min`/`max` values and a relative in between.

Open this pen in a new tab and resize the screen horizontally to see it at work.

{% codepen https://codepen.io/atilafassina/pen/OJyKEbq %}

## Emoji as icons

I’ve come across this and used it most as fun experiment. But recently I have used in small standalone side-projects. Where a just wanted to quick and dirty add an icon for visual feedback.

### How to do it?

Set your `<span>` to be transparent, and then use `text-shadow` to show the silhouette of the icon.

❗️ Remember to add `role="img"` and an `aria-label` to the `span`

{% codepen https://codepen.io/atilafassina/pen/yLYmOPV %}

## Everything can be a list

Every wrapper element can have a counter, and using pseudo-elements (`::before`, `::after`) it’s quite easy to make them like an order list without being restrained by the `list-style` property. You can also reset the counter at will and start counting from whichever point you want.

❗️ Only recommended in very specific use-cases, always prefer the semantically correct tag. If you do use this technique, be sure to address a11y concerns!

{% codepen https://codepen.io/atilafassina/pen/BaoXKPy %}

## Object Fit

Defines how an image or a video will fit in its container.

### What is it good for?

It is extremely useful to preserve aspect-ratio of images on galleries or other kinds of lists.

Play around with the different values it can receive in this pen.

{% codepen https://codepen.io/atilafassina/pen/dyYxRWx %}

## Second Argument of `text-decoration`

Such a basic well-known property. Though I usually only see it being used with a single value while it actually is a shorthand to **4** others.

- line
- style
- color
- thickness

This pen emphasis the usage of the second argument. Which you can, in fact, combine multiple values such as `underline overline`. Both are style values but they do not override each other if declared together.

{% codepen https://codepen.io/atilafassina/pen/ExVqKJL %}

## 💌

In case you have found this post useful, please consider [sharing it with your network](https://twitter.com/intent/tweet?text=I enjoyed this article on @ThePracticalDev: https://dev.to/atila/5-clever-tips-on-css-1i0h by @AtilaFassina), that would help me a lot to continue sharing posts like this and others. 😁

---

What about you? What’s a clever CSS feature that you like to use or have recently found out about? Let me know in the comments!! 🏆

---

Cover Photo by [davisco on Unsplash](https://unsplash.com/photos/5E5N49RWtbA)
LeetCode 541. Reverse String II (Javascript solution)
Tags: algorithms, javascript
Published: 2020-08-07 04:54:30

###Description:
Given a string s and an integer k, reverse the first k characters for every 2k characters counting from the start of the string.

If there are fewer than k characters left, reverse all of them. If there are less than 2k but greater than or equal to k characters, then reverse the first k characters and left the other as original.

```javascript
var reverseStr = function(s, k) {
    // strings are immutable in javascript
    // converting to an array will allow in place letter swapping
    const a = s.split('');
    // loop through the array in 2*k increments
    for (let start = 0; start < a.length; start += 2 * k) {
        let i = start;
        let j = Math.min(start + k - 1, a.length - 1);
        // reverse first k characters in current increment
        while (i < j) {
            let tmp = a[i];
            a[i++] = a[j];
            a[j--] = tmp;
        }
    }
    // return a string as the result
    return a.join('');
};
```
My DevOps Videos for July 2020 📺
Tags: devops, docker, kubernetes, 100daysofcode
Published: 2020-08-07 04:41:56

July has been jam packed with many DevOps and software engineering videos. 

I cover Terraform with Azure AKS and planning to do a lot more Terraform coverage in the future

{% youtube bHjS4xqwc9A %}

How I deploy monitoring components for Kubernetes in 10 minutes
{% youtube abq-6FBn0fo %}

Jenkins on AWS EKS, the easy way!
{% youtube eqOCdNO2Nmk %}

K8s Kustomize: Simplifying YAML on Kubernetes
{% youtube 5gsHYdiD6v8 %}

GitOps with Flux CD
{% youtube OFgziggbCOg %}

K8s Persistent Volumes
{% youtube ZxC6FwEc9WQ %}

Intro to GKE
{% youtube -fbH5Qs3QXU %}
Money Moves
Tags: rails, finance, resources
Published: 2020-08-07 04:29:41

Rake, and routes, and resources, oh my!

For my Flatiron School Module 3 (Rails) project, I decided to build something that showcased one of my interests - personal finance. During this COVID-19 pandemic, I think it's more important than ever for people to understand their finances and to have the resources to further their financial education.

This app was fun to build, as I was able to highlight influencers in the personal finance space through featuring Twitter accounts, showcasing a couple of books, and by directly featuring blog posts in the app.

This project took me through learning how to use a Bootstrap template, using the incredibly helpful Rails (and Devise) helper methods, and learning more about git and database management. I got the opportunity to revisit my old friends APIs and parsing from Module 1, with more experience, and it was gratifying. 

My biggest takeaways from this project, however, were:
- A more personal understanding more of what the seasoned devs are always talking about: becoming a better dev can be, and will be, done through getting better at Googling
- Sleeping or taking a break is your best debugging tool
- You can never do too much planning

As always, I had big ideas for this project, and wanted to incorporate so much more! I look forward to the rest of the curriculum and expanding my knowledge and skill set!

Happy coding!
FINALLY! Start your GitHub Actions manually!
Tags: github, actions, automation, devops
Published: 2020-08-07 04:07:38

The possibility to manually trigger a workflow in GitHub Actions is probably one of the most requested features ever.

People have tried to achieve that with some _workaround_, using APIs or other custom triggers... but now we finally have the __official way to manually trigger an Actions workflow__.

### The Video

Today we talk about a long awaited feature in GitHub Actions that is finally here: the __manually trigger__.

Not only you can add the new trigger and enable the "_Run Workflow_" button, you can also customize the experience using custom ___input values___!

And I'm gonna show you how, right now.

Enjoy the watch!

{% youtube uNYDgUBClYY  %}

### Conclusion

I'm super happy we finally have this feature! And as you have seen it is very, very easy to use.

What do you think of it? How do you plan on using it? __Let me know in the comment section below__.

### References and Links

- [GitHub Actions Showcase](https://youtu.be/msCWg2F4sck)
- [Video on GitHub Actions for .Net Framework](https://youtu.be/g8tdrB3kbDU)
Building GUI for your shell script using zenity
Tags: bash, linux
Published: 2020-08-07 04:01:07

---
title: Building GUI for your shell script using zenity
published: true
description: 
tags: bash, linux
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/4ygxu02eh6qe62i8hmso.png
---

Sometimes the shell scripts that you write asks questions to the user so that they could change the some default value. We usually do this as text input. But for values like date, file path etc.. it would be nice if you show a calendar or a file picker.

There is a really nice command called **zenity**. Which allows you to build simple GUI for your shell script. Making your shell script more user friendly.

Let's say you want user to select a date you can do

```bash
$ zenity --calendar
```
and it will return you selected date as string

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5s2xtmfbvtrur7hwtjz7.png)

and for a file selection you can simply do

```
$ zenity --file-selection
```

When your shell scripts finishes you can notify the user using

```
$ zenity --notification --text "script completed"
```

**zenity** can do much more and it is has been out there for a while and it is available for most Linux distributions and even for other OS like Mac and Windows (but you may need to install them separately)

**Edit:** You can look for more details about all the options that **zenity** provides by runinng
```
$ man zenity
```
Useful Laravel Blade Directives
Tags: laravel, php, webdev
Published: 2020-08-07 03:52:13

Laravel Blade Directives are syntactic sugar functions that hide the underlying complex and ugly code. This make code more readable and clear.

Blade includes lots of built-in directives. But, this tutorial will help you with laravel blade directives that you’ll often reach out during your time in laravel.

## 1. Check whether the user is a guest or not using blade directive

This helps to check if the user is a guest i.e., not an authenticated user. For this purpose we use:

```
@if(auth()->guest())
    // The user is not authenticated.
@endif
```

To make this even easier, the blade provides us with @guest a directive. This helps to write code in a much shorter way.

```
@guest
    // The user is not authenticated.
@endguest
```

## 2. Check if the user is authenticated or not using blade directive

To check this, we can use the code given below:

```
@if(auth()->user())
    // The user is authenticated.
@endif
```

The above code works fine but as a programmer, we should always look for easy and shorter ways to write code. For that purpose, laravel provides blade directive which is @auth.

```
@auth
    // The user is authenticated.
@endauth
```

To combine the two directives we can use else:

```
@guest
    // The user is not authenticated.
@else
    // The user is authenticated.
@endguest
```

## 3. Include first view if it exists else include second view

Most of the websites nowadays have multiple themes. This might require us to include a file if it exists else include another file. We can easily achieve this by using laravel:

```
@if(view()->exists('first-view-name'))
    @include('first-view-name')
@else
    @include('second-view-name')
@endif
```
We can write the above code in much easier and shorter way with blade.

```
@includeFirst(['first-view-name', 'second-view-name']);
```

You can continue this post on https://laravelproject.com/useful-laravel-blade-directives/