Manually curated collection of resources for frontend web developers.
Some resources possess an emoticon to help you understand which type of content / help you may find on the checklist:
- π: documentation or article
- π : online tool / testing tool
- πΉ: media or video content
- Front-end Developer Handbook 2019 π - This is a guide that everyone can use to learn about the practice of front-end development. It broadly outlines and discusses the practice of front-end engineering: how to learn it and what tools are used when practicing it in 2019.
- 2019 Web Developer Roadmap π - A Visual Guide to Becoming a Front End, Back End, or DevOps Developer
- Web Development Trends 2020 π - What's hot in web development in 2020? What should you learn, which technologies should you not miss out on?
- Web Dev Roadmap 2020 [Complete Guide] π - Guide you in deciding what technology and languages you should learn about in 2020. We will cover all of the most popular languages and technology, focusing on full-stack development.
- Web Development In 2020 - A Practical Guide π - It is simply a guide of options to help you understand what is what and pick your learning path
- The Future of JavaScript - New Features and Disruptive Trends in 2020 π - Take a look at the future of JavaScript in the year 2020. Expect awesome new language features and disruptive trends that could change everything!
- π Clean Code Summary π - Summary of 'Clean code' by Robert C. Martin.
- π Clean Code Javascript π - 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.
- π Angular Style Guide - Looking for an opinionated guide to Angular syntax, conventions, and application structure? Step right in! This style guide presents preferred conventions and, as importantly, explains why.
- π Clean Code Checklist in Angular - A clean code checklist which covers writing clean and production-ready Angular code.
- π 30 seconds of code π - Short code snippets for all your development needs
- π JavaScript Questions π - From basic to advanced: test how well you know JavaScript, refresh your knowledge a bit, or prepare for your coding interview! muscle rocket
- π 12 Tips for Improving JavaScript Performance - 12 ways to effectively improve application performance.
- π 8 Useful JavaScript Tricks - Some tricks used in practice and others are the new way of solving old problems. Enjoy!.
- πΉ JS - I didn't know that
- π Angular Architecture Patterns and Best Practices
- π 20 RxJS Operators You Absolutely Need to Know
- πΉ The JavaScript Survival Guide - protection from the so-called "weird" features that you will encounter as a JS developer. This primer will introduce you to variables, functions, objects, closures, hoisting, this-binding, and more.
- π Git: Tips And Tricks - Git Cheatsheet with a few nifty tips and tricks.
- πΉ Top 5 Javascript Things You Should Know! - These concepts are good to learn after you are comfortable with the basic syntax of javascript and you want to dive deeper into what is happening under the hood.
- πΉ RxJS Top Ten - Code This, Not That - Looking at ten important concepts in RxJS and how to avoid common anti-patterns.
- π Top 12 Things That Destroy Developer Productivity - Deep dive into our list of 12 things that prevent your developers from getting βinto the zoneβ and being productive.
- πΉ Whatβs new in JavaScript (Google I/O β19) - This presentation gives an overview of cutting-edge JavaScript development techniques to build modern web and Node.js apps. Discover which features to expect in Chrome and Node.js soon, how the V8 engine optimizes for them, and how to improve real-world performance and stability on the Web and in Node.js.
- π Web Architecture 101 - The basic architecture concepts for a web developer.
- πΉ The Async Await(Fireship) - Learn how to make your JavaScript Promise code beautiful and concise with async-await.
- πΉ Web Security 2019 - Going through from a web admins perspective: TLS, Cipher Suites, HTTP Security Headers, CAs, the move to an encrypted-by-default web, and more.
- πΉ ArangoDB - Databases every developer should know about - ArangoDB is a SUPER COOL database that every developer should at least be familiar with. ArangoDB is muti-model, so you can use it as a document DB, a key/value store, or a graph DB all at the same time. ArangoDB has a TON of flexibility and features, ranging from GeoJSON, search views (arangosearch), the ability to add node.js microservices, and, best of all, a really nice query language.
- πΉ This Is the Only Way to Truly Learn JavaScript - In this video I'm explaining the best way to become a JavaScript programmer.
- π Learn Advanced TypeScript
- π The Complete Guide To Angular Load Time Optimization - Dive into one of the big and important topics: optimizing Angular load time performance.
- π 20 Patterns to Watch for in Your Engineering Team - A field guide to help you recognize achievement, spot bottlenecks, and debug your development process with data.
- π Advanced Coding Skills, Techniques, and Ideas - real-life examples of some techniques and ideas that will help you to clean up your legacy code and refactor it to make it more robust and modular.
- π JS & Node.js Testing Best Practices - This guide can take your testing skills to the next level.
- π Design Principles for Developers: Processes and CSS Tips for Better Web Design
- π Web Development In 2019 - A Practical Guide - We will look at nearly all aspects of web technology including the necessities as well as some of the new trends for 2019.
- πΉ 10 things I learned making the fastest JS server runtime in the world - This talk is about thinking outside of the box, being creative and donβt take anything for granted. We will debunk myths about native code vs script or RAM usage, itβs going to be fast! I promise!
- π Why Your Angular App Is Not Working: 7 Common Mistakes - 7 Most Common Mistakes, your development may have fewer problems :)
- π 9 Tricks for Kickass JavaScript Developers in 2019 - Some tips that can help you write clean and efficient code that scales, even (or maybe especially?) in 2019. Below is a list of 9 pragmatic tips that will make you a better developer.
- πΉ Data Structures Easy to Advanced Course - Full Tutorial from a Google Engineer - Learn and master the most common data structures in this full course from Google engineer William Fiset. This course teaches data structures to beginners using high quality animations to represent the data structures visually.
- πΉ Docker Tutorial for Beginners - A Full DevOps Course on How to Run Applications in Containers - In this course you will learn Docker through a series of lectures that use animation, illustration and some fun analogies that simply complex concepts, we have demos that will show how to install and get started with Docker and most importantly we have hands-on labs that you can access right in your browser.
- πΉ Full Ethical Hacking Course - Network Penetration Testing for Beginners (2019) - Throughout the course, we will develop our own Active Directory lab in Windows, make it vulnerable, hack it, and patch it. We'll cover the red and blue sides. We'll also cover some of the boring stuff like report writing :)
- π Top 10 JavaScript errors from 1000+ projects (and how to avoid them) - Weβre going to show you what causes them and how to prevent them from happening. If you avoid these βgotchas,β itβll make you a better developer.
- π List of (advanced) JavaScript questions - A long list of (advanced) JavaScript questions, and their explanations !Updated weekly!
- π The State of Angular in 2019 - A detailed overview of the current state of Angular, from the latest features to the hottest topics and trends that you may have missed.
- π Handling Safe Destructuring in TypeScript - It's common in JavaScript code to accept objects as parameters in functions and setting them to an empty object by default to allow safe destructuring. This article covers how to handle this pattern in TypeScript.
- π What Is Holding Your Angular Teamβs Productivity Back?
- π An Illustrated (and Musical) Guide to Map, Reduce, and Filter Array Methods - Map, reduce, and filter are three very useful array methods in JavaScript that give developers a ton of power in a short amount of space. Letβs jump right into how you can leverage (and remember how to use!) these super handy methods.
- π Difference Between Array, Type[], [Type] in TypeScript - Here are the TLDR common methods of defining arrays in TypeScript.
- π FUNCTIONAL JAVASCRIPT: WHAT ARE HIGHER-ORDER FUNCTIONS, AND WHY SHOULD ANYONE CARE? - Deep dive explanation for functional javascript: higher order functions.
- π The Mistakes I Made As a Beginner Programmer - Learn to identify them, make habits to avoid them.
- π The One Programming Language to Rule Them All - Thereβs a language that sits a layer beneath code, and it yearns to be explored.
- πΉ Moving Existing API From REST To GraphQL - Intro to the query language, how GitHub uses it internally with Ruby and Rails, and the lessons they learned launching their GraphQL API externally.
- π First-Class Functions in JavaScript - Functions can be treated like other variables, which turns out to be incredibly important behavior to understand as you advance as a JavaScript developer.
- π Unrevealed tips for unit testing with Jest - Super pragmatic and short list of tips that might help you get that tricky stubborn mock to work.
- πΉ Scope in JavaScript - HTTP 203 - Jake and Surma take a deep dive into the world of variable scoping in JavaScript. var vs const/let and scripts vs modules.
- π JAMSTACK - A modern architecture β Create fast and secure sites and dynamic apps with JavaScript, APIs, and prerendered Markup, served without web servers.
- π Serverless TypeScript - A modern architecture β Serverless is the best thing that has happened to the backend and TypeScript is the best thing that has happened to Node.js. So it makes sense combining the two to make something awesome.
- πΉ Callbacks vs Promises vs RxJs Observables vs async/ await - Handling async operations is a common task in any JavaScript program. You got different options - let's dive into them!
- π Angular - All Talks from AngularConnect 2019 - A collection of all lectures that were presented during the Europe's largest Angular conference - within one page. Each session includes a concise description and relevant slides.
- Traversy Media π - Tutorials on: HTML, CSS, jQuery, PHP, Ajax, Bootstrap, MySQL, ECMAScript 6, React JS / Redux, Django, Angular, Ionic, Gulp, Git, Python, Node JS, PHP, Laravel, Cake PHP, Symfony, CodeIgniter, Programing Tips
- Fireship π - Tutorials on: Intermediate to advanced lessons about JavaScript, Flutter, Angular, Firebase, and modern app development
- WesBos - Tutorials on: HTML, CSS, JavaScript and web development
- Academind - Tutorials on Angular or Guides, Vue.js, other Frontend Development Content or Data Science Topics or anything else - you're probably right!
- freeCodeCamp - Tutorials on: JQuery, JavaScript, React, Math, Science, Software Engineering, Open source software
- Google Chrome Developers - Latest and greatest talks on modern web development with pro-tips, insights, and techniques to help you level up your web development skill.
- LearnCode.academy - Tutorials on: HTML, CSS, jQuery, JavaScript, React JS / Redux, Node JS
- Web Dev Simplified - Web development skills and techniques in an efficient and practical manner. If you are just getting started in web development Web Dev Simplified has all the tools you need to learn the newest and most popular technologies to convert you from a no stack to full stack developer. Web Dev Simplified also deep dives into advanced topics using the latest best practices for you seasoned web developers.
- Dev Ed - Learn web development, web design, 3d modelling, tools like figma and more without getting bored! The goes of this channel is to get you to become as creative you can be! So if you like to create video games in Unity or develop an application in node.js, stick around and have fun!
- LevelUpTuts - Tutorials on: HTML, CSS, SASS, WordPress, Magento,Drupal, React, Meteor
- The Net Ninja - Tutorials on: HTML, CSS, jQuery, JavaScript, Git and GitHub, Bootstrap, MangoDB, PSD to WordPress, PSD to HTML, and many more.
- π Online Tools: Online Tools For Web Developers.
- π Top 25 Javascript Plugins for Webstorm: Best and most useful plugins for JavaScript development in WebStorm and Intellij.
- π 50 awesome new tools for developers in 2019: A fresh batch of tools youβll want to consider for your projects.
- π Packem: Packem is +2X faster than Parcel (with multicore compilation).
- π ArangoDB: ArangoDB is muti-model, so you can use it as a document DB, a key/value store, or a graph DB all at the same time.
- π Library Genesis: Get Every Book.
Websites & newsletters which provide daily and weekly news related to frontend web development.
- Frontend Dev Weekly: Front-end developer news, tools and inspiration hand-picked each week.
- JavaScript Weekly: A free, onceβweekly e-mail round-up of JavaScript news and articles.
- Angular Weekly: Weekly curated blogs and tools for Angular pros.
- Web Tools Weekly: Web Tools Weekly is a front-end development and web design newsletter with a focus on tools.
Digital media that consists of an episodic series of audio, video, digital radio, PDF, or ePub files subscribed to and downloaded automatically through web syndication or streamed online to a computer or mobile device.
- Syntax FM: A Tasty Treats Podcast for Web Developers.
- Adventures in Angular: Adventures in Angular is a weekly podcast dedicated to the Angular JavaScript framework and related technologies, tools, languages, and practices.
- JavaScript Air: The live broadcast podcast all about JavaScript.
- JavaScript Jabber: A weekly podcast about JavaScript, including Node.js, Front-End Technologies, Careers, Teams and more.