teleren/devto huggingface dataset:
Typescript The Power of SOC in Angular
Tags: angular, typescript, javascript
Published: 2020-02-13 16:52:14

[Separation of Concerns (SOC)](https://en.wikipedia.org/wiki/Separation_of_concerns); if followed, will help you to be more productive as well as limit bugs based on changes.

**Break Up JSON Responsibilites**

Assume your back-end is sending back data like this. Do you see any logical sections in the JSON that should be their own component?  (hint: anytime you see an array, it may be a good candidate for a single concern)

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

Your Angular binding (which worked fine before the last series of changes) now looks like this when the response is displayed:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/13n9jj7eosvbkbw7ouuy.PNG)

We can see the header "Test a Group Name" but nothing under it. That area in JSON is the *Controls* array which has a PropertyName, Type, and CurrentValue.

**The Controls Component**

If we find the component where each control is bound we can easily solve the problem. Indeed it's simple for us because of SOC. This code handles only the JSON in the *controls array* above.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6kh637ymn69ci48nk4wg.PNG)

**Take Away**

Take a good look at your JSON being returned from the back-end. Do you see any areas within the JSON that should be handled by a single component?  If you do, then congratulations, you are using SOC.

Can you spot the reason why the control section didn't show anything?

Please post your answer below. Happy coding!

JWP2020
Is DEV skewed to web-dev mainly? Are you in for something else?
Tags: watercooler, meta
Published: 2020-02-13 16:47:59

Hi Friends!

I enjoy being here, at `dev.to` for some time already. By and by I start wondering - is it really so, that most posts here are about web-dev (and even more so - many of them about frontend, UI) - or it's just a kind of hallucination?

Drop a note, if not secret, if your interests are in programming-related but different fields, e.g.:

1. **Mobile development** - I really don't see that many posts like "Is Kotlin the best for Android development" or "Have you heard about yet another cross-platform tool for iPhones and Android both".

1. **Computer Science** - I've seen here such tag, but usually it is used along with some introductory level stuff only, like "Learn about Stack and List in 2020" which looks amusing :)

1. **Embedded Development** - where are all those discussions like "Forget about your Arduino and start doing it with STM32 like a pro".

1. **Competitive Programming** - and all those who knew what is Facebook Hackercup, Google Code Jam, TopCoder and CodeForces.

1. **Whatever I may forgot** which is not about web-dev - popular branches of Data-Science and Data-Engineering, some Scientific-related programming, Robotics etc.

P.S. Be sure I don't mean it is wrong to be more dedicated to web-dev. It is the field where zounds of projects are nowadays, so it is quite ok. I'm just curious. Thanks! :)
JetBrains promo code for -20% on 10 company licenses
Tags: jetbrains, promocode, discount
Published: 2020-02-13 16:43:33

Dear All,

I got a JetBrains promo code for a -20% up to 10 company licenses, and if someone uses it, I get a year free on my current subscription, so it's a win-win. Here's a quick summary:


Promo Code to use: 3WJHS-DSBWB-VVH4L-NEN4C-6P7PH

An organization can use this Promo Code to redeem a 20% discount on the purchase of up to 10 new annual commercial subscriptions to any JetBrains Toolbox products. Note: when using the Promo code, you should combine in one order no more than 10 commercial subscriptions to any JetBrains Toolbox products. If you would like to purchase any licenses in addition to those 10, please create a separate order.

The Promo Code should be used in the JetBrains store at jetbrains.​com.

The Promo Code is unique and single-use.

The Promo Code is valid until May 31, 2020.

You can read the FAQ here: https://info.jetbrains.com/alt-enter-program-faq.html

If someone is interested, please feel free to use my promo code.
Thank you.
Django News - Issue 7
Tags: django, python
Published: 2020-01-30 01:17:02

---
title: Django News - Issue 7
published: true
date: 2020-01-24 17:24:58 UTC
tags: django, python
canonical_url: https://django-news.com/issues/7
---

### News

#### [Announcing the Django Software Foundation Store: Featuring custom t-shirts, prints, and more](https://cur.at/5aVf6kR?m=rss)

The Django Software Foundation, the non-profit behind Django, has launched an official merchandise store. All proceeds benefit Django.

----

#### [Have you checked out the Django Forum?](https://cur.at/EY2TSGP?m=rss)

The Django Forum is a place for discussing the Django framework and applications and projects that use it. The goal of the forum is to be a useful addition for lower-impact, more real-time discussion than Django's mailing lists.

----

#### [Amazon Lightsail expands selection of instance blueprints](https://cur.at/kPPhaSg?m=rss)

Lightsail is Amazon’s VPS service; a “blueprint” is a pre-configured instance. Like a DigitalOcean “droplet”. So this is a pre-configured Django instance.

----

### Sponsored Links

#### [Test-Driven Development with Django, Django REST Framework, and Docker](https://cur.at/FBrRfkb?m=rss)

From the popular TestDriven.io site, an updated course on how to build, test, and deploy a Django app with Docker, Pytest, and Django REST Framework!

----

### Articles

#### [Feature Checking versus Version Checking - Adam Johnson](https://cur.at/ojYnvAQ?m=rss)

An analysis of whether to check for features in a new version of, say, Django, or to explicitly check the version number instead. Well-written and useful.

----

#### [How to create a Django project from a template](https://cur.at/Uattjmj?m=rss)

> A Django project template is the natural solution when the default Django project format is not enough anymore. Learn how to make your own in this tutorial.

----

#### [Vue or React: How to Choose?](https://cur.at/ibwLc9R?m=rss)

An in-depth review of how the two most popular JS frameworks interact with Django back-ends.

----

### Videos

#### [DjangoCon Europe 2019](https://cur.at/g9iS8LY?m=rss)

A playlist of all talks from 2019.

----

### Podcasts

#### [Django Chat Podcast - Ep47 Security Releases](https://cur.at/97b4IPI?m=rss)

The Django security team recently rushed out a fix in two days time, start to finish. A discussion of the normal security cadence and why staying on the latest Django release is so important.

----

### Projects

#### [djk2/django-admin-shell: Django/Python shell for django admin site.](https://cur.at/neDN2BV?m=rss)

[github.com](https://cur.at/neDN2BV?m=rss)

----

This RSS feed is published on [https://django-news.com/](https://django-news.com/). You can also subscribe [via email](https://django-news.com/#cta-newsletter).
Array – JavaScript Series – Part 20
Tags: javascript, codenewbie, beginners, tutorial
Published: 2020-02-13 16:18:47

We know about variable right? Now we are going to learn about data structures.

In computer science, a data structure is a data organization, management, and storage format that enables efficient access and modification. More precisely, a data structure is a collection of data values, the relationships among them, and the functions or operations that can be applied to the data. [wikipedia]

I think it’s easy enough to understand. Up until now we were just using the variable to store a single data, now we are going to learn about array where we can store multiple data.

It’s easy. we need to initial a variable and put some values in there.

See this is so easy –

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

In the browser we can see some interesting things about the array. There is some indexing here of the each elements.

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

Array indexing count from one. If we want, we can just console log Chandler using array –

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

If you give a value which is more than index value then it will give you undefined –

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

Do you understand the Array ?


You can see the graphical version here
{% instagram B8gQ6F2AMmu %}

Source Codes - { Check commits }
{% github nerdjfpb/javaScript-Series %}

Originally it published on [nerdjfpbblog](https://blog.nerdjfpb.com/javascript-part-20/). You can connect with me in [twitter](https://twitter.com/nerdjfpb) or [linkedin](https://www.linkedin.com/in/nerdjfpb/)!
What are the practical uses of volatile modifiers?
Tags: java, tutorial
Published: 2020-02-13 16:16:35

One of the practical use of the volatile variable is to make reading double and long atomic.

Both double and long are 64-bit wide and they are read in two parts, first 32-bit first time and next 32-bit second time, which is non-atomic but volatile double and long read is atomic in Java.

Another use of the volatile variable is to provide a memory barrier, just like it is used in the Disrupter framework.

Basically, Java Memory model inserts a write barrier after you write to a volatile variable and a read barrier before you read it.

Which means, if you write to volatile field then it’s guaranteed that any thread accessing that variable will see the value you wrote and anything you did before doing that right into the thread is guaranteed to have happened and any updated data values will also be visible to all threads, because the memory barrier flushed all other writes to the cache.

Happy Learning! 😇
Creating a Gutenberg block using a function
Tags: wordpress, php, gutenberg
Published: 2020-02-13 15:47:40

I am working on a members style plugin and needed a front end login form, WP has a pretty simple function to include the login form ( `wp_login_form()` ) which makes the process really easy but how do we get the form to show? WP has a lot of options including:

- Use the_content filter
- Use a page template
- Use a shortcode

If I am to fully embrace WP's adoption of Gutenberg, I should delve into the building a block to handle this.

##Create the plugin

Add the following to the top of a blank file:

```php
<?php
/**
 * Plugin Name:       GB Login Block
 * Plugin URI:        https://example.com
 * Description:       My Gutenberg login block
**/
```

Save the file as login-block.php

##Register Our block (php)

Next we need to register the block JS using the `enqueue_block_editor_assets` action.

Add the following to the plugin file above.

```php
function login_block_func() {
  wp_enqueue_script(
    "login-block",
    plugin_dir_url(__FILE__) . "block.js",
    array( "wp-blocks","wp-editor" ),
    true
  );
}
   
add_action( "enqueue_block_editor_assets", "register_block_func" );
```

##Registering our block (js)

Next we need to register the block using javascript, copy the code below and save the file as block.js

```javascript
( function() {

  var __ = wp.i18n.__;
  var el = wp.element.createElement;
  var registerBlockType = wp.blocks.registerBlockType;

  registerBlockType(
    'block/login-block', {
	  title: __( 'Login Form', '' ),
	  icon: 'shield-alt',
	  category: 'common',
 	  edit: function( props ) {
	    return el(
	      'p',
		  { className: props.className },
		  'The login form will be displayed here when viewed on the page.'
	    );
	  },
	  save: function( props ) {
	    return null
	  },
	}
  );

})();
```

##Rendering our function

Using `register_block_type` we can render php into our block, add the following to the login-block.php file we created earlier.

```php
register_block_type(
  'block/login-block', array(
    'render_callback' => 'login_block_render'
  )
);

function login_block_render() {
  $login_args = array(
    'echo' => false, // This line is important
  );
  return wp_login_form( $login_args );
}
```

##Finish

Zip up both files and upload the file to the wp admin and activate your new plugin. Create a new page and add a new block, under 'common' you will should see "login form". Add to the page and save. Now head to the page on the frontend to see your custom login form.
Python ML - Similarity with spaCy
Tags: todayilearned, python, machinelearning
Published: 2020-02-13 15:45:22

# Intro

I started learning ML and Data Science, and I want share with you a powerful python library for semantic text analysis called **spaCy**.


# Description

Similarity is determined by comparing word vectors or “word embeddings”, multi-dimensional meaning representations of a word.

[spaCy](https://spacy.io) is designed to help you do real work — to build real products, or gather real insights. The library respects your time, and tries to avoid wasting it. It's easy to install, and its API is simple and productive. We like to think of spaCy as the Ruby on Rails of Natural Language Processing.


spaCy is able to compare two objects, and make a prediction of how similar they are. Predicting similarity is useful for building recommendation systems or flagging duplicates. For example, you can suggest a user content that’s similar to what they’re currently looking at, or label a support ticket as a duplicate if it’s very similar to an already existing one.

# Installation instructions

pip

Using pip, spaCy releases are available as source packages and binary wheels (as of v2.0.13).

```
# pip3 install spacy
```

# Models

spaCy’s models can be installed as Python packages. This means that they’re a component of your application, just like any other module. They’re versioned and can be defined as a dependency in your requirements.txt. Models can be installed from a download URL or a local directory, manually or via pip. Their data can be located anywhere on your file system.

```
python3 -m spacy download en
```

spaCy currently provides support for the following languages. Here is a  [complete list](https://spacy.io/usage/models).


# Example

here is a little python code that compare two string.

``` python
import spacy

nlp = spacy.load("en_core_web_sm")

first_text = nlp(input("insert first text: "))
second_text = nlp(input("insert second text: "))

print(f"similarity: {first_text.similarity(second_text)}")
```

result

```
insert first text: i'm a software developer
insert second text: i'm a software web developer

similarity: 0.9302790237853475
```

Enjoy!!
Display a user's password on input
Tags: frontend, forms, ux
Published: 2020-02-13 15:36:41

---
title: Display a user's password on input
published: true
description: Reveal password input field in a form
tags: #frontend #forms #ux
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/s4q3x02c4yp7v48byir8.jpg
---

When designing forms, it's important to let a user correct his/her password entry on input. There are various ways to achieve this. One solution is to provide a duplicate password input field for the user to confirm the password he/she had entered in the previous input. This may prove cumbersome for the user when asked to type the same password twice and it may also degrade the user experience. To improve the user experience, we may like to provide a choice for one to reveal his/her password.

The design of the form input field has to have a button to toggle between the states: __show__ and __hide__ password. In order to achieve this, append a button with a text or an icon to display the two states in your HTML form:

```html
<div class="form__group">
  <label for="password">Password</label>
  <section class="section__input">
    <input
      type="password"
      name="password"
      id="password"
      class="form__control"
    >
    <button class="toggle-displayBtn">show<button>
  </section>
</div>
```

Style the forms so that they appear adjacent to each other:

```css
.section__input {
  display: flex;
}

.form__control {
  flex: 1;
}
```

Adding a flex of 1 ensures the input element takes as much space as possible, the toggle button takes the remaining space.

To perform the toggling between the two states, add the following code to your JavaScript file:

```javascript
const passwordInput = document.getElementById('password');
const togglePasswordDisplayBtn = document.querySelector('.toggle-displayBtn');
let revealPassword = false;

togglePasswordDisplayBtn.addEventListener('click', (event) => {
  revealPassword = !revealPassword;

  if (revealPassword) {
    togglePasswordDisplayBtn.textContent = 'hide';
    passwordInput.type = 'text';
  } else {
    togglePasswordDisplayBtn.textContent = 'show';
    passwordInput.type = 'password';
  }
});
```

The above code gets the references to the password input field and the button to toggle between the __show__ and __hide__ states and declares a variable to contain the status of the toggle button. Then we listen to the click event on the toggle button. The value of _revealPassword_ is changed between __true__ or __false__ when the _click_ event on the button is triggered. If __revealPassword__ is _true_, change the toggle button text content to __'hide'__ and change the password input type to be __text__. When __revealPassword__ is _false_, change the toggle button text content to __'show'__ and change the password input type to be __password__.

The demo:

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


The code for this demo can be found by visiting this URL: https://github.com/khwilo/password-reveal
PHP, MYSQLI, and CSV Export from database
Tags: php, csv, mysqli
Published: 2020-02-13 15:24:31

First contribution here and thought I'd share a snippet from a recent project. When scrubbing around the net for info on how to output a csv file directly to the browser I noticed there are quite a few outdated and overly verbose examples.  Here's what I ended up with.

My project needed the data to be pulled by date so this example uses a date field. For me, a user is picking a date and submitting a form to get the csv download so I am using a prepared statement to avoid any mysql injection.
I didn't put in error handling for brevity's sake, but you can mark up your code with as much or little as you see fit.

The examples I have seen usually use a bunch of concatenation when iterating over the data to separate out and build the header line and the body lines but there are a few biult in functions that replace all that <ul><li><a href="https://www.php.net/manual/en/function.fputcsv.php">fputcsv</a> - formats array line to csv format</li><li><a href="https://www.php.net/manual/en/function.array-values.php">array_values</a> - grab the values of associative array and add them to the csv array</li><li><a href="https://www.php.net/manual/en/function.array-keys.php">array_keys</a> - set the header of the csv file if it is needed using the returned associative array</li></ul>

This is working for me currently, and producing expected results. I'm not an expert by any means but I hope this is helpful to someone out there looking for examples on how to do this.
 
This example should work for PHP 5 >= 5.3.0, PHP 7.
<pre>
$conn = new mysqli('myHOST', 'myUSER', 'myPASS', 'myDB');
$date=date('Y-m-d'); //this would be $_POST['date'] from the form
$q = "SELECT dateColumn,column2,column3,column4 FROM myTABLE WHERE dateColumn = ? ";
$stmt = $conn->prepare($q);
$stmt->bind_param('s', $date);
$stmt->execute();
$result = $stmt->get_result();
if ($result->num_rows > 0) {
   //These next 3 Lines Set the CSV header line if needed
   $data = $result->fetch_assoc();
   $csv[] = array_keys($data);
   $result->data_seek(0);
   //SET THE CSV BODY LINES
    while ($data = $result->fetch_assoc()) {
        $csv[] = array_values($data);
    }
    header('Content-Type: application/csv');
    header('Content-Disposition: attachment; filename="myCSV.csv";');
    //You could save the file on your server
    //but we want to download it directly so we use php://output
    $f = fopen('php://output', 'w');
    foreach ($csv as $line) {
        fputcsv($f, $line, ',');
    }
    exit;
} else {
    echo 'No data to export for ' . $date;
}
</pre>
A docker image for your cordova and electron projects
Tags: github, docker, electron
Published: 2020-02-13 14:43:49

Read the original article on [GKDV](https://gkdv.net/github-template-for-html-cordova-and-electron-projects/)

<p>Each time I need to do a little personal android project (with a light angularjs),
I have to remember how to configure android environement, cordova packages, etc.</p>

<center>
	<img alt="cordova and electron docker image github template" src="https://gkdv.net/images/uploads/2020/02/bored-meme-59d95bc5678ba-300x210-300x210.jpg" />
</center>

<p>And recently, I need to generate an electron app. 
However, cordova and electron use static html rendering logic: how to make it easier?</p>

<h1 id="using-docker">Using docker</h1>

<p>I created a template repository on github: <a href="https://github.com/gpenverne/electron-docker-project">electron-docker-project</a>, which handles android and electron build, and can serve html files using nginx (because modern browsers deny ajax call on local environment).
It’s really simple to use, after you based your repository on this template:</p>

<h2 id="install">Install</h2>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nv">$ </span>git clone git@github.com:gpenverne/electron-docker-project.git  
<span class="nv">$ </span><span class="nb">cd </span>electron-docker-project  
<span class="nv">$ </span>make build <span class="c"># Build the docker image  </span>
<span class="nv">$ </span>make <span class="nb">install</span> <span class="c"># Install dependencies  </span>
</code></pre></div></div>

<h2 id="run---electron-gui">Run - electron gui</h2>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nv">$ </span>make gui <span class="c"># Launch the electron gui  </span>
</code></pre></div></div>

<h2 id="generate-an-android-apk-cordova">Generate an android APK (cordova)</h2>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nv">$ </span>make android <span class="c"># Generate the android folders  </span>
<span class="nv">$ </span>make package <span class="c"># Build android apk (and electron packages!)  </span>
</code></pre></div></div>

<h2 id="serve-static-html-ui-nginx">Serve static html ui (nginx)</h2>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nv">$ </span>make serve-html <span class="c"># Will helpfull to dev  </span>
</code></pre></div></div>

<p>This docker image embed electron and android cordova dependencies: 
Now, you just have to edit the config.xml file to set the android app’s name, et voilà!</p>

<center>
	<img alt="cordova and electron docker image github template" src="https://gkdv.net/images/uploads/2020/02/so-much-awesome-meme.jpg" />
</center>
Go while loop
Tags: go, beginners
Published: 2020-02-13 14:35:23

If you programmed in other programming languages before, you may be familiar with a while loop. So you'd think you can use a while loop in <a href="https://golang.org/">Golang</a>. But in Go, things are bit different.

Go doesn't have the while keyword, instead in Go for is Go's "<a href="https://golangr.com/while/">while</a>".
So instead of having something like this:

```python
while sum < 10:
    sum += sum
```

You have to use *for* in Go, when you want to use a while loop (this is confusing if you programmed in other languages before):

```go
sum := 1
for sum < 10 {
	sum += sum
}
```

Of course you need to put in a function (the main function, which is the first function on execution) and write "import fmt", which is a module required for screen output (Println).

```go
package main

import "fmt"

func main() {
	sum := 1
	for sum < 10 {
		sum += sum
	}
	fmt.Println(sum)
}
```

This outputs the result, as if you used a while loop in another language:

```
16

Program exited.
```

**Related links:**
* <a href="https://play.golang.org/">Go playground</a>
* <a href="https://golangr.com/while/">While loop</a>