feat(markdown): Ported code howtos to v3

markdown/dev/howtos/code/attributes/en.md

@@ -1,11 +1,51 @@
 ---
 title: Using attributes
-for: developers
-about: Show s you have to use attributes on points, paths, and snippets
 ---
 
-Points, Paths, and Snippets all have [attributes](/reference/api/attributes/) that you can use to
-influence how they behave.
+Points, Paths, and Snippets all have [attributes](/reference/api/attributes/)
+that you can use to influence how they behave.
+
+Under the hood, text, css classes, and even circles are all set in attributes.
+There are plenty of higher-level helper methods available, but knowing how to
+manipulate attributes is useful in case you want to accomplish something for
+which there is no higher-level helper method.
+
+Let's use an example to see the different ways we can assign a css class:
+
+<Example caption="Various ways to set attributes on a point">
+```mjs
+({ points, Point, paths, Path, part }) => {
+  /*
+   * Via the high-level Point.addText method
+   */
+  points.a = new Point(0,0)
+    .addText('I am bold and colorful', 'bold fill-note')
+
+  /*
+   * Via the lower-level Point.attr method
+   */
+  points.b = new Point(0,10)
+    .attr('data-text', 'I am bold and colorful')
+    .attr('data-text-class', 'bold fill-lining')
+
+  /*
+   * Via low-level access to the attributes property
+   */
+  points.c = new Point(0,20)
+  points.c.attributes.add('data-text', 'I am bold and colorful')
+  points.c.attributes.add('data-text-class', 'bold fill-contrast')
+
+  // Prevent clipping
+  paths.diag = new Path()
+    .move(new Point(-10,-5))
+    .move(new Point(80,25))
+
+  return part
+  }
+```
+</Example>
+
+kEven though there are helpers methods available for them.
 
 A common scenario is to apply CSS classes to style a path: