teleren/devto huggingface dataset:
redux-workerized - Redux in WebWorker for React and Vue
Tags: react, vue
Published: 2018-11-12 06:33:12

---
title: redux-workerized - Redux in WebWorker for React and Vue
published: true
description: 
tags: react,vue
---

I made experimental modules to use redux in worker.

[mizchi/redux-workerized](https://github.com/mizchi/redux-workerized)

- TypeScript Friendly API
- Redux.Store in Worker
- React Hooks API and Vue Plugin

Shared Store example

![](https://i.gyazo.com/d35c88597e72590b3e73d8618f26c061.gif)

![](https://i.gyazo.com/f946435f53d2cf0c4f875676ec23f84b.png)

## Code

full code is here https://github.com/mizchi/redux-workerized/tree/master/examples/microfront

```typescript
import "@babel/polyfill";
import { RootState, increment, Increment, INCREMENT } from "./reducer";

const worker = new Worker("./worker.ts");

// React

import React, { useCallback } from "react";
import ReactDOM from "react-dom";
import { createWorkerContext } from "redux-workerize/react";

const { WorkerContext, useSnapshot, useDispatch, ready } = createWorkerContext<
  RootState,
  { value: number }
>(worker, async (state: RootState) => {
  return state.counter;
});

function CounterApp() {
  const value = useSnapshot(state => state.value);
  const dispatch = useDispatch<Increment>();

  const onClick = useCallback(() => {
    dispatch(increment());
  }, []);

  return <button onClick={onClick}>{value}</button>;
}

ready.then(() => {
  ReactDOM.render(
    <WorkerContext>
      <CounterApp />
    </WorkerContext>,
    document.querySelector(".react-root")
  );
});

// Vue
import Vue from "vue";
import Vuex from "vuex";
import App from "./App.vue";
import { workerPlugin, proxy, SYNC } from "redux-workerize/vue";

Vue.use(Vuex);

type CounterSnapshot = {
  value: number;
};

export type State = {
  remote: CounterSnapshot;
};

const store = new Vuex.Store<State>({
  state: {
    remote: {
      value: 0
    }
  },
  mutations: {
    [SYNC](state, payload: CounterSnapshot) {
      state.remote = { ...state.remote, ...payload };
    },
    ...proxy([INCREMENT])
  },
  plugins: [
    workerPlugin(
      worker,
      (state: RootState): CounterSnapshot => {
        return state.counter;
      }
    )
  ]
});

new Vue({
  store,
  el: ".vue-root",
  render(h) {
    return h(App);
  }
});
```

NOTE: You need react@16.7.0-alpha.0 react-dom@16.7.0-alpha.0

Vuex subscribe remote Redux.Store snapshot

## Worker Side

```typescript
import * as Comlink from "comlinkjs";
import { createStore } from "redux";
import reducer from "./reducer";
import { createWorkerizedStore } from "redux-workerized/worker";

const store = createStore(reducer);
const storeAPI = createWorkerizedStore(store);

Comlink.expose({ ...storeAPI }, self);
```

## What I want to do

- For performance by off-the-main-thread
- Store in Woker is training wheels to write universal javascript.
Laravel EmailWatch
Tags: laravel, package, email, local
Published: 2018-11-12 06:08:43

---
title: Laravel EmailWatch
published: true
description: Laravel package to open sent emails in default email client directly.
tags: laravel, package, email, local
cover_image: 
---

I was looking for a package that would automatically open sent email in default email client so that it becomes easier while testing and developing an application. So I built one.

{% github https://github.com/sarfraznawaz2005/emailwatch %}
Object detection Part 6 - Inference in java [Tensorflow]
Tags: objectdetection, tensorflow, java, inference
Published: 2018-11-12 04:37:01

---
title: Object detection Part 6 - Inference in java [Tensorflow]
published: true
description: We look at exporting our model into saved_model and use that in java in order to run inference on images the model never seen before.
tags: object detection, tensorflow, java, inference 
---

{% youtube K0ewhYgKRpo %}
A funny rap song about the woes of CSS
Tags: css
Published: 2018-11-12 02:22:54

---
title: A funny rap song about the woes of CSS
published: true
description: https://www.youtube.com/watch?v=0yXJ4t6Ax1U
tags: #css
---

Here is the song link: https://www.youtube.com/watch?v=0yXJ4t6Ax1U

Quick background on this project/channel: I'm a full time programmer and I love making rap music. I see a lot of humor in our profession/industry, and thought it would be fun to combine the two.

I have several other songs worth checking out, and I'm constantly working on new stuff, so subscribe to get notified of new songs!
A funny rap song about remote dev work
Tags: showdev, programming, culture
Published: 2018-11-12 02:16:19

---
title: A funny rap song about remote dev work
published: true    
description: https://www.youtube.com/watch?v=ZAW1LBJE-w4
tags: #showdev, #programming, #culture
---

Here is the song link: https://www.youtube.com/watch?v=ZAW1LBJE-w4

Quick background on this project/channel: I'm a full time programmer and I love making rap music. I see a lot of humor in our profession/industry, and thought it would be fun to combine the two.

My latest track is about remote work, which I've done exclusively for a few years now.

I have several other songs worth listening to and I'm constantly working on new stuff, so subscribe to get notified of new songs!
Attack on Titan seems pretty dope.
Tags: discuss
Published: 2018-11-12 01:47:12

---
title: Attack on Titan seems pretty dope.
published: true
description: An anime I finally like.
tags: discuss
---
I have tried a lot of Anime because I think that there has to be some out there I like, but I had not found any yet. Still I pick one or two up a year and give them a shot. This time I tried Attack on Titan at the recommendation of two students, and 3 episodes in I am hooked. The first episode reminded me so much of ["Saturn devouring his son"](https://en.wikipedia.org/wiki/Saturn_Devouring_His_Son)

I am pretty stoked to watch more so I am cutting this post here, do any of you like Attack on Titan? Do you like any other Anime that you might suggest I watch?
What's a Progressive Web App (PWA)?
Tags: help
Published: 2018-11-12 00:29:36

Hi folks! Thanks for reading.

Just wondering what a progressive web app is, and also what are some good resources to get started if I wanted to read more?

About seven years ago or so, I thought PWAs were just web apps that degraded gracefully when browser support for a feature wasn't available.

How are PWAs different than hybrid apps? Server-rendered/fullstack apps?
5 Factors for Effective Teams
Tags: teams, effective, research
Published: 2018-11-10 10:34:14

---
title: 5 Factors for Effective Teams
published: true
description: Googles project aristotle
tags: teams,effective,research
cover_image: https://thepracticaldev.s3.amazonaws.com/i/hj4zcx3dd1o7oq82jqmk.jpg
---

Most of us work in teams, some as developers, some as managers, but both actually want to develop software effectively. That doesn't mean "fast" even if managers* often use those two terms interchangeably from time to time.

The researchers found out, that those are the 5 key factors for effective teams:

> 1. **Psychological safety** -
>    “If I make a mistake on our team, it is not held against me.”
> 2. **Dependability** -
>    “When my teammates say they’ll do something, they follow through with it.”
> 3. **Structure and Clarity** -
>    “Our team has an effective decision-making process.”
> 4. **Meaning** -
>    “The work I do for our team is meaningful to me.”
> 5. **Impact** -
>    “I understand how our team’s work contributes to the organization's goals.”

Although those results come from one company (Google) that certainly works different than many other companies, I think many of us will agree that those are indeed important factors.

Surprisingly, "psychological safety" is number one. At least from my gut feeling, this was very important, but it's really important to see that as an objective result. Developers work well in an environment where they are not blamed for mistakes or missed deadlines. Where mistakes are actually viewed as a good thing that we can learn from and continuously improve.

With no surprise but equally important is what is not on the list: Putting people under a *constant* pressure to achieve a higher feature output or to meet artificial deadlines. This will almost always result in either failing projects to to the lack of quality and high maintenance costs and/or people simply quitting the job. Read "Tom DeMarco - Peopleware", a really good book on this topic. 

So, have a look on the research results, linked in the references section below. See if it applies to your situation and if you are a manager, see what you actually can improve. There are even some good suggestions on what can be done to achieve those goals.

# References
[Google Project Aristotle Research Results](https://rework.withgoogle.com/print/guides/5721312655835136/)
[Tom DeMarco - Peopleware](https://www.amazon.com/Peopleware-Productive-Projects-Tom-DeMarco/dp/0932633439)

(*) I'm not blaming anything generally on managers here, I am actually both developer and development manager. I just think too little managers actually base their managing style on scientifically proven methods.
How TF Does XSS Work?
Tags: discuss, explainlikeimfive
Published: 2018-11-12 00:23:18

---
title: How TF Does XSS Work?
published: true
description: 
tags: discuss, explainlikeimfive
---

I tweeted this just 5 minutes ago:

{% twitter 1061773651278774273 %}

My aim here is to fix a vulnerability of a core React component for an app I’m building I’d like to be *the* app to showcase on my portfolio and resume. I just don’t understand how XSS works.

Any help?
what keyboard to choose?
Tags: discuss, devtips, help
Published: 2018-11-11 23:01:37

---
title: what keyboard to choose?
published: true
description: choosing a keyboard!
tags: #discuss, #devtips, #help
---

so as the title says, i am in need of help here.
I am currently using a steelseries Apex m800 to type on.
I started to take a coding class about a month ago and realized that the keyboard i am using is not comfortable to type on.
So i tried a bunch of different keyboards and i am now trying to choose between 2 keyboards that are vastly different. A 60% ducky one 2 mini with silent red Cherry mx switches and a Logitech Craft. i tried the Little brother to the Craft and enjoyed the experience but there where minor things that bothered me, namely no light on the keycaps and the placement of the Arrow keys. Now the reason i am considering the ducky one 2 mini is the portability and i just like the over all look of it. Now on to the main dilemma, i like using the arrowkeys and the numpad. but is there an advantage to choosing the mini and Learning to use short commands and remapping of the keys?
SQL:How to compare with NULL without "IS NULL" operator
Tags: sql, null, rdbms, database
Published: 2018-11-11 21:39:10

---
title: SQL:How to compare with NULL without "IS NULL" operator
published: true
description: introduction about IS DISTINCT FROM operator
tags: SQL,NULL,RDBMS,Database
---

We use `IS NULL` instead of ` = `for comparison with NULL. This is because there are many RDBMSs that become UNKNOWN if you compare null and value with `=`.


- comparison of some value and null to false
- comparison of null and null to true

Some times we want to compare it like that. In such a case we can use the comparison operator `IS DISTINCT FROM` or` IS NOT DISTINCT FROM`.

| A | B | A = B | A IS NOT DISTINCT FROM B |
|:--|:--|:--|:--|
| 0 | 0 | true | true |
| 0 | 1 | false | false |
| 0 | null | unknown | false |
| null | null | unknown | true |

# environment and version

```
postgres=# SELECT version();
                                                             version                                                              
----------------------------------------------------------------------------------------------------------------------------------
 PostgreSQL 10.1 on x86_64-apple-darwin13.4.0, compiled by Apple LLVM version 6.0 (clang-600.0.57) (based on LLVM 3.5svn), 64-bit
(1 row)

```

```
$ sqlite3 --version
3.22.0 2018-01-22 18:45:57 0c55d179733b46d8d0ba4d88e01a25e10677046ee3da1d5b1581e86726f2171d

```

# Example on PostgreSQL

```sql
--compare null and value with '='( result is unknown)
postgres=# select null = 4;
 ?column? 
----------
 
(1 row)

--compare value and value (result is true/false)
postgres=# select 4 = 4;
 ?column? 
----------
 t
(1 row)

--compare null and value with 'IS DISTINCT FROM' operator (result is true/false)
postgres=# select null is distinct from  4;
 ?column? 
----------
 t
(1 row)

-- use 'IS NOT DISTINCT FROM' to check equal
postgres=# select null is not distinct from  4;
 ?column? 
----------
 f
(1 row)

-- You can also compare values and values using 'IS DISTINCT FROM'
postgres=# select 4 is distinct from  4;
 ?column? 
----------
 f
(1 row)


```


# sqlite: Use `IS` instead of `IS DISTINCT FROM`

sqlite can't use `IS DISTINCT FROM`.

You can compare with `IS` instead

```
sqlite> select 4 = 4;
1
sqlite> select 4 is null;
0
sqlite> select 4 is 4;
1
sqlite> select 4 is 5;
0
sqlite> select null is null;
1
```

# other

`IS DISTINCT FROM` operator in MySQL is  `<=>`

# reference

- https://modern-sql.com/feature/is-distinct-from
- Joe Celko's SQL for Smarties: Advanced SQL Programming(Japanese version) 16. 3 IS [NOT] DISTINCT FROM operator
3 coding habits to unblock yourself (Part 3)
Tags: javascript, debugging, unblock
Published: 2018-11-11 21:26:42

---
title: 3 coding habits to unblock yourself (Part 3)
published: true
description: 
tags: #JavaScript #debugging #unblock
---

Hello fellow coders.
Here is the inevitable part 3 of some good habits to unblock yourself. If you missed the 1st and 2nd part you can check it out right here: 

**part 1**
https://dev.to/trilemaestro92/3-coding-habits-to-unblock-yourself-part-1-9lg

**part 2**
https://dev.to/trilemaestro92/3-coding-habits-to-unblock-yourself-part-2-4nge


Shall we begin.....


#B-B-Break Points!

What are break points you ask? 


"      It is a place in your code that can be pause/ stop, which allows you to examine your variable when your code is running .  "

Here's a example:

![Alt text of image](https://thepracticaldev.s3.amazonaws.com/i/wzftrp9hm9c9k6pfh3k0.JPG)

In this "blast from the past" example, the FizzBuzz challenge, I decided to add a **debugger** keyword at line 7 to pause the loop right before it finds a number divisible by 3. 

So instead of looping through the length of 100 for the challenge, it will start running the loop through the number 1....2.... then pause in the opened browser at 3 due to the break point that I added. 

![Alt text of image](https://thepracticaldev.s3.amazonaws.com/i/kiouhr4medsf1ms209ao.JPG)


If I hadn't added a **debugger** keyword, then when the loop reaches the number 3 it should activate the if statement at line 6 which would then console.log "Fiz" and continue looping through the rest of the numbers 

So... you see, the **debugger** keyword is a powerful tool devise by god to FREEZE TIME AND SPACE!

or a really helpful Chrome dev tool. Which ever way you see it...  

But jokes aside, the more I continue to develop and grow in web development, coding in parts and pieces then testing them have increase my efficiency. And having break points and using **debugger** have made my life much easier.

I strongly recommend checking out this video from the people of "Google Chrome Dev" to learn additional cool features from their DevTools utilizing break point:

{% youtube H0XScE08hy8 %} 



Well its been really fun writing the "how to unblock yourself" series but all good things must co-
 
**PART 3.5 COMING SOON!!!!!**
I want to store my benchmarks.js results
Tags: benchmarks, metrics, ci, node
Published: 2018-11-11 20:19:05

> Cover image by [Teresa Alba](https://es.semrush.com/blog/benchmarking-fortalecer-imagen-corporativa/)

This past week I've been searching for a library that generates a JSON for benchmark.js' results. Since I didn't find anything, I've written one myself.

By default, it stores everything in a file. But it has a callback function so you can do whatever you want, like storing it in a database.

It also uses [systeminformation](https://www.npmjs.com/package/systeminformation) to store static data about the machine is running the benchmarks.

I think this lib is cool since it makes it possible to run your benchmarks in the CI pipeline and store the results in a database for future analysis.

## So, how can I start using it today?

First, you need to install the dependencies:

`yarn add benchmark benchmark-json-reporter`

Or

`npm install --save benchmark benchmark-json-reporter`

Last, you have to create a file that will run your benchmarks:

```js
const Benchmark = require('benchmark');
const jsonReporter = require('benchmark-json-reporter');

const suite = new Benchmark.Suite('my-bench-suite');

// Just this
jsonReporter(suite);

suite
  .add('bench-name-1', () => {
    // Faster heavy process
  })
  // ...
  .add('bench-name-n', () => {
    // Slower heavy process
  })
  // run async
  .run({ async: true });
```

This basic example will store the results in the following file: `<rootFolder>/benchmarks/my-bench-suite-({md5-hash}.log)`. The md5-hash is used to identify a machine univocally.

By the way, you can also store your benchmarks in a database like this:

```js
const Benchmark = require('benchmark');
const jsonReporter = require('benchmark-json-reporter');

const suite = new Benchmark.Suite('my-bench-suite');

// Just this
jsonReporter(suite, {
  callback(result, hashId, name, folder) {
    // 1. Connect to a database
    const connection = new SomeEndPoint();
    // 2. Store the sysinfo with the hashId as a main ID
    connection
      .getById(hashId)
      .update({ sysinfo: result.sysinfo })
      .then(() => 
        // 3. Store the benchmarks
        Promise.all(
          benchs.map(bench =>
            // For each benchmark, push the result into the collection
            connection
              .getById(hashId)
              .getProp('benchmarks')
              .getCollection(bench.timestamp).push(bench),
          )
        )
      ).then(() => {
        // 4. Close the database connection
        connection.close();
      });
    // 5. Profit.
  },
});

suite
  .add('bench-name-1', () => {
    // Faster heavy process
  })
  // ...
  .add('bench-name-n', () => {
    // Slower heavy process
  })
  // run async
  .run({ async: true });
```

Thank you for reading! And if you have any question, don't hesitate to ask!
Google EG Suspicious Results
Tags: suspiciousresults, googleeg
Published: 2018-11-11 18:37:22

---
title: Google EG Suspicious Results
published: true
description: When I use Google EG to search for anything, I get suspicious results from an unknown website called, its actual results and it to an unknown software website, For example, when I search for English Medical Jobs the malicious site redirect all of the 2nd-page results as shown in the attached image.

tags: Suspicious Results, Google EG
---
Magento 2 Notification Bar Pro
Tags: magento2, magento, magento2notification, magento2promobanner
Published: 2018-11-11 17:32:29

---
title: Magento 2 Notification Bar Pro
published: true
description: 
tags: #magento2 #magento #magento2notification #magento2promobanner
---

<p>The <a href="https://www.ulmod.com/notification-bar-for-magento-2.html">Notification Bar Pro for Magento 2</a> allows creating an unlimited number of promotions banners and insert it at any page and position. Comes with a bunch of features such as the ability to create any number of notification bars, promo banners and groups, eight predefined positions, flexible notifications placement, responsive for mobile devices, notification bars statistics, multiple customization options, and more.</p>

<p>Check more details here : <a href="https://www.ulmod.com/notification-bar-for-magento-2.html">https://www.ulmod.com/notification-bar-for-magento-2.html</a></p>
First iOS speaking engagement at 360iDev
Tags: ios, abtest, speaking, 360idev
Published: 2018-11-11 16:42:37

---
title: First iOS speaking engagement at 360iDev
published: true
tags: ios,ab-test,speaking,360idev
canonical_url: 
---

The recording is now available for viewing, my first speaking engagement at an iOS conference! If you want to learn how we do AB testing at Grubhub, check this out.

Jenny Chang Ho — Building an A/B Testing Framework that works for Developers via @YouTube @360iDev

{% youtube PwUAwUXByAg %}

Originally published at [How To Do It In Swift](https://www.howtodoitinswift.com/blog/2018/10/13/best-development-practices-for-ios-development-ive-seen-is-atnbspgrubhub).
10 Rules (part 1) for Success in anything
Tags: blog, code, life, wordpress
Published: 2019-01-02 13:31:55

---
title: 10 Rules (part 1) for Success in anything
published: true
tags: blog,code,life,wordpress
canonical_url: https://itscoderslife.wordpress.com/2018/11/11/top-10-rules-for-success-part-1/
---

Came across this [video](https://www.youtube.com/watch?v=8rnno7Mi1DQ) and when I analysed my day I do most of the stuff but also miss out on the key stuff. So thought of penning it down in a blog.

-= **TIM FERRISS’S 10 RULES** =- (as I understood)  
1. _Ask great questions_ – questions which actually makes an impact and whose answers really of some value  
2. _Start small_ – anything you start, do it with baby steps but be consistent  
3. _Be focused_ – dont get distracted  
4. _Unplug and reset_ – re-evaluate every now and then  
5. _Accept the collateral damage_ – (not sure exactly what damage – may be _Sacrifices_)  
6. _Try the Five Minute Journal method_ – make this either a morning or evening routine  
7. _Schedule your time_ – limit your time for social media, mails, everything necessary  
8. _Get feedback_ – start and get your stuff into hands of few people first for feedback  
9. _Simplify_ – anything in life must be done in the simplest possible way  
10. _Do AcroYoga_ – I would say start with basic yoga make it a routine and then advanced

-= **BONUS** =-  
i. _View problems as opportunities_ – take up, face it and deliver  
ii. _Find your diehard fans_ – true admirers, well wishers, fans give back  
iii. _Create space for creativity_ – allot some time for your creative brain.