albburtsev

This example demonstrates how to create a gradient that follows a stroke. This technique is sometimes used to indicate directionality along a curved edge, such as with hierarchical edge bundling.

To start, take any SVG path element and uniformly sample points along the path using getPointAtLength. (This method can also be used for path tweening.) Then, for each segment between adjacent points, compute the miter joint via line-line intersection. Lastly fill each segment by interpolating the start and end colors, here green to red, using the normalized length t along the path. Although each segment is a constant color, there are many segments to give the appearance of a continuous gradient.

This example uses a thin stroke in addition to filling the segments. This avoids antialiasing artifacts due to most

albburtsev

CSS Layout Debugger

A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.

One-line version to paste in your DevTools

Use $$ if your browser aliases it:

~ 108 byte version

albburtsev

1. Open Source being officially part of the job, not just an "after job fun" instead of spending time with the family.
2. Colleagues one can learn from, not those one needs to clean up after.
3. Money matters. Only a stupid person can think that money doesn't matter in our capitalistic society. This also includes social security, medical ensurance and any other expenses. I am not mercantile, no.
4. Soft deadlines. Having time to do things right.
5. No pressure in being at time every day in the office. We all got our issues.
6. Workout during working hours. Possibility to go quickly for a run or to the gym.
7. Office is optional. I prefer to work from any location I want. Sometimes being in the office is nice though.
8. Good sitting conditions: good chairs, gym ball, stay desk, sofas.
9. Relaxation room or nap room.

albburtsev

import * as React from 'react';
import { Component } from 'react';

export default function HOCBaseRender<Props, State,  ComponentState>(
    Comp: new() => Component<Props & State, ComponentState>) {
    return class HOCBase extends Component<Props, State> {
        render() {
            return <Comp {...this.props} {...this.state}/>;
        }
    }