kipid's blog

# Email by JAVA (자바 프로그램을 이용해 이메일 보내기, com.sun.mail:jakarta.mail:2.0.1 :: 2021-04-06 에 update 가 끝나있는 오래된 library 임.) 이메일 (Email) 을 프로그래밍적으로 보내고 싶은데 어떻게 해야할까? 개인적으로는 Recoeve.net 에 회원가입을 할 때, 계정 만들고 이메일 통해 인증/확인 하기 위한 용도로 이메일을 활용하려고 하는 중인데, 또 비밀번호를 잊어버렸다거나 했을때의 보완수단으로서 활용하려고... 이러려면 아무튼 프로그래밍적으로 이메일을 보낼 수 있어야 한다. 어떻게 하면 될까? ## TOC ## Gmail (지메일) by com.sun.mail:jakarta.mail:2.0.1 (2021-04-06) Gmai..

# v.qq.com 동영상 퍼오기 동영상 주소: https://v.qq.com/x/cover/mzc00200cg24vid/y0048i7crfg.html iframe ```[.lang-html] ```/ 3분까지만 로딩되고 나머지는 페이지 방문해서 봐야 하는듯? 광고도 많고 ㅡ,.ㅡ;;; 유튜브보다 못한거 같은데, 중국이라서 국내기업 키워주느라 유튜브 막아놓고 이런 사이트 밀어주는듯.

# .webp, .webm, .avif, .mp4 를 img tag, video tag 로 로딩 테스트 (Loading test) .webp, .webm 이 .gif 파일을 대체하는 중인데.. (둘 다 움짤 | 움직이는 짤림방지 사진 이지만 용량 차이가 어마어마하기 때문. .webp, .webm 이 더 압축을 잘함.) .webp 는 사진 크기를 25%로 더 줄여서 압축했음. .webm 은 사진 크기를 50%로 줄여서 압축했음. .webm 파일을 가져다가 크기변환없이 압축했음. .mp4: 9.01MB ## PH 2024-02-18 : First posting. ## TOC ## tag test .webp .webm .avif .mp4 ## tag test .webp .webm .avif .mp4 ## 결론..

# HTML 에서 동영상 연속 재생하기 (playlist, shuffle, replay) 작성중인 글. 이것도 천천히 정리할듯;;; 여러 동영상을 한꺼번에 이어서 재생하거나 반복재생하고 싶어서 정리하는 중. 구현은 Recoeve.net (/user/kipid?cat=[Music/Break]--K-pop) 에 해놨으니 참조하시길. ## PH 2024-01-07 : start, end. ## TOC ## HTML tag HTML5 로 오면서 tag 도 생긴거 같긴한데... 이건 직접 서버를 운영하는 사람만 써먹을 수 있는듯? 동영상을 어딘가에 파일로 올려놔야 하니까;;; 파일 형태로 업로드하고 그냥 link 넣으면 될라나? 사용방법은 참조하시길. 그냥 대충 이런식으로 집어넣으면 됨. Media event 들..

# Getting Data from Google Spreadsheet or Excel 작성중. Excel 같은 형태로 data를 관리하면 편할때가 많음. 뭐 프로그래밍에 익숙한 분들이라면 SQL 같은걸 이용할수도 있겠지만, 간단한 데이터의 경우 이런것보다 간단하게 excel이나 google spreadsheet 같은 것을 이용하는 것이 훨씬 간편하고 좋음. 그런데 이 data를 인터넷에서 잘 보여주고 싶을때는 excel이 아닌 html / javascript array / JSON (JavaScript Object Notation) 형태로 편집을 해줘야 할텐데... 엑셀이나 google spreadsheet의 데이터를 html로 편집 가능한 형태로 변환해 봅시다. ## PH 2024-02-09 : To ..

# Getting html of container including the container itself jQuery 를 이용하거나 그냥 JavaScript 를 이용해서 내부의 html 은 다음과 같이 끄집어낼 수 있다. ```[.lang-js] let containerHTML = $("#container").html(); let containerInnerHTML = $("#container")[0].innerHTML; ```/ ## PH 2024-02-06 : First posting. ## TOC ## 예제 (innerHTML) 아래 html 은 다음과 같다. ```[.lang-html] ```/ 다음과 같은 함수들로 내부 html 을 뽑아와 보자. ```[#pre-code-innerHTML.lang..

# 구글 검색 바로 할 수 있게 input 및 button 만들기 ## PH 2023-12-28 : First posting. ## TOC ## 구글 검색 구글 검색은 http://www.google.com/search?q=soccer 형태로 이루어진다. "q=검색하고 싶은 문구" 를 넣으면 되는거 같으니 다음과 같이 만들어 봅시다. Google Search ### Code HTML 과 Javascript 는 다음과 같음. ```[.linenums.lang-html] Google Search ```/ ### Using form submit ```[.linenums.lang-html] ```/ ## RRA https://inpa.tistory.com/ 에서 검색 구현해 놓으신 것 참고했음.

# Parent DOM (Document Object Model) 이 hidden 일 때, child element 가 update 되면 hidden 이 풀릴 때 해결법 Recoeve.net 개발하면서 목록 (ToR) 이 다른 카테고리로 옮겨갈때 갑자기 pop-up 되는 현상이 발생했는데, 이게 카테고리가 바뀌면서 목록이 update 되고 목록 (ToR) 의 child elements 가 update 되면서 발생하는 문제 같았다. 역시나 만능 ChatGPT 에 문의 결과 대충의 답의 힌트를 얻을 수 있었는데... children DOM 의 display 를 inherit 으로 하면 해결되는 문제였다. ## PH 2023-12-03 : First posting. ## TOC ## To ChatGPT in ..

# 브라우저에서 자동 비밀번호 완성 (Auto password completion) 일 때, 이를 파악해서 바로 로그인 시켜주는 방법 요즘 브라우저는 사이트마다 비번을 기억하기 어렵기 때문에 자동으로 비번을 생성시켜주고 이를 브라우저가 기억해놓고 사이트에 로그인 페이지에 가면 자동으로 아이디와 비번을 채워주곤 한다. 그런데 채워지기만 하고 로그인 버튼을 따로 눌러야 하는 번거로움이 있기도 한데 이를 해결하는 방법을 찾아서 공유하고자 한다. 아마도 휴대폰 인증 번호가 문자로 오고 이걸 자동으로 입력해주고 입력 후엔 바로 인증하기 버튼이 자동으로 눌러지게 해놓은 어플들도 많은데 비슷한 방법을 쓰고 있지 않나 생각한다. ## PH 2023-12-01 : First posting. ## monitorEvents..

# imgur - Embed album 앨범 만들어 놓으면 아래와 같이 embeding 할 수 있는 API 를 제공하긴 하는구나. CSS max-width:100% 같은거는 안먹혀서 responsible web 으로 만들긴 힘든듯도? 스마트폰에서 접속하면 parsing/rendering 이 다른식으로 이루어 질래나? 처음 로딩할때 width 체크해서 적당하게 만들어주긴 하는듯? ## TOC ## Embed imgur album 아무튼 코드는 아래와 같고. ```[.linenums.lang-html] HARAGU ```/ blockquote 부분에 아래와 같이 나타남. HARAGU ## Direct iframe Album URI | URL 에 /embed?pub=true&context=false 붙이면 d..

# Learning AJAX AJAX 란 "Asynchronous JavaScript and XML" 의 약자로 비동기적으로 서버에 무언가 요청을 보낼때 쓰인다. 유저가 댓글을 쓴다던지, 새로 업데이트 된 댓글을 불러온다던지 할 때, 새 창을 띄우지 않고도 서버와 데이터를 주고받는 것을 가능하게 해주는 것이다. 자세한 설명은 에 잘 되어 있으니 여길 잘 참고하시길... In general, Ajax does not work across domains. For instance, a webpage loaded from example1.com is unable to make an Ajax request to example2.com as it would violate the same origin policy. ..

# Referer 알아내기 in Server (Vert.x) and Client (HTML/javascript) Client (방문객) 이 어느 경로를 통해 들어왔는지, 어느 검색어를 통해 어느 검색엔진을 통해 들어왔는지 등을 알아내려면 어떻게 해야할까? Vert.x 랑 javascript 에서 쓰이는 referer/referrer 철자 (spelling) 가 다르네? ㅡㅂㅡ;;; ## PH 2023-11-04 : Update window.kipid to window.m. 2023-02-27 : First posting. ## TOC ## Referer in Vert.x server 참고 https://vertx.io/. ```[.linenums.lang-java] import io.vertx.core...

# URL | URI parser (URL 의 href, origin, protocol, host, hostname, port, pathname, search, hash 뽑아내기) URL | URI 에서 href, origin, protocol, host, hostname, port, pathname, search, hash 을 알아내고 싶을때가 있는데, javascript 단에서 제공하는 function 이 분명 존재할거라 생각해서 스스로 짜보다가 chatGPT 통해서 물어보고 알게 된 것 공유. ## PH 2023-11-04 : First posting. ## TOC ## URL 의 기본구조 ```[.linenums] // The entire URL [href]=[protocol]//[hostname..

# HTML id 에 한글이나 encodeURIComponent, %, \s, [, ], !, @, #, $, %, ^, &, *, (, ), -, _, +, =, \, /, ?, ~, :, ;, ", ', , ,, . 등 특수문자 (special characters) 들어갈 수 있는지 테스트 해보기 ## PH 2023-10-29 : First posting. (No double enter is allowed in codeprint>script.) ## TOC ## 한글 id test Id which starts with 한글. Id which starts with English+한글 Id which starts with English+한글 Id which starts with English+한글1 Id..

# Spread syntax ... operator in Javascript Spread syntax 에 대해 배워봅시다. Java 에서는 String... args 같이 쓰였던건데, Javascript 에도 비슷한 것이 도입 됨. ## PH 2023-10-30 : First posting. ## TOC ## 예제 참고: ```[.linenums.lang-html] ```/ ```[#pre-code-spread.linenums.lang-html] ```/ ## RRA 자바스크립트 최신 문법 (ES6, ES11) | 모르면 후회 하는 최신 문법과 사용법 정리 🐶, by 드림코딩

# Formatting the lyrics to Recoeve.net style (genius.com) 3줄 이상 띄어진 부분들이 다 2줄로 맞춰지고 You might also like 부분이 삭제되고, 앞쪽에 #lyrics 가 추가 됨. (All unicode whitespace 도 그냥 space 로 치환 됨.) 즉 genius.com 이나 bugs 같은 곳에서 가사를 copy and paste (복사 붙이기 | 복붙) 한 뒤 Formatting 버튼이나 Ctrl+Enter 누르면 됨. ## PH 2023-10-29 : First posting. ## TOC ## Formatting Formatting (Shift+Enter) ## RRA https://genius.com/ https://music...

# Retrieving the title and singer from Spotify Anti-HeroTaylor Swift Get the title and singer

# Implementing multicursor like sublime text Ctrl+D in HTML javascript textarea 작성중인 글... 구현하기 쉽진 않은거 같네;;;;; 뭐 급한건 아니니 천천히 시도해 봐야지. 그런데 javascript 에서 multi selection 을 지원해 주긴 하나? 안해주면 짜기 엄청 복잡해질것도 같은데 ㅠㅜ; ## PH 2023-06-27 : First posting. ## TOC ## textarea with id="myTextarea" textarea 에서는 span tag 가 안먹혀서 이걸로는 구현 못할것도 같은데... ## div with contenteditable and id="myDiv" div with contenteditable 에..

# Javascript (자바스크립트): async 와 await 우선 단어 뜻부터. asynchronous: 동시에 일어나지 않는, 비동시적인, 비동기의. await: 기다리고 있다. 보통 javascript code 는 동시 다발적으로 (synchronous 하게) 실행되는데, 즉 코드가 적힌 순서대로 처리하는게 아니라 HTTP 요청을 보냈다가 숫자들 계산했다가 HTTP 답변이 왔으면 계산하다가 멈추고 HTTP 답변받은걸 처리했다가 문자열 띄우기도 했다가 alert 보냈다가 하는 식으로 말이다. 그렇기에 순서적으로 실행되어야 제대로 동작하는 코드가 있으면, 즉 HTTP 요청 ($.ajax, fetch 등) 후 데이터를 받아서 그 받은 데이터 가지고 화면에 표시해야 하는 작업이 있으면 그냥 javasc..

# Neighbors points plot plan (svg) 이웃들의 점수들을 similarity weight 줘서 그려주는 법 svg 로 공부하는 중. ## PH 2023-09-09: First posting. ## RRA www.w3schools.com :: SVG Tutorial Google docu - spreadsheet :: Recos and Statistics ## TOC ## Plot Example 각종 numbers 출처: . 100/23=4.347826087 4.347826087*3=13.04347826 4.347826087*21=91.30434783 0 1 2 3 4 5 6 7 8 9 10 52.38 ```[.linenums.lang-html] 0 1 2 3 4 5 6 7 8 9 1..

# 트위터 트윗 퍼오기 (Embedding Twitter Tweet) 트위터 글 (twitter tweet) 을 퍼오는 (embed) 하는 방법이다. 뭐 방법은 간단한데, javascript 가 먹히는 사이트에서만 쓸 수 있을듯. 트위터 웹페이지에 가면 "답글, 리트윗, 관심글 담기" (Reply, Retweeted, Favorite) 옆에 더 보기 (More) 가 있고 이것을 클릭하면 "트윗 담아가기" (Embed tweet) 가 보인다. 그러면 아래와 같은 javascript link 가 들어간 html code 를 준다. 이걸 원하는 곳에 붙여넣으면 "답글, 리트윗, 관심글"도 작동하는 트윗이 퍼가진다. 각종 옵션들도 설정할수 있는듯하니 reference 가서 더 공부해 보시길. ## TOC ## ..

# 설정하기 (DISQUS config 활용) setting by using DISQUS config (window.disqus_config function). For SEO (Search Engine Optimization), link ref="canonical" tag is important . 출처: :: When you have several choices for a product’s URL, canonicalization is the process of picking one of them. Luckily, it will be obvious in many cases: one URL will be a better choice than the others. But in some cases, it mi..

# Mouse click 들 (left, right, wheel, wheel up, wheel down, back, forward) 구분해내기 ## PH 2023-10-24 : First posting. ## TOC ## Test Click me Result Wheel click 으로 새창이 안열리게 하려면 a tag 의 href 를 제거해주면 됨. ## Code ```[.linenums.lang-html] Click me Result ```/ ## RRA kipid's blog :: HTML a href tag with onclick return kipid's blog :: HTML event handler kipid's blog :: Specific event handler on HTML elemen..

# 틱톡 (TikTok) | weverse.io 퍼오는 법 천천히 정리할 예정. ## PH 2023-09-18 : First posting. ## TOC ## 틱톡 (TikTok) 링크: https://www.tiktok.com/@hxxax__/video/7279098301746613511 ```[.linenums.lang-html] @hxxax__ 혜안 몰리와 띵띵땅땅 댄스 ♬ 오리지널 사운드 - 혜안 ```/ @hxxax__ 혜안 몰리와 띵띵땅땅 댄스 ♬ 오리지널 사운드 - 혜안 ### https://vt.tiktok.com/(\w+)/ 형태의 URI 일 경우. 이건 web client 를 돌리는 경우에만 iframe 형태의 Full URI 로 뽑아낼 수 있는거 같음. 아래는 FullURI 끄집어내는..

# 댓글 플러그인 | 위젯 (SNS comment plug-in | widget) - Facebook, DISQUS SNS 에서 댓글 위젯을 제공해주는 경우가 많음. 뭐 직접 제공해주는 것은 아니더라도 뭔가 API 같은건 공개해줘서 다른 사람이 댓글 위젯을 만들 수 있게 해준듯. 댓글에서 MathJax 수식 댓글 테스트 하려고 수식 \sum_i 하나 넣음. 댓글에서 수식을 쓰려면 Latex 형태의 수식을 다음과 같이 enclose 해서 넣으면 됨 . :: \( inline math \), \[ outline math \]. ## PH 2015-12-17 : To SEE. ? : First posting. ## TOC ## Facebook comment test Code는 다음과 같음 . (그런데 페이스북..

# Learning Vert.x Vert.x 를 배워봅시다. (version 3.0.0 이 나오면서 뭔가 많이 바뀐듯?) 가장 비슷한 server-side 언어가 node.js 일듯? Vert.x 자체가 node.js 로부터 영향을 받은 프로젝트이기 때문에 node.js 의 많은 장점들을 가져와서 구현했을듯. JVM (Java Vertual Machine) 에서 돌아가기 때문에 "Java, JavaScript, Python, Groovy, Scala" 등 node.js 보다 다양한 언어가 지원된다고. 이런걸 polyglot (여러 언어를 말하는) 특성이라고 하는듯. 그래도 기본적으로 Java 로 돌아가는 놈이라 다른언어로 작성했을때도 vertx 의 모든 기능 및 장점을 사용할 수 있을지는 잘 모르겠음. ..

HTML docuK format ver. 2.1 short copiable version (2014-06-25) 개인적으로 만들고 있는 LaTeX 비슷한 형태의 HTML document format + JavaScript. 이름은 그냥 docuK로 'document designed by kipid'란 뜻. When you write the HTML document including docuK document also, using good editors such as Sublime Text editor with Emmet (ex-Zen Coding) package installed is highly recommended. Try useful shortkeys 'Ctrl+D' (Multiple Selecti..

# robots.txt 랑 sitemap.xml 설정하기 검색 엔진에게 사이트 어떻게 검색에 잡히게 하고 싶은지 통보해주는 robotx.txt 랑 sitemap.xml 설정하기. ## PH 2023-03-09 : First posting. ## TOC ## robots.txt ``` User-agent: * Allow: / ```/ ## sitemap.xml ```[.linenums.lang-html] This XML file does not appear to have any style information associated with it. The document tree is shown below. https://kipid.tistory.com 2023-03-09T09:01:46+09:00 1.0 h..

# Change browser URL or URI (window.location, Unique Resource Identifier) without reloading or redirecting a page 페이지를 일부만 바꾸고 싶을때, 혹은 JavaScript 변수들/데이터들을 유지하고 싶을때, 주로 AJAX request 를 이용한다. 그런데 사용자에게 일부가 바뀐 이 페이지의 주소는 이것이다라고 알려주고 다른 사람들과 공유하기 편하게 하려면, 바뀐 페이지에 바로 접속할 수 있는 주소로 URL (window.location) 이 바뀌어주는 것이 좋아보인다. 물론 이 주소로 접속을 하면 서버에서는 그 바뀐 페이지를 다시 보여주도록 디자인되어야 할테고. 인스타그램, 페이스북, GitHub 등의 사이트들에서..