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

Merge pull request #74 from webgems/master

Browse Source 
syncing dev with master
This commit is contained in:
wellá
2019-06-20 01:59:01 +02:00
committed by GitHub
parent bc0aab4217 38be3e3398
commit 012b581f40
23 changed files with 1217 additions and 841 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
.github/ISSUE_TEMPLATE/feature_request.md vendored Normal file
View File

@@ -0,0 +1,20 @@
---
name: Feature request
about: Suggest an idea for this project
title: ''
labels: feature
assignees: ''
---
**Is your feature request related to a problem? Please describe.**
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
**Describe the solution you'd like**
A clear and concise description of what you want to happen.
**Describe alternatives you've considered**
A clear and concise description of any alternative solutions or features you've considered.
**Additional context**
Add any other context or screenshots about the feature request here.

17
.github/ISSUE_TEMPLATE/resource-request.md vendored Normal file
View File

@@ -0,0 +1,17 @@
---
name: Resource request
about: Suggest a new resource
title: ''
labels: new resource
assignees: lostdesign
---
**Name**
webgems.io
**Description**
1-2 sentenses
**URL**
https://example.com

2
.gitignore vendored
View File

@@ -82,3 +82,5 @@ dist
# Service worker
sw.*
.DS_store

3
CONTRIBUTORS.md
View File

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

39
README.md
View File

@@ -33,20 +33,31 @@ For detailed explanation on how things work, checkout [Nuxt.js docs](https://nux
### How to add a new resource
In side the `pages` directory, choose any folder and modify each `index.vue`. At the moment you should add a resource to the end of the resources array.
Please use this schema:
We manage our resources in `store.json`. The schema is as follows:
```js
{
title: 'title',
desc: 'desc',
url: 'url'
},
[
{
"title": "Category",
"slug": "/category",
"resources": [
{
"title": "Awesome resource",
"desc": "This awesome resource will make your life much easier.", // 1 - 2 sentences long.
"url": "https://url.com"
}
]
}
]
```
> Currently do not use `'&'` as it will break the URL referencing as well as escape single qoutes with a backslash `\'`
For a whole new section, create a new folder in the `pages` directory - be aware that the folder name is equal to the route of the site `webgems.io/NEWFOLDERNAME`.
Inside the new section add at least the `index.vue` file and copy the structure of another section. Change the title and add it's own resources.
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`).
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.
## Built With
@@ -56,15 +67,15 @@ Inside the new section add at least the `index.vue` file and copy the structure
## Contributing
Please read [CONTRIBUTING.md](https://github.com/lostdesign/webgems/blob/master/CONTRIBUTING.md) for details on our code of conduct, and the process for submitting pull requests to us.
Please read [CONTRIBUTING.md](https://github.com/webgems/webgems/blob/master/CONTRIBUTING.md) for details on our code of conduct, and the process for submitting pull requests to us.
Make sure to add yourself to the `contributors` file once you've created a PR.
## Authors
* **lost.design** - *Initial work* - [lostdesign](https://github.com/lostdesign)
See also the list of [contributors](https://github.com/lostdesign/webgems/contributors) who participated in this project.
See also the list of [contributors](https://github.com/webgems/webgems/contributors) who participated in this project.
## License
This project is licensed under the GNU General Public License v3.0 - see the [LICENSE](https://github.com/lostdesign/webgems/blob/master/LICENSE) file for details
This project is licensed under the GNU General Public License v3.0 - see the [LICENSE](https://github.com/webgems/webgems/blob/master/LICENSE) file for details

2
components/Github.vue
View File

@@ -1,5 +1,5 @@
<template lang="pug">
a(href="https://github.com/lostdesign/webgems" class="github-corner" aria-label="View source on GitHub" target='webgems-github-repo' rel='noreferrer')
a(href="https://github.com/webgems/webgems" class="github-corner" aria-label="View source on GitHub" target='webgems-github-repo' rel='noreferrer')
svg(width="80" height="80" viewBox="0 0 250 250" style="fill:#08e5ff; color:#232331; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true")
path(d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z")
path(d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm")

36
components/Sidebar.vue
View File

@@ -1,37 +1,41 @@
<template lang="pug">
aside.nav
.sidebar
nuxt-link(to="/general") General
nuxt-link(to="/html") HTML
nuxt-link(to="/css") CSS
nuxt-link(to="/javascript") Javascript
nuxt-link(to="/php") PHP
nuxt-link(to="/design") Design
nuxt-link(to="/frontend") Frontend
nuxt-link(to="/fullstack") Fullstack
nuxt-link(to="/servers") Server
nuxt-link(to="/utility") Utility
nuxt-link(to="/daily") Daily
nuxt-link(to="/communities") Communities
template(v-for='category in categories')
nuxt-link(:to='category.slug') {{ category.title }}
</template>
<script>
import store from '../store.json'
export default {
data() {
return {
categories: [{ slug: '', title: '' }],
}
},
created() {
this.categories = store.map(({ title, slug }) => ({ title, slug }))
}
}
</script>
<style lang="scss" scoped>
.sidebar {
display:grid;
display: grid;
grid-template-columns: 1fr;
font-size: 14px;
a {
padding: .5rem 1rem .5rem 1rem;
padding: 0.5rem 1rem 0.5rem 1rem;
font-weight: 600;
}
}
@media (max-width: 400px) {
.sidebar {
display:grid;
grid-template-columns: repeat(auto-fit, minmax(6rem,1fr));
display: grid;
grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
}
}
</style>

8
nuxt.config.js
View File

@@ -1,4 +1,5 @@
import pkg from './package'
import store from './store.json'
export default {
mode: 'universal',
@@ -26,6 +27,13 @@ export default {
]
},
/*
** Generate dynamic routes
*/
generate: {
routes: store.map(category => category.slug)
},
/*
** Customize the progress-bar color
*/

27
pages/_category.vue Normal file
View File

@@ -0,0 +1,27 @@
<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')
</template>
<script>
import store from '../store.json'
import Card from '../components/Card'
export default {
data () {
return {
categoryRouteTitle: this.$route.params.category,
categories: store,
}
},
computed: {
category() {
return this.categories.find(category => category.title.toLowerCase() === this.categoryRouteTitle.toLowerCase())
}
},
components: { Card },
}
</script>

81
pages/communities/index.vue
View File

@@ -1,81 +0,0 @@
<template lang="pug">
div
h1 Communities
.cards
template(v-for='resource in resources')
Card(:title='resource.title' :desc='resource.desc' :url='resource.url')
</template>
<script>
import Card from '../../components/Card'
export default {
data() {
return {
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: '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'
},
]
}
},
components: {
Card
}
}
</script>
<style lang="scss" scoped>
</style>

116
pages/css/index.vue
View File

@@ -1,116 +0,0 @@
<template lang="pug">
div
h1 CSS
.cards
template(v-for='resource in resources')
Card(:title='resource.title' :desc='resource.desc' :url='resource.url')
</template>
<script>
import Card from '../../components/Card'
export default {
data() {
return {
resources: [
{
title: 'CSS Grid Generator',
desc: 'Visually create your css grid and export the code.',
url: 'https://cssgrid-generator.netlify.com/'
},
{
title: 'Keyframes Editor',
desc: 'An insanely simple way to create CSS animations',
url: 'https://keyframes.app/editor/'
},
{
title: 'Flexbox Froggy',
desc: 'A game to learn Flexbox',
url: 'https://flexboxfroggy.com'
},
{
title: 'CSS Gridgarden',
desc: 'A game to learn Grid',
url: 'https://cssgridgarden.com'
},
{
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/'
},
{
title: 'Grid by example',
desc: 'Everything you need to learn CSS Grid Layout',
url: 'https://gridbyexample.com/learn/'
},
{
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/'
},
{
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/'
},
{
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/'
},
{
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'
},
{
title: 'CSSmatic - box shadow generator',
desc: 'The ultimate box shadow generator',
url: 'https://www.cssmatic.com/box-shadow'
},
{
title: 'AirBnB CSS / Sass Styleguide',
desc: 'A mostly reasonable approach to css and sass.',
url: 'https://github.com/airbnb/css'
},
{
title: 'Animista',
desc: 'CSS animations on demand.',
url: 'http://animista.net/'
},
{
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/'
},
{
title: 'CSS Protips',
desc: 'A collection of tips to help take your CSS skills pro.',
url: 'https://github.com/AllThingsSmitty/css-protips#readme'
},
{
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/'
},
{
title: 'CSS Diner',
desc: 'Learn CSS selectors while playing a game.',
url: 'https://flukeout.github.io/'
},
{
title: 'CSS Animation',
desc: 'CSS animation articles, tips and tutorials. Level Up Your CSS Animation Skills.',
url: 'https://cssanimation.rocks/'
},
]
}
},
components: {
Card
}
}
</script>
<style lang="scss" scoped>
</style>

51
pages/daily/index.vue
View File

@@ -1,51 +0,0 @@
<template lang="pug">
div
h1 Daily
.cards
template(v-for='resource in resources')
Card(:title='resource.title' :desc='resource.desc' :url='resource.url')
</template>
<script>
import Card from '../../components/Card'
export default {
data() {
return {
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'
},
{
title: 'CSS Tricks',
desc: 'Daily webdev related articles, snippets and guides since 2007',
url: 'https://css-tricks.com/'
},
{
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/'
},
{
title: 'Hackernews',
desc: 'Hacker News is a social news website focusing on computer science and entrepreneurship.',
url: 'https://news.ycombinator.com/'
},
{
title: 'Producthunt',
desc: 'Check popular new products out and get inspired, maybe even post yours?',
url: 'https://www.producthunt.com/'
},
]
}
},
components: {
Card
}
}
</script>
<style lang="scss" scoped>
</style>

106
pages/design/index.vue
View File

@@ -1,106 +0,0 @@
<template lang="pug">
div
h1 Design
.cards
template(v-for='resource in resources')
Card(:title='resource.title' :desc='resource.desc' :url='resource.url')
</template>
<script>
import Card from '../../components/Card'
export default {
data() {
return {
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'
},
{
title: 'Undraw',
desc: 'Free vector illustrations for your website.',
url: 'https://undraw.co'
},
{
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'
},
{
title: 'UI tips',
desc: 'Design tips by Steve Schoger',
url: 'https://twitter.com/i/moments/880688233641848832'
},
{
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/'
},
{
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'
},
{
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'
},
{
title: 'siteinspire',
desc: 'siteInspire is a showcase of the finest web and interactive design.',
url: 'https://www.siteinspire.com'
},
{
title: 'ShapeFactory',
desc: 'Simple design tools for everyone. Simply create a logo, pigment/color scheme, gradient or duetone style.',
url: 'https://shapefactory.co'
},
{
title: 'lapa.ninja',
desc: 'The best resources for learning design.',
url: 'https://www.lapa.ninja/learn/'
},
{
title: 'Typography Handbook',
desc: 'A concise, referential guide on best web typographic practices.',
url: 'http://typographyhandbook.com'
},
{
title: 'Hyperpixel.io',
desc: 'Discover the latest designs for your own inspiration from our curated list of landing pages.',
url: 'https://hyperpixel.io/'
},
{
title: 'sharpen.design',
desc: 'Sharpen is where designers hone their craft - randomly generated design challenges.',
url: 'https://sharpen.design/'
},
{
title: 'Good UI',
desc: 'A Good User Interface Is One That\'s Backed By Reproducible Evidence (A/B Tests)',
url: 'https://goodui.org/'
},
{
title: 'SVG ON THE WEB',
desc: 'A Practical Guide',
url: 'https://svgontheweb.com/'
},
{
title: 'UI Gradients',
desc: 'Beautiful colour gradients for design and code.',
url: 'https://uigradients.com/#NoontoDusk'
},
]
}
},
components: {
Card
}
}
</script>
<style lang="scss" scoped>
</style>

51
pages/frontend/index.vue
View File

@@ -1,51 +0,0 @@
<template lang="pug">
div
h1 Frontend
.cards
template(v-for='resource in resources')
Card(:title='resource.title' :desc='resource.desc' :url='resource.url')
</template>
<script>
import Card from '../../components/Card'
export default {
data() {
return {
resources: [
{
title: 'Frontend Handbook 2019',
desc: 'A lovely guide made by frontendmasters.',
url: 'https://frontendmasters.com/books/front-end-handbook/2019/'
},
{
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/'
},
{
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/'
},
{
title: 'Frontendmasters',
desc: 'Premium tier video courses for any modern stack. Monthly or yearly subscription.',
url: 'https://frontendmasters.com'
},
{
title: 'Don\'t fear the internet',
desc: 'Basic HTML & CSS for NON-WEB DESIGNERS',
url: 'http://www.dontfeartheinternet.com/'
},
]
}
},
components: {
Card
}
}
</script>
<style lang="scss" scoped>
</style>

38
pages/fullstack/index.vue
View File

@@ -1,38 +0,0 @@
<template lang="pug">
div
h1 Fullstack
.cards
template(v-for='resource in resources')
Card(:title='resource.title' :desc='resource.desc' :url='resource.url')
</template>
<script>
import Card from '../../components/Card'
export default {
data() {
return {
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'
},
{
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'
},
]
}
},
components: {
Card
}
}
</script>
<style lang="scss" scoped>
</style>

83
pages/general/index.vue
View File

@@ -1,83 +0,0 @@
<template lang="pug">
div
h1 General
.cards
template(v-for='resource in resources')
Card(:title='resource.title' :desc='resource.desc' :url='resource.url')
</template>
<script>
import Card from '../../components/Card'
export default {
data() {
return {
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/'
},
{
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'
},
{
title: 'MDN web docs',
desc: 'Tutorials, references, tools and resources.',
url: 'https://developer.mozilla.org/en-US/docs/Web'
},
{
title: 'Rico\'s cheatsheets',
desc: 'Cheatsheets for any kind of technologies in the web domain.',
url: 'https://devhints.io'
},
{
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'
},
{
title: 'ebookfoundation',
desc: 'Freely available programming books',
url: 'https://ebookfoundation.github.io/free-programming-books/'
},
{
title: 'Google Developer',
desc: 'Tutorials, guides, and best practices for building the next generation of web experiences.',
url: 'https://developers.google.com/web/'
},
{
title: 'Google Chrome Youtube',
desc: 'Making the web more awesome - latest news about google chrome',
url: 'https://www.youtube.com/channel/UCnUYZLuoy1rq1aVMwx4aTzw'
},
{
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/'
},
{
title: 'Learn X in Y min',
desc: 'Take a whirlwind tour of your next favorite language. Community-driven!',
url: 'https://learnxinyminutes.com/'
},
{
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/'
},
]
}
},
components: {
Card
}
}
</script>
<style lang="scss" scoped>
</style>

56
pages/html/index.vue
View File

@@ -1,56 +0,0 @@
<template lang="pug">
div
h1 HTML
.cards
template(v-for='resource in resources')
Card(:title='resource.title' :desc='resource.desc' :url='resource.url')
</template>
<script>
import Card from '../../components/Card'
export default {
data() {
return {
resources: [
{
title: 'HTML ELEMENTS',
desc: 'All the HTML elemens you can use. There is more than just a div :)',
url: 'https://developer.mozilla.org/de/docs/Web/HTML/Element'
},
{
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/'
},
{
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'
},
{
title: 'Awesome Canvas',
desc: 'A curated list of awesome Canvas examples, related articles and posts.',
url: 'https://github.com/raphamorim/awesome-canvas#readme'
},
{
title: 'HTML Spec',
desc: 'This specification defines a big part of the Web platform, in lots of detail.',
url: 'https://html.spec.whatwg.org/'
},
{
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/'
},
]
}
},
components: {
Card
}
}
</script>
<style lang="scss" scoped>
</style>

21
pages/index.vue
View File

@@ -4,11 +4,14 @@
h1.text-black.font-bold.text-xl.mb-2 What is &nbsp;
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 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 By the way, this project lives by getting shared, if you find this worthy please share it with others.
p made with love by&nbsp;
a(href="https://twitter.com/lostdesign") @lostdesign
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
</template>
@@ -19,6 +22,18 @@
justify-content: center;
align-items: center;
}
.muted {
font-size: 0.8rem;
opacity: 0.5;
margin-top: 3rem;
margin-bottom: 0;
}
.contributors {
margin-top: 0;
}
main {
display:flex;
flex-direction: column;

86
pages/javascript/index.vue
View File

@@ -1,86 +0,0 @@
<template lang="pug">
div
h1 Javascript
.cards
template(v-for='resource in resources')
Card(:title='resource.title' :desc='resource.desc' :url='resource.url')
</template>
<script>
import Card from '../../components/Card'
export default {
data() {
return {
resources: [
{
title: 'WarriorJS',
desc: 'An exciting game of programming and Artificial Intelligence',
url: 'https://warrior.js.org/'
},
{
title: 'Javascript30',
desc: 'Free video courses about javascript. Made by WesBos',
url: 'https://javascript30.com'
},
{
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'
},
{
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/'
},
{
title: 'Javascript Info',
desc: 'How it\'s done now. From the basics to advanced topics with simple, but detailed explanations.',
url: 'https://javascript.info/'
},
{
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'
},
{
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'
},
{
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'
},
{
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'
},
{
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/'
},
{
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'
},
{
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'
},
]
}
},
components: {
Card
}
}
</script>
<style lang="scss" scoped>
</style>

91
pages/php/index.vue
View File

@@ -1,91 +0,0 @@
<template lang="pug">
div
h1 PHP
.cards
template(v-for='resource in resources')
Card(:title='resource.title' :desc='resource.desc' :url='resource.url')
</template>
<script>
import Card from '../../components/Card'
export default {
data() {
return {
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'
},
{
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/'
},
{
title: 'PHP for beginners',
desc: 'We all start somewhere. When it comes to web development with PHP, well, your first stop is this series. Designed specifically and exclusively for beginners, here, you\'ll learn the fundamentals of PHP - all the way down to defining variables and arrays.',
url: 'https://laracasts.com/series/php-for-beginners'
},
{
title: 'Learn PHP in Y Minutes',
desc: 'A quick short overview of PHP utilizing most of the spec.',
url: 'https://learnxinyminutes.com/docs/php/'
},
{
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/'
},
{
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/'
},
{
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.',
url: 'https://phpdelusions.net/pdo'
},
{
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/'
},
{
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'
},
{
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/'
},
{
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/'
},
{
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'
},
]
}
},
components: {
Card
}
}
</script>
<style lang="scss" scoped>
</style>

46
pages/servers/index.vue
View File

@@ -1,46 +0,0 @@
<template lang="pug">
div
h1 Servers
.cards
template(v-for='resource in resources')
Card(:title='resource.title' :desc='resource.desc' :url='resource.url')
</template>
<script>
import Card from '../../components/Card'
export default {
data() {
return {
resources: [
{
title: 'Netlify',
desc: 'Free static hosting with privacy in mind!',
url: 'https://netlify.com'
},
{
title: 'Github Pages',
desc: 'Free static hosting by Github.',
url: 'https://pages.github.com'
},
{
title: 'Namecheap',
desc: 'Domains for your projects',
url: 'https://namecheap.com'
},
{
title: 'Servers for hackers',
desc: 'Tutorials on how to handle your servers.',
url: 'https://serversforhackers.com/'
},
]
}
},
components: {
Card
}
}
</script>
<style lang="scss" scoped>
</style>

17
pages/utility/index.vue
View File

@@ -132,7 +132,22 @@ export default {
title: 'Carbon',
desc: 'Create and share beautiful images of your source code.',
url: 'https://carbon.now.sh'
}
},
{
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/'
},
{
title: 'Ngrok',
desc: 'Secure introspectable tunnels to localhost.',
url: 'https://ngrok.com/'
},
{
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/'
},
]
}
},

1061
store.json Normal file
View File

File diff suppressed because it is too large Load Diff