图片相关总结
1、图片种类
JPEG/JPG
PNG
SVG
Base64
WebP
有损压缩、体积小、加载快、不支持透明
无损压缩、质量高、体积大、支持透明
文本文件、体积小、不失真、兼容性好
文本文件、依赖编码、小图标解决方案
像 JPEG 一样对细节丰富的图片信手拈来,像 PNG 一样支持透明,像 GIF 一样可以显示动态图片
JPG 图片经常作为大的背景图、轮播图或 Banner 图出现
要用它来呈现小的 Logo、颜色简单且对比强烈的图片或背景等
Logo
非常小的 Logo
兼容性
2、图片属性object-fit: 指定可替换元素(img | video | iframe | embed )的内容对象在元素盒区域中的填充方式object-fit: fill | contain | cover | none | scale-down
fill
contain
cover
none
scale-down
对象完全填充内容框
对象保持宽高比
对象在保持宽高比的同时填充内容框
对象保持原有的尺寸
取 none 或 contain 中尺寸小的
对象 ...
被特朗普禁用的8款中国应用,你有用过么?
【环球网快讯】据路透社最新独家消息,美国总统特朗普当地时间 5 日签署行政命令,禁止与包括支付宝在内的 8 款中国应用软件进行交易。报道称,这项命令要求美国商务部界定哪些交易将被禁止,而腾讯公司旗下的 QQ 钱包和微信支付也是目标之一。具体来看,特朗普签令禁止与 8 款中国应用交易具体包含了:支付宝、CamScanner、QQ 钱包、SHAREit、腾讯 QQ **、VMate、微信支付和WPS Office。**除了大家耳熟能详的腾讯系应用和支付宝,其他的几款应用大家都了解么,究竟有什么魔力让“懂王”也感到恐惧?
**CamScanner**中文名:扫描全能王官网:https://www.camscanner.com/*外界评价:\*
“手机上最好用的 50 个苹果应用之一” –美国时代周刊
“自由职业者和生意人必备的 10 款工具应用” –福布斯
“扫描全能王,手掌上的扫描仪” – 华盛顿邮报
**
SHAREit**中文名:茄子快传官网:https://shareit.one/外界评价:
茄子快传是迄今为止速度最快的跨平台近场传输软件
VMate**中文名:印度版“快手” ...
语雀游戏机🎮
**如外部无法访问,请直达语雀玩耍 **传送门
解压神器进击的外星人开火车切面包吃蘑菇赛车手贪吃蛇无聊的兵乓球转盘
2020 年你应该知道的 React 库
声明:本文为译文,原文链接:https://www.robinwieruch.de/react-libraries 版权属于:桃翁
React 生态圈.xmind
React 已经诞生很久了,自从它诞生开始,围绕组件驱动形成了一个非常全面的生态,但是来自其他编程语言或者框架的开发人员很难找到要构建一个 React 系统的所有组件。如果你是来自于像 Angular 这样的框架的开发者,你可能已经习惯了框架包含了所需要的所有功能,然而对于 React 来说,它的核心并不是完善所有的可选库。 这是优势还是劣势取决于你自己。 当我从 Angular 切换到 React,我绝对经历了它作为 React 的优势。只有通过 React,您才能使用函数组件和 props 构建组件驱动的用户界面。 它带有一些内置的解决方案,例如,用于本地状态和副作用的 React Hooks。下面的文章将向您提供一些自己总结的方法,以便从补充库中进行选择,从而构建一个全面的 React 应用程序。
如何开始 React如果你是一个完全不熟悉 React 的初学者想创建一个 React 项目,加入 React 的世界 ...
JS大法 - 纯JS 获取客户端IP地址
背景项目中的 sass 系统有多种用户权限,且同一个帐号可以多个人同时登录,导致有些操作无法直接追溯到对应的责任人,因此需要获取到当前登录用户的 IP 地址(员工内部人员的内网地址)并收集上报。
如何收集1. 公网 IP对于收集公网 IP, 目前通用的是利用 新浪 和 **搜狐 **的接口,可兼容多种浏览器。对于一些使用如 ActiveX 等 IE 特有的 API 不做介绍,要想了解请转:https://www.cnblogs.com/zhangycun/p/7339346.html
搜狐接口:
1234<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script><script type="text/javascript"> document.write(returnCitySN["cip"]+','+returnCitySN["cname"]) // 110.87.118.246, ...
初级技术管理的思考
初次担任技术 TeamLeader,诚惶诚恐。中层偏下的小管理者处于一个比较尴尬的位置,没有更多的能够决定团队组成、利益分配、晋升去留的权利,自然就会收到团队成员对其权威的不认可甚至冲击。所以这个时候更加看中这个人的“个人魅力”,是不是能够解决团队内成员不能解决的问题,能否对其他人提供帮助(利他)……如何建立起一定的个人影响力是自己需要重点考虑的问题。
1.生活还是要和工作区分开的,不是所有的同事都想和你建立起除了“同事”以外的关系初创小团队的公司,可能彼此关系比较好,混淆了工作和生活的界限;在稍微大一点的团队,要接受“工作就是工作,生活就是生活”的事实,有的同事永远不可能和你做朋友。
2.尊重每个人个性化的存在每个人经历的事情、所处的环境、见到的人碰到的事决定了这个人的性格态度,不了解事情的根源前不要站到道 德的制高点去评判这个人和他的态度。
3.尊重每个人职业发展的路线程序员普遍的“沉迷”自己的技术中,职业规划也更多的是学习和精进技术。并不是所有人都会考虑“业务-产品-技术”的整条链路,虽然这可能是一个正确的路径,背后涉及到是做事情的 WHAT-WHY-HOW-DO 的思维模式,但 ...
当你在浏览器地址栏输入URL的时候,实际上发生了什么(译)
作为一个软件开发,你一定十分了解 web 应用程序如何工作并且有什么技术涉及其中:浏览器,HTTP,HTML,web 服务器,请求处理等等。在这篇文章中,我们将会深入的了解一下,当你在浏览器地址栏输入 URL 的时候,实际上发生了什么
1、你在地址栏输入了一个 URL 地址
2、浏览器查询域名对应的 IP 地址首先浏览器先去寻找访问过的域名的 IP 地址,DNS 查询的过程如下:
Browser cache浏览器缓存 DNS 记录。有趣的是,操作系统没有告诉浏览器每一个 DNS 记录存活时长,因此浏览器缓存记录是一个固定的时长。(根据浏览器的不同而不同,一般是 2-30 分钟)
OS cache如果浏览器没有查询到用户查询的记录。那么会查询操作系统是否存在这条记录
Router cache如果用户的操作系统也没有查询到,那么会继续查询路由(router),一般可以查询到 DNS 缓存
ISP DNS cache如果没有在 router 中查询到,下一个查询的的地方是 ISP 的 DNS 的服务器。
Recursive search你的 ISP 的 DNS 服务器开始递归搜索,从根域名 ...
如何向npm发布一个包
如今前端项目开发中,我们几乎无时无刻不在使用别人开发好的包(package),这是被推荐的,也是软件开发领域提倡的”不要重复造轮子”。
那用了这么多三方的包,你有没有自己开发一个包并发布出去呢?
以下步骤,简单的记录了我发布一个简单包的流程(前提条件:已成功安装 node,npm 等前端开发基本环境)
1.初始化项目
npm init
执行该命令后会交互式的输入项目基本信息,一路会车就 OK。特别注意 name 要在整个 npm 仓库中唯一,否则后期发布会提示没有权限,所以命名的时候最好加上自己的特殊标示。**
执行初始化项目成功后我们的项目目录下就有了 package.json 项目描述文件。接下来我们新建一个 js 文件,实现一个简单的功能。
2. 代码编写代码实现了一个获取字符串长度的方法并导出(export),其他人使用的时候只需要导入就可以了(import)。
接下来,我们就把这个简单的实现了获取字符串的包发布出去。
3.添加用户,相当于在 npm 上注册自己的账号``
npm adduser
4.登陆自己的 npm 账号
npm login
可以通过以下命令查 ...
前端训练营-期末总结
初识2020 年因为疫情,在家迟迟未能返京工作,无聊打开极客时间正看到「前端训练营」的推广,讲师也是前端圈里大名鼎鼎的 winter,毫不犹豫的报名了,每天迫切的等待开课,计划这对自己的知识体系的一次全新的梳理和重构
学习课程的开始,老师发起了灵魂一问–“对于前端,你会什么,不会什么?”这不仅让我一个从事了 3 年专职前端也是为之一愣,自然而然的,我会 HTML、CSS、JS 前端三剑客,我也会目前比较获得前端三大框架中的 React 和 Vue …… 于此同时,老师抛出了「前端技能模型」
编程能力:问题难,写不出来 ==> 刷题
架构能力:系统大,写不出来 ==> 读源代码
工程能力:人多,如何组织协同 ==> 工作机会
前端知识:html、css、js
领域知识:新零售、汽车、埋点
对于 HTML、CSS、JS 课程讲解,老师直接带领我们去读官方规范,这对于平时接收二手消息的我也是一次很大的触动,开始可能是痛苦的,单也深知这么做的重要意义,直接从官方文档获取信息,让我有了对知识“追本溯源”的意识,避免了人云亦云浏览器工作原理的讲解,让我对浏览器是如何渲染 HT ...
1-1内存管理(译)
要理解为什么将 ArrayBuffer 和 SharedArrayBuffer 添加到 JavaScript 中,您需要了解一些内存管理。
内存你可以把机器中的内存想象成一堆盒子。我认为这些就像你在办公室里的邮箱,或者学龄前儿童储存他们东西的小房间。如果你需要给其他孩子留些东西,你可以把它放在盒子里。在这些盒子的旁边,有一些数字,这就是内存地址。是你告诉别人在哪里可以找到你留给他们东西的方式。这些盒子中的每一个都是相同的尺寸,可以容纳一定数量的信息。盒子的大小取决于机器。这个大小被称为字长。通常是 32 位或 64 位。但是为了更容易显示,我将使用 8 位的字长大小。如果我们想把数字 2 放在其中一个盒子里,我们可以很容易地做到,因为数字是 易于用二进制表示 。如果我们想要的不是数字呢?比如字母 H?我们需要有一种方法将它表示为一个数字。要做到这一点,我们需要一个编码,比如 UTF-8 。我们需要一些东西来把它变成那个数字…… 比如编码器环。然后我们可以储存它。当我们想把它从盒子里拿回来时,我们必须把它通过解码器翻译回 H。
自动内存管理当使用 JavaScript 时,你实际上不需要 ...