awesome-websites-new.json

{
    "link_length": 600,
    "category_length": 25,
    "data": [
        {
            "title": "Hover特效",
            "list": [
                {
                    "desc": "用canvas绘制了2018这四个数字，特效很赞",
                    "url": "http://2018.makemepulse.com/",
                    "name": "2018 Make Me Pulse"
                },
                {
                    "desc": "利用高清黑白照片或背景图片，简化黑白网页设计，约式WordPress黑白网页设计典范",
                    "url": "http://preview.themeforest.net/item/alinti-minimal-creative-wordpress-portfolio/full_screen_preview/17753077",
                    "name": "Alinti"
                },
                {
                    "desc": "一个CSS属性，两个值，就可以产生各种不一般的特效",
                    "url": "http://leaverou.github.io/animatable/",
                    "name": "animatable"
                },
                {
                    "desc": "Ant Design Pro正式发布了，其官方网站的交互效果很赞。",
                    "url": "https://motion.ant.design/",
                    "name": "Ant Design Pro"
                },
                {
                    "desc": "机核网，国内首个综合性的游戏（以各大主机游戏为主）、游戏周边的网络广播站点及论坛，并为广大游戏玩家提供最新最及时的声讯、视讯以及现场报道。",
                    "url": "https://www.g-cores.com/",
                    "name": "GAMECORES"
                },
                {
                    "desc": "演讲嘉宾那里的Hover特效很别致",
                    "url": "https://vue.w3ctech.com/#about",
                    "name": "Vue Conf"
                },
                {
                    "desc": "有很多Wordpress、小程序相关的文章，同时网站特效很不错",
                    "url": "https://www.yeehee.cn/",
                    "name": "叶赫先生"
                },
                {
                    "desc": "云服务器提供商，网站上有大量的hover效果",
                    "url": "https://idc.yygzs.cn/",
                    "name": "逍遥运"
                },
                {
                    "desc": "wordpress主题，设计师的个人博客，简约大方，创意十足",
                    "url": "https://blog.limiabc.com/",
                    "name": "里米先生"
                }
            ]
        },
        {
            "title": "VR相关",
            "list": [
                {
                    "desc": "汇集了国外涉及到VR的大部分知名网站，对VR感兴趣的闲暇时间可以逛逛",
                    "url": "http://www.vrfavs.com/",
                    "name": "VR网站仓库"
                }
            ]
        },
        {
            "title": "Wordpress",
            "list": [
                {
                    "desc": "M主题小程序站为您提供精品Wordpress小程序模板下载,帮助更多Wordpress站长使用小程序。",
                    "url": "http://mzhuti.com/",
                    "name": "M主题"
                },
                {
                    "desc": "利用高清黑白照片或背景图片，简化黑白网页设计，约式WordPress黑白网页设计典范",
                    "url": "http://preview.themeforest.net/item/alinti-minimal-creative-wordpress-portfolio/full_screen_preview/17753077",
                    "name": "Alinti"
                },
                {
                    "desc": "提供了一些设计优雅、干净、漂亮的WordPress主题，包括免费和付费的",
                    "url": "https://www.famethemes.com/",
                    "name": "famethemes"
                },
                {
                    "desc": "提供了很多用于Github、Wordpress的徽章，拥有多种定制化功能",
                    "url": "https://shields.io/",
                    "name": "ShieldsIO"
                },
                {
                    "desc": "专注WordPress高端主题设计与开发，为您提供一个现代、干净的WEB站点！",
                    "url": "https://salongweb.com/",
                    "name": "萨龙网络"
                },
                {
                    "desc": "wordpress主题，设计师的个人博客，简约大方，创意十足",
                    "url": "https://blog.limiabc.com/",
                    "name": "里米先生"
                }
            ]
        },
        {
            "title": "个人博客",
            "list": [
                {
                    "desc": "目前专注前端技术，对图形学也有一些研究",
                    "url": "https://supercodepower.com/",
                    "name": "卤蛋实验室"
                },
                {
                    "desc": "某前端大牛的博客，网站风格很好，文章质量也很高，主要是 React 以及 CSS 相关的",
                    "url": "https://www.joshwcomeau.com/",
                    "name": "Josh W Comeau"
                },
                {
                    "desc": "《Javascript 高级程序设计》以及各种前端书籍译者李松峰老师的博客",
                    "url": "https://lisongfeng.cn/",
                    "name": "为之漫笔"
                },
                {
                    "desc": "作者的技术栈非常广泛，博客的内容也是丰富多样",
                    "url": "https://www.netnr.com/",
                    "name": "NET牛人"
                },
                {
                    "desc": "作者的博客主要是前端开发相关工具的分享，同时比较重视用户体验，有很多有意思的干货",
                    "url": "https://www.bestvist.com/h",
                    "name": "Bestvist博客"
                },
                {
                    "desc": "作者是掘金年度作者，维护了一个 14K star的开源项目，并出版了小册前端面试之道",
                    "url": "https://github.com/KieSun/Dream",
                    "name": "KieSun"
                },
                {
                    "desc": "阿里玉伯的个人博客，有很多非技术文章",
                    "url": "https://github.com/lifesinger/blog/issues",
                    "name": "lifesinger"
                },
                {
                    "desc": "有很多不错的文章，包括 Github、JS、React、Vue 等",
                    "url": "https://github.com/biaochenxuying/blog",
                    "name": "夜尽天明"
                },
                {
                    "desc": "特效比较多，不过加载有点慢，Github 上有一些小项目",
                    "url": "https://hongjiansu.com/",
                    "name": "Hongjian Su"
                },
                {
                    "desc": "字节跳动前端大牛，不过文章比较少，基本上就是 RxJS 和 TS 相关文章",
                    "url": "https://lynvv.xyz/",
                    "name": "太狼"
                },
                {
                    "desc": "字节跳动前端大牛，有前后端相关笔记，同时还有一些工具和随笔",
                    "url": "https://top.wsmpage.cn/",
                    "name": "Geronimo 邈"
                },
                {
                    "desc": "字节跳动前端大牛，专注在 TS 和 React 领域",
                    "url": "https://blog.staleclosure.com/",
                    "name": "杨健的博客"
                },
                {
                    "desc": "一个很强的大牛，造了很多轮子，尤其是文言文编程语言最为惊艳",
                    "url": "https://lingdong.works/",
                    "name": "Lingdong"
                },
                {
                    "desc": "字节跳动公司某前端员工的博客",
                    "url": "https://github.com/10081677wc/blog/issues",
                    "name": "10081677wc"
                },
                {
                    "desc": "这是一位大神，你在网上看到的 90% 的漫威非官方海报都可能出自他手",
                    "url": "https://www.instagram.com/bosslogic/",
                    "name": "@bosslogic"
                },
                {
                    "desc": "用各种wearable记录自己的数据 特效特别酷炫",
                    "url": "http://aprilzero.com/",
                    "name": "Aanad Sharma"
                },
                {
                    "desc": "这位前端开发者的博客都比较基础，而且很多都是总结性质的，很适合给初学者开扩视野",
                    "url": "http://www.cnblogs.com/AllenChou/",
                    "name": "AllenChou博客"
                },
                {
                    "desc": "主要是CSS相关文章，还有JS以及Vue。",
                    "url": "https://github.com/anjia/blog",
                    "name": "anjia blog"
                },
                {
                    "desc": "风格诡谲暗黑手绘草稿儿一样的网站，一段充满特效的旅程就此开始",
                    "url": "http://aualeu.ro/",
                    "name": "Auăleu"
                },
                {
                    "desc": "应用多种媒介来展示不同内容，博主是这个时代少见的同时精通电子学、编程、交互设计的全能型天才。",
                    "url": "http://worrydream.com/",
                    "name": "Bret Victor"
                },
                {
                    "desc": "腾讯的一位前端大牛，github有1K+follower，前端基础很好，值得学习",
                    "url": "http://www.cnblogs.com/coco1s/",
                    "name": "chokcoco"
                },
                {
                    "desc": "主要是前端领域的基础知识和性能优化类文章",
                    "url": "https://github.com/creeperyang/blog",
                    "name": "creeperyang前端博客"
                },
                {
                    "desc": "Dalin Huang（全栈工程师）的个人博客，做的很有意思",
                    "url": "https://dalinhuang99.github.io/",
                    "name": "Dalin Huang"
                },
                {
                    "desc": "作者的文章大多都是从某一问题出发进行讲解，不涉及框架工具之类，很有意思",
                    "url": "https://ucren.com/blog/",
                    "name": "Dron博客"
                },
                {
                    "desc": "Ashley 的个人博客，一位外国妹子，主题就是摄影作品展示",
                    "url": "http://girlwithacamera.co.uk/",
                    "name": "Girl With a Camera"
                },
                {
                    "desc": "一个研究生自学前端的大牛，拿到了BAT的Special Offer，很多文章都写得非常好！",
                    "url": "http://harttle.com/",
                    "name": "Harttle Land"
                },
                {
                    "desc": "没有乱入的特效，简单朴素，但是很清晰地展示了自己的作品",
                    "url": "https://henrybrown.me/",
                    "name": "Henry Brown"
                },
                {
                    "desc": "文章内容包括JS、HTML5、CSS3、Vue、Node.js、React Native、小程序等方面。",
                    "url": "http://林鑫的个人博客",
                    "name": "https://github.com/lin-xin/blog/"
                },
                {
                    "desc": "专注前端开发，同时也有一些关于HTTP和Web服务器的文章",
                    "url": "https://imququ.com/",
                    "name": "Jerry Qu的小站"
                },
                {
                    "desc": "大部分都是基础知识，少量框架相关",
                    "url": "https://github.com/laihuamin/JS-total",
                    "name": "JS流程图"
                },
                {
                    "desc": "将音乐与设计结合到一起的个人网站，动效的设计可以称得上惊艳。",
                    "url": "http://kenjiendo.com/",
                    "name": "KENJI ENDO"
                },
                {
                    "desc": "仿github设计的个人博客，很有想法",
                    "url": "http://blog.dingjian.name/#/",
                    "name": "Last Blog"
                },
                {
                    "desc": "李成熙，腾讯云高级工程师。专注于性能优化、工程化和小程序服务。",
                    "url": "https://github.com/lcxfs1991/blog",
                    "name": "leehey's blog"
                },
                {
                    "desc": "分享自己的生活多于前端",
                    "url": "http://litten.me/",
                    "name": "Litten博客"
                },
                {
                    "desc": "极简主义的代表，可以尝试着随便点点",
                    "url": "http://www.matrix67.com/",
                    "name": "Matrix67.com"
                },
                {
                    "desc": "3D立体博客，可以通过WSAD+空格+鼠标进行视角转换",
                    "url": "http://maxogden.github.io/slides/nodepdx/index.html",
                    "name": "Maxodgen的作品展示"
                },
                {
                    "desc": "12岁，4年码龄，你凭什么不努力。。",
                    "url": "http://mosesfinlay.com/",
                    "name": "mosesfinlay"
                },
                {
                    "desc": "JS大神Zakas作者的个人博客，如果你不知道Zakas是谁。。",
                    "url": "https://www.nczonline.net/",
                    "name": "NCZOnline"
                },
                {
                    "desc": "黑色主色调搭配着怪诞的插画，个人风格非常强烈",
                    "url": "http://www.nerisson.fr/",
                    "name": "nerisson.fr"
                },
                {
                    "desc": "图片的投影会随着鼠标的位置发生变化，很有趣",
                    "url": "http://objetorocha.com/",
                    "name": "Objeto Rocha"
                },
                {
                    "desc": "精致的配色，精致的排版，简单精致的特效",
                    "url": "http://www.paulineosmont.com/",
                    "name": "Pauline Osmont"
                },
                {
                    "desc": "一个拿了BAT头条小米领英等公司十几个offer的大牛。。",
                    "url": "https://www.phodal.com/",
                    "name": "PHODAL"
                },
                {
                    "desc": "webpack和git相关文章占多数，目前总共16篇文章",
                    "url": "https://github.com/pigcan/blog",
                    "name": "pigcan/blog"
                },
                {
                    "desc": "发现于github，主要分享基础知识和Vue相关知识。",
                    "url": "https://github.com/dwqs/blog",
                    "name": "Pomy blog"
                },
                {
                    "desc": "首页很炫，作者并不算前端大牛，但是擅长总结，内容很实用",
                    "url": "http://blog.poetries.top/",
                    "name": "Potery's Blog"
                },
                {
                    "desc": "某人的个人博客，鼠标滑过特效是水墨风",
                    "url": "https://www.t3kila.com/",
                    "name": "Romain Wurtz"
                },
                {
                    "desc": "炫酷的动画效果",
                    "url": "http://strml.net/",
                    "name": "STRML"
                },
                {
                    "desc": "作者是一个前端大牛，不仅有自己开发的移动端UI框架，还有三本前端书籍",
                    "url": "http://ghmagical.com/",
                    "name": "TG-路虽远，无所畏"
                },
                {
                    "desc": "你需要知道的前端知识，多是一些很冷门但很基础的知识。",
                    "url": "https://github.com/justjavac/the-front-end-knowledge-you-may-not-know/issues?page=1&q=is:issue+is:open",
                    "name": "the-front-end-knowledge-you-may-not-know"
                },
                {
                    "desc": "一个跨领域多学科设计师，前Spotify的首席设计师和艺术指导，设计界的网红",
                    "url": "http://www.vanschneider.com/",
                    "name": "Tobias van Schneider"
                },
                {
                    "desc": "专注前端开发,关注用户体验,内容很丰富,不仅有前端相关的新闻,还有一些教程资源,同时还有各种中文文档,是目前为止翻译的最好的中文文档,最重要的是,这竟然是某个前端开发工程师的个人网站!",
                    "url": "http://www.css88.com/",
                    "name": "Web前端开发"
                },
                {
                    "desc": "简单大气，一目了然，独特的时间线以及信息表达方式",
                    "url": "http://www.wendyshijia.com/",
                    "name": "Wendy Shijia"
                },
                {
                    "desc": "排版很不错的一个网站，hover特效简单精致",
                    "url": "http://iconmoon.com/",
                    "name": "关于 JJ Ying"
                },
                {
                    "desc": "冴羽写博客的地方，预计写四个系列：JavaScript深入系列、JavaScript专题系列、ES6系列、React系列。",
                    "url": "https://github.com/mqyqingfeng/Blog",
                    "name": "冴羽的博客"
                },
                {
                    "desc": "侧重于前端基础知识以及react、node和webpack等入门与底层原理分析",
                    "url": "https://github.com/ljianshu/Blog",
                    "name": "前端工匠"
                },
                {
                    "desc": "很别致的一个网站，排版配色都很不错",
                    "url": "http://www.yelanqiu.com/",
                    "name": "叶蓝秋"
                },
                {
                    "desc": "有很多Wordpress、小程序相关的文章，同时网站特效很不错",
                    "url": "https://www.yeehee.cn/",
                    "name": "叶赫先生"
                },
                {
                    "desc": "一个交互型网站，可以尝试输入各种词，比如“呵呵”",
                    "url": "http://miaoxiaoer.com/",
                    "name": "喵小二"
                },
                {
                    "desc": "全屏滚动，特效很多",
                    "url": "http://dreamwq.com/home/",
                    "name": "大冬瓜主页"
                },
                {
                    "desc": "作者喜欢分享，软件、工具、书籍等等。",
                    "url": "https://www.runningcheese.com/",
                    "name": "奔跑中的奶酪"
                },
                {
                    "desc": "廖雪峰，全栈工程师，python专家，关于前端的教程没有什么特色，可以作为补漏的教材吧。",
                    "url": "http://www.liaoxuefeng.com/",
                    "name": "廖雪峰"
                },
                {
                    "desc": "一个老前端的个人网站，首页很酷",
                    "url": "http://www.bingo929.com/",
                    "name": "彬Go的个人网站"
                },
                {
                    "desc": "我爱水煮鱼是一个关注 WordPress 开源博客平台应用和互联网的独立 IT 博客。为广大 WordPress 爱好者提供了大量关于 WordPress 的插件、代码以及相关的建站经验分享，同时提供了 WordPress 主题制作与 WordPress 博客客户化等商业服务。",
                    "url": "https://blog.wpjam.com/",
                    "name": "我爱水煮鱼blog"
                },
                {
                    "desc": "技术胖-胜洪宇关注web前端技术-前端免费视频第一博客，里面有很多免费的视频教程。",
                    "url": "http://jspang.com/",
                    "name": "技术胖博客"
                },
                {
                    "desc": "前端进阶系列和Vue进阶系列写的很不错",
                    "url": "https://github.com/yygmind/blog",
                    "name": "木易杨blog"
                },
                {
                    "desc": "梁少峰的个人博客，有很多对于Vue、React的前端知识总结",
                    "url": "https://github.com/youngwind/blog",
                    "name": "梁少峰的个人博客"
                },
                {
                    "desc": "wordpress搭建的博客，很有创造力",
                    "url": "https://mikelin.cn/",
                    "name": "楠哥说"
                },
                {
                    "desc": "链接为汤姆大叔博客中的深入理解JavaScript系列文章，虽然不适合初学者，但是进阶还是知识满满",
                    "url": "http://www.cnblogs.com/tomxu/archive/2011/12/15/2288411.html",
                    "name": "汤姆大叔的博客"
                },
                {
                    "desc": "将近三十篇文章，多集中在基础知识和Vue",
                    "url": "https://github.com/ljianshu/Blog",
                    "name": "浪里行舟"
                },
                {
                    "desc": "燕十八,PHP培训师,但是涉猎比较广,而且个人感觉讲的比较明白清楚,博客上的内容虽然比较少,但是肯定会有所帮助.",
                    "url": "http://www.yanshiba.com/",
                    "name": "燕十八博客"
                },
                {
                    "desc": "刘看山作为知乎推出的吉祥物，其上线以来就饱受争议（大部分因为长相），不过这个小站做的还是蛮不错的",
                    "url": "https://liukanshan.zhihu.com",
                    "name": "知乎的刘看山"
                },
                {
                    "desc": "一个专注于分享的网站",
                    "url": "https://shenzjd.com/",
                    "name": "神族九帝"
                },
                {
                    "desc": "程志辉的个人博客",
                    "url": "https://www.qqzmly.com/",
                    "name": "程志辉博客"
                },
                {
                    "desc": "很酷炫的一个个人站，一个 设计+代码 多修的“手艺人”。",
                    "url": "http://glexe.com/#/intro",
                    "name": "第5维度™工作室"
                },
                {
                    "desc": "简洁大气，交互很有个性，背景音乐也不错，博主是湖南卫视芒果TV视觉设计师",
                    "url": "http://www.syg315.com/",
                    "name": "素云阁"
                },
                {
                    "desc": "少年博主，每年都会进行一次改版，每次改版都能看到他的切实成长(摄影前端写作身高等各方各面的)",
                    "url": "https://www.dandyweng.com/",
                    "name": "翁天信的个人博客"
                },
                {
                    "desc": "机器学习大神莫烦的个人博客",
                    "url": "https://morvanzhou.github.io/tutorials/",
                    "name": "莫烦Python"
                },
                {
                    "desc": "关于网络方面的技术博客，作者对网络中的一些现象和技术点做了比较通透的解释。",
                    "url": "http://blog.sina.com.cn/u/5691553152",
                    "name": "车小胖的博客"
                },
                {
                    "desc": "阮一峰，经济学博士，但是也是IT研究人员，主要专注于网站制作，他阅读量非常大，而且涉猎面比较广，相信这个网站教给你的不会局限于技术。",
                    "url": "http://www.ruanyifeng.com/home.html",
                    "name": "阮一峰"
                },
                {
                    "desc": "每周五阮一峰都会在博客上记录过去一周，看到的值得分享的东西。",
                    "url": "https://www.yuque.com/ruanyf/share",
                    "name": "阮一峰每周分享"
                }
            ]
        },
        {
            "title": "人工智能",
            "list": [
                {
                    "desc": "智能好用的聊天机器人，可以非常方便接入",
                    "url": "http://www.turingapi.com/",
                    "name": "图灵机器人"
                },
                {
                    "desc": "关于AI的各种信息，包括新闻和资源下载，旨在让大家更了解人工智能",
                    "url": "http://www.atyun.com/",
                    "name": "AiTechYun"
                },
                {
                    "desc": "基于Python语言的机器学习工具，可以很轻松的实现分类、聚类、回归等",
                    "url": "http://sklearn.lzjqsdd.com/",
                    "name": "scikit-learn"
                },
                {
                    "desc": "一个交互型网站，可以尝试输入各种词，比如“呵呵”",
                    "url": "http://miaoxiaoer.com/",
                    "name": "喵小二"
                },
                {
                    "desc": "wordpress主题，设计师的个人博客，简约大方，创意十足",
                    "url": "https://blog.limiabc.com/",
                    "name": "里米先生"
                }
            ]
        },
        {
            "title": "优秀网站",
            "list": [
                {
                    "desc": "是一项为期三年的通过未知的史诗级水下之旅,探索世界上最不寻常的生物，网站动效和视觉效果很不错",
                    "url": "http://aquatilis.tv/aquatilis-expedition/",
                    "name": "Aquatilis Expedition"
                },
                {
                    "desc": "一段关于Ben来历的视频，营造出一个很酷的场景。它采用了很另类的视觉设计",
                    "url": "http://benthebodyguard.com/",
                    "name": "Ben the Bodyguard"
                },
                {
                    "desc": "Bulma是一个基于Flexbox的开源CSS框架，网站整体布局和设计都很精致",
                    "url": "https://bulma.io/",
                    "name": "Bulma"
                },
                {
                    "desc": "利用 Canva 的拖放功能和布局，可以设计、分享和打印名片、徽标、演示文稿及更多内容。",
                    "url": "https://www.canva.com/",
                    "name": "Canva"
                },
                {
                    "desc": "codepen网站的设计模式",
                    "url": "https://codepen.io/guide",
                    "name": "Codepen设计模式"
                },
                {
                    "desc": "在线生成简历",
                    "url": "https://enhancv.com/",
                    "name": "Enhancv"
                },
                {
                    "desc": "Ashley 的个人博客，一位外国妹子，主题就是摄影作品展示",
                    "url": "http://girlwithacamera.co.uk/",
                    "name": "Girl With a Camera"
                },
                {
                    "desc": "生成漂亮的CSS渐变，操作简单，网站设计也很棒",
                    "url": "https://www.grabient.com/",
                    "name": "Grabient"
                },
                {
                    "desc": "位于比利时的一个平面设计工作室网站，一些hover特效蛮不错的",
                    "url": "https://gravual.com/en/",
                    "name": "GRAVUAL™ – Graphic Design Studio in Antwerp"
                },
                {
                    "desc": "按钮的交互方式很特别",
                    "url": "https://hakim.se/",
                    "name": "Hakim.se"
                },
                {
                    "desc": "将音乐与设计结合到一起的个人网站，动效的设计可以称得上惊艳。",
                    "url": "http://kenjiendo.com/",
                    "name": "KENJI ENDO"
                },
                {
                    "desc": "Kepler.gl是Uber开发的一个强大的地理空间分析工具，可用于大规模数据集。",
                    "url": "https://uber.github.io/kepler.gl/#/",
                    "name": "Kepler.gl"
                },
                {
                    "desc": "黑色主色调搭配着怪诞的插画，个人风格非常强烈",
                    "url": "http://www.nerisson.fr/",
                    "name": "nerisson.fr"
                },
                {
                    "desc": "404页面优秀设计案例展示",
                    "url": "http://oops.re/",
                    "name": "Oops Pages"
                },
                {
                    "desc": "精致的配色，精致的排版，简单精致的特效",
                    "url": "http://www.paulineosmont.com/",
                    "name": "Pauline Osmont"
                },
                {
                    "desc": "一款App的介绍视频，通过下雨打雷等音效让你身临其境",
                    "url": "http://www.rainymood.com/",
                    "name": "Rainy Mood"
                },
                {
                    "desc": "某人的个人博客，鼠标滑过特效是水墨风",
                    "url": "https://www.t3kila.com/",
                    "name": "Romain Wurtz"
                },
                {
                    "desc": "可以用鼠标随便涂画，有同名App",
                    "url": "http://weavesilk.com/",
                    "name": "Silk"
                },
                {
                    "desc": "一个跨领域多学科设计师，前Spotify的首席设计师和艺术指导，设计界的网红",
                    "url": "http://www.vanschneider.com/",
                    "name": "Tobias van Schneider"
                },
                {
                    "desc": "一个简单的API，用于嵌入来自Unsplash的高分辨率照片。",
                    "url": "https://source.unsplash.com/",
                    "name": "Unsplash Source"
                },
                {
                    "desc": "Uplabs是一个创意集中的社区，每天都会提供最好的特效灵感并提供下载",
                    "url": "https://www.uplabs.com",
                    "name": "Uplabs"
                },
                {
                    "desc": "体会如何通过字体、颜色、排版表现力度和冲击感",
                    "url": "http://www.vo2-group.com/en",
                    "name": "VO2 Group"
                },
                {
                    "desc": "跟踪项目花费的时间，需要安装插件",
                    "url": "https://wakatime.com/",
                    "name": "WakaTime"
                },
                {
                    "desc": "提供了多种wordpress主题",
                    "url": "http://www.xintheme.com/",
                    "name": "xintheme"
                },
                {
                    "desc": "专注于婚纱摄影的网站，网站做的很不错",
                    "url": "http://www.sanyachloe.com/",
                    "name": "克洛伊摄影"
                },
                {
                    "desc": "创造狮，一个创意工作者的导航，专注分享正版优质设计、前端、产品、运营的书签导航",
                    "url": "http://chuangzaoshi.com/",
                    "name": "创造狮"
                },
                {
                    "desc": "包图网的内容包括图标图片，图标素材，图标模板，图标设计等",
                    "url": "https://ibaotu.com/",
                    "name": "包图网"
                },
                {
                    "desc": "日本的二十四节气网站，配色很好",
                    "url": "http://nipponcolors.com/",
                    "name": "日本二十四节气"
                },
                {
                    "desc": "电影《言叶之庭》官网",
                    "url": "http://www.kotonohanoniwa.jp/",
                    "name": "言叶之庭官网"
                }
            ]
        },
        {
            "title": "值得收藏",
            "list": [
                {
                    "desc": "一个公益网站，收集了唐诗 57612 首，宋诗 254248 首，宋词 21053 首，元曲 11057 首，在 PC 和移动端上都有很好地阅读体验",
                    "url": "https://hz.xusenlin.com/",
                    "name": "汉字之美"
                },
                {
                    "desc": "今日热榜提供各站热榜聚合：微信、今日头条、百度、知乎、V2EX、微博、贴吧、豆瓣、天涯、虎扑、Github、抖音...追踪全网热点、简单高效阅读。",
                    "url": "https://tophub.today/",
                    "name": "今日热榜"
                },
                {
                    "desc": "全历史(Allhistory）以AI知识图谱为核心引擎，通过高度时空化、关联化数据的方式构造及展现数字人文内容，尤其是历史知识。让用户沉浸在纵横开阔、左图右史的（历史、人文、社科等）知识海洋中。",
                    "url": "https://www.allhistory.com/",
                    "name": "全历史"
                },
                {
                    "desc": "这是一位大神，你在网上看到的 90% 的漫威非官方海报都可能出自他手",
                    "url": "https://www.instagram.com/bosslogic/",
                    "name": "@bosslogic"
                },
                {
                    "desc": "免费的在线音乐播放器。收录全网最新无损音乐，提供无损MP3音乐免费下载，免开VIP尽享全网音乐免费播放下载！",
                    "url": "http://mu.aynu.top/",
                    "name": "AYNU音乐实验室"
                },
                {
                    "desc": "主要提供丰富的影视资源下载,并且可以在线云播预览,上映之后三个月内发布枪版,三个月之后发布蓝光高清下载",
                    "url": "https://www.bdys.co/",
                    "name": "BD影视"
                },
                {
                    "desc": "有很多电影和电视剧，同时提供在线观看",
                    "url": "http://v.apkgm.top/",
                    "name": "BTtwo"
                },
                {
                    "desc": "这个网站上有超过4000份对照表，包括Linux、MySQL、Vim等等",
                    "url": "https://www.cheatography.com/",
                    "name": "Cheatography"
                },
                {
                    "desc": "分享 GitHub 上入门级、有趣的开源项目",
                    "url": "https://hellogithub.com/",
                    "name": "Hello Github"
                },
                {
                    "desc": "免费的短链服务，可以将长链接转换为短链",
                    "url": "http://linkFox.io",
                    "name": "linkfox"
                },
                {
                    "desc": "致力于收集jQuery插件和提供各种jQuery特效的详细使用方法，提供在线预览，jQuery插件下载及教程。",
                    "url": "http://www.jq22.com/",
                    "name": "jQuery插件库"
                },
                {
                    "desc": "Nneets是你的追剧管家，你可以把目前追的各种影视、综艺等记录下来，做追剧清单，更新永不落。它不生产观看渠道，只是各种观看来源的搬运工，并且一般都会有好几个观看源供君选择，还加上了有无广告、是否在线播放等标签。",
                    "url": "https://neets.cc/",
                    "name": "Neets"
                },
                {
                    "desc": "好工具网致力于收集和打造各种简单易用的在线工具，目前已有500多个工具。",
                    "url": "http://www.nicetool.net/",
                    "name": "Nicetool"
                },
                {
                    "desc": "一款markdown编辑器和阅读器",
                    "url": "https://typora.io/",
                    "name": "typora"
                },
                {
                    "desc": "临时邮箱是一款帮助我们解决某些网站需要使用到我们自己的真实邮箱，但是我们又不想暴露我们的邮箱的工具。  它不需要注册，并且它的邮箱持续24小时，比十分钟邮箱保持时间更长，可以任意设置邮箱名，随时更换邮箱；一款个人认为十分实用的工具。",
                    "url": "http://24mail.chacuo.net/",
                    "name": "临时邮箱"
                },
                {
                    "desc": "这个网站的论文检索结果和知网的搜索结果基本一样，而且这个网站每个账号前期免费提供论文下载，当你的下载次数没了，你完全可以用其它邮箱再注册其它账号使用；当然，如果你不想再注册账号，这个网站提供一块钱随意下载论文一天，也是非常值得尝试。",
                    "url": "https://www.cn-ki.net/",
                    "name": "仿知网"
                },
                {
                    "desc": "吾爱破解论坛致力于软件安全与病毒分析的前沿，丰富的技术版块交相辉映，由无数热衷于软件加密解密及反病毒爱好者共同维护",
                    "url": "https://www.52pojie.cn/",
                    "name": "吾爱破解"
                },
                {
                    "desc": "提供免费电子书下载、分享。包括mobi、epud、pdf、txt格式，kindle电子书下载",
                    "url": "http://www.ireadweek.com/index.php/",
                    "name": "周读"
                },
                {
                    "desc": "GitHub 上开源、有趣的 开源书籍 – 适合新手入门的 开源书籍",
                    "url": "https://hellogithub.com/periodical/category/开源书籍/?page=1",
                    "name": "开源书籍"
                },
                {
                    "desc": "国内最优秀的高清电影下载网站，每天更新迅雷中英双字电影百度云盘下载，搜集和分享高清中英双字电影百度云盘下载站，致力于构建最大的高清电影下载汇聚地，迅雷电影下载、免费电影下载尽在电影首发站高清电影下载站。",
                    "url": "http://www.dysfz.vip/",
                    "name": "电影首发站"
                },
                {
                    "desc": "这里有最新最全的美剧资源和电影资源，同时支持在线播放",
                    "url": "http://www.meijushe.cc/",
                    "name": "美剧社"
                },
                {
                    "desc": "多站合一音乐搜索解决方案，可搜索试听网易云音乐、QQ音乐、酷狗音乐、酷我音乐、虾米音乐、百度音乐、一听音乐、咪咕音乐、荔枝FM、蜻蜓FM、喜马拉雅FM、全民K歌、5sing原创翻唱音乐。",
                    "url": "https://shenzjd.com/shenzjd/music/",
                    "name": "音乐搜索器"
                }
            ]
        },
        {
            "title": "创意十足",
            "list": [

                {
                    "desc": "收集了很多酷酷的个人网站，多为设计师的个人博客，都很有创意，特效满满",
                    "url": "http://www.c945.com/classlist/collect6_default.html",
                    "name": "PERSONAL酷站"
                },
                {
                    "desc": "权力的游戏3d地图导览",
                    "url": "https://alex2wong.github.io/Game-of-Throne-Map/index.html",
                    "name": "权力的游戏3d地图导览"
                },
                {
                    "desc": "收录了各种毒鸡汤，每日一句毒鸡汤，轻松生活每一天",
                    "url": "https://www.cxyxiaowu.com/soup.html",
                    "name": "毒鸡汤"
                },
                {
                    "desc": "可以问任何问题，然后得到一个随机的答案。。",
                    "url": "https://www.8-ball-magic.com/index.php",
                    "name": "Magic 8 Ball"
                },
                {
                    "desc": "150 Amazing Examples of CSS Animation & Effects",
                    "url": "https://1stwebdesigner.com/css-effects/",
                    "name": "150 CSS Effects"
                },
                {
                    "desc": "用canvas绘制了2018这四个数字，特效很赞",
                    "url": "http://2018.makemepulse.com/",
                    "name": "2018 Make Me Pulse"
                },
                {
                    "desc": "专门搜集国外高质量的网站，而且定期更新，非常酷炫",
                    "url": "http://www.68design.net/cool/",
                    "name": "68Design"
                },
                {
                    "desc": "用各种wearable记录自己的数据 特效特别酷炫",
                    "url": "http://aprilzero.com/",
                    "name": "Aanad Sharma"
                },
                {
                    "desc": "在线生成各种CSS动画",
                    "url": "http://animista.net",
                    "name": "Animista"
                },
                {
                    "desc": "利用ASCII字符进行绘制，可以调整大小，自由绘制，可以绘制出类似于佛祖那样的代码。",
                    "url": "http://asciiflow.com/",
                    "name": "ASCIIFlow Infinity"
                },
                {
                    "desc": "风格诡谲暗黑手绘草稿儿一样的网站，一段充满特效的旅程就此开始",
                    "url": "http://aualeu.ro/",
                    "name": "Auăleu"
                },
                {
                    "desc": "通过点击手指添加不同乐器与和弦",
                    "url": "http://www.basics09.de/",
                    "name": "Basics09"
                },
                {
                    "desc": "在高高的草地上跟着鸟儿去追逐风和探索五颜六色吧",
                    "url": "https://bellwoods.xyz/",
                    "name": "bellwoods"
                },
                {
                    "desc": "一段关于Ben来历的视频，营造出一个很酷的场景。它采用了很另类的视觉设计",
                    "url": "http://benthebodyguard.com/",
                    "name": "Ben the Bodyguard"
                },
                {
                    "desc": "利用混合模式生成的CSS渐变图案",
                    "url": "http://bennettfeely.com/gradients/",
                    "name": "Bennett Feely的图案库"
                },
                {
                    "desc": "Simurai以其精湛的手法将border-radius发挥到了极致，其糖果按钮展示了各种奇妙的形状",
                    "url": "http://simurai.com/archive/buttons/",
                    "name": "BonBon"
                },
                {
                    "desc": "应用多种媒介来展示不同内容，博主是这个时代少见的同时精通电子学、编程、交互设计的全能型天才。",
                    "url": "http://worrydream.com/",
                    "name": "Bret Victor"
                },
                {
                    "desc": "Browserhacks是一个记录特定的CSS和JavaScript的Hack写法的列表。",
                    "url": "http://browserhacks.com/",
                    "name": "Browserhacks"
                },
                {
                    "desc": "codepen网站的设计模式",
                    "url": "https://codepen.io/guide",
                    "name": "Codepen设计模式"
                },
                {
                    "desc": "你可以在这里找到一些寓教于乐的游戏，目前有Flexbox和CSS Grid两款",
                    "url": "https://codepip.com/",
                    "name": "Codepip"
                },
                {
                    "desc": "Codrops是一个专注于网页设计和开发的博客，发布最新的互联网技术和新的可能性的趋势的文章和相关教程。",
                    "url": "https://tympanus.net/codrops/",
                    "name": "Codrops"
                },
                {
                    "desc": "它有很多可以在线预览且兼具视觉化以及交互性的动效，每个案例后面都附有代码。",
                    "url": "https://tympanus.net/codrops/",
                    "name": "Codrops"
                },
                {
                    "desc": "一些美妙的线条，不断前进和交错，同时也会90度转弯，碰到时会展示出弹性，线条和背景的颜色会不断变化，但它们都有自己的生命周期，时间到了就会消失在幕布上，看看它们在画什么。",
                    "url": "http://www.mta.me/",
                    "name": "Conductor"
                },
                {
                    "desc": "关于CSS动画的文章，技巧和教程。",
                    "url": "https://cssanimation.rocks/",
                    "name": "CSS Animation"
                },
                {
                    "desc": "作者使用CSS绘制了很多小icon，其次页面做的也很精致",
                    "url": "https://cssicon.space/#/",
                    "name": "CSS ICON"
                },
                {
                    "desc": "使用CSS时的一些技巧和注意事项",
                    "url": "https://css-tricks.com/",
                    "name": "CSS-Tricks"
                },
                {
                    "desc": "展示了CSS渐变早在2011年就能够实现的效果",
                    "url": "http://lea.verou.me/css3patterns/",
                    "name": "CSS3图案库"
                },
                {
                    "desc": "作者总结了17个有趣实用的CSS 3悬停效果教程，创意十足，非常酷炫！",
                    "url": "http://www.uisdc.com/css3-hover-effects-tutorials",
                    "name": "CSS3悬停效果"
                },
                {
                    "desc": "展示了SVG能够实现的简单CSS图案",
                    "url": "https://philiprogers.com/svgpatterns/",
                    "name": "CSS图案库的SVG版实现"
                },
                {
                    "desc": "css抖动插件，通过添加类名就可以给元素添加各式各样的抖动特效",
                    "url": "http://www.webhek.com/post/css-shake.html",
                    "name": "css抖动"
                },
                {
                    "desc": "从视觉上形象地展示了基于CSS设计的网站所能达到的效果",
                    "url": "http://www.csszengarden.com",
                    "name": "CSS禅意花园"
                },
                {
                    "desc": "如果设计动效时候没有灵感时可以参照Elasticode上各种丰富的交互动效，包括按钮的点击效果、页面切换/跳转、图文出现/消失、元素变换等效果。",
                    "url": "http://www.elasticode.com/",
                    "name": "Elasticode"
                },
                {
                    "desc": "各种H5特效，每种特效都有其独特的设计和功能",
                    "url": "http://fff.cmiscm.com/",
                    "name": "FFF互动"
                },
                {
                    "desc": "一个带有简单交互的故事动画，通过鼠标点击使你融入故事中",
                    "url": "http://goinghome.302chanwoo.com/",
                    "name": "Going Home"
                },
                {
                    "desc": "Grid Garden是Codepip创建的一款寓教于乐的在线网页游戏，游戏共有28关。玩家可以通过过关的方式掌握CSS最新标准CSS Grid。",
                    "url": "https://cssgridgarden.com/",
                    "name": "Grid Garden"
                },
                {
                    "desc": "将TodoList游戏化，把你的真实生活当成游戏吧",
                    "url": "https://habitica.com/static/home",
                    "name": "habitica"
                },
                {
                    "desc": "一个在线的用手柄进行的游戏，画面很好看，你控制一个女生进行探索。",
                    "url": "https://heraclosgame.com/",
                    "name": "Heraclos"
                },
                {
                    "desc": "很火的一个人体时钟，可以直接看其源码引用，本质上是用flash实现的",
                    "url": "http://blog.itmyhome.com/hone_hone_clock/",
                    "name": "Hone Hone Clock"
                },
                {
                    "desc": "总结了很多html5做的小游戏",
                    "url": "http://html5.huceo.com/",
                    "name": "html5游戏"
                },
                {
                    "desc": "程序员做的纯HTML5爱心表白动画，值得学习！",
                    "url": "http://www.html5tricks.com/demo/jiaoben1892/index.html",
                    "name": "HTML5爱心表白动画"
                },
                {
                    "desc": "将音乐与设计结合到一起的个人网站，动效的设计可以称得上惊艳。",
                    "url": "http://kenjiendo.com/",
                    "name": "KENJI ENDO"
                },
                {
                    "desc": "仿github设计的个人博客，很有想法",
                    "url": "http://blog.dingjian.name/#/",
                    "name": "Last Blog"
                },
                {
                    "desc": "以动画和闯关的形式来学习Git",
                    "url": "https://learngitbranching.js.org/",
                    "name": "Learn Git Branching"
                },
                {
                    "desc": "极简主义的代表，可以尝试着随便点点",
                    "url": "http://www.matrix67.com/",
                    "name": "Matrix67.com"
                },
                {
                    "desc": "3D立体博客，可以通过WSAD+空格+鼠标进行视角转换",
                    "url": "http://maxogden.github.io/slides/nodepdx/index.html",
                    "name": "Maxodgen的作品展示"
                },
                {
                    "desc": "采用类似Markdown的语法，通过单纯的文本生成图表和流程图",
                    "url": "https://mermaidjs.github.io/",
                    "name": "mermaid"
                },
                {
                    "desc": "给图片添加特效的网站，操作简单，还可以导出为gif，创意非凡！",
                    "url": "https://getmosh.io/",
                    "name": "MoshImages"
                },
                {
                    "desc": "黑色主色调搭配着怪诞的插画，个人风格非常强烈",
                    "url": "http://www.nerisson.fr/",
                    "name": "nerisson.fr"
                },
                {
                    "desc": "好工具网致力于收集和打造各种简单易用的在线工具，目前已有500多个工具。",
                    "url": "http://www.nicetool.net/",
                    "name": "Nicetool"
                },
                {
                    "desc": "这是一个以故事形式来展现的网站，动画很有感觉，所有的画面非常的漂亮，就像在看电影一样，同时网站还带有一至交互体验，让用户去选择。",
                    "url": "http://oatthegoat.co.nz/",
                    "name": "Oat the Goat"
                },
                {
                    "desc": "图片的投影会随着鼠标的位置发生变化，很有趣",
                    "url": "http://objetorocha.com/",
                    "name": "Objeto Rocha"
                },
                {
                    "desc": "这位站长制作了许多纯css图标，更不可思议的是，所有的图标只用到了一个标签！",
                    "url": "http://one-div.com/",
                    "name": "One div"
                },
                {
                    "desc": "这个网站的特效都很不错。。",
                    "url": "https://www.packwire.com/",
                    "name": "packwire"
                },
                {
                    "desc": "精致的配色，精致的排版，简单精致的特效",
                    "url": "http://www.paulineosmont.com/",
                    "name": "Pauline Osmont"
                },
                {
                    "desc": "这是一个告诫人们物种灭绝的网站，通过碎片和动画的形式，非常生动",
                    "url": "http://species-in-pieces.com/",
                    "name": "pieces"
                },
                {
                    "desc": "纯CSS画的一幅油画，非常的逼真，只能用卧槽形容",
                    "url": "http://diana-adrianne.com/purecss-francine/",
                    "name": "Purecss Francine"
                },
                {
                    "desc": "使用铁路图将正则表达式可视化",
                    "url": "https://regexper.com",
                    "name": "Regexper"
                },
                {
                    "desc": "通过webgl生成了一部电影，耐心的等待会有惊喜的",
                    "url": "http://www.ro.me/",
                    "name": "ro.me"
                },
                {
                    "desc": "某人的个人博客，鼠标滑过特效是水墨风",
                    "url": "https://www.t3kila.com/",
                    "name": "Romain Wurtz"
                },
                {
                    "desc": "让不同颜色的沙子落到地上，你可以绘制一幅属于你的作品。",
                    "url": "https://sandspiel.club/",
                    "name": "SandsPiel"
                },
                {
                    "desc": "可以用鼠标随便涂画，有同名App",
                    "url": "http://weavesilk.com/",
                    "name": "Silk"
                },
                {
                    "desc": "SongMaker是Chrome音乐实验室的一项实验成果，它提供了任何人制作和共享歌曲的简单方法。",
                    "url": "https://musiclab.chromeexperiments.com/Song-Maker/",
                    "name": "Song Maker"
                },
                {
                    "desc": "一个立体的三维空间，它能够旋转和点击，这种交互方式是以canvas元素+位图实现的，看上去不一般哦。",
                    "url": "http://www.spacegoo.com/",
                    "name": "spacegoo"
                },
                {
                    "desc": "炫酷的动画效果",
                    "url": "http://strml.net/",
                    "name": "STRML"
                },
                {
                    "desc": "一个跨领域多学科设计师，前Spotify的首席设计师和艺术指导，设计界的网红",
                    "url": "http://www.vanschneider.com/",
                    "name": "Tobias van Schneider"
                },
                {
                    "desc": "Uplabs是一个创意集中的社区，每天都会提供最好的特效灵感并提供下载",
                    "url": "https://www.uplabs.com",
                    "name": "Uplabs"
                },
                {
                    "desc": "通过动画的形式将数据结构和算法可视化，很酷",
                    "url": "https://visualgo.net",
                    "name": "VisuAlgo"
                },
                {
                    "desc": "简单大气，一目了然，独特的时间线以及信息表达方式",
                    "url": "http://www.wendyshijia.com/",
                    "name": "Wendy Shijia"
                },
                {
                    "desc": "将专家级的知识和能力带到所有职业和教育水平的最广泛人群中。",
                    "url": "https://www.wolframalpha.com/",
                    "name": "WolframAlpha"
                },
                {
                    "desc": "WOW.js是一个给页面添加滚动动画的JS插件，可以与Animate.css完美结合。",
                    "url": "http://mynameismatthieu.com/WOW/",
                    "name": "WOW.js"
                },
                {
                    "desc": "这是一个很炫酷的展示个人作品的网站",
                    "url": "http://hotu.co/cv/",
                    "name": "个人作品展示"
                },
                {
                    "desc": "伪元素大师Nicolas Gallagher将伪元素发挥到了极致，实现了一些常见icon",
                    "url": "http://nicolasgallagher.com/pure-css-gui-icons/demo/",
                    "name": "伪元素实现CSS icon"
                },
                {
                    "desc": "创造狮，一个创意工作者的导航，专注分享正版优质设计、前端、产品、运营的书签导航",
                    "url": "http://chuangzaoshi.com/",
                    "name": "创造狮"
                },
                {
                    "desc": "一个交互型网站，可以尝试输入各种词，比如“呵呵”",
                    "url": "http://miaoxiaoer.com/",
                    "name": "喵小二"
                },
                {
                    "desc": "知乎-有哪些一见到就感觉帅到爆的设计？",
                    "url": "https://www.zhihu.com/question/25415121",
                    "name": "帅到爆的设计"
                },
                {
                    "desc": "字幕梗Gif生成器，目前已开源",
                    "url": "https://sorry.bluerain.io/",
                    "name": "王境泽/偷车贼/为所欲为等字幕梗生成器"
                },
                {
                    "desc": "很酷炫的一个个人站，一个 设计+代码 多修的“手艺人”。",
                    "url": "http://glexe.com/#/intro",
                    "name": "第5维度™工作室"
                },
                {
                    "desc": "简洁大气，交互很有个性，背景音乐也不错，博主是湖南卫视芒果TV视觉设计师",
                    "url": "http://www.syg315.com/",
                    "name": "素云阁"
                }
            ]
        },
        {
            "title": "友情链接",
            "list": [
                {
                    "desc": "一个研究生自学前端的大牛，拿到了BAT的Special Offer，很多文章都写得非常好！",
                    "url": "http://harttle.com/",
                    "name": "Harttle Land"
                },
                {
                    "desc": "关注前端开发，关注用户体验",
                    "url": "http://www.daqianduan.com/",
                    "name": "大前端"
                },
                {
                    "desc": "北邮人边子政的个人博客",
                    "url": "http://blog.zhengzi.me/",
                    "name": "政子的博客"
                },
                {
                    "desc": "北邮人负雪明烛的个人博客",
                    "url": "http://fuxuemingzhu.me/",
                    "name": "负雪明烛的博客"
                }
            ]
        },
        {
            "title": "图标库",
            "list": [
                {
                    "desc": "是一个免费搜索图标的搜索引擎站点，国内非常不错的搜索图标的站点之一，收录了超过40万个精美PNG、ICO、YCNS图标，内容非常丰富，提供中文、英文、繁体中文语言界面。",
                    "url": "http://www.easyicon.net/",
                    "name": "easyicon"
                },
                {
                    "desc": "号称最大的免费图标数据库，有各种格式的icon。",
                    "url": "https://www.flaticon.com/",
                    "name": "FLATICON"
                },
                {
                    "desc": "很适合前端开发人员的图标库，可以通过font属性控制图标大小、颜色以及旋转角度，还可以任意组合",
                    "url": "http://fontawesome.dashgame.com/",
                    "name": "font-awesome"
                },
                {
                    "desc": "是一个中文的在线图标搜索引擎，不仅可以搜索到大量的 PNG 格式图标，还有图标系列的集合可以下载，另外 IconPng 还支持图标的 tag 和图标分类，可以方便的找到自己想要找的大量类似图标",
                    "url": "http://www.iconpng.com/",
                    "name": "iconpng"
                },
                {
                    "desc": "作为有1万star的的开源icon库，多而杂的图标肯定能够满足你，但是不太容易直接搜索查找",
                    "url": "http://ionicons.com/",
                    "name": "ionicons"
                },
                {
                    "desc": "提供各种类型的图标，包括SVG和PNG格式，同时也可以通过CSS引入",
                    "url": "https://material.io/tools/icons/",
                    "name": "Material icons"
                },
                {
                    "desc": "Google的图标库，数量实在是多，一定有你想要的",
                    "url": "https://material.io/icons/",
                    "name": "material.io"
                },
                {
                    "desc": "包图网的内容包括图标图片，图标素材，图标模板，图标设计等",
                    "url": "https://ibaotu.com/",
                    "name": "包图网"
                },
                {
                    "desc": "藏标网提供在线logo设计欣赏、标志图片素材、公司商标设计、国外标志设计欣赏、字体设计大全、企业吉祥物设计、校徽设计含义分享的标志网站，为logo设计师和设计爱好者提供一个寻找标识设计寓意的灵感平台，从分享logo设计图片素材过程中进步提高。",
                    "url": "http://logonc.com/",
                    "name": "藏标网"
                },
                {
                    "desc": "阿里妈妈UED开发的图标库",
                    "url": "http://www.iconfont.cn/",
                    "name": "阿里矢量图"
                }
            ]
        },
        {
            "title": "在线工具",
            "list": [
                {
                    "desc": "在线生成 urlify.cn 短链",
                    "url": "https://urlify.cn/",
                    "name": "Urlify 短链接"
                },
                {
                    "desc": "一个免费的、基于 Web 的字体在线设计网站",
                    "url": "http://www.glyphrstudio.com/",
                    "name": "Glyphr Studio"
                },
                {
                    "desc": "一个好玩搞笑的在线工具网站, 舔狗日记, 舔狗日记一键生成, 开发工具, 每日一文, 二维码生成, JSON格式化, 搞笑",
                    "url": "https://wangpinpin.com/",
                    "name": "小破站"
                },
                {
                    "desc": "可以免费生成 sourl.cn 域名的短链接",
                    "url": "https://xiaomark.com/",
                    "name": "小码短链接"
                },
                {
                    "desc": "功能很简单，就是展示一个网页时钟",
                    "url": "http://image.shengxinjing.cn/clock/",
                    "name": "网页时钟"
                },
                {
                    "desc": "创客贴,极简好用的平面设计作图软件,在线图片编辑器,免费使用.提供免费设计模板，有海报、名片、公众号图片、PPT、邀请函等65个场景模板,一键稿定设计印刷",
                    "url": "https://www.chuangkit.com/",
                    "name": "创可贴"
                },
                {
                    "desc": "365编辑器是微梦传媒旗下的一款微信编辑器,拥有海量正版素材、模板,动图图库,提供文章一键排版,微信图文美化和公众号内容编辑功能,支持实时预览,一键秒刷,多平台一键同步,实现新媒体编辑的多样化内容运营",
                    "url": "http://www.365editor.com/",
                    "name": "365编辑器"
                },
                {
                    "desc": "在线生成各种表情包，提供了很多模板，同时可进行文字编辑和配置",
                    "url": "https://sorry.xuty.cc/panta/",
                    "name": "表情锅"
                },
                {
                    "desc": "Youtube、Facebook、Twitter 等 900 多家网站视频下载器，同时支持各种清晰度，还有浏览器插件可以使用",
                    "url": "https://youtube4kdownloader.com/zh/",
                    "name": "Youtube 4K Downloader"
                },
                {
                    "desc": "一款帮助摄影师完成即时影像交付和社交媒体传播的云摄影工具，是一款“能赚钱的云摄影工具”。 通过photoplus，摄影师一人即可完成拍摄上传、选图修图、交付分享等工作，photoplus目前已被广泛应用于各种活动赛事及个人写真、婚礼跟拍、儿童摄影等拍摄场景。",
                    "url": "https://www.photoplus.cn/",
                    "name": "photoplus"
                },
                {
                    "desc": "将吉他和弦结果可视化展示，具体原理见：https://juejin.im/post/6844903633012817927",
                    "url": "https://youngdro.github.io/guitarChord/index.html",
                    "name": "吉他和弦可视化"
                },
                {
                    "desc": "Rive是一个实时的交互式设计工具，它允许您设计、动画并将您的资产集成到任何平台中，这要归功于我们的开源运行时。",
                    "url": "https://beta.rive.app/",
                    "name": "Rive"
                },
                {
                    "desc": "可以将文本转换成音频，支持PDF，word，电子书，网页，文本转换成音频文件，主要是学习英语口语非常方便实用",
                    "url": "https://www.naturalreaders.com/online/",
                    "name": "text to speech online"
                },
                {
                    "desc": "可以将网址转换成tinyurl.com域名的短链",
                    "url": "https://tinyurl.com/",
                    "name": "TinyURL"
                },
                {
                    "desc": "在线表情包制作器，功能强大，操作简单，素材丰富",
                    "url": "https://www.wakatool.com/maker",
                    "name": "哇咔工具"
                },
                {
                    "desc": "生成一些在一些设备上产品展示图片，只要上传自己的图片就可以，目前支持iOS相关设备和安卓手机",
                    "url": "http://dunnnk.com",
                    "name": "Dunnnk"
                },
                {
                    "desc": "生成图标ico",
                    "url": "http://www.bitbug.net/",
                    "name": "比特虫"
                },
                {
                    "desc": "在线图片（照片、图标）去底色工具，可以将纯色图片背景色免费去除",
                    "url": "https://www.yasuotu.com/buttonColor",
                    "name": "压缩图"
                },
                {
                    "desc": "在线画协作流程图、线框图、便签和思维导图",
                    "url": "https://whimsical.com/",
                    "name": "Whimsical"
                },
                {
                    "desc": "可以将网址转换成t.cn域名的短链",
                    "url": "http://qvni.cn/t.cn/",
                    "name": "t.cn短网址生成器"
                },
                {
                    "desc": "在线转换视频文件至 MP4 格式，免费并且不需要注册",
                    "url": "https://cloudconvert.com/mkv-to-mp4",
                    "name": "cloudconvert"
                },
                {
                    "desc": "在30秒内创建一个Logo，可用于各种用途",
                    "url": "https://mybrandnewlogo.com/logo-maker",
                    "name": "My Brand New Logo"
                },
                {
                    "desc": "查网络流行语，就上小鸡词典。小鸡词典专注于网络流行语的收录和解释，以最快的速度在全网捕捉当下的网络热词。以简单明了，清晰易懂的形式，向用户介绍网络流行语的含义、来历、传播过程和引申义。用户不仅能够通过小鸡词典了解网络用语，还能接触到小众黑话、新梗热梗、弹幕用语、方言俚语等不同的流行文化，以及网友们自主创造的旧词新解等。",
                    "url": "https://jikipedia.com/",
                    "name": "小鸡词典"
                },
                {
                    "desc": "代码在线格式化",
                    "url": "https://prettier.io/playground/",
                    "name": "Prettier"
                },
                {
                    "desc": "收集浏览器指纹的平台，同时也可以查看自己的浏览器指纹，提供了一些反追踪的工具",
                    "url": "https://amiunique.org/",
                    "name": "AmIUnique"
                },
                {
                    "desc": "可以制作一个专属的动态魔方，只需要上传几张魔方的背景图片即可",
                    "url": "https://www.imagecu.be/",
                    "name": "Image Cube"
                },
                {
                    "desc": "在线快速图片和视频编辑,不会PS也能搞定设计。海报、简历、PPT、公众号配图、电商等海量模板快速出图。三秒抠图实用便捷,抖音快手热门视频轻松搞定。海量正版授权资源,商用无忧。",
                    "url": "https://www.gaoding.com/",
                    "name": "稿定设计"
                },
                {
                    "desc": "魔方复原模拟器",
                    "url": "https://ewind.us/h5/freecube/",
                    "name": "Freecube"
                },
                {
                    "desc": "免费设计模板素材和海量正版图片，支持 PPT、海报、横幅、传单、社交媒体等制作",
                    "url": "https://www.canva.cn/",
                    "name": "Canva"
                },
                {
                    "desc": "凡科快图，免费平面设计软件，海量精美图片模板素材，免下载立即使用，3步在线制作图片，不用ps，1分钟在线图片编辑，拖拽操作，简单好用的在线图片处理工具。",
                    "url": "https://kt.fkw.com/",
                    "name": "凡科快图"
                },
                {
                    "desc": "在线转换文本、图像、视频和声音，支持 1100 多种类型的文件格式",
                    "url": "https://www.zamzar.com/",
                    "name": "Zamzar"
                },
                {
                    "desc": "在线绘制手绘风格的图表，缺点是图表类型比较简单，而且不支持中文",
                    "url": "https://excalidraw.com/",
                    "name": "Excalidraw"
                },
                {
                    "desc": "字客网字体子集生成器可以让用户抽出一个字体文件里想要的字，再组成精减的字体文件，十分适合制作网页字体。操作简单，快捷，只需输入想要抽取的字，之后一键生成。",
                    "url": "https://www.fontke.com/tool/subfont/",
                    "name": "字客网"
                },
                {
                    "desc": "t.im 短网址生成器，还可以设置过期时间",
                    "url": "https://t.im/",
                    "name": "T.IM"
                },
                {
                    "desc": "可以解析各大视频网站的 VIP 视频，然后进行观看",
                    "url": "http://www.qmaile.com/",
                    "name": "全民解析"
                },
                {
                    "desc": "一款 Markdown 微信编辑器,拥有良好的兼容性、海量主题样式、免费的图床、强大的技术团队，提供文章一键排版，同时支持知乎、掘金、微信订阅号等多个平台。",
                    "url": "https://mdnice.com/",
                    "name": "Markdown Nice"
                },
                {
                    "desc": "智能裁剪图片和调整图片尺寸工具，支持格式、类型和压缩比例配置",
                    "url": "http://www.smartresize.com/",
                    "name": "Smart Resize"
                },
                {
                    "desc": "UI 层面的自动测试以及测试报告生成工具",
                    "url": "https://www.chromatic.com/",
                    "name": "chromatic"
                },
                {
                    "desc": "访问网页即可获得一个临时邮箱，页面广告较多。",
                    "url": "https://10minutemail.com/10MinuteMail/index.html?dswid=5142",
                    "name": "10分钟邮箱"
                },
                {
                    "desc": "在线批量压缩PDF",
                    "url": "http://www.99pdf.com/",
                    "name": "99PDF"
                },
                {
                    "desc": "在线生成各种CSS动画",
                    "url": "http://animista.net",
                    "name": "Animista"
                },
                {
                    "desc": "根据你输入的英文单词，生成相应的字符图形",
                    "url": "http://www.network-science.de/ascii/",
                    "name": "ASCII Generator"
                },
                {
                    "desc": "利用ASCII字符进行绘制，可以调整大小，自由绘制，可以绘制出类似于佛祖那样的代码。",
                    "url": "http://asciiflow.com/",
                    "name": "ASCIIFlow Infinity"
                },
                {
                    "desc": "由华中科技大学一位在校女研究生开发的在线工具集合网站，旨在做出最简单方便、最完整干净、最全面完整的工具网站",
                    "url": "http://www.atool.org",
                    "name": "ATOOL在线工具"
                },
                {
                    "desc": "在线生成css兼容代码，其实就是autoprefixer的在线版。。",
                    "url": "http://autoprefixer.github.io/",
                    "name": "autoprefixer"
                },
                {
                    "desc": "免费的在线音乐播放器。收录全网最新无损音乐，提供无损MP3音乐免费下载，免开VIP尽享全网音乐免费播放下载！",
                    "url": "http://mu.aynu.top/",
                    "name": "AYNU音乐实验室"
                },
                {
                    "desc": "将azw3文件转换成其他格式文件",
                    "url": "http://www.zamzar.com/convert/azw3-to-epub/",
                    "name": "AZW3在线转换"
                },
                {
                    "desc": "利用WebGL可以随机生成抽象的体素地形",
                    "url": "https://demo.marpi.pl/biomes/",
                    "name": "BIOMES"
                },
                {
                    "desc": "免费生成logo，可通过关键词限定范围",
                    "url": "http://brandmark.io/",
                    "name": "Brandmark"
                },
                {
                    "desc": "Browserhacks是一个记录特定的CSS和JavaScript的Hack写法的列表。",
                    "url": "http://browserhacks.com/",
                    "name": "Browserhacks"
                },
                {
                    "desc": "在线画图软件，可以创建和共享流程图、线框图、UML模型、网络图等。",
                    "url": "https://cacoo.com/",
                    "name": "Cacoo"
                },
                {
                    "desc": "提供现代Web技术的浏览器支持情况查询",
                    "url": "https://caniuse.com/",
                    "name": "Can I use"
                },
                {
                    "desc": "利用 Canva 的拖放功能和布局，可以设计、分享和打印名片、徽标、演示文稿及更多内容。",
                    "url": "https://www.canva.com/",
                    "name": "Canva"
                },
                {
                    "desc": "生成类似 mac 风格的代码图片，用于分享",
                    "url": "https://carbon.now.sh",
                    "name": "Carbon"
                },
                {
                    "desc": "各种符号的转义字符表",
                    "url": "https://dev.w3.org/html5/html-author/charref",
                    "name": "Character Entity Reference Chart"
                },
                {
                    "desc": "根据几个问题为你的开源协议的选择提供建议",
                    "url": "https://choosealicense.com/",
                    "name": "Choose A License"
                },
                {
                    "desc": "单个Youtube视频下载，支持多种格式、多种清晰度。",
                    "url": "https://www.clipconverter.cc/",
                    "name": "ClipConverter.cc"
                },
                {
                    "desc": "项目命名神器，可以通过关键词搜索github、gitlab等网站上的项目名称",
                    "url": "https://unbug.github.io/codelf/",
                    "name": "CODELF"
                },
                {
                    "desc": "Convertio – 在线转换文件的简单工具。支持超过284种不同的文档、图像、电子表格、电子书、文档、演示文稿、音频和视频格式。",
                    "url": "https://convertio.co/zh/",
                    "name": "Convertio"
                },
                {
                    "desc": "作者使用CSS绘制了很多小icon，其次页面做的也很精致",
                    "url": "https://cssicon.space/#/",
                    "name": "CSS ICON"
                },
                {
                    "desc": "在线生成雪碧图和对应CSS的工具",
                    "url": "https://spritegen.website-performance.org/",
                    "name": "CSS Sprite Generator"
                },
                {
                    "desc": "CSS三角形产生器",
                    "url": "http://apps.eky.hk/css-triangle-generator/zh-hant",
                    "name": "CSS Triangle Generator"
                },
                {
                    "desc": "列举了在不同浏览器引擎中，各种CSS属性对于重排和重绘的影响",
                    "url": "https://csstriggers.com/",
                    "name": "CSS Triggers"
                },
                {
                    "desc": "共十几道题，考察你对CSS选择器的掌握程度",
                    "url": "https://frontend30.com/css-selectors-cheatsheet/",
                    "name": "css-selectors-cheatsheet"
                },
                {
                    "desc": "通过可视化的方式帮你生成CSS中的cubic-bezier函数参数",
                    "url": "http://yisibl.github.io/cubic-bezier/#.17,.67,.83,.67",
                    "name": "CSS动画曲线绘制"
                },
                {
                    "desc": "根据图片生成相应的字符图形",
                    "url": "https://www.degraeve.com/img2txt.php",
                    "name": "Degraeve"
                },
                {
                    "desc": "常用速查表，快速查询各类框架和库的常用方法，很实用",
                    "url": "https://devhints.io/",
                    "name": "Devhints"
                },
                {
                    "desc": "手绘图，然后保存成 PPT 的在线服务。",
                    "url": "https://webdemo.myscript.com/views/diagram/index.html#/edit",
                    "name": "Diagram"
                },
                {
                    "desc": "在线云绘图制作平台，可以快速、自由的创建简单的图标，流程图、网页模版构架图、框架图等等",
                    "url": "https://www.draw.io/",
                    "name": "draw.io"
                },
                {
                    "desc": "在线画流程图，页面简洁明了",
                    "url": "https://www.draw.io/",
                    "name": "Draw.io"
                },
                {
                    "desc": "Editor.Pho.to 是一款拥有照片即时编辑工具的在线照片编辑器。添加文本和标签，应用滤镜和特效。裁剪、旋转、调整大小和调整图片。",
                    "url": "http://editor.pho.to/zh/edit/",
                    "name": "Editor.Pho.to"
                },
                {
                    "desc": "在线生成简历",
                    "url": "https://enhancv.com/",
                    "name": "Enhancv"
                },
                {
                    "desc": "输入JS语句可以立马生成我们所需的抽象语法树（AST）",
                    "url": "http://esprima.org/demo/parse.html",
                    "name": "esprima Parser"
                },
                {
                    "desc": "在线压缩文件。无需安装或上传/下载。在浏览器中运行",
                    "url": "http://www.ezyzip.com/cn.html",
                    "name": "ezyZip"
                },
                {
                    "desc": "这是一个可以将用户的图片转换为ico图片的网站。将图片制作成ico图标并导出。",
                    "url": "http://www.favicon.cc/",
                    "name": "favicon.cc"
                },
                {
                    "desc": "一款界面设计协作神器，图形设计功能强大、支持多人在线编辑与多人实时评论，用于开会或者研讨非常方便，也可以随意保存历史版本，简直堪称设计界的Google Docs。支持导出jpg、png、svg等多种格式。",
                    "url": "https://www.figma.com",
                    "name": "FIGMA"
                },
                {
                    "desc": "一个申请免费HTTPS证书的网站",
                    "url": "https://freessl.cn/",
                    "name": "FreeSSL.org"
                },
                {
                    "desc": "会定制你想追踪的npm包库，还可以定时发邮件通知",
                    "url": "https://gitpunch.com/",
                    "name": "GitPunch"
                },
                {
                    "desc": "生成漂亮的CSS渐变，操作简单，网站设计也很棒",
                    "url": "https://www.grabient.com/",
                    "name": "Grabient"
                },
                {
                    "desc": "一个通过html5就可以进行绘画的在线画板",
                    "url": "http://hotu.co/hua/",
                    "name": "html5在线画板"
                },
                {
                    "desc": "支持抖音、快手、微视等视频无水印下载",
                    "url": "https://www.studyjava.cn/douyin",
                    "name": "https://www.studyjava.cn/douyin"
                },
                {
                    "desc": "将各种svg图标提前进行sprite并自动进行引用",
                    "url": "https://icomoon.io/",
                    "name": "IcoMoon"
                },
                {
                    "desc": "提供了一系列矢量图标，还提供了一个用于制作iconfont的工具，直接导入SVG即可",
                    "url": "https://icomoon.io/",
                    "name": "IcoMoon"
                },
                {
                    "desc": "移动页面制作工作，制作教程非常方便，功能强大到让你不可思议——物理碰撞、时间轴动画、滑动时间轴、地理定位、数据库、720°全景…统统都有，而且使用上永久免费。",
                    "url": "http://www.ih5.cn",
                    "name": "iH5"
                },
                {
                    "desc": "一个免费的应用程序，使图像加载速度更快，占用更少的磁盘空间，而不牺牲质量。提供Mac App以及Api，同时还是开源的。",
                    "url": "https://imageoptim.com/",
                    "name": "ImageOptim"
                },
                {
                    "desc": "以动画和闯关的形式来学习Git",
                    "url": "https://learngitbranching.js.org/",
                    "name": "Learn Git Branching"
                },
                {
                    "desc": "可以说是目前为止最好的教程了，在沙盒里你能执行相应的命令，还能看到每个命令的执行情况； 通过一系列刺激的关卡挑战，逐步深入的学习 Git 的强大功能。",
                    "url": "https://learngitbranching.js.org/",
                    "name": "Learn Git Branching"
                },
                {
                    "desc": "LightPDF提供在线免费转换、分割、合并、编辑PDF文件服务及PDF相关解决方案。",
                    "url": "https://lightpdf.com/zh/",
                    "name": "LightPDF"
                },
                {
                    "desc": "在线生成logo，你只需要提供网站名称和网站类型",
                    "url": "https://www.logaster.com/",
                    "name": "logaster"
                },
                {
                    "desc": "在线设计logo，可以插入不同形状的图形和文字",
                    "url": "https://logomakr.com/",
                    "name": "LogoMakr"
                },
                {
                    "desc": "采用类似Markdown的语法，通过单纯的文本生成图表和流程图",
                    "url": "https://mermaidjs.github.io/",
                    "name": "mermaid"
                },
                {
                    "desc": "视频转Gif，可以在线添加文字和编辑",
                    "url": "https://coldday.github.io/mp4ToGif/",
                    "name": "MP4ToGif"
                },
                {
                    "desc": "检测网站的SSL证书是否安全，是否存在漏洞，是否达到SSL行业标准，符合苹果ATS规范，能否通过微信小程序安全要求。同时提供证书格式转换，CSR，证书链，SSL配置生成等工具。",
                    "url": "https://myssl.com/",
                    "name": "MySSL"
                },
                {
                    "desc": "共收录 1578 种顶级域名，汇集互联网上 27 家知名域名注册商，每日更新价格信息",
                    "url": "https://namebeta.com/",
                    "name": "NameBeta"
                },
                {
                    "desc": "在线生成nginx配置文件，可以选择语言和功能，而且该站点是开源的。",
                    "url": "https://nginxconfig.io/",
                    "name": "nginxconfig.io"
                },
                {
                    "desc": "好工具网致力于收集和打造各种简单易用的在线工具，目前已有500多个工具。",
                    "url": "http://www.nicetool.net/",
                    "name": "Nicetool"
                },
                {
                    "desc": "可以从Excel电子表格（或HTML表格）粘贴数据，并将其转换为没有任何格式的新HTML表。",
                    "url": "http://pressbin.com/tools/excel_to_html_table/index.html",
                    "name": "No-Cruft Excel to HTML Table Converter"
                },
                {
                    "desc": "免费在线文件转换器( office-converter.com)，是最佳在线文件转换器。你能免费在线转换视频,在线转换音频,在线转换图形,在线转换文档和压缩。在线转换文件，包括PDF，Word，Excel，PowerPoint，OpenOffice，Flash，HTML，MP4，MP3，AVI，MKV，FLV，MOV，SWF，iPhone，Microsoft Xbox，WMV，WMA，OGG，JPG，BMP，TIFF，PNG，GIF，EPUB，ZIP，RAR等多种格式， 到目前为止，我们能够输出超过500",
                    "url": "https://cn.office-converter.com/",
                    "name": "Office Converter"
                },
                {
                    "desc": "根据IP定位地理位置",
                    "url": "https://www.opengps.cn/Data/IP/LocHighAcc.aspx",
                    "name": "openGPS.cn"
                },
                {
                    "desc": "测试网站速度，优化性能，同时还会给出很具体的建议，很强大实用",
                    "url": "https://developers.google.com/speed/pagespeed/insights/",
                    "name": "PageSpeed Insights"
                },
                {
                    "desc": "一个用于创建颜色组合的设计工具，使用色轮来创造伟大的调色板",
                    "url": "http://paletton.com/",
                    "name": "Paletton"
                },
                {
                    "desc": "完全免费的PDF文件在线管理工具，其功能包括：合并PDF文件、拆分PDF文件、压缩PDF文件、Office文件转换为PDF文件、PDF文件转换为JPG图片、JPG图片转换为PDF文件。无需安装。",
                    "url": "https://www.ilovepdf.com/zh_cn",
                    "name": "PDF在线管理工具"
                },
                {
                    "desc": "可以制作电视电脑屏幕坏了 / 你手机屏幕碎了的效果，它提供了27种故障特效，支持JPG / GIF / MP4三种格式的导出。",
                    "url": "https://photomosh.com/",
                    "name": "photomosh"
                },
                {
                    "desc": " Picdiet是一款用JavaScript编写而成的图片压缩神器，所有压缩过程都在浏览器中进行，尺寸、数量、大小均无限制，完全免费，缺点是只能压缩jpg格式的图片",
                    "url": "https://www.picdiet.com/",
                    "name": "picdiet"
                },
                {
                    "desc": "提供了各种设计P图模板，每个演示用的模板上都附有标准尺寸，你也可以先在PS等软件处理好尺寸再上传，立即生成各种手拿iPhone、iMac，开着Macbook的图片，来演示你设计的静态图效果。",
                    "url": "https://placeit.net/",
                    "name": "Placeit"
                },
                {
                    "desc": "免费在线作图，同时支持实时协作",
                    "url": "https://www.processon.com/",
                    "name": "ProcessOn"
                },
                {
                    "desc": "PX和EM单位转换器",
                    "url": "http://pxtoem.com/",
                    "name": "PXtoEM"
                },
                {
                    "desc": "在线测试正则表达式",
                    "url": "https://regex101.com/",
                    "name": "Regex101"
                },
                {
                    "desc": "使用铁路图将正则表达式可视化",
                    "url": "https://regexper.com",
                    "name": "Regexper"
                },
                {
                    "desc": "让不同颜色的沙子落到地上，你可以绘制一幅属于你的作品。",
                    "url": "https://sandspiel.club/",
                    "name": "SandsPiel"
                },
                {
                    "desc": "Sass在线编译，就是网站做的有点少女。。",
                    "url": "https://www.sassmeister.com/",
                    "name": "SassMeister"
                },
                {
                    "desc": "展示了各种机型的尺寸、像素密度和像素比",
                    "url": "http://screensiz.es/",
                    "name": "Screen Sizes"
                },
                {
                    "desc": "提供了很多用于Github、Wordpress的徽章，拥有多种定制化功能",
                    "url": "https://shields.io/",
                    "name": "ShieldsIO"
                },
                {
                    "desc": "镜像炫光生成器，我们可以利用鼠标拖拽画画，然后就会生成对称的图像。它还出了两款手机App软件。",
                    "url": "http://weavesilk.com/",
                    "name": "Silk"
                },
                {
                    "desc": "支持多张照片上传，单文件限制 5M 以内。支持 UBB 代码，上传后点 BBCode 即可。",
                    "url": "https://sm.ms/",
                    "name": "SM.MS"
                },
                {
                    "desc": "非常厉害的一个网站，PDF压缩，PDF转PPT，Word，Excel等等都可以直接通过这个网站实现",
                    "url": "https://smallpdf.com/",
                    "name": "Smallpdf"
                },
                {
                    "desc": "SongMaker是Chrome音乐实验室的一项实验成果，它提供了任何人制作和共享歌曲的简单方法。",
                    "url": "https://musiclab.chromeexperiments.com/Song-Maker/",
                    "name": "Song Maker"
                },
                {
                    "desc": "GoogleCreativeLab出品的在线压缩图片工具",
                    "url": "https://squoosh.app/",
                    "name": "Squoosh"
                },
                {
                    "desc": "对SSL Web服务器进行深入分析，不过耗时较长",
                    "url": "https://www.ssllabs.com/ssltest/analyze.html",
                    "name": "SSL Labs"
                },
                {
                    "desc": "支持15中对称加密算法在线校验、公私钥对的生成、PKCS1、PKCS8相互转换、CSR生成&查看、证书查看等等功能",
                    "url": "http://www.ssleye.com/",
                    "name": "SSL在线工具"
                },
                {
                    "desc": "在线可视化生成LateX、Markdown、HTML表格",
                    "url": "http://www.tablesgenerator.com/",
                    "name": "TablesGenerator"
                },
                {
                    "desc": "Thumbor是一个智能图片处理服务，可以提供图片裁切、缩放、旋转等服务，wiki地址：https://thumbor.readthedocs.io/en/latest/index.html",
                    "url": "http://thumborize.me/",
                    "name": "thumborize.me"
                },
                {
                    "desc": "Search by image and find where that image appears online",
                    "url": "https://www.tineye.com/",
                    "name": "Tineye"
                },
                {
                    "desc": "在线压缩jpg或png格式的图片，最大5MB，最多20张",
                    "url": "https://tinypng.com/",
                    "name": "tinyPNG"
                },
                {
                    "desc": "一款程序员工具箱，包含几十个实用的工具。",
                    "url": "https://www.toolfk.com/",
                    "name": "Toolfk在线工具箱"
                },
                {
                    "desc": "种子搜索器",
                    "url": "https://torrentz2.eu/",
                    "name": "Torrentz2"
                },
                {
                    "desc": "该工具将任何TTF、OTF、WOFF、WOFF2或SVG字体转换成CSS字体格式，并有CSS和SVG格式类型文件。",
                    "url": "https://transfonter.org/",
                    "name": "transfonter"
                },
                {
                    "desc": "汇集了一些好看的渐变，可以直接下载图片和CSS，同时还支持旋转、导入等功能",
                    "url": "https://uigradients.com/",
                    "name": "uiGradients"
                },
                {
                    "desc": "一个强大的PS图象处理软件类CSS渐变编辑器",
                    "url": "http://www.colorzilla.com/gradient-editor/",
                    "name": "Ultimate CSS Gradient Generator"
                },
                {
                    "desc": "一个简单的API，用于嵌入来自Unsplash的高分辨率照片。",
                    "url": "https://source.unsplash.com/",
                    "name": "Unsplash Source"
                },
                {
                    "desc": "通过动画的形式将数据结构和算法可视化，很酷",
                    "url": "https://visualgo.net",
                    "name": "VisuAlgo"
                },
                {
                    "desc": "网站性能在线检测工具，同时会给出详细的优化建议。",
                    "url": "https://www.webpagetest.org/",
                    "name": "WebPagetest"
                },
                {
                    "desc": "可视化协作！用流程图制作流程图，用线框设计用户界面，用便签运行项目。",
                    "url": "https://whimsical.co/",
                    "name": "Whimsical"
                },
                {
                    "desc": "可以搜索任何关键词，然后会显示与该关键词相关的信息",
                    "url": "http://www.wolframalpha.com/",
                    "name": "WolframAlpha"
                },
                {
                    "desc": "俄罗斯搜索引擎 Yandex 的图片 OCR 服务，可以将图片里面的文字翻译成另一种文字。",
                    "url": "https://translate.yandex.com/ocr",
                    "name": "Yandex Image Translate"
                },
                {
                    "desc": "在线绘制流程图",
                    "url": "https://www.yworks.com/products/yed",
                    "name": "yEd"
                },
                {
                    "desc": "Yellow Lab Tools 偏向于一个发现不良实践的工具，会综合页面权重、请求数、DOM、错误的 Javascript、错误的 CSS 等方面取得一个评分。并显示出在加载页面的过程中，DOM 是如何相互影响。",
                    "url": "https://yellowlab.tools/",
                    "name": "Yellow Lab Tools"
                },
                {
                    "desc": "免费的Youtube视频下载器",
                    "url": "https://youtubemultidownloader.net/playlists.html",
                    "name": "Youtube Multi Downloader"
                },
                {
                    "desc": "可以一键生成各种射线发射的效果，可以调整各种参数，包括方向、速度、射线大小等等，支持导出为PNG。",
                    "url": "https://wangyasai.github.io/Stars-Emmision/",
                    "name": "万箭齐发"
                },
                {
                    "desc": "只支持html、css、js、xml、php这几种语言的高亮化",
                    "url": "https://kn007.net/code-highlight.html",
                    "name": "代码高亮化"
                },
                {
                    "desc": "一个功能非常强大的电视直播网站，真的是十分良心；它支持几百个电视直播的网站，几乎拥有一般电视直播网站拥有的所有频道，它还支持港澳台卫视，国外电视等等。  它还有的特点就是电视直播播放速度和加载速度非常之快，画质也是十分高清；最后，网站界面简洁，没有任何广告；总体体验非常不错的一个网站。",
                    "url": "http://bddn.cn/zb.htm",
                    "name": "全球电视直播"
                },
                {
                    "desc": "深入挖掘国外前端新领域，为中国 Web 前端开发人员提供优质文档！",
                    "url": "https://docschina.org/",
                    "name": "印记中文"
                },
                {
                    "desc": "这个网站功能比较多，支持图片压缩、在线图片加水印、图片旋转、制作长图拼接、图片改颜色、图片添加文字、图片去底色、证件照换底色、转换格式、图片加边框、制作一寸、两寸证件照等",
                    "url": "https://www.yasuotu.com/",
                    "name": "压缩图"
                },
                {
                    "desc": "在线压缩图片，并且支持添加水印和图片格式转换",
                    "url": "http://www.tuhaokuai.com/",
                    "name": "图好快"
                },
                {
                    "desc": "你只需要拖拽一张图片，它就会自动把图片转换成立体的体素效果，还提供超多参数配置。",
                    "url": "https://pissang.github.io/voxelize-image/",
                    "name": "图片体素化生成器"
                },
                {
                    "desc": "在线编译less",
                    "url": "http://tool.oschina.net/less",
                    "name": "在线Less编译"
                },
                {
                    "desc": "可以在线比较文本以及代码",
                    "url": "http://www.jq22.com/textDifference",
                    "name": "在线文本比较"
                },
                {
                    "desc": "顾名思义，可以在线进行正则匹配的验证，支持手动输入正则匹配表达式以及需要验证的文本",
                    "url": "http://regexr.com/",
                    "name": "在线正则匹配验证"
                },
                {
                    "desc": "声享 – 在线制作PPT平台, 让您可以随时随地制作、分享和录制PPT",
                    "url": "https://ppt.baomitu.com/",
                    "name": "声享"
                },
                {
                    "desc": "HTML5表白网页在线生成",
                    "url": "http://www.tianox.com/",
                    "name": "天牛表白网"
                },
                {
                    "desc": "最浪漫的表白网页在线生成网站",
                    "url": "http://www.hunlipic.com/love/",
                    "name": "婚礼Pic"
                },
                {
                    "desc": "有好多API文档的索引，包括apache、android、bootstrap等等",
                    "url": "http://tool.oschina.net/apidocs",
                    "name": "常用API文档索引"
                },
                {
                    "desc": "幕布是一款结合了大纲笔记和思维导图的头脑管理工具，帮你用更高效的方式和更清晰的结构来记录笔记、管理任务、制定计划甚至是组织头脑风暴。完整覆盖电脑端和移动端",
                    "url": "https://mubu.com/",
                    "name": "幕布"
                },
                {
                    "desc": "微微二维码和小程序码在线生成器，可定制颜色、logo、背景图、前景图还有多种模板选择，录音语音、图文排版、趣味卡通、微博、微信、挥春、等彩色二维码制作，制作创意二维码无需学PS技术，轻松在线生成，十分适用于店铺商家使用",
                    "url": "http://www.wwei.cn/",
                    "name": "微微二维码"
                },
                {
                    "desc": "免费下载百度文库文档，只不过暂时只支持doc格式的",
                    "url": "http://so.jutuit.com/zd/wenku/0/",
                    "name": "思维趣文库"
                },
                {
                    "desc": "数安时代免费SSL证书支持单域名，适用于谷歌、火狐、IE、360等多种浏览器。",
                    "url": "https://certmall.trustauth.cn/Free",
                    "name": "数安时代"
                },
                {
                    "desc": "斗图啦，收集了成千上万的撕逼斗图表情包，在这里你可以快速找到想要的表情，通过在线表情制作可以快速生成自定义表情。",
                    "url": "https://www.doutula.com/",
                    "name": "斗图啦"
                },
                {
                    "desc": "新榜编辑器，丰富的样式和模板、海量的在线图片搜索，一键同步多平台，还有大量爆文供你参考。",
                    "url": "https://edit.newrank.cn/",
                    "name": "新榜编辑器"
                },
                {
                    "desc": "新浪短网址服务(Sina.lt)是互联网上最稳定、最安全、最快速的短网址服务，帮您把冗长的URL地址缩短成8个字符以内的短网址。",
                    "url": "http://dwz.wailian.work/",
                    "name": "新浪短网址"
                },
                {
                    "desc": "腾讯ISUX前端团队开发的图片压缩工具。他与周边的tinypng压缩神器相比较，压缩效果和效率会相对优化。他可以转换为webp格式的图片（相比PNG和JPEG在不降低图片质量的同时，减少约三分之一的体积），可以控制图片输出质量，而且可以拖动设置条对比压缩前后的效果。",
                    "url": "https://zhitu.isux.us/",
                    "name": "智图"
                },
                {
                    "desc": "UI自动标注工具，一键生成iOS、android、网页标注神器！提升设计师效率！",
                    "url": "http://www.biaonimeia.com",
                    "name": "标你妹啊"
                },
                {
                    "desc": "求字体网免费提供上传图片找字体、字体实时预览及字体下载服务，本网站可识别中文、英文、日韩、书法等多种类字体。只要上传图片或输入字体名称，就可以帮您找字体。",
                    "url": "http://www.qiuziti.com/",
                    "name": "求字体"
                },
                {
                    "desc": "直接用鼠标拖拽就可以调整渐变层的各种参数，然后可以导出为svg格式。",
                    "url": "https://codepen.io/pissang/full/geajpX",
                    "name": "渐变层生成器"
                },
                {
                    "desc": "字幕梗Gif生成器，目前已开源",
                    "url": "https://sorry.bluerain.io/",
                    "name": "王境泽/偷车贼/为所欲为等字幕梗生成器"
                },
                {
                    "desc": "类似ProcessOn，但是感觉功能会更多，有序号、进度指示灯功能",
                    "url": "http://naotu.baidu.com/",
                    "name": "百度脑图"
                },
                {
                    "desc": "稿定设计是一款专为淘宝店主、新媒体运营人员和修图爱好者打造的免费在线抠图工具，无需进行复杂的操作，通过简单拖拽，就能完成产品抠图、淘宝抠图、证件照抠图换背景、抠商品图/淘宝主图的设计。",
                    "url": "https://www.gaoding.com/koutu",
                    "name": "稿定抠图"
                },
                {
                    "desc": "形象地介绍了各种缓动函数，而且开源",
                    "url": "https://easings.net/",
                    "name": "缓动函数速查表"
                },
                {
                    "desc": "美图的前端团队制作的动画库，收集了一些简单实用的动画，可以直接复制代码",
                    "url": "http://f2er.meitu.com/animastore/",
                    "name": "美图前端动画库"
                },
                {
                    "desc": "生成二维码，可以是文本、网址、名片、小程序等等",
                    "url": "http://cli.im/",
                    "name": "草料二维码"
                },
                {
                    "desc": "快速搜索制作各种装逼表情。让开我要开始装逼了。",
                    "url": "https://www.zhuangbi.info/",
                    "name": "装逼大全"
                },
                {
                    "desc": "在线免费制作各种美女举牌照,id照,搞笑网络证件,搞笑表情在线制作,支付宝转账生成,装b神器,装逼神器,随风出品",
                    "url": "http://deepba.com/",
                    "name": "装逼神器"
                },
                {
                    "desc": "多站合一音乐搜索解决方案，可搜索试听网易云音乐、QQ音乐、酷狗音乐、酷我音乐、虾米音乐、百度音乐、一听音乐、咪咕音乐、荔枝FM、蜻蜓FM、喜马拉雅FM、全民K歌、5sing原创翻唱音乐。",
                    "url": "https://shenzjd.com/shenzjd/music/",
                    "name": "音乐搜索器"
                },
                {
                    "desc": "刘志进特制多站合一音乐搜索解决方案，可搜索试听网易云音乐、QQ音乐、酷狗音乐、酷我音乐、虾米音乐、百度音乐、一听音乐、咪咕音乐、荔枝FM、蜻蜓FM、喜马拉雅FM、全民K歌、5sing原创翻唱音乐。",
                    "url": "https://music.liuzhijin.cn/",
                    "name": "音乐直链搜索"
                },
                {
                    "desc": "上传图片后可以查看像素在LAB、RGB、HSL、HSV中的分布",
                    "url": "http://color3d.herokuapp.com/",
                    "name": "颜色分析工具"
                },
                {
                    "desc": "RGB颜色值与十六进制颜色码转换工具",
                    "url": "http://www.sioe.cn/yingyong/yanse-rgb-16/",
                    "name": "颜色码转换"
                }
            ]
        },
        {
            "title": "在线简历",
            "list": [
                {
                    "desc": "在线生成简历",
                    "url": "https://enhancv.com/",
                    "name": "Enhancv"
                },
                {
                    "url": "http://jerryonlyzrj.com/resume/",
                    "name": "jerryonlyzrj的简历"
                },
                {
                    "desc": "一个外国人制作的简历，网站风格不入我法眼",
                    "url": "http://lucybain.com/",
                    "name": "Lucy Bain"
                },
                {
                    "desc": "超级酷炫的HTML5互动式程序员求职简历",
                    "url": "http://www.webhek.com/post/interactive-resume.html",
                    "name": "Robby Leonardi"
                },
                {
                    "desc": "这是一个很炫酷的展示个人作品的网站",
                    "url": "http://hotu.co/cv/",
                    "name": "个人作品展示"
                },
                {
                    "desc": "很简单的一个简历，但是内容已经足够了",
                    "url": "http://resume.jasinyip.com/",
                    "name": "叶俊星的简介"
                },
                {
                    "desc": "初看这个网站不会很吸引人，但它却是一个创意与技术的完美结合作品，一位前端程序员用很有趣的方式介绍了自己，同时也展现他娴熟的技术，不得不赞一下！",
                    "url": "http://strml.net/",
                    "name": "大牛的自我介绍"
                },
                {
                    "desc": "相比其简历，我更喜欢他的个人主页",
                    "url": "http://szhangpitt.github.io/",
                    "name": "张邵鹏"
                },
                {
                    "desc": "可以切换中英文，提供下载功能，就是网站太慢了",
                    "url": "http://zhangwenli.com/cv/cn.html",
                    "name": "张雯莉的简历"
                },
                {
                    "desc": "简单却不平凡，突出了项目经历，值得推荐",
                    "url": "http://cv.heeroluo.net/",
                    "name": "罗礼权的个人简历"
                },
                {
                    "desc": "一个很独特的简历，不过总感觉可远观而不可亵玩",
                    "url": "https://jirengu-inc.github.io/animating-resume/public/",
                    "name": "饥人谷出品：一个会动的简历"
                }
            ]
        },
        {
            "title": "官方网站",
            "list": [
                {
                    "desc": "FEX_FEX_做最专业的前端_百度前端研发部_百度前端团队Blog",
                    "url": "http://fex.baidu.com/",
                    "name": "百度 FEX"
                },
                {
                    "desc": "摩天轮票务-在线淘票购票安全快捷保真！平台涵盖演唱会,舞台剧,体育赛事,儿童剧,传统曲艺等8大类数十种演出及赛事门票, 热门票折扣票应有尽有,支持在线订票购票.",
                    "url": "https://www.moretickets.com/",
                    "name": "摩天轮票务"
                },
                {
                    "desc": "列举了很多浏览器中的hack",
                    "url": "http://browserhacks.com/",
                    "name": "Browserhacks"
                },
                {
                    "desc": "在这里可以找到各种系统的各版本chrome，chrome 1都有。。",
                    "url": "https://commondatastorage.googleapis.com/chromium-browser-continuous/index.html",
                    "name": "chrome浏览器不同版本"
                },
                {
                    "desc": "使用CSS时的一些技巧和注意事项",
                    "url": "https://css-tricks.com/",
                    "name": "CSS-Tricks"
                },
                {
                    "desc": "可以在这个网站上找到很多关于HTML5的特效和教程",
                    "url": "http://www.html5tricks.com/",
                    "name": "htmlt5tricks"
                },
                {
                    "desc": "Pattern Lab帮助您和您的团队使用原子设计原则构建周到的、模式驱动的用户界面。",
                    "url": "http://patternlab.io/",
                    "name": "Pattern Lab"
                },
                {
                    "desc": "php中文网-互联网开发者平台",
                    "url": "http://www.php100.com/",
                    "name": "php100"
                },
                {
                    "desc": "提供了README中各种徽章的地址，可以很方便的添加和自定义",
                    "url": "https://shields.io/",
                    "name": "shields.io"
                },
                {
                    "desc": "是一个与程序相关的IT技术问答网站。用户可以在网站免费提交问题，浏览问题，索引相关内容",
                    "url": "http://stackoverflow.com/",
                    "name": "stackoverflow"
                },
                {
                    "desc": "亚洲诚信是赛门铁克亚太区官方唯一安全技术专家战略合作伙伴,500强企业首选.提供全球可信的SSL证书、HTTPS证书、EV SSL证书、代码签名证书、SSL数字证书等,SSL证书申请及SSL证书购买一站式服务",
                    "url": "https://www.trustasia.com/",
                    "name": "TrustAsia"
                },
                {
                    "desc": "w3c的官网，内容比较全，有各种语言的入门教程",
                    "url": "http://www.w3school.com.cn/",
                    "name": "W3C官网"
                },
                {
                    "desc": "w3c规范的镜像版，中文未校订，但是优化了阅读体验，可以很方便的查找规范",
                    "url": "http://yanhaijing.com/es5/#about",
                    "name": "w3c规范镜像版"
                },
                {
                    "desc": "创建前端样式指南和模式库的协作资源集合",
                    "url": "http://styleguides.io/",
                    "name": "Website Style Guide Resources"
                },
                {
                    "desc": "可以搜索任何关键词，然后会显示与该关键词相关的信息",
                    "url": "http://www.wolframalpha.com/",
                    "name": "WolframAlpha"
                },
                {
                    "desc": "WOW.js是一个给页面添加滚动动画的JS插件，可以与Animate.css完美结合。",
                    "url": "http://mynameismatthieu.com/WOW/",
                    "name": "WOW.js"
                },
                {
                    "desc": "提供了多种wordpress主题",
                    "url": "http://www.xintheme.com/",
                    "name": "xintheme"
                },
                {
                    "desc": "十分钟创建网站和小程序，无需专业技术知识与设计经验",
                    "url": "https://www.sxl.cn/",
                    "name": "上线了"
                },
                {
                    "desc": "wordpress的各种主题，其中有免费的，也有付费的，可以在上面尝试几个，可能会有复合自己审美口味的",
                    "url": "http://www.themepark.com.cn/",
                    "name": "主题公园"
                },
                {
                    "desc": "一个在线学习前端的网站，知识比较基础，适合新手",
                    "url": "https://www.quanzhanketang.com/",
                    "name": "全栈课堂"
                },
                {
                    "desc": "前端总结网站，有一些手册和在线编辑功能，同时有一些比较实用的插件地址",
                    "url": "http://code.ciaoca.com",
                    "name": "前端开发仓库"
                },
                {
                    "desc": "北邮人常用的导航页，随时随地 byr.wiki。一个框，全能搜！若打开缓慢，请访问简洁版 http://so.byr.wiki/",
                    "url": "http://byr.wiki/",
                    "name": "北邮人导航"
                },
                {
                    "desc": "深入挖掘国外前端新领域，为中国 Web 前端开发人员提供优质文档！",
                    "url": "https://docschina.org/",
                    "name": "印记中文"
                },
                {
                    "desc": "非官方数码兽同好站点，但是内容很多，包括图鉴、玩具、游戏、漫画、动画等等",
                    "url": "http://www.digimons.net/",
                    "name": "数码兽数据库"
                },
                {
                    "desc": "漫威官方网站，你想知道的都在这里",
                    "url": "https://www.marvel.com",
                    "name": "漫威官网"
                },
                {
                    "desc": "感觉和w3c做的好像，不过好像界面会更优美一点，不过我没有看过上面的教程",
                    "url": "http://www.runoob.com",
                    "name": "菜鸟教程"
                },
                {
                    "desc": "电影《言叶之庭》官网",
                    "url": "http://www.kotonohanoniwa.jp/",
                    "name": "言叶之庭官网"
                }
            ]
        },
        {
            "title": "数据分析工具",
            "list": [
                {
                    "desc": "主要特点是对页面热点追踪分析的热力图，功能不错",
                    "url": "http://www.crazyegg.com/",
                    "name": "Crazy egg热力图"
                },
                {
                    "desc": "本质上是一个BI产品，配备百亿级社交数据库，支持全网公开数据实时抓取，并搭载了分布式搜索、语义分析、数据可视化三大引擎系统的海量计算平台，实现数据处理“探索式分析”和“秒级响应”的两个核心功能。",
                    "url": "https://cube.datastory.com.cn/",
                    "name": "数说立方"
                },
                {
                    "desc": "包括流量相关的网站统计、推广统计、移动统计三部分内容。分析内容包括趋势分析、来源分析、页面分析、访客分析、定制分析和优化分析。其中的页面点击热力图功能不错。",
                    "url": "http://tongji.baidu.com/",
                    "name": "百度统计"
                },
                {
                    "desc": "包括流量分析工具、内容分析、社交分析、移动分析、转化分析、广告分析几部分内容",
                    "url": "http://www.google.com/analytics/",
                    "name": "谷歌分析"
                }
            ]
        },
        {
            "title": "炫酷特效",
            "list": [
                {
                    "desc": "可以在线预览各种 CSS 动画，并进行组合和代码查看",
                    "url": "https://animista.net/play/basic",
                    "name": "Animista"
                },
                {
                    "desc": "日本某著名摄影家的个人网站，站点非常炫酷",
                    "url": "https://hajimewatanabe.jp/portfolio/",
                    "name": "HAJIME WATANABE"
                },
                {
                    "desc": "利用WebGL实现的鼠标滑动特效",
                    "url": "https://paveldogreat.github.io/WebGL-Fluid-Simulation/",
                    "name": "WebGL-Fluid-Simulation"
                },
                {
                    "desc": "一加手机的官网，从视觉效果上和交互特效上就给人眼前一亮的感觉",
                    "url": "https://www.oneplus.com/cn/7pro#/",
                    "name": "One Plus 7 Pro"
                },
                {
                    "desc": "首页的交互式的水滴特效很有意思",
                    "url": "https://www.canva.cn/",
                    "name": "Canva"
                },
                {
                    "desc": "使用了大量 CSS3 动画",
                    "url": "https://browser.qq.com/mac/",
                    "name": "QQ 浏览器官网"
                },
                {
                    "desc": "用各种wearable记录自己的数据 特效特别酷炫",
                    "url": "http://aprilzero.com/",
                    "name": "Aanad Sharma"
                },
                {
                    "desc": "在线生成各种CSS动画",
                    "url": "http://animista.net",
                    "name": "Animista"
                },
                {
                    "desc": "本款美食类网站，整款设计采用了非常有趣的黑白插画设计风格，极赋视觉吸引力。加之，通过直观的黑白网格，更加直观集中的展示其产品和相关服务，用户体验也是极好。",
                    "url": "https://www.anita-gelato.com/",
                    "name": "Anita"
                },
                {
                    "desc": "风格诡谲暗黑手绘草稿儿一样的网站，一段充满特效的旅程就此开始",
                    "url": "http://aualeu.ro/",
                    "name": "Auăleu"
                },
                {
                    "desc": "黑色背景，辅以高清彩色产品图片或视频，能够极大的强调和突出页面产品，提升产品销售量。而作为一款在线咖啡类产品售卖的网站，本网页，就在黑色背景上，展示了各种高清产品图片和视频，轻轻松松将让用户集中于所售卖的产品，从而效的提升用户购买的可能。",
                    "url": "https://www.baileyscreamers.com/",
                    "name": "Bailey Coffee Screamers"
                },
                {
                    "desc": "该款汽车类网页设计，除了采用处处透着高档奢华之感的黑、白、蓝配色方案之外，最引人入胜的是其页面添加的交互式车道设计。用户简单滚动鼠标，跟随蜿蜒的车道，指尖轻点，即可了解产品（即各类车型）相关信息。此外，车辆信息，全屏视频展示，也更加生动直观，有趣而不失实用性，有效地降低了网站跳出率。",
                    "url": "https://www.bugatti.com/divo/",
                    "name": "Bugatti Divo"
                },
                {
                    "desc": "前端设计网站Codrops收集的一些2018年的酷炫特效demo和网站",
                    "url": "https://tympanus.net/codrops2018/",
                    "name": "Codrops2018"
                },
                {
                    "desc": "提供了很多酷炫的背景图片，你可以将它们添加到博客，网站，或作为电脑和手机的壁纸。",
                    "url": "https://coolbackgrounds.io/",
                    "name": "Cool Backgrounds"
                },
                {
                    "desc": "位于比利时的一个平面设计工作室网站，一些hover特效蛮不错的",
                    "url": "https://gravual.com/en/",
                    "name": "GRAVUAL™ – Graphic Design Studio in Antwerp"
                },
                {
                    "desc": "很火的一个人体时钟，可以直接看其源码引用，本质上是用flash实现的",
                    "url": "http://blog.itmyhome.com/hone_hone_clock/",
                    "name": "Hone Hone Clock"
                },
                {
                    "desc": "这是个作品集展示网页，方方面面（包括背景图片，页面文案以及鼠标悬浮效果等等）都采用了极其简约的黑白配色，干净整洁。结合视觉滚动差设计，让整个网页更加流畅而实用。 而且，通过3D技术展示的页面图片和设计作品，也极具视觉效果。",
                    "url": "https://kentatoshikura.com/",
                    "name": "Kenta Toshikura"
                },
                {
                    "desc": "黑白配色中的黑，轻松即可让人联想到黑夜。而论提升页面视觉效果，与黑夜最搭的，无疑是五颜六色的灯光。而本款影视类网页的设计师深刻的认识到这一点，利用光束和光点，结合电影主题，打造出了极具视觉效果的科幻风设计。",
                    "url": "https://kin.movie/",
                    "name": "Kin Movie"
                },
                {
                    "desc": "这是一个以故事形式来展现的网站，动画很有感觉，所有的画面非常的漂亮，就像在看电影一样，同时网站还带有一至交互体验，让用户去选择。",
                    "url": "http://oatthegoat.co.nz/",
                    "name": "Oat the Goat"
                },
                {
                    "desc": "本款化妆品类网页设计，通过不规则的字母排版，让整款设计低调而时尚。加之，黑白配色的应用，若隐若现背景图的点缀，使整个网页奢华而神秘。非常符合其所售卖产品——女性化妆品的特色。",
                    "url": "https://skinfinity.hr/",
                    "name": "Skinfinity Cosmetics"
                },
                {
                    "desc": "炫酷的动画效果",
                    "url": "http://strml.net/",
                    "name": "STRML"
                },
                {
                    "desc": "本款在线工作室类网页设计，采用黑白配色风格的同时，选用了极具特色的横向滚动式设计，新颖实用。",
                    "url": "https://studiobjork.com/",
                    "name": "Studio Bjork"
                },
                {
                    "desc": "在线摄影和多媒体博物馆的网页设计，采用黑白配色方案的同时，利用黑色背景下，白色光点更易于突出展示内容的特点。通过交互式设计方式，为用户提供了极具视觉效果的网页设计。用户滑动鼠标，光点即跟随变化，展开或隐藏界面导航。",
                    "url": "https://tpmm.ge/en/",
                    "name": "TPMM"
                },
                {
                    "desc": "一款markdown编辑器和阅读器",
                    "url": "https://typora.io/",
                    "name": "typora"
                },
                {
                    "desc": "这是一个设计爱好者的聚集地，他们在这里分享和讨论最有趣和独特的UI设计。",
                    "url": "https://uimovement.com/",
                    "name": "UI Moverment"
                },
                {
                    "desc": "体会如何通过字体、颜色、排版表现力度和冲击感",
                    "url": "http://www.vo2-group.com/en",
                    "name": "VO2 Group"
                },
                {
                    "desc": "全屏滚动，特效很多",
                    "url": "http://dreamwq.com/home/",
                    "name": "大冬瓜主页"
                },
                {
                    "desc": "智能社就是前端开发培训，北京最具深度和口碑的JavaScript、HTML5培训，专注于让学员获得快乐的学习体验并找到高薪工作的培训——数百名毕业学员高薪就职大型互联网公司，推出的《智能社JavaScript视频教程》更被大家誉为——最经典的JavaScript视频教程。",
                    "url": "http://www.zhinengshe.com/index.html",
                    "name": "智能社"
                },
                {
                    "desc": "很酷炫的一个个人站，一个 设计+代码 多修的“手艺人”。",
                    "url": "http://glexe.com/#/intro",
                    "name": "第5维度™工作室"
                },
                {
                    "desc": "简洁大气，交互很有个性，背景音乐也不错，博主是湖南卫视芒果TV视觉设计师",
                    "url": "http://www.syg315.com/",
                    "name": "素云阁"
                },
                {
                    "desc": "专注WordPress高端主题设计与开发，为您提供一个现代、干净的WEB站点！",
                    "url": "https://salongweb.com/",
                    "name": "萨龙网络"
                }
            ]
        },
        {
            "title": "电子书",
            "list": [
                {
                    "desc": "可以搜索电子书，主要是自然科学和工程方面的书籍",
                    "url": "http://libgen.rs/",
                    "name": "Library Genesis"
                },
                {
                    "desc": "bookset精品电子书免费下载，分享的免费电子书格式有mobi，epub，azw3等格式，并根据豆瓣评分排序，提供的电子书均为精品，有得到，喜马拉雅，微信读书，知乎等推荐书籍",
                    "url": "https://bookset.me/",
                    "name": "bookset"
                },
                {
                    "desc": "雅书电子书下载站，提供最新PDF电子书图书免费下载，以PDF为主的PDF电子书免费下载供学习使用。",
                    "url": "https://yabook.org/",
                    "name": "雅书"
                },
                {
                    "desc": "专业的电子书下载网站,epub,azw3,mobi,pdf,txt格式下载,小说文学,经济管理,传记,政治军事,历史、心理、教材辅助、外语学习等中英文电子书下载。",
                    "url": "http://booksk.com/",
                    "name": "好多书"
                },
                {
                    "desc": "通过此PDF转至MOBI格式的转换软件，您可以将PDF文档转换成Kindle设备适用的MOBI文档。",
                    "url": "https://pdf2mobi.com/zh/",
                    "name": "PDF转MOBI"
                },
                {
                    "desc": "网站页面简洁，无广告。书伴还有一个最大的特色是【推送服务】，注册账号后，定期会自动接收到最新期刊的更新。书伴电子书资源不是很多，但是更新速度快",
                    "url": "https://bookfere.com/",
                    "name": "书伴"
                },
                {
                    "desc": "书格是一个自由开放的在线古籍图书馆，致力于开放式分享、介绍、推荐有价值的古籍善本，并鼓励将文化艺术作品数字化归档。",
                    "url": "https://shuge.org/",
                    "name": "书格"
                },
                {
                    "desc": "GitHub 上开源、有趣的 开源书籍 – 适合新手入门的 开源书籍",
                    "url": "https://hellogithub.com/periodical/category/开源书籍/?page=1",
                    "name": "开源书籍"
                },
                {
                    "desc": "专注精校小说，网站同样没有多余的广告。",
                    "url": "http://www.zxcs.me/",
                    "name": "知轩藏书"
                },
                {
                    "desc": "西林街不仅仅可以搜索电子书，可以通过自定义搜索设置，搜索【网盘】、【视频】、【Mooc】等。另外，还可以搜索相应的学术搜索，为科研人员带来了方便之处。",
                    "url": "https://www.xilinjie.com/",
                    "name": "西林街"
                },
                {
                    "desc": "鸠摩搜书，是国内一款强大的电子书搜索引擎，涵盖大部分电子书资源，界面简洁，无广告骚扰。另外无需注册、就可以直接下载国内外电子书，部分书籍还有在线朗读版。",
                    "url": "https://www.jiumodiary.com/",
                    "name": "鸠摩搜书"
                }
            ]
        },
        {
            "title": "社区",
            "list": [
                {
                    "desc": "京东零售官方设计共享平台",
                    "url": "https://jelly.jd.com/",
                    "name": "JDR Design"
                },
                {
                    "desc": "樱花动漫拥有上万集高清晰画质的在线动漫，观看完全免费、无须注册、高速播放、更新及时的专业在线樱花动漫站，我们致力为所有动漫迷们提供最好看的动漫。",
                    "url": "http://www.yhdm.tv/",
                    "name": "樱花动漫"
                },
                {
                    "desc": "有很多关于算法和数据结构的文章",
                    "url": "https://www.cxyxiaowu.com/",
                    "name": "五分钟学算法"
                },
                {
                    "desc": "Topbook是一本持续更新的视频书，致力于让现代人摆脱资讯的控制，在避无可避的科技生活中，让工具回归工具，让每个人成为自己。",
                    "url": "https://topbook.cc/overview",
                    "name": "Topbook"
                },
                {
                    "desc": "主要提供丰富的影视资源下载,并且可以在线云播预览,上映之后三个月内发布枪版,三个月之后发布蓝光高清下载",
                    "url": "https://www.bdys.co/",
                    "name": "BD影视"
                },
                {
                    "desc": "这个网站上有超过4000份对照表，包括Linux、MySQL、Vim等等",
                    "url": "https://www.cheatography.com/",
                    "name": "Cheatography"
                },
                {
                    "desc": "Codrops是一个专注于网页设计和开发的博客，发布最新的互联网技术和新的可能性的趋势的文章和相关教程。",
                    "url": "https://tympanus.net/codrops/",
                    "name": "Codrops"
                },
                {
                    "desc": "已经没落的CSDN，好文章越来越少了感觉",
                    "url": "http://blog.csdn.net/web/index.html",
                    "name": "CSDN"
                },
                {
                    "desc": "这是国外知名的粉丝文化社区，你能在上面找到几乎所有领域的粉丝群，无论是游戏，电影，电视剧还是漫画",
                    "url": "http://fandom.wikia.com/",
                    "name": "Fandom"
                },
                {
                    "desc": "机核网，国内首个综合性的游戏（以各大主机游戏为主）、游戏周边的网络广播站点及论坛，并为广大游戏玩家提供最新最及时的声讯、视讯以及现场报道。",
                    "url": "https://www.g-cores.com/",
                    "name": "GAMECORES"
                },
                {
                    "desc": "最好的项目管理工具，程序猿必备技能",
                    "url": "https://github.com/",
                    "name": "Github"
                },
                {
                    "desc": "这里是一个提供用户脚本的网站",
                    "url": "https://greasyfork.org/zh-CN",
                    "name": "Greasy Fork"
                },
                {
                    "desc": "致力于收集jQuery插件和提供各种jQuery特效的详细使用方法，提供在线预览，jQuery插件下载及教程。",
                    "url": "http://www.jq22.com/",
                    "name": "jQuery插件库"
                },
                {
                    "desc": "这是一个历史悠久的漫威粉丝网站，专门出品各种以假乱真的“官方海报/壁纸”，全部都是粉丝自发制作的，免费下载。",
                    "url": "http://marvelspoileroficial.blogspot.com/",
                    "name": "Marvel Spoiler Official"
                },
                {
                    "desc": "仍然很活跃的社区，帖子很多",
                    "url": "https://segmentfault.com/",
                    "name": "SegmentFault"
                },
                {
                    "desc": "wordpress主题下载",
                    "url": "http://www.xintheme.com/",
                    "name": "xintheme"
                },
                {
                    "desc": "微信公众号“前端大全”经常引用这里的文章",
                    "url": "http://web.jobbole.com/",
                    "name": "伯乐在线"
                },
                {
                    "desc": "前端乱炖，这里是最专业的前端知识平台，汇集国内大部分前端开发人员的前端花名册，最精彩的原创文章专栏，最专业的问答平台，最火热的话题频道，最丰富的线下线上活动。",
                    "url": "http://www.html-js.com/",
                    "name": "前端乱炖"
                },
                {
                    "desc": "原来是W3Cfuns，现在变成了QDfuns，而且好多广告",
                    "url": "http://www.qdfuns.com/",
                    "name": "前端网"
                },
                {
                    "desc": "开发者的网上家园，原创文章还是蛮多的",
                    "url": "http://www.cnblogs.com/",
                    "name": "博客园"
                },
                {
                    "desc": "吾爱破解论坛致力于软件安全与病毒分析的前沿，丰富的技术版块交相辉映，由无数热衷于软件加密解密及反病毒爱好者共同维护",
                    "url": "https://www.52pojie.cn/",
                    "name": "吾爱破解"
                },
                {
                    "desc": "不太喜欢他的排版和网站风格",
                    "url": "http://www.oschina.net/",
                    "name": "开源中国"
                },
                {
                    "desc": "捷径社区，专注于发现和分享 Siri 捷径，让人们通过捷径探索 iOS 更大的世界。",
                    "url": "https://sharecuts.cn/",
                    "name": "捷径社区"
                },
                {
                    "desc": "斗图啦，收集了成千上万的撕逼斗图表情包，在这里你可以快速找到想要的表情，通过在线表情制作可以快速生成自定义表情。",
                    "url": "https://www.doutula.com/",
                    "name": "斗图啦"
                },
                {
                    "desc": "专业、严谨、有趣，游戏时光致力于分享游戏乐趣，为玩家们提供快速准确的新闻资讯、全面的资料和友好开放的交流平台。",
                    "url": "https://www.vgtime.com/",
                    "name": "游戏时光"
                },
                {
                    "desc": "免费WordPress主题、WordPress模板及WordPress插件分享下载，致力于为国内站长提供方便快捷的wordpress建站服务体验，爱主题所收集的wordpress主题涵盖范围广，包括：WordPress企业主题、CMS主题、图片主题、博客主题等，同时我们也提供自己的原创wordpress企业主题模板出售，给您更多选择。",
                    "url": "https://www.iztwp.com/",
                    "name": "爱主题"
                },
                {
                    "desc": "中国设计师互动平台。深耕设计领域十二年，站酷聚集了650万设计师、摄影师、插画师、艺术家、创意人，设计创意群体中具有较高的影响力与号召力。",
                    "url": "https://www.zcool.com.cn/",
                    "name": "站酷"
                },
                {
                    "desc": "精选全球优秀UI设计和网页设计欣赏，分享免费高质量设计素材，为设计师提供新鲜的技术教程和创意灵感，探讨交互设计、产品设计、用户体验以及xhtml+css教程。",
                    "url": "http://www.shejidaren.com/",
                    "name": "设计达人"
                }
            ]
        },
        {
            "title": "素材下载",
            "list": [
                {
                    "desc": "可以搜索各种类型的壁纸或图片和摄影作品",
                    "url": "https://alphacoders.com/",
                    "name": "Alpha Coders"
                },
                {
                    "desc": "图标库集合，收集了各种各样的图标，提供各种格式的下载",
                    "url": "https://icones.js.org/",
                    "name": "Icônes"
                },
                {
                    "desc": "3PNG网（3png.com）是国内专注高清png元素免抠图片素材库！专注提供漂浮、装饰、卡通、促销、节日、艺术字、图标、动物、植物、边框、PPT、人物、城市地标、标徽LOGO等免费的png图片和素材，从此无需抠图，百万精品高清png图片免费下载。",
                    "url": "http://3png.com/",
                    "name": "PNG三元素"
                },
                {
                    "desc": "下载免抠素材就来快图网，这里为设计师提供png图片,ppt素材,ps素材,站长素材,psd素材,背景素材,水墨素材,边框素材,图标素材,花边素材,空间素材,海报素材,ppt图片素材,微信素材,p图素材,人物素材,相框素材等。下快图素材，成天下设计。",
                    "url": "http://www.kuaipng.com/",
                    "name": "快图网"
                },
                {
                    "desc": "千库网是国内设计师喜欢的图片素材库，588ku.com为设计师提供各类好看免费的png图片和素材、背景图片、背景素材、海报背景、banner背景、边框花纹素材、艺术字、主图和直通车背景等，找素材就上千库网，百万精品图片等您下载！",
                    "url": "http://588ku.com/",
                    "name": "千库网"
                },
                {
                    "desc": "关于乐高的一切在这里都可以找到，还有一些免费/付费的 Moc 图纸",
                    "url": "https://rebrickable.com/",
                    "name": "Rebrickable"
                },
                {
                    "desc": "海报不少，而且像素都很高，不过购买的话会比较贵",
                    "url": "http://cinemasterpieces.com/",
                    "name": "CineMasterPieces"
                },
                {
                    "desc": "在线快速图片和视频编辑，不会PS也能搞定设计。海报、简历、PPT、公众号配图、电商等海量模板快速出图。三秒抠图实用便捷，抖音快手热门视频轻松搞定。",
                    "url": "https://www.gaoding.com/",
                    "name": "稿定设计"
                },
                {
                    "desc": "奇遇网络专业提供seo优化服务，seo优化外包，免费建站模板，免费wordpress模板，DIV+CSS模板,几千种免费网页模板，收集最好最全的html5模板及css3模板,html5是目前最前瞻的网页技术,本站为大家提供免费技术交流平台。",
                    "url": "https://www.qiyuwg.com/",
                    "name": "奇遇网络"
                },
                {
                    "desc": "收集了很多特殊符号，直接复制之后就可以使用，同时还有网名、图案等",
                    "url": "https://www.fuhaoku.net/",
                    "name": "符号库"
                },
                {
                    "desc": "收录了超过 300000 个网站和应用的 logo 矢量图，同时可免费下载",
                    "url": "https://seeklogo.com/",
                    "name": "seeklogo"
                },
                {
                    "desc": "提供了一些知名产品的 Logo 免费下载，支持 SVG 格式和搜索",
                    "url": "https://worldvectorlogo.com/",
                    "name": "Worldvectorlogo"
                },
                {
                    "desc": "收集了和太阳与地球相关的一些工具，包括太阳位置、经纬度坐标、光伏坐标、二氧化碳排放量等可视化展示",
                    "url": "https://www.sunearthtools.com/index.php",
                    "name": "SunEarthTools"
                },
                {
                    "desc": "各种各样的素材和源码",
                    "url": "http://www.17sucai.com/",
                    "name": "17素材"
                },
                {
                    "desc": "游戏素材资源平台",
                    "url": "http://www.6m5m.com/",
                    "name": "6m5m"
                },
                {
                    "desc": "Codrops是一个专注于网页设计和开发的博客，发布最新的互联网技术和新的可能性的趋势的文章和相关教程。",
                    "url": "https://tympanus.net/codrops/",
                    "name": "Codrops"
                },
                {
                    "desc": "提供了很多酷炫的背景图片，你可以将它们添加到博客，网站，或作为电脑和手机的壁纸。",
                    "url": "https://coolbackgrounds.io/",
                    "name": "Cool Backgrounds"
                },
                {
                    "desc": "CSS Gradients with background-blend-mode",
                    "url": "https://bennettfeely.com/gradients/",
                    "name": "CSS Gradients"
                },
                {
                    "desc": "所有图片你都可以复制、修改和分发，即使是为了商业目的",
                    "url": "http://cupcake.nilssonlee.se/",
                    "name": "Cupcake"
                },
                {
                    "desc": "很多素材，包括图片、模板以及图标等等",
                    "url": "http://designdeck.co.uk/",
                    "name": "design deck"
                },
                {
                    "desc": "提供不同分辨率的好看的壁纸",
                    "url": "https://www.desktoppr.co/",
                    "name": "Desktoppr"
                },
                {
                    "desc": "是一个全球优秀设计师聚集的地方，可以从上面发现很多Web设计的灵感和创意",
                    "url": "https://dribbble.com/",
                    "name": "dribbble"
                },
                {
                    "desc": "一个好看的css loading 代码库",
                    "url": "http://epic-spinners.epicmax.co/#/",
                    "name": "Epic Spinners"
                },
                {
                    "desc": "共有37000款英文字体供免费下载和使用，搜索avengers还有复仇者联盟中的字体，整整49款。",
                    "url": "https://www.fontspace.com",
                    "name": "Font Space"
                },
                {
                    "desc": "谷歌字体，可以很方便的引用",
                    "url": "https://fonts.google.com/",
                    "name": "Google Font"
                },
                {
                    "desc": "世界上最奇特的免费高分辨率图片集合，包括世界上最好，最有创意的照片，完全免费。",
                    "url": "https://gratisography.com/",
                    "name": "Gratisography"
                },
                {
                    "desc": "提供Microsoft Word, Microsoft Excel, PDF, Google Docs的模板",
                    "url": "https://www.hloom.com/",
                    "name": "Hloom"
                },
                {
                    "desc": "响应式的HTML5和CSS3站点模板",
                    "url": "https://html5up.net/",
                    "name": "HTML5 UP"
                },
                {
                    "desc": "致力于收集jQuery插件和提供各种jQuery特效的详细使用方法，提供在线预览，jQuery插件下载及教程。",
                    "url": "http://www.jq22.com/",
                    "name": "jQuery插件库"
                },
                {
                    "desc": "这是个免抠素材库，共有将近640万张png格式的矢量图，不限次数下载。",
                    "url": "https://www.kisspng.com/",
                    "name": "kiss png"
                },
                {
                    "desc": "一个做PPT的神器，提供PPT模板、简历、图表下载，同时提供图表、背景图等资源的下载",
                    "url": "http://www.koppt.cn/",
                    "name": "KOPPT"
                },
                {
                    "desc": "摄影级别的图片，像素非常高，支持搜索和免费下载",
                    "url": "https://www.lifeofpix.com/",
                    "name": "Lifeofpix"
                },
                {
                    "desc": "可以免费下载很多种杂志，不过大多是英文的",
                    "url": "http://magazinelib.com/",
                    "name": "MAGAZINELIB"
                },
                {
                    "desc": "这是一个历史悠久的漫威粉丝网站，专门出品各种以假乱真的“官方海报/壁纸”，全部都是粉丝自发制作的，免费下载。",
                    "url": "http://marvelspoileroficial.blogspot.com/",
                    "name": "Marvel Spoiler Official"
                },
                {
                    "desc": "这里提供游戏相关的素材免费下载，包括图片、音频、动画等，大部分都是网友自愿上传的。",
                    "url": "https://opengameart.org/",
                    "name": "Open Game Art"
                },
                {
                    "desc": "作者设计了一些logo，你可以进行申请，社区将决定哪个开源社会获得此logo",
                    "url": "http://openlogos.org/",
                    "name": "OPEN LOGOS"
                },
                {
                    "desc": "Pattern Lab帮助您和您的团队使用原子设计原则构建周到的、模式驱动的用户界面。",
                    "url": "http://patternlab.io/",
                    "name": "Pattern Lab"
                },
                {
                    "desc": "免费高清图片，你可以任意使用",
                    "url": "https://www.pexels.com/",
                    "name": "PEXELS"
                },
                {
                    "desc": "网站收录的图片多以暖色为主，完全免费",
                    "url": "https://picjumbo.com/",
                    "name": "Picjumbo"
                },
                {
                    "desc": "1.4 百万张图片和视频，这是一个充满活力的创意社区",
                    "url": "https://pixabay.com/",
                    "name": "Pixabay"
                },
                {
                    "desc": "免费图片库，每周增加数百张高分辨率图像。",
                    "url": "https://stocksnap.io/",
                    "name": "StockSnap.io"
                },
                {
                    "desc": "免费高清大图",
                    "url": "http://streetwill.co/",
                    "name": "Streetwill"
                },
                {
                    "desc": "这是一个设计爱好者的聚集地，他们在这里分享和讨论最有趣和独特的UI设计。",
                    "url": "https://uimovement.com/",
                    "name": "UI Moverment"
                },
                {
                    "desc": "不断更新各种免费的SVG素材，可以免费下载，可用写文章插图",
                    "url": "https://undraw.co/",
                    "name": "unDraw"
                },
                {
                    "desc": "一个简单的API，用于嵌入来自Unsplash的高分辨率照片。",
                    "url": "https://source.unsplash.com/",
                    "name": "Unsplash Source"
                },
                {
                    "desc": "Uplabs是一个创意集中的社区，每天都会提供最好的特效灵感并提供下载",
                    "url": "https://www.uplabs.com",
                    "name": "Uplabs"
                },
                {
                    "desc": "收集了很多用Vue.js实现的好的例子",
                    "url": "https://vuejsexamples.com/",
                    "name": "Vue.js Examples"
                },
                {
                    "desc": "提供很多免费的响应式网站模板下载",
                    "url": "http://pixweb.authing.cn/#/",
                    "name": "像素网页"
                },
                {
                    "desc": "极简的平面设计工具，有很多设计类模板，包括PPT、海报等",
                    "url": "https://www.chuangkit.com/",
                    "name": "创客贴"
                },
                {
                    "desc": "高质量无版权图片遵循 CC0 协议，来自全球的内容社区，随时随地发布与使用",
                    "url": "https://www.ssyer.com/",
                    "name": "别样网"
                },
                {
                    "desc": "包图网的内容包括图标图片，图标素材，图标模板，图标设计等",
                    "url": "https://ibaotu.com/",
                    "name": "包图网"
                },
                {
                    "desc": "专注免费设计素材网站",
                    "url": "http://www.58pic.com/",
                    "name": "千图网"
                },
                {
                    "desc": "提供免费电子书下载、分享。包括mobi、epud、pdf、txt格式，kindle电子书下载",
                    "url": "http://www.ireadweek.com/index.php/",
                    "name": "周读"
                },
                {
                    "desc": "开创者素材专注于网站模板的建设与解决方案，提供最好的网站模板！免费为站长提供JS代码、HTML整站模板、CMS开源程序等代码下载功能和站长工具查询服务!",
                    "url": "http://www.kaicz.com/",
                    "name": "开创者素材"
                },
                {
                    "desc": "集中了小程序开发资源，包括专业工具、参考文档和开发教程等等",
                    "url": "http://www.yimijili.com/xcxwzdh.html",
                    "name": "微信小程序开发资源精选网址导航"
                },
                {
                    "desc": "可能是JS网页特效代码收集最全的懒站",
                    "url": "http://www.lanrenzhijia.com/",
                    "name": "懒人之家"
                },
                {
                    "desc": "全球第一中文web font（在线字体）服务平台，专为网页设计师提供在线字体",
                    "url": "https://www.youziku.com/",
                    "name": "有字库"
                },
                {
                    "desc": "求字体网免费提供上传图片找字体、字体实时预览及字体下载服务，本网站可识别中文、英文、日韩、书法等多种类字体。只要上传图片或输入字体名称，就可以帮您找字体。",
                    "url": "http://www.qiuziti.com/",
                    "name": "求字体"
                },
                {
                    "desc": "PPT模板，PPT图表，PPT作品，PPT动画，keynote模板，图片素材",
                    "url": "http://www.yanj.cn/",
                    "name": "演界网"
                },
                {
                    "desc": "CodePen炫光生成器，可以利用它生成各种各样的炫彩背景。点击鼠标就随机生成一张图就可以了，最后右键保存图片即可。",
                    "url": "http://codepen.io/tsuhre/full/BYbjyg",
                    "name": "炫光生成器"
                },
                {
                    "desc": "免费WordPress主题、WordPress模板及WordPress插件分享下载，致力于为国内站长提供方便快捷的wordpress建站服务体验，爱主题所收集的wordpress主题涵盖范围广，包括：WordPress企业主题、CMS主题、图片主题、博客主题等，同时我们也提供自己的原创wordpress企业主题模板出售，给您更多选择。",
                    "url": "https://www.iztwp.com/",
                    "name": "爱主题"
                },
                {
                    "desc": "中国设计师互动平台。深耕设计领域十二年，站酷聚集了650万设计师、摄影师、插画师、艺术家、创意人，设计创意群体中具有较高的影响力与号召力。",
                    "url": "https://www.zcool.com.cn/",
                    "name": "站酷"
                },
                {
                    "desc": "很老的一个素材网站，但是内容还是很多的",
                    "url": "http://sc.chinaz.com/",
                    "name": "站长素材"
                },
                {
                    "desc": "美图的前端团队制作的动画库，收集了一些简单实用的动画，可以直接复制代码",
                    "url": "http://f2er.meitu.com/animastore/",
                    "name": "美图前端动画库"
                },
                {
                    "desc": "藏标网提供在线logo设计欣赏、标志图片素材、公司商标设计、国外标志设计欣赏、字体设计大全、企业吉祥物设计、校徽设计含义分享的标志网站，为logo设计师和设计爱好者提供一个寻找标识设计寓意的灵感平台，从分享logo设计图片素材过程中进步提高。",
                    "url": "http://logonc.com/",
                    "name": "藏标网"
                },
                {
                    "desc": "在线免费制作各种美女举牌照,id照,搞笑网络证件,搞笑表情在线制作,支付宝转账生成,装b神器,装逼神器,随风出品",
                    "url": "http://deepba.com/",
                    "name": "装逼神器"
                },
                {
                    "desc": "觅元素,设计元素的免费下载网站,提供位图、透明背景素材、高清png、图片素材、漂浮元素、装饰元素、标签元素、字体元素、图标元素等免抠设计元素的免费下载.",
                    "url": "http://www.51yuansu.com/",
                    "name": "觅元素"
                },
                {
                    "desc": "精选全球优秀UI设计和网页设计欣赏，分享免费高质量设计素材，为设计师提供新鲜的技术教程和创意灵感，探讨交互设计、产品设计、用户体验以及xhtml+css教程。",
                    "url": "http://www.shejidaren.com/",
                    "name": "设计达人"
                },
                {
                    "desc": "飞屋是一个以简约轻盈风格为方向的网页设计工作室，为你提供Web端的创意视觉多平台解决方案。",
                    "url": "https://www.ifeiwu.com/",
                    "name": "飞屋设计"
                }
            ]
        },
        {
            "title": "网站导航",
            "list": [
                {
                    "desc": "优设网站导航为设计师提供ps教程、UI设计、素材下载、高清图库、配色方案、用户体验、网页设计等全方位设计师网站导航指引。每周更新及时，是优秀设计联盟（SDC）旗下最实用、最专业、最全面、最好用的设计师导航！",
                    "url": "http://hao.uisdc.com/",
                    "name": "优设导航"
                },
                {
                    "desc": "千山是一个简洁的网址导航。没有广告、弹窗和冗余信息，千山希望成为通向未知的最短路径。快捷键直达站点、一键打开多个标签页，千山愿为你节省每分每秒。",
                    "url": "http://qianshan.co/",
                    "name": "千山"
                },
                {
                    "desc": "建站于2006年，专注于收藏有价值的有效更新的优秀个人独立博客。",
                    "url": "http://www.jetli.com.cn/",
                    "name": "博客志"
                },
                {
                    "desc": "咪咕鱼，一个分享实用链接的网站，在这里你可以发现更多优秀有用的站点，收藏自己喜欢的链接。",
                    "url": "http://www.miguyu.com",
                    "name": "咪咕鱼"
                },
                {
                    "desc": "大数据导航，以大数据产业为主，大数据工具为辅，给用户提供一个更加快速找到大数据相关的工具平台。",
                    "url": "http://hao.199it.com/",
                    "name": "大数据导航"
                },
                {
                    "desc": "微信工作者的智库，收集了微信相关的工具，包括编辑器、二维码生成器和插件等等。",
                    "url": "http://wxbbx.jh1z.com/",
                    "name": "微信百宝箱"
                },
                {
                    "desc": "最好的微信小程序大全，收录最全、分类最准确。是集微信小程序商店、微信小游戏，微信公众号平台,微官网，微网址为一体的微信大全，微信二维码大全。微信应用号,微信订阅号,微信服务号, 三位一体完美结合。更有微头条，微商大全，微信精华一站全包括。",
                    "url": "http://www.we123.com/",
                    "name": "微导航"
                },
                {
                    "desc": "国内首屈一指的技术教程活动导航分类平台，站点已累计收录数千网站，累计为中国网民提供多达数亿的访问点击，满足用户随时查阅最全面最权威的文章资讯教程",
                    "url": "https://www.daohangtx.com/",
                    "name": "技术导航"
                },
                {
                    "desc": "效率集是一个让你聚合互联网资源，分享互联网资源，且可以高度定制的导航网站。你可以自定义网址导航及主页搜索引擎，还自带在线记事，在线任务。通过效率集的聚合搜索，你可以购物比价，在线看电影，在线词典，在线翻译等。通过效率集，你还可以把自己收藏的网站分享给他人",
                    "url": "http://www.xiaolvji.com/",
                    "name": "效率集"
                },
                {
                    "desc": "泡面吧，在线教育导航品牌，服务在线教育行业创业者、投资人。促进交流，让大家可以像泡面一样了解在线教育的名站动态。",
                    "url": "http://www.paomianba.com/",
                    "name": "泡面吧"
                },
                {
                    "desc": "电影、云、音乐、软件、浏览器插件、娱乐、学习等类型网站导航",
                    "url": "https://oo1.win/",
                    "name": "炫猿"
                },
                {
                    "desc": "龙轩导航提供最快捷的资源平台，让你迅速找到想要的资源，准确又方便快捷",
                    "url": "http://ilxdh.com/",
                    "name": "龙轩导航"
                }
            ]
        },
        {
            "title": "视频学习",
            "list": [
                {
                    "desc": "rails365编程学院是一家学习 web 全栈式开发等技术，分享高质量的 web 编程技术文章和视频教程的网站",
                    "url": "https://www.rails365.net/",
                    "name": "rails365编程学院"
                },
                {
                    "desc": "很多类型的视频，同时还有文字讲解",
                    "url": "http://www.haoduoshipin.com/",
                    "name": "好多视频网"
                },
                {
                    "desc": "网站设计的很精美,各种CSS和JS动画让你不会厌倦,就算不看视频看看他的网站设计思路也会获益匪浅.",
                    "url": "http://www.miaov.com/",
                    "name": "妙味课堂"
                },
                {
                    "desc": "更加有针对性地解决一些问题，而且还可以下载源码，是首推的视频学习网站",
                    "url": "http://www.imooc.com/",
                    "name": "慕课网"
                },
                {
                    "desc": "技术胖-胜洪宇关注web前端技术-前端免费视频第一博客，里面有很多免费的视频教程。",
                    "url": "http://jspang.com/",
                    "name": "技术胖博客"
                },
                {
                    "desc": "智能社就是前端开发培训，北京最具深度和口碑的JavaScript、HTML5培训，专注于让学员获得快乐的学习体验并找到高薪工作的培训——数百名毕业学员高薪就职大型互联网公司，推出的《智能社JavaScript视频教程》更被大家誉为——最经典的JavaScript视频教程。",
                    "url": "http://www.zhinengshe.com/index.html",
                    "name": "智能社"
                },
                {
                    "desc": "不过对于小白来说更加亲切，学习进阶路线更加清晰，但是大部分需要会员，北邮人bt上有会员资源。",
                    "url": "http://www.jikexueyuan.com/",
                    "name": "极客学院"
                },
                {
                    "desc": "用互动的方式，学习最前沿的技术",
                    "url": "http://www.hubwiz.com/",
                    "name": "汇智网"
                },
                {
                    "desc": "不知道这个名字是什么鬼。。但是从目的出发的理念很不错",
                    "url": "https://www.jisuanke.com/",
                    "name": "计蒜客"
                }
            ]
        },
        {
            "title": "资源下载",
            "list": [
                {
                    "desc": "提供了各种类型的 H5 模板，可以在线制作",
                    "url": "https://h5.bce.baidu.com/store",
                    "name": "百度 H5 模板商店"
                },
                {
                    "desc": "提供了各种类型不同尺寸的壁纸，来源是 360 提供的壁纸",
                    "url": "https://ss.netnr.com/wallpaper",
                    "name": "Netnr 高清壁纸"
                },
                {
                    "desc": "彼岸图网专注提供免费4K壁纸,4K图片,4K图片原图下载,4K,5K,6K,7K,8K壁纸图片素材,包含4K风景壁纸、4K美女壁纸、4K游戏壁纸、4K明星壁纸、4K卡通动漫壁纸、4K动物壁纸、4K汽车壁纸等。把4K高清壁纸推荐给您,让您更快的找到您想要的4K壁纸",
                    "url": "http://pic.netbian.com/",
                    "name": "彼岸图网"
                },
                {
                    "desc": "收集了一些免费看视频的软件apk包",
                    "url": "https://www.lanzous.com/b749444",
                    "name": "蓝奏云"
                },
                {
                    "desc": "致力于分享优秀的Mac应用软件，介绍Mac的使用技巧，最有价值的Mac软件免费分享，提供最新Mac破解软件免费下载。",
                    "url": "https://www.waitsun.com/",
                    "name": "麦氪派"
                },
                {
                    "desc": "有最好的mac软件下载和mac游戏下载",
                    "url": "https://mac.orsoon.com/",
                    "name": "未来Mac下载"
                },
                {
                    "desc": "精品MAC应用分享，每天分享大量mac软件，为您提供优质的mac软件，免费软件下载服务",
                    "url": "https://xclient.info/",
                    "name": "Xclient"
                },
                {
                    "desc": "可以搜索网盘资源，虽然是付费下载，但是非常便宜，相当于只需要几分钱",
                    "url": "https://www.fastsoso.cn/",
                    "name": "fastsoso"
                },
                {
                    "desc": "fastsoso -- 专注百度网盘搜索，百度云网盘搜索工具，你可以在这里搜索视频、音乐、图片、软件、文档、种子、专辑等资源，让百度云盘分享下载更方便、更快捷，比site:pan.baidu.com命令更好用。",
                    "url": "https://www.yunpanjingling.com/",
                    "name": "云盘精灵"
                },
                {
                    "desc": "前所未有地覆盖全球超过195个国家和地区的经济数据（宏观经济、GDP、进出口、能源等）。CEIC帮助您一站式获取来自上千个数据源的百万级的时间序列数据，客服团队帮助您寻找或解释您想要的数据信息。",
                    "url": "https://www.ceicdata.com/zh-hans",
                    "name": "CEIC"
                },
                {
                    "desc": "一个免费的Chrome浏览器扩展插件下载网站，支持以名称字和ID值的形式搜索查询，你在CrxDL.COM，不仅能获取最新版CRX安装文件，还可以下载Chrome浏览器扩展插件的历史版本。",
                    "url": "https://crxdl.com/",
                    "name": "CrxDL"
                },
                {
                    "desc": "提供了很多高质量的电脑壁纸",
                    "url": "https://wallpaperset.com/",
                    "name": "Wallpaperset"
                },
                {
                    "desc": "提供了很多高质量的电脑壁纸",
                    "url": "https://wallhaven.cc/",
                    "name": "wallhaven"
                },
                {
                    "desc": "用于适配 macOS Mojave 的动态壁纸网站，有很多高清的动态壁纸",
                    "url": "https://dynamicwallpaper.club/gallery",
                    "name": "Dynamic Wallpaper Club"
                },
                {
                    "desc": "好看的电影、电视剧、综艺在线观看和下载，还可以查看观看榜单",
                    "url": "http://www.6vhao.tv/",
                    "name": "6v电影网"
                },
                {
                    "desc": "平台拥有丰富的各类首页模板，下载模板代码包，即可快速使用，也可使用首页编辑器，快速搭建一个属于你的专属首页",
                    "url": "https://landing.ant.design/index-cn",
                    "name": "Ant Design Landing"
                },
                {
                    "desc": "单个Youtube视频下载，支持多种格式、多种清晰度。",
                    "url": "https://www.clipconverter.cc/",
                    "name": "ClipConverter.cc"
                },
                {
                    "desc": "提供了一些计算机领域的书籍的免费下载，前端书籍居多。",
                    "url": "http://www.jqhtml.com/down/",
                    "name": "down"
                },
                {
                    "desc": "支持抖音、快手、微视等视频无水印下载",
                    "url": "https://www.studyjava.cn/douyin",
                    "name": "无水印下载"
                },
                {
                    "desc": "iData知识检索—免费下载学术文献,知网免费下载，全球最大的知网镜像。",
                    "url": "https://www.cn-ki.net/",
                    "name": "iData"
                },
                {
                    "desc": "Sub HD为影视爱好者们提供交流字幕的平台，你可以在这里找到并下载字幕，对字幕打分和评论，也可以上传字幕与大家分享。",
                    "url": "http://subhd.com/",
                    "name": "Sub HD"
                },
                {
                    "desc": "电脑壁纸下载",
                    "url": "https://alpha.wallhaven.cc/random",
                    "name": "wallhaven.cc"
                },
                {
                    "desc": "乔布简历为广大大学生及应届毕业生提供各行业最新最全的中英文个人求职简历模板表格免费下载，以及大量关于简历写作技巧的文章，致力于帮助求职者打造最专业的简历。",
                    "url": "http://cv.qiaobutang.com/",
                    "name": "乔布简历"
                },
                {
                    "desc": "支持百度文库文档免券下载，支持word、PPT、excel等格式原文件下载。",
                    "url": "http://doc.hiwenku.com/",
                    "name": "嗨文库"
                },
                {
                    "desc": "坑搜网网盘搜索是专业的百度云搜索引擎，实时收录百度云、百度网盘等资源，每天更新各类高清电影、视频、种子、小说等网盘资源，真正你懂的网盘搜索神器！",
                    "url": "http://www.kengso.com/",
                    "name": "坑搜网"
                },
                {
                    "desc": "天天美剧(ttmeiju.vip)第一时间为您提供最火最新的高清美剧下载,高清美剧在线观看.天天美剧是一个非盈利性美剧爱好者组织，我们的宗旨是：分享快乐，打造国内最顶级的BT美剧片源分享平台",
                    "url": "http://www.ttmeiju.vip/",
                    "name": "天天美剧"
                },
                {
                    "desc": "字幕下载",
                    "url": "https://www.zimuku.cn/",
                    "name": "字幕库"
                },
                {
                    "desc": "字幕组网站是由爱好者成员成立的网站，继续为您翻译最新最快的海外影视剧字幕,美剧,日剧,电影最新字幕下载",
                    "url": "http://www.zimuzu.tv/",
                    "name": "字幕组"
                },
                {
                    "desc": "GitHub 上开源、有趣的 开源书籍 – 适合新手入门的 开源书籍",
                    "url": "https://hellogithub.com/periodical/category/开源书籍/?page=1",
                    "name": "开源书籍"
                },
                {
                    "desc": "国内最优秀的高清电影下载网站，每天更新迅雷中英双字电影百度云盘下载，搜集和分享高清中英双字电影百度云盘下载站，致力于构建最大的高清电影下载汇聚地，迅雷电影下载、免费电影下载尽在电影首发站高清电影下载站。",
                    "url": "http://www.dysfz.vip/",
                    "name": "电影首发站"
                },
                {
                    "desc": "青苹果影院是最新最全的电影网站,迅雷免费下载观看随时随地看电影大片,青苹果电影网专注于电影在线观看服务。",
                    "url": "https://www.qpg123.com/",
                    "name": "青苹果影院"
                },
                {
                    "desc": "很不错的在线搜书的网站，还会进行分类",
                    "url": "https://www.jiumodiary.com/",
                    "name": "鸠摩搜书"
                },
                {
                    "desc": "很不错的在线搜书的网站，还会进行分类",
                    "url": "https://www.jiumodiary.com/",
                    "name": "鸠摩搜书"
                }
            ]
        },
        {
            "title": "边学边玩",
            "list": [
                {
                    "desc": "有一系列的目标，通过尽可能少的 css 代码完成目标获得分数，还有一个玩家排行榜",
                    "url": "https://cssbattle.dev/",
                    "name": "CSS Battle"
                },
                {
                    "desc": "通过 grid 布局浇灌胡萝卜园",
                    "url": "https://codepip.com/games/grid-garden/",
                    "name": "Grid Garden"
                },
                {
                    "desc": "练习 CSS 选择器的小游戏",
                    "url": "https://flukeout.github.io/",
                    "name": "CSS Diner"
                },
                {
                    "desc": "一个简单的射击游戏，可以借此学习 flex 布局中的各个属性，缺点是需要注册账号以及对话太长",
                    "url": "https://mastery.games/flexboxzombies/",
                    "name": "Flexbox Zombies"
                },
                {
                    "desc": "通过 CSS 定位帮助青蛙找到树叶",
                    "url": "http://flexboxfroggy.com/",
                    "name": "Flexbox Froggy"
                },
                {
                    "desc": "一个塔防游戏，不过你的塔需要用 CSS 进行定位",
                    "url": "http://www.flexboxdefense.com/",
                    "name": "Flexbox Defense"
                },
                {
                    "desc": "看得见的统计概率入门，通过可视化的方式阐释统计概率相关知识",
                    "url": "https://seeing-theory.brown.edu/cn.html",
                    "name": "Seeing Theory"
                },
                {
                    "desc": "一款需要你使用 Python 或 Javascript 来推进的页游",
                    "url": "https://checkio.org/",
                    "name": "Check iO"
                },
                {
                    "desc": "通过编写代码来抓住香蕉。主要用于教师教学生们学习编程。（付费的）",
                    "url": "https://www.playcodemonkey.com/",
                    "name": "Code Monkey"
                },
                {
                    "desc": "通过跟他人的实际挑战赛达到逐步掌握编程语言的目的。支持 JavaScript， Python， C#， Java， Python 等。",
                    "url": "https://www.codewars.com/",
                    "name": "Codewars"
                },
                {
                    "desc": "解决具有挑战性的编码问题，基本上支持所有编程语言。",
                    "url": "https://www.codingame.com/start",
                    "name": "CodinGame"
                },
                {
                    "desc": "程序员练习编程的一个地方，支持 JavaScript， Java， Python， PHP， Ruby 等。",
                    "url": "http://www.cyber-dojo.org/",
                    "name": "Cyber Dojo"
                },
                {
                    "desc": "一款电梯升降式游戏，一步步解决问题，如在第一关中，你要在最多 60 秒内运输 15 人。",
                    "url": "http://play.elevatorsaga.com/",
                    "name": "Elevator Saga"
                },
                {
                    "desc": "使用Flexbox定位属性进行防御的塔防游戏",
                    "url": "http://www.flexboxdefense.com/",
                    "name": "Flexbox Defense"
                },
                {
                    "desc": "使用CSS相关属性帮青蛙渡河",
                    "url": "http://flexboxfroggy.com/",
                    "name": "Flexbox Froggy"
                },
                {
                    "desc": "通过玩游戏来学习 JavaScript。据称是全球第一个面向程序员的大型多人在线沙盒游戏。",
                    "url": "https://screeps.com/",
                    "name": "Screeps"
                },
                {
                    "desc": "在The Bezier Game游戏中，首先以动画的方式来演示一遍贝塞尔曲线画法，然后自己尝试去绘制。要注册看演示的提示，比要按Shift或Alt按等。",
                    "url": "https://bezier.method.ac/",
                    "name": "The Bezier Game"
                },
                {
                    "desc": "在游戏中学习Vim",
                    "url": "https://vim-adventures.com/",
                    "name": "Vim Adventures"
                },
                {
                    "desc": "通过游戏的方式了解XSS的攻击方式以及如何防备",
                    "url": "https://xss-game.appspot.com/",
                    "name": "XSS game"
                },
                {
                    "desc": "一个面向学生的通过把玩真正的游戏来学习计算机科学的平台。它是一个由上千玩家共同志愿维护的项目。支持 Java， JavaScript， Python， Lua， CoffeeScript。",
                    "url": "https://codecombat.com/play",
                    "name": "极客战记"
                }
            ]
        },
        {
            "title": "配色方案",
            "list": [
                {
                    "desc": "使用颜色控制盘选择喜欢的样式，然后就可以得到对应的颜色代码",
                    "url": "https://colorsupplyyy.com/app",
                    "name": "Color Supply"
                },
                {
                    "desc": "如你所见，这个网站提供很简单直观的配色方案，这些配色方案并不是一成不变的，也不是由计算机生成的，而是用户不断提交的，网站只是负责展示，你可以对喜欢的配色点赞。很有特点的是网站对这些配色方案进行了一些非常有用的分类。按照最新、最热、最受欢迎、随机。这样你就可以轻松选出时下最流行的配色。",
                    "url": "http://www.colorhunt.co/",
                    "name": "Color Hunt"
                },
                {
                    "desc": "这个网站提供了六种配色模式：单色、互补色、三角形搭配、矩形搭配、类似色搭配、类似色搭配互补色。同时还提供对比度调节，饱和度/明度调节等参数调节，最厉害的是可以直接预览应用配色后的网站的样子，很直观高效。而且网站提供的仪表盘操作也很有专业的感觉。对于那些有想法，喜欢自己动手实现的童鞋来讲是在合适不过了。",
                    "url": "http://www.peise.net/tools/web/",
                    "name": "Color Schema Design"
                },
                {
                    "desc": "这纯粹是一个懒人网站。网站提供了437种扁平化的配色方案，对！就是437种！我数过。如果你不怕挑花眼的话通过这个网站你可以轻松的获取你想要的配色的RGB值与HEX（十六进制形式）值。",
                    "url": "https://colordrop.io/",
                    "name": "ColorDrop"
                },
                {
                    "desc": "同样的一个懒人配色网站，可以通过你上传的图片或者网络的图片来分析图片的配色构成。并且你可以查看别人的分析结果。对于借助图片来配色的情况可谓是很有帮助的，能省下不少的功夫。",
                    "url": "http://www.colorfavs.com/",
                    "name": "ColorFavs"
                },
                {
                    "desc": "如果你想分析一个网站的配色，这个工具就很适合你。你只需要把你想要分析的网站的链接丢进这个网站他便可帮你快速高效的分析出网站的配色方案。而且分析的结果会有三种不同的图示来表示，很靠谱很专业。如果你想模仿一个网站的配色，这个工具是一个不错的选择。",
                    "url": "http://webcolourdata.com/",
                    "name": "Colours"
                },
                {
                    "desc": "这个渐变色网站我在之前的文章中推荐过。非常轻量的渐变色网站。网站提供了60种常用的渐变色，你不仅可以从网站获取渐变色的值你还能直接获得制作好的渐变色的图片，直接拿来做背景实在是再合适不过了。",
                    "url": "https://webkul.github.io/coolhue/",
                    "name": "coolHue"
                },
                {
                    "desc": "提供很强大的配色方案，也支持上传图片进行取色。另外还可以随机推荐配色方案，你可以拖拽调换颜色位置，调出相近色阶列表，调整整体方案的色调、饱和度、亮度、冷暖度。",
                    "url": "https://coolors.co/app",
                    "name": "COOLORS"
                },
                {
                    "desc": "这个神器能让你一键无痛生成酷炫的双色画风，图片素材都是来源于大名鼎鼎的免费可商用图库 Unsplash",
                    "url": "https://duotone.shapefactory.co/",
                    "name": "Duotone"
                },
                {
                    "desc": "一个提供配色方案和助攻前端UI设计的素材网站",
                    "url": "http://flatuicolors.com/",
                    "name": "flatuicolors"
                },
                {
                    "desc": "这个网站与上面的功能类似，但是却提供了多达180种渐变色配色方案。这个网站同样也是提供渐变值与渐变图片，而且质量比上一个网站要好点，用来作渐变配色再合适不过了。",
                    "url": "https://webgradients.com/",
                    "name": "itmeo"
                },
                {
                    "desc": "将音乐与设计结合到一起的个人网站，动效的设计可以称得上惊艳。",
                    "url": "http://kenjiendo.com/",
                    "name": "KENJI ENDO"
                },
                {
                    "desc": "谷歌开发的自动颜色搭配网站，勾选两个主颜色，自动生成色阶相近、协调度高的配色列表。",
                    "url": "https://www.materialpalette.com",
                    "name": "Material palette"
                },
                {
                    "desc": "黑色主色调搭配着怪诞的插画，个人风格非常强烈",
                    "url": "http://www.nerisson.fr/",
                    "name": "nerisson.fr"
                },
                {
                    "desc": "Pattern Lab帮助您和您的团队使用原子设计原则构建周到的、模式驱动的用户界面。",
                    "url": "http://patternlab.io/",
                    "name": "Pattern Lab"
                },
                {
                    "desc": "汇集了一些好看的渐变，可以直接下载图片和CSS，同时还支持旋转、导入等功能",
                    "url": "https://uigradients.com/",
                    "name": "uiGradients"
                },
                {
                    "desc": "这个网站很多人都知道，主要以中国传统色为主。主要提供一些很经典的传统色，比如胭脂色、朱砂色、鸭蛋青等，而且是根据中科院的一些资料制作的，所以这的颜色都是很正点的，用在与古风相关的设计中最合适不过了。",
                    "url": "http://zhongguose.com/",
                    "name": "中国传统色"
                },
                {
                    "desc": "很别致的一个网站，排版配色都很不错",
                    "url": "http://www.yelanqiu.com/",
                    "name": "叶蓝秋"
                },
                {
                    "desc": "这个网站提供日本传统的颜色。用在一些日系的设计中也是很有感觉的。比起上面的网站，这个网站还提供了随机展示颜色的功能，每隔一定的时间就会换一种颜色，对于厌烦一个一个查看颜色的人还是有些用的。",
                    "url": "http://nipponcolors.com/",
                    "name": "日本传统色"
                },
                {
                    "desc": "这是由Adobe出的一款配色工具，提供七种配色规则。虽然界面上操作很简单，但是对于颜色的调节上功能一点都不差。非常靠谱。同时除了支持常见的RGB值、HEX值还支持CMYK值、LAB值、HSB值。可谓非常专业。",
                    "url": "http://dwz.cn/gome002",
                    "name": "色轮"
                },
                {
                    "desc": "正如这个网页的名字一样：配色表。这是一个很普通的配色表。这个配色表最大的特色是对颜色按照所给人的印象进行了分类：比如优雅、稳重、自然等。这使得在某些场合下使用这个配色表更加贴切与实用。",
                    "url": "http://tool.c7sky.com/webcolor/",
                    "name": "配色表"
                }
            ]
        },
        {
            "title": "静态资源库",
            "list": [
                {
                    "url": "http://www.bootcdn.cn/",
                    "name": "BootCDN"
                },
                {
                    "desc": "很简单的页面，但是资源很多，就是搜索的时候简直太慢了",
                    "url": "https://cdnjs.com/",
                    "name": "cdnjs"
                },
                {
                    "url": "http://cdn.code.baidu.com/",
                    "name": "百度静态资源共享库"
                }
            ]
        },
        {
            "title": "音效素材库",
            "list": [
                {
                    "desc": "100audio是一支体验和操作都非常优质的音效素材网站，但是因为定位是商业网站，所以说，网站上的所有音源都是需要付费获得的，但是这里的音源基本都是正版，可以让你免去版权纷争。",
                    "url": "https://100audio.com",
                    "name": "100AUDIO"
                },
                {
                    "desc": "这是ADOBE官方提供的免费音源素材，音效素材总体量在20G左右，提供免费下载和使用，是非常好的内容了，可千万别错过！",
                    "url": "https://offers.adobe.com/en/na/audition/offers/audition_dlc.html",
                    "name": "ADOBE"
                },
                {
                    "desc": "这支网站是朋友推荐的，还并未使用过，据说音源质量较高，该网站提供免费素材。",
                    "url": "http://www.freesfx.co.uk",
                    "name": "FREESFX"
                },
                {
                    "desc": "FreeSound实际是一个社区，该网站是一个协作型的团队合作式音频发布站点，世界各地的用户可以在该网站分享和上传音效内容，你可以在该网站找到非常多的音效，而且很多音效是可以直接在项目中使用的。",
                    "url": "http://freesound.org",
                    "name": "freesound"
                },
                {
                    "desc": "pond5是一个综合素材网站，提供照片、插画、音乐、音效、AE模版和3D模式、视频等资源，该网站的音效素材也非常丰富，其素材也分为免费和付费内容，当然，这些内容都是有版权保证的。",
                    "url": "https://www.pond5.com",
                    "name": "pond5"
                },
                {
                    "desc": "同行推荐的专业门户，可自行研究",
                    "url": "http://www.sound-effects-library.com",
                    "name": "sound-effects-library"
                },
                {
                    "desc": "videohive也是一个综合性较高的素材门户，当然除了音效，还有很多特效素材的提供，该门户分为国际版和国内版，而国际版的内容素材量优质，种类也比较丰富，所有素材都需要支付费用。但是该网站的素材确实质量较高，有非常多的声画效果值得参考。",
                    "url": "https://videohive.net",
                    "name": "videohive"
                },
                {
                    "desc": "包图网的内容包括图标图片，图标素材，图标模板，图标设计等",
                    "url": "https://ibaotu.com/",
                    "name": "包图网"
                },
                {
                    "url": "http://www.shengyin.com",
                    "name": "声音网"
                },
                {
                    "url": "http://www.2gei.com",
                    "name": "爱给网"
                },
                {
                    "url": "http://sc.chinaz.com/yinxiao/",
                    "name": "站长素材"
                },
                {
                    "url": "http://www.yinxiao.com",
                    "name": "音效网"
                }
            ]
        },
        {
            "title": "程序员工具",
            "list": [
                {
                    "desc": "中国第一家公有云科创板上市公司，专注于提供可靠的企业级云服务，包括云服务器、云主机、云数据库、混合云、CDN、人工智能等服务。",
                    "url": "https://www.ucloud.cn/",
                    "name": "优刻得"
                },
                {
                    "desc": "Firebase 的开源替代品，可以非常方便地创建自己的应用，提供非常方便的 API 和数据库",
                    "url": "https://supabase.io/",
                    "name": "Supabase"
                },
                {
                    "desc": "总结了如何用 JS 操作 Dom 的各种方法",
                    "url": "https://htmldom.dev/",
                    "name": "HTML DOM"
                },
                {
                    "desc": "Javascript 正则表达式可视化工具",
                    "url": "https://jex.im/regulex/#!flags=&re=%5E(a%7Cb)*%3F%24",
                    "name": "Regulex"
                },
                {
                    "desc": "可以方便地共享源代码的漂亮图像，支持多项配置和多种模板，可以在线编辑，所见即所得",
                    "url": "https://codeimg.io/",
                    "name": "Codeimg.io"
                },
                {
                    "desc": "只需要导入 JSON 就可以预览 lottie 动画效果，还可以扫码在手机上预览，不过只支持没有图片的动画 JSON",
                    "url": "https://lottiefiles.com/preview",
                    "name": "lottie 在线预览"
                },
                {
                    "desc": "可以在线加密，包括多种算法：md2、md4、md5、base64、rsa、sha1、sha2、sha256 等等",
                    "url": "https://www.toolnb.com/tools/md2.html",
                    "name": "爱资料工具-加密"
                },
                {
                    "desc": "免费申请 SSL 证书",
                    "url": "https://www.sslforfree.com/",
                    "name": "SSL For Free"
                },
                {
                    "desc": "雪碧图css样式生成工具",
                    "url": "https://blog.ipsfan.com/mytools/css_sprite/",
                    "name": "在线css sprite"
                },
                {
                    "desc": "CSS 中的 clip-path 可视化生成器",
                    "url": "https://bennettfeely.com/clippy/",
                    "name": "Clippy"
                },
                {
                    "desc": "请求生成器，可帮助您更快地创建请求，节省了宝贵的开发时间。",
                    "url": "https://postwoman.io/",
                    "name": "Postwoman"
                },
                {
                    "desc": "在整个API生命周期的开发中，从设计和文档到测试和部署，都提供了相应的工具和解决方案",
                    "url": "https://swagger.io/",
                    "name": "Swagger"
                },
                {
                    "desc": "在线检测添加一个 NPM Package 所需要的成本，包括包体积及下载时间",
                    "url": "https://bundlephobia.com/",
                    "name": "bundlephobia"
                },
                {
                    "desc": "在线浏览AST结果，支持多种语言",
                    "url": "https://www.wakatool.com/maker",
                    "name": "AST explorer"
                },
                {
                    "desc": "在线编辑，主要优势在于可以非常方便的选择所需框架",
                    "url": "https://stackblitz.com/",
                    "name": "Stackblitz"
                },
                {
                    "desc": "可以检测Express路由写法是否正确",
                    "url": "http://forbeslindesay.github.io/express-route-tester/",
                    "name": "Express Route Tester"
                },
                {
                    "desc": "超级简单的Git入门，有入门篇、高级篇和 Git 索引，内容很全",
                    "url": "https://backlog.com/git-tutorial/cn/",
                    "name": "猴子都能懂的GIT入门"
                },
                {
                    "desc": "利用ASCII字符进行绘制，可以调整大小，自由绘制，可以绘制出类似于佛祖那样的代码。",
                    "url": "http://asciiflow.com/",
                    "name": "ASCIIFlow Infinity"
                },
                {
                    "desc": "在线生成css兼容代码，其实就是autoprefixer的在线版。。",
                    "url": "http://autoprefixer.github.io/",
                    "name": "autoprefixer"
                },
                {
                    "desc": "利用WebGL可以随机生成抽象的体素地形",
                    "url": "https://demo.marpi.pl/biomes/",
                    "name": "BIOMES"
                },
                {
                    "desc": "提供现代Web技术的浏览器支持情况查询",
                    "url": "https://caniuse.com/",
                    "name": "Can I use"
                },
                {
                    "desc": "生成类似 mac 风格的代码图片，用于分享",
                    "url": "https://carbon.now.sh",
                    "name": "Carbon"
                },
                {
                    "desc": "各种符号的转义字符表",
                    "url": "https://dev.w3.org/html5/html-author/charref",
                    "name": "Character Entity Reference Chart"
                },
                {
                    "desc": "根据几个问题为你的开源协议的选择提供建议",
                    "url": "https://choosealicense.com/",
                    "name": "Choose A License"
                },
                {
                    "desc": "项目命名神器，可以通过关键词搜索github、gitlab等网站上的项目名称",
                    "url": "https://unbug.github.io/codelf/",
                    "name": "CODELF"
                },
                {
                    "desc": "在线生成雪碧图和对应CSS的工具",
                    "url": "https://spritegen.website-performance.org/",
                    "name": "CSS Sprite Generator"
                },
                {
                    "desc": "CSS三角形产生器",
                    "url": "http://apps.eky.hk/css-triangle-generator/zh-hant",
                    "name": "CSS Triangle Generator"
                },
                {
                    "desc": "列举了在不同浏览器引擎中，各种CSS属性对于重排和重绘的影响",
                    "url": "https://csstriggers.com/",
                    "name": "CSS Triggers"
                },
                {
                    "desc": "共十几道题，考察你对CSS选择器的掌握程度",
                    "url": "https://frontend30.com/css-selectors-cheatsheet/",
                    "name": "css-selectors-cheatsheet"
                },
                {
                    "desc": "通过可视化的方式帮你生成CSS中的cubic-bezier函数参数",
                    "url": "http://yisibl.github.io/cubic-bezier/#.17,.67,.83,.67",
                    "name": "CSS动画曲线绘制"
                },
                {
                    "desc": "输入JS语句可以立马生成我们所需的抽象语法树（AST）",
                    "url": "http://esprima.org/demo/parse.html",
                    "name": "esprima Parser"
                },
                {
                    "desc": "会定制你想追踪的npm包库，还可以定时发邮件通知",
                    "url": "https://gitpunch.com/",
                    "name": "GitPunch"
                },
                {
                    "desc": "在线生成nginx配置文件，可以选择语言和功能，而且该站点是开源的。",
                    "url": "https://nginxconfig.io/",
                    "name": "nginxconfig.io"
                },
                {
                    "desc": "可以从Excel电子表格（或HTML表格）粘贴数据，并将其转换为没有任何格式的新HTML表。",
                    "url": "http://pressbin.com/tools/excel_to_html_table/index.html",
                    "name": "No-Cruft Excel to HTML Table Converter"
                },
                {
                    "desc": "PX和EM单位转换器",
                    "url": "http://pxtoem.com/",
                    "name": "PXtoEM"
                },
                {
                    "desc": "在线测试正则表达式",
                    "url": "https://regex101.com/",
                    "name": "Regex101"
                },
                {
                    "desc": "Sass在线编译，就是网站做的有点少女。。",
                    "url": "https://www.sassmeister.com/",
                    "name": "SassMeister"
                },
                {
                    "desc": "提供了很多用于Github、Wordpress的徽章，拥有多种定制化功能",
                    "url": "https://shields.io/",
                    "name": "ShieldsIO"
                },
                {
                    "desc": "对SSL Web服务器进行深入分析，不过耗时较长",
                    "url": "https://www.ssllabs.com/ssltest/analyze.html",
                    "name": "SSL Labs"
                },
                {
                    "desc": "支持15种对称加密算法在线校验、公私钥对的生成、PKCS1、PKCS8相互转换、CSR生成&查看、证书查看等等功能",
                    "url": "http://www.ssleye.com/",
                    "name": "SSL在线工具"
                },
                {
                    "desc": "在线可视化生成LateX、Markdown、HTML表格",
                    "url": "http://www.tablesgenerator.com/",
                    "name": "TablesGenerator"
                },
                {
                    "desc": "一款程序员工具箱，包含几十个实用的工具。",
                    "url": "https://www.toolfk.com/",
                    "name": "Toolfk在线工具箱"
                },
                {
                    "desc": "直接用鼠标拖拽就可以调整渐变层的各种参数，然后可以导出为svg格式。",
                    "url": "https://codepen.io/pissang/full/geajpX",
                    "name": "渐变层生成器"
                },
                {
                    "desc": "形象地介绍了各种缓动函数，而且开源",
                    "url": "https://easings.net/",
                    "name": "缓动函数速查表"
                },
                {
                    "desc": "美图的前端团队制作的动画库，收集了一些简单实用的动画，可以直接复制代码",
                    "url": "http://f2er.meitu.com/animastore/",
                    "name": "美图前端动画库"
                }
            ]
        },
        {
            "title": "图床",
            "list": [
                {
                    "desc": "免费的图片托管平台，不过文件大小最大支持 5MB",
                    "url": "https://sm.ms/",
                    "name": "SM.MS"
                },
                {
                    "desc": "一个免费提供存储图片能力的平台",
                    "url": "https://imgkr.com/",
                    "name": "图壳"
                },
                {
                    "desc": "路过图床, 免费公共图床, 提供图片上传和图片外链服务, 原图保存, 全球CDN加速.",
                    "url": "https://imgchr.com/",
                    "name": "路过图床"
                }
            ]
        }
    ]
}