teleren/devto huggingface dataset:
Testing Async Redux Actions menggunakan Jest
Tags: javascript, react, testing
Published: 2022-01-07 02:01:31

Pada artikel ini saya akan sharing contoh kasus saya membuat unit testing pada ReactJS, spesifiknya pada _async redux action_. Hal ini merupakan hal baru bagi saya dan harus membuatnya karena mendapat legacy code yang masih kosongan unit testingnya dan banyak menggunakan _async redux action_.

Berikut contoh kasus untuk memanggil master data employee menggunakan redux action
```
const setEmployee = (data: any) => ({
  dataEmployee: data,
  type: ActionTypes.SET_MASTER_EMPLOYEE,
});

export const fetchMasterEmployee = () => (dispatch: any) => {
  return axios.get('v1/master/employee').then((response: any) => {
    if (response.status === 200) {
      const data: [] = response.data.data;
      dispatch(setEmployee(data));
    } else {
      dispatch(setEmployee([]));
    }
  })
};
```
## Setup
jalankan perintah dibawah ini untuk menginstall package
> npm i redux-mock-store
npm i axios-mock-adapter
npm i redux-thunk

lalu import packagenya
```
// untuk membuat mock store yang akan kita kirimkan action
import configureMockStore from 'redux-mock-store';
// import thunk middle untuk membuat action asynchronous
import thunk from 'redux-thunk';
// untuk mocking pemanggilan axios
import MockAdapter from 'axios-mock-adapter';
// import axios dependency
import axios from 'axios';
// inisialisasi middlewares
const middlewares = [thunk];
// inisialisasi mockstore sebagai metode configureStore yang menggunakan middlewares sebagai parameternya
const mockStore = configureMockStore(middlewares);
// membuat mock instance dari MockAdapter axios
const mock = new MockAdapter(axios);
const store = mockStore();
```
Mari kita buat unit testnya
```
 describe('Testing Action fetchMasterEmployee', () => {
        beforeEach(() => { 
             // Untuk membersihkan semua action yang sedang berjalan dalam store
             store.clearActions();
        });
        it('should get MASTER_EMPLOYEE', () => {
             // lakukan pemanggilan urlnya, set status dan set value yang akan dibaca
             mock.onGet('v1/master/employee').reply(200, {
                data: [
                   { id: 1, name: 'Ridho' }
                ]
             });
             return store.dispatch(fetchMasterEmployee as any).then(() => {
                   const expectedValueOne = [{
                       data: [{
                           id: 1,
                           name: "Ridho",
                       }],
                       type: ActionTypes.SET_MASTER_EMPLOYEE,
                   }]
                   
             expect(store.getActions()).toEqual(expectedValueOne)
        });
});
```
untuk method update bisa gunakan `mock.onPut`, method insert `mock.onPost`, dan method delete `mock.onDelete`

Sekian sharing kali ini, jika ada perlu ditanyakan atau ada cara lebih baik bisa diskusi ya
Documenting Android Project
Tags: android, kotlin, html, markdown
Published: 2022-01-07 01:43:14

If you are maintaining open-source project, or company's codebase, or just want your code to mean something more in the future... Try documenting it!

Here is my experience while documenting my company's codebase.

https://betterprogramming.pub/two-developer-tools-for-documenting-android-codebases-3482bad3fb4c
Goodbye WordPress, Hello 11ty!
Tags: 11ty, tailwindcss, netlify
Published: 2022-07-14 19:21:08

---
title: Goodbye WordPress, Hello 11ty!
published: true
date: 2022-01-06 23:00:00 UTC
tags: #11ty #tailwindcss #netlify
canonical_url: https://conormeagher.com/posts/2022/01/goodbye-wordpress-hello-11ty/
---

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

{% embed https://twitter.com/conrmahr/status/1479151678637187079 %}

### Past [#](https://conormeagher.com/posts/2022/01/goodbye-wordpress-hello-11ty/#past "Anchor link for easy sharing.")

I have been using WordPress (WP) since 2010. Back then there wasn't a lot of open-source software (OSS) choices for hosting your own website with a blog. The thought of having a live website 24/7 that could be edited with a web browser and access to internet was what intrigued me.

### Present [#](https://conormeagher.com/posts/2022/01/goodbye-wordpress-hello-11ty/#present "Anchor link for easy sharing.")

The Monolithic architecture of WP made it so massive and bulky for a simple blog site with a single-user, it was hard to get away from it until now.

Say hello to the [Jamstack](https://jamstack.org/) architecture generated by a static site generator, [Eleventy](https://11ty.dev/):

1. **J** avaScript
2. **A** PIs
3. **M** arkup

The Jamstack architecture has many benefits, whether you’re building a large e-commerce site, SaaS application or personal blog.

#### Better Performance [#](https://conormeagher.com/posts/2022/01/goodbye-wordpress-hello-11ty/#better-performance "Anchor link for easy sharing.")

Why wait for pages to build on the fly when you can generate them at deploy time? When it comes to minimizing the time to first byte, nothing beats pre-built files served over a CDN.

#### Higher Security [#](https://conormeagher.com/posts/2022/01/goodbye-wordpress-hello-11ty/#higher-security "Anchor link for easy sharing.")

With server-side processes abstracted into microservice APIs, surface areas for attacks are reduced. You can also leverage the domain expertise of specialist third-party services.

#### Cheaper, Easier Scaling [#](https://conormeagher.com/posts/2022/01/goodbye-wordpress-hello-11ty/#cheaper%2C-easier-scaling "Anchor link for easy sharing.")

When your deployment amounts to a stack of files that can be served anywhere, scaling is a matter of serving those files in more places. CDNs are perfect for this, and often include scaling in all of their plans.

#### Better Developer Experience [#](https://conormeagher.com/posts/2022/01/goodbye-wordpress-hello-11ty/#better-developer-experience "Anchor link for easy sharing.")

Loose coupling and separation of controls allow for more targeted development and debugging, and the expanding selection of CMS options for site generators remove the need to maintain a separate stack for content and marketing.

![Jamstack architecture diagram, Bidirectional arrows between Client and CDN, Client and Microservices](https://res.cloudinary.com/conrmahr/image/upload/q_auto,f_auto,w_400/conormeagher.com/jamstack-architecture.webp)
_Jamstack architecture diagam via jamstack.org_
January 6th, 2022: What did you learn this week?
Tags: weeklylearn, discuss, weeklyretro
Published: 2022-01-07 01:26:22

Hello 2022! For those interested, you can check out [last year’s series](https://dev.to/nickytonline/series/10645).

It's that time of the week again. So wonderful devs, what did you learn this week? It could be programming tips, career advice etc.

<center>

![Information flowing through your brain](https://media.giphy.com/media/qKltgF7Aw515K/giphy.gif)
</center>

Feel free to comment with what you learnt and/or reference your TIL post to give it some more exposure.

{%tag todayilearned %}

<!--
And remember, if something you learnt was a big win for you, then you know where to drop it as well.👇👇🏻👇🏼👇🏽👇🏾👇🏿

{% link https://dev.to/devteam/what-was-your-win-this-week-145j %}

<center>

![Price is Right contestant celebrating](https://media.giphy.com/media/gF29UEqBhSoDY8LHKg/giphy.gif)
</center>
-->
Stop using sourceCompatibility and targetCompatibility
Tags: gradle, java, maven
Published: 2022-01-07 00:20:22

And start using `--release`. As of [JEP-247](https://openjdk.java.net/jeps/247) released in java 9, the flag will allow you to compile for older releases of java without [worrying about the dreaded NoSuchMethodError](https://www.morling.dev/blog/bytebuffer-and-the-dreaded-nosuchmethoderror/).

## Stop talking and show me the code!
Gradle
```groovy
tasks.withType(JavaCompile) {
    options.release = 8
}
```
Gradle (kts)
```kotlin
tasks.withType<JavaCompile> {
    options.release.set(8)
}
```
Maven (xml)
```xml
<configuration>
    <release>8</release>
</configuration>
```
Collecting Coins
Tags: java, algorithms, programming, 100daysofcode
Published: 2022-01-06 20:02:04

# [Description](https://binarysearch.com/problems/Collecting-Coins)

You are given a two-dimensional integer `matrix` where each cell represents number of coins in that cell. Assuming we start at `matrix[0][0]`, and can only move right or down, find the maximum number of coins you can collect by the bottom right corner.

**Constraints:** 

- `n, m ≤ 100` where `n` and `m` are the number of rows and columns in `matrix`.

## Example 1

### Input

```
matrix = [
    [0, 3, 1, 1],
    [2, 0, 0, 4]
]
```

### Output

```
9
```

### **Explanation**

```
We take the following path: [0, 3, 1, 1, 4]
```

---

## Example 2

### Input

```
matrix = [
    [0, 3, 1, 1],
    [2, 0, 0, 4],
    [1, 5, 3, 1]
]
```

### Output

```
12
```

### **Explanation**

```
We take the following path: [0, 2, 1, 5, 3, 1]
```

---

## Example 3

### Input

```
matrix = [
    [0, 2, 1],
    [2, 5, 0],
    [4, 1, 3]
]
```

### Output

```
11
```

### **Explanation**

```
We take the following path: [0, 2, 5, 1, 3]
```

---

# Intuition

we need to calculate the sum of coins in every cells, which equals `max(up, left) + coins`

# Implementation

```java
import java.util.*;

class Solution {
    public int solve(int[][] matrix) {
        int m = matrix.length, n = matrix[0].length;
        int[][] dp = new int[m + 1][n + 1];
        for (int row = 1; row <= m; row++) {
            for (int col = 1; col <= n; col++) {
                dp[row][col] =
                    Math.max(dp[row - 1][col], dp[row][col - 1]) + matrix[row - 1][col - 1];
            }
        }
        return dp[m][n];
    }
}
```

## Time Complexity

- Time: O(m*n)
- Space: O(m*n)
But we REALLY need TODO comments!
Tags: cleancode, codecomments, issuetracking
Published: 2022-05-31 08:18:29

---
title: But we REALLY need TODO comments!
published: true
date: 2022-01-07 00:00:00 UTC
tags: cleancode,codecomments,issuetracking
canonical_url: https://jhall.io/archive/2022/01/07/but-we-really-need-todo-comments/
---

I recently suggested [breaking the TODO comment habit](https://jhall.io/archive/2022/01/05/todo-add-an-intriguing-title/). But if I’m honest, there have been times when I’ve still found TODO comments to be useful.

But even the most useful TODO comments tend to rot in most code bases. They’re also usually hard to find when you need them.

“I remember I left a comment about this bug in a couple places, but I can’t remember where now.”

There’s a fairly simple solution to this problem:

_Every TODO comment should reference an issue number._

This is easy enough to do without any special tooling, other than self-discipline:

```
// TODO #123: Make this work with CORS

```

But even better, you can add a step to your CI pipeline that will fail any time a TODO comment is added that does _not_ reference an issue. A simple grep can often be enough to do this.

This enhances discoverability immeasurably, as now all you need to do to find all relevant TODOs is a simple `grep`.

The truly ambitious can go a step further, and provide full integration with their issue tracking. Imagine that your check ensures that the referenced issue is _active_, and adds a comment to the issue, and even prevents closing the issue without removing the TODO comments?

I’m not suggesting everyone should go to this extreme. For most teams, a little self discipline about only adding truly essential TODOs is enough, and a short grep in your CI is all you need to do sufficient enforcement, if you feel that adds value.

* * *
_If you enjoyed this message, [subscribe](https://jhall.io/daily) to <u>The Daily Commit</u> to get future messages to your inbox._
How to get a 100% Google Lighthouse score
Tags: css, html, performance, webdev
Published: 2022-01-06 17:30:57

**Google will soon [shame slow websites](https://www.usecue.com/blog/google-will-shame-slow-websites/). A good reason to take a good look at your Google Lighthouse score right now. A good reason to take a good look at your Google Lighthouse score [right now](https://web.dev/).**

You might feel that it is nearly impossible to get to a perfect 100% score. You minified your Javascript, properly scaled your images and even combined some requests, but that did not help nearly enough. The problem is: you might be looking at it from the wrong angle. 

I build [100% scoring websites](https://www.usecue.com/uploads/100procentscore.jpg) on a daily basis, so obviously it is very well possible to get a perfect score on all your websites with little effort. I will try to explain what we want to achieve and how we can achieve that.

There are some basic facts that a lot of people get wrong when it comes to speed and performance. Minifying [does not beat](https://css-tricks.com/the-difference-between-minification-and-gzipping/) gzipping, image scaling [does not beat](http://users.wfu.edu/matthews/misc/graphics/ResVsComp/JpgResVsComp.html) JPG compression and combining requests is actually [counter-effective](https://designsystem.digital.gov/performance/http2/) over HTTP/2. These are probably the reasons why your earlier efforts had so little effect. Another important thing to know is that Google Lighthouse simulates a slow connection. This emphasizes the importance of a low 'page weight' or 'total size' over fast infrastructure, as a small page is delivered significantly faster over such a narrow connection than a large page.

Before we look at the actual steps we need to take, let us look at some websites that score (nearly) 100 points on all four categories. It will give you an idea of what the end-result could or should look like. For each site I have listed the weights: the Javascript, CSS and the total page weight. You can also see the number of requests, as well as the time it takes the server to respond (TTFB) and the site to load. Note that these results are results from my computer. Finally, I listed the host, the company that built the website and the [Google Lighthouse score](/blog/google-lighthouse-score). Note that the comma separated numbers stand for Performance, Accessibility, Best Practises and SEO.

&nbsp;

|[debabywegwijzer.nl](https://www.debabywegwijzer.nl/)||
|-----------|---|
|Javascript:|0kb|
|CSS:|9kb|
|Total size:|120kb|
|Requests:|9|
|TTFB:|22ms|
|DOM loaded: &nbsp; &nbsp;|274ms|
|Loading time:|596ms|
|Hosted on:|CloudFlare (CDN)|
|Built by:|Usecue BV|
|Score:|99,100,100,100|

...

[article truncated]

&nbsp;

*Do you like this? Read the full article on [How to get a 100% Google Lighthouse score ](https://www.usecue.com/blog/how-to-get-a-100-google-lighthouse-score/) at [www.usecue.com](https://www.usecue.com/blog/how-to-get-a-100-google-lighthouse-score/).*
O framework Javascript simples
Tags: interjs, javascript, jsframework, interframework
Published: 2022-01-06 23:31:04

Foram os tempos em que para programar para web front-end era tão simples como usar apenas a tag script para adicionar interatividade nas páginas.

### A web de hoje

Hoje em dia existe um monte de frameworks Javascript que permitem com que o programador crie apps para web de uma forma "produtiva", mas esses frameworks muitas  vezes obrigaram os programadores a fazerem milhares de configurações apenas para rodar um **Hello word**, e trazem uma curva de aprendizado absurda.

Para resolver esse problema, o framework [Inter](https://github.com/interjs/inter) foi criado, ele é simples, intuitivo(*what you see is what you get*), reativo, completo mas pequeno e bastante poderoso, ele vai permitir com que você crie até mesmo as aplicações com o nível de complexidade mais surpreendente possível, importando ele apenas numa tag script.

Ele vem com um sistema reativo poderoso, ajax e um sistema de roteamento(para SPA).

Documentação em português:[tutorial](http://interjs.epizy.com/v1/tutorial/pt/instalacao)
Repositório no Github: [Github](https://github.com/interjs/inter)
Day 504 : The Mystery
Tags: hiphop, code, coding, lifelongdev
Published: 2022-01-06 23:06:31

_liner notes_:
- Professional : So, working on a new project for work to make a quick demo. I'm thinking we can use Web Components for some of the parts so that we can work on them independently and not get in each other's way. Plus it would be easier to swap out for another Web Component if needed. My manager had some concerns about making the Web Components to interface with the SDK make take too much time with this short of a deadline. I decided to see what it would take, so between meetings, I threw together a quick Web Component and application to demo everything. Got it done before our meeting and showed it to everyone. They liked it so we're going to go ahead with the Web Components. After the meeting, I added some more capabilities to match the mockups while we wait for some things.

- Personal : Last night, I started working on the part of my application where doing the live stream, I can talk and have other people on and the conversation will could be heard on the stream. I kind of had an idea of how I would like it to work, but wasn't sure if the SDK I wanted to use could do it. So I created a sample demo app to test my theory and it worked! I was able to hear myself over the live stream from my application. Making some progress!

![Aerial view of a beach in Big Sur, CA, USA with large rock formation sticking out of the ocean with waves crashing on the shore.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a7cichwmc56rk4657uno.jpg)

So CES 2022 is happening and there are 2 Chromebooks that were announced that I'll be keeping my eye on. One will even have 5G capability, so I don't always have to rely on tethering from my phone to be connected. That may be the deciding factor. The mystery is when will they be available and for how much. Plus I'm over tablets and keyboards. I have to charge both separately, when I try to highlight text, it won't register the click to start the dragging to hightlight and sometimes key presses don't get registered or even the opposite happens where I'll Ctrl + v and like 3 more v's show up. When I'm coding, that will throw an error. haha. Speaking of coding, I'm going to work on integrating that proof of concept app from last night into my side project. I need to start going through tracks for the radio show as well. This week flew by!

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube TV71763Q3t4 %}
​Use Powerline to make the appearance even cooler
Tags: linux, ubuntu, terminal, wazaterm
Published: 2022-01-06 22:46:56

>This article is the 6th day of the Advent Calendar 2021 of [Wazaterm](https://www.wazaterm.com), an online Linux terminal for hackers.



Yesterday, I explained how to change the appearance of Wazaterm using its theme options. Today, let's make it even cooler by using Powerline.  

What is Powerline? It is something that changes the appearance of the prompt line for a command like the one in the picture below.

![](https://www.wazaterm.com/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBTUT09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--838c92bdbccacdc79824d0063f38382b3e456a5c/powerline-examples.png)

It uses a special font, which can be troublesome to install in local consoles and applications, but Wazaterm includes the font by default, so you can use it just by installing the package.

```
$ sudo apt update
$ sudo apt install powerline
```

The powerline package comes with binding, so add it.
```
$ echo "source /usr/share/powerline/bindings/tmux/powerline.conf" >> .tmux.conf
```

Then reload .tmux.conf.
```
$ tmux source-file ~/.tmux.conf
```
Now you would see like this. it's very cool, isn't it?

![](https://www.wazaterm.com/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBTQT09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--1efdc336d5bb3cabde58a0f97c5decf8fb881ec1/powerline.png)
Try again
Tags: opensource
Published: 2022-01-06 22:33:22

It is that time of the year again, time to do the thing again cause you fucked up the first time! *Theoretically this should have been posted before new years, but it is what it is. I did do the work described in the post back then. I just didn't do the post itself.*

I learned. I shouldn't pick such an unknown task. Do something simpler, more familiar and with more support available. I started searching again.
## What I found ##

 - [Seata](https://github.com/seata) **Java, Go**. 
Large project. Many issues. Contributing guide. HOWEVER!
Man I hate java. And even though I love Go, I don't want to step on the same rake. Pass.

 - [Factorio Lab](https://github.com/orgs/factoriolab) **Typescript**. 
Medium-small project. About Factorio. Cool game. I know TypeScript. HOWEVER! 
I found it hard to select a good issue to work on. The project doesn't seem as active and there isn't that many issues to select from. The issues themselves are somewhat vague.. Maybe I'm just being picky, but I passed on this one.

 - [AppSmith](https://github.com/appsmithorg/appsmith) **Typescript, Java**. 
Large project. Many issues. Lots of choice. I was going to choose this project as my main source of issues. HOWEVER 
I didn't. I couldn't find a good issue again. Perhaps if I didn't find something better I'd come back to this and find one for me after all. *Spoiler: that didn't happen*.

 - [OnyxBay](https://github.com/ChaoticOnyx/OnyxBay) **DreamMaker**. 
What the fuck is Dream maker??? In russian. So it's unique, who else but me can solve this? More likely to recieve help on this because of russian. Less likely to because *???dReAmMaKer???*. Found even some issues which require artwork. I can do that. HOWEVER 
Really, so Go wasn't enough of an unknown language, you decide to dig up this specific unknown language with which you for sure won't get any help? Yea, ok ok, got it, pass...

 - [Pajbot](https://github.com/pajbot/pajbot) **Python**. 
Meduim-small project. I don't mind Python. I don't know Python. But I know many can help me with it. And it's not that hard. I kind of know Twitch structure. Theoretically if I could find an easy issue, that should be enough effort to use a new language and make something work... And there was such an [issue](https://github.com/pajbot/pajbot/issues/1499). 
<img src="https://cdn.discordapp.com/attachments/353432193730871296/928776175042576474/Screenshot_323.png" />
I know **exactly** what the person means. I know chat commands. I know there are already commands implemented in the project I can look at as a reference. That's it. That's my issue. 
<img src="https://cdn.discordapp.com/attachments/353432193730871296/928776750740172872/Screenshot_324.png" />
I'M ON IT.
Finishing
Tags: discuss, improvement, growth, career
Published: 2022-01-06 22:21:44

---
title: Finishing
published: true
description: Finish strong
tags: discuss, improvement, growth, career
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/va4jwmw7bxfmpon80fbf.jpg
---

_Originally published on [my blog](https://www.nikola-breznjak.com/blog/daily-thoughts/finishing/)._

> Sprint through the finish line. Don't slow down before the finish line. Finish strong.

---

This is [why I write](https://www.nikola-breznjak.com/blog/daily-thoughts/why-do-i-write-these-daily-thoughts-posts/) these "daily thoughts" posts.