teleren/devto huggingface dataset:
You can block a button if a field is not filled with pure CSS
Tags: css, form, validation
Published: 2020-03-10 03:51:42

---
title: You can block a button if a field is not filled with pure CSS
published: true
description: learn how to block a button if a field is not filled with pure CSS
tags: css, form, validation
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/9s8cx8z85tvvi0evaqo1.jpg
---

i'm doing this trick with just one field, if want add more fields, they need be direct childrens of `<form>`, and this will fail if you wrap the input field in another element.

## HTML Structure
```html
<form action="" class="form">
  <input type="text" class="form__input" placeholder="type your name..." required>
  <button class="form__button">submit</button>
</form>
```
## The CSS
```css
:root {
  --success-color: #319E65;
  --error-color: #E8513B;
  --white-color: #FFFFFF;
  --silver-color: #BDC3C7;
  --light-color: #ECF0F1;
}

.form {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  max-width: 50%;
  margin: 0 auto;
}

.form__input {
  width: 100%;
  border-radius: 4px;
  border: 1px solid var(--silver-color);
  padding: 10px 20px;
  transition: all .3s ease-in-out;
}

.form__input:focus {
  outline: 0;
}

.form__button {
  background: var(--light-color);
  border-radius: 4px;
  border-style: solid;
  border-width: 1px;
  border-color: var(--silver-color);
  text-decoration: none;
  padding: 10px 20px;
  color: var(--silver-color);
  transition: all .3s ease-in-out;
  pointer-events: none;
  margin-left: 10px;
}

.form__input:invalid {
  border-color: var(--error-color);
}

.form__input:valid {
  border-color: var(--success-color);
}

.form__input:valid + button[class=form__button] {
  border-color: var(--success-color);
  background: var(--success-color);
  color: var(--white-color);
  cursor: pointer;
  pointer-events: initial; /* block click and events in this button */
}
```
the trick here is `:valid` and `:invalid`, using it, you can validate the field, if empty `:invalid` will block it, if you type something, then `:valid` will make it clickable again at this line:

```css
.form__input:valid + button[class=form__button] {
  border-color: var(--success-color);
  background: var(--success-color);
  color: var(--white-color);
  cursor: pointer;
  pointer-events: initial; /* the click event returns to the initial state */
}
```
## Result
{% codepen https://codepen.io/leandroruel/pen/oavYZB %}
Open source GUI to help make custom TTS datasets
Published: 2020-03-10 08:24:00

**Hey guys, I've made simple GUI too help edit clips and manually transcribe them. Its open-source so feel free to contribute. It's built with electronjs and works with mac, windows, ubuntu, and fedora.**

**Link to blog ===>https://danklabs.tech/blog/a-gui-to-make-text-to-speech-datasetstdm/**

**Link to github ===> https://github.com/danklabs/tts_dataset_maker**

**Download Link ====> https://github.com/danklabs/tts_dataset_maker/releases**

**#DeepLearning#OpenSource**
Do you use Swagger, or document your API?
Tags: discuss, devops, swagger, webdev
Published: 2020-03-10 13:25:38

Not sure if it is needed for GraphQL as well, as you already have GraphQL playground.

[Swagger](https://swagger.io/resources/open-api/) is a way of documenting REST API.

Recently, I have been using [fastify](https://github.com/fastify/fastify) (which validates schema with [ajv](https://github.com/epoberezkin/ajv)), and integrate with OpenAPI v3 via [fastify-oas](https://www.npmjs.com/package/fastify-oas). Still, I feel that it needs some more validation layers.

- Frontend layer
- Database layer -- I had better use SQL / ODM (on top of NoSQL)?
Sourcery now available in VS Code!
Tags: python, vscode, refactoring, extension
Published: 2020-03-10 14:24:59

---
title: Sourcery now available in VS Code!
description: Get instant Python refactorings as a VS Code extension
published: true
date: 2020-03-10 00:00:00 UTC
tags: python, vscode, refactoring, extension
canonical_url: https://sourcery.ai/blog/sourcery-vscode/?utm_souce=Blog&utm_medium=RSS
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/omd08vlw418j1zfqh6t9.png
---

We're excited to announce that Sourcery is now available as a VS Code [extension](https://marketplace.visualstudio.com/items?itemName=sourcery.sourcery).


This means you can use all of the great features of Sourcery directly in your VS Code editor:

* **Instant refactoring suggestions.** We're the only tool that will refactor your code for you!
As you type Sourcery will analyse your code and suggest improvements
which you can add with one click.

* **We don't break your code.** Sourcery uses extensive static analysis to ensure that its refactorings
don't change the existing functionality - backed up by testing on open source repositories.

* **Runs locally.** Sourcery runs completely locally on your machine - no code is ever sent to the cloud.

Here's an example of a Sourcery refactoring from inside VS Code:

![Sourcery diff](https://dev-to-uploads.s3.amazonaws.com/i/nn3es135nkbplwx9pmmu.png)

To get it for free just follow these steps:

* Open VS Code and press `Ctrl+P` (`Cmd+P` on Mac) then paste in `ext install sourcery.sourcery` and press `Enter`. 
* Click [here](https://sourcery.ai/download/?editor=vscode) to get a free token.
* Enter the token into the provided input, or search for `sourcery` in the VS Code settings and enter it into the ```Sourcery Token``` field.
📣Startups, Check your Database EOL before using it
Tags: support, couchdb, enterprise, fintech
Published: 2020-03-10 18:23:12

# A Cautionary tale 🐺👩‍🦰👵
In our startup, we develop a solution for the fin-tech section. Yesterday we realised that our clients will scan our dockers with a security radar agent every quater. It will probably be some McAfee product.

For the inexperienced me, That was quite a shock. It essentially creates another trigger for a development process other than adding features and fixing bugs.

After speaking with someone experienced, he told me that as long as a product did not reach its end of life (EOL) support, I don't need to update it. *Side note*: MongoDB 4.2 breaks our product, unlike mongo 4.0.

# Apache, do you got me? 😎🤙
Now, because we were evaluating CouchDB (Apache project), I was looking for the EOL and I found the following [[Source]](https://cwiki.apache.org/confluence/display/COUCHDB/Current+Releases) : **When a security-related release occurs, affected versions are immediately deprecated and no longer supported by the CouchDB team**

Well, That is just unacceptable 🤢. You do realise that I can't put a DB in my production and fearing everyday that its end of support might just happen? Making me use an updated version that who knows if compatible or not?

Luckily, Both mongo [[source]](https://www.mongodb.com/support-policy) and elasticsearch [[source]](https://www.elastic.co/support/eol) have a 1.5 year of support for each version. Giving that, I will have to use them as our production database candidates - only this way I can plan in advance when to upgrade and not be hit with it at the next security scanning.
💪Review 1: Tribute Page by FreeCodeCamp, Developer: Kyle | #elefDoesCode
Tags: review, code, design, freecodecamp
Published: 2020-03-10 20:45:50

⬇️I will review your... 

🤓The process:
1. Every week I will do a live stream on my youtube channel reviewing your site
2. I will give feedback and suggestions according to your needs. 
3. If I have a way to contact you, I'll gladly do so :)
4. If you have any question don't hesitate to contact me!

Take part [here](https://forms.gle/9AxiCUQ8YudTVYzs9) (I only need a URL and your name).

It doesn't matter if you are a beginner or more advanced. 
You can submit as many sites as you want.

🙏Thank you for taking part with your website into my live streams.
It takes courage to let someone you don't know to review your work...
But remember feedback is important and all of us need it...
 
🤗The review is FREE. You don't pay for anything. I won't be paid by anyone.

----------------------------

In particular, in this video you'll find:

🤓The developer: Kyle
💪The projects: Tribute page & Survey from FreeCodeCamp, implemented in Codepen

⌨Links:
From FreeCodeCamp
[Tribute page](https://www.freecodecamp.org/learn/responsive-web-design/responsive-web-design-projects/build-a-tribute-page)
[Survey form](https://www.freecodecamp.org/learn/responsive-web-design/responsive-web-design-projects/build-a-survey-form)
In codepen
- https://codepen.io/kylekibet/pen/yLNbyzQ
- https://codepen.io/kylekibet/full/KKpqWoR

----------------------------

👋Hello, I' m Eleftheria, an app developer, master student, freelancer, public speaker, and chocolate lover.


😎Top 3 list:
- How to stay motivated | A developer's edition | @BatsouElef: https://youtu.be/qMvEtb5OxNo
- How to be a Better Problem Solver | Tips and solutions: https://youtu.be/dELt7yKIxIA
- Simple Tips to Build a Personal Brand as a Developer (+ personal examples): https://youtu.be/7s0o1gi0iP0

🥰If you liked this video please share

🍩Would you care about buying me a coffee? You can do it here: [paypal.me/eleftheriabatsou](paypal.me/eleftheriabatsou) but If you can't that's ok too!


**************************************

🙏It would be nice to subscribe to my [Youtube](https://www.youtube.com/c/EleftheriaBatsou) channel. It’s free and it helps to create more content.

🌈[Youtube](https://www.youtube.com/c/EleftheriaBatsou) | [Codepen](https://codepen.io/EleftheriaBatsou) | [GitHub](https://github.com/EleftheriaBatsou) | [Twitter](https://twitter.com/BatsouElef) | [Site](http://eleftheriabatsou.com/) | [Instagram](https://www.instagram.com/eleftheriabatsou/)
DevOps and Containers Security: Security and Monitoring in Docker Containers
Published: 2020-03-10 23:09:46

---
title: DevOps and Containers Security: Security and Monitoring in Docker Containers
published: true
description: devops,containers,security,docker
tags: 
---

https://www.amazon.es/dp/B085NMP3CV/

![Alt Text]
(https://miro.medium.com/max/357/1*MJdLbxivHn_VwMWWrN1Ehw.jpeg)

Through this book, we will introduce the DevOps tools ecosystem and the main containers orchestration tools through an introduction to some platforms such as Kubernetes, Docker Swarm, and OpenShift.
Among other topics, both good practices will be addressed when constructing the Docker images as well as best security practices to be applied at the level of the host in which those containers are executed, from Docker’s own daemon to the rest of the components that make up its technological stack.
We will review the topics such as static analysis of vulnerabilities on Docker images, the signing of images with Docker Content Trust and their subsequent publication in a Docker Registry will be addressed. Also, we will review the security state in Kubernetes.
In the last section, we will review container management and administration open source tools for IT organizations that need to manage and monitor container-based applications, reviewing topics such as monitoring, administration, and networking in Docker.
What will you learn
● Learn fundamental DevOps skills and tools, starting with the basic components and concepts of Docker.
● Learn about Docker as a platform for the deployment of containers and Docker images taking into account the security of applications.
● Learn about tools that allow us to audit the security of the machine where we execute Docker images, finding out how to secure your Docker host.
● Learn how to secure your Docker environment and discover vulnerabilities and threats in Docker images.
● Learn about creating and deploying containers in a security way with Docker and Kubernetes.
● Learn about monitoring and administration in Docker with tools such as cadvisor, sysdig, portainer, and Rancher.
Table of Contents
1. Getting started with DevOps
2. Container platforms
3. Managing Containers and Docker images
4. Getting started with Docker security
5. Docker host security
6. Docker images security
7. Auditing and analyzing vulnerabilities in Docker containers
8. Kubernetes security
9. Docker container networking
10. Docker container monitoring
11. Docker container administration
Shift and Push vs Splice in Javascript
Tags: javascript
Published: 2020-03-11 00:02:12

A classmate of mine had a whiteboard challenge as follows: make a function that accepts an array and a number, N. Rotate the values in that array to the left N times. Two solutions were suggested. Use array.push() and array.shift() or use array.slice(). Below are the two code snippets:

function arrayRotationUnshiftPush(array, numberOfRotations) {
    for (let i = 0; i < numberOfRotations%array.length; i++) {
        array.push(array.shift());
    }
    return array
}

function arrayRotationSplice(array, numberOfRotations) {
    index = numberOfRotations%array.length;
    return [...array.splice(index), ...array]
}

To test out which approach is faster, I created a dummy array if integers:

let array = []

for (i = 0; i<20000; i++) {
    array[i] = i;
}

Then I called the functions on the array and used Date.now() to record the time before and after:

let time = Date.now();
for (i = 0; i<20; i++) {
arrayRotationUnshiftPush(array, 1500);
}
console.log(Date.now() - time);

The results were surprising. When the array length became very long, splice was significantly faster. When the number of times each function was called became very long, splice was again much faster. Finally, the deeper into the array, the faster splice became compared to shift and push. All of this suggest that invoking a method adds additional runtime on a very small level that when scaled up creates a noticeable difference in run time.
Options, options everywhere
Published: 2020-03-11 01:42:37

More recently, I've been wondering if the best thing would be to quit my job, move back home and focus the next 6 months on hard core studying and interviews. 

I've also wondered if the best thing would really be to give up the job search altogether and direct my energy towards applying to computer science programs. An even better decision might be to do another bootcamp, focusing on core fundamental CS concepts and interview prep.

Obviously, I don't know where to go next. The great thing about attending Flatiron is that I've discovered a passion for learning about all thins computer and software. The tragic thing is that I'm not able to progress as much on my own. 

In a perfect world, I would 100%, without hesitation pursue a BS and Masters in computer science. Since my undergrad major was Finance, I have some, but not all of the pre-requisites to finish BS computer science. In a more attainable, ideal world, I would start my career as a full stack developer in a challenging supportive company that promotes personal development.

As much as I focus my attention or seek out feedback from others in the field, it ultimately comes down to 2 things:
1. There's so much I need to learn
2. I need to make money

This brings me back to my Chingu project.

My last 5 weeks have gone towards building the backend for my Chingu project. If you read my last post, you know that time management has been challenging because of the points above.

In either of the ideal scenarios above, my project might have been done this week, along with everyone else's. But my frustration isn't at not having finished my project. I'm so glad to have attempted a Chingu voyage and to have part of something to show for it. How great is it that I persevered.

So what is the issue, then?

The most frustrating thing is knowing what you want to do and yet be unable to pursue it. I want to code, learn how to code, to understand the math behind problems and solutions, and scope a project before executing said project.

And...?

I've thought about this post for the past 24 hours. There's an obvious so what missing to this post. Yes, I've identified some barriers to my best, but so what? What happens now? It might feel like the post is somehow unfinished without these answers. Maybe I should throw out my best guesses, but somehow that doesn't seem right either.

So here is what I can do at this moment in time:
1. Identify the companies that align with what I'm looking for
2. Keep doing my best

Number 2 might feel like a cop-out. But at this moment, its probably the most important.
Marker cluster click in google maps
Tags: googlemapsclusterclick
Published: 2020-03-11 12:13:08

agm-map(1.0.0-beta.7) cluster click is not working in angular(7.2.12). So I started working with google map API with same angular version.But I couldn't able    fetch the cluster info. My requirement is to populate the markers info from marker cluster like cluster size, marker label etc. Kindly provide the solution ASAP by agm-marker-cluster or basic google maps API.
Generating Color Palette Using ColdFusion & ImageMagick
Tags: coldfusion, imagemagick
Published: 2020-03-11 16:32:01

I read Ben Nadel's recent ColdFusion post on [Exploring Color Histograms In GraphicsMagick And Lucee CFML 5.2.9.31](https://www.bennadel.com/blog/3785-exploring-color-histograms-in-graphicsmagick-and-lucee-cfml-5-2-9-31.htm) and thought I'd compare it with [ImageMagick](https://imagemagick.org/).

ImageMagick returns a list of color data in a low-to-high order.  I used [ReMatch](https://cfdocs.org/rematch) to identify the hex colors via regex, generated an array and then reversed it.

NOTE: I wanted to compare performance using Ben's script, but his "Lucee CFML" script wasn't written to be compatible with ColdFusion 2016. :(

## Usage

```js
colors = extractPalette(imagePath, numberOfColors);
```

## [Source Code](https://gist.github.com/JamoCA/d2814588b6f518c72713becb3625c5bb)

{% gist https://gist.github.com/JamoCA/d2814588b6f518c72713becb3625c5bb %}
Tutorial NumPy
Tags: python, numpy, tutorial, data
Published: 2020-03-11 16:41:03

---
title: Tutorial NumPy
published: true
description: Tutorial for one of the most important libraries.
tags: python, numpy, tutorial, data
---

#### What is NumPy?
Numpy is the core library for scientific computing in Python. It provides a high-performance multidimensional array object, and tools for working with these arrays. 

NumPy is often used along with packages like SciPy (Scientific Python) and Matplotlib (plotting library). This combination is widely used as a replacement for MatLab, a popular platform for technical computing. However, Python alternative to MatLab is now seen as a more modern and complete programming language.

#### Install NumPy
```python
pip install numpy
```

#### Import NumPy
```python
import numpy as np
```

#### Create Arrays
```python
a = np.array([1,2,3])
b = np.array([(1.5,2,3), (4,5,6)], dtype = float)
c = np.array([[(1.5,2,3), (4,5,6)], [(3,2,1), (4,5,6)]], dtype = float)
d = np.array( [ [1,2], [3,4] ], dtype=complex )
```

#### Print Arrays
```python
>>> a = np.arange(6)                         # 1d array
>>> print(a)
[0 1 2 3 4 5]
>>>
>>> b = np.arange(12).reshape(4,3)           # 2d array
>>> print(b)
[[ 0  1  2]
 [ 3  4  5]
 [ 6  7  8]
 [ 9 10 11]]
>>>
>>> c = np.arange(24).reshape(2,3,4)         # 3d array
>>> print(c)
[[[ 0  1  2  3]
  [ 4  5  6  7]
  [ 8  9 10 11]]
 [[12 13 14 15]
  [16 17 18 19]
  [20 21 22 23]]]
```

For many resources on NumPy or anything else on Python, check out Github:
https://github.com/SeijinD/Python-World/blob/master/main/extends_libraries/numpy.md
Building an Idle game Part 1 - Theory
Tags: node, vue, javascript, game
Published: 2020-03-11 21:24:46

_I want to build a Idle RPG game, I'm pretty new to Node so it's going to be an adventure, a bit of trial an error, it should be fun :). This is a multi part series, in which by the end, you will be able to build your own game. I am taking inspiration from the likes of https://idlescape.com, https://melvoridle.com/, https://pendoria.net/._

Tick based systems are pretty interesting, I've never made one before, only theorized a few possibilities. After recently joining a project that uses a tick system, I decided to look into it more from scratch to get more of an understanding of it. What better use than building a real world example.

**So where do you start with a tick system?**

We need to start by describing what the system will do, we will be using Woodcutting as an example as it doesn't contain so much logic. It should be straightforward, you chop, you gain xp and gain logs. We will go over combat and other skills later.

### Woodcutting

There are a few things that needs to happen for this skill - and for several others.

- The timer for skill must be dynamic, so that we can change the time depending on the level of the skill or any buffs active

- The skill can generate items and experience so it needs to update the user both locally in Node and in a database somewhere

- It needs to be able to emit events to the client such as xp, progress bar movement, messages etc.

#### Queues

My first thought was thinking that it would be best to separate out each skill into a "job" and put it into a Queue. This would elevate much of the processing onto a separate server elsewhere. Initially it sounded great, but when it came to implementation it became quite convoluted, especially when it came to communicating from inside the job to the outside. 

Latency also becomes a factor, as everything needs to happen fast so the next action can take place.

So I went with putting everything inside a `setInterval()` and left it at that. It reduces the complexity so much that avoiding queues for this is the best thing to do.

#### Conclusion

Sometimes the straightforward answer can be the right one.

So now we have an outline of what a skill will possess and a rough idea of how the tick system will work.

Part 2 will cover the actual code behind the tick system along with the Github repos which contains some other scaffold such as Vue frontend.
How to remember JavaScript's shift() and unshift() ?
Tags: javascript
Published: 2020-03-11 21:49:10

Sometimes it is easy to do the exact opposite when we mean to add some value to the front of the array.  Is it `shift()` or `unshift()`?  If it is a whiteboard interview or online interview, it may help if we can remember which is which, instead of looking it up online.

To add the value to the front of the array, it is `unshift()`. Maybe the "un" part of "unshift" makes us think it is unloading something or undoing something. But in fact, it is the "opposite".  We can remember `unshift()`, opposite to what it sounds like, adds the value to the front, and `shift()` takes the value out of the array.

And just like other traditional Array methods before ES6, it is "in-place" modification (only `slice()` and `concat()` create new arrays, if we don't consider the `map()` and `filter()`, which are the newer array methods.)

```javascript
> arr = [2,4,6]
[ 2, 4, 6 ]

> arr.unshift(1,3,5)    // the length is returned
6

> arr
[ 1, 3, 5, 2, 4, 6 ]

> arr.shift()
1

> arr.shift()
3

> arr.shift(2)          // the 2 has no use. Only one value is shifted out
5

> arr.shift()
2

> arr
[ 4, 6 ]
```