文章彙整

129 篇文章標籤含"前端開發"

首頁  /  標籤含 "前端開發"的文章

前端開發:使用@supports來檢查瀏覽器支援性

之前我們在 快速查詢CSS/HTML與各瀏覽器的支援-Can I Use  這篇文章中 提到過瀏覽器支援性的問題,在這篇文章中我們建議開發者先到 Can I Use 網站中確認瀏覽器對CSS新屬性的支援度再進行開發。然而在實際開發的過程中,我們常常會遇到客戶在驗收階段對我們說:「為什麼在我手機(電腦)上看起來怪怪的?」仔細確認過客戶的裝置版本之後、就是各種的無奈。在這個階段我們不太可能把之前做好的東西推翻重做,多數時間的解法都是針對不支援的瀏覽器另外設置對應的CSS。在這個時候,確認瀏覽器是否支援某些CSS屬性這件事、就變得非常的重要。

前端開發:解決slider js垂直滑動時出現的高度問題

slick js 是一個相當好用的輪播套件,Magento2 page builder裡的slider也是使用這個套件來實現輪播的效果。這篇文章要跟大家分享的是:如何使用slick js 製作上下滾動的滑塊,以及如何解決垂直滑動時出現的高度問題呦!

前端開發:解決SASS的禁用警告 “Using / for division is deprecated and will be removed in Dart Sass 2.0.0. “

由於Dart Sass 2.0.0不再支援用"/"表示除法,如果您恰好使用了這個方法,那麼在編譯的過程中,SASS會不斷的跳出棄用警告:DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.。而且這警告又沒有辦法關閉,雖然不影響編譯的結果,但是大量的警告真的很煩人。若是使用了bootstrap 4,那警告量更是驚人。若是要解決這個問題,底下提供了二個方法供您參考。

前端開發:讓你的Bootstrap4下拉選單支援多層次選單

Bootstrap 3 和 Bootstrap 4 的下拉選單,只支援到第二層,如果需要多層次選單的話,我們需要用到 bootstrap-submenu.js。其中Bootstrap 3 要搭配 Bootstrap-submenu 2使用,Bootstrap4 則是要搭配 Bootstrap-submenu 3 使用。今天這篇文章主要是分享Bootstrap 4 + Bootstrap-submenu 3的作法,關於Bootstrap 3 + Bootstrap-submenu 2 的作法,你可以參考我們的舊文章:讓你的Bootstrap下拉選單可以支援多層選單

Magento PWA:如何在pwa專案中使用SASS或LESS

當我們從github下載Magento PWA Studio來使用的時候,會發現PWA是直接使用CSS檔案,沒有透過任何的編譯工具。如果您已經習慣使用SASS或LESS來編譯CSS,那你一定很希望能夠在PWA繼續使用你熟悉的工具,要不然光是那些巢狀的CSS選擇器,就可以把人給逼瘋。這篇文章就是要跟大家分享如何在PWA使用SASS及LESS。

Shopify開發:如何針對不同語系顯示不同的頁尾選單

在開發多國語系的Shopify網站時,我們常常需要在不同的語系下,顯示不同的頁尾選單。而shopify的預設功能,沒有辦法針對不同語系去指定不同的頁尾選單。因此我們需要修改程式碼來實現多語系的頁尾選單。如果想要針對不同語系顯示不同的頁尾選單,我們只需要把握判二樣技巧就可以了一、判斷語系二、呼叫自訂選單

React JS:如何讓React dev tools支援本機網站

React DevTools 是React js的除錯工具,可以用來觀察React APP在網頁面執行的一些資訊,利如組件之間的相互關係。不論是Chrome或者是Firefox 都有React DevTools的擴充工能。在預設的情況下,React DevTools是不支援本機網站的,這篇文章要分享如何安裝React DevTools並支援本機網站。底下我們以Chrome為例來做分享。

Magento PWA:如何安裝Magento PWA sample data (Venia sample data)

這篇文章要跟大家分享安裝Magento PWA sample data的方法以及如何解決可能遇到的問題。 在開始之前您需要先有一個Magento2 網站,安裝方法可以參考我們之前的文章: 如何使用composer安裝magento2 如果您之前已經安裝了 magento2-sample-data的模組,那必須先把sample data的模組移除,再用全新乾淨的資料庫重新安裝一次。

Magento2:如何將購物車的同意條款移到畫面底下

在將結帳按鈕移到畫面底下之後、你可能也需要將結帳的同意條款移到畫面底下。假設我們使用的主題包是AstralWeb/theme,底下我們的範例是直接在AstralWeb/theme這個主題包裡移動同意條款核取框的位置。

Magento2:如何將購物車的結帳按鈕移到畫面最底下

在Magento2的結帳頁中,預設的結帳按鈕是跟著結帳方式跑的。每個結帳方式都有自己的結帳按鈕。那如果我們想要把結帳按鈕移到結帳頁的畫面底下,並且希望只有一個結帳按鈕的話、又該如何處理呢?假設我們使用的主題包是AstralWeb/theme,底下我們的範例是直接在AstralWeb/theme這個主題包裡移動結帳按鈕的位置。

前端開發小學堂(一)如何限制按下Enter就送出表單與勾選框的可勾選數量

今天的前端開發小學堂,會介紹兩項小方法: 在一般情況下,按下Enter就會直接送出表單,若有額外的需求,不能讓表單直接被送出呢? 在做項目選擇時,我們可一直將勾選框打勾,若要限制可勾選數量呢? 以上兩種問題小情境, 想知道怎麼製作嗎,那就繼續往下看吧!

Forking Workflow的介紹

今天要來介紹寫CODE在專案進行多人協作時,好用的Forking Workflow。Forking Workflow的主要好處是,不需要所有開發者都擁有能push code到專案的repository中的權限,而其他開發者的Code也可以被整合在一起。每當其他開發者推送修改到自己的fork repository,再發起Pull Reques的通知給專案維護者,讓專案維護者合併到專案repository。這樣專案維護者可以不需要給其他開發者專案repository權限,並接受任何開發者的提交修改。

Vue Storefront +Magento執行

您在線上商店會需要的一切。但許多人抱怨它的速度、資源密集、難以維護等等。若您想讓您的magento體驗更快速,你可能需要為伺服器資源燒更多錢。但如果您不想這麼做,Vue Storefront或許是個選擇。使用Vue.js撰寫的無頭及微服務電商漸進式網路應用程式(PWA)” - 出自他們的網站。理論上您可以將您的magento轉換成PWA,它應該能像手機原生操作系統一樣執行。如果您想讓您的Magento(特別是Magento 1)在沒有花太多金錢讓伺服器升級的情況下,更加快速,或花太多時間升級成Magento 2,那這可能就是答案。

五個方法提升 Web Fonts 載入速度

微調 font 文件並進階優化字體載入策略,以實現最快速度和最短 FOUT 表現 在之前的文章我們介紹了關於 system fonts 相對於 web fonts 的優點,與 system fonts 相比,web fonts 會對效能產生負面影響,使用更多數據並且增加網頁耗能,更是對 Google SEO 排名造成間接性的傷害。

System Fonts 和 Web Fonts 比較

什麼是 System Fonts / Web Fonts?System Fonts 顧名思義指的是作業系統內定的字型,因為來自於作業系統(也就是用戶的電腦、手機),不需要去特定網站(如 Google)抓取字體文件,也不需要將字體文件存在我們的網頁伺服器裡。而 Web Fonts 則是儲存於網頁伺服器的字體文件,瀏覽器會在渲染畫面時下載當前網頁指定的字體。在一天之內,瀏覽各種網頁可能會下載成百上千個這樣的文件。 其中一些甚至可能是相同的字體,來自不同的網站。

翻譯Magento PWA Venia的主題

對於商家來說,針對來自不同國家和語言的顧客,支援不同語言是必須的。原因不用多說:更大的客戶群就意味著更多的商機。有以上需求的Magento商家不用擔心語言支援會是一個麻煩:即使Venia / Magento PWA主題沒有提供拆開即用的國際包(也就是美式英語作為預設語言(en_US));但翻譯一個Venia網站是非常簡單的過程。以下我們就教你怎麼快速進行在Magento中進行前端語言的轉換與翻譯。

前端開發:使用jQuery實作點擊div以外的地方來關閉它

在使用下拉選單或者是彈出視窗的時候、我們常常會需要一個功能:點擊元件外部來關閉元件。在接下來的範例中,我們要示範如何使用jQuery實現點擊div以外的地方來關閉div。首先、我們先準備好html的部份,我們要做一個按鈕和一個div方塊。按下按鈕就可以顯示或隱藏div。並且在div顯示的狀態下,點擊div以外的地方就可以隱藏它。

Magento2 新增javascript的windows.checkoutConfig變數

在Magento2的結帳頁面是使用knockoutjs渲染製作的功能和特效,而它的購物車、客戶、商品等資料都是藉由\Magento\Checkout\Block\Onepage::getSerializedCheckoutConfig的函數提供,再將它宣告至windows.checkoutConfig裡,讓knockoutjs的model能去取得一些基本必要設定值,但當我們客製化一些新的功能在結帳頁面,想要去新增或定義新的windows.checkoutConfig值該如何做呢?

Web Share API 網頁分享功能

Web Share API 是現代瀏覽器提供的功能之一,它讓網頁的使用者能夠體驗到和原生 app 完全相同的分享體驗。以下我們分成三大主題來為各位介紹 Web Share API 的基本使用概念,什麼是 Web Share API呢?Web Share API 的限制是什麼呢?Web Share API 要如何使用?

前端開發:bootstrap-table.js的中文化設定

bootstrap-table.js 是一個以bootstrap為基礎的表格外掛。可以對表格的資料進行排序、分頁、查詢等等。這篇文章要簡單的介紹如何設定bootstrap-table.js的中文化呦!因為bootstrap-table.js是以bootstrap為基礎開發的套件,因為我們必須先載入bootstrap。另外bootstrap-table使用了font awesome作為預設的圖標,因此我們也需要找入font awesome.一起來看看吧!

Magento 2 Theme – Magento前端也能套版嗎?(下)

Magento為市面上提供高度彈性以及客製化程度的電子商務開發系統之一,也因為其系統架構較為複雜且繁瑣,市面上所提供的theme套版方案也較為少見,本篇文章所要介紹的為市面上 envatomarket Theme銷售平台中,銷售排行第一名Theme Porto Theme。就讓我們往下看看吧!

Magento 2 Theme – Magento前端也能套版嗎?(上)

在全球受到疫情侵擾無一倖免的肆虐下,為避免疫情擴散各地紛紛展開了居家隔離政策,全球各地的生活模式也遭受強烈的變革。然而電子商務產業因應疫情事態反而逆向而行,在疫情肆虐下開展網路通路成為各行各業的另一出路。其中縮短上線時間的秘訣之一,即是利用前端套用固定版型方式達成縮短開發時程目的。Magento為市面上提供高度彈性以及客製化程度的電子商務開發系統之一,也因為其系統架構較為複雜且繁瑣,市面上所提供的theme套版方案也較為複雜。本篇文章所要介紹的為市面上 envatomarket Theme銷售平台中,銷售排行第一名Theme Porto Theme。

Magento 2: 如何在表單欄位中新增 placeholder

儘管 Magento 2 採用 KnockoutJS 開啟了現代前端功能的可能性,但較於抽象的概念間接提高新的挑戰,在表單欄位中添加 placeholder 不再像打開 HTML 那樣簡單。 在這裡,我們將解釋如何將 placeholder 添加到 Magento 2 表單中。

Javascript 中 JSON.parse 數字支援問題

在javascript中我們常常使JSON格式做資料交換,所以我們常常使用JSON.parse來把字串轉為物件再做使用,但是有一個問題會造成你轉出來的資訊與你期望的產生差距,讓我們用一個簡單的範例來重現這個問題吧!那就繼續往下看囉!

前端開發:如何使用Javascript實現複製到剪貼簿的功能

這篇文章要來分享如何使用Javascript實現複製到剪貼簿的功能呦!那就跟著以下操作教學,一起來試試吧!

Magento 2 引用 Popup Modal

與 Magento 1 相比,Magento 2 讓許多前端 Modal 的使用變得更加容易,特別是在 Popup。 Popup 是一種很好的行銷策略,可立即發出號召性用語,吸引訪問者的注意力並與他們進行深入互動,讓對方更具好奇心的探索網站。 Popup 也可以是提示使用者網站流程的資訊來源,因此經常被各網站使用。 本篇文章,我們將學習在 Magento 2 中創建 Popup。

Magento 2 使用表單驗證 Form validation

什麼是表單驗證 ?表單驗證,簡單來說就是針對網頁上的

進行檢查格式的動作,今天主要是介紹怎麼樣在Magento 2 Form 加上 Validation,並且進一步的客製化 Validation Rule。那就跟著步驟一起看下去吧!

Magento開發小筆記-修改Magento內建的jQuery日曆

我們在開發Magento時,多少會遇到需要使用日期選單的需求,這一點在Magento本身已有提供jQuery的日曆,而這個日曆產出的日期格式將會根據系統配置而不同。

Magento2前端開發:新增主題後無法執行deploy

最近在工作中發現,在新增Magento2 主題包的時候,如果設定了parent theme,就會無法順利執行 deploy,出現的錯誤訊息宛如一大片的紅海。如果您也遇到同樣的問題,一起學習如何處理吧!

Magento2前端開發:使用PHP TIDY來補齊或移除不完整的HTML TAG

Magento2 後台的wisiwyg編輯器有防呆的機制,會自動修正使用者輸入的html,可以避免產生不完整的html tag。但有時候我們需要匯入一些資料,或是同步一些外部資料進來,這些匯入或是同步來的資料就有機會夾帶一些不完整的html tag,進而造成網頁的大破版,所以就算後台有再堅強的防呆機制,都沒辦法防止。因為他是不通過後台的!

前端開發:使用JQuery.qrcode來產生QR code吧!

jquery.qrcode.js 是純前端的jquery 外掛,可以輕鬆在網頁上生產QR code。整隻檔案不到3k。最小化之後更是只剩下1點多K。這篇文章要跟大家分享如何使用jquery.qrcode.js。

Sass Map的使用

本篇文章將來教大家關於Sass Map的應用,來提升工程師在開發與維護程式時的品質,跟著歐斯瑞手把手的教學,一起來看看吧。

CSS 預處理器 SASS、LESS 介紹

CSS 預處理器產生了一種新的語言,而核心理念是用一種專門的程式語言,為 CSS 增加一些程式設計的的特性,無需考慮瀏覽器的兼容性問題,例如可以在 CSS 中使用變量、簡單的邏輯程序、函數等等,讓開發者就只使用這種語言進行編碼工作。簡單來說,CSS 預處理器用一種專門的程式語言,進行 Web 頁面樣式設計,然後再透過編譯轉為正常的 CSS 文件。

前端開發:如何隱藏數字輸入框的小箭頭

又來到了歐斯瑞的前端開發教學系列,今天要與大家分享如何使用CSS隱藏數字輸入框的小箭頭,並附上codepen範例方便讀者們做使用,一起跟著我們來學習吧!

前端開發:使用bootstrap-table.js來實現表格的排序

bootstrap-table.js 是一個以為bootstrap為基礎的表格外掛。可以對表格的資料進行排序、分頁、查詢等等。本篇文章將簡單的介紹如果套用bootstrap-table.js到表格上,進行排序。

前端開發:表單元件常用的CSS選擇器

CSS對於前端開發而言,是不可少的一重要元件,今天就來為大家介紹表單元件中常用的CSS選擇器 (CSS selector for input),同時也提供codepen範例給大家參考,方便大家快速學習唷!

利用CSS counter 自動分類計算細項

CSS (Cascading Style Sheets) 用於定義網頁中所顯示的樣式,也可以用於做簡單計算,讓歐斯瑞帶著大家學習如何使用CSS來自動分類計算細項!

Magento1:移除 sort by 中的position選項

Magento官方已宣布,將於2020年6月份全面停止支援所有Magento1的安全更新與修正服務,不論是Magento開源版或企業版,將於近期停止服務。有需升級至Magento2的店家們敬請與歐斯瑞聯繫。 那麼仍使用Magento1的店家們,若想在前台的「Sort By」下拉式選單中移除「Position」的選項,請依照文中的幾個簡單的步驟執行~

前端開發:將輸入的英文轉成大寫

有時候我們需要限制輸入框只能輸入大寫符號,這時候我們可以使用JavaScript,將已經輸入的英文字母自動轉成大寫的英文字母。 跟著歐斯瑞一起學習,如何輕鬆使用JavaScript指令來完成吧!

關於 CSS 偽元素的那些小事

偽元素是什麼?它能為前端解決哪些問題?為什麼要使用它? 前端工程師對於 ::before 和 ::after 這兩個偽元素應該不陌生,經常可見於網頁中。本篇我們將深入介紹更多偽元素的特性和應用。

Magento2前端開發:如何透過修改layout xml檔來顯示最近看過的商品

雖然透過後台的widget設定就可以顯示「最近看過的商品」,但是為了做好版本控制,我們還是希望可以透過程式碼來達到相同的效果。一起來看看如何透過修改主題包裡的layout xml檔來顯示「最近看過的商品」吧。

利用checkbox做判斷改變CSS樣式並更改checkbox本身樣式

如何利用checkbox 做判斷改變CSS樣式並更改checkbox本身樣式

Magento2前端開發: 當滑鼠滑入購物車按鈕時隨即展開迷你購物車

原生的Magento2 主題包,需要點擊購物車小圖才能展開迷你購物車,如果想要在滑鼠滑入的時候展開迷你購物車,那麼請跟著小編一起學習吧!

Magento2前端開發: 如何從購物車中移除計算運費和稅金的區塊

一般我們要移除某個區塊的時候、直接在xml檔裡加上底下設定就可以,但是在購物車頁面中,如果我們直接使用上面的方法移除運費和稅金計算的這個區塊,則會出現一大堆的js錯誤,這時候我們就要使用文章的方法來移除區塊。

使用css+jquery+jqueryUI 做出拖拉相片效果

拖拉相片效果其實比你想像中簡單,清楚的設定教學與截圖,讓你一次就上手!

Magento2前端開發:使用手指左右滑動來切換Bootstrap 輪播區塊

在開始實作之前,我們要先確認已經將Bootstrap打包進我們的Magento主題包裡,詳細的操作可以參考之前分享Bootstrap相關文章,接下來我們要開始讓Bootstrap輪播可以支援手指左右滑動的動作。

Magento2使用手指左右滑動來切換Bootstrap頁籤

先前已經分享過如何將Bootstrap打包進我們的Magento主題包裡,接下來我們要開始讓Bootstrap頁籤可以支援手指左右滑動的動作,因為Magento2 已經打包好了,所以可以直接叫出來使用。

簡單完成社群網站連結散開效果-圓形

很多網站會將社群連結固定在網頁上,讓使用者易於觸擊,但隨著社群越來越多,放上太多連結總是不美觀,因此我們用一個icon固定在網頁上,點擊以後展開社群的項目,可以隨時被點擊。

使用Magento2 原生工具來將LESS編譯成CSS

Magento2 提供Blank以及Luma二款預設的主題包,這二款主題包都是使用LESS來編譯CSS。在這篇文章中,我們要為您介紹如何使用Grunt來開發及調整CSS。

CSS3 : 簡單使用flexbox 展示自適應及滑過效果

要怎麼在網頁呈現自適應及滑過的效果呢,這次我們介紹flexbox,讓你可以簡單使用輕鬆上手!

Github的branch權限設定 – Required signed commits

這次介紹的protected branch的一項功能是 Required signed commits,這項功能的用途是用來驗證commit 的作者與github上的使用者是否符合,簡單來說就是做身分驗證,可避免身分被有心人士冒用,接來來馬上來介紹如何設定 Required signed commits。

具有響應式功能的圖片延遲載入外掛

延遲載入 lazy load 是 Hibernate3 默認的加載方式,是為了避免一些無謂的性能開銷而提出,就是當在真正需要數據的時候,才真正執行數據載入。緩慢的載入速度會影響到使用者體驗,網路上有很多 lazy load 外掛提供前端人員使用,而我們這次選擇 lazysizes.js 作為介紹。

解決Magento2.3.0目錄頁跑版的問題

在安裝完成Magento2.3.0之後,會發生一個狀況,那就是目錄頁跑版,多出一個空白區域,現在就來教你如何解決這個問題!

以SASS開發Magento2佈景主題

Magento2 預設是使用Less及Grunt來產生css檔案。當然我們也可以使用別的工具、例如Sass及Gulp。接下來要介紹如何建置Sass及Gulp的開發環境。

Sass selectors(選擇器)-該不該使用巢狀架構?

在撰寫Sass selectors(選擇器)時,到底該不該使用巢狀架構呢?這裡將提出來讓大家一起分析與思考,非巢狀與巢狀架構兩者的差異區別與優缺點!

如何在Magento 2 加上麵包屑

雖然Magento本來就有麵包屑了,但並不是每個頁面都有麵包屑;若遇上需要加上麵包屑的需求要如何補上去?這篇文章將以登入頁為實例說明!

純CSS實現表格首行和首列固定

當表格列數和行數較多時,使用者會出現的需求即是把重要的列與行固定,以便於瀏覽表格內容,才得以提高用戶體驗。為各位介紹使用單純 CSS 和運用簡單邏輯的解決方案。

3個實用的 infinite scroll 套件

infinite scroll是一種新的網頁讀取資料的技術,當使用者到網頁的最下方時,會自動載入新的資料到現有的頁面。網路上有許多已存在的套件,可以讓人快速套用infinite scroll技術,接下來我們就來看看3個最實用的infinite scroll套件吧!

BEM 規範思維 – 讓 CSS 更利於開發與維護 (二)

BEM 是一種前端項目開發的方法學,著重程式命名的識別度、一致性,本文將介紹Modify、Mix模式以及文件架構!

如何在Magento2 使用 Bootstrap

如果想要在Magento2的主題包裡使用bootstrap 的 javascript,我們就要使用requirejs的方式來引入bootstrap.js,請看以下說明。

用下載代替嵌入 Google fonts 使用小技巧

Google Fonts 會依照瀏覽器的字型格式需求回傳相應的字型檔,這可能會使網頁加載變慢,或讓display-font屬性無法順利使用,將Google Fonts字型下載管理可以避免此情形。

KnockoutJs 系列(1)-observableArray

Knockout 是一個JavaScript函式庫,它使用一種清晰的資料模型協助您建立更豐富的使用者互動介面(UI).任何時間您需要動態的更新您UI的部分,例如當使用者執行了一個動作或外部資料來源有所異動,『KO』 可以幫您簡化並實踐。

BEM 規範思維 – 讓 CSS 更利於開發與維護 (一)

BEM 是一種前端項目開發的方法學,因應當前網頁發展爆炸趨勢,前端程式碼複雜度大大提升,尤其是 JavaScript 和 CSS 的數量大幅增加,程式命名的識別度、一致性就成了首要課題,使用BEM找出適合自己與團隊的程式組織方法和命名規範因應而生!

CSS3屬性 pointer-events應用

CSS3 的新屬性Pointer-Events,最簡單的用法就是讓滑鼠滑過後沒有作用,本篇文章將介紹一些其他變化操作。

使用 font-display 改善與優化網站效能

使用font-face時,可能會因為字型檔很大而影響網頁速度,為了改善這種情況,font-face新增了一項屬性:font-display,font-display使我們可以照字型下載和讀取速度來決定呈現的方式。

如何利用CSS3原生網格系統快速排版

CSS3有原生地網格系統,過去沒有被廣泛應用最大的原因莫過於瀏覽器支援性的問題,但現在IE11也支援Grid的語法了,讓我們來看看用CSS3 Grid屬性排版有多方便。

Magento 2 iOS 產品放大圖全螢幕時無法關閉

這篇內容要跟大家介紹一個在Magento 2 可能會遇到的小問題與解決方法。 裝置:iOS(手機/平板) 版本:Magento

closure-compiler︰產生最佳化(最小化)的JavaScript 程式碼

Closure Tools 是由 Google 所發展的一套網頁應用程式工具組,可以幫助網頁開發者快速發展大型的網頁應用程式。Closure

前端通訊協定介紹 

現今的網站常常需要像聊天室一樣即時做資料接收,而且必須在不重新整理網站的情況下一直接收後端送來的最新資料,今天就讓我們來看看有幾個技術可以做到這點,以及其各自的優缺點吧! 1.輪詢(Polling) 簡單的說就是讓browser每隔一段時間去後端取得最新的資料,這是一種最古老的方式、也相當浪費server的資源,因為browser不會知道server上面是否有新的資料、所以常常去server取資料都是拿到舊的資料、而不是新的,這樣會造成浪費server的連線資源,但這種方式最簡單、也幾乎所有的browser都支援。 圖片出處:https://www.pubnub.com/blog/2014-10-01-websockets-and-long-polling-in-javascript-ruby-and-python/ 2.長輪詢(Long-Polling)

HTML5.2 的到來 (2) – 新的有效與無效實踐篇

html 5.2將一些之前認定為無效的內容改為有效,究竟哪些寫法在html 5.2 將調整為有效呢?請看本文為為您說明!

SVG邊框動畫提升網頁質感 (下)

Vivus 是一個輕量級的JS庫,用來執行 SVG 路徑動畫,在上集我們有先提到如何使用CSS製作 SVG

強大的前端框架工具Bootstrap 3介紹

Astral Web使用Bootstrap 3作為我們的前端框架基礎,以簡化我們的工作且提高開發效率,並在前端和後端開發人員之間進行溝通。 Bootstrap 3

Safari前端開發-在實機裝置上檢測你的網頁

本文將介紹如何使用Safari瀏覽器來幫助檢測前端開發。

Chrome Devtools 開發者工具功能介紹(network篇)

前端開發最常使用到的開發者工具面板為 Elements Console   Chrome Devtools

網頁文字單位 PX,EM,REM的差別: 如何修改Magento2 預設rem

PX: px的最大特色是精準度高,也因為他不知道他是絕對數值,不管你在那種螢幕寬的裝置下看到的字體大小都一樣,屬於最入門款的文字單位。   EM: em是相對數值,他會隨著外圍

Chrome Devtools 開發者工具功能介紹-source篇

隨著 JavaScript 應用的複雜性逐漸提高,我們需要藉由更有力的測試工具幫助開發快速尋找問題點,並有效地修復它。除了使用 console 輸出檢視外(

快速完成瀑布流版面-使用Masonry套件

今天我們來實作如何使用Masonry製作瀑布流的效果!

如何在Magento 篩選器中移除目錄及價錢項目

在Magento 的產品目錄頁中、左邊欄位有個篩選器,在預設的Magento 佈景主題包裡、這個篩選器包含了:商品目錄、商品屬性標籤、價錢等。 這篇文章要教大家移除篩選器中的目錄及價錢項目。  

Chrome Devtools 開發者工具功能介紹-console

網頁開發者常需與瀏覽器打交道,本文將針對Chrome瀏覽器,教學使用console指令的幾個基本功能!

使用GSAP來搞定動畫與特效

GSAP不但本身套件的容量小,且能適用於各種瀏覽器,可以從簡單的效果延伸到各種複雜的特效,方便管理與更動,以下簡單介紹它的使用方法!

如何解決Bootstrap 3和PrototypeJS之間的衝突

如何解決Bootstrap 3和PrototypeJS之間的衝突 當我們想要在Magento上使用bootstrap collapse.js時,會發現在展開的時候沒有問題,但是收合時卻是直接關閉、與Bootstrap網站上慢慢滑上的效果不同。這是因為Bootstrap 3和PrototypeJS之間產生了衝突。

優化網頁設計-將客戶導向重點頁面

明顯美觀的大橫幅   現代的網頁設計已經變得更加視覺化,讓使用者登進到全屏大橫幅時,可輕鬆查看選單選擇。 但是,所有重要內容發生了什麼事? 隱藏在詳細閱讀中?

如何解決Magento 2 預設主題的選單問題

    Magento 2 的預設主題有一個小小的問題,當你的瀏覽器視窗尺寸介於

Magento 2:設置Theme Logo

在Magento 2,Logo的檔名與格式預設為logo.svg。當你把一個同為logo.svg的檔案放到對應路徑<theme_dir>/web/images時,系統就會視這張圖為這個theme的logo。(即下圖所標示之處) 在使用客製的theme時,我們也可以藉由宣告來使一張不同名稱且不同格式的圖設為logo。   那麼在什麼情況下我們需要使用宣告呢?

如何在Magento 2 使用 Widget建立網站內容

    這篇文章要跟大家分享如何使用小工具(Widget)建立網站內容並將內容放在頁面上。Magento的小工具(Widget)有很多不同的類型,這篇文章要以靜態區塊(CMS static block)做示範。其他類型的建立步驟都差不多,你可以參考建立Widget及設定Widget的顯示頁面及位置的步驟,只有在設定Widget的顯示內容時需要因應不同的Widget類型做調整。

Magento 2 前台網站開發:部屬靜態資料

在之前 Magento 2 前台網站開發第一步 的文章中說明了如何創建一個新的主題布景(Theme),於後台選取並套用後也許你就會發現,為什麼我的網站變成了這個樣子!?

使用sass定製你的bootstrap css

本篇文章要跟大家分享如何使用sass定製你的bootstrap css。

讓你的Bootstrap下拉選單可以支援多層選單

Bootstrap 3.x 的下拉選單只支援到第二層、如果您需要多層選單的話、可以試試加上底下這支 bootstrap-submenu.js

如何製作阿拉伯語、希伯來語等由右向左的網頁

如果您需要製作阿拉伯語、希伯來語、印度語等這些由右向左的網頁、底下是必備的基本資訊。   修改文字方向   首先

如何使用 Sass 開發專案

今天來談談如何用Sass來開發專案,包含開發前的安裝作業。 開發前我們大概了解一下為什麼要用Sass開發 Sass是一套生成CSS的工具,支援變數、函數、繼承等功能,讓我們更輕鬆地組織及維護CSS樣式表。比起用傳統的CSS慢慢撰寫,用SCSS開發真的可以節省掉很多時間。   Sass開發前要先安裝以下工具

如何設計 Magento佈景主題 (2) – 使用sass開發

上一篇 我們教大家把 Magento佈景 主題的基本環境設定好了,今天來談談如何使用sass來開發 Magento佈景

使用SelectBoxIt.js自訂你的下拉選單

CSS無法影響下拉選單展開的選項,如果希望自訂選項的樣式,我們需要使用一些外掛來改變下拉選單的結構,SelectBoxIt.js就是其中的一個選擇。SelectBoxIt.js 的使用非常簡單、請看以下操作步驟。

使用bootply測試您的Bootstrap 網頁

您正在學習 Bootstrap 嗎?或是需要測試某個 Bootstrap javascript

Bootstrap Carousel (Bootstrap廣告輪播器)使用上的小技巧

這篇文章要跟你分享幾個使用Bootstrap的小技巧,包括:取消換頁的箭頭及按鈕、改變幻燈片停留的時間、關閉自動輪播、關閉輪播暫停、關閉自動開始播放等。

當只有一張圖片的時候、隱藏Bootstrap Carousel 的箭頭和按鈕

現今有許多網站都會使用輪播圖片的方式來傳達訊息,網頁瀏覽者也可自行左右移動圖片,但如果在圖片只有一張的情況下,多餘的箭頭或按鈕只會混淆瀏覽者,這時候我們就可以將他們隱藏起來。 <div id="myCarousel" class="carousel slide">

在行動裝置上避免點擊輸入框時畫面放大

您有沒有遇過這樣的情況:當使用手機瀏覽網頁時,點擊輸入框準備輸入文字時,畫面放大了。若是不希望畫面放大該怎麼做呢?Astralweb在這邊提供您二個作法。

SASS: 如何幫產生的css指定編碼為UTF-8

font-family: Arial, '微軟正黑體'; 如果您的css檔案跟上面一樣使用了「中文名稱」字型,為了讓瀏覽器正確辨識字型名稱,我們必須要在css檔案的最前面指定編碼為UTF-8編碼  

幫你的sass專案加上Autoprefixer功能

  Autoprefixer是一個自動幫CSS加上前輟詞的工具,如果你習慣使用compass 來watch你的sass專案,你可以用底下的方式來幫你的sass專案加上Autoprefixer功能。 Step 1:

SASS的二種註解方式 /* */ 與 //

SASS的註解方式有二種:多行註解及單行註解   多行註解 使用多行註解時,註解起來的訊息會在一併輸出在CSS上  

Sass的註解功能,讓除錯工作變得更簡單

如果Sass生成的CSS檔案、不如你所預期的,你要怎麼知道是哪邊出問題了呢?Sass有一個註解功能、這個註解功能的預設狀態是開啟的。 在註解功能開啟的情況下、生成的CSS檔會長得像這樣: /* line 1,

如何修改Sass的輸出樣式

在網站的開發階段、我們通常會將CSS樣式表展開、方便查找代碼。但是當網站要正式上線的時候、我們又要將CSS檔案最小化、減少檔案大小。在以往單純使用CSS開發時、我們也許會使用一些線上工具幫忙轉檔,現在我們使用SASS開發、只要修改專案的設定、馬上就能變更輸出的樣式。   Sass 共有四種輸出樣式 :nested

如何使用CSS(border-radius)畫出圓角DIV

在使用CSS排版時,div預設的形狀都是方形,因此今天就要教大家如何使用border-radius將div的直角變成圓角。

如何設定Google 分析內容分組的條件規則

  當您網站的內容愈來愈多、查看網站分析數據就變成一件很累人的事,這時候我們可以利用Google分析中的”內容分類”功能,來將頁面做一個分類整理。利用”內容分類”功能、我們可以自訂分類的規則、只查看某個分類底下的分析數據。   一般的情況下我們可以使用網頁(Url網址)或是網頁標題名稱來排序頁面分析的資料,但是如果您的網站內容比較多的話、要在這個列表清單中找到您想要的頁面資料、也是一件相當累人的事。在這篇文章中、我們要為大家介紹如何設定Google分析中的”內容分類”。  

如何在Magento的首頁上增加最新產品的列表

這篇文章要為您介紹如何在Magento的首頁上增加最新產品的列表,全部的操作都可以在管理後台完成,不需要任何程式碼的知識。   Magento後台的編輯器提供了小工具(widget),現在我們就要利用這個小工具來完成添加新產品列表的動作。 Step1: 進入管理後台、選擇CMS>

如何使用XENU查找網站的失效連結

當您需要檢查網站失效連結的時候,可以使用免費工具 - XENU,請看以下範例。

使用adapt.js快速將您的網站變成響應式網站

響應式網站是目前建站的趨勢,但如果您原本已經有個網站了,又暫時還不打算另外建立新站,您可以考慮使用adapt.js快速將您的網站轉換成響應式的網站。 adapt.js 的作用是依據螢幕的寬度載入不同的CSS檔案,藉此讓網站達到響應式的效果。原理與media queries相同,都是依螢幕寬度判斷使用不同的樣式(CSS),不同的地方在於:adapt.js將不同的設定寫在不同的檔案內,再依螢幕寬度載入不同的CSS檔案;media queries是將CSS寫在同一個檔案內,依螢幕的寬度決定使用某一段特定的CSS設定。

利用Javascript,自製清理網頁元素工具

相信不少的網頁工作者,都會有類似的經驗,尤其是在需要重新整理網頁內容,或是重構網站時,看到一堆過去的網頁程式碼,元素其中不乏各種css,class,id,甚至是bgcolor,width一類的行內屬性,這時就可以利用這個工具來清理掉這些元素屬性,還原成最乾淨的html網頁程式碼。 不過,先提醒一下,此工具並沒有特別處理例外,例如說img的src屬性也是一併會被清除的。 直接來看程式碼(重點執行清除功能的是藍字的程式部分): <html> <head>

歐斯瑞的工具百寶箱大解密

  網頁設計百寶箱 歐斯瑞的有許多夥伴們都是網頁製作高手,一個一個吸引人駐足逗遛的網站就在在他們的巧思跟精湛的技術下誕生出來。 工欲善其事,必先利其器;這些亮眼的網站當然不是設計師跟工程師們變魔術變出來的,而是歐斯瑞的夥伴們依照設計跟製作的流程、使用各種適合的工具製作出來的。我們依照設計跟程式製作的流程把這些好用的工具分類好;接下來,就為各位歐斯瑞的好朋友介紹這些工具。 網頁設計

使用CSS自動設定單偶數背景色

在還沒有CSS3以前,CSS是無法加入判斷功能的,例如說今天要做的單數行背景顏色X色,偶數行背景顏色Y色,以前必須要靠別的程式輔助,例如PHP或是Javascript。 現在就介紹一個CSS3的新選擇器(Selector):nth-child()。 例如:我們今天想要做,單數行的背景顏色綠色,偶數行的背景顏色橘色。 先來準備一些文字段落(p): <p>aaa</p>

實作前端購物車或資源回收桶效果

JQueryUI相信是很多人開發網頁時都使用過的js套件,只要能結合JQuery UI其中的Draggable與Droppable功能,就可以透過少少幾行的javascript程式碼,做到拖曳與移除html物件的效果。 首先,要在網頁中先載入jQuery與jQueryUI。 在html的head中,可引用google cdn的方式來直接載入。

純CSS的下拉式選單

以往我們要實現下拉式選單大多會使用Javascript或者是Flash,不過現在我們有更簡單的選擇。今天我們要跟大家分享如何單純使用CSS及HTML製作互動式的下拉選單。底下就是我們完成的選單效果截圖。   首先我們先把第一層的按鈕做出來。 HTML <ul

如何使用CSS製作逐格動畫

一般我們在應用CSS動畫屬性時最常用到的效果不外乎改變顏色、形狀及移動位置等。但是,你知道嗎?其實CSS也可以做到傳統的逐格動畫,今天我們就要跟大家分享如何用CSS製作一個逐格動畫出來。

滿版背景圖的製作方法- CSS & jQuery

今天我們要跟大家分享幾個製作滿版背景圖的方法。 現在先來確定一下我們的需求: 圖片必須剛好填滿瀏覽器不能留有縫細,也不能因為圖片太大而出現捲軸。 圖片可以隨著瀏覽器尺寸自動縮放。 圖片必須保持長寬比,不能變形。

如何新增Magento頁面配置

當我們使用Magento後台新增頁面的時候,不管是產品頁面、還是內容頁面都可以選擇頁面的配置。Magento預設的頁面配置有:單欄、雙欄右邊欄、雙欄左邊欄、三欄、空白等。 如果我們今天因為端午節活動,需要新增一個特別的促銷頁面,一個獨特的頁面配置在不影響其他頁面的前提下,最簡單的方法就是新增一個特別的頁面配置。 新增Magento頁面配置其實很簡單,接下來我們將示範如何新增Magento頁面配置。   Step1:

8個免費工具幫助簡化前端開發的工作

本文將介紹幾個前端開發的工具:Chrome 開發人員工具、Brackets、Sublime Text 3、Koala、Online CSS prefix tools、CSS Sprite Generator、Picpick、Just Color Picker。

在您的網頁中新增 Google+ 追蹤按鈕

Google+ 追蹤按鈕可在您的網頁上新增一個簡單小型的條件按鈕,讓訪客可將您的個人資料或專頁快速加到他們的社交圈中。如要在您的網站上顯示 Google+ 追蹤按鈕,只要加入一行 JavaScript

jQuery特效:Parallax Scrolling 視差滾動

視差滾動(Parallax scrolling)是電腦圖學中一種滑動特效技巧,讓2D畫面產生多層次的景深以模擬3D效果,應用在網頁設計上也有不錯的效果。只要使用jQuery外掛搭配CSS設定就可以快速的製作!

響應式圖片的解決方案:利用html5 標籤在不同裝置載入不同解析度圖片

html5 有針對響應式網頁的標籤、可以針對不同解析度的裝置、設定載入不同的圖片。既可以更符合設計、又可以節省載入的時間,請看以下示範與說明。

利用jQuery Scroll Depth追蹤使用者的閱讀情形

購物網站如何申請超商取貨付款?(7-ELEVEN、全家、OK、萊爾富四大超商)Astral web 的這篇文章一直有很高的點擊率,今天我們突然想知道到底有幾個人把文章看到最後,該怎麼做呢? jQuery Scroll

【教學】Google Code Prettify 幫您的程式碼上個色吧!

Google Code Prettify 是一個好用的語法上色工具、用法相當簡單 下載解壓縮後,引用他的

【Magento小技巧】:在Magento中整合CSS及Javascript

為了提升網站效能、減少HTTP requests,將眾多的javascript及css整合在一起,是一件必要的工作。關於這一方面,magento提供一個簡便的方法,請參考下列教學步驟。 Step 1: 登入magento後台

從前端設計的角度來實踐SEO!

本文將提供您SEO-friendly的幾項HTML設置方針:結構化頁面,正確使用H 標籤,設置Micro Data,設置麵包屑,建立Title和Meta標籤等等。

如何利用jQuery來讓錨點連結有滑動的效果?

當單一網頁的內容很多的時候,可以將內容分成數個段落,在每一段內容前面插入一個錨點,利用超連結的功能,讓網頁在閱讀上好像分成數個獨立的章節一樣方便閱讀,本篇教學將介紹如何使用JQuery來達成錨點滑動效果。

如何使用Brackets 擴充功能 “Extract for Brackets (Preview)”,直接從psd檔取出設計資訊?

本篇文章將介紹如何使用Brackets擴充功能 “Extract for Brackets (Preview)”直接從psd檔取出文字、圖片、位置和間距等設計資訊。

如何用CSS自訂網站反白文字?

如果來到Astral Web歐斯瑞的網站,按下左鍵選取文字(反白)時,出現的不是預設的背景色,而是鐵灰色,讓使用者可以可以更清楚瀏覽文字。這種手法在網站上很常見,今天我們就來和大家介紹如何設定! 方法很簡單,只要利用css3 的selection選擇器就可以了! ::-moz-selection

如何使用css來隱藏placeholder文字?

設計表單的輸入欄位時、常用placeholder來做提示文字,在預設的狀況下、placeholder的文字只有在輸入資料後才會消失、如果我們希望在點選輸入欄位後,placeholder的文字會立即消失,一般常用的方法就是利用 onfocus 和 onblurl來達成。 <input

如何使用CSS的「text-overflow: ellipsis;」屬性限制內容字數?

設計版面時,為了讓網頁更整齊,常需要限制文字的字數,當文字超過限制時會自動顯示”…”的刪節號。 今天Astral Web要介紹如何限制字數,讓版面更整齊順眼;但這部分會用到程式碼較為複雜,需要有程式背景的人進行操作。 首先,單純使用CSS時,我們可以利用text-overflow: ellipsis;

使用響應式網頁設計,可提升使用者經驗!

Astral Web歷年來已幫許多客戶製作響應式設計的網站,效果良好;若想了解更多響應式網頁設計的資訊,歡迎聯絡我們! Astral Web編寫製作  

如何在Magento網站中新增字型?

Magento網站內建許多基本字型,對一般網站來說相當夠用;但由於使用者為各種類型的購物網站,有些商家可能會有特殊字型的需求,讓網站更有特色。例如童裝網站也許會需要活潑的字型,以符合品牌形象。今天Astral Web要教大家如何在Magento網站中新增自己想要的字型,由於會動到程式碼所以此篇教學適用於有程式背景的朋友操作,對普通使用者來說較為困難。 如果看不慣文章,歡迎參考我們的教學影片: 首先,大多數Magento的頁面都是由CMS系統所控制的,所以我們要先在Magento後台的CMS系統中加入我們所想要的字型,我們以Magento預設頁面「About us關於我們」為示範教學,在此頁面新增「Century