{"id":8291,"date":"2017-10-25T09:00:25","date_gmt":"2017-10-25T16:00:25","guid":{"rendered":"http:\/\/blog.mozilla.org\/addons\/?p=8291"},"modified":"2017-10-25T09:00:25","modified_gmt":"2017-10-25T16:00:25","slug":"test-new-look-addons-mozilla-org","status":"publish","type":"post","link":"https:\/\/blog.mozilla.org\/addons\/2017\/10\/25\/test-new-look-addons-mozilla-org\/","title":{"rendered":"Test the new look of addons.mozilla.org!"},"content":{"rendered":"<p>AMO (<a href=\"https:\/\/addons.mozilla.org\">addons.mozilla.org<\/a>) is getting a fresh new look this November, along with the upcoming Firefox Quantum. Here\u2019s a preview:<\/p>\n<div id=\"attachment_8292\" style=\"width: 460px\" class=\"wp-caption aligncenter\"><img aria-describedby=\"caption-attachment-8292\" decoding=\"async\" loading=\"lazy\" class=\"wp-image-8292\" src=\"https:\/\/blog.mozilla.org\/addons\/files\/2017\/10\/asp-fullpage-600x1094.png\" alt=\"Listing page on new front-end\" width=\"450\" height=\"821\" srcset=\"https:\/\/blog.mozilla.org\/addons\/files\/2017\/10\/asp-fullpage-600x1094.png 600w, https:\/\/blog.mozilla.org\/addons\/files\/2017\/10\/asp-fullpage-252x460.png 252w, https:\/\/blog.mozilla.org\/addons\/files\/2017\/10\/asp-fullpage-768x1401.png 768w\" sizes=\"(max-width: 450px) 100vw, 450px\" \/><p id=\"caption-attachment-8292\" class=\"wp-caption-text\">The current look on the development site, not quite final.<\/p><\/div>\n<p>And this is not just a new coat of paint. Curated content \u2014 particularly in the homepage \u2014 is undergoing an overhaul to recommend the best add-ons to users. Additionally, the technology stack powering AMO has undergone important changes, making it faster to load and easier to work with in the future.<\/p>\n<h3>Fully responsive design<\/h3>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-8293\" src=\"https:\/\/blog.mozilla.org\/addons\/files\/2017\/10\/responsive.gif\" alt=\"AMO responsive design\" width=\"499\" height=\"363\" \/><\/p>\n<p>We released the new design for the mobile version of AMO months ago. Now we&#8217;re expanding it for larger resolutions. The site is fully responsive, adapting smoothly to different screen sizes and orientations.<\/p>\n<h3>Behind the scenes: React and front-end separation<\/h3>\n<p>The new AMO is built on the popular <a href=\"http:\/\/redux.js.org\/\">Redux<\/a> + <a href=\"https:\/\/reactjs.org\/\">React<\/a> combo. (Some recent news pointed at concerns with the licensing of the React code, which <a href=\"https:\/\/code.facebook.com\/posts\/300798627056246\/relicensing-react-jest-flow-and-immutable-js\/\">have been addressed<\/a> now.)<\/p>\n<p>Rewriting the front-end code was a great opportunity to improve on other areas:<\/p>\n<ul>\n<li>The front-end and back-end are now separated and communicate via an API that other clients can hook into. <a href=\"http:\/\/addons-server.readthedocs.io\/en\/latest\/topics\/api\/index.html\">It\u2019s documented here<\/a>.<\/li>\n<li>The new front-end has very high unit test coverage, and the aim is to reach 100%. This makes it much easier to detect during development if a code change broke a feature.<\/li>\n<li>Server-side rendering will significantly improve page load times.<\/li>\n<\/ul>\n<h3>Try out the new look!<\/h3>\n<p>You can enable the new look for AMO now. Just look for the <b>View Mobile Site<\/b> link in the footer:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-large wp-image-8294\" src=\"https:\/\/blog.mozilla.org\/addons\/files\/2017\/10\/view-mobile-link-600x82.png\" alt=\"View mobile link in footer\" width=\"600\" height=\"82\" srcset=\"https:\/\/blog.mozilla.org\/addons\/files\/2017\/10\/view-mobile-link-600x82.png 600w, https:\/\/blog.mozilla.org\/addons\/files\/2017\/10\/view-mobile-link-252x34.png 252w, https:\/\/blog.mozilla.org\/addons\/files\/2017\/10\/view-mobile-link-768x105.png 768w, https:\/\/blog.mozilla.org\/addons\/files\/2017\/10\/view-mobile-link.png 1142w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/>If you want to go back to the old site, look in the footer again for a link labeled <b>View classic desktop site<\/b>.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-large wp-image-8295\" src=\"https:\/\/blog.mozilla.org\/addons\/files\/2017\/10\/view-classic-600x162.png\" alt=\"View classic site link in footer\" width=\"600\" height=\"162\" srcset=\"https:\/\/blog.mozilla.org\/addons\/files\/2017\/10\/view-classic-600x162.png 600w, https:\/\/blog.mozilla.org\/addons\/files\/2017\/10\/view-classic-252x68.png 252w, https:\/\/blog.mozilla.org\/addons\/files\/2017\/10\/view-classic-768x207.png 768w, https:\/\/blog.mozilla.org\/addons\/files\/2017\/10\/view-classic.png 1538w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/>Some pages won\u2019t be ported to the new design by November. Notably, user profile pages and collection management. They are still available, but using the old look. Also, some features like contributions and the permissions view in listing pages will be added in later iterations.<\/p>\n<p>If you run into any issues with the new design, or think something\u2019s missing, please <a href=\"https:\/\/github.com\/mozilla\/addons-frontend\/issues\">file an issue<\/a> (bonus points if you test on <a href=\"https:\/\/addons-dev.allizom.org\/\">our development site<\/a> first!). Some may be things we already know about and we plan to add soon. Even in those cases your feedback will help us prioritize our follow-up work.<\/p>\n<p>If you\u2019re not sure if something is an issue or not, or just want to give general feedback about the new design, <a href=\"https:\/\/discourse.mozilla.org\/t\/test-the-new-look-of-addons-mozilla-org\/20860\">please post in this forum thread<\/a>.<\/p>\n<h2>Credits<\/h2>\n<p>Lots of people have worked on the new front-end and the supporting APIs, so I won\u2019t try to list them all. I\u2019ll just highlight <a href=\"https:\/\/twitter.com\/tofumatt\">tofumatt<\/a>, <a href=\"https:\/\/twitter.com\/pwalm\">pwalm<\/a>, <a href=\"https:\/\/twitter.com\/kumar303\">kumar<\/a>, and <a href=\"https:\/\/twitter.com\/muffinresearch\">muffinresearch<\/a>, who did and continue to do the bulk of the work for the new site. <a href=\"https:\/\/blog.mozilla.org\/addons\/author\/sdevaneymozilla-com\/\">Scott DeVaney<\/a> leads the content discovery effort, which will be visible mostly on the homepage (for now!). And, of course, we couldn\u2019t do all of this without the help of the <a href=\"https:\/\/wiki.mozilla.org\/Add-ons#QA\">QA team<\/a> lead by Krupa Raj, and our many <a href=\"https:\/\/wiki.mozilla.org\/Add-ons\/Contribute\/Recognition#Add-on_Contributor_Recognition\">community contributors<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>AMO (addons.mozilla.org) is getting a fresh new look this November, along with the upcoming Firefox Quantum. Here\u2019s a preview: And this is not just a new coat of paint. Curated &hellip; <a class=\"go\" href=\"https:\/\/blog.mozilla.org\/addons\/2017\/10\/25\/test-new-look-addons-mozilla-org\/\">Read more<\/a><\/p>\n","protected":false},"author":173,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[44,581,227],"tags":[17,288923,278874,304448,30550,288931],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Test the new look of addons.mozilla.org! - Mozilla Add-ons Community 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:\/\/blog.mozilla.org\/addons\/2017\/10\/25\/test-new-look-addons-mozilla-org\/\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jorge Villalobos\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/blog.mozilla.org\/addons\/2017\/10\/25\/test-new-look-addons-mozilla-org\/\",\"url\":\"https:\/\/blog.mozilla.org\/addons\/2017\/10\/25\/test-new-look-addons-mozilla-org\/\",\"name\":\"Test the new look of addons.mozilla.org! - Mozilla Add-ons Community Blog\",\"isPartOf\":{\"@id\":\"https:\/\/blog.mozilla.org\/addons\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/blog.mozilla.org\/addons\/2017\/10\/25\/test-new-look-addons-mozilla-org\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/blog.mozilla.org\/addons\/2017\/10\/25\/test-new-look-addons-mozilla-org\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/blog.mozilla.org\/addons\/files\/2017\/10\/asp-fullpage-600x1094.png\",\"datePublished\":\"2017-10-25T16:00:25+00:00\",\"dateModified\":\"2017-10-25T16:00:25+00:00\",\"author\":{\"@id\":\"https:\/\/blog.mozilla.org\/addons\/#\/schema\/person\/a098261b4b5510d408ff31f492606925\"},\"breadcrumb\":{\"@id\":\"https:\/\/blog.mozilla.org\/addons\/2017\/10\/25\/test-new-look-addons-mozilla-org\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/blog.mozilla.org\/addons\/2017\/10\/25\/test-new-look-addons-mozilla-org\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/blog.mozilla.org\/addons\/2017\/10\/25\/test-new-look-addons-mozilla-org\/#primaryimage\",\"url\":\"https:\/\/blog.mozilla.org\/addons\/files\/2017\/10\/asp-fullpage.png\",\"contentUrl\":\"https:\/\/blog.mozilla.org\/addons\/files\/2017\/10\/asp-fullpage.png\",\"width\":2098,\"height\":3826,\"caption\":\"Listing page on new front-end\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/blog.mozilla.org\/addons\/2017\/10\/25\/test-new-look-addons-mozilla-org\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/blog.mozilla.org\/addons\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Test the new look of addons.mozilla.org!\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/blog.mozilla.org\/addons\/#website\",\"url\":\"https:\/\/blog.mozilla.org\/addons\/\",\"name\":\"Mozilla Add-ons Community Blog\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/blog.mozilla.org\/addons\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/blog.mozilla.org\/addons\/#\/schema\/person\/a098261b4b5510d408ff31f492606925\",\"name\":\"Jorge Villalobos\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/blog.mozilla.org\/addons\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/6d1966118f16e4b99a6e3ad07883be33?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/6d1966118f16e4b99a6e3ad07883be33?s=96&d=mm&r=g\",\"caption\":\"Jorge Villalobos\"},\"description\":\"Jorge is the Product Manager for addons.mozilla.org\",\"url\":\"https:\/\/blog.mozilla.org\/addons\/author\/jvillalobosmozilla-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Test the new look of addons.mozilla.org! - Mozilla Add-ons Community 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:\/\/blog.mozilla.org\/addons\/2017\/10\/25\/test-new-look-addons-mozilla-org\/","twitter_misc":{"Written by":"Jorge Villalobos","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/blog.mozilla.org\/addons\/2017\/10\/25\/test-new-look-addons-mozilla-org\/","url":"https:\/\/blog.mozilla.org\/addons\/2017\/10\/25\/test-new-look-addons-mozilla-org\/","name":"Test the new look of addons.mozilla.org! - Mozilla Add-ons Community Blog","isPartOf":{"@id":"https:\/\/blog.mozilla.org\/addons\/#website"},"primaryImageOfPage":{"@id":"https:\/\/blog.mozilla.org\/addons\/2017\/10\/25\/test-new-look-addons-mozilla-org\/#primaryimage"},"image":{"@id":"https:\/\/blog.mozilla.org\/addons\/2017\/10\/25\/test-new-look-addons-mozilla-org\/#primaryimage"},"thumbnailUrl":"https:\/\/blog.mozilla.org\/addons\/files\/2017\/10\/asp-fullpage-600x1094.png","datePublished":"2017-10-25T16:00:25+00:00","dateModified":"2017-10-25T16:00:25+00:00","author":{"@id":"https:\/\/blog.mozilla.org\/addons\/#\/schema\/person\/a098261b4b5510d408ff31f492606925"},"breadcrumb":{"@id":"https:\/\/blog.mozilla.org\/addons\/2017\/10\/25\/test-new-look-addons-mozilla-org\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blog.mozilla.org\/addons\/2017\/10\/25\/test-new-look-addons-mozilla-org\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/blog.mozilla.org\/addons\/2017\/10\/25\/test-new-look-addons-mozilla-org\/#primaryimage","url":"https:\/\/blog.mozilla.org\/addons\/files\/2017\/10\/asp-fullpage.png","contentUrl":"https:\/\/blog.mozilla.org\/addons\/files\/2017\/10\/asp-fullpage.png","width":2098,"height":3826,"caption":"Listing page on new front-end"},{"@type":"BreadcrumbList","@id":"https:\/\/blog.mozilla.org\/addons\/2017\/10\/25\/test-new-look-addons-mozilla-org\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blog.mozilla.org\/addons\/"},{"@type":"ListItem","position":2,"name":"Test the new look of addons.mozilla.org!"}]},{"@type":"WebSite","@id":"https:\/\/blog.mozilla.org\/addons\/#website","url":"https:\/\/blog.mozilla.org\/addons\/","name":"Mozilla Add-ons Community Blog","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blog.mozilla.org\/addons\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/blog.mozilla.org\/addons\/#\/schema\/person\/a098261b4b5510d408ff31f492606925","name":"Jorge Villalobos","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/blog.mozilla.org\/addons\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/6d1966118f16e4b99a6e3ad07883be33?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6d1966118f16e4b99a6e3ad07883be33?s=96&d=mm&r=g","caption":"Jorge Villalobos"},"description":"Jorge is the Product Manager for addons.mozilla.org","url":"https:\/\/blog.mozilla.org\/addons\/author\/jvillalobosmozilla-com\/"}]}},"_links":{"self":[{"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/posts\/8291"}],"collection":[{"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/users\/173"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/comments?post=8291"}],"version-history":[{"count":0,"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/posts\/8291\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/media?parent=8291"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/categories?post=8291"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/tags?post=8291"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}