teleren/devto huggingface dataset:
Getting started with Arduino and TinyGo: MBP M1 edition
Tags: arduino, go
Published: 2021-04-28 07:28:31

Hey, this is gonna be a very short post. Today I wanted to play a bit with my old Arduino Uno but it took me some time to identify stuff that is specific for M1 processors.

As the first thing, we need to install all the tooling. Since there's limited support for Apple Silicons - we're gonna use Rosetta 2. Hence all the `brew` commands need to be prepended with `arch -x86_64`.

```bash
arch -x86_64 brew tap tinygo-org/tools
arch -x86_64 brew install tinygo

arch -x86_64 brew tap osx-cross/avr
arch -x86_64 brew install avr-gcc
arch -x86_64 brew install avrdude
```

Now we can create our first Go/Arduino project.

```bash
cd ~
mkdir app
cd app
touch main.go
```

And we can create the first Go sketch.

```go
package main

import (
	"machine"
	"time"
)

func main() {
	led := machine.LED
	led.Configure(machine.PinConfig{Mode: machine.PinOutput})
	for {
		led.High()
		time.Sleep(time.Millisecond * 10000)
		led.Low()
		time.Sleep(time.Millisecond * 10000)
	}
}
```

This sketch will be blinking with integrated LED (ouptut 13). It's time to flash it to the Arduino!

```bash
tinygo flash -target arduino -port /dev/cu.usbmodem13201
```

> Please note that device `/dev/cu.usbmodem13201`
> might be a bit different in your case. You can
> identify the right one by listing `/dev/cu.*`.
NEXT, Tailwind CSS, ESlint, and Prettier boilerplate!
Tags: programming, webdev, beginners, javascript
Published: 2021-04-28 07:23:21

[Boilerplate Link](https://github.com/prnvbirajdar/nextjs-tailwind-eslint-prettier-starter)

ESlint and Prettier are very useful packages. However, it's always a massive pain to configure it and get it working on the first try. 

Since it took me a few hours to figure out how to do it, I figured I might as well make a quick starter template for my future projects and also share it with the DEV community.  

Most of the credit goes to [Sarthak](https://dev.to/sarthology) as he basically wrote a wicked [article](https://xenox.dev/setting-up-eslint-and-prettier-for-next-js-project/) and shared the Github [repo](https://github.com/sarthology/next-js-eslint-pro) of the same. All I did was use those resources, and add Tailwind and the new [JIT mode](https://tailwindcss.com/docs/just-in-time-mode) to it. 

Hope this was helpful. Happy coding! 👩‍💻🚀👨‍💻
Java/ Merge and Split Table Cells In Word 
Tags: java, word, table, merge
Published: 2021-04-28 07:14:21

I've introduced how to [create a table in Word document](https://dev.to/jazzzzz/java-create-table-in-word-document-5c72) using Free Spire.Doc for Java, and this article will share how to use this free Java API to merge and split table cells in Word document.

**1# Installation**
**Method 1:** Download the [Free Spire.Doc for Java](https://www.e-iceblue.com/Download/doc-for-java-free.html) and unzip it, then add the Spire.Doc.jar file to your project as dependency.

**Method 2:** You can also add the jar dependency to maven project by adding the following configurations to the pom.xml.
```xml
<repositories>
   <repository>
      <id>com.e-iceblue</id>
      <name>e-iceblue</name>
      <url>http://repo.e-iceblue.com/nexus/content/groups/public/</url>
   </repository>
</repositories>
<dependencies>
   <dependency>
      <groupId>e-iceblue</groupId>
      <artifactId>spire.doc.free</artifactId>
      <version>3.9.0</version>
   </dependency>
</dependencies>
```

**2# Example of merging cells:**
```java
import com.spire.doc.*;

public class MergeTableCell {
    public static void main(String[] args) throws Exception {

        String output = "out/MergeTableCells.docx";

        //Create a Document instance
        Document document = new Document();

        //Add a table to it
        Section section = document.addSection();
        Table table = section.addTable(true);
        table.resetCells(4, 4);

        //Merge cells horizontally
        table.applyHorizontalMerge(0, 0, 3);

        //Merge cells vertically
        table.applyVerticalMerge(0, 2, 3);

        //save the document to file
        document.saveToFile(output, FileFormat.Docx);
    }
}
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3s8pg1nd2ave2ufnxhiq.jpg)


**3# Example of spliting cells:**
```java
import com.spire.doc.*;

public class SplitTableCell {
    public static void main(String[] args) throws Exception {

        String output = "out/SplitTableCells.docx";

        //Create a Document instance
        Document document = new Document();

        //Add a table to it
        Section section = document.addSection();
        Table table = section.addTable(true);
        table.resetCells(4, 4);

        //split the cell
        table.getRows().get(3).getCells().get(3).splitCell(2, 2);

        //save the document to file
        document.saveToFile(output, FileFormat.Docx);
    }
}
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mlqgztfq0jenhqa8c608.jpg)
Weekly web development resources #71
Tags: weekly, webdev
Published: 2021-04-28 07:01:01



______

##[SimpleR State](https://simpler-state.js.org/)
[![SimpleR State](https://wweb.dev/weekly/content/71/simpler-state.jpg)](https://simpler-state.js.org/)
A React library for simple app state management.

______

##[Cusdis](https://cusdis.com/)
[![Cusdis](https://wweb.dev/weekly/content/71/cusdis.jpg)](https://cusdis.com/)
An Open source, lightweight and privacy-friendly alternative to Disqus.

______

##[HTML boilerplate](https://www.matuzo.at/blog/html-boilerplate/)
[![HTML boilerplate](https://wweb.dev/weekly/content/71/html-boilerplate.jpg)](https://www.matuzo.at/blog/html-boilerplate/)
A modern HTML boilerplate with explainations of the used elements.

______

##[How to actually test UIs](https://storybook.js.org/blog/how-to-actually-test-uis/)
[![How to actually test UIs](https://wweb.dev/weekly/content/71/testing-uis.jpg)](https://storybook.js.org/blog/how-to-actually-test-uis/)
An Article on testing techniques used by leading engineering teams.

______

##[The `ping` attribute on anchor links](https://css-tricks.com/the-ping-attribute-on-anchor-links/)
[![The `ping` attribute on anchor links](https://wweb.dev/weekly/content/71/ping-attribute-request-headers.jpg)](https://css-tricks.com/the-ping-attribute-on-anchor-links/)
How to use the ping attribute for link tracking.

______

##[Awesome-Selfhosted](https://github.com/awesome-selfhosted/awesome-selfhosted)
[![Awesome-Selfhosted](https://wweb.dev/weekly/content/71/awesome-selfhosted.jpg)](https://github.com/awesome-selfhosted/awesome-selfhosted)
A list of Free Software network services and web applications which can be hosted locally.

______

##[Content-aware image resizing in JavaScript](https://trekhleb.dev/blog/2021/content-aware-image-resizing-in-javascript/)
[![Content-aware image resizing in JavaScript](https://wweb.dev/weekly/content/71/content-resize.jpg)](https://trekhleb.dev/blog/2021/content-aware-image-resizing-in-javascript/)
An article on how to create an interactive content-aware resizer.

______

##[Kallithea](https://kallithea-scm.org/)
[![Kallithea](https://wweb.dev/weekly/content/71/kallithea.jpg)](https://kallithea-scm.org/)
A source code management system that supports the two leading version control systems, Mercurial and Git

______

##[Trassel](https://lab.hakim.se/trassel/)
[![Trassel](https://wweb.dev/weekly/content/71/trassel.jpg)](https://lab.hakim.se/trassel/)
A fun scoll demo using canvas.

______

##[Euismod](https://www.euismod.dev/#/)
[![Euismod](https://wweb.dev/weekly/content/71/euismod.jpg)](https://www.euismod.dev/#/)
A website to help people learn CSS grid in an interactive fashion.

______

##[CSS 3D Cube / Box Generator](https://jsocean.org/svelte-3d-cube-generator/)
[![CSS 3D Cube / Box Generator](https://wweb.dev/weekly/content/71/3d-cube.jpg)](https://jsocean.org/svelte-3d-cube-generator/)
An experiment with Svelte JS and 3D CSS that creates a 3D cube.

______

To see all the weeklies check: [wweb.dev/weekly](https://wweb.dev/weekly)
Javascript native barcode detector API
Tags: javascript, api
Published: 2021-04-28 06:36:27

Today I'm looking at a super cool new API, the Barcode detector API.
This is now shipped as a stable version since Chrome 83.

Be aware it's not a fully supported API by all browsers yet.

The Barcode detector API, as its name suggests can detect barcodes of several formats from an image or video source.

The end result for today will look like this:

![Barcode Detector API](https://cdn.hashnode.com/res/hashnode/image/upload/v1619339927010/Ygp5o8-aY.png)

> Note: You can find a full demo below

## Using the Barcode Detector API

Using the barcode API is actually pretty simple.
We can create a detector like this:

```js
// Plain one:
const barcodeDetector = new BarcodeDetector();

// Specific format one:
const barcodeDetector = new BarcodeDetector({
  formats: [
    'aztec',
    'code_128',
    'code_39',
    'code_93',
    'codabar',
    'data_matrix',
    'ean_13',
    'ean_8',
    'itf',
    'pdf417',
    'qr_code',
    'upc_a',
    'upc_e'
  ]
});
```

As you can see we can pass an array of formats we want to be scanning for, this might come in handy if you are only looking for one type of barcode.

Then we can simply call the `detect` function and pass an image stream.

```js
try {
  const barcodes = await barcodeDetector.detect(image);
  barcodes.forEach(barcode => doSomething(barcode));
} catch (e) {
  console.error('Barcode detection failed:', e);
}
```

In our case, we will be using a fixed image to detect the barcode.

```html
<img
  src="https://cdn.hashnode.com/res/hashnode/image/upload/v1619338701344/-rJKsBrhI.png"
  crossorigin
  alt="QR Coden Daily Dev Tips"
/>
```

And now we can simply create a barcode detector that will use this image, and output all data in a newly created `pre` tag.

```js
const barcodeDetector = new BarcodeDetector();
const image = document.querySelector('img');

barcodeDetector
  .detect(image)
  .then(barcodes => {
    let pre = document.createElement('pre');
    pre.innerHTML = JSON.stringify(barcodes, null, 2);
    image.after(pre);
  })
  .catch(console.error);
```

And it gives us the result of a bounding box, corner-points, and the actual value.

You can try this out on the following Codepen.

{% codepen https://codepen.io/rebelchris/pen/RwKvQdB %}

## Browser support

As mentioned the API is still in progress being rolled out, as of Chrome 83 and Edge 82 we can use it.
However, Firefox does not yet support it.

![CSS barcode detector support](https://cdn.hashnode.com/res/hashnode/image/upload/v1619340054375/52URFcbqB.png)

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
Another Webpack 5 configuration for React and TypeScript
Published: 2021-04-28 06:09:55

This __Webpack__ configuration working with __EsBuild__ instead of __Babel__. __EsBuild__ an extremely fast JavaScript bundler which already production-ready. Also this configuration including __Prettier__ and __EsLint__ configurations as well to help you work with __TypeScript__ and __React__ more productively.

[Webpack-React-Boilerplate](https://github.com/gor918/webpack-react-boilerplate)
Delays in App Delivery to Kubernetes
Tags: kubernetes
Published: 2021-04-28 06:09:16

Enterprises around the world are waking up to the containers and Kubernetes trend. There are numerous benefits of delivering an application as container packages to Kubernetes but at the same time, the process of app containerization and the subsequent app deployment to Kubernetes can hit many roadblocks. Since the idea of using Kubernetes Trend and containers for app delivery is fairly recent, the transition from traditional delivery systems to these modern delivery systems is a bumpy ride
MonsterAR Hidupkan Wahana di Trans Studio Cibubur
Tags: transstudio, themepark
Published: 2021-04-28 04:05:09

Setelah dibuka pertama kali untuk umum sejak 12 Juli 2019 lalu, Trans Studio Theme Park Cibubur telah menjelma menjadi tempat wisata yang paling diminati khalayak ramai. Bagaimana tidak, wahana di Trans Studio Cibubur telah disulap dengan beragam kecanggihan teknologi bertaraf Internasional mulai dari yang bersifat menyeramkan dan membuat bulu kuduk merinding, hingga yang bersifat mengedukasi sekalipun, semua tersaji hanya di Trans Studio Theme Park Cibubur.

MonsterAR turut menambahkan sentuhan teknologi dan media digital di beberapa wahana Trans Studio Cibubur, simak ulasannya di bawah ini:

1. AR Insect Zone

Wahana Trans Studio Cibubur yang satu ini dirancang seperti alam serangga sungguhan mulai dari tumbuhan, bebatuan hingga para serangga raksasa di sekitar, yang menjadikan pengunjung seolah-olah menjadi manusia kecil di alam terbuka. Terdapat 4 titik di insect zone yaitu zona semut, zona kupu-kupu, zona lebah dan zona laba-laba.

Terdapat permainan edukatif di setiap zona yang akan mengajarkan anak-anak mengenai pengetahuan dan nama-nama serangga di seluruh dunia. Ketika pemain berhasil menyelesaikan permainan maka mereka akan mendapatkan aksesoris AR berupa bagian tubuh serangga seperti sayap kupu-kupu atau antena semut di akhir permainan, yang bisa mereka gunakan untuk berfoto.

2. AR Water Zone

Sebuah media interaktif bagi anak-anak dimana mereka dapat mengekspresikan kekreatifan dengan menggambar biota laut seperti macam-macam ikan. Dengan sentuhan teknologi AR yang menjadikan gambar hidup layaknya ikan sungguhan. Setelah gambar di pindai, ikan akan berenang melintasi layar proyektor besar dengan laut sebagai latar belakang, menjadikan ikan-ikan tersebut seolah berenang di dalam akuarium raksasa. Saat petugas memberi makan, ikan-ikan akan berenang menyambut makanan tersebut.

3. AR Robot Zone

Zona robot ini menyajikan teknologi transparent display berisikan robot-robot yang ada di seluruh dunia dari waktu ke waktu lengkap dengan detail informasinya. Di sini terdapat juga permainan interaktif yang memungkinkan para pemainnya untuk menyusun robot-robot di dalam transparent display, kemudian dapat berfoto dengan robot yang mereka susun di akhir permainan.

Baca juga: 7 Jenis Cafe VR, Dengan Peluang Bisnis Senilai 45 Miliar Dolar di Tahun 2025

4. Alien Taxi Video Tutorial

Alien Taxi merupakan wahana yang membawa penumpangnya menjelajahi galaksi dan planet-planet beserta keindahannya yang disimulasikan melalui video 3D. Untuk wahana ini, kami membuat 3D modelling untuk tokoh ikonik dari Alien Taxi.

5. Breath Test Application

Di wahana Trans Studio Cibubur ini, pemain akan menjalani simulasi seolah sedang tenggelam di bawah kedalaman air, yang mengharuskan pemainnya untuk menahan nafas selama mungkin. Ketika nafas mulai habis dan tidak sanggup lagi menahan, pemain harus menekan tombol di depan layar yang memicu aplikasi untuk mengambil foto pemain yang menunjukan ekspresi terakhir mereka ketika menahan nafas.

Sumber: https://monsterar.net/
what is a container and container portability - HyScale Kubernetes
Tags: kubernetes, devops, docker
Published: 2021-04-28 06:06:45

Containers offer a new approach to build, ship and run applications by isolating the operating system. A container consists of an entire runtime environment bundled into one package – the application along with all its dependencies, libraries and other binaries, and the configurational files needed to run it. This brings forth the ability to “build once and run anywhere.” With containers, the code is compiled and placed into a container image. That image can then be deployed on any type of host environment. As all the application artifacts are stored within the container, environment variables outside the container shouldn’t impact the application. This way, portability comes naturally to containerized applications.
E: dpkg was interrupted, you must manually run 'sudo dpkg –configure -a'
Published: 2021-04-28 05:49:13

리눅스 패키지 업데이트 또는 설치시 발생하는 위와 같은 오류에 대한 대처...

sudo apt-get install 또는
sudo apt-get upgrade 같은 명령어 입력후 위 오류를 만날 수 있습니다.

[구글참조](https://askubuntu.com/questions/1249965/update-error-e-dpkg-was-interrupted-you-must-manually-run-sudo-dpkg-config)

또는

1. sudo rm /var/lib/apt/lists/lock
2. sudo rm /var/cache/apt/archives/lock
3. cd /var/lib/dpkg/updates
4. sudo rm *
5. sudo apt-get update
The best On-Demand Roadside Assistance app

Tags: uber
Published: 2021-04-28 05:47:10

Get a robust ready to use tow trucks on- demand app to provide flawless and reliable service to the customers. Win the customers’ trust in no time with easy business management and quality service in the long run through the app. Launch your app easily with support from expert developers. to know more click here : https://uberforxapp.com/uber-for-tow-trucks/
Are you guilty of abandoning your side projects?
Tags: discuss, watercooler, productivity, motivation
Published: 2021-04-28 05:45:04

If you’re someone who enjoys working on development projects on the side you’ve likely not seen all to completion!

But is abandoning your projects something you tend to do often, like this guy?
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/82b503f75b42x96z9ojr.jpeg" alt="Strip-Side-project-650-finalenglish" width="500" />
<figcaption><a href="https://www.commitstrip.com/en/2014/11/25/west-side-project-story/">Comic Source</a></figcaption>


I also talk about why some devs may fail to complete side projects in this post.
{% link https://dev.to/funbeedev/5-typical-reasons-why-developers-fail-to-complete-side-projects-57g8 %}
49 Days of Ruby: Day 32 - Rubygems
Tags: ruby
Published: 2021-04-28 05:18:49

---
title: 49 Days of Ruby: Day 32 - Rubygems
published: true
description: Join us on a 49 day learning journey through Ruby!
series: 49 Days of Ruby
tags: #ruby
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/9m73qaetuse3nm3y3it8.png
---

**Welcome to day 32 of the 49 Days of Ruby! 🎉**

Throughout the past 31 days we have worked quite a bit with Ruby gems. A gem is a packaged piece of code that you can incorporate into your code.

Ruby gems could help you with things like:

* databases
* web connections
* user management
* styling
* authentication
* etc., etc., etc.

Did you know that all these gems are hosted in a central repository? They are! In a place called [Rubygems](https://rubygems.org/). 

Rubygems is supported and made possibly by the broader Ruby community.

Let's say you want to install the popular debugging gem `byebug` on your computer. (We discussed `byebug` on our debugging day.) To do so you'd run `gem install byebug` from the command line. That command fetches the package from Rubygems and installs it locally.

Perhaps, you wish to install `byebug` in your application. Inside the `Gemfile` of your application you would have something like this:

```ruby
source "https://rubygems.org"

gem "byebug"
```

Then, from the command line you would run `bundle install` and that would generate a `Gemfile.lock` file that tells Ruby what version of `byebug` you have installed, and would make it available to your application.

Every time you install a gem, be thankful for the great resource that is Rubygems!



**Come back tomorrow for the next installment of 49 Days of Ruby! You can join the conversation on Twitter with the hashtag [#49daysofruby](https://twitter.com/hashtag/49daysofruby).**
Why Add Me To Search Is Important For Freelancers?
Tags: management, marketing
Published: 2021-04-28 05:00:55

Being a freelancer can be quite tough if you don't have a strategy to get high paying clients for the skills you are possessing.

There are many websites from where a freelancer can get work like Fiverr, UpWork and many more but all freelancers are there trying their hand on to get clients.

So how are you going to make a difference?

**The answer is: By Taking A Different Approach**

## What Is Add Me To Search Card?

Add Me To Search is a virtual visiting card created by Google for businesses and freelancers who are looking to make their name and business a Brand and get more visibility on Google.

## Why Add Me To Search Is Important For Freelancers?

Add me to search card is highly important for freelancers as here you can make your profile and create your own personal visiting card which can be easily indexed in Google and whenever someone searches your name locally then there are high chances of them seeing your add me to search card in top of the SERP.

This makes it easy for freelancers to get more high potential clients through organic reach.

## How To Create My Own Google Add Me To Search Card?

It is quite easy to create your personal google's virtual visiting card. You can either refer to this [guide on Add Me To Search](https://script.com.sg/add-me-to-search/) by Script Consultants or you can follow the below given steps:

* Open Google Browser in your mobile phone.
* Type "Add Me To Search".
* An option will be given to you saying "Add Yourself To Google Search".
* Click on Get Started.
* Follow the given steps and BANG!!!
* Your google virtual business card has been created.

See how easy it is to create your own add me to search card.

**Note: Add Me To Search Card can only be created through a mobile phone.**
Exploring Data with Pandas
Tags: pandas, data, python
Published: 2021-04-28 04:36:00

import pandas as pd
df = pd.read_csv('name_of_file.csv')

###to display the no of rows and columns, respectively
df.shape

###alternative method
print("This data set has {} rows and {} columns".format(df.shape[0], df.shape[1]))

###to display first 5 rows
df.head()

###to display the data types of each column as well as the number of cells with values (helps to find missing values in each column)
df.info()

###alternative method
dataTypeSeries = df.dtypes
print('Data type of each column of Dataframe :')
print(dataTypeSeries)

###to check null values
df.isnull()
df.notnull()

###to check how may unique values in each column
df.nunique()

###a specific column's would be:
df.column_name.nunique()

###to check the count, mean, st deviation, min, 25%, 50%, 75%, and max of each of the columns in the data set
df.describe()
Ubuntu 20.04 에서 netstat : command not found
Published: 2021-04-28 04:22:30

리눅스 기본 명령어인줄 알고 있다가 당황할 수가 있습니다.
배포판에 따라 일부 앱은 기본 설치가 되지 않는 경우가 있습니다.
대표적인 것이 Ubuntu20.04에서 network 관련 툴이 일부 빠져 있습니다.
물론 대안으로 제공되는 명령어가 있습니다.

다만, 기존에 익숙했던 명령어를 사용하고 싶다면?

## netstat 명령어를 사용하고 싶다면?
```
sudo apt install net-tools
```

이렇게 설치해 주면 됩니다.
Employee Monitoring Tool to improve employee productivity 
Tags: monitoring, productivity, software, screenshot
Published: 2021-04-28 03:24:45

Remote employee monitoring is a valuable tool that managers use to track time spent on a project and the process in which employees move from task to task. Managers can use this data to spot potential delays in a project’s deadline and make changes necessary to keep the project on track. For example, monitored data might lead a manager to discover a particular employee might not be right for a particular task. The manager can then decide to give more training to that employee, or shift his tasks with other more qualified team members.

With remote employee monitoring, you can remain in control of your company assets even when accessed by employees from outside the office. Which is very essential, without proper monitoring it is very hard to maintain and manage the potentiality of a virtual team. When it is a team work it is very important that each member of the team works with the same dedication.

CloudDesk® employee monitoring software, for example, keeps a record of total working hours of every employee and helps to analyze performance by showing the productive and idle time. It also helps to detect malpractice and reasons of performance degradation by keeping tabs on running apps and web usage. It’s a reliable tool for monitoring performance, provides detail data of what an employee did during working hours. This tools is also a great piece for employees as it allows employees take break during work hours by taking a pause which gives them the comfort to work at their own pace.
https://www.m2sys.com/clouddesk-remote-employee-monitoring-software/