前後端開發資源提供 (程式面)

前後端開發資源提供 (程式面) === ###### tags: `frontend` `backend` `javascript` `css` ## 零碎的東西 ### CSS - [元素定位的方式 (flex) OXXO](https://www.oxxostudio.tw/articles/201501/css-flexbox.html): - [position: absolute / relative 差別](https://zh-tw.learnlayout.com/position.html) - [flexbox template](https://tobiasahlin.com/blog/common-flexbox-patterns/#stretch-middle-fixed-spacing) - [RWD hamburger](https://codepen.io/mutedblues/pen/MmPNPG) - [縮放時維持 div ratio](https://stackoverflow.com/questions/1495407/maintain-the-aspect-ratio-of-a-div-with-css) - [use BS4 to make header](https://www.codeply.com/go/05hEHoiUvv) - [ parallax視差捲動效果](https://andy6804tw.github.io//2018/02/02/css-background-attachment/) - [What is vmin in css](https://pjchender.blogspot.com/2015/04/css-3vh-vw.html) - [SVG PATH WITH PERCENTAGE](https://codepen.io/gionkunz/pen/KDvLj) - [use border&rotate to make ARROW](https://jsfiddle.net/vocyj3ku/) - [use float: left to make bulletin](http://jsfiddle.net/Renson/P4S8z/4/) - [use float & clear to make complicated section](https://stackoverflow.com/questions/28526933/css-block-within-block-float-right) - [當邊框是圖片時該怎麼調整，才不會在 RWD 時跑版](https://codepen.io/chris_tudor/pen/OJPeQgb) - [half oval/ellipse](https://stackoverflow.com/questions/33855431/half-an-oval-shape-in-css) - [:target 是什麼](https://www.w3schools.com/cssref/sel_target.asp) - [用 flexbox 製作 form (RWD)](https://webdesign.tutsplus.com/tutorials/building-responsive-forms-with-flexbox--cms-26767) - [CSS border 手繪框線、三角形](https://wcc723.github.io/css/2020/02/21/css-border/) - [css border-radius 產生手繪框、細胞圖](https://www.thetekteam.co.uk/css-border-radius-can-do-that/) - [pointer-events: none 讓元素穿透](https://www.oxxostudio.tw/articles/201409/pointer-events.html) - [draw a circle sector in CSS](https://stackoverflow.com/questions/21205652/how-to-draw-a-circle-sector-in-css) - [progress ring (use SVG)](https://css-tricks.com/building-progress-ring-quickly/) - [list style customize](https://moderncss.dev/totally-custom-list-styles/) - [製作簡易 lightbox by :target](https://timchen0607.medium.com/%E7%B4%94-css-%E8%A3%BD%E4%BD%9C%E7%9A%84-lightbox-f3284d97f122) - [ensure text is inside rounded div](https://stackoverflow.com/questions/19909266/how-can-i-ensure-that-text-is-inside-rounded-div) - [網頁 DOM 事件的效能優化：Debounce 和 Throttle](https://mropengate.blogspot.com/2017/12/dom-debounce-throttle.html) - [用 psudo-element 把裝飾圖片放在 border 上](https://stackoverflow.com/questions/29757703/how-to-add-a-border-bottom-image-with-css) - [Pagination with box-shadow](https://jsfiddle.net/8nrcpvzt/) - [display grid: 排列格子 card](https://css-tricks.com/look-ma-no-media-queries-responsive-layouts-using-css-grid/) - [sidebar with pure-css](https://codepen.io/sergioandrade/pen/qBZKgVV) - [table with border-radius](https://pjchender.blogspot.com/2015/12/table-with-border-radius.html) - 如何作樹狀圖 - [css tree example 1](https://cssdeck.com/labs/pure-css-tree-menu-framework) - [css tree example 2](https://blog.yowko.com/pure-css-treeview/) - [button 做出往下壓的特效](https://codepen.io/headonkeyboard/pen/VwYdjRd?editors=0100) ### JS - [websockets-api: 開啟多人聊天室](https://github.com/websockets/ws#how-to-get-the-ip-address-of-the-client) - [加入line share button](http://blog.ja-anything.com/2018/01/09/%E5%9C%A8%E7%B6%B2%E9%A0%81%E4%B8%8A%E5%8A%A0%E5%85%A5%E7%94%A8line%E5%88%86%E4%BA%AB%E7%9A%84%E6%8C%89%E9%88%95%E5%90%A7%EF%BC%81-line-social-plugins-line-it-button/) - [add FB share button](http://blog.ja-anything.com/2018/01/10/%E5%9C%A8%E7%B6%B2%E9%A0%81%E4%B8%8A%E5%8A%A0%E5%85%A5%E7%94%A8facebook%E5%88%86%E4%BA%AB%E7%9A%84%E6%8C%89%E9%88%95%E5%90%A7%EF%BC%81-facebook-sharing-button/) - [jQuery obj 變數會有 \$前綴，一般 dom 沒有 (單純習慣)](https://stackoverflow.com/questions/205853/why-would-a-javascript-variable-start-with-a-dollar-sign) - [use reduce function to group json array](https://www.ucamc.com/e-learning/javascript/352-%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8javascript%E7%89%A9%E4%BB%B6key%E5%B0%8D%E9%99%A3%E5%88%97array%E9%80%B2%E8%A1%8Cgroup%E5%88%86%E7%BE%A4%E7%B5%84) - [jquery: fire change event when input changes](https://stackoverflow.com/questions/10270452/jquery-change-not-firing-until-blur) - [store rows data that multi input fields in one row (Jquery)](https://stackoverflow.com/questions/10866291/convert-li-input-values-data-to-json) - [立即呼叫的函式表示式(IIFE)](https://ithelp.ithome.com.tw/articles/10193313) - [JS coding style !!!](https://airbnb.io/javascript/) - [如何使用 ES6 的 import / export](https://wcc723.github.io/development/2020/03/25/import-export/) - [return string with first char uppercase 首字大寫](https://stackoverflow.com/a/1026087) - [原生 js 實作 append() 功能](https://stackoverflow.com/a/60722934) - [原生 js 實作 get data-\* attribute 功能](https://stackoverflow.com/a/59332823) - [import 前要先設定 type="module"](https://stackoverflow.com/a/58679392) - [call clearInterval in setInterval](https://stackoverflow.com/a/16599921) - [Range() in js](https://stackoverflow.com/a/10050831) - [format integer in specific length](https://stackoverflow.com/a/29833199) ### PHP - [Curl Command 指令與基本操作入門教學](https://blog.techbridge.cc/2019/02/01/linux-curl-command-tutorial/) - [add object to an array](https://stackoverflow.com/a/14572501) --- ### Slider - [左右滑動的slider](http://plnkr.co/edit/GxufhJaRJn2SfGb4ilIl?p=preview&preview) - [只能用在手機的 Slider 教學 (Mobile Horizontal Scrolling Containers)](https://codeburst.io/how-to-create-horizontal-scrolling-containers-d8069651e9c6) - [圖片左右比較 slider](https://lea.verou.me/2014/07/image-comparison-slider-with-pure-css/) - [BS4 Carousel 一個 item 有三個 div](https://codepen.io/davidbiek/pen/bMrQKN) - [THUMBNAIL CAROUSEL 一個 item 有三個 div (RWD 不完全)](https://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=thumbnail-carousel) - [Carousel slider 直版流動](https://codepen.io/emrankhan016/pen/eWwLbw) ### SCSS - [Start use Scss in project](https://code.likeagirl.io/getting-started-with-sass-scss-972c266e96e7) ### 其他 - [Drupal 8 架站軟體安裝設定](https://www.kjnotes.com/devtools/60) - [用滑鼠點點畫出有向圖 (Go.js)](https://stackoverflow.com/questions/47903142/javascript-library-to-draw-network-graph-using-mouse) --- ## template - https://experiments.withgoogle.com/collection/chrome - https://themeforest.net/ - https://freshdesignweb.com/ - https://xd.adobe.com/spec/934efdb7-a7e4-47d5-572e-efece0914f62-e57f/grid - https://waaark.com/works/ - [空白 BS4 專案](https://jsfiddle.net/tmvz73qg/1/) - [用箱子排版 navigation / header ](https://jsfiddle.net/w5fp86j2/1/) ## 成果 - [BUTTON](https://jsfiddle.net/o5nfpk38/) 1. border-bottom effect 2. half width border 3. RWD 4. box-shadow - [Hamburger](https://jsfiddle.net/epxg9d51/) - hamburger - fixed navbar - anchor link - [Hamburger-2](https://jsfiddle.net/xz9pw4o0/) - Hamburger - absolute navbar - JS to toggle menu - [Hamburger icon](https://jsfiddle.net/4jzr15mt/) - 點了會旋轉 - 用 psudo-element - [navigation](https://jsfiddle.net/3ez5kyuv/) - 特效會去抓目前位置改變地方 - 有用 JQuery - [Carousel by BS4](https://jsfiddle.net/qb1d4k7e/) - BS4: carousel - BS4: blockquote - BS4: grid-layout - [Carousel by BS4 (2)](https://jsfiddle.net/uo8ebt79/) - BS4: carousel - [Simple Text Editor](https://jsfiddle.net/u54mqx0h/1/) - [custom Select outline](https://jsfiddle.net/Lmaqvphk/1/) - pure css - [Simple modal](https://jsfiddle.net/25nzqck0/1/) - Jquery - [handwriting style border](https://jsfiddle.net/fzhk5qcx/) - [loading-ring (web component)](https://jsfiddle.net/3zq1hp0n/) - [css 3d box rotation](https://jsfiddle.net/mn4q3y59/) - pure css - perspective, preserve-3d, rotateXYZ, keyframes ... - [css-3D 左右翻轉](https://jsfiddle.net/wfv1zgn0/) - [教學](https://stackoverflow.com/questions/49140448/how-do-animation-without-keyframes-but-with-transition) - [CSS 做一個手寫報紙 ](https://jsfiddle.net/co0pq5u1/) - filter - shape-outside - 用 border 做出手寫風 - [學會使用 fadein 特效](https://jsfiddle.net/t13en8vz/) - [Dashboard 會出現的百分比圈圈 (使用 svg)](https://jsfiddle.net/gk9vsnaj/) - [參考 codepen](https://codepen.io/square0225/pen/QdvLQg) - [成果 dashboard](https://codepen.io/dlvhdr/pen/MWpWbNE) - [獲取 SVG 裡面 child 的 attributes](https://stackoverflow.com/a/59898348) - [Countdown timer 倒數計時器](https://jsfiddle.net/rfjbunot/) - [jquery.fn.extend](https://api.jquery.com/jquery.fn.extend/) - [用 CSS 做吉普力小人](https://jsfiddle.net/7gszf8h1/) - [pure css skeleton-loading](https://jsfiddle.net/sya6qtp4/) - [Chatroom Css](https://jsfiddle.net/wx35L8q1/) - [kaleidoscope](https://jsfiddle.net/dxuL7jn9/) ## 其他 - [jquery 的 filter](https://stackoverflow.com/questions/13594788/javascript-filter-array-of-objects/41832376) ```javascript= var arr = ['app', 'ios', 'android', 'qq', 'google', 'opera']; var filtered = $.grep(arr, function(a) { return a[0] === 'q'; }); var list = arr.filter(function (a) { return a[0] === 'g'; }); ``` - css selector "+" 相鄰選擇器 ```htmlembedded=  <div> <p>I will not be styled.</p> <p>I will not be styled.</p> </div> <p>I will be styled.</p> <p>I will not be styled.</p> ``` - css selector "~" 相鄰們選擇器 - "+" 只會選一個， "~" 會選出全部 - css selector ">" 直屬孩子們選擇器 ```htmlembedded=   <div class='outer'> <div class='middle'> <div class='inner'> i will not be styled. </div> </div> </div> <div class='outer'> <div class='middle'> <div class='inner'> i will not be styled. </div> </div> </div> ``` - Jquery 刪除 option ```javascript= // 刪除第二個 ~ 最後一個選項 $('select').find('option:not(:first)').remove(); ``` - JS 的 filter ```javascript= var newList = list.filter(function (d) { return d > 5; }); ``` - 建立一串 radio 的 listener，勾選選項變化時: ```javascript= <div id='group'> <input type="radio" name='r'> <input type="radio" name='r'> <input type="radio" name='r'> ... </div> $('#group').on('change', 'input[name="r"]', function () {...}); ``` - promise 基本用法 ```javascript= /* Promise 用法 */ $.when(wait()) .done(function (r) { second(); }) .done(function (res) { alert('all done'); }); ``` - [event handlers always execute in order 順序性觸發 listener](https://stackoverflow.com/questions/2360655/jquery-event-handlers-always-execute-in-order-they-were-bound-any-way-around-t) - `.val().change()` 會觸發失敗，無法確定順序性 - [順序性觸發 listener 2](https://stackoverflow.com/a/50685921) - 比前一個好一點，在 .change() 的 function 裡面設 `setTimeout()` 延緩它發生時間 ## 線上課程 - https://www.coursera.org/specializations/full-stack-react

Read more

Github 教學文

Android App

【CSS】 Kevin Powell's CSS lessons

React 101