Shock by AI​

I have used AI for a while, starting from the GitHub copilot (GPT-3), and I'm using it frequently for my daily like and work. It kind of make me away from using Google to search for information. It's really freezing at the beginning and brought me a lot of surprise with its evolving. But today, it shocked me with its power of creating a whole application.

How AI will affect software development​

It will definitely change the way we develop software. It will make the software development more efficient and more productive. It will also change the way we think about software development.

At the first beginning, I noticed that AI can help with reducing the redundant work like writing the utility functions, or the boilerplate code like unit test case. But today, I found that AI can help with creating the whole application from scratch. It's really shocking.

AI today shows its power of creating a totally new application with creative UX design. 80% of this 3D Solar system visualization was created by AI within a few hours which is unbelievable in the past.

Current issues of using AI for software development​

Even though AI has a great power and is increasing its capability at a rapid pace, there are still some issues that need to be solved.

The cost of using AI is still high.​

All current AI tools that are able to create an application are not free. And the cost is high if the application is crafted with continuous AI assistance.

It shouldn't be a big issue for the long term, as the cost of AI will be reduced as the technology evolves. But for the next issue, I'm not sure if it can be solved in the near future.

The quality of the application created by AI is not guaranteed.​

Even the AI is able to create an application with a good UX design, the code quality is still a big issue. The code created by AI is not well-structured and not with a good architecture design. It's sometimes hard to understand the code created by AI with lots of junk codes, and then it's hard to modify and maintain the code.

Can this issue be fixed in near future? I'm not sure considering the complexity of the software development, especially for the large-scale applications.

Is the bad code really an issue? Probably not. The "bad code" is a subjective opinion from the human perspective, but if the AI can create the whole application by itself, it can also maintain the code by itself. So if it doesn't need human intervention, the bad code might be a good code from the AI perspective.

How AI will affect our daily life​

AI is already affecting our daily life in many ways. It likes a smart assistant that can help us with many things. It can help us with our work, our study, our entertainment, and even our daily life.

What about the future?

Conclusion​

Overview​

It needs some tricks and attentions when creating histogram chart with Echarts, considering the fact that there is no inbuilt histogram chart in Echarts and a bar chart component is needed.

Overview​

It's not easy to create a proper multiple series boxplot chart with decent tooltips in Echarts, and it will be much more complex when combining boxplot chart with outliers. I'm going to tell you how to make that happen and what's the pros and cons of each approach in this article.

Overview​

When using getByRole from react-testing-library to retrieve the component/element content, it should be quite straightforward, but when the component/element is wrapped with the Tooltip component from Material UI, something weird happen: getByRole can only get the content of the tooltip rather than the component/element content. This article is going to explain why such issue happen and how to fix it.

Overview​

Creating a heatmap chart in Echarts typically involves utilizing the series.data property in conjunction with the xAxis.data and yAxis.data properties. However, this method often requires many data manipulation and lacks flexibility. This article sets out to investigate an alternative approach to crafting more adaptable and potent heatmap charts in Echarts with React, a technique not covered in the official documentation.

Overview​

Passing props to components in React is a commonplace practice, yet it differs when passing props to children component. While one approach involves using the cloneElement and/or Children API to manipulate and transform the JSX received as the children prop, this method presents certain pitfalls, and those two APIs are legacy. This article aims to explore alternative, more effective methods to attain the same outcome.

Overview​

It's common to have a header and footer in PDF reports, but making them work properly is not as simple as it may seem. This article presents a practical solution for printing PDF reports with header and footer in the frontend.

Overview​

Generating PDF reports on the frontend, especially when dealing with charts like those from Echarts, can be challenging. Properly handling chart layouts and accommodating various screen sizes adds complexity. This article presents a practical solution for printing PDF reports with Echarts on the frontend.

WebSocket is a new technology coming with HTML5, and the first time I saw it, it confused me with REST API. So in this article, the following questions will be answered.

• What is REST API?
• What is WebSocket?
• What is the connection and difference?

I have done projects with normal CSS, SASS, and also a project with styled components, but haven't done any project with CSS modules.

As I'm going to do a new project, and considering the issues I met in styled components, I'm considering the possibility using CSS modules. So here comes this post.

Things below need to be cleared?​

• What is styled components and why is it?