falldowngoboone / falldowngoboone-com

👋 Hi, I’m Ryan.

👀 I’m interested in front-end systems and user interaction.

🌱 I'm currently learning systems architecture.

💞️ I’m looking to collaborate on unique front-end challenges. My main language is JavaScript, with an emphasis in React, but I am open to all frameworks and languages.

📫 How to reach me...

• Email: [email protected]
• Web: https://www.falldowngoboone.com
• Twitter: @therealboone

falldowngoboone-com's Issues

Dark mode

I need a dark mode.

• When a user prefers dark mode, show dark mode.
• When a user prefers light mode, show light mode.
• A user can toggle between dark and light mode.
• A user's site preference is remembered in their browser and overrides their OS settings.

RSS symbol in navigation

Pagination for tag pages

Putting this in as a placeholder. Not sure if this is a huge issue. I think the solution to this would be to create a layout specific to paginated layout.

Home page: Recent posts

Show 20 of the most recent posts, along with a link to the Archive page.

Duplicate ID issue

Tag lists have a hidden label associated with the tag list, mainly because I want it to be translatable. The issue is that when you have multiple tag lists, you have duplicate IDs. This is a classic issue with component-driven design and I can't believe I did this, lol.

The fix should be easy. I can use the index to create unique IDs for each list.

Style block quotes

Style lists

Ordered, unordered, dl

Code block: Add line numbers

Part of #122.

Looks like there's an issue with the Eleventy syntax highlighting plugin. I can add numbers by wrapping every line in a highlight:

// .eleventy.js
eleventyConfig.addPlugin(syntaxHighlighting, {
  alwaysWrapLineHighlights: true,
});

Then I can use the resulting spans to add numbers via CSS counters:

// _vendor-prism-fdgb.scss

pre {
  counter-reset: lineNumber;
}
code .highlight-line:before {
  -webkit-user-select: none;
  border-right: 1px solid #404040;
  color: #858585;
  content: counter(lineNumber);
  counter-increment: lineNumber;
  display: inline-block;
  font-variant-numeric: tabular-nums;
  margin-right: 1.2em;
  padding-right: 1.2em;
  text-align: right;
  width: 2.4em;
}

However, the issue is some brs are being wrapped in a new span, causing the line highlighting to get all fouled up. I've seen this issue so far in scss blocks with a break between selectors:

input:invalid,
[aria-invalid=true] {
  border-color: hsl(351, 100%, 27%);
}

html blocks that break to multiple lines:

<input id="password" type="password" name="password" 
        aria-describedby="password-error" />

jsx blocks with nested JavaScript in brackets:

export default function List({ items = [] }) {
  return (
    <ul class="styled-list">
      {Boolean(items.length) &&
        items.map((item) => <li class="styled-item" {...item} />)}
    </ul>
  );
}

I've noticed changing jsx to js fixes that issue. Not sure about the rest. I would love to have line numbers, but I'm not sure that's currently possible with the Eleventy plugin.

Make social media links look nice

I need to add the necessary meta tags so that social media like Twitter pull in a nice looking card.

• Title
• Avatar
• Date
• Twitter card message is excerpt
• Twitter link in article links to tweet card...

Style call to action block

Archive page

Let's build an Archive page. Needs pagination.

Home page: design and build

This is probably going to be an epic (a tiny epic).

• Hero section
• #152
• #153
• #154

Examine web font performance

https://www.smashingmagazine.com/2021/05/reduce-font-loading-impact-css-descriptors/

Home page: most popular posts

3 or 4 of the most popular posts. Need to figure out how to do this.

Navigation

Since I'm about to add actual pages, I will need navigation. I'd like to keep it simple, but with some sort of hand-drawn flare.

• Home(?)
• About - Resume stuff here
• Archive
• Contact(?)
• Categories(?)

Image shortcode for posts

I would like to build a shortcode for images that uses an agreed-upon contract to generate multiple size URLs, srcset, etc. It should allow for optional lazy loading, alt text, width, height and classes. It should produce a figure and the figure should have an optional caption. The figure can have multiple images.

Fun with noisy gradients

This might be something fun to play around with:

https://css-tricks.com/grainy-gradients/

Style aside blocks

notes, gotchas, warnings, don'ts, do's, questions, info

Add post meta description and relevant SEO meta data

Issue from Lighthouse.

Contact page

Use Netlify forms

Post

Tiny epic.

• Typography (title, lede(?), headings, paragraph text, etc.)
• Meta (estimated reading time, publish date)
• Tags
• Heading links
• #148
• #149
• #151
• #150
• #93

Add a theme color

For new Safari 15

<meta name="theme-color" 
      content="[light theme color]" 
      media="(prefers-color-scheme: light)”/>

<meta name="theme-color" 
      content="[dark theme color]" 
      media="(prefers-color-scheme: dark)”/>

Use a CMS

• Sanity
• Contentful
• Kentico Kontent

Better post list

• Make the entire snippet clickable (use JS to make the text still selectable).
• Add hover state
• Remove published on
• Make Read more a button (see screen shot)

Home page: Most frequent tags

Top 10 most frequent tags

Excerpts don't parse Markdown

Ugh.

Add a custom favicon

It'd be nice.

Footnotes: Style

Footnotes need styling. I already said that in the subject.

Discuss on Twitter adds unnecessary spacing

Probably not properly trimming the URL. Wonder if it's worth it?

RSS feed

This should be fairly easy to set up, I just need to do it.

Update to Eleventy 1.0

https://www.11ty.dev/blog/eleventy-v1-beta/

Explore Notion API

About page

Resume stuff in here.