Muhct
Muhct
Explore posts from servers
TTCTheo's Typesafe Cult
Created by Muhct on 7/14/2024 in #questions
Using hardcoded data for comparison in unit tests with toEqual?
Hi there, I have a React app and I want to create a unit test for a function that removes scattered zeros inside of an array. Basically my idea is to have a src\mocks\data\IndexadorDataMock.ts file with hardcoded dirty data, and then the (also hardcoded) clean data - aka the expected output. For example:
// src\__mocks__\data\IndexadorDataMock.ts

export const itemsMockData = [
0,
{ down: 4719, left: 4718, right: 4720, id: 1, up: 4721 },
0,
{ down: 4723, left: 4722, right: 4724, id: 3, up: 4725 },
0,
];

export const cleanItemsMockData = [
{ down: 4719, left: 4718, right: 4720, id: 1, up: 4721 },
{ down: 4723, left: 4722, right: 4724, id: 3, up: 4725 },
];
// src\__mocks__\data\IndexadorDataMock.ts

export const itemsMockData = [
0,
{ down: 4719, left: 4718, right: 4720, id: 1, up: 4721 },
0,
{ down: 4723, left: 4722, right: 4724, id: 3, up: 4725 },
0,
];

export const cleanItemsMockData = [
{ down: 4719, left: 4718, right: 4720, id: 1, up: 4721 },
{ down: 4723, left: 4722, right: 4724, id: 3, up: 4725 },
];
And then my test file Helpers.test.ts:
describe('Helpers', () => {
test('removes scattered zeros using cleanIndices', () => {
const result = Helpers.cleanIndices(itemsMockData);
expect(result).toEqual(cleanItemsMockData);
});
});
describe('Helpers', () => {
test('removes scattered zeros using cleanIndices', () => {
const result = Helpers.cleanIndices(itemsMockData);
expect(result).toEqual(cleanItemsMockData);
});
});
My question is: is this a common practice for React projects? By "this" I mean having a separate file with very long, hardcoded data that you'll use for .toEqual comparisons in your tests
8 replies
KPCKevin Powell - Community
Created by Muhct on 7/11/2024 in #front-end
Px, em, or rem?
Hi there - I haven't decided which unit I should use... Do you recommend px, em, or rem? I've read several articles about this topic but they just go over my head... Basically my question is: why shouldn't I use em for absolutely everything?
15 replies
TTCTheo's Typesafe Cult
Created by Muhct on 6/22/2024 in #questions
Best practices for rendering the version of your app
I have a React-TypeScript web app in which I'd like to render the current version at the top of the home page. What I'm thinking is that I could have a version.ts file with this:
export const APP_VERSION = "1.0.0"
export const APP_VERSION = "1.0.0"
and then when I make a commit, I increase that number. But I've never seen this being done in real world open source github projects. What's the best approach here?
14 replies
TTCTheo's Typesafe Cult
Created by Muhct on 6/20/2024 in #questions
Best practices for typing a reusable button?
I have a React-TypeScript-Material UI app with a Button component but I'm not sure if what I'm doing is a good practice. Basically in the ButtonProps 4 out of 5 props are optional. Is this ok or should I structure the code in a different way? Perhaps not turning the button into a reusable component at all?
// src\components\shared\Button.tsx
/** @jsxImportSource @emotion/react */
import React, { ReactElement } from 'react';
import { css } from '@emotion/react';

type ButtonProps = {
children: string;
leftIcon?: ReactElement<SVGSVGElement>;
onClick?: () => void;
disabled?: boolean;
'data-testid'?: string;
};

const styles = (leftIcon: ReactElement<SVGSVGElement> | undefined) => css`
position: relative;
border-radius: 8px;
border: 2px solid transparent;
padding: ${leftIcon ? '0.6em 1em 0.6em 0.8em' : '0.5em 1.2em 0.6em 1.2em'};
`;

const iconContainerStyle = css`
// more styling
`;

export const Button = ({
children,
leftIcon,
onClick,
disabled,
'data-testid': testId
}: ButtonProps) => {
return (
<button
css={styles(leftIcon)}
onClick={onClick}
disabled={disabled}
data-testid={testId}
>
{leftIcon && <span css={iconContainerStyle}>{leftIcon}</span>}
{children}
</button>
);
};
// src\components\shared\Button.tsx
/** @jsxImportSource @emotion/react */
import React, { ReactElement } from 'react';
import { css } from '@emotion/react';

type ButtonProps = {
children: string;
leftIcon?: ReactElement<SVGSVGElement>;
onClick?: () => void;
disabled?: boolean;
'data-testid'?: string;
};

const styles = (leftIcon: ReactElement<SVGSVGElement> | undefined) => css`
position: relative;
border-radius: 8px;
border: 2px solid transparent;
padding: ${leftIcon ? '0.6em 1em 0.6em 0.8em' : '0.5em 1.2em 0.6em 1.2em'};
`;

const iconContainerStyle = css`
// more styling
`;

export const Button = ({
children,
leftIcon,
onClick,
disabled,
'data-testid': testId
}: ButtonProps) => {
return (
<button
css={styles(leftIcon)}
onClick={onClick}
disabled={disabled}
data-testid={testId}
>
{leftIcon && <span css={iconContainerStyle}>{leftIcon}</span>}
{children}
</button>
);
};
6 replies
TTCTheo's Typesafe Cult
Created by Muhct on 11/3/2023 in #questions
Improving accessibility of a Card component
No description
2 replies
TTCTheo's Typesafe Cult
Created by Muhct on 6/29/2023 in #questions
Sizes prop in the <Image/> component
I've always been using the <Image> component with the fill prop, but I've never used the sizes one: https://nextjs.org/docs/pages/api-reference/components/image#sizes I'm reading the docs and I don't understand what it does. I thought NextJS Images were automatically served with the proper size according to the device of the user, was I wrong? Is the sizes prop the thing that takes care of that? As an example, I have a hero image that always takes up the whole screen width, I've added the sizes prop like this:
<Image
src="/example.png"
fill
sizes="100vw"
/>
<Image
src="/example.png"
fill
sizes="100vw"
/>
and I don't see any difference when it comes to the srcset of images when I inspect the element - or any difference in lighthouse (with or without the sizes prop, the amount of KB spent on images is the same) so I'm not sure what it's actually doing
5 replies
KPCKevin Powell - Community
Created by Muhct on 5/11/2023 in #front-end
Customizing Dev tools inspect element popup with element data?
3 replies
TTCTheo's Typesafe Cult
Created by Muhct on 3/3/2023 in #questions
Serverless and price of DDoS attacks
There's one thing in serverless that I'm not able to figure out: as far as I know if you suffer a DDoS attack in AWS then you have to pay for all the usage that the DDoS attack has caused, which can get very pricey. Other non-serverless hosting companies dont have this issue: if you suffer a DDoS attack you dont get charged an extra amount. Does that simply not exist in serverless? How do you tackle DDoS attacks for your apps in serverless? A rate limiter wouldnt be enough, right?
3 replies
KPCKevin Powell - Community
Created by Muhct on 2/8/2023 in #front-end
Automated styling testing?
Hi there, I was wondering what's the common practice when it comes to testing the style of your whole website. What I mean is, there are libraries like react-library-testing/cypress that can carry out multiple tests in order to check if something on a different part of the website was broken in the process, checks if a button no longer exists or doesn't open a popup, etc. Is it possible to do that with styles? I'm thinking maybe a Puppeteer script that takes screenshots of all the pages in your website and tells you what parts started having a different size/font-weight/visual position, etc.
4 replies
KPCKevin Powell - Community
Created by Muhct on 1/19/2023 in #front-end
Is there a way to properly check how your website looks on different devices?
I've seen that some components in my website look differently when using a Samsung A11 VS Xiami Mi Note Pro 10 for example. But I had to physically check this to know it, since on Firefox/Chrome responsive view it looks fine, so I was wondering if there's a (ideally free) way to properly check how your website looks on different devices. Like, truly simulation software?
54 replies
KPCKevin Powell - Community
Created by Muhct on 1/12/2023 in #front-end
Is chrome dev tools responsive view working correctly?
Hi there, since 14 days ago I think, when I use the chrome dev tools to see if my website is responsive and move around the responsive bar to increase/decrease the width of the viewport, I can see that my website goes out of the viewport and I can scroll horizontally. Now, if I close the responsive view and then close the dev tools, and then open it up again, it looks ok. Am I the only one?
6 replies
KPCKevin Powell - Community
Created by Muhct on 1/10/2023 in #front-end
Removing the built-in padding-margin of SVGs
12 replies
KPCKevin Powell - Community
Created by Muhct on 1/9/2023 in #front-end
Transform translate(X, Y) differs in Mozilla & Chrome
9 replies
TTCTheo's Typesafe Cult
Created by Muhct on 12/26/2022 in #questions
Prevent DesktopHeader from loading on network tab
1 replies
KPCKevin Powell - Community
Created by Muhct on 12/25/2022 in #front-end
Add a circle to a CircleProgress component
5 replies
KPCKevin Powell - Community
Created by Muhct on 12/14/2022 in #front-end
CSS Color filter calculator
Hi there, does someone know of a CSS color filter calculator that lets you select the starting color and the objective color? I've found 4 of these calculators but the issue is that you can't set the starting color, only the final color
2 replies
KPCKevin Powell - Community
Created by Muhct on 12/12/2022 in #front-end
Creating a 2-column 2-row flexbox structure
6 replies
KPCKevin Powell - Community
Created by Muhct on 10/27/2022 in #front-end
How to add a class to the body tag inside an Iframe
9 replies