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

Merge branch 'master' into dev

Browse Source
This commit is contained in:
Unknown
2019-08-08 22:40:08 -05:00
parent 86d71a0f77 76167ff270
commit 168157c279
9 changed files with 125 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.github/ISSUE_TEMPLATE/resource-request.md vendored
View File

@@ -15,3 +15,6 @@ webgems.io
**URL**
https://example.com
**Category**
javascript/html/php...

6
.vscode/webgems.code-snippets vendored
View File

@@ -19,9 +19,9 @@
"prefix": "wgem",
"body": [
"{",
" title: '${1:title}',",
" desc: '${2:desc}',",
" url: '${3:url}'",
" \"title\": \"${1:title}\",",
" \"desc\": \"${2:desc}\",",
" \"url\": \"${3:url}\"",
"},"
],
"description": "Add a webgem"

6
README.md
View File

@@ -11,7 +11,7 @@ Since this is a Nuxt project, you need nodejs and npm.
``` bash
# clone repo
$ git clone https://github.com/lostdesign/webgems.git
$ git clone https://github.com/webgems/webgems.git
# cd into webgems
$ cd webgems
@@ -33,7 +33,9 @@ For detailed explanation on how things work, checkout [Nuxt.js docs](https://nux
### How to add a new resource
We manage our resources in `store.json`. The schema is as follows:
If you are using VS Code, you can simply type `wgem` and hit tab in the `store.json` in order to get the correct template (see below).
For any other editor, please use the following schema:
```js
[
{

19
app.html
View File

@@ -4,23 +4,6 @@
{{ HEAD }}
</head>
<body {{ BODY_ATTRS }}>
<!-- Fathom - simple website analytics - https://github.com/usefathom/fathom -->
<script>
(function (f, a, t, h, o, m) {
a[h] = a[h] || function () {
(a[h].q = a[h].q || []).push(arguments)
};
o = f.createElement('script'),
m = f.getElementsByTagName('script')[0];
o.async = 1;
o.src = t;
o.id = 'fathom-script';
m.parentNode.insertBefore(o, m)
})(document, window, '//stats.lost.services/tracker.js', 'fathom');
fathom('set', 'siteId', 'KQYXI');
fathom('trackPageview');
</script>
<!-- / Fathom -->
{{ APP }}
</body>
</html>
</html>

26
components/Github.vue
View File

@@ -6,28 +6,30 @@
path(d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body")
</template>
<style lang="scss" scoped>
a {
.github-corner {
z-index:1;
position: fixed;
top:0;
right:0;
&:hover .octo-arm{
animation:octocat-wave 560ms ease-in-out
}
}
.github-corner:hover
.octo-arm{
animation:octocat-wave 560ms ease-in-out
}
@keyframes octocat-wave{
0%,100%{transform:rotate(0)}
20%,60%{transform:rotate(-25deg)}
40%,80%{transform:rotate(10deg)}
}
@media (max-width:500px){
.github-corner:hover
.octo-arm{
animation:none
}
.github-corner
.octo-arm{
animation:octocat-wave 560ms ease-in-out
.github-corner {
& .octo-arm {
animation:octocat-wave 560ms ease-in-out
}
&:hover .octo-arm{
animation:none;
}
}
}
</style>

27
nuxt.config.js
View File

@@ -2,8 +2,6 @@ import pkg from './package'
import store from './store.json'
export default {
mode: 'universal',
/*
** Headers of the page
*/
@@ -39,33 +37,10 @@ export default {
*/
loading: { color: '#fff' },
/*
** Global CSS
*/
css: [
],
/*
** Plugins to load before mounting the App
*/
plugins: [
],
/*
** Nuxt.js modules
*/
modules: [
'nuxt-clipboard2',
],
/*
** Build configuration
*/
build: {
/*
** You can extend webpack config here
*/
extend(config, ctx) {
}
}
]
}

14
package-lock.json generated
View File

@@ -5764,9 +5764,9 @@
}
},
"lodash": {
"version": "4.17.11",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz",
"integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg=="
"version": "4.17.14",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.14.tgz",
"integrity": "sha512-mmKYbW3GLuJeX+iGP+Y7Gp1AiGHGbXHCOh/jZmrawMmsE7MS4znI3RL2FsjbqOyMayHInjOeykW7PEajUk1/xw=="
},
"lodash._reinterpolate": {
"version": "3.0.0",
@@ -5795,11 +5795,11 @@
"dev": true
},
"lodash.template": {
"version": "4.4.0",
"resolved": "https://registry.npmjs.org/lodash.template/-/lodash.template-4.4.0.tgz",
"integrity": "sha1-5zoDhcg1VZF0bgILmWecaQ5o+6A=",
"version": "4.5.0",
"resolved": "https://registry.npmjs.org/lodash.template/-/lodash.template-4.5.0.tgz",
"integrity": "sha512-84vYFxIkmidUiFxidA/KjjH9pAycqW+h980j7Fuz5qxRtO9pgB7MDFTdys1N7A5mcucRiDyEq4fusljItR1T/A==",
"requires": {
"lodash._reinterpolate": "~3.0.0",
"lodash._reinterpolate": "^3.0.0",
"lodash.templatesettings": "^4.0.0"
}
},

7
pages/index.vue
View File

@@ -5,13 +5,16 @@
span 💎 webgems?
p Webgems is a goto place for devs and designers to find new resources and more. As a beginner it's sometimes not easy to find what you need since you don't know what you should look for.
p Therefore I created this project to have the most common and best resources for beginners and veterans in one place. Kinda like a bookmarks list for devs and designers, containing only the best gems out there.
p If you want to add your own gem, go ahead and open a pull request on github (click on that octocat at the top right corner).&nbsp;
p If you want to add your own 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;
span extends&nbsp;
a(href="https://github.com/S3B4S") @S3B4S
a(href="https://github.com/S3B4S") @S3B4S&nbsp;
span and&nbsp;
a(href="https://devcord.com") Devcord
</template>

170
store.json
View File

@@ -1,75 +1,4 @@
[
{
"title": "Communities",
"slug": "/communities",
"resources": [
{
"title": "Devcord",
"desc": "A community of developers and designers helping each other. ",
"url": "https://devcord.com"
},
{
"title": "DomainCord",
"desc": "DomainCord is the only domain name marketplace and discussion community built on top of the Discord platform.",
"url": "https://discord.gg/4KjgdNd"
},
{
"title": "Developer Hangout",
"desc": "Hangout and learn with new and experienced developers in this Discord community. All ages and experience levels welcome!",
"url": "https://discord.gg/developers"
},
{
"title": "Glitch",
"desc": "Glitch is the friendly community where everyone can discover and create the best stuff on the web.",
"url": "https://glitch.com/"
},
{
"title": "WebGL and Threejs",
"desc": "desc",
"url": "https://discord.gg/PJAjxvX"
},
{
"title": "Design Drop",
"desc": "We're a community built up of creatives, who are looking to improve ourselves, meet new people, and have fun.",
"url": "https://discord.gg/yNBY9bP"
},
{
"title": "/r/webdev",
"desc": "A community dedicated to all things web development: both front-end and back-end.",
"url": "https://reddit.com/r/webdev"
},
{
"title": "/r/web_design",
"desc": "A community dedicated to all things web design.",
"url": "https://reddit.com/r/web_design"
},
{
"title": "/r/javascript",
"desc": "All about the JavaScript programming language!",
"url": "https://reddit.com/r/javascript"
},
{
"title": "/r/php",
"desc": "Ask questions about frameworks, try your hand at php golf and strike gold or simply show off your latest work.",
"url": "https://reddit.com/r/php"
},
{
"title": "/r/html",
"desc": "A subreddit about HTML.",
"url": "https://reddit.com/r/html"
},
{
"title": "/r/css",
"desc": "For discussing Cascading Style Sheets, design principles, and technological innovations related to web development.",
"url": "https://reddit.com/r/css"
},
{
"title": "MedellinJS",
"desc": "We are a passionate community whose goal is to strengthen and articulate the technological ecosystem of the city of Medellín, Colombia.",
"url": "https://medellinjs.org/"
}
]
},
{
"title": "CSS",
"slug": "/css",
@@ -173,6 +102,16 @@
"title": "JustREM",
"desc": "Easily and quickly convert pixel values into rem values.",
"url": "https://justrem.xyz/"
},
{
"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/"
},
{
"title": "Interactive CSS box-model view",
"desc": "Learn CSS box-model by interractively changing the values.",
"url": "https://codepen.io/carolineartz/full/ogVXZj"
}
]
},
@@ -204,6 +143,16 @@
"title": "Producthunt",
"desc": "Check popular new products out and get inspired, maybe even post yours?",
"url": "https://www.producthunt.com/"
},
{
"title": "dailydevlinks",
"desc": "Fresh, daily links so you can keep up-to-date with everything developer ",
"url": "https://dailydevlinks.com/"
},
{
"title": "Sidebar.io",
"desc": "The five best design links, every day.",
"url": "https://sidebar.io/"
}
]
},
@@ -246,6 +195,21 @@
"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"
},
{
"title": "One Page Love",
"desc": "One Page websites, templates and resources",
"url": "https://onepagelove.com/"
},
{
"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/"
},
{
"title": "Httpster",
"desc": "Httpster is an inspiration resource showcasing totally rocking websites made by people from all over the world.",
"url": "https://httpster.net/"
},
{
"title": "siteinspire",
"desc": "siteInspire is a showcase of the finest web and interactive design.",
@@ -295,6 +259,16 @@
"title": "evernote.design",
"desc": "Basically webgems but just for design.",
"url": "https://evernote.design"
},
{
"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"
},
{
"title": "UX Collective",
"desc": "A Medium-based blog, curating articles on modern UX Design practices, conventions, and ideas.",
"url": "https://uxdesign.cc/"
}
]
},
@@ -342,6 +316,11 @@
"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"
},
{
"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"
}
]
},
@@ -444,6 +423,11 @@
"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/"
},
{
"title": "Trends",
"desc": "Browse trending github repos written in your favorite language with this high performance progressive web application",
"url": "https://trends.now.sh/"
}
]
},
@@ -510,6 +494,26 @@
"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"
},
{
"title": "BundlePhobia",
"desc": "Find the cost of adding a npm package to your bundle",
"url": "https://bundlephobia.com/"
},
{
"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"
},
{
"title": "Javascript Weekly",
"desc": "A free, once–weekly email roundup of JavaScript news and articles.",
"url": "https://javascriptweekly.com/"
},
{
"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"
}
]
},
@@ -542,11 +546,6 @@
"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/"
},
{
"title": "PHP Subreddit",
"desc": "Ask questions about frameworks, try your hand at php golf and strike gold or simply show off your latest work.",
"url": "https://reddit.com/r/php"
},
{
"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.",
@@ -623,11 +622,6 @@
"desc": "Find, install and publish Python packages with the Python Package Index",
"url": "https://pypi.org/"
},
{
"title": "Learn Python in y minutes",
"desc": "A mad dash through everything!",
"url": "https://learnxinyminutes.com/docs/python/"
},
{
"title": "Boost.Python",
"desc": "A C++ library which enables seamless interoperability between C++ and the Python programming language.",
@@ -919,6 +913,16 @@
"title": "Servers for hackers",
"desc": "Tutorials on how to handle your servers.",
"url": "https://serversforhackers.com/"
},
{
"title": "Glitch",
"desc": "The friendly community where everyone can discover & create the best apps on the web.",
"url": "https://glitch.com/"
},
{
"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/"
}
]
},
@@ -1024,7 +1028,7 @@
{
"title": "Gifless",
"desc": "Create emoji and text gifs in seconds",
"url": "https://www.gifless.com/"
"url": "https://gifless.herokuapp.com/"
},
{
"title": "Learn Git",
@@ -1032,7 +1036,7 @@
"url": "https://www.atlassian.com/git/tutorials"
},
{
"title": "Git form the inside out",
"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"
},