teleren/devto huggingface dataset:
NotNotePad - a web-based multi-editor and serverless code-editor/IDE
Published: 2020-07-18 14:17:06

[NotNotePad](https://notnotepad.com/) is a code editor I have been partly working on for the last year, it was my first complete project (and by complete I definitely don't mean done 😎) and my biggest so far.

{% github https://github.com/shmuelhizmi/notnotepad %}


# so what exactly is "[NotNotePad](https://notnotepad.com/)"❓

NotNotePad is a code editor design to give both programmers and non-programmers a place when they can work on the same code base using both code and visual scripting (visual scripting still has a long way to go😉), the editor runs on the browser and is completely serverless.

# and what exactly do you mean by multi-editor ❓

the idea behind [NotNotePad](https://notnotepad.com/) multi editor system is to give the user one IDE but multiple code editors to work with so a savvy programmer can use the Monaco editor (the same editor from VScode !!) while the less savvy product man can work on the same file using a visual editor.

# 🏞 screenshots
![blockly](https://dev-to-uploads.s3.amazonaws.com/i/189xaucmqapqt79ntyyb.png)
![Mnaco](https://dev-to-uploads.s3.amazonaws.com/i/nrfd73qx8hovnfjcm806.png)

# More....
If all or just some of that sounds interesting for you fill free to check the project out in [github/shmuelhizmi/notnotepad](https://github.com/shmuelhizmi/notnotepad).
RTL support lands in Bootrstrap and Bulma
Tags: css, rtl
Published: 2020-07-18 14:01:20

---
title: RTL support lands in Bootrstrap and Bulma 
published: true
description: 
tags: css,rtl
//cover_image: https://direct_url_to_image.jpg
---

On 7 June 2020 [Bulma](https://bulma.io/) [v0.9.0](https://github.com/jgthms/bulma/releases/tag/0.9.0) was released and while I always wanted the spacing helpers it introduced, what I was most excited about is the RTL support!

Shortly after, [Bootstrap 5 alpha](https://blog.getbootstrap.com/2020/06/16/bootstrap-5-alpha/) was released and they also announced RTL support!

I live in a part of the world where it is becoming extremely common for websites and web apps to offer both English (LTR) and Arabic (RTL) versions. Seeing popular CSS frameworks add built-in support for RTL is a huge plus for many developers in this region, and I certainly hope more open-source projects follow suit.

Having said that, I do realise my role in this and I feel developers (including me) who want to see RTL support in more open-source projects should be contributing to such projects (if they have the required skill set); particularly if it is a small project with a single or very few maintainers.
Day 17 of #100DaysOfCode
Tags: 100daysofcode
Published: 2020-07-18 14:01:00

Today's Progress: I have completed my Flutter e-commerce app (Shrine) version 2 ( added HomePage and Navigation Bar).

**Link to work:** https://github.com/Kyawkhaing444/Shrine-Flutter-App

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ra3zt20wi2tvadueyczx.gif)
Smart house css light switch
Tags: codepen, css, uiweekly, design
Published: 2020-07-18 13:52:20

Hello people of the internet,

I created a nice looking CSS neumorphic light switch button; I hope you all like it and i'll be glad to answer if you have any questions regarding this design

{% codepen https://codepen.io/FlorinCornea/pen/NWxEgPg %}
Github profile readme counter
Tags: github, readme, counter, profile
Published: 2020-07-18 13:10:40

Looks like github new feature that you can create readme file to your profile has gone viral..

So it got me thinking if you can create views counter for that..

I made this super simple Yii2 Framework system that records views counts for your profile..

Check repo: https://github.com/arturssmirnovs/github-profile-views-counter

Code turned out to be very simple.. 5 columns in database:

id, profile, views, create_time, update_time.

Few lines of code that records views++ and then just simple svg image display without cache.

Simple and fun weekend project.

This is my first post. :)
Processing Markdown in Python using available CommonMark implementations: cmarkgfm, paka.cmark, and mistletoe
Tags: python, markdown, commonmark
Published: 2020-07-18 13:00:26

Markdown is "just enough markup" to write most of the documents I write, and is very readable for humans. (Aside: it is good to have [a cheatsheet](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet) handy while typing!)

I have appreciated the Markdown standardization efforts of the group working on the [CommonMark] spec. Thankfully, many languages have a variety of [Commonmark implementations](https://github.com/commonmark/commonmark-spec/wiki/List-of-CommonMark-Implementations), including Python.

Here are three I have found valuable, with a brief description about the why and when you might use each.

## [cmarkgfm]

Simple, fast, stable, and works on Windows as well as Linux, Mac, and other platforms. It also supports [GitHub Flavored Markdown](https://github.github.com/gfm/). Try this one first; it is likely all you need.

## [paka.cmark]

This one is fast, configurable, and does not generally work on Windows. The maintainer is active, and keeps the project updated. Use this if you only need it to work on Linux and Mac, and especially if you want low-level access to the parser, for customization.

## [mistletoe]

Unlike the others listed above, [mistletoe] is written in pure Python, so is a good candidate for [pypy](https://www.pypy.org/) or if you want ease of installation/configuration and don't require the utmost in speed.

Try them all!

```python
import cmarkgfm
import paka.cmark
import mistletoe

MARKDOWN = "**Hello**, _World_"

print(cmarkgfm.markdown_to_html(MARKDOWN))
print(paka.cmark.to_html(MARKDOWN))
print(mistletoe.markdown(MARKDOWN))
```

Here is an idea for a module-agnostic implementation that will succeed if any of the above are installed:
```python
try:
    from cmarkgfm import markdown_to_html as md_to_html
except ModuleNotFoundError:
    try:
        from paka.cmark import to_html as md_to_html
    except ModuleNotFoundError:
        from mistletoe import markdown as md_to_html

MARKDOWN = "**Hello**, _World_"

print(md_to_html(MARKDOWN))
```

Enjoy!
[CommonMark]: https://commonmark.org/
[paka.cmark]: https://github.com/PavloKapyshin/paka.cmark
[cmarkgfm]: https://github.com/theacodes/cmarkgfm
[mistletoe]: https://github.com/miyuchina/mistletoe
TQDM: Adding a Progress Bar to smiler
Tags: python, showdev
Published: 2020-07-18 12:57:16

This week on my twitch live stream, I extended my tool/library `smiler` to use use a neural network to detect smiling faces:

{% post https://dev.to/hammertoe/using-a-convolutional-neural-network-cnn-to-detect-smiling-faces-1700 %}

After the show I did some refactoring of the code, and tidied it all for for a release. It is now available to install/download on PyPI:

https://pypi.org/project/choirless-smiler/

You can use it either as a CLI tool, or as a library. We use it as a library in [Choirless](https://www.choirless.com), and wrap it up as an Apache Openwhisk function for our render pipeline built on IBM Cloud Functions.

This morning I just added an extra feature, a progress bar when you use it as a CLI and specify the `--verbose` flag. 

![Screencast of smiler in action (10x speed)](https://dev-to-uploads.s3.amazonaws.com/i/7e5s334wb1xsmp4r6b4d.gif)

The progress bar is implemented using a great little Python library called [TQDM](https://tqdm.github.io/) which makes it really easy to add progress bars into your code.

The changes I made in smiler are to the method that calculates the threshold needed to get just 5% of the "most different" frames.

```python
     def calc_threshold(self, frames, q=0.95):
         prev_frame = next(frames)
         counts = []
+
+        if self.verbose:
+            if self.total_frames is not None:
+                frames = tqdm(frames, total=self.total_frames)
+            else:
+                frames = tqdm(frames)
+            frames.set_description("Calculating threshold")
+
         for frame in frames:
             # Calculate the pixel difference between the current
             # frame and the previous one
```

and the method that actually analyses each frame:

```python
         best_smile_score = 0
         best_frame = next(frames)
 
+        if self.verbose:
+            if self.total_frames is not None:
+                frames = tqdm(frames, total=self.total_frames)
+            else:
+                frames = tqdm(frames)
+            frames.set_description("Finding smiliest face")
+
         for frame in frames:
             # Convert the frame to grayscale
             gray = cv2.cvtColor(frame, cv2.COLOR_BGR2GRAY)
```

In both cases it was as simple as just wrapping the iterator in a `tqdm()` call. If I know the total number of frames then I pass that in as a parameter.
在 MicroPython WebServer 上使用文件資料夾與樣板檔
Tags: micropython, esp32, esp8266
Published: 2020-07-18 12:15:04

在[上一篇文章](https://dev.to/codemee/esp8266-esp32-micropython-web-server-3f3j) 中我們介紹了 ESP8266/ESP32 通用的 MicroPython WebServer 模組, 在這一篇文章中, 我們會再說明這個 ESP8266WebServer 模組得其他功能。

### 文件資料夾

如果你希望能夠直接傳回 HTML 檔給用戶端, 那麼也可以將 HTML 檔集中放置在單一資料夾中, 並設定當請求的路徑存在於此資料夾時, 就直接傳回該路徑的檔案。例如：

```python
ESP8266WebServer.setDocPath("/www2")
```

並在 www2 資料夾下放置如下的 index.html 檔：

```html
<html>
    <body>
        <h1>This is index.html</h1>
    </body>
<html>
```

就可以在瀏覽器中用指定檔名路徑的方式傳回 HTML 檔案了：

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

其實如果請求的路徑符合文件資料夾路徑, 但沒有指定檔案的話, ESP8266WebServer 模組也會幫你自動搜尋該路徑下是否有 index.html 檔案：

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

### 樣板檔

你也可以在 HTML 檔中加入實際傳回前要替換內容的置換變數, 例如以下的 index.p.html：

```html
<html>
    <body>
        <h1>Status：{status}</h1>
    </body>
</html>
```

其中, 以大括號括起來的就是要置換的變數, 用法如同 Python 字串的 format。含有置換變數的 HTML 檔案必須以 p.html 結尾, 並且要在 Python 程式中提供一個字典物件做為替換內容, 字典內的索引鍵就是置換變數的名稱, 該置換變數就會在送出前被置換成對應的值：

```python
ledData = {
    "status":"Off",
}
ESP8266WebServer.setTplData(ledData)
```

我們只要在切換 LED 亮滅的時候同步更新 ledData 中的內容, 就可以讓 index.p.html 實際送出的內容跟著更新了：

```python
def handleCmd(socket, args):
    global ledData
    if 'led' in args:
        if args['led'] == 'on':
            ledData["status"]="ON"
            pin.off()
        elif args['led'] == 'off':
            ledData["status"]="OFF"
            pin.on()
        ESP8266WebServer.ok(socket, "200", args["led"])
    else:
        ESP8266WebServer.err(socket, "400", "Bad Request")

```

把 index.p.html 上傳到控制板的 www2 資料夾下, 現在我們就可以這樣操作：

1. 首先請求 www2/index.p.html：

    ![](https://i.imgur.com/12NqjHv.png)
    
    你可以看到預設的狀態是 OFF。
    
1. 接著我們點亮 LED：

    ![](https://i.imgur.com/00yqh5V.png)
    
    傳回的 on 表示控制板已經接收到指令, 所以這時內建的 LED 就會亮起來。

1. 再次請求 /www2/index.p.html, 就會看到狀態現在變成 OFF 了：

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

ESP8266WebServer 模組也會自動找尋文件資料夾下的 index.p.html 檔案, 但是會以 index.html 檔優先。

### 結語

有了本篇介紹的功能, ESP8266WebServer 模組就可以更方便的應用在許多情境下, 這就有待各位盡情發揮了。
HTML5 Network Speed Test Application [Source Code Available]
Tags: linux, android, ios, javascript
Published: 2020-07-18 12:05:44

First test your local network speed before pointing fingers towards your ISP for slow and sluggish internet experience. Introducing Network Speed Test Server for Windows , Mac & Linux!. For professionals docker image and source code available.

This is Ajax based network speed test application this can run on almost every platform!. Even on static file hosting server.

Todays work from home situation. Connectivity is more important than ever.

Download OpenSpeedTest Server : https://go.openspeedtest.com/Server
And send me your feedback..
Daily Developer Jokes - Saturday, Jul 18, 2020
Tags: jokes, dailydeveloperjokes
Published: 2020-07-18 12:00:16

---
title: "Daily Developer Jokes - Saturday, Jul 18, 2020"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Saturday%2C%20Jul%2018%2C%202020"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e12594a73e61.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q:___ Why did the document store go out of business?

___A:___ It had NoSQL.
 -->
Checkout Gitsie 📦
Tags: node, github, npm, contributorswanted
Published: 2020-07-18 11:58:24

Hey fellas,

I created [gitsie](https://github.com/hatlesshacker/gitsie) a while back.. It would be great if y'all could take a look and tell me if you like it 😊

It's just a Package manager for GH projects made with node; with the target of simplifying the management of searching/downloading/updating/deleting Github repos locally on your computer.
Multiple AWS accounts and CLI
Tags: aws, cli, okta, productivity
Published: 2020-07-18 11:54:17

After following this guide you will able to easily and seamlessly switch between multiple AWS accounts and roles (with or without Okta) using the CLI.

---

### *Prerequisites:*

Check out the first article in the series for requirements and initial configuration.

{% link trexinc/aws-cli-with-okta-mpn %}

---

### *How To:*

*The following instructions are meant to be used in Linux or WSL, tested with Ubuntu.*

#### Configure non Okta accounts
```
aws configure --profile profile
aws configure --profile multi-role-profile
```

#### Configure Okta accounts

Create a file `~/.okta-aws` with the following contents:
```
[okta-profile]
username = <username>
factor = OKTA
app-link = https://<your-company>.okta.com/<app-link>
base-url = <your-company>.okta.com
duration = 3600

[okta-multi-role-profile]
username = <username>
factor = OKTA
app-link = https://<your-company>.okta.com/<app-link>
base-url = <your-company>.okta.com
duration = 3600
```

Initialize the profiles:
```
okta-awscli --okta-profile okta-profile --profile okta-profile
okta-awscli --okta-profile okta-multi-role-profile --profile okta-multi-role-profile
```

#### Configure accounts with multiple roles

Some accounts might use role switching, add similar sections to `~/.aws/credentials` per role (notice that `source_profile` points to a previously defined profile):
```
[multi-role-profile-role1]
role_arn = <role-arn>
source_profile = multi-role-profile

[okta-multi-role-profile-role1]
role_arn = <role-arn>
source_profile = okta-multi-role-profile
```

#### Associate EKS clusters with profiles

Run the following per EKS cluster that you want to have kubectl access to, `<profile-name>` is a name of the AWS profile defined above that has permissions for this EKS cluster:
```
aws --profile <profile-name> eks update-kubeconfig --name <eks-cluster-name>
```

#### Create scripts for fast account switching

The scripts switch to the relevant AWS account, point kubectl to the relevant cluster, and set a default kubectl namespace.
Create one script file per profile, and place it in your home directory.

File `okta-multi-role-profile-role1`:
```
export AWS_DEFAULT_PROFILE=okta-multi-role-profile-role1
kubectl config use-context <eks-cluster-arn>
kubectl config set-context --current --namespace=<namespace>
aws sts get-caller-identity
if [[ $PS1 != *"AWS_DEFAULT_PROFILE"* ]]; then
  PS1=\(\$AWS_DEFAULT_PROFILE\)$PS1
fi
echo "Switched to okta-multi-role-profile-role1"
```

#### Switch between accounts

To quickly switch between accounts just do the following:
`source <profile-file>`

For example:
`source okta-multi-role-profile-role1`
🎨 Make Your GitHub Profile README colorful!
Tags: github, api, showdev, statics
Published: 2020-07-18 11:50:34

As you all know, Github recently enable README on our profile page. So, several developers have made [various attempts](https://dev.to/jayehernandez/3-ways-to-spice-up-your-github-profile-readme-1276/comments) on this. I think this project can help you decorate profile README colorfully.


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

The color changes each time the page is refreshed. It can be a random gradient or a fixed color you set. If you can't believe random colors, you can use only the verified random color.

Demo:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0b08k4fynv5tczur8uy4.JPG)
It is still being added.

{% github kyechan99/capsule-render %}

It can also be used in repository README or any web project.

## How to use
```
https://capsule-render.vercel.app/api?
```
Just write query parameter end of this url. Like this
```
![header](https://capsule-render.vercel.app/api?type=wave&color=gradient&height=300&section=footer&text=capsule%20render&fontSize=90)
```

## Here is the List of core query
### color
`&color=auto` : Proven random color. List are [here](https://github.com/kyechan99/capsule-render/blob/master/src/pallete.json)
`&color=random` : Really random color. I don't know what colors are showing.
`&color=gradient` : Proven random gradient. List are [here](https://github.com/kyechan99/capsule-render/blob/master/src/gradient.json)
`&color=_hexcode` : default(#B897FF)

### Type
`&type=wave` : default
`&type=egg`
`&type=slice`
`&type=rect`

### Section
`&section=header` : (default)
`&section=footer` : Upside down image

### ETC
`&height` : image size
`&text` : text over the image
`&fontColor` : text color
`&fontSize` : text size
`&fontAlign` : font pos

Details are written in the capsule-render-[README](https://github.com/kyechan99/capsule-render#types).

<hr/>

I will add more features.
If you have any ideas or opinion, leave an Issue or PR!
It will be very useful to me.

Finally, this is my profile README. 
Try to refresh the page once you hear it.

{% github kyechan99/kyechan99 no-readme %}


Thank you for reading !
Download HTML5 Network Speed Test Application
[Source Code Available]
Tags: html, javascript, docker, linux
Published: 2020-07-18 11:39:38

First test your local network speed before pointing fingers towards your ISP for slow and sluggish internet experience. Introducing Network Speed Test Server for Windows , Mac & Linux!. For professionals docker image and source code available.

This is Ajax based network speed test application this can run on almost every platform!. Even on static file hosting server.

Todays work from home situation. Connectivity is more important than ever. 

Download OpenSpeedTest Server : https://go.openspeedtest.com/Server
And send me your feedback..
Slightly easier package managing in Debian
Tags: shell, debian
Published: 2020-07-18 11:34:36

---
title: Slightly easier package managing in Debian
published: true
description: trying to make a wrapper script for apt, with more intuitive commands.
tags: #shell #debian
//cover_image: https://direct_url_to_image.jpg
---

If you use debian you probably know `apt`, I believe it's actually a frontend for other set of tools that debian has to manipulate the packages in your system. 

Anyway, `apt` is great, it's just that sometimes I forget to write `sudo` before a command and sometimes I forget that I want to use `apt purge` instead of `apt remove`. It's this kinds of things I don't want to think about. And usually this is the part where make some cool alias and live happily ever after, but I'm trying something different now. This time I just want descriptive commands. What I did was create `pkg` script with the following commands.

- `upgrade`

Sync with repositories before upgrading packages.
```
sudo apt update && sudo apt upgrade
```
    
- `refresh`

Update and refresh the local package database.
```
sudo apt update
```
    
- `search`

Search for packages in the repositories.
```
apt search [args]
```
    
- `info`

Display information about a package in the repositories.
```
apt show [args]
```
    
- `install`

Install packages from the repositories.
```
sudo apt install [args]
```
    
- `remove`

Remove packages, including its settings and dependencies.
```
sudo apt purge [args] && sudo apt autoremove
```
    
- `remove-just`

Remove packages, keeping its settings and dependencies.
```
sudo apt remove [args]
```
    
- `clean-cache`

Remove all cached versions of uninstalled packages.
```
sudo apt-get autoclean
```
    
- `destroy-cache`

Completely remove all packages from the cache.
```
sudo apt-get clean
```
    
This way when I say `pkg remove [package-name]` I'm saying "destroy the damn thing and leave no trace". See how nice that is? I don't even have to think about `sudo` anymore.

If you're curious how you can do something like this, well you can create a file and start writing your commands.

```sh
#! /usr/bin/env sh

# Save the first argument to `cmd`
# and remove it from the argument list
cmd=$1; shift

if [ "$cmd" = 'upgrade' ];then
  sudo apt update && sudo apt upgrade
  exit 0
fi

if [ "$cmd" = 'install' ];then
  sudo apt install $@
  exit 0
fi

# ... more and more commands
```

You save it then make it executable with `chmod +x [name-of-script]`. Next step is to put the script somewhere in a folder of your PATH (don't know what they are? Use `echo "$PATH"`)  preferably one that is located in your home directory. That's it, next time you open up a terminal you'll have this handy command.

My version of this wrapper is located [here](https://github.com/VonHeikemen/dotfiles/blob/master/my-configs/bin/pkg-deb). And there is also a version for [arch (pacman)](https://github.com/VonHeikemen/dotfiles/blob/master/my-configs/bin/pkg-arch).