The Frontend Developer has the main responsibility of producing, maintaining, and supporting the business’s web-based software systems and platform. You have to take part in all aspects of software/site development cycles, all the way from the gathering of the necessary requirements for product code development and maintenance.

You have to…

No, it’s not mandatory but it’s useful. As a frontend developer, I write code in HTML, CSS, Javascript etc but I have a passion also to loves making UIs look fantastic, and shitty design makes me sleep uneasy.

If the designer gives you all the assets (images, redline document etc)…

Flexbox (also know as flex) is a very powerful layout tool. It solves many layout problems that designers have been struggling to solve for a very long time. Flexbox provides more control to developers who want to build naturally responsive layouts.

There is no need to use tables, floats, clearfix…

Styled-Components is a CSS tool which helps you organize CSS in your React project. The styled components remove the mapping between components and styles. This means that when you’re defining your styles, you’re creating a standard React component.

By using styled components you can Build small and reusable components, Reducing the risk of specificity clash, a mapping between styles and components.

Let’s started with a simple styled component demo

Install the styled components library in your project

npm install styled-components --save

Create a component

import React, { Component } from 'react';
import styled from 'styled-components';

const Title = styled.h1`
  color: red;
`;

class App extends Component {
  render() {
    return (
       <Title>Hello world</Title>
    );
  }
}

export default App;

Check their official website for more details
https://www.styled-components.com/

Originally published at www.rajibkarmaker.me on January 21, 2018.

What is Webpack?
Webpack is a module bundler for modern JavaScript applications. It takes your code, transforms and bundles it, then returns a new ‘compiled’ version. It’s also known as module bundler. Webpack is not limited to be used on the frontend, but it’s also useful in backend Node.js …

According to the docs, redux-saga is a library that aims to make application side effects (i.e. asynchronous things like data fetching and impure things like accessing the browser cache) easier to manage, more efficient to execute, simple to test, and better at handling failures.

Why You Should Use Redux Saga

…

A little bit of discipline can help you load the application faster and interact faster with any device. Your application should load fast and be interactive as soon as possible. For this, you have to follow some rules. Let’s get started

Minify and combine JS files
Minifying JS files will…

Git is a version control system for tracking changes in computer files and coordinating work on those files among multiple people. It is primarily used for source-code management in software development, but it can be used to keep track of changes in any set of files. wiki

As a developer…