自由工作者聽起來是一個讓人十分嚮往的工作。事實上他們往往還要兼顧會計、稅務等工作，不僅分散了個人精力，也使得自身難以專注在創作上。但其實這樣的情況可以透過AI工具來幫忙，透過工具來高效處理繁瑣、繁雜的事務。

本文列舉出富比世推薦的19個AI工具，從行銷、會計、腦力激蕩、設計到專案管理，讓自由工作者輕鬆找到適合自己的數位工具。

行銷與內容生成

• ChatGPT

• ContentShake AI

• Social Content AI

• AdCreative.ai

• Jasper AI

行銷是自由工作者獲取穩定客源的重要途徑。由OpenAI所開發的ChatGPT聊天機器人自面世以來便受到不少行銷人的青睞。而ContentShake AI是由研發關鍵字工具的Semrush所推出，能基於SEO進行內容創作，並根據Semrush的SEO排名產製出針對不同受眾的內容。AdCreative.ai 則是一個廣告生成工具，能透過分析品牌元素生成多個不同的廣告選項。可以透過指令生成符合需求的文字或圖片，節省大量廣告構思時間。至於Social Content AI和Jasper AI則能夠生成社群貼文，對希望拓展社群影響力的自由工作者尤為實用。

稅務與會計

• April

• TaxGPT

財務管理和報稅是讓許多自由工作者頭痛的難題。April和TaxGPT可以協助記錄開支、計算稅務，甚至提醒報稅時間，使自由工作者專注在客戶服務而非複雜的財會事務上，對於那些缺乏財務背景的使用者，能有效地簡化會計操作。

腦力激盪

• ChatGPT

• Hootsuite's AI Caption Generator tool

• Hootsuite's OwlyWriter AI

• NoteGPT's AI Idea Generator

想要在社群上發個貼文，但卻發現自己詞窮怎麼辦？Hootsuite系列原是一款社群平台管理平台，其AI Caption Generator 和 OwlyWriter AI 工具能夠幫助產製社群貼文。而NoteGPT’s AI Idea Generator則能夠透過輸入提示詞、調整語氣參數的方式，生成1-5個寫作建議。

設計

• Canva（Magic Design功能）

• Adobe Express

• Midjourney

• Figma AI

有時候需要快速地做出海報、簡報、賀卡等，卻苦於不熟悉復雜的設計工具，Canva和Adobe Express都具備大量的模版，同時也能運用其AI功能快速調整設計，即使是設計小白也非常好上手。在網路上找不到符合需求的圖片時，Midjourney作為一款生圖工具能幫你快速產製心目中的理想圖像。Figma則是一款線上介面設計工具，能夠繪製使用者介面，UI、UX、網頁、App應用程式等的原型。

專案管理

• ClickUp

• Monday

• Asana Intelligence

• Kroolo

對於管理多個項目的自由工作者來說，ClickUp、Monday和Asana Intelligence能簡化任務分配和追蹤進度，而Kroolo則憑借其靈活整合性提供一站式的解決方案，能將目標、任務、專案和OKR指標等整合到一個儀表板，特別適合管理需要多方協作的複雜項目。

Read More

Setting inline styles

To set the inline style of an element, you use the style property of that element:

element.style
Code language: CSS (css)

The style property returns the read-only CSSStyleDeclaration object that contains a list of CSS properties. For example, to set the color of an element to red, you use the following code:

element.style.color = 'red';
Code language: JavaScript (javascript)

If the CSS property contains hyphens (-) for example -webkit-text-stroke you can use the array-like notation ([]) to access the property:

element.style.['-webkit-text-stock'] = 'unset';
Code language: JavaScript (javascript)

Read More

瀏覽器接收到伺服器的回應後，都會自動去判讀網頁的狀態，其中的 Http Status代碼的意思如下：

Read More

CSS 自定義屬性：調整大小的技巧

如果我們想要把內容鎖定在一個頁面的高度，在電腦版很自然會想到用 100vh 去設定，但在 safari 會遇到一個問題就是你預期他高度是一個螢幕高，但 header 跟底下的 nav 會把螢幕蓋掉，這樣就會發有一部分被遮掉了，這個用這張圖來看就很清楚。

在 JavaScript 中，您始終可以通過使用全局變量來獲取當前視口的值window.innerHeight。該值將瀏覽器的界面考慮在內，並在其可見性更改時更新。訣竅是將視口值存儲在 CSS 變量中，並將其應用於元素而不是單元vh。

假設我們的 CSS 自定義變量--vh用於此示例。這意味著我們將希望像這樣在我們的 CSS 中應用它：

.my-element { 

Read More

STEP 1:

準備HTML

<div class="box">
<p class="JQellipsis">Astral Web是一群對網路充滿熱情的團隊，我們相信網路的力量無遠弗屆，人人都有機會開創網路事業。一邊享受網路事業帶來的樂趣，一邊秉持著工作即是玩樂的精神，不斷激發各種靈感為客戶提高收益，提供最完善的服務。</p>
</div>

STEP 2:

載入jquery

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

STEP 3:

<script>
$(function(){
    var len = 50; // 超過50個字以"..."取代
    $(".JQellipsis").each(function(i){
        if($(this).text().length>len){
            $(this).attr("title",$(this).text());
            var text=$(this).text().substring(0,len-1)+"...";
            $(this).text(text);
        }
    });
});
</script>

Read More

我們在設計RWD 網頁時，常常會多個螢幕去測試字體大小問題，有時候在手機文字呈現時太小，在PC大螢幕時又太大。

一般來說在編寫  CSS 的時候，都習慣將網頁上的字體大小 font-size 使用 rem、em、px等單位，但是如果我們要寫 RWD 的情況時，在Pc上測試標題字看起來很舒適，但是一到手機版又會顯得太大。

em : 元素內父層定義的文字大小，em是相對於父層文字大小，例如：父層16px，5em 為 80px。

rem : 元素底層定義的文字大小，rem是相對於底層文字大小，例如：底層預設為20px，2rem為40px。

vw：viewport width 的縮寫。是相對螢幕寬度大小的百分比例。舉例來說，當視窗寬度為 1000px 且 font-size: 1.5vw 的時候，字體的大小就是 1000*1.5% = 15px。手機版414px 寬度時9vw就是414*9% = 37.26px。

Read More

 

CSS Flexbox 是排版模組，它包含了四種類型：

• Block, for sections in a webpage
• Inline, for text
• Table, for two-dimensional table data
• Positioned, for explicit position of an element

Read More