ScienceTony's Journal: Learning Curve2023-05-02T21:56:29+00:00http://sciencetony.github.io/blogScienceTonydreamazium@gmail.comSocial Media Cards2020-03-02T00:00:00+00:00http://sciencetony.github.io/blog/2020/03/02/Social-Media-Cards<h2 id="task-outline">Task outline</h2>
<p>Whenever I share my webpage to social media, I either get the wrong image displayed or nothing is displayed. Fix this problem.</p>
<h2 id="output-or-results-of-activity">Output or results of activity</h2>
<ul>
<li>Facebook now displays the correct image.</li>
<li>Twitter now displays the correct card.</li>
</ul>
<h2 id="comments-on-knowledge-and-skills-demonstrated">Comments on knowledge and skills demonstrated</h2>
<p>This required searching the internet for the appropriate instructions.<br />
Once i found the correct site, it was straight forward in fixing Facebook although Facebook debugger is still complaining about some errors.
However, it works! Twitter involved adding some meta tags and validating on their website.</p>
<p>First, I added the meta tags to the header as suggested at the Open Graph Protocol website.
The twitter tags I got from SangFroid Web Design.</p>
<ul>
<li>og tags are for Facebook.</li>
<li>twitter tags are for twitter.</li>
</ul>
<p>Next, I logged in to Facebook and went to the debugger page and followed the instructions.</p>
<h3 id="resources">Resources:</h3>
<p><a href="https://developers.facebook.com/tools/debug/og/object/">Facebook Debugger</a><br />
<a href="https://cards-dev.twitter.com/validator">Twitter Card validator</a><br />
<a href="https://ogp.me/#types">Open Graph Protocol</a><br />
<a href="https://www.sangfroidwebdesign.com/web-design/facebook-share-image-is-wrong/">SangFroid Web Design</a><br />
<a href="https://css-tricks.com/essential-meta-tags-social-media/">The Essential Meta Tags for Social Media</a></p>
Creating Web App Manifest2020-02-19T00:00:00+00:00http://sciencetony.github.io/blog/2020/02/19/Creating-Web-App-Manifest<h2 id="task-outline">Task outline</h2>
<ol>
<li>Validate each webpage of sciencetony.github.io</li>
<li>Test each page using audits within Google developer tools.</li>
<li>Reduce any errors, warnings and suggestions thrown by Google developer tools
for my webpage. Holding down <kbd>Option</kbd> + <kbd>Cmd / Ctl</kbd> + <kbd>I</kbd> will open Google developer tools; obviously, in Chrome browser.</li>
</ol>
<p>About PageSpeed Insights <a href="https://developers.google.com/speed/docs/insights/v5/about">PageSpeed Insights</a></p>
<h2 id="output-or-results-of-activity">Output or results of activity</h2>
<p>A particular point of interest was the ‘Progressive Web App (PWA)’ section of the tests.<br />
This was failing on many issues:</p>
<ul>
<li>Fast and reliable.</li>
<li>Installable.</li>
<li>PWA Optimized.</li>
</ul>
<p>I decided to investigate PWA Optimized, which meant reading and researching on the internet until I found a solution:
create a web app manifest.
After creating the web app manifest, all the errors in the PWA Optimized section went away and ‘Web app manifest meets the installability requirements’ in the ‘Installable’ section.
However, problems related to the service worker remain since it is about to be depreciated.</p>
<h2 id="comments-on-knowledge-and-skills-demonstrated">Comments on knowledge and skills demonstrated</h2>
<p>This took a lot of reading and researching on the internet until I found a solution.
Once I found a solution, it was simple to understand the code and instructions in order to make the final solution workable for my needs.
This involved altering the code in the webmaster file, which I chose to save as a JSON extension. It turns out that the code is JSON, yet I could have saved it as a webmaster extension.
Once I added this to the site, I referenced it in the header, this solved most of the problem. Some warnings in the PWA still remain because of the service worker. Notably, the file has some mandatory aspects such as icon for splash screens and name amongst others.
Now, when I went to developer tools in chrome, under the ‘Application tab’ I could see the web manifest.</p>
<h3 id="resources">Resources:</h3>
<p><a href="https://developer.mozilla.org/en-US/docs/Web/Manifest">MDN Web docs</a><br />
<a href="https://web.dev/add-manifest/#create-the-manifest.webmanifest-file">web.dev</a><br />
<a href="https://developers.google.com/speed/pagespeed/insights/">PageSpeed Insights</a></p>
Functional website2020-02-08T00:00:00+00:00http://sciencetony.github.io/blog/2020/02/08/Functional-website<h2 id="task-outline">Task outline</h2>
<p>Make the website functional by adding an interactive quiz. <br /><br />
<strong>Complete the following:</strong></p>
<ul>
<li>Use multiple choice answers and a submit button for each question.</li>
<li>After submitting, button must be greyed out.</li>
<li>Feedback is either a:
<ul>
<li>green tick and green background to correct answer. text.</li>
<li>red cross and red background to incorrect answer text.</li>
</ul>
</li>
<li>Show number of correct answers and total number of questions answered after each question.</li>
<li>Calculate parentage (user most invoke this by pressing a button). This button must be greyed out until all questions have been attempted.</li>
<li>This must be created as a card and placed on the ‘My Faith’ page.</li>
<li>All code must be validated. <br /></li>
</ul>
<p><strong>Technologies to be used:</strong></p>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript (JS)</li>
</ul>
<h2 id="output-or-results-of-activity">Output or results of activity</h2>
<p><a href="https://sciencetony.github.io/my_faith.html">Quiz</a> <br />
The quiz works as planed.</p>
<p>I found this an interesting project to complete.</p>
<h2 id="comments-on-knowledge-and-skills-demonstrated">Comments on knowledge and skills demonstrated</h2>
<p>I used a lot of already learned knowledge to create the HTML and style with CSS. However, I needed to learn more JS in order to complete the project. This involved searching the internet and finding suitable learning and resource sites. For this project I used a lot of functions and both local and global variables. With some thought, I was able to put some code into functions that can be called by the other functions when needed; thus, cutting down on repeated code. I chose to used radio buttons for the questions since only one answer is needed to answer a question. <br /></p>
<picture>
<source media="(min-width: 859px)" srcset="/images/forBlog/functionalWebsite/radio60.jpg" />
<source media="(min-width: 573px)" srcset="/images/forBlog/functionalWebsite/radio40.jpg" />
<img src="/images/forBlog/functionalWebsite/radio20.jpg" alt="Radio Buttons" style="width:60%;" />
</picture>
<p><em>Figure 1 example of question with radio buttons used to select an answer.</em> <br /></p>
<picture>
<source media="(min-width: 905px)" srcset="/images/forBlog/functionalWebsite/CorIncor60.jpg" />
<source media="(min-width: 603px)" srcset="/images/forBlog/functionalWebsite/CorIncor40.jpg" />
<img src="/images/forBlog/functionalWebsite/CorIncor20.jpg" alt="Correct and incorrect answers" style="width:60%;" title="Correct and incorrect answers" />
</picture>
<p><em>Figure 2 example of correct and incorrect answers.</em></p>
<p><strong>Areas investigated and things learned:</strong></p>
<ul>
<li>Using variables in HTML. This involved finding out about <code class="language-plaintext highlighter-rouge"><var></code> elements.</li>
<li>I learned about using <code class="language-plaintext highlighter-rouge">word-break: break-all;</code> in CSS to brake up long unbroken example code displayed in HTML. This is handy for small view ports.</li>
<li>Learned about and how to use the JS’s <code class="language-plaintext highlighter-rouge">.createElement()</code> to creat a new HTML element.</li>
<li>Learned about JS’s <code class="language-plaintext highlighter-rouge">.appendChild()</code>, which creates and appends a new element in the specified HTML.</li>
<li>Learned about JS’s <code class="language-plaintext highlighter-rouge">.disabled = true</code>, which is used to disable a button.</li>
<li>Code to indicate that JS functions where awaiting use by user activity. <code class="language-plaintext highlighter-rouge">/*eslint-env browser*/</code> at the top of the JS page stopped a lot of non-defined errors and <code class="language-plaintext highlighter-rouge">/* exported functionName */</code> stopped defined but never used errors, however, this needed to be placed just before the function or at the top of the page in a list separated by commers.</li>
<li>I learned to tidy up the JS and make it easier to read.</li>
</ul>
<h3 id="resources">Resources:</h3>
<p><a href="https://www.w3schools.com/">w3schools</a> <br />
<a href="https://stackoverflow.com/">stackoverflow</a></p>
Web Services2019-10-21T00:00:00+00:00http://sciencetony.github.io/blog/2019/10/21/Web-Services<h2 id="task-outline">Task outline</h2>
<p>Find out about web services.</p>
<h2 id="output-or-results-of-activity">Output or results of activity</h2>
<p>Web services allows you to expose the functionality of your existing code over the network.
Once it is exposed on the network, other application can use the functionality of your program.</p>
<p>I learned about 2 approaches to web services:</p>
<ul>
<li>SOAP</li>
<li>REST</li>
</ul>
<p>SOAP uses xml, has headers, a body, is transported over the internet using http and is a standard in its own right while REST uses standard internet protocols, has less overheads than SOAP and is not restriced to xml: it can use JSON too.</p>
<h2 id="comments-on-knowledge-and-skills-demonstrated">Comments on knowledge and skills demonstrated</h2>
<ul>
<li>Spent a lot of time at the OU library reading</li>
</ul>
<h3 id="resources">Resources:</h3>
<p><a href="https://www.w3schools.com/xml/xml_soap.asp">What is SOAP</a> <br />
<a href="https://www.w3schools.in/category/restful-web-services/">What is REST</a></p>
Compress Your Images To Speed Up Your webpage2019-09-04T00:00:00+00:00http://sciencetony.github.io/blog/2019/09/04/speed-up-site<h2 id="task-outline">Task outline</h2>
<p>Check webpage load time and speed up site. In order to achieve this,
First, check the speed of my site using <a href="https://developers.google.com/speed/pagespeed/insights/">pageSpeed Insights</a> from Google.
Second, act upon analysis feedback and carry out at least one suggestion made.</p>
<h2 id="output-or-results-of-activity">Output or results of activity</h2>
<p>I spent many hours looking for different ways to check the speed of my site but Googles pageSpeed insights was by far the best.
The google resource made several suggestions including to ‘<em>Serve images in next-gen formats</em>’, which i followed up on.
However, the recommended formats do not cover all the browsers. For instance, webP does not work with Safari! The problem I have is that the images in the slideshow are selected by the JS file, which is making it difficult to select the needed image for view port size and image type. It looks as though i will need to redo the slideshow using html instead of javaScript in order to use the picture element. Not to be deterred, I found a site that compresses jpeg file called <a href="https://compressjpeg.com/">compressjpeg.com</a> and reduced the size of the image files by up to 85%. I further reduced file size by reducing the pixel size of the images. This will have to do until i change the slideshow from javaScript to html and css.</p>
<h2 id="comments-on-knowledge-and-skills-demonstrated">Comments on knowledge and skills demonstrated</h2>
<ul>
<li>Using the internet as an information resource.</li>
<li>Knowing which sites give or are likely to give the best information.</li>
<li>Knowing to check out all scenarios.</li>
<li>Determination.</li>
</ul>
<h2 id="what-i-learned">What I Learned</h2>
<p>There are next gen formats for images, but they do not yet cover all browsers. See <a href="https://caniuse.com/#feat=webp">webP browser support</a>, <a href="https://caniuse.com/#feat=jpeg2000">jpeg 2000</a> and <a href="https://caniuse.com/#feat=jpegxr">jpeg XR</a>. This is very reminiscent of the browser wars of the 1980s.<br />
<strong>Next gen formats:</strong></p>
<ul>
<li>WebP.</li>
<li>jpeg 2000.</li>
<li>jpeg XR.</li>
</ul>
<p>Browser detection is possible using the picture element.</p>
<h3 id="resources">Resources:</h3>
<p><a href="https://developers.google.com/speed/pagespeed/insights/">pageSpeed Insights</a><br />
<a href="https://developers.google.com/speed/webp/faq#how_can_i_detect_browser_support_for_webp">WebP</a><br />
<a href="https://developers.google.com/speed/webp/faq#how_can_i_detect_browser_support_for_webp">Webp FAQ</a></p>
Using Includes2019-08-09T00:00:00+00:00http://sciencetony.github.io/blog/2019/08/09/using-includes<h2 id="task-outline">Task outline</h2>
<p>Create an about me file for includes, so i just have the one file to change. <br />
Complete this the weekend.</p>
<h2 id="output-or-results-of-activity">Output or results of activity</h2>
<ul>
<li>This was striaght forward.</li>
<li>The “about me card” can now be used anywhere; however, it must be included within <code class="language-plaintext highlighter-rouge">html <div class="card"></div></code> if it is to be used as a side card.</li>
</ul>
<h2 id="comments-on-knowledge-and-skills-demonstrated">Comments on knowledge and skills demonstrated</h2>
<ul>
<li>This is a liquid tag: { % include file.html % }</li>
<li>The liquid tags must be correct or the file will not compile.</li>
<li>The liquide tags must be in the location I want them.</li>
</ul>
<h3 id="resources">Resources:</h3>
<p><a href="https://youtu.be/HfcJeRby2a8">Includes video</a>
<br />
<a href="https://www.youtube.com/playlist?list=PLLAZ4kZ9dFpOPV5C5Ay0pHaa0RJFhcmcB">Full play list</a></p>
Finding out about Jekyll2019-08-07T00:00:00+00:00http://sciencetony.github.io/blog/2019/08/07/finding-jekyll<h2 id="task">Task</h2>
<p>Since I cannot use php, I need an alternative. <br /><br />
Today, I learnt about <strong>Jekyll</strong> and how i can use include. First I needed to make an <code class="language-plaintext highlighter-rouge">_includes</code> directory and then I set about making the files.
<br />
<br />
Where php uses require, <strong>Jekyll</strong> uses include within double %, which in turn is within curly braces as follows:
{ % include [insert name of html file] %}. Note, you will not need the [] brackets.
<br />
Like php, i can now create blocks of code and then use include to call them when i need them. I can also us different default templates and storm them in the <code class="language-plaintext highlighter-rouge">_Layouts</code> folder. <br />
I made a <code class="language-plaintext highlighter-rouge">_layouts</code> directory and added a default template to it. <br /><br />
This will make maintenance much easier now.
<br />
<br /></p>
<h3 id="resources">Resources:<br /></h3>
<p>This gets me stared and has <a href="http://jmcglone.com/guides/github-pages/">info about making a blog</a>
<br />
Video lessons on <a href="https://youtu.be/HfcJeRby2a8">Jekyll</a></p>