手机横屏和竖屏的代码(css3/javascript)

 

龙生   01 Aug 2016
View Details

让你变成优秀程序员的几个小习惯

作者Jeff Standen,有着21+年经验的软件开发者。 首先开发spike解决方案——这是我早期敏捷/极限编程所养成的习惯之一。spike解决方案是一次性原型,可以帮助你在投入大量时间和精力之前验证你是否走对路。 区别就在于原型,因为你遵循这样一个规则,在你完成研究之后,你最终会扔掉“spike”代码。所以允许你偷工减料,迅速行动,因为它不会出现在产品或代码审查中。 此方法有助于迅速发现设计的哪些部位尚不明确,而不必过早地尝试架构或设计决策。 致力于小而连贯代码块的版本控制——通过类似CVS/Subversion,每次提交都直接发送到服务器。做部分文件的提交并不简单。 随着Git的出现,只提交较大文件的若干行代码变得很容易,并且可以在push到远程代码仓库之前先本地rebase/merge提交。 有一次,我在工作于更大功能的时候,采用了小型增量提交,我的工作效率直线上升。这样做能够清空我的大脑以便于面对更重要的事情。 经常写代码——最近,我正工作于:一个基于Web的企业协作和自动化平台(PHP / MySQL),一个基于云的实时指标聚合器和使用循环哈希(Node.js/ Redis)的API,一个面向iOS app商店(Swift/ SpriteKit)的棋盘游戏,专门的基于URL的cronjob可替代基于web的SaaS服务(JAVA),等等。 用过大量框架和语言有助于我的抽象和算法思维。 我从工具,如Eclipse RCP、Tapestry和Hibernate中学到了很多伟大的经验教训,并用到我的PHP项目里。尤其是在2000年初,在有Java特征的企业生态系统用于PHP存在之前。我从Unity3d/C#学到了很多关于网络和面向消息的架构。 如果我只坚持单一平台和社区的话,就永远不会知道这些概念。 编写简单的代码——我以前习惯于写复杂的代码以作为对自己的挑战。而现在的挑战是要编写优雅且简单的代码——到一种每个人都觉得他们也能做到的地步(即使他们不能)。简单代码通常来自于若干次复杂代码的迭代。 引用Antoine de Saint Exupéry的话就是:“不是没有什么可添加,而是没有什么可消减的时候,才算是达到了完美。” 这也使得我们在长时间休止之后返回项目,以及鼓励其他人参与进来变得容易多了。 最后优化——我们很容易掉入试图比用户或计算机更聪明,并且预优化各种边缘情况的陷阱。关注帕累托法则(80%的效果来自于20%的工作)。写代码,运行代码,当必要的时候专注于最大的瓶颈。这也支持保持代码库的简单。 说“不要首先优化代码”并不意味着“编写粗糙的代码”。代码总是应该精益和优雅,没有必要画蛇添足,不要将一整天的时间用在挤压剩下的10%,但其实已经能够工作良好的一些东西上。不但工作效率会下降,而且还会引进更多复杂性,解决方案变得不那么可归纳,等等。 着眼于“最重要的事情优先”——总是有一些项目领域比其他的更有趣或更具挑战性。工作于那些有趣的东西总是比工作于那些必要的东西更有诱惑。 在攻克重要部分时,将有趣部分作为一种调剂,也就是说,两者都做一点也是可以。 因此,光从这一点上说,将大的问题分解成小问题的理念是不言自明的。每个人都懂。所以,我会通过计分若干“quick wins”来开启我的一天,这能让我更有冲劲和更专注(“quick wins”可以是任何东西,包括有趣又小型的挑战),然后我会首先冲向“最重要的事情”。 了解全栈——当我刚开始干这一行的时候,没有什么比等别人做完他们那部分东西,然后我才能继续我那部分工作更糟糕的了(设计师,后端人员,前端人员,数据库人员,服务器人员,等等)。 于是,当我2000年创办自己的软件开发公司的时候,我做了一个明智的决定,那就是涉猎全栈。我知道我不可能擅长所有东西,也不可能是最后唯一对所有一切负责的人,但我想要做终端到终端的原型,因为我没有耐心看过程。 每当我需要的东西触碰到我不懂的领域时,我会研究它。于是乎,我学会了服务器管理,数据库管理,设计,前端/后端开发,云架构等。 通过了解其他领域是做什么的,我才能写出包含它们需要的代码。 当然,其中的一些要点似乎并不是所谓的“小习惯”,但我向你保证,它们是小变化历经20年时间导致的结果。重要的行为变化并没有意义,更多的是关于我是如何频繁地练习这门技术(在过去10年时间中每年大概4000-5000个小时)。 所以,我的做法更像是去回答这个问题:“什么样的小习惯会导致更糟糕的软件和低效的生产力?”,然后反过来。 作者Ed Prentice,软件工程师 时间是宝贵的,所以要尽可能地节省时间。尽可能自动化。一旦时间成为一种商品,那么你可以实现下一个伟大的创新。 使用功能强大的IDE(如vim),并将其配置能为你做尽可能多的事情。力争单个命令Build/Test/Deploy/Run。 如果你发现自己常做某件事情,那么可以让它们在一个按键下发生,或者一次点击下发生。或者更好的是,让它们自动发生。 了解键盘快捷键和UNIX命令行。几乎所有的IDE都可以让你运行复杂的编译命令,甚至任意的终端命令——不但强大,并且可以为你节省大量的时间。 提问题,然后提更多的问题。如果有什么你不明白的事情发生了,那就问为什么。然后走开,研究替代方案,并提出来。一直问问题直到你可以详细地给下一个问为什么的开发人员解释。我时常感到奇怪为什么会有这么多开发人员不知道为什么,仅仅是因为觉得“它总是/曾是这样”。 通过提供更好的替代解决方案挑战现状——并且制定步骤实现。如果你的测试不完整,或每天/每周运行一次——那么成为本地的Continuous Integration大师——目的是为了有利于你的团队,并实现它。一旦你使用它并且它可以帮助你更好工作的话,那么让你的团队也使用它。 不要只是挑战别人,挑战自己。从来没有写过web应用程序?那么写一个。从未用过Python?用Python劫持无人飞行器。 拥有一些东西。创造一些东西。没有必是非要做技术项目,可以是一个事件,例如聚会或编程马拉松,也可以是一个游戏,一个网站,一个博客。 教一些东西。Java,公开演讲,写作,下棋,vim,网球。 成为一个杰出的人。拿到一个垃圾类/组件?修复好它。编写代码的正确途径。不在代码中走捷径。做出明智的决策,向你周围的人说明为什么你要做这个决定的利弊。总是改善代码。制定不需要花费1小时的待办事项表?Just Do It。 浏览你熟悉的Stack Exchange的话题——例如你喜欢的语言。当你发现什么新的东西的时候,尽快末位淘汰相关知识。知道C语言?什么是分支预测?这篇文章会告诉你——你要做的就是学习。 浏览你不熟悉的Stack Exchange的话题——好好学习,天天向上。 学会沟通。书面文字,呈现展示,解决问题,小却激烈的小项目,大型团队,小型团队。 文档化你的所有过程。你可以回头查阅你为什么做这些事情,以及依赖原先的解决方案去解决碰到的相似问题。这还有助于捕捉你可能会忘记的思维过程和关键的信息片段。我经常通过日志来回顾前几天的工作。 在你写之前文档化你的代码。使用系统图,类层次结构,流程图表,以展示说明你的代码将如何工作。如果有人提出建议——是的,他们会提出来的——那么你可以进行修改,这比已经写好了代码再去修改要容易得多。这是另一个我很少看到有人会做但却有着最负面影响的事情。 特定化。为新的东西制作图表,向大家展示。收集尽可能多的细节。确保每个人同意这个图表。如果有人提出了建议,那就补充/添加更正到图表。保持图表更新。 知道潜意思的偏见和男性特权。了解你是哪种MBTI和人格类型,并且更重要的是,要知道如何与其他性格类型更好地互动。了解情商。每个人都是不一样的,你需要知道如何与他们进行最有效和最有建设性的交互。 定期为团队做一些事情。带饼干。教魔术。培育一点文化,并鼓励其他人也这样做。赞美其他人的贡献。一支有凝聚力的团队是很难被击败的。 学习如何与人合作。我个人非常喜欢《The Pragmatic Programmer》的“stone snop”。 理解和使用别人的代码。如果你正在实现自己的XML解析器或或csv阅读器或git hook,那么你就是在重新发明轮子。 一旦你写了代码,并且它是有效的,通过测试的,那么回过头去整理一下吧。重新运行测试。再整理。每个类都应该有单一的职责,每个函数都应该只做一件事情。在大多数情况下,函数应该小于20行代码的长度。使用自文档的函数名和变量名。花时间整理你的代码以后将会10倍地回报给你和你的团队。 参与其中。承担责任。如果事情有不对的地方,那就解决它。如果最后期限临近了又想出了一个解决方案,那让其他人尽快知道。任何人都可以做到这一点,即使是最初级的开发人员。这要求对项目的蓝图,方向和截止期限有着大局观的认识——参与进来。保存好每天的工作内容! 和团队分享学到的经验教训(在适当的时候)。指出Java中finally块内部抛出异常的时候发生了什么?和大家一起分享。 出处:码农网 英文原文:What little habits made you a better software engineer? from:http://www.oschina.net/news/75725/habits-to-be-better-programmer

龙生   01 Aug 2016
View Details

在浏览器中体验 Ubuntu

Ubuntu 的背后的公司 Canonical 为 Linux 推广做了很多努力。无论你有多么不喜欢 Ubuntu,你必须承认它对 “Linux 易用性”的影响。Ubuntu 以及其衍生是使用最多的 Linux 版本。 为了进一步推广 Ubuntu Linux,Canonical 把它放到了浏览器里,你可以在任何地方使用这个 Ubuntu 演示版。 它将帮你更好的体验 Ubuntu,以便让新人更容易决定是否使用它。 你可能争辩说 USB 版的 Linux 更好。我同意,但是你要知道你要下载 ISO,创建 USB 启动盘,修改配置文件,然后才能使用这个 USB 启动盘来体验。这么乏味并不是每个人都乐意这么干的。 在线体验是一个更好的选择。 那么,你能在 Ubuntu 在线看到什么。实际上并不多。 你可以浏览文件,你可以使用 Unity Dash,浏览 Ubuntu 软件中心,甚至装几个应用(当然它们不会真的安装),看一看文件浏览器和其它一些东西。以上就是全部了。但是在我看来,这已经做的很好了,让你知道它是个什么,对这个流行的操作系统有个直接感受。 如果你的朋友或者家人对试试 Linux 抱有兴趣,但是想在安装前想体验一下 Linux 。你可以给他们以下链接:Ubuntu 在线导览。 出处:Linux中国 from:http://www.oschina.net/news/75720/cnome-maps-normal-use

龙生   01 Aug 2016
View Details

C#接收图片base64格式保存为文件

摘自:http://www.itnose.net/detail/6387947.html

龙生   29 Jul 2016
View Details

Nodejs接收图片base64格式保存为文件

base64的形式为“data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0。。。。”; 当接收到上边的内容后,需要将data:image/png;base64,这段内容过滤掉,过滤成:“iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0。。。”;然后进行保存。

龙生   29 Jul 2016
View Details

穿透的 div ( pointer-events )

pointer-events 是一個滿有趣的 CSS3 屬性,雖然主要是針對 SVG ,但其中幾個屬性應用在 div 上也是頗有意思。顧名思義,這是一個針對滑鼠事件的屬性,預設值為 auto,若值為 none,則可以穿越該元素,點擊到下方的元素。除了 auto 和 none,這是完整的屬性列表:pointer-events: auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inherit,除了 auto 與 none,其他都是控制 SVG 的屬性,若採用預設值,則 SVG 就是以 visiblePainted 來表現。 首先看到 pointer-events: auto,就是我們一般常見的,一個 div 被另外一個 div 遮住,就無法進行點擊或 hover 的動作,如下圖: HTML:

CSS:

這時候如果我們把 ybox 增加 pointer-events: none;,就會發現底下的 gbox 可以 hover 了! 至於其他的屬性,在這邊稍微做一些介紹,根據 這篇的解釋,可以知道其他屬性是這樣解釋: visiblePainted: 只適用於 SVG。元素只有在以下情況才會成為鼠標事件的目標:visibility 屬性值為 visible,且鼠標指針在元素內部,且 fill 屬性指定了 none 之外的值、visibility 屬性值為 visible,鼠標指針在元素邊界上,且 stroke 屬性指定了none 之外的值。 visibleFill: 只適用於 SVG。只有在元素 visibility 屬性值為 visible,且鼠標指針在元素內部時,元素才會成為鼠標事件的目標,fill屬性的值不影響事件處理。 visibleStroke: […]

龙生   29 Jul 2016
View Details

html5调用手机相机并压缩、上传

近日刚做的一个功能,要在app里使用内嵌页面进行图像的上传。 从功能上看,原生的实现应该是最好的。毕竟页面上所有的东西都隔着一个浏览器,所有的实现都要依赖浏览器提供的接口,不同的浏览器对接口的实现又有差异……到最后又会陷入兼容性的大坑! 吐槽归吐槽,但是折腾的劲头不能丢! 使用input file[camera]属性调用相机 简直So easy!

只需要这么一条简单的代码,在手机浏览器点击就可以打开相机了。 capture是什么?其实就是对打开方式的设置。

魅族MX5测试结果: 谷歌浏览器可以打开相机和摄像功能,其他方式均为相机、图库、文件管理器等混合选择项。 自带浏览器打开均为文件管理器。 由此说明此属性兼容性还是个问题。不过这并不能阻止我继续折腾下去! 图片压缩 在如今这个手机普遍千万像素的时代,一张照片动辄5M的大小。作为一个良心的开发者,我们是要为用户的流量负责的。 该怎么做?我也不知道。大家都在用canvas实现,我也就用了。

不管文件域是用何种方式打开的,都可以在 change 事件中获取到选择的文件或拍摄的照片。 创建一个FileReader对象,我们需要调用readAsDataURL把文件转换为base64图像编码,如data:image/jpeg;base64……这种格式。 onload是一个异步回调,当文件读取完执行该方法内代码。this.result记录读取结果,如果读取失败,该值为null。在这里进行图片压缩的具体操作。

创建一个Image对象,给src属性赋值为读取结果,同样在onload异步回调中编写处理图片的代码。 这里就要开始使用canvas进行图片压缩了。 首先是尺寸按比例缩放,然后把图片绘到画布上,最后调用toDataURL方法压缩图像质量。

代码里省略了一些校监操作,如文件类型约束和文件大小判断(小于一定值可以不压缩)。 最后就是把数据发送到后端的操作,这里就不说了。 Html5调用摄像头 通过以上的代码已经可以实现调用手机相机拍照、压缩、上传这一整套流程了。 不过在折腾的过程中也发现了一种调用摄像头的方法。注意,是摄像头!使用input调用的是相机。其中的差别就是摄像头是只捕获画面,相机还包括原生的一些拍照、设置等控件。 通过对摄像头的调用可以做很多有趣的事,比如拍照美化、滤镜等。可以说实现一个第三方相机是没问题的。 之前下载过一款安卓相机APP,不到100K的大小,可以实现拍照的一些风格化,也许就是Html5实现的呢。 需要用到的是 getUserMedia API,具体的实现这里就不贴了。 from:http://www.imys.net/20150916/webapp-input-use-camera.html

龙生   29 Jul 2016
View Details

整理时下流行的浏览器User-Agent大全

总结整理时下流行的浏览器User-Agent大全 此文章转至:http://www.360doc.com/content/12/1012/21/7662927_241124973.shtml 用于学习   一、基础知识篇: Http Header之User-Agent User Agent中文名为用户代理,是Http协议中的一部分,属于头域的组成部分,User Agent也简称UA。它是一个特殊字符串头,是一种向访问网站提供你所使用的浏览器类型及版本、操作系统及版本、浏览器内核、等信息的标识。通过这个标 识,用户所访问的网站可以显示不同的排版从而为用户提供更好的体验或者进行信息统计;例如用手机访问谷歌和电脑访问是不一样的,这些是谷歌根据访问者的 UA来判断的。UA可以进行伪装。 浏览器的UA字串的标准格式:浏览器标识 (操作系统标识; 加密等级标识; 浏览器语言) 渲染引擎标识版本信息。但各个浏览器有所不同。   字串说明:   1、浏览器标识 出于兼容及推广等目的,很多浏览器的标识相同,因此浏览器标识并不能说明浏览器的真实版本,真实版本信息在 UA 字串尾部可以找到。   2、操作系统标识 3、加密等级标识   N: 表示无安全加密 I: 表示弱安全加密 U: 表示强安全加密   4、浏览器语言 在首选项 > 常规 > 语言中指定的语言   5、渲染引擎 显示浏览器使用的主流渲染引擎有:Gecko、WebKit、KHTML、Presto、Trident、Tasman等,格式为:渲染引擎/版本信息   6、版本信息 显示浏览器的真实版本信息,格式为:浏览器/版本信息   浏览器User-Agent的详细信息   PC端:   safari 5.1 – MAC User-Agent:Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_8; en-us) AppleWebKit/534.50 (KHTML, like Gecko) Version/5.1 Safari/534.50   safari 5.1 – Windows User-Agent:Mozilla/5.0 (Windows; U; Windows NT 6.1; en-us) AppleWebKit/534.50 (KHTML, like Gecko) Version/5.1 […]

龙生   29 Jul 2016
View Details

Uber 从 Postgres 切换到 MySQL

Uber工程师在官方博客上描述了他们为什么要从 Postgres 切换到 MySQL 数据库。Uber的早期架构是由 Python编写的后端应用构成,使用了 Postgres 数据库。但此后,Uber的架构发生了显著的改变,转变到了微服务模型和新的数据平台。以前他们使用 Postgres,现在则改用了基于 MySQL 的数据库分片层。Uber工程师称他们之所以切换到Schemaless和其它基于 MySQL 的后端服务,最主要的原因是Postgres 数据复制效率低下,Postgres更新已有行的效率低于 MySQL,Postgres需要重写每一个行索引,而MySQL只更新改变的索引。 相关链接 MySQL 的详细介绍:请点这里 MySQL 的下载地址:请点这里   from:http://www.oschina.net/news/75638/uber-mysql-migration

龙生   29 Jul 2016
View Details
1 259 260 261 432