본문 바로가기

분류 전체보기380

다른 사용자 지정 속성 사용 정도 사용자 지정 속성을 사용하는 한 가지 방법은 이러한 속성을 설계 토큰으로 간주하는 것입니다. 색상, 공백, 글꼴 등입니다. 페이지 루트에 설정하고 CSS 전체에서 사용합니다. 매우 유용하며, 사용자 지정 속성뿐만 아니라 지난 백만 년 동안의 전처리기 변수에 대한 고전적인 사용 사례입니다. 디자인 토큰 접근 방식 외에도 사용자 지정 속성을 사용하는 또 다른 방법은 훨씬 더 열심히 작업하여 주어진 요소에서 모든 주요 고유 스타일링 선택에 사용하는 것입니다. 다음과 같은 카드를 가지고 있다고 가정해 보십시오(물론 시연용으로 단순화되었습니다). .card { background: hsl(200deg 15% 73%); border: 4px solid rgb(255 255 255 / 0.5); padding: 2r.. 2021. 10. 15.
WooCommerce + Google Analytics Google Analytics는 강력한 분석 소프트웨어입니다. 일반적인 사용 방법은 가지고 있는 모든 페이지 템플릿에 자바스크립트 조각을 가볍게 쳐서 고유한 방문자 및 페이지뷰 등에 대한 기본 데이터를 수집하도록 하는 것입니다. 그것은 유용하지만, 그것은 또한 최소한의 것이다. 사이트에 중요한 버튼이 있다고 가정해 보십시오. 레벨업하면 사용자 지정 이벤트를 전송하여 해당 버튼을 클릭하는 사용자를 추적할 수 있습니다. 이러한 분석이 가장 중요합니다. 더 나아가 전자상거래 분석을 추적하고 있습니다. 이 방법은 Google Analytics에 판매용 이벤트, 카트에서 물건을 추가/제거하는 인스턴스, 제품에 대한 뷰 등 모든 종류의 이벤트를 보내야 하기 때문에 더욱 까다롭습니다. 이 모든 것을 제대로 수행하지 .. 2021. 10. 14.
2021년 Jamstack 개발자들이 가장 좋아하는 프레임워크 올해는 어떤 새로운 틀을 배워야 할까요? 제 CMS를 버릴 때가 됐나요? 수백만 명의 청중을 수용할 수 있도록 사이트를 확장하려면 어떤 도구를 사용해야 할까요? 2021 Jamstack 커뮤니티 설문조사는 이러한 질문에 대한 답변 등을 제공합니다. 지난 2년 동안 Netlify는 증가하는 개발자 그룹을 더 잘 이해하기 위해 Jamstack Community Survey를 실시했습니다. 이러한 통찰력은 우리 서비스에 정보를 제공하고 개발자들이 서로에게서 배우는 데도 도움이 됩니다. 우리의 설문조사 데이터는 커뮤니티에서 어떤 일이 일어나고 있는지에 대한 아이디어뿐만 아니라 모범 사례의 감각을 제공합니다. 올해는 Jamstack 커뮤니티에서 개발자로 활동하기에 가장 좋은 시기입니다! Jamstack은 주류가 .. 2021. 10. 14.
CSS, Gosh-Darned Hog Wild, I Tell Ya What 누군가 CSS가 발전하는 것을 지켜볼 때, 우리는 CSS 역사상 가장 뜨거운 혁신의 순간들 중 하나에 있는 것처럼 느껴집니다. 그리드가 얼마 지나지 않아 모든 브라우저에서 플렉스박스를 사용할 수 있게 된 것은 정말 대단한 일이었습니다. 그들은 게임을 어색한 속임수 모음처럼 느껴지던 CSS에서 좀 더 분별 있고 시대에 맞는 것으로 바꾸었다. 그 느낌은 항상 점점 더 진실해지고 있다. 마지막 짧은 시간 동안, 여기 무슨 일이 일어났는지 목록이 있습니다. 구문은 실제 배송될 때 아래에 있는 코드 조각과 다를 수 있습니다. ️ 네이티브 네스팅 컨테이너 쿼리 컨테이너 단위 계단식 층 언제 범위 지정 현재 프로덕션 웹 사이트에서 이 목록에 있는 어떤 것도 사용할 수 없습니다. 이런 종류의 것을 따르려고 오랜 세월을.. 2021. 10. 14.
분재 브라우저 프로그래머들이 명확하게 생각할 수 있도록 도와주는 연구를 위한 웹브라우저. 분재를 이용하면, 저는 지금 웹브라우저를 이용하려고 합니다. 옵션+스페이스를 누르면 브라우저가 나옵니다. 전체 화면이거나 모든 것을 뒤집는 최소한의 창입니다. 시각적으로 워크스페이스로 구성할 수 있습니다. 저는 이것이 연구에 꽤 유용하다는 것을 알 수 있습니다. 뿐만 아니라 "웹 브라우저" 인터페이스가 여러분에게 어떤 역할을 할 수 있는지에 대해 다르게 생각하도록 할 수도 있습니다. 브라우저 엔진 다양성에서 손실되는 것이 있다면, 브라우저 UI/UX 다양성이 향상될 것입니다. 다이렉트 링크 2021. 10. 14.
Google 분석 자료와 그럴듯한 수치 비교 얼마 전 이 블로그 게시물을 보았습니다. 해커 뉴스, Reddit 및 기술에 정통한 독자의 58%가 Google Analytics를 차단합니다. 그것은 나에게 매혹적인 제목이다. 저는 구글 Analytics를 처음 시작했을 때부터 이 사이트에 있었습니다. 매년 조금씩 증가하는 경향이 있지만, 광고 차단 사용량(및 일반적인 타사 스크립트 차단)도 시간이 지남에 따라 증가하고 있습니다. 그렇다면 Google Analytics에서 쉽게 볼 수 있는 것보다 더 많은 성장을 이룰 수 있을까요? Google Analytics 차단 수준은 업계, 대상자, 사용된 장치 및 개별 웹 사이트에 따라 다릅니다. 이전 연구에서, 저는 10% 미만의 방문자들이 미식가 및 라이프스타일 사이트에서 Google Analytics를 .. 2021. 10. 13.
UX 중심 기능을 갖춘 테마별 반응 데이터 그리드 KendoReact는 앱에서 즉시 사용할 수 있는 사전 빌드 구성 요소를 제공하기 때문에 많은 시간을 절약할 수 있습니다. 그것들은 좋아 보이지만, 더 중요한 것은, 쉽게 테마화 될 수 있기 때문에 여러분이 보기 위해 필요한 대로 보입니다. 그리고 외모가 중요한 부분도 아니라고 생각합니다. 비주얼에 초점을 맞춘 많은 구성 요소 라이브러리가 있습니다. 이러한 구성 요소는 UI/UX에서 가장 어려운 상호작용 문제를 해결하고 성능, 속도 및 접근성을 염두에 두고 수행합니다. 반응 데이터 그리드 구성 요소를 살펴보겠습니다. The ol’ `` element is the right tool for the job for data grids, but a table doesn’t offer most of the fea.. 2021. 10. 13.
바닐라 추출이 포함된 TypeScript의 CSS 바닐라 추출은 프레임워크에 구애받지 않는 새로운 CSS-in-TypeScript 라이브러리입니다. 가볍고 견고하며 직관적인 스타일 작성 방법입니다. 바닐라 추출은 규범적인 CSS 프레임워크가 아니라 유연한 개발자 툴링입니다. CSS 툴링은 PostCSS, Sass, CSS 모듈 및 스타일링된 컴포넌트가 2017년 이전에 출시되어 지난 몇 년간 비교적 안정적인 공간이었으며 오늘날에도 인기가 있습니다. Tailwind는 지난 몇 년 동안 CSS 툴링에서 많은 것을 변화시킨 몇 가지 도구 중 하나입니다. 바닐라 아이스크림은 상황을 다시 뒤흔드는 것을 목표로 한다. 이 제품은 올해 출시되었으며 다음과 같은 최신 트렌드를 활용할 수 있다는 장점이 있습니다. TypeScript로 전환하는 자바스크립트 개발자 CSS.. 2021. 10. 13.
유연한 구성요소 구축을 위한 개발자 결정 "프런트 엔드 개발자처럼 생각하는 방법"의 전체적인 분위기를 담은 블로그 게시물이 제가 가장 좋아하는 것입니다. Michelle Barker는 이 포스트에 그것을 못박고, 코드를 공유하지 않고 그것을 합니다! 더 이상 "최적" 콘텐츠 또는 검색 조건만을 위해 설계 및 개발할 수 없습니다. 대신 웹의 고유한 유연성과 예측 불가능성을 수용하고 탄력적인 구성요소를 구축해야 합니다. 정적 실물 모형은 모든 시나리오를 충족할 수 없기 때문에 빌드 시 많은 설계 결정이 개발자에게 전달됩니다. 좋든 싫든 UI 개발자는 디자이너입니다. 자신을 디자이너라고 생각하지 않더라도 말이죠! 프런트 엔드 개발에는 알려지지 않은 것들이 많다. 내 작은 목록보다 훨씬 길어요. 크기와 길이를 알 수 없는 내용은 확실히 그 중 하나입니.. 2021. 10. 13.
나만의 코드 규칙 작성 프로젝트에서는 코드베이스를 보호하기 위해 툴링에 투자할 가치가 있는 때가 있습니다. 언제 어떻게 분명하게 말해야 할지는 잘 모르겠지만, 프로젝트가 장기적이고 험난한 양상을 보이기 시작한 후, 그리고 상황이 완전히 엉망진창으로 느껴지기 전에 어딘가입니다. 너무 이른 최적화는 피하되 성체 후 최적화는 피하십시오. 이러한 툴링 중 일부는 구현이 매우 쉬우며, 종종 바로 앞에서 수행됩니다. 저는 코드 포맷터인 "예쁜이"가 생각나네요. 코드 포맷을 할 때 보통 코드처럼 정확합니다. 접근성 보푸라기, 호환성 보푸라기, 보안 보푸라기 등과 같이 "코딩하는 대로" 버킷에 넣을 수 있는 모든 도구가 있습니다. Webhint는 이것들을 함께 묶어서 아마도 볼 가치가 있을 것이다. 그리고 당신이 작성해야 하는 더 많은 코드.. 2021. 10. 13.
Google 분석 자료와 그럴듯한 수치 비교 얼마 전 이 블로그 게시물을 보았습니다. 해커 뉴스, Reddit 및 기술에 정통한 독자의 58%가 Google Analytics를 차단합니다. 그것은 나에게 매혹적인 제목이다. 저는 구글 Analytics를 처음 시작했을 때부터 이 사이트에 있었습니다. 매년 조금씩 증가하는 경향이 있지만, 광고 차단 사용량(및 일반적인 타사 스크립트 차단)도 시간이 지남에 따라 증가하고 있습니다. 그렇다면 Google Analytics에서 쉽게 볼 수 있는 것보다 더 많은 성장을 이룰 수 있을까요? Google Analytics 차단 수준은 업계, 대상자, 사용된 장치 및 개별 웹 사이트에 따라 다릅니다. 이전 연구에서, 저는 10% 미만의 방문자들이 미식가 및 라이프스타일 사이트에서 Google Analytics를 .. 2021. 10. 13.
지킬은 부품을 사용하지 않는다고요? Liar! 케이티 코데스의 밀어내기가 마음에 들어요. 서버측 언어가 자바스크립트만큼 "구성 요소 내장"을 제대로 해내지 못했다고 이전에 말했지만, 이것은 좋은 요점입니다. 파일의 JSX로 정의한 다음 '로 상호 참조할 수 있는 기본 HTML 조각 "구성 요소"는 파일의 Liquid로 쉽게 정의하고 지킬에서 교차 참조할 수 있는 '{% include myComponent.html key=value%)'와 마찬가지로 쉽게 정의할 수 있습니다. 파일의 JSX로 정의한 다음 상호 참조할 수 있는 기본 HTML 조각 "레이아웃"안녕하세요. 월드(/MyLayout)에서는 파일의 리퀴드를 사용하여 쉽게 정의한 다음 지킬 템플릿의 앞부분을 '레이아웃: 마이레이아웃. 로컬 변수를 사용하여 부분 작업을 수행할 수 있는 HTML 전처.. 2021. 10. 13.
개발자 경험'의 경험' 사례 Jean Yang의 훌륭한 에세이입니다. 개발자 경험이라는 것은 개발자가 도구, 엔드 투 엔드, 데이 인 및 데이 아웃과 상호 작용하는 방식을 총합한 것입니다. 물론 개발자가 툴을 사용하고 채택하는 방법에 대해 그 어느 때보다 많은 관심을 보이고 있으며, 소위 "DX"라는 주제에 대한 전체 강연과 패널이 있지만 개발자 경험의 상당 부분은 여전히 대부분 무시되고 있습니다. 개발자가 실제로 코드를 작성하는 데 걸리는 시간이 1/3도 되지 않기 때문에 개발자 경험에는 코드 유지, 테스트, 보안 문제, 사고 해결 등 기타 모든 사항이 포함됩니다. 개발자 경험의 많은 부분이 계속 무시되고 있습니다. 복잡하고 지저분하며 "실버블렛" 솔루션이 없기 때문입니다. 그녀는 DX가 일반적으로 지나치게 단순화되고 매우 다른 .. 2021. 10. 13.
풀 요청으로 협업 개선 이 기사는 "Advanced Git" 시리즈의 일부입니다. 트위터에서 저희를 팔로우하거나 뉴스레터에 등록하여 다음 기사에 대해 들어보시기 바랍니다! 이번 "Advanced Git" 시리즈 3편에서는 소규모 및 대규모 개발자 팀에 모두 도움이 되는 풀 리퀘스트에 대해 알아보겠습니다. 꺼내기 요청은 검토 및 피드백 프로세스를 개선할 뿐만 아니라 코드 변경 사항을 추적하고 논의하는 데도 도움이 됩니다. 마지막으로, 끌어오기 요청은 쓰기 권한이 없는 다른 리포지토리에 기여할 수 있는 이상적인 방법입니다. 풀 요청이란 무엇입니까? 우선, 꺼내기 요청이 핵심 Git 기능이 아니라는 것을 이해하는 것이 중요합니다. 대신 사용 중인 Git 호스팅 플랫폼에 의해 제공됩니다. GitHub, GitLab, Bitbucket.. 2021. 10. 13.
현금(타이니 jQuery 대체) 현금에 대한 README는 다음과 같이 간단합니다. 현금은 DOM을 조작하기 위한 jQuery 스타일 구문을 제공하는 최신 브라우저(IE11+)를 위한 터무니없이 작은 jQuery 대안이다. 코드베이스를 최소화하기 위해 최신 브라우저 기능을 활용하여 개발자는 파일 크기의 일부분으로 친숙한 체인 가능 방법을 사용할 수 있습니다. jQuery와 100% 기능 동등성을 목표로 하는 것은 아니지만, 대부분의 일상적인 사용 사례를 포함하므로 Cash가 유용하게 됩니다. 6KB의 분쇄 및 지핑으로 Zepto보다 더 작습니다. Zepto의 전체적인 요점은 작은 jQuery 였습니다. 하지만 몇 년 동안 이 문제는 다루어지지 않았습니다. 그래서 이것도 있습니다. IE 11 지원을 중단하면 캐시가 얼마나 줄어들지 궁금합.. 2021. 10. 13.

티스토리툴바