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

Merge branch 'dev' into resources/design

Browse Source
This commit is contained in:
Kevin van der Werff
2019-10-13 12:02:58 +02:00
committed by GitHub
parent 21af7bf7ad 7a6aac330d
commit f0dac9739a
15 changed files with 212 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
resources/accessibility.json Normal file
View File

@@ -0,0 +1,25 @@
{
"title": "Accessibility",
"slug": "/accessibility",
"resources": [
{
"title": "Userway",
"desc": "Provides accessibility plugins that work without refactoring your website's existing code and will increase compliance with WCAG 2.1 , ATAG 2.0 , ADA ,& Section 508 requirements.",
"url": "https://userway.org/",
"tags": []
},
{
"title": "The A11Y Checklist",
"desc": "This checklist uses the The Web Content Accessibility Guidelines (WCAG) as a reference point. The WCAG is a shared standard for web content accessibility for individuals, organizations, and governments.",
"url": "https://a11yproject.com/checklist/",
"tags": []
},
{
"title": "HTML_CodeSniffer",
"desc": "A client-side script that checks HTML source code and detects violations of a defined coding standard.",
"url": "http://squizlabs.github.io/HTML_CodeSniffer/",
"tags": []
}
]
}

50
resources/css.json
View File

@@ -6,132 +6,138 @@
"title": "CSS Grid Generator",
"desc": "Visually create your css grid and export the code.",
"url": "https://cssgrid-generator.netlify.com/",
"tags": []
"tags": ["generator", "grid", "layout", "visual tool"]
},
{
"title": "Keyframes Editor",
"desc": "An insanely simple way to create CSS animations",
"url": "https://keyframes.app/editor/",
"tags": []
"tags": ["generator", "animation", "visual tool"]
},
{
"title": "Flexbox Froggy",
"desc": "A game to learn Flexbox",
"url": "https://flexboxfroggy.com",
"tags": []
"tags": ["educational", "beginner"]
},
{
"title": "Flexbox Zombies",
"desc": "A course to learn Flexbox",
"url": "https://mastery.games/p/flexbox-zombies",
"tags": []
"tags": ["educational", "beginner"]
},
{
"title": "CSS Gridgarden",
"desc": "A game to learn Grid",
"url": "https://cssgridgarden.com",
"tags": []
"tags": ["educational", "beginner"]
},
{
"title": "30 Seconds of Code",
"desc": "A curated collection of useful CSS snippets you can understand in 30 seconds or less.",
"url": "https://30-seconds.github.io/30-seconds-of-css/",
"tags": []
"tags": ["tips", "tricks", "collection"]
},
{
"title": "Grid by example",
"desc": "Everything you need to learn CSS Grid Layout",
"url": "https://gridbyexample.com/learn/",
"tags": []
"tags": ["example", "showcase", "educational"]
},
{
"title": "BEM naming convention",
"desc": "Block Element Modifier is a methodology that helps you to create reusable components and code sharing in front-end development",
"url": "https://getbem.com/",
"tags": []
"tags": ["convention", "naming", "structure"]
},
{
"title": "CSS Triggers",
"desc": "Overview of css attributes which trigger either layout, paint or composite. Good to know if you want to learn more about css performance.",
"url": "https://csstriggers.com/",
"tags": []
"tags": ["performance", "rendering"]
},
{
"title": "A complete guide to flexbox",
"desc": "A comprehensive guide to flexbox, focusing on all the different possible properties for the parent element (the flex container).",
"url": "https://css-tricks.com/snippets/css/a-guide-to-flexbox/",
"tags": []
"tags": ["guide", "educational"]
},
{
"title": "Learn CSS layout",
"desc": "This site teaches the CSS fundamentals that are used in any website's layout (Unfortunately nothing abour display:grid yet).",
"desc": "This site teaches the CSS fundamentals that are used in any website's layout.",
"url": "http://learnlayout.com",
"tags": []
"tags": ["layout", "educational", "beginner"]
},
{
"title": "CSSmatic - box shadow generator",
"desc": "The ultimate box shadow generator",
"url": "https://www.cssmatic.com/box-shadow",
"tags": []
"tags": ["generator", "visual tool"]
},
{
"title": "AirBnB CSS / Sass Styleguide",
"desc": "A mostly reasonable approach to css and sass.",
"url": "https://github.com/airbnb/css",
"tags": []
"tags": ["structure", "styleguide", "convention"]
},
{
"title": "Animista",
"desc": "CSS animations on demand.",
"url": "http://animista.net/",
"tags": []
"tags": ["animation", "collection", "generator", "visual tool"]
},
{
"title": "Use CSS Grids the right way",
"desc": "CSS Grid is robust, flexible, and a refreshing paradigm shift from other CSS layout systems. While these are selling points for Grid, they also make it hard to learn.",
"url": "https://vgpena.github.io/using-css-grid-the-right-way/",
"tags": []
"tags": ["guide", "educational"]
},
{
"title": "CSS Protips",
"desc": "A collection of tips to help take your CSS skills pro.",
"url": "https://github.com/AllThingsSmitty/css-protips#readme",
"tags": []
"tags": ["collection", "tips", "tricks"]
},
{
"title": "Flexbox Defense",
"desc": "Your job is to stop the incoming enemies from getting past your defenses. Unlike other tower defense games, you must position your towers using CSS!",
"url": "http://www.flexboxdefense.com/",
"tags": []
"tags": ["educational", "beginner"]
},
{
"title": "CSS Diner",
"desc": "Learn CSS selectors while playing a game.",
"url": "https://flukeout.github.io/",
"tags": []
"tags": ["educational", "beginner"]
},
{
"title": "CSS Animation",
"desc": "CSS animation articles, tips and tutorials. Level Up Your CSS Animation Skills.",
"url": "https://cssanimation.rocks/",
"tags": []
"tags": ["collection", "guide", "educational"]
},
{
"title": "JustREM",
"desc": "Easily and quickly convert pixel values into rem values.",
"url": "https://justrem.xyz/",
"tags": []
"tags": ["units"]
},
{
"title": "(Re)learn css layout",
"desc": "If you find yourself wrestling with CSS layout, it’s likely you’re making decisions for browsers they should be making themselves. Through a series of simple, composable layouts, Every Layout will teach you how to better harness the built-in algorithms that power browsers and CSS.",
"url": "https://every-layout.dev/",
"tags": []
"tags": ["educational", "guide"]
},
{
"title": "Interactive CSS box-model view",
"desc": "Learn CSS box-model by interractively changing the values.",
"url": "https://codepen.io/carolineartz/full/ogVXZj",
"tags": ["visual tool", "educational", "beginner"]
},
{
"title": "Bennett Feely clip-path maker",
"desc": "This CSS clip-path maker helps you understand the clip-path property and all the cool things you can do with it.",
"url": "https://bennettfeely.com/clippy/",
"tags": []
}
]

14
resources/daily.json
View File

@@ -6,43 +6,43 @@
"title": "dev.to",
"desc": "Where programmers share ideas and help each other grow. It is an online community for sharing and discovering great ideas, having debates, and making friends.",
"url": "https://www.dev.to",
"tags": []
"tags": ["community", "reading"]
},
{
"title": "CSS Tricks",
"desc": "Daily webdev related articles, snippets and guides since 2007",
"url": "https://css-tricks.com/",
"tags": []
"tags": ["reading", "educational", "design"]
},
{
"title": "Smashing magazine",
"desc": "Founded in September 2006 in Germany, Smashing Magazine delivers reliable, useful, but most importantly practical articles to web designers and developers. ",
"url": "https://www.smashingmagazine.com/",
"tags": []
"tags": ["reading", "educational", "design", "development"]
},
{
"title": "Hackernews",
"desc": "Hacker News is a social news website focusing on computer science and entrepreneurship.",
"url": "https://news.ycombinator.com/",
"tags": []
"tags": ["forum", "development", "reading"]
},
{
"title": "Producthunt",
"desc": "Check popular new products out and get inspired, maybe even post yours?",
"url": "https://www.producthunt.com/",
"tags": []
"tags": ["discover", "explore"]
},
{
"title": "dailydevlinks",
"desc": "Fresh, daily links so you can keep up-to-date with everything developer ",
"url": "https://dailydevlinks.com/",
"tags": []
"tags": ["development", "reading"]
},
{
"title": "Sidebar.io",
"desc": "The five best design links, every day.",
"url": "https://sidebar.io/",
"tags": []
"tags": ["design", "reading"]
}
]
}

26
resources/design.json
View File

@@ -157,6 +157,30 @@
"desc": "descCool Backgrounds offers a selection of beautiful, enticing image backgrounds to add to your blog post, website, or wallpaper.",
"url": "https://coolbackgrounds.io/",
"tags": ["background", "inspiration"]
},
{
"title": "Fontjoy",
"desc": "Generate font combinations with deep learning.",
"url": "https://fontjoy.com/",
"tags": []
},
{
"title": "Can't Unsee",
"desc": "A game where your attention to details earns you a lot of coins. WARNING: Once you see the difference between the images, you won't be able to unsee it!",
"url": "https://cantunsee.space/",
"tags": []
},
{
"title": "Image Color Picker",
"desc": "Image color picker and palette generator.",
"url": "https://image-color.com",
"tags": ["generator"]
},
{
"title": "GoodBrief",
"desc": "GoodBrief is a random generator for design briefs. Choose the type of creative work and the industry, and goodbrief will generate a unique brief.",
"url": "http://goodbrief.io",
"tags": ["generator"]
}
]
}
}

14
resources/general.json
View File

@@ -56,17 +56,17 @@
"url": "https://www.codewars.com/",
"tags": []
},
{
"title": "Exercism",
"desc": "Learn to code in a variety of languages. Complete programming challenges, view other's solutions, and get community feedback on your code.",
"url": "https://exercism.io",
"tags": []
},
{
"title": "Learn X in Y min",
"desc": "Take a whirlwind tour of your next favorite language. Community-driven!",
"url": "https://learnxinyminutes.com/",
"tags": []
},
{
"title": "The A11Y Checklist",
"desc": "This checklist uses the The Web Content Accessibility Guidelines (WCAG) as a reference point. The WCAG is a shared standard for web content accessibility for individuals, organizations, and governments.",
"url": "https://a11yproject.com/checklist/",
"tags": []
}
]
}
}

30
resources/icons.json Normal file
View File

@@ -0,0 +1,30 @@
{
"title": "Icons",
"slug": "/icons",
"resources": [
{
"title": "Font awesome",
"desc": "CSS and LESS based font and icon toolkit.",
"url": "https://fontawesome.com/",
"tags": []
},
{
"title": "Icomoon",
"desc": "IcoMoon provides a package of vector icons, along with a free HTML5 app for making custom icon fonts or SVG sprites.",
"url": "https://icomoon.io/",
"tags": []
},
{
"title": "Icons8",
"desc": "Get free icons designed to combine perfectly and fit into the style of your design.",
"url": "https://icons8.com/",
"tags": []
},
{
"title": "Material Icons",
"desc": "Material icons are delightful, beautifully crafted symbols for common actions and items. Download on desktop to use them in your digital products for Android, iOS, and web.",
"url": "https://material.io/resources/icons",
"tags": []
}
]
}

12
resources/index.js
View File

@@ -12,6 +12,14 @@ import python from './python'
import ruby from './ruby'
import server from './server'
import utility from './utility'
import icons from './icons'
import accessibility from './accessibility'
const sortByTitle = ({ title: titleA }, { title: titleB }) => {
if(titleA < titleB) return -1
if(titleA > titleB) return 1
return 0
}
export default [
css,
@@ -28,4 +36,6 @@ export default [
ruby,
server,
utility,
]
icons,
accessibility,
].sort(sortByTitle)

8
resources/utility.json
View File

@@ -163,6 +163,12 @@
"desc": "Let's Encrypt is a free, automated, and open certificate authority brought to you by the non-profit Internet Security Research Group (ISRG).",
"url": "https://letsencrypt.org/",
"tags": []
},
{
"title": "Mailhog",
"desc": "Web and API based SMTP testing.",
"url": "https://github.com/mailhog/MailHog",
"tags": []
}
]
}
}