Skip to content

Latest commit

 

History

History
156 lines (123 loc) · 8.66 KB

README.md

File metadata and controls

156 lines (123 loc) · 8.66 KB

useful-frontend

Development

Sandboxes
Plunker is an online community for creating, collaborating on and sharing your web development ideas: http://plnkr.co
CodePen is a social development environment for front-end designers and developer: https://codepen.io
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor: https://jsfiddle.net
Code, compile, and run code in 30+ programming languages: http://repl.it
A live pastebin for HTML, CSS & JavaScript and a range of processors: https://jsbin.com

Tools
Android Studio - the official IDE for Android, that provides the fastest tools for building apps on every type of Android device: https://developer.android.com/studio/index.html

GitHub is a web-based Git or version control repository and Internet hosting service: https://github.com
GitBook is where you create, write and organize documentation and books with your team: https://www.gitbook.com
Character codes: https://websitebuilders.com/tools/html-codes/a-z/ Online Resources For Web Developers from Bradley Traversy: https://gist.github.com/bradtraversy/61171a9b81586f5bc4c0ca1e2beb59ab

Common questions
HTML color codes and names: https://www.computerhope.com/htmcolor.htm
Get colors and typography info about webpage: http://stylifyme.com
Online regex tester, debugger with highlighting for PHP, PCRE, Python, Golang and JavaScript: https://regex101.com
Fake Online REST API for Testing and Prototyping: http://jsonplaceholder.typicode.com

Styleguide
Airbnb JavaScript Style Guide: https://github.com/airbnb/javascript
Styleguide on Angular 1 from John Papa: https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md
Official styleguide on Angular from Google: https://angular.io/guide/styleguide

NPM packages
Compare NPM package downloads: https://www.npmtrends.com/

Markup Слова, часто используемые в CSS-классах: https://github.com/yoksel/common-words
Простые правила разметки: http://yoksel.github.io/easy-markup/
Простой CSS: https://yoksel.github.io/easy-css/
HTML & CSS: как не надо: https://yoksel.github.io/bad-practices/

Optimization
Optimize your libraries with webpack: https://github.com/GoogleChromeLabs/webpack-libs-optimizations

GitHub

Dynamically generated GitHub stats: https://github.com/anuraghazra/github-readme-stats
GitHub Profile Readme Generator: https://arturssmirnovs.github.io/github-profile-readme-generator/

Meetups and conferences

RuFrontendEvents information about Russian conferences and meetups: https://www.facebook.com/rufrontendevents
MoscowJS meetups https://www.facebook.com/groups/moscowjs

Useful websites on web-technologies

Publications for front-end developers https://medium.com/front-end-hacking
Courses, tutorials, workshops on Web Development: https://scotch.io
Tutorials and screencasts covering JS libs, frameworks and more: https://thinkster.io
HTML5 Rocks - a resource for open web HTML5 developers: https://www.html5rocks.com
Alligator.io - frontend web development, chewed up: https://alligator.io/
Коллекция видео с IT-событий: https://devtube.ru
Frontend web development resources: https://github.com/RitikPatni/Front-End-Web-Development-Resources#table-of-contents
Developers roadmap: https://github.com/fullstack-development/developers-roadmap

Cool websites

Green Chameleon - Award Winning Bristol based Design Agency: https://www.craftedbygc.com

Groups in social networks

Angular - RU: https://vk.com/club149556741
Angular - RU: https://www.facebook.com/groups/1818344448397380/

Chats

List of Russian Telegram channels on web-development: https://github.com/aiboy/awesome-telegram-ru

Articles

From zero to Angular hero: https://blog.goyello.com/2017/06/14/zero-angular-hero/
Get Started with Remote Debugging Android Devices: https://developers.google.com/web/tools/chrome-devtools/remote-debugging/
Vanilla JavaScript Code Snippets: https://www.smashingmagazine.com/2021/04/vanilla-javascript-code-snippets/

Videos

2016
2016.06.01 "55+1 прием для улучшения Javascript-кода" (Татьяна Бабич). Frontend Conf, Москва: https://www.youtube.com/watch?v=ZqhYX8Ogftg
2016.06.01 "Angular 2 не так уж и плох... А если задуматься, то и просто хорош" (Алексей Охрименко). Frontend Conf, Москва: https://www.youtube.com/watch?v=72O1NdWT_58
2017
2017.05.25 "Цена пропущенного фрейма" (Дмитрий Шуранов). MoscowJS, Москва: https://www.youtube.com/watch?v=7-d3O-7aus0
2017.06.03 "Почему мой сайт тормозит и как это исправить" (Игорь Алексеенко). HolyJS, Санкт-Петербург: https://www.youtube.com/watch?v=z9YG9XBwCKo
2017.06.05 "Бешеные псы: Angular 2 vs React" (Евгений Гусев, Илья Таратухин). РИТ++, Москва: https://www.youtube.com/watch?v=SQoD-YPOysY

Learning sources

Resourse with maps how to learn anything: https://learn-anything.xyz
HTML Academy (interactive online courses on HTML, CSS, JavaScript): https://htmlacademy.ru
JavaScript book from MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript
Learn WebGL and 3D algorithmic for free: http://www.webglacademy.com
The Book of Shaders: https://thebookofshaders.com/

Learning videos

AngularJS уроки by Monsterlessons: https://www.youtube.com/playlist?list=PLIcAMDxr6tpqXzsd4AO0HehPCQtIf4TgP
AngularJS - уроки по созданию Trello: https://www.youtube.com/playlist?list=PLIcAMDxr6tpqXR3K_HNw4EIdBE8YeK7H3
Code AngularJS 2.0 With Me by Lyrad Digital: https://www.youtube.com/playlist?list=PLsS7rcLJIvNNxNi3I5L97Mg7akN-EwSCm

Podcasts

Веб-стандарты (frontend news of the week): https://soundcloud.com/web-standards
Frontend Weekend (weekly podcast about the world of frontend-development): https://soundcloud.com/frontend-weekend

Community

Learn to code and build projects for nonprofits: https://www.freecodecamp.org
North America’s largest front-end development firm, specializing in React and Angular: https://rangle.io

Libraries

CSS
Animation effects library: https://daneden.github.io/animate.css/

Utilties
Lodash - JavaScript utility library: https://lodash.com/
Underscore - JavaScript utility library: http://underscorejs.org/
Ramda - JavaScript utility library: http://ramdajs.com/

Helpers for development
Lebab transpiles your ES5 code to ES6/ES7: https://lebab.io
The compiler for writing next generation JavaScript: http://babeljs.io

Components
Ng-Bootstrap - Bootstrap widgets for Angular: https://ng-bootstrap.github.io
Free mobile touch slider: https://swiperjs.com/

Widgets
Cool draggable library from Shopify: https://shopify.github.io/draggable/

Angular
Official documentation on Angular: https://angular.io
Learn Angular2 through app creation from Firebase team: https://angular-presentation.firebaseapp.com
Angular blog: http://angularjs.blogspot.ru

Angular CLI (fast start for app building): https://github.com/angular/angular-cli
Angular4 Webpack Starter (an Angular Starter kit featuring Angular 4): https://github.com/angularclass/angular-starter

React
How to learn React: https://github.com/rtivital/react-things
React for Beginners: https://www.freecodecamp.org/news/react-beginner-handbook/
React+TypeScript Cheatsheets: https://github.com/typescript-cheatsheets/react

A command line interface for React web applications: https://github.com/facebookincubator/create-react-app

Vju
A simple CLI for scaffolding Vue.js projects: https://github.com/vuejs/vue-cli

Errors cases
List of post-mortems: https://github.com/danluu/post-mortems

Graphics
Simple, clean and engaging HTML5 based JavaScript charts: www.chartjs.org/
D3 is a JavaScript library for visualizing data with HTML, SVG, and CSS: https://d3js.org/
Graph theory / network library for analysis and visualisation: https://js.cytoscape.org/
WebGL (Web Graphics Library) is a JavaScript API for rendering 3D graphics: www.khronos.org/webgl/
Cross-browser JavaScript library/API used to create and display animated 3D computer graphics in a web browser: https://threejs.org/
GreenSock Animation Platform (GSAP) is a suite of tools for scripted, high-performance HTML5 animations: https://greensock.com
CreateJS (a suite of JavaScript libraries and tools designed for working with HTML5): http://createjs.com

Jobs

Find the job that fits your life: https://www.glassdoor.com
Find JavaScript jobs: https://telegram.me/javascript_jobs