Start a project today!

Code Is Timeless

By: Gregg Hurson

An Ode to the Algorythm

A website is a story. As a user checks out a menu, clicking around the site – they are reading the story of your organization. Language, however, is very fluid. This can make for a strange pairing with the rigidity of web code, but for today’s developer, it is a pairing that shapes careers. Building code that maintains its structure while facilitating the conversation your website has with its visitors is the holy grail of development. There are four “dialects” of the code language that we use to build our websites, today we’ll be talking about two of them.

Coding is Highly Linguistic

HTML – Hypertext Markup Language – the spoken word of the internet. The core idea of “hypertext” is linking pages together in a “web”. In the very beginnings of the internet, it was all about sharing text over a phone line. That text is HTML.

PHP – Pre Hypertext Programming (aka “Personal Home Page”) – this language introduces logic and database functions into HTML. It’s not the trendiest way of doing it, but it’s robust, it’s secure, and it works.

JS – Javascript – this language runs in your browser after the HTML has loaded. It is responsible for most of the motion and interactivity that you see online, this post isn’t about JS, but you can’t write a post about web code without giving it a mention.

Web code all comes down to HTML. It is what the browser displays when prompted with URL. All of the Silicon Valley, Cloud Based, Platform Agnostic super awesome cloud apps that we all like so much all output HTML to the browser.

Duh.

What you don’t see, however, are the “logic” files. What you are seeing is a styled “markup” file. Between your monitor and “the cloud” are a countless array of component files. They receive a piece of information – collate the output of associated component files and deliver a properly formatted packet of data. They are the digital paper pushers of the world. Every site we build is full of them.

To the right is an example of one of a few thousand functions that you might see on a modern, robust theme. It is a go-between function, it makes use of an open source browser detection technique that utilizes hundreds of hours of work of people that I will never meet to act as a switch between loading the desktop menu or the mobile menu.

Below is an example of what a component that links to that logic would look like in a PHP template.

<! -- Header Component File -->

<div class="header_container">
   <? TSD\Display::interior_header_menu() ?>
</div>

And this is where our HTML “spoken word” is – this “div” wrapper will appear in the browser, and it will wrap around a block of PHP “logic” – the code surrounded by <? and ?>.

The “spoken word” of the site says “here we have a container, and inside that container is our header”. However, there are two headers that we need to output based on the type of user’s device. If that logic needed to grow (say, let’s suppose if a user is “logged in” and needs to see another menu of member’s only content) – we don’t need to change the header file – we can add it to the logic inside the Display::interior_header_menu() function – because that’s where logic goes. This “separation of logic from output” is a core idea of writing good code. Deciding exactly where the output ends and the logic begins can be tricky – because that logic code will output its own markup.

<?php 
// PHP Logic File
 
namespace TSD;
use \someone\elses\browser_check;
 
class Display {
 
  static function display_interior_header_menu(){
 
    $mobile = browser_check::is_mobile();
 
    if($mobile)
       include("mobile_interior_header_menu.php");
 
    if(!$mobile)
       include("desktop_interior_header_menu.php");
 
  }
 
}
?>

A project still in its infancy.
The content is applied to layouts.

This same project.
Visually arranged by module, rather than by page.

Code is the Language of the Idea

Language is about sharing our world, it is a way for us to all agree on what’s going on – but usually, it is about an event, that has a place and a time. Every sentence must have a subject and a proposition. Something must happen – an idea must be communicated. But the code is different. It is passive. It lies dormant, waiting for execution. It requires input and provides output. That condition in our code snippet above can either be true or false and yet the code must simultaneously anticipate both. When you are writing code, you don’t know every piece of information that will ever flow through it. As your project grows larger, these functions will need to work together in order to form a cohesive whole, and that means that all your HTML, all your PHP (and even your other dialects) all must revolve around a central structure that doesn’t exist anywhere but in the minds of those working on your project.

The structure I refer to is the structure of your content. Content is language, and your organization’s language doesn’t always adhere to your developer’s ideas of content and structure, which can make translating it into code tricky. Not to mention bringing over the piles of documents you store on your website! How would your function sustain when you arrive at a certain page in your content and there is a request not to show a menu on a certain page. We don’t often think about how much logic underlies the structure of our organization’s online presence – but once you start writing it out, it can go on and on for thousands of lines of meticulous ‘if… then…’ statements.

But once this simple header module is activated, in the moment that your browser requests a URL from your website, it will know what to do. It will adhere to the logic of the moment, and your content will be pulled from its various database entries, the size and shape of your device will be analyzed, and a story will be sent to your browser. The story of your organization’s content. Just the select sentences and images out of the thousands associated with your site, formatted and delivered in just the right HTML. Thousands of time a second if you’re really popular.

These requests come and go in an instant, and will happen over and over again countless times. These requests will be checked against this computer code. A language as written without time or place. It is a fragment of logic that is meaningless outside of the context of its template, and yet for us developers, it is the very core of our craft.

A well structured conditional statement is what keeps our nuclear missiles tucked away in their silos.

Ready to get started?

  • Drop files here or
    Accepted file types: pdf, doc, docx.
    Upload a file, if you like.
    pdf/doc/docx only please.
  • This field is for validation purposes and should be left unchanged.