Forem: Amy Chen

JavaScript innerHTML, innerText, and textContent

Amy Chen — Fri, 17 Jan 2020 20:44:28 +0000

In Javascript, there are three properties that can be used to set or return an HTML element's content in the DOM: innerHTML, innerText, and textContent. If you are unsure about the differences and wondering which one to use, hopefully the following comparison will help.

(1) The innerHTML property sets and returns the content of an element with new HTML content.

// Setting text with innerHTML:
const example = document.getElementById('example')
example.innerHTML = "<p>This is <strong>my</strong> paragraph.</p>"

Although HTML5 prevents a <script> tag inserted with innerHTML from executing, there is still a security risk whenever you use innerHTML to set strings using Javascript. Cybercriminals can embed Javascript code without using <script> to rewrite content in the HTML page or redirect the browser to another page with malicious code. Due to this reason, it is NOT recommended to use innerHTML when inserting plain text.

To learn more about innerHTML and Cross-Site Scripting (XSS) attacks, refer to the resources links at the end of this post.

// HTML5 prevents malicious <script> from executing:
// alert WILL NOT show
const example1 = "<script>alert('I am an annoying alert!')</script>"
el.innerHTML = example1 

const example2 = document.getElementById('example2')
example2.innerHTML = '<script deferred>alert("XSS Attack");</script>'


// Examples of cybercriminals embedding Javascript without <script>:
// alert WILL show
const example3 = "<img src='x' onerror='alert(1)'>"
el.innerHTML = example3 

const example4 = document.getElementById('example4')
example4.innerHTML = '<img src=x onerror="alert(\'XSS Attack\')">'

<img src=j&#X41vascript:alert('test2')>

<img src="http://url.to.file.which/not.exist" onerror=alert(document.cookie);>

<button onmouseover=alert('Wufff!')>click me!</button>

(2) The innerText property returns the content of all elements, except for <script> and <style> elements. The returned content is visible plain text without any formatting, similar to highlighting text and then copying and pasting it. What you see is what you get.

One drawback to using innerText is that its value triggers a reflow due to its awareness of CSS styling, which leads to decreased performance. Reflow is when the browser recalculates page elements for re-rendering the document. Instances that trigger reflow include resizing the browser window or changing elements in the DOM. Reflow is computationally expensive and should be minimized in order to improve speed, efficiency, and user experience.

NOTE: The innerText property is not supported in Internet Explorer 9 and earlier.

// Setting text with innerText:
const example = document.getElementById('example')
example.innerText = "text"

(3) The textContent property returns the raw content with styling inside of all elements, but excludes the HTML element tags. This includes <script> and <style> elements, whitespace, line breaks, and carriage returns. Unlike innerHTML, textContent has better performance because its value is not parsed as HTML. For that reason, using textContent can also prevent Cross-Site Scripting (XSS) attacks. Unlike innerText, textContent isn't aware of CSS styling and will not trigger a reflow. All Node objects have textContent, whereas only HTMLElement objects have innerText.

NOTE: The textContent property is not supported in Internet Explorer 8 and earlier.

// Setting text with textContent:
const example = document.getElementById('example')
example.textContent = "word"

The example below shows how each of the three properties return the contents of the <p> element:

<p id="demo"> This element has extra spacing   and contains <span>a span element</span>.
</p>

function getInnerHtml() {
  console.log(document.getElementById("demo").innerHTML)
}

innerHTML returns: 
" This element has extra spacing   and contains <span>a span element</span>."
/* 
The innerHTML property returns the text, spacing, and inner HTML element tags.
*/



function getInnerText() {
  console.log(document.getElementById("demo").innerText)
}

innerText returns: 
"This element has extra spacing and contains a span element."
/* 
The innerText property returns just the visible text, 
without spacing or inner HTML element tags.
*/



function getTextContent() {
  console.log(document.getElementById("demo").textContent)
}

textContent returns: 
" This element has extra spacing   and contains a span element."
/* 
The textContent property returns the text and spacing, 
but without the inner HTML element tags.
*/

Now that you know the differences between all the available options for returning and setting text in Javascript, use the one that best fits your content needs.

Resources:
https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML
https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent#Differences_from_innerText
http://perfectionkills.com/the-poor-misunderstood-innerText/
https://kellegous.com/j/2013/02/27/innertext-vs-textcontent/
https://developers.google.com/speed/docs/insights/browser-reflow
https://frontendmasters.com/courses/web-performance/layouts-and-reflows/
https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting
https://www.owasp.org/index.php/Cross-site_Scripting_(XSS)

Refactoring Code in Ruby

Amy Chen — Tue, 07 Jan 2020 19:58:47 +0000

In object-oriented programming, it's best to keep code DRY (Don't Repeat Yourself), as opposed to code that is WET (Write Every Time, Write Everything Twice, We Enjoy Typing, or Waste Everyone's Time).

If a line of code is repeatedly written or copied and pasted, it triggers a "code smell." A code smell is any characteristic in the source code of a program that possibly indicates a deeper problem. In the case of repeated code, the problem is repetition. This makes it an ideal time for refactoring.

Refactoring code is the process of simplifying existing code without modifying its functional behavior. The results in code that is easy to read, debug, and maintain. It also produces syntactic sugar, which is any aspect of the syntax of a programming language that makes programs easier to read, write, or understand.

In Ruby, one way to refactor code is using attr_accessor in a Class. Using attr_accessor eliminates the need to write the reader and writer methods as shown below:

class Dog
    attr_accessor :name, :breed
    @@all = []

    def initialize(name, breed)
      @name = name
      @breed = breed
      @@all << self
    end

    def self.all
      @@all
    end

    #def name=(name)
      #@name = name
    #end

    #def name
      #@name
    #end

    #def breed=(breed)
      #@breed = breed
    #end

    #def breed
      #@breed
    #end
end

Another way to refactor code and keeping it DRY is using a helper method. Using helper methods can also help to reduce errors and make it easier to debug by having the logic in one place.

In the example below, the lifters method is refactored by reusing the previous method (memberships) as a helper method. If a helper method wasn't used, there would be repetitive code as seen in the two alternative methods.

# Get a list of all memberships at a specific gym:
  def memberships
    Membership.all.select {|m| m.gym == self}
  end

# Get a list of all the lifters that have a membership to a specific gym:
  def lifters
    memberships.map {|m| m.lifter}
  end

# Methods with repetitive code:
  def memberships
    Membership.all.select {|m| m.gym == self}.map {|m| m.lifter}
  end

  def lifters
    lifter_memberships = Membership.all.select {|m| m.gym == self}
    lifter_memberships.map {|m| m.lifter}
  end

Sure, refactored code requires less typing and looks cleaner. However, the first priority should be writing code that is functional. Get the code working then edit and refine for increased efficiency.

In the example below, two methods are shown to return the average lift total of all lifters. Both methods have the same functions: mapping over an array to retrieve the lift total of each lifter, adding them up, and then divide the total by the number of lifters.

As you can see, the original method has more lines of code. The second method abstracts the steps and reduces it into two single line blocks:

  # Get the average lift total of all lifters:

  # ORIGINAL METHOD
  # def self.lifters_average
  #   lifts_total = @@all.map do |lifter| 
  #     lifter.lift_total
  #   end 
  #     return lifts_total.inject do |sum, element| 
  #       sum + element
  #     end / lifts_total.length 
  # end 

  def self.lifters_average
    lifts_total = @@all.map {|lifter| lifter.lift_total} 
      lifts_total.sum / lifts_total.length
  end

In conclusion, the first priority when writing code is always making sure the code works, no matter how long or messy it is. From there, clean it up by refactoring to make it more efficient.

VS Code Mac Keyboard Shortcuts

Amy Chen — Mon, 30 Dec 2019 21:57:24 +0000

Time. Time flies. Time is money. Time is of the essence.
We lose it. We spend it. We kill it. We all have the same 24 hours of it.
We can't make more of it.

Why spend more time doing something if you don't have to?
These are the Visual Studio Code keyboard shortcuts I use most often that saves a little bit of time.
The shortcuts list can also be viewed inside Visual Studio Code:
Code --> Preferences --> Keyboard Shortcuts

- EDITING -

Comment out a line or block of code
⌘ + /

Delete a line of code
⌘ + X

Delete a word in front of cursor
⌥ + DELETE
NOTE: need to apply twice if the word is in front a symbol

Delete all code in front of cursor
⌘ + DELETE

Copy and paste a line of code
⌥ + SHIFT + UP/DOWN

Insert new line below the current line
⌘ + ENTER

Insert new line above the current line
⌘ + SHIFT + ENTER

Move a line or block of code up or down
⌥ + UP/DOWN

- SELECTION -

Select a line of code
⌘ + L

Select a block of code by line
cursor at beginning of line + SHIFT + UP/DOWN

Select all code above or below cursor
⌘ + SHIFT + UP/DOWN

Select next instance of a word
selected word + ⌘ + D
NOTE: not case-sensitive

Select all instances of a word
selected word + ⌘ + SHIFT + L
NOTE: not case-sensitive

Select all instances of a word by case
Turn on "Match Case" ("Aa" icon on upper right corner will turn white):
⌘ + C + ⌥
Highlight one instance of the word.
Select all instances of the word: ⌘ + SHIFT + L

- WORKSPACE -

Open terminal
⌘ + J
CTRL + `

Wrap text
⌥ + Z

View sidebar
⌘ + B

Open Find
⌘ + F

File search
⌘ + P

The amount of time saved with these shortcuts can now be used to stare at your computer while figuring out why your code isn't working. Hope these help you to become a more efficient programmer. If you know of any others or the equivalent Windows shortcuts, please share!