Off
View Post
How to Create Websites Without Learning to Code

How to Create Websites Without Learning to Code

In May, Scroll Kit, a New York-based startup that lets users create websites without learning a single line of code, attempted to showcase its skills by recreating The New York TimesSnow Fall, an interactive multimedia report.

Scroll Kit recreated the experience, and said it took only an hour to make. However, The Times eventually asked co-founders Cody Brown and Kate Ray to take down the replica, citing copyright violations.

“We thought it was something [The New York Times] would see as an homage,” Brown explained.

After The New York Times also requested that Brown and Ray remove any mention to Snow Fall from their website, Brown refused, saying their statement on the site reflected a true fact. Despite the legal confrontations, Brown said the incident helped gain a lot of interest and buzz for Scroll Kit.

“The responses were pretty amazing,” he said. “A lot of people wanted to learn about Scroll Kit.”

The startup, which was introduced in 2012 at the New York Tech Meetup, ultimately aims to make the web more accessible. Brown, who has a background in filmmaking, said he and Ray “wanted to enable a new kind of workflow for creating webpages” and facilitate the creative process for those looking to express themselves online.

scrollkit screenshot

Image courtesy of Scroll Kit

“Lots of people are very visually creative,” Brown said, citing Scroll Kit as a solution for many who may have been deterred in the past by their lack of HTML or CSS knowledge.

“The major difference [between Scroll Kit and other web hosts] is that you can start a page or an idea without necessarily knowing where you’re going to end up,” he added.

Scroll Kit allows you to insert images and videos, animate elements on the page, add shapes, change colors, insert links and more. Elements can be moved around, altered or deleted with the click of a mouse. The finished code can then be exported and plugged into hosts such as WordPress.

This freedom of creation is an important aspect of Scroll Kit, Brown said. “You can include so much interactive media, which makes [Scroll Kit] a powerful way to tell a story on the web.”

Ultimately, Brown hopes that the startup’s expansion will make online storytelling easier.

“In normal cases, publishing content on the web for many people feels like filling out forms,” he said, referring to the seemingly formulaic nature of coding. “We want to have more people create more handcrafted stories.”

Currently, Scroll Kit is completely free for personal use, while publishers can access special features for a fee. Voice of San Diego and Public Radio International are among those who have used Scroll Kit for projects.

Source: http://mashable.com/2013/06/26/create-websites-without-code-scroll-kit/

Off
View Post
8 Things Every WordPress Developer Should Know

8 Things Every WordPress Developer Should Know

WordPress is certainly a great tool, and it’s quite easy to get started. You can count on a lot of good resources (like this humble blog) and you can even dig into WP’s source code if you know PHP quite well.

But also, it’s quite easy to get lost. There are a lot of options, a lot of solutions, and sometimes it’s way harder to find the best solution than just fixing an issue. Well, let’s see some basic tips and snippets to help you solve some everyday issues.

8 Things Every WordPress Developer Should Know

1. You really shouldn’t use query_posts()

The truth is, among many reasons, you shouldn’t ever use query_posts. This is the most simplistic version of the loop, but as jQuery code, it’ll run a lot of background operations that will mostly rely on the WP_Query (then get_posts) and will require you a lot of code to clean up the mess.

In short, WordPress will load the main query BEFORE calling template files, so if you call a query_post() in your index.php file you’re actually calling 2 queries since the first one was already called. And if you consider the background queries it’s actually 8 (since each WP_Query loads 4 queries, call posts, count posts, call metadata, call terms).

What you should do:

  • Use WP_Query object whenever you need multiple loops in a page. So, sidebar loops, secondary loops in a page template and anything like this will be better using this function
  • Use pre_get_posts filter to modify the main loop. If you need to modify in any way the main WordPress loop (pretty much the case that you would use query_posts) just go for the pre_get_posts filter since it modifies directly the main WP_Query object (instead of getting a new DB query)
  • Use get_posts() if you don’t need a loop. If you are just getting posts and don’t need the main loop functions you could use this one since it’ll return you a simple array of posts

2. Always enqueue your scripts & styles

When you are creating themes, plugins or customizing any of these you may need to load external files. But each WordPress can contain a lot of things, and if you call a JS library twice you can potentially break the site.

The simple solution is introduced with the wp_enqueue_script function, since you can load (and register) a library or script and make sure that you are loading only one copy of it. The same rule applies for styles, but they won’t cause too much damage. Still a good option for loading standard styles, like styling for jQuery plugins, or CSS for HTML bootstraps.

3. Cache your stuff

8 Things Every WordPress Developer Should KnowImage from Kevin Andersson

If you are a plugin developer you should know the transients API. They allow you to store “options” for a small amount of time. So, if you are getting latest tweets, for instance, there’s no point in loading them all the time, you can set a transient for it and only load every 15 minutes or so.

The great thing about it is that you can cache your entire query on it. So if your blog is updated once a day you can set a transient that expires every 12h or less and you’ll be fine.

4. Know all your feeds

It’s always good to provide your usual feeds to your users, but sometimes we need a little bit more. Actually there are quite a lot of cool feeds that you can use:

  • Main – site.com/feed
  • Main comments – site.com/comments/feed
  • Post comments – site.com/post-name/feed
  • Categories & tags – site.com/category/categoryname/feed or site.com/tag/tagname/feed
  • You can also include / exclude categories like this – site.com/?cat=42,25,17&feed=rss2 or this site.com/?cat=-123&feed=rss2
  • Author – site.com/author/authorname/feed/
  • Search – site.com/?s=searchterm&feed=rss2
  • Custom Post Type – site.com/feed/?post_type=yourposttype
  • Custom Taxonomy – site.com/feed/?post_type=custom_post_type_name&taxonomy_name=taxonomy

5. How to add featured image in your feed

8 Things Every WordPress Developer Should KnowImage from Dash

This one is quite simple but gives a good final result (especially if your users are running a nice RSS reader like feedly that displays the main images). This code will do it (in your functions file):


function featured_image_in_feed( $content ) {

    global $post;

    if( is_feed() ) {

        if ( has_post_thumbnail( $post->ID ) ){

            $output = get_the_post_thumbnail( $post->ID, 'medium', array( 'style' => 'float:right; margin:0 0 10px 10px;' ) );

            $content = $output . $content;

        }

    }

    return $content;

}

add_filter( 'the_content', 'featured_image_in_feed' );

Source: WordPress: Add featured image to RSS feed/

6. Optimize your DB once a while

You can use either a plugin or manually but it’s always good to optimize your MySql tables often (at least once or twice a month) so you’ll ensure that your queries are as good as they can be, and will reduce your DB size

7. Enable GZIP

Imagine how great would it be if you could compress your site files before sending them to the user? Well, with server-side GZIP you can do that. And it’s fairly simple, you can add this snippet to your .htaccess file and you’re good to go:


#Gzip

<ifmodule mod_deflate.c>

AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript text/javascript

</ifmodule>

#End Gzip

Source: Enabling Gzip in .Htaccess

8. There’s a plugin for that

Even if you are not a developer you could improve your site performance with caching plugins, DB optimization plugins, CSS and JS minifying plugins.

Source: http://webdesignledger.com/tips/8-things-every-wordpress-developer-should-know

Off
View Post
The State Of Responsive Web Design

The State Of Responsive Web Design

Responsive Web design has been around for some years now, and it was a hot topic in 2012. Many well-known people such as Brad Frost and Luke Wroblewski have a lot of experience with it and have helped us make huge improvements in the field. But there’s still a whole lot to do.

In this article, we will look at what is currently possible, what will be possible in the future using what are not yet standardized properties (such as CSS Level 4 and HTML5 APIS), and what still needs to be improved. This article is not exhaustive, and we won’t go deep into each technique, but you’ll have enough links and knowledge to explore further by yourself.

The State Of Images In Responsive Web Design

What better aspect of responsive Web design to start off with than images? This has been a major topic for a little while now. It got more and more important with the arrival of all of the high-density screens. By high density, I mean screens with a pixel ratio higher than 2; Apple calls these Retina devices, and Google calls them XHDPI. In responsive Web design, images come with two big related challenges: size and performance.

Most designers like pixel perfection, but “normal”-sized images on high-density devices look pixelated and blurry. Simply serving double-sized images to high-density devices might be tempting, right? But that would create a performance problem. Double-sized images would take more time to load. Users of high-density devices might not have the bandwidth necessary to download those images. Also, depending on which country the user lives in, bandwidth can be pretty costly.

The second problem affects smaller devices: why should a mobile device have to download a 750-pixel image when it only needs a 300-pixel one? And do we have a way to crop images so that small-device users can focus on what is important in them?

TWO MARKUP SOLUTIONS: THE <PICTURE> ELEMENT AND THE SRCSET ATTRIBUTE

A first step in solving the challenge of responsive images is to change the markup of embedded images on an HTML page.

The Responsive Images Community Group supports a proposal for a new, more flexible element, the <picture> element. The concept is to use the now well-known media queries to serve different images to different devices. Thus, smaller devices would get smaller images. It works a bit like the markup for video, but with different images being referred to in the source element.

The code in the proposed specification looks like this :

<picture width="500"  height="500">     
  <source  media="(min-width: 45em)" src="large.jpg">
  <source  media="(min-width: 18em)" src="med.jpg">
  <source  src="small.jpg">
  <img  src="small.jpg" alt="">
  <p>Accessible  text</p>
</picture>

If providing different sources is possible, then we could also imagine providing different crops of an image to focus on what’s important for smaller devices. The W3C’s “Art Direction” use case shows a nice example of what could be done.

For the full article, go to: http://mobile.smashingmagazine.com/2013/05/29/the-state-of-responsive-web-design/

Off
View Post
WordPress Turns Ten

WordPress Turns Ten

Ten years ago today, WordPress, the open source blogging software, was born. It’s amazing to think that it’s been that long, but considering it had all of the elements that other startups and projects have tried to emulate over the past 10 years, then it makes sense.

When speaking with WordPress founder Matt Mullenweg, you’d think that he was only a small part of the movement that attempted to empower anyone and everyone to self-publish. While that might be partially true, Mullenweg has taken all of his learnings over the years and poured them into the for-profit arm, Automattic.

The project started as a form of the blogging platform b2/cafelog, and the name itself, WordPress, wasn’t even Mullenweg’s idea. It came from a friend of his. It was essential for WordPress to be open source, as Mullenweg explained to me last month: “When I first got into technology I didn’t really understand what open source was. Once I started writing software I realized how important this would be.”

By allowing an infinite number of developers to collaborate on a platform, WordPress had the best chance of its peers to reach critical mass. Only developers knew what the hurdles were to setting up their own publishing platform. The competitors had their own idea of what those hurdles were, therefore putting themselves at an immediate disadvantage. It was a numbers game, community vs. corporate. WordPress has won, with more than 18 million downloads of its latest version, 3.5. The WordPress formula, when it comes to community, has been copied, but never replicated.

Mullenweg told me that early meetups were the key to finding the passionate individuals that would push WordPress to where it is today: “Technology is best when it brings people together.”

WRITING IS ONE OF THE HARDEST THINGS TO DO.

Most people don’t consider themselves to be writers because they simply don’t know what to say. Mullenweg felt that for people like that, giving them a platform that was easy to set up and use would allow them to spend more time on the important parts of writing. If writing is one of the hardest things to do, as Mullenweg says, then figuring out how to publish your thoughts shouldn’t be.

The power of community, especially for developers, is best thought of as a group of like-minded people working towards a similar goal. The people that work on WordPress are problem solvers, they’re people who like to make things easier for themselves and for others. Those types of people are special, and WordPress was able to capture the best of the best. Some have even moved on to paying jobs at Automattic.

Mullenweg tells me that one of his main early contributors, Ryan Boren, used to say: “Just code. It’s just code. Anything that we want to do is just code. There’s nothing you can imagine that can’t be done.”

That type of mindset is paramount to the success of WordPress and every open source project since. Even when Mullenweg decided to turn WordPress into a business with Automattic in 2005, which has since raised $80.6 million, the community was not to be forgotten: “We figured out a business model that was complementary to the growth of the community.”

By leveraging all of the hard work of thousands of contributors, Mullenweg found a way to keep giving back. By keeping WordPress open source, which was key from day one, the business side of things hasn’t alienated those who continue to work on the code that’s available to all. In fact, much of the work that’s done by the community continues to make its way into the paid WordPress.com offerings.

Some of the WordPress community has found ways to create a career built off of the work that they’ve done. Whether they’re consulting, designing or implementing, the software itself has changed a lot of lives. Mullenweg tells me that while this is great, many of the open source contributors would still work on the platform even if they didn’t find a way to get paid. “They approach code like a craft, and not a job.” he says.

The passion from the WordPress community has not only brought people together, but their collective work now powers 17 percent of the top 1 million websites on the web. That couldn’t have been done by Mullenweg alone, and he knows that. That’s an obvious statement now, but the key is that he’s always known that.

The founder shared his thoughts about the anniversary in a blog post today, as if the software itself was his child:

You’re so beautiful… I’m continually amazed and delighted by how you’ve grown. Your awkward years are behind you. Best of all, through it all, you’ve stuck with the principles that got you started in the first place. You’re always changing but that never changes. You’re unafraid to try new things that may seem wacky or unpopular at first.

He wasn’t writing to the code, he was writing to the people behind it.

Source: http://techcrunch.com/2013/05/27/open-source-blogging-platform-wordpress-turns-ten-and-its-community-gets-to-blow-the-candles-out/

Off

Migrating A Website To WordPress Is Easier Than You Think

Now powering over 17% of the Web, WordPress is increasingly becoming the content management system (CMS) of choice for the average user. But what about websites built with an outdated CMS or without a CMS at all? Does moving to WordPress mean starting over and losing all the time, energy and money put into the current website? Nope!

Migrating a website (including the design) over to WordPress is actually easier than you might think. In this guide, we’ll outline the migration process and work through the steps with a sample project. We’ll also cover some of the challenges you might encounter and review the solutions.

About This Guide

Before we get to work, let’s establish some context. First, this guide was written primarily with beginners in mind and will be most helpful for basic websites. Some of you will likely encounter advanced aspects of WordPress migration, but they are beyond the scope of this guide. If you’re tackling an advanced migration and get stuck, feel free to share your difficulty in the comments below.

OBJECTIVES

The objective of this guide is to help you with the following:

  • Plan an effective migration to WordPress.
  • Walk through the technical steps involved in migrating.
  • Get ideas and resources to solve common migration challenges.

ASSUMPTIONS

I assume you have basic familiarity with WordPress. Previous development experience with WordPress would be helpful, but not necessary. I also assume you have an existing website and design that you want to migrate to WordPress.

BASIC STEPS

Here are the basic steps that I recommend you follow for a typical WordPress migration:

  1. Evaluate website.
    Work carefully through the pages on your existing website, identifying all of the types of content (standard pages, photo galleries, resource pages, etc.) and noting any areas that need special attention.
  2. Set up environment.
    Set up WordPress and get ready to import.
  3. Import content.
    Bring over and organize your content, whether via an importing tool, manual entry (for a small amount, when no tool is available) or a custom importing process.
  4. Migrate design.
    Incorporate your existing design into a custom WordPress theme.
  5. Review website, go live.
    Carefully review the import, making adjustments where needed, set up any URL redirects, and then go live.

With this outline in mind, let’s work through each step in detail.

For more check the orignal article on Smashing Magazine: http://wp.smashingmagazine.com/2013/05/15/migrate-existing-website-to-wordpress/