DEV Community: Mazedul Islam

Netlify Dynamic Site Challenge: Make Your Favorite Image Collection 🎆

Mazedul Islam — Mon, 13 May 2024 01:46:30 +0000

This is a submission for the Netlify Dynamic Site Challenge: Visual Feast.

What I Built

I have built a dynamic image gallery using Pexels API and Next.js. Landing page fetches a list of curated images from Pexels API. User can click on the image to view in detailed mode. User can also use the search functionality to find images of any topic. Moreover, authenticated users are allowed to like any image and create his/her own collection of liked images. From the user profile page, user can upload profile picture and change password.

Demo

You can find it here: Photograph.
Don't forget to register and create your favorite collection 🏞️ 🎑 🌄 🌃

Gallery

Download in Desired Size

Collection of Liked Images

User Profile Page

Upload Profile Picture

Platform Primitives

Netlify Image CDN

I have leveraged Netlify Image CDN to display and download optimized image. It is very easy to use and framework agnostic. You just need to send a request to /.netlify/images endpoint with query parameters specifying the source asset and desired transformation.

My img element for the gallery looks like below. photo is the resource from Pexels API.

<img
  src={`/.netlify/images?url=${photo.src.original}&fit=cover&position=center&w=250`}
  alt={photo.alt}
  width={photo.width}
  height={photo.height}
  className="w-full h-full object-cover object-center"
  style={{ backgroundColor: photo.avg_color }}
/>

In the image details modal, I allow users to download the image in different sizes. Once again I leveraged Netlify Image CDN for resizing the image for downloading.

Netlify Blobs

I have leveraged Netlify Blobs for storing user data and profile picture.

Netlify encrypts blobs at rest and in transit. So, it is a secured storage for sensitive data.

When user resister on my site, I create and store a JSON document with the user account information in the Netlify Blobs. Moreover, you can also store metadata with your main data. I store account created timestamp and last password updated timestamp as metadata with the user account data.

Here is a sample code of how you can store user account information in Netlify Blobs.

// user object
const newUser = {
  id,
  name,
  email,
  passwordHash,
};

// metadata, can be any arbitrary object.
const userMetadata = {
  createdAt: new Date().toISOString(),
  passwordUpdatedAt: new Date().toISOString(),
};

// getStore is imported from @netlify/blobs
const userStore = getStore("user");

// save data as JSON
await userStore.setJSON(id, newUser, { metadata: userMetadata });

Whenever user change the password, I update the passwordUpdatedAt metadata in the backend. That's how I can display last password updated at time in the profile page.

I store users uploaded profile picture in the Netlify Blobs as ArrayBuffer.

const profilePictureStore = getStore("profile-picture");

// save new profile picture
await profilePictureStore.set(randomId, arrayBuffer, {
  metadata: { fileName, type },
});

To access the uploaded image, I have created GET endpoint using Next.js API route handler. (BTW, it is also possible to access using Netlify Functions).

For example a GET request at /api/profile-picture?imageId=your-image-id endpoint reads the file from the Netlify Blobs and returns the raw file. To render the optimized profile picture, I again utilize Netlify Image CDN. A GET request to /.netlify/images?url=/api/profile-picture?imageId=your-image-id&fit=cover&position=center&w=96 returns optimized image for my case.

The img tag for Avatar component is something like this:

<img
  src={`/.netlify/images?url=${user.image}&fit=cover&position=center&w=96`}
  alt="avatar"
/>

One more thing I forgot to mention. When user like an image, that image data is stored with the user account data in the Netlify Blobs. That's how I keep track of the liked images of any user.

Conclusion

Code repository: https://github.com/mazid1/photograph
That's all for today 🚀
I hope you enjoyed this article 🙌
Let me know your thoughts in the comment section 👇

Generate bootstrap like spacing classes using SASS

Mazedul Islam — Fri, 04 Feb 2022 14:22:42 +0000

Last month we have initialized a new project with Angular and Angular Material. As time goes, I have noticed that some of my colleagues are often writing inline styles for margin and padding.

<div style="margin-top: 5px; margin-bottom: 5px">
  With inline style
</div>

Some of them (including me) are creating similar css classes for almost every components wherever needed.

.set-padding {
  padding: 10px 0;
}
.left-spacer {
  margin-left: 10px;
}

Then I realized that we are actually missing bootstrap like margin and padding classes. One of my colleague suggested to use Tailwind CSS. However, as we are already using Angular Material for our component library, installing a css framework only for some spacing classes will be an overkill for sure. So, I decided to write these classes on my own.

Bootstrap Classes: A Closer Look

According to the documentation of Bootstrap 4 its spacing classes have the following format:

The classes are named using the format {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, and xl.

Where property is one of:

m - for classes that set margin
p - for classes that set padding

Where sides is one of:

t - for classes that set margin-top or padding-top
b - for classes that set margin-bottom or padding-bottom
l - for classes that set margin-left or padding-left
r - for classes that set margin-right or padding-right
x - for classes that set both *-left and *-right
y - for classes that set both *-top and *-bottom
blank - for classes that set a margin or padding on all 4 sides of the element

Where size is one of:

0 - for classes that eliminate the margin or padding by setting it to 0
1 - (by default) for classes that set the margin or padding to $spacer * .25
2 - (by default) for classes that set the margin or padding to $spacer * .5
3 - (by default) for classes that set the margin or padding to $spacer
4 - (by default) for classes that set the margin or padding to $spacer * 1.5
5 - (by default) for classes that set the margin or padding to $spacer * 3
auto - for classes that set the margin to auto

Define Our Requirements

Our focus is to generate all the css classes of the format {property}{sides}-{size}.

For example:

m-0 to m-5 and m-auto
p-0 to p-5
mt-0, mb-0, ml-0, mr-0 to mt-5, mb-5, ml-5, mr-5 and mt-auto, mb-auto, ml-auto, mr-auto
pt-0, pb-0, pl-0, pr-0 to pt-5, pb-5, pl-5, pr-5
mx-0 to mx-5 and my-0 to my-5 and mx-auto, my-auto
px-0 to px-5 and py-0 to my-5

Notice, we are omitting {property}{sides}-{breakpoint}-{size} pattern, which is not in the scope of this article.

SASS Implementation

I am going to use SCSS syntax, you can also use the original SASS if you find that easier to use.

Let's create a new file _spaces.scss. Filename starts with _ because I want to make it a partial sass file. You can check the sass guide if you do not know what partial sass file means.

Create a variable $spacer with the default value for space.

// _spaces.scss
$spacer: 1rem !default;

Then create a sass:map with keys from 0 to 5 and auto and set the calculated value for each keys.

$spacers: (
  0: 0,
  1: $spacer * 0.25,
  2: $spacer * 0.5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
  auto: auto,
) !default;

Now, let's loop through the map and generate classes from m-0 to m-5 and m-auto.

@each $key, $value in $spacers {
  // generate m-* classes
  .m-#{$key} {
    margin: #{$value} !important;
  }
}

We can also generate padding classes inside this loop. Let's generate classes from p-0 to p-5.

@each $key, $value in $spacers {
  // generate m-* classes
  .m-#{$key} {
    margin: #{$value} !important;
  }

  // generate p-* classes
  .p-#{$key} {
    padding: #{$value} !important;
  }
}

However, this code will also generate .p-auto { padding: auto !important; } which is incorrect. So, we need to exclude auto key when generating .p-* classes.

@each $key, $value in $spacers {
  // generate m-* classes
  .m-#{$key} {
    margin: #{$value} !important;
  }

  // generate p-* classes excluding key = auto
  @if $key != auto {
    .p-#{$key} {
      padding: #{$value} !important;
    }
  }
}

Till now, we have covered the following cases:

m-0 to m-5 and m-auto
p-0 to p-5

Let's focus on next two cases:

mt-0, mb-0, ml-0, mr-0 to mt-5, mb-5, ml-5, mr-5 and mt-auto, mb-auto, ml-auto, mr-auto
pt-0, pb-0, pl-0, pr-0 to pt-5, pb-5, pl-5, pr-5

Now we need to generate classes which can target specific side. Therefore create a sass:list containing all the sides.

$sides: (top, bottom, left, right);

For each key presents in the $spacers map we need to generate classes combining each direction/side. Therefore, we need nested loop like this.

@each $key, $value in $spacers {
  @each $side in $sides {
    // generate m* classes
    .m#{str-slice($side, 0, 1)}-#{$key} {
      margin-#{$side}: #{$value} !important;
    }
  }
}

Same as before, we can generate padding classes (excluding auto key) inside this loop.

@each $key, $value in $spacers {
  @each $side in $sides {
    // generate m* classes
    .m#{str-slice($side, 0, 1)}-#{$key} {
      margin-#{$side}: #{$value} !important;
    }

    // generate p* classes excluding key = auto
    @if $key != auto {
      .p#{str-slice($side, 0, 1)}-#{$key} {
        padding-#{$side}: #{$value} !important;
      }
    }
  }
}

Now we only left with following two cases to generate:

mx-0 to mx-5 and my-0 to my-5 and mx-auto, my-auto
px-0 to px-5 and py-0 to my-5

To generate classes for x and y axises let's create a new sass:list.

$axises: (x, y);

Same as before, for each key value presents in $spacers combining each axis presents in $axis list we need to generate classes. So, we need to use nested loops again.

@each $key, $value in $spacers {
  @each $axis in $axises {
    @if $axis == x {
      // generate classes for x axis

      // generate mx-* classes
      .m#{$axis}-#{$key} {
        margin-left: #{$value} !important;
        margin-right: #{$value} !important;
      }

      // generate px-* classes excluding key = auto
      @if $key != auto {
        .p#{$axis}-#{$key} {
          padding-left: #{$value} !important;
          padding-right: #{$value} !important;
        }
      }
    } @else if $axis == y {
      // generate classes for y axis

      // generate my-* classes
      .m#{$axis}-#{$key} {
        margin-top: #{$value} !important;
        margin-bottom: #{$value} !important;
      }

      // generate py-* classes excluding key = auto
      @if $key != auto {
        .p#{$axis}-#{$key} {
          padding-top: #{$value} !important;
          padding-bottom: #{$value} !important;
        }
      }
    } @else {
      @error "Unknown axis #{$axis}.";
    }
  }
}

Usage

If your project setup supports scss file, then you can import this file into your root style file using @use rule.

// styles.scss file, in the same directory of _spaces.scss
@use "./spaces";

If you need compiled css, then you can install SASS on your machine and use the following command to generate spaces.css file.

sass _spaces.scss spaces.css

After adding this, now we can use bootstrap like css classes in our html code.

<div class="my-2 px-2">
  Styled with bootstrap like classes!
</div>

Complete source code is available here.

Thank you for reading. Your appreciation is my motivation!

Follow me on social media:

Linkedin: mazeduldev
Twitter: @mazeduldev
Github: mazeduldev
Website: mazedul.dev