Kitek's Page Blog programisty / webdeveloper'a

f.lux

f.lux jest małym programem umożliwiającym zmianę kolorów wyświetlanych na ekranie w zależności od naszej lokalizacji i pory dnia. Przez dzień zastosowany jest wysoki kontrast, natomiast wieczorem kolory stają się bardziej stonowane. Dostępnych jest kilka gotowych ustawień, ale jeżeli nie odpowiadają one naszym upodobaniom, możemy wprowadzić własne. Polecam.

Flux - okno programu

Eclipse dark theme

Od zawsze byłem zwolenikiem ciemnego tła i jasnego tekstu w IDE. Mam wrażenie, że dzięki temu oczy męczą się wolniej i pracuje się przyjemniej. W niniejszym poście chciałbym polecić MoonRise UI Theme zmieniające kolorystycznie całego Eclipse’a.

Instalacja

Do poprawnej instalacji i działania wymagany jest Eclipse 4.2+. Istnieją trzy sposoby instalacji motywu, wg. mnie najłatwiejszym jest opcja Install New Software... z menu Help.

Eclipse instalacja nowego oprogramowania

https://raw.github.com/guari/eclipse-ui-theme/master/com.github.eclipseuitheme.themes.updatesite

W nowym okienku wpisujemy powyższy URL, zaznaczamy checkbox przy Eclipse UI themes, wciskamy Next, Finish, a następnie restartujemy Eclipse’a. Po uruchomieniu programu wchodzimy w preferencje, a następnie Window > Preferences > General > Appearance. Z listy wybieramy MoonRise (standalone).

Eclipse apperance

Po ponownym restarcie Eclipse’a powinien zostać zastosowany nowy szablon kolorystyczny.

Schemat kolorów dla tekstu/składni kodu

Do nowego ciemnego theme polecam zastosować odpowiedni schemat kolorów tekstów. Do tego potrzebne będzie zainstalowanie The Eclipse Color Theme Plugin. Postępujemy podobnie jak przy poprzedniej instalacji podająć URL: http://eclipse-color-theme.github.io/update/. Po zainstalowaniu pluginu ściągamy motyw RainbowDrops.xml i importujemy go na stronie ustawień: Window > Preferences > General > Appearance > Color Theme (lub wybieramy inny odpowiadający naszym gustom).

Ulepszenia

Wykorzystując powyżej omówione schematy kolorystyczne zauważyłem kilka elementów wymagających poprawy:

  • Zmodyfikowane pliki na liście Package Explorer’a (Git)

Eclipse modified files in Package Explorer

  • LogCat (Android)

Eclipse logcat colors

Sublime Text 2 - snippets

Jak wspomniałem w moim poprzednim poście Sublime Text 2 to pozornie prosty edytor plików tekstowych. Pozory mogą mylić. Poniżej przedstawiam potężne narzędzie jakim są “snippet’y” wbudowane w omawiany edytorek.

Snippets w Sublime Text 2 to proste skrypty uruchamiane po wpisaniu określonych znaków i wciśnięciu klawisza [TAB]. Umożliwiają wstawienie w miejscu gdzie aktualnie znajduje się kursor zdefiniowanego wcześniej fragmentu tekstu (np.: szablon pustej funkcji / metody, konstrukcja programistyczna, fragment HTML’a). Dodatkowo pozwalają na podanie miejsc w tekście po których będziemy mogli się poruszać wciskając przycik tabulatora.

Tworzenie nowych Snippet’ów

Tworzenie rozpoczynamy wybierając z menu “Tools” -> “New Snippet…“. Po kliknięciu zostanie utworzony nowy dokument o podobnej treści:

<snippet>
<content><![CDATA[
Hello, ${1:this} is a ${2:snippet}.
]]></content>
	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
	<!-- <tabTrigger>hello</tabTrigger> -->
	<!-- Optional: Set a scope to limit where the snippet will trigger -->
	<!-- <scope>source.python</scope> -->
</snippet>

Sekcja “content” reprezentuje tekst, który zostatnie wstawiony w wybranym przez nas miejscu. Należy pamiętać, że wszelkie białe znaki również zostaną umieszczone. Dynamiczne parametry określamy przez dyrektywy {$numerek} (np. ${1}, ${2}). W przypadku gdy chcemy posiadać wartość domyślną argumentu wstawiamy ${1:Wartość domyślna}.

Dodatkowo możemy zdefiniować tzw. tabTrigger czyli kombinację znaków + [TAB] uruchamiającą nasz snippet (np.: <tabTrigger>div</tabTrigger>).

Ostatnią opcją jest scope, który określa w jakiego typu dokumentach zastosowany może zostać snippet:

  • ActionScript: source.actionscript.2
  • AppleScript: source.applescript
  • ASP: source.asp
  • Batch FIle: source.dosbatch
  • C#: source.cs
  • C++: source.c++
  • Clojure: source.clojure
  • CoffeeScript: source.coffee
  • CSS: source.css
  • D: source.d
  • Diff: source.diff
  • Erlang: source.erlang
  • Go: source.go
  • GraphViz: source.dot
  • Groovy: source.groovy
  • Haskell: source.haskell
  • HTML: text.html(.basic)
  • JSP: text.html.jsp
  • Java: source.java
  • Java Properties: source.java-props
  • Java Doc: text.html.javadoc
  • JSON: source.json
  • Javascript: source.js
  • BibTex: source.bibtex
  • Latex Log: text.log.latex
  • Latex Memoir: text.tex.latex.memoir
  • Latex: text.tex.latex
  • LESS: source.css.less
  • TeX: text.tex
  • Lisp: source.lisp
  • Lua: source.lua
  • MakeFile: source.makefile
  • Markdown: text.html.markdown
  • Multi Markdown: text.html.markdown.multimarkdown
  • Matlab: source.matlab
  • Objective-C: source.objc
  • Objective-C++: source.objc++
  • OCaml campl4: source.camlp4.ocaml
  • OCaml: source.ocaml
  • OCamllex: source.ocamllex
  • Perl: source.perl
  • PHP: source.php
  • Regular Expression(python): source.regexp.python
  • Python: source.python
  • R Console: source.r-console
  • R: source.r
  • Ruby on Rails: source.ruby.rails
  • Ruby HAML: text.haml
  • SQL(Ruby): source.sql.ruby
  • Regular Expression: source.regexp
  • RestructuredText: text.restructuredtext
  • Ruby: source.ruby
  • SASS: source.sass
  • Scala: source.scala
  • Shell Script: source.shell
  • SQL: source.sql
  • Stylus: source.stylus
  • TCL: source.tcl
  • HTML(TCL): text.html.tcl
  • Plain text: text.plain
  • Textile: text.html.textile
  • XML: text.xml
  • XSL: text.xml.xsl
  • YAML: source.yaml

Jeżeli nie możesz znaleźć swojego typu pliku, możesz to sprawdzić wciskając kombinację klawiszy: [ctrl] + [shift] + [p] na Macu lub [ctrl] + [shift] + [alt] + [p] na Windows. Na dolnym pasku po lewej stronie zostanie wyświetlony scope aktualnie otwartego pliku.

Tak przygotowany plik zapisujemy z roszerzeniem .sublime-snippet w katalogu:

na OSX:
/Users/{userName}/Library/Application Support/Sublime Text 2/Packages/User

na Windows:
C:\Users\{userName}\AppData\Roaming\Sublime Text 2\Packages\User

Przykładowe snippets dla kramdown

Wyśrodkowany obrazek (mc-ic.sublime.snippet)

<snippet>
<content><![CDATA[
{:.center}
![${2:alt}](${1:url})
]]></content>
	<tabTrigger>ic</tabTrigger>
	<scope>text.html.markdown</scope>
</snippet>

Kod źródłowy (mc-ss.sublime.snippet) - ps. usuń spacje

<snippet>
<content><![CDATA[
{ % highlight ${1:html} % }${2:tutaj wstaw kod}{ % endhighlight % }
]]></content>
	<tabTrigger>ss</tabTrigger>
	<scope>text.html.markdown</scope>
</snippet>

Link na zewnątrz (md-lo.sublime.snippet)

<snippet>
<content><![CDATA[
[$1]($2){:target="_blank"}{:rel="nofollow"}
]]></content>
	<tabTrigger>lo</tabTrigger>
	<scope>text.html.markdown</scope>
</snippet>