{"id":2111,"date":"2018-02-15T17:17:02","date_gmt":"2018-02-15T17:17:02","guid":{"rendered":"https:\/\/ionicframework.com\/?p=2111"},"modified":"2018-02-15T17:17:02","modified_gmt":"2018-02-15T17:17:02","slug":"tips-tricks-for-ionic-on-desktop","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/tips-tricks-for-ionic-on-desktop","title":{"rendered":"Tips & Tricks for Ionic on Desktop"},"content":{"rendered":"

This a guest post from Rodrigo Fern\u00e1ndez<\/a>, the CTO and co-founder of Savelist, an app that allows you to save and discover products from any online store, and get notified when prices or stock change.<\/em><\/p>\n

We have been using Ionic at Savelist<\/a> since the first alpha versions, and always thought that one of its strongest benefits is the ability to code an app for iOS, Android and the Web with a single codebase. Heck, we even use Ionic to build our browser extensions!<\/p>\n

When we went through the process of launching the Savelist Progressive Web App in January (2017), we noticed that even though it looked as expected on mobile \u2013 as we started with a \u201cmobile first\u201d approach \u2013 it didn\u2019t look quite right on the larger displays of laptops and desktops. Navigation bars and content were too wide and since most content was aligned to the left, there was too much white space on the right of almost all our screens. It felt more like the maximized version of our Android app than a website.<\/p>\n

In the process of customizing Savelist for larger screens, we collected some tips & tricks that we wanted to share that could help you adapt your app for the desktop, without compromising the mobile experience we already had.<\/p>\n

<\/p>\n

This guide is based on the latest release of ionic-angular<\/code> at the time (3.9.2). If you\u2019re using an older version of Ionic, I strongly recommend you to update to the latest release.<\/p>\n

Setting up the fixed grid<\/h3>\n

Ionic has a great grid system based on flexbox that we can use to adapt content and make it responsive. It’s incredibly customizable, and we can define custom grid widths and breakpoints for every resolution.<\/p>\n

First, we limited the grid width in order to make the content easier to navigate. For our needs, all we had to do was removed the xl<\/code> breakpoint. Ionic handles this without any issues.<\/p>\n

In our src\/theme\/variables.scss<\/code>:<\/p>\n

$grid-breakpoints: (\n xs: 0, \/\/ Phone (0px - 575px)\n sm: 576px, \/\/ Phablet (576px - 767px)\n md: 768px, \/\/ Tablet vertical (768px - 991px)\n lg: 992px \/\/ Tablet horizontal, Desktop (992px and above)\n);\n<\/code><\/pre>\n
Next we modified the $grid-max-widths<\/code> variable and made our app use 100% of the width until it reaches 992px:<\/p>\n
$grid-max-widths: (\n lg: 992px\n);\n<\/code><\/pre>\n
You could use any other size you’d want for this, as long as the value lg<\/code> from $grid-breakpoints<\/code> matches.<\/p>\n
Using the fixed grid on pages<\/h3>\n
In order to apply a max-width to our pages, we just wrap the markup inside <ion-content><\/code> with <ion-grid fixed><\/code>. The fixed<\/code> attribute tells Ionic’s grid to use the max-width corresponding to the current breakpoint, or 100% if not defined.<\/p>\n
So this code:<\/p>\n
<ion-content>\n <!-- Some code -->\n<\/ion-content>\n<\/code><\/pre>\n
Becomes:<\/p>\n
<ion-content>\n <ion-grid fixed>\n   <!-- Some code -->\n <\/ion-grid>\n<\/ion-content>\n<\/code><\/pre>\n
We don\u2019t need to apply this to pages that are displayed inside modals or popovers, as they already have a fixed width.<\/p>\n
Horizontally center the header & footer toolbars<\/h3>\n
We have better looking pages now, but the toolbars inside <ion-header><\/code> and <ion-footer><\/code> are not horizontally aligned. We can easily adjust them to match of our fixed-width pages by adding these rules at the end of app.scss<\/code>:<\/p>\n
\/\/ Desktop\n\nion-header .toolbar {\n margin: auto;\n}\n\n@media (min-width: map-get($grid-breakpoints, lg)) {\n ion-navbar.toolbar,\n ion-header .toolbar[fixed],\n ion-footer .toolbar[fixed],\n ion-tabs .tabbar {\n   margin: 0;\n   padding-right: calc((100% - #{map-get($grid-max-widths, lg)}) \/ 2);\n   padding-left: calc((100% - #{map-get($grid-max-widths, lg)}) \/ 2);\n }\n}\n<\/code><\/pre>\n
If there is any <ion-toolbar><\/code> inside <ion-header><\/code> or <ion-footer><\/code>, you may want to add the fixed<\/code> attribute to center them, like <ion-toolbar fixed><\/code>.<\/p>\n
Showing tabs at the top<\/h3>\n
While users are used to having tabs at the bottom in mobile apps, desktop webs usually show them at the top for better usability and navigation. Well known apps like Twitter, Pinterest and Instagram all use tabs at the top for their desktop experience.<\/p>\n
Fortunately, Ionic Framework allows us to easily customize the position and layout of the tabs, so we can have bottom tabs with icons on top in our mobile experience:<\/p>\n
\"\"
And top tabs with icons on the left for our desktop experience:<\/p>\n
\"\"
To achieve this we can bind class properties to the tabsPlacement<\/code> and tabsLayout<\/code> attributes of our <ion-tabs><\/code>:<\/p>\n
<ion-tabs [tabsPlacement]="tabsPlacement" [tabsLayout]="tabsLayout">\n\n\n<ion-tabs>\n<\/code><\/pre>\n
And set the values depending on the platform:<\/p>\n
@Component({\n  templateUrl: 'app.html'\n})\nexport class AppComponent {\n  tabsPlacement: string = 'bottom';\n  tabsLayout: string = 'icon-top';\n\n  constructor(\n    public platform: Platform,\n  ) {\n    if (!this.platform.is('mobile')) {\n      this.tabsPlacement = 'top';\n      this.tabsLayout = 'icon-left';\n    }\n  }\n}\n<\/code><\/pre>\n
You can check the different placement and layout options in the Tabs docs<\/a>.<\/p>\n
Using the responsive grid and breakpoints<\/h3>\n
One of Savelist’s key features is the ability to show all the products you have saved from the web in a clear and organized layout, so cards in a responsive grid was the best way to go in displaying that information.<\/p>\n
This option lets you have one or two cards per row on mobile, and more cards as the screen gets bigger. Cards don\u2019t have a fixed width and make the best use of the available space.<\/p>\n
Mobile<\/p>\n
\"\"
Tablet<\/p>\n
\"\"
Desktop<\/p>\n
\"\"
It\u2019s easy to achieve this layout with the help of the grid breakpoints we set up before and col-{breakpoint}-{#}<\/code>:<\/p>\n
<ion-grid fixed>\n <ion-row>\n   <ion-card ion-col *ngFor="let product of products" col-6 col-md-4 col-lg-3><\/ion-card>\n <\/ion-row>\n<\/ion-grid>\n<\/code><\/pre>\n
Rows will start with 2 cards on xs<\/code> and sm<\/code>, 3 cards on md<\/code> and 4 cards on lg<\/code> and above.<\/p>\n
Adapting the experience<\/h3>\n
We have addressed the biggest points of adapting the PWA \u201capp shell\u201d to big screens. However, you may still notice some items that you want to show differently, like font size, images, UI, etc.<\/p>\n
There is no silver bullet for this, but you can achieve almost anything you want starting with this media query, so if you ever change the lg<\/code> breakpoint the media query will update as well:<\/p>\n
@media (min-width: map-get($grid-breakpoints, lg)) {\n \/\/ Your rules here\n}\n<\/code><\/pre>\n
Another way is to show or hide elements according to the platform type instead of the screen size with showWhen<\/code> and hideWhen<\/code>. You can use the value core<\/code> to target desktops.<\/p>\n
Share your tricks!<\/h3>\n
This was just a few of the changes we made to Savelist in order to look better on larger screens, but I’m sure there’s more ideas out there. I’d love to know what tricks you have in your bag with working with Ionic, so leave a comment below!<\/p>\n","protected":false},"excerpt":{"rendered":"
This a guest post from Rodrigo Fern\u00e1ndez, the CTO and co-founder of Savelist, an app that allows you to save and discover products from any online store, and get notified when prices or stock change. We have been using Ionic at Savelist since the first alpha versions, and always thought that one of its strongest […]<\/p>\n","protected":false},"author":60,"featured_media":2129,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"publish_to_discourse":"","publish_post_category":"","wpdc_auto_publish_overridden":"","wpdc_topic_tags":"","wpdc_pin_topic":"","wpdc_pin_until":"","discourse_post_id":"","discourse_permalink":"","wpdc_publishing_response":"","wpdc_publishing_error":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[87,33,25],"class_list":["post-2111","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-all","tag-desktop","tag-pwa","tag-tutorials"],"acf":[],"yoast_head":"\nTips & Tricks for Ionic on Desktop - Ionic Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ionic.io\/blog\/tips-tricks-for-ionic-on-desktop\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tips & Tricks for Ionic on Desktop\" \/>\n<meta property=\"og:description\" content=\"This a guest post from Rodrigo Fern\u00e1ndez, the CTO and co-founder of Savelist, an app that allows you to save and discover products from any online store, and get notified when prices or stock change. We have been using Ionic at Savelist since the first alpha versions, and always thought that one of its strongest […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/tips-tricks-for-ionic-on-desktop\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2018-02-15T17:17:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/02\/desktop-trick-img.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1400\" \/>\n\t<meta property=\"og:image:height\" content=\"680\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Rodrigo Fern\u00e1ndez\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@FdezRomero\" \/>\n<meta name=\"twitter:site\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Rodrigo Fern\u00e1ndez\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/ionic.io\/blog\/tips-tricks-for-ionic-on-desktop#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/tips-tricks-for-ionic-on-desktop\"},\"author\":{\"name\":\"Rodrigo Fern\u00e1ndez\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/a5c597448e38a837222a721957672cab\"},\"headline\":\"Tips & Tricks for Ionic on Desktop\",\"datePublished\":\"2018-02-15T17:17:02+00:00\",\"dateModified\":\"2018-02-15T17:17:02+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/tips-tricks-for-ionic-on-desktop\"},\"wordCount\":887,\"commentCount\":36,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/tips-tricks-for-ionic-on-desktop#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/02\/desktop-trick-img.jpg\",\"keywords\":[\"Desktop\",\"PWA\",\"Tutorials\"],\"articleSection\":[\"All\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ionic.io\/blog\/tips-tricks-for-ionic-on-desktop#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/tips-tricks-for-ionic-on-desktop\",\"url\":\"https:\/\/ionic.io\/blog\/tips-tricks-for-ionic-on-desktop\",\"name\":\"Tips & Tricks for Ionic on Desktop - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/tips-tricks-for-ionic-on-desktop#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/tips-tricks-for-ionic-on-desktop#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/02\/desktop-trick-img.jpg\",\"datePublished\":\"2018-02-15T17:17:02+00:00\",\"dateModified\":\"2018-02-15T17:17:02+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/tips-tricks-for-ionic-on-desktop#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/tips-tricks-for-ionic-on-desktop\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/tips-tricks-for-ionic-on-desktop#primaryimage\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/02\/desktop-trick-img.jpg\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/02\/desktop-trick-img.jpg\",\"width\":1400,\"height\":680},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/tips-tricks-for-ionic-on-desktop#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tips & Tricks for Ionic on Desktop\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/ionic.io\/blog\/#website\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"name\":\"ionic.io\/blog\",\"description\":\"Build amazing native and progressive web apps with the web\",\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/ionic.io\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/ionic.io\/blog\/#organization\",\"name\":\"Ionic\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"width\":1920,\"height\":854,\"caption\":\"Ionic\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/ionicframework\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/a5c597448e38a837222a721957672cab\",\"name\":\"Rodrigo Fern\u00e1ndez\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/9dc0a5ba384fa8e997d06aca0ae5948de23c799cf80c2ead3723ce34c88578c3?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/9dc0a5ba384fa8e997d06aca0ae5948de23c799cf80c2ead3723ce34c88578c3?s=96&d=mm&r=g\",\"caption\":\"Rodrigo Fern\u00e1ndez\"},\"sameAs\":[\"http:\/\/savelist.co\",\"https:\/\/x.com\/FdezRomero\"],\"url\":\"https:\/\/ionic.io\/blog\/author\/fdezromero\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Tips & Tricks for Ionic on Desktop - Ionic Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/ionic.io\/blog\/tips-tricks-for-ionic-on-desktop","og_locale":"en_US","og_type":"article","og_title":"Tips & Tricks for Ionic on Desktop","og_description":"This a guest post from Rodrigo Fern\u00e1ndez, the CTO and co-founder of Savelist, an app that allows you to save and discover products from any online store, and get notified when prices or stock change. We have been using Ionic at Savelist since the first alpha versions, and always thought that one of its strongest […]","og_url":"https:\/\/ionic.io\/blog\/tips-tricks-for-ionic-on-desktop","og_site_name":"Ionic Blog","article_published_time":"2018-02-15T17:17:02+00:00","og_image":[{"width":1400,"height":680,"url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/02\/desktop-trick-img.jpg","type":"image\/jpeg"}],"author":"Rodrigo Fern\u00e1ndez","twitter_card":"summary_large_image","twitter_creator":"@FdezRomero","twitter_site":"@ionicframework","twitter_misc":{"Written by":"Rodrigo Fern\u00e1ndez","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ionic.io\/blog\/tips-tricks-for-ionic-on-desktop#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/tips-tricks-for-ionic-on-desktop"},"author":{"name":"Rodrigo Fern\u00e1ndez","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/a5c597448e38a837222a721957672cab"},"headline":"Tips & Tricks for Ionic on Desktop","datePublished":"2018-02-15T17:17:02+00:00","dateModified":"2018-02-15T17:17:02+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/tips-tricks-for-ionic-on-desktop"},"wordCount":887,"commentCount":36,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"image":{"@id":"https:\/\/ionic.io\/blog\/tips-tricks-for-ionic-on-desktop#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/02\/desktop-trick-img.jpg","keywords":["Desktop","PWA","Tutorials"],"articleSection":["All"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ionic.io\/blog\/tips-tricks-for-ionic-on-desktop#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/tips-tricks-for-ionic-on-desktop","url":"https:\/\/ionic.io\/blog\/tips-tricks-for-ionic-on-desktop","name":"Tips & Tricks for Ionic on Desktop - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ionic.io\/blog\/tips-tricks-for-ionic-on-desktop#primaryimage"},"image":{"@id":"https:\/\/ionic.io\/blog\/tips-tricks-for-ionic-on-desktop#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/02\/desktop-trick-img.jpg","datePublished":"2018-02-15T17:17:02+00:00","dateModified":"2018-02-15T17:17:02+00:00","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/tips-tricks-for-ionic-on-desktop#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/tips-tricks-for-ionic-on-desktop"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/tips-tricks-for-ionic-on-desktop#primaryimage","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/02\/desktop-trick-img.jpg","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/02\/desktop-trick-img.jpg","width":1400,"height":680},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/tips-tricks-for-ionic-on-desktop#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"Tips & Tricks for Ionic on Desktop"}]},{"@type":"WebSite","@id":"https:\/\/ionic.io\/blog\/#website","url":"https:\/\/ionic.io\/blog\/","name":"ionic.io\/blog","description":"Build amazing native and progressive web apps with the web","publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ionic.io\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/ionic.io\/blog\/#organization","name":"Ionic","url":"https:\/\/ionic.io\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","width":1920,"height":854,"caption":"Ionic"},"image":{"@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/ionicframework"]},{"@type":"Person","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/a5c597448e38a837222a721957672cab","name":"Rodrigo Fern\u00e1ndez","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/9dc0a5ba384fa8e997d06aca0ae5948de23c799cf80c2ead3723ce34c88578c3?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/9dc0a5ba384fa8e997d06aca0ae5948de23c799cf80c2ead3723ce34c88578c3?s=96&d=mm&r=g","caption":"Rodrigo Fern\u00e1ndez"},"sameAs":["http:\/\/savelist.co","https:\/\/x.com\/FdezRomero"],"url":"https:\/\/ionic.io\/blog\/author\/fdezromero"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/02\/desktop-trick-img.jpg","_links":{"self":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/2111","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/users\/60"}],"replies":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/comments?post=2111"}],"version-history":[{"count":0,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/2111\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media\/2129"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=2111"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=2111"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=2111"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}