CSS3를 이용하면 놀라운 기능을 제공합니다. JavaScript는 브라우저에서 해제 될 수 있지만, CSS는 대부분 해제되지 않습니다. 따라서 JavaScript를 사용하지 않아도 움직인다는 것은 큰 장점이 있습니다. 이번에 소개하는 오픈 소스 소프트웨어는 CalcSS3, CSS3로 만든 iPhone 계산기 바람 응용 프로그램입니다. CalcSS3 사용법 CalcSS3의 화면입니다. 바로 그대로입니다. 단순히 외형을 재현했을뿐 아니라 실제로 계산을 할 수 있습니다. 버튼을 누르면 계산이 가능합니다. 그것도 JavaScript를 전혀 사용하지 않고 있습니다. 이것은 대단한 것이 아닐까요. 꼭보세요. CalcSS3는 HTML5 / CSS3 만든 오픈 소스 소프트웨어 (MIT License)입니다. PitP..
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..
지금은 클라우드 스토리지 서비스가 다수 존재합니다. 몇개의 서비스를 이용하거나, 회사와 개인 프로젝트 등 스토리지 서비스가 다른 분도 많은 것은 아닐까요. 그런 분들에게 추천하는 것이 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..
디자이너 분들에게 포트폴리오는 매우 중요합니다. 디자인과 사진을 통해 자신의 실력을 어필하여 전직이나 새로운 일의 획득으로 이어질 것입니다. 그리고 그 포트폴리오의 보이는 방법도 중요합니다. 작품이 좋아도 정작 포트폴리오 사이트가 이상하다면 실력이 의심되어 버립니다. 그래서 사용해보고 싶은 것이 gridfolio입니다. gridfolio 사용법 gridfolio는 그 이름과 같이 그리드 기반의 포트폴리오가 있습니다. 샘플은 다음과 같이됩니다. 이곳은 다른 예. 작품 사이의 취하는 방법이 소중하네요. gridfoliow를 사용하여 자신이 만든 작품을 예쁘게 나란히 볼 수 있습니다. 물론 포트폴리오도 자신의 작품으로 자작도 좋지만, 그런 수고를 걸 수 없거나 시간이없는 때에는 gridfolio를 사용해 보는..
- Total
- Today
- Yesterday
- SVG
- Web
- MIT 라이센스
- License MIT
- javascript
- GPL
- linux
- LGPL
- mit license
- 소프트웨어
- github에
- HTML5
- cui
- GUI
- 자바 스크립트
- Web API
- GPL v3
- Web 오픈 소스 JavaScript
- CMS
- 웹 API
- Open Source JavaScript
- Mac OSX
- 텍스트
- 오픈 소스
- software
- go
- 디자인
- GitHub
- node.js
- Web 오픈 소스
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |