Merge branch 'dev' into patch-4

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "editor.formatOnSave": false
+}

components/Card.vue

@@ -1,6 +1,8 @@
 <template lang="pug">
   .card(:class="{ cardActive: isActive }")
-    p.card--title {{resource.title}}
+    .card--meta
+      img.card--favicon(:src="'https://www.google.com/s2/favicons?domain=' + resource.url" aria-hidden="true")
+      p.card--title {{resource.title}}
     p.card--description {{resource.desc}}
     .card--links
       a.card--reference(@click='createCopyUrl(resource)') Copy
@@ -33,6 +35,17 @@ export default {
     box-shadow:inset 0px 0px 0px 3px #08e5ff;
   }
 
+  &--meta {
+    display: flex;
+    align-items: center;
+  }
+
+  &--favicon {
+    height: 16px;
+    width: 16px;
+    margin-right: .5rem;
+  }
+
   &--reference {
     cursor: pointer;
     display: flex;
@@ -65,7 +78,7 @@ export default {
     flex-direction: column;
     font-size: 13px;
     color: white;
-    margin: 0 0 .7rem 0;
+    margin: .7rem 0 .7rem 0;
     line-height: 1.3;
     letter-spacing: .5px;
     max-width: 15rem;

components/TableRow.vue

@@ -1,5 +1,7 @@
 <template lang="pug">
   tr.tableRow(:class="{ rowActive: isActive }")
+    td.tableRow--favicon
+      img(:src="'https://www.google.com/s2/favicons?domain=' + resource.url" aria-hidden="true")
     td.tableRow--title {{resource.title}}
     td.tableRow--description {{resource.desc}}
     td.tableRow--links
@@ -33,7 +35,7 @@ export default {
   transition: 0.2s ease-in-out;
   width: 1fr;
   display: grid;
-  grid-template-columns: minmax(150px, 2fr) 8fr 125px;
+  grid-template-columns: 1.5rem minmax(150px, 2fr) 8fr 125px;
 
   &--title {
     color: white;

resources/design.json

@@ -6,145 +6,151 @@
       "title": "UX/UI Designer Roadmap 2017",
       "desc": "Roadmap to becoming a UI/UX Designer in 2017",
       "url": "https://github.com/togiberlin/ui-ux-designer-roadmap",
-      "tags": []
+      "tags": ["career", "ui", "ux"]
     },
     {
       "title": "Undraw",
       "desc": "Free vector illustrations for your website.",
       "url": "https://undraw.co",
-      "tags": []
+      "tags": ["illustration", "svg", "ui"]
     },
     {
       "title": "Practical UI tips",
       "desc": "7 Tips to boost your UI design.",
       "url": "https://medium.com/refactoring-ui/7-practical-tips-for-cheating-at-design-40c736799886",
-      "tags": []
+      "tags": ["ui", "tips", "tricks"]
     },
     {
       "title": "UI tips",
       "desc": "Design tips by Steve Schoger",
       "url": "https://twitter.com/i/moments/880688233641848832",
-      "tags": []
+      "tags": ["ui", "tips", "tricks"]
     },
     {
       "title": "Colorhunt",
       "desc": "Color Hunt is a free and open platform for color inspiration with thousands of trendy hand-picked color palettes",
       "url": "http://colorhunt.co/",
-      "tags": []
+      "tags": ["color", "palette"]
     },
     {
       "title": "Flatuicolorpicker",
       "desc": "Flatuicolorpicker is a project digging the Flat Color Picker which gives you the perfect colors for flat designs",
       "url": "http://www.flatuicolorpicker.com",
-      "tags": []
+      "tags": ["color", "palette"]
     },
     {
       "title": "awwwards",
       "desc": "The awards for design, creativity and innovation on the Internet. Get your inspiration here or even submit your own website!",
       "url": "https://awwwards.com",
-      "tags": []
+      "tags": ["inspiration", "awards"]
     },
     {
       "title": "One Page Love",
       "desc": "One Page websites, templates and resources",
       "url": "https://onepagelove.com/",
-      "tags": []
+      "tags": ["templates", "inspiration"]
     },
     {
       "title": "CSS Winner",
       "desc": "CSS Winner is a unique global platform awarding and showcasing the best websites and promoting innovative web designers, developers and agencies. We popularize the websites designed elsewhere through CSS Winner, increasing competence and coherence in collation and awarding them.",
       "url": "https://www.csswinner.com/",
-      "tags": []
+      "tags": ["inspiration", "awards"]
     },
     {
       "title": "Httpster",
       "desc": "Httpster is an inspiration resource showcasing totally rocking websites made by people from all over the world.",
       "url": "https://httpster.net/",
-      "tags": []
+      "tags": ["inspiration", "showcase"]
     },
     {
       "title": "siteinspire",
       "desc": "siteInspire is a showcase of the finest web and interactive design.",
       "url": "https://www.siteinspire.com",
-      "tags": []
+      "tags": ["inspiration", "showcase"]
     },
     {
       "title": "ShapeFactory",
       "desc": "Simple design tools for everyone. Simply create a logo, pigment/color scheme, gradient or duetone style.",
       "url": "https://shapefactory.co",
-      "tags": []
+      "tags": ["tools", "housestyle", "generator"]
     },
     {
       "title": "lapa.ninja",
       "desc": "The best resources for learning design.",
       "url": "https://www.lapa.ninja/learn/",
-      "tags": []
+      "tags": ["educational", "tutorial", "learning"]
-    },
-    {
-      "title": "Typography Handbook",
-      "desc": "A concise, referential guide on best web typographic practices.",
-      "url": "http://typographyhandbook.com",
-      "tags": []
     },
     {
       "title": "Hyperpixel.io",
       "desc": "Discover the latest designs for your own inspiration from our curated list of landing pages.",
       "url": "https://hyperpixel.io/",
-      "tags": []
+      "tags": ["inspiration", "showcase"]
     },
     {
       "title": "sharpen.design",
       "desc": "Sharpen is where designers hone their craft - randomly generated design challenges.",
       "url": "https://sharpen.design/",
-      "tags": []
+      "tags": ["challenges", "practice", "generator"]
     },
     {
       "title": "Good UI",
       "desc": "A Good User Interface Is One That's Backed By Reproducible Evidence (A/B Tests)",
       "url": "https://goodui.org/",
-      "tags": []
+      "tags": ["educational", "inspiration"]
     },
     {
       "title": "SVG ON THE WEB",
       "desc": "A Practical Guide",
       "url": "https://svgontheweb.com/",
-      "tags": []
+      "tags": ["educational", "guide", "svg"]
     },
     {
       "title": "UI Gradients",
-      "desc": "Beautiful colour gradients for design and code.",
+      "desc": "Beautiful color gradients for design and code.",
-      "url": "https://uigradients.com/#NoontoDusk",
+      "url": "https://uigradients.com/",
-      "tags": []
+      "tags": ["generator", "inspiration", "color"]
     },
     {
       "title": "evernote.design",
       "desc": "Basically webgems but just for design.",
       "url": "https://evernote.design",
-      "tags": []
+      "tags": ["inspiration", "resources", "collection"]
     },
     {
       "title": "Inclusive Components",
       "desc": "A blog trying to be a pattern library, with a focus on inclusive design. Each post explores a common interface component and comes up with a better, more robust and accessible version of it.",
       "url": "https://inclusive-components.design",
-      "tags": []
+      "tags": ["educational", "inclusive", "accessibility"]
     },
     {
       "title": "UX Collective",
       "desc": "A Medium-based blog, curating articles on modern UX Design practices, conventions, and ideas.",
       "url": "https://uxdesign.cc/",
-      "tags": []
+      "tags": ["reading", "inspiration", "educational"]
     },
     {
       "title": "Codrops",
       "desc": "Codrops is a web design and development blog that publishes articles and tutorials about the latest web trends, techniques and new possibilities.",
       "url": "https://tympanus.net/codrops/",
-      "tags": []
+      "tags": ["reading", "educational"]
     },
     {
-      "title": "Fontjoy",
+      "title": "Hero Patterns",
-      "desc": "Generate font combinations with deep learning.",
+      "desc": "A collection of repeatable SVG background patterns for you to use on your web projects.",
-      "url": "https://fontjoy.com/",
+      "url": "https://www.heropatterns.com/",
-      "tags": []
+      "tags": ["background", "pattern", "svg"]
+    },
+    {
+      "title": "Subtle Patterns",
+      "desc": "A collection of subtle patterns to use in your projects.",
+      "url": "https://www.toptal.com/designers/subtlepatterns/",
+      "tags": ["background", "pattern", "subtle"]
+    },
+    {
+      "title": "Cool Backgrounds",
+      "desc": "descCool Backgrounds offers a selection of beautiful, enticing image backgrounds to add to your blog post, website, or wallpaper.",
+      "url": "https://coolbackgrounds.io/",
+      "tags": ["background", "inspiration"]
     },
     {
       "title": "Can't Unsee",
@@ -163,6 +169,54 @@
       "desc": "GoodBrief is a random generator for design briefs. Choose the type of creative work and the industry, and goodbrief will generate a unique brief.",
       "url": "http://goodbrief.io",
       "tags": ["generator"]
+    },
+    {
+      "title": "Google Fonts",
+      "desc": "Large library of high-quality, free web fonts.",
+      "url": "https://fonts.google.com/",
+      "tags": ["typography", "collection"]
+    },
+    {
+      "title": "Practical Typography",
+      "desc": "A just-deep-enough dive into typography for designers.",
+      "url": "https://practicaltypography.com/",
+      "tags": ["typography", "educational", "reading"]
+    },
+    {
+      "title": "Wakamai Fondue",
+      "desc": "Extensive font file analyzer that tells you everything you need to know about your font.",
+      "url": "https://wakamaifondue.com/",
+      "tags": ["typography", "tools"]
+    },
+    {
+      "title": "Typewolf",
+      "desc": "Discover trending fonts and pairings from around the web.",
+      "url": "https://www.typewolf.com/",
+      "tags": ["typography", "collection", "inspiration"]
+    },
+    {
+      "title": "Typography Handbook",
+      "desc": "A concise, referential guide on best web typographic practices.",
+      "url": "http://typographyhandbook.com",
+      "tags": ["typography", "guide", "best practices", "educational"]
+    },
+    {
+      "title": "Fontjoy",
+      "desc": "Generate font combinations with deep learning.",
+      "url": "https://fontjoy.com/",
+      "tags": ["typography", "tools"]
+    },
+    {
+      "title": "Web Color Data",
+      "desc": "Disover color palettes of popular websites.",
+      "url": "http://webcolourdata.com/",
+      "tags": ["color", "palette", "inspiration"]
+    },
+    {
+      "title": "Adobe Color",
+      "desc": "Create a color palette with this helpful tool of Adobe.",
+      "url": "https://color.adobe.com/",
+      "tags": ["color", "palette"]
     }
   ]
 }

resources/frontend.json

@@ -31,6 +31,24 @@
       "desc": "Basic HTML & CSS for NON-WEB DESIGNERS",
       "url": "http://www.dontfeartheinternet.com/",
       "tags": []
+    },
+    {
+      "title": "The Font Loading Checklist",
+      "desc": "Four important considerations when loading web fonts.",
+      "url": "https://www.zachleat.com/web/font-checklist/",
+      "tags": ["typography", "tips", "best practices"]
+    },
+    {
+      "title": "My Device",
+      "desc": "Inspect the root css rules and viewport measurements of your device, and compare it to other devices.",
+      "url": "https://www.mydevice.io/",
+      "tags": ["viewport", "measurements", "responsive"]
+    },
+    {
+      "title": "Layers of CSS Box Model",
+      "desc": "Understand in which order the elements of the CSS box model are stacked.",
+      "url": "https://hicksdesign.co.uk/boxmodel/",
+      "tags": ["educational", "css"]
     }
   ]
-}
+}

resources/index.js

@@ -16,6 +16,12 @@ import icons from './icons'
 import accessibility from './accessibility'
 import contentCreators from './contentCreators'
 
+const sortByTitle = ({ title: titleA }, { title: titleB }) => {
+  if(titleA < titleB) return -1
+  if(titleA > titleB) return 1
+  return 0
+}
+
 export default [
   css,
   daily,
@@ -33,5 +39,6 @@ export default [
   utility,
   icons,
   accessibility,
-  contentCreators,
+  contentCreators
-]
+].sort(sortByTitle)
+