I’ve advocated for web components since before they became a spec, mostly inspired by the Dojo Toolkit’s dijit framework. Empowering first class JavaScript widgets, as opposed to a mess of DIVs and templates, always made the most sense. Now that web components exist, and awesome frameworks like Ionic are based on them, I wanted to discover how to detect a web component, as opposed to a regular HTML element, with JavaScript. As it turns out, it’s much easier than you’d think.

read more

Detecting geolocation information from your user provides you a massive advantage: improved conversion, better segmenting and analytics, and providing more relevant content. There are numerous paid services which will provide geolocation info but they’re oftentimes too costly or short of valuable information. I was super impressed with IP Geolocation API, a free geolocation API that provides extra details like languages spoken and currency code!

The URL format for IP Geolocation API is simple:

GET https://api.ipgeolocationapi.com/geolocate/91.213.103.0

The response payload look like:

{
   "continent":"North America",
   "address_format":"{{recipient}}\n{{street}}\n{{city}} {{region_short}} {{postalcode}}\n{{country}}",
   "alpha2":"US",
   "alpha3":"USA",
   "country_code":"1",
   "international_prefix":"011",
   "ioc":"USA",
   "gec":"US",
   "name":"United States of America",
   "national_destination_code_lengths":[  
      3
   ],
   "national_number_lengths":[  
      10
   ],
   "national_prefix":"1",
   "number":"840",
   "region":"Americas",
   "subregion":"Northern America",
   "world_region":"AMER",
   "un_locode":"US",
   "nationality":"American",
   "postal_code":true,
   "unofficial_names":[
      "United States",
      "Vereinigte Staaten von Amerika",
      "États-Unis",
      "Estados Unidos",
      "アメリカ合衆国",
      "Verenigde Staten"
   ],
   "languages_official":[
      "en"
   ],
   "languages_spoken":[  
      "en"
   ],
   "geo":{  
      "latitude":37.09024,
      "latitude_dec":"39.44325637817383",
      "longitude":-95.712891,
      "longitude_dec":"-98.95733642578125",
      "max_latitude":71.5388001,
      "max_longitude":-66.885417,
      "min_latitude":18.7763,
      "min_longitude":170.5957,
      "bounds":{  
         "northeast":{  
            "lat":71.5388001,
            "lng":-66.885417
         },
         "southwest":{  
            "lat":18.7763,
            "lng":170.5957
         }
      }
   },
   "currency_code":"USD",
   "start_of_week":"sunday"
}

read more

This year Wix launched a series of advanced SEO tools for Wix users to optimize their site pages for search engines and social media platforms. These tools include custom meta tags, canonical URLs, 301 redirects, structured data and rapid loading.

So what’s the deal?

To put their new SEO tools to the test they’re challenging Wix SEO Lovers and Haters to an SEO Battle for $25K. The challenge is open to agencies and consultants who will be chosen and judged by SEO and social media marketing expert, Lukasz Zelezny.

read more

Creating websites that are reactive and responsive used to be considered advanced but responsiveness is a necessity for successful websites and apps. We’ve added media queries, matchMedia, and a host of other APIs to help developers make responsiveness easier and now we get a new one: ResizeObserver. With the Resize Observer API, we can watch for resizing on individual elements!

read more

I’ve worked on dozens of eCommerce sites in my career and many of them were hamstrung by the same pain points: tax collection, payment customization, and image optimization. While tax collection and payment customization were important, image optimization was always the hardest and most important problem to solve: no one wants to buy a product whose imagery looked amateur. When you couple the need for good imagery with clients wanting to upload their own images…you have a real problem.

Instead of painfully explaining to clients how to take quality pictures, or even more painfully explain that there was no magic way to make their images look amazing, I wish I had Cloudinary’s newest feature: AI-backed image background removal. With AI-backed background removal, you can upload images to Cloudinary and let them do the hard work!

Uploading Photos

Cloudinary provides numerous methods for uploading photos: remote fetch, administration panel, or an API for which they provide helpers in a variety of programming languages and frameworks:

// npm install cloudinary
var cloudinary = require('cloudinary');

// Set your API information
cloudinary.config({
	cloud_name: 'david-walsh-blog',
	api_key: '############',
	api_secret: '############'
});

// Upload an image, 
cloudinary.uploader.upload('sample-photos/my-photo.jpg', function(result) {
    // Log out the result to get the URL of the image
    console.log(result);

    // Image url is: result.url / result.secure_url
}, {
    public_id: "my-photo",
    // Use preset to automatically remove background
    upload_preset: "remove_background",
    // ...or use the specific setting for it:
    background_removal: "cloudinary_ai"
});

read more