Web Atoms Blog

Internet of Things

srikanth.naidu — Thursday, December 5, 2024

The Internet of Things (IoT) is a network of interconnected physical objects that use sensors, software, and other technologies. Interconnected computing devices, mechanical and digital equipment, objects, animals, or people having unique identities (UIDs) and the capacity to send data over a network without the need for human-to-human or human-to-computer communication. Any device that can be assigned an IP address and can transport data over a network, such as a heart monitor implant, a farm animal with a biochip transponder, a car with integrated sensors to notify the driver when tyre pressure is low, or any device that can be assigned an IP address and can transport data over a network, are examples of internet of things objects. IoT Developed from machine-to-machine (M2M) communication, which involves machines communicating with one another across a network without having to interact in real time. Connecting a gadget to the cloud, administering it, and collecting data is referred to as machine to machine communication. ###History In 1982, a customised Coca-Cola vending machine at Carnegie Mellon University launched the Internet of Things concept. ###How it works? IoT devices acquire data by interacting with their surroundings in the real world, and this data is then saved on the cloud. By connecting to an IoT gateway or other edge device, IoT devices may exchange sensor data that is either transmitted to the cloud for analysis or processed locally. IoT devices may be interacted with using applications on various devices, such as smartphones. ###Applications Consumer, commercial, industrial, and infrastructural IoT devices are frequently separated. ![image](/api/attachments/att/97/IOT2.png) ###Frameworks IoT frameworks include the following: Amazon Web Services (AWS) IoT is an Amazon cloud computing platform for IoT. This framework is intended to make it simple and safe for smart devices to connect to the AWS cloud and other connected devices. The Azure IoT Suite from Microsoft is a platform that consists of a set of services that allow customers to connect with and receive data from their IoT devices, as well as execute different data operations such as multidimensional analysis. Brillo/Weave, developed by Google, is a platform for developing IoT applications quickly. Calvin is an Ericsson-developed open source IoT platform for developing and administering distributed applications that allow devices to communicate with one another.

Number-Based Video Captcha

Simmi Kava — Tuesday, August 8, 2023

###Number-Based Video Captcha: A New Way to Verify Human **Introduction:** In today's digital age, online security has become a paramount concern. As the internet continues to evolve, so do the methods employed by cybercriminals to gain unauthorized access to sensitive information. To counteract this growing threat, NeuroSpeech Technologies Pvt. Ltd. has developed a cutting-edge solution known as Number-Based Video Captcha. In this blog post, we will explore this innovative approach to verifying human users and discuss its potential impact on online security. **What is Number-Based Video Captcha?** _Number-Based Video Captcha_ is an advanced technology developed by NeuroSpeech Technologies Pvt. Ltd. that aims to distinguish between humans and bots during online interactions. Traditionally, captcha systems have relied on users to solve visual puzzles or answer simple questions to prove they are human. However, these methods have become susceptible to automated attacks. Text-based CAPTCHA often presents challenges for users. The distorted characters or complex puzzles can be difficult to interpret, leading to frustration and discouragement. This can result in users abandoning the process or seeking alternative websites that offer a more user-friendly experience. Optical Character Recognition (OCR) technology has advanced over the years, making it easier for automated bots to bypass text-based CAPTCHA. Bots can analyze and interpret the distorted characters with a high degree of accuracy, rendering the security measure ineffective against sophisticated attacks. Image verification CAPTCHA systems often require users to interact with images by clicking on specific objects or areas. However, the interpretation of these images can vary among users, leading to inconsistencies in the verification process. Different users may perceive the same image differently, resulting in false positives or negatives. Image verification-based CAPTCHA relies on a finite set of images that are pre-selected for verification purposes. This limited pool of images can be exploited by bots or attackers who can build a database of these images, making it easier to bypass the security measure. Additionally, the lack of diversity in images can lead to monotony for users, further affecting the usability and engagement. Also, it often requires users to perform additional mental tasks, such as identifying specific objects or patterns within an image. This can increase the cognitive load on users, particularly those with limited cognitive abilities or language barriers, making it more challenging to successfully complete the verification process. These systems track the movement of the mouse cursor to determine the validity of the user's response. While this method may seem effective in distinguishing humans from bots, it raises several security concerns: a) Privacy Breach: Mouse location tracking can compromise user privacy by capturing and storing their mouse movements. This sensitive data could be exploited by malicious actors for various purposes, such as targeted advertising, identity theft, or unauthorized tracking. b) User Profiling: Capturing mouse location data over time allows for the creation of user profiles. This profiling can be used to monitor user behavior, track online activities, and potentially violate user privacy and autonomy. c) Data Vulnerability: Storing mouse location data on servers poses a potential risk as these data repositories can become targets for cyberattacks. If attackers gain access to these databases, they can obtain sensitive user information, leading to further security breaches. In addition to mouse location tracking, some image verification CAPTCHA systems also capture keystrokes to verify user responses. This approach introduces its own set of security threats: a) Keystroke Logging: Keyboard tracking can record all user keystrokes, including sensitive information such as passwords, credit card details, and personal messages. If these data are intercepted or mishandled, users become vulnerable to identity theft and financial fraud. b) Insecure Data Transmission: Transmitting keyboard tracking data to remote servers may expose it to interception or unauthorized access. This can occur during data transfer, potentially leading to the compromise of sensitive user data. c) Trust Concerns: Users may be hesitant to enter sensitive information or perform certain actions if they suspect their keystrokes are being recorded. This lack of trust can hinder the usability and functionality of the CAPTCHA system. Number-Based Video Captcha addresses this challenge by utilizing video-based authentication techniques. **How does it work?** Unlike conventional captcha systems, Number-Based Video Captcha presents users with a dynamic video containing a sequence of numbers. The user is then required to correctly identify and enter the numbers displayed in the video. By incorporating video elements, NeuroSpeech Technologies Pvt. Ltd. ensures a higher level of security by making it more difficult for bots to decipher and replicate the video content. **Key features and benefits:** 1. Enhanced Security: Number-Based Video Captcha offers a robust defense against automated attacks, ensuring that only genuine human users can access protected content or services. 2. User-Friendly: Unlike complex and visually challenging captchas, this technology presents a straightforward and intuitive verification process, making it easier for users to prove their authenticity. 3. Compatibility: The technology seamlessly integrates with existing web applications and platforms, making it a versatile solution for businesses across various industries. 5. Cost-Effective: Implementing Number-Based Video Captcha can significantly reduce the resources required to combat bot attacks, resulting in cost savings for organizations. **Conclusion:** Number-Based Video Captcha represents a significant advancement in online security measures. By incorporating dynamic video elements, this innovative solution provides a more effective and user-friendly method to verify human users while deterring automated attacks. As technology continues to evolve, it is crucial to stay one step ahead of cybercriminals, and Number-Based Video Captcha offers a promising solution to enhance online security in the digital era. PS: Used in [Castyy - Cast Your Talent](https://castyy.com), our growing Social Network for Performing Arts, Film, Media and Entertainment Industry Professionals.

Popup Action button

Ajay Singh — Monday, May 22, 2023

Hello Everyone, In this article, I will explain how to implement a PopupActionButton in WebAtoms with examples. ####What you will learn? - You will learn how to implement the PopupActionButton on any of the pages. - How to display the menu item. - What action can be done using this component? ####Why use it? - Generally, PopupActionButton is used in `actionRenderer` (a bindable property of the base page) to display some quick menu options. - On the basis of user selection, you can perform some actions or navigate to other pages. ####How to write code? ````javascript

; ```` MenuItem is a function that takes some parameters like label, icon, event-click, href, target, etc. ####How to navigate on the menu click? In the above example, the `data-click-event` attribute calls the `openAddNew` function. Meaning it will navigate to add new training. ````javascript @Action({ onEvent: 'add-new' }) openAddNew() { PageNavigator.pushPage(AddNew); } ```` ####Code Explanation - We can set the `label` property to display the name of that menu. - We can associate an `icon` with the menu. In the above example, we have used the `font awesome` icon. - We can even set the `eventClick` to perform some action. In the above example, this.deleteTraining() is the method that would be executed on clicking the Delete menu item. - `href` property can be used to redirect to other pages. Check out the [StackBlitz Demo](https://stackblitz.com/edit/stackblitz-webcontainer-api-starter-vrfeqi?file=src%2Fpages%2Fhome%2FHome.tsx) here.

WebAtoms BottomPopup

Ajay Singh — Wednesday, December 14, 2022

Hi Guys, In this blog, you will learn how to create a Bottom popup in `WebAtoms`. At the end of this blog, you can get the source code link of this control. ####What is BottomPopup? `BottomPopup` is the surface containing additional content that is docked to the bottom of the screen. They are generally used to keep a feature or secondary content visible on the screen when the content in the actual UI region is frequently scrolled or navigated. `BottomPopup` is a class component that extends from `AtomControl`. It has one static method called the `show`, which takes parameters, let's say in simple words that if we want to send some value to this `BottomPopup` control, we can send it as a parameter to this `show` method. ####What are the Properties of BottomPopup? Several properties can be used to simply or dock the content inside the `BottomPopup` control. `titleRenderer` - This property helps us to add the title for the `BottomPopup` control. `headerRenderer` - This property helps us to add the header content to this control. `closeRenderer` - This property is used to close the `BottomPopup` control. `footerRenderer` - This property is used to set the content at the footer of this control. `barRenderer` - This property helps to attach the icon of this `BottomPopup` control. ####What is the code snippet of the BottomPopup? To implement this control, the class must extend from `BottomPopup` class. ````javascript public async openTrainingBottomPopup() { await AddNewTrainingBottomPopup.show({parameters: { type: "Training" }}); } this.titleRenderer = () => ; this.footerRenderer = () => ; ```` We have to define one method in our page & by using the show method of `BottomPopup` control we can open this control & we can pass the parameters while opening the popup page. ####What are the Advantages of BottomPopup? - `BottomPopup` is the alternative to menus or simple dialogs. - When this popup slides into the screen, the rest of the screen dims, giving focus to the bottom content. - It may contain the list, button actions, and other quick menu items. - `BottomPopup` can also be dismissed by touching the outside of the control. - This control is very easy to use, it's created with modern web technology. Click [here](https://www.webatoms.in/play/@web-atoms/sample-b4/1) to view the complete demo.

VSCode Error Lens Extension.

Ajay Singh — Wednesday, September 28, 2022

[Error Lens](https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens) VSCode extension. Publisher: **Alexander** This extension shows the error message and highlights the line containing the error while writing the code." ####Features - Highlight lines containing diagnostics. - Append diagnostic as text to the end of the line. - Show icons in gutter (icons like Warning, Error, Info, Hint) on the left side of the VSCode editor. ![image](/api/attachments/att/242/demo.png) - Show message in the status bar. ![image](/api/attachments/att/243/1.png)

WebAtoms - DataGrid

Ajay Singh — Monday, September 19, 2022

####What is DataGrid Control? A `DataGrid` is a class component that extends from the `TableRepeater` control. A `TableRepeater` control simply represents the table structure that consists of the table, the header, the body, and the footer. This control also extends from [AtomRepeater](https://www.webatoms.in/blog/tutorials/WebAtoms--AtomRepeater-30#contextId=0) control. A `DataGrid` user interface control helps display the information or data in a grid-like format of rows and columns. In this UI control, you can define customized columns and sort orders for each header. A `headerSort` property can be used to specify the order in which columns load. We can add the desc order query by using `headerSortDescending`. ####What are the properties of DataGrid control? `orderBy` - This is the two-way data binding, to load any specific column in default order, we can set this property before the top node. `selectedItems` - Gets the DataGrid's selected items as a collection. `items`- Gets the items displayed in the `DataGrid`. `columns`- This property is bound to the array which defines the header, `headerSort`, `headerSortDescending`, and `labelPath` as properties for const variable of type `IDataGridColumn`. `SelectAllColumn` - Checkboxes are added to all columns in the control with this property. One great benefit is that `AtomRepeater` properties can also be used here. Other than `columns`, all properties are bindable properties. ####Code snippet of DataGrid Control? ```javascript this.ViewModel.ProductList)} columns={columns} /> ``` ####How to define the columns? In the code, we define the array of objects of type `IDataGridColumn`. ```javascript const columns: IDataGridColumn[] = [ SelectAllColumn, { header: "Title", labelPath: (item: IProduct) => item.title }, { header: "Brand", labelPath: (item: IProduct) => item.brand }, { header: "Category", labelPath: (item: IProduct) => item.category }, ]; ``` We have set the `columns` property of `DataGrid` to this const property which is the type of `IDataGridColumn`. It provides us to select all columns if we mention the SelectAllColumn value inside the array. Adding a checkbox to each row in the "DataGrid" will let you perform single or multiple operations. Header means the heading of the column `labelPath` is used to display the text `headerSortDescending` will sort the column in descending order. ####Advantages of DataGrid Control? - In addition to auto-generating columns, it also provides sorting properties (by default ASC) and allows setting the order in desc. - It is easier to understand this control due to its less code approach, and the order definition and column definition are separated. - The separation of concerns approach makes maintenance easy. -We can use the repeater control properties since this control extends `TableRepeater`. - Since this control is very lightweight and is based on the latest technology, it doesn't require the installation of any additional npm packages.

WebAtoms - AtomRepeater Drag & Drop

Ajay Singh — Thursday, July 14, 2022

In this article, we will learn the Drag & Drop in AtomRepeater, and also understand its implementation with the help of examples. Dragging and dropping allow moving an object to a different location. It is an interactive and user-friendly concept. It allows the user to click and hold the mouse button over an element, drag it to another location, and release the mouse button to drop the object. HTML 5 Drag and Drop are much easier to code. Any element in it is draggable. In traditional HTML, to implement the drag & drop features, the developer had to write complex JavaScript code or use other JavaScript frameworks like jQuery, etc. HTML5 came up with the [drag & drop API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API), which makes it easier to use in complex UI. Before proceeding further, I suggest you read the [blog](https://www.webatoms.in/blog/tutorials/WebAtoms--AtomRepeater-30#contextId=2) on WebAtoms AtomRepeater UI control. The blog explains the AtomRepeater control with an example. It helps to understand this blog more conveniently. Let's extend the article’s example, where we have shown the top cities of the world. Now, we will enable the end-user to re-order their favorite city by dragging the city from top to bottom or in an order of their choice. ####Code snippet for Drag & Drop? ```javascript this.viewModel.agencyLocations)} enableDragDrop={true} itemRenderer={(item: IAgencyLocation) =>

} /> ``` In the example, we first added the `enableDragDrop` property and set it to true. We have made the draggable attribute `true` on the element we want to drag to another place. ####The benefit of the AtomRepeater Drag & Drop feature. One of the greatest advantages of drag-and-drop is its simplicity. In the example, we have shown you the reorder list. We can reorder or drag the photo gallery, which makes it easier to arrange the picture in a suitable way. We don't require any other JavaScript framework or npm modules to implement the Drag & Drop.

Expander

Shubham Khare — Monday, June 27, 2022

#### WebAtoms Expander This article explains Expander control in detail and highlights a way to implement this control which is present in the [WebAtoms](https://www.webatoms.in/index.html#contextId=0) framework. The `Expander` is the user interface control imported from the WebAtoms library. #### What is Expander control? WebAtoms Expander is the functional component. For implementing the `Expander` control, there is no need to extend it into our class component. It helps in easy implementation of the layout, which is needed to expand and collapse, which can help add multiple interacting options on a single screen. #### Properties of Expander control - `icon` - icon is a string property used in assigning the icon code or path name. It is an optional property utilized for enhancing the layout by displaying icons. - `isExpanded`- isExpanded is a boolean property that expands the form layout when set to true and collapses when set to false. By toggling the `isExpanded` property, we can expand or collapse the view on some DOM event. #### How to implement the Expander control? In this example, we will use the `Expander` control to display a form in separate sections where each section is a separate `Expander`, shown separately in the _ExpanderDemoScreen_. **Code for ExpanderDemoScreen** In this example, we will create three simple forms inside an `Expander` where each `Form` in the `Expander` has unique user fields. The layout of the screen only allow one `Form` to display at a time. When one `Form` is in an expanded state, the other two remain collapsed. ![image](/api/attachments/att/210/Expander-Demo-Screen1.png) ![image](/api/attachments/att/211/Expander-Demo-Screen2.png) ![image](/api/attachments/att/212/Expander-Demo-screen3.png) **Code snippet for css of ExpanderDemoScreen** ![image](/api/attachments/att/213/Expander-css.png) **Code snippet for ExpanderDemoViewModel** The logic for implementing desired expand and collapse behavior. ![image](/api/attachments/att/214/Expander-Demo-Screen-ViewModel.png) #### Advantages of Expander - `Expander` control helps create layouts having a master-detail flow. Mainly beneficial when there is a requirement for implementing single-page applications. - We can generate dynamic layouts, as `Expander` gives us control over the view displayed when a particular event has occurred. - An `Expander` control is beneficial when there is a requirement of showing only a part of a large layout at a time, making it efficient in small screen sizes. - The `Expander` control is a lightweight and responsive control. - 'Expander' can be expanded or collapsed without defining any event. - As 'Expander' is a functional component hence it is reusable and gets initialized in the constructor of the class component.

WebAtoms - AtomRepeater

Ajay Singh — Thursday, June 16, 2022

This article explains AtomRepeater repeater control in detail and highlights a way to bind the data to this control. ####What is AtomRepeater control? Without initially understanding what event bubbling & event capturing in javascript is, it may be challenging to understand this control. Event bubbling means whenever an event occurs on an element, like button, p, span, div, or any other HTML element, the event handler will initially run on it and then on its parent and finally up to its other predecessors. For more information about event bubbling and event capturing, please go through this [article.](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#event_bubbling_and_capture) WebAtoms AtomRepeater control is the class component that extends from AtomControl.(AtomControl class represents UI Component for a web browser.) AtomRepeater is a data Bind Control, which works as container control. This control displays a repeated list of items bound to this control. A database table, array of objects, or any other list can be attached to this control. The WebAtoms AtomRepeater control provides a wide range of properties and events. ####What are the properties of AtomRepeater control? `allowMultipleSelection`- Using this property we can enable or disable the multiple selection functionality. `items` - This control returns items displayed in this control. `selectedItems` - To retrieve a collection containing all selected items in a multiple-selection AtomRepeater, use the SelectedItems property. `valuePath` -This property specifies the path to the property that determines the value of the selectedItem property. `enableDragDrop` - When you want to grab an object and drag it to a different location, set this property to true. `itemRenderer` - The itemRenderer property is like an HTML template that decorates and binds the item. All of the above properties are bindable properties. ####What is the default event of AtomRepeater? `event-item-click` - This event fires action when the AtomRepeater control is clicked. `event-item-select` - This is helpful when we have a requirement to execute any event on the selection of any particular item in the list e.g. trigger an event on the selection of a particular checkbox and so on. `event-item-deselect` - This is helpful when we have a requirement to execute any event on deselection of any particular item in the list e.g. trigger an event on de-selection of a particular checkbox and so on. ####How to implement AtomRepeater? ```javascript this.viewModel.agencyLocations)} itemRenderer={(item: IAgencyLocation) => } /> ``` In the above code, We have to bind the items property, which will be collections or arrays. The itemRenderer property renders the array item. ####How to create an event on an element? Let's take the above example, where we showed a list of locations. Now we will add the delete function to remove the particular item from the list of locations items. We have to add the data client event attribute to the button. ####How to add the data-click-event? ```javascript ``` The `data-click-event` attribute is not attached to the button. `delete-location` is the value of that data attribute. Now you are thinking, what is the use of this data attribute to the button element? How does this help us to remove the specific location? You are thinking that without calling any HTTP DELETE request will it remove a location item from the list? We will answer all your questions with an explanation. The data-* attribute helps us store custom data private to the page or application. This data*-attribute gives us the power to embed custom data attributes on all HTML elements. Here we are embedding the delete-location as the value of this data attribute. ######Confusing? ```javascript this.viewModel.agencyLocations)} event-delete-location={(e: CustomEvent) => this.viewModel.deleteAgencyLocation(e.detail)} itemRenderer={(item: IAgencyLocation) => } /> ``` Notice the event-delete-location attribute of AtomRepeater. We have added the `data-click-event` attribute to the button. And we are using the custom value of this attribute to create the event for the repeater control. This will helps to bind the event to the AtomRepeater to remove the location. But how does the location get removed? Whenever the button gets clicked, this event-delete-location event gets triggered. It will send the delete request to the server to remove the specific record from the list of items. What are the advantages of this control? - The first advantage of this control is that we are not binding the location name using the binding. `one-way`, `two-way` & `one-time` binding will not work inside the itemRenderer. There are no binding functions attached to this HTML tag. - The second advantage of this control is that we are not binding any event to the button, which again helps us load the all-button element quickly in the browser. - Here we have a single event to the control for a specific operation. (like here is the delete location). - This control is straightforward to implement and loads the data faster and smoother. The most important benefit of this control is that we have created only one event at the root level. This will reduce the event listener count in the performance monitor. [](add link here)![image](/api/attachments/att/234/performanceListener.png) Check the JavaScript event listeners count. It indicates that there is a significantly less number of event listeners used in the entire application. See the event listeners count of popular social media (Twitter) web applications. ![image](/api/attachments/att/237/twitterEventListenerCount.png) Less event listening leads to less memory usage. Event rewriting is possible because of the event bubbling of HTML.

WebAtoms Form - Part || (with upgrades)

Ajay Singh — Sunday, May 29, 2022

In the [previous article] (https://www.webatoms.in/blog/tutorials/WebAtoms--Form-2r#contextId=0) we have seen what is `WebAtoms Form`. If you haven't seen it, I strongly recommend reading that article. Today, we will highlight further enhancements and development made to this component. Applications use forms to enable users to log in, update a profile, enter sensitive information, and perform many other data-entry tasks. `WebAtoms` provides two different approaches to handling user input through forms and without forms. Let's learn how to build a small screen without the `Form` component. ####Form without Form component? ```javascript this.viewModel.errorContact)}> this.viewModel.model.firstName)} placeholder="First Name" /> this.viewModel.errorEmail)} label="Email Address:" required={true}> this.viewModel.model.emailAddress)} /> this.viewModel.save())} text="Save" /> ``` **ViewModel** validations and save button code sample is as shown below:- ```javascript @Validate public get errorContact() { return this.model.firstName ? "" : "First name is required"; } @Validate public get errorEmail(): string { const em = (this.model.emailAddress)?.trim(); if (!em) { return "Email address cannot be empty"; } if (em.includes(" ")) { return "Email address cannot contain space"; } if (!em.includes("@")) { return "Invalid email address"; } return ""; } @Action({ validate: true }) public async save() { // save api } ``` The code snippet explains how to get an alert text message (in red color) underneath the input box when running this code in the browser. The get method helps us write multiple validations. The important points to keep in mind while working with `FormField` without adding the Form component. - We must define the get method with the `@validate` attribute in the ViewModel. - We don't have to enclose FormField inside the Form component. - The save button click event must have the @Action attribute with the validate property to true. This will trigger the `ViewModel` validations before actually firing the button event and report errors (if any) to the user. - The `required` attribute of `FormField` must be set to true. Now let's discuss the improvements/enhancements in the form components. ####How to use the Form with eventSubmit and data-event? ```javascript ``` - Every `FormField` and submit button must be inside the Form component. - We can define the inline error validations in the TSX file. - In this case, we will not use the @validate attribute on the method. The form component must have the `event submit` property to bind the event. - Our button must have the `data-event` attribute to submit the `Form`. Like data-event="submit". The value submit is not case-sensitive. ####How to Add multiple Forms? you can't nest forms on a single page. You can't nest `forms` because then the `forms` aren't able to identify which fields are for what. But, sometimes client design demands the use of multiple forms. For E.g. we may have details to be filled up in multiple tabs or sections like phone number sections, Addresses sections, and formal detail sections. In this case, we can have multiple forms with a single submit button. ####How to write code for multiple Forms? ```javascript ```` ####How to define the validation in multiple Forms? ```javascript this.viewModel.errorContact)} label="Contact:" required={true}> this.viewModel.model.contact)}> ``` We need to define all validations (Basic, phone number, address validation) in ViewModel. ```javascript @Validate public get errorContact(): string { return this.model.firstName ? "" : "First name cannot be empty"; } ``` The above get method allows us to validate the input field. We need to keep in mind that the Submit button should be outside the forms. meaning we should have a single button client event (submit) for all the multiple Forms ```javascript this.viewModel.save())} /> @Action({ validate: true }) public async save() { this.model = await this.contactService.save(this.model); this.close(this.model); } ``` ####Summarization. - We can also get the error messages without encapsulating the FormField inside the Form Component. We have to define the validation error in ViewModel, and the button must have the `eventClick` to submit the form. - If we define the inline error messages, they will get fired as soon as the forms get loaded. - When we are encapsulating the FormField inside the Form component, We have to bind the `eventSubmit` event of the form. (like save update delete edit operation). The button should be inside the Form component. It must have the `data-event` attribute to submit.

PopupWindow

Shubham Khare — Thursday, May 19, 2022

####WebAtoms - PopupWindow This article will cover the popup window in [WebAtoms](https://www.webatoms.in). Today we will learn about implementing a popup window. ####What is a Popup window? Pop up window is a user interface window displayed in the foreground of a screen. The appearance of the popup window can be controlled programmatically with the help of events. ####Why PopupWindow control? [WebAtoms](https://www.webatoms.in) provides a simple way of implementing a popup window with features for creating a custom window. With the help of `PopupWindow` control, we can add forms, lists, editors, etc., to the window. `PopupWindow` is a class component that extends from `AtomControl`. To apply this control, we have to `extend` the component class from `PopupWindow`. Html or JSX inside the `render()` method will be displayed inside the popup with all the styles and click events. ####What are the properties of PopupWindow control? - `title` - It is a property that allows the user to set the title at the top of the window. - `showWindow()` or `showModal()` - It's a static function that displays the window that allows the user to display the window when called. It also has parameters that are useful for passing data between screens. - `close()` - It is a function that closes the window when called. - `titleRenderer` - It is a property that allows the user to customize the header with Html or JSX tags instead of a plain title. ![image](/api/attachments/att/206/title-renderer-5.png) #### Implementing PopupWindow For implementing the `PopupWindow` control, we will first create a class with the name _PopupWindowDemo_ which will be the extension of `PopupWindow`. **Code snippet for PopupWindowDemo** ![image](/api/attachments/att/188/pop-up-window-demo-2.png) **Adding style** ![image](/api/attachments/att/203/pop-up-window-demo-style-4.png) **** For this example, we will create a simple screen (_PopupWindowScreen_) with a button when it's clicked, will call the method `showWindow()`, and the popup will appear on the screen. **Code snippet for PopupWindowScreen** ![image](/api/attachments/att/190/pop-up-window-screen-2.png) Both `showModal()` and `showWindow()` can be used to display the window. **Adding style** ![image](/api/attachments/att/204/pop-up-window-screen-style-4.png) **** ####Advantages of PopupWindow control? - This control renders the existing view inside the window by only using `extend` keyword with `PopupWindow`. - The window can be customized in multiple ways with the help of provided render properties, giving more control over the user interface. - `PopupWindow` is also draggable, which is beneficial while working with multiple windows on the screen. - We can open or close the window programmatically, which helps display or close the window during the click, hover, or any event. - We can also create alert or confirmation dialog windows using `PopupWindow`.

Regular Expressions (Regex)

Shubham Khare — Friday, April 15, 2022

###What are Regular Expressions? In this article, we are about to learn about programming fundamental Regular expressions, also known as regex. It is a powerful tool used for finding patterns and text in a document, sentence, or database. It is similar to the search-replace feature used in word documents, except regex is much more precise and powerful to edit code and verify user input which is pattern sensitive, for example, email addresses, phone numbers, passwords, etc. Before that, we need to learn about the characters of regex. **** ###Characters of Regex - Modifiers - Metacharacters - Quantifiers - Groups and ranges **Modifiers** Modifiers are optional characters used to perform case-insensitive and global searches. | Modifier | Description | |:--------:|-----------------------------------------------------------------| | g | It performs global matching and returns all the matched results | | i | It performs case-insensitive matching | | m | It performs multiline matching | **Metacharacters** In regex, metacharacters are the characters that have special meaning. Metacharacters are written before by a backlash and have a special meaning to a combination. | Metacharacters | Description | |:--------------:|:-------------------------------------------------:| | . | finds a single character | | \d | finds a digit character | | \D | finds a non-digit character | | \b | finds a match at the beginning/end of a word | | \B | finds a match NOT at the beginning/end of a word | | \f | finds a form-feed character | | \n | finds a newline character | | \r | finds a carriage return character | | \s | finds any whitespace character | | \S | finds any non-whitespace character | | \t | finds a tab character | | \v | finds a vertical tab character | | \w | finds a word character | | \W | finds a non-word character | **Quantifiers** Quantifiers specify how many instances of a character, group, or character class must be present in the input for a match. | Quantifiers | Description | |:-----------:|:------------------------------------------------------------:| | a* | matches any string that contains ‘a’ zero or more times | | a+ | matches any string that contains at least one ‘a’ | | a? | matches any string that contains ‘a’ zero or one time | | a{n} | matches any string that contains ‘a’ exactly n times | | a {n,} | matches any string that contains ‘a’ at least n times | | a{n,m} | matches any string that contains ‘a’ between n to m times | | a$ | matches any string that ends with ‘a’ | | ^a | matches any string that has ‘a’ at the beginning. | | ?=a | matches any string that is followed by a specific string ‘a’ | | ?!a | matches any string that is not followed by a string ‘a’ | The quantities ‘n’ and ‘m’ are integer constants, and ‘a’ can be any character or a string. **Groups and Ranges** Regex allows us to match the text and extract information for further processing by defining a group of characters enclosed in the parentheses ‘( )’. Any pattern inside the parentheses will be called a group. For defining the range, denoted by square brackets, e.g. - [a-z] includes every small case alphabet from a to z. | Groups | Description | |:------:|:----------------------------------------------------------------:| | [xyz] | finds any character between the square brackets | | [^xyz] | finds any character excluding the characters inside the brackets | | [0-9] | finds a character, which is a digit in the given range | | [^0-9] | finds any character which is not a digit in the given range | | (x\|y) | finds any of the given alternatives | **** ###Applying the regex One of the most commonly known uses of regular expressions is for checking if the input string follows a given pattern or not. The most widely known problem that requires the user to enter a string that must follow strict rules to be accepted by the program is while entering an email id and password. First, we need to set the rules for each of the inputs. **Validation of email ID** - The string before the ‘@’ symbol should be a valid combination of alphabets, digits, or a dot, [a-zA-Z0-9.] + @ - The string after the ‘@’ symbol should also be the valid combination of alphabets, digits, followed by a dot, [a-zA-Z0-9.] - The string after the dot should be a string consisting only of alphabets no more than four characters, [a-z]{2,4}. Regular expression for the given requirements should be > _‘^[a-zA-Z0-9.]+@[a-zA-Z0-9.]+\.[a-z]{2,3}$’_ ![image](/api/attachments/att/171/emailregex2.png) **Validation of password** - The password should at least have an uppercase character (?=.*[A-Z]). - The password should at least have a lowercase character (?=.*[a-z]). - The password should at least have a digit (?=.*[0-9]). - The password should have one of the special characters (?=.*[!?@#$%^&*-]). - The password should have a minimum of 8 characters, .{8,}. A regular expression for the given requirements should be > _‘^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*[!?@#$%^&*-]).{8,}$’_ ![image](/api/attachments/att/172/passwordregex2.png) **Search and Replace** We can use regex patterns for editing multiple lines of code, given that all the lines of code follow the same search pattern, every matched line will be replaced at once. Suppose if we have a multi-line code with any line that follows the same given pattern. ![image](/api/attachments/att/170/searchcode.png) In the given code we have to replace every `

` with a `

` and `

` with a `` without replacing the content written in between the tags. - The pattern we are looking for starts with `

` tag, followed by an asterisk (*) and a capture group that matches with everything which is not a < symbol of a closing div tag. - Regex for the search pattern should be `

\*([^<]+)

` - When the line that matches with the above pattern we will replace it with `

` and `

` tags and keeping the contents that matches with the capturing group intact. - Regex for the replace pattern should be `

` - In the above expression `$1` denotes the first capturing group that matches with everything that is not a < symbol, written as [^<] and it has to match this token as many times as possible after the asterisk symbol denoted by the + operator. ![image align = "center"](/api/attachments/att/167/search-replace.png) Result after applying both search and replace patterns in vs code. ![image](/api/attachments/att/168/carbon.png) **** ###Benefits of Regex - Regex is used in many popular programming languages and has a similar syntax and writing style, making regex universal. - Using regex makes the code efficient because the regex pattern is nothing but a string and can be used multiple times for searching patterns. - A programmer can code a lot of operations without creating any special functions for each one. Only slight changes in pattern string are required, and a completely different pattern is in use. - Regex is very compact and language-independent. For the same operations, the same pattern is enough. - Regex also increases the speed of validations by eliminating the use of conditional operators.

WebAtoms - FileUploader

Ajay Singh — Tuesday, April 5, 2022

This article will cover the file upload control in [WebAtoms] (https://www.webatoms.in/index.html#contextId=0). Today we are heading to understand how to build or implement a file uploader. #####Why HTML File Upload? To understand the WebAtoms FileUploader, first, we need to go back to check how to upload the file in simple HTML and JavaScript. We have to add the input tag with a file type, and on the `onChange` event we can obtain the uploaded files data. This HTML input allows us to open the file explorer and upload the files to our systems or applications. #####Why WebAtoms FileUploader control? The above HTML file uploader is not easy to style. Even we cannot change the content of the button. HTML File uploader is the default file uploader that doesn't look attractive. We don't see this uploader in modern web applications. On another side, WebAtoms has introduced the FileUploader user interface control. FileUploader is a class component that extends from [AtomControl](https://github.com/web-atoms/core/blob/es5/src/web/controls/AtomControl.ts). This control solves the stylistic issues and adds new attributes and methods to help you develop a better user interface experience for file upload. ##### What are the properties of FileUploader control? `multiple` - Allow the user to select multiple files from file explorer. `uploadLabel` - Allow the user to change the label of upload control. `fileFilter` - Allow the user to filter the type of file to upload. `isDisabled` - Allow the user to disable the upload. `fileFilterMessage` - Allow the user to show the custom message based on the file filter attributes. ##### What are the events of FileUploader control? `eventUploadFinish` - Event fired when file upload is complete. `eventUploadClick` - Event fired when the page is loaded. `eventUploadSelect` - Event fired when a file has been selected for an upload operation. `eventUploadStart` - Event fired when uploading of file has started. #####Code Snippet? ````javascript this.addFiles(e.detail))} /> ```` In the above code snippet, We have shown how to implement the FileUploader control. The `uploadLabel` property enables us to caption the control as per user requirement. The `eventUploadFinish` event occurs when the file is uploaded successfully. It will call the `addFiles` method with the file details as parameters. After that, we can send the file to a backend via an HTTP POST call. #####How to upload the Multiple Files? ````javascript this.addFiles(e.detail))} /> ```` By default, the browser file selection dialog will allow the user to select only one file for upload. Adding property `multiple` and making it true, enables us to upload the multiple files. ##### Advantages of WebAtoms FileUploader control? - The very first benefit of using WebAtoms FileUploader helps us to rename the content of the upload Button using the `uploadLabel` property. - This control has the inbuild progress bar attached to it, which is visible only while the upload file is still in progress. - The Cancel button is visible both during the upload process and after the file upload process is complete. - This control provides many properties which enhance the user experience. In some scenarios, we need to disable the upload, for that we need to simply set the isDisabled property to true. - The other significant advantage of using this WebAtoms `FileUploader` control is to restrict the user to upload a file of a certain type. For instance, in some scenarios, we need to upload only the image file, we can achieve this by using the `fileFilter` properties. - We can also send warning message to the end-user using `FileFilterMessage` property of this control. - According to the requirements, we can transform the style of this control. This control is built using modern web technologies using JavaScript and HTML. This control is very lightweight in nature and very straightforward to implement.

WebAtoms -DropDown

Ajay Singh — Monday, March 14, 2022

This article provides you with the first experience of writing the simple WebAtoms DropDown user interface control. ####What is WebAtoms? [WebAtoms](https://www.webatoms.in/index.html#contextId=0) is an advanced MVVM framework to write cross-platform applications in HTML5 and Xamarin.Forms. ####What is DropDown Control? WebAtoms DropDown control is a class component, that extends from [AtomRepeater](https://github.com/web-atoms/web-controls/blob/dev/src/basic/AtomRepeater.tsx) control. When we click on the control, it opens the window, which has the input field. This control returns the suggestions list based on the character entered by the user and allows us to select the item from the suggestions. ####What are the properties of DropDown Control? - items - match - value - labelPath - valuePath - suggestionRenderer The above properties are bindable. ####Let's understand the properties. To enable hints or applicable values, first, we need to populate the data. We will bind the `items` property of this control that helps us get the suggestions. `match` property matches the character or text entered in the input field. `value` property is a two-way binding property that eventually helps us send the selected or chosen data from the list to our database. `SuggestionRenderer` property helps us to decorate and beautify the suggestions list. ####How to implement the DropDown Control? Let's understand with a simple example. We want to allow the user to select the country with the ISD code. ```javascript this.viewModel.countriesList)} valuePath={(item) => item?.isdCode} labelPath={(item) => `${item.countryCode} +${item.isdCode}`} match={(text) => { text = text.toLowerCase(); return (item: ICountry) => item.countryName.toLowerCase().includes(text);}} value={Bind.twoWays(() => this.viewModel.isdCode)} suggestionRenderer={(item: ICountry) =>

} /> ``` In the code snippet, we have populated the list of countries and bound it to the items property of this control. `LabelPath` shows the label. In the above case, it is the Country code and the ISD code. `match` property will return the items based on the country name entered by the user. The best thing is that we can search for more than one property. For example, we can also match the currency name, country type, etc. Last but not least, The `suggestionRenderer` property works as an HTML template that decorates and binds the item. In the above code snippet, we have shown the Country name and the ISD code as a suggestion. ####What is the benefit of DropDown Control? - This control is very lightweight and straightforward to implement. - We don't require any NuGet package to use this control. - This control is created with modern web technologies and created with efficient logic behind it. - Simple to decorate the suggestion list with modern `CSS`. - If we have thousands of values in ComboBox, Scrolling and selecting the desired value from ComboBox is time-Consuming. We cant search value in ComboBox. `DropDown` helps us find and search the matching value by allowing the search facility. - This control is responsive. It's mobile-friendly. - When working with ComboBox, we do not have flexibility to separate out suggested(label value) and actual (option) value; whereas WebAtoms `DropDown` control allows us to do the same and this makes it more end user-friendly.

WebAtoms - Calendar Control

Shubham Khare — Monday, February 28, 2022

####Introduction In this article, we will learn about the `AtomCalendar` user-interface control. It displays one month at a time, permits us to select a date, advance from month to month, facilitates the creation of the events. ####What is AtomCalendar? `WebAtoms AtomCalendar` control is developed on the latest modern web technologies making it fast, lightweight, easy to customize, and easy to execute. This control provides us with all the vital features to assist the users in managing their regular tasks and events with ease. ####Properties of AtomCalendar - yearStart - yearEnd - eventDateClicked The `yearStart` property takes a number value which sets the limit of the year-selector of AtomCalendar. Years before the value set in `yearStart` will not be available for the selection. For example, if the current year is 2022, and the value of `yearStart` = -2, then the `yearStart` will be set to `currentYear` - 2 Years = 2019. Any year preceding the year 2019 will not be available for selection. The `yearEnd` property sets the upper limit of the year-selector of `AtomCalendar`. For example, if the current year is 2022, and the value of `yearEnd` = 2, then years starting 2025 are filtered from the selector. Any year succeeding the year 2024 will not be available for selection. The `eventDateClicked` property calls a method when the date on the calendar gets clicked. This property triggers changes in the UI, making the calendar control interactive. ####Code snippet ````javascript this.viewModel.dateClicked(e.detail))}> ```` #### Is it Customizable? Yes, `AtomCalendar` control is relatively simple to customize. It provides you with tremendous flexibility to define the presentation of your data. This control has a template feature that gives us the power to style data. ````javascript

this.viewModel.dateClicked(x.data))} styleBorderRadius = "0px" styleBorder = "1px solid lightgray" styleColor = {Bind.oneWay((x) => x.data.isOtherMonth ? Colors.gray : x.data.isWeekend ? Colors.red : Colors.black)} class={Bind.oneWay((x) => ({ 'date-css': 1, 'is-other-month': x.data.isOtherMonth, 'is-today': x.data.isToday, 'is-weekend': x.data.isWeekend, 'is-selected': x.localViewModel.selectedDate === x.data, }))}> ```` In the above code, we defined the `itemTemplate` and showed some inline data of control, which helps us present the data clearly and transform the look and feel of the `AtomCalendar`. ####Benefits of using AtomCalendar ⦁ `AtomCalendar` allows user-defined styles, which makes it customizable according to the theme of a website. ⦁ There is no need to install a separate npm library for using `AtomCalendar`. ⦁ `AtomCalendar` is useful in websites where the content needs to be presented chronologically, for example, events, reminders, memos, meetings, etc.

WebAtoms - Form

Ajay Singh — Monday, January 10, 2022

This article provides you with the first experience of writing the simple basic `Form`. After that, we will show you how to do the simple validation and cover some of writing the `CSS` on this lightweight `Form`. We will cover all these things with some code snippets. ####What is WebAtoms? `WebAtoms` is an advanced MVVM framework to write cross-platform applications in HTML5 and Xamarin.Forms. #### Why do we Need a Form? A `Form` is the most vital aspect of the user-application interaction for gathering input from the user and storing it in the database. A Form should contain basic validation to collect valid and accurate data from the user to provide a seamless experience for the user. ####What is WebAtoms Form? Earlier in the `WebAtoms`, we have defined the `AtomForm` as a class component. To validate the `AtomForm`, we have isolated the logic and validation part to the `ViewModel` section. We will guide you on how to write the simple `Form` using the `WebAtoms Form` component. `Form` and `FormField` are javaScript functional components, they are nothing but simple javascript functions. ####How to use the Form? ```javascript ``` ####How to apply multiple validations? ```javascript const validate = (label: string, value: string, r?: RegExp) => { if (!value) { return `${label} is required`; } if (r) { if (!r.test(value)) { return `${label} is invalid`; } } return ""; }; const validateEmail = (label: string, value: string) => validate(label, value, /[a-z0-9\-\.]+\@[a-z0-9\-\.]+[a-z0-9\-]+/i); ``` We have described the `validate` function for input validation. `validateEmail` function validates the email using the regex. Below is the simple code snippet which shows the email validation. ```javascript validateEmail("Email Address", this.data.emailAddress))}> this.data.emailAddress)} /> ``` In the above example, we have just displayed a couple of simple validation. In the same manner, one can achieve complicated validation. ####Benefit of WebAtoms Form. - Form component is very lightweight, meaning it is simple to implement. - In large applications, there is a requirement of having small UI components like having multiple Forms in a single form, so it becomes easier to implement the validation logic either in ViewModel or in View itself. - The error, label, and class attributes of FormField components help us write the neater and cleaner UI with complex validations. - You don't need to install any separate NPM library for building the simple form. - It will improve the speed of writing the code and also reduce the number of lines of code, it becomes easier to maintain the code. Check out this [example](https://github.com/web-atoms/web-controls/blob/dev/src/tests/basic/basic-form/BasicForm.tsx).

YantraJS Performance Improvement using Sequence of T

Akash Kava — Monday, December 20, 2021

While building parser, we found that we are creating huge list of tokens/nodes to build abstract syntax tree, and from abstract syntax tree we are creating IL code. Each of this list are very huge in size. And while trying to parse script with over 100K lines, parser would take more than 30 seconds. And while profiling, we found two hot paths taking maximum time. 1. `String.Substring` 2. `Array.Resize` We removed `String.Substring` by introducing `StringSpan`, this will be covered in a different post. `Array.Resize` is called by `List.SetCapacity` method. So we looked up source code of `List` to investigate further. ## Internals of List `List` uses an internal array to store items, and when there is no space left in the array, it resizes the array (which basically creates a larger array and copies all items from old array to new array). Default size of the array is 16, and as the list grows, it keeps on doubling the capacity. So when you are adding 17th item on the array, the capacity is set to 32. And when you are adding 33rd item, the capacity is set to 64 and so on with little variance. This does not hurt performance for small scripts. But when we started parsing larger scripts, it started slowing down exponentially. As an entire script with too many closures and many nested functions, the tree is very large and memory usage and GC pressure is very high. So we decided to drop `List` and we created `Sequence` which is suitable for append and read once scenario. Most of the times, in parser we are creating a list by appending items but we are only reading them once. However, when array is resized, every node is copied from old array to new array making many enumerations. ## Sequence `Sequence` stores nodes of smaller array, and when there is no more free space, it creates a new node with a smaller array. Basically `Sequence` is a linked list of variable sized arrays. Default size is 16, but if you specify an initial capacity, it will create first node of same capacity. `Sequence will not resize any array. The only drawback is indexed access is slower. When a sequence needs to be read, it starts from first node till last and enumerates all array items in the node. Benefits are, 1. It does not resize existing array 2. It does not increase exponentially 3. Appending is fast 4. Enumerating is marginally slow but not at all noticeable. Drawbacks, 1. Indexed access is slow 2. Insert is slow Sequence is a basically a linked list of small arrays. Linked List are not suitable as smaller arrays will be localized while accessing and single node can have multiple array items. When `AddRange` is called with known size, Sequence will allocate all items at once if they are more than capacity.

Major Version Update 2.0.4

Akash Kava — Tuesday, December 14, 2021

We are happy to announce major version update of Web Atoms for Xamarin Forms with following improvements. ## JSX Initialization Reengineered Initialization sequence of JSX was little as all property setter were routed through bridge's `SetValue` method, which internally composed full type string of property and performed lookup before actually setting the value. In this new version, we have added property in prototype of class, so it can be directly set in JavaScript, the conversion will be performed if needed utilizing available TypeConverters. You can also create new instance of CLR object in JavaScript and set it directly. This is part of new major update in both JavaScript code and DotNet. ## New Controls ### AtomIconContentView Many times we need to simply display an icon on left of any content, for this we need to add a new layout unless it is a button. And also now days we are using font icons, so we have made this control to create font icon based content view. It has properties, `iconFontSize, iconGlyph, iconColor, secondaryIconGlyph, secondaryIconColor, command, commandParameter`. You can also use duo tone icons.

Functional Components along with Controls

Akash Kava — Friday, December 3, 2021

With new update in WebAtoms, we can now use functional components along with the Controls. Almost all controls are derived from `AtomControl` and `AtomXFControl` for Xamarin Forms. Each of these controls are expensive as they contain heavy logic to perform binding, initialization and disposals. So we have now introduced light weight functional components that basically inlines the JSX nodes inside AtomControl so you can reduce node hierarchy and reuse components easily. In this tutorial we will display how to use reusable button with font awesome icon and icon + text combination. ## Syntax Function components are defined as shown below. ### Attributes We will declare attributes that we can apply, optional attributes can be declared with `?`. Our `FAButton` component will render button with a text if we specify text attribute. ```tsx export interface IFAButton { id?: string; icon?: string; text?: string; eventClick?: any; href?: string; target?: string; title?: string; styleDisplay?: string; class?: string; isVisible?: any; subClass?: string; } ``` ### CSS Lets apply little CSS ```tsx const css = CSS( StyleRule() .padding(8) .marginLeft(3) .marginRight(3) .roundBorderFull() .display("inline-block") .height(40) .width(40) .defaultBoxShadow() .cursor("pointer") .backgroundColor(Colors.transparent) .hoverBackgroundColor(Colors.lightGreen) .and(StyleRule(".pressed") .backgroundColor(Colors.lightSteelBlue) ) .child(StyleRule("label.label") .display("flex") .alignItems("center") .child(StyleRule(".fad") .fontSize(18) .width("100%") .color(Colors.purple.withAlphaPercent(0.5)) .cursor("pointer") .and(StyleRule(".red") .color(Colors.red) ) ) ) ); ``` ### Component We will now declare the actual component as a function. ```tsx export default function FAButton({ id, icon, text, eventClick, href, target, title, styleDisplay, class: className, subClass }: IFAButton) { const cn = className ?? ( subClass ? subClass + " " + css : css ); if (href) { return

Web Atoms Blog

Internet of Things

Number-Based Video Captcha

Popup Action button

WebAtoms BottomPopup

VSCode Error Lens Extension.

WebAtoms - DataGrid

WebAtoms - AtomRepeater Drag & Drop

Expander

WebAtoms - AtomRepeater

WebAtoms Form - Part || (with upgrades)

PopupWindow

Regular Expressions (Regex)

WebAtoms - FileUploader

WebAtoms -DropDown

WebAtoms - Calendar Control

WebAtoms - Form

YantraJS Performance Improvement using Sequence of T

Major Version Update 2.0.4

Functional Components along with Controls

WebAtoms - XF.RefreshView

WebAtoms -SwipeView

YantraJS now Available in Apache 2.0 License

Master-Detail View

Yantra Expression Compiler for DotNet

Version update 1.6.297

Introducing new JavaScript Engine YantraJS for DotNet

Difference between `instanceOf Array` and `Array.isArray`

What is CODE to me?

Let's start FRESH!

Version Update 1.6.269

WebAtoms: AtomExpander - Expandable Container to host content

WebAtoms: WA.AtomCheckBoxList Control

SQL Index Not Utilized on Conditional Filter and DatePart

Version update 1.6.262

Product Quality is your responsibility!

Version update 1.6.249

Getting Started with WebAtoms XF.CarouselView

WebAtoms: AtomChips Control

Minor Version 1.6.246 Update

Getting started with WebAtoms XFListView.

Major Version 1.6.239 Update with New Platforms

Schema Migration: Entity Framework Core

WebAtoms with Font Awesome

WebAtoms - AtomXFToggleButton Bar

Developer Guide: Async Tips

JavaScript/TypeScript Development Guidelines

Good words of Wisdom

Drawbacks of Compiled Languages

Take a BR-eak

WebAtoms - AtomXFToggleButton Bar

WebAtoms - Action Decorator

Trampoline

WebAtoms: WATCH & VALIDATE Decorators

JS: hasOwnProperty vs Truthy vs in

WebAtoms: Load Decorator & Debouncing

JavaScript: CURRYING

Fetch GitHub User profile using WebAtoms - Xamarin.Forms.

JavaScript: Temporal Dead Zone (TDZ)

Templated Query for TypeScript

Does everyone need a mentor at work?

Blocking IP Address Using ETERNITY Framework

Embed V8 JavaScript Engine in Xamarin.Android

What and When To Unit Test?

CSS: place-items

Why JS Array Methods support array-like objects?

Developer Myths

JavaScript: White Space & Line Terminator Code Points (Unicode)

JavaScript: break in labeled blocks

ETERNITY Workflow Framework

JavaScript: Property Shadowing & Enumeration

JavaScript: Return Statement Behavior

JavaScript: Optional Chaining Operator (?.)

JavaScript: Trailing (Final) Commas - Facts

C# - Aggressive Inlining

JavaScript: Object.freeze() -yields "true"

JavaScript: Tail Call Optimization

JavaScript: Array Loose Equality - Behavior

JavaScript: Class - Facts

JavaScript: Sequence Expression - The Comma Operator (,)