做項目的時候準備把js項目重構成ts項目，需要把文件后綴改成ts，一個bat腳本搞定，命令如下：

@echo off

rem 正在搜索...

for /f "delims=" %%i in ('dir /b /a-d /s "*.js"') do ren "%%i" "%%~ni.ts" rem 搜索完畢 @pause

把腳本放到根目錄下，雙擊運行完就可以了

新擬物化設計只是一種風格嗎？

最近正火的新擬物化風格（Neumorphism）在 2019 年底，設計師 Alexander Plyuto 所提出的「Skeuomorph Mobile Banking」作品中亮相。之后不僅被選為 2020 年界面趨勢，又稱為 soft UI。但這種風格在真實世界落地時，可視性上受到許多爭議。

確實，新擬物化風格它算是一種風格，但又不是只有視覺上的風格這么簡單，它延伸出來的議題，其實是扁平化跟擬物化之間的戰爭。

擬物化與扁平化的瑜亮情結

擬物化是 Apple 在早期設計中大量使用在界面上呈現對象屬性、材質的方式。然而在 2013 年 ios7 發布時，Apple 開始為了畫面簡潔大量將界面元素扁平化，緊接著 Google 在 2015 年發布了 Material Design，宣示扁平化在 UI 設計中扮演著主導趨勢的角色。2020 年真是百家爭鳴的一年，首先是 BMW 發表的扁平化新 logo，接著是這一波新擬物化的反擊。究竟代表新擬物化可能奪回界面風格主導權？或僅是 2020 年曇花一現的視覺風格呢？

扁平化VS 擬物化，我們可以思考的五件事

我認為新擬物化的概念其實是融合扁平化與擬物化的集大成，它建立在扁平化風格之上，又將組件帶入了擬物化的元素，提高用戶的判斷力。不過在糾結于扁平化與擬物化哪個比較好時，有五個議題是可以讓 UI、UX 設計師去思考的。

1. 多數年長者對于扁平化界面提供的視覺元素暗示無法理解。

大家身邊一定都有那種已經把 Line 操作得滾瓜爛熟，但是每次要用 Line 加好友時，還是不知道怎么操作的長輩。最早期當人類還沒進入屏幕時代前，我們所使用的界面大多是實體產品上的控制界面，而這些界面上的每個開關、按鈕，都只有一個輸入源，對應到一個功能（一對一），我們因此就這樣與產品進行簡單的交互動作。然而在屏幕上這個簡單的交互模式被改變了，像是用鍵盤跟鼠標可以輔助我們，在系統中進行抽象與復雜的無限多任務（一對多）。

△ 你偏好用哪個微波爐加熱咖啡呢？Image credit:Bence Mózer

讓我們再來看看對長輩最重要的 Line 加好友功能，我們先不論這個功能在整個 APP 中被埋得多深，因為找到加好友的入口真的對長輩來說是看緣分～

在我引導長輩找出二維碼畫面的經驗中，發現他們都是用死記的方式，把下一步要按哪個鍵、在畫面的哪一個角落，記下來。但由于加好友功能并不是每天都會操作的，因此在學習上的效果，就像是高中時沒有把課文理解、吸收就硬死背下來一樣困難。

我們來看看「顯示行動條碼」在掃描二維碼畫面中，是否真的具有可以被點選的暗示。在掃描畫面背景單純的時候（如下圖情況 1），「顯示行動條碼」的 button 底色是有透明度的黑、扁平化后沒有陰影提供可以按的暗示，不過因為有大圓角的造型，勉強還是可以誘使人點點看；但一般情況下，掃面畫面背景不會那么理想的無其他干擾（如下圖情況2），button 原本的透明黑完全融入了后面的背景，這時候只剩下「顯示行動條碼」的文字，已經不具備可以被點選的提示。

△ 情況 2 中，顯示行動條碼的 button 看起來可以按嗎？

掃描畫面中的外框有一定的透明度，在可操作暗示（affordance）上已經不具有實體的特征，如果又放上有透明度的 button 在上面，讓人充滿不確定性，年長者無法將這樣的情況與現實生活中的經驗聯想在一起。

2.以顏色做區別真的是最好的方法嗎？

你知道同一個顏色，每個人看起來會不一樣嗎？而不同顏色在不同環境下，卻又能看起來像同一個顏色嗎？

不同意新擬物化設計的人中，有人主張運用顏色的引導用戶操作界面的色彩元素不能從界面設計中抽離。但事實上，不同年齡、性別，視覺錐細胞中的活躍程度不一樣。同一個顏色，不同人看，明度跟彩度會有差異?；诜N種現實，由色彩的引導是好還是壞呢？

例子1：關于人類的視覺錐細胞

同一個顏色，不同人居然會看成不同顏色？

為什么阿嬤喜歡買大紅大紫的衣服？這個偏好除了受到個人喜好影響外，也關系到阿嬤視覺錐細胞的活躍度。老年人在上了年紀后，部分視覺錐細胞開始退化，因此對于藍色、綠色這類冷色系的顏色，老年人會開始接受不到這個區段的光帶來的刺激。因為視覺錐細胞對冷色系的刺激降低，導致阿嬤在菜市場逛街時會被偏暖色系的物品吸引。所以會買熱情系服飾不是阿嬤本人的意圖，而是老化的錐細胞在作祟。

例子2：關于學習觀察顏色這件事

不同顏色居然看成同一個顏色？

不同顏色卻看起來很像，有可能是光線造成，也有可能是使用者必須學習去觀察才知道的。日本的 JR 跟 Metro 系統，有著完整且細膩的視覺辨識系統。設計師理想中的情況是，我們將每條路線定義成不同顏色，可以讓使用者更容易學習辨識路線。

但實地走訪過東京的地下鐵跟 JR，常常會發現跟錯指示，才發現是潛意識辨認錯文字或是顏色。我自己遇到過的經驗是，在新宿站想要找都營大江戶線時，因為在改札口看到了同樣粉紅色的標志，原本已經要嗶卡進去，才發現那是京王新線的 IC 入口標志。

△ 新宿駛的改札口前，有兩個同為粉紅色的引導指標

所以說，高齡者或是天生視覺錐細胞有缺陷的人對于顏色無法清楚辨認外；大部分人可以借由學習來增強色彩辨識，除了可以對相似顏色進行更細節的判別外，也可以學著辨認不同光線（暖光、冷光）下造成的色彩差異。

但是，當我們在設計中，迫使用戶學習、習慣我們制定顏色的意義?？赡軙谛率?onboarding 時造成適應上的負擔，也有可能讓他們在使用別的系統造成錯亂。

3. 對于顏色被定義的意義各個文化、區域、種族都相同嗎？

在不同文化之下，對于色彩的觀察與運用也不一樣，舉個大家可能都有發現的例子，當你在不同城市旅游的時候，有沒有發現不同城市的優先座顏色不一樣？你能猜得出來，哪一個是臺北捷運上優先座的顏色嗎？

△ Image credit:wikipedia.org

當顏色在不同約定成俗下，有不一樣的意義，又剛好缺乏文字或圖像引導的時候，可能會讓使用者解讀成不同的意義。例如：紅色具有熱情、喜氣、帶來財運的意涵，但同時又具有危險的警示意義。

當設計師覺得紅色可以引起使用者的注意，而把 button 設計為紅色時，卻可能讓沒看清楚文字的用戶，認為按下這個 button 是危險的舉動。

△ Image credit:photoAC

4. 光與影（明亮面跟陰暗面）給使用者的可操作暗示（affordance）一樣嗎？

新擬物化設計中假設了人在使用界面時，會運用與生俱來能判斷光影效果的能力。這是真的嗎？讓我們來做個小實驗：

為什么在臺北車大廳席地而坐的人，會選擇坐在黑色的棋盤格上呢？如果根據人類從大自然中所得到的可操作暗示來說，有陰影的地方可以提供人類休憩的功能，例如樹陰下的陰影處。

△ Image credit:中央社、wikipedia.org

如果這樣說得通的話，代表光亮的區域對人來說是可以行走、活動的地方；而陰影處則是休息與暫停處。

根據以上的推測，我們做個小實驗，把車站中的 2 個不同區域的地面上分別涂上白色與黑色，來讓受測者選出哪些區域可以暫停，哪些區域可以走動：

問題Ａ：假設你要在車站的大廳等朋友，你會選擇站在哪里等他呢？

假設：受測者會選 2，因黑色區域（影子）讓人覺得可以暫停、休憩。

結果：符合假設

1：白色柱子前的白地面 32.5％； 2：白色柱子前的黑地面 67.5％

問題Ｂ：哪一邊的樓梯是往上的方向呢？

假設：大家會選 1，因為黑色區域（影子）讓人覺得可以踩上去。

結果：符合假設

1：白色立面＋黑色地面 61.3％；2：黑色立面＋白色地面 37.8％

由實驗Ａ、Ｂ可得證，雖然實驗結果符合先前假設，大多數的受測者可從陰影判斷要走哪條路，但還是有不少（30%以上）的受測者不認同。所以在用使用光亮陰影的設計暗示時，還是會遇到使用者感知的不同的問題。

5. 深度認知不同是導致判斷物體距離的能力受影響，也就是所謂的視差。

新擬物化設計中，將界面組件以類 3D 的方式呈現，使用戶在操作界面時必須去感知界面組件的遠近以判斷重要性，而在深度認知上有障礙的用戶此時就會受到挑戰。用戶可能會遇到，不知道哪個組件才是浮在最上面、最重要的；若界面中的組件有三種以上的陰影深淺，會讓用戶在判斷時要更花腦力判定物件在立體空間中的深淺。

總結

新擬物化風格中的光影表現提供了使用者人類最原始的操作意圖：可操作暗示，是一個好的出發點，然而必須針對 APP 性質的不同而有所改良。在設計較走生活風格理念，而操作界面不復雜的 APP 時，非常適合用新擬物化風格來詮釋：例如電子書服務、音樂軟件；但在設計功能導向，且有大量信息化圖表的界面，例如：移動網銀，還是需要以扁平化的界面為主要信息架構，新擬物風格可能會是極少量界面元素中，拿來呈現生活中真實物的質感（例如：用戶的信用卡）、或是作為亮點（例如：優惠卡片）的呈現方式，此類型 APP 中最重要的卡片與圖表對于此種風格，一定要謹慎使用，必定三思三思再三思。

文章來源：優設    作者：Muse Chang

可能對于一些人來說，流利說是一份工作，而對于我來說，流利說卻是一段深刻的旅程，改變了我的生活，也塑造了我的性情、人格。從 2013 年作為第 7 號員工加入流利說，為之效力6年，從最早期民房創業，到納斯達克 IPO，這段經歷，我自認為頗具一個理想主義者的傳奇色彩，有些故事，是我愿意，也值得分享的。

老王（流利說 CEO 王翌）以前總借他恩師的話說，人這一輩子能做一兩件漂亮事就不錯了。我覺得，流利說，算我過去做的一件漂亮事。以前，我也常和同事說，如果你現在一切的經歷，在日后不足以用故事說與人聽，可能你現在經歷的還不夠痛，你還不夠刻苦。所幸，過去的經歷，給我留下了幾個故事。

這一次，我想分享當初選擇加入流利說的故事，分享這個過程中我的思考、行動。一方面，單純的想記錄這段故事。因為隨著年歲增加，記性卻是退減的。文字是最好的保存記憶的方式；另一方面，常常遇到設計師朋友們聊如何選擇工作機會，遇到創業的邀約機會怎么判斷、決策的問題，我希望這個故事，能給遇到此類問題的朋友一些啟發。

好，聽故事吧。

緣起

2012 年，我退出了聯合創立一年半的公司。而在一年半以前，我從阿里云公司離開，放棄了一筆可觀的 RSU 股票，當時，我是阿里云最早的 28 位設計師之一。結束創業后，2012 年 11 月 14 日 19:17，我發了一條微博，表示想看看新的機會。這條微博，有 16 個轉發。其中有 1 個轉發，被流利說聯合創始人 Ben 看到，他把這條微博轉發給了聯合創始人王翌（流利說 CEO）。

在此之前，我和 Ben、王翌素不相識，網友都談不上。Ben 之所以看到那條轉發，是因為他關注好友里面，有一位正是我一款瀏覽器插件產品 – 微博急簡 的用戶。

有一顆創作的心 – 微博急簡

△ 使用「微博急簡」前后，微博主頁的對比

容我多說幾句，介紹一下微博急簡這款產品。2011 年左右，新浪微博的使用體驗，非常糟糕，逐步商業化帶來的各種廣告，讓原本不好的體驗，變得更加讓我無法容忍。很快，一個叫 stylish 的 Chrome 插件工具，在微博設計/技術圈子里流傳。用戶安裝 stylish 插件后，通過修改 CSS 來定制自己的微博體驗。同時，你還可以把 CSS 分享給其他用戶。

這太好玩了！我按自己的使用喜好，給自己訂制了一套極簡體驗的新浪微博。玩了幾天后，我決定做一個改善微博體驗的瀏覽器插件。為什么要重新做一個插件呢？我認為，stylish 的使用門檻、操作成本都太高，僅僅是專業人士的玩具。我希望普通人，也可以通過一鍵安裝瀏覽器插件，獲得舒服的微博體驗。因此，我給插件取名 – 微博急簡。看得出來，我是多么急迫的想簡化微博的體驗。

兩周后，微博急簡就上線了。幾個版本后，體驗就趨于穩定。高峰的時候，有 10 萬左右的用戶使用，相關微博話題有 600 萬。有很多行業內的大咖成為我的用戶，像馮大輝、少楠、方軍等。獲得了很多用戶的好評，最讓我嘚瑟的是現任丁香園產品總監少楠的評價：用一個插件秒殺了新浪UED團隊。

通過微博急簡這個產品，我想分享以下幾點：

• 設計師應該對體驗保持敏感度。不要被體驗糟糕的產品破壞了味蕾；
• 如果有機會，就要試圖去改變它；
• 出于興趣，單純的為自己做設計、創作。即使沒有金錢回報；

這三點，既是我的觀點，也是我的特質。正是因為這樣的特質，才遇到后面加入流利說的契機。

面對首次邀約

回到故事主線。

我發完那條微博后的 1 小時，王翌就給了我微博私信。老實說，今天是我第一次注意到這個「相隔 1 小時」的時間細節。王翌的行動力、執行力，對于人才的執著追求，著實讓我佩服。這不僅僅是對我，對流利說早期的員工，以及后面的核心員工，都是如此。

他的消息里，有三個關鍵詞：exciting、團隊成立 2 個月、移動教育。對于這條消息，我禮貌的回應，但內心其實是「呵呵」的。即使，我看到他 LinkedIn 主頁上 Google PM 的經歷，很亮眼。呵呵的原因是，這個公司太早期了，才兩個月。2013 年，移動教育是啥東西？而且，創始人還這么不務實，動不動就標榜是一個 exciting 的機會。

雖然，王翌后續一直聯系我，但我基本是忽略的狀態。期間，我短暫的加入了一個朋友的創業公司。2013 年 1 月底，春節前的幾天，我再次收到王翌的私信：流利說 App 即將上架，想約我再聊一聊。于是，我們約在文二西路白鴉（有贊創始人）的貝塔咖啡。

?

△ 貝塔咖啡館

那天晚上，王翌給我展示了流利說最早的 App，程序其實還不太穩定。但他仍舊極具信心的表達了對于語音互動的看好，以及發出盛情邀請。我對這個 App 的產品與交互的第一印象，是好的，但對于王翌的第一印象卻是復雜的，既覺得這人有激情、有想法，同時又覺得不太靠得住，夸夸其談，他太會說了。

深色模式該從何處著手設計又要考慮哪些因素？一起來看看~

其實回顧我們常用的APP，有很多都更新了深色模式，而且每個APP對深色的定義和設計都有差異。

實際上深色模式已經來臨，而且在很多產品中都能發現它的身影，之后也會愈加流行。那么設計師面對深色模式，該從何處著手設計又要考慮哪些因素呢？

本文就為大家提供一份全面的總結。文章目錄如下：

選擇深色模式的原因

1. 需求趨勢

過去一年以來，Android 10和iOS 13上都適配了深色模式，而且Apple和Google也一直致力于將資源和注意力投入到深色模式中，這也讓深色模式備受用戶的關注。

2. 專注內容

深色模式在弱光環境下具有更好的可讀性，讓我們更專注于眼前的屏幕。同時深色的背景會降低內容周圍元素的影響，特別是以圖片和視頻為主的應用，讓用戶更專注于內容。

作為內容消費型應用的Netflix ，把深色背景作為默認設計樣式，深色的設計讓用戶更能集中注意力，延長使用時間。

3. 減輕刺激

相對于其他顏色，深色系的設計在夜晚看著最舒服?？赡芡砩贤媸謾C不用擔心光線太刺眼，但是深色模式對護眼并沒有什么幫助，只能說可以減少對眼睛的刺激。

4. 提高續航

深色模式更省電只適用于OLED屏幕。OLED面板的每個像素點可以單獨發光，當使用深色模式時，部分像素點被熄滅，只點亮部分像素，屏幕的一部分相當于處在休眠狀態，所以會更加省電。

平臺設計指南

1. iOS平臺深色模式設計

在深色模式下，Apple重新審視了iOS中UI樣式和顏色的含義，讓我們來看看在iOS上設計深色模式帶來的變化。

語義化顏色（Semantic Colors）

所謂語義化顏色，就是不再通過某一固定的RGB色值來描述顏色，而是根據用途來描述，讓界面元素可以自動適配當前的外觀模式。

淘寶團隊就參考了蘋果官方的適配建議，通過語義化顏色的方式進行適配，使適配成本大幅降低。設計師根據不同UI元素的特性先期制定顏色語義化規則，進而技術在框架層面通過「顏色自動反轉」技術實現顏色反轉。

系統顏色

除了語義化顏色，Apple還提供了9種預定義的系統顏色，在淺色和深色模式中，這些顏色會動態變化，支持整個系統的外觀，同樣也可以自適應選定的界面樣式。

模糊與動態效果

在iOS13上，蘋果引入了4種模糊效果和8種動態效果，它們自動適應iOS界面樣式。這是在淺色和深色模式下不同的模糊效果。

蘋果還在iOS深色模式排版套件中引入4種動態效果，其中3種為疊加效果，1種分隔效果。

2. Android平臺深色模式設計

谷歌提供了廣泛的文檔支持，幫助設計師了解深色主題如何在Android生態系統中運行。

Elevation（陰影）

UI界面元素間的投影最能讓用戶清晰地感知用戶界面的深度。在設計深色主題時，組件將保留與淺色主題相同的默認陰影組件。Elevation越靠上, 顏色就會越淺。

無障礙性與對比

深色UI設計中的背景應足夠暗以顯示白色文本。設計師要注意背景和文字之間至少使用15.8:1的對比度。這樣可以確保將正文放在最前面時，能通過WCAG（Web內容無障礙指南，使網站內容更容易訪問）的AA標準。

顏色

深色模式必須避免飽和的顏色，以免引起眼睛疲勞。相反，設計師應專注于使用不飽和的顏色，以增加清晰度。主色和輔色的選擇還取決于對淺色和深色UI主題的考慮。

文字不透明度

在深色背景上設計淺色文字時，高度強調的文字不透明度為87％；一般提示文字的不透明度為60％；禁用文字的不透明度為38％。

深色模式的設計要點

蘋果和谷歌都利用各自的設計原則，為深色模式設計做準備工作。在實際設計過程中，不單需要這些基本原則，更重要的是要注意設計深色模式的實用要點。

1. 背景灰度

設計深色背景時不是簡單的把白變成黑，而是對背景使用比較暗的色調，以減少眼睛疲勞。

在淺色模式中，我們傾向于用細微的陰影來傳達界面深度，使用起來更加自然。但是在大多數深色模式下，陰影的效果并不明顯，通常用顏色的深淺來傳達界面的層級關系。

關鍵點：注意應用場景

在知乎的深色模式中，背景的設計從深到淺使用了三級灰度，讓頁面的層級更分明。

一級灰度的應用場景主要是大的背景色，使用面積相對比較大顏色最深；二級灰度的應用場景是選項的背景色，根據選項的數量設置使用面積，位置排布比較靈活；三級灰度的顏色最淺，使用面積最小，通常用在分割線中。

2. 文字對比

白底黑字和黑底白字帶給我們的用眼體驗是不一樣的。設計不當的深色模式常常因為強對比而變得很刺眼，同時為了提高對光線的吸收虹膜會張得更開，更容易造成眼部疲勞。

關鍵點：文字間的對比

深色模式中，文字的用色通常是純灰色，不同位置的文字例如標題、正文和注釋使用深淺不同的顏色作對比。上圖是深色的微信，就利用這種方法來區分不同文字內容，展示文字層次關系。

另外每個應用的定位都不一樣，界面中想傳達的信息也有差異，所以要注意不同的設計思路。

關鍵點：文字與背景的對比

已經更新深色模式的應用主要分為兩大類，一類屬于工具型應用例如QQ、微信、百度網盤等，這類應用追求的是信息的有效傳達，在設計時文字內容和背景色的區分比較明顯。

上圖是百度網盤的深色模式，可以看出來標題文字與背景有很明顯的對比，保障了用戶使用時的可操作性和易讀性。

這樣的設計不需要用戶過于沉浸式的閱讀，只需要幫助用戶快速找到有用的信息并方便使用，這是工具型應用在設計深色模式時必備的原則。

另一類屬于內容型應用例如知乎、簡書等，這些應用更注重沉浸式的閱讀體驗，因為用戶通常會在某個界面中停留很久來查看內容，所以需要文字與背景的低對比度為閱讀營造柔和的氛圍。

簡書的深色模式中，文字與背景的對比關系就設計得很弱，整個界面呈現出灰色調，這樣的設計有助于在弱光環境下的長時間閱讀和瀏覽。

3. 圖標/按鈕

深色模式應該避免使用特別鮮艷的顏色，較高的明度和飽和度會與深色背景形成強烈的對比，讓頁面的可讀性變差并加深刺激。

關鍵點：降低色彩明度

在由淺變深的過程中，知乎對改變了界面中所有圖標的顏色。界面里面的圖標和主題按鈕的色彩，在色相、飽和度上都沒有變化，但是明度被不同程度的降低，保證了在不同光照條件下的內容的可讀性。

這是深色模式中處理色彩的一種方法，雖然在淺色界面中，我們更喜歡鮮艷的顏色，但明度低的顏色更適合深色主題。匹配這兩個模式另一個比較好的方法是創建互補的色板。

結論

無論深色或者淺色，都只是產品向用戶呈現的一種界面狀態，最終的目的是為了更良好的使用體驗。

不管選擇什么樣的模式，都要記得從產品自身出發，并牢記這幾點：

• 了解趨勢：熟悉深色模式流行起來的原因，以及蘋果和谷歌對此的相關研究。
• 找對方向：在準備設計深色模式前，要先了解清楚產品對應的平臺、滿足的標準。

• 掌握要點：設計深色模式更多要求的是顏色上的變化，利用灰度色階拉開背景顏色，把握文字與背景間的強弱關系，適當降低圖標的明度和飽和度。

文章來源：優設    作者：Clip設計夾

藍藍設計 魏華寫

     在承擔ui設計項目中，常常碰到一些客戶不給設計師看己往的軟件或本公司設計師設計但沒有被客戶認可的設計方案，怕限制設計師的思路。那究竟給設計師參考會不會限制設計師的思維呢？

     實際上不會的，這是更多維度了解客戶的思考和角度，排除己被嘗試過的選項。

     在進行一個ui 設計前，深度方面應該要了解業務，用戶角色，環境生態，交互流程，關鍵功能，核心價值，用戶體驗的峰值點和難點在哪里…….總之了解的越深越好。

     寬度方面，要看到競品分析，行業趨勢，國內外優秀案例欣賞，專業文章觀點，應該是可以拓展設計師的思維。

     設計最核心的目標應該在于解決問題，而不是單純的讓界面好看。

      優秀的設計師要明確解決問題的目標，博采眾長，獨立思考，看眾多的競品是看眾多的解題思路，多方位角度看問題。各產品資源，核心技術不同，取舍不同，理解信息架框，運營思路，用戶特征，技術實現可能性，不會只照著您給的資料比貓畫虎。

       因此，我認為，放心的給設計師參考資料吧，互相的了解，溝通越多，越容易出好的作品。

這五張圖是最近藍藍設計的稿件，展現從一個模糊的概念性需求到一個可視化概念性方案的設計過程。

網上可以找到前端開發社區貢獻的大量工具，這篇文章列出了我最喜歡的一些工具，這些工具給我的工作帶來了許多便利。

1. EnjoyCSS

老實說，雖然我做過許多前端開發，但我并不擅長 CSS。當我陷入困境時，EnjoyCSS 是我的大救星。EnjoyCSS 提供了一個簡單的交互界面，幫助我設計元素，然后自動輸出相應的 CSS 代碼。

EnjoyCSS 可以輸出 CSS、LESS、SCSS 代碼，并支持指定需要支持哪些瀏覽器及其版本。開發簡單頁面時用起來比較方便，但不太適合復雜一點的前端項目（這類項目往往需要引入 CSS 框架）。

2. Prettier Playground

Prettier 是一個代碼格式化工具，支持格式化 JavaScript 代碼（包括 ES2017、JSX、Angular、Vue、Flow、TypeScript 等）。Prettier 會移除代碼原本的樣式，替換為遵循最佳實踐的標準化、一致的樣式。IDE 大多支持 Prettier 工具，不過 Prettier 也有在線版本，讓你可以在瀏覽器里格式化代碼。

如果工作電腦不在手邊，使用移動端設備或者臨時借用別人的電腦查看代碼時，Prettier Playground 非常好用。相比在 IDE 或編輯器下使用 Prettier，個人更推薦通過 git pre-commit hook 配置 Prettier：hook 可以保證整個團隊使用統一的配置，免去各自分別配置 IDE 或編輯器的麻煩。如果是老項目，hook 還可以設置只格式化有改動的單個文件甚至有改動的代碼段，避免在 IDE 或編輯器下使用 Prettier 時不小心格式了大量代碼，淹沒了 commit 的主要改動，讓 review 代碼變得十分痛苦。

3. Postman

Postman 一直在我的開發工具箱里，測試后端 API 接口時非常好用。GET、POST、DELETE、OPTIONS、PUT 這些方法都支持。毫無疑問，你應該使用這個工具。

Postman 之外，Insomnia 也是很流行的 REST API 測試工具，亮點是支持 GraphQL。不過 Postman 從 去年夏天發布的 v7.2 起也支持了 GraphQL。

4. StackBlitz

Chidume Nnamdi 盛贊這是每個用戶最喜歡的在線 IDE。StackBlitz 將大家最喜歡、最常用的 IDE Visual Studio Code 搬進了瀏覽器。

StackBlitz 支持一鍵配置 Angular、React、Ionic、TypeScript、RxJS、Svelte 等 JavaScript 框架，也就是說，只需幾秒你就可以開始寫代碼了。

我覺得這個在線 IDE 很有用，特別是可以在線嘗試一些樣例代碼或者庫，否則僅僅嘗試一些新特性就需要花很多時間在新項目初始化配置上。有了 StackBlitz，無需在本地從頭搭建環境，花上幾分鐘就可以試用一個 NPM 包。很棒，不是嗎？

微軟官方其實也提供了在線版本的 VSCode，可以在瀏覽器內使用 VSCode，并且支持開發 Node.js 項目（基于 Azure）。不過 StackBlitz 更專注于優化前端開發體驗，界面更加直觀一點，也推出了 beta 版本的 Node.js 支持（基于 GCP，需要填表申請）。

5. Bit.dev

軟件開發的基本原則之一就是代碼復用。代碼復用減少了開發量，讓你不用從頭開發組件。

這正是 Bit.dev 做的事，分享可重用的組件和片段，降低開發量，加速開發進程。

除了公開分享，它還支持在團隊分享，讓團隊協作更方便。

正如 Bit.dev 的口號「組件即設計體系。協同開發更好的組件。」所言，Bit.dev 可以用來創建設計體系，允許團隊內的開發者和設計師一起協作，從頭搭建一套設計體系。

Bit.dev 目前支持 React、Vue、Angular、Node 及其他 JavaScript 框架。

在 Bit.dev 上不僅可以搜索組件，還可以直接查看組件的依賴，瀏覽組件的代碼，甚至在線編輯代碼并查看預覽效果！選好組件后可以通過 Bit.dev 的命令行工具 bit 在本地項目引入組件，也可以通過 npm、yarn 引入組件。

6. CanIUse

CanIUse是非常好用的在線工具，可以方便地查看各大瀏覽器對某個特性的支持程度。

我過去經常碰到自己開發的應用的一些功能在其他瀏覽器下不支持的情況。比如我的作品集項目使用的某個特性在 Safari 下不支持，直到項目上線幾個月后我才意識到。這些經驗教訓讓我意識到需要檢查瀏覽器兼容性。

我們來看一個例子吧。哪些瀏覽器支持 WebP 圖像格式？

如你所見，Safari 和 IE 目前不支持 WebP。這意味著需要為不兼容的瀏覽器提供回退選項，比如：

<picture>

CanIUse 還可以在命令行下使用，例如，在命令行下查看 WebP 圖像格式的瀏覽器兼容性：caniuse webp（運行命令前需要事先通過 npm install -g caniuse-cmd安裝命令行工具。

方法參數的驗證

JavaScript 允許你設置參數的默認值。通過這種方法，可以通過一個巧妙的技巧來驗證你的方法參數。

const isRequired = () => { throw new Error('param is required'); };

const print = (num = isRequired()) => { console.log(`printing ${num}`) };

print(2);//printing 2

print()// error

print(null)//printing null

非常整潔，不是嗎？

格式化 json 代碼

你可能對 JSON.stringify 非常熟悉。但是你是否知道可以用 stringify 進行格式化輸出？實際上這很簡單。

stringify 方法需要三個輸入。 value，replacer 和 space。后兩個是可選參數。這就是為什么我們以前沒有注意過它們。要對 json 進行縮進，必須使用 space 參數。

console.log(JSON.stringify({name:"John",Age:23},null,'\t'));

>>>

{

"name": "John",

"Age": 23

}

從數組中獲取唯一值

要從數組中獲取唯一值，我們需要使用 filter 方法來過濾出重復值。但是有了新的 Set 對象，事情就變得非常順利和容易了。

let uniqueArray = [...new Set([1, 2, 3, 3, 3, "school", "school", 'ball', false, false, true, true])];

>>> [1, 2, 3, "school", "ball", false, true]

從數組中刪除虛值（Falsy Value）

在某些情況下，你可能想從數組中刪除虛值。虛值是 JavaScript 的 Boolean 上下文中被認定為為 false 的值。 JavaScript 中只有六個虛值，它們是：

undefined

null

NaN

0

"" （空字符串）

false

濾除這些虛值的最簡單方法是使用以下函數。

myArray.filter(Boolean);

如果要對數組進行一些修改，然后過濾新數組，可以嘗試這樣的操作。請記住，原始的 myArray 會保持不變。

myArray

   .map(item => {

       // Do your changes and return the new item

   })

   .filter(Boolean);

合并多個對象

假設我有幾個需要合并的對象，那么這是我的首選方法。

const user = {

    name: 'John Ludwig',

    gender: 'Male'

};

const college = {

    primary: 'Mani Primary School',

    secondary: 'Lass Secondary School'

};

const skills = {

   programming: 'Extreme',

   swimming: 'Average',

   sleeping: 'Pro'

};

const summary = {...user, ...college, ...skills};

這三個點在 JavaScript 中也稱為展開運算符。你可以在這里學習更多用法。

對數字數組進行排序

JavaScript 數組有內置的 sort 方法。默認情況下 sort 方法把數組元素轉換為字符串，并對其進行字典排序。在對數字數組進行排序時，這有可能會導致一些問題。所以下面是解決這類問題的簡單解決方案。

[0,10,4,9,123,54,1].sort((a,b) => a-b);

>>> [0, 1, 4, 9, 10, 54, 123]

這里提供了一個將數字數組中的兩個元素與 sort 方法進行比較的函數。這個函數可幫助我們接收正確的輸出。

Disable Right Click

禁用右鍵

你可能想要阻止用戶在你的網頁上單擊鼠標右鍵。

<body oncontextmenu="return false">

   <div></div>

</body>

這段簡單的代碼將為你的用戶禁用右鍵單擊。

使用別名進行解構

解構賦值語法是一種 JavaScript 表達式，可以將數組中的值或對象的值或屬性分配給變量。解構賦值能讓我們用更簡短的語法進行多個變量的賦值。

const object = { number: 10 };

// Grabbing number

const { number } = object;

// Grabbing number and renaming it as otherNumber

const { number: otherNumber } = object;

console.log(otherNumber); //10

獲取數組中的最后一項

可以通過對 splice 方法的參數傳入負整數，來數獲取組末尾的元素。

let array = [0, 1, 2, 3, 4, 5, 6, 7]

console.log(array.slice(-1));

>>>[7]

console.log(array.slice(-2));

>>>[6, 7]

console.log(array.slice(-3));

>>>[5, 6, 7]

等待 Promise 完成

在某些情況下，你可能會需要等待多個 promise 結束?？梢杂?Promise.all 來并行運行我們的 promise。

const PromiseArray = [

   Promise.resolve(100),

   Promise.reject(null),

   Promise.resolve("Data release"),

   Promise.reject(new Error('Something went wrong'))];

Promise.all(PromiseArray)

 .then(data => console.log('all resolved! here are the resolve values:', data))

 .catch(err => console.log('got rejected! reason:', err))

關于 Promise.all 的主要注意事項是，當一個 Promise 拒絕時，該方法將引發錯誤。這意味著你的代碼不會等到你所有的 promise 都完成。

如果你想等到所有 promise 都完成后，無論它們被拒絕還是被解決，都可以使用 Promise.allSettled。此方法在 ES2020 的最終版本得到支持。

const PromiseArray = [

   Promise.resolve(100),

   Promise.reject(null),

   Promise.resolve("Data release"),

   Promise.reject(new Error('Something went wrong'))];

Promise.allSettled(PromiseArray).then(res =>{

console.log(res);

}).catch(err => console.log(err));

//[

//{status: "fulfilled", value: 100},

//{status: "rejected", reason: null},

//{status: "fulfilled", value: "Data release"},

//{status: "rejected", reason: Error: Something went wrong ...}

//]

即使某些 promise 被拒絕，Promise.allSettled 也會從你所有的 promise 中返回結果。

一、XML：

XML（Extensible Markup Language 可擴展標記語言），XML是一個以文本來描述數據的文檔。

1. 示例：

<?xml version="1.0" encoding="UTF-8"?>
<people>
    <person personid="E01">
        <name>Tony</name>
        <address>10 Downing Street, London, UK</address>
        <tel>(061) 98765</tel>
        <fax>(061) 98765</fax>
        <email>tony@everywhere.com</email>
    </person>
    <person personid="E02">
        <name>Bill</name>
        <address>White House, USA</address>
        <tel>(001) 6400 98765</tel>
        <fax>(001) 6400 98765</fax>
        <email>bill@everywhere.com</email>
    </person>
</people>

2. 用途：

（1）充當顯示數據（以XML充當顯示層）

（2）存儲數據（存儲層）的功能

（3）以XML描述數據，并在聯系服務器與系統的其余部分之間傳遞。(傳輸數據的一樣格式)

從某種角度講，XML是數據封裝和消息傳遞技術。

// 創建SAX解析器工廠對象
SAXParserFactory spf = SAXParserFactory.newInstance();
// 使用解析器工廠創建解析器實例
SAXParser saxParser = spf.newSAXParser();
// 創建SAX解析器要使用的事件偵聽器對象
PersonHandler handler = 
                         new PersonHandler();
// 開始解析文件
saxParser.parse(
            new File(fileName), handler);

3.2. DOM解析XML:

DOM：Document Object Model（文檔對象模型）
DOM的特性：
定義一組 Java 接口，基于對象，與語言和平臺無關將 XML 文檔表示為樹，在內存中解析和存儲 XML 文檔，允許隨機訪問文檔的不同部分。

DOM解析XML
DOM的優點，由于樹在內存中是持久的，因此可以修改后更新。它還可以在任何時候在樹中上下導航，API使用起來也較簡單。 

DocumentBuilderFactory builder = DocumentBuilderFactory.newInstance();
DocumentBuilder db = builder.newDocumentBuilder();
db.parse("person.xml");
NodeList node_person = doc.getElementsByTagName("person");

 3.3. JDOM解析XML:

JDOM是兩位著名的 Java 開發人員兼作者，Brett Mclaughlin 和 Jason Hunter 的創作成果， 2000 年初在類似于Apache協議的許可下，JDOM作為一個開放源代碼項目正式開始研發了。

JDOM 簡化了與 XML 的交互并且比使用 DOM 實現更快，JDOM 與 DOM 主要有兩方面不同。首先，JDOM 僅使用具體類而不使用接口。這在某些方面簡化了 API，但是也限制了靈活性。第二，API 大量使用了 Collections 類，簡化了那些已經熟悉這些類的 Java 開發者的使用。
 

解析步驟：
（1）SAXBuilder sax = new SAXBuilder();
（2）Document doc = sax.build(….);
（3）Element el = doc.getRootElement();（4）List list = el.getChildren();
（5）遍歷內容

解析步驟：
（1）SAXReader sax = new SAXReader();
（2）Document doc = sax.read(Thread.currentThread().getContextClassLoader()
          .getResourceAsStream("person.xml"));
（3）Element root = doc.getRootElement();
（4）Iterator iterator = root.elementIterator();
（5）遍歷迭代器

5.案例：

public class Person {
    private String personid;
    private String name;
    private String address;
    private String tel;
    private String fax;
    private String email;

    @Override
    public String toString() {
        return "Person{" +
                "personid='" + personid + '\'' +
                ", name='" + name + '\'' +
                ", address='" + address + '\'' +
                ", tel='" + tel + '\'' +
                ", fax='" + fax + '\'' +
                ", email='" + email + '\'' +
                '}';
    }

    public String getPersonid() {
        return personid;
    }

    public void setPersonid(String personid) {
        this.personid = personid;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getAddress() {
        return address;
    }

    public void setAddress(String address) {
        this.address = address;
    }

    public String getTel() {
        return tel;
    }

    public void setTel(String tel) {
        this.tel = tel;
    }

    public String getFax() {
        return fax;
    }

    public void setFax(String fax) {
        this.fax = fax;
    }

    public String getEmail() {
        return email;
    }

    public void setEmail(String email) {
        this.email = email;
    }
}

<?xml version="1.0" encoding="UTF-8"?>
<people>
    <person personid="E01">
        <name>Tony Blair</name>
        <address>10 Downing Street, London, UK</address>
        <tel>(061) 98765</tel>
        <fax>(061) 98765</fax>
        <email>blair@everywhere.com</email>
    </person>
    <person personid="E02">
        <name>Bill Clinton</name>
        <address>White House, USA</address>
        <tel>(001) 6400 98765</tel>
        <fax>(001) 6400 98765</fax>
        <email>bill@everywhere.com</email>
    </person>
</people>

import org.xml.sax.Attributes;
import org.xml.sax.SAXException;
import org.xml.sax.helpers.DefaultHandler;

import java.util.ArrayList;
import java.util.List;

/**
 * Created by Hu Guanzhong
 * SAX解析的特點：
 * 1、基于事件驅動
 * 2、順序讀取，速度快
 * 3、不能任意讀取節點（靈活性差）
 * 4、解析時占用的內存小
 * 5、SAX更適用于在性能要求更高的設備上使用（Android開發中）
 *
 */
public class PersonHandler extends DefaultHandler{
    private List<Person> persons = null;
    private Person p;//當前正在解析的person
    private String tag;//用于記錄當前正在解析的標簽名

    public List<Person> getPersons() {
        return persons;
    }

    //開始解析文檔時調用
    @Override
    public void startDocument() throws SAXException {
        super.startDocument();
        persons = new ArrayList<>();
        System.out.println("開始解析文檔...");
    }

    //在XML文檔解析結束時調用
    @Override
    public void endDocument() throws SAXException {
        super.endDocument();
        System.out.println("解析文檔結束.");
    }

    /**
     * 解析開始元素時調用
     * @param uri 命名空間
     * @param localName 不帶前綴的標簽名
     * @param qName 帶前綴的標簽名
     * @param attributes 當前標簽的屬性集合
     * @throws SAXException
     */
    @Override
    public void startElement(String uri, String localName, String qName, Attributes attributes) throws SAXException {
        super.startElement(uri, localName, qName, attributes);
        if ("person".equals(qName)){
            p = new Person();
            String personid = attributes.getValue("personid");
            p.setPersonid(personid);
        }
        tag = qName;
        System.out.println("startElement--"+qName);
    }

    //解析結束元素時調用
    @Override
    public void endElement(String uri, String localName, String qName) throws SAXException {
        super.endElement(uri, localName, qName);
        if ("person".equals(qName)) {
            persons.add(p);
        }
        tag = null;
        System.out.println("endElement--"+qName);
    }

    //解析文本內容時調用
    @Override
    public void characters(char[] ch, int start, int length) throws SAXException {
        super.characters(ch, start, length);
        if (tag != null) {
            if ("name".equals(tag)) {
                p.setName(new String(ch,start,length));
            }else if("address".equals(tag)){
                p.setAddress(new String(ch,start,length));
            }else if("tel".equals(tag)){
                p.setTel(new String(ch,start,length));
            }else if("fax".equals(tag)){
                p.setFax(new String(ch,start,length));
            }else if("email".equals(tag)){
                p.setEmail(new String(ch,start,length));
            }
            System.out.println(ch);
        }
    }
}

public class XMLDemo {

    /**
     * 使用第三方xstream組件實現XML的解析與生成
     */
    @Test
    public void xStream(){
        Person p = new Person();
        p.setPersonid("1212");
        p.setAddress("北京");
        p.setEmail("vince@163.com");
        p.setFax("6768789798");
        p.setTel("13838389438");
        p.setName("38");

        XStream xStream = new XStream(new Xpp3Driver());
        xStream.alias("person",Person.class);
        xStream.useAttributeFor(Person.class,"personid");
        String xml = xStream.toXML(p);
        System.out.println(xml);

        //解析XML
        Person person = (Person)xStream.fromXML(xml);
        System.out.println(person);
    }

    /**
     * 從XML文件中讀取對象
     */
    @Test
    public void xmlDecoder() throws FileNotFoundException {
        BufferedInputStream in = new BufferedInputStream(new FileInputStream("test.xml"));
        XMLDecoder decoder = new XMLDecoder(in);
        Person p = (Person)decoder.readObject();
        System.out.println(p);
    }
    /**
     * 把對象轉成XML文件寫入
     */
    @Test
    public void xmlEncoder() throws FileNotFoundException {
        BufferedOutputStream bos = new BufferedOutputStream(new FileOutputStream("test.xml"));
        XMLEncoder xmlEncoder = new XMLEncoder(bos);
        Person p = new Person();
        p.setPersonid("1212");
        p.setAddress("北京");
        p.setEmail("vince@163.com");
        p.setFax("6768789798");
        p.setTel("13838389438");
        p.setName("38");
        xmlEncoder.writeObject(p);
        xmlEncoder.close();
    }

    /**
     * DOM4J解析XML
     * 基于樹型結構，第三方組件
     * 解析速度快，效率更高，使用的JAVA中的迭代器實現數據讀取，在WEB框架中使用較多（Hibernate)
     *
     */
    @Test
    public void dom4jParseXML() throws DocumentException {
        //1 創建DOM4J的解析器對象
        SAXReader reader = new SAXReader();
        InputStream is = Thread.currentThread().getContextClassLoader()
                .getResourceAsStream("com/vince/xml/person.xml");
        org.dom4j.Document doc = reader.read(is);
        org.dom4j.Element rootElement = doc.getRootElement();
        Iterator<org.dom4j.Element> iterator = rootElement.elementIterator();
        ArrayList<Person> persons = new ArrayList<>();
        Person p = null;
        while(iterator.hasNext()){
            p = new Person();
            org.dom4j.Element e = iterator.next();
            p.setPersonid(e.attributeValue("personid"));
            Iterator<org.dom4j.Element> iterator1 = e.elementIterator();
            while(iterator1.hasNext()){
                org.dom4j.Element next = iterator1.next();
                String tag = next.getName();
                if("name".equals(tag)){
                    p.setName(next.getText());
                }else if("address".equals(tag)){
                    p.setAddress(next.getText());
                }else if("tel".equals(tag)){
                    p.setTel(next.getText());
                }else if("fax".equals(tag)){
                    p.setFax(next.getText());
                }else if("email".equals(tag)){
                    p.setEmail(next.getText());
                }
            }
            persons.add(p);
        }
        System.out.println("結果：");
        System.out.println(Arrays.toString(persons.toArray()));
    }

    /**
     * JDOM解析 XML
     * 1、與DOM類似基于樹型結構，
     * 2、與DOM的區別：
     * （1）第三方開源的組件
     * （2）實現使用JAVA的Collection接口
     * （3）效率比DOM更快
     */
    @Test
    public void jdomParseXML() throws JDOMException, IOException {
        //創建JDOM解析器
        SAXBuilder builder = new SAXBuilder();
        InputStream is = Thread.currentThread().getContextClassLoader()
                .getResourceAsStream("com/vince/xml/person.xml");
        org.jdom2.Document build = builder.build(is);
        Element rootElement = build.getRootElement();
        List<Person> list = new ArrayList<>();
        Person person = null;
        List<Element> children = rootElement.getChildren();
        for(Element element: children){
            person = new Person();
            String personid = element.getAttributeValue("personid");
            person.setPersonid(personid);
            List<Element> children1 = element.getChildren();
            for (Element e: children1){
                String tag = e.getName();
                if("name".equals(tag)){
                    person.setName(e.getText());
                }else if("address".equals(tag)){
                    person.setAddress(e.getText());
                }else if("tel".equals(tag)){
                    person.setTel(e.getText());
                }else if("fax".equals(tag)){
                    person.setFax(e.getText());
                }else if("email".equals(tag)){
                    person.setEmail(e.getText());
                }
            }
            list.add(person);
        }
        System.out.println("結果：");
        System.out.println(Arrays.toString(list.toArray()));
    }

    /**
     * DOM解析XML
     * 1、基于樹型結構，通過解析器一次性把文檔加載到內存中，所以會比較占用內存，可以隨機訪問
     * 更加靈活，更適合在WEB開發中使用
     */
    @Test
    public void domParseXML() throws ParserConfigurationException, IOException, SAXException {
        //1、創建一個DOM解析器工廠對象
        DocumentBuilderFactory factory = DocumentBuilderFactory.newInstance();
        //2、通過工廠對象創建解析器對象
        DocumentBuilder documentBuilder = factory.newDocumentBuilder();
        //3、解析文檔
        InputStream is = Thread.currentThread().getContextClassLoader()
                .getResourceAsStream("com/vince/xml/person.xml");
        //此代碼完成后，整個XML文檔已經被加載到內存中，以樹狀形式存儲
        Document doc = documentBuilder.parse(is);
        //4、從內存中讀取數據

        //獲取節點名稱為person的所有節點，返回節點集合
        NodeList personNodeList = doc.getElementsByTagName("person");
        ArrayList<Person> persons = new ArrayList<>();
        Person p = null;
        //此循環會迭代兩次
        for (int i=0;i<personNodeList.getLength();i++){
            Node personNode = personNodeList.item(i);
            p = new Person();
            //獲取節點的屬性值
            String personid = personNode.getAttributes().getNamedItem("personid").getNodeValue();
            p.setPersonid(personid);
            //獲取當前節點的所有子節點
            NodeList childNodes = personNode.getChildNodes();
            for (int j = 0;j<childNodes.getLength();j++){
                Node item = childNodes.item(j);
                String nodeName = item.getNodeName();
                if ("name".equals(nodeName)) {
                    p.setName(item.getFirstChild().getNodeValue());
                }else if("address".equals(nodeName)){
                    p.setAddress(item.getFirstChild().getNodeValue());
                }else if("tel".equals(nodeName)){
                    p.setTel(item.getFirstChild().getNodeValue());
                }else if("fax".equals(nodeName)){
                    p.setFax(item.getFirstChild().getNodeValue());
                }else if("email".equals(nodeName)){
                    p.setEmail(item.getFirstChild().getNodeValue());
                }
            }
            persons.add(p);
        }
        System.out.println("結果:");
        System.out.println(Arrays.toString(persons.toArray()));
    }

    /**
     * SAX解析的特點：
     * 1、基于事件驅動
     * 2、順序讀取，速度快
     * 3、不能任意讀取節點（靈活性差）
     * 4、解析時占用的內存小
     * 5、SAX更適用于在性能要求更高的設備上使用（Android開發中）
     * @throws ParserConfigurationException
     * @throws SAXException
     * @throws IOException
     */
    @Test
    public void saxParseXML() throws ParserConfigurationException, SAXException, IOException {
        //1、創建一個SAX解析器工廠對象
        SAXParserFactory saxParserFactory = SAXParserFactory.newInstance();
        //2、通過工廠對象創建SAX解析器
        SAXParser saxParser = saxParserFactory.newSAXParser();
        //3、創建一個數據處理器（需要我們自己來編寫）
        PersonHandler personHandler = new PersonHandler();
        //4、開始解析
        InputStream is = Thread.currentThread().getContextClassLoader()
                .getResourceAsStream("com/vince/xml/person.xml");
        saxParser.parse(is,personHandler);
        List<Person> persons = personHandler.getPersons();
        for (Person p:persons){
            System.out.println(p);
        }
    }
}