loading...
Cover image for Changelog: Subscribe to a Post’s Threads v2
The DEV Team

Changelog: Subscribe to a Post’s Threads v2

nickytonline profile image Nick Taylor (he/him) Originally published at iamdeveloper.com Updated on ・1 min read

You could already subscribe to a post's comments on DEV, but the problem was many community members were not aware that you could. We had this feature pretty well hidden. From a post page, you had to click on the three dots to see a post's comment subscription options.

Screenshot of the old comment subscription feature

With the new comment subscription component, comment subscriptions are front and center in the discussion area of a post.

New comment subscription component

All the existing functionality still exists, it's just easier to find. 😄 You can subscribe to all comments, top comments, author comments or unsubscribe.

New comment subscription component displaying comment subscription options

Take it for a spin to stay engaged with the posts that interest you.

Here are the PRs related to this feature for those interested.

Add comment subscription component to article page #7205

What type of PR is this? (check all applicable)

  • [ ] Refactor
  • [x] Feature
  • [ ] Bug Fix
  • [ ] Optimization
  • [ ] Documentation Update

Description

Added the comment subscription feature using then new better surface UI.

Related Tickets & Documents

Mobile & Desktop Screenshots/Recordings (if there are UI changes)

image

Just some screenshots for responsiveness

image

The Feature in Action

Apr-22-2020 15-01-26

Added tests?

  • [x] yes
  • [ ] no, because they aren't needed
  • [ ] no, because I need help

Added to documentation?

  • [ ] docs.dev.to
  • [ ] readme
  • [x] no documentation needed

[optional] Are there any post deployment tasks we need to perform?

[optional] What gif best describes this PR or how it makes you feel?

Kevin McAllister from Home Alone moving his eyebrows up and down

Created Snackbar components #7415

What type of PR is this? (check all applicable)

  • [ ] Refactor
  • [x] Feature
  • [ ] Bug Fix
  • [ ] Optimization
  • [ ] Documentation Update

Description

This PR gives us the following application components. <Snackbar /> and <SnackbarItem /> and <SnackbarPoller />.

How the Snackbar works.

  • You can have at most 3 snackbar items in the snackbar
  • If more than 3 are added, the 3 newest are the ones that remain.
  • The last snackbar item added is the first one to appear at the bottom in the snackbar.
  • snackbar items have a default lifespan of 5 seconds which is configurable via the lifespan prop on the <SnackbarPoller /> component. Once the lifespan has completed, the snackbar item is removed from the snackbar
  • If a user mouses over the snackbar, all lifespans of snackbar items are paused.
  • If a use mouses out of the snackbar area, the lifespan of snackbar items resumes.

Related Tickets & Documents

Mobile & Desktop Screenshots/Recordings (if there are UI changes)

<SnackbarItem /> Component

image

image

<Snackbar /> Component

image

image

<SnackbarPoller /> Component

image

Added tests?

  • [x] yes
  • [ ] no, because they aren't needed
  • [ ] no, because I need help

Added to documentation?

  • [ ] docs.dev.to
  • [ ] readme
  • [x] no documentation needed

[optional] Are there any post deployment tasks we need to perform?

[optional] What gif best describes this PR or how it makes you feel?

Someone holding two bags of chips saying "Snack attack!"

Comment Subscription Component #7136

What type of PR is this? (check all applicable)

  • [ ] Refactor
  • [x] Feature
  • [ ] Bug Fix
  • [ ] Optimization
  • [ ] Documentation Update

Description

This is the comment subscription component that will be used on the article page. Available on the latest Storybook.

Related Tickets & Documents

Mobile & Desktop Screenshots/Recordings (if there are UI changes)

Apr-08-2020 11-27-02

Added tests?

  • [x] yes
  • [ ] no, because they aren't needed
  • [ ] no, because I need help

Added to documentation?

  • [ ] docs.dev.to
  • [ ] readme
  • [x] no documentation needed

[optional] Are there any post deployment tasks we need to perform?

[optional] What gif best describes this PR or how it makes you feel?

A woman pointing up at the word subscribe

Created the <ButtonGroup /> Preact Component #7048

What type of PR is this? (check all applicable)

  • [ ] Refactor
  • [x] Feature
  • [ ] Bug Fix
  • [ ] Optimization
  • [ ] Documentation Update

Description

Converted the design system button group to a Preact component.

Here is the ButtonGroup in Storybook

Related Tickets & Documents

Mobile & Desktop Screenshots/Recordings (if there are UI changes)

An example usage of the component.

image

Added tests?

  • [x] yes
  • [ ] no, because they aren't needed
  • [ ] no, because I need help

Added to documentation?

  • [ ] docs.dev.to
  • [ ] readme
  • [x] no documentation needed

[optional] Are there any post deployment tasks we need to perform?

[optional] What gif best describes this PR or how it makes you feel?

Elf in the movie Elf pressing as many elevator buttons as possible at the same time

Created Crayons Button Preact component #6987

What type of PR is this? (check all applicable)

  • [ ] Refactor
  • [x] Feature
  • [ ] Bug Fix
  • [ ] Optimization
  • [ ] Documentation Update

Description

Design system buttons are now available as Preact button components. See the latest Storybook to see button components in action.

By default the <Button /> component renders as an HTML button element, <button ... />, but you can also render it as an HTML anchor element, <a ... />, via the as prop of the <Button /> component. I used as as this is what styled-components used. I basically couldn't think of a better prop name. 😄

Related Tickets & Documents

Mobile & Desktop Screenshots/Recordings (if there are UI changes)

Primary

<Button {...props} />

image

Secondary

<Button variant="secondary" {...props} />

image

Outlined

<Button variant="outlined" {...props} />

image

Danger

<Button variant="danger" {...props} />

image

Added tests?

  • [x] yes
  • [ ] no, because they aren't needed
  • [ ] no, because I need help

Added to documentation?

  • [ ] docs.dev.to
  • [ ] readme
  • [x] no documentation needed

[optional] Are there any post deployment tasks we need to perform?

[optional] What gif best describes this PR or how it makes you feel?

Some cute cartoon animation saying "I like pressing buttons!"

Discussion

pic
Editor guide
Collapse
ben profile image
Ben Halpern

The impetus for developing this out so it's easier to select (The old UI was brutal even if you knew it existed 😵) was that every time folks used it, they were really happy they did. It let's you keep up with ideas you care about. If you come across a conversation you want to pay attention to it's a lot easier to get the stream into your notifications than otherwise.

Collapse
nombrekeff profile image
Manolo Edge

Cool addition, I didn't know this feature existed

Collapse
joshpuetz profile image
Josh Puetz

This is one of the main reasons we made this change! I also had no idea this feature existed!

Collapse
ben profile image
Ben Halpern

Oh look what showed up in my notifications after I subscribed to this thread...

josh

Collapse
ziizium profile image
Habdul Hazeez

Same here.

Collapse
thomasbnt profile image
Thomas Bnt

It's really better ! More engagement for subscribe comments. Great job 🙌☕

Collapse
nickytonline profile image
Collapse
cryptic022 profile image
Pankaj Kumar

It is nice addition. Can we get bookmark or save to reading list button on post with other icons ? It happens that I have liked the post.I want to save it for future as well. But I don't see option. I have to go to search bar and save click button. It will be easy if save button exists with other icon.
Thanks for doing great work man.

Collapse
nickytonline profile image
Nick Taylor (he/him) Author

It's actually already there in the reactions area of a post. 😄

Reaction icons for a DEV post

It's the blue icon in the sidebar of a post, or at the bottom if on mobile.

Bookmark a DEV post icon

I'm glad you mentioned it though as perhaps you are not the only one that may not be aware that that's what that icon is.

Collapse
cryptic022 profile image
Pankaj Kumar

Ohh I never knew that. I thought it is just another icon like heart 😂😂. Thanks.

Collapse
sergix profile image
Collapse
nickytonline profile image
Nick Taylor (he/him) Author

I only posted the article today because a bunch of pages had to be invalidated from the cache. Glad you were curious about it yesterday though. 😉

Collapse
sergix profile image
Peyton McGinnis

Reminds me of a quote...

There are only two hard things in Computer Science: cache invalidation and naming things. (Phil Karlton)

Collapse
cescquintero profile image
Francisco Quintero 🇨🇴

😅 I saw the button yesterday but was waiting for this blog post to understand it better.

Looks awesome and really useful!

Collapse
nickytonline profile image
Collapse
michaeltharrington profile image
Michael Tharrington (he/him)

I actually use this one all the time, but was pleasantly surprised to see the new location just today! It's much more intuitive. Nice work!!

Collapse
nickytonline profile image
Collapse
negue profile image
negue

Awesome! 🎉

Collapse
ziizium profile image
Habdul Hazeez

This is interesting!