開源日報 每天推薦一個 GitHub 優質開源項目和一篇精選英文科技或編程文章原文,堅持閱讀《開源日報》,保持每日學習的好習慣。
今日推薦開源項目:《簡易版本 project-x》
今日推薦英文原文:《A Framework for Overcoming Tough Bugs Without Pulling Your Hair Out》
開源日報第628期:《簡易版本 project-x》
今日推薦開源項目:《簡易版本 project-x》傳送門:GitHub鏈接
推薦理由:React 和 Vue 這樣的流行框架上都有在組件內保存數據後根據數據操作的功能,畢竟這玩意可是相當好用的。這個項目把流行框架上的這些功能借了過來,在你只需要這些而不需要更多功能的時候可以使用。語法方面使用了 Vue 里常見的 bind 等,而功能則包括常見的數據保存,屬性設定和事件監聽等這方面常用的功能,雖然是直接在 html 里使用的語法,太過於複雜會損失易讀性,但是在一些小項目里不需要殺雞用牛刀的時候可以嘗試。
今日推薦英文原文:《A Framework for Overcoming Tough Bugs Without Pulling Your Hair Out》作者:Chris Geelhoed

A Framework for Overcoming Tough Bugs Without Pulling Your Hair Out

8 tips for breaking through roadblocks as a programmer

Programming is hard. The ability to translate an idea into code isn』t something that comes naturally to most people, and sometimes we get stuck.

Even after coding for years, you will still hit roadblocks regularly. Computer programming is an incredibly deep field, and it just isn』t possible to master everything about it.

Plus, we all have bad days sometimes.

Maybe you can』t fix a stubborn JavaScript error, or you can』t explain why your website looks completely broken in Internet Explorer, or maybe you can』t even start your development server.

Software can break in an almost unlimited number of ways, and it often does. Murphy』s law.

Setbacks in coding can』t be avoided, but they can be handled gracefully. Here are eight tips that will help you debug your code as painlessly as possible:
  • Take care of yourself first.
  • Use the tools that are available to you.
  • Speed up your debugging cycle.
  • Ask for help.
  • Look at the obvious stuff first.
  • Read your error messages.
  • Think about what changed last.
  • Take time to reflect on what you』ve learned before moving on.

1. Take Care of Yourself First

Even if you spend most of your day looking at a computer screen, you are still a human being, and it』s difficult to think clearly when you』re tired, hungry, or otherwise uncomfortable.

Try to keep tabs on yourself when you are coding. If you suddenly find that you are hitting a wall, think about what might be off. Have you gone without a break for a long period of time? Are you in an environment that makes it hard to concentrate? Did that third cup of coffee give you the jitters?

Pay attention to yourself and look for patterns like these. Small details could have a surprisingly large impact on your productivity.

2. Use the Tools That Are Available to You

Software development has come a long way since the rise of the internet and good tools now exist to make debugging easier.

Take the time to learn about the tools available in your arena. If your focus is on front-end web development, then learn how to use your browser』s built-in development tools. If you write PHP, learn about Xdebug and how breakpoints can be used in your IDE.

Whatever kind of programming you do, explore your ecosystem and try to learn how experts in your area debug their code. This kind of research is sometimes hard to justify when you have deadlines to meet, but it』s an investment in time that will pay itself back tenfold.

3. Speed Up Your Debugging Cycle

Classic programming is essentially a guess-and-check process. Your write some code then check the result. If it works, you move forward. If not, you are now debugging.

The time between writing code and seeing its result should be as short as possible. A quick feedback cycle allows you to iterate quickly and maintain your train of thought.

Do whatever you can to speed up this process. For example, if you are debugging a component that appears at the very bottom of a long page and find yourself scrolling down to it again and again to test your code, move that component to the top temporarily.

If you are writing CSS or JavaScript then take the time to set up hot reloading so that you don』t need to make a hard reload every time you change your code.

Whatever you are doing, try to notice the little steps that you are repeating and think about how they can be eliminated.

4. Ask for Help

Sometimes, you look at something for so long that you get lost in the weeds and lose sight of the bigger picture. This is called tunnel vision, and it is a problem for junior and senior engineers alike.

Instead of spending hours stressing over a problem alone, invite a colleague to look at it with you. It』s amazing what perspective an outside set of eyes can bring to the table.

We all want to be super-devs that can solve every problem alone but this isn』t a realistic goal or expectation.

A better approach is to collaborate with your team and leverage the experience of the people around you. You might be struggling with a problem that the person sitting next to you solved last week.

5. Look at the Obvious Stuff First

Most of the bugs that you encounter as a developer will be obvious, but only in hindsight.

Be self-aware as you explore solutions. Are you making assumptions without verifying them? Are you going down a rabbit hole that could be totally unrelated to your bug?

It』s a good idea to check off the little things first. Some good questions to ask yourself are:
  • Did I forget to save?
  • Is the code I』m editing even being loaded? If I print 「hello world」 at the top of my script do I see the output?
  • Did I forget to require that module?
  • Did I forget to call that function?
  • Did I forget to return that value?
  • Are things spelled correctly?
I can』t count the number of times I』ve pulled my hair out over a problem that ultimately came down to a simple spelling mistake.

6. Read Your Error Messages

Error messages can be intimidating when you first start coding, but they give you extremely valuable information. Take the time to read them carefully and give yourself a minute to digest them.

If the message gives you the line in the script where the error was thrown, give that line a closer look.

If the message gives you an error code without further explanation, try googling that error code — you might be able to find additional info.

Error messages can look like gibberish at first glance, but they are often the best way of understanding what went wrong. As you gain experience as a developer, they will make more and more sense to you.

7. Think About What Changed Last

This sounds a lot like the 「Retrace your last steps」 advice that your mom gave you when you lost something as a kid, but it’s important nonetheless.

When your code is working fine one day and suddenly breaks without explanation, you should look for what changed.

Did you upgrade your version of Node.js? Or maybe you switched from Vagrant to Docker. Things that changed recently are much more likely to cause issues than things that have already been working for a long time.

If you are fortunate enough to have the history of the project captured with a version control system like Git, then it might be worthwhile to check out the code from previous commits and see if those versions have the bug you are dealing with.

8. Take Time to Reflect Before Moving On

Fixing a bug comes as such a relief that it』s tempting to just forget about it and move on to the next task, but this is a big mistake!

Take a moment to enjoy your success, but then reflect on the problem that you just solved.

Do you understand how the bug was created in the first place, and how it was fixed? If the answer is no then you might want to dig a little deeper before moving on.

If the bug tripped you up for hours or days, it might even be worthwhile to document it somewhere — either publicly or in your own personal notes.

Write about what the bug was, how you fixed it, and what you learned. Doing this will put you in a much better position to quickly identify and fix similar bugs in the future.


Stubborn bugs are probably the worst part of programming. They aggravate us, waste our time, and sometimes make us feel like imposters.

When you find yourself in a battle with a bug, take a moment to acknowledge that this happens to everyone and then think back to the tips mentioned in this article.

They won』t give you the answer, but they will give you a solid foundation to work from and a good place to start.