{"id":5639,"date":"2016-08-03T03:46:06","date_gmt":"2016-08-03T03:46:06","guid":{"rendered":"http:\/\/www.jitendrazaa.com\/blog\/?p=5639"},"modified":"2016-08-03T03:53:55","modified_gmt":"2016-08-03T03:53:55","slug":"twitter-like-button-as-salesforce-lightning-component-pure-css3-with-video","status":"publish","type":"post","link":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/twitter-like-button-as-salesforce-lightning-component-pure-css3-with-video\/","title":{"rendered":"Twitter&#8217;s Like button as Salesforce Lightning Component- pure CSS3 with Video"},"content":{"rendered":"<p style=\"text-align: justify;\">Twitter uses image sprite and JavaScript to produce\u00a0<strong>Like button animation.\u00a0<\/strong>We would be giving same effect to checkbox by using Lightning component. Combination of <em>Checkbox, Label and Box<\/em> property of CSS3 is used to give final result.<\/p>\n<p style=\"text-align: justify;\">Lightning Component will contain only declaration of checkbox as shown below.<\/p>\n<p><span style=\"text-decoration: underline;\"><strong>TwitterLove.cmp<\/strong><\/span><\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n\r\n&lt;aura:component &gt;\r\n&lt;input id=&quot;toggle-heart&quot; type=&quot;checkbox&quot; \/&gt;\r\n&lt;label for=&quot;toggle-heart&quot;&gt;\u2764&lt;\/label&gt;\r\n&lt;\/aura:component&gt;\r\n\r\n<\/pre>\n<p style=\"text-align: justify;\"><em><span style=\"text-decoration: underline;\">Note :<\/span><\/em> In above source code, heart UTF icon is getting replaced by emoji code, so refer <a href=\"https:\/\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/08\/Salesforce-Aura-component.png\">this screen to see<\/a> exact code written for Lightning Component.<\/p>\n<p style=\"text-align: justify;\">We have used <a href=\"http:\/\/sass-lang.com\/\">Sassy CSS (SCSS)<\/a> in this demo, as it would be little bit hard to write pure CSS with animation. Once SCSS is written, we can <a href=\"http:\/\/www.sassmeister.com\/\">use this online tool<\/a> to convert it to CSS. All <a href=\"https:\/\/www.livecoding.tv\/jitendra\/videos\/Nr7nE-css-based-twitters-like-button-lightning\/\">these are\u00a0explained and build live<\/a>\u00a0on my channel.<!--more--><\/p>\n<p><span style=\"text-decoration: underline;\"><strong>TwitterLove.scss<\/strong><\/span><\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\r\n\r\n$bubble-d: 4.5rem; \/\/ bubble diameter\r\n$bubble-r: .5*$bubble-d; \/\/ bubble-radius\r\n$particle-d: .375rem;\r\n$particle-r: .5*$particle-d;\r\n\r\n$shadow-list: (); \/\/ init shadow list\r\n$n-groups: 7.0; \/\/ number of groups\r\n$group-base-angle: 360deg\/$n-groups;\r\n$group-distr-r: 1.0 * $bubble-r; \/\/ circular distribution radius for groups\r\n@for $i from 0 to $n-groups {\r\n\/\/ current group angle, starting fron 12 o'clock\r\n$group-curr-angle: $i * $group-base-angle - 90deg;\r\n\/\/ coords of the central point of current group of particles\r\n$xg: $group-distr-r * cos($group-curr-angle);\r\n$yg: $group-distr-r * sin($group-curr-angle);\r\n\r\n\/\/ add to shadow list\r\n$shadow-list: $shadow-list, $xg $yg;\r\n}\r\n\r\n@mixin bubble($ext) {\r\ntransform: scale(1);\r\nborder-color: #cc8ef5;\r\nborder-width: $ext;\r\n}\r\n\r\nbody {\r\ndisplay: flex;\r\njustify-content: center;\r\nmargin: 0;\r\nheight: 100vh;\r\n}\r\n\r\n&#x5B;id='toggle-heart'] {\r\nposition: absolute;\r\nleft: -100vw;\r\n\r\n&amp;:checked + label {\r\ncolor: #e2264d;\r\nwill-change: font-size;\r\nanimation: heart 1s cubic-bezier(.17, .89, .32, 1.49);\r\n\r\n&amp;:before, &amp;:after {\r\nanimation: inherit;\r\nanimation-timing-function: cubic-bezier(.21, .61, .35, 1);\r\n}\r\n\r\n&amp;:before {\r\nwill-change: transform, border-width, border-color;\r\nanimation-name: bubble;\r\n}\r\n}\r\n}\r\n\r\n&#x5B;for='toggle-heart'] {\r\nalign-self: center;\r\nposition: relative;\r\ncolor: #aab8c2;\r\nfont-size: 2em;\r\ncursor: pointer;\r\n\r\n&amp;:before, &amp;:after {\r\nposition: absolute;\r\nz-index: -1;\r\ntop: 50%; left: 50%;\r\nborder-radius: 50%;\r\ncontent: '';\r\n}\r\n\r\n&amp;:before {\r\nbox-sizing: border-box;\r\nmargin: -$bubble-r;\r\nborder: solid $bubble-r #e2264d;\r\nwidth: $bubble-d; height: $bubble-d;\r\ntransform: scale(0);\r\n}\r\n\r\n&amp;:after {\r\nmargin: -$particle-r;\r\nwidth: $particle-d; height: $particle-d;\r\nbox-shadow: $shadow-list;\r\n}\r\n}\r\n\r\n@keyframes heart {\r\n0%, 17.5% { font-size: 0; }\r\n}\r\n\r\n@keyframes bubble {\r\n15% { @include bubble($bubble-r); }\r\n30%, 100% { @include bubble(0); }\r\n}\r\n\r\n<\/pre>\n<p><span style=\"text-decoration: underline;\"><strong>TwitterLove.css<\/strong><\/span> (CSS auto generated from SCSS)<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\r\n\r\n.THIS {\r\ndisplay: flex;\r\njustify-content: center;\r\nmargin: 0;\r\n}\r\n\r\n.THIS&#x5B;id='toggle-heart'] {\r\nposition: absolute;\r\nleft: -100vw;\r\n}\r\n\r\n.THIS&#x5B;for='toggle-heart'] {\r\ncolor: #aab8c2;\r\n}\r\n\r\n.THIS&#x5B;id='toggle-heart']:checked + label {\r\ncolor: #e2264d;\r\n}\r\n\r\n.THIS&#x5B;for='toggle-heart'] {\r\nfont-size: 2em;\r\ncursor: pointer;\r\n}\r\n\r\n.THIS&#x5B;for='toggle-heart'] {\r\nalign-self: center;\r\nmargin-top: 100px;\r\n}\r\n\r\n@keyframes heart {\r\n0%, 20% {\r\nfont-size: 0;\r\n}\r\n}\r\n.THIS&#x5B;id='toggle-heart']:checked + label {\r\nwill-change: font-size;\r\nanimation: heart 1s cubic-bezier(0.17, 0.89, 0.32, 1.49);\r\n}\r\n\r\n.THIS&#x5B;for='toggle-heart'] {\r\nposition: relative;\r\n}\r\n.THIS&#x5B;for='toggle-heart']:before, .THIS&#x5B;for='toggle-heart']:after {\r\nposition: absolute;\r\nz-index: -1;\r\ntop: 50%;\r\nleft: 50%;\r\nborder-radius: 50%;\r\ncontent: '';\r\n}\r\n\r\n.THIS&#x5B;for='toggle-heart']::before {\r\nmargin: -2.25rem;\r\nwidth: 4.5rem;\r\nheight: 4.5rem;\r\n}\r\n\r\n.THIS&#x5B;for='toggle-heart']:before {\r\nbox-sizing: border-box;\r\nborder: solid 2.25rem #e2264d;\r\ntransform: scale(0);\r\n}\r\n\r\n@keyframes bubble {\r\n15% {\r\nborder-color: #cc8ef5;\r\nborder-width: 2.25rem;\r\ntransform: scale(1);\r\n}\r\n30%, 100% {\r\nborder-color: #cc8ef5;\r\nborder-width: 0;\r\ntransform: scale(1);\r\n}\r\n}\r\n.THIS&#x5B;id='toggle-heart']:checked + label::before, .THIS&#x5B;id='toggle-heart']:checked + label::after {\r\nanimation: inherit;\r\nanimation-timing-function: cubic-bezier(0.21, 0.61, 0.35, 1);\r\n}\r\n.THIS&#x5B;id='toggle-heart']:checked + label::before {\r\nwill-change: transform, border-color, border-width;\r\nanimation-name: bubble;\r\n}\r\n.THIS&#x5B;id='toggle-heart']:checked + label:after {\r\nwill-change: opacity, box-shadow;\r\nanimation-name: particles;\r\n}\r\n\r\n.THIS&#x5B;for='toggle-heart']:after {\r\nmargin: -0.1875rem;\r\nwidth: 0.375rem;\r\nheight: 0.375rem;\r\n}\r\n\r\n@keyframes particles {\r\n0%, 20% {\r\nopacity: 0;\r\n}\r\n25% {\r\nopacity: 1;\r\nbox-shadow: 0.32476rem -2.4375rem 0 0rem #ff8080, -0.32476rem -2.0625rem 0 0rem #ffed80, 2.1082rem -1.26585rem 0 0rem #ffed80, 1.41004rem -1.53985rem 0 0rem #a4ff80, 2.30412rem 0.85901rem 0 0rem #a4ff80, 2.08305rem 0.14233rem 0 0rem #80ffc8, 0.76499rem 2.33702rem 0 0rem #80ffc8, 1.18748rem 1.71734rem 0 0rem #80c8ff, -1.35019rem 2.0552rem 0 0rem #80c8ff, -0.60229rem 1.99916rem 0 0rem #a480ff, -2.44865rem 0.22578rem 0 0rem #a480ff, -1.93852rem 0.77557rem 0 0rem #ff80ed, -1.70323rem -1.77366rem 0 0rem #ff80ed, -1.81501rem -1.03204rem 0 0rem #ff8080;\r\n}\r\n}\r\n.THIS&#x5B;for='toggle-heart']:after {\r\nbox-shadow: 0.32476rem -3rem 0 -0.1875rem #ff8080, -0.32476rem -2.625rem 0 -0.1875rem #ffed80, 2.54798rem -1.61656rem 0 -0.1875rem #ffed80, 1.84982rem -1.89057rem 0 -0.1875rem #a4ff80, 2.85252rem 0.98418rem 0 -0.1875rem #a4ff80, 2.63145rem 0.2675rem 0 -0.1875rem #80ffc8, 1.00905rem 2.84381rem 0 -0.1875rem #80ffc8, 1.43154rem 2.22414rem 0 -0.1875rem #80c8ff, -1.59425rem 2.562rem 0 -0.1875rem #80c8ff, -0.84635rem 2.50595rem 0 -0.1875rem #a480ff, -2.99705rem 0.35095rem 0 -0.1875rem #a480ff, -2.48692rem 0.90073rem 0 -0.1875rem #ff80ed, -2.14301rem -2.12438rem 0 -0.1875rem #ff80ed, -2.25479rem -1.38275rem 0 -0.1875rem #ff8080;\r\n}\r\n\r\n.THIS&#x5B;id='toggle-heart']:checked + label:after {\r\nmargin: -0.1875rem;\r\nwidth: 0.375rem;\r\nheight: 0.375rem;\r\n\/* box-shadow: $shadow-list;*\/\r\nbox-shadow: 0.32476rem -3rem 0 -0.1875rem #ff8080, -0.32476rem -2.625rem 0 -0.1875rem #ffed80, 2.54798rem -1.61656rem 0 -0.1875rem #ffed80, 1.84982rem -1.89057rem 0 -0.1875rem #a4ff80, 2.85252rem 0.98418rem 0 -0.1875rem #a4ff80, 2.63145rem 0.2675rem 0 -0.1875rem #80ffc8, 1.00905rem 2.84381rem 0 -0.1875rem #80ffc8, 1.43154rem 2.22414rem 0 -0.1875rem #80c8ff, -1.59425rem 2.562rem 0 -0.1875rem #80c8ff, -0.84635rem 2.50595rem 0 -0.1875rem #a480ff, -2.99705rem 0.35095rem 0 -0.1875rem #a480ff, -2.48692rem 0.90073rem 0 -0.1875rem #ff80ed, -2.14301rem -2.12438rem 0 -0.1875rem #ff80ed, -2.25479rem -1.38275rem 0 -0.1875rem #ff8080;\r\n}\r\n\r\n<\/pre>\n<h3 style=\"text-align: justify;\">Next Step &#8211; Handling event in Lightning Component<\/h3>\n<p style=\"text-align: justify;\">We can register event on this component, so that whenever checkbox is checked, other components in Lightning components can be notified. <a href=\"https:\/\/developer.salesforce.com\/trailhead\/en\/lex_dev_lc_basics\/lex_dev_lc_basics_events\">This trailhead module<\/a> would guide in much\u00a0detail about handling events in Lightning Component.<\/p>\n<h3><strong>Resources\u00a0<\/strong><\/h3>\n<ul>\n<li style=\"text-align: justify;\"><a href=\"https:\/\/www.livecoding.tv\/jitendra\/videos\/Nr7nE-css-based-twitters-like-button-lightning\/\">Live coding stream<\/a> (My Channel)<\/li>\n<li style=\"text-align: justify;\"><a href=\"https:\/\/css-tricks.com\/recreating-the-twitter-heart-animation\/\">Recreating the Twitter Heart Animation<\/a> (with One Element, No Images, and No JavaScript)<\/li>\n<li style=\"text-align: justify;\"><a href=\"http:\/\/www.sassmeister.com\/\">sassmeister online SCSS playground<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Building Lightning component checkbox to have Twitter&#8217;s Heart like animation without any image or JavaScript.<\/p>\n","protected":false},"author":1,"featured_media":5641,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"jz_research_post":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[9],"tags":[68,311,212],"class_list":["post-5639","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-salesforce","tag-css-3","tag-lightning-component","tag-video-tutorial"],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/08\/Twitter-Animation-using-pure-CSS3.gif?fit=532%2C504&ssl=1","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":6920,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/data-exchange-between-aura-lightning-web-components-lwc-and-visualforce\/","url_meta":{"origin":5639,"position":0},"title":"Event Handling between Aura, Lightning Web Components (LWC) and Visualforce","author":"Jitendra","date":"October 16, 2019","format":false,"excerpt":"How to use Lightning Message Services for event handling between Lightning Web Components, Aura Components and Visualforce","rel":"","context":"In &quot;Lightning&quot;","block_context":{"text":"Lightning","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/lightning\/"},"img":{"alt_text":"Salesforce Lightning Message Service","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/10\/Salesforce-Lightning-Message-Service.png?fit=1200%2C1046&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/10\/Salesforce-Lightning-Message-Service.png?fit=1200%2C1046&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/10\/Salesforce-Lightning-Message-Service.png?fit=1200%2C1046&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/10\/Salesforce-Lightning-Message-Service.png?fit=1200%2C1046&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/10\/Salesforce-Lightning-Message-Service.png?fit=1200%2C1046&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":5751,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/get-selected-html-or-lightning-component-in-aura-iterator\/","url_meta":{"origin":5639,"position":1},"title":"Get Selected HTML or Lightning component in Aura Iterator","author":"Jitendra","date":"September 28, 2016","format":false,"excerpt":"How to detect event from Lightning Component and HTML5 components in Aura Iterator","rel":"","context":"In &quot;Salesforce&quot;","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Get selected item in aura iterator component","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/09\/Get-Selected-Item-from-Aura-Iterator-Component-in-Lightning.gif?fit=548%2C432&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/09\/Get-Selected-Item-from-Aura-Iterator-Component-in-Lightning.gif?fit=548%2C432&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/09\/Get-Selected-Item-from-Aura-Iterator-Component-in-Lightning.gif?fit=548%2C432&ssl=1&resize=525%2C300 1.5x"},"classes":[]},{"id":4461,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/getting-started-with-basics-of-lightning-component\/","url_meta":{"origin":5639,"position":2},"title":"Getting started with basics of Lightning Component","author":"Jitendra","date":"May 19, 2015","format":false,"excerpt":"As you might already know\u00a0that next big change in Salesforce is introduction to lightning components. As technology is changing rapidly and to take advantage of cutting edge innovations in web technology, Salesforce doesn't want to stay behind. If we see trend, all major platform has introduced component based design like\u2026","rel":"","context":"In &quot;Lightning&quot;","block_context":{"text":"Lightning","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/lightning\/"},"img":{"alt_text":"Getting started with Lightning component Output","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/05\/Getting-started-with-Lightning-component-Output.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":6176,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/lookup-component-in-salesforce-lightning\/","url_meta":{"origin":5639,"position":3},"title":"Lookup component in Salesforce Lightning","author":"Jitendra","date":"July 6, 2017","format":false,"excerpt":"Salesforce Lightning component in plain JavaScript and SLDS with complete source code","rel":"","context":"In &quot;Salesforce&quot;","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Salesforce Lightning Lookup Component","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/07\/Salesforce-Lightning-Lookup-Component.png?fit=978%2C285&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/07\/Salesforce-Lightning-Lookup-Component.png?fit=978%2C285&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/07\/Salesforce-Lightning-Lookup-Component.png?fit=978%2C285&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/07\/Salesforce-Lightning-Lookup-Component.png?fit=978%2C285&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":4493,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/create-collapsible-panel-component-in-lightning\/","url_meta":{"origin":5639,"position":4},"title":"Salesforce  Lightning Component &#8211; expand and collapsable panel example","author":"Jitendra","date":"May 22, 2015","format":false,"excerpt":"How to use aura:facet component and Learn creating expand and collapsable reusable lightning component in Salesforce","rel":"","context":"In &quot;Lightning&quot;","block_context":{"text":"Lightning","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/lightning\/"},"img":{"alt_text":"Lightning CollapsiblePanel Component - Expanded","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/05\/Lightning-CollapsiblePanel-Component-Expanded.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/05\/Lightning-CollapsiblePanel-Component-Expanded.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/05\/Lightning-CollapsiblePanel-Component-Expanded.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/05\/Lightning-CollapsiblePanel-Component-Expanded.png?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":6017,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/export-or-print-code-review-feedback-generated-by-salesforce-lightning-cli\/","url_meta":{"origin":5639,"position":5},"title":"Export or print code review feedback generated by Salesforce Lightning CLI","author":"Jitendra","date":"May 2, 2017","format":false,"excerpt":"How to print or export code review feedback report generated by Salesforce Lightning CLI tool","rel":"","context":"In &quot;Salesforce&quot;","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Export Salesforce Lightning CLI code review report","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/05\/Salesforce-Lightning-CLI-code-review-report.png?fit=1200%2C710&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/05\/Salesforce-Lightning-CLI-code-review-report.png?fit=1200%2C710&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/05\/Salesforce-Lightning-CLI-code-review-report.png?fit=1200%2C710&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/05\/Salesforce-Lightning-CLI-code-review-report.png?fit=1200%2C710&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/05\/Salesforce-Lightning-CLI-code-review-report.png?fit=1200%2C710&ssl=1&resize=1050%2C600 3x"},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/5639","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/comments?post=5639"}],"version-history":[{"count":4,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/5639\/revisions"}],"predecessor-version":[{"id":5645,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/5639\/revisions\/5645"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/media\/5641"}],"wp:attachment":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/media?parent=5639"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/categories?post=5639"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/tags?post=5639"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}