teleren/devto huggingface dataset:
Why Flutter?
Tags: flutter, android, ios, mobiledevelopment
Published: 2021-04-11 15:38:40

**Why Flutter?**
With an experience of almost three years, I feel that I have enough knowledge to make a case here.

If you are in a bit hurry, here is the summary: **Just because flutter is outstanding.**

For those who are here to read, let me elaborate on my point.

Flutter is a cross-platform development framework and uses Dart. Both of these are projects of Google, but flutter is open-source.

Let's have an experiment, go on to YouTube and search for "Why you should not use flutter?". You will find a ton of videos, often old which will be comparing flutter to the ReactNative. But, react is double the age of flutter. But this is not a comparison blog. It is a blog to convince you why you should choose flutter for your next project, and I am very hopeful that I will succeed.

**Performance:**

Flutter apps are highly efficient. If not more than exactly like native apps. When you compile your flutter code, it's converted to the native code of that specific platform which gives it an edge over other frameworks.

**Hot Reload:**

If I would have to name a feature that makes flutter a winner in cross-platform space, it will be Hot Reload. I can not emphasize it enough, but when you are developing a project the difference it makes is gigantic. And in 95% of cases, it works like a breeze.

**Single Codebase For Everything:**

In general, if you develop an app for iOS and Android, you have to maintain two codebases. But that is not the case with flutter. When you have only one codebase it can slash your maintenance costs and can increase your efficiency. Alongside that, the other very big plus for a single code base is **collaboration**.

  

These are not all the points, but you get an idea why it's a better choice than going towards the native route.
You can follow me :

[LinkedIn](https://www.linkedin.com/in/aasharwahla) -> [AasharWahla](https://www.linkedin.com/in/aasharwahla)

[YouTube](https://www.youtube.com/channel/UCVYgX4d8kQvR3XbQEm7b4Zg) -> [Aashar Wahla](https://www.youtube.com/channel/UCVYgX4d8kQvR3XbQEm7b4Zg)

[Instagram](http://instagram.com/aasharofficial) ->[@AasharOfficial](http://instagram.com/aasharofficial)
Tag's UI design with pure HTML & CSS
Tags: todayilearned, css, html, beginners
Published: 2021-04-11 15:35:11

hello, there coding people,

Currently, I'm working on a financial Youtuber's website named [Finance Help In Hindi](https://financehelpinhindi.com) and on his website I want to show some tag designs like this

![Tags UI with HTML CSS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8xgv028ad5ucjv2mboys.jpg)

But I didn't get any proper design on the internet so I have decided to build it from scratch. And if you following me then you know that I believe in sharing knowledge, this is my code for tag design you can use it according to your need. Please comment below your feedback for this UI I love to hear from you.

{% codepen https://codepen.io/atulcodex/pen/MWJroOO %}
Do you often use border property to figure out and focus elements in CSS
Tags: css, border
Published: 2021-04-11 15:29:41

Are you bored to type `border: 1px solid red;` each time to figure out some elements or to debug them?

Now all you need to just add a class `?` at the end of your element's class list, that's it.

Add this tag into your `<head>` tag

```html
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/YashDDesai/question-mark-css@2.0.0/question-mark.css"
/>
```

now, just add a class `?` at the end of your element's class list

for example:
```html
<div class="h-36 w-36 bg-green-100 ?">
  <!-- to-do -->
</div>
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/laarqx2qbdofahdoqzwh.png)

## Need more colors!


| Border Color   | class   |
| ------------- |:-------------:|
| Red (default)     | ? | 
| Green      | ?g      |
| Blue | ?b      |
| Purple | ?p      |
| Yellow | ?y      |
| White | ?w      |
Peeking at Slack with CDP
Tags: cdp, chrome, slack
Published: 2021-04-11 17:27:21

---
title: Peeking at Slack with CDP
published: true
date: 2021-04-11 12:33:36 UTC
tags: cdp, chrome, slack
canonical_url: https://brian.olore.net/wp/2021/04/Peeking-at-Slack-with-CDP/
---

CDP, or [Chrome DevTools Protocol](https://chromedevtools.github.io/devtools-protocol/), is pretty neat, check this out -

Warning: OSX paths, your OS ~~may~~ will vary

From the Terminal, start Slack with  
`/Applications/Slack.app/Contents/MacOS/Slack --remote-debugging-port=21212`

From the Terminal, start Chrome with  
`/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome http://localhost:21212 --remote-debugging-port 21212`

Then click the link that shows the open channel and open DevTools, and switch to the Network tab.  
Next, click on the network request that opens the websocket as shown here:  
<img src="https://brian.olore.net/wp/images/network-tab.png" width="50%" height="50%" alt="Find the 'websocket' request">

Click on any of the Messages and see the contents! 
<img src="https://brian.olore.net/wp/images/websocket-messages.png" width="50%" height="50%" alt="Click to see the contents of any Message">

Note: some are more interesting than others.

This is the first time I opened Slack from the command line, it is also interesting to read the logs as you take various actions within Slack. I’m definitely curious about whatever `ublockworkaround.history` is!
DuesClerk Application
Published: 2021-04-11 15:02:31

Hello developers, I just uploaded version 1 of DuesClerk to play store.
DuesClerk is an android application to manage dues(debts) for personal and business use.
The application is still in the testing stages. Any reviews and suggestions will be great.

This application enables users to:

A. Contacts management
    1.  Add contacts.
    2.  Update(edit) contacts details.
    3.  Delete contacts.


B. Debts management
    1.  Add debt records to contacts.
    2.  Update(edit) debt record details.
    3.  Delete contacts debt records.
    4.  See total number of debts for contacts.
    5.  See sum of contacts debts.


C. Sort operations
Users will be able to use the following sort operations.
    1. Sort contacts by name in ascending and descending order.
    2. Sort contacts by debt amount in ascending and descending order.
    3. Sort contacts by number of debts in ascending and descending order.
    4. Sort debts by amount in ascending and descending order.
    5. Sort debts by date issued in ascending and descending order.
    6. Sort debts by date due in ascending and descending order.
    7. Sort debts by date debt added in ascending and descending order.


D. Dashboard - Coming soon
Users will see:
    1.  Total number of people they owe.
    2.  Total number of people owing them.
    3.  Total sum of debts they owe.
    4.  Total sum of debts people owe them.
    5.  Contacts the user owes the most.
    6.  Contacts who owes the user the most.
    7.  Debts that are due.
    8.  Debts that are overdue.
    9.  Contacts with and without debts.

Below is the play store link
https://play.google.com/store/apps/details?id=com.duesclerk
Java UUID 之路
Tags: java, beginners
Published: 2021-04-11 15:02:05

##什么是UUID?
UUID (Universally Unique Identifier) 是给于所有用途一个128位长的唯一值。

一般 UUID 标准使用Hex octets（十六位，八位字节）进度数字。
是由4个字符和4个“ - ”符号组成，综合长度是36个字符。
而所有位都设为0就是Nil UUID。 

这里拿个栗子：
 `123e4567-e89b-42d3-a456-556642440000`
 `xxxxxxxx-xxxx-Bxxx-Axxx-xxxxxxxxxxxx`


A 表示确定 UUID 布局的变量。 UUID 中的所有其他位取决于变量字段中位的设置。变体由A的3个最重要位确定：

| MSB1 | MSB2 | MSB3 |   |
|---|---|---|---|
| 0 | X | X | reserved (0) |
| 1 | 0 | X | current variant (2) |
| 1 | 1 | 0 | reserved for Microsoft (6) |
| 1 | 1 | 1 | reserved for future (7) |

举例的 UUID 中的 A 值是'a'。 二进制等价物'a'（= 10xx）将变量显示为2。
 B 代表版本。 举例的 UUID 中的版本（B的值）是4。 

##Java 提供的 UUID

UUID 布局变量为2 分别有5个版本：
 v1: 基于时间 (Time Based)，
 v2: DCE安全性
 v3，v5: 基于名称 (Name Based)
 v4: 随机 

Java 只提供了v3和v4 的 UUID implementation，但也提供了用于生成任何类型的UUID的构造函数：
 `UUID uuid = new UUID(long mostSigBits, long leastSigBits);`

Java 也提供了获取 UUID 的变体和版本的方法： 
```java
UUID uuid = UUID.randomUUID();
int variant = uuid.variant();
int version = uuid.version();
```
接下来我们来看看不同版本的 UUID 生成。

##版本 3 & 5
v3 & 5 的 UUID  使用 namespace 和 name 的 hash 来进行生成。 namespace标识符可以是域名系统（DNS），对象标识符（OID），URL等。 
  `UUID = hash(NAMESPACE_IDENTIFIER + NAME)`

那么问题来了，v3和v5有什么区别呢？那就是 hash 算法，v3 使用得是 MD5  (128位)  而 v5 使用得是 SHA-1 (160位)。

那么问题又来了，UUID 不是128位而已吗？SHA1 有160位怎么办？ 
 简而言之，我们将生成值散列截断为128位，然后将4位替换为版本，将2位替换为变量。 

Java 只提供了 UUID v3 的生成，这里我们看看 Java 生成 UUID v3 的方法：
```java
String source = namespace + name;
 byte[] bytes = source.getBytes("UTF-8");
 UUID uuid = UUID.nameUUIDFromBytes(bytes);
```

##版本 4
 UUID v4 的生成是使用随机数作为源。 Java 是用 SecureRandom （使用不可预测的值作为种子来生成随机数以减少冲突的可能性） 来实现。
 Java 生成 UUID v4 非常简单：  
 `UUID uuid = UUID.randomUUID();`

我们也可以使用 SHA-256 加上随机的 UUID 来使用：
```java
MessageDigest salt = MessageDigest.getInstance("SHA-256");
 salt.update(UUID.randomUUID().toString().getBytes("UTF-8"));
 String digest = bytesToHex(salt.digest());
```

##总结
v3 和 v5 都具有不错的属性，不同的系统可以使用相同的 namespace 和 name 可以生成相同的UUID。 用于创建分层 UUID 是不错的选择。

如果只需要简单的UUID生成，那么使用 v4 就可以了。
Why short portfolios and resumes are acceptable
Tags: podcast
Published: 2021-04-21 06:34:47

---
title: Why short portfolios and resumes are acceptable
published: true
date: 2021-04-11 14:49:47 UTC
tags: podcast
canonical_url: https://peterwitham.com/podcasts/tlc/s05-e12
---

{% spotify spotify:episode:69NKoaclTlBJM0SZMAwMm8 %}

There can be many reasons someone has a short portfolio or resume. At some point, we all had this problem, more than likely when we got started in our field of choice.

If this is you then I hope you take some heart from this episode and see the advantage rather than disadvantages.
Release 1.53 of perl-workflow, a minor feature release
Tags: release, opensource, perl
Published: 2021-04-11 14:49:12

---
title: Release 1.53 of perl-workflow, a minor feature release
published: true
description: a minor feature release improving logging
tags: release, opensource, perl
---
Release 1.53 of Workflow should [be available on CPAN](https://metacpan.org/pod/Workflow) by now.

It is a minor feature release. Internally we had some discussion on this should have been a major release since the release does contain some changes that could be regarded as _breaking_.

In the end we decided not to stick to a minor release, since we do expect the use cases, in which the changes could cause issues are limited and instead we document the changes and home that consumers of 1.53, will take appropriate actions where and if need be.

The changes in 1.53 contains improvements to logging. The logging granularity has improved and it now uses the root logger and the the instance class for all logging in object methods as recommended [in the Log4perl documentation](https://metacpan.org/pod/Log::Log4perl#Pitfalls-with-Categories).

This change allows logging from Workflow to be suppressed in your application by changing the logging level for the `Workflow` category by setting `log4perl.category.Workflow = OFF` in your configuration. 

The _tricky part_ is, that if you have created classes derived from Workflow, the logger will use those class names as categories. To suppress output entirely, those categories need their own logging configuration.

The next _tricky part_ is the addition of a new `log()` accessor to the `Workflow::Base` class. If you implement your own `log()` accessor or method, please take care to make it return a valid logger instance before calling `SUPER::new()` so the logger is immediately available for logging.

Please let us now if you are experiencing any issues with the new release, we hope that the work will just keep flowing with Workflow.

Please report any issues and ask question via [the GitHub repository](https://github.com/jonasbn/perl-workflow).
Java 8 Lambda 表达式简介
Tags: java, beginners
Published: 2021-04-11 14:41:09

Lambda 表达式是一种匿名函数(对 Java 而言这并不完全正确，但现在姑且这么认为)，简单地说，它是没有声明的方法，也即没有访问修饰符、返回值声明和名字。它是 Java 8 中最重要新特性。

Java 中的 Lambda 表达式通常使用 (arguments) -> (expression) 语法书写。以下是lambda表达式的重要特征:
- **可选参数**：Lambda 表达式可以有零个或多个参数。
- **可选类型声明**：不需要声明参数类型，编译器可以统一识别参数值。
- **可选的参数圆括号**：一个参数无需定义圆括号，但多个参数需要定义圆括号。
- **可选的大括号**：如果主体包含了一个语句，就不需要使用大括号。
- **可选的返回关键字**：如果主体只有一个表达式返回值则编译器会自动返回值，大括号需要指定明表达式返回了一个数值。

以下是一些 Lambda 表达式的例子：
```java
 // 无argument，直接return值
 () -> "Andy"
   
 // 接收一个argurment, return一个计算值
 x -> 2 * x  
   
 // 接收2个arguments, return一个计算值  
 (int x, int y) -> { return x – y; }  
   
 // 接受一个string, 并println, 不return任何值  
 (String s) -> { System.out.println(s); }
```

###Lambda 表达式举例
```java
 // 旧方法:
 new Thread(new Runnable() {
     @Override
     public void run() {
         System.out.println("Hello from thread");
     }
 }).start();
 
 // Lambda方法:
 new Thread( () -> System.out.println("Hello from thread") ).start();
```

以下代码的作用是打印出给定数组中的所有元素。注意，使用 Lambda 的方法不止一种。在下面的例子中，我们先是用常用的箭头语法创建 Lambda，之后，使用 Java 8 全新的双冒号(::)操作符将一个常规方法转化为 Lambda：
```java
 // 旧方法:
 List<Integer> list = Arrays.asList(1, 2, 3, 4, 5, 6, 7);
 for(Integer n: list) {
    System.out.println(n);
 }
 
 // Lambda方法:
 List<Integer> list = Arrays.asList(1, 2, 3, 4, 5, 6, 7);
 list.forEach(n -> System.out.println(n));
 
 
 // ::操作
 list.forEach(System.out::println);
```

###变量作用域
Lambda 只能引用标记了 final 的外层局部变量，这就是说不能在 lambda 内部修改定义在域外的局部变量，否则会编译错误。


在 Lambda 表达式当中不允许声明一个与局部变量同名的参数或者局部变量。
Self-promotion in dev.to comments: Spammy / not spammy?
Tags: discuss, promotion, watercooler
Published: 2021-04-11 14:37:51

So I'm reading an interesting how-to post on XYZ on dev.to; it's in a field I'm interested in.  Someone has commented, "great post, next time maybe cover ABC too?"

So I've written just such a how-to post on XYZ which covers ABC!  Do I comment and link?  Is this being horrifically self-promoting and spammy?  Or is this expected / encouraged within the dev.to community?
Snackbars Without Scaffolds (and why you should avoid them)
Tags: android, jetpackcompose, snackbar, kotlin
Published: 2021-04-11 14:36:45

---
title: Snackbars Without Scaffolds (and why you should avoid them)
published: true
description: Describes the perils of placing snacks yourself.
tags: android, jetpackcompose, snackbar, kotlin
series: Snackbars On Jetpack Compose
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vmr0vb4no4x71wkliz49.png
---

# Considerations
Sometimes you might run into a situation where you need a Snackbar in a layout that can't have a Scaffold.
For instance, if you wanted a *modal* BottomSheet *and* a Scaffold, those aren't two things you can easily use together. Mainly because the ModalBottomSheetLayout doesn't have a SnackbarHost and doesn't play nicely with other wrapping layouts.
In this case, you'd have to create and more importantly *place* your own SnackBarHost.

# Placement Methods
Take a look at the Scaffold.kt's [code for placing Snackbars](
https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/material/material/src/commonMain/kotlin/androidx/compose/material/Scaffold.kt;l=272), it involves measuring the Snackbar and calculating an avoidance of the Fab button and such.
Perhaps you'd reconsider your layout to see if it's worth this?

# Creating it
It's quite simple to create it though!

```kotlin
@Composable
fun SnacksNoScafs() {

    val snackState = remember { SnackbarHostState() }
    val snackScope = rememberCoroutineScope()

    SnackbarHost(hostState = snackState, Modifier)

    fun launchSnackBar() {
        snackScope.launch { snackState.showSnackbar("Sup? Here's some snacks.") }
    }

    Button(::launchSnackBar) {
        Text("Show Snackbar")
    }
}
```

Without additional placement information the host ends up at the top like so:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bajiis42cp8vocqb5s75.png)

Let me know if you end up needing to use these two and how you dealt with the tradeoffs yourself.

This was valid as of Jetpack Compose beta 3.

- - - 

I'm on the lookout for a Senior Android position with great customer impact, a great team and great compensation. Let me know if you're hiring! Also open to consulting contracts.
Integration tests for data science pipelines
Tags: machinelearning, datascience
Published: 2021-05-15 19:35:16

---
title: Integration tests for data science pipelines
published: true
date: 2021-04-11 14:36:34 UTC
tags: machinelearning, datascience
canonical_url: https://jackbakerds.com/posts/check-data-science-pipeline-working/
---

I’ve been there - studying model output for hours to check a model is working. There’s some better ways than this. For example designing backtests to check a model does better than a baseline. The trouble with these methods is they don’t categorically show that a model doing exactly as it is designed to do; they’re also not automated, or (as with a backtest) are expensive to run; and sometimes they’re harder to design than the model itself!


The way I solve this problem is test datasets. We often spend a lot of time as data scientists waiting for data to arrive. Why not create a test dataset during that time (it only takes about an hour for simple pipelines, which is a lot less than typical data lead time). This test dataset should: be modelled off the schema of your source data; have output that, once processed through your modelling pipeline, is known exactly. For example:
* If you have a regression pipeline, you could generate random linearly related data and check held-out predictions match your actuals within a desired level of tolerance.
* If you have a forecasting pipeline, you could check it can predict on timeseries data generated from an ARIMA process within a desired level of tolerance.

This does not replace the function of a backtest: it is not checking if the model actually works well on the problem at hand. But what it does is check that your modelling pipeline is doing exactly what it's designed to do. This is especially important when you have quite a complex pipeline which is doing multiple data transformations before applying the model. It's easy to make a mistake with these transformations and not notice. The test can also be automated, and is cheap to run (if you keep your test dataset small), so you get a free integration test on your full pipeline. That way if you make any changes you can just run the test again to check things are still working as expected. You can also add some tests in between different stages of the pipeline to get integration tests on different parts of the pipeline for free.
Angular 8 Firebase CRUD operations with @angular/fire
Tags: angular8, firebase, crud, angularfire
Published: 2021-04-11 14:34:05

https://ozenero.com/angular-8-firebase-tutorial-crud-operations-angular-fire-example

Angular 8 Firebase CRUD operations with @angular/fire

In this tutorial, we’re gonna create a simple Angular 8 Application that does CRUD to create, read, update, delete data to/from Firebase Realtime Database using <code>@angular/fire</code>.

Related Posts:
- <a href="https://ozenero.com/firebase/angular-8-firebase-tutorial-integrate-firebase-angular-8-app-angular-fire">Angular 8 Firebase tutorial: Integrate Firebase into Angular 8 App with @angular/fire</a>
- <a href="https://ozenero.com/frontend/angular/angular-8-firestore-tutorial-crud-examples-angularfire">Angular 8 Firestore tutorial with CRUD application example – @angular/fire</a>
- <a href="https://ozenero.com/frontend/upload-display-delete-files-angular-8-firebase-storage-angular-fire">Angular 8 – Upload/Display/Delete files to/from Firebase Storage using @angular/fire</a>

<!--more-->
<h2>Technology</h2>
- Angular 8
- @angular/fire 5.1.2
- firebase 5.9.4
<h2>Video</h2>
<iframe width="853" height="480" src="https://www.youtube.com/embed/Qdj8dU-ccBI?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
<h2>Firebase CRUD operations with @angular/fire</h2>
<h3>Set up the Firebase Project & Install @angular/fire</h3>
Please visit <a href="https://ozenero.com/firebase/angular-8-firebase-tutorial-integrate-firebase-angular-8-app-angular-fire">this post</a> to know step by step.
<h3>Firebase CRUD operations for Object</h3>
<h4>Create an object binding/ Retrieve</h4>
<pre><code class="language-javascript">
item: AngularFireObject<any>;
// db: AngularFireDatabase
this.item = db.object('item');

// or
Observable<any> item = db.object('item').valueChanges();
</code></pre>
<h4>Create</h4>
<pre><code class="language-javascript">
// db: AngularFireDatabase
const itemRef = db.object('item');

// set() for destructive updates
itemRef.set({ name: 'ozenero'});
</code></pre>
<h4>Update</h4>
<pre><code class="language-javascript">
// db: AngularFireDatabase
const itemRef = db.object('item');
itemRef.update({ url: 'ozenero.com'});
</code></pre>
<h6>Delete</h6>
<pre><code class="language-javascript">
// db: AngularFireDatabase
const itemRef = db.object('item');
itemRef.remove();
</code></pre>
<h3>List of Objects</h3>

https://ozenero.com/angular-8-firebase-tutorial-crud-operations-angular-fire-example
I've replaced husky with simple-git-hooks
Tags: husky, git, node, simplegithooks
Published: 2021-04-11 14:26:23

---
title: I've replaced husky with simple-git-hooks
tags: husky, git, nodejs, simplegithooks
description: 
published: true
---

I've been using husky for over 2 years and was a big fan of it. However, husky v5 enforces us to update our husky configuration.

Since v5 design concept is completely different from v4, we should update husky configuration file and create `.husky` directory regarding to the documentation. Then add some test commits and confirms our migration has been completed.

https://github.com/typicode/husky

To be honest, I was disappointed these changes. I understand maintaining OSS is a hard task and there should be an appropriate reason, but I don't want to "migrate" these changes. "Just work" is the best and there should not be a long documentation.

https://typicode.github.io/husky/

My colleague's PC didn't trigger a pre-commit hook which made me mad. I'm sorry for people who sends pull requests to my own OSS.

Furthermore, I personally don't like the design of husky v5. Why we should create the `.husky` directory, what will happen on `husky install`? What is `husky.sh` and `.husky/_`?

Also, husky changes `.git/config` **without confirmation**, which might cause issues using with other git hooks tools. I just wanted to run Prettier before `git commit`!

I've ended up to say goodbye to husky and install `simple-git-hooks`. It works like a charm!

https://github.com/toplenboren/simple-git-hooks

The setup is pretty easy. All we should do is:

```
yarn add -D simple-git-hooks
```

```json:package.json
  "scripts": {
    "prepare": "simple-git-hooks"
  },
  "simple-git-hooks": {
    "pre-commit": "npx lint-staged"
  }
```

I'll live with simple-git-hooks. Thank you @toplenboren .

If you migrate from husky, don't forget to revert the git config husky modified.

```
yarn remove husky
rm -rf .husky
git config core.hooksPath .git/hooks/
```
We do not tell the truth to ourselves.
Tags: writing, webdev, codenewbie, career
Published: 2021-04-11 14:21:29

It often happens whenever we are doing something. So in order to postpone the work, we lie to ourselves that we will do it now, it will be done, we will see tomorrow. These are all lies that we keep telling ourselves and deceive ourselves. We all know that the loss is ours but where do we understand it. It doesn't feel good to work. Always be free to do the same. Spend time on the internet. How long will we continue to do all this? There will come a day when you will have to do something when responsibilities come. Then there will be remorse for the time that has passed. Stop lying to yourself and start working. Move forward with courage and passion. The destination will be your destiny.