이벤트 아파트 2022 덴버 어제 마무리. 그리고 이번에는 XNUMX일을 모두 보낼 수는 없었지만 어제의 행동을 포착했습니다. 대단한. 나는 사교적이거나 외향적이지 않지만, 이것은 내가 적어도 XNUMX년 만에 처음으로 가본 회의였고, 사람들을 직접 만나는 것은 믿을 수 없을 정도로 상쾌했습니다.
물론 메모도 했습니다! 나는 공유가 배려이기 때문에 여기에 게시할 것이라고 생각했습니다. 적어도 XNUMX살짜리 아이가 어젯밤 디저트 한 입 달라고 했을 때 그렇게 말했어요.
스피커로 분해하겠습니다. 공정한 경고: 나는 손으로 쓴 메모와 꽤 시각적인 사람에 관한 것이므로 내 메모는 대부분의 것보다 덜... 구조화되지 않는 경향이 있습니다. 그리고 이 노트들은 저에게 눈에 띄는 것들일 뿐입니다. 발표자의 주요 아이디어는 아닐 수도 있지만 내 관심을 끌었습니다!
Chris Coyier: 이제 웹사이트가 좋습니다.
Chris는 이전에 이 연설을 했습니다(우리는 그것을 연결했다 지난 주), 하지만 이번에는 특히 컨테이너 상대 단위 와 결합할 때 clamp(), 값이 뷰포트가 아닌 컨테이너에 상대적이기 때문에 더 정확한 응답성을 제공합니다. 따라서 뷰포트 너비(vh) 유체 유형에 대한 단위?
font-size: clamp(1rem, 1rem + 2vw, 2rem);글쎄, 우리는 다음과 같은 컨테이너 상대 단위를 사용할 수 있습니다 컨테이너 쿼리 인라인 크기 (cqi) 대신, 여기서 1cqi 컨테이너 인라인 크기의 1%(여기에 대한 초안 사양이 있습니다.):
font-size: clamp(1rem, 1rem + 1cqi, 2rem);Chris는 또한 에지에서 호스팅. 그가 있기 때문에 아마 놀랄 일은 아니다. 쓴 그것에 대해 여기에서 지금 확인해 보세요. 몇 번 이상. 이미 그 기사를 읽은 사람으로서 나는 솔직히 에지 컴퓨팅의 완전한 개념을 깨닫지 못했습니다.
아이디어는 믿을 수 없을 정도로 간단합니다. 글로벌 CDN은 자산 사용자와 지리적으로 가까운 위치에서 호스팅하기 때문입니다. 이것은 래스터 이미지를 제공하기 위한 꽤 표준적인 방법입니다. 그러나 사이트를 구동하는 동일한 HTML, CSS 및 JavaScript 파일과 같은 정적 파일로 확장되었습니다. 미리 빌드하고 빠른 글로벌 CDN에서 이미 컴파일되고 최적화된 파일을 제공합니다. 이것이 전체 Jamstack 개념입니다!
그러나 여전히 서버 응답이 필요하다면 어떻게 될까요? 그것은 매우 엣지가 아닙니다. 그렇지 않나요? 이제 단일 URL에서 데이터를 미리 가져와서 CDN에서 직접 렌더링 전에 주입할 수 있는 핸들러가 있습니다. 물론 백그라운드에서 추가 작업이 진행 중입니다. 그래도 동적으로 데이터를 가져오고, 주입하고, 미리 빌드하고, 정적으로 제공할 수 있다는 사실 수요에, 사용자에게 지리적으로 더 가깝게 실행하면 이 작업이 엄청나게 빨라집니다.
Tolu Adegbite: ARIA에서 승리하고 웹 접근성에 영향을 미치는 방법
맙소사, 이것은 훌륭한 프레젠테이션이었습니다! Tolu Adegbite는 WAI-ARIA에 대해 너무 열심히 가르쳐서 그녀가 공유한 모든 보석, 즉 역할을 적는 데 어려움을 겪었습니다! 주! 라벨링! 설명! 모든 것이 매우 훌륭하게 다루어졌으며, 내가 알고 있는 내용은 몇 번이고 다시 올 것입니다.
그러나 내 관심을 끈 한 가지 특정 사항은 인라인 SVG의 접근성입니다. SVG는 다른 유형의 디자인 자산과 관련되어 있지만 하루가 끝나면 마크업이라는 사실이 그것을 차별화합니다. 항상 이미지로 식별되는 것은 아닙니다..
보조 기술은 적절한 액세스 가능한 역할과 레이블을 지정하여 인라인 SVG를 이미지로 읽을 가능성이 더 높습니다.
미리암 수잔(Miriam Suzanne): !중요도의 계단식 층
안녕하세요, 또 다른 CSS-Tricks 졸업생입니다! 미리암은 많은 시간과 노력을 들여 캐스케이드 레이어 사양. 그녀는 또한 썼다 그들에 대한 큰 ol' 가이드 여기 CSS-Tricks에서 소개하고 An Event Apart에서 이에 대해 이야기했습니다.
저를 가장 괴롭힌 것은 이것이 얼마나 큰 정신적 변화인지입니다. 개념 자체는 복잡하지 않습니다. 선언하다 @layer CSS 문서 상단에 레이어를 특정 순서대로 나열한 다음 해당 레이어에 스타일을 작성합니다. 그러나 한동안 CSS를 작성해 온 저와 같은 오래된 공룡에게는 Cascade Layers를 사용하면 간단한 클래스 선택기가 일반적으로 더 높은 특이성을 휘두르는 것을 이길 수 있다는 사실에 익숙해져야 합니다. 아이디처럼.
🤯
Miriam은 또한 Cascade Layers가 특정성에 영향을 미치는 선택기(예: :is(), :where()및 :has()).
아, 그리고 이것은 흥미로운 정보입니다. 미리암은 CSS에서 특수성의 역사를 걸으면서 다음과 같이 회상했습니다. !important 처음에는 사용자가 사용자 에이전트 및 작성자 스타일을 재정의하는 도구로 설계되었습니다. 그러나 어딘가에서 저자 스타일을 맨 위에 강제로 적용하기 위해 채택했습니다. 캐스케이드 레이어는 제거하는 데 도움이 됩니다. 변명 사용할 필요가있다 !important 왜냐하면 그들은 우리에게 "레이어 우선 순위 지정 및 상속을 보호하다. "
멋진 말이네요, 미리암!
Dave Rupert: 접근성 백로그 차단 해제
사이트에서 보고된 문제에 대한 수백 개의 GitHub 알림으로 하루를 깨운다고 상상해 보세요. 어디에서 시작합니까? 노트북을 닫고 대신 근관을 얻을 수 있습니까? 데이브에게 일어난 일입니다! 자동화된 접근성 감사는 엄청난 양의 오류를 반환하고 Dave가 수정할 티켓으로 할당했습니다.
그러나 그는 이러한 문제의 Excel 스프레드시트를 가져와서 더 나은 보기를 위해 Notion으로 옮기고, 불필요한 열을 숨기고, 모든 것을 분류하고, 결과를 논리적 그룹으로 표시한 후 패턴을 발견했습니다. 보고된 문제 중 다수는 동일한 문제가 여러 페이지에서 반복되었습니다. 자동화된 테스트가 소수의 오류를 반환한다고 해서 모두 고유한 것은 아닙니다. 그것은 티켓의 좋은 덩어리를 줄였습니다.
그는 계속해서 비교적 적은 노력으로 문제의 백로그가 거의 50% 감소하는 방법을 보여주었습니다.
특히 작업을 처리하고 구성하는 방법과 관련하여 배울 점이 많습니다. 제게 가장 큰 시사점은 Dave가 프로세스와 도구보다 개인과 상호 작용을 강조해야 한다고 말한 것입니다. 접근성 오류를 검색하는 것과 같은 도구는 유용하지만 전체 내용을 설명하지 못할 수도 있습니다. 그들의 말을 그대로 받아들이기보다는 혼란에 빠지기 전에 질문을 하고 더 많은 맥락을 파악하는 것이 좋습니다.
보너스로, Notion에서 문제를 재구성함으로써 Dave는 자신의 제품이 적극적으로 차별하는 장애를 명확하게 보여주는 방식으로 문제를 그룹화할 수 있었고, 이러한 문제에 대해 더 큰 공감과 우선 순위를 지정할 수 있었습니다.
Hui Jing Chen의 가상 세션으로 하루를 마무리했지만 복도에서 대화를 하느라 절반 정도는 놓쳤습니다. 비록 내가 프레젠테이션을 놓친 것이 부끄러웠지만 그 대화는 그만한 가치가 있었습니다. 공개되면 영상으로 볼게요!
