superhawk610/dev-a-day

Writing about development once a day for a year.

dev-a-day's Issues

add ability to subscribe to mailing list

This will be a bit more involved since our deployment is totally static, but should be doable with something like Firebase integration.

API Setup

• setup Firebase database integration to store email addresses
• setup Firebase hook for adding/removing emails
• setup integration for sending emails

Client Integration

• add Subscribe button at end of each article
• add Subscribe button at top of article-list
• hook up button to Firebase hook

Deployment Integration

• establish workflow for sending email on new article publish (probably integrate with #4)

decrease horizontal padding on smaller viewports

Articles are padded a bit too much on mobile, we need all the width we can get. Probably should just be decreased to 5px or so.

display estimated time to read on article-view

A nice feature on many modern article hosts is displaying the estimate time required to read through an article. I'm sure the actual estimation can be performed by an existing dependency, just need to find one and integrate it with the article-view component.

• find module capable of estimating time to read for a markdown file
• integrate module with client

Add Share button at the end of article-view

Ya know, for people that don't want to go through the effort of copy/pasting the URL.

redirect clicks on relative links (/articles/blah) to Angular router nav events

A couple recent articles have linked back to other articles - the current behavior of links within an article is to open in a new tab, but this is not ideal since it's linking to another page on our site. Once the markdown renderer has completed, we can scrape for relative links (anything prefixed with /) and replace their click handlers with a custom handler.

The handler should instruct Angular's router to smoothly transition to the indicated route, something like

constructor(private router Router) { }

openArticle(path: string): void {
  this.router.navigate('articles', 'article-view');
}

favicon

Currently the site favicon is Angular's logo because lazy. Let's do something a little more descriptive.

• design custom favicon
• replace current favicon
• add favicon to README

add prev/next article buttons

It would be nice to allow the user to jump to the next or previous article in a series once they've finished reading one.

• add next/prev buttons at bottom of article-view
• hide prev button on first article
• hide next button on most recent article
• add a random article button?

scroll-to-top button

Only 2 days in and I'm already realizing these are generally going to be long articles. It would be nice to have a button show up once you've scrolled away from the top of the page that allows you to easily get back to the top.

• add button element
• hide button element when navbar is visible

Add Discussion component below article-view

Providing an immediate method of feedback and engagement for readers would be great, and a fun project to play around with real time subscriptions (because why not, right?).

• add discussion component to articles module
• establish server side data store for messages
• add component for rendering random image for each user
• add service for interacting with message store

list articles (header/preview/tags?) with permalinks in README

To grab some traffic from GitHub, we could link to all (just recent?) articles in the README and have it updated as part of the deploy process. Could be cool.

header permalinks should be lowercase

Title says it all. Header ids should be run through toLowerCase().

hide horizontal overflow

Mobile overscrolls on some pages, just slap a overflow-x: hidden and we'll be good to go.

automate cache purging via Cloudflare

The current deploy script is nearly there - it handles building and pushing everything up to gh-pages, but new content isn't propagated to the live site since the old content is cached/served via Cloudflare. Cloudflare offers an API for handling this programmatically, let's use that.

• setup API access with Cloudflare
• establish workflow to purge Cloudflare cache
• tack workflow on the end of yarn deploy

send tweet on new article publish

Twitter is a great way to generate engagement, but it sure would be nice to have it done automatically.

• setup API access with Twitter
• establish workflow for sending tweet
• restrict workflow to only run on new article publish

Horizontal scroll for code blocks with no language

Styled code blocks scroll horizontally on mobile to preserve the intended content width. Unstyled blocks (with no language) should also do this.

add SSR to improve Twitter link cards

When linking to an article from a Tweet, Twitter will generate a card to preview the content of the article. Since we're using a SPA and Twitter doesn't execute any JS on the page, we've got to provide any relevant <title> and <meta> tags directly in the HTML - hence, we need SSR. This will almost certainly require migrating to a different host than GitHub Pages.

Potential Hosts:

• Heroku ($7/month)
• DigitalOcean ($5/month)
• Firebase (???)
• AWS (???)
• Azure (???)
• Next (free)

Twitter Card reference: https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/summary.html

setup analytics

It would be cool to see what sort of engagement we're getting, as well as monitor site health in case of errors.

Code Health

• setup external logging provider
• add LogService to handle and log errors

Visitor Analytics

• setup external analytics provider
• log page views to external provider
• log time spent per article to external provider

code splitting for articles

Currently, article content is bundled into the build artifact, which is fine since there are only a couple of articles. However, as this project continues to grow, it will become impractical to load all articles when the user first visits. We've got to work around the limitation of a static deployment, so the easiest solution is to publish the raw markdown files via static deployment and read them from their respective URL.

• establish workflow for deploying static markdown files
• modify ArticlesService to load from the network
• create module to handle listing and displaying all available articles