Posts tagged: dev

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…

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…

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 brou…

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…

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…

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 fore…

select rowid, key, raw, store_time, expire_time, access_time, access_count, tag, size, mode, filename from Cache where key=‘e3cd37c97980ab2c’; ’e3cd37c97980ab2c’ ’e3cd37c97980ab2c' select rowid, key, raw, store_time, expire_time, access_time, access_count, tag, size, mode, filename from Cache where key=‘c14050404a107d5e’; Learn D3 in 5 days # For what we are creating in these posts d3 is way overkill and very verbose, but I need to start somewhere! These are just stepping stones into real custom visualizations that cannot be done in any other tool today. I still cannot explain how excited I am to say “I created that in d3!!!” Todays Result # Recall Example 3 from yesterday # Subject # Math Science Chart Size # Large Small Final Result # Subject # Math Science Chart Size # Large Small

Flexbox-zombies # I recently finished up the flexbox-zombies course to learn more about flexbox, and to become proficient with it. I can truly say that this course has changed the way that I create layouts. Flexbox is very intuitive now. What this course does really well at is explaining the concepts and hitting you with a ton of examples that you can work through really quickly. Basic Setup # Flexbox requires a wrapper container to work I will refer to this as the flex container, and the items in that container as items. Markup # I will use the following markup throughout the article, each with different css applied. note The animated container is inspired by the flexbox-zombies course. I really like how it allows you to see the responsiveness of each layout. In the early example the reasoning may not be aparent, but as we go along some of the flexbox parameters will make more sense if we are viewing them on a dynamic layout since flexbox is designed for building responsive design. 1…

No More Death By PowerPoint I Waylon S. Walker vow that from this point forward I will no longer create powerpoints to be considerec DEATH BY POWERPOINT If you have not seen David JP Phillips Death By PowerPoint TEDx, stop now and watch it. You will never look at slides the same again. Watching this video ruined me for watching presentations with these issues. Reveal is a tool that makes it very easy to follow these principles I currently work in a company that employs over 100K employees, and to this day I cannot recall a single presentation given where the slides did not violate the rules stated in David’s Talk. This year I am putting a stop to this starting with myself. I am starting a new job role in 2018 and there is no better time to make some drastic changes to my workflow than now. I expect there to be a few followers and many naysayers, but I dont care. I will employ the directives listed below. 1+1=0 # Very few people ( if any) in your will be able to multi-task. The human br…