1. Data Manipulation
   Hitting the API’s, fetching the data and then manipulating data based on the requirements on the client side.
2. Data Population
   Showing the manipulated data in a presentable manner

Correct data population can vastly impact user experience. We live in a mobile-first era, and thus, appropriate data population according to the screen sizes becomes even more critical. The user doesn’t care the amount of data till the time it is easily readable.
Not deviating from the topic in hand, tabular representation of data has always been difficult for me, and the only reason was – RESPONSIVENESS
I have been working in Angular from quite some time, and whenever I had to use a tabular representation of data, I used to search for libraries for responsive tables. I won’t deny that there aren’t some very powerful libraries out there that help with pagination, sorting and filtering of data within the table but that comes under DATA MANIPULATION. They even claim to be responsive, but the libraries FAIL under 2 conditions:
When a different type of data is to be populated
Whenever there are 3-4 types of data in a single row like a checkbox, string, number, drop-down and buttons, the library is bound to fail.

When there are many columns with variable width
Column names and cell data in a table are rarely of equal widths, and thus the variable width disturbs the orientation of the table, in turn breaking the responsiveness. After working with multiple libraries like ngx-datatable and trying to customize frameworks like Bootstrap or Angular Material by their CSS, I decided to solve the mystery of responsive tables once and for all!

Give a man a fish, and you feed him for a day. Teach a man to fish, and you feed him for a lifetime.

– Maimonides

So let me teach you to develop YOUR OWN RESPONSIVE table, where you can control the column widths according to the viewport/screen width and have multiple types of inputs in a row.
The only thing we need – CSS Flexbox.

CSS Flexbox

The Flexible Box Module, usually referred to as flexbox, was designed as a one-dimensional layout model, and as a method that could offer space distribution between items in an interface and powerful alignment capabilities.

– developer.mozilla.org

In simple terms, Flexbox helps to align items in row and columns.
If you haven’t heard about it yet, I would recommend you to go through this:
For Basics: https://www.freecodecamp.org/news/learn-css-flexbox-in-5-minutes-b941f0affc34/
For a Comprehensive Guide: https://medium.com/@js_tut/the-complete-css-flex-box-tutorial-d17971950bdc
Flexbox Cheatsheet:
https://yoksel.github.io/flex-cheatsheet/
Our aim is to show data in tabular representation on bigger/wider screens (width > 768px) and in collapsed/card view of each row on screens less than 768px wide.

There are two things we need to understand to implement responsiveness of the tables:

1. Flex Basis – Flex basis specifies the initial length of the table cell, which here is our flexible item.

Available values:

flex–basis: number | auto | initial | inherit;
Number: A length unit or percentage
Auto: This is the default value. It takes the length of the content inside it.
Initial: It sets the property to its default value
Inherit: It inherits the property from its parent

2. Media Queries
   Whenever we need to control how our elements look on different screen sizes (desktop, mobile, tablets), we use media queries to specify break-points. We can write different styling for the same element on either side of the break-point.

There are 4 standard break-points that we use:

1. 576px – small devices
2. 768px – tablets
3. 992px – desktops
4. 1200px – large desktops

This can be used with:

1. min-width –specified minimum width and up
2. max-width – less than the specified maximum width

For Example – and I personally use:

// Large devices (desktops, less than 1200px)
@media(max-width:1199.98px){...}
// Medium devices (tablets, less than 992px)
@media(max-width:991.98px){...}
// Small devices (landscape phones, less than 768px)
@media(max-width:767.98px){...}
// Extra small devices (portrait phones, less than 576px)
@media(max-width:575.98px){...}
Source: getbootstrap.com

Also Read: Angular Authentication Using JWT

CONTROLLING WIDTH OF COLUMNS/CELL

We’ll use flex-basis to control the width of each column. Flexbox works with the help of two things – Flex Container and Flex Items. The row becomes the flex container, and the table cells are flex items. If the content is more than the cell width, it wraps to the new line.  We consider the table row (flex container) to be at 100% width and thus divide the column widths accordingly in percentages (%).

Here, the row – table-headers is considered 100% of the width. It also serves as the flex-container.The row is then divided into 5 columns of variable widths:
30% + 20% + 30% + 10% + 10% = 100%

flex-basis-30 = 30% space of 100%
flex-basis-20 = 20% space of 100%
flex-basis-30 = 30% space of 100%
flex-basis-10 = 10% space of 100%
flex-basis-10 = 10% space of 100%

This creates the columns with the desired widths, and on increasing the screen-width, the table cells (flex-items) adjusts according to their flex-basis percentage value.

ADDING DIFFERENT TYPES OF DATA IN TABLE CELLS

Once you have specified the width, then sky is the limit. You can add anything and everything as data in the cells which HTML permits – from dropdowns to checkboxes, radios buttons to lists, images to block buttons.

COLLAPSING ROW INTO CARDS ON MOBILE VIEW

Tabular data is not recommended on mobile views due to the complexity and unease of viewing data. One thing that we can do to tackle this is that we can collapse the row into a card and then view tabular data via card view.
We’ll be using media queries to style the cards and cell data. One thing that is great about flex-basis is that it is like any other CSS property and thus we can change the width of the columns on different screen widths. This gives us true flexibility and empowers us to make the table TRULY RESPONSIVE.

Wrapping Up: 

You must be thinking of how the title of this blog justifies the content. Tables and that too responsive table have been a dreaded element for me, up until now! Any framework, be it Angular, Vue.js or React that I worked with and any project that I took had a table in it, and therefore I had to find a permanent solution. Hence I decided to learn it.  
I agree that the libraries and frameworks out there provide great tables with functionalities like sorting, filtering, and pagination, but those are data manipulation. Once you create responsive tables with flex-basis and media queries, you can programmatically manipulate the data being shown, i.e. filter, sort, and search: which in turn helps you understand how things work under the hood of the libraries you use. 
You might argue that this is like re-inventing the wheel. I consider this as understanding how the wheel is developed in the first place so that you can make a better, faster, more efficient wheel.

Handpicked Content for You:

• A Detailed Guide to CSS Animations and Transitions
• Angular Authentication Using JWT
• Swift 101| Things Every Beginner Should Know!
• AI in 2019 – What Tech Companies Are Betting Big On?

The post Responsive Tables in Angular, Vue.js, React using CSS appeared first on EngineerBabu Blog.

• Transforms
• Transitions
• Keyframes

PART A: TRANSFORMS

Transforms helps to change your web elements in all kinds of wonderful ways – from moving the element to re-sizing it, from rotating the element to tilting it.
And the best part – You can alter anything and everything without changing the document flow.
There are four significant aspects of transforms:

1. Translate
2. Scale
3. Rotate
4. Skew
   Let’s dig a little deeper, shall we?

1. Translate

Translate changes the coordinates of the element. It is used to change the appearance of the component on a 2D plane.
Translate means to simply move the element from one position to another on the webpage. You can translate an object on X-axis, Y-axis or both.

Moves the element on the X-axis
Syntax: transform: translateX(200px); or transform: translateX(-200px);
Moves the element on the Y-axis
Syntax: transform: translateY(200px); or transform: translateY(-200px);
Using shorthand
Syntax: transform: translate(x-axis, y-axis)
Example: transform: translate(200px, 200px);
Alert!
transform: translate(200px); [will only translate the element along the X-axis]

2. Scale

One can play with the size of the image, along with both the axis – X and Y. Scaling distorts the shape of the element and can degrade the quality of the element. A number greater than 1 will increase the size and a decimal less than 1 will decrease the size.

Scaling along the X-axis - transform: scaleX(3);
Scaling along the Y-axis - transform: scaleY(0.5);
Using the shorthand - for scaling along X and Y axis together -
transform: scale(3 , 0.5); or transform: scale(0.5);

3. Rotate

You can rotate the element either clockwise or counter-clockwise. The unit of measurement used is degrees. A positive value will rotate the element clockwise, and vice versa for the negative element. This rotation would also happen along X, Y and Z axis.

Understanding the rotation in CSS animations is one of the trickiest parts, and thus a lot of people fails to utilize the real potential of this feature.
Along X-axis
Imagine a marshmallow getting roasted while being rotated on a bonfire. You have to visualize the elements to turn into the page along with the X-axis, and that’s what rotation will look like on X-axis. We won’t see the 3D rotation, all we would be able to see is the height of the element changing.

Syntax: transform: rotateX(45deg);

Along Y-axis
Imagine a dancer on a pole. The elements will be rotating into the page along Y-axis. All you would notice is the width of the component getting changed.

Syntax: transform: rotateY(45deg);

Along Z-axis
This is the best possible orientation that you would work with while using rotation, as you can see the element actually rotating. One can also modify the clockwise and counter-clockwise movement with positive and negative rotation values respectively. For this, try imagining an arrow going into the page and the element rotating with respect to that arrow.

transform: rotateZ(45deg) – clockwise rotation
transform: rotateZ(-45deg) – counterclockwise rotation

4. Skew

Skewing an element means tilting the component. It has both positive and negative values, and like rotation, it is measured in degrees (deg) too.
Positive X value bends the element to the left, and vice versa for the negative X. Likewise, a positive Y value dips the element downwards, and vice versa. By default, if X or Y aren’t stated in the transform, it will shift the element with respect to the X-axis.

Along X-axis
transform: skewX(45deg) or skew(45deg);
Along Y-axis
transform: skewY(80deg);

5. Combining transforms

One can also apply multiple transforms into a single transform statement. The order does matter (sometimes) as the second transform will apply on the first transform and the third will apply on the result of the first two transforms.

transform: translateX(200px) rotateX(45deg) scaleY(1.5) skewX(45deg);

All of these transforms will take effect on some user events like hover, click, focus, active, etc. To see the magic in action, you can add the transforms in these events.

.element-to-animate{
display: block
}
.element-to-animate:hover{
transform: translateX(200px) rotateX(45deg) scaleY(1.5) skewX(45deg);
}

PART B: TRANSITIONS

If you got a chance to go over the code above, you might have noticed a jerk during the state change on hover; that’s precisely what transitions are for. CSS Transitions help in making the animation fluid.
One can control the CSS transitions with the help of the following properties:

• transition-property
• transition-duration
• transition-timing-function
• transition-delay

1. transition-property

These are the CSS properties that one can use transitions on. This ranges from playing with margins and paddings to background and borders. You can either apply a transition to a specific feature or to a complete list. A comprehensive list of all the properties that come under this purview can be found here.
Applying transition property to a specific CSS property

transition-property: background-color;

Applying a transition to the entire list of CSS properties

transition-property: all;

2. transition-duration

The time duration for which the animation will be in play. This can easily be measured in seconds (s) or milliseconds (ms). It is advisable to use seconds as it makes them easily readable – even your fellow developers at the office won’t get annoyed by you!

transition-duration: 0.5s;

3. transition-timing-function

Who doesn’t like SPEED! 
Speed is something that can make or break the user experience with your animation; therefore it is advisable to control it. The way you can accomplish it is by using transition-timing-function.
Pupils at CSS 3 team were kind enough to provide us with some in-built values for speed, like ease, ease-in, ease-in-out 
And in case, you wish to possess total command over the speed – Use Bezier Curves.

transition-timing-function: ease;
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

4. transition-delay

This helps in creating a pause between the event getting fired that starts the animation and the actual start of the animation. Simply put, transition-delay – delays the animation. It is measured in seconds (s) or milliseconds (ms).

transition-delay: 0.5s;

Shorthand:

transition: (property) (duration) (transition-timing-function) (transition-delay);

The order for the two time-oriented functions, i.e. duration and transition-delay matter – So stay alert!

Using Transforms and CSS Transitions Together

STATE 1: NORMAL

.element-to-animate display: block; transition: transform 1s ease 0.2s, background 1s; }

STATE 2: HOVER

.element-to-animate:hover{ background: black; transform: translateX(200px); }

For transitioning between STATE 1 and STATE 2, one can apply the transition to all the properties separately with individual timings, or if you wish to apply CSS transitions on all properties in STATE 2, then:

transition: all 1s ease 0.2s;

PART C: KEYFRAMES

The keyframes help in changing the animation from one to another at certain times.
One can play with keyframes in two ways:

1. From – To approach
2. Percentage Approach

1. From – To Approach

In this approach, there are only 2 states during the animation – start state and end state.
Syntax:

@keyframes animation_name {
            from { }
            to { }
}

To animate an element (e.g., a Car) to move horizontally from its initial position:

@keyframes drive{
from {
transform: translateX(-200);
}
to {
transform: translateX(1000px);
 }
}
.car{
animation-name: drive;
animation-duration: 3s;
animation-fill-mode: forwards;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-timing-function: ease-in;
animation-direction: normal;
}

2. Percentage Approach

We cannot use from-to in @keyframes as there is more than 1 state now. The percentage approach breaks down the animation into various intermediate states including a start and end state. The start state is indicated by 0%, and the end state is indicated by 100%. There can be as many intermediate states you want, but it is advised to keep the segregation of states uniform throughout.
Example: 0% – 25% – 50% – 75% – 100%

@keyframes jump{
0% { transform: translateY(-50px) }
50% { transform: translateY(-100px) }
100% { transform: translateY(-50px) }
}

• Animation shorthand

One can also use this concise format to write the animations:
animation: (animation-name) (animation-duration) (animation-fill-mode) (animation-timing-function) (animation-iteration-count) (animation-direction) (animation-delay);
Note: The animation-delay will always come AFTER animation-duration. Apart from them – time-oriented functions and the order of other properties in shorthand doesn’t matter.
Example:

.car{
animation-name: drive;
animation-duration: 3s;
animation-fill-mode: forwards;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-timing-function: ease-in;
animation-direction: normal;
}

Can be re-written as:
.car{
animation: drive 3s ease-in infinite normal 2s;
}

We now have two animations – drive and jump, which we wish to add on the “car” element. We can do this through a single line code by using, “Chaining Animations.”

• What is Chaining Animations?

Playing with multiple animations is a breeze with CSS. Comma separation technique can be used to chain the animation and run one animation after the other. For example,

.car{
animation: drive 3s ease-in infinite normal 2s, jump 2s ease 4 alternate reverse;
}

Classifications of Animation Properties:

• • Which Animation to use?
    animation-name: Name of the animation which is indicated by the keyword after @keyframes

• • What to do when the animation ends?
    animation-fill-mode: Tells what to do with the element being animated outside the animation window.

• • If you wish to repeat the animation “n” number of times, use,
    animation-iteration-count: It helps to repeat the animation. It can either have a number value or if you want the animation to play continuously, then use “infinite.”

• • If you wish to reverse the direction of the animation, use,
    animation-direction: You don’t need to write a separate animation all together just to reverse the animation. You can apply this to play with the current animation, and it’s direction.

In From – To Approach:
reverse: to - from
alternate: from-to -> to-from -> from-to
alternate-reverse: to-from -> from-to -> to-from
In Percentage Approach
reverse: 100% - 0%
alternate: 0% - 100% -> 100% - 0% -> 0% - 100%
alternate-reverse: 100% - 0% ->0% - 100% ->100% - 0%

• • Like SPEED? Control it using,
    animation-timing-function helps to control the speed with which the animation starts, behaves and ends. There are some in-built values like ease, ease-in and you can write your own using the cubic-bezier(n,n,n,n). Play with it here.
  • Do you procrastinate? CSS animations can too!
    Using animation-delay will start the animation few seconds/milliseconds after the event gets fired.

Wrapping Up

It could be a bit complicated to get used to CSS jargons at first. But once you get used you’ll realize that CSS Animations and CSS Transitions are simply marvelous.

Thanks for reading. We hope this article helped you. If it did, please give it a thumbs-up and feel free to drop your comments in case you have any queries. You can Chat with Us right now or visit our website for more details. Also, if you have exciting uses of CSS transitions or CSS animations that you’d like to share, we’d love to hear from you.

Handpicked Content for You:

• What are UI and UX? A Designer’s Guide to the Tech Industry
• Best eCommerce Platform for Small Business – 2019
• What to choose Native, Hybrid or Web app?
• How Can AI Help Small Businesses?

The post A Detailed Guide to CSS Transitions and Animations appeared first on EngineerBabu Blog.