Dmitry Polushkin dmitry

Don't use VPN services.

No, seriously, don't. You're probably reading this because you've asked what VPN service to use, and this is the answer.

Note: The content in this post does not apply to using VPN for their intended purpose; that is, as a virtual private (internal) network. It only applies to using it as a glorified proxy, which is what every third-party "VPN provider" does.

A Russian translation of this article can be found here, contributed by Timur Demin.
A Turkish translation can be found here, contributed by agyild.
There's also this article about VPN services, which is honestly better written (and has more cat pictures!) than my article.

Finding a Ruby memory leak using a time analysis

When developing a program in Ruby, you may sometimes encounter a memory leak. For a while now, Ruby has a facility to gather information about what objects are laying around: ObjectSpace.

There are several approaches one can take to debug a leak. This discusses a time-based approach, where a full memory dump is generated every, say, 5 minutes, during a time that the memory leak is showing up. Afterwards, one can look at all the objects, and find out which ones are staying around, causing the

Sending emails with ActionMailer and Sidekiq

Send email asynchroniously using Sidekiq.

ActionMailer

Create your mailer us usual:

In this gist I would like to describe an idea for GraphQL subscriptions. It was inspired by conversations about subscriptions in the GraphQL slack channel and different GH issues, like #89 and #411.

Conceptual Model

At the moment GraphQL allows 2 types of queries:

query
mutation

Reference implementation also adds the third type: subscription. It does not have any semantics yet, so here I would like to propose one possible semantics interpretation and the reasoning behind it.

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

Tether is a great library for positioning stuff (tooltips, modals, hints, etc) in your web app.

But, as I use React, it was pretty problematic for me, as Tether mutates the DOM and React breaks miserably when it sees mutated DOM. The solution is to have the tethered element outside the part of the DOM tree which is controlled by React (in this case, I use document.body).

That's why I created 2 helpers to use Tether with React.

The first one, TetheredElement is a plain JS helper to create a new element, attach it to some other one via Tether, and populate it with some React component.

The second one, TetherTarget is a React component and it uses TetheredElement to integrate it further with React, so that you can attach components to each other with Tether, without leaving the cozy React/JSX world and worrying about manual DOM operations. Just write:

Uploads large files in multiple chunks. Also has the ability to resume if the upload is interrupted.

Typical usage:

Send a POST request to /upload with the first chunk of the file and receive an upload id in return.
Repeatedly PATCH subsequent chunks using the upload id to identify the upload in progress and an offset representing the number of bytes transferred so far.
After each chunk has been uploaded, the server returns a new offset representing the total amount transferred.
After the last chunk commit the upload by passing its id to another endpoint such as POST /upload/commit/:id:

My journey into the Weightless Nesting of BEM

Inspired or reignited by BEM and Sass 3.4, I’ve been exploring new ways to write clean, object oriented CSS.

If you have not already introduced yourselves to either Sass or BEM, I highly recommend reading getting your head ’round BEM syntax and Sass 3.4 is Out!.

I love the idea of object oriented CSS. It’s all about modular, longer-lasting code that’s easier to edit. It promises less headaches when I come back to the code days, weeks, or months later. Still, two issues primarily haunt me, and I’ll be frank about them:

	The MIT License (MIT)

	Copyright (c) 2015 Justin Perry

	Permission is hereby granted, free of charge, to any person obtaining a copy of
	this software and associated documentation files (the "Software"), to deal in
	the Software without restriction, including without limitation the rights to
	use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
	the Software, and to permit persons to whom the Software is furnished to do so,
	subject to the following conditions:

	import { Component } from "React";

	export var Enhance = ComposedComponent => class extends Component {
	constructor() {
	this.state = { data: null };
	}
	componentDidMount() {
	this.setState({ data: 'Hello' });
	}
	render() {