├── .github └── FUNDING.yml ├── .travis.yml ├── 30-seconds-interview-questions ├── 30s-favicon.ico ├── logo.jpg ├── logo.svg └── readme.md ├── CONTRIBUTING.md ├── LICENSE ├── Logo.png ├── aaa-template └── readme.md ├── awesome-actions ├── awesome-actions.png └── readme.md ├── awesome-algorithms └── readme.md ├── awesome-awesomeness └── readme.md ├── awesome-books └── readme.md ├── awesome-cli-apps └── readme.md ├── awesome-cloudfare-workers ├── cloudfare-workers-bookmarks.csv └── readme.md ├── awesome-cloudfare └── readme.md ├── awesome-cloudinary ├── index.md └── readme.md ├── awesome-colorful-links ├── code-of-conduct.md ├── color-palette.gif ├── contributing.md └── readme.md ├── awesome-creative-coding └── readme.md ├── awesome-design-systems ├── cover.png └── readme.md ├── awesome-design-tools ├── awesome-design-plugins │ └── readme.md ├── awesome-design-ui-kits.md └── readme.md ├── awesome-devrel └── readme.md ├── awesome-digital-gardeners └── readme.md ├── awesome-domains-new └── readme.md ├── awesome-ethereum ├── awesome-github-profiles-readme └── readme.md ├── awesome-github-profiles ├── profile.md └── readme.md ├── awesome-hackathon-projects └── readme.md ├── awesome-hacking-resources ├── readme.md └── tools.md ├── awesome-hand-tools └── readme.md ├── awesome-icon-libraries └── readme.md ├── awesome-icons └── readme.md ├── awesome-illustrations └── readme.md ├── awesome-interview-questions └── readme.md ├── awesome-ipsum └── readme.md ├── awesome-jamstack-resources └── readme.md ├── awesome-jamstack └── readme.md ├── awesome-json-datasets ├── readme.md └── sources.md ├── awesome-learning-resources └── readme.md ├── awesome-lists └── readme.md ├── awesome-macOS-screensavers └── readme.md ├── awesome-micro └── readme.md ├── awesome-newsletters └── readme.md ├── awesome-nextjs ├── nextjs-logo.svg └── readme.md ├── awesome-nuxtjs ├── media │ ├── awesome-nuxt-logo.svg │ ├── nuxt-v-label-template.ai │ ├── nuxt-v1-label.svg │ ├── nuxt-v2-label.svg │ └── nuxt-v3-label.svg └── readme.md ├── awesome-pinned-gists └── readme.md ├── awesome-piracy ├── Wordcloud.jpg ├── bookmarks.html ├── create-bookmarks.sh ├── readme.html └── readme.md ├── awesome-projects └── readme.md ├── awesome-public-datasets ├── readme.md └── readme.rst ├── awesome-pwa └── readme.md ├── awesome-react-context └── readme.md ├── awesome-react-hooks └── readme.md ├── awesome-readme └── readme.md ├── awesome-repos-free-resources └── readme.md ├── awesome-resources-shaheednasser ├── readme.md └── readme2.md ├── awesome-resources └── readme.md ├── awesome-satellite-imagery-datasets └── readme.md ├── awesome-stacks └── readme.md ├── awesome-static-website-services └── readme.md ├── awesome-stoicism-quotes ├── quotes.json └── readme.md ├── awesome-tools-jr-developers └── readme.md ├── awesome-web-browsers └── readme.md ├── awesome-web-design └── readme.md ├── awesome-web-effects ├── README.md └── banner.jpg ├── awesome-webapps-free └── readme.md ├── awesome-webdev-resources └── readme.md ├── awesome-websites └── readme.md ├── bookmarks-codeverland ├── images │ ├── bookmarks.dev-logo-md.png │ ├── codever-bookmarks-header-560x137.png │ ├── codever-bookmarks-header-900x220.png │ ├── codever-bookmarks-header.xcf │ └── r └── readme.md ├── bookmarks-davidacreate └── readme.md ├── bookmarks-frontend-dev ├── TOTALLY-GIGANTIC-FILE.md ├── about.md ├── animation │ └── web-animations-api.md ├── appearance │ ├── animation.md │ ├── typography.md │ └── visualization.md ├── architecture │ ├── algorithms.md │ ├── complete-systems.md │ ├── design-patterns.md │ ├── designs.md │ ├── event-driven-programming.md │ ├── functional-programming.md │ └── functional-reactive-programming-frp.md ├── compatibility │ ├── cross-browser.md │ ├── e-mail.md │ ├── keyboard.md │ ├── mobile.md │ ├── printers.md │ ├── responsive-web-design-rwd.md │ └── web-accessibility.md ├── contributing.md ├── ecosystem │ ├── communities-around-projects.md │ ├── news.md │ ├── notable-community-members.md │ ├── organizations.md │ └── podcasts.md ├── languages-protocols-browser-apis │ ├── cascading-style-sheets-css.md │ ├── document-object-model-dom.md │ ├── hypertext-markup-language-html.md │ ├── hypertext-transfer-protocol-http.md │ ├── javascript-ecmascript.md │ ├── javascript-object-notation-json.md │ ├── scalable-vector-graphics-svg.md │ ├── service-workers.md │ ├── templating-languages-and-engines.md │ ├── transpiled-languages.md │ ├── uniform-resource-identifier-uri.md │ └── webassembly.md ├── readme.md ├── user-interface-components │ ├── buttons.md │ ├── code.md │ ├── forms.md │ ├── galeries-and-image-sliders.md │ ├── grid.md │ ├── rich-text-editors.md │ ├── table-of-contents.md │ ├── ui-kits.md │ └── video-and-audio.md └── workflow │ ├── automated-testing.md │ ├── build-tools.md │ ├── code-editors.md │ ├── css-tools.md │ ├── documentation.md │ ├── fonts-for-programmers.md │ ├── getting-started.md │ ├── html-tools.md │ ├── image-post-processing.md │ ├── javascript-tools.md │ ├── package-management.md │ ├── sourcemaps.md │ ├── tutorials.md │ └── version-control.md ├── bookmarks └── readme.md ├── cheatsheet-css └── readme.md ├── cheatsheet-docker ├── images │ ├── change.png │ ├── click.png │ ├── commit.png │ └── edit.png └── readme.md ├── cheatsheet-emoji ├── readme.md └── readme2.md ├── cheatsheet-es6 ├── README.md ├── es6-cheatsheet-thumbnail.png ├── es6-cheatsheet.html └── stylesheet.css ├── cheatsheet-favicon └── readme.md ├── cheatsheet-firebase └── readme.md ├── cheatsheet-git ├── readme.md └── tips.json ├── cheatsheet-github └── readme.md ├── cheatsheet-gitpitch ├── 5 └── README.md ├── cheatsheet-jsx ├── jsx-cheatsheet.html └── stylesheet.css ├── cheatsheet-linter └── readme.md ├── cheatsheet-markdown └── readme.md ├── cheatsheet-modern-js └── README.md ├── cheatsheet-modern-ts └── readme.md ├── cheatsheet-promises ├── promises-cheatsheet-thumbnail.png ├── promises-cheatsheet.html └── stylesheet.css ├── cheatsheet-python ├── Matplotlib.pdf ├── NumPy.pdf ├── NumPy │ ├── README.md │ └── numpy-examples.py ├── img │ ├── advanced.png │ ├── axes.png │ ├── fill.png │ ├── lines.png │ ├── medium.png │ ├── plot.png │ └── ticks.png ├── matplotlib │ └── README.md ├── readme.md ├── readme2.md └── requirements.txt ├── cheatsheet-react-babel ├── react-with-babel-cheatsheet-thumbnail.png ├── react-with-babel-cheatsheet.html └── stylesheet.css ├── cheatsheet-react-typescript ├── advanced │ ├── index.md │ ├── misc-concerns.md │ ├── patterns_by_usecase.md │ ├── patterns_by_version.md │ ├── types-react-ap.md │ └── utility-types.md ├── basic │ ├── editor-integration.md │ ├── examples.md │ ├── getting-started │ │ ├── codebases.md │ │ ├── resources.md │ │ └── talks.md │ ├── linting.md │ ├── recommended │ │ ├── codebases.md │ │ ├── resources.md │ │ └── talks.md │ ├── setup.md │ ├── troubleshooting │ │ ├── learn-ts.md │ │ ├── non-ts-files.md │ │ ├── official-typings-bugs.md │ │ ├── operators.md │ │ ├── ts-config.md │ │ ├── types.md │ │ └── utilities.md │ └── useful-hooks.md ├── hoc │ ├── excluding-props.md │ ├── full-example.md │ ├── index.md │ └── react-hoc-docs.md ├── migration │ ├── from-flow.md │ ├── from-js.md │ ├── index.md │ └── js-docs.md └── readme.md ├── cheatsheet-react └── readme.md ├── cheatsheet-reactjs ├── react-cheatsheet-thumbnail.png ├── react-cheatsheet.html └── stylesheet.css ├── cheatsheet-regex └── readme.md ├── cheatsheet-svg └── readme.md ├── cheatsheet-typescript └── readme.md ├── cheatsheet-vuejs ├── readme.md └── readme2.md ├── coding-guidelines-best-practices ├── .eleventy.js ├── package.json ├── readme.json ├── readme.md └── yarn.lock ├── css-protips ├── README.md └── logo.svg ├── data-structures ├── itsy-bitsy-data-structures.js └── readme.md ├── design-resources-developers ├── headerimage.png └── readme.md ├── design-systems └── readme.md ├── developer-interview-questions └── readme.md ├── developer-links └── readme.md ├── developer-portfolios-inspiration └── readme.md ├── developer-resources-cruz └── readme.md ├── developer-resources-hosting └── readme.md ├── developer-resources-links ├── README4.md ├── readme1.md ├── readme2.md └── readme3.md ├── developer-resources └── readme.md ├── developer-tech-resources └── readme.md ├── developer-uses-tech-data └── readme.md ├── developer-websites └── readme.md ├── developer-youtube-channels └── readme.md ├── developer-youtube-lists └── readme.md ├── digital-gardeners └── readme.md ├── discounts-for-students └── readme.md ├── emojis-all └── readme.md ├── es6-summary └── README.md ├── ethereum-developer-tools-list └── readme.md ├── every-programmer-should-know └── README.md ├── fonts └── readme.md ├── frontend-development ├── Banner.jpg ├── Logo.png ├── frontend.png ├── react.png └── readme.md ├── frontend-guide ├── README.md └── images │ ├── css-modules-logo.svg │ ├── desk.png │ ├── eslint-logo.svg │ ├── flow-logo.png │ ├── jest-demo.gif │ ├── jest-logo.svg │ ├── prettier-logo.png │ ├── react-devtools-demo.gif │ ├── react-logo.svg │ ├── redux-devtools-demo.gif │ ├── redux-logo.svg │ ├── stylelint-demo.png │ ├── stylelint-logo.svg │ ├── webpack-logo.svg │ └── yarn-logo.png ├── frontend-guidelines └── README.md ├── frontend-resources ├── cover.png └── readme.md ├── frontend-stuff └── readme.md ├── frontend-style-guide └── readme.md ├── frontend-toolbox └── readme.md ├── frontend-toolchain-resources └── readme.md ├── git-tips-n-tricks └── README.md ├── github-users-top-us ├── followers.md ├── public-contributions.md ├── readme.md └── total-contributions.md ├── graphql-apis ├── apis.json ├── demos.json ├── proxies.json └── readme.md ├── guidelines-frontend └── readme.md ├── hacker-laws ├── assets │ ├── banner.png │ ├── banner.psd │ ├── diagrams.bmpr │ ├── repository-open-graph-template.png │ └── sharing.md ├── images │ ├── Fitts_Law.svg │ ├── amdahls_law.png │ ├── changelog-podcast.png │ ├── complete_graph.png │ ├── gartner_hype_cycle.png │ ├── gitlocalize.png │ └── hicks_law.svg ├── prepare-markdown-for-ebook.sh └── readme.md ├── html-css-adv-topics └── README.md ├── html-css-basics └── README.md ├── html-css-js-tips └── README.md ├── html-css-tutorial └── readme.md ├── html-property-info ├── html.js ├── readme.md └── svg.js ├── javascript-123-interview-questions └── readme.md ├── javascript-33-concepts └── README.md ├── javascript-arrays-cheatsheet ├── Cheatsheet.png ├── README.md └── index.js ├── javascript-clean-code └── readme.md ├── javascript-design-patterns-for-humans ├── README.md └── cover.png ├── javascript-dev-bookmarks ├── js-dev-bookmarks.png └── readme.md ├── javascript-for-everyone └── readme.md ├── javascript-interview-questions ├── images │ ├── bom.png │ ├── call-stack.png │ ├── console-css.png │ ├── console-dir.png │ ├── console-html.png │ ├── console-table.png │ ├── cookie.png │ ├── event-table.png │ ├── heap.png │ ├── observables.png │ ├── promises.png │ ├── prototype_chain.png │ └── temporal.jpg └── readme.md ├── javascript-misc └── README.md ├── javascript-notes-good-parts ├── images │ └── Javascript the Good Parts book with tabs.jpg └── readme.md ├── javascript-promises-cookbook └── readme.md ├── javascript-questions └── README.md ├── javascript-regex-cheatsheet └── README.md ├── javascript-snippets ├── Logo.png └── README.md ├── javascript-testing-practices-guidelines ├── assets │ ├── 5 │ ├── header-alt.png │ ├── header-image.png │ ├── header.pptx │ ├── headspace.png │ ├── js-bp-header.jpg │ ├── lighthouse2.png │ ├── mind-map.jpg │ ├── twitter.png │ └── uml.png └── readme.md ├── javascript-tips-n-tidbits └── README.md ├── javascript-tips-n-tricks └── README.md ├── javascript-tips └── README.md ├── javascript-wtfjs ├── CONTRIBUTING.md ├── README.md ├── package-lock.json ├── package.json └── wtfjs.js ├── json-awesome-github-profiles ├── data.json ├── readme.md └── readme2.md ├── json-awesome ├── awesome-detailed-info.json └── awesome.json ├── json-awesomeblog-data └── database.json ├── json-codestack-data └── users.json ├── json-currency └── currency.json ├── json-data-refined-blog ├── data.json └── readme.md ├── json-emojis ├── data.json ├── emoji.json ├── emojis.json └── readme.md ├── json-fastapi-projects └── projects.json ├── json-framestack-data ├── cloud.json ├── frameworks.json ├── libraries.json └── tools.json ├── json-github-profile-readme ├── Readme.md └── data.json ├── json-hooks ├── hooks.json └── readme.md ├── json-killed-by-google ├── graveyard.json └── readme.md ├── json-quotes-stoicism └── quotes.json ├── json-quotes └── quotes.json ├── json-tools └── readme.md ├── json-webgradients ├── gradients-parsed.json ├── gradients.json ├── readme.md └── webgradients.css ├── learn-regex ├── README.md └── img │ ├── 4 │ ├── img_original.png │ ├── regexp-en.png │ └── regexp.svg ├── lists-i-like └── readme.md ├── my-snippets └── readme.md ├── node-best-practices ├── README.md └── sections │ ├── 5 │ ├── apmproducts.md │ ├── asyncerrorhandling.md │ ├── centralizedhandling.md │ ├── documentingusingswagger.md │ ├── eslint_prettier.md │ ├── failfast.md │ ├── monitoring.md │ ├── operationalvsprogrammererror.md │ ├── readme-general-toc-1.md │ ├── readme-general-toc-2.md │ ├── readme-general-toc-3.md │ ├── readme-general-toc-4.md │ ├── returningpromises.md │ ├── testingerrorflows.md │ └── usematurelogger.md ├── notes-learning └── readme.md ├── opensource-financial-aid └── readme.md ├── portfolios ├── dev-portfolios-emma │ └── readme.md ├── developer-amazing-sites │ └── readme.md ├── developer-blogs-awesome-rss │ └── readme.md ├── developer-blogs-awesome │ └── readme.md ├── developer-blogs-posts │ └── readme.md ├── developer-portfolios │ └── readme.md ├── developer-resources-podcasts │ └── readme.md ├── developers-follow-codepen │ ├── codepen-coders.js │ ├── generate.js │ └── readme.md ├── portfolios-dev-blogs │ └── readme.md ├── portfolios-dev-ideas │ └── readme.md └── portfolios-github-profiles-hackathon │ ├── github-profiles.md │ └── portfolio-sites.md ├── project-guidelines ├── README.md └── images │ ├── api.png │ ├── branching.png │ ├── code-style.png │ ├── documentation.png │ ├── elsewhen-logo.png │ ├── folder-tree.png │ ├── git.png │ ├── github.png │ ├── laptop.png │ ├── licensing.png │ ├── logging.png │ ├── logo.sample.png │ ├── modules.png │ └── testing.png ├── projects-fastapi └── readme.md ├── question-interview-typescript └── readme.md ├── questions-full-stack-interview └── readme.md ├── questions-interview-awesome └── readme.md ├── questions-interview-coding └── readme.md ├── questions-interview-javascript └── readme.md ├── questions-interview-machine-learning └── readme.md ├── questions-interview-reactjs └── readme.md ├── questions-interview-web-security └── readme.md ├── questions-web-developer-interview └── readme.md ├── react-Developer-roadmap ├── README.md ├── roadmap.png └── src │ └── react-developer-roadmap.xml ├── react-developer-roadmap └── readme.md ├── react-for-everyone ├── images │ ├── rendering_multiple_js_elements.png │ ├── styling_all_jsx_elements.png │ ├── styling_jsx_element.png │ └── vue_popularity.png └── readme.md ├── react-notes ├── index.js └── readme.md ├── react-philosophies └── readme.md ├── react-practices └── readme.md ├── reactjs-tips-tricks └── README.md ├── readme-badges-collection └── readme.md ├── readme.md ├── readme ├── node-fetch.md └── readme.md ├── resources-a-to-z-students └── README.md ├── resources-blockchain └── readme.md ├── resources-free-developer └── README.md ├── resources-free-webdev ├── Free_resources.png └── readme.md ├── resources-graphics └── readme.md ├── resources-hackathon-organizers └── readme.md ├── resources-tech-helpful └── readme.md ├── resources-webdev-free ├── data.json ├── index.html ├── package.json └── readme.md ├── resources ├── readme.md └── readme2.md ├── rss-data-science-blogs ├── data-science.opml ├── frequency.py ├── generate_opml.py └── readme.md ├── rss-frontend-feeds ├── frontend-feeds.opml └── readme.md ├── rss-subscriptions └── subscriptions.xml ├── seo-meta-tags └── readme.md ├── svelte-integrations └── readme.md ├── tips-for-ppl-who-want-to-learn ├── 5 └── README.md ├── tools-api-development └── readme.md ├── tools-hosted-webdev └── readme.md ├── tools-list └── readme.md ├── tools-of-trade-hn └── readme.md ├── tools-readme-templates └── readme.md ├── tools-webdev └── readme.md ├── vue-companies-Israel ├── Vue_products_of_Israel_Logo.png ├── readme.md └── vue.png ├── vue-styleguide-frontend └── readme.md ├── webdev-best-websites-visit └── readme.md ├── webdev-checklist ├── 5 └── README.md ├── webdev-courses-list └── readme.md ├── webdev-frontend-resources └── readme.md ├── webdev-functional-programming-jargon └── readme.md ├── webdev-modern-spellbook ├── README.md └── assets │ ├── 6 │ ├── cover.png │ ├── merlins_spell_book.jpg │ └── showme.jpg ├── webdev-resources-2 └── readme.md ├── webdev-resources-3 └── readme.md ├── webdev-resources-awesome └── readme.md ├── webdev-resources-denic ├── index.html ├── readme.md └── readme3.md ├── webdev-resources-mtdvio └── readme.md ├── webdev-resources-youtube └── readme.md ├── webdev-resources-ytube-portfolios └── readme.md ├── webdev-resources ├── readme.md └── web-dev-resources │ └── readme.md ├── webdev-sites-to-visit └── readme.md ├── webdev-tools-and-utils └── readme.md └── webdev-twitter-users └── readme.md /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | github: [tiimgreen] 2 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: ruby 2 | 3 | rvm: 4 | - 2.2 5 | 6 | before_script: 7 | - gem install awesome_bot 8 | 9 | script: 10 | - wl=https://github.com/rails/rails/compare/master@,http://git.io/abc123,https://github.com/..,youtube,chrome.google.com/webstore,https://github.com/mathiasbynens/dotfiles/blob/master/.gitconfig*,https://github.com/user/repo/compare/,vimeo 11 | - awesome_bot README.md --allow-dupe --allow-redirect --white-list $wl 12 | - awesome_bot README.ko.md --allow-dupe --allow-redirect --white-list $wl 13 | - awesome_bot README.ja.md --allow-dupe --allow-redirect --white-list $wl 14 | - awesome_bot README.zh-cn.md --allow-dupe --allow-redirect --white-list $wl 15 | - awesome_bot README.zh-tw.md --allow-dupe --allow-redirect --white-list $wl 16 | -------------------------------------------------------------------------------- /30-seconds-interview-questions/30s-favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/30-seconds-interview-questions/30s-favicon.ico -------------------------------------------------------------------------------- /30-seconds-interview-questions/logo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/30-seconds-interview-questions/logo.jpg -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | 1. Fork the repository. 4 | 2. Add your section - make sure you follow the styling guide below. 5 | 3. Commit changes. 6 | 4. Push your commit. 7 | 5. Create a Pull Request. 8 | 9 | ## Styling 10 | 11 | - Use `###` headers for your sections. 12 | - Also use `###` for categories (these should group together relevant sections) and `####` for subcategories. 13 | - Add a link to your section/category to the contents section (use relative links). 14 | - Make sure to include examples wherever possible (preferably GIFs). 15 | - For command-line examples, wrap your commands in a `bash` code block. 16 | - At the end of your section, add a `Read more about...` link. This should directly link to [Git's](http://git-scm.com/docs), [GitHub's](https://help.github.com), or the relevant documentation. 17 | - If your contribution is a translation, add a (relative) link to the README above the [Table of Contents](README.md#table-of-contents). 18 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2014 Tim Green 2 | 3 | MIT License 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining 6 | a copy of this software and associated documentation files (the 7 | "Software"), to deal in the Software without restriction, including 8 | without limitation the rights to use, copy, modify, merge, publish, 9 | distribute, sublicense, and/or sell copies of the Software, and to 10 | permit persons to whom the Software is furnished to do so, subject to 11 | the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be 14 | included in all copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 17 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 18 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 19 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE 20 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 21 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 22 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 23 | -------------------------------------------------------------------------------- /Logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/Logo.png -------------------------------------------------------------------------------- /aaa-template/readme.md: -------------------------------------------------------------------------------- 1 | Free Resources 2 | 3 | # Free Web Development and Design Resources 4 | 5 | ## Table of contents 6 | 7 | - [Free Resources Repos and Websites](#free-resources-repos-and-websites) 8 | 9 | - [Short Code Snippets](#short-code-snippets) 10 | 11 | 12 | # Free Resources Repos and Websites 13 | 14 | | **Repository / Websites** | **Description** | 15 | |:------------------------------------------------------------------------------------------------------------------ |:--------------------------------------------------------------------------------------------------------------------------- | 16 | | [Design resources for developers](https://github.com/bradtraversy/design-resources-for-developers) | Curated list of design and UI resources from stock photos, web templates, CSS frameworks, UI libraries, tools and much more | 17 | | [Public Apis](https://github.com/public-apis/public-apis) | A collective list of free APIs for use in software and web development. | 18 | | [Developer Roadmap](https://roadmap.sh/) | Step by step guides and paths to learn different tools or technologies | 19 | | [Developer Tools](https://dev.to/davidepacilio/50-free-tools-and-resources-to-create-awesome-user-interfaces-1c1b) | 50+ free tools and resources to create amazing UIs | 20 | | [Divjoy](https://divjoy.com/) | The React codebase generator | 21 | | [Webdev for you](https://www.webdevforyou.com/) | Visual web development made easy. | 22 | 23 | # Short Code Snippets 24 | 25 | | Websites | Description | 26 | | ------------------------------------------------------ | ---------------------------------------------------------------------- | 27 | | [One line of Code](https://1loc.dev/) | 187 Favorite JavaScript Utilities
in single line of code! No more! | 28 | | [30 seconds of code](https://www.30secondsofcode.org/) | Short code snippets for all your development needs | 29 | -------------------------------------------------------------------------------- /awesome-actions/awesome-actions.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/awesome-actions/awesome-actions.png -------------------------------------------------------------------------------- /awesome-colorful-links/code-of-conduct.md: -------------------------------------------------------------------------------- 1 | # Contributor Code of Conduct 2 | 3 | As contributors and maintainers of this project, and in the interest of 4 | fostering an open and welcoming community, we pledge to respect all people who 5 | contribute through reporting issues, posting feature requests, updating 6 | documentation, submitting pull requests or patches, and other activities. 7 | 8 | We are committed to making participation in this project a harassment-free 9 | experience for everyone, regardless of level of experience, gender, gender 10 | identity and expression, sexual orientation, disability, personal appearance, 11 | body size, race, ethnicity, age, religion, or nationality. 12 | 13 | Examples of unacceptable behavior by participants include: 14 | 15 | * The use of sexualized language or imagery 16 | * Personal attacks 17 | * Trolling or insulting/derogatory comments 18 | * Public or private harassment 19 | * Publishing other's private information, such as physical or electronic 20 | addresses, without explicit permission 21 | * Other unethical or unprofessional conduct 22 | 23 | Project maintainers have the right and responsibility to remove, edit, or 24 | reject comments, commits, code, wiki edits, issues, and other contributions 25 | that are not aligned to this Code of Conduct, or to ban temporarily or 26 | permanently any contributor for other behaviors that they deem inappropriate, 27 | threatening, offensive, or harmful. 28 | 29 | By adopting this Code of Conduct, project maintainers commit themselves to 30 | fairly and consistently applying these principles to every aspect of managing 31 | this project. Project maintainers who do not follow or enforce the Code of 32 | Conduct may be permanently removed from the project team. 33 | 34 | This Code of Conduct applies both within project spaces and in public spaces 35 | when an individual is representing the project or its community. 36 | 37 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 38 | reported by contacting a project maintainer at sindresorhus@gmail.com. All 39 | complaints will be reviewed and investigated and will result in a response that 40 | is deemed necessary and appropriate to the circumstances. Maintainers are 41 | obligated to maintain confidentiality with regard to the reporter of an 42 | incident. 43 | 44 | 45 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], 46 | version 1.3.0, available at 47 | [http://contributor-covenant.org/version/1/3/0/][version] 48 | 49 | [homepage]: http://contributor-covenant.org 50 | [version]: http://contributor-covenant.org/version/1/3/0/ 51 | -------------------------------------------------------------------------------- /awesome-colorful-links/color-palette.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/awesome-colorful-links/color-palette.gif -------------------------------------------------------------------------------- /awesome-colorful-links/contributing.md: -------------------------------------------------------------------------------- 1 | # Contribution Guidelines 2 | 3 | Please note that this project is released with a [Contributor Code of Conduct](code-of-conduct.md). By participating in this project you agree to abide by its terms. 4 | 5 | 6 | Ensure your pull request adheres to the following guidelines: 7 | 8 | - Search previous suggestions before making a new one, as yours may be a duplicate. 9 | - Suggested packages should be tested and documented. 10 | - Make an individual pull request for each suggestion. 11 | - Use the following format: `[package](link) - Description.` 12 | - Additions should be added to the bottom of the relevant category. 13 | - New categories, or improvements to the existing categorization are welcome. 14 | - Link to the GitHub repo, not npmjs.com. 15 | - Keep descriptions short and simple, but descriptive. 16 | - Don't mention `Node.js` in the description as it's implied. 17 | - Start the description with a capital and end with a full stop/period. 18 | - Check your spelling and grammar. 19 | - Make sure your text editor is set to remove trailing whitespace. 20 | - The pull request should have a useful title and include a link to the package and why it should be included. 21 | 22 | Thank you for your suggestions! 23 | 24 | ### Updating your PR 25 | 26 | A lot of times, making a PR adhere to the standards above can be difficult. If the maintainers notice anything that we'd like changed, we'll ask you to edit your PR before we merge it. If you're not sure how to do that, [here is a guide](https://github.com/RichardLitt/knowledge/blob/master/github/amending-a-commit-guide.md) on the different ways you can update your PR so that we can merge it. 27 | -------------------------------------------------------------------------------- /awesome-creative-coding/readme.md: -------------------------------------------------------------------------------- 1 | a 2 | -------------------------------------------------------------------------------- /awesome-design-systems/cover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/awesome-design-systems/cover.png -------------------------------------------------------------------------------- /awesome-icon-libraries/readme.md: -------------------------------------------------------------------------------- 1 | # awesome-icon-libraries 2 | 3 | Here is a list of free and premium icon libraries which I think are pretty awesome. Check them out and use them in your next project. :fire: 4 | 5 | 6 | # Free 7 | 8 | 1. [Heroicons by tailwindcss team](https://heroicons.com) 9 | 2. [Feathericons](https://feathericons.com) 10 | 3. [Fontawesome](https://fontawesome.com/) 11 | 4. [Ionicons](https://ionicons.com) 12 | 5. [Material Icons](http://google.github.io/material-design-icons/) 13 | 6. [Typicons](https://www.s-ings.com/typicons/) 14 | 7. [Octicons](https://primer.style/octicons/) 15 | 8. [GameIcons](https://game-icons.net) 16 | 9. [Weather Icons](https://erikflowers.github.io/weather-icons/) 17 | 10. [DevIcons](https://vorillaz.github.io/devicons/#/main) 18 | 11. [AntDesign Icons](https://github.com/ant-design/ant-design-icons) 19 | 12. [Bootstrap icons](icons.getbootstrap.com/) 20 | 13. [Remix icons](https://github.com/Remix-Design/RemixIcon/security) 21 | 14. [Flat Color Icons](https://github.com/icons8/flat-color-icons) 22 | 15. [Grommet Icons](https://icons.grommet.io) 23 | 16. [Simple Icons](https://simpleicons.org) 24 | 17. [IconMoon](https://github.com/Keyamoon/IcoMoon-Free) 25 | 18. [BoxIcons](https://boxicons.com) 26 | 19. [UIIcons](https://github.com/astrit/css.gg) 27 | 20. [VSCode Codicons](https://github.com/microsoft/vscode-codicons) 28 | 21. [IconBros](https://www.iconbros.com/?ref=producthunt) 29 | 22. [Ios11 Glyphs](https://www.producthunt.com/posts/ios-11-icons-glyphs) 30 | 23. [Evericons](http://www.evericons.com/?ref=producthunt) 31 | 32 | 33 | 34 | # Free+Premium 35 | 36 | 1. [Navigation Icons Set by Alex Martynov](https://www.uplabs.com/posts/navigation-icons-set-e7bc01df-93dd-45b5-acdb-f031f5b5b0e9) 37 | 2. [Icons8](https://icons8.com/l/fluent/?ref=producthunt) 38 | 3. [FlatIcons](https://flat-icons.com/?ref=producthunt) 39 | 4. [Icon54](https://icon54.com/view-icons/?ref=producthunt) 40 | 5. [Streamline Icons](https://www.streamlineicons.com/?ref=producthunt) 41 | 6. [Pixelicons](https://pixelicons.com/free-pack/?ref=producthunt) 42 | 43 | 44 | # Icon Collection/Store 45 | 46 | 1. [IconStore](https://iconstore.co) 47 | 2. [IconScount](https://iconscout.com/bundles?ref=producthunt) 48 | -------------------------------------------------------------------------------- /awesome-json-datasets/sources.md: -------------------------------------------------------------------------------- 1 | ## JSON Dataset Sources 2 | * [openweathermap.org](http://openweathermap.org) 3 | * [blockchain.info](http://blockchain.info) 4 | * [bitcoinaverage.com](http://bitcoinaverage.com) 5 | * [carqueryapi.com](http://carqueryapi.com) 6 | * [police.uk](http://police.uk) 7 | * [fixer.io](http://fixer.io) 8 | * [github.com](http://github.com) 9 | * [httpbin.org](http://httpbin.org/) 10 | * [nodejs.org](https://nodejs.org) 11 | * [reddit.com](http://www.reddit.com) 12 | * [tvmaze.com](http://tvmaze.com) 13 | * [programmableweb.com](http://www.programmableweb.com/) 14 | * [data.ny.gov](https://data.ny.gov/) 15 | * [population.io](http://population.io/) 16 | * [uspovertydata.com](http://uspovertydata.com/) 17 | * [usa.gov](http://usa.gov) 18 | * [justice.gov](http://www.justice.gov/) 19 | * [parliamentdata.ca](http://parliamentdata.ca/) 20 | * [lobbyfacts.eu](http://lobbyfacts.eu/) 21 | * [services.faa.gov](http://services.faa.gov/) 22 | * [jsonvat.com](http://jsonvat.com/) 23 | * [bf4stats.com](http://bf4stats.com/) 24 | * [mtgjson.com](http://mtgjson.com/) 25 | * [steampowered.com](https://api.steampowered.com/) 26 | * [trade.gov](http://developer.trade.gov/) 27 | * [data.ca.gov](https://data.ny.gov/) 28 | * [giphy.com](https://api.giphy.com/) 29 | * [nasa.gov](https://data.nasa.gov/) 30 | * [opensource.org](https://api.opensource.org/) 31 | * [omdbapi.com](http://www.omdbapi.com/) 32 | * [yahooapis.com](https://yahooapis.com) 33 | * [wikimedia.org](https://dumps.wikimedia.org/) 34 | * [ip-api.com](http://ip-api.com/) 35 | * [ddragon.leageoflegends.com](http://ddragon.leagueoflegends.com/tool) 36 | * [rickandmortyapi.com](https://rickandmortyapi.com/) 37 | -------------------------------------------------------------------------------- /awesome-nextjs/nextjs-logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 7 | 8 | 10 | 16 | 19 | 22 | 25 | 29 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /awesome-nuxtjs/media/nuxt-v-label-template.ai: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/awesome-nuxtjs/media/nuxt-v-label-template.ai -------------------------------------------------------------------------------- /awesome-nuxtjs/media/nuxt-v1-label.svg: -------------------------------------------------------------------------------- 1 | nuxt-v1-label -------------------------------------------------------------------------------- /awesome-nuxtjs/media/nuxt-v2-label.svg: -------------------------------------------------------------------------------- 1 | nuxt-v2-label -------------------------------------------------------------------------------- /awesome-nuxtjs/media/nuxt-v3-label.svg: -------------------------------------------------------------------------------- 1 | nuxt-v3-label -------------------------------------------------------------------------------- /awesome-piracy/Wordcloud.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/awesome-piracy/Wordcloud.jpg -------------------------------------------------------------------------------- /awesome-piracy/create-bookmarks.sh: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | 3 | set -euo pipefail 4 | 5 | script_dir=$(dirname "$(readlink -f "$0")") 6 | 7 | if [ -e "${script_dir}/bookmarks.html" ]; then 8 | rm "${script_dir}/bookmarks.html" 9 | fi 10 | 11 | cat "${script_dir}/readme.md" | tail -n +152 | head -n -9 > "${script_dir}/readme-copy.html" 12 | lines=$(cat "${script_dir}/readme-copy.html") 13 | touch "${script_dir}/bookmarks.html" 14 | 15 | echo "Bookmarks" >> "${script_dir}/bookmarks.html" 16 | echo "

Bookmarks

" >> "${script_dir}/bookmarks.html" 17 | echo "

" >> "${script_dir}/bookmarks.html" 18 | echo "

Awesome Piracy

" >> "${script_dir}/bookmarks.html" 19 | echo "

" >> "${script_dir}/bookmarks.html" 20 | 21 | while read -r line; do 22 | if [[ "$line" == *'##'* ]]; then 23 | heading_text=$(echo $line | sed 's/\#//g') 24 | html_text="

25 |

${heading_text:1}

26 |

" 27 | echo "$html_text" >> "${script_dir}/bookmarks.html" 28 | elif [[ "$line" == *'['* ]]; then 29 | item_name=$(echo "$line" | cut -d"]" -f1 | cut -d"[" -f2) 30 | url="$(echo $line | cut -d")" -f1 | cut -d"(" -f2)" 31 | html_text="

$item_name" 32 | echo "$html_text" >> "${script_dir}/bookmarks.html" 33 | fi 34 | done <<< "$lines" 35 | 36 | echo "

" >> "${script_dir}/bookmarks.html" 37 | sed -i '7d' "${script_dir}/bookmarks.html" 38 | 39 | if [ -e "${script_dir}/readme-copy.html" ]; then 40 | rm "${script_dir}/readme-copy.html" 41 | fi 42 | -------------------------------------------------------------------------------- /awesome-resources-shaheednasser/readme2.md: -------------------------------------------------------------------------------- 1 | https://github.com/shahednasser/awesome-resources 2 | -------------------------------------------------------------------------------- /awesome-web-effects/banner.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/awesome-web-effects/banner.jpg -------------------------------------------------------------------------------- /bookmarks-codeverland/images/bookmarks.dev-logo-md.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/bookmarks-codeverland/images/bookmarks.dev-logo-md.png -------------------------------------------------------------------------------- /bookmarks-codeverland/images/codever-bookmarks-header-560x137.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/bookmarks-codeverland/images/codever-bookmarks-header-560x137.png -------------------------------------------------------------------------------- /bookmarks-codeverland/images/codever-bookmarks-header-900x220.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/bookmarks-codeverland/images/codever-bookmarks-header-900x220.png -------------------------------------------------------------------------------- /bookmarks-codeverland/images/codever-bookmarks-header.xcf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/bookmarks-codeverland/images/codever-bookmarks-header.xcf -------------------------------------------------------------------------------- /bookmarks-codeverland/images/r: -------------------------------------------------------------------------------- 1 | w 2 | -------------------------------------------------------------------------------- /bookmarks-frontend-dev/about.md: -------------------------------------------------------------------------------- 1 | # About this list 2 | 3 | If I have a specific development task the workflow for me looks like this: 4 | 5 | 1. Search through Google, GitHub, Unheap, npm, bower, jster and so on. 6 | 2. Compile a list of useful packages and tutorials for every one of them. 7 | 3. Select the best package for the task. 8 | 9 | So I created this list to not have to go through step #1 and #2 every time. 10 | -------------------------------------------------------------------------------- /bookmarks-frontend-dev/animation/web-animations-api.md: -------------------------------------------------------------------------------- 1 | # Web Animations API 2 | 3 | **Context: [frontend-dev-bookmarks](../README.md) / Animation** 4 | 5 | Web Animations is a new JavaScript API for driving animated content on the web. By unifying the animation features of SVG and CSS, Web Animations unlocks features previously only usable declaratively, and exposes powerful, high-performance animation capabilities to developers. 6 | 7 | [![frontend.directory](https://img.shields.io/badge/frontend-directory-blue.svg?style=flat-square)](http://frontend.directory/) 8 | [![Gitter](https://img.shields.io/gitter/room/dypsilon/frontend-dev-bookmarks.svg?style=flat-square&maxAge=2592000)](https://gitter.im/dypsilon/frontend-dev-bookmarks) 9 | [![Twitter](https://img.shields.io/badge/follow-twitter-55acee.svg?style=flat-square)](https://twitter.com/FrontendDir) 10 | 11 | ----------------------------------------- 12 | + **[Are we animated yet?](https://birtles.github.io/areweanimatedyet/)**: This page tracks the progress of implementing the Web Animations API in Firefox. 13 | + **[WAAPI Browser Support Test (+ Polyfill)](http://codepen.io/danwilson/pen/XmWraY)**: This codepen tests whether and to which extend your browser supports Web Animations API. The test is run after including the Polyfill. 14 | + **[Web Animations Polyfill](https://github.com/web-animations/web-animations-js)**: JavaScript implementation of the Web Animations API. 15 | 16 | 17 | ------------------ 18 | 19 | # License 20 | 21 | Creative Commons License
This work is licensed under a Creative Commons Attribution 4.0 International License. 22 | 23 | Please provide a link back to this repository. This is not necessary for GitHub forks. 24 | -------------------------------------------------------------------------------- /bookmarks-frontend-dev/architecture/algorithms.md: -------------------------------------------------------------------------------- 1 | # Algorithms 2 | 3 | **Context: [frontend-dev-bookmarks](../README.md) / Architecture** 4 | 5 | A self-contained step-by-step set of operations to be performed. Algorithms perform calculation, data processing, and/or automated reasoning tasks. 6 | 7 | [![frontend.directory](https://img.shields.io/badge/frontend-directory-blue.svg?style=flat-square)](http://frontend.directory/) 8 | [![Gitter](https://img.shields.io/gitter/room/dypsilon/frontend-dev-bookmarks.svg?style=flat-square&maxAge=2592000)](https://gitter.im/dypsilon/frontend-dev-bookmarks) 9 | [![Twitter](https://img.shields.io/badge/follow-twitter-55acee.svg?style=flat-square)](https://twitter.com/FrontendDir) 10 | 11 | ----------------------------------------- 12 | + **[Algorithm Visualizer](https://github.com/parkjs814/AlgorithmVisualizer)**: A collection of algorithms with code and visualizations for each one of them. 13 | + **[Sorting Algorithms Animations](https://www.toptal.com/developers/sorting-algorithms/)**: The following animations illustrate how effectively data sets from different starting points can be sorted using different algorithms. 14 | 15 | 16 | ------------------ 17 | 18 | # License 19 | 20 | Creative Commons License
This work is licensed under a Creative Commons Attribution 4.0 International License. 21 | 22 | Please provide a link back to this repository. This is not necessary for GitHub forks. 23 | -------------------------------------------------------------------------------- /bookmarks-frontend-dev/compatibility/cross-browser.md: -------------------------------------------------------------------------------- 1 | # Cross Browser 2 | 3 | **Context: [frontend-dev-bookmarks](../README.md) / Compatibility** 4 | 5 | Cross-browser refers to the ability of a website, web application, HTML construct or client-side script to function in environments that provide its required features and to bow out or degrade gracefully when features are absent or lacking. 6 | 7 | [![frontend.directory](https://img.shields.io/badge/frontend-directory-blue.svg?style=flat-square)](http://frontend.directory/) 8 | [![Gitter](https://img.shields.io/gitter/room/dypsilon/frontend-dev-bookmarks.svg?style=flat-square&maxAge=2592000)](https://gitter.im/dypsilon/frontend-dev-bookmarks) 9 | [![Twitter](https://img.shields.io/badge/follow-twitter-55acee.svg?style=flat-square)](https://twitter.com/FrontendDir) 10 | 11 | ----------------------------------------- 12 | + **[Can I use ... ?](http://caniuse.com/)**: "Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers. 13 | + **[Dev Tools by Microsoft](https://developer.microsoft.com/en-us/microsoft-edge/tools/)**: These tools allow you to test your product on different version of Internet Explorer and Microsoft Edge. 14 | + **[HTML5 Cross Browser Polyfills](https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills)**: So here we're collecting all the shims, fallbacks, and polyfills in order to implant HTML5 functionality in browsers that don't natively support them. 15 | + **[HTML5 Please](http://html5please.com/)**: Look up HTML5, CSS3, etc features, know if they are ready for use, and if so find out how you should use them – with polyfills, fallbacks or as they are. 16 | + **[Modernizr](https://modernizr.com/)**: It’s a collection of superfast tests – or “detects” as we like to call them – which run as your web page loads, then you can use the results to tailor the experience to the user. 17 | + **[Normalize.css](http://necolas.github.io/normalize.css/)**: A modern, HTML5-ready alternative to CSS resets. 18 | + **[Polyfill.io](https://polyfill.io/)**: Just the polyfills you need for your site, tailored to each browser. 19 | 20 | 21 | ------------------ 22 | 23 | # License 24 | 25 | Creative Commons License
This work is licensed under a Creative Commons Attribution 4.0 International License. 26 | 27 | Please provide a link back to this repository. This is not necessary for GitHub forks. -------------------------------------------------------------------------------- /bookmarks-frontend-dev/compatibility/keyboard.md: -------------------------------------------------------------------------------- 1 | # Keyboard 2 | 3 | **Context: [frontend-dev-bookmarks](../README.md) / Compatibility** 4 | 5 | Working with keyboard input in a web browser. 6 | 7 | [![frontend.directory](https://img.shields.io/badge/frontend-directory-blue.svg?style=flat-square)](http://frontend.directory/) 8 | [![Gitter](https://img.shields.io/gitter/room/dypsilon/frontend-dev-bookmarks.svg?style=flat-square&maxAge=2592000)](https://gitter.im/dypsilon/frontend-dev-bookmarks) 9 | [![Twitter](https://img.shields.io/badge/follow-twitter-55acee.svg?style=flat-square)](https://twitter.com/FrontendDir) 10 | 11 | ----------------------------------------- 12 | + **[What’s New with KeyboardEvents? Keys and Codes!](https://developers.google.com/web/updates/2016/04/keyboardevent-keys-codes)**: Jeff Posnick talks about the code and key event attributes and how to use them in practice. 13 | 14 | 15 | ------------------ 16 | 17 | # License 18 | 19 | Creative Commons License
This work is licensed under a Creative Commons Attribution 4.0 International License. 20 | 21 | Please provide a link back to this repository. This is not necessary for GitHub forks. -------------------------------------------------------------------------------- /bookmarks-frontend-dev/compatibility/printers.md: -------------------------------------------------------------------------------- 1 | # Printers 2 | 3 | **Context: [frontend-dev-bookmarks](../README.md) / Compatibility** 4 | 5 | Manipulation of printer output through CSS. 6 | 7 | [![frontend.directory](https://img.shields.io/badge/frontend-directory-blue.svg?style=flat-square)](http://frontend.directory/) 8 | [![Gitter](https://img.shields.io/gitter/room/dypsilon/frontend-dev-bookmarks.svg?style=flat-square&maxAge=2592000)](https://gitter.im/dypsilon/frontend-dev-bookmarks) 9 | [![Twitter](https://img.shields.io/badge/follow-twitter-55acee.svg?style=flat-square)](https://twitter.com/FrontendDir) 10 | 11 | ----------------------------------------- 12 | + **[Tips And Tricks For Print Style Sheets](http://coding.smashingmagazine.com/2013/03/08/tips-tricks-print-style-sheets/)**: A comprehensive guide for print optimization including background images and colors, expanding external links, QR codes, CSS3 filters for print quality. 13 | 14 | 15 | ------------------ 16 | 17 | # License 18 | 19 | Creative Commons License
This work is licensed under a Creative Commons Attribution 4.0 International License. 20 | 21 | Please provide a link back to this repository. This is not necessary for GitHub forks. -------------------------------------------------------------------------------- /bookmarks-frontend-dev/compatibility/web-accessibility.md: -------------------------------------------------------------------------------- 1 | # Web Accessibility 2 | 3 | **Context: [frontend-dev-bookmarks](../README.md) / Compatibility** 4 | 5 | Web accessibility means that people with disabilities can perceive, understand, navigate, and interact with the Web, and that they can contribute to the Web. 6 | 7 | [![frontend.directory](https://img.shields.io/badge/frontend-directory-blue.svg?style=flat-square)](http://frontend.directory/) 8 | [![Gitter](https://img.shields.io/gitter/room/dypsilon/frontend-dev-bookmarks.svg?style=flat-square&maxAge=2592000)](https://gitter.im/dypsilon/frontend-dev-bookmarks) 9 | [![Twitter](https://img.shields.io/badge/follow-twitter-55acee.svg?style=flat-square)](https://twitter.com/FrontendDir) 10 | 11 | ----------------------------------------- 12 | + **[Notes on Using ARIA in HTML](http://w3c.github.io/aria-in-html/)**: This document is a practical guide for developers on how to add accessibility information to HTML elements using the Accessible Rich Internet Applications specification. 13 | + **[The A11Y Project](http://a11yproject.com/)**: A community-driven effort to make web accessibility easier. 14 | 15 | 16 | ------------------ 17 | 18 | # License 19 | 20 | Creative Commons License
This work is licensed under a Creative Commons Attribution 4.0 International License. 21 | 22 | Please provide a link back to this repository. This is not necessary for GitHub forks. -------------------------------------------------------------------------------- /bookmarks-frontend-dev/contributing.md: -------------------------------------------------------------------------------- 1 | # Contribution Guidelines 2 | 3 | Please ensure your pull request adheres to the following guidelines: 4 | 5 | - Search previous suggestions before making a new one, as yours may be a duplicate. 6 | - Make an individual pull request for each suggestion. 7 | - Use the following format: `[Bookmark Title](link): Description.` 8 | - The title usually consists of several words. For bookmarks of an article or tutorial, use the title of the article. 9 | - The description consists of one-two sentences about the bookmark. It is required. 10 | - Titles should be [capitalized](http://grammar.yourdictionary.com/capitalization/rules-for-capitalization-in-titles.html). 11 | - Additions should be added to the bottom of the relevant category. 12 | - New categories or improvements to the existing categorization are welcome. 13 | - Check your spelling and grammar. 14 | - Make sure your text editor is set to remove trailing whitespace. 15 | - The pull request and commit should have a useful title. 16 | 17 | Thank you for your suggestions! -------------------------------------------------------------------------------- /bookmarks-frontend-dev/ecosystem/podcasts.md: -------------------------------------------------------------------------------- 1 | # Podcasts 2 | 3 | **Context: [frontend-dev-bookmarks](../README.md) / Ecosystem** 4 | 5 | A podcast is a form of digital media that consists of an episodic series of audio, video, digital radio, PDF, or ePub files subscribed to and downloaded automatically through web syndication or streamed online to a computer or mobile device. 6 | 7 | [![frontend.directory](https://img.shields.io/badge/frontend-directory-blue.svg?style=flat-square)](http://frontend.directory/) 8 | [![Gitter](https://img.shields.io/gitter/room/dypsilon/frontend-dev-bookmarks.svg?style=flat-square&maxAge=2592000)](https://gitter.im/dypsilon/frontend-dev-bookmarks) 9 | [![Twitter](https://img.shields.io/badge/follow-twitter-55acee.svg?style=flat-square)](https://twitter.com/FrontendDir) 10 | 11 | ----------------------------------------- 12 | + **[Adventures in Angular](https://devchat.tv/adv-in-angular)**: Adventures in Angular is a weekly podcast dedicated to the Angular JavaScript framework and related technologies, tools, languages, and practices. 13 | + **[CDNify Podcasts](https://itunes.apple.com/us/podcast/cdnify/id786191888)**: The CDNify podcast covers all things tech, startup, web performance and acceleration. 14 | + **[JavaScript Air](https://javascriptair.com/)**: The live broadcast podcast all about JavaScript. 15 | + **[JavaScript Jabber](https://devchat.tv/js-jabber/)**: A weekly podcast about JavaScript, including Node.js, Front-End Technologies, Careers, Teams and more. 16 | + **[Non Breaking Space Show](http://goodstuff.fm/nbsp)**: Seeking out the best, brightest, and smartest creative people on digital art, design, and development. From workflows to life hacks, we examine why they do what they do and how they did it. 17 | + **[Shop Talk Show](http://shoptalkshow.com/)**: An internet radio show about the internet starring Dave Rupert and Chris Coyier. 18 | + **[The Big Web Show](http://5by5.tv/bigwebshow)**: The award winning Big Web Show features special guests and topics like web publishing, art direction, content strategy, typography, web technology, and more. It's everything web that matters. 19 | + **[The Web Ahead](http://5by5.tv/webahead)**: Conversations with world experts on changing technologies and future of the web. The Web Ahead is your shortcut to keeping up. 20 | + **[Web Security Warrior](https://devchat.tv/web-sec-warriors)**: Web Security Warriors is a weekly discussion by developers about keeping websites, data, servers, and other internet outposts secure. 21 | 22 | 23 | ------------------ 24 | 25 | # License 26 | 27 | Creative Commons License
This work is licensed under a Creative Commons Attribution 4.0 International License. 28 | 29 | Please provide a link back to this repository. This is not necessary for GitHub forks. -------------------------------------------------------------------------------- /bookmarks-frontend-dev/languages-protocols-browser-apis/document-object-model-dom.md: -------------------------------------------------------------------------------- 1 | # Document Object Model (DOM) 2 | 3 | **Context: [frontend-dev-bookmarks](../README.md) / Languages, Protocols, Browser APIs** 4 | 5 | The DOM is a programming interface for HTML, XML and SVG documents. It defines methods that allow access to the tree, so that they can change the document structure, style and content. 6 | 7 | [![frontend.directory](https://img.shields.io/badge/frontend-directory-blue.svg?style=flat-square)](http://frontend.directory/) 8 | [![Gitter](https://img.shields.io/gitter/room/dypsilon/frontend-dev-bookmarks.svg?style=flat-square&maxAge=2592000)](https://gitter.im/dypsilon/frontend-dev-bookmarks) 9 | [![Twitter](https://img.shields.io/badge/follow-twitter-55acee.svg?style=flat-square)](https://twitter.com/FrontendDir) 10 | 11 | ----------------------------------------- 12 | + **Document Events**: DOM event model is a generic event system and a set of standard modules of events for user interface control and document mutation notifications 13 | + **[An Introduction To DOM Events](https://www.smashingmagazine.com/2013/11/an-introduction-to-dom-events/)**: Wilson Page introduces the basics of working with DOM events, then delves into their inner workings, explaining how we can make use of them to solve common problems. 14 | + **[DOM Level 2 Event Model](https://www.w3.org/TR/DOM-Level-2-Events/events.html)**: W3C specification section for DOM Level 2 Events. 15 | + **[Gator](https://craig.is/riding/gators)**: Gator is a small (~0.8 kb minified + gzipped), simple, standalone, event delegation library. 16 | + **Overview**: High level guides, articles and documents about DOM. 17 | + **[DOM Features You Didn’t Know Existed](http://www.impressivewebs.com/dom-features-you-didnt-know-existed-video-slides/)**: Louis Lazaris talks about DOM Features you probably don't know. 18 | + **[DOM Reference at the MDN](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model)**: Complete reference of the DOM provided by the Mozilla Development Network. 19 | + **[Document Object Model (DOM) Technical Reports](https://www.w3.org/DOM/DOMTR)**: Specifications by the W3C. 20 | + **[Introduction to the DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction)**: This section provides a brief conceptual introduction to the DOM: what it is, how it provides structure for HTML and XML documents, how you can access it, and how this API presents the reference information and examples. 21 | 22 | 23 | ------------------ 24 | 25 | # License 26 | 27 | Creative Commons License
This work is licensed under a Creative Commons Attribution 4.0 International License. 28 | 29 | Please provide a link back to this repository. This is not necessary for GitHub forks. -------------------------------------------------------------------------------- /bookmarks-frontend-dev/languages-protocols-browser-apis/hypertext-markup-language-html.md: -------------------------------------------------------------------------------- 1 | # HyperText Markup Language (HTML) 2 | 3 | **Context: [frontend-dev-bookmarks](../README.md) / Languages, Protocols, Browser APIs** 4 | 5 | HTML is the standard markup language used to create web pages and its elements form the building blocks of all websites. 6 | 7 | [![frontend.directory](https://img.shields.io/badge/frontend-directory-blue.svg?style=flat-square)](http://frontend.directory/) 8 | [![Gitter](https://img.shields.io/gitter/room/dypsilon/frontend-dev-bookmarks.svg?style=flat-square&maxAge=2592000)](https://gitter.im/dypsilon/frontend-dev-bookmarks) 9 | [![Twitter](https://img.shields.io/badge/follow-twitter-55acee.svg?style=flat-square)](https://twitter.com/FrontendDir) 10 | 11 | ----------------------------------------- 12 | + **[Dive Into HTML5 (Book)](http://diveintohtml5.info/)**: Dive Into HTML5 elaborates on a hand-picked selection of features from the HTML5 specification and other fine standards. 13 | + **[Google HTML/CSS Style Guide](https://google.github.io/styleguide/htmlcssguide.xml)**: This document defines formatting and style rules for HTML and CSS. It aims at improving collaboration, code quality, and enabling supporting infrastructure. 14 | + **[HEAD](https://github.com/joshbuchea/HEAD)**: A list of everything that could go in the of your document. 15 | + **[Idiomatic HTML](https://github.com/necolas/idiomatic-html)**: The following document outlines a reasonable style guide for HTML development. These guidelines strongly encourage the use of existing, common, sensible patterns. They should be adapted as needed to create your own style guide. 16 | + **Video & Audio**: Use the HTML video and audio element to embed video content in a document. 17 | + **[Bringing Production Video To The Web](https://www.smashingmagazine.com/2016/04/html5-media-source-extensions-bringing-production-video-web/)**: Stefan Lederer gives you a good overview of the state and future of video on the web. 18 | + **[Wordpress HTML Coding Standards](https://make.wordpress.org/core/handbook/best-practices/coding-standards/html/)**: Coding conventions for WordPress. 19 | 20 | 21 | ------------------ 22 | 23 | # License 24 | 25 | Creative Commons License
This work is licensed under a Creative Commons Attribution 4.0 International License. 26 | 27 | Please provide a link back to this repository. This is not necessary for GitHub forks. -------------------------------------------------------------------------------- /bookmarks-frontend-dev/languages-protocols-browser-apis/hypertext-transfer-protocol-http.md: -------------------------------------------------------------------------------- 1 | # Hypertext Transfer Protocol (HTTP) 2 | 3 | **Context: [frontend-dev-bookmarks](../README.md) / Languages, Protocols, Browser APIs** 4 | 5 | The Hypertext Transfer Protocol (HTTP) is an application protocol for distributed, collaborative, hypermedia information systems. HTTP is the foundation of data communication for the World Wide Web. 6 | 7 | [![frontend.directory](https://img.shields.io/badge/frontend-directory-blue.svg?style=flat-square)](http://frontend.directory/) 8 | [![Gitter](https://img.shields.io/gitter/room/dypsilon/frontend-dev-bookmarks.svg?style=flat-square&maxAge=2592000)](https://gitter.im/dypsilon/frontend-dev-bookmarks) 9 | [![Twitter](https://img.shields.io/badge/follow-twitter-55acee.svg?style=flat-square)](https://twitter.com/FrontendDir) 10 | 11 | ----------------------------------------- 12 | + **[Best Practice for HTTP2 Front-End Deployments](http://blog.cloud66.com/best-practice-for-http2-front-end-deployments/)**: This post describes how to set up and use the new HTTP/2 protocol. 13 | + **[Ideal HTTP Performance](https://www.mnot.net/blog/2016/04/22/ideal-http)**: This post talks about the design of the HTTP protocol, it's performance drawbacks and how to work around them. 14 | 15 | 16 | ------------------ 17 | 18 | # License 19 | 20 | Creative Commons License
This work is licensed under a Creative Commons Attribution 4.0 International License. 21 | 22 | Please provide a link back to this repository. This is not necessary for GitHub forks. -------------------------------------------------------------------------------- /bookmarks-frontend-dev/languages-protocols-browser-apis/javascript-object-notation-json.md: -------------------------------------------------------------------------------- 1 | # JavaScript Object Notation (JSON) 2 | 3 | **Context: [frontend-dev-bookmarks](../README.md) / Languages, Protocols, Browser APIs** 4 | 5 | JSON (JavaScript Object Notation) is a lightweight data-interchange format. It is easy for humans to read and write. It is easy for machines to parse and generate. It is based on a subset of the JavaScript Programming Language. 6 | 7 | [![frontend.directory](https://img.shields.io/badge/frontend-directory-blue.svg?style=flat-square)](http://frontend.directory/) 8 | [![Gitter](https://img.shields.io/gitter/room/dypsilon/frontend-dev-bookmarks.svg?style=flat-square&maxAge=2592000)](https://gitter.im/dypsilon/frontend-dev-bookmarks) 9 | [![Twitter](https://img.shields.io/badge/follow-twitter-55acee.svg?style=flat-square)](https://twitter.com/FrontendDir) 10 | 11 | ----------------------------------------- 12 | + **[JSON-LD](http://json-ld.org/)**: JSON-LD is a lightweight Linked Data format. It is based on the already successful JSON format and provides a way to help JSON data interoperate at Web-scale. 13 | 14 | 15 | ------------------ 16 | 17 | # License 18 | 19 | Creative Commons License
This work is licensed under a Creative Commons Attribution 4.0 International License. 20 | 21 | Please provide a link back to this repository. This is not necessary for GitHub forks. -------------------------------------------------------------------------------- /bookmarks-frontend-dev/languages-protocols-browser-apis/scalable-vector-graphics-svg.md: -------------------------------------------------------------------------------- 1 | # Scalable Vector Graphics (SVG) 2 | 3 | **Context: [frontend-dev-bookmarks](../README.md) / Languages, Protocols, Browser APIs** 4 | 5 | An XML-based vector image format for two-dimensional graphics with support for interactivity and animation. 6 | 7 | [![frontend.directory](https://img.shields.io/badge/frontend-directory-blue.svg?style=flat-square)](http://frontend.directory/) 8 | [![Gitter](https://img.shields.io/gitter/room/dypsilon/frontend-dev-bookmarks.svg?style=flat-square&maxAge=2592000)](https://gitter.im/dypsilon/frontend-dev-bookmarks) 9 | [![Twitter](https://img.shields.io/badge/follow-twitter-55acee.svg?style=flat-square)](https://twitter.com/FrontendDir) 10 | 11 | ----------------------------------------- 12 | + **[Tools And Resources For Editing, Converting And Optimizing SVGs](https://www.smashingmagazine.com/2016/04/tools-and-resources-for-editing-converting-and-optimizing-svgs/)**: This article will provide you with tools and resources to simplify editing, converting, optimizing, and delivering SVGs. 13 | 14 | 15 | ------------------ 16 | 17 | # License 18 | 19 | Creative Commons License
This work is licensed under a Creative Commons Attribution 4.0 International License. 20 | 21 | Please provide a link back to this repository. This is not necessary for GitHub forks. -------------------------------------------------------------------------------- /bookmarks-frontend-dev/languages-protocols-browser-apis/service-workers.md: -------------------------------------------------------------------------------- 1 | # Service Workers 2 | 3 | **Context: [frontend-dev-bookmarks](../README.md) / Languages, Protocols, Browser APIs** 4 | 5 | A method that enables applications to take advantage of persistent background processing, including hooks to enable bootstrapping of web applications while offline. 6 | 7 | [![frontend.directory](https://img.shields.io/badge/frontend-directory-blue.svg?style=flat-square)](http://frontend.directory/) 8 | [![Gitter](https://img.shields.io/gitter/room/dypsilon/frontend-dev-bookmarks.svg?style=flat-square&maxAge=2592000)](https://gitter.im/dypsilon/frontend-dev-bookmarks) 9 | [![Twitter](https://img.shields.io/badge/follow-twitter-55acee.svg?style=flat-square)](https://twitter.com/FrontendDir) 10 | 11 | ----------------------------------------- 12 | + **[Instant Loading Web Apps With An Application Shell Architecture](https://medium.com/google-developers/instant-loading-web-apps-with-an-application-shell-architecture-7c0c2f10c73)**: Addy Osmani describes how to leverage the Service Worker API to drastically improve the loading speed of your web application. 13 | + **[Introduction to Service Worker](http://www.html5rocks.com/en/tutorials/service-worker/introduction/)**: Matt Gaunt introduces the main features of Service Worker API in this article. 14 | + **[Is ServiceWorker Ready?](https://jakearchibald.github.io/isserviceworkerready/)**: Tracks the implementation status across the main browsers. 15 | 16 | 17 | ------------------ 18 | 19 | # License 20 | 21 | Creative Commons License
This work is licensed under a Creative Commons Attribution 4.0 International License. 22 | 23 | Please provide a link back to this repository. This is not necessary for GitHub forks. 24 | -------------------------------------------------------------------------------- /bookmarks-frontend-dev/languages-protocols-browser-apis/uniform-resource-identifier-uri.md: -------------------------------------------------------------------------------- 1 | # Uniform Resource Identifier (URI) 2 | 3 | **Context: [frontend-dev-bookmarks](../README.md) / Languages, Protocols, Browser APIs** 4 | 5 | URI is a string of characters used to identify a resource. The most common form of URI is the Uniform Resource Locator (URL). 6 | 7 | [![frontend.directory](https://img.shields.io/badge/frontend-directory-blue.svg?style=flat-square)](http://frontend.directory/) 8 | [![Gitter](https://img.shields.io/gitter/room/dypsilon/frontend-dev-bookmarks.svg?style=flat-square&maxAge=2592000)](https://gitter.im/dypsilon/frontend-dev-bookmarks) 9 | [![Twitter](https://img.shields.io/badge/follow-twitter-55acee.svg?style=flat-square)](https://twitter.com/FrontendDir) 10 | 11 | ----------------------------------------- 12 | + **[Architecture of the World Wide Web: Identification](https://www.w3.org/TR/webarch/#identification)**: This architecture document by W3C discusses the core design components of the Web. They are identification of resources, representation of resource state, and the protocols that support the interaction between agents and resources in the space. 13 | + **[SpeakingURL](https://github.com/pid/speakingurl)**: This module aims to transliterate the input string and create a so-called Semantic or Speaking URL. 14 | + **[URI.js](http://medialize.github.io/URI.js/)**: URI.js is a javascript library for working with URLs. It offers a "jQuery-style" API to read and write all regular components and a number of convenience methods. 15 | 16 | 17 | ------------------ 18 | 19 | # License 20 | 21 | Creative Commons License
This work is licensed under a Creative Commons Attribution 4.0 International License. 22 | 23 | Please provide a link back to this repository. This is not necessary for GitHub forks. -------------------------------------------------------------------------------- /bookmarks-frontend-dev/languages-protocols-browser-apis/webassembly.md: -------------------------------------------------------------------------------- 1 | # WebAssembly 2 | 3 | **Context: [frontend-dev-bookmarks](../README.md) / Languages, Protocols, Browser APIs** 4 | 5 | WebAssembly is meant to fill a place that JavaScript has been forced to occupy up to now: a low-level code representation that can serve as a compiler target. 6 | 7 | [![frontend.directory](https://img.shields.io/badge/frontend-directory-blue.svg?style=flat-square)](http://frontend.directory/) 8 | [![Gitter](https://img.shields.io/gitter/room/dypsilon/frontend-dev-bookmarks.svg?style=flat-square&maxAge=2592000)](https://gitter.im/dypsilon/frontend-dev-bookmarks) 9 | [![Twitter](https://img.shields.io/badge/follow-twitter-55acee.svg?style=flat-square)](https://twitter.com/FrontendDir) 10 | 11 | ----------------------------------------- 12 | + **[7 Things You Should Know About WebAssembly](https://auth0.com/blog/2015/10/14/7-things-you-should-know-about-web-assembly/)**: In this post we will explore seven key facts about WebAssembly, one of the biggest changes the web will experience in the coming years. 13 | 14 | 15 | ------------------ 16 | 17 | # License 18 | 19 | Creative Commons License
This work is licensed under a Creative Commons Attribution 4.0 International License. 20 | 21 | Please provide a link back to this repository. This is not necessary for GitHub forks. -------------------------------------------------------------------------------- /bookmarks-frontend-dev/user-interface-components/buttons.md: -------------------------------------------------------------------------------- 1 | # Buttons 2 | 3 | **Context: [frontend-dev-bookmarks](../README.md) / User Interface Components** 4 | 5 | The term button refers to any graphical control element that provides the user a simple way to trigger an event, like searching for a query at a search engine, or to interact with dialog boxes, like confirming an action. 6 | 7 | [![frontend.directory](https://img.shields.io/badge/frontend-directory-blue.svg?style=flat-square)](http://frontend.directory/) 8 | [![Gitter](https://img.shields.io/gitter/room/dypsilon/frontend-dev-bookmarks.svg?style=flat-square&maxAge=2592000)](https://gitter.im/dypsilon/frontend-dev-bookmarks) 9 | [![Twitter](https://img.shields.io/badge/follow-twitter-55acee.svg?style=flat-square)](https://twitter.com/FrontendDir) 10 | 11 | ----------------------------------------- 12 | + **[Quantum Paper Buttons](https://github.com/nashvail/Quttons)**: With this plugin you can hide any div behind a Quantum Paper Button or Qutton. Qunatum Paper is a digital paper that can change its size, shape and color to accommodate new content. Quantum paper is part of Google's new Material Design language. 13 | + **[Sharingbuttons.io](http://sharingbuttons.io/)**: This generator outputs social media sharing buttons that do not use JavaScript, don't block your website from rendering, are accessible and don't track the user. 14 | 15 | 16 | ------------------ 17 | 18 | # License 19 | 20 | Creative Commons License
This work is licensed under a Creative Commons Attribution 4.0 International License. 21 | 22 | Please provide a link back to this repository. This is not necessary for GitHub forks. -------------------------------------------------------------------------------- /bookmarks-frontend-dev/user-interface-components/code.md: -------------------------------------------------------------------------------- 1 | # Code 2 | 3 | **Context: [frontend-dev-bookmarks](../README.md) / User Interface Components** 4 | 5 | Code viewers and editors designed for embedding inside a website. 6 | 7 | [![frontend.directory](https://img.shields.io/badge/frontend-directory-blue.svg?style=flat-square)](http://frontend.directory/) 8 | [![Gitter](https://img.shields.io/gitter/room/dypsilon/frontend-dev-bookmarks.svg?style=flat-square&maxAge=2592000)](https://gitter.im/dypsilon/frontend-dev-bookmarks) 9 | [![Twitter](https://img.shields.io/badge/follow-twitter-55acee.svg?style=flat-square)](https://twitter.com/FrontendDir) 10 | 11 | ----------------------------------------- 12 | + **[Behave.js](http://jakiestfu.github.io/Behave.js/)**: Behave.js is a lightweight library for adding IDE style behaviors to plain text areas, making it much more enjoyable to write code in. 13 | + **[CodeMirror](http://codemirror.net/)**: CodeMirror is a versatile text editor implemented in JavaScript for the browser. It is specialized for editing code, and comes with a number of language modes and addons that implement more advanced editing functionality. 14 | + **[Intelligist](http://srobbin.com/jquery-plugins/intelligist/)**: A jQuery plugin that makes it easy to share and demo code in-page, using GitHub gists. 15 | + **[Prism](http://prismjs.com/)**: Prism is a lightweight, extensible syntax highlighter, built with modern web standards in mind. 16 | + **[Rainbow](https://craig.is/making/rainbows)**: Rainbow is a code syntax highlighting library written in Javascript. 17 | It was designed to be lightweight, easy to use, and extendable. 18 | It is completely themable via CSS. 19 | + **[ansi_up](https://github.com/drudru/ansi_up)**: A javascript library that converts text with ANSI terminal codes into colorful HTML 20 | + **[tabIndent.js](http://julianlam.github.io/tabIndent.js/)**: tabIndent.js enhances a textarea, so that the tab key no longer takes you to the next input, but rather, acts like a text editor by inserting a tab character. 21 | 22 | 23 | ------------------ 24 | 25 | # License 26 | 27 | Creative Commons License
This work is licensed under a Creative Commons Attribution 4.0 International License. 28 | 29 | Please provide a link back to this repository. This is not necessary for GitHub forks. 30 | -------------------------------------------------------------------------------- /bookmarks-frontend-dev/user-interface-components/galeries-and-image-sliders.md: -------------------------------------------------------------------------------- 1 | # Galeries & Image Sliders 2 | 3 | **Context: [frontend-dev-bookmarks](../README.md) / User Interface Components** 4 | 5 | A sophisticated way to present a collection of images on your website. 6 | 7 | [![frontend.directory](https://img.shields.io/badge/frontend-directory-blue.svg?style=flat-square)](http://frontend.directory/) 8 | [![Gitter](https://img.shields.io/gitter/room/dypsilon/frontend-dev-bookmarks.svg?style=flat-square&maxAge=2592000)](https://gitter.im/dypsilon/frontend-dev-bookmarks) 9 | [![Twitter](https://img.shields.io/badge/follow-twitter-55acee.svg?style=flat-square)](https://twitter.com/FrontendDir) 10 | 11 | ----------------------------------------- 12 | + **[Lightgallery.js](https://github.com/sachinchoolur/lightgallery.js/)**: Full featured JavaScript Lightbox gallery without any dependencies. 13 | 14 | 15 | ------------------ 16 | 17 | # License 18 | 19 | Creative Commons License
This work is licensed under a Creative Commons Attribution 4.0 International License. 20 | 21 | Please provide a link back to this repository. This is not necessary for GitHub forks. -------------------------------------------------------------------------------- /bookmarks-frontend-dev/user-interface-components/grid.md: -------------------------------------------------------------------------------- 1 | # Grid 2 | 3 | **Context: [frontend-dev-bookmarks](../README.md) / User Interface Components** 4 | 5 | CSS Grid Layout Systems. 6 | 7 | [![frontend.directory](https://img.shields.io/badge/frontend-directory-blue.svg?style=flat-square)](http://frontend.directory/) 8 | [![Gitter](https://img.shields.io/gitter/room/dypsilon/frontend-dev-bookmarks.svg?style=flat-square&maxAge=2592000)](https://gitter.im/dypsilon/frontend-dev-bookmarks) 9 | [![Twitter](https://img.shields.io/badge/follow-twitter-55acee.svg?style=flat-square)](https://twitter.com/FrontendDir) 10 | 11 | ----------------------------------------- 12 | + **[Bourbon Neat](http://neat.bourbon.io/)**: A lightweight semantic grid framework for Sass and Bourbon. 13 | + **[Profound Grid](http://www.profoundgrid.com/)**: A responsive grid system for fixed and fluid layouts. Built in SCSS, it gives you flexibility and full control. 14 | + **[RWDGrid](http://rwdgrid.com/)**: 2kb, Mobile First Grid System, HTML5 Boilerplate Head, 960grid like naming convention. PSD Grid included. 15 | + **[Simple Grid](http://thisisdallas.github.io/Simple-Grid/)**: Simple Grid was created for developers who need a barebones grid. With fluid columns, Simple Grid is responsive down to mobile. 16 | 17 | 18 | ------------------ 19 | 20 | # License 21 | 22 | Creative Commons License
This work is licensed under a Creative Commons Attribution 4.0 International License. 23 | 24 | Please provide a link back to this repository. This is not necessary for GitHub forks. -------------------------------------------------------------------------------- /bookmarks-frontend-dev/user-interface-components/table-of-contents.md: -------------------------------------------------------------------------------- 1 | # Table Of Contents 2 | 3 | **Context: [frontend-dev-bookmarks](../README.md) / User Interface Components** 4 | 5 | Components for automatic table of contents generation. 6 | 7 | [![frontend.directory](https://img.shields.io/badge/frontend-directory-blue.svg?style=flat-square)](http://frontend.directory/) 8 | [![Gitter](https://img.shields.io/gitter/room/dypsilon/frontend-dev-bookmarks.svg?style=flat-square&maxAge=2592000)](https://gitter.im/dypsilon/frontend-dev-bookmarks) 9 | [![Twitter](https://img.shields.io/badge/follow-twitter-55acee.svg?style=flat-square)](https://twitter.com/FrontendDir) 10 | 11 | ----------------------------------------- 12 | + **[Tocbot](http://tscanlin.github.io/tocbot/)**: Tocbot builds a table of contents (TOC) from headings in an HTML document. 13 | 14 | 15 | ------------------ 16 | 17 | # License 18 | 19 | Creative Commons License
This work is licensed under a Creative Commons Attribution 4.0 International License. 20 | 21 | Please provide a link back to this repository. This is not necessary for GitHub forks. -------------------------------------------------------------------------------- /bookmarks-frontend-dev/user-interface-components/ui-kits.md: -------------------------------------------------------------------------------- 1 | # UI Kits 2 | 3 | **Context: [frontend-dev-bookmarks](../README.md) / User Interface Components** 4 | 5 | Collections of ready to use components. 6 | 7 | [![frontend.directory](https://img.shields.io/badge/frontend-directory-blue.svg?style=flat-square)](http://frontend.directory/) 8 | [![Gitter](https://img.shields.io/gitter/room/dypsilon/frontend-dev-bookmarks.svg?style=flat-square&maxAge=2592000)](https://gitter.im/dypsilon/frontend-dev-bookmarks) 9 | [![Twitter](https://img.shields.io/badge/follow-twitter-55acee.svg?style=flat-square)](https://twitter.com/FrontendDir) 10 | 11 | ----------------------------------------- 12 | + **[CloudFlare Components](https://cloudflare.github.io/cf-ui/)**: A set of UI components built by CloudFlare and based on React. 13 | + **[Ink](http://ink.sapo.pt/)**: An HTML5/CSS3 framework used at SAPO for fast and efficient website design and prototyping. 14 | + **[PrimeNG](http://www.primefaces.org/primeng/)**: PrimeNG is a collection of rich UI components for AngularJS2. PrimeNG is a sibling of the popular JavaServer Faces Component Suite, PrimeFaces. 15 | + **[Primer](http://primercss.io/)**: Primer is GitHub’s internal CSS framework. It includes basic global styling for typography, small components like buttons and tabs, and our general guidelines for writing HTML and CSS. 16 | + **[Pure.css](http://purecss.io/)**: A set of small, responsive CSS modules that you can use in every web project. 17 | + **[UIkit](http://getuikit.com/)**: A lightweight and modular front-end framework and a set of components for developing fast and powerful web interfaces. 18 | + **[Vital](http://doximity.github.io/vital/)**: A minimally invasive CSS framework for modern web applications. 19 | 20 | 21 | ------------------ 22 | 23 | # License 24 | 25 | Creative Commons License
This work is licensed under a Creative Commons Attribution 4.0 International License. 26 | 27 | Please provide a link back to this repository. This is not necessary for GitHub forks. -------------------------------------------------------------------------------- /bookmarks-frontend-dev/user-interface-components/video-and-audio.md: -------------------------------------------------------------------------------- 1 | # Video & Audio 2 | 3 | **Context: [frontend-dev-bookmarks](../README.md) / User Interface Components** 4 | 5 | Components for playing audio and video files on a website. 6 | 7 | [![frontend.directory](https://img.shields.io/badge/frontend-directory-blue.svg?style=flat-square)](http://frontend.directory/) 8 | [![Gitter](https://img.shields.io/gitter/room/dypsilon/frontend-dev-bookmarks.svg?style=flat-square&maxAge=2592000)](https://gitter.im/dypsilon/frontend-dev-bookmarks) 9 | [![Twitter](https://img.shields.io/badge/follow-twitter-55acee.svg?style=flat-square)](https://twitter.com/FrontendDir) 10 | 11 | ----------------------------------------- 12 | + **[Audio.js](http://kolber.github.io/audiojs/)**: audio.js is a drop-in javascript library that allows HTML5’s audio tag to be used anywhere. 13 | + **[Howler.js](https://github.com/goldfire/howler.js)**: howler.js is an audio library for the modern web. It defaults to Web Audio API and falls back to HTML5 Audio. 14 | + **[JPlayer](http://jplayer.org/)**: jPlayer a media library written in JavaScript. A jQuery plugin, jPlayer allows you to rapidly weave cross platform audio and video into your web pages. 15 | + **[MediaElement.js](http://mediaelementjs.com/)**: HTML5 audio or video player with Flash and Silverlight shims that mimics the HTML5 MediaElement API, enabling a consistent UI in all browsers. 16 | + **[Stratus 2](https://stratus.soundcloud.com/)**: Stratus is a jQuery powered SoundCloud player that lives at the bottom (or top) of your website or blog. 17 | + **[Video.js](https://github.com/videojs/video.js)**: Video.js is a web video player built from the ground up for an HTML5 world. It supports HTML5 and Flash video, as well as YouTube and Vimeo (through plugins). It supports video playback on desktops and mobile devices. 18 | 19 | 20 | ------------------ 21 | 22 | # License 23 | 24 | Creative Commons License
This work is licensed under a Creative Commons Attribution 4.0 International License. 25 | 26 | Please provide a link back to this repository. This is not necessary for GitHub forks. -------------------------------------------------------------------------------- /bookmarks-frontend-dev/workflow/code-editors.md: -------------------------------------------------------------------------------- 1 | # Code Editors 2 | 3 | **Context: [frontend-dev-bookmarks](../README.md) / Workflow** 4 | 5 | Text editor programs designed specifically for editing source code of a website. 6 | 7 | [![frontend.directory](https://img.shields.io/badge/frontend-directory-blue.svg?style=flat-square)](http://frontend.directory/) 8 | [![Gitter](https://img.shields.io/gitter/room/dypsilon/frontend-dev-bookmarks.svg?style=flat-square&maxAge=2592000)](https://gitter.im/dypsilon/frontend-dev-bookmarks) 9 | [![Twitter](https://img.shields.io/badge/follow-twitter-55acee.svg?style=flat-square)](https://twitter.com/FrontendDir) 10 | 11 | ----------------------------------------- 12 | + **[Atom](https://atom.io/)**: Atom is a text editor that's modern, approachable, yet hackable to the core—a tool you can customize to do anything but also use productively without ever touching a config file. 13 | + **[Brackets](http://brackets.io/)**: An open source code editor for the web, written in JavaScript, HTML and CSS. 14 | + **[Notepad++](https://notepad-plus-plus.org/)**: Notepad++ is a free (as in "free speech" and also as in "free beer") source code editor and Notepad replacement that supports several languages. Running in the MS Windows environment, its use is governed by GPL License 15 | + **[Visual Studio Code](https://code.visualstudio.com/)**: Build and debug modern web and cloud applications. VS Code is free and available on your favorite platform - Linux, Mac OSX, and Windows. 16 | 17 | 18 | ------------------ 19 | 20 | # License 21 | 22 | Creative Commons License
This work is licensed under a Creative Commons Attribution 4.0 International License. 23 | 24 | Please provide a link back to this repository. This is not necessary for GitHub forks. -------------------------------------------------------------------------------- /bookmarks-frontend-dev/workflow/fonts-for-programmers.md: -------------------------------------------------------------------------------- 1 | # Fonts for Programmers 2 | 3 | **Context: [frontend-dev-bookmarks](../README.md) / Workflow** 4 | 5 | Programmers need special fonts, which help align the code and distinguish between characters, that look alike. 6 | 7 | [![frontend.directory](https://img.shields.io/badge/frontend-directory-blue.svg?style=flat-square)](http://frontend.directory/) 8 | [![Gitter](https://img.shields.io/gitter/room/dypsilon/frontend-dev-bookmarks.svg?style=flat-square&maxAge=2592000)](https://gitter.im/dypsilon/frontend-dev-bookmarks) 9 | [![Twitter](https://img.shields.io/badge/follow-twitter-55acee.svg?style=flat-square)](https://twitter.com/FrontendDir) 10 | 11 | ----------------------------------------- 12 | + **[Droid Sans Mono](https://www.google.com/fonts/specimen/Droid+Sans+Mono)**: Droid Sans Mono makes for a great programming font. Its only real flaw is the lack of a slashed zero. 13 | + **[Free Programming Fonts](http://cdn.sixrevisions.com/0441-01_programming-fonts/demo/programming-fonts.html)**: A demonstration of beautiful fonts for people who love to code. 14 | + **[Mononoki](https://github.com/madmalik/mononoki)**: Mononoki is a typeface by Matthias Tellen, created to enhance code formatting. 15 | + **[Profont](http://tobiasjung.name/profont/)**: Profont is a monospaced font created to be a most readable font for programming. It is designed to look good a really small sizes 16 | + **[Source Code Pro](https://github.com/adobe-fonts/source-code-pro)**: Source Code Pro is a set of OpenType fonts that have been designed to work well in user interface (UI) environments. 17 | + **[Space Mono](https://fonts.google.com/specimen/Space%20Mono)**: Space Mono is an original fixed-width type family designed by Colophon Foundry for Google Design. 18 | 19 | 20 | ------------------ 21 | 22 | # License 23 | 24 | Creative Commons License
This work is licensed under a Creative Commons Attribution 4.0 International License. 25 | 26 | Please provide a link back to this repository. This is not necessary for GitHub forks. -------------------------------------------------------------------------------- /bookmarks-frontend-dev/workflow/getting-started.md: -------------------------------------------------------------------------------- 1 | # Getting Started 2 | 3 | **Context: [frontend-dev-bookmarks](../README.md) / Workflow** 4 | 5 | Step by step guides for setting up a frontend development workflow. 6 | 7 | [![frontend.directory](https://img.shields.io/badge/frontend-directory-blue.svg?style=flat-square)](http://frontend.directory/) 8 | [![Gitter](https://img.shields.io/gitter/room/dypsilon/frontend-dev-bookmarks.svg?style=flat-square&maxAge=2592000)](https://gitter.im/dypsilon/frontend-dev-bookmarks) 9 | [![Twitter](https://img.shields.io/badge/follow-twitter-55acee.svg?style=flat-square)](https://twitter.com/FrontendDir) 10 | 11 | ----------------------------------------- 12 | + **[Front-end Process - Flat Builds and Automation (series)](http://www.gpmd.co.uk/blog/front-end-process-flat-builds-and-automation-part-1-introduction/)**: A flat build is basically the process of coding a static page (or pages) in HTML and CSS. The idea is to supply our developers with design assets such as style guides, pattern libraries or prototypes, including assets such as images, fonts, css, and javascript, as flat builds. 13 | + **[CSS Framework (Inuit)](http://www.gpmd.co.uk/blog/front-end-process-flat-builds-and-automation-part-4-css-framework/)**: In this part the author introduces the inuit CSS framework and describes how to integrate the framework into the development process. 14 | + **[Environment Setup & Yeoman](http://www.gpmd.co.uk/blog/front-end-process-flat-builds-and-automation-part-2-environment-setup-and-yeoman/)**: In this part the author outlines how to set up your dev environment, and how to scaffold a project using Yeoman. 15 | + **[Grunt Tasks](http://www.gpmd.co.uk/blog/front-end-process-flat-builds-and-automation-part-3-grunt-tasks/)**: The author outlined how to set up your dev environment, and how to scaffold a project using Yeoman. In this third part we will look at how to install and configure some grunt tasks. 16 | 17 | 18 | ------------------ 19 | 20 | # License 21 | 22 | Creative Commons License
This work is licensed under a Creative Commons Attribution 4.0 International License. 23 | 24 | Please provide a link back to this repository. This is not necessary for GitHub forks. -------------------------------------------------------------------------------- /bookmarks-frontend-dev/workflow/html-tools.md: -------------------------------------------------------------------------------- 1 | # HTML Tools 2 | 3 | **Context: [frontend-dev-bookmarks](../README.md) / Workflow** 4 | 5 | Tools for pre and post processing of the HTML source code. 6 | 7 | [![frontend.directory](https://img.shields.io/badge/frontend-directory-blue.svg?style=flat-square)](http://frontend.directory/) 8 | [![Gitter](https://img.shields.io/gitter/room/dypsilon/frontend-dev-bookmarks.svg?style=flat-square&maxAge=2592000)](https://gitter.im/dypsilon/frontend-dev-bookmarks) 9 | [![Twitter](https://img.shields.io/badge/follow-twitter-55acee.svg?style=flat-square)](https://twitter.com/FrontendDir) 10 | 11 | ----------------------------------------- 12 | + **[html-inspector](https://www.npmjs.org/package/html-inspector)**: HTML Inspector is a code quality tool to help you and your team write better markup. It's written in JavaScript and runs in the browser, so testing your HTML has never been easier. 13 | + **[html-minifier](https://www.npmjs.com/package/html-minifier)**: HTMLMinifier is a highly configurable, well-tested, Javascript-based HTML minifier, with lint-like capabilities. 14 | 15 | 16 | ------------------ 17 | 18 | # License 19 | 20 | Creative Commons License
This work is licensed under a Creative Commons Attribution 4.0 International License. 21 | 22 | Please provide a link back to this repository. This is not necessary for GitHub forks. -------------------------------------------------------------------------------- /bookmarks-frontend-dev/workflow/image-post-processing.md: -------------------------------------------------------------------------------- 1 | # Image Post Processing 2 | 3 | **Context: [frontend-dev-bookmarks](../README.md) / Workflow** 4 | 5 | Tools for image conversion and optimization. 6 | 7 | [![frontend.directory](https://img.shields.io/badge/frontend-directory-blue.svg?style=flat-square)](http://frontend.directory/) 8 | [![Gitter](https://img.shields.io/gitter/room/dypsilon/frontend-dev-bookmarks.svg?style=flat-square&maxAge=2592000)](https://gitter.im/dypsilon/frontend-dev-bookmarks) 9 | [![Twitter](https://img.shields.io/badge/follow-twitter-55acee.svg?style=flat-square)](https://twitter.com/FrontendDir) 10 | 11 | ----------------------------------------- 12 | + **[ImageOptim-CLI](https://github.com/JamieMason/ImageOptim-CLI)**: Make lossless optimisation of images part of your automated build process. 13 | + **[Jpegoptim](https://github.com/tjko/jpegoptim)**: Utility to optimize/compress JPEG files. 14 | + **[Optimize Images for Web – Ultimate Guide](https://www.keycdn.com/blog/optimize-images-for-web/)**: We will discuss the three areas in which you can better optimize images for web: better web performance, rank and index better in search engines, better social media engagement and CTR. 15 | + **[Pngcrush](http://pmt.sourceforge.net/pngcrush/)**: Pngcrush is an optimizer for PNG (Portable Network Graphics) files. 16 | + **[SMLR](https://github.com/jasonmoo/smlr)**: Re-encode jpeg images with no perceivable quality loss. Uses the butteraugli psychovisual comparison and k-ary search to determine the best jpeg quality setting. 17 | 18 | 19 | ------------------ 20 | 21 | # License 22 | 23 | Creative Commons License
This work is licensed under a Creative Commons Attribution 4.0 International License. 24 | 25 | Please provide a link back to this repository. This is not necessary for GitHub forks. -------------------------------------------------------------------------------- /bookmarks-frontend-dev/workflow/package-management.md: -------------------------------------------------------------------------------- 1 | # Package Management 2 | 3 | **Context: [frontend-dev-bookmarks](../README.md) / Workflow** 4 | 5 | A package manager or package management system is a collection of software tools that automates the process of installing, upgrading, configuring, and removing reusable libraries and components in a consistent manner. 6 | 7 | [![frontend.directory](https://img.shields.io/badge/frontend-directory-blue.svg?style=flat-square)](http://frontend.directory/) 8 | [![Gitter](https://img.shields.io/gitter/room/dypsilon/frontend-dev-bookmarks.svg?style=flat-square&maxAge=2592000)](https://gitter.im/dypsilon/frontend-dev-bookmarks) 9 | [![Twitter](https://img.shields.io/badge/follow-twitter-55acee.svg?style=flat-square)](https://twitter.com/FrontendDir) 10 | 11 | ----------------------------------------- 12 | + **[Bower](https://github.com/bower/bower)**: Bower offers a generic, unopinionated solution to the problem of front-end package management, while exposing the package dependency model via an API that can be consumed by a more opinionated build stack. 13 | + **[Lerna](https://github.com/lerna/lerna)**: Lerna is a tool that optimizes the workflow around managing multi-package repositories with git and npm. 14 | + **[NPM](https://www.npmjs.com/)**: NPM makes it easy for JavaScript developers to share and reuse code, and it makes it easy to update the code that you're sharing. 15 | 16 | 17 | ------------------ 18 | 19 | # License 20 | 21 | Creative Commons License
This work is licensed under a Creative Commons Attribution 4.0 International License. 22 | 23 | Please provide a link back to this repository. This is not necessary for GitHub forks. -------------------------------------------------------------------------------- /bookmarks-frontend-dev/workflow/sourcemaps.md: -------------------------------------------------------------------------------- 1 | # Sourcemaps 2 | 3 | **Context: [frontend-dev-bookmarks](../README.md) / Workflow** 4 | 5 | Sourcemap is a way to map a combined/minified file back to an unbuilt state. 6 | 7 | [![frontend.directory](https://img.shields.io/badge/frontend-directory-blue.svg?style=flat-square)](http://frontend.directory/) 8 | [![Gitter](https://img.shields.io/gitter/room/dypsilon/frontend-dev-bookmarks.svg?style=flat-square&maxAge=2592000)](https://gitter.im/dypsilon/frontend-dev-bookmarks) 9 | [![Twitter](https://img.shields.io/badge/follow-twitter-55acee.svg?style=flat-square)](https://twitter.com/FrontendDir) 10 | 11 | ----------------------------------------- 12 | + **[combine-source-map](https://www.npmjs.org/package/combine-source-map)**: Add source maps of multiple files, offset them and then combine them into one source map. 13 | + **[convert-source-map](https://www.npmjs.org/package/convert-source-map)**: Converts a source-map from/to different formats and allows adding/changing properties. 14 | + **[exorcist](https://github.com/thlorenz/exorcist)**: Externalizes the source map found inside a stream to an external .js.map file 15 | + **[generate-sourcemap](https://www.npmjs.org/package/generate-sourcemap)**: Generates a source map for files that were packed into a bundle. 16 | + **[inline-source-map](https://www.npmjs.org/package/inline-source-map)**: Adds source mappings and base64 encodes them, so they can be inlined in your generated file. 17 | + **[mold-source-map](https://www.npmjs.org/package/mold-source-map)**: Mold a source map that is almost perfect for you into one that is. 18 | + **[source-map-cjs](https://www.npmjs.org/package/source-map-cjs)**: Generates and consumes source maps. Adapted to be commonjs only and work in older browsers. 19 | 20 | 21 | ------------------ 22 | 23 | # License 24 | 25 | Creative Commons License
This work is licensed under a Creative Commons Attribution 4.0 International License. 26 | 27 | Please provide a link back to this repository. This is not necessary for GitHub forks. -------------------------------------------------------------------------------- /bookmarks-frontend-dev/workflow/tutorials.md: -------------------------------------------------------------------------------- 1 | # Tutorials 2 | 3 | **Context: [frontend-dev-bookmarks](../README.md) / Workflow** 4 | 5 | Step by step guides for setting up a frontend development workflow. 6 | 7 | [![frontend.directory](https://img.shields.io/badge/frontend-directory-blue.svg?style=flat-square)](http://frontend.directory/) 8 | [![PayPal](https://img.shields.io/badge/donate-PayPal-00457c.svg?style=flat-square&maxAge=2592000)](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=4FAGPMANWRVJJ) 9 | [![Beerpay](https://beerpay.io/dypsilon/frontend-dev-bookmarks/badge.svg?style=flat-square)](https://beerpay.io/dypsilon/frontend-dev-bookmarks) 10 | [![Flattr](https://img.shields.io/badge/donate-Flattr-88b058.svg?style=flat-square&maxAge=2592000)](https://flattr.com/submit/auto?fid=3nlo5p&url=https%3A%2F%2Fgithub.com%2Fdypsilon%2Ffrontend-dev-bookmarks) 11 | [![Gitter](https://img.shields.io/gitter/room/dypsilon/frontend-dev-bookmarks.svg?style=flat-square&maxAge=2592000)](https://gitter.im/dypsilon/frontend-dev-bookmarks) 12 | [![Twitter](https://img.shields.io/badge/follow-twitter-55acee.svg?style=flat-square)](https://twitter.com/FrontendDir) 13 | 14 | ----------------------------------------- 15 | 16 | + **[Front-end Process - Flat Builds and Automation (series)](http://www.gpmd.co.uk/blog/front-end-process-flat-builds-and-automation-part-1-introduction/)**: A flat build is basically the process of coding a static page (or pages) in HTML and CSS. The idea is to supply our developers with design assets such as style guides, pattern libraries or prototypes, including assets such as images, fonts, css, and javascript, as flat builds. 17 | + **[CSS Framework (Inuit)](http://www.gpmd.co.uk/blog/front-end-process-flat-builds-and-automation-part-4-css-framework/)**: In this part the author introduces the inuit CSS framework and describes how to integrate the framework into the development process. 18 | + **[Environment Setup & Yeoman](http://www.gpmd.co.uk/blog/front-end-process-flat-builds-and-automation-part-2-environment-setup-and-yeoman/)**: In this part the author outlines how to set up your dev environment, and how to scaffold a project using Yeoman. 19 | + **[Grunt Tasks](http://www.gpmd.co.uk/blog/front-end-process-flat-builds-and-automation-part-3-grunt-tasks/)**: The author outlined how to set up your dev environment, and how to scaffold a project using Yeoman. In this third part we will look at how to install and configure some grunt tasks. 20 | 21 | 22 | ------------------ 23 | 24 | # License 25 | 26 | Creative Commons License
This work is licensed under a Creative Commons Attribution 4.0 International License. 27 | 28 | Please provide a link back to this repository. This is not necessary for GitHub forks. -------------------------------------------------------------------------------- /bookmarks-frontend-dev/workflow/version-control.md: -------------------------------------------------------------------------------- 1 | # Version Control 2 | 3 | **Context: [frontend-dev-bookmarks](../README.md) / Workflow** 4 | 5 | Version control or source control is a system that records changes to a file or set of files over time so that you can recall specific versions later. 6 | 7 | [![frontend.directory](https://img.shields.io/badge/frontend-directory-blue.svg?style=flat-square)](http://frontend.directory/) 8 | [![Gitter](https://img.shields.io/gitter/room/dypsilon/frontend-dev-bookmarks.svg?style=flat-square&maxAge=2592000)](https://gitter.im/dypsilon/frontend-dev-bookmarks) 9 | [![Twitter](https://img.shields.io/badge/follow-twitter-55acee.svg?style=flat-square)](https://twitter.com/FrontendDir) 10 | 11 | ----------------------------------------- 12 | + **[Git](https://git-scm.com/)**: Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency. 13 | + **[Become a Git Guru](https://www.atlassian.com/git/tutorials)**: A series of Git tutorials by Atlassian. 14 | + **[OctoLinker](https://github.com/OctoLinker/browser-extension)**: The OctoLinker is a browser extensions which makes references to other files in GitHub clickable. 15 | 16 | 17 | ------------------ 18 | 19 | # License 20 | 21 | Creative Commons License
This work is licensed under a Creative Commons Attribution 4.0 International License. 22 | 23 | Please provide a link back to this repository. This is not necessary for GitHub forks. -------------------------------------------------------------------------------- /cheatsheet-docker/images/change.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/cheatsheet-docker/images/change.png -------------------------------------------------------------------------------- /cheatsheet-docker/images/click.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/cheatsheet-docker/images/click.png -------------------------------------------------------------------------------- /cheatsheet-docker/images/commit.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/cheatsheet-docker/images/commit.png -------------------------------------------------------------------------------- /cheatsheet-docker/images/edit.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/cheatsheet-docker/images/edit.png -------------------------------------------------------------------------------- /cheatsheet-es6/es6-cheatsheet-thumbnail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/cheatsheet-es6/es6-cheatsheet-thumbnail.png -------------------------------------------------------------------------------- /cheatsheet-es6/stylesheet.css: -------------------------------------------------------------------------------- 1 | @page { size: A4 landscape; margin: 1cm } 2 | 3 | 4 | body { 5 | margin: 15px; 6 | font-family: 'Adobe Garamond Pro'; 7 | } 8 | 9 | 10 | h1, h2, h3, h4 { 11 | font-family: 'Myriad Pro'; 12 | } 13 | 14 | h1 { 15 | font-weight: normal; 16 | color: #aaa; 17 | padding: 0 10px; 18 | margin: 0; 19 | font-size: 18pt; 20 | } 21 | 22 | h2 { 23 | color: #434e6a; 24 | margin-top: 0; 25 | font-size: 16px; 26 | margin-bottom: 0; 27 | } 28 | 29 | h3 { 30 | color: #434e6a; 31 | margin-top: 0pt; 32 | margin-bottom: 0; 33 | font-size: 14px; 34 | } 35 | 36 | p, pre, code { 37 | font-size: 12px; 38 | } 39 | 40 | code { 41 | background-color: #f0f0f0; 42 | } 43 | 44 | section { 45 | padding: 10px; 46 | border: 1px solid #888; 47 | border-radius: 5pt; 48 | margin: 3mm 0; 49 | } 50 | 51 | section > ol, section > ul { 52 | margin-top: 0; 53 | padding-left: 20px; 54 | margin-bottom: 0; 55 | } 56 | 57 | li { 58 | margin-bottom: 2pt; 59 | font-size: 13px; 60 | } 61 | 62 | 63 | #left, #right { 64 | width: 122mm; 65 | } 66 | 67 | #left { 68 | float: left; 69 | } 70 | #right { 71 | float: right; 72 | } 73 | -------------------------------------------------------------------------------- /cheatsheet-gitpitch/5: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /cheatsheet-jsx/stylesheet.css: -------------------------------------------------------------------------------- 1 | @page { size: A4 landscape; margin: 1cm } 2 | 3 | 4 | body { 5 | margin: 15px; 6 | font-family: 'Adobe Caslon Pro'; 7 | } 8 | 9 | code { 10 | font-family: 'DejaVu Sans Mono'; 11 | } 12 | pre.language-jsx, 13 | pre.language-javascript { 14 | padding: 0.2em !important; 15 | margin: 0; 16 | font-size: 10pt; 17 | } 18 | pre, code { 19 | font-size: 10px; 20 | } 21 | 22 | pre { 23 | position: relative; 24 | background-color: #f0f0f0; 25 | border-radius: 2px; 26 | } 27 | pre.input { 28 | background-color: rgba(153, 0, 85, 0.05); 29 | } 30 | pre.output { 31 | background-color: rgba(102, 153, 0, 0.1); 32 | } 33 | pre::after { 34 | position: absolute; 35 | right: 5px; 36 | top: 2px; 37 | font-size: 11px; 38 | font-weight: bold; 39 | color: #d0d0d0; 40 | } 41 | pre.input::after { 42 | content: "JSX"; 43 | } 44 | pre.output::after { 45 | content: "JS"; 46 | } 47 | 48 | p { 49 | font-size: 15px; 50 | margin: 0 0 0.2em 0; 51 | } 52 | 53 | section > section { 54 | margin: 1em 0; 55 | } 56 | h2 + section { 57 | margin-top: 0.6em; 58 | } 59 | 60 | .adjacent.examples { 61 | display: flex; 62 | flex-direction: row; 63 | justify-content: space-between; 64 | } 65 | .adjacent.examples pre { 66 | width: 48%; 67 | } 68 | 69 | .stacked.examples pre { 70 | margin-bottom: 5px; 71 | } 72 | 73 | h1 { 74 | font-family: 'Share'; 75 | font-size: 36px; 76 | margin-top: 12px; 77 | margin-bottom: 30px; 78 | } 79 | h2 { 80 | color: #434e6a; 81 | margin: 8pt 0 0; 82 | font-size: 14pt; 83 | font-weight: normal; 84 | font-family: 'Share'; 85 | } 86 | h2 code { 87 | font-size: 12pt; 88 | font-weight: bold; 89 | } 90 | 91 | 92 | #left, #right { 93 | height: 172mm; 94 | /* border: 1px dashed #e0e0e0; */ 95 | } 96 | 97 | #left { 98 | float: left; 99 | width: 114mm; 100 | } 101 | #right { 102 | float: right; 103 | width: 130mm; 104 | } 105 | 106 | footer { 107 | font-family: 'DejaVu Sans Mono'; 108 | margin-top: 2em; 109 | font-size: 12px; 110 | text-align: right; 111 | margin-top: 24px; 112 | } 113 | footer, footer a { 114 | color: #aaa; 115 | } 116 | -------------------------------------------------------------------------------- /cheatsheet-linter/readme.md: -------------------------------------------------------------------------------- 1 | # Linter Cheatsheet 2 | 3 | It happens to be a major PITA to find these little snippets, so I gather all useful findings here. As a rule of thumb, you should use these as last resort to solve a linting issue. 4 | 5 | _* Some `JSlint` suppressors work with `JSHint`, YMMV. For `JShint/JSLint` compatibility, `space` after a comment token (`/_`) must be omitted. 6 | 7 | ## ESLint 8 | 9 | 10 | 11 | - Suppress all 12 | 13 | ``` 14 | /* eslint-disable */ 15 | ``` 16 | 17 | - Suppress all for a single line 18 | 19 | ``` 20 | // eslint-disable-line 21 | ``` 22 | 23 | - Suppress a rule for a single line 24 | 25 | ``` 26 | // eslint-disable-line 27 | ``` 28 | 29 | - Suppress a rule for all 30 | 31 | ``` 32 | /* eslint-disable */ E.g.: /* eslint-disable space-before-function-paren */ 33 | ``` 34 | 35 | ## JShint 36 | 37 | 38 | 39 | - Suppress environment warnings 40 | 41 | ``` 42 | // jslint browser: true 43 | // jslint jquery: true 44 | // jshint esversion: 6 45 | ``` 46 | 47 | - Suppress undefined global variables. ** 48 | 49 | ``` 50 | /*global , , ... */ 51 | ``` 52 | 53 | - Suppress exported/unused global variables. ** 54 | 55 | ``` 56 | /*exported , , ... */ 57 | ``` 58 | 59 | - Suppress a single warning. E.g.: `// jshint -W001` 60 | 61 | ``` 62 | // jshint -<*> 63 | // jshint +<*> 64 | ``` 65 | 66 | - Suppress all warnings 67 | 68 | ``` 69 | // jshint ignore:start 70 | // jshint ignore:end 71 | ``` 72 | 73 | - Suppress all warnings for a single line 74 | 75 | ``` 76 | // jshint ignore:line 77 | ``` 78 | 79 | ## HTML-Lint 80 | 81 | [Rules](https://github.com/yaniswang/HTMLHint/wiki/Rules) 82 | 83 | ``` 84 | 85 | ``` 86 | 87 | ## SCSS-Lint 88 | 89 | - Suppress a single warning. Example: `// scss-lint:enable Compass::PropertyWithMixin` 90 | 91 | ``` 92 | // scss-lint:enable <*> 93 | // scss-lint:disable <*> 94 | ``` 95 | 96 | ## Pug-lint (was Jade) 97 | 98 | 99 | 100 | ## Beautify 101 | 102 | - Suppress through a section (must be a block-comment) 103 | 104 | ``` 105 | /* beautify ignore:start */ 106 | /* beautify ignore:end */ 107 | ``` 108 | -------------------------------------------------------------------------------- /cheatsheet-promises/promises-cheatsheet-thumbnail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/cheatsheet-promises/promises-cheatsheet-thumbnail.png -------------------------------------------------------------------------------- /cheatsheet-promises/stylesheet.css: -------------------------------------------------------------------------------- 1 | @page { size: A4 landscape; margin: 1cm } 2 | 3 | 4 | body { 5 | margin: 15px; 6 | font-family: 'Adobe Garamond Pro'; 7 | } 8 | 9 | 10 | h1, h2, h3, h4 { 11 | font-family: 'Myriad Pro'; 12 | } 13 | 14 | h1 { 15 | font-weight: normal; 16 | color: #aaa; 17 | padding: 0 10px; 18 | margin: 0; 19 | font-size: 18pt; 20 | } 21 | 22 | h2 { 23 | color: #434e6a; 24 | margin-top: 0; 25 | font-size: 16px; 26 | margin-bottom: 0; 27 | } 28 | 29 | h3 { 30 | margin-top: 5pt; 31 | margin-bottom: 0; 32 | font-size: 14px; 33 | } 34 | 35 | li, p, pre, code { 36 | font-size: 12px; 37 | } 38 | 39 | section { 40 | padding: 10px; 41 | border: 1px solid #888; 42 | border-radius: 5pt; 43 | margin: 3mm 0; 44 | } 45 | 46 | section > ol, section > ul { 47 | margin-top: 0; 48 | padding-left: 20px; 49 | margin-bottom: 0; 50 | } 51 | 52 | li > ul { 53 | margin-top: 2pt; 54 | padding-left: 20px; 55 | } 56 | 57 | 58 | #left, #right { 59 | width: 122mm; 60 | } 61 | 62 | #left { 63 | float: left; 64 | } 65 | #right { 66 | float: right; 67 | } 68 | -------------------------------------------------------------------------------- /cheatsheet-python/Matplotlib.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/cheatsheet-python/Matplotlib.pdf -------------------------------------------------------------------------------- /cheatsheet-python/NumPy.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/cheatsheet-python/NumPy.pdf -------------------------------------------------------------------------------- /cheatsheet-python/NumPy/numpy-examples.py: -------------------------------------------------------------------------------- 1 | """ NumPy is module for Python. 2 | The name is an acronym for "Numeric Python" or "Numerical Python". 3 | It is pronounced /ˈnʌmpaɪ/ (NUM-py) or less often /ˈnʌmpi (NUM-pee)). 4 | It is an extension module for Python, mostly written in C. 5 | This makes sure that the precompiled mathematical and numerical functions and functionalities of Numpy guarantee great execution speed. 6 | """ 7 | 8 | 9 | # THIS IS AN UNSTRUCTURED TEST FILE 10 | import numpy as np 11 | 12 | # Index trick when working with two np-arrays 13 | a = np.array([1, 2, 3, 6, 1, 4, 1]) 14 | b = np.array([5, 6, 7, 8, 3, 1, 2]) 15 | 16 | # Only saves a at index where b == 1 17 | other_a = a[b == 1] 18 | # Saves every spot in a except at index where b != 1 19 | other_other_a = a[b != 1] 20 | 21 | # BOOLEAN INDEXING 22 | x = np.array([4, 6, 8, 1, 2, 6, 9]) 23 | y = x > 5 24 | print(x[y]) 25 | # >>> [6 8 6 9] 26 | 27 | # Even shorter 28 | x = np.array([1, 2, 3, 4, 4, 35, 212, 5, 5, 6]) 29 | print(x[x < 5]) 30 | # >>> [1 2 3 4 4] 31 | 32 | # how you actually copy array without messing with the previous one 33 | new_arr = b.copy() 34 | 35 | #multidimensional array in numpy called matrix .(3x3) matrix 36 | mymatrix = [[1,2,3] , [4,5,6] , [7,8,9]] 37 | 38 | # generates 3 zeros in an array 39 | myzeros = np.zeros(3) 40 | 41 | # generates 4 ones in an array 42 | myones = np.ones(4) 43 | 44 | #creates an identity matrix uing numpy (4x4) 45 | 46 | identitymatrix = np.eye(4) 47 | -------------------------------------------------------------------------------- /cheatsheet-python/img/advanced.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/cheatsheet-python/img/advanced.png -------------------------------------------------------------------------------- /cheatsheet-python/img/axes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/cheatsheet-python/img/axes.png -------------------------------------------------------------------------------- /cheatsheet-python/img/fill.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/cheatsheet-python/img/fill.png -------------------------------------------------------------------------------- /cheatsheet-python/img/lines.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/cheatsheet-python/img/lines.png -------------------------------------------------------------------------------- /cheatsheet-python/img/medium.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/cheatsheet-python/img/medium.png -------------------------------------------------------------------------------- /cheatsheet-python/img/plot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/cheatsheet-python/img/plot.png -------------------------------------------------------------------------------- /cheatsheet-python/img/ticks.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/cheatsheet-python/img/ticks.png -------------------------------------------------------------------------------- /cheatsheet-python/readme.md: -------------------------------------------------------------------------------- 1 | # Python Cheat Sheet 2 | 3 | This rep is a growing list of Python cheat sheets. 4 | 5 | ***Found any typos or have a suggestion? Fork, contribute and tune it to your taste!*** 6 | 7 | ### Currently includes: 8 | * [NumPy](https://github.com/juliangaal/python-cheat-sheet/blob/master/NumPy/) 9 | * [Matplotlib](https://github.com/juliangaal/python-cheat-sheet/blob/master/Matplotlib/) 10 | 11 | ### Installation 12 | If you want to install a package individually, go into the corresponding `.md` file for instructions on how to install. 13 | 14 | From the project root directory: 15 | 16 | via Pip: 17 | ``` 18 | $ pip install -r requirements.txt 19 | ``` 20 | 21 | via Anaconda: 22 | ``` 23 | $ conda install --yes --file requirements.txt 24 | ``` 25 | This will install all the packages to your environment. 26 | 27 | ### Future additions: 28 | * Basic Python syntax 29 | * (Probably) Pandas 30 | * PyBind 31 | -------------------------------------------------------------------------------- /cheatsheet-python/requirements.txt: -------------------------------------------------------------------------------- 1 | matplotlib==2.0.0 2 | numpy==1.12.1 3 | -------------------------------------------------------------------------------- /cheatsheet-react-babel/react-with-babel-cheatsheet-thumbnail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/cheatsheet-react-babel/react-with-babel-cheatsheet-thumbnail.png -------------------------------------------------------------------------------- /cheatsheet-react-babel/stylesheet.css: -------------------------------------------------------------------------------- 1 | @page { size: A4 landscape; margin: 1cm } 2 | 3 | 4 | body { 5 | margin: 15px; 6 | font-family: 'Adobe Caslon Pro'; 7 | } 8 | 9 | code { 10 | font-family: 'DejaVu Sans Mono'; 11 | background-color: #f0f0f0; 12 | } 13 | pre { 14 | background-color: #f0f0f0; 15 | margin-top: 0 !important; 16 | } 17 | 18 | h1, h2, h3, h4 { 19 | font-family: 'Bebas Neue'; 20 | } 21 | 22 | h1 { 23 | font-weight: normal; 24 | color: #aaa; 25 | padding: 0 10px; 26 | margin: 0; 27 | font-size: 18pt; 28 | } 29 | 30 | h2 { 31 | color: #434e6a; 32 | font-size: 16pt; 33 | margin: 8pt 0 0; 34 | } 35 | 36 | h3 { 37 | margin-top: 5pt; 38 | margin-bottom: 0; 39 | font-size: 14px; 40 | } 41 | 42 | h4 { 43 | font-family: 'Adobe Caslon Pro'; 44 | font-weight: bold; 45 | font-size: 14px; 46 | margin: 8pt 0 4pt; 47 | } 48 | 49 | pre, code { 50 | font-size: 12px; 51 | } 52 | li, p { 53 | font-size: 13px; 54 | } 55 | p, pre { 56 | margin: 0.2em 0; 57 | } 58 | 59 | section > ol, section > ul { 60 | margin-top: 0; 61 | padding-left: 20px; 62 | margin-bottom: 0; 63 | } 64 | 65 | li > ul { 66 | margin-top: 2pt; 67 | padding-left: 20px; 68 | } 69 | 70 | .method-list li { 71 | margin-left: 10pt; 72 | } 73 | .method-list li h3 code { 74 | background-color: transparent; 75 | } 76 | 77 | .prop-list { 78 | margin: 0; 79 | padding: 0; 80 | list-style: none; 81 | } 82 | .prop-list li code:first-child { 83 | display: inline-block; 84 | font-weight: bold; 85 | width: 55pt; 86 | text-align: right; 87 | } 88 | 89 | .lifecycle-list { 90 | margin: 0; 91 | padding: 0; 92 | list-style: none; 93 | } 94 | .lifecycle-list li code:first-child { 95 | display: inline-block; 96 | font-weight: bold; 97 | width: 140pt; 98 | text-align: left; 99 | } 100 | 101 | .keyword-list { 102 | margin: 0; 103 | padding: 0; 104 | list-style: none; 105 | } 106 | .keyword-list li { 107 | display: inline-block; 108 | margin: 2pt; 109 | } 110 | .keyword-list li code { 111 | display: inline-block; 112 | width: 55pt; 113 | } 114 | .keyword-list li.long { 115 | display: block; 116 | margin: 5pt 2pt; 117 | } 118 | .keyword-list li.long code { 119 | width: auto; 120 | } 121 | 122 | #left, #right { 123 | width: 122mm; 124 | height: 172mm; 125 | /* border: 1px dashed #e0e0e0; */ 126 | } 127 | 128 | #left { 129 | float: left; 130 | } 131 | #right { 132 | float: right; 133 | } 134 | 135 | footer { 136 | margin-top: 2em; 137 | font-size: 12px; 138 | text-align: left; 139 | } 140 | footer, footer a { 141 | color: #aaa; 142 | } 143 | -------------------------------------------------------------------------------- /cheatsheet-react-typescript/advanced/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: intro 3 | sidebar_label: Intro 4 | title: Advanced Cheatsheet 5 | --- 6 | 7 | **This Advanced Cheatsheet** helps show and explain advanced usage of generic types for people writing reusable type utilities/functions/render prop/higher order components and TS+React **libraries**. 8 | 9 | - It also has miscellaneous tips and tricks for pro users. 10 | - Advice for contributing to DefinitelyTyped 11 | - The goal is to take _full advantage_ of TypeScript. 12 | 13 | **Creating React + TypeScript Libraries** 14 | 15 | The best tool for creating React + TS libraries right now is [`tsdx`](https://github.com/palmerhq/tsdx). Run `npx tsdx create` and select the "react" option. You can view [the React User Guide](https://github.com/palmerhq/tsdx/issues/5) for a few tips on React+TS library best practices and optimizations for production. 16 | 17 | Another option is [Rollpkg](https://github.com/rafgraph/rollpkg), which uses Rollup and the TypeScript compiler (not Babel) to create packages. It includes default configs for TypeScript, Prettier, ESLint, and Jest (setup for use with React), as well as Bundlephobia package stats for each build. 18 | 19 | - Be sure to also check [`basarat`'s guide](https://basarat.gitbooks.io/typescript/content/docs/quick/library.html) for library tsconfig settings. 20 | - Alec Larson: [The best Rollup config for TypeScript libraries](https://gist.github.com/aleclarson/9900ed2a9a3119d865286b218e14d226) 21 | - From the Angular world, check out https://github.com/bitjson/typescript-starter 22 | -------------------------------------------------------------------------------- /cheatsheet-react-typescript/advanced/utility-types.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: utility_types 3 | title: "Utility Types" 4 | sidebar_label: Utility Types 5 | --- 6 | 7 | We will assume knowledge of utility types covered in the sister project [`typescript-cheatsheets/utilities`](https://github.com/typescript-cheatsheets/utilities). Look up libraries included there as well for your typing needs. 8 | 9 | If you intend to maintain a large TS codebase/a nontrivial React+TS library, **we strongly recommend exploring these utilities** so that you don't reinvent the wheel and/or lose sanity trying to do so. Studying their code can also teach you a lot of advanced TS that is not covered here. 10 | 11 | I also recommend have a good working knowledge of how to construct the inbuilt utility types from scratch. See [Dr. Rasuchmeyer's guide](https://2ality.com/2020/06/computing-with-types.html) for a concise introduction. 12 | 13 | A level of comfort with **generic types** is therefore required. Here are some helpful resources: 14 | 15 | - https://ts.chibicode.com/generics/ 16 | -------------------------------------------------------------------------------- /cheatsheet-react-typescript/basic/editor-integration.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: editor_integration 3 | title: Editor Tooling and Integration 4 | --- 5 | 6 | - VSCode 7 | - swyx's VSCode Extension: https://github.com/sw-yx/swyx-react-typescript-snippets 8 | - amVim: https://marketplace.visualstudio.com/items?itemName=auiworks.amvim 9 | - VIM 10 | - https://github.com/Quramy/tsuquyomi 11 | - nvim-typescript? 12 | - https://github.com/leafgarland/typescript-vim 13 | - peitalin/vim-jsx-typescript 14 | - NeoVim: https://github.com/neoclide/coc.nvim 15 | - other discussion: https://mobile.twitter.com/ryanflorence/status/1085715595994095620 16 | 17 | You are free to use this repo's TSX logo if you wish: 18 | 19 | [![https://user-images.githubusercontent.com/6764957/53868378-2b51fc80-3fb3-11e9-9cee-0277efe8a927.png](https://user-images.githubusercontent.com/6764957/53868378-2b51fc80-3fb3-11e9-9cee-0277efe8a927.png)](https://user-images.githubusercontent.com/6764957/53868378-2b51fc80-3fb3-11e9-9cee-0277efe8a927.png) 20 | 21 | You may also wish to use alternative logos - [jsx-tsx-logos](https://github.com/Protectator/jsx-tsx-logos) 22 | 23 | ![https://github.com/Protectator/jsx-tsx-logos/raw/master/example.png](https://github.com/Protectator/jsx-tsx-logos/raw/master/example.png) 24 | -------------------------------------------------------------------------------- /cheatsheet-react-typescript/basic/examples.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: examples 3 | title: Example App 4 | sidebar_label: Examples 5 | --- 6 | 7 | - [Create React App TypeScript Todo Example 2021](https://github.com/laststance/create-react-app-typescript-todo-example-2021) 8 | - [Ben Awad's 14 hour Fullstack React/GraphQL/TypeScript Tutorial](https://www.youtube.com/watch?v=I6ypD7qv3Z8) 9 | - [Cypress Realworld App](https://github.com/cypress-io/cypress-realworld-app) 10 | -------------------------------------------------------------------------------- /cheatsheet-react-typescript/basic/getting-started/codebases.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: codebases 3 | title: Recommended React + TypeScript codebases to learn from 4 | sidebar_label: Codebases 5 | --- 6 | 7 | - Apps 8 | - https://github.com/devhubapp/devhub 9 | - https://github.com/benawad/codeponder (with [coding livestream!](https://www.youtube.com/watch?v=D8IJOwdNSkc&list=PLN3n1USn4xlnI6kwzI8WrNgSdG4Z6daCq)) 10 | - https://github.com/cypress-io/cypress-realworld-app 11 | - Design Systems/Component Libraries 12 | - https://github.com/seek-oss/braid-design-system/ (see [how to use TS to validate props](https://twitter.com/markdalgleish/status/1339863859469955072?s=20)) 13 | - https://github.com/palantir/blueprint 14 | - https://github.com/Shopify/polaris 15 | - https://github.com/microsoft/fluentui 16 | - Libraries 17 | - https://github.com/formium/formik/ 18 | - https://github.com/jaredpalmer/react-fns 19 | - Misc 20 | - https://github.com/NullVoxPopuli/react-vs-ember/tree/master/testing/react 21 | - https://github.com/artsy/reaction 22 | - https://github.com/artsy/emission (React Native) 23 | - [@reach/ui's community typings](https://github.com/reach/reach-ui/pull/105) 24 | - https://github.com/pshrmn/curi/tree/master/packages/router 25 | 26 | Older but still worth checking: 27 | 28 | - https://bitbucket.org/atlassian/atlaskit-mk-2/src/master/ 29 | - https://github.com/contiamo/operational-ui 30 | 31 | React Boilerplates: 32 | 33 | - https://github.com/rwieruch/nextjs-firebase-authentication: Next.js + Firebase Starter: styled, tested, typed, and authenticated 34 | - [@jpavon/react-scripts-ts](https://github.com/jpavon/react-scripts-ts) alternative react-scripts with all TypeScript features using [ts-loader](https://github.com/TypeStrong/ts-loader) 35 | - [webpack config tool](https://webpack.jakoblind.no/) is a visual tool for creating webpack projects with React and TypeScript 36 | - ready to go template with [Material-UI](https://material-ui.com/), routing and Redux 37 | 38 | React Native Boilerplates: _contributed by [@spoeck](https://github.com/typescript-cheatsheets/react-typescript-cheatsheet/pull/20)_ 39 | 40 | - https://github.com/GeekyAnts/react-native-seed 41 | - https://github.com/lopezjurip/ReactNativeTS 42 | - https://github.com/emin93/react-native-template-typescript 43 | - 44 | 45 | TS Library Codebases to study 46 | 47 | - https://github.com/Azure/azure-sdk-for-js 48 | - https://github.com/sindresorhus/is 49 | - https://github.com/probot/probot 50 | - https://github.com/intuit/auto 51 | - https://github.com/polymer/tools 52 | - https://github.com/nteract/nteract 53 | - https://github.com/pgilad/leasot 54 | - https://github.com/JasonEtco/actions-toolkit 55 | - https://github.com/ferdaber/typescript-bootstrap/ 56 | - https://github.com/contiamo/operational-scripts 57 | - https://github.com/nobrainr/morphism 58 | - https://github.com/slackapi/node-slack-sdk 59 | -------------------------------------------------------------------------------- /cheatsheet-react-typescript/basic/getting-started/talks.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: talks 3 | title: Recommended React + TypeScript talks 4 | sidebar_label: Talks 5 | --- 6 | 7 | - [Ultimate React Component Patterns with TypeScript](https://www.youtube.com/watch?v=_PBQ3if6Fmg), by Martin Hochel, GeeCon Prague 2018 8 | - Please help contribute this new section! 9 | -------------------------------------------------------------------------------- /cheatsheet-react-typescript/basic/recommended/codebases.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: codebases 3 | title: Recommended React + TypeScript codebases to learn from 4 | sidebar_label: Codebases 5 | --- 6 | 7 | - Apps 8 | - https://github.com/devhubapp/devhub 9 | - https://github.com/benawad/codeponder (with [coding livestream!](https://www.youtube.com/watch?v=D8IJOwdNSkc&list=PLN3n1USn4xlnI6kwzI8WrNgSdG4Z6daCq)) 10 | - https://github.com/cypress-io/cypress-realworld-app 11 | - Design Systems/Component Libraries 12 | - https://github.com/seek-oss/braid-design-system/ (see [how to use TS to validate props](https://twitter.com/markdalgleish/status/1339863859469955072?s=20)) 13 | - https://github.com/palantir/blueprint 14 | - https://github.com/Shopify/polaris 15 | - https://github.com/microsoft/fluentui 16 | - Libraries 17 | - https://github.com/formium/formik/ 18 | - https://github.com/jaredpalmer/react-fns 19 | - Misc 20 | - https://github.com/NullVoxPopuli/react-vs-ember/tree/master/testing/react 21 | - https://github.com/artsy/reaction 22 | - https://github.com/artsy/emission (React Native) 23 | - [@reach/ui's community typings](https://github.com/reach/reach-ui/pull/105) 24 | - https://github.com/pshrmn/curi/tree/master/packages/router 25 | 26 | Older but still worth checking: 27 | 28 | - https://bitbucket.org/atlassian/atlaskit-mk-2/src/master/ 29 | - https://github.com/contiamo/operational-ui 30 | 31 | React Boilerplates: 32 | 33 | - https://github.com/rwieruch/nextjs-firebase-authentication: Next.js + Firebase Starter: styled, tested, typed, and authenticated 34 | - [@jpavon/react-scripts-ts](https://github.com/jpavon/react-scripts-ts) alternative react-scripts with all TypeScript features using [ts-loader](https://github.com/TypeStrong/ts-loader) 35 | - [webpack config tool](https://webpack.jakoblind.no/) is a visual tool for creating webpack projects with React and TypeScript 36 | - ready to go template with [Material-UI](https://material-ui.com/), routing and Redux 37 | 38 | React Native Boilerplates: _contributed by [@spoeck](https://github.com/typescript-cheatsheets/react-typescript-cheatsheet/pull/20)_ 39 | 40 | - https://github.com/GeekyAnts/react-native-seed 41 | - https://github.com/lopezjurip/ReactNativeTS 42 | - https://github.com/emin93/react-native-template-typescript 43 | - 44 | 45 | TS Library Codebases to study 46 | 47 | - https://github.com/Azure/azure-sdk-for-js 48 | - https://github.com/sindresorhus/is 49 | - https://github.com/probot/probot 50 | - https://github.com/intuit/auto 51 | - https://github.com/polymer/tools 52 | - https://github.com/nteract/nteract 53 | - https://github.com/pgilad/leasot 54 | - https://github.com/JasonEtco/actions-toolkit 55 | - https://github.com/ferdaber/typescript-bootstrap/ 56 | - https://github.com/contiamo/operational-scripts 57 | - https://github.com/nobrainr/morphism 58 | - https://github.com/slackapi/node-slack-sdk 59 | -------------------------------------------------------------------------------- /cheatsheet-react-typescript/basic/recommended/talks.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: talks 3 | title: Recommended React + TypeScript talks 4 | sidebar_label: Talks 5 | --- 6 | 7 | - [Ultimate React Component Patterns with TypeScript](https://www.youtube.com/watch?v=_PBQ3if6Fmg), by Martin Hochel, GeeCon Prague 2018 8 | - Please help contribute this new section! 9 | -------------------------------------------------------------------------------- /cheatsheet-react-typescript/basic/troubleshooting/learn-ts.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: learn_ts 3 | title: "Time to Really Learn TypeScript" 4 | sidebar_label: Time to Really Learn TypeScript 5 | --- 6 | 7 | Believe it or not, we have only barely introduced TypeScript here in this cheatsheet. If you are still facing TypeScript troubleshooting issues, it is likely that your understanding of TS is still too superficial. 8 | 9 | There is a whole world of generic type logic that you will eventually get into, however it becomes far less dealing with React than just getting good at TypeScript so it is out of scope here. But at least you can get productive in React now :) 10 | 11 | It is worth mentioning some resources to help you get started: 12 | 13 | - Step through the 40+ examples under [the playground's](http://www.typescriptlang.org/play/index.html) Examples section, written by @Orta 14 | - Anders Hejlsberg's overview of TS: https://www.youtube.com/watch?v=ET4kT88JRXs 15 | - Marius Schultz: https://blog.mariusschulz.com/series/typescript-evolution with an [Egghead.io course](https://egghead.io/courses/advanced-static-types-in-typescript) 16 | - Basarat's Deep Dive: https://basarat.gitbook.io/typescript/ 17 | - Axel Rauschmeyer's [Tackling TypeScript](https://exploringjs.com/tackling-ts/) 18 | - Rares Matei: [Egghead.io course](https://egghead.io/courses/practical-advanced-typescript)'s advanced TypeScript course on Egghead.io is great for newer typescript features and practical type logic applications (e.g. recursively making all properties of a type `readonly`) 19 | - Learn about [Generics, Conditional types and Mapped types](https://www.youtube.com/watch?v=PJjeHzvi_VQ&feature=youtu.be) 20 | - Shu Uesugi: [TypeScript for Beginner Programmers](https://ts.chibicode.com/) 21 | - Here is another [TypeScript Error Guide](https://github.com/threehams/typescript-error-guide/) that you can check for your errors. 22 | -------------------------------------------------------------------------------- /cheatsheet-react-typescript/basic/troubleshooting/non-ts-files.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: non_ts_files 3 | title: "Troubleshooting Handbook: Globals, Images and other non-TS files" 4 | sidebar_label: Globals, Images and other non-TS files 5 | --- 6 | 7 | Use [declaration merging](https://www.typescriptlang.org/docs/handbook/declaration-merging.html). 8 | 9 | If, say, you are using a third party JS script that attaches on to the `window` global, you can extend `Window`: 10 | 11 | ```ts 12 | declare global { 13 | interface Window { 14 | MyVendorThing: MyVendorType; 15 | } 16 | } 17 | ``` 18 | 19 | Likewise if you wish to "import" an image or other non TS/TSX file: 20 | 21 | ```ts 22 | // declaration.d.ts 23 | // anywhere in your project, NOT the same name as any of your .ts/tsx files 24 | declare module "*.png"; 25 | 26 | // importing in a tsx file 27 | import * as logo from "./logo.png"; 28 | ``` 29 | 30 | Note that `tsc` cannot bundle these files for you, you will have to use Webpack or Parcel. 31 | 32 | Related issue: https://github.com/Microsoft/TypeScript-React-Starter/issues/12 and [StackOverflow](https://stackoverflow.com/a/49715468/4216035) 33 | -------------------------------------------------------------------------------- /cheatsheet-react-typescript/basic/troubleshooting/official-typings-bugs.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: official_typings_bugs 3 | title: Fixing bugs in official typings 4 | sidebar_label: Fixing bugs in official typings 5 | --- 6 | 7 | If you run into bugs with your library's official typings, you can copy them locally and tell TypeScript to use your local version using the "paths" field. In your `tsconfig.json`: 8 | 9 | ```json 10 | { 11 | "compilerOptions": { 12 | "paths": { 13 | "mobx-react": ["../typings/modules/mobx-react"] 14 | } 15 | } 16 | } 17 | ``` 18 | 19 | [Thanks to @adamrackis for the tip.](https://twitter.com/AdamRackis/status/1024827730452520963) 20 | 21 | If you just need to add an interface, or add missing members to an existing interface, you don't need to copy the whole typing package. Instead, you can use [declaration merging](https://www.typescriptlang.org/docs/handbook/declaration-merging.html): 22 | 23 | ```tsx 24 | // my-typings.ts 25 | declare module "plotly.js" { 26 | interface PlotlyHTMLElement { 27 | removeAllListeners(): void; 28 | } 29 | } 30 | 31 | // MyComponent.tsx 32 | import { PlotlyHTMLElement } from "plotly.js"; 33 | 34 | const f = (e: PlotlyHTMLElement) => { 35 | e.removeAllListeners(); 36 | }; 37 | ``` 38 | 39 | You dont always have to implement the module, you can simply import the module as `any` for a quick start: 40 | 41 | ```tsx 42 | // my-typings.ts 43 | declare module "plotly.js"; // each of its imports are `any` 44 | ``` 45 | 46 | Because you don't have to explicitly import this, this is known as an [ambient module declaration](https://www.typescriptlang.org/docs/handbook/namespaces-and-modules.html#pitfalls-of-namespaces-and-modules). You can do AMD's in a script-mode `.ts` file (no imports or exports), or a `.d.ts` file anywhere in your project. 47 | 48 | You can also do ambient variable and ambient type declarations: 49 | 50 | ```ts 51 | // ambient utiltity type 52 | type ToArray = T extends unknown[] ? T : T[]; 53 | // ambient variable 54 | declare let process: { 55 | env: { 56 | NODE_ENV: "development" | "production"; 57 | }; 58 | }; 59 | process = { 60 | env: { 61 | NODE_ENV: "production", 62 | }, 63 | }; 64 | ``` 65 | 66 | You can see examples of these included in the built in type declarations in the `lib` field of `tsconfig.json` 67 | -------------------------------------------------------------------------------- /cheatsheet-react-typescript/basic/troubleshooting/operators.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: operators 3 | title: "Troubleshooting Handbook: Operators" 4 | sidebar_label: Operators 5 | --- 6 | 7 | - `typeof` and `instanceof`: type query used for refinement 8 | - `keyof`: get keys of an object. `keyof T` is an operator to tell you what values of `k` can be used for `obj[k]`. 9 | - [Some misconceptions here](https://twitter.com/SeaRyanC/status/1418678670739218438?s=20). 10 | - `O[K]`: property lookup 11 | - `[K in O]`: mapped types 12 | - `+` or `-` or `readonly` or `?`: addition and subtraction and readonly and optional modifiers 13 | - `x ? Y : Z`: Conditional types for generic types, type aliases, function parameter types 14 | - `!`: Nonnull assertion for nullable types 15 | - `=`: Generic type parameter default for generic types 16 | - `as`: type assertion 17 | - `is`: type guard for function return types 18 | 19 | Conditional Types are a difficult topic to get around so here are some extra resources: 20 | 21 | - fully walked through explanation https://artsy.github.io/blog/2018/11/21/conditional-types-in-typescript/ 22 | - Bailing out and other advanced topics https://github.com/sw-yx/ts-spec/blob/master/conditional-types.md 23 | - Basarat's video https://www.youtube.com/watch?v=SbVgPQDealg&list=PLYvdvJlnTOjF6aJsWWAt7kZRJvzw-en8B&index=2&t=0s 24 | - [Generics, Conditional types and Mapped types](https://www.youtube.com/watch?v=PJjeHzvi_VQ&feature=youtu.be) 25 | -------------------------------------------------------------------------------- /cheatsheet-react-typescript/basic/troubleshooting/ts-config.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: tsconfig 3 | title: "Troubleshooting Handbook: tsconfig.json" 4 | sidebar_label: tsconfig.json 5 | --- 6 | 7 | You can find [all the Compiler options in the TypeScript docs](https://www.typescriptlang.org/docs/handbook/compiler-options.html). [The new TS docs also has per-flag annotations of what each does](https://www.typescriptlang.org/tsconfig#allowSyntheticDefaultImports). This is the setup I roll with for APPS (not libraries - for libraries you may wish to see the settings we use in `tsdx`): 8 | 9 | ```json 10 | { 11 | "compilerOptions": { 12 | "incremental": true, 13 | "outDir": "build/lib", 14 | "target": "es5", 15 | "module": "esnext", 16 | "lib": ["DOM", "ESNext"], 17 | "sourceMap": true, 18 | "importHelpers": true, 19 | "declaration": true, 20 | "rootDir": "src", 21 | "strict": true, 22 | "noUnusedLocals": true, 23 | "noUnusedParameters": true, 24 | "noImplicitReturns": true, 25 | "noFallthroughCasesInSwitch": true, 26 | "allowJs": false, 27 | "jsx": "react", 28 | "moduleResolution": "node", 29 | "baseUrl": "src", 30 | "forceConsistentCasingInFileNames": true, 31 | "esModuleInterop": true, 32 | "suppressImplicitAnyIndexErrors": true, 33 | "allowSyntheticDefaultImports": true, 34 | "experimentalDecorators": true 35 | }, 36 | "include": ["src/**/*"], 37 | "exclude": ["node_modules", "build", "scripts"] 38 | } 39 | ``` 40 | 41 | You can find more [recommended TS config here](https://github.com/tsconfig/bases). 42 | 43 | Please open an issue and discuss if there are better recommended choices for React. 44 | 45 | Selected flags and why we like them: 46 | 47 | - `esModuleInterop`: disables namespace imports (`import * as foo from "foo"`) and enables CJS/AMD/UMD style imports (`import fs from "fs"`) 48 | - `strict`: `strictPropertyInitialization` forces you to initialize class properties or explicitly declare that they can be undefined. You can opt out of this with a definite assignment assertion. 49 | - `"typeRoots": ["./typings", "./node_modules/@types"]`: By default, TypeScript looks in `node_modules/@types` and parent folders for third party type declarations. You may wish to override this default resolution so you can put all your global type declarations in a special `typings` folder. 50 | 51 | Compilation speed grows linearly with size of codebase. For large projects, you will want to use [Project References](https://www.typescriptlang.org/docs/handbook/project-references.html). See our [ADVANCED](https://react-typescript-cheatsheet.netlify.app/docs/advanced/intro/) cheatsheet for commentary. 52 | -------------------------------------------------------------------------------- /cheatsheet-react-typescript/basic/troubleshooting/utilities.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: utilities 3 | title: "Troubleshooting Handbook: Utilities" 4 | sidebar_label: Utilities 5 | --- 6 | 7 | These are all built in, [see source in es5.d.ts](https://github.com/microsoft/TypeScript/blob/2c458c0d1ccb96442bca9ce43aa987fb0becf8a9/src/lib/es5.d.ts#L1401-L1474): 8 | 9 | - `ConstructorParameters`: a tuple of class constructor's parameter types 10 | - `Exclude`: exclude a type from another type 11 | - `Extract`: select a subtype that is assignable to another type 12 | - `InstanceType`: the instance type you get from a `new`ing a class constructor 13 | - `NonNullable`: exclude `null` and `undefined` from a type 14 | - `Parameters`: a tuple of a function's parameter types 15 | - `Partial`: Make all properties in an object optional 16 | - `Readonly`: Make all properties in an object readonly 17 | - `ReadonlyArray`: Make an immutable array of the given type 18 | - `Pick`: A subtype of an object type with a subset of its keys 19 | - `Record`: A map from a key type to a value type 20 | - `Required`: Make all properties in an object required 21 | - `ReturnType`: A function's return type 22 | -------------------------------------------------------------------------------- /cheatsheet-react-typescript/hoc/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: intro 3 | sidebar_label: Intro 4 | title: HOC Cheatsheet 5 | --- 6 | 7 | **This HOC Cheatsheet** compiles all available knowledge for writing Higher Order Components with React and TypeScript. 8 | 9 | - We will map closely to [the official docs on HOCs](https://reactjs.org/docs/higher-order-components.html) initially 10 | - While hooks exist, many libraries and codebases still have a need to type HOCs. 11 | - Render props may be considered in future 12 | - The goal is to write HOCs that offer type safety while not getting in the way. 13 | 14 | Here is a base HOC example you can copy right away: 15 | 16 | ```jsx 17 | 18 | type PropsAreEqual

= ( 19 | prevProps: Readonly

, 20 | nextProps: Readonly

21 | ) => boolean; 22 | 23 | const withSampleHoC =

( 24 | component: { 25 | (props: P): Exclude; 26 | displayName?: string; 27 | }, 28 | propsAreEqual?: PropsAreEqual

| false, 29 | 30 | componentName = component.displayName ?? component.name 31 | ): { 32 | (props: P): JSX.Element; 33 | displayName: string; 34 | } => { 35 | 36 | function WithSampleHoc(props: P) { 37 | //Do something special to justify the HoC. 38 | return component(props) as JSX.Element; 39 | } 40 | 41 | WithSampleHoc.displayName = `withSampleHoC(${componentName})`; 42 | 43 | let wrappedComponent = propsAreEqual === false ? WithSampleHoc : React.memo(WithSampleHoc, propsAreEqual); 44 | 45 | //copyStaticProperties(component, wrappedComponent); 46 | 47 | return wrappedComponent as typeof WithSampleHoc 48 | }; 49 | ``` 50 | 51 | This code meets these criteria: 52 | 53 | 1. Allows a component to return valid elements (`strings | array | boolean | null | number`) and not just `JSX.Element | null`. 54 | 2. Wraps it in a memo unless you opt out. 55 | 3. Removes the nested component, so React Dev tools will just show one component. 56 | 4. Indicates with `displayName` in React Dev Tool with an annotation that this is a component wrapped in two HoCs 57 | 5. Optional: Copies over static properties that might have been defined on the original component. 58 | -------------------------------------------------------------------------------- /cheatsheet-react-typescript/migration/from-flow.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: from_flow 3 | title: From Flow 4 | --- 5 | 6 | - Try flow2ts: `npx flow2ts` - doesn't work 100% but saves some time ([see this and other tips from @braposo](https://github.com/typescript-cheatsheets/react-typescript-cheatsheet/pull/79#issuecomment-458227322) at TravelRepublic) 7 | - Try Airtable's codemod: https://github.com/Airtable/typescript-migration-codemod https://medium.com/airtable-eng/the-continual-evolution-of-airtables-codebase-migrating-a-million-lines-of-code-to-typescript-612c008baf5c 8 | - [Incremental Migration to TypeScript on a Flowtype codebase][entria] at Entria 9 | - [MemSQL's Studio's migration](https://davidgom.es/porting-30k-lines-of-code-from-flow-to-typescript/) - blogpost with many useful tips 10 | - Retail-UI's Codemod: https://github.com/skbkontur/retail-ui/tree/master/packages/react-ui-codemodes/flow-to-ts 11 | - Quick-n-dirty [Flow to TS Codemod](https://gist.github.com/skovhus/c57367ce6ecbc3f70bb7c80f25727a11) 12 | - [Ecobee's brief experience](https://mobile.twitter.com/alanhietala/status/1104450494754377728) 13 | - [Migrating a 50K SLOC Flow + React Native app to TypeScript](https://blog.usejournal.com/migrating-a-flow-react-native-app-to-typescript-c74c7bceae7d) 14 | 15 | [entria]: https://medium.com/entria/incremental-migration-to-typescript-on-a-flowtype-codebase-515f6490d92d "Incremental Migration to TypeScript on a Flowtype codebase" 16 | -------------------------------------------------------------------------------- /cheatsheet-react-typescript/migration/js-docs.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: js_docs 3 | title: JSDoc 4 | --- 5 | 6 | - https://github.com/Microsoft/TypeScript/wiki/JsDoc-support-in-JavaScript 7 | - webpack's codebase uses JSDoc with linting by TS https://twitter.com/TheLarkInn/status/984479953927327744 (some crazy hack: https://twitter.com/thelarkinn/status/996475530944823296) 8 | - JSDoc can type check if using closure-compiler https://github.com/google/closure-compiler/wiki/Types-in-the-Closure-Type-System 9 | 10 | Problems to be aware of: 11 | 12 | - `object` is converted to `any` for some reason. 13 | - If you have an error in the jsdoc, you get no warning/error. TS just silently doesn't type annotate the function. 14 | - [casting can be verbose](https://twitter.com/bahmutov/status/1089229349637754880) 15 | 16 | (_thanks [Gil Tayar](https://twitter.com/giltayar/status/1089228919260221441) and [Gleb Bahmutov](https://twitter.com/bahmutov/status/1089229196247908353) for sharing above commentary_) 17 | -------------------------------------------------------------------------------- /cheatsheet-reactjs/react-cheatsheet-thumbnail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/cheatsheet-reactjs/react-cheatsheet-thumbnail.png -------------------------------------------------------------------------------- /cheatsheet-reactjs/stylesheet.css: -------------------------------------------------------------------------------- 1 | @page { size: A4 landscape; margin: 1cm } 2 | 3 | 4 | body { 5 | margin: 15px; 6 | font-family: 'Adobe Caslon Pro'; 7 | } 8 | 9 | code { 10 | font-family: 'DejaVu Sans Mono'; 11 | background-color: #f0f0f0; 12 | padding: 0 !important; 13 | } 14 | pre { 15 | background-color: #f0f0f0; 16 | } 17 | 18 | h1, h2, h3, h4 { 19 | font-family: 'Bebas Neue'; 20 | } 21 | 22 | h1 { 23 | font-weight: normal; 24 | color: #aaa; 25 | padding: 0 10px; 26 | margin: 0; 27 | font-size: 18pt; 28 | } 29 | 30 | h2 { 31 | color: #434e6a; 32 | font-size: 16pt; 33 | margin: 14pt 0 4pt; 34 | } 35 | 36 | h3 { 37 | margin-top: 5pt; 38 | margin-bottom: 0; 39 | font-size: 14px; 40 | } 41 | 42 | h4 { 43 | font-family: 'Adobe Caslon Pro'; 44 | font-weight: bold; 45 | font-size: 14px; 46 | margin: 8pt 0 4pt; 47 | } 48 | 49 | pre, code { 50 | font-size: 12px; 51 | } 52 | li, p { 53 | font-size: 13px; 54 | } 55 | p, pre { 56 | margin: 0.5em 0; 57 | } 58 | 59 | section { 60 | margin: 3mm 0; 61 | } 62 | section:first-child { 63 | margin-top: 0; 64 | } 65 | section:first-child h2 { 66 | margin-top: 0; 67 | } 68 | 69 | section > ol, section > ul { 70 | margin-top: 0; 71 | padding-left: 20px; 72 | margin-bottom: 0; 73 | } 74 | 75 | li > ul { 76 | margin-top: 2pt; 77 | padding-left: 20px; 78 | } 79 | 80 | .method-list li { 81 | margin-left: 10pt; 82 | } 83 | .method-list li h3 code { 84 | background-color: transparent; 85 | } 86 | 87 | .prop-list { 88 | margin: 0; 89 | padding: 0; 90 | list-style: none; 91 | } 92 | .prop-list > li > code:first-child { 93 | display: inline-block; 94 | font-weight: bold; 95 | width: 55pt; 96 | text-align: right; 97 | } 98 | .prop-list ol { 99 | padding-left: 70pt; 100 | } 101 | 102 | .lifecycle-list { 103 | margin: 0; 104 | padding: 0; 105 | list-style: none; 106 | } 107 | .lifecycle-list li code:first-child { 108 | display: inline-block; 109 | font-weight: bold; 110 | width: 140pt; 111 | text-align: left; 112 | } 113 | 114 | .keyword-list { 115 | margin: 0; 116 | padding: 0; 117 | list-style: none; 118 | } 119 | .keyword-list li { 120 | display: inline-block; 121 | margin: 2pt; 122 | } 123 | .keyword-list li code { 124 | display: inline-block; 125 | width: 55pt; 126 | } 127 | .keyword-list li.long { 128 | display: block; 129 | margin: 5pt 2pt; 130 | } 131 | .keyword-list li.long code { 132 | width: auto; 133 | } 134 | 135 | #left, #right { 136 | width: 122mm; 137 | height: 172mm; 138 | /* border: 1px dashed #e0e0e0; */ 139 | } 140 | 141 | #left { 142 | float: left; 143 | } 144 | #right { 145 | float: right; 146 | } 147 | 148 | footer { 149 | margin-top: 2em; 150 | font-size: 12px; 151 | text-align: right; 152 | } 153 | footer, footer a { 154 | color: #aaa; 155 | } 156 | -------------------------------------------------------------------------------- /coding-guidelines-best-practices/.eleventy.js: -------------------------------------------------------------------------------- 1 | const { applySharedConfig } = require("@darekkay/11ty"); 2 | const markdownIt = require("markdown-it"); 3 | const markdown = require("@darekkay/11ty/lib/markdown"); 4 | 5 | module.exports = function(eleventyConfig) { 6 | applySharedConfig(eleventyConfig); 7 | 8 | // markdown setup 9 | const markdownLib = markdownIt({ 10 | html: true, 11 | highlight: markdown.highlight() 12 | }) 13 | .use(...markdown.pluginStripH1()) 14 | .use(...markdown.pluginExternalLinks()) 15 | .use(...markdown.pluginHeadlineAnchors()); 16 | eleventyConfig.setLibrary("md", markdownLib); 17 | 18 | // copy assets 19 | eleventyConfig.addPassthroughCopy({ "node_modules/@darekkay/styles/dist/css/styles.css": "assets/styles.css" }); 20 | eleventyConfig.addPassthroughCopy({ "node_modules/@darekkay/styles/dist/css/fonts": "assets/fonts" }); 21 | 22 | return { 23 | dir: { 24 | input: "README.md", 25 | output: "dist", 26 | includes: "node_modules/@darekkay/11ty/lib/includes" 27 | } 28 | }; 29 | }; 30 | -------------------------------------------------------------------------------- /coding-guidelines-best-practices/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@darekkay/best-practices", 3 | "description": "A guide for building better applications", 4 | "version": "1.0.0", 5 | "author": "Darek Kay (https://darekkay.com/)", 6 | "bugs": { 7 | "url": "https://github.com/darekkay/best-practices/issues" 8 | }, 9 | "dependencies": { 10 | "@11ty/eleventy": "0.11.1", 11 | "@darekkay/11ty": "1.2.4", 12 | "@darekkay/styles": "2.0.0", 13 | "highlight.js": "10.3.1", 14 | "markdown-it": "12.0.2", 15 | "markdown-it-anchor": "6.0.0", 16 | "markdown-it-link-attributes": "3.0.0", 17 | "markdown-it-replace-link": "1.1.0", 18 | "npm-run-all": "4.1.5", 19 | "rimraf": "3.0.2" 20 | }, 21 | "devDependencies": {}, 22 | "homepage": "https://darekkay.com/best-practices/", 23 | "keywords": [ 24 | "best practices", 25 | "programming", 26 | "software development", 27 | "web development" 28 | ], 29 | "license": "Public Domain", 30 | "main": "index.js", 31 | "private": true, 32 | "repository": { 33 | "type": "git", 34 | "url": "git+https://github.com/darekkay/best-practices.git" 35 | }, 36 | "scripts": { 37 | "build": "run-s clean build:eleventy", 38 | "build:eleventy": "eleventy", 39 | "clean": "rimraf dist/" 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /coding-guidelines-best-practices/readme.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Best Practices and Coding Guidelines", 3 | "slug": "best-practices", 4 | "description": "A guide for building better applications.", 5 | "layout": "article.njk", 6 | "permalink": "index.html", 7 | "plugins": { 8 | "lastUpdated": true 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /css-protips/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /data-structures/readme.md: -------------------------------------------------------------------------------- 1 | [![Itsy Bitsy Data Structures](https://cloud.githubusercontent.com/assets/952783/21579289/5754b03a-cf75-11e6-976c-f67a271aedaa.png)](itsy-bitsy-data-structures.js) 2 | 3 | ***Welcome to Itsy Bitsy Data Structures!*** 4 | 5 | In here are super simplified examples of many of the common data structures 6 | written in easy to read JavaScript. 7 | 8 | Reading through the guided code will help you learn about what data structures 9 | are, what their uses are, and how to discuss them. 10 | 11 | ### [Want to jump into the code? Click here](itsy-bitsy-data-structures.js) 12 | 13 | Also be sure to check out my other code walkthrough: 14 | [The Super Tiny Compiler](https://github.com/thejameskyle/the-super-tiny-compiler) 15 | 16 | --- 17 | 18 | ### Why should I care? 19 | 20 | Data Structures might not be the juiciest topic in the world, but they are 21 | hugely important to growing as an engineer. Knowing data structures don't just 22 | make your programs faster and more efficient, but they help you organize your 23 | code and your thoughts so that you can build more complicated programs without 24 | a ton of mental overhead. 25 | 26 | ### But data structures are scary! 27 | 28 | Yeah, lots of computer science topics are intimidating, and that's largely a 29 | fault of how they are taught. In this we're going to do a high level pass over 30 | a lot of the key things you need to know in order to dive into them deeper. 31 | It's more about introducing you to the shared language of data structures. 32 | 33 | ### Okay so where do I begin? 34 | 35 | Awesome! Head on over to the 36 | [itsy-bitsy-data-structures.js](itsy-bitsy-data-structures.js) file. 37 | 38 | ### I'm back, that didn't make sense 39 | 40 | Ouch, I'm really sorry. I'm planning on doing a lot more work on this to add 41 | inline annotations. If you want to come back when that's done, you can either 42 | watch/star this repo or follow me on 43 | [twitter](https://twitter.com/thejameskyle) for updates. 44 | 45 | --- 46 | 47 | [![cc-by-4.0](https://licensebuttons.net/l/by/4.0/80x15.png)](http://creativecommons.org/licenses/by/4.0/) 48 | -------------------------------------------------------------------------------- /design-resources-developers/headerimage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/design-resources-developers/headerimage.png -------------------------------------------------------------------------------- /developer-resources-hosting/readme.md: -------------------------------------------------------------------------------- 1 | - Heroku — https://heroku.com 2 | - Netlify — https://netlify.com 3 | - Vercel (Zeit) — https://vercel.com 4 | - Firebase — https://firebase.com 5 | - Surge — https://surge.sh 6 | - Render — https://render.com 7 | - Hostman — https://hostman.com 8 | - Glitch — https://glitch.com 9 | - Fly — https://fly.io 10 | - Fleek — https://fleek.co 11 | - Begin — https://begin.com 12 | - Stormkit — https://stormkit.io 13 | - Deta — https://deta.sh — customized nodejs app 14 | - Commonshot — https://commons.host — Static web hosting and CDN. 15 | -------------------------------------------------------------------------------- /developer-websites/readme.md: -------------------------------------------------------------------------------- 1 | # Awesome Developer Websites 2 | 3 | A list of developer's personal websites that are interesting in their own way: design, originality, craziness or simply effectiveness. 4 | 5 | 6 | - [CJ Gammon](http://www.cjgammon.com/) 7 | - [Daniel X Moore](https://whimsy.space/) 8 | - [Hakim El Hattab](https://hakim.se/) 9 | - [Jeremy Thomas](https://jgthms.com/) 10 | - [Jessica Lord](http://jlord.us/) 11 | - [Kenji Saito](http://kenji-special.info/) 12 | - [Lynn Fisher](https://lynnandtonic.com/) 13 | - [Sarah Drasner](https://sarahdrasnerdesign.com/) 14 | - [Sindre Sorhus](https://sindresorhus.com/) 15 | - [Una Kravets](https://una.im/) 16 | - [Zeno Rocha](https://zenorocha.com/) 17 | - [Sittiphol Phanvilai](https://nuuneoi.com/profile) 18 | - [Adam Hartwig](http://www.adamhartwig.co.uk/) 19 | - [Timothée Roussilhe](http://timroussilhe.com/) 20 | - [Alexander Kallaway](http://ka11away.com/) 21 | - [Daniel Strong](http://danielstrong.io/) 22 | - [Sam Craig](https://samcraig.io/) 23 | - [Nivaldo Martinez](https://nivaldomartinez.com/) 24 | - [Adam Greenough](https://adgr.dev/) 25 | -------------------------------------------------------------------------------- /fonts/readme.md: -------------------------------------------------------------------------------- 1 | # Fonts 2 | 3 | Just some fonts I like, and wanted to save somewhere 4 | 5 | [Espinosa Regular](https://freefaces.gallery/serif/espinosa-regular/) 6 | 7 | [Soria](https://freefaces.gallery/serif/soria/) 8 | 9 | [Archiv Grotesk](https://freefaces.gallery/sans/archiv-grotesk/) 10 | 11 | [Skyscapers](https://freefaces.gallery/cursive/skyscapers/) 12 | 13 | [Murmure](https://freefaces.gallery/display/murmure/) 14 | 15 | [Yatra One](https://fonts.google.com/specimen/Yatra+One) 16 | 17 | [Gilda Display](https://fonts.google.com/specimen/Gilda+Display) 18 | 19 | [Montaga](https://fonts.google.com/specimen/Montaga) 20 | 21 | [Agrandir](https://pangrampangram.com/products/agrandir) 22 | 23 | [Universal Sans](https://universalsans.com/) 24 | 25 | [Inter](https://rsms.me/inter/) 26 | 27 | [Whyte](https://abcdinamo.com/typefaces/whyte) 28 | 29 | [Hobeaux](https://ohnotype.co/fonts/hobeaux) 30 | 31 | [Feijoa](https://klim.co.nz/retail-fonts/feijoa/) 32 | 33 | [Domaine Display](https://klim.co.nz/retail-fonts/domaine-display/) 34 | 35 | [Domaine Sans Display](https://klim.co.nz/retail-fonts/domaine-sans-display/) 36 | 37 | [Founders Grotesk](https://klim.co.nz/collections/founders-grotesk/) 38 | 39 | [Canela](https://commercialtype.com/catalog/canela) 40 | 41 | [Chiswick Sans](https://commercialtype.com/catalog/chiswick_sans) 42 | 43 | [Chiswick Serif](https://commercialtype.com/catalog/chiswick_serif) 44 | 45 | [Original Sans](https://commercialclassics.com/catalogue/original_sans) 46 | 47 | --- 48 | 49 | [Free Faces](https://freefaces.gallery/) 50 | 51 | [Hex](https://hex.xyz/) 52 | -------------------------------------------------------------------------------- /frontend-development/Banner.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/frontend-development/Banner.jpg -------------------------------------------------------------------------------- /frontend-development/Logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/frontend-development/Logo.png -------------------------------------------------------------------------------- /frontend-development/frontend.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/frontend-development/frontend.png -------------------------------------------------------------------------------- /frontend-development/react.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/frontend-development/react.png -------------------------------------------------------------------------------- /frontend-guide/images/desk.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/frontend-guide/images/desk.png -------------------------------------------------------------------------------- /frontend-guide/images/eslint-logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 10 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /frontend-guide/images/flow-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/frontend-guide/images/flow-logo.png -------------------------------------------------------------------------------- /frontend-guide/images/jest-demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/frontend-guide/images/jest-demo.gif -------------------------------------------------------------------------------- /frontend-guide/images/prettier-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/frontend-guide/images/prettier-logo.png -------------------------------------------------------------------------------- /frontend-guide/images/react-devtools-demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/frontend-guide/images/react-devtools-demo.gif -------------------------------------------------------------------------------- /frontend-guide/images/react-logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 10 | 15 | 20 | 21 | -------------------------------------------------------------------------------- /frontend-guide/images/redux-devtools-demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/frontend-guide/images/redux-devtools-demo.gif -------------------------------------------------------------------------------- /frontend-guide/images/redux-logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /frontend-guide/images/stylelint-demo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/frontend-guide/images/stylelint-demo.png -------------------------------------------------------------------------------- /frontend-guide/images/webpack-logo.svg: -------------------------------------------------------------------------------- 1 | icon-square-small 2 | -------------------------------------------------------------------------------- /frontend-guide/images/yarn-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/frontend-guide/images/yarn-logo.png -------------------------------------------------------------------------------- /frontend-resources/cover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/frontend-resources/cover.png -------------------------------------------------------------------------------- /git-tips-n-tricks/README.md: -------------------------------------------------------------------------------- 1 | # GIT TIPS AND TRICKS 🔥🚀⚡ 2 | 3 | For Git basics visit this link - [Git basics](https://rogerdudler.github.io/git-guide/). 4 | 5 | A repo containing only Git tips and tricks. 6 | 7 | **`git log -10 --pretty --oneline`** 8 | 9 | Displays your last 10 latest commits, each on their line. 10 | 11 | `-10` can be replaced with any number you want. 12 | 13 | **`git checkout -`** 14 | 15 | Jumps back to your last branch. 16 | 17 | **`git reflog`** 18 | 19 | Displays all the steps you have made 20 | 21 | **`git log -s mykeyword`** 22 | 23 | Searches through your commits for a commit matching your keyword. 24 | 25 | Replace `mykeyword` with the word you want to find 26 | 27 | **`git switch -c "new_branch"`** 28 | 29 | Did you make the changes in the wrong branch? 30 | 31 | This command creates a new branch and moves all your changes to the newly created branch. 32 | 33 | **`git switch "branch_name`** 34 | 35 | The same as above, but it moves the changes to an existing branch. 36 | 37 | **`git log --graph --oneline --decorate --all`** 38 | 39 | An ASCII art tree of all the branches, decorated with the names of tags and branches. 40 | 41 | **`git commit --amend`** 42 | 43 | Edit the **last commit message** and save the commit. If you have already pushed the code, push again by using `--force` flag to make changes to remote repository. 44 | 45 | **`git shortlog`** 46 | 47 | Summarizes git log output in a format suitable for inclusion in release 48 | announcements. Each commit will be grouped by author and title. ([source](https://git-scm.com/docs/git-shortlog)) ([@natterstefan](https://twitter.com/natterstefan/status/1244888942165610497)) 49 | 50 | # GIT ALIASES 51 | 52 | Create shorter git commands with git aliases. 53 | 54 | To add new ones, use the following command `git config --global alias.[insertYourShortcut] [gitCommand]`. 55 | 56 | These are mine: 57 | 58 | ``` 59 | git config --global alias.c checkout 60 | git config --global alias.st status 61 | git config --global alias.cm 'checkout master' 62 | git config --global alias.b branch 63 | git config --global alias.c checkout 64 | git config --global alias.ci 'commit -m' 65 | git config --global alias.p pull 66 | git config --global alias.cb 'checkout -b' 67 | git config --global alias.sc 'switch -c' 68 | ``` 69 | 70 | To easily display your git aliases run this command in your terminal - `! git config --get-regexp ^alias\. | sed -e s/^alias\.// -e s/\ /\ =\ /`. 71 | 72 | Now you can use `git alias` to list all the aliases you have created. 73 | -------------------------------------------------------------------------------- /github-users-top-us/readme.md: -------------------------------------------------------------------------------- 1 | https://github.com/gayanvoice/top-github-users 2 | -------------------------------------------------------------------------------- /graphql-apis/proxies.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "url": "https://pokeapi-graphiql.herokuapp.com/", 4 | "info": { 5 | "title": "PokeAPI", 6 | "description": "Pokémon Data API", 7 | "logo": { 8 | "url": "http://img08.deviantart.net/20bd/i/2010/231/7/1/pokeball_template_by_poke_lab.png" 9 | } 10 | }, 11 | "externalDocs": [ 12 | { 13 | "description": "GraphiQL", 14 | "url": "https://pokeapi-graphiql.herokuapp.com/" 15 | }, 16 | { 17 | "description": "Docs", 18 | "url": "https://github.com/patrickshaughnessy/PokeAPI-GraphQL" 19 | } 20 | ] 21 | }, 22 | { 23 | "url": "http://graphql-swapi.parseapp.com/", 24 | "info": { 25 | "title": "SWAPI", 26 | "description": "Star Wars API", 27 | "logo": { 28 | "url": "https://www.programmableweb.com/sites/default/files/styles/facebook_scale_height_200/public/TheStarWarsAPI.png" 29 | } 30 | }, 31 | "externalDocs": [ 32 | { 33 | "description": "GraphiQL", 34 | "url": "http://graphql-swapi.parseapp.com/" 35 | }, 36 | { 37 | "description": "Docs", 38 | "url": "https://github.com/graphql/swapi-graphql" 39 | } 40 | ] 41 | }, 42 | { 43 | "url": "https://spacex.land/", 44 | "info": { 45 | "title": "Spacex.Land", 46 | "description": "A non official platform for SpaceX's data!", 47 | "logo": { 48 | "url": "https://spacex.land/assets/logo.png" 49 | } 50 | }, 51 | "externalDocs": [ 52 | { 53 | "description": "GraphiQL", 54 | "url": "https://api.spacex.land/graphql/" 55 | }, 56 | { 57 | "description": "Docs", 58 | "url": "https://spacex.land/" 59 | } 60 | ] 61 | }, 62 | { 63 | "url": "http://graphql-swapi.parseapp.com/", 64 | "info": { 65 | "title": "Spotify", 66 | "description": "Spotify gives you instant access to millions of songs – from old favorites to the latest hits.", 67 | "logo": { 68 | "url": "https://www.programmableweb.com/sites/default/files/styles/facebook_scale_height_200/public/TheStarWarsAPI.png" 69 | } 70 | }, 71 | "externalDocs": [ 72 | { 73 | "description": "GraphiQL", 74 | "url": "http://spotify.thefrench.house/graphql-console/" 75 | }, 76 | { 77 | "description": "Repo", 78 | "url": "https://github.com/thefrenchhouse/spotify-graphql" 79 | }, 80 | { 81 | "description": "Examples", 82 | "url": "https://github.com/thefrenchhouse/spotify-graphql-examples" 83 | } 84 | ] 85 | } 86 | ] 87 | -------------------------------------------------------------------------------- /hacker-laws/assets/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/hacker-laws/assets/banner.png -------------------------------------------------------------------------------- /hacker-laws/assets/banner.psd: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/hacker-laws/assets/banner.psd -------------------------------------------------------------------------------- /hacker-laws/assets/diagrams.bmpr: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/hacker-laws/assets/diagrams.bmpr -------------------------------------------------------------------------------- /hacker-laws/assets/repository-open-graph-template.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/hacker-laws/assets/repository-open-graph-template.png -------------------------------------------------------------------------------- /hacker-laws/assets/sharing.md: -------------------------------------------------------------------------------- 1 | # Sharing 2 | 3 | Copy paste the below for sharing on social media. The channels are: 4 | 5 | - [Hacker News](https://news.ycombinator.com) 6 | - [`r/programming`](https://reddit.com/r/programming/) 7 | - LinkedIn 8 | - Twitter 9 | 10 | ## LinkedIn 11 | 12 | #hackerlaws - - 13 | 14 | 15 | 16 | Hacker Laws is a set of theories, principles and patterns that developers will find useful. 17 | 18 | Thanks 19 | 20 | #hacking #programming #coding #development #computerscience #logic 21 | -------------------------------------------------------------------------------- /hacker-laws/images/amdahls_law.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/hacker-laws/images/amdahls_law.png -------------------------------------------------------------------------------- /hacker-laws/images/changelog-podcast.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/hacker-laws/images/changelog-podcast.png -------------------------------------------------------------------------------- /hacker-laws/images/complete_graph.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/hacker-laws/images/complete_graph.png -------------------------------------------------------------------------------- /hacker-laws/images/gartner_hype_cycle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/hacker-laws/images/gartner_hype_cycle.png -------------------------------------------------------------------------------- /hacker-laws/images/gitlocalize.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/hacker-laws/images/gitlocalize.png -------------------------------------------------------------------------------- /hacker-laws/prepare-markdown-for-ebook.sh: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | # This script prepares a `hacker-laws.md` file which is in a format ready to be 3 | # exported to PDF or other formats for an e-book. 4 | 5 | # Require that we provide the version number and get a date. 6 | version=$1 7 | date=$(date "+%Y-%m-%d") 8 | 9 | if [ -z $version ]; then 10 | echo "version must be specified: ./prepare-markdown-for-ebook.sh " 11 | exit 1 12 | fi 13 | 14 | # Create the frontmatter. 15 | cat << EOF > frontmatter.md 16 | --- 17 | title: "Hacker Laws" 18 | author: "Dave Kerr, github.com/dwmkerr/hacker-laws" 19 | subtitle: "Laws, Theories, Principles and Patterns that developers will find useful. ${version}, ${date}." 20 | --- 21 | EOF 22 | 23 | # Combine the frontmatter and the laws. 24 | cat frontmatter.md README.md >> hacker-laws.md 25 | 26 | # Remove the title - we have it in the front-matter of the doc, so it will 27 | # automatically be added to the PDF. 28 | sed -i'' '/💻📖.*/d' hacker-laws.md 29 | 30 | # We can't have emojis in the final content with the PDF generator we're using. 31 | sed -i'' 's/❗/Warning/' hacker-laws.md 32 | 33 | # Now rip out the translations line. 34 | sed -i'' '/^\[Translations.*/d' hacker-laws.md 35 | 36 | # # Now rip out any table of contents items. 37 | sed -i'' '/\*.*/d' hacker-laws.md 38 | sed -i'' '/ \*.*/d' hacker-laws.md 39 | 40 | # Delete everything from 'Translations' onwards (we don't need the translations 41 | # lists, related projects, etc). 42 | sed -i'' '/## Translations/,$d' hacker-laws.md 43 | -------------------------------------------------------------------------------- /javascript-arrays-cheatsheet/Cheatsheet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/javascript-arrays-cheatsheet/Cheatsheet.png -------------------------------------------------------------------------------- /javascript-design-patterns-for-humans/cover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/javascript-design-patterns-for-humans/cover.png -------------------------------------------------------------------------------- /javascript-dev-bookmarks/js-dev-bookmarks.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/javascript-dev-bookmarks/js-dev-bookmarks.png -------------------------------------------------------------------------------- /javascript-interview-questions/images/bom.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/javascript-interview-questions/images/bom.png -------------------------------------------------------------------------------- /javascript-interview-questions/images/call-stack.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/javascript-interview-questions/images/call-stack.png -------------------------------------------------------------------------------- /javascript-interview-questions/images/console-css.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/javascript-interview-questions/images/console-css.png -------------------------------------------------------------------------------- /javascript-interview-questions/images/console-dir.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/javascript-interview-questions/images/console-dir.png -------------------------------------------------------------------------------- /javascript-interview-questions/images/console-html.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/javascript-interview-questions/images/console-html.png -------------------------------------------------------------------------------- /javascript-interview-questions/images/console-table.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/javascript-interview-questions/images/console-table.png -------------------------------------------------------------------------------- /javascript-interview-questions/images/cookie.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/javascript-interview-questions/images/cookie.png -------------------------------------------------------------------------------- /javascript-interview-questions/images/event-table.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/javascript-interview-questions/images/event-table.png -------------------------------------------------------------------------------- /javascript-interview-questions/images/heap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/javascript-interview-questions/images/heap.png -------------------------------------------------------------------------------- /javascript-interview-questions/images/observables.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/javascript-interview-questions/images/observables.png -------------------------------------------------------------------------------- /javascript-interview-questions/images/promises.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/javascript-interview-questions/images/promises.png -------------------------------------------------------------------------------- /javascript-interview-questions/images/prototype_chain.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/javascript-interview-questions/images/prototype_chain.png -------------------------------------------------------------------------------- /javascript-interview-questions/images/temporal.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/javascript-interview-questions/images/temporal.jpg -------------------------------------------------------------------------------- /javascript-notes-good-parts/images/Javascript the Good Parts book with tabs.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/javascript-notes-good-parts/images/Javascript the Good Parts book with tabs.jpg -------------------------------------------------------------------------------- /javascript-snippets/Logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/javascript-snippets/Logo.png -------------------------------------------------------------------------------- /javascript-testing-practices-guidelines/assets/5: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /javascript-testing-practices-guidelines/assets/header-alt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/javascript-testing-practices-guidelines/assets/header-alt.png -------------------------------------------------------------------------------- /javascript-testing-practices-guidelines/assets/header-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/javascript-testing-practices-guidelines/assets/header-image.png -------------------------------------------------------------------------------- /javascript-testing-practices-guidelines/assets/header.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/javascript-testing-practices-guidelines/assets/header.pptx -------------------------------------------------------------------------------- /javascript-testing-practices-guidelines/assets/headspace.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/javascript-testing-practices-guidelines/assets/headspace.png -------------------------------------------------------------------------------- /javascript-testing-practices-guidelines/assets/js-bp-header.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/javascript-testing-practices-guidelines/assets/js-bp-header.jpg -------------------------------------------------------------------------------- /javascript-testing-practices-guidelines/assets/lighthouse2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/javascript-testing-practices-guidelines/assets/lighthouse2.png -------------------------------------------------------------------------------- /javascript-testing-practices-guidelines/assets/mind-map.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/javascript-testing-practices-guidelines/assets/mind-map.jpg -------------------------------------------------------------------------------- /javascript-testing-practices-guidelines/assets/twitter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/javascript-testing-practices-guidelines/assets/twitter.png -------------------------------------------------------------------------------- /javascript-testing-practices-guidelines/assets/uml.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/javascript-testing-practices-guidelines/assets/uml.png -------------------------------------------------------------------------------- /javascript-wtfjs/CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing Guidelines 2 | 3 | This guide will help you to contribute to this project smoothly. Please, read carefully to make your contribution process easier. 4 | 5 | Usually, this project has two types of contributions: _new examples_ and _translations_. 6 | 7 | ## New Examples 8 | 9 | **New examples will be accepted only if they have an explanation.** Preferably, the explanation should contain links to the specification, blog posts, forum publications. 10 | 11 | If you don't know why an example works the way it works, ask for help on [the discussion forum](https://github.com/denysdovhan/wtfjs/discussions). 12 | 13 | Issues without explanations will be closed. 14 | 15 | ## Translations 16 | 17 | **If you want a translation, please, make one.** Issues with translation requests will be closed in favor of PRs. 18 | 19 | Before sending a PR with translation, please check if there are any existing PRs with translation to your language. 20 | 21 | **You have to find someone who speaks your language natively to read, check and verify your translation.** That's how we are trying to prevent typos and mistakes. 22 | 23 | --- 24 | 25 | Thanks for understanding, have fun! 26 | -------------------------------------------------------------------------------- /javascript-wtfjs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "wtfjs", 3 | "version": "1.22.0", 4 | "description": "A list of funny and tricky JavaScript examples", 5 | "bin": { 6 | "wtfjs": "wtfjs.js" 7 | }, 8 | "scripts": { 9 | "precommit": "lint-staged", 10 | "toc": "doctoc --github --title '# Table of Contents' --maxlevel 2 README*.md", 11 | "format": "prettier --write '*.{json,js}'" 12 | }, 13 | "repository": { 14 | "type": "git", 15 | "url": "git+https://github.com/denysdovhan/wtfjs.git" 16 | }, 17 | "keywords": [ 18 | "javascript", 19 | "specification", 20 | "notes", 21 | "wtf", 22 | "learning", 23 | "guide", 24 | "handbook" 25 | ], 26 | "author": "Denys Dovhan (http://denysdovhan.com)", 27 | "license": "WTFPL 2.0", 28 | "bugs": { 29 | "url": "https://github.com/denysdovhan/wtfjs/issues" 30 | }, 31 | "homepage": "https://github.com/denysdovhan/wtfjs#readme", 32 | "devDependencies": { 33 | "@semantic-release/git": "^9.0.0", 34 | "doctoc": "^1.3.0", 35 | "husky": "^0.14.3", 36 | "lint-staged": "^10.5.3", 37 | "prettier": "^1.14.2", 38 | "semantic-release": "^17.3.7" 39 | }, 40 | "dependencies": { 41 | "boxen": "^1.1.0", 42 | "chalk": "^1.1.1", 43 | "default-pager": "^1.1.0", 44 | "meow": "^3.7.0", 45 | "msee": "^0.3.3", 46 | "through2": "^2.0.2", 47 | "update-notifier": "^2.0.0" 48 | }, 49 | "lint-staged": { 50 | "README*.md": [ 51 | "npm run toc" 52 | ], 53 | "*.{js,json}": [ 54 | "prettier --write" 55 | ] 56 | }, 57 | "release": { 58 | "plugins": [ 59 | "@semantic-release/commit-analyzer", 60 | "@semantic-release/release-notes-generator", 61 | "@semantic-release/npm", 62 | "@semantic-release/github", 63 | [ 64 | "@semantic-release/git", 65 | { 66 | "assets": [ 67 | "README*.md", 68 | "*.js", 69 | "package.json", 70 | "package-lock.json" 71 | ] 72 | } 73 | ] 74 | ] 75 | } 76 | } 77 | -------------------------------------------------------------------------------- /javascript-wtfjs/wtfjs.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | const fs = require("fs"); 4 | const obj = require("through2").obj; 5 | const pager = require("default-pager"); 6 | const msee = require("msee"); 7 | const join = require("path").join; 8 | const boxen = require("boxen"); 9 | const chalk = require("chalk"); 10 | const updateNotifier = require("update-notifier"); 11 | const pkg = require("./package.json"); 12 | const meow = require("meow"); 13 | 14 | const cli = meow( 15 | [ 16 | "Usage", 17 | " wtfjs", 18 | "", 19 | "Options", 20 | " --lang, -l Translation language", 21 | "", 22 | "Examples", 23 | " wtfjs", 24 | " wtfjs --lang pt-br" 25 | ], 26 | { 27 | string: ["lang"], 28 | alias: { 29 | l: "lang", 30 | h: "help" 31 | }, 32 | default: { 33 | lang: "" 34 | } 35 | } 36 | ); 37 | 38 | const boxenOpts = { 39 | borderColor: "yellow", 40 | margin: { 41 | bottom: 1 42 | }, 43 | padding: { 44 | right: 1, 45 | left: 1 46 | } 47 | }; 48 | 49 | const mseeOpts = { 50 | paragraphEnd: "\n\n" 51 | }; 52 | 53 | const notifier = updateNotifier({ pkg }); 54 | 55 | process.env.PAGER = process.env.PAGER || "less"; 56 | process.env.LESS = process.env.LESS || "FRX"; 57 | 58 | const lang = cli.flags.lang 59 | .toLowerCase() 60 | .split("-") 61 | .map((l, i) => (i === 0 ? l : l.toUpperCase())) 62 | .join("-"); 63 | 64 | const translation = join( 65 | __dirname, 66 | !lang ? "./README.md" : `./README-${lang}.md` 67 | ); 68 | 69 | fs.stat(translation, function(err, stats) { 70 | if (err) { 71 | console.log("The %s translation does not exist", chalk.bold(lang)); 72 | return; 73 | } 74 | 75 | fs.createReadStream(translation) 76 | .pipe( 77 | obj(function(chunk, enc, cb) { 78 | const message = []; 79 | 80 | if (notifier.update) { 81 | message.push( 82 | `Update available: {green.bold ${ 83 | notifier.update.latest 84 | }} {dim current: ${notifier.update.current}}` 85 | ); 86 | message.push(`Run {blue npm install -g ${pkg.name}} to update.`); 87 | this.push(boxen(message.join("\n"), boxenOpts)); 88 | } 89 | 90 | this.push(msee.parse(chunk.toString(), mseeOpts)); 91 | cb(); 92 | }) 93 | ) 94 | .pipe(pager()); 95 | }); 96 | -------------------------------------------------------------------------------- /json-awesome-github-profiles/readme.md: -------------------------------------------------------------------------------- 1 | https://github.com/EddieHubCommunity/awesome-github-profiles 2 | -------------------------------------------------------------------------------- /json-data-refined-blog/readme.md: -------------------------------------------------------------------------------- 1 | - https://github.com/m8/refined.blog 2 | -------------------------------------------------------------------------------- /json-github-profile-readme/Readme.md: -------------------------------------------------------------------------------- 1 | https://github.com/zzetao/awesome-github-profile-data 2 | -------------------------------------------------------------------------------- /json-hooks/readme.md: -------------------------------------------------------------------------------- 1 | https://github.com/Uvacoder/hooks-nikgraf 2 | -------------------------------------------------------------------------------- /json-killed-by-google/readme.md: -------------------------------------------------------------------------------- 1 | https://github.com/codyogden/killedbygoogle 2 | -------------------------------------------------------------------------------- /json-webgradients/readme.md: -------------------------------------------------------------------------------- 1 | # Guide for adding gradient in gradients.json file 2 | 3 | ### Color groups 4 | 5 | ``` 6 | ['#259BE5', '#E5E9EC', '#7BCC9B', '#F9AFAD', '#FC96D3', '#8B56E9'] 7 | ``` 8 | ### JSON structure 9 | ``` 10 | "name": "Winter Neva", // gradient name 11 | "favorite": false, // default value 12 | "index": 1, // gradient index in array ( check last index in json file ) 13 | "deg": 120, // gradient degree ( top - zero degree ) 14 | "group": [ "#259BE5" ], // check color groups, may contains more than one value 15 | "gradient": [ // color array, may contains more than one object 16 | { 17 | "color": "#a1c4fd", // HEX 18 | "pos": 0 // color position in gradient 19 | }, 20 | { 21 | "color": "#c2e9fb", 22 | "pos": 100 23 | } 24 | ] 25 | ``` 26 | ----- 27 | # WebGradients 28 | A curated collection of splendid gradients made in `CSS3`, `.sketch` and `.PSD` formats. 29 | [View all the gradients here »](https://webgradients.com) 30 | 31 | [![N|Solid](https://beta.airtap.co/img/components/footer/logo-itmeo.svg)](https://itmeo.com) 32 | 33 | 34 | 35 | ## How To Use 36 | 1. Download the file [`webgradients.css`](https://github.com/itmeo/webgradients/blob/master/webgradients.css). 37 | 2. Place the file in your project folder. 38 | 3. Link the file it in the `` of your document. 39 | 40 | ``` 41 | 42 | 43 | 44 | 45 | ... 46 | ``` 47 | 48 | -------------------------------------------------------------------------------- /learn-regex/img/4: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /learn-regex/img/img_original.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/learn-regex/img/img_original.png -------------------------------------------------------------------------------- /learn-regex/img/regexp-en.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/learn-regex/img/regexp-en.png -------------------------------------------------------------------------------- /node-best-practices/sections/5: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /node-best-practices/sections/apmproducts.md: -------------------------------------------------------------------------------- 1 | # Discover errors and downtime using APM products 2 | 3 | 4 | ### One Paragraph Explainer 5 | 6 | Exception != Error. Traditional error handling assumes the existence of exception as a code related problem but application errors might come in the form of slow code paths, API downtime, lack of computational resources and more. This is where APM products come in handy as they allow to detect a wide variety of ‘burried’ issues proactively with a minimal setup. Among the common features of APM products are for example alerting when the HTTP API returns errors, detect when the API response time drops below some threshold, detection of ‘code smells’, features to monitor server resources, operational intelligence dashboard with IT metrics and many other useful features. Most vendors offer a free plan. 7 | 8 | ### Wikipedia about APM 9 | 10 | In the fields of information technology and systems management, Application Performance Management (APM) is the monitoring and management of performance and availability of software applications. APM strives to detect and diagnose complex application performance problems to maintain an expected level of service. APM is “the translation of IT metrics into business meaning ([i.e.] value)". Major products and segments. 11 | 12 | ### Understanding the APM marketplace 13 | 14 | APM products constitute 3 major segments: 15 | 16 | 1. Website or API monitoring – external services that constantly monitor uptime and performance via HTTP requests. Can be set up in few minutes. Following are few selected contenders: [Pingdom](https://www.pingdom.com/), [Uptime Robot](https://uptimerobot.com/), and [New Relic](https://newrelic.com/application-monitoring) 17 | 18 | 2. Code instrumentation – product family which requires embedding an agent within the application to use features like slow code detection, exception statistics, performance monitoring and many more. Following are few selected contenders: New Relic, App Dynamics 19 | 20 | 3. Operational intelligence dashboard – this line of products is focused on facilitating the ops team with metrics and curated content that helps to easily stay on top of application performance. This usually involves aggregating multiple sources of information (application logs, DB logs, servers log, etc) and upfront dashboard design work. Following are few selected contenders: [Datadog](https://www.datadoghq.com/), [Splunk](https://www.splunk.com/), [Zabbix](https://www.zabbix.com/) 21 | 22 | 23 | 24 | ### Example: UpTimeRobot.Com – Website monitoring dashboard 25 | ![alt text](../../assets/images/uptimerobot.jpg "Website monitoring dashboard") 26 | 27 | ### Example: AppDynamics.Com – end to end monitoring combined with code instrumentation 28 | ![alt text](../../assets/images/app-dynamics-dashboard.png "end to end monitoring combined with code instrumentation") 29 | -------------------------------------------------------------------------------- /node-best-practices/sections/documentingusingswagger.md: -------------------------------------------------------------------------------- 1 | # Document API errors using OpenAPI Specification (earlier known as Swagger) or GraphQL 2 | 3 | ### One Paragraph Explainer 4 | 5 | REST APIs return results using HTTP status codes, it’s absolutely required for the API user to be aware not only about the API schema but also about potential errors – the caller may then catch an error and tactfully handle it. For example, your API documentation might state in advance that HTTP status 409 is returned when the customer name already exists (assuming the API register new users) so the caller can correspondingly render the best UX for the given situation. OpenAPI (eka Swagger) is a standard that defines the schema of API documentation offering an eco-system of tools that allow creating documentation easily online, see print screens below 6 | 7 | If you have already adopted GraphQL for your API endpoints, your schema already contains strict guarantees as to what errors should look like ([outlined in the spec](https://facebook.github.io/graphql/June2018/#sec-Errors)) and how they should be handled by your client-side tooling. In addition, you can also supplement them with comment-based documentation. 8 | 9 | ### GraphQL Error Example 10 | 11 | > This example uses [SWAPI](https://graphql.org/swapi-graphql), the Star Wars API. 12 | 13 | ```graphql 14 | # should fail because id is not valid 15 | { 16 | film(id: "1ZmlsbXM6MQ==") { 17 | title 18 | } 19 | } 20 | ``` 21 | 22 | ```json 23 | { 24 | "errors": [ 25 | { 26 | "message": "No entry in local cache for https://swapi.co/api/films/.../", 27 | "locations": [ 28 | { 29 | "line": 2, 30 | "column": 3 31 | } 32 | ], 33 | "path": [ 34 | "film" 35 | ] 36 | } 37 | ], 38 | "data": { 39 | "film": null 40 | } 41 | } 42 | ``` 43 | 44 | ### Blog Quote: "You have to tell your callers what errors can happen" 45 | 46 | From the blog Joyent, ranked 1 for the keywords “Node.js logging” 47 | 48 | > We’ve talked about how to handle errors, but when you’re writing a new function, how do you deliver errors to the code that called your function? …If you don’t know what errors can happen or don’t know what they mean, then your program cannot be correct except by accident. So if you’re writing a new function, you have to tell your callers what errors can happen and what they mean… 49 | 50 | ### Useful Tool: Swagger Online Documentation Creator 51 | 52 | ![Swagger API Scheme](../../assets/images/swaggerDoc.png "API error handling") 53 | -------------------------------------------------------------------------------- /node-best-practices/sections/eslint_prettier.md: -------------------------------------------------------------------------------- 1 | # Using ESLint and Prettier 2 | 3 | 4 | ### Comparing ESLint and Prettier 5 | 6 | If you format this code using ESLint, it will just give you a warning that it's too wide (depends on your `max-len` setting). Prettier will automatically format it for you. 7 | 8 | ```javascript 9 | foo(reallyLongArg(), omgSoManyParameters(), IShouldRefactorThis(), isThereSeriouslyAnotherOne(), noWayYouGottaBeKiddingMe()); 10 | ``` 11 | 12 | ```javascript 13 | foo( 14 | reallyLongArg(), 15 | omgSoManyParameters(), 16 | IShouldRefactorThis(), 17 | isThereSeriouslyAnotherOne(), 18 | noWayYouGottaBeKiddingMe() 19 | ); 20 | ``` 21 | 22 | Source: [https://github.com/prettier/prettier-eslint/issues/101](https://github.com/prettier/prettier-eslint/issues/101) 23 | 24 | ### Integrating ESLint and Prettier 25 | 26 | ESLint and Prettier overlap in the code formatting feature but can be easily combined by using other packages like [prettier-eslint](https://github.com/prettier/prettier-eslint), [eslint-plugin-prettier](https://github.com/prettier/eslint-plugin-prettier), and [eslint-config-prettier](https://github.com/prettier/eslint-config-prettier). For more information about their differences, you can view the link [here](https://stackoverflow.com/questions/44690308/whats-the-difference-between-prettier-eslint-eslint-plugin-prettier-and-eslint). 27 | -------------------------------------------------------------------------------- /node-best-practices/sections/monitoring.md: -------------------------------------------------------------------------------- 1 | # Monitoring 2 | 3 | ### One Paragraph Explainer 4 | 5 | > At the very basic level, monitoring means you can *easily identify when bad things happen at production. For example, by getting notified by email or Slack. The challenge is to choose the right set of tools that will satisfy your requirements without breaking your bank. May I suggest, start with defining the core set of metrics that must be watched to ensure a healthy state – CPU, server RAM, Node process RAM (less than 1.4GB), the number of errors in the last minute, number of process restarts, average response time. Then go over some advanced features you might fancy and add to your wish list. Some examples of a luxury monitoring feature: DB profiling, cross-service measuring (i.e. measure business transaction), front-end integration, expose raw data to custom BI clients, Slack notifications and many others. 6 | 7 | Achieving the advanced features demands lengthy setup or buying a commercial product such as Datadog, newrelic and alike. Unfortunately, achieving even the basics is not a walk in the park as some metrics are hardware-related (CPU) and others live within the node process (internal errors) thus all the straightforward tools require some additional setup. For example, cloud vendor monitoring solutions (e.g. AWS CloudWatch, Google StackDriver) will tell you immediately about the hardware metric but nothing about the internal app behavior. On the other end, Log-based solutions such as ElasticSearch lack by default the hardware view. The solution is to augment your choice with missing metrics, for example, a popular choice is sending application logs to Elastic stack and configure some additional agent (e.g. Beat) to share hardware-related information to get the full picture. 8 | 9 | ### Blog Quote: "We have a problem with promises" 10 | 11 | From the blog, pouchdb.com ranked 11 for the keywords “Node Promises” 12 | 13 | > … We recommend you to watch these signals for all of your services: Error Rate: Because errors are user facing and immediately affect your customers. 14 | Response time: Because the latency directly affects your customers and business. 15 | Throughput: The traffic helps you to understand the context of increased error rates and the latency too. 16 | Saturation: It tells how “full” your service is. If the CPU usage is 90%, can your system handle more traffic? 17 | … 18 | -------------------------------------------------------------------------------- /node-best-practices/sections/testingerrorflows.md: -------------------------------------------------------------------------------- 1 | # Test error flows using your favorite test framework 2 | 3 | ### One Paragraph Explainer 4 | 5 | Testing ‘happy’ paths is no better than testing failures. Good testing code coverage demands to test exceptional paths. Otherwise, there is no trust that exceptions are indeed handled correctly. Every unit testing framework, like [Mocha](https://mochajs.org/) & [Chai](http://chaijs.com/), supports exception testing (code examples below). If you find it tedious to test every inner function and exception you may settle with testing only REST API HTTP errors. 6 | 7 | ### Code example: ensuring the right exception is thrown using Mocha & Chai 8 | 9 |

10 | Javascript 11 | 12 | ```javascript 13 | describe('Facebook chat', () => { 14 | it('Notifies on new chat message', () => { 15 | const chatService = new chatService(); 16 | chatService.participants = getDisconnectedParticipants(); 17 | expect(chatService.sendMessage.bind({ message: 'Hi' })).to.throw(ConnectionError); 18 | }); 19 | }); 20 | ``` 21 |
22 | 23 |
24 | Typescript 25 | 26 | ```typescript 27 | describe('Facebook chat', () => { 28 | it('Notifies on new chat message', () => { 29 | const chatService = new chatService(); 30 | chatService.participants = getDisconnectedParticipants(); 31 | expect(chatService.sendMessage.bind({ message: 'Hi' })).to.throw(ConnectionError); 32 | }); 33 | }); 34 | ``` 35 |
36 | 37 | ### Code example: ensuring API returns the right HTTP error code 38 | 39 |
40 | Javascript 41 | 42 | ```javascript 43 | it('Creates new Facebook group', () => { 44 | const invalidGroupInfo = {}; 45 | return httpRequest({ 46 | method: 'POST', 47 | uri: 'facebook.com/api/groups', 48 | resolveWithFullResponse: true, 49 | body: invalidGroupInfo, 50 | json: true 51 | }).then((response) => { 52 | expect.fail('if we were to execute the code in this block, no error was thrown in the operation above') 53 | }).catch((response) => { 54 | expect(400).to.equal(response.statusCode); 55 | }); 56 | }); 57 | ``` 58 |
59 | 60 |
61 | Typescript 62 | 63 | ```typescript 64 | it('Creates new Facebook group', async () => { 65 | let invalidGroupInfo = {}; 66 | try { 67 | const response = await httpRequest({ 68 | method: 'POST', 69 | uri: 'facebook.com/api/groups', 70 | resolveWithFullResponse: true, 71 | body: invalidGroupInfo, 72 | json: true 73 | }) 74 | // if we were to execute the code in this block, no error was thrown in the operation above 75 | expect.fail('The request should have failed') 76 | } catch(response) { 77 | expect(400).to.equal(response.statusCode); 78 | } 79 | }); 80 | ``` 81 |
-------------------------------------------------------------------------------- /node-best-practices/sections/usematurelogger.md: -------------------------------------------------------------------------------- 1 | # Use a mature logger to increase error visibility 2 | 3 | ### One Paragraph Explainer 4 | 5 | We love console.log but a reputable and persistent logger like [Pino][pino] (a newer option focused on performance) is mandatory for serious projects. 6 | High-performance logging tools help identify errors and possible issues. Logging recommendations include: 7 | 8 | 1. Log frequently using different levels (debug, info, error). 9 | 2. When logging, provide contextual information as JSON objects. 10 | 3. Monitor and filter logs with a log querying API (built-in to many loggers) or log viewer software. 11 | 4. Expose and curate log statements with operational intelligence tools such as [Splunk][splunk]. 12 | 13 | [pino]: https://www.npmjs.com/package/pino 14 | [splunk]: https://www.splunk.com/ 15 | 16 | ### Code Example 17 | 18 | ```JavaScript 19 | const pino = require('pino'); 20 | 21 | // your centralized logger object 22 | const logger = pino(); 23 | 24 | // custom code somewhere using the logger 25 | logger.info({ anything: 'This is metadata' }, 'Test Log Message with some parameter %s', 'some parameter'); 26 | ``` 27 | 28 | ### Blog Quote: "Logger Requirements" 29 | 30 | From the StrongLoop blog ("Comparing Winston and Bunyan Node.js Logging" by Alex Corbatchev, Jun 24, 2014): 31 | 32 | > Let's identify a few requirements (for a logger): 33 | > 1. Timestamp each log line. This one is pretty self-explanatory – you should be able to tell when each log entry occurred. 34 | > 2. Logging format should be easily digestible by humans as well as machines. 35 | > 3. Allows for multiple configurable destination streams. For example, you might be writing trace logs to one file but when an error is encountered, write to the same file, then into error file and send an email at the same time. 36 | 37 | ### Where's Winston? 38 | 39 | For more information on why traditional favorites (e.g., Winston) may not be included in the current list of recommended best practices, please see [#684][#684]. 40 | 41 | [#684]: https://github.com/goldbergyoni/nodebestpractices/issues/684 42 | 43 | -------------------------------------------------------------------------------- /portfolios/developer-portfolios/readme.md: -------------------------------------------------------------------------------- 1 | # Awesome Portfolios 2 | 3 | This is a collection of awesome portfolios. I think portfolios are a great way of demonstrating skills and of showcasing your work, which is why I wanted to share a list of portfolios I've come across that either look stunning because of the work, but mostly because of the presentation. 4 | 5 | Obviously that's also a matter of taste, but I figure it would probably be interesting for different people of different industries to have a look at all of them. 6 | 7 | For some portfolios I've written a short blog post about them, including screen shots, so you can have a look at those too if you like. 8 | 9 | ## Creative Direction / Graphic Design / UI / UX 10 | 11 | - [Etcetera Design](https://etcetera.design/) 12 | - [Hannah Purmort](http://hannahpurmort.com) 13 | - [Kadir Inan](https://uix.me/) 14 | - [Rezo Zero](https://www.rezo-zero.com) 15 | - [Yul Moreau](http://y78.fr/) 16 | 17 | ## Development 18 | 19 | - [Claudia Reynders](http://mangamaui.com/) 20 | - [Jacek Jeznach](https://jacekjeznach.com/) 21 | - [Jake Albaugh](http://jakealbaugh.com/) 22 | 23 | ## Photography 24 | 25 | - [Jakob de Boer](http://jakobdeboer.com/) 26 | - [KNW Photo](https://www.knw.io) 27 | - [Mathias Sterner](http://www.mathiassterner.com/) 28 | - [Nordica Photography](http://nordicaphotography.com/) 29 | - [Thierry Ambraisse](http://www.hellothierry.com) 30 | - [Thomas Ciszewski](http://thomas-ciszewski-photography.com) 31 | 32 | ## Writer / Copywriter 33 | 34 | - [Joe Coleman](http://getcoleman.com/) 35 | - [Katrine Mehl](http://www.katrinemehl.com/) (DA) 36 | -------------------------------------------------------------------------------- /portfolios/developers-follow-codepen/generate.js: -------------------------------------------------------------------------------- 1 | // Thanks to jhey tompkins 2 | // This script is forked from https://github.com/jh3y/creatives-directory/blob/master/generate.js 3 | const codepenCoders = require('./codepen-coders') 4 | const fs = require('fs') 5 | const codepenUrl = 'https://codepen.io/' 6 | 7 | let markdown = ` 8 | # People You Should Follow on [CodePen](https://codepen.io/) 9 | 10 | > If you like SVG, Animation, Canvas, Interaction, WebGL, Three.js, Shader, GLSL, P5.js and Creative Code 11 | 12 | ## Demo or it didn't happen 13 | 14 | | CodePen Coder | Tags | 15 | | -------------- | ----- | 16 | ` 17 | for (const codepenCoder of codepenCoders.sort(Intl.Collator().compare)) { 18 | const tags = codepenCoder.tags.map(tag => `\`${tag}\``) 19 | markdown += `| [${codepenCoder.name}](${codepenUrl}${codepenCoder.codepen}) | ${tags.join(', ')} |\n` 20 | } 21 | 22 | markdown += ` 23 | ### Contributing 24 | 25 | 1. Add someone to \`directory.js\` 26 | 2. Run \`node generate.js\` to generate README.md file 27 | 3. Open a Pull Request 👍 28 | 29 | ------------------------ 30 | 31 | By [Joan León](https://joanleon.dev) | [@nucliweb](https://twitter.com/nucliweb) 32 | ` 33 | 34 | console.info('Markdown generated 😊') 35 | 36 | fs.writeFileSync(`${process.cwd()}/README.md`, markdown, 'utf-8') 37 | -------------------------------------------------------------------------------- /project-guidelines/images/api.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/project-guidelines/images/api.png -------------------------------------------------------------------------------- /project-guidelines/images/branching.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/project-guidelines/images/branching.png -------------------------------------------------------------------------------- /project-guidelines/images/code-style.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/project-guidelines/images/code-style.png -------------------------------------------------------------------------------- /project-guidelines/images/documentation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/project-guidelines/images/documentation.png -------------------------------------------------------------------------------- /project-guidelines/images/elsewhen-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/project-guidelines/images/elsewhen-logo.png -------------------------------------------------------------------------------- /project-guidelines/images/folder-tree.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/project-guidelines/images/folder-tree.png -------------------------------------------------------------------------------- /project-guidelines/images/git.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/project-guidelines/images/git.png -------------------------------------------------------------------------------- /project-guidelines/images/github.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/project-guidelines/images/github.png -------------------------------------------------------------------------------- /project-guidelines/images/laptop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/project-guidelines/images/laptop.png -------------------------------------------------------------------------------- /project-guidelines/images/licensing.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/project-guidelines/images/licensing.png -------------------------------------------------------------------------------- /project-guidelines/images/logging.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/project-guidelines/images/logging.png -------------------------------------------------------------------------------- /project-guidelines/images/logo.sample.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/project-guidelines/images/logo.sample.png -------------------------------------------------------------------------------- /project-guidelines/images/modules.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/project-guidelines/images/modules.png -------------------------------------------------------------------------------- /project-guidelines/images/testing.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/project-guidelines/images/testing.png -------------------------------------------------------------------------------- /react-Developer-roadmap/roadmap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/react-Developer-roadmap/roadmap.png -------------------------------------------------------------------------------- /react-for-everyone/images/rendering_multiple_js_elements.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/react-for-everyone/images/rendering_multiple_js_elements.png -------------------------------------------------------------------------------- /react-for-everyone/images/styling_all_jsx_elements.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/react-for-everyone/images/styling_all_jsx_elements.png -------------------------------------------------------------------------------- /react-for-everyone/images/styling_jsx_element.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/react-for-everyone/images/styling_jsx_element.png -------------------------------------------------------------------------------- /react-for-everyone/images/vue_popularity.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/react-for-everyone/images/vue_popularity.png -------------------------------------------------------------------------------- /resources-free-webdev/Free_resources.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/resources-free-webdev/Free_resources.png -------------------------------------------------------------------------------- /resources-free-webdev/readme.md: -------------------------------------------------------------------------------- 1 | Free Resources 2 | 3 | # Free Web Development and Design Resources 4 | 5 | ## Table of contents 6 | 7 | - [Free Resources Repos and Websites](#free-resources-repos-and-websites) 8 | 9 | - [Short Code Snippets](#short-code-snippets) 10 | 11 | 12 | # Free Resources Repos and Websites 13 | 14 | | **Repository / Websites** | **Description** | 15 | |:------------------------------------------------------------------------------------------------------------------ |:--------------------------------------------------------------------------------------------------------------------------- | 16 | | [Design resources for developers](https://github.com/bradtraversy/design-resources-for-developers) | Curated list of design and UI resources from stock photos, web templates, CSS frameworks, UI libraries, tools and much more | 17 | | [Public Apis](https://github.com/public-apis/public-apis) | A collective list of free APIs for use in software and web development. | 18 | | [Developer Roadmap](https://roadmap.sh/) | Step by step guides and paths to learn different tools or technologies | 19 | | [Developer Tools](https://dev.to/davidepacilio/50-free-tools-and-resources-to-create-awesome-user-interfaces-1c1b) | 50+ free tools and resources to create amazing UIs | 20 | | [Divjoy](https://divjoy.com/) | The React codebase generator | 21 | | [Webdev for you](https://www.webdevforyou.com/) | Visual web development made easy. | 22 | 23 | # Short Code Snippets 24 | 25 | | Websites | Description | 26 | | ------------------------------------------------------ | ---------------------------------------------------------------------- | 27 | | [One line of Code](https://1loc.dev/) | 187 Favorite JavaScript Utilities
in single line of code! No more! | 28 | | [30 seconds of code](https://www.30secondsofcode.org/) | Short code snippets for all your development needs | 29 | -------------------------------------------------------------------------------- /resources-webdev-free/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "awesome-free-stuff", 3 | "version": "1.0.0", 4 | "description": "List of free stuff", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": { 10 | "name": "Navjot Ahuja", 11 | "email": "navjotahuja92@gmail.com", 12 | "url": "navnote.com" 13 | }, 14 | "license": "ISC" 15 | } -------------------------------------------------------------------------------- /resources/readme2.md: -------------------------------------------------------------------------------- 1 | https://github.com/Uvacoder/resources 2 | -------------------------------------------------------------------------------- /rss-data-science-blogs/frequency.py: -------------------------------------------------------------------------------- 1 | # coding: utf-8 2 | from datetime import datetime, timedelta 3 | import feedparser 4 | import re 5 | import time 6 | 7 | readme = open('README.md').read() 8 | feeds = re.findall('\[\(RSS\)\] \((.*?)\)', readme) 9 | 10 | past_week = datetime.now() - timedelta(days=7) 11 | past_month = datetime.now() - timedelta(days=30) 12 | 13 | per_week = 0 14 | per_month = 0 15 | 16 | for url in feeds: 17 | data = feedparser.parse(url) 18 | for f in data.entries: 19 | try: 20 | dt = datetime.fromtimestamp(time.mktime(f.updated_parsed)) 21 | except Exception as err: 22 | print(err, url) 23 | break 24 | 25 | if dt >= past_week: 26 | per_week += 1 27 | 28 | if dt >= past_month: 29 | per_month += 1 30 | 31 | print('Blog post frequency (roughly): {} per week / {} per month.'.format(per_week, per_month)) 32 | -------------------------------------------------------------------------------- /rss-data-science-blogs/generate_opml.py: -------------------------------------------------------------------------------- 1 | import re 2 | import html 3 | 4 | xmlbody = """ 5 | 6 | 7 | 8 | Data science blogs 9 | 10 | 11 | 12 | {items} 13 | 14 | 15 | 16 | """ 17 | xmlitem = '' 19 | 20 | readme = open('README.md').read() 21 | blogs = re.findall('\* (.*?) http([s]{0,1})\:\/\/(.*?) \[\(RSS\)\]\((.*?)\)', readme) 22 | 23 | items = '' 24 | for blog in blogs: 25 | item = xmlitem.format(title=html.escape(blog[0].strip()), 26 | httpfeed='http{0}://{1}'.format(blog[1].strip(), blog[2].strip()), 27 | rssfeed=blog[3].strip()) 28 | items += '\t\t\t{}\r\n'.format(item) 29 | 30 | open('data-science.opml', 'w').write(xmlbody.format(items=items[0:-2])) 31 | -------------------------------------------------------------------------------- /tips-for-ppl-who-want-to-learn/5: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /vue-companies-Israel/Vue_products_of_Israel_Logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/vue-companies-Israel/Vue_products_of_Israel_Logo.png -------------------------------------------------------------------------------- /vue-companies-Israel/vue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/vue-companies-Israel/vue.png -------------------------------------------------------------------------------- /webdev-checklist/5: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /webdev-modern-spellbook/assets/6: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /webdev-modern-spellbook/assets/cover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/webdev-modern-spellbook/assets/cover.png -------------------------------------------------------------------------------- /webdev-modern-spellbook/assets/merlins_spell_book.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/webdev-modern-spellbook/assets/merlins_spell_book.jpg -------------------------------------------------------------------------------- /webdev-modern-spellbook/assets/showme.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvacoder/uva-tips-cheatsheets-collection/8b30365be0239d930e16b3430f494fe925fde803/webdev-modern-spellbook/assets/showme.jpg -------------------------------------------------------------------------------- /webdev-resources-denic/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Free Web Development Resources 8 | 9 | 10 | 11 | 12 | 13 | 16 |
Loading...
17 | 24 | 25 | 26 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /webdev-resources-denic/readme3.md: -------------------------------------------------------------------------------- 1 | https://github.com/markodenic/web-development-resources 2 | --------------------------------------------------------------------------------