前端向朔

学习分享 | 热爱生活 | 奋斗青年

iPhone又出新机了,UI设计师该用什么尺寸呢?

iPhone这次一下出了三款新机,iPhone Xs、iPhone XR、iPhone Xs Max,那么问题来了,这三款手机与之前的有什么不同,设计师的UI尺寸会发生什么变化,移动端页面的UI到底应该以多少为好?接下来我们将一一探讨。

2018-09-22 19:08:19

阅读数:478

评论数:0

帧动画的多种实现方式与性能对比

概述 前面我分享了《Web动画形式》,各种动画形式都可以制作出一种类型的动画,那就是帧动画,也叫序列帧动画,定格动画,逐帧动画等,这里我们统一用帧动画来表述,接下来我们就来看看帧动画有哪些打开方式吧。 (高兴的小伙子) 应用场景 帧动画一般用来实现稍微复杂一点的动画效果,同时希望动画更...

2018-07-11 10:42:47

阅读数:787

评论数:0

移动Web开发实战专栏总结(PPT分享)

以下为我将专栏《移动Web开发实战》重新从不同的角度进行整体的梳理之后,在团队分享的PPT。在这里分享给大家。 写PPT之前,先将要分享的内容用脑图梳理出来,有了框架填内容就比较快了。 1、禁止ios和android用户选中文字 2、禁止ios长按时触发系统的菜单,禁...

2018-06-25 16:46:04

阅读数:352

评论数:0

Nuxt项目如何配置使用Sass/postcss-px2rem/webpack-spritesmith

接上篇《Vue-Cli 3.0 如何配置使用 Sass/postcss-px2rem/webpack-spritesmith》 如果Vue项目考虑实现SSR服务端渲染的话,Nuxt是很好的选择,Nuxt帮我们做了很多工作,让我们实现SSR就像配置一样简单。 还是同样的问题,如果需要在Nuxt项目开...

2018-12-13 21:40:11

阅读数:16

评论数:0

Vue-Cli 3.0 如何配置使用 Sass/postcss-px2rem/webpack-spritesmith

背景 前段时间,我由 重构/UI开发 转岗前端开发,之前直接在重构自己的目录下输出静态CSS样式和HTML,现在变成直接在Vue-Cli 3.0 脚手架构建的项目下进行开发,这就需要在现有前端开发流程中整合重构流程。 我们之前重构是通过 gulp、postcss 等工具实现自动化处理及组件化开发,...

2018-12-13 20:18:13

阅读数:20

评论数:0

《CSS Secrets》读书笔记(1)

三年重构老司机二刷《CSS Secrets》觉得有些东西还是应该记录下来,本文内容来自书籍《CSS Secrets》中文名叫《CSS揭秘》,做笔记的过程中我会根据自己的过往经验加上自己的理解和看法,用通俗的表达对一些知识点进行解释。 文章目录引言web标准:是敌还是友CSS 编码技巧尽量减少代码重...

2018-12-07 09:41:16

阅读数:53

评论数:0

Git项目文件/版本管理

首先我们先统一一个概念,便于我们在后面的表述。 我们Git版本管理有三个区:工作区、暂存区、版本区(库) 接下来我们会介绍对文件和项目的操作,其实就是增删改查(CRUD)。因为之前已经分享过分支和标签的操作,所以,针对分支和标签的CRUD操作可以查看之前的文章。 Git分支操作集合 Git标签管理...

2018-12-02 01:06:46

阅读数:694

评论数:1

Git标签管理集合

标签管理背景 在进行版本管理的过程中,我们是会经常提交记录的,在发布的过程中,我们也是将最新的代码发送出去,但是如果版本需要回退的时候,我们一下子就很难弄清楚,某个功能是哪个版本的了,这个时候我们就需要标签来对我们的代码进行关键节点的标记。最好每发布一次线上代码就添加一次版本号标签。 版本号的定义...

2018-11-25 19:03:02

阅读数:30

评论数:0

手机端抓包http/https-Fiddler安装与设置代理

注:本教程适合Windows系统用户。 通过fiddler代理,我们可以抓包手机的网络请求,也可以通过电脑设置host,实现手机访问测试内网。 准备 1.安装fiddler,官网下载,下一步安装 2.手机和电脑在同一局域网下(连同一个wifi或者手机连电脑开的热点) 3.查看自己电脑IP,不知道的...

2018-11-16 10:53:32

阅读数:131

评论数:0

Git分支操作集合

本文记录git分支相关操作 基础分支操作 1.查看本地分支 git branch 2.查看远程分支 git branch -r,查看远程和本地所有分支 git branch -a 3.创建本地分支 git branch [name] 4.切换分支 git checkout [name] 5.创建并...

2018-11-15 18:36:42

阅读数:51

评论数:0

如何将本地文件推送到Git远程仓库

准备 1.首先你要安装Git 2.其次你要有一个远程仓库,现在大家用的比较多的比如:https://github.com/ , https://about.gitlab.com/ 3.最后你要准备好你要管理的项目文件 加入Git版本管理 其实要讲的就是github仓库创建时给出的提示或建议,我们实...

2018-11-15 10:44:00

阅读数:50

评论数:0

如何使用Git克隆远程仓库

GitHub Git安装 Git命令 图形化界面SourceTree 1.如何克隆仓库 git clone https://github.com/xiangshuo1992/preload.git 仓库地址可以是https地址,也可以是SSH地址,如图,如果你的GitHub还没有配置SSH Ke...

2018-11-12 10:53:42

阅读数:81

评论数:0

ES6 Set和Map数据结构(可转为数组)

一:Set 基本用法 ES6 提供了新的数据结构 Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。(不包括空对象) Set 本身是一个构造函数,用来生成 Set 数据结构。 const s = new Set(); [2, 3, 5, 4, 5, 2, 2].forEach(x =&a...

2018-11-07 21:58:02

阅读数:43

评论数:0

GitHub如何配置SSH Key

https://github.com/xiangshuo1992/preload.git git@github.com:xiangshuo1992/preload.git 这两个地址展示的是同一个项目,但是这两个地址之间有什么联系呢? 前者是https url 直接有效网址打开,但是用户每次通过...

2018-10-29 09:35:07

阅读数:24

评论数:0

Web动画形式

背景 对于Web开发者来说,不管什么细分方向,比如数据可视化、网站系统、电商网站等等,都会涉及到一个难题“动画”。 因为动画关系到Web开发的两个比较重要的点,一是视觉效果,二是用户体验,通过酷炫动画效果可以给视觉加不少分,同样,恰到好处的微动效也会给用户体验带来不错的惊喜,基于此,我们的We...

2018-06-10 15:27:24

阅读数:344

评论数:2

单屏(全屏)适配解决方案(jQuery插件)

背景 在平时的web开发过程中,经常会要实现单屏或者叫全屏的效果,同时要满足设备适配要求,虽然一些常见的插件能实现一定的效果,但是如果需要灵活运用的话还是会受到很多限制,在不断的实践过程中,我们梳理了一套全屏适配解决方案,能兼容IE8+,下面我们来详细了解。 案例分析 案例一: 可以看...

2018-05-17 13:27:56

阅读数:850

评论数:0

Preload图片预加载(jQuery插件)

背景 我们在做页面的时候,从用户体验的角度出发,肯定是希望用户以最快的速度看到完整的页面信息,但在实际情况中经常会遇到些问题。 比如受网速影响,页面加载素材的时间比较长,页面会出现短时间的错乱或者闪屏; 或者页面素材比较多、比较大,需要一定的加载时间,特别有时候的活动页面,我们一般会把首屏做...

2018-04-30 00:21:58

阅读数:1047

评论数:0

Canvas绘制时钟(面向对象版)

概述 更多Canvas实例可以看GitHub,不定时更新:https://github.com/xiangshuo1992/canvas-demo 在学习了老师的课程之后,自己实现了一遍,同时写了一个面向对象的版本。 Canvas时钟效果-函数编程 Canvas时钟效果-面向对象版 ...

2018-04-20 20:02:07

阅读数:167

评论数:0

Canvas星空效果(JS面向对象)

概述 更多Canvas实例可以看GitHub,不定时更新:https://github.com/xiangshuo1992/canvas-demo 这个Demo主要有以下几点可以讨论: 1.HTML5 canvas的基础API,如 context.beginPath(); 2.获取屏幕...

2018-04-17 17:58:00

阅读数:1196

评论数:0

微信小程序-(cover-view/cover-image)

概述 在微信小程序经常会用到一些原生组件,比如map、video、canvas、camera,这些原生组件想让其他元素覆盖在其上,必须使用cover-view或者cover-image组件。最近在开发的小程序也是用到了camera这个组件,有几个坑在这里可以说下。 cover-view ...

2018-03-28 15:33:43

阅读数:9357

评论数:0

提示
确定要删除当前文章?
取消 删除