This article was created in partnership with Manning Publications. Thank you for supporting the partners who make SitePoint possible.

You’ve heard of the principle of “survival of the fittest”, and you know that it’s especially true in web development. Your users expect split-second performance and bug-free interfaces — and if you can’t deliver them, you can be sure they’ll go straight to a competitor who can. But when it comes to survival, it’s important to remember the full principal of evolution: the best way to thrive is to be adaptable to change.

That’s where reactive programming comes in. Reactive applications are created to be adaptable to their environments by design. Right from the start, you’re building something made to react to load, react to failure, and react to your users. Whatever being deployed to production throws at your application, reactive programming will mean it can handle it.

How does reactive programming achieve this? It embeds sound programming principles into your application right from the very beginning.

Reactive Applications Are Message-driven

In reactive programming, data is pushed, not pulled. Rather than making requests of data that may or may not be available, client recipients await the arrival of messages with instructions only when data is ready. The designs of sender and recipient aren’t affected by how you propagate your messages, so you can design your system in isolation without needing to worry about how messages are transmitted. This also means that data recipients are only consuming resources when they’re active, rather than bogging down your application with requests for unavailable data.

Reactive Applications Are Elastic

Reactive applications are designed to elastically scale up or scale down, based on the amount of workload they have to deal with. A reactive system can both increase or decrease the resources it gives to its inputs, working without bottlenecks or contention points to more easily shard components and then distribute resources among them. Not only does this save you money on unused computing power, but even more importantly, it means that your application can easily service spikes in user activity.

Reactive Applications Are Responsive

Reactive applications must react to their users, and to their users' behavior. It’s essential that the system responds in a timely manner, not only for improved user experience, but so that problems can be quickly identified and (hopefully!) solved. With rapid response times and a consistent quality of service, you’ll find that your application has simpler error handling as well as much greater user confidence.

Reactive Applications Are Resilient

Reactive applications need to respond, adapt, and be flexible in the face of failure. Because a system can fail at any time, reactive applications are designed to boost resiliency through distribution. If there's a single point of failure, it’s just that — singular. The rest of your reactive application keeps running, because it’s been built to work without relying on any one part.

Further Resources

Reactive programming can be challenging to master. Fortunately, there’s lots of resources to help you out. Some of the best are the books and videos of Manning Publications, publishers of the highest quality tech books and videos you can buy today.

Exploring Modern Web Development is a 100% free guide to the most common tools for reactive programming. With this well-rounded sampler, you’ll have a firm foundation for developing awesome web apps with all the modern reactive features and functions today’s users expect.

SitePoint users can get 40% off top Manning reactive programming and web development books and videos with the coupon code NLSITEPOINT40. Check out popular bestsellers here.

The post It’s Time to Start Making Your Web Apps Reactive appeared first on SitePoint.

This article was created in partnership with Sencha. Thank you for supporting the partners who make SitePoint possible.

JavaScript application source code has traditionally been hard to understand, due to code being spread across JavaScript, HTML, and CSS files, as well as events and data flowing through a number of non intuitive paths. Like all software, the JavaScript development environment includes bundlers, package managers, version control systems, and test tools. Each of these requires some learning curve.

Inconsistencies and incompatibilities between browsers have historically required various tweaks and special cases to be sprinkled around the code, and very often fixing a bug in one browser breaks something on another browser. As a result, development teams struggle to create and maintain high quality, large-scale applications while the demand for what they do soars, especially at the enterprise-application level where business impact has replaced “How many lines of code have you laid down?”

To deal with this complexity, the open-source community as well as commercial companies have created various frameworks and libraries, but these frameworks and libraries have become ever more complicated as they add more and more features in an attempt to make it easier for the developer. Still, frameworks and libraries offer significant advantages to developers and can also organize and even reduce complexity.

This guide discusses some of the more popular frameworks and libraries that have been created to ease the burden of writing complex user interface (UI) code and how enterprise applications, especially data-intensive apps, can benefit from using these frameworks and UI components to deliver applications faster, with better quality, and yet stay within any development shop’s budget.

Complexity of Modern Web Development

Andrew S. Tanenbaum, the inventor of Minix (a precursor to Linux often used to bring up new computer chips and systems), once said¹, “The nice thing about standards is that you have so many to choose from.” Browsers followed a number of standards, but not all of them, and many just went their own way.

That’s where the trouble started — the so-called “Browser Wars.” How each browser displayed the data from these websites could be quite different. Browser incompatibilities still exist today, and one could say they are a little worse because the Web has gone mobile.

Developing in today’s world means being as compatible as possible with as many of the popular web browsers as possible, including mobile and tablet.

What about mobile?

Learning Android Java (Android) can be difficult if the developer hasn’t been brought up with Java. For Apple iOS, Objective C is a mashup of the C programming language and Smalltalk, which is different but not entirely alien to C++ developers. (After all, object-oriented concepts are similar.) But given the coming of (Apple) Swift and a new paradigm, “protocol-oriented programming,” Objective C has a questionable future.

In contrast, the JavaScript world, through techniques such as React Native or Progressive Web Apps, allows for development of cross-platform apps that look like native apps and are performant. From a business perspective, an enterprise can gain a number of advantages by only using one tool set to build sophisticated web and mobile apps.

Constant change causes consternation

The JavaScript world is particularly rich in how much functionality and how many packages are available. The number is staggering. The number of key technologies that help developers create applications faster is also large, but the rate of change in this field causes what’s called “JavaScript churn,” or just churn. For example, when Angular moved from version 1 to 2 (and again from 3 to 4), the incompatibilities required serious porting time. Until we embrace emerging Web Components standards, not everything will interoperate with everything else.

One thing that can be said is that investing in old technologies not backed by standards can be career-limiting, thus the importance of ECMA and ECMAScript standards as well as adherence to more or less common design patterns (most programming is still, even to this day, maintenance of existing code rather than fresh new starts and architectures). Using commonly used design patterns like Model-View-Controller (MVC), Model-View-Viewmodel (MVVM), and Flux means that your code can be modified and maintained more easily than if you invent an entirely new paradigm.

Having large ecosystems and using popular, robust, well-supported tools is one strategy proven year after year to yield positive results for the company and the developer’s career, and having industry-common or industry-standard libraries means that you can find teammates to help with the development and testing. Modern development methodologies practically demand the use of frameworks, reusable libraries, and well-designed APIs and components.

Popularity of Modern Frameworks and Libraries

Stack Overflow, an incredibly popular developers website used for questions and answers (#57 according to Alexa as of January 2019), tracks a great deal of data on the popularity of various technologies and has become a go-to source for developers. Their most recent survey continued to show the incredible popularity of both JavaScript and JavaScript libraries and frameworks:

NPM Downloads of Popular Frontend Libraries. (Source)

According to Stack Overflow, based on the type of tags assigned to questions, the top eight most discussed topics on the site are JavaScript, Java, C#, PHP, Android, Python, jQuery and HTML — not C, C++, or more exotic languages like Ocaml or Haskell. If you’re building websites, you’re very likely going to want to use technologies that are popular because the number of open-source and commercial/supported products provides you with the ability to code and test more quickly, resulting in faster time to market.

What this means to developers is that the JavaScript world continues to lead all others in the number of developers, and while older technologies like jQuery are still popular, clearly React and Angular are important and continue growing. The newcomer, Vue, is also becoming more and more popular.

Selecting Angular, React, or Vue

Angular versus React versus Vue — there are so many open-source tools. Add to that libraries like Backbone.js and a hundred others. How can developers update their knowledge of so many? Which one should they choose? To some extent this decision is choosing text editors: it’s a personal choice, it’s fiercely defended, and in the end each might actually work for you.

If your main concern is popularity so you don’t get boxed into learning a complicated, rich programming environment only to see support wither away, then React is clearly “winning” as the long-term trend line shows. But popularity is only one attribute in a long shopping list of important decision factors.

Long-term trend lines of various popular frameworks and libraries. (Source)

The post The Evolution of JavaScript Tooling: A Modern Developer’s Guide appeared first on SitePoint.

This sponsored article was created by our content partner, BAW Media. Thank you for supporting the partners who make SitePoint possible.

Image optimization is a big deal when it comes to website performance. You might be wondering if you’re covering all the bases by simply keeping file size in check. In fact, there’s a lot to consider if you truly want to optimize your site’s images.

Fortunately, there are image processing tools and content delivery networks (CDNs) available that can handle all the complexities of image optimization. Ultimately, these services can save you time and resources, while also covering more than one aspect of optimization.

In this article, we’ll take a look at the impact image optimization can have on site performance. We’ll also go over some standard approaches to the problem, and explore some more advanced image processing options. Let’s get started!

Why Skimping on Image Optimization Can Be a Performance Killer

If you decide not to optimize your images, you’re essentially tying a very heavy weight to all of your media elements. All that extra weight can drag your site down a lot. Fortunately, optimizing your images trims away the unnecessary data your images might be carrying around.

If you’re not sure how your website is currently performing, you can use an online tool to get an overview.

Once you have a better picture of what elements on your website are lagging or dragging you down, there are a number of ways you can tackle image optimization specifically, including:

• Choosing appropriate image formats. There are a number of image formats to choose from, and they each have their strengths and weaknesses. In general, it’s best to stick with JPEGs for photographic images. For graphic design elements, on the other hand, PNGs are typically superior to GIFs. Additionally, new image formats such as Google’s WebP have promising applications, which we’ll discuss in more detail later on.
• Maximizing compression type. When it comes to compression, the goal is to get each image to its smallest “weight” without losing too much quality. There are two kinds of compression that can do that: “lossy” and “lossless”. A lossy image will look similar to the original, but with some decrease in quality, whereas a lossless image is nearly indistinguishable from the original but also heavier.
• Designing with the image size in mind. If you’re working with images that need to display in a variety of sizes, it’s best to provide all the sizes you’ll need. If your site has to resize them on the fly, that can negatively impact speeds.
• Exploring delivery networks. CDNs can be a solution to more resource-heavy approaches for managing media files. A CDN can handle all of your image content, and respond to a variety of situations to deliver the best and most optimized files.

As with any technical solution, you’ll have to weigh the pros and cons of each approach. However, it’s also worth noting that these more traditional approaches aren’t the only options you have available to you.

4 Reasons to Use Image Processing for Optimizing Your Website’s Media

As we mentioned above, CDNs are one possible way to solve image performance conundrums on your website. One example of the services a CDN can provide is found in KeyCDN’s image processing.

This particular service is a real-time image processing and delivery option. This means it can detect how a user is viewing your site, and provide the optimal image type for that use case. Let’s look at four reasons this can be a very effective feature.

1. You Can Convert Your Images to Advanced Formats

We’ve already discussed how PNG and JPEG are the most common and recommended formats for graphic and photographic elements respectively. You might not know, however, that there’s a new file format available that might be beneficial when you’re looking to boost your site’s performance.

We’re talking about WebP, which is Google’s new, modern image file format.

The WebP logo. Source: WikiMedia Commons

The WebP format can work with both lossy and lossless compression, and supports transparency. Plus, the files themselves hold a lot of potential when it comes to optimization and performance.

This is because WebP lossless files are up to 26% smaller than PNGs of equivalent quality. In fact, KeyCDN did a study to compare just how much of an impact the WebP format can have. It found an overall 77 percent decrease in page size when converting from JPG to WebP.

Consequently, KeyCDN offers conversion to WebP. This feature uses lossless compression, and the most appropriate image can then be served up to each user based on browser specifications and compatibility.

In addition to conversion, there’s also a WebP Caching feature that offers a one-click solution for existing users. Without changing anything else, KeyCDN users can easily take advantage of WebP images via this option.

The post 4 Reasons to Use Image Processing to Optimize Website Media appeared first on SitePoint.

This sponsored article was created by our content partner, BAW Media. Thank you for supporting the partners who make SitePoint possible.

The start of a new year is always an exciting time. Everyone makes pledges to be better, to feel better, to do better. But like many New Years’ resolutions that quickly get tossed aside or forgotten, fad-like web design trends have a tendency to follow a similar path.

That’s because it’s easy to get wrapped up in what’s cool now instead of focusing on what we can do to make a website grow stronger with each passing day.

5 Web Design Trends That Have Real Staying Power

Have a look at BeTheme and its 500+ pre-built websites. These clean and classic designs have real staying power.

That’s because they’re centered around strong design principles. Not flashy color palettes, hip font choices, or technology your users aren’t ready for or don’t need. And that’s the key, right?

You’re building websites for the end user — not for yourself.

Spending your time using web design trends that will come and go is making barely any impact on your visitors. You can take advantage of these tried, tested, and long-lasting web design trends …

Trend #1: Remove the Excess and Create a Super Minimal Navigation

One of the awesome advantages of the Web moving towards a more mobile-first experience is that websites viewed on desktop have become simpler and easier to navigate, too.

With more consumers flocking to the Web on their smartphones, website menus have had to shrink in size. Not only in terms of the space they comprise, but also in the number of links.

In 2020 and onwards, websites will have only the most essential of pages in the primary menu. Secondary links will be relegated to areas like the footer and sidebar. Consequently, this will help to clean up on-page designs. They won’t be so littered with call-to-action buttons pointing to internal pages.

The BeRepair pre-built site is a beautiful example of this. With its navigation tucked away under a hamburger menu icon:

When opened, the pop-out menu follows the trend of less-is-more. It has a short and simple-to-navigate list of links surrounded by a bunch of white space:

Non-traditional navigations can also benefit from this form of minimalism. BeGarden demonstrates this with its left-aligned menu:

Trend #2: Bring Greater Focus to Your Message with White Space

Users are overloaded with content, offers, and other distractions every time they hit the Internet. Do you really want your website to be one more thing that causes them stress and, in turn, indecisiveness?

When you design with white space, it gets you out of the habit of trying to put as much information and as many options into a single section or page as possible. Instead, it encourages you to do more with less.

Concise messaging + Wide, open spaces = Good for your conversion rate.

Take, for instance, this brief but powerful video banner at the bottom of BeWine:

You can find other ways to let strong yet simple imagery tell your brand’s story, as the BeWeddingPlanner site does:

The post 5 Web Design Trends for 2020 with Real Staying Power appeared first on SitePoint.

This article was created in partnership with Print Peppermint. Thank you for supporting the partners who make SitePoint possible.

Everyone has a business card—is yours any different? Designing the ideal card for your business is a project that deserves real time and thought. For a fresh approach, consider Print Peppermint. Their in-house design services ensure your business cards will be absolutely custom and unique, and their high-end special finishes add a touch of class.

They’re not the new kids on the block. Over the last seven years, they’ve produced thousands of innovative print projects, and have attracted the business of industry-leading creative companies such as Vice, Google, Geico, Wendy’s. They’ve even printed circular die-cut business cards for Grammarly—one of our office-favorite web apps! They can hand-craft something unique for you, too.

You could get started with their Free Online Design Tool. It’s an easy-to-use online app that will help you design your own business cards, posters, flyers, invitations, and greeting cards from a blank canvas.

But you’ll get the best results if you leave the design work to the experts, and hire one of their in-house graphic designers. Give them as much input as you can—sketches, ideas, links to anything that inspires you—and they’ll bring it to life in a fresh, unique way. They can even design a logo for your business. Every single order is hand-proofed, no matter how large or small.

But what you put on your business card is just the start. Give some serious thought to the card itself.

First, the paper you print on can make a very tactile impression. Choose from a meticulously-curated family of thick and premium papers, including 100% Cotton, Soft-Touch, Triplex Layered, Clear-Frosted Plastic, Onyx Black Suede, Recycled Kraft, and many more.

Second, choose from a wide range of special finishes. They stand out and make a strong statement about your business. These include foil stamping, die-cutting, embossing, letterpress, edge painting, and more.

The ideal combination of design, paper, and finish creates a strong impression. Here are a few examples of what you can achieve.

A “letterpress finish” can be engaging, and debossing makes an impression, literally. Here’s blind debossing on thick, cotton paper.

By using clear plastic, your business cards will be as durable as credit cards. Frosted PVC makes a statement to your customers that you have high standards and care about quality.

Metallic foil stamped business cards have a premium look. Choose from 15 colors—here’s one in copper. You can even make photos metallic.

Raised foil feels more dramatic, similar to embossing. Here’s how it looks in gold on premium suede, soft-touch paper.

If you find rectangles boring, you can have your business cards die cut to absolutely any custom shape. Imagine the possibilities!

And even the edges of your cards can be custom painted.

The right business card ensures the perfect introduction to your business, so take your time deciding on a design. Possibly the best way to get inspiration is to order their $10 Sample Pack. You’ll be able to touch, smell and explore over twenty premium products and papers, and as a bonus you’ll get $25 off your order. That sounds like a good deal to me.

Another excellent source of inspiration is the company’s design blog. It’s filled with articles on topics like Graphic Design and Photography, but you’ll want to start in the Business Card Inspiration section. If you get stuck designing your own card, it can be really helpful to look at what other people have come up with. The blog contains over 200 articles that explore recently-completed business card projects.

How do you feel about your current business card now? If you’re ready for something new, all Print Peppermint products are supported with a 100% money-back quality guarantee. They offer amazing group-order discounts for businesses and organizations with multiple employees.

Armed with the right business card, all you need now is to perfect how to hand out your business card with style!

The post Leave an Impression with Print Peppermint’s Fresh Designs & Premium Paper appeared first on SitePoint.

This article was created in partnership with GoGetSSL. Thank you for supporting the partners who make SitePoint possible.

Over the last decade, the rate of cyber crime has risen sharply. Already, many reputable business organizations and government agencies that haven't implemented sufficient online security have been caught with their pants down. Google has started taking a strong stand against websites that don’t use HTTPS. Website visitors will be notified if they’re about to submit any information over an unsecured connection.

In this article, you’ll learn how to protect your customers and your business from privacy invasion and data theft. You’ll learn how to use SSL technology to secure your websites and your applications from leaking sensitive data to eavesdroppers.

I won't be able to show you how to install SSL, as that's an advanced topic. You can find more information on the installation process here.

How SSL Works in Plain English

Imagine you're in your hotel room, on your laptop, connected to the hotel's WIFI. You're about to log in to your bank's online portal. Meanwhile, a nefarious hacker has cleverly booked a room next to yours and has set up a simple workstation that listens to all network traffic in the hotel building. All traffic using the HTTP protocol can be seen by the hacker in plain text.

Assuming the bank's website is using only HTTP, form details such as user name and password will be seen by the hacker as soon you press submit. So how do we protect this data? The answer is obviously encryption. Encryption of data involves converting plain text data to something that looks garbled — aka encrypted data. To encrypt plain text data, you need what's called an encryption algorithm and a cipher key.

Let's say you were to encrypt the following data:

Come on over for hot dogs and soda!

It will look something like this in encrypted form:

wUwDPglyJu9LOnkBAf4vxSpQgQZltcz7LWwEquhdm5kSQIkQlZtfxtSTsmaw
q6gVH8SimlC3W6TDOhhL2FdgvdIC7sDv7G1Z7pCNzFLp0lgB9ACm8r5RZOBi
N5ske9cBVjlVfgmQ9VpFzSwzLLODhCU7/2THg2iDrW3NGQZfz3SSWviwCe7G
mNIvp5jEkGPCGcla4Fgdp/xuyewPk6NDlBewftLtHJVf
=PAb3

Decrypting the above message without the cipher key can take more than a lifetime using current computing power. No one can read it unless they have the cipher key that was used to encrypt it. This type of encryption is known as symmetric encryption. Now that we've figured out how to protect data, we need a safe way to transmit the cipher key to the recipient of the message safely. We can do this by using an asymmetric encryption system known as public key cryptography.

Public Key Cryptography uses a pair of mathematically related cipher keys:

• Public key: can be safely shared with anyone
• Private key: must never be transmitted, stored in secret

When one key is used to encrypt, the other one is used to decrypt. The same key can't be used to decrypt what it encrypted. Below is a depiction of how it works:

However, we can't trust any public key issued to us since they can be generated by anyone. To ensure authenticity of public keys, they need to be packaged in what's called an SSL certificate. This is a signed digital file that contains the following information:

• Subject's name: individual, organization or machine name
• Public Key
• Digital Signature (certificate's fingerprint)
• Issuer (the entity that signed the certificate)
• Valid dates (start and expiry)

I've only listed the necessities. SSL certificates usually contain more information. Here's a real-world example:

As you can see, the above certificate has been signed (see thumbnail section). A digital signature is simply an encrypted hash of a file. Let's first explain what a hash is. Say you have a 100-word document, and you run it through a hashing program. You'll get the following hash:

46798b5cfca45c46a84b7419f8b74735

If you change anything in the document, even if it's adding single full stop, a completely new hash will be generated when you run the hashing function again:

bc527343c7ffc103111f3a694b004e2f

A mismatch in the hash between the hash sent and the one generated means that the file has been altered. This is the first line of defense for ensuring that an SSL certificate hasn’t been altered. However, we need to verify that sent hash was created by the issuer of the certificate. This is done by encrypting the hash using the issuer's private key. When we perform a local hash of the certificate, then decrypt the certificate's signature to obtain the sent hash, we can compare the two. If there’s a match, it means:

• the certificate hasn’t been altered by someone else
• we have proof the certificate came from the issuer, since we've successfully decrypted the signature using their public key
• we can trust the authenticity of the public key attached in the SSL certificate.

Now, you may be wondering where we get the issuer's public key and why we should trust it. Well, the issuer's public key already comes pre-installed inside our operating systems and browsers. An issuer is a trusted certificate authority (CA) that signs certificates in compliance with the official CA/Browser Forum guidelines and NIST recommendations. For example, here’s a list of trusted issuers/CAs that you’ll find on Microsoft's Operating System. Even smartphones and tablets have a similar list pre-installed on the OS and browser.

According to a survey conducted by W3Techs on May 2018, the following issuers account for about 90% of valid certificates signed globally:

• IdenTrust
• Comodo
• DigiCert (acquired by Symantec)
• GoDaddy
• GlobalSign

Now that you have an understanding of encryption and SSL technology, it's best to go over how you can safely sign in to your bank's portal using HTTPS without the hacker next door reading your traffic.

1. Your laptop's browser starts by requesting the bank's servers for its SSL certificate.
2. The server sends it. Then the browser checks the certificate is authentic against a list of trusted CAs. It also checks that it hasn’t expired and hasn’t been revoked.
3. If everything checks out, the browser generates a new cipher key (also known as the session key). Using the public key found on the SSL certificate, it’s encrypted and then sent to the server.
4. The server decrypts the session key using its private key.
5. From now on, all communication sent back and forth will be encrypted using the session key. Symmetric encryption is faster than asymmetric.

This means both form data going from the laptop, and HTML data coming from the server, will be encrypted using a cipher key that the hacker won't have access to. All that will be seen in the captured traffic logs will be garbled letters and numbers. Your information has now been protected and kept private from prying eyes.

Now that you understand how SSL in general works, let's move on to the next section an look at the different types of SSL certificates we can use.

The post What SSL Is, and Which Certificate Type is Right for You appeared first on SitePoint.

This article was created in partnership with ipdata. Thank you for supporting the partners who make SitePoint possible.

Modern websites are becoming more and more effective at customizing content based on their visitors’ location. They can redirect users to a page in their own language, display prices in the local currency, pre-fill webforms with location information, and show the current time and date for the correct timezone.

ipdata is a low-latency API that provides website owners with a wide variety of information about their visitors based on IP address (IPv4 and IPv6). Think of it as an IP geolocation and threat intelligence API.

By using a visitor’s IP address you can learn their continent, country, region, city, latitude and longitude, organization or ISP, and timezone. The API also detects Proxy and Tor users, as well as known spammers and bad bots. Blocking these risks will protect your website, and reduce the need for security strategies like CAPTCHA.

Let’s look specifically at some ways ipdata can help, and how to implement them on your own website.

Redirect Visitors and Localize Content

When you visit the ipdata website you’ll immediately see what the service is capable of. Everything that can be learned from your own IP address is displayed.

That data includes:

• Whether you’re in the EU,
• Your city,
• State or region (and region code),
• Country (and country code),
• Continent (and continent code),
• Latitude and longitude,
• Postal or zip code,
• Country calling code,
• Your country’s flag emoji,
• Your service provider’s ASN and carrier information,
• Languages,
• Currency (name, code, symbol, plural),
• Time zone (name and abbreviation, offset, daylight savings time, current time),
• Threat information (Tor, Proxy, anonymous, known attacker, known abuser, threat, bogon).

You can call ipdata's API on each page request to geolocate your visitors and localize their content. Here’s a handful of ideas of what you can achieve:

• Restrict or block access to your content to specific countries or continents,
• Redirect users to country-specific (or language-specific) sites or pages,
• Pre-fill your webforms with their location data,
• Show your visitors their local time and weather,
• Display events that are near your visitors, or available flights in their area,
• Serve targeted ads based on location,
• Enforce GDPR compliance,
• Automatically convert prices on your e-commerce store to their local currency, using the correct currency symbol,
• More accurately analyze where your traffic is coming from.

You can get a client’s IP address using JavaScript, but it’s a bit of work. Instead, use ipdata’s API. It’s super-fast and reliable across all browsers. Here’s the code:

    $.get("https://api.ipdata.co?api-key=test", function(response) {
        console.log(response.ip);
    }, "jsonp");

Once you have a visitor’s API address, ipdata’s documentation shows you how to get their location in 26 different languages. You’ll also find detailed tutorials on how to code for a variety of use cases. Here are a few examples.

To block (or allow) users by country, look up the ISO 3166 ALPHA-2 Country Codes for the ones you want to blacklist or whitelist. Then follow this sample code to learn how to blacklist or whitelist them.

    // List of countries we want to block
    // To see this in action add your country code to the array
    var blacklist = ['US', 'CA', 'UK', 'IN']

    // Getting the country code from the user's IP
    $.get("https://api.ipdata.co?api-key=test", function (response) {

      // Checking if the user's country code is in the blacklist
      // You could inverse the logic here to use a whitelist instead
      if (blacklist.includes(response.country_code)) {
        alert('This content is not available at your location.');
      } else {
        alert("You're allowed to see this!")
      }
    }, "jsonp");

Redirecting users by country is useful if you have country-specific online stores, or if you have a separate page with content in their language or with country-specific contact details.

Here’s an example of how to redirect your visitors located in Germany and Australia. They will be redirected from https://uk.store.ipdata.co to https://de.store.ipdata.co and https://au.store.ipdata.co.

    // Getting the country code from the user's IP
    $.get("https://api.ipdata.co?api-key=test", function (response) {
      if (response.country_code == 'UK') {
        window.location.href = "https://uk.store.ipdata.co";
        } else if (response.country_code == 'DE') {
        window.location.href = "https://de.store.ipdata.co";
        } else if (response.country_code == 'AU') {
        window.location.href = "https://au.store.ipdata.co";
        }
    }, "jsonp");

You can also personalize the content of your site depending on the user’s location. Here’s an example that displays a special offer to UK visitors only:

    // Getting the country name from the user's IP
    $.get("https://api.ipdata.co?api-key=test", function (response) {
      if (response.country_code == 'UK') {
        alert("Special offer for all our users from " +response.country_name+ "!");
        }
    }, "jsonp");

Instead of targeting a whole country, you can drill down to region, city or postal code (zip code). Alternatively, you could target a time zone or specific currency.

You can further personalize your content by displaying the user’s local time (adjusted for DST) and local currency symbol. To request time zone data for IP address “3.3.3.3”:

    $ curl https://api.ipdata.co/3.3.3.3/time_zone?api-key=test

You’ll receive this response, which includes the name and abbreviation of the time zone, its UTC offset, whether it is currently DST, and the local time:

    {
        "name": "America/Los_Angeles",
        "abbr": "PDT",
        "offset": "-0700",
        "is_dst": true,
        "current_time": "2019-03-27T01:13:48.930025-07:00"
    }

Currency detection is similar. Here’s an example for the IP address “203.100.0.51”:

    curl https://api.ipdata.co/203.100.0.51/currency?api-key=test

And the response:

    {
        "name": "Australian Dollar",
        "code": "AUD",
        "symbol": "AU$",
        "native": "$",
        "plural": "Australian dollars"
    }

Protect Your Website from Threats

You can also use ipdata to identify potential threats against your website. They maintain a database of over 600 million malicious IP addresses, open proxies, Tor nodes, spammers, botnets, and attackers. These are aggregated only from high-quality, authoritative sources. You can use this information in a variety of ways:

• Protect your comments by blocking known spammers and bad bots, alleviating the need for CAPTCHA,
• Detect frauds by determining if their credit card is from a country different to where they are located,
• Block anonymous traffic to eliminate the risks that come from such networks,
• Block high-risk countries, such as the countries where most of your malware and attacks originate,
• Prevent “free trial abuse” by detecting Proxy and Tor users.

Here’s how to access the threat data for the IP address “103.76.180.54”:

    curl https://api.ipdata.co/103.76.180.54/threat?api-key=test

The request generates the following response:

    {
        "is_tor": true,
        "is_proxy": false,
        "is_anonymous": true,
        "is_known_attacker": false,
        "is_known_abuser": false,
        "is_threat": false,
        "is_bogon": false
    }

The visitor is using a Tor network. is_anonymous is true if the visitor is either a Tor or Proxy user. You can use ipdata to stop anonymous users creating an account. Here’s some sample code from the official documentation:

    // Getting the anonymity status from the user's IP
    $.get("https://api.ipdata.co?api-key=test", function (response) {
      if (response.threat.is_anonymous) {
        alert("You are not allowed to create an account.");
        }
    }, "jsonp");

You can get more specific, for example, by blocking Proxy users but letting Tor users through:

    // Getting the anonymity status from the user's IP
    $.get("https://api.ipdata.co?api-key=test", function (response) {
      if (response.threat.is_proxy) {
        alert("You are not allowed to create an account.");
        }
    }, "jsonp");

Some users are repeat offenders, having been repeatedly reported by admins of other websites for spam or malicious activity. You can stop them from creating an account by blocking them if one of these fields are true:

• is_known_abuser: IP addresses that have been reported to be sources of spam,
• is_known_attacker: IPs that have been reported to be the source of malicious activity.

Why Choose ipdata?

ipdata compares very favorably with other IP Geolocation APIs. It is written in Python 3 with an average execution time of 2.9 ms. It’s fast and reliable enough to keep a long list of clients happy, including Comcast, Redhat, Cooperpress, Sphero, AMD, and NASA.

ipdata is highly scalable, with low latency globally. The API serves millions of requests every day at an average speed of just ~65ms, and runs in eleven data centers around the world:

• 4 in the US,
• 1 in Canada,
• 2 in Europe (London and Frankfurt),
• 1 in India (Mumbai),
• 1 in South America (Sao Paulo),
• 1 in Europe (Seol), and
• 1 in Australia (Sydney).

According to Jonathan Kosgei, the Founder of ipdata, execution time is kept low by not doing any database reads or writes in the application code. “A separate authorizer function handles getting usage data from DynamoDB and authorizing users based on whether they’re within their quota or not. And its results are cached.”

Start Geolocating Your Visitors with ipdata

By now I’m sure you’ve thought of a dozen ways you can use ipdata to enhance and protect your website, or those of your clients. Sign up for free and start testing it!

The service is Jonathan Kosgei’s first SaaS, and he’s quite transparent about the smart way he set it up and the lessons he learned along the way. Learn from his experiences in his guest posts:

• How to build a SaaS with $0 (Hackernoon)—here he lists the free tiers of numerous products that enabled him to build the service without a large initial outlay,
• How ipdata uses AWS to serve a global, highly-scalable IP geolocation API (AWS Startups Blog)—goes into more detail with a focus on AWS,
• How Ipdata Serves 25M API Calls From 10 Infinitely Scalable Global Endpoints For $150 A Month (High Scalability)—details how he responded to a failure on Black Friday by choosing a new tech stack.

The post Use ipdata’s Geolocation Data to Protect & Customize Your Site appeared first on SitePoint.

This sponsored article was created by our content partner, BAW Media. Thank you for supporting the partners who make SitePoint possible.

There's no lack of tools and services out there that you could put to use to improve your products or your business. Also, to increase your productivity, or save you time and money.

It's quite the opposite in fact. There are so many that finding one or more that will satisfy your most urgent needs can be a problem in itself. Some of the tools you use or services you subscribe to today may have served you well, but there's no guarantee they will continue to do so.

The very nature of web design demands that you keep up with the latest trends to stay abreast or keep a step ahead of the competition. That often requires finding new tools or services that will enable you to do so.

We hope this list of top tools and services for 2020 will serve to help you stay on top of your game and increase your productivity as well.

The post 15 Easy-to-Use Tools & Services to Improve Your Workflow appeared first on SitePoint.

We've found ourselves with more kids at home, and not enough productive and educational activities to do while schools ramp up their online learning capabilities. So we took to our library to see what we could dig up to keep them engaged with learning, and us able to focus on doing our own remote work.

Are you also looking for a way to educate and entertain your kids while they're stuck at home?

We've put together a list of fun books that'll keep your kids occupied and teach them valuable skills at the same time!

Starting with…

The post Need to Edutain Your Kids While Distancing? Here Are Our Suggestions appeared first on SitePoint.

If you're a designer or developer, chances are you've made the shift to working from home in the past couple of weeks.

To help manage the change, we thought we'd share some of our best resources on working remotely — starting with some books …

Articles

Want access to our 400+ books and courses for just $3/month?

Join SitePoint Premium today and get access to all these books, PLUS over 400 other books and courses for just $3/month for your first three months! ($9/month thereafter, cancel anytime).

Get access now for just $3!

Need a Remote Job?

Search hundreds of remote jobs on SitePoint Remote, with over 20 new jobs posted each day!

Find a Remote Job Now!

Happy Learning!

The SitePoint Team

The post Make Working from Home Successful: Resources for Remote Teams appeared first on SitePoint.