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 !

Hacktoberfest webinar

Hacktoberfest is back for the 6th year
I’ve gotten Hacktoberfest shirts the past two years, and I wear them with pride.

Hacktoberfest is a month long celebration of open source software. It was started by Digital Ocean in 2014.

I organized and hosted a Hacktoberfest webinar for Developers who have never contributed to OSS (Open Source Software).
Webinar was for Developers who have never done open source contribution, who doesn’t know where to get started.
The main motive of organizing this webinar to help Developers to start their opensource journey.

In webinar I explained about the OSS in a beginner friendly manner.
I explained in detail about what is Hacktoberfest, why Developers should contribute to OSS, I guided them through hands-on step by step process of how to open a pull request and contribute to OSS through Hacktoberfest.
I also explained about how one can claim swags from different companies by opening a pull request during Hacktoberfest.
At the end of webinar we had a Q&A session, where I cleared all the doubts of attendees.
Webinar was attended by Developers from different cities of India.

At the end of webinar everyone were happy and every attendee signed up for GitHub account, opened more than 4 Pull Request and started their open source journey.
I created a GitHub Repo ( beginner friendly ) for all the attendees, so that they can contribute and start their open source journey.

Review of attendees after Hacktoberfest webinar

Review of attendees after Hacktoberfest webinar

Please like and share below to show your support !

What is a Virtual Machine and How to Setup a VM on Windows

A virtual machine is basically a way to create a computer within a computer.
Nothing that runs on the virtual machine can impact the host computer.
For instance, if you are using a Windows computer you can run Linux programs inside a Linux virtual machine on the Windows computer.
A hypervisor or virtual machine monitor (VMM) is a computer software, firmware or hardware that creates and runs virtual machines. A computer on which a hypervisor runs one or more virtual machines is called a host machine, and each virtual machine is called a guest machine.

Few drawbacks with virtual machines :
Since hardware resources are indirect, they are not as efficient as a physical computer. Also, when many virtual machines are running at the same time on a single computer, performance can become unstable.

To setup a virtual machine you will need a virtual machine program. There are many different virtual machine programs you can use like : VirtualBox (Windows, Linux, Mac OS X), VMware Player (Windows, Linux), VMware Fusion (Mac OS X) and Parallels Desktop (Mac OS X).

Setting up a Virtual Machine :

To setup a Virtual machine we will use Virtual Box (virtual machine program). It is an open source program from Oracle. It allows users to virtually install many operating systems like Windows, BSD, Linux, Solaris, etc.

Start with downloading and installing VirtualBox. You can download it at this link : https://www.virtualbox.org/wiki/Downloads

You will also need to download an .iso file for the operating system that you want to run in your virtual machine. For instance, you can download a Ubuntu .iso file here:
https://ubuntu.com/download

Once you have VirtualBox running, click the “New” button

Create a new virtual machine

Next you will have to choose which OS you plan on installing. In the “Name” box, type the name of the OS you want to install. VirtualBox will guess the type and version based on the name you type in, but you can change these settings if you need to.

Configure the virtual machine

The wizard will automatically select default settings based on the OS type and version you selected. You can always change the settings as you go through the wizard. Just keep clicking “Continue” and “Create” until you get through the wizard. It’s usually fine to use the defaults.
Next, start the virtual machine you just created by clicking “Start“.

Start the virtual machine

Once the virtual machine starts up, select the .iso image file you want to use.
Your virtual machine will now load your selected operating system. The operating system may require some setup.

Ubuntu is successfully running inside a virtual machine

Congratulations! You’ve run your first Virtual Machine in VirtualBox.

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

Take screenshots of webpages in Firefox

Are you working on a website & need a quick way to send someone a screenshot of what you are doing ?

Firefox has a screenshot tool built right in the browser that you can use to grab the entire web page or just what’s showing in the viewport or hover over a specific element on the page & capture just that.

Many of us take a lot of screenshots & send them to other people to communicate about websites we’re working on, projects we’re working on or ideas we have.
There are a lot of tools, plugins & add-ons to take screenshots.

Firefox has a screenshot tool that might be just the right fit for making it very quick and easy to take the screenshots that you need.

Firefox screenshot tool

In the above image, you can see up in the URL bar, in the Page action menu, click on three dots and select Take a Screenshot from the drop-down or you can also take a screenshot by right-clicking on a page and selecting Take a Screenshot

Firefox screenshot tool displays two options

In the above image at right side corner you can see that after clicking on Take a Screenshot you have a choice.
We can take a screenshot of just the visible view port or we can do full page.

Firefox screenshot save visible option

Let’s say if we click on Save visible, we can see that it does take a screenshot of what was visible (refer above image)

It doesn’t take a screenshot that includes the browser tabs or anything else that’s going on in your computer.
It just gets the exact webpage that’s inside the viewport.

If we click on Save full page, we can see that it does take a screenshot of the entire webpage for this really beautiful website.

This is really helpful for those of us who design or build websites.

You can also drag and pick the part of the webpage that you wish to capture (refer image below)

Mess around with it until you get what you want, and then save or copy your screenshot.

Another way to pick something is to hover over elements on the page.

In the below image, there’s sort of the wrapper, probably that goes around the text or you can even hover over an image to get a wrapper

This is a really great way to get just part of the page without having to fuss with crop marks and try to get it exactly to the edges of the pixels.

Select a region to take screenshot

Firefox knows what a DOM is, it knows what all these elements are. It can help use those elements to grab exactly the part that you want.

And after selecting a specific part of webpage we have three choices :

  1. We can download the file (which is going to put our screenshot image file in my Downloads folder)
    or
  2. We can copy this image (which means the file is not going to end up on my computer at all and I can go over to some sort of chat window or whatever and I can just paste it quickly)
    In the image below at right side bottom corner you can check the popup displayed which says that your screenshot has been copied to clipboard.
  3. Cancel: To cancel your selection, click on the Cancel icon

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

Firefox Dev Tools 3 Panel Web Inspector – HTML + CSS + Extra options

Beginner friendly guide to Firefox Dev Tools

I want to show you two really quick things about the Firefox Dev Tools that are little tiny icons that you might not notice, but you definitely want to know about.

I’m here, on a random web page, working on the CSS, HTML and right there, you’ll see that there’s this little icon, that you can click, that toggles the Firefox Dev Tools to switch from having two panels to having three panels.

Toggle on 3 pane inspector

Now there’s a good chance when you downloaded Firefox, and you opened it for the first time, it will open with three panels, but in case if it didn’t, or in case you switched back to two and you didn’t realize it, this is where the button is.

You click this little button, and it goes from having HTML and CSS to having HTML and CSS and other options.

And these other options include layout tools, a panel that gives you the computed values for everything in CSS, the changes tab lets you know when things have changed or keeps track of your changes, the Font inspector gives you a way to adjust and change fonts and mess around with variable fonts, (if you’re using a variable font) and the Animations inspector (if you have animations on the page) is a place where you can see exactly what’s going on with animations.

I think it’s really handy to be able to see the HTML in one panel, CSS in another panel and to see other things about CSS in the third panel.

The other thing I wanted to make sure you know about is a little button for messing around with print style sheets.

Toggle print media simulation for page

You can see in the above image , there’s a little icon, that looks like a piece of paper and it makes the browser think that it’s about to print a piece of paper.

It will turn on any media queries that you have set for Print, it will activate the kind of rendering engine behavior that gets activated whenever someone goes to actually print the page.

So it’s a quick way, if you’re styling print style sheets, you can check print media simulation of the page, and not have to actually find a printer and print it out.

Highlighted buttons, navigation links will be removed after clicking on print media simulation

You can see in above image which displays a MDN CSS grid layout webpage, the buttons, navigation links (highlighted in the image above) is not needed when you’re printing it out.
Because None of these buttons will actually do anything on a piece of paper.
Below image displays the webpage after clicking on tiny button to toggle print media simulation

Result after clicking on print media simulation

That’s one of the things you want to do, when you have to print style sheets, is to remove things that you don’t necessarily need.

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

Hacktoberfest – month long celebration of open source software

Hacktoberfest is back for the 6th year, and here’s everything you need to know!

I’ve gotten Hacktoberfest shirts the past two years, and I wear them with pride.
In this quick article, I’ll show you how you can participate in Hacktoberfest.

What is Hactoberfest ?

Hacktoberfest is a month long celebration of open source software. It was started by Digital Ocean in 2014.

Why should you participate ?

Whether you’re a developer, student learning to code, event host or company of any size, you can help drive growth of open source and make positive contributions to an ever-growing community. It doesn’t need to be code. It can be even documentation. Quality contributions are encouraged!
By participating you are supporting open source and there are loads of cool swag up for grabs 😉

Free swag ?

Yes! T-shirts and stickers will be awarded on a first-come, first-serve basis to the first 50,000 participants who successfully complete the Hacktoberfest challenge.

How to get started ?

Register at https://hacktoberfest.digitalocean.com/ . Then, submit at least four PRs ( pull request ) to any public GitHub repository during the entire month of October.

Celebrate Hacktoberfest with the global open source community.
I hope you’ll contribute to the open source community, learn a few new things, and have fun in the process !


If this post was helpful, 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