├── .editorconfig ├── .gitignore ├── .weekly-feed ├── 2016-03-13-vote.json ├── 2016-03-13.json ├── 2016-03-20-vote.json ├── 2016-03-20.json ├── 2016-03-27-vote.json ├── 2016-03-27.json ├── 2016-04-03-vote.json ├── 2016-04-03.json ├── 2016-04-10-vote.json ├── 2016-04-10.json ├── 2016-04-17-vote.json ├── 2016-04-17.json ├── 2016-04-24-vote.json ├── 2016-04-24.json ├── 2016-05-01-vote.json ├── 2016-05-01.json ├── 2016-05-08-vote.json ├── 2016-05-08.json ├── 2016-05-15-vote.json ├── 2016-05-15.json ├── 2016-05-22-vote.json ├── 2016-05-22.json ├── 2016-05-29-vote.json ├── 2016-05-29.json ├── 2016-06-05-vote.json ├── 2016-06-05.json ├── 2016-06-12-vote.json ├── 2016-06-12.json ├── 2016-06-19-vote.json ├── 2016-06-19.json ├── 2016-06-26-vote.json ├── 2016-06-26.json ├── 2016-07-03-vote.json ├── 2016-07-03.json ├── 2016-07-10-vote.json ├── 2016-07-10.json ├── 2016-07-17-vote.json ├── 2016-07-17.json ├── 2016-07-24-vote.json ├── 2016-07-24.json ├── 2016-07-31-vote.json ├── 2016-07-31.json ├── 2016-08-07-vote.json ├── 2016-08-07.json ├── 2016-08-14-vote.json ├── 2016-08-14.json ├── 2016-08-21-vote.json ├── 2016-08-21.json ├── 2016-08-28-vote.json ├── 2016-08-28.json └── getData │ ├── bookmarklet-auto-issue.js │ ├── bookmarklet-vote.js │ ├── calcTop10.js │ ├── index.html │ ├── js.js │ ├── lastSunday.js │ ├── pullFeeds.js │ └── queryVote.js ├── 404.md ├── CHANGELOG.md ├── CNAME ├── LICENSE ├── README.md ├── _config.yml ├── _data ├── 2016-03-13.yml ├── 2016-03-20.yml ├── 2016-03-27.yml ├── 2016-04-03.yml ├── 2016-04-10.yml ├── 2016-04-17.yml ├── 2016-04-24.yml ├── 2016-05-01.yml ├── 2016-05-08.yml ├── 2016-05-15.yml ├── 2016-05-22.yml ├── 2016-05-29.yml ├── 2016-06-05.yml ├── 2016-06-12.yml ├── 2016-06-19.yml ├── 2016-06-26.yml ├── 2016-07-03.yml ├── 2016-07-10.yml ├── 2016-07-17.yml ├── 2016-07-24.yml ├── 2016-07-31.yml ├── 2016-08-07.yml ├── 2016-08-14.yml ├── 2016-08-21.yml └── 2016-08-28.yml ├── _includes ├── analytics.html ├── card.html ├── counter.html ├── disqus.html ├── meta.html └── svg-icons.html ├── _layouts ├── default.html ├── page.html └── post.html ├── _plugins ├── merge_space.rb └── strip_url_protocol.rb ├── _posts ├── 2016-01-01-draft.md ├── 2016-03-13-000.md ├── 2016-03-20-001.md ├── 2016-03-27-002.md ├── 2016-04-03-003.md ├── 2016-04-10-004.md ├── 2016-04-17-005.md ├── 2016-04-24-006.md ├── 2016-05-01-007.md ├── 2016-05-08-008.md ├── 2016-05-15-009.md ├── 2016-05-22-010.md ├── 2016-05-29-011.md ├── 2016-06-05-012.md ├── 2016-06-12-013.md ├── 2016-06-19-014.md ├── 2016-06-26-015.md ├── 2016-07-03-016.md ├── 2016-07-10-017.md ├── 2016-07-17-018.md ├── 2016-07-24-019.md ├── 2016-07-31-020.md ├── 2016-08-07-021.md ├── 2016-08-14-022.md ├── 2016-08-21-023.md └── 2016-08-28-024.md ├── _sass ├── abstracts │ ├── _mixin.scss │ └── _var.scss ├── base │ ├── _base.scss │ └── _shame.scss ├── components │ ├── _card.scss │ ├── _nav.scss │ ├── _page.scss │ ├── _pagination.scss │ └── _search.scss ├── layout │ ├── _footer.scss │ ├── _header.scss │ ├── _navigation.scss │ └── _stick-footer.scss ├── pages │ ├── _index.scss │ └── _tags.scss └── vendors │ ├── _highlights.scss │ ├── _normalize.scss │ └── basscss │ ├── _align.scss │ ├── _all.scss │ ├── _background-colors.scss │ ├── _background-images.scss │ ├── _border-colors.scss │ ├── _border.scss │ ├── _btn-outline.scss │ ├── _btn-primary.scss │ ├── _btn.scss │ ├── _colors.scss │ ├── _darken.scss │ ├── _flexbox.scss │ ├── _forms.scss │ ├── _grid.scss │ ├── _hide.scss │ ├── _highlight-dark.scss │ ├── _highlight.scss │ ├── _input-range.scss │ ├── _layout.scss │ ├── _lighten.scss │ ├── _margin.scss │ ├── _media-object.scss │ ├── _padding.scss │ ├── _position.scss │ ├── _progress.scss │ ├── _responsive-margin.scss │ ├── _responsive-padding.scss │ ├── _type-scale.scss │ ├── _typography.scss │ └── basscss.scss ├── about.md ├── feed.xml ├── gulpfile.js ├── images └── 404.jpg ├── index.html ├── package.json ├── postcssconfig.json ├── scripts ├── search.js └── search_data.json ├── search.html ├── style.scss └── tags.md /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | _site 2 | .DS_Store 3 | .jekyll 4 | .publish 5 | .jekyll-metadata 6 | .bundle 7 | .sass-cache 8 | Gemfile 9 | Gemfile.lock 10 | node_modules 11 | .weekly-feed/getData/token.json 12 | .weekly-feed/issue-*.json 13 | -------------------------------------------------------------------------------- /.weekly-feed/2016-05-22-vote.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "order": "# 1", 4 | "likes": "248", 5 | "comments": "7", 6 | "shares": "49", 7 | "vote": 2, 8 | "Rplus": "+1", 9 | "ryrocks": "+1", 10 | "calcSum": 362.5, 11 | "postId": "521085554595481_1002178373152861" 12 | }, 13 | { 14 | "order": "# 2", 15 | "likes": "239", 16 | "comments": "25", 17 | "shares": "11", 18 | "vote": 0, 19 | "calcSum": 298.5, 20 | "postId": "521085554595481_1002379173132781" 21 | }, 22 | { 23 | "order": "# 3", 24 | "likes": "157", 25 | "comments": "8", 26 | "shares": "14", 27 | "vote": 0, 28 | "calcSum": 197, 29 | "postId": "521085554595481_1003128689724496" 30 | }, 31 | { 32 | "order": "# 4", 33 | "likes": "122", 34 | "comments": "1", 35 | "shares": "8", 36 | "vote": 0, 37 | "calcSum": 139.5, 38 | "postId": "521085554595481_1001124846591547" 39 | }, 40 | { 41 | "order": "# 5", 42 | "likes": "51", 43 | "comments": "20", 44 | "shares": "14", 45 | "vote": 2, 46 | "Rplus": "+1", 47 | "ryrocks": "+1", 48 | "calcSum": 115, 49 | "postId": "521085554595481_1002109983159700" 50 | }, 51 | { 52 | "order": "# 6", 53 | "likes": "68", 54 | "comments": "0", 55 | "shares": "6", 56 | "vote": 0, 57 | "calcSum": 80, 58 | "postId": "521085554595481_1004230506280981" 59 | }, 60 | { 61 | "order": "# 7", 62 | "likes": "43", 63 | "comments": "8", 64 | "shares": "0", 65 | "vote": 0, 66 | "calcSum": 55, 67 | "postId": "521085554595481_1003151273055571" 68 | }, 69 | { 70 | "order": "# 8", 71 | "likes": "42", 72 | "comments": "1", 73 | "shares": "0", 74 | "vote": 1, 75 | "Rplus": "+1", 76 | "calcSum": 46.5, 77 | "postId": "521085554595481_1002608616443170" 78 | }, 79 | { 80 | "order": "# 9", 81 | "likes": "4", 82 | "comments": "19", 83 | "shares": "1", 84 | "vote": 0, 85 | "calcSum": 34.5, 86 | "postId": "521085554595481_1003131183057580" 87 | }, 88 | { 89 | "order": "# 10", 90 | "likes": "9", 91 | "comments": "17", 92 | "shares": "0", 93 | "vote": 0, 94 | "calcSum": 34.5, 95 | "postId": "521085554595481_1002118709825494" 96 | }, 97 | { 98 | "order": "# 11", 99 | "likes": "30", 100 | "comments": "0", 101 | "shares": "0", 102 | "vote": -1, 103 | "Rplus": "thinking_face", 104 | "calcSum": 27, 105 | "postId": "521085554595481_1003203873050311" 106 | }, 107 | { 108 | "order": "# 12", 109 | "likes": "21", 110 | "comments": "2", 111 | "shares": "0", 112 | "vote": 0, 113 | "calcSum": 24, 114 | "postId": "521085554595481_1002283573142341" 115 | }, 116 | { 117 | "order": "# 13", 118 | "likes": "13", 119 | "comments": "2", 120 | "shares": "4", 121 | "vote": 2, 122 | "Rplus": "+1", 123 | "ryrocks": "+1", 124 | "calcSum": 30, 125 | "postId": "521085554595481_1003162736387758" 126 | }, 127 | { 128 | "order": "# 14", 129 | "likes": "16", 130 | "comments": "0", 131 | "shares": "3", 132 | "vote": 1, 133 | "ryrocks": "+1", 134 | "calcSum": 25, 135 | "postId": "521085554595481_1001190853251613" 136 | }, 137 | { 138 | "order": "# 15", 139 | "likes": "2", 140 | "comments": "7", 141 | "shares": "0", 142 | "vote": 0, 143 | "calcSum": 12.5, 144 | "postId": "521085554595481_1001003936603638" 145 | }, 146 | { 147 | "order": "# 16", 148 | "likes": "12", 149 | "comments": "0", 150 | "shares": "0", 151 | "vote": 0, 152 | "calcSum": 12, 153 | "postId": "521085554595481_1001964689840896" 154 | }, 155 | { 156 | "order": "# 17", 157 | "likes": "12", 158 | "comments": "0", 159 | "shares": "0", 160 | "vote": 0, 161 | "calcSum": 12, 162 | "postId": "521085554595481_1001521906551841" 163 | }, 164 | { 165 | "order": "# 18", 166 | "likes": "9", 167 | "comments": "0", 168 | "shares": "1", 169 | "vote": 0, 170 | "calcSum": 11, 171 | "postId": "521085554595481_1003062823064416" 172 | }, 173 | { 174 | "order": "# 19", 175 | "likes": "0", 176 | "comments": "5", 177 | "shares": "0", 178 | "vote": 0, 179 | "calcSum": 7.5, 180 | "postId": "521085554595481_1003586276345404" 181 | }, 182 | { 183 | "order": "# 20", 184 | "likes": "0", 185 | "comments": "5", 186 | "shares": "0", 187 | "vote": 0, 188 | "calcSum": 7.5, 189 | "postId": "521085554595481_1003484199688945" 190 | } 191 | ] 192 | -------------------------------------------------------------------------------- /.weekly-feed/2016-06-26-vote.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "order": "# 1", 4 | "likes": "128", 5 | "comments": "27", 6 | "shares": "23", 7 | "vote": 0, 8 | "calcSum": 214.5, 9 | "postId": "521085554595481_1019798034724228" 10 | }, 11 | { 12 | "order": "# 2", 13 | "likes": "116", 14 | "comments": "4", 15 | "shares": "0", 16 | "vote": 0, 17 | "calcSum": 122, 18 | "postId": "521085554595481_1020210754682956" 19 | }, 20 | { 21 | "order": "# 4", 22 | "likes": "87", 23 | "comments": "4", 24 | "shares": "6", 25 | "vote": 1, 26 | "Rplus": "+1", 27 | "calcSum": 108, 28 | "postId": "521085554595481_1020671314636900" 29 | }, 30 | { 31 | "order": "# 6", 32 | "likes": "71", 33 | "comments": "2", 34 | "shares": "0", 35 | "vote": 1, 36 | "Rplus": "+1", 37 | "calcSum": 77, 38 | "postId": "521085554595481_1020850974618934" 39 | }, 40 | { 41 | "order": "# 7", 42 | "likes": "48", 43 | "comments": "2", 44 | "shares": "5", 45 | "vote": 1, 46 | "Rplus": "+1", 47 | "alicewei": "+1", 48 | "calcSum": 64, 49 | "postId": "521085554595481_1020890697948295" 50 | }, 51 | { 52 | "order": "# 9", 53 | "likes": "53", 54 | "comments": "0", 55 | "shares": "0", 56 | "vote": 1, 57 | "Rplus": "+1", 58 | "calcSum": 56, 59 | "postId": "521085554595481_1019754194728612" 60 | }, 61 | { 62 | "order": "# 10", 63 | "likes": "6", 64 | "comments": "20", 65 | "shares": "1", 66 | "vote": 0, 67 | "calcSum": 38, 68 | "postId": "521085554595481_1021845897852775" 69 | }, 70 | { 71 | "order": "# 12", 72 | "likes": "17", 73 | "comments": "0", 74 | "shares": "4", 75 | "vote": 1, 76 | "Rplus": "+1", 77 | "calcSum": 28, 78 | "postId": "521085554595481_1020819514622080" 79 | }, 80 | { 81 | "order": "# 11", 82 | "likes": "3", 83 | "comments": "15", 84 | "shares": "0", 85 | "vote": 0, 86 | "calcSum": 25.5, 87 | "postId": "521085554595481_1019259154778116" 88 | }, 89 | { 90 | "order": "# 14", 91 | "likes": "14", 92 | "comments": "4", 93 | "shares": "1", 94 | "vote": 1, 95 | "Rplus": "+1", 96 | "calcSum": 25, 97 | "postId": "521085554595481_1019771544726877" 98 | }, 99 | { 100 | "order": "# 13", 101 | "likes": "8", 102 | "comments": "10", 103 | "shares": "0", 104 | "vote": 0, 105 | "calcSum": 23, 106 | "postId": "521085554595481_1019359838101381" 107 | }, 108 | { 109 | "order": "# 15", 110 | "likes": "3", 111 | "comments": "12", 112 | "shares": "0", 113 | "vote": 0, 114 | "calcSum": 21, 115 | "postId": "521085554595481_1019926318044733" 116 | }, 117 | { 118 | "order": "# 16", 119 | "likes": "20", 120 | "comments": "0", 121 | "shares": "0", 122 | "vote": 0, 123 | "calcSum": 20, 124 | "postId": "521085554595481_1020176528019712" 125 | }, 126 | { 127 | "order": "# 18", 128 | "likes": "5", 129 | "comments": "7", 130 | "shares": "0", 131 | "vote": 0, 132 | "calcSum": 15.5, 133 | "postId": "521085554595481_1021974941173204" 134 | }, 135 | { 136 | "order": "# 19", 137 | "likes": "0", 138 | "comments": "8", 139 | "shares": "0", 140 | "vote": 0, 141 | "calcSum": 12, 142 | "postId": "521085554595481_1019749904729041" 143 | }, 144 | { 145 | "order": "# 20", 146 | "likes": "0", 147 | "comments": "7", 148 | "shares": "0", 149 | "vote": 0, 150 | "calcSum": 10.5, 151 | "postId": "521085554595481_1020510627986302" 152 | }, 153 | { 154 | "order": "# 3", 155 | "likes": "76", 156 | "comments": "8", 157 | "shares": "11", 158 | "vote": -500, 159 | "Rplus": "tada", 160 | "calcSum": -1390, 161 | "postId": "521085554595481_1020804427956922" 162 | }, 163 | { 164 | "order": "# 5", 165 | "likes": "45", 166 | "comments": "23", 167 | "shares": "2", 168 | "vote": -500, 169 | "Rplus": "tada", 170 | "calcSum": -1416.5, 171 | "postId": "521085554595481_1020854617951903" 172 | }, 173 | { 174 | "order": "# 8", 175 | "likes": "54", 176 | "comments": "0", 177 | "shares": "0", 178 | "vote": -500, 179 | "Rplus": "tada", 180 | "calcSum": -1446, 181 | "postId": "521085554595481_1019798478057517" 182 | }, 183 | { 184 | "order": "# 17", 185 | "likes": "15", 186 | "comments": "2", 187 | "shares": "0", 188 | "vote": -500, 189 | "Rplus": "tada", 190 | "calcSum": -1482, 191 | "postId": "521085554595481_1020871874616844" 192 | } 193 | ] 194 | -------------------------------------------------------------------------------- /.weekly-feed/getData/bookmarklet-auto-issue.js: -------------------------------------------------------------------------------- 1 | javascript: (function () { 2 | var data = []; 3 | 4 | var textarea = document.getElementById('new_comment_field'); 5 | 6 | document.querySelector('.js-discussion').addEventListener('DOMNodeInserted', (e) => { 7 | if (e.target.tagName === 'DIV' && e.target.classList.contains('timeline-comment-wrapper')) { 8 | data.shift(); 9 | console.log('shift', data.length); 10 | if (data.length) { 11 | console.log('ccc'); 12 | autoSubmit(); 13 | } 14 | } 15 | }, false); 16 | 17 | var autoSubmit = () => { 18 | setTimeout(function () { 19 | textarea.value = data[0]; 20 | textarea.closest('form').querySelector('.btn.btn-primary').click(); 21 | }, 2000); 22 | }; 23 | 24 | var dialog = document.createElement('dialog'); 25 | var input = document.createElement('input'); 26 | 27 | input.type = 'file'; 28 | 29 | input.addEventListener('change', (e) => { 30 | console.log(e.target.files[0]); 31 | var file = new window.FileReader(); 32 | file.onload = (evt) => { 33 | var result = evt.target.result; 34 | data = JSON.parse(result); 35 | autoSubmit(); 36 | dialog.remove(); 37 | input.remove(); 38 | }; 39 | file.readAsText(e.target.files[0]); 40 | }); 41 | 42 | dialog.appendChild(input); 43 | document.body.appendChild(dialog); 44 | 45 | dialog.showModal(); 46 | }()); 47 | -------------------------------------------------------------------------------- /.weekly-feed/getData/bookmarklet-vote.js: -------------------------------------------------------------------------------- 1 | javascript: (function () { 2 | var member = ['Rplus', 'whalesingswee', 'amazingandyyy', 'Clementtang', 'erwaiyang', 'noootown', 'ryrocks']; 3 | var allowedReactions = ['+1', 'thinking_face', 'tada']; 4 | 5 | var weight = { 6 | likes: 1, /* 互動基數 */ 7 | comments: 1.5, /* 鼓勵討論 */ 8 | shares: 2, /* 鼓勵擴散 */ 9 | vote: 3 /* 些微調整 */ 10 | }; 11 | 12 | var comments = [].slice.call(document.querySelectorAll('.timeline-comment-wrapper')); 13 | 14 | var targetComments = comments.filter((comment) => { 15 | var firstTd = comment.querySelector('tbody td'); 16 | return !!firstTd && /^\# \d+/.test(firstTd.textContent); 17 | }); 18 | 19 | var emojisData = targetComments.map((t) => { 20 | var reactionBtn = [].slice.call(t.querySelectorAll('.comment-reactions-options .reaction-summary-item')); 21 | 22 | var avatarBoxStyle = document.getElementById('customAvatarBoxStyle'); 23 | if (!avatarBoxStyle) { 24 | var style = document.createElement('style'); 25 | style.id = 'customAvatarBoxStyle'; 26 | style.innerHTML = '.customAvatarBox img {width: 20px; height: 20px; vertical-align: top; margin-left: 3px; border-radius: 3px;}'; 27 | document.head.appendChild(style); 28 | } 29 | 30 | return reactionBtn.map((btn) => { 31 | var who = btn.getAttribute('aria-label').split(' reacted with')[0].replace(/,| and/g, '').split(/\s+/); 32 | 33 | var avatarBox = document.createElement('span'); 34 | avatarBox.className = 'customAvatarBox'; 35 | avatarBox.innerHTML = who.map((uid) => ``).join(''); 36 | btn.appendChild(avatarBox); 37 | 38 | return { 39 | reaction: btn.value.split(/\s+/)[0], 40 | who: who 41 | }; 42 | }); 43 | }); 44 | 45 | var sumTable = emojisData.map((emojis, idx) => { 46 | var voteData = {}; 47 | var _id = targetComments[idx].querySelector('.comment-body a').href.replace('https://fb.com/', ''); 48 | 49 | console.log(idx, `https://fb.com/${_id}`); 50 | 51 | var tds = [].slice.call(targetComments[idx].querySelectorAll('tbody td')); 52 | var tdsData = tds.map((td) => { 53 | return td.textContent; 54 | }); 55 | 56 | [voteData.order, voteData.likes, voteData.comments, voteData.shares] = tdsData; 57 | 58 | voteData.vote = 0; 59 | 60 | emojis.forEach((emoji) => { 61 | if (allowedReactions.indexOf(emoji.reaction) === -1) { return; } 62 | 63 | var reaction = emoji.reaction; 64 | var people = emoji.who; 65 | 66 | people.forEach((t) => { 67 | voteData[t] = reaction; 68 | }); 69 | }); 70 | 71 | Object.keys(voteData).forEach((i) => { 72 | if (!member.includes(i)) { return; } 73 | 74 | switch (voteData[i]) { 75 | case '+1': 76 | voteData.vote += 1; 77 | break; 78 | 79 | case 'thinking_face': 80 | voteData.vote -= 1; 81 | break; 82 | 83 | case 'tada': 84 | if (i === member[0]) { 85 | console.log('tada'); 86 | voteData.vote -= 500; 87 | } 88 | break; 89 | } 90 | }); 91 | 92 | voteData.calcSum = voteData.likes * weight.likes + voteData.comments * weight.comments + voteData.shares * weight.shares + voteData.vote * weight.vote; 93 | 94 | voteData.postId = _id; 95 | 96 | return voteData; 97 | }); 98 | 99 | window.sumTable = sumTable; 100 | 101 | window.top10 = sumTable.sort((a, b) => { 102 | return b.calcSum - a.calcSum; 103 | }); 104 | 105 | console.table(window.top10); 106 | console.log('copy(top10)'); 107 | })(); 108 | -------------------------------------------------------------------------------- /.weekly-feed/getData/calcTop10.js: -------------------------------------------------------------------------------- 1 | var fs = require('mz/fs'); 2 | var argv = require('yargs').argv; 3 | var mustache = require('mustache'); 4 | var prompt = require('prompt'); 5 | var lastSunday = require('./lastSunday').date; 6 | 7 | var date = argv.date || lastSunday; 8 | 9 | console.log(`請確認開始日期: ${date} ?`); 10 | 11 | prompt.get([{ 12 | name: 'startDate', 13 | pattern: /^\d{4}(-\d{2}){2}$/, 14 | default: date 15 | }], (err, result) => { 16 | if (err) { console.log(err); } 17 | date = result.startDate; 18 | 19 | var fetchJSONFile = ($path) => { 20 | return fs.readFile($path, 'utf8').then(data => JSON.parse(data)).catch(err => { 21 | console.log(err); 22 | }); 23 | }; 24 | 25 | var top20 = fetchJSONFile(`.weekly-feed/${date}.json`); 26 | var top20Voted = fetchJSONFile(`.weekly-feed/${date}-vote.json`); 27 | 28 | var yamlTpl = `- permalink: 'https://fb.com/{{ id }}' 29 | time: '{{ created_time }}' 30 | sharer-name: '{{ from.name }}' 31 | sharer-id: '{{ from.id }}' 32 | title: '{{ name }}' 33 | link: '{{{ link }}}' 34 | {{# cover }} 35 | cover: '{{{ cover }}}' 36 | {{/ cover }} 37 | intro: '' 38 | `; 39 | 40 | var mdTpl = `--- 41 | layout: post 42 | title: "Collection #0{{ week }}" 43 | categories: collection 44 | tags: weekly-popular 45 | publish-date: '{{ publishDate }}' 46 | date-since: '{{ dateSince }}' 47 | date-until: '{{ dateUntil }}' 48 | volunteer: {{ volunteer }} 49 | --- 50 | 51 | {% include card.html %} 52 | `; 53 | 54 | Promise.all([top20, top20Voted]).then(v => { 55 | var top20 = v[0]; 56 | var top20Voted = v[1]; 57 | 58 | // get the original picture from fb cdn 59 | top20.forEach(i => i.cover = i.picture ? decodeURIComponent(i.picture.split(/&url=([^&]+)/)[1]) : ''); 60 | 61 | var top10Voted = top20Voted.slice(0, 10); 62 | 63 | var top10yaml = top10Voted.map(i => { 64 | // filter matched data in top20, and render with mustache 65 | return mustache.render(yamlTpl, top20.filter(j => j.id === i.postId)[0]); 66 | }); 67 | 68 | var now = new Date(); 69 | 70 | var frontMatter = { 71 | week: ~~((new Date(date) - new Date('2016-03-13')) / (7 * 24 * 60 * 60 * 1000)), 72 | dateSince: date, 73 | dateUntil: date.replace(/(\d\d)$/, a => a * 1 + 6), 74 | publishDate: new Date(now - now.getTimezoneOffset() * 60 * 1000).toJSON().split('T')[0], 75 | volunteer: argv.volunteer || 'Rplus' 76 | }; 77 | 78 | fs.writeFile(`_data/${date}.yml`, top10yaml.join('\n')); 79 | fs.writeFile(`_posts/${date}-0${frontMatter.week}.md`, mustache.render(mdTpl, frontMatter)); 80 | 81 | console.log('calc top 10 done!'); 82 | }); 83 | }); 84 | -------------------------------------------------------------------------------- /.weekly-feed/getData/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 19 | 20 | 21 | 22 | download 23 |
24 | 25 |
26 | 38 | 39 | 40 | 41 | 42 | 43 | 68 | 69 | 70 | 71 | 72 | -------------------------------------------------------------------------------- /.weekly-feed/getData/lastSunday.js: -------------------------------------------------------------------------------- 1 | var now = new Date(); 2 | var sundayBeforeLastSunday = new Date(now.setDate(now.getDate() - now.getDay() - 7)); 3 | this.date = new Date(sundayBeforeLastSunday - now.getTimezoneOffset() * 60000).toISOString().split('T')[0]; 4 | -------------------------------------------------------------------------------- /.weekly-feed/getData/pullFeeds.js: -------------------------------------------------------------------------------- 1 | var fs = require('mz/fs'); 2 | var argv = require('yargs').argv; 3 | var mustache = require('mustache'); 4 | var request = require('request'); 5 | var prompt = require('prompt'); 6 | var FBTOKEN = require('./token.json').facebook; 7 | 8 | var date = argv.date; 9 | 10 | if (!date) { 11 | date = require('./lastSunday').date; 12 | } 13 | 14 | var issueTpl = `| power# | likes | comments | shares | 15 | |:------:|:-----:|:--------:|:------:| 16 | | # {{ order }} | {{ power.1 }} | {{ power.2 }} | {{ power.3 }} | 17 | * [fb permalink](https://fb.com/{{ id }}) @ \`{{ created_time }}\` 18 | * who: [{{{ from.name }}}](https://facebook.com/{{ from.id }}) 19 | ![](https://graph.facebook.com/{{ from.id }}/picture?width=60&height=60) 20 | {{# message }} 21 | * intro: 22 | \`\`\` 23 | {{{ message }}} 24 | \`\`\` 25 | {{/ message }} 26 | {{# icon }} 27 | > ![]({{{ icon }}}): [{{ name }}]({{{ link }}}) 28 | {{/ icon }} 29 | {{# description }} 30 | > {{{ description }}} 31 | {{/ description }} 32 | {{#picture}} 33 | > ![]({{{ picture }}}) 34 | {{/picture}}`; 35 | 36 | console.log(`請確認開始日期: ${date} ?`); 37 | 38 | prompt.get([{ 39 | name: 'startDate', 40 | pattern: /^\d{4}(-\d{2}){2}$/, 41 | default: date 42 | }], (err, result) => { 43 | if (err) { console.log(err); } 44 | date = result.startDate; 45 | 46 | console.log('Start date: ', date); 47 | 48 | request({ 49 | uri: `https://graph.facebook.com/521085554595481/feed?since=${+new Date(date) / 1000}&access_token=${FBTOKEN}&limit=200&fields=comments.limit(0).summary(true).filter(stream),likes.limit(0).summary(true),shares,created_time,updated_time,from,message,icon,link,name,description,picture` 50 | }, (err, response, body) => { 51 | if (err) { console.log(err); } 52 | 53 | var data = JSON.parse(body).data; 54 | 55 | var since = +new Date(date); 56 | var until = since + 7 * 24 * 60 * 60 * 1000; 57 | var _time; 58 | console.log(`week since: ${new Date(since).toJSON()}, ${since}\nweek until: ${new Date(until).toJSON()}, ${until}`); 59 | 60 | var filteredData = data.filter((item) => { 61 | _time = +new Date(item.created_time); 62 | return _time >= since && _time <= until; 63 | }); 64 | 65 | console.log(`The total number of feeds in this week is: ${filteredData.length}`); 66 | 67 | filteredData.forEach(stat => { 68 | var likes = stat.likes && stat.likes.summary.total_count || 0; 69 | var comments = stat.comments && stat.comments.summary.total_count || 0; 70 | var shares = stat.shares && stat.shares.count || 0; 71 | 72 | stat.power = [likes * 1 + comments * 1.5 + shares * 2, likes, comments, shares]; 73 | }); 74 | 75 | var top20 = filteredData.sort((fa, fb) => { 76 | return fb.power[0] - fa.power[0]; 77 | }).slice(0, 20); 78 | 79 | var issue20 = top20.map((feed, index) => { 80 | feed.order = index + 1; 81 | 82 | if (feed.description) { 83 | feed.description = feed.description.replace(/\n/gm, '\n> '); 84 | } 85 | 86 | return mustache.render(issueTpl, feed); 87 | }); 88 | 89 | // fs.writeFile(`.weekly-feed/${date}-o.json`, JSON.stringify(data, null, 2)); 90 | // fs.writeFile(`.weekly-feed/${date}-f.json`, JSON.stringify(filteredData, null, 2)); 91 | fs.writeFile(`.weekly-feed/${date}.json`, JSON.stringify(top20, null, 2)); 92 | fs.writeFile(`.weekly-feed/issue-${date}.json`, JSON.stringify(issue20, null, 2).replace(/\#x2F\;/gm, '/')); 93 | }); 94 | }); 95 | -------------------------------------------------------------------------------- /404.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: page 3 | title: 404 - Page not found 4 | permalink: /404 5 | --- 6 | 7 |

8 | Sorry, we can't find that page that you're looking for. You can try again by going back to the homepage 9 |

10 | 11 |
12 | 13 | 404 14 | 15 |
16 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | ## [1.2.0] 2016-06-07 4 | ### Added 5 | - Visited link(s) color / style 6 | 7 | ## [1.1.0] 2016-04-21 8 | ### Added 9 | - Search in-site 10 | 11 | ## [1.0.1] 2016-04-13 12 | ### Added 13 | - email-subscription link 14 | 15 | ### Removed 16 | - limitation of maximum scale on mobile viewport 17 | -------------------------------------------------------------------------------- /CNAME: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/f2etw/weekly-collection/9652847d6f847db91a3ceba344b39ff56b31bc38/CNAME -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Barry Clark 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | this software and associated documentation files (the "Software"), to deal in 7 | the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 9 | the Software, and to permit persons to whom the Software is furnished to do so, 10 | subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [![Join the chat at https://gitter.im/f2etw/weekly-collection](https://badges.gitter.im/f2etw/weekly-collection.svg)](https://gitter.im/f2etw/weekly-collection?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) 2 | 3 | ## 關於 weekly collection @ F2ETW 4 | 5 | * FB group: 6 | * public website: 7 | * GitHub repo: 8 | * Gitter chat room: 9 | 10 | ### 收集方式: 11 | 12 | 1. 每週開一個 issue,列舉上週熱門貼文二十篇。 13 | 一個 comment 一篇,需列: 14 | * 連結 15 | * 分享人 16 | * 摘要 17 | 2. 成員們以表情票選出前十篇 18 | 3. 當值成員將結果彙整進 jekyll 的 `_post` 裡,每週一篇 19 | 4. 發 PR merged 後,手動 deploy 到 gh-pages 20 | 21 | ### 運作方式: 22 | 23 | 一人一週輪值,其餘成員每週要參與票選。 24 | 25 | 輪值人可先開好 issue,assign 給自己避免忘記 26 | 27 | 一般聯絡可透過 Gitter: 28 | 29 | ### 整理工具 30 | 31 | 見 [wiki page](https://github.com/f2etw/weekly-collection/wiki) 32 | 33 | ### 現有成員 34 | 35 | * [Rplus](https://www.facebook.com/rplus.tw) 36 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | # 2 | # This file contains configuration flags to customize your site 3 | # 4 | 5 | # Name of your site (displayed in the header) 6 | name: Weekly Collection @F2ETW 7 | 8 | # Short bio or description (displayed in the header) 9 | description: weekly collection of popular post in Facebook community @ F2ETW 10 | 11 | # URL of your avatar or profile pic (you could use your GitHub profile pic) 12 | avatar: https://avatars2.githubusercontent.com/u/8252114?s=140 13 | 14 | org-name: F2ETW 15 | 16 | # 17 | # Flags below are optional 18 | # 19 | 20 | # Includes an icon in the footer for each username you enter 21 | footer-links: 22 | # email: 23 | github: https://github.com/f2etw/weekly-collection 24 | facebook: https://www.facebook.com/groups/f2e.tw 25 | gitter: https://gitter.im/f2etw/weekly-collection 26 | rss: true # just type anything here for a working RSS icon 27 | email-subscription: https://feedburner.google.com/fb/a/mailverify?uri=WeeklyCollectionf2etw 28 | # twitter: 29 | 30 | # Enter your Disqus shortname (not your username) to enable commenting on posts 31 | # You can find your shortname on the Settings page of your Disqus account 32 | disqus: weekly-collection-f2etw 33 | 34 | # Enter your Google Analytics web tracking code (e.g. UA-2110908-2) to activate tracking 35 | google_analytics: "UA-75744936-1" 36 | 37 | # Your website URL (e.g. http://barryclark.github.io or http://www.barryclark.co) 38 | # Used for Sitemap.xml and your RSS feed 39 | url: http://www.f2e.tw/ 40 | 41 | # If you're hosting your site at a Project repository on GitHub pages 42 | # (http://yourusername.github.io/repository-name) 43 | # and NOT your User repository (http://yourusername.github.io) 44 | # then add in the baseurl here, like this: "/repository-name" 45 | baseurl: "/weekly-collection" 46 | 47 | # 48 | # !! You don't need to change any of the configuration flags below !! 49 | # 50 | 51 | permalink: /:categories/:title/ 52 | 53 | # The release of Jekyll Now that you're using 54 | version: v1.2.0 55 | 56 | # Jekyll 3 now only supports Kramdown for Markdown 57 | kramdown: 58 | # Use GitHub flavored markdown, including triple backtick fenced code blocks 59 | input: GFM 60 | # Jekyll 3 and GitHub Pages now only support rouge for syntax highlighting 61 | syntax_highlighter: rouge 62 | syntax_highlighter_opts: 63 | # Use existing pygments syntax highlighting css 64 | css_class: 'highlight' 65 | 66 | # Set the Sass partials directory, as we're using @imports 67 | sass: 68 | style: :expanded # You might prefer to minify using :compressed 69 | 70 | # Use the following plug-ins 71 | gems: 72 | - jekyll-sitemap # Create a sitemap using the official Jekyll sitemap gem 73 | # - jekyll-feed # Create an Atom feed using the official Jekyll feed gem 74 | - jekyll-paginate 75 | 76 | # pagination config 77 | paginate: 100 78 | paginate_path: "/page:num" 79 | 80 | # Exclude these files from your production _site 81 | exclude: 82 | - Gemfile 83 | - Gemfile.lock 84 | - LICENSE 85 | - README.md 86 | - CNAME 87 | - node_modules 88 | - .weekly-feed 89 | - .publish 90 | - package.json 91 | - postcssconfig.json 92 | - gulpfile.js 93 | - CHANGELOG.md 94 | -------------------------------------------------------------------------------- /_data/2016-03-13.yml: -------------------------------------------------------------------------------- 1 | - permalink: https://fb.com/521085554595481_962465493790816 2 | time: '2016-03-17T10:47:30+0000' 3 | sharer-name: Kim Wong 4 | sharer-id: 10152364923244567 5 | title: 完全學習Bootstrap 4 - Grid – INDER 6 | link: http://inder.com.tw/learn-bootstrap-4-grid/ 7 | cover: http://inder.com.tw/wp-content/uploads/2016/03/002.jpg 8 | resize: true 9 | intro: Kim Wong 以 Bootstrap 為例,於文中詳細地介紹常見 grid system 的排版方式;以及核心的 mixin & placeholder 開發原理 10 | 11 | - permalink: https://fb.com/521085554595481_961252387245460 12 | time: '2016-03-15T11:55:01+0000' 13 | sharer-name: 黃保翕 14 | sharer-id: 10206611907686693 15 | title: Useful Pens for Everyday Front End Development - a Collection by Sarah Drasner on CodePen 16 | link: http://codepen.io/collection/nMgKxJ/ 17 | cover: http://sarahdrasnerdesign.com/wp3/wp-content/uploads/2014/02/bio-pic.jpg 18 | intro: 保哥分享了外國開發者 Sarah Drasner 所彙整的 codepen collection,其中收藏了各式的前端應用技巧。 19 | 20 | - permalink: https://fb.com/521085554595481_963077823729583 21 | time: '2016-03-18T10:28:54+0000' 22 | sharer-name: 邱弘毅 23 | sharer-id: 824068551038406 24 | title: "[前端連載] 前端工程師該懂的基本東西——網路架構篇" 25 | link: https://noootown.wordpress.com/2016/03/18/fontend-engineer-should-know-network-structure/#more-1419 26 | cover: https://noootown.files.wordpress.com/2016/03/pic1.png 27 | intro: 邱弘毅以淺顯易懂的敘述介紹網路架構的基本觀念,希望藉以分享給對前端有興趣的朋友們。 28 | 29 | - permalink: https://fb.com/521085554595481_963847846985914 30 | time: '2016-03-19T15:11:30+0000' 31 | sharer-name: Kim Wong 32 | sharer-id: 10152364923244567 33 | title: 完全學習Bootstrap 4 – Media object – INDER 34 | link: http://inder.com.tw/learn-bootstrap-4-media-object/ 35 | cover: http://inder.com.tw/wp-content/uploads/2016/03/003-1.jpg 36 | resize: true 37 | intro: Kim Wong 在 Bootstrap 系列文的第二篇以 media-object 為主題,介紹了這個排版中非常泛用的元素各種寫法以及調整方式。 38 | 39 | - permalink: https://fb.com/521085554595481_961308417239857 40 | time: '2016-03-15T14:11:21+0000' 41 | sharer-name: Bram Yeh 42 | sharer-id: 988873794457369 43 | title: 網頁設計好朋友:Google 新工具 Resizer 讓網頁跑版這件事不再發生 | TechOrange 44 | link: http://buzzorange.com/techorange/2016/03/15/google-resizer/ 45 | cover: http://buzzorange.com/techorange/wp-content/uploads/2016/03/come.png 46 | resize: true 47 | intro: Bram Yeh 分享了這個 Google 前不久釋出的 RWD 預覽頁面 ─ Resizer 48 | 49 | - permalink: https://fb.com/521085554595481_962606900443342 50 | time: '2016-03-17T16:01:27+0000' 51 | sharer-name: Clement Tang 52 | sharer-id: 10205598652859379 53 | title: Holy Grail Layout — Solved by Flexbox — Cleaner, hack-free CSS 54 | link: https://philipwalton.github.io/solved-by-flexbox/demos/holy-grail/ 55 | intro: 由 Clement Tang 分享的這個 Flexbox 經典參考網站,概括了以 flexbox 方式解決六種傳統排版。對排版技術過渡中的開發者,為一非常有益的學習資源。 56 | 57 | - permalink: https://fb.com/521085554595481_962887027081996 58 | time: '2016-03-18T02:08:28+0000' 59 | sharer-name: 林立秦 60 | sharer-id: 952773934745171 61 | title: JulieAlert 62 | link: http://lichin.me/Juliealert/ 63 | cover: http://lichin.me/Juliealert/image.png 64 | resize: true 65 | intro: '林立秦分享了他臨摩 SweetAlert 效果的 dialog plugin: JulieAlert' 66 | 67 | - permalink: https://fb.com/521085554595481_961005800603452 68 | time: '2016-03-15T01:54:54+0000' 69 | sharer-name: 鄒適齊 70 | sharer-id: 1137308042954007 71 | title: Flexbox Froggy 72 | link: http://flexboxfroggy.com/ 73 | cover: http://flexboxfroggy.com/images/screenshot.png 74 | resize: true 75 | intro: 鄒適齊重新分享了這個以小青蛙為主題的 flexbox 解題型學習網站 76 | 77 | - permalink: https://fb.com/521085554595481_959933710710661 78 | time: '2016-03-13T03:38:44+0000' 79 | sharer-name: MaoYang Chien 80 | sharer-id: 10153285570810982 81 | title: Driving Technical Change Why People on Your Team Don’t Act on Good Ideas, and How to Convince... 82 | link: https://softnshare.wordpress.com/portfolio/driving-technical-change-why-people-on-your-team-dont-act-on-good-ideas-and-how-to-convince-them-they-should/ 83 | cover: https://softnshare.files.wordpress.com/2016/03/trevan.jpg 84 | resize: true 85 | intro: MaoYang Chien 分享一本介紹開發團隊中技術協調的國外書籍 86 | 87 | - permalink: https://fb.com/521085554595481_960187820685250 88 | time: '2016-03-13T15:50:14+0000' 89 | sharer-name: Veck Hsiao 90 | sharer-id: 1098620593488508 91 | intro: 關於 Adblock 隱藏非預期元素、以及雷區的討論 92 | -------------------------------------------------------------------------------- /_data/2016-03-20.yml: -------------------------------------------------------------------------------- 1 | - permalink: 'https://fb.com/521085554595481_965064240197608' 2 | time: '2016-03-21T14:31:43+0000' 3 | sharer-name: 'Hsiang Lee' 4 | sharer-id: '10156068311535551' 5 | title: '怎麼將內網的 localhost 讓外面的人都看得到呢?用用 ngrok 吧! - 転転 |' 6 | link: 'https://tenten.co/blog/how-to-use-ngrok-to-connect-your-localhost/' 7 | cover: 'https://scontent-tpe1-1.xx.fbcdn.net/hphotos-xpa1/t31.0-8/12891002_1155048391180343_5687560786681931280_o.png' 8 | resize: true 9 | intro: 'Hsiang Lee 分享她們開發團隊使用的一款工具: ngrok,可讓自己本機的 localhost 分享給其他人觀看,demo 的輔助工具' 10 | 11 | - permalink: 'https://fb.com/521085554595481_968003103237055' 12 | time: '2016-03-25T03:54:19+0000' 13 | sharer-name: '尤川豪' 14 | sharer-id: '969639729722349' 15 | title: 'Zeplin' 16 | link: 'https://zeplin.io/features.html#developer' 17 | cover: 'https://zeplin.io/img/favicon/228x228.png' 18 | intro: '能直接看 sketch 檔案內的規格的輔助工具: Zeplin 又被分享了一次囉~' 19 | 20 | - permalink: 'https://fb.com/521085554595481_968001996570499' 21 | time: '2016-03-25T03:51:50+0000' 22 | sharer-name: 'Derek Wang' 23 | sharer-id: '920437281311659' 24 | title: '你知道你的網站可能在 InAppBrowser/webview 無法使用嗎? « 要改的地方太多了,那就改天吧' 25 | link: 'http://jimmysu.logdown.com/posts/290026-inapp-browser-webview-problem' 26 | cover: 'https://lh3.googleusercontent.com/-6oBhactpUrc/VcXIGi6q6WI/AAAAAAAALRc/d3JaK2EUMhc/s1000-Ic42/de36e908-8402-4766-bdb9-44e1595673e0.jpg' 27 | resize: true 28 | intro: 'Derek Wang 分享了這篇關於手機 APP 內置瀏覽器陷阱的去年文章;雖然目前部份已改善了,仍可作為測試參考資料' 29 | 30 | - permalink: 'https://fb.com/521085554595481_965811500122882' 31 | time: '2016-03-22T13:01:53+0000' 32 | sharer-name: '林靜君' 33 | sharer-id: '1123047127708817' 34 | title: '22 stunning examples of CSS3 animation | CSS3 | Creative Bloq' 35 | link: 'http://www.creativebloq.com/css3/animation-with-css3-712437' 36 | cover: 'http://media.creativebloq.futurecdn.net/sites/creativebloq.com/files/articles/article/2012/07/cssmario.jpg' 37 | intro: '林靜君分享了這篇關於 CSS animation 的文章,雖然是 2014 所寫的,不過或許也有些例子的使用方式也能帶來些新的啟發' 38 | 39 | - permalink: 'https://fb.com/521085554595481_966422130061819' 40 | time: '2016-03-23T06:02:50+0000' 41 | sharer-name: 'Rex Rex' 42 | sharer-id: '10101007382129979' 43 | title: 'In Pieces - 30 Endangered Species' 44 | link: 'http://species-in-pieces.com/#' 45 | cover: 'http://www.species-in-pieces.com/img/og-image.png' 46 | resize: true 47 | intro: '華麗的「In Pieces」再次成為版上的焦點。這一去年的推出的專案,主題為 30 個瀕危的物種,每個動物都以 30 片三角組成,其背後的 JS 與 CSS 處理方式可以參考社團內分享的舊文' 48 | 49 | - permalink: 'https://fb.com/521085554595481_965745843462781' 50 | time: '2016-03-22T11:39:55+0000' 51 | sharer-name: 'YuTin Liu' 52 | sharer-id: '10203040395925690' 53 | title: '臺北市社會局x數位災民證APP' 54 | link: '' 55 | cover: 'https://lh3.googleusercontent.com/6rnSRQXKCxtfsBcK-6nuOMNNC-_UoQ5xjhnL-NNJZm1URWONlSwokuoHnvEv4e0tYGA=s1024' 56 | intro: 'YuTin Liu 分享了他與臺北市社會局合作的數位災民證 APP 專案。專案目的主要為災害避難處所管理 & 識別的協助系統' 57 | 58 | - permalink: 'https://fb.com/521085554595481_964473126923386' 59 | time: '2016-03-20T15:59:50+0000' 60 | sharer-name: '黃保翕' 61 | sharer-id: '10206611907686693' 62 | title: 'Remote Code Execution in all git versions (client + server) < 2.7.4: CVE-2016-2324, CVE-2016‑2315' 63 | link: 'http://bit.ly/25dhr1u' 64 | cover: 'https://ma.ttias.be/wp-content/uploads/2016/03/git_cve_vulnerability.png' 65 | resize: true 66 | intro: '保哥分享了這篇關於 Git 上可操作 Remote Code Execution 攻擊的程式漏洞。並提醒盡快升級至 2.7.4 以上' 67 | 68 | - permalink: 'https://fb.com/521085554595481_964954616875237' 69 | time: '2016-03-21T10:12:20+0000' 70 | sharer-name: '尤川豪' 71 | sharer-id: '969639729722349' 72 | title: 'rscss' 73 | link: 'http://rscss.io/' 74 | cover: 'https://avatars2.githubusercontent.com/u/74385?v=3&s=400' 75 | intro: '尤川豪分享了 rscss (Reasonable System for CSS Stylesheet Structure)這一 CSS 命名方針,裡頭介紹了如何管理 CSS 命名而不失去理智。若還未有一套固有的整理方式,不妨多加參考借鏡' 76 | 77 | - permalink: 'https://fb.com/521085554595481_969034409800591' 78 | time: '2016-03-26T11:12:06+0000' 79 | sharer-name: '邱弘毅' 80 | sharer-id: '824068551038406' 81 | title: '[前端連載] 買早餐也能了解前端 vs 後端?' 82 | link: 'https://noootown.wordpress.com/2016/03/23/frontend-backend-breakfast/' 83 | cover: 'https://noootown.files.wordpress.com/2016/03/backend-news1.png' 84 | resize: true 85 | intro: '邱弘毅再次帶來輕鬆的分享是以買早餐的過程來簡介網頁前端與後端' 86 | 87 | - permalink: 'https://fb.com/521085554595481_968887389815293' 88 | time: '2016-03-26T05:55:26+0000' 89 | sharer-name: 'YuTin Liu' 90 | sharer-id: '10203040395925690' 91 | title: '2016-03-26 第五屆HTML5峰會@台灣台北' 92 | link: '' 93 | cover: '' 94 | intro: '由 YuTin Liu 所拍攝的活動現場一覽' 95 | -------------------------------------------------------------------------------- /_data/2016-03-27.yml: -------------------------------------------------------------------------------- 1 | - permalink: 'https://fb.com/521085554595481_973094689394563' 2 | time: '2016-03-31T04:35:28+0000' 3 | sharer-name: '楊雅晴' 4 | sharer-id: '1062487557144901' 5 | title: '程式員一怒之下刪除11行程式碼 互聯網遭殃 - The News Lens 關鍵評論網' 6 | link: 'http://hk.thenewslens.com/post/305094/' 7 | cover: 'http://image.thenewslens.com/wp-content/uploads/2016/03/42-76427003.jpg' 8 | resize: true 9 | intro: '由 left-pad 撤架事件衍生之 npm 環境影響的後續報導' 10 | 11 | - permalink: 'https://fb.com/521085554595481_973051156065583' 12 | time: '2016-03-31T03:02:49+0000' 13 | sharer-name: '王志誠' 14 | sharer-id: '1120548697961771' 15 | title: '首波主打課程 基礎 HTML + CSS - 六角學院' 16 | link: 'http://www.hexschool.com/' 17 | cover: 'http://www.hexschool.com/images/logo_for_fb.png' 18 | notice: '我知道這是篇廣宣文' 19 | intro: '由廖洧杰於 ‎Udemy 平台開設的線上程式教學課程' 20 | 21 | - permalink: 'https://fb.com/521085554595481_971724509531581' 22 | time: '2016-03-29T14:06:19+0000' 23 | sharer-name: 'Rplus Chen' 24 | sharer-id: '903912066343244' 25 | title: 'Colection #000' 26 | link: 'http://www.f2e.tw/weekly-collection/collection/000/' 27 | cover: 'https://avatars2.githubusercontent.com/u/8252114?s=300' 28 | intro: '本週刊試刊號於前端社團的宣傳貼文,也順便徵人' 29 | 30 | - permalink: 'https://fb.com/521085554595481_974204135950285' 31 | time: '2016-04-01T11:13:53+0000' 32 | sharer-name: '邱弘毅' 33 | sharer-id: '824068551038406' 34 | title: 'Firework' 35 | link: 'http://noootown.github.io/FireWork/' 36 | cover: 'https://scontent-tpe1-1.xx.fbcdn.net/hphotos-xfp1/t31.0-8/12916114_480948858763464_8978374017135795755_o.png' 37 | resize: true 38 | intro: '邱弘毅利用 canvas api 撰寫了一個煙火效果的 jQuery library' 39 | 40 | - permalink: 'https://fb.com/521085554595481_972314856139213' 41 | time: '2016-03-30T06:33:27+0000' 42 | sharer-name: '莊為任' 43 | sharer-id: '821560307892406' 44 | title: '設計資源總匯 - 奧革設計' 45 | link: 'http://www.ogdesign.tw/resources' 46 | cover: 'http://www.ogdesign.tw/images/cover.jpg' 47 | resize: true 48 | intro: '由「奧革設計」整理的各式設計資源,內容從靈感啟發到輔助工具非常豐富;介面改版後的查找動線更加方便了' 49 | 50 | - permalink: 'https://fb.com/521085554595481_969926576378041' 51 | time: '2016-03-27T10:49:42+0000' 52 | sharer-name: '林立秦' 53 | sharer-id: '952773934745171' 54 | title: 'DavidMenu' 55 | link: 'http://lichin.me/Davidmenu/' 56 | cover: 'http://lichin.me/Davidmenu/image.png' 57 | resize: true 58 | intro: '林立秦藉由個人的 fullscreen menu 練習作品,與版友討論相關調整方式' 59 | 60 | - permalink: 'https://fb.com/521085554595481_974666092570756' 61 | time: '2016-04-02T04:34:54+0000' 62 | sharer-name: '陳聖博' 63 | sharer-id: '10206381218146197' 64 | title: '好的使用者經驗設計,絕對不是從使用者開始' 65 | link: 'https://medium.com/@lejacp/%E5%A5%BD%E7%9A%84%E4%BD%BF%E7%94%A8%E8%80%85%E7%B6%93%E9%A9%97%E8%A8%AD%E8%A8%88-%E7%B5%95%E5%B0%8D%E4%B8%8D%E6%98%AF%E5%BE%9E%E4%BD%BF%E7%94%A8%E8%80%85%E9%96%8B%E5%A7%8B-e09bc34b3a28#.3c0ahpezi' 66 | cover: 'https://cdn-images-1.medium.com/max/800/0*C97OAg84NHnqWk3a.' 67 | resize: true 68 | intro: '一篇探討「Define Challenge」的文章。文中分析了設計團隊中可能遇到的挑戰類型,並介紹了六個步驟來因應' 69 | 70 | - permalink: 'https://fb.com/521085554595481_970141973023168' 71 | time: '2016-03-27T17:06:01+0000' 72 | sharer-name: 'Clement Tang' 73 | sharer-id: '10205598652859379' 74 | title: 'What's the deal with declaring font properties on @font-face? | CSS-Tricks' 75 | link: 'https://css-tricks.com/whats-deal-declaring-font-properties-font-face' 76 | cover: 'https://css-tricks.com/wp-content/uploads/2016/03/font-face-usage.png' 77 | resize: true 78 | intro: 'Clement Tang 分享了一篇簡介 CSS @font-face 字型套用關係鏈的文章 #一圖千言' 79 | 80 | - permalink: 'https://fb.com/521085554595481_972663459437686' 81 | time: '2016-03-30T15:56:32+0000' 82 | sharer-name: 'Rplus Chen' 83 | sharer-id: '903912066343244' 84 | title: 'Dominant Colors for Lazy-Loading Images' 85 | link: 'https://manu.ninja/dominant-colors-for-lazy-loading-images' 86 | cover: 'https://manu.ninja/images/tiny-thumbnails.jpg' 87 | resize: true 88 | intro: '一篇以多圖網站為例,示範如何處理 lazy-loading 預設圖以增加識別度的文章。其中一部份在介紹如何壓縮 data-uri 長度' 89 | 90 | - permalink: 'https://fb.com/521085554595481_974420155928683' 91 | time: '2016-04-01T18:23:44+0000' 92 | sharer-name: 'Rplus Chen' 93 | sharer-id: '903912066343244' 94 | title: 'Dirty Tricks From The Dark Corners Of Front-End' 95 | link: 'https://speakerdeck.com/smashingmag/dirty-tricks-from-the-dark-corners-of-front-end' 96 | cover: 'https://speakerd.s3.amazonaws.com/presentations/7635baba682f45a7a4d6d5f49a70223f/slide_0.jpg' 97 | resize: true 98 | intro: '知名網頁技術網站 Smashing Magazine 主編 Vitaly Friedman 的演講投影片,裡面分享了各種前端神秘技巧' 99 | -------------------------------------------------------------------------------- /_data/2016-04-03.yml: -------------------------------------------------------------------------------- 1 | - permalink: 'https://fb.com/521085554595481_977914365579262' 2 | time: '2016-04-08T11:27:55+0000' 3 | sharer-name: '邱弘毅' 4 | sharer-id: '824068551038406' 5 | title: '[前端連載] 了解網頁發展的脈絡(上)——從靜態網頁到動態網頁到REST api' 6 | link: 'https://noootown.wordpress.com/2016/04/08/web-development-history-1/' 7 | cover: 'https://noootown.files.wordpress.com/2016/04/mvc.png' 8 | resize: true 9 | intro: '邱弘毅用生活化口吻簡介了前後端部份的網路基礎概念' 10 | 11 | - permalink: 'https://fb.com/521085554595481_975806442456721' 12 | time: '2016-04-04T04:09:33+0000' 13 | sharer-name: 'Arthur Liao' 14 | sharer-id: '1023782794358947' 15 | title: 'ReactJS與Immediate-mode GUI: 為何ReactJS是開發複雜UI的首選' 16 | link: 'https://tw.twincl.com/javascript/reactjs/*631q' 17 | cover: 'https://farm2.staticflickr.com/1539/26041744102_1e47c255d0_o_d.jpg' 18 | resize: true 19 | intro: '文中以 Casey Muratori 欣賞的 immediate mode 概念為軸,介紹 GUI 管理控制的方式,並推薦利用 ReactJS 的 virtual DOM 來處理 UI render 效能的問題' 20 | 21 | - permalink: 'https://fb.com/521085554595481_977249542312411' 22 | time: '2016-04-07T02:33:10+0000' 23 | sharer-name: '林靜君' 24 | sharer-id: '1123047127708817' 25 | title: '數據驅動的網站優化 Data Driven Website Optimization' 26 | link: 'http://seo.dns.com.tw/?p=11862' 27 | cover: 'http://seo.dns.com.tw/wp-content/uploads/2016/03/wso1-1024x635.jpg' 28 | resize: true 29 | intro: '這篇分析網站數據的文章先簡介了網路行銷分類,再逐一介紹網站各種優化方式的目的;最後介紹了可能發生的數據差異的原因,並建議在實行網站優化時,也更應該注重精確資料的獲取' 30 | 31 | - permalink: 'https://fb.com/521085554595481_978286022208763' 32 | time: '2016-04-09T03:50:08+0000' 33 | sharer-name: 'Rplus Chen' 34 | sharer-id: '903912066343244' 35 | title: 'A couple of alternatives to the hamburger menu' 36 | link: 'https://t.co/4rqfdWaYzd' 37 | cover: 'http://kyusuf.com/assets/images/content/hamburger-alternatives/theguardian.jpg' 38 | intro: '針對漢堡選單圖示,Kenan Yusuf 在文介紹了兩種有趣的替代方案。或許可以討論哪個較有認知落差' 39 | 40 | - permalink: 'https://fb.com/521085554595481_977296448974387' 41 | time: '2016-04-07T04:39:20+0000' 42 | sharer-name: '王志誠' 43 | sharer-id: '1120548697961771' 44 | title: '高雄前端社群直播活動: CSS 架構' 45 | link: 'https://csscollege.hackpad.com/CSS-3-CSS-fkE5HXwHeID' 46 | cover: 'https://dakdwippfbduw.cloudfront.net/static/img/pencil-love.png' 47 | intro: '王志誠宣傳這次在高雄以 CSS 架構為主題的聚會,將會有線上直播,有興趣的可以多加關注' 48 | 49 | - permalink: 'https://fb.com/521085554595481_977907738913258' 50 | time: '2016-04-08T11:14:18+0000' 51 | sharer-name: '呂耶書' 52 | sharer-id: '10204008574682345' 53 | title: '如何将 npm 作为构建工具使用' 54 | link: 'http://bubkoo.com/2016/03/18/how-to-use-npm-as-a-build-tool/' 55 | cover: 'http://bubkoo.qiniudn.com/images/npm-logo.png' 56 | resize: true 57 | intro: '介紹 npm script 的知名文章被翻譯成中文了。若對原文有些吸收不良者,不妨比對一下譯文來瞭解如何使用 npm script 取代常見的 gulp, webpack 環境' 58 | 59 | - permalink: 'https://fb.com/521085554595481_977338445636854' 60 | time: '2016-04-07T07:23:25+0000' 61 | sharer-name: '陳聖博' 62 | sharer-id: '10206381218146197' 63 | title: '想「轉行」靠寫程式吃飯嗎?一個自學程式語言幾乎將自己逼瘋的親身經歷 – 軟體工程師 Quincy Larson' 64 | link: 'http://www.inside.com.tw/2015/04/17/a-cautionary-tale-of-learning-to-code-quincy-larson' 65 | cover: 'http://www.inside.com.tw/wp-content/uploads/2015/04/quincy.jpg' 66 | resize: true 67 | intro: 'Quincy Larson 以自身經歷建議初學者更加注重一心一意、專精技能。對比那些「每六周重寫一次」的揶揄或許會有不同的感觸' 68 | 69 | - permalink: 'https://fb.com/521085554595481_976544755716223' 70 | time: '2016-04-05T15:51:30+0000' 71 | sharer-name: 'Rplus Chen' 72 | sharer-id: '903912066343244' 73 | title: 'Collection #001' 74 | link: 'http://www.f2e.tw/weekly-collection/collection/001/' 75 | cover: 'https://avatars2.githubusercontent.com/u/8252114?s=300' 76 | intro: '週刊刊號一的宣傳文章。感謝各位的協助與支持 <(_ _)>' 77 | 78 | - permalink: 'https://fb.com/521085554595481_975849085785790' 79 | time: '2016-04-04T06:57:57+0000' 80 | sharer-name: 'Clement Tang' 81 | sharer-id: '10205598652859379' 82 | title: 'Tomorrow’s CSS syntax with cssnext' 83 | link: 'http://julian.io/tomorrows-css-syntax-with-cssnext' 84 | cover: 'http://julian.io/content/images/2015/01/avatar.jpeg' 85 | intro: '這篇文章介紹新穎的 CSS syntax 以及如何使用 PostCSS & cssnext 來輔助生成現行支援的語法' 86 | 87 | - permalink: 'https://fb.com/521085554595481_977272872310078' 88 | time: '2016-04-07T03:11:58+0000' 89 | sharer-name: '蔡宥鋐' 90 | sharer-id: '10203972125167650' 91 | title: '【問】網站弱點掃瞄的工具?' 92 | intro: '討論串裡大家分享了很多掃描網站弱點的工具' 93 | -------------------------------------------------------------------------------- /_data/2016-04-10.yml: -------------------------------------------------------------------------------- 1 | - permalink: 'https://fb.com/521085554595481_980856278618404' 2 | time: '2016-04-14T02:48:06+0000' 3 | sharer-name: '吳政賢' 4 | sharer-id: '1066773103336031' 5 | title: '農曆三月十九下午 陣頭遶境 Google Maps 路線地圖 - 北港迎媽祖' 6 | link: 'http://mazu.ioa.tw/maps/dintao' 7 | cover: 'http://pic.mazu.ioa.tw/resource/image/og/dintao/larger.png' 8 | resize: 1 9 | intro: '吳政賢以其專業與熱忱製作了這個充滿在地文化氣氛的北港迎媽祖網站' 10 | 11 | - permalink: 'https://fb.com/521085554595481_981578268546205' 12 | time: '2016-04-15T14:26:52+0000' 13 | sharer-name: 'Arthur Liao' 14 | sharer-id: '1023782794358947' 15 | title: '面試求生指南:一位面試官的心得分享' 16 | link: 'https://tw.twincl.com/career/*6425' 17 | cover: 'https://farm5.staticflickr.com/4127/4975913210_2e0262478e_z_d.jpg' 18 | resize: 1 19 | intro: 'Arthur Liao 多年面試求才的經驗談,或可更多瞭解以面試官視角會有什麼不一樣的想法' 20 | 21 | - permalink: 'https://fb.com/521085554595481_981377808566251' 22 | time: '2016-04-15T03:03:15+0000' 23 | sharer-name: '黃保翕' 24 | sharer-id: '10206611907686693' 25 | title: 'Visual Studio Code 1.0!' 26 | link: 'http://bit.ly/vscode1rtm' 27 | cover: 'https://code.visualstudio.com/images/2016_04_14_header.png' 28 | resize: 1 29 | intro: 'Microsoft 的開源文字編輯器 Visual Studio Code 推出了第一個大版號的更新。加入了各語法更多的功能支援,並且也提供在地化語系' 30 | 31 | - permalink: 'https://fb.com/521085554595481_981453208558711' 32 | time: '2016-04-15T07:28:34+0000' 33 | sharer-name: '楊雅晴' 34 | sharer-id: '1062487557144901' 35 | title: '簡單聊一下 One-way data flow、Two-way data binding 與前端框架 | 轉個彎日誌' 36 | link: 'http://blog.turn.tw/?p=2948' 37 | cover: 'http://blog.turn.tw/wp-content/uploads/2016/02/fancy.jpg' 38 | resize: 1 39 | intro: '關於 data-driven 兩種行為的簡介;並用各知名 JS 來介紹如何以不同方向來更新 data model' 40 | 41 | - permalink: 'https://fb.com/521085554595481_980531325317566' 42 | time: '2016-04-13T13:20:14+0000' 43 | sharer-name: '詹致遠' 44 | sharer-id: '991353267543024' 45 | title: '媽祖進香去-陣頭怎麼看 | 圖文不符' 46 | link: 'http://matsu.simpleinfo.cc/' 47 | cover: 'http://matsu.simpleinfo.cc/assets/imgs/og-image.png' 48 | resize: 1 49 | intro: '透過由圖文不符製作的「跟著媽祖進香去」專案,可以更加瞭解遶境陣頭各角色的小知識唷!' 50 | 51 | - permalink: 'https://fb.com/521085554595481_979481472089218' 52 | time: '2016-04-11T13:04:00+0000' 53 | sharer-name: 'Ruby Chen' 54 | sharer-id: '1156602471017725' 55 | title: '[Javascript] Promise, generator, async與ES6 « Huli's Blog' 56 | link: 'http://huli.logdown.com/posts/292655-javascript-promise-generator-async-es6' 57 | cover: 'http://logdown.com/images/og_plain.jpg' 58 | resize: 1 59 | intro: 'JS 處理非同步的進化史簡介。由最基礎的 callback 到 ES6 的 Promise,再引入 Generator 來精簡,最後是 ES7 的 async function' 60 | 61 | - permalink: 'https://fb.com/521085554595481_980514468652585' 62 | time: '2016-04-13T12:28:28+0000' 63 | sharer-name: 'Rplus Chen' 64 | sharer-id: '903912066343244' 65 | title: 'CSS @apply rule (native CSS mixins)' 66 | link: 'https://t.co/aVKid292kG' 67 | cover: 'http://i.imgur.com/o7pDpdQ.png' 68 | intro: '繼 variables 後,CSS @apply 這一有趣的功能也被瀏覽器實作了,期待未來能更便利地由這功能來達成 mixin 的效果!' 69 | 70 | - permalink: 'https://fb.com/521085554595481_981369365233762' 71 | time: '2016-04-15T02:34:42+0000' 72 | sharer-name: 'Amobiz Chen' 73 | sharer-id: '521238804693443' 74 | title: 'AngularJS 1.5 最佳實務' 75 | link: 'http://amobiz.github.io/2016/04/15/angularjs-1.5-best-practices/' 76 | cover: 'https://angularjs.org/img/AngularJS-large.png' 77 | intro: 'Amobiz Chen 以自己開發 AngularJS v1 的經驗匯整為這篇詳細的 better practice!' 78 | 79 | - permalink: 'https://fb.com/521085554595481_980997615270937' 80 | time: '2016-04-14T10:52:18+0000' 81 | sharer-name: 'MaoYang Chien' 82 | sharer-id: '10153285570810982' 83 | title: 'Framer Code' 84 | link: 'http://framerco.de/' 85 | cover: 'http://41.media.tumblr.com/f07cff256450b31e7114908057307087/tumblr_nysh26xdTN1ur3yszo1_1280.png' 86 | resize: 1 87 | intro: 'FramerJS 是款標榜易用且高保真的 prototype 製作框架。這網站收集了諸多由 FramerJS 製作而成的範例專案' 88 | 89 | - permalink: 'https://fb.com/521085554595481_980452781992087' 90 | time: '2016-04-13T09:55:43+0000' 91 | sharer-name: 'Rplus Chen' 92 | sharer-id: '903912066343244' 93 | title: '#F2ETW hashtag' 94 | link: 'https://www.facebook.com/photo.php?fbid=1099690636765385&set=gm.980452781992087&type=3' 95 | cover: 'https://scontent-tpe1-1.xx.fbcdn.net/hphotos-xap1/t31.0-8/fr/cp0/e15/q65/12968095_1099690636765385_2553378537154595171_o.jpg' 96 | resize: 1 97 | intro: '推廣 Twitter 上的 #F2ETW hashtag,希望針對網頁前端領域能有更多元的討論及分享方式' 98 | -------------------------------------------------------------------------------- /_data/2016-04-17.yml: -------------------------------------------------------------------------------- 1 | 2 | - permalink: 'https://fb.com/521085554595481_984558311581534' 3 | time: '2016-04-21T07:10:11+0000' 4 | sharer-name: '丁磊' 5 | sharer-id: '1013967215350244' 6 | title: '《Atom 编辑器使用者手册》' 7 | link: 'http://flight-manual.atom.io/' 8 | cover: 'http://flight-manual.atom.io/assets/images/book/cover.png' 9 | intro: 'Atom Flight Manual: Atom 官方文件更新囉(※1),喜歡 Atom 的人可以好好動手客製一翻' 10 | 11 | - permalink: 'https://fb.com/521085554595481_985032104867488' 12 | time: '2016-04-22T02:54:51+0000' 13 | sharer-name: '丁磊' 14 | sharer-id: '1013967215350244' 15 | title: 'frameless window for transparency' 16 | link: 'https://github.com/transcranial/atom/commit/bd8b597d17711489ea519642df7b0fc6d1c91ffc' 17 | cover: 'https://scontent-tpe1-1.xx.fbcdn.net/hphotos-xpt1/v/t1.0-9/fr/cp0/e15/q65/13062388_1014453168634982_1763106350609438884_n.jpg?efg=eyJpIjoiYiJ9&oh=d8959ac1ac8894c98b81c01791399cf4&oe=57B7B21C' 18 | intro: '丁磊分享了如何調整 Atom 編輯器為無編框 & 透明背景的技巧' 19 | 20 | - permalink: 'https://fb.com/521085554595481_982667588437273' 21 | time: '2016-04-17T15:05:16+0000' 22 | sharer-name: 'Yuren Ju' 23 | sharer-id: '10152785149951631' 24 | title: 'Jobspace Meetup: 前端向量技術 -- Create Vectors in JavaScript' 25 | link: 'http://jobspace.kktix.cc/events/2016-create-vectors' 26 | cover: 'https://t.kfs.io/assets/kktix-og-image-e49ca160c99f2162a6cecbf7cfc5644a.png' 27 | intro: 'Yuren Ju 宣傳於 Jobspace 的付費聚會活動: 使用 JS 開發向量繪圖軟體的心得' 28 | 29 | - permalink: 'https://fb.com/521085554595481_982569278447104' 30 | time: '2016-04-17T12:09:52+0000' 31 | sharer-name: '林靜君' 32 | sharer-id: '1123047127708817' 33 | title: 'Moment.js | Home' 34 | link: 'http://momentjs.com/' 35 | intro: 'Moment.js 是一款處理時間的知名 JS library,包含解析、驗證、運算、格式化' 36 | 37 | - permalink: 'https://fb.com/521085554595481_982537598450272' 38 | time: '2016-04-17T10:46:14+0000' 39 | sharer-name: '邱弘毅' 40 | sharer-id: '824068551038406' 41 | title: '[前端連載] 了解網頁發展的脈絡(中)——JavaScript 歷史 和 Framework 是什麼?' 42 | link: 'https://noootown.wordpress.com/2016/04/17/javascript-framework-explain-2/' 43 | cover: 'https://noootown.files.wordpress.com/2016/04/web-error.png' 44 | intro: '邱弘毅簡介 JS 的歷史與目前常見 framework' 45 | 46 | - permalink: 'https://fb.com/521085554595481_985124218191610' 47 | time: '2016-04-22T08:19:14+0000' 48 | sharer-name: 'Brecht Huang' 49 | sharer-id: '10206272771480344' 50 | title: 'Modern Web 2016::Call for Speakers' 51 | link: 'http://ithometw.kktix.cc/events/modernweb2016cfs' 52 | cover: 'https://t.kfs.io/upload_images/49663/Facebook-share-banner_original.jpg' 53 | resize: 1 54 | intro: 'Modern Web 2016 開始招募講者了!今年議程有四大領域:產品設計、網站開發、系統維運、營運管理。歡迎各路前端好手踴躍報名參與!' 55 | 56 | - permalink: 'https://fb.com/521085554595481_985125524858146' 57 | time: '2016-04-22T08:24:23+0000' 58 | sharer-name: 'Taker Wu' 59 | sharer-id: '10152874271783562' 60 | title: '網頁基礎15天' 61 | notice: '我知道這是篇廣宣文' 62 | link: 'http://www.everyonecanwebsite.com/' 63 | cover: 'http://pizwu.github.io/images/cover%20Taker.jpg' 64 | intro: 'Taker Wu 開辦的線上網頁基礎課程廣宣文' 65 | 66 | - permalink: 'https://fb.com/521085554595481_983611695009529' 67 | time: '2016-04-19T11:53:24+0000' 68 | sharer-name: '林靜君' 69 | sharer-id: '1123047127708817' 70 | title: 'straightline bookmark' 71 | link: 'http://bm.straightline.jp/' 72 | cover: 'http://bm.straightline.jp/static/image/og-image.png' 73 | intro: '這網站收集諸多漂亮的網站設計可供觀摩,並附有 tag filter' 74 | 75 | - permalink: 'https://fb.com/521085554595481_984560011581364' 76 | time: '2016-04-21T07:15:31+0000' 77 | sharer-name: '郭柏逸' 78 | sharer-id: '973950949320262' 79 | intro: '又見關於局部靜態結構疑問的熱烈討論' 80 | 81 | - permalink: 'https://fb.com/521085554595481_985677424802956' 82 | time: '2016-04-23T12:45:35+0000' 83 | sharer-name: '林立秦' 84 | sharer-id: '952773934745171' 85 | title: 'animation button#2' 86 | link: 'http://codepen.io/lichin-lin/full/KzeLMb/' 87 | cover: 'https://scontent-tpe1-1.xx.fbcdn.net/v/t1.0-9/fr/cp0/e15/q65/13076944_1100833953272501_6004428307392723212_n.jpg?efg=eyJpIjoiYiJ9&oh=8b0d1a324cf2d46d8dd7ac0619c4dba0&oe=57B28D2C' 88 | intro: '林立秦分享他按鈕背景動畫的練習作品' 89 | -------------------------------------------------------------------------------- /_data/2016-04-24.yml: -------------------------------------------------------------------------------- 1 | - permalink: 'https://fb.com/521085554595481_989445331092832' 2 | time: '2016-04-30T05:19:48+0000' 3 | sharer-name: '楊雅晴' 4 | sharer-id: '1062487557144901' 5 | title: '2016 年已快過一半,你已經運用這 6 個最潮的網頁設計趨勢了嗎?' 6 | link: 'http://www.inside.com.tw/2015/08/05/2015-web-design-trends' 7 | cover: 'http://www.inside.com.tw/wp-content/uploads/2015/08/001.png' 8 | intro: '一篇篡改年份的舊文新發。簡介 2015 網頁設計趨勢' 9 | 10 | - permalink: 'https://fb.com/521085554595481_986044131432952' 11 | time: '2016-04-24T04:26:11+0000' 12 | sharer-name: 'MaoYang Chien' 13 | sharer-id: '10153285570810982' 14 | title: 'The Way We Build : Airbnb Design' 15 | link: 'http://airbnb.design/the-way-we-build/' 16 | cover: 'http://airbnb.design/wp-content/uploads/2016/04/widescreen-V2-airbnb-dls-components-compressed.png' 17 | resize: 1 18 | intro: 'Airbnb 設計團對簡介團隊 Design Language System 建立的來由,藉共有 styleguide 以更利協作配合' 19 | 20 | - permalink: 'https://fb.com/521085554595481_986160238088008' 21 | time: '2016-04-24T10:40:58+0000' 22 | sharer-name: '邱弘毅' 23 | sharer-id: '824068551038406' 24 | title: '[前端連載] 了解網頁發展的脈絡(下)——什麼是AJAX,以及jQuery、CSS3、HTML5簡單介紹' 25 | link: 'http://wp.me/p6gwC3-Nv' 26 | cover: 'https://noootown.files.wordpress.com/2016/04/html5-youtube.png' 27 | intro: '生活化地簡介 Ajax 概念' 28 | 29 | - permalink: 'https://fb.com/521085554595481_986703674700331' 30 | time: '2016-04-25T10:16:14+0000' 31 | sharer-name: 'MaoYang Chien' 32 | sharer-id: '10153285570810982' 33 | title: 'shiningjason1989/react-quick-tutorial' 34 | link: 'https://github.com/shiningjason1989/react-quick-tutorial' 35 | cover: 'https://avatars3.githubusercontent.com/u/652135?v=3&s=400' 36 | intro: '由 shiningjason1989 建立的 React.js 快速入門教學 GitHub 專案' 37 | 38 | - permalink: 'https://fb.com/521085554595481_987705904600108' 39 | time: '2016-04-27T02:34:06+0000' 40 | sharer-name: 'Jas Chen' 41 | sharer-id: '999962876680799' 42 | title: 'World’s Fastest Growing Open Source Platform Pushes Out New Release | Node.js' 43 | link: 'https://nodejs.org/en/blog/announcements/v6-release/' 44 | cover: 'https://nodejs.org/static/images/logos/nodejs-new-white-pantone.png' 45 | resize: 1 46 | intro: 'Node.js 釋出了穩定版本第六版。在 module loading 方面有顯著效能提升,可望加速開發大型專案的啟動時間;其它細項可至官方 blog 瞭解' 47 | 48 | - permalink: 'https://fb.com/521085554595481_987339457970086' 49 | time: '2016-04-26T13:04:17+0000' 50 | sharer-name: 'Denny Ku' 51 | sharer-id: '841989239187866' 52 | title: 'Super tiny compiler · De-bug: 一鍵跑版' 53 | link: 'http://abalone0204.github.io/2016/04/25/Super-tiny-compiler/' 54 | cover: 'https://cloud.githubusercontent.com/assets/952783/14413766/134c4068-ff39-11e5-996e-9452973299c2.png' 55 | resize: 1 56 | intro: '以 JS 撰寫一個 lisp compiler 的開發紀錄。由字串解析到 AST 轉換,最後再到生成程式碼,每個步驟都記錄了思考過程' 57 | 58 | - permalink: 'https://fb.com/521085554595481_986142711423094' 59 | time: '2016-04-24T09:41:08+0000' 60 | sharer-name: 'Luke Chi' 61 | sharer-id: '10152978551554713' 62 | title: 'Guam Map' 63 | link: 'http://lukechi1219.github.io/DartDemo/d008' 64 | intro: 'Luke Chi 分享他以 polymer webcomponent 自製的關島 bus 動態地圖' 65 | 66 | - permalink: 'https://fb.com/521085554595481_987898547914177' 67 | time: '2016-04-27T11:39:09+0000' 68 | sharer-name: 'MaoYang Chien' 69 | sharer-id: '10153285570810982' 70 | title: '16 Opensource Reactjs Projects for Reference' 71 | link: 'https://www.icicletech.com/blog/16-opensource-reactjs-projects-to-learn-from' 72 | cover: 'http://cdn1.icicletech.com/media/l_react-opensource-logo.jpg' 73 | intro: '這篇分享文裡有 16 個開源的 react 專案,若有興趣的可以參考各專案的原始碼學習' 74 | 75 | - permalink: 'https://fb.com/521085554595481_987683241269041' 76 | time: '2016-04-27T01:16:25+0000' 77 | sharer-name: 'MaoYang Chien' 78 | sharer-id: '10153285570810982' 79 | title: 'UI Testing in React — KADIRA VOICE' 80 | link: 'https://voice.kadira.io/ui-testing-in-react-74fd90a5d58b#.enpynl9dt' 81 | cover: 'https://cdn-images-1.medium.com/max/1200/1*SESrCE3HCriSWJ3Y4OXahA.png' 82 | resize: 1 83 | intro: '文中分別介紹 UI 測試中的兩類: Functional Testing & Visual Testing,並以實際的小範例來解釋如何以 React 實作自動化測試' 84 | 85 | - permalink: 'https://fb.com/521085554595481_987038461333519' 86 | time: '2016-04-25T22:51:01+0000' 87 | sharer-name: '陳聖博' 88 | sharer-id: '10206381218146197' 89 | title: '五月 #網頁設計沙龍-Accupass 活動通' 90 | link: 'http://www.accupass.com/event/register/1604172213412016034270' 91 | cover: 'http://img.accupass.com/userupload/7490fafe29be4f15947b6fc8a759d318.jpg' 92 | notice: '我知道這是篇廣宣文' 93 | resize: 1 94 | intro: '由 MacroViz 主辦的線上網頁設計課程套裝' 95 | -------------------------------------------------------------------------------- /_data/2016-05-01.yml: -------------------------------------------------------------------------------- 1 | 2 | - permalink: 'https://fb.com/521085554595481_990614534309245' 3 | time: '2016-05-02T03:54:29+0000' 4 | sharer-name: '廖洧杰' 5 | sharer-id: '996025350417110' 6 | intro: '面對愈來愈包山包海的前端業務,廖洧杰以自身經驗分享自己對前端徵才職缺介紹的建議。聊聊 Framework、職稱、後端技術、UI/UX 各項技能對前端的必需程度' 7 | 8 | - permalink: 'https://fb.com/521085554595481_993295614041137' 9 | time: '2016-05-07T10:20:16+0000' 10 | sharer-name: 'Frances Cheng' 11 | sharer-id: '1271430766204244' 12 | intro: 'Frances Cheng 個人發起了一個 100days UI/UX project,報名非常踴躍;但限量是殘酷的,再加上其活動是在 LINE 群組上討論的,小編也沒加到,沒法繼續瞭解活動狀況' 13 | 14 | - permalink: 'https://fb.com/521085554595481_991629544207744' 15 | time: '2016-05-04T04:41:39+0000' 16 | sharer-name: 'Moshi Huang' 17 | sharer-id: '1072714999409439' 18 | title: '不要只因為性能考量而選擇 React.js' 19 | link: 'http://cepave.com/do-not-choose-react-just-for-performance/' 20 | cover: 'https://facebook.github.io/react/img/docs/should-component-update.png' 21 | intro: '一篇 React.js 的反思文:Framework 非全能。文中結論部份亦指出 React.js 實際更值得關注的是其它諸如組件化之類的優點,而非「Virtual DOM 就是快」的誤解' 22 | 23 | - permalink: 'https://fb.com/521085554595481_990931000944265' 24 | time: '2016-05-02T18:31:47+0000' 25 | sharer-name: 'Rplus Chen' 26 | sharer-id: '903912066343244' 27 | title: 'Improving the Quality of Your CSS with PostCSS' 28 | link: 'https://t.co/NU9Q2dERG7' 29 | cover: 'http://www.sitepoint.com/wp-content/themes/sitepoint/assets/images/icon.html-css.png' 30 | resize: 1 31 | intro: '文中介紹了五款能輔助提升 CSS 品質的 PostCSS plugin,對於 CSS 自動化開發流程 & 分析應能有所助益' 32 | 33 | - permalink: 'https://fb.com/521085554595481_990002294370469' 34 | time: '2016-05-01T02:06:17+0000' 35 | sharer-name: '林靜君' 36 | sharer-id: '1123047127708817' 37 | title: '理解CSS3 transform中的Matrix(矩阵) « 张鑫旭-鑫空间-鑫生活' 38 | link: 'http://www.zhangxinxu.com/wordpress/2012/06/css3-transform-matrix-矩阵/' 39 | cover: 'http://ww3.sinaimg.cn/bmiddle/4b4d632fjw1dtq2jrsr1jj.jpg' 40 | resize: 1 41 | intro: '以二維矩陣介紹 CSS transform 中各類圖像轉換的原理' 42 | 43 | - permalink: 'https://fb.com/521085554595481_990090434361655' 44 | time: '2016-05-01T06:21:01+0000' 45 | sharer-name: '林立秦' 46 | sharer-id: '952773934745171' 47 | title: 'Skew-List #animation-tag' 48 | link: 'https://codepen.io/lichin-lin/full/QNZegb/' 49 | cover: 'https://scontent-tpe1-1.xx.fbcdn.net/t31.0-8/fr/cp0/e15/q65/13072650_1105457142810182_8049762450149682004_o.jpg?efg=eyJpIjoiYiJ9' 50 | resize: 1 51 | intro: '林立秦分享其在 codepen 上對於雙重 skew transform 的練習作品' 52 | 53 | - permalink: 'https://fb.com/521085554595481_992190390818326' 54 | time: '2016-05-05T09:22:30+0000' 55 | sharer-name: 'Rplus Chen' 56 | sharer-id: '903912066343244' 57 | title: 'An Ultimate Guide To CSS Pseudo-Classes And Pseudo-Elements – Smashing Magazine' 58 | link: 'https://t.co/n030lGBeVD' 59 | cover: 'https://media-mediatemple.netdna-ssl.com/wp-content/uploads/2016/05/pseudo-classes-pseudo-elements-opt.jpg' 60 | intro: '各種 CSS Pseudo-Class(:) 跟 Pseudo-Element(::) 的詳細介紹文' 61 | 62 | - permalink: 'https://fb.com/521085554595481_992324757471556' 63 | time: '2016-05-05T15:48:05+0000' 64 | sharer-name: 'Caesar Chi' 65 | sharer-id: '10153794877219838' 66 | intro: 'Caesar Chi 針對前端測試領域,提出入門應具有的知識基礎為何,並分享傳承經驗的鋼要順序' 67 | 68 | - permalink: 'https://fb.com/521085554595481_991210127583019' 69 | time: '2016-05-03T07:43:21+0000' 70 | sharer-name: 'Watson Chen' 71 | sharer-id: '1019839761384620' 72 | title: 'babydragoner/SimpleRWD' 73 | link: 'https://github.com/babydragoner/SimpleRWD/blob/master/README.zh-tw.md' 74 | cover: 'https://avatars1.githubusercontent.com/u/4746053?v=3&s=400' 75 | intro: 'Watson Chen 分享他製作的簡易 WordPress RWD 頁面' 76 | 77 | - permalink: 'https://fb.com/521085554595481_992948830742482' 78 | time: '2016-05-06T16:46:34+0000' 79 | sharer-name: '林楊興' 80 | sharer-id: '10205947936271938' 81 | title: 'Redux middleware Functional Programming « mz026's Blog' 82 | link: 'http://mz026.logdown.com/posts/702274-redux-middleware-functional-programming' 83 | cover: 'http://logdown.com/images/og_plain.jpg' 84 | intro: '林楊興以 Redux source code 作為切入點,來介紹其中優雅的 middleware 設計與作法' 85 | -------------------------------------------------------------------------------- /_data/2016-05-08.yml: -------------------------------------------------------------------------------- 1 | 2 | - permalink: 'https://fb.com/521085554595481_997109490326416' 3 | time: '2016-05-14T12:19:23+0000' 4 | sharer-name: '陳奕豪' 5 | sharer-id: '917675588255712' 6 | title: 'Animated Transition Effects in CSS and jQuery | CodyHouse' 7 | link: 'https://codyhouse.co/gem/animated-transition-effects/?utm_source=designernews' 8 | cover: 'https://0bf196087c14ed19d1f11cf1-ambercreativelab.netdna-ssl.com/wp-content/uploads/2016/05/animated-transition-effects-featured.png' 9 | resize: 1 10 | intro: 'CodyHouse 過渡效果又一力作,這次使用的是 image sprites + animation steps 各種創意十足的呈現' 11 | 12 | - permalink: 'https://fb.com/521085554595481_995387467165285' 13 | time: '2016-05-11T02:23:58+0000' 14 | sharer-name: '王志誠' 15 | sharer-id: '1120548697961771' 16 | title: '高雄前端社群#24 - 好的瀏覽器開發工具帶你上天堂' 17 | link: 'http://goo.gl/dGy3hk' 18 | cover: 'https://t.kfs.io/upload_images/50108/ChromeWorkshop_original.jpg' 19 | resize: 1 20 | intro: '來自高雄前端社群的免費活動,這次的主題將會是針對 Chrome devtools 的操作' 21 | 22 | - permalink: 'https://fb.com/521085554595481_993855083985190' 23 | time: '2016-05-08T10:33:33+0000' 24 | sharer-name: '邱弘毅' 25 | sharer-id: '824068551038406' 26 | title: '[前端連載] 開發環境IDE和初探html' 27 | link: 'https://noootown.wordpress.com/2016/05/08/ide-html1/' 28 | cover: 'https://noootown.files.wordpress.com/2016/05/e89ea2e5b995e5bfabe785a7-2016-05-07-e4b88be58d887-06-331.png' 29 | intro: '簡介一些常見的文字編輯器與 HTML 結構' 30 | 31 | - permalink: 'https://fb.com/521085554595481_994975523873146' 32 | time: '2016-05-10T09:29:23+0000' 33 | sharer-name: 'Jovi Tsai' 34 | sharer-id: '10200621292611341' 35 | intro: 'Jovi Tsai 用影片介紹了 Emmet 在 Sublime Text rename_tag 的快速鍵' 36 | 37 | - permalink: 'https://fb.com/521085554595481_996926040344761' 38 | time: '2016-05-14T02:17:14+0000' 39 | sharer-name: '揪吉林' 40 | sharer-id: '10152786331572483' 41 | title: 'Introduction to Material-UI' 42 | link: 'https://monotonique.github.io/introduction_to_material_ui/#/' 43 | cover: 'https://material-design.storage.googleapis.com/publish/material_v_8/material_ext_publish/0B7WCemMG6e0VVFpiZ041SmhwY2c/what_is_material_environment.png' 44 | resize: 1 45 | intro: 'George Lin 分享他以 React 套用 Material-UI 的心得簡報' 46 | 47 | - permalink: 'https://fb.com/521085554595481_995498217154210' 48 | time: '2016-05-11T08:12:32+0000' 49 | sharer-name: 'MaoYang Chien' 50 | sharer-id: '10153285570810982' 51 | title: 'Soft & Share 站友好文分享-從前端到全端之路' 52 | link: 'https://softnshare.wordpress.com/2016/05/11/soft-share-站友好文分享-從前端到全端之路/' 53 | cover: 'https://softnshare.files.wordpress.com/2016/05/pablo-30.png' 54 | resize: 1 55 | intro: '文中介紹以一非資工背景的前端工程師如何跨足全端,並選用 serverless 的開發環境' 56 | 57 | - permalink: 'https://fb.com/521085554595481_994915363879162' 58 | time: '2016-05-10T05:35:17+0000' 59 | sharer-name: '黃保翕' 60 | sharer-id: '10206611907686693' 61 | title: '使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例' 62 | link: 'http://bit.ly/ng2usingts' 63 | cover: 'http://cdn.slidesharecdn.com/ss_thumbnails/developangular2applicationusingtypescript-160510050905-thumbnail-4.jpg?cb=1462857143' 64 | resize: 1 65 | intro: '保哥分享他於創新應用開發大會的 Angular 2 演講簡報。裡頭介紹 Angular 2 之外,也簡介了 TypeScript 的部份用法' 66 | 67 | - permalink: 'https://fb.com/521085554595481_994004003970298' 68 | time: '2016-05-08T15:47:45+0000' 69 | sharer-name: 'Denny Ku' 70 | sharer-id: '841989239187866' 71 | title: '淺入淺出 Generator Function · De-bug: 一鍵跑版' 72 | link: 'http://abalone0204.github.io/2016/05/08/es6-generator-func/' 73 | cover: 'http://www.rumproast.com/images/uploads/shallow_end_thumb.jpg' 74 | intro: 'Denny Ku 介紹如何利用 ES2015 新增的 generator function 來撰寫更直觀的非同步程式碼' 75 | 76 | - permalink: 'https://fb.com/521085554595481_996636337040398' 77 | time: '2016-05-13T14:09:35+0000' 78 | sharer-name: '郭孝直' 79 | sharer-id: '10203537517513403' 80 | title: '現代網頁設計趨勢觀察' 81 | link: 'https://channel9.msdn.com/events/Modern-Web-TW/mwebday/06/player' 82 | cover: 'https://f.ch9.ms/thumbnail/c4cb10f9-4f97-4279-b2b7-dd25ac1eb2c8.jpg' 83 | resize: 1 84 | intro: '2015 年台灣微軟舉辦現代化網站技術分享日中的「現代網頁設計趨勢觀察」議程錄影' 85 | 86 | - permalink: 'https://fb.com/521085554595481_995413627162669' 87 | time: '2016-05-11T03:44:20+0000' 88 | sharer-name: 'Jovi Tsai' 89 | sharer-id: '10200621292611341' 90 | intro: 'Jovi Tsai 以錄影方式分享他 Sass 的開發環境' 91 | -------------------------------------------------------------------------------- /_data/2016-05-15.yml: -------------------------------------------------------------------------------- 1 | 2 | - permalink: 'https://fb.com/521085554595481_1000054673365231' 3 | time: '2016-05-20T08:40:42+0000' 4 | sharer-name: '陳柏融' 5 | sharer-id: '966822483415769' 6 | title: '[學習筆記目錄] JavaScript: Understanding the Weird Part' 7 | link: 'https://pjchender.blogspot.tw/p/blog-page_70.html' 8 | cover: 'https://4.bp.blogspot.com/-55L9K66LDJo/Vz7KeUPo_GI/AAAAAAAAlwg/GuQHxl6-0TEJ-q7x3sGVpyzJx3JPVy6jgCLcB/w1200-h630-p-nu/672274_cd11_2.jpg' 9 | intro: '陳柏融將他在 Udemy 學習 JS 的筆記整理在他個人的部落格,裡頭主要是些較容易使人疑惑的 JS 部份' 10 | 11 | - permalink: 'https://fb.com/521085554595481_997919270245438' 12 | time: '2016-05-16T01:55:34+0000' 13 | sharer-name: '林罡北' 14 | sharer-id: '850954238315251' 15 | title: 'JavaScript 征服了網頁,下一步是要接管電腦桌面的程式語言 | T客邦' 16 | link: 'http://www.techbang.com/posts/43421-javascript-to-conquer-the-web-page-the-next-step-will-be-open-to-take-over-your-computer-desktop' 17 | cover: 'http://cdn0.techbang.com.tw/system/excerpt_images/43421/original/89af50b17eb4f9ac7a825bb39418a1c5.png?1463225000' 18 | resize: 1 19 | intro: '一篇介紹以 JS 為基底的軟體的科技新聞稿,開發平台有 Electron、NW.js、React Nactive' 20 | 21 | - permalink: 'https://fb.com/521085554595481_999944280042937' 22 | time: '2016-05-20T03:15:20+0000' 23 | sharer-name: 'Bo-Yi Wu' 24 | sharer-id: '10153204750654250' 25 | title: '基礎 JavaScript ES6 和 CSS cheat sheet PDF 下載' 26 | link: 'https://blog.wu-boy.com/2016/05/javascript-es6-css-cheat-sheet-pdf/' 27 | cover: 'https://farm8.staticflickr.com/7306/16407404782_1be42bc8f8_o.png' 28 | intro: 'Bo-Yi Wu 分享了 ES2015 & CSS 的速查表,對語法尚未熟悉者可以參考' 29 | 30 | - permalink: 'https://fb.com/521085554595481_1000212953349403' 31 | time: '2016-05-20T14:30:29+0000' 32 | sharer-name: 'DV Vartan' 33 | sharer-id: '10101944717407522' 34 | title: 'CSS coding techniques ★ Mozilla Hacks – the Web developer blog' 35 | link: 'https://hacks.mozilla.org/2016/05/css-coding-techniques/' 36 | cover: 'https://2r4s9p1yi1fa2jd7j43zph8r-wpengine.netdna-ssl.com/files/2016/05/image00.png' 37 | intro: '一篇由 Mozilla 開發者針對「如何撰寫更易維護的 CSS」的文章。建議可與自己的開發原則作些比較,或許會有新的領悟' 38 | 39 | - permalink: 'https://fb.com/521085554595481_997650710272294' 40 | time: '2016-05-15T14:55:32+0000' 41 | sharer-name: '廖洧杰' 42 | sharer-id: '996025350417110' 43 | title: '六角 學院' 44 | link: 'https://www.youtube.com/channel/UC-b2nGm0xLzic38Byti0VjA' 45 | cover: 'https://yt3.ggpht.com/-HxdAXDevCOM/AAAAAAAAAAI/AAAAAAAAAAA/cbt3vRJ_Bzc/s900-c-k-no-rj-c0xffffff/photo.jpg' 46 | resize: 1 47 | intro: '廖洧杰分享六角學院的 YouTube 頻道,影片為針對學員常見問題而製作的解惑影片' 48 | 49 | - permalink: 'https://fb.com/521085554595481_998484373522261' 50 | time: '2016-05-17T06:55:31+0000' 51 | sharer-name: '鄒適齊' 52 | sharer-id: '1137308042954007' 53 | title: 'Web Design Trends 2016: The Definitive Guide' 54 | link: 'https://www.uxpin.com/web-design-trends-2016-definitive-guide' 55 | cover: 'https://www.uxpin.com/images/homepage/ebooks/web-design-trends-2016/cover.jpg' 56 | resize: 1 57 | intro: '這是篇介紹 2016 網頁設計趨勢的長文。UXPin 羅列了十個當前趨勢,除了簡介設計理念外,也點出優點所在,更提出最佳實踐的方向以避免誤用。非常推薦閱讀' 58 | 59 | - permalink: 'https://fb.com/521085554595481_998437110193654' 60 | time: '2016-05-17T04:01:14+0000' 61 | sharer-name: '王志誠' 62 | sharer-id: '1120548697961771' 63 | title: '高雄前端社群的 CSS 讀書會 Part 4' 64 | link: 'https://www.facebook.com/168472513548980/photos/a.169768526752712.1073741828.168472513548980/179708842425347/?type=3' 65 | cover: 'https://scontent-tpe1-1.xx.fbcdn.net/t31.0-8/fr/cp0/e15/q65/13173354_179708842425347_6862227968224096974_o.png.jpg?efg=eyJpIjoiYiJ9' 66 | resize: 1 67 | intro: '高雄前端社群這次的活動主題為 Sass 基礎入門,有提供線上直播與討論,有興趣者可以多加關注' 68 | 69 | - permalink: 'https://fb.com/521085554595481_999163706787661' 70 | time: '2016-05-18T15:33:12+0000' 71 | sharer-name: '林靜君' 72 | sharer-id: '1123047127708817' 73 | title: 'CSS3 3D Menu' 74 | link: 'http://hci.macroviz.com/demo/css3D/menu.html' 75 | cover: 'http://hci.macroviz.com/demo/css3D/img/banner.jpg' 76 | resize: 1 77 | intro: '林靜君分享她以 Codrops Tutorials 為參考而製作的 3D 翻頁效果的菜單習作' 78 | 79 | - permalink: 'https://fb.com/521085554595481_997979130239452' 80 | time: '2016-05-16T04:53:17+0000' 81 | sharer-name: 'Rplus Chen' 82 | sharer-id: '903912066343244' 83 | title: 'retire.insecurity.today' 84 | link: 'http://retire.insecurity.today/' 85 | intro: '一個以 Retire.js 為底的線上檢測工具,主要提醒目標網站使用的 JS Framework 版本有哪些已知漏洞' 86 | 87 | - permalink: 'https://fb.com/521085554595481_998419833528715' 88 | time: '2016-05-17T02:52:10+0000' 89 | sharer-name: 'MaoYang Chien' 90 | sharer-id: '10153285570810982' 91 | title: '深入淺出 Flux — 4cats io' 92 | link: 'https://medium.com/4cats-io/深入淺出-flux-44a48c320e11#.8bxsessir' 93 | cover: 'https://cdn-images-1.medium.com/max/1200/1*1eN9vpOkkGRy2U_RmqyM8Q.png' 94 | intro: '一篇簡介 flux 概念與其中各角色定位的文章。' 95 | -------------------------------------------------------------------------------- /_data/2016-05-22.yml: -------------------------------------------------------------------------------- 1 | 2 | - permalink: 'https://fb.com/521085554595481_1002178373152861' 3 | time: '2016-05-24T09:51:18+0000' 4 | sharer-name: 'Arthur Liao' 5 | sharer-id: '1023782794358947' 6 | title: '程式員求生指南:關於寫程式的二三事' 7 | link: 'https://tw.twincl.com/programming/*652e' 8 | cover: 'https://farm8.staticflickr.com/7421/16492775452_c746f30578_z_d.jpg' 9 | resize: 1 10 | intro: 'Arthur Liao 再次分享個人軟體設計生涯的經驗,並列舉了程式開發者的職業特質與能力演進階段' 11 | 12 | - permalink: 'https://fb.com/521085554595481_1002379173132781' 13 | time: '2016-05-24T18:43:15+0000' 14 | sharer-name: 'Arthur Liao' 15 | sharer-id: '1023782794358947' 16 | intro: 'Arthur Liao 承續前一篇的分享,接著談到前端程式碼在於後續維護與擴充開發上的困難與複雜' 17 | 18 | - permalink: 'https://fb.com/521085554595481_1003128689724496' 19 | time: '2016-05-26T09:22:35+0000' 20 | sharer-name: 'Arthur Liao' 21 | sharer-id: '1023782794358947' 22 | title: '[ACW 2016-07] JavaScript程式設計進階' 23 | link: 'https://tw.twincl.com/~acw/*g652' 24 | cover: 'https://dl.dropboxusercontent.com/u/228423461/images/acw-201607-835b70224f5d.jpg' 25 | resize: 1 26 | notice: '我知道這是篇課程廣宣文' 27 | intro: '由 Arthur Liao 開設的進階 JS 課程' 28 | 29 | - permalink: 'https://fb.com/521085554595481_1001124846591547' 30 | time: '2016-05-22T08:01:19+0000' 31 | sharer-name: '莊景隆' 32 | sharer-id: '10206419614477533' 33 | title: '忍者:JavaScript開發技巧探秘' 34 | link: 'http://24h.pchome.com.tw/books/prod/DJAA2V-A9006QFQV?q=%2FA%2F50528' 35 | cover: 'http://ec1img.pchome.com.tw/pic/v1/data/item/201512/D/J/A/A/2/V/DJAA2V-A9006QFQV000_567a6449a6962.gif' 36 | intro: '一本由 jQuery 作者 John Resig 所撰寫的《Secrets of the JavaScript Ninja 37 | 》中譯書輯 ' 38 | 39 | - permalink: 'https://fb.com/521085554595481_1002109983159700' 40 | time: '2016-05-24T06:34:26+0000' 41 | sharer-name: 'Rplus Chen' 42 | sharer-id: '903912066343244' 43 | title: 'Debugging CSS – Ben Frain' 44 | link: 'https://t.co/gLZSRpvEDe' 45 | cover: 'https://secure.gravatar.com/avatar/08382dba09a1b945d96656df5e1725f7?s=100&d=retro&r=pg' 46 | intro: '該文分享了作者本身 CSS 除錯的各階段思路,整個過程會涉及到經驗、試誤,以及搜尋等各種技巧,對於 CSS 維護者是篇值得瞭解的好文章' 47 | 48 | - permalink: 'https://fb.com/521085554595481_1004230506280981' 49 | time: '2016-05-28T16:05:25+0000' 50 | sharer-name: 'Yang Li-Yi' 51 | sharer-id: '1172583412774235' 52 | title: '新創產業導師聚會 | ALPHA Camp' 53 | link: 'https://dojo.alphacamp.co/events/front-end-meeting' 54 | cover: 'https://assets.alphacamp.co/events/logos/000/000/057/original/%E8%9E%A2%E5%B9%95%E5%BF%AB%E7%85%A7_2016-05-28_10.15.03_PM.png?1464444936' 55 | intro: '一場在 ALPHA Camp 舉辦的 JS 交流分享會' 56 | 57 | - permalink: 'https://fb.com/521085554595481_1003151273055571' 58 | time: '2016-05-26T10:48:07+0000' 59 | sharer-name: '吳逸文' 60 | sharer-id: '10152724942760718' 61 | title: '無限期支持 IE8' 62 | link: 'https://www.facebook.com/ie8forever/' 63 | cover: 'https://scontent-tpe1-1.xx.fbcdn.net/t31.0-8/13268224_465260683685269_6657561305688342427_o.jpg' 64 | intro: '一個 IE8 的嘲諷式粉絲專頁…' 65 | 66 | - permalink: 'https://fb.com/521085554595481_1002608616443170' 67 | time: '2016-05-25T06:26:42+0000' 68 | sharer-name: '林佑安' 69 | sharer-id: '10152988954056715' 70 | title: '小編幫你踩地雷系列: TypeScript 適合我嗎 | C9S 開源電台' 71 | link: 'https://medium.com/@c9s/小編幫你踩地雷系列-typescript-適合我嗎-e15b5a0607d7#.u4ua8x5v6' 72 | intro: 'c9s 分享 TypeScript 的使用經驗,文中除了有詳細的試驗步驟還有很多提醒,最後更佛心地分享專案模版 ts-webpack' 73 | 74 | - permalink: 'https://fb.com/521085554595481_1003131183057580' 75 | time: '2016-05-26T09:32:58+0000' 76 | sharer-name: '吳智楷' 77 | sharer-id: '1120326234652619' 78 | title: 'CodePen - Daily UI #004 - Calculator' 79 | link: 'http://s.codepen.io/flymaple/debug/rLBJrR' 80 | intro: '一篇 CSS 垂直置中的討論' 81 | 82 | - permalink: 'https://fb.com/521085554595481_1002118709825494' 83 | time: '2016-05-24T06:52:48+0000' 84 | sharer-name: 'Chander Shiu' 85 | sharer-id: '690282577784734' 86 | title: 'tedshd/img_object_fit' 87 | link: 'https://github.com/tedshd/img_object_fit' 88 | cover: 'https://avatars1.githubusercontent.com/u/2949145?v=3&s=400' 89 | intro: 'Chander Shiu 以 CSS background-size 寫了支針對 img object-fit 需求的客製型 polyfill' 90 | -------------------------------------------------------------------------------- /_data/2016-05-29.yml: -------------------------------------------------------------------------------- 1 | 2 | - permalink: 'https://fb.com/521085554595481_1005575742813124' 3 | time: '2016-05-31T09:18:16+0000' 4 | sharer-name: 'Derek Wang' 5 | sharer-id: '920437281311659' 6 | intro: 'Derek Wang 分享他在開發 mobile Canvas, Audio API 上遇到的各種坑' 7 | 8 | - permalink: 'https://fb.com/521085554595481_1007584999278865' 9 | time: '2016-06-04T09:53:32+0000' 10 | sharer-name: '羅拉拉' 11 | sharer-id: '971614109523530' 12 | title: 'WebGL 2D圖片轉粒子' 13 | link: 'http://lauraluo.github.io/particleDemo/dist/' 14 | cover: 'http://lauraluo.github.io/particleDemo/dist/images/2016-06-02_202130.jpg' 15 | resize: 1 16 | intro: '羅拉拉分享學習 three.js 的 3D 練習作品' 17 | 18 | - permalink: 'https://fb.com/521085554595481_1007506492620049' 19 | time: '2016-06-04T05:41:21+0000' 20 | sharer-name: 'Ruby Chen' 21 | sharer-id: '1156602471017725' 22 | title: 'React AJAX Best Practices' 23 | link: 'http://andrewhfarmer.com/react-ajax-best-practices/' 24 | cover: 'http://andrewhfarmer.com/img/2016/02/container-components.png' 25 | resize: 1 26 | intro: '一篇關於 React AJAX 的推薦作法。文中介紹了四種方式,各自對應到不同的適用情境' 27 | 28 | - permalink: 'https://fb.com/521085554595481_1005688569468508' 29 | time: '2016-05-31T13:59:23+0000' 30 | sharer-name: '謝松庭' 31 | sharer-id: '1333075733373987' 32 | intro: '一則關於前端工作職責範圍的熱烈討論串' 33 | 34 | - permalink: 'https://fb.com/521085554595481_1005198792850819' 35 | time: '2016-05-30T15:15:02+0000' 36 | sharer-name: 'Rplus Chen' 37 | sharer-id: '903912066343244' 38 | title: '[POST] 生活化 response time · Issue #34 · Rplus/rplus.github.io' 39 | link: 'https://t.co/WZidYIvi87' 40 | cover: 'https://avatars2.githubusercontent.com/u/1808835?v=3&s=400' 41 | intro: 'Rplus Chen 以「吃披薩」的比喻,來簡介網路中檔案傳輸速度的基本優化方針。以生活化的聯想法來加強理解' 42 | 43 | - permalink: 'https://fb.com/521085554595481_1004749552895743' 44 | time: '2016-05-29T16:54:53+0000' 45 | sharer-name: 'Rplus Chen' 46 | sharer-id: '903912066343244' 47 | title: 'From Zero to Front-end Hero (Part 1) — Free Code Camp' 48 | link: 'https://t.co/3xzIQ36NCo' 49 | cover: 'https://cdn-images-1.medium.com/max/1200/1*vcUBRwST9B4bJcVCbailhw.png' 50 | resize: 1 51 | intro: '兩篇導讀文章中分別針對 HTML/CSS、JS 兩部份來分享作者學習過程中的摘錄,並且附有實作步驟來加強學習吸收。(中譯文在推文裡)' 52 | 53 | - permalink: 'https://fb.com/521085554595481_1006661569371208' 54 | time: '2016-06-02T12:19:47+0000' 55 | sharer-name: 'MaoYang Chien' 56 | sharer-id: '10153285570810982' 57 | title: 'The Way of the Web Tester' 58 | link: 'https://softnshare.wordpress.com/portfolio/the-way-of-the-web-tester/' 59 | cover: 'https://softnshare.files.wordpress.com/2016/05/jrtest.jpg?w=1000' 60 | resize: 1 61 | notice: '我知道這是篇書籍廣宣文' 62 | intro: 'Spotify 開發團隊成員針對前端測試所撰寫的書籍' 63 | 64 | - permalink: 'https://fb.com/521085554595481_1006537706050261' 65 | time: '2016-06-02T05:48:32+0000' 66 | sharer-name: '吳智楷' 67 | sharer-id: '1120326234652619' 68 | title: 'Daily UI #011 - Flash Message' 69 | link: 'http://codepen.io/flymaple/pen/zBxMXx' 70 | cover: 'http://codepen.io/flymaple/pen/zBxMXx/image/large.png' 71 | intro: '一則關於 CSS animation 位置寫法的討論串,' 72 | 73 | - permalink: 'https://fb.com/521085554595481_1005977119439653' 74 | time: '2016-06-01T03:14:53+0000' 75 | sharer-name: '連韋翔' 76 | sharer-id: '10204602425940798' 77 | intro: '一則關於網站開發工作流程的討論串。主要在於需求未明、做白工的問題' 78 | 79 | - permalink: 'https://fb.com/521085554595481_1007019946002037' 80 | time: '2016-06-03T05:38:11+0000' 81 | sharer-name: 'Kay Lin' 82 | sharer-id: '10200592026559687' 83 | title: 'Mobile Website Speed Testing Tool - Google' 84 | link: 'https://testmysite.thinkwithgoogle.com/' 85 | cover: 'https://testmysite.thinkwithgoogle.com/static/assets/testmysite.jpg' 86 | resize: 1 87 | intro: 'Think with Google 新推出的一款 mobile-friendly 測試頁。可測試後將報表 email 留存' 88 | -------------------------------------------------------------------------------- /_data/2016-06-05.yml: -------------------------------------------------------------------------------- 1 | 2 | - permalink: 'https://fb.com/521085554595481_1008440282526670' 3 | time: '2016-06-06T01:51:43+0000' 4 | sharer-name: '吳政賢' 5 | sharer-id: '1066773103336031' 6 | title: '在 Console 畫 QR Code!' 7 | link: 'http://comdan66.github.io/browser_console_qrcode/' 8 | cover: 'http://comdan66.github.io/browser_console_qrcode/img/og.jpg' 9 | resize: 1 10 | intro: '吳政賢利用 text-shadow 在 console panel 裡做一個 QR Code 的圖樣,這或許是個在網頁藏彩蛋的好地方唷~' 11 | 12 | - permalink: 'https://fb.com/521085554595481_1009783135725718' 13 | time: '2016-06-08T14:59:31+0000' 14 | sharer-name: 'Chihkai Jan' 15 | sharer-id: '10205439277633788' 16 | intro: '對 javascript 初心者推薦書籍的討論串' 17 | 18 | - permalink: 'https://fb.com/521085554595481_1010191232351575' 19 | time: '2016-06-09T08:59:48+0000' 20 | sharer-name: '黃保翕' 21 | sharer-id: '10206611907686693' 22 | title: '10 Fun Browser Games For Learning Web Development' 23 | link: 'http://bit.ly/1U8zct9' 24 | cover: 'http://cdn.tutorialzine.com/wp-content/uploads/2016/05/10-fun-browser-games.jpg' 25 | resize: 1 26 | intro: '這文章裡收集了十款簡單的網頁遊戲,可透過寓教於樂的方式來學習前端相關知識' 27 | 28 | - permalink: 'https://fb.com/521085554595481_1010947825609249' 29 | time: '2016-06-10T15:45:45+0000' 30 | sharer-name: '王瑀軒' 31 | sharer-id: '1073516712723254' 32 | title: '如何建構前端工程師技能樹' 33 | link: 'http://hyperurl.co/club2' 34 | cover: 'https://t.kfs.io/upload_images/51256/kktix__original.jpg' 35 | resize: 1 36 | notice: '我知道這是篇廣宣文' 37 | intro: '由慕課網舉辦的一堂關於前端技能開發經驗分享課程' 38 | 39 | - permalink: 'https://fb.com/521085554595481_1009163959120969' 40 | time: '2016-06-07T13:53:09+0000' 41 | sharer-name: 'Chien Jung Li' 42 | sharer-id: '740132742773496' 43 | intro: '一則關於 ES2015 學習的心得分享討論串' 44 | 45 | - permalink: 'https://fb.com/521085554595481_1008931832477515' 46 | time: '2016-06-07T01:59:10+0000' 47 | sharer-name: '江啾啾' 48 | sharer-id: '10153272635483540' 49 | title: 'Can I use? bot' 50 | link: 'http://www.caniuse-bot.com/' 51 | cover: 'http://www.caniuse-bot.com/assets/images/Icon.png' 52 | intro: '一個參照 caniuse 資料,而可透過 slack 對話式指令來查找瀏覽器支援度的非官方 slack bot' 53 | 54 | - permalink: 'https://fb.com/521085554595481_1008133382557360' 55 | time: '2016-06-05T13:49:44+0000' 56 | sharer-name: '林建良' 57 | sharer-id: '829622337134938' 58 | link: 'https://www.facebook.com/photo.php?fbid=982330045197499&set=gm.1008133382557360&type=3' 59 | cover: 'https://scontent-tpe1-1.xx.fbcdn.net/t31.0-8/fr/cp0/e15/q65/13329592_982330045197499_8550483442446601927_o.jpg?efg=eyJpIjoiYiJ9' 60 | intro: '由一個簡單詢問如何解析 minified JS 的問題,逐漸修正為如何找尋開發用的原始檔' 61 | 62 | - permalink: 'https://fb.com/521085554595481_1009619755742056' 63 | time: '2016-06-08T06:45:53+0000' 64 | sharer-name: 'Wesley Hwang' 65 | sharer-id: '10200245721942111' 66 | title: 'text-rendering | CSS-Tricks' 67 | link: 'https://css-tricks.com/almanac/properties/t/text-rendering/' 68 | cover: 'https://css-tricks.com/wp-content/uploads/2014/03/better-kern.png' 69 | intro: '關於 text-rendering 的討論串,需在視覺與效能上做好平衡' 70 | 71 | - permalink: 'https://fb.com/521085554595481_1008984802472218' 72 | time: '2016-06-07T04:55:50+0000' 73 | sharer-name: 'Rplus Chen' 74 | sharer-id: '903912066343244' 75 | title: 'Introducing Multirange: A tiny polyfill for HTML5.1 two-handle sliders' 76 | link: 'http://lea.verou.me/2016/05/introducing-multirange-a-tiny-polyfill-for-html5-two-handle-sliders/' 77 | intro: 'Lea Verou 以精巧的 CSS 搭配簡單的 JS 實作出具雙重拉霸的 input slider,樣式的可調整性非常高;原始碼非常有趣~' 78 | 79 | - permalink: 'https://fb.com/521085554595481_1011379835566048' 80 | time: '2016-06-11T10:59:26+0000' 81 | sharer-name: 'Ruby Chen' 82 | sharer-id: '1156602471017725' 83 | title: 'Why I use Tape Instead of Mocha & So Should You — JavaScript Scene' 84 | link: 'https://medium.com/javascript-scene/why-i-use-tape-instead-of-mocha-so-should-you-6aa105d8eaf4#.wmze604w0' 85 | cover: 'https://cdn-images-1.medium.com/max/1200/1*d7mHlwL1eQ4n9ZZJzlF0HA.jpeg' 86 | resize: 1 87 | intro: '文中提到 Mocha, Jasmine 等 unit test tool 有著較多的設定(& 其它我看了也沒懂的缺點),而選用 Tape 可有更好的可讀性、較少程式碼 & 維護成本' 88 | -------------------------------------------------------------------------------- /_data/2016-06-12.yml: -------------------------------------------------------------------------------- 1 | - permalink: 'https://fb.com/521085554595481_1013570142013684' 2 | time: '2016-06-15T18:23:50+0000' 3 | sharer-name: 'Denny Ku' 4 | sharer-id: '841989239187866' 5 | title: '寫在 Clairvoyance 發布之後:軟體開發者的社會責任 · De-bug: 一鍵跑版' 6 | link: 'http://abalone0204.github.io/2016/06/16/clv-beta-version/' 7 | cover: 'http://i.imgur.com/lwFbW4l.jpg' 8 | resize: 1 9 | intro: 'Denny Ku 將他製作 Clairvoyance extension 的想法與心得記錄下來,包括後續功能開發的抉擇、是否進行商業化,及職責的反思' 10 | 11 | - permalink: 'https://fb.com/521085554595481_1012284625475569' 12 | time: '2016-06-13T04:48:04+0000' 13 | sharer-name: 'Ott Ben' 14 | sharer-id: '999629473381396' 15 | title: '[心得] 寫了一個在人力銀行職缺下留言的插件' 16 | link: 'https://www.ptt.cc/bbs/Soft_Job/M.1465759641.A.E57.html' 17 | intro: 'Clairvoyance ─ 求職天眼通,是一款可以在各大人力銀行頁面中留言及討論的開源 Chrome extension,開發者 Denny Ku 在這篇文章也提及了對職缺環境的一些想法及可嘗試的作為' 18 | 19 | - permalink: 'https://fb.com/521085554595481_1014290711941627' 20 | time: '2016-06-17T04:13:17+0000' 21 | sharer-name: '林宛諭' 22 | sharer-id: '1165621783458119' 23 | title: 'Innovation Chat' 24 | link: 'https://goo.gl/XrwyOc' 25 | cover: 'https://www.facebook.com/ads/image/?d=AQKut1Yy_Xu22gm5kigXvx8JseobDEtzf5jSDzBXGcOdElDXzBeijbES-dTQ0f8HSRIMUWmlHfvgMozWFW1_2h66gsfRBQUov-QaYJCcSyxBJWhBO1BnCnQhIoKTS6LxxtHGRs6FVAkOnwQjTNXEaA-h' 26 | resize: 1 27 | intro: '可作為開發時備忘的一份精巧 HTTP Response Code Cheatsheet' 28 | 29 | - permalink: 'https://fb.com/521085554595481_1012215045482527' 30 | time: '2016-06-13T00:56:01+0000' 31 | sharer-name: '吳政賢' 32 | sharer-id: '1066773103336031' 33 | title: 'OA's 數字翻轉計數器' 34 | link: 'http://works.ioa.tw/number_flipping_counter/index.html' 35 | cover: 'http://works.ioa.tw/number_flipping_counter/img/og/og.jpg' 36 | resize: 1 37 | intro: '吳政賢分享個人撰寫的翻轉式計數器。使用不同 class 來為數字轉盤定位,而達成轉動動畫效果' 38 | 39 | - permalink: 'https://fb.com/521085554595481_1013754088661956' 40 | time: '2016-06-16T02:47:44+0000' 41 | sharer-name: 'Rplus Chen' 42 | sharer-id: '903912066343244' 43 | title: 'Google Fonts' 44 | link: 'https://t.co/E83JbVEvTp' 45 | cover: 'https://www.gstatic.com/images/icons/material/apps/fonts/1x/opengraph_color_1200dp.png' 46 | resize: 1 47 | intro: 'Google Fonts 網站改版,在功能選取上更加簡便,並使用動態調整 DOM 的 node 數量來提高效能' 48 | 49 | - permalink: 'https://fb.com/521085554595481_1011857492184949' 50 | time: '2016-06-12T09:36:11+0000' 51 | sharer-name: '邱弘毅' 52 | sharer-id: '824068551038406' 53 | title: '沒一村前端筆記' 54 | link: 'https://noootown.wordpress.com/2016/06/11/div-span/' 55 | cover: 'https://noootown.files.wordpress.com/2016/06/divstructure.png' 56 | resize: 1 57 | intro: '簡介 CSS inline & block 差異' 58 | 59 | - permalink: 'https://fb.com/521085554595481_1014271155276916' 60 | time: '2016-06-17T03:05:46+0000' 61 | sharer-name: '吳明憲' 62 | sharer-id: '10153117088408051' 63 | title: 'Atomic CSS 介紹 « 湯姆餡' 64 | link: 'http://tom76kimo-blog.logdown.com/posts/737611-atomic-css-introduction' 65 | cover: 'http://logdown.com/images/og_plain.jpg' 66 | intro: '吳明憲簡介了 Atomic CSS 的使用方式;Atomic CSS 為 Yahoo! 開發的,是種在應用 OOCSS 的理念下,又能自動生成對應 class ,適合應對大型專案的奇妙開發方式' 67 | 68 | - permalink: 'https://fb.com/521085554595481_1014423671928331' 69 | time: '2016-06-17T10:51:57+0000' 70 | sharer-name: '郭孝直' 71 | sharer-id: '10203537517513403' 72 | title: 'The Web Platform: Browser technologies' 73 | link: 'https://platform.html5.org/' 74 | cover: 'https://scontent-tpe1-1.xx.fbcdn.net/v/t1.0-9/fr/cp0/e15/q65/13450154_1140999302587990_2362832709243801087_n.png.jpg?efg=eyJpIjoiYiJ9&oh=774286fa1a358167b046c6272e0713c4&oe=5809C371' 75 | intro: '羅列了各種瀏覽器可用技術,附有 spec、MDN、Can I use & 相關測試方法' 76 | 77 | - permalink: 'https://fb.com/521085554595481_1012367095467322' 78 | time: '2016-06-13T08:52:39+0000' 79 | sharer-name: '楊宗穎' 80 | sharer-id: '10208527300355353' 81 | title: 'www.ryanyang0818.com' 82 | link: 'http://www.ryanyang0818.com/demo/RUI/docs/r_roundProgressbar_example/demo.html' 83 | intro: '楊宗穎分享個人參考 jquery-circle-progress,用 canvas 撰寫的圓形 progress bar' 84 | 85 | - permalink: 'https://fb.com/521085554595481_1012816935422338' 86 | time: '2016-06-14T05:36:43+0000' 87 | sharer-name: 'Amos Lee' 88 | sharer-id: '10153203944282889' 89 | title: 'csscoke.com' 90 | link: 'http://csscoke.com/test/gif/aaa.gif' 91 | cover: 'https://external-tpe1-1.xx.fbcdn.net/safe_image.php?d=AQA1JQvsZfPrWYht&url=http%3A%2F%2Fcsscoke.com%2Ftest%2Fgif%2Faaa.gif' 92 | intro: 'Amos Lee 分享一個 Emmet 的快捷操作方式(custom attribute operators)' 93 | -------------------------------------------------------------------------------- /_data/2016-06-19.yml: -------------------------------------------------------------------------------- 1 | - permalink: 'https://fb.com/521085554595481_1018337444870287' 2 | time: '2016-06-24T14:55:18+0000' 3 | sharer-name: 'Rplus Chen' 4 | sharer-id: '903912066343244' 5 | title: 'HTML Secrets: HTML can do whaaat?!' 6 | link: 'https://t.co/XX1XHi9J6D' 7 | cover: 'http://leaverou.github.io/html-secrets/img/me-pirate.png' 8 | intro: 'Lea Verou 在 CSS Day 2016 的演講中分享了諸多 HTML 相關神妙技巧 ㊙ 非常推薦一讀 ✨' 9 | 10 | - permalink: 'https://fb.com/521085554595481_1017282864975745' 11 | time: '2016-06-22T15:33:06+0000' 12 | sharer-name: 'Rplus Chen' 13 | sharer-id: '903912066343244' 14 | title: 'Web Accessibility | Udacity' 15 | link: 'https://t.co/64hJnqkhyv' 16 | cover: 'https://lh3.googleusercontent.com/mmFuCgIZGljp-Auc8mj_G7eig-0Ui5vtIQ0UTRg6zZvZGKNdgX4x6-2_mnY-vd9IMR_bDQkGglYem33jzeM=s400' 17 | intro: 'Google 跟 Udacity 合作開了一門免費的 Web Accessibility 線上課程,透過課程可學習到扎實的 a11y 基本功!💪' 18 | 19 | - permalink: 'https://fb.com/521085554595481_1015450715158960' 20 | time: '2016-06-19T08:00:30+0000' 21 | sharer-name: 'Rz Chen' 22 | sharer-id: '1055611534453228' 23 | title: '練習以 ReactJS 實作 POS 點單介面' 24 | link: 'https://rz12345.github.io/react-demo/wPOS/' 25 | intro: 'Rz Chen 在看了「24 小時,React 快速入門」後,以點菜系統做為 React 的練習作品 👏' 26 | 27 | - permalink: 'https://fb.com/521085554595481_1016680755035956' 28 | time: '2016-06-21T15:20:08+0000' 29 | sharer-name: 'Rplus Chen' 30 | sharer-id: '903912066343244' 31 | title: 'Monaco Editor' 32 | link: 'https://microsoft.github.io/monaco-editor/index.html' 33 | cover: 'https://cloud.githubusercontent.com/assets/5047891/15751937/4267b918-28ec-11e6-9fbd-d6cd2973c770.png' 34 | resize: 1 35 | intro: 'Monaco Editor 是微軟基於自家的 VS Code 而製作的一款開源網頁文字編輯器,除了一般常見的編輯器功能外,還有不少趣味且實用的功能等你探索唷 ☕' 36 | 37 | - permalink: 'https://fb.com/521085554595481_1016422958395069' 38 | time: '2016-06-21T04:15:55+0000' 39 | sharer-name: '廖洧杰' 40 | sharer-id: '996025350417110' 41 | title: '105高雄大學資管系 web 前端開發專題' 42 | link: 'https://hackpad.com/105-web--1rkiGxwMT3A' 43 | intro: '廖洧杰利用高雄 open data 資料讓高雄大學學生實作各種主題的專題,並將各專題整理在 hackpad 上,以作為期末專題成果展示 🌱' 44 | 45 | - permalink: 'https://fb.com/521085554595481_1016424988394866' 46 | time: '2016-06-21T04:26:16+0000' 47 | sharer-name: 'Ya Jing' 48 | sharer-id: '1024191214301340' 49 | title: 'Web Design Clip | Webデザインクリップ' 50 | link: 'http://www.webdesignclip.com/' 51 | cover: 'http://www.webdesignclip.com/img/ogp.png' 52 | resize: 1 53 | intro: 'Ya Jing 分享了這個收集了許多日系設計風格的網站列表,可作為靈感啟發或是技術研究的對象 ♨' 54 | 55 | - permalink: 'https://fb.com/521085554595481_1016534471717251' 56 | time: '2016-06-21T09:07:59+0000' 57 | sharer-name: '楊宗穎' 58 | sharer-id: '10208527300355353' 59 | title: 'www.ryanyang0818.com' 60 | link: 'http://www.ryanyang0818.com/demo/RUI/docs/r_slidepanel_example/demo2.html' 61 | intro: '楊宗穎了自己撰寫的 off-Canvas 風格並帶有模糊 overlay 的側欄佈局 plugin 🐬' 62 | 63 | - permalink: 'https://fb.com/521085554595481_1018775261493172' 64 | time: '2016-06-25T09:54:43+0000' 65 | sharer-name: '林立秦' 66 | sharer-id: '952773934745171' 67 | title: 'OldNews design' 68 | link: 'https://lichin.me/blog/2016/06/25/oldnews-design' 69 | cover: 'https://lichin.me/img/OldNews/OldNews-desktop.png' 70 | resize: 1 71 | intro: '林立秦引用 Codrops 設計風格實作 SoftBank 報紙風格的個人動態牆 📮' 72 | 73 | - permalink: 'https://fb.com/521085554595481_1018127881557910' 74 | time: '2016-06-24T04:17:34+0000' 75 | sharer-name: 'Moshi Huang' 76 | sharer-id: '1072714999409439' 77 | title: 'EU referendum results – live tracker' 78 | link: 'http://www.theguardian.com/politics/ng-interactive/2016/jun/23/eu-referendum-live-results-and-analysis' 79 | cover: 'https://i.guim.co.uk/img/media/7e2c81412e4ee5172d316c7b792f111a464332ce/0_0_800_480/800.jpg?w=1200&h=632&q=55&auto=format&usm=12&fit=crop&bm=normal&ba=bottom%2Cleft&blend64=aHR0cHM6Ly91cGxvYWRzLmd1aW0uY28udWsvMjAxNi8wNi8wNy9vdmVybGF5LWxvZ28tMTIwMC05MF9vcHQucG5n&s=2d11b28579182495c3b084592f4dbccb' 80 | intro: '由英國衛報所製,以資料視覺化呈現脫歐公投各種投票資訊與比例,包括主訴求、區域性、年齡分佈與教育程度等等 🔎' 81 | 82 | - permalink: 'https://fb.com/521085554595481_1016532881717410' 83 | time: '2016-06-21T09:05:11+0000' 84 | sharer-name: 'YuTin Liu' 85 | sharer-id: '10203040395925690' 86 | title: 'commitizen/cz-cli' 87 | link: 'https://github.com/commitizen/cz-cli' 88 | cover: 'https://avatars1.githubusercontent.com/u/11980392?v=3&s=400' 89 | intro: '主要是希望幫忙 contributors 能更便利地輸入正確的 commit message;透過以 `git cz` 來 commit,可自動選擇訊息類型,還可驗證正確性。是款方便的開源協作輔助工具 🍺' 90 | -------------------------------------------------------------------------------- /_data/2016-06-26.yml: -------------------------------------------------------------------------------- 1 | - permalink: 'https://fb.com/521085554595481_1019798034724228' 2 | time: '2016-06-27T09:20:16+0000' 3 | sharer-name: 'Arthur Liao' 4 | sharer-id: '1023782794358947' 5 | title: '純CSS點擊下拉式選單' 6 | link: 'https://tw.twincl.com/css-html/*6630' 7 | cover: 'https://tw.twincl.com/assets/img/logo-s.631.png' 8 | intro: 'Arthur Liao 以 CSS `:active` 作為下拉式選單的觸發事件,並用在 parent 層的 JS 事件輔助處理額外的點擊' 9 | 10 | - permalink: 'https://fb.com/521085554595481_1020210754682956' 11 | time: '2016-06-28T04:42:36+0000' 12 | sharer-name: 'Ya Jing' 13 | sharer-id: '1024191214301340' 14 | title: '[翻譯] 常被誤用的行動裝置 UX 設計模式' 15 | link: 'https://medium.com/@zonble/b4a8fc41c6d6' 16 | cover: 'https://cdn-images-1.medium.com/max/1200/1*S1ubAEd_-PCoiWmwurXRug.png' 17 | resize: 1 18 | intro: '這篇分享譯文中提及了五種曾風靡一時的設計模式,並點出在部份情況下的盲點,進而提醒設計要確實做好研究功課及檢驗方法' 19 | 20 | - permalink: 'https://fb.com/521085554595481_1020671314636900' 21 | time: '2016-06-29T00:26:07+0000' 22 | sharer-name: '吳政賢' 23 | sharer-id: '1066773103336031' 24 | title: '台北 • 藝文活動' 25 | link: 'http://works.ioa.tw/taipei_activities/' 26 | cover: 'http://works.ioa.tw/taipei_activities/img/og.jpg' 27 | resize: 1 28 | intro: '吳政賢利用新北市開放資料製作出了新北市藝文活動搜尋頁面,非常便利!' 29 | 30 | - permalink: 'https://fb.com/521085554595481_1020850974618934' 31 | time: '2016-06-29T08:19:49+0000' 32 | sharer-name: '陳柏融' 33 | sharer-id: '966822483415769' 34 | title: '[教學] 寫給會在部落格中撰寫程式碼的你 ─ 在網頁中嵌入高亮程式碼上色 (syntax highlighting)' 35 | link: 'https://pjchender.blogspot.tw/2016/06/prism-syntax-highlighting.html' 36 | cover: 'https://2.bp.blogspot.com/-Ea1MoqdgfgE/V2EUO5r1EsI/AAAAAAAAmqQ/6Mj-A85vl_4EKqfTmNzsyIpm5vBCMvmxwCLcB/w1200-h630-p-nu/technology-1283624_1920-min.jpg' 37 | resize: 1 38 | intro: '陳柏融參考部份知名網站,分享如何使用 Prism plugin 為網頁的程式碼區塊著色,以增加可讀性' 39 | 40 | - permalink: 'https://fb.com/521085554595481_1020890697948295' 41 | time: '2016-06-29T10:43:41+0000' 42 | sharer-name: '乃綠茶' 43 | sharer-id: '10206605802809705' 44 | title: 'JSManipulate - Javascript Image Filters & Effects' 45 | link: 'http://joelb.me/jsmanipulate/' 46 | cover: 'http://joelb.me/jsmanipulate/assets/flower.jpg' 47 | intro: '這一 Canvas plugin 可幫忙處理非常多種圖片濾鏡效果的轉換,還能有動態變化' 48 | 49 | - permalink: 'https://fb.com/521085554595481_1019754194728612' 50 | time: '2016-06-27T06:34:04+0000' 51 | sharer-name: 'Rplus Chen' 52 | sharer-id: '903912066343244' 53 | title: 'Typography Handbook' 54 | link: 'http://typographyhandbook.com/' 55 | cover: 'http://typographyhandbook.com/assets/images/proximity-example.png' 56 | intro: '這篇網頁排版指南中主要分為排版設計、文字設定、style guide三大部份,參考資源充足、輔助工具眾多' 57 | 58 | - permalink: 'https://fb.com/521085554595481_1021845897852775' 59 | time: '2016-07-01T08:03:42+0000' 60 | sharer-name: '廖子勳' 61 | sharer-id: '1383498238332410' 62 | intro: '一篇關於 JS `this` 的請教文' 63 | 64 | - permalink: 'https://fb.com/521085554595481_1020819514622080' 65 | time: '2016-06-29T06:20:00+0000' 66 | sharer-name: '劉晏成' 67 | sharer-id: '1048709845148008' 68 | title: '別這樣使用Promise' 69 | link: 'https://medium.com/@WendellLiu/別這樣使用promise-d4f5a731adb4#.rqo6yaz66' 70 | cover: 'https://d262ilb51hltx0.cloudfront.net/max/400/1*8naJs0jc_94fnN4CEgR6zg.jpeg' 71 | intro: '這篇分享文中提到了 JS 裡各式不妙的 Promise 寫法,及較佳的作法,最後也推薦考慮直接使用 synchronous-async pattern' 72 | 73 | - permalink: 'https://fb.com/521085554595481_1019259154778116' 74 | time: '2016-06-26T07:47:53+0000' 75 | sharer-name: '江紹平' 76 | sharer-id: '10152886247276766' 77 | intro: '一篇 JS 糾錯的通靈文。【請益文的錯誤示範】' 78 | 79 | - permalink: 'https://fb.com/521085554595481_1019771544726877' 80 | time: '2016-06-27T07:40:07+0000' 81 | sharer-name: 'YuTin Liu' 82 | sharer-id: '10203040395925690' 83 | title: 'eslint for react native' 84 | link: 'https://gist.github.com/yutin1987/5857f0ef654192a698164988098f195b' 85 | cover: 'https://avatars1.githubusercontent.com/u/2505934?v=3&s=400' 86 | intro: 'YuTin Liu 分享個人的 ESLint config,希望可以讓討論不同的操作設定' 87 | -------------------------------------------------------------------------------- /_data/2016-07-03.yml: -------------------------------------------------------------------------------- 1 | - permalink: 'https://fb.com/521085554595481_1026248187412546' 2 | time: '2016-07-08T12:27:28+0000' 3 | sharer-name: 'Arthur Liao' 4 | sharer-id: '1023782794358947' 5 | title: 'JavaScript與前端程式設計入門自學參考' 6 | link: 'https://tw.twincl.com/javascript/*6731' 7 | cover: 'https://farm8.staticflickr.com/7564/16003638861_218931090d_z_d.jpg' 8 | resize: 1 9 | intro: '文中介紹以 JS、演算法、網路協定、HTML、CSS 不同領域裡該掌握的前端基礎知識' 10 | 11 | - permalink: 'https://fb.com/521085554595481_1023408767696488' 12 | time: '2016-07-04T04:22:02+0000' 13 | sharer-name: '曾英綺' 14 | sharer-id: '1264586313559379' 15 | title: 'Sublime超強外掛應用' 16 | link: 'http://course.cool3c.com/courses/sublime' 17 | cover: 'https://d2vvqscadf4c1f.cloudfront.net/gmjuWLNmQ4i6LDjVxix0_Sublime 超強外掛應用.jpg' 18 | intro: '約半小時介紹 Sublime Text 基礎操作的線上教學' 19 | 20 | - permalink: 'https://fb.com/521085554595481_1024417707595594' 21 | time: '2016-07-06T03:15:17+0000' 22 | sharer-name: 'Rplus Chen' 23 | sharer-id: '903912066343244' 24 | title: 'CSS for Decoration' 25 | link: 'https://t.co/POlxpIZ2bM' 26 | cover: 'http://razvancaliman.com/css-for-decoration/screenshots/csstricks-repeating-linear-gradients.png' 27 | resize: 1 28 | intro: '介紹 CSS 漸層背景圖的進階應用及其組合技的簡報,其中範例大多可切換不同的 3D 視角以更直觀理解原理' 29 | 30 | - permalink: 'https://fb.com/521085554595481_1022817384422293' 31 | time: '2016-07-03T02:24:22+0000' 32 | sharer-name: '陳柏融' 33 | sharer-id: '966822483415769' 34 | title: 'EMMET 快速上手包' 35 | link: 'https://www.facebook.com/pjchender/photos/a.1060692780682824.1073741831.768320183253420/1060692800682822/?type=3' 36 | cover: 'https://scontent-tpe1-1.xx.fbcdn.net/t31.0-8/13522811_1060692800682822_865570788404072363_o.png' 37 | intro: 'EMMET 是款便捷的快速輸入方式,這一 FB 相簿將原文文件整理為易懂的簡報模式。對於 EMMET 是個很好的上手指南唷~' 38 | 39 | - permalink: 'https://fb.com/521085554595481_1027126693991362' 40 | time: '2016-07-09T08:28:24+0000' 41 | sharer-name: '林立秦' 42 | sharer-id: '952773934745171' 43 | title: '[練習 todo list]' 44 | link: 'http://codepen.io/lichin-lin/full/QEgXvp/' 45 | intro: 'flat style 的 Todo List 習作' 46 | 47 | - permalink: 'https://fb.com/521085554595481_1023040391066659' 48 | time: '2016-07-03T13:44:11+0000' 49 | sharer-name: 'Akimoto Miharu' 50 | sharer-id: '1044566585607403' 51 | title: 'AI: What It Takes to Be Human - CSS Winner' 52 | link: 'http://www.csswinner.com/details/ai-what-it-takes-to-be-human/10617' 53 | cover: 'http://cdn.csswinner.com/images/winners/2016/jul/1093314584.jpg' 54 | resize: 1 55 | intro: 'CSS Winner 是個挖掘美好網頁設計的平台,每天都會分享風格漂亮的網站' 56 | 57 | - permalink: 'https://fb.com/521085554595481_1025172487520116' 58 | time: '2016-07-07T13:55:59+0000' 59 | sharer-name: 'YuTin Liu' 60 | sharer-id: '10203040395925690' 61 | title: '小科科恰爾斯' 62 | link: 'https://www.facebook.com/TaiwanBaby/photos/a.165221556875866.42716.146213548776667/1101262413271771/?type=3' 63 | cover: 'http://i2.wp.com/www.saydigi.com/wp-content/uploads/2016/03/29.jpg' 64 | resize: 1 65 | intro: '由恰爾斯創作的塗鴉:「讓工程師吐血的原因」' 66 | 67 | - permalink: 'https://fb.com/521085554595481_1023935544310477' 68 | time: '2016-07-05T04:02:43+0000' 69 | sharer-name: 'Evan Wu' 70 | sharer-id: '10205539565002216' 71 | title: 'CSS quests' 72 | link: 'https://cssquests.com/' 73 | intro: '每雙週會發一篇 CSS 的挑戰題目,有興趣的可以試試身手' 74 | 75 | - permalink: 'https://fb.com/521085554595481_1023898584314173' 76 | time: '2016-07-05T02:12:33+0000' 77 | sharer-name: 'Yuren Ju' 78 | sharer-id: '10152785149951631' 79 | title: 'Nightwatch.js 應用 — 歸檔 pocket 所有文章 — Technology & Coding' 80 | link: 'https://medium.com/technology-coding/4d1cdd2889bc' 81 | cover: 'https://cdn-images-1.medium.com/max/1200/1*qNMcV71ghvcn3NypZ69hKA.png' 82 | intro: 'Yuren Ju 以自動化工具 Nightwatch.js 處理 Pocket 大量操作,文中以觀察分析再實作的步調記錄開發過程' 83 | 84 | - permalink: 'https://fb.com/521085554595481_1023156777721687' 85 | time: '2016-07-03T18:23:09+0000' 86 | sharer-name: 'Clement Tang' 87 | sharer-id: '10205598652859379' 88 | title: 'Astrum - A lightweight pattern library for any project' 89 | link: 'http://astrum.nodividestudio.com/' 90 | cover: 'http://nd-bin.imgix.net/astrum/astrum-share-image.jpg?q=50&w=1596&fit=max&dpr=2' 91 | resize: 1 92 | intro: 'Astrum 可將已製作完成的網站 theme、guideline 轉換為 pattern library' 93 | -------------------------------------------------------------------------------- /_data/2016-07-10.yml: -------------------------------------------------------------------------------- 1 | - permalink: 'https://fb.com/521085554595481_1028380007199364' 2 | time: '2016-07-10T04:54:29+0000' 3 | sharer-name: '黃怡綾' 4 | sharer-id: '926174897471245' 5 | title: 'Webpack React 入門筆記' 6 | link: 'http://elainehuang.github.io/so-simple-theme/articles/React-webpack/' 7 | cover: 'http://elainehuang.github.io/so-simple-theme/images/japan.jpg' 8 | resize: 1 9 | intro: 'Elaine Huang 分享她 webpack + react 的開發環境,並從 install 開始到各相依 plugin 的使用逐一紀錄與簡介' 10 | 11 | - permalink: 'https://fb.com/521085554595481_1029013687135996' 12 | time: '2016-07-10T15:35:46+0000' 13 | sharer-name: 'Rplus Chen' 14 | sharer-id: '903912066343244' 15 | title: 'Design Better Forms' 16 | link: 'https://t.co/VDOHqAjJXP' 17 | cover: 'https://cdn-images-1.medium.com/max/2000/1*LJ0JHTq5_k1u23Fl9XTNmA.jpeg' 18 | resize: 1 19 | intro: '用簡明的對照圖呈現較理想的表單排版方式,可更清楚地理解該如何群組各種表單元件,來讓表單的操作更加舒暢' 20 | 21 | - permalink: 'https://fb.com/521085554595481_1030127590357939' 22 | time: '2016-07-11T14:42:24+0000' 23 | sharer-name: 'Denny Ku' 24 | sharer-id: '841989239187866' 25 | title: '淺入淺出 eslint 與實作 · De-bug: 一鍵跑版' 26 | link: 'http://abalone0204.github.io/2016/07/11/eslint-fxcking-setup/' 27 | cover: 'http://i.imgur.com/yTf6igd.jpg' 28 | resize: 1 29 | intro: 'Denny Ku 分享個人學習 ESLint 的筆記,介紹 ESLint 各個參數的使用方式;並示範實際開發過程中如何與 webpack 及 git hook 搭配使用' 30 | 31 | - permalink: 'https://fb.com/521085554595481_1028671233836908' 32 | time: '2016-07-10T09:55:38+0000' 33 | sharer-name: '邱弘毅' 34 | sharer-id: '824068551038406' 35 | title: '[點點滴滴] 寫網頁,很難嗎? - 沒一村前端筆記' 36 | link: 'https://noootown.wordpress.com/2016/07/10/web-difficulties/' 37 | intro: '邱弘毅分享學習網頁前端一年的感想,並列舉他認為可幫助學習的一些任務作為參考' 38 | 39 | - permalink: 'https://fb.com/521085554595481_1032186263485405' 40 | time: '2016-07-15T03:00:58+0000' 41 | sharer-name: 'Ian Lin' 42 | sharer-id: '10203375201735514' 43 | title: '偵測瀏覽器及螢幕尺寸 | 瀏覽器版本查詢 | 行動裝置版本查詢' 44 | link: 'http://ibrowser.info/' 45 | intro: '一個可簡易列舉 client 端瀏覽器環境資訊的檢測頁面,留言底下也有幾個類似且不錯的工具' 46 | 47 | - permalink: 'https://fb.com/521085554595481_1032482996789065' 48 | time: '2016-07-15T15:53:44+0000' 49 | sharer-name: 'Rplus Chen' 50 | sharer-id: '903912066343244' 51 | title: 'Make the Web Work For Everyone ★ Mozilla Hacks' 52 | link: 'https://t.co/S8CwsfNN8R' 53 | cover: 'https://2r4s9p1yi1fa2jd7j43zph8r-wpengine.netdna-ssl.com/files/2016/06/webcompat_blog_graphics_600x800-03-500x667.jpg' 54 | resize: 1 55 | intro: 'Mozilla Hacks 上的一篇跨瀏覽器相容性的勸世文,文中也介紹了不少相關的輔助開發工具' 56 | 57 | - permalink: 'https://fb.com/521085554595481_1032003593503672' 58 | time: '2016-07-14T19:26:12+0000' 59 | sharer-name: '顏永富' 60 | sharer-id: '10206378198162257' 61 | title: '前端开发中的一些黑魔法Pt1_Dirty Tricks, 黑魔法 教程_w3cplus' 62 | link: 'http://www.w3cplus.com/css/dirty-tricks-dark-corners-front-end-pt1.html?fb_ref=Default' 63 | cover: 'http://cdn1.w3cplus.com/cdn/farfuture/judyuzROSeZ7hJ4BeBLIjGC3FFROC92eHJBEiSCO79M/mtime:1468406066/sites/default/files/blogs/2016/1607/dirty-tricks24.png' 64 | resize: 1 65 | intro: '前段時間由 Smashing Magazine 主編 Vitaly Friedman 演講簡報《Dirty Tricks From The Dark Corners Of Front-End》的簡中譯文' 66 | 67 | - permalink: 'https://fb.com/521085554595481_1030047920365906' 68 | time: '2016-07-11T12:02:09+0000' 69 | sharer-name: '黃馨民' 70 | sharer-id: '947225441984120' 71 | title: 'JS Bin' 72 | link: 'http://jsbin.com/ricolajoze/edit?html%2Ccss%2Coutput' 73 | intro: '關於 Compass image sprite & background-position 的討論串' 74 | 75 | - permalink: 'https://fb.com/521085554595481_1031596870211011' 76 | time: '2016-07-14T01:57:28+0000' 77 | sharer-name: 'Mickey Chen' 78 | sharer-id: '129663824037099' 79 | link: 'http://i.imgur.com/7ZmrtGY.gifv' 80 | intro: '似乎是用 Google Web designer 製作的效果(?)' 81 | 82 | - permalink: 'https://fb.com/521085554595481_1029729620397736' 83 | time: '2016-07-11T03:46:23+0000' 84 | sharer-name: '吳承翰' 85 | sharer-id: '10205651825993609' 86 | title: 'maptimeBoston/d3-maptime' 87 | link: 'https://github.com/maptimeBoston/d3-maptime/blob/gh-pages/example5/index.html' 88 | cover: 'https://avatars1.githubusercontent.com/u/7799408?v=3&s=400' 89 | intro: '關於 geojson 經緯度轉換的請益討論串' 90 | -------------------------------------------------------------------------------- /_data/2016-07-17.yml: -------------------------------------------------------------------------------- 1 | - permalink: 'https://fb.com/521085554595481_1033400286697336' 2 | time: '2016-07-17T07:51:46+0000' 3 | sharer-name: '尤川豪' 4 | sharer-id: '969639729722349' 5 | title: '自學網頁の嬰兒教材:HTML與CSS' 6 | link: 'http://class.turn.tw/portfolio/html-and-css/' 7 | cover: 'http://class.turn.tw/wp-content/uploads/2016/07/boy.png' 8 | resize: 1 9 | intro: '尤川豪為前端初心者自行設計了一套自學教材,並義務提供 code review 幫忙檢驗是否完成任務' 10 | 11 | - permalink: 'https://fb.com/521085554595481_1033814209989277' 12 | time: '2016-07-18T00:34:24+0000' 13 | sharer-name: '吳政賢' 14 | sharer-id: '1066773103336031' 15 | title: '天氣地圖 Weather Maps' 16 | link: 'http://works.ioa.tw/weather/' 17 | cover: 'http://works.ioa.tw/weather/img/og/index.jpg' 18 | resize: 1 19 | intro: '吳政賢重新調整之前小專案,以 LocalStorage 為「天氣地圖」加入了紀錄功能' 20 | 21 | - permalink: 'https://fb.com/521085554595481_1033607520009946' 22 | time: '2016-07-17T16:19:30+0000' 23 | sharer-name: 'Clement Tang' 24 | sharer-id: '10205598652859379' 25 | title: 'Material Kit by Creative Tim' 26 | link: 'http://ct-freebies.herokuapp.com/material-kit/index.html' 27 | cover: 'http://s3.amazonaws.com/creativetim_bucket/products/38/original/opt_mk_thumbnail.jpg' 28 | resize: 1 29 | intro: '這是款以 Bootstrap 為骨架,重新套用 Material Design 風格的 UI 套件包' 30 | 31 | - permalink: 'https://fb.com/521085554595481_1034124613291570' 32 | time: '2016-07-18T14:27:45+0000' 33 | sharer-name: '丘惟夫' 34 | sharer-id: '1008602195881724' 35 | title: 'Make Your Money Matter' 36 | link: 'http://makeyourmoneymatter.org/' 37 | cover: 'http://makeyourmoneymatter.org/assets/images/share/01.jpg' 38 | resize: 1 39 | intro: '一篇詢問 parallax style 風格實作的請益文,卻能觀察到大批鄉民莫名亂入的奇妙現象 😕' 40 | 41 | - permalink: 'https://fb.com/521085554595481_1036265613077470' 42 | time: '2016-07-22T07:31:50+0000' 43 | sharer-name: '陳冠霖' 44 | sharer-id: '1121673501184952' 45 | title: 'ES6 你可能不知道的事 - 基础篇' 46 | link: 'http://taobaofed.org/blog/2016/07/22/es6-basics/' 47 | cover: 'http://img.alicdn.com/tfs/TB1HPI1KVXXXXbBXpXXXXXXXXXX-900-500.jpg' 48 | resize: 1 49 | intro: '一篇關於 ES2015 新語法的介紹文,並註記一些值得留意的技巧用法' 50 | 51 | - permalink: 'https://fb.com/521085554595481_1035877713116260' 52 | time: '2016-07-21T15:25:26+0000' 53 | sharer-name: 'Rplus Chen' 54 | sharer-id: '903912066343244' 55 | title: 'A Comprehensive Guide to Font Loading Strategies' 56 | link: 'https://t.co/xgiLHNnMAv' 57 | cover: 'https://www.zachleat.com/web/img/avatar.png' 58 | resize: 1 59 | intro: 'Zach Leatherman 整理他目前已知的網路字型加載策略,羅列各方法的利弊,並繪製為策略分析圖;對網路字型調校有興趣者非常有參考價值!' 60 | 61 | - permalink: 'https://fb.com/521085554595481_1036522199718478' 62 | time: '2016-07-22T15:21:40+0000' 63 | sharer-name: '王信凱' 64 | sharer-id: '1127751007258578' 65 | title: 'Web Tech Topic #1' 66 | link: 'http://amazingtutor.kktix.cc/events/8b8d3df1' 67 | cover: 'https://t.kfs.io/upload_images/52785/0728wtt_original.jpg' 68 | resize: 1 69 | intro: '王信凱宣傳他在新北創力坊每週四會固定舉辦的技術分享會,希望能號召夥伴一同分享與學習' 70 | 71 | - permalink: 'https://fb.com/521085554595481_1033935896643775' 72 | time: '2016-07-18T05:34:59+0000' 73 | sharer-name: '馬志瑋' 74 | sharer-id: '10206553800553347' 75 | title: 'F2E Meetup 八月號' 76 | link: 'http://f2e.kktix.cc/events/f2e6-56d17c' 77 | cover: 'https://t.kfs.io/assets/kktix-og-image-e49ca160c99f2162a6cecbf7cfc5644a.png' 78 | intro: 'F2ETW 實體活動再開,這次將帶來的是關於 Vue.js 的分享,有興趣者可密切關注' 79 | 80 | - permalink: 'https://fb.com/521085554595481_1033500556687309' 81 | time: '2016-07-17T12:14:49+0000' 82 | sharer-name: 'Jhih-Sian Wu' 83 | sharer-id: '10208676198609126' 84 | title: 'Udemy與網頁設計課程推薦' 85 | link: 'http://pala.tw/learn-web-development-on-udemy/' 86 | cover: 'http://pala.tw/images/ud0.png' 87 | intro: 'Jhih-Sian Wu 介紹 Udemy 這個線上課程網的操作,並推薦他學習過的新手課程' 88 | 89 | - permalink: 'https://fb.com/521085554595481_1036206756416689' 90 | time: '2016-07-22T04:09:03+0000' 91 | sharer-name: 'Clement Tang' 92 | sharer-id: '10205598652859379' 93 | title: 'Stack Overflow Documentation' 94 | link: 'https://www.facebook.com/photo.php?fbid=10208995513538773&set=gm.1036206756416689&type=3' 95 | cover: 'https://scontent-tpe1-1.xx.fbcdn.net/t31.0-8/13719714_10208995513538773_2169878553452502215_o.jpg' 96 | resize: 1 97 | intro: 'Stack Overflow 推出自家的文件參考系統。利用常駐的大量專家,營造一個可信度較高的 wiki 式文件系統;對於未來在回答或查找問題能更加便利' 98 | -------------------------------------------------------------------------------- /_data/2016-07-24.yml: -------------------------------------------------------------------------------- 1 | - permalink: 'https://fb.com/521085554595481_1039344532769578' 2 | time: '2016-07-27T14:03:16+0000' 3 | sharer-name: '李孟蓁' 4 | sharer-id: '974402572592574' 5 | title: 'Hi, I am Amy Lee' 6 | link: 'http://amy801101.github.io/amyisthebest/cv/index.html' 7 | cover: 'http://amy801101.github.io/amyisthebest/cv/images/preview.png' 8 | intro: '關於 jQuery & JavaScript Framework 選擇的大哉問' 9 | 10 | - permalink: 'https://fb.com/521085554595481_1040322676005097' 11 | time: '2016-07-29T05:48:48+0000' 12 | sharer-name: '陳柏融' 13 | sharer-id: '966822483415769' 14 | title: 'PJCHENder網頁前端資源站' 15 | link: 'https://www.facebook.com/pjchender/photos/a.1078492305569538.1073741833.768320183253420/1078492338902868/?type=3' 16 | cover: 'https://scontent-tpe1-1.xx.fbcdn.net/t31.0-8/fr/cp0/e15/q65/13667830_1078492338902868_5948392900977533004_o.png.jpg?efg=eyJpIjoiYiJ9' 17 | intro: '陳柏融整理了一些能幫助前端工程的 Chrome Extension 成一個相簿,並個別介紹其功能與用途' 18 | 19 | - permalink: 'https://fb.com/521085554595481_1039954716041893' 20 | time: '2016-07-28T13:51:44+0000' 21 | sharer-name: '林立秦' 22 | sharer-id: '952773934745171' 23 | title: 'Hover! button animation#3' 24 | link: 'https://lichin.me/hoverbtn2/' 25 | intro: '林立秦分享新的按鈕樣式練習作品' 26 | 27 | - permalink: 'https://fb.com/521085554595481_1037503072953724' 28 | time: '2016-07-24T08:28:48+0000' 29 | sharer-name: 'Clement Tang' 30 | sharer-id: '10205598652859379' 31 | title: 'Cleave.js - Format input text content when you are typing' 32 | link: 'http://nosir.github.io/cleave.js/' 33 | intro: 'Cleave.js 是一套能自動驗證與格式化輸入框的 plugin,支援相當多種格式,包括信用卡號、電話號碼、日期甚至是自訂規則' 34 | 35 | - permalink: 'https://fb.com/521085554595481_1038484249522273' 36 | time: '2016-07-26T02:03:05+0000' 37 | sharer-name: '廖洧杰' 38 | sharer-id: '996025350417110' 39 | title: '帶你學到會的線上課程 | 六角學院' 40 | link: 'http://www.hexschool.com/' 41 | cover: 'http://www.hexschool.com/images/header/html_and_css.png' 42 | intro: '來自六角學院的免費線上課程系列,新推出了免費的 Chrome DevTools 的線上教學課程' 43 | 44 | - permalink: 'https://fb.com/521085554595481_1039965596040805' 45 | time: '2016-07-28T14:16:24+0000' 46 | sharer-name: 'Rplus Chen' 47 | sharer-id: '903912066343244' 48 | title: '前端好聚好善!Seek Meetup' 49 | link: 'https://www.facebook.com/photo.php?fbid=1166102196790895&set=gm.1039965596040805&type=3' 50 | cover: 'https://scontent-tpe1-1.xx.fbcdn.net/v/t1.0-9/fr/cp0/e15/q65/13872880_1166102196790895_3722703592024660799_n.jpg?efg=eyJpIjoiYiJ9&oh=148419c59570d78d00f421a519e5e791&oe=581E8FC5' 51 | intro: 'F2ETW 社團的新專案,專門來收集台灣各地的前端聚會活動,透過 Google 日曆可直接在網頁上瀏覽,也能匯入至個人日曆中' 52 | 53 | - permalink: 'https://fb.com/521085554595481_1041262775911087' 54 | time: '2016-07-30T16:56:33+0000' 55 | sharer-name: '林楊興' 56 | sharer-id: '10205947936271938' 57 | title: 'Redux API Middleman · mz026's blog' 58 | link: 'https://mz026.github.io/20160731/redux-api-middleman/' 59 | intro: '林楊興以團隊使用 React + Rudux 開發流程中處理 request 的經驗整理後,寫成一支 npm package,並在文中簡介它的功能與用途' 60 | 61 | - permalink: 'https://fb.com/521085554595481_1039334566103908' 62 | time: '2016-07-27T13:44:38+0000' 63 | sharer-name: '邱弘毅' 64 | sharer-id: '824068551038406' 65 | intro: '針對基於 markdown 語法的簡報工具討論串' 66 | 67 | - permalink: 'https://fb.com/521085554595481_1041193132584718' 68 | time: '2016-07-30T15:14:48+0000' 69 | sharer-name: '馬志瑋' 70 | sharer-id: '10206553800553347' 71 | title: 'F2E&RGBA 設計 Meetup 八月號' 72 | link: 'http://f2e.kktix.cc/events/f2e6-56d17c-0f9e5b' 73 | cover: 'https://t.kfs.io/assets/kktix-og-image-e49ca160c99f2162a6cecbf7cfc5644a.png' 74 | intro: 'RGBA 與 F2ETW 社團結合後的第一次設計向主題活動就在八月底唷,有興趣者請把握搶票時機' 75 | 76 | - permalink: 'https://fb.com/521085554595481_1039420422761989' 77 | time: '2016-07-27T16:33:23+0000' 78 | sharer-name: 'Jason Tseng' 79 | sharer-id: '1176445319046573' 80 | title: 'jason90929/gulp-bower-angularjs-framework-example' 81 | link: 'https://github.com/jason90929/gulp-bower-angularjs-framework-example' 82 | cover: 'https://avatars3.githubusercontent.com/u/16078042?v=3&s=400' 83 | intro: 'Jason Tseng 分享自己開發網站的 gulp 工具包' 84 | -------------------------------------------------------------------------------- /_data/2016-07-31.yml: -------------------------------------------------------------------------------- 1 | - permalink: 'https://fb.com/521085554595481_1042471939123504' 2 | time: '2016-08-01T15:55:04+0000' 3 | sharer-name: 'Moshi Huang' 4 | sharer-id: '847360741944867' 5 | title: '全聯中元祭 你看見了嗎?' 6 | link: 'http://www.whatcanyousee.com.tw/' 7 | cover: 'https://www.facebook.com/ads/image/?d=AQJSQAxXhNqwQEKQHVrQIzi2dQIARcZlaJyslu91eCLsSlPqwegTM5GEzXhIZUToDq-cW5p9n-rx2NPHYpGZeVxNrxJUE4llKYdqOZxrn9xi5q1VEAjcqSzVxZwtpPpPUZzQnnYsnHO7YkkKgq5AK9Kz' 8 | intro: '全聯這個中元特別宣傳網站應用了很有趣的影片切換效果,社團討論串裡也許多分析研究與調整策略' 9 | 10 | - permalink: 'https://fb.com/521085554595481_1044271272276904' 11 | time: '2016-08-04T12:35:43+0000' 12 | sharer-name: 'Kuro Hsu' 13 | sharer-id: '10201028914003467' 14 | title: '前端框架大亂鬥之我為什麼選擇 Vue.js' 15 | link: 'https://speakerdeck.com/kurotanshi/qian-duan-kuang-jia-da-luan-dou-zhi-wo-wei-shi-mo-xuan-ze-vue-dot-js' 16 | cover: 'https://speakerd.s3.amazonaws.com/presentations/2c9a6ba74ec64872a0df708fd212f48b/slide_0.jpg' 17 | resize: 1 18 | intro: 'Kuro Hsu 在社團活動中分享 Vue.js 基本實作流程以及與其它框架的差異和特性' 19 | 20 | - permalink: 'https://fb.com/521085554595481_1041739435863421' 21 | time: '2016-07-31T11:49:22+0000' 22 | sharer-name: 'Denny Ku' 23 | sharer-id: '722505421136249' 24 | title: '[心得] 前端找工作之道' 25 | link: 'https://www.ptt.cc/bbs/Soft_Job/M.1469872083.A.55D.html' 26 | cover: 'https://i.imgur.com/Q101c5V.png' 27 | intro: 'Denny Ku 分享前端面試的心得與流程,包括動機、自評、嚮往等心理建設,以及自我平時可準備的方向' 28 | 29 | - permalink: 'https://fb.com/521085554595481_1041624442541587' 30 | time: '2016-07-31T06:51:50+0000' 31 | sharer-name: 'Clement Tang' 32 | sharer-id: '10202921383529319' 33 | title: 'Lessons from building mobile-friendly, accessible data tables — Shopify UX' 34 | link: 'https://medium.com/shopify-ux/lessons-from-building-mobile-friendly-accessible-data-tables-1e05c6924eaf#.e9dd5krru' 35 | cover: 'https://cdn-images-1.medium.com/max/1200/1*lC4bbrafop4flbu4rW6_Sw.png' 36 | intro: '這篇由 Shopify 工程師分享的文章中主要針對無障礙表格的探討與研究,裡頭除了經驗豐富的判斷外,更多的是實際測試無障礙的結果來驗證' 37 | 38 | - permalink: 'https://fb.com/521085554595481_1044664578904240' 39 | time: '2016-08-05T01:41:58+0000' 40 | sharer-name: 'Chung Jason' 41 | sharer-id: '10203870673912480' 42 | title: 'Pikachu' 43 | link: 'http://codepen.io/shiningjason1989/details/NALzYQ/' 44 | cover: 'http://codepen.io/shiningjason1989/pen/NALzYQ/image/large.png' 45 | intro: 'Chung Jason 分享了他自製的皮卡丘 pixel art 動畫,透過 matrix 的設定與 step-timing-function 的動畫方式可單純化許多複雜的樣式邏輯' 46 | 47 | - permalink: 'https://fb.com/521085554595481_1044364105600954' 48 | time: '2016-08-04T14:51:01+0000' 49 | sharer-name: 'Jace Ju' 50 | sharer-id: '629973690417661' 51 | title: '一頭栽入 Vue.js TDD 的世界' 52 | link: 'https://docs.google.com/presentation/d/1YxsUucBZNlN-YLjDNoF8-Wk0h-sG4nAqw9eT4Y2OGMo/' 53 | cover: 'https://lh6.googleusercontent.com/Zd53xFC8VXaj42UWMAjZyzfhkjMPRtxMeUDT1KFj5eW1eOoadYIZfYMS5DEK4f8P3BBs0g=s0' 54 | intro: 'Jace Ju 在社團活動中以 Vue.js 示範如何實作前端 TDD 開發流程,並推廣這樣安全較無後顧之憂的開發模式' 55 | 56 | - permalink: 'https://fb.com/521085554595481_1043083402395691' 57 | time: '2016-08-02T15:49:14+0000' 58 | sharer-name: '廖洧杰' 59 | sharer-id: '776166365736344' 60 | title: '高雄前端社群#25 - 前端與 UI 真心合作的不二法門' 61 | link: 'http://goo.gl/jHI5kz' 62 | cover: 'https://t.kfs.io/upload_images/53151/ui-vs-f2e_large.jpg' 63 | intro: '新一期的高雄前端社群分享活動,本期主題為前端與設計的合作模式,除了講者分享外,也預留許多現場討論的時間,有興趣的朋友可以參考' 64 | 65 | - permalink: 'https://fb.com/521085554595481_1044118348958863' 66 | time: '2016-08-04T06:39:04+0000' 67 | sharer-name: 'Rplus Chen' 68 | sharer-id: '697526476981805' 69 | title: "Fake it 'til you Make it CSS" 70 | link: 'https://t.co/UziB2F8FiJ' 71 | cover: 'https://kyusuf.com/assets/images/content/fake-it/card.png' 72 | intro: '針對資源的不同引入方式,作者在文中整理了四種常見的區塊預填效果,主要的訴求都是希望使用者能更快速地理解下個階段會有的變化,以減低適應新畫面的反應時間' 73 | 74 | - permalink: 'https://fb.com/521085554595481_1044772642226767' 75 | time: '2016-08-05T06:42:34+0000' 76 | sharer-name: 'Rplus Chen' 77 | sharer-id: '697526476981805' 78 | title: 'CSS only scroll indicator' 79 | link: 'https://t.co/MDhWGcqxm6' 80 | cover: 'http://codepen.io/MadeByMike/pen/ZOrEmr/image/large.png' 81 | intro: 'Mike Riethmuller 非常具有創意地以純 CSS 的圖層疊加來達成了頁面捲動位置的指示器' 82 | 83 | - permalink: 'https://fb.com/521085554595481_1042466265790738' 84 | time: '2016-08-01T15:41:23+0000' 85 | sharer-name: 'Gao Jia Siang' 86 | sharer-id: '976124412401736' 87 | title: 'Green Man Is Walking' 88 | link: 'http://codepen.io/jsgao0/details/AXgwZN' 89 | cover: 'http://codepen.io/jsgao0/pen/AXgwZN/image/large.png' 90 | intro: 'Gao Jia Siang 分享他參考行人號誌燈的小綠人所製作的 CSS 逐格動畫' 91 | -------------------------------------------------------------------------------- /_data/2016-08-07.yml: -------------------------------------------------------------------------------- 1 | - permalink: 'https://fb.com/521085554595481_1049620805075284' 2 | time: '2016-08-12T16:52:29+0000' 3 | sharer-name: 'Rplus Chen' 4 | sharer-id: '697526476981805' 5 | title: 'CSS Eevee' 6 | link: 'https://t.co/pwMpxG2HxF' 7 | cover: 'http://codepen.io/davidkpiano/pen/NAZarB/image/large.png' 8 | resize: 1 9 | intro: '趕著 Pokemon 熱潮,國外開發者 David Khourshid 以華麗的 CSS animation 做出了其中一隻 Eevee 非常精細的動畫!裡頭有不少有趣的 CSS 技巧唷!' 10 | 11 | - permalink: 'https://fb.com/521085554595481_1046615235375841' 12 | time: '2016-08-08T02:08:03+0000' 13 | sharer-name: '王信凱' 14 | sharer-id: '791456187554730' 15 | title: 'Web Tech Topic #3 - Play CSS3 Animation!!' 16 | link: 'http://amazingtutor.kktix.cc/events/wtt-03' 17 | cover: 'https://t.kfs.io/upload_images/53199/WTT03_original.jpg' 18 | intro: 'WTT 第三場的前端分享聚會,主題為 CSS Animation,有興趣的可以多加關注活動動態' 19 | 20 | - permalink: 'https://fb.com/521085554595481_1048901981813833' 21 | time: '2016-08-11T13:34:32+0000' 22 | sharer-name: 'Suhan Tsai' 23 | sharer-id: '898041500209985' 24 | title: 'Coding mobile-first emails' 25 | link: 'https://medium.com/cm-engineering/coding-mobile-first-emails-1513ac4673e#.yu8oj4wp3' 26 | cover: 'https://cdn-images-1.medium.com/max/1200/1*qrzZaXdP_6nzIBL3krgDKQ.png' 27 | intro: '該文作者分享如何實作好能夠符合 mobile 的 email 版面。除了 mobile first 以外,還有許多鮮見的 hack 技巧' 28 | 29 | - permalink: 'https://fb.com/521085554595481_1047513051952726' 30 | time: '2016-08-09T12:11:11+0000' 31 | sharer-name: 'Clement Tang' 32 | sharer-id: '10202921383529319' 33 | title: 'Interact with Bluetooth devices on the Web' 34 | link: 'https://developers.google.com/web/updates/2015/07/interact-with-ble-devices-on-the-web#available-for-origin-trials' 35 | cover: 'https://www.gstatic.com/images/branding/product/1x/chrome_512dp.png' 36 | intro: 'Chrome 在 Web Bluetooth 已經可先試用,未來網頁將可與實體裝置進行更多的互動模式' 37 | 38 | - permalink: 'https://fb.com/521085554595481_1050170985020266' 39 | time: '2016-08-13T13:53:02+0000' 40 | sharer-name: '黃雅慧' 41 | sharer-id: '781472028530567' 42 | title: 'jquery bootstrapValidator如何驗證2個欄位只輸入其一即可' 43 | link: 'https://myyhhuang.wordpress.com/2016/08/10/jquery-bootstrapvalidator%e5%a6%82%e4%bd%95%e9%a9%97%e8%ad%892%e5%80%8b%e6%ac%84%e4%bd%8d%e5%8f%aa%e8%bc%b8%e5%85%a5%e5%85%b6%e4%b8%80%e5%8d%b3%e5%8f%af/' 44 | cover: 'https://myyhhuang.files.wordpress.com/2016/08/1.png' 45 | intro: '該文示範如何使用套件來驗證表單雙欄' 46 | 47 | - permalink: 'https://fb.com/521085554595481_1050006091703422' 48 | time: '2016-08-13T07:36:39+0000' 49 | sharer-name: '李明' 50 | sharer-id: '10202396117836515' 51 | title: 'Navigation Bar by Jan Kaděra' 52 | link: 'https://fb.com/521085554595481_1050006091703422' 53 | cover: 'http://codepen.io/katydecorah/pen/HEgwl/image/large.png' 54 | intro: '關於 CSS transform 抖動的疑問,但因裝置不一,不能穩定重現問題,所以也沒有較深入的討論' 55 | 56 | - permalink: 'https://fb.com/521085554595481_1048654145171950' 57 | time: '2016-08-11T04:25:04+0000' 58 | sharer-name: 'Clement Tang' 59 | sharer-id: '10202921383529319' 60 | title: 'Updates to our asynchronous icon and font loader — Fort Awesome Articles' 61 | link: 'https://articles.fortawesome.com/updates-to-our-asynchronous-icon-and-font-loader-2be80b1bd19d#.n7bvuk88z' 62 | cover: 'https://cdn-images-1.medium.com/max/1200/1*WFdaeYuRaZ0TXjWmLS9JsA.png' 63 | intro: 'Font Awesome CDN 優化了非同步載入的方式,讓載入方式更順暢 & 更方便控制各個狀態的時間點,非常值得深入理解' 64 | 65 | - permalink: 'https://fb.com/521085554595481_1049406901763341' 66 | time: '2016-08-12T09:10:23+0000' 67 | sharer-name: '楊宗穎' 68 | sharer-id: '10204234539639018' 69 | title: 'www.ryanyang0818.com' 70 | link: 'http://www.ryanyang0818.com/demo/RUI/docs/r_tooltip_example/demo2.html' 71 | intro: '楊宗穎分享自製的 tooltip 套件,可自動判斷出現在適合的位置' 72 | 73 | - permalink: 'https://fb.com/521085554595481_1046602988710399' 74 | time: '2016-08-08T01:27:25+0000' 75 | sharer-name: 'Ryo Peng' 76 | sharer-id: '10152356467636602' 77 | title: 'Sizing up the Olympics' 78 | link: 'https://www.washingtonpost.com/graphics/sports/olympics/scale-of-the-olympics/?%3Ftid%3D=sm_pg' 79 | cover: 'https://www.washingtonpost.com/graphics/sports/olympics/scale-of-the-olympics/img/olympic-scale-promo.jpg' 80 | intro: '網站裡透過 parallax 來縮放的 svg,搭配趣味的相對尺寸來呈現奧運各競技項目的場地規模' 81 | 82 | - permalink: 'https://fb.com/521085554595481_1049424538428244' 83 | time: '2016-08-12T10:07:11+0000' 84 | sharer-name: '林罡北' 85 | sharer-id: '623171171093560' 86 | title: 'BackSpace' 87 | link: 'https://chrome.google.com/webstore/detail/backspace/hlipjhnplogjbmafbjifidjlnecnikhj' 88 | cover: 'https://lh3.googleusercontent.com/3JRViO1GwvQpVecI7BImmEgpY0qsfJqDxG2d6O-nxHChe1w9i8OdoD-a-9Qp9iLJ9P6apHDxkA=s128-h128-e365' 89 | intro: '林罡北寫了個 extension,將 Chrome v52 移除掉的 BackSpace 快速鍵重新綁定為退回前一頁的動作' 90 | -------------------------------------------------------------------------------- /_data/2016-08-14.yml: -------------------------------------------------------------------------------- 1 | - permalink: 'https://fb.com/521085554595481_1054696881234343' 2 | time: '2016-08-20T05:16:48+0000' 3 | sharer-name: 'Fred Lin' 4 | sharer-id: '10203797498037037' 5 | title: 'Coscup 2016 網頁版機器人' 6 | link: 'https://gasolin.github.io/cosbot/' 7 | intro: 'Fred Lin 以 Saihubot 開發了一個 chatbot 來支援 COSCOP 一些相關資訊的查詢' 8 | 9 | - permalink: 'https://fb.com/521085554595481_1051413341562697' 10 | time: '2016-08-15T11:17:58+0000' 11 | sharer-name: '王信凱' 12 | sharer-id: '791456187554730' 13 | title: 'Web Tech Topic #4 - 勞基法計算機、vue.js、atom編輯器' 14 | link: 'http://amazingtutor.kktix.cc/events/wtt-04' 15 | cover: 'https://t.kfs.io/upload_images/53519/wtt04_original.jpg' 16 | intro: 'WTT 第四次的聚會,對相關主題有興趣者可以持續關注唷' 17 | 18 | - permalink: 'https://fb.com/521085554595481_1055188821185149' 19 | time: '2016-08-20T20:26:07+0000' 20 | sharer-name: 'Rplus Chen' 21 | sharer-id: '697526476981805' 22 | title: 'Return true to win' 23 | link: 'https://t.co/UvpHqwTeXS' 24 | intro: '一個有趣的 JS 挑戰題,透過傳入不一樣的參數讓題目中的 function 回傳 true,歡迎來試試你的 JS hack 技能吧~' 25 | 26 | - permalink: 'https://fb.com/521085554595481_1050706401633391' 27 | time: '2016-08-14T09:07:38+0000' 28 | sharer-name: 'Hank Huang' 29 | sharer-id: '10152532814308343' 30 | title: '【转载】使用 FLIP 来提高 Web 动画的性能' 31 | link: 'http://www.w3cplus.com/animation/high-performance-animations.html' 32 | cover: 'https://external-tpe1-1.xx.fbcdn.net/safe_image.php?d=AQCYxomP4-1acLfy&w=526&h=275&url=http%3A%2F%2Fcdn.w3cplus.com%2Fcdn%2Ffarfuture%2FfN3x_2f-ccBbSUBRz-h6Qwr7SQVDh7PUbEq664xpsIU%2Fmtime%3A1471102609%2Fsites%2Fdefault%2Ffiles%2Fblogs%2F2016%2F1608%2Fflip-60fps.gif&cfs=1&upscale=1' 33 | intro: '一篇針對網頁動畫效能的探討文,宣傳以 FLIP 的思考模式來建構高效能的網頁動畫' 34 | 35 | - permalink: 'https://fb.com/521085554595481_1050742531629778' 36 | time: '2016-08-14T10:31:28+0000' 37 | sharer-name: 'Rplus Chen' 38 | sharer-id: '697526476981805' 39 | title: 'CSS: Code Smell Sanitation' 40 | link: 'https://speakerdeck.com/mobywhale/css-code-smell-sanitation' 41 | cover: 'https://speakerd.s3.amazonaws.com/presentations/1052db5428fb40b4947f07d7d58d9bde/slide_0.jpg' 42 | intro: '這份簡報主要分享在開發團隊中如何寫出好維護的 CSS,裡頭除了介紹作者團隊遵守的撰寫規範外,也分享了一些開發流程中可以使用的輔助工具' 43 | 44 | - permalink: 'https://fb.com/521085554595481_1051651694872195' 45 | time: '2016-08-15T19:17:01+0000' 46 | sharer-name: 'Rplus Chen' 47 | sharer-id: '697526476981805' 48 | title: '10K Apart' 49 | link: 'https://t.co/wy2hg6U0qb' 50 | intro: '挑戰製作一個總體積不大於 10kb 的網站吧!來自 A List Apart & MS Edge 團隊的懸賞活動!歡迎熱血志士們奮勇上前!' 51 | 52 | - permalink: 'https://fb.com/521085554595481_1052019021502129' 53 | time: '2016-08-16T08:57:22+0000' 54 | sharer-name: 'Rplus Chen' 55 | sharer-id: '697526476981805' 56 | title: 'Facebook API 拿不到轉分享貼文中的 message' 57 | link: 'https://github.com/f2etw/weekly-collection/issues/101' 58 | intro: '關於 Facebook API 權限的一篇討論串' 59 | 60 | - permalink: 'https://fb.com/521085554595481_1052168514820513' 61 | time: '2016-08-16T14:28:12+0000' 62 | sharer-name: 'Rplus Chen' 63 | sharer-id: '697526476981805' 64 | title: '《CSS揭秘》作者 Lea Verou: I love the openness of our industry(图灵访谈)' 65 | link: 'https://t.co/uadgPnDqjC' 66 | cover: 'http://www.ituring.com.cn/Users/GetAvatar/199012?size=Middle' 67 | intro: 'Lea Verou 在這訪談中分享《CSS Secrets》這本書的寫作初衷,並聊聊她喜愛的網頁開發現況及技術前景' 68 | 69 | - permalink: 'https://fb.com/521085554595481_1053348548035843' 70 | time: '2016-08-18T06:38:58+0000' 71 | sharer-name: '劉晏成' 72 | sharer-id: '777619972256998' 73 | title: '語言界的Redux —從學習Elm到函數式編程的啟發' 74 | link: 'https://medium.com/@WendellLiu/%E8%AA%9E%E8%A8%80%E7%95%8C%E7%9A%84redux-%E5%BE%9E%E5%AD%B8%E7%BF%92elm%E5%88%B0%E5%87%BD%E6%95%B8%E5%BC%8F%E7%B7%A8%E7%A8%8B%E7%9A%84%E5%95%9F%E7%99%BC-9d24775500a2#.udckm1lt9' 75 | cover: 'https://cdn-images-1.medium.com/max/1200/1*oc1x0W-QO1EyYJaBQSzVtg.png' 76 | intro: '劉晏成分享學習 Elm 的學習心得,並以基本結構與 Redux 類比,最後再介紹 Functional Programming 的概念與優點' 77 | 78 | - permalink: 'https://fb.com/521085554595481_1051952364842128' 79 | time: '2016-08-16T05:57:17+0000' 80 | sharer-name: '蘇汛沅' 81 | sharer-id: '648282495220098' 82 | intro: '一篇關於 jQuery carousel-like plugin 的請益討論串' 83 | -------------------------------------------------------------------------------- /_data/2016-08-21.yml: -------------------------------------------------------------------------------- 1 | - permalink: 'https://fb.com/521085554595481_1058641660839865' 2 | time: '2016-08-25T08:37:35+0000' 3 | sharer-name: 'YuTin Liu' 4 | sharer-id: '1678986882' 5 | title: 'g0v/react-native-sample' 6 | link: 'https://github.com/g0v/react-native-sample' 7 | cover: 'https://avatars1.githubusercontent.com/u/2668086?v=3&s=400' 8 | intro: 'YuTin Liu 分享自己開發 React Native 的模版專案,並希望有興趣者一起聚會,分享開發經驗' 9 | 10 | - permalink: 'https://fb.com/521085554595481_1060247600679271' 11 | time: '2016-08-27T15:19:21+0000' 12 | sharer-name: 'Carl Su' 13 | sharer-id: '476922195774434' 14 | title: 'Diving into Modern Web Development Toolchain: TypeScript, React and Redux' 15 | link: 'https://bcbcarl.github.io/community-open-camp/slide.html' 16 | cover: 'https://bcbcarl.github.io/community-open-camp/images/redux-devtools.png' 17 | resize: 1 18 | intro: 'Carl Su 分享其在 Community Open Camp 2016 的議程簡報,主要介紹 TypeScript, React & Redux 構成的開發流程' 19 | 20 | - permalink: 'https://fb.com/521085554595481_1058729957497702' 21 | time: '2016-08-25T11:37:36+0000' 22 | sharer-name: 'Ivan Wei' 23 | sharer-id: '839285239423022' 24 | title: '幾個 HTML 秘訣 | Mozilla Taiwan' 25 | link: 'http://blog.mozilla.com.tw/posts/9085/html-tips' 26 | cover: 'http://blog.mozilla.com.tw/wp-content/uploads/螢幕快照-2016-08-25-15.55.15.png' 27 | intro: '這篇源於 Mozilla Hacks 的中譯文介紹了幾個網頁標準裡 HTML 的撰寫細節,可以讓網頁結構更為明確' 28 | 29 | - permalink: 'https://fb.com/521085554595481_1057802410923790' 30 | time: '2016-08-24T10:15:53+0000' 31 | sharer-name: 'Jas Chen' 32 | sharer-id: '812162062127549' 33 | cover: 'https://scontent-tpe1-1.xx.fbcdn.net/t31.0-8/fr/cp0/e15/q65/14138040_1316285688381848_5608143793475144763_o.jpg?efg=eyJpIjoiYiJ9' 34 | intro: '一張畫在 Modern Web 2016 玻璃上的討戰相片…' 35 | 36 | - permalink: 'https://fb.com/521085554595481_1058632434174121' 37 | time: '2016-08-25T08:15:55+0000' 38 | sharer-name: 'Hank Huang' 39 | sharer-id: '10152532814308343' 40 | title: '超全面!聊聊UI設計師的工作流程和高頻使用工具' 41 | link: 'http://goo.gl/qeEWpX' 42 | cover: 'https://www.evernote.com/shard/s4/sh/71430bc1-7f00-4131-a977-5ef618b49c9f/1d045785669d2a89/thm/note/71430bc1-7f00-4131-a977-5ef618b49c9f' 43 | intro: '針對 UI 設計輔助工具的介紹文,包括 UI、互動、標注等工具使用流程' 44 | 45 | - permalink: 'https://fb.com/521085554595481_1059255244111840' 46 | time: '2016-08-26T04:41:28+0000' 47 | sharer-name: '馬志瑋' 48 | sharer-id: '10205258676256049' 49 | title: 'F2E Meetup 九月號' 50 | link: 'http://f2e.kktix.cc/events/f2e6-56d17c-b579f3' 51 | cover: 'https://t.kfs.io/assets/kktix-og-image-e49ca160c99f2162a6cecbf7cfc5644a.png' 52 | intro: 'F2ETW 九月的小聚會將在 Mozilla 辦公室,有興趣者可以多加關注' 53 | 54 | - permalink: 'https://fb.com/521085554595481_1057808177589880' 55 | time: '2016-08-24T10:30:34+0000' 56 | sharer-name: 'Yu-Chi Ding' 57 | sharer-id: '10152619617669332' 58 | cover: 'https://scontent-tpe1-1.xx.fbcdn.net/t31.0-8/fr/cp0/e15/q65/14067952_10154032455924332_838592802462168824_o.jpg?efg=eyJpIjoiYiJ9' 59 | intro: '一篇關於 IKEA 網頁效能問題的討論串' 60 | 61 | - permalink: 'https://fb.com/521085554595481_1058718010832230' 62 | time: '2016-08-25T11:11:26+0000' 63 | sharer-name: '王信凱' 64 | sharer-id: '791456187554730' 65 | title: 'Web Tech Topic #5 - vue.js on Rails, S3! 系統架構的好夥伴' 66 | link: 'http://www.youtube.com/watch?v=KNxsqlYU2Rs' 67 | cover: 'https://i.ytimg.com/vi/KNxsqlYU2Rs/maxresdefault_live.jpg' 68 | intro: 'Web Tech Topic 第五次聚會,這次主題是 Vue.js 與 Rails 的搭配' 69 | 70 | - permalink: 'https://fb.com/521085554595481_1057966324240732' 71 | time: '2016-08-24T15:23:16+0000' 72 | sharer-name: '尤川豪' 73 | sharer-id: '766857926667198' 74 | intro: '尤川豪分享兩款 WYSIWYG web Editor: Quill & medium-editor' 75 | 76 | - permalink: 'https://fb.com/521085554595481_1056877444349620' 77 | time: '2016-08-23T02:27:27+0000' 78 | sharer-name: 'Xilophia Sunson' 79 | sharer-id: '777228082287907' 80 | title: 'NIPPON COLORS - 日本の伝統色' 81 | link: 'http://nipponcolors.com/#karakurenai' 82 | cover: 'http://nipponcolors.com/images/site_thumb.jpg' 83 | intro: 'Xilophia Sunson 分享這一經典的色彩網站,裡頭的動畫與排版都非常漂亮唷!' 84 | -------------------------------------------------------------------------------- /_data/2016-08-28.yml: -------------------------------------------------------------------------------- 1 | - permalink: 'https://fb.com/521085554595481_1064416303595734' 2 | time: '2016-09-02T04:49:13+0000' 3 | sharer-name: '吳政賢' 4 | sharer-id: '905090839504259' 5 | title: 'Pokémon Go 進化後 CP 推測工具' 6 | link: 'http://works.ioa.tw/evolution/index.html' 7 | cover: 'http://works.ioa.tw/evolution/img/og/index.png' 8 | intro: '吳政賢參考 PTT 文章製作了一個查找 CP 進化區間的工具' 9 | 10 | - permalink: 'https://fb.com/521085554595481_1062255257145172' 11 | time: '2016-08-30T09:24:41+0000' 12 | sharer-name: 'Po-Jung Chen' 13 | sharer-id: '559767417454613' 14 | title: '不只是漸層的 CSS3 漸層' 15 | link: 'https://www.facebook.com/pjchender/photos/a.1103460186406083.1073741834.768320183253420/1103460249739410/?type=3' 16 | cover: 'https://scontent-tpe1-1.xx.fbcdn.net/t31.0-8/fr/cp0/e15/q65/14125647_1103460249739410_5344591090841344346_o.jpg' 17 | intro: 'Po-Jung Chen 整理了 CSS gradient 的諸多使用技巧於粉專相簿裡,想更進一步瞭解 CSS 漸層的可以參考唷' 18 | 19 | - permalink: 'https://fb.com/521085554595481_1065557440148287' 20 | time: '2016-09-03T16:23:00+0000' 21 | sharer-name: 'James Liang' 22 | sharer-id: '10151995304366957' 23 | title: '[主角日常] Re:從零開始的 jQuery 撰寫網頁遊戲教學 - Rocket' 24 | link: 'https://www.youtube.com/watch?v=m7C3Y2OvEms&index=1&list=PL6Q8GhJpeKWSkGM9lH6Y6V7vPYMDD92w6' 25 | cover: 'https://i.ytimg.com/vi/m7C3Y2OvEms/maxresdefault.jpg' 26 | intro: 'James Liang 分享以 jQuery 製作網頁遊戲的線上課程影片' 27 | 28 | - permalink: 'https://fb.com/521085554595481_1062867850417246' 29 | time: '2016-08-31T04:10:01+0000' 30 | sharer-name: 'Rplus Chen' 31 | sharer-id: '697526476981805' 32 | title: '使用纯 CSS 实现 Google Photos 照片列表布局' 33 | link: 'https://t.co/wMbTRLA7ns' 34 | cover: 'https://cloud.githubusercontent.com/assets/2993947/14738104/5e28601c-08b2-11e6-8262-5351a575f3fb.png' 35 | intro: '這篇進階排版應用文章使用各種 flexbox 技巧來模擬 Google 圖片牆的排版效果。文中漸進地示範不同的方法來達成相似的排版效果,裡頭有許多精妙的技巧唷' 36 | 37 | - permalink: 'https://fb.com/521085554595481_1062322177138480' 38 | time: '2016-08-30T11:29:10+0000' 39 | sharer-name: 'YuTin Liu' 40 | sharer-id: '1678986882' 41 | title: 'ReactNative 仰望星空工作坊 Run1' 42 | link: 'http://f2e.kktix.cc/events/1894833b' 43 | cover: 'https://t.kfs.io/assets/kktix-og-image-e49ca160c99f2162a6cecbf7cfc5644a.png' 44 | intro: 'YuTin Liu ReactNative 開發經驗的分享聚會首發!有興趣的快跟上' 45 | 46 | - permalink: 'https://fb.com/521085554595481_1060823947288303' 47 | time: '2016-08-28T11:29:38+0000' 48 | sharer-name: '林立秦' 49 | sharer-id: '828387647183801' 50 | title: 'IE8! the miserable monster' 51 | link: 'https://lichin.me/blog/2016/08/27/ie8-the-miserable-monster' 52 | cover: 'https://lichin.me/img/dog.png' 53 | resize: 1 54 | intro: '林立秦整理部份 IE8 前端開發的坑以及需留意的事項' 55 | 56 | - permalink: 'https://fb.com/521085554595481_1060936893943675' 57 | time: '2016-08-28T15:05:01+0000' 58 | sharer-name: '廖洧杰' 59 | sharer-id: '776166365736344' 60 | title: '[共筆] 前端與 UI 真心合作的不二法門' 61 | link: 'https://quip.com/7Vt4AiNImcbg' 62 | intro: '廖洧杰分享高雄前端分享活動的共筆與直播錄影,讓未能到場的朋友們也可以一同學習~' 63 | 64 | - permalink: 'https://fb.com/521085554595481_1063192623718102' 65 | time: '2016-08-31T15:36:24+0000' 66 | sharer-name: '賴咸文' 67 | sharer-id: '10206785334744449' 68 | intro: '前端技能樹的討論串' 69 | 70 | - permalink: 'https://fb.com/521085554595481_1062477660456265' 71 | time: '2016-08-30T16:24:16+0000' 72 | sharer-name: '王信凱' 73 | sharer-id: '791456187554730' 74 | title: 'Web Tech Topic #6 - WebRTC入門、Clean Rails code basic' 75 | link: 'http://amazingtutor.kktix.cc/events/wtt-06' 76 | cover: 'https://t.kfs.io/upload_images/53932/wtt06_original.jpg' 77 | intro: 'Web Tech Topic 第六週的聚會主題為 WebRTC,有興趣的可以關注一下' 78 | 79 | - permalink: 'https://fb.com/521085554595481_1062943120409719' 80 | time: '2016-08-31T07:00:44+0000' 81 | sharer-name: '賴宗賢' 82 | sharer-id: '834228226591912' 83 | intro: '關於 pseudo-element 在 IE devtool 上的請益文' 84 | -------------------------------------------------------------------------------- /_includes/analytics.html: -------------------------------------------------------------------------------- 1 | {% if site.google_analytics %} 2 | 3 | 15 | 16 | {% endif %} 17 | -------------------------------------------------------------------------------- /_includes/card.html: -------------------------------------------------------------------------------- 1 | 2 |
3 | {% for item in site.data[page.date-since] %} 4 |
5 |
6 | {% if item.link %} 7 | {% assign item_link = item.link %} 8 | {% else %} 9 | {% assign item_link = item.permalink %} 10 | {% endif %} 11 | 12 | {% if item.cover and item.cover != empty %} 13 | {% if item.resize %} 14 | {% assign item_cover = item.cover | prepend: 'http://imageproxy.pimg.tw/zoomcrop?url=' | append: '&width=400' %} 15 | {% else %} 16 | {% assign item_cover = item.cover %} 17 | {% endif %} 18 | 19 | {{ item.title }} 20 | 21 | {% else %} 22 | 23 | {% endif %} 24 | 25 |
26 | 27 |

28 | {{ item.title }} 29 |

30 | 31 |

32 | {{ item.intro }} 33 |

34 | 35 |
36 |
37 | 38 | 39 | 40 | 41 |
42 | 43 | 44 | {{ item.sharer-name }} 45 | {{ item.sharer-name }} 46 | 47 |
48 |
49 | 50 | {% if item.notice %} 51 | 52 | 53 | {% endif %} 54 |
55 |
56 | {% endfor %} 57 |
58 | -------------------------------------------------------------------------------- /_includes/counter.html: -------------------------------------------------------------------------------- 1 | 2 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /_includes/disqus.html: -------------------------------------------------------------------------------- 1 | {% if site.disqus %} 2 |
3 |
4 | 15 | 16 |
17 | {% endif %} 18 | -------------------------------------------------------------------------------- /_includes/meta.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | {% if page.excerpt %} 7 | 8 | 9 | {% else %} 10 | 11 | 12 | {% endif %} 13 | 14 | 15 | {% if page.title %} 16 | 17 | 18 | {% endif %} 19 | 20 | {% if page.cover %} 21 | 22 | {% else %} 23 | 24 | {% endif %} 25 | -------------------------------------------------------------------------------- /_layouts/default.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {% include meta.html %} 5 | 6 | {% if page.title %}{{ page.title }} – {% endif %}{{ site.name }} 7 | 8 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 |
21 |
22 | {{ site.org-name }} logo 23 |
24 |

{{ site.name }}

25 | 26 | {% unless page.title %} 27 |

{{ site.description }}

28 | {% endunless %} 29 |
30 | 31 | 39 |
40 |
41 | 42 | {% if page.layout == 'post' %} 43 |
44 | {% else %} 45 |
46 | {% endif %} 47 | {{ content }} 48 |
49 |
50 | 51 |
52 |
53 | {% include svg-icons.html %} 54 |
55 |
56 | 57 | {% if jekyll.environment == "production" %} 58 | {% include counter.html %} 59 | {% include analytics.html %} 60 | {% endif %} 61 | 62 | 63 | -------------------------------------------------------------------------------- /_layouts/page.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | --- 4 | 5 |
6 |
7 |

{{ page.title }}

8 |
9 | 10 |
11 | {{ content }} 12 |
13 |
14 | -------------------------------------------------------------------------------- /_layouts/post.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | --- 4 | 5 |
6 |
7 |

{{ page.title }}

8 | 9 |
10 |
since: {{ page.date-since | date: "%Y-%m-%d" }}
11 |
until: {{ page.date-until | date: "%Y-%m-%d" }}
12 |
13 |
14 | 15 |
16 | {{ content }} 17 |
18 | 19 |
20 | 21 | publish on {{ page.publish-date | date: "%Y-%m-%d" }} 22 | {% if page.volunteer %} 23 |
24 | 本期由 {{ page.volunteer }} 彙編 25 | {% endif %} 26 |
27 |
28 | 29 | 38 | 39 | {% if jekyll.environment == "production" %} 40 | {% include disqus.html %} 41 | {% endif %} 42 |
43 | 44 | {% comment %} 45 | 59 | {% endcomment %} 60 | -------------------------------------------------------------------------------- /_plugins/merge_space.rb: -------------------------------------------------------------------------------- 1 | module MergeSpaceFilter 2 | 3 | # Return the url without protocol 4 | def merge_space(str) 5 | str.gsub(/\s+/, ' ') 6 | end 7 | 8 | end 9 | 10 | Liquid::Template.register_filter(MergeSpaceFilter) 11 | -------------------------------------------------------------------------------- /_plugins/strip_url_protocol.rb: -------------------------------------------------------------------------------- 1 | module StripKUrlProtocolFilter 2 | 3 | # Return the url without protocol 4 | def strip_url_protocol(url) 5 | url.sub(/https?:\/\//, '') 6 | end 7 | 8 | end 9 | 10 | Liquid::Template.register_filter(StripKUrlProtocolFilter) 11 | -------------------------------------------------------------------------------- /_posts/2016-01-01-draft.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: draft, for test 4 | tags: jekyll draft 5 | published: false 6 | --- 7 | 8 | 123 9 | -------------------------------------------------------------------------------- /_posts/2016-03-13-000.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: "Collection #000" 4 | categories: collection 5 | tags: weekly-popular 6 | publish-date: '2016-03-29' 7 | date-since: '2016-03-13' 8 | date-until: '2016-03-19' 9 | volunteer: Rplus 10 | --- 11 | 12 | {% include card.html %} 13 | -------------------------------------------------------------------------------- /_posts/2016-03-20-001.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: "Collection #001" 4 | categories: collection 5 | tags: weekly-popular 6 | publish-date: '2016-04-05' 7 | date-since: '2016-03-20' 8 | date-until: '2016-03-26' 9 | volunteer: Rplus 10 | --- 11 | 12 | {% include card.html %} 13 | 14 | > ※ 編按: 15 | 16 | > 希望大家多多參與社團上貼文的討論, 17 | > 討論及分享,將更能讓你喜愛的文章上榜唷~ 18 | -------------------------------------------------------------------------------- /_posts/2016-03-27-002.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: "Collection #002" 4 | categories: collection 5 | tags: weekly-popular 6 | publish-date: '2016-04-11' 7 | date-since: '2016-03-27' 8 | date-until: '2016-04-02' 9 | volunteer: Rplus 10 | --- 11 | 12 | {% include card.html %} 13 | -------------------------------------------------------------------------------- /_posts/2016-04-03-003.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: "Collection #003" 4 | categories: collection 5 | tags: weekly-popular 6 | publish-date: '2016-04-17' 7 | date-since: '2016-04-03' 8 | date-until: '2016-04-09' 9 | volunteer: Rplus 10 | --- 11 | 12 | {% include card.html %} 13 | 14 | > ※ 編按: 15 | 16 | > 目前有新增了 email 訂閱功能囉~ 17 | > 訂閱連結是頁尾最右邊那顆信箱 + RSS 的圖示 18 | -------------------------------------------------------------------------------- /_posts/2016-04-10-004.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: "Collection #004" 4 | categories: collection 5 | tags: weekly-popular 6 | publish-date: '2016-04-25' 7 | date-since: '2016-04-10' 8 | date-until: '2016-04-16' 9 | volunteer: Rplus 10 | --- 11 | 12 | {% include card.html %} 13 | 14 | > ※ 編按: 15 | 16 | > 有興趣探索更多前端文章的同好們可以常駐 [#F2ETW @Twitter](https://twitter.com/hashtag/f2etw?f=tweets) 這個連結的分頁唷~ ✌☕ 17 | -------------------------------------------------------------------------------- /_posts/2016-04-17-005.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: "Collection #005" 4 | categories: collection 5 | tags: weekly-popular 6 | publish-date: '2016-05-02' 7 | date-since: '2016-04-17' 8 | date-until: '2016-04-23' 9 | volunteer: Rplus 10 | --- 11 | 12 | {% include card.html %} 13 | 14 | #### Footnote: 15 | 16 | ※1: 文件系統由 Atlas 改為 Nanoc,詳情可參考 [The New and Improved Flight Manual \| Atom Blog](http://blog.atom.io/2016/03/24/the-new-and-improved-flight-manual.html) 17 | -------------------------------------------------------------------------------- /_posts/2016-04-24-006.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: "Collection #006" 4 | categories: collection 5 | tags: weekly-popular 6 | publish-date: '2016-05-08' 7 | date-since: '2016-04-24' 8 | date-until: '2016-04-30' 9 | volunteer: Rplus 10 | --- 11 | 12 | {% include card.html %} 13 | 14 | 今期熱門文章有一篇是舊文新發, 15 | 還希望版眾們在看文章時,能夠依然保持神智清醒; 16 | 並加入更多的好奇心來參與分享討論。 17 | 18 | 共勉之 :) 19 | 20 | ***** 21 | 22 | > ※ Node.js v6 將在 2016 十月加入 LTS,詳情可見 [Node v6.0.0 釋出公告](https://nodejs.org/en/blog/release/v6.0.0/) 23 | 24 | -------------------------------------------------------------------------------- /_posts/2016-05-01-007.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: "Collection #007" 4 | categories: collection 5 | tags: weekly-popular 6 | publish-date: '2016-05-15' 7 | date-since: '2016-05-01' 8 | date-until: '2016-05-07' 9 | volunteer: Rplus 10 | --- 11 | 12 | {% include card.html %} 13 | 14 | > 15 | ※ 編按: 16 | 有前端職缺需求的朋友們,歡迎多多利用我們的 [f2etw/jobs](https://github.com/f2etw/jobs/issues) GitHub issues 唷! 17 | 也可抽空看看別人都怎麼寫唷~ ✨ 18 | -------------------------------------------------------------------------------- /_posts/2016-05-08-008.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: "Collection #008" 4 | categories: collection 5 | tags: weekly-popular 6 | publish-date: '2016-05-22' 7 | date-since: '2016-05-08' 8 | date-until: '2016-05-14' 9 | volunteer: Rplus 10 | --- 11 | 12 | {% include card.html %} 13 | 14 | ※ 編按: 15 | Weekly Collection 還缺熱血的小編志工唷! 16 | 歡迎有興趣的到 Gitter 聊聊~ -------------------------------------------------------------------------------- /_posts/2016-05-15-009.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: "Collection #009" 4 | categories: collection 5 | tags: weekly-popular 6 | publish-date: '2016-05-29' 7 | date-since: '2016-05-15' 8 | date-until: '2016-05-21' 9 | volunteer: Rplus 10 | --- 11 | 12 | {% include card.html %} 13 | -------------------------------------------------------------------------------- /_posts/2016-05-22-010.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: "Collection #010" 4 | categories: collection 5 | tags: weekly-popular 6 | publish-date: '2016-06-07' 7 | date-since: '2016-05-22' 8 | date-until: '2016-05-28' 9 | volunteer: Rplus 10 | --- 11 | 12 | {% include card.html %} 13 | 14 | *** 15 | 16 | #### ※ 編按: 17 | 18 | 這期互動性較高的似乎較多宣傳性的貼文, 19 | 其實還是有不少分享文滿深入的,但互動性似乎不如預期; 20 | 希望大家還是多多參與討論與互動,以增進分享的正迴饋效應唷! -------------------------------------------------------------------------------- /_posts/2016-05-29-011.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: "Collection #011" 4 | categories: collection 5 | tags: weekly-popular 6 | publish-date: '2016-06-14' 7 | date-since: '2016-05-29' 8 | date-until: '2016-06-04' 9 | volunteer: Rplus 10 | --- 11 | 12 | {% include card.html %} 13 | -------------------------------------------------------------------------------- /_posts/2016-06-05-012.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: "Collection #012" 4 | categories: collection 5 | tags: weekly-popular 6 | publish-date: '2016-06-20' 7 | date-since: '2016-06-05' 8 | date-until: '2016-06-11' 9 | volunteer: Rplus 10 | --- 11 | 12 | {% include card.html %} 13 | 14 | *** 15 | 16 | ※ 編按: 17 | 近來提問的討論串有較熱絡的跡象, 18 | 我也覺得有個平台能討論很棒~ 19 | 不過不難發現部份提問在範圍較廣、或是需求未釐清的狀況下, 20 | 討論串偶有偏題的情形, 21 | 22 | 覺得在瀏覽這類貼文時, 23 | 反過來想想「若由自己提問,會如何調整問題呢?」 24 | 或許也能稍微訓練自己的提問技巧哩! 25 | 26 | :) -------------------------------------------------------------------------------- /_posts/2016-06-12-013.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: "Collection #013" 4 | categories: collection 5 | tags: weekly-popular 6 | publish-date: '2016-06-28' 7 | date-since: '2016-06-12' 8 | date-until: '2016-06-18' 9 | volunteer: Rplus 10 | --- 11 | 12 | {% include card.html %} 13 | 14 | 15 | ***** 16 | 17 | ※ 編按: 18 | 19 | 天氣好熱呀~ 20 | 不曉得有沒有人想報名來寫寫下一週的簡介呢~ -------------------------------------------------------------------------------- /_posts/2016-06-19-014.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: "Collection #014" 4 | categories: collection 5 | tags: weekly-popular 6 | publish-date: '2016-07-04' 7 | date-since: '2016-06-19' 8 | date-until: '2016-06-25' 9 | volunteer: Rplus 10 | --- 11 | 12 | {% include card.html %} 13 | -------------------------------------------------------------------------------- /_posts/2016-06-26-015.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: "Collection #015" 4 | categories: collection 5 | tags: weekly-popular 6 | publish-date: '2016-07-10' 7 | date-since: '2016-06-26' 8 | date-until: '2016-06-32' 9 | volunteer: Rplus 10 | --- 11 | 12 | {% include card.html %} 13 | 14 | ***** 15 | 編按: 16 | 分享有起有落,歡迎大伙多多討論~ -------------------------------------------------------------------------------- /_posts/2016-07-03-016.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: "Collection #016" 4 | categories: collection 5 | tags: weekly-popular 6 | publish-date: '2016-07-18' 7 | date-since: '2016-07-03' 8 | date-until: '2016-07-09' 9 | volunteer: Rplus 10 | --- 11 | 12 | {% include card.html %} 13 | 14 | ***** 15 | 16 | 編按: 17 | 18 | 這週有個 [‎#前端許願池‬](https://fb.com/521085554595481_1023630681007630) 的活動唷! 19 | 如果對前端社團有任何建議或想法的,歡迎留言迴饋! 20 | 21 | 甘溫~ 22 | -------------------------------------------------------------------------------- /_posts/2016-07-10-017.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: "Collection #017" 4 | categories: collection 5 | tags: weekly-popular 6 | publish-date: '2016-07-25' 7 | date-since: '2016-07-10' 8 | date-until: '2016-07-16' 9 | volunteer: Rplus 10 | --- 11 | 12 | {% include card.html %} 13 | -------------------------------------------------------------------------------- /_posts/2016-07-17-018.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: "Collection #018" 4 | categories: collection 5 | tags: weekly-popular 6 | publish-date: '2016-07-31' 7 | date-since: '2016-07-17' 8 | date-until: '2016-07-23' 9 | volunteer: Rplus 10 | --- 11 | 12 | {% include card.html %} 13 | 14 | ***** 15 | 16 | 編按: 17 | 這期第四篇出現了社團裡比較少見的鄉民亂入狀況, 18 | 大量的社友不曉得 Facebook 可手動開啟特定貼文動態更新的通知, 19 | 而紛紛跑來卡位、刷存在感… 20 | 最後使得貼文者自行關閉了回覆功能 ( 其實可以直接關閉通知就夠了~ 21 | 只能說孩子的教育,真的不能等吶… 22 | -------------------------------------------------------------------------------- /_posts/2016-07-24-019.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: "Collection #019" 4 | categories: collection 5 | tags: weekly-popular 6 | publish-date: '2016-08-06' 7 | date-since: '2016-07-24' 8 | date-until: '2016-07-30' 9 | volunteer: Rplus 10 | --- 11 | 12 | {% include card.html %} 13 | -------------------------------------------------------------------------------- /_posts/2016-07-31-020.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: "Collection #020" 4 | categories: collection 5 | tags: weekly-popular 6 | publish-date: '2016-08-16' 7 | date-since: '2016-07-31' 8 | date-until: '2016-07-37' 9 | volunteer: Rplus 10 | --- 11 | 12 | {% include card.html %} 13 | 14 | ***** 15 | 16 | 編按: 17 | 這週有篇「前端找工作之道」其實不僅是新鮮人受用, 18 | 裡面有不少平時可加強的項目也都可以是每個前端開發者進修及思考的機會唷~ -------------------------------------------------------------------------------- /_posts/2016-08-07-021.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: "Collection #021" 4 | categories: collection 5 | tags: weekly-popular 6 | publish-date: '2016-08-22' 7 | date-since: '2016-08-07' 8 | date-until: '2016-08-13' 9 | volunteer: Rplus 10 | --- 11 | 12 | {% include card.html %} 13 | -------------------------------------------------------------------------------- /_posts/2016-08-14-022.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: "Collection #022" 4 | categories: collection 5 | tags: weekly-popular 6 | publish-date: '2016-08-29' 7 | date-since: '2016-08-14' 8 | date-until: '2016-08-20' 9 | volunteer: Rplus 10 | --- 11 | 12 | {% include card.html %} 13 | -------------------------------------------------------------------------------- /_posts/2016-08-21-023.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: "Collection #023" 4 | categories: collection 5 | tags: weekly-popular 6 | publish-date: '2016-09-05' 7 | date-since: '2016-08-21' 8 | date-until: '2016-08-27' 9 | volunteer: Rplus 10 | --- 11 | 12 | {% include card.html %} 13 | -------------------------------------------------------------------------------- /_posts/2016-08-28-024.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: "Collection #024" 4 | categories: collection 5 | tags: weekly-popular 6 | publish-date: '2016-09-19' 7 | date-since: '2016-08-28' 8 | date-until: '2016-09-03' 9 | volunteer: Rplus 10 | --- 11 | 12 | {% include card.html %} 13 | 14 | ***** 15 | 16 | 編按:最近有點忙,希望有人能一起來坦 Orz -------------------------------------------------------------------------------- /_sass/abstracts/_mixin.scss: -------------------------------------------------------------------------------- 1 | @mixin fill($dir: 'full') { 2 | @if $dir == 'full' or $dir != 'top' { bottom: 0; } 3 | @if $dir == 'full' or $dir != 'bottom'{ top: 0; } 4 | @if $dir == 'full' or $dir != 'left' { right: 0; } 5 | @if $dir == 'full' or $dir != 'right' { left: 0; } 6 | } 7 | 8 | @mixin t-center() { 9 | position: absolute; 10 | top: 50%; 11 | left: 50%; 12 | margin-right: -50%; 13 | transform: translate(-50%, -50%); 14 | } 15 | -------------------------------------------------------------------------------- /_sass/abstracts/_var.scss: -------------------------------------------------------------------------------- 1 | $c-white: #fff; 2 | $c-black: #000; 3 | $c-link: #4183c4; 4 | -------------------------------------------------------------------------------- /_sass/base/_base.scss: -------------------------------------------------------------------------------- 1 | body { 2 | line-height: 1.4; 3 | color: #333; 4 | font-family: serif; 5 | background-color: darken(#fff, 4); 6 | } 7 | 8 | .time { 9 | font-family: "Consolas", Monaco, monospace; 10 | } 11 | 12 | .td-dash { 13 | background-repeat: repeat-x; 14 | background-size: 6px 1px; 15 | background-position: 0 99%; 16 | text-decoration: none; 17 | 18 | &:hover { 19 | background-image: linear-gradient(to right, currentColor 4px, transparent 4px); 20 | } 21 | } 22 | 23 | a { 24 | color: $c-link; 25 | transition: color .2s; 26 | 27 | &:hover { 28 | color: inherit; 29 | } 30 | } 31 | 32 | .history-link { 33 | &:visited { 34 | color: lighten($c-link, 10); 35 | } 36 | 37 | &:hover { 38 | color: inherit; 39 | } 40 | } 41 | 42 | .page-title { 43 | font-size: 3em; 44 | font-size: calc(2em + 2vw); 45 | letter-spacing: -1px; 46 | } 47 | 48 | .ff-ss { 49 | font-family: sans-serif; 50 | } 51 | 52 | hr { 53 | height: 1px; 54 | border: none; 55 | background-image: linear-gradient(to right, transparent, rgba($c-black, .3), transparent); 56 | } 57 | -------------------------------------------------------------------------------- /_sass/base/_shame.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/f2etw/weekly-collection/9652847d6f847db91a3ceba344b39ff56b31bc38/_sass/base/_shame.scss -------------------------------------------------------------------------------- /_sass/components/_card.scss: -------------------------------------------------------------------------------- 1 | .Cards { 2 | } 3 | 4 | .Card { 5 | position: relative; 6 | background-color: $c-white; 7 | font-size: 1.1em; 8 | 9 | &::before { 10 | content: ""; 11 | position: absolute; 12 | @include fill; 13 | z-index: -1; 14 | opacity: .5; 15 | box-shadow: 1px 2px 10px -1px rgba($c-black, .6); 16 | transition: opacity .3s; 17 | pointer-events: none; 18 | } 19 | 20 | &:hover::before { 21 | opacity: .8; 22 | } 23 | 24 | .time { 25 | font-size: smaller; 26 | } 27 | } 28 | 29 | .Card__cover--link { 30 | overflow: hidden; 31 | background: #000 no-repeat 50% / cover; 32 | background-blend-mode: screen; 33 | 34 | &:empty { 35 | padding-bottom: 40%; 36 | background: rgba(#efe, .5) url("https://avatars2.githubusercontent.com/u/8252114?s=240") no-repeat 50% / contain; 37 | } 38 | 39 | &:not(:empty):visited { 40 | background-color: mix($c-white, $c-black, 30%); 41 | 42 | .Card:hover & { 43 | background-color: $c-black; 44 | } 45 | } 46 | } 47 | 48 | .Card__titleLink { 49 | &:visited { 50 | color: lighten(desaturate($c-link, 20%), 10%); 51 | 52 | .Card:hover & { 53 | color: $c-link; 54 | } 55 | } 56 | } 57 | 58 | .Card__cover { 59 | display: block; 60 | width: 100%; 61 | max-height: 200px; 62 | opacity: 0; 63 | } 64 | 65 | .Card__desc { 66 | opacity: .75; 67 | } 68 | 69 | .Card__meta { 70 | opacity: .5; 71 | transition: opacity .3s; 72 | font-family: serif; 73 | 74 | .Card:hover & { 75 | opacity: 1; 76 | } 77 | } 78 | 79 | .Card__meta__timestamp { 80 | border-bottom: 1px solid rgba($c-black, .3); 81 | opacity: .75; 82 | } 83 | 84 | .permalink-icon { 85 | width: 1em; 86 | height: 1em; 87 | fill: currentColor; 88 | } 89 | 90 | .Card__notice__overlay { 91 | position: absolute; 92 | @include fill; 93 | z-index: 1; 94 | cursor: pointer; 95 | background-color: rgba($c-white, .9); 96 | opacity: 0; 97 | visibility: hidden; 98 | transition: opacity .3s, visibility .3s; 99 | 100 | .Card__notice__switcher:checked + & { 101 | opacity: 1; 102 | visibility: visible; 103 | } 104 | 105 | &::before { 106 | content: attr(data-notice); 107 | @include t-center; 108 | padding: .5em 1em; 109 | opacity: .5; 110 | box-shadow: 0 1px 2px 2px rgba($c-black, .3); 111 | background-color: darken($c-white, 5%); 112 | } 113 | } 114 | -------------------------------------------------------------------------------- /_sass/components/_nav.scss: -------------------------------------------------------------------------------- 1 | .Nav { 2 | font-size: 1.1em; 3 | } 4 | 5 | .Nav__link { 6 | background-size: 6px 2px; 7 | 8 | &.Nav__link { 9 | color: $c-link; 10 | } 11 | 12 | &:hover { 13 | color: inherit; 14 | text-shadow: 0 0 1px; 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /_sass/components/_page.scss: -------------------------------------------------------------------------------- 1 | .Page { 2 | font-size: 1.2em; 3 | background-color: rgba($c-white, .9); 4 | box-shadow: inset 1px 2px .25em rgba($c-black, .25); 5 | 6 | a { 7 | @extend .td-dash; 8 | 9 | &:visited { 10 | color: mix($c-white, $c-black, 50%); 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /_sass/components/_pagination.scss: -------------------------------------------------------------------------------- 1 | .PageNavigation { 2 | border-top: 1px dashed rgba($c-black, .1); 3 | } 4 | 5 | .PageNavigation__link { 6 | position: relative; 7 | 8 | &::before { 9 | content: ""; 10 | position: absolute; 11 | top: 50%; 12 | left: 0; 13 | z-index: -1; 14 | width: $space-3; 15 | height: $space-3; 16 | background-image: linear-gradient(45deg, lighten(desaturate($c-link, 30%), 30%), transparent 50%); 17 | transform: translateY(-50%) rotate(45deg); 18 | } 19 | } 20 | 21 | .PageNavigation__next { 22 | &::before { 23 | left: auto; 24 | right: 0; 25 | transform: translateY(-50%) rotate(-135deg); 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /_sass/components/_search.scss: -------------------------------------------------------------------------------- 1 | .Search { 2 | // display: flex; 3 | } 4 | 5 | // .Search__input 6 | // .Search__submit 7 | 8 | .SearchLists { 9 | margin-left: 5%; 10 | } 11 | 12 | .SearchLists__item { 13 | font-family: monospace; 14 | opacity: .75; 15 | margin-left: 5%; 16 | 17 | &::before, 18 | &::after { 19 | content: '…'; 20 | opacity: .3; 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /_sass/layout/_footer.scss: -------------------------------------------------------------------------------- 1 | .Footer { 2 | position: relative; 3 | background-color: darken($c-white, 12); 4 | box-shadow: inset 0 4px .5em -3px rgba($c-black, .3); 5 | } 6 | 7 | .Footer__link { 8 | &::before { 9 | content: attr(title); 10 | position: absolute; 11 | top: 1em; 12 | left: 50%; 13 | margin-right: -50%; 14 | transform: translate3d(-50%, 0, 0); 15 | font-weight: 900; 16 | opacity: 0; 17 | transition: opacity .2s; 18 | text-shadow: 1px 1px rgba($c-white, .5); 19 | pointer-events: none; 20 | } 21 | 22 | &:hover::before { 23 | opacity: 1; 24 | } 25 | 26 | &.Footer__link--github {color: #333; } 27 | &.Footer__link--facebook {color: #3b5998; } 28 | &.Footer__link--gitter {color: #ed1965; } 29 | &.Footer__link--rss {color: #f26522; } 30 | &.Footer__link--email-subscription {color: #888; } 31 | } 32 | 33 | .SVGIcon { 34 | width: 3em; 35 | height: 3em; 36 | fill: currentColor; 37 | opacity: .6; 38 | transition: opacity .3s; 39 | filter: url(#inset-shadow); 40 | 41 | .Footer__link:hover & { 42 | opacity: 1; 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /_sass/layout/_header.scss: -------------------------------------------------------------------------------- 1 | .Header { 2 | position: relative; 3 | background-color: $c-white; 4 | box-shadow: 0 3px .5em -3px rgba($c-black, .15); 5 | font-family: sans-serif; 6 | 7 | a { 8 | color: inherit; 9 | 10 | &:hover { 11 | color: $c-link; 12 | } 13 | } 14 | } 15 | 16 | .SiteCaption { 17 | display: flex; 18 | flex: 1; 19 | flex-wrap: wrap; 20 | align-items: center; 21 | justify-content: center; 22 | } 23 | 24 | .SiteCaption__desc { 25 | opacity: .5; 26 | font-style: italic; 27 | font-family: serif; 28 | } 29 | 30 | .Nav { 31 | justify-content: center; 32 | } 33 | 34 | @media #{$breakpoint-sm} { 35 | .Header { 36 | text-align: left; 37 | } 38 | 39 | .SiteCaption { 40 | justify-content: space-between; 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /_sass/layout/_navigation.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/f2etw/weekly-collection/9652847d6f847db91a3ceba344b39ff56b31bc38/_sass/layout/_navigation.scss -------------------------------------------------------------------------------- /_sass/layout/_stick-footer.scss: -------------------------------------------------------------------------------- 1 | body { 2 | display: flex; 3 | flex-direction: column; 4 | min-height: 100vh; 5 | } 6 | 7 | .workspace { 8 | flex-grow: 1; 9 | } 10 | -------------------------------------------------------------------------------- /_sass/pages/_index.scss: -------------------------------------------------------------------------------- 1 | .PostList { 2 | } 3 | 4 | .PostList__time { 5 | opacity: .5; 6 | } 7 | 8 | .PostList__title { 9 | } 10 | 11 | .PostList__link { 12 | color: inherit; 13 | font-size: 1.4em; 14 | letter-spacing: -1px; 15 | } 16 | 17 | .PostList__txt { 18 | border-left: .5em solid rgba($c-black, .075); 19 | opacity: .8; 20 | } 21 | -------------------------------------------------------------------------------- /_sass/pages/_tags.scss: -------------------------------------------------------------------------------- 1 | .p-tag { 2 | &:target { 3 | background-color: #ffc; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /_sass/vendors/_highlights.scss: -------------------------------------------------------------------------------- 1 | 2 | .highlight { 3 | background-color: rgba(#ff0,.03); 4 | padding: .5em .5em .5em 1.5em; 5 | border: 1px solid #ddd; 6 | border-radius: .25em; 7 | box-shadow: inset 2px 2px 7px 0 rgba(#660,.2); 8 | margin: 0 1em 2em; 9 | overflow: auto; 10 | } 11 | 12 | code { 13 | font-family:'Bitstream Vera Sans Mono','Courier', monospace; 14 | } 15 | 16 | .highlight .c { color: #586E75 } /* Comment */ 17 | .highlight .err { color: #93A1A1 } /* Error */ 18 | .highlight .g { color: #93A1A1 } /* Generic */ 19 | .highlight .k { color: #859900 } /* Keyword */ 20 | .highlight .l { color: #93A1A1 } /* Literal */ 21 | .highlight .n { color: #93A1A1 } /* Name */ 22 | .highlight .o { color: #859900 } /* Operator */ 23 | .highlight .x { color: #CB4B16 } /* Other */ 24 | .highlight .p { color: #93A1A1 } /* Punctuation */ 25 | .highlight .cm { color: #586E75 } /* Comment.Multiline */ 26 | .highlight .cp { color: #859900 } /* Comment.Preproc */ 27 | .highlight .c1 { color: #586E75 } /* Comment.Single */ 28 | .highlight .cs { color: #859900 } /* Comment.Special */ 29 | .highlight .gd { color: #2AA198 } /* Generic.Deleted */ 30 | .highlight .ge { color: #93A1A1; font-style: italic } /* Generic.Emph */ 31 | .highlight .gr { color: #DC322F } /* Generic.Error */ 32 | .highlight .gh { color: #CB4B16 } /* Generic.Heading */ 33 | .highlight .gi { color: #859900 } /* Generic.Inserted */ 34 | .highlight .go { color: #93A1A1 } /* Generic.Output */ 35 | .highlight .gp { color: #93A1A1 } /* Generic.Prompt */ 36 | .highlight .gs { color: #93A1A1; font-weight: bold } /* Generic.Strong */ 37 | .highlight .gu { color: #CB4B16 } /* Generic.Subheading */ 38 | .highlight .gt { color: #93A1A1 } /* Generic.Traceback */ 39 | .highlight .kc { color: #CB4B16 } /* Keyword.Constant */ 40 | .highlight .kd { color: #268BD2 } /* Keyword.Declaration */ 41 | .highlight .kn { color: #859900 } /* Keyword.Namespace */ 42 | .highlight .kp { color: #859900 } /* Keyword.Pseudo */ 43 | .highlight .kr { color: #268BD2 } /* Keyword.Reserved */ 44 | .highlight .kt { color: #DC322F } /* Keyword.Type */ 45 | .highlight .ld { color: #93A1A1 } /* Literal.Date */ 46 | .highlight .m { color: #2AA198 } /* Literal.Number */ 47 | .highlight .s { color: #2AA198 } /* Literal.String */ 48 | .highlight .na { color: #93A1A1 } /* Name.Attribute */ 49 | .highlight .nb { color: #B58900 } /* Name.Builtin */ 50 | .highlight .nc { color: #268BD2 } /* Name.Class */ 51 | .highlight .no { color: #CB4B16 } /* Name.Constant */ 52 | .highlight .nd { color: #268BD2 } /* Name.Decorator */ 53 | .highlight .ni { color: #CB4B16 } /* Name.Entity */ 54 | .highlight .ne { color: #CB4B16 } /* Name.Exception */ 55 | .highlight .nf { color: #268BD2 } /* Name.Function */ 56 | .highlight .nl { color: #93A1A1 } /* Name.Label */ 57 | .highlight .nn { color: #93A1A1 } /* Name.Namespace */ 58 | .highlight .nx { color: #555 } /* Name.Other */ 59 | .highlight .py { color: #93A1A1 } /* Name.Property */ 60 | .highlight .nt { color: #268BD2 } /* Name.Tag */ 61 | .highlight .nv { color: #268BD2 } /* Name.Variable */ 62 | .highlight .ow { color: #859900 } /* Operator.Word */ 63 | .highlight .w { color: #93A1A1 } /* Text.Whitespace */ 64 | .highlight .mf { color: #2AA198 } /* Literal.Number.Float */ 65 | .highlight .mh { color: #2AA198 } /* Literal.Number.Hex */ 66 | .highlight .mi { color: #2AA198 } /* Literal.Number.Integer */ 67 | .highlight .mo { color: #2AA198 } /* Literal.Number.Oct */ 68 | .highlight .sb { color: #586E75 } /* Literal.String.Backtick */ 69 | .highlight .sc { color: #2AA198 } /* Literal.String.Char */ 70 | .highlight .sd { color: #93A1A1 } /* Literal.String.Doc */ 71 | .highlight .s2 { color: #2AA198 } /* Literal.String.Double */ 72 | .highlight .se { color: #CB4B16 } /* Literal.String.Escape */ 73 | .highlight .sh { color: #93A1A1 } /* Literal.String.Heredoc */ 74 | .highlight .si { color: #2AA198 } /* Literal.String.Interpol */ 75 | .highlight .sx { color: #2AA198 } /* Literal.String.Other */ 76 | .highlight .sr { color: #DC322F } /* Literal.String.Regex */ 77 | .highlight .s1 { color: #2AA198 } /* Literal.String.Single */ 78 | .highlight .ss { color: #2AA198 } /* Literal.String.Symbol */ 79 | .highlight .bp { color: #268BD2 } /* Name.Builtin.Pseudo */ 80 | .highlight .vc { color: #268BD2 } /* Name.Variable.Class */ 81 | .highlight .vg { color: #268BD2 } /* Name.Variable.Global */ 82 | .highlight .vi { color: #268BD2 } /* Name.Variable.Instance */ 83 | .highlight .il { color: #2AA198 } /* Literal.Number.Integer.Long */ 84 | -------------------------------------------------------------------------------- /_sass/vendors/basscss/_align.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* Basscss Align */ 9 | 10 | .align-baseline { vertical-align: baseline } 11 | 12 | .align-top { vertical-align: top } 13 | 14 | .align-middle { vertical-align: middle } 15 | 16 | .align-bottom { vertical-align: bottom } -------------------------------------------------------------------------------- /_sass/vendors/basscss/_all.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* Basscss All */ 9 | 10 | .all-initial { all: initial } 11 | 12 | .all-unset { all: unset } 13 | 14 | .all-inherit { all: inherit } -------------------------------------------------------------------------------- /_sass/vendors/basscss/_background-colors.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | $aqua: #7fdbff !default; 5 | $blue: #0074d9 !default; 6 | $navy: #001f3f !default; 7 | $teal: #39cccc !default; 8 | $green: #2ecc40 !default; 9 | $olive: #3d9970 !default; 10 | $lime: #01ff70 !default; 11 | $yellow: #ffdc00 !default; 12 | $orange: #ff851b !default; 13 | $red: #ff4136 !default; 14 | $fuchsia: #f012be !default; 15 | $purple: #b10dc9 !default; 16 | $maroon: #85144b !default; 17 | $white: #fff !default; 18 | $silver: #ddd !default; 19 | $gray: #aaa !default; 20 | $black: #111 !default; 21 | 22 | // Custom Media Query Variables 23 | 24 | 25 | /* Basscss Background Colors */ 26 | 27 | /* 28 | 29 | COLOR VARIABLES 30 | 31 | - Cool 32 | - Warm 33 | - Gray Scale 34 | 35 | */ 36 | 37 | .bg-black { background-color: $black } 38 | 39 | .bg-gray { background-color: $gray } 40 | 41 | .bg-silver { background-color: $silver } 42 | 43 | .bg-white { background-color: $white } 44 | 45 | .bg-aqua { background-color: $aqua } 46 | 47 | .bg-blue { background-color: $blue } 48 | 49 | .bg-navy { background-color: $navy } 50 | 51 | .bg-teal { background-color: $teal } 52 | 53 | .bg-green { background-color: $green } 54 | 55 | .bg-olive { background-color: $olive } 56 | 57 | .bg-lime { background-color: $lime } 58 | 59 | .bg-yellow { background-color: $yellow } 60 | 61 | .bg-orange { background-color: $orange } 62 | 63 | .bg-red { background-color: $red } 64 | 65 | .bg-fuchsia { background-color: $fuchsia } 66 | 67 | .bg-purple { background-color: $purple } 68 | 69 | .bg-maroon { background-color: $maroon } -------------------------------------------------------------------------------- /_sass/vendors/basscss/_background-images.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* Basscss Background Images */ 9 | 10 | .bg-cover { background-size: cover } 11 | 12 | .bg-contain { background-size: contain } 13 | 14 | .bg-center { background-position: center } 15 | 16 | .bg-top { background-position: top } 17 | 18 | .bg-right { background-position: right } 19 | 20 | .bg-bottom { background-position: bottom } 21 | 22 | .bg-left { background-position: left } -------------------------------------------------------------------------------- /_sass/vendors/basscss/_border-colors.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | $aqua: #7fdbff !default; 5 | $blue: #0074d9 !default; 6 | $navy: #001f3f !default; 7 | $teal: #39cccc !default; 8 | $green: #2ecc40 !default; 9 | $olive: #3d9970 !default; 10 | $lime: #01ff70 !default; 11 | $yellow: #ffdc00 !default; 12 | $orange: #ff851b !default; 13 | $red: #ff4136 !default; 14 | $fuchsia: #f012be !default; 15 | $purple: #b10dc9 !default; 16 | $maroon: #85144b !default; 17 | $white: #fff !default; 18 | $silver: #ddd !default; 19 | $gray: #aaa !default; 20 | $black: #111 !default; 21 | 22 | // Custom Media Query Variables 23 | 24 | 25 | /* Basscss Border Colors */ 26 | 27 | /* 28 | 29 | COLOR VARIABLES 30 | 31 | - Cool 32 | - Warm 33 | - Gray Scale 34 | 35 | */ 36 | 37 | .border-black { border-color: $black } 38 | 39 | .border-gray { border-color: $gray } 40 | 41 | .border-silver { border-color: $silver } 42 | 43 | .border-white { border-color: $white } 44 | 45 | .border-aqua { border-color: $aqua } 46 | 47 | .border-blue { border-color: $blue } 48 | 49 | .border-navy { border-color: $navy } 50 | 51 | .border-teal { border-color: $teal } 52 | 53 | .border-green { border-color: $green } 54 | 55 | .border-olive { border-color: $olive } 56 | 57 | .border-lime { border-color: $lime } 58 | 59 | .border-yellow { border-color: $yellow } 60 | 61 | .border-orange { border-color: $orange } 62 | 63 | .border-red { border-color: $red } 64 | 65 | .border-fuchsia { border-color: $fuchsia } 66 | 67 | .border-purple { border-color: $purple } 68 | 69 | .border-maroon { border-color: $maroon } 70 | -------------------------------------------------------------------------------- /_sass/vendors/basscss/_border.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | $border-width: 1px !default; 5 | $border-radius: 3px !default; 6 | 7 | // Custom Media Query Variables 8 | 9 | 10 | /* Basscss Border */ 11 | 12 | .border { 13 | border-style: solid; 14 | border-width: $border-width; 15 | } 16 | 17 | .border-top { 18 | border-top-style: solid; 19 | border-top-width: $border-width; 20 | } 21 | 22 | .border-right { 23 | border-right-style: solid; 24 | border-right-width: $border-width; 25 | } 26 | 27 | .border-bottom { 28 | border-bottom-style: solid; 29 | border-bottom-width: $border-width; 30 | } 31 | 32 | .border-left { 33 | border-left-style: solid; 34 | border-left-width: $border-width; 35 | } 36 | 37 | .border-none { border: 0 } 38 | 39 | .rounded { border-radius: $border-radius } 40 | 41 | .circle { border-radius: 50% } 42 | 43 | .rounded-top { border-radius: $border-radius $border-radius 0 0 } 44 | 45 | .rounded-right { border-radius: 0 $border-radius $border-radius 0 } 46 | 47 | .rounded-bottom { border-radius: 0 0 $border-radius $border-radius } 48 | 49 | .rounded-left { border-radius: $border-radius 0 0 $border-radius } 50 | 51 | .not-rounded { border-radius: 0 } -------------------------------------------------------------------------------- /_sass/vendors/basscss/_btn-outline.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | $border-radius: 3px !default; 5 | $darken-1: rgba(0, 0, 0, .0625) !default; 6 | $darken-2: rgba(0, 0, 0, .125) !default; 7 | $darken-3: rgba(0, 0, 0, .25) !default; 8 | 9 | // Custom Media Query Variables 10 | 11 | 12 | /* Basscss Btn Outline */ 13 | 14 | .btn-outline, 15 | .btn-outline:hover { 16 | border-color: currentcolor; 17 | } 18 | 19 | .btn-outline { 20 | border-radius: $border-radius; 21 | } 22 | 23 | .btn-outline:hover { 24 | box-shadow: inset 0 0 0 20rem $darken-1; 25 | } 26 | 27 | .btn-outline:active { 28 | box-shadow: inset 0 0 0 20rem $darken-2, 29 | inset 0 3px 4px 0 $darken-3, 30 | 0 0 1px $darken-2; 31 | } 32 | 33 | .btn-outline:disabled, 34 | .btn-outline.is-disabled { 35 | opacity: .5; 36 | } -------------------------------------------------------------------------------- /_sass/vendors/basscss/_btn-primary.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | $blue: #0074d9 !default; 5 | $button-color: #fff !default; 6 | $button-background-color: $blue !default; 7 | $border-radius: 3px !default; 8 | $darken-1: rgba(0, 0, 0, .0625) !default; 9 | $darken-2: rgba(0, 0, 0, .125) !default; 10 | $darken-3: rgba(0, 0, 0, .25) !default; 11 | 12 | // Custom Media Query Variables 13 | 14 | 15 | /* Basscss Btn Primary */ 16 | 17 | .btn-primary { 18 | color: $button-color; 19 | background-color: $button-background-color; 20 | border-radius: $border-radius; 21 | } 22 | 23 | .btn-primary:hover { 24 | box-shadow: inset 0 0 0 20rem $darken-1; 25 | } 26 | 27 | .btn-primary:active { 28 | box-shadow: inset 0 0 0 20rem $darken-2, 29 | inset 0 3px 4px 0 $darken-3, 30 | 0 0 1px $darken-2; 31 | } 32 | 33 | .btn-primary:disabled, 34 | .btn-primary.is-disabled { 35 | opacity: .5; 36 | } -------------------------------------------------------------------------------- /_sass/vendors/basscss/_btn.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | $border-width: 1px !default; 5 | $bold-font-weight: bold !default; 6 | $button-font-family: inherit !default; 7 | $button-font-size: inherit !default; 8 | $button-font-weight: $bold-font-weight !default; 9 | $button-line-height: 1.125rem !default; 10 | $button-padding-y: .5rem !default; 11 | $button-padding-x: 1rem !default; 12 | $darken-2: rgba(0, 0, 0, .125) !default; 13 | $darken-3: rgba(0, 0, 0, .25) !default; 14 | 15 | // Custom Media Query Variables 16 | 17 | 18 | /* Basscss Btn */ 19 | 20 | .btn { 21 | font-family: $button-font-family; 22 | font-size: $button-font-size; 23 | font-weight: $button-font-weight; 24 | text-decoration: none; 25 | cursor: pointer; 26 | display: inline-block; 27 | line-height: $button-line-height; 28 | padding: $button-padding-y $button-padding-x; 29 | margin: 0; 30 | height: auto; 31 | border: $border-width solid transparent; 32 | vertical-align: middle; 33 | -webkit-appearance: none; 34 | color: inherit; 35 | background-color: transparent; 36 | } 37 | 38 | .btn:hover { 39 | text-decoration: none; 40 | } 41 | 42 | .btn:focus { 43 | outline: none; 44 | border-color: $darken-2; 45 | box-shadow: 0 0 0 3px $darken-3; 46 | } 47 | 48 | ::-moz-focus-inner { 49 | border: 0; 50 | padding: 0; 51 | } -------------------------------------------------------------------------------- /_sass/vendors/basscss/_colors.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | $aqua: #7fdbff !default; 5 | $blue: #0074d9 !default; 6 | $navy: #001f3f !default; 7 | $teal: #39cccc !default; 8 | $green: #2ecc40 !default; 9 | $olive: #3d9970 !default; 10 | $lime: #01ff70 !default; 11 | $yellow: #ffdc00 !default; 12 | $orange: #ff851b !default; 13 | $red: #ff4136 !default; 14 | $fuchsia: #f012be !default; 15 | $purple: #b10dc9 !default; 16 | $maroon: #85144b !default; 17 | $white: #fff !default; 18 | $silver: #ddd !default; 19 | $gray: #aaa !default; 20 | $black: #111 !default; 21 | 22 | // Custom Media Query Variables 23 | 24 | 25 | /* Basscss Colors */ 26 | 27 | /* 28 | 29 | COLOR VARIABLES 30 | 31 | - Cool 32 | - Warm 33 | - Gray Scale 34 | 35 | */ 36 | 37 | .black { color: $black } 38 | 39 | .gray { color: $gray } 40 | 41 | .silver { color: $silver } 42 | 43 | .white { color: $white } 44 | 45 | .aqua { color: $aqua } 46 | 47 | .blue { color: $blue } 48 | 49 | .navy { color: $navy } 50 | 51 | .teal { color: $teal } 52 | 53 | .green { color: $green } 54 | 55 | .olive { color: $olive } 56 | 57 | .lime { color: $lime } 58 | 59 | .yellow { color: $yellow } 60 | 61 | .orange { color: $orange } 62 | 63 | .red { color: $red } 64 | 65 | .fuchsia { color: $fuchsia } 66 | 67 | .purple { color: $purple } 68 | 69 | .maroon { color: $maroon } 70 | 71 | .color-inherit { color: inherit } 72 | 73 | .muted { opacity: .5 } -------------------------------------------------------------------------------- /_sass/vendors/basscss/_darken.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | $darken-1: rgba(0, 0, 0, .0625) !default; 5 | $darken-2: rgba(0, 0, 0, .125) !default; 6 | $darken-3: rgba(0, 0, 0, .25) !default; 7 | $darken-4: rgba(0, 0, 0, .5) !default; 8 | 9 | // Custom Media Query Variables 10 | 11 | 12 | /* Basscss Darken */ 13 | 14 | .bg-darken-1 { background-color: $darken-1 } 15 | 16 | .bg-darken-2 { background-color: $darken-2 } 17 | 18 | .bg-darken-3 { background-color: $darken-3 } 19 | 20 | .bg-darken-4 { background-color: $darken-4 } -------------------------------------------------------------------------------- /_sass/vendors/basscss/_flexbox.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | $breakpoint-sm: '(min-width: 40em)' !default; 8 | $breakpoint-md: '(min-width: 52em)' !default; 9 | $breakpoint-lg: '(min-width: 64em)' !default; 10 | 11 | 12 | .flex { display: flex } 13 | 14 | @media #{$breakpoint-sm} { 15 | .sm-flex { display: flex } 16 | } 17 | 18 | @media #{$breakpoint-md} { 19 | .md-flex { display: flex } 20 | } 21 | 22 | @media #{$breakpoint-lg} { 23 | .lg-flex { display: flex } 24 | } 25 | 26 | .flex-column { flex-direction: column } 27 | 28 | .flex-wrap { flex-wrap: wrap } 29 | 30 | .items-start { align-items: flex-start } 31 | 32 | .items-end { align-items: flex-end } 33 | 34 | .items-center { align-items: center } 35 | 36 | .items-baseline { align-items: baseline } 37 | 38 | .items-stretch { align-items: stretch } 39 | 40 | .self-start { align-self: flex-start } 41 | 42 | .self-end { align-self: flex-end } 43 | 44 | .self-center { align-self: center } 45 | 46 | .self-baseline { align-self: baseline } 47 | 48 | .self-stretch { align-self: stretch } 49 | 50 | .justify-start { justify-content: flex-start } 51 | 52 | .justify-end { justify-content: flex-end } 53 | 54 | .justify-center { justify-content: center } 55 | 56 | .justify-between { justify-content: space-between } 57 | 58 | .justify-around { justify-content: space-around } 59 | 60 | .content-start { align-content: flex-start } 61 | 62 | .content-end { align-content: flex-end } 63 | 64 | .content-center { align-content: center } 65 | 66 | .content-between { align-content: space-between } 67 | 68 | .content-around { align-content: space-around } 69 | 70 | .content-stretch { align-content: stretch } 71 | 72 | /* 1. Fix for Chrome 44 bug. https://code.google.com/p/chromium/issues/detail?id=506893 */ 73 | 74 | .flex-auto { 75 | flex: 1 1 auto; 76 | min-width: 0; /* 1 */ 77 | min-height: 0; /* 1 */ 78 | } 79 | 80 | .flex-none { flex: none } 81 | 82 | .order-0 { order: 0 } 83 | 84 | .order-1 { order: 1 } 85 | 86 | .order-2 { order: 2 } 87 | 88 | .order-3 { order: 3 } 89 | 90 | .order-last { order: 99999 } -------------------------------------------------------------------------------- /_sass/vendors/basscss/_forms.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* Basscss Forms */ 9 | 10 | .label { 11 | font-size: .875rem; 12 | font-weight: bold; 13 | display: block; 14 | margin-bottom: .5rem; 15 | } 16 | 17 | .input { 18 | font-family: inherit; 19 | font-size: inherit; 20 | display: block; 21 | width: 100%; 22 | height: 2.5rem; 23 | padding: .5rem; 24 | margin-bottom: 1rem; 25 | border: 1px solid #ccc; 26 | border-radius: 3px; 27 | } 28 | 29 | .select { 30 | font-family: inherit; 31 | font-size: inherit; 32 | display: block; 33 | width: 100%; 34 | height: 2.5rem; 35 | padding: .5rem; 36 | margin-bottom: 1rem; 37 | border: 1px solid #ccc; 38 | border-radius: 3px; 39 | } 40 | 41 | .textarea { 42 | font-family: inherit; 43 | font-size: inherit; 44 | display: block; 45 | width: 100%; 46 | padding: .5rem; 47 | margin-bottom: 1rem; 48 | border: 1px solid #ccc; 49 | border-radius: 3px; 50 | } -------------------------------------------------------------------------------- /_sass/vendors/basscss/_grid.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | $breakpoint-sm: '(min-width: 40em)' !default; 8 | $breakpoint-md: '(min-width: 52em)' !default; 9 | $breakpoint-lg: '(min-width: 64em)' !default; 10 | 11 | /* Basscss Grid */ 12 | 13 | .col { 14 | float: left; 15 | box-sizing: border-box; 16 | } 17 | 18 | .col-right { 19 | float: right; 20 | box-sizing: border-box; 21 | } 22 | 23 | .col-1 { 24 | width: (1/12 * 100%); 25 | } 26 | 27 | .col-2 { 28 | width: (2/12 * 100%); 29 | } 30 | 31 | .col-3 { 32 | width: (3/12 * 100%); 33 | } 34 | 35 | .col-4 { 36 | width: (4/12 * 100%); 37 | } 38 | 39 | .col-5 { 40 | width: (5/12 * 100%); 41 | } 42 | 43 | .col-6 { 44 | width: (6/12 * 100%); 45 | } 46 | 47 | .col-7 { 48 | width: (7/12 * 100%); 49 | } 50 | 51 | .col-8 { 52 | width: (8/12 * 100%); 53 | } 54 | 55 | .col-9 { 56 | width: (9/12 * 100%); 57 | } 58 | 59 | .col-10 { 60 | width: (10/12 * 100%); 61 | } 62 | 63 | .col-11 { 64 | width: (11/12 * 100%); 65 | } 66 | 67 | .col-12 { 68 | width: 100%; 69 | } 70 | 71 | @media #{$breakpoint-sm} { 72 | 73 | .sm-col { 74 | float: left; 75 | box-sizing: border-box; 76 | } 77 | 78 | .sm-col-right { 79 | float: right; 80 | box-sizing: border-box; 81 | } 82 | 83 | .sm-col-1 { 84 | width: (1/12 * 100%); 85 | } 86 | 87 | .sm-col-2 { 88 | width: (2/12 * 100%); 89 | } 90 | 91 | .sm-col-3 { 92 | width: (3/12 * 100%); 93 | } 94 | 95 | .sm-col-4 { 96 | width: (4/12 * 100%); 97 | } 98 | 99 | .sm-col-5 { 100 | width: (5/12 * 100%); 101 | } 102 | 103 | .sm-col-6 { 104 | width: (6/12 * 100%); 105 | } 106 | 107 | .sm-col-7 { 108 | width: (7/12 * 100%); 109 | } 110 | 111 | .sm-col-8 { 112 | width: (8/12 * 100%); 113 | } 114 | 115 | .sm-col-9 { 116 | width: (9/12 * 100%); 117 | } 118 | 119 | .sm-col-10 { 120 | width: (10/12 * 100%); 121 | } 122 | 123 | .sm-col-11 { 124 | width: (11/12 * 100%); 125 | } 126 | 127 | .sm-col-12 { 128 | width: 100%; 129 | } 130 | 131 | } 132 | 133 | @media #{$breakpoint-md} { 134 | 135 | .md-col { 136 | float: left; 137 | box-sizing: border-box; 138 | } 139 | 140 | .md-col-right { 141 | float: right; 142 | box-sizing: border-box; 143 | } 144 | 145 | .md-col-1 { 146 | width: (1/12 * 100%); 147 | } 148 | 149 | .md-col-2 { 150 | width: (2/12 * 100%); 151 | } 152 | 153 | .md-col-3 { 154 | width: (3/12 * 100%); 155 | } 156 | 157 | .md-col-4 { 158 | width: (4/12 * 100%); 159 | } 160 | 161 | .md-col-5 { 162 | width: (5/12 * 100%); 163 | } 164 | 165 | .md-col-6 { 166 | width: (6/12 * 100%); 167 | } 168 | 169 | .md-col-7 { 170 | width: (7/12 * 100%); 171 | } 172 | 173 | .md-col-8 { 174 | width: (8/12 * 100%); 175 | } 176 | 177 | .md-col-9 { 178 | width: (9/12 * 100%); 179 | } 180 | 181 | .md-col-10 { 182 | width: (10/12 * 100%); 183 | } 184 | 185 | .md-col-11 { 186 | width: (11/12 * 100%); 187 | } 188 | 189 | .md-col-12 { 190 | width: 100%; 191 | } 192 | 193 | } 194 | 195 | @media #{$breakpoint-lg} { 196 | 197 | .lg-col { 198 | float: left; 199 | box-sizing: border-box; 200 | } 201 | 202 | .lg-col-right { 203 | float: right; 204 | box-sizing: border-box; 205 | } 206 | 207 | .lg-col-1 { 208 | width: (1/12 * 100%); 209 | } 210 | 211 | .lg-col-2 { 212 | width: (2/12 * 100%); 213 | } 214 | 215 | .lg-col-3 { 216 | width: (3/12 * 100%); 217 | } 218 | 219 | .lg-col-4 { 220 | width: (4/12 * 100%); 221 | } 222 | 223 | .lg-col-5 { 224 | width: (5/12 * 100%); 225 | } 226 | 227 | .lg-col-6 { 228 | width: (6/12 * 100%); 229 | } 230 | 231 | .lg-col-7 { 232 | width: (7/12 * 100%); 233 | } 234 | 235 | .lg-col-8 { 236 | width: (8/12 * 100%); 237 | } 238 | 239 | .lg-col-9 { 240 | width: (9/12 * 100%); 241 | } 242 | 243 | .lg-col-10 { 244 | width: (10/12 * 100%); 245 | } 246 | 247 | .lg-col-11 { 248 | width: (11/12 * 100%); 249 | } 250 | 251 | .lg-col-12 { 252 | width: 100%; 253 | } 254 | 255 | } -------------------------------------------------------------------------------- /_sass/vendors/basscss/_hide.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | $breakpoint-xs: '(max-width: 40em)' !default; 8 | $breakpoint-sm-md: '(min-width: 40em) and (max-width: 52em)' !default; 9 | $breakpoint-md-lg: '(min-width: 52em) and (max-width: 64em)' !default; 10 | $breakpoint-lg: '(min-width: 64em)' !default; 11 | 12 | /* Basscss Hide */ 13 | 14 | .hide { 15 | position: absolute !important; 16 | height: 1px; 17 | width: 1px; 18 | overflow: hidden; 19 | clip: rect(1px, 1px, 1px, 1px); 20 | } 21 | 22 | @media #{$breakpoint-xs} { 23 | .xs-hide { display: none !important } 24 | } 25 | 26 | @media #{$breakpoint-sm-md} { 27 | .sm-hide { display: none !important } 28 | } 29 | 30 | @media #{$breakpoint-md-lg} { 31 | .md-hide { display: none !important } 32 | } 33 | 34 | @media #{$breakpoint-lg} { 35 | .lg-hide { display: none !important } 36 | } 37 | 38 | .display-none { display: none !important } -------------------------------------------------------------------------------- /_sass/vendors/basscss/_highlight-dark.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | $aqua: #7fdbff !default; 5 | $blue: #0074d9 !default; 6 | $navy: #001f3f !default; 7 | $teal: #39cccc !default; 8 | $green: #2ecc40 !default; 9 | $olive: #3d9970 !default; 10 | $lime: #01ff70 !default; 11 | $yellow: #ffdc00 !default; 12 | $orange: #ff851b !default; 13 | $red: #ff4136 !default; 14 | $fuchsia: #f012be !default; 15 | $purple: #b10dc9 !default; 16 | $maroon: #85144b !default; 17 | $white: #fff !default; 18 | $silver: #ddd !default; 19 | $gray: #aaa !default; 20 | $black: #111 !default; 21 | $hljs-comment: $silver !default; 22 | $hljs-keyword: white !default; 23 | $hljs-number: $lime !default; 24 | $hljs-string: $red !default; 25 | $hljs-title: $red !default; 26 | $hljs-type: $aqua !default; 27 | $hljs-tag: $aqua !default; 28 | $hljs-attribute: $lime !default; 29 | $hljs-regexp: $lime !default; 30 | $hljs-symbol: $fuchsia !default; 31 | $hljs-built-in: $aqua !default; 32 | $hljs-preprocessor: $silver !default; 33 | $hljs-deletion: $fuchsia !default; 34 | $hljs-addition: $lime !default; 35 | $hljs-change: $aqua !default; 36 | $hljs-chunk: $gray !default; 37 | 38 | // Custom Media Query Variables 39 | 40 | 41 | /* Basscss Highlight */ 42 | 43 | /* 44 | 45 | COLOR VARIABLES 46 | 47 | - Cool 48 | - Warm 49 | - Gray Scale 50 | 51 | */ 52 | 53 | .highlight-dark .hljs { 54 | color: white; 55 | -webkit-text-size-adjust: none; 56 | } 57 | 58 | .highlight-dark .hljs-comment, 59 | .highlight-dark .diff .hljs-header, 60 | .highlight-dark .hljs-javadoc { 61 | color: $hljs-comment; 62 | font-style: italic; 63 | } 64 | 65 | .highlight-dark .hljs-keyword, 66 | .highlight-dark .css .rule .hljs-keyword, 67 | .highlight-dark .hljs-winutils, 68 | .highlight-dark .nginx .hljs-title, 69 | .highlight-dark .hljs-subst, 70 | .highlight-dark .hljs-request, 71 | .highlight-dark .hljs-status { 72 | color: $hljs-keyword; 73 | font-weight: bold; 74 | } 75 | 76 | .highlight-dark .hljs-number, 77 | .highlight-dark .hljs-hexcolor, 78 | .highlight-dark .ruby .hljs-constant { 79 | color: $hljs-number; 80 | } 81 | 82 | .highlight-dark .hljs-string, 83 | .highlight-dark .hljs-tag .hljs-value, 84 | .highlight-dark .hljs-phpdoc, 85 | .highlight-dark .hljs-dartdoc, 86 | .highlight-dark .tex .hljs-formula { 87 | color: $hljs-string; 88 | } 89 | 90 | .hljs-title, 91 | .hljs-id, 92 | .scss .hljs-preprocessor { 93 | color: $hljs-title; 94 | font-weight: bold; 95 | } 96 | 97 | .highlight-dark .hljs-list .hljs-keyword, 98 | .highlight-dark .hljs-subst { 99 | font-weight: normal; 100 | } 101 | 102 | .highlight-dark .hljs-class .hljs-title, 103 | .highlight-dark .hljs-type, 104 | .highlight-dark .vhdl .hljs-literal, 105 | .highlight-dark .tex .hljs-command { 106 | color: $hljs-type; 107 | font-weight: bold; 108 | } 109 | 110 | .highlight-dark .hljs-tag, 111 | .highlight-dark .hljs-tag .hljs-title, 112 | .highlight-dark .hljs-rules .hljs-property, 113 | .highlight-dark .django .hljs-tag .hljs-keyword { 114 | color: $hljs-tag; 115 | font-weight: normal; 116 | } 117 | 118 | .highlight-dark .hljs-attribute, 119 | .highlight-dark .hljs-variable, 120 | .highlight-dark .lisp .hljs-body { 121 | color: $hljs-attribute; 122 | } 123 | 124 | .highlight-dark .hljs-regexp { 125 | color: $hljs-regexp; 126 | } 127 | 128 | .highlight-dark .hljs-symbol, 129 | .highlight-dark .ruby .hljs-symbol .hljs-string, 130 | .highlight-dark .lisp .hljs-keyword, 131 | .highlight-dark .clojure .hljs-keyword, 132 | .highlight-dark .scheme .hljs-keyword, 133 | .highlight-dark .tex .hljs-special, 134 | .highlight-dark .hljs-prompt { 135 | color: $hljs-symbol; 136 | } 137 | 138 | .highlight-dark .hljs-built_in { 139 | color: $hljs-built-in; 140 | } 141 | 142 | .highlight-dark .hljs-preprocessor, 143 | .highlight-dark .hljs-pragma, 144 | .highlight-dark .hljs-pi, 145 | .highlight-dark .hljs-doctype, 146 | .highlight-dark .hljs-shebang, 147 | .highlight-dark .hljs-cdata { 148 | color: $hljs-preprocessor; 149 | font-weight: bold; 150 | } 151 | 152 | .highlight-dark .hljs-deletion { 153 | background: $hljs-deletion; 154 | } 155 | 156 | .highlight-dark .hljs-addition { 157 | background: $hljs-addition; 158 | } 159 | 160 | .highlight-dark .diff .hljs-change { 161 | background: $hljs-change; 162 | } 163 | 164 | .highlight-dark .hljs-chunk { 165 | color: $hljs-chunk; 166 | } -------------------------------------------------------------------------------- /_sass/vendors/basscss/_highlight.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | $aqua: #7fdbff !default; 5 | $blue: #0074d9 !default; 6 | $navy: #001f3f !default; 7 | $teal: #39cccc !default; 8 | $green: #2ecc40 !default; 9 | $olive: #3d9970 !default; 10 | $lime: #01ff70 !default; 11 | $yellow: #ffdc00 !default; 12 | $orange: #ff851b !default; 13 | $red: #ff4136 !default; 14 | $fuchsia: #f012be !default; 15 | $purple: #b10dc9 !default; 16 | $maroon: #85144b !default; 17 | $white: #fff !default; 18 | $silver: #ddd !default; 19 | $gray: #aaa !default; 20 | $black: #111 !default; 21 | $hljs-comment: $gray !default; 22 | $hljs-keyword: $black !default; 23 | $hljs-number: $olive !default; 24 | $hljs-string: $blue !default; 25 | $hljs-title: $blue !default; 26 | $hljs-type: $navy !default; 27 | $hljs-tag: $navy !default; 28 | $hljs-attribute: $olive !default; 29 | $hljs-regexp: $olive !default; 30 | $hljs-symbol: $purple !default; 31 | $hljs-built-in: $navy !default; 32 | $hljs-preprocessor: $gray !default; 33 | $hljs-deletion: $fuchsia !default; 34 | $hljs-addition: $lime !default; 35 | $hljs-change: $navy !default; 36 | $hljs-chunk: $silver !default; 37 | 38 | // Custom Media Query Variables 39 | 40 | 41 | /* Basscss Highlight */ 42 | 43 | /* 44 | 45 | COLOR VARIABLES 46 | 47 | - Cool 48 | - Warm 49 | - Gray Scale 50 | 51 | */ 52 | 53 | .hljs { 54 | -webkit-text-size-adjust: none; 55 | } 56 | 57 | .hljs-comment, 58 | .diff .hljs-header, 59 | .hljs-javadoc { 60 | color: $hljs-comment; 61 | font-style: italic; 62 | } 63 | 64 | .hljs-keyword, 65 | .css .rule .hljs-keyword, 66 | .hljs-winutils, 67 | .nginx .hljs-title, 68 | .hljs-subst, 69 | .hljs-request, 70 | .hljs-status { 71 | color: $hljs-keyword; 72 | font-weight: bold; 73 | } 74 | 75 | .hljs-number, 76 | .hljs-hexcolor, 77 | .ruby .hljs-constant { 78 | color: $hljs-number; 79 | } 80 | 81 | .hljs-string, 82 | .hljs-tag .hljs-value, 83 | .hljs-phpdoc, 84 | .hljs-dartdoc, 85 | .tex .hljs-formula { 86 | color: $hljs-string; 87 | } 88 | 89 | .hljs-title, 90 | .hljs-id, 91 | .scss .hljs-preprocessor { 92 | color: $hljs-title; 93 | font-weight: bold; 94 | } 95 | 96 | .hljs-list .hljs-keyword, 97 | .hljs-subst { 98 | font-weight: normal; 99 | } 100 | 101 | .hljs-class .hljs-title, 102 | .hljs-type, 103 | .vhdl .hljs-literal, 104 | .tex .hljs-command { 105 | color: $hljs-type; 106 | font-weight: bold; 107 | } 108 | 109 | .hljs-tag, 110 | .hljs-tag .hljs-title, 111 | .hljs-rules .hljs-property, 112 | .django .hljs-tag .hljs-keyword { 113 | color: $hljs-tag; 114 | font-weight: normal; 115 | } 116 | 117 | .hljs-attribute, 118 | .hljs-variable, 119 | .lisp .hljs-body { 120 | color: $hljs-attribute; 121 | } 122 | 123 | .hljs-regexp { 124 | color: $hljs-regexp; 125 | } 126 | 127 | .hljs-symbol, 128 | .ruby .hljs-symbol .hljs-string, 129 | .lisp .hljs-keyword, 130 | .clojure .hljs-keyword, 131 | .scheme .hljs-keyword, 132 | .tex .hljs-special, 133 | .hljs-prompt { 134 | color: $hljs-symbol; 135 | } 136 | 137 | .hljs-built_in { 138 | color: $hljs-built-in; 139 | } 140 | 141 | .hljs-preprocessor, 142 | .hljs-pragma, 143 | .hljs-pi, 144 | .hljs-doctype, 145 | .hljs-shebang, 146 | .hljs-cdata { 147 | color: $hljs-preprocessor; 148 | font-weight: bold; 149 | } 150 | 151 | .hljs-deletion { 152 | background: $hljs-deletion; 153 | } 154 | 155 | .hljs-addition { 156 | background: $hljs-addition; 157 | } 158 | 159 | .diff .hljs-change { 160 | background: $hljs-change; 161 | } 162 | 163 | .hljs-chunk { 164 | color: $hljs-chunk; 165 | } 166 | 167 | /* Mapped colors */ -------------------------------------------------------------------------------- /_sass/vendors/basscss/_input-range.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | $form-field-padding-x: .5rem !default; 5 | $form-field-padding-y: .5rem !default; 6 | $form-field-height: 2.25rem !default; 7 | $border-radius: 3px !default; 8 | $darken-3: rgba(0, 0, 0, .25) !default; 9 | $range-thumb-width: $form-field-padding-x !default; 10 | $range-thumb-height: ( $form-field-height - ($form-field-padding-y * 2) ) !default; 11 | $range-track-height: ( $form-field-padding-y / 2 ) !default; 12 | $range-thumb-offset: ( $range-thumb-height / -2 + ($range-track-height / 2) ) !default; 13 | $range-thumb-pseudo-size: $form-field-height !default; 14 | 15 | // Custom Media Query Variables 16 | 17 | 18 | /* Basscss Input Range */ 19 | 20 | .input-range { 21 | vertical-align: middle; 22 | background-color: transparent; 23 | padding-top: $form-field-padding-y; 24 | padding-bottom: $form-field-padding-y; 25 | color: inherit; 26 | background-color: transparent; 27 | -webkit-appearance: none; 28 | } 29 | 30 | .input-range::-webkit-slider-thumb { 31 | position: relative; 32 | width: $range-thumb-width; 33 | height: $range-thumb-height; 34 | cursor: pointer; 35 | margin-top: $range-thumb-offset; 36 | border-radius: $border-radius; 37 | background-color: currentcolor; 38 | -webkit-appearance: none; 39 | } 40 | 41 | /* Touch screen friendly pseudo element */ 42 | 43 | .input-range::-webkit-slider-thumb:before { 44 | content: ''; 45 | display: block; 46 | position: absolute; 47 | top: ( -.5 * $range-thumb-pseudo-size + (.5 * $range-thumb-height) ); 48 | left: ( (-.5 * $range-thumb-pseudo-size) + (.5 * $range-thumb-width) ); 49 | width: $range-thumb-pseudo-size; 50 | height: $range-thumb-pseudo-size; 51 | opacity: 0; 52 | } 53 | 54 | .input-range::-moz-range-thumb { 55 | width: $range-thumb-width; 56 | height: $range-thumb-height; 57 | cursor: pointer; 58 | border-radius: $border-radius; 59 | border-color: transparent; 60 | border-width: 0; 61 | background-color: currentcolor; 62 | } 63 | 64 | .input-range::-webkit-slider-runnable-track { 65 | height: $range-track-height; 66 | cursor: pointer; 67 | border-radius: $border-radius; 68 | background-color: $darken-3; 69 | } 70 | 71 | .input-range::-moz-range-track { 72 | height: $range-track-height; 73 | cursor: pointer; 74 | border-radius: $border-radius; 75 | background-color: $darken-3; 76 | } 77 | 78 | .input-range:focus { 79 | outline: none; 80 | } -------------------------------------------------------------------------------- /_sass/vendors/basscss/_layout.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | $width-1: 24rem !default; 5 | $width-2: 32rem !default; 6 | $width-3: 48rem !default; 7 | $width-4: 64rem !default; 8 | $width-5: 80rem !default; 9 | 10 | // Custom Media Query Variables 11 | 12 | 13 | /* Basscss Layout */ 14 | 15 | .inline { display: inline } 16 | 17 | .block { display: block } 18 | 19 | .inline-block { display: inline-block } 20 | 21 | .table { display: table } 22 | 23 | .table-cell { display: table-cell } 24 | 25 | .overflow-hidden { overflow: hidden } 26 | 27 | .overflow-scroll { overflow: scroll } 28 | 29 | .overflow-auto { overflow: auto } 30 | 31 | .clearfix:before, 32 | .clearfix:after { 33 | content: " "; 34 | display: table 35 | } 36 | 37 | .clearfix:after { clear: both } 38 | 39 | .left { float: left } 40 | 41 | .right { float: right } 42 | 43 | .fit { max-width: 100% } 44 | 45 | .max-width-1 { max-width: $width-1 } 46 | 47 | .max-width-2 { max-width: $width-2 } 48 | 49 | .max-width-3 { max-width: $width-3 } 50 | 51 | .max-width-4 { max-width: $width-4 } 52 | 53 | .max-width-5 { max-width: $width-5 } 54 | 55 | .border-box { box-sizing: border-box } 56 | -------------------------------------------------------------------------------- /_sass/vendors/basscss/_lighten.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | $lighten-1: rgba(255, 255, 255, .0625) !default; 5 | $lighten-2: rgba(255, 255, 255, .125) !default; 6 | $lighten-3: rgba(255, 255, 255, .25) !default; 7 | $lighten-4: rgba(255, 255, 255, .5) !default; 8 | 9 | // Custom Media Query Variables 10 | 11 | 12 | /* Basscss Lighten */ 13 | 14 | .bg-lighten-1 { background-color: $lighten-1 } 15 | 16 | .bg-lighten-2 { background-color: $lighten-2 } 17 | 18 | .bg-lighten-3 { background-color: $lighten-3 } 19 | 20 | .bg-lighten-4 { background-color: $lighten-4 } -------------------------------------------------------------------------------- /_sass/vendors/basscss/_margin.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | $space-1: .5rem !default; 5 | $space-2: 1rem !default; 6 | $space-3: 2rem !default; 7 | $space-4: 3rem !default; 8 | 9 | // Custom Media Query Variables 10 | 11 | 12 | /* Basscss Margin */ 13 | 14 | .m0 { margin: 0 } 15 | 16 | .mt0 { margin-top: 0 } 17 | 18 | .mr0 { margin-right: 0 } 19 | 20 | .mb0 { margin-bottom: 0 } 21 | 22 | .ml0 { margin-left: 0 } 23 | 24 | .mx0 { margin-left: 0; margin-right: 0 } 25 | 26 | .my0 { margin-top: 0; margin-bottom: 0 } 27 | 28 | .m1 { margin: $space-1 } 29 | 30 | .mt1 { margin-top: $space-1 } 31 | 32 | .mr1 { margin-right: $space-1 } 33 | 34 | .mb1 { margin-bottom: $space-1 } 35 | 36 | .ml1 { margin-left: $space-1 } 37 | 38 | .mx1 { margin-left: $space-1; margin-right: $space-1 } 39 | 40 | .my1 { margin-top: $space-1; margin-bottom: $space-1 } 41 | 42 | .m2 { margin: $space-2 } 43 | 44 | .mt2 { margin-top: $space-2 } 45 | 46 | .mr2 { margin-right: $space-2 } 47 | 48 | .mb2 { margin-bottom: $space-2 } 49 | 50 | .ml2 { margin-left: $space-2 } 51 | 52 | .mx2 { margin-left: $space-2; margin-right: $space-2 } 53 | 54 | .my2 { margin-top: $space-2; margin-bottom: $space-2 } 55 | 56 | .m3 { margin: $space-3 } 57 | 58 | .mt3 { margin-top: $space-3 } 59 | 60 | .mr3 { margin-right: $space-3 } 61 | 62 | .mb3 { margin-bottom: $space-3 } 63 | 64 | .ml3 { margin-left: $space-3 } 65 | 66 | .mx3 { margin-left: $space-3; margin-right: $space-3 } 67 | 68 | .my3 { margin-top: $space-3; margin-bottom: $space-3 } 69 | 70 | .m4 { margin: $space-4 } 71 | 72 | .mt4 { margin-top: $space-4 } 73 | 74 | .mr4 { margin-right: $space-4 } 75 | 76 | .mb4 { margin-bottom: $space-4 } 77 | 78 | .ml4 { margin-left: $space-4 } 79 | 80 | .mx4 { margin-left: $space-4; margin-right: $space-4 } 81 | 82 | .my4 { margin-top: $space-4; margin-bottom: $space-4 } 83 | 84 | .mxn1 { margin-left: -$space-1; margin-right: -$space-1; } 85 | 86 | .mxn2 { margin-left: -$space-2; margin-right: -$space-2; } 87 | 88 | .mxn3 { margin-left: -$space-3; margin-right: -$space-3; } 89 | 90 | .mxn4 { margin-left: -$space-4; margin-right: -$space-4; } 91 | 92 | .ml-auto { margin-left: auto } 93 | 94 | .mr-auto { margin-right: auto } 95 | 96 | .mx-auto { margin-left: auto; margin-right: auto; } 97 | -------------------------------------------------------------------------------- /_sass/vendors/basscss/_media-object.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | $space-1: .5rem !default; 5 | $media-object-space: $space-1 !default; 6 | 7 | // Custom Media Query Variables 8 | 9 | $breakpoint-sm: '(min-width: 40em)' !default; 10 | $breakpoint-md: '(min-width: 52em)' !default; 11 | $breakpoint-lg: '(min-width: 64em)' !default; 12 | 13 | /* Basscss Media Object */ 14 | 15 | .media, 16 | .sm-media, 17 | .md-media, 18 | .lg-media { 19 | margin-left: -$media-object-space; 20 | margin-right: -$media-object-space; 21 | } 22 | 23 | .media { 24 | display: flex; 25 | } 26 | 27 | .media-center { 28 | align-items: center; 29 | } 30 | 31 | .media-bottom { 32 | align-items: flex-end; 33 | } 34 | 35 | .media-img, 36 | .media-body { 37 | padding-left: $media-object-space; 38 | padding-right: $media-object-space; 39 | } 40 | 41 | .media-body { 42 | flex: 1 1 auto; 43 | } 44 | 45 | @media #{$breakpoint-sm} { 46 | .sm-media { display: flex } 47 | } 48 | 49 | @media #{$breakpoint-md} { 50 | .md-media { display: flex } 51 | } 52 | 53 | @media #{$breakpoint-lg} { 54 | .lg-media { display: flex } 55 | } -------------------------------------------------------------------------------- /_sass/vendors/basscss/_padding.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | $space-1: .5rem !default; 5 | $space-2: 1rem !default; 6 | $space-3: 2rem !default; 7 | $space-4: 4rem !default; 8 | 9 | // Custom Media Query Variables 10 | 11 | 12 | /* Basscss Padding */ 13 | 14 | .p0 { padding: 0 } 15 | 16 | .pt0 { padding-top: 0 } 17 | 18 | .pr0 { padding-right: 0 } 19 | 20 | .pb0 { padding-bottom: 0 } 21 | 22 | .pl0 { padding-left: 0 } 23 | 24 | .px0 { padding-left: 0; padding-right: 0 } 25 | 26 | .py0 { padding-top: 0; padding-bottom: 0 } 27 | 28 | .p1 { padding: $space-1 } 29 | 30 | .pt1 { padding-top: $space-1 } 31 | 32 | .pr1 { padding-right: $space-1 } 33 | 34 | .pb1 { padding-bottom: $space-1 } 35 | 36 | .pl1 { padding-left: $space-1 } 37 | 38 | .py1 { padding-top: $space-1; padding-bottom: $space-1 } 39 | 40 | .px1 { padding-left: $space-1; padding-right: $space-1 } 41 | 42 | .p2 { padding: $space-2 } 43 | 44 | .pt2 { padding-top: $space-2 } 45 | 46 | .pr2 { padding-right: $space-2 } 47 | 48 | .pb2 { padding-bottom: $space-2 } 49 | 50 | .pl2 { padding-left: $space-2 } 51 | 52 | .py2 { padding-top: $space-2; padding-bottom: $space-2 } 53 | 54 | .px2 { padding-left: $space-2; padding-right: $space-2 } 55 | 56 | .p3 { padding: $space-3 } 57 | 58 | .pt3 { padding-top: $space-3 } 59 | 60 | .pr3 { padding-right: $space-3 } 61 | 62 | .pb3 { padding-bottom: $space-3 } 63 | 64 | .pl3 { padding-left: $space-3 } 65 | 66 | .py3 { padding-top: $space-3; padding-bottom: $space-3 } 67 | 68 | .px3 { padding-left: $space-3; padding-right: $space-3 } 69 | 70 | .p4 { padding: $space-4 } 71 | 72 | .pt4 { padding-top: $space-4 } 73 | 74 | .pr4 { padding-right: $space-4 } 75 | 76 | .pb4 { padding-bottom: $space-4 } 77 | 78 | .pl4 { padding-left: $space-4 } 79 | 80 | .py4 { padding-top: $space-4; padding-bottom: $space-4 } 81 | 82 | .px4 { padding-left: $space-4; padding-right: $space-4 } -------------------------------------------------------------------------------- /_sass/vendors/basscss/_position.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | $z1: 1 !default; 5 | $z2: 2 !default; 6 | $z3: 3 !default; 7 | $z4: 4 !default; 8 | 9 | // Custom Media Query Variables 10 | 11 | 12 | /* Basscss Position */ 13 | 14 | .relative { position: relative } 15 | 16 | .absolute { position: absolute } 17 | 18 | .fixed { position: fixed } 19 | 20 | .top-0 { top: 0 } 21 | 22 | .right-0 { right: 0 } 23 | 24 | .bottom-0 { bottom: 0 } 25 | 26 | .left-0 { left: 0 } 27 | 28 | .z1 { z-index: $z1 } 29 | 30 | .z2 { z-index: $z2 } 31 | 32 | .z3 { z-index: $z3 } 33 | 34 | .z4 { z-index: $z4 } -------------------------------------------------------------------------------- /_sass/vendors/basscss/_progress.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | $form-field-height: 2.25rem !default; 5 | $form-field-padding-y: .5rem !default; 6 | $darken-2: rgba(0, 0, 0, .125) !default; 7 | 8 | // Custom Media Query Variables 9 | 10 | 11 | /* Basscss Progress */ 12 | 13 | .progress { 14 | display: block; 15 | width: 100%; 16 | height: ( $form-field-height / 4 ); 17 | margin: $form-field-padding-y 0; 18 | overflow: hidden; 19 | background-color: $darken-2; 20 | border: 0; 21 | border-radius: 10000px; 22 | -webkit-appearance: none; 23 | } 24 | 25 | .progress::-webkit-progress-bar { 26 | -webkit-appearance: none; 27 | background-color: $darken-2 28 | } 29 | 30 | .progress::-webkit-progress-value { 31 | -webkit-appearance: none; 32 | background-color: currentcolor; 33 | } 34 | 35 | .progress::-moz-progress-bar { 36 | background-color: currentcolor; 37 | } -------------------------------------------------------------------------------- /_sass/vendors/basscss/_type-scale.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | $h1: 2rem !default; 5 | $h2: 1.5rem !default; 6 | $h3: 1.25rem !default; 7 | $h4: 1rem !default; 8 | $h5: .875rem !default; 9 | $h6: .75rem !default; 10 | 11 | // Custom Media Query Variables 12 | 13 | 14 | /* Basscss Type Scale */ 15 | 16 | .h1 { font-size: $h1 } 17 | 18 | .h2 { font-size: $h2 } 19 | 20 | .h3 { font-size: $h3 } 21 | 22 | .h4 { font-size: $h4 } 23 | 24 | .h5 { font-size: $h5 } 25 | 26 | .h6 { font-size: $h6 } -------------------------------------------------------------------------------- /_sass/vendors/basscss/_typography.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | $line-height-1: 1 !default; 5 | $line-height-2: 1.125 !default; 6 | $line-height-3: 1.25 !default; 7 | $line-height-4: 1.5 !default; 8 | $letter-spacing: 1 !default; 9 | $caps-letter-spacing: .2em !default; 10 | $bold-font-weight: bold !default; 11 | 12 | // Custom Media Query Variables 13 | 14 | 15 | /* Basscss Typography */ 16 | 17 | .font-family-inherit { font-family: inherit } 18 | 19 | .font-size-inherit { font-size: inherit } 20 | 21 | .text-decoration-none { text-decoration: none } 22 | 23 | .bold { font-weight: $bold-font-weight /* Fallback value: bold */ } 24 | 25 | .regular { font-weight: normal } 26 | 27 | .italic { font-style: italic } 28 | 29 | .caps { text-transform: uppercase; letter-spacing: $caps-letter-spacing; } 30 | 31 | .left-align { text-align: left } 32 | 33 | .center { text-align: center } 34 | 35 | .right-align { text-align: right } 36 | 37 | .justify { text-align: justify } 38 | 39 | .nowrap { white-space: nowrap } 40 | 41 | .break-word { word-wrap: break-word } 42 | 43 | .line-height-1 { line-height: $line-height-1 } 44 | 45 | .line-height-2 { line-height: $line-height-2 } 46 | 47 | .line-height-3 { line-height: $line-height-3 } 48 | 49 | .line-height-4 { line-height: $line-height-4 } 50 | 51 | .list-style-none { list-style: none } 52 | 53 | .underline { text-decoration: underline } 54 | 55 | .truncate { 56 | max-width: 100%; 57 | overflow: hidden; 58 | text-overflow: ellipsis; 59 | white-space: nowrap; 60 | } 61 | 62 | .list-reset { 63 | list-style: none; 64 | padding-left: 0; 65 | } -------------------------------------------------------------------------------- /_sass/vendors/basscss/basscss.scss: -------------------------------------------------------------------------------- 1 | @import "type-scale"; 2 | @import "typography"; 3 | @import "layout"; 4 | @import "align"; 5 | @import "margin"; 6 | @import "padding"; 7 | @import "grid"; 8 | @import "flexbox"; 9 | @import "position"; 10 | @import "border"; 11 | @import "hide"; 12 | -------------------------------------------------------------------------------- /about.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: page 3 | title: About 4 | permalink: /about 5 | --- 6 | 7 | 前端社群裡優質分享文眾多, 8 | 但 Facebook 先天不易搜尋, 9 | 故希望以每週精選的方式,為社群留些紀錄。 10 | 11 | 運作細節可見 [README](https://github.com/f2etw/weekly-collection/blob/master/README.md) 12 | 13 | ***** 14 | 15 | # Q & A 16 | 17 | ## 週刊的目的 goals 18 | 19 | 記錄社團內的熱門文章,藉以反映現有成員的參與類型與趨勢。 20 | 亦希望成員們能更多地參與有興趣的議題,讓社團走向更加清晰。 21 | 22 | ## 上榜的因素 factors 23 | 24 | 目前(2016-03-31)的算法是以「likes」、「comments」、「shares」三種互動類型的數量進行加權,由高至低取前二十篇貼文做遴選。遴選由社團志工負責討論及投票,最後再與票數加權後相加,排序出前十篇貼文。 25 | 26 | 細部流程可參考 [wiki 文件的說明: 週刊發佈流程](https://github.com/f2etw/weekly-collection/wiki/%E9%80%B1%E5%88%8A%E7%99%BC%E4%BD%88%E6%B5%81%E7%A8%8B)。 27 | 28 | ## 各數值加權的權數? weight 29 | 30 | * likes: *1 31 | * comments: *1.5 32 | * shares: *2 33 | * votes: *3 34 | 35 | 目前的權數如上,comments 跟 shares 的權數會比 likes 高的原因是 36 | 希望前端社團內能有更多元的討論以及讓好文章的更加擴散、更好觸及。 37 | 38 | 至於票選的權數未來會視投票成員的數量再做調整 39 | 40 | 41 | ## 聯繫管道 contact 42 | 43 | * [Gitter room](https://gitter.im/f2etw/weekly-collection): 一般事務的討論都會在這邊 44 | * [Issues](https://github.com/f2etw/weekly-collection/issues): 發現 bug、有明確調整目標、需討論的議題都會在這邊寫下來。 45 | * [FB 社團](https://www.facebook.com/groups/f2e.tw) 46 | * [R+](https://fb.me/Rplus.tw): 發想 weekly-collection 的人 ( 都找不到人時才找… 47 | 48 | 49 | ## 成員 member 50 | 51 | 基本上目前流程還在摸索中,所以採取放牛吃草的狀態。 52 | 活躍成員的話,可以直接看 Gitter room 記錄。 53 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | -------------------------------------------------------------------------------- /images/404.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/f2etw/weekly-collection/9652847d6f847db91a3ceba344b39ff56b31bc38/images/404.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | --- 4 | 5 |
6 |
    7 | {% for post in site.posts limit:100 reversed %} 8 |
  • 9 | 10 |

    11 | {{ post.title }} 12 |

    13 |
    {{ post.date-since }} ~ {{ post.date-until }}
    14 |
  • 15 | {% endfor %} 16 |
17 |
18 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "weekly-collection", 3 | "version": "1.0.0", 4 | "description": "weekly collection of fb.com/groups/f2etw", 5 | "main": "index.js", 6 | "scripts": { 7 | "dev": "npm run jekyllServe & npm run browserSync & wait", 8 | "jekyllServe": "jekyll serve --port 9527", 9 | "browserSync": "browser-sync start --proxy='http://localhost:9527/weekly-collection/' --startPath _site --files='_site/index.html, _site/*.css' --no-notify --reload-delay=1000", 10 | "pullFeeds": "node .weekly-feed/getData/pullFeeds.js", 11 | "calcTop10": "node .weekly-feed/getData/calcTop10.js", 12 | "queryVote": "node .weekly-feed/getData/queryVote.js", 13 | "css": "postcss --no-map -c postcssconfig.json", 14 | "build": "JEKYLL_ENV=production jekyll b && npm run css", 15 | "deploy": "npm run build && gh-pages -d _site", 16 | "test": "echo \"Error: no test specified\" && exit 1" 17 | }, 18 | "repository": { 19 | "type": "git", 20 | "url": "git+https://github.com/f2etw/weekly-collection.git" 21 | }, 22 | "author": "Rplus (https://github.com/Rplus)", 23 | "license": "ISC", 24 | "bugs": { 25 | "url": "https://github.com/f2etw/weekly-collection/issues" 26 | }, 27 | "homepage": "https://github.com/f2etw/weekly-collection#readme", 28 | "devDependencies": { 29 | "autoprefixer": "^6.3.4", 30 | "browser-sync": "^2.11.2", 31 | "css-mqpacker": "^4.0.1", 32 | "gh-pages": "^0.11.0", 33 | "gulp": "^3.9.1", 34 | "jsdom": "^9.3.0", 35 | "mustache": "^2.2.1", 36 | "mz": "^2.4.0", 37 | "postcss-cli": "^2.5.1", 38 | "postcss-csso": "^1.0.1", 39 | "prompt": "^1.0.0", 40 | "request": "^2.72.0", 41 | "yargs": "^4.7.1" 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /postcssconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "use": ["autoprefixer", "css-mqpacker", "postcss-csso"], 3 | "input": "_site/style.css", 4 | "output": "_site/style.css", 5 | "postcss-csso": { 6 | "restructure": true 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /scripts/search.js: -------------------------------------------------------------------------------- 1 | /* global fetch, history, location */ 2 | 3 | var search = { 4 | form: document.querySelector('.Search'), 5 | input: document.querySelector('.Search__input'), 6 | ul: document.querySelector('.SearchLists'), 7 | kwdBuffer: 10 8 | }; 9 | 10 | search.fetchData = () => { 11 | if (!fetch) { 12 | window.alert('We use fetch to get search data.'); 13 | return; 14 | } 15 | 16 | fetch('./scripts/search_data.json') 17 | .then((res) => res.json()) 18 | .then((data) => { 19 | search.data = data.map((week) => { 20 | week.stringify = week.items.map((item) => { 21 | return Object.keys(item).map((itemProp) => item[itemProp]).join(); 22 | }).join(); 23 | return week; 24 | }); 25 | }) 26 | .then(() => { 27 | var urlKwd = location.search.match(/(?:\?q\=)([^&]+)/); 28 | 29 | if (!history.state && urlKwd) { 30 | search.kwd = urlKwd[1]; 31 | search.pushState(); 32 | } 33 | 34 | search.updateState(); 35 | }); 36 | }; 37 | 38 | search.queryKwd = ($kwd, $preventPushState) => { 39 | search.matchedArr = []; 40 | search.kwd = $kwd.replace(/[\\\s\.\*\?\+\(\)\[\]\|]/g, ''); 41 | search.pattern = new RegExp(`(?:.{0,${search.kwdBuffer}})${search.kwd}(?:.{0,${search.kwdBuffer}})`, 'gi'); 42 | 43 | if (!search.kwd || !search.pattern) { return; } 44 | 45 | search.data.forEach((week) => { 46 | var matchedItem = week.stringify.match(search.pattern); 47 | 48 | if (matchedItem) { 49 | search.matchedArr.push({ 50 | week: week, 51 | string: matchedItem 52 | }); 53 | } 54 | }); 55 | 56 | if (!$preventPushState) { 57 | search.pushState(); 58 | } 59 | 60 | search.renderResult(); 61 | }; 62 | 63 | search.pushState = () => { 64 | history.pushState({kwd: search.kwd}, null, `?q=${search.kwd}`); 65 | }; 66 | 67 | search.renderResult = () => { 68 | var html = search.matchedArr.map((item) => { 69 | var pattern = new RegExp(`(${search.kwd})`, 'ig'); 70 | var matchedStr = item.string.map((str) => { 71 | str = str.replace(pattern, `$1`); 72 | return `
${str}
`; 73 | }).join(''); 74 | 75 | return ` 76 |
77 | ${item.week['date-since']} 78 |
79 | ${matchedStr} 80 | `; 81 | }); 82 | 83 | search.ul.innerHTML = html.join(''); 84 | }; 85 | 86 | search.updateState = () => { 87 | if (!history.state) { return; } 88 | 89 | search.queryKwd(history.state.kwd, true); 90 | search.input.value = history.state.kwd; 91 | }; 92 | 93 | search.binding = () => { 94 | search.form.addEventListener('submit', (e) => { 95 | e.preventDefault(); 96 | var searchValue = search.input.value; 97 | 98 | if (searchValue && search.data) { 99 | search.queryKwd(searchValue); 100 | } 101 | }); 102 | 103 | window.addEventListener('popstate', (e) => { 104 | search.updateState(); 105 | }); 106 | }; 107 | 108 | search.init = () => { 109 | search.fetchData(); 110 | search.binding(); 111 | }; 112 | 113 | search.init(); 114 | -------------------------------------------------------------------------------- /scripts/search_data.json: -------------------------------------------------------------------------------- 1 | --- 2 | --- 3 | 4 | [ 5 | {% for post in site.posts %} 6 | {% assign week = site.data[post.date-since] %} 7 | { 8 | "date-since": "{{ post.date-since }}", 9 | "volunteer": "{{ post.volunteer }}", 10 | "post-url": "{{ site.baseurl }}{{ post.url }}", 11 | "title": "{{ post.title | xml_escape }}", 12 | "items": [ 13 | {% for item in week %} 14 | { 15 | "title": "{{ item.title | xml_escape }}", 16 | "url": "{{ item.link | xml_escape }}", 17 | "sharer": "{{ item.sharer-name | xml_escape }}", 18 | "sharer-id": "{{ item.sharer-id }}", 19 | "permalink": "{{ item.permalink | xml_escape }}", 20 | "time": "{{ item.time }}", 21 | "intro": "{{ item.intro | xml_escape }}" 22 | } 23 | {% unless forloop.last %},{% endunless %} 24 | {% endfor %} 25 | ] 26 | } 27 | {% unless forloop.last %},{% endunless %} 28 | {% endfor %} 29 | ] 30 | -------------------------------------------------------------------------------- /search.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: page 3 | title: Search 4 | permalink: /search 5 | --- 6 | 7 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /style.scss: -------------------------------------------------------------------------------- 1 | --- 2 | --- 3 | 4 | @import "vendors/normalize"; 5 | @import "vendors/basscss/basscss"; 6 | @import "vendors/highlights"; 7 | 8 | @import "abstracts/var"; 9 | @import "abstracts/mixin"; 10 | 11 | @import "base/base"; 12 | @import "layout/header"; 13 | @import "layout/footer"; 14 | @import "layout/stick-footer"; 15 | @import "components/card"; 16 | @import "components/nav"; 17 | @import "components/page"; 18 | @import "components/search"; 19 | @import "components/pagination"; 20 | 21 | @import "pages/index"; 22 | @import "pages/tags"; 23 | 24 | @import "base/shame"; 25 | -------------------------------------------------------------------------------- /tags.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: page 3 | title: Tags 4 | permalink: /tags 5 | --- 6 | 7 | 18 | 19 |
20 | 21 | {% for tag in site.tags %} 22 |

23 | ⚓ {{ tag[0] }} 24 | back to top ⤴ 25 |

26 | 27 | 32 | {% endfor %} 33 | --------------------------------------------------------------------------------