gilles/webgems
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #129 from webgems/dev

Browse Source 
🔀 dev into master
This commit is contained in:
wellá
2019-09-30 16:49:41 +02:00
committed by GitHub
parent f2600fb9bf 4d7a2eb776
commit 33d1f87b65
33 changed files with 1706 additions and 1208 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
CONTRIBUTORS.md
View File

@@ -3,4 +3,6 @@ These are lovely people who have helped this project:
- [lostdesign](https://github.com/lostdesign) : Active Contributor and currently also the main contributor.
* twitter: @lostdesign
- [Kevin](https://github.com/S3B4S) :dog:
- [Kevin](https://github.com/S3B4S) :dog:
- [jacobparis](https://github.com/jacobparis) : Team Devcord
* twitter: @jacobmparis

51
components/Card.vue
View File

@@ -1,53 +1,16 @@
<template lang="pug">
.card(:class="active")
p.card--title {{title}}
p.card--description {{desc}}
.card(:class="{ cardActive: isActive }")
p.card--title {{resource.title}}
p.card--description {{resource.desc}}
.card--links
a.card--reference(@click='createCopyUrl') Copy
a.card--reference(@click='createCopyUrl(resource)') Copy
br
a.card--target(:href="url" :target='title' rel='noreferrer') Open
a.card--target(:href="resource.url" :target='resource.title' rel='noreferrer') Open
</template>
<script>
export default {
props: ['title', 'desc', 'url'],
data(){
return {
active:''
}
},
methods: {
async createCopyUrl() {
try {
let currentPath = this.$router.history.current.path
let reference = this.createReferenceTag(this.$props.title)
await this.$copyText(`https://webgems.io${currentPath}?card=${reference}`)
this.$router.push(`${currentPath}?card=${reference}`)
} catch (e) {
console.error(e);
}
},
createReferenceTag(tag){
return tag.replace(/ /g, '').toLowerCase()
},
checkReference(){
const query = this.$route.query.card
const title = this.createReferenceTag(this.$props.title)
this.active = title === query
? 'card--active'
: ''
},
},
mounted() {
this.checkReference();
},
watch: {
'$route': function() {
this.checkReference();
}
}
props: ['resource', 'isActive', 'createCopyUrl'],
}
</script>
@@ -62,7 +25,7 @@ export default {
flex-direction: column;
position: relative;
&--active {
&Active {
box-shadow:inset 0px 0px 0px 3px #08e5ff;
}

43
components/Sidebar.vue
View File

@@ -2,22 +2,36 @@
aside.nav
.sidebar
template(v-for='category in categories')
//- nuxt-link(:to='$i18n.path(category.slug)') {{ category.title }}
nuxt-link(:to='category.slug') {{ category.title }}
div(class="toggleWrapper" @click="toggleCardsVisible")
div(class="viewToggle" :class="{active: areCardsVisible}") Cards
div(class="viewToggle" :class="{active: !areCardsVisible}") Table
</template>
<script>
import store from '../store.json'
import { mapMutations } from "vuex";
export default {
data() {
return {
categories: [{ slug: '', title: '' }],
categories: [{ slug: "", title: "" }]
};
},
computed: {
areCardsVisible() {
return this.$store.getters['Sidebar/areCardsVisible']
}
},
created() {
this.categories = store.map(({ title, slug }) => ({ title, slug }))
this.categories = this.$store.getters['data/resources'].map(({ title, slug }) => ({ title, slug }))
},
methods: {
...mapMutations({
toggleCardsVisible: "Sidebar/toggleCardsVisible"
})
}
}
};
</script>
<style lang="scss" scoped>
@@ -30,6 +44,27 @@ export default {
padding: 0.5rem 1rem 0.5rem 1rem;
font-weight: 600;
}
div {
cursor: pointer;
}
.toggleWrapper {
display: grid;
grid-template-columns: 1fr 1fr;
width: min-content;
border: 1px;
border-color: #08e5ff;
border-style: solid;
border-radius: 0.25rem;
overflow: hidden;
}
.viewToggle {
padding: 0 0.2rem;
color: #008190;
}
.active {
background-color: #08e5ff;
color: #232331;
}
}
@media (max-width: 400px) {

91
components/TableRow.vue Normal file
View File

@@ -0,0 +1,91 @@
<template lang="pug">
tr.tableRow(:class="{ rowActive: isActive }")
td.tableRow--title {{resource.title}}
td.tableRow--description {{resource.desc}}
td.tableRow--links
tr
td
a.tableRow--reference(@click='createCopyUrl(resource)') Copy
td
a.tableRow--target(:href="resource.url" :target='resource.title' rel='noreferrer') Open
</template>
<script>
export default {
props: ['resource', 'isActive', 'createCopyUrl'],
};
</script>
<style lang="scss" scoped>
.rowActive {
box-shadow:inset 0px 0px 0px 3px #08e5ff;
}
.tableRow {
background: #2d3748;
margin-bottom: 1rem;
padding: 0.5rem;
border-radius: .3rem;
transition: 0.2s ease-in-out;
width: 1fr;
display: grid;
grid-template-columns: minmax(150px, 2fr) 8fr 125px;
&--title {
color: white;
font-weight: 900;
width: 80%;
}
&--description {
line-height: 1.3;
font-size: 13px;
color: white;
width: 80%;
}
&--links {
cursor: pointer;
tr {
width: 100%;
display: flex;
justify-content: space-between;
}
img {
width: 1rem;
margin-left: 0.5rem;
}
&:hover::before {
opacity: 0.5;
}
}
&--reference {
font-size: 12px;
&::before {
position: absolute;
height: 0.95rem;
width: 0.95rem;
margin-left: -1.15rem;
margin-top: 0.3rem;
content: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iIzA4ZTVmZiI+PHBhdGggZD0iTSA0IDIgQyAzLjkwNSAyIDMuODE1NjA5NCAyLjAxNDM0MzggMy43MjQ2MDk0IDIuMDI3MzQzOCBDIDMuNDM0NjA5NCAyLjE0MzM0MzggMy4xMzk3MDMxIDIuMjU3MDkzOCAyLjg0NTcwMzEgMi4zNzEwOTM4IEMgMi4zMzQ3MDMxIDIuNzMzMDkzOCAyIDMuMzI2IDIgNCBMIDIgMTggTCA0IDE4IEwgNCA0IEwgMTggNCBMIDE4IDIgTCA0IDIgeiBNIDggNiBDIDYuODk1IDYgNiA2Ljg5NSA2IDggTCA2IDIwIEMgNiAyMS4xMDUgNi44OTUgMjIgOCAyMiBMIDIwIDIyIEMgMjEuMTA1IDIyIDIyIDIxLjEwNSAyMiAyMCBMIDIyIDggQyAyMiA2Ljg5NSAyMS4xMDUgNiAyMCA2IEwgOCA2IHogTSAxNyA4LjAwMTk1MzEgQyAxNy43NjggOC4wMDE5NTMxIDE4LjUzNjA5NCA4LjI5MzkwNjIgMTkuMTIxMDk0IDguODc4OTA2MiBDIDE5LjY4ODA5NCA5LjQ0NDkwNjMgMjAgMTAuMTk5IDIwIDExIEMgMjAgMTEuODAxIDE5LjY4ODA5NCAxMi41NTQwOTQgMTkuMTIxMDk0IDEzLjEyMTA5NCBMIDE3LjIyNDYwOSAxNS4wMTc1NzggTCAxNS44MTA1NDcgMTMuNjAzNTE2IEwgMTcuNzA3MDMxIDExLjcwNzAzMSBDIDE3Ljg5NjAzMSAxMS41MTgwMzEgMTggMTEuMjY3IDE4IDExIEMgMTggMTAuNzMzIDE3Ljg5NjAzMSAxMC40ODE5NjkgMTcuNzA3MDMxIDEwLjI5Mjk2OSBDIDE3LjMxNjAzMSA5LjkwMTk2ODcgMTYuNjgzOTY5IDkuOTAyOTY4OCAxNi4yOTI5NjkgMTAuMjkyOTY5IEwgMTQuMzkwNjI1IDEyLjE5NTMxMiBMIDE1LjgwNDY4OCAxMy42MDkzNzUgTCAxMy44MDA3ODEgMTUuNjEzMjgxIEwgMTUuMjE0ODQ0IDE3LjAyNzM0NCBMIDEzLjExOTE0MSAxOS4xMjEwOTQgQyAxMi41NTQxNDEgMTkuNjg3MDk0IDExLjgwMSAyMCAxMSAyMCBDIDEwLjE5OSAyMCA5LjQ0NDkwNjMgMTkuNjg4MDk0IDguODc4OTA2MiAxOS4xMjEwOTQgQyA4LjMxMjkwNjMgMTguNTU1MDk0IDggMTcuODAxIDggMTcgQyA4IDE2LjE5OSA4LjMxMjkwNjIgMTUuNDQ1OTA2IDguODc4OTA2MiAxNC44Nzg5MDYgTCAxMC45NzI2NTYgMTIuNzg1MTU2IEwgMTIuMzg2NzE5IDE0LjE5OTIxOSBMIDE0LjM2OTE0MSAxMi4yMTY3OTcgTCAxMi45NTUwNzggMTAuODAyNzM0IEwgMTQuODc4OTA2IDguODc4OTA2MiBDIDE1LjQ2MzkwNiA4LjI5MzkwNjIgMTYuMjMyIDguMDAxOTUzMSAxNyA4LjAwMTk1MzEgeiBNIDEyLjM3MzA0NyAxNC4yMTI4OTEgTCAxMC4yOTI5NjkgMTYuMjkyOTY5IEMgMTAuMTAzOTY5IDE2LjQ4MTk2OSAxMCAxNi43MzMgMTAgMTcgQyAxMCAxNy4yNjcgMTAuMTAzOTY5IDE3LjUxODAzMSAxMC4yOTI5NjkgMTcuNzA3MDMxIEMgMTAuNjcxOTY5IDE4LjA4NjAzMSAxMS4zMjgwMzEgMTguMDg1MDMxIDExLjcwNzAzMSAxNy43MDcwMzEgTCAxMy43ODcxMDkgMTUuNjI2OTUzIEwgMTIuMzczMDQ3IDE0LjIxMjg5MSB6IiBmaWxsPSIjMDhlNWZmIi8+PC9zdmc+Cg==");
}
}
&--target {
font-size: 12px;
&::before {
position: absolute;
height: 0.95rem;
width: 0.95rem;
margin-left: -1.15rem;
margin-top: 0.3rem;
content: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iIzA4ZTVmZiI+PHBhdGggc3R5bGU9ImxpbmUtaGVpZ2h0Om5vcm1hbDt0ZXh0LWluZGVudDowO3RleHQtYWxpZ246c3RhcnQ7dGV4dC1kZWNvcmF0aW9uLWxpbmU6bm9uZTt0ZXh0LWRlY29yYXRpb24tc3R5bGU6c29saWQ7dGV4dC1kZWNvcmF0aW9uLWNvbG9yOiMwMDA7dGV4dC10cmFuc2Zvcm06bm9uZTtibG9jay1wcm9ncmVzc2lvbjp0Yjtpc29sYXRpb246YXV0bzttaXgtYmxlbmQtbW9kZTpub3JtYWwiIGQ9Ik0gNSAzIEMgMy45MDY5MzcyIDMgMyAzLjkwNjkzNzIgMyA1IEwgMyAxOSBDIDMgMjAuMDkzMDYzIDMuOTA2OTM3MiAyMSA1IDIxIEwgMTkgMjEgQyAyMC4wOTMwNjMgMjEgMjEgMjAuMDkzMDYzIDIxIDE5IEwgMjEgMTIgTCAxOSAxMiBMIDE5IDE5IEwgNSAxOSBMIDUgNSBMIDEyIDUgTCAxMiAzIEwgNSAzIHogTSAxNCAzIEwgMTQgNSBMIDE3LjU4NTkzOCA1IEwgOC4yOTI5Njg4IDE0LjI5Mjk2OSBMIDkuNzA3MDMxMiAxNS43MDcwMzEgTCAxOSA2LjQxNDA2MjUgTCAxOSAxMCBMIDIxIDEwIEwgMjEgMyBMIDE0IDMgeiIgZm9udC13ZWlnaHQ9IjQwMCIgZm9udC1mYW1pbHk9InNhbnMtc2VyaWYiIHdoaXRlLXNwYWNlPSJub3JtYWwiIG92ZXJmbG93PSJ2aXNpYmxlIiBmaWxsPSIjMDhlNWZmIi8+PC9zdmc+Cg==");
}
}
}
</style>

5
locales/de.json Normal file
View File

@@ -0,0 +1,5 @@
{
"general": {
"siteTitle": "Was ist 💎 webgems?"
}
}

5
locales/en.json Normal file
View File

@@ -0,0 +1,5 @@
{
"general": {
"siteTitle": "What is 💎 webgems?"
}
}

5
locales/fr.json Normal file
View File

@@ -0,0 +1,5 @@
{
"general": {
"siteTitle": "What is 💎 webgems?"
}
}

7
nuxt.config.js
View File

@@ -1,5 +1,5 @@
import pkg from './package'
import store from './store.json'
import resources from './resources/'
export default {
/*
@@ -29,7 +29,7 @@ export default {
** Generate dynamic routes
*/
generate: {
routes: store.map(category => category.slug)
routes: resources.map(category => category.slug)
},
/*
@@ -37,6 +37,9 @@ export default {
*/
loading: { color: '#fff' },
plugins: [
'~/plugins/i18n.js'
],
/*
** Nuxt.js modules
*/

60
package-lock.json generated
View File

@@ -5764,9 +5764,9 @@
}
},
"lodash": {
"version": "4.17.14",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.14.tgz",
"integrity": "sha512-mmKYbW3GLuJeX+iGP+Y7Gp1AiGHGbXHCOh/jZmrawMmsE7MS4znI3RL2FsjbqOyMayHInjOeykW7PEajUk1/xw=="
"version": "4.17.15",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
"integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A=="
},
"lodash._reinterpolate": {
"version": "3.0.0",
@@ -6064,9 +6064,9 @@
}
},
"mixin-deep": {
"version": "1.3.1",
"resolved": "https://registry.npmjs.org/mixin-deep/-/mixin-deep-1.3.1.tgz",
"integrity": "sha512-8ZItLHeEgaqEvd5lYBXfm4EZSFCX29Jb9K+lAHhDKzReKBQKj3R+7NOF6tjqYi9t4oI8VUfaWITJQm86wnXGNQ==",
"version": "1.3.2",
"resolved": "https://registry.npmjs.org/mixin-deep/-/mixin-deep-1.3.2.tgz",
"integrity": "sha512-WRoDn//mXBiJ1H40rqa3vH0toePwSsGb45iInWlTySa+Uu4k3tYUSxa2v1KqAiLtvlrSzaExqS1gtk96A9zvEA==",
"requires": {
"for-in": "^1.0.2",
"is-extendable": "^1.0.1"
@@ -8991,9 +8991,9 @@
"dev": true
},
"set-value": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/set-value/-/set-value-2.0.0.tgz",
"integrity": "sha512-hw0yxk9GT/Hr5yJEYnHNKYXkIA8mVJgd9ditYZCe16ZczcaELYYcfvaXesNACk2O8O0nTiPQcQhGUQj8JLzeeg==",
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/set-value/-/set-value-2.0.1.tgz",
"integrity": "sha512-JxHc1weCN68wRY0fhCoXpyK55m/XPHafOmK4UWD7m2CI14GMcFypt4w/0+NV5f/ZMby2F6S2wwA7fgynh9gWSw==",
"requires": {
"extend-shallow": "^2.0.1",
"is-extendable": "^0.1.1",
@@ -9619,13 +9619,13 @@
"integrity": "sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA=="
},
"tar": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/tar/-/tar-2.2.1.tgz",
"integrity": "sha1-jk0qJWwOIYXGsYrWlK7JaLg8sdE=",
"version": "2.2.2",
"resolved": "https://registry.npmjs.org/tar/-/tar-2.2.2.tgz",
"integrity": "sha512-FCEhQ/4rE1zYv9rYXJw/msRqsnmlje5jHP6huWeBZ704jUTy02c5AZyWujpMR1ax6mVw9NyJMfuK2CMDWVIfgA==",
"dev": true,
"requires": {
"block-stream": "*",
"fstream": "^1.0.2",
"fstream": "^1.0.12",
"inherits": "2"
}
},
@@ -9982,35 +9982,14 @@
"integrity": "sha512-L5RAqCfXqAwR3RriF8pM0lU0w4Ryf/GgzONwi6KnL1taJQa7x1TCxdJnILX59WIGOwR57IVxn7Nej0fz1Ny6fw=="
},
"union-value": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.0.tgz",
"integrity": "sha1-XHHDTLW61dzr4+oM0IIHulqhrqQ=",
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.1.tgz",
"integrity": "sha512-tJfXmxMeWYnczCVs7XAEvIV7ieppALdyepWMkHkwciRpZraG/xwT+s2JN8+pr1+8jCRf80FFzvr+MpQeeoF4Xg==",
"requires": {
"arr-union": "^3.1.0",
"get-value": "^2.0.6",
"is-extendable": "^0.1.1",
"set-value": "^0.4.3"
},
"dependencies": {
"extend-shallow": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
"integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
"requires": {
"is-extendable": "^0.1.0"
}
},
"set-value": {
"version": "0.4.3",
"resolved": "https://registry.npmjs.org/set-value/-/set-value-0.4.3.tgz",
"integrity": "sha1-fbCPnT0i3H945Trzw79GZuzfzPE=",
"requires": {
"extend-shallow": "^2.0.1",
"is-extendable": "^0.1.1",
"is-plain-object": "^2.0.1",
"to-object-path": "^0.3.0"
}
}
"set-value": "^2.0.1"
}
},
"uniq": {
@@ -10364,6 +10343,11 @@
"resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.3.tgz",
"integrity": "sha512-KmvZVtmM26BQOMK1rwUZsrqxEGeKiYSZGA7SNWE6uExx8UX/cj9hq2MRV/wWC3Cq6AoeDGk57rL9YMFRel/q+g=="
},
"vue-i18n": {
"version": "8.11.2",
"resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-8.11.2.tgz",
"integrity": "sha512-STcpmxqBrG77SyWi7e0Yn/B3DjKR6mSDwYS4F/V7zoi+e/+CPbVb2TaBqFwnrkoDcPmRfjM7nTwsiRQQOGdifw=="
},
"vue-loader": {
"version": "15.7.0",
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.7.0.tgz",

3
package.json
View File

@@ -13,7 +13,8 @@
"dependencies": {
"cross-env": "^5.2.0",
"nuxt": "^2.4.0",
"nuxt-clipboard2": "^0.2.1"
"nuxt-clipboard2": "^0.2.1",
"vue-i18n": "^8.11.2"
},
"devDependencies": {
"autoprefixer": "^8.6.4",

56
pages/_category.vue
View File

@@ -1,27 +1,59 @@
<template lang="pug">
div
h1 {{ category.title }}
.cards
template(v-for='resource in category.resources')
Card(:title='resource.title' :desc='resource.desc' :url='resource.url')
.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')
</template>
<script>
import store from '../store.json'
import Card from '../components/Card'
import Card from "../components/Card";
import TableRow from "../components/TableRow";
export default {
data () {
data() {
return {
categoryRouteTitle: this.$route.params.category,
categories: store,
}
index: '',
activeCard: '',
};
},
computed: {
category() {
return this.categories.find(category => category.title.toLowerCase() === this.categoryRouteTitle.toLowerCase())
areCardsVisible() {
return this.$store.getters['Sidebar/areCardsVisible']
},
category() {
return this.$store.getters['data/sortByTitle'](this.categoryRouteTitle)
},
},
methods: {
setActiveCard(index) {
this.activeCard = index
},
async createCopyUrl(resource) {
try {
const { path, cleanTitle } = resource
await this.$copyText(`https://webgems.io${path}`)
this.setActiveCard(cleanTitle)
this.$router.push(path)
} catch (e) {
console.error(e);
}
}
},
components: { Card },
}
created() {
this.activeCard = this.$route.query.card || ''
},
components: { Card, TableRow }
};
</script>
<style lang="scss" scoped>
table {
width: 100%;
table-layout: fixed;
}
</style>

1
pages/index.vue
View File

@@ -7,6 +7,7 @@
p Therefore we created this project to have the most common and best resources for beginners and veterans in one place — kind of like a bookmarks list for devs and designers, containing only the best gems out there.
p If you want to add your gem, go ahead and open a pull request on GitHub (click on that octocat at the top right corner).
p By the way, this project lives by getting shared; if you find this worthy, please share it with others.
p.muted // made with love by
p.contributors class&nbsp;
a(href="https://twitter.com/lostdesign") @lostdesign&nbsp;

25
plugins/i18n.js Normal file
View File

@@ -0,0 +1,25 @@
import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
export default ({ app, store }) => {
// Set i18n instance on app
// This way we can use it in middleware and pages asyncData/fetch
app.i18n = new VueI18n({
locale: store.state.locale,
fallbackLocale: 'en',
messages: {
'en': require('~/locales/en.json'),
'fr': require('~/locales/fr.json')
}
})
app.i18n.path = (link) => {
if (app.i18n.locale === app.i18n.fallbackLocale) {
return `/${link}`
}
return `/${app.i18n.locale}/${link}`
}
}

138
resources/css.json Normal file
View File

@@ -0,0 +1,138 @@
{
"title": "CSS",
"slug": "/css",
"resources": [
{
"title": "CSS Grid Generator",
"desc": "Visually create your css grid and export the code.",
"url": "https://cssgrid-generator.netlify.com/",
"tags": []
},
{
"title": "Keyframes Editor",
"desc": "An insanely simple way to create CSS animations",
"url": "https://keyframes.app/editor/",
"tags": []
},
{
"title": "Flexbox Froggy",
"desc": "A game to learn Flexbox",
"url": "https://flexboxfroggy.com",
"tags": []
},
{
"title": "Flexbox Zombies",
"desc": "A course to learn Flexbox",
"url": "https://mastery.games/p/flexbox-zombies",
"tags": []
},
{
"title": "CSS Gridgarden",
"desc": "A game to learn Grid",
"url": "https://cssgridgarden.com",
"tags": []
},
{
"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": []
},
{
"title": "Grid by example",
"desc": "Everything you need to learn CSS Grid Layout",
"url": "https://gridbyexample.com/learn/",
"tags": []
},
{
"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": []
},
{
"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": []
},
{
"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": []
},
{
"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).",
"url": "http://learnlayout.com",
"tags": []
},
{
"title": "CSSmatic - box shadow generator",
"desc": "The ultimate box shadow generator",
"url": "https://www.cssmatic.com/box-shadow",
"tags": []
},
{
"title": "AirBnB CSS / Sass Styleguide",
"desc": "A mostly reasonable approach to css and sass.",
"url": "https://github.com/airbnb/css",
"tags": []
},
{
"title": "Animista",
"desc": "CSS animations on demand.",
"url": "http://animista.net/",
"tags": []
},
{
"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": []
},
{
"title": "CSS Protips",
"desc": "A collection of tips to help take your CSS skills pro.",
"url": "https://github.com/AllThingsSmitty/css-protips#readme",
"tags": []
},
{
"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": []
},
{
"title": "CSS Diner",
"desc": "Learn CSS selectors while playing a game.",
"url": "https://flukeout.github.io/",
"tags": []
},
{
"title": "CSS Animation",
"desc": "CSS animation articles, tips and tutorials. Level Up Your CSS Animation Skills.",
"url": "https://cssanimation.rocks/",
"tags": []
},
{
"title": "JustREM",
"desc": "Easily and quickly convert pixel values into rem values.",
"url": "https://justrem.xyz/",
"tags": []
},
{
"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": []
},
{
"title": "Interactive CSS box-model view",
"desc": "Learn CSS box-model by interractively changing the values.",
"url": "https://codepen.io/carolineartz/full/ogVXZj",
"tags": []
}
]
}

48
resources/daily.json Normal file
View File

@@ -0,0 +1,48 @@
{
"title": "Daily",
"slug": "/daily",
"resources": [
{
"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": []
},
{
"title": "CSS Tricks",
"desc": "Daily webdev related articles, snippets and guides since 2007",
"url": "https://css-tricks.com/",
"tags": []
},
{
"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": []
},
{
"title": "Hackernews",
"desc": "Hacker News is a social news website focusing on computer science and entrepreneurship.",
"url": "https://news.ycombinator.com/",
"tags": []
},
{
"title": "Producthunt",
"desc": "Check popular new products out and get inspired, maybe even post yours?",
"url": "https://www.producthunt.com/",
"tags": []
},
{
"title": "dailydevlinks",
"desc": "Fresh, daily links so you can keep up-to-date with everything developer ",
"url": "https://dailydevlinks.com/",
"tags": []
},
{
"title": "Sidebar.io",
"desc": "The five best design links, every day.",
"url": "https://sidebar.io/",
"tags": []
}
]
}

144
resources/design.json Normal file
View File

@@ -0,0 +1,144 @@
{
"title": "Design",
"slug": "/design",
"resources": [
{
"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": []
},
{
"title": "Undraw",
"desc": "Free vector illustrations for your website.",
"url": "https://undraw.co",
"tags": []
},
{
"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": []
},
{
"title": "UI tips",
"desc": "Design tips by Steve Schoger",
"url": "https://twitter.com/i/moments/880688233641848832",
"tags": []
},
{
"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": []
},
{
"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": []
},
{
"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": []
},
{
"title": "One Page Love",
"desc": "One Page websites, templates and resources",
"url": "https://onepagelove.com/",
"tags": []
},
{
"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": []
},
{
"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": []
},
{
"title": "siteinspire",
"desc": "siteInspire is a showcase of the finest web and interactive design.",
"url": "https://www.siteinspire.com",
"tags": []
},
{
"title": "ShapeFactory",
"desc": "Simple design tools for everyone. Simply create a logo, pigment/color scheme, gradient or duetone style.",
"url": "https://shapefactory.co",
"tags": []
},
{
"title": "lapa.ninja",
"desc": "The best resources for learning design.",
"url": "https://www.lapa.ninja/learn/",
"tags": []
},
{
"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": []
},
{
"title": "sharpen.design",
"desc": "Sharpen is where designers hone their craft - randomly generated design challenges.",
"url": "https://sharpen.design/",
"tags": []
},
{
"title": "Good UI",
"desc": "A Good User Interface Is One That's Backed By Reproducible Evidence (A/B Tests)",
"url": "https://goodui.org/",
"tags": []
},
{
"title": "SVG ON THE WEB",
"desc": "A Practical Guide",
"url": "https://svgontheweb.com/",
"tags": []
},
{
"title": "UI Gradients",
"desc": "Beautiful colour gradients for design and code.",
"url": "https://uigradients.com/#NoontoDusk",
"tags": []
},
{
"title": "evernote.design",
"desc": "Basically webgems but just for design.",
"url": "https://evernote.design",
"tags": []
},
{
"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": []
},
{
"title": "UX Collective",
"desc": "A Medium-based blog, curating articles on modern UX Design practices, conventions, and ideas.",
"url": "https://uxdesign.cc/",
"tags": []
},
{
"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": []
}
]
}

36
resources/frontend.json Normal file
View File

@@ -0,0 +1,36 @@
{
"title": "Frontend",
"slug": "/frontend",
"resources": [
{
"title": "Frontend Handbook 2019",
"desc": "A lovely guide made by frontendmasters.",
"url": "https://frontendmasters.com/books/front-end-handbook/2019/",
"tags": []
},
{
"title": "Frontend Style Guide",
"desc": "Example on how to style, format and organize your frontend project.",
"url": "https://kaliop.github.io/frontend-style-guide/2.0/",
"tags": []
},
{
"title": "Learn to Code HTML and CSS",
"desc": "Learn to Code HTML & CSS is a simple and comprehensive guide dedicated to helping beginners learn HTML and CSS. Outlining the fundamentals, this guide works through all common elements of front-end design and development.",
"url": "https://learn.shayhowe.com/html-css/",
"tags": []
},
{
"title": "Frontendmasters",
"desc": "Premium tier video courses for any modern stack. Monthly or yearly subscription.",
"url": "https://frontendmasters.com",
"tags": []
},
{
"title": "Don't fear the internet",
"desc": "Basic HTML & CSS for NON-WEB DESIGNERS",
"url": "http://www.dontfeartheinternet.com/",
"tags": []
}
]
}

24
resources/fullstack.json Normal file
View File

@@ -0,0 +1,24 @@
{
"title": "Fullstack",
"slug": "/fullstack",
"resources": [
{
"title": "freeCodeCamp curriculum",
"desc": "We have thousands of coding lessons to help you improve your skills. You can earn each certification by completing its 5 final projects. And yes - all of this is 100% free, thanks to the thousands of campers who donate to our nonprofit. If you are new to coding, we recommend you start at the beginning.",
"url": "https://learn.freecodecamp.org",
"tags": []
},
{
"title": "Learn Node",
"desc": "Permium course by WesBos teaching you the MEPN (Mongo, Express, Pug, Node) stack using a fullstack project as example.",
"url": "https://learnnode.com",
"tags": []
},
{
"title": "egghead.io",
"desc": "Lecture platform about anything ranging from basic Javascript to advanced React methods. Community courses available free of charge with an opt-in paid section for full course paths.",
"url": "https://egghead.io",
"tags": []
}
]
}

72
resources/general.json Normal file
View File

@@ -0,0 +1,72 @@
{
"title": "General",
"slug": "/general",
"resources": [
{
"title": "Caniuse",
"desc": "'Can I use' provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.",
"url": "https://caniuse.com/",
"tags": []
},
{
"title": "DevDocs",
"desc": "DevDocs combines multiple API documentations in a fast, organized, and searchable interface. Online and offline, always have your docs with you.",
"url": "https://devdocs.io",
"tags": []
},
{
"title": "MDN web docs",
"desc": "Tutorials, references, tools and resources.",
"url": "https://developer.mozilla.org/docs/Web",
"tags": []
},
{
"title": "Rico's cheatsheets",
"desc": "Cheatsheets for any kind of technologies in the web domain.",
"url": "https://devhints.io",
"tags": []
},
{
"title": "Developer Roadmap",
"desc": "Below you find a set of charts demonstrating the paths that you can take and the technologies that you would want to adopt in order to become a frontend, backend or a devops.",
"url": "https://github.com/kamranahmedse/developer-roadmap/blob/master/readme.md",
"tags": []
},
{
"title": "ebookfoundation",
"desc": "Freely available programming books",
"url": "https://ebookfoundation.github.io/free-programming-books/",
"tags": []
},
{
"title": "Google Developer",
"desc": "Tutorials, guides, and best practices for building the next generation of web experiences.",
"url": "https://developers.google.com/web/",
"tags": []
},
{
"title": "Google Chrome Youtube",
"desc": "Making the web more awesome - latest news about google chrome",
"url": "https://www.youtube.com/channel/UCnUYZLuoy1rq1aVMwx4aTzw",
"tags": []
},
{
"title": "Code wars",
"desc": "Challenge yourself on kata, created by the community to strengthen different skills. Master your current language of choice, or expand your understanding of a new one.",
"url": "https://www.codewars.com/",
"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": []
}
]
}

48
resources/html.json Normal file
View File

@@ -0,0 +1,48 @@
{
"title": "HTML",
"slug": "/html",
"resources": [
{
"title": "HTML ELEMENTS",
"desc": "All the HTML elemens you can use. There is more than just a div :)",
"url": "https://developer.mozilla.org/docs/Web/HTML/Element",
"tags": []
},
{
"title": "The web accessibility basics",
"desc": "The absolute web accessibility basics every web developer should know about.",
"url": "https://www.marcozehe.de/2015/12/14/the-web-accessibility-basics/",
"tags": []
},
{
"title": "Introduction to HTML",
"desc": "In just 4 hours, learn the basics of HTML5 and start building & editing web pages.",
"url": "https://www.codecademy.com/learn/learn-html",
"tags": []
},
{
"title": "Awesome Canvas",
"desc": "A curated list of awesome Canvas examples, related articles and posts.",
"url": "https://github.com/raphamorim/awesome-canvas#readme",
"tags": []
},
{
"title": "HTML Spec",
"desc": "This specification defines a big part of the Web platform, in lots of detail.",
"url": "https://html.spec.whatwg.org/",
"tags": []
},
{
"title": "Markup validator",
"desc": "This tool is checking your markup if it complies with the specification and will show you possible errors.",
"url": "https://validator.w3.org/nu/",
"tags": []
},
{
"title": "Trends",
"desc": "Browse trending github repos written in your favorite language with this high performance progressive web application",
"url": "https://trends.now.sh/",
"tags": []
}
]
}

31
resources/index.js Normal file
View File

@@ -0,0 +1,31 @@
import css from './css'
import daily from './daily'
import design from './design'
import frontend from './frontend'
import fullstack from './fullstack'
import general from './general'
import html from './html'
import javascript from './javascript'
import php from './php'
import podcasts from './podcasts'
import python from './python'
import ruby from './ruby'
import server from './server'
import utility from './utility'
export default [
css,
daily,
design,
frontend,
fullstack,
general,
html,
javascript,
php,
podcasts,
python,
ruby,
server,
utility,
]

120
resources/javascript.json Normal file
View File

@@ -0,0 +1,120 @@
{
"title": "Javascript",
"slug": "/javascript",
"resources": [
{
"title": "WarriorJS",
"desc": "An exciting game of programming and Artificial Intelligence",
"url": "https://warrior.js.org/",
"tags": []
},
{
"title": "Javascript30",
"desc": "Free video courses about javascript. Made by WesBos",
"url": "https://javascript30.com",
"tags": []
},
{
"title": "JS the right way",
"desc": "This is a guide intended to introduce new developers to JavaScript and help experienced developers learn more about its best practices.",
"url": "https://jstherightway.org",
"tags": []
},
{
"title": "Learn vanilla js",
"desc": "A vanilla JS roadmap, along with learning resources and project ideas to help you get started.",
"url": "https://learnvanillajs.com/",
"tags": []
},
{
"title": "Javascript Info",
"desc": "How it's done now. From the basics to advanced topics with simple, but detailed explanations.",
"url": "https://javascript.info/",
"tags": []
},
{
"title": "30 Seconds of Code",
"desc": "A curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.",
"url": "https://30secondsofcode.org",
"tags": []
},
{
"title": "JS Tips",
"desc": "JS Tips is a collection of useful daily JavaScript tips that will allow you to improve your code writing.",
"url": "https://www.jstips.co",
"tags": []
},
{
"title": "YDKJS",
"desc": "This is a free series of books diving deep into the core mechanisms of the JavaScript language. The first edition of the series is now complete.",
"url": "https://github.com/getify/You-Dont-Know-JS",
"tags": []
},
{
"title": "Eloquent Javascript 3rd Edition",
"desc": "This is a book about javascript, programming, and the wonders of the digital. You can read it online or get a paperback copy of it.",
"url": "http://eloquentjavascript.net",
"tags": []
},
{
"title": "Learn javascript fast",
"desc": "Welcome to learnjavascriptfast.com, a free online course designed to help you learn Javascript fast with hands-on project. Our aim is to equip you with enough knowledge to start coding your own Javascript pages immediately upon completion of this course.",
"url": "https://learnjavascriptfast.com/",
"tags": []
},
{
"title": "ECMAScript 6",
"desc": "ES6 is a significant update to the language, and the first update to the language since ES5 was standardized in 2009.",
"url": "https://github.com/lukehoban/es6features#readme",
"tags": []
},
{
"title": "You might not need jquery",
"desc": "jQuery and its cousins are great, and by all means use them if it makes it easier to develop your application. If you're developing a library on the other hand, please take a moment to consider if you actually need jQuery as a dependency.",
"url": "http://youmightnotneedjquery.com",
"tags": []
},
{
"title": "BundlePhobia",
"desc": "Find the cost of adding a npm package to your bundle",
"url": "https://bundlephobia.com/",
"tags": []
},
{
"title": "The Net Ninja - Black-belt your web skills",
"desc": "Free YouTube tutorials on modern JavaScript (beginner to advanced), Node.js, React, Vue.js, Firebase, MongoDB, Plus loads more...",
"url": "https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg/playlists",
"tags": []
},
{
"title": "Javascript Weekly",
"desc": "A free, once–weekly email roundup of JavaScript news and articles.",
"url": "https://javascriptweekly.com/",
"tags": []
},
{
"title": "Learn JavaScript Online",
"desc": "The easiest way to learn & practice modern JavaScript",
"url": "https://learnjavascript.online/",
"tags": []
},
{
"title": "Code to go",
"desc": "Find up to date snippets for common JavaScript use cases",
"url": "https://codetogo.io/",
"tags": []
},
{
"title": "Clean Code Javascript",
"desc": "Software engineering principles, from Robert C. Martin's book Clean Code, adapted for JavaScript. This is not a style guide. It's a guide to producing readable, reusable, and refactorable software in JavaScript.",
"url": "https://github.com/ryanmcdermott/clean-code-javascript",
"tags": []
},
{
"title": "List of (Advanced) JavaScript Questions",
"desc": "A curated list of JavaScript questions from basic to advanced to either refresh your knowledge or prepare for job interviews. Updated weekly with new questions and available in several languages.",
"url": "https://github.com/lydiahallie/javascript-questions",
"tags": []
}
]
}

72
resources/php.json Normal file
View File

@@ -0,0 +1,72 @@
{
"title": "PHP",
"slug": "/php",
"resources": [
{
"title": "PHP the right way",
"desc": "PHP The Right Way is an easy-to-read, quick reference for PHP popular coding standards, links to authoritative tutorials around the Web and what the contributors consider to be best practices at the present time.",
"url": "https://phptherightway.com",
"tags": []
},
{
"title": "The PHP manual",
"desc": "The PHP manual is documenting the whole spec while giving examples for each property.",
"url": "https://www.php.net/manual/en/",
"tags": []
},
{
"title": "Laracasts",
"desc": "Learn practical, modern web development, through expert screencasts on Laravel, Vue, and so much more.",
"url": "https://laracasts.com",
"tags": []
},
{
"title": "An online book for learning PHP",
"desc": "PHP Apprentice is an online, open source book about the PHP programming language. PHP is one of the most popular platforms for building websites and web services.",
"url": "https://phpapprentice.com/",
"tags": []
},
{
"title": "PHP-FIG",
"desc": "Moving PHP forward through collaboration and standards. Welcome to the PHP Framework Interop Group! We're a group of established PHP projects whose goal is to talk about commonalities between our projects and find ways we can work better together.",
"url": "https://www.php-fig.org/",
"tags": []
},
{
"title": "(The only proper) PDO tutorial",
"desc": "There are many tutorials on PDO already, but unfortunately, most of them fail to explain the real benefits of PDO, or even promote rather bad practices. The only two exceptions are phptherightway.com and hashphp.org, but they miss a lot of important information. As a result, half of PDO's features remain in obscurity and are almost never used by PHP developers, who, as a result, are constantly trying to reinvent the wheel which already exists in PDO.",
"url": "https://phpdelusions.net/pdo",
"tags": []
},
{
"title": "Online PHP shell",
"desc": "3v4l.org (leetspeak for eval) is an online shell that allows you to run your code on my server. I compiled more than 200 different PHP versions (every version released since 4.3.0) plus HHVM for you to use.",
"url": "https://3v4l.org/",
"tags": []
},
{
"title": "Safe Password Hashing",
"desc": "This section explains the reasons behind using hashing functions to secure passwords, as well as how to do so effectively.",
"url": "https://www.php.net/manual/en/faq.passwords.php",
"tags": []
},
{
"title": "14 Tips",
"desc": "14 Tips to Write PHP Code that is Hard to Maintain and Upgrade",
"url": "https://www.tomasvotruba.cz/blog/2018/11/26/14-tips-to-write-php-code-that-is-hard-to-maintain-and-upgrade/",
"tags": []
},
{
"title": "Object Calisthenics",
"desc": "Object Calisthenics are programming exercises, formalized as a set of 9 rules invented by Jeff Bay in his book The ThoughtWorks Anthology. The word Object is related to Object Oriented Programming. The word Calisthenics is derived from greek, and means exercises under the context of gymnastics.",
"url": "https://williamdurand.fr/2013/06/03/object-calisthenics/",
"tags": []
},
{
"title": "Your code sucks, let's fix it",
"desc": "134 Slides to help fix your code. Performance and testing are just one aspect of code, to really be successful your code needs to be readable, maintainable and generally easier to comprehend and work with.",
"url": "https://www.slideshare.net/rdohms/your-code-sucks-lets-fix-it-15471808",
"tags": []
}
]
}

24
resources/podcasts.json Normal file
View File

@@ -0,0 +1,24 @@
{
"title": "Podcasts",
"slug": "/podcasts",
"resources": [
{
"title": "syntax.fm",
"desc": "Full Stack Developers Wes Bos and Scott Tolinski dive deep into web development topics, explaining how they work and talking about their own experiences. They cover from JavaScript frameworks like React, to the latest advancements in CSS to simplifying web tooling.",
"url": "https://syntax.fm/",
"tags": []
},
{
"title": "The Changelog",
"desc": "News and podcasts for developers.",
"url": "https://changelog.com/",
"tags": []
},
{
"title": "Ladybug Podcast",
"desc": "Listen to Kelly Vaughn, Ali Spittel, Emma Wedekind, and Lindsey Kopacz, four women in tech, discuss topics such as how to get your first job in tech and how to manage side projects.",
"url": "https://ladybug.dev/",
"tags": []
}
]
}

276
resources/python.json Normal file
View File

@@ -0,0 +1,276 @@
{
"title": "Python",
"slug": "/python",
"resources": [
{
"title": "Python 3.7.3 documentation",
"desc": "Documentation for all releaases of Python.",
"url": "https://docs.python.org/3/",
"tags": []
},
{
"title": "The Hitchhiker’s Guide to Python!",
"desc": "This is a living, breathing guide. This handcrafted guide exists to provide both novice and expert Python developers a best practice handbook to the installation, configuration, and usage of Python on a daily basis.",
"url": "https://docs.python-guide.org/",
"tags": []
},
{
"title": "Kaggle - Python",
"desc": "Learn the most important language for Data Science",
"url": "https://www.kaggle.com/learn/python",
"tags": []
},
{
"title": "Anaconda",
"desc": "The World's Most Popular Python/R Data Science Platform",
"url": "https://www.anaconda.com/distribution/",
"tags": []
},
{
"title": "Real Python Tutorials",
"desc": "At Real Python you can learn all things Python from the ground up. Everything from the absolute basics of Python, to web development and web scraping, to data visualization, and beyond.",
"url": "https://realpython.com/",
"tags": []
},
{
"title": "Geeks for geeks - Python",
"desc": "Short, clearly written posts with colorful code examples.",
"url": "https://www.geeksforgeeks.org/python-programming-language/",
"tags": []
},
{
"title": "Pluralsight - Python",
"desc": "Test your skills and watch a few video courses.",
"url": "https://app.pluralsight.com/paths/skills/Python",
"tags": []
},
{
"title": "Pypi",
"desc": "Find, install and publish Python packages with the Python Package Index",
"url": "https://pypi.org/",
"tags": []
},
{
"title": "Boost.Python",
"desc": "A C++ library which enables seamless interoperability between C++ and the Python programming language.",
"url": "https://www.boost.org/doc/libs/1_70_0/libs/python/doc/html/index.html",
"tags": []
},
{
"title": "MongoDB Python Drivers",
"desc": "The database for modern applications",
"url": "https://docs.mongodb.com/ecosystem/drivers/python/",
"tags": []
},
{
"title": "A Byte of Python",
"desc": "If you like real books ... A complete set of documentation that closely resembles the typesetting of a real book.",
"url": "https://python.swaroopch.com/",
"tags": []
},
{
"title": "Requests: HTTP for Humans™",
"desc": "Requests is the only Non-GMO HTTP library for Python, safe for human consumption.",
"url": "https://2.python-requests.org/en/master/",
"tags": []
},
{
"title": "TensorFlow",
"desc": "The core open source library to help you develop and train ML models. TensorFlow is an end-to-end open source platform for machine learning.",
"url": "https://www.tensorflow.org/",
"tags": []
},
{
"title": "Think Python",
"desc": "Think Python is an introduction to Python programming for beginners. The free O'Reilly book.",
"url": "https://greenteapress.com/wp/think-python/",
"tags": []
},
{
"title": "No Starch Press - Automate the Boring Stuff with Python",
"desc": "The best part of programming is the triumph of seeing the machine do something useful. Automate the Boring Stuff with Python frames all of programming as these small triumphs; it makes the boring fun.",
"url": "https://nostarch.com/automatestuff",
"tags": []
},
{
"title": "Python built-ins worth learning",
"desc": "A great list that breaks up topics into 'learn now' and 'wait til later' type categories. By Trey Hunner",
"url": "https://treyhunner.com/2019/05/python-builtins-worth-learning/",
"tags": []
},
{
"title": "Qt for Python",
"desc": "Create User Interfaces with Qt for Python",
"url": "https://www.qt.io/qt-for-python",
"tags": []
},
{
"title": "Python fun facts.",
"desc": "Python fun facts from JetBrains, maker of the IDE PyCharm",
"url": "https://www.jetbrains.com/lp/devecosystem-2019/python/",
"tags": []
},
{
"title": "MicroPython",
"desc": "Using python with microcontrollers.",
"url": "https://micropython.org/",
"tags": []
},
{
"title": "Programiz",
"desc": "Learn Python Programming",
"url": "https://www.programiz.com/python-programming",
"tags": []
},
{
"title": "Medium - Python",
"desc": "Tools to run Python on Android",
"url": "https://towardsdatascience.com/tools-to-run-python-on-android-9060663972b4",
"tags": []
},
{
"title": "QPython",
"desc": "QPython is a script engine which runs Python programs on android devices. It also can help developers develop android applications.",
"url": "https://www.qpython.com/",
"tags": []
},
{
"title": "Medium - Python on Netflix",
"desc": "We wanted to share a sampling of how Python is used at Netflix. ",
"url": "https://medium.com/netflix-techblog/python-at-netflix-bba45dae649e",
"tags": []
},
{
"title": "Python Data Science Handbook",
"desc": "This is a book about doing data science with Python, which immediately begs the question: what is data science? The free O'Reilly book.",
"url": "https://jakevdp.github.io/PythonDataScienceHandbook/",
"tags": []
},
{
"title": "Data Analysis in Python",
"desc": "This site is designed to offer an introduction to Python specifically tailored for social scientists and people doing applied data analysis.",
"url": "http://www.data-analysis-in-python.org/",
"tags": []
},
{
"title": "Microsoft - Python",
"desc": "11 Data Science Skills. 1.5 Million Jobs.",
"url": "https://academy.microsoft.com/en-us/professional-program/tracks/data-science/",
"tags": []
},
{
"title": "Towards Data Science - Machine Learning",
"desc": "An “Equation-to-Code” Machine Learning Project Walk-Through in Python",
"url": "https://towardsdatascience.com/an-equation-to-code-machine-learning-project-walk-through-in-python-part-1-linear-separable-fd0e19ed2d7",
"tags": []
},
{
"title": "Big Data Made Simple",
"desc": "Step by step approach to perform data analysis using Python.",
"url": "https://bigdata-madesimple.com/step-by-step-approach-to-perform-data-analysis-using-python/",
"tags": []
},
{
"title": "Medium - Python vs R",
"desc": "Python vs. R — Choosing the Best Programming Language for Data Science",
"url": "https://towardsdatascience.com/python-vs-r-choosing-the-best-programming-languages-for-data-science-b1327f01f6bf",
"tags": []
},
{
"title": "Python Data Analysis Library",
"desc": "Pandas is an open source, BSD-licensed library providing high-performance, easy-to-use data structures and data analysis tools for the Python programming language.",
"url": "https://pandas.pydata.org/",
"tags": []
},
{
"title": "SciPy",
"desc": "SciPy (pronounced “Sigh Pie”) is a Python-based ecosystem of open-source software for mathematics, science, and engineering.",
"url": "https://www.scipy.org/",
"tags": []
},
{
"title": "NumPy",
"desc": "NumPy is the fundamental package for scientific computing with Python.",
"url": "http://www.numpy.org/",
"tags": []
},
{
"title": "Statsmodels",
"desc": "Statsmodels is a Python module that provides classes and functions for the estimation of many different statistical models, as well as for conducting statistical tests, and statistical data exploration. ",
"url": "http://www.statsmodels.org/stable/index.html",
"tags": []
},
{
"title": "scikit-learn",
"desc": "Machine Learning in Python",
"url": "https://scikit-learn.org/stable/",
"tags": []
},
{
"title": "Jupyter",
"desc": "The Jupyter Notebook is an open-source web application that allows you to create and share documents that contain live code, equations, visualizations and narrative text.",
"url": "https://jupyter.org/",
"tags": []
},
{
"title": "Matplotlib",
"desc": "Matplotlib is a Python 2D plotting library which produces publication quality figures in a variety of hardcopy formats and interactive environments across platforms.",
"url": "https://matplotlib.org/",
"tags": []
},
{
"title": "NumFOCUS",
"desc": "From Netflix to NASA, researchers use NumFOCUS sponsored projects to solve the most challenging problems. Explore our open source tools by language, features, or industry.",
"url": "https://numfocus.org/sponsored-projects",
"tags": []
},
{
"title": "Python Pandemonium",
"desc": "A place to read and write about all things Python.",
"url": "https://medium.com/python-pandemonium/tagged/data-science",
"tags": []
},
{
"title": "Pandas for People In A Hurry",
"desc": "Pandas is the most popular Python library for data manipulation and data analysis. It is a must know for all data scientists!",
"url": "https://towardsdatascience.com/pandas-for-people-in-a-hurry-59d966630ae0",
"tags": []
},
{
"title": "PySpark",
"desc": "Python Programming Guide for the API",
"url": "https://spark.apache.org/docs/0.9.1/python-programming-guide.html",
"tags": []
},
{
"title": "Towards Data Science",
"desc": "Sharing concepts, ideas, and codes. IMO the best Data Science Blog.",
"url": "https://towardsdatascience.com/",
"tags": []
},
{
"title": "HDF5®",
"desc": "High-performance data management and storage suite",
"url": "https://www.hdfgroup.org/solutions/hdf5/",
"tags": []
},
{
"title": "Theano",
"desc": "Theano is a Python library that allows you to define, optimize, and evaluate mathematical expressions involving multi-dimensional arrays efficiently.",
"url": "http://deeplearning.net/software/theano/",
"tags": []
},
{
"title": "Becoming Human - Languages",
"desc": "Top Programming Languages a Data Scientist Must Master.",
"url": "https://becominghuman.ai/top-programming-languages-a-data-scientist-must-master-in-2019-7101a8bc8e16",
"tags": []
},
{
"title": "SQLAlchemy",
"desc": "SQLAlchemy is the Python SQL toolkit and Object Relational Mapper that gives application developers the full power and flexibility of SQL.",
"url": "https://www.sqlalchemy.org/",
"tags": []
}
]
}

78
resources/ruby.json Normal file
View File

@@ -0,0 +1,78 @@
{
"title": "Ruby",
"slug": "/ruby",
"resources": [
{
"title": "AppSignal Blog",
"desc": "Product updates and things we've learned while building AppSignal.",
"url": "https://blog.appsignal.com/",
"tags": []
},
{
"title": "Drifting Ruby",
"desc": "Product updates and things we've learned while building AppSignal.",
"url": "https://www.driftingruby.com/",
"tags": []
},
{
"title": "GoRails Blog",
"desc": "Learn about Ruby on Rails. The GoRails blog covers topics across all aspects of Ruby on Rails development.",
"url": "https://gorails.com/blog/",
"tags": []
},
{
"title": "Reinteractive Articles",
"desc": "Our expert team of designers and developers love what they do and enjoy sharing their knowledge with the world.",
"url": "https://reinteractive.com/blog/",
"tags": []
},
{
"title": "RailsCasts",
"desc": "Short Ruby on Rails screencasts containing tips, tricks and tutorials. Great for both novice and experienced web developers.",
"url": "http://railscasts.com/",
"tags": []
},
{
"title": "Railsware Blog",
"desc": "on product management, engineering, design, culture and many more...",
"url": "https://railsware.com/blog/",
"tags": []
},
{
"title": "RubyFlow",
"desc": "Made a library? Written a blog post? Found a useful tutorial? Share it with the Ruby community here or just enjoy what everyone else has found!",
"url": "http://www.rubyflow.com/",
"tags": []
},
{
"title": "Ruby Inside",
"desc": "The biggest Ruby and Rails blog since 2006 - tutorials, news, and lots more.",
"url": "http://www.rubyinside.com/",
"tags": []
},
{
"title": "Ruby Rogues Episodes",
"desc": "A podcast by panel about Ruby and related technologies.",
"url": "https://devchat.tv/ruby-rogues/",
"tags": []
},
{
"title": "Thoughtbot Weekly Iteration",
"desc": "The Weekly Iteration is our video series where we explore new frameworks and languages, dig in to advanced coding patterns, and share the techniques we use on projects to build robust and maintainable applications. We're currently on a break from recording new episodes, but be sure to check out the many videos we've released previously.",
"url": "https://thoughtbot.com/upcase/the-weekly-iteration/",
"tags": []
},
{
"title": "Thoughtbot Web Articles",
"desc": "Written by thoughtbot, experienced designers and developers who turn your idea into the right product.",
"url": "https://thoughtbot.com/blog/web/",
"tags": []
},
{
"title": "Ruby Weekly",
"desc": "A free, once–weekly e-mail round-up of Ruby news and articles.",
"url": "https://rubyweekly.com/",
"tags": []
}
]
}

60
resources/server.json Normal file
View File

@@ -0,0 +1,60 @@
{
"title": "Server",
"slug": "/server",
"resources": [
{
"title": "Netlify",
"desc": "Free static hosting with privacy in mind!",
"url": "https://netlify.com",
"tags": []
},
{
"title": "Github Pages",
"desc": "Free static hosting by Github.",
"url": "https://pages.github.com",
"tags": []
},
{
"title": "Heroku",
"desc": "Heroku is a platform as a service (PaaS) that enables developers to build, run, and operate applications entirely in the cloud.",
"url": "https://www.heroku.com/",
"tags": []
},
{
"title": "Ploi",
"desc": "Stop the Hassle. Start deploi'ing. Use Ploi.io for easy site deployments. We take all the difficult work out of your hands, so you can focus on doing what you love: developing your application.",
"url": "https://ploi.io",
"tags": []
},
{
"title": "Now",
"desc": "Global Serverless Deployments. Now makes serverless application deployment easy. Don't spend time configuring the cloud. Just push your code.",
"url": "https://zeit.co/now",
"tags": []
},
{
"title": "Namecheap",
"desc": "Domains for your projects",
"url": "https://namecheap.com",
"tags": []
},
{
"title": "Servers for hackers",
"desc": "Tutorials on how to handle your servers.",
"url": "https://serversforhackers.com/",
"tags": []
},
{
"title": "Glitch",
"desc": "The friendly community where everyone can discover & create the best apps on the web.",
"url": "https://glitch.com/",
"tags": []
},
{
"title": "Serverless for Front-End Developers",
"desc": "Find Serverless services (e.g. functions, databases and other tools) for your next project. There are also articles related to Serverless and JAMstack.",
"url": "https://serverless.css-tricks.com/",
"tags": []
}
]
}

168
resources/utility.json Normal file
View File

@@ -0,0 +1,168 @@
{
"title": "Utility",
"slug": "/utility",
"resources": [
{
"title": "JSON Generator",
"desc": "Random JSON generator for your project - because debugging without data, does not make sense!",
"url": "https://www.json-generator.com",
"tags": []
},
{
"title": "Matomo",
"desc": "A free open source web analytics tool which can be compared to GA but actually gives a shit about privacy.",
"url": "https://matomo.org/",
"tags": []
},
{
"title": "Fathom",
"desc": "Fathom Analytics provides simple, useful website stats without tracking or storing personal data of your users.",
"url": "https://usefathom.com",
"tags": []
},
{
"title": "10 free tools",
"desc": "10 free-but-professional tools for your dev projects",
"url": "https://dev.to/sauloco/10-free-but-professional-tools-for-your-dev-projects-2eeo",
"tags": []
},
{
"title": "headless cms",
"desc": "A List of Content Management Systems for JAMstack Sites",
"url": "https://headlesscms.org",
"tags": []
},
{
"title": "Git and Git flow cheatsheet",
"desc": "Git cheat sheet saves you from learning all the commands by heart.",
"url": "https://github.com/arslanbilal/git-cheat-sheet#readme",
"tags": []
},
{
"title": "StaticGen",
"desc": "A List of Static Site Generators for JAMstack Sites",
"url": "https://www.staticgen.com",
"tags": []
},
{
"title": "Snippet generator",
"desc": "Create your own snippets for VSCode, Sublime or Atom using this generator. No need to format the snippet yourself",
"url": "https://snippet-generator.app/",
"tags": []
},
{
"title": "gitignore.io",
"desc": "Create usefull .gitignore files for your projects.",
"url": "https://www.gitignore.io",
"tags": []
},
{
"title": "Github",
"desc": "GitHub is a development platform inspired by the way you work. From open source to business, you can host and review code, manage projects, and build software alongside 36 million developers.",
"url": "https://github.com",
"tags": []
},
{
"title": "NASA APIs",
"desc": "Welcome to the NASA API portal. The objective of this site is to make NASA data, including imagery, eminently accessible to application developers. The api.nasa.gov catalog is growing.",
"url": "https://api.nasa.gov",
"tags": []
},
{
"title": "PokéAPI",
"desc": "The RESTful Pokémon API",
"url": "https://pokeapi.co",
"tags": []
},
{
"title": "Reddit API .json",
"desc": "Take a any subreddit you like and append '.json' to consume it as an API (https://reddit.com/r/cats.json).",
"url": "https://www.reddit.com/.json",
"tags": []
},
{
"title": "quicktype",
"desc": "Generate types and serializers from JSON.",
"url": "https://quicktype.io",
"tags": []
},
{
"title": "NGINXconfig.io",
"desc": "Quickly generate a NGINX config for your server.",
"url": "https://nginxconfig.io/",
"tags": []
},
{
"title": "Online tools",
"desc": "Decode, encode and hash any string quickly.",
"url": "https://emn178.github.io/online-tools",
"tags": []
},
{
"title": "Favicon generator. For real.",
"desc": "A favicon generator for all browsers and platforms.",
"url": "https://realfavicongenerator.net",
"tags": []
},
{
"title": "JSFiddle",
"desc": "JSFiddle is for: Demos for docs, Bug reporting (test-case) for Github Issues, Live code collaboration, Code snippets hosting for free!",
"url": "https://jsfiddle.net",
"tags": []
},
{
"title": "CodePen",
"desc": "CodePen is an online community for testing and showcasing user-created HTML, CSS and JavaScript code snippets.",
"url": "https://codepen.io/",
"tags": []
},
{
"title": "Gifless",
"desc": "Create emoji and text gifs in seconds",
"url": "https://gifless.herokuapp.com/",
"tags": []
},
{
"title": "Learn Git",
"desc": "Become a git guru - a tutorial series by Atlassian.",
"url": "https://www.atlassian.com/git/tutorials",
"tags": []
},
{
"title": "Git from the inside out",
"desc": "This essay explains how Git works. It assumes you understand Git well enough to use it to version control your projects.",
"url": "https://codewords.recurse.com/issues/two/git-from-the-inside-out",
"tags": []
},
{
"title": "List of Public APIs",
"desc": "A collective list of free APIs for use in software and web development.",
"url": "https://github.com/public-apis/public-apis",
"tags": []
},
{
"title": "Carbon",
"desc": "Create and share beautiful images of your source code.",
"url": "https://carbon.now.sh",
"tags": []
},
{
"title": "Mailnator",
"desc": "The Mailinator Email System puts millions of inboxes right at your fingertips. It is an amazing Email Workflow Testing tool for your Software or Service.",
"url": "https://www.mailinator.com/",
"tags": []
},
{
"title": "Ngrok",
"desc": "Secure introspectable tunnels to localhost.",
"url": "https://ngrok.com/",
"tags": []
},
{
"title": "Let's Encrypt",
"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": []
}
]
}

1106
store.json
View File

File diff suppressed because it is too large Load Diff

14
store/Sidebar.js Normal file
View File

@@ -0,0 +1,14 @@
export const state = () => ({
areCardsVisible: true
})
export const getters = {
areCardsVisible: state => state.areCardsVisible
}
export const mutations = {
toggleCardsVisible(state) {
if (process.browser) localStorage.setItem('areCardsVisible', !state.areCardsVisible)
state.areCardsVisible = !state.areCardsVisible
}
}

80
store/data.js Normal file
View File

@@ -0,0 +1,80 @@
import resources from '../resources'
// Polyfill for flat
if (!Array.prototype.flat) {
Object.defineProperty(Array.prototype, 'flat', {
configurable: true,
value: function flat () {
var depth = isNaN(arguments[0]) ? 1 : Number(arguments[0]);
return depth ? Array.prototype.reduce.call(this, function (acc, cur) {
if (Array.isArray(cur)) {
acc.push.apply(acc, flat.call(cur, depth - 1));
} else {
acc.push(cur);
}
return acc;
}, []) : Array.prototype.slice.call(this);
},
writable: true
});
}
/**
* Check if list 2 has an element of list 1.
* includesElOf(list1, list2) -> read as list1 includesElOf list2.
* @param {any[]} list1
* @param {any[]} list2
*/
const includesElOf = (list1, list2) => list1.some(element => list2.includes(element))
export const state = () => ({
resources: resources.map(category => ({
...category,
resources: category.resources.map(resource => {
const cleanTitle = resource.title.replace(/ /g, '').toLowerCase()
return {
...resource,
cleanTitle,
path: `${category.slug}?card=${cleanTitle}`,
}
})
})),
// List of all tags, duplicates removed
tags: [...new Set(
resources
.map(resource => resource.resources).flat()
.map(resource => resource.tags).flat()
)]
})
export const getters = {
tags: state => state.tags,
resources: state => state.resources,
findResources: state => title => {
return Object.assign(state.resources.find(resource => resource.title.toLowerCase() === title.toLowerCase()))
},
findByTags: state => tags => {
const flat = state.resources.map(category => category.resources).flat()
return flat.filter(resource => resource.tags && includesElOf(resource.tags, tags))
},
sortByTitle: (_, getters) => title => {
const category = getters.findResources(title)
const clone = [...category.resources]
return {
...category,
resources: clone.sort(compareTitles)
}
}
}
const compareTitles = (x, y) => {
if (x.cleanTitle > y.cleanTitle) {
return 1
} else if (x.cleanTitle < y.cleanTitle) {
return -1
} else {
return 0
}
}

7
store/index.js Normal file
View File

@@ -0,0 +1,7 @@
export const state = () => ({
})
export const mutations = {
}

12
store/store.js Normal file
View File

@@ -0,0 +1,12 @@
export const state = () => ({
locales: ['en', 'fr', 'de'],
locale: 'en'
})
export const mutations = {
SET_LANG(state, locale) {
if (state.locales.indexOf(locale) !== -1) {
state.locale = locale
}
}
}