Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/mgiordano95/awesome-basic-frontend-development

Collection of resources for frontend web developers.
https://github.com/mgiordano95/awesome-basic-frontend-development

List: awesome-basic-frontend-development

Last synced: 16 days ago
JSON representation

Collection of resources for frontend web developers.

Awesome Lists containing this project

README 

        
# Awesome Basic Frontend Development [![Awesome](https://awesome.re/badge.svg)](https://awesome.re)



> Collection of resources for frontend web developers.



## Contents

- [Framework](#framework)

    - [Angular UI Library](#angular-ui-library)

    - [General Library](#general-library)

    - [Mobile Library](#mobile-library)

    - [Mobile UI Library](#mobile-ui-library)

    - [UI Library](#ui-library)

    - [Web Components](#web-components)

- [IDE](#ide)

    - [Visual Studio Code Extensions](#visual-studio-code-extensions)



## Framework

- [Angular](https://angular.io/): A development platform for building mobile and desktop web applications using TypeScript/JavaScript and other languages.

- [Electron](https://www.electronjs.org/): Build cross-platform desktop apps with JavaScript, HTML, and CSS.

- [React](https://reactjs.org/): A declarative, efficient, and flexible JavaScript library for building user interfaces.

- [Vue.js](https://vuejs.org/): An approachable, performant and versatile framework for building web user interfaces.



### Angular UI Library

- [Angular Material](https://material.angular.io/): Component infrastructure and Material Design components for Angular.

- [ng-bootstrap](https://ng-bootstrap.github.io/): Angular widgets built from the ground up using Bootstrap CSS with APIs designed for the Angular ecosystem.

- [ngx-toastr](https://www.npmjs.com/package/ngx-toastr): Angular Toastr.



### General Library

- [Chart.js](https://www.chartjs.org/): Simple yet flexible JavaScript charting library for the modern web.

- [OpenLayers](https://openlayers.org/): A high-performance, feature-packed library for creating interactive maps on the web.



### Mobile Library

- [Capacitor](https://capacitorjs.com/): An open source native runtime for building Web Native apps. Create cross-platform iOS, Android, and Progressive Web Apps with JavaScript, HTML, and CSS. 



### Mobile UI Library

- [Ionic](https://ionicframework.com/): An open source mobile UI toolkit for building modern, high quality cross-platform mobile apps from a single code base in Angular, React and Vue.



### UI Library

- [Bootstrap](https://getbootstrap.com/): Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.

- [Tailwind CSS](https://tailwindcss.com/): A utility-first CSS framework for rapid UI development.



### Web Components

- [Stencil](https://stenciljs.com/): A toolchain for building scalable, enterprise-ready component systems on top of TypeScript and Web Component standards. Stencil components can be distributed natively to React, Angular, Vue, and traditional web developers from a single, framework-agnostic codebase.



## IDE

- [Visual Studio Code](https://code.visualstudio.com/)



### Visual Studio Code Extensions

- [Angular Language Service](https://marketplace.visualstudio.com/items?itemName=Angular.ng-template): Editor services for Angular templates

- [Angular Schematics](https://marketplace.visualstudio.com/items?itemName=cyrilletuzi.angular-schematics): Angular schematics (CLI commands) from files Explorer or Command Palette

- [Arrow Function Snippets](https://marketplace.visualstudio.com/items?itemName=deinsoftware.arrow-function-snippets): VS Code Arrow function snippets for JS and TS

- [CodeSnap](https://marketplace.visualstudio.com/items?itemName=adpyke.codesnap): Take beautiful screenshots of your code

- [Colorize](https://marketplace.visualstudio.com/items?itemName=kamikillerto.vscode-colorize): A vscode extension to help visualize css colors in files

- [Console Ninja](https://marketplace.visualstudio.com/items?itemName=WallabyJs.console-ninja): JavaScript console.log output and runtime errors right next to your code

- [Error Lens](https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens): Improve highlighting of errors, warnings and other language diagnostics

- [GitLens — Git supercharged](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens): Supercharge Git within VS Code

- [Import Cost](https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost): Display import/require package size in the editor

- [indent-rainbow](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow): Makes indentation easier to read

- [IntelliCode](https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode): AI-assisted development

- [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer): Launch a development local Server with live reload feature for static & dynamic pages

- [Paste JSON as Code](https://marketplace.visualstudio.com/items?itemName=quicktype.quicktype): Copy JSON, paste as Go, TypeScript, C#, C++ and more

- [Path Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense): Visual Studio Code plugin that autocompletes filenames

- [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode): Code formatter using prettier

- [Quokka.js](https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode): JavaScript and TypeScript playground in your editor

- [special-console.log](https://marketplace.visualstudio.com/items?itemName=leechaojiang.special-console-log): Insert beautiful console.log & delete console.log

- [SVG Previewer](https://marketplace.visualstudio.com/items?itemName=vitaliymaz.vscode-svg-previewer): Show SVG preview to the side panel

- [Thunder Client](https://marketplace.visualstudio.com/items?itemName=rangav.vscode-thunder-client): Lightweight Rest API Client for VS Code

- [Todo Tree](https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree): Show TODO, FIXME, etc. comment tags in a tree view