Published

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 [1] 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 # [2] Since uses.tech [1] is open source I jumped on github, searched for scroll and found this layout.js [3]. Copy it to my own component # [4] 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. [5] I suspect for some reason it has to do with attatching to the html [6] element inside of a styled-component. I think wes was able to get around this by using createGlobalStyle. But I was still using much of the default gatsby template, so I did not have a createG...

“Don’t waste your time learning everything.” [1] LinkedIn Post from Tarry Inspired by this linkedIn post [2] I felt that this comment was very powerful. Here are my 2 cents. Be Productive # [3] Stick to what you know, and learn a little bit of something new every day. If what you know is how to use Excel like a boss, don’t fee ashamed that you are missing something. Be proud and use what you know. Don’t Stagnate # [4] Take small steps enhance what you know now with something new that you get you closer to where you want to be. If you need something that sci-py offers learn how to load in data and use that part. If your sick of waiting for IT to pull data out of the database so you can use it, learn that. Dont Overwhelm Yourself # [5] If you try to drop everything you know now and jump whole hog into these new flashy things its not going to work. Learn what you need to know. New things crop up very often. They will come and go. Some things will get traction, some will never...

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 # [1] [2] 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 # [3] 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 # [4] 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 c...

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 [1] 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 # [2] installation is easy npm i react-headroom Import Headroom # [3] There was no instructions for es6 style imports that are common with gatsbyjs sites like mine, but it was intuitive to figure out. import Headroom from 'react-headroom' Using Headroom # [4] Simply wrap your existing content, Nav in my case, with the <Headroom /> component and your off to the races. The content will pop back into view when you scroll past then back up. <Headroom> <-- Your content goes here --> </Headroom> See it in action # [5] 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...

Social Automation # [1] Zappier # [2] - Free - only one step is free - can take rss to social Automate.io # [3] - Form submission # [4] https://getform.io Free to get started https://formkeep.com/?#pricing [5] Free 7 day trial $4.99 cheapest after References: [1]: #social-automation [2]: #zappier [3]: #automateio [4]: #form-submission [5]: https://formkeep.com/

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...

Netlify # [1] I have happily had my personal site waylonwalker.com [2] 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 git push to main. Zeit # [3] 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 now 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 # [4] - gatsby - forestry.io ...

Finally after years of hand typing out a full git push --upstream my_really_long_and_descriptive_branch_name I found there is a setting to automatcally push to the current branch. More realisitically I just did a git push let git [1] yell at me, and copying the suggestion. git config # [2] git config --global push.default current This one setting will now git push to the current branch without yelling at you that your upstream does not match your current branch. This helps me ship chnages faster as I am constantly chnaging projects and branches. References: [1]: /glossary/git/ [2]: #git-config

This morning I logged into my machine and was nearly out of space - 64GB miniconda3! - 5GB conda cache - 4GM pip cache - 34GB docker Find it # [1] [2] These are the commands that I often use to reclaim space. Its so easy to fill up small vm’s in the cloud, or in my case today let your dev machine go way too long without a good cleanup. Show Remaining Space on Drives # [3] This shows us where to start and gives a baseline of how much space we have reclaimed. df -h show largest files in current directory # [4] Next keep drilling into directories that are big and running this command to see whats big inside of it. When you find somethign that you are willing to part with rm -rf <directory> it and check df -h to see if you have enough reclaimed yet. du . -h --max-depth=1 Honestly I rarely bother unless the directory is in the GB’s of space. A super simple filter for that is to just grep for G. du . -h --max-depth=1 | grep G conda # [5] How Many? # [6] As a first baseline...

cli tools are super handy and easy to add to your python libraries to supercharge them. Even if your library is not a cli tool there are a number of things that a cli can do to your library. Example Ideas # [1] Things a cli can do to enhance your library. 🆚 print version 🕶 print readme 📝 print changelog 📃 print config ✏ change config 👩‍🎓 run a tutorial 🏗 scaffold a project with cookiecutter 🖱 Click [2] # [3] Click [2] is the most popular python cli tool framework for python. There are others, some old, some new comers that make take the crown. For now Click [2] is the gold standard if you want to make a powerful cli quickly. If you are dependency conscious and dont need a lot of tooling, use argparse [4]. Project Structure # [5] . ├── setup.py └── simple_click ├── cli.py └── __init__.py ❯ cli.py # [6] # simple_click/cli.py import click __version__ = "1.0.0" @click.group() def cli(): pass @cli.command() def version(): """prints project version""" click.echo(__...

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...