A comprehensive tutorial — This is the first part of a comprehensive tutorial on constructing a JavaScript linter. A linter is a tool for checking source code. We will see the fundamental concepts and the source code of a real linter written in JavaScript, including algorithms for the tricky parts. Note: dirtyrat is the…

The right architecture for handling mouse and keyboard events — Simple Application The browser (JavaScript) is very helpful about handling user input. For example: var doneButton = document.getElementById(“done”) doneButton.onclick = function () { sendDataToServer() } This is a simple and straightforward code that works perfectly well for the following context. The user spends a minute filling out a form with his data.

Part 7: Mosaic Generator & Releasing The Library — You can read the previous article here. The Library Finally, today I am releasing the GoodbyeHtml library. This is the link for the library in GitHub. The Application (Demo) Today, I would like to explain more concepts, talk about the browser inside a browser, but I am a bit annoyed because of readers that keep…

Part 6: The Boxes & Beginning A Real Application — You can read the previous article here. Introduction The content I’ve promised for this article became too big. I had to split it. Also, I’ve spent more time than I expected writing the code. I made a LOT of refactorings, searching for the best design/greatest utility. I had finished the code…

My Fix For The Web Developer Hell — Introduction “Goodbye, HTML. Hello Canvas!” is an article series that got a lot of attention. And upset some folks. The articles show how to avoid HTML/CSS problems by easily (there is a nice library) constructing web pages only with the canvas. Of course, my proposal was not to use a canvas-based…

Part 5: The Dynamic Architecture & The Initialization — You can read the previous article here. Reviewing Well, in the demo of the last article we reacted to the mouse down event on the widgets by changing colors of the widgets and by changing the order of the virtual layers (which means changing the CSS z-Index of each canvas —…

Part 4: The Static Architecture & Simple Mouse Event Demo — You can read the previous article here. The Goals For The Library I am constructing the library as I am writing the articles. I have some goals for the library and for the application made with it: the library must be free of bugs the library must be very easy to understand/remember/use the library must…

Part 3: The Overall Strategy & The Basic Architecture — You can read the previous article of this series here. The Library I must thank a lot to all the readers that replied criticizing the subject of this article series because their posts made me improve the articles. …

Part 2: Printing characters on canvas — You can read the previous article of this series here. Important Edit: The reader Mike Bender, wrote this reply: The premise of this article, that “the canvas function fillText… has poor quality”, is incorrect. You can absolutely draw text on a canvas with fillText and have crisp text with subpixel rendering. …