luciodale

I created a library that deals with right and left full height sidebars. A lot of effort went into making the API dead easy.

The nice touch is that you can set a maxWidth for the swiping to kick in, giving the app a very native feel on mobile devices.

Give it a go and let me know what you think!

I set out to see how far the web can go toward feeling native. Here’s what I found while building a PWA demo that might just make a full rewrite unnecessary.

For everyone reading, I made some tweaks to the article after reading some key feedback. In fact, thanks to all commenting :)

Good points.

1) I thought of giving an easier to read example. I just moved the example to react, so the snippets actually match exactly what's going on in the background.

2) It is true! Though, using shadows on the optimized code doesn't slow it down. I added more toggles to test same effects on transform and top/left implementations.

3) I think it's still interesting to start with some thought and then observe that in practice things are different really. In fact, thanks for all the feedback, as it made me go back and do more investigation.

If you don't mind you can give the article a second look now :)

Thanks for the input! Indeed, the reflows were incredibly fast because I was using position: absolute, which meant the squares were not affecting anything else in the dom, but just their position (so cheap operation). I will add a note on the article on that... also I am improving the 'bad' example so the shuffle button triggers reflow in a significant way.

How do we even see anything on a browser? How do pixels turn into shapes, color, and movement?

Every time we scroll, hover, or trigger an animation, the browser goes through a whole routine. It calculates styles, figures out layout, paints pixels, and puts everything together on screen. All of that happens in just a few milliseconds.

It’s kind of wild how much is happening behind what feels instant. And the way we write code can make that process either smooth and fluid or heavy and janky.

I wrote an article that walks through this step by step, with a small demo showing exactly how these browser processes work and how a few CSS choices can make a big difference.

Some thoughts I had, after reading too many times how devs go against x or y framework and how they would build things more simply with just html and javascript.. delusional at best

Oh really? I’m on safari mobile and it works.. mmm

and btw, it does absolutely nothing.. you can only play against yourself. What a legendary piece of software!

Hi, my name is Lu, and I miserably tried to make a chess.com clone.

I wanted to explore svelte a bit, and thought of an AmAzInG use case for it. I said to myself: I am going to build a chess board so I can play with some of the svelte features.. not quite. Of course, it turns out that there is a lot of board logic and not much svelte magic lol.

Anyways, I spent a fair amount of time on it, so I thought of sharing to give it some justice.. If someone is a decent player, did I implement the rules well?

OFC :)

There's an example up :) ...

https://github.com/luciodale/react-searchable-dropdown/blob/...

It turned out to be quite simple as I expected.. you can check the demo on the site too

Also, what sort of implementations would be interesting to see?

Will do thanks :)!

Ah. I'd have to expose `onSearchChange`. I can get it done before EOD :).. will ping you here when I've put an example on the website.

I really didn’t want to build this, but I just couldn’t find a dropdown that handled everything I needed. It started as a project requirement and slowly grew into something that now covers single and multi selection, creating new options if needed (but only if you want), virtualization (no opt out) for big lists, full keyboard support, search with highlighting, and easy styling with plain CSS (no frameworks), no themes to fight against.

I think this gets close to what most people actually need from a dropdown without making you glue together a bunch of separate pieces. Hopefully it saves someone else the time I spent chasing edge cases. Feedback is very much welcome.

Ways to root out the biggest wastes that affect software teams.

Some useful tools and tips to keep in mind when dealing with data intensive web applications written in React via ClojureScript