Lea Verou Profile picture
Jul 30, 2020 4 tweets 1 min read Read on X
Cool #JS algorithm problem that came up in my #WebAlmanac code:

You have an array of unordered DOM nodes. You want to put them in a JSON object that follows their relative containment relationships:

[{element: Node, inside: [{element, inside: […]}, …]}, …]

How do you do it?
Will post my solution tomorrow (unless someone else posts the same one)!
Clarifications: the array with the "inside" key is the descendants of the element on the object it's on, not the ancestors. I.e. obj.inside[0] is a descendant of obj.element.
Oh, and you can assume they are all HTMLElement, not just any DOM nodes.

• • •

Missing some Tweet in this thread? You can try to force a refresh
 

Keep Current with Lea Verou

Lea Verou Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @LeaVerou

Mar 6, 2023
A FOSS tale in 3 acts

Act 1:

Maintainer of popular project from large company (name rhymes with froogle) opens a bug report on one of my smaller libraries, mentioning their project is considering using my lib.

Yay, great news! 🎉Love my code being used on larger tools!
Act 2:

Said maintainer sends huge PR fixing that bug plus changing ALL THE THINGS. Some bugfixes, some just to introduce different tooling.

Yay, great news! 🎉 They want to contribute back! Screenshot from Github PR UI showing 30 files changed, 9,102
As I always do when reviewing a PR, I start by thanking them for their contribution. I then kindly ask them to split the PR in more manageable chunks so they can be reviewed and/or merged independently.

All pretty standard in open source. Github comment from LeaVerou:  Hey, thank you so much for wo
Read 8 tweets
Sep 15, 2020
Developer priorities throughout their career Image
PS: Very impressed with @excalidraw! I was able to make this in like 10 minutes!

PS2: This was 2 weeks ago. My laptop broke down soon after, and spent all this time in service. I found this chart when I opened it back up, it gave me a smile, and I realized I never posted it. 😊
Some asked about the "Does it actually work" line:

When somebody starts coding, getting the code to work is already difficult enough, so there is no space for other priorities. Writing code that works is THE priority, and whether it's good code is not even a consideration.
Read 6 tweets
Jul 22, 2020
I love using @GitHubDesktop and if you think it’s only for novices who aren't comfortable with the Terminal, you are missing out.

Thread 👇
1. My top favorite feature of all time: Being able to select individual lines or changes to commit by clicking.
Incredibly useful for splitting commits into meaningful chunks and leaving debug code out! Image
2. Github's "Open in Github Desktop" for seamless clone Image
Read 9 tweets
Jul 17, 2020
A story in three acts. 👇

I was drafting a new blog post and suddenly, characters started being deleted, as if Backspace was pressed. I recently got my keyboard replaced, so I wondered if it was a glitch of the new keyboard, so I pressed backspace a few times to get it unstuck.
But characters kept getting deleted. Then I started getting 1111 and ]]]] and {{}}} in my text, as well as more deleted characters.
It was as if someone else was controlling my keyboard!!
I started to panic.
“Am I getting hacked?!” 😱
I switched to another tab, but it continued.
Then I thought, that would be kind of a lame hack. If a hacker could control my keyboard, wouldn't they type something meaningful, like, I dunno "WE ARE HOLDING YOUR REPOS HOSTAGE" or something? 🤔
Where's the fun in "vb C#1121212112}} }}}}]]]]]]]"?
Read 4 tweets
Jun 3, 2020
Achievement unlocked: A mini documentary about my life has been published! Whoa. 😳😊

This February, I got an email that a German company, @honeypotio wanted to film a mini documentary about about my life & career path. I thought it sounded fun, so I said yes. Today it's out!
Thank you Guillermo López for flying all the way to freezing Boston in February to tirelessly film this over 3 days and then spend three months editing it. It was a one of a kind experience for me, and I love the result (except how nervous I sound but alas). I'm glad I said yes!
I was v. skeptical about the museum scene since Greece is not a big part of my identity. Guille's vision was to show that disconnect by filming me coding in the Greek section of a museum, oblivious to the exhibits. Not sure if that's conveyed, but it's certainly a bold scene! 🤷🏽‍♀️
Read 4 tweets
May 8, 2020
So funny how the Web goes in circles.
Years ago, we were using images for solid colors, because browsers didn't support transparency. I even wrote a PHP script to generate them in 2009. [1]
Now we're using images for colors again, to go beyond sRGB!

[1]: lea.verou.me/2009/02/bullet…
And it just dawned on me that a lot of folks doing web dev today have never known those struggles. They won't remember when IE6 wouldn't render semi-transparent PNGs and we had to use proprietary .htc scripts to fix it.

christopher.org/png-transparen…
Or hacking semi-transparent backgrounds with filter:progid:DXImageTransform.Microsoft.grad ient(startColorstr=#CC000000, endColorstr=#CC 000000); to emulate background: rgba(0,0,0,0.8);

This was my first talk ever, in 2008, and it was about this very thing: slideshare.net/LeaVerou/color…
Read 4 tweets

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Don't want to be a Premium member but still want to support us?

Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal

Or Donate anonymously using crypto!

Ethereum

0xfe58350B80634f60Fa6Dc149a72b4DFbc17D341E copy

Bitcoin

3ATGMxNzCUFzxpMCHL5sWSt4DVtS8UqXpi copy

Thank you for your support!

Follow Us!

:(