软体技术部落格

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

system-design-系统设计12-CDN-基础概念与设计-how-cdn-work-hogantech
技术文章
Hogan

CDN 基础概念与设计– 系统设计12

CDN 是一组根据地理位置去做置放的代理伺服器(Proxy Server)。其中,代理伺服器是客户端和伺服器之间的中间伺服器,代理伺服器也会放置在网路边缘(Network Edge)。也因为网路边缘靠近最终用户,代理伺服器的放置有助于透过减少延迟和节省频宽来快速将对应的资料传送给使用者。 CDN 除了作为简单的代理伺服器之外还,也可以透过一些设定以及操作让他们变得更有效率。

进一步了解 »
0710 Anthropic
科技新创专栏
Roxanne

Anthropic:GPT-4 最强大对手Claude 3.5 的背后推手,如何打造更「合规」的AI 大型语言模型?

随着科技业资金大量流入AI 领域,透过了解各种AI 新创公司的募资状况、背后理念,也能对未来人工智慧趋势有更明确的认知。
就生成式AI 与大型语言模型的新创为例,可不只有OpenAI 一支独秀,从背后开始有科技巨头Amazon, Google 巨额投资撑腰,Anthropic 无疑成为暨OpenAI 后今年最受瞩目的独角兽。

Anthropic 到底是一间怎样的公司?为何创办人要与OpenAI 分家?两间公司的战略地位有什么不同?

今天就来跟大家分享Anthropic 的故事!

进一步了解 »
zapier 5
科技新创专栏
Roxanne

Zapier : 50 亿估值的自动化之王,如何在3 年内获得超过60 万用户?

在这个人人手边不缺强大工具的时代,各种AI、生产力工具正在争先恐后帮助我们节省更多时间。但每种工具的使用场景、优点都不同,要将这些不同属性的软体整合到工作流中往往要耗费很多时间。 Zapier 的出现就是为了解决这个随着工具分工越来越细、种类越来越多必然会产生的问题。

进一步了解 »
ScaleAI
科技新创专栏
Roxanne

解密Scale AI:人工智慧背后的「工人」智慧?资料标记独角兽8 年达73 亿美元估值背后的秘辛

19 岁时就辍学成立Scale AI,Alexandr 说,Scale AI 提供资料标记服务,就像在这股生成式AI 淘金热中卖铲子(这个描述有没有似曾相识呢😆)。

在许多AI 新创公司还没有赚到一毛钱时,Scale AI 去年营收已达2.5 亿美元,估值达到73亿美元,客户从OpenAI , Tesla 到美国空军、陆军、中央情报局等多个领域。

那么资料标记究竟是什么?为何可以那么赚钱? Scale AI 是如何在竞争激烈的AI 领域找到自己的利基(niche)市场,顺利长成独角兽呢?

今天就来跟大家分享Scale AI 的故事!

进一步了解 »
system-design-系统设计11-键值资料储存-key-value-store-introductoin-to-database-fundamentals-hogantech
技术文章
Hogan

Key-Value Store 键值资料储存解说– 系统设计11

键值资料储存(Key-Value Store)是一种分散式杂凑表(Distributed Hash Table),其中DHT是一种去中心化储存方式,提供类似杂凑表的查找、储存。杂凑表(Hash Table) 也是一个Abstract Data Type (ADT),它的优点是通常可以用比较快的时间完成Search operation 的动作。

进一步了解 »
naughtyghost-顽皮鬼-隐形笔电支架
心得
Roxanne

顽皮鬼Life 隐形笔电支架:工程师肩颈酸痛的救星

身为软体工程师和研究生,工作、处理报告基本上完全离不开电脑。如果需要转换工作地点,如在家或办公室、客户端等,这样频繁移动最大的困扰就是:希望随时随地、出门在外都能拥有一个舒适的工作环境!
在家或许可以设计一个舒适的工作空间来使用笔电,但如果在外工作、打报告真的必须仰赖笔电架的帮忙。
但市面上的笔电支架通常都蛮笨重、体积大,为了不想增加重量,多数时间宁可选择只带笔电出门。结果就是长时间低头工作,肩颈酸痛,效率大打折扣。

进一步了解 »
system-design-系统设计10-资料复制-data-partitioning-introductoin-to-database-fundamentals-hogantech
技术文章
Hogan

Data Partitioning 资料分区是什么? – 系统设计10

资料分区(Data Partitioning) 是将资料库中的资料分割成更小、更易于管理的子区块的过程。这些子区块称为分区(Partition)。资料分割可以根据多种因素进行,例如:时间、客户ID 或产品类别。为何要进行资料分区呢?对于任何不对扩增的系统,资料量也会持续增长,并且针对资料库的读写流量也会越来越大。

进一步了解 »
system-design-系统设计09-资料复制-data-replication-introductoin-to-database-fundamentals-hogantech-hoganblab
技术文章
Hogan

Data Replication 如何优化资料库? - 系统设计09

资料复制(Data Replication)是一种有效解决瓶颈的方法,可以通过在多个节点上复制资料来提高资料库的效能、可扩展性和可用性。本文将介绍资料复制的三种主要模型:主从复制(Single-leader replication)、多领导者复制(Multi-leader replication)和点对点复制(Leaderless replication),并分析它们的优缺点。

进一步了解 »
NVIDIA-STORY
心得
Roxanne

解密辉达NVIDIA: 6个重点带你搞懂AI 之王股价翻涨240% 的秘密(上)

在被喻为「生成式AI 元年」的2023,科技巨头相继推出AI 武器,如Microsoft Copilot, Bing, AWS BedRock…,连Elon Musk 都宣布为打造Tesla 电动车的超级大脑:Dojo 超级电脑,AI为科技巨头开启了新局。
而正所谓在战争期间,最赚钱的是军火商;在淘金热时,最赚钱的是卖铲子的人,
现阶段的NVIDIA 辉达就是这样的存在。

进一步了解 »
system-design-系统设计08-资料库基础介绍-introductoin-to-database-fundamentals-hogantech-hoganblab
技术文章
Hogan

资料库基础介绍– 系统设计08

什么是资料库?资料库是结构化资讯或资料的有组织的集合,通常以电子方式储存在电脑系统中。 资料库通常由资料库管理系统(DBMS)控制。资料和DBMS 以及与其关联的应用程式一起被称为资料库系统,通常简称为资料库。
当今运行的最常见资料库类型中的资料通常以一系列表中的行和列进行建模,以提高处理和资料查询的效率。 然后可以轻松存取、管理、修改、更新、控制和组织资料。 大多数资料库使用结构化查询语言(SQL)来写入和查询资料。

进一步了解 »
appier 0
心得
Roxanne

台湾第一只AI 独角兽: 市值13.8 亿美元的Appier 沛星到底在做什么?

你知道台湾第一只新创独角兽是谁吗? (独角兽定义:公司成立不到10 年,但估值达10 亿美元以上,且还未在股票市场上市的科技公司)
从2012 年6 月创立到2021 年上市,Appier 沛星互动科技只用了8 年9 个月,成为了台湾首家被红杉资本投资的AI独角兽公司。与科技巨头Google 6年、Facebook 8年、Uber 10年相比,Appier 在极短的时间便达成上市成就。

进一步了解 »
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简体中文