Are you tracking your progress as a developer? It's not a requirement (at least in most places), but I've found it to be quite helpful. Especially when I'm trying to get past the imposter syndrome and remember how far I've come.
It's also helpful to track my progress because I'd like to get a promotion. I bet you would too! Imagine if you could create a list of goals with your manager, and then come to them with quantifiable list of activities and tasks you completed related to those goals? Wouldn't it be a no brainer for that promotion and raise?
Because of that, I built this system for helping me create tangible, actionable goals and log progress I'm making on them to compile those stats in a dashboard.
I made it as simple as possible and accessible from anywhere because I knew if I had to open up another app or tool, I'd never do it.
How It Works
From anywhere I'm at, I just use a keyboard shortcut to open a sidebar in my browser with a form. I fill out any details about the task I completed and select which goal it relates to. When I submit, that task is sent to a Google Sheet, and a preview of my dashboard shows in the sidebar panel. (The dashboard is the count of total submitted tasks that relate to each goal).
Below that, I see the last logged task, and a list of new tasks that I can grab and start to work on so that once I complete them, I can add them in!
Want to try it out and use it for yourself? Keep reading to see how I built it. (And comment on here if you have any questions as you try to build!)
What you need to get started
- Google Sheet (I made this template, but you could create your own)
- Free PixieBrix account
- Task tracking tool (I prefer Trello, but to each their own!)
Step 1: Set the goals
You can really build this with all sorts of tools, but if you want something straightforward like I did, just grab this spreadsheet.
Start with the first tab and do some research about what your job is and what kind of skills or areas you might need to master. Fill out the details in Column F with what you find in your research.
Next, fill out Column G with what I like to call tangibilized action items. Aka, whatever is in the column before it, create a specific, actionable goal that relates to that.
For example, if you want to learn Vue, maybe create a goal of building a single page app with Vue. If you want to get better at code reviews, have a goal of doing 2 code reviews each week.
Step 2: Set up the dashboard
You can ignore the middle tab in the spreadsheet for now... that's essentially just a list of logs of each task that progresses a goal. You'll do most of that work outside of the spreadsheet and get PixieBrix to fill that in for you.
But head to the third tab, called Dashboard. Here you'll want to rename the items in Column A with short titles for the goals you just created.
The purpose of this is to be able to track each goal, and how many tasks you have that relate to that goal. If you don't make any changes, the formulas in the cells next to these titles will count how many items are in the Relevant Tasks tab that relate to each goal.
Here's the formula if you're curious:
=COUNTIF('Relevant Tasks'!B:B,A4)
It's not so important what you name these short titles at the moment, but it WILL BE important to make sure that you use the exact same short title in your dropdown field on your PixieBrix form. But don't worry - we'll get to that!
Step 3 : Make a form to log progress and a way to view stats from any tab
Okay you've got your log, now you're ready to break out PixieBrix and build a form and a sidebar panel!
If you've never used PixieBrix before, you'll need to create an account and add the Chrome Extension.
Don't worry, it's totally free, and the best part is, you can build all sorts of cool stuff with it besides just this extension. (You can see tutorials and demos of all the things I've built with PixieBrix in my PixieBrix YouTube playlist.)
Once you're all set up, you're ready to start building.
Prefer to watch? Here's a video.
Want to read the steps while you watch? Keep going!
Open up the page editor
From anywhere in Chrome, right click on a page and click "Inspect" to open up the Inspector. Notice you will have a new tab called PixieBrix!
Select that to start building your extension.
We'll technically need two. Let's start by building the preview panel that shows the dashboard from the Google sheet.
Click "add" and sidebar panel
In the top left of the page editor, you'll see an option for adding a new extension. We want a sidebar, so click that.
Add a brick in the render document section
Go to the "Render document" brick, and look at the preview on the right side. Select the three dots in the element that holds the text and then choose "Brick". Just like this!
Add an iframe to the brick
Now you see on the left something that says brick just under the Render Document item. Click the + button just below brick and search for iframe. Click Add and that brick is now inserted into your renderer.
Just configure the iframe with the embed link for your Google Sheet. (Here's how to create an embed link for your Google doc if you're curious.)
Once, you're done, it should look something like this, and you should be able to see it in your browser when you click Render Panel in your extension.
Advanced Step
I'm going to keep this written explanation a little bit bare bones, but if you are following along in the video, you'll see I actually also add another section to the document, with another brick for getting data from PixieBrix and rendering that.
It's a way to show the last logged task. If you're not worried about seeing it, you can skip this part!
Click the three dots to add a text element and you can add a header then choose the options to style it as you please, like with colored text, italics, etc.
Next, you'll just need to a brick called Get data from PixieBrix database and search for the key that you will define in your form brick. (I called mine mostRecent.) You'll also need to create a database if you haven't already. I just called mine Achievements. Doesn't really matter what you name these, but you'll want to remember it for the next extension where we push data here on form submit.
Next, you'll add the Render markdown brick to format the data in a more readable way.
Here's what you'll copy and paste into that brick, assuming you've set everything up the way that I did in the video. Note - if something doesn't work, follow the trail and check that your outputs are named correctly!
{{@transformed5.data.name}}, _completed on_ {{@transformed5.data.date}}
Should look like this, depending on what you name your fields in the form that we'll create in the next extension.
It's not going to show any data because we haven't pushed anything to that database yet. If you're having trouble, you might need to change the Missing Behavior to blank instead of error.
Create another extension by clicking "add" then choose the Quick Bar option
I prefer to use the quickbar because it means I can trigger actions happening with a keyboard shortcut that opens a list of commands. In this case, I want to open up a sidebar panel with a form.
You can configure this Quick Bar brick pretty much however you like - this is just naming and styling.
Next, add a brick called Show sidebar. This tells PixieBrix to open a sidebar when you trigger this action. I set the panelHeading to Log so that it creates its own sidebar panel with the form.
Time to build the form
Now add another brick called Show a modal or sidebar form. This a brick that you just configure the form for how you want it to look. If you're pairing it with the spreadsheet above, I recommend adding the following fields (and field types):
- title/name of task (single line text)
- goal it was related to (dropdown)
- notes (paragraph text)
The other important thing to configure is the Location field just below the form fields. Make sure you set it to sidebar instead of modal.
Get a timestamp, then send to Google Sheets and PixieBrix
Now you just need to reference the input form the form, get a timestamp and ship that info!
Start by adding the Parse Date brick, which will give you an output that you can use to reference a time stamp. Just type now in the Date field, and that's all the config you need.
Now add the Add Google Sheet row brick, and connect your spreadsheet and pick the tab "Relevant Tasks (Don't Edit)". (If you've never use Google Sheets with PixieBrix before, you may have to log in to Google Sheets and authorize PixieBrix).
You'll see it pulls in the headings, and now you just need to map the data. Here's how I set it.
Show confetti and display the achievements dashboard panel.
Now add a brick called Show Confetti, which requires no configuration, and just sprays digital confetti across your screen! What a way to celebrate. ๐
Lastly, add the Show Sidebar brick, and set panelHeading to be the name of the Achievements sidebar you just made in the previous extension. You can see what it's called by going to the first brick in the Achievements Panel extension and look at the value for Heading.
Advanced - push "last updated" data to PixieBrix.
You only need to do this if you've done the advanced part of the previous extension where you pull data from the PixieBrix database.
Add another brick called Put data in PixieBrix database to send the data to the PixieBrix data and rewrite the mostRecent item. That way it only ever holds the latest value. You'll want to select the same database and key that you used in the previous extension, and then you'll want to set a replace value for Merge Strategy.
Lastly, just add two properties to send to it. Remember the "last task" message? We showed the name and the date. So just reference those two things, like this!
Want to create a table of upcoming tasks? Here's how to set that up. The only difference is that you'll need to use the jq filter to render cards in a list named Elastic (assuming that's how you have your Trello board set up).
Here's the syntax for doing that:
.list as $list | .input|.cards|=(del(.[][]|select(.idList==$list|not)) | del(.[]|select(.==[])))
Now go and do!
Need any help? Comment on here or my video and I'll respond as quickly as I can! The PixieBrix community is also extremely supportive and happy to help when you have an idea for something to build but you're stuck. So if you like this idea but have some modifications, let me know and we can try them!
Top comments (1)
This post is amazing!!
I think it would bring a lot of value to the CodeNewbie Community too:
CodeNewbie Community ๐ฑ
The most supportive community of programmers and people learning to code.
The CodeNewbie Community is a super supportive & inclusive community of folks from all backgrounds who have gathered together to learn (and help others learn) to code. It's not unlike DEV, but the focus is really on dev newbies! ๐ป
Would you consider crossposting this article there? Because CodeNewbie is built on the same platform as DEV (Forem) you can fairly easily copy the Markdown and post it there as well. ๐