Image for post
Image for post

Coding standards tell developers how they must write their code instead of each developer coding in their own preferred style, they will write all code to the standards outlined in the document. This makes sure that a large project is coded in a consistent style.

Coding style is made up of numerous small decisions based on the language:

  • Tabs or spaces for indentation
  • How and when to use comments
  • Proper naming of variables and functions
  • Appropriate use of white space
  • Code grouping
  • Patterns to be used and avoided

There is always someone in your team who is arguing about tabs…


Image for post
Image for post

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…


Image for post
Image for post

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


Image for post
Image for post

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…


Image for post
Image for post

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.


Image for post
Image for post

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…

Image for post
Image for post

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


Image for post
Image for post

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…


Image for post
Image for post

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…


Image for post
Image for post

The term API stands for Application Programming Interface. An API works as a middleman, taking the request from one piece of software, and then replying with the appropriate response from the other. APIs work quietly in the background, making the interactivity we expect For example — Order a pizza, hotel booking, post on social media (facebook, twitter) etc..

Why good APIs are important?

An API is a set of routines, protocols, and tools for building software applications. API specifies how software components should interact. So your software all functionality depends on the API. If API down then your software functionality…

Rajib karmaker

I love Technology and Like to Help Others with any knowledge that I have. My website — www.rajibkarmaker.me

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store