Articles Tagged with development

You are currently browsing 28 articles tagged with development.

Now Using Disqus
Published Monday 2nd of April 2012
I've used Disqus on SleekPHP.com since launch and now I've finally made the switch on here as well.
Really like that they handle all the user input and spam filtering.
I couldn't be bothered to update everything right now (articles still show the comment count from my DB for example) but it might happen in the future.
I've also updated superSimpleTabs and imageZoom with some bug fixes and new features.
That is all.
Be the first to post a comment
Creating a Basic Wordpress Plugin
Published Friday 3rd of February 2012
I recently created my very first Wordpress plugin (I've been coding themes for a few years though) and I thought I'd write down a little getting started for other plugin noobs out there.
I'll cover how to configure your plugin, connect to the database using the WPDB, install and uninstall DB tables, create a page in the admin and submit forms.
Be the first to post a comment
How to Create a Restaurant Menu in Wordpress 3 using Custom Post Types and Taxonomies
Published Wednesday 18th of January 2012
I recently created a restaurant website in Wordpress and for the first time got to use Wordpress 3's new "Custom Post Types" feature. Here I thought I'd explain how you too can create a menu using the same.
We'll create a menu where each dish has a title, picture, description and price. Each dish will also be grouped under a category like "Meat" or "Fish".
First, we'll create our new post type for our dishes. Put this in your theme's functions.php file:
<?php register_post_type('dishes', array(     'label'                => __('Dishes'),     'singular_label'    => __('Dish'),     'public'            => true,     'show_ui'            => true,     'capability_type'    => 'post',     'hierarchical'        => false,     'query_var'            => false,     'supports'            => array(         'title',         'editor',         'excerpt',         'thumbnail',         'author',         'page-attributes'     ) ));
Refer to the Wordpress Codex if you're curious about all the options.
That's all that's needed for a new menu item to show up in the admin; "Dishes". You could use "custom-fields" for the price but I think it's easier for the admin if we use the excerpt instead.
Now let's create a custom taxonomy for grouping our dishes:
<?php register_taxonomy('dish_types', 'dishes', array(     'label'            => __('Dish Type'),     'hierarchical'    => true ));
That's it. Now when you add a new "Dish" you'll get to choose from your "Dish Types". Go ahead and add some new "Dish Types" and then add a couple of "Dishes" to each type.
Now we have everything we need in the admin / backend. All that's left is to display the menu on our website. We'll create a custom template for our menu called "menu.php". You can make it a copy of "page.php" so that the admin can still add text to the menu page. You need to set the "Template Name"-comment in the top of the file for Wordpress to recognize our new template:
<?php /* Template Name: Menu */ ?>
No let's write the code we need to fetch all our dish types as well as dishes. This code goes in the previously created menu.php, below the page-specific stuff:
<section id="menu">     <?php $types = get_terms('dish_types', array('orderby' => 'id')) ?>     <?php foreach ($types as $type) : ?>         <h3><?php echo htmlspecialchars($type->name) ?></h3>         <?php if ($type->description) : ?>             <p><?php echo htmlspecialchars($type->description) ?></p>         <?php endif ?>         <?php $dishes = get_posts(array('post_type' => 'dishes', 'dish_types' => $type->slug)) ?>         <ul>             <?php foreach ($dishes as $post) : setup_postdata($post) ?>                 <li>                     <h4><?php the_title() ?></h4>                     <?php the_post_thumbnail() ?>                     <p class="price"><strong><?php the_excerpt() ?></strong></p>                     <?php the_content() ?>                 </li>             <?php endforeach; wp_reset_postdata() ?>         </ul>     <?php endforeach ?> </section>
The code should hopefully be pretty self explanatory. The meat of it is first the call to get_terms() which retrieves all the terms for a taxonomy and get_posts() which is used to retrieve any post type based on params.
As you can see I use the_excerpt() to store the price of the dish. If you'd rather use a custom fields called "Price" you would display it like this: echo get_post_meta($post->ID, 'Price', true).
Happy Wordpressing!
Join 6 others and post a comment
HTML5 Base Wordpress Theme
Published Tuesday 3rd of January 2012
Like so many others I've now also written my own HTML5 starter theme for Wordpress.
It's based on the Bones Wordpress Theme which is based on the HTML5 Boilerplate.
A few things I've changed from Bones:
- Removed all the class names from the markup (clearfix in particular)
- Removed all the CSS but normalize + some mixins (you're meant to style the site yourself)
- "Modularized" the code (each module is contain within its own file rather than all the modules for one page being in one file)
- Went through every line of code in every file and tidied things up
The theme comes with some widget areas and menu spots but you'll most likely wanna change them for your own site. It also supports post thumbnails and attachments (the plugin) support is on its way.
This is actually version 2 of this theme. The first version was based on I think the Kubrick theme from I dunno, before 3.0 anyway, so I felt it was time to brush things up and enable some new features.
I've also studied best practice theme development articles and spent time in the Wordpress "codex" trying to figure out the fucking mess that Wordpress is to make sure this theme is as robust as possible.
It's mainly written for myself but of course anyone is free to use it.
Join 6 others and post a comment
jQuery 3D Circle
Published Monday 12th of December 2011
I wanted to learn more about CSS 3D transforms so I started experimenting with the login page on SleekPHP.
It all turned into a jQuery Plugin called "3D Circle". I haven't uploaded it to the site yet but you can find both the CSS and the JS (beta) on Google code.
There's also a demo you can try out here (only tested in Chrome).
It's just a save of the HTML, CSS and JS on that page so you won't actually be able to sign up or do anything else. That's not the point of the demo though so.
I've only tried it in Chrome but use all vendor prefixes in the CSS so if your browser supports them all it should work in it too.
It took me a while to get everything the way I wanted it. The circle is automatically generated based on the items on the page. So if you add or remove items the circle adapts.
First I tried calculating the positions myself using sin and cos and apply them to the item's translateX and translateZ values. This worked fine before I started rotating the items as well. Without rotation the items were all facing the screen but they were at least in a circle.
When I started rotating the items all hell broke lose and nothing looked right. After some debugging I noticed that the rotation's origin is always from the 0, 0, 0 position. So the item would no longer rotate around itself but around the point at 0, 0, 0.
Thanks to this, though, it was much easier than having to calculate the circle positions myself. All I needed to do was place all the items at z: radie and then rotate them by 360 deg / num items.
Doing that placed all my items in a nice circle. Now to rotate this circle all I needed to do was rotate the parent element of all the items.
The problem with this, though, is that some items will be "in front" of the 0 z pane. That means they will look pretty much twice their size and that's not what we want.
My first thought was to simply move the wrapper of the items in the z pane, but doing that introduced the same problem I had before with the items themselves; now the rotation of the wrapper would go around its 0, 0, 0 position while it's sitting at 0, 0, -radie.
The only solution I could come up with was to wrap the circle in yet another element used only to move the circle in x, y or z.
So the final HTML requires quite a lot of wrapping elements. If you're doing this to a list of elements though you'll already have a ul and possibly a wrapping nav or section so you'd only need to add one extra element.
The outer wrapper is the "stage" for the circle. It contains the perspective and perspective-origin properties. Without these the transforms will all be flat.
The second wrapper is the "mover" for the circle. It is only used for moving the entire circle its radie in the z pane. This way we avoid having elements twice their size.
The third wrapper is the actual circle and its direct descendants are the circle items.
As you can see the demo is from SleekPHP's login page, you can check out SleekPHP's logger at the bottom of the page. I've got loads of other work atm so progress has been a bit slow lately.
Be the first to post a comment
SleekCMS Progress
Published Monday 17th of October 2011
Since releasing SleekPHP.com to the public I've been hard at work on SleekCMS.
With SleekCMS I'm aiming to create a very flexible CMS that allows users to create any number of content types (similar to node types in Drupal). Each content type can have any number of user defined "fields" (like "thumbnail", or "email" or "whatever").
Contents can be places in hierarchies as each row has a parent_id. The idea is to provide an API so that users easily can display content rows in a number of ways.
There will also be support for tags and attachments (a media library pretty much).
I'm also planning on making the SleekCMS admin a bit of a hub for all kinds of information about your SleekPHP site as well as SleekPHP news and whatnot.
There's loads of work left before it is functional but I hope to finish it and convert AndreasLagerkvist.com too SleekPHP before Christmas. We'll see how that goes :)
Btw: I know it currently looks almost identical to Google+ :P
Join 2 others and post a comment
SleekPHP.com is Live
Published Wednesday 28th of September 2011
After a month or so of some seriously late nights (early mornings) I've now gone live with SleekPHP.com.
Everything about SleekPHP kan be found there so I won't write any more here.
SleekPHP.com. Oh yea, SleekMobile too.
Be the first to post a comment
SleekPHP Progress
Published Wednesday 21st of September 2011
SleekPHP is the new name for aFramework and it is as usual a complete rewrite with loads of improvements.
It builds on the same structure as aFramework where a Site can extend many other Sites and each Site consists of many Pages which each have many Modules.
One of the things I wanted to focus on with SleekPHP was to try and write better OOP. For example all of the previously mentioned components are now classes with handy functionality. Where before the aFramework-class would handle almost everything there are now 3 main classes that make up a page:
1. SleekPHP - ties everything together and holds instances of DB, Router, User etc
2. Site - represents a Site (a directory in the Sites/-directory along with a mandatory SiteName.info-file)
3. Page - represents a Page (an .xml file in a Site's Pages/-directory)
I've been scratching my head quite frequently lately trying to figure out where each method should reside. For example, should it be Site->renderPage(pageName) or Page->render()? I think it's ok as it is now, and these things can quite easily be changed without having to change third party code afterwards.
I've also tried to focus a lot on keeping the core stuff really clean and properly commented and also try to move as much as possible to external modules and plug-ins.
Plug-ins is another new feature as well and all they really are are functions that run at a certain points in the execution of the framework. I've for example moved the HTML packing and debug logging to plug-ins instead of keeping them somewhere in core.
There's still a lot to be done but core is getting close to being "finished" and after that I'm gonna focus on getting sleekphp.com as well as mobile.sleekphp.com (SleekMobile) up and running. After that I need to convert andreaslagerkvist.com to the new code. Which is a massive project so it may take some time.
If you're interested in the code you can as always find it on Google code.
I'd start with the index.php file, then check out the SleekPHP class which should lead you to the Site class and finally the Page class.
There's a total of 15 files in core but some of them are almost empty at the moment. Almost all of the meat is done in the files mentioned above.
Be the first to post a comment
New Project; SleekMobile
Published Monday 22nd of August 2011
Like I've mentioned before I've been working a little with jQuery Mobile lately and there's a few things I feel can be done differently.
jQuery Mobile requires you to put a lot of extra attributes in your HTML elements and it also injects a bunch of div and span elements in your code.
That's why I started writing my own. And instead of data-attributes or .classes SleekMobile is built using SASS @mixins.
Head over to the documentation to find out more.
Join 1 others and post a comment
SASS is Brilliant
Published Monday 18th of April 2011
I've used my own CSS constants parser for a few years now and I can't imagine writing CSS without it nowadays.
I wrote the parser years ago when I had more time for my own projects and since then I've come up with loads of things I've been wanting to add to it.
Quite recently TB recommended SASS to me in the comments to my CSS Wish List article and for a recent project I gave it a go.
SASS has got everything on my todo-list for my own parser + loads more. Its @mixins are almost identical to my own take on constants but SASS' @mixins has support for many things I have yet to add to my own parser.
SASS also comes with variables and a bunch of super handy color functions.
It doesn't merge every file in the CSS-dir like mine, but instead loops through @import directives and pulls all the code in to the same file.
I'm going to convert all my handy CSS constants to SASS @mixins shortly and I've also looked into Compass' collection of @mixins based on popular CSS frameworks.
Writing CSS without @mixins (or similar) is not an option for me anymore and with all the other handy functionality SASS comes with it's an obvious choice for me.
Thus I will be deprecating my own parser and start using SASS exclusively from now on. It's an added bonus that other smart people are constantly improving it as well.
Now if I could only find a substitute for aFramework... :)
Join 2 others and post a comment
MVC Without a Framework
Published Saturday 12th of March 2011
MVC (Model - View - Controller) is an excellent way to divide the tasks of an application into different layers that all handle separate things.

Image: Renjith Krishnan / FreeDigitalPhotos.net
Many PHP frameworks use the MVC model but in this article I will try to explain how you can utilize MCV without the use of a framework.
First, I'll try to explain what the different layers all mean.
Join 2 others and post a comment
Sleek 1.0 and a New Design
Published Friday 11th of March 2011
I've started sketching out ideas for a new version of Sleek. Sleek 0.1 really didn't get very far although the foundation is pretty solid.
Version 1.0 will follow the same structure as aFramework has since the first version.
Join 2 others and post a comment
Facebook iFrame App Skeleton
Published Tuesday 15th of February 2011
I've had to work on building a Facebook app the last few weeks and I have to say it's a right piss take.
Documentation is lacking and whatever information you can google your way to seems to always be outdated.
That's why I thought I'd document my findings here.
You should read on if you want to create a Facebook iFrame App that:
- Lives on a facebook page rather than on apps.facebook.com
- Requires the user to be logged in and accept that the app has access to basic details about the user
- Presents different content depending on whether user has "liked" a certain page or not
Join 3 others and post a comment
Coding Music
Published Friday 7th of January 2011
I like to listen to music when I write code and I think I'm not alone so I thought I'd share my favorite coding albums, songs and artists with you all.
I find instrumental music is the best to code to as it doesn't interrupt your thoughts the way lyrics can do. That's why I almost exclusively listen to jazz, classical music and soundtracks when I code.
Some of these albums are not instrumental but in a language I don't understand which is also ok :)
Obviously I use the absolutely brilliant Spotify so all these albums are available there.
Be the first to post a comment
Sleek/aFramework and Drupal
Published Monday 26th of April 2010
I've never really checked out Drupal properly before (or any other framework for that matter) but tonight (16/4) I spent a few hours reading the docs.
It's almost scary how many things are similar, and in some cases completely identical, to aFramework/Sleek.
Join 2 others and post a comment
aFramework 4.0 a.k.a. SleekPHP
Published Wednesday 21st of April 2010
As usual when I've finished building 5 or 6 sites and ~80 modules for one version of aFramework I want to start the next, non-backwards-compatible, version of it :P
This year is no different and I've begun development on aFramework 4.0 or Sleek 0.1.
Join 2 others and post a comment
How to Build an aFramework Module
Published Friday 16th of April 2010
As a follow up to "How aFramework Works" I thought I'd explain how to build your own modules for aFramework.
It's actually very simple. Of course you'll need to know the languages you'll be writing but I assume you do. The simplest modules consist of nothing but HTML.
Be the first to post a comment
How aFramework Works
Published Saturday 10th of April 2010
aFramework is my home made PHP web dev framework that I run almost all my projects on.
Today I thought I'd exaplain how aFramework goes from a requested URL to a rendered page.
Be the first to post a comment
New aFramework Site; aBugTracker, along with bugtracker.a-framework.org
Published Monday 29th of March 2010
My old todo.txt was seriously starting to get out of hand so I decided it was time I structure all my tasks for all my projects in a little more organized manner.
I've also been wanting to show the public what's in store for aFramework (and its sister sites) for some time now and with the new bugtracker.a-framework.org I've done just that.
I don't really work in sprints but I thought it was fun to build the sprint backlog thingy anyway so I did.
It's also pretty nice to quickly get an overlook of the tasks I should be focusing on atm.
I'm sure most people have no use for a bug tracker but I was so fed up with that old txt-file I just had to do something about it :P
Join 1 others and post a comment
New jQuery Plug-in; Slide Presentation
Published Monday 22nd of March 2010
I'm trying to put together a little intro/demo for aFramework so I built this slide plug-in for jQuery.
Ultimately I didn't feel it was what I was after with the aFramework intro but perhaps someone will find it useful.
Run it on a container of a list of images with text and the plugin will slide through all the images, stopping on each to display all the paragraphs of text.
The HTML needs to be:
div: container ul li: the first step in the slide img: the image to be displayed in this step p: first paragraph of text to be displayed p: second paragraph of text... li: the first step in the slide img: the image to be displayed in this step p: first paragraph of text to be displayed p: second paragraph of text... li: the first step in the slide img: the image to be displayed in this step p: first paragraph of text to be displayed p: second paragraph of text...
And then simply run the plugin on the container and it'll do the rest. You can override the default width/height settings, their styling is only on a single class (.jquery-slide-presentation) so target your container's ID instead and you're gtg.
Have a look.
Be the first to post a comment
aFramework 3.2
Published Monday 15th of March 2010
Last week I put the latest version of aFramework up for download on the official site.
So What's New?
Well as usual there's been plenty of bug fixes, optimizations, tweaks and enhancements but to mention some of the bigger stuff...
Be the first to post a comment
New OurFuture.eu - Running on aFramework
Published Monday 22nd of February 2010
I've mentioned before that I've been semi-busy (I still find time to snorkel :) with freelance.
A few days ago we went live with the new site (OurFuture.eu) and I'm pleased with how it all worked out.
Be the first to post a comment
Sidkritik.se - Få konstruktiv kritik på din hemsida
Published Monday 15th of February 2010
Många forum har en avdelning för kritik på hemsidor och de är ofta rätt aktiva. Jag har däremot aldrig sett en sida helt dedikerad till just hemsiderecensioner så jag bestämde mig för att bygga en.
Be the first to post a comment
aFramework Release
Published Monday 28th of December 2009
I've put it up for too long now but I've finally made a (beta) release of aFramework to the public.
I've had some freelance the last couple of months (a new version of "Our Life as Elderly") which has meant that I've had to fix certain things with aFramework like brushing up all the admins and fixing a couple of bugs.
The main thing though is that aFramework now natively supports more than one language on the same site. Each language gets its own URL like: mysite.com (default language), mysite.com/sv/ (swedish), mysite.com/es/ (spanish) etc.
I've also made tons of other fixes, tweaks and optimizations. If you check the svn commits you'll see plenty of them the last few months.
Anyway, as it all started to shape up quite nicely I figured it was time to release it to the public so I put together a super-simple one-page-style and a zip with the latest code and put it all on a-framework.org (everything else was taken :/).
There's a demo too where you can check out most of the features as well as try out the admin.
Laters
Be the first to post a comment
The Site Looks Weird in FF3
Published Tuesday 30th of June 2009
I've been doing more bug-fixing lately, and one I did recently introduced several new ones in FF3 but not in Chrome, Opera, Safari or FF3.5.
What I did was I added a "Continue Reading"-link at the bottom of the article on the home-page. In order to style it without using a class I used the :last-of-type pseudo-class:
#article > p:last-of-type = $icon;
As you can see I'm using a type of CSS-constants (new version in the works btw), and because many other selectors should be icons as well they're all merged by the constants-parser so in the end i end up with something like this:
#article > p:last-of-type, #article > dl:last-child dt, #quick-about > p:last-child { /* Icon styling */ }
What seems to happen is that when Firefox chokes on one of the selectors it ignores (or improperly parses) the entire block.
Since 3.5 is out I expect it to start taking over so I thought I'd leave this bug as it is.
Sorry for any inconvenience!
Be the first to post a comment
Bug Fixin'
Published Wednesday 24th of June 2009
My evening was kind of free today and I felt like coding so I took the time to sort out some annoying bugs I've been having with aFramework v3, and hence AndreasLagerkvist.com as well.
Here's a list of the updates:
- I've solved the case of the missing RSS-feed.
- I had a bug where line-breaks weren't allowed in comments - pretty bad, but fixed now.
- Removed previous-link from first page recent-comments.
- Now sorting the plugins by name.
- Now the date of a comment links to the comment, the author's name links to his/hers website.
- Fixed broken pagination for search-results.
+ some more, even less interesting fixes.
Stay tuned for real articles :)
Be the first to post a comment
Super Simple Ajax (Without a Framework)
Published Friday 12th of June 2009
If you're looking for the bare minimum when it comes to doing cross-browser GET or POST XHR then this might be the script for you.
I know there's hundreds (probably thousands) of these scripts out there already but even the most lightweight ones I could find seemed kind of bloated.
Example
// GET latest-comments.php and update the #latest-comments element superSimpleAjax({url: 'latest-comments.php'}, 'latest-comments'); // GET article with ID 12 and alert its contents superSimpleAjax({ url: 'get-article.php', data: 'id=12', callback: function (data) { alert(data); } }); // POST a comment to post-comment.php superSimpleAjax({ method: 'POST', url: 'post-comment.php', data: 'author=John Doe&email=johndoe@johndoe.com&content=Hi, my name is John Doe', callback: function (data) { alert('Thanks for your comment!'); } });
Grab the code from Google Code. It's about 1k uncompressed.
Enjoy!
Be the first to post a comment
New Domain, Design, Front-end and Back-end
Published Monday 1st of June 2009
Por fin! A brand new design on a brand new domain running on a brand new back-end!
It took a little longer than I expected but I've finally "finished" AndreasLagerkvist.com.
Join 3 others and post a comment