Seeking a project manager to oversee project management in a creative agency and Web development environment.

Description

The project manager will report to the company president and will oversee the successful completion of client projects, specifically working to ensure that all work exceeds client expectations and is completed on time and on budget. He or she will:

1. Manage projects for a portfolio of clients;
2. Track budgets, timelines and profitability;
3. Coordinate work across our strategy, design and programming teams;
4. Handle day-to-day communications with his or her assigned clients.

Qualifications

The ideal candidate will have:

1. At least 2 years of dedicated project management experience;
2. Demonstrated success in managing people and client relationships; and
3. Demonstrated aptitude for managing timelines and budgets.

Compensation

Compensation will be negotiated commensurate with experience. Health insurance will be available following one full calendar month of employment. No relocation package is offered with this position.

Application

Submit a resume and cover letter to Bill Brady at bill@elikirk.com. Employment and character references should also be included.

Please direct all inquiries about the position to Bill Brady at 801-377-9321 x207.

The post Project Manager appeared first on Eli Kirk.

Legacy Flexbox

.parent {
    display: box;
    box-orient: horizontal; /* vertical */
    box-direction: normal; /* reverse */
    box-align: center; /* start, end, stretch */
    box-pack: start; /* end, center, justify */
}
.child {
    box-flex: 1; /* 0 */
    box-ordinal-group: 1;
}

There are a few things to notice about this. First, the equivalent to the modern flexbox’s flex-direction is split into two different declarations–box-orient and box-direction. The modern’s justify-content is instead box-align and align-items is box-pack. Also, there’s no flex-grow or flex-shrink, just box-flex, and order is box-ordinal-group.

Hybrid Flexbox

.parent {
    display: -ms-flexbox;
    -ms-flex-direction: row; /* column, row-reverse, etc. */
    -ms-flex-wrap: wrap /* nowrap */
    -ms-flex-align: center; /* start, end, stretch */
    -ms-flex-pack: start; /* end, center, justify */
}
.child {
    -ms-flex: 1; /* 0 */
    -ms-flex-order: 1;
}

I’ve included the -ms prefix to all these because Microsoft Internet Explorer 10+ is the only browser that has implemented the hybrid syntax. You can see that it has a mix of the legacy type and the modern type.

Compatibility Chart

It’s worth it to note that Chrome v.21 came out in July of 2012 and Firefox v.22 is planned on being released later this month (6/2013). Also, while Firefox v.22 does support Modern flexbox, it doesn’t not support the wrap declaration.

Compatibility How-To

The differences between Modern Flexbox and Legacy Flexbox are pretty distinct, so we need a way to include all possible options to support as many browsers as possible. Doing so would look something like this:

.parent {
    display: -webkit-box; /* Safari */ 
    display: -moz-box; /* Firefox 21- */
    display: -ms-flexbox; /* IE 10+ */
    display: -webkit-flex; /* Chrome */
    display: flex; /* Standard (Firefox 22+) */
}
.child {
    -webkit-box-ordinal-group: 1; /* Safari */
    -moz-box-ordinal-group: 1; /* Firefox 21- */
    -ms-flex-order: 1; /* Hybrid */
    -webkit-order: 1; /* Chrome */
    order: 1; /* Standard (Firefox 22+) */
}

CSS Preprocessors to the Rescue!

Writing out 5 lines for each declaration you want to make can get tedious after a while, but CSS preprocessors make that a lot easier. I’ll be showing these examples using LESS, but there are probably ways to do this in any of the available preprocessors.

To do the basic display: flex declaration, you use a simple mixin.

.flexbox() {
    /* Legacy */
    display: -moz-box;
    display: -webkit-box;
 
    /* Hybrid */
    display: -ms-flexbox;
 
    /* Modern */
    display: -webkit-flex;
    display: flex;
}
.parent {
    .flexbox();
}

Now when you want to use the display: flex declaration, you can just use .flexbox() instead.

If you want to use something with a variable, you can use pass that variable in as an argument for the mixin:

.count(@args) {
    -webkit-box-ordinal-group: @args;
    -moz-box-ordinal-group: @args;
    -ms-flex-order: @args;
    -webkit-order: @args;
    order: @args;
}
.child1 {
    .order(1);
}
.child2 {
    .order(2);
}

However, because the flex-direction is so different between Legacy and Modern, we have to use gated mixins

.flex-direction(@value) when (@value = row) {
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -ms-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
}
.flex-direction(@value) when (@value = row-reverse) {
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -moz-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    -webkit-flex-direction: row-reverse;
    flex-direction: row-reverse;
}
.flex-direction(@value) when (@value = column) {
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
}
.flex-direction(@value) when (@value = column-reverse) {
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-box-direction: reverse;
    -moz-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    -webkit-flex-direction: column-reverse;
    flex-direction: column-reverse;
}
.parent {
    .flex-direction(row);
}

I’ll leave the rest of the declarations as an exercise to the reader, but that should give you a good start on how do implement a cross-browser flexbox solution.

Conclusion

The fact that any Internet Explorer less than 10 doesn’t support any form of the flexbox model means that if you want to use flexbox, you have to program a fallback using the old block/float methods, then program the flexbox stuff on top of that. That’s a lot of extra work, especially if they look pretty much the same in the end. So until IE < 10 usage drops significantly (currently it’s around 10%) flexbox isn’t going to be the ideal solution. Check back in a year or so.

The post Flexbox CSS Cross-browser Issues appeared first on Eli Kirk.

For example, look at the following sample website:

This is a pretty basic layout using blocks and float. As you can see there are a couple of potential design problems here. First, the footer isn’t at the bottom of the page. Also, the sidebar content is shorter than the main content, so it doesn’t extend to the height of the main content and there’s some white space below it.

There are a few ways to fix these problems, but they generally involve less-than-ideal hacks. Not to worry though, now we have a new way to do it: Flexbox

The Block Model vs Flexbox

The main idea behind the block model was to have blocks of content flow one after the other in the document. (The float property was intended to be used if you had an image or side panel that would need to “float” to the side while the rest of the blocks flowed around it.) The size of the block is determined by the following:

• The width of the parent (unless the block has been given the float property, then it's the width of the content)
• The height of the content
• User specifications (e.g., width: 100px)

Note that the block model only takes itself (and its parent) into consideration when determining its size.

The Flexbox model, on the other hand, takes the following things into consideration when determining the layout

• The width and height of the parent
• The available space for each child element
• The size of the other children it shares the space with
• User specifications on how each child should use the space available
• User specifications on the orientation of children
• User specifications on how the children should be aligned
• User specifications on the order the children should be arranged

What are we waiting for? Let's see how to do this magic.

Axes in Flexbox

Hold your horses, we first need to get a couple of terms down.

• Main axis – The axis along with the children are arranged
• Cross axis – The axis perpendicular to the main axis

Now let's talk about how to make this work.

Flexbox CSS – Parent style declarations

Flexbox CSS style declarations go in one of two places, the parent container or the child (immediate children only). Let’s look at the parent first.

The main declaration

.parent {
    display: flex;
}

First, we need to tell the container to display itself as a flexbox. This is really simple.

Orientation and Direction

.parent {
    flex-direction: row; /* default */
    flex-direction: row-reverse;
    flex-direction: column;
    flex-direction: column-reverse;
}

The are an number of options you can choose to orient the direct children of the parent flexbox.

• row will arrange the child block horizontally across the screen, left to right
• row-reverse will arrange them horizontally and order them from right to left
• column will arrange them vertically down the screen top to bottom
• column-reverse will arrange them vertically and order them from bottom to top

In other words, the reverse option switches the main-start and main-end positions (see the axes diagram above).

row

row-reverse

column

column-reverse

Wrap

.parent {
    flex-wrap: nowrap; /* default */
    flex-wrap: wrap;
    flex-wrap: wrap-reverse;
}

Wrap will try to fit the content into multiple rows (it seems to only work on flex-direction: row at this time). Wrap-reverse will align the element from bottom to top rather than from top to bottom. In this case, the reverse option switches the cross-start and cross-end positions (see the axes diagram above).

wrap

wrap-reverse

Justify Content – The Alignment and Position on the Main Axis

.parent {
    justify-content: flex-start; /* default */
    justify-content: flex-end;
    justify-content: center;
    justify-content: space-between;
    justify-content: space-around;
}

This declaration determines how the leftover space will be allocated along the main axis.

• flex-start puts all the content at the beginning and the extra space goes at the end.
• flex-end puts all the content at the end and the leftover space is put at the beginning.
• center puts the extra space on both sides of the content.
• space-between puts content flush at each end, then distributes the extra space between the other pieces of content.
• space-around is like space-between except that the space is also distributed before and after the first and last pieces of content

flex-end

center

space-between

space-around

Align Items – The Alignment and Position on the Cross Axis

.parent {
    align-items: stretch; /*default */
    align-items: flex-start;
    align-items: flex-end;
    align-items: center;
    align-items: baseline;
}

This declaration determines how the leftover space will be allocated along the cross axis.

• stretch completely fills the length of the cross axis (height for row or width for column)
• flex-start puts all the content at the start of the cross axis
• flex-end puts all the content at the end of the cross axis
• center puts all the content at the center of the cross axis, with the extra space equal on either side
• baseline lines up the content with the first text line of each block of content

flex-start

flex-end

center

baseline
(shown with flex-direction: row)

Flexbox CSS – Child Style Declarations

These are style declarations that you need to add to the children of the parent flexbox element. You can add it to one or all of them–if you don't it uses the default attributes.

Flex Grow

.child {
    flex-grow: 0; /* default */
    flex-grow: 1;
    flex-grow: n;
}

Assigning a number to flex-grow tells the browser, “If there is any extra space, give it to this element.” It also divides the space proportionally between the elements based on the number (e.g., if one child is marked “2″ and the other is marked “1″ then twice as much space is given to the first one). If two elements have the same number it will divide the leftover space equally between them.

Flex Shrink

.child {
    flex-shrink: 0; 
    flex-shrink: 1; /* default */
    flex-shrink: n;
}

This works a lot like flex-grow. If marked with anything other than “0″, it tells the browser, “If there's not enough space for all of us to fit, then you can shrink the size of this element.” Notice that the default is “1″ whereas the default for flex-grow is “0″. This means that elements will not grow but default, but they will shrink.

Flex Basis

.child {
    flex-basis: auto; /* default */
    flex-basis: 100px; 
    flex-basis: 10%;
}

If this declaration has any value other than “auto”, it tells the browser, “Before you grow or shrink me, I want you to disregard my actual content size and think of my size as being this.”

Order

.child {
    order: 0; /* default */
    order: 1;
    order: n;
}

This is one of the most interesting aspects of the flexbox model. You can order the elements of flexbox children, regardless of their order in the code.

Conclusion

Who would need to use flexbox? I see flexbox working best for flexible, responsive designs. This is especially the case with mobile sites–most especially with sites have more of a “web-app” look and feel. The idea is that you want to fill the entire screen, no matter what the screen size is. Flexbox is perfect for that sort of thing.

Now for the bad news. Currently (6/2013–the time this post was written) the state of flexbox is kind of a mess. Not many browsers support it and those that do support an older version of the spec. In another post I talk about how to deal with cross-browser flexbox CSS issues, so be sure to check that out.

The post Flexbox CSS Tutorial appeared first on Eli Kirk.

A great example is a recent client Align B.I.. The designers wanted an animated circular graph. While most animation on the web is based on the concept of moving elements around, this is an element that stays in one place.

The way we ended up doing this was to use an animated sprite. The idea is simple–we set up an interval and at each step move the sprite to the next frame.

Setting up the Sprite

First we need an image.

If you click on this image, you'll notice that it's really, really long. 16340px. Wow. Each frame for our animation is going to be 380×340 and there are 43 frames.

So we create a box with our sprite for a background image.

<div class="graph"></div>

.graph {
    background-image: url('/image/location.png');
    background-position: 0 0;
    width: 360px;
    height: 340px;
}

Using jQuery for Simple Animation

Of course, we need some javascript to do the actual animation. We'll do this by setting an interval that will call a function that moves the background image to the next frame every 40 milliseconds. Once it gets to the end of the image, it will clear the interval so that it's not called any more. Two global variables will make this easier–one for the current position of the sprite and one for the variable that will store the interval.

var graphBGPosition = 0;
var graphAnimate;
 
function drawGraph() {
    graphBGPosition -= 380;
    $('.graph').css('background-position', graphBGPosition + 'px 0px');
    if(graphBGPosition <= -15960) clearInterval(graphAnimate); 
}

Next, we something to start the interval and get the animation going. For this example, I made a simple button that would start the animation when it's pressed, and then assigned a listener to it with some simple jQuery.

<button class="button-start">Start Animation</button>

$(document).ready(function() {
    $('.button-start').on('click', function(e) {
        e.preventDefault();
 
	// Reset in case it's in the middle of animating
	clearInterval(graphAnimate);
	graphBGPosition = 0;
 
	// Do the animation
	graphAnimate = setInterval(drawGraph, 40);
    });
});

The post Simple Sprite-based Animation with PNGs to Create Animated Graphs appeared first on Eli Kirk.

Unbridled Innovation for Provo Businesses

There’s no doubt the buzz about Google dubbing Provo its new fibertown has entrepreneurs—with bags packed—en route to the Silicon Slopes. Why? Because having speeds of 1 gigabit per second means businesses can disseminate information as quickly as they can produce it. And anyone within the Google Fiber network can receive that information without any barrier of bandwidth. In a playground with augmented connectivity, innovation is unbridled, and that gives Utah Valley the competitive advantage in attracting business to the area.

Equal Opportunity for Provo Families

With Google vowing free 5 Mbps to all homes on the iProvo network for a $30 activation fee and no monthly charge for seven years, educational opportunities for local families will skyrocket. For some this announcement of acceleration means having an Internet connection in their home for the very first time, giving families and individuals alike equal opportunities to learn and create. Here’s the reality: Provo is set to be one of first cities where universal internet connectivity will abound. Residents will be able access new kinds of content, at unprecedented speeds—everywhere.

More information can be found here.

The post Google Fiber is coming to Provo appeared first on Eli Kirk.

Recently a client of ours, Collection Brokerage, came to us who wanted the easy-to-use WordPress system to manage a stylish, one-page website design. In order to get WordPress to do this, we needed to overcome a couple of challenges for web development:

• Header and footer stay fixed, main content and sidebar content are replaced
• Deep-linkable
• URL changes to reflect page you’re on

Because we wanted to make this site deep-linkable, meaning that if you navigated to a specific page, even though it would be loaded via AJAX, you could still go directly to that page with a simple URL. In other words, we could be coming to this page from two different methods

• Natural URL – Load the entire page, including the header and footer.
• AJAX – All internal links will only change the main content area (leaving the header and footer)

WordPress Template System

WordPress comes with a great template system built in. The hierarchy allows us to build page templates that have automatic fallbacks. If you’re unfamiliar with this system, check out the documentation for the WordPress template hierarchy.

Partial Templates in WordPress

In a standard WordPress template, you include all the pieces–the header, footer, sidebar, and the main content. However, in this situation we will be pulling the main content from two different sources. In order to not repeat our code, we’ll abstract it into a partial template using the WordPress function locate_template.

The locate_template function is pretty powerful function. It allows us to specify a template to load, as well as any fallback templates if that specific template isn’t found

locate_template(
    array(
        'specific-template.php',
        'fallback-template.php',
        'generic-template.php'
    ),  // Array of templates to look for 
    true, // echo the output?
    false // require_once?
)

The easiest way to implement this function is to create a generic page.php template that calls partial templates for the main content based on the slug id of that page. The heirarchy would be something like this:

• page.php
  • main-aboutus.php
  • main-contact.php

The code for the page.php file would look like this:

<?php get_header(); ?>
<div class="main">
    <?php if(have_posts()): while(have_posts()): the_post(); ?>
        <?php 
            global $post;
            $slug = $post->post_name;
            locate_template(
                array(
                    "main-$slug.php",
                    'main-main.php'
                ), true
            );
        ?>
    <?php endwhile; endif; ?>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Accessing WordPress Pages Through AJAX

Now we need to access the content trough AJAX. First we’ll need an AJAX call that will call a custom file called ajax-page-fetch.php (passing it the URL) which will pull the proper HTML, then return it in a JSON object to be inserted into the right place on the page.

// Only run on internal links
$('[href*="mydomain.example.com"]').on('click', function(e) {
    e.preventDefault();
    linkUrl = $(this).attr('href');
    $.ajax({
        url: '/wp-content/themes/myTheme/ajax-page-fetch.php',
        data: { url: linkUrl },
        dataType: 'json', // I find JSON to be most versatile
        success: function(data) {
            $('.main').html(data.pagehtml);
        }     
    });
});

Page Fetch Script

When WordPress is building a normal page, it first checks the $_SERVER['REQUEST_URI'] variable for the page URL and then builds the page. In order to use the cool WordPress page-specific functions (such as is_home(), or has_posts()), we’ll need to trick WordPress into thinking this page was called naturally.

$url = $_GET['url'];
 
// Remove domain name
$url = str_replace(
    'http://'.$_SERVER['HTTP_HOST'],
    '',
    $url
);
 
$_SERVER['REQUEST_URI'] = $url;

Now we can load WordPress and this script will be able to use all the WordPress functions, including any that would be specific to that page. We do that with the wp() function.

require_once($_SERVER['DOCUMENT_ROOT'].'/wp-load.php');
wp(); // Load Wordpress

PHP Output Buffers

Now we simply have to send the proper content back. We do that by using PHP object buffers. Object buffers collect anything echoed out which can then be put into a single variable using the ob_get_contents() function.

ob_start(); // Start buffer
if(have_posts()){
    while(have_posts()) {
        the_post();
        global $post;
        $slug = $post->post_name;
        locate_template(
            array("main-$slug.php", 'main-main.php'),
            true
        );
    }
}
$page_template = ob_get_contents(); // Put buffer contents into variable
ob_end_clean(); // Stop buffer

Now that we got the content in a variable, we can send it back in the format that’s expected–in this case, JSON.

echo json_encode(array(
    'pagehtml' => $page_template,
));

URL History

To change the URL when changing pages, we used the super-useful jQuery History plugin. We simply added it to our AJAX call.

History.pushState(
    {state:1}, // output to console.log
    "State 1", // internal name
    "?state=1" // url
);

Conclusion

This is an extremely over-simplified example. Our actual implementation was much more complicated, involving getting content for the sidebar, and displaying some pages (such as the blog page and archive pages) as a listing of posts. However, this should be enough to get you started. Here are a couple of other points to consider when making a page like this:

• Include a “loading” gif
• Put page-specific javascript into the page itself.
• Remember to deal with menu active states
• Pass more info through your JSON string if needed (page id, parent id, title, etc.)
• Some plugins may need their javascript to be reloaded. (I’m looking at you Contact Form 7)

The post AJAX-ifying WordPress – Creating a one-page experience with WordPress appeared first on Eli Kirk.

I didn’t know it then, but I was learning how to make calls to action, or “CTAs,” as they’re known in marketing parlance.

Online, “asking for the business” also occurs through calls to action. Whether you want the user to learn, download, view, try, compare or buy, conversion is contingent on a CTA that incites the user to click. Unfortunately, calls to action are frequently underplanned and end up being mediocre, and thus underwhelming in their results.

Make planning for calls to action part of your user experience strategy and part of your copy writing. The funnel and flow of your website need to be well thought out before design ever starts, and a conversion-minded copy writer should be articulating your CTAs. Regardless of how well your content is written or how engaging your site design is, you still need to artfully craft and strategically place calls to action that will guide your user toward your desired outcome.

To help the budding shoe salesman in all of us, here’s a great exploration of effective calls to action from our friends at HubSpot. If you feel inspired and want to polish the calls to action on your site, please reach me to schedule a complimentary brainstorm session.

The post Remember calls to action… You still need to ask for the business. appeared first on Eli Kirk.

Responsibilities

• Front-end web development using HTML5, CSS3 and Javascript.
• Work closely with UX designers, project managers and customers.
• Build HTML templates for other team members and define template guidelines.
• Manage and train junior/entry level developers implementing templates.
• Enforce web standards compliance and industry best practices.
• Introduce and implement innovative techniques and technologies.
• Cross-platform and cross-browser testing.

Requirements

• Expert with HTML5, CSS3, and JavaScript.
• Advanced JavaScript knowledge including frameworks such as JQuery.
• Ability to work with Adobe Creative Suite files like Photoshop, Illustrator and Fireworks to cut images from design files.
• Obsessive attention to detail, ensuring that website matches design pixel per pixel.
• Experience with either PHP or Java.
• Experience working with databases like MYSQL.
• Ability to multi-task, and work under pressure.
• Motivated to research and learn about new technologies and practices.
• Work on-site in Provo, Utah.  This is not a telecommuting job.

Compensation

Salary will be negotiated commensurate with experience.  Health insurance, including HSA, will be available following one full calendar month of employment. No relocation package is offered with this position.

Application

Submit a resume and cover letter to Jarid Love at jarid@elikirk.com. Employment and character references should also be included.

The post Now Hiring: Senior Web Developer (Front-End) appeared first on Eli Kirk.

The other day, a client asked for a new modal popup to show on one of their pages.  The page was an interactive product display with filters and features that respond to the shopper with information making it app-like.  Here is what they needed.

1.  Popup needed to load on first visit at page load.

2.  Not reload each time the page changed

3.  Act like all of the other similar popup modals on the page.

Launching when the page loads was easy enough.  We are using jQuery and it was simple to place this inside a jQuery(document.ready function(){…}); and let it roll.  But we needed to also limit it to display only once when the user was on the page and not every time an event reloaded the page.  To do this, I decided to use a session cookie.  This would allow me to tell when someone had already visited the page and not re-display the information.

So I downloaded and added the jQuery-Cookie plugin.  (I had to download it as it is not yet part of the standard jQuery.) Add the reference to the cookie.js in the header, and then add this code to the page that needed the feature.

jQuery(document).ready(function($) {
    //lets see if we can have this only once per visit.
    if(!$.cookie('announcement')) {
        //if the cookie is not missing
        //javascript to display my content in the modal popup
 
        var date = new Date();
        // calculate the date.
        var minutes = 15;
        // I only want the cookie to last 15 minutes.
        date.setTime(date.getTime() + (minutes *60 * 1000));
        // do some math to get the right number of seconds.
 
        $.cookie('announcement', true, { expires: date });
        // sets the cookie so that it expires in 15 minutes.
    }
});
//some other code to make stuff happen specific to my popup modal,
//but not related to this post.

Now when someone comes to this page for the first time, they see the desired message in the modal popup. If they do their searching and filtering and other interactive actions within 15 minutes. (which is likely for this page.) Then they won’t see the message again.

But if they leave and come back 15 minutes later. (like after checking out.) Then they will see the message again.

I could have put some javascript to expire the cookie on the next page, but it seemed a bit of overkill as there are multiple next pages that could be, and this works.  And I needed the expiration anyway so it seemed like an easy way to do both.

The post Javascript Cookies appeared first on Eli Kirk.

So lets get started.

First you login to the admin pannel for your magento store.  Navigate to Catalog > Google Sitemap.  It should be the last option on the drop down menu.

Now you will see a page that says Google Sitemaps on the left and a Add Sitemap on the right.  If you already have a sitemap, they will be listed here.

     —-   

To add a sitemap, click on the “Add Sitemap” button.  This will take you to a simple form to fill in.

There really isn’t any reason to be creative here.  I just call my sitemaps “sitemap.xml” and recomend that you do the same.

Also, its a good idea to put your sitemap at the root of your website, so just use “/” as the path.  This will let any search engine find it if they come looking.

Now click save, and you will see the sitemap information in the table.  But we aren’t quite done.

On the left of the sitemap record, there is a link called “Generate”  Click this link and Magento will generate the sitemap file for you.

Now you are done.

If you are interested, you can click on the now active url to the sitemap and you can see the xml in your browser.  Basically this tells a search engine where all of your pages are so that it can be indexed more quickly without requiring the search engine spiders to crawl all over your site to find out what is there.

The post Create a Sitemap for your Magento based store appeared first on Eli Kirk.