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:
What is a ternary operator?
From MDN WebDocs:
?), 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
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:
User Friendly Design Resources:
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
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.
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,