Installing AMPP on Mac OS X Mavericks

I was trying to use the Brackets extension called Theseus to debug some JavaScript, but unfortunately it wasn’t working.

For some reason I was unable to run MAMP on port 3000 instead of 80.

I decided to install AMP and phpMyAdmin directly on my Mac which is on Mavericks. I followed the directions at “Coolest Guides On The Planet” to install everything, which worked well. Then when I went back to Brackets Theseus worked perfectly!

It turns out my silly mistake was simply calling the same script twice on the same page.

Laverna – Open Source Alternative to Evernote – Installing Locally

I recently learned about an open-source alternative to Evernote called Laverna. This app stores your notes using IndexedDB and LocalStorage although it says you can sync to cloud storage.

I had a little difficulty installing it on OS X and MAMP but Freedif was very helpful, despite that it’s for Linux. This assumes you have Node and npm installed and that you’ve started the servers in MAMP.
Continue reading “Laverna – Open Source Alternative to Evernote – Installing Locally” »

Skip Debugging Framework in Chrome

While stepping through some JS while you are debugging, you may find the debugger pausing on code within a framework you’re using such as jQuery. You don’t need to debug jQuery so you’d like to skip stepping through it. To do so:

1. Go to chrome://flags and enable Developer Tools Experiments, then press the Relaunch Now button
2. Go to developer tools settings, under Experiments, and check Enable frameworks debugging support, then close and re-open the inspector
3. Go to settings again, but this time on the General tab check Skip stepping through sources with particular name, and enter in jQuery (or whatever file you want to ignore).

How I Set Up Sublime Text

This is just for my reference for when I install a clean version of Sublime Text.

Click View > Side Bar > Show Open Files
Click Sublime Text > Preferences > Settings – User and paste this into the config object, to match JSLint’s preferences (this may change when using a different language)(fix the quotes to regular ones, WordPress insists on prettifying them)

“tab_size”: 2,
“translate_tabs_to_spaces”: true

Go to the Sublime Package Control – Installation page and follow the directions.

Press Cmd-Shift-P and Install packages – BracketHighlighter, SidebarEnhancements, Colorpicker, and SublimeCodeIntel

Run ‘npm install tern’ in the terminal, then Cmd-Shift-P install package TernJS.

Follow directions here to install JSLint package. Open ~/Library/Application Support/Sublime Text 3/Packages/JSLint/JSLint.sublime-build and add /usr/local/bin/ to the node command on line 3. Save the file, restart ST.

Click Tools > New Snippet and create HTML5 snippet and save as html5.sublime-snippet

Open desired folder and Project > Project Save As, use Cmd-Ctrl-P to move between projects.

Optionally refresh your memory on keyboard shortcuts using a cheatsheet (this one is for Sublime Text 3 on OS X).

CSS3 & Sass Resources

I recommend CSS3 – Pushing The Limits highly, and it covers the bleeding edge of CSS3.

Other resources include Learn Advanced HTML & CSS and Learn Layout, and Lea Verou has many interesting CSS3 articles. Scalable and Modular Architecture for CSS is a book that is freely available online, and there are several Sass books including Sass & Compass For Designers, Sass and Compass in Action and Sass for Web Designers.

This front end web development test is very difficult and informative.

Mistake

The other day I moved to a new hosting account and made the mistake of not backing up first. I was able to use a backup from July to get many of the posts. Then I found Google had cached the posts from August, so I was able to re-post those. However, I lost the theme I was using, which was a very skeletal alteration of an HTML5 starter theme called Bones. One thing I don’t like about the default 2013 theme is that all the navigation is in the footer instead of in a sidebar, although that is probably easily fixed. It is mobile friendly and responsive so it works for now at least.