ShadiAbu Hilal

我负责界面及其底层平台的架构——设计系统、会员中心、国际化、CI/CD,以及工程师依赖的工具。

2.6M+

每周 260 万+ 下载

10

10 个 npm 包

20+

20 年

138k

Stack Overflow 触达 13.8 万

// 大规模上线

rtl-detect · npm · VS Code · i18n

关于

偏向界面的架构。

我是 Shadi Abu Hilal,Broadcom 的首席 UI 工程师。曾在 Yahoo 与 Verizon Media 担任高级首席架构师,设计过数百万人使用的 Web 系统。

我的开源大多来自生产问题:语言方向、RTL CSS、构建流水线,以及别人一分钟就能用上的工具。rtl-detect 起初只是助手,后来成了依赖。

当精确的回答比会议更耐久时,我会写在 Stack Overflow。我会说阿拉伯语和英语,现居加州。

技能

使用语言: 阿拉伯语、英语

系统与架构

  • 系统架构
  • 安全与可扩展性
  • 缓存策略
  • 自定义框架
  • CI/CD 自动化

工程

  • 前端(React、Redux、Angular、Web Components)
  • 后端(Node.js、Java)
  • 移动端(SwiftUI、Kotlin Jetpack)
  • HTML、CSS、JavaScript、TypeScript
  • 单元、功能、E2E、跨浏览器
  • 截图测试
  • 国际化(i18n)
  • RTL 界面支持

领导与流程

  • 以身作则
  • 敏捷 / Scrum

我的工作

  • 架构并评审大规模、安全的项目
  • 与 UX、PM、后端和 UI 团队协作
  • 管理 Scrum 团队与交付
  • 主导招聘、辅导与教练
  • 为团队选择技术与工具
  • 分析系统与用户行为
  • 搭建并改进 CI/CD 流水线
  • 为新功能与产品构建 POC
  • 建立并执行编码标准
  • 进行技术分享、工作坊与培训
  • 在阻碍团队前解决阻塞
  • 改进开发环境
  • 确保代码在发布前经过测试

职务

  1. 首席 UI 工程师

    博通

    2024 — 至今

    美国加利福尼亚州帕洛阿尔托

  2. 高级首席架构师

    雅虎公司

    2021 — 2023

    美国加利福尼亚州山景城

  3. 高级首席架构师

    Verizon Media

    2019 — 2021

    美国加利福尼亚州圣何塞

  4. 首席软件开发工程师

    Verizon Media

    2019 — 2019

    美国加利福尼亚州森尼韦尔

教育

计算机科学学士

Princess Sumaya University for Technology

约旦安曼

荣誉与奖项

  • Best Poster — TechPulse 2012(Yahoo)

    在 Yahoo 年度技术大会上,关于 HTML5 Canvas 高级图像处理的技术论文与演示。

  • Super Star Team Award — 2011(Yahoo)

    Yahoo 最高团队荣誉。打造 Helwa——1000 万用户,每月 1 亿页面浏览。

专利

Method and System for Rendering Advertisements within an Application on a Mobile Device

US IPCOM000243103D · 2015 年 9 月 15 日授权

最新工作项目

数百万用户使用的系统——从 VMware 安全到 Yahoo 规模。

Broadcom 的 VMware vDefend SSP。Yahoo、AOL、TechCrunch、Engadget 等品牌的会员中心、隐私面板与设计系统。

  1. 01/平台

    VMware vDefend Security Services Platform (SSP)

    Broadcom

    Broadcom 首席 UI 工程师——负责 SSP 管理与安全工作流的前端架构。

    VMware vDefend Security Services Platform——VMware Cloud Foundation 上 vDefend 的运营中枢。在可扩展平台中集中安全情报、网络检测与响应、恶意软件防护及相关服务。

    • 安全
    • VMware Cloud Foundation
    • 平台
  2. 02/平台

    我的账户

    Yahoo

    使用内部 Web UI 组件的 React。

    Member Center 2.0——Yahoo、AOL、TechCrunch 及其他 Verizon Media 品牌的账户体验。我架构了前端,建立核心标准,并为仓库设计了灵活的 CI/CD。

    • React
    • Web 组件
    • CI/CD

    多品牌:将 URL 中的 yahoo 替换为 aol、techcrunch、engadget 或其他支持的品牌。

  3. 04/平台

    隐私面板

    Yahoo

    架构项目并实现核心代码。

    面向 Yahoo、AOL、TechCrunch 等品牌的 Privacy Dashboard。Java 前端服务器加 React SPA,兼顾性能、体验与更少 API 调用。

    • React
    • Java
    • 多品牌

    多品牌:将 URL 中的 yahoo 替换为 aol、techcrunch、engadget 或其他支持的品牌。

  4. 05/工具包

    React Web 组件与工具

    Yahoo

    在大型产品面上保持一致的设计。非开源。

    Yahoo 内部库——可复用的 React Web 组件(RTL、主题)与 utils 包,含 REST 客户端、路由管理器及对实用库的扩展。

    • Web 组件
    • RTL
    • 主题

    Yahoo 内部项目 — 不对外公开。

开源

  1. 01/npm

    rtl-detect

    每周 260 万次下载。295 个依赖方。

    一个小库,把一个问题答对:该语言环境是否从右到左?数百个包依赖它。基础设施做好了,就是这样。

    • i18n
    • RTL
    • Node.js
  2. 02/扩展

    Claude Code Context Picker

    上下文,不必写长文。VS Code 市场。

    选中文件、一行代码或页面上的实时元素,发送到 Claude Code。让工程师把意思展示给模型,而不是用文字描述。

    • VS Code
    • Claude Code
    • 开发者体验