오픈소스모음

최근 사진은 고해상도로 되어있어 간단하게 표시 한 것만으로는 세세한 부분까지 확인할 수 없게되어 있습니다. 모처럼 찍은 사진에 대해 상세한 부분까지보고 싶은 보았으면 좋겠다고 생각하는 것은 아닐까요. 그래서 사용해보고 싶은 것이 jfMagnify입니다. 돋보기 도구를 사용하여 아주 작은 부분까지 볼 수있는 라이브러리입니다. jfMagnify 사용법 데모입니다. 마우스로 돋보기 부분을 드래그하여 이동할 수 있습니다. 새로운 생각은 돋보기 옆에있는 확대 / 축소 버튼입니다. 확대하면 더 잘 확인할 수 있습니다. 자고있는 남성의 얼굴도 확인할 수있었습니다. jfMagnify 단순히보고있는 사진을 확대하고있다뿐입니다 만, Retina 디스플레이 등으로 2 배 해상도의 사진을 표시하는 경우는 보다 효율적으로 확인..

Web 사이트의 기념적인 항목이나 페이지를 만들 때 세로로 만든 타임 라인이 자주 사용됩니다. Web 페이지는 세로로 스크롤되는 것이 많기 때문에 , 스크롤 할 때마다 경과 시간을 나타낼 수 있습니다. 그런 사이트를 만들 때 사용할 수있는 것이 Blueprint : Vertical Timeline입니다. 센스있는 타임 라인 페이지를 만들 수있을 것입니다. Blueprint : Vertical Timeline 사용법 Blueprint : Vertical Timeline의 데모입니다. 일시 및 콘텐츠 아이콘이 함께 표시되어 있습니다. 리스판시브 대응입니다. 스마트 폰 크기로도 쉽게 볼 수 있습니다. Blueprint : Vertical Timeline은 심플한 디자인이지만 그만큼보기 쉬운 것이 아닐까요. 세..

React의 개발은 데이터의 상태가 중요하고, 저장해 두지 않으면 다시 로드하면 원래대로 돌아갑니다. 이제 상태가 변화하는 가운데에서 개발할 때는 이상합니다. 그렇다고이를 위해 데이터를 변경하는 것도 귀찮은입니다. 그래서 사용해보고 싶은 것이 React Storybook입니다. 스토리라는 단위를 사용하여 데이터의 상태를 나누어 관리 할 수​​ 있습니다. React Storybook 사용법 데모 Todo 어플입니다. 데이터를 추가하면 그것이 로거에 표시됩니다. 왼쪽의 메뉴에서 선택하면 데이터가 표시되어있는 버전을 선택할 수있었습니다. 또한 미완료 작업보기를 선택했습니다. 여기에는 두 가지의 작업 상태 필터링 기능이 붙은 화면입니다 지우기가 있는 버전입니다 React Storybook를 사용하면 UI 구성 ..

Bootstrap이 가장 많이 사용되는 것은 개인의 Web 서비스, 그리고 기업의 관리 화면에서는 아닐까요. 그런 Bootstrap을 사용한 관리 화면 템플릿 Bootstrap Clean Dashboard Theme를 소개합니다. 정보가 한 곳에 집중되어 있는 대시 보드를 만드는 것이 가능합니다. Bootstrap Clean Dashboard Theme 사용법 데모 화면입니다. 대부분의 버튼은 작동하지 않습니다. 그래프도 있습니다. 각 콘텐츠는 상자에 들어 있습니다. 상자를 클릭 할 때까지 접어 두는 등 표시도 할 수 있습니다. 양식. 주소록 형태 로그인. Bootstrap Clean Dashboard Theme 은 대시 보드이므로 관리 화면에 많은 정보를보기 쉽게 배치하는 것이 요구됩니다. 아이콘을 결..

액세스 해석을 사용하면 사용자가 어떻게 방문하고 있는지 알 수 있습니다. 그러나 페이지에서 어떤 식으로 움직이는 지 모릅니다. 거기에 뭔가 문제가있어 페이지를 닫아 버리고있는 가능성도 있습니다. 그런 사용자의 작업을 기록, 재현 해주는 것이 Spy입니다. 액세스 해석과 함께 사용해 보면 재미있을 것입니다. Spy 사용법 Spy의 움직임입니다. 자신이 한 마우스 조작이 그대로 재현됩니다. Spy 페이지를 표시하는 순간부터 기록이 이루어지고 있습니다. 그리고 데이터를 순차적으로 업로드 할 수 있습니다. 이 데이터를 합쳐서 사용자가 수행 한 작업 (클릭 스토 등)을 재현 할 수있는 구조입니다. 프라이버시에 대한 배려는 필요하지만, Web 사이트의 테스트와 함께 사용해도 좋을 것입니다. Spy는 JavaScri..

텍스트만으로 모든 것을 설명하고자한다 무심코 글이 많아지는 경향이있다. 그러나 단축시키면 너무 전해지지 않게되어 버립니다. 균형이 중요하지만, 그것은 종이와 같은 정적 텍스트의 경우라고 할 수 있습니다. Web이면 더 동적으로 사용자 조작에 따라 콘텐츠를 제공 할 수도있을 것입니다. 그래서 사용해보고 싶은 것이 Expounder입니다. Expounder 사용법 Expounder 데모입니다. 밑줄이있는 문자를 클릭하면 내용이 추가됩니다. 주로 단어의 설명이거나 보충하는 내용을 표시 할 수 있습니다. 단어를 이미 알고있는 사람에게하면 중복적인 설명은 필요 없으며 툴팁처럼 마우스를 맞추고 않아도되는 것이 편리합니다. 문장은 다음과 같이 준비합니다. In the land of Mordor, in the fire..

Web상에서 콘텐츠를 더 많은 사람에게 보여 주려고 생각하면 공유 기능을 빠뜨릴 수 없습니다. Facebook, Twitter 기본적으로, 그 밖에도 많은 소셜 계 서비스가 존재합니다. 그런 각종 서비스에 대응 한 공유 기능을 제공하는 것이 Social Share URLs입니다. JavaScript에서 쉽게 구현할 수 있습니다. Social Share URLs 사용 데모입니다. 지정된 URL, 제목 등으로 공유 할 수 있습니다. 아래에 늘어선 아이콘을 클릭합니다. Facebook의 경우. 기본적으로 모든 팝업 창이 열립니다. Twitter이면 해시 태그와 사용자 이름을 지정할 수 있습니다. Google Plus에도 대응하고 있습니다. Social Share URLs 공유 기능을 동적으로 쉽게 만들 수있을..