teleren/devto huggingface dataset:
How do you test new UI widgets?

Published: 2019-10-25 20:20:32

This thread is more of a "show me what you got" style discussion starter than an actual question. https://curated.onl/nba-reddit/



Tell me how you test a brand new UI widget that you just created! It can be anything as long as it is a self-contained, single main purpose unit, UI control, widget, or call it whatever you want. You can go into detail about how you solve the initial idea (do you just write code, or use XML as well? Databinding? Common base class  https://reversephonelookup.onl/for all your custom controls in a project, or just inherit from View (or an appropriate ViewGroup implementation)?), but the main idea is how you do manual UI/behaviour tests - do you create a new sandbox project, do you test it in your app in a new fragment/view, or just replace an existing view's content, or rather, add the control to it? Do you write unit tests for your views? Do you make them adaptive and following the guidelines for future expansions, or just cobble together something that works?https://pcbuilder.onl/pcpartpicker/
How to introduce your project to the world? 💭
Tags: discuss, beginners, opensource
Published: 2019-10-25 20:02:18

Hey,
I always wondered what did the big Open-Source projects (like Vue.JS, React, RoR, etc...) to become known when they just started.

Are there tricks to allow people to discover your project?

EDIT: Relevant comments/posts

{% devcomment h2h1 %}

{% post https://dev.to/mcsh/an-answer-to-how-to-introduce-your-project-to-the-world-1p07 %}
K8s Med Kit
Tags: kubernetes, terminal, devops
Published: 2019-10-25 19:28:44




Kubernetes is pushing [1.16](https://kubernetes.io/docs/setup/release/notes/#kubernetes-v1-16-0-release-notes) and perhaps the latest version in 2019. Even though it doesn't sound much in version numbers, it holds a long way of improvements since it's first appearance in 2014. 

As k8s is created to ease the orchestration of containers and aid with networking, persistent data and security, it's often good to have some mission-critical commands attached to your toolbelt which, in the time of need and depending of the case, you'll most likely use. 


In order to apply these, a fair knowledge of kubernetes is presumed. 
Here is a list of specific use cases (most of these are ad-hoc commands): 


1- Tweak resources on a specific deployment:
```bash
$ kubectl set resources deployment <name-of-deployment> --limits=cpu=1,memory=1Gi --requests=cpu=500m,memory=500Mi -n <name-of-namespace>
```



2- Even with autoscaling, you might want to change the number of instances manually (*sometimes*):
```bash
$ kubectl scale deployments/<name-of-deployment> --replicas=<number> -n <name-of-namespace> 
```

3- Change the image version running - aka rollback to a different image version:
```bash
$ kubectl set image deployment/<name-of-deployment> <app-name>=<registry.url:PORT>/<app-name>:<build-version> -n <name-of-namespace>
```

4- If one of the nodes is acting differently than usual, it's good to get some insight
```bash
$ kubectl describe nodes <name-of-node>
```

5- Get insight of what happened in the cluster: 
```bash
$ kubectl get events --all-namespaces
```

6- Get information of the namespace:
```bash
$ kubectl get all -n namespace
```

7- Delete all deployments that have not Running status. Caution! This should be done if you have evicting or non attached deployments and should be used as least resort. A pro-argument would be that you can't deploy new deployments due to a queue buildup and instead of manually removing pods, you resort to a more automated removal.
```bash
$ kubectl get pods --all-namespaces --field-selector 'status.phase!=Running' -o json | kubectl delete -f -
```

8- Delete a pod by - *force* (similiar to point 7, but defining a pod):
```bash
$ kubectl delete pods <name-of-pod> --grace-period=0 --force
```



*Bonus point:* 

In this post I reference Kubernetes with k8s. If you search the internet or read technical texts, you'll often find a thin line between the names used interchangeably. Sometimes it's Kubernetes sometimes k8s. The former is the official name, the latter is the *slang* abbreviation to ease referencing to it. The mystery behind k8s is actually really simple - **k** (number of letters between the first an last letter, hence **8**) **s**. 
You could play with this method and apply it to different long-named words/brands. 

Guess what would be i4e :) 

Reposted from [orbjet.org](https://www.orbjet.org/post/2019-09-29/k8s-med-kit/)
Blazor and Customizing the OData entity model
Tags: aspnetcore, webdev, odata, webapi
Published: 2019-10-25 16:43:28

OData (Open Data Protocol) is an approved, OASIS standard that defines a set of best practices for building and consuming REST APIs. While OData has been around for a while, it has been seeing some renewed interested in the community for adding a layer of flexibility to your already existing HTTP based APIs.


Now, that .NET can run natively in the browser using WebAssembly via [Blazor](https://dotnet.microsoft.com/apps/aspnet/web-apps/blazor?WT.mc_id=ondotnet-devto-cephilli), developers want to be able to pair their OData backends with their Blazor frontends.

In a follow up to our previous episode on [Supercharging your Web APIs with OData and ASP.NET Core](https://channel9.msdn.com/Shows/On-NET/Supercharging-your-Web-APIs-with-OData-and-ASPNET-Core?WT.mc_id=ondotnet-devto-cephilli), Hassan is back with Jeremy to talk about how we can customize the OData entity model so that we can use OData with any data source. Along the way, there might be a little Blazor goodness too!

{% youtube gxBXvJKC4ow %}

If you liked this video and would like to see some more of our .NET content, please subscribe to our [.NET Developers YouTube Channel](https://www.youtube.com/channel/UCvtT19MZW8dq5Wwfu6B0oxw) or leave a comment below.


## Useful Links

* [OData .NET documentation](https://docs.microsoft.com/en-us/odata?WT.mc_id=ondotnet-devto-cephilli)

* [OData Demo](https://github.com/hassanhabib/ODataDemo?WT.mc_id=ondotnet-devto-cephilli)

* [Simplifying EDM with OData](https://devblogs.microsoft.com/odata/simplifying-edm-with-odata/?WT.mc_id=ondotnet-devto-cephilli)

* [Supercharging ASP.NET Core API with OData](https://devblogs.microsoft.com/odata/supercharging-asp-net-core-api-with-odata/?WT.mc_id=ondotnet-devto-cephilli)
Creating my side-project in 2 weeks - day 4
Tags: laravel, vue, design
Published: 2019-10-25 19:02:40

# **Creating my side-project in 2 weeks**
## **Fourth day: working on board**

**Custom right-click menu**
I first added a custom right-click menu, which looks like this for the moment:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/tpq67ss8nwjn4ekef2p8.png)

As you can see I've only implemented one action, creating cards. But first, let's see how I manage to create this right-click menu - and you will see, it's very easy.

First, I added a data property to the `Board.vue` component:
```js
data() {
    return {
        menu: false,
        top: 0,
        left: 0,
    }
},
```
where `menu` is a boolean which depends if the user want to display the context menu or not. `top` and `left` are here to open the right-click menu at the position of the user's cursor.

Then I added these two events on the main `Board.vue` component:
```js
...@click.right.prevent="menu = true" @click.left.prevent="menu = false"...
```
As you can see, very basic stuff. And for `top` and `left`, just a simple `@mousemove` event which call a `move` method:
```js
move(event) {
    if(!this.menu) {
        this.top = event.clientY;
        this.left = event.clientX;
    }
},
```
Then we just need to create the menu itself - a simple div hidden by default with the `v-if` property:
```html
<div v-if="menu" class="menu" :style="'position: absolute; top: ' + this.top + 'px; left: ' + this.left + 'px;'">
    <p @click="addCard" class="menu-link"><i class="icon-plus"></i> Add a card</p>
    <p class="menu-link"><i class="icon-directions"></i> Another action</p>
    <p class="menu-link"><i class="icon-trophy"></i> Another action</p>
</div>
```

**Handling the creation of a card**
When a user click on the **Add a card** button, we need to create a new card which show at the location of the user's cursor. For this, I created a `mutation` in the store of **Vuex**, to simply push a card object to the array of cards. By doing this, this store is updating and because I fetch the cards list in a `computed method`, VueJS re-render all the cards with this updated list and voilà, adding a card is now finished!

...until I remember that I forgot to update the `CardController` to handle the requests when the new card is edited. So here is the logic:
```php
$card = Card::where('id', request('id'))->first();

if($card) {
    // Updating the card
} else {
    // Creating a new card      
}
```
I fetch the card with the id of the request. If the card exist, I update it with the request's content - else I create the card. And here it is!
Closures: Modules
Tags: javascript, webdev, beginners
Published: 2019-10-25 18:54:26

Modules are probably the most practical use of closures you can find in Javascript. By breaking your code up into separate files and "importing" what is needed, you tap into the super powers that closures give you. This notion is what I discussed in the [first article](https://dev.to/steelvoltage/closures-the-js-scope-hack-3365) of the series. In a nutshell, you can keep functions and variables "private" and inaccessible. 

Traditional Object Oriented languages--for example C# and Java have access modifiers like `private`, `public`, and `protected` to achieve a similar effect. For example, a `public` method or property on a class can be accessed by other classes. This is very similar to exporting a function or variable in Javascript. (It's not a prefect comparison, but I see them as being two ways to reach a similar goal.)

The best way to understand is to study how the Javascript community converged around the module pattern as a way to isolate and protect code before modern approaches. Libraries like JQuery used the module pattern pattern to isolate and create an API for their users.

```javascript
var mod = (function() {
  //private function and variable
  var status = 'is cool.';
  function logName(name) {
    return `${name} ${status}.`;
  }
  return logName;
})();

console.log(mod('Brian'));
```

We have an immediately invoked function that returns an anonymous function. It then spits back the `logName` function. It's a pass through, called by mod instead of itself. `logName` itself a single parameter in `name`. The variable status can't be accessed or changed from outside of this script, meaning its "private."

A module like this simple one could be thrown into a script file on any HTML page. When it loads, it will attach the variable `mod` to the window object, which can be used to call its function anywhere else on the page, even by other scripts.

The module pattern simple trick, albeit a powerful one. There are closures in the wild, all over the place! Once you understand the concept, they start revealing themselves all the time.

*Note:* There are differences between the module pattern and how ES6 modules work--as it's a built in feature of the language. However, for the most part it is still the same concept.
Install Elixir in Debian/Ubuntu using precompiled packages
Tags: elixir, linux, ubuntu
Published: 2019-10-30 02:59:22

---
title: Install Elixir in Debian/Ubuntu using precompiled packages
published: true
date: 2019-10-25 18:24:17 UTC
tags: Elixir,Linux,Ubuntu
canonical_url: https://giovanni.codes/install-elixir-in-debian-ubuntu-using-precompiled-packages/
---

Today I had the necessity to update a production server using Debian to Elixir 1.9.2. The update from Elixir 1.6 to 1.9.2 was really easy but I will put my steps if anybody has the same requirement.

We will need three packages installed in our server:

- wget
- unzip
- Erlang 20 or up

## Installing Elixir

First, we need to go to our tmp folder to download the precompiled package, create a directory to unzip the package and then unzip it.

```
cd /tmp
wget https://github.com/elixir-lang/elixir/releases/download/v1.9.2/Precompiled.zip
mkdir elixir_precompiled
mv Precompiled.zip elixir_precompiled/
unzip Precompiled.zip
```

Now we have all the necessary stuff to get starting to install. We only need to move the bins and library from our temporal folder to **/usr/local** , or another directory. Just you need to remember to add the directory where you going to put Elixir to your system **PATH**.

```
cd bin
sudo cp elixir elixirc iex mix /usr/local/bin/
cd ..
cd lib
sudo cp -R * /usr/local/lib
cd ..
cd man
sudo cp * /usr/local/man
```

With those steps, we installed Elixir and the manuals for help.

As last check, we can see the elixir version in our system

```
Erlang/OTP 22 [erts-10.5.2] [source] [64-bit] [smp:4:4] [ds:4:4:10] 
[async-threads:1] [hipe] [dtrace]

Elixir 1.9.2 (compiled with Erlang/OTP 22)
```

And that is all. We have the last version installed in our system

The post [Install Elixir in Debian/Ubuntu using precompiled packages](https://giovanni.codes/install-elixir-in-debian-ubuntu-using-precompiled-packages/) appeared first on [Giovanni Codes](https://giovanni.codes).

 ![](http://feeds.feedburner.com/~r/giovannicodes/~4/VGCEKAcemt8)
Week 4 CTRL + SHIFT Code School
Tags: firstmonthincode
Published: 2019-10-25 18:09:08

Week 4, CTRL + SHIFT Code School

#HTML
#CSS
#Codepenn

My favorite part of this week is being able to see my code in action / working. I love Codepenn.  Thank you Melissa Timmons for being an inspiration & mentor file:///home/code13/Downloads/IMG_5236.jpg
[Discuss] How to get started with docker?
Tags: docker, programming, python
Published: 2019-10-25 18:02:19

---
title: [Discuss] How to get started with docker?
published: true
description: A discussion for programming beginners on how to start with docker
tags: docker, programming, Python
---

Here is a question to the community ― how do I get started with docker? I want to learn everything about it, what it really is, what does it achieve, how to work with it. Can you point me to some good resources?
Complex shapes and layout design in CSS 
Published: 2019-10-25 18:02:15

Some shapes or layout design in CSS is a little bit tricky to design in CSS code. using border-radius we can create many different shapes.CSS clip-path property will make complex shapes CSS design a lot easier to write code.

## using the border-radius property

I will start with simple shapes and go to complex shapes

let's create the rounded corner rectangle 

    <!-- Rectangle with single border radius-->
    <div class="rectangle">

    </div>

    .rectangle{
        background:#3380FF;
        width: 20rem;
        height: 20rem;
        border-radius:25px;
    }

In the above CSS code border-radius property applied and rounded corner rectangle formed.

Let's change border-radius property value 2 different values
   
    .rectangle{
        ....
        border-radius:25px 10px;
    }
first value in the border-radius is for top left and bottom right corner.
second value is for top right and bottom left corner.Thus we can have different rounded corner.

border-radius property can also have 4 values.Each value for each corner.

    .rectangle{
        ....
        border-radius:10px 20px 30px 40px;
    }
first in the border-radius is for top left and 2nd is top right,3rd value is for bottom right and finally 4th one is bottom left value.

There is another way of providing the value of the border-radius property which is eight different value with "/" with 1 to 4 value on each side of the slash

let's look into the CSS code

        border-radius:[top-left horizontal radius] [top-right horizontal radius] [bottom-right horizontal radius] [bottom-left horizontal radius] / [top-left vertical radius] [top-right vertical radius] [bottom-right vertical radius] [bottom-left vertical radius]

As mentioned in the above code before the slash are for horizontal border-radius and after the slash are for vertical border-radius

    .rectangle{
        border-radius:10px 20px 30px 40px/ 40px 30px 20px 10px;
    }

All the values of the border-radius can be provided as percentage or em. If I write border-radius as 50% with square it will be converted to circle which is the beauty of the border-radius property.

{% codepen https://codepen.io/GodtiVinod/pen/KKKWPxy %}

Recently I found an amazing tool to create asymmetric shapes. So guy's here it is [9elements](https://9elements.github.io/fancy-border-radius/)
In this tool, you can create n number of different shapes with a border-radius property only.
In the next blog, I will write about clip-path and other complex CSS shapes.
Linux: Using NVM to upgrade nodejs
Tags: linux, node, bash
Published: 2019-10-25 17:56:47

### Step 1: Install NVM

    wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.0/install.sh | bash

This command will install nvm and adds the source line to yours: '.**bash_profile**', '**.profile**' and '**.bashrc**'.

To check if nvm is installed run following command:

    nvm --version

NOTE: If, terminal say: "***Command not found***" , restart you terminal with `exit` command, then '**Ctrl + Alt + T**'.

### Step 2: Install the new version

    nvm install node
    #or
    nvm install <NODE_VERSION>

This will install the most recent version of node inside the '.**nvm**' file on your '***/home/user/***' directory.( If you run the first command )

### Step 3:  Reinstall global packages

Note: In my case, the following command:

    nvm install node --reinstall-packages-from=default

...doesn't work on my system or maybe I did it in the wrong way.😒

So, the next step is installing all your global packages ......manually 😩.

You need to switch to your newly version with: `nvm use node`

...then, do the respectively process to install all your global packages.

### Bonus 👊🎉

## Purging the old version of Nodejs

In my case: I want to delete the old nodejs version from my system, because it's not longer a supported version.

So ,I need to purge the default Nodejs version.

Type the following to do it:

    sudo apt-get purge --autoremove node

Type **'Y'** to proceed deleting the default nodejs version and its dependencies.

UPDATE: this command doesn't delete all the folders related to Node.if you change the root directory...like me 😅, something weird occur when you try to remove its packages.

You need to (after running the above command) proceed remove all the hidden folders in your '/home/user/' which start with ".node*" or ".npm" and reboot your computer.

It should work.🖖

NOTE: the " * " means ,whatever follow the string

### Setting new version as default

UPDATE: My Apologizes, the command '**nvm alias default node**' doesn't initialize node's newest version in the boot process. The above command only set up the new version of node as default.

You still need to run the command manually to use the newest version.

But I found a solution, I'll show you later.

## PD:

If you think that I lost something important in this 'tutorial' or may be I wrote something wrong, please leave a comment. I will 'fix that issue'.

## Sources:

- [NVM Documentation](https://github.com/nvm-sh/nvm)
Is it really a defect ?
Tags: discuss, softwareengineering
Published: 2019-10-25 17:46:07

---
title: Is it really a defect ?
published: true
description: 
tags: #discuss #softwareengineering 
---

You find out (once the code is in prod) that one of the methods/class you wrote is missing some tests & log an issue to add those missing tests. Do you log it as defect, because your tests claimed to test everything but now you have some untested code in prod, or is it just an enhancement? 

Want to know Dev Community's thoughts on this one.
What was your win this week?
Tags: discuss, weeklyretro
Published: 2019-10-25 17:42:41

---
title: What was your win this week?
published: true
description: Got to all your meetings on time? Started a new project? Fixed a tricky bug?
tags: discuss, weeklyretro
cover_image: https://cl.ly/188e843c2985/download/Image%202019-02-15%20at%202.36.37%20PM.png
---

👋👋👋👋

Looking back on your week -- what was something you're proud of?

All wins count -- big or small 🎉

Examples of 'wins' include:

- Getting a promotion!
- Starting a new project
- Fixing a tricky bug
- Cleaning your house...or whatever else that may spark joy 😄

![winning](https://media.giphy.com/media/K3RxMSrERT8iI/giphy.gif)

Happy Friday!
How to choose the right web tools
Tags: webdev, discuss
Published: 2019-10-25 16:07:11

I'm going to start developing a web application that will be used for online setup of various applications under Linux. Since I am on a reasonably short time frame, it is important that I do not make too many wrong decisions from the start. So I hope to gain some experience from others and get an idea of ​​what direction to look in.

It is not uncommon for there to be around 1000 different settings per program, so I'm going to work a lot with the use of forms. So I think that high degree of reusability is a must. Here's what I immediately thought of the requirements specification:

- I haven't thought much about choosing a programming language. The only programming language I know in advance and can use reasonably is PHP. But I have no preferences in terms of learning something new. In the past I have worked with Drupal, but I am not sure that this is the right platform for this project. In addition, I can do small things in HTML and CSS. My favorite IDE is PHPStorm
- Login authentication and authorization are managed from LDAP/Kerberos.
- Good support for using databases. Here is my favorite choice MySQL, as I know it already.
- In order to communicate with other programs, it is important to have good support for using YAML and JSON files.
- It should be relatively easy to add an online payment solution.
- There must be a sensible IDE to work with, with integrated debugging.
- I want to avoid having to code too much from scratch. Life is too short to reinvent the wheel. Are there online communities (besides Github) where you can find software libraries, code snippets and design elements?

One thing is that my application needs to be able to handle thousands of settings across many sub-programs, but for the ordinary user, it is a totally incomprehensible amount of information. That's why I think a lot of setup wizards need to be developed that can guide the user safely through a software setup. Are there libraries or software and design tools that can help in the process of making these wizards?

Since I'm going to be pretty much n00b, having a strong online community is important.

I am fully aware that it opens up to biased answers and responses that some might consider spam. But in my current situation, all information is good information. As I see it, I am faced with an incalculable amount of choice between different programming languages, platforms, IDEs and so on. It will require quite extensive research on my part if I am to be able to make a qualified choice.
What is the cleanest way to format the meta tag for CSP declarations
Tags: metatag, html, csp
Published: 2019-10-25 17:27:29

---
title: What is the cleanest way to format the meta tag for CSP declarations
published: true
description: What is the cleanest way to format the meta tag for CSP declarations
tags: meta-tag,html,csp,html 5
---

What is the cleanest way to format the meta tag for CSP declarations that make it readable and easy to add too? How do you do structure it? The reasoning behind this question is the awkward syntax W3C proposed, and with the strictness of syntax, it's easy to screw up your CSP policy that then fails silently.