• 用 JavaScript 写一个区块链

    Posted by : lon.y@qq.com on 2018年4月10日

    几乎每个人都听说过像比特币和以太币这样的加密货币,但是只有极少数人懂得隐藏在它们背后的技术。在这篇博客中,我将会用JavaScript来创建一个简单的区块链来演示它们的内部究竟是如何工作的。我将会称之为SavjeeCoin!全文分为三个部分: part1:实现一个基本的区块链 part2:实现POW part3:交易与挖矿奖励 Part1:实现一个基本的区块链 区块链 区块链是由一个个任何人都可以访问的区块构成的公共数据库。这好像没什么特别的,不过它们有一

    阅读全文...

  • 2018 年 3 月 15 个有意思的 JavaScript 和 CSS 库

    Posted by : lon.y@qq.com on 2018年4月4日

    Tutorialzine 旨在让你了解最新最酷的 Web 发展趋势。这就是我们每个月为何都会发布一些我们偶然发现并认为值得你关注的优秀资源的原因。   BasicScroll 该库使你可以在你的设计中添加 parallax 滚动动画效果。你可以直接在你的 CSS 中使用变量和属性,或者使用 JS 来获得更好的动画效果。它运行非常流畅,独立于框架,在桌面和移动设备上非常出色,并且支持触屏输入。   Proton Native Proton native 允许

    阅读全文...

  • 不可思议的纯 CSS 导航栏下划线跟随效果

    Posted by : lon.y@qq.com on 2018年4月3日

    先上张图,如何使用纯 CSS 制作如下效果? 在继续阅读下文之前,你可以先缓一缓。尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果。 OK,继续。这个效果是我在业务开发的过程中遇到的一个类似的小问题。其实即便让我借助 Javascript ,我的第一反应也是,感觉很麻烦啊。所以我一直在想,有没有可能只使用 CSS 完成这个效果呢?   定义需求 我们定义一下简单的规则,要求如下: 假设 HTML 结构如下: 不可思议的CSS

    阅读全文...

  • 前端布局基础概述

    Posted by : lon.y@qq.com on 2018年4月3日

    1. 前言 前端圈有个“梗”:在面试时,问个css的position属性能刷掉一半人,其中不乏工作四五年的同学。在公司一直有参与前端的基础面试,深感这个“梗”不是个玩笑。 然而,我觉得实际比例可能会更高,甚至很多面试官自己也未必真正掌握。因为大部分前端同学,可能不知道初始包含块的概念,或知道但对这个概念理解有误。 造成这种现象的原因主要有两方面,一方面是在介绍这个知识点时,网上有谬误的文章太多,国内外亦如此(MDN也名列其中),导致很多同学被误导(我一开始

    阅读全文...

  • CSS Grid中的陷阱和绊脚石

    Posted by : lon.y@qq.com on 2018年4月3日

    2017年3月,CSS Grid在几个星期内就被发送到Chrome、Firefox和Safari的生产版本中。很高兴,大家可以使用它来解决实际问题。 CSS Grid是一种不同的布局方式,在大家开始使用规范的时候,有很多常见的问题。这篇文章的目的是回答其中的一些问题,并且将会是Smashing Magazine中有关于CSS Grid一系列文章中的一篇。 为什么使用CSS Grid而不是CSS Flexbox? 在CSS网格布局在浏览器中可用之前,很多人都

    阅读全文...

  • 推荐15个 JavaScript 和 CSS 库

    Posted by : lon.y@qq.com on 2018年3月24日

    Tutorialzine的使命是让开发者与最新的Web开发发展同步。因此,我们每月都会精选一批最优秀的资源推荐给大家,相信这些资源你绝对值得拥有! ClarifyJS ClarifyJS可以让你串联一串方法,以任意顺序执行。通常的JavaScript方法是从左到右执行的,ClarifyJS可以让你改变它们执行的顺序。而且,通过选择是否让进程等待某个特定的异步方法完成还是执行后继续,也能控制异步方法。 Superstruct Superstruct提供了一种

    阅读全文...

  • CSS 布局解决方案(终结版)

    Posted by : lon.y@qq.com on 2018年3月21日

    前端布局非常重要的一环就是页面框架的搭建,也是最基础的一环。在页面框架的搭建之中,又有居中布局、多列布局以及全局布局,今天我们就来总结总结前端干货中的CSS布局。 居中布局 水平居中 1)使用inline-block+text-align (1)原理、用法 原理:先将子框由块级元素改变为行内块元素,再通过设置行内块元素居中以达到水平居中。 用法:对子框设置display:inline-block,对父框设置text-align:center。 (2)代码实

    阅读全文...

  • 50道 CSS 基础面试题(附答案

    Posted by : lon.y@qq.com on 2018年3月17日

    1 介绍一下标准的CSS的盒子模型?与低版本IE的盒子模型有什么不同的? 标准盒子模型:宽度=内容的宽度(content)+ border + padding + margin 低版本IE盒子模型:宽度=内容宽度(content+border+padding)+ margin 2 box-sizing属性? 用来控制元素的盒子模型的解析模式,默认为content-box context-box:W3C的标准盒子模型,设置元素的 height/width 属

    阅读全文...

  • CSS 变量让你轻松制作响应式网页

    Posted by : lon.y@qq.com on 2018年3月8日

    如果你之前没有听说过CSS变量,那么现在我将告诉你:它是CSS的新特性,让你能够在样式表中使用变量的能力,并且无需任何配置。 实际上,CSS变量能够让你改变以往设置样式的老方法: h1{ font-size:30px; } navbar > a { font-size:30px; } 而使用了CSS变量之后: :root { --base-font-size: 30px; } h1 { font-size: var(--base-font-size); }

    阅读全文...

  • 别天真了,第三方 CSS 并不安全

    Posted by : lon.y@qq.com on 2018年3月8日

    最近一段时间,关于 通过 CSS 创建 “keylogger”(键盘记录器) 的讨论很多。 有些人呼吁浏览器厂商去“修复”它。有些人则深入研究,表示它仅能影响通过类 React 框架建立的网站,并指责 React。而真正的问题却在于认为第三方内容是“安全”的。 第三方图片 如果我将上述代码引入我的文件中,即表示信任 example.com。对方可能会删除资源,给我一个 404,导致网站不完整,从而破坏这种信任关系。或者,他们可能会用其他非预期的数据来替代小

    阅读全文...