Friday 21 April 2017

Release 0.2 - Long Overdue

Sorry I took a long time to actually submit an actual Release 0.2!

If you would indulge a short rant of excuses:

I spent about about two weeks trying to figure out how to set up Thimble without virtualization. I discovered that nobody bothered to attempt it because it's a total nightmare. Apparently nobody was doing that anyways.
Manual Setup Instructions

I then moved on to try adding some extensions for ESLINT. I kept running into issues where the build was diving deep into /node_modules, and was really messing up everything. I couldn't figure out if the problem was globbing syntax, and I put that issue on the back burner. I actually may try to solve that today as my 4th release if there is time left over.
Eslint Doesn't Check Extensions

Much later on, I went into Adobe/Brackets and looked at their issues. One sparked my interest, concerning antialiasing issues. I had never heard of it before so I took a look.

Basically, the rendering of fonts on different platforms and different screens gives viewers a certain look depending on how they are viewing the text. Antialiasing has been used of late in order to make the text look a little softer and hide the jagged edges that you will see if the screen display the pixels very accurately and crisply. The problem with using it in overkill is that other text begins to look washed out when you don't want it to. It's a balance that really depends on each individual selection of text, taking into account its font size and the view of other web elements around it.

The issue I worked on was:
Quick Edit Rendered with Grayscale Antialiasing

The problem was that it wasn't the regular text (like paragraphs or html source code) that was being blurred. The problem was actually inside the Quick Edit panel and the Right-Click pop up box. These fundamental Brackets components were being affected by Grayscale.

I spent a good deal of time (probably 5 hours) reading through the entire /src code. Not in depth of course, but I kept an eye out for certain key words relating to my issue while at the same time, just allowing myself to get a feel of what every folder accomplished in simple terms for the Brackets application.

I also used my cloned repository to do a massive search of the entire project for anything related to the -webkit-font-smoothing: antialiasing key words.

grep -r --color 'webkit-font-smoothing'

At the end of my search, I basically concluded that all the code that would affect the Brackets editor itself and contained the antialiasing references were found in just 3 files:

/src/view/ViewCommandHandlers.js
/src/styles/brackets.less
/src/styles/brackets_patterns_override.less

The last link was important, because it was the only source code that explicitly called for antialiasing when representing:
.uneditable-input
&::-webkit-input-placeholder

.btn

So I made the changes and switched them with subpixel-antialiasing which is the crisper way of rendering fonts.

Also I mentioned in my PR that Adobe's Brackets 1.10 had come out recently, so I was testing the Default settings without any code changes. I realized that the issue was not visible in 1.10.
However, a week earlier I had been playing around with their Brackets 1.9, and the antialiasing problem WAS there. 


So my conclusion is that the issue was somehow resolved 'accidently' because the administrators were not able to tell us that the problem was fixed already. They were unaware that it was fine in 1.10. One of the administrators spent time trying to point me in the right direction. At the same time, I still stand by my changes, because they are explicit patterns overriding the default Bootstrap implementations. I believe that I made a thorough search through the /src files relating to the functionality of Brackets editor, and found the only relevant references to antialiasing for the issue.
If the issue becomes a problem in later versions of Brackets, I'm sure I will be available to step in again. Here is my PR :)

PR for Issue #13189


No comments:

Post a Comment