程式學習

2023年2月24日星期五

singleNumber , ex: [4,1,2,1,2]

var singleNumber = function(nums) {

var ans = 0;

for (var i = 0; i < nums.length; i++) {

ans = ans ^ nums[i];

}

return ans;

};

example1:

Input: nums = [4,1,2,1,2]

Output: 4

2023年2月23日星期四

containsDuplicate 利用arr-key取代第二個for-loop

var containsDuplicate = function(nums) {

const arr=[]

for(let i=0;i<nums.length;i++) {

if(arr[nums[i]]) {

return true

}else {

arr[nums[i]]= true

}

return false

};

Example 1:

Input: nums = [1,2,3,1]

Output: true

Example 2:

Input: nums = [1,2,3,4]

Output: false

時間字符串被格式化為hh:mm:ss並基於 24 小時制，字符串比較的默認行為就足夠了

https://bobbyhadz.com/blog/javascript-compare-two-time-strings

const time1 = '07:30:24';
const time2 = '10:45:33';

if (time1 > time2) {
  console.log('time1 is greater than time2');
} else if (time2 > time1) {
  // ✅ this runs
  console.log('time2 is greater than time1');
} else {
  console.log('time1 is equal to time2');
}

2023年2月7日星期二

why-is-my-css3-transition-delaying-before-it-starts

https://stackoverflow.com/questions/30627250/why-is-my-css3-transition-delaying-before-it-starts

可試試這個文章 https://css-tricks.com/using-css-transitions-auto-dimensions/ 看能不能解

2022年12月29日星期四

scroll-snap-type: x mandatory;

https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type

2022年6月9日星期四

sign in with apple

<divid="appleid-signin"data-mode="center-align"data-color="black"data-border="false"data-border-radius="16"data-size="32"></div>

https://appleid.apple.com/signinwithapple/button

程式串接:

apple open id 要先連到

https://appleid.apple.com/auth/authorize?
response_type=code
&redirect_uri={redirect_uri}
&client_id={client_id}
&scope=openid%20email
&response_mode=form_post

ex: https://appleid.apple.com/auth/authorize?response_type=code&redirect_uri=https%3A%2F%2Fidp.demologin.com%3A9443%2Fcommonauth&client_id=idp.demoglogin.com&scope=openid%20email&response_mode=form_post

完成之後會轉頁到

{redirect_uri}?code=*********

然後後端再用code 去串apple api 拿到用戶資料

登入後會轉頁到我們定義的 {redirect_uri} 網址，後面會帶上 code參數

後端再拿那個參數跟 apple 取得會員資料

or...

或是你也可以直接使用apple官方提供的方式

https://developer.apple.com/documentation/sign_in_with_apple/displaying_sign_in_with_apple_buttons_on_the_web

埋入div#appleid-signin 跟script，他就也會 div#appleid-signin 產生一個圖示連結到

https://appleid.apple.com/auth/authorize?
response_type=code
&redirect_uri={redirect_uri}
&client_id={client_id}
&scope=openid%20email
&response_mode=form_post

2022年5月23日星期一

DPI Scaling make "border: 1px solid #ccc" thinkness inconsistent

https://stackoverflow.com/questions/71674803/html-tables-has-a-weird-bold-horizontal-line-due-to-border-collapse-property

If you have a 1px border and DPI Scaling set to, for example 150%, the border would technically be 1.5px. Because the browser doesn't use sub-pixel rendering, it alternates between 1px and 2px.

There are multiple ways to deal with it.

1. Set the `border-width` to `0.01px`

A quick and dirty workaround, because the Browser will fallback to at least 1px

2. Use `resolution` media queries

Change the border-width to the appropriate decimal per scaling level.

@media (min-resolution: 120dpi) {
  table, th, td {
    border-width: 0.75px;
  }
}

@media (min-resolution: 144dpi) {
  table, th, td {
    border-width: 0.666px;
  }
}

@media (min-resolution: 192dpi) {
  table, th, td {
    border-width: 0.5px;
  }
}

Here's an overview of the different DPI Scaling Levels and their values

DPI Scaling Level

Smaller 100% (default) = 96 dpi
Medium 125% = 120 dpi
Larger 150% = 144 dpi
Extra Large 200% = 192 dpi

3. JavaScript

Change the border-width to the appropriate decimal per scaling level with JavaScript using the window.devicePixelRatio variable.

文章加密

2023年2月24日 星期五

2023年2月23日 星期四

2023年2月7日 星期二

2022年12月29日 星期四

2022年6月9日 星期四

2022年5月23日 星期一

1. Set the border-width to 0.01px

2. Use resolution media queries