https://github.com/hapramp/alpha-web
The reply editor used earlier consisted of only one line and was not suitable for the application. But with markdown editor introduced in the web app, it was fairly easy to use it for writing replies too.
MarkdownEditorThe markdown editor was dependent on the redux state to get the content. This would prevent us from using the component directly as the reply editor.
This involved removing logic to get/set content from redux state and plugging them in as parent props.
After we had isolated the component state from redux, we had to make some more changes to make it look better when using as the reply editor. This included specifying the props to hide redundant texts inside the component, allowing to set initial rows and specifying if the borders should be shown for the component.
CreateReply ComponentAfter the changes mentioned above, we were now good to use MarkdownEditor inside the component which renders UI for creating a reply.
Reply text is stored in the component state and is initially set to @{parent_author} for the post. The markdown editor is then rendered with 1 rows initially and ability to update its content using parent component's state.
The onReplyPosted prop can be passed in the CreateReply component which allows the parent component to take actions as the reply gets posted.
The earlier method used to get the state for a post from Steem stopped sending the parent post in content and hence the comments were not getting updated as they were posted.
The comments are now updated using the special action which gets triggered after fetching content for a post and replies are set accordingly for the post.
#144: Use markdown for comment editor
#149: Add docs related to onboarding pages
1Ramp is all about interests, communities, and contests on Steem. And now, we are at a stage that with every little update we are preparing for a beta launch (in a few months). So it is time to put up a friendly and meaningful welcome message for the visitors. The logged out users will see onboarding pages introducing them to 1Ramp.
BodyModal reusableThe modal used earlier for displaying rating could be used at other places too. So after refactoring the PostRatings components, we had the BodyModal which could be used anywhere in the app.
What this basically did was use the props from parent component and override a few for custom behavior such as enabling/disabling the scroll for document, selecting parent, etc.
For detailed changes, check out this diff - https://github.com/hapramp/alpha-web/pull/147/commits/88ac8b28df67a8b0b1e5ecefceb8817bc0d0a858.
Onboard componentThis component is rendered whenever the app decides to show the onboarding. It uses the BodyModal and has a collection of pages (called overlayPages) that it needs to show -
The onboarding is showed when both of the following is true -
If both of this is true, the redux action to show the onboarding is triggered after 5 seconds and the modal is shown.
The state of onboarding (the current page to show and if we want to show the onboarding) is stored with redux. Initially, the onboarding is set to be hidden and the default page is 0. This changes based on the different actions and constraints are set to not render the current index useless.
Once the user sees the onboarding, the cookie is set and it won't re-appear on the next reload.
OnboardThe Onboard component has a page which prompts users to sign in to the app using SteemConnect. This same page is used when a user tries to take an action which only signed in users can take (e.g. comment and rate).
For achieving this, we have an action called showSignIn which set's the current page to the onboarding page -
App size plays a significant rate in user experience if we talk about the first load of the web app. The final bundled size for the 1Ramp Alpha web app was over 800kB - which made it load slowly in almost all conditions.
To resolve this, a few steps were taken. Let's take a look at them one-by-one.
Code splitting is one of the most compelling features of webpack. This feature allows you to split your code into various bundles which can then be loaded on demand or in parallel. It can be used to achieve smaller bundles and control resource load prioritization which, if used correctly, can have a major impact on load time.
For the app, components are split based on the routes using react-loadable. We used route based splitting here to load the required code only when we are on the route that uses it.
Following are the different bundles generated after splitting the components -
To make proper optimizations for the overall size of the app, we need to know that which components are taking up the most of our space. There are many plugins in JS which help us find this out.
We used source-map-explorer based on the create-react-app documentation.
Once we had the numbers, things were clear about which dependencies were taking a lot of space and could be removed or optimized.
The firebase dependency is the single most significant factor for the large bundle size of the application. And to make things worse, it was not even used as of now - it was used long back in the app.
Just removing Firebase completely made the app much lighter.
uikit was responsible for a significant amount of bundle size but all it did was showing toasts in the app. So we decided to remove the dependency altogether and move to some lighter solution - react-toastify.
It had all the things we needed and was much smaller in size. Also, it was very easy to change the existing code to utilize this new library (see diff).
showdown was used to convert markdown to HTML at few places but was taking too much space and could be replaced with the method which converts post body to HTML.lodash imports were optimized to only use the function needed in a file.Earlier, the participate button was simply hidden from the view if the user was signed out. With #146, the users will now see a button saying "Sign in to Participate" and would take them to SteemConnect login page if clicked.
This used the newly introduced SignInButton which takes into account the current location of the map and wraps its children inside a hyperlink which points to the SteemConnect login page.
There was also a small change which made headings consistent in the posts. Earlier, different headings were of different colors and non-uniform sizes. But with #145, it was fixed.
So far we've hosted 12 contests and participants have won 129 Steem in prizes. From the time we released the contest feature on 1Ramp, we reserved its access to limited accounts as we were testing how this feature will turn out. We are using our Android app to host contests and declare winners and we are loving the ease and experience. Soon this feature will be available for all the 1Ramp users on our web and android app.
Don't forget to check out the latest competitions: "Finish this story" and "caption this photo".
We are building a platform on Steem where anyone with creative interests can come together, engage with each other, participate in the communities, and compete in the contests. We imagine an exciting place on Steem with a friendly and familiar interface and experience. We invite you to try out 1Ramp and give us your feedback.