Irving Chen

Senior Web Designer | Specializing in Shopify and WordPress | SEO Manager | Web Design Agency Founder of Irvinglab

[Irving Chen @moonerer]

@mikefutia Database

[Irving Chen @moonerer]

@CoenHees Instant

[Irving Chen @moonerer]

@tdinh_me My notion has the same problem just now, something wrong with @NotionHQ

[Irvinglab 爾文實驗室 @irvinglab520]

🍎 In the PageFly page editor, titles such as Font weight, Line height, Letter spacing, and others are all common CSS properties. Many no-code platforms like Webflow also fill their backend interfaces with similar "CSS" property editing fields, with usage more or less the same across the board.

I like to call it: CSS Visual Interface.

🍎 If you're familiar with basic CSS syntax before using these editors, you'll adapt more quickly; or even without prior knowledge, these no-code platforms can help understand "CSS concepts" and web programming logic. This is also a great entry point for graphic designers looking to transition into web development or others interested in learning the basics of web development.

🚀 PageFly Beginner's Guide: Quickly Build Shopify Web Pages
https://t.co/1g10PknYl8

🚀 If you haven't used Shopify to build an e-commerce site yet, consider this article: Building a Customized Shopify Website Design in Two Months
https://t.co/bQFCq09CcC

🪴 Keywords: #Shopify #ShopifyApp #PageFly #ShopifyDesign #WebDesign

-

🍎 其實在 PageFly 頁面編���器中這些「標題」如 Font weight、Line height、Letter spacing 什麼的，只要熟悉 CSS 就會知道這些都是 CSS 常用的屬性，市面上很多所謂 No Code 的架站平台如 Webflow 等，在後台介面也是充滿著這些類似「CSS」屬性編輯欄位，用法大同小異。

我特稱之：CSS 視覺化介面

🍎 若你先熟悉基本的 CSS 語法，再來使用這些編輯器會更快進入狀況；又或者，即使沒有學過基本語法，透過這些架站平台可以幫助了解「CSS 概念」與網站程式邏輯，對於平面設計師想要轉職或其他想要學習網頁開發基礎的人也是一個不錯的入門方式。

🚀 精選文章 - PageFly 初入門：快速���立 Shopify 網頁
https://t.co/1g10PknYl8

🚀 若你還沒使用過 Shopify 建立電商網站，可以參考這篇文章：用兩個月打造 Shopify 客製化網站設計
https://t.co/bQFCq09CcC

🪴 關鍵字
#Shopify #ShopifyApp #PageFly #ShopifyDesign #WebDesign

[Irvinglab 爾文實驗室 @irvinglab520]

🍎 This article discusses very basic yet profoundly true concepts. These fundamental and crucial ideas are often overlooked but should always be kept in mind.

Read the article: The SEO checklist for beginners
https://t.co/eDiiqqGgyt

🥕 SEO content should focus on two very important things:

1. Keyword research
2. E-E-A-T (Experience, Expertise, Authoritativeness, Trustworthiness)

🥕 Updating old content

There's a common misconception about not updating old content. However, logically, if old content is not well-written, why not update it?

Content that meets Google's criteria for user needs is key. The original content should be continuously optimized and updated.

For my website blog, I update at least 3 to 4 times a month based on the condition of different old articles and continuously monitor keyword performance to maintain rankings, which has yielded good results so far!

#SEO #SEOBasic #SEOBeginners

-

🍎 這篇文章講的內容非常基礎，卻也非常真切，非常基本、非常重要卻容易被輕忽的概念，時時謹記在心

閱讀文章：The SEO checklist for beginners
https://t.co/eDiiqqGgyt

🥕 SEO 內容應��關注兩件非常重要的事情：
1. 關鍵詞研究
2. E-E-A-T（經驗、專業知識、權威性、可信度）

🥕 更新舊內容
以往聽過有人說不要去更新舊內容，但這以邏輯來推，舊內容寫得沒那麼好，為何不更新？

內容符合 Google 判定的使用者需求內容，這才是重點。原本的內容是要持續優化與更新的。

以我的網站部落格來說，「每個月」根據不同舊文章狀況不定期更新至少 3、4 次以上，並且持續關注關鍵字成效以保持排名在前，維護至今，成果還不錯！

[Irvinglab 爾文實驗室 @irvinglab520]

🍔 Adobe Illustrator has finally introduced AI-generated imagery, stepping up with the "Create Vector Graphics from Text" feature. This allows ideas to be transformed into illustrations using simple text prompts, supported by Adobe Firefly's generative AI, within Adobe Illustrator. This generates scalable, fully editable vector graphics.

Having long anticipated this development, especially as a subscriber to the Adobe Creative Suite with its powerful and feature-rich Illustrator, the initial outputs may not be as astonishing as those from many existing AI software. However, it's expected to continuously improve.

For an overview, visit the official website: https://t.co/K87icZUruH

🍟 Notably, Adobe Photoshop's Generative AI is impressively powerful.

🪴 Keywords: #Adobe #Illustrator #AI #AdobeFirefly #GenerativeAI

-

🍔 後來居上，Adobe Illustrator 終於也推出 AI 生成式圖片

使用「以文字建立向量圖形」功能，��構想轉化為插圖 使用簡單的文字提示，在由 Adobe Firefly 生成式 AI 提供支援的 Adobe Illustrator 中，產生可縮放、完全可編輯的向量圖形。

原本就期待很久，畢竟本來就付費 Adobe Creative Suite 全系列軟體，且功能強大豐富的 Illustrator 本身是主流的向量圖繪製工具。雖然產出的圖沒有
現有很多 AI 軟體那麼驚艷，但相信未來會持續進步。

前往瀏覽官網簡介：https://t.co/I0FOzBTgVA

🍟 話說 Adobe Photoshop Generative AI 是極致驚奇強大。

🪴 關鍵字
#Adobe #Illustrator #AI #AdobeFirefly #GenerativeAI

[Irvinglab 爾文實驗室 @irvinglab520]

🍏 I just discovered that Chrome DevTools allows you to directly copy CSS styles. What can this be used for?

🥕 Web Development: Save time adjusting styles by copying and tweaking them directly.

🥕 Web Design: Directly paste website CSS styles into Figma to quickly apply them in your design drafts.

When pasting into Figma, use a Figma plugin called "code to design" which you might find interesting to try: https://t.co/AT4v8eGrPW

🍎 If you don't have a Figma account yet, you can sign up for a free account, which is quite functional: https://t.co/GHRAEg1DgJ

Keywords: #Figma #FigmaPlugin #codetodesign #ChromeDev #CSS

-

🍏 我竟然現在才發現，Chrome Dev 開發者工具可以直接複製 CSS Styles，這可以做什麼用？

🥕 網站開發：節省慢慢調整的時間，直接複製後進行微調即可

🥕 網頁設計：直接將網站上的 CSS 樣式貼回 Figma 快速建立在設計圖中使用

貼回 Figma 時需使用一款 Figma plugin 叫做「code to design」，有興趣可以前往使用看看：https://t.co/AT4v8eGrPW

🍎 若你還沒有 Figma 帳號，可以註冊免費帳號，免費版就很好用了！
https://t.co/GHRAEg1DgJ

🪴 關鍵字
#Figma #FigmaPlugin #codetodesign #ChromeDev #CSS

[Irvinglab 爾文實驗室 @irvinglab520]

🚀 Minimog Shopify Theme - My Top Recommendation

For those seeking a Shopify theme with excellent UX design and visual quality, and if you're looking for designers and engineers familiar with this theme, I highly recommend Minimog. I've practically used it across several Shopify brand websites, and my satisfaction rating is 4.5 stars ⭐️⭐️⭐️⭐️

🎄 Explore the theme here: https://t.co/N8C4eZYxdn

Minimog features a minimalist visual design yet offers rich functionality. The developers continuously innovate, with each version iteration bringing notable improvements. It's suitable for both beginners and advanced designers and developers, thanks to its logical programming structure and ease of organizing CSS and other codes. Check out brand website examples I've worked on, such as JE22, GWS, Urban Drivestyle, CUiRASÉX, Cloudvocal, Le Moi-Peau, and more.

🎄 To learn more about the features and details of the Minimog Shopify theme, fill out this form: https://t.co/3xfHsFkYo5

🪴 Keywords: #Shopify #ShopifyTheme #Minimog

-

🚀 Minimog Shopify Theme - 目前我最推薦的版型

如果你希望使用 UX 使用體驗設計良好且視覺優質的 Shopify 版型，更甚者有熟悉此版型的網頁設計師與工程師可以詢問，那 Irving 爾文推薦 Minimog 版型，我已經實務上使用在數個不同的 Shopify 品牌電商網站中，目前我的滿意度為 4.5 顆星 ⭐️⭐️⭐️⭐️

🎄 前往瀏覽版型頁面：https://t.co/N8C4eZYxdn

Minimog 版型視覺設計簡約、功能卻很豐富，開發商不斷推陳出新，每個版本的迭代都有不錯的優化進步，很適合初入門的商家或進階使用的設計師和開發者使用，其程式架構的邏輯值得參考、網頁設計師容易整理 CSS 等程式碼。可以前往瀏覽 Irving 爾文執行的品牌網站案例：JE22、GWS、Urban Drivestyle、CUiRASÉX、Cloudvocal 雲聲、Le Moi-Peau 等

🎄 想了解更多 Minimog Shopify 版型特色與細節，可以前往填寫表單：https://t.co/3xfHsFkYo5

🪴 關鍵字：#Shopify #ShopifyTheme #Minimog

[Irvinglab 爾文實驗室 @irvinglab520]

🍏 Sometimes when writing CSS, you might run into a math problem reminiscent of middle school, possibly a linear equation? It's been a while since middle school for me, XD.

✏️ Problem:

In a recent project, I encountered a scenario where the centered content spanned 1140 pixels (px) in width, and the image needed to extend to the right edge without leaving any whitespace. The goal was to determine the relative length, y, on the left side, which would maintain a proportional margin regardless of the browser's width, ensuring that the image would scale up or down proportionally.

✏️ Solution:

I started by formulating the total length equation for this scenario: 1140px + 2y = 100vw.

From this, I derived the value of y: y = (100vw - 1140px) / 2.

Then, I applied this y value to the designated webpage element's CSS:
padding-left: calc((100vw - 1140px) / 2);

🍎 Done!

-

✏️ Notes:

🥕 px and vw are units, with y being the variable, making 1140px + 2y = 100vw a linear equation since it contains only one variable, y.

🥕 Webpage length units include:

📐 Absolute Length: px (pixels)

📐 Relative Length: vw (1vw = 1% of the viewport's width), where 100vw represents the full width of the browser window.

For further reading on CSS units: https://t.co/qZCeRVjeoV

🥕 And the CSS calc() Function: https://t.co/USWl4bJxvm

🥕 Sometimes, CSS might not work as expected due to an extra or missing space, especially in calc(), where a precise space before and after operators is crucial.

🪴 Keywords: #CSS #vw #px #calc #math #W3C #Shopify

-

🍏 只是寫寫 CSS 有時還是會碰到國中的數學問題，沒記錯的話這題應該是一元方程式？！離國中太久了 XD”

✏️ 題目：

最近在執行專案時實際遇到的案例，置中的內容範圍設定為長度 1140 px(像素)，此區段的圖片必須要延伸到右側底端不留空白。想要找出左側這個 y 相對長度：y 與整個網頁瀏覽器的整個寬度的比例，亦即無論網頁瀏覽器放大縮小，都可以維持 y 這個比例當作間距，而圖片也會跟著等比例放大縮小。

主要挑戰是：如何得出 y 值？

✏️ 解答：

於是我先寫出此情境下的長度總和： 1140px + 2y = 100vw

得出 y 值：y = (100vw - 1140px) / 2

然後再將 y 寫入指定網頁標籤的 CSS：
padding-left: calc((100vw - 1140px) / 2);

🍎 Done！

-

✏️ 備註：

🥕 px 和 vw 是單位，y 才是代數，所以 1140px + 2y = 100vw 只有一個代數 y，所以是一元方程式

🥕 網頁長度單位

📐 絕對長度 Absolute Length：px（像素）

📐 相對長度 Relative Length：vw（1vw = 1% of the width of the viewport 網頁的可視區域，viewport 就是網頁的可視區域），100vw 就是「整個網頁瀏覽器的寬度長」

閱讀 W3C 文件：https://t.co/qZCeRVjeoV

🥕 CSS calc() Function：
閱讀 W3C 文件：https://t.co/USWl4bJxvm

🥕 CSS 有時候不能運作也有可能是多一個或少一個空格，例如在 calc 中加減乘前後必須空一格，精準的一格，很硬

🪴 關鍵字：#CSS #vw #px #calc #math #W3C #Shopify

[Irvinglab 爾文實驗室 @irvinglab520]

🍉 Recently, I stumbled upon something that genuinely excited me: a software company has developed an app compatible with Figma to Shopify. This is akin to the Figma to WordPress plugin and the Figma to Webflow tool I've mentioned before, allowing designers to "copy and paste" their designs directly into these website-building platforms.

Considerations:

🥕Primarily focused on web layout.
🥕Limited to certain compatible apps.
🥕Costs may vary, potentially leading to additional expenses.

🪴 Keywords: #Shopify #Figma #FigmaToShopify

-

🍉 前陣子看到這個，難掩興奮之情，終於有軟體公司開發可以相容 Figma to Shopify 的 App，就像是早已出現的 Figma to WordPress 的 Plugin，和之前有分享過的 Figma to Webflow 一樣，讓設計師可以將設計圖「複製貼上」後，直接生成相容於這些架站平台的網頁。

注意事項
🥕 偏向網頁排版
🥕 限制於某些有相容性的 App 才能使用
🥕 費用或多或找額外增加（費用還真不便宜，好樣的）

🪴 關鍵字：#Shopify #Figma #FigmaToShopify

[Irvinglab 爾文實驗室 @irvinglab520]

🍔 Web UX Optimization Case Study: Managing Overabundant Sidebar Options in Web Design

🥃 In the realm of web design, effectively managing a sidebar overflowing with options presents a unique challenge. Ahrefs' layout offers a noteworthy solution worth examining.

Desktop Web Version: Ahrefs employs a scrolling mechanism for its sidebar to accommodate content extending beyond the viewport. This sidebar, fixed in position, serves as an accessible directory, aiding users in locating titles and information. A deliberate visual cue of the scrollbar encourages vertical exploration. Notably, this sidebar maintains a significant distance from the browser's scrollbar, enhancing the user experience by facilitating easier navigation choices between the sidebar and the page content, thus reducing the likelihood of mis-scrolls.

🥃 Mobile Web Version: The sidebar is transformed into a more conventional hamburger menu located at the top right corner. This design choice, however, may lead users to mistakenly believe the hamburger menu represents site-wide navigation rather than page-specific content guidance.

Explore this layout at: Ahrefs Academy.

🍟 How would you optimize the layout and user experience of this page? Your ideas are welcome.

🍟 My Suggestion: For mobile navigation, I propose utilizing a dropdown menu placed directly above the page content's title instead of at the top navigation bar. This approach more clearly signifies that the dropdown menu is dedicated to navigating the content of that specific page, while also freeing up the top navigation bar for additional functionalities.

-

🍔 Web UX 優化案例探討：網頁中，當側邊欄選項過多時，該如何呈現與設計互動？Ahrefs 的排版可以參考看看。

🥃 電腦版網頁：右側邊欄使用 Scroll 的方式包含超出版面的內容，除了將其固定位置作為目錄容易讓人找到標題尋找資訊，並用視覺刻意顯示 Scrollbar 的存在提示使用者可以上下瀏覽。

另外，你有沒有發現此側邊欄還與瀏覽器的 Scrollbar 保持相當的距離？這樣的好處是提升使用體驗，讓使用者在上下瀏覽網頁時比較容易去「選擇」側邊欄內還是整個網頁的畫面，若靠太近，則容易「滑錯」

🥃 手機版網頁：直接將右側欄位整改為常見的方式：右上角的漢堡選單，點擊即可展開��看。但這令人誤以為漢堡選單是整個網站的導覽選單，而非此頁面的內容導覽。

可以前往瀏覽看看：https://t.co/MnpuX7ooc2

🍟 如果是你，你會如何優化此頁面的排版與使用體驗呢？歡迎隨時分想你的點子

🍟 這邊提供我的想法：對於手機版網頁的導航設計，優化方向會是改用下拉式選單並放置在頁面內容的標題正上方，而非放在最頂端的導覽列的漢堡選單。這樣做的好處是，它較能明確地表示此下拉選單為此頁面的內容導覽，同時還能保留導覽列的空間用於其他功能。

🪴 關鍵字
#WebDesign #WebUX #UX #Ahrefs

[Irvinglab 爾文實驗室 @irvinglab520]

🍎 Few events generate as much anticipation as an Apple keynote, with Apple in first place and Shopify in second.

Visit Shopify Editions | Winter 2024: https://t.co/ceIMEmkX9w

🧃 What's impressive is that, despite years of optimization and changes, Shopify's backend UX remains neatly organized and user-friendly, making complex features accessible and easy to navigate.

🪴 Keywords
#Shopify #ShopifyEditions #ShopifyEditionWinter2024

-

🍎 很少有跟蘋果發表會那般令人期待，Apple 第一，而 Shopify 第二

前往觀賞 Shopify Editions | Winter 2024：https://t.co/ceIMEmkX9w

🧃 很讚的是：無論經過這幾年的優化與改變，Shopify 的後台 UX 使用體驗依然可以將複雜的功能選項整理得整齊簡潔、容易上手

🪴 關鍵字
#Shopify #ShopifyEditions #ShopifyEditionWinter2024

[Irvinglab 爾文實驗室 @irvinglab520]

🍔 Google's Recent "SEO Made Easy" YouTube Series

Google has recently launched a YouTube series titled "SEO Made Easy," featuring a cool new feature. It's not just the usual English-Chinese subtitles; they've added a Chinese voiceover, seemingly created using AI. It's worth checking out for a fun and interactive experience.

🍟 Introducing SEO Made Easy!
https://t.co/yExOMPPnUI

To access the feature, go to the YouTube video, click on the 'gear icon' for settings > Audio track > Chinese.

🍟 Additionally, here's the Google Search Beginner's Guide (Traditional Chinese) on YouTube, which is originally in Chinese.
https://t.co/4OoU59UPpn

🍺 These resources are perfect for SEO beginners looking for an easy and enjoyable way to learn while having lunch.

🥕 For a comprehensive guide to learning SEO, from beginner to expert, visit: https://t.co/kS4ltf5dOc

🪴 Keywords
#SEO #GoogleSEO #GoogleSearchCentral #SEOLearning #SEOMadeEasy

-

‍🍔 Google 官方最近推出的 SEO Mad Easy 的 YouTube 影片系列，有個很酷的功能，就是不只是以往的中英翻譯字幕而已，還可以直接「中文人聲發音」，顯然是用 AI 打造，可以去玩玩看。

🍟 Introducing SEO Made Easy!
https://t.co/yExOMPPnUI

連到 YouTube 影片，然後點擊影片中下方的「齒輪圖示」設定 > 音軌 > 中文

🍟 另外附上 Google 搜尋新手教學 (繁體中文), Traditional Chinese - YouTube，本來就是中文發音
https://t.co/4OoU59UPpn

🍺 以上都滿適合 SEO 新手初入門中午配飯邊吃邊輕鬆看看的影片系列

🥕 全方位 SEO 免費自學指南 – 從新手到專家的學習資源
https://t.co/3ohYL5RfiQ

🪴 關鍵字
#SEO #GoogleSEO #GoogleSearchCentral #SEOLearning #SEOMadeEasy

[Irvinglab 爾文實驗室 @irvinglab520]

🚀 AI Revolutionizes WordPress Plugin Search with CodeWP

The introduction of AI prompts for searching WordPress plugins is a stunning innovation, especially in the wake of the ChatGPT phenomenon. This tool is a testament to the rapid advancement of AI in various applications.

Gone are the days of relying solely on specific keywords on the official WordPress plugin page. Now, with CodeWP's AI-powered search, users can input conversational phrases to find relevant plugins. For example, typing "Something to make my images load faster" brings up a list of suitable plugins, showcasing the AI's ability to understand and process natural language inputs. The more detailed the query, the more accurate the results. However, it's important to note that the tool performs best with English inputs; my tests with Chinese inputs yielded less accurate results.

🚀🚀 CodeWP's online tool, designed specifically for WordPress, operates similarly to ChatGPT. Users can simply articulate their needs in a conversational manner, and the AI generates the necessary code in the backend. This innovation significantly enhances the efficiency and speed of coding, reducing the mental load of structuring code. It's a game-changing development that could very well shape the future of WordPress.

Explore more on their official website: https://t.co/QZUstu7ioC

🪴 Keywords
#WordPress #WordPressPlugin #AIPluginSearchForWordPress #CodeWP

-

🚀 WordPress Plugins 外掛搜尋用 AI Prompt 輸入提示文字即可列出相關的外掛清單，初次看到這個有驚艷到！ChatGPT 大爆發後這類的 AI 工具也是大爆發！

頁面更有科技未來感之外，以往直接到 WordPress 官方外掛頁面搜尋「關鍵字」去找外掛，而在這頁面輸入「口語化的文字」用 AI 搜尋即可，例如輸入「Something to make my images load faster」就會列出很多相關的結果，而並非一定要「符合關鍵字」才行，輸入���細節越多越好。但輸入英文字才會比較精準，我測試輸入中文會差很多。

🚀🚀 這是由 CodeWP 網站推出的線上工具，專為 WordPress 打造的，同樣跟 ChatGPT 一樣用對話的方式說出你的需求後就直接產生程式碼於後台執行，提升轉寫程式碼的效率與速度，省下不少精力去構思程式碼架構，這真的是「This is the future of WordPress」未來已來，準備成為下一個 game changer？！

前往瀏覽官網：https://t.co/QZUstu7ioC

🪴 關鍵字
#WordPress #WordPressPlugin #AIPluginSearchForWordPress #CodeWP

[Irving Chen @moonerer]

I use @usefathom for simple, privacy-focused website analytics and I think you should too! Get $10 off with my link! https://t.co/h6HRy50ajy #thesimpleandethicalchoice

[Irving Chen @moonerer]

@atulkumarxx Send

[Irvinglab 爾文實驗室 @irvinglab520]

🍏 How to Download SVG Files from a Website?

Upon inspecting a web page, you may find that the image is not in a common format like .jpg or .png, making it impossible to download directly by right-clicking. However, you notice that the image is in SVG format, represented as <svg> code. To download it, follow these steps:

1. Use the Chrome browser and right-click on the SVG image on the web page.
2. Choose "Inspect" to open the developer tools.
3. Locate the SVG code, right-click, choose "Edit as HTML," select all the code, and copy it.
4. Open your Figma file and paste the copied SVG code.
5. Done!

🍎 You can watch higher-resolution instructional videos on the computer https://t.co/KeEZnibPkv

Regarding Figma selected articles: Best Figma Plugins for Senior Web Designer in 2023
https://t.co/mWF8DgEXCJ

🪴 Keywords: #SVG #Figma #FigmaTips #WebDesign

-

🍏 如何下載網頁中的 SVG 檔？

檢查了一下網頁發現不是常見的圖檔格式如 .jpg 或 .png 等，無法直接按右鍵直接下載怎麼辦？但發現是一堆程式碼，而且是 SVG 圖檔格式 <svg>，複製 SVG 那段程式碼，直接貼到 Figma 中

🍏 執行步驟

1. 使用 Chrome 瀏覽器，在網頁中該 SVG 圖上按右鍵 > 檢查 > 開啟開發者工具
2. 找到 SVG 程式碼，按右鍵 > Edit as HTML > 全選所有程式碼 > 複製
3. 開啟 Figma 檔案 > 貼上
4. Done

🍎 可以用電腦觀看較清晰的操作影片
https://t.co/KeEZnibPkv

關於 Figma 精選文章：資深網頁設計師常用的 Figma Plugin 推薦 2023
https://t.co/FC57OrSJU0

🪴 關鍵字
#SVG #Figma #FigmaTips #WebDesign

[Irvinglab 爾文實驗室 @irvinglab520]

🍉 Visualizing SEO Keyword Performance with a "Bubble Chart"

🥕 For an official Google video explaining how to analyze search performance data using bubble charts, you can visit this link:
https://t.co/EzZAE39mQX

🪴 Keywords: #SEO #Google #LockerStudio #Irvinglab

[Irving Chen @moonerer]

@jessjoyce B2B

[Irving Chen @moonerer]

我彙整了精選的線上課程以及書籍推薦，領域包含 UIUX 設計、網站開發、網站分析、SEO 搜尋引擎行銷、品牌設計、影片剪輯、動態設計、社群行銷、設計接案、行銷提案等

📷 設計與行銷線上課程精選 - Irving 爾文
https://t.co/MimymGJCbZ

學海無涯，也開始拓��其他相關領域，相輔相成