zyqi

zyqi 查看完整档案

填写现居城市  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 该用户太懒什么也没留下

个人动态

zyqi 赞了文章 · 10月26日

50个能帮你节省时间的开发工具

作者:Iain Freestone

翻译:疯狂的技术宅

原文:https://dev.to/iainfreestone/...

本文列举出 50 个能够帮你提高开发效率,节省开发时间的 Chrome 扩展和 Web 应用,它们很有可能会在什么时候派上用场。老规矩,先转发、点赞、点再看三连,最后再慢慢阅读,千万别让它在收藏夹里吃灰。

1. Whatruns

一个免费的浏览器扩展程序,只需单击一下按钮,就能帮你识别当前网站上所使到的技术。

官网:https://www.whatruns.com/

Whatruns


2. Sizzy

开发人员专用的浏览器。可以帮你节省时间,加快开发流程

官网:https://sizzy.co/

Sizzy


3. Log Rocket

LogRocket 使你可以重播用户在你站点上所做的操作,从而帮你重现错误并更快地解决问题。

官网:https://logrocket.com/

Log Rocket


4. Sentry

Sentry 的应用监视平台几乎可以为所有的开发人员提供帮助,它能够诊断、修复和优化你代码的性能。

官网:https://sentry.io/

Sentry

5. Can I Use?

"Can I use"提供了最新的浏览器支持表,能帮你检查支持台式机和移动 Web 浏览器上的前端 Web 技术。

官网:https://caniuse.com/

Can I Use?



6. Prettier

一个代码格式化程序,支持多种语言,能够与大多数编辑器集成。

官网:https://prettier.io/

Prettier



7. CSS Scan

让你与“检查元素”再见。它能立即检查悬停的任何元素的 CSS,并且只需要单击一下即可复制其整个规则。

官网:https://getcssscan.com/

CSS Scan


8. Bundlephobia

帮你检查把 npm 包添加到 bundle 包中所需要花费的代价,

官网:https://bundlephobia.com/

Bundlephobia


9. Cypress

对浏览器中运行的所有内容进行快速、轻松和可靠的测试。

官网:https://www.cypress.io/

Cypress


10. Unminify

用于压缩、解压缩、反混淆 JavaScript,CSS,HTML,XML 和 JSON 代码并增强可读性的免费工具。

官网:https://unminify.com/

Unminify


11. RegEx 101

基于 PCRE 的免费正则表达式调试器,具有实时说明、错误检测和突出显示的功能。

官网:https://regex101.com/

RegEx 101


12. Clear Cache

只需单击一下按钮,即可清除缓存并浏览数据。

官网:https://chrome.google.com/web...

Clear Cache


13. Window Resizer

通过调整浏览器窗口的大小来模拟各种屏幕分辨率。

官网:https://chrome.google.com/web...

Window Resizer


14. Wappalyzer

Wappalyzer 是一个能够现网站上所用技术的实用程序。它能够检测内容管理系统、电子商务平台、Web框架、服务器软件,分析工具等。

官网:https://chrome.google.com/web...

Wappalyzer


15. MDN

MDN Web Docs 站点提供有关开放的 Web 技术的信息,包括用于 Web 站点和渐进式 Web 应用的 HTML、CSS 和 API 等技术。

官网:https://developer.mozilla.org...

MDN


16. Axe

可访问性测试标准。被 Microsoft、Google 和大量的开发测试团队所选择,Axe 是世界领先的可访问性工具包。

官网:https://www.deque.com/axe/

Axe


17. Git Graph

Visual Studio Code 的 Git Graph 扩展。帮你查看存储库中的 Git 图,并轻松地从视图中执行 Git 操作。可以随心配置为你想要的样子!

官网:https://marketplace.visualstu...

Git Graph


18. Kontrast-WCAG 对比度检查器

能够在浏览器中实时快速检查和调整对比度,以满足 WCAG 2.1 的要求。

官网:https://chrome.google.com/web...

Kontrast


19. Octotree

可增强 GitHub 代码的检查和浏览功能的浏览器扩展。

官网:https://chrome.google.com/web...

Octotree


20. Postwoman

Postman 的替代品,能够帮你更快地创建 HTTP 请求,节省宝贵的开发时间

官网:https://postwoman.io/

Postwoman


21. Responsively App

把开发响应式 Web 应用的速度提高了 5 倍!所有前端开发人员必备的开发工具,使你的工作更加轻松。

官网:https://sensitively.app/

Responsively App


22. FullStory

帮你查明自己的用户在何时、何地产生纠结,以及是怎样影响你的收入和留存率的。

官网:https://www.fullstory.com/

FullStory


23. gitignore.io

帮你轻松的为自己的项目创建 .gitignore 文件

官网:https://www.toptal.com/develo...

gitignore.io


24. 1Loc

206 个只需单行代码就能实现的 JavaScript 实用程序。

官网:https://1loc.dev/

1Loc


25. Does it mutate?

它会变异吗?

官网:https://doesitmutate.xyz/

Does it mutate?


26. Keycode

获取任意键的 JavaScript 事件键码

官网:https://keycode.info/

Keycode


27. Worth It: 现代 JS 版

用来分析页面的工具,帮你确定在使用模块和无模块模式时,在现代浏览器中下载的 JavaScript 减少了多少。

官网:https://module-nomodule-calcu...

Worth It


28. npmview

一个用于查看 npm 包文件的 Web 应用。

官网:https://npmview.now.sh/

npmview


29. CSS to JS

在 CSS、JS 对象和 JSX prop之间进行转换。

官网:https://css2js.dotenv.dev/

CSS to JS


30. All Characters

一个简单的页面,显示所有不同的字符及其 HTML 代码。

官网:https://aymkdn.github.io/char...

All Characters


31. Shape Catcher

帮助你查找 Unicode 字符的工具。当你要查找不知道名字的特定字符时非常麻烦。在 shapecatcher.com上,你只需要知道它的大致形状即可!

官网:https://shapecatcher.com/

Shape Catcher



32. Mocky

在开发时不必等待后端代码准备完毕,用 Mocky 可以生成自定义 API 响应。

官网:https://designer.mocky.io/

Mocky


33. Explain Shell

写下命令行并查看与每个参数相匹配的帮助文本

官网:https://explainshell.com/

Explain Shell


34. Base64 Image

将图像转换为 Base64

官网:https://www.base64-image.de/

Base64 Image


35. Open Graph Check

在社交网络上分享内容时,针对目标群体量身定制的优化预览可以显着提高点击率。 Opengraphcheck.com 能帮助你做到最好。最棒的是,Open Graph Check 是免费的。

官网:https://opengraphcheck.com/

Open Graph Check


36. Brotli pro

帮你获得更高的压缩率

官网:https://www.brotli.pro/

Brotli pro



37. Responsive Breakpoints

轻松生成最佳的响应式图像尺寸

官网:https://www.sensitivebreakpoi...

Responsive Breakpoints


38. Is my host fast yet?

用来检测用户浏览 Web 时所经历的真实服务器响应延迟。

官网:https://ismyhostfastyet.com/

Is my host fast yet


39. Check My Links

“Check My Links”是一个链接检查器,可爬取你的网页并查找无效链接。

官网:https://chrome.google.com/web...

Check My Links


40. JSON Web Token

对 JWT 进行编码或解码

官网:https://www.jsonwebtoken.io/

JSON Web Token


41. Git Kraken

适用于 Windows、Mac 和 Linux 的 Git 客户端,免费开源。

官网:https://www.gitkraken.com/

Git Kraken



42. BEM Cheat Sheet

即使是最有经验的 CSS 开发人员,也不会总是立即找到正确的类名,这很快会使你感到绝望。该工具为你提供一些最常见的 Web 组件的命名建议,帮助你避免在 BEM 的世界中迷路。

官网:https://9elements.com/bem-che...

BEM Cheat Sheet


43. Can I Email

官网:https://www.caniemail.com/

Can I Email


44. CSS Grid Generator

只需要设置数字以及列和行的单位,然后就会为你生成一个 CSS 网格!可以通过在框内拖动来创建放置在网格内的 div。

官网:https://cssgrid-generator.net...

CSS Grid Generator


45. Screen size map

设备无关像素的屏幕尺寸比较

官网:https://screensizemap.com/

Screen size map



46. Who can use?

谁可以使用这种颜色组合?

官网:https://whocanuse.com/

Who can use



47. Will it CORS?

告诉这台神奇的 CORS 机器你想要什么,它将告诉你确切的操作。

官网:https://httptoolkit.tech/will...

Will it CORS


48. extractCSS

从 HTML 提取 CSS

官网:http://extractcss.com/

extractCSS


49. Shieldfy

在代码正式投入生产之前,自动识别并修复代码中的安全问题和漏洞。

官网:https://shieldfy.io/

Shieldfy


50. YAML Checker

YAML Checker 提供了一种快速简便的方法来验证 YAML。通过漂亮的语法突出显示和错误信息来验证 YAML。

官网:https://yamlchecker.com/

YAML Checker


本文首发微信公众号:前端先锋

欢迎扫描二维码关注公众号,每天都给你推送新鲜的前端技术文章

欢迎扫描二维码关注公众号,每天都给你推送新鲜的前端技术文章

欢迎继续阅读本专栏其它高赞文章:


查看原文

赞 49 收藏 37 评论 3

zyqi 赞了文章 · 10月26日

【年中收藏】少不了的vue源码探索,除了面试你会学得更多!

给自己再一次读vue源码的机会

众所周知,目前的局势下,前端的开发的任职要求越来越高;不只是问及会使用什么什么,掌握es6熟练vue或react框架最好使用过某某框架又最好是会node,等等...

当面试官问起:

  • vue2.x 和 vue3 的数据绑定原理各是什么?
  • React 的 Fiber 你了解多少?
  • 前端可以控制异步任务并发数吗?
  • Typescript有哪些高级用法和优缺点?
  • 在线编辑组件文档的实现原理是什么?
  • 你读过哪些源码?

...

以上的面试题目,并不是代表全部和正确性;细节别纠结,大体得说明目前面试确实造SpaceX。不过你能花点时间去了解和深入,对你职业发展有非常大得帮助和提升。

所以自己要理清自己缺乏哪些技术体系,规划自己的知识蓝图。

Logos for Vuex and Vue-Router? · Issue #6305 · vuejs/vue · GitHub

vue3 进行曲

因为vue3目前在火速推动,它有很多非常有意思很好玩的东西。

列表收藏:【这是入口】你要找的 vue 源码 全宇宙的都在这!

🐯🦁🐮🐷🐹🦊
撸vue3的正确姿势:

  • Proxy:不只是解决了 defineProperty 的局限性。
  • Performance:性能更比Vue 2.0强。
  • Tree shaking support:可以将无用模块“剪辑”,仅打包需要的。
  • Composition API:组合API。
  • Fragment, Teleport, Suspense:“碎片”,Teleport即Protal传送门,“悬念”。
  • Better TypeScript support:更优秀的Ts支持。
  • Custom Renderer API:暴露了自定义渲染API。

TODOLIST:

  • 1 Docs & Migration Guides
  • 2 Router
  • 3 Vuex
  • 4 CLI
  • 5 新工具:vite(法语 “快”)
  • 6 vue-test-utils
  • 7 DevTools
  • 8 IDE Support (Vetur)
  • 9 Nuxt

介绍 Vue.js 以及 Vue-next 源码分析文章,希望通过学习Vue.js源码获得更好的知识和收获。

vue-next 源码机制

vue 源码,高度关注

更多关注

Vue3+ & Vue-CLI3+ 开发生态圈资讯

该推荐文章列表的最新资讯会第一时间发布到Github上,欢迎Star:
Find the latest breaking √vue3 & vue-cli 3 News

🚀欢迎Star,后续会不断更新。
🇨🇳最后更新日期:2️⃣0️⃣2️⃣0️⃣/0️⃣6️⃣/1️⃣2️⃣

【2020】 ≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡------------------------ 【2021】

除了单独Vue3资讯,欢迎查看更多vue.js资讯:【【🔥Vue.js资讯📚】目前web前端开发非常火爆的框架;定时更新,欢迎 Star 一下。

查看原文

赞 37 收藏 27 评论 2

zyqi 提出了问题 · 2019-12-17

html2canvas截图片不是只循环指定元素内的元素吗?怎么整个html都检测了一遍?

html2canvas截图时指定元素外有几张加载不出来的图片,截图时,回调成功返回十分缓慢

关注 1 回答 0

zyqi 关注了标签 · 2019-10-13

php

PHP,是英文超文本预处理语言 Hypertext Preprocessor 的缩写。PHP 是一种开源的通用计算机脚本语言,尤其适用于网络开发并可嵌入HTML 中使用。PHP 的语法借鉴吸收 C语言、Java 和 Perl 等流行计算机语言的特点,易于一般程序员学习。(目前是 Web 开发性价比最高的语言)

关注 63668

zyqi 关注了标签 · 2019-10-13

springboot

Spring Boot 项目旨在简化创建产品级的 Spring 应用和服务。你可通过它来选择不同的 Spring 平台。

关注 12179

zyqi 关注了标签 · 2019-10-13

spring

Spring是于2003 年兴起的一个轻量级的Java 开发框架,由Rod Johnson 在其著作Expert One-On-One J2EE Development and Design中阐述的部分理念和原型衍生而来。

关注 25608

zyqi 关注了标签 · 2019-10-13

java

Java 是一种可以撰写跨平台应用软件的面向对象的程序设计语言,是由 Sun Microsystems 公司于 1995 年 5 月推出的 Java 程序设计语言和 Java 平台(即 JavaSE, JavaEE, JavaME)的总称。Java 技术具有卓越的通用性、高效性、平台移植性和安全性。

Java编程语言的风格十分接近 C++ 语言。继承了 C++ 语言面向对象技术的核心,Java舍弃了 C++ 语言中容易引起错误的指針,改以引用取代,同时卸载原 C++ 与原来运算符重载,也卸载多重继承特性,改用接口取代,增加垃圾回收器功能。在 Java SE 1.5 版本中引入了泛型编程、类型安全的枚举、不定长参数和自动装/拆箱特性。太阳微系统对 Java 语言的解释是:“Java编程语言是个简单、面向对象、分布式、解释性、健壮、安全与系统无关、可移植、高性能、多线程和动态的语言”。

版本历史

重要版本号版本代号发布日期
JDK 1.01996 年 1 月 23 日
JDK 1.11997 年 2 月 19 日
J2SE 1.2Playground1998 年 12 月 8 日
J2SE 1.3Kestrel2000 年 5 月 8 日
J2SE 1.4Merlin2002 年 2 月 6 日
J2SE 5.0 (1.5.0)Tiger2004 年 9 月 30 日
Java SE 6Mustang2006 年 11 月 11 日
Java SE 7Dolphin2011 年 7 月 28 日
Java SE 8JSR 3372014 年 3 月 18 日
最新发布的稳定版本:
Java Standard Edition 8 Update 11 (1.8.0_11) - (July 15, 2014)
Java Standard Edition 7 Update 65 (1.7.0_65) - (July 15, 2014)

更详细的版本更新查看 J2SE Code NamesJava version history 维基页面

新手帮助

不知道如何开始写你的第一个 Java 程序?查看 Oracle 的 Java 上手文档

在你遇到问题提问之前,可以先在站内搜索一下关键词,看是否已经存在你想提问的内容。

命名规范

Java 程序应遵循以下的 命名规则,以增加可读性,同时降低偶然误差的概率。遵循这些命名规范,可以让别人更容易理解你的代码。

  • 类型名(类,接口,枚举等)应以大写字母开始,同时大写化后续每个单词的首字母。例如:StringThreadLocaland NullPointerException。这就是著名的帕斯卡命名法。
  • 方法名 应该是驼峰式,即以小写字母开头,同时大写化后续每个单词的首字母。例如:indexOfprintStackTraceinterrupt
  • 字段名 同样是驼峰式,和方法名一样。
  • 常量表达式的名称static final 不可变对象)应该全大写,同时用下划线分隔每个单词。例如:YELLOWDO_NOTHING_ON_CLOSE。这个规范也适用于一个枚举类的值。然而,static final 引用的非不可变对象应该是驼峰式。

Hello World

public class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello, World!");
    }
}

编译并调用:

javac -d . HelloWorld.java
java -cp . HelloWorld

Java 的源代码会被编译成可被 Java 命令执行的中间形式(用于 Java 虚拟机的字节代码指令)。

可用的 IDE

学习资源

常见的问题

下面是一些 SegmentFault 上在 Java 方面经常被人问到的问题:

(待补充)

关注 105147

zyqi 关注了标签 · 2019-07-04

mysql

MySQL是一个小型关系型数据库管理系统,开发者为瑞典MySQL AB公司。在2008年1月16号被Sun公司收购。而2009年,SUN又被Oracle收购。MySQL是一种关联数据库管理系统,关联数据库将数据保存在不同的表中,而不是将所有数据放在一个大仓库内。这样就增加了速度并提高了灵活性。MySQL的SQL“结构化查询语言”。SQL是用于访问数据库的最常用标准化语言。MySQL软件采用了GPL(GNU通用公共许可证)。由于其体积小、速度快、总体拥有成本低,尤其是开放源码这一特点,许多中小型网站为了降低网站总体拥有成本而选择了MySQL作为网站数据库。

关注 63172

zyqi 关注了标签 · 2019-07-04

html5

HTML5 是 HTML 下一个的主要修订版本,现在仍处于发展阶段。广义论及 HTML5 时,实际指的是包括 HTML、CSS 和 JavaScript 在内的一套技术组合。

关注 88035

zyqi 关注了标签 · 2019-07-04

html

超文本标记语言(英文:HyperText Markup Language,HTML)是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。

关注 62357

认证与成就

  • 获得 0 次点赞
  • 获得 0 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 0 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2017-08-03
个人主页被 77 人浏览