some resource favor

時間  2019-11-11
標籤 resource favor 简体版
原文   原文鏈接

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

能夠和Tinymce結合使用完美實現WYSIWYG的效果php

http://blurjs.com/  :支持背景或其餘element的糊化效果css

image的crop,blur操做通常是由前端的js/html/css來實現所見即所得，隨後將參數傳給相似php的Image庫函數在後端操做，而且最終保存。若是隻想對其中選擇的部分來作模糊化效果應用，則能夠先copy一個新的image，隨後對這個image來執行imagecopy,imagefilter，隨後將結果再copy回去便可。html

$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/  數學表達式計算機圖片展現的理論基礎vue

https://www.mathjax.org/  以svg, html5的方式來展現數學表達式，很好用，已經捐贈5usdhtml5

http://jsbin.com/yadapavabe/2/  本身編寫的簡單的wrap mathjax的應用java

http://manuels.github.io/texlive.js/  latex的javascript實現，能夠以browser編譯運行的方式生成包含複雜數學表達式的pdf文件node

https://khan.github.io/KaTeX/: 自包含無依賴的Tex轉換js庫，好用python

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://www.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&amp;byline=0&amp;portrait=0" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
                            </div>
                        </div>
                    </div><!-- end col -->

                    <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, gravida</li>
                            <li>Cras felis nunc, tempus ut</li>
                            <li>Ut tincidunt varius pellentesque. Aenean laoreet nibh et nulla </li>
                            <li>Donec imperdiet posuere dolor, at fringilla augue</li>
                        </ul>
                    </div><!-- end col -->
                    

                    <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, gravida</li>
                            <li>Cras felis nunc, tempus ut</li>
                            <li>Ut tincidunt varius pellentesque. Aenean laoreet nibh et nulla </li>
                            <li>Donec imperdiet posuere dolor, at fringilla augue</li>
                        </ul>
                    </div><!-- end col -->
                </div><!-- end row -->

 

  • 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/ 網易雲信 短信驗證服務
  • https://www.twilio.com 相似網易雲信，能夠方便實現多人chat的api
  • http://www.cctime.com/html/2015-10-29/201510291437151697.htm  ：對雲信，融雲，環雲，騰訊雲通訊的評比
  • 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/ 內網穿越
  • 人工智能人臉識別平臺 https://www.megvii.com/
  • 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
  • www.guru.com : 國外豬八戒
  • https://www.jasondavies.com/wordcloud/ 支持中文tag cloud
  • http://www.welie.com/patterns 一些設計pattern參考
  • https://github.com/danwrong/restler/blob/master/lib/restler.js nodejs client rest api
  • https://vux.li 一個基於vue和weui的組件框架，主要用於服務移動端微信網頁ui設計，不錯
  • www.kancloud.cn 一個線上不錯的電子書籍網站
  • http://e.qq.com/ads/ 廣點通 騰訊廣告體系
  • https://github.com/segmentio/nightmare/blob/master/Readme.md   自動化測試及爬蟲
  • https://www.vanamco.com/ghostlab/ 處理多個瀏覽器包括任何mobile瀏覽器的inspect
  • http://mpvue.com/ vuejs微信小程序組件化開發
  • http://www.javashuo.com/article/p-vrslwiak-ms.html 微信小程序使用mpvue組件開發實現定製tabbar
  • https://slarker.me/ 做者使用ghost搭建我的blog有一些體會
  • http://docs.seleniumhq.org/ python爬蟲
  • https://unsplash.com   https://pixabay.com https://www.pexels.com 幾個優質的高水平面版權圖片庫
  • https://typora.io/ 很棒的markdown編輯器
  • https://github.com/Chatie/wechaty/ 微信api接口微信機器人開發
  • https://github.com/gengchen528/wechatBot 微信機器人
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程