We can use the
window.location property to access the URL of the current page and modify it.
let location = window.location;
For redirecting the page we can use:
location.href = "new url"; // or we can use location.assign("new url");
For redirecting without storing in history:
For reloading the page:
We can pass
true to force the reloaded page to come from the server (instead of the cache). Alternatively, we can use
false to reload the page from the cache.
Properties of Location Object
//from cache window.location.reload(); window.location.reload(false); // from server window.location.reload(true);
Contains the entire URL of the page.
location.href; // current page url addresss
When we assign a new value to the property, it will redirect the
url value set to the property.
location.href = "https://google.com";
Make sure to add http/https. Otherwise, it makes the request on the same page.
Contains the protocol (
http,https,...) of the page.
location.protocol; // https:
Website hostname with port number.
location.host; // medium.com // with port number var anchor = document.createElement("a"); anchor.href = "https://medium.com:4097 anchor.host // "medium:4097"
location.host; // medium.com
Contains the port number. If the URL does not contain an explicit port number, it will be set to
var anchor = document.createElement("a"); anchor.href = "https://medium.com:4097 anchor.port // "4097"
Contains the path after the hostname.
location.href; //https://medium.com/@jagathishsaravanan location.pathname; // "/@jagathishsaravanan"
Returns the search part of URL.
Contains string of
'#' followed by the fragment identifier of the URL. This will be useful when we have links inside the same page.
Example from MDN Web Docs:
<a id="myAnchor" href="/en-US/docs/HTMLHyperlinkElementUtils.href#Examples">Examples</a> <script> var anchor = document.getElementById("myAnchor"); console.log(anchor.hash); // Returns '#Examples' </script>
Origin of specific location.
Loads the resource at the URL provided in the parameter.
This will redirect to
**Location.reload()** method reloads the current URL, like the Refresh button.
It has an optional parameter
forceReload, which defaults to
true. Then it loads the page from the server, instead of loading from the browser cache.
Replaces the current resource with the one at the provided URL.
// consider we are google.com // when we run this line location.replace("htts://medium.com") // it will replace the current page and redirect to medium page
The difference from the
assign() method is that after using
replace(), the current page will not be saved in session
History, meaning the user won't be able to use the Back button to navigate to it.
Returns the whole URL as a string.
Thank you for reading ! I hope this tutorial will surely help and you if you liked this tutorial, please consider sharing it with others.
In this post, we are putting curated list of top tools with key features and download links "Top 19 Front End Web Development Tools to Consider in 2020"
Front-End development is one of the critical skill for web developers as there is a lot of demand for programmers with excellent front-end development skills.
If you've never experienced client-side web development, learning the plethora of front-end technologies can be difficult, but you can achieve your target.
In this post, we are putting curated list of top tools with key features and download links "Top 19 Front End Web Development Tools to Consider in 2020"1. TypeScript:
Download link: https://www.typescriptlang.org/index.html#download-links2. Backbone:
Backbone.js gives structure to web applications by offering models with key-value binding and custom events.
Download link: http://backbonejs.org/3. jQuery:
Download link: http://jquery.com/download/4. AngularJS:
AngularJS is another must-have tool for front-end developers. It is an open-source web application framework. It helps to extend the HTML syntax for web applications. It simplifies front-end development process by developing accessible, readable and expressive environment.
Download link: https://angularjs.org/5. HTML5 Boilerplate:
HTML5 Boilerplate help in building fast, robust, and adaptable web apps or sites. It is a set of files that developers can download, which provide a foundation for any website.
Download link: https://html5boilerplate.com/6. ONE Subscription
ONE Subscription is an effective web-development kit that allows getting access to a great number of top-quality digital products. It boasts tons of high-quality items that make it possible to launch fully-fledged blogs, online-stores, landing pages, and other websites. In general, you will be provided with thousands of themes and templates, different plugins and graphic elements, additional services, and other advantages.
Download link: https://one.templatemonster.com/7. Npm:
Download link: https://www.npmjs.com/8. CodeKit:
Download link: https://codekitapp.com/9. Sass:
Sass is the most reliable, mature, and robust CSS extension language. This tool helps to extend the functionality of an existing CSS of a site like variables, inheritance, and nesting with ease.
Download link: http://sass-lang.com/10. WebStorm:
Download link: https://www.jetbrains.com/webstorm/download/#section=windows11. Chrome Developer Tools:
The Chrome Developer Tools are a set of debugging tools built into Chrome. These tools allow developers to do wide varieties of testing which easily saved lots of time.
Download link: https://developer.chrome.com/devtools
Grunt is a popular task runner on NodeJS. It is flexible and widely adopted. It is preferred tool when it comes to task automation. It offers lots of bundled plugins for common tasks.
Download link: https://gruntjs.com/13. CodePen:
CodePen is a web development environment for front-end designers and developers. It is all about faster and smoother development. It allows to build, deploy website and build test cases.
Download link: https://codepen.io/14. Jasmine:
Download link: https://jasmine.github.io/index.html15. Foundation:
Foundation is front-end framework for any device, medium, and accessibility. This responsive front-end framework makes it easy to design responsive websites, apps, and emails.
Download link: http://foundation.zurb.com/sites/download.html/16. Sublime Text:
Sublime Text is a proprietary cross-platform source code editor. This app development tool natively supports many programming languages and markup languages.
Download link: https://www.sublimetext.com/
Less is a pre-processor that extends the support for CSS language. It allows developers to use techniques to make CSS more maintainable and extendable.
Download link: http://lesscss.org/18. Modaal:
Modal is front end development plugin which gives quality, flexibile, and accessibile modals.
Download link: https://github.com/humaan/Modaal19. Github:
GitHub is a web development platform inspired by the way you work. This tool allows developers to review code, manage projects, and build software.
Download link: https://github.com/
Thank for reading!
Front-end development is stressful and hard — but with practice, one can master the craft. If you’re willing to put the work and effort in, you’ll be able to become a proficient problem solver in the front-end development landscape. One effective way to become a great front-end developer is to simply build and solve as many challenges as one can. Here Are 6 Front-End Challenges to Code. Are you able to code These front-end challenges?
Front-end development is stressful and hard — but with practice, one can master the craft. If you’re willing to put the work and effort in, you’ll be able to become a proficient problem solver in the front-end development landscape. One effective way to become a great front-end developer is to simply build and solve as many challenges as one can.
Here are six challenges you can start solving today to become a master of front-end development. Without further ado, here are the six challenges you probably should code.1. Credit Card Form
A fantastic credit card form with smooth and sweet microinteractions. Includes number formatting, validation, and automatic card-type detection. It’s built with Vue.js and also fully responsive.
credit-card-form — https://github.com/muhammederdem/credit-card-form
A bar chart or bar graph is a chart or graph that presents categorical data with rectangular bars with heights or lengths proportional to the values they represent.
The bars can be plotted vertically or horizontally. A vertical barchart is sometimes called a line graph.
You can find the data for the world population by year here.3. GitHub Repositories With Search Functionality
Nothing out of the world here — GitHub repositories are basically just a glorified list.
The task is to display the repositories and allow the user to filter through the repositories. Use the official GitHub API to fetch repositories per user.
GitHub profile page — https://github.com/indreklasnWhat you’ll learn by solving the challenge
Back in 2016, Twitter introduced this awesome animation for their tweet likes. As of 2019, it still looks rad, so why not create one yourself?
Twitter tweet like animation
keyframesCSS attribute works
Chat rooms are a popular way of communicating thanks to being easy and fun to use. But what actually powers modern-day chat rooms? WebSockets!
admin, while others in the room have the role of
What’s unique about this navigation is the popover container morphs to fit the content. There’s an elegance to this transition versus the traditional behavior of opening and closing a new popover entirely.
activeclass for the element being hovered
Try doing it first yourself, but if you need help, check out this post for a step-by-step guide.Conclusion
Remember, there are no shortcuts when it comes to getting good at coding. Start putting the work in, and boost your coding skills by building as much as you can. If you didn’t find anything interesting, check the post below for even more ideas.
Thanks for reading — hope you found something interesting to code.
window.console or console object is under-rated with only
console.log() being used most of the time. However, the console object comes with a lot of advanced features.
In this article, we will be discussing the functions available on the console that can be handy at times.A deeper look into the console
Besides console.log(), there are a lot of other methods also available. You can try looking for the suggestions list in the browser’s console.console.log()
We can also concatenate multiple values using console.log(). Simply call console.log() with multiple parameters and all the values will be concatenated.
You can even pass multiple objects and the browser’s console will show them side by side.
Following are some of the examples of concatenation with console.log:console.table()
While console.log() can be used to print an object, we can also use console.table() to pretty print an object in the form of a table.
Just pass the object to print the object in a more readable format.
Notice, how it prints the values for the nested object.console.warn()
It is used to print warning messages in the browser’s console.console.error()
It is used to print error messages in the console.console.time()
This can be used to calculate the time elapsed by our code to execute.
Before starting the execution of any operation, start the timer with console.time(‘TIMER_NAME’) and after the execution of the code, end the timer with console.timeEnd(‘TIMER_NAME’).
As soon as you call the timeEnd function, the elapsed time will get printed in the console.
The timer name should be same for time() and timeEnd()
This command is used to clear the console.
Running the last command resulted in the console being cleared with the following message.
Thank you for reading !