はてなブックマーク

Exploring canvas drawing techniques Table Of Contents (toggle) Basics Simple pencil Smooth connections Edge smoothing with shadows Storing points Storing points with shadow Edge smoothing with radial gradient Bezier curves Brush, Fur, Pen Fur (rotating strokes) Pen (variable segment width) Pen #2 (multiple strokes) Thick brush Sliced strokes Sliced strokes with opacity Multiple lines Multiple line

I’ve been recently working on optimizing performance of a so-called one-page web app. The application was highly dynamic, interactive, and was heavily stuffed with new CSS3 goodness. I’m not talking just border-radius and gradients. It was a full stack of shadows, gradients, transforms, sprinkled with transitions, smooth half-transparent colors, clever pseudo-element -based CSS tricks, and experim

Understanding the concept of code refactoring is one of the best things you can do to become a better programmer [1]. It all started a couple of weeks ago when I — once again — looked at the growing, stinky mess that my code has become. It’s a few thousand LOC app with various interactive widgets and controls all on one page. Even though a lot of functionality was encapsulated in these separately-

Javascript quiz. ES6 edition. 4 November 2015 933 words The poor, misunderstood innerText 1 April 2015 3706 words Know thy reference 11 December 2014 2758 words Refactoring single page app 1 September 2014 4520 words HTML minifier revisited 28 July 2014 1443 words JSCritic 27 March 2014 1346 words State of function decompilation in Javascript 14 January 2014 1832 words Moving from Wordpress to Git

How eval works Eval’ing in global scope Indirect eval call. Theory. Indirect eval call examples. Indirect eval call. In practice. window.execScript window.eval eval context in webkit new Function setTimeout Script insertion The problem with `window.execScript || eval` Feature testing -based approach Global eval in libraries Summary David Flanagan recently wrote about global eval() in Javascript, p

`instanceof` considered harmful (or how to write a robust `isArray`) Checking types in Javascript is well known as a pretty unreliable process. Good old typeof operator is often useless when it comes to certain types of values: typeof null; // "object" typeof []; // "object" People often expect to see something like “null” in the former check and something like “array” in the latter one. Fortunate

Why subclass an array? Naive approach Problems with naive approach Special nature of arrays Function objects and [[Construct]] The importance of array special behavior Existing solutions ECMAScript 5 accessors to the rescue [[Class]] limitations Does [[Class]] matter? Wrappers. Direct property injection. Wrappers. Prototype chain injection. Summary Subclassing an array in Javascript has never been

One of the pain points of feature testing in client-side scripting is that for event support. DOM doesn’t really specify any means to detect exactly which events browser understands and can work with. If you’d like to know if a browser supports, say, “dblclick” event, you’re pretty much out of luck. This is probably the reason why so many scripts on the web employ unreliable browser sniffing in su

3rd preview of IE9 was released yesterday, with some amazing additions, like canvas element and an extensive ES5 support. I’ve been digging through it a little, to see what has changed and what hasn’t — mainly looking at JScript and DOM. I posted some of the findings on twitter, but want to also list them here, as it’s not very convenient to share code snippets in 140 characters. Referencing it al

I was recently surprised to find out how little the topic of DOM extensions is covered on the web. What’s disturbing is that downsides of this seemingly useful practice don’t seem to be well known, except in certain secluded circles. The lack of information could well explain why there are scripts and libraries built today that still fall into this trap. I’d like to explain why extending DOM is ge

Theory Type of code Execution context Activation object / Variable object Property attributes Built-ins and DontDelete Undeclared assignments Firebug confusion Deleting variables via eval Browsers compliance Gecko DontDelete bug IE bugs Misconceptions `delete` and host objects ES5 strict mode Summary A couple of weeks ago, I had a chance to glance through Stoyan Stefanov’s Object-Oriented Javascri

Why clean markup? Markup smells Additional optimizations Agressive optimizations When things go wrong Antipatterns Tools Future considerations Why clean markup? Client-side optimization is getting a lot of attention lately, but some of its basic aspects seem to go unnoticed. If you look carefully at pages on the web (even those that are supposed to be highly optimized), it’s easy to spot a good am