Add 'resources.md'

2 years ago · ec502989d6
1 changed files with 488 additions and 0 deletions
--- a/resources.md
+++ b/resources.md
@ -0,0 +1,488 @@
+Find here a growing collection of links collected by [Joana Chicau](https://joanachicau.com/about.html):
+
+## SOURCE CODE EDITORS (very shortlist)
+
+* [Sublime Text](https://www.sublimetext.com/3)
+
+* [Visual Code Studio](https://code.visualstudio.com/)
+
+#### Remote Collaborative Code Environments
+
+* [Live Share - Visual Code Studio](https://code.visualstudio.com/learn/collaboration/live-share)
+
+* [Radicle is a peer-to-peer stack for building software together](https://radicle.xyz/)
+
+* [Shared Collaborative Online Tool](https://syncfiddle.net/)
+
+* [Glitch Teams](https://glitch.com/teams)
+
+* [Live Weave — Team Up](https://liveweave.com/)
+
+
+## WEB CONSOLE:
+
+* [Guide to Console Commands](https://css-tricks.com/a-guide-to-console-commands/)
+
+## WEB PROTOCOLS (www and HTPS) and STANDARDS:
+
+* [How does the Internet work?](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/How_does_the_Internet_work);
+
+* [w3 History](https://www.w3.org/History.html)
+
+* [Web Glossaries](https://developer.mozilla.org/en-US/docs/Glossary)
+
+* [Fighting phishing browser — HTTPS and SSL certificates](https://simplysecure.org/blog/fighting-phishing-browser)
+
+* [Domain Games: Pseudonymity, anonymity and linkability](https://exposingtheinvisible.org/en/guides/domain-games/)
+
+* [Behind Data — Metadata](https://exposingtheinvisible.org/en/guides/behind-the-data-metadata-investigations/)
+
+* [Who makes the standards?](http://reader.lgru.net/texts/who-makes-standards/)
+
+* [Screen Sizes](https://screensiz.es/)
+
+## WEB Hosting
+
+* [About Hosting](https://learningwebdesign.com/articles/LWD5_Hosting.pdf);
+
+* [GitHub Pages](https://pages.github.com/) and more info on [how to set it up on Github](https://gist.github.com/TylerFisher/6127328);
+
+* [Green Energy Run UK Web Host](https://www.green-hosting.co.uk/);
+
+* [Radical Servers](https://riseup.net/en/security/resources/radical-servers);
+
+**WEB Publishing Alternatives:**
+
+* [HotGlue](https://hotglue.me/)
+
+* [BLOT](https://blot.im/)
+
+* [SmallVictories](https://www.smallvictori.es/)
+
+
+## HTML
+
+* [w3schools Basic Intro HTML](https://www.w3schools.com/html/html_basic.asp);
+
+* [Intro to HTML Document and website structure](https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure)
+
+* [Basic Web Page — sum up](https://www.internetingishard.com/html-and-css/basic-web-pages/);
+
+* [What’s in the head? Metadata in HTML](https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML);
+
+* [Semantic HTML and Document Outline](https://www.internetingishard.com/html-and-css/semantic-html/);
+
+* [HTML Semantic Elements (header, nav, section, footer..)](https://www.w3schools.com/html/html5_semantic_elements.asp);
+
+* [Special Characters List](https://dev.w3.org/html5/html-author/charref);
+
+* [Image Formats, Image as Links and More](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Img);
+
+* [Video Formats](https://www.w3schools.com/html/html5_video.asp);
+
+* [Audio Formats](https://www.w3schools.com/html/html5_audio.asp);
+
+* [More detailed information on adding video and audio content](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content);
+
+* [Difference between ID and Classes](https://css-tricks.com/the-difference-between-id-and-class/);
+
+* [Create Links](https://www.w3schools.com/tags/tag_a.asp);
+
+* [Validator](http://validator.w3.org/);
+
+* [A basic HTML Cheatsheet](https://developer.mozilla.org/en-US/docs/Learn/HTML/Cheatsheet);
+
+* [HTML CheatSheet extensive reference list](https://html.com/wp-content/uploads/html-cheat-sheet.pdf) - notice that the markup language may change so this PDF is not future proof ;)
+
+## CSS
+
+* [Hello CSS](https://www.internetingishard.com/html-and-css/hello-css/);
+
+* [CSS reset](https://necolas.github.io/normalize.css/)
+
+* [CSS Units](https://www.w3schools.com/CSSref/css_units.asp)
+
+* [Font Formats](https://www.w3schools.com/css/css3_fonts.asp)
+
+* [Box Model](https://www.internetingishard.com/html-and-css/css-box-model/)
+
+* [FlexBox](https://www.internetingishard.com/html-and-css/flexbox/)
+
+* [Positioning Elements](https://www.internetingishard.com/html-and-css/advanced-positioning/)
+
+* [Z Index](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index)
+
+* [Selectors](https://www.w3schools.com/cssref/css_selectors.asp)
+
+* [Prefixes](https://css-tricks.com/how-to-deal-with-vendor-prefixes/)
+
+* [Grid](https://css-tricks.com/snippets/css/complete-guide-grid/)
+
+* [Grid Layouts Examples](https://gridbyexample.com/examples/)
+
+* [CSS Grid Garden](https://cssgridgarden.com/)
+
+* [CSS Cheatsheet](https://cssauthor.com/html-and-css-cheat-sheets/#HTML)
+
+* [CSS Validator](http://jigsaw.w3.org/css-validator/);
+
+* [CSS Patterns](https://projects.verou.me/css3patterns/);
+
+### Animations
+
+* [Animate CSS Library](https://animate.style/)
+
+* [Animatable CSS Library](https://projects.verou.me/animatable/)
+
+* [Web Effects CSS and Libraries](https://github.com/lindelof/awesome-web-effect)
+
+* [More CSS Animation Galleries](https://css-tricks.com/css-animation-libraries/)
+
+## Canvas
+
+* [W3 Canvas Drawing + JS Animations](https://www.w3schools.com/html/html5_canvas.asp)
+
+* [Moz Canvas Drawing](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations)
+
+* [HTML 5 Canvas Video Tutorial](https://www.youtube.com/watch?v=EO6OkltgudE&list=PLpPnRKq7eNW3We9VdCfx9fprhqXHwTPXL) 
+
+### Web Design
+
+* [Design + Development: exploring collaborations in code](https://www.designsystems.com/)
+
+### Media Queries and Responsiveness
+
+* [Responsive Layout Design]( https://www.internetingishard.com/html-and-css/responsive-design/)
+
+* [Responsive Images](https://www.internetingishard.com/html-and-css/responsive-images/)
+
+* [Responsive Design Podcast](https://responsivedesign.is/)
+
+* [Media Queries](https://mediaqueri.es/)
+
+* [Summary CSS Media Queries](https://css-tricks.com/css-media-queries/)
+
+
+## HTML Boilerplate examples
+
+* [HTML5 Boilerplate - mobile-friendly HTML template](https://html5boilerplate.com/)
+
+* [Skeleton - responsive boilerplates](http://getskeleton.com/)
+
+
+## WEB TO PRINT
+
+* [Basic CSS Print Media Query tutorial](http://edutechwiki.unige.ch/en/CSS_for_print_tutorial)
+
+* [Print CSS](https://print-css.rocks/)
+
+* [Advanced CSS @Page rule tutorial](https://www.smashingmagazine.com/2015/01/designing-for-print-with-css/)
+
+* [Pre-Post-Print](https://prepostprint.org/resources/);
+
+* [pdfkit](https://pdfkit.org/docs/getting_started.html);
+
+* [e-flux journal](https://www.e-flux.com/)[layout-generator](http://adamflorin.work/posts/e-flux-journal-layout-generator/#more-87); by developer [Adam Florin](https://github.com/adamflorin/prawn) — > [Prawn pdf project](https://github.com/prawnpdf/prawn);
+
+
+
+## WEB FONTS
+
+* [On Web Typography](http://webtypography.net/);
+
+* [Practical Typography](https://practicaltypography.com/)
+
+* [Free Fonts](http://www.designwritingresearch.org/free_fonts.html);
+
+* [By Womxn](https://www.design-research.be/by-womxn/);
+
+* [Use Modify](https://usemodify.com/);
+
+* [Manufactura Independente](http://manufacturaindependente.org/);
+
+
+
+
+## ICONS 
+
+* [Embed Links to Icon Libraries: Font Awesome, Bootstrap ...](https://www.bootstrapcdn.com);
+
+* [Font Awesome](https://fontawesome.com/icons?d=gallery);
+
+* [Material API](https://material.io/resources/icons/?style=baseline);
+
+* [The Noun Project](https://thenounproject.com/);
+
+* [Maki Icons](https://labs.mapbox.com/maki-icons/)
+
+* [Animated web icons](https://lordicon.com/);
+
+* [Emojis](https://www.joypixels.com/emoji);
+
+* [Customizable free SVG icons](https://tablericons.com/);
+
+* [Animated Icons Library](https://lordicon.com/icons);
+
+
+## COLOURS
+
+* [Advanced Colorful Goodies](https://www.colorzilla.com/)
+
+* [Brand Colors](https://brandcolors.net/)
+
+* [Mesh Gradients](https://products.ls.graphics/mesh-gradients/)
+
+* [0to255](https://www.0to255.com)
+
+
+
+## JavaScript
+
+* [Tutorials](https://javascript.info/)
+
+* [Awesome JS — list of resources](https://github.com/sorrycc/awesome-javascript)
+
+* [List of JS Libraries](https://libraries.io/)
+
+
+## Javascript Libraries
+
+* [jQuery](https://jquery.com/)
+
+* [jQuery UI](https://jqueryui.com/)
+
+* [Paper.js](http://paperjs.org/)
+
+* [Fabric.js](http://fabricjs.com/demos/)
+
+* [Three.js](https://threejs.org/)
+
+* [babylonjs](https://www.babylonjs.com/)
+
+* [D3.js - Data Driven Documents and Animated Info-graphics](https://d3js.org/);
+
+* [Moving Letters](https://tobiasahlin.com/moving-letters/)
+
+* [Textillate](https://textillate.js.org/)
+
+* [Anime.js](https://animejs.com/)
+
+
+#### JS GAMING Libraries
+
+* [List of Javascript Game Engines](https://github.com/collections/javascript-game-engines)
+
+#### WebVR
+
+* [WEB VR info developers](https://webvr.info/developers/)
+
+* [Frame.io](https://aframe.io/)
+
+* [Mozilla Hubs for Developers](https://hubs.mozilla.com/docs/hubs-cloud-enable-media-browser.html)
+
+## CMS (Content Management Systems) 
+
+_open source examples shortlist_
+
+* [Flat file CMS](http://picocms.org/)
+
+* [GrapesJS — multi-purpose Web Builder Framework](https://grapesjs.com/)
+
+* [Bolt + PHP-based Symfony framework](https://boltcms.io/)
+
+* [Microweber — drag and drop website builder and CMS](https://microweber.org/)
+
+* [WYSIWYG CMS](https://www.boomcms.net/boom-boom)
+
+### Database-driven CMS examples
+
+
+* [Fork](https://www.fork-cms.com/)
+
+* [WordPress Setting Up Custom Themes](https://wordpress.com/support/themes/uploading-setting-up-custom-themes/)
+
+* [Bones – An HTML5, Mobile-First starter theme for rapid WordPress development](https://themble.com/bones/)
+
+* [Underscores —  ultra-minimal CSS starter theme for WordPress](https://underscores.me/)
+
+* [MediaWiki](https://www.mediawiki.org/wiki/Manual:What_is_MediaWiki%3F)
+
+* [How to start a Wiki](https://www.wikihow.com/Start-a-Wiki)
+
+* [Intro to Semantic MediaWiki](https://www.youtube.com/watch?v=1WYaXAoPesA&list=PLw2YgbWET_ph1IGqIyiZD8w9FIHlYASui)
+
+
+_other examples_
+
+* [MongoDB](https://www.mongodb.com/2)
+
+* [Readymag - browser based design tools](https://readymag.com/)
+
+
+
+### Editors examples
+
+
+* [Editor.JS](https://editorjs.io/)
+
+* [Tiny Cloud — WYSIWYG editor JS library](https://www.tiny.cloud/)
+
+* [TinyMCE — customizable text editor](https://www.tiny.cloud/)
+
+
+
+## SSG (Static Site Generators) 
+
+* [SSG comparison cheatsheet 2020](https://uploads-ssl.webflow.com/5a2e8a9f7cc425000195064c/5f47cbc56b60ce6300cf076c_ample-blog-tl-development-ssg-comparison-cheatsheet.pdf)
+
+* [Jekkyl](https://jekyllrb.com/docs/installation/)
+* [Jekkyl + GitHub](https://docs.github.com/en/enterprise/2.14/user/articles/setting-up-your-github-pages-site-locally-with-jekyll)
+
+* [PELICAN](https://blog.getpelican.com/)
+
+* [HUGO](https://gohugo.io/)
+
+
+## Front-End Frameworks 
+_for building websites and applications (free open source)_
+
+
+* [Bootstrap](https://getbootstrap.com/) 
+
+* [React-Bootstrap](https://react-bootstrap.github.io/)
+
+* [Vue](https://vuejs.org/); 
+
+* [Bootstrap-Vue](https://bootstrap-vue.org/play)
+
+* [React](https://reactjs.org/);
+
+* [React Native — focus on mobile](https://en.wikipedia.org/wiki/React_Native)
+
+* [Angular](https://angularjs.org/) + [W3 ref.](https://www.w3schools.com/angular/);
+
+* [Gatsby](https://www.gatsbyjs.com/docs/quick-start/)
+
+* [List of SSG and Frameworks](https://jamstack.org/generators/)
+
+
+## E-commerce (just a few examples)
+
+* [BEP — an ecommerce platform with no backend](https://bep.life/)
+
+* [BELUGA.JS open source React + Node](https://belugajs.com/)
+
+* [MiniCart](https://github.com/jeffharrell/MiniCart)
+
+
+## APIs (Application Programming Interfaces)
+
+
+* [List of public API's](https://any-api.com/)
+
+* [Introduction to Populating a Website with API Data - Use Case](https://programminghistorian.org/en/lessons/introduction-to-populating-a-website-with-api-data)
+
+
+## CROSS BROWSER (in)-compatibility;
+
+* [Can I use?](https://caniuse.com/);
+
+* [Browser Hacks](http://browserhacks.com/);
+
+
+## UX Design & Prototyping & Usability Testing
+
+* [Prototyping Tools](https://prototypr.io/prototyping-tools/)
+
+* [UX mag](https://uxmag.com/);
+
+* [Laws of UX](https://lawsofux.com/);
+
+* [Resources and Techniques](https://uxmastery.com/resources/techniques/);
+
+* [Design Method Toolkit](https://toolkits.dss.cloud/design/);
+
+* [Wireframing](https://webdesign.tutsplus.com/articles/a-beginners-guide-to-wireframing--webdesign-7399)
+
+* [Paper prototyping](https://alistapart.com/article/paperprototyping/)
+
+* [Design Systems](https://www.designsystems.com/)
+
+## Accessibility links:
+
+* [Checklist — The Web Content Accessibility Guidelines (WCAG) ](https://www.a11yproject.com/checklist/)
+
+* [WAVE Web Accessibility Evaluation Tool](https://wave.webaim.org/)
+
+* [Easy Checks – A First Review of Web Accessibility](https://www.w3.org/WAI/test-evaluate/preliminary/);
+
+* [Web Accessibility Statement](https://www.slideroom.com/accessibility-statement/);
+
+* [Designing for Web Accessibility](https://www.w3.org/WAI/tips/designing);
+
+* [Inclusive Designs](https://automattic.design/inclusive/#designs)
+
+* [Color Filter](https://www.toptal.com/designers/colorfilter);
+
+* [The Lenses of Accessibility](https://www.smashingmagazine.com/2018/04/designing-accessibility-inclusion/)
+
+* [Accessible Web Animation](https://css-tricks.com/accessible-web-animation-the-wcag-on-animation-explained/)
+
+* [Web Dev Accessibility](https://wiki.documentfoundation.org/Development/Accessibility)
+
+* [Accessible Website Design for Blind](https://www.hobo-web.co.uk/design-website-for-blind/#accessible-website-design)
+
+* [Collection Web accessibility](https://github.com/collections/web-accessibility);
+
+* [GOV.UK accessibility guidance](https://www.gov.uk/guidance/accessibility-requirements-for-public-sector-websites-and-apps)
+
+
+### 'Sustainable' Web Dev
+
+_Tools_
+
+* [Calculating Digital Emissions](https://sustainablewebdesign.org/calculating-digital-emissions/)
+* [Ecograder](https://ecograder.com/)
+* [Website Footprint](https://www.website-footprint.com/en/)
+
+_Design Resources_
+
+* [Lowtechmag WebDesign](https://github.com/lowtechmag/solar/wiki/Solar-Web-Design)
+* [BBC planet 4 Design System](https://p4-designsystem.greenpeace.org/05f6e9516/p/76cd7b-planet-4-design-system)
+* [w3 Community SustyWeb](https://www.w3.org/community/sustyweb/)
+* [Sustainable Digital Design](https://sustainabledigitaldesign.com/)
+
+
+_Optimizing for Web Sustainability_
+
+* [Image srcset](https://www.w3schools.com/TAgs/att_source_srcset.asp)
+* [Web Fonts](https://www.w3schools.com/cssref/css_websafe_fonts.asp)
+* [WOFF2](https://developer.mozilla.org/en-US/docs/Web/Guide/WOFF)
+* [Webfont Generator](https://www.fontsquirrel.com/tools/webfont-generator)
+* [Variable Fonts](https://v-fonts.com/)
+* [Subsetting fonts](https://everythingfonts.com/subsetter)
+
+
+## SEO
+
+* [SEO Resources](https://github.com/IDMNYU/web-studio-FA15/blob/master/resources/ws1fa15_seo_resources.md)
+
+
+## Licenses
+
+* [Open Source Licenses](https://choosealicense.com/)
+
+* [Licenses on Github](https://docs.github.com/en/enterprise-server@2.22/rest/reference/licenses#get-all-commonly-used-licenses )
+
+* [Not for Any* A toolkit on Open Source Licenses](https://varia.zone/not-for-any/)
+
+## Miscellaneous ✨
+
+* [Open source, experimental, and tiny tools roundup](https://tinytools.directory/)
+
+- - -
+***
+
+
+And many more tools..
+[Find Open Source By Searching, Browsing and Combining 7,000 Topics Across 59 Categories And 346,452 Projects](https://awesomeopensource.com/)