milesrichardson

Imagine this: it's Sunday afternoon at 1pm, and you want to watch some live content. But you don't have a TV subscription. So you do a little Googling, and eventually you find yourself on a sketchy website where you can watch the content you're looking for. But while the website has a video player, it's surrounded by advertisements, and probably a cryptominer too. You don't want this website eating your CPU for 2 hours while you're watching your favorite Sunday afternoon content.

Wouldn't it be nice if you could watch that video in VLC instead? Then you can close the sketchy website and still watch your content. It's like having your cake and taking a bite of it too!

Here's how you do it:

1. Capture the m3u8 request in dev tools. Open the site (or just the iframe, if possible) in DevTools and click "play." Search the network tab for m3u8 and grab the first request.

2. Run VLC with command line flags to set the User Agent and Referrer. From the request body, you need to copy the requested URL,

cleverdevil

'''
You'll need to pip install some dependencies:

* python-dateutil
* requests

Also, populate your EMAIL and PASSWORD below.
'''

from xml.etree import ElementTree

thomasboyt

import moment from 'moment';

/**
 * XXX: Okay, so, no date library, other than moment, appears to currently
 * support _formatting a date with a specified time offset_. That is, given the
 * date string `2018-11-21T15:00:00+0100` (UTC+1:00), I want to format it as
 * `3:00 PM`, regardless of the system's current local time.
 *
 * This seems like it should be easy, right? We don't need time zone data,
 * because we're not specifying a time zone, just a UTC offset. All we need to

danclien

Random thoughts on sets

Sets can be generalized as a function that takes an argument and returns true or false.

Sets of numbers

For a specific set of numbers, you can write it as:

const mySetOfNumbers = num => [1,2,3,4,5].includes(num);

bvaughn

React recently introduced an experimental profiler API. This page gives instructions on how to use this API in a production release of your app.

Table of Contents

• Profiling in production
  • Create React App
  • Webpack 4

Profiling in production

React DOM automatically supports profiling in development mode for v16.5+, but since profiling adds some small additional overhead it is opt-in for production mode. This gist explains how to opt-in.

jamesreggio

// EmailInput wraps an HTML `input` and adds some app-specific styling.
const EmailInput = React.forwardRef((props, ref) => (
  <input ref={ref} {...props} type="email" className="AppEmailInput" />
));

class App extends Component {
  emailRef = React.createRef();

  render() {
    return (

brianloveswords

gif-from-tweet

There are so many great GIFs out there and I want to have copies of them. Twitter makes that harder than it should be by converting them to MP4 and not providing access to the source material. To make it easier, I made a bash pipeline that takes a tweet URL and a filename, extracts the MP4 from that tweet and uses ffmpeg to convert back to GIF.

Dependencies

• ffmpeg
  • macOS: brew install ffmpeg
  • Ubuntu/Debian: apt install ffmpeg

amysimmons

Advanced JavaScript Learning Resources

This is a list of advanced JavaScript learning resources from people who responded to this [Tweet][13] and this [Tweet][20].

• [You Don't Know JS][3]

• [Frontend Masters courses by Kyle Simpson][12]

• [@mpjme][6]'s [YouTube videos][5]

c0mpiler

#!/usr/bin/env bash

# chrome-different-tz
#
# Use this script on OS X to launch a new instance of Google Chrome
# with its own empty cache, cookies, and user configuration.
#
# The first time you run this script, it will launch a new Google
# Chrome instance with a permanent user-data directory, which you can
# customize below. Perform any initial setup you want to keep on every

gaearon

// connect() is a function that injects Redux-related props into your component.
// You can inject data and callbacks that change that data by dispatching actions.
function connect(mapStateToProps, mapDispatchToProps) {
  // It lets us inject component as the last step so people can use it as a decorator.
  // Generally you don't need to worry about it.
  return function (WrappedComponent) {
    // It returns a component
    return class extends React.Component {
      render() {
        return (