Create README.md for css-typed-om by nainar · Pull Request #622 · w3c/css-houdini-drafts

nainar · 2018-02-01T09:45:30Z

@darrnshn PTAL? Thanks!

darrnshn

Cool, looks good overall. Just some small suggestions and typos.

darrnshn · 2018-02-01T10:08:21Z

@@ -0,0 +1,117 @@
+# CSS Typed OM Explained
+
+CSS Typed OM is the extensable API for the CSSOM that reduces the burden of manipulating a CSS propeerty's value via string manipulation. It does so by exposing CSS values as typed JavaScript objects which help you circumvent the browser's CSS parser.


s/extensable/extensible

s/propeerty/property

not just the browser's CSS parser, but also JavaScript CSS parsers. Maybe something like "typed JavaScript objects to avoid string parsing", or even just "typed JavaScript objects rather than strings".

darrnshn · 2018-02-01T10:11:36Z

+
+## Motivation
+
+The benefits of CSS Typed OM are as follows:


s/are as follows/include :P

Done. Sorry forgot to send this before.

darrnshn · 2018-02-01T10:13:34Z

+
+The benefits of CSS Typed OM are as follows:
+* Allows the performant manipulation of values assigned to CSS properties. 
+* Being able to write more maintainable code:


Maybe collapse this into two top level bullet points so it looks like there's more? :P

darrnshn · 2018-02-01T10:14:44Z

+
+### Getting a property's value
+
+To get specified and computed values for CSS properties of an element in CSSOM we get them via accessing them of the `.style` attribute on an element and the `getComputedStyle()` object respectively. 


Maybe somehow indicate that this is the old way?

darrnshn · 2018-02-01T10:15:21Z

+
+To get specified and computed values for CSS properties of an element in CSSOM we get them via accessing them of the `.style` attribute on an element and the `getComputedStyle()` object respectively. 
+
+In Typed OM we get them of `StylePropertyMaps` on elements. 


darrnshn · 2018-02-01T10:27:15Z

+## Future Capabilities
+
+The current specification doesn't have support for the following, however they are under consideration for Typed OM Level 2:
+* Support for shorthand properties,


I think we're gonna get shorthand for Level 1

darrnshn · 2018-02-01T10:27:31Z

+
+The current specification doesn't have support for the following, however they are under consideration for Typed OM Level 2:
+* Support for shorthand properties,
+* Support for gradients,


I'm planning to do gradients for level 1.

darrnshn · 2018-02-01T10:28:14Z

+The current specification doesn't have support for the following, however they are under consideration for Typed OM Level 2:
+* Support for shorthand properties,
+* Support for gradients,
+* Corresponding FontFaceValue for `@font-face` rules,


I would just put this as part of the next list as Fonts. I don't know if we're going to represent actual CSS rules as objects.

darrnshn · 2018-02-01T10:29:10Z

+* Corresponding FontFaceValue for `@font-face` rules,
+* Support for the following:
+	* Colors
+	* URLs


URLs that are not images, since those are CSSImageValues.

darrnshn · 2018-02-01T10:29:48Z

+	* Counters, 
+	* etc.
+
+## Conclusion


Maybe name this "Try it out!" or something exciting 🎉

plinss · 2018-02-01T10:39:49Z

FWIW, if you name the file "README.md" instead of "EXPLAINER.md" you get an icon on the drafts home page linking to it (the "ⓘ").

nainar

darrnshn@ made the changes you asked for.

nainar · 2018-02-01T10:39:21Z

@@ -0,0 +1,117 @@
+# CSS Typed OM Explained
+
+CSS Typed OM is the extensable API for the CSSOM that reduces the burden of manipulating a CSS propeerty's value via string manipulation. It does so by exposing CSS values as typed JavaScript objects which help you circumvent the browser's CSS parser.


nainar · 2018-02-01T10:39:35Z

+
+The benefits of CSS Typed OM are as follows:
+* Allows the performant manipulation of values assigned to CSS properties. 
+* Being able to write more maintainable code:


nainar · 2018-02-01T10:41:30Z

+
+### Getting a property's value
+
+To get specified and computed values for CSS properties of an element in CSSOM we get them via accessing the
6D5E
m of the `.style` attribute on an element and the `getComputedStyle()` object respectively. 


nainar · 2018-02-01T10:42:05Z

+
+To get specified and computed values for CSS properties of an element in CSSOM we get them via accessing them of the `.style` attribute on an element and the `getComputedStyle()` object respectively. 
+
+In Typed OM we get them of `StylePropertyMaps` on elements. 


nainar · 2018-02-01T10:43:10Z

+
+To get the specified height of an element we would use the following JS:
+```
+element.attributeStyleMap.get('height');


nainar · 2018-02-01T10:48:02Z

+## Future Capabilities
+
+The current specification doesn't have support for the following, however they are under consideration for Typed OM Level 2:
+* Support for shorthand properties,


nainar · 2018-02-01T10:48:07Z

+
+The current specification doesn't have support for the following, however they are under consideration for Typed OM Level 2:
+* Support for shorthand properties,
+* Support for gradients,


nainar · 2018-02-01T10:48:10Z

+The current specification doesn't have support for the following, however they are under consideration for Typed OM Level 2:
+* Support for shorthand properties,
+* Support for gradients,
+* Corresponding FontFaceValue for `@font-face` rules,


nainar · 2018-02-01T10:48:26Z

+* Corresponding FontFaceValue for `@font-face` rules,
+* Support for the following:
+	* Colors
+	* URLs


nainar · 2018-02-01T10:48:45Z

+	* Counters, 
+	* etc.
+
+## Conclusion


nainar · 2018-02-01T10:52:29Z

@plinss thanks - will change the name!

darrnshn

LGTM, but get Tab to take a look.

darrnshn · 2018-02-01T10:54:04Z

@@ -0,0 +1,116 @@
+# CSS Typed OM Explained
+
+CSS Typed OM is the extensible API for the CSSOM that reduces the burden of manipulating a CSS property's value via string manipulation. It does so by exposing CSS values as typed JavaScript objects rather than strings.


nit: maybe s/the/an? It's probably not the extensible API.

darrnshn · 2018-02-01T10:56:38Z

+### Getting a property's value
+
+In CSSOM land:
+To get specified and computed values for CSS properties of an element in CSSOM we get them via accessing them of the `.style` attribute on an element and the `getComputedStyle()` object respectively. 


maybe a comma between "in CSSOM" and "we get them"?

darrnshn · 2018-02-01T10:56:49Z

+element.computedStyleMap().get('height'); // returns a CSSUnitValue
+```
+
+### Changing a propert's value


s/propert/property

darrnshn · 2018-02-01T10:58:37Z

+#### CSSResourceValue
+
+[CSSResourceValue](https://drafts.css-houdini.org/css-typed-om-1/#resourcevalue-objects) objects represent CSS values that require an asynchronous network fetch. Hence, they also describe the status the resource is in. Properties with image values (e.g. `background-image`), are represented by [CSSImageValues](https://drafts.css-houdini.org/css-typed-om-1/#cssimagevalue)
+


extraneous line

Create EXPLAINER.md first draft

468b505

nainar requested review from darrnshn and tabatkins February 1, 2018 09:45

darrnshn reviewed Feb 1, 2018

View reviewed changes

Update as per darrnshn@'s comments

ffd423d

nainar commented Feb 1, 2018

View reviewed changes

Rename EXPLAINER.md to README.md

e753680

nainar changed the title ~~Create EXPLAINER.md first draft~~ Create README.md for css-typed-om Feb 1, 2018

darrnshn reviewed Feb 1, 2018

View reviewed changes

nainar added 2 commits February 1, 2018 22:01

Oops forgot these from last time

09672ea

Update README.md

bdec2b6

nainar merged commit 97820a6 into master Feb 16, 2018

plinss deleted the typedom_explainer branch February 17, 2018 20:40

		@@ -0,0 +1,117 @@
		# CSS Typed OM Explained

		CSS Typed OM is the extensable API for the CSSOM that reduces the burden of manipulating a CSS propeerty's value via string manipulation. It does so by exposing CSS values as typed JavaScript objects which help you circumvent the browser's CSS parser.


		### Getting a property's value

		To get specified and computed values for CSS properties of an element in CSSOM we get them via accessing them of the `.style` attribute on an element and the `getComputedStyle()` object respectively.


		To get specified and computed values for CSS properties of an element in CSSOM we get them via accessing them of the `.style` attribute on an element and the `getComputedStyle()` object respectively.

		In Typed OM we get them of `StylePropertyMaps` on elements.

		@@ -0,0 +1,116 @@
		# CSS Typed OM Explained

		CSS Typed OM is the extensible API for the CSSOM that reduces the burden of manipulating a CSS property's value via string manipulation. It does so by exposing CSS values as typed JavaScript objects rather than strings.

		#### CSSResourceValue

		[CSSResourceValue](https://drafts.css-houdini.org/css-typed-om-1/#resourcevalue-objects) objects represent CSS values that require an asynchronous network fetch. Hence, they also describe the status the resource is in. Properties with image values (e.g. `background-image`), are represented by [CSSImageValues](https://drafts.css-houdini.org/css-typed-om-1/#cssimagevalue)

Conversation

nainar commented Feb 1, 2018

Uh oh!

darrnshn left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

nainar Feb 1, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

1330 nainar Feb 1, 2018

Choose a reason for hiding this comment

Uh oh!

plinss commented Feb 1, 2018

Uh oh!

nainar left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

nainar Feb 1, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hidin 6D5E g this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

nainar Feb 1, 2018 •

edited

Loading

nainar Feb 1, 2018 •

edited

Loading