@lene@front-end.social
@lene@front-end.social avatar

lene

@lene@front-end.social

Independent web designer and front-end developer living in Madrid. I am excited about #WebPerf, #a11y, #CSS, #Eleventy and the #IndieWeb.

This profile is from a federated server and may be incomplete. Browse more on the original instance.

sarajw, to random
@sarajw@front-end.social avatar

Can anyone working at comment on the current discourse regarding small hobbyists with static sites having to unexpectedly deal with huge, sudden bills?

Do I need to be worried I might get stung?

lene,
@lene@front-end.social avatar

@cory @sarajw @sangster Neocities maybe? I'm also planning to change hosting for my static sites and was looking at that one

lene, to 11ty
@lene@front-end.social avatar

I would like to share some thoughts about working with .
For some time now I have been using it on a component basis in sites that otherwise depend primarily on Nunjucks or Liquid. The "non-traditional WebC usage" (https://www.11ty.dev/docs/languages/webc/#non-traditional-webc-usage).

For components without major complexity, this is something that works well for me. However, I have also tried to rely entirely on WebC, which, as I understand it, is the intended approach.

lene,
@lene@front-end.social avatar

This has not been particularly easy for me, and the docs don't really help either. 😅

I'm experimenting more than I really understand what I'm doing, and that's reflected in code that I can't quite understand myself in the end. I guess it's too complex for me, confusing even, especially for things that I could solve much easier with Nunjucks, for example.

lene,
@lene@front-end.social avatar

WebC is currently in version 0.11.4, the last update was in April last year, and I understand that @zachleat's focus is entirely on Eleventy 3.0 and its features. Nevertheless, I am of course interested in whether the project will be developed further at all, and if so, in which direction it will go.

Is it possible that in the first major release everything will be done differently and I should better not rely on it in larger projects yet, at least not beyond "non-traditional usage"?

lene,
@lene@front-end.social avatar

WebC feels like a logical template language choice for me if I want to work primarily with web components in an Eleventy project. I'd really like to see it get more attention and be easier to use/understand.

We had a short exchange about WebC here recently (https://front-end.social/@Chris@mastodon.social/111758648136421209), and I was wondering if there is anything I/we can do to make the documentation more understandable and complete.

lene,
@lene@front-end.social avatar

Who would be interested and how could we do this? Is it really just the lack of documentation that is "to blame" for the fact that it doesn't really click with me?

I'm pinging a few people I know might be interested in this topic too:
@Chris
@jaredwhite
@hexagoncircle
@hi_mayank
@chrisburnell
@bp
@tixie
@darth_mall
@tobie

If this would be better discussed in the Discord I'd be happy to move it there.

lene,
@lene@front-end.social avatar

@zachleat I imagined.. I hope you'll pick it back up one day!

lene,
@lene@front-end.social avatar

@zachleat Love to hear that!! 💚

lene,
@lene@front-end.social avatar

So do I! 👍

lene,
@lene@front-end.social avatar

@darius Now that I know this will definitely be developed further, I'm planning a blog post with my findings, and I'm also planning to create a small documentation page that will mainly contain examples. I always need examples to understand something. This page would of course be very open for any participation!

ohhelloana, to random

Thank you @raed so much for your post about deleting your Spotify subscription!

It inspired me to finally get this out of my drafts:

https://ohhelloana.blog/goodbye-spotify/

lene,
@lene@front-end.social avatar

@ohhelloana @raed My partner is one of those indie musicians. I wish there was a platform that paid them fairly - I would subscribe instantly. And, I never really considered the impact on the environment in this context. Thanks for making me aware! I guess I will return to my JJ Cale MP3 collection.

lene, to random
@lene@front-end.social avatar
chrisplusplus, to mastodon
@chrisplusplus@social.lol avatar

I have 4 different clients installed on my phone, and the annoying thing is I like something in each of them so deciding on only 1 to keep is proving difficult

lene,
@lene@front-end.social avatar

@chrisplusplus I'm in that place, too. It's three for me

eys, to 11ty
@eys@front-end.social avatar

Just did npm install and found 0 vulnerabilities.

I don't think I've ever seen that before on a first try! Big props to Excellent by @lene 🙌

lene,
@lene@front-end.social avatar

@eys Yay! I try to keep those dependencies up to date :blobcatsmug:

jasonmoser, to random

@lene is there an issue with image previews when sharing blog posts in EE 2.0? It doesn’t seem to be generating them.

lene,
@lene@front-end.social avatar

@jasonmoser Probably! I added lots of fixes and changes since the release, and also changed the OG image process. https://eleventy-excellent.netlify.app/get-started/#open-graph-images

jasonmoser, to random

Wooooo, thanks to @lene for https://eleventy-excellent.netlify.app/blog/eleventy-excellent-20/! I spent the night last night converting my site too it. What was already a great starter is that much better. (Full disclosure, I handle colors on the site differently, but one of the beauties of the starter is how easy that is to do.)

lene,
@lene@front-end.social avatar

@jasonmoser 0h, very nice! Surely the first 2.0 offspring in production! :fire_heart:

lene, to 11ty
@lene@front-end.social avatar

I just published a big update for Excellent! Everything is the same and everything is different, I try and explain it a little bit in the blog of the preview, though I still plan to (and I hope I really will! :blobcatfearful: ) document everything better to make upgrading easier.

Thank you @belldotbz for sharing your excellent workflow with us! 💚

https://eleventy-excellent.netlify.app/blog/eleventy-excellent-20/

lene,
@lene@front-end.social avatar

@flamed I'm sure it's not! Maybe the biggest change to consider is the new .wrapper utility. Other than that, it's hundreds of tiny optimizations across almost all files.

lene, to random
@lene@front-end.social avatar

What @chriscoyier is doing here is something I was planning to try and implement myself some time in the future, great that I don't have to solve it on my own anymore! :blobcatsmug:

https://frontendmasters.com/blog/highlight-text-when-a-user-scrolls-down-to-that-piece-of-text/

The effect on my website is made by @hexagoncircle: https://codepen.io/hexagoncircle/pen/gOPMwvd

DavidDarnes, to random
@DavidDarnes@mastodon.design avatar

The kids tv show Bluey is far better than it ever needed to be

lene,
@lene@front-end.social avatar

@DavidDarnes The first show that my 5 year old daughter and I find equally entertaining. And so inspiring for parents when it comes to playing with children

jnrmprd, to random French
lene,
@lene@front-end.social avatar

@jnrmprd Glad you liked it! :blobcatmlem:

Chris, to 11ty
@Chris@mastodon.social avatar

I'm trying (for the second time) to use webc with , and again, I feel really dumb. It really seems like there's just not enough examples to make sense of the docs.

Is it even possible to filter a collection in a loop? Does something like this work at all?

<ul>
<li webc:for="person of collections.person | myFilter">
<span @text="person.data.name"></span>
</li>
</ul>

lene,
@lene@front-end.social avatar

@Chris What I do is filtering the collection at the beginning of my component using script webc:setup. https://www.11ty.dev/docs/languages/webc/#using-javascript-to-setup-your-component

If I want to filter my collection by showing the posts that include a front matter key "greeting" with a value of "hello":

<script webc:setup>
const posts = $data.collections.posts.filter(post => post.data.greeting === 'hello');
</script>

And then loop over it:

<li webc:for="post of posts">
<a :href="post.url" @text="post.data.title"></a>
</li>

lene,
@lene@front-end.social avatar

@Chris I also struggled, and still do. I was planning to write a blog post where I collect handy snippets. Maybe a separate public community documentation would be a better idea?
For inspiration I recommend studying the repo of @hexagoncircle's new website, it is full webc, and I learned a lot.
https://ryanmulligan.dev/

nfd, to 11ty
@nfd@social.lol avatar

❓ Hey folks 👋

Does anyone know how to make all external URLs open in a new window? I feel like someone must have made this plugin already.

I got something working with “markdown-it-attrs” but it results in gross {target="_blank"} tags in my markdown that I hate.
https://www.npmjs.com/package/markdown-it-attrs

lene,
@lene@front-end.social avatar

@flamed @robb @nfd I'm pretty sure I learnt that in @heydon's "Inclusive Design Patterns"

lene,
@lene@front-end.social avatar

@nfd My thought was always, as long as I display it with the indicator (also for screen reader users), it's okay to open the link in a new window (After all, as a user, I was also used to it, because most websites do it this way). But now my default is both indicator and same window/tab. I just came to the conclusion that this is the best way.

  • All
  • Subscribed
  • Moderated
  • Favorites
  • megavids
  • khanakhh
  • mdbf
  • ethstaker
  • magazineikmin
  • cubers
  • rosin
  • thenastyranch
  • Youngstown
  • InstantRegret
  • slotface
  • osvaldo12
  • kavyap
  • DreamBathrooms
  • JUstTest
  • Durango
  • everett
  • tacticalgear
  • modclub
  • normalnudes
  • ngwrru68w68
  • cisconetworking
  • tester
  • GTA5RPClips
  • Leos
  • anitta
  • provamag3
  • lostlight
  • All magazines