슬라이더 글 요약이 다시 나오도록 해두고, 제목과 요약을 좌측정렬한 후 배경에 사다리꼴을 하나 추가했습니다.모바일에선 사다리꼴이 아닌 직사각형으로 보입니다. 조잡하단 평이 있어 사다리꼴은 빼야 하나 생각 중입니다. 😥 Lazy Load 1. 헤더 카테고리에 Lazy Load 적용 헤더 카테고리에 마우스를 올리면 바로 보이는 첫 번째 페이지의 이미지들을 제외한 모든 이미지는 헤더 카테고리에 마우스를 올리면 로딩을 시작합니다. 2.
Ayana, FredBoat 등의 디스코드 봇을 직접 제작하는 방법입니다.Node.js 외에도 파이썬, 자바 ,Go 등 다양한 언어로 제작할 수 있습니다만, 이 글에선 Node.js로 봇을 만드는 법을 다룹니다. 디스코드 봇을 만들기 위해선 서버를 돌릴 수 있는 기기 혹은 서비스가 필요합니다. 시작하시기 전에 유념해주세요.개인 PC로도 충분히 되긴 하지만, 24시간으로 돌릴 서비스에 windows 10을 이용하는 건 추천하지 않으며, 개인 PC를
![[CSS, JS] 잉크 퍼지는 효과](https://cdn-t.marshallku.com/images/images/2020/02/ink-transition-effect.w500.jpg.webp)
JavaScript와 CSS로 잉크가 퍼지는 효과를 만들어보았습니다.
글을 시작하기 전에 TTFB(Time To First Byte)에 대해 짧게 설명하자면, 서버에 HTTP 요청을 보내고 브라우저가 첫 정보를 수신하기까지 걸리는 시간을 의미합니다. 위 그림에 표시된 것처럼클라이언트가 요청을 보내는 데 걸린 시간 + 서버가 그 요청을 처리한 시간 + 서버가 응답한 시간이 셋을 합한 시간이 TTFB입니다. 지금까지 저 세 단계 중 "처리 시간"을 좀먹던 녀석입니다.어느 부분이 시간을
홈 화면 슬라이더 디자인 쓸데없이 뭐가 많은 느낌이라 글 요약이랑 더 보기 버튼을 삭제했는데, 뭘 너무 많이 걷어냈나 싶네요. 조만간 디자인을 대폭 손보지 않을까 싶습니다. SVG 로고 제작 PNG로 만든 로고를 SVG로 리마스터했습니다.SVG 애니메이션도 쓸 수 있고, 화질에 더는 구애받지 않고 사용할 수 있습니다! 악성 봇 차단 IP나 Referrer 등을 확인해 악성 봇을 차단하기 시작했습니다.Apache
티스토리에서 새 글을 발행할 때마다 웹 푸시 알림을 보내는 방법입니다.브라우저에서 알림을 보내니, 구독자가 굳이 피드에 접속하지 않아도 새 글 발행 여부를 파악할 수 있게 됩니다! 티스토리에는 루트에 파일을 올릴 권한이 없어, One Signal과 Zapier 두 개를 조합해서 사용해야 합니다.초기 설정은 다소 번거로워도 한 번 설정해두면 알림이 계속 가니 처음 한 번만 좀 고생하시면 됩니다. One
페이지 전환 효과 저번 포스트에 작성했던 페이지 전환 효과입니다. 페이지를 불러오면 페이드 인 효과가 나타나는데, 다른 페이지로 넘어갈 땐 그냥 바로 텅 빈 화면으로 가버리는 게 안타까워서 작업해봤습니다. 코드 블럭 맥 OS의 디자인으로 꾸며봤습니다.
페이지 전환 효과(Page Transition Effect)는 Node.js로 백엔드를 수정하거나, React, Vue 등으로 만든 사이트에서 훨씬 쉽고 화려하게 만들 수 있지만, 이미 만든 사이트에 페이지 전환 효과 넣자고 사이트를 갈아엎긴 아무래도 힘듭니다.그래서 간단하게 페이지에 별다른 수정을 거치지 않고 페이드 등의 간단한 효과를 사용하는 방법을 공유해볼까 합니다. Javascript function isSameAsLocation(uriString) {     const uri = new URL(uriString);
스크린샷에 담기 힘든 효과가 많은 날이네요. 홈 화면 슬라이더 업데이트 창 크기를 변경하면 슬라이더의 위치도 변경되도록 업데이트했습니다. 창 크기가 1920px인 기기에서 접속했다 치면, 예전엔 창 크기를 800px로 줄여도 한 페이지의 크기가 1920px이라 생각하고 1920px씩 페이지를 넘겼다면, 이젠 800px씩 넘깁니다.