Posts tagged: dev

This is episode 1 of the Waylon Walker Audio experience, posts from waylonwalker.com {.hoverlink} in audio form. So I have had this idea for awhile to add audio to my blog posts. The idea partly comes from the aws blog, if you have ever been on their blog you will have noticed that they have a voiced by amazon polly section. What to Expect Honestly I don’t know this is all new to me and I dont have much to go off of. For now its a test that may or may not work out. I will say that the time that I have available for clean audio is a bit limited so expect these to come out in batches as I get time to go back and record. What Not to Expect One thing that makes the aws blog really hard to listen to is the robotic voice, I definitely don’t want that. This will be voiced by a real human, Me. At the same time written text doesn’t translate directly to audio well so don’t necessarily expect the audio to be word for word. Code blocks There are a lot of code blocks in my blog, which don’t transl…

Inspired by discourse’s link expansion I am rolling out expansions for one line links on the blog waylonwalker. I was able to find a gatsby plugin gatsby-remark-embedder that expands one line links for social cards for popular platforms like twitter and YouTube through a repose from Kyle Mathews to my tweet. https://twitter.com/kylemathews/status/1329817928666005504 Use Cases This covers a couple of use cases I have with very little effort. Twitter YouTube install This was super quick and simple to setup, the only thing that was extra was to install the plugin as well as the. enable Thats it, now I can embed tweets and YouTube videos by just leaving the link on a single line.

I wanted a super simple way to cross-link blog posts that require as little effort as possible, yet still looks good in vanilla markdown in GitHub. I have been using a snippet that puts HTML into the markdown. While this works, it’s more manual/difficult for me does not look the best, and does not read well as Goals for new card The new card should be fully automated to expand with title, description, and cover image. Bonus if I am able to attach a comment behind it. fully automated card expansion Title description cover image Old Card If you can call it a card 🤣. This card was just an image wrapped in an anchor tag and a paragraph tag. I found this was the most consistent way to get an image narrower and centered in both GitHub and dev.to. The key here is that I have to put the HTML into the markdown. It looks a bit dirty while editing and quite frankly it’s a pain to deal with. New Card My first eight years as a working professional. First step My first attempt was to make my own tra…

When first learning to code its very common to hard code everything right into the code. This happens with most folks in just about any language. Whether its HTML or markdown for front end content, or even hardcoding parameters in our backend languages like python, or node.js. 🤷‍♀️ What’s wrong with hard coding everything? Hard coding everything right into your code makes it really hard for non-technical collaborators to join. It makes it nearly impossible to hand websites off to clients without needing to come back for routine updates. The cms generally come with a rich content editor that feels more like something most folks are used to. There are buttons for changing the font, font-size, adding images, bold, italics, etc. Sometimes I don’t feel technical Even when you are developing for a technical audience there is a layer of polish that comes from giving them a nice interface to edit their content in. YouTube doesn’t have you manually inserting records into the database to add a c…

I ran a discussion on dev that collected quite a list of examples in the comment section. So many great calls to action, animations, memes, and weird tricks. My current profile social icons Upload all of your icons to the repo in a directory such as or, then link them with a attribute like below. I used html for mine, not sure if you can set the in markdown. note I did add a bit of (non-breaking-whitespace) between my icons. Without adding css this seemed like the simplest way to do it. Center Aligning things in the center of the readme is super simple. I used this trick to align my social icons in the middle. right For my latest post I floated it to the right with a little bit of action. You may need to play with where you put this in the document, and the size of elements to get things to flow right. redirects In order to keep my latest post always up to date on my readme I implemented a netlify redirect to always point to my latest post. As a digital gardener this helps me keep poin…

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 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 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 I am hosted on netlify, which automatically puts very ⚡ performant redirects on the ed…

This might be useful https://github.com/nfl/react-helmet/issues/146 https://github.com/gatsbyjs/gatsby/issues/13136

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 dev.to has an open API that allows us to easily get comments as HTML. They have their API hosted at https://docs.forem.com/api/#tag/comments, let’s take a look at it. Here we can see that going to http…

stack overflow link

Often when reading through javascript examples you will find some arrow functions use parentheses while others use braces. This key difference is that parentheses will implicitly return the last statement while braces require an explicit return statement. It is important to understand the difference between them because it is likely that you will find code examples of both and trying to edit code written differently than you’re used to may have unintended consequences. Arrow functions are one-liner functions in javascript that have two main syntactical ways to create the code block. with parentheses and braces. Let’s take a look at both ways of creating arrow functions so that when we come accross them in the wild it will all make sense. Here is an example of an arrow function that will implicitly return the last statement without the return keyword. I believe that these are a bit more restricted in that you cannot set variables inside them. They are a little bit more concise and great…

I am working through Wes Bos’s beginnerjavascript.com/ I just hit module 18 on hoisting. It’s something that I always knew was there, Its not something I typically see used or use myself. Do you Hoist? Do you have any use cases that you use hoising? Why? It seems like a really cool feature in any language that uses it, but I dont really notice it in use. What is Hoising There are many articles that cover this in far more depth, but its the idea that variable declarations and functions are defined before they are executed. This means that it doesnt matter if you call a function before or after it is defined. Hoisting Running this code will log out “Waylon” What about variable hoisting I am most familiar with python which does not variable hoist so this one kinda confused me at first. It only hoists the variable declaration not the value of the variable. It defines whether the variable is going to be,, or and sets it to undefined. It only hoists the variable declaration not the value of…

Getting a custom scrollbar on your site makes it stand out a bit compared to the very plain stock one that are on most sites. This is how I set mine up on my gatsby site. Inspired by Wes Bos’s new uses.tech I wanted a custom scrollbar on my personal site. I had tried to do it in the past, but gave up after it was not working. Looking at the Source Since uses.tech is open source I jumped on github, searched for scroll and found this layout.js. Copy it to my own component My first step was to take his css and copy it into a styled component for my entire layout, but it failed. I do not fully understand why. None of the custom style came through at all. If you know please leave me a comment. I suspect for some reason it has to do with attatching to the html element inside of a styled-component. I think wes was able to get around this by using. But I was still using much of the default gatsby template, so I did not have a element, but I did have a layout.css. scroll.css I added to my stati…

Moving into 2020 I have been really leaning on using purple as my theme color everywhere more and more. Its time for an update to my personal site, not just because it feels plain, not just because the cover art I am using for dev.to doesn’t fit my current card layout, but because I feel inspired and I want to. Starting point This is what we are working with. It has been my card design for at least a year now. Its not bad but, its a bit play, doesnt fit my new cover art style, and that date is not working over top of the cover art text. plain cover art does not fit I am not digging the date on cover art that also has text Colors I have been really into using a deep purple lately. It is a neutral color that does not get enough respect, i.e. it’s not used as frequently and kinda stands out when used. How I pick colors I am really bad at picking colors that go well together so for this I punt to utilizing others who have a better eye for this. I commonly used the instant-eyedropper deskto…

It was so easy to get a professional looking navbar with just 3 lines of code. This package seriously is so usable on mobile it is ridiculous. I found this package from day-4 of the 100 days of gatsby challenge. It is by the wonderful man who brought us gatsbyjs Kyle Mathews, so you know its gotta be good. install react-headroom installation is easy Import Headroom There was no instructions for es6 style imports that are common with gatsbyjs sites like mine, but it was intuitive to figure out. Using Headroom Simply wrap your existing content, Nav in my case, with the component and your off to the races. The content will pop back into view when you scroll past then back up. See it in action I think this simple package completely changes the ux of your site on mobile. You can get that sticky nav out of the way, but its still right there with just a little bit of a scroll up. Configurable is configurable, but I did not find it necessary. I really like the simplicity that it brought by jus…

Social Automation Zappier Free only one step is free can take rss to social Automate.io Form submission https://getform.io Free to get started https://formkeep.com/?#pricing Free 7 day trial $4.99 cheapest after

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 more regularly. With that I have been making more detailed cover images at the recommended. 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 component typically is fine and unaffected by the issue. The fix The fix was so simple it was only 2 lines total. One to install and one to us…

Netlify I have happily had my personal site waylonwalker.com hosted on netlify for nearly 2 years now. In fact I have hosted about a dozen different toy projects to play with on there, 4 of which have gone far enough to get a custom domain name. They are fast to deploy and consistently do so on every to main. Zeit I have recently started playing with zeit again. I really like their cli tool, its dead simple and makes sense. I tried the netlify one early on and dont think I really gave it much of a chance. I was able to backup a site we were modifying by saving everything locally (literally control+s) and running in the command line. While I was on the site I realized that when switching to gatsby v2 I had deployed it to now.sh while testing, before cutting over to the updated one on netlify. It has been building every version since without issue! It has been building every version since without issue! What I am using gatsby forestry.io I am using gatsby to build my site, and I do use f…

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 🤸‍♀️ I recently discovered a really cool feature of netlify that I have always looked past,. It is so simple cool and powerful, every netlify site should do this! But how 🤷‍♀️ simply add a 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, not root. Next you just put space separated links on separate lines. #’s can be used for comments. 🙌 Share those short links Now with shorter links we have more space for our content without needing to use a service like bit.ly that makes our links unreadable.

Adding an rss feed to your gatsby js site is super simple. https://www.gatsbyjs.org/packages/gatsby-plugin-feed/ Install How to use My updated graphql query

Testing out forestry.io Sorry Netlify CMS I still ♥️ your product dont be forestry is simple I have been playing with the netlify cms for a while now, and it has been a decent experience, but I really struggle configuring it. Forestry is so simple to setup. My favorite part is that I can code up my gatsby.js site, storing all editable text in markdown, and come back later and add the CMS based on existing documents. Configuration is Simple Forestry.io has this amazing feature to create create based on existing document 🤯. This is great because it sets up the config for me without error. And If I really want to come back later to customize it more I have that option, too. Multi-File Gallery I have a use case for a photography site where the owner wants to be able to show off sample photos of each type of work she does. I got it working in the netlify cms, although it was not very user friendly. Everything was nested in an accordian 😢. Next I looked into forestry.io. I pointed forestry.i…