3 Tips for Getting Back Into Your Development Flow

Every day is a bit different. You may have new priorities and problems to solve. Meetings and issues that require your attention. Developers need to focus on the code they are writing. When you stop working, it can be hard to get back into a development flow.

3 Tips for Getting Back Into Your Developer Flow

Image by Gerd Altmann from Pixabay

What is flow? Flow is described as a cognitive state where you are completely absorbed in an activity. You are intensely focusing on your chosen activity.

Returning to your work

There are times when you need to stop working. You have to go to a meeting, eat lunch or leave work for the day. When you return, it takes time to get back into state of flow. What can you do to help get back into your development flow?

1) Leave yourself note

The simplest thing you can do is leave yourself a note. You can leave a comment in your code to remind yourself what to do next. Use email or have a tool like Slack remind you of what you were working on.

2) Rule of 3

Before you leave for the day, write down three things that you want to accomplish. When you start work the next day, work on those three things. J.D. Meier explains why the rule of three is a simple way to get results.

3) Make a shutdown process

A shutdown process is a set of tasks that you do to help you finish up for the day and prepare for the next work day. Workday shutdown rituals help you to separate your work day and personal time.

More ways to keep your developer flow

Accessibility Resources and Tools for Developers

What is accessibility? It is making your website as usable for as many people as possible. You want to make sure it works on different devices and slow networks. People with changing abilities due to aging, physical issues or situations.

Accessiblity Resources and Tools for Developers
Photo by Sarah Pflug from Burst

To make your website or app usable to as many people as possible, you’ll need to use different accessiblity resources and tools.

Design

Color is one tool that can make or break a design. Choosing the right colors can be hard. Radix Colors helps you to select colors to design beautiful and usable websites and apps.

When you need to check if two colors and the font work well with each, you can use Accessible Colors. Not sure how to choose the right colors? Stephanie Walter has a list of resources, tools and tips on color accessibility.

Many web development teams use style guides or a design system. These tools help to make your website or apps consistent. A11Y Style Guide gives you tips, tools and WCAG guidelines for developing. It includes a pattern library focused on accessibility. You can use their guide as a reference for your own style guide.

Development

You want to build things that people want to use. What do you need to know? You need to understand how people use websites and what you need to know to optimize it. The Accessibility Developer Guide explains what to look for and how to fix it. Many problems can be fixed by looking at how you write HTML.

Testing

As a developer, you need to test your code. You also want to test how use to easy your UI is as well. There are different tools to choose when you test the accessibility of your website or app. Here are a couple to start with:

  • Your keyboard. Many blind users navigate a website using their keyboard. Use the WebAim guide to Keyboard Accessibility.
  • WAVE – a free web accessibility checker
  • Lighthouse – an open source tool for helping you improve the quality of your website.

Where to find more accessiblity resources and tools

Use this short list to learn more about how you can add accessibility to your workflow.

5 Tips for Managing Technical Debt

What is technical debt?
Technical debt results when a programmer or team chooses speed over perfect code. They make decisions that focus on shipping code instead of following design considerations. Product Plan gives you an in-depth look at technical debt.

5 TIps For Managing Technical Debt
Photo by Dylan Gillis on Unsplash

Is all technical debt bad?

No. Like financial debt, technical debt can be a necessary tool to help you achieve your goals. It becomes a problem when you haven’t managed it.

How do you manage it?

1. Treat tech debt as a tool

Every tool has its benefits and issues. When you are building new product, you need to decide how you are going to solve certain problems. You may create some technical debt while solving certain problems to get your app out the door.

2. Build it into your processes

Tech debt becomes a problem when you ignore it. To prevent it from becoming a problem, add it to your development processes. Track what debt you can and need to address and what you can live with. Document everything. Good documentation helps you understand the difference between debt, quirks and configuration needs.

3. Good testing can catch issues

Do you test all your code? Make sure you have enough testing to cover all your code.

4. Dedicate time to work on it

Plan on addressing the “bad” debt as part of your work load. If you schedule time to address it, bad tech debt won’t adversely affect the performance of your app.

5. Manage FOMO

There is always a new library, framework or programming language to learn more about. You want to limit the new things that you want to add or try out. Save the new things for a different project. Then, you won’t introduce unintended tech debt that you will have to fix.

Summary

When you write software, you’ll create technical debt. It doesn’t matter how good your processes. You can’t eliminate it. Tech debt can be managed.

Layouts with FlexBox

You can use a CSS library to design a large scale website. What do you do if your needs are simpler? A CSS library like Bootstrap may be too much for your project. Smaller projects may need a simple CSS solution.

Layouts with FlexBox
Image by Gerd Altmann from Pixabay

FlexBox or flexible box can be for design small-scale layouts or applications. For larger projects, you can use it with your favorite CSS library. FlexBox provides you with tools to create layouts that grow and shrink as you need them to.

When would you use FlexBox for layout?

If you are creating navigation menus, web forms, media items or card layouts. Even simple basic grid layouts can be done with FlexBox.

You can use FlexBox to create different kinds of grids. Grids like 3X3, Masonry or Alternating rows. Tobia Sahlin shows you how to build these basic layouts.

What problems can you solve with it?

You can tackle some problems with FlexBox that were difficult using CSS alone. Problems like Vertical Center, Sticky Footers, Input Add-ons and more. Solved By FlexBox shows you 6 different UI solutions that you can do. It includes solutions like vertical centering.

Where do I learn more?

Creating a simple weather app with Open Weather API

How do you get the weather? You could use an app or create your own. First, you need a way to get weather data. You can use an Application Programming Interface to get the data that you need.

Creating a simple weather app with Open Weather API

Where can you find APIs to use in your projects? Try ProgrammableWeb. It is an API directory that lets you find the right API for your project. I found a weather API called Open Weather. Open Weather allows you to get the current weather data, hourly or daily forecast and more.

With Open Weather, I created a simple weather app. It gets the current temperature, daily forecast (highs and lows) and weather conditions. Then, it tells you if the weather was right for riding a bike.

Getting Started

Before writing any code, I looked at Open Weather’s documentation. It explains how to use their API. They include examples using different programming languages like JavaScript. These examples are helpful were helpful to learn what I could do with the API.

On their examples’ page, I found Weather.js. Weather.js fetches data from Open Weather for you. It makes it easy to get weather information from Open Weather.

Building the App

Before building the app, I researched other weather apps to get an idea of what I wanted mine to look like. Then, I sketched out an idea on paper.

I chose to use HTML, CSS and JavaScript. Since I am familiar with Bootstrap, I used it as well. I built my prototype with Bootstrap’s starter template. Then, I wrote my own JavaScript file to fetch data from Open Weather using Weather.js.

Open Weather has weather icons. Weather.js doesn’t use those icons. I looked at the JavaScript and wrote code to get the icons.


Weather.Current.prototype.icon = function () {
  return this.data.list[0].weather[0].icon;
}

Now, my app shows the current and forecast temperatures, weather icon and conditions.

Bike Weather App Screenshot

What to do differently

Open Weather returns weather information for a specific location. Instead of hardcoding the location, I would use the location of the browser. Right now, I used Bootstrap for the UI. I would use a different tool for handling layout like FlexBox or CSS Grid.