Merge branch 'dev' into resources/design
This commit is contained in:
3
.vscode/webgems.code-snippets
vendored
3
.vscode/webgems.code-snippets
vendored
@@ -21,7 +21,8 @@
|
||||
"{",
|
||||
" \"title\": \"${1:title}\",",
|
||||
" \"desc\": \"${2:desc}\",",
|
||||
" \"url\": \"${3:url}\"",
|
||||
" \"url\": \"${3:url}\",",
|
||||
" \"tags\": [\"${4:tag}\"]",
|
||||
"},"
|
||||
],
|
||||
"description": "Add a webgem"
|
||||
|
||||
@@ -5,4 +5,5 @@ These are lovely people who have helped this project:
|
||||
* twitter: @lostdesign
|
||||
- [Kevin](https://github.com/S3B4S) :dog:
|
||||
- [jacobparis](https://github.com/jacobparis) : Team Devcord
|
||||
* twitter: @jacobmparis
|
||||
* twitter: @jacobmparis
|
||||
- [JonasPardon](https://github.com/JonasPardon)
|
||||
|
||||
16
README.md
16
README.md
@@ -39,27 +39,29 @@ For any other editor, please use the following schema:
|
||||
```js
|
||||
[
|
||||
{
|
||||
"title": "Category",
|
||||
"slug": "/category",
|
||||
"title": String, // Start with uppercase
|
||||
"slug": String, // All lowercase, eg: "/category"
|
||||
"resources": [
|
||||
{
|
||||
"title": "Awesome resource",
|
||||
"desc": "This awesome resource will make your life much easier.", // 1 - 2 sentences long.
|
||||
"url": "https://url.com"
|
||||
"title": String,
|
||||
"desc": String, // 1 - 2 sentences long
|
||||
"url": String, // See below for notes about correct format of URLs
|
||||
"tags": [String] // Please try to add at least 3 tags
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
If you just want to add a resource to an already existing category, extend the `resources` array with your resources. Please include all the keys enlisted (`title`, `desc`, `url`).
|
||||
In our [resources](resources/) we have an `<category>.json` file for each category, you can add your suggested resource by adding it to the `resources` array in the JSON file using the schema as described above. Please include all the keys enlisted (`title`, `desc`, `url`, `tags`).
|
||||
|
||||
For URLs, please consider the following:
|
||||
- Do not link to language specific pages (e.g. don't link to `<url>.org/en-US/docs`, instead, link to `<url>/docs` if possible).
|
||||
- Do not use `'&'` as it will break the URL referencing.
|
||||
- We won't allow referral links.
|
||||
|
||||
To add a completely new resource, include a new object at the root of the array, the pages are dynamically rendered so you don't have to worry about anything else. Again, include all the enlisted keys, reference to the schema above.
|
||||
To add a completely new resource, add a `<category>.json` file to [resources](resources/). Make sure it follows the sceme as described above.
|
||||
Add it to [resources.index.js](resources/index.js) list of imports and export it aswell, that way Nuxt can take care of rendering the page.
|
||||
|
||||
## Built With
|
||||
|
||||
|
||||
@@ -35,6 +35,12 @@ export default {
|
||||
|
||||
&--reference {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&--target {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&--links {
|
||||
@@ -76,20 +82,20 @@ export default {
|
||||
}
|
||||
&--reference {
|
||||
&::before {
|
||||
position:absolute;
|
||||
align-self: flex-start;
|
||||
padding-right: 0.2rem;
|
||||
height: .9rem;
|
||||
width: .9rem;
|
||||
margin-left: -1.15rem;
|
||||
margin-top: -.1rem;
|
||||
content: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iIzA4ZTVmZiI+PHBhdGggZD0iTSA0IDIgQyAzLjkwNSAyIDMuODE1NjA5NCAyLjAxNDM0MzggMy43MjQ2MDk0IDIuMDI3MzQzOCBDIDMuNDM0NjA5NCAyLjE0MzM0MzggMy4xMzk3MDMxIDIuMjU3MDkzOCAyLjg0NTcwMzEgMi4zNzEwOTM4IEMgMi4zMzQ3MDMxIDIuNzMzMDkzOCAyIDMuMzI2IDIgNCBMIDIgMTggTCA0IDE4IEwgNCA0IEwgMTggNCBMIDE4IDIgTCA0IDIgeiBNIDggNiBDIDYuODk1IDYgNiA2Ljg5NSA2IDggTCA2IDIwIEMgNiAyMS4xMDUgNi44OTUgMjIgOCAyMiBMIDIwIDIyIEMgMjEuMTA1IDIyIDIyIDIxLjEwNSAyMiAyMCBMIDIyIDggQyAyMiA2Ljg5NSAyMS4xMDUgNiAyMCA2IEwgOCA2IHogTSAxNyA4LjAwMTk1MzEgQyAxNy43NjggOC4wMDE5NTMxIDE4LjUzNjA5NCA4LjI5MzkwNjIgMTkuMTIxMDk0IDguODc4OTA2MiBDIDE5LjY4ODA5NCA5LjQ0NDkwNjMgMjAgMTAuMTk5IDIwIDExIEMgMjAgMTEuODAxIDE5LjY4ODA5NCAxMi41NTQwOTQgMTkuMTIxMDk0IDEzLjEyMTA5NCBMIDE3LjIyNDYwOSAxNS4wMTc1NzggTCAxNS44MTA1NDcgMTMuNjAzNTE2IEwgMTcuNzA3MDMxIDExLjcwNzAzMSBDIDE3Ljg5NjAzMSAxMS41MTgwMzEgMTggMTEuMjY3IDE4IDExIEMgMTggMTAuNzMzIDE3Ljg5NjAzMSAxMC40ODE5NjkgMTcuNzA3MDMxIDEwLjI5Mjk2OSBDIDE3LjMxNjAzMSA5LjkwMTk2ODcgMTYuNjgzOTY5IDkuOTAyOTY4OCAxNi4yOTI5NjkgMTAuMjkyOTY5IEwgMTQuMzkwNjI1IDEyLjE5NTMxMiBMIDE1LjgwNDY4OCAxMy42MDkzNzUgTCAxMy44MDA3ODEgMTUuNjEzMjgxIEwgMTUuMjE0ODQ0IDE3LjAyNzM0NCBMIDEzLjExOTE0MSAxOS4xMjEwOTQgQyAxMi41NTQxNDEgMTkuNjg3MDk0IDExLjgwMSAyMCAxMSAyMCBDIDEwLjE5OSAyMCA5LjQ0NDkwNjMgMTkuNjg4MDk0IDguODc4OTA2MiAxOS4xMjEwOTQgQyA4LjMxMjkwNjMgMTguNTU1MDk0IDggMTcuODAxIDggMTcgQyA4IDE2LjE5OSA4LjMxMjkwNjIgMTUuNDQ1OTA2IDguODc4OTA2MiAxNC44Nzg5MDYgTCAxMC45NzI2NTYgMTIuNzg1MTU2IEwgMTIuMzg2NzE5IDE0LjE5OTIxOSBMIDE0LjM2OTE0MSAxMi4yMTY3OTcgTCAxMi45NTUwNzggMTAuODAyNzM0IEwgMTQuODc4OTA2IDguODc4OTA2MiBDIDE1LjQ2MzkwNiA4LjI5MzkwNjIgMTYuMjMyIDguMDAxOTUzMSAxNyA4LjAwMTk1MzEgeiBNIDEyLjM3MzA0NyAxNC4yMTI4OTEgTCAxMC4yOTI5NjkgMTYuMjkyOTY5IEMgMTAuMTAzOTY5IDE2LjQ4MTk2OSAxMCAxNi43MzMgMTAgMTcgQyAxMCAxNy4yNjcgMTAuMTAzOTY5IDE3LjUxODAzMSAxMC4yOTI5NjkgMTcuNzA3MDMxIEMgMTAuNjcxOTY5IDE4LjA4NjAzMSAxMS4zMjgwMzEgMTguMDg1MDMxIDExLjcwNzAzMSAxNy43MDcwMzEgTCAxMy43ODcxMDkgMTUuNjI2OTUzIEwgMTIuMzczMDQ3IDE0LjIxMjg5MSB6IiBmaWxsPSIjMDhlNWZmIi8+PC9zdmc+Cg==');
|
||||
}
|
||||
}
|
||||
&--target {
|
||||
&::before {
|
||||
position:absolute;
|
||||
align-self: flex-start;
|
||||
padding-right: 0.2rem;
|
||||
height: .9rem;
|
||||
width: .9rem;
|
||||
margin-left: -1.15rem;
|
||||
margin-top: -.1rem;
|
||||
content: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iIzA4ZTVmZiI+PHBhdGggc3R5bGU9ImxpbmUtaGVpZ2h0Om5vcm1hbDt0ZXh0LWluZGVudDowO3RleHQtYWxpZ246c3RhcnQ7dGV4dC1kZWNvcmF0aW9uLWxpbmU6bm9uZTt0ZXh0LWRlY29yYXRpb24tc3R5bGU6c29saWQ7dGV4dC1kZWNvcmF0aW9uLWNvbG9yOiMwMDA7dGV4dC10cmFuc2Zvcm06bm9uZTtibG9jay1wcm9ncmVzc2lvbjp0Yjtpc29sYXRpb246YXV0bzttaXgtYmxlbmQtbW9kZTpub3JtYWwiIGQ9Ik0gNSAzIEMgMy45MDY5MzcyIDMgMyAzLjkwNjkzNzIgMyA1IEwgMyAxOSBDIDMgMjAuMDkzMDYzIDMuOTA2OTM3MiAyMSA1IDIxIEwgMTkgMjEgQyAyMC4wOTMwNjMgMjEgMjEgMjAuMDkzMDYzIDIxIDE5IEwgMjEgMTIgTCAxOSAxMiBMIDE5IDE5IEwgNSAxOSBMIDUgNSBMIDEyIDUgTCAxMiAzIEwgNSAzIHogTSAxNCAzIEwgMTQgNSBMIDE3LjU4NTkzOCA1IEwgOC4yOTI5Njg4IDE0LjI5Mjk2OSBMIDkuNzA3MDMxMiAxNS43MDcwMzEgTCAxOSA2LjQxNDA2MjUgTCAxOSAxMCBMIDIxIDEwIEwgMjEgMyBMIDE0IDMgeiIgZm9udC13ZWlnaHQ9IjQwMCIgZm9udC1mYW1pbHk9InNhbnMtc2VyaWYiIHdoaXRlLXNwYWNlPSJub3JtYWwiIG92ZXJmbG93PSJ2aXNpYmxlIiBmaWxsPSIjMDhlNWZmIi8+PC9zdmc+Cg==');
|
||||
}
|
||||
|
||||
@@ -36,6 +36,8 @@ export default {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.sidebar {
|
||||
position: sticky;
|
||||
top: 10px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
font-size: 14px;
|
||||
|
||||
@@ -99,6 +99,35 @@ h1 {
|
||||
grid-gap: 1rem;
|
||||
}
|
||||
|
||||
// Fade in title and cards and rows
|
||||
.fade-title {
|
||||
&-enter {
|
||||
opacity: 0;
|
||||
|
||||
&-to {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&-active {
|
||||
transition: opacity .1s ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fade-card {
|
||||
&-enter {
|
||||
opacity: 0;
|
||||
|
||||
&-to {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&-active {
|
||||
transition: opacity .1s ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 400px) {
|
||||
.layout {
|
||||
|
||||
@@ -1,12 +1,15 @@
|
||||
<template lang="pug">
|
||||
div
|
||||
h1 {{ category.title }}
|
||||
.cards(v-if="areCardsVisible")
|
||||
template(v-for='resource in category.resources' )
|
||||
Card(:resource='resource' :key='resource.title' :createCopyUrl="createCopyUrl" :isActive='activeCard === resource.cleanTitle')
|
||||
table(v-if="!areCardsVisible")
|
||||
template(v-for='resource in category.resources' )
|
||||
TableRow(:resource='resource' :key='resource.title' :createCopyUrl="createCopyUrl" :isActive='activeCard === resource.cleanTitle')
|
||||
transition(name="fade-title" @after-enter="afterEnter")
|
||||
h1(v-if="showTitle") {{ category.title }}
|
||||
transition(name="fade-card")
|
||||
.cards(v-if="areCardsVisible && showCards")
|
||||
template(v-for='resource in category.resources' )
|
||||
Card(:resource='resource' :key='resource.title' :createCopyUrl="createCopyUrl" :isActive='activeCard === resource.cleanTitle')
|
||||
transition(name="fade-card")
|
||||
table(v-if="!areCardsVisible && showCards")
|
||||
template(v-for='resource in category.resources' )
|
||||
TableRow(:resource='resource' :key='resource.title' :createCopyUrl="createCopyUrl" :isActive='activeCard === resource.cleanTitle')
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -20,6 +23,8 @@ export default {
|
||||
categoryRouteTitle: this.$route.params.category,
|
||||
index: '',
|
||||
activeCard: '',
|
||||
showTitle: false,
|
||||
showCards: false,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@@ -33,6 +38,9 @@ export default {
|
||||
created() {
|
||||
this.activeCard = this.$route.query.card || ''
|
||||
},
|
||||
mounted() {
|
||||
this.showTitle = true
|
||||
},
|
||||
methods: {
|
||||
setActiveCard(index) {
|
||||
this.activeCard = index
|
||||
@@ -47,6 +55,9 @@ export default {
|
||||
console.error(e)
|
||||
}
|
||||
},
|
||||
afterEnter() {
|
||||
this.showCards = true
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
25
resources/accessibility.json
Normal file
25
resources/accessibility.json
Normal file
@@ -0,0 +1,25 @@
|
||||
{
|
||||
"title": "Accessibility",
|
||||
"slug": "/accessibility",
|
||||
"resources": [
|
||||
{
|
||||
"title": "Userway",
|
||||
"desc": "Provides accessibility plugins that work without refactoring your website's existing code and will increase compliance with WCAG 2.1 , ATAG 2.0 , ADA ,& Section 508 requirements.",
|
||||
"url": "https://userway.org/",
|
||||
"tags": []
|
||||
},
|
||||
{
|
||||
"title": "The A11Y Checklist",
|
||||
"desc": "This checklist uses the The Web Content Accessibility Guidelines (WCAG) as a reference point. The WCAG is a shared standard for web content accessibility for individuals, organizations, and governments.",
|
||||
"url": "https://a11yproject.com/checklist/",
|
||||
"tags": []
|
||||
},
|
||||
{
|
||||
"title": "HTML_CodeSniffer",
|
||||
"desc": "A client-side script that checks HTML source code and detects violations of a defined coding standard.",
|
||||
"url": "http://squizlabs.github.io/HTML_CodeSniffer/",
|
||||
"tags": []
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -6,132 +6,138 @@
|
||||
"title": "CSS Grid Generator",
|
||||
"desc": "Visually create your css grid and export the code.",
|
||||
"url": "https://cssgrid-generator.netlify.com/",
|
||||
"tags": []
|
||||
"tags": ["generator", "grid", "layout", "visual tool"]
|
||||
},
|
||||
{
|
||||
"title": "Keyframes Editor",
|
||||
"desc": "An insanely simple way to create CSS animations",
|
||||
"url": "https://keyframes.app/editor/",
|
||||
"tags": []
|
||||
"tags": ["generator", "animation", "visual tool"]
|
||||
},
|
||||
{
|
||||
"title": "Flexbox Froggy",
|
||||
"desc": "A game to learn Flexbox",
|
||||
"url": "https://flexboxfroggy.com",
|
||||
"tags": []
|
||||
"tags": ["educational", "beginner"]
|
||||
},
|
||||
{
|
||||
"title": "Flexbox Zombies",
|
||||
"desc": "A course to learn Flexbox",
|
||||
"url": "https://mastery.games/p/flexbox-zombies",
|
||||
"tags": []
|
||||
"tags": ["educational", "beginner"]
|
||||
},
|
||||
{
|
||||
"title": "CSS Gridgarden",
|
||||
"desc": "A game to learn Grid",
|
||||
"url": "https://cssgridgarden.com",
|
||||
"tags": []
|
||||
"tags": ["educational", "beginner"]
|
||||
},
|
||||
{
|
||||
"title": "30 Seconds of Code",
|
||||
"desc": "A curated collection of useful CSS snippets you can understand in 30 seconds or less.",
|
||||
"url": "https://30-seconds.github.io/30-seconds-of-css/",
|
||||
"tags": []
|
||||
"tags": ["tips", "tricks", "collection"]
|
||||
},
|
||||
{
|
||||
"title": "Grid by example",
|
||||
"desc": "Everything you need to learn CSS Grid Layout",
|
||||
"url": "https://gridbyexample.com/learn/",
|
||||
"tags": []
|
||||
"tags": ["example", "showcase", "educational"]
|
||||
},
|
||||
{
|
||||
"title": "BEM naming convention",
|
||||
"desc": "Block Element Modifier is a methodology that helps you to create reusable components and code sharing in front-end development",
|
||||
"url": "https://getbem.com/",
|
||||
"tags": []
|
||||
"tags": ["convention", "naming", "structure"]
|
||||
},
|
||||
{
|
||||
"title": "CSS Triggers",
|
||||
"desc": "Overview of css attributes which trigger either layout, paint or composite. Good to know if you want to learn more about css performance.",
|
||||
"url": "https://csstriggers.com/",
|
||||
"tags": []
|
||||
"tags": ["performance", "rendering"]
|
||||
},
|
||||
{
|
||||
"title": "A complete guide to flexbox",
|
||||
"desc": "A comprehensive guide to flexbox, focusing on all the different possible properties for the parent element (the flex container).",
|
||||
"url": "https://css-tricks.com/snippets/css/a-guide-to-flexbox/",
|
||||
"tags": []
|
||||
"tags": ["guide", "educational"]
|
||||
},
|
||||
{
|
||||
"title": "Learn CSS layout",
|
||||
"desc": "This site teaches the CSS fundamentals that are used in any website's layout (Unfortunately nothing abour display:grid yet).",
|
||||
"desc": "This site teaches the CSS fundamentals that are used in any website's layout.",
|
||||
"url": "http://learnlayout.com",
|
||||
"tags": []
|
||||
"tags": ["layout", "educational", "beginner"]
|
||||
},
|
||||
{
|
||||
"title": "CSSmatic - box shadow generator",
|
||||
"desc": "The ultimate box shadow generator",
|
||||
"url": "https://www.cssmatic.com/box-shadow",
|
||||
"tags": []
|
||||
"tags": ["generator", "visual tool"]
|
||||
},
|
||||
{
|
||||
"title": "AirBnB CSS / Sass Styleguide",
|
||||
"desc": "A mostly reasonable approach to css and sass.",
|
||||
"url": "https://github.com/airbnb/css",
|
||||
"tags": []
|
||||
"tags": ["structure", "styleguide", "convention"]
|
||||
},
|
||||
{
|
||||
"title": "Animista",
|
||||
"desc": "CSS animations on demand.",
|
||||
"url": "http://animista.net/",
|
||||
"tags": []
|
||||
"tags": ["animation", "collection", "generator", "visual tool"]
|
||||
},
|
||||
{
|
||||
"title": "Use CSS Grids the right way",
|
||||
"desc": "CSS Grid is robust, flexible, and a refreshing paradigm shift from other CSS layout systems. While these are selling points for Grid, they also make it hard to learn.",
|
||||
"url": "https://vgpena.github.io/using-css-grid-the-right-way/",
|
||||
"tags": []
|
||||
"tags": ["guide", "educational"]
|
||||
},
|
||||
{
|
||||
"title": "CSS Protips",
|
||||
"desc": "A collection of tips to help take your CSS skills pro.",
|
||||
"url": "https://github.com/AllThingsSmitty/css-protips#readme",
|
||||
"tags": []
|
||||
"tags": ["collection", "tips", "tricks"]
|
||||
},
|
||||
{
|
||||
"title": "Flexbox Defense",
|
||||
"desc": "Your job is to stop the incoming enemies from getting past your defenses. Unlike other tower defense games, you must position your towers using CSS!",
|
||||
"url": "http://www.flexboxdefense.com/",
|
||||
"tags": []
|
||||
"tags": ["educational", "beginner"]
|
||||
},
|
||||
{
|
||||
"title": "CSS Diner",
|
||||
"desc": "Learn CSS selectors while playing a game.",
|
||||
"url": "https://flukeout.github.io/",
|
||||
"tags": []
|
||||
"tags": ["educational", "beginner"]
|
||||
},
|
||||
{
|
||||
"title": "CSS Animation",
|
||||
"desc": "CSS animation articles, tips and tutorials. Level Up Your CSS Animation Skills.",
|
||||
"url": "https://cssanimation.rocks/",
|
||||
"tags": []
|
||||
"tags": ["collection", "guide", "educational"]
|
||||
},
|
||||
{
|
||||
"title": "JustREM",
|
||||
"desc": "Easily and quickly convert pixel values into rem values.",
|
||||
"url": "https://justrem.xyz/",
|
||||
"tags": []
|
||||
"tags": ["units"]
|
||||
},
|
||||
{
|
||||
"title": "(Re)learn css layout",
|
||||
"desc": "If you find yourself wrestling with CSS layout, it’s likely you’re making decisions for browsers they should be making themselves. Through a series of simple, composable layouts, Every Layout will teach you how to better harness the built-in algorithms that power browsers and CSS.",
|
||||
"url": "https://every-layout.dev/",
|
||||
"tags": []
|
||||
"tags": ["educational", "guide"]
|
||||
},
|
||||
{
|
||||
"title": "Interactive CSS box-model view",
|
||||
"desc": "Learn CSS box-model by interractively changing the values.",
|
||||
"url": "https://codepen.io/carolineartz/full/ogVXZj",
|
||||
"tags": ["visual tool", "educational", "beginner"]
|
||||
},
|
||||
{
|
||||
"title": "Bennett Feely clip-path maker",
|
||||
"desc": "This CSS clip-path maker helps you understand the clip-path property and all the cool things you can do with it.",
|
||||
"url": "https://bennettfeely.com/clippy/",
|
||||
"tags": []
|
||||
}
|
||||
]
|
||||
|
||||
@@ -6,43 +6,43 @@
|
||||
"title": "dev.to",
|
||||
"desc": "Where programmers share ideas and help each other grow. It is an online community for sharing and discovering great ideas, having debates, and making friends.",
|
||||
"url": "https://www.dev.to",
|
||||
"tags": []
|
||||
"tags": ["community", "reading"]
|
||||
},
|
||||
{
|
||||
"title": "CSS Tricks",
|
||||
"desc": "Daily webdev related articles, snippets and guides since 2007",
|
||||
"url": "https://css-tricks.com/",
|
||||
"tags": []
|
||||
"tags": ["reading", "educational", "design"]
|
||||
},
|
||||
{
|
||||
"title": "Smashing magazine",
|
||||
"desc": "Founded in September 2006 in Germany, Smashing Magazine delivers reliable, useful, but most importantly practical articles to web designers and developers. ",
|
||||
"url": "https://www.smashingmagazine.com/",
|
||||
"tags": []
|
||||
"tags": ["reading", "educational", "design", "development"]
|
||||
},
|
||||
{
|
||||
"title": "Hackernews",
|
||||
"desc": "Hacker News is a social news website focusing on computer science and entrepreneurship.",
|
||||
"url": "https://news.ycombinator.com/",
|
||||
"tags": []
|
||||
"tags": ["forum", "development", "reading"]
|
||||
},
|
||||
{
|
||||
"title": "Producthunt",
|
||||
"desc": "Check popular new products out and get inspired, maybe even post yours?",
|
||||
"url": "https://www.producthunt.com/",
|
||||
"tags": []
|
||||
"tags": ["discover", "explore"]
|
||||
},
|
||||
{
|
||||
"title": "dailydevlinks",
|
||||
"desc": "Fresh, daily links so you can keep up-to-date with everything developer ",
|
||||
"url": "https://dailydevlinks.com/",
|
||||
"tags": []
|
||||
"tags": ["development", "reading"]
|
||||
},
|
||||
{
|
||||
"title": "Sidebar.io",
|
||||
"desc": "The five best design links, every day.",
|
||||
"url": "https://sidebar.io/",
|
||||
"tags": []
|
||||
"tags": ["design", "reading"]
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -157,6 +157,30 @@
|
||||
"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": "Fontjoy",
|
||||
"desc": "Generate font combinations with deep learning.",
|
||||
"url": "https://fontjoy.com/",
|
||||
"tags": []
|
||||
},
|
||||
{
|
||||
"title": "Can't Unsee",
|
||||
"desc": "A game where your attention to details earns you a lot of coins. WARNING: Once you see the difference between the images, you won't be able to unsee it!",
|
||||
"url": "https://cantunsee.space/",
|
||||
"tags": []
|
||||
},
|
||||
{
|
||||
"title": "Image Color Picker",
|
||||
"desc": "Image color picker and palette generator.",
|
||||
"url": "https://image-color.com",
|
||||
"tags": ["generator"]
|
||||
},
|
||||
{
|
||||
"title": "GoodBrief",
|
||||
"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"]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
@@ -56,17 +56,17 @@
|
||||
"url": "https://www.codewars.com/",
|
||||
"tags": []
|
||||
},
|
||||
{
|
||||
"title": "Exercism",
|
||||
"desc": "Learn to code in a variety of languages. Complete programming challenges, view other's solutions, and get community feedback on your code.",
|
||||
"url": "https://exercism.io",
|
||||
"tags": []
|
||||
},
|
||||
{
|
||||
"title": "Learn X in Y min",
|
||||
"desc": "Take a whirlwind tour of your next favorite language. Community-driven!",
|
||||
"url": "https://learnxinyminutes.com/",
|
||||
"tags": []
|
||||
},
|
||||
{
|
||||
"title": "The A11Y Checklist",
|
||||
"desc": "This checklist uses the The Web Content Accessibility Guidelines (WCAG) as a reference point. The WCAG is a shared standard for web content accessibility for individuals, organizations, and governments.",
|
||||
"url": "https://a11yproject.com/checklist/",
|
||||
"tags": []
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
30
resources/icons.json
Normal file
30
resources/icons.json
Normal file
@@ -0,0 +1,30 @@
|
||||
{
|
||||
"title": "Icons",
|
||||
"slug": "/icons",
|
||||
"resources": [
|
||||
{
|
||||
"title": "Font awesome",
|
||||
"desc": "CSS and LESS based font and icon toolkit.",
|
||||
"url": "https://fontawesome.com/",
|
||||
"tags": []
|
||||
},
|
||||
{
|
||||
"title": "Icomoon",
|
||||
"desc": "IcoMoon provides a package of vector icons, along with a free HTML5 app for making custom icon fonts or SVG sprites.",
|
||||
"url": "https://icomoon.io/",
|
||||
"tags": []
|
||||
},
|
||||
{
|
||||
"title": "Icons8",
|
||||
"desc": "Get free icons designed to combine perfectly and fit into the style of your design.",
|
||||
"url": "https://icons8.com/",
|
||||
"tags": []
|
||||
},
|
||||
{
|
||||
"title": "Material Icons",
|
||||
"desc": "Material icons are delightful, beautifully crafted symbols for common actions and items. Download on desktop to use them in your digital products for Android, iOS, and web.",
|
||||
"url": "https://material.io/resources/icons",
|
||||
"tags": []
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -12,6 +12,14 @@ import python from './python'
|
||||
import ruby from './ruby'
|
||||
import server from './server'
|
||||
import utility from './utility'
|
||||
import icons from './icons'
|
||||
import accessibility from './accessibility'
|
||||
|
||||
const sortByTitle = ({ title: titleA }, { title: titleB }) => {
|
||||
if(titleA < titleB) return -1
|
||||
if(titleA > titleB) return 1
|
||||
return 0
|
||||
}
|
||||
|
||||
export default [
|
||||
css,
|
||||
@@ -28,4 +36,6 @@ export default [
|
||||
ruby,
|
||||
server,
|
||||
utility,
|
||||
]
|
||||
icons,
|
||||
accessibility,
|
||||
].sort(sortByTitle)
|
||||
|
||||
@@ -163,6 +163,12 @@
|
||||
"desc": "Let's Encrypt is a free, automated, and open certificate authority brought to you by the non-profit Internet Security Research Group (ISRG).",
|
||||
"url": "https://letsencrypt.org/",
|
||||
"tags": []
|
||||
},
|
||||
{
|
||||
"title": "Mailhog",
|
||||
"desc": "Web and API based SMTP testing.",
|
||||
"url": "https://github.com/mailhog/MailHog",
|
||||
"tags": []
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user