Tips & Tricks: Brief Overview on Starting JavaScript 211
What am I learning or trying to incorporate in my daily coding?
I am working on understanding how and when to ask questions with regards to vague prompts. In a professional setting, it will be imperative to ask for clarification because to break down a problem or solution into steps to code, a solution or product is difficult to create.
To practice this skill, I am spending time to really focus on prompts or problems to solve, breaking them down into steps in plain English and then putting into logical code steps. It is still a work in progress, but the more I can break down the logical steps in “regular speak” it is easier to figure out how to convert it into code.
The difference between == and === ?
“==” means: an object is similar to an expected outcome (e.g., x == 3). This the example, x == 3, “x” can be the number 3, or a string element of “3”- as would pass through an input html element in a form.
“===” means: an object is exactly the expected or desired outcome (e.g., x === In this case, x === 3, means that it must be the number 3, not a string element of “3”.
One way to think of it is if you are sorting an Excel Spreadsheet, numbers and text may be intermixed depending on the setup or who is entering the information. In this scenario, if we want to pick up any numbers that were accidently classified or entered as text (“string elements”), then we would want the “==” double equals signs.
The triple equals signs “===” are an absolute match, the data type and the actual character(s).
In this function, what is the value of foo? “var foo = 10 + ‘20’;”
In this scenario, foo literally would have a value or output of “1020”, because the code reads like a sentence.
“foo is 10 and 20”
The “+” stands for and, it appends the two objects together. Since there is no space in the ‘20’ there would not be a space in the append.
The ‘’ makes the object ‘20’ a string element, not a number.
Depending on how the object 10 was stored or entered, it could still be a string. For example, input values in a form are always cataloged as a string value. While there are options to allow for making input values numbers, they are still an HTML string element.
The “number type” means that if on a mobile device, the number keyboard will appear and it also pre-fills with number characters options that are whole number characters with arrows for up or down to have the number characters increase or decrease (including -1…).
What is a terminal application?
A terminal application is a local or remote terminal where an application or component can be tested for functionality without a user interface. These can be particularly useful if you want to test a series of functions, a game, an app, or internal component/product development milestones that are very large and therefore it would be less efficient to use a large amount of bandwidth.
They can also be useful for internal organizational or large-scale project testing on larger teams, just so long as everyone on the team is using the same terminal application.
Here are some good resources below:
https://spin.atomicobject.com/2016/01/11/command-line-interface-testing-tools/
What is a ternary operator?
A ternary operator is a JavaScript method for a shorthand or shortcut for an “if statement”. It can help to clean up code. The format looks simple but in the beginning (where my practice levels are at), it can take quite a bit of thought to logic through writing one correctly. Of note, they are useful, but not always necessary. It is important to keep in mind a clarity of code. If using ternary operators is to “look cool” rather than clean up the code then it is maybe best to come back and look at it again with fresh eyes. If using the ternary operator(s) is making the code more confusing to a future or fellow developer (or even yourself in 1–2 weeks), perhaps the long hand is better.
From MDN WebDocs:
“The conditional (ternary) operator is the only JavaScript operator that takes three operands: a condition followed by a question mark (?), then an expression to execute if the condition is truthy followed by a colon (:), and finally the expression to execute if the condition is falsy. This operator is frequently used as a shortcut for the if statement.”
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator
Another Good Resource:
What are some ways to ensure that your website design or web application is accessible and user-friendly?
First, becoming familiar with the W3C/WAI standards and guidelines is necessary for accessibility. Then using the A11y project checklists throughout the website design can help to ensure accessible design. It is also important to check and recheck these resources, as well as any others you like, since guidelines and advice for different functions, elements, etc. can change as browsers are updated and coding languages and syntax adapts.
It is also very important to keep in mind during the design phase that just because something meets all the checklist(s) criteria for accessibility, it does not equate a user-friendly experience or intuitive interaction with a website or web application. It is important to continually test on the user-end.
I am starting to gain more and more insight by going to websites that I like or find to have an nice design, then I turn off my mousepad and try to navigate ONLY by keyboard. Or I will attempt to navigate websites by using a screen reader and putting on a sleep mask.
These are two very quick ways that I can check for accessible AND intuitive designs as a sighted person. This does not mean I make perfect accessible and beautiful and intuitive websites yet, but it is a useful learning experience that keeps me both humble and learning from the ground-up to be a solid accessibility engineer (in some capacity).
It is also important to keep in mind during the design phase issues such as trigger warnings for flashing images or videos for particular individuals sensitive to overstimulation or sudden light flashing (e.g., epilepsy, some autism) and provide an option to not play an animation or video.
Another issue is the font-size and color contrast necessary for individuals of different types of colorblindness and those who need larger text.
Some of my go-to resources:
https://www.w3.org/WAI/standards-guidelines/aria/
https://www.a11yproject.com/checklist/#toc_Does-this-checklist-guarantee-my-site-is-accessible-
https://css-tricks.com/improving-accessibility-24-ways/
User Friendly Design Resources:
https://careerfoundry.com/en/blog/ui-design/8-sites-with-great-ui/
https://www.commonplaces.com/blog/10-tips-for-building-a-user-friendly-website/
What are my favorite features of HTML5, and how have you implemented them in my front-end development projects?
I like to use Slideshows, as it is a dynamic and interactive way to showcase multiple images, videos, text information, etc. But is also has good documentation for making it accessible for keyboard and screen reader friendly. It can bring a page to life without making it overwhelming for a user and can fit within pretty much any theme or design color scheme.
I have also been working on using input radio buttons hidden behind images. However, the trick is to keep their native accessibility. The trick is instead of using, “position: hidden”, you change the width, opacity and height and position it behind the image, thus changing the styling and NOT hiding it from a screen reader and keeping the native keyboard navigation. You then style the button and image together for positioning and focus.
The full explanation is here: https://stackoverflow.com/questions/17541614/use-images-instead-of-radio-buttons/17541916
How I structure your CSS and JavaScript to make it easier for other developers to work with
I use comments to help organize my CSS files. If it is a particularly long file, I try to make a table of contents for order of styling- I use comments as sub-sections or the table of contents to help a developer figure out where to find something.
In JavaScript, I am working on building good habits for naming functions. I it is a button onclick then it is useful to have “Click” at the end of the function. This helps to quickly know if it is called by a button click or if it runs on its own and not called based on an event listener. It is also useful to put in a label of some sort if it loads on window.
When I am working on JavaScript files and I am working through multiple functions, I will comment out the functions that did not work, so I can trace my logic and if I find I need part of that code, then it is right there. I always use comment headings to label what worked or why my logical thinking for an application was. This is ONLY useful for personal projects or for a bootcamp assignment, as in a professional or group setting, these comments can become annoying to another developer if they are not using an editor like VS Code where you can minimize multi-line comments. I could also be harder to read from a github repo- requiring a developer to fork/clone a repo to pull down the code.
What is my process for addressing browser-specific rendering problems? Do you find that a certain browser is more challenging to work with than others?
This is definitely a big component of my “work in progress”…
When I am working on browser-specific rendering issues, it usually takes a bit of research to figure out if I need to add meta tags to the <head> of the HTML, and quite a bit of testing and searching through Google and StackOverflow.
My biggest issue is being able to test on Safari. I need to borrow apple products to do that, since Apple does not update the Safari for the Windows operating system…
Also, it is a matter of creating a testing routine to check for cross-browser compatibility.
I hope these small tips/tricks help anyone who is learning to code or brushing up for an exciting interview coming up!
Your friend in code,
Rachel
