From ec502989d6bf5d083461e95cff0ab23c1ff9ed8d Mon Sep 17 00:00:00 2001 From: JoanaChicau Date: Tue, 30 Aug 2022 16:30:57 +0200 Subject: [PATCH] Add 'resources.md' --- resources.md | 488 +++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 488 insertions(+) create mode 100644 resources.md diff --git a/resources.md b/resources.md new file mode 100644 index 0000000..04b9056 --- /dev/null +++ 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/) \ No newline at end of file