addyosmani

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

indexzero

Copyright (c) 4-digit year, Company or Person's Name

Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.

THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

Source: http://opensource.org/licenses/ISC

domenic

This article has been given a more permanent home on my blog. Also, since it was first written, the development of the Promises/A+ specification has made the original emphasis on Promises/A seem somewhat outdated.

You're Missing the Point of Promises

Promises are a software abstraction that makes working with asynchronous operations much more pleasant. In the most basic definition, your code will move from continuation-passing style:

getTweetsFor("domenic", function (err, results) {
 // the rest of your code goes here.

hediet

type StringBool = "true"|"false";


interface AnyNumber { prev?: any, isZero: StringBool };
interface PositiveNumber { prev: any, isZero: "false" };

type IsZero<TNumber extends AnyNumber> = TNumber["isZero"];
type Next<TNumber extends AnyNumber> = { prev: TNumber, isZero: "false" };
type Prev<TNumber extends PositiveNumber> = TNumber["prev"];

DmitrySoshnikov

@kangax's ES6 quiz, explained

@kangax created a new interesting quiz, this time devoted to ES6 (aka ES2015). I found this quiz very interesting and quite hard (made myself 3 mistakes on first pass).

Here we go with the explanations:

Question 1:

(function(x, f = () => x) {

vcarl

I bundled these up into groups and wrote some thoughts about why I ask them!

If these helped you, I'd love to hear about it!! I'm on twitter @vcarl_ or send me an email carl.vitullo@gmail.com

Onboarding and the workplace

https://blog.vcarl.com/interview-questions-onboarding-workplace/

• How long will it take to deploy my first change? To become productive? To understand the codebase?
• What kind of equipment will I be provided? Will the company pay/reimburse me if I want something specific?

gaearon

class Example extends React.Component<
  Props,
  State,
  Snapshot
> {
  static getDerivedStateFromProps(
    nextProps: Props,
    prevState: State
  ): $Shape<State> | null {
    // ...

katychuang

#!/usr/bin/env sh

# first check to see if mongo service is running. you can't delete any files until the service stops so perform a quick check.
launchctl list | grep mongo
  # NOTE: the pipe | symbol means the commands on the right performs on the output from the left
  # grep is a string search utility. `grep mongo` means search for the substring mongo
 
# use the unload command to end the mongo service. this is required to 'unlock' before removing the service.
#    first look for the file to delete
MONGO_SERVICE_FILE=$(ls ~/Library/LaunchAgents/*mongodb*)

skratchdot

A list of some other badges: http://shields.io/

Version Numbers

Alt Text	Image Src	Link
NPM version	https://badge.fury.io/{{programming_language:js}}/{{project_name}}.svg	http://badge.fury.io/{{programming_language:js}}/{{project_name}}
Dependency Status	https://david-dm.org/{{username}}/{{project_name}}.svg	https://david-dm.org/{{username}}/{{project_name}}
devDependency Status	https://david-dm.org/{{username}}/{{project_name}}/dev-status.svg	https://david-dm.org/{{username}}/{{project_name}}#info=devDependencies
GEM Dependency Status	https://gemnasium.com/{{username}}/{{repo}}.png	https://gemnasium.com/{{username}}/{{repo}})

anandabits

// This example shows how higher-kinded types can be emulated in Swift today.
// It acheives correct typing at the cost of some boilerplate, manual lifting and an existential representation.
// The technique below was directly inspired by the paper Lightweight Higher-Kinded Polymorphism
// by Jeremy Yallop and Leo White found at http://ocamllabs.io/higher/lightweight-higher-kinded-polymorphism.pdf

/// `ConstructorTag` represents a type constructor.
/// `Argument` represents an argument to the type constructor.
struct Apply<ConstructorTag, Argument> {
    /// An existential containing a value of `Constructor<Argument>`
    /// Where `Constructor` is the type constructor represented by `ConstructorTag`