原稿出处,原来的书文出处

2019-09-23 作者:小鱼儿主页高手论坛   |   浏览(138)

File杂谈——拖拽上传前传

2015/07/24 · HTML5 · 拖拽上传

原文出处: 百码山庄   

在《File杂谈——初识file控件》一文中,我们已经对file控件有了初步的了解,并且对制作一个视觉和体验一致的file控件做了较为详细的说明,今天我们继续了解file控件的更多特性,并延伸出更多。

是时候再提web标准

2016/07/06 · 基础技术 · WEB

原文出处: 灵感(@灵感_idea )   

用手机访问本地环境的利器ngrok

2015/08/11 · HTML5 · 4 评论 · ngrok

原文出处: 吕大豹   

我们在调试移动端页面,尤其是调试微信页面的时候,会遇到这样的情况,手机连着公司的wifi,开发环境(台式机)插着公司的网线,我们要用手机来访问开发环境下的页面。这个时候,如果网线和wifi是在同一个网段,那么直接在手机访问电脑的ip就可以访问到我们搭在本地的web服务。但是,很多时候,公司的网络并不是这么架设的,wifi和网线不在一个网段,那么,通过上述方法就无法访问到了。

有时候调试必须在手机上进行,在chrome下的模拟无法满足。这时候怎么办呢?之前我采取的是这样的办法,电脑上插一个360wifi(插USB孔的那种),然后共享出热点,手机连接到这个热点上网,就可以访问到开发环境了。如果需要查看http请求,在电脑上打开fiddler,设置一个代理,然后在手机上设置wifi的代理为fiddler,(端口默认是8888)。这样来自手机的请求就会被fiddler捕获到,你就能使用fiddler的强大功能来调试代码了。

上面这个办法挺方便的,但是需要一个小小的硬件,360wifi。你可以买一个,非常便宜,百度也有相同的产品。那如果我们手边没有这个硬件可怎么办呢?接下来该主角出场了,那就是ngrok。

ngrok是个什么玩意呢?其实它就是一个反向代理,我们机器上运行起这个服务后,它可以把本地的一个端口代理到公网。代理到公网是什么概念?公网啊,那就是大家都可以访问到了,没有任何网络限制。当然,我们的测试机,连接到任何网络下的手机也是可以的了。

然而不幸的时,ngrok架设在美国,已经被我们伟大的祖国给墙掉了。但是!一位良心网友在国内架设了一台服务器,我们可以任意使用,鼓掌!

废话说了这么多,我们来看看ngrok到底怎么使用呢?其实是相当简单的。

一、下载相关文件

首先,从这位仁兄架设的网站上(

二、运行服务

下载后的两个文件,我们随便找一个目录放好就行,例如,我放在D盘,这样就行了:
图片 1

然后,打开cmd终端,输入如下命令来启动服务: ngrok -config ngrok.cfg -subdomain lvdabao 80

用-config参数来指定配置文件,-subdomain指定访问的子域名称和本地的端口,出现以下界面,说明启动成功了:

图片 2

注意一点,这个子域名称是可以随意起的,但不能与别人的重名,因为这个名称是你的代理的唯一标识,之后用

三、进入调试界面

把服务启动起来还不够,我们的最终目的是要调试呀,我们得能捕获到http请求才行。要实现这个也相当简单,因为ngrok已经为你准备好了。真是相当贴心啊~

请看上面服务运行起来后的信息,有一项 Web Interface 127.0.0.1:4040 ,我们直接访问它就可以进行调试了,在你本地浏览器输入这个地址,试试看吧。

图片 3

很炫酷有没有,你可以看到http请求头和返回的内容,你需要的都有了。

而且,还有一个更好用的功能,看到那个Replay按钮了吗,点击它可以手动再发起一次你选中的请求,简直不能更赞,这样我们调试某个数据接口时,也省了老去手机上刷新页面了,尤其是调试微信页面,不必每次都去刷该死的二维码了。

这个利器的基本用法就介绍到这里,能满足我们开头提出的需求了。其实它还有更强大的功能,有兴趣的可以FQ去官网查看文档。最后再次为国内的这位仁兄点赞,大家也可以去他搭建的网站上面查看相关资料:

2 赞 5 收藏 4 评论

图片 4

Web 开发 17 年的所见所得

2017/07/10 · 基础技术 · WEB, 开发建议

原文出处: Daniel Khan   译文出处:众成翻译/myvin   

新增属性

在HTML5到来之前,绝大多数情况下使用file控件,我们前端工程师需要的有用信息都只能通过value属性获得的文件名字符串来获取(比如:文件类型、文件的直接名称等),这个很不方便,多文件上传的时候就更加麻烦了。另外,我们想不通过其他手段获取上传文件的大小更是一种奢望。

不过,好在这一切并没有那么糟,随着HTML5的到来,file控件上新增了files属性。该属性包括了file控件选择的文件对象集合,每个文件对象包含了当前文件的基本信息(类型、名称、大小)等,这样一来我们再也不用使用正则啊,字符串拆分啊,等等麻烦的方法去获取我们想要的信息了。下面我们在Chrome的控制台看下files属性的结构。我的测试方法是这样的:

首先,使用Chrome浏览器随便打开一个网页,然后F12调出开发工具,接着在Console中输入:

JavaScript

document.body.innerHTML = '<input type="file" id="J_File">'; var f = document.getElementById('J_File'); f.onchange = function() { console.log(this.files); };

1
2
3
4
5
document.body.innerHTML = '<input type="file" id="J_File">';
var f = document.getElementById('J_File');
f.onchange = function() {
    console.log(this.files);
};

这时页面会被替换成一个file控件,点击选择一个或多个(多个需要在input标签上增加multiple属性)本地文件,这时change事件将会被触发,控制台将会输出一下数据:

图片 5

显而易见,files属性的值是一个FileList类型的对象,它和数组类似,同样拥有length属性,而且我们也可以直接使用循环去获取每一个文件(File)对象(例:取第一个文件就是files[0])。我们继续看每个文件对象中包含的信息,我们常用的name、size、type等应有尽有了,突然感觉好高大上。

然而,我要告诉大家的是,我们也不能肆无忌惮的使用file控件的files属性,因为它在IE9及以下版本的IE浏览器中是不存在的,我们需要使用其他的手段(flash等)来弥补这个问题,这里就不展开了。

**背景**

**web标准是个老生常谈的话题。引入国内的时间,粗略算下来,有十年左右了。但是由于国内前端优秀人才的缺失和相关教育跟进的缓慢,造成了很多人都没有对它引起足够的重视并运用到自己的实际项目当中,同时又花了较多精力在眼花缭乱的新技术方案和工具中,这就造成了技术断层,影响不是一个两个人,而是一大部分,如果再缺少相关的正确引导,就会保留很多不正确的编码习惯,对于个人成长和所做的项目都是不利的。**

为什么是时候再提呢?可以先来看看下面一张具有一定代表性的图,截自我的企鹅群(152128548)

图片 6

1、标签仍在被滥用
2、重视觉,轻语义和结构
3、热衷于跟进热门新技术,不重视基础
4、当我在跟大家说重视基础的时候,要么有人说原生js,要么有人说css原理和技巧,没人说html

由于以上的几点,加上各种场合和会议似乎很少提及这些方面的东西,新手在被老手“牵”着走,老手的精力又不在这些比较基础的东西上。这篇文呢,就是跟大家一起回到起点,去看看怎样做才算是符合了web标准的编码。

关于 NodeConfBP

NodeConfBP 会议于 2017 年 1 月在布达佩斯召开,本次会议为期一天,只有一个演讲室,由 RisingStack – the Node.js Consulting & Development Company 组织并提供赞助。

下面你将会从第一人称视角感受到一个近乎完美的风格化的会议记录:

file控件的地位受到威胁

随着files属性的出现,file控件的地位显然得到了很好的提升,但是这并不表示它的地位更加稳固。随着HTML5二来的,并不只有file控件的files属性。我们已经可以在越来越多的网站上可以看到拖拽上传这个一个新颖并且更符合用户行为的交互效果。这里我先不说拖拽上传功能的实现,我们先一起来看看另一种获取FileList对象的方法。

首先,我们需要一个拖拽上传的静态界面,细节不多说,直接上代码:

XHTML

<style> * {margin: 0;padding: 0;} .up-area {margin: 50px auto;border: 1px dashed #ccc;background-color: #eee;width: 600px;height: 400px;line-height: 400px;text-align: center;color: #666;cursor: pointer;} .up-area:hover {background-color: #ddd;} </style> <input type="file" name="" id="J_UploadFile" style="display: none;"> <div class="up-area" id="J_UploadArea"> 点击此处或拖入文件进行上传 </div> <script> (function(){ var area = document.getElementById("J_UploadArea"), file = document.getElementById("J_UploadFile"); function uploadFile(fs) { console.log(fs); } area.onclick = function() { console.log('click'); file.click(); }; file.onchange = function() { uploadFile(this.files); }; area.ondragenter = function(ev) { this.className = 'up-area hover'; ev.preventDefault(); }; area.ondragover = function(ev) { ev.preventDefault(); }; area.ondrop = function(ev) { ev.preventDefault(); console.log('drop'); var dt = ev.dataTransfer; this.className = 'up-area'; uploadFile(dt.files); }; })(); </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<style>
    * {margin: 0;padding: 0;}
    .up-area {margin: 50px auto;border: 1px dashed #ccc;background-color: #eee;width: 600px;height: 400px;line-height: 400px;text-align: center;color: #666;cursor: pointer;}
    .up-area:hover {background-color: #ddd;}
</style>
<input type="file" name="" id="J_UploadFile" style="display: none;">
<div class="up-area" id="J_UploadArea">
    点击此处或拖入文件进行上传
</div>
<script>
(function(){
    var area = document.getElementById("J_UploadArea"),
        file = document.getElementById("J_UploadFile");
    function uploadFile(fs) {
        console.log(fs);
    }
    area.onclick = function() {
        console.log('click');
        file.click();
    };
    file.onchange = function() {
        uploadFile(this.files);
    };
    area.ondragenter = function(ev) {
        this.className = 'up-area hover';
        ev.preventDefault();
    };
    area.ondragover = function(ev) {
        ev.preventDefault();
    };
    area.ondrop = function(ev) {
        ev.preventDefault();
        console.log('drop');
        var dt = ev.dataTransfer;
        this.className = 'up-area';
        uploadFile(dt.files);
    };
})();
</script>

在线Demo。将文件拖入灰色区域释放便可以在页面上看到文件信息。

细心的朋友可能已经发现了,其实我们这里又提供了优化file控件的另外一种方式——完全使用另一个标签替代,在该标签的click事件中主动触发file控件的click事件,正如上面代码中的: file.click() 。但是,这不是本文的重点。

我们仔细看上面代码中的最后一段,即ondrop的事件处理函数,我们的files对象并不是来自file控件,而是一个叫dataTransfer的东西。那么我们是不是可以大胆的猜测,拖拽上传功能其实可以完全抛开file控件独立完成?这里先留个悬念,我们以后再讨论。

在上面的案例中我们通过点击来选择文件从而获取FileList对象,和通过将文件拖拽到灰色区域来获取FileList对象,这两种方式虽不同,但我们得到的数据确是一样的,这足以说明file控件不再独裁,它的地位已经渐渐开始受到威胁。

1 赞 1 收藏 评论

图片 7

问题来源

认识下 Daniel Khan

DynaTrace 做过的任何和 Node 沾点儿边儿的项目基本上我都过了个遍。另外,我还在给 Lynda 做辅导课程。我在当地大学教书,有三个女儿和一个儿子。

这次讲话基本上都是我的故事,涉及到了我 17 年学到的关于 Node 的一些东西。

在我看来,世间万物都是循环的,它们会反复出现,因此我们能够以史为镜,避免重蹈覆辙。

图片 8

这张照片拍摄于 1997 年,是我第一张使用网络摄像头拍摄的照片,照片上右边的那个家伙就是我。

我们购买这台 silicon graphics O2 差不多花了一辆小轿车的价钱,然后这个家伙跑过来说“现在我们正在使用网络摄像头一起拍照”。然后 哇哦 照片就出现在互联网上了,在那个时候这真的是一件特别炫酷的事情。

1998 年我就已经开始玩 HTML 了。

图片 9

当时的网站看起来和图片上展示的差不多,而且那个时候这本书还没写呢。

那个时候还木有 Google,木有 Facebook,木有 GitHub,木有 Wikipedia,也木有 StackOverflow。

那个时候我们只有新闻组,我们可以在上面提问,其他人也可以回答问题。有点儿像 email,但和 email 还是有区别的。

图片 10

时间走到了 1999 年,也就是 17 年前,我在 Square 新闻组里写下了我的问题:

  • “我正在写 web 数据库,但是我们已经有桌面数据库了呀。”

是的,Microsoft Access!

  • “我的主机支持 MySQL,但是我并不知道这是什么意思…”

我真的不知道。

  • “我知道 query 语句是如何运行了。”

其实,我完全不知道。

那个时候,我真正学到的一点是:网络永远不会遗忘。那时我真的是毫无头绪。

1、门槛低、简单

一周就可以掌握html,常用标签不多,用不到的不用管

比如:h1~6、p、span、div、img、a、input等,我们来随意的看一张截图

图片 11

上面是某宝PC端的登录页,可能是由于种种原因(不详),只用了少量的标签,所以,并不说它是不好的或者是错的,但它是其他很多人的写照。如果我说html标签有100多个,你会是什么反应?

1、不知道,没想到有这么多
2、知道,但认为很多都用不上

你会是哪种?

如何在合适的时候,合适的地方,使用正确的标签,这是web标准的基本要求。后面细说。

CSS很简单,常用属性也就那么多

宽、高、边框、背景、定位、浮动、边距,如果你掌握了这么多,那么就能够应对很多页面布局的情况了。如果你因此就认为css很简单,那么就等着它来“惩罚”你吧。

不好的方面:各种兼容问题,各种奇葩布局要求,各种不可预知的bug

好的方面:诸多奇妙的技巧和css3新属性,能够帮助我们做出充满美感又神奇的效果

如果你依然觉得CSS太简单,那么请看一下这里https://drafts.csswg.org/indexes/,要坚强~

进入 2000 年

在 2000 年我成为了一名 web 开发者,当时我在给 Austrian Job Service 教 Perl,因为在那个时候,找不到工作的人基本上都能成为一名 web 开发者,在当时这是种趋势。

那个时候 Perl 语言非常难,但是既然我已经准备教 Perl 了,那就是说明…

我非常非常聪明,是吧?

但是,真相永远是残酷的:其实我一点儿都不聪明。

当我尝试在数据库中更新数据集时,因为我不知道如何实现才算合理,所以一开始我的做法是先删除然后再插入。

图片 12

那么问题来了:就我这种水平,我又怎么会认为我自己还能教学呢?答案就是:达克效应。

简单来说,达克效应就是:因为你无知,所以你不知道你自己有多无知。

图片 13

那条绿线是你认为你知道的东西,那条黑线才是你真正知道的。那个时候,我认为自己无所不知,直到我完成了大学学业–应该是在 2011 年–我才知道 “好吧,其实我知道的也就那点儿东西”。

然后,你就开始变得稍微谦虚一些了,因为你开始学习那些你不知道的东西,接着你就开始有点儿绝望了。现在,我认为我在那个绿点的位置。

2、只需要做“对”,不需要做好

很多时候,即使写错了浏览器会包容它,当我们的代码是不规范的,甚至有时候是错的,但是浏览器仍然将它“正常”显示出来,这个时候,我们意识不到自己的错误。认为看起来没问题就没问题,这是很危险的。

标签不用在意,交给CSS去处理就好,理论上,我们可以通过一定的CSS规则,任意的改变一个元素的表现,这就造成了对html标签的不重视,因为我们总能让它们看起来没有任何问题。

我们去了银行…

但是不管怎么着,我设法找到了一家公司,然后买了一台服务器。这台服务器还是我们去银行贷了 15,000 欧元买的。

和之前相比,现如今变化真的很大:我们有 serverless 架构,你可以一台服务器都不用就把整个公司创建起来。

那个时候,我们不得不把服务器放在维也纳的一个数据中心的机架上。

每当服务器宕机的时候,我就得开着车到维也纳去重启服务器。

图片 14

那次我学到的东西就是:你要努力理解什么是全栈。我说的就是上面的这个全栈。

全栈,意味着你至少应该知道一点儿 web 协议、知道路由的工作原理、知道 HTTP 基本的工作机理、知道 SMTP 的工作机制。

当出现问题的时候,知道这些包是如何打包进浏览器的,知道这些东西是如何协调的是很有必要的。

3、热衷于“向前看”

学习新技术,丰富自己的技能树——html5、canvas、svg、react、ES6等。

解决“难题”——觉得一般的工作没什么挑战了,所以不屑于去深挖自己已经会了东西。

做出炫酷的效果——纯CSS图标、动画,3D动画,canvas动画等。

跟风式学习——大家都在谈,业界都在捧,看起来很好的东西,就开始躁动不安,跃跃欲试,其实有句话叫做:“基础不牢,地动山摇”,兴致冲冲的去学习新的东西的时候,往往会发现,没有足够的基础,是很难前行的。

上面说的这些是错的么?当然都对,特别是在技术发展更新迭代速度快的互联网领域,想会得更多让自己更强,同时会的更多在实际应用中可选择的方案也更多,兴趣驱动去学习,这是好事,我自己也是这样的,但我们需要注意的是,学习不是一条直线,不能沿着一条线一直往前冲,除了长度,还有深度,需要我们不断的从各个方面去打磨和填充才能日臻完善。

然后夜幕降临,迎来 2002 年

现在我们是在 2002 年,我创建了一家公司。那个时候,除了澳大利亚,互联网在全球爆炸式疯长。

我们静静地等待着互联网的繁荣有朝一日能够降临到我们身上,然后一切都结束了。

图片 15

我认为这一切都是从 boo.com 开始的,这是一家运营时尚服饰的初创公司。

在那时,每个人都花大把大把的时间去投资和新经济、新媒体相关的项目,所以整个行业开始繁荣增长。

在两个月内,公司从 10 个人涨到了 100 个人。然后,boo.com 破产了。

我认为那年的互联网危机和他们有关。所有的投资者差不多都退出了,因为他们意识到新经济公司终将会失败。

图片 16

这是纳斯达克的数据。我们当时在这个繁荣阶段,紧接着一切都奔溃了。这里是 9/11,一切都随风而逝…

我在 Google 上搜索了一下,这是那个时候硅谷人的想法,你们感受下。

图片 17

我找到了一个哥们儿这样写到:

“噢,我的天呐,这简直是致命的打击。作为一个年轻的初创公司,我知道的每个人都受到了影响。我知道的大多数人都失去了工作。不久之后,我知道的大部分人都搬走了。”

在这里他写到:

“泡沫时代的对比是史诗级的。开放式的酒吧活动和神话般的发布会都已经一去不复返了。工作和公司也都没有了。不久之后,绝大多数企业家没有了安全保障–很多人回到家里重新组团。”

听着有些熟悉,是吧?

如果今天你去硅谷,看到的也是这个样子。一切都是新兴的。工作在那里的人都是这样的:

“什么?他们公司没有自助早餐?

他们没有这种桌式足球?

噢,我不想在那儿工作了–我想买架飞机。”

图片 18

这种事情随时都会重现。不过那个时候,我们看到的更多一些。

尽管如果现在我说就算这种事情发生了也不会有什么问题,但是真的当这种事情发生了的时候,就真有问题了。

本文由小鱼儿玄机30码发布于小鱼儿主页高手论坛,转载请注明出处:原稿出处,原来的书文出处

关键词: 小鱼儿玄机30码