Add 'resources.md'
This commit is contained in:
parent
078e8a003d
commit
ec502989d6
488
resources.md
Normal file
488
resources.md
Normal file
@ -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…
Reference in New Issue
Block a user