teleren/devto huggingface dataset:
Hardware Hacking with Charlyn Gonda & Sophy Wong
Tags: discuss, podcast, hardware
Published: 2021-06-09 19:04:47

---
title: Hardware Hacking with Charlyn Gonda & Sophy Wong
published: true
description: Listen to S5E5 of DevDiscuss!
tags: discuss, podcast, hardware
series: DevDiscuss Season 5
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g8uubbqzbm158ohwihaq.png
---

I always love when another member of team Forem joins me to co-host DevDiscuss — and on S5E5, I was lucky enough to have @andy by my side. 

Andy is the Support Platform Engineer at Forem and has been here since the VERY early days of DEV. In fact, Andy was one of the first people to ever work at DEV in an official capacity! Needless to say, his insight is always valuable and it was super fun to have him on the show this week.  

{% podcast https://dev.to/devdiscuss/s5-e5-hardware-hacking-for-everyone %}
 
**It didn't hurt that we also had a pretty fun topic this week and two fantastic guests...**

- **[Charlyn Gonda](https://twitter.com/chardane)** is a coder by day and a maker by night. She’s passionate about creating art in between the physical and digital, and deeply believes that practicing creativity can lead to impactful solutions for challenging problems.
- **[Sophy Wong](http://twitter.com/@sophywong)** is a multidisciplinary designer whose projects range from period costumes to Arduino-driven wearable tech. She can be found at [sophywong.com](sophywong.com) and on her [YouTube](https://www.youtube.com/channel/UCFkrcZuO5F1GkHQdoVD8YBA) channel chronicling her adventures in making.

Now, make like a maker and listen to this week's episode 🧰 
 

---

_You can [follow DevDiscuss](dev.to/devdiscuss) to get episode notifications and listen right in your feed_ — or subscribe on your platform of choice! Plus, if you leave us a review, we'll send you a free pack of thank-you stickers. Details [here](https://airtable.com/shr8oKAIMZgdYnBxx). 

## Quick Listening Links
- [Apple Podcasts](https://podcasts.apple.com/us/podcast/s5-e5-hardware-hacking-for-everyone/id1513053883?i=1000524758636)
- [Spotify](https://open.spotify.com/episode/2oQVfmlJmK4ovSnzVPIdrG)
- [Google](https://podcasts.google.com/feed/aHR0cHM6Ly9mZWVkcy5kZXZwb2RzLmRldi9kZXZkaXNjdXNzX3BvZGNhc3QueG1s/episode/aHR0cHM6Ly9kZXZwb2RzLmRldi9wb2RjYXN0cy9kZXZkaXNjdXNzLzM4?sa=X&ved=0CAQQkfYCahcKEwiw0qzFiIvxAhUAAAAAHQAAAAAQCA)
- [Listen Notes](https://www.listennotes.com/podcasts/devdiscuss/s5e5-hardware-hacking-for-Ix6LJdyXB-t/)
- [TuneIn](https://tunein.com/podcasts/Technology-Podcasts/DevDiscuss-p1324596/?topicId=163650756)
- [RSS Feed](http://feeds.codenewbie.org/devnews_podcast.xml)
- [DEV Pods Site](https://devpods.herokuapp.com/podcasts/devdiscuss/episodes/170)

---
_Acknowledgements_ 
- _@levisharpe for producing & mixing the show_
- _Our season five sponsors: [CockroachDB](cockroachlabs.com/devdiscuss), [Cloudways](https://www.cloudways.com/en/?id=893892), [Scout APM](https://www.scoutapm.com/devdiscuss) & [Rudderstack](https://rudderstack.com/?utm_source=devto&utm_medium=podcast&utm_campaign=CMPGN_3_PS&utm_content=None&utm_term={keyword}&raid=6dbc05eeb293b421f68d02ce12648240)!_

# 🗣️🗣️🗣️
What is AbortController in Javascript?
Tags: javascript, programming, webdev, beginners
Published: 2021-06-09 18:53:00

**Do you know what is AbortConroller?**

It is a Web API provided by DOM Standard. 

The "AbortController" interface represents a Controller object that allows you to abort one or more Web requests as and when desired.

**Properties: signal**
It returns "AbortSignal" object instance to communicate with DOM request

> const controller = new AbortController();
> const signal = controller.signal;

**Controller has one method:**

> controller.abort();


When you abort an async operation, the promise rejects with a DOMException named "AbortError"

Do checkout the code snippet where it is aborting the request if it takes more than **3 seconds**.

```
//create a new AbortController object 
const controller = new AbortController();
const options = {
  method: 'POST',
  signal: controller.signal, 
  body: JSON.stringify({
    name:'Varun',
    work:'Dev'
  })
};  

// Abord the request after 3 seconds
setTimeout(() => controller.abort(), 3000);

//Send API Request to the server
fetch('/saveUser', options)
.then(response => {
  console.log(response.status);
})
.catch(error => console.error('Request Timeout'));
```

So what's the other alternative? Do share in comments.
Teachable Moments
Tags: education, engineering, help, mentorship
Published: 2021-06-09 18:46:36

#### Why do teachable moments matter?
When there is an opportunity to enlighten those around you, any time you don't act on it is basically withholding potentially helpful information, which could have negative effects.
#### How do I decide when to act on a teachable moment?
You will probably encounter many scenarios where you have a different opinion than someone, or you are asked what you think about a problem or solution. If you happen to have some knowledge on the topic, don't feel like your voice doesn't matter. You'd be surprised at where great ideas come from.
#### Does providing a teachable moment mean I am egotistical?
Not always. Wording your expressions in just the right fashion can express your care and devotion to spreading knowledge when it is needed. Coming from a place of "I've experienced that too, and let me show/tell you how I solved it in my scenario" is better than "This is the right way to do this, if you don't do this, you're wrong"
#### What happens if my opinion is challenged?
Accept the challenge. The point of presenting an alternative view is to compare and agree on a solution that works best for each other. If one solution works for you, it may not work for another person's case. It is excruciatingly difficult to find one-size-fits-all solutions that helps everyone. Accept the fact that your opinion might not always be the answer, just express that your opinion exists and move on.
#### Why did you write this post?
I decided that there have been so many comments on DEV articles where they express their opinion in such a negative context, like "Why did you choose that language, it sucks!" or "I can't believe you think that...". As a community, we should spread awareness that your views on a given topic are solely observational analysis and is subject to research that supports or refutes the opinion. I'd like to see this as a teachable moment for those who go about teachable moments in a demotivating manner.
top products zone
Published: 2021-06-09 18:44:28

Shopping is one of the manners in which that the web has changed the existences of large numbers of us. Not exclusively is it very helpful, in pretty much every occurrence, you can set aside cash utilizing it to buy various things. In any case, on the off chance that you have not utilized an item previously, or you are making a significant obtaining, it is a smart thought to peruse a couple of item audits before you settle on your official choice. 

For More Info: https://topproductszone.com/
Create a Admin Module in Angular
Tags: webdev, angular
Published: 2021-06-09 18:43:20


# How to Create Admin in Angular by Rajib Gupta






## Author - [@Rajibgupta](https://www.github.com/octokatherine)


  
## Documentation

[Documentation](https://techinfo-angular.blogspot.com)



1. **First we have to create admin module:**

   `ng g m admin --routing`
 
2. **--routing generates our routing module for admin automatically.** 

   with the help of router module we can pass our admin components. Which will only access by our admin.
   After the creation of admin module we have to create our component like

   `ng g c admin/login`

3. **And  for showing admin list we have to create one more component** 

   `ng g c admin/list`


4. **Then we have to define our login component and list component inside our admin-routing.module.ts file.


     ` import { ListComponent } from './list/list.component';`  
       `import { LoginComponent } from './login/login.component';`

       ` const routes: Routes = [
         {path:"login",component:LoginComponent},
         {path:"list",component:ListComponent},
       ]; `




5. **After that go to the app.module.ts file and define admin module inside that.** 

    `import { AdminModule } from './admin/admin.module';
     imports: [
     AdminModule
    ], `
    
6. **Then, we need to call our login and list component inside our parent component or app.component.html file.** 


       `<div class="container">` 
       `<ul>
              <li><a routerLink="login">Login</a></li>
              <li><a routerLink="list">List</a></li>
       </ul>`
      ` <router-outlet></router-outlet> `
      
       `</div>`

7. **And lastly we need for run our project by serving.** 

    `ng serve`


 
**Thank you.**
How to cheat with Web Components
Tags: webcomponents, javascript, webdev, showdev
Published: 2021-06-09 18:28:08

---
title: How to cheat with Web Components
published: true
description: 
tags: webcomponents,javascript,webdev,showdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5p2d6ien4i192kibmtk7.jpg
---

_Someone_*, years ago, did a Web Component with the impossible name 
``<card-t>`` (because Web Components need a hyphen in the tag name)

It bundles 52 SVG cards in **one single 16KB file**!

### Let's **steal** that one Web Component:

```html
<script src="//cardmeister.github.io/elements.cardmeister.min.js">
```

We then use the Web Component &lt;card-t> **class _definition_** 
for our own **&lt;poker-card>**:

```html
<script>
customElements.whenDefined("cardt-t").then(() => {
  customElements.define( 
    "poker-card", 
    class extends customElements.get("card-t") {}
  )
});
</script>
```

And that's it, you now have 52 SVG playing cards available!

Without changing any source-code

```html
<poker-hand>
  <poker-card suit=Hearts rank=Ace></poker-card>
  <poker-card suit=Hearts rank=King></poker-card>
  <poker-card suit=Hearts rank=Queen></poker-card>
  <poker-card suit=Hearts rank=Jack></poker-card>
  <poker-card suit=Hearts rank=10></poker-card>
</poker-hand>
```

![](https://i.imgur.com/tjEAEoJ.png)

And all _**you**_ have to do is program a Poker Game... or Solitaire, or Hearts...

{% jsfiddle https://jsfiddle.net/WebComponents/5g38fmxb html,result,js,css %}

That old Repo with documentation & UNlicensed source: https://github.com/cardmeister/cardmeister.github.io

\*) Me
<hr>

<br>
<hr>
<br>

{% jsfiddle https://jsfiddle.net/WebComponents/62f1eLay result,html,js %}
Help me on Sequelize ORM
Published: 2021-06-09 18:23:00

Hi!

I am new to Sequelize ORM so I am struggling to get through it.
I want to get a list of items and count of associated items by applying filter.
Here are my models
```
const ActionModel = db.define(
  'action',
  {
    id: {
      type: Sequelize.INTEGER,
      primaryKey: true,
      autoIncrement: true,
    },
    ...
    buttonIndex: { type: Sequelize.INTEGER },
    ...
  },
  {
    tableName: 'action',
  },
)


const PageModel = db.define(
  'pages',
  {
    id: {
      type: Sequelize.INTEGER,
      primaryKey: true,
      autoIncrement: true,
    },
    pageTitle: { type: Sequelize.INTEGER },
    pageLink: { type: Sequelize.STRING },
  },
  {
    tableName: 'pages',
  },
)

PageModel.hasMany(Action, { as: 'actions', onDelete: 'CASCADE'})
```

So If I get a list of pages, it will look like this
```
[
    {
        "id": 1,
        "pageTitle": "Python community",
        "pageLink": "https://fairy-dev.io/python",
    }
]
```

The actions are associated with pages as they happen on the pages.
I want to add two more fields to the response.
`visitCount` and `buttonClickCount`
`visitCount` is total number of actions on the page where `buttonIndex` == 0
`buttonClickCount` is total number of actions on the page where `buttonIndex` != 0

So the result will look like this
```
[
    {
        "id": 1,
        "pageTitle": "Python community",
        "pageLink": "https://fairy-dev.io/python",
        "visitCount": 5,
        "buttonClickCount": 24
    },
   {
        "id": 2,
        "pageTitle": "Sequelize community",
        "pageLink": "https://fairy-dev.io/sequelize",
        "visitCount": 7,
        "buttonClickCount": 57
    }
]
```

I know I should use `attributes` and `include` but not sure what the exact answer is.
Any help would be appreciated.

Thanks in advance.
100 days to learn JavaScript
Published: 2021-06-09 18:19:03

The best way to learn something is the hard one... They say. 

I'm a medical student, my schedule is just not easy and all my future projets need code(Machine Learning, Website etc)

I want to know how to create from scratch a full fonctionnal Facebook-like website, how do I get there ? Already have the books, the courses and the platform (Pluralsight)

It's been 6 months that I started. First with Python and Django,  HTML, CSS after and now JavaScript. I already know some basics but I still don't know how to really code in JavaScript. 

From this day, i will be posting my long 100 days journey to learn, master and understand  at least the most basic JavaScript...
Image processing with OpenCV
Tags: python, opencv
Published: 2021-06-09 18:18:06

We are going to perform the following tasks in this blog:

1. Create an Image using OpenCV
2. Combine two images using OpenCV
3. Crop and Swap images

**1. Creating an image using OpenCV**

`import cv2
import numpy as np
img=np.zeros((513,513,3), np.uint8)
cv2.rectangle(img,(0,0),(513,171),(255,165,0),-1) #orange 
cv2.rectangle(img,(0,171),(512,342),(255, 255, 255),-1) #white
cv2.circle(img,(256,256), 80, (0,0,255), -1)
cv2.rectangle(img,(0,342),(512,512),(0,255,0),-1) #green
cv2.imshow('FLAG',img)
cv2.waitKey(10)
cv2.destroyAllWindows() `

We have created a flag from the above code,

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p5o2gcnuvggbow3wguvm.jpeg)

In this code, we have used `.rectangle` function to create a rectangle shape of preferred dimensions.
`.circle` method is used to create a circle shape by given radius and coordinates of the centre.
We display the final image using `.imshow` method.


**2.Combining two images using Opencv**

`dog=cv2.imread('golden.jpeg')
elephant=cv2.imread('elephant.jpeg')
dog_crop=dog[0:225,0:192] 
elephant_crop=elephant[0:225,0:192]
Image_combine=cv2.hconcat([dog_crop,elephant_crop])
cv2.imshow("Combined_image",Image_combine)
cv2.waitKey()
cv2.destroyAllWindows()`

using `.hconcat` method, we can combine two images horizontally.
Before combining, the images have to be cropped such that they are in the same shape.

The output is shown below,

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4nhat6p52qeyhrhkolfb.png)

**3. Crop and Swap images using OpenCV**

Here our goal is to crop dogs face and swap with elephants face.

Implementation-
The shape of dog is found out by the code, `dog.shape` which is `(225, 225, 3)`

To draw the plot of dog's image,
`import matplotlib.pyplot as plt`
`plt.imshow(dog)`

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m8w6vkurov3xxfwal1ze.png)

We can see from the above plot that the dimensions of dog's face are  X(75,165), Y(20,110)

Now we need to swap elephant's face with cropped dog's face,
`dog_crop = dog[20:110, 75:150] 
elephant[20:120,55:130] = cv2.resize(dog_crop, (75,100))
cv2.imshow('swapped image', elephant)
cv2.waitKey()
cv2.destroyAllWindows()`

The syntax of cropping and swapping is,
`elephant[y:y+h, x:x+w] = cv2.resize(img, desired_shape(x,y) )` 

The output generated is,
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dgbexasymkgyfikfe9ka.png)
Added a Chat-bot to Chrome Extension;
Tags: showdev, javascript, coding
Published: 2021-06-09 18:15:43

If you follow me then you might know I created one chrome extension which allows people to chat if they are using same website.
> Know More:
{% post https://dev.to/areeburrub/i-build-this-extension-this-enables-every-webpage-on-internet-to-have-a-live-chat-feature-5e86  %}

### Why a chatbot to extension
After Publishing my extension `V1` I asked some of the users for review, and the said that they tried to use it on some websites but didn't got anyone to talk.

This is happening because of not having a huge number of users currently.

So to entertain my users I added a chatbot which can talk to them if no one is there.

### How I did it.
![Dialogflow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9q8ldacfa2i815286wu6.png)
I used Dialogflow as a chat bot provider as it's natural speaking is amazing.

> If you don't know about Dialogflow _it is a Cloud Service Provided by Google, let you create chat bots and train them as you want them to talk_
### How it works in Chrome Extension,
Chrome extension don't work on frameworks like NodeJS or Flask so it was difficult to add Dialogflow library to it directly.

So what I did is, created a new flask(python) API as it's very simple to use Dialogflow's Python SDK and then hosted it on Heroku and used Dialogflow in my chrome extension via API calls.

>I am not going in much details right now, if you want to know how I used Dialogflow in python and what codes I wrote then ask me in the comments.

To use API I used simple `fetch()` method and used the chat bot in an extension.

> I tried so much to find a single way to do it without making my own API but I found no way to do it without a framework. I used Python as it fell easier to me but you can use any other framework (Ruby, PHP, NodeJS, etc...).

## Try talking to the Bot:
Have a look to my Chrome Extension [**Click Here**](https://chrome.google.com/webstore/detail/live-chat-for-all-website/jndncpcadllfnlbdlmfdjfachfkjnmki)
Pagination in selectbox/dropdown, Optimal way to show large data in selectbox using select2
Tags: laravel, select2, pagination
Published: 2021-06-09 17:58:59

Select2 requires a response like this for pagination to work
```
{
  "results": [
    {
      "id": 1,
      "text": "Option 1"
    },
    {
      "id": 2,
      "text": "Option 2"
    }
  ],
  "pagination": {
    "more": true
  }
}
```
we can generate this response by modifying the pagination in laravel

```php
<?php

namespace App\Http\Controllers;

class SomeController extends Controller
{
   public function getdataforselect2(Request $request){
        
        if ($request->ajax()) {

            $term = trim($request->term);
            $posts = DB::table('channels')->select('id','name as text')
                ->where('name', 'LIKE',  '%' . $term. '%')
                ->orderBy('name', 'asc')->simplePaginate(10);
           
            $morePages=true;
           $pagination_obj= json_encode($posts);
           if (empty($posts->nextPageUrl())){
            $morePages=false;
           }
            $results = array(
              "results" => $posts->items(),
              "pagination" => array(
                "more" => $morePages
              )
            );
        
            return \Response::json($results);
        }
    }
}
```
```php
//api.php

Route::get('/tags', function() {
    return view('Somefolder.index');
});
Route::get('dataforselect2', 'SomeController@getdataforselect2')->name('dataforselect2');
```

```html
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
  <div class="container">
  <div class="page-header">
    <h1>select2 with pagination</h1>
    </div>
    <select id='channel_id' style='width: 200px;'>
        <option value='0'>- Search Channel -</option>
     </select>
    </div>
    <script type="text/javascript" src='//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
    <!--<![endif]-->
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script> <script >

(function() {
 
  $("#channel_id").select2({
    placeholder: 'Channel...',
    // width: '350px',
    allowClear: true,
    ajax: {
        url: '/dataforselect2',
        dataType: 'json',
        delay: 250,
        data: function(params) {
            return {
                term: params.term || '',
                page: params.page || 1
            }
        },
        cache: true
    }
});
})();

    </script>
  </body>
</html>
```
[gist of all the code](https://gist.github.com/sahilkashyap64/422e3a4672bf23d376f4e5b1ce7df7c7)
Write-up: KodeKloud Sysadmin (Create a Non-interactive Shell)
Published: 2021-06-09 17:55:41

In this task, proposed [here](https://www.kodekloud-engineer.com/), the sysadmin has to create a new user with a non-interactive shell. The full prompt goes as follows:

> The System admin team of xFusionCorp Industries has installed a backup agent tool on all app servers. As per the tool's requirements they need to create a user with a non-interactive shell.Therefore, create a user named mark with a non-interactive shell in the app02 server

To do so, we need to understand two commands in the Linux lexicon: **ssh** and **adduser**.

First, let's use the **ssh** command to log into the server specified in the prompt. You can use either

`ssh -l user server`
or
`ssh user@server`

(Remember to replace **user** to your actual ssh username and **server** to your actual ssh servername).

Once we log into the specified server, we are able to create a new user with a non-interactive shell, as prompted before. In this case, we'll need to use a flag from the `adduser` command, the **-s**. According to the adduser's manual page, the **-s** means:

> --shell SHELL
Use SHELL as the user's login shell, rather than the default specified by the configuration file.

As it says, it will set the newly created user to a shell. We need to create a non-interactive shell, which means that we need to set the user shell to **/sbin/nologin**. When we do so, it will prevent the user to login. It's literally written in the nologin manual page the following:
> nologin - politely refuse a login

The full command we need to run is a combination of:

**sudo** - To access admin privileges
**adduser** - The command to create a new user
**user** - Replace it with the new user's username.
**-s** - The flag to set a shell to the newly created user
**/bin/nologin/** - The directory related to the nologin shell.

`sudo adduser user -s /bin/nologin`