thecodingjournal-blog

[thecodingjournal-blog]

Five

As opposed to the devastation experienced in the past week caused by a minor technical issue, this week was filled with positivity as my laptop was rectified with all its data which meant that I can continue to conduct more changes in the theme. 

These changes revolved around accurate online presence and its significance when establishing a blog, such as the addition of an image in the sidebar, deciding on the blog’s Title, adjusting the Tumblr username according to the content being projected and installing an avatar.

Shown above provides further details about the customisation process and how it reflects on the webpage.

The title, ‘The Coding Journal’ appeared to be suitable in relation to the content being displayed for the public to read. Moreover, the choice of image relied heavily on the colour palette whilst also replicating a fashion magazine that foreshadows further implications on the created theme.

Both the username and choice of avatar projects consistency in both the theme and overall concept the blog.

Kennedy, Meese and van der Nagel’s (2016) work on the regulation and social practice online can further justify the importance of this as particular institutions such as the wider-tech community and the booming social media platforms continue to make attempts in impacting the agency of individuals.  

With Tumblr’s features and its ability to cross between being a social media and blogging platform, practicing and reinforcing social norms through one’s customised Tumblr theme can hold such a remarkable influence over Tumblr users. Therefore, it is extremely important to remain consistent and positively influential with your work as these practices are socially developed, adding that online interactions can shape performances in social media (Kennedy, Meese and van der Nagel 2016).

On the other hand, this week also consisted of troubleshooting. This was performed as the webpage did not appear with the customised theme, whilst using my mobile device. However, the theme would function well when using a laptop.  

To resolve the issue, Tumblr’s Help Centre recommended to try two following steps which involved removing all code from the description box, click save then view the blog once again to see if the problem has been resolved. Another option was to save a copy of the custom HTML and then reinstalling the theme.

After trialling both options, no changes were visible in terms of the customised theme being reflected on my mobile device.

With this being the last entry, I aim to resolve this issue by researching materials that can assist in availing the theme in both mobile devices and other devices such as a desktop and a laptop, before the deadline. I will also be conducting small adjustments such as font sizes to best suit my desires for the theme.

Nonetheless, from having experienced very minimal coding prior to the semester, I am pleased with the code literacy I have gained through learning the basics of coding found in online materials as well as the industry research conducted by renowned scholars that have placed great importance on technology and its impact on users.

Although there were various limitations, errors as well as assistance required from existing templates to fulfil this project, the overall experience in coding made me understand the processes, skills and patience involved as perfecting code does not happen in one sitting.

I have also learnt the difficulty in customising themes and recognising the issue with the limited knowledge i initially possessed. Through this however, I have earned better problem solving skills and undertaking further research until satisfaction is achieved.

Overall, I am pleased to have gained coding skills and knowledge in which I will continue to enhance on my future blog.

[thecodingjournal-blog]

Four

Challenges were encountered during the past week as my laptop suddenly refused to function. Immediate action was then performed by scheduling an appointment with experts who have both the ability and authority to diagnose and rectify the issue. However, this also meant that I would have no access from my laptop for a week, resulting in the loss of materials I planned to use for a further customisation of my project. After the diagnosis, I was informed that the repairing process involved a high risk of data loss which have escalated the stress.  To ease my worries, I informed my tutor as soon as possible in any case there would be major impacts in the process of fulfilling my tasks.

During this time, I continued to work on what I could with the resources I could gain access to. This included my desires to apply changes on the sidebar including the removal of links. The reason being is that it held no purpose in the customised theme and it was also perceived to be advanced beyond my ability with the limited time.

Highlighted below are the tags that were required to be removed for the desired changes on the sidebar to reflect upon the theme:

The comparison between the before and after removal of the standard links in a basic HTML template, provided a sense of satisfaction, as it indicated that I am progressively understanding how to design my own theme.

Further changes were then made after discovering the range of sidebar positions available for customising themes (Themes by Eris 2013). These include:

Static

Absolute

Fixed

Relative

Cybella’s (2015) base code appeared to have the sidebar option set to fixed, which meant that the sidebar does not scroll along with the content of the theme, such as text posts and reblogs. The change applied to my theme on the other hand, was the use of absolute, meaning that it scrolls with the page.

Adjustments of the padding in the description of the sidebar were also made, from 5px to 7px. This is evident in the before and after images above.

Although the lack of access I currently have from my laptop have been stressful and disheartening as it stores all the relevant files that are be useful to the project, this week was also filled with productivity as I was driven to ensure all my hard work and efforts to customise my own theme will be regarded for.

Furthermore, some lessons I have learnt outside of coding is becoming more responsible when handling and storing files in any case the device used stops functioning. This will therefore, prevent any forms of stress and worries whilst establishing major projects.

Next week is the expected time for my laptop to be returned and I am hoping no data will be erased. Furthermore, I aim to make some last minute adjustments that will put the overall theme together.

[thecodingjournal-blog]

Three

In the past few weeks, I have been occupied by focusing on the concept of customisation with several experiences of trial and error as well as sourcing other materials that may be relevant to the expansion of my code literacy and overall knowledge.

This included the recognition of what can be customised through the use of CSS such as colours, fonts, images and texts. However, the most significant tag to apply whilst hand-coding was the customise option to the theme known as the meta tags.

Knowing that customising themes required the use of CSS, I already expected these meta tags to be included inside the <head> tag.

Before attempting to select my own colour palettes for my own theme, I have decided to follow the examples of meta tags provided by Themes by Eris (2013). This provided further assistance on how to structure the meta tags in combination with the base code.

Furthermore, the ethnographic study of Bergman et. al. (2004) justifies that copy-pasting has become a common practice among programmers for beneficial reasons.

However, this is challenged by Pheatt and Rogers (2009) who brings forward the possibility of using code out of context which may result in the interference with the existing code.

Although in my experience, the reason behind the result below is highly likely due to the misplacement of code.

As a solution, I sought for the preview template of Themes by Eris’ (2013) tutorial as well as other Tumblr templates to study the correct placements of CSS when customising.

The most helpful material on the other hand was Cybella (2015) who provided a base code with explanations on the features that can be located including the meta tags featured below:

This structure was then applied on my code to avoid potential errors and the customisation of the theme continued with navigating colour palettes that reflect my interest and personality.

Colour Lovers (n.d.) offered a variety of palettes from patterned to plain colours, which reflects upon the advantages that Tumblr themes bring on a creative’s self-expression and overall online branding.

The most recent update of my current theme can be seen below:

<meta name="image:Background" content=""/>

<meta name="image:Sidebar Image" content=""/>

<meta name="color:Background" content="#f0bfb6"/>

<meta name="color:Text" content="#d95e40"/>

<meta name="color:Link" content="#9f9f9f"/>

<meta name="color:Link Hover" content="#c3c3c3"/>

Whilst the customisation continues in the remaining weeks ahead, I am very pleased with the current structure and appearance of my theme.

The previous experiences of trialling base codes and placements of CSS as well as seeking solutions from relevant materials have all contributed tremendously to my understanding of coding.

[thecodingjournal-blog]

Two

During the past week, I have been sourcing tutorials in various forms such as videos and blogs.

The two main video tutorials I have followed consistently include Welsh’s (2014) step-by-step tutorial on how to create Tumblr themes using a basic HTML template as well as Let Them Eat Cake’s (2017) tutorial on how edit your Tumblr.

Throughout the sourcing period, the key word I always sought was basic, which best suits my ability to absorb and fully understand the process of hand-coding a template.

Welsh’s (2014) first tutorial was easy to follow, eventually leading to the application of the base code in my actual Tumblr page.

The following code that was initially applied can be found below.

This resulted in a blank page seen below, which caused my worries with various questions in mind.

However, Soare (2015) did point out that the process of learning how to code and debugging your code comprises of consulting multiple materials such as books, tutorials and developer communities. This is further justified by Ford (2015) who perceives programming as debugging, placing emphasis in having the expectation that things will not work straight away.

Therefore, I continued to source materials where I eventually found Themes by Eris (2013), a Tumblr theme maker that offers assistance in installing themes and coding tutorials separated into parts that begins with the foundations of a webpage. The instructions provided were informative making it successful in explaining the purpose of each aspect which enables individuals with very limited coding knowledge like myself, to gain better insight in hand-coding a HTML template.

From the Getting Started tutorial, I have learnt that the use of the <!DOCTYPE> tag at the very beginning of the code informs the browser what type of document to expect. It is also included as one of the few tags that does not need a closing tag. This was then always kept in mind as the progress of the base code continued to unfold. Furthermore, understanding both the <head> and <body> tags were essential as the <head> tag is where the CSS is placed, while the HTML code dictates where all sections need to be placed that can be found in the <body> tag.

The explanation behind a blank white page which was experienced previously whilst following Welsh’s (2014) step-by-step tutorial was then explained on Themes by Eris (2013), stating that the code seen below comprises of tags that enables the browser to read the Tumblr page correctly:

<!DOCTYPE html>

<html>

<head>

CSS

</head>

<body>

HTML

</body>

</html>

Certain aspects such as the Title and Description were also mentioned as a part of the webpage. However, what I found the most intriguing and foreign were the Meta Description and the Favicon. I discovered that the Meta Description is the description below the {Title} tag that appears when searching a page whilst the Favicon is also known as the avatar found in tabs.  As a previously active Tumblr user, the use of avatar and how to change it was already familiar. What appears to be expanding throughout the creation of the project is my code literacy.

At the moment, this is how my code looks like:

<!DOCTYPE html>

<html>

<head>

<title>{Title}{block:PostSummary}, {PostSummary}{/block:PostSummary}</title>

{block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}

<link rel="shortcut icon" href="{Favicon}" />

</head>

<body>

</body>

</html>

In the coming weeks ahead, I aim to learn how to customise.

[thecodingjournal-blog]

One

This semester, I will be creating my very own Tumblr theme. As a previously active Tumblr user who aspires to start a fashion blog in the near future, I found this option the most realistic and useful with the knowledge and skills I have yet to learn throughout the process in such a limited amount of time.

Due to my interest in fashion blogging, I also perceive the outcome to be the same theme I can continue to enhance with the discoveries I am bound to have, inevitably contributing to my motivation towards this project.

During the first few weeks, my main focus was to gain a better understanding of Tumblr themes, why it is significant and what languages are used to customise one, before commencing the project.

According to Schenker (2016), a Tumblr theme is a preset graphics package that can be easily manipulated and personalised based on the user’s preference.

Some of these aspects include:

Colours

Navigation menu

Images

Typography

Tone

Gaining extensive freedom and control over one’s Tumblr page can therefore be regarded as empowering, especially individuals in the creative industry such as writers, designers, photographers and aspiring bloggers.

The required language in customising a Tumblr theme on the other hand, is HTML. Provided in the Coding Resources is Macquarie University’s undergrad subject MA240 Cybercultures (2014), where HTML is specified as HyperText Markup Language. The responsibility of HTML is further explained by GetSmarter (2017) which is to create the basic structure and content of a webpage. Another language that is used in a Tumblr theme is CSS. Cascading Style Sheets, widely known as CSS is responsible for designing the webpage that covers aspects including colours, layouts and fonts (W3C 2016).

Through the various research conducted, what I have learnt is that these languages work collaboratively to create a functional and aesthetically pleasing Tumblr theme. In addition, a language that can be applied in a Tumblr theme is JavaScript. Its role is to engage users through highlighting the interactive elements of a webpage (GetSmarter 2017). However, in the Tumblr theme I aim to create, the languages that will be used are HTML and CSS as it is the most basic and realistic approach towards creating the project.

Furthermore, it is important to keep in mind that the Tumblr theme is for blogging purposes where the content of the blog is typically the most valued as it is what keeps the users engaged. Therefore, focusing on creating a functional theme and applying basic CSS code in the next few weeks are extremely important rather than tackling aspects that may be unrealistic and irrelevant to the goal.

After learning the significance of each language and evaluating what needs to be learnt and applied in the code, navigating a variety of industry sources was the next key step. This involved the Tumblr website (2016), Tumblr blogs and video tutorials that provided step-by-step instructions on how and where to apply these languages. 

What can be found below are instructions provided by Tumblr on where to apply the code and a basic example of a structure.

Now that I am familiar with the languages, the next steps would be sourcing basic templates that I can design and customise, assisted with tutorials found online.