Posts tagged: blog

This post was inspired by a comment I left on @dsteenman’s post. {% post dsteenman/how-long-should-a-blogpost-be-2k6n %} Most of the time I prefer short as I am more likely to read the whole thing. If its setup as a series I am more likely to work my way through the whole series in a matter of a few sessions. Just my preference I will say though there are certain articles that fit well to the long format. They are articles that folks tend to come back to often as a reference again and again. Sections # [1] - layout is key [2] - Break it up [3] - Article types [4] - superpost [5] - single post [6] - series [7] - discussion [8] - Post what you want to read [9] layout is key # [2] Either way, you go layout is key. You are not Steven King, no matter how great of a writer you are, you are unlikely to hold attention like he can. Most folks reading blogs scan articles first. I often scan, then read. If the article is really good or pertains well to me I will read everything, ...

I recently added a button to my blog, and subsequently my posts on DEV.to [1]. It’s the best thing that I have done for it in a while. It makes it so easy to do quick edits. finding errors # [2] I refer back to my old posts quite a bit, sometimes I find errors in them. Honestly most of the time its too much effort to load up my editor make the change and git add and git commit. It’s not much, but when I am referring to my own post generally I am just trying to get something done and don’t have time for that. The slug # [3] The slug that I am getting from gatsby is formatted as /blog/this-post/. Note the trailing slash and missing file extension, thats where the ${slug.slice(0, -1)}.md comes in. The Full Link # [4] GitHub makes it super easy to form a URL that puts you right into edit mode on the exact post you are looking for. This is format for the URL… you can always figure it out easily by clicking edit on one. https://github.com/<user>/<repo>/edit/<branch>/<filepath> The...

Can someone explain how or why twitter cards render differently from device to device? I do understand that twitter cards a built from meta tags, the full list can be found in their docs [1] Rendered on Mobile # [2] Mobile Looks fine. [3] Not Rendered on Desktop # [4] On Desktop it is not picking up the image. [3] Twitter Card Validator # [5] The Validator renders the card correctly. I tried the official twitter card validator [6], as well as heymeta.com [7], and metatags.io [8]. All look good. [3] Can Cards be updated? # [9] even with a redirect? I tried seting up a pinned tweet that uses a netlify redirect to always keep my latest post up to date. Again this one looks good in the validator, doesnt render the image on desktop, does render the image on mobile, but does not update. I have heard that you need to hit the card validator to update cards? I am not sure if this is true, but for me this is not even upating the card. 👋 Hello, ―――――― I'm Waylon Walker ―――――― ...

I just did a quick refactoring of my JAMStack blog urls. Some didn’t fit with my style, some had _ that I wanted to switch to -, and others were ridiculously long. I’ve been using forestry as my CMS, I write many of my posts there, and sometimes it picks some crazy file names (based on my titles). It was time to refactor. Large Refactor At The Command Line [1] When refactorings similar to this get really big I often need to do some project wide find an replace, I usually do this right from the command line. 🖊 Rename posts change the filename # [2] My post urls are based on the file name of my markdown file, so I can simply go through my filesystem and rename anything I want. From here its probably best to only commit the addition of the new file name, until the redirects clear, but these are all low traffic posts for me so I just commited both at once. Safely redirect without breaking links _redirects ⤴ /redirects # [3] I am hosted on netlify, which automatically puts very ⚡ ...

I want to incorporate some of the wonderful comments, \U0001F495, \U0001F984, and \U0001F516’s that I have been getting on dev.to on my website. I have dabbled once or twice with no avail this time I am taking notes on my journey, so follow along and let’s get there together. By the end of this post, I will have a way to get comments from posts on the client-side thanks to the wonderfully open dev.to API. I want to incorporate some of the wonderful comments, 💕, 🦄, and 🔖’s that I have been getting on dev.to on my website. I have dabbled once or twice with no avail this time I am taking notes on my journey, so follow along and let’s get there together. By the end of this post, I will have a way to get comments from posts on the client-side thanks to the wonderfully open dev.to API. The API # [1] dev.to has an open API that allows us to easily get comments as HTML [2]. They have their API hosted at https://docs.forem.com/api/#tag/comments, let’s take a look at it. [3] Here we can...

I finally fixed my Styled-Components in gatsby.js. I am starting a redesign of my website. I have started cross posting to dev.to [1] more regularly. With that I have been making more detailed cover images at the recommended 1000x420. These images get cut off on my own site, which is a bit ridiculous to have my own content not look right on my own site. But before we start a heavy redesign I have a small issue that has plagued the site for at least a year! I have a small issue that has plagued the site for at least a year! I have been using styled components in my gatsby.js site for about a year now. And it has been plagued by styled-components not being in the ssr causing some jank in the styles being loaded. You can see it in the lighthouse performance report below. It generally loads super quick, and is only caused on first load. Anything using the gatsby <Link/> component typically is fine and unaffected by the issue. The fix # [2] The fix was so simple it was only 2 lines t...

I love using URL shorteners to easily share links without hitting character limits, but they loose their meaning. Services like bit.ly will save my links for me so that I can find them, but I would rather them to be easy to remember. https://bit.ly/2ruLwQz does not roll of the tongue so well. 301 🤸‍♀️ # [1] I recently discovered a really cool feature of netlify that I have always looked past, _redirects. It is so simple cool and powerful, every netlify site should do this! But how 🤷‍♀️ # [2] simply add a _redirects file to the root of your your published site with the following format. The trick I found with my gatsby site was that it needed to be in my static directory /static/_redirects, not root. Next you just put space separated links on separate lines. #’s can be used for comments. # netlify redirects # from_url to_url # Short-Blog /blog/scli /blog/simple-click/ /blog/cmdt /blog/cmd-exe-tips/ . . . # splats /b* /blog/:splat /n* /notes/:splat # External /twitter https...