Front-end Developer, author of CSS3 Foundations, and creator of Hover.css and Sequence.js. Creating successful websites since 2008.
Devon, UK
Joined March 2009
- Tweets7.4K
- Following288
- Followers3.3K
- Likes1.7K
Ian Lunn retweeted
Stacked Cards with Sticky Positioning and a Dash of Sass css-tricks.com/stacked-cards…
Ian Lunn retweeted
Wondering what the difference is between ___ and ___ in CSS, DOM, HTML or JavaScript? @nghuuphuoc has your back with super useful explanations that include many good practices, tips and tricks as well as “good to know” sections. thisthat.dev/
ALT Screenshot from the thisthat.dev frontpage
Ian Lunn retweeted
Super excited to announce the new website for Technical Interviews! Huge thanks to the @eggheadio for designing & building this!
Working really hard to get this out for y'all! 🙏
technicalinterviews.dev/
Natively Format JavaScript Dates and Times elijahmanor.com/format-js-da… via @elijahmanor
Ian Lunn retweeted
💯 CSS flex gap is in Chrome 84 💯
play around at this sandbox on @codepen 👇
codepen.io/argyleink/pen/jOW…
🎉 flex that gap in the latest release of Chrome Canary 🎉
```css
display: flex; 🦾
gap: 1ch; 🔥
```
early adopters:
help us test it out won't ya!?
note:
requires web experiments enabled, visit chrome://flags/#enable-experimental-web-platform-features in Canary to enable
Ian Lunn retweeted
TIL text-decoration has an "overline" value AND can accept up to 4 decorations at once!
```
h1 {
text-decoration: overline;
text-decoration-color: deeppink;
}
```
explore on @codepen "Overstanding overlines" 👉 codepen.io/argyleink/pen/MWK…
ALT the word overstand with a hotpink overline
ALT h1 { text-decoration: overline; text-decoration-color: deeppink; }
ALT h1 { text-decoration: overline underline line-through; }
CSS Multi-Column is one for the back pocket: smashingmagazine.com/2019/01…
Particularly like the masonry style layout it helped achieve here: veerle.duoh.com/inspiration
Ian Lunn retweeted
The cool thing about StyleStage.dev is if you despise the color scheme I picked - or anything else - you can submit a stylesheet that changes it to your design preference!
Practice your modern CSS skills and show off your creativity, submissions are always open!
CSS does such a great job we tend not to think about it. If good design is invisible, then CSS is the invisible tool that makes good design possible on the web.
ianlunn.co.uk/articles/20-ye…
A neat way of using CSS custom properties to style external SVG nodes (no more inling necessary to achieve the same).
Screenshot from Lightning-fast Web Performance by @scottjehl. Original idea by @frontstuff_io in this article: frontstuff.io/multi-colored-…
@scottjehl Hi. I am impressed by your neat way of using CSS custom properties to style external SVG (as shown in one of your Lightning-Fast Web Peformance videos). Have you documented this anywhere such as a blog post? Haven't seen it before. Worth sharing
Deliver critical website assets at the same time as a request for HTML using HTTP/2 Server Push feature
smashingmagazine.com/2017/04…
Improving Website Performance with Self-hosted Google Fonts in Gatsby: ianlunn.co.uk/articles/gatsb…
#gatsby #gatsbyjs
Interested to hear from devs what your performance score is in Lighthouse 6.1 versus old (especially JS heavy websites). I think many sites are going to find a major dip in performance score. Let me know what you find
I'm convinced my website's performance score in Google Lighthouse has dropped drastically compared to last week. Anyone finding the same? I was up in the 90s. Now getting 60s without any changes to site.
Ian Lunn retweeted
The new profile READMEs are on GitHub now!! If you make a repo with your username you can get one it seems 👀
It looks cool with the new profile picture design, too.
Here's mine! github.com/cassidoo
ALT Cassidy's GitHub profile