bootstrap: two toggle buttons on the nav bar

Problem: Both menus on the mobile version collapses when the buttons are pressed. You only want one menu to unfold at a time. 

Found a fix here: http://jsfiddle.net/gNUEx/

Modified the code a bit:

  var navbar = $('.navbar');

  navbar.on('click', '[data-toggle="collapse"]', function(event){
   var $target = $($(this).data('target')); 
    if(!$target.hasClass('in'))
      $('.container .in').removeClass('in').height(0);    
    })

front-end to server-side workflow

There’s a different workflow for everybody so I’m wondering what other people’s workflow are when it comes to doing front-end and then server-side.

I would usually:

  1. code the base template in PHP (so I have separate header / footer / and content pages. If I need specific body classes, I just write up functions quickly).
  2. upload the PHP files to my personal server to show the client for approval
  3. apply the code to the CMS (WordPress, python, etc.), whichever it is the devs are using. I’m not always part of this though.

How about you?

SublimeText2, LESS css, and Bootstrap

image

I’ve finally managed to figure out how to download/set up Sublime Text 2 Packages, via the Package Control plugin, and oh man it is awesome. To be honest, I’m not sure how I got it working because I was trying it out yesterday and couldn’t figure it out at all (is it just a timing thing or was I temporarily brain-dead yesterday?).

So yeah, I normally work with Foundation for a base framework but for this project I was using Bootstrap. It was really easy (as expected, I suppose) and I could imagine myself switching to Bootstrap with my other projects if not for Foundation 4 becoming mobile-first recently.

So this is also the first time I’m using that framework with LESS css. I’m particular about colors on my text-editor, so yes, I really wanted to figure out installing packages on Sublime so I can have proper LESS Syntax (LESS-sublime on github).

image

And then I got SimpLESS to automatically convert the .less file to .css (because it’s free. Although I’ve seen similar plugins on Sublime (LESS-build and LESS2CSS), I just haven’t tried them.

The last time I read a SASS vs LESS article was like a year ago but I guess after this I could check out SASS too. Do you have a preference over one or the other?

I don’t know why I haven’t started with either SASS or LESS earlier (maybe I should have tried figuring out Sublime Text 2 more! Haha) but this makes me enjoy designing in the browser more.

That said, I’m coming down with the flu (AGAIN!). Stupid summer heat + afternoon rains. :’(

responsive design and client pitches

Right now, I’m testing out waters with a potential client who is requiring me to submit PSDs of 4 different resolutions (mobile phone, tablet, “medium” desktop, wide-screen desktop) and I’m taking around four hours just trying to design for 1 resolution of 1 specific screen.

How I would do it, personally:

  1. Design wireframes for the 4 different resolutions in HTML
  2. Do a PSD for the smallest and widest screens
  3. Create mocks for the 2 middle screens for one page
  4. Proceed with the PSD design for the rest of the screens
  5. Code the designs in HTML/CSS

So, since this is a “testing the waters” phase, I’m not sure it’s the best way to proceed with this workflow (PSD-first and with 4 resolutions per screen design) since it’ll cost me (and the client) more hours. D: I think I should email the possible client about it, and then see if he wants to push through with it still.

wordpress codes: advanced custom fields and grouping select repeater fields

Here’s an example of a repeater field on WordPress:

image

Basically, I wanted the page to render the service names under the similarly-labeled service labels.

My brain isn’t very good with the whole PHP logic thing, so I got the internet to help me out. I adapted this original response on StackOverflow and edited it to fit the Advanced Custom Fields code.

$options = get_field(‘products_and_services’);

foreach( $options as $k => $v ){

/* check for services */

if( $label!=$v[‘service_label’] ){

/* New Service */

if( $label!=false ){

/* Close the Previous Service */

echo ‘</ul>’;

}

/* Open the New Service */

echo ‘<h3>’ . $v[‘service_label’] . ‘</h3><ul>’;

$label = $v[‘service_label’];

}

/* Add a Label */

echo ‘<li>’.$v[‘service_name’].’</li>’;

}

/* Close that Last Service */

echo ‘</ul>’;

And it worked perfectly.

If you have tips on how to improve this then please tell me :)

video portfolio on wordpress (from semi-scratch)

I’ll be making a longer blog post about this eventually, but I’m just listing down some significant resources I’ve been using these past few days: 

  • WordPress – I don’t have time to learn a different CMS right now, and my client is comfortable and familiar enough with this. Time saved is currently worth it.
  • Foundation – although it supports only until IE8, I find all the bonus components helpful when building rapidly. 
  • WP-Foundation – Zurb’s Foundation for WordPress. 
  • The Complete Guide to the WordPress Settings API – I’ve been making a theme options page from these tutorials. Fast, simple, and just enough. 
  • Advanced Custom Fields – one of those gems I learned from Create.PH. Makes custom pages insanely easier. 
  • Things I learned from working on A Sporting Life – being involved in this project months and months ago (which is altogether another story) forced me to learn about Vimeo and Youtube APIs, among other things. I pulled these things from various tutorials/forums online, but I don’t have time to go into detail right now. 
  • Vimeo Javascript API – first time I’m customising what happens when you click on elements in the page that would affect the embedded video from Vimeo. I know this is elementary, but I felt so proud of myself for making things work! :P So yes, let me have my happy moments, haha. 

Cramming in a week: obviously my fault, but things are progressing at least. Been three days and I think I’ll be able to finish a workable / presentable version tonight. 

Doing wordpress tweaks and dabbling on javascript here and there is a bit different for an unseasoned back-end coder like me. The way I cope is to copy tutorials, for example, and then see for myself how it’s working, and then I customise some of the things while occasionally referring to the tutorial in the process.

The downside is that I don’t really understand everything to the minute coding detail. What I get is the bigger picture of this functioning segment of the site. I think I’m more of a designer rather than someone who technically understands code, but I can make things work and I think that too is important. 

In a nutshell, my brain works like this: 

  1. I need to do <THIS>.
  2. Oh, this code makes <THIS_EXAMPLE> happen.
  3. Hmmm, so I tweak and edit these lines to make <THIS>.
  4. <THIS> works! 

So in the end, I don’t think I’m the most excellent back-end programmer out there, and most of what I do is actually copy-and-tweak, but it makes sites work, and it gets my job done. I’m willing to learn more about the technical side of things, but I honestly don’t think I’m going to be a full-fledged programmer. The faster way for me to learn is just execute, execute. 

It’s great that this is a production company who wants to have a mobile version, though I don’t have time to finish the mobile design right now. The mobile version has to wait. 

This is more like a, we’re-friends kind of project but I’m hoping I can finish this by January and sell the mobile site design aspect to future clients :D I know there is a rule to never work for free but sometimes you have to be a little underpaid when you’re starting out. 

Better, better, better

  1. Tying up some lose ends in work.
  2. Stay firm in saying ‘no’ to projects for a while, until I get my shit together.
  3. Have a little faith in myself.
  4. Relax and enjoy Taipei.

My sessions have been very helpful, I’d like to believe. I’m told I will continue to struggle with some things but I just have to remind myself, always, while being conscious of the things my doctor has told me. I have those bad moments, but they always go away eventually, and I can look back at them as something that I felt instead of an experience that’s still ongoing.

Taipei is happening too soon and I didn’t even notice. It’s going to be fun, I’m going to take a breather — and maybe things will be better. :)

Love/hate relationship with Pixelmator and Sketch (where is Retina support for Adobe!?)

Because designing with Adobe on my retina MBP is a pain in the eyes (all those pixels, gahh!) I’m trying to replace my workflow with Pixelmator and Sketch. Unfortunately, it’s not too easy because:

(1) Designing for, say, 1144px on Pixelmator makes the canvas look as small as this: 

I’m not sure if I’m being stupid or what, but have I missed some kind of option in Pixelmator which Sketch thankfully has? 

Obviously, designing for the same size/ratio would make my job way easier than trying to squint at the pixel-accurateness of Pixelmator. 

(2) As much as I would like to do everything in Sketch because of this issue (or feature), it does NOT support PSD files as of the moment. Also, weirdly enough, despite being a vector program, I cannot copy+paste vectors from Illustrator to sketch. Or open .EPS files. There is no way to copy+paste vector files into a vector-drawing app? Whaaaat? 

Does anyone have any tips or suggestions?