Skip to content

Latest commit

 

History

History
1145 lines (746 loc) · 61.6 KB

Frontend Developer.md

File metadata and controls

1145 lines (746 loc) · 61.6 KB
Raw

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 use Slack statuses in line with company policy (remote working, vacationing, in a meeting, etc)
  • You know how to create groups and channels

Confluence

  • You know how to create Confluence pages

Small Improvements

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

Jira

  • You know how to create tickets and write comments

Email

  • You can configure local email client
  • You can configure email signatures

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 to incorporate them in React lifecycle 📚
  • You know component's lifecycle and know how to use each of the phases. 📚
  • You know and can use 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 know how to write a custom React hook. 📚
  • You understand pros and cons of using useCallback 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. 📚

[Optional] Components

[Optional] downshift

  • You used it in a project 📚

[Optional] react-day-picker

  • You used it in a project

Application state management

Redux

  • You can describe full Redux flow 📚
  • You know how to dispatch Redux action (outside React context)
  • You know what it does and can use combineReducers function
  • You know how to apply a middleware / enhancer when creating redux store
  • You know what is a difference between middleware and enhancer

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 listed 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.
[Optional] reduxsauce
  • You know how to create reducers
  • You can create your own action creators and action types.

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 know the difference between only changing state object and returning a changed state object
  • You can explain how immer works internally.

[Optional] Immutable.js

  • You know how to create an immutable structure 📚
  • You know how to read data from the immutable structure
  • You know how to create a new data structure with modified state out of an existing one
  • You know how to use the store with immutable structures using redux-immutable 📚
  • You know how to convert a json structure into immutable structure, and vice-versa
  • You know how to manipulate big structures and which operations you should avoid in order to keep performance

[Optional] seamless-immutable

  • You know how to read data from the immutable structure
  • You know how to create a new data structure with modified state out of an existing one
  • You understand the difference between immutable.js and seamless-immutable 📚
  • You know how to transform regular structures into seamless immutable structures, and vice-versa
  • You know how to reconcile native functions (map, sort, etc) with seamless immutable functions (flatMap, merge, sort, etc)

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 run asynchronous functions (e.g. fetch) after something dispatches an action
  • You know how to select data from Redux state using selector functions inside sagas. 📚
  • You understand the concept of Javascript generators 📚
  • You know how to wait for an another action from inside the running saga. 📚
  • You know to sequence Sagas and how to run them in parallel 📚
  • 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 know how to wait for a routine fulfillment inside a component
  • 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

Apptension React Boilerplate

  • You know how to initialize a project using Apptension React template of create-react-app generator
  • You know how to run a linter
  • You know how to define a new Redux module (Reducer, Saga, Selector)
  • You know how to create a new route and its component
  • You understand the difference between src/routes and src/shared/components directories
  • You can use plop to generate modules and components
  • You know where translation files are stored
  • You know how to add a new locale to the app

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 create a styled component for a primitive element 📚
  • You can extend styles of an existing component 📚
  • You can apply global styles 📚
  • 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 📚

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

Reset libraries

normalize.css
  • You can explain benefits of the library
  • You know how to use this library in a project

[Optional] CSS Modules

  • You can separate styles that are applied globally from the local ones 📚
  • You know how to add CSS modules to the build tool
  • You understand the benefits of having CSS with a local scope

[Optional] BEM

  • You know what BEM is and can describe its components 📚

[Optional] Sass

  • You understand the SCSS syntax and file extensions 📚
  • You know how to create and use scss variables
  • You know how to create and use mixins 📚
  • You know how to use operators 📚
  • You know to how install and configure it in build tools

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

[Optional] Material-Ui

  • You have used the library in a project 📚
  • You know how to use material-ui theme API
  • You know how to customize component's styles and behaviour

[Optional] antd

  • You have used the library in a project 📚

Icons

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

[Optional] material-ui-icons

  • You know how to use, extend and modify icons from the library

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 📚

[Optional] Mailchimp templates

  • You know how to create mailchimp templates 📚
  • You know how to bind variables to the templates

Date & Time

  • You know how to create a Date object for a specific date 📚
  • You know how to compare native date objects
  • 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

[Optional] react-datetime

  • 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 and compare date objects

[Optional] moment.js

  • 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 and compare date objects

[Optional] dayjs

  • 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 and 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 use in order to render a needed component in a given occasion
  • 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 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

[Optional] nivo

  • You can create simple graphs and incorporate with React life cycle 📚
  • You can incorporate application theme to modify graphs style 📚
  • You can animate and add interactions to the graphs so it interacts with the React component lifecycle

[Optional] vx

  • You can create simple graphs and incorporate with React life cycle 📚
  • You can incorporate application theme to modify graphs style
  • You can animate and add interactions to the graphs so it interacts with the React component lifecycle

[Optional] d3.js

  • You can explain the concept of data driven documents
  • You know how to create basic graphs with specific axes 📚
  • You know how to interact with the SVG's nodes and bind events
  • You know how to customise the styles of a graph to change its shape and colours
  • You can scale the chart accordingly to the page size
  • You can use d3 transitions to animate SVG elements

Canvas

[Optional] Pixi.js

  • You know how to create pixi application structure 📚
  • You know how to use pixi ticker
  • You know how to use pixi filters
  • You know how to render text
  • You know how to create primitive and complex shapes
  • You know how to load and render sprites
  • You know how to animate objects
  • You know how to scale objects depending on device pixel density ration
  • You know what are the pros and cons of 2D and 3D renderers
  • You know how to use and animate a texture mesh 📚
  • You know how to apply object pooling pattern
  • You know how to apply spatial hash algorithm to optimize renders

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

[Optional] framer-motion

  • You can animate elements after application's state changes 📚

[Optional] react-spring

  • 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

[Optional] anime.js

  • You can animate elements after application's state changes

[Optional] gsap

  • You can create animations using from, to, fromTo
  • You can use built-in easing functions
  • You are familiar with the multiple GSAP APIs and can decide which one to use
  • You can create a custom easing function
  • You can create timelines, play animations in sequence or in parallel

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
[Optional] scrollmagic
  • You know how to use scrollmagic and understand the pros and cons
  • You know how to mitigate possible mobile performance losses

Parallax animations

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

Techniques

[Optional] FLIP

https://aerotwist.com/blog/flip-your-animations/

  • You can explain FLIP animation technique
  • You know how to apply FLIP in the React's component lifecycle

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

Players

  • You have used at least one video player libraries

[Optional] react-player

  • You know how to style the player

[Optional] jwplayer

  • You know how to implement the player in a React environment
  • You know how to style the player
  • You know how to configure the player to allow multiple quality levels

[Optional] 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

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

[Optional] Slate

  • You have used the library in a project

[Optional] Froala

  • You have used the library in a project

Development Tools

Build tools

Webpack

  • You understand what webpack is used for and what problem it solves 📚
  • 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

[Optional] Rollup

  • You can configure a build process using Rollup's API
  • You know the key concepts: input, output, targets and plugins
  • You can add needed plugins and are able to configure them

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 object 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 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

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 📚
  • You know and use concepts such as immutability, first-class functions, referential transparency and recursion

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 📚

[Optional] lodash

  • You use functions as input for other functions
  • You can use arbitrary functions to manipulate arrays and objects
  • You can use debounce and throttle

HTTP

Requests

  • You know what cookies are
  • You know what HTTP headers are
  • You can explain what CORS is and understand its shortcomings
  • You can explain what HTTP only cookie is
  • You know which parts of the HTTPS request is encrypted
  • You know different values for content-type header and understand when to use them

fetch

  • You know how to create an HTTP request using native fetch 📚
  • You know how to set HTTP headers in a request
  • You know how to read HTTP headers sent in a response
  • You know how to handle errors returned in HTTP response 📚
  • You know how to cancel a request

Axios

  • You know how to use axios to send HTTP request to an API endpoint 📚
  • You know how to set HTTP headers in a request
  • 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 how to read HTTP headers sent in a response
  • 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

Websockets

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

[Optional] pusher-js

  • You know how to configure Pusher JS
  • You know how to subscribe/unsubscribe to a channel
  • You know how to bind/unbind to events

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

[Optional] Mustache

  • You can render a mustache template using an object with key:values
  • You know how to ignore a mustache tag so it's not replaced but rendered in HTML instead
  • You know how to use sections and manipulate data to not render null or use functions
  • You know how to use partials

[Optional] Handlebars

  • You know how to render a handlebars template
  • You know how to parse nested objects
  • You know how to use handlebars functions
  • You know how to create a helper function
  • You know how to escape HTML
  • You know how to use partials

[Optional] markdown-it

  • You customise the markdown styles
  • You can escape or skip html tags
  • You can add plugins
  • You can use the APIs functions to manipulate data

[Optional] react-markdown

  • You customise the markdown styles
  • You can escape or skip html tags
  • You can add plugins
  • You can add parsers

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

[Optional] fontfaceobserver

  • You know how to load a font
  • You know how to react to a font that has been loaded or failed to load

[Optional] webfont-loader

  • You know how to load a font
  • You know how to react to events changes
  • You know how to configure multiple font options

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

[Optional] sentry-javascript

  • You know how to configure Sentry for React

[Optional] snyk

  • You know how to configure Snyk to find packages vulnerabilities

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

[Optional] react-dropzone

  • You know how to change styles when dragging an element to dropzone area
  • You know how to validate file name, type and size

React

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

[Optional] formik

  • You know how to submit a form
  • You know how inject Formik with Hooks
  • You know how to validate form's data before & after submission
  • You know how to add fields dynamically
  • You know how to render a form with initial data
  • You know how to display errors based on data validation
  • You know how to clear forms data

[Optional] react-hook-form

  • You know how to inject react-hook-form in the component's lifecycle
  • You know how to register an input
  • You know how to validate form's data before & after submission
  • You know how to pass data to be processed by the backend
  • You know how to add fields dynamically
  • You know how to render a form with data
  • You know how to display errors based on data validation
  • You know how to clear forms data

[Optional] redux-form

  • You know how to validate form's data before & after submission
  • You know how to pass data to be processed by the backend
  • You know how to add fields dynamically
  • You know how to render a form with data
  • You know how to display errors based on data validation
  • You know how to clear forms data

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

Common Application Modules

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

Payments

  • You understand and can explain what PCI Compliance is

Authentication

  • You can use at least one 3rd party authentication service

[Optional] Firebase Auth

  • You know how to configure Firebase Authentication Service
  • You know how to add firebaseui with proper configurations
  • You know how to set authentication tokens and redirect users after authentication

[Optional] Auth0

  • You know how to configure the tenant
  • You know how to add application configuration
  • You know how to redirect users to use Auth0 frontend UI
  • You know how to style and customise Auth0 UI

Search engines

[Optional] fuse.js

  • You know how to create a fuse structure based on an object
  • You know how to search for items using $and and $or logical operators
  • You know how to index a fuse structure

Backend & DevOps

Functions as a Service

Netlify Functions

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

[Optional] Firebase Cloud Functions

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

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

[Optional] Wordpress

  • You understand how wordpress work, and are able to customise the designs of a given application

[Optional] Contentful

  • You can create a contentful structure
  • You know how to use Contentful's assets CDN
  • You know how to incorporate Contenful's API in your build process
  • You can feed the application internationalization system with the content from Contentful

[Optional] Webflow

  • You are able to chose one of the plans available, customise, and content

DNS

  • You know what a CNAME record is and when to use it
  • You know what an A and AAAA records are and when to use them
  • You know what TXT records is and when to use it
  • You know how to register a new domain with a chosen DNR
  • You know how to switch NS from default ones set by DNR to another provider
  • You know what a MX record is and when to use it

DNS Services

Route 53
  • You know how to define a new hosted zone
Cloudflare
  • You know how to define a new DNS zone

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

[Optional] Invision

  • 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

[Optional] Adobe XD

  • 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 Apptension team.

You can see more of our work here: Apptension portfolio.

License

MIT License

© 2023 Apptension Sp. z o.o.

Built and maintained by 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.