js时间选择器_JS 主题图标和插画艺术展

Egghead 是湾区码农们热爱的碎片化 JS 课程平台,就算是狗家脸家亚麻的大佬们,下班后也要从 work-life 天平上抽出几分钟宝贵时间看几个公司报销的课程视频,防止自己技术落伍没跟上 JS 社区发展,我订阅 Egghead 也有若干年了,自费,但抽不出什么时间看……就好像我买的三万元带 2080TI 的 Alienware R8 、两万元 ROG G-Sync Ultimate 显示器、五千元 ROG WiFi 6 路由器一年来没用过几次,疫情期间雪上加霜…

今天下班早,无意中刷到 Egghead 的时候,突然注意到(可能因为首页设计变了…)这个平台竟然给每个课程(Course)都画了 iOS 7 和 OS X 10.10 以前那种拟物风格的图标,简直梦回拟物黄金时代,这质感,这光影,这想象力,爱了爱了…

更可怕的是,如果你认真看这些既是图标也是插画的作品中的 metaphor,会发现作者很清楚自己在画什么,理解其中的技术概念

这套图标也堪称创意库,对于很多我们早已看惯的、千篇一律的 logo,都做了新颖丰富的演绎

我扒了几乎全部像这样的图标汇总到这里,供自己和大家欣赏:

《状态机和 XState 入门》

e49229aed2df7b1d1847b44f65ed99c1.png

《用 XState 打造健壮的 UI》

6bfe78e99a0abb7e9362c82d1a3f489f.png

《用 redux-observable v1 做异步状态管理》

29ac0d1325895f19eae0e59b335dc732.png

《创建自己的 RxJS Pipeable 操作符》

c06af72eaca373200f9b8e8ac707f162.png

《基于 Immer 的不可变 JS 数据结构》

9e5a1d0ae264ec739e87412bc69c25d0.png

《用 Redux Actions 减少 Redux 样板代码》

d9674dfd5df5d6c92b6f64cd5763b467.png

《Web 安全精要:MITM, CSRF 和 XSS》

0a906dcca3a7d3882e6b4a09cbd08b4d.png

《在 AWS Lambda 上用 Node.js 开发 Serverless 后端》

6a16e10200adff0e3b0c4a60bd840f23.png

《用 React Suspense 开发应用》

c2f47420195e2078c23e23afc4c7c55f.png

《用 Suspense 简化异步 UI 实现》

b17d2383757eb62c2ec2869b19100dee.png

《开发可复用的自定义 React Hooks》

bd8c2243b5e4b755ff1779db0b6caae8.png

《用 React Hooks 简化应用开发》

bc69724d4d976a4f9c037f624036514a.png

《用 React Hooks 开发可复用的状态和副作用》

6373512d8da1017fef38c8442fa4aac0.png

《用 React Context 做状态管理》

29cadb65c9e07fc2194d1763e0b1226e.png

《基于 Node.js 和 Auth0 的 JWT 鉴权》

9ac93f26106f2dec4021bb76e9a9d2fc.png

《基于 SSH 的远程服务器鉴权》

db280f8755575c34b15293bc605de329.png

《用 Cypress 测试让应用达到生产环境水平》

6516e31c89a7a545e2e4a823fc05054f.png

《基于 Cypress 的端到端测试》

3bb17c7c803abdb484b9c99bb34fb82c.png

《用 Puppeteer 和 Jest 做端到端测试》

95906320420284c0de11fd0925f881da.png

《用 Enzyme 和 Jest 测试 React 组件》

c2d27d8ef39624810a5ebfab6f9f1481.png

《GraphQL 查询语言》

df9248715859b80a4152f738fc28f9c1.png

《设计 GraphQL Schema》

77c8a890dae133a80146057473d7eeeb.png

《SQL 基础》

3fbe0d88762af33f44fac09353fd351f.png

《高级 JS 基础》

ce79798f23ce3b9934965feece0acad9.png

《JS 中的数据结构和算法》

eea3b0f3936d665909914b484c1caf41.png

《理解 JS 原型继承》

fd9ce9a335eb5668ce264f33fb2c0dd1.png

《深入理解 JS 的 this 关键字》

371ae0b714ebd19d6d16273d4de8d61a.png

《TypeScript 高级使用技巧》

6641e51367d4ebef7e85528591899414.png

《TypeScript 运作原理》

499554f9efa7da392dde7644edabdc0f.png

《学习恰到好处的 JS 函数式编程》

d7252907a05852c68225c0b2f4a965f8.png

《深入了解 JS Promise》

8a6e2c79acb8c9509a0f8ea54ced64bd.png

《通过 Rust 使用 WebAssembly》

b0ad3b86ad54ad7773d0d2c89db9929a.png

《Reason 入门》

353f0e8f57fc5ba961c3f6f75a1b9f6a.png

《基于 React 的现代 JS 工程化》

4b78bdce6d2528b2f3aaa12a7328a3d3.png

《用 create-react-app 开发 PWA》

668755aa1ea40186ff7f510e2c53ebfa.png

《用 Next.js 搭建服务器端渲染的 React 应用》

ca2500cdf64364e034e3f89ed63de531.png

《React Native 开发从入门到精通》

dcbdfe98f6fcb66a74bef85a7ebc127a.png

《用 React 360 开发 VR 应用》

3a4d1a5ec083cde5a9d27c80a2cc5b8b.png

《初学者的 React 指南》

faee4efe8290c4354e0cb431c83ddde8.png

《用 React 开发具备可访问性的 Web App》

5093b8fa528e0f6eec3e975a91391a72.png

《Vue Router 入门》

cd2e64a9986d1e7ba86ef0850259ff6a.png

《用 RxJS 开发异步 Vue 应用》

25bbcb932010a147ced86230eefa26ec.png

《Angular Elements 入门》

f6b06f658f860e9429b6acbfd689d7a9.png

《高级 Angular 组件模式》

f588cf09f7112dae7c52498e45496c90.png

《用 GreenSock 创作酷炫动画》

a6b3be8e07c732de5ed6c79d43ae345d.png

《用 React Transition Group v2 创建顺滑高性能的动画》

a2269b4e377923748b3fef4a93e4532d.png

《解决常见 Git 错误》

0270cb0541a8139a34f94110d2d333b4.png

《深入了解 CSS 选择器》

d293021b7ed2b0b4b488c48b74a49c38.png

《用 Gatsby 和 Contentful 搭建动态内容的 PWA》

6d06bbad77ad2a913172da53a4969a24.png

《制作 Gatsby 主题》

c30d49628e7580a272d35f45f4843abf.png

《可组合的 Gatsby 主题》

ff66d6de94376f61871ee7ce6dbe4540.png

《Algolia InstantSearch.js 入门》

0133de0cffb9a15e09a60a2e6abe0383.png

《初学者的 Figma 指南》

b62f05cf179c01c2b01fa891379cbcf7.png

《用 npx 执行 npm 二进制包》

218e961aea35d73af740e302a93f7a4c.png

如此规模的创作,背后必有大佬,我人肉了一下,从 Dribbble 爬到 Ins 又爬回 Dribbble,发现人家 Egghead 是有艺术总监的…

https://www.instagram.com/maggieappleton/

https://dribbble.com/mappleton

这个项目的主页在这里:https://maggieappleton.com/project/egghead-courses

果然,作者的目标是为编程课程绘制一套『无限』的图标/插画库,为每个课程都创作独一无二、且能抓住核心概念的的插画

真是旱的旱死涝的涝死,我们 Web 开发引擎的八九个项目至今一个正式 logo 都没有,有没有哪位艺术总监能来扶贫一下…

当然如果你是像这位女士一样执着、有创造力、有跨领域思维、乐于学习理解的开发者,请同样来支援下我们

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值