Skip to content

Commit 51a9864

Browse files
gaplo917gaplo917
committed
update a better readme
1 parent cd6f78e commit 51a9864

File tree

8 files changed

+165
-118
lines changed

8 files changed

+165
-118
lines changed

‎README.md‎

Lines changed: 30 additions & 117 deletions
Large diffs are not rendered by default.

‎gap-style-github-og-image-v2.png‎

-56.5 KB
Binary file not shown.

‎gap-style-github-og-image-v4.png‎

87 KB
Loading

‎gapstyle.kt‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
@file:Suppress("DEPRECATED_IDENTITY_EQUALS", "UNUSED_PARAMETER")
2+
3+
operator fun Monokai.plus(sth:Darcula): ColorScheme = TODO()
4+
5+
infix fun ColorScheme.with(sth: String) : ColorScheme = TODO()
6+
7+
infix fun ColorScheme.and(sth: Experience) : ColorScheme = TODO()
8+
9+
fun design(from: ColorScheme): ColorScheme = TODO()
10+
11+
interface ColorScheme
12+
interface Experience
13+
14+
object Monokai: ColorScheme
15+
object Darcula: ColorScheme
16+
17+
/**
18+
* Building a color schema which is designed with productivity-oriented and
19+
* semantic-highlighting-driven approach.
20+
*
21+
* ### Supported Languages
22+
* Kotlin, Java, Swift, Scala, Javascript, Typescript, C++, Go, Python, Android Logcat,
23+
* Android, PHP, HTML, XML, JSX, CSS/SCSS/SASS
24+
*
25+
* ### Supported IDE
26+
* IntelliJ IDEA, VSCode, Xcode
27+
*
28+
* @param experience Software Engineering Experience
29+
*/
30+
fun buildGapStyle(experience: Experience): ColorScheme {
31+
return design(from = Monokai + Darcula) with "Productivity" and experience
32+
}

‎preview/ide-intellij.png‎

163 KB
Loading

‎preview/ide-vscode.png‎

175 KB
Loading

‎spec/README.md‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
## GapStyle Specification
2+
3+
GapStyle is designed base on some key color of 'Darcula' and 'Monokai' theme.
4+
5+
GapStyle is a **_productivity-oriented_** and **_semantic-highlight-optimized_** designed
6+
color scheme with a [list of supported languages](#actively-maintain-language). Each
7+
supported language is tailor made and carefully tuned with
8+
[rationale](#gapstyle-specification).
9+
10+
The first draft of GapStyle was created on 2014 in PhpStorm 8. After that, Gap have spent
11+
10,000+ hours of using GapStyle scheme and at least 500+ hours of A/B testing, tuning and
12+
stablizing throughout the years.
13+
14+
So, GapStyle is a unique and opinionated color scheme that has converged
15+
[Gap's 5+ years of software development experience](https://github.com/gaplotech/bio)
16+
(learning, reading and writing on various programming languages) into
17+
productivity-oriented syntax hightlight GapStyle specification.
18+
19+
### Semantic Highlighting Optimized
20+
21+
#### Why we need highlighting?
22+
23+
When trying to understand what the code does, we usually first try to recognize its coarse
24+
structure. For that, we need a fast overview of the code. With that overview, we can
25+
decide where we want to continue concentrating on. Now the problem is, while building this
26+
overview, really many words have to be scanned. Actually reading all of them would take a
27+
long time, and would be very annoying. **Highlighting specific words in deterministic
28+
colors helps us to reduce that load**, by giving us familiar orientation points and
29+
patterns that our eyes can “hook” on, and allows us finding the specific position we’re
30+
searching faster.
31+
32+
So syntax highlighting helps us to keep an overview or finding the place we’re searching
33+
for. However, it cannot help us actually understanding the code, because by the pure
34+
definition of “syntax”, it can only highlight by what the code looks like, not by what the
35+
code means, since that requires wider knowledge.
36+
37+
#### Semantic Highlighting
38+
39+
Semantic Highlighting to overcome that limitation, deeper knowledge of the code is
40+
required. Semantic highlighting is an extension of syntax highlighting.
41+
42+
Different language has different richness of the semantic highlight implementation. Thus,
43+
general designed theme without dedicate tuning for each language don't utilize semantic
44+
highlighting well.
45+
46+
In contrast, GapStyle is giving different semantic a unique distinct colors and font
47+
style. Here is the result :
48+
49+
![semnatic-highlight-information-intellij](preview/semnatic-highlight-information-intellij.gif)
50+
51+
From my experience, GapStyle helps to improve my reading and writing code speed by:
52+
53+
- 30% when working on my own project
54+
55+
- 50% when studying other's source code and new languages
56+
57+
### Recommended Font
58+
59+
| Font | Platform | Ligature | Description | Action |
60+
| ---------------------------------------------------------------- | -------- | :------: | -------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------: |
61+
| [Hack JBM Ligatured](https://github.com/gaplo917/Ligatured-Hack) | IntelliJ | ✅ | Hack font with [JetBrains Mono](https://github.com/JetBrains/JetBrainsMono) ligature, built by Gap | [Download](https://github.com/gaplo917/Ligatured-Hack/releases) |
62+
| [Hack FC Ligatured](https://github.com/gaplo917/Ligatured-Hack) | IntelliJ | ✅ | Hack font with [FIRA Code](https://github.com/tonsky/FiraCode) ligature, built by Gap | [Download](https://github.com/gaplo917/Ligatured-Hack/releases) |
63+
| [Hack](https://github.com/source-foundry/Hack) | IntelliJ | - | Standard Hack font | [Download](https://github.com/source-foundry/Hack/releases) |
64+
| [Meslo LG DZ](https://github.com/andreberg/Meslo-Font) | Xcode | - | Solve Xcode no line-spacing settings | [Download](https://github.com/andreberg/Meslo-Font/releases) |
65+
66+
### Color Palette
67+
68+
| Syntax | Theme | Color | Philosophy |
69+
| ----------------------- | ------------------------------- | :-----------------------------------------------: | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
70+
| Default | Darcula | ![](https://placehold.it/15/A9B7C6/000000?text=+) | Monokai's default pure white color is too high contrast |
71+
| Keyword | Monokai | ![](https://placehold.it/15/F92672/000000?text=+) | |
72+
| String | Monokai | ![](https://placehold.it/15/E6DB74/000000?text=+) | |
73+
| Number | Monokai | ![](https://placehold.it/15/AE81FF/000000?text=+) | |
74+
| Class, Struct | Monokai | ![](https://placehold.it/15/66D9EF/000000?text=+) | |
75+
| Abstract Class | Derived from **Class** | ![](https://placehold.it/15/66D9EF/000000?text=+) | always affinitive to **Class**. Should be distinguished from **Class** but not too eye-catching. To remain overall harmony, just add slightly green on ![](https://placehold.it/15/66D9EF/000000?text=+) |
76+
| Interface, Protocol | Derived from **Abstract Class** | ![](https://placehold.it/15/0ED38C/000000?text=+) | should be distinguished easily from **Class/Abstract Class** but also should keep 'claim' with them. Add more green on ![](https://placehold.it/15/66D9EF/000000?text=+) |
77+
| Method | Monokai | ![](https://placehold.it/15/A6E22E/000000?text=+) | |
78+
| Parameter | Darcula | ![](https://placehold.it/15/FD971F/000000?text=+) | |
79+
| Local variable | Derived from **Parameter** | ![](https://placehold.it/15/CBAD96/000000?text=+) | always affinitive to **Parameter**. Should be distinguished from **Parameter** but not too eye-catching. To remain overall harmony, just substract some orange on ![](https://placehold.it/15/FD971F/000000?text=+) |
80+
| Annotation | Darcula | ![](https://placehold.it/15/BBB529/000000?text=+) | |
81+
| Comment | Darcula | ![](https://placehold.it/15/808080/000000?text=+) | |
82+
| Doc | Darcula | ![](https://placehold.it/15/629755/000000?text=+) | should be distinguished from **Comment** and **String** |
83+
| Enum, Constant | Custom | ![](https://placehold.it/15/4186F8/000000?text=+) | should be distinguished easily from **Parameter**, **Local variable**, **String**, **Number** |
84+
| Typealias, Generic Type | Custom | ![](https://placehold.it/15/507874/000000?text=+) | should be distinguished easily from **Interface/Class/Abstract Class** |
85+
86+
### Special Styling
87+
88+
| Syntax | Style | Philosophy |
89+
| ---------------------- | -------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
90+
| Keyword | **Bold** | Bold to standout and outweight the importance |
91+
| Singleton | **Bold** | preserve same color but also should be distinguished easily from non-singleton object |
92+
| Global/Static variable | **_Italic + Bold_** | preserve same color but also should be distinguished easily from **Parameter** and **Local variable** |
93+
| Smart cast | ![](https://placehold.it/15/2F4830/000000?text=+) (background color) | should be distinguishable easily |
94+
| Invalid Expression | ![](https://placehold.it/15/FF0000/000000?text=+) (underwaved line) | Inherited from Darcula |
95+
| Reassigned Variable | underscored | Inherited from Darcula |
96+
97+
### Special File Type
98+
99+
| File | Theme | Philosophy |
100+
| ---- | --------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
101+
| XML | Darcula | NOT to use HTML-like highlighting because IntelliJ use XML color scheme to highlight JSX's tags internally. Using Darcula original color can prevent from having too much Monokai's **Keyword** color |
102+
| JSON | Derived from **JavaScript** | **Property Key** color should align with **JavaScript** Object |

‎vscode/test/sample.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ module ModuleValidator {
1616

1717
/**
1818
* Constructor for <code>HasValidator</code> class
19-
* @param value for <i>validation</i>
19+
* @param valueParameter
2020
*/
2121
constructor(valueParameter: String) {
2222
this.myValue = valueParameter

0 commit comments

Comments
 (0)