My latest contributions to Steemit Condenser app

Since Steemit Inc is focusing their effort on SMT and Communities, there have been less community contributions being released to the Steemit.com frontend, they are still happening but onto a beta website for testing Communities.

Having a day job, I have so much time I can give for other projects, however, I'm trying to contribute to the Steemit Condenser and Wallet apps because I believe making them better is beneficial for everyone. That is why I have been working for free for these two projects, here are some example of work I've done in the past:

• Keychain Added to Steemit.com!
• Community Contributions to Steemit.com

I'm still quite a newbie in terms of developing with React but we have started using it at work so I'm getting better at it.

My Recent contributions

Image upload à la GitHub

Royachiron raised the following issue When uploading image, you can't just drop it - text cursor must stay where you want the image to be posted. When it finishes, it jumps to end of text. I think everyone has that annoying experience, if you drag and drop and image into the post editor, you cannot continue typing while it is uploading or else the image will then suddenly appear in between the letters you are typing.

I've attempted to fix this by doing what GitHub does, when you drag and drop an image, it will insert a temporary image tag into the text field and will replace it once the image is successfully uploaded:
https://github.com/steemit/condenser/pull/3376

I've also enabled drag and drop of multiple images at once. You could do that currently but only one of the images dropped will be uploaded. The feature is not perfect yet, I've restricted the number of images to 10 max and they are uploaded one after the other:
https://github.com/steemit/condenser/pull/3622
https://github.com/steemit/condenser/pull/3638

---

Author dropdown

@roadscape raised this one revamp author dropdown component #3509. So instead of relying on global data, he wanted the click on the author avatar to trigger a profile fetch instead and store the info in a React store.

This has allowed fetching for extra info and enhancing the content of the author profile popup. Working on this ticket taught me a bit about how to use Redux Saga for React.
https://github.com/steemit/condenser/pull/3522

---

UI look and feel

I have previously redesigned the comment section of a blog post to show clear separation of each comment block and have promised to apply similar changes to the list of posts from various feeds on the site. I've also taken this opportunity to do some more styling changes to add more visual contrast for better readability. This change has been mentioned by @roadscape during his presentation of the Communities beta site at Steem Fest 4:

There have been a couple of reviews after discussion with @roadscape and @therealwolf.
https://github.com/steemit/condenser/pull/3426

---

Ad hiding header bug

A lot of us have encountered this annoying bug where the header would hide the title of a blog post. It had been raised several times on GitHub:
https://github.com/steemit/condenser/issues/3281
https://github.com/steemit/condenser/issues/3385

The issue was because the Condenser failed to notice when an ad has been successfully inserted into the header and hence could not dynamically push down the content behind the header bar. There have been multiple attempts to fix this by listening to Google DFP's Javascript events and reacting to them but for some reasons it does not always work.

Recently, @blocktrades has raised the issue again and I thought I'd give it another shot. I gave up on listening to the Google DFP events and started to think of an alternative solution. Instead of waiting for an event that tells me that the ad has been inserted, I could maybe wait for an event telling me that the header DOM tree has been modified and the native Javascript feature that allows that is the MutationObserver that I have used several times in the past including:

• Steemed Phish - Anti-phishing Chrome extension for Steem dApps
• Keychainify - Trigger a Steem Keychain transaction from clicks on SteemConnect links

To make the feature re-usable, I created a wrapper React component, all you need to do is wrap your DOM node inside a <ReactMutationObserver> tag with a callback function that will be called when the change you are monitoring is occuring.

https://github.com/steemit/condenser/pull/3635
https://github.com/steemit/condenser/pull/3637

---

Minor bug fixes

While testing the Communities beta, I found out few small issues and found some fixes for them:

• The new Wysiwyg editor was invisible because it did have any border and the background color was the same as the page. Add some basic css for the slate editor #3630
• In a post list view, the last post preview before an ad banner was not rendered properly. Fix broken styling on the post preview before an ad in the post list #3629

---

Support my work by voting for my witness

On Steem, Witnesses are playing the important role of providing a performant and safe network for all of us. You have the power to choose 30 trusty witnesses to package transactions and sign the blocks that will go in the Steem blockchain. Vote for me via SteemConnect to help me do more useful projects for the communities.