Twemoji 3.0 in the making and announcement beyond SG50

@ RubySG meetup 2016 June 21

Transcript

1. ⭐ ⭐ ⭐ ⭐ ⭐ Twemoji 3.0 in the making & beyond SG50
2. Good Evening!
3. @JuanitoFatas Taiwan
4. #NBAFinals
6. deppbot
8. Announcement!!!
9. I GOT PROMOTED
10. CEO + CTO
11. Chief moji Officer Chief Typo Officier
12. Chief moji Officer Chief Typo Officier
13. Twemoji 3.0.0
14. Twitter Emoji as seen in this presentation, and…
15. Free to use with proper attributions
17. twemoji.js twitter/ twemoji
18. Twemoji RubyGem jollygoodcode/ twemoji
19. Twemoji.parse( "RubySG Meetup :flag-sg:" ) RubySG Meetup
20. CODES = { ":mahjong:" => "1f004", ":black_joker:" => "1f0cf", … ":registered_sign:" => "ae", ":shibuya:" => "e50a", }
21. Twemoji.find_by_text(":heart_eyes:") Twemoji.find_by_code(":heart_eyes:") Twemoji.find_by_unicode("") Twemoji.render_unicode(":heart_eyes:") Twemoji.render_unicode("")
22. Where the Names :heart_eyes:
24. 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
25. 1. Compile List of Unicodes
26. 1. Compile List of Unicodes
27. 1. Compile List of Unicodes
28. 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
29. 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
30. 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
31. 3.Get the HTML back
32. 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
33. 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:
34. 4.Parse the HTML to get names span.message_body span.emoji-outer.emoji-sizer.emoji-only span.emoji-inner title="dart" :dart:
35. 4.Parse the HTML to get names span.message_body
36. 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
37. 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
38. 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
39. 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
40. 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
41. 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
42. Review and fixes some error
43. jollygoodcode/ emoji-keywords
44. Adapt existing codebase
45. Fix documentations
46. Add some specs
47. Update README.md
48. Update CHANGELOG.md
49. Full Changes https://github.com/jollygoodcode/twemoji/pull/22
50. Twemoji and Rails https://git.io/vozsy
51. Twemoji and Jekyll JuanitoFatas/jekyll-twemoji
52. Beyond SG50
54. Turbolinks
55. Singapore is a “Gem”
56. One of our Gems
57. So Unique
58. Mixed Culture
59. Such a Language
60. Behasa Melayu
 Chinese
 Tamil English
61. Wat we speak in Singapura
62. Singlish
63. ň'XGT[DQF[KPVJKUEQWPVT[UJQWNFNGCTPVQRTQITCOCEQORWVGT DGECWUGKVVGCEJGU[QWJQYVQVJKPMʼnŃ5VGXG,QDU
64. Coming to Ruby
65. LIVE DEMO
66. empty_hor?
67. downcase_lah!
68. Kernel#ord irb(main)> ord Now every time when you “exit” console, feels great hor?
69. Kernel#bobian raise an exception! ¯\_(ϑ)_/¯
70. JuanitoFatas/ singapore
71. Made in Singapore
72. In my Airbnb* * bed without breakfast
73. Production Ready
74. $ gem install singapore
75. Fetching: singapore-51.gem (100%) Successfully installed singapore-51 1 gem installed
76. SG50+1
77. Now the power is on your fingers
78. Make the world a better place
79. CAN
80. can still Enjoy the #REDDOTRUBYCONF If cannot, lah
81. Kam sia! Thank you! 弃弃