teleren/devto huggingface dataset:
Have anyone tried CouchDB, and various offline implementations (PouchDB)?
Tags: pouchdb, couchdb, sync, database
Published: 2020-05-14 08:39:01

> [PouchDB](https://pouchdb.com/) is an open-source JavaScript database inspired by [Apache CouchDB](http://couchdb.apache.org/) that is designed to run well within the browser.
> 
> PouchDB was created to help web developers build applications that work as well offline as they do online.
> It enables applications to store data locally while offline, then synchronize it with CouchDB and compatible servers when the application is back online, keeping the user's data in sync no matter where they next login.

```javascript
var db = new PouchDB('dbname');

db.put({
  _id: 'dave@gmail.com',
  name: 'David',
  age: 69
});

db.changes().on('change', function() {
  console.log('Ch-Ch-Changes');
});

db.replicate.to('http://example.com/mydb');
```

The real problem seems to be Indexing and Mango queries (i.e. MongoDB-like). It does support Map-Reduce, but its usage is not recommended.

Also, not sure about performance.
CSS Easy Masonry Grid
Tags: css, masonry
Published: 2020-05-14 07:00:47

Today we are going to look into making a straightforward `CSS` Masonry grid.
For those who don't know what a Masonry grid is, it's a grid where items that are not equal in size match up.
Back in the days, this was quite hard to achieve, and you had to use some bloated `JavaScript` framework to accomplish this.
Nowadays, we can make it with very little use of `CSS`.

## HTML Structure

```html
<div class="masonry">
  <img
    src="https://images.unsplash.com/photo-1551675705-72513c2722a2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60"
  />
  ... More images
</div>
```

As you can see, I tried to keep it as simple as possible by only using one `masonry` container and adding several images in it.

## CSS Masonry

```css
.masonry {
  column-count: 3;
  column-gap: 0;
}
.masonry img {
  display: block;
  max-width: 100%;
}
```

Yes, that's all! We define a `column-count` which will make 3 columns and I added a gap of 0 to make it look better.
Then each image we give a `max-width` so it doesn't break out.

View and play with this demo on Codepen.

<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="result" data-user="rebelchris" data-slug-hash="GRpBEyr" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSS Easy Masonry Grid">
  <span>See the Pen <a href="https://codepen.io/rebelchris/pen/GRpBEyr">
  CSS Easy Masonry Grid</a> by Chris Bongers (<a href="https://codepen.io/rebelchris">@rebelchris</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

## Browser Support

The browser support for `column-count` is actually impressive!
IE10+, and all major browsers.

[View on caniuse](https://caniuse.com/#search=column-count)

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
How and When to Use Invokable Controllers in Laravel
Tags: laravel
Published: 2020-05-14 08:31:45

Hello Artisan

In this following tutorial i will discuss about single action controller in laravel. Do you know what is single action controller and when to use this single action controller? 

https://www.codechief.org/article/how-and-when-to-use-invokable-controllers-in-laravel
My First HackerRank Assessment is Today!
Tags: devjournal, codenewbie, womenintech
Published: 2020-05-14 08:26:08

_This post was originally published on May 14, 2020 on [my blog] (https://alexlsalt.github.io/blog)._

Thursday morning. Today's the day I'll be completing my first HackerRank assessment for a job interview process. I feel good and confident after spending one hour each of the past six days practicing and getting used to the HR format. Let's goooo!

Once this assessment is finished, there'll be some nice space open in my mind. I may take a bit of a break tomorrow, or I might just jump in to another project I have on my list - like preparing my talk (!!!) for an upcoming coding conference.

I don't think speaker announcements are fully out in the open yet so I'm not going to divulge too much information here, but you'd best believe I'll be shouting it from the rooftops once it does.

OK! Back to today. Probably going to take a nice walk now and then sit myself down for the test. We're given a full 90 minutes to complete the assessment.

In other news, I can't stop listening to [this song] (https://www.youtube.com/watch?v=x-qBNbNuYpI) or thinking about how much I miss/want to eat Toaster Strudel.
CSS Minification for Server-Side Rendered Apps
Tags: css, react, ssr, optimization
Published: 2020-05-14 14:27:10

---
title: CSS Minification for Server-Side Rendered Apps
published: true
date: 2020-05-14 08:21:17 UTC
tags: css, react, ssr, optimization
canonical_url: https://kaspars.net/blog/css-minify-compress
---

With styles moving into components and critical styles being unique for each layout we no longer get the luxury of preparing and optimizing CSS during the build process (especially for server-side rendered applications). Optimizations needs to happen dynamically and have to be as fast even with a caching layer on top of it.

Most of the HTTP responses these days are compressed using GZIP which takes care of reducing the response body size during the transfer so I’m not completely sure why CSS and JS minification is considered _that important_ [in Google PageSpeed](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/optimize-encoding-and-transfer#minification-preprocessing--context-specific-optimizations), for example.

## Minification vs. Compression

I created [this experiment](https://github.com/kasparsd/csso-perf) to evaluate the impact of CSS minification over the resulting compressed version and the time it takes to do the minification.

For minfication I used the [csso](https://github.com/css/csso) library and this “dummify” three rule regular expression string-replace as the fastest way to do _some_ minification:

```js
const dummyMinifyCss = (css) => {
  return css
    .replace(/[\n\r\t]/gi, ' ') // Line breaks to spaces.
    .replace(/\s+/gi, ' ') // Multiple spaces to single spaces.
    .replace(/(\s+?)?([\(\):;}{>])(\s+?)?/ig, '$2') // Remove spaces before and after :;{}()>
}
```

Note that I haven’t really tested this tiny minifier apart from this site and a few other sites using the Bootstrap CSS library. I’m using a PHP version of the same snippet with the [Minit plugin](https://github.com/kasparsd/minit) on [my blog](https://kaspars.net/blog).

## Results

Here are the results for the Bootstrap CSS library:

| | Size | Compressed | Minify Time |
| --- | --- | --- | --- |
| **Original** | 198KB | 26KB | |
| **Minified** | 158KB (-20%) | 24KB | 109ms |
| **Dummified** | 166KB (-16%) | 24KB | 6ms (-94%) |

The dummy minifier produced only a 4% larger CSS but **18 times faster** than `csso` with the compressed CSS being the same! Note that different CSS files have different minification potential usually in the range of 5-35%.

Minifying CSS has very little impact over its compressed size so using a fast minifier that removes only the unnecessary whitespace is the quickest solution for server side rendered apps with dynamically generated CSS.
useEffect()- React Hooks
Tags: react, reactnative, javascript, functional
Published: 2020-05-14 08:16:31

# What is React Hooks?

Hooks are functions that let you use the React state and lifecycle events in a functional component. Hooks won't work inside classes. They came into existence to solve many problems created by the class-based components. In class, it was hard to reuse stateful logic between components. But in function, hooks allow us to reuse stateful logic without changing the component hierarchy. 

There are many Hooks. Two of the most commonly used are **State Hook** and **Effect Hook**. In this post, we will be taking a look at the Effect Hook.
 
# What is Effect Hook?

If you have used class-based components in react then you might be knowing about the Lifecycle events like componentDidMount, componentDidUpdate, and componentWillUnmount. The Effect Hook, useEffect, serves the same purpose as these but unified into a single API. 

# How to use Effect Hook?

Now we will be using the mighty Effect Hook. 

#### importing useEffect 

```javascript
import React, { useEffect } from 'react'
```

#### Calling on every render
This function will be called on every render of the component.

```javascript
// called on every render
useEffect(function callMeEveryRender(){
    // do something
});
```

#### Calling on Mount
This function will be called when the component will be mounted.

```javascript
// called only on mount
useEffect(function callMeOnMount(){
    // do something
}, []);
```

#### Calling when value changes
This function will be called when the value *count* changes.

```javascript
// called when count changes
useEffect(function callMeOnCountChanges(){
    // do something
},[count]);
```

#### Calling and Cleaning up on every render
This function will be called on every render of the component and perform the cleanup.

```javascript
// called when count changes
useEffect(function callMeAndCleanupEveryRender(){
    return function foo(){
        // do something
    }
});
```

#### Calling on Mount and cleanup before Unmount
This function will be called when the component will be mounted and perform the cleanup before the component gets unmounted.

```javascript
// called only on mount and cleanup before unmount
useEffect(function callMeOnMountAndCleanupBeforeUnmount(){
    return function foo(){
        // do something
    }
},[]);
```

# Some rules of useEffect

- Don’t call Hooks inside loops, conditions, or nested functions. Only call Hooks at the top level.
- Don’t call Hooks from regular JavaScript functions. Only call Hooks from React function components.

And don't break the rules, if you will then you will be in great trouble and may get into infinity loops.

![Rules Broken](https://miro.medium.com/max/800/1*7_VMV9w0KdoOeHgNk_zn_g.jpeg)

# Conclusion
We have seen how to use useEffect in a React Function Component 

I hope this helped you with understanding useEffect!
Thanks for reading!
**Happy Coding!**
Automated Pi-Hole setup in Azure
Tags: azure, container, pihole, powershell
Published: 2020-05-14 07:42:44

---
title: Automated Pi-Hole setup in Azure
published: true
description: After reading an interesting article about Pi-Hole in Azure I thought about trying it out myself.
tags: azure, container, pi-hole, powershell
---

The whole concept behind Pi-Hole got me hooked: A DNS sinkhole that blocks traffic I don't want (trackers, malware, etc.). And this can be done for the whole network if you set the upstream DNS server on your router to the Pi-Hole instance. So, no add blocker needed anymore. 

Disclaimer: I was not able to get it working... I got the same error discussed in this [thread](https://discourse.pi-hole.net/t/pihole-5-upgrade-error-datatables-warning-table-id-groupstable-ajax-error-for-more-information-about-this-error/32275/11). **So, if any skilled linuxer can fix it. I'd be glad!**

The instance is quickly set up in Azure thanks to this article:

{% link https://dev.to/ganesshkumar/pi-hole-in-azure-container-instances-4abf %} 

I went a little further and extended the script to replace yaml placeholders via PowerShell. Line 30 to 45 shows how the replacement is done.

{% gist https://gist.github.com/engineererr/82d2e565b7879c6cb774c117492310c6 file=Deploy-PiHoleToAzure.ps1 %}

The whole gist including the yaml input file is available [here](https://gist.github.com/engineererr/82d2e565b7879c6cb774c117492310c6).

More posts on my blog: https://engineerer.ch/
Five Important Subsets of AI
Tags: sachinduggal, sachindevduggal, engineerai, ai
Published: 2020-05-14 06:45:33

As far as a simple definition, AI is the ability of a machine or a computer device to imitate human intelligence , secure from experiences, adapt to the most recent data and work people-like-exercises.

![Artificial Intelligence](https://dev-to-uploads.s3.amazonaws.com/i/2eg6650ngkzvlyi8yblu.jpg)

AI executes tasks intelligently that yield in creating enormous accuracy, flexibility, and productivity for the entire system. Tech chiefs are looking for some approaches to implement AI technologies into their organizations to draw obstruction and include values, for example, Artificial Intelligence is immovably utilized in the banking and media industry. There is a wide arrangement of methods that come in the space of AI, for example, linguistics, bias, vision, robotics, planning, natural language processing, decision science, etc. Let us learn about some of the major subfields of Artificial Intelligence in depth.

**Neural Network**

Joining cognitive science and machines to perform tasks, the neural network is a part of [Engineer AI](https://entrackr.com/2018/11/softbank-jungle-ventures-fund-engineer/) that utilizes nervous system science. Imitating the human mind where the human brain contains an unbounded number of neurons and to code brain-neurons into a system or a machine is the thing that the neural network functions.

Neural network and machine learning combinedly tackle numerous intricate tasks effortlessly while a large number of these tasks can be automated. NLTK is your sacred goal library that is utilized in NLP. Ace all the modules in it and you’ll be a professional text analyzer instantly. Other Python libraries include pandas, NumPy, text blob, matplotlib, wordcloud.

**Deep Learning**

An explainer article by AI software organization Pathmind offers a valuable analogy: Think of a lot of Russian dolls settled within one another. “Profound learning is a subset of machine learning and machine learning is a subset of Artificial Intelligence, which is an umbrella term for any computer program that accomplishes something smart.”

Deep learning utilizes alleged neural systems, which “learn from processing the labeled information provided during training and uses this answer key to realize what attributes of the information are expected to build the right yield,” as per one clarification given by deep [Artificial Intelligence](https://inc42.com/buzz/jungle-ventures-softbanks-deepcore-invest-29-5-mn-in-software-marketplace-engineer-ai/). “When an adequate number of models have been processed, the neural network can start to process new, inconspicuous sources of info and effectively return precise outcomes.”

Deep learning powers product and content recommendations for Amazon and Netflix. It works in the background of Google’s voice-and image-recognition algorithms. Its ability to break down a lot of high-dimensional information makes deep learning unmistakably appropriate for supercharging preventive maintenance frameworks.

Read full article @ https://www.analyticsinsight.net/five-important-subsets-of-artificial-intelligence/
💜 A collection to learn React Hooks! 🎣
Tags: javascript, react, tutorial, webdev
Published: 2020-05-14 07:30:16

---
title: 💜 A collection to learn React Hooks! 🎣 
published: true
description: A playlist of videos to learn React Hooks.
tags: javascript, react, tutorial, webdev
cover_image: https://imgur.com/5ApukFl.png
---

Hey all, over the past few weeks I've been doing a React Hooks series on my YouTube so thought I would share them with you in case there is any particular area you are struggling to understand. Feel free to ask questions here or in the comments on the videos.

1. [An Introduction to React Hooks - Classes versus Hooks](https://youtu.be/UIG7OCG4QSs)
{% youtube UIG7OCG4QSs %}

2. [useState](https://youtu.be/uQox1UTsn1k)
{% youtube uQox1UTsn1k %}

3. [useEffect](https://youtu.be/kC8Mw0BG4eA)
{% youtube kC8Mw0BG4eA %}

4. [useReducer](https://youtu.be/Ch3ZBKP1rVo)
{% youtube Ch3ZBKP1rVo %}

5. [Context and useContext](https://youtu.be/WAYQR0JneE8)
{% youtube WAYQR0JneE8 %}

6. [Custom Hooks by example](https://youtu.be/6Cpk1hdg0fM)
{% youtube 6Cpk1hdg0fM %}

This was my first playlist so happy to hear your thoughts. 💜

---

[Follow me on Twitter](https://twitter.com/nialljoemaher)

Subscribe on [Codú Community](https://www.youtube.com/c/Cod%C3%BACommunity)
[From May 7 to May 13] The things I knew and thought last week
Tags: vue, go, protocolbuffers
Published: 2020-05-14 07:13:42

---
title: [From May 7 to May 13] The things I knew and thought last week
published: true
description: [From May 7 to May 13] The things I knew and thought last week
tags: vue, go, protocol buffers
---

[Vue] Adding component dynamically
https://vuejs.org/v2/guide/components.html#Dynamic-Components

parent.vue
```vue
<template>
  <component
   v-for="(item, index) in items"
   @appendAmount="appendAmount(index, $event)"
   v-bind:amount="device.amount"
   v-bind:is="'Selector'"
   :key="device.deviceId"
 ></component>
</template>

<script>
export default Vue.extend({
methods
})
</script>
```

https://codesandbox.io/s/dynamic-components-762se

[Vue] How to use HOC in an event

[Vue] .sync modifier

[Vue] $data in IntelliJ IDEA

`this.$data.form` `this.form`

[Vue] Getting parent and chile component's parameter in the same function

```ts
$emit('...', $event)
@... = append(index, $event)
```

[Vue] @click.prevent

[Protocol Buffers] Cyclic import

[GORM] Using gorm.Model.ID for replacing on Association Replace
Experience in this week 20200514
Published: 2020-05-14 07:13:27

# convert HEIC to jpg on macOS terminal
```bash
ls -a *.HEIC | xargs -I% magick convert % ./temp_jpeg/%.jpg
```
# convert jpg to PDF on macOS terminal
```bash
convert *.jpg hoge.pdf
```

# CompositionAPI Chain Reactive Function TypeScript
how to implement reactive data binding

step 1. make reactive object wrapped by UnwrapRef
```typescript
function useLoginState(): UnwrapRef<Auth> {
  const loginStateRef = reactive({
    name: undefined,
    state: AuthState.Logout
  } as Auth)
  return loginStateRef
}
```
`reactive()` wrap data object

step 2. update reactive object in async function
```typescript
  setInterval(() => {
    let newLoginState = AuthState.Login
    if (loginStateRef.state !== newLoginState) {
      loginStateRef.state = newLoginState
    }
  }, 500)
```
update value through UnwrapRef object.

step 3. observe reactive object in html
```html
{{ ghInfoRef.data.issues }}
```

```vue
<template>
      <v-data-table
        v-model="selected"
        :headers="headers"
        :items="ghInfoRef.data.issues"
        :search="search"
        :loading="ghInfoRef.data.issues.length === 0"
        item-key="title"
        show-select
        class="elevation-1"
      >
      </v-data-table>
</template>
<script lang="ts">

interface GHInfo {
  data: {
    issues: GHIssue[]
  }
  loading: boolean
  errored: boolean
}

function useLoginState(): UnwrapRef<Auth> {
  consolelog(`SeparateCompositionComponent.useLoginState()`)

  const loginStateRef = reactive({
    name: undefined,
    state: AuthState.Logout
  } as Auth)

  // emulate async function
  setInterval(() => {
    let newLoginState = AuthState.Login
    if (loginStateRef.state !== newLoginState) {
      loginStateRef.state = newLoginState
    }
  }, 500)
  return loginStateRef
}


function useGitHubAPI(loginStateRef: UnwrapRef<Auth>): UnwrapRef<GHInfo> {
  consolelog(`loginStateRef.loginState:${loginStateRef.state}`)
  const ghInfoRef = reactive({
    data: { issues: [] },
    loading: true,
    errored: false
  } as GHInfo)

  watch(
    () => loginStateRef.state,
    async (current, prev) => {
      consolelog(
        'Watch loginStateRef.state function called with args:',
        current,
        prev
      )
     
      ghInfoRef.data = {
        issues: filteredIssues
      }
   
    }
}

const GitHubIssuesCompositionComponent = defineComponent({
  props: {
    message: {
      type: String,
      default: 'default Value----------------------'
    }
  },
  setup(props: Props, context: SetupContext) {
    consolelog(`GitHubIssuesCompositionComponent.setup()`)

    const loginStateRef = useLoginState()
    const ghInfoRef = useGitHubAPI(loginStateRef)
    return { ghInfoRef }
  }
})
export default GitHubIssuesCompositionComponent
</script>
```
Library for modals, dialogs and alerts
Tags: javascript, todayisearched, jQuery
Published: 2020-05-14 07:03:31

##Introduction
This post is about a ui library for modal popup.

Every now and then for a requirement involving modal popups, alert or prompts we tend to go for bootstrap as it also gives us grid layouts, utilities and handful of components to leverage.

It was not different in my case. But then, I stumbled upon a library name [jQuery-confirm](https://craftpip.github.io/jquery-confirm/) which had unique use cases. So, I decided to make use of this library.

My minimum usecases were:
### It should be customizable from UI standpoint
It doesnot disappoint as you get:
1. nice style options, drag feature, color options.
2. theme options like light,dark, modern, material,etc.
3. animation support
4. auto close feature

### It should have something for AJAX requests
With jconfirm you have the power to load content directly when needed via ajax, no extra code.
Two methods are available to load content via Ajax:

1. Pass in String content the URL with "URL:" prepended.
   content: "URL:http://example.com/getData?id=1"
2. Pass in Function that returns a jQuery ajax promise.
   content: function(){ return $.get(...); }

### Lastly proper documentation with examples

Do give it a try as it happens to be a nice alternative with cool features.

Cheers !!!
is thirteen
Tags: v, showdev, javascript, go
Published: 2020-05-14 06:43:27

# is thirteen

Check if a number is equal to 13.

{% github  https://github.com/Delta456/is-thirteen %}

## Why

As corona epidemic is going on in the world and I was bored and wanted to make a new project but I wanted it to be short and funny so I though of porting this [JS module](https://github.com/jezen/is-thirteen) to [V](vlang.io).


Recently, I saw a port of the JS module to Golang here. 

{% post https://dev.to/stanleynguyen/is-thirteen-in-go-38h9 %}

This Go port adds more checks if string is equal to 13 in all aspects as listed [here](https://github.com/stanleynguyen/is-thirteen/blob/master/constants.go). So my port uses both of the functionality combined.

## Installation

- Manually:
  - `git clone https://github.com/Delta456/is-thirteen is_thirteen`

- Via VPM
   - `v install is_thirteen`

- Via Vpkg
   - `vpkg install is_thirteen`

## Usage

```v
import is_thirteen

fn main() {
	is_thirteen.number(13).thirteen()               // true
	is_thirteen.number(12.8).roughly.thirteen()     // true
	is_thirteen.number(6).within(10).of.thirteen()  // true

	// Check your math skillz
	is_thirteen.number(4).plus(5).thirteen()     // false
	is_thirteen.number(12).plus(1).thirteen()    // true
	is_thirteen.number(4).minus(12).thirteen()   // false
	is_thirteen.number(14).minus(1).thirteen()   // true
	is_thirteen.number(1).times(8).thirteen()    // false
	is_thirteen.number(26).divides(2).thirteen() // true

	// Check your spelling and chemistry skillz
	is_thirteen.str("tHirTeEn").thirteen()  // true
	is_thirteen.str("neetriht").backwards.thirteen()  // true
	is_thirteen.str("aLumInUm").atomic_number.thirteen() // true
}
```

## Acknowledgments 

I thank the authors who wrote this module respectively in Go and JS from which I understood the code and ported from! 

## License

Licensed under MIT.