DEV Community: Nitin Hepat

How To Combine PDF Files on a Mac: A Simple Guide for Busy Developers

Nitin Hepat — Sun, 06 Oct 2024 19:04:25 +0000

How To Combine PDF Files on a Mac: A Simple Guide for Busy Developers

Ever found yourself juggling multiple PDF files? Whether it's project documentation, client contracts, or technical manuals, managing several PDFs can quickly become overwhelming. The solution? Combine them into one single file. It's easier to manage, share, and looks way more professional.

In this guide, I’m going to show you how to combine PDF files on a Mac using two different methods: PDFBoosters.ai, a quick and secure online tool, and Preview, a built-in Mac app that’s surprisingly powerful. Let’s dive in.

Why Should You Combine PDF Files?

You’ve probably already felt the pain of managing several PDF files for a single project or client. Combining them can save you time, make your files more organized, and create a professional presentation. Here’s why merging PDFs is a no-brainer:

Better organization: All relevant documents in one file—no more hunting through folders to find the right one.
Easy sharing: Send just one file instead of a bunch of attachments.
Polished appearance: It looks way more professional to have everything neatly packaged in a single PDF.

Now that you know why it’s worth doing, let's explore two ways to merge PDFs on your Mac.

Method 1: How to Combine PDF Files on a Mac Using PDFBoosters.ai

If you’re like me, you appreciate a no-fuss, quick solution. That’s where PDFBoosters.ai comes in. It’s an online tool that lets you merge PDF files effortlessly—without the need for installing any software.

Step-by-Step Guide:

1. Go to PDFBoosters.ai’s Merge Tool

First, head over to PDFBoosters.ai and select the Merge PDF tool from the homepage. No need to mess around with downloads or complicated setups—everything runs in your browser.

2. Upload Your PDFs

Once you're on the Merge PDF page, you can upload your files by either dragging them into the tool or clicking the Choose Files button. You can select multiple PDFs at once, or add them one by one if needed.

3. Add More PDFs

Forgot to upload a file? No worries! PDFBoosters allows you to add more files even after you’ve already started. Just hit the Add Files button and upload the additional documents.

4. Rearrange the Pages

Now that all your files are uploaded, you can reorder them by simply dragging and dropping. This is useful when you want the pages to be arranged in a specific order.

5. Click “Save & Download”

Once you’ve got everything in the right order, click Finish. PDFBoosters.ai will merge your PDFs together in a matter of seconds—even for larger files.

6. Download Your Combined PDF

After the process is complete, you’ll be able to download the newly merged PDF file. It’s as simple as that!

Why Use PDFBoosters.ai?

No installations: You don’t have to install anything, making it perfect for quick merges on the go.
Fast and secure: Your files are processed quickly and securely, without long-term storage.
Easy to use: With its simple drag-and-drop interface, merging PDFs has never been easier.

Whether you’re at home, in a café, or on a client’s site, PDFBoosters.ai makes merging PDFs a breeze, especially when you need things done fast.

Method 2: How to Combine PDFs Using Preview on Your Mac

If you prefer not to use online tools, or maybe you just want to use what’s already available on your Mac, Preview is another fantastic option. It’s a built-in app that can do way more than just view PDFs.

Here’s how you can merge PDFs using Preview:

1. Open the PDFs in Preview

Start by opening the first PDF you want to combine. Just right-click on the PDF file, select Open With, and choose Preview. Then, do the same for the second PDF, opening it in a separate Preview window.

2. Enable Thumbnail View

To make things easier, go to the View menu and select Thumbnails. This will show a sidebar with all the pages of your PDF.

3. Drag and Drop Pages

Now, open the second PDF and do the same—enable the thumbnail view. From here, simply drag the pages from the second PDF’s thumbnail sidebar and drop them into the first PDF’s thumbnail sidebar. You can reorder the pages if needed.

4. Save the Combined PDF

Once you’ve got everything in the right order, go to File > Export as PDF and save your newly combined document. Voila! You’ve merged your PDFs right on your Mac without any extra software.

Bonus: Automating PDF Merging with JavaScript

For developers who want to automate the process or build it into their own apps, you can use JavaScript to merge PDFs programmatically. A popular library for this is pdf-lib, which makes it super easy to combine multiple PDFs with just a few lines of code.

Here’s a quick example:

import { PDFDocument } from 'pdf-lib';
import fs from 'fs';

async function mergePDFs(filePaths) {
    const mergedPdf = await PDFDocument.create();

    for (const filePath of filePaths) {
        const pdfBytes = fs.readFileSync(filePath);
        const pdf = await PDFDocument.load(pdfBytes);
        const copiedPages = await mergedPdf.copyPages(pdf, pdf.getPageIndices());
        copiedPages.forEach((page) => mergedPdf.addPage(page));
    }

    const pdfBytes = await mergedPdf.save();
    fs.writeFileSync('merged.pdf', pdfBytes);
}

mergePDFs(['file1.pdf', 'file2.pdf']);

This post first published on PDFBoosters.ai

Implementing virtual scroll using react

Nitin Hepat — Sat, 27 Jun 2020 14:09:59 +0000

This post first published on
TechBoxWeb

In the era of web application, You might need to deal with a huge amount of data and that data need to be rendered on DOM.

In web application, DOM is a very sensitive matter you need to deal with it very carefully because else your application will be laggy or slow.

For eg. you have data of 100,000 rows. Its huge amount of data and rendering total data, It's going to be a very expensive operation

So, here virtual scroll concept comes for rescue.

Virtual scroll means we will just renders the data which is visible in viewport and other will render as user scroll and comes into the viewport and data which is not in viewport will get remove from DOM.

without wasting time let's implement virtual scroll using react

Find Github and Demo here

Github Repo

Demo

Contents:

What we will going to do?
Setting up a react project
creating virtual scroll component
performance optimization

What we will going to do

As you can see in the above diagram, only rows into the viewport section is visible to the end-user, so we will going to rendered that elements into the DOM with some buffered rows as you can see into the diagram, Because If user scroll we can show already rendered elements until we calculate the visible rows to be shown

we will be having scroll event onto the viewport, as user scroll we will run scroll function and we will calculate next visible rows to be shown

Setting up a react project

you can create initial setup for react using below command

npx create-react-app reacct-virtual-scroll

create-react-app is a react utility which helps you to setup react project, want to know more in detail then please go through this post

Creating a virtual scroll component

virtual scroll component is responsible for showing only data which is visible into the viewport and and adding and removing element from the dom when we scroll

import React, { useRef, useState, useEffect } from 'react';

const VirtualScroll = (props) => {
  const totalHeight = +props.rowHeight * +props.totalElements + 'px';
  const [scrollTop, setScrollTop] = useState(0);

  useEffect(() => {
    scrollEle.current.addEventListener("scroll", scroll);

    return () => {
    }
  })
  const scrollEle = useRef();
  let startNodeele = Math.max(0, Math.floor(scrollTop / +props.rowHeight));

  let visibleItems = props.items.slice(startNodeele, startNodeele + props.visibleItemsLength);
  let transformValue = `translateY(${startNodeele * +props.rowHeight}px)`;
  console.log('rendering', Math.random());

  const scroll = () => {
    setScrollTop(scrollEle.current.scrollTop)

  }
  const scrollContainerStyle = {
    height: props.height,
    overflowY: "scroll"
  }
  const totalHeightStyle = { height: totalHeight };
  const mainContainerStyle = { transform: transformValue }
  return (
    <div className="scrollContainer" ref={scrollEle} style={scrollContainerStyle}>
      <div style={totalHeightStyle}>
        <div className="main-container" style={mainContainerStyle}>
          {visibleItems}
        </div>
      </div>
    </div>
  )
}


export default React.memo(VirtualScroll);

let's understand the code

You guys need to understand one thing here, we have did some math to calculate which elements can be visible in viewport and which element can be removed.

 const scrollContainerStyle = {
    height: props.height,
    overflowY: "scroll"
  }
  const totalHeightStyle = { height: totalHeight };
  const mainContainerStyle = { transform: transformValue }
  return (
    <div className="scrollContainer" ref={scrollEle} style={scrollContainerStyle}>
      <div style={totalHeightStyle}>
        <div className="main-container" style={mainContainerStyle}>
          {visibleItems}
        </div>
      </div>
    </div>
  )

As you can see in above code, we have three parent div then inside that we are rendering items

First parent div, is where we going to add scroll event listner and overflowY with scroll

Second div, Its height is (individual element height * total elements). For eg, If we have 100,000 rows and each row height is 70px then total element height will be (100000 * 70)px

The third div, we are going to show a limited number of row for eg. 50 rows at a time, then obviously all elements will position to the start of the div and scroll will be at current scroll position, technically we achieve to show only a few rows but we need to position rows correctly so whenever we scroll then it would be visible to the end-user, so that's why we added transform: translateY() property, it will position the third div vertically and the value for this is starting position of the visible row

let startNodeele = Math.max(0,Math.floor(scrollTop / +props.rowHeight));

In the above code, we did some math to calculate the startNodeele , scrollTop is nothing but current scroll position and we are dividing it with individual rowHeight

If you are react geek, I think above code is well explanatory to understand

Using Virtual scroll Component

App.js

import React, { useState } from 'react';
import './App.css';
import VirtualScroll from './components/virtualScroll/VirtualScroll';

const totalEle = 100000;
const gridHeightStyle = {
height:'70px'
}
const grids = new Array(totalEle).fill(null).map((data, index) => {
  return (<div style={gridHeightStyle} key={index} className="grid">
    <h3>Lorem Ipsum is simply dummy text of the printing {index}</h3>
  </div>)
})


function App() {
 
  return (
    <VirtualScroll
    height="300px"
    totalElements = {totalEle}
    rowHeight={70}
    items={grids}
    visibleItemsLength={50}

    >
    </VirtualScroll>
  
  );
}

export default App;

As you can see, In the above code we have created an array of 100000 elements, and passed that to VirtualScroll component and also we need some more input like to height of the scroll div, individual row height, visibleItemlength, for making this component more reusable

Performance optimization

There are some specific area we need to take care of

we should have minimal operation in scroll function
You can also add throttling into the scroll function like when user stops scrolling then only calculate visible items
React component rendering should be minimal, as you can see in the example we are re-rendering component only when scrollTop is changing

Conclusion:

Here we developed virtual scrolling using react with some mathematical calculation. Might be you have some other approach to do virtual scroll, But I suggest implement some functionality by yourself instead of using the npm package. It helps you to grow and understand the concept

Dark/light website theming with CSS variables

Nitin Hepat — Sat, 06 Jun 2020 06:15:02 +0000

Nowadays, while developing a website or web application, You need to take care of the theming of the website. You need to think about how easily theming can be manageable with minimum CSS.

So, for your help, we have CSS variables. CSS variables are custom properties, which can be defined once and reused a number of time

body {
--main-color: black;
}

in above example we defined --main-color as a custom variable which can be used anywhere

like below

.container {
background-color: var(--main-color)
}

Note: CSS variables should be defined at global level to use inside child elements and for more info please go through this post

we will be building day and night mode theme switcher application using CSS variables and vanilla javascript

If you want to access code you can check out github repository and also see demo live

Github repo

Demo

Let's get started

Creating a theme.css file

Always remember theming css should not mixed with other css, so keep it seperately


body {
    margin: 0;
    padding: 0;
}

.dark {
    --bgColor: #161625;
    --color: white;
    --headerBg: #161625;
}

.light {
    --bgColor: white;
    --color: black;
    --headerBg: #E8E8E8;
}

we have created a simple configuration for dark theme and light theme where we defined background color, font color, and header background.

we have created a basic application where we just changing the color scheme for header, body background, and font color. For advanced you can manage the number of things.

Creating A User Interface

HTML file

<!DOCTYPE html>

<head>
    <link rel="stylesheet" href="./theme.css" />
    <link rel="stylesheet" href="./style.css" />
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
  
</head>

<body id="body-container" class="light">
    <header>
        <nav class="header-container">
            <div class="logo-section">
                <span class="logo">Logo</span>
            </div>
            <nav class="menu-section">
                <ul class="header">
                   
                    <li>
                        <i class="fa fa-home" aria-hidden="true"></i>
                        home
                    </li>
                    <li>
                        <i class="fa fa-user" aria-hidden="true"></i>
                        about us
                    </li>
                    <li>
                        <i class="fa fa-id-card"></i>
                        contact us
                    </li>
                    <li>
                        <i id="theme-action" class="fa fa-moon-o" aria-hidden="true"></i></li>
                </ul>
            </nav>
        </nav>
    </header>
    <main class="main-container">
        <div class="grid">
            <div class="img-section">
                <img src="assets/1.jpg" />
            </div>
            <h3>Lorem Ipsum is simply dummy text of the printing </h3>
           
             
        </div>
        <div class="grid">
            <div class="img-section">
                <img src="assets/2.jpg" />
            </div>
            <h3>Lorem Ipsum is simply dummy text of the printing </h3>
           
             
        </div><div class="grid">
            <div class="img-section">
                <img src="assets/3.jpg" />
            </div>
            <h3>Lorem Ipsum is simply dummy text of the printing </h3>
           
             
        </div><div class="grid">
            <div class="img-section">
                <img src="assets/4.jpg" />
            </div>
            <h3>Lorem Ipsum is simply dummy text of the printing </h3>
           
             
        </div><div class="grid">
            <div class="img-section">
                <img src="assets/5.jpg" />
            </div>
            <h3>Lorem Ipsum is simply dummy text of the printing </h3>
           
             
        </div><div class="grid">
            <div class="img-section">
                <img src="assets/5.jpg" />
            </div>
            <h3>Lorem Ipsum is simply dummy text of the printing </h3>
           
             
        </div><div class="grid">
            <div class="img-section">
                <img src="assets/3.jpg" />
            </div>
            <h3>Lorem Ipsum is simply dummy text of the printing </h3>
           
             
        </div><div class="grid">
            <div class="img-section">
                <img src="assets/4.jpg" />
            </div>
            <h3>Lorem Ipsum is simply dummy text of the printing </h3>
           
             
        </div>
    </main>
</body>
<script src="app.js"></script>
</html>

we have created a simple layout where we have header menus and some grids in the main body. In the header we have a theme toggle button which will be used for switching between light and dark theme.

we have enabled light theme by default as you can see in HTML above we have added light class in body

Designing a web page

let's write css for designing a webpage


.header li {
    display: inline-block;
    list-style: none;
    padding: 0 10px;
    font-weight: bold;
    font-size: larger;
    cursor: pointer;
    
}
body {
    background-color: var(--bgColor);
    transition: ease-in 1s;
}
.header-container {
    display: flex;
    background-color: var(--headerBg);
    color: var(--color);
    height: 56px;
    transition: ease-in 1s;
}
.logo-section .logo {
    font-weight: bold;
    font-size: x-large;
    margin-left: 10px;
}
.header-contaieer .menu-section {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.header-container .logo-section, .header-container .menu-section {
    display: flex;
    align-items: center;
    flex-basis: 50%;
}
.main-container {
    display: flex;
    width:80%;
    margin: 0 auto;
    justify-content: space-between;
    flex-wrap: wrap;
}
.main-container .grid{
    flex-basis: 300px;
    height: 300px;
    box-sizing: border-box;
    border: 1px solid #888;
    border-radius: 5px;
    padding: 5px;
    margin: 10px;
    color: var(--color);
}

.grid .img-section img {
    width: 100%;
    height: 200px;
}

As you can see we have used flexbox layout for designing a webpage and uses a CSS variable to the point so while switching between themes we don't need to care about the CSS part.

let's write Business logic for handling switching functionality between themes

Business logic

const bodyContainer = document.body;
const themeAction = document.getElementById('theme-action');

const currentTheme = localStorage.getItem('theme');

if(currentTheme && currentTheme == 'dark'){
        bodyContainer.classList.replace('light','dark');
        localStorage.setItem('theme','dark');
        themeAction.classList.replace('fa-moon-o','fa-sun-o');

}

themeAction.onclick = () =>{
    if(bodyContainer.classList.contains('light')){
        bodyContainer.classList.replace('light','dark');
        localStorage.setItem('theme','dark');
        themeAction.classList.replace('fa-moon-o','fa-sun-o');

    } else if(bodyContainer.classList.contains('dark')){
        bodyContainer.classList.replace('dark','light');
        localStorage.setItem('theme','light');
        themeAction.classList.replace('fa-sun-o','fa-moon-o');
    }
}

As you can see, we have used local storage to maintain user preference because whenever the user comes back he should be on the same theme.

we have sun/moon icon at the top which is used for toggling between light and dark theme and we added click event on these icons and toggled the theme. In Click event we are setting user preference into the theme and changing to the light or dark theme as per user preferences.

And whenever the user comes the first time, we check is the user already set his preference or not then taken action appropriately. If the user preferred theme is light then no need to do any operation initial level because by default theme is light.

Conclusion:

CSS variables are very useful when want to change things dynamically.Which can not be possible with preprocessors like sass, less

Top 5 ways to display two div side by side using CSS

Nitin Hepat — Wed, 29 Apr 2020 11:03:49 +0000

In HTML, there are two types of element inline and block element.Inline elements can place element next to each other but they don't support height and width property by default and block elements support width and height property by default but we can't place block elements like two div side by side

So, here we can see How we can make it work

we will see how div can place next to each other in 5 different ways

display: inline-block (tradional way)
css flexbox method
css grid method
display: table method
float property

Using display: inline-block

display: inline-block property helps to place block element beside each other

But, we need to add extra width property to the block element because block element by default takes 100% width

eg.

<!DOCTYPE html>
<head>
</head>
<body>
  <div class="element">
  </div>
  <div class="element">
  </div>
</body>
</html>

// css

.element {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: #ce8888;
  
}

and output will be

please check example here

Using flexbox

flexbox is a modern way of designing the layout of webpage and flexbox is not a single property its complete module it has a number of feature

let's see how we can align divs next to each other using flexbox

//html file

<!DOCTYPE html>

<head>
    <link rel="stylesheet" href="index.css" />
</head>

<body>
  <div class="container">
    <div class="item">
    </div>
    <div class="item">
    </div>
  </div>
  </body>

</html>

// css file

.container {
  display: flex;
}

.item {
  background: #ce8888;
  flex-basis: 100px;
  height: 100px;
  margin: 5px;
}

//output

display: flex property given to container which makes child element in flex context and aligns divs next to each other

In the above example, You can see we have used flex-basis property which is used to give min-width for the item. To understand flexbox in detail please check this out

please find demo here

Using css grid

CSS grid is another great approach to design web page and it's complete module which comes with number of feature

Let's see how we can display divs side by side using css grid

//html

<!DOCTYPE html>
<html>
  <head>
    <title>Grid Example</title>
    <style>
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">
      </div>
      <div class="item">
      </div>
    </div>
  </body>
</html>

//css file

 .container {
        display: grid;
        grid-template-columns: 100px 100px; 
        grid-template-rows: 100px;
        grid-column-gap: 5px;
      }
      
      .item {
      background: #ce8888;
 
       
      }

and output will be

property display: grid turns on the grid layout structure

In CSS file, grid-template-columns property helps to divide the page into number of columns, we have given 100px two times then it will create two columns

It's very big module, I think you should check it out first in detail then only go for using it.

Find demo here

Using display table

display: table property is an alternative for <table> tag

let's see how we can achieve dispaying div side by side using display: table property

//html file

<!DOCTYPE html>

<head>
    <link rel="stylesheet" href="index.css" />
</head>

<body>
  <div class="container">
    <div class="table-row">
     <div class="table-cell">
      
      </div>
      <div class="table-cell">
       
      </div>
    </div>
  </div>
  </body>

</html>

//css file

.container {
  display: table;
  width: 20%;
}

.table-row {
 
  display: table-row;
  height: 100px;
}
.table-cell {
  border: 1px solid;
  background: #ce8888;
  display: table-cell;
  padding: 2px;
}

and output will be

please find demo here

you can code above display: table example using html table tag also like below

//html file

<!DOCTYPE html>

<head>
    <link rel="stylesheet" href="index.css" />
</head>

<body>
  <table class="container">
    <tr class="table-row">
     <td class="table-cell">
      
      </td>
      <td class="table-cell">
       
      </td>
    </tr>
  </table>
  </body>

</html>

//css file

.container {
  display: table;
  width: 20%;
}

.table-row {
 
  display: table-row;
  height: 100px;
}
.table-cell {
  border: 1px solid;
  background: #ce8888;
  display: table-cell;
  padding: 2px;
}

and output will be

Using float property

The float CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the page, though still remaining a part of the flow

let's see how we can display div side by side using float

//html file

<!DOCTYPE html>

<head>
</head>

<body>
  <div class="element">
  </div>
  <div class="element">
  </div>
</body>

</html>

//css file

.element {
  float: left;
  width: 100px;
  height: 100px;
  background: #ce8888;
  margin: 5px
  
}

and output will be

Please find demo here

Conclusion:

There are number of ways to align divs next to each other but the question is which one is better

It's totally depend upon requirement

flexbox and CSS grid are modern ways of doing layout for webpage and it's a complete module and comes with a number of features.I recommend flexbox or CSS grid if need to layout the whole page

If you have minimal requirement then display: inline-block is perfect option.

Detail Beginner Guide for CSS Flexbox with examples

Nitin Hepat — Sat, 25 Apr 2020 09:32:24 +0000

Flexbox is not a single property its complete module which comes with the number of features and here we have a complete guide for CSS flex

Before going into detail I just want to answer why we should use flexbox layout instead of traditional way of doing layout webpage using display properties, float properties, positional properties

Advantages of using flexbox

Flexbox Equally distribute height and width for the item, even though items are added dynamically, Don't need to care about CSS properties
easily reverse the structure of items
easily grow and shrink the width of the item as per dynamic width of the container
easily control the direction of the elements like vertical or horizontal on the basis of a single property
change the order of any element
96% of the browser having support for flexbox

Layout for flexbox

we should know how flexbox works, please refer below diagram

flexbox is divided into two axis main axis and cross axis.

In normal layout when we are using display inline or inline block. it goes from left to right only

main-axis: This is the default axis where items laid out by default. it's not necessarily horizontal always, it can be vertical also depending upon flex-direction
Main start/ Main-end: Items will be placed from main-start to main-end
Main size: width or height of the container depending upon flex direction
Cross-axis: Cross axis is perpendicular to the main axis.
Cross-start/Cross-end: Items will be laid out started from cross-start to cross-end
Cross-size: The width or height of a flex item, whichever is in the cross dimension, is the item's cross size. The cross size property is whichever of ‘width’ or ‘height’ that is in the cross dimension.

Before starting with the flexbox properties we should understand which properties meant for flex container and flex items

Flexbox container properties

display
flex-direction
flex-wrap
justify-contents
align-items
align-contents

Flexbox item properties

order
flex-grow
flex-shrink
flex-basis
flex
align-self

Flexbox container properties

display

As we know display property have number of value like inline, block, inline-block etc. But if we are giving value as flex then we are turning on flexbox context

.container {
  display: flex
}

flex-direction

flex-direction decides that how items will be laid out on main-axis horizontally or vertically

flex-direction: row|row-reverse|column|column-reverse|initial|inherit;

Above are the possible values for flex-direction property

row: row is by default value for flex-direction where item will be placed from left to right
row-reverse: items will be placed from right to left
column: Items will be placed vertically top to bottom
column-reverse: Items will be placed bottom to top
initial: It set's value to the default
inherit: inherit value from the parent

flex-wrap:

flex-wrap controls the behaviour that item will move into the next line if container width is less than total item width.

flex-wrap: nowrap | wrap | wrap-reverse;

Default value: nowrap

no-wrap: fit into the one line by adjusting width of the item
wrap: item will be laid down to next line from top to bottom
wrap-reverse: item will be laid down to next line from bottom to top

flex-flow

flex flow is shorthand for flex-direction and flex-wrap

flex-flow: <flex-direction> | <flex-wrap>

Default value: row no-wrap

let's see some examples

Above we saw an example of flex-flow where flex-direction is row.You can do same for flex-direction column just consider above thing vertically

justify-content

justify-conent is used align items on the main-axis.Its container propery so it will align all child items to the particular position like to the center , start or end or giving space between them.

justify-content: flex-start|flex-end|center|space-between|space-around|initial|inherit;

Default value: flex-start

flex-start - Align items to the start of the container depending upon flex-direction

for eg.

.container {
  flex-direction: row-reverse
  justify-content: flex-start;
}

As you can see above flex-start started from right side not from writing mode direction

center: Align items to the center
flex-end: Align items to the end of the container as per flex-direction
space-around: Gives space around the items by adjusting width
space-between: gives space between the items not at the start and end of the container
space-evenly: gives equal amount of space around the item
start: Align items to the start of the container as per writing mode direction
end: Align items to the end of the container as per writing mode direction

align-items

align items property is used to align items in respective of cross axis like we have justify content for main-axis

align-items: stretch|center|flex-start|flex-end|baseline|initial|inherit;

Default value: stretch

stretch: occupies full height of the container if height to the items not given externally
flex-start: align items to the start of the container in consideration with cross axis
center: align items to the center in consideration with cross axis
flex-end: align items to the end in consideration with cross axis
baseline: align items as per baseline of the item content in consideration with cross axis

align-content

align-content is used to align rows not items in respective of cross-axis

I know you guys will get confuse what is differnece between align-items and align content

let' s see an example by comparing align-items and align-content

As you can see above align-items: center actually align items to center in respective of cross-axis and align-content align rows to the center in respective of cross-axis

we have taken example with two rows because align-content have no effect single line

Flex item properties

order

Using order property it’s possible to re-arrange the natural order of container items.

Default value: 0

As you can see in above diragram ,

First diagram shows default behaviour where all item have order value 0

In Second diagram item 1(highlited one) moves to last because its order value is greater than remaining 3

In third diagram item 3 moves to first position because it has order value -1 which smaller than other three items

In Fourth diagram item 1 and item 3 moves to last because their order value is greater than others

flex-grow

flex-grow is allow item to grow as container size greater than the total items size

Default value: 0

In above example

First diagram shows default behaviour where items not accomadating remaining space takes only width provided to the item

In Second diagram, you can see we made flex-grow: 1 to all items it means all item divided remaining space in equal ratio. It will behave same if we give value as 2 to all item because we are giving ratio value

In third diagram, item 2(highlighted one) takes twice as much as space as compared to other items because it has value 2 and its double of other items value

NOTE: negative values are not allowed

flex-shrink

flex-shrik property allow item to shrink as container size decreases

Default value: 0

If all items in the container have value as 1 then all the items will shrink in equal ratio

And all item have value as 1 except one item which have value 2 then this item will shrink as twice as other items

for eg.

As you can see above given flex-shrink : 2 to the third element shrink twice as much as other elements.

Negative values are not allowed

flex-basis

flex-basis is nothing but the min-width for the container items in flexbox context

Default value: Auto

For eg. If we haven't provided flex-basis property then its by default auto then flexbox items will take width which is equal to content width

flex basis always given in unit it can be %, px, em etc.

flex

flex is shorthand for flex-grow, flex-shrink and flex-basis

Default value: 0 1 auto

flex-grow: <flex-grow> <flex-shrink> <flex-basis>

there are number of possibilities for flex values

/* One value, If unitless number then its flex-grow */
flex: 1;

/* One value, width/height: flex-basis */
flex: 10em;
flex: 30%;
flex: min-content;

/* Two values: flex-grow | flex-basis */
flex: 1 30px;

/* Two values: flex-grow | flex-shrink */
flex: 2 2;

/* Three values: flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;

align-self

align-self is for aligning individual item in respective of cross-axis and it will override value set by align items

As you can see In above example we have given align-self: center to the item 2 and then only that item position has changed.

Example

we have learned a lot lets take an practical example

Centering element vertically and horizantally

//html
<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="index.css" />
</head>
<body>
<section>
    <div class="container">
        
        <div class="item">
            
          </div>
       
         
      </div>
</section>
</body>
</html>

//css
.container {
    display: flex;
    width: 47%;
    height: 300px;
    border: 2px solid;
    padding: 5px;
}

.container .item {
    flex-basis: 100px;
    height: 96px;
    border: 2px solid;
    justify-content: center;
    color: white;
    align-items: center;
    background-color: cadetblue;
}

and output will be

Creating a Navbar

navbar.html

<!DOCTYPE html>

<head>
    <link rel="stylesheet" href="index.css" />
</head>

<body>
    <section class="main-container">
        <div class="logo-container container">
            <strong>Logo</strong>
        </div>
        <ul class="menu-container container">
            
            <li class="menu">
                <strong>
                    Home
                </strong>
            </li>
            <li class="menu">
                <strong>
                    Contact Us
                </strong>
            </li>
            <li class="menu"> 
                <strong>
                    About Us
                </strong>
            </li>

        </div>
    </section>
</body>

</html>

and css file

.main-container {
    display: flex;
    background: #ce8888;
}
.container {
    flex-basis: 50%;
}
.logo-container {
    justify-content: flex-start;
    align-items: center;
    display: flex;
    color: white;
    padding: 10px;
    font-size: x-large;
     
}
.menu-container {
    display: flex;
    height: 60px;
    justify-content: flex-end;
    align-items: center;
    padding: 0;
    width: 50%;
    margin: 0;
}

.menu-container .menu {
  
    padding: 4px 10px;
    border-radius: 5px;
    color: bisque;
    display: flex;
    justify-content: center;
    align-items: center;
    align-items: center;
    cursor: pointer;
}

.menu-container .menu:active ,.menu-container .menu:hover{
    background: repeating-linear-gradient(45deg, #824e4e, transparent 100px)
}

and output will be

You can check demo here

Conclusion

CSS flexbox has very good feature to do layout for the webpage. If you guys understand Please share it and you feel free to ask question in Comments

follow me on twitter for updates on latest projects

How To Remove Duplicates In Array Using Javascript ES6

Nitin Hepat — Fri, 10 Apr 2020 16:49:17 +0000

In javascript programming there are number of ways to remove duplicates from array, But which is best and short it's hard to decide

Let's discuss how to remove duplicates from array of primitives(like array of string, array of numbers) and array of non-primitives(like array of objects)

Using indexOf method

const dataArr = ['1','5','6','1','3','5','90','334'];

const resultArr = dataArr.filter((data,index)=>{
  return dataArr.indexOf(data) === index;
})

console.log(resultArr); //["1", "5", "6", "3", "90", "334"]

As we know, That filter method is used for filtering method from the array as per the given condition

dataArr.indexOf(data) === index , indexOf method always return first occurance

Data Array	position	indexOf	result
1	0	0	true
5	1	1	true
6	2	2	true
1	3	0	false
3	4	4	true
5	5	1	false
90	6	6	true
334	7	7	true

The above table is the tabular structure of filter method where on the basis of the condition it filters element. As you can see indexOf always return the position of the first occurrence of an element, so when duplicate element comes then indexOf not returns the position of a current element it returns the position of the first occurrence of element.

Using Set

Set is an Object introduced in ES6, Used for storing collection of unique values

const dataArr = ['1','5','6','1','3','5','90','334','90'];

//creates  Set object from array of unique element
const dataArrWithSet = new Set(dataArr);


//we can create Set object to array also using spread operator
const resultArr = [...dataArrWithSet];

console.log(resultArr);

Above method is my favorite, which require minimum line of code

Using reduce

reduce is a method of Array prototype which have reducer function which executes on each element and results in a single output value

const dataArr = ['1','5','6','1','3','5','90','334','90'];


const resultArr = dataArr.reduce((acc,item)=>{
      if(!acc.includes(item)){
        acc.push(item);
      }
    return acc;
},[])

console.log(resultArr);//["1", "5", "6", "3", "90", "334"]

In the above eg. acc is an accumulator which is initialized with an empty array and whatever reducer function returning result stored into the accumulator. But, before storing elements into the accumulator we are checking that element is already present or not, If the element not present in the accumulator then we are pushing elements into the accumulator. So, there are no chances of pushing duplicate elements into an accumulator. So at the final result, we will get a collection of unique elements

Using forEach method

forEach is a method of Array prototype which used to iterate over elements of the array

const dataArr = ['1','5','6','1','3','5','90','334','90'];

const uniqueArr = [];
dataArr.forEach((item)=>{
    //pushes only unique element
      if(!uniqueArr.includes(item)){
        uniqueArr.push(item);
      }
   
})

console.log(uniqueArr); //["1", "5", "6", "3", "90", "334"]

In the above eg. In uniqueArr we only pushing item when the item is not already there.So, at last, we will get a collection of unique elements

Removing duplicates from Array of objects

For full post click here

Performance optimization with react PureComponent and React memo

Nitin Hepat — Wed, 18 Mar 2020 10:26:09 +0000

Before digging into the PureCompoment thoroughly let's understand the difference between React component and PureComponent

NOTE: Considering you have basic knowledge of react.

In React Component, If you want to optimize performance then we have to implement shouldComponentUpdate lifecycle method where we can add condition check to see is props or state has been different from previous ones or not If it changed then only we will return true in shouldComponentUpdate method which will force to call render method otherwise render will get called every time props or state changed.

What PureComponent makes different from Component?

If you are extending the PureComponent class then you don't need to take care of shouldComponentUpdate lifecycle method. PureComponent itself takes care by shallow checking states and props. If it finds states and props are different from the previous state and props then only it calls render method else not.

What does shallow check mean?

Shallow compare does check for equality. When comparing primitive values (numbers, strings) it compares their values. When comparing nonprimitive like objects or arrays, it does not compare their's attributes - only their references are compared

For eg., If you have an array and you are pushing element to an existing array then PureComponent does not trigger render method because as per PureComponent there is no change happened because reference is still the same

Let's go by example

import React, { PureComponent } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';

class App extends PureComponent {
  constructor() {
    super();
    this.state = {
      personArr: [
        {
          name: "abc",
          age: "22 years",
          gender: "male"
        },
        {
          name: "pqr",
          age: "23 years",
          gender: "female"
        },
        {
          name: "mno",
          age: "24 years",
          gender: "male"
        }
      ]
    };
  }
  addPerson() {
    var persons = this.state.personArr;
    persons.push({
      name: "xyz",
      age: "32 years",
      gender: "male"
    });
    this.setState({
      perosnArr: persons
    });
  }

render() {
    const persons = this.state.personArr.map((person, index) => {
      return (
        <section>
          <div>
            <label>Name:</label> {person.name}
          </div>
          <div>
            <label>Age:</label>
            {person.age}
          </div>
          <div>
            <label>Gender:</label>
            {person.gender}
          </div>
        </section>
      );
    });
    return (
      <div className="App">
        <button onClick={() => this.addPerson()}>Add person</button>
        {persons}
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

As you can see in the above code we are rendering a person's array and also we have added person button which pushing person object to an existing array.

so, Here PureComponent not let render method run because here an array is a non-primitive type so reference has been checked.

Here I think you might be thinking why PureComponent only checks the reference, not internal attributes because if react implements this logic then it's going to be a very expensive operation performance-wise.

Still, you want to run the render method after pushing element to an array then you should not mutate existing array, even react suggest should not mutate existing element.

For eg.

addPerson(){
  const perosnArr = this.state.personArr;
  perosnArr.push({
    name: "xyz",
    age: "32 years",
    gender: "male"
  })
  this.setState({
    perosnArr: {...personArr}
  })

}

As you can see above I am not mutating existing array, I have created a new array using spread operator now the reference is different for old and new array so now render method will trigger.

Please check the example here

Improve performance in functional components using React.memo()

For Full post click here

Building a Javascript single page application without framework

Nitin Hepat — Thu, 05 Mar 2020 17:10:28 +0000

Hello guys here we come with new tutorial for how to create single page application without framework.

Good developer always keen to understand how the single page application works internally because nowadays we are busy in learning frameworks but we don't think how it works internally because we don't want to but as a good programmer you should know in and out for a thing which you are learning.

First of all,

What is single page application?

Single page application is terminology in which you load the multiple pages dynamically without reloading an application, Like we have angular framework specifically made for single page application

Let's get started

NOTE: We will be following the ES6 standard for coding. It means code which we are writing will not run directly on the browser, as of now browsers are not supporting most of the ES6 standard functionality directly but don't worry we will add an appropriate compiler which will convert our code in browser understandable language.

so finally let's start

Creating a single page application

We will implement Single page application with location hash approach and using webpack for bundling and compiling purpose

Setting up a project

Run 'npm init' command for creating package.json
Install webpack dependencies like below
1. npm install webpack webpack-cli -D

after that let's create folder structure

As you can see above we have created folder structure in that we have components folder in which we will keep our javascript files

libs folder is for the keeping our library files(might include routing js files which will be developed by us for single page application purpose)

views folder will contain HTML files which will be needed to load on routing

index.html and index.js are entry points for our application

webpack.config.js is for writing webpack configuration

Index.html

<!DOCTYPE html>
<head>
</head>
<body>
    <a href="#detail">Details</a>
    <a href="#landing">Landing</a>
    <section id="app">
    </section>
</body>
</html>

As you can see above, In index.html we have taken two href tag in which we have routing for detail and landing links, so here the moto is to load view associated with this links

section with id 'app' is taken for loading routes dynamically under this.

Now, let's create routing files

Route.js

export class Routes {
    constructor(viewObj, isDefaultRoute) {
        this.viewObj = viewObj;
        this.isDefaultRoute = isDefaultRoute;
    }
    isActiveRoute(hashPath) {
        return hashPath.replace('#', '') === this.viewObj.path
    }
}

In the above code, we have properties which will require for individual routes

like viewObj will contain path and URL properties like below

{
 path: 'path',
 templateUrl : 'path/to/html'
}

isDefaultRoute will decide which one to be loaded by default if any path doen't match with loacation hash

isActiveRoute function will let you know the currently active route

Now let's create Router.js which will take care functionality of routing

Router.js

export class Router {
    constructor(routes, routeElement) {
        this.routes = routes;
        this.routeElement = document.getElementById(routeElement);
        this.initialize();
        this.hashChanged();
    }
    getPathAndRouteMapping() {
        const routeMapping = {};
        for (let objKey in this.routes) {
            routeMapping[this.routes[objKey].viewObj.path] = this.routes[objKey].viewObj.url;
        }
        return routeMapping;
    }
    initialize() {
        window.addEventListener('hashchange', (e) => {
            this.hashChanged()
        })
    }
    hashChanged() {
        const locationHash = window.location.hash;
        for (let i = 0; i < this.routes.length; i++) {
            const route = this.routes[i];
            if (route.isActiveRoute(locationHash.substr(1))) {
                this.navigate(route.viewObj.path)
            }
        }
    }
    navigate(path) {
        const pathRouteMapping = this.getPathAndRouteMapping();
        const url = pathRouteMapping[path];
        const xhttp = new XMLHttpRequest();
        let scope = this;
        xhttp.onreadystatechange = function() {
            if (this.readyState === 4 && this.status === 200) {
                scope.routeElement.innerHTML = this.responseText;
            }
        };
        xhttp.open('GET', url, true);
        xhttp.send();
    }
}

It is the main class where we have the main magic of the code

Here 4 functions and one constructor

Constructor: constructor accepting 2 parameters in which 1st one is routing configuration which of Routes class type and another one is a root element where our view will be loaded dynamically

initialize function is for attaching hashchange event listener which will be fired when location hash changes

hashChange function calls every time when hashchange event fires and in that we match with correct route and load that URL

navigate function takes care of loading HTML with the help of ajax request

getPathAndRouteMapping function is used for persisting a mapping of path and URL.

Please check this code repository for whole code

In above example we just covered basics of routing we can make it advance. Before going forward at least you guys start with this.