Sequences

It may sound strange, but many things in web design and programming benefit from finding the right sequence of actions. In the same way, if we decide to study calculus without having a good grasp of the basics, we won’t be ready to understand most theorems and their proofs. By choosing a more appropriate sequence of actions that is consistent with our momentary skills and experience, we can advance more gradually and avoid discouragement and harsh failures that leave a lasting mark on our psyche.

When we plan a project, we often think about the order in which to execute our actions. A sequence of steps makes things appear much more logical to us. Dividing the work in the team allows us to introduce parallelism, but the mere act of uniting the results at the end requires again awareness of which part should come first. Having the right parts in the wrong order leads to bottlenecks in the process of creation, which are a sign of inefficient process organization.

Although our initial idea may sound exciting, whether we’ll preserve our enthusiasm for it will depend on choosing the right sequence of actions to get us started in the right direction. And when we know that we are doing something in the right way, this increases our momentum and willingness to do the best we can. Every time we do something wrong, especially when it was on the critical path, we’ll have to either start over or just find another, more doable idea. An idea doesn’t have to be unique, but a concept does. And the last one is developed in a consequent manner, gradually, over time. We can think of a concept as being born of a sequence of tricks that might have been randomly collected. It is said that when released, the creators of the first Polaroid camera have made around 30000 technological breakthroughs. The exact sequence in which they were applied is what led to this unique and successful product.

The user interface on the websites we create is arranged according to the sequence of actions we expect from the users. By expecting the wrong things, we actually encourage the wrong actions. Presenting the links in an ordered and logical way allows us to ease the cognitive burden on viewers. When text paragraphs follow logically and smoothly from one to another, it is much easier for the reader the understand our message. Before telling a story effectively, we need to make sure that we have created the right context, so that it can make sense.

Users rarely visit a site to point and click ceaselessly. The information they are looking for needs to be presented to them in the fewest amount of clicks, with the fewest extraneous actions and distractions. How logical a ten-step purchasing process is, is rarely relevant when noone will have the patience to go through it again.

The design we choose has to support the way in which we want people to go through the content, e.g. to draw their attention through various content areas in a certain sequence. If this sequence is broken, they will perceive series of fragments, but not a single, cohesive message line. Since static websites rarely change their elements, the sequence of perception on the elements A-B-C-D and A-D-C-B can yield very different results in terms of clarity for the end user. We can’t just change a single element (D) in the sequence without affecting another one (B); by swapping the user’s attention in this way, we risk sending the wrong message.

Describing diagrams and figures or placing action elements near items of potential interest requires a careful consideration. We need to ask ourselves whether it is more appropriate for the title to appear at the top or at the bottom of the diagram. Depending on the data we have and how we want to explain it, we may want to choose differently. Presenting the data similarly as before may preserve consistency, but not necessarily the logic born of the sequence of perception. We should also decide, whether a download button should appear above the title (as I saw recently) or below it. It depends on what is perceived first and what we want to say: “download [title]” or “[title] download”. The first starts with a verb and can be seen as an invitation, while the second is a noun and can be seen as a more informal/emotionless way of declaring a possibility. Which way is better will depend on our goal, the flexibility we have and the tone of the other elements on the page.

The order in which the content appears on a website is not only important for users, but for search engines as well. They see websites as a sequence of characters that form words, whose importance is determined based on the number of repetitions, their position in the text, whether they were marked as keywords and other factors. This means that crafting a great character sequence is actually a good web design. Knowing that, we can say that the first word will have a greater weight than the word with the number N. The first may still not be parsed by robots N times as often, but we need to consider that time-sharing may prevent them from reaching the end of the page. And a reader may get tired half the way down. To generate a better sequence, the best what we can do is to avoid putting important content behind less important one, especially in the HTML. We can use CSS to alter the order in which the elements appear on the page, but this should be avoided when possible.

Styling elements is affected by the cascade and the element’s specificity. Even when we think in terms of hierarchies, we still describe our styles in a sequence-like way (e.g. nav li a). We can even use Emmet and a good editor to generate our HTML by describing in which sequence the elements should appear.

CSS regions try to determine the sequence in which content should appear on the page. We can think of it as a chain of boxes full of content, which allows us to specify how the layout of the page should flow.

Media queries work when the dimensions of the viewport are within a certain range. If we define many, we are having multiple sequences of possible sizes (e.g. a-b, c-d, e-f, g-h). When the user triggers the resize event and it fires continuously, it’s not a good idea to make lots of comparisons as this can be slow. In this case, I tend to think of roughly having 4 if-statements in a loop that gets executed 60 times per second. As an essential element of almost every program, loops enable the execution of a sequence of operations. No article on sequences could be complete without mentioning them. We need to ensure not only that they aren’t infinite, but that they exhibit desirable characteristics in terms of running time.

The code can also be seen as a sequence of statements that wouldn’t work or carry the same semantic if the order was changed. In most languages, we need to first define a function, before we can use it or we’ll get an error. There’s no way to use a variable, before defining it. The sequence diagram (UML) defines in what order the objects in a system should exchange messages to achieve a certain behavior. Changing the sequence of communication changes the results and we may not get the program we desire. Some communications won’t be possible before others have finished.

The string as a basic data type can also be seen as a sequence of characters. We can then access individual ones or extract substrings and use them later. Depending on the order of characters, a different compression ratio may be achieved. Suffix trees allow us to reach any sequence of characters relatively fast, which can be used in search applications.

The Unicode characters are another example of a sequence and although we may not use most of them often, they can still be quite useful to represent special symbols. Other methods include embedding all characters in a single image or using a combination of many very small images and JavaScript to replace the right character with the right image. But these are suboptimal and when no image sprites are used, this can cause a burst of HTTP requests.

Base64 encoding is a way to convert an image into a sequence of characters. This can be useful mostly for small images, because otherwise the encoded data is said to be larger than the one required to store the image. The advantage is that this can save us HTTP requests that we would need for each image; the disadvantage is that we can’t cache the encoded data, while a separate image is more likely to be cached, especially when available on multiple pages.

Icon fonts are a way to embed a sequence of icons in a font and then use the font to type them. The advantage of this is that no sprites are needed and no HTTP requests are sent, except for the font that needs to be downloaded once. The icons can be scalable, since font size is easily adjusted through CSS.

The code is written to operate on some kind of data. In Python, we have many data structures that are seen as sequences, which have consistent means for traversal. We can iterate through tuples, lists and dictionaries in the same way, which is quite convenient. We can take a large sequence of data and substitute a predefined template with it. The only downside will be that we’ll be using more memory, but we’ll make the substitution only once, instead of once for each element in the sequence. If we are concerned with how we access our data, we can embed it in our program temporarily to test how well things work (principle of locality), before we think of extracting huge amounts of data from a database. By gradually scaling the amount of data, we can identify where our existing algorithms cease to work. Relational databases have tables that consist of sequences of rows. In case of MySQL, the more effectively we SELECT a sequence, the better the per-row performance will be. I view every database row as another cycle in the loop, which is why I want this cycle to finish as fast as possible. This is where minimizing the row width (in terms of the stored number of characters) can be useful. Whenever possible, it’s also good to avoid hitting the database by using some kind of cache. What this cache will do is to create a sequence of temporary files in a directory on the server and load them on demand.

Whenever we try to transfer data (e.g. from the DB to the application), it’s useful to analyze its type. If it’s stored hierarchically, the most appropriate data structure to store it will probably be hierarchical (a tree). If it is stored in a table, we could use a two-dimensional array. If stored as an object, we could also associate an object to it. We could choose another representation, but we would need to create a different mapping for it, which is still possible, but will diminish the clarity of our application.

The processor executes a sequence of operations and depending on its architecture, it is optimized for different kinds of sequences. The memory is a sequence of addresses that gets filled sequentially or exponentially. The more compact way is found to store the data, the faster the operation on it will be. Storing data in flash memory sequentially allows to minimize the need for defragmentation. Buffers keep a sequence of data in order to make an operation feel instantaneous. This has lots of applications where large amounts of data are exchanged. Video cards also seem to draw content sequentially on the screen, from top to bottom. We can even see which parts of the browser get refreshed as we scroll the page from top to bottom or vice versa.

When we transfer data through the network we send a sequence of packets with a certain size. The client and the server communicate sequentially—the server receives a request and sends a response to the client. With the TCP slow start, the congestion window is gradually increased, which means that heavier websites will utilize more effectively the available bandwidth. But this doesn’t mean that we shouldn’t care about the data we send back and forth.

The machine code is another sequence of 0 and 1 bits. Depending on what precedes and what follows, we get a different result. And we can’t get the same result with two different sequences.

The way we communicate with our clients also relies on exchanging messages in a certain sequence. Once we receive a message, we can respond to it. But this doesn’t mean that correspondence is linear, when every party can engage in parallel communication during a session.

It seems that sequences are everywhere around us, and if we learn to recognize them and use them to our advantage, we may find new ways to organize our work and eventually improve its quality. Thanks for reading the today’s sequence.

bit.ly/18xppmL