GitHub, that hosts over 85M code repositories and has about 28M users, has become one of the most popular pitstop for front-end developers. From frameworks and demonstrations to libraries and collections – there is a universe worth of things to explore for every developer on GitHub.
But this overwhelmingly large quantity of repository makes it tricky to unearth the cooler things you probably don’t hear about very easily – simply because there are so many resources available.
So here we have a short list of popular GitHub repositories to explore if you are a front end developer. Each of them has at least ~20,000 stars
1. Front-End Checklist
Before you launch your web applications to your end-users, wonder what you need to have ready or to test it out before actually making things live? The Front end checklist has all items that are required by the majority of the projects.
Their items listed are mandatory for the majority of projects and organized as follows:
The repository provides a range of flexibility:
- The green symbol means that the repository item is recommended but you can avoid it in situations (say you are creating a web-based admin app that may not require RSS feed)
- The orange triangle means that item is highly recommended and be omitted at some stage in peculiar cases but there may be repercussions in terms of performance
- The red symbol signifies that the item simply cannot be omitted and you must utilize it to avoid any dysfunction on your page or have accessibility issues. The testing priority needs to be on these elements first.
The repository has made it far too intuitive and accessible to developers using emoticons 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
Check Front-End Checklist repository here
2. Big List of Naughty String
The big naughty list is an extremely useful list for testing user inputs. This repository offers an evolving list of strings that are likely to cause issues when used as user inputs while testing your code.
“Even multi-billion dollar companies with huge amounts of automated testing can’t find every bad input,” writes the GitHub repo highlighting just how in-depth its collection of user inputs that are meant to reveal any issues in your application.
So whether you are running manual tests or automated tests, this repository will help you find the strings that have a high probability of causing an issue for the end-user. It will help you spot the errors in advance to ensure a positive user experience.
It laid out how you need to use the repo. Its blns.txt consists of the newline-delimited strings and comments which are preceded with the hash #. The comments divide the strings into sections for easy manual reading and copy/pasting into input forms. For those who want to access the strings programmatically, a blns.json file is provided containing an array with all the comments stripped out (the scripts folder contains a Python script used to generate the blns.json).
So, if you are exploring user-input validations, or you are into testing, give this repo a look > the big list of naughty strings.
3. Frontend Development Bookmarks
From architectures to UI components, this GitHub repository is a manually curated list of resources that are ideal for front end developers. This repo has a massive range of front end technologies covered under the hood. So, if you need to build a modern front end design, it is likely you will find relevant technologies covered here.
If you are at a stage where you need to build up your fundamentals about a certain aspect of front end development, we recommend you take a peek at this repository > front end development bookmarks for a preview of the categories they have covered ( Appearance, Architecture, Compatibility, Ecosystem, Languages, Protocols, Browser APIs, User Interface Components, Workflow) Check this link out for a “totally gigantic file” as they call it for the resources listed, well over 1000.
4. Awesome Interview Questions
With well over 37K starts on GitHub, the Awesome Interview Questions repository is a popular resource for front end developers.
Programming languages, frameworks, platforms Database technologies, Caching technologies, Operating Systems, Algorithms, Blockchain, Design Patterns, Networks, Data Structures – A very well-curated list of technical interview questions, this repository presents a long list of interview questions that cover almost every programming language and framework.
People say it is unimaginable to attend an interview not well prepared after one had taken a look at this repository. Check it out here.
5. The Art of Command Line
What originally appeared in Quora, is now a GitHub repository widely popular repository to enhance one’s command line fluency – a skill that improves the flexibility and productivity of the engineers in many ways – both obvious and subtle.
As a developer, looking for ways to become more efficient is like second nature to you. The art of command line contains a lot of tips that can be helpful to developers striving to be efficient and save significant time over any other alternatives.
This repository presents a selection of notes and suggestions on how to use command line. From elementary tips to some specific ones – the collection here is a result of the efforts of many authors and translators, of which many appeared on Quora but was later moved to GitHub with many improvements.
Currently, it is mainly focused on the Linux command line. There are smaller sections on macOS and Windows as well. The author is also looking to join hands with contributors to further expand the repository and go a level deeper.
Check out the Art of Command Line Github Repo here > https://github.com/jlevy/the-art-of-command-line
6. 30 Seconds of Code
You can find the 30 seconds of code repository here.
7. Node.js Best Practices
With 75K starts, this Github repository is a comprehensive collection of various Node.js development best practices. It is a curation of the highest-ranked content on Node.js best practices, as well as the content is written here by collaborators. You will find no less than 80 best practices, style guides, and architectural tips while new resources get added to the repository on a daily basis. In the Node.js Best Practices repository, you will find information about:
- Project Structure Practices
- Error Handling Practices
- Code Style Practices
- Testing And Overall Quality Practices
- Going To Production Practices (
- Security Practices
- Performance Practices
- Docker Practices (
For frontend or backend developers – this is a great repo and source of information. If you are into Node.js development, check this one out > here
8. HTML5 Boilerplate
HTML5 Boilerplate is a professional, and one of the most popular front-end templates. It helps you build fast, robust and adaptable websites or apps. Companies like Microsoft, NASA, and Nike use it. This repository is where HTML5-Boilerplate is authored. A product of over 10 years of research, analysis and contribution by over 200 contributors, this is one finely-tuned starter template and supports the latest, stable releases of all major browsers.
Designed with progressive enhancement in mind, this resource includes:
- Normalize.css for CSS normalizations and common bug fixes
- A custom build of Modernizr for feature detection
- Apache Server Configs that improve the website’s performance and security
Other key features include:
- HTML5 ready.
- Designed with progressive enhancement in mind.
- Includes:Normalize.css, jQuery and Modernizer
- Configs that improve the website’s performance and security.
- Placeholder CSS Media Queries and Useful CSS helper classes.
- Default print styles, performance-optimized.
- An optimized version of the Google Universal Analytics snippet.
Explore the HTML5 Boilerplate GitHub Repository here
9. You Don’t Know JS Yet
- Get Started
- Scope & Closures
- Objects & Classes
- Types & Grammar
- Sync & Async
- ES.Next & Beyond
10. CSS Protips
The CSS Protips repository promises to make you a Pro at CSS. With a bunch of tips that help you to improve your CSS skills, it allows you to be able to solve even the most specific challenges by getting a better foundational understanding of your styling skills.
The 25 CSS tips and tricks that you learn from this repository are very quickly actionable and can be used right away.
The tips on this list help to solve problems that you probably have run into before, such as Styling Broken Images, Using max-height for Pure CSS Sliders, Using Pointer Events to Control Mouse Events and more.
What stands out the most is that this resource can be found translated into more than ten languages.
If you’re curious about the CSS tips that are being shared in this repository, take a look over here