Vue3 讀書會 Watchers 分享者： wei <small>2024/3/31</small> 什麼是 watch? 有別於computed會根據一個或多個依賴項的變化而變化，產生快取，且需要回傳值。 watch 反而是監聽一個特定的數據，在響應式數據發生變化時做延伸操作。 數據改變時，觸發function執行，或修改資料 數據改變時，發送API請求資料

發現 Eagle 的契機 我的職業是網頁工程師，平常在切版面時，也需要用到一些素材，如果沒有設計師的幫助，就要上網找一些svg或png檔案，沒有很多網站可以免費下載，有些甚至都要註冊才能使用，我自己覺得很不便利，甚至註冊了可能還被騙，也會限制下載次數或檔案類型與大小，自己要用google的方式找素材真的很麻煩。 平常有空也會寫文章，現在的文章如果能放上一張cover圖會更好，通常都是在unsplash網站中去找。 為了吸收數位工具的知識，自己蠻固定的都會看「雷蒙30」的文章，看到雷蒙介紹Eagle軟體的便利，而且居然是台灣製作的，就決定馬上來試用，試用期甚至有完整的30天，覺得很佛心。 Eagle 我喜歡的功能 下載了Eagle之後，還有初次上手的使用影片可以看，加快熟悉如何使用，蠻貼心的。 試用之後，

Vue3 讀書會 Vue-router 分享者： wei <small>2024/7/21</small> SPA 與 MPA 比較 video: Mobiecom Speed Comparison SPA vs MPA MPA SPA

Given a sorted array of distinct integers and a target value, return the index if the target is found. If not, return the index where it would be if it were inserted in order. You must write an algorithm with O(log n) runtime complexity. Example: Input: nums = [1,3,5,6], target = 5 Output: 2 Input: nums = [1,3,5,6], target = 2

Given an integer array nums sorted in non-decreasing order, remove the duplicates in-place such that each unique element appears only once. The relative order of the elements should be kept the same. Then return the number of unique elements in nums. Consider the number of unique elements of nums to be k, to get accepted, you need to do the following things: Change the array nums such that the first k elements of nums contain the unique elements in the order they were present in nums initially. The remaining elements of nums are not important as well as the size of nums. Return k. Example 1: Input: nums = [1,1,2]

Given an integer array nums, return true if any value appears at least twice in the array, and return false if every element is distinct. Example : Input: nums = [1,2,3,1] Output: true Input: nums = [1,2,3,4] Output: false

Request : Given a non-empty array of integers nums, every element appears twice except for one. Find that single one. You must implement a solution with a linear runtime complexity and use only constant extra space. Example : Input: nums = [2,2,1] Output: 1

Given an integer array nums, move all 0's to the end of it while maintaining the relative order of the non-zero elements. Note that you must do this in-place without making a copy of the array. 給定一個整數數組 nums，將所有 0 移至其末尾，同時保持非零元素的相對順序。 請注意，您必須就地執行此操作，而不複製陣列。 解答： 第一段for...of，如果數字不等於0，就依照順序把數字放入，所以先建立一個變數儲存index值，從0開始，有放入數字就將index + 1

An ugly number is a positive integer whose prime factors are limited to 2, 3, and 5. Given an integer n, return true if n is an ugly number. 題目要求ugly number 會是一個正整數 沒有頭緒，只想到要判斷一個數字是否可以被2 、 3 或 5整除，查solutions提到可以用遞迴的方式， var isUgly = function(n) { if (n<=0) return false

 <font color="#999999">圖片來源：udemy：JavaScript 全攻略：克服 JS 的奇怪部分 </font> 每次程式碼被呼叫時，執行環境被創造，每個執行環境的有自己的環境變數（variable Environment），他可以參考外部環境（outer Environment），隨著範圍練去找我們要的變數或函數，也就是說如果我要找一個變數，但不在環境變數裡面，JS就會到外部去找這個變數，直到找到全域環境為止 每當函數被執行，JavaScript引擎會給我們一個不曾宣告的東西，this 變數，this會指向不同的物件，一個不同的東西，依據函數如何被呼叫的 全域環境下

在函數中放入另一個函數，先呼叫greet("Hi")，在接著執行它回傳的函數，並加入參數"Tony"，其實就是閉包 function greet(whattosay) { return function(name) { console.log(whattosay + ' ' + name) } } greet("Hi")("Tony") // Hi Tony

Immediately Invoked Function Expressions 函數創造後就立刻執行 從範例來了解什麼是IIFE 一般的函數寫法大多是下面這樣 // function statement function greet(name) { console.log( 'Hello ' + name) }

Given an integer n, return true if it is a power of two. Otherwise, return false. An integer n is a power of two, if there exists an integer x such that n == 2x. 第一次寫： var isPowerOfTwo = function(n) { for (let i = 0; i<=31 ; i++ ) { console.log(i) if ( n === Math.pow(2,i) ) {

Data const inventors = [ { first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 }, { first: 'Isaac', last: 'Newton', year: 1643, passed: 1727 }, { first: 'Galileo', last: 'Galilei', year: 1564, passed: 1642 }, { first: 'Marie', last: 'Curie', year: 1867, passed: 1934 }, { first: 'Johannes', last: 'Kepler', year: 1571, passed: 1630 }, { first: 'Nicolaus', last: 'Copernicus', year: 1473, passed: 1543 }, { first: 'Max', last: 'Planck', year: 1858, passed: 1947 },

React Router Styled-components 5.3.10 React Query React Hook Form Supabase <font color="#3733FF">overview</font> 小型精品飯店，有八個豪華木屋 需要有一個應用程式來管理飯店的一切：預訂、客房和客人 這是用於客人抵達辦理入住時，內部要使用的

fake data label: X 軸名稱 totalSales 和 extrasSales 銷售數據 const OLDdata = [ { label: "Jun 09", totalSales: 480, extrasSales: 320 - 300 }, { label: "Jun 10", totalSales: 580, extrasSales: 400 - 300 }, { label: "Jun 11", totalSales: 550, extrasSales: 450 - 300 }, { label: "Jun 12", totalSales: 600, extrasSales: 350 - 300 },

Udemy ：Advanced CSS and Sass: Flexbox, Grid, Animations and More 課程筆記 <font color="#3733FF">什麼是Responsive images</font> 目的是將正確的圖像提供給正確的屏幕尺寸和設備，依據使用者目前的螢幕大小來顯示合適的圖片大小，以避免在較小的螢幕上下載不必要的大圖像。 譬如說網頁封面圖片在電腦上呈現的圖片大小是1MB，我們不會希望使用者用手機瀏覽網站時也需要下載1MB 但設計者也需要準備不同大小的圖片 通常有三個方式

<font color="#3733FF">Objects And The Dot</font> 物件本身會有一個記憶體位址，它可以參考到其他屬性、物件或方法的所在位址 了解JavaScript如何找出物件 屬性 和 方法 的記憶體位置。 let person = new Object() person["firstname"] = " Tony" //創造屬性firstname let firstNameProperty = "firstname" console.log(person[firstNameProperty]) //Tony

函數就是物件，有自己的屬性和方法，所有的函數都可以使用Call()、Apply() and Bind() 這三個方法都可以控制this變數要指向誰 :::warning bind 創造函數的拷貝，讓我們設定this關鍵字 apply 和call 呼叫函數，然後設定this，接著傳入其他參數 ::: digraph graphname{ T [label="Function(a special type of object)"]

課程筆記 第二節：執行環境與詞彙環境 第三節：型別與運算子 第四節：物件與函數 第五節：JavaScript 的物件導向與原型繼承 第六節：建立物件 第七節：雜談 第八節：檢驗知名的框架與資源庫 第九節：打造一個框架/資源庫