teleren/devto huggingface dataset:
用 JavaScript 做一個 Tooltips 功能
Tags: javascript, opensource, html, css
Published: 2022-10-03 13:38:20

## 本篇要解決的問題

之前需要用到 Tooltips 的設計時，會直接在 [CSS Portal](https://www.cssportal.com/css-tooltip-generator/) 上生成一個，優點就是純 CSS 就能解決。不過總會遇到意外，對，就是發現只靠 CSS 是解決不了的時候，這時就得呼叫野心是統治全宇宙的 JavaScript 了。

本篇是 August 自己寫了一個 Tooltips 的功能，預備著以後專案需要使用時直接下載下來引用，像是一篇使用的說明檔。

要特別說明的是，目前這版不算是完整的開發完，因為 Tooltips 只寫了呈現在右邊，而不像一般的可以自由選擇呈現在上下左右的任一邊。

用寫套件的方式去開發時，會遇到一些眉眉角角，解決時覺得蠻有趣的，大家有興趣也可以自行開發個套件來玩，寫完後確實是會進步。

---

## 下載、引用 JS

因為 August 習慣用 ES6 的 `import` 來引用套件，所以自行開發 Tooltips 也是用 `export` 的寫法在寫。

先在 GitHub 上下載需要的 JS 檔：[Let's Write Tooltips JS](https://github.com/letswritetw/letswrite-js-tooltips/blob/main/src/letswrite-tooltip.mjs.js)。

在自己的 JS 檔上直接 `import` 引用：

```javascript
import { letswriteTooltips } from 'path/letswrite-tooltip.mjs';
```

這樣就安裝完成了。

原本一開始有考慮研究一下怎麼放進 npm 裡的，但這個功能還沒完整寫完，就等寫完的那一天再來研究吧，喵~

---

## 基本使用

`import` 後，要使用很簡單，程式碼的說明如下。

**HTML**

在要使用 Tooltips 的東西上加入 `.letswrite-tooltips`，另外再加上 `data-content="要顯示的文字"` 即可，如下：

```html
<button type="button"
  class="letswrite-tooltips"
  data-content="Tooltips 內容"></button>
```

JS 預設會去抓頁面上的每一個 `.letswrite-tooltips` 去生成 Tooltips，顯示的文字就是 `data-content` 的內容。

**JavaScript**

如果只使用預設樣式（黑底白字），執行 Tooltips 的 script 就一行：

```javascript
const tooltip = new letswriteTooltips();
```

預設的樣式就是這樣：

```css
padding: 4px 8px;
background-color: #212121;
border: 1px solid rgba(0, 0, 0, .1);
border-radius: 4px;
font-size: 16px;
color: rgba(255, 255, 255, .8);
```

---

## 參數說明

可以用的參數總共有 4 個，全部都是選填：

```javascript
new letswriteTooltips({
  el: '.letswrite-tooltips',
  dataContent: 'content',
  customClass: 'letswrite-tooltips-default',
  callback: function() {}
})
```

- `el`：哪一個 class name 要執行 Tooltips？預設是 `.letswrite-tooltips`。
- `dataContent`：Tooltips 的內文要抓哪一個 `data-*`，預設是 `content`，意思就是會去抓 `data-content`。
- `customClass`：需要加上客製的 class 時可以填，有多個就用空格分開。預設是 `letswrite-tooltips-default`。
- `callback`：點擊 Tooltips 的 callback，預設是 `function() {}`，就是不做任何事。

---

## 客製樣式

想要客製樣式就是填寫 `customClass`，下面示範改成白底黑字。

```html
<style>
.custom-demo {
  padding: .25rem;
  background-color: white;
  border: 1px solid #a1a1a1;
  border-radius: .25rem;
  color: #a1a1a1;
}
</style>

<button type="button"
  class="letswrite-tooltips-for-custom"
  data-content="Tooltips 內容"></button>

<script>
  const tooltip = new letswriteTooltips({
    el: '.letswrite-tooltips-for-custom',
    customClass: 'custom-demo'
  });
</script>

```

---

## 點擊後執行 function

比方我們在一個 button 上加了 `.letswrite-tooltip`，點擊這個按鈕要觸發的 function，可以直接在 button 上寫 addEventListener，也可以直接用套件裡的 callback。

```html
<button type="button"
  class="letswrite-tooltips"
  data-content="Tooltips 內容"></button>
  
<script>
  const tooltip = new letswriteTooltips({
    callback: (e) => {
      e.preventDefault();
      console.log('callback');
    }
  });
</script>
```

---

## Demo 及原始碼

Demo 跟原始碼都放在 GitHub 上，歡迎自行取用，取用前麻煩分享本篇或在 GitHub 上按個星星，你的一個小小動作對本站都是大大的鼓勵。

Demo：<https://letswritetw.github.io/letswrite-js-tooltips/>

原始碼：<https://github.com/letswritetw/letswrite-js-tooltips>

未來會找時間再來把功能補得更齊全一些，敬請期待囉~
How To Contribute in Hacktoberfest
Tags: contributorswanted, hacktoberfest, mern, react
Published: 2022-10-03 13:28:25

### follow the steps to make a contribution

I considered that you already registered to hacktoberfest
if note click [HERE](https://hacktoberfest.com/)

before you start working on any issue you have to ask owner of that repo that I am work on this particular issue.


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

then maintainer will assign you that task


### 1. Fork The repo for first contribution

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

for your 2nd , 3rd and 4th contribution each time you have to sync changes instead of fork
![synk](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y1xahwkrbjujyxget5lh.png)

### 2. Clone Repo to your PC
write this command in your terminal
```
git clone https://github.com/<your-username>/trendit.git
```
for your 2nd , 3rd and 4th contribution each time you have to pull instead of clone
```
git pull
```

### 3. Make changes that mentioned in issue

![issue](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3guhoamvgl5pi5soexl9.png)

### 4. push to you github account
Add all files
```
git add .
```
Commit and provide message about what you did
```
git commit -m "message about what you did"
```
push the code 
```
git push origin main
```
if you get any error in this steps then search in Stackoverflow 
Hopefully you will find solution.

### 5. make pull request from your repo


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qkvcoa72drj2js3c4owf.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/joxh5x1aypkm0c1xgsnp.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qhqrfq6qcm1zek9xarwm.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fmrzgb7js9qoti14dcfw.png)

### 6. check in Hacktoberfest site 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z7gd8hgm0vuacp2l3sdy.png)

after your pull request is merged you will this timer in hacktoberfest website 

after seven days your pull request will be count 

Now you are ready to get your goodies 
be in first 40000

follow - @ranjitodedra
Software AG webMethods Container Updates 2022
Tags: containers, webmethods, news
Published: 2022-11-22 13:12:54

---
title: Software AG webMethods Container Updates 2022
published: true
date: 2022-10-03 13:03:10 UTC
tags: containers, webmethods, news
canonical_url: https://tech.forums.softwareag.com/t/webmethods-container-updates-2022/264329
---

We have updates on the container front!

>**Software AG Public Container Registry**
>[https://containers.softwareag.com](https://containers.softwareag.com)  

We have a new official way to deliver the webMethods products as images. This mechanism is allowing existing SoftwareAG customers to pull our products. Compared to Docker hub, where the images were designed only for **preview** , the images that our customers can get from our official public container registry are production ready and always updated with the latest fix levels. The images are delivered with the BYOL(bring your own license) policy, so customers would need to plug in their personal license keys to deploy to productions.

## Updated webMethods Container Guide

We updated the container guide that was published in 2020. See the updates [here](https://tech.forums.softwareag.com/t/webmethods-containerization-and-orchestration-guide/239168)

## More products available in containers

A number of adapters required to run as microservices are now available to run in containers:  
* SAP Adapter  
* JDBC Adapter  
* IBM WebSphere MQ Adapter  
* Apache Kafka Adapter  
* BMC Remedy Adapter

[Read full topic](https://tech.forums.softwareag.com/t/webmethods-container-updates-2022/264329)
Apple Fiscal Calendar 2023
Tags: apple, ios, management, mobile
Published: 2022-09-26 20:11:52

So, it’s that time of the year again when Apple starts their fiscal year. It is essential for an owner of a mobile app that works on Apple devices to know how to track the revenue and when you’ll be paid your App Store earnings. In this article we explained the main logic behind Apple’s financial calendar and here is a quick recap of how do the fiscal year works: 

- In general, Apple’s fiscal year is 364 days and it’s divided into four fiscal quarters (Q1, Q2, Q3, and Q4)
- Each fiscal year quarter starts with a 35-day fiscal month (5 fiscal weeks) and is then followed by two 28-day fiscal months (4 weeks each) 
- The first day of the fiscal year is the last Sunday of September
- The first day of the week is Sunday (the same as the US calendar) 
- Apple will release the 2023 Apple payment calendar in September of 2022 

We’ve prepared the preliminary Apple fiscal calendar 2023 for you below.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8trs6cws70144r4b969b.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3ldoejknvkj2sogteypk.png)

Qonversion offers you an ability to track the revenue that you expect from Apple as well as other subscription app metrics such as churn, retention, refunds, renewals of in-app subscriptions, and other crucial aspects for your business KPIs. 

Click here to check [Apple fiscal calendar 2023](http://qonversion.io/blog/apple-fiscal-calendar-2023/?utm_source=dev.to&utm_medium=blog&utm_campaign=apple-fiscal-calendar)
Cloud Migration for an Integration Platform
Tags: cloud, migration, integration
Published: 2022-11-22 13:24:33

---
title: Cloud Migration for an Integration Platform
published: true
date: 2022-10-03 12:16:46 UTC
tags: cloud, migration, integration
canonical_url: https://tech.forums.softwareag.com/t/cloud-migration-for-an-integration-platform/264327
---

Cloud migration for an enterprise may mean many different things - modernization of systems of record to optimize the costs, usage of new cloud software to differentiate your business or creation of new cloud-native applications to gain a competitive advantage for the future.

[![Cloud_migration_2](https://aws1.discourse-cdn.com/techcommunity/optimized/3X/f/4/f4a655227c7ff679e4aaaf3cd9dea23c3fdf529b_2_690x388.png)](https://aws1.discourse-cdn.com/techcommunity/original/3X/f/4/f4a655227c7ff679e4aaaf3cd9dea23c3fdf529b.png "Cloud\_migration\_2")

No matter where your environment is hosted, the integration will remain the central piece that ties your enterprise together. The need to integrate has only increased with the proliferation of SaaS applications, IoT sensors and devices, and mobile app development in addition to the vast number of applications of record - mainframes, legacy and custom once. Migrating the integration layer can never be done on its own, rather it has to always be centered around the data. It does not make sense to have integration layered hosted in the cloud for self-hosted systems of record and it would be rather old-fashioned to run integration between SaaS systems from your data center.  
We cover the integration migration options in depth in the [Cloud Migration for Integration Software](https://tech.forums.softwareag.com/t/cloud-migration-for-interation-software/254280) knowledge base article. Take a look to understand what we mean by the term “data center of gravity”, what are the migration options how to could approach them.

[Read full topic](https://tech.forums.softwareag.com/t/cloud-migration-for-an-integration-platform/264327)
List of repositories to contribute to Hacktoberfest
Tags: hacktoberfest, opensource, contributorswanted, github
Published: 2022-10-03 12:07:51

Hey !!!

Are you into Hacktoberfest

I have a few repositories of mine which you can contribute 👇

- **[Python Scripts](https://github.com/DhanushNehru/Python-Scripts)**
Add automated python scripts which can automate your daily tasks

- **[Calculator](https://github.com/DhanushNehru/calculator)**
Use html, css, javascript to make this code better. Add issues or solve the existing ones

- **[Web Development Resources](https://github.com/DhanushNehru/Ultimate-Web-Development-Resources)**
There are a wide variety of web development resources available online, some are curated here. Feel free to add more.

- **[Breakout Game](https://github.com/DhanushNehru/breakout-game)**
This one is breakout game built with html canvas, css & javascript. Try to make it better, check the issues section or enhance the functionality.

- **[NodeJs Resources](https://github.com/DhanushNehru/Ultimate-NodeJs-Resources)**
An ultimate list of nodejs resources. Add more resources or sections related to nodejs to make this repository as a nodejs resource hub.

- **[Board](https://github.com/DhanushNehru/board)**
A board currently made up of html, css & javascript for just scribbling or writing things. Try to make it better, check the issues section or enhance the functionality.

You can contribute by adding more resources/ solving the existing issues/ creating new issues & providing solution for them.
I would be updating this blog post on necessity for more repositories/ opensource related content.

Thanks for reading ❤️

If you have found any repositories useful support it by starring ⭐
If you have any repositories to mention feel free to comment below.

Happy contributing !!!

Feel free to subscribe to my [newsletter](https://www.getrevue.co/profile/dhanushnehru).
Connect with me via [Twitter](https://twitter.com/Dhanush_Nehru), [Instagram](https://instagram.com/Dhanush_Nehru), or [Github](https://github.com/dhanushnehru).
Take a Full-Page Screenshot in Browser (without extension or add-on)
Tags: screenshot, chrome, firefox, beginners
Published: 2022-10-03 11:57:17

#Google Chrome

Chrome browser contains default screenshot feature in developer tools.

To take a full-page screenshot, follow these instructions:

1.Open Chrome’s menu (three dots on the right corner).

2.More tools > Developer tools or press F12.

3.Click on the three-dot icon from the top-right corner and then select Run command. As a hotkey, you can press 'ctrl+shift+p' on Windows or 'command+shift+p' on Mac.

4.Type screenshot into the search box.

5.Select capture full-size screenshot.

6.That's all, chrome browser will save the full page screenshot into your downloads folder.





#Mozilla Firefox

You can snap a scrolling screenshot with Mozilla's built-in feature.

Follow these steps to take a full-page screenshot.

1.Open Mozilla's menu (three bars on the right corner).

2.More tools > Customize toolbar...

3.Find out Screenshot icon and click and drag the Screenshot tool into the toolbar or right click on it and select add to toolbar.

4.Now click on screenshot tool icon and select save full page or save visible(if necessary).

5.Finally click on download which appeared after taking the screenshot. This screenshot can be found into mozilla browser's download folder.
Best mouse for Programming.
Tags: html, javascript, webdev, beginners
Published: 2022-10-03 11:54:51

Programmer, Gammers, and coders spend their whole day with computers. So they have comfortable things for use. A standard mouse is irritating to use for a long time. A mouse that puts your hand in an unprejudiced position is maybe the best way to reduce these problems you just have to find a vertical or trackball mouse. Here, I've listed the Best mouse for programming.


## **List of best mouse for programming /coding in India 2022**


1. Anker Wireless Ergonomic Optical Mouse
2. Logitech G402 Hyperion Fury Wired Gaming Mouse
3. Logitech MX Master 3 Wireless Mouse
4. Tecknet M003 2.4G Ergonomic Wireless Mouse
5. Microsoft Sculpt Ergo Mouse
6. Logitech Wireless M570 Trackball
7. Asus ROG Pugio Optical Wired Gaming Mouse


[visit this link to get all the details](https://cmsinstallation.blogspot.com/2021/05/7-best-mouse-for-developer-gaming-coding.html)
What kind of animal can I print?
Published: 2022-10-03 11:54:46

- 
#include <iostream>

using namespace std;

int main(){

cout << "\\    /\\\n";
cout << " )  ( ')\n";
cout << "(  /  )\n";
cout << " \\(__)|\n";

  return 0 ;
  
}

- 
``Top gun voice bitter like``
QUOTE GENERATOR
Tags: incorrectquotes, writingprompt, quotetemplates, otpprompt
Published: 2022-10-03 11:53:18

Quote [generator](https://quotesgenerator.co/) is a tool that generates quotes from a given set of words.

What makes this tool so useful is that it can produce quotes in any style and for any occasion. It can generate quotes for social media posts, for blog content, or even for books or presentations. The software does not only generate the quote but also offers suggestions on how to use the generated quote.

The Quote Generator offers over 20 million different combinations of words which makes it one of the most comprehensive tools on the market.

Quote generator is a tool that generates quotes on demand. It is usually used by marketers and salespeople to generate quotes for social media posts, articles and blog posts.

Quote generators are a great way to help you get inspired when you are stuck with writer's block. You can also use them as a starting point when you need to create content quickly.
All about Hecktoberfest
Tags: mern, hacktoberfest, react, reactnative
Published: 2022-10-03 11:39:08

# What is Hacktoberfest ?
- it is an event that yearly organized by Digitalocean to to encourage people to contribute to open source.

# What is Open Source ?
- Open source software is software with source code that anyone can inspect, modify, and enhance.

# Why I should participate in Hacktoberfest ?
- By participating in Hacktoberfest you will learn about Git and GitHub.

- you will opportunity to interact with people of different countries

- you will get goodies


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qb4jc9c2nym98tcrvpoy.jpg)

# Criteria

- Have 4 pull/merge requests accepted between October 1 and October 31 to complete Hacktoberfest

- The first 40,000 participants (maintainers and contributors) who complete Hacktoberfest can elect to receive one of two prizes: a tree planted in their name, or the Hacktoberfest 2022 t-shirt.

register from [here](https://hacktoberfest.com/)

follow me on github I am maintainer of two repo where you can contact me
@ranjitodedra
Python one-liner for reading files
Tags: python, beginners, programming
Published: 2022-10-03 11:08:46

_I was today years old_ when I realized that instead of a lengthy `open` context manager:
```python
with open('myfile.txt') as f:
    print(f.read())
```
I can use [`read_text()`](https://docs.python.org/3/library/pathlib.html#pathlib.Path.read_text):
```python
from pathlib import Path

print(Path('myfile.txt').read_text())
```
Of course, if you factor in the extra import it is no longer a one-liner. Anyway, it was a nice little discovery for me.
MCAL: An Anatomical Knowledge Learning Model for Myocardial Segmentation in 2-D Echocardiography
Published: 2022-10-03 10:34:11

Segmentation of the left ventricular (LV) myocardium in 2-D  essential for clinical decision making, especially in geometry measurement and index computation. However, segmenting the myocardium is a time-consuming process and challenging due to the fuzzy boundary caused by the low image quality. The ground-truth label is employed as pixel-level class associations or shape regulation in segmentation, which works limit for effective feature enhancement for 2-D echocardiography. We propose a training strategy named multiconstrained aggregate learning (referred to as MCAL), which leverages anatomical knowledge learned through ground-truth labels to infer segmented parts and discriminate boundary pixels. The new framework encourages the model to focus on the features in accordance with the learned anatomical representations, and the training objectives incorporate a boundary distance transform weight (BDTW) to enforce a higher weight value on the boundary region, which helps to improve the segmentation accuracy. The proposed method is built as an end-to-end framework with a top-down, bottom-up architecture with skip convolution fusion blocks and carried out on two datasets (our dataset and the public CAMUS dataset). The comparison study shows that the proposed network outperforms the other segmentation baseline models, indicating that our method is beneficial for boundary pixels discrimination in segmentation.
Docker: giving error [Errno 2] No such file or directory
Tags: python
Published: 2022-10-03 09:58:02

0


I'm building a simple app using: Dockerfile, readme.py and requirements.txt. When the Dockerfile builds I get the error: "No such file or directory". However, when I change the ADD to COPY in the Dockerfile it works. Do you know why this is? While running docker build command and when execution goes on last line of docker file i am getting this error
```
import numpy as np
import base64 
from PIL import Image
import io
import cv2
import skimage
import tensorflow as tf
def preprocessor(base64image,size):
    
    try:
        img_bytes = base64.b64decode(base64image)
        img = Image.open(io.BytesIO(img_bytes))
        img.verify()
        img.close()
        img = Image.open(io.BytesIO(img_bytes))
        img_arr = np.asarray(img)
        if len(img_arr.shape) == 2:
            img_arr = skimage.color.gray2rgb(img_arr)      
        if len(img_arr.shape) > 2 and img_arr.shape[2] == 4:
            img_arr = cv2.cvtColor(img_arr, cv2.COLOR_BGRA2BGR)
        orig_area = img_arr.shape[0]*img_arr.shape[1]
        resize_area = size[0]*size[1]

        if orig_area < resize_area:
            img_arr = cv2.resize(img_arr, size, interpolation = cv2.INTER_LINEAR)
        elif orig_area > resize_area:
            img_arr = cv2.resize(img_arr, size, interpolation = cv2.INTER_AREA)
        img_arr = img_arr.astype('float32') / 255.0
        img_arr = np.reshape(img_arr,[1]+list(img_arr.shape))

        return img_arr

    except:
        
        print('****** Error during image preprocessing ******')

#############################################

import os
from keras.models import load_model,save_model
import numpy as np
import tensorflow as tf

input_img_dir = '/app/Images for testing 2'
input_img_arr = []
image_name_arr = []
count = 0

for file in os.listdir(input_img_dir):
    file = file.lower()
    if (file.endswith('jpg')) or (file.endswith('jpeg'))  or (file.endswith('png') or (file.endswith('jfif'))):

        input_img_arr.append(os.path.join(input_img_dir,file))
        
with tf.device('/CPU:0'):
    model = load_model('/app/Final Models/crop_ResNet152V2_model_best_at_13_0.9923.h5')
    class_labels = ['Maize', 'Grapes', 'Cotton', 'Rice']

for image_path in input_img_arr:
    binary_image = open(image_path, "rb").read()#HERE IT GIVES ERROR
    base64image = base64.b64encode(binary_image)
    img = preprocessor(base64image,[512,512])
    prediction = model.predict(img)
    print(os.path.basename(image_path))
    print(prediction)
    preds = class_labels[np.argmax(prediction)]
    print(preds)
    print('\n')



####
Dockerfile
FROM python:3.10-slim-buster

WORKDIR /app
ADD . /app
COPY requirements.txt requirements.txt
RUN pip3 install -r requirements.txt
RUN apt-get update && apt-get install -y python3-opencv
RUN pip install opencv-python

COPY . .

RUN [ "python3", "readme.py" ]

```