Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Twemoji 3.0 in the making and announcement beyond SG50

Twemoji 3.0 in the making and announcement beyond SG50

@ RubySG meetup 2016 June 21

Juanito Fatas

June 21, 2016
Tweet

More Decks by Juanito Fatas

Other Decks in Technology

Transcript

  1. CODES = { ":mahjong:" => "1f004", ":black_joker:" => "1f0cf", …

    ":registered_sign:" => "ae", ":shibuya:" => "e50a", }
  2. 1. Compile List of Unicodes 2. Post to Slack 3.

    Get the HTML back 4. Parse the HTML to get names 5. Re-compile the MAP hash
  3. 2.Post to Slack require "http" class Slack def self.post(text) payload

    = { channel: "#foo", # <--- channel you want to post text: text, username: "emoji-poster", icon_emoji: ":robot_face:", }.each { |_, v| v } HTTP.post("https://hooks.slack.com/services/a/bb/ccc", json: payload) end end IO.readlines("twemoji-js-v2-unicodes").each_with_index do |line, index| cleaned = line.chomp.gsub(?", "") Slack.post(cleaned); sleep 0.3 end
  4. 2.Post to Slack require "http" class Slack def self.post(text) payload

    = { channel: "#foo", # <--- channel you want to post text: text, username: "emoji-poster", icon_emoji: ":robot_face:", }.each { |_, v| v } HTTP.post("https://hooks.slack.com/services/a/bb/ccc", json: payload) end end IO.readlines("twemoji-js-v2-unicodes").each_with_index do |line, index| cleaned = line.chomp.gsub(?", "") Slack.post(cleaned); sleep 0.3 end
  5. 1. Compile List of Unicodes 2. Post to Slack 3.Get

    the HTML back 4. Parse the HTML to get names 5. Re-compile the MAP hash
  6. 1. Compile List of Unicodes 2. Post to Slack 3.

    Get the HTML back 4.Parse the HTML to get names 5. Re-compile the MAP hash
  7. 4.Parse the HTML to get names span.message_body span.emoji-outer.emoji-sizer.emoji-only span.emoji-inner title="snowboarder"

    :snowboarder: span.emoji-outer.emoji-sizer span.emoji-inner title="skin-tone-2" :skin-tone-2:
  8. 4.Parse the HTML to get names class ExtractEmoji def initialize(html)

    @html = html end def call titles = html.scan %r(title="(?<title>[^"]+)") emojis = html.scan %r(>(?<emoji>:[^:]+:)</span>) text = html.scan %r(span class="message_body">(?<unicode>.+)</span>) if titles.empty? && emojis.empty? # unicode Hash("unicode" => text.join) else Hash(titles.join(" ") => emojis.join) end end private attr_reader :html end
  9. 4.Parse the HTML to get names RSpec.describe ExtractEmoji do describe

    "#call" do def result ExtractEmoji.new(html).call end context "emoji with skin tone" do let(:html) do <<~HTML <span class="message_body"><span class="emoji-outer emoji-sizer emoji-only"><span class="emoji-inner" title="snowboarder">:snowboarder:</span></span><span class="emoji-outer emoji-sizer"><span class="emoji-inner" title="skin-tone-6">:skin-tone-6:</span></span></span> HTML end it "returns" do expect(result).to eq Hash( "snowboarder skin-tone-6" => ":snowboarder::skin-tone-6:") end end context "emoji only" do let(:html) do <<~HTML <span class="message_body"><span class="emoji-outer emoji-sizer emoji-only"><span class="emoji-inner" title="dart">:dart:</span></span></span> HTML end it "returns" do expect(result).to eq Hash("dart" => ":dart:") end end context "unicode" do let(:html) do <<~HTML <span class="message_body">©</span> HTML end it "returns" do expect(result).to eq Hash("unicode" => "©") end end end end
  10. 4.Parse the HTML to get names class AppendSkinTones def initialize(emoji_lists)

    @emoji_lists = emoji_lists end def call color_index = 2 emoji_lists.each_with_index do |current, index| if current == emoji_lists[index+1] title, emoji = current.to_a.flatten emoji_lists[index] = append_skin_tone(title, emoji, color_index) color_index += 1 else color_index = 2 end end end private attr_reader :emoji_lists def append_skin_tone(title, emoji, color_index) { "#{title} skin-tone-#{color_index}" => "#{emoji}:skin-tone-#{color_index}:" } end end
  11. 1. Compile List of Unicodes 2. Post to Slack 3.

    Get the HTML back 4. Parse the HTML to get names 5.Re-compile the MAP hash
  12. 5.Re-compile the MAP hash class TwemojiJS MAP = { ":mahjong:"

    => "1f004", ":black_joker:" => "1f0cf", ":a_negative:" => "1f170", ":b_negative:" => "1f171", ... ":copyright:" => "a9", ":registered_sign:" => "ae", ":shibuya:" => "e50a", } end
  13. 5.Re-compile the MAP hash class TwemojiJS MAP = { ":mahjong:"

    => "1f004", ":black_joker:" => "1f0cf", ":a_negative:" => "1f170", ":b_negative:" => "1f171", ... ":copyright:" => "a9", ":registered_sign:" => "ae", ":shibuya:" => "e50a", } end
  14. CAN