Animated keyboards using Facebook Keyframes

Animated themes available on SwiftKey iOS

I’ve always had a passion for animation. It can give users a sense of delight, help communicate a message, and when done right — guide a user smoothly through your product.

Before getting into product design, I worked for Disney creating animated components for a flash based game. This allowed me to learn a lot about animation, and how to create something that could go straight into a commercial product without too many problems. During that time I remember being intrigued by the subtle animations on my first iPhone, but it wasn’t until I started working on Android and iOS that I realised that UI and motion design wasn’t so straightforward on mobile. Currently, I design an animation and then a software engineer has to pretty much build it from scratch; by looking at a video clip, or from me explaining it to them. The process is not as straightforward compared to that of the gaming industry.

So, for this reason, I was particularly pleased to see the Facebook developers release a library called Keyframes, which exports After Effects animations to a format that can be used on iOS and Android. This means that as a designer I can create an animation and export it to go straight into the product, avoiding the need to implement it separately. The quality is great and the memory use is surprisingly low, which means we can use it in our keyboard — particularly good news when we have to be so careful with memory limits on iOS.

For a long time there has not been an easy way to achieve these animations in native mobile apps, so it’s great to see Facebook open-sourcing a tool like this. We’ve used this in a few places already in our app, so I wanted to see if we could use Keyframes to make some animated themes.

 

First of all it’s worth noting that Keyframes only supports a few After Effects features, and while Facebook have been busy increasing its capabilities, I think its essential to understand the design constraints before jumping into the new animated themes.

The engineers helped me to get an Xcode project working, which allowed me to preview the animations on my iPhone as well as being able to add and edit shadows. After many design iterations, I was finally happy with 2 concepts that both use set of simple shapes — cogs, and a zigzag effect. Both themes have a similar feel; the shapes interact with each other but never intersect.


I’m now going to take you through how we designed and built these themes using Keyframes.

1) Use Illustrator to organise your layers

It’s best to create the design in Illustrator (sometimes I’ll export from Sketch as an SVG and import to Illustrator), making sure that each path is on it’s own layer. This is important because if there are multiple paths on a layer then they won’t appear in Keyframes.

Tip: there is a handy ‘distribute to layers’ feature in Illustrator that you’ll find in the overflow menu in the layers window. For this design there are only 4 layers, but for a few other animations there are numerous.

1 path per layer

2) Create an After Effects project and import the .ai file

Once you’ve organised your layers in Illustrator, save the .ai file and drag it straight into the project window in After Effects. It’ll show you an import prompt, you need to select ‘composition’, which means that the layers you created in Illustrator will stay intact. Open the composition and you’ll see the layers have a little Illustrator icon next to them. Select these layers, then right click and select ‘Create Shapes from Vector Layer’.

Convert to shape layers. Right click — Create Shapes from Vector Layer

3) Animate the shape layers

You only need the shape layers with the little star icon next to them, so you can go ahead and delete the duplicates. At this point you can animate the layers in any way you want (within the Keyframes guidelines). In the case of the cogs theme, I used various rotations and created a couple of parent null layers for each of the cogs. I could then use the parent layers to animate the position of each of the cogs along a path. I also edited the motion curves to make the movement feel much more natural — just open up the ‘Graph Editor’ to tweak each point.

Animate shape layers and edit the motion curves in the ‘Graph Editor’

4) Use the FB Keyframes Exporter

From After Effects use the Keyframes exporter tool, this will export a JSON file that can then be used in either iOS or Android. Download the master folder here and in there you’ll find a folder called ‘scripts’.
Copy this folder into your After Effects scripts folder. Restart the app, and you should be able to access it from File — Scripts — FB Keyframes Exporter.
Before exporting, go into the After Effects preferences and enable ‘Allow Scripts to Write Files and Access Network’ in the General tab.
Hit ‘Export’ and you’ll find the JSON file in the same folder where you saved your After Effects project.

5) Getting it working on Android and iOS

Luckily the latest exporter tool has an Android previewer, which makes it really easy to see your animations working on Android — you just install it from the exporter tool with your phone plugged in. If you want to see it working natively on iOS, you’ll need to download and open the Xcode master project and open the master file (Keyframes-master/ios/keyframes-sample-ios/objc). I had a lot of help from our engineers, but it isn’t too difficult to get it working if you don’t change too many things.

For the sake of testing, it’s easiest if you export your animation as a square composition, that way you don’t need to change the size in Xcode. This is because the xcode project is set up to show a square sample logo. In the ‘Project navigator’ (the folder icon) add your JSON file to ‘Supporting Files’ by dragging it in. Then click on the ‘ViewController’ and change the name of the file in the code. For the themes it was at this point that I added shadows to specific layers in the code.

Set the ‘active scheme’ to ‘keyframes-sample-ios’ and hit the play icon in the top left, with any luck this will build the app on the simulator and you’ll see the animation. I realise that this step is a very brief explanation, but it works!


To see these designs for yourself, you can get the keyboard themes on SwiftKey iOS now. Overall this library provides yet another tool that closes the gap between design and development, and we’ll continue to use it in SwiftKey. If you’re a product designer, I’d encourage you to try it out.

Below are a few more examples of keyframe animations in our app.

 

Micro-animations in SwiftKey iOS

 

Keyframe animations in SwiftKey iOS

CSS variables without any preposser

CSS variables, like variables in any programming language, let us reference the same values over and over. As of April 2017, they are supported by all modern browsers and are an effective way to write tight, clean styles.

I’ll be walking through the basics of CSS variables, how they are different from Sass variables, and how to provide legacy support.

 

Usage

Any CSS property — color, size, position, etc. — can be stored in a CSS variable. Their names are all prefixed with --, and you declare them by adding them to an element right where you add its other styles:

You refer to a CSS variable by wrapping it in var().

If you look at this CSS in your web inspector, you’ll see that these variables are not being aliased or transpiled in any way — your browser will tell you that an a‘s color is --primary, not the hex value itself.

When you use a CSS variable, you can also pass in an optional default value:

This default value will be used if the CSS variable is not defined or available in the current scope.

 

Scoping and the cascade

CSS variables act like a normal style property; a variable is available anywhere down the cascade.

For example, these variables can be used by anything on the entire page:

 

And these will only be defined within elements with a certain class:

 

In this second example, if you try to use --primary outside of a .content element, the page will still render but that style will not be applied.

The Paradigm: custom CSS properties

You may have noticed a theme so far, which is that variables act just like other CSS properties. You declare variables where you set properties, they cascade in the same way, and so on.

This is because CSS variables are actually nothing more than custom properties. The only difference between --primary and position is that position always means something specific and directly affects rendering, whereas --primary does nothing until it is explicitly used.

CSS variables being supported by a browser means that the browser allows the user to set arbitrary, namespaced CSS properties. This is really exciting. Just like how it’s exciting that media queries let us get away from resize listeners in JavaScript, CSS variables are opening the door to a future that relies less on JS and preprocessors. Speaking of which…

Better than Sass: theming

CSS variables aren’t analogous to Sass variables, and in some ways, the former are vastly preferable to the latter. One of these situations is when you’re looking to swap out themes. On my personal site, I randomly theme the page each time it is loaded; the user can end up with any of nine color schemes.

This is easily done using Sass. Store your color combinations in Sass maps, loop over them, and you can quickly create a bunch of classes that you can apply to the page:

 

The CSS is easy to generate, but in the case of nine variations, you end up with eight classes’ worth of styling that remains unused.

CSS variables can achieve the same effect with no “extra” CSS. In this case, instead of using JavaScript to add a class to the page, you can use it to set specific CSS variables:

These changes are picked up by every element in the cascade that uses that variable. Your styles stay cleaner and you don’t have to go through the middleman of applying classes.

Better than Sass: media queries

In Sass, redefining variables within media queries is something that you Just Can’t Do. For instance, maybe you want to swap link colors when you get to a breakpoint. You may be tempted to redeclare the variables themselves inside of the media query:

 

This, sadly, doesn’t work in Sass, since Sass is a preprocessor and can’t know anything about the conditions under which its output is used.

This pattern can be used with CSS variables, though:

 

This works with CSS variables because all change is happening in-browser, and the variables do know about the conditions under which they are being used.


This said, I ❤️ Sass and a combination of these tools is way more powerful than each is individually. In fact, I have a great lil mixin further down the page that leverages Sass for declaring CSS variable fallbacks.

Browser support

CSS variables have been in Firefox since 2014, in Chrome + Safari since March 2016, and just landed in Edge April 2017! 🎉 (Source: CanIUse.) So the good news is that they’re quite safe; the bad news is that you will need fallbacks for Edge 14- and, naturally, all of IE.

Providing fallbacks

Luckily, the way to provide these fallback styles is the way we have been doing it since time immemorial:

 

Declare your fallback first and your desired value second, and browsers that support your preferred property will use it. Browsers that don’t, such as IE 11, will still render something acceptable using your fallback value.

Easier fallbacks with Sass

If you’re using Sass, you can automate fallbacks through a Sass mixin. Create a map of your CSS variable names and their values, and then you can look up those values in a mixin that outputs the fallback style and the preferred one.

 

The above mixin is used like so:

 

and outputs the following CSS:

 

This way, if you change --primary or its fallback, you only need to edit the $vars map and your styles everywhere will update.

Please note that you still need to declare your CSS variables somewhere. If you want all of your variables to be available everywhere, you can use more cool Sass to automatically add all the ones in your map to body or html ✨f you still haven’t had enough of CSS variables, check out

If you still haven’t had enough of CSS variables, check out this Google Developers blog post. They do a great job of sticking to the “CSS variables are custom properties” paradigm.

Now go forth and style!

Get first missing number in a sequence in an array in php

Use this function to get first missing sequence in an array

 

 

DATABASE SEARCH AND REPLACE SCRIPT IN PHP outside wordpress

searchreplacedb21
search-replace-db-master

Database Importing error : utf8mb4_unicode_520_ci

find this
ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_520_ci;

and change
ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_general_ci;

WP Rest API .htaccess settings

To fix “rest_user_cannot_view” error messsage in JWT Authentication for WP REST API

or to fix WP REST API RESPONSE

 

 

How to setup cron jobs in wordpress using right method?

Cron job is use for reminder related functionalities

Add this code in your wp-config.php

Add this this your cpanel command

Important part is url. You should set url in cron setup with ?doing_wp_cron
Suppose your url is http://yourdomain.com, then wordpress cron will be

http://yourdomain.com/wp-cron.php?doing_wp_cron

Add Pure Javascript Ajax in wordpress with preloader

<style type=”text/css”>
.rj_form{
position:relative;
}
.rj_form_preloader{
display:none;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255,255,255,0.7);
text-align: center;
vertical-align: middle;
}
.rj_form_preloader span{

position: absolute;
top: 50%;
transform: translateY(-50%);
}
.rj_form[data-form-status=”submiting”]{

}
.rj_form[data-form-status=”submiting”] .rj_form_preloader{

display:block;
}
.rj_form[data-form-status=”submitted”] .rj_form_preloader{
display:none;
}
</style>
<script type=”text/javascript”>
var form = document.querySelector(‘.exam_questions_form’);
form.addEventListener(‘submit’,function(ev){
ev.preventDefault();
form.setAttribute(‘data-form-status’,’submiting’);
var formData = new FormData(form);

var r = new XMLHttpRequest();
r.open(“POST”, “<?php echo admin_url(‘admin-ajax.php’); ?>”, true);
r.onreadystatechange = function () {
if (r.readyState != 4 || r.status != 200) return;

form.setAttribute(‘data-form-status’,’submitted’);
console.log(r.responseText);
};
r.send(formData);
return false;
});

</script>

Add above code in your index.php file

<?php
add_action( ‘wp_ajax_get_course_result’, ‘my_action_callback’ );
add_action( ‘wp_ajax_nopriv_get_course_result’, ‘my_action_callback’ );
function my_action_callback(){
echo 1;
die(0);
}

Add above code in your functions.php file.

 

How to write AJAX using pure Javascript


var form = document.querySelector('.exam_questions_form');
form.addEventListener('submit',function(ev){
ev.preventDefault();
var formData = new FormData(form);

var r = new XMLHttpRequest();
r.open(“POST”, “path/to/api”, true);
r.onreadystatechange = function () {
if (r.readyState != 4 || r.status != 200) return;
alert(“Success: ” + r.responseText);
};
r.send(formData);
return false;
});
In WordPress

add_action( 'wp_ajax_my_action', 'my_action_callback' );
add_action( 'wp_ajax_nopriv_my_action', 'my_action_callback' );
function my_action_callback(){
echo 1;
die(0);
}

Admin URL in wordpress

<?php echo admin_url(‘admin-ajax.php’); ?>

How to pass variables in included files in wordpress

include(locate_template('your-template-name.php'));