​An Introduction to Component IO

This article is part of an SEO series from Component IO. Thank you for supporting the partners who make SitePoint possible.

It doesn't matter what content management system you use — at some point, someone, somewhere will want to make a change which is beyond the technical limit of their control. Typical examples:

• changing your site's logo or header appearance
• updating the content of your standard page footer
• adding, removing or rearranging social media buttons
• re-configuring a contact form's fields or layout
• adding links to a navigation menu which are not part of the page hierarchy.

It's impossible to create a CMS with an easy-to-use interface which provides for every possible option users could ever want. (Well, you could, but it'd effectively be a code editor!) At some point, you'll need to make technical changes to your WordPress template, static site rendering, React components, Angular configuration or whatever system you're using. The process will typically involve:

1. Allocating developer time and resources. That could be a matter of contacting your development agency, discussing the options and agreeing a budget.
2. Adding new code, plug-ins or configurations to the existing templates as required.
3. Pushing the updates to a staging server.
4. Testing the new system thoroughly and ensuring it doesn't cause regression problems elsewhere.
5. Repeating the steps above if any errors or omissions are encountered.
6. Deploying the verified updates to your live server.

Even the smallest changes take time and money. Inevitably, a new request will arrive the minute the first update goes live.

The Component IO Approach

Component IO tackles the problem in a different way. Rather than taking a holistic, site-wide approach, the service provides a range of ready-to-use components which can be embedded into any website or application regardless of the implementation technology. Most developers will use the service to supplement existing CMS-based content. However, it is possible to create a multi-page site with minimal HTML and a series of embedded components which control everything.

Hundreds of components are available including:

• content blocks
• images and galleries
• navigation bars and menus
• social media integration
• overlays and modal dialogs
• carousels and sliders
• sign-up and contact forms
• buttons, tabs and form elements
• videos, maps and other embedded media.

Components are added to a page with a <component> block and any number can be used. A single </script> tag at the end of the page is then required to activate and control every component.

Once a component has been installed, developers and non-technical users can access the Component IO dashboard to make changes. They don't need to understand HTML, CSS and JavaScript or directly edit the page where the component is used. Updates are instantly available on the next refresh.

The benefits of Component IO include:

• there are hundreds of ready-made, attractive and configurable components to choose from
• component code can be installed with a simple cut and paste
• every CMS, framework and system is supported. If you can edit the HTML, you can add a component.
• it's easy for non-technical editors to use. They can make changes in a WYSIWYG editor and check it with a live preview
• developers can make changes to a component's HTML, CSS and JavaScript code in the dashboard if necessary
• all users can share Component IO dashboard links and collaborate on the same items
• Component IO is fast and delivers items quickly with a single API call regardless of the number embedded within the page
• a full help guide and real-time chat assistance is available
• a free trial account can be used to test the service on your system.

Example 1: Create a Content Block

A content block is one of the simplest and most-used components. First, create or switch to your project by clicking the shield icon at the top left.

Switch to the library tab at the top to view a list of several hundred components. Click the Content Block component to view a preview then hit the Add to your project button.

Continue reading %​An Introduction to Component IO%

by Craig Buckler via SitePoint

GreenSock for Beginners: a Web Animation Tutorial (Part 1)

My aim in this article is to give you a thorough introduction to GreenSock, also known as GSAP (GreenSock Animation Platform), a super performant, professional-grade HTML5 animation engine for the modern web.

This is the fourth article in the series Beyond CSS: Dynamic DOM Animation Libraries.

Here's what I covered in the past issues:

• Animating the DOM with Anime.js touches on how to make the best use of animation on the web and when you could consider using a JavaScript animation library instead of CSS-only animation. It then focuses on Anime.js, a free and lightweight JavaScript animation library
• Fun Animation Effects with KUTE.js introduces you to KUTE.js, a free and feature-rich JavaScript animation library
• Make Your Website Interactive and Fun with Velocity.js (No jQuery) shows you how to use Velocity.js, an open source, robust free animation library, to create performant web animations.

GSAP has too many features to fit in one article. This is why I've opted for a multi-part article all dedicated to various areas of the GreenSock library.

In more detail:

• By the end of this first part, you'll have learned about GreenSock's capabilities and features, licensing model, core components, and basic syntax to tween and stagger DOM elements
• In part 2, I'll introduce GreenSock's native timeline functionality
• Finally, part 3 will focus on some powerful bonus plugins GreenSock makes available to accomplish complex animation tasks easily with a few lines of code.

If you're already a GSAP Ninja, check out Animating Bootstrap Carousels with the GSAP Animation Library, where George Martsoukos illustrates an effective use of GreenSock for UI animation.

Without further ado, brace yourself, the journey is about to begin!

What is GreenSock and What Is It Good For?

GreenSock is the de facto industry-standard JavaScript animation platform available today.

It's a mature JavaScript library that has its roots in Flash-based animation. This means the guys behind GreenSock know web animation inside-out, the library has been around for a long time and is not going anywhere any time soon.

GSAP includes a comprehensive suite of tools, utilities, and plugins you can leverage to handle any web animation challenge you happen to face, from animating SVGs consistently across multiple browsers to coding complex animation sequences, dragging elements across the screen, splitting and scrambling text, and so much more.

To mention just three things I particularly love about GreenSock:

• Although the library is mega rich in terms of features, the learning curve is relatively shallow because it uses an intuitive and consistent syntax across all its various implementations and plugins. In addition, it offers awesome documentation, tutorials, and support via the GSAP Forums. Also, the library itself is continually updated and maintained. These are all crucial factors when building a project which relies on an external library for any of its key features and user experience
• It's modular and light-weight, which means it won't add bloat to your web projects
• Thanks to its powerful timeline functionality, GSAP affords precise control over the timings not only of single tweens, but also of multiple tweens as part of a whole animation flow.

Core GreenSock Tools

These are GreenSock's core modules:

• TweenLite — the foundation of GSAP, a lightweight and fast HTML5 animation library
• TweenMax — TweenLite's extension, which besides comprising TweenLite itself, includes:
  • TimelineLite
  • TimelineMax
  • CSSPlugin
  • AttrPlugin
  • RoundPropsPlugin
  • DirectionalRotationPlugin
  • BezierPlugin
  • EasePack
• TimelineLite — a lightweight timeline to take control of multiple tweens and/or other timelines
• TimelineMax — an enhanced version of TimelineLite, which offers additional, non essential capabilities like repeat, repeatDelay, yoyo, and more.

You can choose to include TweenLite in your project and then add other modules separately as you need them. Alternatively, you can choose to include TweenMax (the approach I'm going to take in this multi-part series), which packages all the core modules in one optimized file.

It's also worth noting that GSAP offers some paid extras like the DrawSVGPlugin to create animated line drawing effects with SVGs, the powerful MorphSVGPlugin to morph one SVG shape into another (even without requiring that the two shapes have the same number of points), and others. Although you need to be a paying member of the Club GreenSock to use these plugins, GSAP makes available to you for free a special CodePen-based version so that you can try them out. This is a cool offer I'm going to take full advantage of later on in part 3 (and you with me).

License

GSAP hasn't adopted a free open-source license like MIT largely for reasons that concern keeping the product's quality high and its maintenance financially sustainable over the long term.

GreenSock makes available two licenses:

• Standard License — use of the library is totally free in digital products that are free to use (even if developers get paid to build them)
• Business Green — this license includes three tiers with the middle tier, Shockingly Green, being the most popular. As a Shockingly Green member you'll gain access to all the bonus plugins and extras, but without the commercial license.

Despite the non-adherence to MIT and similar free use licenses, by letting you peek into its raw code both on the project's GitHub repo and in your downloads, GreenSock encourages you to learn from its developers' code and their mastery of JavaScript animation, which is one of the best features of the open source philosophy.

Tweening with GreenSock

Continue reading %GreenSock for Beginners: a Web Animation Tutorial (Part 1)%

by Maria Antonietta Perna via SitePoint

Flowen

Unique, interactive One Pager for "creative technologist" Rou Hun. I like how he demonstrates the out-the-box ideas he has within the page opposed to a clean portfolio.

by Rob Hope via One Page Love

4 Reasons to Use a CDN for WordPress

The Internet has a need for speed; that much everyone already knows. But why is this so important for your WordPress site, and why should you use a CDN for WordPress to help with your site's loading times?

You’ve probably seen the 3 second loading time chart many times. It, and countless charts just like it, are everywhere.

There’s a reason for that though - page loading time affects conversions. It's as simple as that. And what are most WordPress sites aimed at, ultimately? I know that my sites are all focused on somehow making money. Whether they’re affiliate sites or service-based websites, they’re all aimed at converting.

If loading times affect conversions, then a fixation on speed is a good thing!

Take a look at four reasons that you may want to use a CDN for WordPress sites that you build or manage.

1. Your Site Will Load Faster with a CDN

This is one of the strongest selling points of setting up a CDN for WordPress.

One of the biggest speed killers for your website is distance . Specifically, the distance between your hosting server and the visitor’s browser. Whilst the size of your page makes a real difference, the distance the content has to travel can definitely be the largest bottleneck in website loading speeds.

Ideally, your visitor needs to be as physically close to the hosting server as possible.

Unfortunately, setting up a hosting server at a location which is physically close to any one particular visitor is all but impossible -- unless you are setting up a CDN, that is.

The very idea of a Content Delivery Network (CDN) is exactly that. A CDN’s primary purpose is to set up as many servers as possible in different geographical locations, such that anybody who hits the service is as physically close as possible to one of the locations.

Have a look at the following image from Incapsula CDN (one of my preferred services) which explains the concept perfectly.

You can see that there are many CDN server points. In this manner, all visitors, in any location in the world, are always served content from a location which is (relatively speaking) near to them.

Hosting static content on a CDN network is the closest you can get to creating a global hosting setup for your website.

2. Your Website Will be Safer with a CDN

The next reason why a CDN is essential for your website is security.

Did you know that more than 51% of the web’s traffic actually comes from bots rather than humans?

When I first saw this report, I was completely taken aback:

The even scarier statistic from the above is that 29% of web traffic comes from malicious bots.

That means your website is constantly under a deluge of bad bot traffic. If you've ever taken a look at analytics data, or used a security plugin like WordFence, you're already aware of this fact.

These bots are constantly probing your site for vulnerabilities. If you slip slightly in your security efforts, if you have not chosen a good WordPress host, or if you miss a WordPress security update or a plugin update, rest assured your site will soon be suffering the consequences.

Most CDNs are able to identify and block bad bots rapidly, making your site safer when plugged into a CDN. The collective knowledge gained by the network can be used to prevent attacks on your own sites.

Continue reading %4 Reasons to Use a CDN for WordPress%

by David Attard via SitePoint

Adding Physics-Based Animations to Android Apps

Poka Yoke – Saving Projects with Hyper-Defensive Programming

When working in a medium to large team on the same codebase, it can sometimes become hard to understand each other's code and how to use it. Various solutions exist to help with this. For example, you can agree to follow a set of coding standards to make the code more readable for each other, or use a framework that's known to all (we've got a great Laravel intro premium course here).

However, this is often not enough, especially when someone has to dig back into a part of the application written some time ago to fix a bug or add a new feature. It can be quite hard to remember how particular classes were intended to work, both on their own and in combination with each other. At that point, it becomes easy to accidentally introduce side effects or bugs without realizing it.

These mistakes might get caught in quality assurance, but there's a realistic chance they might slip through. And even if they get caught, it can take a lot of time to send the code back and get it fixed.

So how can we prevent this? Enter "Poka Yoke".

What is Poka Yoke?

Poka Yoke is a Japanese term which roughly translates to "mistake-proofing". The term
originated in lean manufacturing, where it refers to any mechanism that helps a machine operator avoid mistakes.

Outside of manufacturing, Poka Yoke is also often used in consumer electronics. Take, for example, a SIM card, which can only fit one way a sim tray because of its asymmetrical shape.

An example of hardware lacking in Poka Yoke is the PS/2 port, which has exactly the same shape for a keyboard connector and a mouse connector. They can only be differentiated by using color codes, so it is easy to accidentally switch the connectors and insert them in the wrong ports because they both fit the same way.

Besides being used in hardware, the concepts of Poka Yoke can also be applied to programming. The idea is to make the public interfaces of our code as easy as possible to understand, and to raise errors as soon as our code is being used incorrectly. This might seem obvious, but in reality we often come across code that is lacking in these regards.

Note however, that Poka Yoke is not meant to prevent intentional abuse. The goal is only to prevent accidental mistakes, not to secure your code against malicious usage. As long as someone has access to your code, they will always be able to get around your safeguards if they really want to.

Before discussing what specific measures you can take to make your code more mistake-proof, it is important to know that Poka Yoke mechanisms can generally be divided into two categories:

• Mistake prevention
• Mistake detection

Mistake prevention techniques are helpful for catching mistakes early on. They are meant to make sure no one can accidentally use our code incorrectly, by making the interfaces and behavior as straightforward as possible. Think of the example of the SIM card, which can only fit one way in a SIM tray.

Mistake detection mechanisms, on the other hand, live outside of our code. They monitor our applications to watch for potential mistakes and warn us about them. An example can be software that detects whether a device connected to a PS/2 port is of the correct type, and if not show a warning to the user clarifying why it doesn't work. This particular software could not prevent a mistake, because the connectors are interchangeable when plugging them in, but it can detect one and warn us about it so the mistake can be fixed.

In the rest of this article we will explore several methods we can use to implement both mistake prevention and mistake detection in our applications. But keep in mind that this list is just a starting point. Depending on your specific application, additional measures might be possible to make your code more mistake-proof. Also, it's important to keep the upfront cost of Poka Yoke in mind and make sure it's worth it for your specific project. Depending on the complexity and size of your application, some measures may be too costly compared to the potential cost of mistakes. So it is up to you and your team to decide which measures are best for you to take.

Mistake prevention examples

(Scalar) type declarations

Previously known as type hints in PHP 5, type declarations are an easy way to start mistake-proofing your function and method signatures in PHP 7.

By assigning specific types to your function arguments, it becomes harder to mix up the order of arguments when calling the function.

For example, let's take this Notification that we might want to send to a user:

<?php

class Notification {
    private $userId;
    private $subject;
    private $message;

    public function __construct(
        $userId,
        $subject, 
        $message
    ) {
        $this->userId = $userId;
        $this->subject = $subject;
        $this->message = $message;
    }

    public function getUserId()
    {
        return $this->userId;
    }

    public function getSubject()
    {
        return $this->subject;
    }

    public function getMessage()
    {
        return $this->message;
    }
}

Without type declarations, we can easily inject the incorrect types of variables which would probably break our application. For example, we could assume that the $userId should be a string, while it might actually have to be an int.

If we injected the wrong type, the error would probably go undetected until the application tries to actually do something with the Notification. By then, we'd probably get some cryptic error message about an unexpected type, but nothing that immediately points to our code where we inject a string instead of an int.

Because of this, it is often more interesting to force the application to crash as soon as possible, so that bugs like these get caught early on during development.

In this case, we could simply add some type declarations and PHP will stop and warn us immediately with a fatal error when we mix up the types of our arguments:

<?php

declare(strict_types=1);

class Notification {
    private $userId;
    private $subject;
    private $message;

    public function __construct(
        int $userId,
        string $subject, 
        string $message
    ) {
        $this->userId = $userId;
        $this->subject = $subject;
        $this->message = $message;
    }

    public function getUserId() : int
    {
        return $this->userId;
    }

    public function getSubject() : string
    {
        return $this->subject;
    }

    public function getMessage() : string
    {
        return $this->message;
    }
}

Note however that, by default, PHP will try to coerce incorrect arguments to their expected types. To prevent this, it is important that we enable strict_types so we actually get a fatal error when a mistake is made. Because of this, scalar type declarations are not an ideal form of Poka Yoke, but they're a good start to reducing mistakes. Even with strict_types disabled, they can still serve as an indication of what type is expected for an argument.

Continue reading %Poka Yoke – Saving Projects with Hyper-Defensive Programming%

by Bert Ramakers via SitePoint

Fonts and Colors Used by Facebook, Twitter, Google+ and More

It's handy to have a collection of brand assets used by social networks, so you can correctly incorporate those assets into your own designs. Designers often need to know the fonts and colors used by popular social networks such as Facebook, Twitter and Google+, as this information can be used to design more recognizable social login buttons and icon-links to social channels.

Let's take a look at the various fonts and colors (I'll display both the Hex and RGB color codes) used by Facebook, Twitter, Google+, Pinterest, Snapchat, Instagram, LinkedIn and Facebook Messenger.

Facebook

Facebook Font

• Windows: Segoe UI (or Tahoma for older versions of Windows)
• macOS: San Fransisco
• iOS: San Fransisco
• Android: Roboto

Facebook uses Segoe UI for the Windows version of their desktop website, and the Apple-made San Fransisco font for the macOS version. It used to be Lucida Grande, but in recent years Facebook have tried to use default system fonts, which is why they use Roboto on Android and, again, San Fransisco on iOS. Lucida Grande and Helvetica Neue are no longer used.

Facebook Hex/RGB Color

• Hex: #3B5998
• RGB: rgb(59, 89, 152)

You can view the entire Facebook Color Palette here — despite this resource being 5 years old now, the colors haven't changed — but for quick reference, the main Facebook Blue color is #3B5998 in Hex, and rgb(59, 89, 152) in RGB.

You can find out more detailed information about Facebook's Branding Guidelines here.

Twitter

Twitter Font

• Windows: Helvetica Neue
• macOS: Helvetica Neue
• iOS: San Fransisco
• Android: Roboto

While Twitter has also defaulted to system fonts for their mobile apps (as most social networks do), using the San Fransisco font for both iOS and Android, the desktop versions of the website use Helvetica Neue.

Remember when Twitter randomly switched to Gotham Narrow, then switched back again shortly after, because nobody liked it?

Twitter Hex/RGB Color

• Hex: #1DA1F2
• RGB: rgb(29, 161, 242)

Paired with variants of Twitter Grey (which contains blue, black and white tones), Twitter uses a bright blue hue as its primary brand color. You can find out more about Twitter's Brand Guidelines here.

Google+

Google+ Font

Google uses Roboto everywhere — it's the standard font for every single Google app and service, including Android, Google Maps, Google Translate…you name it. In fact, the only case-scenario where I don't think they use the Roboto font is Google.com!

Roboto and the colors used in various Google apps encompasses what Google calls the Material Design language.

Google+ Hex/RGB Color

• Hex: #DB4437
• RGB: rgb(219, 68, 55)

Google+ Plus once used a combination of bright colors for their logo (roughly the same colours as the well-known Google Chrome logo), but nowadays they'd rather use what they call Google+ Red, which is #DB4437 in Hex and rgb(219, 68, 55) in RGB. That being said, Google+ does< .em> still use those other colors (but not so much the yellow) for their website. Here they are:

• Google+ Red: #DB4437 — rgb(219, 68, 55)
• Google+ Green: #0F9D58 — rgb(0, 128, 0)
• Google+ Blue: #2962FF — rgb(41, 98, 255)

Read more about the Google Brand Guidelines here.

Pinterest

Pinterest Font

• Windows: Helvetica Neue
• macOS: Helvetica Neue
• iOS: San Fransisco
• Android: Roboto

Fun fact: while Pinterest uses roughly the same fonts that are standard with other social networks, Pinterest uses the Hiragino font for Japanese and other oriental languages, which reads better in comparison to the fonts used with Roman languages.

You can read more about Pinterest's Brand Guidelines here.

Pinterest Hex/RGB Color

• Hex: #BD081C
• RGB: rgb(189, 8, 28)

Pinterest's classic red hex color has never changed!

Snapchat

Snapchat Font

• Windows: Avenir Next
• macOS: Avenir Next
• iOS: Helvetica Neue
• Android: Roboto

Strangely enough, the font used on the desktop web version of Snapchat is a little different to most social networks, as most tend to revert to whatever the default system font is, as mentioned earlier. Snapchat, however, uses Avenir Next.

Continue reading %Fonts and Colors Used by Facebook, Twitter, Google+ and More%

by Daniel Schwarz via SitePoint