nov 30 2011

Skitch

A screen shot of my Skitch blogI’ve always found it hard to get a grab on where to store and man­age my occa­sional inspi­ra­tional screen shots. Sav­ing them to the hard drive works, but I really miss an overview and a way to add notes and key­words for findability.

But recently I started using Skitch. It’s a great lit­tle app for stuff like tak­ing screen shots, sketch­ing ideas and shar­ing the whole lot. It eas­ily solves the prob­lem of man­ag­ing screen shots. Just open Skitch, drag the screen snap tool across the part of the screen, you want to save, upload and tag it. And there you go, a blog with screen shots, eas­ily man­aged with notes and tags for findability.

Check out my Skitch blog here.

By Morten Brunbjerg Bech • Apps, Inspiration • 0 • Tags: , , , ,

aug 12 2011

Flexible Widgets for WordPress

Flex­i­ble Wid­gets is a plu­gin for Word­Press that makes it pos­si­ble to dis­play a wid­get on selected cat­e­gories and/or pages.


The Flex­i­ble Wid­gets plu­gin lets you dis­play a wid­get on any cat­e­gory or page you wish. When set­ting up the wid­get, you are able to select the cat­e­gories and/or pages where you want to dis­play the wid­get. If none are selected, the wid­get will be dis­played glob­ally on your site, exactly like a default Word­Press widget.

The plu­gin comes in handy if you need your side­bar con­tent to change con­tex­tu­ally from page to page in rela­tion to your main con­tent. It is espe­cially use­ful if you want to use Word­Press as a CMS.

Flex­i­ble Wid­gets will replace the default Word­Press widgets.

Sreen­shot

Widget administration interface in the WordPress plugin Flexible Widgets

Select­ing cat­e­gories and pages in each widget’s back end.

Instal­la­tion

  1. Upload the flexible-widgets folder to the /wp-content/plugins/ directory
  2. Acti­vate the plu­gin through the ‘Plu­g­ins’ menu in WordPress

or search for “Flex­i­ble Wid­gets” in the “Add new” sec­tion of the plu­g­ins menu in your Word­Press admin inter­face and hit “Install now”.

Change log

0.3

  • Fixes an issue: Option­ally dis­play wid­gets on the home page, whether it is set up to be a sta­tic page or the blog posts page.

0.2

  • Tiny update to get the plu­gin and author URIs right.
  • Update on the instal­la­tion info.

0.1

  • Brand new plu­gin. Still play­ing with the bub­ble wrap.

Known issues

May con­flict with themes or plu­g­ins which include cus­tom widgets.

Please see the plu­gin sup­port forum.

Addi­tional information

The Flex­i­ble Wid­gets plu­gin con­sists of a bunch of ideas and lines of code, I wrote for the Word­Press theme in use at the web­site of Hors­ens Pub­lic Library.

This is my first plu­gin for Word­Press. I am sure, there is room for improve­ment. The code is far from per­fect as my pro­gram­ming skills are some­what lim­ited. But I do think the idea is quite good, so if you can write lean code and are des­per­ately in need of a small side project, you should be very wel­come to help me out.

If you have any ques­tions or com­ments, feel free to leave a reply.

By Morten Brunbjerg Bech • Web Development, Wordpress • 5 • Tags: , , ,

dec 3 2010

Sådan finder man variabler i WordPress

Når man arbe­jder med tem­plates i Word­Press, kan det være enormt nyt­tigt at vide, hvilke vari­able, man har at arbe­jde med. Jeg havde et konkret prob­lem omkring en tag tem­plate (tag.php), hvor jeg havde brug for at finde ID-nummeret på det aktuelle tag til brug i funk­tio­nen get_tag_link().

Jeg fandt det ved at skrive lis­ten over mulige vari­able i query_vars ud med føl­gende stump kode:
<?php print_r($wp_query->query_vars); ?>

… og fandt, at den vari­abel, jeg havde brug for, hed tag_id.

Særde­les anven­deligt, når man har brug for overb­lik over tilgæn­gelige variable.

By Morten Brunbjerg Bech • Web Development, Wordpress • 1 • Tags: , , ,

maj 19 2010

Google Fonts API — Det her er stort!

Som bek­endt har man rel­a­tivt begrænsede typografiske muligheder i web­de­sign. Der findes en del workarounds, såsom Cufon og sIFR og de går an, men det bliver aldrig helt godt. Nu vender Google hele møllen på hov­edet med host­ing af fonts og en API, der gør det sindssygt nemt at imple­mentere.

Et lille eksempel:

Skrift­typen Lobster

Smæk dette link ind i head sek­tio­nen i dit HTML dokument.

<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>

Så er du klar til at bruge Lob­ster i din css som enhver anden font.

Det skulle efter sigende fun­gere helt tilbage til IE6. Skulle man endelig være neg­a­tiv, kunne man sige at udval­get af skrift­typer stadig er ret begrænset, men mon ikke, der med tiden bliver lavet om på det?

Via Net­tuts.

By Morten Brunbjerg Bech • CSS, Quick tips • 0 • Tags: , , ,

maj 17 2010

Er du front end-ninja på udkig efter nyt job?

Mine gamle kol­leger hos Midt Mar­ket­ing Inter­ac­tive søger en erfaren front end-ninja, der kan bøje en Photoshop-fil om til et færdigt website.

Du skal stå for opsnit­ning i HTML over imple­menter­ing i CMS til under­vis­ning af kun­den eller redak­tionelt arbe­jde med tek­ster og billeder. Du skal samar­be­jde med Midt Mar­ket­ings web­de­signere om at finde den bed­ste løs­ning til kun­den i forhold til pris, bruger­ven­lighed og høj teknisk kvalitet.

Er du lidt af en pixel-pusher, har udpræget kvalitetssans og sæt­ter en ære i at levere løs­ninger i høj kvalitet? Er du en haj til HTML, CSS, Javascript og kender jQuery ud og ind?

Sådan et job kan du få i Hern­ing. Er du inter­esseret?
Se hele jobbeskriv­elsen her.

By Morten Brunbjerg Bech • Quick tips • 0 • Tags: ,

mar 22 2010

Øg maximum upload filstørrelse på 2 mb i WordPress

Som udgangspunkt kan man kun uploade filer op til 2 mb i Word­Press. Ikke nød­vendigvis et prob­lem for garvede brugere, der er i besid­delse af et billed­be­han­dling­spro­gram, men abso­lut et prob­lem for brugere, der tror, et billede er et billede, og ikke har begreb om fil­stør­relser. Fotos fra et 5 megapixel kom­pak­tkam­era fylder nemt et par mb, og visse brugere vil undre sig over at være ude af stand til at uploade sådan en svend direkte fra kameraet.

Det har egentlig ikke noget med Word­Press at gøre, men der­i­mod ind­still­ingerne i php.ini. Det er imi­dler­tid ikke alle web­hoteller, der tillader sine brugere at ændre i php.ini. Hos Giga­host kan man ændre visse ind­still­inger, men det slår af en eller anden grund ikke helt igen­nem i WordPress.

Jeg har imi­dler­tid fået føl­gende løs­ning til at fungere:

1. Opret en ny php.ini fil med føl­gende ind­hold:

post_max_size = 20M
upload_max_filesize = 20M
max_execution_time = 900

2. Upload filen til wp-admin mappen.

Og voila! Nu kan man uploade filer op til 20 mb.

Via Likoma.com

By Morten Brunbjerg Bech • Usability, Wordpress • 0 • Tags: , , , , ,

feb 9 2010

Sådan fixes IE7’s z-index bug med jQuery

Det er sæd­van­ligvis Inter­net Explorer, der kræver ekstra opmærk­somhed, workarounds og udviklingstid, når man skal gøre et web­site kom­pat­i­belt på tværs af web­browsere. Jeg har lige spenderet en del tid på at komme omkring en grov ren­der­ings­fejl i IE før ver­sion 8, der ram­mer den orden hvori CSS posi­tionerede HTML ele­menter  sta­bles. Jeg er rendt ind i IE’s z-index bug.

Opgaven: En lang række list items skal udstyres med fork­laringer i form af drop downs. HTML koden ser således ud.

<ul class="linklist">
  <li>
    <h4>Overskrift 1</h4>
    <a href="#" class="dropdown-trigger">Vis beskrivelse</a>
    <div id="beskrivelse-1">
      Beskrivende note der falder ned, når man klikker på linket "Vis beskrivelse".
    </div>
  </li>
  <li>
    <h4>Overskrift 2</h4>
    <a href="#" class="dropdown-trigger">Vis beskrivelse</a>
    <div id="beskrivelse-2">
      Beskrivende note der falder ned, når man klikker på linket "Vis beskrivelse".
    </div>
  </li>
</ul>

CSS koden ser således ud.

.linklist li {position:relative;width:270px;}
.linklist li div.hidden {display:none;} /* skjuler div'en, før den aktiveres med jQuery .slideDown() */
.linklist li div {
  background:#ddd;
  border:1px solid #ccc;
  left:0;
  padding:6px 12px 12px;
  position:absolute;
  top:20px;
  width:244px;
}

<div> ele­mentet bør således placere sig ovenpå <li> ele­menterne. Det virker bare ikke i IE før ver­sion 8, fordi stakke­or­de­nen er fejl­be­hæftet. Jeg prøvede at løse prob­lemet ved at definere en lavere z-index på <li> ele­menterne, end på <div> ele­menterne, men det løste ikke prob­lemet. De efter­føl­gende <li> ele­menter blev stadig vist ovenpå det aktive <div>ele­ment.

Efter en del søgn­ing på net­tet fandt jeg Vance Lucas’ jQuery-baserede løs­ning af prob­lemet: 

$(function() {
  var zIndexNumber = 1000;
  $('div').each(function() {
    $(this).css('zIndex', zIndexNumber);
    zIndexNumber -= 10;
  });
});

Ideen er, dynamisk at vende stan­dard z-index stakke­or­de­nen af HTML ele­menterne om. Således sikrer man, at ele­menter, der lig­ger højere i kildeko­den også har en højere z-index orden på siden, hvilket burde løse ren­der­ing­sprob­lemet i IE.

Det løste ikke umid­del­bart mit prob­lem. Jeg havde imi­dler­tid andet­st­eds læst, at man skulle kunne løse prob­lemet ved at give det rel­a­tivt posi­tionerede omgivende ele­ment en højere z-index orden, end det abso­lut posi­tionerede element.

Det gav mig ideen til også at lave en Vance Lucas jQuery løs­ning på det rel­a­tivt posi­tionerede <li> ele­ment, men med en højere z-index orden. Altså:

$(function() {
  var LizIndexNumber = 1100;
  $('li').each(function() {
    $(this).css('zIndex', LizIndexNumber);
    LizIndexNumber -= 10;
  });
  var DivzIndexNumber = 1000;
  $('div').each(function() {
    $(this).css('zIndex', DivzIndexNumber);
    DivzIndexNumber -= 10;
  });
});

Og voila! Så virker det.

By Morten Brunbjerg Bech • CSS, Web Design, Web Development • 2 • Tags: , , , , , ,

jan 20 2010

Adgang til Apache på mac fra et virtuelt OS

Jeg har lige installeret et virtuelt gæs­te­op­er­a­tivsys­tem i form af Win­dows XP via Vir­tu­al­Box på min mac for at kunne teste web-produktioner i diverse ver­sioner af Inter­net Explorer. Men det kneb lidt i den virtuelle Win XP med at få fat på de sites, jeg har kørende i virtuelle hosts under MAMP på mac’en.

Løs­nin­gen skal findes i hosts filen på gæste OS’et (den virtuelle Win­dows). Hosts filen lig­ger her:

c:\windows\system32\drivers\etc\hosts

Her til­fø­jes en linie for hver virtuelle host, man har sat op i MAMP’s Apache con­fig fil:

10.0.2.2 sitenavn.tld

Hvor IP-adressen bruges som DNS-resolver af Vir­tu­al­Box til at iden­ti­fi­cere værtscom­put­eren, og sitenavn.tld er navnet på det site/virtuelle host, man har sat op i Apache.

Jeg fandt løs­nin­gen i Vir­tu­al­Box’ forum.

Det er muligvis banalt for netværks­folk, men jeg har efter­hån­den fået løst en del prob­le­mer via hosts filen på både mac, win og linux. Hosts-filen er klart et mere cen­tralt stykke værk­tøj, end jeg forstod for bare få år siden.

Se evt. også hvor­dan man opsæt­ter “Vir­tual hosts på mac under MAMP”.

By Morten Brunbjerg Bech • Tutorials • 0 • Tags: , , , , , ,

nov 30 2009

Sådan kaldes javascripts i WordPress

Da ver­sion 1 af stylesheets og tem­plates til Hors­ens kom­munes bib­lioteker i sin tid blev kodet op, havde jeg hen­tet javascript-biblioteket jQuery + diverse plu­g­ins, plac­eret dem i wp-theme map­pen og kaldt dem manuelt i theme’ets header.php script. Det var før jeg fandt ud af, at jQuery + plu­g­ins fak­tisk er inklud­eret i Word­Press og kan kaldes med ind­byggede funktioner.

Den “rigtige” måde at kalde javascripts på i Word­Press er med fuk­tio­nen wp_enqueue_script. Med denne funk­tion kan man kalde en række ind­byggede javascript bib­lioteker, heri­b­landt jQuery, Scrip­tac­u­lous og Pro­to­type. For at kalde jQuery, skriver man således føl­gende i header.php:

<?php wp_enqueue_script('jquery'); ?>

Har man sam­tidig brug for diverse jQuery afhængige plu­g­ins, f.eks. Thick­box eller jQuery UI, kan man nøjes med at kalde disse, da jQuery så kaldes automa­tisk. I så fald kan man nøjes med følgende:

<?php wp_enqueue_script('thickbox'); ?>
<?php wp_enqueue_script('jquery-ui-core'); ?>

Har man brug for javascripts, der ikke er ind­bygget i Word­Press, kan disse også kaldes med wp_enqueue_script. Hent koden, f.eks. jQuery Cycle, og placér den i en der­til indret­tet mappe i dit theme. Kald det dernæst på føl­gende måde:

<?php wp_enqueue_script('jquery.cycle.all.pack','/wp-content/themes/dit-theme-navn/din-javascript-mappe/jquery.cycle.all.pack.js',array('jquery')); ?>

Se doku­men­ta­tion til funk­tio­nen wp_enqueue_script her.

By Morten Brunbjerg Bech • Tutorials, Web Development, Wordpress • 1 • Tags: , , , ,

nov 13 2009

Virtual hosts på mac under MAMP

Jeg roder i øjeb­likket med en testin­stal­la­tion af Magento på min mac. I den forbindelse havde jeg brug for at rette i etc/hosts/ filen, men den er ikke umid­del­bart til at finde på en mac, da den er skjult. Det findes der heldigvis råd for. Jeg fandt en glim­rende vejled­ning her:

Foun­da­tion PHP: Cre­at­ing a vir­tual host in Mac OS X 10.5 (Leopard)

Jeg bruger imi­dler­tid ikke mac’ens ind­byggede Apache server, men MAMP. Der­for kunne jeg ikke rigtig bruge oven­stående vejled­ning til opsæt­ning af vir­tual hosts i Apache’s kon­fig­u­ra­tions­fil, httpd.conf. Det findes der også råd for. Her er en fin vejled­ning i opsæt­ning af vir­tual hosts under MAMP:

Sawyer McFar­land Media, Inc.: Set­ting Up Vir­tual Hosts for MAMP

Samme site har en fin ind­førsel i, hvor­dan man slip­per for MAMP’s default porte 8888 og 8889 i sine lokale URL’er (Se artik­lens figur 3).

By Morten Brunbjerg Bech • Quick tips, Web Development • 1 • Tags: , , , ,

1 2 3 4 5 6