teleren/devto huggingface dataset:
Redux를 사용하면서 아쉬웠던 것들
Tags: react, redux
Published: 2020-06-04 15:04:17

제 포스트에 대한 비판, 의견, 공감하는 댓글은 언제나 환영입니다. 다시 한번 이 포스트에 방문해주셔서 감사합니다.
이 글은 Redux의 기초는 다루지 않습니다.이 글을 읽기 전 [과연 props는 어디까지 내려가는가](https://dev.to/wes5510/props-40d6)을 읽으면 도움됩니다.

## TL;DR

- Redux를 사용하면서 불편한 점이 있었다.
    1. 직관적이지 않은 로직으로 러닝 커브가 컸다.
    2. 필요하지 않은 빈 상태 데이터가 남아있어서 디버깅시 가독성이 떨어졌다.
- 하지만 위 불편한 점을 커버하기 위한 방법도 있고 Redux를 사용하면 패턴이 생겨 어플리케이션을 개발하는 데 높은 생산성과 가독성을 유지할 수 있기 때문에 아직 사용하고 있다.

## 본론

아래는 Redux를 사용하면서 불편했던 점을 설명한다.

### 직관적이지 않는 로직

Redux는 기본 코드는 아래와 같다.

- `initState.js`
```jsx
const initState = {
	n: 0
};

export default initState;
```
- `actions.js`
```jsx
export const add = () => ({
  type: 'ADD'
});
```
- `reducers.js`
```jsx
import initState from './initState';

const reducers = (state = initState, action) => {
  switch (action.type) {
    case 'ADD':
      return [
        ...state,
        n: state.n + 1
      ];
		default:
			return state;
	}
}

export default reducers;
```
- `Comp1.jsx`
```jsx
import React from 'react';
import { add } from '../reducers';

const Comp1 = ({ n, add }) => 
	(<div>n<button onClick={() => add()}>+</button></div>);

const mapStateToProps = state => ({ n: state.n });
const mapDispatchToProps = dispatch => ({ add: () => dispatch(add()) });
export default connect(mapStateToProps, mapDispatchToProps)(Comp1);
```

위의 코드에서 만약 Redux를 알지 못하는 사람이 `Comp1.jsx` 내용을 봤을 때 n이 1증가한다는 흐름을 정확히 알 수 있을까? 솔직히 난 처음에 이해하지 못했다. `mapStateToProps`, `mapDispatchToProps`의 인자(`state`, `dispatch`)가 어디서 입력되고 무엇이 입력되는지 이해하지 못했다. 그저 저렇게 사용해야되구나라고 생각했다.

처음에는 내가 이해력이 부족한 줄 알았지만 직장 동료들에게 이런 일이 있었다고 말하니 나와 같은 사람이 꽤 많았다.

### 필요하지 않은 빈 상태 데이터

만약 아래와 같은 요구사항을 가지고 있는 게시판을 구현한다고 생각하자.

- 모든 게시글을 보여주는 페이지(/posts 페이지라고 칭하겠다)
- 게시글에 대한 상세 정보(제목, 내용, 글쓴이)을 보여주는 페이지(/posts/:postID 페이지라고 칭하겠다)

Redux을 사용한다면 InitState를 아래와 같이 설정할 수 있다.

- `initState.js`

```jsx
const initState = {
    posts: [],
    post: {}
};

export default initState;
```

하지만 posts는 /posts 페이지에서만 쓸모있고 /posts/:postID 페이지에서는 없어도 되는 상태이다. 현재는 2페이지만 있지만 admin 어플리케이션과 같이 페이지는 많고 한 페이지에 사용하는 상태는 적다면 빈 상태 데이터는 많아질 것이다.

필요없는 빈 상태 데이터가 많아 [NEXT.js](https://nextjs.org/) + [Redux DevTools](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en)에서 디버깅하기 불편했고 가독성도 떨어졌다.

## 결론

Redux는 장점도 있지만 역시 단점도 있다. 하지만 러닝 커브가 크다는 단점은 학습으로 커버할 수 있고 필요하지 않은 빈 상태 데이터는 State 설계를 잘하면 피해갈 수 있다. 그리고 Redux를 잘 사용하면 어플리케이션를 더 쉽게 구현할 수 있다. 예를 들어 container에는 비즈니스 로직을 구현하고 백엔드와 통신하는 부분은 slice 모듈에 구현한다는 패턴이 생겨 다른 개발자들이 예상 가능한 코딩을 할 수 있어 높은 가독성과 생산성을 보장할 수 있다.
Day 1 of #100daysofcode
Tags: 100daysofcode
Published: 2020-06-04 15:00:46

Today's Progress: I have practiced 31 Applied Visual Design Challenges at https://www.freecodecamp.org/ and created githubPopularRepo React Web App mainly focuses on component Lifecycle Events, Ajax Requests, and Dynamic Rendering.

Link to work: https://github.com/Kyawkhaing444/githubPopularRepo-React-App
everyday is App Of The Day on the AppStore! (1200 days later ;D)
Tags: productivity, ios, webdev, android
Published: 2020-06-04 14:52:48

Hello IndieHackers! 

If you are looking for a story of instant success, then move onto the next tab. Nothing to see here!

If otherwise you are in for the long term, then you might want to read on. 

The TLDR is simply that finally, [everyday.app](https://everyday.app) has been featured as App Of The Day on the AppStore for several countries!!  🔥🎉🎉

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

It's been:
- 1172 days since I made public the first version of the web app.
- 965 days since [my IndieHackers interview](https://www.indiehackers.com/interview/the-productivity-app-that-helped-to-build-and-grow-itself-b4d7afdf11)
- 666 days since I released the first version of the mobile apps. (Lol, the number of the beast!)
- 562 days since [reaching #2 on ProductHunt](https://www.producthunt.com/posts/everyday-2) 
- 155 days since, wait deja vú, [reaching #2 on ProductHunt](https://www.producthunt.com/posts/everyday-2-0-2) again! 😄 

The point being... that I didn't start yesterday. **I just did a little bit every day, for a very long time**.

This is my current streak!
![Work on everyday.app streak](https://i.imgur.com/yeyF0Z2.png)

Of course not every day has been equally productive (especially when you have a lot of support emails piling up 😄) but that doesn't matter. Compounding progress and keeping the momentum is what matters in the long term. And I'm happy to start feeling like I've arrived to that long term when things start to happen without me pushing for them alone. Today, work that felt meaningless before is adding up to something beautiful to experience. Today, [everyday.app](https://everyday.app) is the App Of The Day!  🎉🎉

Every little piece of work and effort, builds up, and sometimes, the return dowsn't show immediately. So keep shipping, 'do the ting' and also.. 'do the marketing', [EVERY DAY](https://everyday.app)!!

PS: It is always a good opportunity to share` awesome-indie, the awesome repository of resources for indie hackers to make money off their sideprojects](https://github.com/mezod/awesome-indie) :)
PS2: If you are in Barcelona, make sure to join us at the [next IndieHackers Barcelona meetup](https://twitter.com/indiehackersbcn) and say hi!
PS3: You think you can help me grow faster? Reach out at **joan at everyday.app** and let's talk about it :)
A quick a11y CSS trick
Tags: css, a11y
Published: 2020-06-04 14:48:41

Today, my job was to correct some accessibility lacks on a website of one of my clients.

One of those corrections was about focusing the right stuff in the right order. To be sure of where the focus was, I used this little trick (only in development mode of course):

```css
*:focus {
	background-color: yellow ! important;
}
```
WMHub: easy Web Monetization for all
Tags: gftwhackathon
Published: 2020-06-04 14:41:10

[Instructions]: # (To submit to the Grant For The Web x DEV Hackathon, please fill out all sections.)


## What I built

A web app that allows you to automatically add Web Monetization to your project without having to code JS or add `<meta>` tags. It also collects metrics on pages with Web Monetization and consolidates that into the platform.

### Submission Category: 

Foundational Technology

[Note]: # (Foundational Technology, Creative Catalyst, or Exciting Experiments)


## Demo

https://wmhub.live

## Link to Code

{% github https://github.com/WebMonetizationHub/wmhub %}

[Note]: # (Our markdown editor supports pretty embeds. If you're sharing a GitHub repo, try this syntax: `{% github link_to_your_repo %}`)


## How I built it 

The stack for this project is Elixir, with PostgreSQL for the database and Phoenix as the web framework.

The "library" injected in pages to handle Web Monetization events is made in JavaScript, the ES5 version. We want to include everyone!

All interactions apart from the landing page, signin and signup forms are Phoenix LiveViews, which classifies this app as an SPA (after you login).

Communication with pages to broadcast real-time payment pointer updates to users that are already connected to your app are handled by Phoenix Channels.

[Note]: # (For example, what's the stack? did you run into issues or discover something new along the way? etc!)

## Additional Resources/Info 

The plan is to expand WMHub beyond a simple "payment pointer" update tool. Here are some of the ideas in the roadmap:

- A templating tool that allows you to hook Web Monetization events and display content. Maybe display a link to paying users! There is a challenge here in flexibility vs mitigating XSS attack vectors.

- A "trigger" tool that runs on Web Monetization events and allows you to hook any type of code.

- A marketplace of triggers and templates, so that users can install things without any knowledge whatsoever.

- Collect (anonimized/with consent) data from users visiting a WMHub powered project, allowing the content creator more insight on how their content is consumed.

[Reminder]: # (We hope you consider expanding your submission into a full-on application for the Grant for the Web CFP, due on June 12.)
How to perform Hardware (GPU) Video Acceleration in .NET (based on FFmpeg & SharpDX)
Tags: csharp, dotnet, showdev, tutorial
Published: 2020-06-04 14:22:20

As I've not found any similar resources / documentation I've decided to write my own tutorial / project for how to perform Hardware (GPU) Video Acceleration without using CPU or even RAM at all (focusing on Windows platforms and DirectX).

I've been using on my Video Player project FFmpeg 's Hardware Acceleration for decoding already, but that was not the heavy part for CPU/RAM as the Video Processing is (converting NV12 texture2D to RGBA - I was doing that with ffmpeg 's sws_scale).

After straggling by reading few resources and large low level code I've managed to perform it by grabbing ID3D11Texture2D from ffmpeg's decoder and transfer it to mine ID3D11Device (with the help of SharpDX).

Finally, as I had access to that texture in GPU i called DirectX VideoProcessorBlt to convert it without bringing it back in CPU.

You will be able to find a Sample .NET CSharp Project and more details at my github -> https://github.com/SuRGeoNix/MediaRouter/tree/master/Tutorials/VideoPlayer_HWAcceleration
Mid Meet Py - Ep.10 - Interview with Adam Johnson
Tags: python, django, webdev, chat
Published: 2020-06-04 14:16:00

---
title: Mid Meet Py - Ep.10 - Interview with Adam Johnson
published: true
description: We meet in the middle of the day in the middle of the week to chat about Python! Today we have a Django edition, having Adam Johnson, Django technical board member joining us.
tags: python, django, webdev, chat
---
PyChat:
    [PSF support diversity, BlackLivesMatters](https://twitter.com/ThePSF/status/1267591714925133825)
    [YSYS will be hosting an event bringing together black community leaders + allies in tech to discuss how we can mobilise and rebuild] (https://twitter.com/ThisIsYSYS/status/1267393576708734976 but BLM related)
    [EuroPython Schedule is out](https://ep2020.europython.eu/schedule/)
    [AnacondaCon Starting today](https://anacondacon.io/)
    [Django security releases, update ASAP](https://www.djangoproject.com/weblog/2020/jun/03/security-releases/)

Py Hall of Fram:
    Adam Johnson, Django technical board member
    Follow Adam on twitter [@AdamChainz](https://twitter.com/AdamChainz)
    [Get Adam's book](https://gumroad.com/l/suydt)

PyPI Highlight:
    Cheuk's choice - [sidetable](https://pbpython.com/sidetable.html) - Create Simple Summary Tables in Pandas
    Adam's choice - [time-machine](https://adamj.eu/tech/2020/06/03/introducing-time-machine/)
    Lais's choice - [pillow](https://pypi.org/project/Pillow/)

[Listen to MidMeetPy podcast](https://anchor.fm/midmeetpy)
Friendly Vue.js props helper tools
Tags: vue, javascript, tools
Published: 2020-06-04 14:00:36

---
title: Friendly Vue.js props helper tools
published: true
description: you can use props in vue more friendly.
tags: Vue.js, Javascript, tools
---
Friendly vue.js props helps methods which more readable.

use props native way in `vue.js` 
```javascript 
props: {
  name: {
    type: String,
    default: 'foo'
  },
  items:{
    type: Array,
    default: ['foo','bar']
  }
}
```

It's ok all is working but if vue component have many props and you will define more redundancy code.

```javascript
props: {
  name: {
    type: String,
    default: 'foo'
  },
  items:{
    type: Array,
    default: ['foo','bar']
  },
  items1:{
    type: Array,
    default: ['foo','bar']
  }
  items2:{
    type: Array,
    default: ['foo','bar']
  }
  items3:{
    type: Array,
    default: ['foo','bar']
  }
}
```

Emmm looks a little bit more redundancy.

What `vprop-types` do 

```javascript
// import 
yarn install vprop-types

// import 
import PropsType from 'vprop-types'

// <script>
props: {
  name: PropsType.string.def('foo'),
  items: PropsType.array.def(['foo','bar']),
  items1: PropsType.array.def(['foo','bar']),  
  items2: PropsType.array.def(['foo','bar']),
  kind: PropsType.oneOf(['foo','bar']).def('foo')
}
//
```

Looks more readable isn't it.

more info you can found [vprop-type](https://github.com/ihavecoke/vprop-type)
What are some specific instances in your coding journey that helped build up your confidence?
Tags: motivation, developer, discuss, beginners
Published: 2020-06-04 13:58:13

---
title: What are some specific instances in your coding journey that helped build up your confidence?
published: true
description: Curated answers to a question from the Code Connector community Slack channel.
tags: #motivation #developer #discuss #beginners
//cover_image: 
---
1. Created a personal project that was used by a co-worker. Helped host a tech meetup with several friends from my local tech community. Attended my first tech conference with a different friend new to the area. Getting a big hug from a boot-camp student after I helped solved a problem. If y'all notice a trend, nothing great happens without a great community.

2. Getting that first dev job offer was a huge boost to my confidence. Getting my first real story at that job knocked said confidence back down to the ground

3. When someone is facing issues that seem simple to me, but they are completely unaware of the solution. One such instance was with an app that was parsing XML and someone failed to handle namespace usages. The solution was to use a library to handle parsing.

4. Getting my first pull request approved. I found some obscure behavior in the Python library for dealing with structured statistical data. This showed that I not only understood git and GitHub but that I was able to produce something of value for this huge project.

Awesome Code Connector Contributors: Corey McCarty, Lynn Bradshaw, Lawrence Lockhart

[Code Connector](https://codeconnector.io/) is a non-profit that's organized tech meetups to help people start their journey into tech. You can join our daily conversations by joining the [Code Connector slack channel](https://bit.ly/2Ywnzqc).
Using Existing Database Connection's with Entity Framework Core 
Tags: efcore, dotnet, entityframework
Published: 2020-06-04 13:48:44

Entity Framework Core the default ORM that powers many many projects out there. It is great ORM and does its job great.  
  
  
  
But some projects use more than one data access libraries. The post will be demonstrating how to use an existing `DbConnection` with Entity Framework Core.  
  
  
      
The following code was tested with:  
- Dotnet Core 3.1
- Entity Framework Core 3.1.2  
   
   
   
You could do it...  
   
   
   
At `Startup.cs`  
  
```csharp
public class Startup
{
    public void ConfigureServices(IServiceCollection services)
    {
        services.AddDbContext<MyDbContext>((IServiceProvider serviceProvider, DbContextOptionsBuilder options) => {
        DbConnection connection = // Get your database connection here.
        options.UseSqlServer(connection);
    });
}
```  
  
At `OnConfiguring`   
```csharp
public class MyDbContext : DbContext
{
    private readonly DbConnection connection;

    public MyDbContext(DbContextOptions options, DbConnection connection) : base(options)
    {
        this.connection = connection;
    }

    protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder)
    {
        options.UseSqlServer(connection);
    }
}
```  

[In your code](https://docs.microsoft.com/en-us/ef/core/saving/transactions#share-connection-and-transaction)  
```csharp
var options = new DbContextOptionsBuilder<BloggingContext>()
    .UseSqlServer(new SqlConnection(connectionString))
    .Options;

using (var context1 = new BloggingContext(options))
{
    using (var transaction = context1.Database.BeginTransaction())
    {
        using (var context2 = new BloggingContext(options))
        {
            ...
        }
    }
}
```  
  
If you hit `System.InvalidOperationException: A transaction is already in progress; nested/concurrent transactions aren't supported.` while calling `SaveChanges()`, try the following   
```csharp
ctx.Database.UseTransaction((DbTransaction)transaction); // transaction is returned when you called BeginTransaction()
```   
As per stated in the [documentation](https://docs.microsoft.com/en-us/ef/core/saving/transactions#using-external-dbtransactions-relational-databases-only) this only works for relational database only.
Flutter Builds in the Cloud.
Tags: dart, flutter
Published: 2020-06-04 13:46:32

FlutLab.io is an online IDE for Flutter. And probably this is the fastest way to play with your first Flutter projects. FlutLab main idea is to provide an alternative to local installations of Android/IOS/Flutter SDK’s as well as Code Editors. In the tool-chain of FlutLab.io, developers can host their projects, collaborate, and do various builds. FlutLab builds are in the focus of this article.

How it looks like

The first thing you want to do with some fantastic examples of Flutter code is to build and run it.
Let’s visit https://flutlab.io and register a free account. You should see some opened project like this:

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

To see how this code behaves, you can click at the “Build project” button: ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/89z0n66xgz4hty7yubmk.png)

Immediately you can see this build in the progress:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/jwyn12lw9c4b8nhg4c8b.png)

Which will lead to success or failure. And the first (success) option looks like this:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/tbuf1283rfv7myiyqvcj.png)
Feedback / advices on my portfolio/blog
Tags: gatsby, react, design, ux
Published: 2020-06-04 13:43:16

Hi everyone !
Today, I have a special question to ask you.
About a month ago I have developed my personal blog / portfolio in three days. ( https://tsflorus.me ) The problem is that I am a perfectionist and I always want to do more. 

Can you, please, give me your feedback about this website or even advices. Let me know if something is missing or if you see better design possibilities.
https://tsflorus.me

Thank you dear friends !
Laravel & NuxtJS Starter pack
Tags: laravel, nuxt, vue, bootstrap
Published: 2020-06-04 12:55:07

This is an upgraded and modified version of [m2sd/nuxt-laravel-starter](https://github.com/m2sd/nuxt-laravel-starter) with BootstrapVue instead of Vuetify and Laravel 7 with Sanctum SPA Auth.

**Features:**

- Laravel 7
- Sanctum SPA Auth
- public_html as public dir
- NuxtJS (pallares/laravel-nuxt)
- BootstrapVue
- DotEnv
- ESLint + VSCode support
- Jest

## Installation

- Clone repository: 
```bash
$ git clone https://github.com/ordigital/laravel-nuxt-bs.git your-project
$ cd your-project
```
- Run auto-setup:
```bash
$ ./setup.sh
```
…which just executes commands below:
```bash
$ npm install # installs npm modules
$ npm audit fix # fixes to npm
$ composer install # installs composer modules
$ php artisan key:generate # generates app key in .env
$ touch database/database.sqlite # creates sqlite database
$ php artisan migrate:fresh --seed # migrates and seeds database with example user
```
- Edit `.env` and change:
```bash
APP_NAME="Name of your app"
APP_DESC="Description of your app"
APP_URL=http://localhost:8000
DEV_URL=http://localhost:3000 # axios baseURL for development
```
- You can edit NuxtJS config in `nuxt.config.js` and NuxtJS project in `resources/nuxt`
- Run developement server:
```bash
$ npm run dev
```
- Open website and try to sign in as `alf@melmack.mm` using password `lucky`
- To build for production:
```bash
$ npm run build
$ php artisan serve
```
VimTrick: Non-printable Characters
Tags: vim
Published: 2020-06-04 12:22:51

At times we might want to use unprintable or other in characters not accessible on our keyboards. For example, if you’d like a search and replace expression to use a carriage return. To enter characters like this in Vim, type `CTRL-v` while in insert-mode. Then enter the decimal code. You can also use `CTRL-m` for newlines.

While in insert mode press `CTRL-v` and then `CTRL-m` to insert a newline. Or try `CTRL-v` and then `162` to get `¢`.

Over on our [VimTricks post](https://vimtricks.substack.com/p/vimtrick-non-printable-characters), we have a screencast that captures the following substitution to drop each item onto an individual line:

```
%s/, /,^M  /g
```

Note that the `^M` is a single character inserted by using `CTRL-v` followed by `CTRL-m`.

Other characters can be inserted using their encoding number, `CTRL-V` 13 in the case of carriage return or `CTRL-v 9` can be used to insert a horizontal tab. Here are some other characters you can insert, by typing their number after you’ve pressed `CTRL-v` in insert mode:

* ¢ 162
* £ 163
* © 169
* ® 174

[Here’s a handy list for your reference](https://www.w3schools.com/charsets/ref_utf_latin1_supplement.asp). Just remember to go into Insert mode, then type `CTRL-v`, then type the decimal number.

Anyone here using this on a regular basis already? What kind of characters do you need to enter?
What makes a great development environment?
Tags: discuss
Published: 2020-06-04 12:45:58

---
title: What makes a great development environment?
published: true
description: What should every developer get or ask for in order to be most creative and productive? 
tags: #discuss
---

- It's fast! (top-notch hardware & internet connection)
- Simple to set up (one-step checkout + provision)
- Can run any test
- Can deploy to staging at a push of a button

What else? 🤔
Is Dogecoin a good investment in 2020? 

Tags: dogecoin, dogecoinprice, cryptocurrency, bitcoin
Published: 2020-06-04 12:37:10

Dogecoin is the most loved cryptocurrency today. It was named after the famous meme of the Shiba Inu dog that has attracted the attention of the blockchain community. It started as a simple joke, but the coin took an important place in the crypto sphere thanking its fans and charity activity. Today we will know about DOGE’s features, the coin’s future and Dogecoin Price Prediction for 2020.

What is Dogecoin?

Dogecoin was formed by using the codebase of Litecoin and its development was designed at providing an alternative to Bitcoin. It should’ve been a more accessible and friendly cryptocurrency.

Its most noticeable feature, however, is its mascot. The developers of Dogecoin chose a “fun” way towards its development.
The image of the crypto helped the coin to get attention in various social media. The coin turned famous even outside of the community of blockchain technology lovers.

Dogecoin Price Analysis
The year 2018 was tough and bearish for DOGE. Similarly to the other market, Dogecoin’s price was decreased by the loss of the public’s attention.

Google users found the coin very useful in January 2018. A couple of less important peaks happened in July and December. At the beginning of 2019, the popularity was around the same level as it was in the same period of 2018, which is a major achievement in terms of the industry crisis, happening today.

Price Prediction 2020
As per sources, DOGE is a profitable investment depending on the forecast. In 2020, the coin value will reach $0.00552. In 2025, DOGE rate can be around $0.01136.

Read more at https://coinpedia.org/information/dogecoin-price-analysis/