some resource favor

http://www.moxiemanager.com/getit/ : picture file manage with blur  

可以和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

OAuth 4 Laravel

https://github.com/lucadegasperi/oauth2-server-laravel 适用于laravel5的oauth2认证支持package

Git 客户端:http://www.syntevo.com/smartgit   download.tortoisegit.org

 http://dropzonejs.com/: 拖拽批量上传文件js库

  • 如果你有一个webapp,则可以通过html编写代码将要展示的内容无缝放置于iphone,ipac,mac屏幕上: https://github.com/pixelsign/html5-device-mockups 
  • 热力分布图前端库heatmap.js 
  • 在web网页上展示项目进展及计划 https://github.com/sbstjn/timesheet.js
  • 介绍一个方便前端设计人员选择配色方案的在线工具:保证背景和文字的鲜明对比  http://colorsafe.co/
  • http://coleure.com/ 是一个配色设计的不错的工具
  • https://leaverou.github.io/contrast-ratio 和上面的工具结合用配色比较爽
  • html5 video的同步解说词加载 http://iandevlin.com/html5/dynamic-track/  https://hacks.mozilla.org/2014/07/adding-captions-and-subtitles-to-html5-video/
  • zoom.js实现点击以后能够放大的功能 https://github.com/fat/zoom.js
  • http://howtocenterincss.com/ 该工具根据你的layout布局要求自动生成对应的css
  • http://makerbook.net 前端资源库的资源整理
  • http://tympanus.net/codrops/2013/09/30/animated-border-menus/  如何通过css,js实现sidebar menu animation,值得学习
  • https://github.com/madrobby/keymaster  web页面中通过javascript来设置和定义hotkey的微小library
  • http://www.getmdl.io/  替代bootstrap css framework
  • http://draw.io  画流程图,mindmap非常方便
  • http://slides.com  在线画ppt
  • http://lesonic.com/zh/  localjs使用html+css+js来构建桌面desktop程序
  • http://electron.atom.io/ Electron :一个使用html,css,js来构造跨平台desktop的开源项目,例如一个less/sass及时编译桌面工具
  • https://html5boilerplate.com/ 可以定制符合html5 best practice的template,作为前端开发的基础
  • http://imakewebthings.com/waypoints/guides/getting-started/   用于实现监控鼠标是否scroll使得元素进入了viewport中,从而实现特定的效果。比如:当向下滚动时,我们可能希望页面的header始终保持在页面可见的最上端,就可以。原理就是当出viewport时,设置一个css class, transformY将fixed position的head向上翻滚45px,使得search box不再显示,而再入viewport时,则继续transformY将head的transformY传入0。再通过css的transition属性来实现动画效果。waypoint结合inview addon也可以实现inview event的分发,甚至实现lazyload的功能,需要进一步研究
    //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>

 

  • https://github.com/flesler/jquery.scrollTo  : 可以实现简单Go To Top的功能,点击后自然滚动到对应的section
  • http://paintstrap.com/  可以比较方便可视化地设计选择中意的color scheme 
  • http://www.colorzilla.com/gradient-editor/   用于可视化设计gradient css的工具,有一些预定义好的可供选用
  • http://simplefocus.com/flowtype/demo.html  实现font fluid的js库
  • https://www.gitbook.io/  https://leanpub.com/ 自写书的系统
  • http://leeluolee.github.io/2014/10/24/use-puer-helpus-developer-frontend/ 国内大侠写的免刷新前端开发工具
  • http://www.mihtool.com/ ios系统远程调试
  • http://responsivevoice.org/faq/ tts解决方案,文字到语音转换解决方案
  • http://www.codeproject.com/Articles/435434/Text-to-Speech-tts-for-the-Web  一个很好的TTS解释性方案
  • http://www.xfyun.cn/services/ise 科大讯飞 语音相关开放平台
  • http://www.chivox.com/  驰声科技 教育语音合成识别评测技术提供商:为学而思,新东方,外研社,一起作业网提供技术支持
  • http://netease.im/ 网易云信 短信验证服务
  • http://www.easemob.com/ 富文本即时通讯服务商
  • http://wex5.com/cn/wex5-welcome/ 国内phoneGAP开发打包神器
  • http://baike.baidu.com/link?url=zd1HknMfGPLdLGqIdBPbeZqyEzG9w8BjkCFY3vFfOUcWXmvXJ0gwDiTSt8yOWZ6JhcreCA744Qh7-2KFSgSV2_ 互联网+
  • http://prismjs.com/ 非常轻量级高性能优雅的程序代码语法高显javascript/css库,支持不同的theme,可以用于学习
  • https://en.gravatar.com/userimage/98007148/7621bff3f26ee18e9d84ffa6aaa38d09.jpg my grata image
  • http://codecanyon.net/item/svg-avatars-generator-jquery-integrated-script/full_screen_preview/6498300  GRATA个人形象制作工具
  • http://asana.com 团队协作工具
  • http://www.patternify.com/ 一个css url(data:image) pattern的制作工具,很实用,可以用于制作web背景
  • http://subtlepatterns.com/ 现成的web背景pattern集合
  • http://ui-patterns.com/  关于页面ui设计中的共性问题及对应解决方案讨论的网站,值得学习研究
  • http://www.starbucks.com/static/reference/styleguide/ style guide pattern 
  • http://ux.mailchimp.com/patterns 著名的mailchimp ux pattern lib
  • http://patternlab.io/  用于指导以component来作为前端开发的方法框架
  • https://github.com/aui/font-spider 中文在线字体font-face,汉字子集生成 毛体
  • https://www.seo.com/blog/identifying-combating-duplicate-content-issues/  :关于SEO中的duplicate content问题及解决方案: www.xx.com->301到xx.com;或者Rel=Canonical标签
  • https://css-tricks.com/snippets/css/  一些实用的snippet参考
  • http://zhanzhang.baidu.com  可以在自己网站中使用baidu搜索来直接搜索自己网站的内容
  • http://changyan.kuaizhan.com/ 搜狐新闻评论接入服务
  • https://github.com/ben-eb/gulp-uncss 一个通过瘦身css来解决因为你不断使用第三方框架而导致的css不断膨胀问题
  • http://bouncejs.com/  CSS3 animation预定义导出css keyframe
  • http://www.sitepoint.com/complete-guide-reducing-page-weight/  关于页面优化的很好的文章
  • http://bensmithett.com/bem-modifiers-multiple-classes-vs-extend/  关于BEM方法中是否使用多个class还是使用一个class的比较好的比较性文章,各有利弊。我比较倾向于多class(和bootstrap比较相似)
  • http://akdubya.github.io/   http://mustache.github.io/#demo  可能用于BEM前端开发的template engine
  • http://looksgoodworkswell.blogspot.jp/2012/11/list-of-mockupprototyping-tools.html  prototype tooling list
  • http://nec.netease.com/standard/css-sort.html 网易的css分类方法及对应知识库
  • http://naotu.baidu.com/file/c8808dd5703104bddc0ef7e76f48e094 我总结的关于css的认识的百度脑图
  • http://demo.open.weixin.qq.com/  微信js-sdk可以让使用html5调用微信应用成为可能,为你的创意打开窗口@! 具体微信js-api到底是怎么工作的,下面我画了一张概念图有助于我们来理解。我理解是微信不完全遵守传统html5浏览器的安全要求,利用微信自带的浏览器绕过safari浏览器对在浏览器中运行的js放权,权限控制由本来是由js同源策略以及w3c定义的html5安全规范约束的,变成了微信自身完全控制的了(比如可以访问手机原生的摄像,扬声器等资源)
  • http://framerjs.com/  prototyping mobile apps
  • http://www.cyzone.cn/ 创业邦
  • http://www.csdn.net/article/2015-09-24/2825784 互联网创业必备工具盘点
  • http://www.jeasyui.com/  一套基于jquery的web page交互方案
  • https://chrome.google.com/webstore/detail/page-marker/jfiihjeimjpkpoaekpdpllpaeichkiod  goole chrome浏览器的ink support扩展,类似于microsoft edge的网页涂鸦功能,便于demo, education
  • http://shouji.baidu.com/soft/item?docid=8443014&from=web_alad_5&f=search_app_%E5%AE%B6%E9%95%BF%E9%80%9A%40list_1_title%405%40header_all_input 百度手机助手 查看android app下载情况
  • http://www.anzhi.com/ 安智 安卓应用市场
  • http://www.appchina.com/ 应用汇
  • http://apk.gfan.com/ 
  • http://zhushou.360.cn/search/index/?kw=%E5%AE%B6%E9%95%BF%E9%80%9A  最牛的是百度和360里面查看android下载量
  • http://www.quirksmode.org/css/selectors/  css兼容性参考大全页面
  • http://www.redocn.com/ 设计师在线交易资源
  • http://edu.csdn.net/course/detail/1411 微信JAVA开发开篇概述
  • http://edu.csdn.net/course/detail/1369 PHP微信开发
  • http://www.html5rocks.com/en/tutorials/webaudio/intro/ 使用html5 audio api实现混音等高级应用的例子
  • https://www.zhihu.com/question/22342006  一次典型的推广运营活动
  • annotatepro.mockflow.com 一个很好用的在线图片涂鸦注释编辑工具,也可以做mockup,以及banner,免费好用
  • http://demo.koel.phanan.net/  vuesjs+laravel+live audio streaming 例子
  • http://teahour.fm/  互联网技术方面的访谈网站
  • qiniu.com 七牛 CDN视频加速转码服务
  • http://www.iinterest.net/2011/05/02/about-viewport/ 关于viewport的前世今生详尽描述
  • http://www.kdnuggets.com/software/web-mining.html 国外数据挖掘方面的资讯
  • https://github.com/aronwoost/sublime-expand-region 在sublime中快速选中内容,非常好用
  • http://browsershots.org/  浏览器的兼容性测试并且给出对应的snapshot
  • https://cdn.polyfill.io/v2/docs/features/#getComputedStyle IE8兼容资源!!
  • http://hustlzp.com/post/2014/01/ie8-compatibility IE8兼容性相关的问题汇总
  • http://www.wex5.com/ H5 高仿移动native app 开发资源
  • https://jenssegers.com/72/using-blade-outside-of-laravel 将blade在没有laravel的PHP场景下使用,可以了解类似smarty的工作流程
  • https://github.com/ftlabs/fastclick  fastclick解决在移动浏览器上tap被确认为click时的300ms 延迟,提升移动端web浏览器体验
  • samson PS01 山逊大号双层麦克风防喷罩 话筒防噪网 防风网口水罩

  • http://laradrop.elegrit.com/file-manager-example  laravel and dropzon.js file manager package: good for use
  • https://github.com/johnlui/AliyunOSS  阿里云OSS的laravel package
  • https://github.com/orzcc/aliyun-oss 阿里云OSS的laravel filesystem driver package, 可以直接使用,很棒
  • https://github.com/overtrue/share.js  一键分享适合中国国情的小前端组件
  • http://momentjs.com/  javascript date 人性化的lib
  • https://app.cssmenumaker.com  制作各种menu小工具 137292143
  • http://developer.baidu.com/vcast 百度text to voice开放平台,可以用于题目朗读服务
  • http://yuyin.baidu.com/asr  rest api方式访问百度语音识别模块
  • http://prerender.io VUEJS Powered site prerender for SEO
  • https://github.com/bevacqua/dragula  :非常棒棒的drag and drop library!!
  • 短信验证:网易和阿里大鱼
  • https://github.com/ElemeFE/element 前端vuejs2.0常用组件
  • https://github.com/luojilab/radon-ui 和前面elementui PK的前端组件库,但是不支持vue2.0
  • http://588ku.com/ 一些设计素材
  • http://www.haotu.net/ 设计素材
  • www.chuangkit.com 创客贴设计
  • http://www.asqql.com/gifzip/ 在线图片压缩工具 不错好用
  • https://thenounproject.com 几乎可以查找到任何你想用的icon svg
  • VARNISH+ Redis+CDN将网站飞起来

  • D3.JS 可以读取csv文件数据,支持多种文件类型  http://learnjsdata.com/read_data.html
  • 微信公众号开发,支付回调调试时本地调试环境必备: http://www.sunnyos.com
  • web或mobile app的使用帮助引导工具: http://introjs.com/   更多请看http://stackoverflow.com/questions/23363529/client-side-feature-tour-tutorial-instructional-overlay-system
  • 如何列出github上star数量最多的开源project? https://github.com/search?q=stars:%3E1&s=stars&type=Repositories
  • screen cast录屏时建议1280x720 hdpi, 在录制视频时可以同步也可以分开录制视频和声音,并且应该灵活使用暂停键,比如需要时间思考后面要讲的内容时就暂停,如果发现出错了,应该reset掉这部分错误的内容
  • ngrock.cc/https://natapp.cn/ 内网穿越
  • hilite.me // server端代码prettyfy工具,类似jsbin代码风格输出,可嵌在blog中方便漂亮地展示代码
  • d3js examples: http://techslides.com/over-1000-d3-js-examples-and-demos
  • https://ke.qq.com/webcourse/index.html#course_id=146326&term_id=100166000&taid=1453373983439766&vid=k14198iwn6s  微课开发
  • https://github.com/zhanggyb/nndl 一本神经网络和机器学习的letex电子书源码,可以编译为pdf

你可能感兴趣的:(some resource favor)