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 !

Advertisements

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

Health Scan

Health Scan

Health Scan app is developed with medical emergencies in mind.
A user could input personal and medical information. This would then generate a medical QR code containing all the data.

Health Scan card :
Health Scan card contains a medical QR code which is very helpful during Emergency medical situations.
First responder/Doctors can easily scan the medical QR code and provide immediate medical help.
Health Scan card can help doctor to discover what allergies or medications the user is taking as well as other personal medical information thereby saving valuable time and providing better emergency care.

Important Features of Health Scan card :
1. Internet is not required to scan the medical QR code therefore it is very
beneficial in Rural Areas as well as on roads where there is no/limited
Internet facility available.
2. Medical QR code generated by health Scan app does not have any expiry.

Health Scan card can also be beneficial for Diabetic,Heart Patient and people with disabilities like : Blind, Autistic, Mentally/Physically challenged people.

I have developed this app under the guidance of Dr. Shishir Joshi and Microsoft R&D Head.

Road Accidents Statistics :

A Report on Road Accidents in India 2016, published by Transport Research wing under Ministry of Road Transport & Highways, Government of India, has revealed that at least 4,80,652 accidents in 2016, leading to 1,50,785 deaths. The number suggests that at least 413 people died everyday in 1,317 road accidents. Further breaking down the statistics, the data reveals that at least 17 deaths occurred in road accidents every hour.
Over 1,37,000 people were killed in road accidents in 2013 alone, that is more than the number of people killed in all our wars put together.

“India is no. 1 in road crash deaths and injuries in the world.”
Global Status Report on Road Safety, 2015 by World Health Organization.
And over 80% of these victims do not get emergency care in the first hour following the accident.
And this Results in : Preventable injuries leads to death.
50% of lives can be saved if people get basic care on time.

Media Coverage :

News Nation TV channel

nnation

Times of India

prasad seth Times of India

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Economic Times #ETHealthWorld 

prasad seth Economic Times

Maharashtra Times

prasad seth Maharashtra Times

Sakal

sakaal front

prasad seth Sakal

Pudhari prasad seth Pudhari

Asian Association for Emergency Medical Services #EMS http://www.emsasia.org/newsdetails.php?NewsId=1666

prasad seth Asian Association for Emergency Medical Services

TeleMedicine Society of India

parasad seth tele mediciene society of india

Nasscom Pune

nasscom

Medical Dialogues  http://www.medicaldialogues.in/quick-response-code-for-medical-records-developed

prasad seth medical dialogues

Latest articles online  http://www.latestarticlesonline.com/viit-student-develops-software-for-emergency-medical-services

prasad seth latest articles online

Rediff News

prasad seth rediff news

Health Scan is appreciated by :

Microsoft R&D Head,
Mr. Bharat Agarwal (President- Vishwakarma University) ,                                                                  Dr. Sachin Sakhare ( Head-Computer Engineering,VIIT),                                                                     Mr. Ajit Patankar ( Advisor, Government of Maharashtra,Rajiv Gandhi Science & Technology Commission, Ex-Head,Technology Transfer & Collaboration Division, Bhabha Atomic Research Center)

IMG_20170105_115751_HDR
Mr. Prasad Deore (Nasscom Regional head)

Screenshot_2018-10-04 VIIT student develops software for emergency medical services - Twitter Search(3)

Presented Health Scan at HeadStart Networks Startup Saturday Event

16700578_1336531943057269_4578880135771881161_o

Health Scan cards were given to “Maharashtra Times” initiative “Helpline” in the presence of honorable Mr. Avinash Dharmadhikari (former IAS officer)

13925715_1158669170843548_5385302650461067826_o13913944_1158668957510236_3491375463224832363_o13975478_1158669394176859_7955859440084527570_o13975561_1158669524176846_4048043323230019377_o

Video :

Reviews for Health Scan :

  • Dr. Shishir Joshi (Consulting Physician) :

        “ Health Scan is very useful for People travelling alone, Old age people,                 Diabetic  patients, Heart patients, etc.”

  • Ms. Sadhana Godbole (Managing Director-Prasanna Autism Centre) :

          “ Health Scan is helpful for all children’s but it is more useful for the       Autistic children. 50% autistic children cannot communicate, so if they have     Health Scan Card then during any emergency situation this can be helpful for    them.”

For more information contact : 9623134392

Email : prasadlt6@gmail.com

Data Safe App

Data Safe app

My new application Data Safe is now available for free download on Firefox Marketplace

This app allows one to choose files from phone and encrypt them with a pass phrase. One can even decrypt the encrypted file.

Note that the app does not encrypt the actual file, but a copy of it, so you would not lose the original. One can encrypt any file like documents, music, videos, pictures, etc.

This app have more than 15k+ downloads

screencapture-marketplace-firefox-statistics-app-data-safe-1520179410436

You can download the app from:  https://marketplace.firefox.com/app/data-safe/

                            prasad seth data safe

Article related to the app was featured in newspaper “Maharashtra Times”

prasad seth maharashtra times