RICRO Dev Ops

Variety of scripts, procedures, and documentation used to create and maintain RICRO's tech environment.

List of Useful Tools

• Bundle Phobia: Estimates the size and impact of npm packages for a package.json file
• Can I Use: List of support for various HTML and CSS properties across all browser versions
• CloudConvert: Convert any file format to another file format
• Compress or Die: Optimize images for web usage
• Favicon Generator: Generate favicons for all app all browsers, technologies, and plateforms
• GitHub: Code hosting and version control
• HyperJS with Windows Unix Subsystem: Configuring Hyper.js with zsh on Windows 10 Linux Subsystem for Node.js development
• ICO converter: Converts PNG, JPG, GIF, BMP, etc. to .ico files
• JavaScript Event Keycodes: Character keycodes for keyboard button presses
• RealFaviconGenerator: The ultimate favicon generator. Design your icons platform per platform and make them look great, everywhere.
• Regex Tester Test regular expressions for validity and accuracy
• Web Code Tools: Generate HTML meta tags for various objects (eg buisness, book, place, etc)

List of Design Websites

• Bootstrap: Bootstrap is an open source toolkit for developing with HTML, CSS, and JS.
• Hue, Saturation, and Light Color Codes: Demonstrates the hue, saturation, and light (HSL) representation of color of the form hsl(H, S%, L%)
• Material Design: Web and app design guidelines by Google
• Material Design Palette: Generates a color palette based on the selection of primary and secondary colors. Color options are standard Material Design colors.
• Material UI: ReactJS framework implementaiton of Material Design (aka MUI)

Icon Packs

• Font Awesome
• Material Design Icons (Google)
• Material Design Icons (@templarian)

Stock Images

• Unsplash: Royalty and copyright free high quality stock images
• Onepixel: Low cost stock photos. No subscription. No minimum. Just $1 per photo.

Training and Reference

• Codecademy: "Online classroom" with various courses on many types of technology such as HTML/CSS, JavaScript, SQL, etc.
• DevDocs: DevDocs combines multiple API documentations in a fast, organized, and searchable interface.
• egghead.io: Learn the best JavaScript tools and frameworks from industry pros. Video tutorials for badass web developers.
• Front End Developer Handbook: This is a guide that everyone can use to learn about the practice of front-end development. It broadly outlines and discusses the practice of front-end engineering: how to learn it and what tools are used when practicing it in 2019.
• Google Developers for Web: Best practices and other tools for fundamental and advanced web development.
• Git Docs: Documentation for Git.
• Learn Git: Resources to learn the version control Git.
• SVG on the Web: A Practical Guide to the usage of SVG in web environments.
• SEO Cheat Sheet: Various tools and explanations of web-based concepts related to Search Engine Optimization.
• Testing JavaScript: Learn the smart, efficient way to test any JavaScript application.
• Web Developer Roadmap: A set of charts demonstrating the paths that you can take and the technologies that you would want to adopt in order to become a frontend, backend or a devops.
• Wes Bos: Variety of free and paid web development courses.

Suggested Course Path for a beginner

1. Document, Document, DOCUMENT EVERYTHING
2. Learn HTML
3. Learn CSS
4. Make a Website
5. Learn Color Design
6. Learn Responsive Design
7. Learn Git
8. MarkDown
9. Intro to JavaScript
10. Intro to jQuery
11. Learn ReactJS I
12. Learn ReactJS II
13. Learn SQL
14. Learn SASS (aka SCSS)
15. What the Flexbox?!
16. JavaScript30
17. Learn the Command Line
18. Command Line Power User