Web Development Envelopment.

As I stand triumphant atop the fabled first step, I do not feel wiser, and I do not see growth. I simply feel tired and see a thousand steps to go.

After straddling the coattails of the series’ first post, I found myself sauntering through December without a word on a page or line of mark-up written. Although well intentioned, it seemed the project’s initiation was so eloquently meandering in its premise, that even I did not fully comprehend the succeeding work I haphazardly agreed to. However, apprehension as the project’s crux was only to be expected, as it remains the primary emotion we look to overcome.

The initiative’s first development cycle focused on basic web development. A generally overlooked series of technical skills that remain intrinsically linked to the way we live our modern lives. Spanning from the Information Age onwards, the web provides the basis for our growth, our expression and ever-expanding interconnectivity. Although the focus of my own development didn’t intend to implement such a sociological cornerstone, it aimed to provide the basis for my own articulation with the creation of a website. A subsection of the web’s infinite space that I could truly call my own.

As I am more than aware my self-indulgent writing style does not translate well into an educational context, this post attempts to segment itself into two halves; separating initial introspection from the resources that I believe to be beneficial to individuals attempting their own static website creation. As of such, notable topics or concepts are signposted within the latter stages of the post for easy reference and all site resources and content can be found within the associated GitHub repository.

Iteration Introspection.

The iteration’s emphasis was around the fundamental building blocks of web development: HyperText Markup Language (HTML), Cascading Style Sheets (CSS) and JavaScript (JS). A prominent anatomical analogy detailing the co-existence of these languages and their web development purpose is that of the human form. In this warped melding of man and machine the HTML works as the skeleton; the hypothetical backbone of the site. The CSS works as the site’s skin, an off-putting visualization of how CSS controls the visual elements of a site. Finally, JavaScript, which works as the muscles and provides the motion and interactivity of a site. Websites, and in turn our analogical form, can be further expanded with PHP, Python, etc. however in this context the project’s brief was kept simple.

Admittedly, this general framework is not a foreign concept to me, given fragments of information I have salvaged from my Computer Science degree. Unfortunately, this pre-existing knowledge inadvertently worked as a hinderance to my own progression, causing me to procrastinate and put off the development of the site until post-Christmas due to my own jaded conception regarding the ease of mark-up (HTML) and stylesheet (CSS) language creation. This paired with the social requirements of the holiday season, a transitionary, work-intensive, period within my current role, and a naïve conception that a marathon length Civilization game would only take a day or two, meant much of my time was wasted. Instinctively, my first response was to delay the publishing of the site, to allow me to adapt the contents to a level I deemed satisfactory; falling back into the realm of self-doubt and idealism that the initiative looks to counteract. However, in a feat of negligible growth, I refrained from personal obstruction and allowed the basis of the site to complete.

With such underwhelming propaganda in mind, I present www.atleastitried.co.uk. A site that, apart from the impressive domain name, simultaneously underwhelms and fulfills its purpose, for a fraction of the initially assumed cost. However, assuming the exhibition of a bare-bones website would work as an effective introspective conclusion is both ignorant and wildly underestimating my grasp on my English GCSE. To call-forth the forgotten Pinterest boards and crudely framed work-place posters, “It’s not the destination, it’s the journey”. And this project, although short-lived, encompassed a range of challenges and lessons that I believe are important to address.

One aspect of the journey that did take me by surprise was the cumbersome aspect of design and content population. The developmental resources surrounding HTML, CSS and JavaScript provided a terrific overview of the capabilities and means of integration but defining the content to populate this functionality proved problematic. With no pre-existing ideas or resources, much of my time was spent creating content, selecting colour schemes and painstakingly adjusting it to be as responsive as possible. I found myself spending too much time creating multiple pages and interactive functionality that later was removed due to it spreading the content too thin or seeming out of place or unnecessary. My advice, in line with the IT industry ideologists pushing the Agile Manifesto, would be to keep it simple, define the content that needs to appear and iteratively develop it over a series of revisions. Not only does this allow you to minimize time wasting theorizing approaches, you may or may not be capable of, but helps to motivate you by seeing a tangible product adapt over time.

Another harshly learnt lesson from my ineptitude was that focusing on making a site responsive (i.e. maximizing device compatibility) should be a pillar of the site’s development from the very start, not an afterthought. In the UK alone, available 2020 data estimates 84% of UK adults own a smartphone and, on average, 2 hours and 34 minutes are spent online on these devices every day. Thus, focusing your development and testing solely on computer-based browsers while trying to create the most responsive site possible, such as I did, only means a haphazard attempt to make your site device-agnostic is around the corner. Nothing was more disheartening than framing my lack-luster content to perfection, only to find said content collectively diving off the side of the screen, like a slice of lemmings, when opening the site on my mobile device.

However, the process wasn’t all doom and gloom. As stated, the forums, educational resources, and communities surrounding the areas of Web Development I focused on were vast and extremely helpful. Understandable, with any technical community, there is a level of gatekeeping and a subsection of traditional developer purists, but their prominence within my time of creating the site were a fraction of other technical domains I have been a part of. Additionally, for every individual you find providing helpful tips and tricks there will be another ten detailing how their approach is fundamentally flawed. However, this is nature of the beast when it comes to online discussion and within the context of basic site creation (with minimal need for security and data governance), if it works it works.

Final Thoughts.

Although a necessary step to get the project off the ground, the general process of creating the site was enjoyable and was seemingly more dependent on a creative thought process than I first anticipated. Understandable, focusing solely on the use of HTML, CSS and JS ensured that the process wasn’t bogged down with technical minutia, but given the basic requirements of the site and the grass roots approach I wanted to pursue, I believe the outcome was a success. Understandable over time I will change and, in extension, so will the site. However, a more relaxed and incremental approach to the site’s maintenance and subsequent expansion is more than welcome.

The barrier to entry for these concepts was relatively low and can easily be combined to create a tangible product. However, if the creation of a site is merely a means to an end (Portfolio, E-commerce site) I would suggest pursuing more conventional web development services that my suggested ads are now plagued with (Wix, Bluehost, etc.). The tools, resources, and overall means of making a fast, cheap, and professional looking site are currently so vast that approaching it through a more traditional stance is simply counter-intuitive. These robust services incorporate security processes, automatic device compatibility and a whole range of additional bells or whistles, justifying the additional mark-up many of these subscription models bring. Yes, building a site from the ground up provides the most versatility and creative freedom, but the time needed to get to a level of technical expertise that surpasses the more automated platform approaches is considerable. All in all, it simply boils down to what you look to achieve and the inherent value you associate with your time.

Compartmentalised Resource Discussion.

Learning Resources.

W3schools provide a fantastic series of textual resources on HTML, CSS, JavaScript and beyond, free of charge. Although I frequently found myself returning to these resources, I would suggest first skimming through the content to understand the various capabilities and means of interconnectivity that the languages have. Jumping into building a site can help you learn through a more practical manner, but you may find that what you are trying to implement can be done more effectively through a different approach you have yet to learn.

Stackoverflow is a no brainer when it comes to development in any form. A forum in which you can slowly learn that all your unique ideas are simply replications of past queries. A site so unremitting, yet calming, in which you can take solace that you are not alone and that there are others more confident in exposing their inane questions, for the betterment of the masses.

Google (or a search engine of your choice), a self-explanatory resource, but not one to be overlooked. Edward Felten once stated, “The problem - when you cast your net that wide - is you inevitably catch something you don't want to catch”, a sentiment that can only be counteracted by the less than formal idiom “any holes a goal”. The superfluousness of the web is not a hinderance to those with the time to scour it, as it provides a wide exposure to all available approaches. Admittedly, in many cases this approach found me arriving at either W3schools or Stackoverflow again, but it allowed me to first filter alternative resources for valuable information.

Finally, a few specific resource that I found beneficial throughout the site’s creation was Traversy Media’s CSS Grid Layout Crash Course video tutorial and CSS-Trick’s Complete Guide to Grid. The CSS Grid approach not only provided invaluable in making the site as device compatible as possible, but was one of the most understandable and versatile approaches I found to assist in formatting my site’s content.

Integrated Development Environment (IDE)

To alleviate much of the stresses of developing through a simple text editor, I opted to use Visual Studio Code throughout the site’s creation. In line with a majority of the societal decision making we see today, this choice was not based on in-depth research and intricate evaluation but simply searching “best IDE for web development” and trusting the guidance of a series of unknown publications. Undoubtedly a terrible approach for deriving both political and medical guidance, but in this context the advice was sound as I found Visual Studio Code to be a fantastic tool within the site’s creation.

In addition to the benefits of formatting and autocompletion that the more dynamic IDE provided, Visual Studio Code offers the means to easily incorporate a range of extensions that can further alleviate the difficulties of developing a website. Within my development cycle, I used Live Server by Ritwick Day to allow me to easily launch a development local Server and MobileView from cirlorm to connect to the local server to understand what the site might vaguely look/behave like when opened on a mobile device, although I found this to be misrepresentative of some of the site’s features (CSS grid element widths, etc.).

Typeface.

Given that the site revolves around the relaying of textual information, a factor that took a surprisingly extended period of time to consider was the typeface. Although seemingly inconsequential, a typeface provides the basis for a website, its subsequent messaging and should be chosen based on the content’s chosen demographic. Given that the site’s main purpose is more focused on descriptive introspection, thus not directed at a specific demographic per se, the typeface selection process I adopted was far less externally psychologically minded and more focused on a general personal perception of what fonts aligned with the content.

Generally, typefaces can be categorized into one of four basic style groups: Serif (a small line or stroke regularly attached to the end of a larger stroke in a letter), Sans Serif (meaning without serifs), scripts and decorative. Fonts.com provides a brief overview into the sub-classifications found within these groupings; detailing the various typeface origins and unique characteristics that set these classifications apart.

In my opinion, the Serif typeface seems the most suited for a blogging site, given its more professional and aesthetically pleasing finish, without falling into the realms of unreadability that certain script typefaces do. However, this preference is not unanimous through the blogging realms, with many Blogging sites switching between Serif and San Serif typefaces. Looking back this may have been one of the deciding factors to why I chose Medium as my initial blogging platform, given their preference for a Serif typeface, showcasing first-hand the suggestive power of typeface utilization.

With all of this in mind, I settled upon Lora, designed by Cyreal.

My advice for deliberating typefaces would be to work through the wide array of choices found upon Google Fonts. I found this to be the quickest way to test placeholder content, variable font sizing and download the font family both easily and securely.

Site Hosting.

Out of all the factors to consider within the creation of a website, I found the choice of web hosting the most strenuous due to the wide array of choices, alternative services and publications ensuring you that their pick is the be all and end of the web hosting space.

Before jumping into the first hosting platform that pops up, probably due to their extensive marketing budget, it is important to note the difference between dynamic and static sites. The best no-nonsense overview and comparison I found was provided by Fasthosts. In layman’s terms, a Static site loads ‘static’ content, this being content hard-coded into the HTML/CSS/JS files requested from the server, while dynamic sites take content from a variety of locations using a server-side language. Due to the more simplistic approach static websites take, the platforms that solely cater to hosting them are less prominent and less pricey.

Given my focus on HTML, CSS & JS development, along with the need to only showcase my site’s content in a ‘static’ manner, the decision on which website design to choose was simple. Regarding the subsequent choice of which static site hosting platform to use, the conclusion of my research had me choosing Render.com. Nothing is more effective marketing, in the IT space, than the words “Free” and “Easy”, both of which I found to be a suitable adequate description of the platform. Simply point your Render service towards a public Git repository containing your site files and Render does the rest. The Render service superbly documents the steps that need to be taken, along with helping you along the way.

Admittedly, getting your files to a Git repository is a preliminary step that you are seemingly left to your own devices with, however the resources surrounding Git hosting solutions are a dime a dozen, with my personal preference and basis for the site being GitHub. To assist in this, Fahadul Shadhin wrote a fantastically comprehensive blog on the means of hosting a static site through GitHub, providing a step-by-step guide on how to get a public repository for your site up and running.

Domain Acquisition.

Although many of the free hosting platforms provide a URL suffix with some level of creative control, to achieve a full sense of individualism, and a URL that you can say out loud without people thinking you’re malfunctioning, a personalized domain name needs to be acquired. As this is another aspect of Web Development in which money comes into play, searching for which company to purchase your domain from will be met with a plethora of businesses battling for your attention.

Based on the prices, and a quick search on which Internet domain registrar are most reputable, I settled upon purchasing the atleastitried.co.uk domain from GoDaddy. This was the only purchase affiliated with the site’s creation and it cost me a whopping £14.40 on a 2-year contract; £0.01 for the first year, £11.99 for the second and £2.40 of additional costs (taxes, etc.) that ol’ sly Daddy chucked in within the final stages of purchase. Following on from this, the general management and domain DNS configuration to redirect the domain to my render.com website was relatively straight-forward, with render.com providing clear cut instruction on how to achieve this.