create account

Steemblr development update 05 - Theme Editor by snwolak

View this thread on: hive.blogpeakd.comecency.com
· @snwolak · (edited)
$183.18
Steemblr development update 05 - Theme Editor
[![logo.md.png](http://steemimages.com/images/2018/06/03/logo.md.png)](http://steemimages.com/image/08Nc)

Steemblr is open source microblogging platform powered by steem blockchain . It allows user to post and explore content which is smaller than a traditional blog.

You can check developer version here: https://steemblr.com

### Repository
https://github.com/snwolak/steemblr

### New Features

#### Theme Editor
New section where user can customize his blog. Styles changed in editor are applied to blog modal, profile hover and main blog view. 
Editor can be accessed in settings in customize section.

https://i.imgsafe.org/b2/b211f6e961.jpeg

When user is logging in for the first time application creates default blog style for him with data imported from steem api. 
Changes made in editor won't affect how user account look like on steemit and other front-ends. 
It was implemented by using redux, and firebase firestore.  Editor is loading blog layout from database or redux store when it was already loaded. 
To view changes in real time, editor is modyfing layout loaded in redux and then blog view is loading new props from store.

https://github.com/snwolak/steemblr/commit/806e2dff7050f3f78676c8fafcd37b0caf310664
https://github.com/snwolak/steemblr/commit/4e77ff71fa60f4b3b92eb6bcfc7bdae6a6239152
https://github.com/snwolak/steemblr/commit/2a2f0b1bb5c1a92fb3246d632bceee684a5f60ee
https://github.com/snwolak/steemblr/commit/e18ba7a0fc2785242e58c74ce3f4330e0971c2e2
https://github.com/snwolak/steemblr/commit/5b9248df197f5174c0f7c8d3940ee6f40fbb8aab#diff-418a24734e1cb22848dfa463a032ba46

##### Blog title and description
This feature will change your blog title and description. 
At the first login title and description are imported from json_metadata. Changing title and description in editor won't change your metadata on steem account, only in steemblr database. 

https://firebasestorage.googleapis.com/v0/b/steemblr.appspot.com/o/development%2Fdev_05_1.gif?alt=media&token=0b7b492e-0078-4e02-a9cc-8337f45de4fa

Input changes are dispatched to redux store so components can get new props, and can be seen live.

##### Header image
Changing header image, again it is imported in metadata and changing it in editor won't change your cover image on steemit. 

https://firebasestorage.googleapis.com/v0/b/steemblr.appspot.com/o/development%2Fdev_05_2.gif?alt=media&token=bf5061cf-597b-4e13-877c-ae8c6ef20cd8

https://github.com/snwolak/steemblr/commit/59f667ad2a8a02d2e61d02dd5d6f5a3da08936ac

Header is uploaded to firebase storage and link is stored in redux store.

##### Avatar shape
This features lets user change shape of his avatar, user can choose between circle and square shape.

https://firebasestorage.googleapis.com/v0/b/steemblr.appspot.com/o/development%2Fdev_05_3.gif?alt=media&token=438a57d8-ade3-47fd-a6c3-6f6256828b83

Avatar border radius is changed accordingly to shape name.

https://github.com/snwolak/steemblr/commit/2a2f0b1bb5c1a92fb3246d632bceee684a5f60ee

##### Title font
Gives user control over which font are used to display blog title. User can choose between one hundred different web pgoogle fonts. 

https://firebasestorage.googleapis.com/v0/b/steemblr.appspot.com/o/development%2Fdev_05_4.gif?alt=media&token=321effe0-6ec4-4cda-b91a-4202af43b0b9

It was implemented by using font-picker-react dependency. With font-picker-react font can be choosen dynamically then props are send to redux and styled-components gets font family, category and url to load choosen font.

https://github.com/snwolak/steemblr/commit/5b9248df197f5174c0f7c8d3940ee6f40fbb8aab#diff-418a24734e1cb22848dfa463a032ba46

##### Background, title, description color change
This feature lets user change appearance background and title/description elements.

https://firebasestorage.googleapis.com/v0/b/steemblr.appspot.com/o/development%2Fdev_05_5.gif?alt=media&token=dc46c351-9d74-40f4-ae9d-0ff49b50bdd3

This feature uses react-color for color picker, when color is choosen then app dispatches data to redux store and components are updated.

https://github.com/snwolak/steemblr/commit/2a2f0b1bb5c1a92fb3246d632bceee684a5f60ee

##### Hiding blog elements
User can hide elements like header, avatar, title and description. Hiding works in main blog view and blog modal, for now apart from hiding avatar it doesn't work in profile hover. 

https://firebasestorage.googleapis.com/v0/b/steemblr.appspot.com/o/development%2Fdev_05_6.gif?alt=media&token=022a7eac-a4f7-4d2f-b564-d9019817018c

It was implemented by using checkbox and sending boolean values about which components should be shown in blog views.

https://github.com/snwolak/steemblr/commit/5b9248df197f5174c0f7c8d3940ee6f40fbb8aab
https://github.com/snwolak/steemblr/commit/ac55b105918eb11ae3526a33ee3b497a6eb3f31c

#### Updated blog views
Components responsible for showing profile hover, blog modal and main blog view are now loading custom styles made in theme editor.

https://firebasestorage.googleapis.com/v0/b/steemblr.appspot.com/o/development%2Fdev_05_7.gif?alt=media&token=c9b6fa2e-b7b0-4549-b42a-bdb87b4c963b

It was achived by using prop feature in styled-components. Components are getting styles from database/redux store and loading them into styled-components.

https://github.com/snwolak/steemblr/commit/ad70cfe6619c98ca917d9a94fb3fa3825731231c
https://github.com/snwolak/steemblr/commit/26af18cb79c7fbafc18ff392fcb45e9bcb803642
https://github.com/snwolak/steemblr/commit/fa0cc0421ea678334bb3cc2efae53e2094756973

#### Github Account

https://github.com/snwolak
πŸ‘  , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , and 77 others
πŸ‘Ž  , ,
properties (23)
authorsnwolak
permlinksteemblr-development-update-05-theme-editor
categoryutopian-io
json_metadata{"tags":["utopian-io","development","steemit","steemblr"],"image":["http://steemimages.com/images/2018/06/03/logo.md.png","https://i.imgsafe.org/b2/b211f6e961.jpeg","https://firebasestorage.googleapis.com/v0/b/steemblr.appspot.com/o/development%2Fdev_05_1.gif?alt=media&token=0b7b492e-0078-4e02-a9cc-8337f45de4fa","https://firebasestorage.googleapis.com/v0/b/steemblr.appspot.com/o/development%2Fdev_05_2.gif?alt=media&token=bf5061cf-597b-4e13-877c-ae8c6ef20cd8","https://firebasestorage.googleapis.com/v0/b/steemblr.appspot.com/o/development%2Fdev_05_3.gif?alt=media&token=438a57d8-ade3-47fd-a6c3-6f6256828b83","https://firebasestorage.googleapis.com/v0/b/steemblr.appspot.com/o/development%2Fdev_05_4.gif?alt=media&token=321effe0-6ec4-4cda-b91a-4202af43b0b9","https://firebasestorage.googleapis.com/v0/b/steemblr.appspot.com/o/development%2Fdev_05_5.gif?alt=media&token=dc46c351-9d74-40f4-ae9d-0ff49b50bdd3","https://firebasestorage.googleapis.com/v0/b/steemblr.appspot.com/o/development%2Fdev_05_6.gif?alt=media&token=022a7eac-a4f7-4d2f-b564-d9019817018c","https://firebasestorage.googleapis.com/v0/b/steemblr.appspot.com/o/development%2Fdev_05_7.gif?alt=media&token=c9b6fa2e-b7b0-4549-b42a-bdb87b4c963b"],"links":["http://steemimages.com/image/08Nc","https://steemblr.com","https://github.com/snwolak/steemblr","https://github.com/snwolak/steemblr/commit/806e2dff7050f3f78676c8fafcd37b0caf310664","https://github.com/snwolak/steemblr/commit/4e77ff71fa60f4b3b92eb6bcfc7bdae6a6239152","https://github.com/snwolak/steemblr/commit/2a2f0b1bb5c1a92fb3246d632bceee684a5f60ee","https://github.com/snwolak/steemblr/commit/e18ba7a0fc2785242e58c74ce3f4330e0971c2e2","https://github.com/snwolak/steemblr/commit/5b9248df197f5174c0f7c8d3940ee6f40fbb8aab#diff-418a24734e1cb22848dfa463a032ba46","https://github.com/snwolak/steemblr/commit/59f667ad2a8a02d2e61d02dd5d6f5a3da08936ac","https://github.com/snwolak/steemblr/commit/5b9248df197f5174c0f7c8d3940ee6f40fbb8aab","https://github.com/snwolak/steemblr/commit/ac55b105918eb11ae3526a33ee3b497a6eb3f31c","https://github.com/snwolak/steemblr/commit/ad70cfe6619c98ca917d9a94fb3fa3825731231c","https://github.com/snwolak/steemblr/commit/26af18cb79c7fbafc18ff392fcb45e9bcb803642","https://github.com/snwolak/steemblr/commit/fa0cc0421ea678334bb3cc2efae53e2094756973","https://github.com/snwolak"],"app":"steemit/0.1","format":"markdown"}
created2018-07-15 13:36:36
last_update2018-07-15 13:37:45
depth0
children13
last_payout2018-07-22 13:36:36
cashout_time1969-12-31 23:59:59
total_payout_value138.235 HBD
curator_payout_value44.940 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length5,562
author_reputation22,201,696,783,567
root_title"Steemblr development update 05 - Theme Editor"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id64,759,616
net_rshares84,547,545,268,958
author_curate_reward""
vote details (144)
@amosbastian ·
Great contribution once again! We have decided to staff pick it, which means you will receive the maximum vote for the development category!
πŸ‘  ,
properties (23)
authoramosbastian
permlinkre-snwolak-steemblr-development-update-05-theme-editor-20180716t131618356z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"app":"steemit/0.1"}
created2018-07-16 13:16:18
last_update2018-07-16 13:16:18
depth1
children1
last_payout2018-07-23 13:16:18
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length140
author_reputation174,473,586,900,705
root_title"Steemblr development update 05 - Theme Editor"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id64,868,839
net_rshares8,445,734,309
author_curate_reward""
vote details (2)
@snwolak ·
Thanks! That means a lot, especially coming from you.
properties (22)
authorsnwolak
permlinkre-amosbastian-re-snwolak-steemblr-development-update-05-theme-editor-20180718t074141147z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"app":"steemit/0.1"}
created2018-07-18 07:41:42
last_update2018-07-18 07:41:42
depth2
children0
last_payout2018-07-25 07:41:42
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length53
author_reputation22,201,696,783,567
root_title"Steemblr development update 05 - Theme Editor"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id65,085,883
net_rshares0
@arcange ·
Congratulations @snwolak!
Your post was mentioned in the [Steemit Hit Parade](https://steemit.com/hit-parade/@arcange/daily-hit-parade-20180715) in the following category:

* Pending payout - Ranked 10 with $ 170,87
πŸ‘  
properties (23)
authorarcange
permlinkre-steemblr-development-update-05-theme-editor-20180715t180332000z
categoryutopian-io
json_metadata""
created2018-07-16 16:11:09
last_update2018-07-16 16:11:09
depth1
children0
last_payout2018-07-23 16:11:09
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length216
author_reputation1,146,622,708,341,708
root_title"Steemblr development update 05 - Theme Editor"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id64,887,666
net_rshares4,775,504,580
author_curate_reward""
vote details (1)
@gregory.latinier ·
$3.35
Ok so first of all congratulations, no really, this is an awesome job. Your code is of great quality, I enjoyed reviewing your work / project.
So I'm go into little details.

Let's go for the review:

- Most of your dependencies in the package.json are not in the devDep where they should be. Since webpack and babel transpile your code during the build almost all packages are not needed for the production so they should be in the devDep.

- I learn the existence of CRA Rewired today. Thanks for that ;)

- +1 for the use of styled components

- https://github.com/snwolak/steemblr/commit/806e2dff7050f3f78676c8fafcd37b0caf310664#diff-418a24734e1cb22848dfa463a032ba46R64 => You got `react-intl` but use static text. You got this in all your app.

- https://github.com/snwolak/steemblr/commit/806e2dff7050f3f78676c8fafcd37b0caf310664#diff-2547e34f61170607e40e15adda2a019fR90 => Why do you have this when CRA does already hot reload? Care to explain?

- https://github.com/snwolak/steemblr/commit/806e2dff7050f3f78676c8fafcd37b0caf310664#diff-1442303b0587d758d9bcdab0e375f846R53 => You should prefer [template notation](https://eslint.org/docs/rules/prefer-template)

- https://github.com/snwolak/steemblr/blob/5b9248df197f5174c0f7c8d3940ee6f40fbb8aab/src/Functions/saveTheme.js#L14 => forgot console log? Not very useful :p

- You have a lot of this `void 0` =>
```
{this.state.account.show_header_image ? (
    <Banner coverImage={this.state.coverImageUrl} />
  ) : (
     void 0
)}
```
It can be simplified this way:

```
{this.state.account.show_header_image && <Banner coverImage={this.state.coverImageUrl} />}
```

- https://github.com/snwolak/steemblr/blob/master/src/Home/PostsLoader.js#L8 => gotcha! Useless comment war, headshot :D

- https://github.com/snwolak/steemblr/blob/master/src/Home/PostsLoader.js#L79 => How come you have to await for the state to set an attribute?

- https://github.com/snwolak/steemblr/blob/master/src/Api.js#L8 => Don't commit dead code

An awesome job really,  you got almost everything the right way and I went into tiny details to find something to say.
Keep up the good work and keep improving!

See you on your next contribution may be :)

Your contribution has been evaluated according to [Utopian policies and guidelines](https://join.utopian.io/guidelines), as well as a predefined set of questions pertaining to the category.

To view those questions and the relevant answers related to your post, [click here](https://review.utopian.io/result/3/1111111).

---- 
Need help? Write a ticket on https://support.utopian.io/. 
Chat with us on [Discord](https://discord.gg/uTyJkNm). 
[[utopian-moderator]](https://join.utopian.io/)
πŸ‘  , , , , , ,
properties (23)
authorgregory.latinier
permlinkre-snwolak-steemblr-development-update-05-theme-editor-20180715t234645669z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"links":["https://github.com/snwolak/steemblr/commit/806e2dff7050f3f78676c8fafcd37b0caf310664#diff-418a24734e1cb22848dfa463a032ba46R64","https://github.com/snwolak/steemblr/commit/806e2dff7050f3f78676c8fafcd37b0caf310664#diff-2547e34f61170607e40e15adda2a019fR90","https://github.com/snwolak/steemblr/commit/806e2dff7050f3f78676c8fafcd37b0caf310664#diff-1442303b0587d758d9bcdab0e375f846R53","https://eslint.org/docs/rules/prefer-template","https://github.com/snwolak/steemblr/blob/5b9248df197f5174c0f7c8d3940ee6f40fbb8aab/src/Functions/saveTheme.js#L14","https://github.com/snwolak/steemblr/blob/master/src/Home/PostsLoader.js#L8","https://github.com/snwolak/steemblr/blob/master/src/Home/PostsLoader.js#L79","https://github.com/snwolak/steemblr/blob/master/src/Api.js#L8","https://join.utopian.io/guidelines","https://review.utopian.io/result/3/1111111","https://support.utopian.io/","https://discord.gg/uTyJkNm","https://join.utopian.io/"],"app":"steemit/0.1"}
created2018-07-15 23:46:45
last_update2018-07-15 23:46:45
depth1
children2
last_payout2018-07-22 23:46:45
cashout_time1969-12-31 23:59:59
total_payout_value2.582 HBD
curator_payout_value0.763 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length2,675
author_reputation34,278,323,818,021
root_title"Steemblr development update 05 - Theme Editor"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id64,807,581
net_rshares1,564,357,462,771
author_curate_reward""
vote details (7)
@snwolak ·
Hello! I will try to answer your questions as best as I can.

1. Hot reload build in CRA didn't work with styled-components so I had to use react-app-rewired to set real hot reload.
  
2. About awaiting for state. There was problem with some strange behaviour when I didn't await for some of the attributes to be set. 

Thanks for your kind words and tips. I will try to update dev environment and app accordingly to feedback you gave me.
properties (22)
authorsnwolak
permlinkre-gregorylatinier-re-snwolak-steemblr-development-update-05-theme-editor-20180716t124436171z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"app":"steemit/0.1"}
created2018-07-16 12:44:36
last_update2018-07-16 12:44:36
depth2
children0
last_payout2018-07-23 12:44:36
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length438
author_reputation22,201,696,783,567
root_title"Steemblr development update 05 - Theme Editor"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id64,865,475
net_rshares0
@utopian-io ·
Hey @gregory.latinier
Here's a tip for your valuable feedback! @Utopian-io loves and incentivises informative comments.

**Contributing on Utopian**
Learn how to contribute on <a href="https://join.utopian.io">our website</a>.

**Want to chat? Join us on Discord https://discord.gg/h52nFrV.**

<a href="https://v2.steemconnect.com/sign/account-witness-vote?witness=utopian-io&approve=1">Vote for Utopian Witness!</a>
πŸ‘  
properties (23)
authorutopian-io
permlink20180716t095618123z
categoryutopian-io
json_metadata{"tags":["utopian.tip"],"app":"utopian-io"}
created2018-07-16 09:56:18
last_update2018-07-16 09:56:18
depth2
children0
last_payout2018-07-23 09:56:18
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length416
author_reputation152,955,367,999,756
root_title"Steemblr development update 05 - Theme Editor"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id64,850,546
net_rshares5,254,553,552
author_curate_reward""
vote details (1)
@katerinaramm ·
I really love this idea! 
Can't wait to test it πŸ˜€
πŸ‘  
properties (23)
authorkaterinaramm
permlinkre-snwolak-steemblr-development-update-05-theme-editor-20180717t210400952z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"app":"steemit/0.1"}
created2018-07-17 21:04:00
last_update2018-07-17 21:04:00
depth1
children5
last_payout2018-07-24 21:04:00
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length49
author_reputation682,050,118,754,759
root_title"Steemblr development update 05 - Theme Editor"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id65,036,286
net_rshares5,136,452,150
author_curate_reward""
vote details (1)
@snwolak ·
$0.04
Glad you like it, week by week app is getting closer to release. :)
πŸ‘  
properties (23)
authorsnwolak
permlinkre-katerinaramm-re-snwolak-steemblr-development-update-05-theme-editor-20180718t082841059z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"app":"steemit/0.1"}
created2018-07-18 08:28:39
last_update2018-07-18 08:28:39
depth2
children4
last_payout2018-07-25 08:28:39
cashout_time1969-12-31 23:59:59
total_payout_value0.041 HBD
curator_payout_value0.001 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length67
author_reputation22,201,696,783,567
root_title"Steemblr development update 05 - Theme Editor"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id65,089,627
net_rshares20,346,127,469
author_curate_reward""
vote details (1)
@katerinaramm ·
I am thinking of bringing my tumblr [blog](https://aboutheraklion.tumblr.com/) over to yours :)
πŸ‘  
properties (23)
authorkaterinaramm
permlinkre-snwolak-re-katerinaramm-re-snwolak-steemblr-development-update-05-theme-editor-20180718t083603920z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"links":["https://aboutheraklion.tumblr.com/"],"app":"steemit/0.1"}
created2018-07-18 08:36:09
last_update2018-07-18 08:36:09
depth3
children3
last_payout2018-07-25 08:36:09
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length95
author_reputation682,050,118,754,759
root_title"Steemblr development update 05 - Theme Editor"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id65,090,223
net_rshares5,136,654,970
author_curate_reward""
vote details (1)
@utopian-io ·
Hey @snwolak
**Thanks for contributing on Utopian**.
Congratulations! Your contribution was Staff Picked to receive a maximum vote for the development category on Utopian for being of significant value to the project and the open source community.

We’re already looking forward to your next contribution!

**Want to chat? Join us on Discord https://discord.gg/h52nFrV.**

<a href='https://v2.steemconnect.com/sign/account-witness-vote?witness=utopian-io&approve=1'>Vote for Utopian Witness!</a>
πŸ‘  ,
properties (23)
authorutopian-io
permlinkre-steemblr-development-update-05-theme-editor-20180716t140008z
categoryutopian-io
json_metadata"{"app": "beem/0.19.42"}"
created2018-07-16 14:00:09
last_update2018-07-16 14:00:09
depth1
children0
last_payout2018-07-23 14:00:09
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length495
author_reputation152,955,367,999,756
root_title"Steemblr development update 05 - Theme Editor"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id64,873,278
net_rshares9,953,033,865
author_curate_reward""
vote details (2)