盘一盘那些提效/创意的宝藏网站
在我们的日常开发过程中,我们经常需要打开各种网站查阅资料、寻找灵感、摸鱼划水…
今天,我们来给大家分享一些提效/创意的 宝藏网站
。这些网站中,有些可以帮助我们提升效率,有些可以让我们的工作过程变得更加快乐。
本次分享分为下面几个模块,按顺序介绍:
- 帮助
提效/提升个人技术
的在线网站 - 帮助
提效/扩展技能树
的工具类网站 - 工作累了,
寻找灵感(摸鱼划水?)
的创意网站
Tips:本文是明源云链前端团队-中台部第二期内部分享的文章沉淀。
团队沉淀持续产出中,点个
关注
不迷路~!
在线网站
在日常开发过程中,可能需要用到很多工具的部分功能,电脑装太多软件后会影响使用体验,那么一些强大的在线网站就可以帮助你解决这些需求啦。
我们可以通过这些网站实现 在线编程
、在线切图
、在线PPT
…
在线编程/练习 - Codepen
CodePen - https://codepen.io 是一款在线前端编辑器,集成了完整的开发环境,可以帮助你进行在线编程练习。
CodePen 中有很多成熟的案例,我们前端开发中最常用到 Flex
布局有非常多的属性,当你想快速预览/练习时,可以像下图所示,打开一个 Flex
练习案例,进入实操练习(如下图)
除了在线练习以外,我们还可以通过搜索功能找到很多现成的案例源码,然后直接使用(如下图)。
在线 IDE - CodeSandbox
如果你想要在线上练习新的 Vue3.0
,或者是你刚学会的 Node
,而不想在环境搭建上浪费太多时间,那么我推荐你使用 CodeSandbox
。
CodeSandbox - https://codesandbox.io/ 是一款在线 IDE,可以快速创建各种沙箱环境,帮助你专注于编程本身(如下图)。
快速验证 npm 包 - RunKit
在前端最常用的包管理工具就是 npm
了,如果你想要体验某个 npm
包的 API 怎么办 - 先安装、再引用、再运行 Node
,这太麻烦了!
RunKit - https://npm.runkit.com/ 可以帮你在线运行 npm
包,我们下面这个案例展示了如何快速体验 dayjs
包(如下图)。
从上图可以看出,左边是 代码编辑区
和 运行区
,右边就是 使用文档
。
OMG,还有比这更好的编程体验吗!用它!
在线 PS - UUPOOP
作为一名前端开发人员,基本的切图技巧是必备技能。
在我们的日常开发中,有 UI 小姐姐帮助我们切图;但是遇到某些其他情况时,可能还是会有自己切图的需求。
如果我们在电脑上安装一个 PS
的话,会非常的卡顿,而且正版产品很贵。
UUPOOP - https://www.uupoop.com/ 是一个在线 PS
网站,集成了 PS
软件的很多功能,完成日常的切图需求已经足够(如下图)。
这个网站还有很多附加的功能,大家可以自行探索。
彩蛋:明源云链前端团队的头像就是使用在线
PS
切出来的噢!
在线 PPT - Google 幻灯片
什么?PPT 也能在线编辑?
没错,Google 幻灯片 - https://docs.google.com/presentation/u/0/ 就是一款在线 PPT
制作网站,我们可以快速创建一个 PPT
模板,然后将 PPT 分享给同事,就可以快速线上协作 PPT 啦!(如下图)
Tips:云链前端团队的一些内部分享也是通过在线 PPT 生成。
提效工具
除了在线网站以外,前端开发中还有很多帮助提效的工具网站,接下来我们来盘一盘这些网站吧!
工具大全 - 程序员的工具箱
在我们的日常开发中,可能会经常用到 JSON
序列化、时间戳快速转换、正则检测…虽然通过很多浏览器插件、控制台输出我们都可以实现,但是有一个网站把这些常用的功能都集成了,我们可以通过这些工具快速实现我们的需求。
在线工具 - 程序员的工具箱 - https://tool.lu/ 就是一款程序员工具箱大全,里面集成了非常多的功能,我们最常用的功能都有,简直是个宝藏网站呢!(如下图)
快速查阅 API - overapi
overapi - https://overapi.com/javascript 集成了很多语言的 API
,你可以通过下面这张列表快速查询,非常适合刚入门的开发小白。(如下图)
图片快速压缩 - TinyJPG
有时候 UI 小姐姐给的图太大啦,在手机端打开实在是太慢啦,这时候我们就需要将图片压缩。
TinyJPG - https://tinyjpg.com/ 就是一个免费在线压缩图片网站,我们直接看效果图吧!(如下图)
快速编辑表格 - TableConvert
写过 Markdown 文档的都应该知道,表格是最难写的一部分;手写过 XML
的也知道,这是一种什么样的体验…
TableConvert - https://tableconvert.com/ 是一个在线表格编辑网站,它的特殊之处在于,它可以将编辑好的表格快速导出为各种格式。(如下图)
快速设计 - 稿定设计
小型公司的紧急需求需要前端自己设计,个人站点需要自己设计,赚外快想把 UI 的钱也挣了,怎么办?
稿定设计 - https://www.gaoding.com/ 是一个有海量设计模板(部分免费)的网站,而且可以在线拖拽实现设计。一些基础的设计需求,基本上都可以通过这个网站实现(如下图)。
彩蛋:在线
PS
也是他们家的产品。
创意网站
介绍完了在线网站和提效工具后,到了大家最期待的一个环节,我们来介绍一些帮助大家寻找灵感(摸鱼划水?)的创意网站吧!
配色灵感 - nipponcolors
日系配色可以给人带来一种小清新、治愈的感觉,nipponcolors - https://nipponcolors.com/#yamabuki 是一个 日式配色
的网站,里面有上百种 日式传统色
。
这个网站最治愈的地方在于,点击某个颜色时,全站都会变成这种颜色。我们下面以非常著名的 山吹
作为案例,给大家演示一下效果。(如下图)
工作累了,来这个网站点两下,寻找配色灵感的同时,还能治愈自己的身心~
动画灵感 - Animate.css
我们在开发过程中,经常需要加一下过渡动画,使效果看起来更加平滑,那么下面这款可以兼容到 IE10+ 的动画库,不容错过。
Animate.css - https://animate.style/ 是一个纯 css
实现的动画库,点击右边的效果即可在线体验。(如下图)
用了这个库,你就可以成为一个有创造力的前端开发啦!
创作灵感 - Vant
Vant - https://vant-contrib.gitee.io/vant/#/zh-CN/button 是一个帮助你收集创作灵感的网站,非常简单易用。(如下图)
彩蛋:隐藏在文档中的华点是什么呢?点赞可解锁隐藏章节!
极致体验
最后分享两个网站,他们在网站体验的某些方面已经达到了极致,我们可以从中学到什么呢?
nationalgeographic
lahautesociete
总结
好啦,本次的 宝藏网站
分享就到这里啦!大家有什么有意思的网站(绿色健康)也可以在留言区留言分享哟~
下期预告:
盘一盘那些提效/创意的第三方库
最后一件事
如果您已经看到这里了,希望您还是点个赞再走吧~
您的点赞是对作者的最大鼓励,也可以让更多人看到本篇文章!
团队沉淀持续产出中,点个 关注
不迷路~!
盘一盘那些提效/创意的宝藏网站相关推荐
- 给大伙儿盘一盘,那些提效/创意的 vscode 插件
作者:晒兜斯 原文:https://juejin.im/post/6870428510041833480 前言 在前端开发中,vscode 是最常用的编辑器,而 vscode 有着各种实用插件,有些可 ...
- cad画流程图的插件_盘一盘,那些提效/创意的 vscode 插件
作者:晒兜斯 原文:https://juejin.im/post/6870428510041833480 在前端开发中,vscode 是最常用的编辑器,而 vscode 有着各种实用插件,有些可以帮助 ...
- vscode有时候不能注释_给大伙儿盘几个提效/创意的 vscode 插件
点击蓝色"最码农"关注我哟 加个"星标",每天下午18:03,一起学技术 作者:晒兜斯原文:https://juejin.im/post/68704285100 ...
- 记录一次网盘资源不给提取码的经历!另类编程思维,Python破之!
前言: 记录一次网盘资源不给提取码的经历!另类编程思维,Python破之!可能这个标题的意思不是所有人都能够理解,简单说明一下,就是好不容易在网上找资源,然而那个分享网盘的朋友忘记给提取码了..... ...
- Mobile DevOps 之 Proxmox 实现节流提效
导读:2020年,移动互联网 DevOps 领域显现出了规模化运营的趋势,多数 App 研发大厂均配备了上百人的研发团队规模,编译计算的诉求也是与日俱增,用自动化测试节约人力的行为也是不断涌现. 文| ...
- 【方向盘】工具提效:Sublime Text 4的常用快捷键合集
本文已被https://yourbatman.cn收录:女娲Knife-Initializr工程可公开访问啦:程序员专用网盘https://wangpan.yourbatman.cn:技术专栏源代码大 ...
- 用UltraISO制作Ubuntu20.04 U盘启动盘
用UltraISO制作Ubuntu20.04 U盘启动盘 下载ubuntu系统 首先到官网下载新版系统 https://cn.ubuntu.com/download/desktop 制作启动盘 下载U ...
- 如何制作计算机启动盘,一款U盘启动盘制作小工具
手中闲置一个U盘,那么如何将这个U盘变成启动盘可以来维护的呢? 注意:操作前请备份好U盘的资料. 首先Flashboot将U盘跟据下面的教程制作 打开软件的界面,点击下一步继续. 选择您要通过哪媒体创 ...
- 动手制作Dos、WinPE、Slax Linux|winpe+dos+Mini Linux U盘启动盘
动手制作Dos.WinPE.Slax Linux|winpe+dos+Mini Linux U盘启动盘 一.概述 U盘的价格越来越便宜,容量也越来越大,携带也方便,在工作中可以把一些自己常用的工具整和 ...
最新文章
- SpringBoot 应用程序启动过程探秘
- springboot quartz 动态配置_springboot集成quartz实现动态任务调度
- oracle更新数据没有变化,往oracle里面写入数据,怎么表空间都没有变化
- android monkey压力测试,Android-Monkey 压力测试
- 一行命令搞定图像质量评价
- dmv io读写高的sql_适用于DBA的前8大新(或增强)SQL Server 2017 DMV和DMF
- java执行python提示import os找不到_java利用Jython调用python抛出错误ImportError: No module named odbchelper...
- python字典初始化_python设置默认字典
- python实现字典树的插入、查找功能并基于pickle模块持久化存储字典树
- 压缩软件能否加上忽略某些目录的功能
- zmap扫描mysql_互联网扫描器 ZMap 完全手册
- word vba 控制光标常用代码
- (一)appium-desktop定位元素原理
- 物联网全栈教程-从云端到设备(四)
- 易接SDK接入:Android手游支付功能接口实现,完整代码奉上
- 使用WSS的Lists.UpdateListItems()方法之被截断的CAML
- otl c mysql_OTL
- hihocoder1498 Diligent Robots
- mipi-csi-2解读_CSI:Visual Studio-无法将索引X处的Unicode字符转换为指定的代码页
- 百万军师v1.0——直播答题答案快速搜索