• JCheheJChehe/blog· 3 天前

    原文:Moving along a curved path in CSS with layered animation

    CSS animation 和 transition 均能很好地实现 A 到 B 的过渡,但这仅限于直线运动。无论你如何调整元素的 animation 或 transition 的 贝塞尔曲线(*-timing-function),均不能使其沿曲线运动。当然也包括自定义过渡函数,如弹簧效果。这是因为 X 轴与 Y 轴的相对位移总是相等的。

    无疑 JavaScript 能轻易实现曲线运动,但这里有一个简单方法能突破这个限制:分层动画。通过使用两个或以上的元素去驱动一个动画,即对

  • 概念

    能力检测,又可以称为特性检测,它的目标是识别浏览器的能力,它的基本模式如下:

      if (object.property) {
        // 使用 object.property
      }

    例子

    在浏览器中可以采用 JavaScript 检测是否支持 WebP ,对支持 WebP 的用户输出 WebP 图片,否则输出其他格式的图片。

      // 简化写法
      function isSupportWebp() {
        var isSupportWebp = false;
    
        try {
          isSupportWebp = document.createElement('can
  • JCheheJChehe/blog· 4 天前

    原文:Circle Packing

    圆形填充是一个非常神奇的效果。蕴含数学魅力的它,看似非常复杂。在本教程中,我们将创建一个有趣的圆形填充效果。尽管它实现起来并不特别高效,但仍然很快。

    老规矩,初始化 canvas。

    var canvas = document.querySelector('canvas');
    var context = canvas.getContext('2d');
    
    var size = window.innerWidth;
    canvas.width = size;
    canvas.height = size;
    
    context.lineWidth = 2;

    现在,我将阐述

  • gRPC 是个通用、高性能的开源 RPC 框架。它可以高效地连接单个或多个数据中心的服务。另外也可以支持可插拔的负载均衡、追踪、健康检查以及认证。最后,它也能应用于分布式计算的最后一公里来连接各种设备、手机应用、浏览器与后端服务。[1]

    这里可以留意下最后一句话,这句话的意思是:你可以使用 gRPC 来取代现有的 RESTful 接口。事实上,已经有很多案例这么做了:以关键词『gRPC iOS』或者『gRPC Android』去Google 一下就会发现很多案例。

    基础知识

    它所依赖的东西,有两个:HTTP2 以及 Protocol buffer(当然了,其它协议也是支持的,比如 JSON

  • JCheheJChehe/blog· 5 天前

    原文:Un Deux Trois

    对于爱好生成艺术的人来说,Vera Molnár 是他们的灵感来源。因为她是最早创作数字艺术的人之一,并且作品十分引人注目。在本教程中,我们将仿造她的作品之一——一二三。

    毫无疑问,我们将使用几乎称为“标准”的初始化代码,即获取用于绘制的 canvas 和上下文 context,同时设置 canvas 的尺寸大小。

    var canvas = document.querySelector('canvas');
    var context = canvas.getContext('2d');
    
    var size = window.innerWidth;
    canvas.