Skip to content

jess-alejo/dev-resources

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

134 Commits
html
html
 
 
css
css
 
 
docker
docker
 
 
javascript
javascript
 
 
linux
linux
 
 
rspec
rspec
 
 
ruby
ruby
 
 
self_improvement
self_improvement
 
 
README.md
README.md
 
 

Repository files navigation

Resources For Developers

C#

CDN

  • cdnjs - a free and open-source CDN service powered by Cloudflare for faster and easier loading of library files on your websites.

Coding Challenges | Games

  • Codewars - a community of developers, who are called Code Warriors (or just warriors), that train on improving their development skills.
  • CSS Diner - a fun game to help you learn and practice CSS selectors.
  • Flexbox Froggy - a game where you help Froggy and friends by writing CSS code.
  • Flexbox playground - a super cool pen which shows and lets you play with almost everything in flexbox.
  • Flexbox Zombies - a brand new training course driven by a storyline where you use Flexbox and a crossbow to hunt zombies.
  • Grid Garden - a game for learning CSS grid layout

CSS

Animations

  • Animate.css - a library of ready-to-use, cross-browser animations for use in your web projects. Great for emphasis, home pages, sliders, and attention-guiding hints.
  • Animista - a CSS animation library where you can play with a collection of ready-made CSS animations.
  • Easing Functions Cheat Sheet - a collection of easings (timing functions).
  • loading.io - loading icons and animation generator
  • Keyframes.app - visual tool to help generate CSS with animations for your project.

CSS Generators

  • Buttons Generator - 100+ buttons you can use in your project.
  • Color Hex - an easy to use tool to get the color codes information including color models (RGB,HSL,HSV and CMYK), CSS and html color codes.
  • Color Scheme Designer 3 - a designer tool for creating color combinations that work together well.
  • Coolors - generate or browse beautiful color combinations for your designs.
  • CSS Accordion Slider Generator - create fully responsive, CSS-only accordion sliders.
  • CSS Gradient - lets you create a colorful gradient background.
  • CSS Grid Generator - you can set the numbers, and units of your columns and rows, and I'll generate a CSS grid for you!
  • CSS Stripes Generator - pure CSS stripes generator you can use for backgrounds.
  • cubic-bezier - a playground that helps you create your custom cubic bezier functions.
  • Fancy Border Radius Generator - build organic shapes with a CSS3 border-radius.
  • Get Waves - a free SVG wave generator to make unique SVG waves for your next web design.
  • Glass Morphism CSS Generator - create stunning glass effect for your UI designs.
  • Gradient Generator by Josh Comeau, build beautiful, lush gradients.
  • Hero Patterns - a collection of repeatable SVG background patterns for you to use on your web projects.
  • Layout Generator - quickly design web layouts, and get HTML and CSS code. Learn CSS Grid visually.
  • Neumorphism - CSS code generator that will help with colors, gradients, and shadows to adopt this new design trend or discover its posibilities.
  • Patternify - lets you create background patterns for free
  • Shadow Palette Generator - create lush realistic shadows in CSS.

Frameworks

  • Milligram - A minimalist CSS framework
  • Tailwind Toolbox - Open source starter templates and components, a directory of handy building kits, generators, plugins and useful tools to kick start your Tailwind CSS project

Other CSS Resources

  • CSS-Tricks - daily articles about CSS, HTML, JavaScript, and all things related to web design and development.
  • Sass - Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.

Emet

Fonts

  • GoogleFonts - Making the web more beautiful, fast, and open through great typography
  • Type Scale - A Visual Calculator - Preview and choose the right type scale for your project. Experiment with font size, scale and different webfonts.

Free

  • Awesome - awesome lists about all kinds of interesting topics
  • free-for.dev - This is a list of software (SaaS, PaaS, IaaS, etc.) and other offerings that have free tiers for developers.
  • The Valley of Code - Free Handbooks for Web Developers
  • Web Skills - A visual overview of useful skills to learn as a web developer

Git

Heroku Alternative

  • cyclic - Fullstack Javascript Apps - Deploy and Host in Seconds
  • Railway - Railway is an infrastructure platform where you can provision infrastructure, develop with that infrastructure locally, and then deploy to the cloud.
  • render - Cloud Application Hosting for Developers | Render

HTML

  • Formspree - a form backend, API and email service for HTML forms. It is the simplest way to embed custom contact us forms, order forms, or email capture forms.
  • Responsive Image Breakpoints Generator - Easily generate the optimal responsive image dimensions

HTTP

Icons

  • Flaticon - free icons in the largest database of free vector icons
  • The Noun Project - Noun Project features the most diverse collection of icons and stock photos ever. Download SVG and PNG. Browse over 3 million art-quality icons and photos.

Images

  • Pexels - Free stock photos you can use everywhere. âś“ Free for commercial use âś“ No attribution required.
  • Unsplash - Beautiful, free images and photos that you can download and use for any project.

UI Inspirations

  • Awwwards - website awards, best web design trends
  • Behance - creative network for showcasing and discovering creative work
  • Dribbble - where designers gain inspiration, feedback, community, and jobs

JavaScript

Blogs

Docs

Learning Platforms

Free Hosting

Coding Challenges

Freelancing

JavaScript Chart Libraries

  • Chartist.js - Simple responsive charts
  • FusionCharts - JavaScript charts for web & mobile
  • Dygraphs - dygraphs is a fast, flexible open source JavaScript charting library.
  • Chart.js - an easy way to include animated, interactive graphs on your website for free.
  • Highcharts - Interactive JavaScript charts for your webpage
  • D3.js - is a JavaScript library for manipulating documents based on data.
  • n3-charts - JavaScript library for creating beautiful charts in AngularJS applications and it is built on top of D3.js
  • Ember Charts - A charting library built with the Ember.js and d3.js frameworks.
  • Sigma.js - a JavaScript library dedicated to graph drawing.
  • Morris.js - good-looking charts shouldn't be difficult
  • Cytoscape.js - allows you to easily display and manipulate rich, interactive graphs.
  • Rickshaw - an open-source JavaScript toolkit for creating interactive time-series graphs and charts.
  • Plottable.js - a library of chart components for creating flexible, custom charts for websites.
  • Canvas.js - JavaScript Charting Library with 10x better performance & a simple API.

JavaScript Games

Learning Platform | Online Courses

Linux

Motivation

NGINX

Online Editor

  • CodePen - an online code editor and front end web developer community

Performance Optimization

  • JPEG Optimizer - Compress and Resize Your Digital Photos
  • TinyPNG - Compress WebP, PNG and JPEG images intelligently
  • PageSpeed Insights - Make your web pages fast on all devices
  • WebPageTest - Run a free website speed test from around the globe using real browsers at consumer connection speeds with detailed optimization recommendations.

Ruby

Reading Recommendation

cto Witczax

Pick one of these:

  • 2022 - Ruby On Rails Tutorial - Michael Hartl
  • 2019 - The Well-Grounded Rubyist (3rd edition) - David A. Black / Joseph Leo III
  • 2014 - Learn Ruby the Hard Way (3rd edition) - Zed A.Shaw
  • 2013 - Programming Ruby 1.9 & 2.0 (The Pragmatic Programmer's Guide) - Dave Thomas

Learn Rails:

  • 2022 - Agile Web Development with Rails 7 - Sam Ruby with Dave Thomas
  • 2020 - Sustainable Web Development with Ruby on Rails - David Bryant Copeland
  • 2022 - Modern Front-End Development for Rails (2nd edition) | Hotwire, Stimulus, Turbo, and React - Noel Rapping

Learn Best Practices:

  • 2013 - Confident Ruby - Avdi Grimm
  • 2011 - Exceptional Ruby - Avdi Grimm
  • 2007 - Design Patterns in Ruby - Russ Olsen
  • 2021 - 99 Bottles of OOP
  • 2009 - Refactoring (Ruby Edition)
  • 2009 - Ruby Best Practices
  • 2021 - Polished Ruby Programming
  • 2018 - Practical Object-Orientted Design - Sandi Metz
  • 2014 - Effective Ruby

Testing:

  • 2022 - The Complete Guide to Rails Testing - Json Swett
  • 2019 - Rails 5 Test Prescriptions
  • 2017 - Effective Testing with RSpec 3

Optional - go deeper:

  • 2015 - Text Processing with Ruby
  • 2015 - Ruby Performance Optimization
  • 2014 - Metaprogramming Ruby 2
  • 2013 - Ruby Under a Microscope
  • 2013 - Understanding Computation
  • 2013 - Kestrels, Quirky Birds, and Hopeless Egocentricity

Deployment:

  • 2022 - Deployment from Scratch
  • 2019 - Docker for Rails Developers

Security:

Ruby Blogs

Style Guides

Ruby Utilities

  • Rubular - A Ruby-based regular expression editor

Ruby on Rails

Authentication

Deployment

General Topics

Testing

  • Learn Ruby on Rails Testing - learn about Ruby on Rails testing through articles, videos and podcast episodes.
  • Test Driven Rails - Learn Test-Driven Rails Development using RSpec and Capybara in this series of tutorials. As part of the course, you can follow along with Josh as he lets his test drive through each of the steps needed to build out an application.

Tutorials

Security

SSH

SSH Keys

Style Guides for various Languages

Testing

UI/UX

VS Code Extensions

gem install solargraph
gem install ruby-debug-ide
gem install rubocop

WSL

YouTube | Free Videos

Worth Investing

  • CSS for JS - The all-new interactive learning experience designed to help JavaScript developers become confident with CSS.

About

Blogs, tutorials and resources for developers

Resources

Readme
Activity

Stars

0 stars

Watchers

2 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published