teleren/devto huggingface dataset:
What Position We Need to Choose When Sitting on a Toilet
Tags: health, weird, alternativemedicine, personaloraganizing
Published: 2021-01-05 01:44:50

Math is everywhere and the bathroom is no exception. It turns out that the angle created by your rectum when sitting on the toilet affects your health! In other words, there’s a right way and a wrong way to sit on the toilet.

we’ve looked into the math of going to the bathroom to find out what the best position is when sitting on a toilet and as a bonus, we’re revealing how pooping and happiness are related.READ MORE>>>>> http://bit.ly/3rVkjRu



=========================================
alternative Medicine, Weird, Cool Stuff, Science, Health UK, Etiquette, Personal Organizing, Bathroom, Personal Hygiene, Gut, Healthy Living, Genius, Amazing, alternative Medicine, Weird, Cool Stuff, Science, Health UK, Etiquette, Personal Organizing, Bathroom, Personal Hygiene, Gut, Healthy Living, Genius, Amazing, alternative Medicine, Weird, Cool Stuff, Science, Health UK, Etiquette, Personal Organizing, Bathroom, Personal Hygiene, Gut, Healthy Living, Genius, Amazing, alternative Medicine, Weird, Cool Stuff, Science, Health UK, Etiquette, Personal Organizing, Bathroom, Personal Hygiene, Gut, Healthy Living, Genius, Amazing, alternative Medicine, Weird, Cool Stuff, Science, Health UK, Etiquette, Personal Organizing, Bathroom, Personal Hygiene, Gut, Healthy Living, Genius, Amazing, alternative Medicine, Weird, Cool Stuff, Science, Health UK, Etiquette, Personal Organizing, Bathroom, Personal Hygiene, Gut, Healthy Living, Genius, Amazing, alternative Medicine, Weird, Cool Stuff, Science, Health UK, Etiquette, Personal Organizing, Bathroom, Personal Hygiene, Gut, Healthy Living, Genius, Amazing, alternative Medicine, Weird, Cool Stuff, Science, Health UK, Etiquette, Personal Organizing, Bathroom, Personal Hygiene, Gut, Healthy Living, Genius, Amazing,
Spinner facil y rapido
Tags: css, html, loader, spanish
Published: 2021-01-05 01:28:51

Un spinner es un componente muy importante para un sitio web, ya que nos ayudar a dar información al usuario sobre el estatus de nuestra página al realizar la primera carga, o después de una acción del usuario como cambiar de opción en el menú, abrir una galería de imágenes, o enviar un formulario.


Una forma muy fácil de hacer un spinner o loading es con puro css, de esta manera nos aseguramos que se visualizara y funcionara correctamente en cualquier navegador.

Primero necesitamos crear un contenedor HTML:

```html
<div class="spinner"></div>
```
Ahora solo necesitamos aplicar los estilos sobre este contenedor, y al ser solo CSS, puedes elegir la manera que más te guste de implementar como CSS, SCSS, styled-components, o cualquier otro:

- Primero definiremos el tamano de nuestro spinner y agregaremos bordes para que sea un poco más estético:

```css
.spinner {
  width: 36px;
  height: 36px;
  border: 5px solid rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  border-left-color: #7d47ff;
}
```

- Una ves tenemos la estructura base de nuestro spinner agregaremos las animaciones, de esta manera haremos saber al usuario que nuestro sitio web sigue funcionando:

```css
.spinner {
  width: 36px;
  height: 36px;
  border: 5px solid rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  border-left-color: #7d47ff;

  animation: spin 1s ease infinite;
}
```

- Una ves agregada la animación ```spin``` solo nos queda agregar los pasos de esa animación con ```keyframes```

```css
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

```

### Resultado:
{% codepen https://codepen.io/DorianMorones/pen/BaLxLap %}
What are the possible ways to create objects in JavaScript ?
Tags: javascript, object, es6
Published: 2021-01-05 01:21:12

There are many ways to create objects in javascript as below

Object constructor:

The simplest way to create an empty object is using the Object constructor. Currently this approach is not recommended.
```var object = new Object();```

Object's create method:

The create method of Object creates a new object by passing the prototype object as a parameter
```var object = Object.create(null);```
Object literal syntax:

The object literal syntax is equivalent to create method when it passes null as parameter

```var object = {};```
Function constructor:

Create any function and apply the new operator to create object instances,
```
function Person(name){
   var object = {};
   object.name=name;
   object.age=21;
   return object;
}
var object = new Person("Ngan Khong");
```

Function constructor with prototype:

This is similar to function constructor but it uses prototype for their properties and methods,

```
function Person(){}
Person.prototype.name = "Ngan Khong";
var object = new Person();
```

This is equivalent to an instance created with an object create method with a function prototype and then call that function with an instance and parameters as arguments.

```
function func {};

new func(x, y, z);
(OR)

// Create a new instance using function prototype.
var newInstance = Object.create(func.prototype)

// Call the function
var result = func.call(newInstance, x, y, z),

// If the result is a non-null object then use it otherwise just use the new instance.
console.log(result && typeof result === 'object' ? result : newInstance);
```

ES6 Class syntax:

ES6 introduces class feature to create the objects

```
class Person {
   constructor(name) {
      this.name = name;
   }
}

var object = new Person("Ngan Khong");
```

Singleton pattern:

A Singleton is an object which can only be instantiated one time. Repeated calls to its constructor return the same instance and this way one can ensure that they don't accidentally create multiple instances.

```
var object = new function(){
   this.name = "Ngan Khong";
}
```

Resource: https://github.com/sudheerj/javascript-interview-questions#what-are-the-possible-ways-to-create-objects-in-javascript
I'm Engineering Director in a Fintech(building apps using AWS/GCP), Ask Me Anything!
Tags: ama
Published: 2021-01-05 01:12:17

---
title: I'm Engineering Director in a Fintech(building apps using AWS/GCP), Ask Me Anything!
published: true
tags: ama
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/sow0jabrq6etl49zurn9.jpg
---
Making the world more programmable
Tags: devlog, ptc, progrium, talk
Published: 2021-01-05 00:40:59

---
title: Making the world more programmable
published: true
description: A draft talk I made 5 years ago trying to communicate my mission
tags: devlog, ptc, progrium, talk
cover_image: https://pbs.twimg.com/media/ErA-7jYXEAMtHB-?format=jpg&name=4096x4096
---
Hey everybody!

I'm starting this devlog up again to talk about some of the work I've been doing quietly for the past few years. It will mostly be project reveals, which should be exciting.

To kick things off I wanted to set the tone a little. I haven't given any serious talks in a while, and this is one of the last ones I put together. It's actually a rehearsal recording that's been private for 5 years UNTIL NOW of me framing my work around this mission: making the world more programmable. 

This was one attempt at a clear narrative for what I'm trying to achieve, but I didn't feel it was good enough. Five years is a good while, though, and looking back it is a decent introduction for what's to come. 

If I named this talk today I might instead call it "Making the future malleable" or something. 

{% vimeo 159888358 %}
Adding outline to Gutenberg blocks
Tags: wordpress, gutenberg, blocks, editor
Published: 2021-01-05 00:15:47

When building a complex layout using Gutenberg, the most frustrating issue is to select a block or its parent. It is rare occurrence (at least in my experience) that you can select a block on first click without the help of the breadcrumbs at the bottom of the editor. 

To solve this problem we can add an outline to each block to clearly show nested blocks and click on the appropriate one.

First we need to enqueue the style file. 
Add this code to functions.php in your theme or main file in your plugin:
```PHP
add_action('enqueue_block_editor_assets', function () {
    wp_enqueue_style('outline-style', plugin_dir_url(__FILE__) . "/outline-style.css", false, '1.0', 'all');
});
```

Then add this style inside oytline.style.css _(code is presented in SCSS, make sure to convert to CSS before using it)_:

```SCSS
.wp-block {
    outline: 1px solid transparent;
    outline-offset: 7px;
    transition: all 0.2s;
    &:hover {
        outline-color: lightgray;
    }
    .wp-block {
        outline-offset: 2px;
    }
}
```

The code will add an outline around each block but there is still an issue of identifying the name of the block especially when using custom blocks. 

We can modify the style a little bit to add the title of the block on the right top corner _(code in SCSS)_:

```SCSS
.wp-block {
    outline: 1px solid transparent;
    outline-offset: 7px;
    transition: all 0.2s;
    &:hover {
        outline-color: lightgray;

        &::before {
            content: attr(data-type);
            padding: 0.3em 0.6em;
            font-size: 0.8rem;
            position: absolute;
            color: black;
            font-family: 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Tahoma, sans-serif;
            top: 0;
            right: 0;
            left: initial !important;
            background-color: lightgray;
            transition: all 0.2s;
            pointer-events: none;
            z-index: 5;
            font-weight: normal;
        }
    }

    .wp-block {
        outline-offset: 2px;
    }
}
```

While this works fine there might be further issues that uses face. For example, some users want to always display outline (not just on hover), change the color, opacity or not display it at all.

To fix these issues I developed a WordPress plugin that enables users to change outline settings (like color, opacity and style) as well as show/hide the outline.

You can find the plugin here:
{% github kalimah-apps/Editor-Block-Outline no-readme %}

or install it from WordPress plugins directory. 
https://wordpress.org/plugins/editor-block-outline/
Svelte Transitions for Routes and Overlapping Elements
Tags: svelte, transitions
Published: 2021-10-24 00:36:35

---
title: Svelte Transitions for Routes and Overlapping Elements
published: true
date: 2021-01-05 00:00:00 UTC
tags: Svelte, transitions
canonical_url: https://imfeld.dev/writing/svelte_overlapping_transitions
---

Svelte’s transition system is praised for its ease of use, but it doesn’t handle everything for you. One common case that needs some extra care is transitioning between elements that are both supposed to occupy the same space.

Instead of the elements smoothly transitioning into the same spot, they both exist in the DOM at the same time, so the browser renders one element next to the other while the transitions run. When the outgoing element disappears, the new element then jumps into the correct place.

[View this post on the website](https://imfeld.dev/writing/svelte_overlapping_transitions) for an interactive example.

This is unsightly at best, but it’s pretty easy to fix with a quick application of CSS Grid.

The container element is a grid with one row and one column. The children elements are then all forced to be in the first row and column, so they will overlap. (Without this, the browser will assume you made a mistake and add extra grid cells.)

Then you just set up the transitions on your elements, and you’re ready to go!

```html
<style>
  .transition-container {
    display: grid;
    template-grid-rows: 1;
    template-grid-columns: 1;
  }

  .transition-container > * {
    grid-row: 1;
    grid-column: 1;
  }
</style>

<div class="transition-container">
  {#if enabled}
    <h1 in:fly={{ x: -200 }} out:fade>Enabled!</h1>
  {:else}
    <h1 in:fly={{ x: -200 }} out:fade>Disabled!</h1>
  {/if}
</div>

```

[View this post on the website](https://imfeld.dev/writing/svelte_overlapping_transitions) for an interactive example.

## Route Transitions

This same technique can be used to facilitate transitions between routes in a single-page application. Here’s an example using the [tinro](https://github.com/AlexxNB/tinro) router.

```html
<script>
  import { Route } from 'tinro';
  import { fade } from 'svelte/transition';
</script>
<style>
  #app {
    display: grid;
    height: 100%;
    width: 100%;
    overflow: auto;
    grid-template:
      "nav" 3rem
      "main" 1fr
      / auto;
  }

  nav {
    grid-area: nav;
  }

  main {
    grid-area: main;
    display: grid;
    template-grid-rows: 1;
    template-grid-columns: 1;
  }

  /* use :global since the Route element may be in another component */
  main > :global(*) {
    grid-row: 1;
    grid-column: 1;
  }
</style>

<div id="app">
<nav>Nav Bar</nav>
<main>
  <Route path="/">
    <div transition:fade>page</div>
  </Route>

  <Route path="/:post" let:meta>
    {#key meta.match}
      <div transition:fly={{ x: 200 }}>{meta.params.post}</div>
    {/key}
  </Route>
</main>
</div>

```

[View this post on the website](https://imfeld.dev/writing/svelte_overlapping_transitions) for an interactive example.

I’ll cover more advanced transition techniques in future posts. Thanks for reading!
How to undo from 'git reset' command?
Tags: git
Published: 2021-01-05 00:00:00

---
  title: How to undo from 'git reset' command?
  published: true
  tags: Git
  date: Tue Jan 05 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/undo-git-reset-commad
  cover_image: https://melvingeorge.me/_next/static/images/main-69caad1387fdd1db4fb953ea77b88917.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/undo-git-reset-commad)
  
To undo a `git reset`, you can use the command

```bash
git reset 'HEAD@1'
```

This will make the Git point to a version before the reset happened.

`HEAD@1` means version before reset and `HEAD@0` is the last git reset command itself.

This is possible since Git tracks all the activities within a branch including the `git reset`.

If you want a more detailed look into the activities in a Git branch, you can use the

```bash
git reflog
```

command. This will show all the activities including reset.

### Feel free to share if you found this useful 😃.

---
Formatting percentage values with JavaScript Intl
Published: 2022-05-09 13:55:55

---
title: Formatting percentage values with JavaScript Intl
published: true
date: 2021-01-05 00:00:00 UTC
tags: 
canonical_url: https://carl-topham.com//articles/intl-number-formatting-percentage
---

Javascript contains an Internationalization API that you can use to format numbers to a user's locale. Setting the style to `percent` is all that is needed.

```
Intl.NumberFormat("en-GB", { style: "percent"}).format(1.2345); // => "123%"

```

> Note: A value of `1` will return `100%` because `1x anything` is 100%!
> 
> ```
> 1 * 100 = 100; // 100% 
> 1.5 * 100 = 150; // 150%   
> 
> ```

To specify the decimal places use `minimumFractionDigits` and `maximumFractionDigits` to give you more visual control.

```
Intl.NumberFormat("en-GB", { style: "percent", 
    minimumFractionDigits: 1,
    maximumFractionDigits: 2
}).format(123.45); // => "123.45%"

```

This can all be wrapped in a function to save repetition and keep consistency across your app.

```
const formatPercentage = (value, locale = "en-GB") => {
    return Intl.NumberFormat(locale, {
        style: "percent",
        minimumFractionDigits: 1,
        maximumFractionDigits: 2
    }).format(value);
};

formatPercentage(1); // => "100.0%"
formatPercentage(0.1); // => "10.0%"
formatPercentage(0.13); // => "13.0%"
formatPercentage(0.135); // => "13.5%"
formatPercentage(0.1357); // => "13.57%"
formatPercentage(0.13579); // => "13.58%"

```
Programmer must code every day. Even in holiday seasons?
Tags: discuss, career
Published: 2021-01-04 23:59:21

> It doesn't matter if you've been to programming school or not, if you haven't written any code at all during this holiday season, you're probably not cut out to be an engineer.

It is now trend discussion topic in Twitter (of Japan).
Original tweet is:
https://twitter.com/kyuns/status/1345684921768022016?s=19

He is CTO of Zozo. https://zozo.jp/

Discussing point is "Even in holiday seasons?".
"We must enjoy holidays with families.",  "Must enjoy our hobby.", "Is it professionalism?" etc. 

There is some summary.
https://togetter.com/li/1647315

And it became a big discussion. This is another opinion.
https://blog.hirokiky.org/entry/2021/01/04/124400

Any opinions?
Sendgrid API + NodeJS project template
Tags: sendgrid, email, node
Published: 2021-01-04 23:56:36

---
title: Sendgrid API + NodeJS project template
published: true
description: A project template made easily spawn a Sendgrid client made with NodeJS
tags: sendgrid, email, nodejs
//cover_image: https://direct_url_to_image.jpg
---

Projects quickly reach a point where it is necessary to send emails, maybe a contact form or a password reset feature.

It is possible to use the [Sendgrid Mail API v3](https://sendgrid.com/docs/API_Reference/api_v3.html) directly on a website but it is entirely not recommended since it means exposing the Sengrid API key.

## A project template

The [sendgrid-nodejs-endpoint](https://github.com/nunofaria11/sendgrid-nodejs-endpoint) project is meant to be used as a template - it provides the following features out-of-the-box:
- configurable allowed origins
- configurable allowed recipients
- Basic or Digest authentication

Configured by specifying environment variables when deployed (or a `.env` file) and a passfile with authentication data if necessary.

```
PORT=3001
SENDGRID_API_KEY=<Sendgrid API key>

FROM=sender@mail.com
ALLOWED_RECIPIENTS=recipient1@mail.com recipient2@mail.com

ALLOWED_ORIGINS=http://example.com

AUTH_SCHEME=Digest
AUTH_REALM=test-realm
AUTH_PASSFILE=/path/users.passfile
```

## REST Endpoints

**"/" root endpoint**

GET endpoint responds with "Hello World!" message:

```
> GET /
< 200 OK
{
  "message": "Hello World!"
}
```

**"/mail" endpoint**

POST endpoint receives body with JSON object and uses the same object API as [Sendgrid NodeJS API](https://github.com/sendgrid/sendgrid-nodejs/tree/main/packages/mail).
```
> POST /mail
{
    "to": "recipient@mail.com",
    "subject": "test sendgrid client",
    "text": "test sendgrid client",
    "html": "test sendgrid client"
}

< 200 OK
```
Day 4 - Merge Two Sorted Lists
Tags: leetcode, python
Published: 2021-01-04 23:53:14

## The Problem

>Merge two sorted linked lists and return it as a __sorted__ list. The list should be made by splicing together the nodes of the first two lists.

__Example 1:__

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

```
Input: l1 = [1,2,4], l2 = [1,3,4]
Output: [1,1,2,3,4,4]
```

__Example 2:__

```
Input: l1 = [], l2 = []
Output: []
```

__Example 3:__

```
Input: l1 = [], l2 = [0]
Output: [0]
```

## My Tests

[Link to util code](https://github.com/ruarfff/leetcode-jan-2021/blob/main/src/util.py)

```python
import pytest
from typing import List
from .util import ListNode, toListNode, toList
from .Day4 import Solution

s = Solution()


@pytest.mark.parametrize(
    "l1,l2,expected",
    [
        ([1, 2, 4], [1, 3, 4], [1, 1, 2, 3, 4, 4]),
        ([1, 9, 22], [-3, 4, 30], [-3, 1, 4, 9, 22, 30]),
        (
            [-3, 4, 31, 49],
            [-20, -20, -3, 1, 4, 9, 22, 40, 40],
            [-20, -20, -3, -3, 1, 4, 4, 9, 22, 31, 40, 40, 49],
        ),
        ([], [0], [0]),
        ([], [], []),
    ],
)
def test_merge_sorted_list(l1, l2, expected):
    list_root1 = toListNode(l1)
    list_root2 = toListNode(l2)
    assert toList(s.mergeTwoLists(list_root1, list_root2)) == expected

```

## My Solution

```python
class Solution:
    def mergeTwoLists(self, l1: ListNode, l2: ListNode) -> ListNode:
        if l1 is None:
            return l2
        if l2 is None:
            return l1

        out = None
        l_next = None

        if l1.val > l2.val:
            out = l2
            l_next = l1
        else:
            out = l1
            l_next = l2

        out_next = out

        while l_next is not None:
            if out_next.next is None:
                out_next.next = l_next
                l_next = None
            elif l_next.val >= out_next.val and l_next.val <= out_next.next.val:
                new_node = ListNode(l_next.val, out_next.next)
                out_next.next = new_node
                l_next = l_next.next

            out_next = out_next.next

        return out
```

## Analysis

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

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

## My Commentary

I did this one in code pretty much exactly how I would do it in my head. Again, it's a fairly crap solution but time ran out. I am trying hard to get faster at these but finding it tricky.

When you look at the 2 lists, if you manually were to create a merged list, likely you would start with the lowest number from either list and add it to the merged list. You might do this in place too but let's say we're putting this in a new list. You would then look for the next number in sequence from either list and add that and so on. I coded it up that way except used the list with the smallest number at the start as the output list. 

I think I was more or less on the right path with this one but need to clean up the code a bit. It's quite messy.
Air dan ilmu pengetahuan
Tags: writing, productivity, water, indonesia
Published: 2021-01-04 23:43:44

![The problem of supply and demand in water resources](https://upload.wikimedia.org/wikipedia/commons/thumb/d/d6/Groundwater-problem-supply-demand.jpg/180px-Groundwater-problem-supply-demand.jpg)

Air yang menggenang tidak akan bermanfaat, tapi air yang mengalir pasti akan mendatangkan manfaat bagi banyak orang.

Begitu pula ilmu pengetahuan. Ia akan bermanfaat bila "mengalir". Maksud saya disampaikan ke orang lain. 

Masalahnya bagaimana cara anda mengalirkan ilmu pengetahuan, mari kita coba ikuti prinsip air saja.

* Air akan mengalir ke tempat yang lebih rendah.  Di sini berarti Anda perlu membagikan ilmu ke orang-orang yang relatif pengetahuannya lebih rendah dari Anda. 
* Hanya dengan tekanan atau dorongan, maka air dapat mengalir ke tempat yang lebih tinggi. Nah ini kasus khusus. Air yang muncrat ke atas karena bertekanan tidak terjadi di sembarang tempat. Seperti halnya Anda, ketika ingin menyampaikan ilmu ke atas memang harus berpayah-payah. Lebih capek dibanding Anda menurunkan ilmu ke bawah.
* Air juga mudah tercemar. Beri saja tinta, maka warna airpun berubah. Tapi tenang air juga punya kemampuan untuk membersihkan diri, asal sumber pencemarnya tidak terus-terusan keluar. Hujan yang banyak akan mengencerkan zat pencemar apapun yang ada dalam air. Andapun begitu. Kalau ingin mengoreksi sesuatu, maka sampaikan perbaikannya dan ulangi terus sampai pengotornya sendiri bosan dan hanya ada dua pilihan baginya: memperbaiki sesuai usulan Anda atau pensiun tanpa melakukan apa-apa. Sampaikan koreksi Anda tanpa henti sampai generasi berikutnya mengambil alih. Mudah-mudahan Anda berumur panjang.
* Air juga fleksibel karena akan mengikuti bentuk wadahnya. Anda juga harus bisa tetap mengoreksi di berbagai lingkungan. Untuk itu Anda harus bisa lentur tidak kaku ketika menyampaikan pendapat. Kalau dalam sains, ada diseminasi/komunikasi sains. Di situlah Anda berperan. Kalau sanggup, anak-anak kecilpun harus bisa paham tentang ilmu kuantum atau benturan lempeng
samudera dan benua yang Anda pelajari. 
* Air bisa mengalir di sungai, laut, dengan langit sebagai atapnya. Tapi air juga bisa melalui pipa berdiameter sempit. Kalau ini saya biarkan Anda semua menafsirkan apa pesannya. :)

Semua hal di atas saya tulis sebagai pengingat untuk diri saya sendiri.

Juga Anda.

#365writings
🌎 Auth0 Introduces Adaptive MFA
Tags: security, mfa
Published: 2021-01-04 23:40:46

💬 Did you hear about how Adaptive MFA Improves Security and Customer Experience? Read how you can use it to improve your applications using AMFA.
[Read more...](https://auth0.com/blog/auth0-introduces-adaptive-mfa/?utm_source=content_synd&utm_medium=sc&utm_campaign=adaptive-mfa)