标签归档:前端

记录一个令人血压飙升的前端项目

记录一个令人血压飙升的前端项目

最近在看一个前端项目,里面出现了一些令人血压暴涨的骚操作。虽然可以用,但对我来说,确实是让我看到血压飙升。

1. 尽可能使用常规的指标

项目的诉求是实现页面的自适应化,在不同尺寸的屏幕上尽可能保持一致的显示。

为了实现这个诉求,我给他们的建议是使用 Bootstrap 之类的框架,在不同的屏幕上尽可能保持一致。使用 Bootstrap 之类的框架来完成。

最后研发团队选择采用了一个有用,但我看起来非常头疼的方法 —— 根据屏幕宽度计算 rem。通过这样的方式,实现了在不同的屏幕宽度下,都可以和设计稿的尺寸一比一。

但这样带来的问题是,rem 计算出的结果也是一个非常的大的值(当然也可以非常小),但依然不是一个常规的结果,需要你常常使用诸如 0.03 这样的数值来指定宽度和高度。

我觉得,这样的写法并不是说不行,只是这样的写法其实会降低整个项目的可维护性。

2. 文件放置符合规范

其次,这个项目中还出现了一个问题是 —— 文件到处乱丢。在一些项目中,大家往往会有一些明确的文件路径的规范,比如样式文件应该放在哪里。在这个项目中,就出现了样式乱丢的情况。

和 Component 放在一起
符合规范统一放在 scss 文件中

这样的混乱的写法则会导致在实际开发的时候,如果想要调整样式,可能会出现调试失效,修改起来较为混乱的问题。

3. 一个项目中混用多个不同的尺寸单位

另外一个文件采用 px 作为单位

刚刚有用 rem 的单位,另外就有一个文件采用的是 px 为单位,我非常担心在不同尺寸屏幕下出现的错位问题。

4. 放弃 Bootstrap 的样式类,转而改用手动撰写每一行样式

其实完全可以用 position-absolute d-flex 等方法来覆盖

总结

这个项目从我目前的视角来看,依然还有很大的改进空间。且留下了不少的坑。在我看来,长期来看,这些代码将会留下不可维护的问题。希望他们后续慢慢修改和调整吧。唉。

在 WordPress 中实现同一个 CSS 类在不同页面展示不同的效果

在 WordPress 中实现同一个 CSS 类在不同页面展示不同的效果

在使用 WordPress 开发时,某些时候你会遇到在同一个类在不同页面的时候,希望有不同表现的诉求。在这种情况下,一个比较简单 or 比较 Tricky 的技巧是通过 Body 层的类选择器来实现。

在 WordPress 进行渲染时,会自动在页面的 <body> 上加入 postid-[id] 的类,对比本文就是 postid-5888

比如本文的 class

类似的,如果是一个 Page,也会生成 page-id-[id] 的类。

页面生成的类是 page-id-[id],和 post 规则不完全相同

因此,如果你需要某个页面的元素样式和其他页面元素样式不同,但页面结构保持一致,一个比较好的方式是通过这些页面类选择器来实现。以你要自定义 btn 样式为例。则可以这样实现:

// 标准页面的样式
.btn{
   // your styles
}

// 在文章 ID 为 5888 的文章上的样式
.postid-5888 .btn{
  // your styles
}
// 在页面 ID 为 84 的文章上的样式
.page-id-84 .btn{
  // your styles
}

总结

借助上面的方式可以实现同一个类在不同的页面展示不同的样式。但我个人觉得,这样的实现方式可能对于 Debug 不太方便,尽可能少用。但如果你需要用的话,那一定要注意好组织代码,避免后续维护成本提升。

此外,除了通过修改 style.css 来实现,你可以考虑将 Page 单独的样式梳理在一个 page.css 中进行维护,从而降低维护难度和成本。
WordPress 当中也有一些插件来实现某个页面自定义的 CSS 能力,将这些样式放在插件中来实现也是一个不错的选择:Post/Page specific custom CSS

Reference

那些影响你前端开发体验的问题(1)

那些影响你前端开发体验的问题(1)

最近在研究和体验一些 GitHub 上的前端项目,遇到了一些让人体验不佳的点, 这里梳理一些我遇到的,一方面是留存,记录那些让我体验不好的事情。另一方面警示自己在开发前端项目的时候应该注意一下开发体验,确保不会让别人在开发的时候也遇到这些问题。

1. 项目应该有文档

这是不少 GitHub 上面项目的普遍问题。现有的文档要么是以 Framework 生成的 Readme 为主,要么直接没有文档。

但没有文档对于后来者的开发其实非常不友好,比如几个常见问题:

  1. 如何启动一个 Server & 如何设置后台 API 的 Prefix?
  2. 项目的组织结构是什么样的?
  3. 涉及到的第三方服务应该如何配置?

上面这些文档是帮助后来者快速使用你的项目所必需的(换句话说,如果你要做开源项目,想要打造开源社区,这也是必要的)。

2. 项目控制算法复杂度

我在开一些前端项目的时候,明显会感到浏览器的响应变慢了,我以为是我的 Mac Mini 2012 性能不行。但我打开自己的博客,依然如丝般顺滑,我就明白了。问题不在于我的电脑性能跟不上,而是这个前端页面加入了大量的有用或无用的代码,使得 CPU 需要大量的计算。

虽然进入 SPA 的时代以后,我们开始将算力的使用从服务端往客户端转移,但也建议各位工程师控制自己项目的复杂度,不要一开网页,风扇就呼呼的转。浏览体验不好,还凸显自己的技术不行。

3. 使用 debuuger 调试,而不只是 console.log

在编译型语言当中,使用 Debugger 来进行调试是一项基本技能,因为需要在运行时去看不同的变量的值,以此来完成调试。

爆炸的 Console

但在前端领域,因为 console.log 的过于好用,大家开始习惯于使用 console.log 来打印变量,但对于大型项目来说,大量的 console.log 也会让你的项目输出许多无意义的内容,让整个项目的调试和开发受到阻碍。

总结

最近看项目,总结了三条自己觉得影响体验的点,后续随着看的项目的深入,会逐渐总结出更多影响体验的点,引以为鉴。

在项目中使用  Dead Simple LESS CSS Watch Compiler 来自动生成 css 文件

在项目中使用 Dead Simple LESS CSS Watch Compiler 来自动生成 css 文件

最近在写一个 WordPress 主题来帮助我完成从 WordPress 到微信公众号的实现。在这个过程中,我需要借助于一些 CSS 的超集,来帮助我完成样式的编写。考虑到 SCSS 的 C++ 依赖问题,我选择了 Less 来完成。但如果直接使用 lessc 的话,主要面临的问题在于无法检测文件更新,这样对于需要实时查看效果的我来说,是比较麻烦的。所以我选择使用 Dead Simple LESS CSS Watch Compiler 来完成自动监控文件变化并刷新的功能。

教程

安装

执行 npm 命令来安装 Dead Simple LESS CSS Watch Compiler

yarn global add less less-watch-compiler 

安装完成后,你就可以执行命令来监听文件的变化。

配置

这里为了方便,我在 WordPress 插件目录中初始化了 npm, 因此,可以非常方便的借助于 npm script 来完成命令的配置。

通过配置了单独的 Build 命令,实现了执行 npm run build 就会自动监听 less 文件夹下的文件,并转换成对应的 css 文件,放置在 css 目录中。

{
  "private": true,
  "scripts": {
    "build": "less-watch-compiler ./less ./css"
  },
  "devDependencies": {
    "less": "^4.1.2",
    "less-watch-compiler": "^1.16.3"
  }
}

其他

如果你需要对 less 运行有更多配置的诉求,还可以创建一个 less-watch-compiler.config.json 来配置具体的执行目录。不过我对于这部分没有要求,就直接整个目录来进行配置了。

{
    "watchFolder": "<input_folder>",   
    "outputFolder": "<output_folder>",
    "mainFile": "<main-file>",   
    "includeHidden": false,
    "sourceMap": false,
    "plugins": "plugin1,plugin2",
    "lessArgs": "option1=1,option2=2",
    "runOnce": false,
    "enableJs": true
}

总结

SCSS 因为 node-scss 的编译问题被各种吐槽,虽然换成了 dart-scss ,但历史的阴影还在。选择了 less 后,通过一些配置,可以让我自己的开发变得更加简单。何乐而不为?

使用 Stylish 巧妙破解基于 CSS 的复制限制

使用 Stylish 巧妙破解基于 CSS 的复制限制

本文内容仅用于学习和技术研究。请不要用此作恶。

白宦成

在一些网站上,出于版权或增长的诉求,一些网站会在站点内部加入防止复制内容的限制。作为一个内容创作者,我是支持(因为版权原因而不得不选择)这样的行为的。但另一方面,我自己也需要进行一定的笔记,对于长段的内容,显然,直接复制原作者的内容更适合我。因此,我也不得不研究一下,如何破解这种样式的限制。

为什么 CSS 能禁止复制?

CSS 当中提供了一个属性 user-select 可以用于设定文字是否可以被选中,对于非技术人员来说,无法被选中,自然无法使用 Ctrl + C 来复制内容。在这种情况下,对于非技术人员,就可以实现很好的防复制了。

不过,CSS 防复制不算多见,我见的最多的还是以 Javascript 的方式来禁用复制和 Devtools 的。

这个属性的值有以下五种,其中 none 是用于防止复制的,设定为 None 后,即使你的内容是文本内容,也无法被选中,就无法直接使用 Ctrl + C 来完成复制了。而 text 则是可以选择文本,其他的几个属性,你可以在 MDN 的语法说明中找到。

user-select: none;
user-select: auto;
user-select: text;
user-select: contain;
user-select: all;

使用 Stylish 来破解 CSS 的限制

类似油猴脚本可以在目标网页上加载 Javascript 文件,Stylish 可以在目标网页上加载 CSS ,并按照 CSS 的计算权重,让我们的代码可以得到执行。基于这个能力,我们可以覆盖原本网页上样式,来实现将 user-select 的值修改为我们需要的值。

1. 安装 Stylish

前往 Google Chrome Extension Store 安装 Stylish

2. 找到不能复制的文字对应的样式类

在浏览器中打开开发者工具,定位到你需要复制的文本元素,在右侧的调试工具中切换到「计算样式」,就可以在其中找到 user-select属性,并可以看到对应的样式类选择器,复制选择器。

3. 在 Stylish 中新建一个样式文件,并在其中添加对应样式类的代码

因为我们只需要修改复制,所以只需要将对应的属性的值做一个简单的修改即可。

4.设置生效网站

为了减少这段代码影响到的页面,你可以在下方的应用对象这里设定具体生效的网站,从而降低对于其他站点的影响。

总结

本次针对 CSS 禁止复制的研究帮助我节省了大量的研究的时间,有效的提升了我进行研究的效率,真的不错!

Vue 没有办法让页面高度为 100% 怎么办?

在进行 Vue 后台开发时,一般来说,我们希望我们的应用的首页是 100% 高度,其样式大致如下

效果图

但是一开始,往往会遇到高度没有办法设置为 100%。

这是由于在 Vue 中,并没有给 html,body,#app 设置默认高度

解决方案也很简单,只需要在 App.vuestyle 中添加如下代码

html,
body,
#app {
  height: 100%;
}

小程序的 marker 无法触发 bindmarkertap 事件应该如何处理

TL;DR

如果想要 marker 可以响应 bindmarkertap 事件,需要设定 markerID,这一点文档中并没有标注。

具体情况

在开发美食地图时,出现了一个问题,marker 的点击总是不会触发 bindmarkertap 事件。

我的代码是这样写的

    store.get().then(res => {
      this.setData({
        stores: res.data,
        windowHeight: app.globalData.windowHeight,
      }, () => {
        wx.hideLoading();
        wx.showToast({
          title: '双指缩放可以调整地图可视区域,查看更多美食',
          icon: 'none'
        })
      })
    })

在地图中去调用 stores. marker

在地图上的确可以出现图标,但是无法点击 maker 并触发事件。

通过复制官方的 marker 的数据进行调试后发现,当 maker 有 id 时,marker 就可以触发事件,因此,怀疑是 ID 的问题。

在美食地图小程序中,我使用的是腾讯云提供的小程序·云开发,其使用的是 MongoDB 作为后台的 Database ,默认的主键为 _id,所以,我自己写了代码来转换 _id

      data.map(item => {
        item.id = item._id
      });

对应的 commit :https://github.com/CloudKits/miniprogram-foodmap/commit/5abcad1f756e03a388bb33dd1c699d3cae9ea0c4#diff-f5ea41cdd371d7b65bfdf8d32188e37d

运营用加强 Markdown 编辑器

运营用加强 Markdown 编辑器

初衷

我一个朋友需要参与公司针对 V2ex 的运营,而 V2ex 如果想要发富文本,就需要 markdown 语法,对于他一个长期担任运营岗的人来说,Markdown让他十分困扰。虽然有很多不错的编辑器,但是由于他会有一些特殊的需求,所以还是十分不舒服。因此我便打算帮他做一个运营用的插件,帮他完成他所需要的特殊功能

特性

  • 满足运营者常用功能需求(H1-H6)
  • 提供插入新窗口打开连接的功能
  • 提供插入含连接的图片的功能
  • 插入含描述的图片
  • 选中文字标红
  • 快速打开图床

Demo

http://co.ixiqin.com

功能说明

插入新窗口打开连接

可以在打开的对话框中输入标题和连接。自动生成一个基于HTML的新页面打开连接
需要注意的是,此连接的会生成在文章尾部,需要自行复制到适当位置。

插入含连接的图片

可以在打开的对话框中输入连接、标题、图片地址、图片描述生成对应代码。
需要注意的是,此连接的会生成在文章尾部,需要自行复制到适当位置。

插入含描述的图片

可以在打开的对话框中输入图片地址、图片描述生成对应代码。
需要注意的是,此连接的会生成在文章尾部,需要自行复制到适当位置。

选中文字标红

选择要标红的文字,点击特色功能区的按钮,即可对指定文字进行标红处理。

快速打开图床

编辑器未做图片上传,故而提供了一个图床的地址,可以将图片上传到sm.ms,复制其生成的图片的连接,使用菜单栏中的工具添加即可。

源码地址

https://github.com/bestony/CoEditor

涉及技术

前端开发、JavaScriptEditor.md
 

Linux 中国 – LCTT 选题工具

Linux 中国 – LCTT 选题工具

初衷

LCTT 使用 Markdown 来作为翻译原文,但是由于原文均为 HTML 格式,在选题时需要手工处理,要耗费大量的时间,所以便制作了选题工具,希望借助机器来完成

特性

  • 可以根据输入的 html 代码生成对应的 Markdown (表格未支持)
  • 支持数字型 Markdown 语法
  • 加入 Editor.md ,选题完成后可以进行编辑
  • 使用 js 来完成复制工作

Demo

http://lctt.ixiqin.com

源码

https://github.com/LCTT/LCTT-Helper/

阿里云论坛 BBCode 编辑器

阿里云论坛 BBCode 编辑器

初衷

制作这个编辑器是在我担任阿里云论坛版主期间,由于阿里云论坛的编辑器实在难用,且由于 Cookies 很容易过期,导致辛苦编辑很久的帖子会由于实效而丢失。于是我希望能够有个编辑器来帮助我更好的编辑帖子。

特性

  • 兼容 phpwind 的 BBCode
  • 接入了 SM.MS 的图床

Demo

http://edit.ixiqin.com

源码

https://github.com/bestony/Editor