CSS-Loaders.com - 600+ 순수 CSS 로더 컬렉션
·
정보/유용한 사이트
https://css-loaders.com/ CSS Loaders: A collection of more than 600 loading animationsThe biggest collection of CSS-only loaders. More than 600 loading animations made by Temani Afif using a single element.css-loaders.com css-loaders.com은 단일 HTML 요소(보통)와 순수 CSS만으로 구현한 600개 이상의 로딩 애니메이션을 모아 보여주는 사이트입니다. 사용자는 클릭으로 CSS 코드를 복사해 즉시 프로젝트에 붙여넣을 수 있어 빠른 시제품 제작과 UI 개선에 유용합니다.🔍 핵심 특징방대한 컬렉션: 600개 이상(꾸준히 ..
ASCII Art - 터미널에 힙한 텍스트 그림 넣기
·
정보/유용한 사이트
최근에 oh my zsh를 설치하면서, 터미널을 설치하면 위와 같은 아스키 아트가 나온다.우리 회사에서도 flow api 서버에서는 터미널에서 서버를 실행하면 위처럼 아스키 아트가 나온다.그것보고 내가 예전에 LLM 서버에도 적용한적 있었다. 간단간단하게 만들었는데, 도커 터미널에서 보니 뭔가 깨지는 느낌이 들어서 아쉽다.AWS 서버에서 보면 예쁘게 잘 나온다. 그래서 많은곳의 터미널이 예뻐지고 힙해지길 바라며, 이 아스키 아트를 만들 수 있는 사이트를 공유해볼까 한다.https://patorjk.com/software/taag/ Text to ASCII Art Generator (TAAG) patorjk.com 이 링크로 들어가도 좋고, 구글에 ASCII Art Generator 라고 치면 나온다. ..
FossFlow - Isometric Diagramming Tool
·
정보/유용한 사이트
FossFlow는 워크플로우를 쉽고 직관적으로 관리할 수 있게 도와주는 오픈소스 툴이다. 처음엔 가볍게 둘러보려는 마음으로 살펴봤는데, 예상보다 더 깔끔하고 직관적인 인터페이스가 인상적이었다. 보통 워크플로우 관리 도구는 처음에 설정이 복잡하거나 학습이 오래 걸리는 경우가 많은데, FossFlow는 그런 어려움 없이 금방 사용할 수 있었다.사용 경험 및 주요 기능개발자 문서를 만들때 유용하겠다 싶었다. 보통 excalidraw를 이용해서 다이어그램을 그리거나 아키텍처를 그렸는데, 특히 아키텍처 그림을 그릴때 FossFlow 쓰는게 좋을것 같다고 생각이 들었다. 사용성에 있어서 드래그 앤 드롭 방식으로 간편하게 노드를 추가하거나 연결할 수 있는 부분이 매우 편리했다.복잡한 프로세스를 설정할 때도 흐름이 명..
fffuel - Free SVG generators, color tools & web design tools
·
정보/유용한 사이트
https://www.fffuel.co/ Free SVG generators, color tools & web design tools🚀 On fffuel you'll find a collection of free SVG makers to create cool backgrounds, seamless patterns, gradients, textures, shapes and blobs. Use the generated vector patterns directly on the web or in your favorite design app. 🤹‍♂️ The SVG andwww.fffuel.co 웹을 꾸미다가 SVG이면서 다양한 패턴이 필요해 찾다 좋은 사이트를 발견했습니다. 사이트에서 "fffuel은 그라데..
코드 예쁘게 이미지화 해주는 사이트 모음
·
정보/유용한 사이트
코드를 예쁘게 이미지로 만들어주는 툴 - carbon.now.sh — Wooncloud Blog (tistory.com) 코드를 예쁘게 이미지로 만들어주는 툴 - carbon.now.sh 제가 여러분께 보여드릴 코드가 있습니다. 아래에 그 코드를 공유하니 한번 봐주시기 바랍니다. const pluckDeep = key => obj => key.split('.').reduce((accum, key) => accum[key], obj) const compose = (...fns) => res => fns.re wooncloud.tistory.com 예전에 위의 링크와 같은 내용으로 포스트를 쓴 적이 있었습니다. 그런데 carbon 사이트보다 좀 더 예쁘고 유용한 사이트들이 많아서, 이번에 코드를 이미지화 해..
손으로 그린듯한 다이어그램 툴 - Excalidraw
·
정보/유용한 사이트
개요 Excalidraw는 손으로 그린듯한 러프한 다이어그램을 그리는 툴입니다. 이번에 추천하는 프로그램은 정말 정말 추천하는 프로그램 중 하나입니다. 많은 사람들이 PPT로 순서도를 그리죠. 하지만 PPT는 순서도를 그리는데 최적화되지 않기 때문에, 사용성에 불편함이 많이 있습니다. Excalidraw는 이런 순서도를 쉽게 그릴 수 있게 최적화되어 있습니다. 그리고 프로그램이 가볍고 브라우저 환경에서 사용합니다. 가장 좋은 기능은, 공유 세션을 만들어서 다른 사람을 초대해 함께 협업할 수 있는 것이 큰 장점입니다. https://excalidraw.com/ Excalidraw — Collaborative whiteboarding made easy Excalidraw is a virtual collabo..
코드를 예쁘게 이미지로 만들어주는 툴 - carbon.now.sh
·
정보/유용한 사이트
제가 여러분께 보여드릴 코드가 있습니다. 아래에 그 코드를 공유하니 한번 봐주시기 바랍니다. const pluckDeep = key => obj => key.split('.').reduce((accum, key) => accum[key], obj) const compose = (...fns) => res => fns.reduce((accum, next) => next(accum), res) const unfold = (f, seed) => { const go = (f, seed, acc) => { const res = f(seed) return res ? go(f, res[1], acc.concat([res[0]])) : acc } return go(f, seed, []) } 블로그에 이렇게 코드를 공유..
JSON 구조를 그래프로 보자! JSON Crack
·
정보/유용한 사이트
구글을 돌아다니다 재미있고 JSON 사용에 좋아보이는 사이트 하나 발견해서 포스팅하게 되었습니다. JSON을 입력하면 그 구조를 트리 그래프로 한눈에 확인이 가능한 유용한 사이트입니다. https://jsoncrack.com/ JSON Crack - Crack your data into pieces Simple visualization tool for your JSON data. No forced structure, paste your JSON and view it instantly. jsoncrack.com 이렇게 json을 입력하면 그 구조를 트리로 확인할 수 있는 사이트입니다. 개발자는 json을 사용하기에 편하지만, 기확자나 IT 관련 다른 직업은 json으로 데이터를 보는게 익숙하지 않을 수 있..
Tables Generator - HTML과 Markdown 테이블 쉽게 만들기
·
정보/유용한 사이트
본 글은 HTML과 Markdown을 사용하시는 분들에게 좀 더 쉬운 표 만드는 방법을 알려드리기 위한 포스팅입니다. HTML이나 Markdown을 사용하시다 보면 표 만드는 것이 얼마나 귀찮은지 알 수 있습니다. 저는 HTML은 쉽게 코딩으로 표를 작성할 수 있지만, Markdown은 건들기도 귀찮습니다. 깃허브에서 md 파일을 작성해 보셨나요? 그럴때 Tables Generator가 유용합니다. Tables Generator를 사용하면 에디터 없이 쉽게 표 작성하고 깃허브 md 파일에 표를 쉽게 작성이 가능합니다. Tables Generator https://www.tablesgenerator.com/