Lidemy MTR 第四期官網 - 打雜小弟心得

發表於 2020-05-09 分類於 frontend

前言

這篇心得預計不會有什麼價值，就是想發廢文，讚讚。

MTR 第四期官網誕生的過程中，我擔任甚麼角色？

打雜小弟，Totally 打雜。

MTR 官網運用的技術為 pug, scss, gulp, babel, browserify，而我主要做的事情就是用 pug + scss 刻出設計稿的頁面，少部分用 Vanilla JS 簡單的操作 DOM，閒暇之餘看版面、文案上有沒有什麼問題，然後幫忙加上各種連結，對啦就是雜事。

所以環境建置、效能優化、部屬、設計甚麼的不是我弄的，而是其他偉大的協作者搞定的，所以在過程中我就是接收打雜任務並負責執行，大部分任務都在處理切版，偶爾機動性的處理跨瀏覽器問題或寫寫 Vanilla JS、解解 bug。

獲得了什麼？

主要是切版（pug、scss）。

在前端的路上我一直都是切版很弱的人，倒也不是切不出來，而是寫不出好閱讀的架構，又或者是切版速度沒那麼快，所以這次是很好的練功契機，另外協作的夥伴在切版屬於很有經驗的人，很多開發上的技巧可以在協作中學習（就是偷偷吸收功力）

💪 PUG

過去只有用過一次 pug，那時候見識淺薄，以為只是寫 tag 比較方便的 HTML，不知道還可以用 JS 來快樂寫 HTML，這次開發驚覺這件事情後才知道 PUG 棒在哪！其實寫起來有點像 React 的 JSX，下面就寫寫我在開發中常用的技巧吧，另外因為開發過程都是用 JSX 方式來思考的，所以會常常用 JSX 協助講解。

Iteration

在這次開發中最常使用的技巧就是 Iteration，像是下面這樣：

ul
  -
    var headerContents = [
      {
        title: "程式基礎",
        week: "week1 - week5",
        anchor: "anchor-part1"
      },
      {
        title: "網站開發",
        week: "week6 - week10",
        anchor: "anchor-part2"
      },
      {
        title: "探究原理",
        week: "week11 - week20",
        anchor: "anchor-part3"
      },
      {
        title: "專案開發",
        week: "week21 - week26",
        anchor: "anchor-part4"
      },
    ]
  each content in headerContents
    a(href=`#${content.anchor}`)
      li.syllabus__header-text = content.title
        p = content.week

先宣告一個 object 後，用 Iteration 把物件內容一個一個丟出來放進 HTML tag 之中，使用起來和 JSX 有 87% 像，上面的 code 換成 JSX 大概會像是這樣：

<ul>
  {
    headerContents.map(content => {
      return (
        <a href={`#${content.anchor}`}>
          <li className="syllabus__header-text">
            {content.title}
            <p>{content.week}</p>
          </li>
        </a>
      )
    })
  }
</ul>

Mixin

就是 function。

mixin list_item(item)
  a(href= item.src)
    li = item.content
      p = item.text

JSX:

function renderListItem(item) {
  return (
    <a href={item.src}>
      <li>
        {item.cotent}
        <p>{item.text}</p>
      </li>
    </a>
  )
}

好用的地方不只在這，在 Mixin 當中還能加上判斷式，因此使用上就更彈性了。

mixin list_item(item)
  a(href= item.src)
    li = item.content
      p = item.text
  if(block)
    block

extends

可以繼承頁面內容，但可以做到彈性的改動，如果有固定的 header、footer 或每一頁都會出現的內容，extends 就很好用。

include

可以把整個檔案引入，相當於你把整個檔案貼上到某個片段。

💪 SCSS

過去用 SCSS 我只會用巢狀、& 選擇器，偶爾再用用變數而已，超級不擅長。

這次開發最大的收穫是可以觀察到擅長使用這項工具的人是如何運用的。

常用 mixin

media query

$breakpoints: (
  'mobile-s': $width-mobile-s,
  'mobile-m': $width-mobile-m,
  'mobile-l': $width-mobile-l,
  'tablet': $width-tablet,
  'tablet-s': $width-tablet-s,
  'desktop-s': $width-desktop-s,
  'desktop-m': $width-desktop-m,
  'desktop-l': $width-desktop-l,
  'desktop-xl': $width-desktop-xl
);

@mixin mq($width) {
  @if map_has_key($breakpoints, $width) {
    $width: map_get($breakpoints, $width);

    @media screen and (max-width: $width) {
      @content;
    }
  }
}

// 使用的時候就像這樣

.content {
  width: 500px;

  @include mq('tablet') {
    width: 200px;
  }
}

pseudo
使用偽元素時常用到的 mixin。

/* pseudo */
@mixin pseudo($display: block, $content: '') {
  content: $content;
  display: $display;
}

position

@mixin absolute($args...) {
  @include position(absolute, $args...);
}

@mixin relative($args...) {
  @include position(relative, $args...);
}

@mixin fixed($args...) {
  @include position(fixed, $args...);
}

position 很常搭配上面的 pseudo mixin，用起來就會是這樣：

.content {
  width: 500px;

  &:before {
    @include pseudo(inline-block);
    @include absolute($top: 2px, $left: 5px)
  }
}

非常滴好用！

extends

當有相同的樣式時，用 extends 就會很方便，編譯後的 css 檔案也會比較小，extends 的使用方式應該隨意找都一大把，就不贅述。

網站上線後感想

其實蠻感動又緊張的，感動的是終於有時間去約會了，爽啊啊啊！！緊張的點是怕上線後有一堆問題，又或者是怕使用者回應不佳，但看到分享後底下的留言都是「設計好美！」、「速度很快欸」就放心了，深深為合作的夥伴們感到驕傲，阿我沒做什麼就不替自己驕傲了。