Code snippets for your daily life

Find useful snippets, bookmark and share them with other developers.

Latest Snippets

  • /**
     * Here comes the function description
     *
     * @param {string} name - This name is a string
     * @returns {string} It returns a string
     * @example
     *   getName('Son-Goku')
     */
    
    function getName(name) {
      return name
    }
    Copy

    November 10th, 2019

    # Function documentation

    Add to bookmarks

    A good code documentation is mandatory for successful development. One way is to use JSDoc. It is a markup language used to annotate Javascript code. This can give you a brief overview of the codes functionality.

    To describe a functions parameters, we use types. The basic syntax of a type is @type {typeName}, for instance @param {string}. The following table contains possible ways to write the type:

    Syntax Description
    @param {number} [num] Optional parameter
    @param {number} [num=1] Optional parameter with default value
    @param {...number} num Variable number of that type
    {?number} Nullable type
    {!number} Non-Nullable type
    @param {(number|string)} Multiple types
    @param {*} n Any type
    @param {...number} num Variable number of that type
    @param {string[]} n Array of strings

    JSDoc provides the following default typeNames:

    • null
    • undefined
    • boolean
    • number
    • string
    • Array or []
    • Object or {}
  • // boolean: in form of a question
    const isVisible = true
    const hasChildren = false
    
    // constant: a true constant value
    const EULER_NUMBER = Math.E
    const PI = Math.PI
    
    // string: singular
    const simpleString = 'Hello World'
    const anotherString = 'Lorem ipsum'
    
    // object: mostly singular
    const someData = {...}
    
    // array: always plural
    const arrayItems = [...].map(item => item)
                      
    // function: combination of verb and noun          
    function getData() {...}
    function findUser() {...}
    
    // class: first letter is always capital
    class ClassName {...}
    Copy

    October 4th, 2019

    # Naming convention

    Add to bookmarks

    It's always good to have a naming convetion so you can immediately see if you're working with a class, function or a boolean.

  • const getBottomVisiblity = () =>
      document.documentElement.clientHeight + window.scrollY >=
      (document.documentElement.scrollHeight || document.documentElement.clientHeight)
    
    // output: true
    getBottomVisiblity()
    Copy

    October 1st, 2019

    # Get page bottom visibility

    Add to bookmarks

    Returns true if the document height plus the currently scrolled pixel number is larger/equal to the document's content height or rather document height.

    Apply that function to a scroll event listener and you can always check if the page bottom is visible.

  • const arrayToHtmlList = (array, listClass) =>
      (el => (
        (el = document.querySelector('.' + listClass)),
        (el.innerHTML += array.map(item => `<li>${item}</li>`).join(''))
      ))()
      
    arrayToHtmlList(['hello', 'world', '42'], 'classOfTheList')
    Copy

    September 29th, 2019

    # Append array elements to HTML list

    Add to bookmarks

    This snippet converts all elements of an array to a list of <li> tags and appends them to the list of the given class.

  • const allEqual = array => array.every(value => value === array[0])
    
    // output: false
    allEqual([42, 1, 'hello'])
    
    //output: true
    allEqual([42, 42, 42])
    Copy

    September 27th, 2019

    # Check if all elements of an array are equal

    Add to bookmarks

    The function checks if every element of the array is strictly equal to the first element.

HomeBookmarks