* 20200301 추가 : 2021.03.03으로 날짜가 변경되었습니다. 다음 주 토요일(2021.03.06)에 부산에서 서울로 이사 가게 되어 홈 서버도 이르면 다음 주 금요일이나 토요일부터 약 1 ~ 2일간 꺼질 예정입니다.상태 확인을 위한 사이트도 만들어뒀고, 이사가 끝나면 글 써서 푸시 알림도 갈 예정이니 DNS 캐시 때문에 예전 IP로 계속 접속하는 참사를 막기 위해선 그냥 금요일 저녁 즈음부턴 접속을...
Medium이나 Google Photos처럼 이미지를 부드럽게 확대할 수 있게 하는 가벼운 자바스크립트 라이브러리입니다.
Github라이브 데모 일전에 블로그에 업데이트하고 굉장히 만족도가 높았던 이미지 줌 효과를 난생처음 npm 패키지로 만들어보고 있습니다.그간 만든 것은 대부분 코드를 복사 붙여 넣기 해야 쓸 수 있었는데, 이젠 cdn 링크를 script로 추가하는 건 물론이고, npm i smooth-zoom으로 설치까지 할 수 있습니다. webpack으로 빌드해보려다 계속 실패해서 일단 수동으로 작업해서 올려뒀는데, Rollup으로 갈아타거나 간단한 스크립트를 만들거나 해서...
이미지 줌 효과 배경색 변경 기존엔 배경에 블로그의 배경 색이 깔렸는데, 이젠 이미지에 사용된 색의 평균값이 들어갑니다.HTML5 Canvas를 활용해 이미지를 분석해서, 구글 포토에 올린 이미지들은 여전히 블로그의 배경색이 깔립니다. 이 Stackoverflow 글을 참고하시면 이미지를 분석하는 다양한 방법을 참고하실 수 있습니다. 모바일에선 줌 효과를 볼 수 없어 아쉬웠는데, 이젠 모바일에서도 눈에 띄는 효과가 생겼습니다. 하나 단점은,...
자바스크립트 라이브러리가 별로인 이유 이미 하이라이팅이 끝난 html을 사용하기에 클라이언트가 할 일이 줄어든단 점, .cshtml등의 파일은 지원하지 않는 라이브러리가 많단 점을 제외하고 단순히 하이라이팅된 결과물만 봐도 보통 VSC가 압도적으로 우세합니다.훨씬 정교한 하이라이팅에 다양한 테마까지 지원되니 한 번 써보시면 도대체 라이브러리가 왜 필요한가 싶으실 겁니다. 일렉트론을 기반으로 구동되기에, html 에디터만 있으면 하이라이팅 된 html을 복사할 수...
블로그 자동 재구독 2020년 결산에서 언급했던 문젠데, 저 글에 적었던 대로 2021년의 저는 해결 방법을 알아냈습니다. 푸시 알림 구독 기간이 만료되어 생기는 문제였는데, pushsubscriptionchange 이벤트의 리스너를 추가하면 해결할 수 있는 문제였습니다.짧게 첨언하면, pushsubscriptionchange 이벤트는 기간 만료 등 애플리케이션 제어 밖에서 푸시 알림 구독에 변화가 생겼을 때 발생합니다. 이제 매번 기간 만료될 때마다 다시 구독 버튼을...
평소 즐기는 게임인 스도쿠를 푸는 앱을 만들어봤습니다.
210118 다시 내린 눈
나만의 캐시 서버를 구축해 이미지, 비디오 등을 캐싱하고, 이미지를 WebP 파일로 변환하기
