知鸦日报2023-05-15

总结归纳与分析“抽奖体验”背后的设计逻辑。

属性能对商品进行多维度的描述，其用户价值是帮助用户更快了解商品，建立更清晰的商品感知；同时，通过属性值筛选，帮助用户更快找到目标商品。其商业价值是对多规格商品进行聚类，提高了商家的商品管理效率，也为个性化推荐提供了基础支撑。

Web 缓存是可以自动保存常见文档副本的 HTTP 设备。当 Web 请求抵达缓存时， 如果本地有“已缓存的”副本，就可以从本地存储设备而不是原始服务器中提取这个文档。

Charles 是一个 HTTP 和 SOCKS 代理服务器。代理请求和响应使 Charles 能够在请求从客户端传递到服务器时检查和更改请求，以及从服务器传递到客户端时的响应。

首先，苹果的“灵动岛”设计确实巧妙。作为曾经的一位数码爱好者，最近几年确实很少在UI交互上看到这样令人眼前一亮的创新。那一块挤满元器件的“感叹号”区域，虽然无法正常显示内容，但它完全能够做到可触控（屏幕的触控层与显示层是分离的），影响显示并不等于影响交互。这也体现了苹果设计师一贯的独立思考能力。这让笔者回忆起大学时期酷爱的那部魅族mx2，当年的“小圆圈”设计也很精巧。只不过，苹果这次的设计更加大胆，动画也更加夸张，也更会包装起名字... 毕业之后，从事了前端工作，恰逢中秋佳节，北漂在外，闲来无事，尝试运用CSS3-animation + JS实现一个简易版本的“灵动岛”连播动画。

商品 SKU 的创建与查询，是「电商业务」最经典的开发场景之一，也是整个电商系统「最基础」的功能。因为假如缺少了它，那么也许连准确描述定位一件商品，这样最基本的需求，都将变得困难重重，商品的「库存管理」也就无处谈起。

微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。将前端应用分解成一些更小、更简单的能够独立开发、测试、部署的小块，而在用户看来仍然是内聚的单个产品。

当今互联网公司，一般都会有一些运营类活动，如公司活动宣传、节假日优惠促销等，在电商类公司更是需要频繁的上（下）线运营活动。

在项目开发过程中，前端开发人员经常会遇到切换不同主题风格的需求，接下来我们一起来讨论什么是换肤，以及常用的几种换肤方案。

过去，要检测一个元素是否可见或者两个元素是否相交并不容易，很多解决办法不可靠或性能很差。然而，随着互联网的发展，这种需求却与日俱增，比如，下面这些情况都需要用到相交检测：

• 图片懒加载——当图片滚动到可见时才进行加载
• 内容无限滚动——也就是用户滚动到接近内容底部时直接加载更多，而无需用户操作翻页，给用户一种网页可以无限滚动的错觉
• 检测广告的曝光情况——为了计算广告收益，需要知道广告元素的曝光情况
• 在用户看见某个区域时执行任务或播放动画

过去，相交检测通常要用到事件监听，并且需要频繁调用 Element.getBoundingClientRect() 方法以获取相关元素的边界信息。事件监听和调用 Element.getBoundingClientRect() 都是在主线程上运行，因此频繁触发、调用可能会造成性能问题。这种检测方法极其怪异且不优雅。

Intersection Observer API 会注册一个回调函数，每当被监视的元素进入或者退出另外一个元素时 (或者 viewport)，或者两个元素的相交部分大小发生变化时，该回调方法会被触发执行。这样，我们网站的主线程不需要再为了监听元素相交而辛苦劳作，浏览器会自行优化元素相交管理。

目前我所维护的项目是 58 到家工作端，定位是一款 ToB 的工具型应用，目的是帮助家政从业人员更方便的进行上户工作，随着业务的逐渐迭代，发现部分用户在日常的使用中存在作弊的现象，此现象的存在会导致未作弊阿姨可能接到的订单量减少，甚至在活动期间薅羊毛，影响派单的公平性以及增大公司的活动资金投入，因此需要我们对应用的安全性进行一定的提升以保证整体系统的安全性以及公平性。

现阶段接入了梆梆加固，在接入过程中需要确定相关加固策略，因此需要对应用加固有系统的了解，本文主要是对此次安全升级的总结及以及在 58 到家工作端中的落地实践。

Nginx这个词在一段时间里，对于一名前端开发工程师来说可能是比较陌生和遥远，但随着互联网的发展，前端技术也在日新月异的发生变化，对于前端技术人才的要求和门槛都在不断的提高，不仅仅希望你在自己的专业领域是一个有技术深度并且还需要有技术广度，那么服务器运维这块肯定是绕不过去的一个点，今天我们就一起来聊聊Web服务器Nginx。

本篇文章将通过以下三步，让你了解到小程序登录、和用户信息获取的微信生态变迁，和流程上前后端技术实现。

在产品经理这个行当里面，一直有一句老话“要把用户当成傻子”。这句话并没有任何敌视用户的意思，其理论无非是“让用户减少学习成本，让用户容易上手，是产品设计里面的核心追求”。

移动端 H5 页面通常承担的主要责任就是引流，利用 Web 页面轻量便于传播的特性通过搜索引擎或者社交软件进行传播，然后在页面内引导用户打开 APP 进行消费，引流主要有两种形式：

1. 拉活：引导已安装 APP 用户打开 APP 进行消费，提升用户粘性和 APP 日活数据。
2. 拉新：引导未安装 APP 用户安装 APP，增加 APP 的用户量。

H5 页面唤起 APP 的主要技术方案有以下三种：

• 方案一：URL Scheme（通用）
• 方案二：Universal Link（IOS)
• 方案三：wx-open-launch-app（微信）

方案一和方案二属于系统级别解决方案，方案三是在微信内的解决方案，虽然不是一个级别但是重要性却一点都不低。

在 vue 中有一个组件叫 keep-alive，它的作用其实很简单，主要是缓存：对包裹在其中的动态切换组件进行缓存。但是，它提高性能的效果到底怎样呢？基于这样的思考，在项目中，我们在一个页面分别加 keep-alive 与不加进行了一个对比。

随着发展，活动会场页面的题图运营需要线上模板化，而自研的导购素材制作平台接入了海棠-创意中心，通过平台能力，将素材模板化，并且通过配置化的方式生成多种场景化，个性化的素材。但是创意中心的素材模板是基于SVG的，而会场页面的题图基本是基于Photoshop(PS)输出，源文件是PSD。由于SVG是面向矢量图形的标记语言，而PS是以位图处理为中心的图像处理软件，大多时候，PS无法直接导出SVG文件。

为了能让会场页面的题图模板接入到导购素材制作平台，同时降低设计师的使用门槛，我们需要在导购素材制作平台中实现直接将PSD转成SVG的功能，在线化的将PSD转成SVG，然后导入到创意中心，将题图模板化。

随着发展，活动会场页面的题图运营需要线上模板化，而自研的导购素材制作平台接入了海棠-创意中心，通过平台能力，将素材模板化，并且通过配置化的方式生成多种场景化，个性化的素材。但是创意中心的素材模板是基于SVG的，而会场页面的题图基本是基于Photoshop(PS)输出，源文件是PSD。由于SVG是面向矢量图形的标记语言，而PS是以位图处理为中心的图像处理软件，大多时候，PS无法直接导出SVG文件。

为了能让会场页面的题图模板接入到导购素材制作平台，同时降低设计师的使用门槛，我们需要在导购素材制作平台中实现直接将PSD转成SVG的功能，在线化的将PSD转成SVG，然后导入到创意中心，将题图模板化。

一次和设计同学的闲聊中，了解到他们的设计稿交付时，大多数都是基于sketch，而Psd的设计稿非常少，使得他们一身Psd技艺无用武之地。

最近在处理iOS crash 防护时，发现Unrecognized Selector的防护存在一些日常开发被忽略的情况。若直接使用业内防护方案的话，有可能存在相对隐蔽不易发现的功能失效。本文就针对Unrecognized Selector防护中遇到的问题进行分析，揭秘整个防护过程隐藏的问题。

Designers use sticky menus (menus that stick to the edge of the viewport) to make them easy to access on long pages.

But this fancy pattern hurts UX far more than it improves it.

本文主要介绍了JVM内存模型及JAVA程序运行原理。​

前段时间在做一个基于 psd 模板生成图片的应用，其中重要的功能就是打开编辑器页面来设计出图。但是有个问题，每当我点击一个模板，就会新开一个浏览器页签。现代浏览器是以空间换时间的运行思路来提高效率，这就导致了内存开销会越来越大，也曾想过postmessage来解决这个问题，但是呢 postmessage 是跨域广播，说白了，我 post 的消息任意页签都能 listen 到，不友好。最近刷抖音时，看到了一个前端教学视频，其中就讲到了网页音乐单开的实现方式，核心原理：BroadcastChannel。

Causality is a generic relationship between an effect and the cause that gives rise to it. 因果关系指的是效果和引起它的原因之间的一般关系。