【兄弟连学Python】 前端之CSS
CSS为了让网页元素的样式更加丰富，也为了让网页的内容和样式能拆分开，CSS由此思想而诞生，CSS是CascadingStyleSheets的首字母缩写，意思是层叠样式表。有了CSS，html中大部分表现样式的标签就废弃不用了，html只负责文档的结构和内容，表现形式完全交给CSS，html文档变得更加简洁。Css基本语法及页面引用css基本语法css的定义方法是：选择器{属性:值;属性:值;属性:值;}选择器是将样式和页面元素关联起来的名称，属性是希望设置的样式属性每个属性有一个或多个值。代码示例：div{width:100px;height:100px;color:red}css页面引入方法：1、外联式：通过link标签，链接到外部样式表到页面中。
vscrawler 0.2.1发布，适合用作抓取的爬虫框架
VSCrawler是一个适合用作抓取的爬虫框架，在更多场景倾向于功能扩展性而牺牲使用简便性。这让VSCrawler非常强大，让他可以灵活的应对目标网站的反爬虫策略。vscrawler有挺多特点1.多用户登录，天生支持多用户登录，各个用户资源隔离维护。2.数据完整性保证，vs保证即使爬虫宕机也会尽力序列化爬虫任务。3.任务调度，vs目前不支持其他爬虫框架schedular角色的定制，不过vs本身的任务调度很完善，支持自定义消重规则、断点续爬、重试规则定制、重复抓取（在消重之上封装了可重入的特性）4.抽取器，vs结合其他爬虫框架的实现，封装了整套抽取器体系。包括cssquery&&xpath（SipSoup，自JsoupXpath和Xsoup发展而来）、链式抽取（集合正则、xpath、cssquery、字符串处理函数、jsonpath）、字符串函数（基于表达式描述字符串逻辑，配合字符串函数表达式可以实现无编码支持字符串局部清洗处理）、表格处理（在css和xpath特征都不明显的html文档上面使用很方便）5.热发控
杂谈 CSS IN JS
前言关注点分离（separationofconcerns）原则多年来大行其道，实践中一般将HTML、CSS、JavaScript分开编写维护，早期框架angularjs即是如此，直到React争议中问世，引领关注点混合趋势，驱使开发者重新审视CSS工程化发展。尴尬的CSS相对于JavaScript的突飞猛进，CSS的发展缓慢，相对止步不前。随着前端职能扩大化成为常态，前端工程化日趋成熟，CSS先天缺陷愈发明显：全局作用域缺乏高级编程特性代码冗余极限压缩依赖管理最大的缺陷来自于全局作用域，classname全局生效，多人协作中的风格不一致，随时可能引发蝴蝶效应。为规避多人协作的风格冲突，社区提出OOCSS，BEM等方法论，但实践中完全取决于团队执行力度，笔者也曾苦恼于合理的命名，为避免冲突，导致类名冗长，无聊且痛苦。缺乏高级编程特性影响同样深远，社区发展的预处理器能够有效缓解，sass，less，stylus殊途同归，postcss异军突起，基本实现变量、嵌套、
ASP.NET Core远程调试
关于ASP.NETCore远程调试的具体做法可参考微软文档——RemoteDebugASP.NETCoreonaRemoteIISComputerinVisualStudio2017，详细做法不再赘述，这里主要记录下自己的感受。体验WebDeploy这种发布方式可直接将代码打包发到指定服务器的指定站点下，十分方便。远程调试注意事项若要使用远程调试功能，需同时满足以下亮点：必须以Debug方式发布代码到服务器上本地项目文件夹中的文件必须和服务器上的文件一致（主要是bin下的dll文件了）
使用.Net Core+EF7 完成CodeFirst
emmm，本来想着用Core做一个小项目玩玩的，然后肯定是要用到数据库的，然后想，啊，要不用CodeFirst，感觉很腻害的样子，于是，一脸天真无邪的我就踏入了一个深不见底的天坑。。。本来想着，应该不是很难，多百度就好，辣么多大神都写了教程，零零散散的花了将近三个星期时间，照着Demo写了N多次的我，不得不放弃了挣扎，邀请了一位一起工作的大佬，看着他噼里啪啦调试了半个小时之后，就出现的数据库，莫名心塞，大佬就是大佬，原谅小弟我才疏学浅，所以做一个笔记先，留着备用。。我会边写博客，边做一个最简单的Demo，其实很多时候我们缺的，就是这些入门级的东西，那些加了各种验证和功能的代码，反而会影响我们找到需要的代码。工具：VS2017环境：.NetCore2.0，EF7首先，我们需要的是建一个解决方案，一个类库项目，以及一个Web项目这些建好之后的项目结构，应该是酱紫的建好之后，就到了一个小关键了，我们要添加EF的依赖了，怎么添加呢？网上看了好多方法，基本是都是使用工
浅谈HTTP中Get与Post的区别
Http定义了与服务器交互的不同方法，最基本的方法有4种，分别是GET，POST，PUT，DELETE。URL全称是资源描述符，我们可以这样认为：一个URL地址，它用于描述一个网络上的资源，而HTTP中的GET，POST，PUT，DELETE就对应着对这个资源的查，改，增，删4个操作。到这里，大家应该有个大概的了解了，GET一般用于获取/查询资源信息，而POST一般用于更新资源信息。1根据HTTP规范，GET用于信息获取，而且应该是安全的和幂等的。（1）所谓安全的意味着该操作用于获取信息而非修改信息。换句话说，GET请求一般不应产生副作用。就是说，它仅仅是获取资源信息，就像数据库查询一样，不会修改，增加数据，不会影响资源的状态。（2）幂等的意味着对同一URL的多个请求应该返回同样的结果幂等（idempotent、idempotence）是一个数学或计算机学概念，常见于抽象代数中。幂等有一下几种定义：对于单目运算，如果一个运算对于在范围内的所有的一个数多次进行该运算所得的结果和进行一次该运算所得的结果是一样的，那么我们就称该运算是幂等的。比如
自动类型安全的.NET标准REST库refit
在SCOTTHANSELMAN博客上看到一个好东西《Exploringrefit,anautomatictype-safeRESTlibraryfor.NETStandard》，他推荐了一个.NET标准1.4的自动类型安全的REST库refit。refit类似于Java的Retrofit，是一套RESTful架构的.NET客户端实现，基于特性，提供把RESTAPI返回的数据转化为(PlainOrdinaryC#Object,简单C#对象)，POCOtoJSON，网络请求(POST，GET,PUT，DELETE等)封装，内部封装使用HttpClient,前者专注于接口的封装，后者专注于网络请求的高效，二者分工协作。我们的应用程序通过refit请求网络，实际上是使用refit接口层封装请求参数、Header、Url等信息，之后由HttpClient完成后续的请求操作，在服务端返回数据之后，HttpClient将原始的结果交给refit，后者根据用户的需求对结果进行解析的过程。例如：public
搭建Visual Studio Code+Python开发环境
1.对象简介此次介绍的对象是VisualStudioCode。什么是VisualStudioCode呢？VisualStudioCode是一个轻量级但功能强大的源代码编辑器运行在你的桌面和可用于Windows，MacOS和Linux。它配备了JavaScript的内置支持，TypeScript和Node.js有一个丰富的生态系统，对其他语言的扩展（如C++，C#，java，Python，PHP，GO）和运行时。同类型的编辑器还要sublimetext,atom,vim等，那它有什么优势呢，比sublime开源github，比atom更快，比webstorm更轻（个人观点）。集成git支持、内置插件中心，自动安装、界面美观。2.搭建步骤1.安装python2.下载VisualStudioCode
前端进阶之路: 前端架构设计(2)-流程核心
可能很多人和我一样,首次听到"前端架构"这个词,第一反应是:"前端还有架构这一说呢?"在后端开发领域,系统规划和可扩展性非常关键,因此架构师备受重视,早在开发工作启动之前,他们就被邀请加入到项目中,而且他们会跟客户讨论即将建成的平台的架构要求,使用还什么技术栈?内容类型是什么?这些内容如何被创建?软件架构师的职责就是要保证项目中每一步都在总体架构的指导下进行,而不会随机决定.现在的前端领域,随着JS框架,UI框架和各种库的丰富,前端架构也变得十分的重要.如果一个大型项目没有合理的前端架构设计,那么前端代码可能因为不同的开发人员随意的引入各种库和UI框架,导致代码量变得异常臃肿,最终结果可能是代码变得无法维护,页面性能低下,不得已只能推翻重构.所以我们需要在项目开始前,同样的需要对前端代码进行架构,一旦前端架构师设计出所有前端开发人员都要遵循的检验机制,建立起系统设计的规范,那么项目就拥有了可以衡量代码质量的标准,前端开发人员也能享受到更高效的工作流.所以,前端架构的定义可以用以下一句话
Vue+ElementUI: 手把手教你做一个audio组件 (ps: 示例音频好好听)
1.简介1.1相关技术VueVue-cliElementUIyarn(之前我用npm,并使用cnpm的源，但是用了yarn之后，我发现它比cnpm的速度还快，功能更好，我就毫不犹豫选择yarn了)Audio相关API和事件1.2从本教程你会学到什么？Vue单文件组件开发知识ElementUI基本用法Audio原生API及Audio相关事件音频播放器的基本原理音频的播放暂停控制更新音频显示时间音频进度条控制与跳转音频音量控制音频播放速度控制音频静音控制音频下载控制个性化配置与排他性播放一点点ES6语法1.3学前准备基本上不需要什么准备，但是如果你能先看一下Aduio相关API和事件将会更好Audio:如果你愿意一层一层剥开我的心使用HTML5音频和视频1.4在线demon没有在线demo的教程都是耍流氓查看在线demon项目地址2开始编码2.1项目初始化➜testvueinitwebpackelement-audioA
总结一下vue里一些小技巧
（官方里的我就不细说了，自个撸文档就成，下面是实践里常用的几个小技巧或者说是遇到的坑，若有错误望大家指正）1、当用a标签设置新窗口打开页面，设置url时，建议给href进行v-bind绑定，然后写相对路径即可，它默认会继续走router-link相对路由那一套，没必要在调用location的api获取hostname，然后拼接字符串。如图：2、组件和route使用$router.params.xx耦合度太高，可尝试使用props解耦，操作如图：3、解决实际应用场景下重定向问题：a、可以直接采用redirect的callbcakb、使用路由守卫：可采用全局导航守卫或者组件内导航守卫，比如beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave等等，但是要注意在beforeRouteEnter里不能调用this，因为当守卫执行前，组件实例还没被创建。也要注意beforeRouteUpdate这个钩子，vue版本2.2+才可以使用，个人感觉这是一个非常好用的钩子，真是牛逼lity，使组件拓展性提升
个人博客开发系列：前台博客页面开发部署完成
前言之前使用JS+HTML5+CSS3+Node.js+Express.js+Mongodb开发过一个博客网站，也部署了一段时间，但当时刚开始搞前端，写的不是很满意。后来就废弃了。今年又使用Hexo+GitHubPages部署了一个博客，但自由度太低。所以最后还是决定重新写一个博客。目前前台博客页面已基本开发完成（评论功能待开发，在考虑方案中），后台管理页面也基本开发完成（首页统计图表和一些优化待开发，暂时需要统计的数据还不多，也在考虑统计维度中）。此篇文章先介绍下前台博客页面。技术栈Vue.js+Nuxt.js+SCSS+ES6/7+Node.js+Koa.js+mySql+Redis源码Talkischeap.Showmethecode.访问地址访问地址：www.tdon.site扫码访问：项目运行#cloneprojectgitclonehttps://github.com/XNAL/don-blog.git#installdepe
【313天】跃迁之路——程序员高效学习方法论探索系列（实验阶段71-2017.12.15）
实验说明从2017.10.6起，开启这个系列，目标只有一个：通过探索新的学习方法，用2年的时间，实现2.5倍速的成长，获得普通程序员>=5年的技术水平。实验期2年（2017.10.06-2019.10.06）我将以自己为实验对象。我将开源我的学习方法，方法不断更新迭代，全程记录分享实验结束后我将请5位以上资深程序员判断我是否达成目标。本实验旨在探索新方法，所涉及的学习方法未经科学考证，主观性极强，请谨慎使用。跃迁方法论（20171209V1.7）语言学习每学习一个新语法，便识别其语言特性，归类形成脑图。【解决：知识迁移问题】语言学习要对比进行，将不同语言的语言特性进行对比刻意练习思维训练【解决：归纳总结，避免低水平重复训练】1.若遇到新知，先写伪代码，然后提取思路上的共性，形成思路脑图。【解决：归纳总结，构建知识复利需要的基石】2.将编程思维层面的套路，背诵下来，形成表格，每次编程前，严格按步骤填写。【解决：思维混乱问题，构建结构化的编程思维】动手练习1.若遇到旧知，继续做，直到大脑可熟练提取思路脑图，无排斥感（本能自
otter双A同步配置
otter双A配置最近做跨国服务器的数据同步，用了阿里的otter开源框架，遇到了不少问题，写一下文档为以后做参考。第一步：下载所需的文件：otter,zookeeper,aria2otter下载地址：https://github.com/alibaba/otterzookeeper下载地址：https://github.com/apache/zookeeperaria2下载地址：http://sourceforge.net/projects/aria2/files/stable/zookeeper：的配置网上有很多aria2:加速文件传输用的使用方法网上搜，很多这里主要写对otter的使用第二步：进入$otter_home目录执行：mvncleaninstall-Dmaven.test.skip-Denv=release运行完后在$otter_home会生成target文件解压文件中的manager和node文件文件启动顺序
如何将伪数组转换成真正的数组
1.常见的伪数组有哪些？arguments、通过document.getElements..获取到的内容2.伪数组有什么特点？具有length属性，也是一个一个的元素组成的，但是构造器不是Array，不能使用数组的方法3.转换为真正的数组的方法：通过遍历将伪数组里元素放入到一个新的数组里通过call改变数组slice方法里的this指向因为我想要让伪数组也能使用数组的方法，为什么伪数组就不能使用数组方法，为什么数组就能使用push方法一个数组都是由她的构造器实例化出来的，vara=[]；这是js的语法糖；正规的用法：vara=newArray()因为Array是一个构造函数，每一个构造函数都有原型，且构造函数构造出来的实例可以使用原型上的方法，也就是说因为Array的原型上有一些方法，所以每一个数组都可以使用push等方法因为伪数组的构造器不是Array，当然不能使用Array原型上的push方法现在数组有一个方法slice，这个方法每次都会返回一个新数组，如
新出的 RFC 8259：The JavaScript Object Notation (JSON) Data Interchange Format
JSON的規格書又被更新了XD在「TheLastJSONSpec」這邊，TimBray寫了這篇關於新的RFC8259跟之前的差異，以及大家對於雙重標準的顧慮。最大的差異在於，在RFC8259規定了「如果JSON被用在非封閉的系統交換資料，必須使用UTF-8」：8259containsonenewsentence:“JSONtextexchangedbetweensystemsthatarenotpartofaclosedecosystemMUSTbeencodedusingUTF-8[RFC3629].”Giventhat,by2017,anattempttoexchangeJSONencodedinanythingbutUTF-8wouldbeirrational,thishardlyneedssaying;butitsabsencefelt
p5.js作品集（3）：蜜蜂和蜂巢（上）
草图.png过程分解（蜂巢）一、编写一个蜂巢对象的构造函数functionbeehive(x,y,r){this.x=x;//蜂巢中心的x轴坐标this.y=y;//蜂巢中心的y轴坐标this.r=r;//蜂巢的半径this.display=function(){fill('#ff0');//蜂巢的填充色为黄色noStroke();//无边框push();//push()与pop()之间的坐标系操作不会影响全局的坐标系translate(this.x,this.y);//将蜂巢中心与坐标轴原点对齐beginShape();//开始绘制一个蜂巢vertex(this.r*cos(PI/6),this.r*sin(PI/6));//从六边形右下角的一点开始，逆时针依次绘制剩余5个顶点vertex(this.r*cos(PI/6),-this.r*sin(PI/6));vertex(0,-this.r);vertex(-this.r*cos(PI/6),-this.r*si
p5.js作品集（1）：樱花
草图.png过程分解初始化：新建一块画板functionsetup(){createCanvas(windowWidth,windowHeight);background(255);//设置背景颜色}一、画一个矩形functionsetup(){createCanvas(windowWidth,windowHeight);background(255);}functiondraw(){rect(0,-40,160,80);//画一个矩形}二、画一个无边框粉色矩形functionsetup(){createCanvas(windowWidth,windowHeight);background(255);}functiondraw(){noStroke();//无边框fill(255,20,147);//粉色rect(0,-40,160,80);//画一个矩形}三、将坐标轴平移至窗口中心functionsetup(){createCanvas(windowWidth,windowHeight);background(255);
javascript设计模式——中介者模式
javascript设计模式——中介者模式前面的话程序由大大小小的单一对象组成，所有这些对象都按照某种关系和规则来通信。当程序的规模增大，对象会越来越多，它们之间的关系也越来越复杂，难免会形成网状的交叉引用。当改变或删除其中一个对象的时候，很可能需要通知所有引用到它的对象。面向对象设计鼓励将行为分布到各个对象中，把对象划分成更小的粒度，有助于增强对象的可复用性，但由于这些细粒度对象之间的联系激增，又有可能会反过来降低它们的可复用性。中介者模式的作用就是解除对象与对象之间的紧耦合关系。增加一个中介者对象后，所有的相关对象都通过中介者对象来通信，而不是互相引用，所以当一个对象发生改变时，只需要通知中介者对象即可。中介者使各对象之间耦合松散，而且可以独立地改变它们之间的交互。中介者模式使网状的多对多关系变成了相对简单的一对多关系。本文将详细介绍中介者模式泡泡堂【初始版本】先定义一个玩家构造函数，它有3个简单的原型方法：Play.prototype.win、Play.prototype.lose以及表示玩家死亡的Play.prototype
ELSE 技术周刊(2017.12.11期)
Angular发布5.1版本，同时发布了AngularCLI1.6版本以及首个稳定版本的AngularMaterial。CLI支持了ServiceWorker，以及带来对AppShell更好的支持AntDesign3.0驾到AntDesign是一个致力于提升「用户」和「设计者」使用体验，提高「研发者」开发效率的企业中后台设计体系。前端开发APinterestProgressiveWebAppPerformanceCaseStudyPinterest新的移动站点做成一个PWA。这篇文章分享了通过减少JavaScript打包大小，以及运用ServiceWorker等方式，提升性能，在移动设备上获取更好的体验。JavaScript性能优化的小知识总结文章总结JavaScript性能优化的code写法，包含变量的声明、定时器的使用、DOM操作、循环优化等方面优化的代码写法。如果重构一个项目代码，这些代码的优化是不可忽视的，而是是个持续的过程。ReactPerforman