Web工具

小密圈助手 - 一个Chrome插件的产生过程

扫描二维码

每天我们会接触到大量的信息,进而从信息中转化为自己的知识,但最终都需要践行到实际行动中。这一点一滴的行动最终会变成一件件作品、一个个成果。之前我分享了挺多的关于认知方面的知识,那我自己是如何将一个个认知转化为实际的行动呢?前几天,我花了2个晚上做了一个“小密圈助手”的Chrome插件。这个事虽然不大,但是我觉得是个比较好的小例子,来完整的介绍一下把知识转化为行动的过程。下面我就从想法的产生、开发过程、推广试用这3个方面来介绍。

这篇文章是根据我的千聊直播,整理而成的文字版
如果你想听语音版欢迎点此收听:小密圈助手 - 一个Chrome插件的产生过程

小密圈助手 - Chrome插件

扫描二维码

开始使用或者离线下载

小密圈助手 - PC端用户浏览小密圈时,有很多值得阅读的分享链接,小密圈助手能快速浏览文中链接,并可进入相应主题

后续会增加自动滚动、按点赞排行等功能,敬请期待~~

Chrome58 DevTools开发者工具新特性

扫描二维码

重点

  • Timeline面板改名为Performace面板
  • Profiles面板改名为Memory面板
  • Cookie值可编辑
  • 当内存溢出错误发生时 ,DevTools可自动停止

在线web前端工具-效率提升

扫描二维码

在线图片压缩

site:tinypng

在保证显示质量的前提下,大幅压缩图片大小。普通的5M以下的图片压缩都是免费的,前端开发中的绝大部分图片都可以满足。如果很大图片的压缩需要付费。

Chrome开发者工具的实用技巧(译)

扫描二维码

最近我比平时多花了点时间在chrome开发者工具上。过程中我发现了一些我以前没有遇到过的好的特性(至少我没有主动去研究的;像:blackboxing和asynchronous stacktraces)。因此,我想总结下我认为非常不错的特性给大家。

  • 这个小的放大镜图标指向这个元素的CSS的属性最终是在哪个CSS文件里定义。举例子来说,选择“检查”在页面上的任意DOM元素,并切换到“Computed”的子标签。找到你关心的CSS属性并点击放大镜图标,就会直接进入对应的css文件(当你的项目是个很大的web应用时,这个功能是非常有用的).

小鲜 - 推荐5个前端开源代码和工具

扫描二维码

1、notie.js

一个干净、没有其它依赖包的javascript通知插件,支持弹出、confirm、成功、错误、自定义等方式

怎么通过命令来检查浏览器的兼容性(译)

扫描二维码

传统上构建网站涉及很多的技术来解决浏览器的兼容性问题,有一些属性很特殊,甚至根本没有。web开发者会经常登录CanIUse上去查看某个功能是否被各浏览器支持。

CanIUse 保持和采用标准的HTML,CSS,SVG,依据W3C的规范,和每个浏览器的现存的bug相连接。举个栗子,我们可以从下面的图中看到Edge,Firefox,Opera Mini并不支持CSS Reflection,有的浏览器已经支持,需要增加前缀以标明。

【译】15个必须知道的chrome开发者技巧(GIF)

扫描二维码


在Web开发者中,Google Chrome是使用最广泛的浏览器。六周一次的发布周期和一套强大的不断扩大开发功能,使其成为了web开发者必备的工具。你可能已经熟悉了它的部分功能,如使用console和debugger在线编辑CSS。在这篇文章中,我们将分享15个有助于改进你的开发流程的技巧。

Markdown语法说明

扫描二维码

NOTE: This is Simplelified Chinese Edition Document of Markdown Syntax. If you are seeking for English Edition Document. Please refer to Markdown: Syntax.

声明: 这份文档派生(fork)于繁体中文版,在此基础上进行了繁体转简体工作,并进行了适当的润色。此文档用 Markdown 语法编写,你可以到这里查看它的源文件。「繁体中文版的原始文件可以查看这里 。」–By @riku

注: 本项目托管于 GitCafe上,请通过”派生”和”合并请求”来帮忙改进本项目。