Wednesday, 6 October 2021

Free CORS Proxy List To Use With JavaScript

Free CORS Proxy List To Use With JavaScript

Whenever if you have tried to use some API or tried to get some information from the GET reuest via JavaScript XMLHttp Request or fetch(), you must have encountered the error similar that of below.

CORS error in chrome dev tools console

You can use free CORS proxy servers to bypass same-origin policy related to performing standard AJAX requests to 3rd party services. Usually it is not recommended to use these proxies in production mode, simply because you might have no control over it. But you can set up your own proxy server and use it.

These free CORS proxy server list here is made to use their API for development mode.

You can use to prevent mixed content of images and JSON data proxying the resources to serve them under https.

1. Codetabs CORS Proxy

API URL => "https://api.codetabs.com/v1/proxy?quest=<url_to_http_resource>"

- Each request is limited to 5mb size download to avoid abuse.

- Only supports GET request.

- Limit : 5 request per second. Once reached subsequent requests will result in error 429 (too many requests) until your quota is cleared.

2. origin.maskoding.com

API URL => https://origin.maskoding.com/?url=<url_to_http_resource>

- Only supports GET request.

3. All Origins


API URL => https://api.allorigins.win/get?url=<url_to_http_resource>

Example With JavaScript Fetch =>

fetch(`https://api.allorigins.win/get?url=${encodeURIComponent('https://wikipedia.org')}`)

                    .then(response => {

                      if (response.ok) return response.json()

                      throw new Error('Network response was not ok.')

                    })

                    .then(data => console.log(data.contents));

Example

Now suppose I need to get a contents of a page on Wikipedia to show a user on my web page, I can call fetch() to that particular URL via JavaScript. But the request won't get completed because of CORS or Cross-origin Resource Sharing.

For which you need to fetch() the webpage data from your server and then show it to user.

Now fortunately, we have these free APIs so that we don't actually need to set up a server to make all request with them.

SO above were the list. If you know any more proxy sites, do enter the links in the comment section so that others would also get to know about them. 😊

Monday, 30 August 2021

How to remove photos from a website without changing HTML code only using CSS?

How to remove photos from a website without changing HTML code only using CSS?

Yes, you can do it using CSS only, however JS would be a great option. There are many ways to do this using CSS, so lets dive in ;)

Before Proceeding, this is a short notice that the image element will be there in HTML - but only styles will make them disappear from the screen view.

Saturday, 26 December 2020

Friday, 25 December 2020

Monday, 30 April 2018

Google turned down support for their URL Shortener, Here are the top 7 Alternatives

Google turned down support for their URL Shortener, Here are the top 7 Alternatives
url shortener alternatives
As of March 30, 2018, Google announced on their developer's blog that they are looking forward towards bright future and moved towards Fire Base, leaving behind the support for their URL shortener, Goo.gl.

Shortening the URLs is much of fun as they were giving you a track on traffic coming from different social media and apart from that, they were easy to share.

Hence, compressing large URLs into a small, we can't sit back and now need to find some other alternatives to URL shorteners. So, here, I've collected the top 10 alternatives for URL shorteners.
1.Bit.ly
Bit.ly is very good for Information Tracking.They are much powerful to deliver high engagement and real time insights. Bitly offers you to shorten, brand, track, and share links from its secure and intuitive platform.Account limits you for making 500 branded links and 10,000 non-branded links.
Bit.ly link shortener.
Enterprise account (paid service) can give you much more links as you want and you can analyze the information more accurately and get richer analysis than the free account.Over 3 hundred billion links are shortened by bit.ly (and counting).

2.Ow.ly
Ow.ly is User friendly.Ow.ly has a very user-friendly dashboard for shortening links and to track them.In order to create short links, you need to sign in to a Hoot-suite dashboard.The free version of Hoot-suite gives you unlimited access to the Owly link shortener. You can also upgrade to a paid plan if you need more features.
Owly URL shrinker.

3.TinyURL
Tiny URL is best for anonymous use. TinyURL is very simple and best for anonymous use somewhat like Google URL shortener.Once created a link by TinyURL, it didn't break in email postings or expires.
TinyURL homepage.

Just head over to their sire, enter your link to be shortened, add your custom alias if you want (this makes TinyURL better than Google URL Shortener.) and hit enter!

One down-point I found is that, if your custom aliases is not available, you need to add the URL and need to do the whole process again. TinyURL is good for simple URLs, but not for professional use.

4.Ouo.io
To make a little bucks out of your links.
Ouo.io can be used not only to shorten your links but also to make some cash.You can make nearly or more than $8 from 1000 clicks no matter from same or different IP or user.This makes this URL shortener a very simple and easy to use.At the date of writing this post, Ouo.io not uses https:// which may disappoint some people. Although, they can update it.

Minimum payout in Ouo.io is 5$ and paid 1st and 15th day of the month.
Ouo.io URL shortener.

There are many short-links sites like these which pays you through the means of advertising.When user will click on your short link, these site takes them to a page where there is an advertisement.After some time, they redirect the user to their original page.would suggest you not to go through this method, as the ads on the platform may be spamery, which may make the user disappointing and annoying cause to leave your site.It could also take down your reputation.

5.Buffer.com
Buffer is good at managing social media links.It is another short linking site which is free as well as paid.In the paid account, of course, you will get a lot more benefits.It has business plans to $399.

Buffer is simplest and most powerful social media tool, and to set the bar for great customer support.You can give it a try in its free plan first before upgrading in pro plan.

6.Cutt.us
Simplest URL shortener.Cutt Us is very simple to use.Just head over to cutt.us, paste a long URL, you can also add custom alias if you want and hit enter! You have a short link and Qr code ready.Must try!
Cutt.us URL shortener.

7.V.ht
Really very hot!If you don't prefer cutt.us, then v.ht is best smart service for you.It is simple, easy to use, and fast.
V.ht URL shortener.

I have tried to provide the best names of URL shortener with a varying need of different users.If you know more URL shorteners than these, you can comment down below.
Read more articles about blogging in the blogging section of this blog above and give a like to CSS-magz on Facebook.

Thursday, 26 April 2018

Set any thumbnail for the blogger blog post

Set any thumbnail for the blogger blog post

While comparing WordPress and Blogger, the one down-point of Blogger is that there is no feature to set or choose any picture that you want as thumbnail of the post.Today, we are going to see how we can choose the random picture as thumbnail for the blog post.

To do this, first we need to understand that to which picture the Blogger makes as its first photo!It has been noticed that Google Blogger always takes the first picture in the article as its thumbnail.

So, the solution is to make a beautiful thumbnail and always add it as the first thumbnail of the post.

But, what if you don't want to put it as the first image?For that, there is a little hack!Let me show you that.


  • First, after writing the whole post, add  the thumbnail image at the top of the post like in the below image.
    Adding photos in Google Blogger.
Adding photos in Google Blogger blog post.

After adding thumbnail at the top of the post, it will look something like this.
Editing in blogger.
Now, Switch to HTML tab from compose tab as shown below.
Switch to HTML from compose in Google Blogger.
After that, you'll find the <img> tag.If you know HTML, you will understand this better.
Editing HTML of blog post.

Now, we need to hide the image using attribute style='display:none'.So, add it after '<img '.Then it will look something like this.
Adding style attribute in HTML.

BOOM!That's it! Now publish the post and you will notice that the
 thumbnail is Not visible in the post but is visible in the Home where all the articles are being shown,You will also com to know that while sharing the links on social media, such as Facebook, thumbnail is being shown.

If you preview this, then it will won't work.This trick will work only after publishing the article.This will not work if you did any mistake in between.There should be space left in front and back of the 'style='display:none''.If you have any problem, comment down below.I'l surely reply.

If you want demo, then check in this article itself.You won't find any thumbnail included in this post, but when you look it from the home, then it will appear.

Thanks for reading this post.If you liked it then give a like us on Facebook.