JavaScript

This video tutorial provides a hands-on introduction to jsTree. The walkthrough covers the setup process, basic configuration, and demonstrates how to create a simple tree structure using the library. It’s aimed at developers looking for a quick start with jsTree and practical examples of how it integrates into HTML pages.

Highlights from the video:

• Download and setup of jsTree
• Adding a basic tree structure with static data
• Using plugins like checkbox and search
• Tips for integration and customization

While the video is specific to jsTree, the concepts are transferable to similar tree view libraries.

jsTree is a lightweight jQuery plugin that enables the creation of interactive tree views within web applications. It supports themes, drag-and-drop, keyboard navigation, and various data formats including JSON and HTML. Developers can extend it with plugins for checkboxes, search, context menus, and more.

Key features include:

• JSON and HTML data support
• Drag-and-drop functionality
• Highly customizable themes
• Plugin architecture
• Accessibility and keyboard support

jsTree is well-suited for projects that still leverage jQuery and need quick integration of hierarchical navigation or selection UIs.

TinyMCE Fiddle is an online platform that allows developers to experiment with and test TinyMCE editor configurations in real-time. It provides a user-friendly interface to modify settings, integrate plugins, and preview changes instantly, facilitating efficient development and customization of the TinyMCE rich-text editor.

Go to TinyMCE Fiddle

JavaScript functions are reusable blocks of code that perform specific tasks. Defined using the function keyword or as arrow functions, they can accept parameters and return values. Functions enhance code organization, modularity, and reusability, allowing developers to execute the same logic multiple times throughout a program with ease.

Make Axios send cookies in its requests automatically.

You can use the withCredentials property.

axios.get(BASE_URL + '/todos', { withCredentials: true });

Also it is possible to force credentials to every Axios requests

axios.defaults.withCredentials = true

Or using credentials for some of the Axios requests as the following code

const instance = axios.create({
   withCredentials: true,
   baseURL: BASE_URL
})
instance.get('/todos')

Arrays are ordered collections of values, and they are perhaps the most commonly used data structure in JavaScript. Elements in an array can be accessed by their index, and arrays can hold values of different data types.

let myArray = [1, 2, 3, 4, 5];
console.log(myArray[0]); // Accessing the first element

Objects in JavaScript are collections of key-value pairs. They are versatile and can be used to represent a wide range of data structures. Objects are often used for creating dictionaries, maps, and records.

let person = {
    name: "Maria",
    age: 28,
    city: "New York"
};
console.log(person.name); // Accessing a property

Keys are always strings (or Symbols, introduced in ES6). When you use non-string values as keys in an object, JavaScript implicitly converts them to strings.

Objects are generally used for a simple dictionary-like structure with string keys.

Question: How can I check if a string is empty?

Option 1: Check using ""

if (str === "") {
}

Note: to know if it's an empty string use === instead of ==. This is because === will only return true if the values on both sides are of the same type, in this case a string. for example: (false == "") will return true, and (false === "") will return false.

Option 2: Check length of string

if (!str || str.trim().length === 0) {
}

A callback is a function passed as an argument to another function. This technique allows a function to call another function. A callback function can run after another function has finished.

Example

Using a callback, you could call the calculator function (myCalculator) with a callback (myCallback), and let the calculator function run the callback after the calculation is finished:

function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}

function myCalculator(num1, num2, myCallback) {
  let sum = num1 + num2;
  myCallback(sum);
}

myCalculator(5, 5, myDisplayer);

In the example above, myDisplayer is a called a callback function.

It is passed to myCalculator() as an argument.

Note

When you pass a function as an argument, remember not to use parenthesis.

Right: myCalculator(5, 5, myDisplayer);

Wrong: myCalculator(5, 5, myDisplayer());