thechangelog/changelog.com

Changelog is news and podcast for developers. This is our open source platform.

changelog.com's Issues

Films callout buttons should better match mockup

Need margins around featured quote

The featured quote gets too close to the viewport boundaries:

Also if there is an "easy" (css only?) way to identify center-aligned "widows" (one or two words on separate line) and wrap early (or line break) I'd be so super happy.

The takeover menu close button has a bug and doesn't close

When you click the X to close, this ^ happens and it doesn't close.

Show all button should be full width - better centered - correct font size

Static Pages

Dat Todo List

• "/about"
• "/contact"
• "/films"
• "/films - gophercon"
• "/membership"
• "/styleguide"
• "/subscribe"
• "/partnership"
• "/sponsorship"
• "/store"
• "/soundcheck"
• "/team"
• "/live"
• "/nightly"
• "/nightly/confirmation-pending"
• "/nightly/confirmed"
• "/nightly/unsubscribed"
• "/weekly"
• "/weekly/archive"
• "/weekly/confirmation-pending"
• "/weekly/confirmed"
• "/weekly/unsubscribed"

Episode Page: link color wrong on episode guest section

Should be dat green link color

Spacing off on episode show page

Here's what I see:

1. The "with" line is lower than it should be
2. The "with" line is too close to the podcast-menu (I like to call this "play bar")
3. The show summary needs more line-height. Something around 1.4 but I'm not sure what the equates in REM if that's what you're using
4. Not shown -- the download line seems like it's lower than it should be too
5. The download link and icon seem too far apart. The download text also needs a hover style.

Takeover menu links show as hovered when not hovering text

When you hover the links in the takeover menu, it seems like the text is centered in the a tag vs the a tag being center so that when you hover the text, you see the hover styles as expected.

Let me know if this needs more clarity. Basically, hover text -- see hover styles. Hover near the text, don't see hover styles.

Episode Summary: "More" button tooltip too wide

It's currently stretching to the full-width of its container:

Btw, I brought over the popper stuff and your JS that triggers it. Check out web/static/app/app.js if you need to change anything.

The "More" button on the podcast menu needs to be removable

We don't have a function for this yet, but we had Jake design it for future use.

Currently if you remove the markup the right-side padding is jacked:

Episode Page: show notes background image needs to adjust per podcast

Just like it works currently behind the podcast page's "Play" button. Intended look:

This is still currently hard coded to the abstract-circle.svg. I tried applying the same technique as before, but with bad results:

The image size scales up as the show notes content scales up. I think we need to move to a :before implementation...

Layout issues on archive page

http://localhost:4000/podcast/archive

Make episode count a link

The slashes inherit the hover color, but they shouldn't

This is weird because the left side of the footer doesn't have this same issue, but the right side does. The slash shouldn't get the hover styling -- it should remain the same.

Hamburger menu retains outline after click

Avatars run into text on episode widget

My bug, my bad.

Sitemap

Increase show notes line height

The line height for show notes should be 1.4

Add some basic form styles

This is a holdover until we have a page designed that actually has a form on it. Please add some basic form styles so that form elements line up with the general site aesthetic (typography, size, white space, etc).

You can use web/templates/auth/new.html.eex as a testing ground (this gets rendered at /in)

The “Brought to you buy” section under featured podcast needs to be removable

We won't always have this section on the homepage:

But we want to keep the spacing looking good when it's not there. Currently:

Different grays?

I know this was probably in the design -- but what gray are we supposed to use?

The text in the hero area is the Changelog Gray, while the logos are a gray gray and not sure what the footer text color is?

Add abstract logo art behind featured quotes

Our featured quotes on the home page should include the abstract art for their respective show

Here you see it in the mock, behind a Changelog quote:

(I believe it's centered behind the show title)

We're already doing this on "the latest" section of the podcast/show template. Here's the interesting bit of template code:

<article class="flex-column latest-episode latest-episode--<%= @podcast.slug %> section">

And the corresponding sass (_latest-episode.sass):

.latest-episode
    &--podcast
        & > button
            &:before
                background-image: url(/images/podcasts/podcast-abstract-art.svg)

I'm not sure if it's that easy on the featured mosaic, but hopefully it is 😁

Vector logo in News CTA

This should use the vector svg logo we have for "Changelog News"

Support code blocks in show notes

Let's take the styles that we get from Jake's work on the post/content page and add them to the show notes.

Question: How would that look in the show notes on something like Overcast?

Missing link in News CTA

This CTA has two buttons - Subscribe and Details

The subscribe button needs to be left aligned to the left edge of the CTA it's under. Right now there's a margin to the left of it.

Return the user back to the podcast episode

Saving an podcast episode should return the user back to the podcast episode to continue editing as needed.

I have been editing and noticed that on save I'm returned to the admin podcast index vs back to the episode edit page. I'd prefer the edit page (for now).

Hamburger + X alignment

Align the X over the Hamburger. Also, adjust the size of the X so that it seems like the X replaces the hamburger, and vice versa when toggling back and forth.

Show Page: change how guest avatars work

The episode summaries are Markdown-generated and may have multiple <p>s. For this reason, the current markup (with the guest images wrapped inside the <p>) will not work:

<p class="episode-summary_content_description">Big show this week — we caught up with Matz, the creator of Ruby, to discuss the origins of the Ruby programming language, its history and future, Ruby 3.0, Concurrency and Parallelism, Streem, Erlang, Elixir, and more.<img src="http://placehold.it/75" alt="Guest Speaker: Matz"><img src="http://placehold.it/75" alt="Guest Speaker: Matz"></p>

Instead, we'll want to have the <img tags come after the <p> tags, with the same look and feel. Perhaps this will work (notice the episode-summary_content_description has been moved off the <p> as well):

<div class="episode-summary_content_description">
  <p>In this show we talk with Juan Benet, one of the developers behind IPFS -- the InterPlanetary File System, a new peer-to-peer hypermedia distribution protocol, addressed by content and identities. We talked about what it is, how it works, how it can be used, and how it just might save the future of the web.</p>
  <p>another paragraph of summary</p>

  <img src="https://secure.gravatar.com/avatar/36c2a96d583dd66ba2e6d500edd161af.jpg?s=75&amp;d=mm" alt="Guest Speaker: Juan Benet">
  <img src="https://secure.gravatar.com/avatar/36c2a96d583dd66ba2e6d500edd161af.jpg?s=75&amp;d=mm" alt="Guest Speaker: Juan Benet">
</div>

episode-summary widget: episode title should be a link

Mobile nav should include logo in top-left

Show formatting for Guests, Sponsors

We have bios/links for our guests, so I'd like to list them in the show details alongside Sponsors and Notes.

This is a rough-in, but currently I'm doing it like this:

(this episode was imported from old CMS, hence Toptal/Linode sponsorships repeated in Notes and newsletter CTAs)

A few things here:

1. @adamstac are you in favor of including guest info here? We will remove it from legacy show notes
2. If so, what format should this take? What I have here doesn't look great
3. @TuckerCowie note how the sponsorships styles are bad here. Not sure why. This is the markup it's emitting:

<div class="episode-footer-section_content">
  <h3>Sponsors</h3>
  <dl class="sponsors-list">
    <dt class="sponsors-list-name"><a href="http://objectlateral.com">Object Lateral, Inc.</a></dt>
    <dd class="sponsors-list_description">Thoughtful, Custom Software</dd>
    <dt class="sponsors-list-name"><a href="http://toptal.com">Toptal</a></dt>
    <dd class="sponsors-list_description">The top 3% of Developers.</dd>
  </dl>
</div>

I'm also curious why you used a dl here instead of a ul. Semantics?

Membership CTA: missing Changelog white logo, button padding/margin seems wrong

Mock:

Reality:

Episode Page: remove need for <p class=“description”> on summary section

We want the styling, but we don't want to have the description class on the <p>s because those

's will be generated by markdown.

Here it is currently without:

Episode Details background repeats itself on mobile viewports

Looks good on desktop/tablet

Text on home page hero mosaic should be links

:hover and :visited states

Add any item that you think needs hover states (and or visited states) here.

• Links within content (hover and visited)

Hide “Play” text under play button

I know it's there for a11y, but we should hide it for other peeps. This also has the nice side effect of lining up the abstract art. Before:

After:

Font size consistency

• News CTA

Link styles in member CTA

Try these and tell me what you think. I'd also like the underline on hover.

Default: #aeb5ff
Hover: #bcc2ff

A little more space between the logo and the text

The logo could use a little more space from the text to the right of it. As much, or just a little less than the margin to the right of the button on the right to the edge of the container.

show summary toggle buttons all targeting first show

@TuckerCowie seems to me that your makeToggles function is always setting a single targetElement even though there are multiple toggleElements being looped (querySelectorAll vs querySelector). That being said, I couldn't easily figure out a fix that wouldn't break other use cases (where many toggle elements would trigger a single target element), so assigning to you to fix. 😁

Show Page: The Latest should look OK if there is no pull quote

The spacing when that section is good could use some improvement:

Safari always lists podcasts vertically

Remove the need for `episode_link` class for styling

The episode show notes are generated by Markdown, so we don't want to require any custom classes on that markup. These should be styled based on their position in the document instead of an explicit class:

Episode Page: cover art should link back to owning podcast

Here's the Elixir code necessary to emit the anchor (with the correct link) around the image tag:

<%= link to: podcast_path(@conn, :show, @podcast.slug) do %>
  <img src="<%= static_url(@conn, "/images/podcasts/#{@podcast.slug}-cover-art.svg") %>" alt="  <%= @podcast.name %> Podcast"/>
<% end %>

If you need to add classes to the <a> itself, start it like this:

<%= link to: podcast_path(@conn, :show, @podcast.slug), class: "my-class" do %>

Space between buttons

In the design, these buttons have more space between them. If we wanted to future-proof this, I'd probably max this type of UI at three buttons.

Episode Page: podcast menu stretches when title is long

Show on hover

I wanted these menus because I always loved the menus on dribbble.com. I'm looking for that type of interaction and speed here.

Episode Page: description needs to look good even if no sponsors ribbon

There are some episodes that won't have sponsors. In this case, we want the spacing between the description and the menu to look better. Currently, with sponsors ribbon:

And without:

Cover art should always be clickable links