Sometimes you want to add your own avatar for a user or build your own special predefined avatar selection :)
BuddyPress stores avatars in /wp-content/uploads/avatars/ – USERID – /
BuddyPress hashes the original filename and stores full and thumbnail images in the above directory.
|
1 2 3 |
$full_filename = wp_hash( "ORIGINAL-FILENAME" . time() ) . '-bpfull.' . $FILE_EXTENSION; $thumb_filename = wp_hash( "ORIGINAL-FILENAME" . time() ) . '-bpthumb.' . $FILE_EXTENSION; |
Now go ahead and build your own integration around that ;)
I started adding a standard preface to emails from clients asking to work with me. So here it is, for potential new clients, that think about working with me :)
Anything else about me can be read here:
http://www.portalzine.de/services/
http://www.portalzine.de/services/about-alex/
http://www.portalzine.de/services/portfolio/
If you made it so far and you still would like to work with me, we can move to step 2 :)
OS Boxes is a one stop website for all you virtual machine enthusiasts & developers. They provide images for VMWare & Virtualbox.
They offer images for a huge list of Linux distributions and Android X86.
Finally took the time to fine tune my Android Emulator setup, to do some easy browser testing :)
Will be doing an article about browser testing on a local machine soon.
Online browser testing platforms are all nice, but often too expensive for a single developer.
With the ARM translation working, Chrome finally stopped crashing on Android X86 :)
Sadly IE8 is still a browser we need to build for. Sometimes loading a set of local webfonts can break the whole website, as needed resources are not being loaded or timeout.
Best way is to split IE8 webfonts loading from other browsers, by using conditionals:
|
1 2 3 4 5 6 |
<!--[if lt IE 9]> <link rel="stylesheet" href="fonts.ie.css" type="text/css" media="screen" /> <![endif]--> <!--[if gte IE 9]><!--> <link rel="stylesheet" href="fonts.css" type="text/css" media="screen" /> <!--<![endif]--> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
@font-face { font-family: 'Black'; src: url('black-webfont.eot'); } @font-face { font-family: 'Regular'; src: url('regular-webfont.eot'); } @font-face { font-family: 'Bold'; src: url('bold-webfont.woff.eot'); } |
Only loading the required .EOT files.
Preferences > Advanced > Show Developer menu in menu bar.|
1 2 3 4 5 |
@font-face { font-family: 'YourFont'; src: url('yourfont.eot'); src: url('yourfont.eot?#iefix') format('embedded-opentype'), url('yourfont.woff') format('woff'), url('yourfont.ttf') format('truetype'), url('yourfont.otf') format('opentype'), url('yourfont.svg#YourFont') format('svg'); } |
These are added within a <style> section in the header. This works all nicely in most modern email clients, but Outlook does not load webfonts and falls back to Times New Roman, which might not always be desired.
|
1 2 3 |
[style*="YourFont"] { font-family: 'YourFont', 'Century Gothic', CenturyGothic, AppleGothic, Arial, sans-serif !important } |
Add this to the header <style> section as well. This makes sure that in clients, that allow Webfonts, your font is actually being used.
|
1 2 3 4 5 6 7 |
<table> <tr> <td style="background:white;height:30px;font-family: Arial, 'YourFont', 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;"> Some text! </td> </tr> </table> |
In the body of the email template, you assign your font-family styles for the text, but making sure that Arial is listed first.
Outlook will than use Arial for the text styling.
In modern clients this will be overwritten with the “style rule” above, which checks for YourFont and updates the font-family styling accordingly.
using getBoundingClientRect & jQuery.
“The returned value is a DOMRect object, which contains read-only left, top, right and bottom properties describing the border-box in pixels. top and left are relative to the top-left of the viewport.”
|
1 2 3 4 5 |
$.fn.elOnScreen = function(){ var ele = this.get(0); var client = el.getBoundingClientRect(); return client.top < window.innerHeight && client.bottom > 0; } |
“This is a jQuery plugin which allows us to quickly check if an element is within the browsers visual viewport, regardless of the scroll position. If a user can see this element, the function will return true.”
“Simple jQuery plugin to determine if an element is within the viewport. Optional parameters allow the user to specify a minimum percentage of the element’s dimensions that must be visible to qualify.”
When using Fullpage.js, overflowing section / slide content will be made scrollable with Slimscroll. If you want to use addons that rely on the natural scroll event, these will fail with Slimscroll. One of the candidates breaking is Scrollreveal.js for example.
I decided to work around that, to allow animations to be triggered when elements become visible or invisible to the viewport.
You could code the viewport visibility check yourself or use the “visible” jquery plugin.
“This is a jQuery plugin which allows us to quickly check if an element is within the browsers visual viewport, regardless of the scroll position. If a user can see this element, the function will return true.” jquery-visible on Github
The idea was to extend or hook into slimscroll without touching the fullpage.js codebase. Fullpage.js wraps overflowing content within a fp-scrollable container. Slimscroll itself provides events to track your position within the scrollable area in pixels or when top / bottom have been reached.
|
1 2 3 |
$(selector).slimScroll().bind('slimscroll', function(e, pos){ console.log("Reached " + pos"); }); |
|
1 2 3 |
$(selector).slimScroll().bind('slimscrolling', function(e, pos){ console.log("Reached " + pos"); }); |
This is just a crude and simple starting point, but should give you the basic idea. This still needs some throttling, so that its not called on every scroll position.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
var currentScrollDirection = "down"; var currentScrollPosition = 0; $("body").delegate(".fp-scrollable", "slimscrolling", function(e, pos){ // Top has been reached if(cPos == 0){ currentScrollDirection = "down"; } // Scrolling up or down? if(currentScrollPosition > pos){ currentScrollDirection = "up" }else{ currentScrollDirection = "down" } // Store current position to compare on next check currentScrollPosition = pos; // Our scroll element var element = $(this); // Using the class "reveal" for all elements to track within // Loop over elements on scroll element.find(".reveal").each(function(){ // using the visible plugin if ($(this).visible(true) ) { // add inView and direction classes $(this).addClass("inView") .removeClass("outView") .removeClass("up") .removeClass("down") .addClass(direction); }else{ // add outView class and handle other classes $(this).addClass("outView") .removeClass("up") .removeClass("down") .removeClass("inView"); } }) |
|
1 2 3 4 5 6 7 8 |
<div class="scrollArea"> <div id="elOne" class="reveal"> </div> <div id="elTwo" class="reveal"> </div> <div id="elThree" class="reveal"> </div> </div> |
Very basic idea to get some transitions working.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
.inView.down{ border-left:4px solid red; opacity: 1; animation: scaleUpDown 1.5s ease both; } .inView.up{ border-left:4px solid blue; opacity: 1; } .outView{ opacity: .6; -webkit-transition:opacity 1500ms ease-out; -moz-transition:opacity 1500ms ease-out; -o-transition:opacity 1500ms ease-out; transition:opacity 1500ms ease-out; } @keyframes scaleUpDown { from{ opacity: 0; transform: scale(0.2) rotate(30deg) translate(50%)}; to { opacity: 1; transform: scale(1.0) rotate(0deg) translate(50%)}; } |
Hopefully Fullpage.js will be switching to iScroll natively in the future, as it provides far more options to handle scrollable areas. You can use iScroll now, but you have to disable the scrolling feature within Fullpage.js and call iScroll yourself. Not that difficult to do :)
There is also a WordPress Plugin that wraps Fullpage.js natively with a nice interface (WP_Fullpage) and my upcoming Visual Composer integration, which already uses iScroll :)
“Time Lapse Assembler allows you to create movies from a sequence of images. Provide it with a folder containing sequentially named JPEG images and it will produce a QuickTime compatible movie file for use in iMovie or other editing software.”