优雅地实现CSS Animation delay心得

话不多说直接开讲: 1.需求: 等待元素A的动画加载完,再加载B元素的动画(下图中A为大熊猫,B为下方卡片) 先来看下最后的效果啦: 2.初始思路: 在B元素的动画属性上加上delay(延迟,使得这个延迟时间 = A元素动画的加载时间) 即:animation : bmove .7s .7s 1;  ... »

微信H5中静默登录及非静默登录的正确使用姿势

在微信中打开网页且需要调用微信登录接口时,微信官方给我们提供了两种登录调用方式:静默登录和非静默登录;但是官方文档中却没有说明在何种情况下使用静默登录,何种情况下使用非静默登录,所以在这里,我想将之前做项目关于这个问题的心得分享给大家。 一、阅读官方文档,实现两种登录方式 其实通过阅读微信官方文档, ... »

HTTP 前端需明白的相关知识点

简介: http(Hyper Text Transfer Protocol)超文本传输协议是万维网应用层的协议,使用了面向连接的TCP作为运输层协议。 特征: http工作原理: http协议定义Web客户端如何从Web服务器请求Web页面,以及服务器如何把Web页面传送给客户端。HTTP协议采用了 ... »

从 源码 谈谈 redux compose

compose,英文意思 组成,构成。 它的作用也是通过一系列的骚操作,实现任意的、多种的、不同的功能模块的组合,用来加强组件。 看看源码 https://github.com/reactjs/redux/blob/v3.7.2/src/compose.js 是不是感觉很简单,关键就这一句嘛,结果也 ... »

Web移动端页面 --响应式和动态REM

响应式 什么是响应式页面呢? 顾名思义响应式页面就是能做出响应的页面,它的页面效果不是定死的,会随着用户的改变而改变。 如何着手响应式有以下几个思考的方向 1. 找一份设计图 2. 使用Media Query 3. 隐藏元素 4. 添加meta viewport 5. 明白手机端交互方式的区别 Me ... »

UED团队规范设计参考及建议

在任何行业中一套良好的工作流程不仅可以保证各个阶段输出物的质量,提升工作效率,而且在一定的范畴下针对不同的项目,工作流程具有可复制的特点。如批量生产一款新车型,那就必须严格按照一定的汽车设计和生产流程进行操作,各阶段通力合作,才能保证汽车品质以及最终的量产。设计行业流程化、规范化程度逐步提高意味着该... ... »

解决iframe在移动端(主要iPhone)上的问题

前言 才发现已经有一段时间没有写博客了,就简单的说了最近干了啥吧。前段时间忙了杂七杂八的事情,首先弄了个个人的小程序,对的,老早就写了篇从零入手微信小程序开发,然后到前段时间才弄了个简单的个人小程序,主要是关于菜式方面制作的,原因么,就在我另外一件事情上有说到了,就是然后又弄了个个人的公众号《前端美 ... »

关于react router 4 的小实践

详细代码栗子:https://github.com/wayaha/react-dom-CY clone然后 分割线 1、这个项目使用create-react-app搭建; 首先需要安装好create-react-app 安装完毕之后就是搭建项目; 安装完成之后,会自动打开localhost:3000 ... »

经典面试题:二分查找/折半查找

思想: 适用于有序的顺序表; 给定值key,与表中中间的元素进行比较。如果相等,则查找成功;若不相等,如果key小于中间元素的关键字,则所需查找的元素在顺序表的前半部分,如果是大于,则所需查找的元素在顺序表的后半部分。在缩小的范围内继续同样的查找,一直重复直达找到位置,或者确定表中没有所需要查找的元 ... »

基于puppeteer模拟登录抓取页面

关于热图 在网站分析行业中,网站热图能够很好的反应用户在网站的操作行为,具体分析用户的喜好,对网站进行针对性的优化,一个热图的例子(来源于ptengine) 上图中能很清晰的看到用户关注点在那,我们不关注产品中热图的功能如何,本篇文章就热图的实现做一下简单的分析和总结。 热图主流的实现方式 一般实现 ... »

使用Puppeteer抓取受限网站

不要相信前端是安全的,今天简单验证一下,但是希望大家支持正版,支持原作者,毕竟写书不易。 安装Puppteer 选择目标网站 我们这里选择胡子大哈大神的网站 http://huziketang.mangojuice.top ; 爬取所有文章 基本思想思路 + 实现方案 爬取书籍目录 根据目录爬取没 ... »

优雅地使用CSS Animation delay

今天写一个css动画时遇到一个mini难题,记录如下: 1.需求: 等待元素A的动画加载完,再加载B元素的动画 2.初始思路: 在B元素的动画属性上加上delay(延迟,使得这个延迟时间 = A元素动画的加载时间) 即:animation : bmove 1s .4s 1; (这里的.4s即dela ... »

【图片版】学习CSS网格布局

CSS网格布局(Grid)是一套二维的页面布局系统,它的出现将完全颠覆页面布局的传统方式。传统的CSS页面布局 一直不够理想。包括table布局、浮动、定位及内联块等方式,从本质上都是Hack的方式,并且遗漏了一些重要的功能(比如:垂直居中)。Flexbox的出现部分解决了上述问题,但Flex布局是... ... »

⏰Day.js 2kB超轻量时间库 和Moment.js一样的API

Moment.js 是一个大而全的 JS 时间库,很大地方便了我们处理日期和时间。但是 Moment.js太重了(200k+ with locals),可能一般项目也只使用到了她几个常用的API。虽然社区也有几个轻量的时间库,要想迁移过去又会增加新的学习和迁移成本。 __如果能有一个和 Moment ... »

深耕业务 ---- 探索复杂/超复杂前端业务的开发与设计

距离上一篇博客,我已经有3个月没有写博客了,脑子里也有很多灵光和新点子,忙嘛,肯定忙,但是忙不是理由,所以见谅。这次给自己下了死命令,一定要产出点东西,so,将自己最近开发中能总结的东西慢慢再搞出一点。 作为深耕的业务,我们就从一个我遇到的复杂需求开始做个引子。栗子如下(可先看图片过个眼瘾): 需 ... »

前端工程师成长之多读好书

1 引言 乱七八糟的书看了很多,有一本讲JavaScript的印象特别深开篇说的是"JavaScript是Java的脚本语言",但还是看完了,最后忘了书名。 下面列的这些都是看过后至少记得起书名的,也有部分是经常看的书,一起列出来,推荐给爱学习的同学。 2 前端技术 2.1 综合 《现代前端技术解析 ... »

Angular筛选功能

业务场景:依据级别(level )和主题(Subtype )向后台传参数,进行筛选向前台返回数据列表。 代码如下:其中filterChoose()用于弹出筛选下拉框,filterButton()用于选中数据执行调接口筛选的功能。 <!-- 根据级别、主题筛选 --> <div class="filt ... »

【笔记】快应用QuickApp(hap) -- 构建一个微博应用

一、背景 在上次和小伙伴分享了快应用(后面简称hap)后,有很多待定的思路没有去尝试。这周有时间简单开发了一个热门微博的应用,主要涉及到的难点:富文本、长列表、画廊。这里将整个开发过程中遇到的问题以及解决思路和方法分享给大家,希望对想踩坑的各位有所帮助。 代码:https://github.com/ ... »

浅谈移动端适配-rem

对于移动端开发来说,无可避免的就是直面各种设备不同分辨率和不同DPR(设备像素比)的问题,在此忽略其他兼容性问题的探讨。 一. 移动端开发有关于像素的概念: 1.设备像素(dp),也叫物理像素。指设备能控制显示的最小物理单位,意指显示器上一个个的点。从屏幕在工厂生产出的那天起,它上面设备像素点就固定 ... »