Code for Thought

Should you style HTML Elements directly?

Jeremy Walton — Thu, 17 Aug 2023 19:39:46 GMT

Over the last year and a half, I have been developing a Design System for RoleModel Software. This has required a high level of collaboration between me (a full-stack developer who primarily enjoys front-end work) and our design team (specifically our Design Director).

We call it Optics, a RoleModel Design System

Early on in our collaboration, a question came up as to how we style our inputs.

Should we design all of the inputs in our system to have styles applied directly to the HTML Elements? Wouldn't that be easier than requiring .form-control to render the styles?

This question applies to more than just form controls as well such as styling buttons directly or always using a class like .btn.

.form-control {
  // Shared styles go here
}
// OR
input[type="text"],
input[type="password"],
input[type="search"]
input[type="date"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="tel"],
input[type="time"],
input[type="url"],
input[type="week"]
textarea {
  // Shared styles go here
}

<input type='text' class='form-control'>
<input type='email' class='form-control'>

<input type='text'>
<input type='email'>

So should you? No, use classes.

Let me explain why by addressing some potential concerns.

Concern #1: Requiring a class creates a worse Developer Experience

Needing to remember to use a class every time adds complexity to the Developer Experience and friction to implementation right?

While this can be true of some elements like buttons, inputs, or other semantic HTML elements, requiring a class means the HTML has to be written with more intention and care. It also provides semantic meaning and in some cases intention revealing names to elements or concepts that might not have a dedicated semantic HTML element.

Concern #2: Requiring a class leads to unexpected default behavior

The fundamental purpose of a Design System is to provide styling for a cohesive user experience. Shouldn't elements behave correctly without using classes?

Most design systems provide component libraries to solve this. They ensure you always use the styled and "blessed" default approach by providing a simpler interface. Even they don't override default styles though. If you ever needed to add a new component based on an input element but with a different use case or something along those lines, they still allow for it.

Optics doesn't have a component library (yet), but it does have component blueprints (HTML snippets) with the right semantic elements and classes applied that you can copy and adjust as needed.

Concern #3: This feels like shaping the code toward an edge case

Opening the door for straying from our design patterns feels like encouraging edge cases. Shouldn't we avoid writing code to allow for this?

Allowing for intentional variation and customization is not an edge case, but rather a feature of a cross-product Design System. It doesn't lock you into one way of thinking or using the system.

Default styling forces you to use an element in one way and doesn't allow for intentional, well-thought-out divergence from that one case. It assumes that the Design System has thought of every need or use case that could come up.

Any time you need to create a new variation, you would need to un-style and then restyle the element which leads to more confusing and complicated CSS.

Based on my experience working across dozens of applications, you simply cannot account for every need or situation.

Every app has unique challenges and uses elements in different ways. Without flexibility, every app built with the same Design System ends up getting locked into a similar look and feel and loses any uniqueness or character. A Design System should provide consistency and standardization, but should still allow for character to show through.

Skybox in Three.js

Jeremy Walton — Sat, 20 Sep 2014 01:24:26 GMT

Note: I'm sure most of this is outdated at this point, but wanted to move the article from my previous blog for archive purposes.

Three.js is a javascript 3D library that makes WebGL very simple. Today we will see how to set up a scene with a skybox in Three.js.

The first thing we need is an HTML file.

<body>body>
<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r58/three.min.js">script>
<script>
  // Everything will happen in here.
script>

As you can see we are loading in Three.js via http://www.cdnjs.com/ Next, we will set up some variables to be used later.

var scene, camera, renderer;

The three main things we need are a scene to render on, a camera to show us the scene, and a renderer to draw on the scene. Now we will call two functions to get everything started.

init();
animate();

function init() {

}

function animate() {

}

The init function is what we use to initialize the scene, camera, and renderer as well as any other objects we want to show. Animate handles the runtime loop and rendering.

Let's start to fill in our init function. We will start with the main components.

////////////
// scene  //
////////////
scene = new THREE.Scene();

////////////
// camera //
////////////
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 20000);
camera.position.set(0, 100, 200);
camera.lookAt(scene.position);

//////////////
// renderer //
//////////////
renderer = new THREE.WebGLRenderer();
renderer.setSize ( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

Creating the scene is probably the easiest part of setting up a Three.js project.

The camera is a bit more complicated. We make a Perspective Camera which is one of a few options Three.js provides. The arguments we pass in are as follows ( field_of_view, aspect_ratio, near_clip, far_clip ). Field_of_view is how wide your vision is, aspect_ratio is the size of the viewing window, near_clip is how close you can get to an object before it stops rendering, and far_clip is how far away an object can be before it stops rendering. Before we finish here, we set the position of the camera and tell it to look at the scene's position which is (0, 0).

For the renderer, we create a webGL renderer, sets the size to the size of your screen and append its dom Element(the HTML canvas) to the page body.

This is what your file should look like inside the script tag at this point.

var scene, camera, renderer;

init();
animate();

function init() {
  ////////////
  // scene  //
  ////////////
  scene = new THREE.Scene();

  ////////////
  // camera //
  ////////////
  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 20000);
  camera.position.set(0, 100, 200);
  camera.lookAt(scene.position);

  //////////////
  // renderer //
  //////////////
  renderer = new THREE.WebGLRenderer();
  renderer.setSize ( window.innerWidth, window.innerHeight );
  document.body.appendChild( renderer.domElement );

}

function animate() {

}

Now that we have the main pieces, let’s fill in our animate function.

requestAnimationFrame( animate );
render();

All this does is tell the renderer to render the scene to the camera(canvas view).

We have a scene, a camera, a renderer that is being updated and everything is finally set for us to show something. The first thing we will add is an x, y, z axes. This will help us visualize the 3D space. Inside of our init function, after make the renderer, add this.

////////////
//  axes  //
////////////
var axes = new THREE.AxisHelper(100);
scene.add(axes);

Using Three.js built in Helper, adding an axes is as easy as telling it what size we want, in this case 100. Once we make the axes, all we need to do is add it to the scene and viola, we are done.

////////////
// floor  //
////////////
var floorTexture = new THREE.ImageUtils.loadTexture( 'images/checkerboard.jpg' );
floorTexture.wrapS = floorTexture.wrapT = THREE.RepeatWrapping;
floorTexture.repeat.set( 10, 10 );
var floorMaterial = new THREE.MeshBasicMaterial({ map: floorTexture, side: THREE.DoubleSide });
var floorGeometry = new THREE.PlaneGeometry(1000, 1000, 10, 10);
var floor = new THREE.Mesh(floorGeometry, floorMaterial);
floor.position.y = -0.5;
floor.rotation.x = Math.PI / 2;
scene.add(floor);

What is a floor without a texture? That's why we load in a texture on the first line. Now that we have a texture, we tell it to wrap ten times(repeat.set( 10, 10 )) in both directions(wrapS and wrapT).

All 3D objects in Three.js are meshes. Meshes are composed of geometry(vertices) and a material(how they reflect light/texture). For our floor, we will use a basic material. This allows us to see it even without a light source. Upon creation, we map the texture on its sides and set it to double-sided since it’s just a plane. For the geometry, we use Plane Geometry passing in a few variables (width, depth, x_position, y_position).
Finally, we create the mesh, passing in our geometry and material, set its position and add it to the scene.

That white background is somewhat boring, let’s add a skybox to fill in that empty space.

////////////
// skybox //
////////////
var materialArray = [];
materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'images/dawnmountain-xpos.png' ) }));
materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'images/dawnmountain-xneg.png' ) }));
materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'images/dawnmountain-ypos.png' ) }));
materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'images/dawnmountain-yneg.png' ) }));
materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'images/dawnmountain-zpos.png' ) }));
materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'images/dawnmountain-zneg.png' ) }));
for (var i = 0; i < 6; i++)
   materialArray[i].side = THREE.BackSide;
var skyboxMaterial = new THREE.MeshFaceMaterial( materialArray );
var skyboxGeom = new THREE.CubeGeometry( 5000, 5000, 5000, 1, 1, 1 );
var skybox = new THREE.Mesh( skyboxGeom, skyboxMaterial );
scene.add( skybox );

Just like before, we need to create a material, but this time we make one for each side of our skybox. This allows us to map a different image to each side. By setting the side to BackSide, Three.js will render the images on the inside of the cube instead of the default outside. We have all our materials in an array, but to map them properly, we give the array to another type of material, a face material. Next we create the geometry, this time we use CubeGeometry and pass in (width, height, depth, x_position, y_position, z_position). After creating the mesh we can add it to the scene and now we have a background!

Last, but not least, we will add a simple cube to the scene

////////////
//  cube  //
////////////
var material = new THREE.MeshBasicMaterial({ map: THREE.ImageUtils.loadTexture('images/crate.jpg') });
var geometry = new THREE.CubeGeometry(50, 50, 50);
var cube = new THREE.Mesh(geometry, material);
cube.position.set(0, 25, 0);
scene.add(cube);

As before, we create a basic material and map an image to it. Next we create the CubeGeometry with a size of 50 on each dimension. Finally we create the mesh, set its position, and add it to the scene.

Here is what everything inside the script tags should look like.

var scene, camera, renderer;

init();
animate();

function init() {
  ////////////
  // scene  //
  ////////////
  scene = new THREE.Scene();

  ////////////
  // camera //
  ////////////
  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 20000);
  camera.position.set(0, 100, 200);
  camera.lookAt(scene.position);

  //////////////
  // renderer //
  //////////////
  renderer = new THREE.WebGLRenderer();
  renderer.setSize ( window.innerWidth, window.innerHeight );
  document.body.appendChild( renderer.domElement );

  ////////////
  //  axes  //
  ////////////
  var axes = new THREE.AxisHelper(100);
  scene.add(axes);

  ////////////
  // floor  //
  ////////////
  var floorTexture = new THREE.ImageUtils.loadTexture( 'images/checkerboard.jpg' );
  floorTexture.wrapS = floorTexture.wrapT = THREE.RepeatWrapping;
  floorTexture.repeat.set( 10, 10 );
  var floorMaterial = new THREE.MeshBasicMaterial({ map: floorTexture, side: THREE.DoubleSide });
  var floorGeometry = new THREE.PlaneGeometry(1000, 1000, 10, 10);
  var floor = new THREE.Mesh(floorGeometry, floorMaterial);
  floor.position.y = -0.5;
  floor.rotation.x = Math.PI / 2;
  scene.add(floor);

  ////////////
  // skybox //
  ////////////
  var materialArray = [];
  materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'images/dawnmountain-xpos.png' ) }));
  materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'images/dawnmountain-xneg.png' ) }));
  materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'images/dawnmountain-ypos.png' ) }));
  materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'images/dawnmountain-yneg.png' ) }));
  materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'images/dawnmountain-zpos.png' ) }));
  materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'images/dawnmountain-zneg.png' ) }));
  for (var i = 0; i < 6; i++)
     materialArray[i].side = THREE.BackSide;
  var skyboxMaterial = new THREE.MeshFaceMaterial( materialArray );
  var skyboxGeom = new THREE.CubeGeometry( 5000, 5000, 5000, 1, 1, 1 );
  var skybox = new THREE.Mesh( skyboxGeom, skyboxMaterial );
  scene.add( skybox );

  ////////////
  //  cube  //
  ////////////
  var material = new THREE.MeshBasicMaterial({ map: THREE.ImageUtils.loadTexture('images/crate.jpg') });
  var geometry = new THREE.CubeGeometry(50, 50, 50);
  var cube = new THREE.Mesh(geometry, material);
  cube.position.set(0, 25, 0);
  scene.add(cube);

}

function animate() {
  requestAnimationFrame( animate );
  render();
}

function update() {

}

function render() {
  renderer.render(scene, camera);
}

There you have it. We have created a simple scene with a floor, axes, a skybox, and a cube as well. The next step is to add some controls to view the rest of the scene. I hope you learned something from this brief tutorial. Feel free to leave a comment and share what you have done with Three.js

Here are the pictures used in this tutorial.