gitsome

작정하고 만든 듯 합니다.

git 명령어는 150개가 넘고, github 관련된 정보들도 자유롭게 보고 싶고, 여러가지 git에 대한 요구사항들이 많습니다. 지금 소개하는 프로젝트는 이런 개발자들을 위한 편리성을 제공합니다.

2016/05/11 Today’s Best(679✰)

donnemartin/gitsome
_gitsome - A Supercharged Git/Shell Autocompleter with GitHub Integration._github.com


설치해 봅시다.

pip install을 실행합니다. 저의 경우는 pip3를 사용합니다.

$ sudo -H pip3 install gitsome

실행해 봅시다.

어떤 기능이 있을까요?

기본적으로 auto completion 기능을 제공합니다.

그리고 directory에 git 정보가 있을 때에 branch 정보를 같이 보여줍니다.

github관련 기능

깃헙 사용자 관련 기능도 제공합니다.

명령어 캐시까지

참 신통방통한 녀석이네요.

그 외에도 trending 서비스도 제공하는 등 여러가지 많은 기능들을 포함하고 있습니다.

By Keen Dev on May 10, 2016.

Exported from Medium on May 31, 2017.

flexbox-layout

layout 이쁘쥬?

flexbox 는 CSS의 새로운 Spec이 될 확률이 상당히 높은 레이아웃을 정의하는 방법입니다. 현재는 Draft를 지나 Candidate Recommendation 상태에 있습니다. react native 의 경우는 이 flexbox 로 컴포넌트들이 배치되게 되어 있습니다. 구글이 Android에서도 flexbox를 통해서 컴포넌트를 배치할 수 있도록 했습니다.

2016/05/10 Best Project(650✰)

google/flexbox-layout
_flexbox-layout - Flexbox for Android_github.com


설치하기

build.gradle 파일에 dependency를 아래와 같이 정의하고 layout.xml에서 사용하면 됩니다.

dependencies {  
compile 'com.google.android:flexbox:0.1.1'  
}

layout xml파일은 다음과 같은 형태를 띕니다.

<com.google.android.flexbox.FlexboxLayout  
xmlns:android="http://schemas.android.com/apk/res/android"  
xmlns:app="http://schemas.android.com/apk/res-auto"  
android:layout\_width="match\_parent"  
android:layout\_height="match\_parent"  
app:flexWrap="wrap"  
app:alignItems="stretch"  
app:alignContent="stretch" \>  

<TextView  
android:id="@+id/textview1"  
android:layout\_width="120dp"  
android:layout\_height="80dp"  
app:layout\_flexBasisPercent="50%"  
/\>  

<TextView  
android:id="@+id/textview2"  
android:layout\_width="80dp"  
android:layout\_height="80dp"  
app:layout\_alignSelf="center"  
/\>  

<TextView  
android:id="@+id/textview3"  
android:layout\_width="160dp"  
android:layout\_height="80dp"  
app:layout\_alignSelf="flex\_end"  
/\>  
</com.google.android.flexbox.FlexboxLayout\>

실행해보기

IDE를 켜고 activity_main.xml을 켜면 다음과 같은 화면이 나옵니다.

새로운 에뮬레이터 qemu 로 실행을 해 보겠습니다.

일단 flex direction에 대해서 확인해 볼 수 있는 예제입니다.

qemu 개좋아염

flexbox 자체에 대해서도 손쉽게 이해할 수 있는 예제들이군요.


Flexbox 에 대해서

flexbox 개요에 대해서는 서문에 약간 언급을 했구요. spec 은 아래에서 찾아 볼 수 있습니다.

CSS Flexible Box Layout Module Level 1
_This section is not normative. CSS 2.1 defined four layout modes - algorithms which determine the size and position of…_www.w3.org

정말 간단한 한글 블로깅은 아래에서 찾아볼 수 있습니다.

CSS - flexbox
_새로운 flexbox 레이아웃 모드는 우리가 CSS로 레이아웃을 잡는 방법을 재정의할 기세입니다. 아쉽게도 flexbox 규격이 최근에 상당히 많이 바뀌었기 때문에 각 브라우저마다 다른 식으로 구현돼 있습니다. …_ko.learnlayout.com

하지만 웹 관점에서 보자면 가장 이해하기 좋은 문서는 이 포스트 입니다.

A Complete Guide to Flexbox | CSS-Tricks
_The Flexbox Layout (Flexible Box) module (currently a W3C Last Call Working Draft) aims at providing a more efficient…_css-tricks.com

사용법이 다 달라요!

네, 아직은 javascript, react-native, android 에서 약간씩은 다르게 사용되고 있습니다. 하지만 기본적인 컨셉(flex-direction,wrap) 등은 같기 때문에 빨리 적응하면 할수록 더 좋을 듯 싶습니다.

이거 꼭 배워야 하나요?

지금 당장은 아닐 수 있습니다. 하지만 web component들이 일반화 되는 시점이 되면 대부분의 layout들은 웹과 native 모두 저렇게 바뀌지 않을까요?

swift의 경우도 github에 개인 프로젝트이기는 하지만 flexbox관련 프로젝트가 올라와 있네요

joshaber/SwiftBox
_SwiftBox - Flexbox in Swift, using Facebook’s css-layout._github.com

By Keen Dev on May 9, 2016.

Exported from Medium on May 31, 2017.