Javascript – MYNYML http://mynyml.com/ Mon, 27 Jun 2022 21: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 ECMAScript 2022 blesses class elements, high-level expectation https://mynyml.com/ecmascript-2022-blesses-class-elements-high-level-expectation/ Mon, 27 Jun 2022 21:00:00 +0000 https://mynyml.com/ecmascript-2022-blesses-class-elements-high-level-expectation/ ECMAScript 2022, the next update to the official standard behind JavaScript, has been officially approved, with new features ranging from class elements to next-level waitability. The ECMAScript 2022 specification was approved by ECMA International on June 22. But the features are already available in most browsers, said Robert Palmer, co-chair of the TC39 committee that […]]]>

ECMAScript 2022, the next update to the official standard behind JavaScript, has been officially approved, with new features ranging from class elements to next-level waitability.

The ECMAScript 2022 specification was approved by ECMA International on June 22. But the features are already available in most browsers, said Robert Palmer, co-chair of the TC39 committee that manages the standard, in March. Feature availability in JavaScript engines is more relevant to developers than appearance in the actual specification, Palmer said.

ECMAScript 2022 has the following new features:

  • High-level expectation, allowing the await keyword to use at the top level of modules.
  • New class elements, including public and private instance fields, public and private static fields, and private instance methods and accessors.
  • Static blocks within classes, to perform per-class evaluation initialization.
  • The #x in obj#x in obj syntax, to test the presence of private fields on objects.
  • Regular expression matching index via the /d/d flag, which provides start and end indices for matching substrings.
  • The cause property on Error objects, to be used to record a causal chain in errors.
  • The at method for Strings, Arrays and TypedArrays, allowing relative indexing and the use of Object.hasOwnan alternative to Object.prototype.hasOwnProperty.

ECMAScript 2021 standardized capabilities from last June such as String.prototype.ReplaceAllto replace instances of a substring, and the AggregateError type of error.

Copyright © 2022 IDG Communications, Inc.

]]>
XML datasource object has type HTMLUnknownElemnt in JavaScript, no recordset defined – JavaScript – SitePoint Forums https://mynyml.com/xml-datasource-object-has-type-htmlunknownelemnt-in-javascript-no-recordset-defined-javascript-sitepoint-forums/ Sun, 26 Jun 2022 04:23:54 +0000 https://mynyml.com/xml-datasource-object-has-type-htmlunknownelemnt-in-javascript-no-recordset-defined-javascript-sitepoint-forums/ S7771 June 26, 2022, 4:23 a.m. #1 This question is about using the old Data Island with Microsoft Edge. To simplify my question, I found the following simple HTML example to bind XML data to a table from a Microsoft page with this link: https://docs.microsoft.com/en-us/previous-versions/windows/desktop/ms762701(v=vs.85). I also added the meta tag in the head section […]]]>

This question is about using the old Data Island with Microsoft Edge. To simplify my question, I found the following simple HTML example to bind XML data to a table from a Microsoft page with this link:

https://docs.microsoft.com/en-us/previous-versions/windows/desktop/ms762701(v=vs.85).

I also added the meta tag in the head section of the HTML to emulate IE7. However, the data binding does not work and the fields in the table are not populated with XML data. As far as I know, Microsoft expects the following xml binding code to work correctly.

When I use javascript to check the type of xmlMeetings which is the XML Data Source ID (dso), the type is displayed as an HTMLUnknowElement object. But I expected the object to be known and have all the methods and properties. My intention is to eventually access the recordset, but of course the recordset is not defined for the HTMLUnknowElement which is the dso or xmlMeetings.

According to Microsoft, the IE=EmulateIE7 in the meta tag emulates Internet Explorer 7 when a properly declared doctype is used. In the past, I had no problem binding xml data to a table even if I didn’t pay attention to the correct declaration of the doctype.

Could someone tell me:

1- why does binding of dso data to table not happen? If data binding occurs, I expect to have access to the recordset as well.

2- What is the correct doctype declaration for this HTML page?

Thank you for your help.

I saved the following code in testXML.html file and loaded the page with Microsoft Edge browser. No data binding with the table occurs.

<HTML><HEAD>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

    <script type=’text/javascript’>
	    alert(‘typeof()=’ + typeof(document.getElementById(‘xmlMeetings’))
    </script>
    </HEAD><TITLE></TITLE>
    <BODY>
    <XML ID="xmlMeetings">
    <?xml version="1.0" ?>
    <meetings>
    <meeting>
    <date>1/1/99</date>
    <time>9:00</time>
    <location>104</location>
    </meeting>
    <meeting>
    <date>2/1/99</date>
    <time>13:00</time>
    <location>34</location>
    </meeting>
    <meeting>
    <date>3/1/99</date>
    <time>14:30</time>
    <location>20</location>
    </meeting>
    </meetings>
    </XML>

    <table style="border:1px solid red" datasrc="https://www.sitepoint.com/community/t/xml-data-source-object-has-type-htmlunknownelemnt-in-javascript-no-recordset-is-defined/389487/#xmlMeetings">
    <tr>
    <td><div datafld="date"></div></td>
    <td><div datafld="time"></div></td>
    <td><div datafld="location"></div></td>
    </tr>
    </table>

    </BODY>
    </HTML>


]]>
Simple state management in JavaScript with Nanny State https://mynyml.com/simple-state-management-in-javascript-with-nanny-state/ Fri, 24 Jun 2022 02:29:38 +0000 https://mynyml.com/simple-state-management-in-javascript-with-nanny-state/ Nanny State is a small library I wrote to make it easier to build state-based web applications using Vanilla JS. It’s similar to React, but with much less overhead and a new syntax to learn. It also uses a single application-wide state object instead of each individual component having its own state. It was inspired […]]]>

Nanny State is a small library I wrote to make it easier to build state-based web applications using Vanilla JS. It’s similar to React, but with much less overhead and a new syntax to learn. It also uses a single application-wide state object instead of each individual component having its own state. It was inspired by HyperApp and has many similarities to Elm.

In this article, I’ll explain how Nanny State works, then demonstrate what it can do with a few examples.

Nanny State uses a one-way data flow model, consisting of 3 parts:

  • State – an object that stores all the application data
  • See – a function that returns an HTML string based on the current state
  • Update – a function which is the only way to change the state and restore the view

In Nanny State, the state is everything. The state object is the only source of truth for your application – every bit of application data is a property of that object. Even the event handlers used in the view are methods of the state object.

The view is a representation of the report in HTML format. It changes whenever the state changes and allows users to interact with the application.

The update function is the only way to change the state. It is a single entry point for updating status and ensures changes are deterministic, consistent, and predictable.

These 3 things are all you need to create an app in Nanny State. In fact, it can be summed up by asking the following 3 questions:

  1. What data should I store in my app? This will constitute the properties of the State object
  2. How do I want app data presented on the page? This will help you create the View function
  3. How does app data change when the user interacts with it? The Update function will be needed for this

Hello Nanny State!

The easiest way to see how Nanny State works is to write some code! We’ll start with a basic example and then try to make something a little more complex.

The easiest way to run the following example is to use an online code editor such as CodePen, or you can run it locally by installing the nanny-state package using NodeJS.

Copy the following code into the JS section of CodePen:

import { Nanny,html } from 'https://cdn.skypack.dev/nanny-state';

const View = state => html`<h1>Hello ${state.name}</h1>`

const State = {
  name: "Nanny State",
  View
}

const Update = Nanny(State)

This shows how the 3 parts of Nanny-State work together. Let’s take a close look at each part individually:

const View = state => html`<h1>Hello ${state.name}</h1>`

The Nanny state uses µhtml to display HTML. The View function still accepts state objects as its only setting. He then uses the html function provided by µhtml to create HTML code based on the literal template provided as an argument.

Using a literal pattern means that we can use the ${variable} notation to insert the state properties into the view. In this example, we use it to insert the value of name property inside the <h1> element.

const State = {
  name: "Nanny State",
  View
}

The State the object is where everything application data is stored. It includes all the properties and values ​​that will be displayed in the View and may change over the lifecycle of the application, such as the name property in this example.

Notice that View is also a property of State using shorthand object notation. Remember the state is everything – each part of the application is the property of the State.

const Update = Nanny(State)

The last line defines the Update function as the return value of the Nanny function. This can now be used to update the value of all properties in the State. In fact it is the only way that all the properties of the State can be updated. It also performs the initial rendering of the View based on the values ​​provided in the State. This means that a header will be displayed saying “Hello Nanny State” as seen in the CodePen below:

Hello Nanny State

This example is basically just a static page though. Let’s make it dynamic by adding an input box that allows the user to enter a name to whom they want to say hello. Update the code to look like this:

import { Nanny,html } from 'https://cdn.skypack.dev/nanny-state';

const View = state => html`<h1>Hello ${state.name}</h1><input oninput=${state.changeName}>`

const changeName = event => Update({name: event.target.value})

const State = {
  name: "Nanny State",
  changeName,
  View
}

const Update = Nanny(State)

In this example, we added a <input> element to the View. Event listeners are defined inline in the view, so in this example we have a oninput event listener attached to <input> element. This will call the changeName event handler, which is a method of the state object, whenever an input is detected. This event listener needs to be set, so let’s take a closer look:

const changeName = event => Update({name: event.target.value})

This is a standard event handler written in Vanilla JS. It accepts an event object as a parameter as usual and when called we want to update the State object, so we use the Update function, because it is the only way to update the State.

The argument we provide to Update function is an object that contains all the properties we want to update in state and the respective new values. In this case, we want to update the name property to the value that was entered by the user in the input field, which is part of the event object and accessed using event.target.value. This will update the state with the new value of the input field and instantly render the page. Using µhtml for rendering means that only parts of the View that have actually changed are updated. This means that the new rendering after aState Updating is both efficient and incredibly fast.

And that’s it – your first Nanny State app! Try typing and you’ll see how quickly it reacts to user input…and all with just a few lines of code. You can see the code in the CodePen below:

Dynamic input

Nanny State makes it easy to write responsive state-based applications. As you can see, there is not a lot of code required to create a dynamic state-based application that reacts to user interaction. That’s the beauty of Nanny State.

True or false quiz

Now that we’ve seen a basic example, let’s try to make something a little more complex. We will use Nanny State to create a True or False quiz. Open a new pen on CodePen and follow.

We will start in the same way, by importing the Nanny State library:

import { Nanny,html } from 'https://cdn.skypack.dev/nanny-state'

Next we will create the State object and populate it with the initial property values ​​the game will use:

const State = {
  score: 0,
  index: 0,
  questions: [
    {question: "A Nanny State is a country where nannies are employed by the state", answer: false},
    {question: "Nanny State is also the name of a beer", answer: true},
    {question: "Mila Kunis and Ashton Kutcher employ 16 nannies to help raise their children", answer: false},
    {question: "The Nanny McPhee films are based on the Nurse Matilda books", answer: true},
    {question: "Nanny State uses the µhtml library for rendering", answer: true},
]
}

This object contains 3 properties:

  • score – this keeps track of how many questions the player answered correctly and starts at 0
  • index – this keeps track of which question the player is at and matches the last property which is the questions deploy.
  • questions – This is an array of objects with question and answer Properties. The question property is a string and the answer property is boolean

Now that we’ve created the data, let’s create the View to view this data:

const View = state => html`
<h1>True or False?</h1>
<h2>Score: ${state.score}</h2>
${state.index < state.questions.length ?
html`<p>${index + 1}) ${state.questions[state.questionNumber].question}</p>
     <button onclick=${state.checkAnswer(true)}>TRUE</button>
     <button onclick=${state.checkAnswer(false)}>FALSE</button>`
:
html`<h2>Game Over, you scored ${state.score}</h2>`
}`

It’s a bit more complicated View we saw in the previous example, but most should be pretty self-explanatory. After the title header, we display the score using the score property of the State object. Next, we use a ternary operator to fork the view. Since the view is written using template literals, you cannot use if-else declarations to the fork code, so use ternary declarations.

This ternary statement checks whether questionNumber is less than the length of the questions array, which basically checks if there are still questions to be answered. If there are, the question is displayed with two buttons, one for TRUE and one for FALSE. If there are no more questions, we display a GAME OVER message with the player’s score.

One thing to note when deriving view code using ternary operators is that you must use the html function for each new fork.

The buttons both have a line onclick an event listener attached to them that calls the same event handler, checkAnswer and accepts an argument either true Where false depending on which button you pressed. Now let’s write this event handler:

const checkAnswer = answer => event => Update(state => ({
    score: answer === state.questions[state.index].answer ? state.score + 1 : state.score,
    index: state.index + 1
}))

This event handler accepts an additional argument of answer as good as event object that all event handlers accept, so it must be curried using the double-arrow notation seen above. He calls the Update function that uses a ternary operator to check if the answer provided as an argument matches the answer to the current question, if so, then the score the property is increased by 1, otherwise the score remains the same. It also increases the value of the index property, so the following question will appear.

This event handler should now be added to the Statewith the View. We can do this using shorthand object notation, as long as checkAnswer and View are defined before State:

const State = {
  score: 0,
  index: 0,
  questions: [
    {question: "A Nanny State is a country where nannies are employed by the state", answer: false},
    {question: "Nanny State is also the name of a beer", answer: true},
    {question: "Mila Kunis and Ashton Kutcher employ 16 nannies to help raise their children", answer: false},
    {question: "The Nanny McPhee films are based on the Nurse Matilda books", answer: true},
    {question: "Nanny State uses the µhtml library for rendering", answer: true},
],
  checkAnswer,
  View
}

Now that it’s all part of the Stateall that remains is to define Update function by calling the Nanny function and provide State as an argument:

const Update = Nanny(State)

And that’s all! The quiz should start immediately and you should be able to answer each question and the score will change depending on whether the answer is correct or not. Another example of an interactive app that’s quick to build with a minimal amount of code. Try answering the questions and see how you do. You can see the finished code in the CodePen below:

True or false quiz

Once you’ve had fun playing and got used to how Nanny State works, here are some ideas for expanding the game:

  • Add more questions
  • Add “Start” and “Replay” buttons to allow players to replay
  • Randomly select questions
  • Keep track of the highest score
  • Add questions with other answers, except true or false
  • Create a multiple choice quiz

Nanny State includes many more other benefits such as built-in support for using local storage and routing. See the documentation for more information or contact us if you have any questions.

I would like to know what you think of Nanny State. Would you consider using it for a project? Is there anything else you would like to know about this? Leave a comment in our community!

]]>
TypeScript enters the top 5 in the latest Stackoverflow survey • The Register https://mynyml.com/typescript-enters-the-top-5-in-the-latest-stackoverflow-survey-the-register/ Wed, 22 Jun 2022 15:00:00 +0000 https://mynyml.com/typescript-enters-the-top-5-in-the-latest-stackoverflow-survey-the-register/ The annual Stackoverflow survey is here and while JavaScript continues to rule the roost, TypeScript has edged out Java to be among the top five most commonly used programming languages. Microsoft’s JavaScript superset has slowly climbed the rankings: it was seventh most used in 2021, up from ninth place in 2020, and languished at 12th […]]]>

The annual Stackoverflow survey is here and while JavaScript continues to rule the roost, TypeScript has edged out Java to be among the top five most commonly used programming languages.

Microsoft’s JavaScript superset has slowly climbed the rankings: it was seventh most used in 2021, up from ninth place in 2020, and languished at 12th in 2018. In the latest study, it was fifth.

Interestingly, despite TypeScript’s popularity in usage stakes, affection for the technology has plummeted. Rust continued its run as the most loved language (87% of developers wanted to continue using it), but TypeScript fell from third to fourth in the passion stakes while Elixir fell from fourth place in second place in 2021.

In the 71,547 responses regarding programming languages, it’s also worth noting a new switch between Python and SQL. In 2021, Python made SQL the third most used language. This year, SQL regained third place, just behind HTML/CSS.

And the most hated…

Unsurprisingly, developers are still dreading that tap on the shoulder from the financial department for a change to this piece of code on which the whole company depends. Visual Basic for Applications and COBOL are still among the top three most feared technologies.

The ranking of operating systems changed little: Windows won for personal and professional use, although for professional use Linux overtook macOS to take second place with 40% of responses compared to 33% for Apple. Most notable has been the growth of the Windows Subsystem for Linux, which now accounts for 14% of personal use, up from just 3% in 2021.

The Stackoverflow team introduced a new category for version control systems this year and, unsurprisingly, Git got 94% of responses, with the second SVN managing a measly 5%. Disturbingly, while the majority of those learning to code use Git for version control, a disturbing 17% say “I don’t use any.” Something to add to the program for sure.

As was the case in 2021, AWS was the most popular cloud platform, although Microsoft’s Azure snatched second place from Google Cloud. However, budding coders ditched the pro preferences in favor of Heroku, who took the top spot. Google Cloud was second and AWS and Azure followed in fourth and fifth place respectively.

Wages are up

And the salaries? They have increased since 2021. Survey respondents indicated that, on average, median salaries have increased by around 23%. The big winners were COBOL, where the median annual salary rose from $52,340 to $75,592.

Microsoft maintained its dominance of developer tools, with 74% of 71,010 respondents using Visual Studio Code, a slight increase from 71% in 2021. Although still in second place, use of the more comprehensive Visual Studio , fell slightly to 32% from 33%. , while IntelliJ and Notepad++ were roughly neck and neck in third and fourth place respectively (a swap as of 2021.)

Demonstrating that there is still life in the old dog, .NET topped the “other frameworks and libraries” category, although NumPy was preferred by users learning to code. Stackoverflow decided to move Node.js from the “programming, scripting, and markup languages” category in 2021 to the more appropriate “web frameworks” category where it took first place from React.js with 47% of 58,743 respondents using it vs. 43% use React.js.

As for the survey itself, it came from developers in 180 countries (though not those under US sanction) and, as in 2021, respondents who spent less than three minutes on the survey were discarded. In fact, due to additional questions, the median time spent was actually just over 15 minutes. ®

]]>
Finding Client-Side Prototype Pollution with DOM Invader | Blog https://mynyml.com/finding-client-side-prototype-pollution-with-dom-invader-blog/ Mon, 20 Jun 2022 12:37:00 +0000 https://mynyml.com/finding-client-side-prototype-pollution-with-dom-invader-blog/ Last year, we made finding DOM XSS much simpler by introducing a brand new tool called DOM Invader. This year, we’ve enhanced DOM Invader to make it easier to find CSPPs (Client-Side Pollution Prototype) with just a few clicks. If you want to investigate, find, and fix client-side pollution prototype vulnerabilities, you really should keep […]]]>

Last year, we made finding DOM XSS much simpler by introducing a brand new tool called DOM Invader. This year, we’ve enhanced DOM Invader to make it easier to find CSPPs (Client-Side Pollution Prototype) with just a few clicks. If you want to investigate, find, and fix client-side pollution prototype vulnerabilities, you really should keep reading – to find out how DOM Invader makes your life easier. We’ve also created another YouTube video to help you use the new features:

What is prototype pollution?

We hope to publish client-side pollution lab prototypes in our Web Security Academy demonstrating the problem in a few months, but for now, here’s what you need to know.

Prototype pollution is a vulnerability that occurs when you merge an object with a user-controlled JSON object. This can also happen as a result of an object generated from query/hash parameters, when the merge operation does not clean up the keys. This allows an attacker to use property keys like __proto__ , which then allows them to create arbitrary assignments to the Object.prototype (or other global prototypes). When this occurs, it is referred to as a prototype pollution source. The following code example demonstrates this:

params.replace(/+/g, ' ').split('&').forEach(function(v){
var param = v.split( '=' ),
            key = decodeURIComponent( param[0] ),
            val,
            cur = obj,
            I = 0,
//…
obj[key]=val;
//…
let url = new URL(location);
let params = url.searchParams;
deparam(params.toString())

To exploit the prototype pollution, you need a source and a gadget. A prototype pollution gimmick occurs when a site uses a property in an unsafe way without filtering. For example, a site can do the following:

let myObject = {};
if(myObject.html) {
   document.getElementById('myElement').innerHTML = myObject.html;
}

At first glance, it might seem that there is no problem here. The object does not contain any properties, but the JavaScript engine will examine the Object.prototype for the “html” property if it does not exist on the current object. This then leads to a prototype anti-pollution gadget called “html”. Let’s see what happens when we modify the Object.prototype:

<div id="myElement"></div>
<script>Object.prototype.html="<img src onerror=alert(1)>";</script>
<script>
let myObject = {};
if(myObject.html) {
   document.getElementById('myElement').innerHTML = myObject.html;
}
</script>

This results in the use of the Object.prototype.html property, instead of the “html” property of the “myObject” object. A developer will assume that these properties are not controlled by the user and therefore lead to XSS.

How to discover the sources of pollution of the prototypes on the client side?

If you want DOM Invader to find prototype pollution sources, you need to enable the prototype pollution option.

Screenshot showing how to enable prototype pollution

When you’ve enabled it, go to a site you want to test. You can use one of our test cases if you want to see how it works. DOM Invader will attempt to test the query string, hash, and JSON objects sent using a web message and report if it was successful.

Screenshot showing prototype pollution sources

In this case, DOM Invader found two prototype pollution sources that both occur in the query string – denoted by “looking for”. You can use the “Test” button to manually check the source, or you can use the “Search gadgets” button to automatically discover gadgets. If you choose the latter, DOM Invader will open a new window and display a progress bar. Once the scan is complete, it will show you the results in the augmented DOM:

Screenshot showing gadget search result

In the example above, DOM Invader has discovered a gadget called “html”, which ends up in an innerHTML sink. You will notice that a green “Exploit” button has appeared – this will combine the discovered source with the gadget and automatically create a pollution exploit prototype.

If you want to try DOM Invader with a real CSPP vulnerability, we’ve hidden one in our Gin & Juice Shop; see if you can exploit it!

Find pollution prototypes on real sites

As always at PortSwigger, we use our tools to find real-world vulnerabilities – in doing so, we encountered many issues that we could fix by improving DOM Invader. The first thing that became apparent when scanning the gadgets was that we were getting a lot of noise from uninteresting sinks. To solve this problem, we decided to show only interesting wells by default. If you are not satisfied with the default, you can change the sources/sinks displayed if you wish.

We wanted to automate the discovery of pollution source prototypes and found the best way to do this was to use Puppeteer. However, we had a problem, how to eliminate the DOM Invader vulnerabilities? We could use Puppeteer to traverse the DOM like we did for our automated tests, but that would be slow and cumbersome.

So we decided to add callbacks in DOM Invader. Callbacks allow you to run JavaScript when a source, sink, or message has been found, making it easier to log vulnerabilities. If you open the configuration cog again as before, you will notice that each sub-tab has a reminder configuration button. This callback will allow you to call custom JavaScript whenever an element has been found, and the data will be passed to the callback which you can use:

Screenshot showing receiver callback setup button

Screenshot showing receiver callback code

Using these callbacks is really powerful, you can use navigator.sendBeacon or fetch to send this data to an endpoint that logs the data. You can return true or false if you want DOM Invader to display the data – this can be very useful if there is a noisy site and you want to know what data is reaching a specific sink. Reminders are disabled by default, which is why they are grayed out – once you edit one and click save, it becomes active. You can use the reset button to disable the snooze function and return it to its default state.

I created a source callback:

function(sourceDetails, sources) {
   let data = JSON.stringify(sourceDetails);
   let url="http://localhost:8000/log.php";
   fetch(url, {__proto__:null, method: "post", keepalive: true, body: data});
   return true;//return true to log source
}

This sent the data to a PHP script which saved the data. I then started testing them for gadgets. You can research gadgets independently, even if the site has no known prototype pollution source. To do this, you need to switch modes in the prototype’s pollution settings cog:

Screenshot showing the prototype pollution settings cog

Screenshot showing how to search for gadgets

You’ll notice that DOM Invader tries to choose the optimal settings for parsing gadgets – for example, it will strip CSP response headers – you can override these defaults if you wish. Using these techniques, I discovered several sites vulnerable to client-side prototype pollution, including a well-known car manufacturer, a well-known gaming site, a major WordPress domain, and others.

Credits and acknowledgments

Like always James kettle was super helpful with the DOM Invader design and made the great suggestion to have a “Scan for gadgets” button thanks James. Thanks to Nolan Ward for the excellent graphics and video editing. There’s been some great research on client-side prototype pollution that I’ve found really useful. Thanks to Sergei Bobrov, Mohan Sri Rama Krishna P., Terjanq, Beomjin Lee, Masato Kinugawa, Nikita Stupine, Rahul Maini, jaiswal hard, Mikhail Egorov, Dev Melar, Michal Bentkowski, File descriptor, Olivier, William BowlingIan Bouchard for sharing their excellent tools and research.

Get the new version of DOM Invader

To get the new version of DOM Invader, simply update your version of Burp Suite Professional or Burp Suite Community Edition to 2022.6 on the Early Adopter Channel to start using it.

]]>
Internet Explorer RIP: Here are 10 things as old as the expired browser https://mynyml.com/internet-explorer-rip-here-are-10-things-as-old-as-the-expired-browser/ Wed, 15 Jun 2022 19:05:15 +0000 https://mynyml.com/internet-explorer-rip-here-are-10-things-as-old-as-the-expired-browser/ Once the most popular browser in the world, Internet Explorer has seen its last sunrise. Starting today, if you try to open Internet Explorer, you’ll be prompted to download Edge, Microsoft’s new browser, which we recently heard has improved Xbox Cloud Gaming support. . It’s the end of an era. At the speed of technology, […]]]>

Once the most popular browser in the world, Internet Explorer has seen its last sunrise. Starting today, if you try to open Internet Explorer, you’ll be prompted to download Edge, Microsoft’s new browser, which we recently heard has improved Xbox Cloud Gaming support. . It’s the end of an era.

At the speed of technology, Internet Explorer’s 27-year lifespan makes it downright ancient. As I say goodbye to the first web browser I remember using at the impressionable age of nine, I looked at what was introduced in 1995. Turns out 1995 was a crazy year for PC games and computers in general.

]]>
Build collaborative apps with Teams Live Share https://mynyml.com/build-collaborative-apps-with-teams-live-share/ Wed, 15 Jun 2022 10:00:00 +0000 https://mynyml.com/build-collaborative-apps-with-teams-live-share/ Teams has always been on track to be an important part of Microsoft’s productivity platform, but the COVID-19 pandemic has pushed it to the top of Redmond’s agenda. Its importance became apparent when Microsoft and much of its customer base first moved away from the office to suddenly work from home, and are now adapting […]]]>

Teams has always been on track to be an important part of Microsoft’s productivity platform, but the COVID-19 pandemic has pushed it to the top of Redmond’s agenda. Its importance became apparent when Microsoft and much of its customer base first moved away from the office to suddenly work from home, and are now adapting to a more planned approach that has become a work-from-home/office hybrid.

Although Teams has largely focused on its conferencing and collaboration features, its main differentiation from the competition draws on Microsoft’s heritage as a platform company. From its inception, it was as much a place for building apps as it was for communication and collaboration, providing much of the scaffolding and plumbing needed to deliver near real-time collaborative apps, as well as another endpoint for the line of business systems as part of a low-code workflow that houses the many small tasks that are integral to modern work.

Introducing Teams Live Share

Once you think of it as another platform, it’s no surprise to see Teams getting its own track at Microsoft’s Build conference. This year’s event was no different, with several major announcements including the general availability of a new JavaScript SDK and some major API releases. Perhaps most interesting, however, was a new set of tools that merge Teams’ own collaboration and conferencing features with Microsoft’s Fluid Framework real-time application development platform.

The result is the Live Share SDK, a way to build collaborative apps that mix meetings with apps that can share status among many different users and devices. We’ve already seen what this approach offers with Visual Studio’s Live Share collaborative coding. Different editors on different platforms can share editing space, extending pair programming beyond the desktop.

The Teams Live Share SDK lets you use Microsoft’s Fluid Framework to relay state between instances in a many-to-many mesh. You can then encapsulate your code and meetings in a Fluid container, adding collaborative functionality with minimal code. This way you can use Teams tools with your own, for example, sharing code and wireframes in a hybrid meeting review, allowing people in a conference room to annotate on a big screen and people at home to use their own screens. Interactions are near real-time and shared among all users, with Teams controlling the voice and video portions of the meeting. Like many recent tools from Microsoft, it is open source and can be found on GitHub.

From Fluid to Live and vice versa

Much of the Live Share SDK will be familiar to you if you’ve experienced the Fluid Framework. Live Share is a collection of JavaScript packages and installs via npm or Yarn, with dependencies on Teams JavaScript and Fluid Framework packages. If they are not installed, the SDK installer will install them. If you already have them, you’ll need to make sure you have the correct versions to avoid issues. Currently, you need both version 2.0.0-experimental.0 of the Teams JavaScript package and version 0.59.0 of the Fluid Framework.

There are other limitations at this stage of the preview. Probably the most important is that Live Share is only available for scheduled meetings; you cannot participate in it on an ad hoc basis in other types of meetings. All participants must be on the invitation; before they can access a Live Share application, they must accept the meeting invitation and add it to their calendars. Hopefully this is just a preview issue, as the ability to use Visual Studio Live Share for spontaneous collaborations is one of its strengths, and it’s easy to see how a similar approach could help turn a call into a shared workspace.

Creating a Live Sharing Application

A Teams Live Share app is like any other Teams app. Since it’s not yet part of the Teams dev tools, you’ll need to manually add additional permissions in the app manifest in order to use the new features, starting with the scope and context of your host URL. app with support for group chat with meeting. panel and stage. Next, you need to add delegated permissions for the Live Share session and the Meeting step of the app. As the platform matures, it should become part of the Teams SDK, with support for auto-generated manifests.

Now you can start adding live share functionality to your code. Apps need to join a meeting, so each instance of the app will start with the meeting in each user’s Teams session. The code will need to initialize the Teams SDK, then create a Fluid Framework container to handle synchronization between clients, configuring the distributed data structures needed to synchronize content. Fluid Framework has many different data structures, so choose the ones that are necessary for your application.

Most likely is a SharedMap, which is a basic key-value store for JSON objects. With a SharedMap you send, for example, coordinates that have been drawn on a shared image. This can be combined with a SharedString structure for collaborative text editing. These Fluid Framework data structures can persist between sessions, create post-meeting reports, and provide content that attendees can use offline.

Live Share brings new features not in Fluid Framework with what it calls ephemeral objects. This is a new form of shared object that is not stored in a Fluid container but is still accessible in your application. You would use them to manage user attendance or to add presentation tools like a pointer to a session. These are shared using the same real-time Fluid tools, but they don’t exist beyond a meeting unless you explicitly save their contents in a Fluid data structure.

A useful feature is the EphemeralEvent data structure. This can send messages between clients in a meeting, for example, indicating whether someone has joined or left. Be sure to add code to listen for notifications and run it asynchronously. In fact, much of the code used for both Fluid data structures and Live Share ephemeral structures must be asynchronous, as your code looks for and responds to events that may occur at any time during a meeting.

Working with media in Live Share

Although Live Share is perhaps best used for wrapping textual content using Fluid Framework’s collaboration tools, it offers a set of extensions in a separate package that supports multimedia synchronization. This adds a separate ephemeral object to support controls and media state, as well as a way to synchronize playback within an HTML media element. If you’re doing a video presentation in a meeting, you can have a Live Share app that allows approved users to pause playback to have a chat or annotate view.

Live Share can also give us a useful way to use Teams to broadcast live events, as it has tools for users to pause streams and skip them if necessary. There’s a nice option here if you’re using Live Share to host a training: you can allow users to pause to take a quiz or give feedback and only resume reading when all users resume. Such coordination is a handy feature as it ensures no one is left behind and everyone’s opinions are heard.

Live Sharing in Visual Studio is a powerful tool, so it’s good to see similar functionality coming to Teams. However, it’s important to realize that building real-time collaboration tools isn’t easy, and while Teams Live Share makes it easy to create and manage shared data structures, you still need to create a set of asynchronous event management tools to ensure that changes in shared data are reflected in user experiences. With a tool like Fluid Framework, it’s tempting to go all out, but that can lead to complex and unmanageable event parsing code.

So how should you use Teams Live Share? It’s best to start with a simple app: a tool that shares an easy-to-understand data structure, like a Kanban board with text and audio chat and basic editing features that allow a hybrid team to run a meeting daily standing, manage project backlogs so that project managers can quickly see and understand how a project is progressing.

Once you understand how Live Share works with a unique shared data structure, you can start developing your application, adding new features to support new requirements and respond to user requests. The result should be code that works well on meeting room screens and individual desktops, helping to bridge the hybrid working gap. This is the right time for Microsoft to release such a tool. We now need to create the Teams code that takes advantage of these new features.

Copyright © 2022 IDG Communications, Inc.

]]>
Kotlin Unveils K2 Compiler | InfoWorld https://mynyml.com/kotlin-unveils-k2-compiler-infoworld/ Mon, 13 Jun 2022 20:03:00 +0000 https://mynyml.com/kotlin-unveils-k2-compiler-infoworld/ JetBrains has released Kotlin 1.7.0, a language upgrade for JVM, web and mobile development that includes an alpha version of the revolutionary K2 compiler. In addition to improving performance, K2 aims to accelerate the development of new language features, unify the platforms supported by Kotlin, and provide an API for compiler extensions. The alpha version, […]]]>

JetBrains has released Kotlin 1.7.0, a language upgrade for JVM, web and mobile development that includes an alpha version of the revolutionary K2 compiler.

In addition to improving performance, K2 aims to accelerate the development of new language features, unify the platforms supported by Kotlin, and provide an API for compiler extensions. The alpha version, however, only works with JVM projects. And no compiler plugins except the kapt plugin for annotation processors work with it yet.

Kotlin 1.7.0, introduced on June 8, also features a new approach to incremental compilation in the Gradle build automation tool, with compilation now supported for changes made inside dependent modules. Compilation avoidance support has also been improved. Gradle, like Kotlin, is leveraged in Android mobile app development. Plans include stabilizing build technology and adding support for other back-ends, such as JavaScript.

Instructions for getting started with Kotlin are available on the Kotlin language website Kotlin. Other Highlighted Features in Kotlin 1.7.0:

  • Definitely non-nullable types have been promoted to stable. These provide better interoperability when extending generic Java classes and interfaces.
  • Builder inference, a useful type inference when calling generic builder functions, is automatically enabled if a standard type inference cannot get enough information about a type without specifying the -Xenable-builder-inference compiler option introduced in Kotlin 1.6.0 last November.
  • Membership requirements are now stable and do not require additional compiler configuration.
  • An underline operator for type arguments can be used to automatically infer an argument type when other types are specified.
  • The implementation by delegation to an inline value of an inline class is enabled. Developers can now create lightweight wrappers that don’t allocate memory in most cases.

A beta version of Kotlin 1.7.0 was released in May. Kotlin 1.6.20 arrived in April.

Copyright © 2022 IDG Communications, Inc.

]]>
The simplicity of charts now in grids https://mynyml.com/the-simplicity-of-charts-now-in-grids/ Fri, 10 Jun 2022 17:36:02 +0000 https://mynyml.com/the-simplicity-of-charts-now-in-grids/ Over the years, developers and businesses have used FusionCharts to turn their data into interactive dashboards. The JavaScript chart library offers over 100 charts and 2,000 maps to support web and mobile applications. Chats are important because they allow users to visually compare multiple sets of data. In fact, it is easier to understand and […]]]>

Over the years, developers and businesses have used FusionCharts to turn their data into interactive dashboards. The JavaScript chart library offers over 100 charts and 2,000 maps to support web and mobile applications.

Chats are important because they allow users to visually compare multiple sets of data. In fact, it is easier to understand and remember information displayed on graphics or as an image than when it is written in blocks of text.

FusionCharts provides data visualization products such as JavaScript charts, widgets, maps and dashboards. The company has been creating market-leading mapping solutions for over 15 years. He understands that a compelling graphic helps brands make their case more compelling and add credibility to their presentation.

FusionCharts recently launched a new product in the market called FusionGrid. The company’s users have received it well like its other products.

Here are the details of the latest product.

FusionGrid – The simplicity of graphics now in grids

The reason for developing FusionGrid is to help users create data grids in their dashboards with much more simplicity and elegance, as is the case with its other graphics products.

What is FusionGrid?

It is a customizable JavaScript data grid component, perfect for web and mobile applications. FusionGrid is indeed an enterprise-class JavaScript-based data grid component created to provide a fast and feature-rich data visualization experience. Therefore, you can create data grids in dashboards with FusionGrid the same way you would with FusionCharts.

According to FusionCharts canvasesit, “FusionGrid offers fast, responsive and customizable grids and data tables in JavaScript.” These JavaScript grids are rich in customization and work well on desktops, tablets, browsers, and mobile devices. There you should use FusionGrid to power your application and website with the power of a Java Script data grid component.

Two of FusionGrid’s core value propositions are; powerful features and easy implementation with FusionCharts Dashboards.

1. Powerful features that help you better explore FusionGrid

FusionGrid is packed with powerful features. These include:

Column filter support in grid

This feature makes it easier to filter grids when using FusionGrid. This is useful because you can discover the information you are looking for in your data based on the context.

Support for data export in FusionGrid

You can export your data in XLS, JSON and CSV formats.

Support for selecting rows in the grid

This feature made it easier to select rows to perform secondary actions such as retrieving data or updating content on web pages.

Support for column grouping/nested columns in grid

You can group relevant column information using this feature, improving the data experience and providing better data context.

Support real-time data update in grid

There is a real-time update of the app and dashboard with FusionGrid, which results in an automatic update in the grid.

Support for sorting rows in the grid

The feature allows you to sort information on relevant columns to discover what you are looking for easily and quickly.

Support for line animation when interacting data operations

This feature improves your user experience when sorting, filtering, searching, etc.

Support for quick search/filter in the grid

You can search for any information in any column using these features. It allows you to quickly filter data, regardless of size.

Based on these features, you can perform various actions on FusionGrid, including:

  • Filter, sort and search
  • Performance for large data sets
  • Paging
  • The integration
  • Selection
  • Export
  • Responsive and mobile friendly

2. Integrations and compatibility

It’s easy to integrate FusionGrid with Angular, React and Vue.

It is mobile-friendly and responsive, providing a consistent experience across different devices.

FusionGrid is compatible with modern browsers such as:

  • Internet Explorer 11.0+ versions
  • Firefox version 26.0+
  • Chromium version 31.0+
  • Safari version 7.0+
  • Opera version 18.0+
  • iOS (safari) version 7.1+
  • Android browser version 4.4+

Moreover, you can use it on desktops, tablets and mobile devices.

merge grid

Integration with FusionCharts dashboard

FusionGrid offers simplicity and elegance that allows users to create data grids in dashboards, just like other FusionCharts charting products.

Over the years, FusionCharts has helped users create charts, maps and dashboards, but now with the launch of FusionGrid will definitely change the way you work with your dashboards or wherever you need a data grid. This new product allows users to have “a powerful chart that harnesses the power of FusionCharts”. This will definitely improve productivity while allowing users to leverage the power of grids in their applications.

FusionGrid helps you take your dashboards to the next level!

Integrated mapping: FusionCharts provides visual presentation and organization capabilities. This means that the new product lets you present your grid data not just in charts, but with an external user interface, create charts and maps in one-page dashboards, and much more.

Same data source: It helps you create compelling grids and generate various reports from the same data source or store by FusionCharts.

Same development time: Built-in chart options reduce development costs and save code time.

3. What can you DO with FusionGrid?

Filter, sort and search: You can filter, sort and search column information to find data quickly

Performance for large datasets: The grid provides users with a feature-rich component. Large sets of data can thus be displayed without overloading the browser.

Export: You can export your data to CSV, JSON, Excel, etc.

Responsiveness or mobile friendliness: It provides a consistent experience across all devices.

Integrations: Angular, React, and Vue are 3 main front-end frameworks that feature FusionGrid integration components.

Selection: Users have several options when selecting rows and cells using the selection API.

Paging: Helps you control page size and every aspect of pagination with a few flags.

4. Pricing

FusionCharts Suite products promise to automate the entire chart conversion process, Maps and grids in an incredible dashboard.

FusionGrid – You can choose one of four plans that suits your Data Grid needs:

Screenshot 2022 06 10 at 19.32.06

Basic: At $499 per year. Up to 1 developer and perfect for a small internal app or dashboard.

Pro: At $1,299 per year. Up to 5 developers and perfect for SaaS applications with small teams.

Company: At $2,499. Up to 10 developers and perfect for SaaS applications with large teams and requiring on-premises.

Company+: Ask for a quote. For more than 11 developers and perfect for unifying your charts across your organization.

Buy now

You will enjoy working with FusionGrid, and you can get started by downloading a fully functional trial version here. The difference between the trial version and the licensed version is that you can see a small watermark under each exported grid. So do not use the trial version for production or commercial deployments, as it is intended for testing purposes. Instead, get the licensed version by talking to our sales team.

Download now

Powerful grid designed for data applications with integrated graphics

]]>
Introduction to JHipster: a full-stack framework for Java and JavaScript https://mynyml.com/introduction-to-jhipster-a-full-stack-framework-for-java-and-javascript/ Thu, 09 Jun 2022 10:00:00 +0000 https://mynyml.com/introduction-to-jhipster-a-full-stack-framework-for-java-and-javascript/ JHipster is an ambitious, long-running hybrid Java and JavaScript project dedicated to making it easier to develop full-featured Java applications using modern responsive front-ends. The JHipster development team has constantly released new versions to keep up with industry changes. Let’s learn what this framework can do by building a simple application. What is JHipster? Out […]]]>

JHipster is an ambitious, long-running hybrid Java and JavaScript project dedicated to making it easier to develop full-featured Java applications using modern responsive front-ends. The JHipster development team has constantly released new versions to keep up with industry changes. Let’s learn what this framework can do by building a simple application.

What is JHipster?

Out of the box, JHipster supports React, Vue, and Angular for the front-end. It supports other frameworks, including Svelte, through plugins called blueprints. In the back, Spring Boot does the heavy lifting. In this regard, JHipster is similar to the Hilla framework, but with a more ambitious goal of supporting a wide variety of front-end stacks. Basically, JHipster is an advanced build tool that unifies Java and JavaScript build toolchains and layers various administrative capabilities.

In addition to full applications, JHipster supports building microservices components and has scaffolding for JPA-based relational data stores and NoSQL data stores such as MongoDB and Cassandra. It also has logging and analysis features.

JHipster’s toolset includes a command-line and domain-specific language (DSL) with a visual data modeler and web-based builder (think Spring Initializr on steroids). We’ll use the command line to start. Note that you will need a system with fairly recent Java, Node.js and Git versions installed.

The JHipster sample application

Follow the JHipster quickstart to install the npm generator-jhipster package and create a new directory to run the generator.

You will see an interactive prompt similar to the one shown in Figure 1.

The generator-jhipster constructor. IDG
Figure 1. The generator-jhipster interactive constructor

You can accept most of the defaults, but for this example we’ll use MongoDB as the database and React as the front-end framework (choose the Bootswatch theme that reflects your mood). Once you set these options, JHipster will do its thing and leave you a new application in the directory you just created.

Build and run the app

JHipster has now generated both halves of a complete Java and JavaScript application. The back-end is built with Maven and the front-end is built with webpack. You can run both halves simultaneously to launch the application. (Remember that you also need MongoDB to run in the background.)

In a shell, enter: ./mvn -P-webapp. This command will create and run the Java back-end. We use the -P-webapp flag to prevent Maven from running the webpack part of things.

In another shell, enter: npm start. This command builds the frontend and runs it in Webpack’s development mode, with the API calls pointed to the Java server you just started.

If all went well, you will be greeted at localhost:8080 with a screen similar to the one shown in Figure 2.

Starting a new JHipster application. IDG
Figure 2. The JHipster welcome screen

Create a test user

If you dig into the app, you’ll quickly find that there’s a lot here. JHipster’s generator produces much more than your typical tool, including functional user management and a JWT-based authentication system. The application also has default accounts, which we will use to create a test user.

To start, use the Register option at the top right of the app screen to create a new user. Then create a test user (test@test.com), then navigate to connection and select the default administrator/administrator user. Access the user management screen (Administration -> User Management). Note that your new user is listed. You can activate the user by switching the inactive button to active, then log in as a test user. Note that this user cannot access the administration console.

Like I said, it’s a lot of features out of the box, especially considering that JHipster not only supports the React stack and MongoDB, but also Angular, Vue, and a host of datastores. SQL and NoSQL.

Explore the code

To support all of these features, as you can imagine, JHipster has put together quite a bit of code. Fortunately, it’s largely up-to-date and follows programming best practices. For example, React code uses functional components, leverages hooks, and runs on a centralized Redux store.

Take a look at the application directory and you will see a structure like this:

  • /foundry-jhipster/
    • /webpack/ : Config/utils for webpack bundle
    • /src/main/
      • /java/ : java sources
      • /webapp/ : Frontal sources
    • /target/ : Output directory for both builds
      • /webapp/ : Front construction output
      • /java/ : Release of the back-end version
      • /docker/ : files to support containerization

The main class of the Java application is src/main/java/com/mycompany/myapp/JhipsterApp.java. It is a Spring Boot web application at heart and can be configured with command line arguments via --spring.profiles.active=your-active-profile.

The out-of-the-box Java application is basically the API for CRUD (create, read, update, and delete) user functions with authentication and authorization enforcement through Spring Security. The Spring Security system is configured in /myapp/security. Remember that JHipster uses JSON Web Token, so the classes to support which are in /security/jwt.

The application’s domain models are defined in /domainwhich is the counterpart of the frontal /entities directory which you will see shortly.

Find available frontend scripts by looking at package.json. In addition to dev mode command we are using right now, other features include a mongodb prune ordering, testing and production generation orders.

The customer entrance is at /src/main/webapp/index.htmlbut the real work begins in /sec/main/webapp/app/app.tsxwhich defines the application’s router (routes are defined in router.tsx) that will host the various components of the page.

You can find the application web page components defined in main/webapp/app/modules; for example, /home/home.tsx has the definition of the home page.

In the /main/webapp/app/shared directory, you will find the code used in the application. Much of it is dedicated to the central store, such as model definition and reducers. Currently the application only deals with users, so only these components and the authentication code live in the shared directory.

The /entities folder contains the code to support your modeled entities. Note however that the user model is stored in the shared directory. There are no entities yet, so let’s add some.

Defining a model: JDL and JDL-Studio

JDL is JHipster’s domain-specific language for defining application models. It does much more than that – you can define an entire application with JDL metadata – but we’ll focus on the model.

To get started, let’s use JDL-Studio, JHipster’s online tool, to quickly generate CRUD features for a domain model. You will see an Entity Relationship Builder like the one shown in Figure 3.

The jhipster constructor. IDG
Figure 3. The JDL constructor

The JDL generator supports the definition of entities and their properties, as well as the relationships between them. We won’t dive into the syntax here because it’s pretty self-explanatory. You can explore the syntax by making changes to the definition on the left and seeing how they are expressed in the visual display.

Let’s accept the given relations and export them by pressing the Download this JDL source button at the top right of the screen. (Note that there are several options on the toolbar to configure the appearance and behavior of items.)

Once you have the file, navigate to your command line in the root of the project and type jhipster jdl my-jdl-file.jdlwhere my-jdl-file.jdl is the name of the file you just exported.

The prompt will ask if you want to overwrite some files. Go ahead and do it. Once that’s done, you can restart the servers and see what you’ve added to the app. Go back to the browser and open the app again on port 9000, and login as administrator/administrator.

Now when you open the Entities menu item in the navigation bar, you get all the entities you just imported, along with a fully realized console to manage them. For example, you can create a new “Country” entity, then create a new “Location” entity and use the newly created country in your location. Note that all CRUD features are present as well.

API monitoring and administration

A few additional features for admin users are worth noting. The Administration the menu includes a Metric option that provides an overview of the characteristics of the running JVM, as shown in Figure 4. See JHipster’s documentation for more information on its monitoring features.

Monitoring JVM metrics with JHipster. IDG
Figure 4. Monitoring a JHipster application with JVM metrics

JHipster also generates OpenAPI/Swagger definitions for its back-end endpoints, along with a simple console to interact with them. Figure 5 shows the API administration screen.

Interact with JHipster terminals. IDG
Figure 5. Interacting with core endpoints through the API admin screen

JHipster offers all of this with a flexible architecture that allows for different datastores and front-end frameworks. All in all an impressive setting.

Copyright © 2022 IDG Communications, Inc.

]]>