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 lead the business’s web-based and software development efforts.

List of roles and responsibilities

User Interface: In the user interface, You have to work closely with the person who takes the responsibility of photoshop/sketch like a visual designer and UX designer. You have to play a leading role in the translation…

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) then it’s ok otherwise you have to collect the design assets from photoshop or sketch. That’s why you have to learn minimal photoshop and sketch.

From my experience, I have learned it’s not a good practice to disturb designer any silly issue like (need a transparent image, image optimization 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 or any other ‘hacks’, and it is easy to get started with. Flexbox is based on understanding a few concepts.

• The main axis and the cross axis
• Flex containers (parent) and flex items (children)
• Flexbox inception

Let’s make a layout using flex

<nav class="container"> 
<div>Home</div>
<div>Search</div>
<div>Logout</div> 
</nav>

give the…

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 development as well.

What can Webpack do for you

• It can run Babel transpilation to ES5, allowing you to use the latest JavaScript features without worrying about browser support.
• It Can run a development webserver.
• Bundle your all resources.
• Transpile CoffeeScript to JavaScript
• Concatenating library files
• Image optimization
• Compile SCSS to…

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

Redux became the popular and standard for state management in ReactJS applications. Redux provides an interface for dispatching actions to reducers which leads to transitions between states that other components (or Sagas) may react to. Redux Saga is an approach to the organization of side effects. …

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 remove unwanted characters (whitespace, tab etc.) and comments from the script. This will help compress the file making it smaller in size. The files will download comparatively faster as it is minified.

Avoid global variable Whenever you try to use a variable, JavaScript first searches that in the very immediate…

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 one of the basic tools we can’t escape using is making use of git for our workflow.

git diff — Check the changes between two commits, two files.

git diff -w — In order to ignore differences caused by whitespaces when comparing lines, you can use it with the -w…