2020年9月30日 星期三

【筆記】在Vue裡使用 vue-cli3,引入MarkDown檔

因為要編寫技術文件,考慮之後用md檔來寫是最快的,框架是Vue,
所以開始尋找可以把md檔import進vue,而且會自動轉譯成HTML的方法。

試了2個套件,還是不太貼近需求

最後選擇的是這個VUE-CLI3, vue-markdown-loader

以下記錄使用方式

安裝
npm i vue-markdown-loader -D
npm i vue-loader vue-template-compiler -D
# 樣式
npm i github-markdown-css -D
npm i highlight.js -D

配置
// vue.config.js 如果没有就在項目根目錄新建
module.exports = {
chainWebpack: config => {
config.module.rule('md')
.test(/\.md/)
.use('vue-loader')
.loader('vue-loader')
.end()
.use('vue-markdown-loader')
.loader('vue-markdown-loader/lib/markdown-compiler')
.options({
raw: true
})
}
}

使用
<template>
<!-- class markdown-body 必須加,否則標籤樣式會出現問題 -->
<div class="markdown-body">
<markdown />
</div>
</template>

<script>
// 引入 markdown 文件,引入後是一個组件,需要在 components 中註冊
import markdown from '@/assets/ApiDocument.md'
// 代碼樣式
import 'highlight.js/styles/github.css'
// 其他元素使用 github 的樣式
import 'github-markdown-css'
export default {
components: {
markdown
},
}
</script>


代碼塊中的語法高亮

輸入

``` js
export default {
  name: 'MyComponent',
  // ...
}
``` 

export default {
  name: 'MyComponent',
  // ...
} 

``` html
<ul>
  <li
    v-for="todo in todos"
    :key="todo.id"
  >
    {{ todo.text }}
  </li>
</ul>
``` 

<ul>
  <li
    v-for="todo in todos"
    :key="todo.id"
  >
    {{ todo.text }}
  </li>
</ul>


備註

在安裝完後, npm run serve 後顯示錯誤,
原來是vue版本太舊,需要更新到版本 2.6.12
更新時也遇到問題,跑完更新後還是一直維持在 2.6.11
後來PG大大直接心一橫,把package.json內的 "vue": "^2.6.11"
直接改成 "vue": "^2.6.12"
vue渲染後,就完美的把md檔轉譯成html啦~撒花~~撒花~~再撒花~~




2019年12月6日 星期五

【筆記】SCSS 文字刪節號-webkit-box-orient: vertical;與 "autoprefixer: off"

在CSS裡,文字超過行數限制時會自動顯示"..."的刪節號,

SCSS語法如下
@mixin text-truncate() {
   display: -webkit-box;
   overflow: hidden;
   text-overflow: ellipsis;
   line-height$line-height-base;
   word-wrap: break-word;
   white-space: normal;

 /*! autoprefixer: off */
   box-orient: vertical;
   -webkit-box-orient: vertical;
  /* autoprefixer: on */
   }

@for $i from 1 to 6 {   .text-truncate-#{$i} { @include text-truncate; max-height: #{$line-height-base * $i}em ; -webkit-box-orient: vertical; -webkit-line-clamp$i; } }


2019年10月25日 星期五

【筆記】記錄Bootstrap 引入方式,以便日後無痛更新


用Bootstrap當SCSS教科書一段時間後,一邊參考一邊實做,修改成了自己想要的風格樣式。


就在BS的樣板已經被我改得面目全非的時候,我發現了一件天殺的事實。
BS這個佛心的開源樣板,他會覺得自己不夠好,
然後他會修正Bug,會增加組件,會調整變數,
總之....天殺的...
他是會更新的...他是會更新的...他是會更新的...


這時如果我把新版本上面的SCSS,下載,覆蓋,
那我過去幾個月胡搞瞎搞的專案,就會塵歸塵...土歸土...一切化為烏有

2019年10月4日 星期五

[感想]好的CSS與樣板框架的寫法


  1. css一開始要先宣告語系@charset "utf-8";

    因為在編譯、轉譯、上版(系統也許會針對自動合併,自動化執行一些合併行為),
    過程中可能會造成『中文註解』被編譯成亂碼,
    造成CSS原本的註解,有開始但是沒結束,頁面就會破版。



    最一勞永逸的方式,還是只用英文或數字撰寫。

2019年8月27日 星期二

【吐槽】處女座能勝任又不會被AI取代的工作

天候異常造成生態浩劫,能毀了一整個生態鏈。
科技進步也常顛覆整個產業,造成一堆人失業。


今天無意看到『AI 大勝 20 位人類律師!26 秒完成 5 份協議 完成頂尖律師 92 分鐘工作』
https://www.limitlessiq.com/news/post/view/id/3715/
 AI 大勝 20 位人類律師!26 秒完成 5 份協議 完成頂尖律師 92 分鐘工作

▲以色列特拉維夫的LawGeex所研發的法律人工智慧平台完勝人類。(圖/翻攝自 timesofisrael)


2019年6月12日 星期三

【筆記】IOS 切圖注意事項

ios在字體大小、圖片大小、距離標註,都以px為基本單位。
畫布尺寸
750x1334(px)
圖片格式
PDF
圖片感應區
88x88(px)以上
圖片尺寸
長寬必須為雙數
命名原則
全英文,切片種類+功能+狀態+倍率.pdf
ex:btn_login_nor@2x.png
按鈕狀態
正常(normal),按下(pressed),選中(selected),禁用(disabled)


需要標註的內容

此次標註工具:cutterman


文字
字體、字級、粗細、色碼
ios單位px,Android單位sp
header(標題欄)
背景色色碼、透明度
內容
單元間距、分格線粗細色碼
ICON
圖片名稱,尺寸,狀態

2019年6月10日 星期一

【吐槽】有些廣告真是讓人很無言

Google的廣告投遞已經無所不在,今天無意看到這則廣告,忍不住想吐槽一下。



無葉片的電風扇,相對傳統電風扇,應該單價較高,對吧?!
身為一個高單價產品,
用這麼形象廉價的圖片來行銷?
用圖片畫質這麼低落來宣傳?
用這麼喜氣傳統的紅色來配色?
連文案都傳統的不得了,『慈母』兩個字是那招?!

【筆記】 IOS 人機界面Guideline


視覺設計需閱讀的篇章:



  1. iOS設備的各種屏幕尺寸

  1. 圖像大小與分辨率

iOS用於在屏幕的分辨率分別有@ 1x,@ 2x和@ 3x。
假設有一個100px×100px的標準分辨率(@ 1x)圖像。該圖像的@ 2x版本為200px×200px,@ 3x版本為300px×300px。


設計高分辨率時應注意:

  1. 使用8px-by-8px網格。
    網格保持線條清晰,確保內容在所有尺寸下盡可能清晰,需要較少的修飾和銳化。將圖像邊界捕捉到網格,以最小化縮小時可能出現的半像素和模糊細節。


  1. 使用適當的格式製作藝術作品。
    通常,對位圖/柵格圖稿使用去隔行PNG文件。PNG支持透明度,因為它是無損的,壓縮工件不會模糊重要細節或改變顏色。對於需要陰影,紋理和高光等效果的複雜藝術品來說,它是一個不錯的選擇。將JPEG用於照片。它的壓縮算法通常比無損格式產生更小的尺寸,並且在照片中更難辨別偽像。但是,照片般逼真的應用程序圖標在PNG中看起來效果最佳。將PDF用於需要高分辨率縮放的字形和其他平面矢量圖稿。


  1. 將8位調色板用於不需要完整24位顏色的PNG圖形。
    使用8位調色板可減小文件大小而不會降低圖像質量。此調色板不適用於照片。
  2. 優化JPEG文件以在大小和質量之間找到平衡。
    可以壓縮大多數JPEG文件,而不會導致生成的圖像明顯降級。即使少量壓縮也可以節省大量磁盤空間。嘗試對每個圖像進行壓縮設置,以找到產生可接受結果的最佳值。


  1. 為圖像和圖標提供替代文本標籤。
    替代文字標籤在屏幕上不可見,但它們讓VoiceOver可以直觀地描述屏幕上的內容,使視力障礙人士更容易導航。


Multitasking Size Classes:

在iPad上,當您的應用程序以多任務配置運行時,大小類也適用。


一般佈局注意事項

  1. 確保主要內容以其默認大小清除。
    除非他們選擇更改大小,否則人們不應該水平滾動來閱讀重要文本,或者縮放以查看主要圖像。


  1. 在整個應用中保持整體一致的外觀。
    通常,具有類似功能的元素應該看起來相似。


  1. 使用視覺重量和平衡來傳達重要性。
    大件物品吸引眼球,看起來比較小物品更重要。較大的物品也更容易點擊,這在應用程序用於分散注意力的環境時尤為重要,例如在廚房或健身房。通常,將主要項目放置在屏幕的上半部分中,並且在從左到右的讀取上下文中 - 靠近屏幕的左側。


  1. 使用對齊可以簡化掃描並與組織和層次結構進行通信。
    對齊使應用程序看起來整潔有序,幫助人們在滾動時集中註意力,並使查找信息變得更加容易。縮進和對齊還可以指示內容組如何相關。


  1. 如果可能,支持縱向和橫向。
    人們更喜歡在不同的方向使用應用程序,因此最好能夠滿足這種期望。


  1. 準備好進行文本大小的更改。
    人們期望大多數應用在設置中選擇不同的文字大小時進行響應。要適應某些文本大小的更改,您可能需要調整佈局。有關應用中文本使用情況的詳細信息,請參閱排版


  1. 為交互式元素提供充足的觸摸目標。
    嘗試為所有控件保持44pt x 44pt的最小可點擊區域。


  1. 在多個設備上預覽您的應用。
    您可以使用模擬器(Xcode附帶)來預覽您的應用程序並檢查裁剪和其他佈局問題。如果您的應用支持橫向模式,請確保您的佈局看起來很棒,無論設備是向左還是向右旋轉。全屏iPhone不支持倒置肖像模式。某些功能(如寬彩色圖像)最適合在實際設備上預覽。


  1. 在較大的設備上顯示文本時應用可讀性邊距。
    這些邊距使文本行足夠短,以確保舒適的閱讀體驗。


  1. 動畫

在網站中加入動畫會增加活潑度,但動畫不是有加就好,就像一面牆不是有顏色就叫漂亮。IOS  官方Guiildline 在動畫的項目中提到4點建議。


  1. 明智地使用動畫和動作效果。
    不要為了使用動畫而使用動畫。過度或無償的動畫可能會讓人感到脫節或分心,特別是在沒有提供身臨其境體驗的應用中。iOS使用運動效果(例如視差效果)在主屏幕和其他區域創建深度感。這些效果可以增加理解和享受,但過度使用它們會使應用程序感到迷失方向並且難以控制。

    動畫會吸引使用者目光與注意力,一個視覺畫面中最好只有一個物件在動作。兩個以上會令人分心,如果動畫是在要操作的按鈕或是連結上,反而會增加使用者判斷時間,甚至操作錯誤。
  2. 力求現實主義和信譽。
    人們傾向於接受藝術許可,但是當運動沒有意義或似乎違背物理定律時,他們會感到迷失方向。例如,如果某人通過從屏幕頂部向下滑動來顯示視圖,則他們應該能夠通過向後滑動來解除視圖。


這段翻譯成白話文的意思就是,創新是好的,但有些約定俗成的操作行為,還是必須貼近的使用者的習慣。


  1. 使用一致的動畫。
    熟悉,流暢的體驗讓用戶保持參與。他們習慣於iOS中使用的微妙動畫,例如平滑過渡,設備方向的流暢變化​​和基於物理的滾動。除非您正在創建沉浸式體驗,例如游戲,否則自定義動畫應與內置動畫相媲美。

    這與設計師在挑選顏色與繪製ICON時需要注意的細節相同,使用者是在IOS系統下進行操作,IOS內建了許多通用APP,所以IOS的使用者每天在使用手機的時候,已經默默地被訓練這些暗示性的操作行為(滑動手勢、快速鍵、動畫暗示...),在設計瀏覽網站與APP,如果使用的動畫與iOS中使用動畫是一致的,使用者就可以更快熟悉介面操作。


  1. 使動畫可選。
    在輔助功能首選項中啟用減少運動的選項時,您的應用應最小化或消除應用程序動畫。有關指導,請參閱Motion。

    這項在網頁上能否做到我並不了解,但如果是製作PP的話,這應該要注意,讓使用者可對此進行控制。


  1. 顏色

顏色傳遞活力,提供視覺連續性,傳達狀態信息,響應用戶操作提供反饋以及幫助人們將數據可視化。IOS提到了下列注意事項:


  1. 明智地使用顏色進行交流。
    當謹慎使用時,提高注意重要信息的顏色力量會增強。
    例如,當出於非關鍵原因在應用程序中的其他地方使用紅色時,警告人們關鍵問題的紅色三角形變得不那麼有效。

    這個例子就像是以前遇過的甲方,活動頁面上到處都要強調,強調的方法就是加大、加粗、變紅色,完稿之後設計師絕對堅決否認那是自己的作品啊XDDD。


  1. 在整個應用中使用補色。應用中的顏色應該很好地協同工作,而不是衝突或分散注意力。例如,如果粉彩對於應用程序的樣式至關重要,請使用一組協調的粉彩。


  1. 通常,選擇與您的應用徽標協調的有限調色板。微妙地使用顏色是傳達品牌的好方法。


  1. 考慮選擇色調顏色以指示整個應用程序的交互性。在Notes中,交互元素為黃色。在日曆中,交互式元素為紅色。如果您定義表示交互性的色調顏色,請確保其他顏色不與之競爭。


  1. 提供兩種版本的色調,以確保它在明暗模式下都很好看。當您使用系統顏色作為色調時,您可以自動支持高對比度。


  1. 避免對交互式和非交互式元素使用相同的顏色。如果交互式和非交互式元素具有相同的顏色,則人們很難知道在哪裡挖掘。


  1. 考慮藝術品和半透明度如何影響附近的顏色。藝術品的變化有時需要改變附近的顏色,以保持視覺連續性並防止界面元素變得過於強大或不足。例如,地圖在使用地圖模式時會顯示淺色方案,但在激活衛星模式時會切換為深色方案。放置在半透明元素後面或應用於半透明元素(如工具欄)時,顏色也會顯得不同。


  1. 在各種照明條件下測試應用程序的配色方案。根據房間的氛圍,時間,天氣等,室內和室外的照明都有很大差異。當您的應用在現實世界中使用時,您在計算機上看到的顏色看起來並不總是一樣。始終在多種光照條件下預覽您的應用,包括在晴天戶外,以查看顏色的顯示方式。如有必要,調整顏色以在大多數用例中提供最佳的觀看體驗。


  1. 考慮True Tone顯示如何影響顏色。True Tone顯示器使用環境光傳感器自動調整顯示器的白點,以適應當前環境的照明條件。主要關注閱讀,照片,視頻和遊戲的應用可以通過指定白點適應性樣式來增強或削弱此效果。有關開發人員指南,請參閱UIWhitePointAdaptivityStyle。


  1. 考慮如何在其他國家和文化中看到您對顏色的使用。例如,在某些文化中,紅色表示危險。在其他人看來,紅色具有積極的內涵。確保應用中的顏色發送相應的消息。

避免使用讓人們難以察覺應用內容的顏色。例如,色盲人可能無法區分某些顏色組合,而對比度不足會導致圖標和文本與背景混合併使內容難以閱讀。有關指導,請參閱顏色和對比度。

2019年6月2日 星期日

【筆記】icon 字體:Font Awesome,免費 / 付費版都有

Font Awesome 2018極受歡迎的開源ICON字體,進入網站就會看到各式各樣的扁平ICON,點綴在簡約的漸層畫布上,至2019/06站上的ICON字體共有5,099枚,其中可免費使用的有1,515枚。



很現實的,由於行動裝置介面空間有限,可比用寸土寸金來形容。以網頁或是APP來說,純裝飾的圖形在畫面上實在太過奢侈,為了在小小的空間裡,塞入更多的資訊,設計形態產生改變,小小的圖形開始代表著一個操作按鈕。


自從行動裝置問世之後,使用者接收訊息的方式,也漸漸從純文字轉向圖像閱讀。設定界面,以前只有文字項目,現在項目的前方則會增加小圖示,圖形+文字這樣的做法,讓文字閱讀與圖像閱讀的使用者,不但增加了美觀,更增加了可讀性。

2019年5月17日 星期五

【CSS】 粘性定位 position: sticky;

CSS 的定位屬性有下列幾種
  • position: static;
  • position: relative;
  • position: fixed;
  • position: absolute;
  • position: sticky;

fixed 很常被使用在 header、footer、右側滑動廣告
fixed 作為 header使用時,內容區塊往往要搭配 padding-top、 margin-top、 top,避面內容被刊頭遮擋住,用在 footer 時也會產生相同的問題。

2019年4月13日 星期六

【CSS】特殊符號:& 、+ ~ > ^

在CSS裡有一種用法叫做『選擇器』,選擇器的種類繁多

最古老又常用的連接設定
  1. :link
  2. :visited
  3. :active
  4. :hover

方便的計數設定
  1. :first-of-type
  2. :last-of-type
  3. :nth-child(n)


2019年4月1日 星期一

Wacom 數位筆無法按壓選取

今天更新驅動程式後,發現Wacom 數位筆無法按壓選取,這簡直是不斷逆毛摸,超令人爆青筋。查了許久發現要改設定

打開數位板程式設定:

  1. 選擇其他所有程式
  2. 選擇鏡射
  3. 下方使用Windows Ink ,取消勾選


2019年3月5日 星期二

【CSS】偽元素:not,使用過後保證愛上

在CSS中,:not(   )的意思就是,(  )內的東西不要套用到設定的屬性。
(  )內放置的範圍非常廣,以下介紹幾種使用方式:

  1. className
  2. 偽類  :hover
  3. 偽類  :last-child 
  4. 多個not合併使用
1. className
設定button的背景色,但是在  button class=“disabled 的時候不要套用。
button:not(.disabled){ background: #333 }


2018年10月17日 星期三

【SCSS】2.9用SCSS寫root(第一次就失敗)

Bootstrap的SCSS資料夾內,有一枚 _root.scss,這個檔案轉譯之後就像是CSS註解,可以把一些設定的基本規則寫在上面。

Bootstrap的 _root.scss 的寫的很簡單,只有顏色定義、跟斷點。
顏色的寫法很簡單,只用到 Variables(變數) + @each 迴圈
然後我就滿心歡喜寫下了這個

SCSS
:root {
// Custom variable values only support SassScript inside `#{}`.
@each $color, $value in $colors {
  --#{$color}: #{$value};
}


@each $color, $value in $theme-colors {
  --#{$color}: #{$value};
}

}