teleren/devto huggingface dataset:
Create your own multi-selected input in React-Native
Published: 2020-12-17 15:59:20

We can create our multi-selected input in react-native very easily. Let’s say in our demo user can select his favorite brands from a list of options. The user can check/uncheck the inputs.

First, we need to show all the inputs to the user. We can use FlatList to render the items. Like so –

{% gist https://gist.github.com/Saad-Bashar/45ab39aabe4f7811efbf8823e3254be2 %}

Then we need to keep track of the items that the user is selecting. We can keep track of them using an array. We have two conditions – When an item is already selected and when the item is not selected. So every time the user clicks on an item we need to check if it has been already selected, if it is already selected then we need to remove the item from the selected items, if not then we need to add the item to the selected items list.

We can also change the color of the button and text according to the condition. This is how our *renderBrands* function looks like after the proper change.

{% gist https://gist.github.com/Saad-Bashar/8e5221f90f9a3823f2635dfa8a40135f %}

The complete code can be seen in the following snack. https://snack.expo.io/@saad-bashar/68cb24
Top 5 Backend Programming Languages
Tags: web, javascript, node, laravel
Published: 2020-12-23 14:14:17

---
title: Top 5 Backend Programming Languages
published: true
date: 2020-12-17 15:57:32 UTC
tags: web,JavaScript,node,laravel
canonical_url: https://medium.com/backenders-club/top-5-backend-programming-languages-4008aa08f376
---

[![](https://cdn-images-1.medium.com/max/1688/0*7ynKfbDN6q1sYGBD.jpg)](https://medium.com/backenders-club/top-5-backend-programming-languages-4008aa08f376?source=rss-8b0955f01559------2)

Top 5 programming languages is more of a prediction towards 2021, highlighting the most popular backend programming languages you should…

[Continue reading on Backend Developers »](https://medium.com/backenders-club/top-5-backend-programming-languages-4008aa08f376?source=rss-8b0955f01559------2)
Feature Implementation: Explain JMeter
Tags: dohackathon, testing, performance, webperf
Published: 2020-12-17 15:48:22

Day 3 in DO Hackathon. After successful deployment, I was able to start working on the feature implementation.

Here is my app which is in progress: 

**[Explain JMeter](https://explain-jmeter-krxsh.ondigitalocean.app/)**

It is a simple utility to explain JMeter commands and more. As of now, it displays right commands, more information will be added eventually.

Please take a look and let me know your inputs.

🙏
(Video Series)⚡️Docker Practical Guide⚡️: Use Docker with NodeJS in 2021
Tags: docker, node, devops, javascript
Published: 2020-12-17 15:45:42

It's a Series on DOCKER- ⚡️DOCKER Practical Guide⚡️
I have used NodeJS, But all the  Docker stuff in this series can be applied in any technologies like - Java, .Net, Python, Go, you name it.

In this series, I will show some fun Docker stuff we might need in our day-to-day work. That's why the name of the series is - ⚡️DOCKER Practical Guide⚡️

Enjoy 🌸


{% youtube lPd8T611_aA %}

In this Series, I will post the following topics and more 🙌
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/b2vpj4sgpf059uvh253g.png)

SUBSCRIBE to YouTube Channel - https://www.youtube.com/c/TheDestroDevShow?sub_confirmation=1
LIKE FB Page - https://www.facebook.com/the.destro.dev.show/
Follow on Twitter - https://twitter.com/destro_mas
Follow on DEV - https://dev.to/destro_mas

Made with ❤️ in Berlin!

Cheers!
👋
<hr />
As I am trying to contribute contents on the Web, you can buy me a coffee for my hours spent on all of these ❤️😊🌸

<a href="https://www.buymeacoffee.com/destrodevshow" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 45px !important;width: 117px !important;" ></a>
Automate Git in 3 lines of code
Tags: git, github, bash
Published: 2020-12-17 15:35:17

Hi there, I am going to show you how to automate your most used git commands in just three lines of code.
Our program will be able to run add, commit and push commands for us in just on call. Let me show you.

## Writing the script
We are using shell script or bash to run our commands for us.

1. We will have to create a file name script.sh
You can change the name to anything but maintain the .sh extension.

2.Then we write the code
```sh
#!/bin/bash

# This is the add command that will run add all your modified files to the working tree
git add .

# The git command takes an argument when running the script to use as the commit message
git commit -m "$1"

# Finally we push our code.
git push
```

And that's it, we are done.
Then we can run the script by running `bash script.sh "commit message here"` in the terminal.

Thank you for reading.
[Twitter](https://twitter.com/cirlormx)
[Website](https://cirlorm.dev)
Get new website Design inspiration
Tags: webdev, design
Published: 2020-12-17 15:32:26

I have found this awesome website called **Lapa Ninja**. It got varieties of website landing page design ideas with lots of categories. These designs are really real-world website, And they provide links to those websites, to check on the website. 

[lapaNinja](https://www.lapa.ninja/)

So not only web design ideas, they provide
* Free design books
* Free UI kits
* Free Illustration libraris
Designing A Programming Language
Tags: python, replit, design, beginners
Published: 2020-12-17 15:32:00

# Hello
I recently created a post about how a lexer and parser works... this is a continuation of that post. 

# Starting

When writing a programming language, you want to establish the grammar first. It is the most *important* part of the language. You might be thinking: "But what about the code?? That is the most hardest part of the programming language!!"
At a time, I did think that too. But I realized, once I started coding it right away, without establishing the *full* grammar, I got lost and didn't know what to do. That is why you establish the grammar first. 

What will the grammar be like?? Will it be like ruby and rust? Julia and Haskell? What do *you* think? What is something you *really* want in programming? Take that, and put it in your language. Do you want a built in file-encrypt function? Will the print be a macro or function? These are all questions you have to ask yourself before actually creating a programming language.

The biggest part: **The design Goal**. The design goal is a goal that you want your programming language to achieve. *Will it target machine learning or Data Science? Will it target something unique that you made up?*
The design goal really is the biggest part. It determines what kinda of people you are targeting. It determines whether the language is useful or not. I mean, sometimes it is fun to make a language for general purposes, but you will lose interest(coming from the experience)


# :)
I hope you use this information well, and happy coding.
Hacking KYF - Part 1 Basic UI with Chart
Tags: dohackathon, react
Published: 2020-12-17 15:20:17

--- 
series: Hacking Know Your Finances DO Hackathon
---
I have spent 1 - 2 hours over 3 days to set up a basic prototype. It has been quite a while since I focus on React coding. Previously I spend more time with Redux, but now that I have started this, I prefer to use this time to pick up my understanding and experiment with Hooks. It took more than I expected to understand it, but in tech, we are always learning =)


## What I have done?
- Intergrated with [AntDesign](https://ant.design) and [AntChart](https://charts.ant.design)
- Uses React Hooks and AppContext to string state across function
- Basic workable interaction with Chart
- Auto Deploy with Github main Branch
- App is Deployed [here](https://kyf-9zy3a.ondigitalocean.app/).

## What I plan(might) do next?
- Improve UI visually (e.g themed colors, padding, font)
- Add in different useful projection in a graph
- Add in suggestion/result explantation

## Quick Recap on Goal
My goal is to end up with an MVP that any users can quickly enter basic information like expenses, income, and saving. They then can pick on some default item like "buying a car", "renting a new place" or "earning side income". Every picked option will immediately reflect on how it will help or impact them financially.
Preventing Category URL from the product page in Magento2
Tags: magento2, urlrewite
Published: 2020-12-17 15:17:25

Magento is providing the best tool for managing the product URLs which is the URL Rewrite mechanism. It enables to convert the product URLs to more readable when visitors access the Target URLs.

eg: 
Target URL
/catalog/product/view/id/21

Request URL
/mens/this-is-a-nic-url.html

So using both types of URLs will result the same product page in the frontend. Sometimes you might need to prevent accessing one URL type,

eg: if you need to prevent access to the Target URL but allows the Request URL, we can handle that scenario as follows.

I've created a sample module for this.

Directory Structure
>
Vendor
-Module Name
--etc
--Observer
--registration.php

First Create the module.xml and registration.php

Inside the **etc**, create a directory **frontend** and create a file **events.xml**

events.xml
```
<?xml version="1.0"?>
<!--
/**
 * Copyright (c)
 */
-->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Event/etc/events.xsd">
    <event name="controller_action_predispatch_catalog_product_view">
        <observer name="vendor_predispatch" instance="Vendor\Module\Observer\PreDispatch" />
    </event>
</config>
```

Create a directory **Observer** in the module root. Create a file inside the **Observer** directory **PreDispatch.php**

PreDispatch.php
```
<?php
/**
 * Copyright (c)
 */

namespace Vendor\Module\Observer;

use Magento\Framework\App\Request\Http;
use Magento\Framework\App\ResponseInterface;
use Magento\Framework\Event\Observer;
use Magento\Framework\Event\ObserverInterface;
use Magento\Framework\UrlInterface;
use Magento\Framework\View\Context;

class PreDispatch implements ObserverInterface
{
    /**
     * Uri value to be checked with
     */
    const NEEDLE = '/catalog/';

    /**
     * @var ResponseInterface
     */
    private $response;

    /**
     * @var Context
     */
    private $context;

    /**
     * @var Http
     */
    private $http;

    /**
     * @var UrlInterface
     */
    private $url;

    /**
     * CatalogCategoryViewPostDispatch constructor.
     *
     * @param ResponseInterface $response
     * @param Context $context
     * @param Http $http
     * @param UrlInterface $url
     */
    public function __construct(
        ResponseInterface $response,
        Context $context,
        Http $http,
        UrlInterface $url
    ) {
        $this->response = $response;
        $this->context = $context;
        $this->http = $http;
        $this->url = $url;
    }

    /**
     * @param Observer $observer
     */
    public function execute(Observer $observer)
    {
        if (substr($this->http->getRequestUri(), 0, 9) === self::NEEDLE) {
            $customerBeforeAuthUrl = $this->url->getUrl('noroute');
            $this->response->setRedirect($customerBeforeAuthUrl)
            ->sendResponse();
        }
    }
}
```

Cheers!
Why is VSCode trying to run Java when I want to look at the source code of a `.class` file?
Tags: java, help, vscode, watercooler
Published: 2020-12-17 15:16:12

I want to look at some code in a `.class` file in VSCode (which usually works when I do `ctrl+lclick` on the class I want to view), but instead it brings up the terminal/console as if it's trying to execute the code for no reason.
It randomly does this, so some times it will show a class I want to see, but other times it won't show any thing, and try and run it (sometimes this bug(?) happens on the same class that it let me view earlier (I even tested with classes from `java.lang`, and only classes from `java.lang`)).

Any reason(s) why this may happen?

<div>
##<b><center><b>Thanks!<br/>Cheers!</b></center></b>
</div>
How to Build an AR Face Swap App in 15 Minutes or Less
Tags: tutorial, unity3d, showdev, augmentedreality
Published: 2020-12-17 15:11:42

Can’t wait for a sequel for Nicolas Cage And John Travolta’s Face/Off movie? Then create your own simple augmented reality (AR) face swapping demo application with Unity, AR Foundation, and echoAR! The full demo can also be found on echoAR’s [GitHub] (https://github.com/echoARxyz/Unity-ARFoundation-echoAR-demo-Face-Change).

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

**Register**
Don’t have an API key? Make sure to register for FREE at [echoAR] (https://console.echoar.xyz/#/auth/register).

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

**Setup**
* Create a new Unity project.
* Clone the [Unity-ARFoundation-echoAR] (https://github.com/echoARxyz/Unity-ARFoundation-echoAR) sample code.
* Open the sample scene under *AR Foundation\Scenes\FaceTracking\FaceMesh.unity*.
* [Set the API key] (https://docs.echoar.xyz/unity/using-the-sdk) in the *echoAR.cs* script inside the *echoAR\echoAR.prefab* using the the Inspector.
* [Add an image hologram] (https://docs.echoar.xyz/web-console/manage-pages/content-page/how-to-add-content) by uploading one of the *face-#.jpg* files from the [assets] (https://github.com/echoARxyz/Unity-ARFoundation-echoAR-demo-Face-Change/blob/master/assets) folder to the console.
* Overwrite the existing *echoAR/CustomBehaviour.cs* script with the new [*CustomBehaviour.cs*] (https://github.com/echoARxyz/Unity-ARFoundation-echoAR-demo-Face-Change/blob/master/CustomBehaviour.cs) file.

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

**Build & Run**
* [Build and run the AR application] (https://docs.echoar.xyz/unity/adding-ar-capabilities#4-build-and-run-the-ar-application). Verify that the *AR Foundation\Scenes\FaceTracking\FaceMesh* scene is ticked in the *Scenes in Build* list and click *Build And Run*.

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

**Learn more**
Refer to our [documentation] (https://docs.echoar.xyz/unity/) to learn more about how to use Unity and echoAR.

**Support**
Feel free to reach out at support@echoAR.xyz or join our [support channel on Slack] (https://join.slack.com/t/echoar/shared_invite/enQtNTg4NjI5NjM3OTc1LWU1M2M2MTNlNTM3NGY1YTUxYmY3ZDNjNTc3YjA5M2QyNGZiOTgzMjVmZWZmZmFjNGJjYTcxZjhhNzk3YjNhNjE).

-------

*echoAR* (http://www.echoAR.xyz; Techstars ’19) is a cloud platform for augmented reality (AR) and virtual reality (VR) that provides tools and server-side infrastructure to help developers & companies quickly build and deploy AR/VR apps and experiences.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/dstybjr8i8er25np30kd.png)
MySQL Tutorial for Beginners
Published: 2020-12-17 15:09:23

MySQL is a relational database management system. MySQL Tutorial for Beginners because it is a free open source SQL database management system and it stores content for your website and access that content directly using PHP. It is fast, reliable, and easy to use. MySQL is a cross-platform that runs on the server.it is a very powerful program to handle a large set of functionality of the database table.MySQL Tutorial for Beginners contains topics for the database include insert record, delete record, update record, alter record, drop record and etc.https://www.phptpoint.com/mysql-tutorial/
How often do you update your personal website?👀
Tags: discuss, webdev, career, showdev
Published: 2020-12-17 15:07:52

In today's discuss, I'd like to know: 

- How often do you update your personal website?
- What types of updates do you make most often?

I update my website typically once or twice a month, and that is usually for publishing blog posts. However this month I've been conducting a huge SEO and content audit of my site and have made multiple changes. 😅 They're mostly content changes but there have been some design changes as well.

Share your updates in the comments!
Firefox Add-Ons: Dynamics 365 - Show table browser
Tags: dynamics365, firefox, javascript, d365
Published: 2020-12-17 14:59:59

Hi everybody,
I developed Dynamics 365 - Show table browser add-ons.

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

You can look from here:
https://addons.mozilla.org/tr/firefox/addon/d365-show-table-browser/

GitHub link:
https://github.com/semihcelikol/d365-table-browser
How to add custom fields to the order data on the product page
Published: 2020-12-17 14:57:21



In the third article of #4weeksShopifyDev, I'll be talking about how to add custom fields to the order data on the product page

I'll be adding an engraving custom field on the product page and display the output of the customer in order page (Shopify Admin)

Demo Image
![ How to add custom fields to the order data in the product page](https://res.cloudinary.com/practicaldev/image/fetch/s--ATjEYJLP--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://miro.medium.com/max/1400/1%2Ar2pTXAWDUGaePYjtcXEfYQ.png)

Note: I'm using the Debut theme, you may have different architecture

## Create a product template

- First, we need to create a custom product Shopify template and called product-custom.liquid
  ![ How to add custom fields to the order data in the product page](https://miro.medium.com/max/1400/1*9JffAr-Kbw7oLALLMyOyyQ.png)

- Create a new Shopify section and called product-custom-template and paste the code from the product-template section
  ![ How to add custom fields to the order data in the product page](https://miro.medium.com/max/1400/1*PmC_W_FJ4155tIwZgqKRnA.png)

- On the product page , change the template suffix to the product.custom

  ![ How to add custom fields to the order data in the product page](https://miro.medium.com/max/1400/1*qzfBSjz4kJxKzz9swXZzYQ.png)

## Create Custom Fields

- Go to the [Shopify UI Elements Generator](https://ui-elements-generator.myshopify.com/pages/line-item-property).
- Create a new custom field
  ![ How to add custom fields to the order data in the product page](https://miro.medium.com/max/1400/1*ZxQnYFNETlm6OPy-v6tzCg.png)

- Copy the generated code
  ![ How to add custom fields to the order data in the product page](https://miro.medium.com/max/1400/1*ZxQnYFNETlm6OPy-v6tzCg.png)

- Paste the code before <button type="submit"

Now, you can test it by adding the product to the cart and add the custom field value and process the checkout.

Et voila, the custom field value appear on the checkout page and order page
![ How to add custom fields to the order data in the product page](https://miro.medium.com/max/1400/1*r2pTXAWDUGaePYjtcXEfYQ.png)
Startups can benefit from using Microsoft Dynamic software in 3 ways
Tags: startup, devops, beginners
Published: 2020-12-17 14:55:17


Not for just large established enterprise  Microsoft dynamics- but also for small businesses and startups, there are many extraordinary Microsoft Dynamics benefits. Microsoft Dynamics can be easily scaled to any organization because it is a versatile system and affordable. Yes, affordability is what every startup is looking for. 

For startups, I share the **benefits of using Microsoft Dynamic** under below,

##1. Increased Sales efficiency

A lean team of dedicated individuals and talented lean startups often have to chase procure sales and leads. In less time to reach out to more leads, Microsoft Dynamis empowers each individual employee with the ability. In startup’s fund with opportunity management, social selling, and mobile sales solutions, and increased sales efficiency correlates directly to more dollars. In addition to a full collaboration system- analytics algorithms and complex sales intelligence include in Microsoft dynamic- to make the most out of the time, your selling team will able.

##2. Improved Customer Retention 

In customer retention and customer acquisition, a wide variety of customer service benefits are offered by the Microsoft Dynamic GP that aid. The faster that startup can grow, the faster a startup can gain customers and keep them to a stable financial foundation; customer retention is far costly than acquisition on which a business can build upon. The major Microsoft Dynamics benefits include self-servicing, increased agent productivity, field serving, and omnichannel serving. 
To serve your customers, your employees will be able whether they are, and to reach out to your staff members, your customers will be able through a variety of well-integrated channels. 

##3. Integrated Software Solutions

To operate everything smoothly is critical in a startup. With their Microsoft Dynamic platform, a startup can integrate nearly every part of its business with disparate software solutions rather than having to create a proprietary struggle or system. Microsoft Dynamics integrates naturally with Office 365, Microsoft Outlook, Microsoft SharePoint, and all other Microsoft solutions. While reducing administrative, maintenance, and troubleshooting hours, remove redundancies and gaps that to pay for organization needs.

#Conclusion: 

Through technology, startups thrive on innovation, and to level the playing field between their entrenched contenders and themselves; many feel that the only way they can. With the competition, the lean company can catch up by the above Microsoft Dynamics benefits. You can [hire Microsoft Dynamics 365 developer](https://www.bacancytechnology.com/hire-microsoft-dynamics-365-developer)  for a free consultation for your startup.
IOT in a Nutshell
Published: 2020-12-17 14:51:14

<img src="https://dev-to-uploads.s3.amazonaws.com/i/kqgea0i38dh9u35djh6y.png">

In the world we live in today, almost everything is connected in some way to the internet. The Internet of Things is a simple concept, taking all the things in the world and connecting them to the internet.

If we see a simple definition of IoT,
The interconnection via the Internet of computing devices embedded in everyday objects, enabling them to send and receive data.

What this simply means is that the objects around us which we use in day to day life has many activities to do and it has statuses. How amazing would it be if we could control it through internet? For example, say you have a fan at home, its connected to internet, and you too are also connected to internet. Then wherever you are in the world, as long as you have access to internet by any means you also have access to you fan in your room. 

Another aspect is that, objects that we use in our day to day life emits several statuses and actions. So, when this object is connected to internet and to smart sensors. Then sensors can transfer data and information through internet.
IoT is not only used for personal needs and day to day life. They are also used in many disciplines such as healthcare, logistics, industry, farming, and many more.

IoT has the potential to redefine the healthcare system. The Internet of Medical Things (IoMT) is virtually the collection of medical devices and applications that connect to healthcare IT systems through online computer networks. 

As the amount of connected medical devices increases, the power of IoMT grows as grows the scope of its application, be it remote patient monitoring of people with chronic or long-term conditions or tracking patient medication orders or patients’ wearable health devices, which can send information to caregivers.

If we take the farming industry, the sensors can collect information about the soil moisture to tell the farmer how much to water the crops, but you don’t actually need the farmer. Instead, the irrigation system can automatically turn on as needed, based on how much moisture is in the soil. 
To wind up things, filling our earth with IoT is often thought of as “The 4th Industrial Revolution”, because of how impactful it can be. We should all be aware of the changes happening and the issues they bring, but also appreciate we live in a world where these kinds of changes are possible and are actually happening.