teleren/devto huggingface dataset:
Editing Kubernetes Secrets Inline
Tags: kubernetes, devops, vim, tutorial
Published: 2020-07-12 18:20:22

We work a lot with Kubernetes and when you're working with `Secrets` it can be a total pain to edit them. A standard workflow can be something like.

```bash
# Grab the existing secret
kubectl get secret some-secret -o yaml > some-secret.yaml

# Grab the existing secret
kubectl get secret some-secret \
  -o jsonpath='{ .data.secret }' \
  | base64 -D > thesecert.txt

# Edit the secret
vim thesecret.txt

# Grab the new secret and put it into the secret file
# and apply it to the cluster
cat thesecret.txt | base64 | pbcopy
vim some-secret.yaml # paste in your b64 encoded secret
kubectl apply -f some-secret.yaml
```

That's not a great user experience and what if you wanted to use `kubectl edit`?

There's a bit of vim foo you can use to edit the secret in line.

```bash
kubectl edit secret some-secret

# navigate to the base64 encoded secret
# place your cursor on the space between the ":"
# and the first character of the secret
# hit `r <enter>` this replaces the space
# with a new line

# move your cursor down one line to the secret
# in the command prompt `:. ! base64 -D`

# Edit your secret

# in the command prompt `:. ! base64`
# if your secret is multiline you can 
# use `:<startline>,<endline> ! base64`
# or you can highlight the lines in visual
# mode and use `:! base64`

# Join the lines by moving back up the secret key
# and hitting `J`

# Then write quit `:wq`
# you should see this as output
# `secret/some-secret edited`
```

![Editing a secret inline](https://dev-to-uploads.s3.amazonaws.com/i/bb07eo42inrg8zug8mh3.gif)

And if you want to edit a multiline secret say one that was created from a file. Rather than `base64` encoding the current line using `:.` you can use a range of line numbers `:13,84 ! base64` and you will encode all those lines together inclusive of line 84.



> edit: added info about multiline secrets

### Update

I wanted to add one more tip here - pesky new lines.

If you're editing a secret and you use `. ! base64` you will end up with a newline character at the end of your secret. If that's ok... cool if not you can use `tr` to clean it out

```bash
. ! tr -d '\n' | base64
```
Get the value of a CSS variable in JavaScript
Tags: javascript, css
Published: 2020-07-12 18:19:18

---
title: Get the value of a CSS variable in JavaScript
published: true
description: 
tags: javascript, css
---

I use CSS variables for color values all the time, and I often want to replicate them in JavaScript for charts and other graphics. Instead of copying the colors, I use this function:

```js
function getCssVar (varName) {
  return getComputedStyle(document.body)
   .getPropertyValue(`--${varName}`)
}
```
Build Rating System for your react native app
Tags: reactnative, javascript, react, opensource
Published: 2020-07-12 17:56:20

On your mobile, when you do a google search for “restaurants near me” or you end a Uber ride or you search for movie on IMDB or a product on amazon - One thing you look for or expect an app to have is **RATING SYSTEM**.

A rating system is more than just an UI element. It’s an investment from your users. Rating system serves different purpose for different apps:

* It helps **personalising content for user**. For ex. if you do a google search, based on ratings you can filter list.
* Helps user in **decision making**. For ex. user confused between 2 products on eCommerce mobile app.
* A tool to **collect user’s feedback**.

As we have covered the importance of a Rating System, Let’s see how to build one for our mobile app using React Native.

## [react-native-rating-element](https://www.npmjs.com/package/react-native-rating-element)
I created a simple rating library for react native supporting:
* **decimal points** like 3.7, 4.2 etc,
* **direction aware icons** (supports RTL, bottom to top etc),
* **custom icon** set from Ionicons,
* **custom images**
* and interact and **record rating given** by users.

### Installation
Use the package manager npm or yarn to install react-native-rating-element.
```
npm install react-native-rating-element
yarn add react-native-rating-element
```

### Usage
After installing it, head towards your component file and simple import it at the top and then inside your render() method, you can call `<Rating />` and pass desired props.

These props can be modified to suit your UX.

```
import { Rating } from "react-native-rating-element";

<Rating
  rated={3.7}
  totalCount={5}
  ratingColor="#f1c644"
  ratingBackgroundColor="#d4d4d4"
  size={24}
  readonly // by default is false
  icon="ios-star"
  direction="row" // anyOf["row" (default), "row-reverse", "column", "column-reverse"]
/>

**Custom Image, onIconTap and bottom to top direction**
<Rating
  rated={3.7}
  totalCount={5}
  size={42}
  onIconTap={position => console.log(`User pressed: ${position}`)}
  direction="column-reverse"
  type="custom" // default is always to "icon"
  selectedIconImage={require('./filled.png')}
  emptyIconImage={require('./empty.png')}
/>
```

You can find [API documentation here](https://github.com/ui-ninja/react-native-rating-element#api).

### Output
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/tmcaa7zenz9gc2gijjxw.gif)

Please go ahead and checkout my first [open source library](https://github.com/ui-ninja/react-native-rating-element#react-native-rating-element). It’s a small effort to contribute to this amazing JAVASCRIPT world. Whatever I am today, it is possible because of all free learning tutorials and open source packages out there in our ecosystem.
Cydia Package Depiction
Tags: codepen
Published: 2020-07-12 17:48:40

<p>A basic responsive and template for Cydia package depiction pages. It reacts to Cydia useragent strings via JavaScript to allow for differing web browser and Cydia browser views.</p>

<p>Within the <code>head</code> tag settings is the script that performs the useragent check. When viewed inside Cydia the root <code>html</code> tag receives a <code>.cydia</code> class, and the relevant CSS styles are applied (i.e. the <code>header</code> and "View in Cydia" button do not appear).</p>

{% codepen https://codepen.io/travis-g/pen/mywWyq %}
LINK YOUR GITHUB PROFILE AND GET HIRED
Tags: jobs, coders, github
Published: 2020-07-12 17:43:00



<a href="bit.ly/2NbSVLS">CodersRank</a> is a platform made to help developers in job-seeking and professional growth. Find a developer job on <a href="bit.ly/2NbSVLS">CodersRank</a>: Your CodersRank profile serves as a proven track record of your coding knowledge. Just connect your private and public repositories to generate your true profile.

If you are looking for a #remote 🌴 developer job, check this out:

<a href="bit.ly/2NbSVLS">CodersRank</a> can help you get matched with a relevant job: just add your job preferences to your profile! 👨‍💻👩‍💻

Login/register here: <a href="bit.ly/2NbSVLS">Coders Rank</a>
#codersrank101 #jobsearch #remote


#codersrank101: The more info you provide on your profile, the better your chances of finding your dream job! 💼

Add YOUR Tech Stack today! <a href="bit.ly/2NbSVLS">Add Your Stack</a>

Create your always up-to-date 360-degree coder profile and let your work speak for itself!
Join CodersRank now!  <a href="bit.ly/2NbSVLS">Coders Rank</a>
Six Sigma Belts 🥋
Tags: sixsigma, beginners, javascript, productivity
Published: 2020-07-12 17:27:27

A Six Sigma project uses `“Belts”` to help define the roles of people on the team.   

---

### **Six Sigma White Belt** 

> A Six Sigma **“White Belt”** is an entry-level certification for those individuals who need to have a basic understanding of what Six Sigma is.
> These individuals are not involved in a Six Sigma project but may work in a company or department going through a Six Sigma process improvement.

<br>

### **Six Sigma Yellow Belt**

> A Six Sigma “Yellow Belt” is typically a _**subject-matter expert**_ (SME) in a particular subject or area of the business being reviewed.  These members are generally not involved with the Six Sigma project directly. Instead, they may provide information and assistance to Green Belts (as subject matter experts) so that they can better understand a particular segment of the business.

<br>

### **Six Sigma Green Belt**

> A Six Sigma _**“Green Belt”**_ is an employee who takes on a  Six Sigma implementation project along with his or her other job responsibilities, operating under the guidance of Black Belts.
> A Green Belt works to understand which business processes are not performing as needed, identify root causes of problems, analyze and improve contributing factors, and sustain gains in those improvements.

<br>

### **Six Sigma Black Belt**

> A Six Sigma _**“Black Belt”**_ has knowledge of Six Sigma philosophies and principles and leads a team during a Six Sigma project. They must have both leadership and project management skills to be successful.

<br>

### **Six Sigma Master Black Belt / Champion**

> A Six Sigma _**“Master Black Belt”**_ is in charge of training Black Belts and Green Belts in Six Sigma processes. They are also a go-to reference for ideas and theories during a project.  Master Black Belts typically have years of experience as a Black belt, before taking on the Master Black Belt role.
> A _**Six Sigma Champion**_ is a senior executive within the organization whose role is sponsoring specific projects. They have the authority within the organization to allocate resources for the project.

---

### **Six Sigma Belts 🥋 Levels**

![Six Sigma Belts](https://res.cloudinary.com/techlead/image/upload/v1594575223/Dev.to%20posts/him5lihcd5zssj5bqhfk.png)

---
Introduction to animation with CSS
Published: 2020-07-12 17:21:28

I've been working on a twitch overlay and animating items has become an important part of it. 

![Bits Badges](https://dev-to-uploads.s3.amazonaws.com/i/wgu7firj4x0kxrxh3z97.png)

These are the badges I've created when people donate bits. The gold outline is on the latest donation. But I do not simply want it to populate on the screen, I want it to be more obvious for viewers that a donation is coming in.

This is where the 'animation' and '@keyframes' attributes come into play. To create the animation, we will be using keyframes. Here is how it is written:

``` 
@keyframes [name-of-animation]{
      from {
          [starting-point]
      }
      to {
          [ending-point]
      }

    }
```
You can write it with 'from' and 'to' or you can also do it with percentages: 

``` 
@keyframes [name-of-animation]{
      0% {
          [starting-point]
      }
      50% {
          [mid-point]
      }
      100% {
          [ending-point]
      }

    }
```
Keep in mind that these can be any percentages you want. 

This is what I did for my slide in animation. 
```
@keyframes bitSlideIn {
  from {
    transform: translateX(-700%) scale(1.1);
    border: 1px solid black;
  }
  to {
    transform: skew(-20deg);
  }
}
```

The name of this animation is bitSlideIn. The starting point is way to the left, scaled up to 10% larger, and with a black border. And that will transform to a skew of -20 just to give a transitioning look from a rectangle to its final shape.

To use our new animation in our element, we need to add the 'animation' css attribute. So here is how I wrote mine:

```
.bits-donation{
  animation: bitSlideIn 1.2s ease-in;
}
```
So breaking this down: 

bitSlideIn is the name we gave our keyframes animation. 1.2s is the duration that this animation will occur and ease-in is an animation property that specifies the speed curve of the animation. 'ease-in' basically specifies that our animation start out slow and speed up a bit. 

And that is basically it.
How to create a profile on the new Github profile
Tags: github, profile, branding, markdown
Published: 2020-07-12 17:09:23

Github launched a cool feature!

The user can create a presentation page, through a README.md, within a public project of the same name as the user.

And, it should look like this:

[`https://github.com/sftom/sftom/README.md`](https://github.com/sftom/sftom/README.md)

Above, you can check my profile:

[`https://github.com/sftom`](https://github.com/sftom)
Measure function execution time in golang
Tags: go, function
Published: 2020-07-12 17:08:42

---
title: Measure function execution time in golang
published: true
description: 
tags: golang,function,go
cover_image: https://yourbasic.org/golang/100m-sprint.jpg
---

For some reason you may want to keep a track of how much long a function takes to do a certain task in golang, maybe for performance evaluation.Here is a function that tracks the execution time of a complete function call with this one-liner, which logs the result to the standard output.

```go
func timeTrack(start time.Time, name string) {
	elapsed := time.Since(start)
	log.Printf("%s took %s", name, elapsed)
}

```

The usage is fairly simple and straight forward. Defer the call to this function before doing the actual function call.

```go

package main

import "fmt"

func main() {

defer timeTrack(time.Now(), "Timer")

// your code goes here


}

```
Projects To Complete When Learning Web Development
Published: 2020-07-12 16:57:49

If you’re intermediate beginner web developer, you have probably run into the wall. The basic tutorials are too easy now. But it’s hard to figure out what to code.

You are probably looking for project ideas with quality design. Fortunately, there is [devchallenges.io](https://devchallenges.io), completly **free** website where each challenge is different and will test you different aspects of coding. It includes small user stories and beautiful designs.

When you complete a challenge, you submit your solution, which can be shared with others. Solutions page is a good place for people to learn from each other. It is for you to share your thought and help others.

## Here are some sample projects

You should visit [devchallenges.io](https://devchallenges.io) for more ideas.

### [Job Board App](https://devchallenges.io/challenges/TtUjDt19eIHxNQ4n5jps)
![Github jobs](https://firebasestorage.googleapis.com/v0/b/devchallenges-1234.appspot.com/o/challengesDesigns%2FJobSearchThumbnail.png?alt=media&token=59d40095-f280-478f-a8c9-dc9d49f14471)

### [Quizz App](https://devchallenges.io/challenges/Bu3G2irnaXmfwQ8sZkw8)
![Quizz app](https://firebasestorage.googleapis.com/v0/b/devchallenges-1234.appspot.com/o/challengesDesigns%2FcountryQuizThumbnail.png?alt=media&token=761f3109-120d-4111-96b3-98ef934281b6)

### [Unsplash clone](https://devchallenges.io/challenges/rYyhwJAxMfES5jNQ9YsP)
![Unsplash clone](https://firebasestorage.googleapis.com/v0/b/devchallenges-1234.appspot.com/o/challengesDesigns%2FMy%20unsplashThumbnail.png?alt=media&token=c5ea0403-4e16-4b70-a70c-cf14cf66b106)

### [Checkout page](https://devchallenges.io/challenges/0J1NxxGhOUYVqihwegfO)
![Checkout page](https://firebasestorage.googleapis.com/v0/b/devchallenges-1234.appspot.com/o/challengesDesigns%2FCheckoutThumbnail.png?alt=media&token=c7ffdbe3-7206-44f2-b1e6-a6b99bf81901)

### Author of devchallenges.io

{% user nghiemthu %}
docker : installation
Published: 2020-07-12 16:55:13

Run commands to install docker in an ubuntu machine

# Docker Engine

```bash
// download the script
$ curl -fsSL get.docker.com -o get-docker.sh

// create permission
$ chmod +x get-docker.sh

//run the script 
$ sh get-docker.sh

// check if it is successfully installed
$ docker --version
```

# Docker Compose

Docker Compose helps us to running multi-container Docker applications with a YAML file configuration.

```bash
// download docker-compose
$ sudo curl -L "https://github.com/docker/compose/releases/download/1.26.2/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose

// Apply docker-compose
$ sudo chmod +x /usr/local/bin/docker-compose

// check if it is successfully installed
$ docker-compose --version
```

# Docker Machine

Docker Machine lets us install Docker Engine on virtual hosts, and manage the hosts with docker-machine commands.

```bash
// install docker-machine
$ base=https://github.com/docker/machine/releases/download/v0.16.0 &&
  curl -L $base/docker-machine-$(uname -s)-$(uname -m) >/tmp/docker-machine &&
  sudo mv /tmp/docker-machine /usr/local/bin/docker-machine &&
  chmod +x /usr/local/bin/docker-machine

// check if it is successfully installed
$ docker-machine --version
```

*note : adding our user to the “docker” group, so that we can use docker as a non-root user*

```bash
$ sudo usermod -aG docker your-user
```
5 Modern Tools to Know If You Were the “RIP Van Winkle” of Data Science
Tags: machinelearning, datascience, computerscience
Published: 2020-07-12 16:53:05

5 data science tools that rose to popularity in recent times.
Not my article but I wanted to share it: https://medium.com/@ramsrigouthamg/5-modern-tools-to-know-if-you-were-the-rip-van-winkle-of-data-science-who-slept-for-the-last-2-2de2aadb88ff?source=friends_link&sk=7a85716bf82c7b3e8c2056307a550932
BassDrum: Free Online Watch Parties and Streaming
Tags: 100daysofcode, sideprojects
Published: 2020-07-12 16:47:20

*This post originally appeared on [Pradeep CE](https://pradeepcep.com/bassdrum-private-alpha/), my personal blog.*

I planned on shipping [12 side projects](https://pradeepcep.com/mid-year-check-in-2020/) this year. As part of what might be a small step in achieving that, today, I introduced [BassDrum](https://bassdrum.app) as private alpha on [Twitter](https://twitter.com/pradeepcep/status/1282309945061339138).

## What is BassDrum?
BassDrum, at its core, is a browser extension that you can install to stream movies and videos in sync with your friends.

## What does BassDrum do?
In a nutshell, BassDrum allows you to:

1. Create a secret “room” with a hard-to-guess name.
2. Share this secret name with your friends to let them join your room.
3. Stream the video you want to watch, and have it automagically play for everyone in the room.
4. Play / pause / seek the video to have it reflected for everyone in your room.

That’s it! There are no accounts to sign up for, and no credit card details to enter!

You are not sharing your passwords or granting others access to your account. Everyone uses their own account for streaming, and BassDrum just syncs your video playback so that you can watch it together!

## Where do I get BassDrum?
BassDrum is currently in private alpha, and is not available publicly (as of writing this). Head over to the BassDrum Website for the latest updates, and to see if you can get on the waitlist to try BassDrum before it launches for public use.

You can also find [BassDrum on Facebook](https://facebook.com/BassDrumApp), [Twitter](https://twitter.com/BassDrumApp) and [Instagram](https://instagram.com/BassDrumApp). Come say hi! 👋

## How much does BassDrum cost?
We want to keep BassDrum free and accessible for everyone. At this time, there are no plans to charge anything for BassDrum.

## What can I stream with BassDrum?
Right now, BassDrum comes with support for Amazon Prime Video. We plan to add support for Netflix, Hotstar and all your favourite streaming platforms soon!

## The Way Forward
I hope that gives you a fair idea of what BassDrum is, and how it can help you. Please give it a shot when it launches — I’m eager for feedback, and would appreciate it a lot if you did!

I’m excited because this is my first side project of this year — looks like my mid-year check-in worked after all! I’ll be sharing the BassDrum journey in a series of posts, right here on this blog. The prospect of building something that people want to use, and having people actually use it… is fascinating!

Hope you all like [BassDrum](https://bassdrum.app) 🙂.
GitHub: Profile README.md
Tags: github, profilereadme, filopd, weekendlearning
Published: 2020-07-12 16:47:00

Hi Folks :-),

Today I came to know about a new GitHub feature Profile README.md.
Source: [@waterproofheart](https:twitter.com/waterproofheart/status/1281928692634189824)

Best way to introduce yourself to anyone who visits your profile and showcase your projects.

My Profile README Page: [filopd] (https://github.com/filopd)

**Steps:**
1. Login/SignUp to GitHub & create a new repository with name same as github username. Add a "README.md" to this repository.

2. Add content to this file. I have used simple HTML tags but you can use [markdown](https://guides.github.com/features/mastering-markdown/).

3. If you are comfortable then checkout repository and edit the above README.md file in your code editor with preview feature and extensions to edit readme file. Do git commit & git push changes.

4. Now you can see the contents of the README.md file on your profile. https://github.com/<github_user_name>

*Create and Share your profiles with me also.*
Count Number of Teams
Published: 2020-07-12 16:30:13

I came across another LeetCode problem that I felt was worth exploring here. It's called ['Count Number of Teams'](https://leetcode.com/problems/count-number-of-teams/).

The problem tells us that there will be an input array of unique integers; each integer representing an individual's rating. We must return the number of 'teams' that can be formed from the input array while satisfying the following criteria:

* Each team consists of three members
* A team must be represented in ascending order consistent with each member's index in the input array (indexOfA < indexOfB < indexOfC)
* A team's ratings must be ascending or descending while adhering to our 2nd bullet point (ratingA < ratingB < ratingC OR ratingA > ratingB > ratingC)


For example:

If given an input array of `[2,5,3,4,1]`, our return would be `3`. This is because we can construct three valid teams from this array. The first is `(2, 3, 4)` because 2 < 3 & 3 < 4 AND indexOf(2) < indexOf(3) & indexOf(3) < indexOf(4). Our second team is `(5, 3, 1)` because 5 > 3 & 3 > 1 AND indexOf(5) < indexOf(3) & indexOf(3) < indexOf(1). The last valid team is `(5, 4, 1)` because 5 > 4 & 4 > 1 AND indexOf(5) < indexOf(4) & indexOf(4) < indexOf(1).


I went about solving this problem with brute force. I constructed three `for` loops to check every possible combination of a team from the input array. If the team satisfies the ascending/descending requirement then I increment my `result` variable.

When we exit the outside `for` loop we should have counted every valid team. The last step is to return the counter, which I named `result`.

```javascript
var numTeams = function(rating) {
    let result = 0;
    for (let i = 0; i < rating.length; i++) {
        for (let y = i + 1; y < rating.length; y++) {
            for (let z = y + 1; z < rating.length; z++) {
                if ((rating[i] < rating[y] && rating[y] < rating[z]) || (rating[i] > rating[y] && rating[y] > rating[z])) result += 1;
            }
        }
    }
    return result;
};
```


I find these types of problems to be very helpful in forcing me to consider how to dissect a problem and I look forward to working through more.