DEV Community: Preston "Brady" Adger

5 Tactics to Maintain Momentum Working From Home

Preston "Brady" Adger — Sun, 18 Feb 2024 16:00:00 +0000

We've all had days where we feel like nothing can stop us. Our mind creeps into autopilot and we enter a flow state where our thoughts effortlessly spill out into our work. Then, there are the days when it feels like you're struggling to stay on task - fighting every step of the way. Why can't all of our days be like the former? I've curated a short list of ways that may help you tip your work day in your favor.

This is a list of things I incorporate into my daily life that have helped me and is in no way based on an ounce of scientific research.

1. Easy tasks first

You've eaten breakfast, drank your coffee, brushed your teeth, and now you've sat down to start your day feeling energized and ready to take on your toughest task of the day. An hour into the endeavor you've hardly made a dent; The eagerness and motivation you had to start the day have evaporated into thin air as you trudge your way through your assignment. I've been there far too many times.

Picking up the heaviest part of today's workload without partaking in the mental warmup leaves you with a strained cerebrum. Kick off your day by tackling a couple of easier tasks to gain a bit of momentum and confidence to tackle the more challenging requests. Bonus points if you sandwich your hard tasks with easy ones. I'll elaborate on that later

2. Lose the phone

"Yeah dude, duh."

I know, it's low-hanging fruit so I'll keep it short. Put your dang phone in another room. Nothing kills your momentum quite like the buzzing, beeping, or flashing of your 8 GB pacifier. An innocent glance at a single Instagram reel turns into a 30-minute sidequest where there is no loot at the end. Do yourself a huge favor and remove your phone from your workspace. You can still hear calls from another room if it's important.

3. Create a morning routine

Think of a snowball being pushed down a steep hill. Small and insignificant looking to begin, but with each roll gaining speed and menace. Being deliberate about your morning routine seems to create a similar effect.

Whatever it may be; Brushing your teeth, making your bed, taking a cold shower, etc. Completing these everyday mundane morning engagements (in order) day in and day out gives you an early sense of achievement, a sense of "I've already gotten so much done today!". Let's see how long we can keep that snowball moving.

4. Take a break

This one may seem counterintuitive as interrupting your workflow seems like a direct attack on keeping your momentum (if you're counting how many times I say 'momentum', quit it). I can see how it would initially look that way, but taking a mental break helps your brain recover from all of the work you just put it through. Powering your way through workload day after day will inevitably lead to burnout, which kills...

you guessed it...

momentum.

So, give yourself a break and go touch some grass.

Set yourself up for the next day

This is where the easy task sandwich comes back into play. This one is my favorite tactic to keep the momentum going. You've executed the other 4 to perfection and you want to better your odds every day you sit down to work.

End your day with another easy task, and queue up another for tomorrow.

This is a great way to ensure you end your day with a positive attitude and a feeling of accomplishment, which I've found greatly indicates the mood in which I sit down to start working the next day.

5. Conclusion

There are many ways to sustain momentum during your work week and these are just a handful of ways I've found success in doing so. If you find yourself struggling to keep the ball rolling, give these a try. Better yet, let me know some of your tactics!

Redesigning My Portfolio Website

Preston "Brady" Adger — Mon, 05 Feb 2024 17:24:42 +0000

4 years ago I created my first portfolio website.

Here is the hero section.

Now that you've finished laughing (and/or cringing), I had no clue what I was doing. I felt like I was improving my skillset as a developer, but did not have a single creative bone in my body to showcase. It was frustrating to iterate through different font sizes, typography, images, and layout, only to end up settling on something that you know looks mediocre. I couldn't seem to locate the right side of my brain.

A few weeks ago I decided to revisit my unhosted portfolio page and completely overhaul it. Instead of building my page using Javascript's framework of the week, I would leverage Webflow and Figma.

Learning new tools

Having never created a website using either of these tools, I searched for a course that could instill some confidence in this quest to create a page that doesn't make me completely unhirable.

I purchased this course https://www.udemy.com/course/freelance-web-design-from-design-to-development-to-making-money/

I spent my afternoons learning the ins and outs of Figma design. I learned about concepts and techniques such as color matching, typography, visual hierarchy, cropping, contrast, unboxing, remixing, and much more. 90% of this information was completely new to me. Like a lot of engineers, we are handed designs, and are concentration is honed in on executing the design to pixel perfection, not creating the thing.

I had never given much thought to design itself.

Getting Creative

Over the next week, I had committed much of my afternoons to practice the aforementioned techniques of web design, and to my surprise, I was improving rather quickly. It was like the iconic scene in The Grinch where his heart grew 3 sizes bigger. I think I could see the creative bone in my body beginning the grow. The course had given me tools (and a bit of confidence) that empowered me to make a visually appealing website on my own.

By the end of the course, I had created a my design.

I had done it.

What seemed unattainable due to the limitations I put on myself, I had created a portfolio site that I was proud of. With the help of Midjourney, the hero section of the site was vastly improved. The only thing left to do was take this design and implement it in Webflow. I won't bog you down with the details of getting the web page created, as it was simple and fast due to the fact I've done a ton of front-end work. The amazing part was the entire process of creating the design and building the site took less than 7 hours.

Conclusion

It's 2024. Designing a website has never been easier and will continue to become a non-issue with each passing day. That being said, learning the basics of good design will never go out of style as it rewires your brain as to what makes good design, and what design elements shape the story that you are trying to tell. Without this knowledge, it's easy to be frozen and always think 'How did they come up with that?'. Odds are that person thought the same thing when they were looking for inspiration for their next design venture. So if you think you are a non-creative, left-brained robot, odds are you just haven't found that creative bone yet.

Making async requests simple

Preston "Brady" Adger — Mon, 08 Jan 2024 18:14:35 +0000

If you're a front-end web developer, you will inevitably run into the predicament of managing your asynchronous call workflow. You want to write clean code AND provide a seamless experience for the end-user.

A single data fetch requires several variables to capture the various states of your request...

1). The data being returned from the query.
2). The state of the data fetch.
3). Error handling.
4). Pagination?
5). Refetching of data if dependent variables change.

The list goes on and on depending on the demands of the application. Add more than a single data fetch and your code can quickly spiral out of control with multiple variables and similar naming conventions.

Enter Tanstack Query. TanStack Query is an asynchronous state management tool for various web frameworks, including popular ones such as Vue and React. Using the example of asynchronous querying, this lightweight library allows for a simple function call, passing your asynchronous request, and returning a SINGLE object.

const fetchBlog = useQuery({ queryFn: () => <async_call_to_fetch_blog> })
The fetchBlog object now contains the essential goodies for rendering your component/page, such as fetchBlog.data, fetchBlog.isLoading, fetchBlog.refetch(), fetchBlog.error, and many other useless tools. You can also destructure the assignment to look like { data, isLoading, refetch, error }. Pair this with a state management tool of your choosing and your speed, efficiency, and clarity will soar!