🥇프런트엔드 개발자를 위한 6가지 작업

부드럽고 즐거운 마이크로 인터랙션을 갖춘 멋진 신용카드 모양입니다. 숫자 형식 지정, 확인 및 자동 카드 유형 감지가 포함됩니다. Vue.js를 기반으로 구축되었으며 완벽하게 반응합니다. (너는 볼 수있어 여기에.)

당신이 배울 내용:

이 기사는 EDISON Software의 지원으로 번역되었습니다. 프로그래머들의 건강과 아침식사를 책임집니다과 맞춤형 소프트웨어를 개발합니다.

히스토그램은 나타내는 값에 비례하는 높이나 길이를 갖는 직사각형 막대로 범주형 데이터를 나타내는 차트 또는 그래프입니다.

수직 또는 수평으로 적용할 수 있습니다. 수직 막대 차트를 선 차트라고도 합니다.

당신이 배울 내용:

여기에 세계 인구 데이터를 찾을 수 있습니다. 연도별로 정렬되어 있습니다.

2016년에 트위터는 트윗에 이 놀라운 애니메이션을 선보였습니다. 2019년 기준으로 여전히 그 부분이 중요해 보입니다. 직접 만들어 보는 것은 어떨까요?

당신이 배울 내용:

여기에는 멋진 것이 없습니다. GitHub 저장소는 단지 미화된 목록일 뿐입니다.
목표는 저장소를 표시하고 사용자가 이를 필터링할 수 있도록 하는 것입니다. 사용 공식 GitHub API 각 사용자에 대한 저장소를 얻으려면.

GitHub 프로필 페이지 - github.com/indreklasn

당신이 배울 내용:

API에서 데이터 수신
API의 데이터 표시
각 검색에 대한 관련 데이터 필터링 및 표시
선택 사항: 도전에 응하고 싶다면 다음을 사용하세요. API v4, GraphQL을 사용하여 구축되었습니다. GraphQL을 배우고 싶다면 이전 기사 중 하나로 이동하세요..

채팅은 단순성과 사용 용이성으로 인해 널리 사용되는 의사소통 방법입니다. 하지만 현대 채팅방에 실제로 활력을 불어넣는 것은 무엇일까요? 웹소켓!

당신이 배울 내용:

WebSocket, 실시간 통신 및 데이터 업데이트 사용
사용자 액세스 수준 작업(예: 채팅 채널 소유자에게 역할이 있음) admin및 방에 있는 다른 사람들 - user)
양식 처리 및 유효성 검사 - 메시지 전송을 위한 채팅 창은 다음과 같습니다. input
다양한 채팅 생성 및 참여
개인 메시지로 작업하세요. 사용자는 다른 사용자와 비공개로 채팅할 수 있습니다. 기본적으로 두 사용자 간에 WebSocket 연결을 설정하게 됩니다.

이 탐색을 독특하게 만드는 것은 팝오버 컨테이너가 콘텐츠에 맞게 변형된다는 것입니다. 새로운 팝오버를 열고 닫는 전통적인 동작에 비해 이 전환에는 우아함이 있습니다.

당신이 배울 내용:

먼저 직접 해보세요. 도움이 필요하면 여기를 확인하세요. 단계별 가이드.

출처 : habr.com

프론트엔드 개발자를 위한 XNUMX가지 과제