본문 바로가기

전체 글380

사용자 지정 속성이 있는 CSS 페인트 API의 선호 색상 스키마 One of the coolest things I’ve been messing with in the last couple years is the CSS Paint API. I love it. I did a talk on it, and made a little gallery of my own paint worklets. The other cool thing is the `prefers-color-scheme` media query and how you can use it to adapt to a user’s preference for light or dark modes. 최근에, 저는 페인트 작업대의 외관을 사용자가 선호하는 색상표에 맞게 조정할 수 있도록 이 두 가지 멋진 것들을 CSS 맞춤 특성과 결합.. 2021. 12. 29.
2021년 가장 좋아하는 Chrome 확장 기능 나는 사렘 기조가 2021년 즐겨찾기로 나열한 대부분의 크롬 확장에 대해 들어본 적이 없다. 여기에 나와 별로 관련이 없는 가상 학습만 제외하고 모든 것을 다루는 나의 뜨거운 관심사가 있습니다. 어렴풋이 보이다 화면과 카메라를 녹화하는 깔끔한 방법이네요 누군가를 위해 개인적인 방법을 찾아보는 것을 장려하는 거죠 사실 게스트 작가가 아이디어를 내기 위해 이것을 사용했는데, 둘 다 좋은 방향으로 상상을 초월했고, 그렇게 하기에는 너무 어려워 보이지 않았다. 저는 그것이 브라우저 앱이라는 점이 마음에 드는데, 이것은 크롬북 같은 것이 그것이 네이티브 앱처럼 느껴지더라도 그것을 사용할 수 있다는 것을 의미합니다. 모테 Loom과 정신은 비슷합니다. 피드백을 손으로 작성하는 대신 목소리로 남겨주세요. 이것은 분명.. 2021. 12. 29.
사이트에 서비스 직원 추가 2022년에 당신이 당신의 웹사이트를 위해 할 수 있는 가장 좋은 일 중 하나는 서비스 직원을 추가하는 것이다, 만약 당신이 이미 자리를 잡고 있지 않다면. 서비스 직원들은 당신의 웹사이트에 초능력을 줍니다. 오늘, 저는 그들이 할 수 있는 놀라운 일들 중 몇 가지를 보여드리고, 여러분의 사이트에서 바로 사용할 수 있는 번호별 페인트 보일러를 드리고 싶습니다. 서비스 노동자는 무엇인가? 요컨대, 서비스 직원은 보다 빠르고 탄력적인 웹 환경을 구축할 수 있도록 지원합니다. 일반적인 자바스크립트 파일과 달리 서비스 작업자들은 DOM에 접근할 수 없다. 또한 자체 스레드에서 실행되므로 다른 JavaScript의 실행을 차단하지 마십시오. 서비스 근로자들은 완전히 비동기적이 되도록 설계되었다. 보안 사이트 또는.. 2021. 12. 29.
웹 피드 작업: RSS 그 이상 웹 주변에서 RSS in dead라는 속삭임을 들어본 적이 있겠지만, 사실은 사실상 모든 팟캐스트가 RSS를 사용하고 있기 때문에 여전히 널리 사용되고 있다. 아마도 당신은 RSS 팬이었기 때문에 RSS와 다시 친해져야 할 것 같습니다. 아니면 넌 여기 CSS-Tricks의 Chris처럼 RSS를 여전히 사랑할지도 몰라. 어떤 경우에도 RSS는 다른 기술과 마찬가지로 웹 기술이며 피드를 만들고 관리하는 방법에 대한 모범 사례가 있습니다. 그것이 바로 내가 이 기사에서 너에게 설명하려고 하는 것이다. 다양한 피드 종류, 구현 방법 및 피드 콘텐츠를 최대한 활용하기 위해 사용할 수 있는 전략에 대해 살펴보겠습니다. RSS 대 아톰 대 JSON 믿거나 말거나, RSS는 다른 유형의 신디케이트 웹 피드 중 하나.. 2021. 12. 29.
HTML 검사기 API 세시나이저 API 진행에 대한 만세 삼창! 사용자 입력을 신뢰할 수 없다는 것은 복음입니다. 실제로 제가 작업한 앱은 나쁜 배우들이 몰래 들어가서 악성 코드를 실행하려고 하는 것을 다루었습니다. 웹 개발자는 페이지(또는 저장 또는 서버측)에서 사용자 입력을 다시 사용하기 전에 사용자 입력을 정리합니다. 이 작업은 일반적으로 도움을 주기 위해 풀다운된 자체 코드 또는 라이브러리로 수행됩니다. 버그나 나쁜 행위자들이 우리의 코드가 하는 일을 우회하는 방법을 찾을 위험이 있는 HTML 같은 것을 제거하기 위해 RegEx를 작성할 수도 있다. 사용자-랜드 라이브러리나 우리가 직접 춤을 추는 대신 브라우저가 이를 수행하게 할 수 있다: // some function that turns a string into r.. 2021. 12. 29.
일관되고 유연한 스케일링 유형 및 간격 크리스가 처음 이 메시지를 보냈을 때, 저는 점진적인 향상에 대해 글을 쓸까 생각했지만, 그 주제는 너무 광범위해서 한 가지이기에는 너무 예측가능합니다. 특히 제 글에 이미 익숙한 사람들에게는 더욱 그렇습니다. 그렇긴 하지만 이 글에서 개략적으로 설명하려는 것도 한 가지가 아니라, 필자가 글쓰기 프롬프트를 정확히 만나는 날이 돼지가 날기 시작하는 날이 될 것이다. 하지만 이 한 그룹은 당신이 CSS를 작성하는 방법을 바꿀 것이다. 저는 개인적으로 이러한 여러 가지 요소들이 특히 반응성이 뛰어난 디자인 측면에서 많은 사이트들을 실망시킨다고 생각합니다. 이 그룹에 속한 것들은 타이포그래피와 띄어쓰기입니다. 특히 수직으로 간격이 일정하지 않아 콘텐츠를 검색하기 어렵고 미묘한 연결 끊김 현상이 나타나는 경우가 .. 2021. 12. 29.
어쩌면 아무것도 아닐지도 모른다 우리의 사이트를 더 좋게 만들기 위해 우리가 할 수 있는 한 가지는 무엇인가요? 어쩌면 아무것도 아닐지도 몰라! 우리의 웹사이트는 점점 더 커지고 있습니다! 이렇게 흥미로운 아이디어와 흥미로운 기술을 가진 팀이 있으면 쉽게 휩쓸릴 수 있고 그 모든 아이디어의 우선순위를 매기기도 쉽지 않다. 그러나, 하루에 단지 많은 시간, 오직 많은 자원, 그리고 우리의 방문자들이 그들의 집중력을 잃지 않고 인터페이스 안에서 원하는 것 만이 있습니다. 어떻게 균형을 잡죠? 우선 순위 지정 도구가 많이 있습니다. 최근에 내가 가장 좋아하는 것은 당신의 사이트에 새로운 것을 추가하기로 결정할 때 당신 자신(및/또는 당신 팀)에게 묻는 것이다. 지금 당장 하지 않으면 어떻게 되나요? 새로운 것을 사이트에 추가할 때, 우리는 .. 2021. 12. 29.
기계 학습에 대한 시각적 소개 스테파니 이와 토니 추의 첫 번째 문장은 확실합니다: 기계 학습에서 컴퓨터는 통계 학습 기술을 적용하여 데이터의 패턴을 자동으로 식별합니다. 이러한 기법은 매우 정확한 예측을 하는 데 사용될 수 있다. 그 다음에 나오는 것은 개념을 설명하는데 놀라운 역할을 하는 두 칸의 "스크롤텔링" 웹사이트 중 하나입니다. 어떻게 분류가 의사 결정 트리로 구성되는지는 매우 말이 된다. 그리고 새로운 데이터를 어떻게 던지느냐가 문제인데, 과적합이라는 개념 때문에 신뢰성이 떨어집니다. 이 개념 때문에 다음에 다루게 될 것처럼 들립니다. 정확도도 중요하지만 오류를 고칠 수 있는 장치가 있다는 의미인 모델을 바로잡는 데에도 들어갈 것이라 확신합니다. 저는 항상 수학 파괴의 무기들을 생각합니다. 그 알고리즘에 대해 수정 모델이.. 2021. 12. 29.
Next.js 및 Netlify를 사용하여 연락처 양식을 작성하는 방법 Next.js 및 Netlify와 함께 확인 화면을 표시하고 향상된 스팸 탐지 기능을 갖춘 연락처 양식을 만들 예정입니다. Next.js는 확장 가능한 고성능 리액트 애플리케이션을 개발하기 위한 강력한 리액트 프레임워크입니다. Next.js 사이트를 Netlify의 기술과 통합함으로써 서버 쪽 코드를 작성할 필요 없이 작업 중인 연락처 양식을 빠르게 만들어 실행할 수 있습니다. Netlify에서 처리할 양식을 설정하는 것은 비교적 빠른 프로세스일 뿐만 아니라, Netlify에서 호스팅되는 사이트당 최대 100개의 무료 제출/개까지 자유롭게 시작할 수 있습니다. 양식 제출은 Akismet을 사용하는 Netlify의 내장된 스팸 필터를 통해 자동으로 처리되며 스팸 탐지 수준을 높이도록 구성할 수 있는 옵션도.. 2021. 10. 25.
CSS-in-React 풍경 목록을 살펴보기 전에 몇 가지 주의할 점이 있습니다. 전 이 도서관들에 대해 깊이 알지 못합니다. 그 중 몇 개는 실제 프로젝트에 사용했는데, 특히 CSS 모듈이 가장 많았습니다. 나는 각각의 뉘앙스를 잘 표현하지 못한다. 아래 데모는 기본 스티넌택스의 기본 데모입니다. 제가 잘못 알고 있거나 더 자세한 내용을 추가하고 싶으시면 댓글이나 연락처로 보내주시면 개선해드리겠습니다. 이것의 요점은, 부분적으로, 쉬운 참조를 위해 각각의 작업 코드 예제를 갖는 것이다. 스타일리쉬한 재료. 매우 인기가 많음 - 아마도 가장 많이 사용되는 옵션입니다. 역동적인 스타일링의 가능성과 변형에 소품을 사용하는 마법을 대중화했습니다. 템플릿 리터럴 구문은 CSS와 같은 느낌을 준다. 이러한 방식으로 사용하는 것이 권장되지만,.. 2021. 10. 25.
Visual Studio Code를 브라우저 내 개발자 도구 편집기로 사용할 수 있다면 어떨까요? 프런트 엔드 워크플로우가 다음과 같은 작업을 수행하는 것은 드문 일이 아닙니다. 일을 하다. 자동으로 새로 고친 브라우저에서 보세요. 뭐가 잘못됐나 봐 DevTools에서 검사하고 수정합니다. 내 코드 편집기에서 올바른 코드를 적용합니다. 브라우저에서 올바른 코드가 자동으로 새로 고쳐지는지 확인합니다. 알아요, 항상 좋은 건 아니에요. 하지만 내 주머니에 있는 보풀도 비슷할 거야 적어도 가끔씩은 말이야 그래서 Chris Heilman의 게시물 제목에 끌렸습니다: "만약 당신이 Visual Studio Code를 브라우저 개발자 도구의 편집자로 사용할 수 있다면?" 이 아이디어는 VS Code를 DevTools의 편집기로 사용할 수 있으며 Microsoft Edge와 함께 실험적인 기능으로 활성화함으로써 .. 2021. 10. 25.
CSS 페인트 API 탐색: 원형 모양 복잡한 모양에 테두리를 추가하는 것은 골치 아픈 일이지만, 복잡한 모양의 모서리를 돌아다니는 것은 악몽입니다! 다행히 CSS 페인트 API가 구하러 왔습니다! 이 "CSS 페인트 API 탐구" 시리즈의 일부로 살펴볼 것입니다. 우리가 목표로 하는 것은 이렇다. 이 시리즈에서 살펴본 다른 모든 것과 마찬가지로 현재는 Chrome과 Edge만 이 기능을 지원합니다. 나머지 기사를 따라 했다면 패턴이 형성되는 것을 알아차렸을지도 모릅니다. 일반적으로 CSS 그림판 API로 작업할 경우: 우리는 우리가 쉽게 조정할 수 있는 몇 가지 기본적인 CSS를 작성합니다. 모든 복잡한 논리는 그림() 함수 안에서 장면 뒤에서 이루어집니다. 실제로 페인트 API 없이도 이 작업을 수행할 수 있습니다. 복잡한 모양에 둥근 모.. 2021. 10. 25.
포함할 수 있음(다른 특정 HTML 요소 내의 특정 HTML 요소) 특정 HTML 요소를 다른 유형의 HTML 요소 안에 넣는 것이 유효한지 테스트하기 위해 Alexander Vishnyakov의 단일 서비스 웹 사이트입니다. 잠깐 참고해보니 좋네 Some combinations feel fairly obvious: can you put a `` inside an `? Uh, no. Some are trickier: can you put a `` inside an ``? Nope — that one bit me this week (derp). Some are a little confusing, like `` is an invalid child of an `` but a valid child of a ``. 직접 링크 2021. 10. 25.
CSS 그리드 내의 확장 가능한 섹션 난 CSS 그리드가 좋아. 저는 몇 줄의 코드만으로도 미디어 질의 없이 완벽하게 반응하는 그리드 레이아웃을 만들 수 있는 방법이 마음에 듭니다. HTML 마크업을 깔끔하고 단순하게 유지하면서 흥미로운 레이아웃을 만들기 위해 CSS 그리드와 논쟁하는 것이 편합니다. 하지만 최근에, 저는 풀어야 할 독특한 UI 난제를 받았습니다. 기본적으로, 주어진 그리드 셀에는 그리드의 일부인 다른 더 큰 영역을 열 수 있는 버튼이 있을 수 있습니다. 그러나 이 보다 큰 그리드 셀은 다음과 같아야 했습니다. 그것을 열었던 세포 바로 아래에, 그리고 전폭의 CSS 그리드의 정신에 따라 좋은 해결책이 있다는 것이 밝혀졌습니다. 단지 몇줄의 코드만 사용했을 뿐이죠. 이 기사에서는 이 문제를 해결하기 위해 세 개의 한 줄 CSS.. 2021. 10. 19.
Cumul.io 통합을 통해 단순해진 임베디드 분석 트위터, LinkedIn, Reddit, Discord에서 SaaS 커뮤니티를 검색하면 많은 커뮤니티에서 공통 테마가 나타나는 것을 볼 수 있습니다. 이 테마는 BI, 분석, 통찰력 등 여러 이름으로 통할 수 있습니다. 우리가 사업을 하고, 데이터를 수집하고, 성공하든 실패하든 그것은 당연합니다. 우리는 이 모든 것을 조사하고, 우리가 가지고 있는 데이터를 어느 정도 이해하고, 조치를 취하기를 원합니다. 이러한 요구로 인해 데이터를 좀 더 쉽게 조사하고자 하는 모든 사용자의 삶을 보다 쉽게 만들어 주는 많은 프로젝트와 도구가 생성되었습니다. 하지만, 인간이 그랬을 때, 인간은 더 많은 것을 원한다. BI 및 분석의 세계에서는 임베딩, 브랜딩, 맞춤형 스타일링 및 액세스 등의 형태로 "더 많은"가 종종 발.. 2021. 10. 16.

티스토리툴바