Speaker at In(s) & Out(s) of GitHub event by Rotaract club of Yuva.
I had a great time interacting with all the attendees.
In(s) & Out(s) of GitHub
tech blogger
Get more out of Slack for your team
Make your work simpler on Slack by using some of the below mentioned tips :
Daily stand-ups
Daily stand-ups are great because :
- Managers can monitor progress on tasks
- It gives visibility into everyone’s tasks
- Saves time by eliminating an in-person meeting
Here’s how you can do that :
- Pick a channel and time to run weekday stand ups.
- Use slash command (/remind) to set reminder that asks your teammates to share their updates.
Share code snippets
This slack feature is very useful for Developers to discuss code, finding & fixing bugs, offering suggestions.
Here’s how you can do that :
- Click code block icon (or Ctrl + Alt + Shift + C keys ) to the bottom of the message field.
- Then just Paste your code snippet
Another way to attach code snippets :
1. Click on paper clip icon below message field (or Ctrl + Shift + Enter keys)
2. Select Create New
3. Click on Code or text snippet
4. Paste your code snippet and select the programming language from the drop-down menu. You can optionally give it a title and add a message explaining the snippet to others in the channel.
Event reminder & notification in Google calendar :
Connect your Google Calendar to Slack so you can see daily summaries of your schedule & respond to event invites.
Here’s how you can do that :
- Open Google Calendar app within Slack and send it any message to get started
- Click “Connect your Account” button then follow the steps to link your Slack and Google accounts.
- You can even join conference calls in a single click from event reminders.
Upload and Share files
You can upload & share any type of files like photo, PDF, video or spreadsheets.
Here’s how you can do that :
- Drag and drop up to 10 files into Slack or click the paper clip icon below the message field.
- Choose a file from your computer.
If you want you can write a message describing the file and click upload.
You can also use Google Drive Slack app for sharing files.
Welcome new employees to your team
When someone joins your team, help introduce them to everyone and make them feel welcome.
You can share important documents, policies, and due dates to get them started
It will help you to create and maintain a healthy work environment.
Here’s how you can do that :
- Create a channel called #new-hires and post important documents and messages that explain policies and due dates which will help new employees. Invite your HR staff to join the channel and allow new hires to ask questions.
- Create a channel called #intros and ask new hires to post their brief introduction.
GitHub Slack app
You’ll get updates about what’s happening on GitHub without leaving Slack.
You can Subscribe to repositories, stay up to date about New commits and New pull requests, see the details like Pull requests, Issues & Developer profiles.
You can even take actions on GitHub with slash commands on Slack like : Close an issue or pull request, reopen an issue or pull request or open a new issue.
Elastic Stack & Twilio event
Attended Elastic Stack & Twilio event where I learned more about Demystifying Anomaly Detection by Elastic, this wonderful talk was given by Jayesh. Another awesome talk by Lizzie Siegle from Twilio where she explained in detail about Detecting Toxic Language with Twilio Chat and TensorFlow JS. I liked the complete workflow demo of Twilio for timely alerts from your ELK stack which was shown by Matthew Gillard from Twilio.
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.
I explained about what is Data Privacy, why one should care about their Internet Privacy and various generic Solutions to ensure Privacy.
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.
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 !
‘Unicorns of Pune’ event
I attended an event “Unicorns of Pune” which was organized by MCCIA.
There are total 3 Unicorns in Pune.
Unicorns are those who have reached the $1 billion mark in their business. In this series of events I was able to interact with inspiring folks in Pune, who have a lot of insights to share about different communities, startups, entrepreneurship.
This was an amazing event because it helped me gain first-hand advice from those who have built conglomerates.
The first Unicorn (guest speaker) was Mr. Monish Darda (CTO and Co-founder of Icertis). There was an Interesting panel discussion between Mr. Amit Paranjape and Mr. Monish Darda.
Summary of the session :
1. Hiring at Icertis is never aggressive. They always ensure that they never hired the wrong person. Marketing for hiring is always given importance. Pune based Icertis do marketing in Bangalore for hiring.
2. Values are very important. They help you as a framework for decisions. values help in getting customers, values are important for culture fit in a company.
3. Tip for Young and Aspiring Entrepreneurs :
Leave your ego aside as an entrepreneur and do not be arrogant about how you do business. To become a successful entrepreneur you must separate passion and emotions.
4. Things Mr. Monish Darda do to de-stress : Apart from coding Mr. Monish loves gaming on platforms as well as cellphones.
5. Mr. Monish discussed about his college days, initial Startup days, his career transition from Mechanical to IT.
6. Icertis shares company finances with their employees (company belives in transparency and open culture).
If this post was helpful, 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
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
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.
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“.
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.
Congratulations! You’ve run your first Virtual Machine in VirtualBox.
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.
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.
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.
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
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 !
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:
- Plotly.js uses both D3.js and stack.gl
- Plotly.js ships with 20 chart types, including 3D charts, statistical graphs, and SVG maps
- 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
