maximilianschmitt

Compiling your ES6 command line apps to work with node.js

This post has moved to my personal blog: http://maximilianschmitt.me/posts/compile-es6-command-line-apps/

CMCDragonkai

HTTP Streaming (or Chunked vs Store & Forward)

The standard way of understanding the HTTP protocol is via the request reply pattern. Each HTTP transaction consists of a finitely bounded HTTP request and a finitely bounded HTTP response.

However it's also possible for both parts of an HTTP 1.1 transaction to stream their possibly infinitely bounded data. The advantages is that the sender can send data that is beyond the sender's memory limit, and the receiver can act on

asev

/* Add this line to bookmarks and use when you see
 * "Oops! You've got a lot of code in this diff and it couldn't load with the page."
 * on a pull request at Bitbucket.
 */

javascript:(function(){[].forEach.call(document.querySelectorAll(".load-diff"),function(a){a.click()})})();

gigamonkey

Write a program that does what it’s supposed to do
Write idiomatic code
Debug a program that you wrote
Debug a program someone else wrote
Debug the interaction between a system you wrote and one you didn’t
File a good bug report
Modify a program you didn’t write
Test a program you wrote
Test a program you didn’t write
Learn a new programming language

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

nolanlawson

Service Worker - offline support for the web

• Service Worker - Revolution of the Web Platform
• The Service Worker is Coming - Look Busy (vid)
• Service Workers: Dynamic Responsive Images using WebP Images
• Is Service Worker ready?

Progressive apps - high-res icon, splash screen, no URL bar, etc.

• Progressive Web Apps: Escaping Tabs Without Losing Our Soul

machnicki

import React, { Component } from 'react'
import { MyInput } from 'myInputs'

class MyComponent extends Component {
  handleKeyPress = (item) => (e) => {
    e.preventDefault()
    
    if (e.nativeEvent.keyCode === 13) {
      console.log(`This is enter on item, which is called  ${item}!`)
    }

philipstanislaus

# Sample Nginx config with sane caching settings for modern web development
#
# Motivation: 
# Modern web development often happens with developer tools open, e. g. the Chrome Dev Tools. 
# These tools automatically deactivate all sorts of caching for you, so you always have a fresh 
# and juicy version of your assets available.
# At some point, however, you want to show your work to testers, your boss or your client. 
# After you implemented and deployed their feedback, they reload the testing page – and report 
# the exact same issues as before! What happened? Of course, they did not have developer tools 
# open, and of course, they did not empty their caches before navigating to your site. 

smeijer

function get(path, obj, fb = `$\{${path}}`) {
  return path.split('.').reduce((res, key) => res[key] || fb, obj);
}

function parseTpl(template, map, fallback) {
  return template.replace(/\$\{.+?}/g, (match) => {
    const path = match.substr(2, match.length - 3).trim();
    return get(path, map, fallback);
  });
}

nuragic

// Both params accept the same format as the Date object (IETF-compliant RFC 2822 timestamps and also a version of ISO8601).
// This is a basic version (supports just years and months, it assumes every month is 30 days, no pluralization, etc.) but it works.
const getDuration = (startDateString, endDateString = new Date()) => {
  const totalMonths = Math.floor((new Date(endDateString) - new Date(startDateString)) / 1000 / 60 / 60 / 24 / 30);
  const months = totalMonths < 12 ? totalMonths : totalMonths % 12;
  const years = Math.floor(totalMonths / 12);
  let duration = '¯\_(ツ)_/¯';

  if (years === 0)
    if (months > 0)