René's URL Explorer Experiment

{"@context":"https://schema.org","@type":"DiscussionForumPosting","headline":"Twemoji in Rails","articleBody":"If you want to integrate Emoji for your Rails project, [Twemoji](https://github.com/jollygoodcode/twemoji) would be a good choice, [gemoji](https://github.com/github/gemoji) is also available. They're all open sourced and free to use if you properly attribute.\n\nTwemoji provides set of [Emoji Keywords](https://github.com/jollygoodcode/emoji-keywords) (Names) like `:heart:`, `:man::skin-tone-2:`, `:man-woman-boy:`:\n\n\u003cimg width=\"252\" alt=\"screenshot 2016-06-09 15 18 13\" src=\"https://cloud.githubusercontent.com/assets/1000669/15921651/6aca7102-2e55-11e6-889e-7037aee20605.png\"\u003e\n\nSo you can let your users type these keywords and store the simple string in your database instead of storing the real Unicodes which may be troublesome for some database (read: [older version of MySQL](http://blog.arkency.com/2015/05/how-to-store-emoji-in-a-rails-app-with-a-mysql-database/)).\n## Integrate with Rails\n\nInstall Twemoji:\n\n``` ruby\n# Gemfile\ngem \"twemoji\", \"~\u003e 3.0.0\"\n```\n## View\n\nAnd just add a simple View Helper:\n\n``` ruby\nmodule EmojiHelper\n  def emojify(content, **options)\n    Twemoji.parse(h(content), options).html_safe if content.present?\n  end\nend\n```\n\nThen in where your content contains emoji, apply this view helper:\n\n``` html+erb\n\u003c%= emojify post.body %\u003e\n```\n\nIn the `post.body` that all occurrences of emoji keywords will be replaced into Twemoji image.\n\nTwemoji by Twitter provides you scalable SVG images that powered by kind folks from MaxCDN, e.g.:\n\n\u003cimg width=\"72\" alt=\"screenshot 2016-06-09 14 58 40\" src=\"https://twemoji.maxcdn.com/2/svg/1f60d.svg\"\u003e\n\nhttps://twemoji.maxcdn.com/2/svg/1f60d.svg\n\nPNG is also available of size `72x72`: https://twemoji.maxcdn.com/2/72x72/1f60d.png.\n\nAdd a little CSS:\n\n``` css\nimg.emoji {\n  height: 1em;\n  width: 1em;\n  margin: 0 .05em 0 .1em;\n  vertical-align: -0.1em;\n}\n```\n\nand make sure your HTML is unicode-friendly:\n\n``` html\n\u003cmeta charset=\"utf-8\"\u003e\n```\n\nVoilà, very simple.\n## Mailer\n\nIn your mailer, you can fallback the SVG images to PNG format by passing in [`file_ext` option](https://github.com/jollygoodcode/twemoji#file_ext):\n\n``` erb\n\u003c%= emojify post.body, file_ext: \"png\" %\u003e\n```\n## Front-end\n\nProvide a json which contains all \"emoji name to unicode\" mappings for your front-end:\n\n``` ruby\n# emojis.json.erb\n\u003c%=\n  Twemoji.codes.map do |code, _|\n    Hash(\n      value: code,\n      html: content_tag(:span, Twemoji.parse(code).html_safe + \" #{code}\" )\n    )\n  end.to_json.html_safe\n%\u003e\n```\n\nTwemoji gem also provides mappings for SVG and PNG, but they are not loaded by default:\n\n``` ruby\n\u003e require \"twemoji/svg\"\n\u003e Twemoji.svg\n{\n  \":mahjong:\"=\u003e\"https://twemoji.maxcdn.com/2/svg/1f004.svg\",\n  ...,\n  \":shibuya:\" =\u003e \"https://twemoji.maxcdn.com/2/svg/e50a.svg\",\n}\n\n\u003e require \"twemoji/png\"\n\u003e Twemoji.png\n{\n  \":mahjong:\"=\u003e\"https://twemoji.maxcdn.com/2/72x72/1f004.png\",\n  ...,\n  \":shibuya:\" =\u003e \"https://twemoji.maxcdn.com/2/72x72/e50a.png\",\n}\n```\n\nIf above data fits your use, you can require and use them:\n\nWith this json in place, you can then use a [autocomplete JavaScript library](https://jqueryui.com/autocomplete/) to implement the autocomlpete feature:\n\n\u003cimg width=\"256\" alt=\"screenshot 2016-06-09 14 58 40\" src=\"https://cloud.githubusercontent.com/assets/1000669/15921416/eeb498c8-2e53-11e6-9dfb-fb228b69469f.png\"\u003e\n\nTwemoji also plays nicely if you implement markdown with [html-pipeline](https://github.com/jch/html-pipeline).\n\nAdd a `EmojiFilter`:\n\n``` ruby\nmodule HTML\n  class Pipeline\n    module Twitter\n      class EmojiFilter \u003c HTML::Pipeline::Filter\n        def call\n          Twemoji.parse(doc,\n            file_ext:   context[:file_ext]   || 'svg',\n            class_name: context[:class_name] || 'emoji',\n            img_attrs:  context[:img_attrs],\n          )\n        end\n      end\n    end\n  end\nend\n```\n\nand include the `EmojiFilter` in your filter chain:\n\n``` ruby\nHTML::Pipeline.new [\n  HTML::Pipeline::MarkdownFilter,\n  HTML::Pipeline::SanitizationFilter,\n  ...\n  HTML::Pipeline::Twitter::EmojiFilter\n], { gfm: true, **options }\n```\n\nThat's bascially all about integrating Twemoji in Rails.\n","author":{"url":"https://github.com/JuanitoFatas","@type":"Person","name":"JuanitoFatas"},"datePublished":"2016-06-09T07:14:23.000Z","interactionStatistic":{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":0},"url":"https://github.com/18/jollygoodcode.github.io/issues/18"}