maggieappleton / maggieappleton.com Goto Github PK

https://www.ryanfiller.com/blog/automatic-social-share-images/?ref=sidebar

Watch this loom video for a full explanation

MDX styling is behaving inconsistently, and not properly rendering if you go to a page directly for the first time.
If you refresh the page, everything is fixed. It only happens on first load.

The CSS doesn't load correctly, and any JavaScript libraries like GreenSock fail to execute. The issues happens in all .mdx posts.

I'm speculating it might have something to do with service workers or caching, but don't know how to debug it.

An example of the kind of rendering error that appear, and then disappear after a refresh:

Scope:

• Bidirectional links across notes, book, and essays
• Hover previews in Tippy.js
• Referenced pages

Use the algoliasearch-netlify plugin and Algolia's InstantSearch.js? to adds search to the site

Getting some weird font inconsistencies across browsers.

Happens with all the fonts. Am using self-hosted:

• GT Walsheim
• Freight Sans Pro
• Freight Text

Am using typography.js for fonts.

Relevant files:
https://github.com/MaggieAppleton/maggieappleton.com/tree/master/src/fonts
https://github.com/MaggieAppleton/maggieappleton.com/tree/master/src/lib

In chrome the letter spacing and italics are fine, but in Firefox and Safari they add weird spacing and don't render italics properly:

Example page to test in across browsers: https://maggieappleton.com/roam-garden

Spacing Issues

Safari / Firefox

Chrome

Chrome

Safari / Firefox

Italics Issues

Chrome

Safari / Firefox

Some text styling is rendering incorrectly if you go to a page link directly for the first time, and you haven't visited the site before. To test this, open a link directly in a new private window (https://maggieappleton.com/garden-history)

To see the post load correctly, first navigate to http://maggieappleton.com/garden, then click on the post (A Brief History and Ethos of the Digital Garden).

This happens across multiple posts on the site, but this particular post has the most visible cases.

For example, here is a paragraph that's showing up with an incorrectly small font size and centred alignment:

If you navigate away from the page back to the 'Digital Garden' main page, then click directly onto the same post (titled 'A Brief History & Ethos of the Digital Garden'), and scroll to the same section, the paragraph renders correctly:

This issue is a split off from #72

Hello, I like the format/design of your website so I git cloned the repo. I encountered a 404 error.

What I did:

1. git clone
2. yarn
3. yarn start
4. open browser and went to localhost indicated (localhost:5000)
5. <404 Error>

I am completely at a loss for why the 404 error occurred. Also the 404 error page isn't the 404.js version. Looks like the src files are not being read.

hi! just dropping by to say that i noticed your tufte footnotes are not expanding at smaller breakpoints. looks like they might just need a bit of state :) i'm going to solve it for myself (using some of the footnote code for my new site) and can post a PR if you don't get to it first!

About this.

Why are dark rooms and boxy hardware at odds with pastel shades and baby animals? (Recreating the gender binary through code aesthetics - it has to be one or the other.)

Why is neon green man and pastel is femme (by which you mean "woman")? Why? The creator of bubblesort, the store you cited as femme dev phenomena, even tweeted themself that not all girls like pink things. So why did you define pink as equal to woman?

New draft:

• some programmers believe the beauty of the [system/code/hardware] is self-evident and shouldn't contaminated by decoration
• other programmers have realized that this idea can lead to austere, unfriendly working environments
• "work" here can mean producing a body of work and/or producing capital
• cute computing is the process of adding warm colors to a programmer's workspace

Embedded tweets have stopped displaying properly. They used to work, unsure when they stopped.
The content of the tweet comes through, but the styling doesn't render.
Problem occurs on all mdx files

I have gatsby-remark-embedder | Gatsby and gatsby-plugin-twitter | Gatsby installed and configured.

For example the tweet on this neologisms page renders as plain text instead of the usual Twitter style embed: https://github.com/MaggieAppleton/maggieappleton.com/blob/master/content/notes/neologisms.mdx

I have a few MDX components that use the greensock animation library. The animations are all written inside React components and then passed to the MDX files. They use greensock's 'scrolltrigger' plugin to fire - meaning the animation plays once the page scrolls to a certain point (eg. 20% of the way down).

If you visit any page like https://maggieappleton.com/garden, then navigate to the post called "The Bare Essentials of Greensock" and start scrolling you'll see that nothing animates

However, if you refresh the page and scroll, all the animations work perfectly. No clue why.
Something with the way the MDX is rendering? Greensock isn't loaded when the page loads?

To add more intrigue, if you navigate directly to the page without going to another page on the site first, the animations all work. Perhaps something with routing or page transitions is getting in the way?

This page has a rendering issue on Safari with the https://maggieappleton.com/drawinginvisibles1 in the "a few more" list. See attached PDF

When you navigate directly to a post from a link that contains many images (eg. https://maggieappleton.com/garden-history), some of the images are duplicated in places where they should not be.

It overrides the image URL declared in the MDX, and replaces it with a URL of another image from another part of the page.

This only occurs when you've never visited the site before, and you go directly to the post from a link. If you navigate to the post vias the homepage or /garden page, the issue doesn't occur.

Issue split off from #72

All of my MDX posts have weird rendering bugs when someone first views the page.
The CSS doesn't load correctly, and any JavaScript libraries like GreenSock fail to execute.
If you refresh the page, everything is fixed. It only happens on first load.

A full explanation in a loom video: https://www.loom.com/share/ce9991abb8ef40a6b641a3299e8c5022

I'm speculating it might have something to do with service workers or caching, but don't know how to debug it.
The issues happens in all .mdx posts.