|
| 1 | +title: CC Search Extension: Wrapping up GSoC 2020 |
| 2 | +--- |
| 3 | +categories: |
| 4 | +gsoc |
| 5 | +gsoc-2020 |
| 6 | +cc-browser-extension |
| 7 | +cc-search |
| 8 | +open-source |
| 9 | +--- |
| 10 | +author: makkoncept |
| 11 | +--- |
| 12 | +series: gsoc-2020-browser-extension |
| 13 | +--- |
| 14 | +pub_date: 2020-08-27 |
| 15 | +--- |
| 16 | +body: |
| 17 | + |
| 18 | + |
| 19 | +In this post, I'll give an overview of the improvements and features that were added to the CC Search browser extension. I am delighted to state that the goals that were set for Google Summer of Code 2020 have been successfully completed. |
| 20 | + |
| 21 | +## Widen the integration with CC Catalog API |
| 22 | +Both [CC Search](search.creativecommons.org) and CC Search Extension are powered by [CC Catalog REST API](https://api.creativecommons.engineering/v1/). The API allows programmatic access to search for CC-licensed and public domain digital media. Better integration with the API was one of the major targets during this internship because it significantly improves and adds new searching workflows to the extension. |
| 23 | + |
| 24 | +This can be sub-divided into _New Filters_, _Browse By Sources_, _search by tags_, and _related images_. |
| 25 | + |
| 26 | +### New Filters |
| 27 | +The `/image` endpoint of the API is used for searching. We can also provide several query parameters that can filter the result. Previously, the extension only supported filtering the content using `license`, `sources`, and `use case`. Now, besides these filters, the extension also supports filtering by `image type`, `file type`, `aspect ratio`, and `image size`. |
| 28 | + |
| 29 | +<figure > |
| 30 | + <img src="old-extension-filters.gif" style="width: 70%"> |
| 31 | + <figcaption> |
| 32 | + <em>Filters in the old version</em> |
| 33 | + </figcaption> |
| 34 | +</figure> |
| 35 | + |
| 36 | +<figure> |
| 37 | + <img src="new-extension-filters.gif" style="width: 70%"> |
| 38 | + <figcaption> |
| 39 | + <em>Filters in the new version</em> |
| 40 | + </figcaption> |
| 41 | +</figure> |
| 42 | + |
| 43 | +_Rationale_: This will allow users to be more precise in their queries when searching. |
| 44 | + |
| 45 | +### Browsing by source |
| 46 | +The extension now has a dynamically updated "sources" section. Clicking a source link triggers a request to the `/image` endpoint to get the images associated with it. |
| 47 | + |
| 48 | +<figure > |
| 49 | + <img src="source-section-light.gif" style="width: 70%"> |
| 50 | + <figcaption> |
| 51 | + <em>Source section</em> |
| 52 | + </figcaption> |
| 53 | +</figure> |
| 54 | + |
| 55 | +<figure> |
| 56 | + <img src="source-section-dark.gif" style="width: 70%"> |
| 57 | + <figcaption> |
| 58 | + <em>Source section in dark mode</em> |
| 59 | + </figcaption> |
| 60 | +</figure> |
| 61 | + |
| 62 | +_Rationale_: This opens an avenue for exploration of all the different sources which are available in the catalog. This is advantageous for the users who are not familiar with the type of content a particular source provides. They might run into a source that has a huge catalog of high-quality images that they are looking for. |
| 63 | + |
| 64 | +### Search by tags |
| 65 | +Most of the images have some tags associated with them, which are also sent along with the image data by the API. This, and the flexibility of the `/image` endpoint, paved the way for the addition of searching for images using image-tags. |
| 66 | + |
| 67 | +<figure > |
| 68 | + <img src="search-by-image-tag.gif" style="width: 70%"> |
| 69 | + <figcaption> |
| 70 | + <em>Search by image tag</em> |
| 71 | + </figcaption> |
| 72 | +</figure> |
| 73 | + |
| 74 | +_Rational_ - Image tags will allow users to incrementally make their queries better and more specific. |
| 75 | + |
| 76 | +### Related images |
| 77 | +In the image detail section of any particular image, you can now see several recommendations. This has been made possible by adding support for the [`/recommendations/images/{identifier}`](https://api.creativecommons.engineering/v1/#tag/recommendations) endpoint of the API. |
| 78 | + |
| 79 | +<figure > |
| 80 | + <img src="related-images.gif" style="width: 70%"> |
| 81 | + <figcaption> |
| 82 | + <em>Image recommendations</em> |
| 83 | + </figcaption> |
| 84 | +</figure> |
| 85 | + |
| 86 | +_Rationale_ - This will help users find a variety of images that fit their requirements and also explore the images that would not usually show up on the initial pages of the search result. |
| 87 | + |
| 88 | +## Improvements to bookmarks section |
| 89 | +The bookmark section has great prominence in CC Search Extension because the export/import workflow is tied to it and unlike the search result data, the bookmarks data is preserved across user sessions (closing the extension does not wipe out the bookmarks). It has undergone some crucial improvements like caching, voluntary loading and increase in the number bookmarks that it can hold (the limit now is 300 which earlier was ~50). |
| 90 | + |
| 91 | +The bookmarks section is significantly faster now as caching has eliminated the need to make many simultaneous network requests to the API when bookmarks are loaded. Voluntary loading also helps reduce perceived lag by reducing the number of bookmarks that load at once. |
| 92 | + |
| 93 | +Though the improvement in performance is better recognized when you are using the extension, I tried to demonstrate that by comparing the rendering of the bookmarked images. |
| 94 | + |
| 95 | +<figure > |
| 96 | + <img src="bookmarks-in-old-version.gif" style="width: 70%"> |
| 97 | + <figcaption> |
| 98 | + <em>Bookmark section in the old version</em> |
| 99 | + </figcaption> |
| 100 | +</figure> |
| 101 | + |
| 102 | +<figure > |
| 103 | + <img src="bookmarks-in-new-version.gif" style="width: 70%"> |
| 104 | + <figcaption> |
| 105 | + <em>Bookmarks section in the new version</em> |
| 106 | + </figcaption> |
| 107 | +</figure> |
| 108 | + |
| 109 | + |
| 110 | +## A better use of sync storage |
| 111 | +The bookmarks and the user settings are synced between user systems. There are very tight write limits and bytes quotas associated with this storage([documentation link](https://developer.chrome.com/apps/storage#properties)). Due to this, the way the extension used this storage, and the assumptions it made about its schema was improved multiple times. Since the extension was already in production, and had around 5,000 weekly users, the code for migrating the user's sync storage was pushed along with these updates. Also, the support was added for legacy bookmark files that some users might still be using. |
| 112 | + |
| 113 | +## Integration with Vocabulary |
| 114 | +The extension now supports the latest version of [CC vocabulary](https://github.com/creativecommons/vocabulary). The challenging part of this was to rethink, mold, and update each and every workflow of the extension according to the new design. |
| 115 | + |
| 116 | +<figure > |
| 117 | + <img src="image-detail-old-version.gif" style="width: 70%"> |
| 118 | + <figcaption> |
| 119 | + <em>Old version — Image detail</em> |
| 120 | + </figcaption> |
| 121 | +</figure> |
| 122 | + |
| 123 | +<figure > |
| 124 | + <img src="image-detail-new-version.gif" style="width: 70%"> |
| 125 | + <figcaption> |
| 126 | + <em>New version — Image detail</em> |
| 127 | + </figcaption> |
| 128 | +</figure> |
| 129 | + |
| 130 | +<figure > |
| 131 | + <img src="deletion-in-old-version.gif" style="width: 70%"> |
| 132 | + <figcaption> |
| 133 | + <em>Old version — Deleting bookmarks</em> |
| 134 | + </figcaption> |
| 135 | +</figure> |
| 136 | + |
| 137 | +<figure > |
| 138 | + <img src="deletion-in-new-version.gif" style="width: 70%"> |
| 139 | + <figcaption> |
| 140 | + <em>New version — Deleting bookmarks</em> |
| 141 | + </figcaption> |
| 142 | +</figure> |
| 143 | + |
| 144 | +<figure > |
| 145 | + <img src="dark-mode-old-version.gif" style="width: 70%"> |
| 146 | + <figcaption> |
| 147 | + <em>Old version — Dark mode</em> |
| 148 | + </figcaption> |
| 149 | +</figure> |
| 150 | + |
| 151 | +<figure > |
| 152 | + <img src="dark-mode-new-version.gif" style="width: 70%"> |
| 153 | + <figcaption> |
| 154 | + <em>New version — Dark mode</em> |
| 155 | + </figcaption> |
| 156 | +</figure> |
| 157 | + |
| 158 | +## Release on Microsoft Edge |
| 159 | +I am also testing the extension on Microsoft Edge. We also have it [listed](https://microsoftedge.microsoft.com/addons/detail/cc-search/djolilnbndifmlfmcdnifdfjfbglipgc) on the Edge store. You can soon expect the latest version of CC Search Extension available for install there. |
| 160 | + |
| 161 | +## Code |
| 162 | + |
| 163 | +The project repository is hosted on [Github](https://github.com/creativecommons/ccsearch-browser-extension). During this period, I have made [more than 320](https://github.com/creativecommons/ccsearch-browser-extension/compare/v1.3.0...master) commits. |
| 164 | + |
| 165 | +The Major pull requests: [#249](https://github.com/creativecommons/ccsearch-browser-extension/pull/249), [#255](https://github.com/creativecommons/ccsearch-browser-extension/pull/255), [#268](https://github.com/creativecommons/ccsearch-browser-extension/pull/268), [#270](https://github.com/creativecommons/ccsearch-browser-extension/pull/270), [#271](https://github.com/creativecommons/ccsearch-browser-extension/pull/271), [#272](https://github.com/creativecommons/ccsearch-browser-extension/pull/272), [#275](https://github.com/creativecommons/ccsearch-browser-extension/pull/275), [#276](https://github.com/creativecommons/ccsearch-browser-extension/pull/276) |
| 166 | + |
| 167 | +Also, during this period, 5 updates of the extension were pushed to the extension stores. You can check out the [releases page](https://github.com/creativecommons/ccsearch-browser-extension/releases). |
| 168 | + |
| 169 | + |
| 170 | +## Acknowledgements |
| 171 | +I would like to thank [Alden](https://creativecommons.org/author/aldencreativecommons-org/) and [Kriti](https://creativecommons.org/author/kriticreativecommons-org/) for their valuable guidance during this journey. Special thanks to [Fransisco](https://github.com/panchovm), for designing the mockups of the extension, and to the wonderful contributors of CC Vocabulary. |
0 commit comments