재미있는 프런트 엔드
다른 기사를 검색하는 동안 때때로 나는 '미친'이라고 부르는 기사를 만납니다. 개발자가 재미있기 때문에 무언가를 시도하는 곳. 개발 프리뷰 플래그 뒤에 있는 기술, 브라우저에 특정한 것, 다른 접근 방식으로 쉽게 달성할 수 있는 것, 사람들이 할 수 있기 때문에 하는 것.
그리고 여기에 여러분을 위해 몇 가지 요령을 모았습니다. 접근 방식 중 일부는 실제로 특정 요청에 매우 유용하고 일부는 그냥 속이고 있습니다. 그러나 그것들은 모두 정말 간단하고 멋지고 재미있습니다(따라서 저에게는 다소 인상적입니다). 당신이 그들을 좋아하길 바랍니다.
자바스크립트와 이모티콘이 포함된 애니메이션 URL
https://matthewrayfield.com/articles/animating-urls-with-javascript-and-emojis/
자바스크립트를 사용하면 페이지 URL을 변경할 수 있으며 # 이후 부분은 리디렉션 없이 실제로 변경할 수 있습니다. 따라서 거기에 ASCII 기호나 이모티콘을 배치하면 재미있는 애니메이션을 그릴 수 있습니다. 가정 프로젝트에 매우 적합하지만 더 심각한 프로젝트에서도 상상할 수 있습니다.
CSS로 이모티콘 텍스트 효과 분할
이것은 재미있다. 오버플로: 숨김, 일부 클립 경로 및 이모티콘을 자르고, 입자를 결합하고, 미친 조합을 만들 수 있습니다. 순수한 기쁨.
불행하게도 이모티콘은 플랫폼마다 다르지만 Windows와 비교할 때 그 결과는 나쁘지 않습니다.
256바이트의 말하는 파비콘
이미 들으셨겠지만 이제 거의 모든 브라우저가 SVG 파비콘을 지원합니다. 뛰어난 개발자인 Lea Verou는 이모티콘에서 파비콘을 만드는 정말 쉬운 방법을 보여주었습니다(특별한 이모티콘을 만들기에 너무 게으른 경우).
이 기술에 대한 두 번째 재미있는 사실은 별도의 파일이 필요하지 않다는 것입니다.
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>💩</text></svg>">
그리고 짧은 자바스크립트로 파비콘에 애니메이션 이모티콘이 생깁니다 😎
<body onload="setInterval(_=>i.href=`data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><text y='14'>${[...'😮😀😁😐😑😬'][++x%6]}</text></svg>`,x=9)">
보너스
이 귀여운 애니메이션은 나에게 아주 오래된 것을 생각나게 했습니다. 아주 오래되고 쓸모없지만 너무 멋져요. 이 라이브러리( http://lab.ejci.net/favico.js/) 파비콘 내에서 비디오를 재생할 수 있습니다(예, Doom까지 한 단계) o_O. 얼마나 미친 짓인가요?
CSS의 JS
우리는 이미 CSS에 JS를 사용한 적이 있지만(IE의 필터 기능을 기억하십니까?) 여기서는 다른 것에 대해 이야기하고 있습니다. 아이디어는 간단합니다. JS 문자열을 CSS 기본 변수에 저장하면 실행할 수 있으므로 현재 어떤 파일에 있는지 이해할 수 있습니다. 예를 들어 저장된 정보를 사용하여 CSS와 다시 상호 작용할 수 있도록 로컬 저장소에 무언가를 저장할 수 있습니다. 또는 다른 미친 :)
https://juwain.dev/posts/js-in-css-2/
크레딧: juwain.dev
HTML 없이 CSS 사용
가장 미친 기술. 우리 직업에서 확실히 중요한 기술인 브라우저 작동 원리를 아는 것이 더 중요하다고 생각합니다. 그러나 또한 순수하고 생산 재미를 위해 준비되지 않았습니다. 🙂
https://css-tricks.com/using-css-without-html/
분명히 일부 브라우저는 실제 CSS 파일 없이 CSS 코드를 전달할 수 있는 특수 HTTP 헤더 링크를 이해합니다. 그리고 CSS는 의사 요소의 의미 있는 텍스트 콘텐츠를 포함하여 이미 모든 것을 포함할 수 있습니다.
크레딧: csstricks.com
그리고 여기 HTML 한 줄 없이 CSS에서 무엇을 할 수 있는지에 대한 좋은 예가 있습니다. 모든 것이 쉽습니다. 많은 것을 CSS 표기법에 직접 넣을 수 있다는 사실을 계속 잊고 있습니다.
유사한 재미있는 예를 알고 있다면 공유하십시오. 결국 우리는 금요일이 필요합니다 ;)
Reference
이 문제에 관하여(재미있는 프런트 엔드), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/frontendj/fun-front-end-kl5텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
