Tagged

Language

程式語言相關

Language

Nuxt.js SSR記憶體溢出

最近公司的產品在伺服器經常遇到當有大量的請求時，伺服器記憶體的使用量會急遽的往上提升。以正常的GC運作方式，理論上經過一段時間後，這些資源應該要立即收回，但卻發現並不是這一回事，導致伺服器經常當機。這個問題困擾了我們對於整個產品的後續維護，因此我開始著手進行問題排除，經過排除後有幾點想將它記錄下來，以免在花同樣的時間除錯。 禁止在伺服器寫下這些程式 setInterval and setTimeout 記住別在伺服器上寫下event loop，因為你沒有機會在任何地方可以取消它們，儘管你知道要取消，因為在Nuxt SSR的hook中，並沒有提供這樣的鉤子讓你解除。 在beforeMount之前所有的鉤子都會在Nuxt SSR執行，但很可惜的是之後所以的hook(destroyed)這類的，都不會在伺服器端執行，這意味著你只能做一次性的程式碼執行。 請確認插件是否必須在伺服器上運行 請確認你想要裝的插件是真的必須在伺服器做完在交給客戶端嗎？有些套件其實是可以交給客戶端自行處理的，比如像是bootstrap-vue，如果你將它放在伺服器端處理，這意味著它會在伺服器中運行，並且常駐在記憶體中。 必須確認arrow function是否有影響到global 請確保this不要指向到global，否則只要node的程式不關閉，你的程式碼將會常駐於記憶體中。
a65162 • 2 min read
響應式網站-不可缺少的Veiwport標籤
Html

響應式網站-不可缺少的Veiwport標籤

什麼是Viewport標籤？ Viewport它是網頁HTML的一種META標籤，專為手機瀏覽器設計的。 有些屏幕很小的手機，但解析度卻可以做得很大，比如iphone7默認分辨率為：1920 * 1080，比許多電腦桌面的都還大，傳統ＰＣ網站直接放到手機上閱讀時，界面就會顯得非常小，閱讀體驗就很差，這時候就會需要一種將原始視圖在手機上放大的機制，使用Viewport標籤可以解決這個問題。 如何使用Viewport標籤？ 將code放置在head裡面即可，如以下範例。 此範例的設定就會依照手機螢幕的解析度去做相對應的縮放了 !<!DOCTYPE html> <html> <head> <title>viewport</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <
pig • 2 min read
PHP 如何進行字串切割
Language

PHP 如何進行字串切割

為何需要字串切割 我們在串接 API 時需要將取回的資料進行處理，不過各家廠商開出來的規格都不一定，如果是丟回 JSON 格式還好處理，只需要使用 json_decode 就直接將資料轉成 物件(object) 或是 陣列(array) 可是如果運氣不好一點，回傳回來的資料可能就是純粹的陣列帶字串，看到這種也只能硬著頭皮硬幹下去了，廠商總不可能為了你一個人去改功能吧。 JSON: JavaScript Object Notation. 是一種純粹的文字資料交換格式。 範例 那麼這個時候我們就只需要使用 PHP explode 這個 function 就好了，那麼廢話不多說直接上程式碼。 以下式範例的 code <?php $ugly_string='status=1</br>desc=Succeeded</br>
使用 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端
Language

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

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

python 簡易爬蟲筆記

目標 ： 存取指定網頁的 element 的 value 為 json ， 並將其匯出成 json 檔案 Step 1 安裝套件： 使用 pip3 安裝下列套件 requests ： python 用來處理一般 service 請求的套件，相關資訊可查看 requests 快速上手 安裝 : $ pip3 install requests beautifulsoup4 ： Beautiful Soup 是一个可以从 HTML 或 XML 文件中提取数据的 Python 库.它能够通过你喜欢的转换器实现惯用的文档导航,查找,修改文档的方式.Beautiful Soup 会帮你节省数小时甚至数天的工作时间.相關資訊可查看 python：BeautifulSoup 模块使用指南 安裝 : $ pip
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） 安裝指令： $ sudo apt-get install python3-pip
Language

jQuery plugin scrollClass

github :link連結 Description : 滾動事件發生時對當前畫面指定的元素加入對應的Class Options : Name type default description className string null 指定需要加入的 class 名稱 （必填） delay number 0 延遲加入class的時間 單位：微秒 increment Bollin false 延遲時間是否遞增 Example : Basic $('.article-wrapper.avatar').scrollClass({ 'className': 'animate_right', }) Basic Options $('.article-wrapper.avatar').scrollClass({ 'className': 'animate_right', 'delay': 350, 'increment': true }) Function Description
Language

jQuery Plugin scrollState 滾動狀態bar

github :link連結 Description : 於頁面上方加入物件來顯示頁面滾動軸的進度，以增加使用者體驗 Options : Name type default description color string ‘#4A8CB4’ 物件顏色 bold string ‘4px’ 物件粗細 index string ‘100’ 物件 z-index 屬性 值 transition string ‘1s’ 物件 transition 屬性 值 （過度時間） Example : Basic $('body').scrollState(); Basic Options $('body').scrollState({ 'color'
Language

Zen grid 2.0 基本用法 for drupal

前言 這是以drupal 為開發環境，使用zen grid 的 東西，寫下這篇是為了讓未來的我忘記時，能有東西可以參考，不想浪費太多時間～ Zen grid 基本 mixin 介紹 1. zen-grid-container() 這個mixin 就像是 bootstrap 或是 flexboxgrid 的 row 一樣的概念。 當你要宣告 columns 時，它們的父元素必須使用此 mixin。 如果你對 bootstrap 和 flexboxgrid 這些知名的css framework 不熟 ， 其實你們可以去玩玩看，對你們會很有幫助。 2. zen-grid-item-base() 使用預設的 gutters 變數的值; 那預設的 gutter 值是從何而來呢？它來自 zen 的子版型裡有一個
a65162 • 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 ); }
pig • 1 min read
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> <
pig • 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
JavaScript

JavaScript 何謂物件原型 (prototype)

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

前端自動化：Gulp 學習路程

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

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

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

jQuery控制Dom元素

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

推薦12個jQuery小應用

jQuery是一個快速，輕巧，功能豐富的JavaScript庫。它的功能包含了HTML文檔遍歷和處理，事件處理，動畫、Ajax和一個易於使用的API，跨瀏覽器兼容等。隨著通用性和可擴展性的結合，jQuery的改變數以百萬計的人寫JavaScript的方式。 此篇主要介紹12個jQuery運用的方法： 返回頂部 使用JQuery的動畫的scrollTop的和方法可以創建簡單地返回頂部的動畫： // Back to top $('a.top').click(function (e) { e.preventDefault(); $(document.body).animate({scrollTop: 0}, 800); }); HTML中生成一個按鈕： Back to top 可以改變scrollTop的的值來定位滾動條的位置。 圖片預加載 如果頁面使用了很多不是最初加載便可見的圖片，有必要進行預加載： $.preloadImages = function () { for (var i = 0; i 判斷圖片是否完全加載 有時需要圖片完全加載才能進行後面的操作，下面的這段代碼可以實現： $('img').load(function
pig • 3 min read
Language

利用GreenSock JS動畫庫製作酷炫的動畫特效（staggerFrom 使用篇）

GreenSock是一款功能強大的ＪＳ動畫庫，官網中有完整的文檔說明，也有很多的 example使用教學。今天我們就來使用GreenSock來建立簡單的動畫效果。 首先先到官網下載源碼 staggerFrom 使用篇 範例code-1: <body> /*接著我們先在html中生成以下demo架構*/ <div id="demo"> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> <div class="box">
pig • 4 min read
Language

利用css3＋jQuery做出酷炫的loading bar ＋計數動態

以往的loading bar 都是死板板沒有什麼動畫特效的。 使用css3的“transform””,”transition”等屬性來實現具有動態效果的loading bar外加網路上找到的計數動態js code搭配起來特別有感覺～ 1.circle動態使用方式 //首先head中引入ＣＳＳ //class解析c100=灰色100%bar條 ; big=大圓（可更換small）會變小圓;green=顏色（可依個人喜好自行增加） 50//此ＩＤ是為了jquery控制，當抓到裡面的值多少時，會有多長的bar //控制bar長度的地方 //引入jquery.js jQuery(function() { var x = $('#test').html();//宣告一個變數x＝test裡面的內容（上方html裡面的內容） $('.test').addClass('p' + x);//接著在class=test 的地方加上一個class(p1~
pig • 1 min read
Language

利用jQuery 讓background-image達到responsive 效果

background-image在內容沒有設定height或裡面沒有物件時是不會顯示出來的。這種方式可以讓background-image得到height，並且在視窗縮小時自動跟著縮放。 Step 1:首先我們先在html裡面建立div <div id="img00"> <div class="img00Title"> </div> <div class="img00good"></div> </div> Step 2:接著針對div去寫background-image #img00Visual { background: url(../images/header/banner.png); @include background-size(cover); background-repeat: no-repeat; // @include zoomIn(); #img00 { position: relative;
pig • 1 min read