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 :

  1. Pick a channel and time to run weekday stand ups.
  2. 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 :

  1. Open Google Calendar app within Slack and send it any message to get started
  2. Click “Connect your Account” button then follow the steps to link your Slack and Google accounts.
  3. 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 :

  1. Drag and drop up to 10 files into Slack or click the paper clip icon below the message field.
  2. 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 :

  1. 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.
  2. 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.

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