一群棒子

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

Language

Zen grid 2.0 基本用法 for drupal

前言 這是以drupal 為開發環境,使用zen grid 的 東西,寫下這篇是為了讓未來的我忘記時,能有東西可以參考,不想浪費太多時間~ Zen grid 基本 mixin 介紹 1. zen-grid-container() 這個mixin 就像是 bootstrap 或是 flexboxgrid 的 row 一樣的概念。 當你要宣告 columns 時,它們的父元素必須使用此 mixin。 如果你對 bootstrap [http://getbootstrap.com/css/] 和 flexboxgrid [http://flexboxgrid.com/] 這些知名的css framework 不熟 , 其實你們可以去玩玩看,對你們會很有幫助。 2. zen-grid-item-base() 使用預設的 gutters
4 min read
Language

2種方式讓header的高度跟著瀏覽器的高度顯示

利用css 的方式 #header { height: 100vh; /* 高度100vh header高度就會跟著瀏覽器視窗高度去顯示囉 */ background-color:#000; } 利用 jQuery 的方式 //利用jQuery抓取視窗高度再將取到的高度賦予#header 的height function setHeiHeight() { $('#header').css({ height: $(window).height() + 'px' }); } // 加載頁面時執行上面定義的function setHeiHeight(); // 當拖動視窗時jQuery 也會隨著視窗拖動去執行resize function讓header高度一直跟瀏覽器高度一直保持同步狀態 $(window).resize( setHeiHeight ); }
Language

利用CSS3 Multiple Backgrounds 實現多背景效果

目的: 解決設計圖背景複雜的設計時可以使用CSS3 Multiple Backgrounds的方式去處理 案例 設計圖左右各有兩條虛線時可使用兩張不同的背景圖 <!DOCTYPE html> <html> <head> <style> #example1 { background: url(left_line.png) left center no-repeat, url(left_right.png) right center no-repeat; //利用【逗號】的方式區分他是屬於第幾個背景圖,並且給予不同的位置設定一個靠左置中、一個靠右置中 } </style> </head> <body> <
1 min read
Language

PHP OOP編程的觀念心得筆記

前言 最近幾年程式語言的 framework 進步真的是飛快,像是最近很火紅的 Vue.js、ReactJS、或是老牌的 Laravel等,而在 PHP 的 framework 當中又以 Laravel 最受開發者青睞,在開始學習 Laravel 之前必須先學習什麼是 OOP (物件導向程式設計 Object-oriented programming) 物件導向並非是有特定的程式規格,就以我個人的觀感理解比較可以說是他是一種 設計模式比較恰當,在學習的過程中只要一直圍繞著他的中心思想,想必在學習上會較為輕鬆。 說這麼多不如直接殺 code 會比較有感覺,在拜讀過 O’reilly現代PHP 之後其中一句話讓人印象深刻意思大概是這樣: > 你不需要現在就立馬實踐物件導向設計風格,你只需要將他記在你的腦袋中,直到有一天你豁然開朗的將他應用在你的程式代碼上。 對於像我這樣的新手來說要立馬用上可能有點困難,所以才寫下此篇筆記以供未來參考。 物件導向 命名 通常我們的檔名會與class同名 類別 在英文中又稱 class 在 OOP
2 min read
WordPress 學習筆記 :文章列表加入 even 與 odd 的class
WordPress

WordPress 學習筆記 :文章列表加入 even 與 odd 的class

目的: 為文章列表項目以基數偶數區分加入 odd 與 even 的 class 已達到更客製化的前端效果 1、使用函數: WP_Query 裡的 $current_post 屬性: 取於wordpress官方屬性說明: > (available during The Loop) Index of the post currently being displayed. 直接翻譯來說就是顯示於迴圈內的文章索引,從 0 開始 1、2、3、4、5、6、7…..照順序排列 2、於 have_posts() 迴圈裡使用 $current_post 屬性進行運算 於
1 min read
WordPress

WordPress 學習筆記 : 文章摘要 the_excerpt()

excerpt (摘要) <?php the_excerpt(); ?> 使用方式如同 //文章標題 <?php the_title?> //文章內文 <?php the_content?> > 另外如果沒有使用 wordpress 預設的 文章摘要 區塊,則會直接擷取文章內容的文字使用 修改文章摘要後綴文字 wordpress the_excerpt() 原生摘要後綴為 […] 的方式顯示,如果要更改後綴文字方式: 在 function.php 檔案裡建立一個 function <?php function excerpt_more-example(){ return "read_more"; } ?>
1 min read
JavaScript

JavaScript 何謂物件原型 (prototype)

何謂物件原型 (prototype) 每個 JavaScript 物件都會有 第二個 JavaScript 的物件與之關聯,而這個第二個的 JavaScript 物件就被稱呼為 “物件原型” > 而第一個物件就是從這個原型來繼承特性 參考方式: JavaScript 中我們使用下列方式來參考原型物件 Object.prototype 且像是 ECMADscript 定義的 Native(原生)物件:Object() 、 Date() 、 Array() … 也都具有著 prototype 的原型物件 而當我們使用 new 與 建構式(constructor) 所產生的新物件: new Date(); 其原型就為 建構式(constructor) 的 prototype 特性,也就是: Date.prototype 另外一提: Object.
1 min read
gulp

前端自動化:Gulp 學習路程

本篇目標: * 初步認識 Gulp (安裝與使用) * 建立前端自動化安裝環境 * 自訂屬於自己的 Gulp 開發環境 初步認識 Gulp: Gulp 為 Node.js 的套件,可以自訂屬於自己的前端自動化環境,簡單點說可以幫你一次解決: * Sass、Less 自動編譯為 Css * 自動加入 “瀏覽器前綴” 給你的 Css 屬性 * 自動幫你編譯 Jade 為 Html * 壓縮圖片 * 打包壓縮 CSS 與 JS * 瀏覽器自動重新整理 * ….. 以上這些可能已經能省下許多 開發前、開發中、開發後 時特別需要留意花時間的動作 > 凡事需要做兩次以上的事物,都可以有自動化的價值 讓我們繼續往下看~~ 安裝 Gulp 環境: > gulp
5 min read
jQuery

jQuery 取得 Dom 元素座標 - Offset() 與 Position()

前言: 當你是透過你所收尋的關鍵字找到這篇文章的同時,恭喜~你已經找到了答案的關鍵 ! 你需要藉由 Dom 元素 的 座標 來判斷說你指定的 Dom 元素 存在於畫面的哪個位置,來完成你開發上的應用。 > * 假設如上述所言~請放心繼續往下閱讀 * 如果你只是剛好逛到~也可以繼續往下看 座標 在前台有許多的地方會被使用到~一定對你有幫助 一、調用方式: 1.取得目標 x 與 y 舳之座標: 程式碼: $('element').Offset(); Google Chrome consoleLog 結果: Object {top: 780, left: 30} 結果呈現出: > * top:為指定元素的 y 軸的座標;
2 min read
Html

html input標籤的disabled屬性與readonly屬性

最近在製作webform表單時,我要做到讓一個input標籤裡的value的值,禁止讓客戶自行更改的input欄位! 像圖所示的效果! (此value是無法做修改的) 原先我是使用disabled的屬性來達成我想要的效果! <input disabled="value"> 但會導致一個很嚴重的問題 使用disabled屬性的input裡的value會無法被傳值出去,也就是在這個表單資料送出去時,這個input裡的value傳出去會變成空白 因為disabled的屬性已經整個禁用了此input的元素,所以完全無法抓去到此元素的value 後面才驚覺必須要使用readonly的屬性 <input readonly="value"> 這屬性就只是單純的使使用者只可看到input元素的value,無法自行修改,不會造成傳值方面上的問題 disabled:當 input 元素加载时禁用此元素。 readonly:规定输入字段為可讀不能寫。
1 min read
SASS

使用sass mixin來開發responsive網站

前言 RWD為響應式網站(Responsive Web Design)的縮寫,為2012年以來,最流行的前端技術之一,通過CSS3的Media Query,可以讓網頁在不同尺寸的裝置下,都可以套用不一樣的CSS Style,讓每個不同裝置同樣瀏覽網頁,都可以用最佳的畫面 來瀏覽。而為了要開發RWD的網頁與簡化撰寫CSS流程,進而有了SASS、LESS等工具來協助開發,但是難免開發久了,不免都還是會覺得又臭又長。利用SASS的Mixin功能,搭配本篇特殊結構,可以讓開發模板的時間更為簡潔。 傳統media queries寫法: //電腦版 @media all and (min-width: 960px) { .div1{ padding:20px; } .div2{ margin:20px; } } //平板 @media all and (min-width: 760px) and (max-width: 959px) { .div1{
4 min read
Language

jQuery控制Dom元素

前言 CMS系統(drupal,joomla,wordpress…)在網站開發上,與傳統的開發上有著極大的差異,html架構並不是單純就前端這邊來刻出自己想要的html架構,絕大部分是由後端php產生出來的! 如果你剛好跟小弟一樣!是從CMS開始進入到網頁前端(web frontend)這個大家庭,那你一定要參考這篇文章,可以讓你不會像過去的我走上許多CSS亂拼亂湊的冤妄路!! jQuery 再開始說明之前,你必須要先知道jQuery [https://jquery.com/](一套跨瀏覽器的JavaScript函式庫,簡化HTML與 JavaScript [https://developer.mozilla.org/zh-TW/docs/Web/JavaScript] 之間的操作)他是此篇文章的主角和關鍵! 另外假設你與我當時一樣對jQuery與javascript完全無知卻想立刻得到成果的門外漢也可以繼續往下看!可以從下面簡單且實用的jQuery對html物件操作的應用!來慢慢深入jQuery與javascript相心會對你前台開發上會有不錯的幫助! 正篇開始~ 以此架構為例
7 min read

ubuntu 16.04修改網路卡名稱

前言 如果你最近有重灌伺服器,作業系統灌ubuntu16.04灌完之後,只要設定好IP能連上網路就可以在遠端直接ssh進行設定,可是人生就是這個”可是”網路卡設定怎樣就是up不起來…..原來!! ubuntu16.04與ubuntu14.04在網路卡的命名方式上有很大的差別,如果剛從14跳到16在設定靜態IP會一直出現找不到裝置的錯誤訊息,原來命名方式更改了所以才一直找不到,藉此寫下筆記以免日後忘記。 更改回14版的命名方式 修改grub的檔案 sudo nano /etc/default/grub 並將參數更改如下: GRUB_CMDLINE_LINUX="net.ifnames=0 biosdevname=0" 重新產生grub設定檔 sudo grub-mkconfig -o /boot/grub/grub.cfg 以上設定完成之後就可以重新開機囉。 設定靜態IP 這裡就自行設定IP了 sudo nano /etc/network/interfaces 設定完成之後啟用網路卡
1 min read

如何使用ssh私鑰訪問伺服器

前言 有時候你是否會覺得每次登入都要打密碼其實是很麻煩的事情,而且密碼也是有機會被暴力破解的可能性。 SSH是如何運作? 簡單來說系統會產生出一對經過加密的”鑰使”與”鎖頭”,只有持有鑰使的人才可以打開該鎖頭,進而防止密碼被暴力破解這回事。 如何設定? 首先我們先在伺服器上產生一組ssh key給我們 ssh-keygen -f myserver > -f 這個參數是將檔案命名成我們想要的名子”myserver” 接者系統會問你檔案生成的路徑以及密碼我們都只要enter就好 此時系統就會幫我們產生一組公鑰以及私鑰,接著我們將公鑰加入authorized_keys這個檔案應該會在你的家目錄底下如果沒有的話我們就自己產生一個。 cd ~/.ssh touch authorized_keys cat myserver.pub >> authorized_keys 如此一來我們就將公鑰加入authorized_keys了,接著我們就可以將私鑰存回自己的電腦囉。 > 將私鑰存回自己電腦我自己是直接打開檔案複製貼上比較快(笑 嘗試一下 ssh -i /path/to/
1 min read

你的git專案不小心commit了別人的git該怎麼辦

前言 git是一項非常好用的版本控制工具,可是其背後的運作原理可是複雜得很,要如何用的好又是一門學問了。 有時候我們git化一個專案的時候,很有可能你使用的一些模組、library已經有被版本控制了,這個時候我們將整個資料夾git化之後很開心的就推上了自己的git repository去了 會發生什麼事情? 當你的同事將git專案clone下來之後繼續工作,直到他發現了某個重要的資料夾消失了,這位可憐的同事一頭霧水的開始去找git repository發現那個資料夾內根本是空的!!最後才發現自己的專案內還有另一個git存在 為何會這樣? 首先你必須要知道git的 子模組 (Submodules) 以下我引述git的文件 > 這裡有一個例子。假設你在開發一個網站,並提供 Atom 訂閱(Atom feeds)。你不想自己編寫產生 Atom 的程式,而是決定使用一個 Library。你可能必須從 CPAN install 或者 Ruby gem 之類的共用庫(shared library)將那段程式 include 進來,或者將原始程式碼複製到你的專案樹中。如果採用包含程式庫的辦法
2 min read
drush

如何在bluehost上安裝composer與drush

在基本的bluehost環境之下應該是沒有apt-get或是yum的指令 安裝套件並不是如此的容易 你可能遇到的問題 * bluehost環境之下我要怎麼安裝composer * 為什麼我打composer都是command not found 核心重點 * 讓shell認識composer * 安裝完composer再用composer安裝drush * 在讓shell認識drush 教學步驟 首先我們假設你已經順利的安裝完php了並且可以用command執行php 如果你執行PHP出現command not found的話先執行以下步驟 先去編輯你的.bashrc他的位置應該會在~/.bashrc 並且加上這段code alias php='/usr/php/56/bin/php' > * 這邊要注意的是你PHP安裝的位置以及版本未必會跟我相同所以這裡路徑要請自己替換一下 因為我們新增了一個alias所以我們必須要讓shell重新的掃描一次指令如下: source ~/.bashrc 如此一來shell就會認得php這個指令了 接著讓我們下載com
2 min read

.htaccess改寫你的網址

前言 通常我們都會在網址上將網頁的副檔名隱藏,一來美觀、二來簡潔這個時候我們就會需要使用到網址rewrite的功能 這個功能如果你的web server是用apache的話記得要將rewrite模組打開 linux : a2enmod rewrite 接者在你的根目錄底下新增一個.htaccess檔案加入以下code就可以隱藏檔案副檔名了 RewriteEngine On RewriteCond %{REQUEST_FILENAME} !-f RewriteRule ^([^/]+)/$ $1.php RewriteRule ^([^/]+)/([^/]+)/$ /$1/$2.php RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQUEST_URI} !(\.[a-zA-Z0-9]{1,5}|/)$ RewriteRule (.*)$ /$1/ [R=301,L] 參考資料 How to remove .php, .html, .htm
1 min read

PHP筆記

PHP結構 要倒出object要使用 var_dump($object); print_f($object); 雙引號內會對變數進行解析而單引號不會 $dbname="phpguestbook"; $sql="SHOW DATABASES LIKE '$dbname'"; var_dump($mysql->query($sql)); 變數遞增與遞減 //先遞增x在進行判別式 if (++$x == 10) { echo "$x"; } //判別式完成之後在遞增 if ($x++ == 10) { echo "$x"; } -------------------------------------------------------------------------------- PHP函式 include & require
1 min read
CMS

UX/UI系列:Drupal 快速權限管理(Fast Permissions Administration),讓你跟簡陋的權限管理說再見!

前言 身為一個工程師,對於一些權限的管理,總會特別重視,但是drupal預設的權限管理介面,不禁令人感到簡陋,並且並不好管理。如果對預設的管理權限感到不滿,來試試看”Fast Permissions Administration”吧。 介紹 Fast Permissions Administration(fpa)這個模組在改善drupal權限設定的問題,提供drupal權限設定時有更好的界面。 安裝 在drupal.org [https://www.drupal.org]的Modules中找到Fast Permissions Administration [https://www.drupal.org/project/fpa] 找到下方穩定版,複製連結網址。 在drupal安裝模組中,貼上連結網址並安裝。 啟用模組。 或者直接使用drush安裝 drush en fpa 使用 點開”使用者”裡面的”權限”
2 min read
CMS

UX/UI系列:Drupal必裝模組之一『Administration menu』,讓您享受便利、快速的管理者操作選單!

前言 身為一個工程師帶給客戶便利就是就是帶給自己便利,『Administration menu』可以讓您在使用drupal管理者選單時省去多餘的步驟,直接到您想要進入的設定中,此模組安裝完開啟之後便可直接使用,非常方便,讓我們來看看怎麼操作吧! 安裝模組 首先我們先到Administration menu [https://www.drupal.org/project/admin_menu] 去安裝此模組。 step1:複製模組連結 step2:接著到Home » Administration » Modules貼上連結,並按下install step3:完成之後開啟相關模組及關閉drupal原生的menu設定 開啟相關模組: 關閉drupal原生模組: 以上步驟完成之後相信您已經可以看到有什麼地方不一樣拉~ drupal預設: 使用Administration menu後 結語 看完以上教學之後希望大家都可以自己動手試試~安裝自己的第一個Administration menu。 使用過後都會說:瑞凡:我們回不去了~~
2 min read
CMS

UX/UI系列:網站拉皮術,跟簡陋的下拉選單說再見!

前言 你是否有時覺得Drupal後台某些功能看起來就是醜醜的,用起來也並不是那麼的直覺,給自己使用就還好如果是給客戶使用總會希望給予更好的使用體驗,今天要介紹一個我們常常在使用的模組:Chosen,這個模組使用jQuery讓你的下拉式選單更加的美觀以及方便使用,讓我們看看他可以做到哪些事情吧。 簡介 Chosen模組使用了jQuery套件讓我們的下拉式選單更美化更好用,安裝上只需要模組以及放入libraries [http://harvesthq.github.io/chosen/],在後台選擇啟用就可以看到效果囉。 使用教學 首先我們先安裝chosen模組 你可以使用drush幫你放好libraries 或是手動放入libraries 以下我們使用drush示範 drush en chosen drush chosenplugin 當你安裝好後可以在設定/使用者界面/chosen看到一些預設的設定 你也可以在欄位的設定選擇是否啟用chosen 預設是No preference如果要啟用我們選擇Apply即可 以下就是啟用之後的差別囉 未啟用
2 min read