Browse Source

Add 'resources.md'

master
JoanaChicau 2 years ago
parent
commit
ec502989d6
  1. 488
      resources.md

488
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/)
Loading…
Cancel
Save