Importance of Internet Privacy & Getting started with Web based Virtual Reality

I was invited as a Tech Speaker at Bharati Vidyapeeth Deemed University where I gave a talk on Importance of Internet Privacy and Getting started with Web based Virtual Reality.
Event was attended by more than 150 attendees.

Selfie with attendees

I explained about what is Data Privacy, why one should care about their Internet Privacy and various generic Solutions to ensure Privacy.

Importance of Internet Privacy
Mozilla Firefox privacy tools

I also talked about what is Virtual Reality, Problems of Virtual Reality, what is Web based Virtual Reality and How to create a Web based Virtual Reality scene. After the event received an excellent feedback from attendees.

Getting started with web based virtual reality
Selfie with attendees
Reward and felicitation after the event

Please like and share below to show your support !

Organized Webinar on How to Contribute to Mozilla & Getting started with Virtual Reality

I organized a Webinar on How to Contribute to Mozilla & Getting started with Virtual Reality.
Webinar was attended by Computer Engineers. I explained about How one can contribute to Mozilla Technically and Non technically, various ways of contribution and why one should contribute to Mozilla.

How to contribute to Mozilla

I also explained in detail about what is Virtual Reality, problems of Virtual Reality, what is Web based Virtual Reality and How to create a Web based Virtual Reality scene.

Getting started with web based virtual reality
web based virtual reality scene

The feedback of attendees after the webinar was excellent. A huge thank you to those who attended, and especially those who took extra time to email or message me with appreciation.

Please like and share below to show your support !

Slack TinySpec 2019

What is Spec?

Spec is a Slack’s Developer Conference

At TinySpec 2019 there was discussion around the latest developments on the Slack Platform, updates from the Slack team on the news since annual developer conference, Spec.

Apps are a fundamental part of bringing workflows into Slack, improving the way teams work together. But the Slack isn’t just a set of APIs to connect workflows and teams – it’s a global community with the resources, support, and tools you need to be successful.

Mr. Gregg ( Partner Engineer at Slack) explained about what is #tinyspec2019 and about Slack Apps

Mr. Aman Gupta ( Partner Engineering at Slack) talked about various features of slack which are very helpful for developers to build slack apps. He explained and showed videos of block kit, modals, advanced surveys, home tab, integration of google calendar with slack and actions from messages.

Mr. Vishwesh (Engineering Site Lead @ Slack) described in brief about latest development which Slack team is working on and about new slack features

Ms. Emily Pinkerton (Content Senior Strategist at Slack) explained about slack app toolkit. She talked about Slack’s growth over the years in terms of users, slack apps, etc.

Overall I had a fantastic time at #tinyspec2019 meetup ! It was an awesome event where Slack team shared a lot of insights on what’s latest in Slack. I loved the live demo of Salesforce integration with Slack.

Please like and share below to show your support !

Speaker at HTML/CSS Event

I was invited as a speaker at VIIT Engineering College for a session on “Learn HTML/CSS by creating a portfolio”

I started the session by giving an introduction about HTML and CSS. In the introductory part I explained about what is HTML & CSS, HTML & CSS syntax, HTML Tags, correct HTML syntax, examples of HTML & CSS code, different ways in which CSS can be added for a website, CSS selectors, etc.

After the introductory part I explained about importance of having a portfolio and various uses of having a portfolio.
Then we started with hands-on session (coding) of how to create a portfolio.
During the hands-on session I explained about various HTML/CSS tags and concepts while coding and creating a portfolio.

Once our portfolio was created I gave a demo.
In the demo I explained step by step in detailed about :
1. How to install git
2. Uploading their portfolio code on GitHub
3. Using Netlify free hosting for their portfolio
4. Netlify continuous integration and continuous deployment feature

At the end we had a Q&A round where I cleared all the doubts of attendees.
Overall it was an awesome event. After the event many attendees created their GitHub account, used Netlify for hosting and created their own HTML/CSS portfolio.

Review of attendees after the session

Please like and share below to show your support !

Introduction to plotly.js - open source graphing library

Plotly.js is a library suited for JavaScript applications which make use of graphs and charts. There are a few reasons to consider using it for your next project:

  1. Plotly.js uses both D3.js and stack.gl
  2. Plotly.js ships with 20 chart types, including 3D charts, statistical graphs, and SVG maps
  3. It is an open source library

It has more than 9900 stars on Github

There are 2 main concepts in Plotly :

1. Data
2. Layout

Data

The Data object defines what we want to display in the chart (that is, the data). We define a collection of data and the specifications to display them as a trace. A Data object can have many traces. Think of a line chart with two lines representing two different categories: each line is a trace.

Layout

The Layout object defines features that are not related to data (like title, axis titles, and so on). We can also use the Layout to add annotations and shapes to the chart.

Let’s looks at the setup :

First, include the file from CDN

<head>
  <!-- Plotly.js -->
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>

Next, let’s plot a line graph :

HTML :

<head>
  <!-- Plotly.js -->
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>

<body>
  
  <div id="myDiv">
	<!-- Plotly chart will be drawn inside this DIV -->
  </div>

</body>

JS :

var trace1 = {
  x: [11, 12, 13, 14],
  y: [19, 14, 12, 16],
  type: 'scatter',
};

var trace2 = {
  x: [12, 22, 23, 24],
  y: [15, 4, 10, 8],
  type: 'scatter'
};

var data = [trace1, trace2];

Plotly.newPlot('myDiv', data);

Result :

Basic setup can be done with a file inclusion, a DOM element, and a script for plotting.
After the inclusion of the Plotly.js library in , we have defined an empty <div> to plot the graph.
Plotly.new() draws a new plot in the element.
We can have a Line and Scatter Plot charts by inclusion of mode in the trace variable.
The legend in a graph is linked to the data being graphically displayed in the plot area of the chart.
We can customize charts by using different options like legend name, marker color, marker size, line color, line width, chart title, mode, etc.

Example :


HTML :

<head>
  <!-- Plotly.js -->
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>

<body>
  
  <div id="myDiv">
	<!-- Plotly chart will be drawn inside this DIV -->
  </div>
  
  <script>
    <!-- JAVASCRIPT CODE GOES HERE -->
  </script>

</body>

JS :

var trace1 = {
  x: [11, 12, 13, 14],
  y: [11, 14, 12, 16],
  mode: 'markers',
  name : "Apple",
  marker: {
    color: 'rgb(219, 64, 82)',
    size: 13
  }
};

var trace2 = {
  x: [12, 13, 14, 15],
  y: [17, 15, 10, 19],
  mode: 'lines',
  name : "Mangoes",
  line: {
    color: 'rgb(55, 128, 191)',
    width: 6
  }
};

var trace3 = {
  x: [11, 21, 31, 41],
  y: [14, 19, 16, 13],
  mode: 'lines+markers',
  name : "grapes",
  marker: {
    color: 'rgb(128, 0, 128)',
    size: 9
  },
  line: {
    color: 'rgb(128, 0, 128)',
    width: 2
  }
};

var data = [trace1, trace2, trace3];

var layout = {
  title: 'Line and Scatter Styling Example'
};

Plotly.newPlot('myDiv', data, layout);

Result :

If we use markers as we have used in trace1 , notice that we only get points marked in the graph coordinates and do not see the connected line across all points

By now we have seen some examples of line, let’s quickly plot a bar chart using ‘bar’ as type.

Example :

HTML :

<head>
  <!-- Plotly.js -->
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>

<body>
  
  <div id="myDiv"><!-- Plotly chart will be drawn inside this DIV --></div>
  <script>
    <!-- JAVASCRIPT CODE GOES HERE -->
  </script>
</body>

JS :

var data = [{
  x: ['lions', 'tigers','monkeys'],
  y: [21, 15, 24],
  type: 'bar'
}];

Plotly.newPlot('myDiv', data);

Result :

Did you found this article helpful ? I try my best to write a deep dive article.

I had a pretty good experience with Plotly. What are your thoughts about it after this overview ? And what other tools do you use to generate charts for the web ? Share them in the comments!

If this post was helpful, please like and share below to show your support !
Thank you for reading