Author Archives: lisafolkerson

Make a CSS Heart to be a Certain Width

See the Pen Pulsing Heart – CSS Animation by Lisa Folkerson (@lisafolkerson) on CodePen.


When making a CSS heart to be a certain size (like you need it to be 245px wide as in this case) measure with a square to find the sides of a square that will fit in each dimension and then get the width/left position and height/border-radius for the two divs that make each half of the heart. Mutiply the length of one side by the square root of 2 to get the values to use. So here:

width/left position:
square root of 2 times 107 = 151.320851174

height/border-radius:
square root of 2 times 175 = 247.487373415

Easily Convert JSON to JSONP With A Simple PHP Snippet

Same origin policy issue errors when returning data from an API that only delivers JSON? This security measure happens because the browser dosen’t allow cross-origin data sharing. You need a server-side component that will go grab a JSON feed for you and convert it to JSONP. This code will retrieve the JSON inside a <script> tag (the exception to sharing resources cross-domain are <script> tags like when serving a cdn, or other type of javascript scripts, etc), and within that will be a callback function. This is the padding, which is what the P stands for in JSONP; here padding == script tags and a function delivering us a javascript object literal. When the script is called from a server it calls the function that delivers the fetched data and presents it as JSON.

Even if you’re not comfortable writing PHP; you can use this snippet to overcome same origin browser restrictions when making requests across domains.

<?php 
 header('Content-Type: application/javascript');
 $data = file_get_contents('http://url.com?whatever=' . $_GET['someData']);
 echo $_GET['callback'] . "(" . $data . ")";

Line 1 sets your HTTP MIME type of the body of the request, where ‘application’ is the type and ‘javascript’ is the subtype. More information about MIME types.
Line 2 defines a variable called $data that makes your GET request to the API
Line 3 echos (returns) a function whose name is the string ‘callback’. The callback function brings your JSON into your app inside script tags then when it execute. Congratulations you can now use a server-side component to access JSON across domains.

In your JS link to the PHP file in the AJAX call instead of the API URL since that action is now happening in the PHP GET. It should look something like the following:

getData = function(someData){
 $.ajax({
   url : './api.php', // route to the php file you just created
   type : 'GET',
   dataType : 'jsonp',
   data : {
     format : 'json',
     property : someData // property you are calling
   },
   success : function(results){
     return results; 
   } 
 });
};

If you are working locally at this point you will get an error. Make sure you are running the code on a server. That server needs to make the request. To continue working in the local environment you can use MAMP, a Node Server, browser-sync or pick your own other adventure, but the php needs to run on a server.

To make it clearer, here is code I have used to fetch the title of movies from this API:

<?php
   header('Content-Type: application/json');
   $data = file_get_contents('http://bechdeltest.com/api/v1/getMoviesByTitle?title=' . $_GET['title']);
   echo $_GET['callback'] . "(" . $data . ")";
getMovie = function(Title){   
  $.ajax({
    url : './api.php',
    type : 'GET',
    dataType : 'jsonp',
    data : {
      format : 'json',
      title : Title
    },
    success : function(results){
       displayTitle(results);
     } 
   });
};

View this code in use in my Bechdel Test web app.

I”ve seen people use this snippet to work easily with the following APIs to make apps:

500px API
Bechdel Test API
GoodReads API
Luminate Online API
Wakatime API

It is worth mentionning that there are some really well documented security issues with JSONP, specifically that JSONP can deliver any kind of JavaScript and you lose control over failures and other things you probably want to track. At time of writing CORS is the recommendation of the W3C, and opens up a lot more possibilities including doing more types of requests with data besides just GET.

Building An Accessible Drag & Drop User Interface for Images or Text

See the Pen Accessible Draggable UI by Lisa Folkerson (@lisafolkerson) on CodePen.

Building Accessibility

Web Accessibility Initiative’s Accessible Rich Internet Applications (WAI-ARIA) allow us to take web sites, or web apps and take the interactive widgets that are not self-evident to a screen reader and tag them meaningfully so that assistive technology can interpret the widget and its behavior and potential behavior properly for its user.

If you are interested in finding out more try out these amazing resources:

https://dev.opera.com/articles/introduction-to-wai-aria/
http://www.w3.org/TR/wai-aria-practices/#dragdrop
https://dev.opera.com/articles/accessible-drag-and-drop/

A lot of accessibility info is out of date and/or dry. Dense docs are full of information but short on use-cases. Googling implementation of different accessibility standards can be difficult as well; with examples being sometimes out-of-date or using endless lines of uncommented code. The above versions are great. My version has 52 lines which I will describe in detail.

Dependencies being used include .normalize, jQuery UI 1.11.2 (including the jQuery UI stylesheet), jQuery 2.1.3, and animate.css. I wrote the codepen in jade but converted the markup to html here for simplicity, similarily the code on the codepen is in Sass but I have included CSS for clarity.

This tutorial shows you how to take several different pieces of content, be they text or images and load a larger version in a main dropZone using jQuery UI. For this example I used text that are images. If you want to talk about how you would change the code for a different kind of content or event, leave a comment. If you want to look at more of these characters check out http://copypastecharacter.com/ The counting is less important  but kind of nice. I don’t go into detail on how its done but if anything is unclear please leave a comment.

Using jQuery UI’s built-in drag and drop

Draggabble

Draggable items are defined in jQuery. Making sure you are loading jQuery and jQuery UI, first define a document ready function.

$(function () {
 });

What I did next is make a global variable for each item that would be draggable as well as the parent div.

var $gallery = $('.boxes'),
 $box = $('.box');

Use the .draggable() method for those divs with the box class. Inside we specify options to define what kind of draggable they should be.

$box.draggable({
 revert: false,
 helper: 'clone',
 scroll: true
 });

The revert option takes the boolean true or false and controls whether the div will return to its original position or not.
helper accepts original | clone | fn() options and specifies whether the draggable object will the object itself, a clone of it, or something unique written in a function. scroll: true allows for scrolling while dragging the object.

There are many other options to get the draggable gallery you want at https://jqueryui.com/draggable

Droppable

After draggable elements are coded the next step is to specify the targets they can be dragged to. Define a variable for this location:

var $dropZone = $('.dropZone');

Using the .droppable() method gives us a number of options to define as well. Find the full list at the docs.

$dropZone.droppable({
    activeClass: 'focus-state',
    hoverClass: 'ui-state-hover',
    drop: function(event, ui) {
    $( this ).find( '.changingText' ).text( ui.draggable.text() ).removeClass( 'change ').addClass('tada animated changingText' ).appendTo (this ); }
});

The activeClass and hoverClass can load CSS classes from jQuery UI stylesheet. If you don’t want to use these out of the box, feel free to define your own. Here, ‘ui-state-hover’ is from jQuery UI stylesheet, and ‘focus-state’ is a class I have defined in my own stylesheet.

The drop option sets a function to run on drop. This one is a pretty long chain. While you can run any function at this point what I have running says In here find the text with the class .changingText, make it the text ui.draggable.text() (which the .draggable() method adds for you), remove the class of .change, add the classes changingText, tada and animated ( tada and animated are from animate.css and changingText is the large text that changes over and over again), and add it back into here.

Using JavaScript and jQuery to supply and update WAI-ARIA information

Aria-Grabbed

Aria-grabbed values tell a screen reader if an object has the potential to be dragged, is being dragged, or if it cannot be dragged.

The three states aria-grabbed will accept are false | true | undefined

 <div class="box" aria-grabbed="false">

Anything that has the potential to be dragged should be set to false. Then we’ll use jQuery to update the attribute during the drag event. Inside the .draggable() function use drag event to listen for a function that uses jQuery to set the state of true for the aria-grabbed value:

drag: function () {
        $(this).attr('aria-grabbed', 'true');
    },

Clean up after the drag event has occurred by resetting the aria-grabbed state to false or undefined(If you would like the drag to only be executable once).

stop: function () {
      $(this).attr('aria-grabbed', 'false');
  }

Aria-dropEffect

Aria-dropEffect values let the user know if the object currently being dragged can be dropped in that location, and what will happen in that instance.

 dropZone" aria-dropEffect="none">

Aria-dropEffect attribute can take the values copy | move | reference | execute | popup | none When there is nothing currently being dragged as well as on pageload the div from the dropZone should be set to ‘none’.

However, once something is being dragged potential targets should be defined and updated using jQuery. We set these as options in the .draggable method. And define functions to run both as content is being dragged, and to execute at the end of the drag event.

 
$box.draggable({
      revert: false,
      helper: 'clone',
      scroll: true,
      drag: function(){
        $( this ).attr( 'aria-grabbed', 'true' );
        $dropZone.attr( 'aria-dropEffect', 'execute' );
    },
      stop: function(){
        $( this ).attr( 'aria-grabbed', 'false' );
        $dropZone.attr( 'aria-dropEffect', 'none' );
    }
  });

On drag I’m running a function that changes aria-grabbed to true for the specific div being dragged, and changes its dropZone to have the attribute #[code execute] for aria-dropEffect, letting the user know that a function will execute (aka the image/text will update) if the content is dropped in that location.

On stop the DOM is tidied and I return elements affected in the drag to their resting values.

Using the keyboard only

Making Divs Tabbable

Being accessible means that all the operations of a page or web app are operable through the keyboard alone.

Tabbing through a basic site will navigate through each element that is focusable (ie. any link or form element) in the order they appear in the markup. This excludes divs. Tabbing can be re-written/overwritten using the attribute tabindex=0 on each of the divs. So now the markup for each div containing the content we want draggable is:

 <div class="box" aria-grabbed="false" tabindex="0">

Submitting tabbable

Now that the divs containing content that is draggable can be tabbed through, we need a way to submit them using the only the keyboard. For this we write a lil JS to execute padding the information to the dropZone on enter.

$box.bind('keyup', function(e) {
      e.preventDefault();
      var elem = $( this )[0];

      if ( e.keyCode === 13 ) { // enter
        $( '.changingText' ).remove();
        $( elem ).find( 'p' ).clone().appendTo( '.dropZone' ).addClass( 'changingText tada animated' ).removeClass( 'change' );
    }
});

We bind the key event to the box focused on when the event occurs, then we run the function.

The key function takes one parameter, e which is used in the first line inside the function to prevent the default of the key. After that we define a variable that we can use to access the #[code p] information since this is referring to an array, we reach inside and grab object 0.

Inside the key function is an if statement. If the key pressed is enter (keycode 13), remove the text with the class of changingText. Then, find the p inside the object we’re in, copy it, add it to the dropZone, give it the classes that make it dance and maintain the DOM structure by adding the changingText class and removing the change class.

Navigating Tabbable Elements with Arrow Keys

Alright. So now you can tab through the draggable elements in one order. It makes sense, though, to allow your user to go back and forth in this case. So in the keyup function we can add useability. Because the elements here are laid out inline it is intuitive to be able to use the left and right arrow keys. So, still in the function that says ‘when a key is pressed while a .box is focused’ we extend the if statement. IF enter, send the content to the dropzone, OR ELSE IF left arrow is pressed focus on the preceeding element, OR ELSE IF the right arrow is pressed focus on the next element.

$box.bind('keyup', function(e) {
  e.preventDefault();
  var elem = $( this )[0];

if ( e.keyCode === 13 ) { // enter
    $( '.changingText' ).remove();
    $( elem ).find( 'p' ).clone().appendTo( '.dropZone' ).addClass( 'changingText tada animated' ).removeClass( 'change' );
} else if( e.which === 37) { //left arrow
    $( '.box:focus' ).prev().focus();
} else if( e.which === 39 ) { //right arrow
    $( '.box:focus' ).next().focus();
  }
}); // end keyup event

The Markup

In the end the markup is 28 lines of code. My example also counts the number of times the drag and drop is successfully run.

The CSS

The CSS is the bulkiest part of the code. When considering accessibility it’s also important to remember to have elements that are high-contrast, code that is large enough to read with ample line-height, and descriptive visual clues for people who are sight-impaired or otherwise aided by text being legible (everyone to some extent or another). CSS is viewable on codepen or downloadable below.

The JS

The JavaScript is pretty concise. Coming in at 52 lines including comments. This is because jQuery and jQuery UI and are very user-friendly and well-documented.

How it all comes together

The code runs in Chrome, Firefox, Safari, and IE9+

If you want to download the code, that is HERE

Thank you to thebillygregory for resources and kindness.

Video for Web for Free or for Cheap: Resources and Tips

HTML5 video capabilities have been being blogged about for five years, but when looking into the possibilities and potentialities of HTML5’s video support there are a ton of exciting yet speculative posts about what this can and will mean.
Earlier this year (January 2015) YouTube switched from Flash to HTML5 video and it seems like every day is another nail into the coffin of flash, and cements HTML5 video as the future of web moving images, that is, well, already here. To take advantage of using HTML5 video; the following is a roundup of some helpful resources to prepare your video before it goes live on the web, from shooting, to editing, to post-production.

There are beautiful, detailed analyses floating around the web that I owe gratitude for publishing their thoughts and comparisons of formats and projections; and I encourage people to read around. Included here  is a roundup of my thoughts.


Why would YouTube switch to HTML5 Video?

HTML5’s adoption of Adaptive Bitrate (ABR) is all-important in YouTube’s decision to changeover. ABR, which lets video change resolution for viewers based on network quality, has reduced buffering by more than by as much as 80 percent on heavily congested networks. This means resolutions that are friendlier to slower connections by optimizing a quality:speed of download ratio. Also notable about HTML5 video, is its support of the VP9 codec (more to come on that below, hang on!), and new APIs that let YouTube show fullscreen videos that can be manipulated by standard HTML UI. (More here on Tech Updates).

So you are preparing video for the web and taking advantage of this exciting cusp-point; standing on the edge of new video technologies? But first you need to know how to start?
Yes? Here you are:


Ways of acquiring video:

Shooting video yourself:

There are few reasons why, to start, you need to shoot video with anything other than your cell phone, web cam, or screen recorder. The one big flag is wanting to have exceptional or even quite-good sound. Being able to record sound well is complicated and can be very case-specific. In these cases I recommend finding a collaborator who knows sound well and can contribute equipment, finding another blog post about sound for web, or researching yourself and shelling out some cash. You can also find work arounds or work withins (using your obstructions as creative limitations).

Found Footage/Appropriating Footage:

Fair dealing for the purpose of research, private study, education, parody or satire does not infringe copyright. (If you get a cease and desist letter though you should stop.)
Alternately, find material to work with that is public domain or creative-commons licensed. More on creative commons here.
And try these sites to find footage to work with:

https://archive.org/

http://www.pond5.com/

Record Your Screen:

Quicktime X will record your screen for you and save a .mov file for you immediately after. Use it to record your cool and savvy demo videos or action happening on your screen and elements therein to make something cool. The two main ways to do this is to take big long screen records and edit them in other software.

Or, use a screen recording program that has editing, titles, effects, etc. built right in. I have heard really good things about ScreenFlow and Camtasia. But they are investment softwares, running you $99 and $119, respectively.


Editing Video:

-Vine style. Also known as “in-camera editing”. Also known as pressing play and stop when you want things to start and stop. This is a very chill and casual way to edit video.

-iMovie. everything imports into iMovie which is a joy. Very user-friendly. I don’t know if I would if I say that it is “intuitive” but once you know how to use it you could trick yourself into thinking it’s an intuitive program.

-Final Cut Pro X. This is iMovie for someone who wants to pay for an industry standard but want it to have the same learning curve as iTunes. I feel like Apple made it a “user-friendly” and assumed that users wanted an inefficient and unsophisticated program so they could market it to more casual video makers who don’t know how to be exacting with their technology. It’s only fair if you are good at technology to one-up the situation.

mPeg stream clip (also very powerful video converter and encoder). Its Export dialog provides more control over your finished video than some commercial products. i incorporate this into my workflow sometimes because it’s really barebones in a great way.

Other great free things I love:

Handbrake | https://handbrake.fr/

HandBrake is a tool for converting video from nearly any format to a selection of modern, widely supported codecs.

Miro | http://www.getmiro.com/

A beautiful, simple way to convert almost any video to MP4, WebM (vp8), Ogg Theora, or for Android, iPhone, and iPad. Batch conversion, custom sizing, and more.


Exporting Video:

This is what technology you use in your video programs to appropriately compress videos. The codec, also known as the amount of change that occurs between frames. There have been a ton of different codecs over time as new video technologies change every few years or faster. These days we’re largely using H264 for max-compatibility .H.264 or MPEG-4 Part 10, Advanced Video Coding (MPEG-4 AVC) is a video compression format that is currently one of the most commonly used formats for the recording, compression, and distribution of video content. H.264 is perhaps best known as being one of the video encoding standards for Blu-ray Discs; all Blu-ray Disc players must be able to decode H.264. It is also widely used by streaming internet sources, such as videos from Vimeo,YouTube, and the iTunes Store, etc etc etc

You will not really see these specs when you select export from your editor even see this an an option in the menus you are using except if you dive into the advanced settings.

In iMovie, select “share > export for web”, in Final Cut Pro, you may just try to export your video and it will upload itself to youtube even though you didn’t think you allowed access to a youtube account. At least you don’t have to worry about codecs that much . Instead select .mov or .mp4. Or export for web and leave it at that.

MOV and MP4 are two file containers that are usually used to hold lossy video. Lossy video compression methods discard portions of the video data that it deems to be of less importance. The resulting video are substantially smaller while maintaining the quality loss at a minimum.

VP8 is the codec for WEBM

H264 is the codec for MP4, MOV

H264 still leads VP8 in terms of quality but the future is up definitely up for grabs.


The Future

HEVC vs VP9

H.265 was originally developed as the ‘HEVC’ (High Efficiency Video Coding). It was touted as being the official successor to H.264 back in 2013. Like H.264, the codec must be licenced with hardware manufacturers and software developers paying a fee.

By contrast VP9 is open source and royalty free. It was developed by Google as a successor to VP8, the moderately successful alternative to H.264. During its development VP9 was dubbed ‘NGOV’ (Next Gen Open Video) and Google has already integrated support into the Chrome browser and YouTube.

Initial reports suggest H.265 has higher image quality while VP9 is more reliable for streaming.


HTML5 VIDEO

Embedded Video Hosted Locally


This is what a video stack looks like and is good to use to support older browsers:

<video width=”320″ height=”240″ controls> <source src=”movie.mp4″ type=”video/mp4″> <source src=”movie.ogg” type=”video/ogg”> Your browser does not support the video tag. </video>

The controls attribute adds video controls, like play, pause, and volume stored locally and not embedded.

It is a good idea to always include width attributes. This is one time in building a site where you should consider setting a height as well in order to ensure aspect ratio integrity. If height and width are not set, the browser does not know the size of the video. The effect will be that the page will change (or flicker) while the video loads.

Text between the <video> and </video> tags will only display in browsers that do not support the <video> element.

Multiple <source> elements can link to different video files. The browser will use the first recognized format.

YouTube

Grab the embed code underneath any given video on YouTube. Click “Share” then “Embed”.

“?autoplay=1” at end of a video you are sourcing from youtube will autoplay the content once.

Vimeo

Vimeo code generally looks like this:

<iframe src=“http://player.vimeo.com/video/42358247?title=0&autoplay=1” width=“500” height=“300” frameborder=“0” webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

To add a paramater, simply append ? onto the end of the URL. Log into Vimeo to grab your embed code and play with some more options. For multiple parameters add an ampersand in between each one.

Final Thoughts

Check out fitvid: a jQuery plugin to make iframes/videos responsive.

For more parameters and advice check out google! And/or articles like this one:
Mozilla guide for HTML developers using video and audio elements

Font Awesome Icons as Active Links and Building an Image-Based Navigation Bar

This is the first post of what I am sure will be a series wherein I run into problems, have trouble solving them easily through google, and look to lay out solves for problems others may run into as well as myself.
Of course everyone may be more clever than I in lots of the aspects I talk about. Marvellous. Let’s talk. Especially if someone wants to add to/amend what I’ve written.
This style of blog post was recommended to me and my cohort by the wonderful mentors at HackerYou.

Font Awesome is a free service that is the most popular of its type of service; it makes images into icons and provide them free for use in web and design as vector images. Because they act like a font they are vector images and can be easily sized up or down by changing the font-size attribute in CSS. It can be ridiculous and it can be fun and there are lots of ways to put the Font Awesome library to creative use.

A few things to note about Font Awesome and icons acting as text:
-they are icons that are not added in the markup as a unique element but rather added as a class to another element.
-they are not readable by a screen reader. Discussion of the effects of this and overcoming that found here and here. Please try to make your site accessible by including these suggestions in your markup, although I have not included those strategies here for clarity’s sake .

You would think you could use them as a link rather easily. As soon as I saw them it was like they were begging me to make them into a beautiful and sleek little navigation bar. That twitter birdie next to a gmail icon, next to the vimeo ‘v’ and that old github cat.
My first instinct was to set up a nav, with the different icons linking externally as <li> elements, giving the <li> tags the class for the Font Awesome icons. A note, the classes beginning with fa in the examples are required by Font Awesome to correctly display them. Usage example and potential for Font Awesome can be found starting here.

 <li class="fa fa-twitter"> 

but immediately upon wrapping the <li> in a set of <a> tags the icon disappears.

<section><ul class="fa-ul"><li><a href="https://twitter.com/lisafolkerson" class="fa fa-twitter"></a></li></ul></section>

However the link is not the same size as the element it’s contained by. In fact this adds a strange space that is the link directly beside the icon, which is acting more like the bullet-point on an <li> item. Font Awesome works phenomenally well as bullet points in a list that exist beside text to further the understanding or give an expanded design of list. Resetting the font so that it can be used as the selctor itself and standing boldy alone can be remedied with an amount of CSS.

Following code makes a circle radius around the Font Awesome icon, the link, and places the active area inside a border.

section {
position: relative;
}

ul {
border:0;
margin: 0 auto;
}

ul li {
height: 70px;
width: 70px;
border-radius: 50%;
border: 1px solid black;
display: inline-block;

}

ul a{
margin: 0;
padding: 0;
width: 100%;
display: block;
position: absolute;
left: 0;
top: 0;
height: 100%;
line-height: 70px;
border-radius: 50%;

}

A few necessary things are required to make the navigation function cooperatively:

i. Display settings must be customized on the <a> element and the <li> element. The <a> is set to display as a block element and the <li> as an inline-block element.

ii. Position. <a> must position absolute and of course, it’s parent, <section> must be relative to contain its child.

iii. <li> Set the height and width. to what the desired final result will be.

iv. Margin/padding set to 0 of the <a> element. This ensures limiting the <a> to only be displayed to exactly the same size and dimensions as the <li> element, also position the top and left sides of the <a> to be 0,0. Then describe its width as 100%

v. Border radius set to 50% will turn the selectable area into a circle.

Et, voilà

FA _ Nav Bar Demo

Bonus: adding a hover tag is a very classy next step for this style of navigation bar.

FA-_-Nav-Bar-Demo-_-Gif

As they Say, “Hello World”

I read a poem today that started with the image of a mop : past grime and then joyful transgressions in online space.

This week I started at HackerYou. This week I started at a BOOT-CAMP; I got so pleased to be getting serious about being a front-end web developer. That was five days ago and the feelings of excitement and optimism are only intensifying. My twitter says : Lisa Folkerson :: Front-End Web Developer. A new declaration and addition to the long-suffered : Lisa Folkerson :: Conceptual Artist.

HackerYou’s full-time front end development bootcamp seems like this beautiful island of time and support. I can’t remember the last time in my life I had just one job to do. I’ve spent the last ~7 years juggling multiple contracts, part-time and full-time jobs,  creative projects, and participating in my communities as artist, organizer, musician, fan, friend, and supporter. 15 hour days have been a minimum unless I’m playing hookey and feeling my one long eye drag through my loaf to pain me with visions of misst work.

The last six months have been wildly productive for me and I couldn’t be more pleased that the next nine weeks plus will be filled with making things, talking about making things, learning how to share what I make and involve myself in a new culture; dev culture.

The first share is what I worked on this week and what I finished this week. A. the website you are reading this blog post on, (as soon as this wordpess is updated to the site I have built line online this sentence will be true)and B. two music transmissions I made for the artist Castle If. They went live on the web this week and were my last pre-HackerYou project to wrap before focusing intently on coding for the next little future. I am so excited to work with the brilliant Castle If and her rapturous music. I am to grateful to the Mendel Art Gallery for their support in this project and being the first to screen it at their amazing party Lugo Gold.