DEV Community: George Nance

The Apps I Use

George Nance — Sat, 28 Nov 2020 00:00:00 +0000

Staying productive in a digital world can be hard without the right tools. I have assembled a list of great apps that I use everyday that make my life easier.

Bear

Bear is a note taking app that brilliantly simple.

Where it thrives is its ability to use anywhere in your note and sort them into collections.

What makes Bear one of my favorite note taking applications is the fact that it's all markdown under the hood. Which means if I wanted to export all my notes out of Bear, I can with ease. I like that I own my data. My ADHD brain needs something flexible like this to stay organized.

I have been trying to take more notes lately and to build up my second brain.

Bear is an excellent value at only $15 a year. That gets you a mobile app and a desktop app. The developers behind Bear are also working a major rewrite to make a web version as well.

Obsidian

Obsidian is the newest player in my arsenal. It is a research note taking app created during the Covid-19 lockdown as a fun project. quickly evolved into quite a hit.

What makes Obsidian different ? Its based off of the zettelkasten system. Which is a system of taking notes and linking them together with certain phrases or words.

I will be the first to tell you I am no expert at this system but I love the idea of having my own database of knowledge.

Obsidian comes into play because they support backlinks in notes. Which is a way to connect 2 markdown files to each other. Obsidian also has this cool feature to see how your notes connect.

It has become one of my favorite apps and has tons of features like a daily notes. The app uses CSS for custom themes so it's a breeze to make it look how you want.

Right now I am using it alongside Bear to import notes that I want to move to a more permanent solution.

Todoist

Todoist is a new one for me. For a long time I opposed this kinda of "subscription todo app", but it has been very beneficial in helping get my life together. The neat thing about about Todoist is projects and the ability to separate many tasks.

Figma

Figma is a blast to work with for creating icons or UI mockups .

The fact that is free blows my mind. I have started to work on my own icon-set in it. My logo was also created in it. It's a joy to use.

Plus it has the ability to collaborate easily with real time editing.

Conclusion

These are just a few apps I use. I plan to write more about the other ones I love.

7 Reasons you SHOULD write CSS

George Nance — Mon, 02 Nov 2020 00:00:00 +0000

This article is in response to this post

Article No Longer Available

I believe that preprocessors like SASS, LESS, or Stylus are becoming more and more irrelevant as CSS becomes more powerful.

1. PostCSS

I am going to start this list with PostCSS. Some people will be gritting their teeth right now saying that is cheating. And they may be right in a sense. But at its core, PostCSS brings the features of future CSS to your code now. The language is still CSS.

PostCSS bring upcoming features such as selectors, functions, and automatically adding vendor prefixes to your code.

2. CSS supports variables

CSS added support for custom variables and every modern browser supports it. The beauty of CSS variables is that you can dynamically change the variable values without needing to recompile. My site uses CSS variables for dark mode. If you haven’t tried it, Click the moon icon in the top right.


:root {

 --color-primary: #399ee6;

 --color-text: #222;

 --b-radius: 8px;

}

button{

 background-color: var(--color-primary);

 color: var(--color-text);

 border-radius: var(--b-radius)

}

3. CSS supports imports.

For the longest time you would have one giant CSS file for everything, but modern CSS allows you to import CSS files. I have began to separate my CSS files to help keep my code more organized.

4. Calculations are here and they work beautifully.

With calc you can do much more then you ever could before. It allows you to add, subtract, multiply, and divide in CSS. You can even do calculation using different data types such as percents and pixels.


width: calc(100% - 30px);

5. Flexbox and CSS grid have changed the game

Flexbox and CSS Grid have made designing for the web an absolute treat. A basic bootstrap grid system can be created with a few lines of code. You no longer need to use a framework to create a responsive website.

6. It’s the standard to style the web.

The fundamentals of writing CSS syntax hasn’t changed much. You can rest assured that if you learn CSS, you will always know how to style the web. CSS has over 20 years of experience behind it. It won't be going away anytime soon.

7. Never compile

You can edit your CSS file from anywhere and in any text editor with ever needing to compile. You don't have to worry about syntax errors preventing your code from rendering. This adds the flexibility to write CSS directly from the web console.

Wrap up

I highly recommend writing more vanilla CSS. Modern CSS has come a long way since the days of using tables for everything. You can create modern, efficient, and responsive websites without needing to compile any code.

Don’t use frontmatter to seperate your markdown files in GatsbyJS - Use the file system

George Nance — Sat, 29 Aug 2020 21:22:10 +0000

Introduction

I am going to walk you through how to separate your markdown files in Gatsby in a way that more sense then a frontmatter field.

How splitting up markdown is normally done

For the longest time I had to use solutions like front matter fields to specify the difference between posts and pages types

Before I learned you could tell GraphQL to know the which markdown file was a page or post. My front matter would look something like this:


---

title: 'How to be productive as a programmer with ADHD'

date: '2020-06-19'

published: true

tags: ['adhd', 'productivity']

coverImage: cover.jpg

type: article

description: Being productive while having ADHD can sometimes feel like a colossal task.

---

I would use type: article so I could filter out only posts or articles.

Why its bad

Adds extra syntax to every markdown file
It can easily become error prone
File Systems were designed for this task.

I wanted to simplify how my blog generated articles so I could focus on creating content and not figuring out why a post was missing.

And I already had a folder structure like this:

Wouldn’t it be nice if GatsbyJS knew if a markdown file was a page or blog post based on the folder it's in?

That makes more sense to me.

Prerequisites

You need to have gatsby-source-filesystem installed.

If you are using gatsby-transform-remark or gatsby-plugin-mdx you will already have this installed. 👍

Step 1 - Create the folder structure

Create the folder structure you want to use.

I like to separate my posts from my code so I put mine at the root level like thisproject-folder/content

This is the folder structure I will use


📂 content

├── 📂 blog

│ ├── 📂 hello-world

│ │ ├── 📄 index.md

│ │ └── 🖼 salty\_egg.jpg

│ ├── 📂 my-second-post

│ │ └── 📄 index.md

│ └── 📂 new-beginnings

│ └── 📄 index.md

└── 📂 pages

   ├── 📂 about

   │ ├── 📄 index.md

   │ └── 🖼 profile-pic.jpg

   └── 📂 now

      └── 📄 now.md

Each page or blog post has its own folder. This makes it easy to keep images or files it needs organized.

Step 2 - Set up the file system in Gatsby

Install gatsby-source-filesystem if you don’t have it


yarn add gatsby-source-filesystem

We are going to be using the Gatsby Source File System to separate our folders.

To do this, first add gatsby-source-filesystem as a plugin to gatsby.config.js . You might already have this added.

For each type of content you want separated add a new gatsby source filesystem object with the name and path.

In our case, we want to separate posts and pages, so we need 2 sections.

It should look something like this:


plugins: [

{

      resolve: `gatsby-source-filesystem`,

      options: {

        path: `${\_\_dirname}/content/blog`,

        name: `blog`,

},

},

{

      resolve: `gatsby-source-filesystem`,

      options: {

        path: `${\_\_dirname}/content/pages`,

        name: `page`,

},

},

...

}

Step 3 - Update Gatsby config

In gatsby-node.js add this code to onCreateNode.


exports.onCreateNode = ({ node, getNode, actions }) => {

const { createNodeField } = actions;

if (node.internal.type === `MarkdownRemark`) {

const parent = getNode(node.parent);

let collection = parent.sourceInstanceName;

createNodeField({

      node,

      name: 'collection',

      value: collection,

});

}

};

If you are using MDX, just swap out allMarkdownRemark for Mdx

First off, we make sure that the node we are editing is a markdown file, we are grabbing the parent node so we can access some additional information.

sourceInstanceName is the field we set on gatsby-source-filesystem in the last step.

allMarkdownRemark alone does not have this field for us to use so we have to get it from the parent.

Then you add a field to the markdown node for the collection it belongs to.

Step 4 - Let the separating begin

We can now pass a filter to gatsby to let it know what collection we want to access. Hooray! No more frontmatter types


query {

  allMdx(

sort: { fields: [frontmatter\_\_\_date], order: DESC }

filter: { fields: { collection: { eq: "posts" } } }

) {

    edges {

      node {

        id

        fields {

          slug

}

        frontmatter {

          title

          published

          slug

          date(formatString: "MMMM DD, YYYY")

}

        excerpt(pruneLength: 280)

}

}

}

}

Wrap Up

Thanks for stopping by! This was a quick tutorial I made to solve an issue I was having with GatsbyJS. This article is a part of my "write one blog post a month" challenge.

If you would like to see more tutorials like this, let me know on twitter or by subscribing to my newletter.

Also I recommmend checking out Josh W Comeau if you want more Gatsby goodness. His tutorial on darkmode inspired me to add it to my site

An Open Letter to New Programmers

George Nance — Sun, 02 Aug 2020 00:00:00 +0000

Dear weary novice programmer,

Do not give up. I promise it will all make sense soon. Learning to program is not an exercise of remembering commands but the ability to change how you think. Learning to program is bigger then having the ability to write computer programs. It will teach you how to live a more optimal life.

I am going to share with you some advice I would have given myself when I first started.

Everyone feels like they are faking it.

I know that you think that this way over your head. But I promise it will take time to get used to. Not a single soul born knows how to code. In the same sense, no one is born knowing how to walk. Only persistance will give you the results you want. Do not compare yourself or your code to others. This is a quickest way to hating your work.

You must write garbage code first

The worst thing you can do is take on a massive project in the beginning. When I was a wee lad, I loved the movie the Social Network. The movie revolved around Mark Zuckerberg starting Facebook from his college dorm room. I would get so inspired after watching that I would proclaim to my friends, “I”m going to build the next Facebook!”. Then I would open up my ~~pirated~~ copy of Adobe DreamWeaver and pretend to know was doing.

Rare footage of me in 2009 having no idea what I'm doing

At the time, I did not know much html. And the only css I knew was how to the change the color of text. But I was going to write the next Facebook.

Spoiler Alert: I didn’t write the next Facebook.

The truth is, Facebook was not Zuckerberg’s first website. He was already an experienced programmer by the time he started Facebook. And no one talks about the projects he made before he got to Harvard. That’s an important thing to remember, your first projects are going to suck and no one but you will want to use them. And that’s okay!

In the game development community, there is a common piece of advice given to beginners. “Don’t write an MMO as your first game”. It's not surprising that aspiring gamedevs come into the field wanting to create the games they enjoy playing. This advice is not meant to be discouraging. What said is that you have to crawl before you can walk. If you dediate yourself to a huge project early on, you will become overwhemled and burn out.

But if you accept that your first works will suck, you will grow and learn what you can do. The faster you get past the sucky bits, the faster you get to the not so bad parts.

Programming is a change in mindset

Learning to program is not about learning how to use the latest Javascript libraries. Its not about learning how binary works (Though that’s not a bad path). Its not even about learning a language . Learning to program is an entire shifting of the way you think.

Here’s the thing about computers. Computers are purely logical. A computer will do what it's told. A computer knows only the information its given. If your program is not doing something you want, this means you need to step through how the computer is interpreting what's being told.

This can be a foreign concept for some. You have to think like a computer. People who tend to be better at math pick up programming a bit quicker. For me, I am not naturally good at math, so this took me a long time to grasp.

Experienced programmers question their expertise all of the time

To this day I still question if I am an imposter and I have been programming for over 10 years. At my new job, they are using a framework I was not familiar with. I had a difficult time trying to understand the way the framework wants me to use it. No matter how many languages or framework you learn, you will always have moments like these.

There is always a period of time where you are typing code you don't fully understand. Then there will be an "aha!" moment where it all makes sense. This is called the click. Sometime it takes weeks or months to get there. We all have to go through it. You are not dumb, it just has not clicked for you yet.

Programming is more about the ability to love learning than it is about remembering what you have learned. If you hate learning new things, you will have a hard time in this field. But if you love learning, you will find this very rewarding .

The click will come

You are not alone if has not come yet. It all comes back to shifting your way of thinking. And that takes time. For a long time I wrote code without knowing what it did.

This is something that you must trust to come. You can not fight it or skip any steps.

What you can do

Do not dispair, if you can accept that time will improve your skills, there is action you can take.

Set aside some time everyday to program.
Try to make a project that will help you.
Look through these lists and try to complete a project on your own.
Keep learning. Don't stop watching tutorials or taking classes. Ask questions on Dev.to or /r/learnprogramming
If you know someone else who is struggling with programming, please send them this article.

One last thing you can do

You could subscribe to me here on Dev.to or checkout my newsletter . I have made it my goal to write at least one post a month to help programmers with topics such as mental health, burnout, and self care. Seeing how many people appreciate my work is really motivational to keep writing 🙂

How to be productive as a programmer with ADHD

George Nance — Fri, 19 Jun 2020 22:40:00 +0000

Being productive while having ADHD can sometimes feel like a colossal task. When I was rediagnosed with ADHD as an adult, I began to research ways to be more productive that are inattentive friendly.

To my surprise, there was not much content for adults with it. So I compiled a list of methods that will help you stay focused as a programmer.

Set up your work environment

To set up your work environment for success, you need to reduce distractions.

Close Apps you are not using. I use an app called Quitter by Marco Arment. It lets you set up rules to close your apps after a set amount of time of it being inactive.
Organize your files and folders. It’s a good idea to try to keep projects isolated to their own folder so they are easier to find. I plan to write more about this one in a later article.
Tweak your notifications. If you can get away with turning on Do Not Disturb on your computer, this will be the most effective. But if you are expected to be prompt to slack messages and emails this may be a bit more tricky.
Block distracting websites. Taking a 5-minute break on reddit can lead to you looking at cats that like loafs of bread an hour later. For Mac, there is a great app called Self Control that lets you block certain websites for a set amount of time. The best part is that it’s very hard to get around this filer.
Buy a good pair of noise-canceling headphones and find some music that helps you get into a flow state. I have a pair of ATH-M50x that have been my loyal choice for over 5 years (Not Sponsored yet). Music is one of the most underrated tools for programmers.

Organize your tasks!

For organizing tasks, it's useful to stick to analog. Yes, analog. I bet you thought this was going to be about cool apps huh? Nope, let me introduce you to this cool little thing called Bullet Journaling.

Bullet Journaling

At first, I was skeptical of this system but the more I have used it, the more I have fallen in love with it.

The best approach for bullet journaling is using good ‘ol pencil and paper. Digital apps have the flaw of being in an environment that is full of distractions.

All you need to get started is:

A blank or dotted journal 📓
A pen 🖋
A passion to get things done. ✍️

It all starts with an index page. This page will keep your journal organized. Then you create a Future Log, A monthly log, and a daily log. The reason why this system works so well for developers with ADHD is that it's easy to tweak. If you want to have a page for your doodles of Triforces, go for it. If you want to create an elaborate health and fitness tracker, you can do it.

If you need inspiration, there is no shortage of creative posts on Pintrest and Instagram.

For more info on Bullet Journaling, I recommend reading the official website.

I also recommend watching How To ADHD’s video on bullet journaling.

Exercise

Exercise has proven time and time again to be an excellent tool for just about everything.

On the mornings where I am not hitting the snooze button until the last moment, I try to get at least 30 minutes of exercise. I notice improvements in my mood and the ability to solve problems quicker.

It doesn’t need to be intense if you are starting your fitness journey, A walk around the park can do a lot for the mind. Proper exercise is shown to reduce most symptoms of ADHD.

Time Management

Pomodoro Timers

Pomodora timer is a system to make sure you stay focused on a task followed by a short break.

This is an easy way to ensure that you are giving your mind time to relax and not hyper-focus for too long. Every 25 minutes or so, you take a 5-minute break. Then after 3 “Pomodoras”, you take a 15-minute break. This system forces you to stick to a task with a promised reward of time you can do whatever you want without feeling guilty. That’s the beauty of this system. I’m using one right now while I write this.

Here are some great apps that use Pomodoro:

Forest - Pictured above. iOS app(Paid) and a Chrome Extension
‎Flow - Mac menubar app
Tomato Timer - Web App

Allow yourself time to actually read documentation.

If your brain is anything like mine, you probably skim the documentation until you find a code snippet you can use and ignore everything else. Good news, you’re not alone in this. Our brains are wired to find solutions in the most efficient way.

Statistically speaking, most people are skimming this article right now.

Jakob Nielsen’s eye-tracking study from 2008 indicated that less than 20% of the text content is actually read on an average web page.

👋 Hello to the people skimming this post

While this behavior is effective at getting results, we can find ourselves in a loop of not understanding the why behind certain code. Allow your self to slow down next time you are looking up something. Read the descriptions of the functions and API you are using. You will probably learn something new!

Medication

Okay, this one might stir up controversy, that’s why I saved it for last. Let me preface this with I am not a doctor and you should talk to yours if you are thinking about medication.

For me, medication has been the most effective tool

The first time I took medication, I cried. For the first time in my life, everything clicked. I spent most of my adult life looking for a system to help me reach my goals. But they all followed the same cycle:

Phase 1: I discover a new system and am passionate about it
Phase 2: I do tons of research and begin implementing it.
Phase 3: Everything goes great until I miss a day.
Phase 4: I fall off. GOTO Phase 1

My life was equivalent to everyone's New Years' weight loss goal. I believed I didn’t have the discipline to get anything done. I knew I wasn’t lazy. I felt like I was working 2x as hard as everyone to only get half as much work done.

So when I started using medication, all those systems that did not stick began to click. Life went from being an unpredictable blur to being able to think clearly. It felt like putting glasses on for the first time.

Medication is not for everyone, many people with ADHD live successful lives without it. But you should know that it’s an option.

In Conclusion

You can be a programmer with ADHD and live a productive life. I shared the tools I have used to keep myself accountable and productive. Every one of them I have used myself. While these may or may not work for you I encourage you to try them. I also recommended finding a community to talk about ADHD without judgment.

Here are a couple good ones:

/r/ADHD
#NeruoDiverseSquad on Twitter

One last thing, Embrace ADHD. Don’t be too hard on yourself when a system doesn’t work for you. Your brain is different. We are programmed to notice small details and think outside of the box. Change is hard and the worst thing you can do is think you are defective.

I live by this quote from BJ Fogg, the author of Tiny Habits.

People change best by feeling good, not by feeling bad.

Thanks for reading !! I would love to hear what you have done to become more productive.

If you want to see more content like this, be sure to check out my website and considering subscribing to my news letter. I plan to publish more articles like this in the future

What’s your non-programming specific favorite tech blog ?

George Nance — Sat, 06 Jun 2020 20:26:01 +0000

Just curious who you like to follow.

I really like

Marco Arment He is an indie iOS dev but has a passion for Apple Tech. He has lots of posts breaking down how certain technologies work.

Deleting untracked files from git

George Nance — Sat, 06 Jun 2020 06:25:12 +0000

The problem:

Have you ever tried to pull down some new changes and come across this error?

error: The following untracked working tree files would be overwritten by merge:
    resources/views/untrackedFolder/untrackedFile.blade.php
    resources/views/untrackedFolder/anotherUntrackedFile.blade.php
Please move or remove them before you can merge.
Aborting

Untracked files huh? Okay, that doesn't sound too difficult. You should be able to run

git reset --hard

But wait

They are still there! What gives !?

The reason is because git reset --hard only removes files that are already a part of the repo

Solution

From the git docs, we will find this command:

git clean -n

-n this flag will show you what files will be removed.

You should use this flag first to determine what is going to be removed.

git clean -f

-f this flag means it will delete the files permanently.

Other useful commands

git clean -fd will also delete folders

git clean -fX removes ignored files

git clean -fx removes both ignored and non-ignored files

There you go, you should have a clean repository that has the changes committed before.

I made a bash script to help automate adding new ssh keys

George Nance — Mon, 17 Feb 2020 17:47:50 +0000

At my work, we have tons of ssh keys that we store in central repo. We have to move them to our .ssh folder so we can ssh into server. But you also need to set the permissions on the key file after you move it.

I started to get annoyed with having to set permissions every time so I created a bash file to automate this.

#!/bin/bash

# add_ssh_key - A script to move ssh key and set permissions

##### Constants

SSH_DIR=~/.ssh/


# Check for path
if [ -z "$1" ]; then
   echo "Please provide the path to the ssh key" 
   exit 1
fi

cp $1 $SSH_DIR
chmod 600 $SSH_DIR$(basename $1)
echo "Copied ${1} to .ssh dir and set permissions to 600"

I also have a gist for it

Download and move that to whatever bin folder you have and run
chmod +x on the filename. For me, I made a bin folder at ~/bin but you can put it wherever you want.

Then add an alias to your .bashrc or whatever file your terminals sources. For me that is a file called .zshrc

alias add_ssh_key="~/bin/add_ssh_key.sh"

Then open up a new terminal and you should be able to run:

add_ssh_key path/to/current/key

And pretso! 🎉 You have a key with proper permissions.

Thanks for reading! Let me know any ssh automation you have set up.

What are some productivity hacks you have discovered recently?

George Nance — Fri, 06 Sep 2019 17:01:59 +0000

I recently discovered Tomato Clock and it has done alot to help me stay focused.

What are some tips you have discovered?

What music do you jam out to when you are coding?

George Nance — Thu, 10 Jan 2019 15:25:07 +0000

Normally I throw on the Brain Food Playlist on Spotify or any sort of chill electronic. But lately I had been loving listening to Hip hop while coding or any sort of "high intensity" music.