• SVG 学习之基础图形

    在日常工作中,有些图形的使用频率非常高,因此 SVG 提供了一系列预设图形,便于用户快速调用。对于不从事艺术创作类工作的人来说,这些预设图形能够满足绝大多数需求,如果不满足,SVG 也提供了更自由、更强大的路径元素。这篇文章就来讲一讲 SVG 中的基础图形。 基础图形 文中所有…

  • SVG 学习之路径元素

    SVG 中的路径元素 是最复杂的元素,也是最强大的元素。在图形绘制中,SVG 提供的基础元素往往不能完全满足需求,此时就需要使用路径元素了,通过路径元素的各种命令,可以实现任何想要的形状。这篇文章就来讲一讲路径元素的相关知识。 相对坐标与绝对坐标 在正式学习路径元素前,有两个…

  • 在 Vue 项目中使用 CKEditor4

    搞开发的朋友们对富文本编辑器一定不陌生,可能也又爱又恨。我们的项目中也会用到富文本编辑器,之前一直都是用的 TinyMCE,功能还是挺丰富的,只是我个人觉得 UI 有点不太好看。 于是在最新的项目准备更换富文本编辑器,经过一番对比,觉得 CKEditor4 比较合适。为什么不用…

  • ElementUI 源码学习之 InfinityScroll

    本文是我学习 ElementUI 源码的第五篇文章,上一篇文章学习了 ElementUI 中 Message 组件的实现,这篇文章来学习一下 ElementUI 是如何实现 InfinityScroll(无限滚动)组件的。 组件效果 从效果上看,无限滚动是很简单的,就是在滚动条…

  • ElementUI 源码学习之 Message

    本文是我学习 ElementUI 源码的第四篇文章,上一篇文章学习了 ElementUI 中 Scrollbar 组件的实现,这篇文章来学习一下 ElementUI 是如何实现 Message(消息提示)组件的。 每款浏览器都有自带的 alert 消息提示,但是每款样式都不一样…

  • ElementUI 源码学习之 Scrollbar

    本文是我学习 ElementUI 源码的第三篇文章,上一篇文章学习了 ElementUI 中 Collapse 组件的实现,这篇文章来学习一下 ElementUI 是如何实现 Scrollbar(模拟滚动条)组件的。 目前常用的几款浏览器中只有 Chrome 开放了对内置滚动条…

  • ElementUI 源码学习之 Collapse

    本文是我学习 ElementUI 源码的第二篇文章,上一篇文章全面的学习了 ElementUI 的 CSS,这篇文章来学习一下 ElementUI 是如何实现 Collapse(折叠面板)组件的。 功能需求 在正式开始学习前,我们先思考一些问题,然后再带着问题去学习,效果会更好…

  • Flex 布局极易教程

    Flex 布局,也称弹性布局,是相对于浮动布局来说更好的一种布局方式,但并不算是一种新的布局方式了,基本上在做移动端开发的时候都在用,而 PC 端使用得相对较少,因为要兼容老年浏览器。 我在平时开发的过程中也会使用,只是发现对有些属性似乎了解得不多,所以这篇文章就来全面的复习一…

  • ElementUI 源码学习之 CSS 样式

    做前端的朋友们都知道,在项目中编写 CSS 其实是一件比较痛苦的事,在还原设计图的同时,既要防止过度(甚至无意义的)嵌套,又要防止样式覆盖,还要防止命名冲突,很让人头大。这篇文章就来聊一聊 ElementUI 中是如何编写 CSS 样式的。 从自动化构建出发 本文并不会深究每个…

  • Vue 中的 $attrs 和 $listeners 是做什么的

    单页应用中,页面是由不同的组件构成的,Vue 中也是一样,所以我们对下面的这张图非常熟悉。 这样的拆解很大程度上能够复用代码,降低耦合,但同时也会带来一些副作用。 通常情况下,父子组件之间的数据是通过 由父向子传递的,当子组件想要修改数据时,则需要通过 以事件形式交由父组…

  • Vue 中的 inheritAttrs 是做什么的

    是 Vue 中的一个选项,我从来没有使用过,或者说我没有仔细观察过某些情况下的异常状况,所以没有注意到它,而文档中对其功能的解释乍一看又让我觉得有些不明所以: 默认情况下父作用域的不被认作 props 的特性绑定 (attribute bindings) 将会“回退”且作为普通…

  • [译]Flutter 动画极易教程

    Flutter 中的动画功能强大且使用起来非常简单。通过一个具体的例子,你将学到构建动画所需要的一切。 今天我们无法想象没有动画的任何移动应用程序。当你从一个页面移动到另一个页面时,点击一个按钮(或 InkWell )…有一个动画。动画无处不在。 Flutter 让动画变得非常…

  • CSS 变量

    在网页设计中,通常会定义色彩基调,相关的色彩应用都以此为基础。同一种颜色会在网页上的很多地方出现很多次,因此我们才需要定义色彩变量,以便在需要修改色彩的时候能够做到一次修改全局应用。 通常我们在会借助 CSS 预编译器来实现,因为早些年 CSS 中并没有变量的概念。直到 201…

  • 如何在 CSS 中选择父元素

    最近在用 markdown 写文章的时候遇到一个问题,就是我想让插入的图片在网页上显示的时候左右居中。这样一个小小的需求,却让我花了不少心思,总结一下想到或者找到的方法: 使用 + 标签,但是 标签已经被废弃了,所以这不是长久之计,而且写起来也麻烦。 使用 + 标签,…

  • 在 Flutter 中实现一个无限轮播

    这篇文章来写一个常用功能———无限轮播图,此轮播图的开发源于我的一个项目,文末可以看到,是因为 pub 上的插件不满足我的需求(或者说不适合我的需求),所以决定自己试着写一个,先看一下最终效果。 最终效果提示 图片来源于网易云音乐,听歌时候顺手扒的,侵权即删 实现过程 实现起来…

  • 在 Flutter 中实现一个浮动导航栏

    这段时间一直在学习 Flutter,在 dribble 上看到一张导航栏设计图,就是下面这张,感觉很是喜欢,于是思考着如何在 Flutter 中实现这个效果。 设计效果提示 设计图作者:Lukáš Straňák 经过一番研究,大体上算是实现了效果(有些地方还是需要改进的),如…

  • [译]Flutter 应用架构 101:Vanilla, Scoped Model, BLoC

    Flutter 提供了一种现代的响应式框架,丰富的组件集和工具,但是还没有如同 Android 中应用架构指南一样的东西。 的确,没有任何终极架构方案能满足所有需求,但我们面对的事实是,我们正在开发的大多数移动应用至少具有以下的某些功能: 从网络请求数据/向网络上传数据。 遍历…

  • 最近在 Vue 项目中用到的一些小技巧,或许有用

    在最近的 Vue 项目中,为了完成需求使用了一些小技巧,做个笔记,或许也能帮到道友。 技巧 需求一:为路径配置别名 在开发过程中,我们经常需要引入各种文件,如图片、CSS、JS等,为了避免写很长的相对路径(),我们可以为不同的目录配置一个别名。 找到 中的 配置项,在其 …

  • [译]用 API 请求制作赏心悦目的 UX

    在构建 Web 应用时,首先要创建一个优雅且响应迅速的体验。 试图控制超出 Web 应用程序范围的体验通常是事后的想法。工程师忘记了处理从 API 请求数据时可能会遇到的所有麻烦事情。在本文中,我将为你提供三种模式(包括代码片段),以使你的应用程序能弹性应对不可预测的情形。 …

  • [译]用 Workers 让静态网站动态化

    以下是 Gambling.com 集团首席开发人员 Paddy Sherry 的客座文章。他们使用 Cloudflare 为全球受众提供服务,构建绩效营销网站和工具。Paddy 是一位网站性能狂热爱好者,且对无服务器计算很感兴趣。 选择在大型站点网络上使用的技术是必须正确的关键…

  • [译]JavaScript 2018 中即将迎来的新功能:异步生成器及更好的正则表达式

    2018 年 6 月发布的最新年度 ECMAScript 更新,尽管在常见功能的积压上仍然远远小于 ECMAScript 6,但依然是迄今为止最大的年度版本。 身为 ECMAScript 编辑及微软在 ECMA TC39 委员会代表的 Brian Terlson 告诉 The …

  • [译]简单的响应式现代 CSS 网格布局

    在本文中,我们将展示如何创建响应式现代 CSS 网格布局,演示如何在旧浏览器上使用降级代码,如何逐步添加 CSS 网格,如何使用对齐属性重新构建小型设备的布局以及居中元素。 在之前的文章中,我们探索了四种不同的技术,可以轻松构建响应式网格布局。那篇文章是在 2014 年写的 —…

  • [译]布局的下一次革新

    如果在过去几年中你参加过任一网页设计演讲,你可能已经看过 Jon Gold 这篇著名的推文: 它讽刺了今天很多网站看起来都一样的事实,因为它们都遵循我们共同决定使用的相同标准布局实践。建立博客?主栏,工具侧边栏。营销网站?大图,三个博眼球的框(一定是三个)。 当我们回顾早期的…

  • [译]深入 Flutter 之手势

    Flutter 提供了一些非常棒的预制组件,用于处理触摸事件,如 和 。用这些组件包裹住你的组件,它们就能够响应触摸事件了。除此之外,它还会向你的组件添加 Material 风格的飞溅效果。例如,当从组件的边界延伸出来时, 可以选择控制飞溅的形状和剪裁效果。有趣的是 和 …

  • [译]挑战 Flutter 之 Twitter

    挑战 Flutter 将尝试在 Flutter 中重新创建特定应用的 UI 或设计。 此挑战将尝试实现安卓版 Twitter 的主页。请注意,重点将放在 UI 上,而不是实际从后端服务器获取数据。 了解应用结构 Twitter 有四个由底部导航栏控制的主要页面。 它们是: …

  • [译]挑战 Flutter 之 YouTube(画中画)

    挑战 Flutter 尝试在 Flutter 中重新创建特定应用的 UI 或设计。 此挑战将尝试实现 YouTube 的主页和视频详情页(视频实际播放的页面),包括动画。 这个挑战将比我以前的挑战稍微复杂一些,但结果却更好。 开始 YouTube 应用包括: a)主页包括: …

  • Flutter 入门——山寨掘金

    本文是我在学习 Flutter 时的练手项目,现整理成入门教程,有需要的道友可以看看。由于是入门教程,文中内容不会很深入,对于已经学习 Flutter 一段时间的道友,略过即可。 实现过程 新建项目 生成的项目结构如下: 在此项目中,我们的业务代码都在 下,包配置都在 中…