Wednesday, October 21

my adventure into the land of understanding CSS 3 begins

Search Category Archives: Uncategorized .
Older posts The things you learn along the way to trying to design your own computer language.
June 7, 2018 So here are two things I sort of uncovered on the path towards designing my own computer language.
(1) Do you have headers or not.
Meaning is your computer language one that includes headers and some sort of mechanism for loading those headers.
If so, then a few things become true: You implicitly need two ways to define something: as an include or forward declaration , and as a concrete definition.
That implies you need some way to say in your header that “Foo” is a function and “Bar” is a global variable, but don’t define “Foo” or “Bar” here.
If your language is object-oriented, you then need a way to say (as Objective C does) “@interface” and “@implementation”, and (if your object-oriented language has single inheritance with interfaces or protocols) “@protocol”.
Note that in Java, you only have ‘class’ and ‘interface’; ‘class’ also doubles as a way to say “somewhere this class is defined, but I’m not defining it here.” But then, Java doesn’t have include files.
How do your include files work.
That is, are they loaded by a preprocessor into a single logical file, as in C or C++.
Or are they separate “definition” files which are compiled then referred to during the compilation of your source code.
This can also implicitly work with precompiled headers, but I’m thinking of a header language which is orthogonal to the source language.
Meaning you could theoretically design a language where the headers can only legally include stuff like “extern int foo();”, but cannot legally contain: int foo() { return 5; } Now if you don’t have headers, you need to figure out how to handle precompiling enough information from all of your source files so you can refer to the signature of your objects from other files.
That could be done, for example, through a two-pass compilation process: the first compiler pass only constructs the implicit header information (the names of globals, functions, classes, methods), then the second pass actually constructs the code, including other class declarations as required.
(2) Is your language strongly types or weakly typed.
One consequence of a strongly-typed language is that every expression in your language, you know the type of the inputs and the implicit type of the output.
You know, for example, your variables ‘a’ and ‘b’ are integers, and thus the result of addition will be an integer.
You know if you have different variables types for ‘a’ and ‘b’ (say, ‘a’ is an integer and ‘b’ is a real number), then your compiler has to implicitly handle the conversion of a to a real number prior to addition, and the result os a real number.
This puts a lot of things on your compiler.
You need a type representation which can represent all the types (including compound types) of your language, so you can differentiate between int **a and int *a, and so you know the result of dereferencing a variable.
On the other hand, if you have a weakly typed language–any variable can be pretty much any value–then this makes the design of the compiler far simpler.
But it makes your run-time engine do a lot more work: because a can be anything and b can be anything, the variables have to have an implicit type associated with them, and you your addition code has to know how to add any two objects together to get a reasonable result.
Of course weakly typed languages result in some weirdness; just see the various examples about addition of integers and strings in Javascript.
I’m sure I’ll learn more things along the way.
But these are the two that have bitten me in the past few weeks.
Uncategorized If you’re using iOS or Android notifications to push ads, I’m turning your notifications off.
May 14, 2018 Notifications are not an ad channel.
They’re a method for pushing notifications to users that require action, such as informing you of new messages or of issues that require action on your part.
And your damned ad is not my urgent issue that requires action.
I’m looking at you, Amazon Kindle, and you, Hotels.com app… Uncategorized I think my biggest problem is that no-one really knows how to do design anymore.
April 17, 2018 Design Plagiarism In this case Savov was writing about Huawei’s copycat wireless earbuds.
But the most telling example — which Savov himself has documented better than anyone else — is the iPhone X notch.
The notch is unquestionably the worst thing about the iPhone X design — it is a worthwhile compromise, but a severe and glaring one.
But it lends the iPhone X a distinctive look and can be easily copied, and so of course these companies are shamelessly copying it.
Anything they can copy from a successful Apple product, they do.
(How many PC laptops look like MacBooks?) Here’s the problem I have with all of this: no-one designs from the ground up anymore.
It’s all copying designs and marketing and strategy–without any real understanding of why the compromises or the reasons for the design decisions.
Now it’s not surprising that Chinese companies blatantly copy Apple.
The whole point is for people to walk around with devices that look like the elite leader without paying elite leader prices.
But so much design done by various companies ripping off each other have no fucking idea the first principles of design.
Meaning I don’t care if one company implements the functions and features from another device.
But if you don’t have an understanding of the way information flows between screens, the concepts behind affordances and giving rapid and timely feedback to users, to concepts such as the magical number 7, and other design issues like giving users feedback for processes that take longer than 1/4th of a second to complete and a way to cancel operations that take longer than a second–then the best you can do is make a very piss poor copy.
It’s all cargo cult development.
And the user suffers as a result.
The sad part is that many of these companies would be better off forging their own direction, copying concepts from the 1990’s, than copying from Apple without understanding why those design decisions were made.
Uncategorized OCYacc/OCLex announcements.
April 13, 2018 I currently have been tinkering with a compiler tool which provides Yacc and Lex-like functionality (with an LR(1) compiler parser) in the OCYacc/OCLex tools.
Basically I needed a version of yacc and lex which could build a compiler, but generate a re-entrant Objective-C class.
Well, recently I’ve been adding a code generator to generate C++ code.
It’s still pretty experimental, but the code is now checked into GitHub.
Check it out.
More information can be found here.
Uncategorized When working on a large project, take the time to document the internals.
February 15, 2018 So I’m working on a very large project which I intend to discuss elsewhere at a later date.
But it involves a lot of code–and is quite easily the largest thing I’ve ever considered taking on to date.
And I find I go for a few weeks making serious headway–then find myself spending less and less time coding and more and more time surfing the web.
I think it’s because I’ve hit a roadblock; the project has gotten so large I can no longer see the forest for the trees.
(And hell, at the level some of this code exists, I can’t see the damned trees for the individual leaves.) I’ve discovered a secret, however.
Document.
When I start forgetting what’s there, it’s good to stop at a good stopping point, and take a survey of what’s there.
Nothing fancy; just a simple iteration of what’s where at a directory level helps worlds to get your bearings.
Because otherwise, it’s easy to get lost when you’re looking at several months worth of work, with over a hundred source files and tens of thousands of lines of code, wondering “what’s next.” And in the documentation you even find things that perhaps you forgot to deal with.
Corner cases you thought “I’ll deal with you tomorrow”–only for tomorrow to never come.
So today’s a documentation day.
It’s healthy because it reminds me of what I’ve done.
It also reminds me of what I still need to do.
And it reminds me of things I could do in the future.
Uncategorized Bad User Interfaces.
January 15, 2018 Hawaii missile alert: How one employee ‘pushed the wrong button’ and caused a wave of panic Around 8:05 a.m., the Hawaii emergency employee initiated the internal test, according to a timeline released by the state.
From a drop-down menu on a computer program, he saw two options: “Test missile alert” and “Missile alert.” He was supposed to choose the former; as much of the world now knows, he chose the latter, an initiation of a real-life missile alert.
Well, there’s your problem right there.
Can we require more user interface designers to read Designing with the Mind in Mind before building interfaces like this one.
Uncategorized You can learn a lot about something by trying to implement the specification.
January 5, 2018 One thing I never really understood about CSS and HTML was how display layout actually works.
All of the tutorials and documents I’ve encountered felt to me like the end of a long game of telephone: how things work was garbled, and replaced with a list of half-baked recipes that sort of worked some of the time.
But after spending the last few weeks in a deep dive in the CSS specifications I’ve figured out a few things which I wanted to share here.
At the top of the visual formatting model is a trio of CSS properties which control how a piece of HTML is presented to the user–including if the contents are in a block or is wrapped like text, if it floats to the left or to the right, or if it floats around on the screen, are the following properties: Display which indicates how a piece of HTML is displayed.
Position which indicates how a box is positioned within its parent box or within the page.
Float which indicates if a cell should float to the left or the right of its parent box.
These three properties are probably the most important properties in determining how a piece of HTML is displayed on the screen.
In fact, an entire chapter of the CSS2 spec (on which CSS3 is based) is devoted to these three properties and how they interact.
In fact, they’re so important that there is an algorithm for resolving conflicts between these three properties.
From these three properties we determine what other HTML properties are valid and how they work.
Now on top of this model we also have the box dimensions.
Everything within HTML ultimately renders to a box: an inline box (which may represent a run of text that can be word wrapped) or into a block–a rectangular region like an image or a table.
All boxes including inline text is subject to the box dimension properties.
This has the interesting side effect that you could (for example) extend a box around a bunch of words and have those boxes subject to word wrapping.
When considering display properties, there are only a handful which are significant.
(The rest revolve around table formatting.) Block causes a chunk of HTML to be presented as a box.
A box can contain inline flowed text (such as a paragraph), or it can contain a bunch of other boxes, which are generally stacked top to bottom.
Inline which represents inline objects positioned horizontally on the screen, such as inline text.
If you want to show a small image inline with text, you’d set ‘display:inline’ on the image tag.
None causes an object not to appear on the screen.
inline-block allows you to format a block of content and present that content inline when formatting text.
For example, you can use an inline block to display a fraction.
The float property is relatively self-evident.
But the position property less so.
As far as I can figure, the position properties are: static uses normal formatting; the box is laid out according to the default rules.
fixed positions the box on the screen in absolute coordinates.
(A fixed box can be fixed to the top of the screen, for example.).
absolute positions the box at a specified location relative to the parent box.
relative marks an object as being repositionable after it is placed according to normal layout rules.
The “absolute”, “relative” and “fixed” rules have a second property in that they define the container block for children with position: absolute.
Absolute positioned elements and relative positioned elements are positioned relative to their location inside the position flow; the only difference is that absolute positioned elements are not first laid out using normal formatting.
(Source) Putting all this together, this allows you to do things like float text relative to other text in a paragraph, such as: This is a — test.
It’s interesting that these three properties are the root properties in the layout algorithm, yet they seem to be treated as if they were just incidental (and apparently not well understood) properties in everything I’ve read.

Uncategorized CSS3 is a hot mess

January 2, 2018 Stupid me, I thought this would be relatively easy for someone of my skill set.
So I want to build an application which can display ePub files.
Step 1, of course, is to look at the ePub specification, which is simple enough: an ePub file is basically a zip file with a particular format.
Building a zip file reader is relatively straightforward, and parsing through the ePub file specification really doesn’t take a lot.
As verbose as the ePub file specification is, really you only need to do a handful of things to get at the contents of the file: 1.
First, you build a piece of code which allows you to randomly access the contents of the zip file.
If you are doing this in Java that’s pretty easy; in Objective C that requires a little more finesse.
But at the end of the day you build a zip file scanner which scans for the table of contents, load that into a structure, and use the table of contents to find the data in the file containing the compressed file structure.
There are plenty of sources and examples of reading the zip file structure; Wikipedia gives a good overview, the file format is documented fairly well, and there are examples on how to parse and decompress the file.
2.
You need to load the META-INF/container.xml file from the zip file, and parse the contents.
The contents are well-defined, and generally contain a single top level .opf file reference which you can then use to parse the contents of the ePub book.
The file generally looks like this: So just find the rootfile object in the rootfiles object, grab the full-path attribute, and away you go.
(Now ePub books can have multiple oebps package files, and there is a method for parsing through each of them and offering the “version” of the book to display to the user.
This may be used, for example, with comic books where you may want a text version with images, and a SGML version with illustrator images.) But parsing and displaying that is beyond the scope of this post.
3.
You then parse the .opf file, which is a file that contains metadata, a manifest, a spine (that is, a list of the chapters in the book), and potentially a table of contents of some form.
For ePub 3 (which is what I’m interested in parsing), you can grab the author and title of the book from the metadata.
(Generally the name of the book is under metadata/dc:title, and the author under metadata/dc:creator, though there are exceptions; [see the specs](http://www.idpf.org/epub/31/spec/epub-packages.html#sec-metadata-elem) on how to handle multiple authors or subtitles.) For ePub 3, the table of contents can be found by scanning the manifest for an which has the property “nav” set.
So, for our example file with a manifest: The table of contents is the file toc.xhtml, which, while it is in XHTML format, must honor the format specified in the ePub specification.
This means the xhtml table of contents can be parsed easily into a table of contents data structure and presented as, for example, a drop-down menu, rather than being forced to display the table of contents as an HTML page.
The spine XML contains the actual contents of the ePub book, and presents a list of item references referring to files in the manifest for display.
A spine looks like: Each item contains an idref attribute which refers to an id of an item in the manifest.
The spine is in the presentation order of the book.
And notice that each manifest item contains an href; that is a relative reference within the zip file for the contents of each chapter.
The manifest also contains references for all the images and other contents, again, relative to the location of the original .opf file.
There are other elements of the ePub file, including an .ncx file and other non-standard parts; they exist either for ePub 2 compatibility or to provide extra metadata for certain readers, such as iBooks specific information.
At the bottom of the stack, an ePub file is essentially an HTML web site in compressed forms, where individual pages (generally, chapters) should be presented in a certain order.
You would not be wrong, by the way, to unzip all of this into a directory, find the table of contents and open that in a browser.
If you want to get fancy, you can also add a “previous chapter”/”next chapter” button somewhere in your UI to progress through the web pages in the spine, or you can synthesize a single page that the user can use for navigation.
However, suppose you’re me and you don’t want to display your book as a series of very long web pages the user scrolls through, but as a series of pages–like the Kindle app or the iBooks app.
Well, that’s where my adventure down the rabbit hole comes into play.
As it turns out, on iOS the UIWebView has the ability to display web sites in “page” mode.
But this doesn’t quite do the right thing.
You get formatting errors all over the place, and fundamentally you want to have greater control over the layout of individual pages than UIWebView (which is deprecated in favor of a new web browser technology which does not do page-level layout), you need to lay the pages out yourself.
And ePub says that its pages are XHTML, using the HTML 5 specification (meaning you can parse the XHTML pages using an XML parser), and formatted with CSS 3.
And thus, my adventure into the land of understanding CSS 3 begins.
If you’re like me, the first thing you do when you scan the CSS 3 specs is you look for a document which describes the syntax of the file, and you implement it.

Which is what I did: I found the CSS 3 syntax specification

implemented the tokenizer or lexical parser (which I did by hand and was no more complex than most tokenizers), and started in on the syntax parser.
It started out fine.
Section 4 of the Syntax document turned out to be incredibly easy to implement: section 4.3 pretty much holds your hand and tells you in prose exactly what to implement in code.
(I’m sure there are some optimizations that can be applied here, but if you’re like me, you want to see something work before you go back and optimize.) Then I got to Section 5, and did the same thing.
And that’s where the ground started to give way into quicksand.
First, notice the multiple entry points.
Okay, this makes sense since CSS can be in its own separate file, embedded in a