matiascx-CSDN博客

原创深入理解SVG坐标体系和transformations- viewport, viewBox,preserveAspectRatio

本文翻译自blog:https://www.sarasoueidan.com/blog/svg-coordinate-systems/SVG元素不像其他HTML元素一样受css盒子模型所制约。这个特点导致transform和postioning svg元素显得有些神秘，并且初看起来不是那么浅显易懂。然而，一旦你理解了SVG坐标体系以及transformation是如何工作的，那么操作SVG会变

2017-07-31 10:36:46 856

原创 d3js path generator vs layouts

我们知道d3的一般套路就是d3.selectAll('path.mypath').data(yourDataset).enter().append('path').attr('class','mypath').attr('d',thePathString)而thePathString的获取，一般都是根据绑定的yourDataset来生成的。具体生成方式有：1. 通过程序自己一节一节地拼凑起来p

2017-07-31 10:36:40 478

原创 d3js layout 深入理解

D3 layouts help you create more advanced visualisations such as treemaps:D3 layouts帮助您创造更加高级复杂的可视化图表，比如treemaps,packed circles,network graphs:Layout is just a JavaScript function that takes your da

2017-07-31 10:36:37 972

原创 d3js enter/exit深入了解

在 Data joins 章节我们演示了当data和dom element个数相同时的情况 id="content"> 给定下面的数据var myData = [ 10, 40, 20 ];当我们对div元素join上数据时d3.select('#content') .selectAll('div') .data(myData);myData 数据的个数和di

2017-07-31 10:36:35 1140

原创 d3js data joins深入理解

Data joins给定一个数据数组和一个 D3 selection 我们就可以attach或者说是'join'数组中的每个数据到selection中的每个元素上。这将使得我们的数据和可视化元素之间建立紧密的联系并实现可视化成为可能。比如如果我们有以下SVG的circles:和下面的data数组：var scores = [ { "name": "Andy

2017-07-31 10:36:32 1308

原创 d3js selections深入理解

D3 selections选择DOM元素以便可以对这些dom元素做相应的操作，比如：更改其style,修改其属性，执行data-join操作，或者插入、删除相应elements比如，如果给定5个circles:我们可以使用d3.selectAll来选中所有的circles，并且通过.style和.attr来修改其样式或者属性d3.selectAll('circle') .style('

2017-07-31 10:36:29 3480

原创 d3js scales深入理解

比例尺函数是这样的javascript函数：接收通常是数字，日期，类别等data输入并且：返回一个代表可视化元素的值，比如坐标，颜色，长度或者半径等比例尺通常用于变换(或者说映射）抽象的数据值到可视量化变量（比如位置，长度，颜色等）比如，假设我们有以下数组数据：[ 0, 2, 3, 5, 7.5, 9, 10 ]我们可以这样创建一个比例尺函数：var myScale = d

2017-07-31 10:36:27 4026 1

原创 d3js shape深入理解

本文将视图了解d3js提供的帮助我们创建矢量图形的helper函数，比如下面的:http://d3indepth.com/shapes/linescurvespie chart segmentssymbols SVG首先我们来认识一下SVG(scalable vector graphics).要知道上面例子中的图形实际上都是由SVG的path元素构成的。每张图都有不同的pa

2017-07-31 10:36:24 1898

原创如何使用chrome devtool调试Mobile网页？

凡是做过mobile网页web app开发的朋友一定对开发效率的底下会有吐槽。现在chrome dev tool改变了程序员们的苦比。1. chrome://inspect/#devices2. android手机中打开chrome android3. usb连机4. 在pc的chrome devtool中inspect即可!https://www.html5rocks.com/en/t

2017-07-31 10:36:18 337

原创为什么有时父元素无法包含子元素？

在css布局中，有时会出现以下现象：父亲元素可能为0x0，而子元素实际上是有尺寸的。总结一下有以下几种场景会导致这种情况发生：If the child uses position: relative; top: 200px and move away from the parent.If the child does something similar using a negative

2017-07-31 10:36:13 810

原创 base64编码以及url safe base64是怎么工作的?

原文转自 http://www.yanshiba.com/archives/638 1: 为什么需要base64?ASCII码一共规定了128个字符的编码,这128个符号,范围在[0,127]之间.其中,[0,31],及127, 33个属于不可打印的控制字符.在电子邮件传输信息时,有些邮件网关会把[0,31]这些控制字符给悄悄清除.还有的早期程序,收到[128,255]之间的国际字符时,甚

2017-07-31 10:36:11 1643

原创古老的CSS同高列问题

今日在网页设计时，遇到了希望页面的几列同高需求的实现问题，搜罗了一下google,找到以下文章，感觉不错，翻译过来，同时作为学习加深印象。https://css-tricks.com/fluid-width-equal-height-columns/ 相同高度的列布局在web design领域是个很常见的需求。如果所有列都使用相同的background,那么所谓同高列在这里就没有什么关系了，因

2017-07-31 10:36:08 304

原创 styling the SVG images

SVG不像canvas，SVG的所有元素都是以DOM元素存在于文档中的，我们可以像给任何普通的dom元素添加css样式一样，可以对svg的元素做styling.不过SVG元素的css样式名称和普通html元素的css样式属性名称还是有所区别的。下面给出一个完整的列表供参考CSS PropertyDescriptionfillSets fill color of the shape.

2017-07-31 10:36:05 456

原创 vuejs plus d3

vuejs 是一个数据驱动视图的前端框架，一切皆可以作为可重用的组件加以使用。d3则是数据可视化javascript库，如何将二者的长处相结合是一个挑战。https://tyronetudehope.com/2016/12/13/composing-d3-visualizations-with-vuejs/import * as d3 from 'd3';const data = [9

2017-07-31 10:36:03 557

原创 SVG坐标系统和transformation彻底理解

翻译自https://sarasoueidan.com/blog/svg-coordinate-systems/SVG元素不像传统的HTML elements一样受制于css box model。这就使得position或者transform这些svg元素有些不是很直观.然而，一旦我们理解了SVG坐标体系和transformation是怎么工作的，那么操作svg就变得容易起来。本文试图解析SVG

2017-07-31 10:36:00 468

原创 html,css,javascript角色划分

html负责文档的structure和contentcss负责文档内容的长相javascript负责定义和文档的interaction交互

2017-07-31 10:35:57 431

原创何时需要做urlEncode,以及为什么要做

在RFC1738中，对于URL可以使用的字符集做了如下规定：“只有0-9a-zA-Z的字母以及$-_.+!*'(),"这几个特殊字符”而在html4中扩展了所有的unicode character set能够在url中使用。那么到底有哪些字符需要encoded呢？1. ascii control characters 原因是：他们不可打印，字符范围iso-8859-1的00-1F

2017-07-31 10:35:54 616

原创微信公众号开发点滴

什么是微信网页授权任何从微信客户端发起对第三方网站访问时，如果希望实现微信第三方登陆，必须使用公众号网页授权这个接口来开发实现。或者对于PC端的网站使用PC浏览器访问网站时，希望使用微信来作第三方登录，这时也可以说是微信网页授权的一个典型应用场景，但是此时需要用到的是微信开放平台。这种开放平台只适用于PC端网站出码，并且必须使用手机微信扫码实现登录，不适用于手机端的移动浏览器访问pc网站的场景

2017-07-31 10:35:52 1152

原创提问的智慧程序员成长之路

偶然间看到一篇关于提问的智慧，深有同感，记录下来共勉之。http://www.catb.org/~esr/faqs/smart-questions.htmlhttps://laravel-china.org/topics/2396/wisdom-of-asking-questions-chinese-version

2017-07-31 10:35:49 232

原创 xml php 解析

JSON作为数据交换可以说已经成为了一种事实上的标准，但是前几年和它对应的xml虽然说用的越来越少，但是我感觉还是有他可以应用的地方。json更偏重于程序员来使用和解读，而xml则更适合用户来使用和解读。因此，存在这样的场景：用户使用xml来构造数据，通过一定的转换工具转成我们需要的数据格式，同时如果需要的话则可以转成对应的json.在php中一种非常好用的xml解析模式: simpleXM

2017-07-31 10:35:46 195

原创 D3 JS study notes

如何使用d3来解析自定义格式的数据源？var psv = d3.dsvFormat("|");// This parser can parse pipe-delimited text:var output = psv.parse("first|last\nabe|lincoln")console.log(output[0])// 将输出以下内容:=> {first: "abe", l

2017-07-31 10:35:43 677

原创 PHP中的trait方法冲突

laravel使用中我们可能需要对User model使用softdelete这个功能，以便删除后还可以恢复，不幸的是entrust模块也有这个方法，两者产生冲突，解决办法：https://laravel-china.org/topics/1775class User extends Model implements AuthenticatableInterface{ use A

2017-07-31 10:35:40 372

原创 web application 访问控制

http://secappdev.org/handouts/2012/Jim%20Manico%20%26%20%20Eoin%20Keary/Final%20-%20Access%20Control%20Module%20v4.1.pdf什么是access control/authorization?authorization is the process where a system de

2017-07-31 10:35:35 422

原创 postman trigger xdebug session in phpstorm

phpstorm是一款非常棒的php开发调试工具，一般情况下我们使用firefox/chrome的bookmark，开启phpstorm debug侦听，随后点击start debugger，我们就可以任意调试任何页面的php代码了，这个工作流程非常高效。但是当我们使用laravel或者任何原生php开发api时，我们就可能需要使用postman作为前端模拟工具了，而这时如何触发后端php代码

2017-07-31 10:35:32 376

原创 sql查询学习和实践点滴积累

https://blog.rjmetrics.com/2008/10/28/correlated-subqueries-in-mysql/http://www.mysqltutorial.org/mysql-subquery/SQL是关系数据库中非常基础同时也是非常重要的知识，虽然比如类似Laravel的后端开发类库提供了ORM抽象数据类封装掉了一部分简单的sql查询，因此很多时候我们无需关系

2017-07-31 10:35:29 450

原创如何写一个能在gulp build pipe中任意更改src内容的函数

gulp在前端自动化构建中非常好用，有非常丰富的可以直接拿来使用的plugin，完成我们日常构建工作。但是万事没有十全十美能够完全满足自己的需求，这时我们就要自己动手写一个小的函数，用于在gulp stream pipeline中执行我们想要的动作，比如我有一个需求在build后将gulp-inject插入的assets url修改为laravel的一个helper以便识别不同的运行环境：如果是

2017-07-31 10:35:27 654

原创使用Virtual Audio Cable软件实现电脑混音支持电脑录音

http://blog.csdn.net/cuoban/article/details/50552644

2017-07-31 10:35:24 1299

原创 webpack学习笔记丁点积累

webpack是什么？https://webpack.js.org/concepts/https://code.tutsplus.com/tutorials/introduction-to-webpack-part-1--cms-25791webpack是一个为现代javascript application而生的module bundler:模块打包器。它支持非常多的配置，拥有强大的功能。

2017-07-31 10:35:21 318

原创 centos 7.2 Apache+mysql+php step by step备忘

1. 如何允许laravel程序执行sudo shell脚本？ chmod u+w /etc/sudoers ; echo "apache ALL=(ALL) NOPASSWD:ALL" >> /etc/sudoers 再注释掉Defaults requiretty这行，否则会要求有tty才能运行！（TODO: 写shell实现自动化） chmod u-w /etc/sudo

2017-07-31 10:35:16 642

当你使用larvel创建一个相对比较复杂的web网站时，往往你的routes文件就会变得很庞大。一般来说在开始网站编码之前，最好做一个整体规划，把这些route逻辑上划分为不同的group,每一个group来定一个对应的middleware来控制这些route的访问。比如admin,auth,public等逻辑大块。通常每一个这样的路由集都对应这不同的middleware，比如admin往往需要a

2017-07-31 10:35:14 398

原创 javascript animation lib greensock gsap介绍

一般前台做动画有以下几种方式：1. 简单的css transition动画;2. css animation动画3. javascript库动画一般来说css html5动画只适用于简单的形变动画，动画操作的是css某个属性。但是对于更加复杂的动画，我们可能必须通过javascript来做，其中greensock的gsap就是一个让你发挥无限想象的强大工具gsap还支持模块化使用，这一

2017-07-31 10:35:11 263

原创 CSS transitions深入理解

到底css transition是什么，我们来看w3c的解释：CSS Transitions allow property changes in CSS values to occur smoothly over a specified duration. This smoothing animates the changing of a CSS value when triggered by

2017-07-31 10:35:06 256

原创 escape,encodeURI,encodeURIComponent, URLEncode, RawURLEncode, HTMLEntity, AddSlash, JSON Encode

online tooling:　http://www.the-art-of-web.com/javascript/escape/ input : {user:{id:59,innerhtml:"content of inner html"}, data: [1,2,5]}1. JSON ENCODE: "{user:{id:59,innerhtml:\"content of inner ht

2017-07-31 10:35:01 358

原创 sql join实例图解

https://blog.codinghorror.com/a-visual-explanation-of-sql-joins/1. inner join:所有满足join条件的两个table对应的row,column都将在result set中出现。比如下面的例子条件是tj1.id=tj2.id2而满足这个条件的row.它的执行过程可以这样理解：获取tj1的第一行的id字段为1，随后比对

2017-07-31 10:34:56 683

原创常用sql commands以及mysql问题解决日志

1. mysql -uroot -p 2. show databases;mysql> show databases;+--------------------+| Database |+--------------------+| information_schema || ccpdev || mysql |

2017-07-31 10:34:52 907

原创 Vertical-Align: 关于inline,inline-block文本排版

inline, inline-block元素在同行元素的排版布局中非常有用，但是时常会出现一些莫名奇妙的问题。要解决这些问题，深刻理解inline,inline-block元素的特征有非常重要的意义。下面这篇英文文章解释的非常清晰，我视图把他翻译一下，同时也好好学习梳理一下。http://christopheraue.net/2014/03/05/vertical-align/我常常需要si

2017-07-31 10:34:47 433

原创 javascript requestAnimationFrame vs. setTimeout

在做javascript动画时，我们常常使用的方法就是通过setTimeout调用告诉浏览器每隔20ms执行一段js代码来对dom对象执行操作，这个貌似没有什么问题，但是当深入理解计算机的fps以及浏览器渲染原理后，你会发现会有更好的方法。强烈推荐这篇文章：http://creativejs.com/resources/requestanimationframe/有空我会把他翻译下

2017-07-31 10:34:42 238

原创 how browser works

浏览器到底是怎么工作的，如果我们对其工作流程，原理有大体的了解，对于web开发是很有帮助的。http://www.html5rocks.com/zh/tutorials/internals/howbrowsersworkjavascript event loop，js是如何被解析并运行的？next frame是什么概念？下面这篇文章可以作为参考，有空值得好好阅读体会：https://w

2017-07-31 10:34:37 230

原创 javascript使用web proxy来实现ajax cross-domain通信

在现代浏览器中，都强加了对javacript代码的访问限制，比如一个页面的js无法向非同源的url实现ajax请求，获得数据。在这时，是浏览器端会报错：No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefor

2017-07-31 10:34:34 304

原创 laravel model relationship

laravel支持多种模型之间的relation,对应着模型间的one2one, one2many,many2many,hasManyThrough,Polymorphic, many2many polymorphic关系。心法1.所有relation都由model class上的方法来定义;2. relationship和model本身都是以query builder作为基类的，因此

2017-07-31 10:34:31 527

GitHubDesktopSetup.exe 2017版

空空如也