30 Days of Writing Code
I've recently hit 30 days straight of at least one commit per day to an open source repository. My personal portfolio and an NFT gallery project have had me heads down in Next.js and TypeScript. I didn't set out with a goal to complete a streak of any kind but I have been in a flow-state, having a ton of fun writing code.
Over the course of the past month of building projects, a few things of note have stood out, I’m going to share those in this post.
Harness the Power of the Community
While building out the search functionality for this blog, I received a feature enhancement request from someone who was following my repo on GitHub. They presented a specific use case that I had not considered, and it was a significant improvement over what I had in place. I built out the enhancement and my site was much better for it.
This is part of the magic of open source. I can spend hours, days, weeks designing and building out a feature but there’s almost always room for improvement. Sometimes it takes a set of fresh eyes to bring a great idea to the surface.
Build First, Polish Later
This one is paramount if you need to get a long list of things built out and working together, quickly. I found myself taking a “quick and dirty” approach to building a feature and spending the majority of my initial time cross-browser/device and UX testing.
Once things feel good from a UI/UX perspective, I like to do a solid SEO, Accessibility, and Developer Experience pass. I moved hardcoded data out of components, put meta information in place in the appropriate areas, manually tested keyboard navigation, added the appropriate ARIA tags and ensured code was performant, reusable (where appropriate), and easy to read.
Use the Application
Become a user of your own product. I like to get my mind in the frame of an end-user. Testing as an item on a checklist isn’t helpful for anyone, you’ve got to use the application. Major issues, improvement ideas, and quirks arise when you step away from the IDE and and spend 30 minutes using your app.
Use your app on your iPhone, then test it on that old phone you have laying around. Open it in Microsoft Edge. Try it on OSX and iOS Safari. Try Firefox, Chrome, Android, tablets, ultrawide monitors, and your TV. You will learn a ton about shortcomings of User Interface and functionality if you try for yourself on different devices.
And “using the app” doesn’t stop there. Try turning off WiFi and connecting to a mobile hotspot, how’s the performance and load times? Notice any issues? You might need loading indicators or smaller json payloads when browsing on a slow connection.
Design From Your Own Head
Controversial opinion — unless you are brand new and learning the basics — skip the tutorials, Dribbble, and Twitter. Ditch the UI libraries and style guides.
Everyone learns, works, and processes things differently. What works for me, may not work for you. With that said, I find the external resources to cloud my judgement, intuition, and personal development as a designer. When I’m in the process of designing or building, I do it almost exclusively without external ideas or inspiration.
Once I have a baseline, I then refine and iterate for the sake of functionality and usability. I refine styling 15-20+ times. I am careful to keep my original Adobe XD design up to date as I make changes. Through this iteration I find my own design identity and visual language.
Final Thoughts
Coming up with an idea, then designing, developing, and iterating on it is invaluable experience for developers of all skill levels. You’ll learn a lot about the how and why, but more than anything you learn about yourself. You figure out how you learn, what keeps you motivated, what makes it fun for you personally, and what tools and processes are effective for getting your project built.
If you’re kicking around the idea of refreshing your portfolio, creating an app that you will find useful, or exploring something new that you find interesting; do it! Come up with a plan, dive in, and don’t stop until it’s done. Then when it’s done, USE IT. Then make it better. Happy coding 👨💻🥳