Chris Smith

@unclebigbay143 It's a cool property. This stops the cursor interaction but a keyboard or screen reader user will still be able to use it. It's not really a substitute for a disabled property <input disabled>. I use it when I need the layer above to not block clicks or hover on the layer below.

How to disable form fields using CSS? Here you go 👇🏼 #css

@martingarnett01 @NanouuSymeon appearance: none is quite a good way of removing all the default button styling in one go so you start with a blank canvas.

Create a Button that looks like a link 🔽

@jonkantner @codepen What's has happened to the longcat scroll pen, one of my all time favourites? It seems broken, or is it just for me? codepen.io/jkantner/pen/Q…

@itskarolbrennan 11ty.dev 😍

@Luisa_Donato There are occasionally days when I'd prefer to be a princess.

Who wants to be a princess when you can be a developer ✨

@palashv2 Brilliant! 👏

I tried some CSS art today. I believe it looks quite close to a water drop. What do you think? codepen.io/codewithpalash…

@cassiecodes @m_ott @eleven_ty Exactly this. It's a perfect balance of taking care of you without being a pushy parent.

@m_ott @eleven_ty ALL the way. Nothing worse for animating than dealing with opinionated frameworks that don't like you touching the DOM. 11ty helps you just the right amount and then gets out of your way so you can make magic ✨

@earl_pappi That's what I've got. Didn't realise it was used in Tailwind. That's good to know. Suddenly feels a lot more common than I thought it was.

i most times use tailwind method of naming when declaring my css color in root, something like -clr-green-100 to 900 depending on the intensity of the color

@adircode Yes, that's what I've got, though they go from 50 to 950 with hundreds between. I wondered if there was a name for it, like weighted colour scale or something. Maybe not.

@chris22smith I have a system where I name them green-100, green-200… green-900, ranging from lightest to darkest (you know, line font-weight). Problem here is that you have 10 greens and not 9 so I would still use my system but I would cal the lightest one green-000. It’s better than 1000.

@natmiletic Thanks very much, that's very helpful. I've nailed the performance side, need to add these touches.

@chris22smith 10 means adding rich data for your content when possible and applicable For example, if you have an FAQ section, add an FAQ schema: schema.org/FAQPage

My top technical SEO improvements to boost your results 👇

@natmiletic I'm out of touch with SEO since working on pages behind logins. Would it still be worth doing an XML sitemap for a single page site? Could you explain 6 and 10 further? Are these the same as permalinks and microformats? Thanks.

1⃣ Fast loading speed on mobile 2⃣ SSL 3⃣ Fix any broken internal links 4⃣ Remove or fix any orphaned pages 5⃣ Implement an XML sitemap 6⃣ Ensure proper indexing 7⃣ Fix duplicate pages/content 8⃣ Fix missing alt data 9⃣ Fix missing meta descriptions 🔟 Add structured data

@ibn_Abubakre Yes, I think that's what I'd be aiming for - increased build complexity traded off against faster user rendering speeds. It's almost like we'd need to run it through a headless browser and export the CSSOM then ship that.

@chris22smith I think that's going to be another level of complexity that would affect build time.

@mrsaeeddev Unless you define what you're measuring when you say "best", it's subjective, your favourite, so you can't really be wrong. Win win.😉 I love it too.

JavaScript is the best programming language! Don't try to prove me wrong! 😂😂😂

@Malarkey @rachelandrew Or Clamp.

Say hello to Max. He has exceptional ears and is currently residing in my spare room until everything feels a bit less scary, then I’ll introduce him to the rest of the gang.

@LastWordSword Oh yes, just no sense of scope.

@chris22smith Did they have any idea you were working solo? I can't think of who would ask that if they knew!

@chriscoyier @CodePen Yeah, it's the scrollbars (or lack of) that make it hard.

@chris22smith @CodePen huh. weirdly simple?

@earl_pappi I like your thinking but I'm pretty sure that would be the same as a span in terms of styling. Probably better semantically though as it's decorative.

haven’t tried this but can you try adding the asterisks using the ::after property on the label

@ChallengesCss That's awesome, does exactly what I need. Thank you very much!

@chris22smith here is an idea that might help: codepen.io/t_afif/pen/mdq… You make the span with 0 width and it should be close to the text. Like that it won't affect the overall width and will only wrap with text (resize to see the result). You have to add some padding-right to rectify the width

@robjrobbie I think sticky headers are useful when you want to keep nav or features like search available at all times. Headers scrolling out of view but becoming fixed when you start scrolling back up is quite a common pattern now - best of both worlds.