imalfect
imalfect
Explore posts from servers
CDCloudflare Developers
Created by imalfect on 7/18/2024 in #general-help
Cloudflare Edge Cache/ Cache reserve, or a Media CDN
Hey everyone, I've been trying to get my mind around the whole content delivery network thing. I am looking to optimize load times of my images in different regions. My current setup is: A VPS located in Germany (hosting is hetzner), which hosts a nextjs app, and a directus cms, both proxied through cloudflare The images are stored on my drive (that's how directus does it), and are served through a url, that is proxied through cloudflare. The images are transformed using the cms api. What I wanted to do was have these images be served from different locations, to improve the speed. I was thinking of either having the images on Amazon S3 instead, and serving them with cloudfront. Another idea I had, was to enable cache reserve on cloudflare, or potentially having the images on cloudflare r2 (cloudflare images aren't an option, no native way to integrate easily with my content management system). So, my questions are: - Will enabling cache reserve, and having the images on r2 result in a similar setup to amazon s3+cloudfront? - Will enabling cache reserve, and NOT having the images (therefore keeping them on my server), make them served through the cdn (so, multiple locations). - will cache reserve improve the performance of my website? (NextJS, primarily server-side rendered website). - are there any other steps I could take to improve the performance of my website? (excluding optimizing on my frontend-code side, will do that anyway) - Will Polish and Mirage help with anything?
3 replies
DTDrizzle Team
Created by imalfect on 12/14/2023 in #help
⨯ Error: UNDEFINED_VALUE: Undefined values are not allowed
No description
6 replies
RReactiflux
Created by imalfect on 1/18/2023 in #react-forum
Grid elements are not centered
Hello, my grid elements aren't centered, why is that so?
return (
<Container
sx={{mt: 2, mb: 2}}>
<Grid
justifyContent="center"
alignItems="center"
container
spacing={2}
columns={{xs: 1, sm: 1.5, md: 3, lg: 5.5, xl: 6.5}}
sx={{width: 1}}>
<Grid item xs={1} md={1.5} align="center">
<InfoBox title="Block Count" value="1231212"/>
</Grid>
<Grid item xs={1} md={1.5} lg={2} align="center">
<InfoBox title="Header Count" value="123231121"/>
</Grid>
<Grid item xs={1} align="center">
<InfoBox title="Peers" value="123"/>
</Grid>
<Grid item xs={1} md={2} align="center">
<InfoBox title="DAA Score" value="1237867112"/>
</Grid>
</Grid>
</Container>
);
return (
<Container
sx={{mt: 2, mb: 2}}>
<Grid
justifyContent="center"
alignItems="center"
container
spacing={2}
columns={{xs: 1, sm: 1.5, md: 3, lg: 5.5, xl: 6.5}}
sx={{width: 1}}>
<Grid item xs={1} md={1.5} align="center">
<InfoBox title="Block Count" value="1231212"/>
</Grid>
<Grid item xs={1} md={1.5} lg={2} align="center">
<InfoBox title="Header Count" value="123231121"/>
</Grid>
<Grid item xs={1} align="center">
<InfoBox title="Peers" value="123"/>
</Grid>
<Grid item xs={1} md={2} align="center">
<InfoBox title="DAA Score" value="1237867112"/>
</Grid>
</Grid>
</Container>
);
InfoBox:
return (
<Box
sx={{
'display': 'flex',
'backgroundColor': 'background.paper',
'boxShadow': 3,
'overflow': 'hidden',
'height': 120,
'borderRadius': 1.5,
'&:hover': {
backgroundColor: 'background.paper',
opacity: [0.9, 0.87, 0.86],
},
}}
>
<Typography align="left" variant="h5"
sx={{
marginLeft: 2, marginTop: 1, marginRight: 1.3,
flexGrow: 1,
fontSize: 27, fontWeight: 700, fontColor: 'white'}}>
{props.title}
</Typography>
<Typography align="right" variant="h3" color='#007aff'
sx={{
marginTop: 1, marginRight: 1.3,
flexGrow: 1,
fontWeight: 600, fontSize: 33}}>
{props.value}
</Typography>
</Box>
);
return (
<Box
sx={{
'display': 'flex',
'backgroundColor': 'background.paper',
'boxShadow': 3,
'overflow': 'hidden',
'height': 120,
'borderRadius': 1.5,
'&:hover': {
backgroundColor: 'background.paper',
opacity: [0.9, 0.87, 0.86],
},
}}
>
<Typography align="left" variant="h5"
sx={{
marginLeft: 2, marginTop: 1, marginRight: 1.3,
flexGrow: 1,
fontSize: 27, fontWeight: 700, fontColor: 'white'}}>
{props.title}
</Typography>
<Typography align="right" variant="h3" color='#007aff'
sx={{
marginTop: 1, marginRight: 1.3,
flexGrow: 1,
fontWeight: 600, fontSize: 33}}>
{props.value}
</Typography>
</Box>
);
Thanks for the help.
2 replies
RReactiflux
Created by imalfect on 12/30/2022 in #react-forum
Box Element causing overflows on smaller screens, even though it does not reach the end of screen
I am using Material UI with React and Webpack On smaller screens my react box component makes the screen "expand" on the right side, and this causes the navbar to expand, and also horizontal scroll to appear, I have attached my return code, and also a few screenshots that may help. My element
return (
<div>
{/* Name "input" panel */}
<Container>
<Box
sx={{
maxWidth: { xs: 350, sm: 480, md: 600, lg: 800},
borderWidth: 15,
borderStyle: 'solid',
borderColor: 'background.paper',
borderRadius: 4,
boxShadow: 8,
backgroundColor: 'background.paper',
'&:hover': {
backgroundColor: 'background.paper',
opacity: [0.98, 0.93, 0.9],
},
}}
>
<Typography variant="h4" sx={{fontWeight: 700}}>Enter the name you'd like to look up 📝</Typography>

<FormControl sx={{ m: 2, width: '26ch' }} variant="outlined">
<OutlinedInput id="filled-basic" type="text" label="VinuPay Name" variant="filled" sx={{paddingBottom: 2}} error={!isValid} onChange={(event) => {checkNameValidity(event.target.value)}} endAdornment={<InputAdornment position="end">.vinu</InputAdornment>}/>
<InputLabel htmlFor="filled-adornment-amount">VinuPay Name</InputLabel>
<Typography variant="h6" display={reasonId === undefined ? "none" : "block"} color={isValid ? "#1eff18" : "#ff0000"}>{isValid ? "Looking good!" : reason}</Typography>
</FormControl>
<br/>
<LoadingButton
onClick={() => {lookupName()}}
endIcon={<SearchRoundedIcon />}
loading={shouldLoad}
loadingPosition="end"
variant="contained"
color="secondary" sx={{minHeight: 50, minWidth: 120}}
disabled={!isValid || name === ''}
>
Look up
</LoadingButton>
<Typography variant="h3" sx={{fontWeight: 800, paddingTop : 5}}>Vinu<Typography display="inline" variant="h3" sx={{fontWeight: 800, color: '#006aff'}}>Pay 🎉</Typography></Typography>
<Typography variant="h5" sx={{fontWeight: 700, mt: 5}} color="error">NOTICE: The displaying of the result of the lookup will most likely be changed in future versions. Happy to hear your feedback :) </Typography>
</Box>

</Container>

{/* Name "output" panel */}
<Container sx={{paddingTop: 3}}>
{nameData !== null? <NamePanel name={nameData.name} nameId={nameData.nameId} owner={nameData.ownerAddress} isVerified={name.isTrusted} canManage={false} style={{paddingTop: 5}}/> : ''}
</Container>
</div>
)
return (
<div>
{/* Name "input" panel */}
<Container>
<Box
sx={{
maxWidth: { xs: 350, sm: 480, md: 600, lg: 800},
borderWidth: 15,
borderStyle: 'solid',
borderColor: 'background.paper',
borderRadius: 4,
boxShadow: 8,
backgroundColor: 'background.paper',
'&:hover': {
backgroundColor: 'background.paper',
opacity: [0.98, 0.93, 0.9],
},
}}
>
<Typography variant="h4" sx={{fontWeight: 700}}>Enter the name you'd like to look up 📝</Typography>

<FormControl sx={{ m: 2, width: '26ch' }} variant="outlined">
<OutlinedInput id="filled-basic" type="text" label="VinuPay Name" variant="filled" sx={{paddingBottom: 2}} error={!isValid} onChange={(event) => {checkNameValidity(event.target.value)}} endAdornment={<InputAdornment position="end">.vinu</InputAdornment>}/>
<InputLabel htmlFor="filled-adornment-amount">VinuPay Name</InputLabel>
<Typography variant="h6" display={reasonId === undefined ? "none" : "block"} color={isValid ? "#1eff18" : "#ff0000"}>{isValid ? "Looking good!" : reason}</Typography>
</FormControl>
<br/>
<LoadingButton
onClick={() => {lookupName()}}
endIcon={<SearchRoundedIcon />}
loading={shouldLoad}
loadingPosition="end"
variant="contained"
color="secondary" sx={{minHeight: 50, minWidth: 120}}
disabled={!isValid || name === ''}
>
Look up
</LoadingButton>
<Typography variant="h3" sx={{fontWeight: 800, paddingTop : 5}}>Vinu<Typography display="inline" variant="h3" sx={{fontWeight: 800, color: '#006aff'}}>Pay 🎉</Typography></Typography>
<Typography variant="h5" sx={{fontWeight: 700, mt: 5}} color="error">NOTICE: The displaying of the result of the lookup will most likely be changed in future versions. Happy to hear your feedback :) </Typography>
</Box>

</Container>

{/* Name "output" panel */}
<Container sx={{paddingTop: 3}}>
{nameData !== null? <NamePanel name={nameData.name} nameId={nameData.nameId} owner={nameData.ownerAddress} isVerified={name.isTrusted} canManage={false} style={{paddingTop: 5}}/> : ''}
</Container>
</div>
)
Some screenshots of the issue: https://i.stack.imgur.com/gtmJE.png As you see on the "right side" of the view, the different grey colour appears, and that is the place where the element overflows. You can view the issue here: https://dev.vinu.cash/nameLookup (visible on mobile devices, on chrome selecting Galaxy S8+ (360x740) device to view on also shows the issue.
25 replies