Curiosita Labs

Thoughts on programming, web development and design.

Circuit Board

Category: Miscellaneous Page 1 of 9

Miscellaneous

Restart Numbered List with CSS

By

On March 17, 2024

In CSS, Miscellaneous, Web Development

Normally, you can renumber an HTML ordered list. You use the attribute “start” to set the value you want to restart the numbers at. What happens when you have a special style that overrides how the numbers are generated?

Restart Number Lists with CSS

Image by Alicja from Pixabay

For example, I use the following CSS style to override how a list looks.

ol.simple-list {
	counter-reset: li-counter;
	list-style-type: none;
	list-style-type: decimal !ie;
	margin: 0;
	margin-left: 3em;
	padding: 0;
}


It creates a list with numbers like this.

Green Numbered List

When I tried to use the start attribute to restart numbering a list, it set all of the numbers to 1. I tried to update the style with newer CSS styling. It didn’t fix the problem. Finally, I found the right way to make this work. The attribute “counter-increment” lets you reset the counter. You have to pick a number one less than what you want to start at.

.simple-list-counter-9 {
	counter-increment: li-counter 9;
}

By doing this, you can restart your list at the desired number. With the above style the new list starts at 10 instead of 1. This works if all your lists end at number 9. If you want to restart at a different style, I suggest using an in-line style instead of adding it to your CSS file.

JavaScript Debugging Tips

By

On April 30, 2023

In Miscellaneous

Debugging code is a challenging task. When your code doesn’t work, it can be challenge to find the cause of the problem. You may do things like comment out the code or make a small change to see if that fixes the issue. What do you do when these tricks don’t help you find the bug?

JavaScript Debugging Tips

Photo by Mitchell Dunn from Burst

If you are like many JavaScript developers, you start with console.log to find the problems in your code.

When to use console.log()

Console.log() is simple and easy to use debugging tool. You can have it display a message so you know that the code worked. Or you can use variables and expressions to determine if you are getting the right values.

When to use debugger

What do you do if the problem is hard to find? You can use a debugging tool. A debugging tool is a software tool that helps you identify coding errors. You can step through your code line by line to see how it is working. You can stop executing the code at certain points. It can help you to read error messages and handle exceptions.

Your browser has powerful debugging tools include the console.log. Each browser is a bit different on the development tools that it offers. Learn more about the basic functions of your browser’s development tools.

Tips for debugging JavaScript

  1. Start with the console.log(). You can always switch to using other debugging methods if the console.log doesn’t work for you.
  2. Read the error message. Error messages may include helpful details. Like the line number where the error occurred, type of error and a brief description.
  3. Use Breakpoints. Breakpoints allow you to pause your code at a specific line. You can step through your code line by line and see how it is working.
  4. Add the debugger statement in your code. It acts like a breakpoint in your code. When the code reaches this point, it pauses at debugger. If no debugger functionality is available, your browser ignores this statement.
  5. Handle Exceptions. Exceptions are errors that when your code is executing. They can occur when you have syntax, logic or runtime errors. Make sure you are handling exceptions. Exceptions can help you to identify and resolve issues in your code.

Debugging like coding takes practice. Use this tips to help you get better at finding issues in your code. If you still can’t find it, take a break. Walking away from the problem sometime help. So can talking to others also helps.

Read more on debugging

7 Tips for Commenting Your Code

By

On March 31, 2023

In Miscellaneous

Your code doesn’t need to be commented. Or does it? Clear code needs to be easy to read. You may not be the only one who has to maintain this code. Write comments so the future person who updates this code can understand why you did things. Remember that person may be you.

7 Tips for Commenting Your Code

Image by Gerd Altmann from Pixabay

Use these tips for commenting your code for the better.

1. Comments should be meaningful

They shouldn’t duplicate the code. Comments should compliment your code. You write to explain why the code works this way.

2. Add comments when fixing bugs

It helps you to understand what changed and why. Include references to issue numbers to provide further information. Anything else that you used to help solve the problem.

Everyone codes code they found on the internet. It helps to add links in the comments so you remember where you got the code from. Add who wrote it and what problem it fixes.

4. Sometimes your code isn’t finished

Use comments to remind everyone that there are limitations to this piece of code. Add TODO to remember what you need to finish.

“You should first strive to make your code as simple as possible to understand and without relying on comments as a crutch. Only at the point where code cannot be made easier to understand should you begin to add comments.”

-Jeff Atwood, Code tells you how, comments tell you why

5. Comments should explain why you did something

If your comments are confusing, remove the comment. Keep comments that are clear and easy to understand.

6. Keep your comments brief

Comments can take time to read. You want to make them as short as possible.

7. Remember to update your comments

As you change your code, your comments may need updating to reflect changes.

Comments can’t fix or excuse bad code. They should compliment it. Commenting your code should help you understand why you chose to do something.

For getting better at writing comments, read Best practices for writing code comments.

Anything else that you used to help solve the problem.

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.

Creating a simple weather app with Open Weather API

By

On January 29, 2021

In JavaScript, Miscellaneous, Programming, Web Development

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.

Page 1 of 9

Next

Powered by WordPress & Theme by Anders Norén