teleren/devto huggingface dataset:
Integrating Vue Devtools into an Electron Application
Tags: devtools, electron, vue
Published: 2021-12-16 04:32:43

![Using Vue Devtools to debug Electron application running VueJS on the frontend.](https://codybontecou.com/images/electron-app-with-vue-devtools-meta.png)

# Integrating Vue Devtools into an Electron Application

> Bringing the VueJS devtools into our Electron application to help debug. This post assumes you have followed along with my previous [post](https://codybontecou.com/global-state-management-in-an-electron-app.html).


## Installation

Vue Devtools provides a non-browser specific version of their devtools that they call [standalone](https://devtools.vuejs.org/guide/installation.html#standalone).

You can install the package globally:

```bash
npm install -g @vue/devtools@beta
# Or with yarn
yarn global add @vue/devtools@beta
```

Or within your project as a dependency:

```bash
npm install --save-dev @vue/devtools@beta
# Or with yarn
yarn add -D @vue/devtools@beta
```

_Because our application is using Vue 3, we must us version 6 beta of the devtools according to [this](https://github.com/vuejs/devtools/issues/1199) issue_

## Using the VueJS devtools globally

Once installed globally, you can now run the command `vue-devtools` on your command line.

This will spawn an instance of the devtools within its own window.

![Standalone vue-devtools that spawns when vue-devtools command is ran.](https://codybontecou.com/images/vue-devtools-waiting-for-connection.png)

Now, add the following to the `<head>` section of your applications HTML file:

```html
<script src="http://localhost:8098"></script>
```

If you want to debug your application remotely, use the following code snippet instead:

```html
<script>
  window.__VUE_DEVTOOLS_HOST__ = '<your-local-ip>' // default: localhost
  window.__VUE_DEVTOOLS_PORT__ = '<devtools-port>' // default: 8098
</script>
<script src="http://<your-local-ip>:8098"></script>
```

**Don't forget to remove this code before deploying to production!**

Once your application has the appropriate script tag within its HTML, run it _without_ killing the terminal that is running `vue-devtools`.

In our case,

```bash
npm run dev
```

## Running the Vue Devtools as a dependency

Within your project directory, run the following command should spawn the devtools:

```bash
./node_modules/.bin/vue-devtools
```

For convenience sake and ease-of-use, I moved the `./node_modules/.bin/vue-devtools` command into my `package.json` scripts:

```js
"devtools": "./node_modules/.bin/vue-devtools"
```

When using the devtools as a local dependency, we do not need the script tag within our `<head>`

Remove this code snippet if you added it earlier:

```html
<script src="http://localhost:8098"></script>
```

You should be all set up now. If you need additional help, check out their [documentation](https://devtools.vuejs.org/) or their GitHub repo [documentation](https://github.com/vuejs/devtools/tree/legacy/packages/shell-electron#vue-remote-devtools).

Hope you enjoyed it!
How To List Docker Containers With Pretty Formatting
Tags: docker, tips, beginners, howto
Published: 2021-12-16 04:30:47

When we develop and deploy applications with Docker, often we need to check the statuses of our containers. Mainly we can use either `docker ps` (Docker Process Status) or `docker container ls` (Docker Container List) commands for that. Both commands show the same information and all the additional options mentioned in this question are interchangeable between the two commands. Additionally, `docker container ls` is the newest one and it is introduced in [Docker 1.13](https://www.docker.com/blog/whats-new-in-docker-1-13/).

## Show Currently Running Containers

Following commands will only show currently running containers.

```
docker ps
```

or

```
docker container ls
```

## Show All Running And Stopped Containers

We can add the `-a` or `--all` option to list all the containers in `created`, `restarting`, `running`, `removing`, `paused`, `exited`, or `dead` statuses.

```
docker container ls -a
```

## Show Running Containers With Pretty-Print Formatting

The common problem with previous commands is, all of them show information without any formatting. But fortunately, we can format them with the `--format` option.

```
docker ps --format "table {{.ID}}\t{{.Names}}\t{{.Networks}}\t{{.State}}\t{{.CreatedAt}}"
```

Now it will nicely display everything like below.

```
CONTAINER ID   NAMES        NETWORKS  STATE     CREATED AT
61ed230v9632   laravelApp   laravel   running   2021-10-16 14:52:20 +0000 +0000
d93c7d6fjf39   mysql        laravel   running   2021-10-16 14:52:19 +0000 +0000
7fe3eq1ja2he   phpMyAdmin   bridge    running   2021-06-29 22:18:10 +0000 +0000
```

## Show All Containers With Pretty-Print Formatting

As usual, we can use the `-a` option to display all containers with all the statuses.

```
docker ps -a --format "table {{.ID}}\t{{.Names}}\t{{.Networks}}\t{{.State}}\t{{.CreatedAt}}"
```

Visit the official [Docker documentation](https://docs.docker.com/engine/reference/commandline/ps/#formatting) for more available placeholders to view ports, sizes, labels, mounts, networks and more.

Feel free to visit [devtonight.com](https://devtonight.com?utm_source=dev&utm_medium=questions&utm_campaign=how-to-list-docker-containers-with-pretty-formatting) for more related content.
Sql Joins And How To Join?
Published: 2021-12-16 04:11:37

Hi, You may come here to get a tutorial on Join like different types of join and how to use it, but I wanted to tell you that I will cover that topic in future and you can find very good tutorials elsewhere.

Over here I am going to illustrate different ways to join different tables. My intention for this post is to let programmers know about a few missed topics(maybe not).

Let get into the topic
There are 3 different ways to join tables:

1. JOIN-ON Keyword
2. USING Keyword
3. WHERE Keyword

Yes, there are 3 different ways. I will go one by one with an example.

1. **JOIN-ON**

We can join 2 tables using the Join-On keywords. It is considered as the standard way and most common way. In this case, we take two tables and place join in between them and use on later where we have to mention on which columns it is joining. This means where you can find similar records in 2 tables.

_NOTE_: you can join a table to itself. (Yes, it is possible and it is not a JOKE.)

_Example_:

`SELECT * FROM employees e JOIN department d ON e.department_id = d.department_id;`

`SELECT * FROM employees e JOIN employees d ON e.employee_id = d.manager_id;`

2. **USING**

Now we will join tables where the column name is the same in these different tables. This is the smart A$$ and easy feature in Oracle SQL. For instance, employees table and department table both has department_id column.

_Example_: 
`SELECT * FROM employees JOIN department USING department_id;` 

It will print the same as from the first example from JOIN-ON.

3. **WHERE**

Simple and Beautiful, here you can join tables using WHERE clause in which you simply mention about the columns which are equal to each other.

_Examples_:

`SELECT * FROM employees e JOIN department d WHERE e.department_id = d.department_id;`

`SELECT * FROM employees e JOIN employees d WHERE e.employee_id = d.manager_id;` 

These examples will fetch the same results as the JOIN-ON examples.

Please use relevant example to practice and let me know if you find any other way.
Self-Taught Developer Journal, Day 19: TOP Landing Page Cont.: Completing The Third Section
Tags: webdev, beginners, codenewbie, devjournal
Published: 2021-12-16 04:09:42

Today...

## Thinking Through The Odin Project Landing Page cont.
![The Odin Project Project Landing Page Full Design Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qcwlb2cle80pmz7kpksx.png) 
For the third section, I bolded the text for the quote's author. Next, I set the quote-section to become a flex container and the flex direction to column so the quote and quote's author would be stacked over each other. I centered the quote elements with align-items: center. Then I set the quote's author align-self to flex-end so the author would start from the right.

To center the items, I set the width for the quote and quote author classes to 60%. But I noticed after the width was determined, the align-self: flex-end wasn't behaving like I needed it to. Instead, it moved the whole element to start at the end and not the text.

![Flex End](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oyjb2zola7s36hz2rwyt.png)

To fix it, I removed align-self: flex-end.

![Flex End Removed](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1i39j1iz30ldvf5oo6o2.png)

I Googled how to have the text to align right which resulted in me setting text-align: right for the quote's author. I removed margin by setting it to zero and removed the space between the quote elements. Lastly, I added padding to quote-section.

![Third Section](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ddj6tecf3npz784fttcu.png)

In addition, for the second section, I also ended up adjusting the dimensions of the image boxes and the width of the images container to spread them out more so it would be similar to the Odin Project output.

With the third section complete, the next items left are the fourth section and footer.

## Resources
[The Odin Project Landing Page Project](https://www.theodinproject.com/paths/foundations/courses/foundations/lessons/landing-page)

Day 18: https://dev.to/jennifer_tieu/self-taught-developer-journal-day-18-top-landing-page-cont-beginning-the-third-section-1aan
Please refer to [Starting My Self-Taught Developer Journey]( https://dev.to/jennifer_tieu/starting-my-self-taught-developer-journey-2dga) for context.
OSD600 Release 0.4: Release and Final Thoughts
Tags: osd600, opensource
Published: 2021-12-16 04:09:02

As approaching to the end of this semester, I have leared a lot about the open source project, such as how to contribute to an open source project, what is the contribution process and how to find a proper issue to work on.

The issue[https://github.com/Seneca-CDOT/telescope/issues/2511] I worked on in the release 0.4 is about a bug fixing. To investigate the code to figure out why the referenceButtons is a null. It shows that the referenceButtons has an uncaught type error.

Through investigating the code and trying to debugging this issue, I found out it is kind of difficult for me to locate the specific spot to fix this issue. I spent time on understanding the whole project structure and logic. 

Sometimes it took me more time on reading and understanding the code  than actually changing the code.
OSD600 Release 0.4: Progress 
Tags: osd600, opensource
Published: 2021-12-16 04:08:29

## Updates on Issues

At this stage of the project, I have received updates on issues, and have some thoughts on how to write pull requests to solve most issues.

## IBM Issue

This [issue](https://github.com/IBM/compliance-trestle/issues/883) is about creation of a customized jinja tag to insert a specific markdown content header. I have found two useful tutorials, https://github.com/dldevinc/jinja2-simple-tags and https://michaelabrahamsen.com/posts/jinja2-custom-template-tags/. With customized tag, the Python library jinja can have new functionality unique to your own project. 

This issue is pretty similar to what we did about static site generator for generating a complete HTML web site from raw data and files. Jinja doesn't have the functionality that IBM wants. So this issue is about to create a jinja annotation for developers to use. 
I have left the comment below this issue and communicated with the project maintainer. Turned out that, even though this issue currently shows open on the board, it actually was being fixed in another issue.
In this case, I was not be able to get this issue assigned to me.

## Microsoft Issue

This issue[https://github.com/microsoft/qlib/issues/691] is a bug fixing issue for qlib. The module_path is wrong. This is a pretty simple issue. After contacting the project maintainer, it turned out this issue has been resolved in another issue as well. So that I couldn't get a chance to work on it as well.

## Telescope Issues

### Telescope issue - 01:
This issue[https://github.com/Seneca-CDOT/telescope/issues/2521] is about to fix the backend end point url. Now the url has ":4000" inside, and it's expected to be changed into "/deploy" to the places where we are acting as a consumer of the deploy routes vs. defining them.

### Telescope issue - 02:
This issue[https://github.com/Seneca-CDOT/telescope/issues/2511] is to fix a bug of an uncaught type error.
控制蜂鳴器後伺服馬達就失效？
Tags: micropython, esp32, esp8266, pwm
Published: 2021-12-16 03:40:55

今天遇到有人想要同時控制蜂鳴器發聲與伺服馬達轉動, 但是卻發現只要使用蜂鳴器發聲後, 伺服馬達就失控, 可以參考以下的程式：

```python
from machine import Pin,PWM
import time

# 伺服馬達接 D1, 頻率 50Hz
servo = PWM(Pin(5), freq=50)
servo.duty(100)    # 轉到角度 A
time.sleep(1)      # 等待 1 秒

# 無緣蜂鳴器接 D8
buzzer = PWM(Pin(15))
buzzer.duty(0)

servo.duty(30)     # 轉到角度 B
print('開門')
time.sleep(1)      # 等待 1 秒

buzzer.freq(261)   # 設定聲音頻率
buzzer.duty(512)   # 設定音量
time.sleep(0.5)    # 持續播放半秒
buzzer.duty(0)     # 停止播放

time.sleep(1)      # 等待 1 秒
servo.duty(100)    # 轉回角度 A
print('關門')
```

播完聲音後, 伺服馬達就轉不回來了, 這主要是因為 PWM 的頻率是[所有腳位共用](https://meebox.blogspot.com/2020/03/esp8266-micropython-pwm_19.html), 播完聲音後頻率已經被改為 261Hz, 不再是控制伺服馬達所需要的 50Hz, 因此無法將馬達轉回來。要解決這問題, 最陽春的做法就是在控制伺服馬達前, 重新設定 PWM 的頻率：

```python
from machine import Pin,PWM
import time

# 伺服馬達接 D1, 頻率 50Hz
servo = PWM(Pin(5), freq=50)
servo.duty(100)    # 轉到角度 A
time.sleep(1)      # 等待 1 秒

# 無緣蜂鳴器接 D8
buzzer = PWM(Pin(15))
buzzer.duty(0)

servo.duty(30)     # 轉到角度 B
print('開門')
time.sleep(1)      # 等待 1 秒

buzzer.freq(261)   # 設定聲音頻率
buzzer.duty(512)   # 設定音量
time.sleep(0.5)    # 持續播放半秒
buzzer.duty(0)     # 停止播放

time.sleep(1)      # 等待 1 秒
servo.freq(50)     # 重新設定頻率
servo.duty(100)    # 轉回角度 A
print('關門')
```

這樣就轉得回來了。不過這樣的作法在播放聲音的時候, 伺服馬達可能還是會受到頻率變換的影響, 導致偶有抖動的狀況, 最根本的做法就是在控制完 PWM 訊號的裝置後, 卸除 PWM 功能：

```python
from machine import Pin,PWM
import time

def set_PWM(
    p,        # 腳位編號
    d,        # 工作週期
    f,        # 頻率
    t,        # 持續時間
):
    pwm = PWM(Pin(p), freq=f) # 建立 PWM 物件
    pwm.duty(d)               # 設定工作週期
    time.sleep(t)             # 等待持續時間
    pwm.deinit()              # 卸除 PWM
    

# 伺服馬達接 D1, 轉到角度 A, 1 秒
set_PWM(5, 100, 50, 1)
# 伺服馬達接 D1, 轉到角度 B, 1 秒
print('開門')
set_PWM(5, 30, 50, 1)

# 無緣蜂鳴器接 D8, 播聲音 0.5 秒
set_PWM(15, 512, 261, 0.5)

time.sleep(1)     # 等待 1 秒

print('關門')
# 伺服馬達接 D1, 轉到角度 A, 1 秒
set_PWM(5, 100, 50, 1)
```

如果是使用 ESP32, 那也可以參考[使用 esp32.RMT 設計不同頻率的 PWM](/P4p3uGmBRc6MxcRm7JDzpA)讓不同腳位以不同的頻率進行 PWM。
IoT-based Supply Chains, Smart Grid, and Energy Management | Speranza IoT Blog
Tags: iot, smartgrid, energymanagement, supplychain
Published: 2021-12-16 03:26:18

The IoT has revolutionized supply chains, smart grids, and energy management. It helps to improve and fulfill almost all the necessary processes in the aforementioned fields with [custom IoT development solutions](https://www.speranzainc.com/). The benefits are reducing operating costs and improving your company’s efficiency. 

1. IoT-based Supply Chains

IoT devices in the supply chain may be used to track, monitor, authenticate items and shipments using GPS and other technologies. They can also keep track of product and inventory storage conditions, which helps with quality control across the supply chain.

2. IoT-based Smart Grid

Existing power networks are being transformed into smart grids in order to satisfy rising power demands. The IoT-based Smart Grid can support transmission, distribution, and consumption of energy, distributed coordination, location awareness, and mobility support.

3. IoT-based Energy Management

IoT devices help manage energy efficiently and economically. There are many ways to IoT-based Energy Management, such as device automation, M2M, cloud-server.


An IoT-based platform is a great solution for Supply Chains, Smart Grid, and Energy Management industries. It helps to significantly change the operation of industries compared to the past. This not only increases the operational efficiency of industries but also increases consumer usage.

[Read More](https://www.speranzainc.com/iot-based-supply-chains-smart-grid-and-energy-management/)
SPO600 Project Stage 3
Published: 2021-12-16 03:21:30

## Introduction

The stage three of SPO600 project is required to recommend how the open source package [VLC](https://github.com/videolan/vlc) from stage two should be extended to support SVE2. The difference between SVE and SVE2 is that the SVE is fixed-width, whereas SVE2 is variable-width and has additional functional coverage of instruction set that SVE has.

## SVE2 Enhancements

The ARMv9 architecture released this year supports SVE2 which is a superset of SVE and Neon. According to the [official document](https://developer.arm.com/documentation/102340/0001/Introducing-SVE2), the SVE2 instruction set can accelerate the common algorithms for multimedia application which is VLC needed. From the file [merge_sve.S](https://github.com/videolan/vlc/blob/e3f38be0ccab13d46041de208bcceb917278f289/modules/video_filter/deinterlace/merge_sve.S) and [merge_arm64.S](https://github.com/videolan/vlc/blob/e3f38be0ccab13d46041de208bcceb917278f289/modules/video_filter/deinterlace/merge_arm64.S) we can see the software is using ARMv8 architecture, so the first task is to upgrade the ARMv8 to ARMv9. 

## Conclusion

As I scan through the [SVE Programming Examples](https://developer.arm.com/documentation/dai0548/latest) and the [VLC source code](https://github.com/videolan/vlc), I cannot find a place to update the existing source code to SVE2 instruction set. Since SVE2 is also support SVE instruction set, the program will not break if we upgrade the architecture to ARMv9. Before I can provide further recommendation for SVE2 enhancements to VLC package, I need to have deeper understanding on SVE2 and the VLE source code first.
Build an Automated Nuxt Content Blog with Firebase and Github
Tags: nuxt, showdev
Published: 2021-12-16 03:04:34

---
title: Build an Automated Nuxt Content Blog with Firebase and Github 
published: true
description: Create a blog with pagination, categories and search on Nuxt.js Content with Automatic deploys using Github and Firebase Hosting.
tags: Nuxt, showdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f5ptap8lkrfbt8wy3x35.png
---

{% youtube 4utfS0jfUbo %}
Verify an application has picked up a java property
Tags: log4shell, java, log4j, log4j2
Published: 2021-12-16 01:45:45

**NOTE:** This was written in response to the log4shell vulnerability CVE-2021-44228. `-Dlog4j2.noFormatMsgLookup=true` is not effective  at mitigating the second of the two log4j vulnerabilities, CVE-2021-45046.

I've noticed these past few days people have been asking how to validate if a system property has been set.

# Simple method (no code change)

The simplest method would be to add `-Dlog4j2.noFormatMsgLookup=true` to your `JAVA_TOOL_OPTIONS` environment variable, then verify that on startup you see the line
```
Picked up JAVA_TOOL_OPTIONS: -Dlog4j2.formatMsgNoLookups=true
```
printed to the console.

# Code change method

The second way would be to check the system property itself, and print it out on startup. One example would be
```java
System.out.println("log4j2.formatMsgNoLookups=" + System.getProperty("log4j2.formatMsgNoLookups"));
```
then validating 
```
log4j2.formatMsgNoLookups=true
``` is printed to the console.
Perl OR Mappers 2021
Tags: perl, ormapper
Published: 2021-12-16 01:38:48

Introduce Perl OR Mappers 2021 by ABC order. Although 99.9% of IT developers maybe don't know Perl OR mappers, Perl has good practical OR Mappers.

* [Aniki](https://metacpan.org/pod/Aniki)
* [Class::DBI](https://metacpan.org/pod/Class::DBI)
* [DBIx::Class](https://metacpan.org/pod/DBIx::Class)
* [DBIx::Custom](https://metacpan.org/pod/DBIx::Custom)
* [DBIx::Simple](https://metacpan.org/pod/DBIx::Simple)
* [DBIx::Skinny](https://metacpan.org/pod/DBIx::Skinny)
* [Tengu](https://metacpan.org/pod/Teng)

I'm glad to inform the existence.

If you know ohter Perl OR Mappers, you can write them as comments.
Figma plugin project setup using Figsvelte boilerplate
Tags: figma, javascript, svelte
Published: 2021-12-16 01:21:49

## Introduction

I always find working with Javascript framework on a Figma plugin project to be at a certain point an over-engineering choice that brings more maintenance cost without a real added value, at least from my point of view, at the same time it also brings a lot of ready to use features that make using it in a project appealing but still the tradeoffs were against it, yes I used the past because I think differently now, after discovering Svelte the tradeoffs turned in favor of using Javascript framework without sacrificing simplicity.

## Install Figsvel

Start by installing Figsvel boilerplate as so:

```
npx degit thomas-lowry/figsvelte figma-plugin
cd figma-plugin
npm install
```

## Update dependencies

Even though you can work on your Figma plugin without updating dependencies I prefer to update it, so if you're the same this is how it's done.

1- Installing `npm-check-updates` with `npm i -g npm-check-updates`

2- Inside your project folder run `ncu --upgrade`

3- Before updating our node_modules with the new dependencies let's do one more thing, replace rollup-plugin-typescript with @rollup/plugin-typescript.

4- Just to make sure no strange error emerge remove node_modules directory and run `npm install`

Done

## Update manifest.json

Lastly update public/manifest.json that the current version in Figsvelte repo lack a config update needed by Figma to run correctly the plugin which is: `"editorType": ["figma"]`

You can learn more about it in the Figma plugin doc.

## Conclusion

Congratulation, you're good to go for your next Figma plugin with Svelte framework without sacrificing the simplicity of JavaScript nor the advanced features a Framework can bring.
What is a React Component?
Tags: javascript, react, webdev, beginners
Published: 2021-12-16 01:16:54

Hey there!
In this article, we are going to see what is a Component in React.js.

**If you prefer video, then check it out**

{% youtube HS-xu-RnhUU&t=15s %}

In short, React components are a function or a class that returns Html.

Components come in two types Class component and Functional component. 

Just like a function component takes an argument called props. 


### Here's an example of a Functional Component:

```JavaScript
import React from 'react';

function FunctionalComponent(props) {
  return (
    <div>
      <h2>{props.greeting} world form functional component</h2>
    </div>
  );
}

export default FunctionalComponent;

```
A Functional component is just a plain old JavaScript function. It could also be an arrow function.
In a functional component, we access props from the props argument.

### Here's an example of a Class Component:

```JavaScript
import React, { Component } from 'react';

 class ClassComponent extends Component {
  render() {
    return (
      <div>
        <h2 className='class'>
          {this.props.greeting} world form Class component
        </h2>
      </div>
    );
  }
}

export default CassComponent;
```
Here we created a simple Class component. To create a Class Component we need to first import the "Component" component from React. Then extends it to create a Class Component. 
In a class component, we access props from "this.props".



To render these components, import them inside the app.js file and call them like this: 

```JavaScript
function App() {
  return (
    <div className='App'>
         <ClassComponent greeting={"Hello" }/>
         <FunctionalComponent greeting={"Hello" }/>
    </div>
  );
}

```

### Conclusion:
That's it for today. 
If you liked it don't forget to give it a like. And if you want to add anything to it please leave a comment below.

Thanks for reading.