teleren/devto huggingface dataset:
What are some tasks that programmers should do to save time?
Tags: discuss, productivity, automation
Published: 2019-06-10 03:46:51

Be it a newbie programmer or the senior level developers, we tend to waste a lot of time. 

So for those who automate things or use existing tools or services to save time. e.g. auto sync your files on desktop, git commit your code after work etc. 

What are some of the tasks that programmers should do to automate and save time?
What's your work-from-home outfit?
Tags: discuss
Published: 2019-06-10 16:21:25

---
title: What's your work-from-home outfit?
published: true
description: 
tags: discuss
---

Stumbled across this article today and literally lol'ed: https://www.newyorker.com/humor/daily-shouts/fashionable-outfits-for-working-from-home

 

I am the sweaty optimist 100%. In fact, I am in full yoga gear right now, as I'm typing this 😂
Disable a HTML form while in-flight using fieldset
Tags: javascript, fieldset
Published: 2019-06-11 03:21:49

---
title: Disable a HTML form while in-flight using fieldset
published: true
description: Use `fieldset disabled` to prevent form changes during a submit!
tags: javascript, fieldset
cover_image: https://thepracticaldev.s3.amazonaws.com/i/bnw9o0egymn6qf2iy26e.gif
series: Blog-A-Day in June
---

I'm a big fan of great UIs that properly control your user's ability to interact with your page: such as changing some value during a form submit. We've all seen the *"do not change this form until it's done!"* messages. 🙄

There's a standard HTML feature which can help you with this, in `<fieldset disabled>`. First, here's a demo:

{% codepen https://codepen.io/samthor/pen/LKYRGy %}

Try submitting the form, clicking on one of the blue links (they don't go anywhere, it's just for the demo) and pressing the Tab key. The inputs cannot be focused! 🤯

## The Feature

When your browser sees a `<fieldset>` with its `disabled` attribute set: e.g., `<fieldset disabled>`, it will completely disable every `<input>`, `<textarea>` and `<button>` element found within. 🚫📝

This is pretty powerful. Your code might look like:

```js
yourForm.addEventListener('submit', (event) => {
  event.preventDefault();  // disable normal submit

  const body = new FormData(yourForm);
  const p = fetch('/foo', {method: 'POST', body}).then((response) => {
    // ...
  });

  // important bit here
  yourFieldset.disabled = true;
  p.finally(() => {
    // .finally runs even if the fetch fails
    yourFieldset.disabled = false;
  });
});
```

## Other uses for `fieldset`

The `fieldset` element also lets you group HTML form elements, including adding a `legend`(-ary). It's useful for accessibility and as a way to visually style groups. For a simple demo, check out [this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset).

## Alternatives

Classic alternatives to really simple, _powerful_ features like `<fieldset disabled>` tend to include:

* adding a giant element that covers the form so users can't click on it
* iterating through every `<input>` and marking it `disabled`
* just hiding the form.

And all of these are pretty painful versus `<fieldset disabled>`. 🤮

## Thanks!

If you're curious about controlling user interaction, be sure to read up on the "inert" attribute, which takes `<fieldset disabled>` one step further, but doesn't have full browser support yet.

11 👋
Accelerated Mobile Pages with QCObjects
Tags: amp, javascript, qcobjects, uiweekly
Published: 2019-06-11 04:07:53

AMP is a web component framework to easily create user-first websites.

QCObjects integrates many tools in a securer, faster and easier to learn runtime components scope, so why not use it to make a compelling accelerated mobile page that also can be designed into an N-Tier architecture, and all of this using pure javascript?

Added value that can QCObjects bring to AMP:

Organised Code Structure, Fast Rendering, Friendly syntax , Config Secure encryption , Simultaneous animation effects , Dynamic storage cache control , Components tree architecture , Runtime stacked components and...

Easy and short steps:

To make your first AMP application using QCObjects you only need to type this in your console: 

```shell 
> npm i qcobjects-cli
```

Then, create a directory for your app and enter it:

```shell
> mkdir mynewapp && cd mynewapp 
```

Finally, generate the new AMP template using the cli tool

```shell
> sudo qcobjects create mynewapp --amp
```

Done.

2.- Serving over HTTP2

Once you've created your application, you can serve it using the qcobjects-server tool installed with the cli tool. Go to the app directory and type:


```shell
> qcobjects-server 
```

and press enter.

Then, go to a web browser and navigate to: 


https://localhost 


Here is the complete example:

![qcobjects-amp](https://qcobjects.dev/doc/img/QCObjects-CLI-AMP.gif)


Please let me know how to improve this article in a comment!



Cheers!
What's a JavaScript concept that you're still confused about?
Tags: discuss, javascript
Published: 2019-06-12 10:05:49

---
title: What's a JavaScript concept that you're still confused about?
published: true
tags: discuss, javascript
---

To all the JavaScript developers out there (beginners and more experienced): what's a JavaScript concept that still confuses you? Don't be shy and share your thoughts! 

I asked the same question on Twitter and Linkedin, I've got:

"Not a beginner, but closures are still kinda hard"

"destructing. Still a bit tricky when it comes to reassign an object inside an object"

"Dynamically adding elements to the DOM but it looks like React makes doing things in vanilla unnecessary"

And how about you?
I am joining the DEV team!
Tags: meta
Published: 2019-06-14 16:44:22

Hi everyone! I'm Aikeda. I am interning at DEV this summer alongside Brian as a Business Development & Growth Analyst. 

I live in Toronto, Ontario, Canada, and am currently in the process of completing my bachelor degree in Business, with an intended major in strategy and a minor in operations management & information systems. Growing up, I have always been very passionate about entrepreneurship, which led me to start my own business in high school, and work with a food start-up earlier in my freshman year. I am also very fascinated about technology and have been involved with many biz-tech student organizations on campus (which is how I learned about DEV and decided to join the company). 

This summer, I am excited to join the team to help scale and grow the community by engaging with prospective business partners and finding new growth opportunities. While I am not busy working on DEV intern projects, you can find me travelling, trying new cuisines or learning coding on the side. I look forward to engaging with the team and the DEV community so please feel free to reach out on the platform!
Get Remote Ip Address of the Client in Container When using Reverse proxy as Nginx in Docker Swarm
Tags: docker, dockerswarm
Published: 2019-06-15 08:32:48

---
title: Get Remote Ip Address of the Client in Container When using Reverse proxy as Nginx in Docker Swarm
published: true
description: How to setup your swarm cluster to receive the client real ip address.
tags: docker, docker-swarm
---

Getting remote IP address and forwarding to the internal service is not a big deal when running in normal server instance. But when you set up and think to scale using Docker Swarm it's quite frustrating and it made me a whole day to figure out and fix it.

Docker Swarm networking overlay doesn't provide access to the IP Address of the client which is normally treated as L4 layer. There is a huge discussion going on in GitHub (https://github.com/moby/moby/issues/25526 ) with exploding comments. Why?

1. You can't monitor user access and logs location
2. Rate limiting with IP level checks
3. Monitoring tools such as Prometheus needs exact client IP to bring better analytics and monitoring
4. Proving country-specific information such as pricing, payments, timezone and even more personalized geographical based contents.

Solution Please,

1. Hardware-level -> Add L7 load balancer as a physical machine ( server instance ) and terminate the SSL and forward the traffic with the IP Address x-real-ip or x-forwarded-for to your internal service or application behind a proxy

2. Swarm Solution ( Work Around that completely defeats the purpose of Docker swarm and routing with load balancing )

```
services:
  load_balancer:
    image: nginx:some_version
    deploy:
      mode: global
      constraint:
         - node.role == worker ( It's upto your wish )
    ports:
      - target: 80
        published: 80
        protocol: tcp
        **mode: host**
      - target: 443
        published: 443
        protocol: tcp
        **mode: host**
    networks:
      - your_internal_overlay_network
      - your_external_overlay_network

networks:
   your_internal_overlay_network:
   your_external_overlay_network:
     - external:
         name: your_external_overlay_network ( create with docker network command )
````

This will simply allow the nginx container to receive the traffic in 80 & 443 and forwards to the intranet service. But the twist is you can't scale this container just using the docker scale command which is bind to 80 & 443 once and doesn't share the load between multiple containers when the traffic to the application increases. It's not that bad, but you can balance pretty high traffic such as 3K req/min and it depends on the machine. Now, Your nginx receives the Real Client Ip and you can forward it internally for processing.

Alternate costly solution:

Switch to Load Balancer such as ELB ( Aws load balancer to manage your certificate and SSL offloading and bring your swarm proxy behind the ELB. Giving this option, You give in the lock to AWS and when you migrate from the platform it will create chaos. )

If you have any doubts, do let me know. Happy Docking!
Airtable: The next generation spreadsheets
Tags: airtable
Published: 2019-06-15 08:49:47

---
title: Airtable: The next generation spreadsheets
published: true
description: 
tags: airtable
canonical_url: https://upnrunn.com/blog/2019/05/airtable-the-next-generation-spreadsheets/
---
![](https://thepracticaldev.s3.amazonaws.com/i/seufsob3riv64accywpz.png)

As it says “Create, your way”

Part spreadsheet, part database, and entirely flexible, teams use Airtable to organize their work, their way.

![](https://thepracticaldev.s3.amazonaws.com/i/2l4q8tlgjsncv6xiimut.png)

Spreadsheets might not be as interesting as the latest AI or Blockchain startup, but they’re the products that solve nasty problems and make people’s lives better. No one wants to mesh up with the sheet.
Airtable can act as an alternative to one of the most critical, yet often overlooked software tools. Airtable has reinvented the spreadsheet entirely. It is like Spreadsheet, meet database. You can create your database in minutes. It solves difficult problems and makes people’s lives better.

Airtable didn’t make a better spreadsheet. They have reinvented the spreadsheet entirely. You do not need to write any type of code to use it. Also you can easily expose your data to outside using APIs.

Organize anything, from anywhere, with anyone.
It has mobile and desktop apps to make it easy to edit, comment, and collaborate in real time. changes are instantly synced across everyone’s devices.

Field types for your data.
Airtable fields can capture any type of content you want to save. You can add attachments, long text notes, checkboxes, links to records in other tables—even barcodes. Stay organized Stay cool.

Get the perfect view.
Do not like the grid layout. No Problem, you can have the Grid layout along with with Kanban view, Gallery view & Calendar view.

It gives powerful filtering, sorting, and grouping option, which gives you the freedom to arrange your work just the way you like. Choose the right views as per your need, and save them for easy access any time. Access from desktop, tablet or Mobile.

Link related records easily.
Hate duplicate data entry? No worries. It only takes a few clicks to link records between tables, creating smart relationships like our relational database.

![](https://thepracticaldev.s3.amazonaws.com/i/seufsob3riv64accywpz.png)

Automate data using third-party integrations
You can connect Airtable with your favourite apps and services. This would help you automatically move information back and forth between Airtable and other apps.

Airtable has built-in support for many popular apps, a robust API, and can be configured to work with over 1000 websites and apps via Zapier.

![](https://thepracticaldev.s3.amazonaws.com/i/g1h1op2li8b0voh3330h.png)

It can be used for your Creative team or Marketing team. You can also use it for your project management as well as Recruiting solution using their template library.

Do you use Airtable?
getaway.house Seeking Back End Developer - Rails
Tags: hiring
Published: 2019-06-15 18:04:32

## About Us

If you’re reading this job description, you’re probably someone that spends a lot of time on the computer and the internet. Although we leverage these tools like any other business does, our product seeks to physically take our customers away from these things in an effort to find the magic and relaxation they’ve so desperately been seeking. We’re putting tiny houses on camp sites in remote locations so our “users” can get away and set up a high-speed interface with their humanity. We create and maintain technology that, in some cases invisibly, enables a mystical experience for our guests and removes stress from their lives.

Getaway is a small but rapidly growing team that just raised a $22.5M Series B financing round. Our offices our located in Downtown Brooklyn but we are open to remote candidates that can visit our offices at least twice a month. 


## About The Opportunity


The Back End Developer will focus on the following areas:
- Building new features for and maintaining the current functionality of our website, written  with a React/SASS front end and Ruby on Rails back end, in a semi-agile working environment 
- Some minor developer operations tasks ensuring the website is serving our customers well and performing to our expectations - we’re hosted currently on Heroku
- Supporting the cabin automation effort, working on software to make the guest experience seamless and magical - currently written in Groovy and Ruby, moving to Python and Ruby
- Writing internal tools to support our Guest Experience team and make it extremely easy for guests to get the things they need to have a wonderful time on their Getaways
- Continuing to find efficiencies and ways to leverage software to improve our team’s workflows and the way we do business
- Occasionally writing code in front of a fire, if you so desire (for real)

## Skill & Qualifications


We’re looking for someone with around 2 years of experience but don’t want anyone to shy away from applying if they think they’re a real “rockstar/ninja/etc”. This is not a junior development role and those straight out of school or bootcamp need not apply, unfortunately we just don’t have the resources to support such a candidate at this time.


## How To Apply

Interested developers should send a short cover letter and resume to jobs@getaway.house, subject line, “Back End Developer Role”.
How to connect two rectangle svgs containing json nodes
Tags: javascript, help
Published: 2019-06-16 05:18:42

I am having a input json as :

    {
      "test1":"test1",
      "test2":"test2",
      "test3":"test3"
    }
And the output json:

    {
      "test4":"test4",
      "test5":"test5",
      "test6":"test6"
    }

So I am trying to do the following using D3.js and I am new to D3.js, 

The user will import input JSON and output JSON. 

[![enter image description here][1]][1]

Based on the input and output JSON mapping which is done by linking the corresponding nodes it'll get mapped.

So, the output will be:

    {
      "test4":"test2",
      "test5":"test3",
      "test6":"test1"
    }

I found the one example(https://stackoverflow.com/questions/39685298/draw-a-line-between-2-divs-once-2-consequence-div-clicked-using-angularjs) but using only javascript not with D3.
  [1]: https://i.stack.imgur.com/m58gy.png
Outline Button or Ghost Button : Icon on Hover
Tags: codepen, css, html, showdev
Published: 2019-06-17 12:32:52

#Description

<p>Outline button (or Ghost button): When hovered, the icon hidden from the left side will show.</p>

<p>There are small, and large size for these buttons.</p>

<p>I used Font Awesome for the icon font. Some others may be used, I think.</p>

<p>Style can be easily customized, and also, almost all of the customizable styles are stored in a variable.</p>

#How to use

```html
<!--
Available classes:
.default (Dark grey button)
.primary (Blue button)
.success (Green button)
.warning (Yellow button)
.danger  Red button)
-->
<button class="btn-outline success">
    <i class="fas fa-check-circle"></i><!-- All of the icons from FontAwesome may be used -->
    <span>success</span>
</button>
```

---

{% codepen https://codepen.io/takaneichinose/pen/VJazRv %}
Content migration in Drupal from XML Source
Published: 2019-06-18 06:25:56

---
title: Content migration in Drupal from XML Source
published: true
description: One of our recent posts talks about migration API in Drupal 8, the basics of migration and migrating data for various field types from a CSV source. tags: webdev, discuss, devops, drupal
---

One of our recent posts talks about migration API in Drupal 8, the basics of migration and migrating data for various field types from a CSV source. Some frameworks and CMS such as Wordpress, etc allow the data to be exported in XML format (or JSON format if certain extensions are available). And more often than not, we find another agency providing us with the XML data of the site which needs to be migrated to Drupal. In this post, we see how content can be migrated to Drupal from an XML source.

Note: It is not a pre-requisite but basic knowledge of XPath selectors can be very helpful.

The major requirements/dependencies that need to be fulfilled are as follows:

Custom module - It contains scripts that will be imported when the module is installed and must have these dependencies: Migrate, Migrate Plus, Migrate Tools.
The main objective for creating a custom module is that when content is successfully migrated and requires no further updates, removing the custom module will remove the migration scripts that were imported without affecting any other workflow on the site.
Source XML file - This file can be external (must be accessible over HTTP) or locally stored (in private file directory).

Article from Innoraft: [Read more](https://www.innoraft.com/blogs/content-migration-drupal-xml-source)
Turn any non fluent API into a fluent one - tap tap tap
Tags: javascript, node, refactorit
Published: 2019-06-30 06:05:29

> Originally posted at [michaelzanggl.com](https://michaelzanggl.com/articles/tap-tap-tap). Subscribe to [my newsletter](https://michaelzanggl.com/) to never miss out on new content.

Inspired by Laravel's tap helper, I recently created a small little library for tapping in JavaScript. It's yet another interesting thing we can do thanks to ES6 proxies.

{% github https://github.com/MZanggl/taptaptap %}

Take `Array.prototype.push` for example. It returns the new length of the array, making chaining impossible.

```javascript
const numbers = []
numbers.push(1)
numbers.push(2)
```

Wrapping the array inside "tap" allows us to chain everything together nicely.

```javascript
const { tap } = require('taptaptap')

const numbers = tap([])
    .push(1)
    .push(2)
```

Each function that gets executed simply returns the originally passed value again.

---

There is also another use case for tap which allows grouping common logic.

Imagine you have a test like this

```javascript
const user = await User.query().latest().first()

expect(user.name).toBe('test name')
expect(user.bio).toBe('test bio')
```


We can group everything together nicely, so it is clear the `user` variable is only used here.

```javascript
tap(await User.query().latest().first(), user => {
    expect(user.name).toBe('test name')
    expect(user.bio).toBe('test bio')
})
```
When is the right time to fork?
Tags: opensource
Published: 2019-06-20 18:30:06

I've recently been contributing to an open sourced project, shared under the MIT License, that I'm planning on using within the company I currently work for. I'm the sole contributor as the project has been mostly dormant (except for some minor PRs) since 2017.

What are some possible reasons you might discontinue submitting PRs upstream?
Do you contribute to the Open Source culture? If so, how?
Tags: discuss, healthydebate
Published: 2019-06-21 16:03:15

Hi everyone! I'm starting this debate because I want to know how do you contribute to the open source culture, if you do it at all. I just wanted to see if there are any other ways to help apart from fixing bugs or building new functionalities for an open source project.

Don't be shy, I'm looking forward to reading your answers! :)
Argument Parsing Into Structure in D
Tags: dlang, commandline
Published: 2019-06-26 05:28:15

Update: Made this into a project - {% github https://github.com/JesseKPhillips/structopt %} 

Here is an interesting one, starting with some background. Dlang has a standard argument parser, [getopt](https://dlang.org/phobos/std_getopt.html#.getopt), which provides a single function to specify the arguments to parser out. The function can be called multiple times which can help out with building sub commands with their own arguments. I've really enjoyed the design for this API shown in the documentation example. 

However the are situations where a structure makes sense for driving what arguments are accepted and because acronyms are important I want to be DRY. Now it's not like there aren't libraries to parser into a structure like [darg](http://code.dlang.org/packages/darg), I couldn't figure out my search and still think the standard approach kept things more consistent. 

D has some excellent meta programming and generative capabilities. Unlike traditional attributes seen in C# or Java annotations, D has no runtime reflection. I wanted to have the structure build my options and help messages while using the standard getopt function, [this is what happened](https://code.dlang.org/packages/struct opt). 

```dlang
import std.traits;
import std.getopt;

// Specify The Parameter Structure
struct Options
{
    @Option("threads", "t")
    @Help("Number of threads to use.")
    size_t threads;

    @Option("file")
    @Help("Input files")
    string[] files;
}

void main(string[] args) {
    Options prop;
    
    // D's mixin requires a complete
    // statement to be built
    string GenerateGetopt(alias Options)() pure {
        import std.meta;
        import std.typecons;
        import std.format;
        auto ans = `auto helpInfo = getopt(args, `;
        static foreach(opt; FieldNameTuple!Options) {
            // getUDAs will obtain the User Defined Attribute
            // of the specified type
            ans ~= format("getUDAs!(prop.%s, Option)[0].cononical(),"
              ~" getUDAs!(prop.%s, Help)[0].msg, &prop.%s,", opt, opt, opt);
        }

        return ans ~ ");";
    }

    // Pass in the struct to generate UDA for
    mixin(GenerateGetopt!Options);

    if (helpInfo.helpWanted)
    {
        defaultGetoptPrinter("Options: ",
          helpInfo.options);
        // Output to console:

        //Options:
        //-t --threads Number of threads to use.
        //      --file Input files
        //-h    --help This help information./
    }
}

// -- These define the data type for the UDA

struct Help {
    string msg;
}

struct Option {
    string[] names;

    this(string[] names...) {
        this.names = names;
    }

    string cononical() {
        import std.algorithm;
        import std.conv;
        return names.joiner("|").to!string;
    }
}
```

I also do a similar thing to fill in the structure based on environment variables.