Remove duplicate items from arrays using reduce() method explained with examples
24th November 2018We have explained use cases of reduce() method in this and this article. Eventually there are lots of use cases like removing duplicate values from arrays. We will explain this case here with some examples. Remove duplicate value use case We have had a situation while we needed to filter our array to get only…
Perfect understanding of align-items, align-content and justify-content in FlexBox with examples: Part 3
18th November 2018In the part1 and part2 of these article series we learnt about align-items and justify-content properties. In this part we will finish off with align-content property which is a useful one when we have flex items with more than one line of items. The align-content property We can get advantage of this property only when…
Perfect understanding of align-items, align-content and justify-content in FlexBox with examples: Part 2
18th November 2018In the previous article, we learnt about align-items property and briefly talked about align-content and justify-content properties. In this article we will talk about justify-content and we will see how similar it is to align-items. The justify-content property Basically justify-content aligns individual items inside a flex container along the main axis. Therefore what this means is…
Perfect understanding of align-items, align-content and justify-content in FlexBox with examples: Part 1
17th November 2018In this article we will be exploring align-content, align-items and justify-content properties in FlexBox. Then we compare them and will understand their differences and similarities. I have created a few pens to demonstrate the task as well. align-content, align-items and justify-content similarities Generally the main purpose of these three properties in FlexBox is justify and alignment…
Nested components in React; How to render a child component inside a parent component:Part 2”
10th November 2018In the previous article we learned how to render a child component inside a parent component with a simple example. However we need to demonstrate nested components using a more complex example. We will use our example from this article where we grouped an array of objects based on a value with some modification. A nested…
Nested components in React; How to render a child component inside a parent component:Part 1
6th November 2018Once we start writing real world applications in React we need to learn about nested components. How we could actually render a child component inside a parent component and how to pass the state and props. In a series of articles we are going to cover this with examples. Passing props down Basically we have…
Build a social profile card component using FlexBox
3rd November 2018In this article we will demonstrate a social profile card component built and designed using FlexBox. The techniques look simple but it helps to improve our FlexBox knowledge to build more complex components. I got the idea from freshman and tweaked it for our needs. This is the pen for what we are going to explain:…
Difference between overflow-wrap and word-break with examples
2nd November 2018Generally we could use overflow-wrap and word-break properties to break he words where needed. We will demonstrate the difference here and explain the different use cases. Overflow-wrap property Basically we have two values for this property: /* Keyword values */ overflow-wrap: normal; overflow-wrap: break-word; Using normal the word might only breaks if it needed to when…
How to use background-size property in different use cases
1st November 2018There was a situation where I had to manipulate background-size property in a different use case. Generally we all might have experienced where we had to use a non-responsive image as a background and try to fit it in with different techniques. Background-size property is a very useful property to adjust the image background when…
Styling components in React without third-party libraries
27th October 2018Basically three are three ways of styling components in React without using any other libraries like styled components. We will cover them all in this article with different examples. Style components with inline styling Generally we know inline styling as the very first and basic styling in CSS. It is perfectly safe and clean to…