重金屬AI工程師的Coding分享

IzzySixxi 發表在 痞客邦 留言(0) 人氣(2)

林先生下定決心轉職前端工程師,克服學習中的困難後,現在切版和網站開發一把罩!

(繼續閱讀...)

文章標籤

IzzySixxi 發表在 痞客邦 留言(0) 人氣(13)

(繼續閱讀...)

文章標籤

IzzySixxi 發表在 痞客邦 留言(0) 人氣(8)

想當前端工程師的你,請不要錯過CSS入門課:浮動屬性

(繼續閱讀...)

文章標籤

IzzySixxi 發表在 痞客邦 留言(0) 人氣(5)

想當前端工程師的你,請不要錯過CSS入門課:定位元素
想要設計出更複雜的網頁前端版面，前端工程師都必須知道 CSS 的所有「position 屬性」。如下所示，它有一大堆屬性值，這些屬性值不好理解且也不好記憶，但稍一設定不好，就會讓許多 CSS 區塊落入走鐘、重疊等窘境。本篇會將這些屬性一個個介紹如下，也建議各位想當前端工程師的學員們請把這頁加入網頁書籤中，以便日後方便查詢。
See the Pen CSS:Position 範例 by Tedutw (@Tedutw) on CodePen.
CSS：Positioning Elements 定位元素
CSS 定位屬性（positioning properties）是用來定位元素使用。它可將一個元素置於另一個元素之後，還可以指定當某個元素的內容太大時該如何做。
所有的元素都可用 top（上）、bottom（下）、left（左） 與 right（右） 屬性來定位。但若沒事先將「定位屬性」設置好的話，以上四種屬性（top、bottom、left 與 right）皆不起作用。它們亦會依照定位方法的不同，而以不同的方式呈現。
靜態定位（position: fixed）
「靜態定位（position: fixed）」是所有 HTML 元素的預設值。當元素為「靜態定位（position: fixed）」時，會遵循「Normal flow （指從左到右、上到下的常態佈局）」來排列。
靜態定位的元素不受 top、bottom、left 與 right 屬性的影響。如下例，儘管我們 CSS 設定為「top: 30px;right: 5px;」（上方距離30px、右側距離50px），被靜態定位的 HTML 元素，排版仍不受這些 CSS 影響。
See the Pen position_static by Tedutw (@Tedutw) on CodePen.
固定定位（position:fixed）
固定定位（position: fixed）的元素會相對於瀏覽器視窗來定位，這意味著即便頁面捲動，它還是會固定在相同的位置。
不同於靜態定位，固定定位（position: fixed）的元素可由 top、bottom、left 與 right 屬性的來指定位置。我們將上一段「靜態定位（position: fixed）」的範例，其中的 CSS 「position:static」改為「position:fixed」，則排版受到「top: 30px;right: 5px;」（上方距離30px、右側距離50px）的屬性影響，如下所示：
See the Pen position_fixed by Tedutw (@Tedutw) on CodePen.
固定定位（position: fixed）的元素會從「Normal flow （從左到右、上到下的排列）」的常態佈局中移除。所以其他未設定為「固定定位（position: fixed）」的元素，仍然依照「左到右、上到下」的排列，彷彿其中不存在固定定位的元素般。而 固定定位的元素可與其他的元素重疊。
相對定位（position:relative）
所謂的「相對」，是以原本正常的位置為中心點，依照元素偏移原本位置多少而定數值。相對定位（position:relative）的元素可以結合 top、bottom、left、right 等屬性，使其元素「相對地」偏移原本該出現的位置。
如以下的例子，我們在原本的位置安插粉紅色背景的文字（文字為「相對定位」）區塊，並且設定該區塊相對於原本該出現的區塊「上方留空間 5px（top: 5px;）、 左方留空間 5px（left: 5px;）」。
See the Pen position_relative by Tedutw (@Tedutw) on CodePen.
相對位置的元素內容可移動到指定位置、也可以與其他的元素重疊。但是該元素原本該出現的正常位置，會被保留而不會消失。
相對值不能用於 table cells、columns、column groups、rows、row groups 或是 captions。
絕對定位（position:absolute）
不得不說，絕對定位（position:absolute）是網頁前端比較弔詭的定位屬性。absolute 與 relative 的行為很像，不一樣的地方在於 absolute 元素的定位是相對於父層元素的位置、relative 元素則是相對於他本該出現的位置。
當元素的 position 設定為 absolute 後，它就會看它父層的元素是否有被設定為 relative、absolute 或是 fixed，若有，則以父元素為定位的基準點；若無，則以該網頁頁面("body")的左上角為定位點置，看起來就是這張網頁的絕對位置一樣。
以下範例為兩個絕對定位（position:absolute）元素的範例，右上方的元素的父元素 position 沒有設定，因此被默認為「static」——也就是不屬於 relative、absolute、fixed 或是 inherit 的任一個，因此該元素會以整個網頁區域為定位點，從最上方往下移動 30 px、從最右方往左移動 30 px；而另一個元素的父元素 position 是 relative，因此會以父元素為定位點，從最上方往下移動 30 px、從最右方往左移動 30 px。
See the Pen position: absolute by Tedutw (@Tedutw) on CodePen.
同學們可以點擊以上範例中左上角的「HTML」與「CSS」按鈕來練習 coding。
所有的 CSS 版面配置：Positioning Elements 定位元素介紹到此結束。光看以上的解釋，會容易搞混。此時，不妨回到此章節的最前面的範例，點擊範例框左上角的「HTML 」與「CSS」按鈕來研究原始碼，並且親自練習一次這些 CSS 碼，試試各種不同的 position 屬性所呈現的效果。未來想要成為前端工程師的話，就請多練習幾遍。本系列「前端工程師課程」下一章即將介紹網頁 layout 基石之一——浮動（float）屬性。

(繼續閱讀...)

文章標籤

IzzySixxi 發表在 痞客邦 留言(0) 人氣(26)

想當前端工程師的你一定要看這篇關於JavaScrip的文章!

(繼續閱讀...)

文章標籤

IzzySixxi 發表在 痞客邦 留言(0) 人氣(33)

(繼續閱讀...)

文章標籤

IzzySixxi 發表在 痞客邦 留言(0) 人氣(4)

想學習網路前端的人,因為受到武漢肺炎疫情的影響,有大幅增多的趨勢.

(繼續閱讀...)

文章標籤

IzzySixxi 發表在 痞客邦 留言(0) 人氣(18)

前端工程師.後端工程師.全站工程師傻傻分不清楚嗎?看完這篇保證秒懂!
業界對於網站開發工程師的需求，一直沒有停止過，也吸引很多非本科系出身的同學想轉職到網站開發工程師。但是常常聽到網站開發工程師還有分成「前端工程師」、「後端工程師」，還有綜合上述的「全站（full-stack）工程師」。這三種職位到底差在哪？該選哪種學習比較好上手？因此本篇文章幫助你先了解網站開發的分工定義、技能需求，才能幫助你找到適合自己的目標、更有效率學習，更快達成轉職網站開發工程師的願望。
前端工程師
網站的「前端」是與用戶直接交互的部分，包括你在瀏覽網頁時接觸的所有視覺內容--從字體到顏色，以及下拉菜單和側邊欄。這些視覺內容，都是由瀏覽器解析、處理、渲染相關HTML、CSS、Javascript 文件後呈現而來。
技能與工具
前端開發，就是要創造上面提到的網站面向用戶的部分背後的代碼，並通過建立框架，構建沉浸性的用戶體驗。為了實現這個目標，開發需要熟練運用下列語言、框架、工具庫——三大語言：HTML，CSS，和Javascript。
此外，掌握jQuery 和LESS 等工具庫也很重要，它們能幫助開發者以更高效的方式編碼；很多前端開發商也要求Ajax 方法的使用經驗，它可以幫助你使用Javascript 在後台從服務器拉取數據，協助實現頁面的動態加載。
舉例來說，前端工程師的工作專注於「房屋」裝修，而蓋房子的工作由後端開發者負責。透過一些專門的工具，前端開發者與設計師/用戶體驗分析師密切合作，幫助構建原型或是線框圖，參與產品開發到發布的全過程。
有一些前端工程師甚至能準確定位影響用戶體驗的特定問題，並給出建議或是代碼解決的方案，對產品設計帶來積極影響。除了在專業能力外，與其它團隊協作，以理解特定目標、需求、機遇，以及高效的執行力也非常重要。
這聽起來工作內容很多，但也回報豐厚。「我是一名技術人員，也是一名設計者，在數字平台上使用標記語言和代碼修改視覺元素並與之互動是很自然而有趣的體驗，」有八年前端開發經驗的Mikey Ilagan 說「這讓我能夠直接影響到用戶體驗，操縱應用和網站裡用戶所見並直接與之交互的元素，這非常棒！」
總之，前端開發者要為後端開發者搭建的「房屋」進行內部設計和裝修工作。裝潢風格由房屋所有者指定。Apptix 的產品市場負責人Greg Matranga 表示：「前端開發者有時更容易為他們的工作感到振奮，因為他們有更廣闊的空間發揮自己的創造力。」
後端工程師
是什麼給網站前端提供支持？數據存放在哪裡？這就涉及後端內容了。網站後端包括服務器、應用還有數據庫。後端開發者構建並維護這些組件，為網站提供多方面支持。
由上圖可以看出，UDN 的讀者來源，大部分來自 Search （搜尋引擎）輸入特定關鍵字後，進到 UDN 的網頁；而東森新聞雲的讀者最多都是從 Facebook 等 Social 社群網站的連結進來。
技能與工具
為了讓服務器、應用、數據庫能夠彼此交互，後端工程師需要具有如下技能：
用於應用構建的服務器端語言：PHP, Ruby, Python, Java, .Net 等；
數據相關工具：My SQL , Oracle, SQL Server等；
PHP框架：Zend, Symfony, CakePHP等；
版本控制工具：SVN, CVS , Git 等；
還要熟練使用Linux 作為開發和部署環境。
後端開發者使用這些工具編寫乾淨、可移植、具有良好文檔支持的代碼來創建或更新 Web 應用。但在寫代碼之前，他們需要與客戶溝通，了解其實際需求並轉化為技術目標，制定最有效且精簡的方案來進行實現。
「我熱愛後端開發因為我喜歡操縱數據」，資深後端開發者就職於 Wildbit 的 JP Toto 說。「現在共有和私有 API 已變成移動設備、網站以及其它互聯繫統交換數據的必備通道。創建對大家有用的API 是我工作裡非常鼓舞人心的部分」。
全端工程師
全端工程師，最初是 6 年多以前由 Facebook 帶動的概念。全棧的核心，是指這批開發者能夠承擔包括前端、後端在內的所有功能開發任務，他們擁有一個技能全家桶。
「能夠同時承擔服務器端和客戶端工作會為你帶來更多機會，」 Grovo 的全端工程師 Federico Ulfo 說「當然這也就意味著更多的挑戰。以廚藝作類比，掌握烹飪和烘焙都需要時間與經驗積累，同時掌握兩者要花費更多精力。照著菜譜做誰都可以，我此處所說的是做出真正美味東西的能力。」
技能與工具
全端工程師也通常在服務器端進行編程工作，但他們熟練前端語言，能夠操縱網站面向用戶的部分。基本上可以形容他們是百事通。
全端工程師需要對 Web 架構的每一個層次都有足夠的了解：搭建和配置Linux 服務器，編寫服務器端API，利用客戶端Javascript 代碼驅動應用，將設計層面的東西轉化到實際的CSS 代碼。掌握並使用大量工具的同時，全端工程師需要敏捷地分配服務器端和客戶端任務，提供解決方案並對比不同方案的優劣。
 
參考連結:

SEO教戰手冊(一)誰是你的競爭者?

SEO教戰手冊(二)分析競爭者網站的數據

Javascript入門#1在網頁中嵌入JavaScript

8大理由讓你秒懂為什麼要學Python!!(上)

8大理由讓你秒懂為什麼要學Python!!(中)

8大理由讓你秒懂為什麼要學Python!!(下)

2天考取Google Ads證照！新手廣告投放攻略

擺脫設備工程師血汗職涯, 零基礎的我成功轉職 Python 資料工程師

44歲媽咪順利轉職網頁設計師, 家庭事業都得意

零基礎如何花 14 小時考取 GoogleAds 認證？五種 GoogleAds 廣告不藏私攻略

從無到有 挑戰14小時取得Google證照

(繼續閱讀...)

文章標籤

IzzySixxi 發表在 痞客邦 留言(0) 人氣(1)

用Python技術設計夢想人妻不是夢?這是真的假的啦XD(上)

(繼續閱讀...)

文章標籤

IzzySixxi 發表在 痞客邦 留言(0) 人氣(12)