모든 것 스매싱에 대한 월간 업데이트

전체 Smashing 팀은 실제 전문가와 함께 라이브 세션을 제공하기 위해 최선을 다하고 있습니다. 웹 커뮤니티의 모든 사람에게 공개된 이벤트인 Smashing Meets 를 3일 동안 조직했습니다. 성능, CSS, GraphQL 및 창의적 용기에 대한 세션을 통해 Q&A, 네트워킹, 대회 및 경품을 위한 충분한 시간을 확보했습니다.

그 이후로 받은 피드백에 압도당했습니다. 많은 분들이 연사와 함께 시간을 보내고 직접 질문하는 것을 즐기는 것 같았습니다. 참여해주신 모든 분들께 다시 한 번 진심으로 감사드립니다 . 여러분 모두와 함께할 수 있어서 정말 놀라운 경험이었습니다!

Smashing Meets 일정 개요(5월 및 6월)

스매싱 온라인 워크샵: 다음 업데이트 예정

캘린더를 표시하세요! 우리는 다음 주에 더 많은 온라인 이벤트를 조직할 것입니다. CSS, 접근성, 성능 또는 UX에 대한 스포트라이트가 무엇이든 상관없이 우리는 귀하가 기술을 향상하고 업계 전문가로부터 실용적이고 실행 가능한 통찰력을 배울 수 있도록 돕고자 합니다.

이전 워크샵은 많은 사람들이 매진되어 엄청난 인기를 얻었으므로 세부 사항을 확인하고 가능한 한 빨리 자리를 확보하십시오.

마지막 한가지. 관리자가 좀 더 설득력이 필요하다고 생각해서 Smashing 워크샵에 참여하는 것에 대해 두 번 생각하고 있는 경우를 대비하여 깔끔한 템플릿을 제공합니다. Convince Your Boss. 행운을 빕니다!

Smashing Books의 최신 추가 사항: 지금 배송

Paul Boag의 책 “ 클릭! 속임수 없이 클릭을 유도하는 방법 ”. 고객을 소외시키지 않으면서 전환율을 높이고 비즈니스 KPI를 높이는 방법에 대한 자세한 안내서이며, 매우 유용할 것이라고 확신합니다.

• 목차로 이동하여 무료 PDF 발췌문(17.3MB)을 다운로드하십시오.

스매싱 팟캐스트: 집중하세요!

18개의 에피소드, Smashing Podcast는 우리가 기대했던 것보다 훨씬 좋았습니다! 2주마다 Drew McLellan은 다양한 배경을 가진 사람들과 이야기를 나누며 항상 배우고 공유할 것이 많습니다! 언제든지 우리와 함께 조정하고 질문과 생각을 공유할 수 있습니다.

• 이전 Smashing Podcast 에피소드(스크립트 포함)
• 트위터에서 @SmashingPod 팔로우

스매싱 매거진의 트렌드 토픽

우리는 웹 업계의 최신 정보를 제공하는 다양한 주제에 대한 새로운 기사를 매일 게시합니다. 다음은 독자들이 가장 좋아하고 추가로 추천한 몇 가지입니다.

• "동등한 경험: 동등하게 생각하기", Eric Bailey
• "사용자 인터뷰 질문을 개선하는 12가지 방법", Slava Shestopalov
• "Vue.js에서 구성 요소 간에 데이터를 전달하는 방법", Matt Maribojoc
• "React의 컨텍스트 API 소개", Yusuff Faruq
• "효과를 위해 디자인 개념을 테스트하는 방법", Paul Boag

뉴스레터의 베스트 픽

솔직히 말해서, 우리는 두 번째 주마다 Smashing Newsletter 문제를 적당한 길이로 유지하기 위해 고군분투하고 있습니다. 훌륭한 프로젝트를 위해 일하는 재능 있는 사람들이 너무 많습니다! 관련된 모든 분들에게 경의를 표합니다!

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

추신 : 이 게시물을 작성하고 준비한 Cosima Mielke에게 큰 감사를 드립니다!

오래된 CSS 문제에 대한 최신 CSS 솔루션

우리는 CSS가 때때로 마스터하기 까다로울 수 있다는 것을 알고 있습니다. div 를 중앙에 배치하는 방법에 대한 고전적인 질문을 생각해 보십시오. "오래된 CSS 문제를 위한 현대적인 CSS 솔루션"에서 Stephanie Eckles는 프론트 엔드 개발자로서 지난 13년 동안 해결해 온 크고 작은 CSS 문제에 대한 솔루션을 탐구합니다.

오래된 센터링 문제 외에도 이 시리즈는 동일한 높이의 요소 만들기, 액세스 가능한 드롭다운 메뉴 만들기, 버튼 스타일 지정 등과 같은 문제를 탐구합니다. Stephanie가 새로운 주제를 계속 추가하므로 정기적으로 다시 확인하십시오. 멋진!

모두를 위한 일러스트레이션

일러스트레이션은 디자인에 개인적인 느낌을 더할 수 있는 좋은 방법입니다. 그러나 모든 사람이 타고난 일러스트레이터는 아니며 모든 프로젝트에 공예를 마스터하는 사람을 고용할 예산이 있는 것도 아닙니다. 폐쇄 기간 동안 Pablo Stanley와 그의 몇몇 친구들은 이를 변경하기로 결정하고 예술에 더 쉽게 접근할 수 있도록 하고 모든 사람이 자신의 창작물에 일러스트레이션을 사용할 수 있는 기능을 제공하는 도구를 만들었습니다. 블러셔를 만나보세요.

Blush는 전 세계 아티스트가 만든 13개의 믹스 앤 매치 일러스트레이션 라이브러리 모음입니다. 캐릭터, 도시 풍경, 식물, 음식 또는 추상 미술 작품 등 무엇이든, 팩 중 하나에서 좋아하는 일러스트레이션을 선택하고 스토리를 전달하는 데 필요한 조합이 될 때까지 모든 작은 세부 사항을 사용자 지정할 수 있습니다. Pablo가 말했듯이 "벡터로 만든 레고 놀이"와 같습니다. 일러스트는 고품질 PNG로 무료로 다운로드할 수 있습니다. 자신이 일러스트레이터이고 다른 제작자에게도 자신의 작업을 제공하고 싶다면 Blush에 소개되도록 신청할 수 있습니다. 나눔과 배려의 환상적인 예.

코드 정보로 Flexbox 배우기

항상 Flexbox를 배우고 싶었지만 전체 작업이 약간, 음, 어렵습니까? 그럴 필요는 없습니다. 사실, Flexbox 마술을 마스터하는 데 30개의 간단한 코드만 있으면 됩니다. Samantha Ming이 돌아왔습니다.

그녀의 무료 과정 Flexbox30에서 Samantha는 30개의 짧고 선명한 Flexbox 수업을 안내합니다. Flexbox의 핵심 개념을 학습한 후에는 상위 및 하위 속성의 안팎을 살펴봅니다. 각 강의에는 다운로드할 수 있는 치트 시트가 제공되므로 Flexbox에 대해 이미 알고 있지만 일부 속성에 어려움을 겪고 있는 경우 이 과정을 매우 복습할 수 있습니다.

글로벌 웹사이트 속도 프로파일러

성능 벤치마킹 도구는 일반적으로 단일 위치에서 성능을 측정합니다. 그러나 귀하의 사이트는 해당 위치에 기반을 두지 않는 실제 사용자에게 어떤 성능을 제공합니까? 자체 시장에서 보다 정확한 결과를 얻기 위해 WordPress 보안 플러그인 Wordfence 뒤에 있는 사람들은 전 세계 여러 위치에서 실제 성능을 측정하는 도구인 Fast 또는 Slow 를 구축했습니다.

Fast or Slow 는 전 세계 13개 도시의 13개 서버 네트워크에서 데이터를 가져옵니다. 각 서버는 동일한 성능을 갖도록 보정되어 속도 측정이 실제 사용자에게 사이트가 어떤 느낌인지를 정확하게 나타냅니다. 성능 테스트는 사이트 성능의 전체 점수를 제공하고 결과를 지리적 위치별로 세분화하는 한편 CSS 축소, 이미지 최적화, 캐싱 등에 대한 감사는 특정 성능 병목 현상을 드러내는 데 도움이 됩니다. 빠름 또는 느림 은 무료로 사용할 수 있습니다.

스크린샷을 위한 세련된 브라우저 프레임

스크린샷에는 일반적으로 두 가지 옵션이 있습니다. 브라우저 확장 프로그램을 사용하여 전체 브라우저 창의 스크린샷을 찍고 책갈피도 표시할 수 있습니다. 또는 덜 산만하게 하려는 경우 테두리 없이 사이트의 스크린샷만 찍기로 결정합니다. . 보다 정교한 솔루션을 찾고 있다면 Browserframe이 적합할 수 있습니다.

스크린샷을 도구에 끌어다 놓기만 하면 깔끔한 브라우저 프레임으로 래핑됩니다. 선택할 수 있는 여러 브라우저, 운영 체제 및 테마가 있으며 이미지를 다운로드하기 전에 배경색, 그림자, 패딩 및 기타 세부 사항을 조정할 수 있습니다. 블로그 게시물, 소셜 미디어, 슬라이드 또는 스크린샷을 사용하려는 모든 곳에 적합합니다.

SVG 경로 데이터 구문 탐구

SVG 경로 데이터 구문이 실제로 무엇을 의미하는지 알고 있습니까? 그렇지 않다면 당신은 혼자가 아닙니다. Mathieu Dutour는 꽤 오랫동안 SVG를 사용해 왔지만 항상 경로 데이터 구조를 이해하는 데 어려움을 겪었습니다. 그래서 그는 그것을 위한 시각화 장치를 만들었습니다.

SVG 경로 시각화 도우미는 입력한 SVG 경로 데이터를 시각화하고 다양한 명령을 검색할 수 있도록 합니다. 구문에 더 익숙해지기 위해 탐색할 수 있는 몇 가지 예도 있습니다. SVG의 골격에 대한 통찰력 있는 모습.

미래는 여기

당신이 프로젝트에서 일하고 있고 그것에 책의 그림을 추가하고 싶다고 상상하십시오. 책상 바로 옆에 책이 있으므로 휴대전화를 꺼내 책의 사진을 찍고 컴퓨터로 사진을 보내고 Photoshop에서 열고 배경을 제거하고 마지막으로 사진을 컴퓨터에 포함합니다. 파일. 자, 이제 현실에서 책을 복사하여 화면의 원하는 위치에 붙여넣을 수 있다면 어떨까요? 공상과학 소설처럼 들릴 수도 있는 일이 오늘날에도 이미 가능합니다.

연구 프로토타입 AR Copy Paste를 사용하면 주변의 요소를 복사하여 이미지 편집 소프트웨어에 붙여넣을 수 있습니다. 모바일 앱, 앱과 Photoshop 사이의 인터페이스 역할을 하고 화면에서 올바른 위치를 찾는 로컬 서버, 마지막으로 중요한 것은 이의 제기 감지/배경 제거 서비스를 통해 이를 가능하게 합니다. 모양으로 이미지. AR의 미래에 대한 인상적인 엿보기.

블랙 일러스트

흑인과 유색인종은 삽화와 시각 자료에서 과소 표현되는 경우가 많습니다. 디지털 환경의 변화를 촉발하기 위해 5four의 팀은 더 다양한 그림을 그리고 수많은 작업에서 흑인과 유색인종을 보여주는 일러스트레이션 팩인 Black Illustrations 를 만들었습니다.

웹사이트, 피치 데크, 인포그래픽 등 원하는 곳 어디에서나 사용할 수 있는 6개의 일러스트레이션 팩이 있습니다. 두 가지 데크를 무료로 다운로드할 수 있습니다. "The Office Hustle"은 사무실 환경에서, 집에서 일하고, 대화를 나누는 사람들을 의료 환경에서 보여주고, "The Movement Pack"은 #BlackLivesMatter 및 인종 불평등에 맞서 싸워라. 다른 팩에는 교육 및 라이프스타일 테마 이미지가 포함됩니다. 강력한 메시지가 담긴 아름다운 디자인.

작동 중인 이징 곡선 참조

현실 세계의 움직임은 유동적이며 거칠거나 즉각적인 시작이나 중지가 없으며 일정한 속도도 없습니다. 부드러운 곡선은 웹에서 자연스러운 느낌을 주는 데 도움이 됩니다. 그러나 실제로는 이해하기에도 매우 추상적일 수 있습니다.

Easings 를 사용하여 Paul Macgregor는 갤러리 캐러셀에서 사이드 메뉴, 스크롤 잭 및 모달에 이르기까지 다양한 인터페이스에 일반적인 이징 곡선이 미치는 영향을 시각화하는 유용한 도구를 구축했습니다. 컬렉션에서 이징 곡선을 선택하여 실제 동작을 보거나 사용자 정의 곡선을 입력하십시오. 하나는 책갈피용입니다.

오늘날 개발자가 일하는 방식에 대한 통찰력

거의 10년 동안 Stack Overflow에서 매년 실시하는 개발자 설문조사는 코딩을 하는 사람들을 대상으로 한 가장 큰 설문조사입니다. 올해 그들은 전 세계에서 온 65,000명의 개발자에게 어떻게 배우고, 어떤 도구를 사용하고, 무엇을 원하는지 물어보며 프로그래머의 다양성을 더 잘 대표하도록 만들었습니다. 설문 조사는 2월에 실시되었으며 그 결과는 커뮤니티 내부를 포괄적으로 살펴봅니다.

이 설문조사는 개발자의 전문적 및 인구통계학적 배경을 다루고 도구와 도구의 인기도, 응답자의 개발 환경이 어떤 모습인지, 경력 가치, 직업 우선순위 및 작업 조건과 마찬가지로 문제를 배우고 해결하는 방법을 살펴봅니다. 흥미로운 통찰력이 보장됩니다.

단일 div의 CSS 아트

단일 div 에서 무엇을 할 수 있습니까? Lynn Fisher는 그녀의 CSS 드로잉 프로젝트 A Single Div 에서 볼 수 있듯이 이 질문에 대한 창의적인 답변을 많이 가지고 있습니다.

모든 도면은 단일 div 요소 내부에 있는 CSS로 구성되며 템플릿을 위한 Pug와 CSS 전처리를 위한 Stylus의 조합을 사용합니다. 글자 및 기하학적 패턴에서 임의의 개체 및 작은 문자에 이르기까지 각 다채로운 타일은 CSS로 수행할 수 있는 작업의 훌륭한 예입니다.

데이터 탐색을 위한 매직 노트북

오픈 소스는 소프트웨어 개발을 혁신하여 공유, 협업 및 투명성을 표준으로 만들었습니다. 이에 영감을 받아 Observable은 연결된 세계를 위한 데이터 과학을 재구상하는 것을 목표로 합니다. 더 접근하기 쉽고, 접근 가능하고, 사회적으로 만들기 위해.

"데이터를 탐색하고 코드로 생각하기 위한 마법의 노트북"으로 설명되는 Observable을 사용하면 라이브 데이터로 스케치할 수 있습니다. 시각화를 프로토타이핑하고, Web API에 연결하고, 변경 사항이 있을 때 즉시 "노트북" 업데이트를 확인할 수 있습니다. 동료 작성자 커뮤니티와 서로 학습하고 구성 요소를 공유하고 재사용하는 것이 이 개념의 핵심 부분이며 팀은 실시간으로 노트북을 함께 편집할 수도 있습니다. 이제 그것으로 무엇을 만들까요? 보고서, 설명 시각화, UI 프로토타입, 문서, 예술 프로젝트, 시각 디자인 — 당신의 상상력만이 한계입니다.

유용한 프론트엔드 및 UX 비트, 일주일에 한 번 제공됩니다.

작업을 더 잘 수행하는 데 도움이 되는 도구가 있습니다. 이메일을 통해 Vitaly의 스마트 인터페이스 디자인 체크리스트 PDF 를 구독하고 받으십시오.

당신의 (스매싱) 이메일

프론트엔드 및 UX에서. 190,000명의 사람들이 신뢰합니다.