介绍几个开发前端动画不得不学的动画库

1. AniJS.js

基于 CSS3 的动画库

2. Velocity.js

Velocity 是一个简单易用、高性能、功能丰富的轻量级 JS 动画库。它能和 jQuery 完美协作,并和 $.animate() 有相同的 API, 但它不依赖 jQuery,可单独使用

3. vivus.js

继续阅读介绍几个开发前端动画不得不学的动画库

纯css3实现思维导图样式

思维导图又称之为脑图

他大概是这个样子滴:

 

网上大部分实现有用d3.js实现,有手动用svg实现,最近工作需要,本人很懒,在琢磨看看用css3能不能实现呢?

答案是肯定的 下面上代码

html代码


<div class="mainBody" id="node1">
    <h1>node1</h1>
    <div class="oneBody">
        <div class="mainBody">
            <h1>node2</h1>
            <div class="oneBody">
                <div class="mainBody">
                    <h1>node3</h1>
                    <div class="oneBody">
                        <div class="mainBody">
                            <h1>node4</h1>
                        </div>
                        <div class="mainBody">
                            <h1>node4</h1>
                        </div>
                        <div class="mainBody">
                            <h1>node4</h1>
                        </div>
                    </div>
                </div>
                <div class="mainBody">
                    <h1>node3</h1>
                </div>
                <div class="mainBody">
                    <h1>node3</h1>
                </div>
            </div>
        </div>
        <div class="mainBody"><h1>node2</h1></div>
        <div class="mainBody"><h1>node2</h1></div>
    </div>
</div>

css3代码


.mainBody{
    display: -webkit-flex; /* Safari */
    display: flex;
    flex-direction: row;
    justify-content: flex-start ;
}
.sbody{

}
.oneBody{
    display: -webkit-flex; /* Safari */
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
#node1{
    /*height: 200px;*/
    margin-top: 100px;
    margin-left: 100px;
}
h1{
    line-height: 100%;
    display: -webkit-flex; /* Safari */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

实际效果如图:

哦有点简陋····不过样式什么的你想怎么搞就怎么搞喽,其中节点的增加,你只需要html中增加相应的节点代码就行,高度位置都是自适应的,感谢css3的 flex,你们活在这个时代是幸福的

Git 原理入门

Git 是最流行的版本管理工具,也是程序员的必备技能之一。

即使天天使用它,很多人也未必了解它的原理。Git 为什么可以管理版本?git addgit commit这些基本命令,到底在做什么,你说得清楚吗?

这篇文章用一个实例,解释 Git 的运行过程,帮助你理解 Git 的原理。
继续阅读Git 原理入门

三角函数在前端动画中的应用

我是个很懒的人,开发过程中经常有意无意地刻意避开数学相关的知识,你也知道解数学题非常枯燥无趣。平时写动画也尽量使用 css3 来实现,timer-function 随意选用,最多也就调一下 cubic-bezier,找到看着舒服的就行。但是怎样让动画更顺滑,写出更贴近自然的动画,说实话以前我没怎么考虑过。

每次当动效设计师提出,能不能这样那样的时候,我会理所当然地予以否决。所以有很长一段时间,我非常羡慕那些能用 canvas 绘制很酷炫的动画的程序员。

sad man in sine

 

先这样吧,又不是不会动。

继续阅读三角函数在前端动画中的应用

Google 的后端工程师都开始写小程序了?反编译 “猜画小歌”看看

 

今天 Google 在微信发布了一款小程序“猜画小歌”,都已经刷爆朋友圈了。没想到谷歌重返中国第一个应用竟然是小程序,而且还是基于 AI 的小程序。还没体验的可以扫码体验一下。

逻辑很简单,每局给你一个新的词,让你画对应的图案,我感觉应该是将你画的图,向提供的关键词去靠拢,很多其实沾一点边的图,都能识别上,产生了很多灵魂画师。我今天体验了一下发现根本停不下来,根本停不下来,忍不住在群里分享一波。

反编译小程序

在知乎上已经有人将“猜画小歌”反编译出来,发现目录结构特别具有 Java 工程师的风格,非官方消息也说到,是一名后端开发工程师自己独立完成的小程序开发任务。

感受一下目录风格:

反编译者还发现很多命名方式都是中英文混编以及命名规范不一致,还专门吐槽了一下。

还发现了例如一些引入第三方库不规范的例子,例如引入了 cryptojs 来作为接口加密,但是其实只用到了 SHA1 加解密。

知乎用户 @Kumakuma 还爆料称,此小程序就是后端工程师写前端,并且是一个人完成的,不过因为时间紧任务重,很多地方都不规范,后期应该会加强代码审核,也就不会出现这样的问题了。

“猜画小歌”隐藏功能

在反编译的文章中,还发现了很有意思的点,其实它还隐藏了很多有意思的功能,光小程序的页面竟然就有 14 个。

能看出来,确实有很多隐藏的页面,从反编译的效果来看,最少会有对战页面、注册码页面、打赏功能等等。

按现在的热度和传播效果来看,这个游戏的方向算是正确的,后续应该还会增加一些多人互动方向的新玩法,很值得期待。

灵魂画师会带坏 AI?

就如前面说的,“猜画小歌”就是一款 AI 小程序,它的匹配规则还是很宽泛的,所以很多灵魂画手就上线了,基本上靠一点边“画作”就可以被识别出来。

但是不必要担心,上线之前 AI 本身就已经提前喂了大量的数据给模型,所以现在这点用户量,并不会对 AI 的模型有任何冲击。

不排除之后用户量暴涨之后,会对模型造成冲击,不过话说回来,如果是中国人自己教的 AI,是不是更适合中国人的画风呢?

我想,自己教的孩子,自己一定喜欢。

“猜画小歌”的意义

本身 Google 志不在游戏,更多的应该是想通过游戏的形式,让大家了解 AI,毕竟 Google I/O 已经是 AI First 了。

我想 AI 发展到最后,基础设施会越来越完善,准入门槛会越来越低,发展到最后肯定就是拼创意、想法和数据。

AI 没有那么神奇,也没有那么智障,更多的是可以做到一些传统代码做不到的事情,可以解放很多工作,非常值得期待。

今日我的博客加入了一个新功能,阅读量统计···pdf电子书-css揭秘-下载

今日我的博客加入了一个新功能,阅读量统计···

感觉瞬间棒棒的

嗯,这个内容有点空洞,放出一个css资源

高清pdf电子书 css揭秘

快去下载

链接: https://pan.baidu.com/s/1q10_ikubVGTDhWNTIDwcjQ 密码: 5rf9

 

好书推荐–Node.js调试指南

购买地址大家自己百度吧!

序言

笔者和同事在过去一年多主要把工作精力放在如何提高Node.js 服务端的性能、稳定性和基础设施搭建上,随着公司业务量的快速增长,我们遇到了各种各样的挑战,也取得了不错的成绩:从起初啥都没有,到后来建立了比较完善的日志、监控和报警系统;从起初遇到问题不知道如何下手,到后来在遇到问题时能及时发现并定位问题。总之,付出得到了回报。
笔者曾将在这一段时间内遇到的调试、调优过程整理并记录成文章,发表在公司的知乎专栏上,本书就是在其基础上修改、补充和润色而成的,算是笔者对这几年在Node.js 开发中进行调试的经验和思路的总结,笔者希望授人以鱼,亦能授人以渔。
本书概要
本书从CPU、内存、代码、工具、APM、日志、监控、应用这8 个方面讲解如何调试Node.js,大部分小节都会以一段经典的问题代码为例进行分析并给出解决方案。
第1 章讲解CPU 相关的知识,涉及各种 CPU 性能分析工具及火焰图的使用。
第2 章讲解内存相关的知识,例如Core Dump 及如何分析 heapsnapshot 文件。
第3 章讲解代码相关的知识,例如如何避免在代码层面写出难以调试的代码,并涉及部分性能调优知识。
第4 章讲解工具相关的知识,涉及常用的Node.js 调试工具和模块。
第5 章讲解APM(Application Performance Management)相关的知识,例如两个不同的应用程序性能管理工具的使用。
第6 章讲解日志相关的知识,例如如何使用Node.js 的async_hooks 模块实现自动日志打点,并结合各种工具进行使用。
第7 章讲解监控相关的知识,例如如何使用 Telegraf + InfluxDB + Grafana 搭建一个完整的Node.js 监控系统。
第8 章讲解应用相关的知识,给出了两个完整的Node.js 应用程序的性能解决方案。
本书定位
本书并不适合Node.js 初学者,适合有一定Node.js 开发经验的人阅读。笔者倾向于将本书定位成参考书,每一小节基本独立,如果遇到相关问题,则可以随时翻到相应的章节进行阅读。
开发环境
MacOS 或 Linux(Ubuntu@16.04 64 位),Windows 用户请在使用虚拟机安装Ubuntu 后进行操作。
Node.js@8.9.4。
继续阅读好书推荐–Node.js调试指南

前端工程师一生必须拥有的一本工具书-JavaScript高级程序设计

为什么这样说呢,因为这本书在你不同的阶段重读都会有新的体会,作为工具书,它提供了足够的标准,作为提升,它也提供了很多高级用法

博主特别为大家提供了高清pdf,非扫描版

快去下载
继续阅读前端工程师一生必须拥有的一本工具书-JavaScript高级程序设计

前端开发面试题搜集大全–刷完能进bat

HTML

  • Doctype作用?标准模式与兼容模式各有什么区别?
      (1)、<!DOCTYPE>声明位于HTML文档中的第一行,处于 <html> 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。
    
      (2)、标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中,页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。
    
  • HTML5 为什么只需要写 <!DOCTYPE HTML>
       HTML5 不基于 SGML,因此不需要对DTD进行引用,但是需要doctype来规范浏览器的行为(让浏览器按照它们应该的方式来运行);
    
       而HTML4.01基于SGML,所以需要对DTD进行引用,才能告知浏览器文档所使用的文档类型。
    
  • 继续阅读前端开发面试题搜集大全–刷完能进bat

写给那些想转行前端,或者犹豫是不是在前端干下去的同学

入前端断断续续的在这行也10年有余,当初因为上大学阴错阳差的当了网络部长,由于导员想法颇多,给网络部很多任务,其中就有做学校的网站,刚入大一,除了数理化什么都不会,只能硬着头皮自学起来,幸好 有一个学长教了一些,网络部长还有一些同学,学的时候是一起学习,但是其他人都兴趣缺缺,但是我身为网络部长如果学不会都话那做网站都任务就要泡汤了,所以也许是这一种责任,或者是天然的兴趣促使自己学习下去,刚入行这其中会碰到很多各种各样的问题,有些问题根本无从解决,毕竟这方面的知识一片空白,我想这也是很多同学刚开始都会碰到的情况,也是入行的拦路虎,会拦下90%想要入行的同学吧

所以对于想入行的同学我给的建议是给自己一个不得不去学习前端知识的目标,比如帮助朋友亲戚去做一个网页,或是给心爱的妹子做一个网页的生日祝福,这样你学习下去的动力就有了,比自己枯燥的去看教程要有趣的多,目标明确的多

当入坑了之后,很多同学又会有一些困惑,比如不知道方向是什么,该学一些什么才能达到工作的要求,或是已经工作了不知道怎么提高,成为大牛,其实在我看来单纯的为了工作挣钱而没有骨子里对于前端的兴趣是不能成事的,也许会有意外,但是我觉得对于大多数人来说是适用的

请各位前端同学自行体会,当遇到了前端的难题是突然兴奋,瞬间来了精神?当看到一个新的轮子是特别感兴趣还是避之不及?当有一个新的需求发现需要学习新的知识是不是迫不及待要去完成?如果你没有这种感觉,那么我可能悲伤的告诉你,你也许不适合这行,请转行,或者维持现状吧

前端相对于其他it技术来说,需要很多能力,也会遇到很多莫名其妙的问题,如果没有一种自我驱动,自我学习的能力那么肯定不会有所建树。能做一个好的前端开发肯定能成为一个优秀的后端开发,但是一个好的后端不一定能成为好的前端开发,个人体验勿喷

如果你也有困惑给我留言,知无不言,一起提高