Monday, 29 October 2018

Visual Studio Code for front-end developers | Visual Studio Code Can Do That?

Visual  studio code for newbie or a seasoned developer, code editor is an imperative part of your work. The problem, especially if you are a beginner, is that there are tons of choices for IDEs. And many of them share similar features, functionalities, and even UI. As a result, choosing the right IDE might actually take more time and effort that you thought.
If your question right now is: “which code editor should I start with?” then I would reply: “It depends, my friend.” Choosing a particular IDE significantly depends on a few factors: what type of developer you are, what kinds of environments you mostly work with, or whether you have an exclusive built-in feature that you absolutely need to get jobs done.
The main purpose of this blog is not to compare different IDEs, but to discuss my experience with VSCode. So in this post, I will:
  • show a brief introduction to VSCode
  • introduce the particular theme I’ve installed
  • discuss helpful extensions I use
  • show you how I leverage VSCode’s features to enhance my workflow.
Let’s get into it!
  • HTML Snippets: add rich language support for the HTML Markup such as auto-close tags.
  • JavaScript (ES6) code snippets: pretty self-explanatory
  • Live Server: launch a local server with live reload features for your HTML or PHP site
  • Markdown Preview Enhanced: run live server for your markdown file.
  • Material Icon Theme: provides icons based on Google’s Material Design. To activate, click Setting => File Icon Theme => Select Material Icon Theme
  • Prettier: beautifully format your JavaScript/ TypeScript/ CSS code.

Things I wish I’d known since the beginning

Apart from these themes and extensions, I would like to share with you how I use VSCode’s great features to boost productivity. These are all things that I didn’t know as a beginner, and that would’ve been very helpful for leveraging and facilitating my workflow.

Integrated Terminals

It is kind of inevitable that the more time you are in software development, the more important the Terminal becomes. As a JavaScript developer, I use the Terminal to install packages, run the development server, or even push changes in my current repository to GitHub.
VS code is light weight open source code editor. use it and enjoy it..

Sunday, 28 October 2018

Node npm ENOSELF error - installing a package in its package in branch RxJS package

I was facing issue while installing node packages,

Please review error  screenshot as well,





SOLUTION  : just rename package.json file with package1.json and start executing your package command.
To fix that, open your package.json file and change/rename the name of the project.

Error was faced during package installation  as below :
$ npm install rxjs webpack webpack-dev-server typescript ts-loader


try out with this:
$ npm install webpack webpack-dev-server typescript ts-loader

if you face same issue, just rename package.json file as per my comment and execute your package it will create automatically new package file.


Sunday, 19 August 2018

Switching from Google Maps to OpenStreetMap (Google map no more Free)

As you probably notice, Google Maps API started to be paid solution on July 16th, 2018. There is nothing wrong with it, we are paying for all features that are developed by the Google team. But what if you are an owner of the simple website and you just want to display a piece of the map with the location of your office? You can use OpenStreetMap.

Is it just that easy?

Below you can see the whole code required to create a map, position it, place a marker and create a popup with the office address.
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin=""/>
  5. <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>
  6. </head>
  7. <body>
  8. <div id="mapDiv" style="width: 800px; height: 500px"></div>
  9. <script>
  10. // position we will use later
  11. var lat = 40.73;
  12. var lon = -74.00;
  13. // initialize map
  14. map = L.map('mapDiv').setView([lat, lon], 13);
  15. // set map tiles source
  16. L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
  17. attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors',
  18. maxZoom: 18,
  19. }).addTo(map);
  20. // add marker to the map
  21. marker = L.marker([lat, lon]).addTo(map);
  22. // add popup to the marker
  23. marker.bindPopup("<b>ACME CO.</b><br />This st. 48<br />New York").openPopup();
  24. </script>
  25. </body>
  26. </html>
What have we done?
We used the Leaflet library to handle map displaying. In the example above, in the head section, I used the hosted version of the CSS and JS files, but you can download it on your server and host locally. In the body section, you can see the div element of id “mapDiv” which is configured to be 800 pixels wide and 500 pixels high.
The rest of the magic is simply placed in the script. At first, we are setting the latitude and longitude of the point we want to put the marker on (and this will be also the center of our map). Next, we are creating the map, which will be placed in our “mapDiv” element, centered on the position we have chosen and zoomed to level 13. You can change the zoom level to better fit your needs.
The important thing is the map source configuration. There are various map sources you can use, but in this example, I want to keep things straight so I simply configured OpenStreetMap tiles as the source. Please note that you have to keep copyright information in such a case.
We almost finished. Now we can place the marker on the map (on the latitude and longitude configured before). As the last step, we are placing the popup with the information about our company.

Is this really all I need?

This is the basic usage of Leaflet with OpenStreetMap. The Leaflet library, however, is much more powerful. You can draw on the map, place various objects, react to the events – you will find much more information in the Leaflet documentation.

Geolocation

The Leaflet library does not contain any functions to perform geolocation based on the address string. If you want to perform such operations, you should take a look at OpenStreetMap Nominatim API. It allows you to search using named locations (by street names, cities etc) and not named locations such as stores, pubs etc.

An alternative – static maps

There is also one more alternative worth mention. If you don’t want to deal with the JavaScript code and libraries, you can simply use static maps displayed as an image on your site. There is nice static map generator available.

Thursday, 5 July 2018

Websites That Pay you

















money online. You can also download our training package which will help you to grow your income very fast.