teleren/devto huggingface dataset:
How to make a html search datalist for Vue
Tags: vue, html, tutorial, gridsome
Published: 2020-03-17 20:09:46

---
title: How to make a html search datalist for Vue
published: true
date: 2020-03-17 14:00:00 MDT
tags: vue, html, tutorial, gridsome
description: Add some search form auto complete options to your search page with datalists. You can also implement Vue and Gridsome with these.
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/idrao5v2hc7gaw9922yt.jpeg
canonical_url: https://developerbacon.ca/articles/how-to-make-a-html-search-datalist-for-vue/
---

## What do I mean by search suggestions

An example where I have use a datalist is on the [search page](https://developerbacon.ca/search/). Another axample of this in action would look like this:

<iframe height="351" style="width: 100%;" scrolling="no" title="HTML Search with datalists" src="https://codepen.io/brettanda/embed/VwLXoKm?height=351&amp;theme-id=dark&amp;default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/brettanda/pen/VwLXoKm">HTML Search with datalists</a> by Brett
  (<a href="https://codepen.io/brettanda">@brettanda</a>) on <a href="https://codepen.io">CodePen</a>.
</iframe>
## Adding the datalist to an input

To add a datalist to a text input you will need to add `list="id"` to your text input. For this, to work the list attribute needs to be set to the id of the datalist element.

```html
<input type="search" placeholder="Search" list="data" />

```

## Creating the datalist element

The datalist element is like the select element.

```html
<datalist id="data">
    <option value="HTML" />
    <option value="CSS" />
    <option value="JavaScript" />
</datalist>

```

## Implementing Vue

let us say you have a search form component using the above datalist and search input.

```html
<form>
    <input type="search" placeholder="Search" list="data" />

    <datalist id="data">
        <option value="HTML" />
        <option value="CSS" />
        <option value="JavaScript" />
    </datalist>
</form>

```

Let's say that you have an array of search values that you would like to display in this datalist, for example, this array:

```js
export default {
    data() {
        return {
            list: ["HTML", "CSS", "JavaScript"]
        };
    }
};
```

```html
<form>
    <input type="search" placeholder="Search" list="data" />

    <datalist id="data">
        <option v-for="item in list" :key="item" :value="item" />
    </datalist>
</form>

```

## Adding Gridsome

So you are using Gridsome (like me). Let's say that you would like your posts titles to show in this data list, You will need a `page-query` and use that instead of the data array.

```
<page-query>
query Search {
  allPost {
    edges {
      node {
        title
      }
    }
  }
}
</page-query>

```

Now for the new datalist.

```html
<form>
    <input type="search" placeholder="Search" list="data" />

    <datalist id="data">
        <option v-for="{ item } in $page.allPost.edges" :key="node.title" :value="node.title" />
    </datalist>
</form>

```
Product Engineering: How to Create Outstanding Software Product
Tags: productengineering
Published: 2020-03-17 19:58:29

Creating an end-to-end software product is a complicated process that involves a cycle of actions and decisions. Sometimes you have an idea for a product but no clue where to go with it. A Software Development Company, with the help of Product Engineering Services, can help you to evaluate your idea, suggest quickest implementation scenarios, and create a map for product development.

![Who is product engineer, what is product engineering](http://perfectial.com/wp-content/uploads/2020/03/Who-is-product-engineer-what-is-product-engineering-1024x420.jpg)

Software Product Engineering is a service that involves all stages of product creation: design, development, testing, deploying. But, the goal of Product Engineering is more challenging than simply delivering the final product – it’s to ensure that the product is functional and satisfies the needs of its end-user. Product Engineer is concerned with establishing whether the product will survive in the real world after the launch, which they determine by analyzing how it complies with the market requirements. Within the IT context, the product can be a piece of software, an app, or a business system. Product Engineering is dealing with the following specifics of the product:

Quality
Usability
Functionality
Durability
So, let’s take a closer look at who the person behind the Product Engineering Service is and what their role is in the product creation cycle.

##Who is a Product Engineer?
Product Engineer is some kind of a “superhero” that has to combine the knowledge of different positions: Business Analyst and Project/Delivery Manager. This is a person that is familiar with the market and makes sure that the product complies with the consumer’s expectations. The responsibilities of the Product Development Engineer involve identifying the problems and interests of the users and creating a prototype that can offer solutions. Also, they analyze what’s trending and in-demand on the market and in the industry in general. Another concern of the Product Engineer is the budget needed for the end-to-end product creation, feasibility, and the return on investment (ROI) of the particular product idea.

Usually, the Product Engineer needs to have an excellent communication environment in order to have access to all the information they need.

The post [Product Engineering: How to Create Outstanding Software Product](https://perfectial.com/blog/product-engineering/) appeared first on [IT Consulting Company Perfectial](https://perfectial.com/).
I refactored a large codebase from Enzyme to React testing library. Ask me anything
Tags: ama, react, testing, reacttestinglibrary
Published: 2020-03-17 19:51:50

---
title: I refactored a large codebase from Enzyme to React testing library. Ask me anything
published: true
description: 
tags: ama, react, testing, react-testing-library
---
Discord clone on glitch!
Tags: mongodb, node
Published: 2020-03-17 19:50:59

Have to worry, battery going...


So I came across miniCord- which was a mongodb discord clone.

I thought 'would this work on glitch?', I tried it and it worked!

So made some changes and pushed to GitHub, which is now in overdrive thanks to dependbot updating dependancies. But I recommend that you try it!

I'll explain more in the future, battery at 7% :(

GitHub repo: https://github.com/17lwinn/glitchchord
Site: Https://glitchchord.glitch.me
What non-coding skills do you want to learn next?
Tags: discuss, beginners, productivity, career
Published: 2020-03-17 19:38:00

In addition to coding-related things you're working on, **what are some non-coding skills/fields you want to learn about next?** These can be coding-adjacent (like user research or project management) or something new entirely (marketing). 

Are you using any resources to help you learn these skills? Which do you recommend?
What is the ⚡️FASTEST⚡️ way of building a "nocode" desktop and mobile app?
Tags: nocode, discuss, javascript
Published: 2020-03-17 19:31:30

Requirements:

1) it needs user registration
2) it needs to match users based on location
3) there is no three, that's all

Some more specifics: it only has to hold a handful of users, say 1000 AT MOST (but probably much less); "some" coding is fine, I have extensive JavaScript knowledge and integrating a couple of APIs could be OK as well, as long as they are near-zero configuration.
Tips for working remotely
Tags: remote, home, virus, crisis
Published: 2020-03-17 19:30:51

---
title: Tips for working remotely
published: true
description: Here I present my top 5 tips for remote working, during the Corona craziness. I hope you find one or more of these handy. Or feel free to leave your own in the comments!
tags: remote, home, virus, crisis
---

Here I present my top 5 tips for remote working, during the Corona craziness. I hope you find one or more of these handy. Or feel free to leave your own in the comments!

1 • 🥣 Big breakfast
2 • 💬 Communications early in the day
3 • ⏳ Frequent status updates
4 • 🙏 Focus focus focus
5 • 🍬 Give yourself small rewards
Building A New Foundation For CouchDB - Episode 124
Published: 2020-03-17 19:20:57

<p>CouchDB is a distributed document database built for scale and ease of operation. With a built-in synchronization protocol and a HTTP interface it has become popular as a backend for web and mobile applications. Created 15 years ago, it has accrued some technical debt which is being addressed with a refactored architecture based on FoundationDB. In this episode Adam Kocoloski shares the history of the project, how it works under the hood, and how the new design will improve the project for our new era of computation. This was an interesting conversation about the challenges of maintaining a large and mission critical project and the work being done to evolve it.</p><p><a href='https://www.dataengineeringpodcast.com/couchdb-document-database-episode-124/'>Listen Now!</a></p>
Getting A Handle On Portable C Extensions With hpy
Published: 2020-03-17 19:19:37

<p>One of the driving factors of Python's success is the ability for developers to integrate with performant languages such as C and C++. The challenge is that the interface for those extensions is specific to the main implementation of the language. This contributes to difficulties in building alternative runtimes that can support important packages such as NumPy. To address this situation a team of developers are working to create the hpy project, a new interface for extension developers that is standardized and provides a uniform target for multiple runtimes. In this episode Antonio Cuni discusses the motivations for creating hpy, how it benefits the whole ecosystem, and ways to contribute to the effort. This is an exciting development that has the potential to unlock a new wave of innovation in the ways that you can run your Python code.</p><p><a href='https://www.pythonpodcast.com/hpy-python-extension-episode-254/'>Listen Now!</a></p>
First Dev Post
Tags: beginners
Published: 2020-03-17 18:57:03

This is my first (6-months) in code and It's been a wild ride! Currently enrolled in Turing School of Software and Design and working to round out my portfolio. Mod 4 'paired' (there's 3 of us) project:: We've been tasked with addressing collections learning for DEV.to.

P.S. My teammates are the greatest
Sorted Union FCC Intermediate algorithms
Tags: replit, node
Published: 2020-03-17 18:01:03

---
title: Sorted Union FCC Intermediate algorithms
published: true
tags: replit, nodejs
---

//function uniteUnique(arr, arr1, arr2, arr3) {
 //var total =arr1.concat(arr2, arr3); console.log(total)
// var found = total.filter((x)=> x >= 3); console.log(found)  
 //var total = arr.concat(found); console.log(total);
 //return total;
//} 

//uniteUnique([1, 2, 3], [5, 2, 1, 4], [2, 1], [6, 7, 8]); 
//****//

function uniteUnique(...arr) {
 var arrZ = []; var arrY = []; var arrX = []; 
 var args =[];  var arr3 = []; var arr4 = []; 
 var arr5 = []; var arr6 = [];
  //Slice the array array.
  var arr1 = Array.prototype.slice.call(arr, 1,9);
  arr1 = arr1.join(",").split(",");
  arrX = arr1.filter( x => x != 3 && x != 2 && x != 1 );
   //converting the array into numbers.
  for(let i =0; i < arrX.length; i++){
    arr3 = arrX[i]*1; arr4.push(arr3);
  }
  //Slice the first array.
  var arr2 = Array.prototype.slice.call(arr, 0,1);
  arr2 = arr2.join(",").split(",");
  arrY = arr2.filter( x => x  != 3 || x != 2 || x != 1  ); 
   //converting the array into numbers.
  for(let i =0; i < arrY.length; i++){
    arr5 = arrY[i]*1; arr6.push(arr5);
  }
  args = arr6.concat(arr4); console.log(args);
   return args;
 
  
  
 }
//uniteUnique([1, 3, 2], [5, 2, 1, 4], [2, 1]); 
//uniteUnique([1, 2, 3], [5, 2, 1]);
uniteUnique([1, 2, 3], [5, 2, 1, 4], [2, 1], [6, 7, 8])

//https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sorted-union

{% replit @oscarhernandez6/Sorted-Union %}
GITHUB MOBILE IS NOW AVAILABLE FOR GENERAL PUBLIC!!! GET IT HERE...
Tags: github, opensource, news, devops
Published: 2020-03-17 17:54:19

Bring GitHub collaboration tools to your small screens with GitHub for mobile.

GitHub Mobile is officially leaving beta and entering general availability today. Learn more and download: https://github.com/mobile/

*Also you are most welcome to join OPEN SOURCE INTELLIGENT SYSTEM (OSINT)if you can help in open source project regarding safeguarding humans from various diseases like CORONA outbreak*
https://github.com/Manishfoodtechs/OSINTHRH/wiki
Neutralinojs: For lightweight, crossplatform applications
Tags: gui, crossplatform
Published: 2020-03-17 17:47:45

# Introduction

Portable and lightweight cross platform application development framework. Or you may think it like a lightweight Electron.

# Getting the Starter Kit

Download Starter Kit (In docs, they call it SDK. I feel it like a Starter kit or Bootstrap) from github releases page https://github.com/neutralinojs/neutralinojs/releases. ie. Download neutralinojs-v1.3.0.zip file.

Now extract it. It contains 2 folders (app:- where we write our UI code in `html`, `js` and `css`, storage: another folder) and 3 executables(1 each for `Linux`, `Windows` and `Mac`).

# Code it

As I mentioned above we are going to add UI related logic in html, js and css. Open below files, and replace content as I mentioned.

`app/index.html`

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>NeutralinoJs</title>
    <link rel="stylesheet" href="/assets/app.css">
  </head>
  <body>
    <div id="neutralinoapp">
      <h1>Hello <span id="name"></span></h1>
    </div>
    <script src="/neutralino.js"></script>
    <script src="/assets/app.js"></script>

  </body>
</html>
```

`app/assets/app.css`

```css
html, body{
    margin: 0px;
    padding: 0px;
}

#neutralinoapp {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #FFD700;
}

#neutralinoapp h1 {
    position: relative;
    float: left;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: Arial;
    font-size: 60px;
    padding: 0px;
    margin: 0px;
}
```

` app/app.js`

```js
var getUsername = function () {
    var key = NL_OS == 'Windows' ? 'USERNAME' : 'USER';
    Neutralino.os.getEnvar(key, function(data) {
        document.getElementById('name').innerText = data.value;
    },
    function () {
        //handle error
    }
    );

}

Neutralino.init({
    load: function () {
        getUsername();
    }
});
```

# Run it

Go to the folder, double click the executable corresponds to your OS. Mine was Linux (Debian). So, I opened `neutralino-linux`. A window was shown with `Hello myusername`.

# Conclusion

Neutralinojs is a very simple and straight forward framework for building apps. In my case, my `neutralino app` was taking only `11MB` of my RAM (I think, it takes around 30MB or 40MB for electronjs.).

# Call for action
What do you think about this app ?
Do you find any alternative to this ?
Comment it below.

# Reference
https://neutralino.js.org
https://neutralino.js.org/docs/#/gettingstarted/firstapp
Evie's Musical Nuggets Vol 3 - Dub Special
Tags: productivity, watercooler, motivation, music
Published: 2020-03-17 17:41:25

Well well all you devs! It's time for another edition of Evie's Musical Nuggets :100:

This time we're going to explore the land of the deep and heavy dub. Enjoy!

- [JUST DUB IT](https://www.mixcloud.com/dynamicduo/just-dub-it/)
- [Joe Gibbs mix](https://www.mixcloud.com/dynamicduo/joe-gibbs-dub-mix/)
- [Mixmaster Morris](https://www.mixcloud.com/mixmastermorris/mixmaster-morris-one-love-dub-shack/)
- [ere's one for all you steppers](https://www.mixcloud.com/VitalSound/steppa-style-uk-dub-reggae-mix-7/)
- [Mungo's Hifi Dubs](https://www.mixcloud.com/scotchbonnetrecords/mungos-hi-fi-studio-dubs-2019/)
- [Dub Hifi Sessions](https://www.mixcloud.com/Dubhifi1/dub-hi-fi-sessions-1/)
Using NiFi CLI to Restore NiFi Flows From Backups
Tags: 2020, apachenifi110, apachenifi111
Published: 2020-03-17 17:16:42

---
title: Using NiFi CLI to Restore NiFi Flows From Backups
published: true
date: 2020-03-17 17:14:00 UTC
tags: 2020,apache-nifi-1.10,apache-nifi-1.11
canonical_url: 
---

 **Using NiFi CLI to Restore NiFi Flows From Backups**  
  
Please note, Apache NiFi 1.11.0 is now available for download.    
  
[https://cwiki.apache.org/confluence/display/NIFI/Release+Notes#ReleaseNotes-Version1.11.1](https://cwiki.apache.org/confluence/display/NIFI/Release+Notes#ReleaseNotes-Version1.11.1)  
  
[https://pierrevillard.com/2018/04/09/automate-workflow-deployment-in-apache-nifi-with-the-nifi-registry/comment-page-1/](https://pierrevillard.com/2018/04/09/automate-workflow-deployment-in-apache-nifi-with-the-nifi-registry/comment-page-1/)  
  
[https://nifi.apache.org/docs/nifi-docs/html/toolkit-guide.html#nifi\_CLI](https://nifi.apache.org/docs/nifi-docs/html/toolkit-guide.html#nifi_CLI)  
  
#> registry list-buckets -u http://ec2-35-171-154-174.compute-1.amazonaws.com:18080  
  
#   Name   Id                                     Description    
-   ----   ------------------------------------   -----------    
1   IOT    45834964-d022-4f4c-891f-695898e1e5f0   (empty)        
2   IoT    250a5ae5-ced8-4f4e-8b3b-01eb9d47a0d9   (empty)        
3   dev    46b7bab7-400f-44ae-a0e6-7340ff19c96f   (empty)        
4   iot    c594d6bc-7413-4f6a-ba9a-50b8020eec37   (empty)        
5   prod   0bf59d2e-1dd5-4d24-8aa0-0614bf991dc9   (empty)        
  
  
registry create-flow -verbose -u http://ec2-35-171-154-174.compute-1.amazonaws.com:18080 -b 250a5ae5-ced8-4f4e-8b3b-01eb9d47a0d9 --flowName iotFlow  
  
  
a5a4ac59-9aeb-416e-937f-e601ca8beba9  
  
  
 registry import-flow-version -verbose -u http://ec2-35-171-154-174.compute-1.amazonaws.com:18080 -f a5a4ac59-9aeb-416e-937f-e601ca8beba9 -i iot-1.json  
  
1  
  
#> registry list-flow-versions  
  
ERROR: Error executing command 'list-flow-versions' : Missing required option 'baseUrl'  
  
#> registry list-flows  -u http://ec2-35-171-154-174.compute-1.amazonaws.com:18080  
  
ERROR: Error executing command 'list-flows' : Missing required option --bucketIdentifier  
  
#> registry list-flows  -u http://ec2-35-171-154-174.compute-1.amazonaws.com:18080 -b 250a5ae5-ced8-4f4e-8b3b-01eb9d47a0d9  
  
#   Name      Id                                     Description    
-   -------   ------------------------------------   -----------    
1   iotFlow   a5a4ac59-9aeb-416e-937f-e601ca8beba9   (empty)        
  
#> registry create-flow -verbose -u http://ec2-35-171-154-174.compute-1.amazonaws.com:18080 -b 250a5ae5-ced8-4f4e-8b3b-01eb9d47a0d9 --flowName iot-1  
  
71c09a57-0291-4b7f-bed1-0d9269aec846  
  
#> registry import-flow-version -verbose -u http://ec2-35-171-154-174.compute-1.amazonaws.com:18080 -f 71c09a57-0291-4b7f-bed1-0d9269aec846 -i iot-1.json  
  
1  
  
#> registry import-flow-version -verbose -u http://ec2-35-171-154-174.compute-1.amazonaws.com:18080 -f 71c09a57-0291-4b7f-bed1-0d9269aec846 -i iot-1.json  
  
3
Attacks in times of fear
Tags: security, phishing, covid19
Published: 2020-03-17 17:07:12

---
title: Attacks in times of fear
published: true
description: How cyber criminals and crackers take advantage of incipient fear to attack and steal data.
tags: security, phishing, help, covid19
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/9r1t0d99bkb673e9wkbv.jpg
---

Part of my job involves creating phishing attacks to aware companies about dangerous emails and links. One of the easiest way to distract from the fact that it's false is through fear: using the word "URGENT", "NOW", "I NEED IT REALLY FAST", and using __bold__ words. These things sometimes trigger workers to act as soon as they can, without carefully looking at the information in the email or checking if it's legit. This all worldwide situation of health alarm is making these attacks easier to perform, but they are not hired, they are for real. 

![DONT CLICK IT](https://dev-to-uploads.s3.amazonaws.com/i/es62ay901e6aj48ejhve.jpeg)

It's difficult for me to imagine what kind of person would take advantage of worldwide panic to attack Hospital systems with ransonwares or make phishing emails. It's disgusting, but in any case today I want to tell you some advices to tell if an email is legit or not. Please aware your family and friends.

- Check the sender carefully. It sometimes seems to be a legit source but it actually changes something: the domain, a single letter, a symbol (Russian alphabet or similar instead of regular Latin ascii). 

- If you are unsure, DON'T interact or reply or download the content. Simply don't. Search on the internet about a scam with the subject of the email, maybe, but DO NOT interact. There are certain attacks that hide viruses and scripts in excel or documents (macros) to hide from the antivirus and then infects your system. Don't!!

- Sometimes this kind of emails attach infected links. These days (everyday but mostly these days) before clicking any link, see the content. [Unwrap it if it's a short link](https://www.checkshorturl.com/) or safely paste it if it's attached in a word. 

- If a COVID-19 webapp is asking you too many personal questions (your exact address, bank account information, passwords) don't use it, don't share it. Never. Pay attention to your local legit information. If a smartphone applications need way more permissions that needed (contacts, systems, camera...) don't use or download it. 

![DONT FILL IT](https://dev-to-uploads.s3.amazonaws.com/i/0akr056gfl4tz41jwdor.jpeg)

- Don't trust open WiFis in your neighbourhood with names that would suggest they are publicly legit if you haven't heard of it. It could be someone using a [WiFi pineapple](https://shop.hak5.org/products/wifi-pineapple) to get your information.

**I'm open to answer to questions here if you are unsure about your security** these days. Please don't attach suspicious links in your answers, better describe the situation. Stay safe.
#discuss Would you consider an external help (guidance) for your side project? In order to MAKE IT HAPPEN
Tags: webdev, sideprojects, coaching
Published: 2020-03-17 17:01:12

I've been working as a programmer for 10+ years. And switched my current area of interest to dancing, teaching, blogging.

I still do code, but now it's all about my personal projects that I personally need.

And now I have this idea that inspires me SO much. 

> To guide people while they are trying their side project happen.

Call it coaching, call it mentoring. 

The idea is simple. Helping people to overcome perfectionism. And make sure the project will be accomplished.

Also, providing some perspective how to grow this side project into a bigger thing.

Would YOU be interesting in this type of guidance?
Would it be suitable for you to have a weekly chatting & guidance about your side project?
Would you pay for this type of mentorship?

What is your overall impression on this offer?

Thank you in advance for your point of view!
Can you help me with some feedback on my react practice code, please?
Tags: react, javascript, redux, interview
Published: 2020-03-17 16:42:38


I could really use some feedback on this assignment,
this was a home code interview task, my feedback was: "it's not that good, your level is not sufficient"

Is it?
i want to know how can i improve for next time.


working example:
https://csb-g81mx-du0znf2sl.now.sh/

code:
https://github.com/send2moran/test


Thank you!