neo.mjs - a new approach to frontend development

This new front-end development approach with this new framework is very interesting. I wonder how this compares to ReactJS.

The Next Generation of Front-end Development

Microsoft's FAST framework

A useful article on why a web developer might want to try FAST framework:
https://www.infoq.com/news/2020/08/microsoft-fast-design-system/
https://www.fast.design/

JetBrains releases report on The Developer Ecosystem 2020

I always love reading the summaries of JetBrains' Dev Ecosystem Reports.
https://www.jetbrains.com/lp/devecosystem-2020/

C# Specific Overviews
https://blog.jetbrains.com/dotnet/2020/06/16/developer-ecosystem-2020-key-trends-c/

Cheers!

Review: Facebook's Hermes

Wow, look at FB becoming more involved with the developer community eco-system! This makes sense because FB is more concerned about their mobile app experience for users. So, they are doing whatever it takes to make their mobile apps the best for all users no matter the device used. Specifically, they seemed to be focused on mobile devices, smartphones in particular. Hence, why they are creating code solving mobile app issues on smartphones including ReactJS and GraphQL.

Thanks to the author for this article:
https://www.zdnet.com/article/facebook-just-released-a-new-open-source-javascript-engine/

Facebook's Hermes

Website - https://hermesengine.dev/
Code - https://github.com/facebook/hermes

Conferences

Chain React Conference 2019 (Jul)

https://infinite.red/ChainReactConf

GraphQL Summit 2019 (Oct)

https://summit.graphql.com/

Facebook Developer Conference "F8" 2019 (May)

https://www.f8.com/

References

https://venturebeat.com/2019/07/12/facebook-open-sources-hermes-javascript-engine-to-improve-react-native-android-app-performance/

Review: WebAssembly vs JavaScript for barcode scanning

For barcode scanning, leverage WebAssembly moreso than JavaScript (but not replacing JavaScript).

Interesting Read

https://www.techrepublic.com/article/replacing-javascript-with-webassembly-how-ebay-made-a-web-app-50x-faster-by-switching-programming-languages/

Refresh: Not a Number (NaN)

Today I answered the question from Enki on NaN (i.e. not a number). I failed (along with 40% of other developers).

My failure could be due to my lack of experience using NaN. Nonetheless, here's the explanation by Enki.

Wow, I never knew that there was an IEEE 754 standard corresponding to the NaN value. So naturally, I had to learn more because the simple explanation from w3schools was insufficient and I never ran into a case where I had to examine NaN === NaN or even NaN == NaN. Since I already knew what the comparison operator (equal type, equal value), I thought it could apply the same understanding as with the null object and undefined constant (see JavaScript data types).

https://www.w3schools.com/js/js_datatypes.asp

But, I didn't see any quick examples from w3schools (my main online reference for quick understandings on standard web languages). Before I start digging, I refreshed my understanding from the quick lesson JavaScript's Numbers and now notice this new reference to the IEEE 754 standard. I definitely don't remember seeing that there, but could just be me.

https://www.w3schools.com/js/js_numbers.asp

Integers have an accuracy up to 15 digits - got it. Now, JS Numbers are always 64-bit double data types - got it. Reading further on this page, definitely don't remember an "Infinity" and I rarely remember the HexDecimal. Needless to say, refreshed my understanding of NaN.

https://www.w3schools.com/js/js_numbers.asp

Finally, refreshed my understanding with using the equality operator on objects. Unless comparing standard JavaScript data types (implicitly via var declaration), the object type doesn't matter because whenever two defined objects are compared the result is always false.

Mozilla provides further explanation with comparing NaN and its usage.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN

Okay, that's cool, but where did Enki get there explanation saying that all NaN will never have the same value?

I don't know and it would help if Enki did provide this online reference.

ICYMI like me, NaN is not just used in JavaScript. Surprise, that's right! So, double check your programming language if it has NaN (and Infinity).

Happy Coding!

Programming Languages using NaN (Brief List)

• (C) https://www.gnu.org/software/libc/manual/html_node/Infinity-and-NaN.html
• (C++) http://www.cplusplus.com/reference/cmath/nan-function/
• (C#) https://docs.microsoft.com/en-us/dotnet/api/system.double.nan?view=netframework-4.7.2
• (D) https://dlang.org/spec/type.html
• (Java) https://www.geeksforgeeks.org/nan-not-number-java/
• (PHP) https://www.php.net/manual/en/function.is-nan.php
• (Python) https://docs.scipy.org/doc/numpy/reference/generated/numpy.isnan.html

References

• https://stackoverflow.com/questions/6976721/is-nan-equal-to-nan
• https://stackoverflow.com/questions/19800415/why-does-ieee-754-reserve-so-many-nan-values
• https://www.ecma-international.org/ecma-262/6.0/#sec-value-properties-of-the-global-object-nan
• https://en.wikipedia.org/wiki/NaN
• https://en.wikipedia.org/wiki/IEEE_754
• https://ieeexplore.ieee.org/document/4610935
• https://techterms.com/definition/nan

Review: OpenJS Foundation officially formed

Finally, the unity is back within the JS communities.
https://sdtimes.com/webdev/the-openjs-foundation-officially-formed-for-the-javascript-community/

Why is the OpenJS Foundation needed?

Directly restated from OpenJS:

"The JS Foundation and Node.js Foundation have coexisted independently for a number of years. Thanks to the interconnected nature of the JavaScript ecosystem, we’ve grown continuously closer in technical collaboration. This merger provides an opportunity to share our learnings around technical governance, combining our project hosting and collective experience running diverse and welcoming communities over a broader section of the ecosystem. In addition, it eliminates operational redundancies between the organizations, streamlines the experience for organizations who provide essential financial support through membership, and coordinates efforts within the JavaScript ecosystem and with affiliated standards bodies."

IMO

There was definitely a need for unified, formal community over the development of JS. When looking for a JS community to join, it can be a little confusing. See this:
https://www.quora.com/What-are-some-popular-JavaScript-development-community-sites

Perhaps another reason to unify is preventing another uproar like the one that happened back in 2017 on NodeJS's diversity/inclusion.
https://www.theregister.co.uk/2017/08/24/nodejs_forks_ayo_code_of_conduct/

Concern

My one concern is that I don't see Amazon or especially Facebook participating in this foundation. Considering the influence they both have in the JS ecosystem, I would hope that they will participate soon.

Other Links of Interests?

1. https://www.javascript.com/
2. https://www.w3schools.com/js/
3. https://developer.mozilla.org/en-US/docs/Web/JavaScript
4. https://en.wikipedia.org/wiki/JavaScript
5. https://jquery.com/

Also in case of interest, here's a brief history of NodeJS nicely organized by this author.
https://blog.risingstack.com/history-of-node-js/

Happy Coding!

Avoid inconsistent Date object definitions

I recently took a pop-quiz question on this, and failed. Errrrr...

Pop Quiz

What is the Date value of the following code?

new Date(2016, 5, 31);

My Answer:

May 31, 2016

Makes sense, right? At least to 70% of us developers who are not JS experts?

See more fun questions at https://app.enkipro.com.

Correct Answer:

June 1, 2016

Since JavaScript early days leveraged a lot techniques and patterns from Java, I looked up both definitions.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date#Syntax
https://docs.oracle.com/javase/8/docs/api/java/util/Date.html#Date-int-int-int-
https://www.w3schools.com/js/js_dates.asp

My Further Thoughts

With all the new technologies and programming languages (along with updates to these languages), I'm actually shocked that we haven't provide better consistency with a common class instantiation like the Date object. Particularly, in JavaScrpt.

Since the Time parameters all start from 0, this makes sense and is consistent. However, for the Date parameters, since 'day' starts with 1 and makes the most sense, then why not start the month and the year with '1' as well? Nope, instead, the creators decided to make the month slightly difficult (and very difficult when we add in how fast developers need to work nowadays) by starting the value at '0'. But, no one in the world uses '0' to represent a month, and if it's an array index then define the parameter as such for ALL parameters in the Date definition. If you're not already confused, then try the year with a starting value of '1' and see this is actually 1901. Why, just because the creators somehow thought that programming would only be useful for years 1900-1999 (or shortcut values as 0-99). Thanks guys. Especially to Java guys who decided to just deprecate this and recommend using more code for date formatting (i.e. SimpleDateFormat).
*By the way, I wouldn't complain if these two programming languages weren't so currently popular and in demand.

My Solution

To avoid this unnecessarily confusing definition and prevent making mistakes within my apps, I would create a Date wrapper object that would allow for easier reading of my code. And consistency. That's [programming language] agnostic.

3 Node Impactful Technologies in 2019

https://hub.packtpub.com/npm-javascript-predictions-for-2019-react-graphql-and-typescript-are-three-technologies-to-learn/

Electron - Quick Introduction (destop app in JS)

Hey Dev Fam,

I wanted to know what "Electron" was and went through these tutorials.

Red Stapler's quick tutorials on Electron

Introduction & WebApp -> DesktopApp Quick Conversion

https://www.youtube.com/watch?v=1Qf2Yjz-zsk

Hello World

https://www.youtube.com/watch?v=sJFuMKPfpfs

Packaging Application

https://www.youtube.com/watch?v=rP7j_hDL40Y

Another Overview on Electron

https://www.youtube.com/watch?v=mr9Mtm_TRpw

GitHub's Electron Overview 2016

https://www.youtube.com/watch?v=FNHBfN8c32U

GitHub's selling point on using Electron is:

If you can build a website, you can build a desktop app. Electron is a framework for creating native Desktop applications with web technologies like JavaScript, HTML, and CSS.


Happy Coding,
G2

D3 - Coding with Readability and Usefulness, no more d variable

One of the things I find so irritating is the overuse of letters which lack sufficient readability (to understand code without having to dig into the back-end to gain meaning).

I'm learning and working on D3 stuff and I see many examples using the letter d. This d stands for data, obviously. BUT, almost everything in the world is a d (i.e. data). Needless to say, I had to update code to ensure better understanding and programming. Here's my example of better coding using D3.

Before

groups.selectAll('text')
    .data(function (d) {
        console.log(d);
        return d;
    })
    .enter()
    .append('text')
    .text( function (d, i) {
        console.log(i);
        if (typeof d === 'number')
        {
            console.log("data type is a number, not object...skipping.");
            return;
        }
        console.log(d);
        return d.x;
    });

After

groups.selectAll('text')
    .data(function (arr) {
        console.log(arr);
        return arr;
    })
    .enter()
    .append('text')
    .text( function (obj, i) {
        console.log(i);
        if (typeof obj === 'number')
        {
            console.log("data type is a number, not object...skipping.");
            return;
        }
        console.log(obj);
        return obj.x;
    });

In the After, I updated the d within the data method into "arr" as its a data array representing the dataset passed in. I updated the d within the text method into "obj" as its a data object of the data array passed in.

I hope this helps somebody.

Blessings,

Debugging - PHP + Javascript - Unexpected Token <

I recently came across an unusual error in the JavaScript Console when processing my PHP code into JavaScript to display in the browser. The line number provided in the console is misleading - b/c it's not the actual line number with the error. So I don't use the 'line number' information to debug.

Error

Code

The root cause is how either PHP is calculating the 'addition assignment' operation (i.e. a += b; ) within JavaScript tags during compilation or how JavaScript is processing the PHP output before displaying to the browser. I'm not exactly sure as this would require more research and investigation on my part which I don't currently have time - yay, deadlines!

Initial Attempt

At first, I thought I needed to replace the shorthand 'addition assignment' operator into its expanded equivalent. (See the green arrow in my image below.)

The expanded equivalent would be:

a = a +b;

or according to my code:

// line 91

$num_of_users_per_org[$k][1] = $num_of_users_per_org[$k][1] + 1;

Solution

At last (within 5 minutes), I figured out that I need to initialize the 2nd array in my multi-dimensional array corresponding to 'user_count'.  (See the light green arrow in my image below.)

Proof

After adding the code and rendering again in the browser, our results pass and the code works. Bingo!

Click on image to enlarge (see clearly)

Nice Debugging Reference

https://davidwalsh.name/fix-javascript-errors

JQuery: Setting Default Date on DatePicker

Devs,

I recently was trying to set the default date of a DatePicker that I added to a input field.

form.find('#expires').datepicker( {defaultDate: 7} );

However, the DatePicker would keep displaying the default date value of "1/1/2020". This was driving me nuts as I was looking through the documentation and searching online (i.e. SO) for solutions to my problem to no avail.

http://api.jqueryui.com/datepicker/#option-defaultDate
http://stackoverflow.com/questions/14580749/jquery-datepicker-set-default-date

Root Cause:

After intense thinking and investigation, I finally found my root cause. I already set the predefined value in the field itself which was overriding my jquery default property.

<input type="text" name="expires" class="expires" id="expires" placeholder="Expires" value="1/1/2020" />

Solution #1:

Remove the attribute value in the input field or replace the value with expected default value before passing field to DatePicker.

I chose to replace the value upon displaying of the input field because without the value attribute the input field displays null by default and the DatePicker would open with a default date. I wanted a default date in the input field AND in the DatePicker.

<input type="text" name="expires" class="expires" id="expires" placeholder="Expires" value="1/1/2020" />

form.find('#expires').val( _getDefaultExpirationDate() );
form.find('#expires').datepicker();

/** 

* Get Default Expiration Date

* @return (string) current date + 1 month in format: MM/DD/YYYY

*/

function _getDefaultExpirationDate()

{

var today = new Date();

return tens(today.getUTCMonth()+ 1) +'/'+ tens(today.getUTCDate()) +'/'+ today.getUTCFullYear();

}

/** 

* Tens 

* - converts an integer that's a single digit into double digits

* - useful for dates and times

* @param (int) integer

* @return (string) single digit with leading '0' or double digit

*/

function _tens (integer)

{

while (integer > 99 )

{

integer = integer - 100;

}

return (integer < 10) ? "0"+integer : integer;

}

Easier Solution:

Change the input type from 'text' to 'date' and set default value.
http://www.w3schools.com/jsref/prop_date_value.asp

<input type="date" name="expires" class="expires" id="expires" placeholder="Expires" value="1/31/2016" />

Happy Coding!,
G2