Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/helloroman/frontend-roadmap

Last synced: 1 day ago
JSON representation

Host: GitHub
URL: https://github.com/helloroman/frontend-roadmap
Owner: helloroman
Created: 2018-12-26T22:17:42.000Z (almost 6 years ago)
Default Branch: master
Last Pushed: 2020-04-14T08:16:23.000Z (over 4 years ago)
Last Synced: 2024-08-12T17:18:59.561Z (3 months ago)
Size: 13.7 KB
Stars: 245
Watchers: 56
Forks: 41
Open Issues: 3
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

awesome_roadmaps - frontend developers needs

README

        # Frontend 2020 — czego warto się nauczyć?

## Linki do odcinków

* [Co warto wiedzieć w 2019](https://youtu.be/fibhIsmsVdI)

* [Co warto wiedzieć w 2020](https://youtu.be/XlpgE8B-ekc)

## Narzędzia ogólne

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

* [Sublime Text - darmowe](https://www.sublimetext.com/)

* [Webstorm](https://www.jetbrains.com/webstorm/)

* Przeglądarka – devtools

	* [Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools/)

	* [Firefox Developer Tools](https://developer.mozilla.org/son/docs/Tools)

	* [GitHub - facebook/react-devtools](https://github.com/facebook/react-devtools)

	* [GitHub - vuejs/vue-devtools](https://github.com/vuejs/vue-devtools)

	* [GitHub - zalmoxisus/redux-devtools](https://github.com/zalmoxisus/redux-devtools-extension)

* Projektowanie

	* [Sketch - The digital design toolkit](https://www.sketchapp.com/)

	* [Figma - darmowe](https://www.figma.com/)

	* [InVision Studio](https://www.invisionapp.com/studio)

	* [Framer X](https://framer.com/)

	* [Adobe XD - darmowe](https://www.adobe.com/products/xd.html)

##  Front-end – ogólne

* HTML Semantyczny

	* [Tomasz Jakut – Semantyczny blog w HTML5](https://tutorials.comandeer.pl/html5-blog.html)

* CSS

	* [SCSS/Sass](https://sass-lang.com/)

	* [styled-components](https://www.styled-components.com/)

	* [Bulma](https://bulma.io/)

* [Storybook](https://github.com/storybooks/storybook)

* RWD

	* [CSS Grid](http://cssgridgarden.com/)

	* [CSS Flexbox](https://flexboxfroggy.com/)

* [The math of CSS Locks](https://fvsch.com/css-locks/)

* [Progressive Web Apps](https://developers.google.com/web/progressive-web-apps/)

* [Mikrofrontendy](https://martinfowler.com/articles/micro-frontends.html)

## Front-end – część JavaScriptowa

* ES6+

* TypeScript

### Frameworki

* Angular

	* [Angular Framework](https://angular.io/)

	* [Angular Material](https://material.angular.io/)

	* [Angular CLI](https://cli.angular.io/)

	* State Management (wybierz jeden)

		* [NGRX](https://ngrx.io/)

		* [NGXS](https://ngxs.gitbook.io/ngxs/)

		* [Akita](https://netbasal.gitbook.io/akita/)

* [React](https://reactjs.org/)

  * State Management (wybierz jeden)

	* [Mobx](https://github.com/mobxjs/mobx)

	* [Redux](https://redux.js.org/)

* [Vue.js](https://vuejs.org/)

  * State Management

    * [Vuex](https://vuex.vuejs.org/)

* [Angular](https://angular.io/)

* SSR

	* [Next.js](https://nextjs.org/)

	* [Nuxt.js](https://nuxtjs.org/)

* JAM Stack

	* [GatsbyJS](https://www.gatsbyjs.org/)

	* [Netlify](https://www.netlify.com/)

	* [Heroku](https://www.heroku.com/)

	* CMS

		* [DatoCMS](https://www.datocms.com/)

	* Usługi w chmurze

    * [Firebase – fajne dla początkujących](https://firebase.google.com/)

    * [Amazon Web Services](https://aws.amazon.com/)

* [GraphQL](https://graphql.org/learn/)

* Server Side Language

	* [Node.js](https://nodejs.org/)

    * [Express.js](https://expressjs.com/)

    * [Fastify](https://www.fastify.io/)

    * [Nest.js](https://nestjs.com/)

	* Oczywiście możliwości jest wiele więcej (Python, RoR etc.)

### Narzędzia projektowe

* Package managery (wybierz jeden)

	* [npm](https://www.npmjs.com/)

	* [Yarn](https://yarnpkg.com/lang/en/)

* [npx package runner](https://www.npmjs.com/package/npx)

* [Webpack](https://webpack.js.org/)

* [Babel](https://babeljs.io/)

* [Prettier](https://prettier.io/)

* [ESLint](https://eslint.org/)

### Bonus:

* Machine Learning

	* [Polecam – Neural networks in JavaScript | Scrimba.com](https://scrimba.com/g/gneuralnetworks)

* [WebAssembly](https://webassembly.org/)