一群棒子

一群棒子的技術部落格，紀錄在開發中的做法和踩過的坑。定位是工程師自己的技術筆記，如果你也有遇到相同的問題那麼你並不孤單。

jQuery事件處理技巧：Delay scroll (and resize)

jQuery事件處理技巧：Delay scroll (and resize)

目的： * 優化 jQuery scroll 與 resize 的事件觸發 * 大幅減少重複的代碼，達到效能優化 > 參考文章：delay-scroll-handlers-javascript [https://dannyvankooten.com/delay-scroll-handlers-javascript/] 底下文章皆以 scroll 事件為例： 情境： 我們在開發互動式網站時，通常 scroll 事件都是少不了的，現在很多 UI 的設計都會對 滾動 這個事件進行客制化，畢竟他是使用者與網站最主要的互動。 在程式端，如果你使用是 jQuery 一定都是使用 .scroll() [https://api.jquery.com/scroll/]，來進行事件驅動，如下： $(window).scroll(
3 min read
新手必看 Drupal Module 整理列表
Drupal

新手必看 Drupal Module 整理列表

Drupal Module 整理列表 對於新手來說學習 CMS 架站最困難的點就是：如何挑選模組，以及模組的功用為何，連選擇模組都是一門學問，自己摸索又會浪費大量的時間在踩雷上，不如看看以下整理出來的模組清單，以下這些模組都是個人使用過所整理出來的，個人常使用的模組也會推薦給大家。 又有鑑於突然想找模組卻又忘記模組名稱，又或是有看到好用的模組卻沒記錄起來這件事情感到可惜，特別開此一篇文章來記錄模組的名稱以及功能，希望能幫助到學習 Drupal 的新手，也藉由此機會整理模組。 大綱索引 本文的介紹方式將會以 基本模組-區塊-資料架構-資料呈現-排版-權限-功能增強 這樣的大方向來進行模組分類，也可以點標題的連結找快速跳到你想看的類型。 個人必裝的模組 建立好一個新的 Drupal 站有些模組是必裝的，很多強大的模組都是基於這些模組所開發出來的，這些模組也可以算是核心模組了吧，甚至有些是 Drupal8 也直接納入核心功能。 區塊 (Block) Block 為 Drupal 的功能之一，區塊的好處在於可以到處重複使用，壞處就是權限的控管並沒有很詳細的處理而且他不是 Entity
22 min read
WordPress學習筆記：使用jQuery實做ajax無限捲軸

WordPress學習筆記：使用jQuery實做ajax無限捲軸

目的： 使用jQuery在 WordPress 中實做ajax無限捲軸 參考文章：getting-loopy-ajax-powered-loops-with-jquery-and-wordpress–wp [https://code.tutsplus.com/articles/getting-loopy-ajax-powered-loops-with-jquery-and-wordpress--wp-23232] 一、前製準備： * 在網站版型目錄下新增一個 .php 的 file （此以 loopHandler.php 為此 php 檔案做命名） * 在網站版型目錄下新增一個 js 目錄以存放所需的 js 檔案 * 於 剛新增的
7 min read
初步認識 Drupal Behaviors

初步認識 Drupal Behaviors

前言 作為 Drupal 前端開發者，想必曾發生過，在Drupal 的 Ajax 一旦觸發後，你所撰寫的 Javascript 會對動態的元素，起不了任何作用。 這麼強大的 Drupal 難道沒有辦法解決這個方法嗎？ 其實是有的，Drupal Javascript API 提供了一個方法叫 Behaviors 。接下來小編帶讀者們認識 Drupal Behaviors 的強大之處。 > 為何 Javascript 對動態元素會沒有任何作用，如對這有興趣可以參考這裡的簡單說明 [https://bonze.tw/drupal-ajax-%E5%9F%B7%E8%A1%8C%E5%BE%8C-javascript-%E6%9C%83%E6%
3 min read
使用DcokerHub線上創建一個映像檔
Docker

使用DcokerHub線上創建一個映像檔

問題 前幾偏文章中我們有提到如何編寫dcokerfile，但東西始終在自己電腦中，要如何給其他人一起修改並進化自己的dockerfile?又要如何不佔用自己電腦的空間與資源的情況下擁有自己想要的dcoker image?這個時候DockerHub提供給了我們一個解決的方法。 如何使用DcokerHub來線上創造一個image(映像檔) 首先把自己dockerfile上傳到自己github 點選Create Automated Bulid之後可以選擇github或者bitucket 這邊我使用github，經過權限授權後，DockerHub會掃出自己git中的專案這時候選擇剛剛上傳有dockerfiles的專案。建立好之後，我們會發現並沒自己的dockerfile。這個時候選到Build Settings 因為git有分支，所以這邊他會要確定分支之後，才可以開始Build。這時選好分支按下Trigger後選到Build Details會看到他正在build docker。 等個幾分鐘之後 會看到他顯示打勾 表示完成。這個時候表示他已經build完成，去Doc
2 min read
PHP 如何進行字串切割
Language

PHP 如何進行字串切割

為何需要字串切割 我們在串接 API 時需要將取回的資料進行處理，不過各家廠商開出來的規格都不一定，如果是丟回 JSON 格式還好處理，只需要使用 json_decode [http://php.net/manual/en/function.json-decode.php] 就直接將資料轉成 物件(object) 或是 陣列(array) 可是如果運氣不好一點，回傳回來的資料可能就是純粹的陣列帶字串，看到這種也只能硬著頭皮硬幹下去了，廠商總不可能為了你一個人去改功能吧。 > JSON: JavaScript Object Notation. 是一種純粹的文字資料交換格式。 範例 那麼這個時候我們就只需要使用 PHP explode [http://php.net/manual/en/function.explode.php] 這個 function
2 min read
WordPress NinjaFirewall 外掛刪除導致無法上傳檔案
WordPress

WordPress NinjaFirewall 外掛刪除導致無法上傳檔案

案發現場 今早起床時突然看到了一位棒子傳來的訊息欸 圖片不能上傳阿 HTTP 錯誤真的是讓人睡意全消阿，待著忐忑不安的心情只好上班去，我記得我沒有做什麼事情阿 下班時終於可以好好的來處理這個問題，首先先來看看 還真的壞了…. 等等…這傢伙怎麼有點眼熟，這不是我兩天前停用的外掛嗎!!為了驗證是他的問題，所以我將外掛裝了回來，回復預設值之後果不其然的正常運作了。為了解決此問題立馬查了一下外掛官方的 FAQ [https://nintechnet.com/ninjafirewall/wp-edition/help/] 一瞧 > To uninstall NinjaFirewall: 1. Log in to your administration console, click on the “Plugins” menu and deactivate the NinjaFirewall. 2. Click “Delete” to
2 min read
使用 node.js 建構 TCP Server
Language

使用 node.js 建構 TCP Server

目的： * 使用 node.js 建構簡單的 TCP server * 藉由建制的過程初步運作與了解 TCP 所謂的 “三次握手” TCP 傳輸協定： 概述： 傳輸控制協定（英語：Transmission Control Protocol，縮寫為 TCP），是一種連接導向的、可靠的、基於位元組流的傳輸層通訊協定 運作方式 : TCP用三路握手（three-way handshake）過程建立一個連線。 如圖示，分為三個階段： * 第一階段：client端 向 server端 請求連線 * 第二階段：server端 向 client端 回應，告知 server 端 可以開始 傳輸資料 * 第三階段：client端 開始向
4 min read
Language

Javascripts JSON.Stringify() 與 JSON.Pares()

什麼是 JSON : JSON 是個以純文字為基底去儲存和傳送簡單結構資料，你可以透過特定的格式去儲存任何資料(字串,數字,陣列,物件)，也可以透過物件或陣列來傳送較複雜的資料。一旦建立了您的 JSON 資料，就可以非常簡單的跟其他程式溝通或交換資料，因為 JSON 就只是純文字個格式 JSON.Stringify() 與 JSON.Pares() : 上述的 JSON 是一個型別（Type），是一個 Array Type。我們不能儲存或傳送「Type」，所以要將 Type 轉成字串（String）後，才能儲存或傳送。 例如，對電腦來說，這是一個物件（Object）： { "name": "Roxas" } 這個物件轉成字串： "{ "
1 min read
WordPress 中 is_home() 與 is_front_page() 的差異
WordPress

WordPress 中 is_home() 與 is_front_page() 的差異

當我們在開發自己的 theme 時，常需要針對判斷當前頁面是否為首頁，這件事情來做相對應的判斷，舉個例子 <body class ="<?php is_home() ? print 'front' : print 'not-front'; ?>"> //balabala </body> 判斷當前是否為首頁並在 body 的元素上給上想要的 class 方便我們寫 CSS 樣式，可是設定為首頁卻得到 not-front 實在讓人疑問，難道是 BUG 嗎 > 在這裡使用 PHP if() 條件式的簡寫 可以參考PHP:
2 min read
WordPress

【WordPress筆記】 利用shortcode 的方式將指定的post type 文章顯示在頁面中

前言 當WordPress頁面都是用shortcode疊出來的時候，你的文章(post)也是需要變成shortcode的情況下才有辦法將它卡到頁面的某個地方，以下方式可以將你的文章(post)轉成shortcode的方式，讓你在頁面中可以方便的調用它！！ 以下範例code，可以寫至theme目錄下的functions.php中 function home_post_listing_shortcode( $atts ) { ob_start(); <!--將query 到的資料存到$query--> $query = new WP_Query( array( 'post_type' => 'post', <!--post_type輸入你想要抓取的文章類型--> 'posts_per_page' => 3, <
2 min read
Drupal FAPI drupal_array_set_nested_value 錯誤
Drupal

Drupal FAPI drupal_array_set_nested_value 錯誤

情境 有時候我們總需要使用 hook_form_alter [https://api.drupal.org/api/drupal/modules%21system%21system.api.php/function/hook_form_alter/7.x] 將現有的 form elements 進行一些改變或是增加欄位 ，所以我新增了一個自訂的 AJAX 讓它 return 一個 from 給我，可是只要當前頁面 return 兩次以上，或是當前的 form 有錯誤並且再按送出就會有以下的錯誤 Warning：Illegal string offset 'und' at drupal_array_set_
2 min read
CMS

Drupal Ajax 執行後 Javascript 會沒反應

前言 當你在寫 Drupal 前台的 Javascript 時， 可能曾發生過當頁面有 Ajax 時，會導致你所撰寫的 Javascript code 會完全無效。會有這種情況，其實是因為當頁面部分元素被 Ajax 修改後，你所撰寫好的程式碼並不會動態的重新抓取更新過後的元素，這是一件令人頭痛的事啊。不過也別覺得這東西是無解，小編這裡有三個方法提供給各位，讓你們再也沒煩惱。 方法一：Drupal behavior 這是 Drupal 提供給前端開發者和模組開發者的 API 每當 Drupal Ajax 被執行後， 會把開發者所撰寫好的 Javascript 再重新讀取一次。如果你對這個東西很陌生的話，可以來參考這篇 [https://www.lullabot.com/articles/understanding-javascript-behaviors-in-drupal] ，他非常詳細的告訴你 behavior
1 min read
Language

python 簡易爬蟲筆記

目標 ： 存取指定網頁的 element 的 value 為 json ， 並將其匯出成 json 檔案 Step 1 安裝套件： 使用 pip3 安裝下列套件 requests ： > python 用來處理一般 service 請求的套件，相關資訊可查看 requests 快速上手 [http://docs.python-requests.org/zh_CN/latest/user/quickstart.html] 安裝 : $ pip3 install requests beautifulsoup4 ： > Beautiful Soup 是一个可以从 HTML 或 XML 文件中提取数据的 Python
2 min read
使用 Microsoft LUIS 串接聊天機器人語意分析
chatbot

使用 Microsoft LUIS 串接聊天機器人語意分析

Microsoft LUIS [https://www.microsoft.com/cognitive-services/en-us/language-understanding-intelligent-service-luis] Microsoft LUIS 是什麼呢?就是 Language Understanding Intelligent Service 簡單來說就是語意分析 那我為何會推薦這套服務呢?其實小編今天有小小的試用了一下，真的讓人驚豔，尤其是後台操作真的是很簡單在來就是跟 Microsoft Bot Framework 整合得很好看來微軟真的是有意吃下這塊大餅 But…聊天機器人到底還能紅多久?蘋果手機都已經有 Siri 了可以直接講話誰還會跟你打字阿。 #chatbot
1 min read
HybridAuth Social Login Facebook 登入又壞啦
Facebook

HybridAuth Social Login Facebook 登入又壞啦

案發經過 HybridAuth Social Login [https://www.drupal.org/project/hybridauth] FB 登入又壞啦，真的我也是醉了，之前遇到 HTTPS 登入失效這次是沒有 HTTPS 的網站也壞了，立馬去查模組 Issues 果然也是有人遇到相同的問題 解法 阿反正去打一下 Patch 去更新一下 Library 就好了大家也都是這樣所以他被 Closed (fixed) 理所當然我也照做了，裝 dev 版本用最新的 Library 豈料最新的 Library 有問題阿，模組直接噴錯給你看 結論 吃我的 Simple FB Connect [https://www.drupal.org/project/simple_fb_
1 min read
Language

python 3 新手筆記（一）

Ubuntu 安裝 python 3： > ( 更新 : Ubuntu 13.04 版本起, 已有預載 Python 3 , 不用自已安裝了, 使用 python3 指令就可以了。) Ubuntu 11.10 版預載的 Python 是 2.7.x 版，使用下方指令升級： sudo apt-get install python3-all 必裝的 python 套件： pip (軟體包管理系統)： > pip是一個以Python電腦程式語言寫成的軟體包管理系統，他可以安裝和管理軟體包，另外不少的軟體包也可以在「Python軟體包索引」（英語：Python Package Index，簡稱PyPI） 安裝指令：
2 min read
瀏覽器相容性檢測工具
檢測工具

瀏覽器相容性檢測工具

拜託IE瀏覽器快消失吧 最近找了兩個測試網站來檢視 IE 瀏覽器的相容性，結果真是差的可以阿。 > 自 2016 年 1 月 12 日起，只有受支援作業系統可用的最新版 Internet Explorer 可得到技術支援和安全性更新。Internet Explorer 11 是最新版的 Internet Explorer，其將在 Windows 7、Windows 8.1 和 Windows 10 上獲得安全性更新、相容性修正程式和技術支援。 不知道還要多久 IE 瀏覽器才可以正式的從網路世界消失 HTML5 TEST [https://html5test.com/index.html] THE CSS3 TEST [http://css3test.com/
1 min read
WordPress

如何利用 FB2WP integration tools 讓粉絲團發文同步至我們的網站上（2018/03/07更新）

FB2WP integration tools 今天來介紹 FB2WP integration tools [https://tw.wordpress.org/plugins/fb2wp-integration-tools/] 這個外掛，它可以幫我們在粉絲專頁發文之後，Facebook 自動的幫我們把資料送回網站上並且發佈這篇文章，簡單來說就是粉絲團發文會順便送給 WordPress 將文章儲存，講到這裡你是不是覺得很興奮呢？想想有多少的小編只要專心在粉絲團上面操作就好，剩下的交給程式幫我們搬到網站上，聽起來真的是懶人的一大福音阿。 我需要什麼？ 那我們會需要什麼呢？ 我們會需要 * 一個 HTTPS 的網址 * 一個 Facebook 應用程式 * 一個粉絲專頁 在這之前你的網站必須要是 HTTPS 因為 Facebook 的 App Messenger, Webhooks 的回呼網址 需要 HTTPS 如果你的網站還不是 HTTPS 的話可以參考使用
7 min read
Language

jQuery plugin scrollClass

github :link連結 [https://github.com/SkyRoxas/scrollClass] Description : 滾動事件發生時對當前畫面指定的元素加入對應的Class Options : NametypedefaultdescriptionclassNamestringnull指定需要加入的 class 名稱 （必填）delaynumber0 延遲加入class的時間 單位：微秒incrementBollinfalse延遲時間是否遞增Example : Basic $('.article-wrapper.avatar').scrollClass({ 'className': 'animate_right', }) Basic Options $('.article-wrapper.avatar').scrollClass({ 'className': 'animate_right', 'delay'
1 min read
Language

jQuery Plugin scrollState 滾動狀態bar

github :link連結 [https://github.com/SkyRoxas/scrollState] Description : 於頁面上方加入物件來顯示頁面滾動軸的進度，以增加使用者體驗 Options : Nametypedefaultdescriptioncolorstring‘#4A8CB4’物件顏色boldstring‘4px’物件粗細indexstring ‘100’物件 z-index 屬性 值transitionstring‘1s’物件 transition 屬性 值 （過度時間）Example : Basic $('body').scrollState(); Basic Options $('body').scrollState({ 'color' : "#FF0000", 'bold' : '
1 min read