chrishutchinson

{"source_id":"371480894508119251","version":"1","workflow":{"name":"Welcome message","blueprint":{"version":"1","trigger":{"type":"member_joined_channel","id":"ff49de17-531e-4cf6-b1c2-45da2794aada","config":{"channel":{"value":"C02DJHV8XMZ"}}},"steps":[{"type":"message","id":"ba248f72-333b-4900-a00c-ea3567c3beea","config":{"user":{"ref":"ff49de17-531e-4cf6-b1c2-45da2794aada==user"},"has_button":false,"message_text":"Hey {{ff49de17-531e-4cf6-b1c2-45da2794aada==user}}, welcome! :wave:\n\n:thought_balloon: Channels you might find interesting\n…\n…\n…\n\n:family: The team\n@…\n@…\n@…\n\n:calendar: Don’t miss these events!\nhttps://…\nhttps://…\n\n:books: Useful reading\nhttps://…\nhttps://…","message_blocks":[{"type":"rich_text","elements":[{"type":"rich_text_section","elements":[{"text":"Hey ","type":"text"},{"id":"ff49de17-531e-4cf6-b1c2-45da2794aada==user","type":"workflowtoken","property":"","data_type":"user"},{"text":", welcome! ","type":"text"},{"name":"wave","type":"emoji"},{"text":"\n\n","type":"text"},{

chrishutchinson

If you're reading this for the first time, hello 👋! Most weeks I put a Slack post like this together for my team at The Times, pulling together some of the most interesting posts, videos and libraries I've found the week before. I'm sharing it here for the first time so you can read it too! Thanks, Chris.

1. How much can you control hyphenation with CSS?

It turns out, quite a lot! This post goes into great detail about automated hyphenation in CSS, all the rules you'll need to know, and what their browser support is. Well worth a read if you're ever looking to make website copy look a little nicer!

http://clagnut.com/blog/2395

2. Guess.js, a few tools for ML-powered experiences on the web

A really interesting library for bringing some predictive data-analytics to your web front end, all with the aim of improving the experience for users.

chrishutchinson

Keybase proof

I hereby claim:

• I am chrishutchinson on github.
• I am chrishutchinson (https://keybase.io/chrishutchinson) on keybase.
• I have a public key ASD8fIvjNz0t1kN-0H5sQHzZ0l9UFE8OT4ItA6CJrfoDGQo

To claim this, I am signing this object:

chrishutchinson

const emojis = {
  american: "🇺🇸",
  science: "🔬",
  horror: "🙀",
  second: "🥈",
  written: "✏️",
  television: "📺"
};

const replaceWordsWithEmoji = text =>

chrishutchinson

const handleOrientation = event => {
  const x = event.beta;

  if (x < 40 && x > 20) return;

  if (x > 40 && x <= 60) {
    window.scrollBy(0, 1);
  } else if (x > 60) {
    window.scrollBy(0, 2);
  } else {

chrishutchinson

const barrelRollStyleTag = document.createElement("style");

barrelRollStyleTag.innerText = `
  @keyframes roll {
    from { -webkit-transform: rotate(0deg) }
    to   { -webkit-transform: rotate(360deg) }
  }
    
  body {
    animation: roll 4s 1;

chrishutchinson

// Polymer template code
<p>Your closest income band is {{results.income}}. Figures for a {{sheetLabel}}.</p>

<div class="row">
  <div class="col">
    <div class="label">Income change next year (2018/19)</div>
    <div class="big income">{{results.change_2018}}</div>
  </div>
</div>

chrishutchinson

// Polymer template code
<!-- A permanently visible (although empty) anchor, so we have somewhere to scroll to -->
<div id="results-anchor"></div>

// Polymer JavaScript code
const scrollToElement = (element, offset = 0) => {
  const distanceFromTop = element.getBoundingClientRect().top;
  window.scrollBy({
    top: distanceFromTop + offset,
    left: 0,

chrishutchinson

// Polymer template code

<form autocomplete="off" id="form" on-submit="handleFormSubmit">
    <input type="text" name="income" placeholder="Enter your annual income (£)" />

    <div class="selectWrapper">
      <i class="Icon Icon--arrowDown"></i>
      <select name="category" id="dropdown">
        <option value="" disabled selected>Your status</option>
      </select>

chrishutchinson

// Polymer template code
<form on-submit="handleFormSubmit"></form>

// Polymer JavaScript code
handleFormSubmit: function(event) {
  // Your form submission behaviour would go here
}