This is going to be a series of posts in which I'll show how I managed to get a simple yet functional ReactJS application working. I plan to write 1 blog post per major component detailing how it works and integrates into the app.

This was my start with ReactJS and I worked in this application for almost 1 month as seen by the git commits here. I went from 0% ReactJS knowledge to to some % knowledge of how things work in this UI\presentation framework.

Motivation

The motivation to learn it is that it's mainstream nowadays. ReactJS is also used to develop mobile apps... besides that, for a job application test I had to develop a To Do application with a set of requirements.

Requirements

Programming assignment for web development candidates

You can choose any programming language and web development framework, database, and web server you like. The web application you need to build is a basic todo list application with the following requirements:

- Users can view their todo list;
- Users can add, remove, modify and delete todo entries;
- Each todo entry includes a single line of text, due date and priority;
- Users can assign priorities and due dates to the entries;
- Users can sort todo lists using due date and priority;
- Users can mark an entry as completed;
- You don't need to spend time on UI/UX design, if you do, it will be a bonus;
- Provide a RESTful API which will allow a third-party application to trigger actions on your app (same actions available in the app);
- Provide authentication and authorization service for both the app and the API;
- As complementary item to the last requirement, you should be able to create users in the system via an interface, eg a signup/register screen.

Web Tech Stack

I took the challenge! Developed a SPA - Single Page Application using ReactJS. Why not!? I also used Visual Studio Code as the IDE in tandem with the web tech stack in which I'm experienced with: C#, ASP.NET Core Web API, SQL Server, etc.

The App

The following is the app's homepage:

Figure 1 - App home page

The left side menu when clicked gives access to the Todos form and grid.

Figure 2 - Left side menu

The right side menu allows the user to login\logout and check their profile.

Figure 3 - Right side menu

In order to be able to access the Todos form\grid the user must be authenticated.

Figure 4 - Todo form + grid

Database

Everything was developed in Mac OS and as such the database that stores todo data is an SQL Server container image running in Docker.

Figure 5 - SQL Server database image running in Docker

Web API

The Web API was implemented using an ASP.NET Core Web API project. There's also a Swagger protected help page configured.

Figure 6 - Web API Swagger help page

Source code structure

The following screenshots show how the code is structured:

Figure 7 - App structure in Visual Studio Code Explorer window

- src folder holds all the source code files for the ReactJs app.

- TodoApi holds the source code files for an ASP.NET Web API project.

The ReactJS project skeleton was created\bootstrapped with Create React App as described in the README file.

Expanding the src folder we have this:

Figure 8 - ReactJS SPA app source code files

Expanding the TodoApi folder we have this:

Figure 9 - Todo ASP.NET Web API source code files

App dependencies

The ReactJS app uses the following dependencies as listed in package.json:

"dependencies": {

"@auth0/auth0-spa-js": "^1.6.3",

"@date-io/date-fns": "^1.3.13",

"@material-ui/core": "^4.9.1",

"@material-ui/icons": "^4.9.1",

"@material-ui/pickers": "^3.2.10",

"@testing-library/jest-dom": "^5.1.1",

"@testing-library/react": "^9.4.0",

"@testing-library/user-event": "^8.1.0",

"axios": "^0.19.2",

"date-fns": "^2.9.0",

"formik": "^2.1.4",

"moment": "^2.24.0",

"react": "^16.12.0",

"react-dom": "^16.12.0",

"react-router-dom": "^5.1.2",

"react-scripts": "^3.3.1",

"react-toastify": "^5.5.0",

"yup": "^0.28.1"

},

Git history

The git history is a nice way to remember what I did along the way:

Git History on master by all authors

Adding Auth0 placeholders...
340657a (HEAD -> master, origin/master) by Leniel Macaferi , Sat May 02 2020 (54 minutes ago)
1 file changed, 2 insertions(+), 2 deletions(-)

Small fixes...
5b98458 by Leniel Macaferi , Fri Feb 21 2020 (2 months ago)
2 files changed, 3 insertions(+), 3 deletions(-)

- Added Roles claim... it's retrieved from Auth0 access_token; - Improved footer; - Added missing toastify messages; - Improved Profile.
2cd5cd3 by Leniel Macaferi , Tue Feb 11 2020 (3 months ago)
5 files changed, 84 insertions(+), 19 deletions(-)

- Added Bearer token support to Swagger so that it's now possible to authorize with a token prior to testing the Web API endpoints; - In TodoItemsController the current user is now extracted while getting Todos so that the user can only retrieve their todos; - Added User property to TodoItem model; - Externalized getUser from Auth0 so that it can be called from stateful ReactJS components like Todo.js; - Made use of getUser() on Todo component; - Beautified Profile component.
b704348 by Leniel Macaferi , Mon Feb 10 2020 (3 months ago)
8 files changed, 122 insertions(+), 19 deletions(-)

- Added scopes and protected Get Todos Web API call with read:todos scope. https://auth0.com/docs/quickstart/backend/aspnet-core-webapi/01-authorization#validate-access-tokens - Added Profile component
13a8675 by Leniel Macaferi , Sun Feb 09 2020 (3 months ago)
13 files changed, 173 insertions(+), 62 deletions(-)

- Made Get Todos protected by using [Authorize] attribute; - Added JwtBearer support to the ASP.NET Core Web API; - Moved BrowserRouter to index.js so that the works as expected. More info here: https://stackoverflow.com/q/60123391/114029 - Externalized getTokenSilently in Auth.js to be able to pass it to axios request interceptor.
ab74c14 by Leniel Macaferi , Sat Feb 08 2020 (3 months ago)
12 files changed, 182 insertions(+), 51 deletions(-)

Added Auth0 to be able to authenticate and authorize users. https://auth0.com/
7ab2538 by Leniel Macaferi , Fri Feb 07 2020 (3 months ago)
9 files changed, 892 insertions(+), 170 deletions(-)

- Added search todo functionality; - Improved the todos table by adding Table pagination actions and made the header sticky; - Improved todo form by disabling the save button when there are errors or when the form is not dirty yet, that is, the user has not changed anything yet; - Added global error message with the help of toastify;
2d59cf4 by Leniel Macaferi , Thu Feb 06 2020 (3 months ago)
5 files changed, 190 insertions(+), 44 deletions(-)

- Commented out InMemoryDatabase in the Web API project and started using a full featured SQL Server database with UseSqlServer. Accomplished that on Mac OS side using Docker and a Developer version of SQL Server 2017; More info here: https://database.guide/how-to-install-sql-server-on-a-mac/ https://stackoverflow.com/a/60080206/114029 - Added Swagger to the Web API project; https://docs.microsoft.com/en-us/aspnet/core/tutorials/getting-started-with-swashbuckle?view=aspnetcore-3.1&tabs=visual-studio - Changed Web API default port from 7777 to 8888; - Improved global Progress bar. Set its position to absolute so that it won't push content down when it is displayed; - Moved todo related components to their own folder.
581da74 by Leniel Macaferi , Wed Feb 05 2020 (3 months ago)
16 files changed, 72 insertions(+), 29 deletions(-)

- Added cancel button to todo form. This is useful when the user is editing a todo and wants to cancel the action; - Implemented an improved version of todo form using the HOC [Higher Order Component] withFormik; this allowed passing a parent component [Todo] function down to the child component EnhancedTodoForm which is hooked to the the TodoForm component; Amazing stuff! :-) https://jaredpalmer.com/formik/docs/api/withFormik - route icons are now dynamically retrieved; - Added react-toastify libray to be able to show customized messages to user. https://github.com/fkhadra/react-toastify
469e858 by Leniel Macaferi , Tue Feb 04 2020 (3 months ago)
12 files changed, 328 insertions(+), 100 deletions(-)

- Added request and response interceptors to axios: https://github.com/axios/axios#interceptors ... this will allow a hooking place to display toasts (messages) to the user. This is one of the next thing to be added; - Added a menu tp AppBar using a Drawer component" https://material-ui.com/components/drawers/; - Started using react-router: https://github.com/ReactTraining/react-router; - routes are exported from routes.js; - Added About and Home pages.
7412ec3 by Leniel Macaferi , Mon Feb 03 2020 (3 months ago)
17 files changed, 3682 insertions(+), 3186 deletions(-)

- Got editTodo working; - Improved themes; - Removed unused npm packages.
4afd71e by Leniel Macaferi , Sat Feb 01 2020 (3 months ago)
8 files changed, 158 insertions(+), 866 deletions(-)

- Delete todo(s) done; - WIP Edit todo; - Added axiosInterceptor which handles  the animation when any Web API is called. It shows a Material-UI ; - Externalized custom styles in themes.js; - Many improvements in Todos table.
9d3e032 by Leniel Macaferi , Fri Jan 31 2020 (3 months ago)
13 files changed, 236 insertions(+), 139 deletions(-)

Handling setSelected after deletion happens...
9be189f by Leniel Macaferi , Thu Jan 30 2020 (3 months ago)
1 file changed, 8 insertions(+), 3 deletions(-)

Added delete todo functionality with a gotcha: https://stackoverflow.com/a/33846760/114029
5ad3cbd by Leniel Macaferi , Thu Jan 30 2020 (3 months ago)
7 files changed, 77 insertions(+), 52 deletions(-)

Added material UI Table component to be able to better visualize and operate on Todos. https://material-ui.com/components/tables/
febb4b3 by Leniel Macaferi , Thu Jan 30 2020 (3 months ago)
3 files changed, 371 insertions(+), 17 deletions(-)

- Created a global theme with createMuiTheme; - Improved AppBar - Got addTodo POST call to Web API working and TodoList updating as expected.
6f8a5fb by Leniel Macaferi , Thu Jan 30 2020 (3 months ago)
8 files changed, 700 insertions(+), 174 deletions(-)

Styled App structure and TodoForm with Material UI components.
38f169d by Leniel Macaferi , Wed Jan 29 2020 (3 months ago)
8 files changed, 357 insertions(+), 196 deletions(-)

Got Formik form fields working with material-ui https://material-ui.com/.
b309899 by Leniel Macaferi , Wed Jan 29 2020 (3 months ago)
10 files changed, 1027 insertions(+), 246 deletions(-)

- Added formik, yup and react-formik-ui. - Created a Todo form with formik.
bd8b355 by Leniel Macaferi , Mon Jan 27 2020 (3 months ago)
7 files changed, 771 insertions(+), 60 deletions(-)

Started integrating UI with Web API...
614c68e by Leniel Macaferi , Sun Jan 26 2020 (3 months ago)
9 files changed, 243 insertions(+), 83 deletions(-)

- Added ASP.NET Core 3.1 Todo Web API https://docs.microsoft.com/en-us/aspnet/core/tutorials/first-web-api?view=aspnetcore-3.1&tabs=visual-studio-code
06ce6d3 by Leniel Macaferi , Sun Jan 26 2020 (3 months ago)
15 files changed, 409 insertions(+), 4 deletions(-)

- Added handleChange event handler to todo-item component; - Handled todo complete state with setState; - Added Bootstrap: https://getbootstrap.com/
c15ff51 by Leniel Macaferi , Sat Jan 25 2020 (3 months ago)
8 files changed, 147 insertions(+), 38 deletions(-)

Converted some functional components to ES6 classes.
64dad12 by Leniel Macaferi , Sat Jan 25 2020 (3 months ago)
3 files changed, 53 insertions(+), 30 deletions(-)

- Got todo items displayed from a todo list JSON file. - Used array.map to create a React TodoItem component dynamically avoiding code repetition.
84cf3fc by Leniel Macaferi , Sat Jan 25 2020 (3 months ago)
5 files changed, 94 insertions(+), 25 deletions(-)

Created basic components and applied some styles including dynamic styling with JavaScript.
90ac727 by Leniel Macaferi , Sat Jan 25 2020 (3 months ago)
6 files changed, 128 insertions(+), 18 deletions(-)

Added .eslintrc.json and modified app name.
f1953ac by Leniel Macaferi , Fri Jan 24 2020 (3 months ago)
4 files changed, 14480 insertions(+), 1 deletion(-)

Initial commit from Create React App
04291f4 by Leniel Macaferi , Fri Jan 24 2020 (3 months ago)
18 files changed, 9789 insertions(+)

Source code

GitHub repository: https://github.com/leniel/ReactToDo

Figure 10 - GitHub repo with % of source code by type

Next

So stay tuned because in the next part I'll start covering the components in a top down approach, that is, we'll start looking at the index.js file where everything gets hooked up.

Today I wanted to save a backup copy of all my Mac OS Skype chat history.

First thing I did was look for where Skype stores chat history. This Skype’s support page provided the path:

How do I see my chat history in Skype for Mac OS X?

In my case the folder is here:

/Users/leniel/Library/Application Support/Skype/lenielmacaferi

Inside this folder there’s an SQLite database file called main.db (mine is 13.1 MB) with all chat history. For more details on that, check this answer on SuperUser:

Viewing the full Skype chat history

I wanted to backup that folder to the cloud more specifically to Google Drive. A new Google Search and then I found a great piece of software called MacDropAny by the young developer Sebastian Hallum Clarke! Basically it allows you to keep any folder synced to the cloud and supports many cloud service providers: Dropbox, Box.com, Copy, Google Drive, iClouDrive, MediaFire or Microsoft SkyDrive.

I got the MacDropAny 2.12.zip zip package and extracted the .app. Moved it to Mac OS Applications folder and opened it.

It asks you to choose a folder to sync with the cloud. I wanted to select that Skype chat history folder described above. Problem: that folder is stored inside the Library folder that is hidden by default in Mac OS and so it won’t show up in the list of folders available to MacDropAny. To fix that, follow what’s described here. Open Mac OS Terminal and type:

chflags nohidden ~/Library/

Now when asked to Choose a folder, Library will be available:

Figure 1 - Select Skype user folder (lenielmacaferi) to be backed up to the cloud

After clicking Choose we need to select the Cloud service provider where to store the files:

Figure 2 - Selecting cloud service provider

Then it’s necessary to choose where to store the files in Google Drive. I created a new folder there called Skype and selected it:

Figure 3 - Choose an existing folder (Skype) on Google Drive or create New Folder

It then allows you to give a different name to the folder to be backed up. I kept the same name and clicked Sync.

Figure 4 - Name the folder copy (I kept the same)

You may be prompted to enter your password to allow MacDropAny to access the Library folder. Provide the password if asked and you’re done.

Figure 5 - MacDropAny Folder Sync Success message

This is the cloud’s power at its best.

Now I have a security copy of all my Skype history in a “safe” place.

If you would like, make a donation to Sebastian:

Figure 6 - Sebastian’s donation message

He did what’s not available as of now in Google Drive at least, that is, sync any given system folder to the cloud.

Big thank you Sebastian!

Today I downloaded one more dictionary to use with Sublime Text 2. Sublime Text is a multipurpose text and code editor. So far the best IMHO. I want to spell check my Portuguese texts of course. I followed the instructions described here to grab an additional dictionary.

From that page we have that:

Sublime Text uses Hunspell for its spell checking support. Additional dictionaries can be obtained from the OpenOffice.org Extension List

I then headed to OpenOffice.org to search for a pt-BR dictionary. I found it and then when I downloaded it from http://extensions.services.openoffice.org/en/project/Vero I got a file with a different extension (.oxt) of that used by Sublime Text 2. More on this bellow…

The file name is Vero_pt_BR_V208AOC.oxt.

Using Mac OS I tried to place this file inside this folder

/Users/leniel/Library/Application Support/Sublime Text 2/Packages/User

following the instructions given by Sublime Text 2 doc.

Closed Sublime Text 2 and reopened it. Went to the menu View > Dictionary and the new dictionary wasn’t there.

Well, something is plain wrong here. The already installed dictionaries that come with Sublime Text are present in this folder:

/Users/leniel/Library/Application Support/Sublime Text 2/Packages/Language - English/

Inside the above folder there are two English dictionaries with file extensions: .aff and .dic.

A little bit more thinking and I tried what could do the trick. I renamed the downloaded dictionary file from Vero_pt_BR_V208AOC.oxt to Vero_pt_BR_V208AOC.rar. Opened the compressed file and to my surprise there they were… extracted the files pt_BR.aff and pt_BR.dic. Easy as pie.

It turns out the .oxt file is just a wrapper…

I renamed the folder Language – English to just Languages and placed the files pt_BR.aff and pt_BR.dic in this folder. Closed Sublime Text 2 and reopened it. The new dictionary appeared:

Figure 1 - Sublime Text 2 Dictionary menu option listing the pt_BR dictionary just added

Hope it helps.

This is another post to add to my MP3 series…

Yesterday I tried to add/import a folder full of MP3 files to my iTunes library. Just after adding I opened iTunes and went check those MP3s. To my surprise the MP3s were not added to iTunes. I had a hard time trying to find those files since iTunes moved them from their initial location to a special folder called Not Added. My MP3s ended up here:

/Users/leniel/Music/iTunes/iTunes Media/Automatically Add to iTunes/Not Added/2012-01-16 14.34.38

Note that iTunes created a folder inside Not Added named with the date and time the import operation occurred. The folder Not Added also stores image files and whatever file iTunes doesn’t recognize as valid files to be imported.

Now I see that I have some folders like that one - that are being created since 2010-9-17 (when I bought my Mac mini) and some of those folders have MP3 files that I didn’t notice were missing in my library.

Then I realized that for some odd reason iTunes rejected those files. I googled about it with "iTunes won't import MP3" and to my delight I found a forum thread in which the user Afric Pepperbird recommended a fantastic tool called MP3 Scan+Repair by Christian Zuckschwerdt. Using this great piece of software I managed to add those MP3s to my iTunes library.

So as way to say thanks I decided to write a post to demonstrate how it works.

1 - Download MP3 Scan+Repair (it's in Beta and is free for the moment)

http://triq.net/articles/mp3-scan-repair-download

2 - Open the App and drag and drop the problematic folder (the one that lies within the Not Added folder) to the app screen:

Figure 1 - MP3 Scan+Repair main screen

3 - Select all the files using command+A and then click the hammer button (mouse button is over it) to repair the files:

Figure 2 - MP3 Scan+Repair listing the files and their respective problems

See the Messages column with the description of what’s wrong with each file… even warnings prevent iTunes from adding the MP3 file to its library.

When repairing MP3 Scan+Repair will try to recreate the MP3s moving the old ones to the trash and writing the new ones to the current folder.

After following these easy steps you should be good to go and add those MP3s files to your iTunes media library.

The app is straightforward and does what it advertises… I’m really satisfied!

This is a quick tip related to something that I just tried today and that worked.

My camera SONY DSC-HX100V has GPS capability built-in but it won't work everywhere and it needs some time to acquire the satellite signal. This way if you just want to take a quick snap you may end with photos that don’t have GPS location in their Exif metadata. GPS is a recent capability when we talk about cameras.

Figure 1 - SONY DSC-HX100V camera with built-in GPS

Taking that into consideration, let’s say you have some photos in iPhoto (Mac OS) or whatever program you use to manage your photos. I mention iPhoto here since it’s the app I use. Those photos don't have a location set due to no GPS signal available where the photos were taken. So how can one add that missing GPS location info/data on those photos? By the way, this process is called geotagging.

This is what I’ve tried and what worked perfectly in my case:

1 - Open Google Maps and find the place/point where you’ve taken the photos.

2 - Right click that place/point you want in the map and select Center Map here.

3 - Click the Link button. Black mouse pointer is over it in the screenshot bellow.

Figure 2 - Google Maps link popup box with URL that contains GPS coordinates

A popup box will open. Copy the text/URL and paste it in your preferred text editor app. The link will look something like this:

http://maps.google.com/maps/ms?msid=201266260819946046546.0004a0e1b939dec67f18e&msa=0&ll=-22.428568,-44.619633&spn=0.001983,0.004128

Pay attention to the highlighted part that correspond to the longitude and latitude data.

4 - Select the photos you want in iPhoto to apply Location information and press command+I to access the Assign a Place box. Copy the highlighted text above and paste it in the box. Press the enter key to finish the task.

Figure 3 - Adding GPS coordinates to iPhoto Assign a Place box

This procedure works great when you just want to add GPS coordinates in your photos no matter if your camera has a built-in GPS or not since any photo can be geotagged nowadays.

Hope it helps!

You can check my photos in this slideshow:

I decided to follow a different path to learn software development for the iPhone - instead of online tutorials and Apple docs I got a book. I postponed my desire to learn but it’s time to revive it. I grabbed a beginner’s book on the subject: A Beginner's Guide to iOS SDK Programming by James A. Brannan & Black Ward. This book covers iOS 4.2 + Xcode 4. iOS 5 is on the verge of being released…

I had to download the recent Xcode and its accompanying SDK bits again ( 3.17 GB ) as the ones I had installed were out of date (from September 2010) . It was just a matter of hitting Mac App Store and looking for Xcode. The download has everything you need to install to be able to follow the book samples.

As I started creating the sample projects in Xcode I thought it’d be an excellent opportunity to store these samples in an online repository ( repo ) with source code control for further reference and to share/allow the beginner developer to download and study all the samples. It’s also a good chance I have to play with Git since I’ve been using Subversion during the last years.

This post covers the basics to integrate Xcode with GitHub for the Mac OS user. GitHub is a web-based hosting service for software development projects that use the Git revision control system.

I try to synthetize lengthy and scattered docs you find on the subject and provide links to key docs and posts…

I learned how to use Xcode Organizer to integrate my online GitHub repository with Xcode built in support for software control management and started sending the projects to GitHub right after the second book sample. It’s better to start early or you’ll never do it!

This article in Mac OS Developer Library: Managing Versions of Your Project has everything you need to configure your project to use it with Git.

When you create an online/remote repository in GitHub you get instructions on how to set up the repo as getting a copy of the repo to work locally in your computer or sending an existing project to the remote repo. This help article from GitHub clarifies some things: Set up Git in Mac OS.

This post has the steps you have to follow to get a GitHub repo to work with Xcode projects: Version Control System with XCode 4 and Git Tutorial.

You’ll have to use Mac OS Terminal to type some commands. Nothing difficult.
As a matter of fact you should familiarize yourself with Terminal if you haven’t yet. The real fun is when you play with git commands in Terminal (take for example the powerful rebase command). Later in this post I’m going to use the support offered by Xcode which has UI for basic git commands as commit, push, pull, merge, etc - but Xcode doesn’t give you the power of the full set of git commands that are only available through the command line.

These are the Terminal commands I typed to send the book’s initial sample projects (QuickStart and C Main Project) to my remote repository located at GitHub: https://github.com/leniel/iPhone-Beginner-Guide
Take a special look at the highlighted commands:

Last login: Fri Aug 19 19:29:32 on ttys001
Leniel-Macaferis-Mac-mini:~ leniel$ cd /
Leniel-Macaferis-Mac-mini:/ leniel$ cd iPhone
Leniel-Macaferis-Mac-mini:iPhone leniel$ cd Local
Leniel-Macaferis-Mac-mini:Local leniel$ ls
C Main Project                iPhone Beginner's Guide.xcworkspace
QuickStart
Leniel-Macaferis-Mac-mini:Local leniel$ cd QuickStart
Leniel-Macaferis-Mac-mini:QuickStart leniel$ ls
QuickStart        QuickStart.xcodeproj
Leniel-Macaferis-Mac-mini:QuickStart leniel$ git remote add origin git@github.com:leniel/iPhone-Beginner-Guide.git
Leniel-Macaferis-Mac-mini:QuickStart leniel$ git push -u origin master
Counting objects: 16, done.
Delta compression using up to 2 threads.
Compressing objects: 100% (14/14), done.
Writing objects: 100% (16/16), 8.27 KiB, done.
Total 16 (delta 2), reused 0 (delta 0)
To git@github.com:leniel/iPhone-Beginner-Guide.git
* [new branch]      master -> master
Branch master set up to track remote branch master from origin.

Leniel-Macaferis-Mac-mini:Local leniel$ cd "C Main Project"
Leniel-Macaferis-Mac-mini:C Main Project leniel$ ls
C Main Project            C Main Project.xcodeproj
Leniel-Macaferis-Mac-mini:C Main Project leniel$ git push -u origin master
To git@github.com:leniel/iPhone-Beginner-Guide.git
! [rejected]        master -> master (non-fast-forward)
error: failed to push some refs to 'git@github.com:leniel/iPhone-Beginner-Guide.git'
To prevent you from losing history, non-fast-forward updates were rejected.
Merge the remote changes (e.g. 'git pull') before pushing again.  See the 'Note about fast-forwards' section of 'git push --help' for details.
Leniel-Macaferis-Mac-mini:C Main Project leniel$ git pull origin master
warning: no common commits
remote: Counting objects: 16, done.
remote: Compressing objects: 100% (12/12), done.
remote: Total 16 (delta 2), reused 16 (delta 2)
Unpacking objects: 100% (16/16), done.
From github.com:leniel/iPhone-Beginner-Guide
* branch            master     -> FETCH_HEAD
Merge made by recursive.
QuickStart.xcodeproj/project.pbxproj             |  288 ++++++++++++++
QuickStart/QuickStart-Info.plist                 |   38 ++
QuickStart/QuickStart-Prefix.pch                 |   14 +
QuickStart/QuickStartAppDelegate.h               |   19 +
QuickStart/QuickStartAppDelegate.m               |   73 ++++
QuickStart/QuickStartViewController.h            |   13 +
QuickStart/QuickStartViewController.m            |   44 +++
QuickStart/en.lproj/InfoPlist.strings            |    2 +
QuickStart/en.lproj/MainWindow.xib               |  444 ++++++++++++++++++++++
QuickStart/en.lproj/QuickStartViewController.xib |  156 ++++++++
QuickStart/main.m                                |   17 +
11 files changed, 1108 insertions(+), 0 deletions(-)
create mode 100644 QuickStart.xcodeproj/project.pbxproj
create mode 100644 QuickStart/QuickStart-Info.plist
create mode 100644 QuickStart/QuickStart-Prefix.pch
create mode 100644 QuickStart/QuickStartAppDelegate.h
create mode 100644 QuickStart/QuickStartAppDelegate.m
create mode 100644 QuickStart/QuickStartViewController.h
create mode 100644 QuickStart/QuickStartViewController.m
create mode 100644 QuickStart/en.lproj/InfoPlist.strings
create mode 100644 QuickStart/en.lproj/MainWindow.xib
create mode 100644 QuickStart/en.lproj/QuickStartViewController.xib
create mode 100644 QuickStart/main.m
Leniel-Macaferis-Mac-mini:C Main Project leniel$ git push -u origin master
Counting objects: 14, done.
Delta compression using up to 2 threads.
Compressing objects: 100% (12/12), done.
Writing objects: 100% (13/13), 3.95 KiB, done.
Total 13 (delta 3), reused 0 (delta 0)
To git@github.com:leniel/iPhone-Beginner-Guide.git
   05ec270..fe84a7a  master -> master
Branch master set up to track remote branch master from origin.
Leniel-Macaferis-Mac-mini:C Main Project leniel$

Great! With the above commands I have sent both projects to my repo located at GitHub.

It’s important to note that for each project I created in Xcode I selected the option to create a local git repository as shown in Figure 1:

Figure 1 - Xcode - Selecting Create local git repository for this project

With this in place I can now safely delete my local copy of both projects (folder Local I used above in Terminal commands) and work directly with the code of my remote repository. Let’s do it:

Open Xcode Organizer selecting the menu Window => Organizer:

Figure 2 - Organizer window accessible through Xcode’s Window menu

I suppose you have already configured and added (+ button in the bottom left of Figure 2) your GitHub repo (green circle in Figure 2) to the Organizer following the docs I linked above.

To get a local working copy of your remote repository you must click the Clone button (see bottom part of Figure 2) and choose a location to place the repo files. After doing this you’ll get a new repo (mine is located in the folder /iPhone/iPhone-Beginner-Guide as you see in Figure 2). When I click my local copy of the repo I get this beautiful screen where I can see commit comments and changes I made to each file along the way (click to enlarge):

Figure 3 - Local ( Clone ) copy of my online GitHub repository seen in Xcode Organizer

Now it’s just a matter of working and modifying the project files or adding new projects and commit them to the repository through the menu File => Source Control => Commit…

One more important note is: when you commit something, it’s just committed in your local copy. You need one additional step: push the changes to GitHub. In Xcode you can select the file(s) or project(s) you want and go to File => Source Control => Push… For more on this, read: Commit Files to Add Them to a Repository.

In my case, when I select Push I get this Xcode dialog where I can select the Remote endpoint (GitHub repository) to which my committed files will go:

Figure 4 - Xcode Push user interface and GitHub remote location

As a bonus I created a Workspace as seen in Figure 5 to have all the sample projects at hand in a single Xcode window. The workspace has references to the projects and work somewhat like Microsoft Visual Studio’s solution file if you’re used to Microsoft developer tools. The workspace helps a lot during the commit and push tasks!

Figure 5 - Xcode workspace with projects at left side pane

Well, I’m new to this new Xcode world and I think I’ll learn a lot from these simple sample beginner projects.

The next thing I'm gonna do is learn what file types I can ignore when committing… Thanks to StackOverflow there’s already a question addressing this very topic: Git ignore file for Xcode projects

Edit: following the advice of the above StackOverflow question, I added a .gitignore file to the repo.

Hope this helps.

I mentioned in my last MP3 series post that I had the material to write a new post regarding this topic and so today I’m fulfilling the promise I made. I’m going to show how you can use the powerful Swiss Army knife called Mp3tag (Windows “only” app) right within your Mac. Yes, you read it right. You can run Mp3tag using your Mac. Nowadays almost everything is possible…

The great thing here is that there’s a way to use our beloved Mp3tag in Mac OS. I even asked a question at SuperUser where I was trying to find some similar software that I could use in Mac. Here’s the question: Alternative to mp3tag for Mac OS X. Well, after searching a little bit more I found a great site called PlayOnMac. What is PlayOnMac?

PlayOnMac is like wineskin, winebottler or crossover a piece of software which allows you to easily install and use in your Mac numerous games and software designed to run only with Microsoft®'s Windows®.

I then found Mp3tag bundle here. You get a .dmg file which contains Mp3 Tag.app (172.5 MB) on disk. Just mount the .dmg file with a double click and extract the .app file to your Applications folder in Mac OS dock. Doing this you have the power of Mp3tag right inside your Mac. No Windows virtual machine needed/no need to load your bootcamp Windows. It’s good because you’ll have more memory left for your Mac (in the case of a virtual machine) or you won’t spend your time changing the operating system (in the bootcamp case).

Ok, the bundle is a little bit lazy to load and the visual (retro) is Windows like but who mind?

There’s nothing better than a use case to showcase something. Today I need to organize some MP3 tags because their Track - Artist - Title fields are all a complete mess. Some data are already there and some are missing completely. I of course will use Mp3tag guessing pattern feature to solve this.

To get to the Guess values dialog window, click the Actions (Quick) icon in the toolbar and select Guess values in the dropdown menu. Screenshots can be seen here.

Here are the MP3 files before the process:

Figure 1 - Mp3tag Guess Values Window for Track Artist and Title in File Name [ before ]

As you see most of the tracks have 1 in the Track field and Title and Artist fields are missing in most of cases. All the information that is missing is present in the Filename field. Really interesting fact.

Let’s take advantage of Filename info and fill the missing tags with that data. How? Using Mp3tag Guess values window.

Source format: %_filename%

Guessing pattern: %track% - %artist% - %title%

Really easy, isn’t it?

What the hell these % symbols are doing here? They are simple placeholders that tell Mp3tag about a specific pattern found in fields of MP3 files. In this specific case, Mp3tag will extract data from the Filename field ( source ). Looking at Figure 1 we see that all file names follow a pattern: Track # - Artist - Title. Such pattern is then passed to Mp3tag in the Guessing pattern field. With this input Mp3tag is able to infer/parse the file names and split them accordingly. Each part will then be used to fill the correct MP3 tags.

Here’s the post-processed MP3 files:

Figure 2 - Mp3tag Guess Values Window for Track Artist and Title in File Name [ after ]

That’s a much better view and experience within your preferred Media Library software!

Things like this makes me really happy with computers…

Hope you find it as useful as it’s being to me in this hard task of keeping a MP3 collection organized. I at least try my best.

To see more ways of using the Guessing Pattern, check the MP3 series of posts.

About a month ago I started the creation of an ASP.NET MVC 3 app to a buddy. I’ll write some blog posts in the near future sharing my experiences with this awesome web framework. This app I’m still developing is a web application that I develop using my "new” computer. Today I use Mac OS as my main operating system and since I’m using ASP.NET I also need to use Windows.

Parallels Desktop is the way to go to have a Windows virtual machine [ VM ] running side by side with Mac OS. This way you have the best of both worlds. I discuss more about Parallels Desktop here.

One of the things I wanted to do during the development was seeing how the app would look like when viewed in a different OS, in this case, I’d like to see it running in Mac OS as if I were an end user accessing the app. This is good to test how the app behaves when it’s viewed in a different environment, that is, the perspective/environment of the end user, and not the developer’s perspective/development environment.

It’s cool to see the app running in a different OS and different web browsers. In Mac OS I have the chance of testing it against Safari too. I also have the chance of seeing how exceptions are being handled. There are certain types of errors that only happen when the end user is using the app in his environment. I think you know that already. This kind of testing allows me to deliver a better user experience.

When the app is accessed from the Mac side, the first difference is mainly visual because my Win 7 VM has all visual effects (clear type) disabled and so things look really simple if compared to Mac OS. I’m running the VM with no visual effects so that I have a somewhat fast VM to do the development. I only have 4 GB RAM available and I have to share it with both operating systems. I thought 4 GB RAM would suffice but that’s not the case. I have already ordered 8 GB RAM but am eagerly waiting it arrive from US. That’s another story that I plan to write in other blog post.

The reason I’m writing this post is that things don’t work at first when you try to access in Mac your app that is running in Windows VM. To get things working from both sides ( host = Mac OS and VM = Windows 7 ) they must see/communicate with each other. That’s where I had to do some work to get things going. So here are some instructions of what you need do:

1 - Set a fixed IP address for Windows VM
Set up a fixed IP address (read this page for a complete guide) in your Windows 7 virtual machine. This will make it easy when you need to access your app from Mac OS side. You won’t need to take note of different IP addresses handled by the DHCP server each time you restart your VM.

Figure 1 - Windows7 VM with fixed IP address

Above I have given the IP 192.168.1.106 to the VM. As I do not have a lot of devices connected to my wireless router, this IP is just fine.

2 - Set Virtual Machine’s Network Type
In your Parallels VM devices bar set your network type (orange arrow) as bridged:

Figure 2 - Parallels Desktop VM devices toolbar

3 - Test Communication between Host and VM
Make sure both operating systems can see each other.

Open Mac OS Terminal and execute a ping command:

ping 192.168.1.106

Change the IP with the IP you have in your Windows VM.

You should see something like this:

Figure 3 - Mac OS Terminal pinging Windows 7 VM

Now, open Windows 7 Command Prompt and ping Mac IP address. To see your Mac IP address go to System Preferences. Under Internet & Wireless, select Network.

Figure 4 - Mac OS IP address

Let’s ping 192.168.1.100:

Figure 5 - Windows 7 VM Command Prompt pinging Mac

As you see, both computers can see/communicate with each other. This means that the Network is working as expected.

4 - Configure Windows VM webserver for external traffic
What address should you type in a Mac OS browser to access the app? Well, this needs a little bit of caring. You’ll probably fail when trying to access the app with the same address you use in Windows side.

I’m using IIS Express as the web server in Windows. You can install it using Microsoft WebMatrix. IIS Express is by default configured to only server internal traffic (Windows VM). As I’m trying to access it from an external environment (Mac OS), I needed to configure it. The first link bellow was the main doc that helped me:

Serving external traffic with WebMatrix Beta
Handling URL Binding Failures in IIS Express (Serving External Traffic)

Basically I had to configure HTTP.SYS, create a URL binding that allow me to access the app in Mac side and disable Windows Firewall for my private home network.

4.1 - Configure HTTP.SYS
Type this command in Windows command prompt:

netsh http add urlacl url=http://leniel-pc:7777/ user=everyone

Change the url in the above command according to your desired configuration.

Note: the above command requires elevation. Right click the command prompt shortcut and select Run as administrator.

4.2 - Configure URL binding
As mentioned in the 2nd doc referenced above you must open your applicationhost.config file and add URL bindings that fit your needs. Mine is located here:

C:\Users\Leniel\Documents\IISExpress\config\applicationhost.config

Take a look at the last binding I have added:

<site name="FitnessCenter" id="3">

<application path="/" applicationPool="Clr4IntegratedAppPool">

<virtualDirectory path="/" physicalPath="C:\Users\Leniel\Documents\Visual Studio 2010\Projects\FitnessCenter\FitnessCenter.Web" />

</application>

<bindings>

<binding protocol="http" bindingInformation="*:7777:leniel-pc" />
<binding protocol="http" bindingInformation="*:7777:localhost" />

<binding protocol="http" bindingInformation=":7777:leniel-pc" />

<binding protocol="http" bindingInformation="192.168.1.106:7777:"/>

</bindings>

</site>

4.3 - Configure Windows VM firewall
The last step is disabling Windows VM firewall for your Home or work private networks.

Figure 6 - Windows 7 VM Firewall

As I just use this virtual machine to do software development, it’s ok to me to disable the firewall. Be careful though.

5 - Access Win 7 VM web app in Mac OS
After all this configuration you should be able to browse your app externally.

To see if everything is working, open a browser in Mac OS and try to access the app typing something as this in my case:

http://192.168.1.106:7777/

That’s it.

Hope it helps.

Motivated by this question at StackOverflow: RegExp PHP get text between multiple span tags, I decided to help.

Recently I got a Mac mini. I still hadn’t played with PHP on Mac and to debug my answer to that question I needed a way to test the code. So I thought: why not also give PHP a try on Mac OS since its my main OS today? Oh, good idea, go learn something new… :D

The first thing I did obviously was recurring to Google and searching for something that could help me get there.

I hit a pretty good tutorial to enable PHP on Mac at About.com written by Angela Bradley that gets to the point: How to Install PHP on a Mac. Along the way I had to solve only one minor thing described in the caveat section at the end of this post.

You see that the title of this post has the word installing (well I thought I had to install it – that was my first reaction), but in fact it could be the word enabling because PHP is an integral part of Mac OS X Snow Leopard and we just need to enable it as you’ll see soon.

Here we go. Follow these steps:

1 - Enabling the Web Server
PHP works hand in hand with a webserver. Mac OS already comes with Apache web server and so we just need to enable it. To do so, open System Preferences in the Dock. Then click the 'Sharing' icon in the Internet & Network section. Check the ‘Web Sharing’ box.

Figure 1 - Web Sharing option under the Sharing configuration in System Preferences

Now type this address in your browser: http://localhost/. You should get a message that reads: It works!

2 - Enabling PHP
PHP also comes bundled in Mac OS, but it’s disabled by default. To enable it we need to edit a hidden system file located in this path: /private/etc/apache2/httpd.conf.

I used BBEdit text editor to edit such a file (note that I marked the box Show hidden items in the screenshot below):

Figure 2 - Editing the hidden system file httpd.conf with BBEdit

Now within that file search for:

libexec/apache2/libphp5.so

Delete the character # in the start of the line so that that entire line should now read:

LoadModule php5_module          libexec/apache2/libphp5.so

Save the file.

3 - Testing the installation
There’s nothing better to test the PHP installation than using its own information. To accomplish this, write a one liner simple .php file named test.php with this content:

<?php phpinfo() ?>

Place this file inside your personal website folder. Mine is located in this path:

/Users/leniel/Sites/test.php

Now let’s test this page by typing its address in the browser:

http://192.168.1.103/~leniel/test.php

As you see, the address points to my personal website as seen in Figure 1.

When you run this simple .php page you should get something like this:

Figure 3 - Testing PHP installation with its own configuration’s information

If your PHP installation is OK, the test page will display PHP's information. If it displays the page code, you need to restart the Apache server.

You can restart Apache by entering the following in Terminal:

sudo apachectl restart

Try to reload the page again. Everything should work.

Well done!. Now you can play with PHP on your Mac computer and write some neat codez. :)

Caveat
When I tried to restart Apache server I got the following error:

ulimit: open files: cannot modify limit: Invalid argument

I resorted to this solution: Mac OS X 10.6.5 broke my apachectl

This post is where I’ll maintain useful things that I usually do in my day to day while using the computer and that I find nice to know about. They can save you some mouse clicks and most important: save you time.

As time passes by, this page will grow. :)

Adobe Acrobat

How to select only the text of a column of a table in a PDF file?

shift+option and select the text with the mouse.

iTunes

How to go to Current Song playing in iTunes?

command+L

or

You can right click the time bar and select Go to Current Song context menu option.

How to Delete duplicate songs from iTunes?

option+delete and select Keep File

How to delete Album’s embedded artwork from all tracks at once?

Select all tracks from the album. Right click over anyone of them and select the Get Info menu option. Now check the checkbox on the left side of the Artwork field (see screenshot below). Click OK and voila, iTunes will delete the artwork embedded in each file so that you can add a new/bigger/better artwork. This way you avoid having duplicate artwork making iTunes show the only one you want.

How to create a playlist using a Finder folder?

Select the folder in Finder and drag it to iTunes icon in the dock. iTunes icon will blink. Wait a second or two. iTunes will be the active window (I consider iTunes is already open in the background before you perform this operation). Keep holding the mouse button. Now drag the folder to the Playlist section in iTunes left bar and release the mouse. As you see in the picture, I’m dragging and dropping a folder called My MP3 folder to iTunes PLAYLISTS section. When iTunes recognizes that you want to create a playlist from a folder it’ll highlight its left bar. This let’s you know that it’s time to release the mouse button and drop the folder there.

Mac OS

How to open a docked application at startup time/login?

Right click the app icon in the dock and select Options –> Open at Login.

How to search anything in your Mac from anywhere?

command+space This will bring Spotlight.

How to put Mac to sleep?

option+command+eject

How to go to any folder in Finder by its address/path (like Windows Explorer address bar)?

Right click Finder icon in the dock and select Go to Folder. Type or paste the folder path and click Go.

Added on 5/14/2011

How to copy the full path of a file or folder in Finder (really useful in software development)?

Use this fantastic Copy Full Path automator service workflow by Marcus Barnes. Read his post for more info.

Learn more about Automator in this post: Automate tasks in Mac OS with Automator

How to show hidden files in Finder?

In Terminal type:

defaults write com.apple.finder AppleShowAllFiles TRUE

killall Finder

Added on 5/24/2011

How to open a terminal command window starting from the current folder you have open in Finder?

Use cdto. Download it here.

cdto is a small app that opens a Terminal.app window cd'd to the front most finder window. It’s designed (including it's icon) to be placed in the Finder window's toolbar as shown below (mouse cursor is over it):