Frontend Developer.md

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 cos of git rebase vs git merge 📚
• You review PRs carefully and leave your comments 📚
• You add proper label in pull requests
• You interact with a repository using SSH 📚
• You create your branches under the proper folder (feature, fix, hotfix)
• You name your commits properly 📚

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 reference a Jira ticket in your commit
• You know how to verify when a build check failed

Communication

Slack

• You know how to create groups and channels

Confluence

• You know how to create Confluence pages

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
• You can read and write emails

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. 📚

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.

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

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. 📚

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

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 📚

Reset libraries

normalizr.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

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

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

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

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

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

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)

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

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

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

Generators

create-react-app

• You can generate a new app using create-react-app cli 📚

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

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)

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

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

fetch

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

Websockets

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

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

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

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

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

Functions as a Service

Netlify Functions

• You know how to create and publish simple Netlify Functions implemented in NodeJS

Search engines

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

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

---

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 👉 [email protected]

License

© 2020 Flairs Sp. z o.o.

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.