diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index b453829..719f1dc 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -34,6 +34,7 @@ Contributions are what make the open source community such an amazing place to l - Keywords array should contain strings only. - Keywords are preferred in lower case. - Keywords must be specific. Do not include broad keywords such as 'guide', 'tutorial', 'information' or we will be unable to process your PR. Please opt for keywords that are specific to the content. + - Description should be clear and concise. Resource Format: @@ -41,6 +42,7 @@ Contributions are what make the open source community such an amazing place to l { name: 'resource name', url: 'url here', + description: 'add a detailed description', keywords: ['each', 'keyword', 'should', 'be', 'a', 'string'] }, ``` @@ -78,7 +80,7 @@ If you want to help us improve our API, please fork the repo and follow these st 5. Create a new branch for your Feature (`git branch AmazingFeature`) 6. Switch to the branch you are working on (`git checkout AmazingFeature`) 7. Make your changes, commit after every isolated task. -8. Add all of your changes (`git add .`) +8. Add all of your changes (`git add ` or `git add .`). Do not push any changes to dependencies unless the Issue calls for it. 9. Commit your changes with a detailed description (`git commit -m 'added a, solved b, etc...'`) 10. Push to the Branch (`git push origin AmazingFeature`) 11. Open a Pull Request and follow the rules under "Where should I make my pull request to?" diff --git a/public/css/style.css b/public/css/style.css index f9d35e9..4aa0e77 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -66,20 +66,11 @@ nav { background-color: lightgrey; } -nav::after { - height: 10rem; - background-color: transparent; - display: flex; - align-items: center; - justify-content: space-between; - padding: 0 5rem; -} - nav > img { height: 100px; } -/* contributors */ +/* contributors button */ #contributors { --color: rgb(30, 30, 30); @@ -227,11 +218,7 @@ main { border-radius: 25px; } -@media all and (min-width: 1280px) { - .result { - margin-top: 2rem; - } -} + .scroll-container { overflow-y: scroll; @@ -456,18 +443,6 @@ table.darkTable #keywords{ justify-content: center; } -@media all and (max-width: 1790px) { - .contributors { - margin: 3rem 11rem; - } -} - -@media all and (max-width: 1441px) { - .contributors { - margin: 3rem 3rem; - } -} - .contributors .section { padding: 0 2rem; width: 435px; @@ -492,7 +467,7 @@ table.darkTable #keywords{ gap: 25px; position: relative; z-index: 2; - padding: 0 1.3rem; + padding-left: 1.3rem; } .card::after { @@ -638,4 +613,430 @@ hr { width: 80% ; } +/* MOBILE RESPONSIVESS */ + +/* Main */ + +@media all and (min-width: 1px) and (max-width: 800px) { + + nav { + justify-content: center; + } + + main { + flex-wrap: wrap; + flex-direction: column; + } + + .description > h1 { + width: 100%; + font-size: 3rem; + } + + .description > p { + width: 100%; + font-size: 1.5rem; + } + + .description, .api-test { + width: 100%; + } + + .api-test { + margin-top: 2rem; + } + + .api-test form{ + margin-bottom: 2rem; + } + + .api-test form input{ + width: 80%; + } + .api-test form input:focus{ + width: 80%; + } + + .api-test form button{ + width: 20%; + } + + .api-test .result{ + width: 100%; + } + + #contributors { + display: none; + } +} + +@media all and (min-width: 801px) and (max-width: 1024px) { + + nav { + justify-content: center; + } + + main { + flex-wrap: wrap; + flex-direction: column; + align-items: center; + } + + .description{ + text-align: justify; + } + + .description > h1 { + width: 100%; + font-size: 3rem; + } + + .description > p { + width: 100%; + font-size: 1.5rem; + } + + .description{ + width: 100%; + } + + .api-test { + margin-top: 2rem; + width: 80%; + } + + + .api-test form{ + width: 100%; + margin-bottom: 2rem; + } + + .api-test form input{ + width: 80%; + } + .api-test form input:focus{ + width: 80%; + } + + .api-test form button{ + width: 20%; + } + + .api-test .result{ + width: 100%; + } + + #contributors { + display: none; + } + +} + + +@media all and (min-width: 1026px) and (max-width: 1180px) { + main { + gap: 2rem; + padding: 3rem; + margin: 0; + } + + .description { + display: flex; + align-items: flex-start; + } + + .description h1, .description p { + width: 100%; + } + + .api-test { + justify-content: space-between; + } + + .api-test form input { + width: 80% + } + + .api-test form button { + width: 20% + } + + .api-test form input:focus { + width: 80% + } + + .api-test .result { + width: 100% + } +} + + +@media all and (max-width: 500px) { + ul { + margin: 1.5rem 1rem; + list-style: none; + padding: 0; + } +} + +@media all and (min-width: 1300px) { + + .api-test form { + margin-bottom: 2rem; + } +} + + +/* Documentation */ + +@media all and (min-width: 1px) and (max-width: 800px) { + + .documentation { + padding: 3rem 1rem; + } + + table.darkTable { + width: 100%; + } + + .endpoints { + margin: 3rem 0; + gap: 5rem; + display: flex; + flex-wrap: wrap; + } + + .endpoints div { + width: 100%; + } + + .endpoints h3 { + font-size: 1rem; + font-weight: 500; + margin: 0; + } +} + +@media all and (min-width: 320px) and (max-width: 450px) { + + .object-table h3 { + text-align: center; + } + + table.darkTable tbody td { + font-size: 14px; + } + + table.darkTable thead th { + font-size: 12px; + + } + + .endpoints code { + font-size: 1rem; + } + + .endpoints h3 { + text-align: center; + } + + .endpoints h4 { + padding: 0 1rem; + text-align: center; + } + +} + + +@media all and (min-width: 320px) and (max-width: 1024px) { + + .endpoints h4 { + padding: 0 2rem; + } + + .endpoints h3 { + padding: 0; + } + +} + +@media all and (min-width: 801px) and (max-width: 1024px) { + .endpoints { + margin: 3rem 0; + gap: 5rem; + display: flex; + flex-wrap: wrap; + } + + .endpoints div { + width: 80%; + } + + .endpoints h3 { + font-size: 1rem; + font-weight: 500; + margin: 0; + } +} + + +/* Contributors */ + +@media all and (min-width: 1px) and (max-width: 319px) { + .frame { + margin: 0; + padding: 0; + border-radius: 0; + } + + .contributors { + width: 100%; + margin: 0; + margin-bottom: 3rem; + padding: 0; + flex-direction: column; + display: flex; + align-items: center; + gap: 15px; + } + + .contributors .section { + padding: 0 2rem; + gap: 20px; + } + + .card { + height: 120px; + width: 70%; + padding-left: 0.8rem; + margin: 0; + gap: 15px; + } + + .card img { + height: 80px; + width: 80px; + } + + .cont-info h4 { + font-size: 1.2rem; + } + + + .icons { + gap: 1rem; + font-size: 1.5rem; + } +} + +@media all and (min-width: 320px) and (max-width: 1024px) { + .frame { + margin: 0; + padding: 0; + border-radius: 0; + } + + .contributors { + width: 100%; + margin: 0; + margin-bottom: 3rem; + padding: 0; + flex-direction: column; + display: flex; + align-items: center; + } + + .contributors .section { + padding: 0; + } + + .section { + width: 100vw; + padding: 0; + margin: 0; + } + + .card { + width: 350px; + padding-left: 1rem; + margin: 0; + margin-top: 1rem; + } + + .card h4 { + font-size: 1.5rem; + } + #contributors-title { + padding-bottom: 2rem; + } +} + +@media all and (min-width: 1025px) and (max-width: 1180px) { + + #contributors-title { + padding-top: 3rem; + } + + .contributors { + margin: 3rem 0rem; + } + + .contributors .section { + padding: 0 2rem; + gap: 20px; + } + + .card { + height: 120px; + padding-left: 0.8rem; + margin: 0; + gap: 15px; + } + + .card img { + height: 80px; + width: 80px; + } + + .cont-info h4 { + font-size: 1.2rem; + } + + + .icons { + gap: 1rem; + font-size: 1.5rem; + } + +} + +@media all and (min-width: 1181px){ + + #contributors-title { + padding-top: 3rem; + } + + .contributors { + margin: 3rem 0rem; + } + + .contributors .section { + padding: 0 2rem; + width: 380px; + } + + .card { + padding-left: 0.8rem; + } + + .cont-info h4 { + font-size: 1.3rem; + } + + .icons { + gap: 1rem; + font-size: 1.5rem; + } + +} diff --git a/public/js/main.js b/public/js/main.js index a3c16a5..a4a2212 100644 --- a/public/js/main.js +++ b/public/js/main.js @@ -69,6 +69,7 @@ function renderMatches(matches) {

name: ${match.name},

url: '${match.url}',
+

description: ${match.description},

keywords: [${match.keywords.map(keyword => `'${keyword}'`).join(", ")}]
}, diff --git a/resources.js b/resources.js index 92852fe..9ec9861 100644 --- a/resources.js +++ b/resources.js @@ -2,305 +2,364 @@ const resources = [ { name: 'Oh Shit, Git!', url: 'https://ohshitgit.com/', + description: 'A guide to git commands', keywords: ['git', 'version control', 'command line'], }, { name: 'Javascript.info - Arrays', url: 'https://javascript.info/array', + description: 'An informative article on arrays', keywords: ['arrays', 'javascript'], }, { name: 'Building a Simple CRUD App with Node, Express, and MongoDB', url: 'https://zellwk.com/blog/crud-express-mongodb/', + description: 'A comprehensive tutorial on how to build a CRUD app that lets you track a list of quotes from Star Wars characters using Node, Express and MongoDB ', keywords: ['mongodb', 'express', 'node', 'backend', 'javascript'], }, { name: 'Useful string methods', url: 'https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods', + description: 'An article on the useful operations that can be done on strings with built-in methods', keywords: ['string methods', 'javascript'], }, { name: 'The JavaScript Way', url: 'https://github.com/thejsway/thejsway', + description: 'A book that aims to be a useful companion for anyone wishing to (re)discover the many facets of JavaScript', keywords: ['javascript'], }, { name: 'First Timers Only: Beginner Guide to Open Source', url: 'https://www.firsttimersonly.com/', - keywords: ['open source'], + description: 'Friendly open source projects for code-newbies', + keywords: ['open source', 'code newbies'], }, { name: 'A Complete Guide to Flexbox', url: 'https://css-tricks.com/snippets/css/a-guide-to-flexbox/', - keywords: ['css', 'flexbox'], + description: 'A complete guide that explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and the child elements (the flex items). It also includes history, demos, patterns, and a browser support chart', + keywords: ['css', 'flexbox', 'properties', 'parent element', 'child element', 'flex items'], }, { name: 'Learn to Code HTML & CSS', url: 'https://learn.shayhowe.com/html-css/', - keywords: ['css', 'html'], + description: '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', + keywords: ['css', 'html', 'shay howe'], }, { name: 'CSS-Tricks', url: 'https://css-tricks.com/', + description: 'Daily articles about CSS, HTML, JavaScript, and all things related to web design and development.', keywords: ['css'], }, { name: 'All About Floats', url: 'https://css-tricks.com/all-about-floats/', + description: 'An article about float concepts', keywords: ['css', 'floats'] }, { name: 'JavaScript Arrays: Explain Like I\'m Five', url: 'https://sumudusiriwardana.hashnode.dev/javascript-arrays-explain-like-im-five', - keywords: ['arrays', 'basics', 'fundamentals', 'javascript'], + description: 'A hashnode blog article that explains the basics of arrays and array methods', + keywords: ['arrays', 'methods', 'basics', 'fundamentals', 'javascript'], }, { name: 'Objects vs. Arrays', url: 'https://medium.com/@zac_heisey/objects-vs-arrays-42601ff79421', + description: 'An article explaining the basic differences between objects and arrays', keywords: ['arrays', 'basics', 'fundamentals', 'javascript', 'objects'], }, { name: 'Flexbex Zombies', url: 'https://mastery.games/flexboxzombies/', + description: 'In this game you control a Hoodie character with a crossbow, using Flexbox code. The goal is to learn Flexbox in order to survive the onslaught of zombies.', keywords: ['css', 'flexbox'], }, { name: 'A Complete Guide to CSS Media Queries', url: 'https://css-tricks.com/a-complete-guide-to-css-media-queries/', + description: 'A guide to media queries, which can modify the appearance (and even behavior) or a website or app based on a matched set of conditions about the user’s device, browser or system settings.', keywords: ['css', 'media queries', 'responsive web design', 'responsive'] }, { name: 'A Complete Guide to Grid', url: 'https://css-tricks.com/snippets/css/complete-guide-grid/', + description: 'Our comprehensive guide to CSS grid, focusing on all the settings both for the grid parent container and the grid child elements.', keywords: ['css', 'css grid', 'grid'] }, { name: 'Objects', url: 'https://javascript.info/object', + description: 'An article on the basics of objects', keywords: ['javascript', 'objects'] }, { name: 'Crypto Zombies', url: "https://cryptozombies.io", + description: 'CryptoZombies is an interactive school that teaches you all things technical about blockchains. Learn to make smart contracts in Solidity by making your own crypto-collectibles game.', keywords: ["crypto", "web3", "blockchain"] }, { name: 'How to make your first pull request on GitHub', url: "https://www.freecodecamp.org/news/how-to-make-your-first-pull-request-on-github-3/", - keywords: ["open source", "git"] + description: 'A step by step guide on how to make your first pull request', + keywords: ["open source", "git", "pull request"] }, - { + { name: 'CORS Proxy', url: 'https://codetabs.com/cors-proxy/cors-proxy.html', + description: 'A CORS proxy is a service that allows developers (probably you) to access resources from other websites, without having to own that website. Be careful when you use them! (Jacob).', keywords: ['cors', 'proxy', 'api', 'errors'] }, { name: 'How to write good commit messages', url: 'https://www.freecodecamp.org/news/writing-good-commit-messages-a-practical-guide/', + description: 'An article on how to create a useful revision history by creating an agreed upon commit message convention to use. This applies to both personal and professional projects.', keywords: ['git', 'commit', 'version control', 'command line'] }, { name: 'Grind 75 questions', url: 'https://www.techinterviewhandbook.org/grind75', + description: 'Grind 75 is a better version of Blind 75 which goes beyond 75 questions. You can customize the available time you have, difficulty, topics, etc.', keywords: ['interview', 'job search', 'coding challenges', 'leet code'] }, - { + { name: 'Font Awesome', url: 'https://faicons.com/', + description: 'Font Awesome is the Internet\'s icon library and toolkit, used by millions of designers, developers, and content creators.', keywords: ['icons', 'frontend'] }, { name: 'Frontend Project README template', url: 'https://github.com/alecortega/portfolio-template', + description: 'A template to get started with your next portfolio README', keywords: ['markdown', 'frontend', 'documentation'] }, { name: 'CSS Diner', url: 'https://flukeout.github.io/', - keywords: ['css'] + description: 'A fun game to learn and practice CSS Selectors! Selectors are how you pick which element to apply styles to.', + keywords: ['css', 'game', 'selectors'] }, { name: 'Flexbox Froggy', url: 'https://flexboxfroggy.com/', - keywords: ['css', 'flexbox'] + description: 'Flexbox Froggy is a game for learning CSS flexbox. It is a fun way to learn how to format web content.', + keywords: ['css', 'flexbox', 'game'] }, { name: 'Learn Git Branching', url: 'https://learngitbranching.js.org/', - keywords: ['git', 'version control'] + description: '"Learn Git Branching" is the most visual and interactive way to learn Git on the web; you\'ll be challenged with exciting levels, given step-by-step demonstrations of powerful features, and maybe even have a bit of fun along the way.', + keywords: ['git', 'version control', 'branching', 'github'] }, { name: 'What the Flexbox', url: 'https://flexbox.io/', - keywords: ['css', 'flexbox'] + description: 'A simple, free 20 video course that will help you master CSS Flexbox! The first 13 videos are aimed at understanding the fundamentals of Flexbox - we will take a deep dive into understanding rows, columns, axes, wrapping, alignment, centering and layout. The last 7 are code alongs where we will build everything from a navigation to a mobile app layout entirely with Flexbox!', + keywords: ['css', 'flexbox', 'video course', 'alignment', 'styling'] }, { name: 'Code Driven Animation Editor', url: 'https://www.timelinecss.io/', - keywords: ['css animations', 'css', 'animations', 'editor', 'visuals'] + description: 'The CSS file is the "source of truth" for the project. This CSS source code can be edited directly, and changes will be reflected in the live preview and the timeline view immediately', + keywords: ['css animations', 'editor', 'visuals'] }, { name: 'Simple Icons', url: 'https://simpleicons.org', - keywords: ['free', 'svg icons', 'svg', 'icons', 'popular brands'] + description: 'A collection of free SVG icons for your website or web application project', + keywords: ['svg icons', 'icons', 'popular brands'] }, { name: 'JavaScript Visualizer 9000', url: 'https://www.jsv9000.app', + description: 'A tool for visualizing execution content, hoisting, closures and scopes in JavaScript', keywords: ['javascript', 'call stack', 'event loop', 'microtask queue', 'task queue'] }, { name: 'unDraw', url: 'https://undraw.co', + description: 'A constantly updated design project with beautiful SVG images that you can use completely free and without attribution.', keywords: ['open-source illustrations', 'svg', 'images', 'design', 'graphics', 'art', 'vectors', 'minimal', 'free', 'modern', 'png', 'interface', 'open-source'] }, { name: 'DevDocs', url: 'https://devdocs.io', - keywords: ['api documentation', 'free', 'open-source', 'developer tools', 'interface', 'offline', 'css', 'html', 'http', 'javascript', 'web apis', 'angular', 'angularjs', 'ansible', 'apache http server', 'apache pig', 'async', 'babel', 'backbone.js', 'bash', 'bluebird', 'bootstrap', 'bottle', 'bower', 'c', 'c++', 'cakephp', 'chai', 'chef', 'clojure', 'cmake', 'codeception', 'codeceptjs', 'codeigniter', 'coffeescript', 'composer', 'cordova', 'crystal', 'cypress', 'd', 'd3.js', 'dart', 'deno', 'django', 'django rest framework', 'docker', 'dojo', 'drupal', 'eigen3', 'electron', 'elisp', 'elixir', 'ember.js', 'enzyme', 'erlang', 'esbuild', 'eslint', 'express', 'falcon', 'fish', 'flask', 'flow', 'gcc', 'git', 'gnu fortran', 'gnu make', 'gnucobol', 'gnuplot', 'go', 'godot', 'graphite', 'groovy', 'grunt', 'gtk', 'handlebars', 'haproxy', 'haskell', 'haxe', 'homebrew', 'i3', 'immutable.js', 'influxdata', 'jasmine', 'jekyll', 'jest', 'jinja', 'jq', 'jquery', 'jquery mobile', 'jquery ui', 'jsdoc', 'julia', 'knockout.js', 'koa', 'kotlin', 'kubectl', 'kubernetes', 'laravel', 'latex', 'leaflet', 'less', 'liquid', 'lodash', 'lua', 'love', 'mariadb', 'marionette.js', 'markdown', 'matplotlib', 'meteor', 'mocha', 'modernizr', 'moment.js', 'mongoose', 'nginx', 'nginx lua module', 'nim', 'nix', 'node.js', 'nokogiri', 'npm', 'numpy', 'ocaml', 'octave', 'openjdk', 'opentsdb', 'padrino', 'pandas', 'perl', 'phalcon', 'phaser', 'phoenix', 'php', 'phpunit', 'pointcloudlibrary', 'pony', 'postgresql', 'prettier', 'pug', 'puppeteer', 'pygame', 'python', 'pytorch', 'q', 'qt', 'r', 'ramda', 'react', 'reactbootstrap', 'react native', 'react router', 'reactivex', 'redis', 'redux', 'relay', 'requirejs', 'rethinkdb', 'ruby', 'ruby minitest', 'ruby on rails', 'rust', 'rxjs', 'saltstack', 'sass', 'scala', 'scikit-image', 'scikit-learn', 'sequelize', 'sinon.js', 'socket.io', 'spring boot', 'sqlite', 'statsmodels', 'support tables', 'svg', 'symfony', 'tailwind css', 'tcl tk', 'tensorflow', 'tensorflow c++', 'terraform', 'trio', 'twig', 'typescript', 'underscore.js', 'vagrant', 'vite', 'vue router', 'vue.js', 'vuex', 'vulkan', 'web extensions', 'webpack', 'werkzeug', 'wordpress', 'xslt & xpath', 'yarn', 'yii'] + description: 'DevDocs is an open source web app that combines documentation for lots of developer tools into a single searchable interface', + keywords: ['api documentation', 'free', 'open-source', 'developer tools', 'interface', 'offline', 'css', 'html', 'http', 'javascript', 'web apis', 'angular', 'angularjs', 'ansible', 'apache http server', 'apache pig', 'async', 'babel', 'backbone.js','bash', 'bluebird', 'bootstrap', 'bottle', 'bower', 'c', 'c++', 'cakephp', 'chai', 'chef', 'clojure', 'cmake', 'codeception', 'codeceptjs', 'codeigniter', 'coffeescript', 'composer','cordova', 'crystal','cypress','d','d3.js', 'dart', 'deno', 'django', 'django rest framework', 'docker', 'dojo', 'drupal', 'eigen3', 'electron', 'elisp', 'elixir', 'ember.js', 'enzyme', 'erlang', 'esbuild', 'eslint', 'express', 'falcon', 'fish', 'flask', 'flow', 'gcc', 'git', 'gnu fortran', 'gnu make', 'gnucobol','gnuplot', 'go', 'godot', 'graphite', 'groovy', 'grunt', 'gtk', 'handlebars', 'haproxy', 'haskell', 'haxe', 'homebrew', 'i3', 'immutable.js', 'influxdata', 'jasmine', 'jekyll', 'jest', 'jinja', 'jq', 'jquery', 'jquery mobile', 'jquery ui', 'jsdoc', 'julia', 'knockout.js', 'koa', 'kotlin', 'kubectl', 'kubernetes', 'laravel', 'latex', 'leaflet', 'less', 'liquid', 'lodash', 'lua', 'love', 'mariadb', 'marionette.js', 'markdown', 'matplotlib', 'meteor', 'mocha', 'modernizr', 'moment.js', 'mongoose', 'nginx', 'nginx lua module', 'nim', 'nix', 'node.js', 'nokogiri', 'npm', 'numpy', 'ocaml', 'octave', 'openjdk', 'opentsdb', 'padrino', 'pandas', 'perl', 'phalcon', 'phaser', 'phoenix', 'php', 'phpunit', 'pointcloudlibrary', 'pony', 'postgresql', 'prettier', 'pug', 'puppeteer', 'pygame', 'python', 'pytorch', 'q', 'qt', 'r', 'ramda', 'react', 'reactbootstrap', 'react native', 'react router', 'reactivex', 'redis', 'redux', 'relay', 'requirejs', 'rethinkdb', 'ruby', 'ruby minitest', 'ruby on rails', 'rust', 'rxjs', 'saltstack', 'sass', 'scala', 'scikit-image', 'scikit-learn', 'sequelize', 'sinon.js', 'socket.io', 'spring boot', 'sqlite', 'statsmodels', 'support tables', 'svg', 'symfony', 'tailwind css', 'tcl tk', 'tensorflow', 'tensorflow c++', 'terraform' , 'trio', 'twig', 'typescript', 'underscore.js', 'vagrant', 'vite', 'vue router', 'vue.js', 'vuex', 'vulkan', 'web extensions', 'webpack', 'werkzeug', 'wordpress', 'xslt & xpath', 'yarn', 'yii'] }, { name: 'Picular', url: 'https://picular.co', + description: 'Picular is a rocket fast primary color generator using Google\'s image search. If you ever needed the perfect yellow hex code from a banana, this is the tool for you!', keywords: ['color', 'palette', 'color palette', 'primary color generator', 'fast', 'google image search', 'generator', 'hex codes'] }, { name: 'Canva Wireframe Templates', + description: 'Browse high-quality Wireframe templates for your next design', url: 'https://www.canva.com/templates/?query=wireframe', keywords: ['canva', 'wireframe', 'template', 'prototype', 'project', 'design'] }, { name: 'Python Tutor: Visualize Code in Python, JavaScript, C, C++, and Java', + description: 'This coding tutor tool helps you learn Python, JavaScript, C, C++, and Java by visualizing code execution. You can use it to debug your homework assignments and as a supplement to online coding tutorials.', url: 'https://pythontutor.com/visualize.html#mode=edit', - keywords: ['code', 'visualize', 'python', 'javascript', 'c', 'c++', 'javascript', 'java', 'visualize execution', 'coding tutor', 'debug', 'supplement', 'recursion', 'execution', 'frames', 'objects', 'steps'] + keywords: ['code', 'visualize','python', 'javascript', 'c', 'c++', 'javascript', 'java', 'visualize execution', 'coding tutor', 'debug','supplement', 'recursion', 'execution', 'frames', 'objects', 'steps'] }, { name: 'Unscreen', url: 'https://www.unscreen.com', - keywords: ['remove video background', 'video', 'background', 'free', 'hd', 'no watermark', 'api plugins', 'plugins', 'clips', 'video file', 'audio', 'gif', 'presentation', 'remove', '.mp4', '.mov', '.gif', 'url', 'footage', 'record', 'video editing'] + description:'100% automatic and free video background remover', + keywords: ['remove video background', 'free', 'hd', 'no watermark', 'api plugins', 'plugins', 'clips', 'video file', 'audio', 'gif', 'presentation', 'remove', '.mp4', '.mov', '.gif', 'url', 'footage', 'record', 'video editing'] }, { name: 'Quicktools by Picsart', url: 'https://tools.picsart.com/image/background-remover/', + description: 'Tool to remove backgrounds of images', keywords: ['remove', 'background remover', 'image', 'picture', 'transparent', 'ai', 'free', 'refine', 'backgrounds', 'shadows', 'borders'] }, { name: 'Squoosh', url: 'https://squoosh.app', + description: 'Squoosh is the ultimate image optimizer that allows you to compress and compare images with different codecs in your browser.', keywords: ['compress image', 'reduce file size', 'reduce', 'high quality', 'image', 'smaller file', 'file size', 'privacy', 'image optimizer', 'compress', 'codecs', 'resize', 'convert image', 'convert', 'free', 'open-source', 'pixels', 'real-time', 'jpg', 'png', 'webp', 'avif'] }, { name: 'Warp', url: 'https://www.warp.dev', + description: 'Warp is a fully native, GPU-accelerated, Rust-based terminal. No Electron or web-tech. 60fps on 4K screens. Along the way, we built our own UI framework, our own Rust-based CRDT editor and our own graphics shaders.', keywords: ['terminal', 'gpu', 'crdt', 'rust', 'zsh', 'fish', 'bash', 'modern', 'development', 'code editor', 'writing code', 'code', 'commands', 'selections', 'cursor positioning', 'ai', 'shell commands', 'terminal sharing', 'customize', 'cli', 'command line'] }, { name: 'Uiverse', url: 'https://uiverse.io', - keywords: ['ui', 'ui elements', 'open-source', 'free', 'button', 'checkbox', 'toggle', 'switches', 'cards', 'loaders', 'inputs', 'css', 'html', 'hover', 'copy paste', 'cssbuttons'] + description: 'Universe of UI elements to help you stand out. Open-source and free to use, just copy and paste! Order by favorites', + keywords: ['ui elements', 'open-source', 'free', 'button', 'checkbox', 'toggle', 'switches', 'cards', 'loaders', 'inputs', 'css', 'html', 'hover', 'copy paste', 'cssbuttons'] }, { name: 'Loaders', url: 'https://cssloaders.github.io', - keywords: ['css', 'html', 'loader', 'loaders', 'animations', 'speed', 'simplicity', 'spinners', 'styling', 'pseudo elements', 'website', 'frontend'] + description: 'CSS Loader is a collection of different types of loaders, spinners and their source code.', + keywords: ['css', 'html', 'loaders', 'animations', 'speed', 'spinners', 'styling', 'pseudo elements', 'website', 'frontend'] }, { name: 'Postman', url: 'https://www.postman.com', + description: 'Postman is an API platform for building and using APIs. Postman simplifies each step of the API lifecycle and streamlines collaboration so you can create better APIs—faster.', keywords: ['api', 'api platform', 'data', 'api lifecycle', 'collaboration', 'design', 'build', 'test', 'iterate', 'documentation', 'workspace', 'rest api', 'accessibility', 'http requests', 'tracking'] }, { name: 'Screeps', url: 'https://screeps.com', + description: 'Screeps World is an open source MMO RTS sandbox game for programming enthusiasts, wherein the core mechanic is programming your units AI. You control your colony by writing JavaScript which operates 24/7 in the single persistent open world filled by other players on par with you.', keywords: ['sandbox', 'game', 'open-source', 'ai', 'programming', 'javascript', 'mmo', 'rts', 'player', 'scripting', 'steam', 'multiplayer', 'strategy game', 'colony', 'resources', 'mine', 'units', 'territory'] }, { name: 'Oh My Posh', url: 'https://ohmyposh.dev', - keywords: ['theme engine', 'shell', 'color', 'terminal', 'prompt', 'render', 'customizable', 'theme', 'powershell', 'windows', 'macos', 'linux', 'fonts', 'console', 'full color set', 'prompt string', 'function', 'variable'] + description: 'Oh My Posh is a custom prompt engine for any shell that has the ability to adjust the prompt string with a function or variable.', + keywords: ['theme engine', 'shell', 'color', 'terminal', 'prompt', 'render', 'customizable', 'theme', 'powershell', 'windows', 'macos','linux', 'fonts', 'console', 'full color set', 'prompt string', 'function', 'variable'] }, { name: 'Compressor', url: 'https://compressor.io', + description: 'Optimize and compress JPEG, PNG, SVG, GIF and WEBP images online. Compress, resize and rename your photos for free.', keywords: ['image compressor', 'image', 'fast', 'efficient', 'jpeg', 'png', 'svg', 'gif', 'webp', 'smaller images', 'faster website', 'optimized', 'seo', 'seo ranking', 'lighthouse', 'compression algorithm', 'shrink'] }, { name: 'tiny png', url: 'https://tinypng.com', + description: 'TinyJPG reduces the file size of your JPEG images. Every uploaded image is analyzed to apply the best possible JPEG encoding. Based on the content of your image an optimal strategy is chosen. The result is a quality image without wasting storage or bandwidth!', keywords: ['image compressor', 'image', 'fast', 'efficient', 'jpeg', 'png', 'webp', 'smaller images', 'transparent image', 'faster website', 'optimized', 'seo', 'seo ranking', 'lighthouse', 'compression algorithm', 'shrink'] }, { name: 'Nerdy Data', url: 'https://www.nerdydata.com', + description: 'NerdyData is a search engine for code. So you can plop in a bit of code from your website (ex: a Facebook tracking pixel snippet) and find all of the other sites on the internet that have that code on their website.', keywords: ['search engine', 'source-code', 'tech stack', 'code', 'companies', 'leads', 'integrations', 'api access', 'domain', 'domain lookup', 'seo', 'google analytics', 'images', 'badges', 'websites', 'competitors'] }, { name: 'Coolors', url: 'https://coolors.co/palettes/trending', - keywords: ['color', 'color palettes', 'topics', 'styles', 'hex', 'hex values', 'color schemes', 'color combinations', 'design', 'free', 'css', 'generator'] + description: 'Get inspired by thousands of beautiful color schemes and make something cool', + keywords: ['color palettes', 'styles', 'hex values', 'color schemes', 'color combinations', 'design', 'free', 'css', 'generator'] }, { name: 'Name Cheap Logo Maker', url: 'https://www.namecheap.com/logo-maker/', + description: 'Create a logo with our free logo maker. Make your own custom logo design for a website or business with Namecheap Logo Maker and download it free on any device.', keywords: ['logo', 'logo maker', 'free', 'creator', 'business', 'branding'] }, { name: 'Unsplash', url: 'https://unsplash.com', + description: 'Beautiful, free images and photos that you can download and use for any project. Better than any royalty free or stock photos.', keywords: ['images', 'free', 'high-resolution', 'wallpapers', '3d renders', 'textures', 'patterns', 'experimental', 'architecture', 'nature', 'business and work', 'fashion', 'film', 'food', 'drink', 'street photography', 'arts and culture', 'royalty-free', 'stock photo', 'commercial', 'personal projects'] }, { name: 'Page Speed', url: 'https://pagespeed.web.dev', - keywords: ['page speed', 'web page', 'speed', 'load time', 'browser request', 'seo', 'optimization'] + description: 'PageSpeed Insights (PSI) is performance focused, using both lab (Lighthouse) and field (Chrome UX Report) data to provide a summary of performance. Furthermore, PSI provides origin level insights in the field, whereas web. dev/measure is intended to deep-dive into a single URL in the lab ', + keywords: ['page speed', 'web page', 'load time', 'browser request', 'seo', 'optimization'] }, { name: 'Cloud Convert', url: 'https://cloudconvert.com/jpg-to-webp', + description: 'CloudConvert converts your image files online. Amongst many others, we support PNG, JPG, GIF, WEBP and HEIC.', keywords: ['jpg', 'webp', 'converter', 'heic', 'formats', 'high-quality', 'api'] }, - { - name: 'Thumbnails for Social Media "Metatags', - url: 'https://nickcarmont8.medium.com/how-to-add-a-website-thumbnail-for-sharing-your-html-site-on-social-media-facebook-linkedin-12813f8d2618', - keywords: ['metadata', 'metatags', 'thumbnails', 'social media'] + name: 'The Essential Meta Tags for Social Media', + url: 'https://css-tricks.com/essential-meta-tags-social-media/', + description: 'These days, almost every website encourages visitors to share its pages on social media. We’ve all seen the ubiquitous Facebook and Twitter icons, among others, just begging to be clicked. This comes as no surprise as sharing via social media, the internet incarnation of word-of-mouth, is one of the most effective ways for businesses and individuals to gain awareness.', + keywords: ['metadata', 'metatag', 'thumbnail', 'social media'] }, { name: 'HTML Cheat Sheet', url: 'https://htmlcheatsheet.com/', + description: 'Online interactive HTML Cheat Sheet contains useful code examples and web developer tools, markup generators and more.', keywords: ['HTML', 'cheat sheet', 'tags'] }, { name: 'CSS Cheat Sheet', url: 'https://htmlcheatsheet.com/css/', + description: 'CSS Cheat Sheet contains the most common style snippets: CSS gradient, background, button, font-family, border, radius, box and text shadow generators', keywords: ['CSS', 'cheat sheet', 'box model', 'selectors', 'color picker'] }, { name: 'JS "JavaScript" Cheat Sheet', url: 'https://htmlcheatsheet.com/js/', + description: 'JavaScript Cheat Sheet contains useful code examples on a single page. Not just a PDF because it\'s interactive! Find code for JS loops, variables, objects and more.', keywords: ['JS', 'Javascript', 'cheat sheet', 'conditionals', 'loops', 'variables', 'dates', 'events', 'functions', 'regex', 'json', 'promises', 'arrays'] }, { name: 'SEO Cheat Sheet', url: 'https://htmlcheatsheet.com/seo/', + description: 'This online SEO cheat sheet lists everyting you need to know and do to rank your website as high as possible among the Google search results.', keywords: ['SEO', 'cheat sheet'] }, { name: 'SEO Guide to Lighthouse Performance Metrics', url: 'https://www.searchenginejournal.com/core-web-vitals/technical-seo-lighthouse/', + description: 'Take a deep dive into Lighthouse performance metrics with technical SEO pros Jamie Indigo and Rachel Anderson.', keywords: ['SEO', 'lighthouse', 'performance', 'metrics'] }, { name: 'Centering in CSS', url: 'https://ishadeed.com/article/learn-css-centering/#:~:text=To%20center%20an%20inline%20element,is%20text%2Dalign%3A%20center%20.&text=For%20multiple%20inline%20elements%2C%20the,using%20text%2Dalign%3A%20center%20', + description: 'A guide to everything you need to know about centering in CSS', keywords: ['CSS', 'center', 'align'] }, // Resource Format - please follow the styling below. // { // name: '', // url: '', + // description: '', // keywords: [''] // }, ]; -exports.resources = resources; +exports.resources = resources; \ No newline at end of file diff --git a/views/index.ejs b/views/index.ejs index 49d1311..e5cce06 100644 --- a/views/index.ejs +++ b/views/index.ejs @@ -33,10 +33,10 @@

Coding Resources API

- Search for coding resources by relevant keywords. - This API serves educational content for a wide + Serves educational content for a wide variety of computer science topics, languages and technologies relevant to web development. + Search for coding resources by relevant keywords.

@@ -66,6 +66,7 @@

name: '<%= resources[i].name %>',

url: ' target="_blank"><%= resources[i].url %>',
+

description: '<%= resources[i].description %>'

keywords: [<%= resources[i].keywords.map(keyword => `'${keyword}'`).join(", ") %>]
},