软体技术部落格

欢迎来到软体技术部落格,这里是 React、JavaScript 及技术技能的知识文章页面。无论是在寻找关于monorepo 的技术、zustand 的状态管理技巧,还是希望加强对前端开发的理解,这里都有丰富的资源。每篇文章都精心撰写,旨在提供清晰、易于理解的内容,帮助大家快速找到所需资讯。从基本概念到进阶技巧,无论是初学或是进阶,这里都有适合大家的内容。如果对于图文式内容有兴趣,也可以参考我们 Instagram

notion startup insight
科技新创专栏
Roxanne

解密Notion 创业故事: 一个No code 的小创意,如何颠覆全球600亿生产力市场?

身为规划狂J 人,用过各种生产力软体,如Evernote, Obsidian 等,但最后还是回归Notion 的怀抱,毕竟Notion 的操作真的最直观、介面最美观。把生活搬上Notion 后,因为可以根据自己的习惯全然客制化,真的有长出第二个大脑的感受。

使用的过程我也不禁好奇,Notion 这个「生活黑客」的点子到底是什么被想出来的? Notion 这间公司背后有什么有趣的创业故事?

于是我深入了解创办人的背景、Notion 独特的竞争优势,今天就来分享这间传奇公司的创办故事、产品特色、和Notion 如何在生产力市场站稳脚跟吧!

进一步了解 »
system-design-系统设计07-系统设计元件-what-is-load-balancer-hogantech-hoganblab
技术文章
Hogan

负载平衡器解说– 系统设计07

负载平衡器(Load Balancer)是什么?负载平衡器主要是将所有用户端的请求,根据当前伺服器负载的情况,进行分配到对应的伺服器。这样的好处是避免伺服器过载或是崩溃。不过这边也可以思考一下,如果当前系统的流量不高,大约只有每秒几千个请求,则可能不太需要负载平衡器,毕竟一个系统越复杂,则需要考虑的事情越多。

进一步了解 »
system-design-系统设计06-系统设计元件-what-is-dns-hogantech-hoganblab
技术文章
Hogan

DNS 是什么?网域名称系统介绍– 系统设计06

什么是DNS?网域名称系统(DNS) 会将可以阅读的网域名称对应到机器可读的IP 位址,例如:google.com 对应的IP为142.250.191.78 。当使用者在浏览器中输入网域名称时,浏览器必须透过DNS 将网域名称转换为IP 位址。一旦获得所需的IP 位址,使用者的请求就会转送到目标伺服器。

进一步了解 »
system-design-系统设计05-系统设计元件-building-block-hogantech
技术文章
Hogan

系统设计元件介绍Building Block – 系统设计05

系统元件是系统设计的基本模组块,它们可以被组合起来,用来建构出复杂的软体系统。这边也来复习一下系统设计基本概念,系统设计是软体工程中的一个重要环节,它涉及到软体系统的整体架构和设计。一个好的系统设计可以使软体系统更加可靠、可扩展和易于维护。

当然如果要使用这些元件去设计系统,势必需先了解到底有哪些设计元件?每个设计元件代表的意义又是什么?这一篇文章会简介每一个系统元件,后面的篇章则是会详细讲解每一个元件的细节以及应用。

进一步了解 »
system-design-系统设计04-封底计算-back-of-the-envelope-hogantech-hoganblab
技术文章
Hogan

Back-of-the-envelope 封底计算– 系统设计04

Back-of-the-envelope 又称为封底计算,是用简单估算来计算复杂问题的近似值的方法。

这边也复习一下,分散式系统由透过网路连接的运算节点组成。这些节点可以是各种类型的伺服器,例如网页伺服器、应用程式伺服器和储存伺服器。

在设计分散式系统时,了解每个节点可以处理的请求数量非常重要。同时我们也可以确定所需的节点数量以及流量,因此我们会使用Back-of-the-envelope 来去计算我们的粗估值,最终来设计我们所需的系统。

进一步了解 »
system-design-系统设计03-软体设计非功能性特性-hogantech-hoganblab
技术文章
Hogan

软体设计非功能性特性– 系统设计03

在现代资讯科技中,系统的可用性(Availability)、可靠性(Reliability)、可扩展性(Scalability)、可维护性(Maintainability)以及容错性(Fault Tolerance)是非常重要的非功能性特性,这些特性不仅影响了软体系统的性能、效率,也会直接影响使用者体验。这一篇文章也会针对上述五个特性去做深入讲解。

进一步了解 »
system-design-系统设计-抽象在系统设计中的应用-hogantech-hoganblab
技术文章
Hogan

抽象在系统设计中的应用– 系统设计02

什么是抽象(abstract)?抽象的概念,可以帮助我们在系统设计时,隐藏一些无关紧要的细节,让我们能够专注于整体架构。脱离细节是一件很重要的事情,因为抽象可以隐藏了系统设计内部的复杂性,从而让我们更专注于,系统设计的结果。

进一步了解 »
React11-React-Hook-useState
Javascript
Hogan

React Hook useState – React 白话运动 11

useState 允许我们在函数中定义和管理状态数据。useState 返回一个包含两个值的数组,其中包括:当前状态:当函数首次呈现时,其值将等于我们传递给 useState 的初始值。当前状态:当组件首次呈现时,其值将等于我们传递给 useState 的初始值。

进一步了解 »
系统设计-系统设计-系统设计介绍-Hogantech-Hoganblab
技术文章
Hogan

现代系统设计入门 - 系统设计 01

系统设计是定义各种系统组件、应用程序接口(API)、数据模型,并对系统进行整合,以完成一个具有一定功能要求的大型系统的过程。以 Youtube 这样的视频播放平台为例,我们不仅要考虑如何高效地存储和传输大量视频数据,还要考虑如何支持高并发的用户需求,以及如何确保系统的稳定性和可扩展性。

进一步了解 »
网络信标-网络信标
技术文章
Hogan

什么是网络信标?您需要了解的 Cookie 以外的工具

网络信标是 20 世纪末互联网兴起的产物,出现于 20 世纪 90 年代末。随着越来越多的人开始使用互联网,企业需要一种机制来大规模收集、了解和应用用户数据。网络信标可与 cookie 配合使用,以深入了解用户行为并跟踪多个网站。

进一步了解 »
React10-React-Life-Cycle
React 白话文运动
Hogan

React 生命周期 – React 白话运动 10

React 生命周期 - 上一篇文章进一步介绍了 React 语法,React JSX - React Vernacular Campaign 06 学习了如何构建 React 组件,并了解了组件之间的父子关系。在这篇文章中,我们将讨论组件的生命周期,包括生命周期的三个阶段、类对象的生命周期和函数对象的生命周期。

进一步了解 »
logo00-Dcard-hogantech
心得
Hogan

Dcard 12 周年惊喜起源

今年,Dcard 邀请所有毕业伙伴参加 Dcard 12 周年--惊喜原创活动。我们希望以 Dcard 为平台,与大家分享这次活动,包括办公室、活动照片、美食......等等!

进一步了解 »
React Props - React 09
React 白话文运动
Hogan

React Props - React 09

React Props - React 白话运动。本篇文章将详细介绍 React 语法。在之前的文章中,我们学习了如何创建 React 组件,并了解到组件具有父子关系。本篇文章将介绍 React Props 的概念,包括React 组件声明、React Props。

进一步了解 »
React08 - 构建 React 项目
React 白话文运动
Hogan

构建 React 项目 - React Vernacular 活动 08

构建 React 项目 - React Vernacular 活动:上一篇文章介绍了三个术语,即:什么是 Babel、什么是 Webpack 和什么是 Npm?本文将手工构建一个 React 项目,包括:设置环境、构建 React 项目、启动项目以及如何使用 React 扩展。还包括:CRA 官方构建环境和自建环境。

进一步了解 »
Babel & Webpack & NPM - React 07
React 白话文运动
Hogan

Babel & Webpack & NPM - React 07

本篇文章将解释构建 React 项目所需的三个术语:什么是 Babel、什么是 Webpack 和什么是 Npm。当然,我们主要关注的是使用这些工具的概念,但还有其他工具可供选择,如 Npm 和 Yarn。

进一步了解 »
React06-React-JSX
React 白话文运动
Hogan

React JSX – React 06

React 是用于 Web 和移动前端开发的最流行的 JavaScript 包之一,由 Meta 开发,目的是让开发人员能够创建可重用的组件来完成前端页面,而 JSX 是 React 较常见的编写方式之一,因此我们将讨论什么是 JSX、它的语法以及如何使用 JSX 构建 React 组件。

进一步了解 »
React 運作原理
React 白话文运动
Hogan

React 如何工作 - React 05

React 由 Meta(前身为 Facebook)开发,它使开发人员能够创建可重复使用的组件来完成前端页面。

不过,需要注意的是,从技术上讲,React 并不是一个框架。这是因为它只负责呈现用户界面的组件。不过,React 提供了一种替代 Angular 和 Vue 等框架的解决方案,让我们可以使用它来完成复杂的前端页面功能。

进一步了解 »
2023 雅虎软件工程师 软件工程师面试
心得
Hogan

2023 雅虎软件工程师 软件工程师面试

雅虎软件工程师面试,偏向于前端软件工程师,除了前端开发,还需要接触后端开发和项目管理。当时从 LinkedIn 上看到这个职位空缺信息时,我让朋友给我推送了一下,通过朋友,我大致了解到这个职位是一个跨国团队,日常开会也需要用到英语,而且可能会有时差。

进一步了解 »
成大電機轉學考
心得
Hogan

107 成功大学|成功大学|成功大学应用数学转学考试

这篇文章其实写于2018年,如今2023年,我已经把文章搬迁到了自己的博客上,也顺利从成都机电工程大学毕业了。我很庆幸自己还年轻,咬牙面对了调剂考试,说真的,那是我人生迄今为止最艰难的一段时光。最后,我希望这篇文章能对正在准备调剂考试的人有所帮助!

进一步了解 »
Javascript 高阶函数
Javascript
Hogan

JavaScript 高级函数 - React 04

本文将介绍 JavaScript 函数中一个非常重要的概念--高阶函数,即接收一个或多个函数作为参数或返回一个函数作为结果的函数。本文将深入探讨什么是高阶函数、使用高阶函数的好处以及如何在实际应用中使用高阶函数、什么是函数方向?纯函数、高阶函数、相关性。

进一步了解 »
React03-Javascript-Async-Await
Javascript
Hogan

JavaScript Async & Await – React 03

欢迎来到 React Vernacular Campaign 系列的第三部分,我们将深入探讨 JavaScript 中的异步操作,并介绍两个重要的关键字:Async 和 Await。在本文中,我们将通过实际示例演示异步操作的概念,以及如何使用 Promise、Fetch、Async 和 Await 更有效地处理异步代码。

进一步了解 »
react-vernacular-campaign-02 JavaScript ES6 Object
Javascript
Hogan

JavaScript ES6 Object – React 02

在上一篇文章中,我们介绍了 let、const、var difference、template literal 和箭头函数。本文将介绍 JavaScript ES6 的其他新语法,如对象分解、对象语法增强、数组分解和扩展操作符:对象分解、对象语法增强、数组分解和扩展操作符。希望通过以上内容,能帮助你更轻松地学习 React 前端框架。

进一步了解 »
react-vernacular-campaign-01 JavaScript ES6
Javascript
Hogan

JavaScript ES6 - React 01

在了解 React 前端框架之前,我们先来温习一下 JavaScript 的相关知识。本篇文章主要介绍 JavaScript 的历史、let & const & var 之间的区别、模板字面和箭头函数(JavaScript ES6 的重要前身)。

进一步了解 »
zustand
技术文章
Hogan

什么是 Zustand?React 前端状态管理

无论是使用 Redux 还是 Context 来处理状态管理,Zustand 都比 Zustand 复杂,对于后来加入项目的工程师来说,需要花时间去理解。Zustand 的主要目标是让前端状态管理变得相对简单易懂,这也是一些公司选择 Zustand 的原因。

进一步了解 »
monorepo
技术文章
Hogan

你真的了解 Monorepo 吗?5 分钟了解前端大型架构。

Monorepo 是一个用于集中管理大量代码的框架,不同于传统的离散项目。其核心理念是将所有与前端相关的代码集中管理在一个存储库中。这种架构的优势在于提高代码的可重用性、增加代码的透明度、确保所有软件包使用相同的版本以及标准化的代码风格。

进一步了解 »
zh_CN简体中文