Category: Programming Page 4 of 27

Programming

5 Tips for Managing Technical Debt

On June 30, 2021

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.

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

By djbrensinger

On February 28, 2021

In CSS, Design, Programming, Web Development

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.

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?

Visual Studio Code Tips

By djbrensinger

On December 31, 2020

In Programming

Every programmer has their favorite code editor. Your favorite editor may change as you hear about new ones. My new favorite is Visual Studio Code. Visual Studio Code is a code editor for Windows, Linux and Mac OS from Microsoft.

Photo by Sarah Pflug from Burst

With VS Code, I can open Markdown files for editing. Or write code for many programming languages like PHP, JavaScript or C#. A good code editor lets you customize it.

Customize VS Code

How do you make it work for you? The simplest way is to change the theme. Themes change the look and feel of the editor. VS Code lets you select themes from the marketplace or write your own.

When you first install Visual Studio Code, it won’t do everything that you need it to do. Extensions help you to get the features and functionality that you need. You can also use settings and customizations inside VS Code to make it support the way you work.

Visual Studio Code Tips and Tricks

When you are first getting started with VS Code, visit Visual Studio Code Tips and Tricks. This guide helps you to be productive and start using it quickly.

What else can Visual Studio Code do?

It can be challenging to know everything that VS Code can do. You can find out more by checking out VS Code Can Do That?! You’ll find a list of things that it can do. Like Prettier, Node.js Debugging, JSON Intellisense or search user settings.

Why use HTML and CSS over JavaScript?

By djbrensinger

On October 31, 2020

In Design, Programming, Web Development

When you build for the web, you have to make many different choices. What am I going to build? What tools are I going to use? The number of tools, frameworks and libraries available can be overwhelming.

Photo by Nicole De Khors from Burst

JavaScript is no exception. You have a wide variety of JavaScript frameworks or libraries to choice from. Should you use these technologies for every project? HTML and CSS can now do many things that you once needed JavaScript to do.

What is the Lean Web?

The Lean Web is a set of simple web development principles. Best practices for building the web with HTML, CSS and JavaScript. Chris Ferdinandi who wrote the Lean Web encourages you to embrace the web as a platform. To let the browser to do what it does best.

Chris gave a talk on Lean Web at WordCamp LA 2020.

The Three Lean Web Principles

Principle 1. Embrace the Platform
Use HTML over JS, CSS over JS and use the browser for what it is good at. Does that mean you shouldn’t use new tools and technologies? No. You need to decide when you should use them and why.

Principle 2. Small & Modular
Look for small, focused tools that do one thing really well. Use APIs, native browser methods or alternative tools lie Svelte or Preact. Use utility-first CSS to prevent redundancy in your stylesheets.

Principle 3. The Web is for Everyone
Not all browsers support native features. You can use a polyfill to replicate the feature. As developers, we make choices that can break the web for some people. Chris suggest using the A11Y Project to make sure that everyone who wants to use your web applications can.

Summary

You don’t want to avoid using new tools, frameworks and techniques in favor of old ways of doing things. When you are building any project, you have to make choices on what to use. Sometimes, HTML and CSS is the better choice.

How do you fix problems in print CSS?

By djbrensinger

On May 31, 2020

In CSS, Programming, Web Development

A print stylesheet allows you to print a webpage. Testing a print stylesheet can be challenging. You create print styles to manage how the page prints, but it still doesn’t look right. What do you do when you need to fix or find a problem that occurs when the page is printed?

Photo by Fernando Arcos from Pexels

You have two options use the Print Preview or the browser’s developer tools.

Print Preview

Print Preview lets you see how your web page looks on the printed page. You can see which elements to hide like navigation bars, footers or certain images. It also helps you to identify simple problems. Problems like large text, too much space between elements and extra styling that may use too much ink.

Print Styles in the browser

What do you do when you can’t find the source of a problem? Use your browser. Chrome, FireFox and Safari allow you to display print styles directly in your browser. This option is great for seeing how your design looks without print the page out. You can use the inspector to diagnose issues with your CSS. It can help you identify design issues that need a print style either created or modified.

For example, I had an app that printed a receipt. It printed on two pages instead of one. First, I used the Print Preview to find out what elements to hide when printed. After that, I saw that it was still printing on two pages. I couldn’t see what was causing the issue.

I changed the Developer Tools to show the print CSS. When I used this option to view the receipt with the print styles, I found the source of the problem. The problem was in the footer. I started to look at the styles for it. The footer had a height of 10.75 ems. I experimented by turning off the height. It changed from printing on one page instead of two. To fix this issue, I added a new print style for the footer and made the height auto. When I looked in print preview, it printed an one page.