UI,UX,접근성,기본개념 등23 Trello card 데이터를 기반으로 netlify 배포해보기 오늘은 Trello 데이터를 통해 멋진 CMS와 같은 사이트를 만들어보도록 하겠습니다. 전체적인 시나리오는 트렐로에서 칸반 보드를 만들고 해당 내용에 라벨링을 'stage' 또는 'live'를 붙이게 되면 네틀리파이 hook을 통해 자동으로 사이트에 패치되게되는 시나리오입니다. 추가적으로 깃헙도 연결하여 깃헙에 커밋하면 그 내용 또한 자동으로 네틀리파이(netlify)에 반영됩니다. netlify 계정 만들기 www.netlify.com/ Netlify: Develop & deploy the best web experiences in record time A powerful serverless platform with an intuitive git-based workflow. Automated deplo.. 2021. 4. 4. 웹사이트 성능측정하기 Puppeteer를 사용한 웹 성능 레시피 Puppeteer는 Lamda에서도 사용할 수 있는 통합 테스트 노드 라이브러리입니다. developers.google.com/web/tools/puppeteer Puppeteer | Tools for Web Developers | Google Developers Overview of Puppeteer developers.google.com BrowserStack SpeedLab 스피드에 대한 점수를 리포트로 받아 볼 수 있습니다. www.browserstack.com/speedlab Analyze your website speed test report generated using SpeedLab by BrowserStack. A free tool to test.. 2021. 2. 21. 프론트엔드에 영감을 주는 8가지 아이디어들 1. 애니메이션 메뉴 탭 바 전환탭 사이에 애니메이션이 있는 60FPS 유체 헤더입니다. CSS 애니메이션 또는 JavaScript를 사용하여 매끄러운 60FPS 애니메이션을 얻을 수 있습니다. HTML, CSS 및 JavaScript를 조화롭게 사용하여 메뉴를 다시 만드는 방법 SVG, CSS 애니메이션 작업 및 둘 다 결합하는 방법 애니메이션 goo svg 필터를 사용해서도 구현할 수 있겠지요. 2. Cyberpunk 2077 테마 버튼 비슷하게 구현을 해보는 것도 좋을 것 같습니다. CSS 변수, 키 프레임 및 클립 경로를 사용하는 방법 복잡한 호버 애니메이션을 만드는 방법 3. 체스 조각과 체스 판 체스에 대한 관심은 Walter Tevis의 1983년 소설을 원작으로 한 드라마 미니 시리즈 인 .. 2021. 1. 30. UI 디자인 실수 10가지 1. 범위 무시 디자이너가 개발 프로세스를 지나치게 복잡하게하는 기능을 도입하면서 애플리케이션에 추가적인 가치를 제공하는 것은 드문 일이 아닙니다. 비즈니스 목표, 프로젝트 범위, 타임 라인 및 제품 개발 방식에 초점을 맞추는 것은 디자인을위한 기능의 우선 순위를 지정할 때 모두 중요한 고려 사항입니다. 예를 들어 사용자가 프로필 사진을 업로드 할 수있는 옵션을 디자인하고 있지만 사진 자르기, 크기 조정 및 회전 기능도 추가하면 디자인 이 불필요하게 복잡해집니다. 디자인에 "회전" 또는 "자르기" 버튼을 추가하는 것은 어렵지 않지만 개발 단계에서 구현하기가 더 까다롭습니다. 안전한 방법은 응용 프로그램에 필수적인 기능이 아닌한 기능을 추가하지 않는 것입니다. 항상 비즈니스 및 사용자 목표를 디자인 프로세.. 2021. 1. 17. 이전 1 2 3 4 5 6 다음
