首页

使用 font-display 优化 Web fonts 的加载

使用 font-display 优化 Web fonts 的加载

Web fonts 的使用越来越广泛,可以允许我们在页面上使用用户终端上没有安装的字体,尤其是在图标的使用上。但由于字体的加载依赖网络环境,因此可能会带来一些性能及显示问题,比如网络环境较差时,Web fonts 并不能及时的显示出来,显示效果可能是一团糟。 异常的加载效果下面来分别看一下网络状况不好时加载中与加载完成的效果,首先看下图标的加载效果: 可以看到字体未加载成功时,后三行的图标显示

Flutter 初体验之编写第一个 Flutter 应用

Flutter 初体验之编写第一个 Flutter 应用

在上一节中我们介绍了如何搭建 Flutter 环境,那么这次就来看一下如何编写第一个 Flutter 应用。 本文中将会以新闻应用为原型编写一个简单的新闻列表页及新闻收藏页,其中新闻列表页可以上拉加载更多内容,点击收藏按钮可以收藏新闻并且会在收藏页里显示。 下面开始创建应用吧,项目名可以命名为 flutter_news,创建完毕后就开始编写代码了。 首先我们要在 main.dart 里把脚手架生

Flutter 初体验之环境搭建

Flutter 初体验之环境搭建

Flutter 是 Google 出品的移动端 UI 框架,可以快速在 iOS 和 Android 上构建高质量的原生用户界面。本人也久闻其大名,今天就牛刀小试一把,从搭建环境到编写出第一个简陋的应用,这里做了一个全过程的记录。 环境搭建首先是下载 Flutter 的 SDK,进入下载地址列表里下载最新的即可。 下载完毕后,进入到工作目录,解压 zip 包到工作目录: cd ~/flutter_

在浏览器中把 HTML 页面导出为 PDF

在浏览器中把 HTML 页面导出为 PDF

在前一篇文章中介绍了如何在 Node.js 中把 HTML 页面导出为 PDF,那么这次来介绍一下如何在浏览器中把 HTML 页面导出为 PDF。 这次我们使用的是 Canvas 技术,把 HTML 页面转换为图片,然后再把图片转换为 PDF,主要用到的是 html2canvas 跟 jsPDF 这两个库,下面来看一下具体实现。 题图:by Airstream Inc. on Unsplash

在 Node.js 中把 HTML 页面导出为 PDF

在 Node.js 中把 HTML 页面导出为 PDF

在这个无纸化的时代,我们越来越多的日常操作是在 Web 页面上完成,比如编写文档、记笔记、签合同等等,但很多时候我们需要把这些数据转换为 PDF 文件下载下来,打印、归档或者是作为文件共享。 在 Chrome 浏览器中我们可以直接 「右键 -> 打印」来打印一个网页或者是存储为 PDF,但这样操作往往满足不了我们的需求,打印内容不容易定制并且操作也不够方便,我们希望点击一个「下载按钮」就能

在 React 中使用 GraphQL

在 React 中使用 GraphQL

GraphQL 是一种基于 API 的查询语言,提供了一种可以描述的方式来获取我们想要的数据,它已经有了多种版本的实现,包括 JavaScript,那么今天我们就看一下在 React 项目中该如何使用 GraphQL。 首先来介绍一下我们所要使用的技术栈,前端页面使用 React,服务端使用 Koa,然后就是 Apollo GraphQL 了,一种基于 GraphQL 的解决方案集合。 创建 G

JavaScript Decorators

JavaScript Decorators

Decorators,即装饰器的意思,是 JavaScript stage-2 阶段的一个草案,它作用于一个类或者类的方法和属性。 由于还处于草案阶段,因此我们使用装饰器还需要通过 babel 并配合 babel-plugin-transform-decorators-legacy 插件来编译。 下面我们来看一下装饰器的一些例子: function color(target) {

零配置打包工具 Parcel 入门指南

零配置打包工具 Parcel 入门指南

Parcel 是什么?Parcel 是一个新型的 web 应用打包工具,快速、零配置、开箱即用,相对于 webpack 繁琐的配置来说简直是太精简了,并且内置了开发服务器,完美支持热替换,甚至构建基于 React、Vue、Sass 等需要代码转换的项目也几乎不需要任何配置,只需安装相应的依赖包即可。 如何使用?下面来看一下该如何使用,首先需要安装依赖包:npm i -g parcel-bundl

在 Vue.js 项目中使用 Font Awesome

在 Vue.js 项目中使用 Font Awesome

Font Awesome 是一个开源的图标库,提供了大量的免费图标供我们使用,今天来介绍一下在 Vue.js 项目中该如何使用它。 在开发页面时最经典的做法就是引入 Font Awesome 的 CSS 文件,然后在使用图标时,以i标签结合类名的方式使用,例如<i class="fas fa-user"></i>。但在 Vue 项目中,我们最好是以组件

开始使用 Angular

开始使用 Angular

说起 Angular 已经是一个很久的东西了,记得初次了解还是 1.0 左右的版本,那个时候名字还是 Angular.js,由于身边很少有人使用它,一直也没有运用到项目之中。而如今已经是 5.x 的版本了,出于好奇,现在就再次拾起来,开始使用它。 题图:by Alejandro Garrido Navarro on Unsplash