200819 블로그 제작일지

200819 블로그 제작일지

Masonry 라이브러리 제거 유일하게 남아있던 라이브러리를 제거했습니다.약 1년쯤 전에 제거를 시도해봤다가 지레 겁먹고 한발 물러났는데, 이젠 Infinite Scroll도 없어졌겠다, 두려울 게 없어 도전해봤는데 성공적이었네요. 사용한 코드는 Codepen에 정리해뒀습니다.보통 Masonry는 Infinite Scroll처럼 아이템 추가 / 제거가 잦은 상황에 많이 사용될 텐데, 그건 전혀 대비하지 않았습니다.또한, Masonry 레이아웃은 두 번째 줄부턴 들어갈 수 있는 가장 높은 위치를

Project SPA

Project SPA

티스토리에서 워드프레스로 넘어올 때도 이렇게 힘들진 않았던 것 같은데, 이번 대규모 업데이트는 정말 진이 다 빠지네요. 이번 대규모 삽질의 핵심입니다.이제 새 탭에서 열리는 링크가 아니면 DOM 내용만 업데이트됩니다. 되게 힘들었는데 한 줄로 정리되니까 슬프네요. SPA 깃허브, 유튜브 등의 웹사이트나 Ghost.js, Gatsby.js 등으로 만든 웹사이트를 보며 동경하던 게 개발자 도구에서 네트워크 탭 켜두면 저렇게 차곡차곡 내용이

200805 블로그 제작일지

200805 블로그 제작일지

요즘 워드 프레스 정도 기능이 있는 블로그를 제작하는 게 굉장히 어렵다는 걸 새삼 느끼는 중입니다.Ghost, GatsbyJS, Jekyll 처럼 댓글 기능도 없고 그냥 정적 페이지만 만드는 거면 내일 당장에라도 하겠는데, 원하는 기능이 너무 많다 보니 영 쉽지 않네요. 물론 그렇다고 포기할 생각은 딱히 없고, 내년 연말까지 기간을 두고 넉넉하게 제작해보려 합니다.일단 작동하게 만들고 천천히 업데이트를 해나가면

200728 About IU 제작일지

200728 About IU 제작일지

이 정도면 완성했다 싶어 배포를 시작했는데, 항상 배포를 시작하고 보면 고쳐야 할 게 눈에 보입니다.이래서 다들 알파 테스트, 베타 테스트 거치고 출시하나 봅니다. 홈 페이지 인스타그램 피드를 외부 페이지로 옮기니 홈 페이지는 정말 아무것도 볼 게 없는 페이지가 되어버렸습니다.조금이라도 단조로움을 깨보려고 뮤직비디오가 무작위로 재생되게 했습니다.우측 하단에 음소거 토글 버튼도 추가했습니다.또, 흰 글자가 잘 안 보일

200724 About IU 제작일지

200724 About IU 제작일지

캐시 버그 수정 페이지와 직접적인 연관은 없습니다만, html, css, js 등 모든 파일을 캐싱 처리해둬서 최신 버전의 페이지를 보실 수 없을 수도 있습니다.새로 고침 후에도 새롭게 제작된 항목이 보이지 않으신다면 캐시를 비우고 재접속해주세요.이렇게 초보적인 실수를 또 하다니…죄송합니다. 😥 한 번만 비우시면 다음부턴 업데이트가 진행돼도 캐시를 비우실 필요는 없습니다. 유튜브 페이지 생성 최근 유튜브에 올라온 동영상을

200719 블로그 제작일지 및 앞으로 나아갈 방향

200719 블로그 제작일지 및 앞으로 나아갈 방향

움짤 첨부 시 mp4로 변환 ffmpeg를 활용해 gif 이미지를 올리시면 mp4로 전환되게 해뒀습니다.예전부터 gif는 낡고 비효율적인 파일이라고 주장해왔는데, 정작 제 웹사이트에선 gif 파일을 첨부하면 gif 그대로 사용하던 아이러니한 일이 이젠 벌어지지 않습니다. ffmpeg를 처음 활용해봐서 처음엔 모바일에서 비디오가 재생 안 되는 문제가 있었습니다만, 이젠 Chrome(android + macOS + windows), Firefox(windows), Safari(iOS, macOS), Internet Explorer 등의

[워드프레스] 한글이 없는 댓글 자동으로 삭제하기

[워드프레스] 한글이 없는 댓글 자동으로 삭제하기

워드프레스 블로그를 운영하다 보면 하루에 10개가 넘게도 쌓이는 스팸 댓글 때문에 골머리를 앓는 게 한두 번이 아닙니다.블랙리스트를 사용해 특정 단어들만 차단해둬도 9할은 차단하긴 합니다만, 가끔 괴상한 내용으로 블랙리스트를 피하는 댓글이 있습니다. Akismet 등의 스팸 차단 플러그인도 괜찮은 선택지일 수 있겠지만, 한글로 블로그를 운영하면 굳이 무거운 플러그인 붙여다 스팸을 차단할 필요가 있나 싶습니다.글 작성자도 한글을 쓰니,

200706 블로그 제작일지

200706 블로그 제작일지

접근성 모든 사용자는 어떤 환경에서 접속하건 같은 정보에 접근할 수 있어야 한다는 게 지금까지 열심히 지키려 노력하는 저만의 기준입니다. (에버그린 브라우저를 기준으로 하는 경우가 많음)하지만 최근 모두가 화면을 볼 수 있는 게 아니란 중요한 사실을 깨달았습니다.아무리 최신 브라우저를 사용하더라도 앞을 볼 수 없으면 많은 버튼 및 링크가 아이콘으로 표현된 제 블로그에선 접근할 수 없는 정보가

[티스토리] 댓글에 링크 및 이미지 추가하기

[티스토리] 댓글에 링크 및 이미지 추가하기

업데이트 2020.07.03 - innerHTML을 사용하지 않고 댓글 내용을 업데이트합니다. 단순히 텍스트밖에 적을 수 없는 티스토리 댓글에 링크, 이미지, 비디오, 유튜브 등을 추가해 화려하게 꾸미는 스크립트입니다. HTML 수정 <s_rp_container> 바로 아래에 있는 요소에 id가 없다면 하나 추가해주세요.방명록에도 사용하시려면 <s_guest_container> 아래에 있는 요소에 같은 id를 추가하시면 됩니다. [##_rp_rep_desc_##]을 감싼 요소에 class가 없다면 하나 추가해주세요. 댓글용과 답글용 2개가