laurent22

How many warnings should your JavaScript app have?

JavaScript warnings are these messages being displayed in yellow or red in your JavaScript console or terminal. They make no sense at all in general but they are a good indication of the health of your app. The points below will give you a general idea of how many warnings you should expect in your app:

• 0 warnings: the app is not working at all

• 5 warnings: app is probably starting but crashing soon after - try to find why it crashes. You'd think you could read the warnings to learn why it doesn't work, but that's not what warnings are for.

• 50 warnings: That's the soft spot - most likely everything's running smoothly

Rich-Harris

You have an array. Its sort order doesn't matter. You want to remove an item from this array.

The obvious thing to do would be to use splice:

function remove(array, item) {
  const index = array.indexOf(item);
  array.splice(index, 1);
}

threepointone

A series of posts on css-in-js

0. styles as objects

First, an exercise. Can we represent all of css with plain data? Let's try.

let redText = { color: 'red' };

avafloww

/*<?php
//*/public class PhpJava { public static void main(String[] args) { System.out.printf("/*%s",
//\u000A\u002F\u002A
class PhpJava {
    static function main() {
        echo(//\u000A\u002A\u002F
        "Hello World!");
}}
//\u000A\u002F\u002A
PhpJava::main();

joshhunt

var getPixels = require('get-pixels');
var _ = require('lodash');

process.stdout.write('\x1bc');

const BLACK_OR_WHITE_THRESHOLD = 0.09;
const DISTINCT_THRESHOLD = 0.25;

// Target:
//  - bgColor 8,162,231

paulirish

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

bvaughn

This afternoon I encountered a race condition in an Angular app I'm working on. Essentially my controller was pushing some values to an Array on its scope and something (I wasn't sure what) was asynchronously overriding the Array's contents. The Array was being used by a custom directive- written by someone else- as well as an ngModel and it wasn't clear who was making the change.

I ended up trying something I had not done before and it worked well enough that I thought I'd post it here in case it helped anyone else.

First I enabled The "Async" option in Chrome's "Sources > Call Stack" panel.

Next I set a breakpoint in my controller where I was modifying the Array. When I hit that breakpoint, I ran the following code in my console:

Object.observe(this.theArray, function(changes) {

sebmarkbage

import { Component } from "React";

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

staltz

The introduction to Reactive Programming you've been missing

(by @andrestaltz)

---

This tutorial as a series of videos

If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.

---

jlongster

(function() {
  // Do not use this library. This is just a fun example to prove a
  // point.
  
  var Bloop = window.Bloop = {};

  var mountId = 0;
  function newMountId() {
    return mountId++;
  }