Adding header video in custom pages

Twenty Seventeen WordPress theme has video support for headers. By default, the video header is only allowed on the front page, but there is an easy way to customize that using hooks by tapping into twentyseventeen_custom_header_args More

Managing z-index without loosing your hair

I’ve run into issues time and time again managing z-index. Sure, most of the time, z-index related issues are far from complex.

However, I’ve come to a passionate dislike of magic values and numbers. What is 58 or 3000 after all? It’s an arbitrary number. Wouldn’t it be a lot nicer to have layers in CSS, just like in Photoshop or Illustrator ? More

Easier way to make sure all strings are escaped in WordPress themes

We all know we should escape all the strings in a theme. WordPress theme review guidelines require it, and so does Themeforest.

After working on a theme for a longer period of time, it’s quite possible that you’ve slipped somewhere with unescaped echoes. If you’re going commando on your own – you still need to escape every little thing and be twice as careful if there are no additional set of eyes on your code. More

Find all unescaped i18n strings in in WordPress

It turns out, that from now on, it’s a best practice to escape with esc_html__() instead of simply doing __() in your plugins and themes.

Replacing everything with esc_html() is a solution, but what about the __() in your code that already contain some minor code ( like a few wrapping spans here and there ) ? More

Var_dump sucked.

Why I didn’t use var_dump() for a long time, even though it has very valuable information in it ?  You most probably guessed it. It looks terrible. Even when you fix it with adding <pre> tags around it, it’s still ugly.

Consider this code:

$fruits = array ( "fruits"  => array ( "a" => "orange",
                                       "b" => "banana",
                                       "c" => "apple"
                                     ),
                  "numbers" => array ( 1,
                                       2,
                                       3,
                                       4,
                                       5,
                                       6
                                     ),
                  "holes"   => array (      "first",
                                       5 => "second",
                                            "third"
                                     )
                );
var_dump($fruits);
die();

Well it is turned into this:

Plain var_dump

It’s ugly! It’s so ugly! There are no other words for it.

So I could never talk myself into using it, and because of that for the past few years, I did a print_r(), wrapped in those “pre” tags.

Until I saw a screencast by Jeffrey Way on Laravel, and I saw the single most beautiful var_dump in the history of mankind.

Pretty var_dump

Look at it! It’s so pretty! It’s the same data, but so much has changed!

So I wanted it too. After some googling, I found out, that it is a PHP Extension (that anyone can install) and not a Chrome extension (which was my initial guess). It’s called Xdebug, and you can get it at http://www.xdebug.org and you’ll probably want to read more about the installation ( http://xdebug.org/docs/install )

In addition, I initially thought, that I’d have some difficulties installing and setting Xdebug up, since I’m a MAMP user (I like graphical interfaces and all that good stuff, I just can’t help it, that’s why I am so excited about Xdebug after all). Turns out, that I was wrong (again).

Enabling Xdebug on MAMP (Pro) is as simple as, well – enabling Xdebug on MAMP (Pro). All you really have to do is:

  • Open MAMP
  • File -> Edit Template -> PHP -> PHP (your-version).ini
  • Go to the very bottom and uncomment the Xdebug extension (remove the semicolon at the beginning of the line), like so:
zend_extension="/Applications/MAMP/bin/php/php5.4.4/lib/php/extensions/no-debug-non-zts-20100525/xdebug.so"
  •  Restart MAMP

And That’s it! Enjoy!

 

FireSass with FireBug for FireFox.

Finally Nex3 released an “official update” in FireFox Addons. I’m not sure, but as far as I know the functionality still remains the same, and nothing actually had to be updated, except “FireFox compitability version” setting. There were “hacks” around (get the github version, change a line, be happy).

Crazy browser Versions

The Add-on was “outdated” for a while, just because FireFox is spitting new “major” versions every day now. I guess that is some bad influence of Chrome. In my opinion the “higher number” doesn’t really matter in the browser version, and if someone were to argue that it does, then I’d say that FireFox is still 8 versions behind chrome at the moment (what an outdated browser, meh?). Version updates (like from Version 1 to Version 2, or 3) should be with some visible significance! It doesn’t apply to Chrome, as Chrome does it in the background anyway. It doesn’t ask you if you want chrome 18 or chrome 29 or chorme 441, it just updates, and doesn’t break your extensions!

Safari is now what, 5.4 ? I wouldn’t think for a second that Safari is an “outdated” browser (even though the version number is smaller than IE6).

Anyway. I think Mozilla got it wrong there, and I’m just ranting here, because it broke the plugin at the Extension Directory, and I was lazy enough to not to compile one for myself.

What is FireSass ?

By now, I’d expect you know what is SASS, and you probably have guessed I like SASS.

Well, in short – FireSass does this:

See on the right ? It says “_type.scss (line 40)“.

Well that is because of the FireSass plugin. I can now see where the selectors “actually” came from, so this really helps when debugging with SASS. It doesn’t even mention that the only CSS file I’m using is called “style.css”, because CSS at this point is useless (for development) as I use SCSS exclusively. When looking something up, I’m interested in where did something come from in SCSS, and FireSass helps a ton with that!

Great, how do I get FireSass ?

Easy as pie.

First, you download & install the addon (you have to have FireBug first of course)
Then you go to your project you want to use FireSass with and set it to “emit debug info“.

If you’re using an app to do that, great – use that. If not, then you can look in the FireSass github page what steps you should take.

Don’t worry. It’s supersimple.

Basically what the GitHub pae says is that if you’re using SASS from Terminal, you add “–debug-info” to the watch statement.
If you’re using Compass and SASS, find the config.rb file, and add:

sass_options = {:debug_info => true}

Dashes and Underscores in Variables – SASS

“Why aren’t my variables working properly in SASS/Compass ?”

Well, one of the reasons could be Underscores and Dashes in SASS (and therefor Compass as well). In case you’ve missed it – a little quick tip.

Quick Example

$var-iable: #b4d455;
body {
 background-color: $var_iable;
}

Compiles to

body {
 background-color: #b4d455;
}

Say what ?

In SASS it doesn’t matter whether your variable has an underscore or a dash – they work both ways. This is something to be aware about. Trying to get two different variables (one with a dash and the other with the underscore) would be a bad practice anyway, but now you know you actually can’t 🙂

Mixins, functions too…

This doesn’t apply only to variables. You can define your mixins and functions one way, and call them the other way.

But just because you can, isn’t a good enough reason to start doing that.

But CSS Doesn’t do that…

One might argue, that SASS (SCSS) is aimed to be as close to CSS as possible, and it is. A valid CSS file is a valid SCSS file as well. But dashes aren’t considered the same thing as underscores in CSS!

I think the answer is simple: “some people like underscores, some like dashes”. That’s it.

For example I use underscores most of the time, as it is much, much easier for me to copy-paste variables from one place to another (double-click variable name with underscores, selects the whole variable name, instead of just one part in Sublime Text)

In the end

I think this is actually very useful, as I can (for example) use the whole Compass framework using underscores instead of dashes (which are used by default in Compass), and everything will work properly, as it is meant to.

Ruby on Rails and MAMP PRO – It’s a jungle out there.

Introduction

If you’re looking for the how to, and have no intention reading my rambling, go on and scroll down a little bit 🙂

So I’ve started learning Rails for a while now. I’ve been exploring a lot in the world of ruby and rails. Found tons of interesting stuff, watched a lot of screencasts, graduated from Rails for Zombies, and much more, but now, about a week ago I decided to finally get my hands dirty on my own Mac OS X Lion, and thats where it all started. Finally, today I decided not to give up and finish setting up Rails.

MAMP PRO Is a pit of bugs.

I develop with PHP a lot, and MAMP Pro has worked for me flawlessly up until now. I love the nice graphical interface I get to manage my local domain hosts (myproject.dev/), etc. and probably because of that I’ve managed to overlook all the bugs (for example not being able to reboot/shutdown my mac, until I’ve force quitted MAMP), but this day changed my perspective a little bit. But that is not what this story is about.

 

MAMP PRO and Ruby On Rails

This is the part where it got bad. At first, I thought – hey – wouldn’t it be nice to run Rails with the same MySQL server as MAMP, but hey – MAMP has moved MySQL installation to their local directory. Not only that, but it is missing files, so I can’t compile Ruby gems to install with MAMP.

So I went ahead and searched. I found some useful posts, or at least at that moment I thought so, about MAMP And Ruby: [ Article 1 ] , and [ Article 2 ] , but all I did was screw up my system.

In the end, I wish in all the hours I spent on Google, that I found a blog post like this one. It turns out, installing MAMP Pro and Ruby On Rails, and setting them up is super-duper-easy.

 

How to install Ruby on Rails 3.2.1 with Ruby 1.9.3 and MAMP PRO 2.0.1

First of all. If you don’t already have MAMP or MAMP PRO on your system, and you don’t have any intention of using PHP, stop reading this article. You don’t need MAMP Pro. Period. Take a look at POW and Brew. That’s all you need.

For the less fortunate – I assume you already have MAMP Pro, and have tried running gem install mysql2 without any success.
I use RVM, and if you don’t then I guess you have to be careful, and before certain commands need a sudo (like sudo gem for example), I’ll be writing about the RVM process, and yours shouldn’t be much different, just tweak it a little accordingly.

First, make sure you get to this point:

[plain]

~ ruby -v
ruby 1.9.3p0 (2011-10-30 revision 33570) [x86_64-darwin11.3.0]
~ rails -v
Rails 3.2.1

[/plain]

Now that we’re on the same page this is what you do.

First install brew. Here is their installation documentation: https://github.com/mxcl/homebrew/wiki/installation
Basically all you need is this command:
[plain]mkdir homebrew && curl -L https://github.com/mxcl/homebrew/tarball/master | tar xz –strip 1 -C homebrew [/plain]

Now, MAMP stands for Mac- Apache, MySQL and PHP. I know you (and I) have MySQL already installed, but that isn’t going to cut it, as I said before – MAMP has moved MySQL to a different location. Even their mysql.sock file is somewhere else, so we’re going to install another MySQL on the system with

[plain] brew install mysql [/plain]

Now that you have MySQL – Just install the mysql2 gem

[plain] gem install mysql [/plain]

 

You also might want to make an alias for the mysql.sock file, which MAMP has also moved for us, by running:

[plain]sudo ln -s /Applications/MAMP/tmp/mysql/mysql.sock /tmp/mysql.sock[/plain]

 

I would also suggest that you take a look at POW, it is a great, tiny, rails server for local development. Here is some information on Stack Overflow.
Thats it. I hope this helps you with MAMP and Rails, it sure as hell would helped me.

Cheers.