跳到主要內容

發表文章

[JS] line 分享

大家好,我是奶綠茶 在網頁想要做 line 分享 // desktop // 可以帶 url // 帶 text (有字數長度限制) window.open(`https://lineit.line.me/share/ui?url=${encodeURIComponent(url)}&text=${encodeURIComponent(text)}`); // mobile // 只有 text ,但可以把網址帶入文字,他會自已解悉 window.open(`line://msg/text/${encodeURIComponent(text)}`, '_blank'); // 第三種方法, 桌手機都支援,但有些問題 // 手機在 line, FB webview ,一樣可以分享,但網頁會被轉到 "請啟動 LINE 應用程式,使用者就會跳離現在的網頁 // 而在桌機會遇到如果分享的網址和你目前所在的網址 domain 不同 // 分享文章裡就會自動帶出目前所在的網址 // 如果 domain 相同,但在文字裡又加入了想要分享的網址 // 最終分享出去就會出相兩個網同的網址(有些人,有些人不會,Why?) window.open(`http://line.me/R/msg/text/?${encodeURIComponent(this.url)}`);
最近的文章

aliases in Window command

大家好,我是奶綠茶 身為前端,每天最常打的指令就是 npm run start npm run build npm run 什麼的 在 Mac 可以方便的將指令設定別名縮寫 那 PC 上呢 ? 可以用 doskey ns=npm run start 但每次啟動 cmd 都要重新設定 可以透過以下方法整合到 vsCode 設定你的 ailases 奶綠我將檔案放在 E:\aliases.cmd @echo off doskey n=npm run $* doskey ns=npm run start doskey nb=npm run build doskey s=npm run start doskey b=npm run build 開啟 vsCode Settings.json, 加入以下設定 "terminal.integrated.shellArgs.windows": [ "/k", "e:\\aliases.cmd" ] 好了,這樣每次開啟 terminal 就可以有縮寫功能 轉載請註明出處

超好用的無限免費網頁空間,無廣告,無流量限制

大家好,我是奶綠茶 今天來教大家如何申請一個無限免費速度又快的網頁空間 1 首先到  https://github.com/ 申請帳號(一直下一步,下一步,下一步) 2 到你的個人頁,切換上方的 tab 到 Repositories, 按下右鍵的 new 3 Repository name 一定要是這樣的格式 username.github.io 我的 github 網址是 github.com/milkmidi 那就要輸入 milkmidi.github.io 選擇 public, 這樣別人才看的到 private 有其他用途, 而且要付費才能使用 完成後按下 Create repository 5 安裝 SourceTree github 並不支援 FTP 或是網頁上傳,一定要透過指令碼 在這我們選用有圖型介面的軟體,方便大家學習 https://www.sourcetreeapp.com/ 下載並安裝 啟動後登入你的 github 帳號 6 clone 你的 github io 專案 右上角有個 Clone or download 點選後 複製 https 連結(不要選到 ssh ) 7 將 https 的連結貼到 SourceTree 8 上傳 html 到本機 github.io 資料夾,放一個 index.html 切換到 SourceTree, 這時會看到 Unstaged files 的欄位 選擇 Stage All 9 git 要求每次的 Commit, 都一定要打說明文字(好習慣) 輸入完成後,按下右邊的 Commit 10 發佈(Push),這樣就完成啦 可以到你的 http://milkmidi.github.io/ 去查看檔案有沒有出來 其他 Commit 可以想像是做一個記錄,你可以很多的 Commit 最後再一次 Push 上去 github 原本是給程式設計師用的版本控管服務 免費版提供無限空間讓你放檔案,但一定要是 public 想要有私有的 Project ,就只能付費 github.io 只能放靜態檔案,php, aspx 服務並不支援。 祝大家學習愉快 轉載請註明出處 奶綠的 github.io S

mac backspace char ASCII 08

大家好,我是奶綠茶 最近在 mac 上踩到一個雷 不知道在什麼情況下,文字會多出一個 backspace 元字 在 PC 上會出現一個黑圓點 偏偏 VSCode 預設是不會顯示( Sublime 會出現白底黑字的BS標示) 然後被包在 JS 裡的字串,一切就爆掉了。 解法 VSCode 在 View / Toggle Control Character 這樣該字元就會顯示一個小字的 BS

gulp 前端自動化 - spritesheet

大家好,我是奶綠茶 今天來介紹如何使用 gulp 來自動化將圖片拼成 spritesheet 奶綠我使用的套件是 gulp.spritesmith https://www.npmjs.com/package/gulp.spritesmith 可以使用 handlebars 格式,拼出自己想要的 css 格式 {{#sprites}} .{{name}} { background-position: {{px.offset_x}} {{px.offset_y}}; width: {{px.width}}; height: {{px.height}}; background-image: url({{{escaped_image}}}); } {{/sprites}} gulp 的設定 gulp.task('sprite',()=>{ console.log('sprite'); const spriteData = gulp.src('src/sprite_src/*') .pipe(spritesmith({ imgName: '../img/sprite.png', cssName: '_sprite.css', padding: 4, imgOpts: { quality: 100 }, cssTemplate: 'src/css/handlebars/basic.handlebars', })); const imgStream = spriteData.img .pipe(buffer()) .pipe(gulp.dest('dist/img/')); const cssStream = spriteData.css .pipe(gulp.dest('src/css')); return merge(imgStream, cssStre

2017 線上讀書會- vuex 跟 webpack 與 架構範本

分享一下奶綠我在 2017 02 線上讀書會 主講 vuex , webpack 的影片 轉載請註明出處 Github Source Code

webpack2 入門實戰 3 scss,html,file-loader

大家好,我是奶綠茶 上一篇 介紹了 webpack 的核心功能 loader 這篇再來補強各種常用的 loader css-loader:解悉 css 檔 extract-loader:這個有點難翻,下面會介紹 file-loader:存成實體的檔案, 如圖片 html-loader:解悉 html 檔 sass-loader:解悉 scss 檔 url-loader:解悉圖片路徑 webpack.config.js module.exports = { resolveLoader: { // 所有用到的 loader, -loader 可以不用打 moduleExtensions: [ "-loader" ], }, resolve: { // 在 require 檔案, 如果不想寫完整的路徑 // 可以加入這些目錄, 讓 webpack 自動尋找對的檔案 // 請注意我們加入了 src/img 路徑,後面會再介紹到 modules: [ path.resolve( 'src/html' ), path.resolve( 'src/img' ), path.resolve( 'src/css' ), path.resolve( 'src/js' ), path.resolve( "node_modules"), ], // 在 require 時可以不用打副檔名 extensions: [ ".js", ".scss" ] }, } 再來就是 loader 的介紹 scss 在這要做多組合的應用 先將 .scss 透過 scss-loader 轉換, 並產生 sourceMap 檔 再過 css-loader 最後再過 style-loader { test: /\.scss$/, // 多個