jedrichards

Debug Workshop

General tips

❉ Create a new user in Chrome just for use with debugging, ensures no plugins or extensions are adding JS to the page and confusing the issue. Extension code and iframes will show up when you're trying to profile code and get in the way. You're aiming for as close to a totally vanilla browser tab as possible.

❉ Be aware Chrome dev tools add a fair bit of CPU/memory overhead to the page

❉ "Art" of debugging: replicate, isolate, eliminate. Replication is the hardest part. "Works for me" not really an acceptable answer.

hilios

server {
  # output compression saves bandwidth 
  gzip  on;
  gzip_http_version 1.1;
  gzip_vary on;
  gzip_comp_level 6;
  gzip_proxied any;
  gzip_types text/plain text/html text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;

  # make sure gzip does not lose large gzipped js or css files

th3hunt

define(function (require) {
  var Page = require('./base/page')
    , _    = require('vendor/lodash/lodash.underscore');


  function DashboardPage() {
    Page.apply(this, arguments);
  }

  DashboardPage.prototype = Object.create(Page.prototype);

almost

This is a proposal for a lightning talk at the Reactive 2015 conference.

NOTE: If you like this, star ⭐ the Gist - the amount of stars decides whether it makes the cut! You could also Retweet if you want :)

Pyramids be gone!

ES7 Async Functions

JavaScript is getting async functions (or already has them if you count Babel.JS) and with them a way to finally slay the evil pyramid. This new language feature lets you write asynchronous code that almost looks synchronous, while maintaining the same semantics as promises. This lets you shed your .then and .catch boilerplate and escape those nested callbacks in favour of clean, explicit, maintainable code.

almost

This is a proposal for a lightning talk at the Reactive 2016 conference.

NOTE: If you like this, star ⭐ the Gist - the amount of stars decides whether it makes the cut! You could also Retweet if you want :)

Get Flow

Type checking JavaScript with Flow

JavaScript is a dynamic language, and there's nothing wrong with that. It allows quick iteration and lowers barriers. However, sometimes some compile-time type checking is just what you need to keep your code in line and give yourself the confidence to build bigger and faster. Flow gives the best of both worlds. You can have normal JavaScript but you can also add types where they're helpful, and it adds zero cost at runtime. In this talk I'll show Flow as it applies to a Redux & React codebase.

bvaughn

const createLogger = (backgroundColor, color) => {
  const logger = (message, ...args) => {
    if (logger.enabled === false) {
      return;
    }

    console.groupCollapsed(
      `%c${message}`,
      `background-color: ${backgroundColor}; color: ${color}; padding: 2px 4px;`,
      ...args

onyxfish

This script for Google Spreadsheets allows you to generate slugs for your data such as might be used for creating unique urls.

Use it like this!

#	A	B	C
1	a	b	slug
2	foo	baz bing	=slugify(A2:B4)
3	bar	BAZ
4	FOO	baz-bing

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' };

tomhicks

/*
Copy this into the console of any web page that is interactive and doesn't
do hard reloads. You will hear your DOM changes as different pitches of
audio.

I have found this interesting for debugging, but also fun to hear web pages
render like UIs do in movies.
*/

const audioCtx = new (window.AudioContext || window.webkitAudioContext)()

andyrbell

# use ImageMagick convert
# the order is important. the density argument applies to input.pdf and resize and rotate to output.pdf
convert -density 90 input.pdf -rotate 0.5 -attenuate 0.2 +noise Multiplicative -colorspace Gray output.pdf