Software Technology Blog

Welcome to the Software Technology Blog, the knowledge articles page for React, JavaScript, and technical skills. Whether you're looking for technical information about monorepo, state management tips for zustand, or want to improve your understanding of front-end development, there's a wealth of resources here. Each article is carefully crafted to provide clear, easy-to-understand content to help you find the information you need quickly. From basic concepts to advanced tips, there's something for everyone, whether you're a beginner or an advanced developer.If you are interested in graphic content, you can also refer to our Instagram.

system-design-System Design 12-CDN-Basic Concept and Design-how-cdn-work-hogantech
Technical Article
Hogan

CDN Basic Concept and Design – System Design 12

CDN is a group of proxy servers (Proxy Server) placed based on geographical location. Among them, the proxy server is an intermediate server between the client and the server, and the proxy server will also be placed at the network edge (Network Edge). Also because the edge of the network is close to the end user, the placement of the proxy server helps to quickly transmit the corresponding data to the user by reducing delays and saving bandwidth. In addition to serving as simple proxy servers, CDNs can also make them more efficient through some settings and operations.

Read More »
0710 Anthropic
Technology Innovation Column
Roxanne

Anthropic: The driving force behind Claude 3.5, the most powerful rival of GPT-4, how to create a more "compliant" AI large-scale language model?

With a large amount of technology industry funds flowing into the AI field, by understanding the fundraising status and concepts behind various AI startups, we can also have a clearer understanding of future artificial intelligence trends.
Taking the creation of generative AI and large-scale language models as an example, OpenAI is not the only one that excels. It is backed by huge investments from technology giants Amazon and Google. Anthropic has undoubtedly become the most high-profile unicorn this year after OpenAI.

What kind of company is Anthropic? Why did the founders separate from OpenAI? What is the difference between the strategic positions of the two companies?

Today I’m going to share the Anthropic story with you!

Read More »
zapier 5
Technology Innovation Column
Roxanne

Zapier: How did the automation king with a valuation of 5 billion gain more than 600,000 users in 3 years?

In this era where everyone has powerful tools at their fingertips, various AI and productivity tools are scrambling to help us save more time. However, each tool has different usage scenarios and advantages, and it often takes a lot of time to integrate software with different properties into the workflow. The emergence of Zapier is to solve this problem that will inevitably arise as the division of labor becomes more and more detailed and the types of tools become more and more diverse.

Read More »
ScaleAI
Technology Innovation Column
Roxanne

Decrypting Scale AI: The "worker" wisdom behind artificial intelligence? Information: The secret behind the unicorn’s valuation of US$7.3 billion in 8 years

He dropped out of school to establish Scale AI when he was 19 years old. Alexandr said that Scale AI provides data labeling services, which is like selling shovels in this generative AI gold rush (does this description sound familiar😆).

While many AI startups have yet to make a dime, Scale AI’s revenue last year reached US$250 million and its valuation reached US$7.3 billion. Its customers range from OpenAI and Tesla to the US Air Force, Army, CIA, etc. field.

So what exactly are data tags? Why can it be so profitable? How did Scale AI find its niche market in the highly competitive AI field and successfully grow into a unicorn?

Today I’m going to share the story of Scale AI with you!

Read More »
naughtyghost-naughtyghost-invisible laptop stand
Review
Roxanne

Naughty Life Invisible Laptop Stand: A savior for engineers with sore shoulders and necks

As a software engineer and graduate student, my work and report processing are basically inseparable from computers. If you need to change your work location, such as at home, office, client, etc., the biggest problem with such frequent moves is: you want to have a comfortable working environment anytime, anywhere, and when you are away from home!
You may be able to design a comfortable workspace to use a laptop at home, but if you are working and reporting outside, you really have to rely on the help of a laptop stand.
However, the laptop stands on the market are usually quite bulky and bulky. In order not to increase the weight, most of the time I would rather go out with just my laptop. The result is that you have to work with your head down for a long time, your shoulders and neck will be sore, and your efficiency will be greatly reduced.

Read More »
system-design-system design 10-data copy-data-partitioning-introductoin-to-database-fundamentals-hogantech
Technical Article
Hogan

Data Partitioning What is data partitioning? – System Design 10

Data Partitioning is the process of dividing data in a database into smaller, more manageable sub-blocks. These sub-blocks are called partitions. Data segmentation can be based on a variety of factors, such as time, customer ID, or product category. Why do we need to partition data? For any system that does not scale, the amount of data will continue to grow, and the read and write traffic to the database will continue to increase.

Read More »
system-design-system design 09-data replication-data-replication-introductoin-to-database-fundamentals-hogantech-hoganblab
Technical Article
Hogan

How does Data Replication optimize the database? - System Design 09

Data Replication is an effective method to solve bottlenecks and improve the performance, scalability and availability of the database by replicating data on multiple nodes. This article will introduce the three main models of data replication: master-slave replication (Single-leader replication), multi-leader replication (Multi-leader replication) and point-to-point replication (Leaderless replication), and analyze their advantages and disadvantages.

Read More »
NVIDIA-STORY
Review
Roxanne

Decrypting NVIDIA: 6 key points to help you understand the secret of the AI king’s stock price soaring 240% (Part 1)

In 2023, which has been hailed as the "first year of generative AI", technology giants have successively launched AI weapons, such as Microsoft Copilot, Bing, AWS BedRock..., and even Elon Musk has announced the super brain for building Tesla electric cars: Dojo supercomputer, AI A new game has opened for technology giants.
As the saying goes, during the war, the most profitable people were the arms dealers; during the gold rush, the most profitable people were the shovel sellers.
This is the current NVIDIA Huida existence.

Read More »
system-design-System Design 08-Introduction to Database Fundamentals-introductoin-to-database-fundamentals-hogantech-hoganblab
Technical Article
Hogan

Introduction to database basics – system design 08

What is a database? A database is an organized collection of structured information or data, usually stored electronically in a computer system. Databases are usually controlled by a database management system (DBMS). The data and DBMS together with its associated applications are called a database system, often referred to simply as a database.
Data in the most common types of databases running today are typically modeled as rows and columns in a series of tables to increase the efficiency of processing and querying of the data. Data can then be easily accessed, managed, modified, updated, controlled and organized. Most databases use Structured Query Language (SQL) to write and query data.

Read More »
appier 0
Review
Roxanne

Taiwan’s first AI unicorn: What is Appier, with a market value of US$1.38 billion, doing?

Do you know who Taiwan’s first new unicorn is? (Definition of unicorn: a technology company that has been established for less than 10 years but has a valuation of more than US$1 billion and has not yet been listed on the stock market)
From its establishment in June 2012 to its listing in 2021, Appier Peixing Interactive Technology only took 8 years and 9 months to become Taiwan's first AI unicorn company invested by Sequoia Capital. Compared with technology giants Google, which took 6 years, Facebook, which took 8 years, and Uber, which took 10 years, Appier achieved IPO achievement in a very short time.

Read More »
concept startup insight
Review
Roxanne

Deciphering Notion’s entrepreneurial story: How can a small No-code idea subvert the global 60 billion productivity market?

As a planning geek, I have used various productivity software, such as Evernote, Obsidian, etc., but I finally returned to Notion. After all, Notion's operation is really the most intuitive and the interface is the most beautiful. After moving your life to Notion, because you can completely customize it according to your own habits, it really feels like growing a second brain.

During the process of using it, I couldn’t help but wonder, where did the idea of Notion, a “life hacker” come from? What is the interesting entrepreneurial story behind Notion?

So I deeply understood the background of the founder and Notion’s unique competitive advantages. Today I will share the founding story of this legendary company, product features, and how Notion gained a foothold in the productivity market!

Read More »
system-design-system design 07-system design components-what-is-load-balancer-hogantech-hoganblab
Technical Article
Hogan

Load Balancer Explained – System Design 07

What is a Load Balancer? The load balancer mainly distributes all user requests to the corresponding servers based on the current server load. The advantage of this is to avoid server overload or crash. However, you can also think about it here. If the traffic of the current system is not high, about only a few thousand requests per second, then a load balancer may not be needed. After all, the more complex a system is, the more things need to be considered.

Read More »
system-design-system design 06-system design components-what-is-dns-hogantech-hoganblab
Technical Article
Hogan

What is DNS? Introduction to Domain Name System – System Design 06

What is DNS? The Domain Name System (DNS) maps human-readable domain names to machine-readable IP addresses. For example, the corresponding IP for google.com is 142.250.191.78. When a user enters a domain name into the browser, the browser must convert the domain name into an IP address through DNS. Once the required IP address is obtained, the user's request is forwarded to the target server.

Read More »
system-design-system design05-system design components-building-block-hogantech
Technical Article
Hogan

Introduction to System Design Components Building Block – System Design 05

System components are the basic building blocks of system design. They can be combined to construct complex software systems. Here we will also review the basic concepts of system design. System design is an important link in software engineering, which involves the overall architecture and design of the software system. A good system design can make software systems more reliable, scalable and easy to maintain.

Of course, if you want to use these components to design a system, you must first understand what design components there are? What does each design element represent? This article will introduce each system component, and the following chapters will explain the details and applications of each component in detail.

Read More »
system-design-system design04-back-cover calculation-back-of-the-envelope-hogantech-hoganblab
Technical Article
Hogan

Back-of-the-envelope Back-of-the-envelope Calculation – System Design 04

Back-of-the-envelope, also known as back-of-the-envelope calculation, is a method of calculating approximate values of complex problems using simple estimates.

Let’s also review here. A decentralized system consists of computing nodes connected through a network. These nodes can be various types of servers, such as web servers, application servers, and storage servers.

When designing a decentralized system, it is important to understand the number of requests each node can handle. At the same time, we can also determine the required number of nodes and traffic, so we will use Back-of-the-envelope to calculate our rough estimate, and finally design the system we need.

Read More »
system-design-system design 03-software design non-functional features-hogantech-hoganblab
Technical Article
Hogan

Non-functional features of software design – System Design 03

In modern information technology, system availability (Availability), reliability (Reliability), scalability (Scalability), maintainability (Maintainability) and fault tolerance (Fault Tolerance) are very important non-functional characteristics. These characteristics It not only affects the performance and efficiency of the software system, but also directly affects the user experience. This article will also provide an in-depth explanation of the above five characteristics.

Read More »
system-design-system design-application of abstraction in system design-hogantech-hoganblab
Technical Article
Hogan

Application of abstraction in system design – System Design 02

What is abstract? Abstract concepts can help us hide some irrelevant details during system design, allowing us to focus on the overall architecture. It is important to break away from details, because abstraction can hide the complexity within the system design, allowing us to focus more on the results of the system design.

Read More »
React11-React-Hook-useState
Javascript
Hogan

React Hook useState – React Vernacular Campaign 11

useState is a React hook for adding state to functions. useState allows us to define and manage state data within a function. useState returns an array of two values, including: the current state: when the function is first rendered, its value will be equal to the initial value we passed to useState. The current state: when the component is first rendered, its value will be equal to the initial value we passed to useState.

Read More »
system-design-system design-system design introduction-hogantech-hoganblab
Technical Article
Hogan

Introduction to Modern System Design - System Design 01

System design is the process of defining various system components, APIs, data models, and integrating the system to accomplish a large-scale system with certain functional requirements. Taking a video broadcasting platform like Youtube as an example, we not only need to consider how to efficiently store and transfer large amounts of video data, but also how to support high concurrency user requirements and how to ensure the stability and scalability of the system.

Read More »
Web-beacon-web-beacon
Technical Article
Hogan

What are Web Beacons? What you need to know about tools other than cookies

Web beacons are a product of the late 20th century and the rise of the Internet, appearing in the late 1990s. As more and more people began using the Internet, businesses needed a mechanism to collect, understand, and apply user data on a large scale. web beacons can work with cookies to gain insight into user behavior and track multiple sites.

Read More »
React10-React-Life-Cycle
React Vernacular Campaign
Hogan

React Lifecycle - React Vernacular Campaign 10

React Lifecycle - The previous post took the React syntax a step further, React JSX - React Vernacular Campaign 06 learned how to build a React component, and learned about the parent-child relationship between components. In this post, we'll talk about the component lifecycle, including the three stages of the lifecycle, the lifecycle of class objects, and the lifecycle of function objects.

Read More »
logo00-Dcard-hogantech
Review
Hogan

Dcard 12th Anniversary Surprise Origin

This year, Dcard invites all graduation partners to join the Dcard 12th Anniversary - Surprise Originals event. We would like to use Dcard as a platform to share this event with you, including the office, event photos, food... and more!

Read More »
React Props - React 白話文運動 09
React Vernacular Campaign
Hogan

React Props - React Vernacular Campaign 09

React Props - the React vernacular movement. This post will take a closer look at the React syntax. In the previous posts, we learned how to create a React component, and we learned that components have a parent-child relationship. This post introduces the concept of React Props, including: React component declaration, React Props.

Read More »
React08-Building a React Project
React Vernacular Campaign
Hogan

Building a React Project - React Vernacular Campaign 08

Building a React Project - React Vernacular Campaign: The previous post introduced three terms, namely: what is Babel, what is Webpack, and what is Npm? This article will build a React project by hand, including: setting up the environment, building a React project, starting the project, and how to use React extensions. It also includes: official CRA build environment and self-built environment.

Read More »
Babel & Webpack & NPM - React Whitepaper Campaign 07
React Vernacular Campaign
Hogan

Babel & Webpack & NPM - React Whitepaper Campaign 07

This post will explain three terms that are needed to build a React project: what is Babel, what is Webpack, and what is Npm. Of course, the main focus is on the concept of using these tools, but there are other tools to choose from, such as Npm and Yarn.

Read More »
React06-React-JSX
React Vernacular Campaign
Hogan

React JSX - React Vernacular Campaign 06

React is one of the most popular JavaScript packages for web and mobile front-end development, developed by Meta to enable developers to create reusable components to complete front-end pages, and JSX is one of the more common ways to write React, so we're going to talk about what JSX is, its syntax, and how to use JSX to build React. components.

Read More »
How React works
React Vernacular Campaign
Hogan

How React Works - The React Vernacular Campaign 05

React is one of the most popular JavaScript packages for developing web and mobile front-ends, developed by Meta (formerly Facebook) to enable developers to create reusable components to complete front-end pages.

However, it's important to note that React is not technically a framework. That's because it's only responsible for presenting the components of the UI. However, React provides an alternative solution to frameworks such as Angular and Vue, allowing us to work with it on complex front-end page functionality.

Read More »
2023 Yahoo! Software Engineer Software Engineer Interview
Review
Hogan

2023 Yahoo! Software Engineer Software Engineer Interview

Yahoo! Software Engineer interview, favoring front-end software engineers, in addition to front-end development, but also need to touch the back-end development and project management. At that time, when I saw the vacancy information from LinkedIn, I asked my friend to push me, and through my friend, I generally understood that this position is a multinational team, and the daily meetings also need to use English, and there may be time difference.

Read More »
Cheng Kung University Electrical Transfer Exam
Review
Hogan

107 NCKU EE|NCKU ME|NCCU AM Transfer Exam

This post was actually written in 2018, and now in 2023, I've relocated the article to my blog, and I've successfully graduated from Chengdu University of Electrical and Mechanical Engineering. I'm thankful that I was young enough to grit my teeth and face the transfer exams, which are seriously the toughest time of my life right now. Lastly, I hope this article will be helpful to anyone who is preparing for the transfer exams!

Read More »
Javascript Higher Order Function - HigherOrderFunction
Javascript
Hogan

JavaScript Higher-Order Function - React Vernacular Campaign 04

This article introduces the very important concept of JavaScript functions - higher-order functions, which are functions that take one or more functions as parameters or return a function as a result. In this article, we will explore in depth what is a higher-order function, the benefits of using higher-order functions and how to use higher-order functions in real-world applications, what is the function orientation? Pure Functions, Higher Order Functions, Correlation.

Read More »
React03-Javascript-Async-Await
Javascript
Hogan

JavaScript Async & Await - React Vernacular Campaign 03

Welcome to the third installment of the React Vernacular Campaign series, where we're going to dive deeper into asynchronous operations in JavaScript and introduce two important keywords: Async and Await. In this post, we'll demonstrate the concepts of asynchronous operations through real-world examples, as well as how you can use Promise, Fetch, Async, and Await to handle asynchronous code more In this article, we will demonstrate the concept of asynchronous operations and how to use Promise, Fetch, Async, and Await to handle asynchronous code more effectively.

Read More »
react-vernacular-campaign-02 JavaScript ES6 Object
Javascript
Hogan

JavaScript ES6 Object - React Vernacular Campaign 02

In the previous post, we introduced let, const, var difference, template literal, and arrow function. This article will introduce other new syntax of JavaScript ES6, such as: Object Decomposition, Object Syntax Enhancement, Array Decomposition, and Extension Operator. We hope that through the above contents, it can help you learn React front-end framework more easily.

Read More »
react-vernacular-campaign-01 JavaScript ES6
Javascript
Hogan

JavaScript ES6 – React Vernacular Campaign 01

Before we get into the React front-end framework, let's refresh our readers' knowledge about JavaScript. This post focuses on the history of JavaScript, the difference between let & const & var, Template Literals, and Arrow Functions, a very important precursor to JavaScript ES6.

Read More »
zustand
Technical Article
Hogan

What is Zustand? React Front End State Management

Whether using Redux or Context to handle state management, Zustand is more complicated than Zustand, and for engineers who join the project later, it will take time to understand. The main goal of Zustand is to make front-end state management relatively simple and easy to understand, which makes Zustand the choice of some companies.

Read More »
nx-monorepo
Technical Article
Hogan

Why do big companies use Nx ? Monorepo Tool 5 Minute Quick Build

Nx shares the same design philosophy as the well-known program editor VS Code, and can produce quite well in VSCode, even without downloading any extensions.
The same goes for Nx. The Nx kernel is simple, uncluttered, and clear. And with the Nx plugin, you can choose from a variety of options for different projects.

Read More »
monorepo
Technical Article
Hogan

Do you really know Monorepo? 5 minutes to learn about front-end mega-architecture.

Monorepo is a framework for centralized management of large amounts of code, which is different from traditional discrete projects. The core idea is to manage all front-end related code in a single repository. The advantages of this architecture are increased code reusability, increased code transparency, ensuring that all packages use the same version, and standardized code styles.

Read More »
en_USEnglish