blog icon indicating copy to clipboard operation
blog copied to clipboard

红日初升,其道大光:sun_with_face::house_with_garden:请star或watch,不要fork

Results 100 blog issues
Sort by recently updated
recently updated
newest added

我大概是一个不学无术的化学人, 硬生生地上了写代码的船, 做着平平无奇的工作, 梦想着有一天真正变强, 从一个跟随者变为一个领导者。

![](https://upload-images.jianshu.io/upload_images/1641380-eb0856d7a991e15c.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 先说环境,我测试了两台IOS手机,`iphone 8 ios 11.4.1` 和 `iphone 6s plus ios 11.4.1`,都存在这个诡异的bug。 ![](https://upload-images.jianshu.io/upload_images/1641380-4ef634bdc9ca196c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 这几天老大告诉我要做一个用户的引导页,引导页大致的效果像是这样子: ![](https://upload-images.jianshu.io/upload_images/1641380-d6bc735ba7e3d9a6.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 我也用过很多APP,很多APP其实这个引导页可视区域都是用图片代替的,但是我认为使用图片的话,当引导页消失的时候,用户会发现这和自己在引导页看到的不一致,我认为这是一种**不好的用户体验**,因此我不想用图片来代替!!! ![](https://upload-images.jianshu.io/upload_images/1641380-e9a50609f2050489.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 于是灵光一现使用box-shadow来做,因为box-shadow的**第四个值**就是阴影的拓展尺寸,我把这个设置为**非常大**,这样就很适合作为黑色的蒙层部分,想想都感觉自己是如此的机智。 ``` box-shadow: 0 0 0 9999999px rgba(0,0,0,.8) ``` ![](https://upload-images.jianshu.io/upload_images/1641380-0849eac117ee68c4.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 当我兴致勃勃写了一连串的引导页的时候,满心欢喜的以为可以交差了,然后使用了iphone测试了一下,然后就发现了问题,整个引导页蒙层的黑色部分消失了,我的引导页瞬间成了这样子。 ![](https://upload-images.jianshu.io/upload_images/1641380-01360e63ddc6760e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 纳尼。。。。也就是说 **box-shadow不生效**。...

CSS

![](https://upload-images.jianshu.io/upload_images/1641380-8b0bde3053bd3e0d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) ### 天猫web目前的不足 ![](https://upload-images.jianshu.io/upload_images/1641380-c72eebe49a200453.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) Web 和 Native 最大的差距不是调用底层接口的能力甚至不是性能,而在于各种细节,保证从设计到实现做到精细化。 ### 如何保证设计稿的高度还原 - 流程规范:设计稿标准 + 视觉走查流程 - 基础方案:沉淀设计还原的基础方案 - 工具辅助:视觉还原对比工具 ### 设计稿的静态还原 #### 字体 - 字体设置一定需要关注行高 ![](https://upload-images.jianshu.io/upload_images/1641380-86417531be19edc6.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) - 字重设置加粗只是用bold或者700,不使用lighter ![](https://upload-images.jianshu.io/upload_images/1641380-77e8440b23360a11.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) - 中文字体垂直居中问题,由于...

![](https://upload-images.jianshu.io/upload_images/1641380-ae43551983184c5e.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 创建ndarray对象: ```py import numpy as np np.array([1,2,3,4]) np.array([[1,2,3,4],[5,6,7,8]]) ``` 转换为list ```py np.array([1,2,3,4]).tolist() ``` 获取ndarray对象的基本信息:维数(ndim)、行列信息(shape)、数据存储类型(dtype) ```python arr = np.array([[1,2,3,4],[5,6,7,8]]) print(arr.ndim) print(arr.shape) print(arr.dtype) ``` 设置数据存储类型 ```py np.array([1,2,3,4], dtype=np.int32) np.arrat([1.2,1.3,1.4], dtype=np.float64) ```...

![](https://upload-images.jianshu.io/upload_images/1641380-88e81b884de79542.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 相信很多人都和我一样,刚接触babel的时候都是使用 `babel-preset-es2015` 这个预设套餐的,但是显然目前而言 `babel-preset-env` 会是一个更好的选择,`babel-preset-env` 可以根据配置的目标浏览器或者运行环境来自动将ES2015+的代码转换为es5。 吸引人的地方在于我们可以通过 `[.browserslistrc](https://github.com/browserslist/browserslist)` 文件来指定特定的目标浏览器。当然也可以通过targets选项的browsers选项指定。不过如果你的目标浏览器支持 `es modules` 特性,`browsers` 选项则会失效,如下: ```js { "presets": [ ["@babel/preset-env" "targets": { "esmodules": true } ] ] } ``` 同样也可以指定Node.js的版本: ```js...

![](https://upload-images.jianshu.io/upload_images/1641380-55fe06abacca14bb.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) ### 1.Overview `loose mode` 我翻译为松散模式,`loose mode`在babel中通常是不推荐使用的,但是我们需要知道的是使用 `loose mode` 转换而来的代码更加像ES5的代码(更像是人手写的) 大多数Babel插件都有两种模式 `normal mode` 和 `loose mode`,`normal mode` 转换而来的ES5代码更加符合ECMAScript 6 的语义,而 `loose mode` 转换而来的代码更加简单,更像是人写的。 `loose mode` 的优点在于兼容旧引擎,可能会更加快,缺点在于如果我们需要将转换之后的代码重新转换为 native ES6 代码,可能会遇到问题,而这个冒险在大多数时候是不值得的。 ###...

JavaScript

![](https://upload-images.jianshu.io/upload_images/1641380-9903bc2d94c1a8db.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) ### 1.基本操作 安装 ```bash npm i -g rollup ``` 打包成文件 ```bash rollup src/main.js -o bundle.js -f cjs ``` 等价于 ```bash rollup src/main.js -f cjs > bundle.js ``` 需要注意的是参数 `-f`...

JavaScript

![](https://upload-images.jianshu.io/upload_images/1641380-55f822a0bd0cbdf7.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 在实际开发中,异步总是不可逃避的一个问题,尤其是Node.js端对于数据库的操作涉及大量的异步,同时循环又是不可避免的,想象一下一次一个数据组的存储数据库就是一个典型的循环异步操作,而在循环之后进行查询的话就需要确保之前的数据组已经全部存储在了数据库中。可以得到关于循环的异步操作主要有两个问题: + 如何确保循环的所有异步操作完成之后执行某个其他操作 + 循环中的下一步操作依赖于前一步的操作,如何解决 ### 如何确保循环的所有异步操作完成之后执行某个其他操作 **方法一:设置一个flag,在每个异步操作中对flag进行检测** ```javascript let flag = 0; for(let i = 0; i < len; i++) { flag++; Database.save_method().exec().then((data) => { if(flag === len)...

JavaScript

![](https://upload-images.jianshu.io/upload_images/1641380-19fd3644eb2dc119.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) ## 资源路由 一行代码完成资源资源路由声明: ```ruby resources :photos ``` 这会创建7个不同的路由,这些路由会映射到 `Photos` 控制器上。 ![](https://upload-images.jianshu.io/upload_images/1641380-08c3fc6272e1ab5e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 这样4个URL地址就会映射到7个不同的控制器动作上。 #### 用于生成路径和URL地址的辅助方法 在创建资源路由时,会同时创建多个可以在控制器中使用的辅助方法,如上面的资源路由会创建以下方法: - `photos_path`:返回值为 /photos - `new_photos_path`:返回值为 /photos/new - `edit_photo_path(:id)`:返回值为 /photos/:id/edit - `photo_path(:id)`:返回值为 /photos/:id 这些方法都有对应的_url形式(photos_url),前者返回的是路径,后者返回的是完整的url地址。 ####...

ruby

![](https://upload-images.jianshu.io/upload_images/1641380-56ec153dc5a0720b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) P.S.最近在看[dayjs](https://github.com/iamkun/dayjs)的源码,源码上用到了 `valueOf` 方法,虽然知道这个方法,但是很少接触,就试着找来了[ECMAscript标准文档](http://www.ecma-international.org/ecma-262/6.0/)来看看标准的定义。 首先看下标准对于 `Object.prototype.valueOf` 的定义: ![](https://user-images.githubusercontent.com/15937065/40236108-082c3428-5adf-11e8-8a63-3ca0be956295.png) 关于 `ToObject`,标准如下定义: ![](https://user-images.githubusercontent.com/15937065/40244753-49dbb85a-5af6-11e8-8776-f648a8cbf0b7.png) ![](https://user-images.githubusercontent.com/15937065/40244759-5174677e-5af6-11e8-8072-93d7072a2e43.png) 翻译过来就是: 参数类型 | 返回结果 ------------- | ------------- Undefined | 抛出 **TypeError** 异常 Null | 抛出 **TypeError** 异常 Boolean...

JavaScript