Journal 6

There is no end when it comes to source code

This was such an incredibly difficult project to try and achieve, I feel like I now know and appreciate just how complex and difficult coding is and like all languages (Italian, Chinese, Arabic) it is not something you can just pick up in a day and be fluent in. I have so much respect for the people who work in this industry. This is by no-means an easy job and requires a special kind of patience and problem solving. I understand now why software is so expensive and why it needs to be – these projects are complex and intricate and require years of knowledge.

I also feel like I’ve learnt so much over the past few months and although I’m a little disappointed I didn’t choose an easier project with available tutorials and a 1,2,3 step process to follow – I actually feel like what I’ve learnt and achieved is going to be incredibly useful in my career and hopefully the early stages of my code literacy.

The process was a lot of head banging against a wall, reading so many forums and chat rooms till your eyes got dizzy and trying to understand complex programmer language but I got there in the end. Interestingly some of those earlier forums I went to find answers in, I’ve had to go back to and I’ve realised I now understand what they are saying and can decipher their advice. I’ve even just noticed the way I explain functions and processes within source code and computer science has improved. Instead of saying ‘that button thing on the page’ I now know that they are in fact called widgets and they have their own limitations and boundaries. The same goes for my understanding of how websites work, and how easy it is to break them with the smallest ‘ or missing }. I also love that I can properly appreciate the beauty of CSS and HTML. It’s meant I can stay realistic with what can be achieved within a website and now know what isn’t worth spending time on.

Additionally, what I’ve really loved learning has been the history of programming, particularly hearing about the great female pioneers of computer science.

One woman in particular really stood out for me, she was brilliant and is one of the reasons why we can even program languages the way we do today. Grace Hopper grew up in a time where women were laughed at for attending universities and yet she was the first woman to program the first computer in the United States, they called her ‘Amazing Grace’. (Marx 2004:8).

I really hope we start to teach young girls about women like Grace. Being able to code and program is an art, it should be highly respected and it should be taught like any other language in school. It really is the glue that holds together this big fast changing modern world and i’d love to see an industry like programming encourage women to join.

grace-hopper-670x410

References

Marx, C., 2004, The First Woman to Program the First Computer in the United States, 1st ed, Rosen Publishing Group, New York.

 

 

 

Journal 5

Creating and editing a file upload form.

The next step was being able to create a plugin that allowed for file submission. It took a while to find a plugin that was open sourced and free to use. I ended up choosing a plugin called ‘Frontend Loader’  this file was available in its full PHP version and also provided WordPress short-code.

The most simple version of short-code was: -fu-upload-form- this created a really basic form on the website however had some flaws in functionality, such as: when a user writes an article they are unable to submit a text file without uploading media. The biggest issue with this was there was no prompted error message, so the user could write an article and submit it and a prompt would come up saying ‘file submission successful’ (as seen below) however no file was submitted in the WP Admin section and the admin would be none-the-wiser as to whether a file had been uploaded or not.

Please note: I have had to use – in replacement of [ as short-code is programmed to create the file on WordPress pages. 

-fu-upload-form-

file successful

With the following code I’ve been able to create an error message by using the following short code, unfortunately I still can’t get the form to work by submitting with out a media attachment and I am still unable to work out the short-code to (at the very least) change the title….

Here’s the code that has allowed an error message. I’m not sure what ‘security check failed’ refers to. However you are still able to successfully submit a form with an attachment with the below short code – as long as it is an image file which isn’t ideal.

-fu-upload-form input type=”file” name=”my-file” id=”your-media-files” class=”validate”-

Screen Shot 2018-10-20 at 8.19.35 pm

I have just realised that my short-code has now corrupted all of my previous short-code which means I can’t revert back to the original short-code (even if it had minor flaws).

I am going to try to see if fiddling with the short-code makes a difference.

…After a ridiculous amount of scrolling through the comments section of the plugin page, I was able to figure out the reason why I was getting this security error. Every time I changed the code (thinking it would work) I’d get this error message. Apparently it is a problem with something called a cache?? And apparently I need to delete a ‘cache’ to make it work again..and clearing the cache hasn’t worked.

I’ve also found through my research how to edit the title name using this short-code so I can warn people that they need to upload a file. It was a bit fiddly as I had to edit someone else large short-code file to suit my needs but this one works now!

-fu-upload-form class=”html-wrapper-class”

form_layout=”media” title=”Upload your media – please note we will not be able to receive an article from you without an uploaded media file.”-

I’ve now also worked out how to create an entirely new form that allows different file types. Hopefully this will let me change the default settings to allow all file types.

-fu-upload-form suppress_default_fields=”true” form_layout=”post_media” title=””] [input type=”text” name=”name” class=”required” description=”Your Name*”] [input type=”text” name=”contact-phone” description=”Phone number”] [input type=”text” name=”contact-email” class=”required” description=”Email address*”] [checkboxes class=”checkboxes” name=”exhibition-interest” description=”Would you like us to contact you about showing this piece in a future exhibition?” values=”Yes,No”] [input type=”text” name=”post_title” class=”required” description=”What is the title of the artwork?* (Note: Use ‘Untitled’ if there is no given title.)”] [textarea type=”text” name=”description” description=”Are there any special notes you want us to know about the piece? Or the story of how you came to own it?”] [input type=”text” name=”date” description=”What date was the artwork created?”] [checkboxes name=”date-validation” class=”checkboxes” description=”Is the date approximate or exact?” values=”Approximate,Exact”] [input type=”text” name=”medium” description=”What medium(s) did Magu use for this piece?”] [input type=”text” name=”width” description=”Width”] [input type=”text” name=”height” description=”Height”] [input type=”text” name=”depth” description=”Depth”] [checkboxes name=”signed-validation” class=”checkboxes” description=”Is the artwork signed?” values=”Yes,No”] [input type=”file” name=”photo” multiple=”true” description=”If the work has writing or any markings on the back, please include an image of the back as well.”] [input type=”submit” class=”btn” value=”Submit”] [/fu-upload-form- 

THE END UPDATE:

I broke my short-code, had to remove the plugin, clear the caches and reinstall the program.

I was able to create an adapted version of the short-code to allow a different title to appear and thankfully the form will now accept PDF, Docs and Jpeg files after some fiddling.

I had a big issue with trying to edit the title on the form to show a better style of text as well as a few other stylistic bloopers. I tried multiple times to create a short-code that would differentiate between the two text or create a new title and it kept breaking the code… These are some examples of my attempt.

-input type=”text” name=”post_title” id=”title” class=”required” description=”please note we will not be able to receive an article from you without an uploaded media file.”-

-fu-upload-form class=”html-wrapper-class” form_layout=”media” title=”Upload your media” 

class=”html-wrapper-class” form_layout=”media” title=”please note we will not be able to receive an article from you without an uploaded media file” 

-/fu-upload-form-

I ended up using this CSS to both change the colour and size of the two titles, move the widget on the right hand side a little higher to accomodate for the chat box bubble and remove an ugly blue line that was appearing with the widget.

TITLE COLOUR & SIZE

/* Add note to frontend uploader form below form title */
.ugc-inner-wrapper h2::after {
content: ‘Please note we will not be able to receive an article from you without an uploaded media file. PDF/DOCS/JPEG’;
display:block;
color: grey;
font-size: 0.7em;
}

SIDEBAR
/*— move sidebar text higher up —*/
.main .sidebar.overlap {
margin-top: 0rem;
}

BLUE LINE 

/*— remove blue line from sidebar widgets / 1505174-zen JS —*/
.sidebar-main .widget:before {
border: none;
}

Journal 4

Finding, creating and editing a chat box plugin.

Programming a WordPress chatbox is going to be more difficult than I thought. It turns out you have to pay for good plugins and of course their code is not open source and additionally they usually cost a lot of money…so it took me about two days to find a plugin for a chat-box that allowed customization and didn’t ask for a payment.

The plugin I eventually settled on was ‘Tawk.to” they are listed as open source with a license stating:

“This source file is subject to the Open Software License (OSL 3.0) – Copyright 2018”

I am a little confused by this as I don’t quite understand how something can be ‘free and open source’ but copyright under a license? They have supplied the tawkto.php file so I have access to the code.

I have been able to alter a few details in the back end of the Tawkto plugin, like colour of chat box, font type, title and I have been able to create a function so the chat box registers when someone is on the page and sends them a welcome message.

I’ve also been able to edit multiple different versions of the plugin chatbox. It now has features that show an ‘offline form’ to fill out and an ‘away’ message when the admin are no longer logged into the site. There is also an option to upload a file in the chatbox for the admin to see.

However bcause these edits are built in from the back end, I’m going to see if I can edit the functions of Tawkto’s source code to 1. develop my understanding of PHP language and 2. because I’d like to change a few additional features like only allowing the chatbox to pop up on relevant pages.

Here is the source code for Tawk.to:

https://github.com/thirtybees/tawkto/blob/master/tawkto.php

I was able to change some additional features of Tawk.to by adding a speech bubble to appear above the chat box. Which looks like this:

Screen Shot 2018-10-20 at 7.41.34 pm

This was the original image that I had to embed above the Tawk.to plugin.

bubble-155333_1280

I was also able to create an alias so the user contact the website admin would not know the identity of the person talking to them, the plugin had a settings feature in the back end that looks like this.

Screen Shot 2018-10-20 at 7.46.36 pm

Unfortunately I’m going to stop working on tawk.to as I spoke to the owner of the plugin and as I feared the source-code is actually private. I feel due to their licence and an inability to edit their source-code there’s no room for me to grow my code literacy and overall I’m happy with the results I was able to achieve through their software.

 

 

Journal 3

Seeking professional advice.

I’ve decided to get some professional advice as it is impossible to find a starting point with my project. I know I have access to open source for the main programs I want to integrate and I now know some of the code languages like HTML and CSS talk to each other but I also now know that the more complicated languages require me to create a ‘wrapping library’ or ‘API’ and without being a professional with great code literacy, I won’t know how to do this.

Ben’s spoken to a developer friend who gave the following advice:

“I’m not sure how much help I can give as I’m not a programmer – but I’m pretty sure she’s biting off more than anyone on Earth can chew.

It sounds like she’s trying to reinvent this which probably cost a couple million bucks to build https://securedrop.theguardian.com

Journalism + encryption is a scary hard thing because it’s easy to fuck it up and in this particular problem space – fuck-ups get people killed.

Maybe what’s worth doing is taking this advice on board, and figuring out something a bit more feasible on a personal scale. e.g. figuring out how to implement PGP encryption just for yourself, what is involved with it, and how you might be able to use it (even just via email, rather than a plugin which adds a whole other layer of complexity and security issues).”

I think given I now know my project is insanely ambitious, I’m going to see if I can do some research on WordPress plug-ins to see if I can find one similar to what I was hoping to create. This way I can either (hopefully) work out how to edit it or create one from scratch. There are a few tutorials showing how to do this like here and here, however they both look like you need to have a basic understanding of how WordPress functions and of PHP programming which is the language plugins use as well as HTML and CSS to edit the visual aspects of the plugin. I have a pretty basic understanding of how WordPress works and I know the basics of HTML and CSS, so fingers crossed I can pick it up.

Firstly, I’m going to see if I can find an open source WordPress plugin that does one of the functions I want i.e chat box or file upload and see if I can look through the code to edit sections I want to change or alter.

Secondly, I’m going to attempt building a WordPress plugin from scratch using one of the two tutorials provided. I’m assuming I won’t be able to achieve this considering I don’t understand PHP, but at least I’ll have a better understanding of how WordPress plugins work and i’ll at the very least be further developing my code literacy skills.

I’ve had to upgrade my WordPress account to allow plugin integration which has so far been great, I’ve learnt a lot more about WordPress by doing this. I now understand the basics of how websites are coded.

Hayes (2017) discusses WordPress themes being a mixture of PHP, HTML. CSS and a tiny bit of Javascript. WordPress themes set out how the website looks and functions and widgets control functions like buttons and archive settings. WordPress Plugins are zip files or specific programs that you can install to tell a website to do something or behave in an extra way like adding an e-commerce store or filtering out swear words when users comment on pages.

I’ve also been able to edit the way the website looks by using CSS.

I wanted to remove the list of posts at the bottom of the page and the side bar so I used this CSS code:

/* hide the list of posts and sidebar from home page  – nagpai # 7225456-hc*/

.home .container.hfeed {

display: none;}

BEFORE:

Screen Shot 2018-10-19 at 9.43.40 PM

 

AFTER:

Screen Shot 2018-10-19 at 9.46.10 PM

And I wanted to remove a title that came up as a ‘category’ so I used this CSS:

/*  hide the Category:title on category pages */

.entry-archive-title {

display: none;}

BEFORE:Screen Shot 2018-10-19 at 9.43.04 PM

 

AFTER:

Screen Shot 2018-10-19 at 9.45.08 PM

 

References

Hayes, K., WP Shout, The Four Languages You Must Learn To Understand WordPress, viewed 5 October 2018 <https://wpshout.com/wordpress-programming-language/>

 

Journal 2

When source code makes you want to cry.

The first step to starting my project is working out how to combine the source code together for each inspired program. I can see it is possible to combine PHP, CSS, HTML and Javascript together, the issue is I don’t understand how to do this and what my limitations are.

From my understanding CSS and HTML have been written to work together, Turnwell (2013) explains this as HTML and CSS both being different types of markup (code) and that they have their own unique syntax (the way the code has been written). HTML is the structure for a page and CSS gives the HTML it’s style.

I believe the trickier of the two languages will be getting PHP and Javascript to communicate. King (2003) observes one of the main reasons why programmers get stuck with PHP and Javascript is a lack of understanding of what they both do and where one ends and the other takes over, “Javascript works only on the browser and PHP works only on the web server” (King 2003, pp1).

My other roadblock is not being able to find a definitive answer from an experienced programmer or a tutorial explaining how to combine them all together as one file. I’ve found plenty of chat rooms and posts on sites like Reddit who give ‘industry’ explanations of how it works but nothing that has been explained by an academic.

Ford (2015) believes “A coder needs to be able to quickly examine and identify which giant, complex library is the one that’s the most recently and actively updated and the best match for his or her current needs. A coder needs to be a good listener.” (Ford 2015, pp.3). So I’m going to take Ford’s approach and do my best to become a good listener.

What I’ve been able to work out from hours of scrolling Reddit forums and code forums is this:

There are three main processes involved with getting programming languages to speak.

Marshalling:
This refers to the process of converting an ‘object’ into something that can be loaded by another program. An ‘object’ can be a variable, a data structure, a function or a method and as such, is a value in memory referenced by an identifier. I’m still a little unsure what this means but I gather ‘marshalling’ allows the written code that identifies values and actions and can be translated into a new type of code that can be then understood by a new program.

Serialization:
This is very similar to ‘marshalling’ but is more to do with a developer being able to save the ‘object’ and recreate it into a different format that can communicate with other programs. From my understanding ‘serialization’ has more to do with memory and storage and ‘marshalling’ has more to do with translating code values and identifiers.

Language Binding:
This is the process of ‘gluing the code together’ and can kind of be understood as providing the ‘special code glue’. My basic understanding is ‘binding’ maps a pathway between different code languages. When you have multiple types of languages such as Javascript or C++ the ‘language binding’ requires a thing called a wrapper library that bridges the two programs together. I believe some languages like CSS and HTML offer a thing called a foreign functions interface that allows easy conversations and messages to be delivered between the programs. Now this is where it gets trickier, programs that don’t have a set up foreign functions interface need a special written thing called an application programming interface or ‘API’. It looks like API’s are sub-code languages that are specially set up to provide communication between more complex programming languages which means I might be in trouble….

At this stage I really don’t know if I can achieve what I’m hoping to achieve without being an expert coder and considering I don’t understand much more than the basics of coding maybe expecting myself to write an API is a bit much.

 

References

Turnwell, A., Alex Turnwall 2014, HTML & CSS: how they work together, viewed 20 September 2018.<http://www.turnwall.com/articles/html-and-css-work-together/>

King, S., itamer 2003, Using PHP and Javascript together, viewed 20 September 2018. <https://www.itamer.com/using-php-and-javascript-together/278/>

 

Journal 1

The project goal.

My aim is to build an interactive WordPress plug-in that allows users to submit documents, audio files and images to a website. The plug-in will allow private collaborative document editing and a private chat box that conceals the identity of the user and the admin of the website. There are a few programs that already exist in todays market, however the individual programs have important aspects like file sharing or collaborative text edit, unfortunately none are combined into one item of software.

I hope to find and access the open source code for each of the programs listed below and attempt to combined them together to create one program that can be embedded as a WordPress plug-in. The software each use different languages of code, examples of the programs can be seen below, the following is a list of suspected code language used for each program:

Signal: There is no mention of the programming language used for Signal, I suspect the code is incredibly intricate due to the credibility of its encryption. The great thing about Signal is it runs along an organisation called The Signal Foundation, who are dedicated to developing open source privacy technology that protects free expression and enables secure global communication. I have been able to locate the source code at GitHub.

Wikipedia: Runs on PHP 84% and 13.3% Javascript. PHP stands for: Hypertext Preprocessor and can be embedded into HTML. Wikipedia as well as Wikileaks uses software called a ‘Wiki’ which is a a website or database developed collaboratively by a community of users, allowing any user to add and edit content. From my research Wiki’s aren’t difficult to create, they are written in PHP and I’ve found a few tutorials where you can create something called a MediaWiki . With WordPress however they only allow specific WordPress Wiki’s, I’ve been able to find some examples of templates but nothing that is for free which is frustrating.

Mozilla Firefox Send:  This was a little harder to work out in terms of languages, they developed a programming language called ‘Rust’ to run a lot of their search engines, as well as (I think) a combination of Javascript and CSS. At this stage of my code literacy it’s very difficult to understand whether ‘Rust’ was used to create ‘Firefox send’. Mozilla’s calls themselves the Non-profit internet for the people, I can see they have links to their open source language for each of their pages and GitHub has their code listed here.

Sudo:  The organisation who own Sudo are called Anonyome Labs, it has been so far impossible to find any information on the type of code they use. However Anonyome Labs believe privacy is a human right so I’m hoping they also believe open source code is a human right. The reason why I like Sudo is because they provide the ability to remain completely anonymous, you can set up an avatar and message and talk to people privately and anonymously without revealing your identity. All other programs above require you to provide an email or phone number and require you to provide that to another person to talk to them which becomes an issue if you don’t want to share this information about yourself.

My goal is to somehow combine all of the code together and formulate one program where you can chat to someone without concealing your identity, share documents and edit documents collaboratively and hopefully this will allow people to share their stories and real life experiences with the world without risking their privacy or identity.

Screen Shot 2018-10-18 at 7.02.04 pm.png

Screen Shot 2018-10-18 at 7.02.21 pm

Screen Shot 2018-10-18 at 7.02.30 pm

Screen Shot 2018-10-18 at 7.02.38 pm