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);
})
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:
How about you?
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).
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. :’(
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:
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.
Building Save 22: design: constantly changing, slowly improving
above: a rough draft of the Save22 portal, back in October 2012
above: the Save22 portal today
Today we released a small update to Save22.com.ph / Save22.com.sg — the headers. There are a lot of other things that we’re still working on, thinking about, discussing, experimenting for…
work is good.
*lobby calls*
Ron: are we expecting a guy named J?
Everyone: huh? No.
Ron: *on the phone* no, we’re not expecting anybody.
Lope: do you want me to go and check?
Ron: ok.
Three minutes later —
Ron: Oh. My bad. It’s the SEO guy
Here’s an example of a repeater field on WordPress:
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 :)
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:
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:
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.
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. :)
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?
