curator Posts - Answer Overflow

curator

Explore posts from servers

KPCKevin Powell - Community TTCTheo's Typesafe Cult

•Created by curator on 7/17/2024 in #questions

secrets from env file defined in Next config defined leaking in client.

I am using Nextjs 13.4.3, I have defined variables in next config coming from env file like:

const nextConfig = {
  env: {
    //Google MAPS API KEY
    PLACES_API_KEY: process.env.PLACES_API_KEY,
  },

const nextConfig = {
  env: {
    //Google MAPS API KEY
    PLACES_API_KEY: process.env.PLACES_API_KEY,
  },

the issue is it is getting leaked in the client, what can be solution?

5 replies

KPCKevin Powell - Community

•Created by curator on 9/4/2023 in #front-end

can we use border and border image at the same time?

114 replies

KPCKevin Powell - Community

•Created by curator on 8/31/2023 in #front-end

border image or clip path?

18 replies

KPCKevin Powell - Community

•Created by curator on 8/31/2023 in #front-end

cssbattle challenge

how can we create this: https://cssbattle.dev/play/160 my brain stopped working.

23 replies

KPCKevin Powell - Community

•Created by curator on 8/21/2023 in #front-end

svg to clip path

need help converting an svg into clip path: this is the svg:

<svg xmlns="http://www.w3.org/2000/svg" version="1.0" width="428.000000pt" height="1298.000000pt" viewBox="0 0 428.000000 1298.000000" preserveAspectRatio="xMidYMid meet">

<g transform="translate(0.000000,1298.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none">
<path d="M2505 12960 c-132 -5 -549 -21 -927 -36 l-687 -27 -239 27 c-254 29 -432 35 -501 16 -23 -6 -58 -26 -77 -43 l-35 -32 -5 -2530 c-2 -1391 -9 -3113 -14 -3825 -13 -1655 -13 -4601 0 -5275 14 -772 31 -1049 65 -1102 19 -28 103 -59 201 -73 226 -32 599 -24 1459 31 264 17 583 32 710 32 220 2 240 0 465 -35 394 -62 502 -72 760 -73 197 0 247 3 307 19 82 20 150 61 175 103 44 75 65 461 90 1618 19 851 19 9740 0 10235 -19 526 -39 771 -70 865 -15 45 -21 51 -62 66 -94 35 -203 41 -795 44 -319 2 -688 -1 -820 -5z m1197 -20 c226 -10 389 -29 429 -50 24 -14 36 -61 54 -210 20 -176 33 -448 45 -930 15 -632 17 -8689 2 -9585 -22 -1321 -46 -1874 -85 -1993 -16 -49 -74 -87 -172 -113 -68 -19 -108 -22 -270 -22 -209 0 -357 14 -725 69 -129 19 -282 39 -340 43 -126 10 -400 0 -925 -34 -644 -40 -842 -48 -1124 -42 -413 9 -490 31 -504 142 -14 105 -27 388 -39 840 -15 588 -15 4084 1 5890 6 699 11 2312 11 3585 0 2041 2 2318 15 2337 8 12 36 30 62 40 68 26 259 23 483 -7 208 -28 346 -29 870 -6 1171 51 1797 63 2212 46z"/>
</g>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" version="1.0" width="428.000000pt" height="1298.000000pt" viewBox="0 0 428.000000 1298.000000" preserveAspectRatio="xMidYMid meet">

<g transform="translate(0.000000,1298.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none">
<path d="M2505 12960 c-132 -5 -549 -21 -927 -36 l-687 -27 -239 27 c-254 29 -432 35 -501 16 -23 -6 -58 -26 -77 -43 l-35 -32 -5 -2530 c-2 -1391 -9 -3113 -14 -3825 -13 -1655 -13 -4601 0 -5275 14 -772 31 -1049 65 -1102 19 -28 103 -59 201 -73 226 -32 599 -24 1459 31 264 17 583 32 710 32 220 2 240 0 465 -35 394 -62 502 -72 760 -73 197 0 247 3 307 19 82 20 150 61 175 103 44 75 65 461 90 1618 19 851 19 9740 0 10235 -19 526 -39 771 -70 865 -15 45 -21 51 -62 66 -94 35 -203 41 -795 44 -319 2 -688 -1 -820 -5z m1197 -20 c226 -10 389 -29 429 -50 24 -14 36 -61 54 -210 20 -176 33 -448 45 -930 15 -632 17 -8689 2 -9585 -22 -1321 -46 -1874 -85 -1993 -16 -49 -74 -87 -172 -113 -68 -19 -108 -22 -270 -22 -209 0 -357 14 -725 69 -129 19 -282 39 -340 43 -126 10 -400 0 -925 -34 -644 -40 -842 -48 -1124 -42 -413 9 -490 31 -504 142 -14 105 -27 388 -39 840 -15 588 -15 4084 1 5890 6 699 11 2312 11 3585 0 2041 2 2318 15 2337 8 12 36 30 62 40 68 26 259 23 483 -7 208 -28 346 -29 870 -6 1171 51 1797 63 2212 46z"/>
</g>
</svg>

4 replies

KPCKevin Powell - Community

•Created by curator on 8/16/2023 in #front-end

Can we bend a straight line to make it a semi circle?

15 replies

KPCKevin Powell - Community

•Created by curator on 7/20/2023 in #front-end

css animation

i have a position absolute element which has this:

top: 20px !important;
left: -5px !important;

top: 20px !important;
left: -5px !important;

earlier it was:

top: 0;
left: 0;

top: 0;
left: 0;

earlier it had a animation of this:

@keyframes infoWindowAnimate {
    0% {
        opacity: .5;
        top: 16px;
    }

    50% {
        opacity: .75;
        top: -6px;
    }

    100% {
        opacity: 1;
        top: 0;
    }
}

@keyframes infoWindowAnimate {
    0% {
        opacity: .5;
        top: 16px;
    }

    50% {
        opacity: .75;
        top: -6px;
    }

    100% {
        opacity: 1;
        top: 0;
    }
}

what should be the updated animaton for the updated top and left values?

17 replies

KPCKevin Powell - Community

•Created by curator on 7/16/2023 in #front-end

how can we create this one div?

21 replies

KPCKevin Powell - Community

•Created by curator on 6/27/2023 in #front-end

formik and yup issue

guys i have a question, i am on a page, to collect passengers data, there's a form with the following inputs title, first name, last name, date of birth, mobile and email, the first passenger is the lead passenger, email and number is required for them, for others there's a checkbook to mark the passenger as co ordinator to be contacted for any further enquiries, my question is how we can handle this all using formik and yup, cause one form will be looped based on the passengers count i tried implementing it, but it didn't worked for all, it only validated on the last passenger form

2 replies

KPCKevin Powell - Community

•Created by curator on 4/7/2023 in #front-end

need some help in loops in js, can someone hop on voicechat?

4 replies

KPCKevin Powell - Community

•Created by curator on 11/26/2022 in #os-and-tools

Strings must use singlequote how to disable this rule in eslint?

3 replies

KPCKevin Powell - Community

•Created by curator on 10/23/2022 in #front-end

working with dates in react