Mert Efe
Mert Efe
Explore posts from servers
KPCKevin Powell - CommunityPPrisma
PostsComments
KPCKevin Powell - Community
Created by Mert Efe on 11/13/2023 in #os-and-tools
Git + Next js 14 project getting stuck on git push on total line
No description
2 replies
KPCKevin Powell - Community
Created by Mert Efe on 9/22/2023 in #back-end
how to convert passthrough to readstream or buffer?
PassThrough {
  _readableState: ReadableState {
    objectMode: false,
    highWaterMark: 16384,
    buffer: BufferList { head: null, tail: null, length: 0 },
    length: 0,
    pipes: [],
    flowing: null,
    ended: false,
    endEmitted: false,
    reading: false,
    constructed: true,
    sync: false,
    needReadable: false,
    emittedReadable: false,
    readableListening: false,
    resumeScheduled: false,
    errorEmitted: false,
    emitClose: true,
    autoDestroy: true,
    destroyed: false,
    errored: null,
    closed: false,
    closeEmitted: false,
    defaultEncoding: 'utf8',
    awaitDrainWriters: null,
    multiAwaitDrain: false,
    readingMore: false,
    dataEmitted: false,
    decoder: null,
    encoding: null,
    [Symbol(kPaused)]: null
  },
  _events: [Object: null prototype] {
    prefinish: [Function: prefinish],
    error: [Function (anonymous)]
  },
  _eventsCount: 2,
  _maxListeners: undefined,
  _writableState: WritableState {
    objectMode: false,
    highWaterMark: 16384,
    finalCalled: false,
    needDrain: false,
    ending: false,
    ended: false,
    finished: false,
    destroyed: false,
    decodeStrings: true,
    defaultEncoding: 'utf8',
    length: 0,
    writing: false,
    corked: 0,
    sync: true,
    bufferProcessing: false,
    onwrite: [Function: bound onwrite],
    writecb: null,
    writelen: 0,
    afterWriteTickInfo: null,
    buffered: [],
    bufferedIndex: 0,
    allBuffers: true,
    allNoop: true,
    pendingcb: 0,
    constructed: true,
    prefinished: false,
    errorEmitted: false,
    emitClose: true,
    autoDestroy: true,
    errored: null,
    closed: false,
    closeEmitted: false,
    [Symbol(kOnFinished)]: []
  },
  allowHalfOpen: true,
  [Symbol(kCapture)]: false,
  [Symbol(kCallback)]: null
}
PassThrough {
  _readableState: ReadableState {
    objectMode: false,
    highWaterMark: 16384,
    buffer: BufferList { head: null, tail: null, length: 0 },
    length: 0,
    pipes: [],
    flowing: null,
    ended: false,
    endEmitted: false,
    reading: false,
    constructed: true,
    sync: false,
    needReadable: false,
    emittedReadable: false,
    readableListening: false,
    resumeScheduled: false,
    errorEmitted: false,
    emitClose: true,
    autoDestroy: true,
    destroyed: false,
    errored: null,
    closed: false,
    closeEmitted: false,
    defaultEncoding: 'utf8',
    awaitDrainWriters: null,
    multiAwaitDrain: false,
    readingMore: false,
    dataEmitted: false,
    decoder: null,
    encoding: null,
    [Symbol(kPaused)]: null
  },
  _events: [Object: null prototype] {
    prefinish: [Function: prefinish],
    error: [Function (anonymous)]
  },
  _eventsCount: 2,
  _maxListeners: undefined,
  _writableState: WritableState {
    objectMode: false,
    highWaterMark: 16384,
    finalCalled: false,
    needDrain: false,
    ending: false,
    ended: false,
    finished: false,
    destroyed: false,
    decodeStrings: true,
    defaultEncoding: 'utf8',
    length: 0,
    writing: false,
    corked: 0,
    sync: true,
    bufferProcessing: false,
    onwrite: [Function: bound onwrite],
    writecb: null,
    writelen: 0,
    afterWriteTickInfo: null,
    buffered: [],
    bufferedIndex: 0,
    allBuffers: true,
    allNoop: true,
    pendingcb: 0,
    constructed: true,
    prefinished: false,
    errorEmitted: false,
    emitClose: true,
    autoDestroy: true,
    errored: null,
    closed: false,
    closeEmitted: false,
    [Symbol(kOnFinished)]: []
  },
  allowHalfOpen: true,
  [Symbol(kCapture)]: false,
  [Symbol(kCallback)]: null
}
4 replies
KPCKevin Powell - Community
Created by Mert Efe on 6/19/2023 in #front-end
::before, :: after requires transition to be added on parent ?
or do we have to add tranisiton to each of these pseudo elements seperately?
8 replies
KPCKevin Powell - Community
Created by Mert Efe on 6/17/2023 in #front-end
Why this Carousel Kevin made significantly sliding better than most sliders?
https://www.youtube.com/watch?v=gBzsE0oieio&t=1788s&ab_channel=KevinPowell hello , this slider is sliding better than rest since Kevin is using a different tactic here, I know there are ton of other ways to make a slider, but in Kevin's approach, i noticed that the Sliders follow each other when sliding effect is happening. Like their tails are touching each other in a way. Is this the only way to do it? Otherwise like in other slider makings they just change but not this cool effect is there
1 replies
KPCKevin Powell - Community
Created by Mert Efe on 6/17/2023 in #front-end
Why do we need keyframes where basically it seems a more detailed version of transitions?
What are the main differences between them? From my usage there's no need keyframes if you can set up transitions. Or is there?
4 replies
KPCKevin Powell - Community
Created by Mert Efe on 6/9/2023 in #front-end
Is this the best way to set favicons and other related things in new Next js 13?
export const metadata: Metadata = {
  ...,
  icons: [
    {
      rel: 'icon',
      type: 'image/png',
      sizes: '32x32',
      url: '/favicon/favicon-32x32.png',
    },
    {
      rel: 'icon',
      type: 'image/png',
      sizes: '16x16',
      url: '/favicon/favicon-16x16.png',
    },
    {
      rel: 'apple-touch-icon',
      sizes: '180x180',
      url: '/favicon/apple-touch-icon.png',
    },
  ],
}
export const metadata: Metadata = {
  ...,
  icons: [
    {
      rel: 'icon',
      type: 'image/png',
      sizes: '32x32',
      url: '/favicon/favicon-32x32.png',
    },
    {
      rel: 'icon',
      type: 'image/png',
      sizes: '16x16',
      url: '/favicon/favicon-16x16.png',
    },
    {
      rel: 'apple-touch-icon',
      sizes: '180x180',
      url: '/favicon/apple-touch-icon.png',
    },
  ],
}
2 replies
KPCKevin Powell - Community
Created by Mert Efe on 6/9/2023 in #front-end
Can't I Use google maps for free anymore?
What can I do about this, any other free alternative, or is there a way to use it without paying price?
13 replies
KPCKevin Powell - Community
Created by Mert Efe on 5/31/2023 in #front-end
grid-template-columns auto fit not working as expected
5 replies
KPCKevin Powell - Community
Created by Mert Efe on 5/29/2023 in #front-end
How to make a play button with pseudoclasses?
How to make a play button with pseudoclasses? Like '>' icon. For thumbnail of a video play
8 replies
KPCKevin Powell - Community
Created by Mert Efe on 5/24/2023 in #front-end
How to make grid go next row like flex-wrap of flexbox?
.gallery-page {
  display: grid;
  grid-template-columns: auto;
  grid-auto-flow: column;
  gap: 2rem;
  margin: 2rem;
  width: 100%;
  height: 100%;
  img {
  }
}
.gallery-page {
  display: grid;
  grid-template-columns: auto;
  grid-auto-flow: column;
  gap: 2rem;
  margin: 2rem;
  width: 100%;
  height: 100%;
  img {
  }
}
24 replies
KPCKevin Powell - Community
Created by Mert Efe on 5/18/2023 in #front-end
For full page slider to use background-image property over a normal <img> ?
2 replies
KPCKevin Powell - Community
Created by Mert Efe on 5/18/2023 in #back-end
Can var declaration also go override another functions let declaration?
const call = () => {
  var a = 2;

console.log(a);
}

const call2 = () => {
  let a = 1;

console.log(a);
}

call(); -> 2
call2(); -> 1
const call = () => {
  var a = 2;

console.log(a);
}

const call2 = () => {
  let a = 1;

console.log(a);
}

call(); -> 2
call2(); -> 1
IS this correct? Var cannot also go across the other functions right?
24 replies
KPCKevin Powell - Community
Created by Mert Efe on 5/16/2023 in #front-end
Does this slider requires JS or pure css ok with it?
Problem is i need auto loop, and besides when moving between navigations , the page moves downwards? a bit weird 
<div className='homepage__slider'>
      <div className='homepage__slides'>
        {slides?.map((slide, index) => {
          let prevSlideId = index - 1 < 0 ? slides?.length - 1 : index - 1;
          let nextSlideId = index + 1 >= slides?.length - 1 ? 0 : index + 1;
          console.log(`prevSlideId: ${prevSlideId}`);
          console.log(`nextSlideId: ${nextSlideId}`);
          return (
            <div
              className='homepage__slide'
              key={slide?.id}
              id={`slide_${index}`}
            >
              <a
                className='slide__prev'
                title='Prev'
                href={`#slide_${prevSlideId}`}
              ></a>
              <Image
                className='homepage__slide-image'
                src={slide?.image_url}
                alt={slide?.alt}
                height='300'
                width='300'
              />{' '}
              <a
                className='slide__next'
                title='Next'
                href={`#slide_${nextSlideId}`}
              ></a>
            </div>
          );
        })}
      </div>
    </div>
<div className='homepage__slider'>
      <div className='homepage__slides'>
        {slides?.map((slide, index) => {
          let prevSlideId = index - 1 < 0 ? slides?.length - 1 : index - 1;
          let nextSlideId = index + 1 >= slides?.length - 1 ? 0 : index + 1;
          console.log(`prevSlideId: ${prevSlideId}`);
          console.log(`nextSlideId: ${nextSlideId}`);
          return (
            <div
              className='homepage__slide'
              key={slide?.id}
              id={`slide_${index}`}
            >
              <a
                className='slide__prev'
                title='Prev'
                href={`#slide_${prevSlideId}`}
              ></a>
              <Image
                className='homepage__slide-image'
                src={slide?.image_url}
                alt={slide?.alt}
                height='300'
                width='300'
              />{' '}
              <a
                className='slide__next'
                title='Next'
                href={`#slide_${nextSlideId}`}
              ></a>
            </div>
          );
        })}
      </div>
    </div>
2 replies
KPCKevin Powell - Community
Created by Mert Efe on 5/10/2023 in #front-end
Nested media queries feels a bit disorganized. Should media queries be centralized per breakpoint?
Example 
  &__link-list {
    padding-left: 8.75rem;
    padding-right: 2.5rem;
    padding-bottom: 0px;
    overflow: hidden;
    line-height: 1.5;
    font-size: 1.25rem;
    //margin-bottom: 1.25rem;
    display: flex;
    align-items: flex-start;
    flex-direction: column;

    @media screen and (min-width: $breakpoint-lg) {
      flex-direction: row;
      align-items: center;
    }

    @media screen and (max-width: $breakpoint-lg) {
      position: relative;
      left: -100px;
      top: 20px;
    }

    &-item {
      display: none;
      vertical-align: middle;

      @media screen and (min-width: $breakpoint-lg) {
        margin-left: 0.625rem;
        margin-right: 0.625rem;
        padding-right: 0.625rem;
        padding-left: 0.625rem;
      }
  &__link-list {
    padding-left: 8.75rem;
    padding-right: 2.5rem;
    padding-bottom: 0px;
    overflow: hidden;
    line-height: 1.5;
    font-size: 1.25rem;
    //margin-bottom: 1.25rem;
    display: flex;
    align-items: flex-start;
    flex-direction: column;

    @media screen and (min-width: $breakpoint-lg) {
      flex-direction: row;
      align-items: center;
    }

    @media screen and (max-width: $breakpoint-lg) {
      position: relative;
      left: -100px;
      top: 20px;
    }

    &-item {
      display: none;
      vertical-align: middle;

      @media screen and (min-width: $breakpoint-lg) {
        margin-left: 0.625rem;
        margin-right: 0.625rem;
        padding-right: 0.625rem;
        padding-left: 0.625rem;
      }
16 replies
KPCKevin Powell - Community
Created by Mert Efe on 4/30/2023 in #front-end
For media query min-width or max-width is better to choose? And is consistency important?
Can I use like %30 times min-width and %70 times max-width in my stylesheet in media queries?
9 replies
KPCKevin Powell - Community
Created by Mert Efe on 4/29/2023 in #front-end
How to make this first grid item have flex-start and the second one flex-end with grid-template-col?
is it possible to decide the grid-item placement from here while doing grid-template-columns? display: grid; grid-template-columns: repeat(2, 1fr); I want to make it so first 1fr is flex-start and other 1 fr is flex-end (justify self: flex-end)
19 replies
KPCKevin Powell - Community
Created by Mert Efe on 4/26/2023 in #front-end
Am I doing too much nesting in SCSS ?
&__secondary {
    &__link-list {
      display: inline-block;
      vertical-align: middle;
      line-height: 1em;

      @media screen and (min-width: $breakpoint-lg) {
        margin-top: 1rem;
        width: auto;
      }

      &__item {
        font-size: 0.875rem;
        line-height: 1.5;
        font-weight: bold;
        margin-right: 1em;

        @media screen and (min-width: $breakpoint-lg) {
          display: inline-block;
          margin-bottom: 0;
        }
      }
    }

    &__signature {
      text-align: left;

      @media screen and (min-width: $breakpoint-md) {
        float: right;
        width: auto;
        margin-left: 3em;
        margin-top: 1rem;
      }

      &__logo {
        float: right;
        display: inline-block;
        vertical-align: middle;
      }

      &__label {
        margin-left: 0;
        margin-right: 1em;
        font-size: 0.875rem;
        line-height: 1.5;
        font-weight: bold;

        @media screen and (min-width: $breakpoint-md) {
          margin-left: 0;
          margin-right: 1em;
        }
      }
    }
&__secondary {
    &__link-list {
      display: inline-block;
      vertical-align: middle;
      line-height: 1em;

      @media screen and (min-width: $breakpoint-lg) {
        margin-top: 1rem;
        width: auto;
      }

      &__item {
        font-size: 0.875rem;
        line-height: 1.5;
        font-weight: bold;
        margin-right: 1em;

        @media screen and (min-width: $breakpoint-lg) {
          display: inline-block;
          margin-bottom: 0;
        }
      }
    }

    &__signature {
      text-align: left;

      @media screen and (min-width: $breakpoint-md) {
        float: right;
        width: auto;
        margin-left: 3em;
        margin-top: 1rem;
      }

      &__logo {
        float: right;
        display: inline-block;
        vertical-align: middle;
      }

      &__label {
        margin-left: 0;
        margin-right: 1em;
        font-size: 0.875rem;
        line-height: 1.5;
        font-weight: bold;

        @media screen and (min-width: $breakpoint-md) {
          margin-left: 0;
          margin-right: 1em;
        }
      }
    }
3 replies
KPCKevin Powell - Community
Created by Mert Efe on 4/26/2023 in #front-end
scss unable to make chained multiple classname
&formelement&has-auto-width { display: inline-block; } the second & doesn't work what's wrong?
8 replies
KPCKevin Powell - Community
Created by Mert Efe on 4/10/2023 in #front-end
How to correctly create a flow in SCSS for declaring margins , paddings like the tailwind?
An example: 
.h {
  &-full {
    height: 100%;
  }

  &-1 {

  }

  &-2 {
    
  }
}
.h {
  &-full {
    height: 100%;
  }

  &-1 {

  }

  &-2 {
    
  }
}
Can someone provide example of how it should be best in scss to have a system for margins and paddings?
25 replies
KPCKevin Powell - Community
Created by Mert Efe on 3/1/2023 in #front-end
Unable to make headless ui component get rid of table overflow/cutoff
3 replies