stuxt.github.io
stuxt.github.io copied to clipboard
stuxt
My blog site!
Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。 随着圈内技术发展，工作需要，慢慢的接触和使用了babel，特将学习记录记录在此。
# 揭示不为人知的CSS > 本文转载自：[众成翻译](http://www.zcfy.cc) > 译者：[小天同学](http://www.zcfy.cc/@stuxt) > 链接：[http://www.zcfy.cc/article/3147](http://www.zcfy.cc/article/3147) > 原文：[https://madebymike.com.au/writing/the-invisible-parts-of-CSS/](https://madebymike.com.au/writing/the-invisible-parts-of-CSS/) 如果你在日常工作中使用CSS，那么你的主要目标很可能集中在使事情看起来是正确的。最终得到的正确结果远比如何实现更重要。这意味着相比正确的语法和视觉效果我们更少关注CSS的实现原理。 你可能还没有意识到，但CSS的视觉效果通常是操纵隐藏属性的间接结果。一些CSS属性（如 `background-color`）和你看到的视觉效果就有显然的直接关系。而其他的（比如`display`）对我们许多人来说仍然含糊不清，因为结果似乎高度依赖于上下文。 我怀疑很多开发者都不能简单的描述当设置了`display: block`之后实际上做了什么。最多你可能只是直观地了解这个属性是如何工作的。没关系，你可以在不了解基本原理的情况下，对CSS有很好的争议。虽然，你知道解决问题的方案，但是你却不一定真的了解问题。 你过你正式上面说的那样，没关系。刚开始我也是只知道怎样使用CSS，不久前才了解CSS的工作原理的。我想这并不能让你感觉好一点，但至少你并不孤单！ 虽然CSS的基本特征是复杂且有意提取的，但是我们不能因此一点不去了解它。对于许多人来说，诸如盒子模型、级联和特殊性等概念是我们所熟知的。虽然他们经常被曲解，但是知道这些工作原理有助于我们编写更好的CSS。 CSS其他的隐藏黑科技也是如此。学习理解这些黑科技的问题就是学习的壁垒很高。它常常感觉好像什么都不能单独解释。在理解工作原理中最小的部分之前，您都需要了解所有的内容。 正因为如此，我想试着揭示CSS的这些隐藏黑科技部分，只介绍涉及你需要知道的部分，并希望以逻辑顺序解释该过程，以便你更好的理解CSS真正的工作原理。 这是一篇很长的文章，所以如果你想跳转直接看其中的一部分，我整理了一份友好的目录导航： * [渲染过程概述](#overview-of-the-rendering-process) * [级联](#cascade) * [盒模型](#the-box-model) * [填充区域](#fill-area) * [动态宽度](#width-auto)...
因为大部分的技术都是兴起于国外，所以要想学习先进的技术和最新最流行的技术的话就得阅读国外的文章，有时候阅读起来确实蛮费时间的（毕竟English is poor）。 所以，就想既然花时间阅读了一篇文章，不如就顺带着把看过的文章翻译成中文，这样其他人再看这篇文章的时候不至于又重复了一遍我之前经历过的痛苦。 于是，就基本坚持去翻译我看的国外的文章，这不仅是一种坚持，也是一种学习，是一种成长。通过翻译可以对文章的理解更加的深入，而且翻译的同时还可以提高自己的词汇量和英语水平，还能让自己的表达能力得到提升。 这么一件，一举三得的事情，何乐而不为呢。
# 编写模块化的CSS（第三部分）—CSS文件组织结构 | Zell Liew > 本文转载自：[众成翻译](http://www.zcfy.cc) > 译者：[stuxt](http://www.zcfy.cc/@stuxt) > 链接：[http://www.zcfy.cc/article/3048](http://www.zcfy.cc/article/3048) > 原文：[https://zellwk.com/blog/css-architecture-3/](https://zellwk.com/blog/css-architecture-3/) 在之前两篇文章中我们已经讨论过如何使用BEM和Namespace来编写模块化的CSS。这篇文章中，我想避开把CSS选择器作为CSS文件结构和组织的依据的方法。 如果你思考过关于什么是文件组织的最佳实践，或者怎样能够在项目目录中更容易的找到你要找的CSS文件，或者一个文件应该是多大或者多小合理等问题，那么这篇文章就是为你写的。 让我们先看下你一般组织资源的两种方法。 ## 你可以使用两种方式来组织你的资源。 本文中我所说的资源，是指CSS文件和JS文件。我们不能忽视他们两种之间的任何一种，特别是在今天这样的互联网环境下。 有两种主流的存储CSS文件和JS文件的方式。 **第一种** 是根据CSS和JS不同的文件类型存储在不同的文件夹里。这是一种大多数开发者所习惯的传统方式。如下所示： ``` - project/ |- js/ |- sass/ ```...
# 初探gulp[学习笔记1] > 2016-02-16 小天同学 gulp是一个很方便的自动化构建工具，可以增强你的工作流程！同类的工具还有grunt等。但是gulp是一种基于流的自动化构建工具。 ### gulp的主要优势为： 1. 易于使用 通过代码优于配置的策略，Gulp 让简单的任务简单，复杂的任务可管理。 2. 构建快速 利用 Node.js 流的威力，你可以快速构建项目并减少频繁的 IO 操作。 3. 插件高质 Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作。 4. 易于学习 通过最少的 API，掌握 Gulp 毫不费力，构建工作尽在掌握：如同一系列流管道。 ####...
昨天D2回来困到不行，回到家洗洗睡了，今天翻看知乎上大家对于D2的吐槽，有人说是产品发布会，有人说是在秀轮子而且修完还不给我们玩，也有人说不虚此行的。我也谈下我的感受吧。 昨天我大概听了7场分享，由于昨天早上才赶到杭州，所以第一场关于fusion的分享听的不是很全面，但是今天 远舟在群里收集了一把邮箱，然后每个人都发了一封邮件，关于昨天的分享的内容和ppt。 **1/Fusion Design-解构设计，抽象工程** > Fusion 不仅是一套涵盖多端、多品牌、可配置的组件库，并重新定义了 “体验工程” 的工作方式。她对感性和艺术性工作进行解构，对工作流程和工程能力进行抽象，形成体系化的解决方案，赋能自身和业务方，真正实现跨团队的设计与组件复用，是前端、 UED 工作方式突破和创新！ 这虽然是阿里内部的一个技术项目，但是这个实践的分享对于我们日后的工作方式也许会有一定的指导意义，让设计师和开发者之间的协作方式更加高效，同时也让我们能够跳出我们平时工作的角度，跟着分享一起从一个更高的角度去审视我们的工作和工作方式。QA环节貌似大家最关心的就是这个项目什么时候开源，看到一个让我们眼前一亮的东西也许我们都希望能够体验或者在我们的工作中使用，但是我觉得这个项目的思考方向比技术本身更值得让我们去思考和学习。 **2/前端服务化：通向零成本开发之路** > 前端开发经常需要面对许多看起来简单重复的工作，比如运营页面、内部平台、数据报表等等，我们开发了 FreeFE 系列平台，它使得这些重复简单的工作都能通过可视化操作和配置来完成，极大降低了人力成本，并且明显提升了项目质量，提升了内部工作效率。 前端服务化，其实这个思路和fusion的方向时一致的，都是为了减少协作成本提高开发工作效率的一种思考和实践。这个也许做起来会更加有难度，因为不同的场景和定制化的需求会使得做一个全面的服务平台更加点复杂，但是这个做的却是比较彻底的。这个思路很多的建站工具很像，让学习的成本很低就可以完成开发的目的。这个话题是很好的一个话题，但是整个分享听下来却像是在汇报工作一样，都是在用数据证明这个平台对于公司的各方面的提升，反而更应该细致的分享一下一些实际的设计和开发中前端的角色，我相信大多数同学都是去听技术的，对于那些数据反而不是那么的关心。 总结下：很好的一个话题和方向，但是分享的效果却不是很理想。 **3/微信小程序解决方案** > 今年11月初，微信小程序开始公测。小程序是一种新的开放能力，开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播，同时具有出色的使用体验。那么在小程序的开发过程中有哪些挑战？ 《wafer》 微信小程序全栈解决方案，和您一起探索。 这个本来抱着很大的期望来听的，从这场的人数可以看出来，大家也许对这场都抱有了很大的期望，但是只能说套路太深啊。关于小程序只讲了一些官方文档中也有的内容，反而主要是讲后端通信和架构，主要就是为了引出硬广 wafer的一款产品。其实一整天停下来，只有这个我觉得算是产品推广，因为其他的一些实践项目，它们都是一些对于前端发展的思考和优化的项目，是值得我们去学习的，而这个就是一个为了借小程序推广产品的分享。本来以为这个分享会是微信小程序团队的同学，最后发现缺是腾讯云的，QA也是各种不知道和不了解。总体来说有种被骗的感觉。 **4/蚂蚁财富的 BFF 实践**...
# Web 开发入门指南 > 时间：2015-05-11(翻译时间：2016-01-19) 作者：JESSICA LORD 翻译：小天同学 > > 原文链接：[http://jlord.us/blog/getting-started.html](http://jlord.us/blog/getting-started.html) 有很多web开发必须的在线资源，可以学习如何开发网站或者制作web apps。我肯定有很多我还没有看见的好的资源，但是我一直希望能抽时间收集整理我发现的有用的或者很好的资源。希望我简短的介绍能对于刚入门的你有所帮助。 ### 通用的：在任何事情上寻找答案  可能是你不是你第一个遇到这样的错误或者问题在某些时候，这是极好的！Google搜索是每一个开发者最好的朋友了。 我们也能从下面两个地方找到我们喜欢的答案： - [Mozilla Developer Network](http://mdn.com/) Mozilla上面几乎有所有一切的文档记载 - [Stack Overflow](http://stackoverflow.com/) 和你有同样问题的人就是在这里得到帮助的 ### 通用的：前端和后端 Web浏览器（像...
# 2016年提高你代码质量的四种方法 > 时间：2016-01-09 作者：Dudley Storey 翻译：小天同学  前端工程师常常被困在魔鬼和一片蓝海之间:面对不断变化的技术和各种各样的工具,而又不想改变熟悉舒适的老习惯。 但是如果我们固步自封，又很难取得进步。然而取得进步的关键是经常反思我们之前做事的方式方法：改变那些阻碍我们进步的习惯，采用新的方式方法来提高我们的效率、创造力并享受这一过程。为此，这里我们讨论四种方法来提高你2016年的工作和生活。 ### 一、审查你的代码 审查是可能在任何的一个过程中，不管是检查代码一致性还是检查可能出现的错误。更广泛的说，审查代码使其符合一个共享约定的命名、间距和样式等。在团队中更是非常宝贵，因为大家同样代码风格的代码会更加容易共享和整合，使团队协作的效率更高。即使你是一个人的这种方法同样是有用的：采用一致的代码风格能更大程度的复用你之前的代码。 审查可以参考很多不同的形式： ##### 1.HTML 对于HTML开说，正式的Lint就是本质上的验证，也可能是团队约定的验证：例如，使用团队约定的tab缩进代码的标准来审查HTML代码。这也许能解决使用HTML5的语义标签（如：``和``标签），而不是一般的``标签，使得在正文中使用正确的排版。 ##### 2.CSS 对于CSS的Lint也有很多批评的声音；但是好消息是很多预处理器，比如Sass，已经（或者可以整合）包含Lint工具了。CSS Lint的范围可以从传统问题（属性/值对分离，缩进，按字母顺序排序）到兼容性问题（CSS属性和值应该继续接受保持浏览器兼容性的前缀）；在高端用法中，CSS Lint还集成了面向对象风格CSS开发系统的命名规范，比如BEM。 ##### 3.Javascript Javascript代码Lint工具的范围是很强大的，比如： [ESLint](http://eslint.org/)。 如同刚开始任何一个新习惯一样，刚开始的时候采用Lint可能会降低工作效率，但是要想快速的得到投资的回报，关键是制定一系列可管理的规范并坚持这个规范。 ### 二、写工作日记 工程师往往如此忙碌的Hack代码，进而让他们理所当然的认为一年中自己取得了不错的成绩。不幸的是，如此的忙碌到头来也不可避免的会让我们忘记一些我们已经取得的经验。为了不忘记我们的工作中的经验，我们应该总结我们在开发中取得的经验并记录下来。最好的方法就是写博客：在社区分享你的工作，但是很多工程师不愿意这样做，因为要写一个好的博客文章要花费大量的时间，而且也不是每个人都想把自己的工作公开出来的。但是也存在很多其他的选择：你可以将你感觉重要的代码保存下来作为依据，保存在一个简单的博客平台上，比如像[CodePen](http://codepen.io/blogging/)提供的产品。...
# jQuery插件Roundabout的中文用法介绍 > 时间:2016-01-08 作者:Fred LeBlanc 翻译:小天同学 ### 一. 移动元素 Roundabout是一个jQuery插件，它可以把静态结构的HTML元素变成一个可以高度可定制的交互圆形区域，然后静态元素会实现360循环播放的效果。 （现在，不仅可以是圆形还可以是很多种形状这样的效果！） 经过简单的配置之后，Roundabout就可以作用在有序列表ol和无需列表ul上；而且经过一些快速配置之后，还能使嵌套元素产生效果。 Roundabout是在BSD许可下发布的。如果你不知道BSD什么意思的话，你可以在源代码中找到全部许可证。赶快行动吧！ 3月13日更新，对于Roundabout V1.1版本更新的介绍： 1. 现在所有的元素值都存储在jQuery的数据方法中，并不再被添加为属性。 2. 增加了一个新的属性`reflect`，这个属性可让元素在相反方向上移动。 3. 修复了一个由于`roundabout_animateToNextChild` 和`roundabout_animateToPreviousChild`导致的在某些时候不能移动的问题。 我已经尽我最大的努力检查本版本中的错误，但如果你发现了错误，请尽快的告诉吴！我会修复更新。 ### 二. 要求和附加组件 Roundabout需要依赖jQuery 1.2.3+，1.3.x或1.4.x以上的版本。并且搭配以下的插件效果会更好： -...