새해, 새로운 시작: 스매싱 워크샵 및 감사

새해가 밝았고 모두의 결심이 여전히 시험대에 오르면서 우리는 천천히 일상적인 프로젝트로 돌아가고 있습니다. 그리고 그렇게 하면서 2021년의 새로운 목표인 접근성, 전환, 참여, 유지 및 웹 성능 개선에 중점을 둡니다. 우리 모두는 올해 각자 다른 목표를 갖고 있지만 한 가지는 우리 모두를 하나로 묶는 것입니다. 바로 모든 사람을 위한 웹 개선입니다.

몇 년 사이의 시간은 항상 진정하기에 좋은 시간입니다. 그러나 그것은 또한 연구, 생각, 쓰기, 그리고 아마도 원치 않는 코딩과 디자인을 할 수 있는 멋진 시간이기도 합니다. 그리고 거의 연례 전통인 것처럼(실제로는 그렇습니다) Vitaly는 2021년에 프론트엔드에서 일어난 모든 일을 읽고 2021년 프론트엔드 성능 체크리스트에서 다시 한 번 컴파일했습니다.

이 가이드는 메트릭에서 도구, 프런트 엔드 기술 및 전략에 이르기까지 오늘날 웹에서 빠른 경험 을 구축하는 데 필요한 거의 모든 것을 다룹니다. 지난 몇 년 동안 많은 독자들에게 매우 유용한 것으로 판명되었으므로 여러분에게도 유용할 것입니다. 체크리스트(PDF, MS Word Doc 및 Apple Pages)를 편집하고 개인적인 필요에 맞게 조정하거나 조직에서 사용할 수도 있습니다.

이제 더 이상 고민하지 않고 Smashing 팀이 다음 달에 여러분을 위해 무엇을 준비했는지 살펴보겠습니다.

온라인 워크샵으로 한 해를 미리 계획하세요

아직 워크샵 중 하나에 참석하셨습니까? 우리는 전 세계의 훌륭한 참석자가 함께 모여 함께 배우는 실용적인 온라인 워크샵 을 실행할 때마다 매번 흥분됩니다. 전 세계 사람들과 연결하고 경험을 라이브로 공유할 수 있는 좋은 기회임이 입증되었습니다. 라이브 디자인 및 코딩 세션 덕분에 정말 많은 아이디어가 실현되었고 새로운 친구를 찾은 사람들도 많이 있습니다!

더욱 좋아집니다. 이제 워크샵 번들에서 3, 5 또는 10장의 원하는 워크샵 티켓을 선택할 수 있습니다. 현재 진행 중이거나 예정되어 있거나 미래에 있을 워크샵입니다! 자신, 팀 또는 대행사를 위해 원하는 온라인 워크샵을 최고의 가격과 최고의 날짜로 선택하십시오. 워크샵 번들로 이동합니다.

우리는 올해 프로그램을 계속 진행 중이며 발표할 워크샵이 더 있습니다. 운영을 원하신다면 Twitter DM으로 연락주시면 최선을 다해 진행할 것을 약속드립니다. 또한 새로운 워크샵이 올 때 가장 먼저 알림을 받고 싶다면 여기에서 구독하십시오. 또한 얼리버드 티켓 도 받을 수 있습니다.

신규: 프론트엔드 및 UX에 대한 온라인 감사 스매싱

지난주에 우리는 새로운 작은 제품인 온라인 감사를 조용히 출시했습니다. 30-60분 분량의 비디오 검토와 결과 보고서를 작성했습니다. 웹사이트, 앱 또는 모형의 프론트엔드 및 UX에서 아이디어를 검증하고 정직하고 편견 없는 피드백 (현재는 Vitaly에서 제공)을 얻을 수 있는 간단하고 빠른 방법입니다. 또한 더 나은 작업을 위한 지침과 조치 사항이 있습니다.

선택한 감사를 예약하고 웹사이트, 앱 또는 모형에 대한 세부정보를 공유하세요. 그러면 거의 즉시 연락을 드리겠습니다!

스매싱 팟캐스트: 음악을 듣고 영감을 얻으세요

작년에 우리는 2주마다 새로운 Smashing Podcast 에피소드를 게시했으며 피드백은 대단 했습니다! 56,000회 이상의 다운로드(주당 1,000회 이상, 계속 증가하고 있습니다!)와 함께 다양한 배경을 가진 34명의 게스트가 팟캐스트에 있었고 공유할 수 있는 내용도 많습니다!

듣고 싶은 주제가 없거나 더 자세히 알고 싶다면 주저하지 말고 Drew McLellan의 호스트에게 연락하거나 Twitter를 통해 언제든지 연락하십시오.

1월 26일에 공개되는 다음 에피소드를 기대해주세요!

스매싱 뉴스레터: 베스트 픽

주간 뉴스레터를 통해 유용하고 실용적인 정보 를 제공하고 사람들이 웹 업계에서 작업하고 있는 유용한 정보를 공유하는 것을 목표로 합니다. 훌륭한 프로젝트를 수행하고 있는 재능 있는 사람들이 너무 많습니다. 여러분이 소문을 퍼뜨리고 그들이 마땅히 받아야 할 공로를 인정해 주시면 감사하겠습니다!

또한 구독하면 제3자 메일링이나 숨겨진 광고가 없으며 귀하의 지원은 청구서를 지불하는 데 정말 도움이 됩니다. ️

후원에 관심이 있으세요? 언제든지 우리의 파트너십 옵션을 확인하고 팀에 연락하십시오. 가능한 한 빨리 연락을 드릴 것입니다.

다음은 최근 뉴스레터에서 공유한 인기 있는 뉴스레터 입니다.

기본 로컬 글꼴 호환성

기본 글꼴은 운영 체제에 따라 크게 다릅니다. 시스템의 기본 글꼴, 특히 CSS font-family 를 통해 사용할 수 있어야 하는 글꼴을 찾는 쉬운 방법을 제공하기 위해 Zach Leatherman은 Font Family Reunion을 만들었습니다.

호환성 표는 기본 로컬 글꼴에 사용할 수 있는 것처럼 작동합니다. font-family 를 입력하면 지원 여부와 5가지 표준 CSS 키워드 font-families( serif , sans-serif , monospace , 덜 알려진 fantasy 및 cursive )는 각 운영 체제에서 에일리어싱됩니다. 하나는 책갈피용입니다.

Google 글꼴 성능 개선

자체 호스팅 글꼴은 웹 글꼴을 사용할 때 가장 빠른 옵션으로 널리 받아들여지고 있습니다. 그러나 Google 글꼴도 빠를 수 있습니다. 특정 사용자 에이전트 및 플랫폼에 가능한 가장 작은 글꼴 파일을 제공하는 기능과 URL 매개변수 &display=swap 을 통한 font-display 에 대한 비교적 새로운 지원은 이미 좋은 기반입니다. 그리고 Harry Roberts가 보여주듯이 Google Fonts가 일반적으로 알려진 많은 문제를 완화하고 성능을 더욱 향상시키기 위해 할 수 있는 일이 꽤 있습니다.

Harry는 "The Fastest Google Fonts"라는 기사에서 성능 테스트 토끼 구멍을 찾아 빠른 Google 글꼴을 위한 최상의 조합을 찾았습니다. CSS 비동기식 로드, 글꼴 파일 비동기식 로드, FOFT 선택, 비동기식 CSS 파일 빠르게 가져오기 및 온난화 외부 도메인까지. 이러한 모든 기술을 결합하여 처음에는 다소 압도적으로 들릴 수 있지만 Harry는 Google Fonts를 최대한 활용하는 데 도움이 되는 슬림하고 유지 관리 가능한 스니펫으로 기사를 마무리합니다.

반응형 이메일이 쉬워졌습니다

모든 인기 있는 이메일 클라이언트에서 견고한 경험을 제공하는 깨끗하고 반응이 빠른 이메일을 코딩하는 것은 시간 소모적인 도전이 될 수 있습니다. HEML은 그것을 바꾸기 위해 여기 있습니다. 오픈 소스 마크업 언어는 모든 이메일 문제를 처리하지 않고도 HTML의 기본 기능을 제공합니다. 마스터해야 할 특별한 규칙이나 스타일 패러다임이 없으므로 HTML과 CSS를 알고 있다면 시작할 준비가 된 것입니다.

MJML은 반응형 이메일 생성 프로세스를 단순화한다는 동일한 아이디어를 기반으로 합니다. 마크업 언어는 오픈 소스 엔진이 무거운 작업을 수행하고 작성한 MJML을 반응형 HTML로 변환하는 동안 프로세스를 간단하게 만드는 의미론적 구문을 기반으로 합니다. 표준 구성 요소 라이브러리는 추가 시간을 절약하고 이메일 코드 기반을 줄입니다. 그리고 자신만의 것을 만들고 싶다면 Modular Template System Guide도 도움이 될 것입니다. 약속!

방탄 HTML 이메일 템플릿

이메일 클라이언트에서 HTML 이메일을 작동하게 하는 것은 쉬운 일이 아닙니다. 다행히도 작업을 더 쉽게 완료할 수 있도록 해주는 신뢰할 수 있는 도구, 템플릿 및 프레임워크가 많이 있습니다. 예를 들어, Maizzle은 Tailwind CSS와 고급 이메일별 사후 처리를 사용하여 HTML 이메일을 빠르게 구축하는 데 도움이 되는 프레임워크입니다. 또한 바로 시작할 수 있는 몇 가지 기성 프로젝트(Maizzle Starters)를 제공합니다.

Cerberus 및 HTML 이메일은 Gmail, Outlook, Yahoo, AOL 및 기타 여러 이메일 클라이언트를 포함하여 50개 이상의 이메일 클라이언트에서 잘 테스트된 반응형 HTML 이메일을 위한 안정적이고 견고한 패턴의 소규모 컬렉션을 제공합니다. EmailFrame.work를 사용하면 60개 이상의 이메일 클라이언트에서 지원되는 사전 구축된 그리드 옵션 및 기본 구성 요소로 반응형 HTML 이메일 템플릿을 구축할 수 있습니다.

Stripo, Chamaileon, Postcards, Topol.io 및 Bee Free는 많은 무료 HTML 이메일 템플릿을 제공하고 Litmus는 뉴스레터, 제품 업데이트 및 영수증을 위한 반응형 이메일 템플릿을 제공하며 CampaignMonitor에는 드래그 앤 드롭 기능이 있는 무료 HTML 이메일 템플릿 빌더가 있습니다.

CSS 그라디언트에서 가짜 데이터로

요소 및 유사 요소에 대한 CSS 삼각형 스타일을 찾아야 한다고 상상해 보십시오. 또는 주어진 색상의 색조와 음영 을 탐색하여 색상 팔레트를 약간 수정합니다. 또는 페이지 섹션에 대해 선형 및 방사형 CSS 그라디언트를 생성할 수 있습니다. 수동으로 모든 작업을 수행하거나 웹 전체에서 해당 CSS 스니펫을 찾으려고 할 필요가 없습니다. 항상 오마츠리에서 찾을 수 있습니다.

Omatsuri는 일본어로 축제 를 의미하며 이 사이트는 일상적인 사용을 위한 오픈 소스 브라우저 도구의 멋진 작은 축제입니다. 사이트에서 삼각형 생성기, 색상 음영 생성기, 그래디언트 생성기, 페이지 분할기, SVG 압축기, SVG → JSX 변환기 , 가짜 데이터 생성기, CSS 커서 및 키보드 이벤트 코드를 찾을 수 있습니다. Vitaly Rtishchev와 Vlad Shilov가 설계 및 제작했습니다. 사이트의 소스 코드도 사용할 수 있습니다.

CSS 섀도 생성기

정말 부드럽고 계층화된 상자 그림자 를 위한 CSS 코드를 자동으로 생성하는 도구를 찾고 계십니까? 글쎄, 당신은 SmoothShadow를 사랑하게 될 것입니다. Tobias Ahlin Bjerrome이 작성한 기사에서 영감을 받은 이 멋진 도구는 누구나 필요한 코드를 그 자리에서 생성할 수 있도록 도와줍니다.

한 번 사용하면 사용하지 않기가 어려울 것입니다. 이 작은 도구를 사용하면 계층화된 부드러운 상자 그림자를 시각적으로 디자인할 수 있을 뿐만 아니라 개별 이징 곡선으로 알파, 오프셋 및 흐림을 조정할 수도 있습니다. 그리고 더 나아졌습니다. 이 도구의 제작자인 Philipp Brumm은 SmoothShadow를 Figma 플러그인으로 출시했습니다. 따라서 항상 원했던 것처럼 워크플로를 최적화할 수 있습니다!

CSS 변수 이해하기

CSS 변수는 강력합니다. 일반적으로 계단식으로 연결되고 상속되며 코드를 재사용할 수 있으며 매우 관대합니다. 그러나 CSS 변수의 잠재력을 최대한 활용하기 위해 실제로 무엇을 넣을 수 있습니까? 일부는 명확하지 않기 때문에 Will Boyd는 블로그 게시물에서 가능성을 탐색했습니다.

단위 값에서 사전 정의된 키워드, 콘텐츠 문자열, 이미지, 멋진 애니메이션 값에 이르기까지 Will의 요약은 CSS 변수와 함께 사용할 수 있는 가장 일반적인 사항을 조명합니다. 훌륭한 개요입니다.

배움을 멈추지 마세요

배움은 멈추지 않습니다. 그리고 종종 가장 유용한 것으로 판명되는 작은 통찰력, 코드 정보 및 팁이기 때문에 Stefan Judis는 "Today I Learned"를 시작했습니다.

SVG 필터가 CSS에서 인라인될 수 있다는 인식이든, 사이트가 색 구성표를 지원한다는 것을 브라우저에 알리는 방법이든, Stefan은 그가 배운 각각의 작은 것에 대해 CSS뿐만 아니라 접근성, bash, git, GraphQL, HTML, JavaScript 등. Samantha Ming의 간단한 코드는 또한 여러분의 삶을 더 쉽게 만들어줄 빠르고 귀중한 웹 개발자 지혜의 보물 상자입니다.

그리고 그것은 랩입니다!

웃음, 기억에 남는 순간, 놀라운 경험으로 가득한 올해 정말 멋진 한 해가 되시기를 진심으로 바랍니다. 첫째, 온라인이나 직접 만나기를 고대하고 있습니다. 하지만 한 가지는 확실합니다. 매달 멋진 모습을 보여주셔서 진심으로 감사드립니다. 그 점에 대해 영원히 감사드립니다.

계속 스매싱!