Frontend hacking cheatsheets

Frontend hacking cheatsheets
Average rating: 0
(0 votes)

Thanks! You’ve rated this material!

Every professional has his or her own list of cheatsheets. The more professional we become, the more things we keep in mind, but details often fade away. So the cheatsheet is the perfect solution to have all your needed information in one place. Today we gathered frontend hacking cheatsheets for you. By the way, we’re looking for senior frontend Javascript developer!

Let’s start with JavaScript.

JavaScript cheatsheet

1. Regular expressions can be found in JavaScript Regex Cheatsheet
Basics, classes, characters etc.

Javascript Regular expressions cheatsheet

2. Basic objects, browser, DOM events and more can be found in
Array properties and methods, boolean methods, events and more…

Javascript cheatsheet

3. ES2015 features can be found in devhints
A quick overview of new JavaScript features in ES2015, ES2016, ES2017 and beyond, promises, destructing, spread, functions, objects, modules, and generators…

ES2015+ cheatsheet

React cheatsheet

The cheatsheet for this JavaScript library can be found on many resources. We’ll provide you with several:

1. – this guides with components, defaults, lifecycle and property validation targets React v15 to v16

React cheatsheet

2. targets React v16. There you can find components, children, context, test-units and react-dom

3. A simple and brief PDF that targets React v15

Let’s move to Redux, the another open-source JavaScript library designed for managing application state.

Redux cheatsheet

 1. Enjoy this simple Redux cheatsheet PDF

2. Another cheatsheet could be found on

We’ll continue with Vue.js, a progressive JavaScript framework for building user interfaces.

Vue.js cheatsheet

can be found here – Moreover, there is also a printable PDF version of it, so you could print it and place somewhere.

If we made a cheatsheet for Vue.js, we should say a few words about cheatsheet forVuex.Vuex is a state management pattern + library for Vue.js applications.

Vuex cheatsheet

can be found on entry, store, plugin and more.

Angular 4 cheatsheet

might be found on the official Angular site. Bootstrapping, template syntaxis, forms, class decorators, component configuration and more.

The next thing we’re going to provide a cheatsheet for is Flexbox. The Flexbox Layout officially called CSS Flexible Box Layout Module is the layout module made to improve the items align, directions and order in the container even when they are with dynamic or even unknown size.

Flexbox cheatsheet

can be found on

As far as we started talking about CSS, let’s move to the SCSS, which is a special type of file for SASS, a program written in Ruby that assembles CSS style sheets for a browser.

SCSS cheatsheet

To find SCSS cheatsheet we will use devhints again. There you will find variables, nesting, mixin properties, composing and more.

The last thing we will observe today is the GraphQL. This data query language has many resources with cheatsheets, but today we will highlight only two of them.

GraphQL cheatsheet

  1. devhitns – as usual. You can find a cheatsheet there
  2. The popular image of GraphQL Schema Language cheatsheet: there you will find type definitions, custom scalars, unions and more

We hope, this material was useful for you. Subscribe to our weekly newsletter to find more!

Rate this article, if you like it

Thanks! You’ve rated this material!

Got a project? Let's discuss it!

    Kyiv Sofiivska 1/2a, 01001, Kyiv, Ukraine
    Dnipro Hlinky 2, of. 1003, 49000, Dnipro, Ukraine
    Kharkiv Otakara Yarosha 22, 61000, Kharkiv, Ukraine