My CMS – AI, Bots, Big Data, Mobile, IoT, Digitalization, AR/VR/MR & Technology

React JSX and Helmet

Ekim 9, 2018Ekim 9, 2018 tarihinde yayınlandı

Wearing a helmet saves you from coming harm!

Well, not always! (d’oh)

But, using Helmet(npm plugin) in a React JSX application saves time 🙂

It’s usage is pretty simple; install the plugin, import the library and implement the structure.

First things first, we start with installing the helmet plugin:

npm install --save react-helmet

1	npm install --save react-helmet

Import the library:

import React from "react";
import {Helmet} from "react-helmet";

1 2	import React from "react"; import {Helmet} from "react-helmet";

Note that we’ve also imported “react”. Any React plugin needs its core library defined first. So; if you haven’t already, don’t forget to add it.

Next thing is its usage form. Let’s add these html code to our Helmet:

<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, maximum-scale=1"/>
<title>Test Application</title>

<title>Test Application</title>

Helmet form:

const Head = () => (
<Helmet>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, maximum-scale=1"/>
    <title>Test Application</title>
</Helmet>
);

const Head = () => (

<title>Test Application</title>

</Helmet>

);

which will give the same output once it runs via web browser:

<head>
    <meta charset="utf-8"/> 
    <meta name="viewport" content="width=device-width, maximum-scale=1"/> 
    <title>Test Application</title>
</head>

<head>

<title>Test Application</title>

</head>

That’s it folks!

Talked to many people about the JSX in React. Some people like to mix HTML with React code and some don’t. Honestly, I find this form pretty and easy to understand (even for front-end developers)

But, this is a matter for another blog post.

Thanks for reading

React

React JSX and Comments

Ekim 8, 2018Ekim 9, 2018 tarihinde yayınlandı

HTML-guys hate it when their comment code do not work in JSX.

It’s because JSX tries to render anything within HTML thinking as all the code is a part of DOM.

You can’t use HTML comments but you can use Javascript comments under one condition -and it’s using with {curly braces} while mixing html-

Here’s an example (FAIL)

const SomeSectionComponent= () => (
 <!-- Some comment about the html below -->
 <section id="somesection">
  <!-- Some divs for somesection -->
  <div class="somedivs">
    Hello there!
  </div>
 </section>
);

const SomeSectionComponent= () => (

Hello there!

</div>

</section>

);

and Here’s an example (SUCCESS)

const SomeSectionComponent= () => (
   /* Some comment about the html below */ 
   <section id="somesection"> 
     { /* Some divs for somesection */ } 
     <div className="somedivs"> Hello there! </div> 
   </section>
);

const SomeSectionComponent= () => (

/* Some comment about the html below */

{ /* Some divs for somesection */ }

<div className="somedivs"> Hello there! </div>

</section>

);

Note that; This piece of code uses 2 variants of commenting: one of them uses with curly braces and other one doesn’t.

So whats the difference?

In JSX; before writing some html code in a render function, you can use:

const SomeSectionComponent= () => ( 
/* Some comment about the html below */ 

);

const SomeSectionComponent= () => (

/* Some comment about the html below */

);

But, once the HTML is implemented you need to put the “React-specific code” under {curly braces} to tell parser that it’s not part of the DOM but part of React code.

I know it is annoying but why would you care about commenting system in any platform, framework or library instead of other functionalities

Ebook

Beginning Object Oriented Programming with WinJS [EBOOK]

Temmuz 24, 2018Temmuz 24, 2018 tarihinde yayınlandı

I wrote this ebook to help you get started with WinJS while building Universal Apps for Microsoft Platforms.

You can download it from below:

Beginning Object Oriented Programming In WinJS

Hope it helps,

Cheers!

AI HowTo Series #2 : Programming Emotions

Ocak 10, 2018Ocak 10, 2018 tarihinde yayınlandı

Previously,we kickstarted our new article series “AI HowTo” and talked about how to register for Emotion API Preview(Project Oxford) through Azure Portal.

Now, I’d suggest we should start coding and learning the ways of emotions via codes

PROGRAMMING EMOTIONS

Before we start,make sure you get your “key” ready.If you havent already, read previous article to learn how it is done.

Emotion Analyzing in Images

This project requires an image to be processed at startup,makes some calculations on which emotion is stronger and then according to that calculation it posts the emotion on the screen.Let’s start with step by step

1-) Create a new Visual Studio project. Preferably Console Application.Install NewtonSoft JSON Parser from NUGET command line.

Install-Package Newtonsoft.Json

1	Install-Package Newtonsoft.Json

2-) Create a method to calculate the maximum number on a dictionary/collection:

static string ShowMeEmotion(Dictionary<string,dynamic> results)
{
  KeyValuePair<string, dynamic> max = new KeyValuePair<string, dynamic>();
  foreach (var kvp in results)
  {
    if (kvp.Value > max.Value)
        max = kvp;
  }
  return max.Key;
}

static string ShowMeEmotion(Dictionary<string,dynamic> results)

{

KeyValuePair<string, dynamic> max = new KeyValuePair<string, dynamic>();

foreach (var kvp in results)

{

if (kvp.Value > max.Value)

max = kvp;

}

return max.Key;

}

3-) Create a method to convert image to byte array.It’s needed while posting image as byte to Emotion REST API

static byte[] GetImageAsByteArray(string imageFilePath)
{
 FileStream fileStream = new FileStream(imageFilePath, FileMode.Open, FileAccess.Read);
 BinaryReader binaryReader = new BinaryReader(fileStream);
 return binaryReader.ReadBytes((int)fileStream.Length);
}

static byte[] GetImageAsByteArray(string imageFilePath)

{

FileStream fileStream = new FileStream(imageFilePath, FileMode.Open, FileAccess.Read);

BinaryReader binaryReader = new BinaryReader(fileStream);

return binaryReader.ReadBytes((int)fileStream.Length);

}

4-) Make a REST POST request to the emotion service url and parse json to display values from it

static async void MakeRequest(string imageFilePath)
{
  var client = new HttpClient();
  client.DefaultRequestHeaders.Add("Ocp-Apim-Subscription-Key", "Update here with your own Emotion API Key");            
  string uri = "https://westus.api.cognitive.microsoft.com/emotion/v1.0/recognize?";
  HttpResponseMessage response;
  string responseContent;
  byte[] byteData = GetImageAsByteArray(imageFilePath);

  using (var content = new ByteArrayContent(byteData))
  {
    content.Headers.ContentType = new MediaTypeHeaderValue("application/octet-stream");
    response = await client.PostAsync(uri, content);
    responseContent = response.Content.ReadAsStringAsync().Result;
  }

  dynamic d = JsonConvert.DeserializeObject(responseContent);
  Dictionary<string, dynamic> emotions = new Dictionary<string, dynamic>()
  {
   {"angry", d[0].scores.anger},
   {"contempt", d[0].scores.contempt},
   {"disgust", d[0].scores.disgust},
   {"fear", d[0].scores.fear},
   {"happiness", d[0].scores.happiness},
   {"neutral", d[0].scores.neutral},
   {"sadness", d[0].scores.sadness},
   {"surprise", d[0].scores.surprise}
  };  
  Console.WriteLine(ShowMeEmotion(emotions));     
}

static async void MakeRequest(string imageFilePath)

{

var client = new HttpClient();

client.DefaultRequestHeaders.Add("Ocp-Apim-Subscription-Key", "Update here with your own Emotion API Key");

string uri = "https://westus.api.cognitive.microsoft.com/emotion/v1.0/recognize?";

HttpResponseMessage response;

string responseContent;

byte[] byteData = GetImageAsByteArray(imageFilePath);

using (var content = new ByteArrayContent(byteData))

{

content.Headers.ContentType = new MediaTypeHeaderValue("application/octet-stream");

response = await client.PostAsync(uri, content);

responseContent = response.Content.ReadAsStringAsync().Result;

}

dynamic d = JsonConvert.DeserializeObject(responseContent);

Dictionary<string, dynamic> emotions = new Dictionary<string, dynamic>()

{

{"angry", d[0].scores.anger},

{"contempt", d[0].scores.contempt},

{"disgust", d[0].scores.disgust},

{"fear", d[0].scores.fear},

{"happiness", d[0].scores.happiness},

{"neutral", d[0].scores.neutral},

{"sadness", d[0].scores.sadness},

{"surprise", d[0].scores.surprise}

};

Console.WriteLine(ShowMeEmotion(emotions));

}

5-) Call main method

[STAThread]
static void Main()
{
  OpenFileDialog ofd = new OpenFileDialog();
  ofd.ShowDialog();
  string imageFilePath = ofd.FileName;
  MakeRequest(imageFilePath);
  Console.Read();
}

[STAThread]

static void Main()

{

OpenFileDialog ofd = new OpenFileDialog();

ofd.ShowDialog();

string imageFilePath = ofd.FileName;

MakeRequest(imageFilePath);

Console.Read();

}

6-) Run

That’s All!

Well done in Kick-Starting Azure Cognitive Services Emotion API

Remember that, Emotion API(Project Oxford) is still in “Preview Stage” , so not all your images are meant to work (Tried like 10 happiness emotion images and only 1 got processed)

FINAL THOUGHTS

Emotion Analysis is essential for all industries.We live in a world where emotions are changed instantly so if we analyze and take precautions before bad things happen, we can avoid dramas or even deaths.

There used to be emotion reading in police departments.These men/women could easily read one’s emotions in an interrogation.I don’t know if police stations upgraded to use AI but Artificial Intelligence can also help to avoid crime.

Emotion-reading AI spots if potential criminals are stressed or nervous and alerts police BEFORE they act

Read it from here: http://www.dailymail.co.uk/sciencetech/article-4494994/New-technology-reads-emotions-potential-terrorists.html

Analyzing Emotions must be a top priority for all companies and governmental organizations.

For governments; to secure public life and avoid terrorist,anarchist attacks.
For companies; to increase happiness among employees and solving their problems before it gets bigger.

Companies nowadays trying to convince employees not to leave by increasing their wage,giving car or improving working style but companies most of the time missing the point where problems occur.Emotion Analysis will also help managers to discover if employees are happy within the company or not.

So my advice to the companies/governments is;
You should absolutely plan for Emotional Test daily/weekly/monthly without others realizing it.

Future is AI, use it!

AI HowTo Series #1 : Registering for Emotion API

Ocak 8, 2018 tarihinde yayınlandı

1-) Access your Azure account via “portal.azure.com”

2-) Search for term “Cog..” The list will show you the shortcut to Cognitive Services

3-) Click Add and fill the search box with term “Emotion…” . Auto-completion box will find what we’re looking for: “Emotion API (preview)”

4-) Click and create a resource in WestUS servers (by the time I wrote this article, only WestUS is supported,im pretty sure other servers will start supporting it as well as soon as beta preview phase gone)

5-) Access your Emotion API blade(Pages/Windows in Azure Portal),

create your keys by clicking at keys at 1st step named “Grab your keys”

and start using Emotion API from Cognitive Services in Azure Platform

Next article will be about developing your very 1st Emotion Application.

Solution of Problem: “The remote certificate is invalid according to the validation procedure.”

Eylül 28, 2017Ocak 8, 2018 tarihinde yayınlandı

While sending email with code,you get this error.

Solution is simple!

Do not send it with SSL

//smtpClient.EnableSsl = true;

Comment/Delete this line if you have used.

Office 365

Solution of Problem “403 (Forbidden) with SP.RequestExecutor.js”

Şubat 18, 2016Ocak 8, 2018 tarihinde yayınlandı

Well, Every day I learn something.

Today,when I was deploying some apps to Office 365,I’ve come across a situation interesting and wanted to dig in.

I was developing an app that uses a list to retrieve specific items and it was working perfect in my On-Premise environment.

When I deployed the same app to Office 365 Developer Site,I have received this error in my Chrome’s Developer Tools threw error something similar to “403 (Forbidden)” linking “SP.RequestExecutor.js” file.

Well that ruined me for a sec,I didnt expect it at all.

Then after some research I’ve found that: “Tenant” needs to be added as “Read” permission in “ApplicationManifest.xml” configuration.

And the other problem for me was using Chrome Browser.When you deploy app to Office 365,you should always use “Internet Explorer” as default browser because by default it lets you to select “Trust-Don’t Trust” option which is needed to run the app which Chrome doesn’t.

Thats all.If you have come across the same situation,this is the trick.

SharePoint 2010

Export-SPWeb script to get backup all lists and libraries

Ocak 7, 2016Ocak 8, 2018 tarihinde yayınlandı

Wrote this Powershell script according to my company’s needs,but you can fork and use it if you like

Export-SPWeb Script to get backup of all lists/libraries in a site collection.

But I’ll also share it here:

[code language=”powershell”]
Add-PSSnapin Microsoft.Sharepoint.Powershell

$site = Get-SPSite
$path = "C:\Backup2015\ListBackups"
$serverurlpath =""
$listurlpath=""
$listurlwithoutformat=""
$dosyapath =""
$itemURLNEW=""

foreach($web in $site.AllWebs){
$serverurlpath=$web.Url
$serverlistsurlpath=$web.ServerRelativeUrl -replace "/","\"
$serverurlport = ([System.Uri]$serverurlpath).Port
$serverurlhost = ([System.Uri]$serverurlpath).Host.Split(‘.-‘) -join "_"

if($serverurlport -eq "80")
{
if(!(Test-Path -Path ($path + "\" + $serverurlport)))
{
New-Item -Path ($path + "\" + $serverurlport) -Type Directory
}

if(!(Test-Path -Path (($path + "\" + $serverurlport + "\" + $serverurlhost))))
{
New-Item -Path ($path + "\" + $serverurlport + "\" + $serverurlhost) -Type Directory
}

foreach($list in $web.lists)
{

If (!(Test-Path ($path + "\" + $serverurlport + "\" + $serverurlhost + $serverlistsurlpath))) {
New-Item -Path ($path + "\" + $serverurlport + "\" + $serverurlhost + $serverlistsurlpath) -Type Directory
}

$itemURLNEW= "$($list.RootFolder.ServerRelativeUrl)"
if($serverlistsurlpath -eq "\")
{
$dosyapath = "$path\$($serverurlport)\$($serverurlhost)$($serverlistsurlpath)$($list -replace "/","\").cmp"
}

else
{
$dosyapath = "$path\$($serverurlport)\$($serverurlhost)$($serverlistsurlpath)\$($list-replace "/","\").cmp"
}

if(!(Test-Path ($dosyapath)) -and $list.Hidden -eq $false)
{
export-spweb $web.URL -ItemUrl $itemURLNEW -IncludeUserSecurity -IncludeVersions All -path "$dosyapath" -nologfile
}
}
}

if($serverurlport -eq "1111")
{
if(!(Test-Path -Path ($path + "\" + $serverurlport)))
{
New-Item -Path ($path + "\" + $serverurlport) -Type Directory
}

if(!(Test-Path -Path (($path + "\" + $serverurlport + "\" + $serverurlhost))))
{
New-Item -Path ($path + "\" + $serverurlport + "\" + $serverurlhost) -Type Directory
}

foreach($list in $web.lists)
{

$itemURLNEW= "$($list.RootFolder.ServerRelativeUrl)"

if($serverlistsurlpath -eq "\")
{
$dosyapath = "$path\$($serverurlport)\$($serverurlhost)$($serverlistsurlpath)$($list -replace "/","\").cmp"
}

else
{
$dosyapath = "$path\$($serverurlport)\$($serverurlhost)$($serverlistsurlpath)\$($list -replace "/","\").cmp"
}

if(!(Test-Path ($dosyapath)) -and $list.Hidden -eq $false)
{
export-spweb $web.URL -ItemUrl $itemURLNEW -IncludeUserSecurity -IncludeVersions All -path "$dosyapath" -nologfile
}
}
}
}
[/code]

Uncategorized