Vue 自定义指令的魅力

在你初次接触一个新的JavaScript框架时,会像第一次进糖果店的孩子一样。给啥拿啥,而更直接点,有些东西可以让你更容易成为一个开发者。不可避免的是,我们在用框架时都会有一个同感,就是总有些场景是框架不能帮我们完成的。Vue框架的漂亮之处在于它的功能非常强大,虽然这个框架的指令不够面面俱到,但也能在开发上助你一臂之力了,因为创建一个自定义指令是很轻松的。

编写 SVG 的指南

Scalable Vector Graphics (SVG)是在XML中描述二维图形的语言。这些图形由路径,图片和(或)文本组成,并能够在不失真的情况下任意变换尺寸。本书主要介绍了内联SVG,它是指在HTML中编写的嵌入式代码,以便在浏览器中生成这些图形。以这种方式使用SVG有许多优点,包括为了交互目的访问所有图形的各个部分,支持访问 SVG 文档构成的 DOM 节点树,查询、修改 DOM 节点的属性,提升用户可访问性。先介绍基本组织和简单形状,再继续描述SVG坐标系或画布,然后用它绘制图形的内部和/或边框,变换,以及使用和操作图形文本。通过渐变和模式等更高级的功能来总结。这个指南快速且详细的介绍内联式SVG以及所有涵盖的可使用的功能,有助于你学习SVG。 它面向设计师和开发人员,希望以最可行的方式将SVG添加到他们的工作流程中。

从小笔画细节到开始使用手工制作的模式,本指南旨在成为一个围绕“go-to”编写SVG的参考。

SVG应用指南

我们处于一个用像素来作为度量衡的互联网世界中。 对于一名在互联网世界中工作的设计师和开发者来说, 像素对于我们来说亦敌亦友。 我们希望自己创作出的Web中每一张图片、每一像素都能棱角分明(如网站中的logoicon以及任何修饰性的图片),清晰的在任何设备上展现给用户的同时, 也能尽可能的保证图片的体积来优化性能。而SVG就是解决上面问题非常棒的一个方案。SVG 意为可缩放矢量图形(Scalable Vector Graphics)与屏幕分辨率无关, 体积上能使用Gzip的方式压缩, 而且修改编辑都很方便。本文是SVG在Web开发中一些常见的应用场景、技巧以及使用方法的一个简单的入门指南。

使用Vue观察者实现一个简单异步无限滚动效果

无限滚动(Infinite Scroll)是一种很常见的用户体验模式,它建议用户在Web页面或应用程序加载显示很少的内容。当用户开始向下滚动页面时,会加载更多内容。这些内容是通过向负责提供内容的服务器发出请求来异步加载的。在这篇文章中,我将讨论JavaScript的异步操作以及Vue如何实现无限滚动效果。在这个过程中,我们将看到一个使用无限增发动的简单页面。

不炫技,SVG+CSS3 旋转动画属性就能实现的梦幻效果

CSS3的动画相关的基础的属性基本都涉猎过了,个人认为,其中最复杂的是d:path()路径变形动画,超过3D,而位移、轨迹、旋转、缩放、斜切什么的,相对简单一些,但作为非动画设计师而言,灵活的掌握这些基本的动画加以无穷无尽的变换,就已经能做出很多华丽丽的效果了,这篇呢,源于做一个练习时,AI的连续旋转复制功能,试着做了几个动效,简单、省时、高效,最主要的是用到CSS3的transform:rotate()旋转属性,辅以位移和缩放。

使用Firefox 网格检查器调试 CSS网格布局

这篇文章介绍了Firefox DevTools的一些鲜为人知的特性,这些特性可以在你构建和调试新的CSS网格布局时派上用场。你可能在今年听过不少有关于CSS特性的讨论。如果你在同一个句子中听到CSS网格这两个词,那么我强烈建议你去看看CSS Grid的这个CSS模块。浏览器以CSS盒模型的方式呈现HTML元素,而CSS Grid则是一种新的布局模式,它为开发者提供了控制这些盒子及其内容大小和位置的能力。该模块引入了一系列属性,允许我们创建网格结构,并使用CSS控制网格项的位置和大小。

使用JavaScript 写Web路由

经过《前端路由一探》的学习,简单的了解了Web路由方面的知识。另外在学习HTML5 History API时,知道可以通过这个API来实现Web页面的跳转,而且浏览器不需要刷新。那么今天我们来看如何使用JavaScript写Web路由。从网上找了两个示例,第一个是@KrasimirTsonev100行代码写的一个示例,另一个是@Joakim Carlstein20行代码写的一个示例。首先来看第一个示例。

灵活的overflow

说到overflow对于CSSer而言并不会陌生,用来控制内容溢出的现象。而很多时候我们还会使用text-overflow来控制内容溢出的显示。一般是直接截取,另一种是截取之后让文本后面带有三个点的省略号。不过有意思的是,我们今天要说的灵活overflow

前端路由一探

路由,引导、指路之意。譬如我们熟知的路由器,蹦跶在网络层的数据包转发设备,在网络中也是扮演着指路明灯的角色,肩负着将数据包正确导向目的地址的重任。前端路由也借用了这个词,但是承担的工作全然不同,它是服务于客户端浏览器的指路人。所谓的前端路由,拥有这样一种能力:客户端浏览器可以不依赖服务端,根据不同的URL渲染不同的视图页面。

JavaScript学习笔记:视口宽高、位置与滚动高度

在很多场景下我们需要通过JavaScript来获取视口或DOM元素的大小、位置以及滚动高度。最常见的一个效果,导航吸顶的一个效果。那么今天就来学习这方面相关的知识。

页面

返回顶部