DEV Community

Cristian Fernando
Cristian Fernando

Posted on • Updated on

7 repositorios de desarrollo web que debes conocer

Índice

  1. ryanmcdermott/clean-code-javascript
  2. codingknite/frontend-development
  3. goldbergyoni/nodebestpractices
  4. paolocarrasco/javascript-style-guide
  5. thedaviddias/Front-End-Checklist
  6. gothinkster/realworld
  7. trekhleb/javascript-algorithms

1. ryanmcdermott/clean-code-javascript

Este repo enseña cómo aplicar buenas practicas al código que escribimos basado en el famoso libro de Robert C. Martin, Clean Code. Lo interesante es que no debes haber leído el libro, el repo resume los principales aspectos del mismo enfocado desde un punto de vista práctico. Algunos de los puntos que toca son:

  • Como declarar variables con buenas practicas
  • Funciones
  • Objetos y estrucuras de datos en JavaScript
  • Principios SOLID Bastante recomendable.

GitHub logo ryanmcdermott / clean-code-javascript

🛁 Clean Code concepts adapted for JavaScript

clean-code-javascript

Table of Contents

  1. Introduction
  2. Variables
  3. Functions
  4. Objects and Data Structures
  5. Classes
  6. SOLID
  7. Testing
  8. Concurrency
  9. Error Handling
  10. Formatting
  11. Comments
  12. Translation

Introduction

Humorous image of software quality estimation as a count of how many expletives you shout when reading code

Software engineering principles, from Robert C. Martin's book Clean Code adapted for JavaScript. This is not a style guide. It's a guide to producing readable, reusable, and refactorable software in JavaScript.

Not every principle herein has to be strictly followed, and even fewer will be universally agreed upon. These are guidelines and nothing more, but they are ones codified over many years of collective experience by the authors of Clean Code.

Our craft of software engineering is just a bit over 50 years old, and we are still learning a lot. When software architecture is as old as architecture itself, maybe then we will have harder rules to follow. For now, let these guidelines serve as a touchstone by which to assess the quality of the JavaScript…

2. codingknite/frontend-development

Este repositorio está enfocado en compartir recursos de desarrollo web, (la mayoría en inglés) desde conceptos de HTML, CSS y JavaScript, hasta Git, React, Vue, optimización de código, etc., toda esta información compartida como libros, blogs, canales de youtube. Vale la pena darle un vistazo.

GitHub logo codingknite / frontend-development

A curated list of resources for Frontend development

Banner

Introduction

Follow me

This is a collection of resources for Frontend development.

Most of the resources are free but we also included paid resources.

Resources labelled with 💵 indicate that the resource is a paid resource.

If you're just starting, you DON'T need to use every resource on this list. It is practically impossible. Use this as a reference. It is not a guide.

Contibuting

We Invite as many contributions as possible.

If you know of a resource that would be a great addition to this list, feel free to make a contribution.

Be sure to read How To Contribute

Table of Contents

  1. How The Internet Works
  2. HTML
  3. CSS
  4. JavaScript
  5. Git
  6. React
  7. Vue
  8. Browser Extensions
  9. Icons
  10. Fonts and Typography
  11. Illustrations
  12. Optimization
  13. Color Inspiration
  14. Images and Videos
  15. Hosting Sites
  16. Design Inspiration
  17. Portfolio Inspiration
  18. Youtube Channels
  19. Podcasts
  20. Blogs
  21. Interview Prep
  22. Newsletters
  23. Contributing

How the Internet Works

Documentation

3. goldbergyoni/nodebestpractices

¿Te gusta el backend con JS? ¡Este repositorio es para ti! Recopila buenas prácticas de desarrollo del lado del servidor con Node.js

GitHub logo goldbergyoni / nodebestpractices

✅ The Node.js best practices list (June 2022)

Node.js Best Practices

Node.js Best Practices


102 items Last update: June 18, 2022 Updated for Node 14.0.0

Follow us on Twitter! @nodepractices


Read in a different language: CNCN, FRFR, BRBR, RURU, PLPL, JAJA, EUEU (ESES, HEHE, KRKR and TRTR in progress! )


Special workshop in Verona next week 🇮🇹 - Node.js testing - beyond the basics. Tickes and more info


Latest Best Practices and News

  • 75,000 stars: Blushing, surprised and proud!

  • 🔖 New menu and tags: Our menu is collapsible now and includes #tags. New visitors can read #strategic items first. Returning visitors can focus on #new content. Seniors can filter for #advanced items. Courtesy of the one and only Rubek Joshi

  • 👨‍👩‍👧‍👦 New family member!: A new repository joins our family - Node.js Integration Tests Best Practices . It includes 40+ best practices for writing awesome and performant Node.js component tests

  • FR French translation!1! : The latest translation that…

4. paolocarrasco/javascript-style-guide

Una guía completamente en ESPAÑOL sobre javascript, bastante completa hace que el lector comprenda conceptos modernos del lenguaje y como codificar con legibilidad y consistencia.

GitHub logo paolocarrasco / javascript-style-guide

Guía de Estilo para programar con JavaScript, en español. Apoyo es bienvenido :)

Airbnb JavaScript Style Guide() {

Un enfoque altamente razonable para JavaScript

Nota: Esta guía asume que usas Babel, adicionalmente de tener instalado babel-preset-airbnb o su equivalente. También asume que tienes instalado shims/pollyfills en tu aplicación, con airbnb-browser-shims o su equivalente.

Downloads Downloads Gitter

Otras Guías de Estilos

Tabla de Contenido

  1. Tipos
  2. Referencias
  3. Objetos
  4. Arreglos
  5. Destructuring
  6. Cadenas de Texto
  7. Funciones
  8. Notación de Funciones de Flecha
  9. Clases y Constructores
  10. Módulos
  11. Iteradores y Generadores
  12. Propiedades
  13. Variables
  14. Hoisting
  15. Expresiones de comparación e igualdad
  16. Bloques
  17. Comentarios
  18. Espacios en blanco
  19. Comas
  20. Puntos y Comas
  21. Casting de Tipos y Coerción
  22. Convenciones de nomenclatura
  23. Funciones de Acceso
  24. Eventos
  25. jQuery
  26. Compatibilidad con EcmaScript 5
  27. Estilos de EcmaScript6+ (ES2015+)
  28. Pruebas
  29. Desempeño
  30. Recursos
  31. En la cancha
  32. Traducciones
  33. La guía de la Guía de Estilos JavaScript
  34. Charla con nosotros sobre Javascript
  35. Colaboradores
  36. Licencia

Tipos

  • Primitivos: Cuando accedes a un tipo primitivo, manejas directamente su…

5. thedaviddias/Front-End-Checklist

Herramientas para comprobar aspectos importantes de una web terminada. Antes de lanzar tu app web a producción es importante verificar por ejemplo si la semántica HTML está bien escrita, verificar si las fuentes usadas siempre están o estarán disponibles, performance, accesibilidad web, SEO, etc, etc, etc.

GitHub logo thedaviddias / Front-End-Checklist

🗂 The perfect Front-End Checklist for modern websites and meticulous developers


Front-End Checklist

  Front-End Checklist  


🚨 Currently working on a V2 of frontendchecklist.io,
feel free to discuss any feature you would like to see in the next version


The Front-End Checklist is an exhaustive list of all elements you need to have / to test before launching your website / HTML page to production.

      PRs Welcome           Contributors         Front‑End_Checklist followed         CC0  

  How To UseContributingWebsiteProduct Hunt

Other Checklists:
  🎮 Front-End Performance Checklist💎 Front-End Design Checklist

It is based on Front-End developers' years of experience, with the additions coming from some other open-source checklists.


How to use?

All items in the Front-End Checklist are required for the majority of the projects, but some elements can be omitted or are not essential (in the case of an administration web app, you may not need RSS feed for example). We choose to use 3 levels of flexibility:

  • Low means that the item is recommended but can be…

6. gothinkster/realworld

Repositorio que proporciona código de aplicaciones web desarrolladas en varias tecnologías diferentes, como React, Angular, Vue, Svelte, etc.

GitHub logo gothinkster / realworld

"The mother of all demo apps" — Exemplary fullstack Medium.com clone powered by React, Angular, Node, Django, and many more 🏅

RealWorld Example Applications

See how the exact same Medium.com clone (called Conduit) is built using different frontends and backends. Yes, you can mix and match them, because they all adhere to the same API spec 😮😎

While most "todo" demos provide an excellent cursory glance at a framework's capabilities, they typically don't convey the knowledge & perspective required to actually build real applications with it.

RealWorld solves this by allowing you to choose any frontend (React, Angular, & more) and any backend (Node, Django, & more) and see how they power a real-world, beautifully designed full-stack app called Conduit.

Read the full blog post announcing RealWorld on Medium.

Join us on GitHub Discussions! 🎉

Implementations

Over 100 implementations have been created using various languages, libraries, and frameworks.

Explore them on CodebaseShow.

Create a new implementation

Create a new implementation >>>

Or you can view upcoming implementations (WIPs).




7.trekhleb/javascript_algorithms

Los arreglos y objetos son ampliamente usados en JS, pero hay estructuras de datos mucho más complejas y que resuelven problemas específicos y que se deben conocer. Este repositorio resume algoritmos y estructuras de datos populares.

GitHub logo trekhleb / javascript-algorithms

📝 Algorithms and data structures implemented in JavaScript with explanations and links to further readings

JavaScript Algorithms and Data Structures

🇺🇦 UKRAINE IS BEING ATTACKED BY RUSSIAN ARMY. CIVILIANS ARE GETTING KILLED. RESIDENTIAL AREAS ARE GETTING BOMBED.

CI codecov

This repository contains JavaScript based examples of many popular algorithms and data structures.

Each algorithm and data structure has its own separate README with related explanations and links for further reading (including ones to YouTube videos).

Read this in other languages: 简体中文 繁體中文 한국어 日本語, Polski, Français, Español, Português, Русский, Türk, Italiana, Bahasa Indonesia, Українська, Arabic, Tiếng Việt, Deutsch

Note that this project is meant to be used for learning and researching purposes only, and it is not meant to be used for production.

Data Structures

A data structure is a particular way of organizing and…


Referencias

El presente artículo no hubiera sido posible sin el post en instagram de @vikingcodeblog, créditos correspondientes a el.

Acá te dejo su post original en instagram, siguelo, hace muy buen contenido para devs.


end

Discussion (0)