website/webdevelopment/gsfullstack/skills-Windows11.js

import { addBanner, addArticle, addHeader, addParagraph, addSubHeader } from '/scripts/article.js';
import { addInset, addInsetList, addInsetCodeListing, addInsetBulletList } from '/scripts/inset.js';
import { addImageWithCaption, addButtonGroup } from '/scripts/visuals.js';
import { menu } from '/scripts/web_dev_buttons.js';

const main = document.querySelector("main");
main.append(addBanner("<a href='https://www.linkedin.com/learning/getting-started-as-a-full-stack-web-developer?contextUrn=urn%3Ali%3AlyndaLearningPath%3A59370541498ec352a683231c'>Getting Started as a Full Stack Web Developer</a>", "Tom Geller", "Get Online with Web Hosting"))
main.append(addArticle())
const article = document.querySelector("article")
article.append(addHeader("Join the Discussion in Online Forums"))
article.append(addParagraph("There are plenty of places online where you can ask questions if you are really stuck with something or to answer questions asked by other developers.  There are a few 'rules' you will be expected to follow, however."))
article.append(addSubHeader("Research first and then ask"))
article.append(addParagraph("You will usually find that people are more than happy to answer questions for you, especially if the question relates to something unusual that they might learn from, but you shouldn't ask a question as an alternative to doing your own research first."))
article.append(addSubHeader("Ask in the right forum"))
article.append(addParagraph("This may be self-evident but if you are not familiar with a particular forum, you should check it's guidelines to ensure that it is the right place for your question."))
article.append(addSubHeader("Dispense with the intro"))
article.append(addParagraph("You are more likely to get a response if your question is short and to the point.  Actually, this is something that is taken quite seriously and there is even a page, <a href = 'https://dontasktoask.com/'>dontasktoask.com</a> explaining why shouldn't introduce yourself by asking a question like, 'are there any Java experts around?' and it does raise some interesting points."))
article.append(addSubHeader("Think about what you want to ask before you ask it"))
article.append(addParagraph("It can be easy to get side-tracked when asking a question and you are much less likely to get the answer you want if you didn't ask the question that it answers.  You can also find an interesting discussion on this point at <a href='https://xyproblem.info/'xyproblem.info and again, it is worth a read."))
article.append(addSubHeader("Ask the question"))
article.append(addParagraph("It is usally better to start with the general problem and then add more specific details.  If you need to provide a code sample, you should check the forums rules on posting code.  Some forums expect you to provide a link to an external site known as a pastebin (you can find one at <a href = 'https://pastebin.com/'>pastebin.com</a>) and you could also paste a link to a code sample in codepen.io."))
article.append(addSubHeader("Be nice"))
article.append(addParagraph("Always a good idea!  You may see an answer that you think is incorrect or shows that the respondant didn't understand the question.  For the former, you should be prepared to explain why you think it is wrong and you should accept that if your question has been misunderstood, that may be because the question was badly phrased."))
article.append(addParagraph("Report back"))
article.append(addParagraph("You should always follow up, especially if a solution was successful because that will help other people trying to solve the same problem."))
article.append(addSubHeader("Give back"))
article.append(addParagraph("Forums only work if people are willing to participate so it is a good idea to try to help others when you can and you can sometimes learn something new when doing that!"))
article.append(addParagraph("These guidelines are mainly common-sense but worth bearing in mind, especially if you are not getting answers when you ask questions."))
article.append(addHeader("The Joys and Sorrows of Copying Code"))
article.append(addParagraph("Often, you will find a solution a specific problem you research on the Internet leads to a snippet of code, so it can be tempting to copy and paste the solution in to your own code.  However, this can also lead to problems."))
article.append(addParagraph("To illustrate this, recall that in the project, we pre-populated the start and end dates with today's date and tomorrows date (relative to the date on which the site is being accessed).  Getting today's date is really easy and we can do that simply with"))
article.append(addInset("const today = new Date()"))
article.append(addParagraph("If we want to get tomorrow's date, that's a bit more complicate.  First, we want to create a variable and set it to today's date."))
article.append(addInset("const tomorrow = new Date(today)"))
article.append(addParagraph("We can then update the value of tomorrow by adding 1 to it."))
article.append(addInset("tomorrow.setDate(tomorrow.getDate() + 1)"))
article.append(addParagraph("This code was taken from a site called <a href='https://flaviocopes.com/how-to-get-tomorrow-date-javascript/'>flaviocopes.com</a>.  We could paste this code into our project files and this should show today's date as 24 September and tomorrow's date as 25 September if I were running the code today.  So it seems to work and so we might want to just go ahead and leave it in our code.  There is a problem, however, and that there is no checking of whether tomorrow's date is a valid date.  For example, if today's date happened to be 30 September, this would give tomorrow's date as 31 September."))
article.append(addParagraph("Actually, if you look at figure 34, this shows a sequence of commands run in the console setting todays date to 24 September 2022.  I then set tomorrows date to te same value and then increase it, outputting the value each time, until we get to the date after 30 September which in this case is 1 October."))
article.append(addImageWithCaption("./images/tomorrow.png", "Figure 38 - experimenting with tomorrows date in the console."))
article.append(addParagraph("So that actually does work and is therefore a bad example here, but for the purposes of this video, let's just assume that it didn't and that the last displayed date in figure 38 is 31 September.  In the course video, a method was introduced that add one day in milliseconds to today's date as a method of calculating tomorrows date and that seems to work."))
article.append(addParagraph("What is important here is that we had it on good authority that the first method did <strong>not</strong> work and that the second method works perfectly.  This can also be the case when copying any snippet of code from the internet.  It may come from a source that you trust or that looks as though it is pretty authoritative, but when you add the code to your own website, there are a few precautions you will really need to take to avoid this type of problem."))
article.append(addInset("1:  Make sure that you read the code and any comments relating to it."))
article.append(addParagraph("Since you are adding code to your website that was written by someone else, it may be code that you don't fully understand yourself, and that is especilly true if you are grabbing code to solve a problem that you were unable to solve for yourself.  You should do enough research to make sure that you can, at the very least, be confident that the code will do what you expect it to."))
article.append(addInset("2:  Test that code."))
article.append(addParagraph("The only way to be sure that the code does what it is supposed to is to test it.  Depending on the code, that may just mean using it.  For example, if you are looking for a bit of CSS code to display an HTML in a particular way, you can add it to your CSS file and then view the page to ensure that it displays in the way that you want it to.  When you are running some code where the values may change depending on input or some other variables such as, in our example, the date, the testing can be a little bit more complicated.  You should test your code to ensure that it will work for any possible set of circumstances."))
article.append("This is a bit of an over-simplifiaction when it comes to testing which can, itself, be a very large topic.  It does illustrate some key points.  Whatever you are doing in development terms, there are probably a number of ways to do it and copying some code from a website can provide one way of doing it, but it can also introduce errors.  Sometimes, such errors may be subtle and not immediately obvious and you may now know how to fix an error if it is someone else's code.  The only solution to a problem like that is to make sure you understand the code as well as possible and that you have done enough research to know that it is the best answer.")
article.append(addHeader("Connect with the Larger Web-Development World"))
article.append(addParagraph("There are some good Discord channels for getting help or discussing coding prolems including"))
article.append(addInset("<a href='https://discord.com/invite/code'>The Coding Den</a>"))
article.append(addInset("<a href='https://discord.me/speakjs'>Speak JS</a>"))
article.append(addInset("<a href='https://discord.com/invite/keD8rZp'>Reddit Webdev</a>"))
article.append("These can, of course, be very helpful, but when you are learning, nothing beats hands-on development.  One way to do that would be to get involved in an open-source project.  There is a very useful guide for people new to both open-source projects and development at <a href='https://www.firsttimersonly.com/'>First Timers Only</a> which provides links to a tutorial to help you get started and some sites that list projects suitable for 'newbies'.")
article.append(addParagraph("You might also like to get involved in groups that meet locally and a good place to find out about that type of event is <a href='https://www.meetup.com/'>meetup.com</a>.  Whatever type of community you choose to get involved with, it's always a good idea to read up on it, get to know the rules, what sort of topics are up for discussion and what sort of vibe th group has before jumping in."))
article.append(addHeader("Focus on a Web Development Specialty"))
article.append(addParagraph("When you start out in your studies of web development, it's quite hard to know what topics you should investigate further.  There are some things that are probably worth studying for any web developer such as HTML.  The approach I have tended to take started out as a project to develop my own website in order to always have my University study notes available and it later grew into this site.  Initially, I wasn't really interested in web development per se, I just wanted to get a site up and running."))
article.append(addParagraph("As my interest grew, I started to look into specific courses that I thought would help me in my development of the site and that led me to the learning path, Become a Web Developer and this course is more or less the end of that particular path.  That means that I am now at the poibr of tryibg to decide what the best next step for me will be."))
article.append(addParagraph("A key question in helping me to decide that is going to be whether I want to pursue front-end development, back-end development or full-stack development."))
article.append(addParagraph("The major difference between front and back-end is probably that front-end development concerns itself more with how a website looks whereas back-end development is more about writing the code that runs the site.  Personally, I think that I am better with programming than design which would suggest back-end is the way to go but I have enjoyed designing this site so there is some appeal in front-end development for me.  I think that if you are unsure, you should probably aim to learn full-stack development and aim to specialise later when you have more idea of what really interests you."))
article.append(addParagraph("Another useful approach is to look into job adverts and see what skills are sought after in the jobs that appeal to you.  You can then look to see what courses you can take to obtain those skills."))
main.append(menu("fullstack"))