teleren/devto huggingface dataset:
Class C# Siap Pakai untuk Konversi Angka menjadi Terbilang
Tags: csharp, class, howto, terbilang
Published: 2022-11-23 03:05:34

Pada catatan kali ini akan kita bahas mengenai contoh class siap pakai pada C# yang memiliki fitur konversi dari angka menjadi string terbilang melalui akses index.

## Class `Terbilang`

{% gist https://gist.github.com/ahoNerd/204435cc67396a2727cd15b5e774c1b9 file=terbilang.cs %}

## Contoh penggunaan pada program

Berikut ini contoh bagaimana mengkonsumsi class di atas dari program yang kita buat:

{% gist https://gist.github.com/ahoNerd/204435cc67396a2727cd15b5e774c1b9 file=main.cs %}

> Pastikan `namespace` pada class sama dengan `namespace` pada program.

## Output

> Output berikut ini dihasilkan dengan menjalankan program di atas pada Visual Studio Comunity 2022 dengan menggunakan template `Console App (.Net Framework)`

![Terminal output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yju5eew08h475jcv2ot3.jpg)

## Try It Yourself

### onlinegdb

[onlinegdb.com/RboCahEiZ](https://onlinegdb.com/RboCahEiZ).

### Replit

{% embed https://replit.com/@ahoNerd/Terbilang %}

## GitHub Gist

Code di atas dapat di-clone dari gist [ahoNerd](https://gist.github.com/ahoNerd) di [gist.github.com/ahoNerd](https://gist.github.com/ahoNerd/204435cc67396a2727cd15b5e774c1b9).

## Reference

[learn.microsoft.com](https://learn.microsoft.com/en-us/dotnet/csharp/programming-guide/indexers/using-indexers)
Account Balance Masking - Because Why Not Have More Privacy?
Tags: javascript, showdev, opensource, webdev
Published: 2022-11-23 02:41:12

No one likes it when someone is peeping over your shoulder. This is even more the case when you're logged into your personal banking with all your balance details on display. This is why I decided to build the [Account Balance Masker](https://github.com/jdboisvert/account-balance-mask) Chrome Extension. 

I was quite surprised this was not something some financial sites offered out of the box. My goal with this app was to be able to set it and forget it and not have to worry about doing a lot of set up in order for me to just mask my account balances. Also being a developer I was curious to see what it took to make a chrome extension myself.

![A gif displaying how hovering over the masked values shows the original value](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vcutj48u673quzxngf3c.gif)

### But how does it work? 
In the spirit of open source software the [code](https://github.com/jdboisvert/account-balance-mask/tree/main) is available to review if you wish to dig into it more but this is a basic overview. 

All Chrome extensions are defined by a `manifest.json` which contains information that defines it and my extension is no different. Within this extension we make use of the key `content_scripts`. [Content scripts](https://developer.chrome.com/docs/extensions/mv3/content_scripts/) is how we are able to run javascript files against specific webpages and ensure it only runs in these defined pages. With the help of wildcards this makes it easy to, for example, specify scripts to only one for 1 banking webpage. 

Within these javascript files one simply needs to search the DOM and update the elements containing the account balance details. As you can imagine this can vary from site to site but making use of `document.querySelectorAll` we are able to search through elements using wildcards as well and test if the text contains digits. With the help of the browser's developer tools one can easily find the HTML tag's class and/or id of the element and update the script as needed. 

Since this is only loaded once the page loads or whenever navigating around the webpage there is no need to store any data except within the script. You can also always view the details since the initial value is within a [closure](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures). 

### Final thoughts 
I hope others will find the simple extension useful and I hope to implement other features and webpages to help your get more privacy from those people wanting to peep at your screen. 

#### Update
Want to give it a try? You can download it on [The Chrome Web Store](https://chrome.google.com/webstore/detail/account-balance-masker/hkmponiffpfpnjbgddecfhneaajddfff?hl=en&authuser=2) now!

Happy coding!
Python Programming Bootcamp #3 - Let's eat grandpa!
Tags: python, tutorial, beginners
Published: 2022-11-23 02:41:00

---
title: Python Programming Bootcamp #3 - Let's eat grandpa!
published: true
description: The first steps take time. You need to understand what is programming and where to get help.
tags: python, tutorial, beginners
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
published_at: 2022-11-23 02:41 +0000
canonical_url: https://code-maven.com/programming-bootcamp-for-scientists-3
series: bootcamp
---

{% youtube 06YxiBTI2rE %}

00:00 More in the "First steps" chapter
00:47 Nóra had a couple of questions:
   * Should we use Atom as an editor?
   * Should we use Python downloaded from Python.org?
   * What if we have two installations of Python on our computer?
   * What other editors and programming environments to use?

11:20 Asking questions?
12:15 What is programming?
18:05 What are the programming languages?
22:05 Let's eat grandpa! Words and punctuation matter!
22:35 Literals, Value Types - The consistency of single- and double-quotes.
30:20 Running the script using a relative path. Showing exceptions (runtime errors) and how to try to understand them.
34:00 How to search for explanation about an exception. How to interpret what we see in StackOverflow.
39:30 The type system in Python and other languages.
40:50 The floating point error
43:40 Value Types in Numpy, Binary (base 2) representation of numbers.
Add Multiple Attribute to an Element using javaScript
Tags: dom, howto, javascript
Published: 2022-11-23 02:40:35

Untuk menambah beberapa attribute pada sebuah HTML element dengan menggunakan javaScript dapat menggunakan beberapa cara yang akan kita bahas berikut ini.

## Function Expression

Code berikut ditulis dalam format TypeScript:

### Methode #1

```js
const setMultipleAttr = (elm: any, attributes: any) => {
  for (const key in attributes)
    elm.setAttribute(key, attributes[key])
}
```

### Methode #2

```js
const setMultipleAttr = (elm: any, attributes: any) => {
  Object.keys(attributes).forEach((attr) => {
    elm.setAttribute(attr, attributes[attr])
  })
}
```

## CodePen

{% codepen https://codepen.io/ahonerd/pen/QWxgGmQ %}

## Reference

[eveloper.mozilla.org/en-US/docs/Web/API/Element/setAttribute](https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute)
Add Multiple Inline Style to an Element using javaScript
Tags: dom, howto, javascript
Published: 2022-11-23 02:35:27

Untuk menambah beberapa inline style pada sebuah HTML element dengan menggunakan javaScript dapat menggunakan beberapa cara yang akan kita bahas berikut ini.

### HTML code

Sebagai contoh pada catatan kali ini kita aka menggunakan HTML element sebegai berikut:

```html
<div id="cobaInlineStyle">
  <span>Coba</span>
  <code>HTMLElement.style</code>
</div>
```

## HTMLElement.style

`style` adalah read-only property yang mengembalikan inline style dari suatu element dalam bentuk object [CSSStyleDeclaration](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration) yang berisi daftar dari semua style property untuk element tersebut.

> Berikut ini daftar [CSS Property](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference#index) yang bisa digunakan.

### javaScript code

```js
const elm = document.getElementById('cobaInlineStyle');

elm.style.backgroundColor = 'tomato';
elm.style.color = 'white';
elm.style.lineHeight = '64px';
elm.style.padding = '0 1em';
elm.style.display = 'inline-block';
```

### Result

```html
<div id="cobaInlineStyle" style="background-color: tomato; color: white; line-height: 64px; padding: 0px 1em; display: inline-block;">
  <span>Coba</span>
  <code>HTMLElement.style</code>
</div>
```

### Browser Support

[caniuse.com/mdn-api_htmlelement_style](https://caniuse.com/mdn-api_htmlelement_style)

## CSSStyleDeclaration.cssText


### javaScript code

```js
const elm = document.getElementById('cobaInlineStyle');

elm.style.cssText = 'background-color: tomato; color: white; line-height: 64px; padding: 0px 1em; display: inline-block;';
```

### Result

```html
<div id="cobaInlineStyle" style="background-color: tomato; color: white; line-height: 64px; padding: 0px 1em; display: inline-block;">
  <span>Coba</span>
  <code>HTMLElement.style</code>
</div>
```

### Browser Support

[caniuse.com/mdn-api_cssstyledeclaration_csstext](https://caniuse.com/mdn-api_cssstyledeclaration_csstext)

## Conclusion

Dapat diperhatikan bahwa kedua metode diatas menghasilkan output yang sama persis, selain itu keduanya memiliki browser support yang baik, maka kedua metode di atas dapat digunakan sesuai degan kebutuhan.

Selain mengunakan metode di atas, masih ada cara lain untuk menambah atau mengatur tampilan dari suatu HTML element, yaitu dengan cara menambahkan class yang ada. Untuk lebih jelasnya bisa dipelajari pada catatan berikut: <RouterLink to="/js-add-remove-multiple-classes-to-an-element">Add and Remove Multiple Classes to an Element using javaScript</RouterLink>

## Reference

- [developer.mozilla.org/en-US/docs/Web/API/HTMLElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement)
- [developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration)
Protip: Use zen mode!
Tags: productivity, vscode
Published: 2022-11-23 02:28:41

If you're ever feeling overwhelmed by the amount of windows open, or distractions in general, try opening up your code in zen mode.

In VSCode: <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>p</kbd> to open the command palette, then select **Toggle Zen Mode**

Be free. Think free. Clear your mind :)
A Gentle Introduction To The ++ Operator In Javascript
Tags: javascript, beginners
Published: 2022-11-23 02:17:24


JavaScript '+' operator can be used in many different ways. 🤯

```javascript
let x = "3";

console.log(typeof x)
// expected output: "string"

console.log(3 + x);
// expected output: "33"

console.log(+x + 3);
// expected output: 6

console.log(3 + + x);
// expected output: 6

console.log(3+ +x);
// expected output: 6

console.log(x++);
// expected output: 3

console.log(x++);
// expected output: 4

console.log(++x);
// expected output: 6

console.log(x);
// expected output: 6

console.log(typeof x);
// expected output: "number"
```

Comment below if you have another interesting operation with '+' operator 😎
A gentle introduction to Domain Driven Design
Tags: architecture, javascript, beginners, programming
Published: 2022-11-23 02:07:54

Starting into DDD is hard, even though it’s heavily praised by their practitioners. The topic is widely covered in the now infamous “Domain Driven Design” by Eric Evans (Blue Book) and “Implementing Domain Driven Design” by Vaughn Vernon (Red Book).

Both of them are terribly verbose and thick, which is no surprise coming from [Java engineers](https://blog.jcore.com/2021/04/battling-javas-verbosity/). The material is dense and there’s a lot of noise around the main ideas, which makes the barrier to entry even bigger for newcomers. Many times, I’ve felt like i’m too stupid to understand what StackOverflow made obvious after few researches.

Although the verbatim is complex, the ideas behind are rather simple and easy to grasp. When it “ticks”, it just becomes common sense.

## It’s all about the business

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

Here’s the main gist : **domain model should be kept separate from the dangers of the outside world, and interfaces are the bridges connecting the dots**. That’s also the basis for Hexagonal Architecture, Clean Architecture, Onion Architecture, and all the other trademarked terms that more or less boil down to the same principles.

**They are all domain centric.**

But Domain Driven Design takes it a step further and gives the tool to structure and develop the domain itself, while the others architectures are just a mean to encapsulate the domain. In other words, you can do Hexagonal without DDD, but you can’t really do DDD without layers around.

I believe both the blue & red books are opaque about it. You’ll be tempted to believe you either go DDD or you don’t, there’s no in-between. Which is the reason I’ve been discouraged from trying DDD altogether.

But Vlad Khononov took another approach. In his book “Learning Domain-Driven Design” (affiliated link), he starts with the very basic and foundational principles of DDD, which are Subdomains, Bounded Contexts and Aggregates. He then establish a scale of usability. Depending on the task at hand, you might not need to do DDD. For once, a book that introduces DDD and isn’t all-in.

One shouldn’t use a complex tool for a trivial problem.

I loved this approach and found it more genuine and useful than the other two books. Let’s see how it unfolds.

### Disclaimer

_I am by no mean a DDD guru or expert, but rather a learner who condensed his knowledge inside this article. I hope to provide the kind of introduction I wish I had when I started this adventure. DDD is a complicated topic, so always double check your assumptions._

[👉 Read the rest of the Article on Medium
](https://medium.com/@Ancyr/a-gentle-introduction-to-domain-driven-design-dc7cc169b1d)
【TypeScript 30】Day 2：物件型別
Published: 2022-11-23 02:05:13


## 【TypeScript 30】Day 2：物件型別

![](https://cdn-images-1.medium.com/max/2400/1*4R8q9GVSmeg67uIAkH8cng.png)

前一篇文章有提到型別的分類，也介紹了最基本的**原始型別 Primitive Types：**number, string, boolean, undefined, null等等的類型，緊接著就來介紹**物件型別 Object Types。**
>  **物件型別 Object Types：*從原始型別或物件型別組合出來的複合型態***

其中包括了：

 1. 基礎物件型別

 2. TypeScript 擴充型別

 3. 函式型別 Function Type

這篇會主題是**基礎物件型別**

首先一開始先測試看看一個簡單的物件，裡面包含了字串、數字以及布林等等不同的型別，像這樣。

![](https://cdn-images-1.medium.com/max/2220/1*WdDvx2a11Sizqg9W9Pj_oA.png)
> # 型別推論

經過上一篇了解的型別推論，讀者可能會有幾種不同的答案，

 1. info 被推論為 object

 2. info 裡面的屬性被一一推論出型別

實際上 TypeScript 非常聰明的幫我們推論出各個屬性的型別。

![](https://cdn-images-1.medium.com/max/2000/1*v84JwZ_faPt19h7vHrHUmg.png)

聰明如你又會想說，那 Nullable Type 會被推論為 any 嗎 ?

竟然是 undefined 和 null!!!

![](https://cdn-images-1.medium.com/max/2000/1*S_8QB5SXkrYjTo8Ywbwhyg.png)

那接下來我們一起來耍耍 TypeScript 吧 !!

設計幾種不同的情境：

 1. 個別覆寫屬性值

![](https://cdn-images-1.medium.com/max/2104/1*CsxR28HlsF1Xy2HxjzOTKg.png)

看完昨天的文章大家應該都猜得到答案了吧，

沒錯，覆寫相同的型別可以正常執行，不過一但更改了一開始宣告好的型別後 TypeScript 就無情地拋出錯誤了。

![](https://cdn-images-1.medium.com/max/2000/1*kmbSO1bYoM6UqE4a-ccCGg.png)

2. 以物件型態覆寫屬性值

不同於第一種覆寫方式，這裡直接把建立新 object 並重新定義屬性值

![](https://cdn-images-1.medium.com/max/2104/1*TMICVqC5W0pldDZWmSgcqg.png)

TypeScript 厲害的地方來了，不僅幫我們監督型別了，甚至屬性都要完全符合一開始宣告的內容才可以

![](https://cdn-images-1.medium.com/max/2000/1*Y54Ew820b_9hpXuCvXRmtA.png)

對於一開始直接 JS 這種弱型別語言的我更加了解強型別程式語言的嚴謹，以及事先規劃資料屬性的重要性，的確這樣一來就可以完完全全掌握住該物件的屬性以及方法，方法的部分後面會再提到。

![多一個/少一個屬性各別的錯誤訊息](https://cdn-images-1.medium.com/max/2000/1*OMBPu67mbSC9H22Uor3ZjA.png)

3. 新增物件屬性值

這就有點像第一個情境加上第二個情境的多一個屬性值了，同樣的 TypeScript 不允許半路殺出一個屬性值出來。

![](https://cdn-images-1.medium.com/max/2000/1*bxk8ff7E9LffmktsTNwwpQ.png)

基本的物件型別測試完後，來點複雜的物件包物件的情況。
{% gist https://gist.github.com/angushyx/cc4d82846ace768ed6d47202baf693cd.js %}
![](https://cdn-images-1.medium.com/max/2000/1*GtyBct-llx1fmNEnojUghw.png)
> # 型別註記

看完了object 的型別註記後，那有 object 的型別註記嗎 ?

當然有的， 我們拿上面的 blogs 的資料形式來當做例子：

![](https://cdn-images-1.medium.com/max/2104/1*HiKqk7jp4J4CY0DlFDEgnQ.png)

比較令人意外的是，情境 1. 和 3.，這樣看起來和 Immutable 有著異曲同工之妙，如果有使用過 React 或 Redux 開發的讀者應該對 Immutable 不陌生( Vue or Angular 不太熟悉 ) ，**簡單來說就是不能細部微調物件，而是直接修改整個物件。**

![](https://cdn-images-1.medium.com/max/2000/1*NAOiEtTzOfG6MHWVa9iHgA.png)

小結：typeScript 中對於物件的型別推論與註記其實和原始型別一樣，不過有幾個點要特別注意，分別是 ( 1 ) 當使用推論時必須完全按照一開始定義好的物件型別與格式 ( 2 ) 當進行物件的型別註記時不能細微調整，而是把整個物件重新定義格式 ( Immutable ) 要改就改全部。
How to use JS Gamepad API and Build a Gamepad Tester in 12 minutes
Tags: webdev, gamedev, javascript, beginners
Published: 2022-11-23 00:43:26

An easy to build gamepad tester using the JavaScript Gamepad API. This gamepad tester displays a controller and highlights the buttons being pressed. It can even show the position of the analog sticks in real time.

Check out the video to learn more:

{% embed https://youtu.be/UXTOXF8Y2Cs %}
How to screenshot a widget in the flutter
Tags: flutter, instagram, widget, story
Published: 2022-11-23 00:32:06

---
title: How to screenshot a widget in the flutter
published: true
description: 
tags: #flutter #instagram #widget #story
---

### Define a global key

```dart
GlobalKey previewContainer = GlobalKey();
```

### Wrap the screenshot area with RepaintBoundary

```dart
FittedBox(
    fit: BoxFit.contain,
    child: RepaintBoundary(
        key: previewContainer,
        child: Container( // The widget to capture
            width: 500,
            height: 500,
            color: Colors.blue,
        ),
    ),
)

```

### Screenshot for the widget

```dart
Future<Uint8List> _capture() async {
    RenderRepaintBoundary boundary = previewContainer.currentContext
        ?.findRenderObject() as RenderRepaintBoundary;
    final image = await boundary.toImage(pixelRatio: 2);
    final byteData = await image.toByteData(format: ImageByteFormat.png);
    return byteData!.buffer.asUint8List();
}
```
COBS protocol decoder progress
Tags: opensource, fpga, vhdl
Published: 2022-11-23 00:05:46

We're busy in the lab updating the VHDL! The testbench is mostly ready for this, but it is still very simple. One way to increase capabilities for the testbench side of things is to use cocotb. 

Learn more about this here: https://www.cocotb.org/
Another contribution to Fig Autocomplete
Tags: typescript, webdev, programming, opensource
Published: 2022-11-22 23:25:14

I got to add another contribution to [Fig Autocomplete](https://github.com/withfig/autocomplete). I implemented autocompletion for the [asr]( https://keith.github.io/xcode-man-pages/asr.8.html) command this time. You can read about my first contribution [here](https://dev.to/tdaw/hacktoberfest-week-1-first-time-contributions-30el).

## About Fig Autocomplete
Fig Autocomplete is an open-source tool that integrates well, regardless of your choice of terminal. It helps users complete `commands` through autocomplete suggestions.

### Contributing
Fig Autocomplete is an excellent open-source project to add your contribution. The documentation is well-maintained, and you can generate the template within seconds to get [started](https://fig.io/docs/getting-started). 

#### How I learned about Fig Autocomplete
Fig Autocomplete was one of the organizations that participated in this year's Hacktoberfest. While searching for `issues` to work on for Hacktoberfest 2022, I found Fig Autocomplete in results yielded by GitHub's Advanced Search feature.

#### Things that were different this time:

- I had to use `subcommands` along with `options`
- I had to use `dependsOn` as opposed to `exclusiveOn`
- I grouped `options` based on their types
- I had to use `displayAs` to display an alternative name for a `subcommand`

How using `displayAs` improves Autocomplete's suggestion:

![asr-demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i5g9p1g5wy9vx9l6fxvx.png)

 Simply typing `asr re` yields two results. Since I configured  the second `subcommand` in the menu with `displayAs` property, it's showing `restore[exact]` instead of `restoreexact`. 

I opted to use an alias for `restoreexact` to enhance readability.

Upon selecting `restore[exact]` and pressing `enter`, the actual name of the `subcommand` gets added:
![asr-demo-2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y0z3otqwd2dt8hnh5u5a.png)

Currently, I am waiting for my [PR](https://github.com/withfig/autocomplete/pull/1711) to be reviewed and merged. 

## Final Thoughts
Although this contribution was less significant (in terms of length) than my initial contribution to Fig Autocomplete, I got to use different settings and formats to achieve the desired result. Hence, this contribution felt renewed.
Day 654 : Boom
Tags: hiphop, code, coding, lifelongdev
Published: 2022-11-22 22:32:29

_liner notes_:
- Professional : Pretty chill and productive day at work. Met with my manager to plan some stuff out and talk about some other stuff outside of work. Re-submitted my expense report because they wanted more info. Continued working on my blog post. Almost done.

- Personal : I can feel the weather affecting my productivity. haha It's getting cooler and darker and cloudy recently. I've also been looking into Mastadon. It seems a lot of people are looking at it as a place to go if Twitter goes boom. I see that you can either join a server, start your own server or create one with a hosting company to gain access to Mastadon Fediverse. There were way too many steps for me to set up my own server. I went through all that before. Not interested in doing it again. Didn't want to join a server because I've seen people have issues and what happens if the server shuts down? I looked at a few places that host Mastadon servers that will do all the upkeep. Since there have been an influx of users, a lot of them have stopped hosting new servers. I found one and bookmarked to check out later. Went to view it earlier and saw that it was sold out and closed. I was like, "Well, that sucks." haha I keep the page open and towards the end of the day, I refreshed the page and one of the options was available. It was the second from the cheapest so I signed up for it. There was only one left. Even now, it still says it's sold out. Guess I was just in the right place at the right time. Now I just have to do some stuff on my end and reply to an email and we should be good. I think. We'll see.

![A winding wooden pathway going through a lush green forest in Ship Creek, New Zealand](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xizt1gneol5lr0um20gx.png)

Seems like I do my best writing at night so I'm going to finish up my blog post and then watch some anime. That's after I eat dinner and do the stuff I need to get the Mastadon server up and running.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube fHGrL4iQ4dc %}
What tool can you suggest to deal with A/B testing?
Tags: discuss, webdev, javascript
Published: 2022-11-22 22:02:18

Hey folks! I want to know if you have any experience in some A/B testing tools. Can you recommend something?

I know about Optimizely, I've also heard a bit about Google Experiments and Microsoft Clarity. Do you know something else or which one should I use? I'm going to use for my personal project, so, if some of the tool provide FREE option and A/B testing, it'll be great, but even if it's paid, let me know what you think I could use.