Nathan Babcock，美国伊利诺伊州芝加哥市的开发商
Nathan is available for hire
Hire Nathan

Nathan Babcock

Verified Expert  in Engineering

Front-end Developer

Location
Chicago, IL, United States
Toptal Member Since
December 29, 2021

Nathan是一名高级React工程师，也是使用React简化UI/UX的专家. 作为摩托罗拉系统公司的首席设计工程师, 他组织了一个结合React的产品, Angular, and Svelte to company-wide deployment, garnering more than 100,000 downloads. Nathan also developed Hypetrigger, 用于流媒体服务的流行机器视觉系统, 它是用React和SolidJS构建的前端.

Front-endFull-stackHTML5CSSReactGitGitHubTypeScriptSassNode.jsVisual Studio Code (VS Code)Back-endDockerAgileDevOps

Availability

Part-time

Preferred Environment

亚马逊网络服务(AWS)， React, TypeScript, Node.js

The most amazing...

...我建立的是一个端到端的设计系统, 包括内部文档站点和DevOps管道来部署和维护它.

Work Experience

Electron Developer

2023 - 2023
Rebel Systems (Via Toptal)
  • 为军用电器显示亭开发了一个电子/反应图形用户界面.
  • 使用MUI (Material UI)组件从零开始构建React应用程序.
  • 设计了一个自定义的可访问性实现，通过四个方向按钮控制应用程序.
  • 后端集成了Protobuf和ZeroMQ发布/订阅消息/序列化.
  • Utilized Zustand, a novel, 轻量级React状态管理库, 为应用程序提供灵活和模块化的基础.
技术:React, Electron, TypeScript, JavaScript, ZeroMQ, Protobuf, Vite, PNPM, Material UI

Senior React Developer

2022 - 2022
Zeedz GmbH (Via Toptal)
  • 为一款名为Zeedz的NFT游戏实现React前端.
  • Built user flows, including user log-in and sign-up, purchase and unboxing experience, 以及存储在Flow区块链上的玩家数字收藏品的库存管理.
  • 连接到团队现有的后端, including a custom GraphQL API, Amazon Cognito, 通过Flow客户端库与Flow区块链集成, distributed file hosting with Pinata, and a few other services.
  • 通过Google Hangouts远程合作，主要与德国和英国团队成员合作.
Technologies: JavaScript, React, CSS

JavaScript Game Developer

2022 - 2022
University of Windsor (Via Toptal)
  • 为温莎大学教授的心理学研究项目制作了一款游戏.
  • 在转向网站环境之前，在Electron中构建一个初始原型.
  • 实现了配置游戏/实验的基本CRUD功能.
  • Authenticated users for researchers vs. 具有基于角色的访问控制(RBAC)的参与者/玩家.
  • 使用Solid创建了一个网站前端.js, TypeScript, and CSS.
  • Built and connected a MongoDB/Express.js Node.js back end.
  • 在AWS上托管部署(Amazon EC2、Amazon Route 53、Docker、NGINX、Let’s Encrypt和HTTPS).
Technologies: 2D Games, Game Design

Three.js Developer

2022 - 2022
Merciv LLC (Via Toptal)
  • Built a React/Three.js网站的电影投资组合与Webflow集成.
  • Integrated Three.通过React -three-fiber库.
  • 开发与Webflow CMS集合/REST API的自定义集成.
  • 基于Webflow CMS中的数据对3D模型应用动态纹理.
  • 实时映射页面滚动到3D相机运动.
  • 在场景的3D空间中放置一个原生HTML5视频播放器.
  • 从Blender导出GLTF 3D, 针对浏览器中呈现的性能和文件大小进行了优化.
Technologies: Three.js, JavaScript, HTML, CSS

Lead Design System Engineer

2016 - 2021
Motorola Solutions
  • 开发了一个设计系统，在全球范围内使用摩托罗拉软件, including ports across Angular, React, Svelte, and native web components. 与UX设计师密切合作，从零开始实现这些组件, from mockups to production code.
  • 前往波兰的全球公司所在地, India, 并在美国各地举办关于使用和贡献设计系统的研讨会.
  • 处理设计系统的持续维护和支持, overseeing 100,000+ downloads over several years.
  • Led bi-weekly Agile sprint meetings, standups, retrospectives, 与三个开发人员组成的前端团队进行待办事项梳理会议.
  • 面试、指导设计系统团队的三名新员工和两名实习生.
  • 创建了一个Nginx网关服务器，作为内部微服务网络安全的反向代理. 网关实例保护进入各个服务器的入口, 所以他们不需要暴露在公共网络中.
  • 监控全公司开发人员的开源贡献, including features, bug fixes, and pull requests.
  • 主持一个有350多个前端开发人员使用我们构建的库的内部讨论板，分享最新前端技术和最佳实践的知识.
  • 审计Motorola设计系统的安全漏洞, 实现零关键或主要漏洞的NPM审计报告.
  • 参加要添加到库中的新前端组件的设计评审，并帮助开发团队将UX需求转换为代码实现.
Technologies: JavaScript, TypeScript, Sass, Agile, HTML, WCAG 2, React, Angular, Svelte, Figma, Sketch, Web Components, Design Systems, Azure, Jira, NGINX, OAuth, HTTPS, Front-end, Agile Sprints, Backlog Grooming, Software Development, CSS, CSS3, Microservices, REST APIs, DevOps, CI/CD Pipelines, Architecture, User Experience (UX), User Interface (UI), Angular CLI, Angular Material, Material UI, GitLab, GitHub, Git, A11Y, i18n, Internationalization, Web Accessibility, 可访问的富互联网应用程序(ARIA), Amazon Web Services (AWS), APIs, WebRTC, Webpack, Rollup.js, Rollup, ESLint, Lint, Stencil.js, NPM, YARN, Private NPM Modules

Android Developer

2015 - 2016
University of Arizona
  • 重新设计并创建了最新版本的“亚利桑那移动”应用程序——亚利桑那大学校园的官方安卓应用程序, including services such as maps, news, and class schedules. 该应用程序可在Google Play下载.
  • 使用Java和Android Studio开发应用程序，并使用Git分支进行合并和版本控制.
  • 与平面设计师合作设计app用户界面.
技术:Java, Android Studio, Git，移动App UI, UI设计，前端，软件开发

Rebel Systems GUI(用于军事应用的电子反应应用)

用于军事电器显示亭的Electron React GUI. 我用Material UI组件从头开始构建这个React应用程序.

The features:
•通过四个方向按钮实现自定义可访问性;
•Protobuf和ZeroMQ Pub/Sub后端;
• Zustand state management.

Silience Films (Three.js Portfolio for a Film Company)

http://silience.us/
A React/Three.js网站的电影投资组合与Webflow集成.

• React with react-three-fiber
•自定义集成与Webflow CMS集合/REST API
•基于Webflow CMS中的数据应用于模型的动态纹理
•页面滚动映射到3D相机运动
•HTML5视频播放器定位在场景中的3D空间
•GLTF 3D模型从搅拌机导出

Regenaqua (UX重新设计和每周CMS集成)

http://www.regenaqua.com/
重新设计了一个泳池水回收公司的网站. 它与公司使用的(现有的)Weebly CMS集成在一起, 包括自定义模板和HTML/CSS插件. 该设计是与客户合作几个星期完成的，并在Figma中构建.

Game of Squares(用于研究的全栈浏览器游戏)

为温莎大学教授的心理学研究项目制作了一款游戏.

•配置游戏/实验的基本CRUD功能
•研究人员的身份验证和角色. participants/players
• Full-stack deployment
• SolidJS front end
• MongoDB/Express.js Node.js back end
•托管在AWS上(EC2实例，Amazon Route 53, Docker, NGINX, Let's Encrypt和HTTPS)
•在转向网站之前，最初的原型是在Electron中构建的

Zeedz(基于React和GraphQL的NFT市场)

http://zeedz.io/
为一款名为Zeedz的NFT游戏实现React前端. 游戏UI实现包括用户登录和注册, purchase and unboxing experience, 以及存储在Flow区块链上的玩家数字收藏品的库存管理.

前端连接到团队现有的后端, including a custom GraphQL API, AWS Cognito, 通过Flow客户端库与Flow区块链集成, distributed file hosting with Pinata, and a few other services.

在Google Hangouts上，团队合作完全是远程的，主要是与德国和英国的合作者合作.

hypertrigger(面向玩家的Rust, Tauri, FFmpeg和SolidJS计算机视觉应用程序)

http://hypetrigger.io/
这是一款机器视觉人工智能应用程序，可以自动检测直播或录制的游戏亮点，并录制10到30秒的片段. I built the core engine in Rust. 它在GPU上使用FFmpeg解码视频. 然后使用两种计算机视觉方法中的一种, 要么是定制训练的TensorFlow模型，要么是更通用的OCR(光学字符识别)，使用一个名为Tesseract的开源Google库. 管道运行的速度大约是GPU的十倍. 它可以在大约一秒内处理10秒的输入视频.

In addition to the core engine, 我在一个名为Tauri的相对较新的框架中构建了一个本机Windows前端, similar to Electron, 但与Rust集成，并使用系统WebView，而不是绑定Chrome的实例. 前端也是使用SolidJS构建的, 一个类似于React的框架，但更注重高性能，非常适合这种性能要求很高的视频处理和机器学习应用.

最后，我建立了一个网站来分发和推广这个工具. It can be viewed at Hypetrigger.io. I built it using Next.Js，它是100%静态生成的. 内容是从JSON配置文件和第三方REST API创建的.

Algernon (Three.js Maze Game)

http://excalo.itch.io/algernon
一款完全使用JavaScript、React和WebGL编写的第一人称3D迷宫探索游戏.js and react-three-fiber. 游戏的特点是灯光和阴影, collision detection, 和后期处理效果，如开花和抗锯齿. The prototype is free to play on itch.io.

使用Google Drive作为CMS (CSS技巧文章，GitHub Repo和npm包)

http://css-tricks.com/using-google-drive-as-a-cms/
一篇发表在CSS Tricks上的文章，带有GitHub和npm包. 使用Google Drive作为CMS利用Google Drive的公共REST API从动态网站的内容服务后端获取内容. 在CSS Tricks的一篇文章中介绍了这个库的配套文章.

Gem Drop(带有PixiJS和HTML5 Canvas的获奖2D物理游戏)

http://www.kongregate.com/games/excalo/gem-drop
增量游戏类型的2D、基于物理的空闲游戏. 我在PixiJS中实现了2D碰撞物理和渲染. 《欧博体育app下载》在Kongregate的月度竞赛中获得第三名，游戏次数超过7.5万次.

Nodescape(带有实时WebSocket多人网络的浏览器策略游戏)

http://github.com/nathanbabcock/nodescape
一个使用WebSockets和Canvas编写的多人领土控制策略游戏. 该网站接受使用Stripe API支付，用户使用Auth0登录. 网站服务器托管在AWS上，使用NGINX和Docker.

FFmpeg Sidecar

http://github.com/nathanbabcock/ffmpeg-sidecar
A Rust crate for using the FFmpeg CLI, a leading open source media framework, using native Rust language constructs, such as iterators.

我在GitHub上收到了大约80颗星，并且正在进行拉请求和贡献.
React路由器教程:像专业出版物一样重定向
Publication

React路由器教程:像专业人士一样重定向

http://rspir.jlc866.com/react/react-router-tutorial
Image of SolidJS vs. React: The Go-to Guide publication
Publication

SolidJS vs. React: The Go-to Guide

http://rspir.jlc866.com/react/solidjs-vs-react
计算机视觉管道体系结构图像:教程出版物
Publication

计算机视觉管道体系结构:教程

http://rspir.jlc866.com/computer-vision/computer-vision-pipeline

Languages

JavaScript, TypeScript, Sass, HTML, HTML5, ES5, CSS, CSS3, TypeScript 3, Java, GraphQL, Rust

Frameworks

角度，材质UI，电子，快速.js, PixiJS, OAuth 2, Svelte, Angular Material, YARN, Next.js

Libraries/APIs

Node.js, React, Three.js, WebRTC, Google Drive API, WebGL, REST APIs, TensorFlow, Stripe, Stripe API, Auth0 API, Twitch API, Rollup.. js, DirectShow, Google Sheets API, FFmpeg, Solid, ZeroMQ, Protobuf

Tools

Git, GitHub, Open Broadcaster Studio (OBS), Angular CLI, NPM, NGINX, Figma, Sketch, Jira, Android Studio, Canvas, Google Analytics, Slack, Blender, Auth0, GitLab, Canvas 2D, Webpack, Rollup, Stencil.js, Google Docs, Google Sheets, Flow, Adobe Experience Design (XD), Notion, Create React App, Amazon Cognito

Platforms

Visual Studio Code (VS Code), Docker, Azure, Amazon Web Services (AWS), Blockchain, Amazon EC2, Webflow

Other

Software Development, Web Components, Design Systems, Front-end, Agile Sprints, Full-stack, User Interface (UI), Private NPM Modules, WCAG 2, WebSockets, Google Drive, OAuth, HTTPS, Game Physics, Backlog Grooming, Mobile App UI, Server Architecture, Web App Development, Content Management Systems (CMS), 3D Games, 2D Games, Back-end, CI/CD Pipelines, Technical Writing, Architecture, Web Scraping, User Experience (UX), Web Accessibility, A11Y, i18n, Internationalization, 可访问的富互联网应用程序(ARIA), Writing & Editing, Twitch, APIs, ESLint, Lint, OCR, Tesseract, Non-fungible Tokens (NFT), Computer Vision, Object Recognition, SSG, Solid.js, Weebly, Vite, PNPM, Game Design

Paradigms

Agile, UI Design, Web Architecture, DevOps, REST, Microservices, UX Design, Role-based Access Control (RBAC)

Storage

MongoDB

2013 - 2016

Bachelor's Degree in Computer Science

University of Arizona - Tucson, AZ

Collaboration That Works

How to Work with Toptal

在数小时内，而不是数周或数月，我们的网络将为您直接匹配全球行业专家.

1

Share your needs

在与Toptal领域专家的电话中讨论您的需求并细化您的范围.
2

Choose your talent

在24小时内获得专业匹配人才的简短列表，以进行审查，面试和选择.
3

Start your risk-free talent trial

与你选择的人才一起工作，试用最多两周. Pay only if you decide to hire them.

Top talent is in high demand.

Start hiring