DEV Community: Mahbubur Rahman

The magic of auto-fit and auto-fill (and the difference between them)

Mahbubur Rahman — Mon, 17 Nov 2025 08:49:32 +0000


.grid {
  display: grid;
  gap: var(--gap, 1rem);
  grid-template-columns: repeat(
    var(--grid-type, auto-fit),
    minmax(min(180px, 100%), 1fr)
  );
  grid-auto-rows: 120px auto auto;
  container-type: inline-size;
}

https://codepen.io/kevinpowell/pen/yyLYoZO

https://www.youtube.com/watch?v=OZ6qKoq7RJU

Swiper slider with partial view

Mahbubur Rahman — Sat, 13 Sep 2025 10:03:50 +0000

new Swiper('.nisgaa-language-slider', {
            loop: true,
            centeredSlides: false,
            slidesPerView: 1,
            spaceBetween: 24,
            slidesOffsetBefore: 0,
            slidesOffsetAfter: 0,
            navigation: {
                nextEl: '.nisgaa-language-slider-container .lsi-button-next',
                prevEl: '.nisgaa-language-slider-container .lsi-button-prev',
            },
            pagination: {
                el: '.nisgaa-language-slider-container .lsi-pagination',
                clickable: true, // Makes bullets clickable
            },
            // Responsive
            breakpoints: {
                0: {slidesPerView: 1.5, spaceBetween: 24, slidesOffsetBefore: 0, slidesOffsetAfter: 0},
                768: {slidesPerView: 2.5, spaceBetween: 24, slidesOffsetBefore: 0, slidesOffsetAfter: 0},
                1025: {slidesPerView: 3.5, spaceBetween: 24, slidesOffsetBefore: 0, slidesOffsetAfter: 0}
            }
        });

HTTP STATUS CODES

Mahbubur Rahman — Mon, 23 Jun 2025 16:16:17 +0000

Download youtube video to audio / video

Mahbubur Rahman — Thu, 05 Jun 2025 16:57:35 +0000

Install yt-dlp tools

brew install yt-dlp
brew install ffmpeg

Download audio formate

yt-dlp -x --audio-format mp3 "https://www.youtube.com/watch?v=5TZykE3GeLs"

SVN time out conflict issue when commit

Mahbubur Rahman — Thu, 08 May 2025 15:33:31 +0000

To resolve all tree conflicts by keeping your local working copy version (using svn resolve --accept=working), you can automate the process with the following commands:

Steps to Resolve All Tree Conflicts

Run the Cleanup Command (optional but recommended):
- Make sure there are no pending operations before proceeding with the resolution.

svn cleanup

2.Resolve All Conflicts Using svn resolve:
You can resolve all tree conflicts in the current directory and its subdirectories with this command:

svn status | grep '^C' | awk '{print $2}' | xargs -I {} svn resolve --accept=working {}

Revert Any Pending Changes (if desired): If you want to make sure there are no other modifications to be considered, run:

svn revert -R .

Update to Ensure Everything is in Sync:
After resolving all conflicts, run:

svn update

Shopify App update

Mahbubur Rahman — Thu, 01 May 2025 08:57:45 +0000

npm run dev
npm run setup // update database
npx prisma migrate dev --name update_settings_table

//After Change TOML file
npm run shopify app config push // After change toml file
npm run deploy // Release new version



npm run shopify app dev --reset  // Reset configarations


shopify app env pull

AltTab is captuting your screen issue

Mahbubur Rahman — Wed, 30 Apr 2025 17:46:31 +0000

https://github.com/lwouis/alt-tab-macos/issues/3973#issuecomment-2547609282

CSS Flex element prevent auto 100 height

Mahbubur Rahman — Tue, 29 Apr 2025 05:32:23 +0000

.child-item{
    flex-shrink:0;
}

.child-item{
    align-self: flex-start;
    flex: 0 0 auto;
}

High-Income AI Skills to Learn in 2025

Mahbubur Rahman — Sun, 23 Mar 2025 17:40:22 +0000

Git Cheatsheet

Mahbubur Rahman — Sun, 23 Mar 2025 17:37:08 +0000

How to define an interface for objects with dynamic keys?

Mahbubur Rahman — Fri, 14 Mar 2025 05:39:29 +0000

interface Dic {
    [key: string]: Object[]
}

type Dic = {
    [key: string|number]: object_type
}

interface Dic {
    [key: string|number]: object_type
}

Elementor Image width 100% at mobile

Mahbubur Rahman — Wed, 12 Mar 2025 09:15:05 +0000

Wrapper should be no wrap
Add class at image widget insp-responsive-img

.elementor-widget-image.insp-responsive-img a,
 .elementor-widget-image.insp-responsive-img a img,
 .elementor-widget-image.insp-responsive-img a img {
        width: 100%;
    }