DEV Community: shayan

Anything about customizing native scrollbar

shayan — Tue, 18 Aug 2020 15:11:16 +0000

Nowadays, even when you want to customize your list scrollbar. In this article, I would like to explain why I decided to use a native scrollbar beside any other scrollbar plugin, to have a fancy scrollbar that suits my template. Also, I talk about how to customize native scrollbar to make it fancy, and Pros and Cons of using the native scrollbar and customizing it.

The Story: Why I used a native scrollbar?

The story started from when I worked on a react project, and due to styles of that project we decided to customize the scroll styles so that it would be the same in any browser. As a result, we decided to use the tt-react-custom-scrollbars react plugin, which provided us with an amazing style for the scroll bar. But after about 5 months we recognized that this plugin was a bit laggy on some browsers, also it needed some customization to get matched with our containers, also it added some resources to our project. On the other hand, we couldn’t use it for the mobile version, as it became a bit laggy. So we searched for a new plugin, but after some time we found that it would be better to customize the native scrollbar instead of using a plugin.

How to customize?

Our target is Firefox, Chrome, and Safari. Thanks to CSS there are some properties and pseudo-elements, which provide us this feature. These properties and pseudo-elements are:

For Firefox you should use below properties as what Firefox mentioned about it but seems these two properties are not working correctly on Firefox. These properties work for Firefox of Windows and Linux OS.

scrollbar-width :
scrollbar-color :

And for Chrome, Safari, you should use these below pseudo-elements:

::-webkit-scrollbar: the background of the bar itself.
::-webkit-scrollbar-button : the directional buttons on the scrollbar.
::-webkit-scrollbar-track: the empty space “below” the progress bar.
::-webkit-scrollbar-track-piece: the top-most layer of the progress bar not covered by the thumb.
::-webkit-scrollbar-thumb: the draggable scrolling element resizes depending on the size of the scrollable element.
::-webkit-scrollbar-corner: the bottom corner of the scrollable element, where two scrollbars meet.
::-webkit-resizer: the draggable resizing handle that appears above the scrollbar-corner at the bottom corner of some elements.

So you can refer to below image to see how these props work

Well to apply simple customization you can do as bellow

.custom-scroll {
  height: 170px;
  overflow-y: auto;
  position: relative;
  background: #efefef;
  border: 1px solid #dedede;
  border-radius: 4px;
  scrollbar-width: thin;
  scrollbar-color: #0A4C95 #C2D2E4;
}

.custom-scroll::-webkit-scrollbar {
  width: 4px;
  background: yellow;
}

.custom-scroll::-webkit-scrollbar-track {
  -webkit-border-radius: 2px;
  border-radius: 2px;
}

.custom-scroll::-webkit-scrollbar-thumb {
  -webkit-border-radius: 2px;
  border-radius: 2px;
  background: red;
}

https://jsfiddle.net/shayanypn/bzr4hce0/41/

Pros and Cons?

In conclusion, although styling the native scroll wouldn’t work on all browsers, and devices (I mean mobile, that has a bit laggy behavior), but it seems to be a good solution for many cases, so regarding my experience, search, and tests, I can provide below a list

Pros

Reduce your implementation code, any plugin, it at least adds some DOM element to your code to be able to handle the scrollbar
Reduce the page resource, any plugin, it at least adds one JavaScript and one CSS resource to the page.
Increase performance, any plugin, needs at least a few milliseconds to initial.

Cons

Not all browsers support this.
It sometimes has issues with mobile devices.

Finally

Finally, after we tested this customization in many cases and browsers, we found that Firefox makes restrictions for customizing the scrollbar. These CSS properties work fine in Chrome on Windows, Linux, and Mac, also it works on Safari, but on Firefox, it works only on Windows and Linux. Also, for mobile, in many cases, we experience some lagging issues, and after many tests, we decide to use a native scrollbar without any customization, that’s the only case that works fine.

Resources:
https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color
https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-width
https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar

Buckle with React sub-component

shayan — Fri, 14 Aug 2020 02:43:49 +0000

React (also known as React.js or ReactJS) is an open-source JavaScript library for building user interfaces. React can be used as a base in the development of single-page or mobile applications. Regarding the React pattern, it brings simplicity and maintainability. Almost all projects I used, like SPA projects with React, or Next.js, and even ReactNative, I used these techniques to reduce code duplication, readability, and maintainability.

What exactly is a sub-component?

Sub-components mean combining a group component in one component, By using sub-components we can render the same view, but with a much more readable code and a reusable component. Sub-component can reduce a significant amount of code duplication and make your code so simple to read and understand.

Why do I need to use a sub-component in my project?

Of course, I believe that knowledge is a vital asset for every developer, but still we cannot find a use case, we barely use them during our daily development. As a result, let's find out why and when we need to use sub-component. To make it clear let's say we are going to implement a component to provide us Bootstrap card modules. So, let's first define what a Bootstrap card component contains. Well, a Bootstrap card component contains 3 parts, a header, a body, and a footer.

So if we suppose to build this component, it would be so simple,



//components/card.js
import React from 'react';

const Card = ({ cover_image, children, footer }) => (
  <div className="card">
    <img src={cover_image} className="card-img-top" />
    <div className="card-body">
      {children}
    </div>
    <div className="card-footer">
      <small className="text-muted">{footer}</small>
    </div>
  </div>
);

export default Card;

And you can use it in an application like this



<Card
  cover_image="https://dummyimage.com/400x120/dedede/000&text=cover image"
  footer="Last updated 3 mins ago"
>
  <h5 className="card-title">Card title</h5>
  <p className="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</Card>

But things get a bit hard when we need to add this feature in a way that footer and header get a DOM element, besides an image URL and text. So what can we do in that situation? Maybe one of the easiest ways is to pass a DOM element to footer and cover image or pass them another component, so our code would be like this



//components/card.js
const Card = ({ header = ‘’, children, footer = ‘’ }) => (
  <div className="card">
    {header}
    <div className="card-body">
      {children}
    </div>
    <div className="card-footer">
      {footer}
    </div>
  </div>
);


// App.js

<Card
  header={<img src="https://dummyimage.com/400x120/dedede/000&text=cover image" class="card-img-top" />}
footer={<div className="card-footer"><small class="text-muted">Last updated 3 mins ago</small></div>}
>
  <h5 className="card-title">Card title</h5>
  <p className="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</Card>

Yep, works fine. But just to consider it as clean and readable, I think it would be a bit hard to read or maintain it if the footer and header element grows. In conclusion, here is exactly where we need a sub-component, we can rewrite the above component as below, which is more readable and of course clean. Means, besides passing footer and header to the component, we can pass them as the children within the tag of Card.Header and Card.Footer.



<Card>
  <Card.Header>
    <img src="https://dummyimage.com/400x120/dedede/000&text=cover image" class="card-img-top" />
  </Card.Header>
  <Card.Body>
    <h5 className="card-title">Card title</h5>
    <p className="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
  </Card.Body>
  <Card.Footer>
    <small class="text-muted">Last updated 3 mins ago</small>
  </Card.Footer>
</Card>

How to build a sub-component?

So let’s go add a sub-component step by step to our Card component. As it’s obvious, we somehow should build the Card.Header, Card.Body, and Card.Footer and assign them to the Card component, then we should get them in the Card component and fill the component with their data. As React is a strong library, we can assign some parameter to the component, like below



import React from 'react';

const CustomComponent = ({...}) => (...);

CustomComponent.displayName = 'custom-component';
CustomComponent.SubComponent = AnotherComponent;

export default CustomComponent;

Dadaaaa, the secrets are revealed. So we should build Header, Footer, and Body as a component then assign them to the Card component, this way, they would be properties of our Card component. But how can we get them in the Card component so that we are able to render them in different parts? Don’t worry we will discuss this later, then stay tuned.

Firstly, let’s add Header, Body, and Footer components to the Card component. But before it, let's practice a thing together, let's say we have an object name MyObject which has a property named foo.



const MyObject = {
   foo: ‘bar’
};

console.log(MyObject.foo); // bar

We also can add another property to this object, and use it later.



const MyObject = {
   foo: ‘bar’
};

MyObject.new_prop = ‘hello world’;

console.log(MyObject.new_prop); // bar

Dadaaaa, this is the approach we are going to do to add those above components to our Card component.
So we can define our sub-component and then assign them to the Card component, just like below.



import React from 'react';

const Card = ({ header = '', children, footer = '' }) => (
...
);

const Header = ({ children }) => children;
Card.Header = Header;

const Body = ({ children }) => children;
Card.Body = Body;

const Footer = ({ children }) => children;
Card.Footer = Footer;

export default Card;

Just like the above example, now, we have access to Card.Header, Card.Body, and Card.Footer. So we can rewrite our code as below



<Card>
  <Card.Header>
    <img src="https://dummyimage.com/400x120/dedede/000&text=cover image" class="card-img-top" />
  </Card.Header>
  <Card.Body>
    <h5 className="card-title">Card title</h5>
    <p className="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
  </Card.Body>
  <Card.Footer>
    <small class="text-muted">Last updated 3 mins ago</small>
  </Card.Footer>
</Card>

As we use our Card sub-component within the Card tag <Card>...</Card>, they are detected as children for Card components, so we don’t have direct access to them, to get them as a prop and use them, wherever needed, for that important, we need to make a trick. We can assign a name to our sub-components by displayName prop, then filter the children element of the Card component to find them. So we can implement it as below



const Header = ({ children }) => children;
Header.displayName = 'Header';
Card.Header = Header;

const Body = ({ children }) => children;
Body.displayName = 'Body';
Card.Body = Body;

const Footer = ({ children }) => children;
Footer.displayName = 'Footer';
Card.Footer = Footer;

And then our Card component would be like this.



import React from 'react';

const Card = ({ children }) => {
  const header = React.Children.map(children, child => child.type.displayName === 'Header' ? child : null);
  const body = React.Children.map(children, child => child.type.displayName === 'Body' ? child : null);
  const footer = React.Children.map(children, child => child.type.displayName === 'Footer' ? child : null);
  return (
    <div className="card">
      {header}
      <div className="card-body">
        {body}
      </div>
      <div className="card-footer">
        {footer}
      </div>
    </div>
  );
}

const Header = ({ children }) => children;
Header.displayName = 'Header';
Card.Header = Header;

const Body = ({ children }) => children;
Body.displayName = 'Body';
Card.Body = Body;

const Footer = ({ children }) => children;
Footer.displayName = 'Footer';
Card.Footer = Footer;
export default Card;

You can find the whole code here in this repository

Join the discussion

I would love to get some feedback here.

Ember.js in-element feature

shayan — Mon, 10 Aug 2020 06:55:29 +0000

In this article, I am going to talk about a new feature of Ember.js on portal rendering which comes in V 3.20. Also, I am going to build a simple sample application using this feature. For more, let’s stay tuned.

Single-page applications use to load and render their code under one root DOM element, which brings a limitation for the developers. Say you need to render an element into your application. Easy right? That element is mounted to the nearest DOM element and rendered inside of it as a result. But! What if we want to render that element outside of the div somewhere else? That could be tricky because it breaks the convention that a component needs to render as a new element and follow a parent-child hierarchy. The parent wants to go where its child goes.

In a library like React.js developers can use ReactDOM.createPortal(child, container) to achieve this goal. In the Ember.js framework, developers could use community addons like ember-wormhole or ember-elsewhere.

Ember.js recently released a new version 3.20 which introduces a new helper for this approach. It’s {{in-element}}.



{{#in-element this.myDestinationElement}}
  <div>Some content</div>
{{/in-element}}

To use the helper, pass in a DOM element to target (this.myDestinationElement in the example below) and a block to render:

This new public API behaves a little differently from the private API:

For the public API {{in-element}}, by default, the rendered content will replace all the content of the destination, effectively becoming its innerHTML. If you want it to be appended instead of replacing the content, you can pass in insertBefore=null.
In the private API {{-in-element}}, the rendered content was appended to any existing content in the destination. Developers should use the public API, {{in-element}}, and discontinue using {{-in-element}}.

For using this helper, first, you need to update your ember to version 3.20. Try below command then



npm install -g ember-cli@3.20.0

And then you can create a new ember project and use this feature.

Note: By default, Ember renders the main application after all body elements, and appends the directory to <body>. So, if you suppose to render the outer element below your vendor resources file, it doesn’t work. As a result, if you suppose to render your outer elements, below your main application element, you should specify the rootElement of your Ember app located in PATH-TO-PROJECT/app/app.js and then you can add your outer element below that.

Sample Use-case

To create a simple use-case of this new feature let create a really simple sample.

So first of all update to new ember version



npm install -g ember-cli@3.20.0

then create a new ember project



ember new emberjs-in-element-demo

So, then let create our outer element. for that you should edit PROJECT/app/index.html file as below



...
  <body>
    {{content-for "body"}}
+    <div id="modal_root"></div>

    <script src="{{rootURL}}assets/vendor.js"></script>
    <script src="{{rootURL}}assets/emberjs-in-element-demo.js"></script>

    {{content-for "body-footer"}}
  </body>
...

Then let create our desire component, and name it as render-out



ember g component render-out
ember g component-class render-out

Then we should specify our destination element in the component.



// app/components/render-out.js
import Component from '@glimmer/component';

export default class RenderOutComponent extends Component {
  myDestinationElement = document.getElementById('modal_root')
}

and use the new helper



{{!-- app/components/render-out.hbs -}}
{{#if @renderOut }} 
  {{#in-element this.myDestinationElement}}
    {{yield}}
  {{/in-element}}
{{else}}
  {{yield}}
{{/if}}

To explain the above code, if a user passed the @renderOut property, then the passed children would render in the <div id="modal_root"></div> element, otherwise, it renders as before.
So you can use it as



{{!-- app/templates/application.hbs -}}
<RenderOut @renderOut=true>
  This content render inside of <div id="modal_root"></div>
</RenderOut>

You can check my sample code in this repository.

Resources

Join the discussion

I would love to get some feedback here.

Secrets of reduce in JavaScript

shayan — Wed, 29 Jul 2020 16:05:49 +0000

JavaScript is an amazing language, almost all websites use it and it gives breath to any webpage by its spectacular features.

One of the amazing methods of javascript is reduce which is a method that executes a reducer function (that you provide) on each element of the array, resulting in a single output value.

With this reducer, you can do many amazing things like summing a list of numbers, converting an array to an object, or even more like sorting and optimizing an array.

In this article, I am going to explore the reduce method and show some examples of its usage.

arr.reduce(callback, initialValue);

callback pass accumulator, currentValue, index, array

So let’s see it in action, and start from simple examples

1. Summation of an array of a number or object.
It can be used for summing grades of a student to get an average or to calculate the total cost of an order.

[1, 2, 3, 4].reduce((sum, item) => sum + item, 0)
// 10

and

[
  { id: 1, product: "shoe", cost: 85.0 },
  { id: 2, product: "sacks", cost: 15.0 },
  { id: 3, product: "belt", cost: 40.0 },
].reduce((sum, item) => sum + item.cost, 0)
// 140

2. Converting an array to an object or an object to an array.
Let’s say you have a list of names and want to make them into an array of student objects. Or you want to list products in an order.

[
  'Shayan',
  'Sara',
  'George',
  'Brent',
  'Elisabeth'
].reduce((obj, item, index) => ({
  ...obj,
  [item]: {
    id: index,
    name: item,
  }
}), {})

// {
//   Shayan: { id: 0, name: "Shayan" },
//   Sara: { id: 1, name: "Sara" },
//   George: { id: 2, name: "George" },
//   Brent: { id: 3, name: "Brent" },
//   Elisabeth: { id: 4, name: "Elisabeth" }
// }

and

[
  { id: 1, product: "shoe", cost: 85.0 },
  { id: 1, product: "sacks", cost: 15.0 },
  { id: 1, product: "belt", cost: 40.0 },
].reduce((ary, item) => [...ary, item.product], []);

// ["shoe", "sacks", "belt"]

3. Filtering duplicate items within an array of item

[
  'Shayan',
  'Brent',
  'George',
  'Brent',
  'Shayan',
  'Brent'
]
.reduce((ary, item) => (ary.includes(item) ? ary : [...ary, item]) , []);
// ["Shayan", "Brent", "George"]

and

[
  'Linux', 
  'Mac',
  'Windows',
  'Mac',
  'Linux',
  'Mac'
].reduce((obj, item, index) => ({
  ...obj,
  [item]: {
    id: index,
    name: item,
    count: obj[item] ? ++obj[item] : 1
  }
}) , {});
// ["Shayan", "Brent", "George"]

and

[
  'Linux',
  'Mac',
  'Windows',
  'Mac',
  'Linux',
  'Mac'
].reduce((obj, item) => ({
  ...obj,
  [item]: {
    id: obj[item] ? obj[item].id : Object.keys(obj).length,
    name: item,
    count: obj[item] ? ++obj[item].count : 1
  }
}) , {});
// {
//   Linux: { id: 0, name: "Linux", count: 2 },
//   Mac: { id: 1, name: "Mac", count: 3 },
//   Windows: { id: 2, name: "Windows", count: 1 }
// }

Know any other uses, please comment below :)

Resources:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce

Using Styled-component with Ember.js

shayan — Wed, 29 Jul 2020 16:04:39 +0000

What is Styled component:

Styled Components are one of the new ways to use CSS in modern JavaScript. It is meant to be a successor of CSS Modules; a way to write CSS that's scoped to a single component, and not leak to any other element in the page
So, instead of having

.my-button {
  Background-color: blue;
  Color: white;
}

<button class=”my-button”> click me </button>

We can have

const MyButton = styled.button`
  background-color: blue;
  color: white;
`

<MyButton> click me </MyButton>

Styled Components was created because of the following reasons:

Automatic critical CSS: Styled Components keeps track of which components are rendered on a page and injects their styles and nothing else, fully automatically. Combined with code splitting, this means your users load the least amount of code necessary.
No class name bugs: Styled Components generates unique class names for your styles. You never have to worry about duplication, overlap or misspellings. Easier deletion of CSS: it can be hard to know whether a class name is used somewhere in your codebase. Styled Components makes it obvious, as every bit of styling is tied to a specific component. If the component is unused (which tooling can detect) and gets deleted, all its styles get deleted with it.
Simple dynamic styling: adapting the styling of a component based on its props or a global theme is simple and intuitive without having to manually manage dozens of classes.
Painless maintenance: you never have to hunt across different files to find the styling affecting your component, so maintenance is a piece of cake no matter how big your codebase is.
Automatic vendor prefixing: write your CSS to the current standard and let Styled Components handle the rest.

Using Styled Component with Ember.js

You have this ability to use Styled-Component in Ember.js just like other libraries and frameworks, with a little bit different patterns.
As you know Ember.js has its architecture which makes it easy to understand and use. In Ember.js all components defined under the app/components/ directory, and styled-components also defined as a component under Ember.js architecture.
In order to use styled-components we need to install an addon named ember-styled-components which you can find here.
Let’s first install the addon using below command

npm install ember-styled-components

Then you can define your styled-component as a component under the Ember.js component directory, but besides using a template your component only has a js file.

So let’s create files named wrapper-component.js and title-component.js under the component directory and define your style

// wrapper-component.js
import styled from 'ember-styled-components';

/**
 * Create a wrapper component that renders a <section> with
 * some padding and a papayawhip background
 */
export default styled.section`
  padding: 4em;
  background: papayawhip;
`;

Now you can use this component under your template, or in other components like this

// title-component.js
import styled from 'ember-styled-components';

/**
 * Create a title component that renders an <h1> which is
 * centered, palevioletred and sized at 1.5em
 */
export default styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

and finally, use them in your template

{{!-- For old version of Ember --}}
{{#wrapper-component}}
  {{#title-component}}Hello World, this is my first styled component!{{/title-component}}
{{/wrapper-component}}

{{!-- For New version of Ember --}}
<WrapperComponent>
  <TitleComponent>Hello World, this is my first styled component!</TitleComponent>
</WrapperComponent>

Although Ember.js architecture brings simplicity and understandability to it, here I think it causes a bit of an issue, as you have to define a component under the component directory for using a styled component, maybe it would be better if we could use the styled-component directly in the templates.

I tried to use a styled-component and build a sample designed as below.

For organizing the code, I place all styled-components under a styled directory so that I can understand where this component is and styled-components or an ember.js component.

Let see, how I handle my wrapper

// app/components/styled/wrapper.js
import styled from 'ember-styled-components';

export default styled.section`
  background: #e4e7fd;
  padding: 4em;
  min-height:  100vh;
  font-family: 'Lato', sans-serif;
`;

// template
<Styled::Wrapper>
  Your content is here
</Styled::Wrapper>

Also, you can handle passing params to your styled-component.

// app/components/styled/input-form.js
import styled from 'ember-styled-components';

export default styled.input`
    margin: 0;
    color: ${props => props.inputColor || '#000'};
    background: ${props => props.bgColor || '#fff'};
    border-radius: 4px;
    width: 100%;
    padding: 10px;
    border: 1px solid #dedede;
    box-sizing: border-box;
    font-size: 15px;
    margin-bottom: 15px;
    &::placeholder {
        color: ${props => props.placeholderTextColor || '#aaa'};
    }
`;


// template
<Styled::FormInput
    name="username"
    placeholder="Email"
    type="text"
    @inputColor="#ff9900"
    @bgColor="#222"
/>

You can find the repo here
https://github.com/shayanypn/ember-styled-component-login

Resources:
https://www.robinwieruch.de/react-styled-components

How to avoid distraction when you work remotely or from home

shayan — Tue, 24 Mar 2020 13:57:06 +0000

These days because of new challenges named COROVIRUS most of the people have to work from home all over the world, which seems to be fun, or like Friday afternoon, But there are some problems when you suddenly jump from working full-time in a company area or outside, to working in your home, in quarantine condition, and things go hard if you have family or even children.

Every person should understand that working remotely or from home is a type of working, not an opportunity to rest, or being with family, and strongly under current situations. The important thing you should do is to make it in a way which this type of working has benefits for both employees and his/her company. By working remotely, an employee has this chance to not go out, so it can prevent his/her family from the chance of getting the infection with COIV-19, and also the company should still use its employee for its living. Co-operation between employees and the company can bring satisfaction for both.

Here are my tips from my idea which spent almost 3 years working remotely.

Convince others that you dedicate a special time of your daily working: your parents, wife, children should not have any contact with you during your working hour, perhaps dedicate a room for your working or even make a separate partition in your home. They should imagine that you are not at home, so anything that happens, they themselve should handle it.
Convince yourself about the working time: you should spend all of your attention working during working hours. It's a little hard, but by practice, you can handle it. No checking twitter, no youtube video, not checking personal email., try to keep your family out of your area.
Make the place just like your working place: it is so important that your new working place be somehow the same as previous one if you commonly sit in a good light place, or near the window or air conditioning you should try to provide the same situation or at least something near it right now. Your body understands the situation so as more the situation be the same as before, as more you feel like before and can focus on your job.
Communicate more with your mates: Communication is a key to engage you with the working process. In working remotely you almost lose 60% of communication, so try to fill it in some way. the more you try to engage with the process the more you feel you are in the office just like before
Remove entertainment thing from your working area: no one watches you, not your mate, not your boss, no one, so you have to focus on work and try not to distract, as result, try to omit everything which distracts you, like silent cell phone, photo, books and the things that may distract you.
Try not to put others in the loop: perhaps the worst thing for working remotely is that you stayed in the loop, because you don’t have access to others directly so you should wait for them to respond to you. For this is important, I suggest paying attention to your communication tools, it could be Slack, Whatsapp, discord or any way you and your mate are working.
Didn’t get his/her meaning? Let's have a call: this is also an important aspect in your working process, as you are not near others, and don't have direct access to them, maybe you don’t get the process/workflow/their meaning just like before, and it’s typical. So try to call your mate and discuss the subject/process/how to make it work, …. And other things. Distance should not make it a problem with your communication. Of course, it may reduce the efficiency of your working period, but you should try to improve your efficiency as much as you can.

In the end

As I mentioned before, it’s hard to jump suddenly from an outside working person to a remote person, you need time to focus on working, on how to concentrate on your job, but with a little effort, you can make it.

I hope all the best for you all, and I hope with all the people's help we will be able to pass this challenge just like before.

Essential steps for applying to an IT job

shayan — Mon, 23 Mar 2020 16:14:48 +0000

On this blog, I try to explain about the minimum steps every job seeker needs to follow for finding a job. This way you, your effort would be more effective and it increases your chance of getting a job.

The process of getting a job has become more complicated these days. Many companies have special processes/steps for getting new employees because of their requirements. Finding a job process contains steps seeking it, and then applying, interviewing and finally getting the offer. These steps may take long from a month to a year.

As a result, knowing well about the process and the efficient way we should follow each step is essential for all who want to find a job.

First of all, you need to seek a job, for this there are many resources around you that you can look for. By a little search on the internet, you can find many resources to find your wanted job from full-time to remote or even freelance.
After that, you need to apply for it. Here are the steps we want to discuss more about it.
Most job opportunities need some items for applying.

The basics of them are:

Your personal information like first name, last name, email address,
Your professional social media like LinkedIn, GitHub, …
Your C.V.(resume)
A Cover Letter(motivation letter)

Professional social media

The purpose of this is to show that you are active in your field, you are a person of searching, love to share with other people, like to try new things and be around in this field for a while.

C.V.(Resume)

For C.V.(resume) There are many good resources on the internet on how to prepare a good resume, but let me tell you, the most important thing you should know is that a resume should be different from a job to another job. The person who wants to read your resume should become inspired from it, so you should focus on the job requirement on your resume, for example if you want to apply for a job which focuses on the Frontend special technique so you should focus on that specific technique on your resume and try to bold it.
The resume should be clean, and readable. For getting sure about your resume you can share your resume with some people like your friend who know about your job or some of your mates to make sure your resume follows the correct path. For a professional resume, there are some good articles on the internet also there are online tools that check your resume and tell you some good tips for following.

Cover Letter

The purpose of this is to show a short explanation of your experience and your motivation before someone reads your resume. The cover letter is like when you go to a mobile store and want to buy a new phone but not sure about the specific phone, so you ask the shopper to compare or describe a phone for you and he tries to compare two phones or convince you to buy one. That’s exactly when a cover letter means that you should somehow convince the reader to read more and get motivated to check your resume and ask you for an interview.

Cover Letter build from three parts:

Your information
The author information(the person you send the cover letter to)
The content

Of course, when you apply for a job they take your personal information, but you should include them in your cover letter as well, in most cases, they only print the cover letter without any other information and read them till they get convenience to ask one of them for an interview.

The most important thing you should consider is Author Information, “to whom it may concern” is not working, even it can make it worse. Why? The company wants to see if you are active enough to search about them, to make time for them to search for the correct person. Search for their HR, Recruiter, Talent acquisition, CTO, CEO anyone who is in charge, you should find someone and your cover letter means to him, also you should mention the information of the author, like his/her full name, role, basic address.

And finally the content, you should put all your effort here to show yourself, your skills, and convince them to hire you. Don’t evade just go straight about the main subject, try to show your strong point, and show your skill set that matches the job requirement. Don’t make it too long and don’t make it too short, it should be for around 2-4 minutes reading. Also, remember not to use the same cover letter for multiple jobs, because the interviewer understands it and it shows you are not respected for that job, or you are being lazy and not doing your correct job.