网站

发表于 | 更新于:
字数统计: 1.7k 字 | 阅读时长 ≈ 6 分钟

常看的网站

  • awesome-f2e-libs sorrycc 整理的个人关注使用的前端库

  • overreacted react Dan 的个人博客，更新频率很高

  • DailyJS

  • codeburst

  • Github

  • github 短域名服务

  • shields Github README 里面的装逼小图标

  • Emoji 方便平时写查找 emoji

  • emoji.muan 同上 而且更全

  • git-awards github ranking 没事可以查着玩玩

  • http://githubrank.com/ github 按照 followers 排名

  • github-rank同上，githubrank 基本算挂了已经，只能用这个新的

  • star-history 展示一个项目 Stars 增长规矩曲线

  • probot 基于 github 做一个小机器人。可以做很多 workflow 的事情

  • 开发

  • can i use 前端常用网站了 查看不同属性和方法的兼容性

  • Squoosh 谷歌出品在线免费图片压缩工具 神器

  • codesandbox-client - 在线 web 开发容器

  • astexplorer - 一个在线 ast 生成器

  • 30 seconds of code 收集了许多有用的代码小片段

  • zeplin 前端和设计师神器，有标注、Style Guide、版本管理、简单的团队协作，重点是前端不用写 css 了，复制就可以了。

  • iconfont 阿里出的图标库，非常实用，支持 svg、font、png 多种格式，基本现在所有图标都在上面找。

  • cssicon 所有的 icon 都是纯 css 画的 缺点：icon 不够多

  • 智图 腾讯出品 在线图片压缩 支持转成 webP 处理静态图片时候很好用

  • picdiet 另一个图片压缩网站

  • CSS triangle generator 帮你快速用 css 做出三角形

  • cssarrowplease 帮你做对话框三角的

  • clippy 在线帮你使用 css clip-path 做出各种形状的图形

  • Regular Expressions 在线正则网站

  • jex 正则可视化网站，配合上面的 Regular Expressions，写正则方便很多

  • jsfiddle 在线运行代码网站 很不错，可惜要翻墙

  • codepan 在线运行代码网站 不用翻墙，可以自己部署

  • fiddle.md 一个方便的在线共享 markdown 在线笔试题一般都用这个

  • jsdelivr cdn 服务

  • unpkg cdn 服务

  • coderpad 远程面试的神器，可以让面试者远程写代码 不过需要翻墙

  • icode 有赞团队出品的 coderpad 可以互补，它不需要翻墙

  • codeadvice 又一个让面试者远程写代码的网址

  • snipper 一个代码协同的网站。你新建一个代码片段，然后把网址分享给其他人，就可以看到他们的实时编辑。

  • codesandbox 一个可以在线编辑且提供在线 demo 的网站 支持 vue react angular 多种框架 神器

  • codrops 上面的交互都非常酷炫

  • bgremover 在线图片去底工具

  • photopea 一个网页端 Photoshop 很变态

  • bestofjs 查看一个项目增长经历，Star 数变化的网站，辅助你判断这个库的质量

  • stackblitz 一款在线 IDE,主要面向 Web 开发者,移植了很多 VS Code 的特性与功能

  • programmingfonts.org 一个专门介绍编程字体的网站

  • 早报 一个个人开发者的前端开发的分享日报

  • emoji-search 帮你快速找到能表达你情感的 emoji

  • gitmoji 通过 emoji 表达 git 的操作内容

  • starcharts 可以把你一个项目的 stars 增长轨迹当做 svg 放在 readme 中

  • mockapi 一个还不错的在线 mock 服务（可在线可视化编辑），可以满足大部分简单需求了

  • coder 在线版 VS Code

  • browserstack 远程调整各种版本浏览器 兼容性问题

  • carbon 根据源码生成图片 主要作用是让你打代表片段分享的时候更好看一点

  • clipboard2markdown 将你所有复制进去的内容都转化为 markdown

  • grammarly 英语写作检查工具

  • quickchart 通过 URL 生成图表的开源服务

  • hipdf 一站式在线 PDF 解决方案

  • whimsical 画路程图

  • Lorem Picsum 提供免费的占位图

  • sm.ms 免费图床

    设计

  • https://www.photopea.com/ Photopea,高级图片编辑器

  • uimovement 能从这个网站找到不少动画交互的灵感

  • awwwards是一个一个专门为设计精美的网站以及富有创意的网站颁奖的网站

  • dribbble 经常能在上面找到很多有创意好看的 gif 或者图片，基本上我所有的图都是上面招的

  • Bēhance dribbble 是设计师的微博，Bēhance 是设计师的博客

  • Logojoy 使用 ai 做 logo 的网站，做出来的 logo 质量还不错。

  • brandmark 另一个在线制作 logo 网站

  • instant 又一个 logo 制作网站

  • logo-maker 又一个 logo 制作网站 这个更简单点 就是选模板之后微调

  • coolors 帮你在线配色的网站 你能找到不少配色灵感

  • colorhunt 另一个配色网站

  • uigradients 渐变色网站

  • designcap 在线海报设计

  • Flat UI 色表 Flat UI 色表

  • 0to255 颜色梯度

  • Ikonate 提供免费的图标 icons

  • remixicon 又一个提供免费图标 icons

  • feather 免费的 icons

  • nord 北欧性冷淡风主题配色

  • Unsplash 提供免费的高清图片

  • colorkitty 从你的图片中提取配色

    有趣

  • 帮你百度一下 可以 点我测试一下-

  • 国际版 同帮我百度一下-点我测试一下-

  • wallhaven 壁纸网站-

  • URL 地址播放 Emojis 动画 在地址栏里面播放 emoji

  • Can’t Unsee 强烈建议前端、客户端、UI 开发的同学玩下，检查一下自己对设计稿的敏感度怎么样

  • ggtalk 平时一直在听的一个技术博客

  • awesome-comment 里面收集了很多有趣的代码注释

  • text-img 都将图片转化为 ascii 用来写注释

  • weird-fonts 将普通字母转化为 特殊 unicode

  • snake 在地址栏里面玩贪吃蛇

    交互

  • 微交互 里面收集了市面上很多很好的微交互例子 值得学习

  • Little Big Details 同上，一个国外微交互汇集网站

  • cruip 登录页的各种页面设计，可以免费下载模板

  • Comixify 一个波兰团队做了非常好玩的工具，可以把视频自动转成漫画，上图是他们提供的 demo，效果很棒。

  • taiko-web 太鼓达人网页版 只能说很 6

    Css

    css-tricks 一个学习 css 不错的网站 有很多有意思的 demo

    教程

  • npx 教你怎么合理的使用 npx

  • hacksplaining 网络安全学习网站

    产品

  • 产品大牛 什么有很多完整的产品原型可以借鉴

  • 磨刀 快速出 ui 原型

    实用

  • typeform 一个国外的在线调查问卷网站

Talk

  • peerigon-talks 收集了不少有意思的 talks

算法

  • leetcode 用 js 刷 leetcode

### PC UI