JoanaChicau
/
web-dev-studio
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Add 'resources.md'

master
JoanaChicau 2 years ago
parent
078e8a003d
commit
ec502989d6
1 changed files with 488 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 488
      resources.md

488
resources.md
View 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/)
Write Preview
Loading…
Cancel
Save