So I'm loading a computationally expensive React component onto a page - I want a spinner to show whilst this happens - but the #CSS animation "freezes" whilst React does it's thing - the exact time it should be spinning.
What is the best fix for this (other than dropping the React component)?
Does anybody have a better way to do gradient border buttons (or boxes) with transparent background and flexible dimensions?
Here I'm using a strange-scaling SVG image as a mask over a gradient fill - it works and allows buttons of any width or size, but has a few too many "parts" for my liking.
@css ha, I was hoping you had something these look a bit slicker and easier to work with than my solution - I will investigate! Some new (to me) things there too - mask-composite!
@zachleat did your <details-utils> not have some combination of options that would make it behave like an accordion once? I thought it didn't I can't find the.. uh… details
@scrwd I don’t think I had that explicitly, no! Not sure how far the click outside to close will get for that either. I was able to find these things in my browsing history (starring @davatron5000):
Just a thought - not necessarily a good one - if I created a custom element <site-layout> and use it to insert blocks of content into specific <slot> elements it could create for quite lean pages - but I guess it would mean using shadow dom too…
I wonder if this something @enhance_dev makes better - I need to take a look again.
@tbroyer I'm not sure if Astro lets you have more than one slot tho? That's the key bit because a complicated layout can be used quite simply with multiple slots. I know I could use grid and subgrid to sort of create "slots" (similar to the link @macdonst shared - although using multiple slots it just assigns into a CSS grid area in the example) but that only works for some layouts - the more you have nested HTML the harder it is to make it work even with subgrid support.
I'm looking for suggestions how to attach actions to the menu items themselves. The markup below is upgraded with appropriate roles and behaviours. But in a generic component, what is the best strategy for supporting custom actions?
Any good way to toggle the open attribute on a <details> element according to a media query - essentially watching for changes? And is there a terrible accessibility reason not to do that? Basically it's about hiding content on smaller screens
Or, maybe has anyone seen any nice #WebComponents for disclosure functionality, that might ideally also listen for change in a media query to toggle open?
If I were to have the following JSX, how could I process data inside of <Parent>, and have the results of that accessible to <Child> without using React Context, as it won't work with Next.js SSR which is the target.
Amazon have been experimenting with their return options lately (in the UK) today I was only offered drop off at post office and the only locations were 102 miles away - it's like they hope you will just keep the items…
@Chris in their defence, I think it was just a bug - normally we have a lot of choice - like Amazon Lockers (automated drop off points), Postal Service pickup, and various other options. I found that if I change my reason for the return to "incompatible for intended purpose" instead of "not needed" I could then schedule a free pickup. We also usually have an option for an Amazon counter return, but I've yet to see an Amazon counter near us (and we don't live anywhere remote)
@zachleat any chance you have knowledge of any up-to-date benchmarks of SSGs?
Also, speaking of 11ty specifically here - when it is intended to run on the server - what sort of build times would you be looking at during development? I have maybe ~10k markdown files and I'm just wondering what the content author experience will be like (I'll not be popular if they are waiting 20s or more after each change)
@zachleat thanks, I'm aware of incremental builds but not sure of the details - I've not built a large site with 11ty yet but before I start down a path I was just trying to understand a bit more about which path to take. Any new solution will require rendering on the server because of user login stuff and there is always the option to move from markdown to headless CMS (I've read some good things about CloudCannon)
@scrwd I’m hearing a few different topics here: large and speedy site builds (which Eleventy is great at—and CloudCannon has some really neat options for this too which I’ll be talking about in the coming weeks) and user personalization (which Eleventy has options for but will likely be focusing less on moving forward, re: our serverless and edge plugins).
I would like to get #solar panels - my house is just about perfect for them - but total cost will be like £10,000 (UK) and I won't break even for around 7 years, by which time I will have hopefully long-since moved on from this house.
So… is it worth it (to me financially)? Do solar panels increase the actual value of your property?
@Edent thanks for your help, lots to read on your blog too - been dipping in already since you posted the link.
It's not all about money - I want greater use of renewables globally, but failing that I like the idea of "helping" in my own small way. But, realistically, times are tough for most people and I certainly can't afford to spend more money than I am, and actually need to save money - but it's extremely difficult to work it all out. Your blog and advice will be invaluable :)
@scrwd No worries.
The nice thing about solar is you don't have to be obsessive.
It is totally passive.
Stick them on your roof and live life as normal.
If you want, you can shift your habits (put the washing machine on when it is sunny) but it isn't mandatory.
And having negative electricity bills in summer is lovely.
@jonhicks I tried it a long time ago but there were CPU issues which made me ditch it. I suspect they have since been dealt with, but I’ve not checked back.