Programming/web 관련2023. 5. 18. 14:14

유튜브에서 노마드 코더의 추천영상에 webGPU라는게 떠서 찾아보니

겁나 따끈한(고작 8일 지난..) 표준이다.

 

WebGPU
W3C Working Draft, 10 May 2023

[링크 : https://www.w3.org/TR/webgpu/]

[링크 : https://codelabs.developers.google.com/your-first-webgpu-app?hl=ko#0]

 

크롬94 베타 부터 webgpu 지원이 시작되었다는데(일단 글은 2021.09.11)

[링크 : https://www.clien.net/service/board/park/16489505]

 

webGL을 물리치고 대세가 될지 아니면 병행하게 될지 미래가 궁금해진다.

윈10 + 크롬 버전 113.0.5672.93(공식 빌드) (64비트)

 

ubuntu 18.04 + 버전 113.0.5672.126(공식 빌드) (64비트)

[링크 : https://webgpu.github.io/webgpu-samples/samples/shadowMapping]

 

+

리눅스에서는 webGPU가 disable인데.. 이걸 어떻게 켤 수 있으려나?

chrome://gpu/

 

[링크 : https://discourse.threejs.org/t/webgpu-example-not-working-in-ubuntu-20-04/40484]

Posted by 구차니
Programming/web 관련2023. 3. 31. 12:15
Posted by 구차니
Programming/web 관련2023. 3. 15. 11:25

chatGPT 님에게 server push 예제를 알려줘라고 했더니 아래와 같이 알려주신다.

Server push is a technique that allows a server to push data to a client without the client first making a request for the data. In JavaScript, this can be achieved using the Server-Sent Events (SSE) API.
Here's an example of how you can use SSE to implement server push in JavaScript:
On the server side, you need to create an endpoint that will send the SSE messages. In this example, we'll create a simple Node.js server:
const http = require('http');

const server = http.createServer((req, res) => {
  if (req.url === '/sse') {
    res.writeHead(200, {
      'Content-Type': 'text/event-stream',
      'Cache-Control': 'no-cache',
      'Connection': 'keep-alive'
    });

    setInterval(() => {
      res.write(`data: ${new Date().toISOString()}\n\n`);
    }, 1000);
  } else {
    res.writeHead(404);
    res.end();
  }
});

server.listen(3000);
const source = new EventSource('/sse');

source.onmessage = (event) => {
  console.log(event.data);
};

 

아무튼 SSE를 검색해보는데.. jquery 연관은 잘 안보이고

EventSource.onmessage() 로 처리 가능만 하다면야 머...

[링크 : https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events]

 

 

+

golang의 REST / websocket 제거하고 cgi로 돌리려는 어마어마한 음모가! ㅠㅠ

'Programming > web 관련' 카테고리의 다른 글

webGPU  (0) 2023.05.18
chart.js log 스케일  (0) 2023.03.31
chart.js 특정 항목 보이지 않게 하기(가로줄 치기)  (0) 2023.03.10
chart.js 수직 도움선  (0) 2023.01.27
JWT 로그인 예제  (0) 2022.08.24
Posted by 구차니
Programming/web 관련2023. 3. 10. 16:23

클릭하면 당연히(?) 줄 그어져서 죽는데

코드로 처음부터 해당 항목을 hidden 상태로 표시하려니 먼가 묘하게 어렵다?

 

function(e, legendItem, legend) {
    const index = legendItem.datasetIndex;
    const ci = legend.chart;
    if (ci.isDatasetVisible(index)) {
        ci.hide(index);
        legendItem.hidden = true;
    } else {
        ci.show(index);
        legendItem.hidden = false;
    }
}

[링크 : https://www.chartjs.org/docs/latest/configuration/legend.html]

 

매우 귀찮으니(!)

chart 라는 변수에 chart.js 객체가 존재한다면

아래의 legned.chart.hide(index) 로 끄고 legned.chart.show(index) 로 표시할 수 있다.

index 이니 0부터 시작함에 주의!

//var chart = new chart()
chart.legend.chart.hide(1)
chart.legend.chart.show(1)

'Programming > web 관련' 카테고리의 다른 글

chart.js log 스케일  (0) 2023.03.31
chatGPT님 가라사대 Server-Sent Events (SSE)  (0) 2023.03.15
chart.js 수직 도움선  (0) 2023.01.27
JWT 로그인 예제  (0) 2022.08.24
quirks mode  (0) 2022.08.08
Posted by 구차니
Programming/web 관련2023. 1. 27. 14:28

chart.js의 interaction 항목을 intersect = false로 해주면

 

var chart_obj = new Chart(chart, {
plugins: [{
afterDraw: chart => {
  if (chart.tooltip?._active?.length)
  {               
 let x = chart.tooltip._active[0].element.x;             
 let yAxis = chart.scales.y;
 let ctx = chart.ctx;
 ctx.save();
 ctx.beginPath();
 ctx.moveTo(x, yAxis.top);
 ctx.lineTo(x, yAxis.bottom);
 ctx.lineWidth = 1;
 ctx.strokeStyle = 'rgba(0, 0, 255, 0.4)';
 ctx.stroke();
 ctx.restore();
  }
}
  }],

// ...

options: {
animation : false,
interaction: {
            intersect: false,
            mode: 'index',
          },
spanGaps: true
}

[링크 : https://stackoverflow.com/questions/68058199/chartjs-need-help-on-drawing-a-vertical-line-when-hovering-cursor]

 

options.interaction.mode
nearest - 근접한 위치의 포인트를 툴팁으로 표시 (기본값)
index - 여러개의 데이터가 있을 경우 모아서 툴팁으로 표시

optiones.interaction.intersect
true - 선에 겹쳐야만 툴팁 표시
false - 해당되는 x 축에 대해서 툴팁 표시

[링크 : https://www.chartjs.org/docs/latest/configuration/interactions.html]

'Programming > web 관련' 카테고리의 다른 글

chatGPT님 가라사대 Server-Sent Events (SSE)  (0) 2023.03.15
chart.js 특정 항목 보이지 않게 하기(가로줄 치기)  (0) 2023.03.10
JWT 로그인 예제  (0) 2022.08.24
quirks mode  (0) 2022.08.08
grid와 flex  (0) 2022.07.04
Posted by 구차니
Programming/web 관련2022. 8. 24. 18:05

음.. 환상이 컸었나..

지금 다시 보는데 POST로 id, pw를 plain text로 보내는 센스..

서버가 https로 보안채널이 되었다고 가정하지 않으면 의미없는 짓 같은 느낌..

 

[링크 : https://llshl.tistory.com/28]

[링크 : https://minho-jang.github.io/development/7/]

[링크 : https://velopert.com/2389]

 

SSO 구현에 JWT가 가능한진 좀 찾아봐야겠다.

[링크 : https://brunch.co.kr/@sangjinkang/36]

'Programming > web 관련' 카테고리의 다른 글

chart.js 특정 항목 보이지 않게 하기(가로줄 치기)  (0) 2023.03.10
chart.js 수직 도움선  (0) 2023.01.27
quirks mode  (0) 2022.08.08
grid와 flex  (0) 2022.07.04
markdown 문법 - 체크박스  (0) 2020.10.15
Posted by 구차니
Programming/web 관련2022. 8. 8. 17:26

귀찮아서 html 대충 만들다 보니

처음 부분에 <!DOCTYPE html>을 뺴먹었더니

크롬 개발자 도구에 아래와 같은 issue가 발생해서 클릭해보니.. 이상한게 보인다.

 

[링크 : https://web.dev/doctype/?utm_source=devtools]

 

굳이 해석(?)하자면

html5, css 표준 제정 이전 레거시 브라우저  호환성 지원? 이라고 보면 되려나?

[링크 : https://a-tothe-z.tistory.com/4]

[링크 : https://developer.mozilla.org/en-US/docs/Web/HTML/Quirks_Mode_and_Standards_Mode]

[링크 : https://aboooks.tistory.com/169]

[링크 : https://en.wikipedia.org/wiki/Quirks_mode]

'Programming > web 관련' 카테고리의 다른 글

chart.js 수직 도움선  (0) 2023.01.27
JWT 로그인 예제  (0) 2022.08.24
grid와 flex  (0) 2022.07.04
markdown 문법 - 체크박스  (0) 2020.10.15
크롬 확장도구 - json viewer  (0) 2019.08.07
Posted by 구차니
Programming/web 관련2022. 7. 4. 18:06

웹 2년 넘게 안했더니

또 어떤 놈(?)들이 사악한걸 만들어 놨네

 

[링크 : https://studiomeal.com/archives/197]

[링크 : https://studiomeal.com/archives/533]

 

+

2022.08.08

display: flex; 로 설정하고

flex-direction: row;

flex-direction: column;

으로 쌓일 방향을 지정가능하다.

[링크 : https://heropy.blog/2018/11/24/css-flexible-box/]

'Programming > web 관련' 카테고리의 다른 글

JWT 로그인 예제  (0) 2022.08.24
quirks mode  (0) 2022.08.08
markdown 문법 - 체크박스  (0) 2020.10.15
크롬 확장도구 - json viewer  (0) 2019.08.07
resizable table cell  (0) 2019.06.17
Posted by 구차니
Programming/web 관련2020. 10. 15. 12:07

체크박스

[ ] [x]

 

이미지

![이미지 대체 텍스트](url)

 

[링크 : https://stackoverflow.com/questions/47344571/]

[링크 : https://jijong.github.io/2016-12-01/markdown/]

 

[링크 : https://commonmark.org/]

 

[링크 : https://www.nuget.org/packages/Markdig.Signed/]

[링크 : https://github.com/lunet-io/markdig]

 

+

확장된 녀석들이 아니면 체크박스나 텍스트박스는 지원을 안해서

HTML로 입력을 해야 할지도?

[링크 : https://stackoverflow.com/questions/24051693/input-form-in-markdown]

[링크 : https://github.com/brikis98/wmd]]

'Programming > web 관련' 카테고리의 다른 글

quirks mode  (0) 2022.08.08
grid와 flex  (0) 2022.07.04
크롬 확장도구 - json viewer  (0) 2019.08.07
resizable table cell  (0) 2019.06.17
web framework  (0) 2019.06.05
Posted by 구차니
Programming/web 관련2019. 8. 7. 10:43

맨날 json beautifier 찾아서 온라인으로 했는데

오프라인으로 바로 처리되니 편하네

 

[링크 : https://chrome.google.com/webstore/search/json%20view?hl=ko]

'Programming > web 관련' 카테고리의 다른 글

grid와 flex  (0) 2022.07.04
markdown 문법 - 체크박스  (0) 2020.10.15
resizable table cell  (0) 2019.06.17
web framework  (0) 2019.06.05
ECDHE?  (0) 2019.04.26
Posted by 구차니