可以和Tinymce结合使用完美实现WYSIWYG的效果
http://blurjs.com/ :支持背景或其他element的糊化效果
image的crop,blur操作一般是由前端的js/html/css来实现所见即所得,随后将参数传给类似php的Image库函数在后端操作,并且最终保存。如果只想对其中选择的部分来做模糊化效果应用,则可以先copy一个新的image,随后对这个image来执行imagecopy,imagefilter,随后将结果再copy回去即可。
$image2 = imagecreate($width, $height); imagecopy ( $image2 , $image , 0 , 0 , $x , $y , $width , $height); imagefilter($image, IMG_FILTER_GAUSSIAN_BLUR); imagecopy ($image, $image2, $x, $y, 0, 0, $width, $height);
http://youzign.com/special/ : 在线graphic design software,great resource for designer
http://www.maths.tcd.ie/~dwilkins/LaTeXPrimer/ 数学表达式计算机图片展示的理论基础
https://www.mathjax.org/ 以svg, html5的方式来展示数学表达式,很好用,已经捐赠5usd
http://jsbin.com/yadapavabe/2/ 自己编写的简单的wrap mathjax的应用
http://manuels.github.io/texlive.js/ latex的javascript实现,可以以browser编译运行的方式生成包含复杂数学表达式的pdf文件
https://khan.github.io/KaTeX/: 自包含无依赖的Tex转换js库,好用
http://dmitrybaranovskiy.github.io/raphael/ : 矢量图js绘制工具库
https://www.khanacademy.org : 志愿者education
WYSIWYG editors stands for “What You See Is What You Get”, 比如tinymce,codemirror等工具
https://github.com/fraywing/textAngular/ 一个angular directive Wysiwyg style 前端编辑器,可以用于定制化开发,增加数学表达式创建工具栏
http://private.codecogs.com/latex/eqneditor.php 使用latex的语法而支持所见即所得的编辑方式的WYSIWYG javascript 库
http://mathscribe.com/author/jqmath.html put math on the web, lightweight javascript lib for translating latex into html/css
http://lyx.org 提供一个非常方便编辑填写math表达式的桌面应用程序,最终可以导出latex格式或者html格式的文档,或许这是一个可行的math content creation的方法
http://mathdox.org/formulaeditor/ 一个所见所得的math equotion editor
http://mathquill.com/ WYSIWYG math with only HTML, CSS and JS 或许是mathjax的一个替代品,这个产品本身尺寸小,速度快,结合desmos.com可以非常有创意的使用math。 Magic textboxes where you can type math as easily as writing!
http://mathscribe.com/author/jqmath.html jqmath是mathjax的一个替代品,尺寸较小,速度快
几个几何geometry实用creative资源:
http://www.mathillustrations.com/ 桌面应用,有成型的图片下载;
几个online code editor:
https://codeanywhere.com 比较好用的codeIDE
https://codio.com :可以用于学校教学
http://www.geometryexpressions.com/apps.php 可以生成很有创意的几何图形app,有动态特效效果,很不错
http://geogebra.org 也是一个在线创建几何图形的工具
http://livegeometry.com/ 在线几何图形工具
https://coderdojo.com KIDS IT study志愿组织
几个常用的laravel package:
https://github.com/FbF/Laravel-Blog blog package
http://image.intervention.io/ PHP image handling package
https://github.com/lucadegasperi/oauth2-server-laravel 适用于laravel5的oauth2认证支持package
Git 客户端:http://www.syntevo.com/smartgit download.tortoisegit.org
http://dropzonejs.com/: 拖拽批量上传文件js库
//Animated header positioning var $head = $( '.header-fixed' ); $( '.waypoint' ).each( function(i) { var $el = $( this ), animClassDown = $el.data( 'animateDown' ), animClassUp = $el.data( 'animateUp' ); $el.waypoint( function( direction ) { if( direction === 'down' && animClassDown) { $head.attr('class', 'header-fixed ' + animClassDown); } else if( direction === 'up' && animClassUp){ $head.attr('class', 'header-fixed ' + animClassUp); } }, { offset: -250 }); });
结合inview addon的代码如下:
Javascript:
var inview = new Waypoint.Inview({ element: $('.my-animated-row')[0], enter: function(direction) { $('.list.start-1').addClass('fadeInUp'); $('.image-container.start-2').addClass('fadeInUp stage2'); $('.list.start-3').addClass('fadeInUp stage3'); }, entered: function(direction) { notify('Entered triggered with direction ' + direction) }, exit: function(direction) { notify('Exit triggered with direction ' + direction) }, exited: function(direction) { notify('Exited triggered with direction ' + direction) }
HTML:
<div class="row my-animated-row"> <div class="col-sm-12 col-md-6 col-md-push-3"> <div class="image-container image-container--empty animated fadeInUpStart start-2"> <div class="video-container video-container--large"> <iframe src="http://player.vimeo.com/video/18776121?title=0&byline=0&portrait=0" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>iframe> div> div> div> <div class="col-sm-6 col-md-3 col-md-pull-6"> <ul class="list list--bordered list--top-line animated fadeInUpStart start-1"> <li>Etiam augue sem, pellentesque li> <li>Duis nec neque posuere, gravidali> <li>Cras felis nunc, tempus utli> <li>Ut tincidunt varius pellentesque. Aenean laoreet nibh et nulla li> <li>Donec imperdiet posuere dolor, at fringilla augueli> ul> div> <div class="col-sm-6 col-md-3"> <ul class="list list--bordered list--top-line animated fadeInUpStart start-3"> <li>Etiam augue sem, pellentesque li> <li>Duis nec neque posuere, gravidali> <li>Cras felis nunc, tempus utli> <li>Ut tincidunt varius pellentesque. Aenean laoreet nibh et nulla li> <li>Donec imperdiet posuere dolor, at fringilla augueli> ul> div> div>
VARNISH+ Redis+CDN将网站飞起来