Refined GitHub: GitHub’s “Edge” Version

Refined GitHub is a browser extension that improves the GitHub experience with tons of user experience improvements. It adds fixes to annoyances that you didn’t even know you had, and once you learn about this extension, you won’t want to go back.

This was originally published by Hacker Noon on Medium. See the original article here.

Refined GitHub is a browser extension that improves the GitHub experience with tons of user experience improvements. It adds fixes to annoyances that you didn’t even know you had, and once you learn about this extension, you won’t want to go back.

A few months ago, I started using the extension and it is badass. Started by the respected developer, @sindresorhus, this extension fixes tons of the small annoyances we have with GitHub. The improvements are executed so well that the company has started to follow suit and implement some of them, too!

Because of this, the extension makes you feel like you’re using GitHub Edge™. It’s the same GitHub you know and love, but with a better experience. ⚡

For me, the extension has performed perfectly and it keeps improving all the time. I’m pretty jazzed about it, and I think you will be too.

Here’s a list of my favorite features so far:

1. Reaction avatars

See the avatars of those who reacted to an issue, pull request, or comment. It’s so much better than simply seeing a faceless (get it?) number!

2. Show links to closing PR in issues and PR

A link to the PR that will close the viewed issue can be seen prominently in issues and PRs. No more searching comment history to find the PR mention.

3. Linkifies URLs and issue/PR references in code, comments, and titles

Similar to how GitHub “linkifies” URLs and issue and PR references in markdown, it will create automatically create links to URLs, issues, or PRs from your code and issue titles.

4. Mark issues and pull requests as unread

Add an issue or pull request to your notifications. Need a reminder to check out a comment later? Here’s your solution.

5. Add indenting with the tab key in textareas

Adds indent with tab to textareas. Writing code blocks in GitHub comments just became a cinch.

See more and contribute

If Refined GitHub only changed one or two things, I don’t think it would add enough value to be compelling. But when you package these improvements altogether, it significantly improves the UX.

In addition to the ones I mentioned, there’s a bunch of other quality-of-life improvements that I left out. To see the rest of the features or help with development, check out the GitHub project repo.

I’ll wager that these changes will fit so well with your current workflow that you’ll forget what’s GitHub and what’s added by extension, too! So give it a try and let me know what you think.

Thanks for reading, and thanks to the Refined GitHub team!

Goodbye Sublime Text: Transitioning to Visual Studio Code After Using Sublime Text for 4 Years

After 4 years of being a loyal Sublime Text user, I’ve moved on to Microsoft’s Visual Studio Code permanently. Every year I have dedicated a week to trying other IDEs, but there was always something about other text editors that I didn’t love. VSCode is wonderfully familiar while offering much more than any other IDE I’ve experienced.

It took an hour to get up and running and I haven’t looked back since.

The Problem with Sublime Text

I was a diehard Sublime Text fan (I even paid for it)! When I began programming, it was my first text editor and I couldn’t get over its speed, simplicity, and extensibility at the time.

But modern web development and the competitive landscape has changed dramatically over the past few years. We’ve seen ES6, build tools, and so much more come to the forefront and our needs have changed. We want better means to collaborate, debug, and extend.

Unlike other IDEs now, Sublime is rarely updated and the extension community, which was once wildly innovative, has moved on.

Atom

When GitHub dropped Atom, it changed the game. The extensibility, user-friendly touches, and familiarity to Sublime made almost everything about the experience a joy. It truly set a new standard for our development tools.

But it seemed like no matter how many releases, Atom could not beat or come close to the speed of Sublime. In addition, for all of its usability improvements, something was missing for me.

Enter VSCode

A few months ago while watching a course from Frontend Masters, I saw VSCode in action. When I saw IntelliSense for the first time, my jaw dropped. The instructor was effortlessly navigating between files from its call, previewing function definitions without navigating to the source file, and using autocompletion like I’ve never seen.

IntelliSense in action

“Holy crap. I need to try this.”

I immediately downloaded the free software. The onboarding was beautifully simple. The documentation clear and concise. It was heaven.

It actually feels like a natural progression: Atom was inspired by Sublime, and VSCode was inspired by Atom. Using VSCode actually feels like using a new and improved Sublime Text.

Here’s a preview of the best features:

Intellisense – The coup de grace: Smart completions based on variable types, function definitions, imported modules right in-line the editor as you type.

Clear documentation

Simple onboarding – The onboarding was designed knowing many users are coming from other IDEs and make it dead simple to transition with keymaps. In addition, the interactive playground and documentation make it easy to start.

Fast development – Major releases with new features rolling out every few months.

Extensions community – The developer community is strong and thriving. Novel ideas being thrown about because of the powerful built-in functionality already available.

Extensions UX – Effortlessly find and install new extensions. VSCode will recommend new ones in the Extensions Panel based off of files you recently open.

Extensions Marketplace

Configuration UX – Configuration is dead simple with search and clear explanations. There are also project-specific configurations with Workspaces.

Integrated Git – Powerful Git integration to review diffs, stage files, and make commits from inside the editor. I use this as my primary diffing tool now.

SCM / Git integration

Debugging Tools – I haven’t used this much, but you can debug the code right from the editor.

Preview Markdown – Preview GitHub-flavored markdown files and see changes live.

Drawbacks

There are still a few drawbacks, but they are small trade-offs compared to the power you get.

  • Slightly slower than Sublime Text, but much faster than Atom.
  • Backed by Microsoft, which has a poor developer reputation. I think they’re working on it though.
  • Microsoft’s product suite and branding are confusing as hell. Other than Visual Studio Code, there’s Visual Studio, Visual Studio Home, and Visual Studio Team Services.

Extensions to Get Started

Ready to try it? Download it here.

Here are a few extensions to get you started. I chose some because they will aid in the transition from Sublime Text, and others because only VSCode has anything like it. See here for an exhaustive list of my extensions.

  • Sublime Text Keymap – Use Sublime Text keyboard shortcuts.
  • Settings Sync – Setup a GitHub gist once and backup your configuration settings.
  • GitLens – Git supercharged – Powerful Git tool for visualizing code authorship and diff comparing at a glance.
  • Path Intellisense – Autocomplete filenames. This makes importing modules in ES6 a breeze.
  • Auto Close Tag – Automatically add HTML/XML close tag like Sublime Text.
  • Contextual Duplicate – Duplicates highlighted text like Sublime Text, instead of duplicating the entire line. If you don’t have anything highlighted, it will duplicate the entire line.

See the popular VSCode extensions here.

Have you had a similar experience? Did I miss something? Let me know!

The Best Visual Studio Code Extensions

It’s so important for us as craftsmen and craftswomen to know our tools and get better at using them. When a tool is critical to our workflow, tiny increases in productivity lead to huge gains overtime.

Since programmers work out of our code editors everyday, editor extensions are a great way to increase productivity (as well as making our editor our home).

Since I’ve been geeking out over Visual Studio Code recently, here’s my list of the best VSCode extensions that I’ve come across so far.

  • Sublime Text Keymap – Use Sublime Text keyboard shortcuts.
  • Settings Sync – Setup a GitHub gist once and backup your configuration settings.
  • GitLens – Git supercharged – Powerful Git tool for visualizing code authorship and diff comparing at a glance.
  • Path Intellisense – Autocomplete filenames. This makes importing modules in ES6 a breeze.
  • Contextual Duplicate – Duplicates highlighted text like Sublime Text, instead of duplicating the entire line. If you don’t have anything highlighted, it will duplicate the entire line.
  • Auto Close Tag – Automatically add HTML/XML close tag like Sublime Text.
  • vscode-icons – Icons for VSCode.
  • Bracket Pair Colorizer – Changes the color of each pair of brackets to make it easier for scanning.
  • Project Manager – Manage your projects right inside Visual Studio Code. Easily access and switch between them.
  • Prettier – Opinionated autoformatter for frontend code.
  • Open in GitHub / Bitbucket / GitLab / VisualStudio.com – Like GitHubinator for Sublime Text, jump to a source code line in GitHub or other clients.
  • One Dark Pro – Atom’s iconic One Dark theme for VSCode
  • File Utils – Adds convenient commands for creating, duplicating, moving, renaming, and deleting files and directories.

See the popular VSCode extensions here.

Keep an eye out for an upcoming post where I talk about switching from Sublime Text to Visual Studio Code.

My Trello Workflow for Generating Blog and Product Ideas

I use this Trello workflow to generate more ideas for blog posts and new products than ever did with lists. As I’m now pumping out ideas every day, publishing a weekly blog post, and thinking of side hustles, this workflow has been critical to maintaining my velocity.

And it’s incredibly simple. Originally, I heard about this workflow on the IndieHackers podcast. When the interviewee discussed it, a lightbulb went off in my head. Even though I have always admired Atlassian, Trello never stuck as one of my tools until now.

Here’s how it goes:

  1. Create a board, “Blog Post Ideas”.

  2. Then create lists to separate the stage of the idea. Here they are from left-to-right:

  • Rough Ideas
  • Promising Ideas
  • Finished
  • Published

Image 2018-03-10 at 4.39.48 PM

Note: For my product ideas board, the lists are different because a product’s work isn’t done after the V1 is completed.

  • Rough Ideas
  • Promising Ideas
  • Work in Progress
  • Completed
  • Failed
  • Successful

Finally, regardless of your workflow, you can try these tips and tactics to generate more ideas.

  • Add your idea the moment you think of it. If you use Trello for iPhone, they have a wonderful offline mode and sync.

  • Please don’t judge your ideas right away. Ideas are vulnerable babies that should be allowed to grow.

  • Jot down as many relevant notes as possible. Since we don’t usually start and finish executing an idea in one sitting, it’s important to write as much as you need to recontextualize later.

  • Use short, staccato thoughts with bullet points to get everything out on paper. I found if I tried to make my thoughts too eloquent, I would spend precious attention making it sound nice, which is ultimately less important than writing the relevant details. Write the idea down while it lasts.

Age of Distraction

This a reminder for myself and fellow millennials.

We live in the Age of Distraction. In the age of push notifications, social media platforms, Netflix, and unlimited access to everything in our pockets, there are infinite ways to use our attention. In addition, companies are getting better at making habit-forming, or addictive, products to command our attention more.

But your time and attention are limited resources. Mind your habits. Beware distractions and desire. Be clear about your goals and care enough to be disciplined.

If we can only be effective on a few things a day, what are you choosing to spend your time on? If you on Facebook or Instagram multiples times every day, how does that affect the happiness and success of your day? How much time do you spend avoiding what you need to do? Are you pushing yourself?

Travel Designers

Travel agents are becoming fashionable again as “travel designers”, and after a hellish traveling experience I understand why.

As agents used to, travel designers handle the painful parts: planning, executing, and management.

However, unlike agents, designers tailor the experience to your tastes. It seems like you choose how much involvement you want with itinerary planning. Unlike a prepackaged experience that agents offer, the trip becomes uniquely yours because it’s based on your preferences. Then, you go on your trip and they handle the rest.

I wonder if the travel agent industry died out because it was transactional, not experiential. From what I’ve heard, no one looks forward to speaking with their agent. You didn’t learn about the best secret restaurants and hotels from them and you were charged a premium for what you can do with TripAdvisor for free.

So why would someone pay for this in the age of free information?

I’ve always enjoyed planning my trips, but after taking way too much shit during my 3-month stint in Asia, I get it. I’m incredibly price-sensitive, too. I’d rather stay in $10/night hostels if they are clean and comfortable.

But then I spent +30 hours in the last month planning and managing only accommodations! On occasion, this necessitated interrupting work hours, so the disruptions significantly affected my productivity. It boiled over when I felt like I was spending so much energy planning the coming weeks that I couldn’t stop to enjoy the present moment.

I’m tired of loading my Skype account so I can make expensive international calls to dispute hotel charges and negotiate refunds. I’m tired of being charged a premium for terrible experiences (have you been told “it’s tourist season”, too?). I want to focus on important work, my creative pursuits, and enjoying Asia.

Sometimes the pursuit of saving money is expensive in time and attention. In this case, to plan hotels is not why I chose to travel, and I’m willing to pay something to remove some menial tasks and manage my trip.

What do you think?

I’ve started looking into travel designers and initiated help from Journy, a modern company looking to improve this experience. Keep an eye out for my review of the experience, and if I think travel designers can be worth it.

Leverage Skills

Oftentimes learning a new skillset can help provide a perspective or unblock you to reach a higher level.

I’ve begun to call these leverage skills.

Leverage skills are skills when combined with an in-demand skill, make you more effective and provide leverage in your work. They can be used to improve job security, salary, creative ability, and more. They enable you to reach a higher echelon in your world. Especially in technology and creative fields, improving in one of these skills can have a massive impact on your professional life.

Combining multiple leverage skills develops a unique perspective and skillset that is hard to replace. You begin to contribute different types of value and develop an advantage over your competition.

This is where the leverage part comes in. The more unique value you add, the harder you are to replace. The harder you are to replace, the more leverage you have in your business, your job, and in your own skills.

I’m constantly trying to improve mastery in my own trade, but learning to write, lead, and be a great teammate has allowed me to become an invaluable member of any team. I’ve developed an advantage over someone else who isn’t as cross-disciplined.

Some skills that I’ve come across are:

  • Leadership
  • Design
  • Writing
  • Negotiating
  • Sales
  • Programming
  • Networking
  • Brand thinking and building
  • Product thinking and building
  • Be a great teammate

And, of course, as you learn new skills and improve in self-learning, you become more adept at picking up other skills more quickly and efficiently.

Keep an eye out for a future blog post where I talk about how learning to program has given me the freedom to travel while working and provided a great salary to boot. In addition, it will outline how programming (and other leverage skills) can change your life too!