Increase author link visibility & link avatars in blog posts + previews #5813

rdela · 2018-06-08T19:44:20Z

Increase author link visibility and link avatar

www/src/components/blog-post-preview-item.js
www/src/templates/template-blog-post.js

Confirmed addition of
transform: translateZ(0)
in blog-post-preview-item.js prevents image twitch in Chrome when hovering the card, way to go @fk

@fk

…iews Increase author link visibility and link avatar - `www/src/components/blog-post-preview-item.js` - `www/src/templates/template-blog-post.js` Ref #3199 #4354 #5396 Confirmed addition of `transform: translateZ(0)` in blog-post-preview-item.js prevents image twitch in Chrome when hovering the card, way to go @fk

gatsbybot · 2018-06-08T19:50:03Z

Deploy preview for using-drupal ready!

Built with commit 980aea5

https://deploy-preview-5813--using-drupal.netlify.com

gatsbybot · 2018-06-08T19:52:49Z

Deploy preview for gatsbygram ready!

Built with commit 980aea5

https://deploy-preview-5813--gatsbygram.netlify.com

rdela · 2018-06-08T20:08:20Z

@KyleAMathews @fk this contains design changes if you wanna take a look

pieh · 2018-06-12T08:58:19Z

Preview of changes: https://deploy-preview-5813--gatsbyjs.netlify.com/blog/

fk · 2018-06-12T12:32:40Z

Hey @rdela! Thanks for sticking with us! 🤗
This is looking good <3, let's just def. get those 102% out—left comments.

KyleAMathews · 2018-06-12T12:45:44Z

@fk doesn't look like your comments got posted?

fk · 2018-06-12T12:26:45Z

www/src/components/blog-post-preview-item.js

-                  boxShadow: `none !important`,
-                  borderBottom: `0 !important`,
+                  color: `${colors.gatsby} !important`,
+                  fontSize: `102%`,


We don't need to increase font-size here because we don't mix Futura with Spectral.

fk · 2018-06-12T12:29:57Z

www/src/components/blog-post-preview-item.js

                  position: `relative`,
                  zIndex: 1,
                  "&&": {
-                    fontWeight: `normal`,
+                    fontWeight: `bold`,


Please try normal here to give the link less weight—we don't want this to take away from the blog post title too much:

I mirrored these requested changes to the preview on post as well, thinking we would want agreement, but I split them into 2 commits so it would be easy to revert if you liked the bold in the post view. I will add a screenshot comparison in a sec.

fk · 2018-06-12T12:55:15Z

@KyleAMathews Argh, wrong textarea. :D Thank you!

rdela · 2018-06-15T05:59:09Z

Thanks @pieh @fk @KyleAMathews.

Looked like it was having build issues on Netlify at first after I pushed these commits,
9:52:54 PM: /usr/local/bin/build: line 32: gatsby: command not found
...but seems to have built after all:
https://deploy-preview-5813--next-gatsbyjs.netlify.com/blog/

Here is the screenshot comparison of font-weight: ~~normal~~400[Edit 1] vs bold in blog post template I mention above in my comment on @fk's review:

Thinking same concern about taking away from the blog post title would apply here too and that we would want agreement between post and preview. I split preview and post changes into 2 commits so it would be easy to revert post one and just get rid of font-size: 102% if you were liking the bold in the post view @fk.

[Edit 1]: Top half of image and deploy preview author.ids are font-weight: 400 not normal in post template as I realized author.id h4 already had 400 set a few lines above when I went to remove font-size: 102% there. Works out the same I think but thought I would mention in case we want to specify exactly the same weight in both spots.

Side note: while I was puzzling over build issues I had some housekeeping ideas about maybe updating YARN_VERSION in netlify.toml from 1.2.1 to 1.7.0
https://github.com/gatsbyjs/gatsby/blob/master/netlify.toml#L3

On my blog I also have "--no-ignore-optional" in YARN_FLAGS which I got from
decaporg/gatsby-starter-decap-cms@b6cdfce

Setting RUBY_VERSION = "default"
https://github.com/rdela/rdela.com/blob/master/readme.md#ruby_version--default
definitely speeds up builds, as the log suggests:

9:49:48 PM: ** WARNING **
9:49:48 PM: Using custom ruby version 2.2.3, this will slow down the build.
9:49:48 PM: To ensure fast builds, set the RUBY_VERSION environment variable, or .ruby-version file, to an included ruby version.
9:49:48 PM: Included versions: 2.2.9 2.4.3 2.3.6

Probably worth opening a new issue with a title like Updating netlify.toml to speed up builds and giving everyone a chance to weigh in, but thought I would throw initial ideas out there while they are fresh in my mind in case anyone had preliminary thoughts or reasons why opening an issue was not a good idea.

fk · 2018-06-18T18:35:42Z

www/src/components/blog-post-preview-item.js

+            to={post.frontmatter.author.fields.slug}
+            css={{
+              boxShadow: `none !important`,
+              borderBottom: `0 !important`,


You could move the keys (here and also the ones below) that require !important to the && selector which glamor offers to increase specifity (ref. https://github.com/threepointone/glamor/blob/master/docs/selectors.md).

Seems like I should do the same here then?
https://github.com/gatsbyjs/gatsby/pull/5813/files/b9c097e3eba19af0a824098aefe1e812ed00125b#diff-3f9ee2e9c0e318b6189a8f786092c9f5R164

template-blog-post.js

L164

color: `${colors.gatsby} !important`,

I went ahead and committed a change with suggestion above. Changed my mind about the last comment though, and maybe the commit. Color me puzzled. Perhaps I am not understanding Glamor but I do not see how given HTML like

<a class="css-9rkwk9" href="/contributors/michelle-barker/">Michelle Barker</a>

the resulting CSS:

.css-9rkwk9.css-9rkwk9, [data-css-9rkwk9][data-css-9rkwk9] { color: #663399 !important; font-weight: normal; }

is more specific than

.css-9rkwk9,[data-css-9rkwk9]{ position:relative; z-index:1; }

.css-9rkwk9.css-9rkwk9 seems redundant to me. If it is I can revert the last commit. If it makes sense to you then this is ready unless you want me to wrap

color: `${colors.gatsby} !important`,

in an && section in template-blog-post.js as well per above.

The chained selectors (e.g. .css-9rkwk9.css-9rkwk9) are what is actually doing the trick. To quote the genius named Harry Roberts (@csswizardry):

[…] you can chain a selector with itself to increase its specificity.

(via https://csswizardry.com/2014/07/hacks-for-dealing-with-specificity/#safely-increasing-specificity)

Also see

https://speakerdeck.com/mathiasbynens/3-dot-14-things-i-didnt-know-about-css-at-css-day-2014?slide=12

https://css-tricks.com/a-specificity-battle/#article-header-id-7

https://stackoverflow.com/a/11581106

So what about previous comment then?

Seems like I should do the same here then?
https://github.com/gatsbyjs/gatsby/pull/5813/files/b9c097e3eba19af0a824098aefe1e812ed00125b#diff-3f9ee2e9c0e318b6189a8f786092c9f5R164

template-blog-post.js

L164

(add && selector to template-blog-post.js and move color: `${colors.gatsby} !important`, to it?)

L164 seems to work fine without the !important:

Generally we should avoid (and have avoided—I'm quite sure I'm guilty here as I wasn't aware of && when I first started using Glamor ;-)) using !important(see e.g. https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#The_!important_exception).

If you need to override styles try if Glamor's && will do and make !important a last resort.

fk

Lookin' good! thank you @rdela!

@fk

...which glamor offers to increase specifity (ref. https://github.com/threepointone/glamor/blob/master/docs/selectors.md) via @fk review `src/components/blog-post-preview-item.js`

rdela · 2018-06-18T20:59:49Z

Left some comments in the (now outdated) review regarding specificity and the last commit: whether it should be reverted, or whether same concept (add && section) should be applied to template-blog-post.js. Lemme know what you think please @fk

fk · 2018-06-19T17:17:37Z

👋 @rdela Just left a comment that should clarify things!

rdela · 2018-06-26T11:04:31Z

@fk Thanks, not sure I understand after looking through all that unless the goal is to remove !important.

From CSS Wizardry article:

We could fix this with an !important (line 26): jsfiddle.net/csswizardry/3N53n/1, but ewww, no thanks.

This still isn’t great, […]

Again, this is something of a hack, […]

Specificity-wise !important trumps the chained selectors according to the Spy vs Spy article you linked. Also, from the demo (emphasis mine):

7: A class selector just looks for a class on the element you're selecting. It doesn't do anything to exclude itself so it just stacks specificity. (Don't use this pattern.)

Also note the:

* not really

on Mathias’ slide.

All that said, whether or not you want to get rid of !important, feels like if we are relocating to && selector in blog-post-preview-item.js we should do the same in template-blog-post.js? See new comment in review.

fk · 2018-06-26T18:49:25Z

the goal is to remove !important.

Yep!

All that said, whether or not you want to get rid of !important, feels like if we are relocating to && selector in blog-post-preview-item.js we should do the same in template-blog-post.js?

Yes; in this particular case I think we don't need either (see comment in code).

Conflicts: www/src/templates/template-blog-post.js L 137 `fixed={post.frontmatter.author.avatar.childImageSharp.fixed}` * upstream/master: (651 commits) chore(release): Publish [www] Gatsby/rebeccapurple banner (#6161) delay page transition until we have all resources (#6158) Fix old query results showing up in develop (#6159) Tidy up the remark example (#6160) fix displaying of graphql resolver errors (#6142) Move store assignment out of component. (#6150) [v2] Fix doc not centered (#6146) chore(release): Publish [gatsby-source-contentful] pass host to client init (#6149) [v2] migrate gatsby-plugin-feed to use new Link (#6147) Make getElementById Conditional (#6145) chore(release): Publish update yarn.lock Update plugins.md (#6099) add gatsby-starter-skeleton (#6141) [gatsby-source-mongodb] added support for extra connection string params (#5972) create public page renderer and export correct version (dev / prod) depending on NODE_ENV (#5986) Treat integers longer than 32 bit as floats. (#6082) Export graphql TypeScript definition from gatsby package (#6096) ...

rdela · 2018-06-27T05:23:07Z

@fk Given #6076 / #6153 and that I already had a conflict that required updating figured I would target master with this one as well but I can build against v1 if that is easier

Ran Prettier and got rid of all use of !important in blog layouts in last commit

rdela · 2018-06-27T05:28:27Z

Preview of changes: https://deploy-preview-5813--next-gatsbyjs.netlify.com/blog/

fk

Nice! Thank you @rdela!

m-allanson · 2018-06-27T10:52:01Z

Thanks @rdela! This will go live on next.gatsbyjs.org for now, then gatsbyjs.org once v2 is released.

rdela mentioned this pull request Jun 8, 2018

Multiple authors on a single post gatsbyjs.org/blog #3199

Closed

fk requested changes Jun 12, 2018

View reviewed changes

rdela added 2 commits June 14, 2018 20:46

lose font-size increase and bold

3aad32e

lose font-size increase and bold for post too

b9c097e

fk reviewed Jun 18, 2018

View reviewed changes

fk previously approved these changes Jun 18, 2018

View reviewed changes

rdela mentioned this pull request Jun 18, 2018

[v2 stability issue] GraphQL Error Unknown field modified on type NPMPackage when running gatsby's www locally #5842

Closed

move keys that require !important to the && selector

c495ea7

...which glamor offers to increase specifity (ref. https://github.com/threepointone/glamor/blob/master/docs/selectors.md) via @fk review `src/components/blog-post-preview-item.js`

rdela dismissed fk’s stale review via c495ea7 June 18, 2018 20:26

fk previously approved these changes Jun 26, 2018

View reviewed changes

rdela added 2 commits June 26, 2018 17:43

remove !important from blog preview and post layout

980aea5

rdela dismissed fk’s stale review via 980aea5 June 27, 2018 05:08

fk approved these changes Jun 27, 2018

View reviewed changes

m-allanson merged commit 0e5aa1b into gatsbyjs:master Jun 27, 2018

rdela deleted the author-link-styles branch November 16, 2018 07:07

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Increase author link visibility & link avatars in blog posts + previews #5813

Increase author link visibility & link avatars in blog posts + previews #5813

rdela commented Jun 8, 2018

gatsbybot commented Jun 8, 2018 •

edited

Loading

gatsbybot commented Jun 8, 2018 •

edited

Loading

rdela commented Jun 8, 2018

pieh commented Jun 12, 2018

fk commented Jun 12, 2018

KyleAMathews commented Jun 12, 2018

fk Jun 12, 2018

fk Jun 12, 2018

rdela Jun 15, 2018

fk commented Jun 12, 2018

rdela commented Jun 15, 2018 •

edited

Loading

fk Jun 18, 2018

rdela Jun 18, 2018

rdela Jun 18, 2018

fk Jun 19, 2018 •

edited

Loading

rdela Jun 26, 2018 •

edited

Loading

fk Jun 26, 2018

fk Jun 26, 2018

fk left a comment

rdela commented Jun 18, 2018

fk commented Jun 19, 2018

rdela commented Jun 26, 2018

fk commented Jun 26, 2018

rdela commented Jun 27, 2018

rdela commented Jun 27, 2018

fk left a comment

m-allanson commented Jun 27, 2018

Increase author link visibility & link avatars in blog posts + previews #5813

Increase author link visibility & link avatars in blog posts + previews #5813

Conversation

rdela commented Jun 8, 2018

gatsbybot commented Jun 8, 2018 • edited Loading

gatsbybot commented Jun 8, 2018 • edited Loading

rdela commented Jun 8, 2018

pieh commented Jun 12, 2018

fk commented Jun 12, 2018

KyleAMathews commented Jun 12, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

fk commented Jun 12, 2018

rdela commented Jun 15, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

fk Jun 19, 2018 • edited Loading

Choose a reason for hiding this comment

rdela Jun 26, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

fk left a comment

Choose a reason for hiding this comment

rdela commented Jun 18, 2018

fk commented Jun 19, 2018

rdela commented Jun 26, 2018

fk commented Jun 26, 2018

rdela commented Jun 27, 2018

rdela commented Jun 27, 2018

fk left a comment

Choose a reason for hiding this comment

m-allanson commented Jun 27, 2018

gatsbybot commented Jun 8, 2018 •

edited

Loading

gatsbybot commented Jun 8, 2018 •

edited

Loading

rdela commented Jun 15, 2018 •

edited

Loading

fk Jun 19, 2018 •

edited

Loading

rdela Jun 26, 2018 •

edited

Loading