Javascript – MYNYML http://mynyml.com/ Wed, 23 Nov 2022 17:00:00 +0000 en-US hourly 1 https://wordpress.org/?v=5.9.3 https://mynyml.com/wp-content/uploads/2021/05/cropped-icon-32x32.png Javascript – MYNYML http://mynyml.com/ 32 32 How to create a simple search bar using a list of strings in JavaScript https://mynyml.com/how-to-create-a-simple-search-bar-using-a-list-of-strings-in-javascript/ Wed, 23 Nov 2022 17:00:00 +0000 https://mynyml.com/how-to-create-a-simple-search-bar-using-a-list-of-strings-in-javascript/ Building your own auto-complete search bar is easier than you think. A search bar is a popular user interface element used by many modern websites. If you’re building a site with any type of data, you might want your users to be able to search for specific items. There are many ways to create a […]]]>

Building your own auto-complete search bar is easier than you think.


A search bar is a popular user interface element used by many modern websites. If you’re building a site with any type of data, you might want your users to be able to search for specific items.


There are many ways to create a search bar. You can create complex search bars that return results based on multiple filters, such as name or date. Existing libraries can help you implement a search bar without building it from scratch.

However, you can also create a simple search bar using vanilla JavaScript, which compares a user’s input to a list of strings.


Your website should include an input box for your users to enter the text they want to search for. One way to do this is to use an input tag and style it to look like a search bar.

  1. Create a folder to store your website. In the folder, create an HTML file named index.html.
  2. Fill your file with the basic structure of an HTML document. If you’re unfamiliar with HTML, there are plenty of HTML code samples you can learn to help you get started with speed.<!doctype html>
    <html lang="en-US">
    <head>
    <title>Searchbar</title>
    </head>
    <body>
    <div class="container">
    <!-- Webpage content goes here-->
    </div>
    </body>
    </html>
  3. Inside the div container class, add an input tag. This will allow the user to enter the text they want to search for. Each time they type a new character, your website will call the search() function. You will create this function in later steps.<div class="container">
    <h2>Search Countries</h2>
    <input id="searchbar" autocomplete="off" onkeyup="search()" type="text"n name="search" placeholder="What are you looking for?">
    </div>
    The auto-complete attribute ensures that a browser will not add its own drop-down list based on previous search terms.
  4. In the same folder as your index.html file, create a new CSS file called styles.css.
  5. Fill the file with styling for the global web page and search bar:body {
    margin: 0;
    padding: 0;
    background-color:
    }
    * {
    font-family: "Arial", sans-serif;
    }
    .container {
    padding: 100px 25%;
    display: flex;
    flex-direction: column;
    line-height: 2rem;
    font-size: 1.2em;
    color:
    }
    padding: 15px;
    border-radius: 5px;
    }
    input[type=text] {
    -webkit-transition: width 0.15s ease-in-out;
    transition: width 0.15s ease-in-out;
    }
  6. In index.htmladd a link to your CSS file in the head tag and under the title tag:<link rel="stylesheet" href="styles.css">
  7. Open the index.html file in a web browser and bring up your search bar UI.
    HTML website with search bar in browser

Before the user can search, you must create a list of available items that they can search. You can do this with an array of strings. A string is one of many data types you can use in JavaScript and can represent a sequence of characters.

You can dynamically create this list using JavaScript, while the page is loading.

  1. On the inside index.html, under the input tag, add a div. This div will display a drop-down list that will contain a list of items that match what the user is looking for:<div id="list"></div>
  2. In the same folder as your index.html file and styles.css file, create a new file called script.js.
  3. On the inside script.js, create a new function called loadSearchData(). In the function, initialize an array with a list of strings. Keep in mind that this is a small static list. A more complex implementation will need to consider searching through larger datasets.function loadSearchData() {
    let countries = [
    'Australia',
    'Austria',
    'Brazil',
    'Canada',
    'Denmark',
    'Egypt',
    'France',
    'Germany',
    'USA',
    'Vietnam'
    ];
    }
  4. In loadSearchData() and under the new array, get the div element that will display the matching search items to the user. Inside the list div, add an anchor tag for each list data item:
    let list = document.getElementById('list');
    countries.forEach((country)=>{
    let a = document.createElement("a");
    a.innerText = country;
    a.classList.add("listItem");
    list.appendChild(a);
    })
  5. In the body tag of index.html, add the onload event attribute to call the new loadSearchData() function. This will load data as the page loads.<body onload="loadSearchData()">
  6. In index.htmlbefore the end of the body tag, add a script tag to link to your JavaScript file:<body onload="loadSearchData()">
    <!-- Your webpage content -->
    <script src="script.js"></script>
    </body>
  7. In styles.cssadd a style to the drop-down list:
    border: 1px solid lightgrey;
    border-radius: 5px;
    display: block;
    }
    .listItem {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    padding: 5px 20px;
    color: black;
    }
    .listItem:hover {
    background-color: lightgrey;
    }
  8. Open index.html in a web browser to display your search bar and list of available search results. The search functionality isn’t working yet, but you should see the UI it will use:
    HTML website search bar with unfiltered search list

Now that you have a search bar and a list of channels that users can search for, you can add search functionality. As the user types in the search bar, only certain items in the list are displayed.

  1. In styles.cssoverride the list style to hide the default list:
    border: 1px solid lightgrey;
    border-radius: 5px;
    display: none;
    }
  2. In script.js, create a new function called search(). Keep in mind that the program will call this function each time the user enters or deletes a character from the search bar. Some applications will need to go to a server to retrieve information. In such cases, this implementation might slow down your UI. You may need to modify the implementation to account for this.function search() {
    }
  3. In the search() function, get the HTML div element for the list. Also get the HTML anchor tag elements of each list item:let listContainer = document.getElementById('list');
    let listItems = document.getElementsByClassName('listItem');
  4. Get the input the user typed in the search bar:let input = document.getElementById('searchbar').value
    input = input.toLowerCase();
  5. Compare the user’s input to each item in the list. For example, if the user enters “a”, the function will compare if “a” is inside “Australia”, then “Austria”, “Brazil”, “Canada”, etc. If it matches, it will show that item in the list. If it doesn’t match, it will hide that element.let noResults = true;
    for (i = 0; i < listItems.length; i++) {
    if (!listItems[i].innerHTML.toLowerCase().includes(input) || input === "") {
    listItems[i].style.display="none";
    continue;
    }
    else {
    listItems[i].style.display="flex";
    noResults = false;
    }
    }
  6. If there are no results in the list, hide the list completely:listContainer.style.display = noResults ? "none" : "block";
  7. Click on the index.html file to open it in a web browser.
    HTML website with search bar in browser

  8. Start typing in the search bar. As you type, the results list will update to show only matching results.
    HTML search bar with matching results

Using a search bar to find matching results

Now that you know how to create a search bar with string selection, you can add more functionality.

For example, you can add links to your anchor tags to open different pages depending on which result the user clicks on. You can modify your search bar to search through more complex objects. You can also modify the code to work with frameworks like React.

]]>
Easily filter JavaScript objects with Arquero https://mynyml.com/easily-filter-javascript-objects-with-arquero/ Wed, 16 Nov 2022 11:00:00 +0000 https://mynyml.com/easily-filter-javascript-objects-with-arquero/ Coding in JavaScript has many advantages, but data management is probably not at the top of the list. However, there’s good news for those who find JavaScript data challenging: the same “data grammar” ideas behind the hugely popular dplyr R package are also available in JavaScript, thanks to the Arquero library. Arquero, from the University […]]]>

Coding in JavaScript has many advantages, but data management is probably not at the top of the list. However, there’s good news for those who find JavaScript data challenging: the same “data grammar” ideas behind the hugely popular dplyr R package are also available in JavaScript, thanks to the Arquero library.

Arquero, from the University of Washington’s Interactive Data Lab, is probably best known to Observable JavaScript users, but it’s also available in other ways. One of them is Node.js.

This article will show you how to filter JavaScript objects with Arquero, with some bonus tasks at the end.

Step 1. Charge Arquero

Arquero is a standard library with Observable JavaScript and in Quarto, that’s how I use it. In this case, no installation is necessary. If you are using Arquero in Node, you will need to install it with npm install arquero --save. In the browser, use <script src="https://cdn.jsdelivr.net/npm/arquero@latest"></script>.

In Observable you can load Arquero with import {aq, op} from "@uwdata/arquero". In the browser, Arquero will be loaded as aq. In Node you can load it with const aq = require('arquero').

The rest of the code in this tutorial should run as is in Observable and Quarto. If you’re using it in an asynchronous environment like Node, you’ll need to make the necessary adjustments for loading and processing data.

Step 2. Transform your data into an Arquero table

You can turn an existing “normal” JavaScript object into an Arquero table with aq.from(my_object).

Another option is to directly import remote data as an Arquero table with Arquero’s load family of functions—functions like aq.loadCSV("myurl.com/mycsvfile.csv") for a CSV file and aq.loadJSON("myjsonurl.com/myjsonfile.json") for a JSON file on the web. You can find more information about table input functions on the Arquero API documentation website.

In order to follow the rest of this tutorial, run the code below to import sample population change data for US states.


states_table = aq.loadCSV("https://raw.githubusercontent.com/smach/SampleData/master/states.csv")

Arquero tables have a particularity view() method for use with Observable JavaScript and in Quarto. The states_table.view() The command returns something like the output shown in Figure 1.

Table with columns for State, Pop_2000, Pop_2010, Pop_2020, PctChange_2000, Pct_change_2010, Sharon Machlis

Figure 1. The result of using the Arquero table view() method.

Observable JavaScript Inputs.table(states_table) (which has clickable column headers for sorting) also works to display an Arquero table.

Outside of Observable you can use states_table.print() to print the table to the console.

Step 3. Filter Rows

Arquero tables have a lot built-in methods for data processing and analysis, including filtering rows for specific conditions with filter().

A note to R users: Arqueros filter() syntax is not as simple as dplyr filter(Region == 'RegionName'). Since this is JavaScript and most functions are not vectorized, you need to create an anonymous function with d => then execute another function inside of it, usually a function of op (imported above with arquero). Even if you’re used to a language other than JavaScript, once familiar with this construct, it’s pretty easy to use.

The usual syntax is:


filter(d => op.opfunction(d.columnname, 'argument')

In this example, the op the function I want is op.equal(), which (as the name suggests) tests for equality. So, the Arquero code for only states in the northeastern region of the United States would be:


states_table
  .filter(d => op.equal(d.Region, 'Northeast'))

You can add .view() at the end to see the results.

A note on the filter() syntax: The code inside filter() is an Arquero array expression. “At first glance, table expressions look like normal JavaScript functions…but wait!” explains the Arquero website API reference website. “Under the hood, Arquero takes a set of function definitions, maps them to strings, then parses, rewrites, and compiles them to efficiently manage data internally.”

What does this mean to you? In addition to the usual JavaScript function syntax, you can also use table expression syntax such as filter("d => op.equal(d.Region, 'Northeast')") Where filter("equal(d.Region, 'Northeast')"). Check out the API reference if you think one of these versions might be more appealing or useful.

It also means that you cannot use any type of JavaScript function in filter() and other Arquero verbs. For instance, for loops are not permitted unless wrapped in a escape() “helps expression.” See the Arquero API reference to learn more.

A note to Python users: Archer filter is designed to create subsets of rows only, not the rows either Where columns, as seen with pandas.filter. (We’ll move on to columns next.)

Filters can be more complex than a single test, with negative or multiple conditions. For example, if you want “one-word state names in the West region”, you would search state names that do not include spaces and Equal Region West. One way to achieve this is !op.includes(d.State, ' ') && op.equal(d.Region, 'West') inside of filter(d =>) anonymous function:


states_table
  .filter(d => !op.includes(d.State, ' ') && 
     op.equal(d.Region, 'West'))

To search and filter by regular expression instead of equality, use op.match() instead of op.equal().

Step 4. Select Columns

Select only some Columns is similar to dplyr select(). In fact, it’s even easier, since you don’t need to turn the selection into an array; argument is just comma separated column names inside select()::


states_table
  .select('State', 'State Code', 'Region', 'Division', 'Pop_2020')

You can rename columns by selecting them, using the syntax: select{{ OldName1: 'NewName1', OldName2: 'NewName2' }). Here is an example :


states_table
  .select({ State: 'State', 'State Code': 'Abbr', Region: 'Region', 
      Division: 'Division', Pop_2020: 'Pop' })

Step 5. Create an array of unique values ​​in a table column

It can be useful to get the unique values ​​of a column as a vanilla JavaScript array, for tasks such as populating an input dropdown. Arquero has several functions to achieve this:

  • dedupe() gets unique values.
  • orderby() sort the results.
  • array() transforms data from an Arquero table column into a conventional JavaScript array.

Here is a way to create a sorted array of unique division names from states_table:


region_array = states_table
  .select('Region')                                      
  .dedupe()                                                                 
  .orderby('Region')
  .array('Region')

Since this new object is a JavaScript array, Arquero methods will no longer work on it, but conventional array methods will. Here is an example :


'The regions are ' + region_array.join(', ')

This code gets the following output:

"The regions are , Midwest, Northeast, South, West"

This first comma in the string above is due to the fact that there is a bad value in the table. If you want to remove empty values ​​like null, you can use the Arquero op.compact() function on the results:


  region_array2 = op.compact(states_table
  .select('Region')                                      
  .dedupe()                                                                 
  .orderby('Region')
  .array('Region')
  )

Another option is to use vanilla JavaScript filter() to remove null values ​​from an array of text strings. Note that the following vanilla JavaScript filter() function for one-dimensional JavaScript arrays is not the same as that of Arquero filter() for two-dimensional Arquero tables:


 region_array3 = states_table
  .select('Region')                                      
  .dedupe()                                                                 
  .orderby('Region')
  .array('Region')
  .filter(n => n)

Observable JavaScript users, including those using Quarto, can also use the md function to add style to string, like bold text with **. So this code

md`The regions are **${region_array2.join(', ')}**.`

produces the following output:


The regions are Midwest, Northeast, South, West

By the way, note that the Intl.ListFormat() JavaScript object makes it easy to add “and” before the last element in a comma-separated string array. So the code


my_formatter = new Intl.ListFormat('en', { style: 'long', type: 'conjunction' });
my_formatter.format(region_array3)

produces the output:


"Midwest, Northeast, South, and West"

There is much more to Arquero

Filtering, selecting, deduplicating and creating arrays barely scratch the surface of what Arquero can do. The library contains verbs for reshaping, merging, data aggregation, etc., as well as op calculation and analysis functions such as mean, median, quantile, rankings, lag and lead. See Introducing Arquero for an overview of more features. Also see An Illustrated Guide to Arquero Verbs and the Arquero API Documentation for a complete list, or visit the Data Wrangler Observable Notebook for an interactive app showing what Arquero can do.

To learn more about Observable JavaScript and Quarto, don’t miss A Beginner’s Guide to Using Observable JavaScript, R, and Python with Quarto and Learn Observable JavaScript with Observable notebooks.

Copyright © 2022 IDG Communications, Inc.

]]>
Understand how lifting works in JavaScript https://mynyml.com/understand-how-lifting-works-in-javascript/ Thu, 03 Nov 2022 18:01:00 +0000 https://mynyml.com/understand-how-lifting-works-in-javascript/ Hoisting is a JavaScript mechanism that allows you to access variables and functions before initializing them. Hoisting such a statement effectively puts it at the peak of its scope. Learn all about how lifting works in JavaScript and how to best handle it to avoid errors in your code. Lifting variables With var, let and […]]]>

Hoisting is a JavaScript mechanism that allows you to access variables and functions before initializing them. Hoisting such a statement effectively puts it at the peak of its scope.


Learn all about how lifting works in JavaScript and how to best handle it to avoid errors in your code.


Lifting variables With var, let and const

Lifting is possible because JavaScript uses the JIT (Just-in-Time) compilation system, which analyzes your code to identify all variables within their respective scopes.

The JIT compiler then hoists all instances of variable declarations to the top of their scope when compiled. JavaScript only hoists variable declarations, not their initializations.

The behavior of variables, when hoisted, depends on the keyword you declare them with, as each keyword behaves differently.

var

Accessing an uninitialized variable declared with the var the keyword will return indefinite. For instance:

console.log(foo);  
var foo = 2;

The code above saves indefinite because it calls console.log before initializing the variable.

The JavaScript compiler visualizes the preceding block of code as follows:

var foo;
console.log(foo);
foo = 2;

When hoisted, variables obey JavaScript scoping rules. Javascript will just hoist a variable to the top of the scope you declared it in. Attempting to save the value of a variable outside of its declared scope will result in a Reference error. For example, if you declare a variable inside a function, it won’t be visible outside of that scope:

function myFunction() {
console.log(foo);
var foo = 10;
}

myFunction();
console.log(foo);

Trying to access a variable outside of its scope will result in a Reference error.

let and const

According to the MDN documentation on let and constant lifting, JavaScript also hoists variables declared with the let and constant key words. However, unlike variables declared with the var keyword, they are not initialized with a indefinite assess.

For instance:

function myFunction() {
console.log(foo);
console.log(bar);
console.log(baz);

var foo = 5;
let bar = 10;
const baz = 15;
}

myFunction();

You cannot access variables declared with the let and const keywords before initializing them with a value.

Lifting functions

JavaScript hoists functions the same way as variables. As with variables, it depends on how you declare them. For example, JavaScript hoists function declarations differently than function expressions.

A function declaration is a function declared with a name, while a function expression is a function whose name you can omit. For instance:

function foo() {
}

const bar = () => {
}

JavaScript hoists function declarations but not function expressions. For instance:

foo(); 
bar();


function foo() {
console.log(5);
}


var bar = function expression() {
console.log(10);
};

This code calls mad before declaring and initializing it as a function, but it still connects 5 at the Consol. However, trying to call bar leads to a Standard error.

Manage lifting

Being aware of lifting and the potential errors that could occur if mishandled can save you long hours of debugging. Here are some ways to handle lifting.

Declaring variables inside functions

Declare variables inside the functions that will access them. You won’t always be able to do this, because you might need a global variable that you can access in multiple functions. So be sure to only declare variables globally if you really need them.

Declare variables with let or const

You should always use the land etcfirst of all keywords instead of var keyword when declaring variables. This practice is beneficial when declaring local variables inside a function. Knowing the correct ways to declare variables in JavaScript reduces the chances of errors caused by lifting occurring in your code.

Declare variables at the top of their scope

Declare all your variables at the top of their respective scopes, before any other statements. This will ensure that the JavaScript compiler doesn’t have to hoist these variables to access them.

Using Strict Mode

Strict mode is a JavaScript mode that regulates bad syntax, optimizes the execution time of your code, and prohibits the abuse of JavaScript’s loosely typed syntax by throwing errors at compile time.

For example, in “sloppy mode”, due to lifting, you can access a variable outside of the initialized function, even though it has not been declared:

myFunction();
console.log(foo);

function myFunction() {
foo = 20;
}

In the code block above, JavaScript automatically declares mad and hoists it to the top of the global scope, ignoring the scope in which you initialized it.

You can use strict mode to fix this behavior and throw an error if you try to access the variable outside of its function scope.

Strict mode does not completely stop lifting. Instead, it prevents the most confusing and error-prone forms of lifting. It is still important to understand the general concept and lifting rules, even when using the safety net in strict mode.

To enable strict mode globally, declare the syntax at the top of your script file:

"use strict"; // or 'use strict'

To enable strict mode at a function level, declare the syntax at the top of a function body before any statements:

function myStrictFunction() {
"use strict";
}

If you declare strict mode at a function level, the setting will only apply to statements inside that function.

Declaring strict mode globally prevents access to variables outside their respective scopes:

"use strict";
myFunction();
console.log(foo);

function myFunction() {
foo = 20;
}

With strict mode enabled, the JavaScript compiler will throw my function() at the top of its scope without the undeclared variable.

Understand what affects lifting

Hoisting is quite unique to JavaScript and can be a very confusing behavior to understand. It can affect variables and functions, but there are ways to prevent it if you need to.

Several factors can affect lifting, so it’s best to avoid any occurrence of variable or function lifting in your code.

]]>
A guide on how to build a blockchain with JavaScript https://mynyml.com/a-guide-on-how-to-build-a-blockchain-with-javascript/ Fri, 28 Oct 2022 22:48:09 +0000 https://mynyml.com/a-guide-on-how-to-build-a-blockchain-with-javascript/ Although JavaScript is now the most widely used programming language in the world, it’s usually not the first language that comes to mind for building a blockchain. This may be because JavaScript is often considered a front-end technology, despite continued development and use of Node.js. Lisk changes everything about this misconception and enables JavaScript developers […]]]>

Although JavaScript is now the most widely used programming language in the world, it’s usually not the first language that comes to mind for building a blockchain. This may be because JavaScript is often considered a front-end technology, despite continued development and use of Node.js. Lisk changes everything about this misconception and enables JavaScript developers to create powerful blockchains.

The purpose of this article is to teach you how to build Javascript Blockchains with the Lisk SDK. At the end, you can use it to create your own blockchain application using JavaScript.

If you are a JavaScript developer new to blockchain

Are you a JavaScript developer interested in learning more about blockchain but not sure where to start? You should read the blog first Blockchain in JavaScriptwhich will give you an overview of some of the fundamentals and key benefits of using JavaScript for blockchain development.

Once you’re done, you can get started with some of our free Javascript-based blockchain application tutorials listed below. Additionally, there are several training courses and guidance for deploying your own blockchain application concept.

Blockchain Javascript Tutorials

Lisk SDK makes it easy to understand the intricacies of the blockchain network and related modules. Already, several tutorials are available for developers who want to understand blockchain in JavaScript.

All of these tutorials, ranging in difficulty from beginner to intermediate, can be completed in 4 hours or less. Additionally, they are built on ideas applicable to real-world use cases and problems present in the blockchain industry.

Dashboard application and Hello World tutorial

The first one Lisk SDK Developer tutorial shows how to create a “Hello World” application in keeping with the traditions of software development. Users will learn how to perform the following tasks from this tutorial:

  • Initialize a basic blockchain application
  • Creation of custom modules
  • Creation of custom plugins
  • Setting up blockchain applications
  • Using the Lisk Dashboard
  • Unit test modules and assets

NFT App Tutorial

NFTs are becoming increasingly popular in the crypto industry. As a result, a number of projects such as Colecti, Enevti and RGB are already being developed on the Lisk network around the existing NFT concept. Additionally, the upcoming Lisk SDK v6 will support a standardized NFT module.

Users can learn how to do the following by following Lisk’s Non-Fungible Tokens (NFT) tutorial:

  • Create an NFT-enabled blockchain application.
  • Create a custom module to produce and buy NFTs.
  • Create a custom plugin with additional features related to NFT.

Social Recovery System (SRS) Tutorial

The fear of losing funds is a common problem for all cryptocurrency users. A user can lose access to their passphrase under various circumstances, including an accident or theft. This social recovery system aims to alleviate some of these concerns.

Users will be able to perform the following tasks using Lisk’s Social Recovery System (SRS) tutorial:

  • Create an account recovery tool.
  • Establish a recovery configuration.

Tutorial for Lisk Name Service (LNS)

Many blockchain applications want to use a domain name service, comparable to DNS or the Ethereum Name Service (ENS). The Lisk Name Service (LNS) tutorial allows the development of a service where users can register .lsk domains for a predetermined period of time (1-5 years).

Users will be able to do the following after completing the Lisk Name Service (LNS) tutorial:

  • Create a service that enables decentralized DNS
  • Create domains with .lsk
  • Configure TXT and CNAME records

Blockchain for JavaScript Course

Along with relevant blockchain application tutorials, we have also suggested some courses to take. These blockchain courses can build the foundation of your knowledge. Here are a few different options that relate specifically to JavaScript in Blockchain.

Learn About Blockchain by Creating Your Own in JavaScript – Udemy

This course offers an in-depth method to learn blockchain in JavaScript. There are several video lectures on this. The content is divided into the following eight sections:

  • Introduction
  • Building a Blockchain
  • Access to the blockchain via the API
  • Build a blockchain network
  • Coordinate the network
  • Consensus
  • Explore blockchain
  • Conclusion

This course will teach you how to use JavaScript to create your own decentralized blockchain network. Along the way, you will also have picked up and used a variety of crucial blockchain concepts, including cryptography, algorithms, network broadcasts, and more.

An installation of Node.js and a working knowledge of JavaScript are required for this course.

Building a DEX Using JavaScript: Getting Started at Moralis Academy

Want to learn blockchain with JavaScript but have little or no prior programming knowledge? Try this class from Moralis Academy. The course begins by covering all the fundamentals of HTML, CSS, and JavaScript.

When you have learned the basics of programming, you can use these capabilities to communicate with already existing blockchain platforms like 1inch and Coinpaprika. Next, you’ll be guided through every step needed to create your own JavaScript-based decentralized exchange (DEX).

Coursera – Programming a Basic Blockchain with Javascript

This one hour course is taught entirely in Spanish, as the title suggests. The user will create a simple blockchain application using Node.js in this tutorial for JavaScript beginners. A brief introduction to blockchain technology precedes defining and programming blocks, followed by programming and testing an application.

Deploy your own custom blockchain idea

Having completed the Lisk Tutorials and maybe a Blockchain course in JavaScript, now you want to create your own blockchain. Before you start developing, you should read How to build a blockchain in order to examine all your alternatives and learn the basic starting points.

Then take a look at Web3 JavaScript projectsfor example, if you need ideas on what to build for your blockchain application.

Lisk Discord has the answers if you’re stuck, join us today and introduce yourself. Finally, don’t forget to inquire about the funding options available through the Lisk grant program.

LOADING
. . . comments & After!

]]>
7 steps to adapt the product market. Deciding what to build is the most… | by Eric Elliott | JavaScript scene | October 2022 https://mynyml.com/7-steps-to-adapt-the-product-market-deciding-what-to-build-is-the-most-by-eric-elliott-javascript-scene-october-2022/ Thu, 27 Oct 2022 00:42:29 +0000 https://mynyml.com/7-steps-to-adapt-the-product-market-deciding-what-to-build-is-the-most-by-eric-elliott-javascript-scene-october-2022/ Deciding what to build is the most important step in product development, but almost every team sucks. Here are 7 steps to build the right product faster. I’ve helped hundreds of companies bring products to market: software for brands like YouTube, BBC, CBS, Zumba Fitness, etc. This experience helped me understand how to quickly create […]]]>

Deciding what to build is the most important step in product development, but almost every team sucks. Here are 7 steps to build the right product faster.

I’ve helped hundreds of companies bring products to market: software for brands like YouTube, BBC, CBS, Zumba Fitness, etc. This experience helped me understand how to quickly create a suitable product market.

Technically, product market adjustment occurs when the customer acquisition cost (CAC) falls below the customer lifetime value (CLV) and remains lower long enough to achieve sustainability in the market. Here is a better definition that satisfies the first:

Product market fit happens when you create a product that users love.

If you follow these 7 steps, stay flexible and nimble, and listen to customer feedback, you’ll dramatically improve your chances of success:

  1. Market Selection
  2. Validate the problem
  3. User interviews
  4. Story Mapping
  5. Solution talks
  6. Prototype
  7. Launch

To get to product-market fit quickly, get feedback and make adjustments as soon as possible. The faster you learn, the faster you’ll build something that resonates with users. You can’t sell a product that nobody wants.

The first step is to identify the market you want to serve. Creating a successful new product takes a lot of work. To get a product off the ground, you’ll be focusing almost exclusively on the market for several years, so you need to make sure you and the market are a good fit.

Are you the right person to approach the market you have in mind?

  • Do you have the required market experience?
  • Do you have a marketing strategy? How have other companies in the market developed?
  • Do you know the distribution channels available?
  • Do you have a network of potential customers?
  • Do you know the right people or do you know how to meet them?
  • Investors?
  • Advisors?
  • Qualified engineers and operational personnel?
  • The partners?
  • Clients?

If you don’t see yourself focused on these issues for the next 10-20 years, this may not be your problem to solve.

Good product ideas come from many different sources:

  • Technology — What can you build with today’s technology that wasn’t possible before?
  • New business models — What new business models have recently emerged?
  • New problems — What problems do people face that they did not have to face before?
  • New markets — What new markets have recently emerged?
  • New distribution channels — What new distribution channels have recently appeared?
  • Improve existing solutions — There is always room to build a better mousetrap, but your solution must be at least 10 times better than existing solutions. People like what they know, so they need a compelling reason to change.
  • Specialize an existing solution for a new niche — The key here is to saturate the density of the niche market in a way that allows you to expand into adjacent verticals as you grow. It’s a sneaky way to challenge market holders.
  • Solve an already solved problem from a different angle — Maybe existing solutions don’t address a critical customer need, but your competitors are forced to do things the old fashioned way.
  • Watch new app innovations in unrelated markets — What applications are taking off in other problem areas? What makes them successful? Is this something that can be applied to your market?
  • Crossing ideas from other fields — Mix the best ideas from different fields to create new applications in your field.

Describe the problem in 1 page which contains only:

  • A short text header describing the problem in a few words.
  • A sentence or two with a little more detail.
  • An email input form with words like “Sign up for early access”.

Create several different landing pages with minor variations and run Google ad campaigns and social media posts to see which one gets the most signups. This will help you understand what to focus on first.

Use the collected emails for the rest of these steps.

Talk to as many people as possible in your target market. Ask them about their current workflow and any pain points they are experiencing. Make a list of all the issues they mention, then group the issues into themes. This will help you understand what the most important issues are. Rate them based on how many people mention them and how important they are to the customer.

Focus on one persona and one user journey. Build a story map that encompasses all the stages of this journey. For each step, identify user pain points and how your solution would address them. Focus on user benefits, not features. Features come later.

The most important part of story mapping is not identifying everything you need to build, but identifying the minimum set of things you need to build. first.

Once you fully understand the problem, start talking to people about potential solutions. See what they like and dislike about various ideas. At this point, you can show mockups of what the solutions might look like and get feedback on them. Real potential users can help you identify problems that you hadn’t thought of with the proposed solutions or even suggest better solutions.

Build a prototype of your solution and get feedback from real target customers. You’ve probably heard the term minimum viable product (“MVP”). The prototype you show to your users should be less than an MVP. Remember that your goal is do not build the final product but to build the least amount of software that solves the problem. The less you build, the faster you can get feedback and iterate on your solution.

This is the perfect time for usability testing. There are apps online that can help you find testers, but you have a mailing list of interested people. Ask them to record a short video of themselves using the prototype and send it to you. You can then watch the videos and see what they like and dislike about the prototype. You can also ask them to talk about their experience using the prototype.

You only need to test with 3-5 users at this point. In fact, with just 5 users, you’ll discover about 85% of your prototype’s problems. You can then use this feedback to iterate on your prototype and test again. If you’re building a consumer app with broad appeal, you can perform guerrilla user testing at a popular cafe nearby. At around 10-15 minutes per test, you can get all the feedback you need in less than 2 hours and get back to work.

Once you’ve resolved the main issues with your prototype, you can move on to the next step.

Get started as soon as possible. Waiting will only make it longer to work through the cycles. Now that you’ve tested your prototype with a handful of users, it’s time to invite more people from your early access mailing list. Be sure to integrate analytics tracking and error reporting so you can see how people are using your product and fix any issues they encounter.

That’s it. Now that you’ve released your MVP, it’s time to start iterating. Go back to step 3 and start talking to other users. Keep iterating on your product until you have something people love. Once you’ve found the product/market fit, you can start thinking about how to scale up.

The only metric that matters is that users like your product.

Remember:

  1. Market Selection
  2. Validate the problem
  3. User interviews
  4. Story Mapping
  5. Solution talks
  6. Prototype
  7. Roll and repeat from step 3.

The Lean start-up by Eric Ries is a great book with lots of details on learning quickly during the early iteration of the product.

Advice from The Lean Startup and similar sources focuses a lot on metrics and testing that can help you understand your progress, but in the early days of your product, the only metric that matters is that users love your product.

Things like A/B testing — even earnings won’t tell you what you need to know. Listening to real users using your product is the best way to get early traction fast. You learn actionable insights faster and create a community of passionate users who feel like part of the team. They will feel a sense of belonging and involvement with the company and the product that you can’t buy with just any marketing budget.

I help companies create great software products. If you want help improving your software development process, contact us at DevAnywhere.

]]>
How to format a string in JavaScript? https://mynyml.com/how-to-format-a-string-in-javascript/ Sat, 22 Oct 2022 15:00:00 +0000 https://mynyml.com/how-to-format-a-string-in-javascript/ In JavaScript, a string is a group of characters delimited by a pair of single or double quotes. There are many ways to format strings in JavaScript. You can use specific methods or operators to combine strings. You can even perform specific operations to decide which channel appears where and when. Learn how to format […]]]>

In JavaScript, a string is a group of characters delimited by a pair of single or double quotes. There are many ways to format strings in JavaScript.


You can use specific methods or operators to combine strings. You can even perform specific operations to decide which channel appears where and when.

Learn how to format your JavaScript strings using concatenation methods and literal patterns.


String concatenation

JavaScript allows you to concatenate strings using several approaches. A useful approach is concat() method. This method uses two or more strings. It uses a single call string and takes one or more strings as arguments.

const firstName = "John";
const lastName = "Doe";

let stringVal;

stringVal = firstName.concat(" ", lastName);
console.log(stringVal);

Here, concat joins the string arguments (a blank space and lastName) to the calling string (firstName). The code then stores the resulting new string in a variable (stringVal) and prints the new value to the browser console:

Another way to concatenate a collection of strings is to use the plus operator. This method allows you to combine string variables and string literals to create new strings.

const firstName = "John";
const middleName = "Mike";
const lastName = "Doe";

let stringVal;

stringVal = firstName + " " + middleName + " " + lastName;
console.log(stringVal);

The code above prints the following output to the console:

A third approach to concatenating your JavaScript strings requires the use of a plus and equals sign. This method allows you to add a new string to the end of an existing string.

const firstName = "John";
const lastName = "Doe";

let stringVal;

stringVal = firstName;
stringVal += " ";
stringVal += lastName;

console.log(stringVal);

This code adds a blank space and the value of the lastName variable to the firstName variable, producing the following output:

Literal models

Pattern literals are an ES6 feature that lets you format JavaScript strings. A literal pattern uses a pair of backticks (`) to display strings. This method of string formatting allows you to display cleaner multi-line strings in JavaScript.

let html;

html = `<ul>
<li> Name: John Doe </li>
<li> Age: 24 </li>
<li> Job: Software Engineer </li>
</ul>`;

document.body.innerHTML = html;

The JavaScript code above uses HTML to print a list of three items to the browser:

To achieve the same result without template literals (or before template literals), you must use quotes. However, you won’t be able to span code across multiple lines like you can with template literals.

let html;

html = "<ul><li>Name: John Doe</li><li>Age: 24</li><li>Job: Software Engineer</li></ul>";

document.body.innerHTML = html;

String interpolation

Pattern literals let you use expressions in your JavaScript strings through a process called interpolation. With string interpolation, you can embed expressions or variables into your strings using the ${expression} placeholder. This is where the value of JavaScript template literals really becomes apparent.

let userName = "Jane Doe";
let age = 21;
let job = "Web Developer";
let experience = 3;

let html;

html = `<ul>
<li> Name: ${userName} </li>
<li> Age: ${age} </li>
<li> Job Title: ${job} </li>
<li> Years of Experience: ${experience} </li>
<li> Developer Level: ${experience < 5 ? "Junior to Intermediate" : "Senior"} </li>
</ul>`;

document.body.innerHTML = html;

The above code produces the following output in the console:

The first four arguments of ${expression} the placeholders are string variables, but the fifth is a conditional expression. The expression relies on the value of one of the variables (experiment) to dictate what it should display in the browser.

Formatting Elements on Your Web Page with JavaScript

Besides its functional association with web page development, JavaScript works with HTML to influence the design and layout of a web page. It can manipulate the text that appears on a web page, as is the case with literal patterns.

It can even convert HTML to images and display them on a webpage.

]]>
How to Run JavaScript in Python https://mynyml.com/how-to-run-javascript-in-python/ Wed, 19 Oct 2022 18:45:00 +0000 https://mynyml.com/how-to-run-javascript-in-python/ JavaScript and Python are two of the most popular and commonly used languages ​​in the world. JavaScript is an integral part of web development, both upstream and downstream. On the other hand, Python is more suitable for back-end coding and rapid application development. While both have their advantages, you can get the best of both […]]]>

JavaScript and Python are two of the most popular and commonly used languages ​​in the world. JavaScript is an integral part of web development, both upstream and downstream. On the other hand, Python is more suitable for back-end coding and rapid application development.


While both have their advantages, you can get the best of both worlds by running JavaScript code from within a Python program.


An introduction to JavaScript and its syntax

JavaScript is a scripting language used for web development. You can use JavaScript to add behavior and functionality to web pages. It is an interpreted language, which means that code runs in real time without a compiler translating it into machine code.

Some of the distinctive syntactic features of the language are:

  1. Code blocks: JavaScript uses braces ({}) to include statements in the same block.
  2. Variable: You can define variables using the var keyword. The syntax to initialize a variable is var variable_name = value;.
  3. Constants: You can define constants using the constant keyword. The syntax to define a constant is, const constant_name = value;.
  4. The operators: You can use various logical operators in JavaScript, including &&, || and !. The equality operator comes in two forms: == compare the value, and === comparing the value and the data type.
  5. Enter exit: You can take input in JavaScript using window.prompt() and display the output on the console using console.log().

If you’re looking to get into full-stack, front-end, or back-end development, you need to understand the basics of JavaScript.

Python Syntax

Python is a high-level programming language that finds application in backend development, artificial intelligence, and data science. Python is considered a dynamically typed and collected interpreted language.

A few key syntaxes in Python to note are:

  1. Code blocks: Python uses indentations to include statements in the same block.
  2. Variable: You can initialize variables in Python like variable_name = value.
  3. Constant: Python doesn’t really support constants, but the convention is that you name variables that shouldn’t change with capitals, e.g. CONSTANT_NAME.
  4. The operators: You can use logical operators like and, Whereand not. Use the equality operator (==) to compare both value and data type.
  5. Enter exit: You can get user input using to input() and display the output using to print().

Python is one of the easiest languages ​​to master and with wide applications you should definitely get your hands dirty with it. These courses and apps are a great place to learn Python for free.

What is the Js2Py module?

Js2Py is a JavaScript to Python translator and JavaScript interpreter written in 100% pure Python by Piotr Dabkowski. To install this module, open your Terminal and run:

pip install js2py

Js2Py automatically translates any valid JavaScript (ECMA Script 5.1, ECMA 6) to Python without using any dependencies. It only uses the standard Python library.

There are three limitations to using the Js2Py module, as stated in this official documentation on GitHub:

  1. Js2py ignores strict mode.
  2. The with statement is not supported.
  3. He processes an indirect call to rating as a direct call to eval.

Despite these limitations, the module works perfectly well and converts most of the JavaScript code into Python language.

Examples of running JavaScript code in Python

Here are some examples of translating and running your JavaScript code in Python:

1. The Hello World program

The first program you write in any language is the Hello World program. You implement it like:

import js2py
js2py.eval_js('console.log("Hello World!")')

The first step is to import the js2py module in your environment. Pass the JavaScript code as a parameter to eval_js() to assess it. Passing console.log(“Hello World!”), it displays Hello World! both on Python’s output terminal and on browser console windows.

2. A function to add two numbers

Here is how you can perform addition of two numbers using JavaScript in Python:

import js2py
js_add = '''function add(a, b){
return a + b;
}'''
add = js2py.eval_js(js_add)
print(add(3, 7))

Declare a function in JavaScript format and include it in the multiline string (“”” or ”’). You can store it in a variable called js_add. Pass the function variable to eval_js() to translate it to Python equivalent. Display the result by making a function call and passing two numbers as arguments.

Here is the result obtained for the addition of two numbers using a function in JavaScript:

3. How to convert an entire JavaScript file to a Python file

Suppose you have a JavaScript file named example.js which contains the following code:


function Rectangle(w, h) {
this.w = w;
this.h = h
}

Rectangle.prototype = {
getArea: function () {
return this.w * this.h
}
};

x = new Rectangle(10, 5)

This JavaScript contains a Rectangle function that takes width and height as parameters and returns the area calculated using the width * height formula.

There are two simple methods to convert the JavaScript file to a Python file. They are:

  1. The first method runs the JavaScript file without explicitly translating it. You can implement it like:
    import js2py
    eval_result, example = js2py.run_file('example.js')

    The run_file() takes a JavaScript file as an argument and returns the evaluation result with an object that you can use to run and test any JS code.

  2. The second method explicitly converts and saves the entire JavaScript file to a Python file. You can implement it like:
    import js2py
    js2py.translate_file('example.js', 'example.py')

    Using the first method, you can work with the JavaScript file in your Python environment itself. However, if you just want to convert and run the file in Python, the second method is more feasible.

4. Creating an object using the new function

One thing to note is that you cannot create an object from the JavaScript file like new example.Rectangle(8,2). Instead, you should use .new(8,2). You can code it as follows:

import js2py
eval_result, example = js2py.run_file('example.js')
rect = example.Rectangle.new(8,2)
print(rect.getArea())

Using the first method, translate the JavaScript file that contains the code to calculate the area of ​​a rectangle. Use the point (.) the operator to access the Rectangle function in the evaluated file and use the New() function to create its object. Pass two numbers as argument. Use the getArea() function to calculate the area and display it using the to print statement.

Here is the output for calculating the area of ​​a rectangle in JavaScript:

Run Python in the browser

Although Python is a popular tool you can use to code on the backend, there are a few tools you can explore to try it out on the frontend as well. You can use Brython, Transcrypt, and Pyjs to write JavaScript-based web applications entirely in Python.

You can use other strategies to combine Python and JavaScript code in the same application. The simplest is to communicate via a simple and open standard like JSON.

]]>
Unified Patents is looking for a Full Stack Developer – IPWatchdog.com https://mynyml.com/unified-patents-is-looking-for-a-full-stack-developer-ipwatchdog-com/ Sun, 16 Oct 2022 09:15:53 +0000 https://mynyml.com/unified-patents-is-looking-for-a-full-stack-developer-ipwatchdog-com/ Unified is a private subscription company disrupting the patent market. The team is looking for a full-stack web developer capable of developing client and server software, preferably in the Bay Area. This is a permanent full-time position in San Jose, CA with the ability to work remotely. Duties include: Work on both back-end infrastructure and […]]]>

Unified is a private subscription company disrupting the patent market. The team is looking for a full-stack web developer capable of developing client and server software, preferably in the Bay Area. This is a permanent full-time position in San Jose, CA with the ability to work remotely.

Duties include:

Work on both back-end infrastructure and front-end web UIs of various projects. Design, implement and maintain scalable APIs. Build and maintain data pipelines and schedulers to deliver accurate and up-to-date data to clients. Translate designers’ mockups and wireframes into effective front-end code. Discover and optimize performance bottlenecks on existing infrastructure hosted on cloud services.

Required qualities :

The position requires:

  • A bachelor’s or master’s degree in computer science, computer engineering or a related field.
  • Knowledge of one or more programming languages, mainly JavaScript and Python.
  • Knowledge of modern JavaScript development standards, with frameworks such as React.js, D3.js, Node.js, Next.js, etc.
  • Knowledge of SQL and NoSQL relational databases.
  • Knowledge of RESTful API design and development.
  • Knowledge of cloud services, such as Amazon Web Services (AWS) and Google Cloud Platform (GCP).
  • Familiar with Git, Docker and continuous integrations and deployments.

Otherwise, knowledge of Java, C/C++ or other widely used industry languages ​​will be considered, especially if the candidate can easily master high-level languages ​​such as Python and JavaScript. Experience in building production machine learning models is also a plus.

Preference for Bay Area candidates, even though we are working remotely. The candidate must be autonomous and have a certain sense of the product.

Advantages:

  • Very competitive salaries.
  • Significant bonus.
  • Work from home or in the office according to your preferences.
  • Flexible hours.
  • Significant vacation time.
  • Comprehensive health and dental coverage.

Interested candidates:

Interested applicants are encouraged to apply online and attach a link to their GitHub profile.

Please mention that you found the position on the Job Board IPWatchdog JobOrtunities™.

About Unified Patents:

Unified is an international organization of more than 200 members that seeks to improve patent quality and deter unsubstantiated or invalid patent claims in defined technology sectors (areas) through its activities. Its actions are largely focused in areas with substantial claims by Standards Essential Patent (SEP) holders and/or Non-Practicing Entities (NPEs). These actions may include analysis, prior art, invalidity contests, patentability analysis, patent administrative examination (PTAB), amicus briefs, economic investigations and studies of essentiality. Unified works independently of its members to achieve its deterrence objectives. Smaller members sign up for free while larger ones pay a modest annual fee.

JobOrtunities Help Wanted image

]]>
Cyberattackers spoof Google Translate in a unique phishing tactic https://mynyml.com/cyberattackers-spoof-google-translate-in-a-unique-phishing-tactic/ Thu, 13 Oct 2022 16:50:04 +0000 https://mynyml.com/cyberattackers-spoof-google-translate-in-a-unique-phishing-tactic/ Attackers are spoofing Google Translate as part of an ongoing phishing campaign that uses a common JavaScript coding technique to bypass email security scanners. Leveraging trust in Google Translate is a novel approach, the researchers said. Researchers from Avanan, a Check Point software company, uncovered the campaign, which uses the coding technique to obfuscate phishing […]]]>

Attackers are spoofing Google Translate as part of an ongoing phishing campaign that uses a common JavaScript coding technique to bypass email security scanners. Leveraging trust in Google Translate is a novel approach, the researchers said.

Researchers from Avanan, a Check Point software company, uncovered the campaign, which uses the coding technique to obfuscate phishing sites to make them appear as legitimate to the end user as well as trick security gateways. . Phishing also uses social engineering tactics to convince users that they need to respond quickly to an email or face account termination, according to a blog post published today.

The messages direct a user to a link that directs them to a credential collection page that appears to be a legitimate Google Translate page, with a pre-populated email field that only requires a person to enter their login password.

The campaign is an example of a number of today’s increasingly sophisticated tactics that threat actors use in contemporary phishing campaigns to fool both the more sophisticated end-users who have become familiar with the malicious tactics , as well as email scanners that delete suspicious messages before they get through, noted Jeremy Fuchs, cybersecurity researcher and analyst at Avanan.

“This attack has a bit of everything,” he wrote in the post. “It has unique social engineering up front. It relies on a legitimate site to help get into the inbox. It uses trickery and obfuscation to confuse security services. “

“Urgent plea”

Researchers observed a Spanish-language email used in the campaign, which, like most phishing messages, begins with social engineering.

In this case, hackers make an “urgent call” to a user to confirm access to their account by informing them that important emails are missing and they only have 48 hours to review them before they are deleted.

“It’s a compelling message that could get someone to take action,” Fuchs noted.

Taking the bait, the link directs the victim to a login page which is a “pretty convincing” Google Translate lookalike page, complete with the typical logo in the upper left corner of the page and a drop-down list of languages. Closer inspection shows the URL has nothing to do with Google Translate, however, the researchers noted.

The background code makes it even more obvious that the page is a fake, with the “HTML turning this site into a Google Translate lookalike“, Fuchs wrote.

One of the JavaScript commands hackers use here is the “unescape function“, which is “a classic command that helps hide the true meaning of the page,” he wrote.

Unescape is a function in JavaScript that calculates a new string in which hexadecimal escape sequences are replaced with the character it represents. The feature can be used on a web page to make the page appear to be displayed as one thing, but when decoded it displays a “heap of gibberish” that can trick email security, according to a video on the phishing campaign published by Avanan.

“This attack requires vigilance from the end user and advanced natural language processing from the security service to stop,” Fuchs noted in the post.

Phishers look to success

Indeed, as Internet users are already familiar with the common tactics that threat actors use to trick them into giving credentials to phishing pages, actors are increasingly turning to new tactics or combining common tactics in different ways to ensure the success of their cybercriminal activity, the researchers said.

Attackers have recently been seen using everything from voicemails to falsified PayPal invoices to the ongoing war in Ukraine to lure unwitting email users into phishing bait.

Even with the rise in sophistication, however, the usual precautions that all Internet users and security professionals should take to avoid giving their credentials to phishers still apply – not just in the case of the Google Translate campaign but in all areas, according to Avanan.

Researchers recommend that users always hover over URLs found in messages before clicking on them to ensure the destination is legitimate, as well as paying close attention to grammar, spelling, and factual inconsistencies in an email. -email before trusting him.

And as always, users should also use common sense when dealing with emails from unknown entities, the researchers said. If they have any doubts about their origin or their intentions, they should simply ask the original sender to be sure before taking further action.

]]>
JavaScript Developers on What Matters and What’s Next https://mynyml.com/javascript-developers-on-what-matters-and-whats-next/ Mon, 10 Oct 2022 15:37:55 +0000 https://mynyml.com/javascript-developers-on-what-matters-and-whats-next/ Over 72% of businesses are looking for JavaScript developers, according to Geeks for Geeks. That doesn’t seem to be changing anytime soon, as the language continues to evolve. “JavaScript continues to grow in popularity for web development and has been a cornerstone of the Jamstack ecosystem,” Jason Lengstorf, vice president of developer experience at the […]]]>

Over 72% of businesses are looking for JavaScript developers, according to Geeks for Geeks. That doesn’t seem to be changing anytime soon, as the language continues to evolve.

“JavaScript continues to grow in popularity for web development and has been a cornerstone of the Jamstack ecosystem,” Jason Lengstorf, vice president of developer experience at the Netlify Developer Platform, told The New Stack. “Companies are investing in advancing the language because of its wide applicability to web builders, which is why many organizations contributed to the language specification leading to the ES2022 release.”

The latest version of JavaScript, ECMAScript 2022, made eight updates in June. The New Stack asked the developers to share what they thought were the most significant changes.

Netlify has been particularly focused on how this release can help do more with serverless and edge functions, Lengstorf said.

“There are some pretty important (and somewhat controversial) inclusions such as the high-level wait, which is a welcome addition for many developers, but some pundits see it as a gun that will trip up developers who don’t know. how it works under the hood,” Lengstorf said.

The top-level wait function “will delay the execution of current and parent modules until the imported module is loaded”, according to the ECMA 2022 language specification. It allows modules to use runtime values to determine dependencies and it can be used as a fallback for dependencies as per the standard.

Lengstorf said one thing he was happy to see was the .at() method, which is now supported by Array, String, or TypedArray. This will support negative indexing of JS arrays, which other programming languages ​​already allow. It gives the possibility to write arr[-1] instead of arr [arr.length-1]where negative numbers count backwards from the last item, according to software engineer Brayan Arrieta’s blog.

“It’s a great little ergonomic boost to JavaScript syntax,” Lengstorf said.

Characteristics of the cause of the error

Lengstorf also pointed to the introduction of a “cause” for thrown errors, saying it gives “library authors more avenues to create a great development experience.”

Kris Kowal, software engineer at Agoric, also pointed to Error.cause’s functionality as a key upgrade. Agoric is a JavaScript-native smart contract platform and Proof of Stake blockchain.

In error.cause, the Error object and its subclasses now allow developers to specify which error caused the current exception, with the cause appearing in the stack trace and accessible via err.cause, according to the developer’s synopsis Kai Wenzel’s web of standard changes.

“One feature that stands out is Error.cause,” Kowal told The New Stack. “ES2022 adds an idiom for expressing and inspecting serial causal dependence between errors, complementing AggregateError, which expresses causal dependence on parallel errors.”

These features together “enable thinking about error causation,” he said, that will eventually show up in developer tools. Add to that libraries that will begin to take advantage of the ability to express error causation, and “developers will be better able to glean useful insights into the root causes of failure.” Kowal added.

“Error.cause represents one of the best ways for JavaScript to evolve: to become more complete by filling in the gaps implied by the existence of other functionality,” he said.

Support for creating user interfaces

Part of the update helps developers speed up UI creation and includes “incredibly popular” new UI widgets, said Baruch Labunski, CEO of SEO firm Rank Secure.

“One of the changes was to allow migration to Angular for those using AngularJS as support for AngularJS is discontinued,” Labunski said. “Other popular programs have also received updates. Part of the update is due to Microsoft supporting the addition of type syntax in JavaScript, helping programmers add type annotations to their JS code.

Also critical: The update affected two corrupted libraries that had malicious packages included in their original build, Labunski said.

And after?

Agoric has a seat at the ECMAScript table through Mark Miller, chief technical and scientific officer of Agoric, and also a member of the ECMAScript standards group since the mid-1990s, when he joined Google as a delegate. (Watch for our next interview with Miller on how E helped shape JavaScript.) Agoric uses a hardened version of JavaScript with its blockchain solution.

In the next iteration, Agoric would like to see bucket support, Kowal said.

“We’ll be happy to share more as first-class Module and ModuleSource arrive in the language, along with enhanced JavaScript features that allow us to safely invite guest programs to run in a shared domain. “, did he declare.

Developer Shawn Wang, aka @swyx, has documented the evolution of JavaScript and claims that JavaScript is in its third age. One change he is looking forward to is the temporal proposal, which is in the third step of the four-step proposal process.

“This is probably the most anticipated upcoming feature, where basically all date formatting – like what does it mean to take today’s date and subtract a month?” Wang said. There’s all sorts of complicated date logic, including formatting but also date calculations,… Sometimes it’s a bit confusing.

Despite criticism of the language, JavaScript seems here to stay for the foreseeable future.

“Yeah, it’s buggy, but it works,” Wang told The New Stack. “It runs everywhere. That’s a huge, huge advantage to overcome. …yes, if you have a domain-specific language for [a] a new platform and a particular device where nothing else works, [then] of course you can create your own language. But beyond that, JavaScript works with everything.

Band Created with Sketch.
]]>