GeeksPal

Open Source Web Development Blogging

May 18, 2012
by MySQL Live Web Seminars
0 comments

What's New in MySQL 5.6: Optimizer (30 May 2012)

The MySQL Optimizer is used to determine the most efficient means for executing queries within MySQL. MySQL 5.6 has included many new optimizer features. This session will give you an introduction to these great features that will provide significant performance improvements on applications with large data set, as well as an easier way to analyze and speed up queries. We will cover the following topics:

  • Multi range read
  • Index condition pushdown
  • Batched key access
  • Structured explain
  • Explain for update/delete/insert
  • Optimizer tracing

Last but not the least, this session will also cover subquery optimizations in MySQL 5.6.



Date and Time: Wednesday, 30 May 2012, 09:00 US/Pacific

May 18, 2012
by Anna Ladoshkina
0 comments

The Practical Guide to Multiple Relationships Between Posts in WordPress


With the introduction the custom post type feature, WordPress has made a very important move from just a blogging solution (very powerful but limited with it’s concept) to full-fledged CMS system. All 3.x releases more or less are evolving steps in the same direction. But some quite common tasks that we’re expecting from CMS are still missing in the Core leaving the battlefield open for plugin developers. One such task is creating and management of many-to-many relationships between posts of different types.

The Practical Guide to Multiple Relationships Between Posts in WordPress

Fortunately there is an excellent plugin "Posts 2 Posts" by Silviu-Cristian Burcă aka scribu which solves that task. It’s beautifully coded and deadly simple to use. It provides as with very simple but powerful API allowing the creation of connections and the out-of-the-box administrative UI allows you to manage them. With the following tutorial I’m going to show you how to use this plugin to create and manage connections between posts of different types in practical steps.

Let me first describe the task. Assume we have a custom post type at our WordPress-powered site named "project" to represent (how surprisingly) projects of some nature (eg. some downloadable apps or plugins). At the same time we post notes or updates related to these projects in the blog (representing with default "post" post type). Of course we would like to clearly state this relation - in every project’s page we’d like to have links to notes in the blog and vice versa - in every blog post we’d like to have links to related project(s). This could be achieved manually but the disadvantages of such an approach are quite obvious. So we would use Post 2 Post plugin to make this possible through the following steps:

  • register "project" post type and register it’s connection with "post" post type
  • create connections between published items using appropriate metabox
  • create template tags to help us list related posts or projects
  • edit "single" post template to use our introduced template tag for presenting related items

Bonus: At the end we’ll make things a bit more complicated to see the full power of Posts 2 Posts plugin - we’ll provide registered relationships with additional metadata nearly the same way we could have such metadata for posts themselves.

A Note about Code Placement

Following Thord Daniel Hedengren’s (wpmu.org) advice I’d try to be smart enough and would not recommend you to include the following code into the theme functions.php file. Instead I would recommend to create your own Custom Functionality Plugin to handle all code that is connected with content of your site and powers the functionality that should not disappear just because you switched the theme. So it’s the perfect place for registering custom post types and creating relationships between them. It’s worth mentioning also that to make the code below work you need to install Post 2 Post plugin first and activate it in WordPress admin.

Registration

function frl_p2p_registrations(){

    /* Register 'project' post_type */

    $register_args = array(
        'label' => __('Projects', 'frl'),
        'labels' => array(
            'name' => __('Projects', 'frl'),
            'singular_name' => __('Project', 'frl')
        ),
        'public' => true,
        'rewrite' => array('slug'=>'project', 'with_front'=>false),
        'show_in_menu' => true,
        'hierarchical' => false,
        'menu_position' => 5,
        'supports' => array('title','editor','thumbnail', 'excerpt'),
        'show_in_nav_menus' => false
    );

    register_post_type('project', $register_args);

    /* Register connection */

    $connection_args = array(
        'name' => 'project_post',
        'from' => 'project',
        'to'   => 'post',
        'sortable'   => 'any',
        'reciprocal' => false,
        'admin_box' => array(
            'show' => 'any',
            'context' => 'normal',
            'can_create_post' => true
        ),
        'admin_column' => 'any'
    );

    p2p_register_connection_type($connection_args);

}

add_action('init', 'frl_p2p_registrations');

The heart of Post 2 Post API is a p2p_register_connection_type function which is quite similar to other register_something WP functions and allows us to register relations between posts of different types and customise it’s behaviour through the set of accepted parameters:

  • name - an unique identifier of connection type
  • from - post type(s) on "from" side of the connection
  • to - post type(s) on "to" side of the connection
  • prevent_duplicates - whether to allow duplicated connections
  • sortable - whether to allow connections to be ordered via drag-and-drop.
  • reciprocal - whether to allow the same post type on "from" and "to" sides of connection
  • admin_column - whether to display column with related posts list in posts table in admin
  • admin_box - set of parameters that customise connection’s metabox appearance, in particular:
    • show - whether to show default metabox and where ("any", "from", "to")
    • context - regular metabox context parameter ("normal" or "advanced"),
    • can_create_post - whether to allow create new post directly from connection metabox

For the full set of registration parameters and their default values please consult the core/api.php file of the plugin.

First we prepare the registration of project post type as described in the Codex. Then we register connection with post post type with necessary parameters. All these registrations we wrap into a separate function to be able to call it upon init hook.

Creating Connection in Metabox

Creating Connection in Metabox

P2P plugin creates a connection metabox on edit post screens for connected post types if it was configured upon registration. The usage of this metabox is quite intuitive. Simply start typing the desired post name in the search box, select the appropriate item from the drop-down list and click the add icon. To remove a connection click trash icon. Create as many connections per each post/project as needed.

Among other admin UI goodies P2P plugin creates (if configured) the column for a list of connected items in the posts' management table for each of the connected post types. The latest version of the plugin introduces also an informational admin screen (located under "Tools" menu) containing reference data about registered connections and their parameters.

Listing Related Posts

function frl_list_related($post_id, $title = ''){

$query_args = array(
    'connected_type' => 'project_post',
    'connected_items' => intval($post_id),
    'nopaging' => true
);

$query = new WP_Query($query_args);

if($query->have_posts()):

if(empty($title))
    $title = __('Related items', 'frl');
?>
<h3><?php echo $title; ?></h3>
<ul class="related-items">

<?php while($query->have_posts()): $query->the_post(); ?>
<li><a href="<?php the_permalink();?>"><?php the_title();?></a></li>
<?php endwhile;?>

</ul>
<?php
endif;
wp_reset_postdata();
}

One of the greatest advantage of P2P plugin is an ability to get connected posts using standard (and familiar) WP_Query syntax. Everything you need is to pass additional query variables to limit set of posts:

  • connected_type - the identifier(s) of the connection used when registering
  • connected_items - ID of post(s) from one side of the connection to search
  • connected_direction - optional parameter allowing to restrict the direction of queried connections ("from", "to", "any"), when omitted the direction is inferred from connected_type + connected_items combination.

In our example we wrap the query into a separate function - frl_list_related template tag. This function query connects posts based on submitted $post_id parameter. If the query produces any results the function lists them using the standard WordPress Loop approach. It also accepts $title parameter to customise the title of related items’ block depending of context.

Template Editing

/* code for project template - single-project.php */

if(function_exists('frl_list_related'))
    frl_list_related($post->ID, __('Related Posts', 'frl'));

/* code for post template - single.php */

if(function_exists('frl_list_related'))
    frl_list_related($post->ID, __('Related Project(s)', 'frl'));

Finally we should edit the template files that represent "project" and "post" post types respectively (most likely the single-project.php and single.php files of your theme) so they included the call of our new template tag. We also passed the title string when calling our function for setting the correct title of the connected posts list. The result (eg. for particular "project") after some styling is similar to the following:

Related Items

More Complicated Example

Assume that blog posts related to a particular project could be divided into different types, eg. changelog and how-to information. On the project page we’d like to list posts of different types separately and apart from that accompany each link with a short comment. All these enhancements could be easily achieved using the connection metadata functionality provided by P2P plugin. Connection metadata behaves the same way as other types of metadata supported by WordPress (eg. postmeta, usermeta etc.). To use them we will implement the following steps:

  • rewrite connection registration function to support "type" and "comment" meta-fields
  • add metadata values to existing (and new) connections
  • rewrite post listing function to behave as described above
  • use new function in template
function frl_p2p_registrations(){

    /* Register 'project' post_type */

    $register_args = array(
        'label' => __('Projects', 'frl'),
        'labels' => array(
            'name' => __('Projects', 'frl'),
            'singular_name' => __('Project', 'frl')
        ),
        'public' => true,
        'rewrite' => array('slug'=>'project', 'with_front'=>false),
        'show_in_menu' => true,
        'hierarchical' => false,
        'menu_position' => 5,
        'supports' => array('title','editor','thumbnail', 'excerpt'),
        'show_in_nav_menus' => false
    );

    register_post_type('project', $register_args);

    /* Register connection */

    $connection_args = array(
        'name' => 'project_post',
        'from' => 'project',
        'to'   => 'post',
        'sortable'   => 'any',
        'reciprocal' => false,
        'admin_box' => array(
            'show' => 'any',
            'context' => 'normal',
            'can_create_post' => true,
            'fields' => array(
                'type' => array(
                    'title' => __('Type', 'frl'),
                    'values' => array(
                        'changelog' => __('Changelog', 'frl'),
                        'tutorials' => __('Tutorials', 'frl')
                    )
                ),
                'comment' => array(
                    'title' => __('Comment', 'frl')
                )
            )
        ),
        'admin_column' => 'any'
    );

    p2p_register_connection_type($connection_args);

}

add_action('init', 'frl_p2p_registrations');

We have added fields array to the list of connections registration parameters. The used configuration creates two fields in the connection metabox: the "type" field allows you to select from two possible options and the "comment" field allows you to type comment text.

Metabox

After filing in the metadata for all created connections we can access it the using "meta_query" syntax or using P2P API function p2p_get_meta. Our new listing template tag is going to use both.

function frl_list_related_by_type($post_id, $type, $title=''){
    global $post;

    $query_args = array(
        'connected_type' => 'project_post',
        'connected_items' => intval($post_id),
        'nopaging' => true,
        'connected_meta' => array(
            array(
                'key' => 'type',
                'value' => $type,
            )
        )
    );

    $query = new WP_Query($query_args);

    if($query->have_posts()):

    if(empty($title))
        $title = __('Related items', 'frl');
?>
    <h3><?php echo $title; ?></h3>
    <ul class="related-items">

<?php while($query->have_posts()): $query->the_post(); ?>
    <li>
        <a href="<?php the_permalink();?>"><?php the_title();?></a>
        <span class="comment-meta"><?php echo p2p_get_meta($post->p2p_id, 'comment', true );?></span>
    </li>
<?php endwhile;?>

    </ul>
<?php
    endif;
    wp_reset_postdata();
}

First of all, our renewed function accepts the $type parameter which allows us to select related posts based on stored "type"-field value. We achieve this using connected_meta query variable. It has syntax similar to regular WordPress meta_query query. Then when printing each found post inside the loop we access the value of its "comment" meta-field with p2p_get_meta function. Each related post found with our query stores the id of the appropriate connection in the $post->p2p_id property. With this id p2p_get_meta allows us to get any connection metadata by it’s key. The third boolean parameter indicates whether we are expecting a single value or array of possible values (as it required by WordPress Metadata API).

/* code to list 'changelog'-type posts on project template - single-project.php */

if(function_exists('frl_list_related_by_type'))
	frl_list_related_by_type($post->ID, 'changelog', __('Project\'s Changelog', 'frl'));

The result of this function implemented somewhere in the single-project.php file for "changelog"-type posts (as an example) could look as follows:

Related Items 2

And so this is practically the end of our demonstration. You can download the whole PHP code as a separate plugin below.

Conclusion

There are a number of discussions in the WordPress community whether such features as posts relationships should be in the core or not. The practical result of these discussions belongs to the future. Meanwhile we could solve this relationship problem, in particular, with the help of Posts 2 Posts plugin through a few easy steps.

Of course, the example used in the tutorial is quite a basic one but it demonstrates the logic and flexibility of the P2P approach and its excellence in terms of integration with the core. If you have examples of interesting and creative implementations of this approach please share your experience with us. Lastly, let me use the last sentence to say many thanks to the P2P developer for the great and inspiring work.

May 17, 2012
by Krishna Solanki
0 comments

Responsive Web Design – Ideas, Technology, and Examples


The web design industry is constantly evolving, whether that be with the latest trends in design – big header images, large photographic backgrounds, etc, or with the latest technologies – HTML5, jQuery, CSS3, and so on. It's important as a web designer and developer to keep up with these ever changing “trends” within the industry.

One of the biggest “trends” that has hit this field over the past year or so, is the concept of responsive web design. It has become much more than just a buzz word and has taken the industry by storm. It is clearly not going away. If anything, if you haven’t already got on board with it, it maybe it's about time to start warming to the idea.

Responsive Web Design

Responsive Web Design

What is Responsive Web Design?

Responsive web design is the term given to the concept of designing and developing a website so that the layout changes depending on the device/viewport on which the website is being viewed. By device, this could be a mobile phone, tablet, laptop, desktop computer, or even a smart TV. The term 'Responsive Web Design' was coined by its creator, Ethan Marcotte – his book is highly recommended reading “A Book Apart - Responsive web design”

Responsive Web Design Book
Image source: Flickr

In the book, Ethan covers where the term 'Responsive Web Design' came from and why it was required.

As a start, its' important to understand that responsive web design is not one particular technology or item but in fact it is a collection of techniques and ideas, which together establish a new way of thinking in moving the web design industry forward.

Why is Responsive Web Design Such a Big Thing?

With technologies evolving and new products and devices being introduced to the market it's only natural that consumers will want to keep up with the latest gadgets that we become more and more reliant on.

First it was desktop computers and laptops, then mobile phones and tablets. What's next?

The fact that we are in an era where it is becoming easier to browse the web means that we need to make it easier for consumers to “reach” us and see what we have to offer, at their convenience.

We naturally have a requirement as designers and developers to provide our end user with the option, or rather, convenience to browse through whatever medium (within reason) they see fit. Therefore, we need to provide a clearer means of portraying the information on different screen sizes, whether this be big or small, vertically or horizontally.

Responsive Web Design Menu
Image source: Flickr

It has been noted that in the past creating different versions of a website was the way forward, however it was not the most practical solution, especially as in most cases the user would end up having to download a lot of extra code and design, alongside receiving a poor user journey.
This is why responsive web design has become such a big thing.

Responsive web design provides us with the solution of meeting these requirements without having to create and design different versions of a website depending on the device.

One point to make is that from a business perspective it is not essential we make these changes or adjustments, but rather by doing so we are inevitably meeting the unconscious needs of our end user.

OK so we know what responsive web design is and we know why we may need it. The next step would be how to go about producing it.

How to Make a Website Responsive

As mentioned earlier responsive web design is a collection of techniques and ideas. The two main techniques consist of flexible grid and media queries.

Flexible grid
When designing a website we first start off in Photoshop, making sure each element is designed to pixel perfect measurements. We then translate this design into code, all again based on pixels.

This is fine, and still correct. The website will be viewable all on devices, however not in the most convenient manner, or the prettiest. Stating pixel measurements and viewing on a screen smaller than the one it is intended for forces horrible scrollbars to appear.

Hence we need a solution that is fluid, more relative to the issue, but also keeps its proportional values.

To find a proportional value of an item we use the formula:

“ target + context = result ”

Target + Context = Result
Image source: Flickr

It's quite an important formula and one that is key to making designs responsive.

If all values are proportional then the grid based design will scale nicely between devices. So, in other words, no scrollbars.

So, for example, using a Photoshop design mock up, we can find the layout width, typically this could be 960px (this being your main body container). Now say you want this container to “shrink” to 310px wide then the formula would read as follows:

310px / 960px = 0.32291666666667

To obtain the percentage value we multiply by 100 to get: 32.291666666667%

More often than not the percentage value may result in NOT being a whole number. If this is the case then it is important to NOT round up or down to the nearest whole number. Although it may look pretty, your machine will understand the figures in a proportional manner, so its important to keep them as they are!

The Grid System
Perfect grid layout that can be very useful.

The Grid System

Once the fluid grid is in place, the web design is scalable but not responsive.

That is where media queries come into play.

Media Queries

CSS3 media queries go hand in hand with the flexible grid to make responsive web design work.

Luckily CSS3 is supported by many modern browsers.

Media queries were first investigated by W3C a few years ago. A media query allows you to gain information about the viewport from which the user/visitor is looking at the website and target that particular screen size by applying specific CSS styles.

For the purpose of making web sites responsive it can be said that the most important media feature is the “min-width”, this property allows us to apply specific CSS styles if the browser window (in pixels) drops below a particular width.

As a starting point, and possibly the most common pixel min-widths that are targeted are the following:

  • 320px
  • 480px
  • 600px
  • 768px
  • 900px
  • 1200px

Responsive Design Platform Measurements
Image source: Flickr

It goes without saying that targeting more resolutions will naturally require more time and effort, so it generally depends on the clients' requirements and your judgment as to whether targeting all resolutions is necessary or not.

Progressive Enhancement

Progressive enhancement is the term or rather strategy for web design which focuses on the content, rather than device or browser. The aim is to enhance the web design by creating semantic HTML markup and giving prominence to accessibility and content.

Many web designers will argue that content is the most important element of a website project and should therefore be considered ahead of the presentation layer, or design.

With this in mind, we could relate progressive enhancement to responsive web design by aiming to design for mobile first.

Essentially when designing for mobile first the restriction due to the smaller screen automatically pushes the thought process into considering what important elements (content) need to be featured for this device. Therefore we naturally start to design around content.

Obviously as the screen sizes differ between tablets, laptops and desktops more space is available and therefore secondary content (social media or RSS links) can be added in a "nice to have" manner for the larger mediums.

It can be said that designing for mobiles enriches the experience of the user by focusing on the content and providing them, the user, with what is considered the most important elements on first view/load.

Showcase of Responsive Web Designs in Action

Below are a few examples of responsive web design in action. The screenshots show a couple of the variations, however to see the full variation of each site (in some cases there are more than others), view the website and change the browser window size. Alternatively view the website on a different device.

Full Frontal
Full Frontal

Future of Web Design London
Future of Web Design London

Clear Air Challenge
Clean Air Challenge

Forefathers Group
Forefathers Group

Andersson-Wise
Andersson-Wise

The Boston Globe
The Boston Globe

1140 CSS Grid
1140 CSS Grid

Laufbild Werkstatt
Laufbild Werkstatt

Responsive Web Design Resources

Responsive web design concentrates quite heavily on devices, viewports and how to gracefully degrade the designs we create across these mediums. In all of the “hype” about RWD we shouldn’t forget Progressive enhancement and its relationship with responsive web design.

Conclusion

It's safe to say that as technology evolves and new gadgets are invented, new trends happen.

Do you think responsive web design is here to stay? What do you think of responsive web design? Let us know what you think at the bottom of this article.

May 17, 2012
by Krishna Solanki
0 comments

Responsive Web Design – Ideas, Technology, and Examples


The web design industry is constantly evolving, whether that be with the latest trends in design – big header images, large photographic backgrounds, etc, or with the latest technologies – HTML5, jQuery, CSS3, and so on. It's important as a web designer and developer to keep up with these ever changing “trends” within the industry.

One of the biggest “trends” that has hit this field over the past year or so, is the concept of responsive web design. It has become much more than just a buzz word and has taken the industry by storm. It is clearly not going away. If anything, if you haven’t already got on board with it, it maybe it's about time to start warming to the idea.

Responsive Web Design

Responsive Web Design

What is Responsive Web Design?

Responsive web design is the term given to the concept of designing and developing a website so that the layout changes depending on the device/viewport on which the website is being viewed. By device, this could be a mobile phone, tablet, laptop, desktop computer, or even a smart TV. The term 'Responsive Web Design' was coined by its creator, Ethan Marcotte – his book is highly recommended reading “A Book Apart - Responsive web design”

Responsive Web Design Book
Image source: Flickr

In the book, Ethan covers where the term 'Responsive Web Design' came from and why it was required.

As a start, its' important to understand that responsive web design is not one particular technology or item but in fact it is a collection of techniques and ideas, which together establish a new way of thinking in moving the web design industry forward.

Why is Responsive Web Design Such a Big Thing?

With technologies evolving and new products and devices being introduced to the market it's only natural that consumers will want to keep up with the latest gadgets that we become more and more reliant on.

First it was desktop computers and laptops, then mobile phones and tablets. What's next?

The fact that we are in an era where it is becoming easier to browse the web means that we need to make it easier for consumers to “reach” us and see what we have to offer, at their convenience.

We naturally have a requirement as designers and developers to provide our end user with the option, or rather, convenience to browse through whatever medium (within reason) they see fit. Therefore, we need to provide a clearer means of portraying the information on different screen sizes, whether this be big or small, vertically or horizontally.

Responsive Web Design Menu
Image source: Flickr

It has been noted that in the past creating different versions of a website was the way forward, however it was not the most practical solution, especially as in most cases the user would end up having to download a lot of extra code and design, alongside receiving a poor user journey.
This is why responsive web design has become such a big thing.

Responsive web design provides us with the solution of meeting these requirements without having to create and design different versions of a website depending on the device.

One point to make is that from a business perspective it is not essential we make these changes or adjustments, but rather by doing so we are inevitably meeting the unconscious needs of our end user.

OK so we know what responsive web design is and we know why we may need it. The next step would be how to go about producing it.

How to Make a Website Responsive

As mentioned earlier responsive web design is a collection of techniques and ideas. The two main techniques consist of flexible grid and media queries.

Flexible grid
When designing a website we first start off in Photoshop, making sure each element is designed to pixel perfect measurements. We then translate this design into code, all again based on pixels.

This is fine, and still correct. The website will be viewable all on devices, however not in the most convenient manner, or the prettiest. Stating pixel measurements and viewing on a screen smaller than the one it is intended for forces horrible scrollbars to appear.

Hence we need a solution that is fluid, more relative to the issue, but also keeps its proportional values.

To find a proportional value of an item we use the formula:

“ target + context = result ”

Target + Context = Result
Image source: Flickr

It's quite an important formula and one that is key to making designs responsive.

If all values are proportional then the grid based design will scale nicely between devices. So, in other words, no scrollbars.

So, for example, using a Photoshop design mock up, we can find the layout width, typically this could be 960px (this being your main body container). Now say you want this container to “shrink” to 310px wide then the formula would read as follows:

310px / 960px = 0.32291666666667

To obtain the percentage value we multiply by 100 to get: 32.291666666667%

More often than not the percentage value may result in NOT being a whole number. If this is the case then it is important to NOT round up or down to the nearest whole number. Although it may look pretty, your machine will understand the figures in a proportional manner, so its important to keep them as they are!

The Grid System
Perfect grid layout that can be very useful.

The Grid System

Once the fluid grid is in place, the web design is scalable but not responsive.

That is where media queries come into play.

Media Queries

CSS3 media queries go hand in hand with the flexible grid to make responsive web design work.

Luckily CSS3 is supported by many modern browsers.

Media queries were first investigated by W3C a few years ago. A media query allows you to gain information about the viewport from which the user/visitor is looking at the website and target that particular screen size by applying specific CSS styles.

For the purpose of making web sites responsive it can be said that the most important media feature is the “min-width”, this property allows us to apply specific CSS styles if the browser window (in pixels) drops below a particular width.

As a starting point, and possibly the most common pixel min-widths that are targeted are the following:

  • 320px
  • 480px
  • 600px
  • 768px
  • 900px
  • 1200px

Responsive Design Platform Measurements
Image source: Flickr

It goes without saying that targeting more resolutions will naturally require more time and effort, so it generally depends on the clients' requirements and your judgment as to whether targeting all resolutions is necessary or not.

Progressive Enhancement

Progressive enhancement is the term or rather strategy for web design which focuses on the content, rather than device or browser. The aim is to enhance the web design by creating semantic HTML markup and giving prominence to accessibility and content.

Many web designers will argue that content is the most important element of a website project and should therefore be considered ahead of the presentation layer, or design.

With this in mind, we could relate progressive enhancement to responsive web design by aiming to design for mobile first.

Essentially when designing for mobile first the restriction due to the smaller screen automatically pushes the thought process into considering what important elements (content) need to be featured for this device. Therefore we naturally start to design around content.

Obviously as the screen sizes differ between tablets, laptops and desktops more space is available and therefore secondary content (social media or RSS links) can be added in a "nice to have" manner for the larger mediums.

It can be said that designing for mobiles enriches the experience of the user by focusing on the content and providing them, the user, with what is considered the most important elements on first view/load.

Showcase of Responsive Web Designs in Action

Below are a few examples of responsive web design in action. The screenshots show a couple of the variations, however to see the full variation of each site (in some cases there are more than others), view the website and change the browser window size. Alternatively view the website on a different device.

Full Frontal
Full Frontal

Future of Web Design London
Future of Web Design London

Clear Air Challenge
Clean Air Challenge

Forefathers Group
Forefathers Group

Andersson-Wise
Andersson-Wise

The Boston Globe
The Boston Globe

1140 CSS Grid
1140 CSS Grid

Laufbild Werkstatt
Laufbild Werkstatt

Responsive Web Design Resources

Responsive web design concentrates quite heavily on devices, viewports and how to gracefully degrade the designs we create across these mediums. In all of the “hype” about RWD we shouldn’t forget Progressive enhancement and its relationship with responsive web design.

Conclusion

It's safe to say that as technology evolves and new gadgets are invented, new trends happen.

Do you think responsive web design is here to stay? What do you think of responsive web design? Let us know what you think at the bottom of this article.

May 16, 2012
by MySQL Live Web Seminars
0 comments

Getting the Best MySQL Performance in Your Products: Part I – The Basics (07 Jun 2012)

In a command performance, Oracle MySQL Consultant and performance expert Alexander Rubin will step through the basics of architecting your product's MySQL embedded or bundled database for higher performance.

Alexander has many years of consulting experience helping some of the world's largest software and appliance vendors achieve MySQL performance gains of 50% to 500% in their products. In this session, Alexander will review the first steps to take when designing your product's database for high performances. He will also show you how to spot and quickly resolve the most common performance bottlenecks. The webinar will cover the following topics:

  • Critical performance-related server settings
  • How to use Indexes
  • How to use EXPLAIN to verify query execution plans
  • How to identify and resolve common performance problems


Date and Time: Thursday, 07 Jun 2012, 09:00 US/Pacific