Frontend Developer

Company practices

Security

Keeper Security

You know how to share secret values with other employees. 📚

aws-vault

You know how to use the command line to switch between users

Onetimesecret

You know how to share secret values externally 📚

Git

You create pull requests with proper name and description 📚
You squash merge your pull requests 📚
You understand the pros and cons of git rebase vs git merge 📚
You name your commits properly 📚
You review PRs carefully and leave your comments 📚
You know how to configure rules in a repository for merging to specific branches (master, develop)
You add proper label in pull requests
You create your branches under the proper folder (feature, fix, hotfix)

GitHub

You know how to create and reference issues
You know how to verify when a build check failed
You know how to create GitHub Wiki pages

Bitbucket

You know how to verify when a build check failed
You know how to reference a Jira ticket in your commit

Communication

Slack

You know how to create groups and channels
You use Slack statuses in line with company policy (remote working, vacationing, in a meeting, etc)

Small Improvements

You know how to create goals and mark them as complete
You know how to give praise and add talk topics to a 1:1 meeting

Jira

You know how to create tickets and write comments

Email

You can configure email signatures
You can configure local email client

React

React is an open-source JavaScript library for building user interfaces. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications.

You know how to write a function component. 📚
You know the difference between function and class components. 📚
You know how to define and modify local component's state. 📚
You know what Virtual DOM is and how React uses it to render components. 📚
You know how to use element events and how incorporate them in React lifecycle 📚
You know component's lifecycle and know how to use each of the phases. 📚
You know Context API 📚
You can use refs to bind to a native DOM element and interact with it in component lifecycle 📚
You understand concepts of higher order components and render functions, as well as their differences, pros and cons. 📚
You know how to prevent components from re-rendering. 📚
You know how to reconcile global state with local component's state
You know how and when to use portals. 📚

Hooks

You can use useState and useEffect hooks. 📚
You know how hook dependency array works. 📚
You understand pros and cons of using useCallback hook. 📚
You know how to write a custom React hook. 📚

react-use

You know how to incorporate react-use hooks in your component 📚
You understand the advantages/disadvantages of the API compared to Lodash

react-dom

You can explain how React.render function works. 📚
You can explain React.createPortal works. 📚
You can explain how React.hydrate function works. 📚

Application state management

Redux

You can describe full Redux flow 📚
You know how to define a new Redux module (Reducer, Saga, Selector) 📚
You know how to dispatch Redux action (outside React context)

react-redux

You know how to apply selector functions to useSelector hook. 📚
You know how to dispatch actions from React component. 📚

Redux toolset

You can use one of the toolset libraries to create reducers, action types, and action creators more efficiently

redux-toolkit

You know how to create a reducer. 📚
You know how to create an action creator 📚
You understand how to leverage the fact that action creators serialize to action's type string.
You know how to define a reducer function for a specific action type.
You know how to use slices

redux-persist

You know how to persist part of the state tree to local storage

Immutable data structures

You understand benefits of using immutable data structures in Redux applications 📚
You know how to use at least one of the libraries that provide immutable data structures in redux state 📚

immer

You know how to create a reducer that uses immer 📚
You know how to convert immutable structure to regular JavaScript object
You can explain how immer works internally.

Selectors

reselect

You know how to create a selector with createSelector function 📚
You know how to create a selector that uses multiple other selectors as an input.

Side effects

You understand the concept of side effects 📚

redux-saga

You know how to take a side effect and dispatch an action based on it 📚
You know how to select data from Redux state using selector functions inside sagas. 📚
You understand the concept of Javascript generators 📚
You know to sequence Sagas and how to run them in parallel 📚
You know how to wait for an another action from inside the running saga. 📚
You can name eventChannel use cases and know how to implement a saga using it. 📚
You can name actionChannel use cases and know how to implement a saga using it. 📚

redux-saga-routines

You know how to create your own routine
You know how to promisify a routine
You understand the advantages of standardizing action type's name
You know how to manipulate the payload with payloadCreator
You know how to enhance the payload with metaCreator

Styling

CSS

You know how to write CSS rules 📚
You know how to apply basic styles to elements (colour, size, position, etc)
You know how to display and properly scale images 📚
You know how to center an element horizontally and vertically 📚
You know how to use media queries
You know how to add and use webfonts 📚
You know how to display different images depending on the screen pixel density ratio 📚

CSS in JS

styled-components

You can apply global styles 📚
You can create a styled component for a primitive element 📚
You can extend styles of an existing component 📚
You can implement media queries 📚
You can apply styles to 3rd party components that only support styling by classnames

styled-theming

You know how to use theme modes to apply different themes based on the context 📚
You know how to use theme variants to apply different styles to a component based on the context 📚

Flexbox

You can learn how to style HTML elements with flexbox by reading this awesome guide https://css-tricks.com/snippets/css/a-guide-to-flexbox/

You know how to use column and row layouts 📚
You know how to align children elements 📚
You know how to stretch child element to the size of its parent 📚
You can properly use flex-basis and flex-wrap 📚
You understand variations of the shorthand syntax between browsers
You are aware of the pitfalls of using flexbox and know to work around it 📚

Reset libraries

normalize.css

You can explain benefits of the library
You know how to use this library in a project

CSS Grid

You know how to divide a web page to rows and columns
You can position elements in a grid
You can define and use named grid areas
You can align items in grid cells

UI Kits

You understand basics of at least one of the UI Kit libraries 📚
You have used one of the UI Kit libraries in a project

Icons

You used at least one of the icon libraries in a project

Emails

You understand the emails engine support for HTML elements and CSS styles 📚
You know how to write CSS in order to be interpreted by email engines
You know how to attach images so they're properly displayed
You know how to incorporate backend variables in order to properly present in the email
You know and use email templating tools to facilitate the creation of emails 📚

Date & Time

You know how to create a Date object for a specific date 📚
You know what ISO 8601 standard format is and how to parse it to a date object 📚
You know what unix timestamp is and how to parse it to a date object 📚

date-fns

You know how to create a date-fns date object for specific date 📚
You know how to format and display a date object using standard format strings 📚
You know how to convert date into a different timezone (usually user's local timezone)
You know how to manipulate, compare date objects

Routing

react-router

You can create a simple route structure using Switch and Route 📚
You know how to add parameters to a route, and make them required or optional 📚
You know how to match exactly the route needed 📚
You know how to render 404 pages 📚
You know how to interact with browser history via the history API 📚
You know how to use basic router hooks (useHistory, useLocation, useParams, useRouteMatch) 📚
You know how to manipulate history's location object
You know how to use in order to render a needed component in a given occasion
You know to how separate private routes from public routes
You know how to securely render routes depending on the user's permission

react-router-dom

You know how to use basic components - Link, NavLink 📚

Visualizations

Charting

You don't need to know all of the charting libraries. One is enough, but make sure to master it!

You used at least one charting library in a project
You implemented custom interactive charts using one of the charting libraries

Canvas

Animations

React Animation libraries

You used and know well at least one of the react animation libraries

react-transition-group

You know how to apply CSS or inline styles to add transition between components being rendered 📚
You understand the 4 states of react-transition-group
You can animate elements after application's state changes

Animation Libraries

You know well at least one of the animation libraries
You can implement complex animations with multiple phases

CSS Animations

You know how write CSS animations - transitions, keyframes 📚
You know what properties to add in order to provide the best browser performance in an animation

Common effects

Scroll animations

You know how to animate elements after they appear in the viewport

Parallax animations

You know what parallax animation is and can implement it either manually or using one of the available libraries

Techniques

Internationalization

react-Intl

You know and use React-intl components 📚
You know how to create messages files using defineMessage api 📚
You know how to use useIntl hook

format.js

You know how to format a message passing values and date-time stamps
You know how to pluralize messages based on a passed value

Audio and Video

You know how to use standard HTML Audio and Video tags
You know which formats and codecs should be used to support all modern browsers

Streaming

HLS

You understand what HLS is, and are able to use it with a chosen player

MPEG Dash

You understand what MPEG Dash is, and are able to use it with a chosen player

Players

You have used at least one video player libraries

Misc

Service Workers

You understand what Service Workers are and the APIs they allow us to interact among different browsers
You can choose and install a SW plugin
You understand the challenges of updating a website that has a service worker cache enabled
You know how to create a service worker manually

Progressive Web Apps

You understand the usage of PWA and can recommend different modes depending on project needs
You're able to create a manifest yourself or generate one using a plugin
You are aware of the pros and cons and the differences between browsers

Drag & Drop

react-dnd

You can order a list of elements
You can drag and drop elements in specific areas
You can change how the dragging element looks like when being dragged
You can add validations on dragging and dropping elements
You can specify the proper backend to support mobiles and desktops

WYSIWYG Text editors

You have used one of the text editor libraries

CMS

You know at least one of the CMS platforms and can easily use its basic features (defining data models, editing, etc)
You know couple of the CMS platforms and can select one for the project to satisfy its requirements

Development Tools

Build tools

Webpack

You understand how webpack works 📚
You understand what webpack plugins are and you can add and configure when needed 📚
You understand the key concepts: entry, output, loaders and plugins
You know how to pass environmental variables to the application
You know how to configure a webpack from scratch to generate a project's build

Package managers

Yarn

You're able to use inline commands to add, install & remove packages 📚
You understand the benefits of yarn.lock file 📚
You know how to run package.json scripts 📚
You can upgrade packages using upgrade-interactive command
You know how to initialize and publish a new package

NPM

You're able to use inline commands to add, install & remove packages 📚
You understand the benefits of package-lock.json file 📚
You know how to run package.json scripts 📚
You can upgrade packages to newer versions
You know how to define new package.json scripts
You know how to initialize and publish a new package

Generators

create-react-app

You can generate a new app using create-react-app cli 📚
You can create and publish your own CRA template

plop.js

You can create components using plop command line tool 📚
You can create and update current templates

React

Storybook

You can prototype your components using storybooks
You can install and configure storybooks in your project
You can connect theme to your storybooks

prop-types

You know how to describe component's prop types
You know how to define shapes

redux-devtools

You use redux-devtools to see the current state and play with the state change history 📚
You can create and configure redux-devtools so your store is available to be inspected

react-hot-loader

You're able to install and configure react-hot-loader to refresh the build when component changes

Linters

eslint

You can run eslint and fix the warnings and errors 📚
You can add or exclude rules

prettier

You can run prettier and auto-correct errors 📚
You can add or exclude rules

stylelint

You know how to configure stylelint in within the project's build tools
You know how to add a set o rules, exclude exceptions and add rules according to project needs

Misc

dotenv

You know how to inject env variables via dotenv and use them when needed
You know when to commit env files to the repository and when not to

SSR & Prerendering

You are aware of how SSR works and understand its use cases
You understand the difference between prerendering + cache compared to full SSR

Gatsby

You know how to set up and add plugins to Gatsby
You understand the difference between gatsby-ssr, gatsby-node, gatsby-config and gatsby-browser files, and you know their roles
You understand the concept of data sources and how Gatsby creates a data store that you can later query using GraphQL
You know how to generate pages based on external sources (API, Markdown files)
You know how to dynamically create pages using createPages function
You know how to introduce a dynamic routing to a page

gatsby-image

You know how to use gatsby-image to optimise the way we get images

GraphQL

You know how to write static queries
You know how to write page queries
You know how to use page context variables to parametrize page queries
You know how to customize GraphQL schemas 📚

Netlify prerender

You know how to configure Netlify prerendering function

Functional programming

You know the key concepts of functional programming: pure functions, same input -> same output, no side-effects 📚

ramda

You know how to curry a function 📚
You know how to compose a function from other functions
You know how to pipe functions to produce a step by step processing sequence
You can use basic functions such as map, mapValues, find, sort, sortBy, concat, equals, cond, ifElse 📚

HTTP

Requests

You can explain what CORS is and understand its shortcomings

Axios

You know how to use axios to send HTTP request to an API endpoint 📚
You know how to handle errors returned in HTTP response 📚
You can configure axios to have a predefined base url for making requests
You know to add meta data (for example JWT token) to the request headers
You know how to transform data with transformResponse and transformRequest
You know how to serealize parameters with paramsSerializer
You know how to use interceptors
You know how to cancel a request

fetch

You know how to create an HTTP request using native fetch 📚
You know how to handle errors returned in HTTP response 📚
You know how to cancel a request

Websockets

You know how to connect to a websocket connection using either a native configuration or an existing library

Tools

humps

You know how to use humps to camelize or decamelize strings and object's keys
You know how to split strings and object's keys containing numerical values

query-string

You know how to parse URLs
You know how to create a query string out of an object

normalizr

You know how to define an object entity schema
You know how to normalize data returned from server
You can explain what are the benefits of using normalizr library

http-status-codes

You use descriptive status codes instead of number literals

Templating engines

You know how to use templating engines in various situations that require you to create a parametrized text file

Fonts

You know how to load custom webfonts available in Google Fonts 📚
You know how to load custom webfonts provided to you in a file
You understand the problem of webfont optimization and can apply best practices to a project 📚

SEO

You understand HTML semantics and use them properly
You generate page's content following best SEO practices

react-helmet

You can configure SEO meta tags, OG tags and page descriptions
You're able to generate descriptions based on content

Monitoring

You know how to configure a reporter for a chosen monitoring platform

Forms

Validation

yup

You know how to create schemas with proper types
You know how to extend a schema type
You know how to add transformations

File upload

You know how to send a HTTP request to upload a file to backend

React

You used and fulfill all requirements of at least one library that manages forms in react

Testing

You know how to test custom React hooks.
You know how to test a selector function.

jest

You know how to test components and functions
You know how to mock functions and global objects
You know how to add snapshot testing
You know how to add and configure Jest in the build tools

react-testing-library

You know how to install and configure it in the build tools
You know how to query for the component you want to test according to library best practices
You know how to mock server's response
You know how to test the redux store actions

jest-styled-components

You can install and configure it in a project
You can test if an HTML node has the proper style
You can create snapshots with readable classes and proper styles properties

redux-saga-test-plan

You know how to test when an action has been put for processing
You know how to provide an initial state for a saga execution
You know how to check if the expected action has been called

Mocking

nock

You know how to mock API calls with or without payload
You know how to set configuration header's and meta data
You can write assertions to check if API endpoint has been called with proper data

mockdate

You know how to mock Date object to return specific value in test environment

Performance

Lighthouse

You know how to run Lighthouse audits in Google Chrome DevTools
You can analyse Lighthouse results and draw conclusions to improve your web app

PageSpeed Insights

You know how to run PageSpeed Insights on your web app
You can analyse PageSpeed Insights results and draw conclusions to improve your web app

Services

Payments

You understand and can explain what PCI Compliance is
You can advise the client which SAQ document they need to fill out based on the chosen payment method and library
You have implemented payment logic in at least one project

Stripe

You can describe complete flow of a payment including the backend part

@stripe/react-stripe-js

You can install and configure the library in a project
You can implement a credit card payment form using Stripe Elements
You can implement Apple Pay payment
You can implement Google Pay payment

@stripe/stripe-js

You can install and configure the library in a project
You can implement a credit card payment form using Stripe Elements
You can implement Apple Pay payment
You can implement Google Pay payment

Functions as a Service

Netlify Functions

You know how to create and publish simple Netlify Functions implemented in NodeJS
You know how to configure Netfliy to deploy your function to a custom AWS account

Hosting

You can use at least one Cloud Service to deploy the web app for public access

Netlify

You know how to configure and deploy the app to Netlify
You know how to configure Netlify DNS to set custom domain for your app

Search engines

You know at least one library which implements advanced search logic in structured documents

Analytics

Google Tag Manager

You know how to configure GTM to track pages and events

Google Analytics

You know how to configure google analytics to track pages
You know how to configure events and set category, action and labels
You know how to configure user properties

Notifications

Firebase Cloud Messaging

You know how to configure FCM in a web app project
You know how to listen to message events
You know how to dispatch messages
You know how to subscribe to a topic

Tools

Design

Figma

You know how to extract style values (geometry, colours, fonts, etc.) from a design project 📚
You know how to extract image assets from a design project
You know how to extract vector icon asset from a project

Zeplin

You know how to extract style values (geometry, colours, fonts, etc.) from a design project
You know how to extract image assets from a design project
You know how to extract vector icon asset from a project

Browsers

You know what DOM is 📚
You know what CSSOM is 📚

Pixel pipeline

https://developers.google.com/web/fundamentals/performance/rendering

You know what reflow step is and what it does
You know what paint step is and what it does
You know what composite step is and what it does
You know when some of the pixel pipeline are skipped and you can utilise this knowledge to optimize web page's performance

Contribution

We are very open to contributions to extend or change the requirements based on your gut and experience. To contribute you can use a pull request which will be later validated by our technical team and added to the main docs.

If you will spot any issues please add them in the Issues section.

Credits

This page is maintained by the 🔹 Flairs.ai and 🇵🇱 Apptension teams.

If you would like to create a dedicated Developer Handbook for your company, you can e-mail us 👉 contact@flairs.ai

License

Built and maintained by Flairs and Apptension.

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Files

Frontend Developer.md

Latest commit

History

Frontend Developer.md

File metadata and controls

Frontend Developer

Company practices

React

Application state management

Styling

Date & Time

Routing

Visualizations

Animations

Internationalization

Audio and Video

Misc

CMS

Development Tools

SSR & Prerendering

Functional programming

HTTP

Templating engines

Fonts

SEO

Monitoring

Forms

Testing

Performance

Services