Curiosita Labs

Thoughts on programming, web development and design.

Circuit Board

Author: djbrensinger Page 6 of 50

Filling Up Empty States

By

On December 31, 2021

In Design, UX, Web Development

What are empty states? These are spaces on your app or web page which can be empty or blank. Screens or panels where no data or content displays. Why? Your users haven’t entered anything or data can’t be displayed.

empty room with wall wall and plant

Photo by: Darkmoon_Art on Pixabay

You might be familiar with empty states. Some typical scenarios are:

  • When a search returns no results
  • You have downloaded a new app and haven’t entered any data or content
  • An error has occurred
  • When you have deleted all of your data

What can you do? You could leave it empty. Or display information to the user. What kind of information would you put here? You want to use this space to communicate the app’s status. Teach new users how to get started or discover new features.

Communicate status to the user

When you use an app, sometimes you may wonder if it is working. This can occur when you run a search and get no results back. Or an error has occurred.

Silver Sneaker Location Search Error

Teach users how to get started

A blank or empty space can be intimidating to first time users. Use the space to teach your users what to do next, you help them to get started using your BMI Setup Guide

Starter Content

Show your users how to create new content with examples. Use starter content to give them an idea on how to fill the space. If you sharing photos, you may put a couple of photos in to demonstrate how that works.

Todo App with Starter Content

Summary

Don’t leave your users guessing what the app is doing. By using empty states, you help your users to get started using your app quickly. Learn how it works and be confident they can get what they want to do done. Refer to Designing Empty Spaces in Complex Applications to learn more.

How to Deal With Developer Burnout

By

On November 30, 2021

In Miscellaneous, Programming

Everyone can feel tired, bored or exhausted from doing work. Why? Too busy. Your tasks are repetitive and unchallenging. Or you deal with people who drain you. You need to focus on things that you can control to help deal with developer burnout.

How to deal with burnout

Here’s a list of things to try:

  1. Take a day off and do nothing. Relax, sleep or go somewhere different.
  2. Change your sleep routine. It may need a bit of tweaking. You may need to change your nightly routine.
  3. Break a habit or pattern. Take a different route to work. Eat at a new place for lunch.
  4. Drink water. Stay hydrated during the day.
  5. Spend time in nature. Go for a walk in a garden or a park.
  6. Take regular breaks during the day. Get up walk around or stretch.
  7. Do something creative. Write. Photograph. Or make something not related to work.
  8. Move your body. Talk a walk. Do yoga or pilates. Anything that gets you to move.
  9. Listen to a new podcast. If you listen to programming podcast, choose one on a different topic. Try out something you don’t normally listen to.
  10. Learn something new. Read a book or watch a video. Try a new programming language or tool.
  11. Say No to additional tasks at work. See if you can arrange to do them at a later date.
  12. Change your coding environment. Use a different text editor. Or go outside and code.

You want to try these things to avoid developer burnout and before deciding to quit your job. Small changes can help. If they don’t, then you can find a new job later.

7 Tips for Improving Your Coding Skills

By

On October 31, 2021

In Productivity, Programming

Whether you are a beginner or experienced programmer, programming keeps changing. You have to keep up with the changes. How do improve your coding skills?

Most people learn by doing. You get better by writing code and sharing what you learn. Or getting involved with the programming community. To keep improving your coding skills, use the following tips:

1. Write code every day

Write code. Experiment with new ideas. Learn how others write code through copy work. It is the process of recreating an existing work as closely as possible. Writers and painters use this technique to improve their skills.

2. Read books

Why read books? Programming books can explore a topic more deeply than an online tutorial. They show you code in detail. You can reread it and gain new insights.

Here are a few to enjoy:

3. Challenge yourself

Do a coding challenge. Practice your skills with a programming quiz, a front-end design challenge or 100 Days of code.

4. Listen to podcasts

You can find podcasts on any topic. Pick from coding to tech news. Find one or more to get tips, tricks or updates on new technology. Don’t know where to start? Try FreeCodeCamp’s list of best tech podcasts for software developers.

5. Take a class

Pick a class to learn more about a programming topic or to pick up a specific skill. Get started with sites like Treehouse or FreeCodeCamp.

6. Share what you know

Write article or tutorials for your own blog or tech website. Present a topic at a meetup or users group.

7. Get involved in open source

Help out by writing code or documentation or testing. Pick a project that you are interested in and find out what you can do. Learn more about getting involved in open source.

More tips to help you code better

Making a JavaScript Quiz

By

On September 30, 2021

In JavaScript, Programming, Web Development

People like to take quizzes for fun. Making a JavaScript quiz can be a fun challenge. Pick a topic, collect questions and build the quiz app. You can write one in any web development language you prefer. I wanted to create one in JavaScript.

What do you need to create a quiz in JavaScript?

  • A quiz topic. I love to eat chocolate. Chocolate is a fun quiz topic. I compiled a list of questions on chocolate.
  • A web app. I chose to build it using HTML, CSS and of course, JavaScript.

Other requirements

I wanted to use FlexBox for the layout. Plus a counter that shows you what question you are on. I included a photo of chocolate as well.

Chocolate Quiz showing first question

Building the app

The structure for a quiz is simple. It should display a question, a list of answers and track the number of questions that you get right. Then, it shows you summary of how well you did at the end. Plus, it should give you the option to try again.

I started with a simple quiz tutorial and modified it. First, I edited the code to include my questions on chocolate. Then, I looked at a quiz example with a timer and modified my code to add question counter.

Finally, I updated the code to include the chocolate photo into the results. It required adding one line of code.

<img src="images/60-seconds-of-love-sr2QGGnzy8k-unsplash-700.jpg" alt="amul chocolate" class="quiz-image" />

I wanted to add a sticky footer to the bottom of the web app. The web page uses FlexBox. I need to modify the layout to create the footer using FlexBox. CSS-Tricks’ FlexBox option fit well with the app design.

CSS Gradients

I wanted to use a gradient for the background. You can either use a CSS gradient generator to create it. Or use one created by designers. Gradient Hunt lets you choose from a selection of pre-made gradients.

What to do differently

A quiz on chocolate needs more photos of it. The design would need to show more chocolate as you move through the quiz. Next, I would like to show chocolate facts with each question. Each question has to have four answers; no true or false. I would change it so I can add true or false questions.

If you like chocolate and want to take a quiz, try out this Chocolate Quiz.

3 Tips for Getting Back Into Your Development Flow

By

On August 31, 2021

In Programming, Web Development

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

Page 6 of 50

Previous

Next

Powered by WordPress & Theme by Anders Norén