website/webdevelopment/gsfullstack/build.js

import { addBanner, addArticle, addTitle, addHeader, addParagraph, addClassParagraph, addSubHeader, addOrderedList, addUnorderedList, addBlockquote, addInset, addInsetList, addInsetCodeListing, addInsetBulletList, addImageWithCaption, addButtonGroup, addSidebar, addSyntax, menu, global_menu } from '/scripts/import.js';
import { local_menu } from '/scripts/webdev.js';

const heading = document.querySelector(".heading");
const global = document.querySelector(".global_menu");
const local = document.querySelector(".local_menu");
const sidebar = document.querySelector(".sidebar");
const main = document.querySelector(".main_content");

heading.append(addTitle("Getting Started as a Full Stack Developer"));
heading.append(addParagraph("Tom Geller - LinkedIn Learning - August 2021"));
heading.append(addParagraph("Chapter 9 - Build on the Work of Others"));

main.append(addHeader("Uncover Hidden Technologies wth Wappalyzer"));
main.append(addParagraph("There are a number of tools that can help you analyze web sites to help with your learning and one of these is wappalyzer which can be added as an extension to a browser and you can get it <a href='https://www.wappalyzer.com/apps'>here</a>.  Once installed, you can then visit the website you are interested in and either click on the wappalyzer icon or click on extensions and then click the icon."));
main.append(addParagraph("To demonstrate this, I treid it on amazon.co.uk and you can see the results in figure 34."));
main.append(addImageWithCaption("./images/amazon.png", "Figure 34 - using wappalyzer to check the technologies used on amazon.co.uk."));
main.append(addParagraph("The data displayed by wappalyzer provides some links.  For instance, you can click on Programming Languages (if it is shown) or click on one of the listed technologies which takes you to a page on the wappalyzer site that shows you which sites use that language or technology most.  You can also explore the wappalyzer site to look at technologies you are interested in to see which sites are using it.  Figure 35 shows the market share enjoyed by various programming languages on 2022 which might be an indicator of what you want to stydy next!"));
main.append(addImageWithCaption("./images/languages.png", "Figure 35 - programming language technologies market share 2022."));
main.append(addParagraph("Another use case where this sort of information might be useful is where you are going for an interview.  You can use this to analyse the website of the company you are interviewing for ahead of time to learn about the technologies they use."));
main.append(addParagraph("In addition to wappalyzer, there are a couple of other tools you can use to find out what technologies a website is using and these are"));
main.append(addSubHeader("builtwith.com"));
main.append(addParagraph("This is an online tool which allows you to insert a URL and it will return various bits of info about that site, some of which can be seen for my own website in figure 36."));
main.append(addImageWithCaption("./images/builtwith.png", "Figure 36 - using builtwith to check the technologies used on my own website, osztromok.com."));
main.append(addParagraph("You can access this site by clicking <a href='https://builtwith.com/'>here</a>."));
main.append(addSubHeader("whatruns.com"));
main.append(addParagraph("This is an is an extension which can be added to Firefox and (I assume) other browsers.  I installed it and used it to check out the whatruns site and you can see the results in figure 37."));
main.append(addImageWithCaption("./images/whatruns.png", "Figure 37 - using whatruns to check the technologies used on whatruns.com."));
main.append(addParagraph("You can access this site by clicking <a href='https://www.whatruns.com/'>here</a>."));
main.append(addParagraph("Using tools such as these can be very helpful in learning about different technologies but can also help you to understand current trends in technology usage."));
main.append(addHeader("Wed Development Standards and Best Practices"));
main.append(addParagraph("Standards are everywhere and that is true of Web Development where there are various different types of standard a web developer should be aware of."));
main.append(addSubHeader("International Standards"));
main.append(addParagraph("The most common international standards you will encounter in Web Development are probably from ISO (International Standards Organization) which governs standards such as language codes.  When you see a line such as"));
main.append(addSyntax('&lt;html lang="en"&gt;'));
main.append(addParagraph("in an HTML document, the 'en' tells the browser that this page is in English and the code for English, 'en', is an ISO standard."));
main.append(addParagraph("The IETF (Internet Engineering Task Force) sets the standards for things like domain names and HTTP."));
main.append(addParagraph("The W3C (World Wide Web Consortium) is a standards organisation that most developers will be very familar with since it sets the standards for HTML and CSS.  As such, you will probably spend a lot of time looking up these standards since they will likely have a direct bearing on development work."));
main.append(addParagraph("Unicode sets the standards for various issues relating to type and this includes emojis."));
main.append(addParagraph("Depending on the industry in which you find yourself working, there may be additional standards for that industry.  As an example, in the Finance industry, most countries have some stanards relating to the keeping of financial records which you may need to work with if you are designing a web app or site that stores financial data."));
main.append(addSubHeader("Technology Standards"));
main.append(addParagraph("These include standards for languages (including PHP, JavaScript and HTML), libraries and frameworks (including React, Bootstrap and jQuery) and software (such as Apache).  As a general rule, the best place to get information on these standards is either from the website of whoever maintains the standards or a related website you can find by searching for it.  As an example, let's say that you want to look into the standards for HTML. The top result I got was for <a href='https://www.w3.org/standards/'>w3c.og</a> which takes you to their home page which is not actually where the standard is described but you can get to it from there."));
main.append("The next result is for the <a href='https://html.spec.whatwg.org/'>HTML standard.  This is a long and technical document so the chances are that you will use it primarily as a reference.  Other results include a link to a page on the MDN Web Docs entitled <a href='https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/The_web_and_web_standards'>The web and web standards</a> and there are links to some other interesting articles and tutorials, not all of which are strictly standards-related.  For example, there is a link to an HTML Introductory tutorial on <a href='https://www.w3schools.com/html/html_intro.asp'>w3schools.com</a>.")
main.append(addParagraph("In general, information on standards relating to a specific web technology can be found via a simple Google search.  For example, if you search for bootstrap, the first result returned should be at <a href='https://getbootstrap.com/'>getbootstrap.com</a> which is a good place to go to for the information you need.  From here, you can click on links to, amongst other things, the Docs, Examples and the Bootstrap Blog."));
main.append(addParagraph("There are other standards, which may be local standards, a web developer might need to be aware of and this includes the following."));
main.append(addSubHeader("Web Host"));
main.append(addParagraph("Your web host might have rules regarding how you login, how much data you can transfer etc.  This can even apply for someone who, like myself, hosts their own website.  For instance, over time I have developed ways of working that might be considered standards covering things like how I transfer files to the web server and how I copy them to the directory containing the active website, how I backup the site, how I use version control and so on.  I also have standard practices for how I develop each new page as I create it for the site."));
main.append(addSubHeader("Other Service Provider (API)"));
main.append(addParagraph("API providers, especially those requiring you to use an API key such as openweather.org (as we saw earlier) will have standards that a developer is required to adhere to in order to use the service."));
main.append(addSubHeader("The Client"));
main.append(addParagraph("If you are developing a site for a client, they may well have standards that they expect you to adhere to such as standard (corporate) colours or graphics they want to include in every page you develop for them such as a company logo."));
main.append(addSubHeader("The Law"));
main.append(addParagraph("In most cases, you can think of this as a more esoteric standard that you can usually ignore unless there is some particular law that you think that your website may fall foul of.  The most common law you are likely to have to worry about is probably copyright.  As an example, this page is part of a series of pages of notes on the Getting Started as a Full-Stack Web Developer course on LinkedIn Learning and this is, of course, copyrighted material.  As such, I contacted LinkedIn to ask for permission to create this and most of the pages on this site which they kindly gave.  Since this site is basically my notes on the course rather than the actual course materials created by LinkedIn, it is likely that they don't infringe copyright laws in any case, but I think that it is a good idea to obtain permission in this type of situation and I think that it is just important that the site is clear about the fact that these pages relate to courses from LinkedIn Learning and give full credit to the lecturer (in this case, Tom Geller) and also to LinkedIn."));
main.append(addSubHeader("Society"));
main.append(addParagraph("This is another type of standard that you will rarely have to think about but there are potentially issues of taste and custom that you may need to be aware of when developing a site.  Something that arguably falls into this category is being aware of the needs of the society your website is meant to serve.  My site is not really intended for general consumption. it's really just something I created in order to learn about web development so this is relatively unimportant for me, but you may need to take into account the needs of your intended audience (even if that is just yourself).  For example, I want to be ablew to access my website from any suitable device including a PC, a tablet and a smartphone so it needs to be responsive.  If it were intended for general use, it would be more important to take into account accessibility.  That being said, since I am learning web development, it is important to follow good practices including as these relate to accessibility.  For example, all of the images on this page have a caption and an alt tag with the same caption so that should help anyone who decides to visit my site if they are using screen-reader software."));
main.append(addParagraph("In some cases, there may be real consequences if you fail to follow a standard and this might include your website not working or not being either sufficiently resonsive or accessible.  Some standards are just suggestions so you can choose to follow or ignore them.  In such cases, whether you follow a suggested standard or not may depend on whether you are a sole developer or working as part of a team or even if these is a possibility that someone else may have to work on your site in the future."));
main.append(addParagraph("As a general rule, the best advice is probably to follow all of the standards that you have to and to follow suggested standards that you are aware of unless you have a good reason not to."));
main.append(addHeader("Free Resources in the Open-Source World"));
main.append(addParagraph("In general, open software can be freely downloaded, modified and redistributed, but there are several important points to consider in this respect.  Firstly, the principle of free software is based on the idea that software should be free as in free speech rather than as in free beer (this quote is attributed to Richard Stallman).  The actual terms of use are determined by the licences the software is released under and there are a lot of these as you can see on the wiki page, <a href='https://en.wikipedia.org/wiki/Comparison_of_free_and_open-source_software_licenses'>Comparison of free and open-source software licences</a>.  For more information on this, you may want to read Stallman's book, Free as in Freedom."));
main.append(addParagraph('<iframe type="text/html" sandbox="allow-scripts allow-same-origin allow-popups" width="336" height="550" frameborder="0" allowfullscreen style="max-width:100%" src="https://read.amazon.co.uk/kp/card?asin=B00U0K2TVI&preview=inline&linkCode=kpe&ref_=cm_sw_r_kb_dp_CWPHZRZMWXT7VQNPPD8Z" ></iframe>'));
main.append(addParagraph("Most of the software used on the server, including everything in an AMP stack (Apache, Mysql and PHP) is open source but it is less usual for software that you will use on the client side to be open-source.  To illustrate the previous point, Microsoft offers a free version of Visual Studio and also Visual Studio Code which I beleive is completely free but these are not open source.  You can't modify the code."));
main.append(addParagraph("It is worth remembering that a lot of the open-source software you will use is not installed explicitly but is actually installed as a dependency when you install some other package."));
main.append(addParagraph("In somce cases, open-source software is free and doesn't come with support, but also has a paid for version that is supported.  A good example of this is Wordpress.  You can download this for free at <a href='https://wordpress.org/'>wordpress.org</a>.  There is also another site you can get Wordpress from and that is <a href='https://wordpress.org/'>wordpress.com</a> but you have to pay for it if you get it here.  This site also hosts many Wordpress websites."));
main.append(addHeader("Extend Your Code with Frameworks and Libraries"));
main.append(addParagraph("You will often find that some problem you need to solve has already been solved at some point in the past and there are different ways in which you can take advantage of these solutions.  A good example of this is the date picker in our reservation form on the project website.  This is now a standard feature of HTML so you don't need to create your own date picker."));
main.append(addParagraph("In some cases, the solution may be a snippet of code found on the Internet somewhere.  These are often solutions that have not yet become standards.  These snippets of code, or similar solutions, can be gathered together to create a library and jQuery is a good example of this.  You can download jQuery from <a href='https://jquery.com/download/'>jquery.com</a>.  It is open-source so you can view the code if you like and you can find that <a href='https://code.jquery.com/jquery-3.6.1.slim.js'>here</a> or from the jquery download page by clicking on the link to the uncompressed file."));
main.append(addParagraph("A framework is similar to a library but generally more complex since it will often include everything you need for a website that you just need to customise for your own use.  This can include HTML, CSS, JavaScript, PHP, layouts and other things."));
main.append(addParagraph("A good example of a framework is <a href='https://getbootstrap.com/'>Bootstrap</a> which you can get by clicking the link.  There are various ways of using Bootstrap and you can use it as a library or a framework.  For instance, you can incide a link in your site to a remote copy of Bootstrap which your site can then access or you can download and install it.  Note that if you are using the online version, there are downsides to that including the fact that you need to be able to access the site for your own site to work so if there is a change to the URL or the online version is temporarily or permanently unavailable, that may well break your site."));
main.append(addParagraph("Another thing that it is important to bear in mind when you are learning web development is that solving problems can be an excellent aid to learning and so getting a ready-made solution may hamper that.  Ideally, you would want to learn how to solve problems yourself before getting a solution from the Internet.  Conversely, the ability to use libraries and frameworks is a valuable real-world skill so you will almost certainly want to develop that aspect of development."));
main.append(addHeader("Develop for Content-Management Systems"));
main.append(addParagraph("In developing the website for the Landon Hotel, we have largely done this from scratch in that the site has been created by writing HTML, CSS, JavaScript and PHP and this is one way to develop a website.  Howevert, nowadays, a professional web developer may be developing sites using a Content Management System (CMS) such as Wordpress or Drupal.  This will usually mean development is faster and you can more easily set it up so that a client without web development skills can keep the site up to date."));
main.append(addParagraph("There are a lot of CMSs and you can see a list of these on the wikipedia page, <a href='https://en.wikipedia.org/wiki/List_of_content_management_systems'>List of Content Management Systems</a>.  The major difference between web development as we have seen it in this course and development with Wordpress is that Wordpress works like a sort of controlled environment much like an online web builder such as Wix or SqaureOne.  As an example, Tom's own website is built with Wordpress and you can find it at <a href='https://tomgeller.com/'>tomgelller.com</a>.  The site also includes an admin page at <a href='https://tomgeller.com/wp-admin'>tomgelller.com/wp-admin</a>."));
main.append(addParagraph("If you go to that URL, you will be asked to enter the admin credentials for the site which, of course, we don't have, but entering these correctly would give us access to the site's backend.  You can then click on the site name to view the front end as it looks on the first link, but there would also be a menu bar with various options including, for instance, adding a new page or user or editing the current page."));
main.append(addParagraph("Another thing worth mentioning about a typical CMS such as Wordpress is that all of its data including the site content is stored in a database.  In the case of Wordpress, that is mysql and you can use phpmyadmin to work on it."));
main.append(addParagraph("At the moment, using a CMS is not something I am currently interested in but if you want to get into one, the best approach is to study the documentation and check out available courses on LinkedIn Learning.  For Wordpress, there are currently 55 courses and 3 learning paths.  The next most popular CMS is probably Drupal (12 courses and 1 learning path) and then Joomla (8 courses, no learning paths)."));

addSidebar("webdev");