分类：技术

技术

Avoiding CORS Issues in React/Next.js

Cross-Origin Resource Sharing (CORS) 是一个让开发人员有些头疼的事。当在服务器调用外部api时，经常报这个错。以下有两种方法避免：

  1. 安装CORS library (https://www.npmjs.com/package/cors) 并告诉服务器访问， 
    app.use(cors({
    origin: 'http://127.0.0.1:3000',
}))
  2. 增加代理proxy， 
    const url;
if (process.env.NODE_ENV === "production") {
    url = "https://www.example.com/whoami"
} else {
    url = "http://127.0.0.1:4000/whoami"
}
fetch(url)

    在package.json文件添加：

    "proxy": "http://localhost:4000",

    假如使用 Next.js 的话，在next.config.js文件下添加如下：

    module.exports = {
  async rewrites() {
    return [
      {
        source: '/api/:path*',
        destination: 'http://localhost:4000/:path*'
      }
    ]
  }
}

Rails应用减少内存消耗

环境：Ubuntu 20.04

内存泄漏在 Ruby 中常常是由 C 拓展程序 bug 导致的。内存碎片会造成内存呈对数增长。 它看起来像一个长长的曲线，会到达某个不可见的限制点。所有 Ruby 进程都有一些内存碎片问题。Ruby 管理内存方式必然会导致这个问题。尤其是 Ruby 不会在内存中移动对象。这样可能会破坏持有 Ruby 对象指针的 C 扩展程序。 碎片有时会造成 Ruby 占用超过它实际需要两倍的内存，有时还可能会是 4 倍之多！

解决方法：1. 调整环境变量 export MALLOC_ARENA_MAX=2

2. 使用jemalloc内存分配库，检查是否支持

ruby -r rbconfig -e “puts RbConfig::CONFIG[‘MAINLIBS’]”

 

NextJS添加图片弹窗提示

首先安装 npm i reactjs-popup

代码如下：

import React from ‘react’;
import Popup from ‘reactjs-popup’;
import ‘reactjs-popup/dist/index.css’;

export default function PopupGfg(){
return(
<div>
<h4>NextJs Popup</h4>
<Popup trigger={<button> Click to open popup </button>}
position=”right center”>
<div>GeeksforGeeks</div>
<Link href=”#”>{<Image src=”/myalipay.jpg” width={300} height={400} alt=”banner”/>}</Link>
</Popup>
</div>
)
};

 

注： Position Enums: ‘top left’ ‘top right’ ‘bottom right’ ‘bottom left’ ‘right center’ ‘left center’ ‘top center’ ‘bottom center’ ‘center center’

youtube-dl 下载语音和视频

首先查看youtube单个音像的视频和音频对应的编号：

 youtube-dl -F  https://www.youtube.com/watch?v=ZsVcKcBiYHM

[youtube] ZsVcKcBiYHM: Downloading webpage

[youtube] ZsVcKcBiYHM: Downloading MPD manifest

[youtube] ZsVcKcBiYHM: Downloading player b128dda0

[info] Available formats for ZsVcKcBiYHM:

format code  extension  resolution note

139          m4a        audio only DASH audio   56k , m4a_dash container, mp4a.40.5 (22050Hz), 42.06MiB

251          webm       audio only tiny  120k , webm_dash container, opus @120k (48000Hz), 104.14MiB

140          m4a        audio only tiny  129k , m4a_dash container, mp4a.40.2@129k (44100Hz), 111.63MiB

278          webm       256×144    DASH video   95k , webm_dash container, vp9, 30fps, video only

160          mp4        256×144    DASH video  108k , mp4_dash container, avc1.4d400b, 30fps, video only

242          webm       426×240    DASH video  220k , webm_dash container, vp9, 30fps, video only

133          mp4        426×240    DASH video  242k , mp4_dash container, avc1.4d400c, 30fps, video only

134          mp4        640×360    360p  104k , mp4_dash container, avc1.4d401e@ 104k, 30fps, video only, 89.95MiB

243          webm       640×360    DASH video  405k , webm_dash container, vp9, 30fps, video only

244          webm       854×480    DASH video  752k , webm_dash container, vp9, 30fps, video only

135          mp4        854×480    DASH video 1155k , mp4_dash container, avc1.4d400a, 30fps, video only

136          mp4        1280×720   720p  243k , mp4_dash container, avc1.64001f@ 243k, 30fps, video only, 209.51MiB

247          webm       1280×720   DASH video 1505k , webm_dash container, vp9, 30fps, video only

137          mp4        1920×1080  1080p  404k , mp4_dash container, avc1.640028@ 404k, 30fps, video only, 348.85MiB

248          webm       1920×1080  DASH video 2646k , webm_dash container, vp9, 30fps, video only

18           mp4        640×360    360p  198k , avc1.42001E, 30fps, mp4a.40.2 (44100Hz), 170.78MiB

22           mp4        1280×720   720p  371k , avc1.64001F, 30fps, mp4a.40.2 (44100Hz) (best)

选择对应的编号下载：

youtube-dl -f 135+140 https://www.youtube.com/watch?v=ZsVcKcBiYHM