Meetolog progress: editable component

In the last few sessions I've been working on an editable component. It's a component that has two building blocks - a preview and an editable input.

It's not a secret that this thing is natively supported by most browsers using the HTML contentedtiable. It's a simple attribute that you put on a div and the contents inside of it become editable on click. It's nice, but has some drawbacks.

For my purposes I decided to stick with a much more obvious approach.

The preview part of the component is a div with the content to be presented. On click on that div it gets replaced by an input or a textarea, depending on the need.

It's used like this:

1
2
3
4
5
<Editable
  type="input"
  value={meeting.title}
  className="meeting-title"
/>

The trick to make it non-obvious to the end user that behind the scenes there is an input is to style it in such a way, that the input/textarea has no borders, paddings etc. It's several lines of css, but I'm happy with the result.

Here's a short video of how it looks/works.



That's it for now.

Comments

Post a Comment

Popular posts from this blog

Haptic - my new side project

While building meetlog in public, I've noticed a problem, which not only I have, but many. My build in public updates about meetlog are all over the place. In twitter, on my blog, in maker log, etc. Wouldn't it be great if there was a place, where I could create a space for my product and gather all of it's updates in the public there. That's how the idea about haptic turned to life. I like to call haptic "The #BuildInPublic toolkit". Think WordPress for your product's public journey. I felt the rush quickly and set up a landing page in a matter of a few hours. Meet https://haptic.so . It's already in the process of development. I'm working on the MVP and plan to release something very simple soon. On top of that, I already got 5 subscribers without much marketing, which is kinda validating my idea. I'm excited. And what about meetlog. It's on hold for a bit. I made good progress there, but decided that strategically it's better to wait
Read more

Building an audience is not a numbers game

 In a recent discussion in IndieHackers, a community member shared the following insight. In my mind, audience = hundreds/thousands of people regularly interested in your content, meaning you can share ideas and/or promote products to them. Sharing ideas helps you get feedback. Promoting your products gives you "free" distribution. Here's my response. I'm curious what do you think about the following thought experiment. I have, say 1 follower. Only 1. Elon Musk. I build batteries for cars. Is my audience Elon, or Elon's audience? What I'm trying to say is that the audience is not a single layer. The audience is multi-layered ;). That's why I think that, yes, you need an audience, but more importantly, you need an audience with as many layers as possible (quality audience). Now, do you still think of an audience in terms of numbers or in terms of layers? :)
Read more