오픈소스모음

최근 사진은 고해상도로 되어있어 간단하게 표시 한 것만으로는 세세한 부분까지 확인할 수 없게되어 있습니다. 모처럼 찍은 사진에 대해 상세한 부분까지보고 싶은 보았으면 좋겠다고 생각하는 것은 아닐까요. 그래서 사용해보고 싶은 것이 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 은 대시 보드이므로 관리 화면에 많은 정보를보기 쉽게 배치하는 것이 요구됩니다. 아이콘을 결..

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

지금은 클라우드 스토리지 서비스가 다수 존재합니다. 몇개의 서비스를 이용하거나, 회사와 개인 프로젝트 등 스토리지 서비스가 다른 분도 많은 것은 아닐까요. 그런 분들에게 추천하는 것이 rclone입니다. 여러 클라우드 스토리지를 명령 줄에서 조작 할 수있는 편리한 도구입니다. rclone 사용법 예를 들어 Dropbox 경우 다음과 같이 명령을 치면 내포하고있는 파일 목록이 있습니다. $ rclone ls Dropbox:/2016/05/24 11:42:42 Transferred: 0 Bytes ( 0.00 kByte/s)Errors: 0Checks: 0Transferred: 0Elapsed time: 1m0.9s 2925 .emacs.d/elisp/el-get/.loaddefs.el 25 .emacs.d..

Swagger는 Web API 표준 기술 포맷으로 알려지고 있습니다. 표준이있는 것은 그것을 사용하고 있으면 동일한 데이터를 사용하여 다른 형식이나 서비스에서 사용할 수있게합니다. 이미 코드 생성 라이브러리 등이 만들어져 있습니다 만, 이번은 Swagger 용 문서를 만들 Swagger Editor를 소개합니다. Swagger Editor의 사용법 이쪽이 메인 화면입니다. 왼쪽이 편집기 오른쪽에 결과가 표시됩니다. JSON을 붙여로드 할 수 있습니다. 설정이 다수 준비되어 있습니다. 클라이언트와 서버 측 코드 생성이 가능합니다. 그 결과는 Zip 파일로 다운로드 할 수 있습니다. 예를 들어 Ruby 코드는 이렇게됩니다. Swagger Editor는 Web API 문서 작성은 물론, 그대로 클라이언트 라이..

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

디자이너 분들에게 포트폴리오는 매우 중요합니다. 디자인과 사진을 통해 자신의 실력을 어필하여 전직이나 새로운 일의 획득으로 이어질 것입니다. 그리고 그 포트폴리오의 보이는 방법도 중요합니다. 작품이 좋아도 정작 포트폴리오 사이트가 이상하다면 실력이 의심되어 버립니다. 그래서 사용해보고 싶은 것이 gridfolio입니다. gridfolio 사용법 gridfolio는 그 이름과 같이 그리드 기반의 포트폴리오가 있습니다. 샘플은 다음과 같이됩니다. 이곳은 다른 예. 작품 사이의 취하는 방법이 소중하네요. gridfoliow를 사용하여 자신이 만든 작품을 예쁘게 나란히 볼 수 있습니다. 물론 포트폴리오도 자신의 작품으로 자작도 좋지만, 그런 수고를 걸 수 없거나 시간이없는 때에는 gridfolio를 사용해 보는..

음악을 흘리며 일을하고있는 사람은 많습니다. 집중력을 올려 주거나 기분을 향상시킴으로써 생산성을 높여주는 효과가 있습니다. 그러나 볼륨에 따라 집중력이 저하되는 경우도 있습니다. 그래서 사용해보고 싶은 것이 BackgroundMusic입니다. 사용중인 소프트웨어에 따라 음량을 조절해주는 유틸리티입니다. BackgroundMusic의 사용법 BackgroundMusic은 메뉴 표시 줄에 상주합니다. 그리고 개별 소프트웨어가 볼륨을 세밀하게 조정할 수 있습니다. 동영상 플레이어의 경우 음악을 일시 정지도 가능합니다. 두 음악이 섞여 버리고 일일이 볼륨을 설정하는 번거 로움입니다. BackgroundMusic을 미리 설정해두면, 신경쓸 일이 없을 것입니다. 음악을두고 작업하는 사람에게는 딱입니다. Backgr..