teleren/devto huggingface dataset:
A Jekyll plugin for Web Monetization
Tags: gftwhackathon, ruby, jekyll, webmonetization
Published: 2020-06-02 16:20:29

---
title: A Jekyll plugin for Web Monetization
published: true
description: Another of my submissions to the Grant For The Web x DEV Hackathon!
tags: gftwhackathon, ruby, jekyll, webmonetization
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/z691fowei26lk3ozpyqd.png
---

## What I built

Inspired by [Sabine's post on her Hugo theme component](https://dev.to/coil/gftw-hackathon-need-some-inspiration-hugo-web-monetization-3k7g) and [Daniel's Eleventy plugin](https://dev.to/dancanetti/monetize-eleventy-posts-6h5) I thought I would try to bring Web Monetization to the world of Jekyll.

I create the [`jekyll-web_monetization` gem](https://rubygems.org/gems/jekyll-web_monetization) which aims to make it easy to add payment pointers to Jekyll sites. You can set a site-wide payment pointer, which is great if it is your own site. Or, if you have multiple authors, you can set per-post payment pointers in the the page's YAML front matter.

If your site or page has multiple owners, you can also set multiple payment pointers, site wide or per page. Check the documentation for [how to achieve probabilistic revenue sharing with this gem](https://github.com/philnash/jekyll-web_monetization#probabilistic-revenue-sharing).

### Submission Category: 

Foundational Technology

## Demo

I had previously added Web Monetization by hand to [my own Jekyll powered site](https://philna.sh/), but as a demo I have [replaced the hand rolled solution with my `jekyll-web_monetization` gem](https://github.com/philnash/philna.sh/commit/a654f724fd0592728dcf47d1f5c7b3441812bb2c).

## Link to Code

You can see all the code and documentation here:

{% github philnash/jekyll-web_monetization %}

## How I built it 

This is not the first Jekyll plugin I have built, but this is the first time I created a [custom liquid tag](https://jekyllrb.com/docs/plugins/tags/) to be used in a site. There was [not a lot of code needed](https://github.com/philnash/jekyll-web_monetization/blob/master/lib/jekyll/web_monetization/tag.rb), in fact the hardest part was digging into the config that is passed to a liquid tag as it is rendered in order to [extract the information so it could be added to the page](https://github.com/philnash/jekyll-web_monetization/blob/master/lib/jekyll/web_monetization/tag.rb#L7-L8).
TIL: alias in Ruby
Tags: todayilearned, ruby, beginners
Published: 2020-06-02 16:19:51

Today I learned (learnt?) about the `alias` keyword in Ruby. I'm not sure how I've gone this long working with ruby without hearing about it but better late than never.

If this is also your first time hearing about `alias`, let me give you a short intro.

Ruby is a very expressive language. It lets you write code that looks like plain english. Keeping with that trend it's not uncommon for me to do something like this in a class:
```ruby
class Todo
  attr_accessor :name, :complete

  def initialize(name)
    @name = name
    @complete = false
  end

  def done?
    complete
  end

  def mark_complete=(arg)
    complete=(arg)
  end
end
```

Ok, I wouldn't _actually_ do that but I'm just illustrating a point.

This works just fine and lets us keep writing our plain english-like syntax
```ruby
my_todo = Todo.new('Learn about the alias keyword')

my_todo.done? # => false

my_todo.mark_complete = true

my_todo.done? # => true
```

But, just like most things in Ruby, there is a shorter and better(?) way to do this.

Enter the `alias` keyword:
```ruby
class Todo
  attr_accessor :name, :complete

  def initialize(name)
    @name = name
    @complete = false
  end

  alias done? complete
  alias mark_complete= complete=
end
```

So much shorter and cleaner. I also think it's just as expressive as (if not more than) the original example. And it still works as expected:
```ruby
my_todo = Todo.new('Learn about the alias keyword')

my_todo.done? # => false

my_todo.mark_complete = true

my_todo.done? # => true
```

I found the `alias` keyword to be pretty great and definitely something I'm going to start using in the future.

How about you? What do you think about the `alias` keyword in Ruby?
SpaceX and Javascript🚀 
Tags: javascript, discuss, webdev, beginners
Published: 2020-06-02 16:08:10

Yes, its damn true. 

SpaceX in its recent launch Dragon 2 Flight has used a technology based on Chromium and [Javascript](https://xtriba.com)

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

[CGPA Calculator - CGPA Converter to Percentage](https://www.rapidtools.co/cgpa-calculator.html)

So Cheers to Javascript. What are your views on this ?
React Native Firebase Firestore | Cloud Firestore Database
Tags: reactnative, react, tutorial, beginners
Published: 2020-06-02 16:00:40

React native firebase cloud firestore database system and integrating firestore into our react native app. Firestore is a NoSQL database that allows for real-time database updates that sync across applications, websites and more. It's a very useful way to store data for your application, users and more via things like collections, documents etc.

{% youtube eET0YtDBWWg %}
<center>[Youtube: React Native Firebase Firestore](https://youtu.be/eET0YtDBWWg)</center>

Tutorial includes:
* Installation
* Firebase Firestore setup
* Firestore React Native setup
* Firestore Subscriptions
* Firestore Queries
* Firestore Writing Documents
* Firestore Transactions
* Firestore Batch Requests

React Native Firebase Multidex Fix:
https://youtu.be/4oVGEgHR3KE

Google Cloud Firestore Database:
https://firebase.google.com/products/firestore

RNFirebase Firestore:
https://rnfirebase.io/firestore/usage

RNFirebase:
https://rnfirebase.io/

## Follow and support me: 
Special thanks if you subscribe to my channel :)
* [🎞️ Youtube](https://www.youtube.com/channel/UCvM5YYWwfLwpcQgbRr68JLQ?sub_confirmation=1)
* [🐦 Twitter](https://twitter.com/adrian_twarog)

## Want to see more:
I will try to post new great content every day. Here are the latest items:
* [Adobe XD to Fully Responsive WordPress Site](https://dev.to/adriantwarog/adobe-xd-to-fully-responsive-wordpress-site-16e0)
* [Adobe XD to HTML Full Process](https://dev.to/adriantwarog/adobe-xd-to-html-full-process-ao6)
* [Full Tutorial on how to use SASS to improve your CSS](https://dev.to/adriantwarog/full-tutorial-on-how-to-use-sass-to-improve-your-css-57on)
* [Creating a Mobile Design and Developing it](https://dev.to/adriantwarog/creating-a-mobile-design-and-developing-it-5c4o)
The cost of parsing http
Tags: python, go, serverless, benchmarks
Published: 2020-06-02 15:54:16

When creating [Simple Web Analytics](https://simple-web-analytics.com/) I tried to be able to scale from the beginning. Coming from the Python world one thing I hear a lot is "The database is the bottleneck". But for that specific use case that turned out to not be true. Apparently, my application code seemed not to weight in into how many requests per second the server can handle so much. And in the end **I had to switch to go** to be able to accomplish what I find acceptable results.

Let me explain and compare numbers. With a hello world flask application and gunicorn I can get **3343.95 trans/sec**. Trying an  asynchronous (gevent.pywsgi) based wsgi to http adapter did not help, here the numbers are something like 1003.65 trans/sec. Now let's throw golang into the comparison. Before boring you too much I will do an really completely unfair comparison and jump straight to this number **8765.15 trans/sec. That is also including the whole application code.** And now just for completeness here is my unperfect measurement of what a simple hello world in golang can do: 12465.77 trans/sec.

In conclusion for my specific use case - doing optimized queries on a redis database - the bottleneck is clearly handling the http requests and not the application code. I wonder what exactly takes so long (in comparison with the application code). Is it parsing HTTP, is it handling the sockets, is it something else? Id' like to know!
My Website..
Tags: github, writing, website, showdev
Published: 2020-06-02 15:42:16

I was just thinking about building my own website, but since I didn't have any knowledge on how websites are built and what all things you require to make it, my curiosity led me searching for blogs/posts/articles on google. 
I had discussions in my friends circle too. 

Going through a lot of articles and suggestions provided by google search I came to know that there is whole lot of new technologies available in the market using which I can build my website in a single day.

It was tough choosing between **Jekyll/Hexo/Gatsby/Hugo**.
First, I started with Hugo, but had a tough time to understand it, as you have to download **Go** [_a programming language developed by Google_] and based on it the development of you website starts. 
It was tough for me to understand. 
So, I dropped the idea of building my website using Hugo.

Finally, I started my work using **Hexo**. It was easy to understand and implement. I chose a theme I liked and started working on it. 
Also implemented as few 3rd party plugins inside my website for getting it lively.

Its a pleasure to announce that my Website is live now.
Checkout the link [here][website].

[website]: https://mfaisalkhatri.github.io
Machine learning in layman's term.
Tags: machinelearning
Published: 2020-06-01 17:55:53


As we are living in information age, computers have become an integral part of our life. This computer requires some software programs to work. This software programs are nothing but a set of command/orders that tells the machine what to do. For example, what to show on screen, or add two numbers and display them, etc.
Now these software are designed by engineers in such a way that machine would do a particular job when particular inputs and command are given. So, the tasks were pretty straightforward and they rely on the inputs to do a thing. For example, a calculator app. 
This traditional system follows as, there will be a machine in which we give input and a program and it will give an output to us output.
![traditional programming](https://www.guru99.com/images/tensorflow/082918_1102_WhatisMachi1.png)
This approach would be fine when you’re want to do a task like baking a cookie for your grandchild. You take all the ingredient(input) and recipe(program) and make cookies(output). But what happens when you are an experienced chef (or Nani  ) and your grandson likes a particular cookie from a shop and you wanted to make it at home. You as a experienced cook, would taste the cookie and try to figure out its content and its recipe. you were able to do this because you are experienced and learnt this from years of training. Humans tends to learn from experiences. And when we want to do the same with the machine i.e. to teach a machine do a particular job, we will need a different approach. This approach is machine learning. A machine learning is a subset of AI in which machine tends to take decision on its own. 
Just like as human need experiences or information to learn, in machine learning, machine needs a data from which it can learn. The machine learning model follows a below given model.
![machine learning](https://www.guru99.com/images/tensorflow/082918_1102_WhatisMachi2.png)
The machine would be given a data and output and machine learning algorithm learns on that data using ML algorithms and gives the rule that can be used to do a task. In our cookie example case, it will gives us recipe. 
This is machine learning.
CommonMark (Markdown)
Published: 2020-06-02 14:36:54

StackOverFlow's [new markdown editor](https://meta.stackexchange.com/questions/348746/were-switching-to-commonmark?cb=1) looks great. Take a [look.](https://stackoverflow.com/questions/ask)

Instead of direct HTML conversion they use AST conversion. This makes it immensely reusable in other languages. Java, C#, C++, Python, etc. They have also begun the process of standardization.

**CommonMark**

{% github https://github.com/commonmark/commonmark.js/ %}
What are your most frequently used external fonts?
Tags: discuss, webdev
Published: 2020-06-02 15:13:26

---
title: What are your most frequently used external fonts?
published: true
description: 
tags: discuss, webdev
---
Considering the looks and feel, what are some of your personal favorite fonts you use in your projects most often?

It would be [Nunito](https://fonts.google.com/specimen/Nunito), [Quicksand](https://fonts.google.com/specimen/Quicksand) and [Montserrat](https://fonts.google.com/specimen/Montserrat) for me.
Наиболее простой способ установки ADB 
Tags: android, adb, fastboot
Published: 2020-06-02 14:55:13

Консольная утилита ADB, являющаяся незаменимым инструментом для любого Android-разработчика, может быть установлена на компьютер несколькими способами. Наиболее простое решение не требует каких-либо особых знаний, а на его реализацию уйдет не больше минуты.

ADB – это утилита, предназначенная для отладки и работы с консолью Android с компьютера. Управление ею осуществляется посредством [текстовых команд](https://dev.to/plotegor/adb-fastboot-3mgf). При помощи ADB можно копировать и отправлять файлы, инсталлировать и удалять приложения, записывать скринкасты, создавать скриншоты, устанавливать прошивки и даже [сбрасывать некоторые типы блокировок](https://dev.to/plotegor/pin-adb-g8c). Чтобы использовать ADB, достаточно подключить мобильное устройство к компьютеру через порт USB и активировать [режим отладки](https://4idroid.com/kak-vklyuchit-otladku-po-usb-na-android/) в настройках Android.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/x79gy2asbx9a4e2ui6n4.jpg)
Как же выполняется установка программы? Оказывается, скачивать инсталлятор и проводить дополнительные манипуляции не обязательно – достаточно загрузить архив «platform-tools» и распаковать его на диске «C:» (на ПК под управлением Windows). Помимо ADB этот архив содержит утилиту Fastboot и другие компоненты. Ссылки на скачивание архива для разных операционных систем:

* [Windows](https://dl.google.com/android/repository/platform-tools-latest-windows.zip);
* [Linux](https://dl.google.com/android/repository/platform-tools-latest-linux.zip);
* [Mac](https://dl.google.com/android/repository/platform-tools-latest-darwin.zip).

Лайфхак для пользователей Windows: чтобы приступить к работе с ADB, не обязательно прописывать путь к файлу в консоли. Можно открыть папку «platform-tools» и, удерживая клавишу «Shift», кликнуть правой кнопкой мыши по пустой области. В раскрывшемся контекстном меню останется выбрать «Открыть окно команд» либо «Открыть окно PowerShell здесь».

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/12mrp00jq5axmgmf8u7y.png)
Если в ходе работы с ADB возникнут трудности, например, утилита не распознает мобильное устройство, следует выполнить некоторые действия:

* Подключиться к другому USB-порту;
* Установить [Java Development Kit](https://www.oracle.com/java/technologies/javase/javase-jdk8-downloads.html);
* Установить драйверы USB – по [ссылке](https://adb.clockworkmod.com/) можно скачать универсальный пакет драйверов.
I created an easy way to browse & filter Kindle Highlights 📚
Tags: kindle, flutter, books, showdev
Published: 2020-06-02 14:34:11

#[Highlights](https://ephrai.me/kindleNotesApp/#/) 📚

Browse highlights from your Kindle

I was looking for a way to see my Kindle highlights in a good looking way, and I didn't find anything which had a nice UI so I decided to create a minimal, lightweight and beautiful web app to browse & find highlights of your Kindle.

That's why I created [Highlights](https://ephrai.me/kindleNotesApp/#/) 📚.

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

[Highlights](https://ephrai.me/kindleNotesApp/#/) is an open-source project which was made with Flutter.

Some of its features are:

- Search highlights by title, author, etc.
- Filter by Book 📖 
- Minimal and elegant UI.
- Responsive design

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


##[Demo](https://ephrai.me/kindleNotesApp/#/) 🚀
My best practice use redis in javascript
Tags: redis, javascript, node
Published: 2020-06-02 14:21:15

---
title: My best practice use redis in javascript
published: true
description: Nuxt.js use redis cache data 
tags: redis, javascript, nodejs
---
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/t3cjm3zuiw7p9ads8gj7.jpg)

`node-redis` support operation redis server in nodejs. 
We use nuxt.js formwork in my team, when need cache data we create class to implement redis api like `read`, `write`, `fetch` methods let's show you code

``` javascript
// redis.js
const Redis = require('redis')
const { promisify } = require("util");
const DEFAULT_URL = 'redis://127.0.0.1:6379'
const PREFIX = '__prefix:'
const DEFAULT_EXPIRES = '7d'

export class Redis {
  constructor(url, options={} ) {
    this.url = url || DEFAULT_URL
    this.store = Redis.createClient({
      url: this.url,
      prefix: PREFIX,
    })
    this.client = {
      get: key => {
        const start = new Date()
        const getAsync = promisify(this.store.get).bind(this.store)
        return getAsync(key).finally(console.log({ action: 'READ', key, start }))
      },
      set: (key, val) => {
        const start = new Date()
        const setAsync = promisify(this.store.set).bind(this.store)
        return setAsync(key, val).finally(console.log({ action: 'WRITE', key, start }))
      },
      setex: (key, expires, val) => {
        const start = new Date()
        const setexAsync = promisify(this.store.setex).bind(this.store)
        return setexAsync(key, expires, val).finally(console.log({ action: 'WRITE', key, start, expires }))
      },
    }
  }

  disconnect(callback) {
    this.store.quit(callback)
  }

  async read(key) {
    const res = await this.client.get(key)
    if (!res) {
      return null
    }
    try {
      return JSON.parse(res)
    } catch (ex) {
      return null
    }
  }

  async write(key, value, expires) {
    if (!expires) {
      expires = DEFAULT_EXPIRES
    }
    await this.client.setex(key, expires, JSON.stringify(value))
  }

  async fetch(key, expires, callback) {
    let obj = await this.read(key)
    if (obj) {
      return obj
    }
    obj = await callback()
    await this.write(key, obj, expires)
    return obj
  }
}

```

We can use redis cache more readable.

``` javascript
import Vue from 'vue'

const cache = ()=>{
  if(!Vue.$redis){
    Vue.$redis = new Redis(process.env.REDIS_URL, options)
  }
  return Vue.$redis
}

const list = cache().fetch('cache-key', async ()=>{
  const resp = await fetch('api/products')
  if(resp.err){
    return []
  }else{
    return resp.data
  }
})
```

Call `Vue.$redis` `fetch` method first find if havs cache in redis with key `cache-key`.
If no cache found, `fetch` method just call `callback` fetch `api/products` then return the response and cache it.
If call `fetch` with `cach-key` again will return the data from redis.

Hope help you :)
remote work and communities
Published: 2020-06-02 14:12:32

I got here because of a link in some remote work Slack channel and the whole thing just got me very intrigued. I'm not really a programmer, my brain is wired for regular letters, even numbers create trouble sometimes. However, I like a good story and have been delving deep on how remote work on a big scale is changing... culture, cities, economies, so I hope to get a few insights and just soak up whatever floats my way here. 

✌🏻
Eagluet-simple pomodoro time with force to focus
Tags: javascript, webdev, productivity, showdev
Published: 2020-06-02 14:05:13

 I had launch a product on ProductHunt. Eagluet- simple and elegant Pomodoro Timer. Some of its feature are, it notifies you 5 sec early when the Break mode start. Forces You to Rest or go somewhere else while in the Break time. The good thing is it is open source, you can contribute request for the new feature.
Please do upvote on the ProductHunt https://www.producthunt.com/posts/eagluet 
GitHub:-
https://github.com/surajrathod/eagluet
How to get rid of branch name from git push origin master

Tags: git, github, howto
Published: 2020-06-02 13:48:55

We always type `git push origin master`, while working on feature branch we type `git push origin JIRA-1`, sometimes the names of the feature branch is not easy then we use `git push origin this-branch-will-do-something` to push the code over GitHub or any other hosting service. In each case, we are doing redundant work of copy-pasting or typing branch name which is redundant and annoying as you have to remember the branch name exactly or you might end up pushing the code to the wrong branch. This can be handled by just with one command,

```bash
git config push.default current
```

So this command push changes to `.gitconfig` file and after change git config file looks like this:

```bash
[user]
  name = author
  email = author@itsopensource.com

[push]
  default = current
```

You can directly append in git config too.

After this, all you need to do is:

```bash
git push origin
```

**Note** - If you do this inside a git repo, this will only be available for that repo, if you want to do it globally and add ``--global`` flag:

```bash
git config --global push.default current
```


This will make these changes to be set globally across all the git repos you are using.

Happy git!

Originally published at https://itsopensource.com.
Setting up react app from scratch [Workshop recording]
Tags: react, tutorial, javascript, webdev
Published: 2020-06-02 13:48:33

This past Saturday, May the 30th, 2020, along with ~30 engineers we held a workshop where we built a react app from scratch. We started with an empty terminal and added dependencies until we eventually worked our way to rendering content with React. As we added those dependencies we explored what each of them was doing and how they would play into the React ecosystem.

In the workshop we installed webpack, babel, eslint, prettier, react, react-dom, jest and @testing-library/react. In between I shared some hot Vscode, productivity, and interview tips!

Many of the engineers in the audience were either students or recent graduates who were looking for frontend roles. Thus I took more of an enterprise approach for configuring and optimizing your react apps for production setting in a very basic way. Part 2 will be in a couple of weeks :D

This is pretty much the first time I'm sharing something like this on the web but I think there are many engineers (new comer or veterans) that might find this beneficial, so any feedback is greatly appreciated

I hope you can find some value from this tutorial! :D

Github:  https://github.com/aromanarguello/workshop-2020-react

{% youtube K41DUe38Lc4 %}

https://www.youtube.com/watch?v=K41DUe38Lc4&t=115s